Ignite UI Web Components Changelog

July 9, 2026 · View on GitHub

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog and this project adheres to Semantic Versioning.

[Unreleased]

Added

  • Icon

    • registerIcon and registerIconFromText now accept a RegisterIconOptions object as their third argument in addition to the existing plain collection string. Setting stripMeta: true removes <title> and <desc> elements from the stored SVG, preventing the browser from displaying a native tooltip on hover. The title text is still captured and exposed as the aria-label of the host <igc-icon> element. Any aria-labelledby / aria-describedby references on the root <svg> that pointed to the stripped elements' IDs are cleaned up automatically. #1822

7.2.4 - 2026-06-29

Added

  • Form associated custom elements with external labels

    • External <label> associations are now resolved to the underlying native input of form-associated controls. Associating a label with IgcInput, IgcMaskInput, IgcTextarea, IgcDateTimeInput, IgcSelect, IgcCombo, IgcDatePicker, or IgcDateRangePicker — either through the for/id IDREF mechanism or by nesting the component inside the <label> — now correctly exposes the label to assistive technologies and focuses the inner input on label activation. #2263

Changed

Fixed

  • Tabs

    • Prevent selected tab header from scrolling into view on initial render #2268

7.2.3 - 2026-06-18

Fixed

7.2.2 - 2026-06-15

Changed

Fixed

7.2.1 - 2026-05-27

Fixed

  • Internal library metadata issue

7.2.0 - 2026-05-27

Added

  • Date Range Picker

    • Added support for editing the date range value directly via a single input field. #1733
    • The drawer for non-relative positions are now implemented using the native Popover API, providing built-in modal semantics, focus trapping, and accessibility support. #2194
    • Added keepOpenOnEscape property — prevents the drawer from closing when the user presses the Escape key (non-relative positions only). #2194
    • Added igcClosing event — emitted just before the drawer is closed by user interaction. Cancelable. #2194
    • Added igcClosed event — emitted just after the drawer is closed by user interaction. #2194

  • Invoker Commands API

    • igc-button and igc-icon-button now support command and commandfor properties, enabling declarative control of target components without JavaScript. #2225
    • igc-banner, igc-dialog, igc-nav-drawer, igc-snackbar, and igc-toast now respond to --show, --hide, and --toggle commands dispatched by an invoker button. #2225

  • Snackbar

    • Added positioning property (viewport | container). The component now renders as a popover in the browser top layer. Setting positioning to container anchors the component to its nearest visible ancestor instead of the viewport. #2203

  • Toast

    • Added positioning property (viewport | container). The component now renders as a popover in the browser top layer. Setting positioning to container anchors the component to its nearest visible ancestor instead of the viewport. #2203

Changed

  • AI-Assisted Development

    • Updated and enhanced the library provided skills #2232

  • Form controls

    • IgcInput, IgcMaskInput, IgcDateTimeInput, IgcCheckbox, IgcRadio, IgcSwitch, IgcDatePicker, and IgcDateRangePicker now submit their associated form on Enter key press, matching native browser behavior. #2213

  • Input

    • Added theming support for date, time, datetime-local, week, and month input types, ensuring consistent styles and floating label behavior across all supported themes. #2223
    • The overlay CSS part has been removed. Users of the component can target the base part's ::backdrop pseudo-element, the --ig-overlay-background-color variable or use the theming package. #2194

Deprecated

  • Localization

    • The old resource string interfaces for Calendar, Chat, Date Picker, and Date Range Picker are deprecated. Components now use the new igniteui-i18n resource keys. Setting individual resourceStrings properties directly is no longer supported; provide a complete resource strings object instead. #2169

Fixed

  • Button Group

    • Selected state border color mismatch in focused and hover states. #2219

  • Combo

    • Display value not restored correctly when tabbing out in single-select mode with a partial search text. #2224

  • Stepper

    • Step components connected to the DOM before their parent stepper now correctly receive context after being adopted by a stepper. #2228

7.1.3 - 2026-04-28

Changed

Fixed

  • Stepper

    • In horizontal orientation, the content area height can now driven by the active step's content instead of always being sized to the tallest step. A new --body-grid-rows CSS custom property controls the internal row sizing of each step body — its default value of 1fr expands the body to fit its content, while setting it to 0fr collapses the body to zero height, enabling fully variable step heights. #2209

7.1.2 - 2026-04-22

Changed

Fixed

7.1.1 - 2026-03-25

Changed

7.1.0 - 2026-03-19

Added

  • Splitter component
  • Highlight container component

Fixed

  • Combo

    • Use focus color for clear button background #2140

  • Stepper

    • Box shadow values for step indicators #2133

  • Tabs

    • Scrolling behavior for tabs content #2149

7.0.1 - 2026-03-06

Fixed

  • Icon service

    • Browser Safari: Use a plain Map instance for synchronizing state between actors #2128

7.0.0 - 2026-02-25

