# Rendering Changes in 9.0.0 The Kendo UI for Vue 9.0.0 release introduces changes in the rendering of several components, mostly new default icons. If your application overrides the built-in CSS rules, queries the generated markup, for example in tests, or depends on the default icons, review the following changes. The default icons are rendered as font icons (`k-i-`) or SVG icons (`k-svg-i-`). Update only the selectors that target the components listed below, because classes such as `k-i-caret-alt-left` can also belong to other components. ## Buttons * `SpeechToTextButton`—The default icon is now `microphone` instead of `microphoneOutline`. While listening, the button uses the `stop` icon instead of `stopSm`. * `SplitButton`—The arrow uses the `chevron-down` icon (font icon name `chevron-down`, SVG icon `chevronDownIcon`) instead of `caret-alt-down` and has the `k-split-button-arrow` class. * `ToolbarScrollButton`—The scroll buttons render fewer classes and use new default icons. * Before: The buttons render `k-button k-icon-button k-button-md k-button-solid k-button-solid-base k-rounded-md` and `k-toolbar-prev` or `k-toolbar-next`, plus `k-disabled` while disabled. The default icons are `caret-alt-left` and `caret-alt-right`. * After: The buttons render only `k-button k-icon-button` and `k-toolbar-prev` or `k-toolbar-next`. The `k-button-md`, `k-button-solid`, `k-button-solid-base`, `k-rounded-md`, and the conditional `k-disabled` classes are removed. The default icons are `chevron-left` and `chevron-right`. ## Conversational UI * `AIPrompt`—The rate buttons of the output view use the `thumb-up` and `thumb-down` icons instead of `thumb-up-outline` and `thumb-down-outline`. * `AIPrompt`—The stop floating action button uses the `stop` icon instead of `stop-sm`. * `PromptBox`—The action button uses the `arrow-up` icon instead of `arrow-up-outline`, and the `stop` icon instead of `stop-sm` while loading. * `PromptBox`—The action button gets the `k-generating` and `k-active` classes while loading. Before, it got only the `k-generating` class. * `PromptBox`—The action button renders `aria-disabled="true"` only when it is disabled. Before, it always rendered `aria-disabled`, with the value `"false"` when enabled. * `PromptBox`—The upload button uses the `paperclip` icon instead of `paperclip-outline-alt-right`. * `PromptBox`—The remove button of an attached file uses the `x-circle` icon instead of `x-mark-sm-outline`. * `PromptBox`—The textarea gets `aria-multiline="true"` whenever the mode is not `'single'`, including a collapsed `'auto'` mode. Before, it got `aria-multiline` only when the layout was multiline. ## Data Tools * `Pager`—The first, previous, next, and last page buttons use the `chevron-double-left`, `chevron-left`, `chevron-right`, and `chevron-double-right` icons instead of `caret-alt-to-left`, `caret-alt-left`, `caret-alt-right`, and `caret-alt-to-right`. The icons are mirrored in RTL as before. This also applies to the pager of the Grid and the TreeList. * `Pager`—When the `responsive` property is set, the wrapper renders the `k-pager-responsive` class in addition to `k-pager` and the size class. ## Date Inputs * `DateInput`—The spinner buttons use the `chevron-up` and `chevron-down` icons instead of `caret-alt-up` and `caret-alt-down`. * `DateInput`—The input has no default `role="textbox"`, and `aria-disabled` is rendered only when the input is disabled. Before, the input rendered `role="textbox"` by default and `aria-disabled="false"` when enabled. * `DateInput`, `DatePicker`, `DateRangePicker`, and `DateTimePicker`—The `aria-controls` attribute of the input (the start and end inputs of the `DateRangePicker`) is rendered only while the popup is open. Before, it was always rendered with the popup id. * `DateTimePicker`—The Date/Time switcher in the popup is now a `SegmentedControl` instead of a `ButtonGroup`. * Before: The `.k-datetime-buttongroup` element contains a `ButtonGroup` (`k-button-group`) with two toggle buttons (`k-button`, with `k-selected` on the active one, and `aria-pressed`). * After: The `.k-datetime-buttongroup` element contains a stretched `SegmentedControl` (`div.k-segmented-control.k-segmented-control-stretched` with `role="group"`, a `k-segmented-control-thumb` element, and `k-segmented-control-button` items with `aria-pressed`). The `k-selected` class marks the active item. ## Dialogs * `Dialog` and `Window`—The `k-window-primary`, `k-window-dark`, and `k-window-light` classes are no longer rendered on the `k-window` element, because the `themeColor` property is removed. The `Dialog` rendered `k-window k-dialog k-window-`, and the `Window` rendered, for example, `k-window k-window-dark`. Use the `dialogClass` (`Dialog`) or `windowClass` (`Window`) property to apply your own class. ## Dropdowns * `ComboBox`, `DropDownList`, and `DropDownTree`—The toggle button uses the `chevron-down` icon instead of `caret-alt-down`. * `SearchBar`—The input always renders `tabindex`, which defaults to `0` when `tabIndex` is not set. Before, it rendered `tabindex` only when `tabIndex` was set. ## Grid * `Grid`—The group cell uses the `chevron-down` and `chevron-right` icons (`chevron-left` in RTL) instead of `caret-alt-down` and `caret-alt-right` (`caret-alt-left` in RTL). * `Grid`—The pin dropdown and the **Pin row** context menu items use the `pin`, `pin-top`, `pin-bottom`, and `unpin` icons instead of `pin-outline`, `pin-outline-top`, `pin-outline-bottom`, and `unpin-outline`. * `Grid`—The **Reorder row** context menu items use the `chevron-down`, `chevron-up`, `chevron-down`, `chevron-double-up`, and `chevron-double-down` icons instead of `caret-alt-expand`, `caret-alt-up`, `caret-alt-down`, `caret-alt-to-top`, and `caret-alt-to-bottom`. * `Grid`—The pager buttons use the `chevron-left`, `chevron-right`, `chevron-double-left`, and `chevron-double-right` icons instead of `caret-alt-left`, `caret-alt-right`, `caret-alt-to-left`, and `caret-alt-to-right`. * `contextMenuItemsMap`—The `icon` and `svgIcon` values of the exported map change accordingly. For example, `'pin-outline'` becomes `'pin'`, and `'caret-alt-to-top'` becomes `'chevron-double-up'`. Update the custom context menu items that depend on the previous icon names. ## Indicators * `Badge` and `BadgeContainer`—The `k-badge-dark` and `k-badge-light` classes are removed together with the `'dark'` and `'light'` theme colors. * `BadgeContainer`—A `BadgeContainer` without `themeColor` renders `k-badge-base` and `k-badge--base` instead of `k-badge-primary` and `k-badge--primary`. * `Loader`—The `k-loader-info`, `k-loader-success`, `k-loader-warning`, `k-loader-error`, `k-loader-dark`, `k-loader-light`, and `k-loader-inverse` classes are removed, and the `k-loader-base` class is added. * `Loader`—A `Loader` without `themeColor` no longer renders `k-loader-primary`. ## Inputs * `ColorInput`—The expand icon is `chevron-down` instead of `caret-alt-expand`. * `ColorPicker`—The arrow uses the `chevron-down` icon instead of `caret-alt-down`. * `NumericTextBox`—The spinner buttons use the `chevron-up` and `chevron-down` icons instead of `caret-alt-up` and `caret-alt-down`. * `Rating`—An unselected item uses the `star` icon (`k-i-star` and `k-svg-i-star`) instead of `star-outline`. The selected items already use `k-i-star`, so adjust only the selectors that target the unselected items. * `Slider`—The increase and decrease buttons use the `chevron-up`, `chevron-down`, `chevron-left`, and `chevron-right` icons instead of `caret-alt-up`, `caret-alt-down`, `caret-alt-left`, and `caret-alt-right`. ## Layout * `AppBar`—An `AppBar` without `themeColor` renders `k-appbar-base` instead of `k-appbar-light`. The `k-appbar-light`, `k-appbar-dark`, and `k-appbar-inherit` classes are no longer rendered. * `Avatar`—The color class changes from `k-avatar--` to `k-avatar-`. The class was rendered only when both `fillMode` and `themeColor` were set. Now it is rendered whenever `themeColor` is set, and no color class is rendered when it is not. For example, `` no longer renders `k-avatar-solid-primary`. * `BottomNavigation`—A `BottomNavigation` without `themeColor` renders `k-bottom-nav-base` and `k-bottom-nav-flat-base` instead of `k-bottom-nav-primary` and `k-bottom-nav-flat-primary`. The `k-bottom-nav-info`, `k-bottom-nav-success`, `k-bottom-nav-warning`, `k-bottom-nav-error`, `k-bottom-nav-dark`, and `k-bottom-nav-light` classes, together with their `k-bottom-nav-flat-` and `k-bottom-nav-solid-` variants, are no longer rendered. * `Menu`—The expand arrow uses the `chevron-left`, `chevron-right`, `chevron-up`, and `chevron-down` icons (`k-i-chevron-*` and `k-svg-i-chevron-*`) instead of the `caret-alt-*` icons. * `PanelBar`—The accessibility markup of the items changed. * Before: The items render `aria-hidden` (`true` when collapsed), `aria-disabled` (also `"false"`), and `aria-expanded` (also `"false"` for items without content). * After: The items no longer render `aria-hidden`. The `aria-disabled` attribute is rendered only when the item is disabled. The `aria-expanded` attribute is rendered only when the item has content or sub-items. A collapsed item that has content and no sub-items keeps a hidden `div.k-panelbar-content` (`aria-hidden="true"`, `display: none`) in the DOM. * `Splitter`—The collapse buttons of the `SplitterBar` use the `chevron-left`, `chevron-right`, `chevron-up`, and `chevron-down` icons (`k-i-chevron-*` and `k-svg-i-chevron-*`) instead of the `caret-alt-*` icons. * `Stepper`—A valid `Step` uses the `check` SVG icon instead of `check-outline`. ## ListBox * `ListBoxToolbar`—The default tool icons changed from the caret icons to the chevron icons, in both the font and the SVG icon sets. * Before: The `moveUp`, `moveDown`, `transferTo`, `transferFrom`, `transferAllTo`, and `transferAllFrom` tools use `caret-alt-up`, `caret-alt-down`, `caret-alt-right`, `caret-alt-left`, `caret-double-alt-right`, and `caret-double-alt-left` (classes such as `k-i-caret-alt-up` and `k-svg-i-caret-alt-up`). In RTL, the right and left icons are swapped within the caret set. * After: The same tools use `chevron-up`, `chevron-down`, `chevron-right`, `chevron-left`, `chevron-double-right`, and `chevron-double-left` (classes such as `k-i-chevron-up` and `k-svg-i-chevron-up`). In RTL, the right and left icons are swapped within the chevron set. The remove tool still uses the `x` icon. ## Notification * `Notification`—The success type renders the `check` icon (`k-i-check`, `k-svg-i-check`) instead of `check-outline`, and the error type renders the `x` icon (`k-i-x`, `k-svg-i-x`) instead of `x-outline`. ## Popup * `Popup`—The Popup no longer renders its content through the `Slide` component of `@progress/kendo-vue-animation`. It renders the animation container markup itself and applies the `k-slide--enter` and `k-slide--exit` classes with CSS transitions. * Before: The markup is `
content
`. The `k-popup` element and the `k-child-animation-container` element are the same element, and a closed Popup renders nothing. Opening applies the `k-slide--appear` and `k-slide--appear-active` classes. * After: The markup is `
content
`. The `k-child-animation-container` element is now a wrapper around the `k-popup` element. Opening applies the `k-slide--enter` and `k-slide--enter-active` classes (the `appear` classes are no longer used), and closing applies the exit classes. The inline `transition-duration` is set only while an animation runs, and `k-animation-container-shown` is added after the enter animation completes. * A closed Popup renders a hidden `