# Migration to v6 > Track and review changes to the CoreUI for Vue.js components to help you migrate from v5 to v6. CoreUI for Vue is the Vue.js version of the CoreUI components library, so before reading this migration guide, please also check the [CoreUI 5 to 6 migration guide](https://coreui.io/bootstrap/docs/migration/v6/) — it covers the markup, class names, Sass architecture and design tokens this release is built on. This page covers what changes in the Vue API. ## Dependencies - Breaking **Popper is gone; positioning runs on [Floating UI](https://floating-ui.com/).** `@popperjs/core` is replaced by `@floating-ui/dom`. Update your lockfile — nothing else is required for the default configuration. - Breaking **`popperConfig` is now `floatingConfig`** on `CDropdown`, `CPopover` and `CTooltip`, and it takes a Floating UI [`ComputePositionConfig`](https://floating-ui.com/docs/computePosition#options) instead of a Popper one. The `popper` boolean prop stays and still switches static positioning. - Breaking **Positioned elements are stamped with `data-coreui-placement`**, not `data-popper-placement`. Custom CSS, tests or scripts keyed on the old attribute must be updated. The v6 stylesheet draws tooltip, popover and menu arrows from this attribute, so it is not optional. - Breaking **The exported composables are renamed**: `usePopper` → `useFloating`, `useDropdownWithPopper` → `useDropdownWithFloating`. ## New components - **`CCombobox`** — a `.form-control` toggle over a popup list box: the options are `CListBoxOption` children or an `items` array, the selection is single or multiple, the panel takes an optional search field with `searchNormalize`, and `name` submits the value through a hidden select that takes part in form validation. Ships with the `useCombobox()` composable. - **`CDateInput`, `CTimeInput`** — section fields: a masked, keyboard-first input where every part of the value (day, month, year, hour…) is its own editable section. `` carries the time too. The pickers are built on them, and they work standalone. - **`CDialog`** and **`CDrawer`** — the native-`` popup and side panel with the Bootstrap 6 look and the `dialog-*` / `drawer-*` classes. `CDialog` is a centered floating panel over a blurred backdrop with optional slide-in variants; `CDrawer` is a floating, inset, rounded panel with sheet, translucent, fit-content and fullscreen variants plus responsive breakpoints. `CDialog`'s `fullscreen` takes a breakpoint as well as `true`, like `CModal`'s. They share their behavior with `CModal` and `COffcanvas`, which keep the classic look and the v5 vocabulary — and one event vocabulary of their own: `show`, `close` and `close-prevented` on both, where the legacy pair says `hide`. **`CModal` and `COffcanvas` are deprecated and may be removed in v7** — prefer `CDialog` and `CDrawer` for new work. Pick one per surface; they are independent components. - **`CListBox`** — the ARIA listbox pattern as a component: single, multiple or no selection, sections, descriptions, link options, an empty state, typeahead and an `activeDescendant` mode that keeps the focus in your own input. Ships with `CListBoxOption`, `CListBoxSection`, `CListBoxEmpty`, the header parts (`CListBoxHeader`, `CListBoxSelectAll`, `CListBoxTitle`, `CListBoxSubtitle`) and the `useListBox()` composable. - **`CMenu`** — contextual overlays with submenus, container teleport, responsive placement and logical (`start`/`end`) placements. Ships with `CMenuToggle`, `CMenuContent`, `CMenuItem`, `CMenuHeader`, `CMenuDivider`, `CMenuText`, `CSubmenu` and the `useMenu()` composable. See the [Menu docs](https://coreui.io/vue/docs/components/menu/). - **`CNumberInput`** — a number field with a stepper you can hit, in place of the browser's own spinner (tiny in some engines, absent on iOS). `min`, `max` and `step` stay native. - **`CTransfer`** — two list boxes and four buttons that move values between them, with a select-all header and counter per list, an optional search, a one-way mode and an announcement of every move through `announce()`. Ships with the `useTransfer()` composable. ## Field components `CAutocomplete`, `CMultiSelect`, `CDatePicker`, `CDateRangePicker` and `CTimePicker` are built on one frame and one panel. These two changes apply to all five; the per-component sections below cover what is specific to each. - Breaking **A field component *is* the frame.** It carries `.form-control-group` on its own root instead of nesting one, so a field is a direct child of an `.input-group` like any other control and there is no wrapper level to reach through. Custom CSS written as `.date-picker .form-control-group` no longer matches anything. On the pickers, the label and the validation feedback also move out of the frame. The frame replaces the per-component shells: `.autocomplete-input-group`, `.form-multi-select-input-group` and their `-sm`/`-lg` variants are gone, the adornments are `.form-control-cleaner` / `.form-control-action` (replacing `.autocomplete-cleaner`, `.form-multi-select-cleaner`, `.autocomplete-indicator`, `.form-multi-select-indicator`), and the `size` prop puts `.form-control-sm` / `.form-control-lg` on the frame itself. - Breaking **The options/picker panel exists only while it is open.** It is built when the field opens and removed once the exit transition has played, so a closed field carries no panel markup at all — code that queried `.combobox-popup` or `.date-picker-popup` up front, or held a ref to it across a close, needs to look it up per open. ## Theme colors Breaking **`light` and `dark` are replaced by `inverse`.** They were theme colors named after a color scheme and neither followed one: `` stayed near-black on a near-black page. There are seven colors now — `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `inverse` — and the runtime validator lists them, so `color="dark"` and `color="light"` warn in the console instead of passing silently. - **`color="dark"` becomes `theme="inverse"`.** `inverse` resolves to gray-900 in light mode and gray-100 in dark, so it stands against the page in both. - **`color="light"` becomes `theme="secondary"`.** `secondary` is the light neutral now (gray-100 / gray-600) rather than the mid gray-blue `#6b7785`, so components already using it change appearance. - **Where the class was painting a plain panel** rather than naming a color, reach for `bg-4` or `bg-3`; where it was a fixed dark backdrop, set `data-coreui-theme="dark"` on the container. - Breaking **`color` on buttons is deprecated in favour of `theme`.** A v6 button is a shape plus a colour: `variant` picks the shape (`solid`, `outline`, `subtle`, `ghost`) and `theme` picks the colour. `color` renders the v5 spelling `btn-{color}`, which fuses the two and cannot inherit a colour from an ancestor; it still works and is removed in v7. `` becomes ``, and `` becomes ``. `color="link"` becomes the `link` property — a link button is a shape, not a colour, and it takes its colour from the link colour rather than from a theme. `color="transparent"` is gone with the `.btn-transparent` class it rendered — use `variant="ghost"`, which shows nothing but the button's content until hover and carries the base styling on its own. - Breaking **The theme colour tokens finish their rename.** `--cui-{color}-text-emphasis` is `--cui-{color}-fg-emphasis` and `--cui-{color}-border-subtle` is `--cui-{color}-border`, matching the slot names the components already read. Custom CSS naming the old tokens has to follow; the class names (`.text-primary-emphasis`, `.border-primary-subtle`) are unchanged. - Breaking **The bare theme colour tokens are gone.** `--cui-primary`, `--cui-secondary`, `--cui-success`, `--cui-info`, `--cui-warning`, `--cui-danger` and `--cui-inverse` no longer exist. A theme colour is its set of slots — `-base`, `-bg`, `-fg`, `-fg-emphasis`, `-bg-subtle`, `-bg-muted`, `-border`, `-focus-ring`, `-contrast` — and the colour itself is the `-base` slot: `--cui-primary-base` is what `--cui-primary` was, the 100–900 scale is mixed from it, and `-bg` (the action background) points at it. Rename reads one to one, in custom CSS and in the inline styles the examples use to retint a component: ```diff - + - :root { --cui-primary: #6f42c1; } + :root { --cui-primary-500: #6f42c1; } ``` No component prop is affected — `theme="primary"` is unchanged. - Breaking **The palette is the theme colours.** `$colors` holds `primary`, `success`, `info`, `warning`, `danger` and `gray`; the ten hues (`$blue` … `$cyan`) and every `--cui-{hue}` and `--cui-{hue}-{stop}` token are gone, as are `$secondary` and `$inverse`. Each `$theme-colors` entry points `base` and `bg` at its palette's `500` stop and the other slots at that scale; `secondary` reads `--cui-gray-200` and `inverse` `--cui-gray-900`. No palette token is bare: the literal sits in `-500`, so `--cui-gray-500` is what `--cui-gray` was, and `--cui-primary-500` is the runtime knob for the whole family: ```diff - :root { --cui-primary-base: #6f42c1; } + :root { --cui-primary-500: #6f42c1; } - + ``` - Breaking **Under a theme the theme wins over a component color token.** A component reads the `--cui-theme-*` slot on the property and its own token only as the fallback. In v5 the color came from the component's tokens, so a token you set on a colored alert applied; in v6 a token set on a themed component, or for the whole page in your CSS or a `$…-tokens` map, changes only the components without a theme. To recolor one themed component, set the slot instead: ``. - **Variants keep the component token as the override point.** Button variants, `variant="solid"` on an alert, `subtle` and `outline` on a badge, `subtle` on an avatar and `outline` on a chip map the component tokens to their own slots and paint from the tokens, so there a component token you set wins over the theme. Validation states win over a theme too. ## Surface ladder Breaking **The neutral surfaces are a numbered ladder.** `.bg-body-secondary`, `.bg-body-tertiary`, `.text-body-secondary` and `.text-body-tertiary` are deprecated in favor of ordinal names: `.bg-1` … `.bg-4` for surfaces and `.fg-body`, `.fg-1` … `.fg-4` for the text hierarchy, with two new rungs (`.bg-1`, `.bg-2`) between the body and the old surfaces. The deprecated names render identically and are removed in v7. The tokens moved with them — `--cui-bg-body`, `--cui-bg-1` … and `--cui-fg-body`, `--cui-fg-1` … are canonical, and `--cui-secondary-bg`, `--cui-tertiary-bg`, `--cui-secondary-color`, `--cui-tertiary-color`, `--cui-body-bg` and `--cui-body-color` remain as aliases until v7. No component prop is affected. The deprecated surface names sit two rungs lower than they first did: `.bg-body-secondary` renders `--cui-bg-3` and `.bg-body-tertiary` `--cui-bg-2`, the v5 stops one rung apart, while `.text-body-secondary` stays `--cui-fg-2` and `.text-body-tertiary` `--cui-fg-3` — tertiary text was the lighter of the two in v5 and still is. - Breaking **The ladder is three Sass maps, not a row of scalars.** `$theme-bgs`, `$theme-fgs` and `$theme-borders` replace `$bg-body`, `$bg-1` … `$bg-4`, `$fg-body`, `$fg-1` … `$fg-4`, `$border-subtle`, `$border-muted` and `$border-emphasized`. Each map lives in `scss/_theme.scss` in the `defaults()` shape, `:root` emits every entry as `--cui-bg-{key}`, `--cui-fg-{key}` or `--cui-border-{key}`, and the `.bg-*`, `.fg-*` and `.border-*` utilities are generated from the same maps. `$border-color` stays a scalar — it is the default every component reads, not a rung. Override an entry instead of a variable: ```diff - $bg-body: #000; - $fg-body: #111; + $theme-bgs: ("body": #000); + $theme-fgs: ("body": #111); ``` ## Sass options - Breaking **`$enable-important-utilities` is gone with the `!important` suffix.** Utilities are emitted in the last cascade layer, so they already beat every component and modifier without it, and no switch brings the suffix back. The one case it covered is your own **unlayered** CSS, which beats every layer: move that CSS into `@layer custom` and utilities win again. - Breaking **`$enable-negative-margins` is gone with the `.m*-n*` utilities.** Two negative inline steps ship unconditionally — `.me--1`, `.me--2`, `.ms--1` and `.ms--2` — from the `$negative-spacers` map; add a key there to extend the set. The block margins have no negative form. ## Breakpoints - Breaking **The `xxl` breakpoint prop is `2xl`, and the three largest breakpoints move.** `lg` is `1024px` (was 992), `xl` `1280px` (was 1200) and the top tier is `2xl` at `1536px` (was `xxl` at 1400); `sm` and `md` are unchanged. A prop whose name starts with a digit needs the shorthand or the colon form in a template — ``, `` — and a quoted key in an options object. | v5 | v6 | | --- | --- | | `` | `` | | `` | `` | | `` | `` | | `` | `` | | `v-c-placeholder="{ xxl: 4 }"` | `v-c-placeholder="{ '2xl': 4 }"` | | `` | `` | | ``, `` | `fullscreen="2xl"` | | ``, `` | `responsive="2xl"` | | ``, `` | `container="2xl"` | | `` | `expand="2xl"` | | `` | `layout="horizontal-2xl"` | | `` | `responsive="2xl"` | - **Responsive placement reads the new scale.** `placement="top 2xl:bottom"` on `CMenu`, `CPopover` and `CTooltip` replaces the `xxl:` prefix, and `lg:`/`xl:` switch at 1024px and 1280px. - **The exported `Breakpoints` type ends in `'2xl'`** instead of `'xxl'`. - **Size variants that spell `xxl` are not breakpoints and keep their name** — `CIcon`'s `size="xxl"` among them. ## Grid and sizing - Breaking **A denser spacing scale.** `$spacers` has thirteen steps, `0`–`12`: `.25 / .375 / .5 / .75 / 1 / 1.25 / 1.5 / 1.75 / 2 / 2.25 / 2.5 / 3 rem` from `1` (v5: `.25 / .5 / 1 / 1.5 / 3`). Every spacing, gap, space and gutter utility changes value under the same number, and so do the numeric `gutter`, `gutterX` and `gutterY` values of `CRow`; the v5 steps map to v6 as `1`→`1`, `2`→`3`, `3`→`5`, `4`→`7`, `5`→`12`. `p-3` becomes `p-5`, `mb-4` becomes `mb-7`, `` becomes a gutter of `5`. Components keep their size, cards aside (see `CCard`): their tokens read the stops that carry the v5 values. - **New: `.w-1` … `.w-12`**, one `$spacer` per step from the `$sizes` map, alongside the percentage widths — see the [width utilities](https://coreui.io/vue/docs/utilities/width/). - Breaking **`$grid-gutter-width` is `$grid-gutter-x`, and `$grid-gutter-y` joins it.** `make-row()` takes both (`make-row($gutter-x, $gutter-y)`) and writes them to `--cui-gutter-x` / `--cui-gutter-y`; the row gutter defaults to `0` as before, so nothing moves unless you set it. `$grid-gutter-width` stays as a deprecated alias of `$grid-gutter-x` until v7 — set the new name, the alias only reads. `CRow`'s `xs`/`sm`… gutter values follow the new spacing scale (see A denser spacing scale). ## Z-index - **New keys in `$zindex-levels`: `menu`, `drawer`, `dialog`**, on the same values as `dropdown`, `offcanvas` and `modal` (1000, 1045, 1055). Each emits a `--cui-z-*` token and a `.z-*` utility, and `CMenu`, `CDrawer` and `CDialog` read their own key instead of the legacy component's. The legacy keys stay; both spellings of a pair always resolve to one number. ## Typography - Breaking **`$font-sizes` sets a line height per stop instead of one value for all headings.** `xs` is 1.25, `sm` … `lg` the body leading (`--cui-body-line-height`, 1.5), `xl` 2.5⁄1.75, `2xl` 3⁄2.25, `3xl` 1.2, `4xl` and `5xl` 1.1, `6xl` 1 — the larger the type, the tighter the leading, and the small stops read at body leading instead of 1.2. The sizes are unchanged. Headings follow their stop through `--cui-line-height-*`: `h5` (`lg`) and `h4` (`xl`) get taller lines, `h1` (`4xl`) a tighter one. `$headings-line-height` still feeds `--cui-heading-line-height` for anything that reads it directly. ## Shadows - Breaking **Every shadow is a stack of two to four layers with a negative spread** instead of one wide blur: a tight layer for contact, wider ones for ambient light, each at 4–9 % alpha, so a card reads as lifted rather than smeared. `.shadow-xs` and `--cui-box-shadow-xs` are new (one thin layer). The inset shadow reads 8 % in the light scheme and 26 % in the dark one, and `--cui-shadow-strength` in the dark scheme is `2.4` (was 2.5). The knobs are unchanged: `--cui-shadow-color` and `--cui-shadow-strength` on `:root`, `.shadow-{color}` and `.shadow-opacity-*` on the element, `$shadows` in Sass — a custom entry is now a comma-separated list of layers. ## Components ### The `visible` family - **`visible` is deprecated in favour of `show` / `v-model:show`** on `CAlert`, `CDialog`, `CDrawer`, `CDropdown`, `CMenu`, `CModal`, `COffcanvas`, `CPopover`, `CSidebar`, `CToast` and `CTooltip`. The old prop was semi-controlled: it fed the internal state, but the component still closed itself, so the prop and reality desynchronized on the first Escape or backdrop click — a confirm-before-close dialog or a pinned tooltip could not be built on it. One prop now covers both needs: - `show` passed one-way seeds the starting state, and the component keeps managing itself from there. - `v-model:show` hands the state to your component. Close and trigger gestures (Escape, a backdrop or outside click, the dismiss button, hover, the autohide timer) then only emit `update:show`, and nothing moves until you flip the value. - `update:show` — emitted with the requested state either way. `visible` keeps its old behaviour unchanged, is ignored when `show` is set, and is removed in v7. - **`show` replaces `visible` on the purely controlled components too** — `CCollapse`, `CTabPane`, `CTabPanel` and `CBackdrop` take `show`, and `visible` stays as a deprecated alias that loses to it. These never owned their state, so nothing changes in behaviour; the library speaks one word for the same thing. - **`CSubmenu` takes `show` / `v-model:show`** in place of its `visible`, which was a seed the submenu silently overwrote on hover; a submenu can be controlled now. - **`CNavGroup` moves to `show` / `v-model:show`.** With a `v-model:show` (or a bare `@update:show` listener) the group renders what the prop says and the toggler only emits the request; without a listener a bare `show` is the default-open seed and nothing freezes. `visible`, `v-model:visible` and `update:visible` stay as deprecated aliases — `update:visible` keeps firing alongside `update:show` — and the `togglerContent` slot receives `{ show }` (with `visible` still present). ### Controlled value props Breaking **The value and state props are fully controlled when set** — the same contract the `visible` family moved to, applied to the props that hold a component's value. They used to be semi-controlled: the prop fed the internal state, but the component still wrote to it, so the prop and reality desynchronized on the first user interaction. Now the component renders exactly what you pass, an interaction only emits, and nothing moves until you feed the change back — a bare value prop without its listener freezes the control. Code that passed one as an initial value migrates to the new `default*` twin, which seeds the state once, on mount: | component | controlled prop | initial-value twin | | --- | --- | --- | | `CAutocomplete`, `CMultiSelect` | `value` | `defaultValue` | | `CButton` (toggle mode) | `active` | `defaultActive` | | `CChip` | `selected` | `defaultSelected` | Props that carry a real `v-model` binding need no twin, and none was added: `modelValue` on `CRangeSlider`, `CRating`, `CStepper` and `COneTimePassword`, `showPassword` on `CPasswordInput`, `openItemKeys` on `CAccordion`, `show` on the `visible` family, and `date` / `time` / `startDate` / `endDate` on the pickers and the date-time inputs all seed the starting state when passed one-way, and hand the state over only once you bind them with `v-model`. - **A bare `YYYY-MM-DD` string is read in the local timezone.** `Date.parse` treats it as UTC midnight, so `` landed on the 13th west of Greenwich and at the local offset east of it. Every Vue component that takes a date string is affected — `CCalendar`, `CDatePicker`, `CDateRangePicker`, `CDateInput`. The vanilla and React editions already read it this way, so this closes a divergence rather than opening one. - Breaking **The pickers and the date-time inputs drop their `default*` twins** — `defaultDate` on `CDatePicker` and `CDateInput`, `defaultTime` on `CTimePicker` and `CTimeInput`, `defaultStartDate` / `defaultEndDate` on `CDateRangePicker`, and `defaultValue` on `COneTimePassword`. Pass the value prop one-way instead: `` seeds the picker, which keeps managing itself. `CDateInput` and `CTimeInput` follow the same rule now — a one-way `date` / `time` no longer freezes the field; only a `v-model` binding hands the state over. - **`CAutocomplete`, `CMultiSelect`: the per-option `selected` flags are a seed**, ignored entirely when `value` or `defaultValue` is set, and they no longer re-apply on later renders of the same option. In `CAutocomplete` a flag applies once, when its option first appears. In `CMultiSelect` it applies only to the options the component starts with: options that arrive later never change the selection, and `resetSelectionOnOptionsChange` empties it and takes the marked options when the values change. With `value` set the reset only requests the empty selection through the `change` event. - **Form controls answer a native form reset the same way, bound ones included.** `CAutocomplete`, `CChipInput`, `CCombobox`, `CDateInput`, `CDatePicker`, `CDateRangeInput`, `CDateRangePicker`, `CFormRange`, `CMultiSelect`, `COneTimePassword`, `CRangeSlider`, `CRating`, `CTimeInput` and `CTimePicker` with a bound value used to keep it on a reset; they now ask for the value they started with through the events that report their value (`change` for `CAutocomplete` and `CMultiSelect`, `update:modelValue` for `CFormRange`, the update and change events for the rest) and show your value until you take it, so a page that resets its own state from the form's `reset` gets that request after its handler. A reset brings `CRating`, `CRangeSlider` and `CFormRange` back to the value they started with rather than the current prop, `COneTimePassword` emits `change` only when the reset changes the code, and `CStepper` keeps the validation marks of a form reset a listener cancels. - **`CButton`: a toggle button's `active` is controlled when set** — a click only emits `click` and the pressed state follows your prop; seed an uncontrolled toggle with `defaultActive`. Without either prop nothing changes. - **`CCalendar`: equal re-renders no longer reset the view.** A parent re-rendering with an equal `calendarDate`, `startDate` or `endDate` (a fresh `Date` object holding the same value) used to yank back the navigated month and cancel an in-progress range selection; only a real value change syncs now. Month names also follow `locale` and `monthFormat` changes at runtime. ### Validation state Deprecated **One `validation-state` prop replaces the `valid` and `invalid` booleans** on every form control, field and picker, and on `CFormFeedback`. `validation-state="invalid"` renders `is-invalid` and sets `aria-invalid` on the control, `"valid"` renders `is-valid`, and any custom state from the `$form-validation-states` Sass map renders `is-{state}` — two independent flags could neither express a third state nor refuse `valid` and `invalid` at once. On the components that had them in v5 the booleans keep working as deprecated aliases (with both set, `invalid` wins, where they used to stack), and are ignored whenever `validation-state` is set; `CCheckbox`, `CChipInput`, `CCombobox`, `CDateInput`, `CDateRangeInput`, `CNumberInput`, `CRadio`, `CSwitch` and `CTimeInput` take `validation-state` only. Four side effects worth knowing: - `feedback` follows the state: it renders only while `validation-state` is set, styled after it, and describes the control in every state, not only the invalid one. - Every control that reads `validation-state="invalid"` now sets `aria-invalid="true"`, except `CCombobox`, whose toggle is a button and takes only the message in `aria-describedby`; a control without a validation state still sets none. - Breaking `validation-state="invalid"` (or the deprecated `invalid`) blocks the submit on `CFormInput`, `CFormSelect`, `CFormTextarea`, `CNumberInput`, `CPasswordInput`, `CCheckbox`, `CRadio`, `CSwitch`, `CFormCheck` and `CFormSwitch`, with the text of the invalid feedback as the browser's message, the way it already did on the fields that build their own markup. Each control emits `update:validationState` with `undefined` when the user changes its value or the form is reset; bind it with `v-model:validation-state` (with the deprecated `invalid`, set it to `false` on that event instead), or a form you gave an invalid state stays blocked until you clear it yourself. See [Validation](https://coreui.io/vue/docs/forms/validation/#custom-validation). - Breaking `CMultiSelect`, `CChipInput`, `CCombobox`, `COneTimePassword`, the date and time fields, the pickers and `CAutocomplete` take and show their validation state the same way, described under [Form components](https://coreui.io/vue/docs/forms/validation/#form-components). A field a validation reports shows the state on the component's frame, and `` and `CStepper` leave the field that carries the value to the component. After taking the result over with `preventDefault()` in a `validate` listener, keep `event.isValid` rather than calling `checkValidity()`: the call reports every invalid field again, and the components then show their error. ### Help text and feedback ids **`text` and the feedback get ids of their own.** A form control used to hand its `aria-describedby` to the `text` and to the feedback as their id, so the help text and the error shared one id: the control read the help text and never the error, a valid control with `feedback-invalid` was described by the hidden error, and an `aria-describedby` that pointed at an element of the page gave that id to a second element. Now `text`, `feedback`, `feedback-invalid` and `feedback-valid` get generated ids, and the control lists them in its own `aria-describedby` after the one you pass: the text always, `feedback` while `validation-state` is set, `feedback-invalid` only while the control is invalid and `feedback-valid` only while it is valid, whether that state comes from `validation-state` or, in a `data-coreui-validate` form, from the browser's `:user-invalid` and `:user-valid` (the date and time fields and the pickers use the field's own verdict instead). A `validation-state` you set takes precedence. Pass `aria-describedby` only to point at elements of your own; a value you passed so that the `text` would carry it is no longer needed, and CSS or scripts that found the text by that id need another hook. `CFormControlWrapper` and `CFormControlValidation` replace their undocumented `describedby` prop with `description-id`, the prefix the ids are built from (`-label`, `-text`, `-feedback`, `-feedback-invalid` and `-feedback-valid`). ### CAccordion - Breaking **The accordion is built on the native `
` and `` elements.** `CAccordionItem` renders a `
` and `CAccordionHeader` its ``, so the browser owns opening, closing, keyboard interaction and the disclosure semantics — none of it depends on the component being mounted. - Breaking **`CAccordionButton` is removed**, together with `.accordion-button`, `.accordion-collapse` and `.collapsed`. The trigger is the `` itself and the panel is the element's own content, revealed through `::details-content`. `CAccordionHeader` already rendered the button for you, so markup written against the components needs no change; custom CSS keyed on those classes does. Style the open state with `.accordion-item[open] > .accordion-header`. - Breaking **`CAccordionHeader` renders a ``, not an `

