Changelog

Release Summary — 2026-09-17

This release modernizes tile content structure and adds reusable list-item patterns for clearer, more flexible layouts. It also improves responsive media, select-picker behavior, and form hint accessibility, helping teams build more robust experiences across screen sizes and assistive technologies.

Changed

@volvo-cars/react-forms@2.0.2: Hints now render in a div, allowing paragraphs and Markdown without invalid HTML nesting while preserving typography, spacing, wrapping, and aria-describedby associations. Custom selectors targeting the previous p element may need updating; use the hint prop for rich content

Fixed

@volvo-cars/react-forms@2.0.2: Radio options now expose their hints through aria-describedby while preserving consumer-provided description references
@volvo-cars/react-forms@2.0.2: Fixed custom selects reopening when an open field is tapped on touch devices, preserved focus and scroll position when dismissing the picker, synchronized reset values, and improved long-value truncation after hydration

Breaking Changes

@volvo-cars/css@3.0.0: Tile titles now use slot="title" and supporting text uses slot="body", with direct-child slot requirements, underlined titles, updated text layout, and new media sizing behavior. Media tiles are transparent by default; use data-variant="framed" for the secondary background and 16px outer padding
- Migration Path: Rename linked labels from slot="body" to slot="title", make title and body slots direct children, and move optional supporting text to slot="body". For framed media tiles, add data-variant="framed"; use an aspect-ratio utility on slot="media" to control image proportions. Add bg-secondary to the media slot when only the image needs a backdrop, and review custom --background-color, image-fit, alignment, wrapping, and height overrides
- Before: <span slot="body">Explore the Volvo EX30</span>
- After: <a class="media-tile" data-variant="framed"><div slot="media"><img class="img" src="ex30.avif" alt="" /></div><span slot="title">Explore the Volvo EX30</span><p slot="body">Compact electric SUV</p></a>
@volvo-cars/css@3.0.0: Added list-item and navigation-list-item patterns with slot-based layouts, full-row link states, direction-aware chevrons, and updated image sizing
- Migration Path: Replace custom list-item markup with the new slot-based patterns and review image dimensions, link-state styling, and right-to-left layouts
- Before: “
- After: “
@volvo-cars/css@3.0.0: Media tiles now support data-variant="framed", respect reduced-motion preferences by disabling image hover zoom, and use updated underline and touch pressed-state feedback without legacy color-mix() background fallbacks
- Migration Path: Add data-variant="framed" where media tiles need a secondary background. Review custom hover, pressed, image-zoom, and fallback styles against the updated defaults
- Before: “
- After: “
@volvo-cars/css@3.0.0: Media heroes now contract to the capped text frame at ultra-wide viewport widths, and tile title descriptions use the primary foreground token
- Migration Path: Review ultra-wide media hero layouts and any custom title-description color overrides
- Before: “
- After: “
@volvo-cars/css@3.0.0: Improved the custom select bottom sheet so it stays anchored to the viewport while scrolling, extends its scrim across contained layouts, wraps long option labels, and truncates long selected values without shrinking the chevron
- Migration Path: No markup changes are required. Review custom positioning, scrim, option-label wrapping, and selected-value styles, especially when using a native <button><selectedcontent></selectedcontent></button> as the first select child
- Before: “
- After: “

Release Summary — 2026-09-11

This release delivers the CSS 3.0 update, with new list patterns and a redesigned tile API that improves content structure, interaction feedback, and responsive media handling. It also strengthens select behaviour on touch devices and improves form hint semantics and radio descriptions for assistive technology users.

Added

@volvo-cars/css@3.0.0: Added list-item and navigation-list-item CSS patterns with slot-based layouts, full-row link states, and direction-aware chevrons

Changed

@volvo-cars/css@3.0.0: Updated tile text slots, layout, alignment, wrapping, and interaction feedback. Titles now use slot="title" and are underlined by default, while slot="body" is reserved for optional supporting text. Media tiles are transparent by default; use data-variant="framed" for a secondary background and 16px outer padding. Images now fill the media slot, and reduced-motion users no longer receive image hover zoom
@volvo-cars/css@3.0.0: Improved custom select presentation on touch devices by keeping the picker and scrim anchored to the viewport, wrapping long options, and truncating long selected values without shrinking the chevron

