v5.0.0

Major Changes

• c2008f2: <rh-accordion>: renamed rh-accordion-lightdom-shim.css to rh-accordion-lightdom-undefined.css.

  Before:

  <link rel="stylesheet" href="/path/to/rh-accordion/rh-accordion-lightdom-shim.css">

  After:

  <link rel="stylesheet" href="/path/to/rh-accordion/rh-accordion-lightdom-undefined.css">

• c2008f2: <rh-announcement>: renamed rh-announcement-lightdom-shim.css to rh-announcement-lightdom-undefined.css.

  Before:

  <link rel="stylesheet" href="/path/to/rh-announcement/rh-announcement-lightdom-shim.css">

  After:

  <link rel="stylesheet" href="/path/to/rh-announcement/rh-announcement-lightdom-undefined.css">

• c2008f2: <rh-audio-player>: moved :not(:defined) styles to a new optional rh-audio-player-lightdom-undefined.css stylesheet.

  Load both stylesheets to retain :not(:defined) styles and avoid cumulative layout shift before the component loads.

  If the component is defined before its markup renders, as is common in single-page apps, or is server-side rendered using Declarative Shadow DOM, the stylesheet may not be necessary.

  Before:

  <link rel="stylesheet" href="/path/to/rh-audio-player/rh-audio-player-lightdom.css">

  After:

  <link rel="stylesheet" href="/path/to/rh-audio-player/rh-audio-player-lightdom.css">
  <link rel="stylesheet" href="/path/to/rh-audio-player/rh-audio-player-lightdom-undefined.css">

• c2008f2: <rh-pagination>: removed support for the deprecated open variant. Use borderless instead.

  Before:

  <rh-pagination variant="open">
    <ol><!-- page links --></ol>
  </rh-pagination>

  After:

  <rh-pagination variant="borderless">
    <ol><!-- page links --></ol>
  </rh-pagination>

• c2008f2: <rh-footer>: removed deprecated --rh-footer-nojs-min-height. Target rh-footer:not(:defined) directly if a no-JS min-height is still needed.

  Before:

  rh-footer {
    --rh-footer-nojs-min-height: 750px;
  }

  After:

  rh-footer:not(:defined) {
    min-height: 750px;
  }

• c2008f2: <rh-navigation-primary>: changed the logo slot to accept an inline SVG or <img> instead of an anchor wrapping the logo. Use the logo-href attribute to set the custom logo link destination. Use optional logo-label to override the logo's accessible name.

  This change does not affect implementations that already used the default logo and did not override the slot.

  Before:

  <rh-navigation-primary>
    <a slot="logo" href="/">
      <img src="red-hat-logo.svg" alt="Red Hat">
    </a>
    <!-- ... -->
  </rh-navigation-primary>

  After:

  <rh-navigation-primary logo-href="/">
    <img slot="logo" src="red-hat-logo.svg" alt="Red Hat">
    <!-- ... -->
  </rh-navigation-primary>

• c2008f2: <rh-blockquote>: removed the deprecated title property and title slot. Use the subtitle property or subtitle slot instead.

  Before:

  <rh-blockquote>
    <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
    <span slot="author">Linus Torvalds</span>
    <span slot="title">Software Engineer</span>
  </rh-blockquote>

  After:

  <rh-blockquote>
    <p>In open source, we feel strongly that to really do something well, you have to get a lot of people involved.</p>
    <span slot="author">Linus Torvalds</span>
    <span slot="subtitle">Software Engineer</span>
  </rh-blockquote>

• c2008f2: <rh-avatar>: removed the deprecated updatePattern() method. Generated patterns continue to update automatically when name or pattern changes.

  Before:

  avatar.updatePattern();

  After:

  avatar.name = 'Grace Hopper';
  avatar.pattern = 'squares';

• c2008f2: <rh-badge>: removed deprecated state aliases (moderate, important, critical, and note) and their CSS selectors. Use warning, caution, danger, and info, respectively. Unsupported state values continue to normalize to neutral.

  Before:

  <rh-badge state="moderate">50</rh-badge>
  <rh-badge state="important">50</rh-badge>
  <rh-badge state="critical">50</rh-badge>
  <rh-badge state="note">50</rh-badge>

  After:

  <rh-badge state="warning">50</rh-badge>
  <rh-badge state="caution">50</rh-badge>
  <rh-badge state="danger">50</rh-badge>
  <rh-badge state="info">50</rh-badge>

