v18.0.0-beta.4

18.0.0-beta.4 (2026-04-01)

Features

• combobox: add editable resolver and fix identity compatibility (#2310) (1ddd82f), closes #2211
• combobox: select all functionality (#2156) (9094d0c)
• datagrid-filters: improve filters and add preset filters support (#2299) (904eea9)
• wizard: add horizontal stepnav layout and rename internal CSS classes (#2291) (f39dd38), closes #1840
• add ng-update migration schematics for v18 (#2274) (ff35d87)

Bug Fixes

• datagrid: forced refresh emit on pagination empty state (#2296) (9be55b8)
• nav: use Angular createComponent for nav close button icon (#2289) (3babb56), closes #2288
• remove deprecated in v17 CSS tokens (#2294) (fa85651)

Breaking Changes

1. Wizard — Internal CSS class renames (#2291)

All modal-inherited CSS classes inside the wizard template have been replaced with wizard-specific class names. Any custom styles or test selectors targeting these classes inside a clr-wizard must be updated.

Old class	New class
modal-content-wrapper	clr-wizard-content-wrapper
modal-nav	(removed — class no longer applied)
modal-content	clr-wizard-main-content
modal-header--accessible	clr-wizard-header
modal-title-wrapper	clr-wizard-page-title-wrapper
modal-title	clr-wizard-page-title
modal-title-text	clr-wizard-page-title-text
modal-header-actions-wrapper	clr-wizard-header-actions-wrapper
modal-body-wrapper	clr-wizard-body-wrapper
modal-body	clr-wizard-body
modal-footer	(removed — class no longer applied)

What to update: Search your SCSS/CSS files for any of the modal-* class selectors scoped inside clr-wizard and rename them according to the table above.

---

2. Datagrid Filters — EnumPropertyDefinition and UsersFilterComponent API changes (#2299)

Package: @clr/addons/datagrid-filters

Old API	New API	Notes
EnumPropertyDefinition constructor param showKeyInParentheses	enableSelectAll (default true)	Controls "Select All" checkbox visibility. The key-in-parentheses display has been removed.
UsersFilterComponent.formatUser() method	(removed)	Delegate user formatting to your DatagridFiltersUserService implementation.
UsersFilterComponent.userOperators property	(removed)	Use filterProperty.supportedOperators in templates instead.

Before:

new EnumPropertyDefinition('status', statusOptions, { showKeyInParentheses: false });

After:

new EnumPropertyDefinition('status', statusOptions, { enableSelectAll: false });

---

3. Deprecated CSS custom properties removed (#2294)

All CSS custom properties and Sass variables that were deprecated in v17 have been removed. Replace any usages with the tokens listed below.

Accordion

Removed	Replacement
--clr-accordion-content-font-size	Use --clr-accordion-content-typography via generate-typography-token
$clr-accordion-content-font-size	(same as above)

Collapsible Panel

Removed	Replacement
--clr-collapsible-panel-content-font-size	Use --clr-collapsible-panel-content-typography
$clr-collapsible-panel-content-font-size	(same as above)

Alerts / Density

Removed	Replacement
--clr-base-app-level-alert-row-height	--clr-base-row-height-l
$clr-base-app-level-alert-row-height	$clr-base-row-height-l

Datagrid

Removed	Replacement
--clr-datagrid-placeholder-color	Use --clr-datagrid-placeholder-typography
--clr-datagrid-placeholder-font-size	(same as above)
--clr-datagrid-placeholder-font-weight	(same as above)
--clr-datagrid-placeholder-line-height	(same as above)
--clr-datagrid-placeholder-letter-spacing	(same as above)
--clr-datagrid-row-hover-font-color	(no replacement — token no longer used)
--clr-datagrid-action-popover-hover-color	(no replacement — token no longer used)

Dropdown

Removed	Replacement
--clr-dropdown-bg-hover-color	--clr-dropdown-item-hover-bg-color
--clr-dropdown-selection-color	--clr-dropdown-item-selected-bg-color
$clr-dropdown-bg-hover-color	$clr-dropdown-item-hover-bg-color
$clr-dropdown-selection-color	$clr-dropdown-item-selected-bg-color

Signpost

Removed	Replacement
--clr-signpost-border-size	--clr-signpost-pointer-size
--clr-signpost-pointer-psuedo-border	--clr-signpost-pointer-pseudo-border (typo fixed)
$clr-signpost-border-size	$clr-signpost-pointer-size
$clr-signpost-pointer-psuedo-border	$clr-signpost-pointer-pseudo-border

Tree View

Removed	Replacement
--clr-tree-link-hover-color	--clr-tree-node-link-hover-color
--clr-tree-link-active-color	--clr-tree-node-link-active-color
--clr-tree-link-selected-color	--clr-tree-node-link-selected-color
--clr-tree-node-caret-link-hover-color	--clr-tree-node-caret-hover-color
--clr-tree-node-caret-link-active-color	--clr-tree-node-caret-active-color
--clr-tree-node-caret-link-selected-color	--clr-tree-node-caret-selected-color

Stack View

Removed	Replacement
--clr-stack-view-stack-block-changed-border-top-color	--clr-stack-view-block-changed-border-top-color
--clr-stack-view-stack-block-changed-background-color	--clr-stack-view-block-changed-bg-color
--clr-stack-view-color	--clr-stack-view-text-color
--clr-stack-view-bg-color	--clr-stack-view-background-color
--clr-stack-view-expanded-hover-row-bg-color	--clr-stack-view-expanded-row-bg-color-hover
--clr-stack-view-expanded-active-row-bg-color	--clr-stack-view-expanded-row-bg-color-active

Tables

Removed	Replacement
$clr-table--compact-rowHeight	$clr-table-compact-row-height
$clr-table--compact-verticalPadding	$clr-table-compact-vertical-padding

Header

Removed	Replacement
$clr-header-bgColor	$clr-header-bg-color
$clr-search-icon-width	$clr-header-search-icon-size

Progress Bars

Removed	Replacement
$clr-progress-defaultBarColor	$clr-progress-default-color
$clr-progress-bgColor	$clr-progress-bg-color

Toggle

Removed	Replacement
$clr-toggle-switch-height	$clr-toggle-dot-diameter

Login

Removed	Replacement
.trademark CSS class	(removed — wrap trademark symbol without a class)
.subtitle CSS class	.hint
Related CSS custom properties	(no replacement)

---

🔧 Migration Guide

Automatic migration via ng update

Run the following command to apply all v18 breaking changes automatically across your codebase:

ng update @clr/angular

The migration schematics handle:

• Import path updates — deep /src/ imports → secondary entry points (@clr/angular/accordion, etc.), @cds/core → @clr/angular/icon
• Symbol renames — e.g. ClrLabel → ClrControlLabel, clrDgItemsTrackBy → clrDgItemsIdentityFn, AccordionPanelModel → CollapsiblePanelModel, and all 24 Ç-prefixed symbols (from beta.3)
• Template updates — output renames (clrWizardCurrentPageChanged → clrWizardCurrentPageChange), input renames (clrBadgeColor → clrColor, clrDgItemsTrackBy → clrDgItemsIdentityFn), cds-icon attribute binding style ([attr.shape] → [shape]), cds-text="heading" → cds-text="headline", header class variants, popover anchor directive (clrPopoverAnchor → clrPopoverOrigin)
• CSS custom property renames — wizard stepnav properties, accordion/collapsible panel properties, range-track-style mixin calls annotated with TODO comments

Manual migration checklist

Items not covered by automatic migration:

• Update custom SCSS targeting wizard modal-* classes to the new clr-wizard-* class names (see table above)
• Update EnumPropertyDefinition constructor: showKeyInParentheses → enableSelectAll
• Remove references to UsersFilterComponent.formatUser() — move formatting to your DatagridFiltersUserService implementation
• Remove references to UsersFilterComponent.userOperators — use filterProperty.supportedOperators in templates
• Remove all usages of the deprecated v17 CSS custom properties listed above
• Remove usages of IEKeys and normalizeKey (removed; no replacement)
• Remove @include range-track-style(...) SCSS mixin calls (removed)