v4.0.0

Major Changes

• 7243929: Updating @rhds/icons to version 2.0

  ⛔️ Breaking changes with <rh-icon>

  Removed auto-light-dark-mode-fill UI icon. Please use auto-light-dark-mode instead.

  Before

  <rh-icon set="ui" icon="auto-light-dark-mode-fill"></rh-icon>

  After

  <rh-icon set="ui" icon="auto-light-dark-mode"></rh-icon>

  ⚠️ Potentially breaking changes with <rh-icon>

  ✨ AI Experiences

  The new and new-fill UI icons have been updated and are no longer using the "sparkle" metaphor. Therefore, this may potentially break implementations and/or uses of new or new-fill to symbolize AI experiences.

  Where new or new-fill are used to symbolize AI experiences, please use one of our new AI Experience icon instead:

  • ai-experience

  • ai-experience-fill

    Before

    <rh-icon set="ui" icon="new"></rh-icon>
    <rh-icon set="ui" icon="new-fill"></rh-icon>

    After

    <rh-icon set="ui" icon="ai-experience"></rh-icon>
    <rh-icon set="ui" icon="ai-experience-fill"></rh-icon>

  Please see Red Hat Icons version 2.0 release notes for more information about the @rhds/icons version 2.0 update.

Minor Changes

• 7243929: <rh-navigation-secondary>: adds support for <rh-navigation-link>

• 7243929: <rh-avatar>: added a variant that adds a subtle border around the avatar image

  <rh-avatar name="Bordered Bossman"
             subtitle="Zoning Specialist"
             variant="bordered"></rh-avatar>

• 7243929: ✨ Added <rh-navigation-vertical>

  A vertical navigation list containing top-level navigation items and grouped navigation items, typically used in a side navigation pattern.

  Usage

  <rh-navigation-vertical>
    <rh-navigation-link href="/">Home</rh-navigation-link>
    <rh-navigation-vertical-list summary="Products">
      <rh-navigation-link href="/products/1">Product 1</rh-navigation-link>
      <rh-navigation-link href="/products/2">Product 2</rh-navigation-link>
      <rh-navigation-link href="/products/3">Product 3</rh-navigation-link>
      <rh-navigation-link href="/products/4">Product 4</rh-navigation-link>
    </rh-navigation-vertical-list>
    <rh-navigation-link href="/about">About</rh-navigation-link>
    <rh-navigation-link href="/contact">Contact</rh-navigation-link>
  </rh-navigation-vertical>

• 7243929: <rh-cta>: add CSS APIs for text-underline-offset and text-decoration on focus.

  rh-cta.custom-cta {
    --rh-cta-focus-text-underline-offset: 5px;
    --rh-cta-focus-text-decoration: underline;
  }

• 7243929: <rh-disclosure>: add the borderless and compact variants.

  When the variant="compact" attribute is present, disclosures will have less padding around the trigger and disclosure content:

  <rh-disclosure summary="Compact variant disclosure" variant="compact">
    <p>Lorem ipsum dolor sit amet.</p>
  </rh-disclosure>

  When the variant="borderless" attribute is present, disclosures will not have borders and will have a gray background when expanded:

  <rh-disclosure summary="Borderless variant disclosure" variant="borderless">
    <p>Lorem ipsum dolor sit amet.</p>
  </rh-disclosure>

  Additionally, all disclosures now have subtle rounded borders.

• 7243929: ✨ Added <rh-navigation-link>.

  A styled link that is used as a slotted child of navigation elements. Can be used in the primary, secondary, subnav, and vertical navigation elements.

  <rh-navigation-primary>
    <rh-navigation-link href="/" current-page>Home</rh-navigation-link>
    <rh-navigation-link href="/about">About</rh-navigation-link>
    <rh-navigation-link href="/contact">Contact</rh-navigation-link>
  </rh-navigation-primary>

• 7243929: <rh-subnav>: adds support for <rh-navigation-link> elements, deprecated slotting <a> elements

  <rh-subnav>
    <rh-navigation-link href="#">Users</rh-navigation-link>
    <rh-navigation-link href="#">Containers</rh-navigation-link>
    <rh-navigation-link href="#">Databases</rh-navigation-link>
    <rh-navigation-link href="#" current-page>Servers</rh-navigation-link>
    <rh-navigation-link href="#">System</rh-navigation-link>
    <rh-navigation-link href="#">Network</rh-navigation-link>
    <rh-navigation-link href="#">Cloud</rh-navigation-link>
  </rh-subnav>

• 7243929: <rh-subnav>: adds support for <rh-navigation-link>

• 7243929: ✨ Added <rh-menu-dropdown>.

  <rh-menu-dropdown> is a UI component designed for presenting a set of related actions or commands. It consists of two parts: a menu toggle, which users interact with to open or close the menu, and a menu list that contains actionable items. When opened, it behaves similarly to menus found in desktop applications—offering users a compact, keyboard-accessible way to perform tasks or invoke functions without occupying significant screen space.

  <rh-menu-dropdown>
    <span slot="toggle-label">Basic toggle</span>
    <rh-menu-item>Action one</rh-menu-item>
    <rh-menu-item>Action two</rh-menu-item>
    <rh-menu-item>Action three</rh-menu-item>
    <rh-menu-item disabled>Disabled Action</rh-menu-item>
    <hr>
    <rh-menu-item>Separated action</rh-menu-item>
  </rh-menu-dropdown>

• 7243929: <rh-tile>: allows tile to accept all six color palettes

• 7243929: <rh-navigation-primary>: adds support for <rh-navigation-link>

Patch Changes

• 7243929: <rh-accordion>: fix axe accessibility error flagged in <rh-accordion-header>.
• 7243929: <rh-card>: corrected layout when contained in a flex parent
• 7243929: <rh-tabs>: updated the background color of inactive box variant tabs
• 7243929: <rh-jump-links>: corrected text wrap for long links; allow wrapping to a new line
• 7243929: <rh-footer>: reduce CLS before component upgrades or if JavaScript fails to load.
• 7243929: <rh-site-status>: update light scheme background colors
• 7243929: <rh-pagination>: add a customizable token for disabled stepper icon color
• 7243929: <rh-button>: update colors and background colors on dark color schemes
• 7243929: <rh-navigation-primary>: improved accessibility when slots are empty
• 7243929: <rh-audio-player>: better responsiveness when inside non-full width containers
• 7243929: <rh-back-to-top>: add dark color scheme support
• 7243929: <rh-subnav>: corrected the implementation of and deprecated the color-palette attribute
• 7243929: <rh-progress-stepper>: corrects missing fallback styles
• 7243929: <rh-subnav>: fixed regression in overflow arrow display
• 7243929: <rh-pagination>: corrected behavior using aria-current="page" attributes or fragment identifier URLs
• 7243929: <rh-navigation-primary>: improves accessibility of navigation label for screen readers
• 7243929: <rh-navigation-primary>: corrected content menus opening during command/ctrl + F searches
• 7243929: <rh-subnav>: corrected styling to reflect proper aria-current="page" usage for the active page
• 7243929: <rh-health-index>: use status tokens for border, background, and text colors
• 7243929: <rh-pagination>: update dark scheme disabled button background color