• c2008f2: <rh-footer>: split light DOM CSS so <rh-footer-universal> loads its own stylesheet.

  <rh-footer> must load both stylesheets. <rh-footer-universal> used on its own loads only the universal footer's lightdom CSS.

  Before:

  <link rel="stylesheet" href="/path/to/rh-footer/rh-footer-lightdom.css">

  After, for <rh-footer>:

  <link rel="stylesheet" href="/path/to/rh-footer/rh-footer-lightdom.css">
  <link rel="stylesheet" href="/path/to/rh-footer/rh-footer-universal-lightdom.css">

  After, for <rh-footer-universal> alone:

  <link rel="stylesheet" href="/path/to/rh-footer/rh-footer-universal-lightdom.css">

• c2008f2: <rh-navigation-secondary>: removed the deprecated --rh-secondary-nav-overlay-z-index CSS custom property alias. Use --rh-navigation-secondary-overlay-z-index instead.

  Before:

  rh-navigation-secondary {
    --rh-secondary-nav-overlay-z-index: 100;
  }

  After:

  rh-navigation-secondary {
    --rh-navigation-secondary-overlay-z-index: 100;
  }

• c2008f2: <rh-cta>: renamed rh-cta-lightdom-shim.css to rh-cta-lightdom-undefined.css.

  Before:

  <link rel="stylesheet" href="/path/to/rh-cta/rh-cta-lightdom-shim.css">

  After:

  <link rel="stylesheet" href="/path/to/rh-cta/rh-cta-lightdom-undefined.css">

• c2008f2: <rh-disclosure>: renamed rh-disclosure-lightdom-shim.css to rh-disclosure-lightdom-undefined.css.

  Before:

  <link rel="stylesheet" href="/path/to/rh-disclosure/rh-disclosure-lightdom-shim.css">

  After:

  <link rel="stylesheet" href="/path/to/rh-disclosure/rh-disclosure-lightdom-undefined.css">

• c2008f2: <rh-footer> and <rh-footer-universal>: moved :not(:defined) styles to the optional rh-footer-lightdom-undefined.css and rh-footer-universal-lightdom-undefined.css stylesheets.

  Load the corresponding undefined stylesheets alongside the lightdom stylesheets to retain :not(:defined) styles and avoid cumulative layout shift before the components load.

  If the component is defined before its markup renders, as is common in single-page apps, or is server-side rendered using Declarative Shadow DOM, the stylesheet may not be necessary.

  Before:

  <link rel="stylesheet" href="/path/to/rh-footer/rh-footer-lightdom.css">
  <link rel="stylesheet" href="/path/to/rh-footer/rh-footer-universal-lightdom.css">

  After:

  <link rel="stylesheet" href="/path/to/rh-footer/rh-footer-lightdom.css">
  <link rel="stylesheet" href="/path/to/rh-footer/rh-footer-lightdom-undefined.css">
  <link rel="stylesheet" href="/path/to/rh-footer/rh-footer-universal-lightdom.css">
  <link rel="stylesheet" href="/path/to/rh-footer/rh-footer-universal-lightdom-undefined.css">

  When using <rh-footer-universal> alone, load only its lightdom stylesheet and optional undefined stylesheet:

  <link rel="stylesheet" href="/path/to/rh-footer/rh-footer-universal-lightdom.css">
  <link rel="stylesheet" href="/path/to/rh-footer/rh-footer-universal-lightdom-undefined.css">