Fixed

@volvo-cars/css@3.0.0: Fixed media hero sizing at ultra-wide viewport widths so media contracts to the capped text frame
@volvo-cars/react-forms@2.0.2: Rendered form hints in a div so they can contain paragraphs and Markdown without invalid HTML nesting, while preserving typography, spacing, wrapping, and aria-describedby associations
@volvo-cars/react-forms@2.0.2: Associated each Radio with its hint through aria-describedby while preserving consumer-provided description references
@volvo-cars/react-forms@2.0.2: Fixed custom Select reopening on touch devices, preserved focus and scroll position when dismissing the picker, synchronized selected values after form resets, and added native selected-value support after hydration

Breaking Changes

@volvo-cars/css@3.0.0: Tile markup and media-tile defaults have changed. Linked labels must use slot="title"; slot="body" is now for optional supporting text, and both slots must be direct children of the tile. Media tiles no longer provide a secondary background by default, and media slot backgrounds and custom --background-color handling have changed
- Migration Path: Rename linked labels from slot="body" to slot="title", make title and body content direct children of the tile, and use slot="body" only for supporting text. For media tiles that should retain the previous secondary background, add data-variant="framed". Set an aspect-ratio utility on slot="media" to control image proportions, and add bg-secondary to that slot when only the image needs a backdrop. Review custom image-fit, alignment, wrapping, height, and --background-color overrides. See the tile documentation for complete examples.
- Before: <span slot="body">Explore the Volvo EX30</span>
- After: <span slot="title">Explore the Volvo EX30</span>
```
<a href="/cars/ex30-electric/" class="media-tile" data-variant="framed">
  <div slot="media">
    <img class="img" src="ex30.avif" alt="" />
  </div>
  <span slot="title">Explore the Volvo EX30</span>
  <p slot="body">Compact electric SUV</p>
</a>
```

Release Summary — 2026-08-06

A small follow-up release that corrects select icon placement in floating-label inputs and right-to-left layouts, and brings the CSS ESLint plugin up to ESLint 10.

Changed

@volvo-cars/eslint-plugin-css@1.1.0: Updated the plugin to ESLint 10.8.0. Projects using this plugin should upgrade their ESLint installation to a matching 10.x version

Fixed

@volvo-cars/css@2.5.1: Fixed the select icon being positioned incorrectly inside floating-label inputs and in right-to-left layouts

Release Summary — 2026-08-03

A broad quality release covering new layout utilities, theme-aware shapes across select and calendar controls, and a repository-wide typing and dependency clean-up. @volvo-cars/react-icons ships a major version that makes deprecated icon conversion fail loudly instead of silently producing invalid props. Most packages also gained accurate direct dependency declarations, which resolves install and type-resolution problems for consumers using strict package managers.

Added

@volvo-cars/css@2.5.0: Added layout and text utilities that teams were repeatedly hand-rolling: grid-cols-1 to reset a grid to a single column at a breakpoint, col-span-1 through col-span-4 and col-span-full for spanning grid tracks, flex-1 and flex-none for the flex shorthand, items-baseline, inline-flex and inline-grid, h-auto and w-auto to release a size set at a smaller breakpoint, and whitespace-pre. All except whitespace-pre support the md:, lg: and xl: prefixes
@volvo-cars/react-utils@1.4.0: Added a setRef export for assigning both callback and object refs, so components can forward refs without duplicating the assignment logic
@volvo-cars/react-calendar@0.5.3: Added an accessible header to the week-number column, so screen reader users can identify the column

Changed

