# Hub UI — Full documentation index (English)

> Generated from the prerendered site. Other locales mirror these paths under /{lang}/.
> Docs: https://hubui.dev | Repo: https://github.com/hub-env/hub-ui | License: MIT

## Angular Component Library for Standalone Apps
https://hubui.dev/en/
Reusable Angular UI components — standalone, Signals-friendly, CSS-variable theming and accessibility. NPM packages for modals, tables, navigation and more.

## Carlos Morcillo
https://hubui.dev/en/about/
Carlos Morcillo builds Angular component libraries, design systems and developer tooling with a focus on accessibility, reusable architecture and production-ready documentation.

## ng-hub-ui-action-sheet — Angular Action Sheet
- api: https://hubui.dev/en/action-sheet/api/
- overview: https://hubui.dev/en/action-sheet/overview/
- styles: https://hubui.dev/en/action-sheet/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-action-sheet
- Latest release: 22.3.0 (2026-09-21)

Angular action sheet opened from a service: actions with roles, grouped or flat, handlers that can refuse to close, and dismissal by backdrop, keyboard or a drag of the sheet.

Use ng-hub-ui-action-sheet when a row or a toolbar button has to offer a few actions over the current screen, without a menu component sitting in the page for a sheet nobody has opened yet.

ng-hub-ui-action-sheet is a standalone Angular library that opens a sheet from a service and resolves once with what the reader chose. Actions carry a role: `cancel` is set apart at the end wherever it was declared, and `destructive` wears the danger colour. They can be listed flat or under group titles, and a handler can refuse to close, so a confirmation runs before the sheet goes away. There are three ways out — the backdrop, `Escape` and a drag of the sheet downwards — each reporting its own role and each running the cancel action's handler first. The sheet is a `role="dialog"` with `aria-modal`, named by its header, and focus moves into it on open.

Key highlights:
- Opened From A Service: No markup in the page for a sheet that is closed. open() mounts it, and the call resolves once with the action the reader chose or with how they dismissed it.
- Roles And Handlers: Cancel is set apart at the end, destructive reads in the danger colour, and a handler returning false keeps the sheet open when the work behind the action failed.
- Accessible And Themed: A modal dialog with trapped focus returned to its opener, and every visual decision behind a --hub-action-sheet-* variable.

Frequently asked questions:
Q: How do I open an action sheet in Angular?
A: Inject HubActionSheet and call open() with a header and a list of buttons. Nothing goes in your template: the service mounts the sheet on document.body itself and hands back a HubActionSheetRef whose result is a promise resolving to the role and data of whatever the user chose. The hub-action-sheet component is still exported, but it is deprecated and goes away in 23.0.0, because mounted by hand it resolves its promise and then stays on screen.

Q: How do I define the buttons of an action sheet?
A: As plain data, not as projected content: buttons takes an array of objects with text, role, icon, disabled, data, cssClass and handler, and you can nest them in groups to draw separators. A button with role cancel is lifted out of wherever you declared it and rendered in its own footer block, and role destructive styles the dangerous one. A handler that returns false vetoes the close, which is how you keep the sheet open after a failed action. icon is a CSS class string on an empty element, so the icon font is yours to supply.

Q: How is the action sheet dismissed?
A: Three ways, each of which can be switched off: a click on the backdrop through backdropDismiss, the Escape key through keyboard, and a downward drag on the grip through swipeToClose, which closes once the drag passes 64 pixels or a quarter of the sheet height. Choosing an action closes it too, and ref.dismiss() closes it from your own code. provideHubActionSheet() sets those defaults for the whole application, and a cancel button's handler runs on every dismissal, so one piece of cleanup covers all the exits.

Q: Does the action sheet become a popover or a dialog on desktop?
A: No. There is not a single breakpoint in its stylesheet: on a wide screen you get the same sheet anchored to the bottom, capped at 34rem and centred horizontally. If you want a menu anchored to the button that opened it, this is the wrong component. Two more things worth knowing before you reach for it: open() touches document straight away, so it has to run in the browser and not during server rendering, and the sheet traps Tab but does not make the page behind it inert, so a screen reader can still wander into it.

What changed in 22.3.0 (2026-09-21):
- **The sheet animates out, which `animation` already promised.** The option was documented as

## Hub UI for AI Coding Agents
https://hubui.dev/en/ai-agents/
Point your AI coding agent at ng-hub-ui: the instruction block to paste, which package covers which component, and the file each agent reads it from.

## ng-hub-ui-avatar — Angular Avatar Component
- api: https://hubui.dev/en/avatar/api/
- overview: https://hubui.dev/en/avatar/overview/
- styles: https://hubui.dev/en/avatar/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-avatar
- Latest release: 22.12.2 (2026-09-20)

Angular avatar component with initials, fallback images, presence badges and CSS variables for reusable user identity interfaces.

Choose this Angular avatar component when you need resilient user identity UI with fallbacks, initials, multiple image providers and design-system friendly styling hooks.

ng-hub-ui-avatar helps Angular applications display users consistently across menus, profile cards and collaborative interfaces. It covers the common edge cases such as missing images, initials generation, status indicators and shared sizing rules.

Key highlights:
- Reliable fallback system: Switch between image sources, initials and placeholders without leaving broken avatar states in production.
- Presence and status badges: Show online, busy or offline states in chat, admin and team-management interfaces.
- Useful in grouped UIs: Build avatar groups, user stacks and compact identity patterns with consistent spacing and sizing.

Common use cases: user menus; team lists; activity feeds; profile cards.

Frequently asked questions:
Q: How do I show a user avatar with initials when there is no picture?
A: Install ng-hub-ui-avatar and give <hub-avatar> both sources at once: [src] for the image and [name] for the person's name. The component builds a fallback chain, so when the image fails to load it marks that source failed and moves to the next one, which is the initials. autoColor derives the background from a hash of the name, so the same person always gets the same colour.

Q: Can it pull the picture from Gravatar or GitHub?
A: Yes: gravatarId, githubId and facebookId are inputs, and provideAvatar() sets the order the sources are tried in. Know what that means at runtime, though — the browser requests secure.gravatar.com, api.github.com or graph.facebook.com directly, so those services see your visitors' IP addresses and Gravatar receives the hashed email.

Q: How do I show a group of overlapping avatars?
A: Wrap them in an element with the hub-avatar-group class. The overlap is pure CSS rather than a component: --hub-avatar-group-overlap sets how far each avatar slides over the previous one, and --hub-avatar-group-ring-width with --hub-avatar-group-ring-color draw the ring that separates them.

Q: What should I know before choosing it over rolling my own?
A: Three things. size takes pixels only — there is no sm/md/lg scale, and the font size, badge and padding are all derived from --hub-avatar-size, so one number resizes everything. Grouping is a CSS class, not a <hub-avatar-group> component. And HttpClient has to be available in the injector even when you only ever render initials, because the avatar service asks for it unconditionally. Angular Material has no avatar component to compare with; mat-card-avatar is a styling directive.

What changed in 22.12.2 (2026-09-20):
- The npm keywords declare `ng-hub-ui`, the family name somebody searching for the ecosystem

## ng-hub-ui-badges — Angular Badges Library
- api: https://hubui.dev/en/badges/api/
- overview: https://hubui.dev/en/badges/overview/
- styles: https://hubui.dev/en/badges/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-badges
- Latest release: 22.7.3 (2026-09-20)

Semantic Angular badges for statuses, counters and removable filter tags, with CSS variables and public SCSS mixins for custom colour families.

Use ng-hub-ui-badges when your Angular application needs compact semantic status labels, counters and dismissible filters without falling back to one-off spans or Bootstrap badge classes.

ng-hub-ui-badges gives Angular teams a small but complete badge system: semantic colours, multiple visual surfaces, size and shape scales, status dots, optional icons and dismissible tags. Everything is driven by the shared `--hub-sys-color-*` token families and exposed `--hub-badge-*` custom properties, so the component family slots naturally into a design-system-first codebase.

Key highlights:
- One primitive, many badge patterns: Use the same component for statuses, counters, metadata pills and active-filter tags.
- Removable filter tags: Add a keyboard-accessible dismiss action when the badge represents an active filter or scoped token.
- Open Semantic Theming: Built-in colours use the design-system tokens and custom semantic names plug in through the public SCSS mixins.

Common use cases: workflow statuses; table and card metadata; active filter bars; notification counters.

Frequently asked questions:
Q: How do I show a badge or a status pill in Angular?
A: <hub-badge color="success" variant="soft">Online</hub-badge>. variant takes solid, soft, outline, ghost, subtle or surface, size runs xs, sm, md, lg, and shape is pill, rounded or square. Setting [dot]="true" drops the text and leaves the marker, and [dotOverlay]="true" with dotPlacement pins that marker to a corner of whatever the badge wraps, which is how the notification dot on an avatar is made.

Q: What is the difference between a badge and a chip?
A: A badge labels something; a chip is a token the user can pick. hub-chip carries a two-way selected and lives inside hub-chip-set, which is a role=group holding the current value, with selectionMode set to single or multiple. The trade is in the styling axes: hub-badge takes variant, size and shape, while hub-chip takes only color. Both can be removable and both emit removed when the dismiss button is used.

Q: Can a badge be clicked or dismissed?
A: interactive turns the content into a real button with aria-pressed and Enter and Space handling, emitting selected, and active marks it as chosen. removable adds a separate dismiss button beside it, named by removeLabel and emitting removed, so the two targets never collide. Watch the binding form: dot, removable and disabled take no bare-attribute shorthand, so they need [removable]="true" rather than just removable.

