diff --git a/CHANGELOG.md b/CHANGELOG.md index ab1752cad..ffa347f45 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,490 +6,426 @@ and this project adheres to [Semantic Versioning](http://semver.org/). ## [Unreleased] ### Added -- #### Accordion, Expansion panel - - Find-in-page now searches the content of a collapsed expansion panel. A match, a text fragment or a link to an element in the content opens the panel at once and the browser scrolls to the match. The panel sends `igcOpening`, which can be canceled, and `igcOpened`, as for a user toggle. A disabled panel stays closed and its content is not searchable. In an accordion with `single-expand`, the other panels close at once, without the animation, so the match stays in view. The content uses `hidden="until-found"` (Chrome 102, Firefox 139, Safari 26.2); other browsers hide it as before. +- #### Accordion, Expansion panel, Tabs, Tree + - Find-in-page, text fragments and links to an element now find content in collapsed panels, in tabs that are not selected and in collapsed tree items. The component shows the match and emits its usual events. [#2594](https://github.com/IgniteUI/igniteui-webcomponents/pull/2594) + - Expansion panel: opens and emits `igcOpening`, which you can cancel, and `igcOpened`. In an accordion with `single-expand`, the other panels close with no animation. + - Tabs: selects the tab and emits `igcChange`. The focus does not move, and a link tab does not follow its link. + - Tree: expands the collapsed items above the match. Each item emits `igcItemExpanding`, which you can cancel, and `igcItemExpanded`. In WebKit, the tree does not scroll to a match in an item that skips its rendering. + - A disabled panel, tab or item stays closed, and its content is not searchable. + - The browser must support `hidden="until-found"` (Chrome 102, Firefox 139, Safari 26.2). Other browsers hide the content as before. - #### API documentation - - The manifest and the API documentation now list the custom states: `ig-invalid` of the form controls, `disabled` and `label-before` of the radio group, and `start-collapsed` and `end-collapsed` of the splitter. Style them with `:state()`, for example `igc-input:state(ig-invalid)`. - - They also list the parts that were not documented: `prefixed`, `suffixed`, `filled`, `labelled`, `start`, `notch`, `filler` and `end` of the input, mask input, file input, date time input and textarea, `placeholder` of the textarea, `file-parts` of the file input, `dialog-base`, `title` and `footer` of the date pickers in dialog mode, `tabs`, `inner` and `scrollable` of the tabs, `indicator` and `inactive` of the carousel, and `counter` and `fraction` of the progress indicators. - - The description of the splitter now includes its keyboard table. -- #### Button, Icon button - - A host `aria-pressed` now goes to the native button, so a button can be a toggle button. A link does not get it, also when it is disabled, because the link role does not allow it. [#2474](https://github.com/IgniteUI/igniteui-webcomponents/pull/2474) - - A host `aria-expanded`, `aria-haspopup` and `aria-controls` now go to the native button and to the link, so a button that opens a menu, a panel or a drawer can tell its state to assistive technology. This also applies to the `aria-haspopup` and `aria-expanded` that the dropdown writes on a button target, and to the `aria-controls` of the carousel navigation buttons. [#2513](https://github.com/IgniteUI/igniteui-webcomponents/issues/2513) + - The manifest and the API documentation now list the custom states and 20 parts that were not documented. The states are `ig-invalid` of the form controls, `disabled` and `label-before` of the radio group, and `start-collapsed` and `end-collapsed` of the splitter. Style a state with `:state()`, for example `igc-input:state(ig-invalid)`. [#2489](https://github.com/IgniteUI/igniteui-webcomponents/pull/2489) - #### Calendar, Date picker, Date range picker - - `DateRangeDescriptor` has an optional `label`. The calendar adds the labels of the matching `specialDates` and `disabledDates` descriptors to the accessible name of a date, for example "Thursday, October 8, 2026, Free delivery". Before, the special state was only visual. [#2423](https://github.com/IgniteUI/igniteui-webcomponents/pull/2423) + - `DateRangeDescriptor` has an optional `label`. The calendar adds the labels of the matching `specialDates` and `disabledDates` to the accessible name of a date, for example "Thursday, October 8, 2026, Free delivery". [#2423](https://github.com/IgniteUI/igniteui-webcomponents/pull/2423) - #### Chat - - `focusInput()` moves the focus to the text area, for example after the application sets `draftMessage`. It returns a promise. In a new chat, it waits for the first render, and in a server-rendered chat, for the render after the hydration. It does nothing when a custom `input` renderer replaces the text area. [#2474](https://github.com/IgniteUI/igniteui-webcomponents/pull/2474) - - `igcNavigate` is emitted when a plain click or Enter opens a link in a message in the same tab, before the browser navigates. Cancel it to route on the client. The detail has the message and the absolute URL. The event does not bubble and is not composed, so listen to it on the chat. -- #### Chip - - A host `aria-expanded`, `aria-haspopup` and `aria-controls` now go to the action button, so a chip that opens a menu or a filter panel can tell its state to assistive technology. A selectable chip keeps its `aria-pressed`. + - `focusInput()` moves the focus to the text area, for example after you set `draftMessage`. It waits for the first render. It does nothing when a custom `input` renderer replaces the text area. [#2474](https://github.com/IgniteUI/igniteui-webcomponents/pull/2474) [#2539](https://github.com/IgniteUI/igniteui-webcomponents/pull/2539) + - `igcNavigate` is emitted before a plain click or Enter opens a message link in the same tab. Cancel it to route on the client. The detail has the message and the absolute URL. The event does not bubble, so listen to it on the chat. [#2573](https://github.com/IgniteUI/igniteui-webcomponents/pull/2573) - #### Combo - - Remote data: with `filteringOptions.mode` set to `remote`, the combo does not filter the options and keeps the search input. `igcSearchInput` reports the search text in `detail.searchText`, in both modes, so the application can search on the server and set `data` to the results. It also reports an empty text when a selection, a blur or the clear button clears the text, and the same text when the case-sensitive icon changes the case. The icon also shows in remote mode, so the application reads `filteringOptions.caseSensitive` for the server search. In remote mode, `igcDataRequest` asks for more items when the user scrolls near the end of `data`: append `count` items at `startIndex`, which is `data.length`. The new `ComboFilteringMode` and `IgcComboSearchInputEventArgs` types describe the mode and the detail. [#2519](https://github.com/IgniteUI/igniteui-webcomponents/issues/2519) - - `totalItemCount` gives the number of all the items of a remote source. In remote mode, the list shows a placeholder option for each item that `data` does not hold yet, so the scrollbar shows the full list, and `igcDataRequest` asks for the placeholders that the list renders, up to the total. Each placeholder is the skeleton of an item, with a wave that sweeps across it. `loading` shows a spinner, an indeterminate circular progress, in place of the toggle icon, and an empty list shows "Loading" instead of the empty message. The `loading` slot replaces the spinner. The spinner and the skeletons have the text color of the `loading` and `placeholder` parts, so `::part(loading)` and `::part(placeholder)` can set their colors. [#2519](https://github.com/IgniteUI/igniteui-webcomponents/issues/2519) - - `bindComboDataSource()` in `igniteui-webcomponents/extras/combo-data-source` binds a combo to a server that searches and pages: you give it a `load` function that returns one page, and an optional `resolve` for the items of preset values. `load` gets the search text and `caseSensitive`. A new search text or a click on the case-sensitive icon loads the first page again. It sets `totalItemCount` from the total of the pages, and `loading` while a search waits or a page loads. A request loads at least `pageSize` items, and after a jump, such as End, all the items up to it. See "Extras" in the README. [#2519](https://github.com/IgniteUI/igniteui-webcomponents/issues/2519) - - `selectAllItems()` and `deselectAllItems()` select and deselect the items that the list shows after the filter. With `ignoreFilter`, they act on all the items of `data`. [#2535](https://github.com/IgniteUI/igniteui-webcomponents/issues/2535) - - `showSelectAll` puts a "Select all" option first in the list in multiple selection mode. It selects the items that the list shows after the filter, or deselects them when all of them are selected, with one `igcChange`. While only some of them are selected, its checkbox is indeterminate. Like the other options in multiple selection, it reports `aria-checked`, which is `true` while all the shown items are selected and `mixed` while only some of them are. It is the first option in `aria-posinset` and `aria-setsize`. The `select-all` part styles the option, and the `indeterminate` part its checkbox. The text comes from the `combo_select_all` resource string. [#2535](https://github.com/IgniteUI/igniteui-webcomponents/issues/2535) - - `groupSelection` makes each group header an option that works like the select-all option for the items of its group that the list shows, in multiple selection mode with `groupKey`. The header keeps the text style of a group header and the `group-header` part, and gets the `selected` and `active` parts and the checkbox parts with `indeterminate`. Like the select-all option, it reports `aria-checked`, which is `mixed` while only some of the shown items of its group are selected. It counts in `aria-posinset` and `aria-setsize`, and the arrow keys and Home stop on it. The items are one level in under their header, as in the tree, and `--ig-combo-item-indent` changes the indent. [#2535](https://github.com/IgniteUI/igniteui-webcomponents/issues/2535) - - `selectionCommit` set to `confirm` holds the changes of the user while the list is open, in multiple selection mode. A toggle changes a pending selection and emits the cancelable `igcPendingChange`. Enter applies the pending selection with one `igcChange`, whose new `commit` type lists the items that it selects or deselects. Any other close drops it. While the list is open, `select()`, `deselect()`, `selectAllItems()` and `deselectAllItems()` change the pending selection. The footer shows Cancel and Apply, with the texts of the `combo_cancel` and `combo_apply` resource strings. Apply applies the pending selection as Enter does, and Cancel drops it. The `actions`, `cancel-button` and `apply-button` parts style them. Content in the `footer` slot replaces them: `pendingValue` gives the pending values, `commitSelection()` applies them, and `cancelSelection()` puts `value` back. These methods emit no events. The new `ComboSelectionCommit` type describes the property. [#2533](https://github.com/IgniteUI/igniteui-webcomponents/issues/2533) - - `igcClosing` and `igcClosed` have a `detail` with the `trigger` that closes the list: `enter`, `escape`, `tab`, `arrow-up`, `outside-click`, `scroll`, `toggle` (a click on the input), `selection` (an item click in single selection), or `apply` and `cancel` (the buttons of the confirm mode). The new `IgcComboClosingEventArgs` and `ComboCloseTrigger` types describe the detail. [#2533](https://github.com/IgniteUI/igniteui-webcomponents/issues/2533) - - The group header template gets `key`: the `groupKey` value that the items of the group share. The new `ComboGroupHeaderTemplate` and `ComboGroupHeaderContext` types describe the template and its context. Current templates continue to work. [#2462](https://github.com/IgniteUI/igniteui-webcomponents/issues/2462) [#2468](https://github.com/IgniteUI/igniteui-webcomponents/pull/2468) -- #### Date time input, File input, Input, Mask input, Textarea - - A host `role="combobox"`, `aria-expanded`, `aria-haspopup`, `aria-autocomplete`, `aria-controls` and `aria-activedescendant` now also go to the native input or textarea, so a page can make the field a combobox over its own listbox, for example in a command palette or a search with suggestions. The focus stays in the field, and the screen reader reads the active option. Another host role stays on the host, and so does `aria-expanded` without the combobox role, because a text box does not support it. - - For @mention suggestions in a textarea, use `aria-autocomplete`, `aria-controls` and `aria-activedescendant` with no `role`, because HTML allows no role on a `textarea`. + - Remote data: set `filteringOptions.mode` to `remote` to stop the local filter. Read `detail.searchText` of `igcSearchInput`, search on the server, and set `data` to the results. When the user scrolls near the end of `data`, `igcDataRequest` asks for `count` more items at `startIndex`. New types: `ComboFilteringMode`, `IgcComboSearchInputEventArgs`. [#2519](https://github.com/IgniteUI/igniteui-webcomponents/issues/2519) [#2545](https://github.com/IgniteUI/igniteui-webcomponents/pull/2545) + - `totalItemCount` gives the size of a remote source. The list shows a skeleton for each item that is not loaded, so the scrollbar shows the full length. `loading` shows a spinner in place of the toggle icon. Change them with the `loading` slot and the `loading` and `placeholder` parts. [#2519](https://github.com/IgniteUI/igniteui-webcomponents/issues/2519) [#2545](https://github.com/IgniteUI/igniteui-webcomponents/pull/2545) + - `bindComboDataSource()` from `igniteui-webcomponents/extras/combo-data-source` connects a combo to a server that searches and pages. You give it a `load` function that returns one page, and an optional `resolve` function for the items of preset values. It sets `totalItemCount` and `loading`. See "Extras" in the README. [#2519](https://github.com/IgniteUI/igniteui-webcomponents/issues/2519) [#2545](https://github.com/IgniteUI/igniteui-webcomponents/pull/2545) + - `showSelectAll` adds a "Select all" option in multiple selection. `selectAllItems()` and `deselectAllItems()` do the same from code. Both act on the items that the filter shows. Give `ignoreFilter` to the methods to act on all of `data`. Part: `select-all`. Resource string: `combo_select_all`. [#2535](https://github.com/IgniteUI/igniteui-webcomponents/issues/2535) [#2545](https://github.com/IgniteUI/igniteui-webcomponents/pull/2545) + - `groupSelection` makes each group header an option that selects or deselects the shown items of its group, in multiple selection with `groupKey`. The items are indented under their header. Set `--ig-combo-item-indent` to change the indent. [#2535](https://github.com/IgniteUI/igniteui-webcomponents/issues/2535) [#2545](https://github.com/IgniteUI/igniteui-webcomponents/pull/2545) + - `selectionCommit="confirm"` holds the changes of the user while the list is open, in multiple selection. Each toggle emits `igcPendingChange`, which you can cancel. Enter or the Apply button applies the changes with one `igcChange`. Any other close drops them. For a custom `footer`, use `pendingValue`, `commitSelection()` and `cancelSelection()`. New type: `ComboSelectionCommit`. [#2533](https://github.com/IgniteUI/igniteui-webcomponents/issues/2533) [#2545](https://github.com/IgniteUI/igniteui-webcomponents/pull/2545) + - The `detail` of `igcClosing` and `igcClosed` gives the `trigger` of the close, for example `enter`, `escape`, `outside-click` or `apply`. New types: `IgcComboClosingEventArgs`, `ComboCloseTrigger`. [#2533](https://github.com/IgniteUI/igniteui-webcomponents/issues/2533) [#2545](https://github.com/IgniteUI/igniteui-webcomponents/pull/2545) + - The group header template gets `key`, the `groupKey` value of the group. New types: `ComboGroupHeaderTemplate`, `ComboGroupHeaderContext`. [#2462](https://github.com/IgniteUI/igniteui-webcomponents/issues/2462) [#2468](https://github.com/IgniteUI/igniteui-webcomponents/pull/2468) - #### Dropdown - - `header` and `footer` slots render content before and after the list items, outside the `listbox` role, such as a text field, a radio group or action buttons. Their content keeps its own keys. [#2531](https://github.com/IgniteUI/igniteui-webcomponents/issues/2531) + - The `header` and `footer` slots hold content before and after the items, outside the `listbox` role. Use them for a search field or action buttons. [#2531](https://github.com/IgniteUI/igniteui-webcomponents/issues/2531) [#2585](https://github.com/IgniteUI/igniteui-webcomponents/pull/2585) - #### File input - - `directory` lets the user select a folder instead of files. The selection holds all files in the folder and its subfolders, and `webkitRelativePath` gives the path of each file from the folder. The control shows the folder name. In Chromium, a multipart form submission sends the relative path as the file name. [#2481](https://github.com/IgniteUI/igniteui-webcomponents/pull/2481) + - `directory` lets the user select a folder. The selection holds all the files in the folder and its subfolders. `webkitRelativePath` gives the path of each file. [#2481](https://github.com/IgniteUI/igniteui-webcomponents/pull/2481) - #### Form controls - - `--ig-helper-min-lines` keeps space below a control for `1`, `2` or `3` message lines, also when no helper text or validation message shows. A message that shows then does not move the content below. Set it on a container, such as a form, to apply it to all the controls in it. It applies to the checkbox, color picker, combo, date picker, date range picker, date time input, file input, input, mask input, radio, select and textarea. In a radio group, only the last radio keeps the space, because the group shows its message there. A browser without container style queries keeps no space. + - `--ig-helper-min-lines` keeps space for `1`, `2` or `3` message lines below a control, so a validation message does not move the content below. Set it on a form to apply it to all its controls. The browser must support container style queries. [#2491](https://github.com/IgniteUI/igniteui-webcomponents/pull/2491) +- #### Host ARIA attributes + - Button, Chip, Icon button: a host `aria-expanded`, `aria-haspopup` and `aria-controls` now go to the inner button or link. So assistive technology knows that the control opens a menu or a panel. A selectable chip keeps its `aria-pressed`. [#2513](https://github.com/IgniteUI/igniteui-webcomponents/issues/2513) [#2517](https://github.com/IgniteUI/igniteui-webcomponents/pull/2517) [#2581](https://github.com/IgniteUI/igniteui-webcomponents/pull/2581) + - Button, Icon button: a host `aria-pressed` now goes to the native button, so the button can be a toggle button. A link does not get it. [#2474](https://github.com/IgniteUI/igniteui-webcomponents/pull/2474) + - Date time input, File input, Input, Mask input, Textarea: a host `role="combobox"`, `aria-expanded`, `aria-haspopup`, `aria-autocomplete`, `aria-controls` and `aria-activedescendant` now go to the native field. Use them to make the field a combobox over your own listbox, for example in a command palette. Do not set `role` on a textarea, because HTML does not allow it. [#2548](https://github.com/IgniteUI/igniteui-webcomponents/pull/2548) - #### Library - - When another class already defines the tag of a component, the component does not define the tag and writes one warning to the console. An example is a second copy or version of the library on the page. Before, it gave no warning. [#2461](https://github.com/IgniteUI/igniteui-webcomponents/pull/2461) + - A component no longer defines its tag when another class already defines it, for example a second copy of the library on the page. It writes one warning to the console. [#2461](https://github.com/IgniteUI/igniteui-webcomponents/pull/2461) - #### Localization - - The color picker, dialog, splitter, tile and tooltip have `locale` and `resourceStrings`. The strings come from `igniteui-i18n-core`, and the languages from `igniteui-i18n-resources`. Before, these default texts were always in English: [#2477](https://github.com/IgniteUI/igniteui-webcomponents/pull/2477) [#2480](https://github.com/IgniteUI/igniteui-webcomponents/pull/2480) - - Color picker: the labels of its buttons, dialog, sliders, canvas marker, alpha input, color value input and format select. The English label of the color value input is now "Color value", not "Color value input". - - Dialog: the default action. - - Splitter: the default name of the bar. - - Tile: the names of the maximize and fullscreen actions. - - Tooltip: the name of the close button of a sticky tooltip. - - The chat and the tile manager have `locale`. The chat uses it for its resource strings. The tile manager has no strings of its own. It gives the locale to its tiles that have no `locale`, also to tiles that you add later. [#2475](https://github.com/IgniteUI/igniteui-webcomponents/pull/2475) [#2478](https://github.com/IgniteUI/igniteui-webcomponents/pull/2478) + - The color picker, dialog, splitter, tile and tooltip have `locale` and `resourceStrings`. Before, their default labels were English only. The English label of the color value input is now "Color value". [#2477](https://github.com/IgniteUI/igniteui-webcomponents/pull/2477) [#2480](https://github.com/IgniteUI/igniteui-webcomponents/pull/2480) + - The chat and the tile manager have `locale`. The tile manager gives its locale to the tiles that have no `locale`. [#2475](https://github.com/IgniteUI/igniteui-webcomponents/pull/2475) [#2478](https://github.com/IgniteUI/igniteui-webcomponents/pull/2478) - #### QR code - - `copyToClipboard()` copies the code as a PNG image. With `format: 'svg'`, it copies an SVG image and also a PNG image for applications that do not read SVG. A browser that cannot copy SVG gets only the PNG image. `scale` multiplies the image size. The promise resolves with the format that the clipboard got: `'png'` or `'svg'`. The new `QrCodeCopyFormat` and `QrCodeCopyOptions` types describe the format and the options. Browsers accept a clipboard write only during a user action. So call the method directly in the event handler, for example of a click, with no `await` before it. [#2483](https://github.com/IgniteUI/igniteui-webcomponents/pull/2483) + - `copyToClipboard()` copies the code as a PNG image. With `format: 'svg'`, it copies an SVG image and a PNG image. `scale` multiplies the size. The promise resolves with the format that the clipboard got. Browsers allow the copy only during a user action. So call the method directly in the event handler, with no `await` before it. New types: `QrCodeCopyFormat`, `QrCodeCopyOptions`. [#2483](https://github.com/IgniteUI/igniteui-webcomponents/pull/2483) - #### Tabs - - `header-background` theme token. It paints the full header strip behind the tab items. Until you set it, it follows `item-background`, so a translucent `item-background` does not stack on a copy of itself. You can also make only the header transparent. The `tabs-theme` function of `igniteui-theming` 29.1.0 has the matching `$header-background` parameter. [#2431](https://github.com/IgniteUI/igniteui-webcomponents/pull/2431) - - Link tabs: with `href`, a tab renders its header as a link with the tab role. The user can open the link in a new browser tab with a middle click, Ctrl/Cmd+click or Ctrl/Cmd+Enter, and copy its address. These do not change the selection. A plain click, Enter or Space selects the tab, emits `igcChange`, emits `igcNavigate` on the tab and follows the link. Cancel `igcNavigate` to route on the client; a click in the panel does not emit it. The event does not bubble and is not composed. `target` and `rel` go to the link. A click on a tab whose `target`, or the target of the page's `` element, is not `_self` does not change the selection. In a page that is not in a frame, `_parent` and `_top` count as `_self`. A disabled tab has no URL. - - `headerPosition` (`header-position`) puts the headers in a column on the `start` or `end` side of the panels. The default, `top`, keeps the row above the panels. The sides follow the direction, so a `start` column is on the right in a right-to-left layout. In a column, Up and Down move between the tabs, the tab list has `aria-orientation="vertical"`, `alignment` applies along the column, and the indicator is on the side of the panels in every theme. The column is as wide as the widest header, up to the width limit of a header. In a narrow column, a long label wraps and the panel keeps part of the width. Each header is at least as tall as in a row. Without a set height, the tabs grow with the selected panel. Give the tabs a `height` or a `max-height`, or put them in a parent that sets a height, to make a taller panel scroll its content and to show scroll buttons above and below the headers when they do not fit. A parent that sizes the tabs from their content, such as a grid row with an auto height, lets them grow with the panel. The new `TabsHeaderPosition` type describes the values. [#2553](https://github.com/IgniteUI/igniteui-webcomponents/issues/2553) - - Find-in-page now searches the panels that are not selected. A match, a text fragment or a link to an element in a panel selects its tab and sends `igcChange`, as a click does. The reveal does not move the focus, and a link tab does not follow its link. The panel of a disabled tab is not searchable. The panels use `hidden="until-found"` (Chrome 102, Firefox 139, Safari 26.2); other browsers hide them as before. + - `headerPosition` (`header-position`) puts the headers in a column on the `start` or `end` side of the panels. The default is `top`. In a column, Up and Down move between the tabs. Give the tabs a `height` or a `max-height` to scroll a tall panel and to show the scroll buttons. New type: `TabsHeaderPosition`. [#2553](https://github.com/IgniteUI/igniteui-webcomponents/issues/2553) [#2556](https://github.com/IgniteUI/igniteui-webcomponents/pull/2556) + - Link tabs: a tab with `href` renders its header as a link. A plain click, Enter or Space selects the tab, emits `igcChange` and `igcNavigate`, and follows the link. Cancel `igcNavigate` to route on the client. A middle click, Ctrl/Cmd+click and Ctrl/Cmd+Enter open the link in a new browser tab and do not change the selection. `target` and `rel` go to the link. [#2497](https://github.com/IgniteUI/igniteui-webcomponents/pull/2497) + - The `header-background` theme token paints the full header strip. Until you set it, it follows `item-background`. The `tabs-theme` function of `igniteui-theming` 29.1.0 has the matching `$header-background` parameter. [#2431](https://github.com/IgniteUI/igniteui-webcomponents/pull/2431) - #### Text selection - - The date picker, date time input, input, mask input and textarea have read-only `selectionStart` and `selectionEnd`. Before, you could set the selection with `setSelectionRange()`, but not read it. In the input, both are `null` for the `email` and `number` types, as on the native input. In the mask input and the date time input, they give the selection from `setRangeText()` when `updateComplete` resolves. [#2451](https://github.com/IgniteUI/igniteui-webcomponents/pull/2451) [#2452](https://github.com/IgniteUI/igniteui-webcomponents/pull/2452) + - The date picker, date time input, input, mask input and textarea have read-only `selectionStart` and `selectionEnd`. In the input, both are `null` for the `email` and `number` types, as in the native input. [#2451](https://github.com/IgniteUI/igniteui-webcomponents/pull/2451) [#2452](https://github.com/IgniteUI/igniteui-webcomponents/pull/2452) - #### Theming - - Four export conditions keep only one theme in your bundle: `igc-theme-material`, `igc-theme-bootstrap`, `igc-theme-indigo` and `igc-theme-fluent`. Set one in your bundler, or with `node --conditions`. The bundle then has only the light and dark styles of that theme, and is approximately 15–17% smaller after gzip. Without a condition, the bundle has all four themes. With a theme that is not in the bundle, `configureTheme()` gives only the structural styles. See "Bundling a single theme" in the README. [#2461](https://github.com/IgniteUI/igniteui-webcomponents/pull/2461) + - Four export conditions keep only one theme in your bundle: `igc-theme-material`, `igc-theme-bootstrap`, `igc-theme-indigo` and `igc-theme-fluent`. Set one in your bundler or with `node --conditions`. The bundle is then approximately 15–17% smaller after gzip. With a theme that is not in the bundle, `configureTheme()` gives only the structural styles. See "Bundling a single theme" in the README. [#2461](https://github.com/IgniteUI/igniteui-webcomponents/pull/2461) - #### Tile manager - - `--grid-padding` sets the padding of the grid. The default is still `1.25rem`. For example, set it to `0` to align the tiles with the rest of the page. The resize handles then stay inside the tiles, so they do not make the grid scroll. With a smaller padding, they stand out of the tiles only by the padding. Set the padding with this variable, not on the `base` part. A padding of more than one value, such as `0 1rem`, also keeps the handles inside the tiles. + - `--grid-padding` sets the padding of the grid. The default is `1.25rem`. Use it, not a padding on the `base` part, so that the resize handles stay inside the tiles. [#2501](https://github.com/IgniteUI/igniteui-webcomponents/pull/2501) - #### Tooltip - - `showAt()` shows the tooltip at a point or against a rectangle, in viewport coordinates. Use it for the pointer over a canvas, a chart or an SVG drawing, for example `tooltip.showAt({ x: event.clientX, y: event.clientY })`. A `DOMRect` also fits the new `TooltipRect` type. A call while the tooltip shows at a point moves it, with no animation and no events. `placement`, `offset`, `withArrow` and the flip at the viewport edges apply. The point binds no triggers and no `aria-describedby`, and the tooltip does not hide when the pointer leaves it, so the application shows and hides it. `Escape` still closes it. After it closes, the `anchor` applies again, also an `anchor` that changed while the tooltip showed at the point. The triggers of the `anchor` wait until then. The position is also correct inside an ancestor with `transform` or `zoom`. [#2538](https://github.com/IgniteUI/igniteui-webcomponents/issues/2538) -- #### Tree - - Find-in-page now searches the children of a collapsed tree item. A match, a text fragment or a link to an element in them expands the collapsed items above it, from the inside out, and each item sends `igcItemExpanding`, which can be canceled, and `igcItemExpanded`, as for a user toggle. The items expand at once, without the animation, and with `singleBranchExpand` the path to the match stays expanded. A disabled item stays collapsed and its children are not searchable. In WebKit, the tree expands the path but does not scroll to a match in a collapsed item that skips its rendering. + - `showAt()` shows the tooltip at a point or a rectangle, in viewport coordinates. For example, `tooltip.showAt({ x: event.clientX, y: event.clientY })` shows it at the pointer over a canvas. Call it again to move the tooltip. The application shows and hides the tooltip, and Escape still closes it. After it closes, `anchor` applies again. New type: `TooltipRect`. [#2538](https://github.com/IgniteUI/igniteui-webcomponents/issues/2538) [#2561](https://github.com/IgniteUI/igniteui-webcomponents/pull/2561) ### Changed - #### Avatar, Badge, Carousel - - The avatar, the badge and the carousel slide no longer have an `aria-roledescription`. Screen readers now announce the role ("image", "status" or "tab panel") in the language of the user. Before, they announced the English words "avatar", "badge" and "slide" in all languages. The carousel keeps its role description, which now comes from the `carousel_role_description` resource string. To set a role description, put an `aria-roledescription` attribute on the element. [#2472](https://github.com/IgniteUI/igniteui-webcomponents/pull/2472) [#2477](https://github.com/IgniteUI/igniteui-webcomponents/pull/2477) + - The avatar, the badge and the carousel slide no longer set `aria-roledescription`. Screen readers now announce their role in the language of the user, not the English words "avatar", "badge" and "slide". To set a role description, add an `aria-roledescription` attribute. The carousel keeps its role description, from the `carousel_role_description` resource string. [#2472](https://github.com/IgniteUI/igniteui-webcomponents/pull/2472) [#2477](https://github.com/IgniteUI/igniteui-webcomponents/pull/2477) +- #### Calendar, Chat, Color picker, Combo + - **Behavioral change:** The events of inner components no longer leave the component. Listen to the events of the component. [#2530](https://github.com/IgniteUI/igniteui-webcomponents/issues/2530) [#2545](https://github.com/IgniteUI/igniteui-webcomponents/pull/2545) [#2568](https://github.com/IgniteUI/igniteui-webcomponents/pull/2568) + - Chat: use `igcInputChange`, not `igcInput` or `igcChange` of the text area. Use `igcAttachmentRemoved`, not `igcRemove` of the attachment chip. + - Combo: use `igcSearchInput`, not `igcInput` of the inputs. A listener on the combo no longer gets a second `igcChange` from the search input. For more data on scroll, use `igcDataRequest` of the combo in remote mode, not the events of the inner list. + - Color picker: the `igcInput` of its inputs and the open and close events of its format select stay inside. + - Calendar: the internal `igcActiveDateChange` and `igcRangePreviewDateChange` stay inside, also in the date pickers. - #### Carousel - - The carousel now takes the height of its tallest slide, so the text of a slide no longer runs out of it. Before, the slides did not size the carousel: it took the height of its parent, and at least 240px. A `height` or `max-height` on the carousel, or a height from its parent, also in a flex or grid layout, still sets the height, and a taller slide is cut. Set a height also to keep the page from moving when the content of a slide loads late. The slides do not set the width. An image that is a direct child of a slide still fills the carousel and does not size it. Other content, such as an image in a `` element, now adds its height. + - **Behavioral change:** The carousel takes the height of its tallest slide, so the text of a slide no longer overflows. Before, it took the height of its parent, at least 240px. A `height` or `max-height` on the carousel, or a height from its parent, still sets the height. Set a height to keep the page stable when slide content loads late. An image that is a direct child of a slide does not add height. [#2550](https://github.com/IgniteUI/igniteui-webcomponents/pull/2550) - #### Chat - - The Markdown renderer of `igniteui-webcomponents/extras` does less work: - - It loads shiki only when syntax highlighting is on. Before, a page that used `noHighlighter: true` still loaded shiki, about 128 KB (40 KB gzipped). - - It loads only the light and dark themes that it uses, not all 65 bundled themes. With one theme for both modes, it highlights each code block once, not twice. - - While a message streams, it no longer highlights the finished code blocks again for each chunk. `createMarkdownRenderer()` parses a message again only when its text changes. - - A code block of more than 2 KB that still streams shows as plain code until its closing fence arrives. Before, the renderer highlighted it again for each chunk, at about 12 ms per KB. - - Renderers with the same languages and themes share one highlighter. Before, each renderer created a highlighter that nothing freed, and shiki warned after ten renderers. - - `colorReplacements` of the Markdown renderer now applies to every theme. Before, it applied only to the GitHub themes. - - The Markdown renderer no longer opens links in the same origin, such as `/register` or `#top`, or links such as `mailto:`, in a new tab. Before, it gave each Markdown link `target="_blank"`, which a custom `sanitizer` or a DOMPurify configuration that allows `target` kept. With the default sanitizer, the renderer now also removes the `target` that the HTML sets on these links. - - The Markdown renderer no longer uses `marked-shiki`, so it is no longer a peer dependency. You can remove it from your dependencies. + - The message area follows the newest message only while it is at the bottom. When the user scrolls up, new messages do not move it. A new message of the current user, or a new conversation, scrolls to the bottom again. At the bottom, the area also stays there when content grows late. [#2461](https://github.com/IgniteUI/igniteui-webcomponents/pull/2461) [#2474](https://github.com/IgniteUI/igniteui-webcomponents/pull/2474) [#2594](https://github.com/IgniteUI/igniteui-webcomponents/pull/2594) + - The Markdown renderer of `igniteui-webcomponents/extras` does less work. It loads shiki only when syntax highlighting is on, and it loads only the themes that it uses. While a message streams, it highlights each finished code block one time. Renderers with the same languages and themes share one highlighter. A code block of more than 2 KB that still streams shows as plain code until its closing fence. [#2494](https://github.com/IgniteUI/igniteui-webcomponents/pull/2494) + - The Markdown renderer opens links to another origin in a new tab, with `rel="noopener noreferrer"`. Links in the same origin, such as `/register` or `#top`, and `mailto:` links open in the same tab, so the application can route them. Before, the result depended on the sanitizer. [#2494](https://github.com/IgniteUI/igniteui-webcomponents/pull/2494) [#2500](https://github.com/IgniteUI/igniteui-webcomponents/pull/2500) + - `colorReplacements` of the Markdown renderer applies to every theme, not only to the GitHub themes. [#2494](https://github.com/IgniteUI/igniteui-webcomponents/pull/2494) +- #### Chat, List, Tree + - Tree items, list items and chat messages that are far from the view skip their rendering (`content-visibility: auto`). Long lists render faster. For example, the first render of a tree with 2,000 items takes 41% less time. [#2594](https://github.com/IgniteUI/igniteui-webcomponents/pull/2594) + - In a container that takes its width from its content, the width follows the items near the view. It can change while the user scrolls. + - `innerText` of a skipped item is an empty string. Use `textContent`. + - In Safari before 26, find-in-page does not find the text of a skipped item. + - To render every item, set `content-visibility: visible` on `igc-tree-item`, on `igc-list-item` or on `igc-chat::part(message-item)`. - #### Chip - - The `end` slot now renders after the `suffix` slot, at the end of the chip, as the `start` slot renders before the `prefix` slot. Before, it rendered before the `suffix` slot. + - The `end` slot renders after the `suffix` slot, at the end of the chip. Before, it rendered before the `suffix` slot. [#2488](https://github.com/IgniteUI/igniteui-webcomponents/pull/2488) - #### Combo - - **Behavioral change:** A new `data` keeps the selection. Before, a selected item that the new `data` did not hold dropped out of `selection` and the input text, although `value` kept it, and the next selection by the user removed it from `value` too. Now it stays selected until the user or the application deselects it. To clear the selection with the data, as for cascading combos, set `value` to `[]`. `select()` also selects an object that `data` does not hold, so an application can select the records of a saved filter before their page loads; with `valueKey`, the object resolves by its key first. Without an argument, `select()` keeps the selected items that `data` does not hold. [#2519](https://github.com/IgniteUI/igniteui-webcomponents/issues/2519) - - **Behavioral change:** In multiple selection, a value of `value` that has no record in `data`, such as a value of a saved filter that a remote page does not hold yet, now stays in `value` when the user or a method changes other items. Before, the next change of the selection removed it, although the user could not see or deselect it. `deselect()` with that value or without an argument, `deselectAllItems(true)`, the clear icon and a new `value` remove it. [#2545](https://github.com/IgniteUI/igniteui-webcomponents/pull/2545) - - **Behavioral change:** In single selection, `Enter` with the list closed now submits the form, as in a native input with a list, and the combo counts as a text field of the form. So a form with the combo and another text field needs a submit button. While the list is open, `Enter` still selects the active option and does not submit. In multiple selection, `Enter` does not submit, as in a native `select`. Before, `Enter` with the list closed did nothing. [#2545](https://github.com/IgniteUI/igniteui-webcomponents/pull/2545) - - In multiple selection, the options report the state of their checkbox in `aria-checked`, not in `aria-selected`, as the WAI-ARIA listbox pattern allows for lists with checkboxes. So screen readers announce them as checked or not checked, as their checkboxes show. In single selection, the options keep `aria-selected`. [#2535](https://github.com/IgniteUI/igniteui-webcomponents/issues/2535) - - The `igcInput` of the search input, and of the main input in single selection, no longer leaves the combo. Use `igcSearchInput`. [#2519](https://github.com/IgniteUI/igniteui-webcomponents/issues/2519) - - `igcClosing` and `igcClosed` are typed `CustomEvent`, not `CustomEvent`. In TypeScript, change a handler that declares its parameter as `CustomEvent`. [#2533](https://github.com/IgniteUI/igniteui-webcomponents/issues/2533) - - The `igcStateChange` and `igcDataRequest` events of the list inside the combo no longer leave the combo. For more data on scroll, use the `igcDataRequest` of the combo in remote filtering mode. [#2530](https://github.com/IgniteUI/igniteui-webcomponents/issues/2530) + - **Behavioral change:** A new `data` keeps the selection. A selected item or value that `data` does not hold stays selected until the user or the application deselects it. To clear the selection with the data, for example in cascading combos, set `value` to `[]`. `select()` also accepts objects that `data` does not hold, for example the records of a saved filter. [#2519](https://github.com/IgniteUI/igniteui-webcomponents/issues/2519) [#2545](https://github.com/IgniteUI/igniteui-webcomponents/pull/2545) + - In multiple selection, the options report their checkbox state in `aria-checked`, not in `aria-selected`. Screen readers announce them as checked or not checked. [#2535](https://github.com/IgniteUI/igniteui-webcomponents/issues/2535) [#2545](https://github.com/IgniteUI/igniteui-webcomponents/pull/2545) + - In TypeScript, `igcClosing` and `igcClosed` are `CustomEvent`, not `CustomEvent`. Change the handlers that declare `CustomEvent`. [#2533](https://github.com/IgniteUI/igniteui-webcomponents/issues/2533) [#2545](https://github.com/IgniteUI/igniteui-webcomponents/pull/2545) +- #### Date picker, Date range picker, Date time input + - **Behavioral change:** `igcChange` reports only the changes of the user. A value that code sets no longer emits `igcChange` on the next blur or on Done. This applies to `value`, `clear()`, `stepUp()`, `stepDown()`, `setRangeText()`, `select()` and a form reset. The `clear()` of the date pickers still emits it, because their clear icon calls it. [#2488](https://github.com/IgniteUI/igniteui-webcomponents/pull/2488) [#2489](https://github.com/IgniteUI/igniteui-webcomponents/pull/2489) [#2580](https://github.com/IgniteUI/igniteui-webcomponents/pull/2580) - #### Date picker, Date range picker, Dialog - - **Behavioral change:** The backdrop of the dialog is now the native `::backdrop` of the `` element, in the top layer. So it covers the full page, also when an ancestor has a `transform`, a `filter` or a stacking context, for example a dialog in a tab panel. Before, the backdrop was an element with `position: fixed`, and such an ancestor kept it inside its own area. The `backdrop` and `animating` parts of the dialog, and the `overlay` part of the date picker and the date range picker in dialog mode, are removed. Styles for these parts do nothing now. To style the backdrop, use `igc-dialog::part(base)::backdrop`, or `::part(dialog-base)::backdrop` on a date picker. The backdrop also covers a toast or a snackbar that opened before the dialog. When `open` is set to `false` directly, the backdrop goes away at once with the dialog. With reduced motion, the backdrop does not fade. -- #### Date time input - - **Behavioral change:** A value that you set from code is no longer reported by `igcChange`, also while the input has the focus. This applies to `value`, `clear()`, `stepUp()`, `stepDown()`, `setRangeText()` and a form reset. The next blur compares the edit of the user with that value. Before, a blur after such a set emitted `igcChange` as if the user made the change. The date picker and the date range picker already did not report a `value` set from code. Their `clear()` still emits `igcChange` on the next blur, because their clear icon calls it. + - **Breaking change:** The dialog backdrop is now the native `::backdrop`, in the top layer. It covers the full page, also when an ancestor has a `transform`, a `filter` or a stacking context. It also covers a toast or a snackbar that opened before the dialog. [#2549](https://github.com/IgniteUI/igniteui-webcomponents/pull/2549) + - Removed parts: `backdrop` and `animating` of the dialog, and `overlay` of the date pickers in dialog mode. + - To style the backdrop, use `igc-dialog::part(base)::backdrop`, or `::part(dialog-base)::backdrop` on a date picker. + - **Behavioral change:** In dialog mode, the date pickers fade in and out, as the dialog does. `igcOpened` and `igcClosed` come after the animation, and `open` stays `true` until the exit ends. A change of `open` from code still applies at once. [#2574](https://github.com/IgniteUI/igniteui-webcomponents/pull/2574) +- #### Date range picker + - **Behavioral change:** In dialog mode, Done emits `igcChange` after `igcClosing`. Done and Cancel change the range only when the close continues. So a canceled `igcClosing` keeps the dialog open with the selected range. To ask for a confirmation before a close, restore the range through `value` when the user declines. [#2577](https://github.com/IgniteUI/igniteui-webcomponents/pull/2577) + - **Behavioral change:** "Last 7 Days" selects 7 days: today and the 6 days before it. Before, it selected 8 days. [#2528](https://github.com/IgniteUI/igniteui-webcomponents/issues/2528) [#2540](https://github.com/IgniteUI/igniteui-webcomponents/pull/2540) - #### Form controls - - **Behavioral change:** `Enter` in a form control now submits the form as in a native form. The first submit button of the form gets a click, and the click submits the form. So the button is the `submitter` of the `submit` event, and a `click` listener can cancel the submission. A disabled first submit button blocks the submission. A form with no submit button submits only from its one text field, so a form with two text fields needs a submit button. The checkbox, radio and switch submit only through a submit button. An `igc-button` with `type="submit"` counts as a submit button. The browser's own `Enter` in a native input still sees only native controls. The text fields are the text-like native inputs and the input, mask input, date time input, date picker and date range picker. Before, `Enter` in these controls always submitted the form, with no submitter. + - **Behavioral change:** Enter in a text field submits the form as in a native form. It clicks the first submit button of the form. So that button is the `submitter`, and a `click` listener can stop the submission. Before, Enter submitted the form with no submitter. [#2545](https://github.com/IgniteUI/igniteui-webcomponents/pull/2545) [#2586](https://github.com/IgniteUI/igniteui-webcomponents/pull/2586) [#2590](https://github.com/IgniteUI/igniteui-webcomponents/pull/2590) + - The text fields are the input, mask input, date time input, date picker, date range picker, and the combo in single selection with its list closed. The combo in multiple selection does not submit, as a native `select`. + - An `igc-button` with `type="submit"` counts as a submit button. A disabled first submit button blocks the submission. + - A form without a submit button submits only when it has one text field. + - The checkbox, radio and switch submit only through a submit button. + - Enter does not submit when a `keypress` listener cancels it, or when it commits an IME composition. - #### Highlight - - Setting `searchText` or `caseSensitive` to its current value no longer runs the search again, so the active match stays. Before, a framework that sets each property on each render, such as React, moved the active match back to the first match on each render. [#2516](https://github.com/IgniteUI/igniteui-webcomponents/issues/2516) - - The highlight now searches again when its content changes, so you no longer call `search()` after a change. The active match stays while it starts at the same place in the same text node. Otherwise the first match becomes active. Each change searches all the content again. `search()` still searches at once and makes the first match active. -- #### Chat, List, Tree - - Tree items, list items and chat messages that are far from the view now skip their rendering until they come near it (`content-visibility: auto`). A long tree, list or chat renders faster, and a resize or a change of `--ig-size` costs less. In our measurements, style and layout took 70-90% less time, and the first render of a tree with 2,000 items took 41% less. A skipped collapsed tree item keeps the space of one row, so scroll positions do not change, and the active item and the item with the focus always render. A list item and a chat message keep an estimated space until their first render, then their real size. - - In a container that takes its width from its content, a long list or tree now takes the width of the items near the view, and the width can change while the user scrolls. `innerText` of an item that skips its rendering returns an empty string; `textContent` works. In Safari before 26, which includes iOS 18, find-in-page does not find the text of an item that skips its rendering. To render every item, set `content-visibility: visible` on `igc-tree-item` or `igc-list-item`, or on `igc-chat::part(message-item)`. - - While the chat follows the newest message, it now also stays at the bottom when the message list grows for another reason, such as a message that renders late, a resize of the chat, or content that loads in a message. + - **Behavioral change:** The match colors come only from `--background`, `--foreground`, `--background-active` and `--foreground-active` on the highlight. A match inside a list, a tree, a button or a nested highlight now shows the colors of the highlight. Before, it took the colors of that component. [#2554](https://github.com/IgniteUI/igniteui-webcomponents/pull/2554) + - The highlight searches again when its content changes. You no longer call `search()` after a change. [#2572](https://github.com/IgniteUI/igniteui-webcomponents/pull/2572) - #### Library - Dependencies: - - New runtime dependency `tslib`. The components import the TypeScript helpers from it, so a bundle has one copy of each helper. [#2461](https://github.com/IgniteUI/igniteui-webcomponents/pull/2461) - - `igniteui-i18n-core` 2.0, with the new resource strings of the carousel, chat, color picker, dialog, splitter, tile and tooltip. If you register languages from `igniteui-i18n-resources`, update it to 2.0 too. [#2474](https://github.com/IgniteUI/igniteui-webcomponents/pull/2474) [#2477](https://github.com/IgniteUI/igniteui-webcomponents/pull/2477) - - The minimum versions of the optional peer dependencies are now `dompurify` 3.4.16, `marked` 18.1.0 and `shiki` 4.5.0. [#2450](https://github.com/IgniteUI/igniteui-webcomponents/pull/2450) - - The themes are built with `igniteui-theming` 30.0.0. The built-in palettes still use the `legacy` generator, so the themes have the same colors as before. [#2487](https://github.com/IgniteUI/igniteui-webcomponents/pull/2487) + - New runtime dependency: `tslib`. [#2461](https://github.com/IgniteUI/igniteui-webcomponents/pull/2461) + - `igniteui-i18n-core` 2.0. If you register languages from `igniteui-i18n-resources`, update it to 2.0 too. [#2474](https://github.com/IgniteUI/igniteui-webcomponents/pull/2474) [#2477](https://github.com/IgniteUI/igniteui-webcomponents/pull/2477) [#2595](https://github.com/IgniteUI/igniteui-webcomponents/pull/2595) + - The optional peer dependency `shiki` must be 4.5.0 or later. [#2575](https://github.com/IgniteUI/igniteui-webcomponents/pull/2575) + - `marked-shiki` is no longer a peer dependency. You can remove it. [#2494](https://github.com/IgniteUI/igniteui-webcomponents/pull/2494) + - The themes are built with `igniteui-theming` 30.2.0. The built-in palettes keep their colors. [#2487](https://github.com/IgniteUI/igniteui-webcomponents/pull/2487) [#2570](https://github.com/IgniteUI/igniteui-webcomponents/pull/2570) [#2576](https://github.com/IgniteUI/igniteui-webcomponents/pull/2576) - Bundle size: - - The bundle of all components is approximately 6% smaller after gzip. The components share one copy of their common styles, and the dark theme styles have only the values that are different from the light theme. [#2461](https://github.com/IgniteUI/igniteui-webcomponents/pull/2461) - - The carousel, chat, chip, combo, file input and tree no longer bundle the date formatter of `igniteui-i18n-core`, because they use only resource strings. The bundle of each of these components is approximately 7 KB smaller after minification. [#2475](https://github.com/IgniteUI/igniteui-webcomponents/pull/2475) - - The component styles no longer have vendor prefixes for KaiOS, Opera Mini, UC Browser and QQ Browser. The library does not support these browsers. [#2461](https://github.com/IgniteUI/igniteui-webcomponents/pull/2461) + - All the components together are approximately 6% smaller after gzip. The components share their common styles, and the dark themes hold only the values that are different from the light themes. [#2461](https://github.com/IgniteUI/igniteui-webcomponents/pull/2461) + - The carousel, chat, chip, combo, file input and tree no longer bundle the date formatter of `igniteui-i18n-core`. Each one is approximately 7 KB smaller after minification. [#2475](https://github.com/IgniteUI/igniteui-webcomponents/pull/2475) + - The styles no longer have vendor prefixes for KaiOS, Opera Mini, UC Browser and QQ Browser. The library does not support these browsers. [#2461](https://github.com/IgniteUI/igniteui-webcomponents/pull/2461) - #### Localization - - The calendar, carousel, chat, chip, color picker, combo, date picker, date range picker, date time input, dialog, file input, splitter, tile, tile manager, tooltip and tree now inherit the locale. Without its own `locale`, a component uses the locale of the nearest ancestor component that sets one, then the global locale. The search goes up the DOM tree and from a shadow root to its host, but not through slots. So a `locale` on a dialog, splitter or tile manager also applies to the components in it, also to components added later. An invalid `locale` does not pass down. Before, a component without `locale` always used the global locale. Server-side rendering cannot see the ancestors, so set `locale` on a server-rendered component that must not use the global locale. [#2478](https://github.com/IgniteUI/igniteui-webcomponents/pull/2478) - - **Behavioral change:** The components that inherit the locale now also read `lang`. Without its own `locale`, a component takes its own `lang`, else the locale of the nearest ancestor that has a `locale` (a component) or a `lang`, and then the global locale. So `
` gives the Italian locale to the components in it, also in a shadow root of your application, and the components follow a change of `lang`. Before, a component in that section used the global locale. If your application puts `lang` on an element below ``, for example on ``, and sets the language with `setCurrentI18n()`, the components in that element now use the `lang`. Set `locale` on a component to keep a different locale. An empty or invalid `lang` gives the global locale. The `lang` of `` still sets the global locale through `igniteui-i18n-core`. - - The components no longer register their English resource strings with `igniteui-i18n-core`. They still show their English strings for the keys that a locale does not have. `getCurrentResourceStrings()` of `igniteui-i18n-core` now returns only the strings that you register. [#2476](https://github.com/IgniteUI/igniteui-webcomponents/pull/2476) - - In TypeScript, the core strings that the `resourceStrings` of the date picker and the date range picker return now have the type `string`, as in the calendar. Before, their type was `string | undefined`, although the component always resolves them. [#2475](https://github.com/IgniteUI/igniteui-webcomponents/pull/2475) + - **Behavioral change:** A component without `locale` now inherits the locale. It uses its own `lang`, then the `locale` or `lang` of the nearest ancestor, then the global locale. The search goes up through shadow roots, but not through slots. For example, `
` gives the Italian locale to the components in it. [#2478](https://github.com/IgniteUI/igniteui-webcomponents/pull/2478) [#2493](https://github.com/IgniteUI/igniteui-webcomponents/pull/2493) + - If you set `lang` on `` or on another element below ``, the components in it now use that `lang`, not the language from `setCurrentI18n()`. Set `locale` on a component to keep a different locale. + - Server-side rendering cannot see the ancestors. Set `locale` on a server-rendered component that must not use the global locale. + - This applies to the calendar, carousel, chat, chip, color picker, combo, date picker, date range picker, date time input, dialog, file input, splitter, tile, tile manager, tooltip and tree. + - The components no longer register their English strings with `igniteui-i18n-core`. `getCurrentResourceStrings()` now returns only the strings that you register. [#2476](https://github.com/IgniteUI/igniteui-webcomponents/pull/2476) + - In TypeScript, the core strings in `resourceStrings` of the date picker and the date range picker are `string`, not `string | undefined`. [#2475](https://github.com/IgniteUI/igniteui-webcomponents/pull/2475) +- #### Navigation drawer + - **Behavioral change:** In Firefox and Safari, a drawer at an edge position slides out and its backdrop fades out, as in Chromium. `hide()` and `toggle()` resolve, and `igcClosed` comes, after the exit. `open` still changes at once. With reduced motion, the drawer changes at once. [#2578](https://github.com/IgniteUI/igniteui-webcomponents/pull/2578) - #### Snackbar, Toast - - The display time now stops while the pointer is on the component or the keyboard focus is in it, and starts again in full when both leave. Before, the component closed under the pointer, and a keyboard user could lose the action before they got to it. A pointer click on the action does not keep the component open, also when the action has the keyboard focus. [#2447](https://github.com/IgniteUI/igniteui-webcomponents/pull/2447) - - `show()` on an open component now starts the display time again. It still resolves `false`. Before, a new message closed with the time that remained from the previous message. [#2447](https://github.com/IgniteUI/igniteui-webcomponents/pull/2447) + - The display time pauses while the pointer or the keyboard focus is on the component. It starts again in full when both leave. A click on the action does not keep the component open. [#2447](https://github.com/IgniteUI/igniteui-webcomponents/pull/2447) + - `show()` on an open component starts the display time again. [#2447](https://github.com/IgniteUI/igniteui-webcomponents/pull/2447) - #### Splitter - - **Behavioral change:** A change of `orientation` now keeps the sizes, the minimum and maximum sizes and their attributes that you set, and returns the panes to these sizes. The minimum and maximum sizes now also apply on the new axis, so bind them together with the orientation when they differ per axis. It drops only the sizes from a drag, a key press or a collapse, which were measured on the other axis. Before, it removed all sizes and their attributes, also the sizes set in the same update. A template that binds the orientation and the sizes together, for example to stack the panes on a narrow screen, lost the sizes, because the template does not set unchanged values again. - - Each pane now has its own stacking context, so slotted content with any `z-index` stays under the focus ring of the bar. Before, content with a `z-index` of 99 or more could cover the ring. Content that reaches over the bar, for example with `position: fixed`, now shows under the bar while the bar has focus. + - **Behavioral change:** A change of `orientation` keeps the sizes and the minimum and maximum sizes that you set. Only the sizes from a drag, a key or a collapse go back to the default. The minimum and maximum sizes now also apply on the new axis, so change them together with the orientation when they are different. [#2527](https://github.com/IgniteUI/igniteui-webcomponents/pull/2527) + - Each pane has its own stacking context, so slotted content with any `z-index` stays under the focus ring of the bar. [#2567](https://github.com/IgniteUI/igniteui-webcomponents/pull/2567) - #### Tabs - - With `prefers-reduced-motion: reduce`, the scroll buttons and the selection now scroll the header strip at once. Before, the strip always scrolled smoothly. The scroll buttons now also follow a `scroll-behavior` that you set on the `tabs` part. - - Changes inside a tab panel, such as a list that updates or content that grows, no longer make the tabs measure all their headers. The tabs measure the strip when a tab header or the width of the strip changes. - - The strip no longer snaps to the edge of a tab when you scroll it by touch after a scroll button press. + - With `prefers-reduced-motion: reduce`, the header strip scrolls at once. The scroll buttons also follow a `scroll-behavior` on the `tabs` part. [#2579](https://github.com/IgniteUI/igniteui-webcomponents/pull/2579) + - Changes inside a panel no longer make the tabs measure all the headers. [#2497](https://github.com/IgniteUI/igniteui-webcomponents/pull/2497) - #### Textarea - - With `resize="auto"`: [#2479](https://github.com/IgniteUI/igniteui-webcomponents/pull/2479) - - A browser that supports the CSS `field-sizing` property sizes the control to its content. Other browsers still measure the height. The minimum height is still `rows` lines. In a shrink-to-fit layout, such as a flex item without a width, such a browser makes the control approximately 20 characters wide. - - The control uses the content box. So a `max-height` or `max-block-size` on the `input` part no longer includes the padding and the border. To keep the same maximum height, subtract the padding and the border from your value, or give the maximum in lines, for example `max-block-size: 8lh`. + - With `resize="auto"`, a browser that supports CSS `field-sizing` sizes the control to its content. Other browsers measure the height as before. [#2479](https://github.com/IgniteUI/igniteui-webcomponents/pull/2479) + - The control uses the content box. So a `max-height` or `max-block-size` on the `input` part no longer includes the padding and the border. Subtract them from your value, or give the maximum in lines, for example `max-block-size: 8lh`. + - In a shrink-to-fit layout, such as a flex item with no width, the control is approximately 20 characters wide. - #### Theming - - A theme change now updates only the components that render differently for each theme. A `configureTheme()` call with the active theme and variant updates no component. [#2461](https://github.com/IgniteUI/igniteui-webcomponents/pull/2461) - - The component styles no longer declare `--ig-theme` and `--ig-theme-variant`. The library reads the two variables from the document root only. So `getComputedStyle()` on a component gives the inherited values, usually the values of the document root. [#2461](https://github.com/IgniteUI/igniteui-webcomponents/pull/2461) - - **Breaking change**: The components take their surface color from the `base` surface role, `--ig-surface-base`, not from `--ig-surface-500`. The themes now also define the other surface roles: `--ig-surface-raised`, `--ig-surface-overlay`, `--ig-surface-sunken` and `--ig-surface-container`. To change the surface at runtime, set the surface roles. Before, you set `--ig-surface-500`, which now has no effect on the components. [#2487](https://github.com/IgniteUI/igniteui-webcomponents/pull/2487) + - **Breaking change:** The components take their surface color from `--ig-surface-base`, not from `--ig-surface-500`. The themes also define `--ig-surface-raised`, `--ig-surface-overlay`, `--ig-surface-sunken` and `--ig-surface-container`. To change the surface at runtime, set these surface roles. `--ig-surface-500` has no effect on the components. [#2487](https://github.com/IgniteUI/igniteui-webcomponents/pull/2487) + - A theme change updates only the components that render differently for each theme. A `configureTheme()` call with the active theme and variant does nothing. [#2461](https://github.com/IgniteUI/igniteui-webcomponents/pull/2461) + - The component styles no longer declare `--ig-theme` and `--ig-theme-variant`. The library reads them from the document root only. [#2461](https://github.com/IgniteUI/igniteui-webcomponents/pull/2461) - #### Tile manager - - The default actions of a tile now have names that tell what they do: "Maximize" or "Restore", and "Enter full screen" or "Exit full screen". Before, screen readers announced the icon names, such as "expand_content". [#2456](https://github.com/IgniteUI/igniteui-webcomponents/pull/2456) [#2477](https://github.com/IgniteUI/igniteui-webcomponents/pull/2477) - - A tile is now a region, and the content of its `title` slot gives its name. So screen reader users can move from tile to tile. An `aria-label` or `aria-labelledby` on the tile replaces the title as the name. Before, a tile had no role. [#2456](https://github.com/IgniteUI/igniteui-webcomponents/pull/2456) - - In Chromium, the Tab order and the reading order of screen readers now follow the layout: the `position` of the tiles and the gaps that later tiles fill. Other browsers do not support `reading-flow` yet and keep the DOM order. [#2456](https://github.com/IgniteUI/igniteui-webcomponents/pull/2456) - - `igcTileDragEnd` and `igcTileDragCancel` now fire after the tiles have their new or restored positions, as `igcTileResizeEnd` does, so a handler can call `saveLayout()` and `loadLayout()`. The end or cancel event still comes before the `igcTileDragStart` of the next drag. Before, the events fired before the view transition applied the positions: `saveLayout()` returned the old layout, and the transition overwrote a layout from `loadLayout()`. [#2456](https://github.com/IgniteUI/igniteui-webcomponents/pull/2456) - - The content container of a tile now fills the tile under the header, so content with `block-size: 100%`, such as a chart, takes the free height. Before, the container had the height of its content, and such content collapsed to its minimum height. The `::part(base)` and `::part(content-container)` flex rules that did this are no longer necessary. - - A tile no longer spans past the last column, with a column count and in the responsive layout. A tile that starts after the last column moves back so that its span fits, for example `col-start="6" col-span="3"` in four columns takes columns 2 to 4. A resize that changes the column span of such a tile sets `colStart` to the column where the tile is, so the tile does not move. `colSpan` and `colStart` keep their values, also after a resize that changes only the height, so one layout works at every column count, and `saveLayout()` returns the values that you set. A `--column-count` from a style sheet, for example in a media query, works the same way. Its value must be a whole number; `initial` gives the responsive layout. A resize no longer gives a tile more columns than there are after its start. Before, a change of `columnCount` made `colSpan` smaller and removed a `colStart` after the last column, so the tiles did not go back to their places when the count grew again. With a `--column-count` from a style sheet, a wide tile added columns. In the responsive layout, a wide tile or a late start added columns of 0px: a tile in them was invisible but stayed in the Tab order, and a wide tile ended one gap after the others. - - The default resize handles now stand out of the tile through a negative margin, not through `bottom` and `inset-inline-end`. If you move them with `bottom`, `right` or `inset-inline-end` on the `trigger`, `trigger-side` or `trigger-bottom` part, also set `margin: 0` on the part. - - A press on a resize handle no longer cancels its `pointerdown` event, so the focus and the mouse events follow it as on any other press. The grid no longer reads the undocumented `--auto-rows` and `--auto-columns` variables. - - The tile manager no longer inherits `--column-count` and `--grid-gap` from an ancestor element, so that a nested manager does not take the values of the outer one. If you set them on a wrapper element, set them on the manager instead, for example `igc-tile-manager { --column-count: 2; }`. - - A tile now has a `view-transition-name` only during a view transition of its manager: a swap, the restore of a canceled drag, a maximize, a restore and a resize. Before, every tile had a name at all times, so each transition also captured the tiles of the other managers on the page and of nested managers, and took more time. If your application runs its own view transition that moves tiles, give these tiles a `view-transition-name` for that transition, for example from their `id`. You can start the transition with a type and name the tiles in an `:active-view-transition-type()` rule, as the ProjectBoard story does. The manager does not change a name that you set inline. - - The content of a tile, with its header, now has its own stacking context. So the resize handles stay above content with any `z-index`, and content with a negative `z-index` shows above the background of the tile. Before, content with a `z-index` of 11111 or more covered the handles, and the background of the tile hid content with a negative `z-index`. - - During a drag, the tile under the pointer stays the drop target while the pointer is in its box, so a pointer move does less work. The tile also stays the target where an ancestor clips it, for example in a nested manager. + - **Behavioral change:** A tile no longer spans past the last column. A tile that starts after the last column moves back so that its span fits. `colSpan` and `colStart` keep the values that you set at every column count. So one layout works for all column counts, and `saveLayout()` returns your values. A `--column-count` from a style sheet must be a whole number, and `initial` gives the responsive layout. [#2496](https://github.com/IgniteUI/igniteui-webcomponents/pull/2496) [#2565](https://github.com/IgniteUI/igniteui-webcomponents/pull/2565) + - **Behavioral change:** The tile manager no longer inherits `--column-count` and `--grid-gap` from an ancestor. Set them on the tile manager, for example `igc-tile-manager { --column-count: 2; }`. [#2565](https://github.com/IgniteUI/igniteui-webcomponents/pull/2565) + - A tile is a region. The content of its `title` slot gives its name. An `aria-label` or `aria-labelledby` on the tile replaces that name. The default actions have names: "Maximize" or "Restore", and "Enter full screen" or "Exit full screen". In Chromium, the Tab order and the screen reader order follow the layout. [#2456](https://github.com/IgniteUI/igniteui-webcomponents/pull/2456) [#2477](https://github.com/IgniteUI/igniteui-webcomponents/pull/2477) + - `igcTileDragEnd` and `igcTileDragCancel` are emitted after the tiles have their new positions, as `igcTileResizeEnd` is. So a handler can call `saveLayout()` and `loadLayout()`. [#2456](https://github.com/IgniteUI/igniteui-webcomponents/pull/2456) + - The content container fills the tile under the header. So content with `block-size: 100%`, such as a chart, takes the free height. You can remove the flex rules that you added on `::part(base)` or `::part(content-container)` for this. [#2496](https://github.com/IgniteUI/igniteui-webcomponents/pull/2496) + - The default resize handles stand out of the tile through a negative margin. If you move them with `bottom`, `right` or `inset-inline-end` on the `trigger`, `trigger-side` or `trigger-bottom` part, also set `margin: 0`. [#2501](https://github.com/IgniteUI/igniteui-webcomponents/pull/2501) + - A tile has a `view-transition-name` only during a view transition of its manager. If your own view transition moves tiles, give them a name for that transition. [#2566](https://github.com/IgniteUI/igniteui-webcomponents/pull/2566) + - The content of a tile has its own stacking context. So the resize handles stay above content with any `z-index`. [#2566](https://github.com/IgniteUI/igniteui-webcomponents/pull/2566) ### Deprecated - #### Combo - - The `item` of the group header template is deprecated, because it is not a data item. Use `key`. [#2462](https://github.com/IgniteUI/igniteui-webcomponents/issues/2462) [#2468](https://github.com/IgniteUI/igniteui-webcomponents/pull/2468) + - The `item` of the group header template. Use `key`. [#2462](https://github.com/IgniteUI/igniteui-webcomponents/issues/2462) [#2468](https://github.com/IgniteUI/igniteui-webcomponents/pull/2468) - #### Theming - - The numbered surface shades, such as `--ig-surface-500`, are deprecated, and a future release of `igniteui-theming` removes them. The themes still define them. Use the surface roles. [#2487](https://github.com/IgniteUI/igniteui-webcomponents/pull/2487) + - The numbered surface shades, such as `--ig-surface-500`. A future release of `igniteui-theming` removes them. Use the surface roles. [#2487](https://github.com/IgniteUI/igniteui-webcomponents/pull/2487) ### Fixed -- #### Accordion - - The arrow keys, `Home` and `End` now skip a panel that does not render, such as a panel with the `hidden` attribute or `display: none`. Before, the focus stayed on the current panel. [#2418](https://github.com/IgniteUI/igniteui-webcomponents/pull/2418) +- #### Accordion, Tabs + - The arrow keys, Home and End skip a panel or a tab that does not render, such as one with the `hidden` attribute. [#2418](https://github.com/IgniteUI/igniteui-webcomponents/pull/2418) [#2497](https://github.com/IgniteUI/igniteui-webcomponents/pull/2497) - #### AI-Assisted Development - - The `igniteui-wc-migrate-grid-lite-to-premium` skill now shows a correct custom sort strategy for the Premium Grid: an object with a `sort()` method that reads the cell values through `valueResolver`. Before, the example extended `DefaultSortingStrategy`, which the grid package does not export. [#2407](https://github.com/IgniteUI/igniteui-webcomponents/pull/2407) + - The `igniteui-wc-migrate-grid-lite-to-premium` skill shows a correct custom sort strategy for the Premium Grid. [#2407](https://github.com/IgniteUI/igniteui-webcomponents/pull/2407) - #### Banner - - A closed banner now takes no space in a column flex container. Before, its `flex-basis` of 320px kept 320px of empty space before the next element. In a row flex container, the banner now starts from the width of its content, as other block elements do. [#2543](https://github.com/IgniteUI/igniteui-webcomponents/issues/2543) - - The banner is now never wider than its container. Its minimum width is 320px or the width of the container, whichever is smaller. Before, in a container narrower than 320px, the banner overflowed and the container scrolled sideways. - - A change of `open` against a running `show()` or `hide()` now ends it, and the banner keeps the new state, as in the dialog. Before, the exit closed the banner when its animation ended, also when `open` was set to `true` again. After `open = false` during `show()`, a new `show()` did nothing until the entrance animation ended. + - The banner stays inside its container. A closed banner takes no space in a column flex container, and the banner is never wider than its container. [#2543](https://github.com/IgniteUI/igniteui-webcomponents/issues/2543) [#2546](https://github.com/IgniteUI/igniteui-webcomponents/pull/2546) +- #### Banner, Dialog, Expansion panel, Snackbar, Toast, Tooltip + - A change of `open` during a running `show()`, `hide()` or animation now ends it, and the component keeps the new state. The running method resolves `false`. Before, the end of the animation replaced the new state. [#2447](https://github.com/IgniteUI/igniteui-webcomponents/pull/2447) [#2549](https://github.com/IgniteUI/igniteui-webcomponents/pull/2549) [#2571](https://github.com/IgniteUI/igniteui-webcomponents/pull/2571) + - Dialog, Snackbar, Toast: `open` stays `true` during the exit. To keep the component open, set `open` to `false` and then to `true`. + - Snackbar, Toast: `show()` and `toggle()` during the fade-out keep the component open. + - Tooltip: when the pointer leaves the anchor during the show animation, the animation ends at once. The pointer can then move onto the tooltip to keep it open. - #### Button, Icon button - - A button with `href` now keeps the link role of its anchor. Before, the anchor had `role="button"`, so screen readers announced a link as a button. [#2421](https://github.com/IgniteUI/igniteui-webcomponents/pull/2421) - - A disabled link now renders a disabled native `