@volvo-cars/react-select@0.5.7 and @volvo-cars/react-calendar@0.5.3: Select triggers, popovers, and the calendar month and year controls now use the theme-aware shape-default utility, so corner shapes follow the active theme. rounded is retained as a fallback for supported CSS 1.x consumers
@volvo-cars/react-forms@2.0.1: The double-range slider label props are now optional in TypeScript, matching their existing runtime defaults. Existing code keeps working, but the props no longer have to be passed just to satisfy the type checker
@volvo-cars/react-headless@0.25.1: Dialog callbacks are now typed as safe to invoke when detached from the hook result, and the supported hint popover behaviour is now expressed in TypeScript
@volvo-cars/edls-cli@0.3.1: Removed the stale executable entry for a deleted CLI and updated the package description to reflect the remaining Material UI migration codemods

Fixed

@volvo-cars/css@2.5.0: Fixed cssMerge failing to merge flex-grow-0 and flex-shrink-0. The class group patterns double-escaped the digit matcher, so only a literal \d matched and numeric variants were left unmerged
@volvo-cars/css@2.5.0: Restored the generated styles_lg.css file so the existing public export keeps resolving after clean package builds, restored the slide-in-from-bottom animation utility, corrected the utilities export, and made CSS builds wait for hashed assets to finish copying
@volvo-cars/react-layout-utils@0.7.7: Stabilized useElementDimensions measurements across rerenders and throttled change notifications, and stale callbacks are now cancelled on cleanup. This removes redundant re-renders in layouts that observe element size
@volvo-cars/react-select@0.5.7: Made modal calendar focus entry, focus trapping, and trigger-focus restoration deterministic, including in WebKit browsers
@volvo-cars/react-table@0.3.1: Kept pagination select chevrons inside their reserved end padding, correcting the pagination control layout
@volvo-cars/react-accordion@2.3.22: The stepped accordion now forwards style props to the underlying details element
@volvo-cars/eslint-plugin-css@1.0.2: Fixed deprecated-class autofixes corrupting the result when the class occurs in the middle of a template literal, and published the ESTree type dependencies referenced by the shipped plugin files
Dependency declarations across packages: @volvo-cars/react-calendar, @volvo-cars/react-forms, @volvo-cars/react-select and @volvo-cars/react-table now declare the dependencies they actually use at runtime and in their public type surface — react-aria, @react-types/shared, @volvo-cars/react-utils and @tanstack/table-core. This fixes missing-module and unresolved-type errors under strict or isolated package managers

Breaking Changes

@volvo-cars/react-icons@4.0.0: getIconPropsFromDeprecatedIconType now validates its input instead of silently producing invalid props. An unrecognized deprecated icon name or an unsupported size throws a TypeError, and calling it with undefined returns a partial props object that is typed as partial rather than being cast to a complete IconProps.
- Migration Path: This only affects code still converting legacy 0.x category-name-size icon strings. Make sure every value you pass maps to a supported icon and one of the supported sizes (12, 16, 24, 32, 40, 48, 64 or 80 for Icon; 16, 24, 32 or 40 for BrandedIcon). If values come from CMS content or another untrusted source, wrap the call and fall back rather than letting it throw. Where the input can be undefined, the returned props are now partial, so handle a missing icon before spreading into Icon.
- Before: <Icon {...getIconPropsFromDeprecatedIconType(maybeType)} />
- After: const props = maybeType ? getIconPropsFromDeprecatedIconType(maybeType) : undefined; then props?.icon ? <Icon icon={props.icon} size={props.size} filled={props.filled} /> : null

Release Summary — 2026-07-27

A small visual release that changes how the custom select picker is presented on small screens.

Changed

@volvo-cars/css@2.4.1: The custom select picker is now positioned as a bottom sheet, making the options easier to reach on touch devices

Release Summary — 2026-06-23

This release introduces the MessageBar component for inline messaging, reworks popover anchoring for better scroll performance, and improves native select styling in Chromium browsers. Popovers can now match the width of the element they are anchored to, and dialogs and sheets adapt better to small screens.

Added

@volvo-cars/react-messages@0.5.0 and @volvo-cars/css@2.4.0: Added a new MessageBar React component wrapping the .message-bar CSS class, with an animation when the message is dismissed
@volvo-cars/react-headless@0.25.0: Added matchReferenceWidth to the anchored popover, so a popover can size itself to the element it is anchored to — useful for select and combobox menus
@volvo-cars/css@2.4.0: Added a trim-cap utility class that applies text-box: trim-both cap alphabetic, removing the leading and trailing space around text so glyphs align flush with the text box