Q: Why do the badge styles leak into the rest of the page?
A: Because they are meant to. hub-badge and hub-chip render without style encapsulation, so their rules join the global cascade as soon as either component is loaded — which is what lets you restyle them from your own sheet without piercing anything, at the cost of .hub-badge and .hub-chip being shared names. Two other limits worth knowing: hub-chip-set is not a form control, so formControlName does not reach it and it compares values by identity, which objects have to satisfy by reference; and a truncated badge shows the native title attribute unless you register a tooltip adapter.

What changed in 22.7.3 (2026-09-20):
- The npm keywords name the pieces the package ships — `badges`, `chip`, `chip-set`,

## ng-hub-ui-board — Angular Kanban Board Component
- api: https://hubui.dev/en/board/api/
- overview: https://hubui.dev/en/board/overview/
- styles: https://hubui.dev/en/board/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-board
- Latest release: 22.6.2 (2026-09-21)

Angular Kanban board component with drag and drop, custom card templates, column workflows and CSS variables for business dashboards.

This Angular board component helps you ship Kanban-style workflows with drag and drop, flexible templates and scalable interaction patterns for real business tooling.

ng-hub-ui-board is designed for Angular products that need more than a static list: task tracking, CRM pipelines, support workflows or internal operations dashboards. It keeps card rendering flexible while preserving a consistent board interaction model.

Key highlights:
- Drag and drop workflows: Move cards and columns naturally in Angular interfaces used for planning, operations or CRM processes.
- Custom card templates: Render rich cards with actions, badges, metadata and domain-specific layouts.
- Built for internal tools: Useful for team boards, delivery pipelines and operational back-office experiences.

Common use cases: task boards; pipeline tracking; CRM workflows; operations dashboards.

Frequently asked questions:
Q: How do I build a Kanban board with drag and drop in Angular?
A: Install ng-hub-ui-board and bind a Board object describing its columns and cards. Dragging cards between columns and reordering columns works without extra wiring; the drag events return the moved BoardCard along with its source and target BoardColumn, so you persist the change in your own store or API.

Q: Can I customise how each Kanban card looks?
A: Yes. ng-hub-ui-board renders cards through templates you provide, so a card can contain any markup — avatars, tags, progress, actions. HubBoardColumnHeaderDirective and HubBoardColumnFooterDirective do the same for the top and bottom of each column, leaving the drag-and-drop behaviour untouched.

Q: How do I know which column a card was moved to?
A: The board emits a BoardDragDropEvent on every drop. It carries the dragged item, the column it came from and the column it landed in, plus the new index. That is the payload you send to your backend; the board does not persist anything by itself.

Q: Does the Angular Kanban board work on touch devices?
A: Yes. Dragging is built on the Angular CDK drag-and-drop primitives, which handle mouse, touch and pen input, so the board behaves the same on tablets and phones as on desktop.

What changed in 22.6.2 (2026-09-21):
- **The README says what the board is before it warns about anything.** The page opened on the

## ng-hub-ui-breadcrumbs — Angular Breadcrumbs Component
- api: https://hubui.dev/en/breadcrumbs/api/
- overview: https://hubui.dev/en/breadcrumbs/overview/
- styles: https://hubui.dev/en/breadcrumbs/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-breadcrumbs
- Latest release: 22.9.0 (2026-09-21)

Angular breadcrumbs component with router integration, custom templates, RTL support and flexible styling tokens.

Use these Angular breadcrumbs when route context matters and you need a navigation aid that works with the Angular Router, templates and structured navigation paths.

ng-hub-ui-breadcrumbs gives Angular applications a route-aware breadcrumb component for admin panels, documentation sites and multi-level products. It is useful when navigation depth grows and users need more orientation than a back button can provide.

Key highlights:
- Angular Router aware: Generate breadcrumb trails from route structure without maintaining manual labels on every page.
- Custom rendering: Replace separators and item templates to match product navigation patterns and brand styles.
- Works in complex layouts: Helpful for back offices, knowledge bases and nested application shells.

Common use cases: documentation sites; admin panels; multi-level apps; route-aware navigation.

Frequently asked questions:
Q: How do I add breadcrumbs to an Angular application?
A: Put <hub-breadcrumb /> in the layout and add data: { breadcrumb: 'Products' } to the routes that should appear. The component reads the active route tree and builds the trail itself, inside a nav labelled breadcrumb, with aria-current=page on the last crumb. To drive it by hand instead, pass the items input and the router-derived trail steps aside.

Q: How do I shorten a long breadcrumb trail?
A: maxItems collapses the middle behind a real button, and itemsBeforeCollapse and itemsAfterCollapse decide how many crumbs stay at each end; expanding it emits collapsedClick and moves focus to the first crumb revealed. truncateItems is the other half: it caps each label at --hub-breadcrumb-max-item-width, 12rem by default, and shows the whole text on hover, through ng-hub-ui-utils when you register its tooltip adapter and through the plain title attribute when you do not.

Q: How do I change the separator between breadcrumbs?
A: Not with an input. The divider is drawn in CSS from --hub-breadcrumb-divider, which defaults to a greater-than sign, and --hub-breadcrumb-divider-flipped covers right-to-left layouts. What a crumb itself looks like is yours through the *hubBreadcrumbItem template, which receives the item and its position, and hubBreadcrumbLabel marks the text that may be truncated.

Q: Does it work without the Angular router?
A: No. The service injects Router and ActivatedRoute and the crumbs render as routerLink, so a router-less application cannot use the package. Two limits of the automatic trail are worth knowing before you rely on it: only routes that declare data.breadcrumb on their own configuration are picked up, and the walk follows the first child at each level, so sibling and auxiliary outlets are skipped. Pass items yourself when the trail does not match the route tree.

What changed in 22.9.0 (2026-09-21):
- **A crumb can have no destination.** `url` is optional, and a crumb declaring neither `url` nor
- **The declared Angular floor is now 19, which is the one the code can actually run on.** The
- **`@angular/router` is declared as a peer dependency.** The service injects `Router` and

## ng-hub-ui-buttons — Angular Button Library
- api: https://hubui.dev/en/buttons/api/
- overview: https://hubui.dev/en/buttons/overview/
- styles: https://hubui.dev/en/buttons/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-buttons
- Latest release: 22.12.3 (2026-09-21)

Complete Angular 22 button system with signal-based API — standard buttons, FAB, speed dial and overlay dropdown. Zero dependencies beyond ng-hub-ui-utils.

Use ng-hub-ui-buttons when you need a unified, themeable button ecosystem that covers every interaction pattern — from inline CTA to floating action overlays — with a single consistent API built on Angular Signals.

ng-hub-ui-buttons is a zero-dependency button library for Angular 22+ standalone apps. It ships HubButtonComponent — usable as <hub-button> or as an attribute on a native host (<button hubButton>) (five variants × six colours × four sizes) — HubFabComponent (nine fixed positions), HubSpeedDialComponent and HubDropdownDirective (overlay-based, powered by ng-hub-ui-utils OverlayService). Every visual property is a CSS custom property so the whole system themes with a single stylesheet override.

Key highlights:
- Signal-based API: All inputs use Angular Signals (input(), model()) — no @Input decorators, fully OnPush-safe.
- Five button variants: solid, outline, soft, ghost and link — each available in six semantic colours and four sizes.
- Overlay Dropdown: HubDropdownDirective attaches any ng-template to any trigger element via the OverlayService — no CDK required.

Common use cases: primary call-to-action buttons; floating action menus; context-menu dropdowns; icon-only toolbar actions.

Frequently asked questions:
Q: How do I use the Angular button component?
A: Put hubButton on a native button element and pick variant — solid, outline, soft, ghost or link — color and size, which runs sm, md, lg, xl. loading swaps the label for a spinner and marks the host aria-busy, and disabled reflects the real disabled attribute. There is also a hub-button element, useful when you want the look without a form control, but it is not a native button: it cannot submit a form and cannot take type=submit, so reach for the attribute unless you have a reason not to.

Q: How do I attach a dropdown to a button?
A: hubDropdown is a directive that takes the ng-template holding the panel. placement covers the eight usual positions, trigger is click or hover, offsetY moves it off the button, closeOnSelect closes on a pick and isOpen is a model() so you can drive it yourself. Fill the panel with hub-dropdown-panel, hub-dropdown-item, hub-dropdown-header and hub-dropdown-divider. Opening one dropdown closes whichever was open, and Escape and a click outside both close it.

Q: What is the difference between hub-fab and hub-speed-dial?
A: hub-fab is the single floating action button: color, size as mini, standard or large, extended for the version with a label, position for which corner it sits in, and collapseOnScroll to shrink it as the page moves. hub-speed-dial is the one that fans out into hub-speed-dial-item children when opened, with direction up, down, left or right, trigger as click or hover, and a two-way isOpen alongside opened and closed. Give every item a label: without one the accessible name falls back to the icon class.

Q: Is the dropdown an accessible menu?
A: Not on its own, and this is worth knowing before you ship it. The panel is a positioned surface with button-shaped items: there is no role=menu, no role=menuitem, no aria-haspopup or aria-expanded on the trigger, no arrow-key movement between items and no focus moved into the panel or restored on close. Escape and outside clicks are handled, and each item is a real button, so it is keyboard-reachable by tabbing. If you need the full ARIA menu pattern, the roles and key handling are yours to add.

