Skip to content

v18.0.0-beta.2

Pre-release
Pre-release

Choose a tag to compare

@github-actions github-actions released this 13 Mar 12:51
e4b73dd

18.0.0-beta.2 (2026-03-13)

Bug Fixes

  • badge: remove obsolete vertical alignment investigation TODO (#2242) (881fb22)
  • datagrid: remove unused render constants and resolve CSS TODOs (#2235) (d2bb999)
  • date-picker: resolve TODOs and fix min-attribute test bug (#2250) (7869cc0)
  • vertical-nav: active state indicator appearance (#2260) (efa55fd)
  • wizard: backdrop click not focusing title (#2209) (3af700e)

Features

  • accordion: remove deprecated active-background-color CSS property (#2230) (a4b0f13)
  • backport appfx to latest (#2222) (5be26d7)
  • combobox: add identity function (#2211) (4d3df89)
  • drop IE11 and legacy Edge workarounds (#2228) (6e92967)
  • form: remove IE/legacy Edge range input styles (#2253) (9937a48)
  • forms: change error and success icons position (#2213) (e4b73dd)
  • popover: add point-based origin support for popovers, dropdowns, and signposts (#2267) (2167334)
  • stepper: update status icons (#2210) (8bebd7f)
  • styles: resolve TODOs in global styles, mixins, typography, and reboot (#2240) (a9c6714)
  • wizard: rename currentPageChanged output and remove resolved TODOs (#2249) (c011c6d)
  • wizard: rename misnamed CSS custom properties (#2229) (426f159)

BREAKING CHANGES

  • popover: The popover system's "anchor" naming has been replaced with "origin" to align with Angular CDK terminology and to correctly describe both element-based and point-based positioning. ClrPopoverAnchor is now ClrPopoverOrigin (selector [clrPopoverOrigin]). POPOVER_HOST_ANCHOR is now POPOVER_HOST_ORIGIN. ClrPopoverService.anchorElementRef and anchorPoint are merged into a single origin property typed as FlexibleConnectedPositionStrategyOrigin. Use originElement to access as ElementRef and originPoint to access as ClrPopoverPoint. focusAnchor() is renamed to focusOrigin(). getAnchorPosition() is renamed to getOriginPosition().

Migration

// Template: directive selector
// Before
<button clrPopoverAnchor>Trigger</button>
// After
<button clrPopoverOrigin>Trigger</button>

// Service: origin property
// Before
popoverService.anchorElementRef = elementRef;
popoverService.anchorPoint = { x: 100, y: 200 };
popoverService.focusAnchor();
// After
popoverService.origin = elementRef;
popoverService.origin = { x: 100, y: 200 };
popoverService.focusOrigin();

// InjectionToken
// Before
{ provide: POPOVER_HOST_ANCHOR, useExisting: ElementRef }
// After
{ provide: POPOVER_HOST_ORIGIN, useExisting: ElementRef }

// Position utility
// Before
getAnchorPosition(key)
// After
getOriginPosition(key)
  • accordion: --clr-accordion-active-background-color and --clr-collapsible-panel-active-background-color CSS custom properties have been removed. Use --clr-accordion-header-open-background-color or --clr-collapsible-panel-header-open-background-color instead.

  • styles: [cds-text*='heading'] attribute selector has been removed. Consumers should migrate to [cds-text*='headline'] which provides identical styling. This selector was deprecated since v7 (CDE-821). $clr-altFont SCSS variable removed (was unused).

<!-- Before -->
<p cds-text="heading">Title</p>
<!-- After -->
<p cds-text="headline">Title</p>
  • wizard: Wizard CSS custom properties have been renamed. Update any custom theme overrides using the old property names.
Before After
--clr-wizard-stepnav-text--active --clr-wizard-stepnav-text-selected
--clr-wizard-stepnav-item-border-color--active --clr-wizard-stepnav-item-complete-border-color
--clr-wizard-stepnav-active-bgcolor --clr-wizard-stepnav-selected-bgcolor
--clr-wizard-stepnav-link-hover-bg-color --clr-wizard-stepnav-hover-bgcolor
--clr-wizard-stepnav-link-active-bg-color --clr-wizard-stepnav-active-bgcolor
  • wizard: The template output (clrWizardCurrentPageChanged) is now (clrWizardCurrentPageChange). The WizardNavigationService.currentPageChanged getter is now currentPageChange. Update all bindings.
<!-- Before -->
<clr-wizard (clrWizardCurrentPageChanged)="onPageChange($event)">
<!-- After -->
<clr-wizard (clrWizardCurrentPageChange)="onPageChange($event)">
  • IE11/Edge: All IE11 and legacy (pre-Chromium) Edge workarounds have been removed. The following public API symbols are removed from @clr/angular/utils:
Removed Migration
IEKeys enum Use standard KeyboardEvent.key string values
normalizeKey() function Use event.key directly
$clr-use-custom-properties SCSS variable Removed — CSS custom properties are now always emitted
  • form: The range-track-style SCSS mixin has been removed from _mixins.forms.scss. This mixin only targeted ::-ms-track, ::-ms-thumb, and ::-ms-fill-lower pseudo-elements for pre-Chromium Edge. Remove any @include range-track-style(...) calls from custom SCSS.

  • forms: Error and success icons in form controls have been repositioned. This is a visual breaking change — no code migration is needed, but custom CSS overrides targeting icon positioning may need adjustment.