Added

  • AI-Assisted Development - Copilot Skills

    • Four end-user skills are now shipped with the package under the skills/ directory. They provide step-by-step guidance to GitHub Copilot and other LLM agents for common tasks:
      • igniteui-wc-choose-components - Identify the right component for a given UI pattern.
      • igniteui-wc-integrate-with-framework - Set up and use components in React, Angular, Vue, or vanilla JS.
      • igniteui-wc-customize-component-theme - Apply custom styles via CSS custom properties, parts, and the theming system.
      • igniteui-wc-optimize-bundle-size - Reduce production bundle size through selective imports and lazy loading.

    To enable the skills in your project, copy the skill folders into your repository's .github/skills/ directory so Copilot can automatically discover them:

    Unix/macOS:

    cp -r node_modules/igniteui-webcomponents/skills/* .github/skills/

    Windows (PowerShell):

    Copy-Item -Recurse node_modules\igniteui-webcomponents\skills\* .github\skills\

    Windows (Command Prompt):

    xcopy /E /I node_modules\igniteui-webcomponents\skills .github\skills

    Copilot supports project skills stored in .github/skills or .claude/skills in your repository, and personal skills stored in ~/.copilot/skills or ~/.claude/skills (shared across projects; Copilot coding agent and GitHub Copilot CLI only).

  • Chat

    • adoptRootStyles can now be toggled on/off at runtime. #2093

Changed

  • Library

    • Minimum Node version required is now >= 22.

  • Themes - Breaking change

    • Changed global prefixes for CSS custom properties for component themes to align with other Ignite UI component libraries.

Removed

  • Chat

    • Removed the typingIndicator template renderer. Users can use the typing-indicator slot instead.

  • Tooltip

    • Removed the disableArrow deprecated property.

Fixed

6.5.1 - 2026-02-04

Fixed

6.5.0 - 2026-01-20

Added

  • Added theming scoping container #2056
    • The igc-theme-provider component allows you to scope themes to specific parts of your page using Lit's context API. This enables having multiple different themes on the same page.
    • Works both in Shadow and Light DOM.
    • Shadow DOM Usage: When building custom web components with Shadow DOM, you can apply scoped themes by importing the theme CSS and wrapping your content with igc-theme-provider: 
      import { LitElement, html } from 'lit';
import { styles as materialDark } from 'igniteui-webcomponents/themes/dark/material.css.js';

class MyComponent extends LitElement {
  static styles = [materialDark];

  render() {
    return html`
      <style>
        /* Additional component-specific styles */
      </style>
      <igc-theme-provider theme="material" variant="dark">
        <igc-button>Scoped Material Dark Button</igc-button>
        <igc-input label="Scoped Input"></igc-input>
      </igc-theme-provider>
    `;
  }
}
    • Light DOM with @scope: For Light DOM usage, you can leverage CSS @scope to apply themes to specific page sections: 
      <style>
  @scope (#fluent-section) {
    @import 'node_modules/igniteui-webcomponents/themes/light/fluent.css';
  }

  @scope (#material-section) {
    @import 'node_modules/igniteui-webcomponents/themes/dark/material.css';
  }
</style>

<div id="fluent-section">
  <igc-theme-provider theme="fluent" variant="light">
    <igc-button>Fluent Light Button</igc-button>
    <igc-card>
      <igc-card-header>Fluent Theme Card</igc-card-header>
    </igc-card>
  </igc-theme-provider>
</div>

<div id="material-section">
  <igc-theme-provider theme="material" variant="dark">
    <igc-button>Material Dark Button</igc-button>
    <igc-input label="Material Input"></igc-input>
  </igc-theme-provider>
</div>

Fixed

  • Tile manager

    • Header is hidden only when there is no content and maximize/fullscreen are disabled #2059

  • Theming

    • Resolve initial theme based on document computed styles rather than stylesheets #2061

6.4.0 - 2025-12-15

Added

  • Localization

    • New localization implementation. Now you can set global localization for all localized Ignite UI components using the registerI18n and setCurrentI18n methods.
    • Calendar, Date Input, Date Picker and Date Range Picker components now implement the new localization for formatting as well, which internally uses new implementation of the Intl.
    • Added localization for Carousel, Chip, Combo, File Input and Tree. They now have locale and resourceStrings properties as well, which you can set to customize them individually.

  • Badge

    • New dot type, improved outline implementation following WCAG AA accessibility standards and theme based sizing. #1889

  • Checkbox

    • New --tick-width CSS property. #1897

  • Combo

    • New disableClear property which disables the clear button of the combo component. #1896

  • Mask input

    • Transform unicode digit code points to ASCII numbers for numeric patterns. #1907

Changed

  • License Update: The project license has been updated to the MIT License, providing greater flexibility and openness for the community. This change reflects our commitment to fostering an inclusive and collaborative development environment while maintaining the high-quality standards you expect from Ignite UI Web Components.

  • Accessibility

    • Accessibility color adjustments. #1959

  • Button

    • Updated and aligned styles with the design kit. #1996

  • Calendar

    • Updated and aligned styles with the design kit. #1899
    • Updated and aligned styles with the design kit. #1883

  • Chat

    • adoptRootStyles now also affects the input area custom renderers. #1945
    • Renamed input-container part to input-area. #1954

  • Combo

    • Use the native Map.groupBy for grouping. #1802
    • Improved the keyboard navigation experience. #1529
    • Updated and aligned styles with the design kit. #1870

  • Date picker

    • Updated and aligned styles with the design kit. #1870

  • Date range picker

    • Updated and aligned styles with the design kit. #1870

  • Input

    • Updated and aligned styles with the design kit. #1870

  • Select

    • Updated and aligned styles with the design kit. #1870

  • Textarea

    • Updated and aligned styles with the design kit. #1870

Fixed

  • Sass theme support

  • Calendar

    • Focus styles for month/year views. #2030

  • Combo

    • Notch border styles. #1965

  • Chat

    • Suggestions rendered at the wrong location when no header is present. #1908
    • Correct sequence and type for chat user typing events. #1906
    • adoptRootStyles correctly skips @import CSS rules from the page stylesheets. #1931
    • adoptRootStyles is correctly re-applied on theme swap. #1950
    • Replaced hardcoded ig-size style variable. #1975

  • Checkbox & Switch

    • Internal ripple opacity when hovering over slotted content in the helper-text slot. #1964

  • Date input, Date picker, Date range picker

    • Default display format now follows strictly locale format as per specification without leading zeros.

  • Dialog

    • Underlying dialog element now has display: contents and won't participate in DOM layout. #1947
    • keepOpenOnEscape not preventing the dialog from closing when Escape is pressed. #1986
    • Base styles and theming. #1997

  • List & List item

    • Added missing styles for slotted igc-icon in the list item. #1985
    • Icon and icon button sizes for the Indigo theme. #2010

  • Mask input

    • Auto-fill behavior for mask patterns with literals. #2006
    • Icon and icon button sizes. #1956

  • Select

    • Color for outlined type. #1957

  • Tabs

    • Add active pseudo-elements backgrounds for the active tab in Material theme. #1998
    • Take scale factor when positioning the active tab indicator. #2008
    • Selected indicator alignment #2028

  • Tooltip

    • Do not show the tooltip when the tooltip target is clicked. #1828
    • Removed the max-width constraint for slotted content. #1936

6.3.6 - 2025-11-14

Fixed

6.3.5 - 2025-11-13

Changed

  • License Update: The project license has been updated to the MIT License, providing greater flexibility and openness for the community. This change reflects our commitment to fostering an inclusive and collaborative development environment while maintaining the high-quality standards you expect from Ignite UI Web Components.

6.3.4 - 2025-10-22

Fixed

  • Date picker

    • Issues when clearing the value and notch border in Material theme #1894

  • Textarea

    • Stale internal input reference when switching between themes

6.3.3 - 2025-10-14

Fixed

  • Chat

    • Message actions not rendered after last message #1882

  • Date picker

    • Change event not emitted for non-editable input configuration #1885

6.3.2 - 2025-10-07

Added

  • Chat

    • Updated markdown renderer code styles to integrate with the package theming #1868

Fixed

  • Card

    • Consume colors from themes #1871
    • Avatar size in card header #1873

6.3.1 - 2025-09-18

Fixed

  • peerDependencies versions

6.3.0 - 2025-09-18

Added

  • Chat component

Fixed

  • List

    • removed duplicated CSS variables across list components and themes #1853

6.2.2 - 2025-09-16

Fixed

  • Minor bug fixes around styles

6.2.1 - 2025-09-01

Added

Fixed

6.2.0 - 2025-08-04

Added

Changed

  • Form associated custom elements validity behavior. Now elements will try to mimic :user-invalid, and won't apply invalid styles unless interacted through the UI or through a form requestSubmit()/reset() invocation.

Fixed

6.1.2 - 2025-07-14

Added

  • File input

    • Exposed CSS variables for styling most of the Shadow DOM parts #1747

Fixed

6.1.1 - 2025-06-25

Fixed

6.1.0 - 2025-06-12

Added

  • Date Range Picker

Changed

  • Updated the readonly styles of most form associated components across all themes to better signify when a component is in a readonly state.

  • File input

    • Breaking change: igcChange & igcCancel events detail now returns the underlying component files property.

  • Tooltip

    • Behavioral change: Tooltip default placement is 'bottom' now.

    • Behavioral change: Tooltip will not render an arrow indicator by default unless with-arrow is set.

    • Breaking change: Tooltip events will no longer return its anchor target in its detail property.

      You can still access it at event.target.anchor.

Deprecated

  • Tooltip

    • disableArrow is deprecated. Use withArrow | with-arrow to render an arrow indicator.

Fixed

6.0.1 - 2025-05-28

Added

  • Radio group

    • Slotted <label> elements have default styles based on the current theme #1694

Fixed

6.0.0 - 2025-04-29

Changed

  • Minimum Node version required is now >= 20.

  • Stepper

    • Stepper Step's titlePosition now defaults to auto, instead of being undefined, which has the same behavior.

Removed

  • Library

    • CheckboxChangeEventArgs removed, use IgcCheckboxChangeEventArgs instead.
    • RadioChangeEventArgs removed, use IgcRadioChangeEventArgs instead.
    • IgcRangeSliderValue removed, use IgcRangeSliderValueEventArgs instead.
    • IgcActiveStepChangingArgs removed, use IgcActiveStepChangingEventArgs instead.
    • IgcActiveStepChangedArgs removed, use IgcActiveStepChangedEventArgs instead.

  • Tabs

    • igc-tab panel property is removed.

    • igc-tab-panel component is removed. The igc-tab now encompasses both the tab header and the tab content in a single component.

      Slotted content in the default slot of the igc-tab element now replaces the igc-tab-panel role while elements slotted inside the label slot will end up as content for the igc-tab header.

      Before:

        <igc-tabs>
    <igc-tab panel="home">
      <igc-icon name="home"></igc-icon>
    </igc-tab>
    <igc-tab panel="search">
      <igc-icon name="search"></igc-icon>
    </igc-tab>
    <igc-tab panel="favorite">
      <igc-icon name="favorite"></igc-icon>
    </igc-tab>
    <igc-tab-panel id="home">Home tab panel</igc-tab-panel>
    <igc-tab-panel id="search">Search tab panel</igc-tab-panel>
    <igc-tab-panel id="favorite">Favorite tab panel</igc-tab-panel>
  </igc-tabs>

      After:

        <igc-tabs>
    <igc-tab>
      <igc-icon name="home" slot="label"></igc-icon>
      Home tab panel
    </igc-tab>
    <igc-tab>
      <igc-icon name="search" slot="label"></igc-icon>
      Search tab panel
    </igc-tab>
    <igc-tab>
      <igc-icon name="favorite" slot="label"></igc-icon>
      Favorite tab panel
    </igc-tab>
  </igc-tabs>

5.4.1 - 2025-04-23

Fixed

  • Internal library issues

5.4.0 - 2025-04-23

Added

  • File Input component
  • Tooltip component

  • Library

    • Exposed more public API type aliases for component property types like ButtonVariant, PickerMode, StepperOrientation, HorizontalTransitionAnimation (carousel and horizontal stepper) and more.

Changed

Deprecated

    • Carousel Slide's toggleAnimation is now marked internal and deprecated for use in favor of parent Carousel's select method.

  • Stepper

    • Stepper Step's toggleAnimation is now marked internal and deprecated for use in favor of parent Stepper's navigateTo method.

  • Tabs - NEXT MAJOR (v6.0.0) BREAKING CHANGE

    • igc-tab panel property is removed.

    • Starting with the next major release of the library (6.0.0) the igc-tab-panel will be removed. The igc-tab now encompasses both the tab header and the tab content in a single component. Slotted content in the default slot of the igc-tab element now replaces the igc-tab-panel role while elements slotted inside the label slot will end up as content for the igc-tab header.

      Before 6.0.0:

        <igc-tabs>
    <igc-tab panel="home">
      <igc-icon name="home"></igc-icon>
    </igc-tab>
    <igc-tab panel="search">
      <igc-icon name="search"></igc-icon>
    </igc-tab>
    <igc-tab panel="favorite">
      <igc-icon name="favorite"></igc-icon>
    </igc-tab>
    <igc-tab-panel id="home">Home tab panel</igc-tab-panel>
    <igc-tab-panel id="search">Search tab panel</igc-tab-panel>
    <igc-tab-panel id="favorite">Favorite tab panel</igc-tab-panel>
  </igc-tabs>

      6.0.0 and onwards:

        <igc-tabs>
    <igc-tab>
      <igc-icon name="home" slot="label"></igc-icon>
      Home tab panel
    </igc-tab>
    <igc-tab>
      <igc-icon name="search" slot="label"></igc-icon>
      Search tab panel
    </igc-tab>
    <igc-tab>
      <igc-icon name="favorite" slot="label"></igc-icon>
      Favorite tab panel
    </igc-tab>
  </igc-tabs>

  • Library

    • Some event argument types have been renamed for consistency:
      • CheckboxChangeEventArgs deprecated, use IgcCheckboxChangeEventArgs instead.
      • RadioChangeEventArgs deprecated, use IgcRadioChangeEventArgs instead.
      • IgcRangeSliderValue deprecated, use IgcRangeSliderValueEventArgs instead.
      • IgcActiveStepChangingArgs deprecated, use IgcActiveStepChangingEventArgs instead.
      • IgcActiveStepChangedArgs deprecated, use IgcActiveStepChangedEventArgs instead.
    • Node versions < 20 are now deprecated. The next major release (6.0.0) will require Node version > 20. Nodejs support

Removed

Fixed

  • Chip

  • Calendar

    • Date text color in range selection #1630
    • Header size #1629
    • Fluent theme range radius #1650
    • ARIA violation when a week with all days hidden is rendered #1637

  • Input

    • Fluent theme discrepancies #1651

  • Rating

    • Overwritten properties #1654

  • Stepper

    • Header text alignment #1624

  • Forms

    • Setting validation properties on a pristine non-dirty form associated element does not apply invalid styles #1632

  • Library

    • Exposed IgcCalendarResourceStrings, PopoverPlacement (Dropdown and Select) and IgcTreeSelectionEventArgs from the public API

5.3.0 - 2025-03-13

Added

  • Tile manager component #1402

  • List

    • The igc-list-item component exposes a new selected property. When set on a list item, the item will become visually highlighted #1590

Changed

Fixed

  • Calendar

    • Days row height for Fluent and Bootstrap themes #1597
    • Disabled date text color in range preview for Material and Indigo themes #1595

  • Chip

    • Improved responsive layout styles #1588

  • Combo

    • Improved toggle button visual states #1580

5.2.4 - 2025-02-24

Changed

5.2.3 - 2025-02-13

Fixed

5.2.2 - 2025-02-12

Fixed

5.2.1 - 2025-01-23

Added

  • Dialog

    • A new message slot that renders text content inside the dialog component has been added. The enhancement was introduced to align the design behavior between Ignite UI for WC and Ignite UI for Angular, ensuring a consistent user experience across products. The newly added `message' slot comes with additional styling with a max-width of 40 characters. The default slot is also still available for rendering content inside the dialog without limiting the component's width.