What changed in 22.12.3 (2026-09-21):
- **`hub-fab` no longer throws during server rendering.** With `collapseOnScroll` set, `ngOnInit`

## ng-hub-ui-calendar — Angular Calendar Component
- api: https://hubui.dev/en/calendar/api/
- overview: https://hubui.dev/en/calendar/overview/
- styles: https://hubui.dev/en/calendar/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-calendar
- Latest release: 22.8.2 (2026-09-20)

Angular calendar component with event views, drag and drop, templates, internationalization and CSS variables for scheduling interfaces.

This Angular calendar component is designed for scheduling interfaces that need customizable views, event rendering, drag and drop and production-ready theming.

ng-hub-ui-calendar helps Angular teams build booking tools, team agendas and planning screens with a reusable calendar surface. It supports the kind of event rendering and interaction patterns expected in real scheduling products.

Key highlights:
- Multiple calendar views: Render day, week or planning-oriented layouts without building a calendar grid from scratch.
- Event-driven scheduling: Useful for bookings, team planning, resource allocation and event management interfaces.
- Drag and drop interaction: Move and update events directly inside the calendar when workflows need fast manipulation.

Common use cases: booking tools; team calendars; resource scheduling; event management.

Frequently asked questions:
Q: How do I add an event calendar to an Angular app?
A: Install ng-hub-ui-calendar and pass it an array of CalendarEvent objects with their start and end dates. HubCalendarComponent renders them in the view you choose and handles the month grid, week layout and event positioning, so you only supply the data and decide what a click does.

Q: Does the Angular calendar support a day view?
A: Yes. CalendarViewType covers month, week and day, and switching between them is a single input, so the same event data renders as a monthly overview or as a detailed daily agenda without reloading or transforming anything.

Q: Can users drag events to reschedule them?
A: Yes. Events can be dragged to a different day or time slot, and the component emits the change with the event and its new dates. Persisting it is up to you — the calendar reflects the move visually but never writes to your backend on its own.

Q: How do I translate an Angular calendar into another language?
A: ng-hub-ui-calendar is internationalised: month names, weekday labels and the first day of the week follow the locale you configure, so the same calendar renders correctly in Spanish, German or Japanese without you supplying translated strings.

What changed in 22.8.2 (2026-09-20):
- **The header buttons follow the dark theme.** Every surface in the calendar reads a

## Design System Guide for Angular Apps
https://hubui.dev/en/design-system/
The ng-hub-ui design system: reference and system tokens, native CSS reset, Bootstrap-compatible utilities and a theming architecture for Angular apps.

## ng-hub-ui-forms — Angular Forms Library
- api: https://hubui.dev/en/forms/api/
- overview: https://hubui.dev/en/forms/overview/
- styles: https://hubui.dev/en/forms/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-forms
- Latest release: 22.35.1 (2026-09-16)

Accessible Angular form fields (input, textarea, slider, select, datepicker) with automatic control/group/form error display, reactive forms and CSS variables.

Use this Angular forms library when you need accessible form fields with automatic validation-error display, a forked ng-select, a from-scratch datepicker and runtime CSS-variable theming — without Bootstrap.

ng-hub-ui-forms unifies every form field behind one contract: bind it with reactive forms and the matching errors appear automatically at the control, group and form level. Fields are standalone, OnPush and signal-native; the select is a maintained fork of ng-select themed with hub tokens; the datepicker is built on native Date and the Angular CDK overlay. Everything is themed through canonical --hub-* CSS variables, with runtime dark mode.

Key highlights:
- Automatic error display: Control, group and form-level (cross-field) errors render automatically — no manual *ngIf chains.
- Rich selection: Forked ng-select (dropdown, search, tags) plus button, radio and checkbox formats for the same value.
- Date & range picker: From-scratch datepicker: single / range, min/max, keyboard navigation and full i18n — no date dependency.

Common use cases: signup and checkout forms; settings pages; filters and search; admin dashboards.

Frequently asked questions:
Q: How do I show validation errors without writing a condition for every field?
A: Bind the field to its control and the errors render themselves. <hub-input formControlName="email"> puts its control's messages in a role="alert" region as soon as the control is touched. Group and cross-field errors work the same way through fieldset[hubFieldset], form[hubForm] and <hub-legend>. The message text comes from provideHubForms({ invalidFeedbackTemplateFn }), so the copy and its translations live in one place.

Q: Can I use these fields with reactive forms and with ngModel?
A: Both. Every field extends HubFieldControl, which implements ControlValueAccessor, so formControlName, formControl and ngModel all work. Signal Forms lives in a separate entry point, ng-hub-ui-forms/signals, which exports HubSignalFieldControl; the core package never imports @angular/forms/signals, so it stays safe on Angular 21.

Q: How do I actually upload the files a user picks?
A: <hub-file-input> handles the picker, the drop zone, clipboard paste, the size and type validation and the progress bar, but it sends nothing by itself. You register the transport with provideHubFileUploader(), implementing one upload(file, context) method that returns a cold observable of progress, done or error events. Unsubscribing cancels the request; subscribing again retries it.

Q: How does this differ from Angular Material form fields?
A: A field is one element here — <hub-input>, <hub-select> — instead of <mat-form-field> wrapping <input matInput>, and the label mode is an input with four values: floating, stacked, horizontal and visually-hidden. Theming is --hub-* CSS custom properties, so there is no Sass theme to define. The difference that shows up first in practice is that errors render themselves, while Material expects you to write <mat-error> and the condition around it.

What changed in 22.35.1 (2026-09-16):
- The repository moved to the `hub-env` organization. Issues for every Hub UI package are now

## ng-hub-ui-history — Angular Undo Redo History Store
- api: https://hubui.dev/en/history/api/
- overview: https://hubui.dev/en/history/overview/
- npm: https://www.npmjs.com/package/ng-hub-ui-history
- Latest release: 22.0.6 (2026-09-20)

Angular undo and redo history store with Signals-friendly APIs, transactions, limits and reactive form support.

Use this Angular history store when you need undo and redo on complex state without introducing a full external state library.

ng-hub-ui-history is especially useful in Angular editors, form builders and configuration screens where the user expects to go backwards safely. It brings undo and redo patterns to stateful workflows without forcing a heavyweight architecture decision.

Key highlights:
- Undo and redo flows: Restore previous state snapshots in Angular tools where edits happen continuously.
- Good for builders and editors: A strong fit for low-code products, dynamic forms and configuration-heavy experiences.
- Signals-friendly state updates: Keep Angular reactivity predictable while still giving users revision history.

Common use cases: editors; form builders; low-code tools; configuration UIs.

Frequently asked questions:
Q: How do I add undo and redo to an Angular application?
A: createHistoryStore() gives you a store. Call registerObject(id, initialState) once, commit(id, nextState, { label }) on every change, and then undo(id) and redo(id), with canUndo(id) and canRedo(id) driving the buttons. states is a signal holding the current value of everything tracked, so a template reads it straight. There is no component and no directive in this package: that factory and its types are the whole surface.

Q: Can it track a reactive form?
A: watchForm(id, form) subscribes to valueChanges and commits each change for you, and it returns the function that stops it — it does not clean up by itself, so keep that callback and call it when the component goes away. skipInitial ignores the first emission. It commits form.value rather than getRawValue(), so a disabled control is not in the snapshot and an undo will not restore it. beginTransaction and endTransaction fold a burst of edits into one undo step.

Q: How much history does it keep?
A: maxEntries defaults to 100 and maxBytes to 512000, counted per tracked object, and the oldest entries fall off first; history(id) returns the metadata and clearHistory(id) starts over. The timeline is linear and per object: one step at a time, no branching, no undo across several objects at once, and nothing is written to storage, so a reload starts empty.

Q: Does it bind Ctrl+Z for me?
A: No. The package has no DOM at all — no keyboard shortcut, no toolbar, no ARIA — so you bind Ctrl+Z to undo(id) yourself. Two more things surprise people. The store is a plain factory, not an injectable service, so sharing one between components means providing it yourself. And calling commit or undo with an id you never registered throws rather than returning false, which is deliberate: a typo in an id would otherwise fail silently.

What changed in 22.0.6 (2026-09-20):
- The npm keywords name the problem the package solves — `undo-redo`, `time-travel`,

## Translating Angular Components
https://hubui.dev/en/i18n/
Translate ng-hub-ui components with your existing Angular i18n library: transloco, ngx-translate or your own, through one adapter and the HUBUI key namespace.

## ng-hub-ui-icons — Angular Icon Library (set-agnostic)
- api: https://hubui.dev/en/icons/api/
- overview: https://hubui.dev/en/icons/overview/
- styles: https://hubui.dev/en/icons/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-icons
- Latest release: 22.3.3 (2026-09-21)

Icon-set-agnostic Angular icons: render Font Awesome, Bootstrap Icons, Material Symbols, Solar or your own SVGs through one <hub-icon> / [hubIcon] API, themed with CSS variables.

Use this Angular icon library when you want one API for any icon set — no hard dependency on a specific pack, mix sets freely, and theme them all through --hub-icon-* CSS variables.

ng-hub-ui-icons decouples how you reference an icon from which set draws it. A pack is a pure resolver from name to a render spec; the library ships factories and presets for Font Awesome, Bootstrap Icons, Material Symbols and Solar but bundles none of them. The component and directive render class-based, ligature, sprite, inline-SVG or image icons, all themed uniformly through --hub-icon-* tokens.