Changed

@volvo-cars/css@2.4.0: Native select elements are now styled in Chromium-based browsers, bringing them closer to the rest of the form controls
@volvo-cars/react-headless@0.25.0: Anchored popovers are now positioned with absolute instead of fixed, noticeably improving scroll performance on pages with open popovers
@volvo-cars/css@2.4.0: Dialogs and sheets now use min-width: 100% on small screens for more predictable responsive layouts
@volvo-cars/react-headless@0.25.0, @volvo-cars/react-messages@0.5.0 and @volvo-cars/react-table@0.3.0: Popover hooks now use a composed ref, so consumer-supplied refs are preserved alongside the internal one. Components built on these hooks were updated to match

Fixed

@volvo-cars/css@2.4.0: Fixed the icon SVG not being clipped correctly inside select controls

Removed

@volvo-cars/css@2.4.0: Removed legacy @supports fallbacks for multi-keyword display values, now that browser support is sufficient

Release Summary — 2026-06-09

This release introduces two new hero block CSS components for full-width page layouts, refreshes typography tokens and the title-page component, and ships a major version of @volvo-cars/react-forms with a significantly cleaner API. The react-forms 2.0 update removes deprecated props, centralizes locale management through LocaleProvider, and makes top-label the default label variant for form inputs. Teams upgrading @volvo-cars/react-forms should review the breaking changes and migration paths below before upgrading.

Added

@volvo-cars/css@2.3.0: Added new text-hero and media-hero CSS components for building full-width page-level hero blocks with slot-based content areas
@volvo-cars/react-icons@3.3.6: Updated icon set to version 20260604.1, adding five new or updated icons: Lightning Bolt Circled Forward, Lightning Bolt Drop, Speedo Enclosed, Star Lines, and Warning Speedo Slashed

Changed

@volvo-cars/css@2.3.0: Updated typography tokens to better align with the larger Statement type sizes
@volvo-cars/css@2.3.0: Refreshed title-page component typography for improved visual consistency

Fixed

@volvo-cars/css@2.3.0: Fixed dialog-small close-button spacing by scoping it to direct children only, preventing layout regressions in existing header-slot usage

Removed

@volvo-cars/css@2.3.0: Removed the deprecated heading-3 typography tokens, which had been deprecated and removed from the design system

Breaking Changes

@volvo-cars/react-forms@2.0.0: top-label is now the default label variant for all form inputs that previously supported both top-label and floating-label. The Safari-specific workaround for showPicker in DateInput has also been removed along with deprecated type exports.
- Migration Path: If you relied on floating-label as the default behavior, explicitly add variant="floating-label" to your form inputs. Update imports of removed deprecated type exports with Controlled* or Uncontrolled* prefixes.
- Before: <TextInput label="Name" /> (defaulted to floating-label)
- After: <TextInput label="Name" variant="floating-label" /> (add variant to restore the previous default)
@volvo-cars/react-forms@2.0.0: Removed the deprecated isValid prop from Checkbox, RadioGroup, Select, TextArea, and TextInput. Use errorMessage or aria-invalid to indicate invalid state instead.
- Migration Path: Replace isValid={false} with errorMessage="..." for a visible error message, or aria-invalid={true} to signal invalidity without a visible message.
- Before: <TextInput isValid={false} />
- After: <TextInput aria-invalid={true} errorMessage="This field is required" />
@volvo-cars/react-forms@2.0.0: Removed all locale-related props from form components in favor of LocaleProvider. All locale strings must now be provided by wrapping component trees with LocaleProvider from @volvo-cars/react-locale-provider.
- Migration Path: Remove locale props passed directly to individual form components and wrap the relevant subtree with a LocaleProvider.
- Before: <TextInput locale="en" />
- After: <LocaleProvider locale="en"><TextInput /></LocaleProvider>
@volvo-cars/react-forms@2.0.0: The Select component now requires a LocaleProvider ancestor in order to display the default “Select…” placeholder string instead of falling back to the component label.
- Migration Path: Ensure a LocaleProvider is present in the ancestor tree of any Select component that relies on the default placeholder.
- Before: <Select /> (rendered “Select…” without LocaleProvider)
- After: <LocaleProvider locale="en"><Select /></LocaleProvider>