Fixed

  • List

    • CSS variables are correctly consumed from internal schemas #1538

  • Rating

    • Inaccurate value calculation on selection when step is set to 1 #1548

5.2.0 - 2025-01-09

Added

  • Form-associated elements now have a defaultValue property (defaultChecked for radio buttons, checkboxes, and switches). When a form is reset, components will use this property’s value as their new value or checked state.

Changed

  • Calendar

    • enabled passing string values to the value, values, and activeDate properties #1467

  • Checkbox

    • updated style implementation and improved slotted checkbox styles #1489

  • Date-time input

    • enabled passing string values to the value, min, and max properties #1467

  • Date picker

    • enabled passing string values to the value, min, max and activeDate properties #1467

  • List

    • updated list item internal slots gaps and sizing #1480

  • Progressbar

    • the default value label animation now uses CSS counters and animations #1492

  • Validation

    • Updated validation constraints to align with the behavior of native HTML elements. For instance, the minlength attribute will now only trigger a tooShort validity state if the component contains a value.

Fixed

  • Avatar

    • slotted icon size #1504

  • Badge

    • aligned colors with UI kits #1466

  • Card

    • actions content alignment in vertical orientation #1472

  • Combo

    • rendering issue after Edge browser autofill behavior #1497

  • Checkbox

    • removed extra gap between the checkbox and the label #1479
    • tick color in disabled state #1528

  • Dialog

    • removed vertical padding in Bootstrap theme #1471
    • Fluent theme typography #1475
    • remove vertical padding in Bootstrap theme #1471

  • Input

    • input type search does not interfere with the outline variant in Material theme #1520
    • step validation for numeric input #1522
    • helper-text color in invalid state #1525

  • List

    • discrepancies between the list and the UI kits #1488

  • Radio

    • remove label part when there is not slotted content #1482

  • Textarea

    • label position in Material theme #1518
    • helper-text color in disabled state #1519
    • remove layout space for hidden content in prefix/suffix slots #1526

  • Icon service

    • reduce sync events between copies of the service in different tabs #1532