Key highlights:
- Set-agnostic: Font Awesome, Bootstrap Icons, Material Symbols, Solar, sprites, inline SVG and images behind one API.
- Zero icon dependencies: No fonts or SVGs bundled — you load the set, the library formats and themes it.
- Uniform theming: One --hub-icon-* token set themes every pack identically, including the Material Symbols variable-font axes.

Common use cases: Use one icon API across an app that mixes Font Awesome and Material Symbols.; Theme every icon's size and color through CSS variables, with runtime dark mode.; Drop a <hub-icon> into any component — buttons, menus, links — by projection, with no adapter.; Register your own SVG pack to ship brand icons through the same component..

Frequently asked questions:
Q: Does ng-hub-ui-icons include an icon set?
A: No, and that is the design. The package ships no icons at all — no font, no SVG files, no icon data — and depends on no icon set. It renders the set you already use: load that set's CSS or font in your application, register a pack, and <hub-icon name="house" /> resolves through it. Presets come for Font Awesome, Bootstrap Icons, Material Symbols and Solar, and classPack, ligaturePack and svgPack cover any other set.

Q: How do I register an icon pack in Angular?
A: provideHubIcons({ defaultPack: 'fa', packs: { fa: faPack() } }) in the application providers. A pack is a resolver that turns a name and an optional variant into a render spec, and it can produce a CSS class glyph, a ligature, inline SVG, a reference into your own sprite or an img. name also accepts the pack:variant:name shorthand, and the pack and variant inputs win over it. With nothing registered the icon renders empty and the reason goes to your ErrorHandler rather than to the console.

Q: What is the difference between hub-icon and hubIcon?
A: The component is the whole API: name, pack, variant, size, color, label and spin. The directive puts the same glyph on an element you already have and takes only name, pack, variant and label — size, colour and spinning are left to your CSS — and using it without the component means importing the stylesheet yourself with @use 'ng-hub-ui-icons/styles'. Both own role, aria-label and aria-hidden on their host, so the accessible name goes through label: an aria-label written by hand on that element is overwritten.

Q: How do I size and recolour an icon?
A: By default it follows its surroundings: --hub-icon-size is 1em and --hub-icon-color is currentColor, so an icon inside a heading is heading-sized and heading-coloured with nothing set. The size and color inputs write those properties inline on the host, which beats a class on that same element, so use one approach or the other rather than both. Two caveats: a raster icon coming from an img pack ignores color, and the spin animation is fixed at one second with no token to change it.

What changed in 22.3.3 (2026-09-21):
- **`[hubIcon]` builds its sprite and image nodes instead of interpolating markup.** The `use` and

## ng-hub-ui-installer — Install Angular UI Libraries with ng add
- overview: https://hubui.dev/en/installer/overview/
- npm: https://www.npmjs.com/package/ng-hub-ui-installer
- Latest release: 0.2.2 (2026-09-16)

The ng-hub-ui family installer: one ng add command that asks which libraries you want, resolves the packages each of them needs and writes them into your manifest.

Use ng-hub-ui when you are adding one or more of the family's libraries to an Angular workspace and would rather not work out by hand which peer package each of them needs.

ng-hub-ui is the umbrella package of the family, and the only published one that ships no components. What it ships is an ng-add schematic. It offers the 25 catalogued libraries in a multi-select prompt, or takes their identifiers straight from a --libraries flag, and resolves the selection into the npm packages it actually needs — including the peers a library depends on and the one external package, sortablejs, that is not ours. The resolved list is written into dependencies at the workspace root, never overwriting a key that is already there, and then handed to whichever package manager the Angular CLI detected. Its scope stops at dependency wiring: it does not touch angular.json, register providers, import components or add stylesheet entries.

Key highlights:
- One Command: ng add ng-hub-ui fetches the package, opens a multi-select of the 25 catalogued libraries and writes the chosen ones into your manifest.
- Flags And Scripts: --libraries takes a comma-separated list or the repeated flag, and --skip-install stops at the manifest, so CI can run the same install.
- Resolved Dependencies: Peers are added automatically and transitively, every range floors above what the family demands, and a version you pinned is never rewritten.

Common use cases: Adding several ng-hub-ui libraries to an Angular workspace in one step; Scripting a project's initial setup in CI without answering a prompt; Letting the peer packages each library needs be worked out for you.

Frequently asked questions:
Q: How do I install ng-hub-ui in an Angular project?
A: Run ng add ng-hub-ui. The Angular CLI fetches the installer package and runs its ng-add schematic, which asks which of the 25 catalogued libraries you want, writes the resolved packages into dependencies and lets your package manager install them.

Q: Can I install ng-hub-ui libraries without the interactive prompt?
A: Yes. Pass the identifiers to --libraries, either comma-separated (--libraries=modal,paginable) or as a repeated flag (--libraries=modal --libraries=paginable). Add --skip-install to update package.json and leave the install to you.

Q: What does the ng-hub-ui schematic change in my project?
A: Only the dependencies block of the workspace root package.json, and only keys that are not already there. It does not touch angular.json, register providers, import components or add stylesheet entries.

What changed in 0.2.2 (2026-09-16):
- The repository moved to the `hub-env` organization. Issues for every Hub UI package are now

## ng-hub-ui-loading — Angular Loading Spinner & Overlay
- api: https://hubui.dev/en/loading/api/
- overview: https://hubui.dev/en/loading/overview/
- styles: https://hubui.dev/en/loading/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-loading
- Latest release: 22.2.1 (2026-09-16)

Angular loading component with spinner, dots, bars, pulse and ring indicators in inline, overlay and fullscreen modes, plus a service for app-wide blocking overlays.

Use ng-hub-ui-loading when a section, a container or the whole application has to signal work in progress, without every view hand-rolling its own spinner and scrim.

ng-hub-ui-loading is a standalone Angular component that renders an indeterminate loading state in three modes: `inline` as a block in the document flow, `overlay` absolutely positioned over its parent container, and `fullscreen` fixed to the viewport. It ships five pure-CSS indicators — spinner, dots, bars, pulse and ring — in three sizes, an optional message and an optional brand image animated with `none`, `spin` or `pulse`. `HubLoadingService` drives the global fullscreen overlay programmatically and reference-counts concurrent callers, so parallel requests never tear the overlay away from each other. Every colour, size and duration is a `--hub-loading-*` custom property, with a `hub-loading-theme()` Sass mixin for wholesale restyling, and the component is accessible out of the box through `role=status`, `aria-live=polite` and `aria-busy`, honouring `prefers-reduced-motion`. Alongside it, `hub-loading-bar` reports that the page itself is on its way — the thin strip under the navbar, rendered in the document flow, attached to a positioned navbar or fixed to the viewport at `--hub-loading-bar-offset`. `HubLoadingBarService` reference-counts its callers in the same way, waits out a grace period so work that finishes quickly never flashes a bar, and trickles towards an end it never reaches on its own: only `complete()` may show 100%. `provideHubLoadingBarRouter()` and `hubLoadingBarInterceptor` wire it to navigation and to HTTP without either knowing about the other.

Key highlights:
- Inline Block: A block in the document flow that reserves its own space, with five pure-CSS indicators — spinner, dots, bars, pulse and ring — in three sizes.
- Overlay And Fullscreen: Cover one positioned container with an optional backdrop, or block the whole viewport from HubLoadingService, whose reference counter absorbs concurrent callers.
- Branding And Theming: Set the accent with a semantic name, a hex, oklch() or var(...) value, swap the indicator for a logo, or restyle everything through --hub-loading-* variables.
- Page Progress Bar: The thin strip under the navbar, wired to the router and to HttpClient: it waits before appearing, counts its callers, and never claims to be finished until it is.

Common use cases: route and data loading; form submission overlays; app-wide blocking operations; branded splash screens; page progress bars under the navbar.

Frequently asked questions:
Q: How do I show a loading spinner or overlay in Angular?
A: Install ng-hub-ui-loading and render `<hub-loading>` while the work is in flight. It defaults to an inline block in the document flow; set `mode` to `overlay` to cover the surrounding container, or to `fullscreen` to block the viewport. For an application-wide overlay, inject `HubLoadingService` and call `show()` and `hide()` around the operation.

Q: Should I use a loading spinner, a skeleton or a progress bar?
A: Reach for ng-hub-ui-skeleton when you already know the shape of the content that is coming, because the placeholder reserves the space and avoids layout shift. Use ng-hub-ui-loading when the wait is indeterminate or the screen has to be blocked — a form being submitted, a report being generated. When you can report real completion, ng-hub-ui-metrics renders determinate bars, meters and rings instead.

Q: How do I change the colour of the Angular loading indicator?
A: Set the `color` input, which accepts a semantic name, a hex literal, an `oklch()` value or a `var(...)` reference to one of your own tokens. For a permanent change, every colour, size and duration is a `--hub-loading-*` custom property you can redefine from your own stylesheet, and the `hub-loading-theme()` Sass mixin restyles the whole component in one place. The `image` input replaces the indicator with a logo when the loading state should carry the brand.

Q: Is the Angular loading component accessible and SSR-safe?
A: Yes. The host is a live region — `role=status`, `aria-live=polite` and `aria-busy` — with an `ariaLabel` input for the announced text, and every animation is disabled under `prefers-reduced-motion`. On the server there is no DOM to mount into, so `HubLoadingService` keeps only its counter and server-side rendering stays safe.