• c2008f2: <rh-tooltip>: removed support for deprecated CSS custom properties. Use the current
  properties instead.

  Before:

  rh-tooltip {
    --rh-tooltip__arrow--Width: 8px;
    --rh-tooltip--MaxWidth: 20rem;
    --rh-tooltip__content--PaddingTop: 8px;
    --rh-tooltip__content--PaddingBottom: 8px;
    --rh-tooltip__content--PaddingLeft: 12px;
    --rh-tooltip__content--PaddingRight: 12px;
    --rh-tooltip__content--FontSize: 1rem;
    --rh-tooltip__content--Color: rebeccapurple;
    --rh-tooltip__content--BackgroundColor: lavender;
  }

  After:

  rh-tooltip {
    --rh-tooltip-arrow-size: 8px;
    --rh-tooltip-max-width: 20rem;
    --rh-tooltip-content-padding-block-start: 8px;
    --rh-tooltip-content-padding-block-end: 8px;
    --rh-tooltip-content-padding-inline-start: 12px;
    --rh-tooltip-content-padding-inline-end: 12px;
    --rh-tooltip-content-font-size: 1rem;
    --rh-tooltip-content-color: rebeccapurple;
    --rh-tooltip-content-background-color: lavender;
  }

• c2008f2: <rh-subnav>: removed the deprecated color-palette attribute. It continues to adapt to its parent color scheme through light-dark(). To set a specific color context, apply color-palette to a parent container such as <rh-surface>.

  Before:

  <rh-subnav color-palette="dark">
    <rh-navigation-link href="/">Home</rh-navigation-link>
  </rh-subnav>

  After:

  <rh-surface color-palette="dark">
    <rh-subnav>
      <rh-navigation-link href="/">Home</rh-navigation-link>
    </rh-subnav>
  </rh-surface>

• c2008f2: <rh-footer>: added a light color scheme.

  ⛔️ Breaking changes with <rh-footer>

  Omitting color-palette now renders a light footer. Add color-palette="darkest" to keep a dark footer.

  If using a standalone <rh-footer-universal>, add color-palette="darkest" to keep a dark universal footer.

  Before

  <rh-footer>
    <!-- ... -->
    <rh-footer-universal slot="universal">
      <!-- ... -->
    </rh-footer-universal>
  </rh-footer>

  After

  <rh-footer color-pa...

v4.2.2

Patch Changes

• 597ee63: <rh-scheme-dropdown>: fix custom select option label names
• 0eb4dd9: <rh-jump-links>: correct text wrapping when long link text is used

v4.2.1

Patch Changes

• a24182d: <rh-navigation-primary>: improved accessibility by ensuring event slot remains hidden when nothing is slotted
• 208d00a: <rh-subnav>: correct slotted <rh-navigation-link> text wrapping when long link text is used

v4.2.0

Minor Changes

• 6761889: <rh-spinner>: added CSS custom properties for theme-based animation overrides. Added --rh-spinner-stroke-width, --rh-spinner-vector-effect, --rh-spinner-container-animation-name, --rh-spinner-container-animation-duration, --rh-spinner-container-animation-timing, --rh-spinner-animation-name, --rh-spinner-animation-duration, --rh-spinner-animation-timing, --rh-spinner-dash-array, --rh-spinner-dash-offset, --rh-spinner-rotate-start, and --rh-spinner-track-display.
  Includes felt-dash and felt-rotate keyframes in the shadow root for Felt theme compatibility.

• 6761889: ✨ Added <rh-scheme-dropdown>

  A scheme dropdown switches between light, dark, and system default color schemes.

  <rh-scheme-dropdown></rh-scheme-dropdown>

• 6761889: <rh-button>: added --rh-button-icon-color CSS custom property to allow theming the icon color independently from the button text color

• 6761889: <rh-subnav>: added new public CSS custom properties (--rh-subnav-link-padding-block, --rh-subnav-link-padding-inline, --rh-subnav-scroll-buttons-padding, --rh-subnav-scroll-buttons-border-block-end)

• 6761889: <rh-button>: added close variant background colors (--rh-button-close-active-background, --rh-button-close-focus-background, and --rh-button-close-hover-background) plus --rh-button-close-width and --rh-button-close-radius props, fix :focus/:active source-order specificity