Release Summary. 2026-06-02

This release brings new utility hooks to @volvo-cars/react-utils, improved keyboard accessibility for the Reel component, and an automatic close button for inline messages. The CSS package drops the legacy Volvo Novum font-face declarations and updates CDN URL generation to track the major version.

Added

@volvo-cars/react-utils@1.3.0: Added the useDismiss hook (along with UseDismissOptions, UseDismissResults, and DISMISS_COOKIE_NAME) for managing dismissible UI elements with either in-memory or cookie-based persistence
@volvo-cars/react-messages@0.4.0: InlineMessage now automatically renders a close button whenever an onClose handler is provided, using a localized label from @volvo-cars/react-locale-provider (now a required peer dependency)

Changed

@volvo-cars/react-utils@1.3.0: useKeyPress now accepts either a single key string or an array of key strings (e.g. useKeyPress(['ArrowLeft', 'ArrowRight'], cb)). The previous comma/space-delimited string format remains supported. The event listener is no longer re-registered when the callback changes or when an inline array is passed, improving stability
@volvo-cars/css@2.2.0: CDN asset URLs are now generated using the CSS package’s major version number, ensuring assets always resolve to the correct versioned path

Fixed

@volvo-cars/react-headless@0.24.7: Improved useReel keyboard focus behavior. Items that overflow the reel container are now smoothly scrolled into view when focused via keyboard navigation

Removed

@volvo-cars/css@2.2.0: Removed the legacy Volvo Novum @font-face CSS declarations. Associated design tokens were removed in v2.0, so no styles should reference these fonts; this cleans up the remaining unused font loading rules

Release Summary. 2026-05-28

This release expands @volvo-cars/css with a new navigation bar layout component, refreshed Centenary rebrand styles for dialogs, sheets, and toast messages, and new pointer/select event utilities. The @volvo-cars/react-messages package gains a title prop for toast messages. Developers using --v-font-X CSS variables should review the token rename below.

Added

@volvo-cars/css@2.1.0: Added the navigation-bar layout component. A sticky 3-column grid (start, center, end slots) for top-level site navigation. Height adapts from 48px to 64px at the md breakpoint, and position is configurable via the --navigation-bar-position CSS custom property
@volvo-cars/css@2.1.0: Added new utility classes for controlling pointer-events and user-select behavior
@volvo-cars/react-messages@0.3.0: Added a title prop to the ToastMessage component for displaying a prominent heading above the message body

Changed

@volvo-cars/css@2.1.0: Applied Centenary rebrand styles to the dialog, dialog-small, sheet, and toast message components for visual consistency with the updated design language
@volvo-cars/css@2.1.0: Replaced --v-font-X CSS variables with the more explicit --v-font-X-size and --v-font-X-lineheight variants. Update any direct references to the old variable names in custom CSS
@volvo-cars/react-messages@0.3.0: The ToastMessage component now requires @volvo-cars/react-locale-provider as a peer dependency to automatically provide translated labels for the close icon button

Fixed

@volvo-cars/css@2.1.0: Fixed the message-bar dismiss button positioning to work correctly both with and without the bleed modifier applied

Release Summary. 2026-05-18

This is a major release of @volvo-cars/css that makes the Centenary theme the new default, completing the design language transition. It removes several legacy CSS classes and deprecated APIs, requiring migration for teams still using older patterns. Developers should review the breaking changes and migration paths below before upgrading.

Breaking Changes