Q: How do I add a page loading bar under the navbar in Angular?
A: Render `<hub-loading-bar mode="overlay" placement="bottom">` inside a navbar that carries `position: relative`, or use `mode="fixed"` with `--hub-loading-bar-offset` when the navbar is fixed too. Then add `provideHubLoadingBarRouter()` so the bar runs for the length of each navigation, including one a guard rejects, and `hubLoadingBarInterceptor` so it also covers the requests the page fires on arrival. The bar reference-counts its callers, so the two compose without either knowing about the other, and `withoutHubLoadingBar()` keeps background polls out of the count.

What changed in 22.2.1 (2026-09-16):
- The repository moved to the `hub-env` organization. Issues for every Hub UI package are now

## ng-hub-ui-metrics — Angular Progress, Meter & Ring
- api: https://hubui.dev/en/metrics/api/
- overview: https://hubui.dev/en/metrics/overview/
- styles: https://hubui.dev/en/metrics/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-metrics
- Latest release: 22.4.2 (2026-09-21)

Read-only Angular metric primitives — a linear progress bar, a graded meter and a circular ring gauge — driven by design-system tokens with full ARIA semantics.

Use ng-hub-ui-metrics when your Angular application needs to visualize a single value — upload progress, capacity, a score or a rating — without pulling in a full charting library.

ng-hub-ui-metrics is a small family of presentational primitives. `hub-progress` renders a determinate or indeterminate linear bar; `hub-meter` grades a scalar against a `[low, high]` plateau following HTML `<meter>` semantics; `hub-ring` draws a normalized score as an SVG arc with an optional projected caption. None of the components hard-code a colour — they read the shared `--hub-sys-color-*` families and expose `--hub-progress-*`, `--hub-meter-*` and `--hub-ring-*` custom properties for theming.

Key highlights:
- Linear progress bar: Determinate or indeterminate progress with a size scale, semantic colours and an optional value label.
- Graded meter: A gauge that recolours itself by band relative to the optimum point, following HTML <meter> semantics.
- Circular ring gauge: An SVG ring rendering a normalized score, with colour thresholds and a caption projected through content.

Common use cases: upload and task progress; disk, memory and capacity meters; quality scores and ratings; dashboard KPI rings.

Frequently asked questions:
Q: How do I show a progress bar in Angular?
A: Install ng-hub-ui-metrics together with ng-hub-ui-utils, which is a required peer, and import HubProgressComponent. Then <hub-progress [value]="72" label="Upload" showValue /> renders the bar: max defaults to 100, the host carries role=progressbar with aria-valuenow, and label supplies both the visible caption and the accessible name. Set indeterminate when the duration is unknown, which drops aria-valuenow and marks the host aria-busy.

Q: What is the difference between hub-progress, hub-meter and hub-ring?
A: hub-progress is a linear bar for work advancing towards completion, and it is the only one of the three with an indeterminate state and a color input. hub-meter is a reading inside a range, with low, high and optimum marking the bands, so it announces role=meter and an aria-valuetext naming the band. hub-ring draws the same idea as a circular arc with optional thresholds, and it is the only one that projects your own caption. Watch the defaults: max is 100 on progress but 1 on meter and ring, and showValue starts off on progress and on on ring.

Q: How do I change the colour of an Angular progress bar or gauge?
A: hub-progress takes a color input with primary, secondary, success, danger, warning, info and neutral. hub-meter and hub-ring have no colour input at all: they are recoloured through the --hub-progress-*, --hub-meter-* and --hub-ring-* custom properties, or in one place with the hub-metrics-theme() Sass mixin. Every token falls back to a literal value, so ng-hub-ui-ds is optional and the components render with or without it.

Q: Does ng-hub-ui-metrics collect analytics or draw charts?
A: No, on both counts. It ships three read-only elements that paint the numbers you hand them, and it measures nothing, stores nothing and sends nothing anywhere. There is no chart, no sparkline, no KPI card and no animated counter, and no charting dependency underneath: the ring is hand-written SVG. If you need a plotted series, this is not the package.

What changed in 22.4.2 (2026-09-21):
- **`hub-ring` announces the value it actually draws.** `aria-valuenow` was bound to the raw

## ng-hub-ui-milestones — Angular Timeline & Progress Steps
- api: https://hubui.dev/en/milestones/api/
- overview: https://hubui.dev/en/milestones/overview/
- styles: https://hubui.dev/en/milestones/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-milestones
- Latest release: 22.5.1 (2026-09-16)

Angular timeline and progress-steps component: vertical or horizontal, fully customizable nodes, content inside and beside each step, themed with CSS variables.

Choose this Angular timeline component when you need a presentational progress tracker — onboarding flows, order tracking, roadmaps — with custom nodes and both vertical and horizontal layouts.

ng-hub-ui-milestones lays out a series of steps connected by a rail, vertically or horizontally. Each node is fully customizable — number, icon, avatar or any markup inside the circle, plus rich content beside it — and every colour, size and connector is a CSS variable, so it re-themes at runtime.

Key highlights:
- Vertical & horizontal: One component, two orientations — stack the steps or lay them out in a row with a single input.
- Fully customizable nodes: Put a number, icon, avatar or any template inside the circle, override its colour, and add content beside it.
- CSS-variable theming: Node colours, the connector gradient, sizes and spacing are all `--hub-milestone-*` tokens.

Common use cases: onboarding flows; order tracking; roadmaps; process steps.

Frequently asked questions:
Q: How do I build a timeline component in Angular?
A: Install ng-hub-ui-milestones and give HubMilestonesComponent a list of steps. It draws the rail and the nodes and marks each step's state, which makes it a fit for order tracking, onboarding flows and project roadmaps where the timeline is presentational rather than interactive.

Q: Can the timeline be horizontal instead of vertical?
A: Yes. HubMilestonesOrientation switches the whole layout between vertical and horizontal with one input, and the same step content works in both — useful when the timeline is a sidebar on desktop and a horizontal strip on narrow screens.

Q: How do I put custom content inside each timeline node?
A: HubMilestoneNodeDirective replaces the circle at each step, so a node can be a number, an icon, an avatar or any markup you want. Rich content can also sit beside the node, which is how you attach dates, descriptions or actions to a step.

Q: What is the difference between a timeline and a stepper in Angular?
A: A timeline shows progress that has already happened or is planned, and the user does not drive it. A stepper guides someone through a form or a wizard, validating each step. Use ng-hub-ui-milestones to display a sequence and ng-hub-ui-stepper when the user must advance through it.

What changed in 22.5.1 (2026-09-16):
- The repository moved to the `hub-env` organization. Issues for every Hub UI package are now

## ng-hub-ui-modal — Angular Modal Component
- api: https://hubui.dev/en/modal/api/
- overview: https://hubui.dev/en/modal/overview/
- styles: https://hubui.dev/en/modal/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-modal
- Latest release: 22.14.2 (2026-09-21)

Accessible Angular modal component with stacking, fullscreen mode, templates, keyboard handling and CSS variables for standalone apps.

This Angular modal component is built for teams that need accessible dialogs, composable content, service-driven control and design-system friendly styling in standalone Angular apps.

ng-hub-ui-modal solves one of the most common UI needs in Angular products: opening dialogs that feel robust in production. It covers stacked modals, fullscreen flows, keyboard handling, projections and service-based usage without turning modal logic into a per-project problem.

Key highlights:
- Stacked modal workflows: Open and manage multiple dialogs safely when products need nested decisions or chained flows.
- Accessible dialog behavior: Includes focus handling, escape support, backdrop control and ARIA-friendly dialog semantics.
- Templates and service control: Works with templates and dynamic components so teams can compose confirmation, form and detail flows.

Common use cases: confirmation dialogs; forms in overlays; detail panels; stacked workflows.

Frequently asked questions:
Q: How do I open a modal dialog in Angular?
A: Inject HubModal and call open(), passing a component class, a TemplateRef or a plain string. It returns a HubModalRef whose result is a promise: it resolves with whatever you hand to close() and rejects with the reason given to dismiss(), so a confirmation and a cancellation arrive on different paths. closed and dismissed are the observable equivalents.

Q: How do I pass data into the modal and get a result back?
A: Put it in the data option of open(). Inside the content component, inject HubActiveModal and read its data property, or inject the HUB_MODAL_DATA token directly. The same HubActiveModal exposes close(result) and dismiss(reason), so the content closes itself without holding a reference to whoever opened it.

Q: Can I turn the dialog into a side drawer or a bottom sheet?
A: Yes, from the same call. Set offcanvas: true and a placement of start, end, top or bottom, and the panel slides in from that edge. size takes sm, lg or xl, fullscreen takes a breakpoint, and update() on the ref changes any of those while the dialog is open.

Q: How does it compare with Angular Material's MatDialog?
A: There is no Bootstrap and no Angular CDK underneath, and nothing to import: the window injects its own stylesheet the first time you open it. Theming is --hub-modal-* custom properties declared at zero specificity, so your own rule on .hub-modal wins without !important. The result model is close versus dismiss on two channels rather than a single afterClosed(). One thing to check before choosing it: server-side rendering is not verified, because open() reaches for document straight away.

What changed in 22.14.2 (2026-09-21):
- **The README opens with what the library does.** The Angular badge read 21 while npm served