• 6761889: <rh-jump-links>: added new CSS custom properties (--rh-jump-link-border, --rh-jump-link-link-border, --rh-jump-link-hover-background-color, --rh-jump-link-hover-border-radius, --rh-jump-link-max-width, --rh-jump-link-item-padding-block, --rh-jump-link-item-padding-inline, --rh-jump-link-link-padding-block, --rh-jump-link-link-padding-inline, --rh-jump-link-indicator-border-radius)

• 6761889: <rh-menu-item>: added new CSS custom properties (--rh-menu-item-border-radius, --rh-menu-item-focus-inset)

• 6761889: <rh-menu-dropdown>: added new CSS custom properties (--rh-menu-dropdown-panel-padding, --rh-menu-dropdown-panel-border-radius, --rh-menu-dropdown-panel-border, --rh-menu-dropdown-panel-background, --rh-menu-dropdown-panel-box-shadow, --rh-menu-dropdown-caret-size, --rh-menu-dropdown-toggle-border-color, --rh-menu-dropdown-toggle-background, --rh-menu-dropdown-hover-border-color, --rh-menu-dropdown-active-border-color, --rh-menu-dropdown-focus-border-color, --rh-menu-dropdown-open-border-color, --rh-menu-dropdown-disabled-box-shadow, --rh-menu-dropdown-compact-size, --rh-menu-dropdown-compact-justify, --rh-menu-dropdown-compact-disabled-background, --rh-menu-dropdown-compact-disabled-icon-color)

• 6761889: <rh-footer-universal>: added tertiary slot for social links and copyright. The previous slot pattern continues to work for backward compatibility.

  Migration

  1. Move <rh-footer-social-link> elements from slot="social-links" on <rh-footer> into a <rh-footer-links slot="tertiary"> inside <rh-footer-universal>.
  2. Move <rh-footer-copyright> from slot="links-secondary" to slot="tertiary" inside <rh-footer-universal>.

  <rh-footer-universal slot="universal">
    <!-- ...links-primary, links-secondary... -->
    <rh-footer-copyright slot="tertiary">&copy; 2026 Red Hat</rh-footer-copyright>
    <rh-footer-links slot="tertiary" role="list">
      <rh-footer-social-link icon="linkedin" href="..." accessible-label="LinkedIn"></rh-footer-social-link>
    </rh-footer-links>
  </rh-footer-universal>

• 6761889: <rh-accordion>: added new CSS custom properties (--rh-accordion-panel-padding-block-start, --rh-accordion-panel-padding-inline-end, --rh-accordion-panel-padding-block-end, --rh-accordion-panel-padding-inline-start)

• 6761889: <rh-scheme-toggle>: added the scheme-changed event that fires whenever a user changes the color scheme.

• 6761889: <rh-tab>: added --rh-tabs-link-* CSS custom properties for theming the inner tab link area (pill radius, padding, hover/focus backgrounds, focus outlines). Add --rh-tabs-box-border-color for box-style tab side borders.

  <rh-tabs>: added overflow-button, overflow-button previous, and overflow-button next CSS parts on the overflow scroll buttons. Add --rh-tabs-overflow-* CSS custom properties for overflow button padding, sizing, border radius, hover/focus backgrounds, and focus outlines.

• 6761889: <rh-pagination>: deprecated variant="open" in favor of variant="borderless".

  Before:

  <rh-pagination variant="open">
    ...
  </rh-pagination>

  After:

  <rh-pagination variant="borderless">
    ...
  </rh-pagination>

  NOTE: Even though deprecated, variant="open" will continue to work until the next major release.

• 6761889: <rh-tabs>: added support for icon and icon-set attributes to the <rh-tab> element

• 6761889: ✨ Added <rh-button-group>

  A button group visually organizes multiple related buttons into a single collection.

  <rh-button-group>
    <rh-button>Save</rh-button>
    <rh-button>Cancel</rh-button>
    <rh-button>Delete</rh-button>
  </rh-button-group>

• 6761889: <rh-switch>: added --rh-switch-show-check CSS custom property to control checkmark icon visibility, without requiring the show-check-icon attribute on each selected element

  .themed-container {
    --rh-switch-check-display: true;
  }

• 466eea1: <rh-navigation-primary>: Added two CSS custom properties allowing customization of menu padding: --rh-navigation-primary-item-menu-padding-block, --rh-navigation-primary-item-menu-padding-inline