5.1.2 - 2024-11-04

Added

  • Carousel component select method overload accepting index #1457

Fixed

  • Tabs - nested tabs selection #713

5.1.1 - 2024-10-28

Fixed

  • Library - internal import path for styles and public exports for themes

5.1.0 - 2024-10-25

Added

  • Carousel component #1226
  • Form associated custom elements validation messages #1254

Changed

  • Library - migrated palettes to relative colors #1432
  • Badge - update themes #1399
  • Card - update themes #1414
  • Chips - update themes #1408 #1416
  • Dropdown - update themes #1409
  • Expansion panel - update themes #1415
  • Icon - update theme references #1404 #1423
  • Tabs - update themes #1408

Fixed

  • Checkbox, Switch - click event fires more than once #1427
  • Radio - click event fires more than once #1428
  • Library - export components event maps through the main package entrypoint #1422
  • Calendar - cannot select dates before UNIX epoch #1443

5.0.2 - 2024-09-25

Added

  • Calendar, Date picker - added header-date slot; renders content instead of the current date/range in the calendar header #1329

Changed

  • Input - label typography #1363
  • Calendar, Select, Combo - updated to latest Indigo theme #1337

Fixed

  • Navigation drawer - use min-width in the mini variant #1394

5.0.1 - 2024-08-30