## ng-hub-ui-nav — Angular Navigation Menu Component
- api: https://hubui.dev/en/nav/api/
- overview: https://hubui.dev/en/nav/overview/
- styles: https://hubui.dev/en/nav/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-nav
- Latest release: 22.14.2 (2026-09-16)

Angular navigation component with dropdowns, drill-down panels, responsive collapse, router integration and CSS-variable theming.

Reach for this Angular navigation component when you need horizontal, vertical or drill-down menus with router awareness and reusable UX patterns.

ng-hub-ui-nav is useful when Angular applications outgrow a simple top menu. It covers vertical sidebars, dropdown trees, nested navigation and responsive collapse patterns that appear in documentation sites, dashboards and enterprise shells.

Key highlights:
- Horizontal and vertical nav: Handle top bars, sidebars and mixed navigation surfaces with one Angular library.
- Nested and drill-down menus: Useful for admin products and documentation experiences where information depth grows quickly.
- Responsive application shells: Adapt navigation behavior across desktop sidebars and mobile collapse states.

Common use cases: app shells; admin dashboards; documentation menus; responsive navigation.

Frequently asked questions:
Q: How do I build an Angular navigation menu from a data structure?
A: Install ng-hub-ui-nav and give <hub-nav> an array of HubNavItem objects through [items]. Each item carries a label, an optional route as a string or as route segments, children for its submenu, and a type of link, dropdown, header, separator or custom. The component renders the whole tree, so there is no toolbar-plus-list markup to assemble by hand.

Q: Can I use it as a sidebar that collapses to icons?
A: Yes. Set orientation to vertical in [config] and bind [(rail)] to a boolean of your own: while it is true the sidebar shrinks to --hub-nav-rail-width, labels become tooltips and accordion groups turn into click-triggered flyouts. The library persists nothing, so storing that preference is your job — railChange tells you when it flips.

Q: How does it decide which item is active?
A: It computes that itself instead of using routerLinkActive. Matching is by whole path segments, so /products is not matched by /products-archive, the query string is ignored, a parent dropdown follows its active child, and only the most specific match is marked — with the .hub-nav-item__link--active class and aria-current="page". Set routerLinkActiveOptions: { exact: true } on an item to match only its own route.

Q: Do I need Angular Router to use it?
A: Yes. @angular/router is a hard peer dependency and link items render as anchors with [routerLink], so there is no router-free mode for a nav pointing only at external URLs. It also ships no item search, no virtual scrolling and no drag-to-reorder: compared with assembling MatToolbar, MatSidenav and MatNavList by hand, what you get is one data-driven component and around 135 --hub-nav-* custom properties instead of a Sass theme.

What changed in 22.14.2 (2026-09-16):
- The repository moved to the `hub-env` organization. Issues for every Hub UI package are now

## ng-hub-ui-paginable — Angular Data Table & Lists
- api: https://hubui.dev/en/paginable/api/
- overview: https://hubui.dev/en/paginable/overview/
- styles: https://hubui.dev/en/paginable/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-paginable
- Latest release: 22.24.0 (2026-09-20)

Angular data table and paginated list with server-side pagination, sorting, filtering, selection, templates and CSS variables.

Use this Angular data table and paginated list library when you need server-side operations, selection, filtering and reusable list rendering without rebuilding table logic in every project.

ng-hub-ui-paginable is aimed at Angular teams building admin panels, search results, CRM screens and management back offices. It combines a reusable table and list layer with the operations that usually matter most in production: pagination, filtering, sorting, selection and custom templates.

Key highlights:
- Server-side ready: Connect pagination, sorting and filters to APIs without custom wiring for each table view.
- Filtering, sorting and selection: Cover the interactions expected in real admin and back-office products.
- Table and list in one core: Reuse the same data-management foundation across dense tables and custom list presentations.

Common use cases: admin tables; CRM datasets; search results; management back offices.

Frequently asked questions:
Q: How do I add server-side pagination to an Angular table?
A: ng-hub-ui-paginable is built for server-side data: instead of an array, you give it a function that receives the current page, page size, sort and filters, and returns the matching rows plus the total count. The component keeps the paginator, the sort state and the filters in sync with whatever your API returns.

Q: How do I make a table header sticky in Angular?
A: Mark the columns you want pinned and the header stays visible while the body scrolls. ng-hub-ui-paginable also ships HubStickyColumnsDirective for pinning columns to the start or end of the table, which is what you need for wide tables where the first column identifies the row.

Q: Can I render custom content inside a table cell?
A: Yes. PaginableTableCellDirective lets you take over the rendering of any column, so a cell can hold badges, buttons, links or a whole component instead of plain text. The column keeps its sorting and filtering behaviour while you control only what is painted.

Q: How do I add per-column filters to an Angular data table?
A: Declare the filter in the column definition — PaginableTableHeader supports text, dropdown, boolean and range filters per column. The active filters travel to your data source together with the page and sort, so filtering works the same whether the data is local or served by an API.

What changed in 22.24.0 (2026-09-20):
- **The empty-state notice paints itself, and follows the theme.** It was an `alert alert-info`
- **Eight tokens for that notice**, so it can be themed like everything else the table draws:

## ng-hub-ui-panels — Angular Tabs, Pills & Accordion
- api: https://hubui.dev/en/panels/api/
- overview: https://hubui.dev/en/panels/overview/
- styles: https://hubui.dev/en/panels/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-panels
- Latest release: 22.12.1 (2026-09-16)

Angular content-panels component that renders as tabs, pills or an accordion, with routing, reactive forms, keyboard navigation and CSS variables.

Use this Angular panels component when you need tabs, pills and accordion patterns from a single API, with routed panels, reactive-forms binding, keyboard navigation and CSS-variable theming.

ng-hub-ui-panels unifies tabs, pills and accordion into one standalone Angular component built on Signals. It supports routed panels, ControlValueAccessor form binding, scrollable and vertical strips, and full --hub-panels-* theming. It supersedes ng-hub-ui-accordion, whose accordion view it replaces while keeping the --hub-accordion-* token contract.

Key highlights:
- Tabs, pills and accordion: Switch the entire content-switching pattern with a single type input — no markup changes.
- Routed panels: Give a panel a routerLink and the content area becomes a router-outlet that follows the URL.
- Accessible by default: Roving tabindex, arrow/Home/End/Delete keys and correct ARIA roles for tablist and accordion.

Common use cases: settings pages; product detail tabs; FAQ accordions; dashboard sections.

Frequently asked questions:
Q: How do I build tabs, pills or an accordion in Angular with one component?
A: Import HubPanelsComponent and HubPanelComponent and write <hub-panels type="accordion"> with one <hub-panel heading="…"> per section. type takes tabs, pills, accordion or card, and changing it swaps the whole pattern without touching the markup. multiple lets more than one section stay open in accordion mode, vertical turns the strip on its side, scrollable keeps a long strip on one line, and panelChange tells you which panel became active.

Q: Can a panel follow the router or bind to a reactive form?
A: Both. Give a panel a routerLink, with queryParams and pathMatch if you need them, and the content area becomes a router outlet that follows the URL. The container implements ControlValueAccessor, so <hub-panels formControlName="section"> binds the active panel to a form control; bindValue picks which property travels as the value and compareWith decides identity. On a single panel active is a model(), so [(active)] works for the simple case.

Q: Are the tabs and the accordion keyboard accessible?
A: Yes, and the roles are real: role=tablist and role=tab with a roving tabindex and aria-selected, each panel a tabpanel labelled by its tab. Arrow keys move between panels — up and down only when vertical is set — Home and End jump to the ends, and Delete removes a panel marked removable and moves focus to the next one. In accordion mode every heading is a native button with aria-expanded, and a collapsed region is inert rather than merely hidden, so nothing inside it takes focus.

Q: Is ng-hub-ui-panels a drop-in replacement for ng-hub-ui-accordion?
A: For the accordion view, yes: <hub-accordion> becomes <hub-panels type="accordion">, <hub-accordion-panel title> becomes <hub-panel heading>, and every --hub-accordion-* variable you already set still applies, because each accordion token reads it before falling back. Two conditions attached. Those variables reach the accordion view only, not tabs, pills or cards. And panels asks for Angular 21, ng-hub-ui-utils and @angular/router, which it injects whether or not you use a routed panel, so an application without provideRouter fails when the component is created.

What changed in 22.12.1 (2026-09-16):
- The repository moved to the `hub-env` organization. Issues for every Hub UI package are now

## ng-hub-ui-portal — Angular Portal and Overlay Rendering
- api: https://hubui.dev/en/portal/api/
- overview: https://hubui.dev/en/portal/overview/
- npm: https://www.npmjs.com/package/ng-hub-ui-portal
- Latest release: 22.2.2 (2026-09-20)

Angular portal library for dynamic component, template and overlay rendering outside the current DOM tree with positioning control.

This Angular portal library helps you render content into overlays or custom containers while keeping data flow and Angular integration predictable.

ng-hub-ui-portal is useful when Angular interfaces need to detach rendering from the current DOM tree: drawers, floating panels, dynamic containers or overlay-based UI. It gives teams a cleaner foundation for projected content and positioned rendering.

Key highlights:
- Render outside the DOM flow: Useful when normal component placement is not enough for overlays, drawers or floating UI.
- Dynamic templates and components: Project strings, templates or components into custom containers with Angular-aware data flow.
- Strong overlay foundation: A practical base for contextual panels, floating actions and detached rendering patterns.