• 6761889: <rh-button>: deprecated label in favor of accessible-label.

  BEFORE:

  <rh-button label="Search"></rh-button>

  AFTER:

  <rh-button accessible-label="Search"></rh-button>

  label will continue to function until the next major release.

• 6761889: <rh-alert>: added --rh-alert-border-width CSS custom property

• 6761889: <rh-chip>: fixed the close icon animation arc and exposed the btn-link CSS part

• 6761889: <rh-scheme-toggle>: added new public CSS custom properties (--rh-scheme-toggle-flex-flow, --rh-scheme-toggle-align-items, --rh-scheme-toggle-gap) to control fieldset layout direction, alignment, and spacing. Set --rh-scheme-toggle-flex-flow: column to position the legend above the button group.

• 6761889: <rh-cta>: improved focus ring rendering for better forced-colors (high contrast mode) compatibility. Added --rh-cta-hover-background-color and --rh-cta-focus-text-decoration CSS custom props for hover and focus state theming.

• 6761889: <rh-navigation-link>: added new public CSS custom properties (--rh-navigation-link-font-size, --rh-navigation-link-border-radius, --rh-navigation-link-inset-inline-start, --rh-navigation-link-border-inline-start-width, --rh-navigation-link-background-color, --rh-navigation-link-hover-background-color, --rh-navigation-link-indicator-border-radius, --rh-navigation-link-white-space)

• 6761889: <rh-navigation-vertical-list>: added new public CSS custom properties (--rh-navigation-vertical-list-summary-background-color, --rh-navigation-vertical-list-summary-hover-background-color, --rh-navigation-vertical-list-summary-border-radius, --rh-navigation-vertical-list-nested-margin-inline, --rh-navigation-vertical-list-nested-margin-block)

Patch Changes

• 6761889: <rh-site-status>: improved visual style
• 6761889: <rh-skip-link>: added support for dark scheme
• 6761889: <rh-announcement>: update <rh-button> in dismissible announcements to use the accessible-label
  attribute.
• 6761889: <rh-navigation-primary>: corrected default logo link destination to point to redhat.com/en
• 6761889: <rh-footer>: updated visual design with top border, responsive link header font sizes, and brand-red Fedora logo

v4.1.5

Patch Changes

• e4f28d3: <rh-navigation-primary>: corrected overlay closure regression on large viewport dropdown toggle

v4.1.4

Patch Changes

• 9865c9c: Ensure that CSS changes are correctly reflected in released files

v4.1.3

Patch Changes

• 2a7c2a0: <rh-navigation-primary>: corrected visual gap between links and utility menu, and adjusted dropdown menu padding.
• 0aef3c6: <rh-navigation-primary>: corrected regression in bento box dropdown behavior

v4.1.2

Patch Changes

• cf95f14: <rh-navigation-primary>: adjusted links menu to collapse at a wider viewport than main navigation

v4.1.1

Patch Changes

• 3314574: <rh-accordion>: fixed server-side rendering compatibility
• cbadd8d: <rh-navigation-primary>: corrected logo accessibility semantics for Safari
• 2c394b3: <rh-tabs>: improved accessibility so only one focus outline is visible at a time when navigating within a tab panel
• 8880442: <rh-scheme-toggle>: corrected checked and hover background colors, improved focus styles
• 4bc3a7e: <rh-cta>: made the text in primary, secondary, and default CTAs bolder

v4.1.0

Minor Changes

• 2ab09b5: <rh-navigation-primary>: unified navigation redesign with sub-domain support and collapsible links menu

  Redesigned the primary navigation to match the unified nav specification: removed pill-shaped nav buttons and gradient borders, reduced padding between items, and removed icon button labels. Secondary links now collapse into a bento-box toggle on narrow viewports via a new collapsible links menu. Added a sub-domain variation via site-name and site-href attributes that displays a sub-domain title alongside the Red Hat logo lockup, including a hat-tip hover animation that tilts the Red Hat fedora with prefers-reduced-motion respected. Added logo-href to customize the logo link destination and mobile-links-toggle-label for non-English locales. Improved keyboard navigation with Escape and Tab-out support for the links menu, and corrected ARIA role handling during SSR hydration.

  <rh-navigation-primary site-name="Customer Portal"
                         site-href="https://subdomain.redhat.com"
                         logo-href="https://www.redhat.com/en">
    ...
  </rh-navigation-primary>

