Changelog

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