Common use cases: drawers; floating panels; overlay UIs; dynamic containers.

Frequently asked questions:
Q: What is ng-hub-ui-portal for?
A: Mounting a component, a TemplateRef or a plain string somewhere else in the DOM, from code. Inject HubPortal, call open() and you get a HubPortalRef whose result is a promise: it resolves with what you pass to close() and rejects with the reason given to dismiss(), and closed, dismissed, shown and hidden are the observable equivalents. Inside the content, inject HubActivePortal to close from within without a reference to whoever opened it.

Q: How do I choose where the content is mounted?
A: The container option takes a CSS selector string or an HTMLElement, and defaults to document.body. It is resolved once, at the moment you call open(), so the target has to be in the document already: if the selector matches nothing the call throws instead of waiting. The content is appended at the end of that container, and windowClass, portalDialogClass and portalContentClass are where your own styling hooks go.

Q: What is the difference between portal and ng-hub-ui-modal?
A: ng-hub-ui-modal is the dialog, with its backdrop, stacking, sizes and placement decided for you. Portal is the mounting mechanism without that policy: it draws no backdrop and applies no positioning, so what it looks like is yours to write. It does wrap the content in its own window with role=dialog, and it still handles Escape through the keyboard option, focus on open and restore on close, beforeDismiss as a guard, and hiding the rest of the page from assistive technology.

Q: Can I use it declaratively in a template, like the Angular CDK?
A: No. There is no directive and no outlet: the public surface is the HubPortal service, its ref and the options object. Two consequences worth weighing. Inputs are set by assigning to componentInstance, not through setInput, so a component built on signal inputs is not fed the way you would expect. And open() reaches for document immediately, so it belongs in the browser: server-side rendering is not verified and the call needs a guard of your own.

What changed in 22.2.2 (2026-09-20):
- The npm keywords declare `ng-hub-ui`, the family name somebody searching for the ecosystem

## ng-hub-ui-signature — Angular Signature Pad
- api: https://hubui.dev/en/signature/api/
- overview: https://hubui.dev/en/signature/overview/
- styles: https://hubui.dev/en/signature/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-signature
- Latest release: 22.8.1 (2026-09-16)

Accessible Angular signature field that stores mouse, touch and pen input as scalable SVG form values, with undo, redo and PNG export.

Use ng-hub-ui-signature when a form needs a reusable signature surface without losing accessibility, responsive rendering or portable form data.

ng-hub-ui-signature is a standalone Angular form field built on Pointer Events. It captures mouse, touch and pen strokes, preserves them as an SVG ControlValueAccessor value, restores saved signatures, and provides clear, undo, redo and PNG export. Its --hub-signature-* tokens inherit the ng-hub-ui-forms field contract so the label, border, radius and focus treatment match the rest of a form.

Key highlights:
- Scalable SVG value: Persist a compact, sharp signature rather than a device-dependent bitmap.
- Pointer input: One drawing surface for mouse, touch and pen.

Common use cases: contract acceptance; delivery confirmation; consent forms; approval workflows.

Frequently asked questions:
Q: How do I capture a handwritten signature in an Angular form?
A: Install ng-hub-ui-signature and put <hub-signature> in the form with formControlName, or bind it with ngModel. The component implements ControlValueAccessor, so the control's value is the signature itself: an SVG string you can store as text. Angular's required validator works on it, and valueChange emits the same SVG whenever the user draws or clears.

Q: Can someone sign without a mouse or a touchscreen?
A: Yes. The drawing surface takes keyboard input: the arrow keys move the pen four logical pixels at a time, twenty with Shift, Space or Enter lowers and lifts it, and Escape discards the stroke in progress. That is why the canvas carries role="application" — it needs the arrow keys for itself instead of handing them to the page.

Q: How do I get a PNG or an SVG out of the signature to send to a backend?
A: Take a template reference to the component and call toDataUrl(), which defaults to image/png, or toSvg() for the vector markup; toStrokes() returns the raw points. Store the SVG if the signature may ever be reopened for editing, because a PNG cannot be loaded back into the field.

Q: Is this a legally binding electronic signature?
A: No. ng-hub-ui-signature captures handwriting geometry and nothing else — no certificate, no timestamp, no hash of the document being signed. For a qualified signature under eIDAS or ESIGN you need a signing service, and this field is at most the drawing input for it. It also pads a single tap into a valid stroke, so validate beyond required when the field gates something legal.

What changed in 22.8.1 (2026-09-16):
- The repository moved to the `hub-env` organization. Issues for every Hub UI package are now

## ng-hub-ui-skeleton — Angular Skeleton Loader Component
- api: https://hubui.dev/en/skeleton/api/
- overview: https://hubui.dev/en/skeleton/overview/
- styles: https://hubui.dev/en/skeleton/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-skeleton
- Latest release: 22.3.2 (2026-09-16)

Angular skeleton loading placeholders with reusable presets, inline DSL templates, responsive values and CSS variables for shimmer states.

Choose this Angular skeleton library when loading states need to stay systematic, reusable and product-ready instead of degenerating into one-off shimmer markup.

ng-hub-ui-skeleton gives Angular teams a structured way to design loading placeholders: bundled presets for common UI patterns, a compact DSL for custom shapes and responsive values that adapt the same skeleton to multiple layouts.

Key highlights:
- Preset Catalogue: Reuse skeleton patterns such as cards, table rows, dashboards or detail views without repeating loading markup.
- Compact DSL: Describe nested skeleton trees with a concise syntax built for product teams that iterate quickly.
- Responsive loading states: Adjust columns, spacing and other layout values per breakpoint without duplicating the template.

Common use cases: cards and feeds; data tables; forms; dashboards.

Frequently asked questions:
Q: How do I show skeleton loading placeholders in Angular?
A: Install ng-hub-ui-skeleton and render HubSkeletonComponent while your data is in flight. You describe the placeholder shape — lines, blocks, circles — and it animates a shimmer until the real content replaces it, which keeps the layout from jumping when the data lands.

Q: Can I reuse the same skeleton shape across components?
A: Yes. HubSkeletonPreset registers a named shape once and reuses it wherever that layout appears, so a card placeholder is defined in one place instead of being copied into every list and detail view that renders a card.

Q: How do I change the shimmer colour or speed of a skeleton?
A: Every colour, radius and animation of ng-hub-ui-skeleton is a CSS custom property, so you restyle it from your own stylesheet at runtime and it follows dark mode without rebuilding. HubSkeletonAppearance switches between the built-in shimmer and a plain static placeholder.

Q: Should I use a skeleton or a spinner while data loads?
A: Use a skeleton when you know the shape of the content that is coming, because it reserves the space and avoids the layout shift a spinner leaves behind. A spinner fits better for short, indeterminate waits where the resulting layout is unknown.

What changed in 22.3.2 (2026-09-16):
- The repository moved to the `hub-env` organization. Issues for every Hub UI package are now

## ng-hub-ui-sortable — Angular Drag & Drop Sortable List
- api: https://hubui.dev/en/sortable/api/
- overview: https://hubui.dev/en/sortable/overview/
- npm: https://www.npmjs.com/package/ng-hub-ui-sortable
- Latest release: 22.2.1 (2026-09-16)

Angular sortable list and drag-and-drop utilities for arrays, FormArray integration, Signals workflows and connected lists.

Choose this Angular sortable library when you need drag and drop ordering that works with arrays, reactive forms, Signals and complex UI builders.

ng-hub-ui-sortable helps Angular teams reorder data naturally in products where order matters: tasks, priorities, layout builders or dynamic form blocks. It is especially useful when you need drag and drop without losing control over state updates.

Key highlights:
- Array and list ordering: Reorder domain data in Angular without reinventing drag and drop behavior.
- Works with FormArray: A strong fit for dynamic forms and configurable interfaces where controls must move with the model.
- Connected drag-and-drop flows: Manage multiple lists, transfers and builder-style experiences with Angular-friendly state handling.

Common use cases: task ordering; FormArray editors; layout builders; priority management.

Frequently asked questions:
Q: How do I make a list drag-and-drop sortable in Angular?
A: Install ng-hub-ui-sortable and put [hubSortable] on the container element, bound to the array behind the list. Dragging an item reorders that array in place, so the template follows with no event handler of your own. The same input also accepts a WritableSignal or a FormArray, each reordered through its own API.

Q: Can I drag items between two lists?
A: Yes. Give both containers the same group name, through the [group] input or the full SortableJS options object, and items cross from one array into the other. The add and remove outputs tell you which list an item left and which one received it, both carrying oldIndex and newIndex.

Q: Does the sorting work with the keyboard?
A: Yes, and it is on by default. Enter or Space grabs the focused item, the arrow keys move it, Home and End send it to either end, Escape cancels, and every step is announced through a polite live region the directive manages. SortableJS alone binds only mousedown and touchstart, so this is added on top; [keyboardSorting]="false" removes it.

Q: How is this different from Angular CDK drag and drop?
A: It wraps SortableJS rather than the CDK, so there is no cdkDropList and cdkDrag pairing: one attribute on the container is the whole setup and the bound array is updated for you. It ships no CSS either, so the drag feedback comes from the class names you pass through ghostClass, chosenClass and dragClass. For the CDK's explicit style, set [autoUpdateArray]="false" and reorder yourself with the exported moveItemInArray, transferArrayItem and copyArrayItem helpers.