• 2ab09b5: ✨ Added <rh-select>

  A select enables users to select one or more items from a list.

  <label for="my-select">
    Products
  </label>
  <rh-select id="my-select" placeholder="Select an item">
    <rh-option>Red Hat Lightspeed</rh-option>
    <rh-option disabled>OpenShift</rh-option>
    <rh-option>Quay</rh-option>
  </rh-select>

• 2ab09b5: <rh-pagination>: deprecate variant="open" in favor of variant="borderless".

  Before:

  <rh-pagination variant="open">
    ...
  </rh-pagination>

  After:

  <rh-pagination variant="borderless">
    ...
  </rh-pagination>

  NOTE: Even though deprecated, variant="open" will continue to work until the next major release.

• 2ab09b5: <rh-tabs>: added support for icon and icon-set attributes to the <rh-tab> element

• 2ab09b5: ✨ Added <rh-button-group>

  A button group visually organizes multiple related buttons into a single collection.

  <rh-button-group>
    <rh-button>Save</rh-button>
    <rh-button>Cancel</rh-button>
    <rh-button>Delete</rh-button>
  </rh-button-group>

• 2ab09b5: ✨ Added <rh-readtime>

  Provides an estimated reading time for content.

  <rh-readtime images="" selector="#article-content">%t min read</rh-readtime>
  
  <article id="article-content">
  ...
  </article>

• 2ab09b5: <rh-tag>: improved element theming capabilities

• 2ab09b5: <rh-blockquote>: added author and subtitle attribute/slot pairs, and deprecated the title attribute.

• 2ab09b5: <rh-button>: deprecate label in favor of accessible-label.

  BEFORE:

  <rh-button label="Search"></rh-button>

  AFTER:

  <rh-button accessible-label="Search"></rh-button>

  label will continue to function until the next major release.

• 37c33aa: <rh-table>: added accessible-label slot/attribute pair to <rh-sort-button>, for use
  when localizing tables.

• 2ab09b5: <rh-accordion>: added rh-accordion-lightdom-shim.css as an optional file to help ensure content is visible when JavaScript is disabled or fails to load.

Patch Changes

• 2ab09b5: <rh-announcement>: update <rh-button> in dismissible announcements to use the accessible-label
  attribute.

• 2ab09b5: <rh-pagination>: corrected fallback when links are missing href to aria-current="page"

• 2ab09b5: <rh-code-block>: update spacing, icons and font size for compact and default code blocks

• 2ab09b5: <rh-health-index>: deduped CSS custom properties for text colors

• 2ab09b5: <rh-avatar>: corrected inline layout switching to block layout on small viewports

• 2ab09b5: <rh-code-block>: corrected font size rendering in iOS based browsers

• 2ab09b5: <rh-back-to-top>: optimized internal styles

• 2ab09b5: <rh-menu-dropdown>: Changed the caret icons for basic toggle from caret-down and caret-up to caret-down-fill and caret-up-fill. Decreased the caret icon size to match <rh-select>'s.

• 2ab09b5: <rh-pagination>: prevented page number input from receiving focus on page load

• 2ab09b5: <rh-pagination>: improved page number input accessibility and mobile submit behavior

• 2ab09b5: <rh-footer>: remove <footer> element from shadowdom, set role="contentinfo" on host

  <rh-footer-universal> also removes the <footer> element from its shadowdom and sets
  role="contentinfo" on the host if it's not already wrapped in a <rh-footer> or <footer>
  element.

• 2ab09b5: <rh-alert>: improve screen reader notification accessibility for toast alerts

• 2ab09b5: <rh-switch>: remove legacy fallback check for ariaDescribedByElements and correctly test support for ariaDescription

• 2ab09b5: <rh-tile>: fixed color-palette rendering when global color tokens are not already defined