@volvo-cars/css@2.0.0: The Centenary theme is now the default theme. No additional class or configuration is needed to opt in.
@volvo-cars/css@2.0.0: Removed the .heading-3 utility class and default h3 styles. Use the heading-2 token or style headings directly.
- Migration Path: Replace .heading-3 class usage with the heading-2 token or apply heading styles directly.
- Before: <h3 class="heading-3">Title</h3>
- After: <h3 class="heading-2">Title</h3>
@volvo-cars/css@2.0.0: Removed .reel-indicators: the indicator dot styles have been removed. Use pagination-dots instead.
- Migration Path: Replace .reel-indicators with pagination-dots.
@volvo-cars/css@2.0.0: Removed .toggle-group-button: the deprecated class is now removed. Migrate to .chip-selectable.
- Migration Path: Replace all instances of .toggle-group-button with .chip-selectable.
- Before: <button class="toggle-group-button">Option</button>
- After: <button class="chip-selectable">Option</button>
@volvo-cars/css@2.0.0: Removed .dialog__close and the legacy role="dialog" + .dialog[aria-modal] dialog pattern. Use the native <dialog> element with .dialog-small or .dialog-large.
- Migration Path: Replace the legacy dialog markup with a native <dialog> element.
- Before: <div role="dialog" aria-modal="true" class="dialog">...</div>
- After: <dialog class="dialog-small">...</dialog>
@volvo-cars/css@2.0.0: Removed border-radius utility classes: .rounded, .rounded-sm, .rounded-md, .rounded-lg, and all directional variants (.rounded-t[-*], .rounded-e[-*], .rounded-b[-*], .rounded-s[-*]). Only .rounded-none and .rounded-full remain.
- Migration Path: Replace removed rounded utility classes with inline styles using the --v-shape-* or --v-radius-* design tokens, or use .rounded-none / .rounded-full where applicable.
- Before: <div class="rounded-md">...</div>
- After: <div class="shape-default">...</div>
@volvo-cars/css@2.0.0: Updated all icons to version 5.

Changed

@volvo-cars/css@2.0.0: data-size="small" is no longer supported on .button-text elements. The small size attribute only applies to .button-filled and .button-outlined.
@volvo-cars/css@2.0.0: The accent color variant is no longer supported on .button-text. Use the default color or destructive instead.
@volvo-cars/css@2.0.0: .rounded-full now maps to var(--v-shape-emphasis) instead of var(--v-radius-full). The visual output is unchanged.

Release Summary. 2026-05-12

This release introduces the message-bar CSS component for dismissible, full-width notification messages with slot-based content areas. It also adds the --v-space-pageoffset design token for computing the inline offset from the viewport edge to the content area, making it easier to precisely align elements with the page layout grid.

Added

@volvo-cars/css@1.53.0: Introduced message-bar CSS component with slot-based content areas, designed for dismissible, full-width notification messages

@volvo-cars/css@1.53.0: Added --v-space-pageoffset design token that computes the inline offset from the viewport edge to the content area, enabling precise alignment with page layout margins

Release Summary. 2026-05-08

This patch release improves media component rendering with better animation and clipping behavior, enhances form input typography, strengthens CSS rule validation, and expands peer dependency support across packages for better compatibility with CSS 2.x releases.

Changed

@volvo-cars/react-forms@1.14.1: Updated top label inputs to use regular font weight for improved visual hierarchy
@volvo-cars/eslint-plugin-css@1.0.1: Widened @volvo-cars/css peer dependency range to accept 2.x releases
@volvo-cars/react-accordion@2.3.20: Widened @volvo-cars/css peer dependency range to accept 2.x releases
@volvo-cars/react-calendar@0.5.2: Widened @volvo-cars/css peer dependency range to accept 2.x releases
@volvo-cars/react-forms@1.14.1: Widened @volvo-cars/css peer dependency range to accept 2.x releases
@volvo-cars/react-icons@3.3.4: Widened @volvo-cars/css peer dependency range to accept 2.x releases
@volvo-cars/react-messages@0.2.8: Widened @volvo-cars/css peer dependency range to accept 2.x releases
@volvo-cars/react-select@0.5.4: Widened @volvo-cars/css peer dependency range to accept 2.x releases
@volvo-cars/react-table@0.2.11: Widened @volvo-cars/css peer dependency range to accept 2.x releases
@volvo-cars/react-tooltip@0.2.2: Widened @volvo-cars/css peer dependency range to accept 2.x releases
@volvo-cars/stylelint-config@2.3.2: Widened @volvo-cars/css peer dependency range to accept 2.x releases