Added

  • Checkbox, Radio, Switch - Exported the CheckboxChangeEventArgs and RadioChangeEventArgs types for public use, providing more flexibility and control over event handling.

Fixed

  • Select - Resolved an issue where pressing the Tab key while a Select component's dropdown was open would incorrectly return focus to the document. Now, focus is correctly returned to the Select component after closing the dropdown.
  • Radio - Prevented form submission if a Radio component/group is invalid on initial render within a form context. This ensures that forms with invalid Radio components are not submitted prematurely.

5.0.0 - 2024-08-27

Added

  • Icon Registry #1304
    • You can now register and replace icons by reference via the setIconRef function. To learn more check out the documentation.
    • All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates.

Changed

  • BREAKING: Removed igcFocus and igcBlur events from buttons and inputs - Button, Icon Button, Checkbox, Switch, Combo, Date Time Input, Input, Mask Input, Radios, Select, Textarea.

    Use the native focus & blur events instead.

    Before:

    const input = document.createElement('igc-input');
input.addEventListener('igcFocus', focusHandler);

    Now:

    input.addEventListener('focus', focusHandler);

  • BREAKING: Checkbox, Switch igcChange event.

    Before:

    CustomEvent<boolean>

    Now:

    CustomEvent<{ checked: boolean; value: string | undefined }>

  • BREAKING: Radio igcChange event.

    Before:

    CustomEvent<boolean>

    Now:

    CustomEvent<{ checked: boolean; value: string | undefined }>

Removed

  • BREAKING: igc-form - use the native form element instead.
  • BREAKING: Range slider - ariaThumbLower/ariaThumbUpper. Use thumbLabelLower/thumbLabelUpper instead.
  • BREAKING: Rating - readonly property. Use readOnly instead.
  • BREAKING: Dialog - closeOnEscape property. Use keepOpenOnEscape.
  • BREAKING: Combo, Select - positionStrategy, flip, sameWidth removed.
  • BREAKING: Dropdown - positionStrategy removed.
  • BREAKING: Input - readonly, inputmode, maxlength and minlength. Use the native readOnly, inputMode, maxLength and minLength properties instead.
  • BREAKING: Date-time-input - minValue/mavValue are removed. Use min/max instead.
  • BREAKING: Removed size property from components.