What changed in 22.2.1 (2026-09-16):
- The repository moved to the `hub-env` organization. Issues for every Hub UI package are now
- The migration guide and both READMEs said `ngx-sortablejs` stops compiling at Angular 13. Angular

## ng-hub-ui-stepper — Angular Stepper Component
- api: https://hubui.dev/en/stepper/api/
- overview: https://hubui.dev/en/stepper/overview/
- styles: https://hubui.dev/en/stepper/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-stepper
- Latest release: 22.10.3 (2026-09-20)

Angular stepper component with validation, orientation modes, custom controls, i18n and CSS-variable theming.

This Angular stepper component is useful for guided multi-step flows where validation, progression rules and branding need to stay under your control.

ng-hub-ui-stepper helps Angular applications structure onboarding, checkout and wizard-like forms. It gives teams a reusable way to control step progression, validation and navigation logic without baking those rules into each flow by hand.

Key highlights:
- Guided multi-step flows: Useful for wizards, onboarding and sequential processes that need user guidance.
- Validation-aware progression: Control when users can move forward and reflect state changes clearly across steps.
- Fits branded product flows: Adapt controls, labels and visuals to your own design language instead of accepting default wizard UI.

Common use cases: checkout flows; wizard forms; onboarding; configuration steps.

Frequently asked questions:
Q: How do I build a multi-step form wizard in Angular?
A: Install ng-hub-ui-stepper, wrap the steps in <hub-stepper> and declare each one as <hub-step title="...">. Only the current step's content is in the DOM — it renders into a single role="tabpanel" — and the rail of step titles is generated from the projected steps. Add provideHubStepper() to your providers: without it the first render throws, because the translation service behind the button labels is not provided in root.

Q: How do I stop the user advancing until the form is valid?
A: You gate it yourself. The stepper never inspects your forms: canNavigateTo() answers on the step's own [disabled] input and nothing else, so bind [disabled] to something like a control group's invalid state. Note that goTo() only checks the bounds, so a programmatic jump can still land on a disabled step.

Q: How do I drive the stepper from my own buttons?
A: Two ways. Put previousButton, nextButton or submitButton on your own <button> elements and the directives wire up the click and the disabled state — those queries deliberately ignore descendants, so the button has to sit outside the <hub-step>, not inside it. Or take a template reference, <hub-stepper #wizard>, and call wizard.goTo(i), goToNext(), goToPrevious() or complete(); currentIndex is a writable signal you can read.

Q: How does it differ from Angular Material's MatStepper?
A: Validation is the big one: MatStep takes a stepControl and refuses to advance on its own, while this stepper delegates that entirely to your [disabled] binding, and there are no per-step completed, editable, optional or errorState inputs. In exchange, theming is --hub-stepper-* custom properties, also settable at runtime through StepperThemeService.setTheme(); transitions are plain CSS with no @angular/animations dependency; and the whole rail can be replaced with an <ng-template hubStepperNav> or each trigger with hubStepTrigger — at the cost of the built-in tablist and arrow-key handling.

What changed in 22.10.3 (2026-09-20):
- The version banner at the top of both READMEs announced `22.10.1` while the manifest published

## Theming Angular Components with CSS Variables
https://hubui.dev/en/theming/
Theme ng-hub-ui components with CSS variables: accent colors, dark mode, per-component tokens and ready-made themes — no Sass rebuild required.

## ng-hub-ui-toast — Angular Toast Notification Service
- api: https://hubui.dev/en/toast/api/
- overview: https://hubui.dev/en/toast/overview/
- styles: https://hubui.dev/en/toast/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-toast
- Latest release: 22.11.2 (2026-09-20)

Standalone Angular toast notification service with Signals, lifecycle observables, progress bar, six positions and full CSS variable theming.

Use ng-hub-ui-toast when you need a zero-config imperative notification layer that coexists with Angular's standalone architecture and gives you Observable-based lifecycle hooks out of the box.

ng-hub-ui-toast is a signal-driven toast service for Angular 22+ standalone apps. Call success(), error(), warning() or info() from any component or service; the overlay container is lazily mounted the first time a notification fires. Each call returns a HubToastRef with onShown, onHidden and onTap observables and manualClose() / resetTimeout() methods. Configure defaults globally with provideToast() and override any option per-call.

Key highlights:
- Signal-driven stack: The active-toast list is a signal<HubToastData[]>, giving OnPush-safe rendering with zero manual change-detection calls.
- Lifecycle Observables: HubToastRef surfaces onShown, onHidden and onTap RxJS observables for full reactive control.
- CSS Variable Theming: Every colour, radius, shadow and dimension is a --hub-toast-* custom property inheriting from the design system.

Common use cases: form submission feedback; background sync notifications; error alerts; session expiry warnings.

Frequently asked questions:
Q: How do I show a toast notification in Angular?
A: Inject HubToastService and call success(), error(), warning() or info() with the message and an optional title. Nothing goes in your template: the service mounts its own container on document.body the first time you call it. provideToast() sets the application-wide defaults, and a third argument overrides them for a single toast.

Q: How do I know when a toast was dismissed or clicked?
A: Every show method returns a HubToastRef with onShown, onHidden and onTap as observables that complete when the toast closes, so a plain subscribe tears itself down and takeUntil is unnecessary. The same ref carries manualClose() and resetTimeout(), plus a toastId you can pass to HubToastService.remove().

Q: Can I put a button or HTML inside a toast?
A: No. The title and message are rendered as plain interpolated text and the only control is the close button, so links, markup and an Undo action are out of scope. A click on the whole toast is available through tapToDismiss and the onTap observable; anything that needs a real action belongs in a modal or an inline banner.

Q: Where does the toast appear, and how many can stack?
A: positionClass takes one of six values — toast-top-right, toast-top-left, toast-top-center and the three bottom equivalents — and each position gets its own container, so corners can be mixed. newestOnTop sets the order within a stack, maxOpened caps how many are visible at once (counted across every position, not per corner) and preventDuplicates drops a repeat of a message already on screen.

What changed in 22.11.2 (2026-09-20):
- The npm keywords name the words people actually search with — `toasts`, `notifications`,

## Angular Design Tokens Reference
https://hubui.dev/en/tokens/
Complete --hub-* design token reference for ng-hub-ui: color, typography, spacing, radius and shadow variables with light and dark values.

## ng-hub-ui-utils — Angular Utility Library
- api: https://hubui.dev/en/utils/api/
- overview: https://hubui.dev/en/utils/overview/
- styles: https://hubui.dev/en/utils/styles/
- npm: https://www.npmjs.com/package/ng-hub-ui-utils
- Latest release: 22.15.2 (2026-09-20)

Angular utility library with pipes, focus management, overlays, transitions and translation helpers shared across reusable UI components.

Use this Angular utility library to avoid rewriting the low-level pieces behind overlays, focus traps, translation helpers and common template utilities.

ng-hub-ui-utils is the shared foundation behind many reusable UI patterns. It is useful when Angular teams want to centralize the lower-level pieces that keep overlay systems, focus management, pipes and translation helpers consistent across projects.

Key highlights:
- Overlay and popup primitives: Provides the lower-level building blocks needed by floating UI and detached rendering patterns.
- Focus management utilities: Handle focus traps and keyboard-safe interaction patterns in dialogs and overlays.
- Pipes and translation helpers: Centralize template helpers, formatting and lightweight translation utilities used by Angular components.

Common use cases: shared UI infrastructure; overlay systems; focus management; template helpers.

Frequently asked questions:
Q: What is ng-hub-ui-utils, and do I have to install it?
A: It is the shared toolbox the rest of the family is built on, and it ships no visual components. Seventeen of the libraries declare it as a required peer — board, modal, paginable, panels, calendar, forms and most of the others — so if you use any of them it is already in the tree, and npm installs peers by itself from version 7. Installing it on its own is fine too: ng-hub-ui-ds is its only optional peer.

Q: What is actually inside ng-hub-ui-utils?
A: The native drag-and-drop core that board, sortable and calendar share — moveItemInArray, transferArrayItem, resolveDropPosition and a pointer session that covers touch — plus focus helpers such as hubFocusTrap and getFocusableBoundaryElements, transition helpers, an overlay service with connected positioning, a colour kit that parses any CSS colour and converts to OKLCh and measures contrast, a tooltip directive, seven pipes and the usual type guards and object helpers.

Q: Can I use it directly in my own application?
A: Yes, and nothing needs registering for most of it: import isString, HubGetPipe or hubFocusTrap and use them. Two subsystems do need wiring. HubTranslationService has no providedIn, so provideHubTranslation() comes first or the injection fails, and the tooltip directive needs provideHubTooltip(hubTooltipAdapter). Their stylesheets are not bundled either: add @use 'ng-hub-ui-utils/styles/tooltip' or the overlay equivalent yourself.

Q: Is it an alternative to the Angular CDK?
A: No, and it does not try to be. There is no portal abstraction, no scroll strategies, no LiveAnnouncer or FocusMonitor, no virtual scroll and no breakpoint observer, and the drag and drop is the primitives only — the handle, placeholder and preview directives stay inside each library that needs them. The translation layer is a dictionary with dot-path lookup and double-brace interpolation: no plurals, no ICU, no lazy loading, and an adapter token for delegating to a real i18n library. It is the floor this family stands on, not a general-purpose toolkit.

What changed in 22.15.2 (2026-09-20):
- The package manifest carries a description and a keyword list. It was the only one of the 26