New versions include improvements but also contain breaking changes; they must be applied step by step.

1. Up to 18.5.3: a safe baseline with updated theming and icons.
2. 18.6: token update.
3. 18.22: component attribute changes.
4. 20.0.0: the move to Angular 20: removal of deprecated APIs and package renames.

npm install @koobiq/cdk@18.5.3
npm install @koobiq/components@18.5.3
npm install @koobiq/icons@^9.0.0
npm install @koobiq/design-tokens@~3.7.3
npm install @koobiq/angular-luxon-adapter@18.5.3
npm install @koobiq/date-adapter@^3.1.3
npm install @koobiq/date-formatter@^3.1.3
npm install luxon
npm install @messageformat/core

Theming is now simpler and built on CSS variables. Theming. How to use.

Examples:

• apps/docs/src/main.scss
• apps/docs/src/styles/_theme-kbq.scss

Install the new icon version:

npm install @koobiq/icons@9.1.0

To update icon names in templates, use the update tool (schematic):

ng g @koobiq/angular-components:new-icons-pack --project <your project>

Deprecated color tokens were removed and typography parameter tokens were renamed.

The script will rename class and CSS-variable names to the new ones and highlight places where deprecated colors need to be removed (replaced):

ng g @koobiq/angular-components:css-selectors --fix=true --project <your project>

For manual review, add --fix=false. The script will highlight places where colors and typography names need to be removed (replaced):

ng g @koobiq/angular-components:css-selectors --fix=false --project <your project>

Component attribute names have changed:

• KbqLoaderOverlay: compact → size
• KbqEmptyState: big → size

The schematic replaces the attributes automatically:

ng g @koobiq/angular-components:loader-overlay-size-attr --project <your project>
ng g @koobiq/angular-components:empty-state-size-attr --project <your project>

In version 20.0.0 the library moves to Angular 20. This is a major release: long-deprecated APIs were removed and some packages were renamed. Requirements: Angular 20+ and Node.js ≥ 20.19.

Remove @koobiq/cdk from package.json — the package has been merged into @koobiq/components/core.

Most of the changes are applied by the v20-upgrade schematic (runs automatically):

ng update @koobiq/components@20

Or manually. To preview without writing — --fix=false:

ng g @koobiq/components:v20-upgrade --project <your project>

Package moves:

• @koobiq/components/navbar-ic → navbar
• risk-level → badge
• @koobiq/components-experimental/form-field → @koobiq/components/form-field
• @koobiq/cdk/{a11y,keycodes,testing} → @koobiq/components/core

Classes, tokens, functions:

• KbqNavbarIc* → Kbq*,
• KbqRiskLevel* → KbqBadge*,
• toBoolean → booleanAttribute,
• formatDataSize → getFormattedSizeParts

Instance methods:

• .openPanel() → .open(),
• .toggleIsCollapsed() → .toggle(),
• .focusViaKeyboard() → .focus().

Templates:

• kbq-filter-search → kbq-search-expandable,
• kbq-datepicker-toggle → kbq-datepicker-toggle-icon,
• kbqFormFieldWithoutBorders → noBorders,
• [kbqWarningTooltip] → kbqTooltipModifier="warning" [kbqTooltip].

SCSS:

• .kbq-risk-level → .kbq-badge,
• .kbq-navbar-ic → .kbq-navbar, etc.

The schematic emits warnings for what cannot be rewritten safely:

(onSaveAsNew) on kbq-filters: listen to (onSave) and check $event.status === 'newFilter'.

File upload. The [customValidation] and [errors] attributes → FormControl validators / FormControl.errors.

App switcher. [apps] → [sites]="[{ id, name, apps }]".

Validation. KbqValidateDirective and kbqDisableLegacyValidationDirectiveProvider() were removed → use ErrorStateMatcher (e.g. ShowOnSubmitErrorStateMatcher).

Modals: ModalOptions.kbqComponentParams → the data field + inject(KBQ_MODAL_DATA).

Code block: the deprecated canLoad / codeFiles inputs are renamed to canDownload / files. Template bindings are migrated automatically; programmatic access (.canLoad, .codeFiles) must be updated by hand.

The migration is regex-based and does not rewrite aliased imports, local variables, or re-exports — review the diff before committing, rebuild the project and run your tests. The full list of breaking changes is on the Angular 20 breaking changes page.