Fixed

@volvo-cars/css@1.52.1: Removed default object-fit: contain from media-card media slot and improved media-tile rendering by preventing animation snapping at transition end with will-change: scale and adding overflow clipping. Moved aspect ratio from image to media slot container and unified hover background animations across media and body slots
@volvo-cars/stylelint-config@2.3.2: Fixed no-unnecessary-css rule to correctly skip selectors that appear inside selector lists during exact-match reporting

Release Summary. 2026-05-04

This release enhances typography capabilities with improved numeric alignment and refines the inline message component’s visual hierarchy.

Added

@volvo-cars/css@1.52.0: Added tabular-nums utility class for monospace numeric alignment. Use in data tables or live-updating values to prevent layout shifts when digits change

Changed

@volvo-cars/css@1.52.0: Updated inline message component to use background-feedback-gray as the default background color for improved visual consistency

Release Summary. 2026-04-24

This release brings improvements to time input styling and fixes layout issues with tile and banner components. Additionally, the stylelint configuration has been refined to better handle selector validation in CSS files.

Added

@volvo-cars/css@1.51.0: Added time-colon styleset support for time elements and inputs, enabling proper styling of time separators

Changed

@volvo-cars/stylelint-config@2.3.1: Improved selector validation in the no-unnecessary-css rule to skip duplicate selectors, reducing false positives

Fixed

@volvo-cars/css@1.51.0: Fixed outline clipping issues in tile and banner components when positioned outside container boundaries by adjusting overflow handling. Removed inline padding from banner content slots for improved layout consistency

Release Summary. 2026-04-21

A significant update focused on the Centenary theme, including gutter spacing adjustments, font preloading improvements, and dark mode fixes for the switch component. The icon library receives new rotation-related icons, and the stylelint configuration gains better CSS variable validation.

Added

@volvo-cars/react-icons@3.3.3: Added new Rotate Car and Rotate Photo icons (icon set version 20260420.1)

Changed

@volvo-cars/css@1.50.0: Improved font loading by preloading the Volvo Centum latin font file in the links() helper. Updated the gutter spacing range for the Centenary theme to 16-32px
@volvo-cars/stylelint-config@2.3.0: Extracted design system rules into a shared package. Improved CSS variable validation to allow local variables that resolve to valid values or cannot be statically resolved

Fixed

@volvo-cars/css@1.50.0: Fixed the switch component in dark mode by removing the accent variant. Corrected the fallback font stack to include Volvo Broad. Updated --v-space-gutter token range to 16-32px

Deprecated

@volvo-cars/css@1.50.0: Deprecated heading-3 in favor of heading-2 as part of the typography consolidation effort

Release Summary. 2026-04-09

This patch release extends Centenary theme support to inline message and toast components, and streamlines the media banner layout by standardizing font sizes.

Changed

@volvo-cars/css@1.49.1: Applied Centenary theme styles to the inline message and toast message components. Simplified the media banner layout by replacing 20px font usage with the standard 16px size

Release Summary. 2026-04-08

This release introduces two new banner CSS components with slot-based content areas and improves font loading performance by removing base64-inlined font data. The icon library adds several new icons, and a dark mode rendering issue in the checkbox component has been resolved.

Added

@volvo-cars/css@1.49.0: Introduced media-banner and text-banner CSS components with slot-based content areas and hover states
@volvo-cars/react-icons@3.3.2: Added new B Brake, Contract Box, Pin, Trajectory Towbar, and Unpin icons (icon set version 20260407.1)

Changed

@volvo-cars/css@1.49.0: Stopped inlining font-face declarations as base64 data URIs, improving page load performance. Migrated the .reel component to use design system variables for consistency

Fixed