`.** A `` is not a heading — where the accordion divides a page into sections, wrap the label in an `

`–`

` inside the header. The heading inherits the summary's typography, so nothing looks different. - **Grouping is the `name` attribute.** Without `alwaysOpen` the items of one accordion share a generated `name`, and the browser keeps a single one open. - Breaking **The open items follow the controlled / uncontrolled split the rest of the library uses.** `activeItemKey` fed the initial state, so it read like a controlled prop and behaved like a default: changing it after mount did nothing, and nothing reported back when the user opened an item. It is deprecated in favour of three props that say which is which: - `openItemKeys` passed one-way is the initial value, where `activeItemKey` maps — the accordion manages the open items from there. - `v-model:open-item-keys` hands them to your component, which then has to feed each `change` back. - `change` — emitted with the new list either way. They are named for what an accordion holds. `active` is the vocabulary of a selection — one item out of a set, which is what tabs have — while a `
` element is open or closed, and that is what `CAccordionItem` calls its own prop. All three take a single key as well as an array; an array only opens more than one item under `alwaysOpen`, since the HTML Standard forbids leaving more than one open item in a `name` group. - **New: `shown` / `hidden` events on `CAccordionItem`**, fired from the element's own `toggle` event — so they report the state whichever path opened the item, including the browser closing a sibling of the same `name`. - **The panel animation is CSS-driven** through `interpolate-size: allow-keywords`, which only Chromium implements today. Elsewhere the component measures the two sizes and the stylesheet times the move, exactly as `CCollapse` does; that part goes away, without a breaking change, once Firefox and Safari ship `calc-size()`. - **The indicator can be an element.** Put a node carrying `accordion-icon` in the header and it replaces the chevron the header draws for itself; a second one marked `accordion-icon-active` is swapped in while the item is open. - **New: `theme` on `CAccordion`** tints the open item. Closed items are untouched, so it marks what is expanded rather than recoloring the control. - Breaking **`CAccordionItem` takes `open`, and `visible` is deprecated.** The item renders a `
` element and that is what the attribute is called there, so the prop no longer carries a second word for the same state. It is also the controlled form for a single item, for the cases `openItemKeys` does not cover; `visible` keeps working. - **A collapsed item stays findable.** `
` keeps its content searchable and the browser expands the item on a find-in-page match, so the accordion needs no counterpart to `CCollapse`'s `hiddenUntilFound`. ### CAlert - **`dismissible` is no longer required to position a close button.** An alert makes room for a `` rendered as its direct child and positions it on its own. The prop keeps working and stays the way to get the built-in button. The button has to be a *direct* child to be pushed to the trailing edge — one nested in a wrapper is laid out by that wrapper. - Breaking **`color` applies `.theme-{color}`, not `.alert-{color}`.** The two emit a byte-identical block of `--cui-theme-*` declarations — the `.alert-*` names survive in v6 only as back-compat aliases, and every other themeable component reads the same class. Markup that still carries `.alert-success` renders exactly as it did; the component just stops generating the older spelling. - Breaking **`variant="solid"` renders `.alert-solid` alongside the theme class, not `bg-{color} text-white`.** The old pair hard-coded white text, which fails WCAG AA on five of the eight theme colors — 1.10 on `light`, where white on near-white is invisible. `.alert-solid` reads the theme's own contrast token, so every color lands above the threshold, including one you define yourself. The value also narrows to `'solid'`; v6 has no other alert variant. - Breaking **The alert lays its children out in a row.** It is `display: flex` with `--cui-alert-gap` between children, so an icon beside a label needs no `d-flex` and no spacing utility. Text mixed with inline elements is unaffected, but an alert built from **several block elements** — a heading, paragraphs, an `
` — now sits side by side. Wrap that content in a `.vstack`. - **An alert rendered with `transition` fades in when it is added to the page**, not only out when it is dismissed. Nothing to change; `@starting-style` supplies the state the animation was missing in that direction. - **An `
` inside an alert takes the alert's border color** rather than the page's neutral grey: the theme's border color, or `--cui-alert-border-color` without a theme, so a separator follows a border you recolored. With `variant="solid"` the border has the surface color, so the separator takes the theme's border color instead. - Breaking **The alert is rounded with `--cui-radius-7` (`.75rem`)**, like the dropdown, popover, toast, dialog, drawer and accordion; v5 used `.375rem`. Set `--cui-alert-border-radius: .375rem` to keep the v5 corners. - Breaking **`--cui-alert-border` is gone.** The border is written in the rule from `--cui-alert-border-width` and the border color, so that a theme can color it. Set those two instead, and `border-style` on the alert for a dashed or dotted line. - Breaking **`.alert-dismissible` is no longer rendered.** The class carries no styling in v6 — the close button is a flex item pushed to the end with `margin-inline-start: auto`, so the alert reserves no extra padding and needs no marker. The `dismissible` prop is unchanged and still renders the button and the self-dismiss behaviour; only the dead class is gone. CSS of your own that targeted it should target `.alert` or the button instead. ### CAutocomplete, CMultiSelect - **`loading` shows a row below the options instead of covering them.** The white cover with a spinner that sat over the options while `loading` was set is gone: the list is marked `aria-busy="true"`, a row with a spinner and the new `loadingLabel` text (`'Loading…'`) shows below the options and is announced to screen readers when the shown list starts loading or the list shows up loading, and the options it shows can still be picked with the pointer and the keyboard. - Breaking **The options list of both is a [``](https://coreui.io/vue/docs/components/list-box/)**, so the panel is built from `list-box-*` classes: `list-box`, `list-box-header`, `list-box-options`, `list-box-option` (+ `-indicator`, `-label`, `-description`), `list-box-section` (+ `-label`), `list-box-empty` and `list-box-select-all`, with the `selected`, `active` and `indeterminate` state classes. The `combobox-*` option classes and the former `autocomplete-dropdown` / `autocomplete-option(s)` and `form-multi-select-dropdown*` / `-options*` / `-option*` / `-all*` / `form-multi-selected` classes are gone, along with their Sass variables and CSS custom properties — theme the list through `--cui-list-box-*` and the panel around it through `--cui-combobox-*`. This markup is generated by the components, so only custom CSS targeting the menu internals needs updating. - Breaking **`role="listbox"` is on `.list-box-options`, not on the panel**, and a group is a `.list-box-section` rather than a label followed by loose siblings. In `CMultiSelect` the panel also holds the search field and the select-all button, which the old placement claimed as options. - Breaking **`selectAllStyle` and `optionsGroupsStyle` are removed** from `CMultiSelect`. One marker answers for the whole list: `indicator` reaches the options, the group labels and the select-all button alike. - **The `show` and `hide` events fire once per transition**, and neither fires on mount. `CMultiSelect` used to fire `hide` every time the menu opened. - Breaking **`CAutocomplete` keeps the selection and the typed text apart.** `value` and `defaultValue` take an option value, compared as text, so `1` and `'1'` select the same option; a string used to be matched against the labels. `:value="null"` selects nothing. `@change` reports an option or `null`, never typed text: text the user types without picking an option stays in the field and is posted under `name`. The text is a state of its own: `defaultInputValue` starts it, `v-model:input-value` controls it, and the new `update:inputValue` event reports every change, picks included, while `@input` reports the search the options are filtered by. Enter on text that names no option no longer reports it through `@change`. From `@change` store `option.value`, `option.label` for an option without a value, or the string of a plain string option. - **`CAutocomplete` shows the cleaner for typed text** when `allow-only-defined-options` is off, keeps it out of the Tab order, and leaves the focus in the field after a click. - Breaking **`CAutocomplete` keeps the focus in its input.** The arrows move a highlight the input reports through `aria-activedescendant` instead of moving the focus into the options, so the field keeps every keystroke — including Space, Home and End, which now belong to the caret. Options gain the `active` class while highlighted. - Breaking **`CMultiSelect` opens a dialog instead.** The panel is `role="dialog"` named by the control, and the focus moves into it: onto the search box when `search` is on, otherwise onto the option the list points at. Options take a roving `tabindex` and the arrows move the focus itself, so there is no `aria-activedescendant` to read any more. Tab cycles through the panel and the search box without leaving them, and Escape closes the panel and hands the focus back to the control. Shift + arrows, Shift + Home/End and Ctrl/Cmd + A extend or fill the selection, and the select-all button left the arrow order for the header, where Tab reaches it. - Breaking **`CMultiSelect`'s `search` no longer takes `'global'`.** Typing reaches the search box from anywhere in the component by default, which is what that value used to turn on, so `search="global"` becomes `search` and `:search="{ external: true, global: true }"` becomes `search="external"`. Set `:global-search="false"` to keep typing local: the search box then filters only while it has the focus, and a keystroke over the options list jumps to the first option starting with it (with `search="external"` it does nothing, since the list holds only the last results). - Breaking **`CMultiSelect`'s `search` no longer takes an object.** It takes `true`, `false` or `'external'`, so `:search="{ external: true }"` becomes `search="external"`. - Breaking **`CAutocomplete`'s `search` takes only `'external'`, and global typing is `globalSearch`, on by default.** `search="global"` goes away: typing on the picker button or in the options panel reaches the field without it. The object form goes too, so `:search="{ external: true, global: true }"` becomes `search="external"`. Set `:global-search="false"` to keep a keystroke where the focus is. The space bar and shortcuts with Ctrl or Cmd stay with the button that has the focus, a character typed with AltGr or Option reaches the field like any other, in `CMultiSelect` too, and typing in the field no longer moves the highlight to the first option that starts with the typed text. - **`CCombobox` and a `CListBox` given a text field as `activeDescendant` leave typing in the field to the field.** The list ran its typeahead on the same keys, so a letter typed in the search field also moved the highlight to the first option starting with it, and Enter picked that option. The highlight now moves only with the arrows and the filter. - **`CAutocomplete` and `CMultiSelect` read the typed text without the spaces around it**, in the filter, the highlight, the hint, Enter and leaving the field, and `CMultiSelect` creates an option from the trimmed text. A query of spaces lists every option. In `CMultiSelect` the search matches option labels only: a group whose own label matches no longer keeps all of its options, and a group without options is not listed. - **`CMultiSelect` blocks the submit while `validationState` is `'invalid'`**, and emits `update:validationState` with `undefined` when the user changes the selection or the form is reset, so `v-model:validation-state` drops the state. A native form reset now restores the selection given by `defaultValue` or the options' `selected`. See [Validation](https://coreui.io/vue/docs/forms/multi-select/#validation). - **`CAutocomplete` blocks the submit while `validationState` (or the deprecated `invalid`) is `'invalid'`**, and emits `update:validationState` with `undefined` when the user changes the text or the form is reset, so `v-model:validation-state` drops the state. The frame also shows the state a validation reports for the input, where it used to show only the state you gave. An `aria-invalid` attribute on the component is ignored; set `validation-state` instead. See [Validation](https://coreui.io/vue/docs/forms/autocomplete/#validation). - **Keyboard, `CAutocomplete`:** `ArrowDown` out of the input highlights the first *enabled* option, and `Escape` hands the focus back to the input. A closed field renders `aria-expanded="false"` instead of omitting the attribute. - Breaking **`CMultiSelect`'s search field no longer reaches the server.** The input that filters the options carried a `name` built from the field's own, and a plain text input is serialized, so every form holding a `CMultiSelect` submitted whatever the user had typed to narrow the list. It carries no `name` now and the `search…` key is gone from the payload. - Breaking **An unnamed `CMultiSelect` stays out of the form.** The native select took `name: props.name ?? uniqueId`, so a component the page had not named still submitted its value under a key nobody chose. The attribute is written only when `name` is given. - Breaking **An unnamed `CAutocomplete` stays out of the form too.** Its input took a generated `name` when the prop was not set, so a form carried a key nobody chose. It does not now. The generated `id` is unaffected. - Breaking **`CAutocomplete`'s typeahead hint no longer takes the field's `id`.** With `showHints`, the decorative hint input rendered the same `id` as the real one, so `document.getElementById`, a `label[for]` and the floating label association all resolved to the hint. It carries no `id` now. - Deprecated **CMultiSelect: `selection-type="tags"` is `"chips"`, and `aria-tag-delete-label` is `aria-chip-remove-label`.** The selection renders [chips](https://coreui.io/vue/docs/components/chip/), so the mode carries their name and `"chips"` is the default. `"tags"` renders the same until v7. The old label prop still names the remove button and takes precedence while it is set. - Breaking **CMultiSelect's classes drop the `form-` prefix**, so they carry the component's name like `.autocomplete`, `.chip-input` and `.date-picker`. There is no alias; update CSS that targets them. | v5 | v6 | | --- | --- | | `.form-multi-select` | `.multi-select` | | `.form-multi-select-selection`, `.form-multi-select-selection-tags` | `.multi-select-selection`, `.multi-select-selection-chips` | | `.form-multi-select-search`, `.form-multi-select-placeholder` | `.multi-select-search`, `.multi-select-placeholder` | | `--cui-form-multi-select-selection-tags-gap`, `-padding-y` | `--cui-multi-select-selection-chips-gap`, `-padding-y` | The filled state is `.multi-select-filled`, and the component stylesheet is `@coreui/coreui-pro/css/components/forms/multi-select.css`. - **CMultiSelect: Backspace in the empty search box focuses the last chip.** It removed the last value at once; the first press now moves the focus to the last chip and the second removes it, as in `CChipInput`. The arrow keys move between the search box and the chips, the selection is one tab stop, removing a focused chip moves the focus to its neighbour, and a value removed through a chip, Backspace or the cleaner is announced (`aria-removed-announcement`). A single select and the `counter` and `text` selections still remove the last value at once. ### CAvatar - Breaking **`text-color` is removed.** It wrote a single `fg-{value}` class, and the values it listed from v5 (`body-secondary`, `body-tertiary`, `*-emphasis`, `black-50`, `white-50`) had no rule in v6, so the text kept its inherited color. Put the color utility on the component instead: `class="fg-2"` for `body-secondary`, `fg-3` for `body-tertiary`, `fg-emphasis-primary` for `primary-emphasis`, `text-body-emphasis` for `body-emphasis`, `fg-white fg-50` and `fg-black fg-50` for `white-50` and `black-50`, and `fg-{color}` for a theme color. - Breaking **`color` applies a theme class, not a background utility.** It rendered `bg-{color}`, which left the letters on the inherited color and is why the docs paired it with a hand-picked `textColor` — a recipe that failed WCAG AA on five of the six examples they shipped. `.theme-*` supplies the background *and* the color that reads on it, so drop the `textColor` that went with it. A bare `` is a neutral circle instead of a transparent one. - **New: `variant="subtle"`** — a tinted avatar that keeps the theme color in the letters rather than behind them. - **New: `ariaStatusLabel`** names the status indicator, rendering `role="img"` with the label. The indicator is color and nothing else, so a state that carries meaning needs a name; `aria-label` on a bare `` has no role to attach to and may be ignored. Without the property the indicator stays decorative, as before. - **`size` takes `xs`** on `CAvatar` and `CAvatarStack`, alongside `sm`, `md`, `lg`, `xl` — the five sizes the stylesheet ships. - The custom properties behind the size moved: `--cui-avatar-width` / `-height` become `--cui-avatar-size`, and `--cui-avatar-status-width` / `-height` become `--cui-avatar-status-size`. Only inline overrides of those names need updating. ### CBadge - Breaking **`text-color` is removed.** It wrote a single `fg-{value}` class, and the values it listed from v5 (`body-secondary`, `body-tertiary`, `*-emphasis`, `black-50`, `white-50`) had no rule in v6, so the text kept its inherited color. Put the color utility on the component instead: `class="fg-2"` for `body-secondary`, `fg-3` for `body-tertiary`, `fg-emphasis-primary` for `primary-emphasis`, `text-body-emphasis` for `body-emphasis`, `fg-white fg-50` and `fg-black fg-50` for `white-50` and `black-50`, and `fg-{color}` for a theme color. - Breaking **`color` applies a theme class, not a background utility.** It rendered `bg-{color}`, which in v6 leaves the badge on the inherited text color instead of white — the `.badge-*` namespace carries the variants now, and the color comes from `.theme-*`. The prop is unchanged at the call site; only the class it emits moved. A bare `` is neutral rather than invisible, so a badge that relied on a utility for its background can drop it. - Breaking **`color` no longer takes a gradient.** v6 removes the `bg-*-gradient` utilities the value mapped to. - Breaking **`textBgColor` is gone.** It emitted `.text-bg-{color}`, which resolves to the same two values `color` now supplies through the theme class — `--cui-{color}-contrast` on the text and the colour itself behind it — so the two props had become one. Keeping it was also destructive: `.text-bg-*` ships in the `helpers` layer and writes `color` and `background-color` directly, over the tokens `.badge` reads, so pairing it with `variant="outline"` filled in the background the variant had cleared. Use `color`. - **New: `variant`** — `"subtle"` or `"outline"`, alongside the default solid. - **`size` also takes `"lg"`.** ### CBreadcrumb - Breaking **A step is a padded, hoverable target.** `CBreadcrumbItem` renders `.breadcrumb-link` on the link its `href` produces, and wraps an active step in a `` so every step keeps the same height. To keep the plain text link of v5, render your own link as a child instead of passing `href`. - **New: `CBreadcrumbDivider`** — a separator you put in the markup, carrying whatever you give it: an inline SVG, an icon, a character. An empty one renders the default divider. The automatic `::before` divider steps aside wherever an element is placed, so the two never double up, and the component marks itself `aria-hidden`. - **A step can open a menu.** Wrap the step's content in a `CMenu` whose `CMenuToggle` takes the new `custom` prop, and the toggle behaviour is wired onto your own `.breadcrumb-link` button instead of a `CButton`. ### CCalendar - **Changed.** **The range band sits under the day cells and follows the theme.** `--cui-calendar-cell-range-bg` is `--cui-primary-bg-subtle` (the theme's `bg-subtle` under a `.theme-*` class) instead of a 12.5% tint laid over the cells, so the selected start and end keep their solid fill and the day numbers are no longer tinted. A hovered day in the range takes `--cui-primary-bg-muted` (the theme's `bg-muted`), one step stronger than the band. - **Changed.** **`min-date` and `max-date` are compared by the day.** v5 compared a day cell at midnight with the instant, so a limit that carried a time of day, such as `:min-date="new Date()"`, disabled its own day. Now that day can be picked; the date picker's time selects and the field bound the time on it. - **Changed.** **A week row stands for the ISO week that holds most of its days.** With `first-day-of-week` other than `1` a row spans two ISO weeks, and v5 numbered it by its last day but picked the week of its first day: a Sunday-first row from August 30 to September 5, 2026 showed 36 and picked `2026W35`, and that value given back as `start-date` did not select the same row. The number, the picked value, the weeks of `start-date`, `end-date`, `min-date` and `max-date`, and the range and its preview now all follow the row's majority week, so that row is `2026W36` and the picked date is its Monday, August 31, the date `2026W36` stands for. With Tuesday to Thursday first, the numbers move instead, so the row from September 1 to 7 shows 36 where it showed 37. - **Changed.** **In week selection `disabled-dates` disables a week only when it disables every day of it**, as it does for a month, quarter or year. Before, a week was disabled when its row's first day was: with Monday first a single disabled Monday disabled its week, and with Sunday first a function that disables weekends disabled every row. A range of weeks across a week that holds a disabled day is kept, as a range of months is. - **Changed.** **In week selection `min-date` and `max-date` count as whole weeks**, so their weeks can be picked on any first day of the week, as the month, quarter or year of a limit can in those selections, and the months view opens a month only when its page holds a week inside them. Before, a `min-date` later than the first day of its row disabled that row, and with Tuesday to Thursday first a `max-date` of `2026W36` disabled the row of week 36. - Breaking **`start-date-change` and `end-date-change` receive the `Date` first**, the same shape the pickers use, and the value formatted per `selectionType` second — a `Date` for day selection but a string for week (`'2026W27'`), month (`'2026-01'`), quarter (`'2026Q1'`) and year (`'2026'`). v5 passed them the other way round. - Breaking **`selectAdjacementDays` and `showAdjacementDays` are spelled `selectAdjacentDays` and `showAdjacentDays`** on `CCalendar` and every picker built on it. The typo is fixed in the vanilla and React libraries in the same release. - Breaking **`date-hover` is gone** from `CCalendar`, `CDatePicker` and `CDateRangePicker`, as `cellHover` is from the vanilla calendar. It served the hover preview in the field, which went with `previewDateOnHover`. To follow the pointer or the focus over a `CCalendar`, listen for `mouseover` or `focusin` on an element that wraps it: each day, month, quarter and year cell the calendar shows carries its date in `data-coreui-date`, in the `toDateString()` form, and a week row carries it on the day cells it shows. Unlike the event, the listeners also see cells that cannot be picked, and only `mouseout` or `focusout` tells that the pointer or the focus left. The pickers have no replacement for it. - Breaking **Each grid is one tab stop, and `tabindex` no longer marks a selectable cell.** The arrows, `Home`, `End` and the page keys move within a calendar and Tab leaves it, which is what `role="grid"` promises. Every cell inside `minDate` / `maxDate` can take the focus, also one that cannot be picked: the keys stop on a date in `disabledDates` instead of skipping it, a screen reader announces it as unavailable, and Enter and Space do nothing there, so a month where nothing can be picked is explored like any other. A selectable day, month, quarter, year or week row carries `data-coreui-selectable`, and `tabindex="0"` sits on one cell per grid, so a two-month range picker keeps a stop in each month that reaches into the limits. Custom CSS or scripts that reached for `.calendar-cell[tabindex="0"]` need `.calendar-cell[data-coreui-selectable]`. - Breaking **`navigation` and `nav-year-first` are gone** from `CCalendar`, `CDatePicker` and `CDateRangePicker`. With `:navigation="false"` the month and year buttons stayed on screen but did nothing; the arrows are always there now. To hide them, hide `.calendar-nav-prev` and `.calendar-nav-next` in your CSS. The month and year buttons still open the months and years views; to keep the calendar on the month you set, hide `.calendar-nav` and give the month a heading of your own. The order of the year and the month follows the locale instead of `nav-year-first`: the year comes first in locales that write it first (for example Japanese, Chinese, Korean, Hungarian or Lithuanian). - Breaking **The navigation icon slots trade places in a right-to-left layout and render inside `.calendar-nav-icon`**, like the built-in chevrons. In right-to-left `#navPrevIcon` shows on the next button and `#navNextIcon` on the previous one, and the double slots likewise, so give the icons for a left-to-right page and drop any mirroring you did for right-to-left. `.calendar-nav-icon` is a 1rem box in the icon colour; a slot that renders text or a larger icon needs its own size on that class. - Breaking **The calendar's classes and data attributes are the vanilla calendar's.** A panel is `.calendar` without the view class (`days`, `months`, `quarters`, `years`) and carries its position in `data-coreui-calendar-index`; the view is named on the cell content instead (`.calendar-cell-inner.day`, `.month`, `.quarter`, `.year`), and quarter and year cells no longer carry `quarters` / `year`. The navigation buttons carry `btn-double-prev`, `btn-prev`, `btn-month`, `btn-year`, `btn-next` and `btn-double-next`, and `data-coreui-selectable` is empty instead of `"true"`, and a week row no longer carries `data-coreui-date`, which stays on its day cells. A rule that styled a panel by its view needs `.calendar:has(.calendar-cell-inner.month)` instead of `.calendar.months`, and one that styled `.calendar-cell.quarters` or `.calendar-cell.year` needs `.calendar-cell:has(> .calendar-cell-inner.quarter)` or `.year`, since the cell states (`selected`, `range`, `disabled`) stay on the cell. - Breaking **Setting `calendarDate` to `null` keeps the month on screen.** v5 moved the calendar back to today; to show today, pass today's date. - **New: `view-change`** fires when the calendar switches between the days, months, quarters and years views, and with the starting view each time the calendar mounts. - **The grid answers the full APG keyboard model.** On top of the arrows: `Home` / `End` move within the focused week, `Page Down` / `Page Up` move a month at a time (a year in the months and quarters views, the twelve years of a page in years), and `Shift` with either moves a year in the days view. A jump never lands outside `minDate` / `maxDate`: focus stops on the limit, also when that date cannot be picked. Every cell carries its own `data-coreui-date`. - **`selectionType="week"` is reachable from the keyboard.** The day cells take no focus in that mode because the row is what gets picked, and the row itself was not a tab stop — so the grid had none at all and week selection was mouse-only. The rows are tab stops now, and `Home` / `End` move to the first and last week of the month. - **Picking a date keeps the months on screen.** A picked day of an adjacent month (`selectAdjacentDays`) used to turn the calendar to that month; it now shows as selected with an outline on a subtle background instead of the solid fill. Without `calendarDate` the view follows a start date the parent changes to a new instant, the day already selected included (a Today button after browsing); it stays for the calendar's own picks passed back before the view moves and for the same instant passed again. - A selected day or week keeps its colour under the pointer, a shade darker (`--cui-calendar-cell-selected-hover-bg`, `--cui-calendar-cell-selected-hover-color`); it used to take the hover colour until the pointer left. - The range preview no longer stays on the date just picked, and in week selection it no longer drops while the pointer crosses a day of the adjacent month inside the row it previews. - In the years view the navigation names the page it shows, `2020 – 2031`, instead of the one year the page is built around, so turning a page is announced as the new range. The grid label and the navigation write the range in the locale's own digits. - In the years view the double arrows and `Page Down` / `Page Up` turn the calendar by the twelve years a page shows instead of ten, so a turn no longer repeats two years of the previous page. - In the years view the year button goes back to the view that picks the date instead of doing nothing, and it is disabled in year selection, where the years view is the one that picks. - Without `weekNumbersLabel` the week-number column is named for screen readers with the locale's word for week, in a visually hidden span; before, its header was empty. Each week number is named the same way with its number (`Week 36`), and the new `ariaWeekNumberLabel` prop takes a function of the week number to name it yourself. - Breaking **The years view names its double arrows with new `ariaNavNextYearsLabel` / `ariaNavPrevYearsLabel` props** (`'Next 12 years'` / `'Previous 12 years'`) instead of the year labels, which stay on the days, months and quarters views. A page that translates `ariaNavNextYearLabel` / `ariaNavPrevYearLabel` needs to translate these two as well. - **A grid in which nothing can be picked is described by the new `ariaNothingToPickLabel` prop** (`'Nothing on this page can be picked'`), also announced when the calendar turns to such a page, so a page that translates the other calendar labels translates this one too. - **A pick is announced through the new `ariaSelectedDateAnnouncement` and `ariaSelectedRangeAnnouncement` props** (`'Selected date: {date}'`, `'Selected range: {start} to {end}'`); before, picking a date with Enter left a screen reader silent. A page that translates the other calendar labels translates these two as well. - The toggle of `CDatePicker` and of `CDateRangePicker` is named with the value the picker holds (`Toggle calendar, Friday, August 14, 2026`), so a screen reader reads the picked date when the popup closes and focus goes back to it. - The month and year between the navigation arrows are no longer a live region. A page turn is announced through `announce()`, inside the panel of a date picker when the calendar sits in one, and a key that leaves a day or a week row names no page, since the date that takes focus names it: a key that moved from August 31 to September 1 used to be read twice, as the date and then as `September 2026`. - A locale whose own calendar has different months (Persian by default in `fa-IR`, or an Islamic, Hebrew or Chinese calendar asked for with `-u-ca-`) now shows the calendar in the Gregorian calendar, in its own language and digits. The grid was always Gregorian, so `fa-IR` used to show September 1, 2026 as the 10th of Shahrivar 1405 and name the January cell Dey. Calendars that share the Gregorian months, such as Thai Buddhist or Japanese, keep their year numbering in the calendar. The date field lays out and reads Gregorian numbers for every locale, without the locale's era. - The navigation writes the full year whatever `yearFormat` is, and `yearFormat` sets only the year cells of the years view. With `'2-digit'` the year button above September 2026 now reads `2026` instead of `26`. - Breaking **A cell drawn by the `dayCell` slot no longer gets an `aria-label`**, so its content is what a screen reader reads. Every cell slot receives the cell's full name as `label` (`Wednesday, August 12, 2026`, `August 2026`, `Q3 2026`, `2026`); put it in the cell, for example in a `visually-hidden` span next to a short visible label marked `aria-hidden="true"`. Day cells the calendar draws itself announce the full date with the weekday instead of the short numeric date (`8/12/2026`), which also leaves their `title` tooltip, and in week selection the row that takes focus is named by the days it spans (`August 10 – 16, 2026`), after its week number when week numbers are shown (`Week 33, August 10 – 16, 2026`), instead of reading out all seven. - In day selection the `dayCell` slot receives `isInRange: false` for a day among an adjacent month's days that only fills the grid, which the range is not drawn on, as it already did for `isToday`. With `selectAdjacentDays` the range and its hover preview are now drawn on the adjacent month's days as well, and `isInRange` stays `true` for them. - A cell that cannot be picked carries `aria-disabled="true"`: a day outside `minDate` / `maxDate` or in `disabledDates`, a week row, month, quarter or year outside the range, and in day selection a day among an adjacent month's days unless `selectAdjacentDays` is on. Such an adjacent day is no longer `aria-selected` either, and the `dayCell` slot gets `isDisabled: true` and `isSelected: false` for it, so the copy of a picked date that fills the next panel reads as unavailable filler. - With `range`, the grid of the view that picks the range is `aria-multiselectable`, and every day, week row, month, quarter or year of the selected range that can be picked carries `aria-selected="true"`, not only its two ends, so a screen reader announces the ones in between as selected. The months and years views of a day range only navigate and keep it on the ends, and `isSelected` still marks only the ends. - In week selection, the `#dayCell` slot gets the `isDisabled`, `isInRange` and `isSelected` of the day's week row, the way the calendar draws it: every day of a selected week is `isSelected`, every day of a week in the range is `isInRange`, and a day is `isDisabled` only when its row cannot be picked. Before, each field described the day alone, so a selected week reported only the day holding its start or end date as selected. - A year below 100 stays as written: a calendar on December of year 99 draws the days of year 99, where it drew 1999, and its next panel shows January of year 100, where it showed January 2000. The month, quarter and year views, the arrow keys and paging keep the year the same way. Years before 1 cannot be picked, as dates before `minDate` cannot: their cells are disabled, and the arrow keys and paging stop at 1 January of year 1. - A year string written in four digits keeps its year: `0026-05`, `0026W05`, `0026Q2`, `0026` and `12/31/0099` given to the calendar or a picker stand for the years 26 and 99, where they became 2026 and 1999. Two digits still expand to the century within 50 years of today. The value reported for week, month, quarter and year selection writes the year in at least four digits (`0026-05`, where it was `26-05`), so it reads back as the same year. ### CCallout - **New: `theme`.** It sets the color context and renders a `.theme-*` class, so the callout also picks up a theme class placed on any element above it. The class colors the leading edge and tints the border. - Deprecated **`color` still works and is removed in v7.** It renders the same `.theme-{color}` class as `theme` and loses to `theme` when both are set, so the modifier classes the component used to emit (`.callout-{color}`) are gone from its output. - **A callout without a color no longer draws its leading edge in `currentColor`.** The class read a custom property that only the color modifiers declared, so on a bare `` the declaration was invalid and the property fell back to its initial value. It now defaults to the callout's own border color. - **The 1px border of a colored callout is tinted** instead of staying neutral. The leading edge is unchanged. ### Deprecated color classes - **`$enable-deprecated-classes` drops the v5 color modifiers from the CSS build.** It defaults to `true`, so nothing changes unless you set it. Set it to `false` once your markup uses the theme classes and `.alert-{color}`, `.btn-{color}`, `.btn-outline-{color}`, `.btn-ghost-{color}`, `.callout-{color}`, `.chip-{color}` and `.list-group-item-{color}` leave the stylesheet. The components render theme classes now, so none of them emit those spellings — the flag only affects markup you wrote by hand. They are removed outright in v7. ### CCard - Breaking **`text-color` is removed.** It wrote a single `fg-{value}` class, and the values it listed from v5 (`body-secondary`, `body-tertiary`, `*-emphasis`, `black-50`, `white-50`) had no rule in v6, so the text kept its inherited color. Put the color utility on the component instead: `class="fg-2"` for `body-secondary`, `fg-3` for `body-tertiary`, `fg-emphasis-primary` for `primary-emphasis`, `text-body-emphasis` for `body-emphasis`, `fg-white fg-50` and `fg-black fg-50` for `white-50` and `black-50`, and `fg-{color}` for a theme color. - Breaking **A card is roomier, rounder and framed in the solid border colour.** `--cui-card-spacer-y` / `-x` go from `1rem` to `--cui-spacer-6` (`1.25rem`) and the image-overlay padding follows them. `CCardHeader`, `CCardFooter` and a `CListGroup` placed directly in the card take `--cui-card-spacer-x` as their inline padding, so their text lines up with the body; the header and footer keep `.5rem` of block padding. The border reads `--cui-border-color` instead of `--cui-border-color-translucent`, except on a `translucent` card, and the radius is `--cui-radius-7` (`.75rem`; v5 used `.375rem`). A card filled with `textBgColor` or `color` keeps that neutral frame; add the matching `border-` class to frame it in the fill colour. To keep the v5 look, set `--cui-card-spacer-y` and `-x` to `var(--cui-spacer-5)` and `--cui-card-border-radius` to `.375rem` on the card. - Breaking **`CCardLink` is removed.** `.card-link` is gone from v6 — it existed to space sibling links with an inline margin, which only worked while they were inline, and `.card-body` is a flex column with `--cui-card-body-gap` now. Wrap the links yourself: `
`. - Breaking **`.card-body` is a flex column.** It spaces its children with `--cui-card-body-gap` and zeroes their block margins, so nothing in a card needs `.mb-*` any more. Two consequences for existing markup: a direct child takes its natural width rather than filling the card — add `.w-100` where a block child has to stretch — and `text-align` no longer moves a button or a link, because they are flex items. Use `.mx-auto` or `.ms-auto` instead. - **Stacked sections are divided by a single rule.** A ``, a list group or a bottom image that follows a top image, a body or a list group draws a divider above itself in the card's own border, so two bodies in a row, or an image above a body, no longer sit with nothing between them, and a border utility or a theme on the card carries over to every divider. A section hidden with `hidden` or `.d-none` does not count. `` and `` draw their own divider, as before. - **`` squares the corners at each seam along the writing direction.** The rules named the physical corners, so a right-to-left group squared its outer corners and rounded the ones that meet. A list group at the edge of a grouped card is squared like the other sections. - Breaking **`color` no longer takes a gradient.** v6 removes the `bg-*-gradient` utilities the value mapped to. Reach for `.bg-gradient` alongside the color if you want the sheen. - **Gradient bars.** `--cui-progress-bar-bg-image` paints the bar with an image over its colour, so a gradient is one variable in `style`; stripes layer over it and have their own `--cui-progress-bar-stripes` and `--cui-progress-bar-stripe-color`. - **`segmented` and `segments` on `CProgress`.** The track becomes a row of rounded segments — `--cui-progress-segment-min-width` wide and `--cui-progress-segment-gap` apart, or at most `segments` of them — and the bar fills whole segments only, recounted as the track resizes. Corners come from `--cui-progress-segment-border-radius`. - Breaking **`.card-header-pills` is gone.** It pulled the pill row out to the header's padding edge, which is wrong for pills — they carry their own background, so flush against the inner edge they touch the border. Drop the class from ``. - Breaking **`` attaches from a container query, not a media query.** The `sm` breakpoint is the width of the nearest query container, not the viewport. Mark an ancestor with `.contains-inline`; without a container the query has nothing to read and the cards stay stacked at every width. The same applies to `` with `layout="horizontal-*"`. - **New: `theme`** paints the card's frame and caps with a theme color, with contrast text in the header and footer; the body keeps the card background. It is a different axis from `color`, which still applies the `bg-{color}` utility across the whole surface, and from `textBgColor`. Put the class on a single section — `` — and only that section follows it. - **New: `variant="subtle"`** swaps the solid fill for the theme's subtle background and border, and **new: `translucent`** blurs whatever is behind the card and thins the caps to match. They are independent — `.card-subtle` and `.card-translucent` combine — which is why `translucent` is a boolean of its own and not a second `variant` value. - **New: `layout="row"`** lays a card out along the inline axis, with `` for an image cap on either side. It replaces the `` + `` recipe, which needed a wrapper per section and drew no divider between them. ### CCarousel - Breaking **The carousel runs on native CSS scroll snapping.** The track is a scroll container, so dragging, swiping, momentum and trackpad scrolling come from the browser; the component layers on the controls, indicators, autoplay and active-slide tracking. There is no `.slide` class any more, and programmatic navigation animates the scroll position instead of translating slides. - Breaking **`index` is renamed to `activeIndex`**, and the carousel now follows post-mount changes — updating the prop slides to the new index. - Breaking **`touch` and `wrap` are gone.** Touch gestures are the scroll container's own, and `ends` supersedes `wrap`: `'loop'` (default) continues seamlessly where the layout allows, `'wrap'` jumps to the other end, `'stop'` disables the matching control at each end. - Breaking **`CCarouselItem` drops `direction`** — the scroll position, not a per-slide class, decides how a slide enters. - **New**: `autoplay` (turns off for good once the user interacts), `playPause` with `pauseLabel` / `playLabel` (WCAG 2.2.2), `keyboard`, `center`, `variableWidth`, and the `--cui-carousel-items` / `-gap` / `-peek` custom properties for multi-item layouts. ### CChip, CChipSet, CChipInput - Breaking **`CChipInput` carries its chips in a hidden `