Fixed

  • Date-time input - update masked value according to the input format on focus when value is set #1320
  • Radio - do not emit change event on already checked radio
  • Calendar - add correct dates DOM parts based on active view [#1278]
  • Date-picker, Dropdown & Select - showing the component programmatically in response to an outside click event closes the dropdown popover #1339
  • Radio - Initially checked radio by attribute throws error when not being last sibling #1356

4.11.1 - 2024-07-03

Changed

  • Stepper Design in vertical mode #1246

4.11.0 - 2024-07-03

Changed

  • Toast Component Indigo Theme #1249
  • Rating Component Indigo Theme #1249
  • Stepper Component Indigo Theme #1249

4.10.0 - 2024-07-01

Added

  • Banner component #1174
  • Divider component #1237
  • Date picker component #174
  • Radio group - Bind underlying radio components name and checked state through the radio group #315
  • VSCode custom data intellisense (both HTML and CSS)
  • JetBrains editors WebTypes intellisense

Deprecated

  • Input inputmode property. Aligned with the native inputMode DOM property instead.

Fixed

  • Input, Textarea - passing undefined to value sets the underlying input value to undefined #1206
  • Mask input - after a form reset call correctly update underlying input value and placeholder state
  • Tree - setting --ig-size on the item indicator CSS Part will now change the size of the icon
  • Date-time input - double emit of igcChange in certain scenarios
  • Navigation drawer - mini variant is not initially rendered when not in an open state #1266
  • Combo:
    • Selecting an entry using the Enter key now correctly works in single selection mode #1229
    • Turning on the disableFiltering option now clears any previously entered search term #1238
    • Entering a search term in single selection mode that already matches the selected item now works correctly #1260

4.9.0 - 2024-04-30

Added

  • Button group component now allows resetting the selection state via the selectedItems property #1168
  • Input, Textarea - exposed validateOnly to enable validation rules being enforced without restricting user input #1178

Changed

  • Combo, Select and Dropdown components now use the native Popover API #1082

Deprecated

  • Dropdown positionStrategy property. The dropdown now uses the Popover API to render its container in the top layer of the browser viewport, making the property obsolete.

Fixed

  • Date-time input - Label in Material theme is broken when component is in read-only mode #1166

4.8.2 - 2024-04-15

Fixed

  • Textarea - resize handle position for non-suffixed textarea #1094
  • Tabs - error when dynamically creating and adding a tab group and tabs in a single call stack #1140
  • Checkbox/Switch - participate in form submission when initially checked #1144
  • Dialog - igcClosed fired before the component was actually closed/hidden.

4.8.1 - 2024-04-08

Fixed

  • Date-time input - inputFormat is not applied to an already set value #1114
  • Checkbox, Radio, Switch - apply form validation synchronously #1122
  • Select, Dropdown - Unable to select item when clicking on a wrapping element inside the dropdown/select item slot #1123
  • Tree - active state is correctly applied to the correct tree node on click #1131

4.8.0 - 2024-03-20

Added

  • Combo component can now set groupSorting to none which shows the groups in the order of the provided data. #1026
  • Button/Icon button - updated visual looks across themes, new states. #1050
  • Navigation bar - added border in Bootstrap theme. #1060

Changed

  • Grouping in Combo component no longer sorts the data. groupSorting property now affects the sorting direction only of the groups. Behavioral change In previous release the sorting directions of the groups sorted the items as well. If you want to achieve this behavior you can pass already sorted data to the Combo component.

Deprecated

  • Slider
    • aria-label-upper and aria-label-lower are deprecated and will be removed in the next major release. Use thumb-label-upper and thumb-label-lower instead.

Fixed

  • Button
    • slotted icon size. #1054
  • Button group
    • updated Fluent theme look. #1044
    • disabled state in Safari. #1047
  • Combo/Select
  • Slider
    • clicks on the slider track now use the track element width as a basis for the calculation. #1049
    • input events are not longer emitted while continuously dragging the slider thumb and exceeding upper/lower bounds. #1049
    • when setting upper-bound/lower-bound before min/max, the slider will no longer overwrite the bound properties with the previous values of min/max. #1049
    • the aria-label bound to the slider thumb is no longer reset on consequent renders. #1049
  • Input
    • default validators are run synchronously. #1066
    • style issues. #1038 #1104
  • Date-time input
    • setRangeText() updates underlying value. #1075

4.7.0 - 2024-01-05

Added

  • Tree - Added toggleNodeOnClick property that determines whether clicking over a node will change its expanded state or not. Defaults to false. #1003.

  • Rating - allowReset added. When enabled selecting the same value will reset the component #1014. Behavioral change

    In previous releases this was the default behavior of the rating component. Make sure to set allowReset if you need to keep this behavior in your application.

Changed

  • Improved WAI-ARIA compliance for Avatar, Badge and Combo components #1007

Fixed

  • Active item visual styles for Dropdown, Select and Combo components #1002
  • Navigation drawer - mini variant broken visual style #1011

4.6.0 - 2023-12-05

Added

  • action slot added to Snackbar #974
  • indicator-expanded slot added to Expansion panel #982
  • toggle-icon-expanded slot added to Select #983
  • Select, Dropdown - exposed selectedItem, items and groups getters

Changed

  • Updated the package to Lit v3
  • Components dark variants are now bound to their shadow root #940
  • Components implement default sizes based on current theme #977
  • Button group - changed events to non-cancellable #984
  • Optimized components CSS and reduced bundle size #972
  • WAI-ARIA improvements for Icon, Select, Dropdown and List components #980 #983

Fixed

  • Textarea missing styling parts #944
  • Tree item disabled styles #949
  • Snackbar removed unnecessary styles #960
  • Tree item hover state visual design #987
  • Calendar not keeping focus state when switching views #992

4.5.0 - 2023-10-09

Added

  • Text area component #764
  • Button group component #827
  • Toggle button component #877
  • Navigation drawer now supports CSS transitions #922
  • Position attribute for toast and snackbar #934

Deprecated

  • The size property and attribute have been deprecated for all components. Use the --ig-size CSS custom property instead. The following example sets the size of the avatar component to small: 
      igc-avatar {
    --ig-size: var(--ig-size-small);
  }

Fixed

  • Combo items position in Safari #903
  • Calendar navigation buttons in RTL context #915
  • Export IgcComboChangeEventArgs type #917
  • Combo value and selection states with lazy data binding #937
  • Various style and theming fixes and adjustments

4.4.0 - 2023-08-30

Added

  • The following components are now Form Associated Custom Elements. They are automatically associated with a parent <form> and behave like a browser-provided control:
    • Button & Icon button
    • Checkbox
    • Combo
    • DateTime input
    • Input
    • Masked input
    • Radio
    • Rating
    • Single slider
    • Select
    • Switch
  • Stepper now supports animations #861

Changed

  • Rating fluent theme colors #481
  • Stepper indicator styles and color schemas #766 #868

Deprecated

  • IgcForm component is deprecated
  • Input component:
    • minlength property is deprecated and will be removed in the next major version. Use minLength instead.
    • maxlength property is deprecated and will be removed in the next major version. Use maxLength instead.
    • readonly property is deprecated and will be removed in the next major version. Use readOnly instead.
  • Mask input component:
    • readonly property is deprecated and will be removed in the next major version. Use readOnly instead.
  • DateTime input component:
    • readonly property is deprecated and will be removed in the next major version. Use readOnly instead.
    • minValue property is deprecated and will be removed in the next major version. Use min instead.
    • maxValue property is deprecated and will be removed in the next major version. Use max instead.
  • Rating component:
    • readonly property is deprecated and will be removed in the next major version. Use readOnly instead.

Removed

  • Removed our own dir attribute which shadowed the default one. This is a non-breaking change.
  • Slider - ariaLabel shadowed property. This is a non-breaking change.
  • Checkbox - ariaLabelledBy shadowed attribute. This is a non-breaking change.
  • Switch - ariaLabelledBy shadowed attribute. This is a non-breaking change.
  • Radio - ariaLabelledBy shadowed attribute. This is a non-breaking change.

Fixed

  • Input - outlined variant styling issues #875 and indigo theme issues #879
  • Select - outlined variant styling issues #880
  • DateTime Input - spinUp/spinDown calls moving the caret when the input is focused #859

4.3.1 - 2023-08-02

Added

  • Tree - component animations #846
  • Components border radius is consumed from their schemas #805

Changed

  • Combo, Input, Select - schema colors #767
  • Dropdown - schema colors #828
  • Icon - updated theming styles and size #813

Fixed

  • Combo - single selection not working in certain scenarios #816
  • Dropdown - various styling fixes #841 #848
  • Icon button - border radius with ripple #839
  • Icon button - fixed wrong color in Fluent theme #845
  • Input - various styling fixes #818 #832 #844
  • Tree Item - assign closest igc-tree-item ancestor as a parent #829
  • Tabs - internal hidden styles and custom display property #851

4.3.0 - 2023-06-28

Added

  • Combo: Added matchDiacritics to the filtering options property. Defaults to false. If set to true the filter distinguishes between accented letters and their base letters. Otherwise strings are normalized and then matched.
  • Combo: Added selection property which returns the current selection as an array of data objects.
  • Card: Support explicit height
  • Dialog: Added animations
  • Snackbar: Added animations
  • Toast: Added animations

Changed

  • Combo: value is no longer readonly and can be explicitly set. The value attribute also supports declarative binding, accepting a valid JSON stringified array.
  • Combo: value type changed from string[] to ComboValue<T>[] where 
    ComboValue<T> = T | T[keyof T]
  • Combo: igcChange event object properties are also changed to reflect tee new value type: 
    interface IgcComboChangeEventArgs<T> {
newValue: ComboValue<T>[];
items: T[];
type: ComboChangeType;
}

Deprecated

  • Select: Deprecated sameWidth, positionStrategy and flip. They will be removed in the next major release.

Fixed

  • Select: prefix/suffix/helper-text slots not being rendered #722
  • Tabs: Nested tabs selection #713
  • Dialog: Backdrop doesn't overlay elements #727
  • Dropdown: Listbox position on initial open state #723
  • Stepper: Stretch vertically in parent container #738
  • Navbar: Wrong colors in fluent theme #719
  • Animation player throws errors when height is unspecified #793
  • DateTimeInput: Intl.DateTimeFormat issues in Chromium based browsers #803

4.2.3 - 2023-04-03

Deprecated

  • Dialog - Property closeOnEscape is deprecated in favor of new property keepOpenOnEscape.

Fixed

  • Radio Button- colors in selected focus state #685
  • Icon Button - set icon size to match other design system products #598, #695
  • Chip - removed outline styles for Fluent and Material themes #702
  • Calendar - navigation to date on set value #436
  • Tabs - not taking the full height of their parents #710

4.2.2 - 2023-03-07

Deprecated

  • Button - The prefix/suffix slots are no longer needed and will be removed in the next major release.

Fixed

  • Button - UI inconsistencies #675, #679
  • Calendar - Fluent theme inconsistencies #653, #672
  • Combo - Selection via API doesn't work on a searched list #649
  • Dialog - Fluent theme inconsistency #603
  • Input - UI inconsistencies #657, #658
  • Toast - Fluent theme inconsistency #668
  • Components missing in defineAllComponents #691
  • Wrong host sizes for Avatar, Badge, Button and Icon Button #669

4.2.1 - 2023-02-01

Fixed

  • Combo - Matching item not activated on filtering in single selection mode

4.2.0 - 2023-01-31

Added

  • Combo - Single Selection mode via the single-select attribute #626

Fixed

  • Input - UI inconsistencies #619, #620, #633, #638
  • Badge - Doesn't correctly render igc-icon and font icons #631
  • Radio - UI inconsistencies #621, #623
  • Navigation Drawer - Can't override item margin #614

4.1.1 - 2023-01-12

Fixed

  • Input - position label based on component size #589
  • Input - material themes don't match design by #580
  • Input - do not cache the underlying input #604
  • Card - color discrepancy between WC and Angular #586
  • Theme - update stale --igc-* variables to --ig-* #603
  • Removed dangling references after element disconnect #608

4.1.0 - 2022-12-09

Added

  • Stepper Component #219
  • Combo Component #411
  • Mask Input - Skip literal positions when deleting symbols in the component

Fixed

  • Mask input - Validation state on user input #558

4.0.0 - 2022-11-02

Changed

  • Themes
    • Build - Utilize Ignite UI Theming package when building themes #415
    • Sizing - Introduced CSS variables that allow runtime CSS configuration of the size for all or individual components #115
    • Spacing - Introduced CSS variables that allow runtime CSS configuration of the internal spacing (padding/margin) of components #506
    • Scrollbars - Added the ability to style application-level scrollbars by setting the ig-scrollbar CSS class on any element #141

3.4.2 - 2022-11-01

Fixed

  • Resolved importing error for DateRangeType #535

3.4.1 - 2022-09-19

Changed

  • Slider - updated theme with the latest fluent spec #453
  • Calendar - updated weekend days color #483

Fixed

  • Tabs selected attribute breaks content visibility on init #507

3.4.0 - 2022-09-07

Added

  • Dialog component #175
  • Select component #180

Fixed

  • Calendar - range selection a11y improvements #476
  • Range slider - a11y improvements for choosing range values #477
  • Rating - improved a11y with assistive software now reading the total number of items #478
  • Toast - added role="alert" to the message container for assistive software to read it without the need of focusing #479
  • Chip - made remove button accessible with the keyboard #480
  • Button prefix/suffix does not align icons to the button text #491

3.3.1 - 2022-08-10

Changed

  • Tree - Removed theme-specified height #460

Fixed

  • Dropdown - Dispose of top-level event listeners #462
  • Linear Progress - Indeterminate animation in Safari #378
  • Radio Group - Child radio components auto-registration #464

3.3.0 - 2022-07-26

Added

  • DateTime input component #314
  • Tabs component #341
  • Typography styles in themes #392
  • Accordion component #418

Changed

  • Rating - Added support for single selection and empty symbols #428

  • Slider - Improved slider steps rendering #448

  • Components will now auto register their dependencies when they are registered in defineComponents

    import { IgcDropdownComponent, defineComponents } from 'igniteui-webcomponents';
// will automatically register the dropdown item & group elements
// as well as their dependencies if any
defineComponents(IgcDropdownComponent);

    Check the official documentation for more information.

Fixed

  • Remove input helper text container when it is empty #395
  • Icon not showing in Safari #393
  • Checkbox not showing in Safari #398
  • Button stretches correctly in flex containers #407
  • Various theming issues #402 #409 #424
  • Dropdown - bug fixes and improvements #434

3.2.0 - 2022-05-30

Added

  • Mask input #173
  • Expansion Panel #177
  • Tree #188
  • Rating - Added selected CSS part and exposed CSS variable to control symbol sizes #340 #371
  • Icon Button - Allow slotted content #355

Fixed

  • Navigation drawer - Various styles fixes #356 #349 #363 #364
  • Buttons - Vertical align #357 and focus management #380
  • Input - Overflow for suffix/prefix #359
  • Switch - Collapse with small sizes #362
  • List - Overflow behaviour #391

3.1.0 - 2022-04-15

Added

  • Chip: Added prefix and suffix slots #334
  • Snackbar: Added toggle method #326

Deprecated

  • Chip: Previously exposed start and end slots are replaced by prefix and suffix. They remain active, but are now deprecated and will be removed in a future version.

Fixed

  • Chip: Auto load internal icons #327
  • Chip: Selected chip is misaligned #328
  • Package: ESM internal import paths

3.0.0 - 2022-04-12

Changed

  • Breaking Change: All dropdown related classes renamed from IgcDropDown* to IgcDropdown*

2.2.0 - 2022-04-01

Added

  • Drop Down component
  • Calendar: Active date can be set via an attribute

2.1.1 - 2022-03-15

Added

  • Control border radius and elevation from --igc-radius-factor and --igc-elevation-factor:

    Example:

    /* Make all components square and remove all shadows */
:root {
  --igc-radius-factor: 0;
  --igc-elevation-factor: 0;
}

2.1.0 - 2022-03-15

Added

  • Linear Progress component
  • Circular Progress component
  • Chip component
  • Snackbar component
  • Toast component
  • Rating component
  • Component themes can be changed at runtime by calling the configureTheme(theme: Theme) function

2.0.0 - 2022-02-03

Added

  • Dark Themes
  • Slider component
  • Range Slider component
  • Support required property in Radio component.

Changed

  • Fix checkbox/switch validity status
  • Split Calendar component's value: Date | Date[] property into two properties - value: Date and values: Date[]
  • Replaced Calendar component's hasHeader property & has-header attribute with hideHeader & hide-header respectively.
  • Replaced Card component's outlined property with elevated.

Removed

  • Removed igcOpening, igcOpened, igcClosing and igcClosed events from Navigation drawer component.

1.0.0 - 2021-11-22

Initial release of Ignite UI Web Components

Added

  • Avatar component
  • Badge component
  • Button component
  • Calendar component
  • Card component
  • Checkbox component
  • Form component
  • Icon component
  • Icon button component
  • Input component
  • List component
  • Navigation bar component
  • Navigation drawer component
  • Radio group component
  • Radio component
  • Ripple component
  • Switch component