@volvo-cars/css@1.49.0: Fixed the checkbox indeterminate state color in Centenary dark mode. The dash indicator now correctly uses --v-color-foreground-inverted instead of --v-color-always-white, matching the checked state behavior

Release Summary. 2026-04-02

This release introduces four new card and tile CSS components with slot-based content areas, and includes accessibility and theme fixes for existing components.

Added

@volvo-cars/css@1.48.0: Introduced media-card, media-tile, text-card, and text-tile CSS components with slot-based content areas and hover states

Fixed

@volvo-cars/css@1.48.0: Fixed .pill-soft to correctly use --v-color-surface-gray background in the Centenary theme. Removed background from unselected chip components to resolve accessibility contrast issues

Release Summary. 2026-03-30

A focused release that renames the .title CSS class into two distinct variants for better semantic clarity.

Changed

@volvo-cars/css@1.47.0: Renamed the .title class into .title-page and .title-section to provide clearer semantic meaning for different heading contexts

Release Summary. 2026-03-27

This release adds a new stylelint rule for detecting unnecessary CSS, updates the pill component for the Centenary theme, and adjusts the stepped accordion typography.

Added

@volvo-cars/stylelint-config@2.2.0: Added the no-unnecessary-css rule that warns when CSS declarations can be trivially replaced with a design system utility class

Changed

@volvo-cars/css@1.46.1: Updated the pill component to use a square shape in the Centenary theme
@volvo-cars/react-accordion@2.3.19: Set the stepped accordion summary font size to the standard 16px default

Release Summary. 2026-03-25

A substantial update bringing Centenary theme support to tooltips, popovers, and dialogs, alongside typography and spacing refinements. The icon library adds new icons, and several design token values have been fine-tuned for better visual consistency.

Added

@volvo-cars/css@1.46.0: Added the .title utility class as part of the ongoing consolidation effort. Extended Centenary theme styles to tooltips, popovers (with arrow), and dialog components via :host selector support
@volvo-cars/react-headless@0.24.6: Added Centenary theme styles for tooltip and popover components with arrow positioning
@volvo-cars/react-icons@3.3.1: Added new Airbag Dashed and Expand Box icons (icon set version 20260323.1)

Changed

@volvo-cars/css@1.46.0: Made <b> and <strong> tags render with bold font weight. Moved the button subtle variant into the main button class for shadow DOM compatibility. Rounded fluid spacing tokens to 2px steps. Merged Centenary tab typography and sizing into default tab styles so tabs inherit parent font styling

Fixed

@volvo-cars/css@1.46.0: Updated design tokens: rounded fluid typography to 2px steps, switched to absolute line-height values (1.5), adjusted ornament overlay opacity from 12% to 16%, and fixed data-color-mode="auto" for nested elements. Fixed floating label input padding

Release Summary. 2026-03-20

This release introduces the double range slider component across CSS and React, adds a new .table utility class as part of the EDLS-CSS consolidation, and expands the icon library with a new size prop for IconButton and several new icons.

Added

@volvo-cars/css@1.45.0: Added the double range slider component. Introduced the .table class as a first step toward merging the edls-css package into the main CSS package
@volvo-cars/react-forms@1.14.0: Added the double range slider component with full React integration
@volvo-cars/react-icons@3.3.0: Added a size prop to IconButton — size="large" renders a 48x48px button with a 24x24px icon (default: 40x40px / 16x16px). Added new Drop Camera Front, Drop Camera Rear, Note Transmitting, Roadside Arrow Left, Roadside Arrow Right, and Screen Landscape Off icons

Changed

@volvo-cars/css@1.45.0: Rebranded the range slider and double range slider with the Centenary theme

Release Summary. 2026-03-19

This release improves the interactive feel of checkbox and radio components with hover feedback, and constrains Centenary typography scaling within legacy layout containers.

Changed

@volvo-cars/css@1.44.0: Added a background highlight to the tap area of checkbox and radio components on hover for improved interactive feedback. Limited heading and statement font size growth in the Centenary theme when used inside legacy container classes to prevent layout overflow