CHANGELOG.md

# @rhds/elements

## 4.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

## 4.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

## 4.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.
  
  ```html
  <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>`.
  
  ```html
  <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:
  ```html
  <rh-pagination variant="open">
    ...
  </rh-pagination>
  ```
  
  After:
  ```html
  <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.
  
  ```html
  <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
  
  ```css
  .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:
  
  ```html
  <rh-button label="Search"></rh-button>
  ```
  
  AFTER:
  
  ```html
  <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

## 4.1.5
### Patch Changes

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

## 4.1.4
### Patch Changes

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

## 4.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

## 4.1.2
### Patch Changes

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

## 4.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

## 4.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.
  
  ```html
  <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.
  
  ```html
  <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:
  ```html
  <rh-pagination variant="open">
    ...
  </rh-pagination>
  ```
  
  After:
  ```html
  <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.
  
  ```html
  <rh-button-group>
    <rh-button>Save</rh-button>
    <rh-button>Cancel</rh-button>
    <rh-button>Delete</rh-button>
  </rh-button-group>
  ```
- 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:
  
  ```html
  <rh-button label="Search"></rh-button>
  ```
  
  AFTER:
  
  ```html
  <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

## 4.0.4
### Patch Changes

- 7cd8446: `<rh-jump-links>`: fix active state race conditions during rapid clicks and smooth scrolling
- 0ebfaf0: `<rh-code-block>`: prevent tooltip from unexpectedly reappearing
- bb581f3: `<rh-cta>`: ensure default variant's arrow consistently follows text on firefox
- 6f23579: `<rh-switch>`: fix switch rendering on some browsers in light/dark schemes
- 887f0af: `<rh-tooltip>`: corrects the intentionality delay for a user triggering the tooltip

## 4.0.3
### Patch Changes

- 5e77e43: `<rh-code-block>`: add `visible` value to typescript types for the `line-numbers` attribute
- be03ad5: Corrected import paths for `lit` dependencies
- d703934: `<rh-navigation-primary>`: correct rendering issue for safari 26.2
- 25990af: Updated `@rhds/icons` to v2.1, adding 82 new icons to the UI and Standard sets!

## 4.0.2
### Patch Changes

- e2df873: Updated Lit and other dependencies
- 184a39a: `<rh-tile>`: decrease font size of compact and checkable Tile headings

## 4.0.1
### Patch Changes

- 582af1b: `<rh-card>`: improved theming of card border radiuses
- f335c3d: `<rh-code-block>`: fixed code blocks not being truncated when using deep links, causing them to overlay other content
- 8ace3c3: `<rh-alert>`: updated close button's label attribute to give accessible name
- a4b30fa: `<rh-navigation-vertical>`: corrected caret position in mobile safari
- 3726b1e: `<rh-tooltip>`: corrected tooltip arrow position and improved RTL support
- 3fcc904: `<rh-code-block>`: improve load performance when using certain property combinations
- 149d074: `<rh-avatar>`: improved render performance
- 7a92867: `<rh-alert>`: allow toast function to work when built using native constructible style sheets
- 19e3306: `<rh-code-block>`: correct wrap functionality for prerendered code blocks
- 3786f5a: `<rh-code-block>`: fixed the visibility of the Show more/less button in `<rh-code-block>` when line numbers are hidden.
- 86fe7aa: `<rh-icon>`: remove the displayed icon when the `icon` attribute is removed or set to an empty string.
- b8fd133: `<rh-tag>`: fixed height to match design guidelines

## 4.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**
  
    ```html
    <rh-icon set="ui" icon="auto-light-dark-mode-fill"></rh-icon>
    ```
  
    **After**
  
    ```html
    <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**
  
    ```html
    <rh-icon set="ui" icon="new"></rh-icon>
    <rh-icon set="ui" icon="new-fill"></rh-icon>
    ```
  
    **After**
  
    ```html
    <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](https://github.com/RedHat-UX/red-hat-icons/releases/tag/v2.0.0) 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
  
  ```html
  <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
  
  ```html
  <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.
  
  ```css
  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:
  
  ```html
  <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:
  
  ```html
  <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.
  
  ```html
  <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
  
  ```html
  <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.
  
  ```html
  <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

## 3.2.0
### Minor Changes

- 07310da: `<rh-code-block>`: Added `copy` event. Modify the `event.content` field to change the text to be copied.
  
  ```js
  import {RhCodeBlockCopyEvent} from '@rhds/elements/rh-code-block/rh-code-block.js';
  
  document.body.addEventListener('copy', function(event) {
    if (event instanceof RhCodeBlockCopyEvent) {
      // remove prompt and surrounding whitespace from the start of the string
      event.content = event.content.replace(/^\s*\$|#\s*/, '');
    }
  });
  ```
- 07310da: `<rh-tooltip>`: add the `silent` attribute to hide tooltip content from screen readers.
  
  ```html
  <rh-tooltip silent>
    <rh-button variant="secondary">
      <rh-icon set="ui" icon="copy" accessible-label="Copy to Clipboard"></rh-icon>
    </rh-button>
    <span slot="content">Copy to Clipboard</span>
  </rh-tooltip>
  ```

### Patch Changes

- 59dde97: `<rh-progress-stepper>`: improved online documentation

## 3.1.3
### Patch Changes

- 2c54b9a: `<rh-code-block>`: show expand button ("Show more") even when line numbers are hidden

## 3.1.2
### Patch Changes

- c73539a: `<rh-code-block>`: set content-visibility for improved performance on large pages with many codeblocks.

## 3.1.1
### Patch Changes

- 4886ec0: `<rh-alert>`: added support for dark color schemes
- c853f3e: `<rh-footer>`: fix color contrast of text when javascript fails to load
- 8d40d2c: `<rh-breadcrumb>`: fix colors, spacing, and arrows

## 3.1.0
### Minor Changes

- c0b5e9a: `<rh-tag>`: add disabled, hover, focus, and active states to linked tags
  
  ```html
  <rh-tag href="/engage">Engage cluster</rh-tag>
  ```
- c0b5e9a: ✨ Added `<rh-scheme-toggle>`
  
  A toggle to switch between light, dark and system default color schemes.
  
  ```html
  <rh-scheme-toggle></rh-scheme-toggle>
  ```
- c0b5e9a: `<rh-navigation-primary>`: improved logo rendering
  
  Default logo is now bi-modal auto adjusting text color to light or dark scheme. For more control,
  use the existing [`logo` slot](https://ux.redhat.com/elements/navigation-primary/code/#slots).
- c0b5e9a: `<rh-code-block>`: added the `line-numbers="hidden"` attribute:
  
  ```html
  <rh-code-block line-numbers="hidden">
  <script type="text/html"><p>Lines gone</p></script>
  </rh-code-block>
  ```
- c0b5e9a: `<rh-breadcrumb>`: added the `truncate` attribute.
  
  When present, the middle breadcrumb items are hidden until the user interacts with them:
  
  ```html
  <rh-breadcrumb truncate>
    <ol>
      <li><a href="#home">Home</a></li>
      <li><a href="#products">Products</a></li>
      <li><a href="#open-shift-aws">Red Hat OpenShift on AWS</a></li>
      <li><a href="#4">4</a></li>
      <li><a href="#introduction-to-rosa">Introduction to ROSA</a></li>
      <li><a href="#understanding-rosa" aria-current="page">Chapter 1. Understanding ROSA</a></li>
    </ol>
  </rh-breadcrumb>
  ```
- c0b5e9a: ✨ Added `<rh-progress-stepper>`
  
  Progress stepper communicates how many steps are required to complete a process.
  
  ```html
  <rh-progress-stepper orientation="horizontal">
    <rh-progress-step state="complete"
                      description="This step has been completed successfully">
      Complete Step
    </rh-progress-step>
  
    <rh-progress-step state="active"
                      description="Currently working on this step">
      Active Step
    </rh-progress-step>
  
    <rh-progress-step state="inactive">
      Inactive Step
      <span slot="description">
        This step is <strong>not yet started</strong>
      </span>
    </rh-progress-step>
  </rh-progress-stepper>
  ```
- c0b5e9a: ✨ Added `<rh-skeleton>`
  
  A skeleton loader is a placeholder for content that is loading.
  
  ```html
  <rh-skeleton></rh-skeleton>
  ```

### Patch Changes

- c76fe5e: `<rh-announcement>`: let long CTA text wrap to next line for small viewports
- 2f4714a: `<rh-tabs>`: corrected duplicate focus ring with keyboard navigation
- c0b5e9a: `<rh-tag>`: improve color contrast of gray tags on dark color schemes
- c0b5e9a: `<rh-footer>`: removed console warnings
- 2f4714a: `<rh-tabs>`: corrected background styles inherited from parent color-scheme and host color-palette
- 9f01572: `<rh-alert>`: make `state` attribute case-insensitive
- 83561d7: `<rh-navigation-primary>`: improved keyboard accessibility of the dropdown toggle
- 4b130a7: `<rh-footer>`: removed "Inc" from copyright
- 877a0a1: `<rh-audio-player>`: corrected icons for rewind and fast forward
- c0b5e9a: Inline links should show a dashed underline, provided they are not in a navigation element or accompanied by visual clues that indicate interactivity. The following changes were made to adhere to our inline link styling guidelines.
  
  Updated CSS to allow slotted `<a>` elements to display underlines in `<rh-avatar>` and `<rh-table>`.
  
  Removed underlines from linked text in `<rh-breadcrumbs>`.
  
  Updated or added underline styles for:
  
    - `<rh-footer>`: Links that show an underline only on hover now show a dashed underline, instead of a solid one. Links in `<rh-footer-block>` show an underline in the default state.
    - `<rh-pagination>`: An underline was added only for the last page link.
    - `<rh-skip-link>`: Skip link's hover state uses a dashed underline, instead of a solid underline, now.
- 2f4714a: `<rh-tabs>`: corrected vertical layout styles
- c0b5e9a: `<rh-code-block>`: improve performance when `line-numbers="hidden"` attribute is present
- c0b5e9a: `<rh-card>`: allow card to accept all six color palettes
- c0b5e9a: `<rh-footer>`: corrected height style when JavaScript is not available

## 3.0.4
### Patch Changes

- 7e9e971: `<rh-navigation-primary>`: improved component reactivity
- c904202: Improved SSR for elements whose layout depends on their content
- bd8eb99: `<rh-audio-player>`: fix layout issue between 576px and 768px breakpoints

## 3.0.3
### Patch Changes

- 7c845cd: `<rh-navigation-primary>`: prevent an error from being thrown in certain circumstances when the element connects
- 4ae9221: `<rh-code-block>`: improve performance of line numbers

## 3.0.2
### Patch Changes

- 885ab9a: `<rh-dialog>`: corrected background color for dark scheme
- c953111: `<rh-tooltip>`: improved screen reader support
- 977389f: `<rh-code-block>`: improve performance of pre-rendered code blocks.
- 75b43f6: `<rh-video-embed>`: hide thumbnail and show video after hitting play button
- 885ab9a: `<rh-code-block>`: corrected background color for dark scheme
- dce6e53: `<rh-tabs>`: corrected icons from being incorrectly hidden
- 885ab9a: `<rh-switch>`: corrected switch handle color for dark scheme
- 2faf93b: `<rh-dialog>`: corrected dialog positioning to prevent page scrolling
- 885ab9a: `<rh-health-index>`: corrected background color for dark scheme
- 49e06d3: `<rh-navigation-primary>`: corrected missing named logo slot documentation
- 7607ce1: `<rh-navigation-primary>`: corrected `:active` state for hamburger and secondary slotted items
- 885ab9a: `<rh-navigation-secondary>`: corrected background color for dark scheme
- d1b66d7: `<rh-code-block>`: fixed copy actions for prerendered codeblocks with badge callouts
- 0e85889: `<rh-code-block>`: added default content for action buttons.
- 921eaf2: `<rh-navigation-primary>`: corrected cursor style on secondary links
- 00b8429: `<rh-dialog>`: The dialog element will now reset scrollbar when closed, even if it was not in focus at the time of closure.
- 74cfbc4: `<rh-audio-player>`: fix play button icon misalignment in webkit
- 4841490: `<rh-audio-player>`: fix transcript close button on chrome
- da05c0d: `<rh-pagination>`: show total pages counter
- 3f41d58: `<rh-tooltip>`: correctly renders tooltip content using contrasting color scheme
- d575265: `<rh-navigation-primary>`: corrected render height for navigation items in safari
- 885ab9a: `<rh-tile>`: corrected background color for light and dark scheme
- 885ab9a: `<rh-accordion>`: corrected hover background-color for dark scheme
- e0109e8: `<rh-subnav>`: prevent error which can occur when bundling the element with esbuild
- a9dafdf: `<rh-code-block>`: automatically load tooltip when action buttons are added
- 008dd45: `<rh-dialog>`
  `<rh-navigation-primary>`
  `<rh-navigation-secondary>`: updated usage of design tokens
- 885ab9a: `<rh-pagination>`: correct background-colors for dark scheme
- 11a1f07: `<rh-footer>`: only show vertical scrollbars if content overflows
- 220b522: `<rh-navigation-primary>`: documented the `logo` slot
- 512091f: `<rh-badge>`: fixed rendering in SSR scenarios

## 3.0.1
### Patch Changes

- 4e036d1: `<rh-navigation-secondary>`: improved <abbr title="server side rendering">SSR</abbr> support
- 642800b: `<rh-button>`: dark scheme support for buttons with icons
- 706be44: `<rh-cta>`: ensure the arrow icon always appears
- 4e036d1: `<rh-back-to-top>`: improved <abbr title="server side rendering">SSR</abbr> support
- 4e036d1: `<rh-avatar>`: improved <abbr title="server side rendering">SSR</abbr> support
- 4e036d1: `<rh-accordion>`: improved <abbr title="server side rendering">SSR</abbr> support
- 4e036d1: `<rh-table>`: improved <abbr title="server side rendering">SSR</abbr> support
- 4e036d1: `<rh-code-block>`: improved <abbr title="server side rendering">SSR</abbr> support
- 4e036d1: `<rh-table>`: improved <abbr title="server side rendering">SSR</abbr> support
- 4e036d1: `<rh-stat>`: improved <abbr title="server side rendering">SSR</abbr> support
- 706be44: Theming: ensure themable elements always load the default theme
- 4e036d1: `<rh-pagination>`: improved <abbr title="server side rendering">SSR</abbr> support
- d54b1cb: `<rh-tile>`: fixed empty body slot
- 4e036d1: `<rh-switch>`: improved <abbr title="server side rendering">SSR</abbr> support
- 316bcd0: `<rh-dialog>`: increase contrast of close button for video dialogs
- 8beac87: `<rh-pagination>`: fix ellipsis background color on dark color schemes

## 3.0.0
### Major Changes

- f32f39d: `<rh-accordion>`: make accordion panel always use it's parent's color scheme
  
  BEFORE: Users could override an accordion panel's color palette
  ```html
  <rh-accordion color-palette="darkest">
    <rh-accordion-header>Override Panel</rh-accordion-header>
    <rh-accordion-panel color-palette="lightest">Overridden panel</rh-accordion-panel>
  </rh-accordion>
  ```
  
  AFTER: Users cannot override an accordion panel's color palette
  ```html
  <rh-accordion color-palette="darkest">
    <rh-accordion-header>Consistent Panel</rh-accordion-header>
    <rh-accordion-panel>Consistent panel</rh-accordion-panel>
  </rh-accordion>
  ```
- f32f39d: **🎨 Color Schemes 😎**
  
  This release introduces built-in support for user [color scheme][colorscheme] preferences (a.k.a. "dark mode"). The [color palette][colorpalette] and [theming][theming] integrate into device color schemes, or can be overridden on a per-page or per-element basis.
  
  #### Performance
  
  This change significantly improves both the loading and the runtime performance of themable elements. We no longer need to apply the color scheming stylesheet to each element, which reduces SSR payloads as well.
  
  #### Breaking Changes
  
  In version 2, users could apply custom themes to specific sections or elements by setting theme tokens ending in `-on-light` and `-on-dark`. In this version, that will still work when applied to the entire document via the `:root` selector, but when theming individual elements, it will fail. For that reason, we recommend users should set theme tokens using the `light-dark()` function instead:
  
  ##### Before
  ```css
  .theme-custom {
    --rh-color-border-interactive-on-light: var(--custom-darkest);
    --rh-color-border-interactive-on-dark: var(--custom-lightest);
    --rh-color-interactive-primary-default-on-light: var(--custom-darker);
    --rh-color-interactive-primary-default-on-dark: var(--custom-lighter);
  }
  ```
  
  ##### After
  ```css
  .theme-custom {
    --rh-color-border-interactive: light-dark(var(--custom-darkest),
                                              var(--custom-lightest));
    --rh-color-interactive-primary-default: light-dark(var(--custom-darker),
                                                       var(--custom-lighter));
  }
  ```
  
  #### Potentially Breaking Changes
  
  Because elements can now render by default using your user's preferred color scheme, pages which are not set up to style content based on user preferences may become unreadable. For example, if a user who set their device to prefer dark mode visits a page which does not style content based on their color-scheme preferences (i.e. it assumes "light mode") and that page contains RHDS elements, those elements may become unreadable, by rendering text for a dark background, when that page actually shows a light background.
  
  We expect that this should not affect the majority of cases, but if you find that it does, there are two solutions you can implement to force your pages into light mode: either use an `<rh-surface>` element with the `lightest` color palette, or set your page's rendering mode to `only light`
  
  ```diff
  - <main>
  + <rh-surface role="main" color-palette="lightest">
  ```
  
  ```css
  :root {
    color-scheme: only light;
  }
  ```
  
  [colorscheme]: https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
  [colorpalette]: https://ux.redhat.com/theming/color-palettes/
  [theming]: https://ux.redhat.com/theming/customizing/
- f32f39d: `<rh-dialog>`: the `overlay` CSS shadow part has been removed. Users who want to customize the overlay should refer to our [theming documentation](https://ux.redhat.com/theming/customizing/).
  
  Before:
  
  ```css
  rh-dialog::part(overlay) {
    background-color: #260710e7;
  }
  ```
  
  After:
  
  ```css
  rh-dialog.theme-ai {
    --ai-darker: #260710;
    --rh-color-surface-darker: var(--ai-darker);
  }
  ```
- f32f39d: `<rh-tabs>`: removed `--rh-tabs-border-color`. Use `--rh-color-border-subtle` instead.
  
  #### Before:
  ```css
  .my-tabs {
    --rh-tabs-border-color: cadetblue;
  }
  ```
  
  #### Before:
  ```css
  .my-tabs {
    --rh-color-border-subtle: light-dark(cadetblue, darkslategray);
  }
  ```
- f32f39d: `@rhds/tokens`: bumps the version to 3.0. CSS customizations which used the design tokens may no longer apply. See the [tokens release notes](https://github.com/RedHat-UX/red-hat-design-tokens/releases/tag/v3.0.0) for more information on the breaking changes.
- 9dcbc70: `<rh-accordion>`: remove unused `bordered` attribute, which anyways has no effect since 2.0

### Minor Changes

- f32f39d: ✨ Added `<rh-chip>`.
  
  Chip creates a component that can be used in place of a checkbox.
  
  ```html
  <rh-chip-group>
    <span slot="accessible-label">Filter by:</span>
    <rh-chip>Edge</rh-chip>
    <rh-chip>AI/ML</rh-chip>
    <rh-chip>DevOps</rh-chip>
  </rh-chip-group>
  ```
- f32f39d: `<rh-footer>`: social link element can now take an `href` attribute instead of a slotted link. The previous behaviour will still work.
  
  Before:
  
  ```html
  
  <rh-footer-social-link slot="social-links"
                         icon="linkedin">
    <a href="https://www.linkedin.com/company/red-hat"
       data-analytics-region="social-links-exit"
       data-analytics-category="Footer|social-links"
       data-analytics-text="LinkedIn">LinkedIn</a>
  </rh-footer-social-link>
  ```
  
  After:
  ```html
    <rh-footer-social-link slot="social-links"
                           icon="linkedin"
                           href="https://www.linkedin.com/company/red-hat"
                           data-analytics-region="social-links-exit"
                           data-analytics-category="Footer|social-links"
                           data-analytics-text="LinkedIn"
                           accessible-label="LinkedIn"></rh-footer-social-link>
  ```
- f32f39d: ✨ Added `<rh-disclosure>`
  
  A disclosure is a widget that enables content to be either collapsed (hidden) or expanded (visible).
  
  ```html
  <rh-disclosure summary="Collapsed panel title">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing, elit.</p>
  </rh-disclosure>
  ```
- f32f39d: ✨ Added `<rh-jump-links>`
  
  Jump links is a navigation list of links enhanced with Red Hat branded design and a scroll spy mechanism. It comes in horizontal and vertical layouts, and can be composed with `<rh-disclosure>` for a mobile-friendly presentation.
  
  ```html
  <aside id="jump-links-container">
    <h2 id="jump-links-title">Sections</h2>
    <rh-jump-links aria-labelledby="jump-links-title">
      <rh-jump-link href="#heading-1">Heading 1</rh-jump-link>
      <rh-jump-link href="#heading-2">Heading 2</rh-jump-link>
      <rh-jump-link href="#heading-3">Heading 3</rh-jump-link>
      <rh-jump-link href="#heading-4">Heading 4</rh-jump-link>
      <rh-jump-link href="#heading-5">Heading 5</rh-jump-link>
    </rh-jump-links>
  </aside>
  ```
- f32f39d: ✨ Added `<rh-announcement>`.
  
  `<rh-announcement>` is a short banner that conveys an important message, such as
  promoting an event or advertising an organizational or product announcement.
  
  ```html
  <rh-announcement>
    <img slot="image"
         alt="summit logo"
         src="/images/summit.png">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit adipisicing elit adipisicing elit.</p>
    <rh-cta slot="cta" href="#">Learn More</rh-cta>
  </rh-announcement>
  ```
- f32f39d: ✨ Added `<rh-navigation-primary>`.
  
  The Primary navigation allows users to orient themselves and successfully move through web experiences. It is persistent on every page to ensure a consistent user experience across our systems of website
  
  ```html
  <rh-navigation-primary>
    <rh-navigation-primary-item variant="dropdown"
                                summary="AI">
      AI dropdown content
    </rh-navigation-primary-item>
  
    <rh-navigation-primary-item variant="dropdown"
                                summary="Hybrid Cloud">
      Hybrid Cloud dropdown content
    </rh-navigation-primary-item>
  
    <rh-navigation-primary-item variant="dropdown"
                                summary="Products">
      Products dropdown content
    </rh-navigation-primary-item>
  
    <rh-navigation-primary-item variant="dropdown"
                                summary="Learn">
      Learn dropdown content
    </rh-navigation-primary-item>
  
    <rh-navigation-primary-item variant="dropdown"
                                summary="Partners">
      Partners dropdown content
    </rh-navigation-primary-item>
  
    <rh-navigation-primary-item slot="links">
      <a href="https://developers.redhat.com/">Developers</a>
    </rh-navigation-primary-item>
  
    <rh-navigation-primary-item slot="links">
      <a href="https://docs.redhat.com/en">Docs</a>
    </rh-navigation-primary-item>
  
    <rh-navigation-primary-item slot="links">
      <a href="https://access.redhat.com/support">Support</a>
    </rh-navigation-primary-item>
  
    <rh-navigation-primary-item slot="dropdowns"
                                variant="dropdown"
                                hide-at="sm"
                                summary="Search">
      Search dropdown content
    </rh-navigation-primary-item>
  
    <rh-navigation-primary-item slot="dropdowns"
                                variant="dropdown"
                                hide-at="sm"
                                summary="For you">
      For you dropdown content
    </rh-navigation-primary-item>
  
    <rh-navigation-primary-item slot="dropdowns"
                                variant="dropdown"
                                summary="My Red Hat">
      My Red Hat dropdown content
    </rh-navigation-primary-item>
  </rh-navigation-primary>
  ```
- 5eaee73: `<rh-alert>`: added `actions` and `persistent: true` options for toasts.
  
  ```js
  RhAlert.toast({
    message: 'Toast!',
    persistent: true,
    actions: [
      { text: 'Confirm', action: 'confirm' },
      { text: 'dismiss', action: 'dismiss' }
    ],
  });
  ```

### Patch Changes

- f32f39d: `<rh-accordion>`: reduce JavaScript payload
- f32f39d: `<rh-pagination>`: reduce JavaScript payload
- f32f39d: `<rh-cta>`: reduce JavaScript payload
- f32f39d: `<rh-icon>`: corrected micron set to allow for a range from 8px to 12px
- f32f39d: `<rh-tabs>`: reduce JavaScript payload
- f32f39d: `<rh-card>`: changed the `header` slot's top margin to from `--rh-space-lg` to `--rh-space-xl`
- f32f39d: `<rh-tile>`: corrected border colors
- f32f39d: `<rh-pagination>`: improves layouts for non-left-to-right languages
- f32f39d: Removed instances of `--rh-color-surface-dark-alt`: use `--rh-color-surface-dark` instead, and it will be automatically darkened where necessary.
- f32f39d: `<rh-health-index>`: prevent graphical elements from escaping stacking context
- f32f39d: `<rh-audio-player>`: fix right-to-left layout
- f32f39d: `<rh-tile>`: Fix a bug where a Tile's link stretches beyond the bounds of the element when JavaScript doesn't load
- f32f39d: `<rh-switch>`: reduce JavaScript payload
- f32f39d: `<rh-navigation-secondary>`: remove underlines from links
- f32f39d: `<rh-tile>`: improved layout when footer slot is empty.
- f32f39d: Elements with `color-palette`s no longer depend on JavaScript to set the background color of children. See [theming docs](https://ux.redhat.com/theming) for more information.
- f32f39d: `<rh-back-to-top>`: remove user-facing errors and warnings from missing attributes/values from the console
- f32f39d: `<rh-dialog>`: Aligned CSS variable naming with privacy conventions by prefixing the undocumented `--offset`, `--offset-top`, and `--offset-right` variables with an underscore, marking them as private (`--_offset`, `--_offset-top`, `--_offset-right`).
- 5ca27af: `<rh-accordion>`: corrected `large` size header fonts.
- f32f39d: `<rh-card>`: corrected margins on small screens
- f32f39d: `<rh-subnav>`: restored overflow scrolling
- f32f39d: `<rh-navigation-secondary>`: reduce JavaScript payload
- f32f39d: `<rh-avatar>`: improved layout compatibility for plain variant avatars
- f32f39d: `<rh-table>`: remove background color. Use an `<rh-surface>`, or other themable container element if you need to set a background.
- f32f39d: `<rh-navigation-secondary>`: improve visual rendering when scrollbars are turned on by user
- 5eaee73: `<rh-alert>`: pause the timer which dismisses a toasted alert when the user hovers or focuses the alert
- f32f39d: `<rh-tabs>`: remove background from tabs panel and corrected colors
- f32f39d: `<rh-pagination>`: remove background from open variant links
- f32f39d: `<rh-health-index>`: corrected colors
- f32f39d: `<rh-subnav>`: corrected focus styles
- f32f39d: `<rh-accordion>`: `expanded` and `expanded-index` attributes work as expected
- f32f39d: `<rh-button>`: corrected play button icon colors
- f32f39d: `<rh-subnav>`: removed background color
- f32f39d: `<rh-dialog>`: add dark color scheme support
- f32f39d: `<rh-blockquote>`: fix `align="center"` alignment and font size.
- f32f39d: `<rh-site-status>`: corrected icon colors
- f32f39d: `<rh-pagination>`: improve dark mode for the numeric paginator control
- 01d29a8: Update dependencies

## 2.1.2

### Patch Changes

- 8dd9a5f: `<rh-tooltip>`: make tooltip content available to assistive technology
- 5554e77: `<rh-tile>`: fixed layout of compact link tiles with icons
- a37b594: `<rh-cta>`: workaround for Safari which sometimes double-renders icons
- 64dab19: `<rh-code-block>`: enables copy and word wrap action for prerendered content
- 33535ef: `<rh-accordion>`: restore missing hover colors
- e1e325a: `<rh-tile>`:
  `<rh-stat>`:
  `<rh-card>`:
  `<rh-icon>`: no longer force headings to be in all caps
- af13796: `<rh-accordion>`: corrected accordion header text font weight
- b60ab7b: `<rh-footer>`: show content after 5 seconds if javascript fails
- 518a2dc: `<rh-cta>`: improved accessibility by correcting active and focus styles
- 8d51411: Use non-localized font stacks (see [`@rhds/tokens` v2.1.1 release notes](https://github.com/RedHat-UX/red-hat-design-tokens/releases/tag/v2.1.1))
- a37b594: `<rh-icon>`: workaround for Safari which sometimes double-renders icons
- 8d51411: Bump version of `@rhds/tokens`
- eb9cb2f: `<rh-button>`: improved accessibility by allowing focus when disabled'
- 7ab9dc5: `<rh-avatar>`: corrected small viewport margin for `plain` variant avatars

## 2.1.1

### Patch Changes

- f63c46d: **Color Context**: prevent errors in certain SSR scenarios
- 249a596: `<rh-alert>`: corrected typography and layouts
- 613e827: `<rh-code-block>`: ensure that syntax colors and styles are applied when the element upgrades
- 0d70e3f: `<rh-tabs>`: corrects active tab styles in SSR scenarios
- 7bf5841: `<rh-navigation-secondary>`: corrected style regression in dark color palettes
- 955d393: `<rh-surface>`: corrected themed text color
- 3ef5687: `<rh-alert>`: change heading color for all states of alert to make them all the same
- 557ede4: `<rh-table>`: better SSR support
- f63c46d: `<rh-cta>`: fix some errors when hydrating in SSR scenarios

## 2.1.0

### Minor Changes

- 82ffb12: `<rh-tile>`: add `link="private"` attribute, indicating that the link is
  private, which changes the link icon from an arrow to a padlock, and
  `link="external"` attribute, which changes the link icon to the "external link"
  icon
- 82ffb12: `<rh-card>` added `--rh-card-header-background-on-light` and `--rh-card-header-background-on-dark` CSS custom properties

  ```css
  rh-card.custom-card {
    --rh-card-header-background-on-light: cornflowerblue;
    --rh-card-header-background-on-dark: darkblue;
  }
  ```

- 82ffb12: `<rh-subnav>`:

  - removed arrow-key keyboard navigation in favor of tab navigation.
  - add `accessible-label` attribute to explicitly label landmark.
  - corrects overflow icons

  ```html
  <rh-subnav accessible-label="Customer service">
    <a href="#" active>Help</a>
    <a href="#">Contact Us</a>
    <a href="#">FAQ</a>
  </rh-subnav>
  ```

- 82ffb12: `<rh-code-block>`: syntax highlighting via prerendered prismjs code-blocks. Use
  the `highlighting="prerendered"` attribute when rendering code blocks using
  server side prism, e.g. in a markdown fenced code block.

  ```html
  <rh-code-block highlighting="prerendered">
    <pre class="language-css"><code class="language-css"><span class="token selector">a</span> <span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--rh-color-interactive-primary-default<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span></pre>
  </rh-code-block>
  ```

- 82ffb12: `<rh-tag>` added `red-orange`, `yellow`, and `teal` colors. **NOTE** that `cyan` is now deprecated, but will continue to work using the `teal` colors.
- 82ffb12: `<rh-table>`: added auto-generated table cell headings for responsive layout on small screens.
- 82ffb12: `<rh-tag>`: added desaturated variant:

  ```html
  <rh-tag variant="desaturated">New</rh-tag>
  ```

- 82ffb12: `<rh-tag>`: added `size` attribute.

  ```html
  <rh-tag size="compact">New</rh-tag>
  ```

- 82ffb12: `<rh-alert>`: added new states: `info`, `neutral`, and `caution`, and deprecated
  `note` (now an alias to `info`), `default` (now an alias to `neutral`), and
  `error` (now an alias to `danger`).
- 82ffb12: `<rh-button>`: add `icon-set` attribute, corresponding to `<rh-icon set="...">`

  ```html
  <rh-button icon="giftbox" icon-set="standard">Donate</rh-button>
  ```

- 82ffb12: `<rh-navigation-secondary>`:

  - removed arrow-key keyboard navigation in favor of tab navigation.
  - add `accessible-label` attribute to explicitly label landmark.

  ```
  <rh-navigation-secondary accessible-label="Main">
   ...
  </rh-navigation-secondary>
  ```

- 82ffb12: `<rh-badge>`: added new states:

  - `danger`
  - `warning`
  - `caution`
  - `neutral`
  - `info`

  We deprecated:

  - `critical` (now an alias to `danger`)
  - `important` (now an alias to `caution`)
  - `moderate` (now an alias to `warning`)
  - `note` (now an alias to `info`)

- 82ffb12: `<rh-skip-link>`: added optional `href` attribute:

  ```html
  <rh-skip-link href="#main-content">Skip to main content</rh-skip-link>
  ```

  is equivalent to:

  ```html
  <rh-skip-link>
    <a href="#main-content">Skip to main content</a>
  </rh-skip-link>
  ```

- 82ffb12: `<rh-code-block>`: Added `highlighting="client"` for client-side syntax highlighting with Red Hat color scheme
- 82ffb12: `<rh-tag>`: added `href` attribute

  ```html
  <rh-tag icon="information-fill" href="/info">Info</rh-tag>
  ```

- 82ffb12: Theming: Added [theming tokens][theming] to most elements

  Theming tokens let authors respond to the currently-active color palette, and
  are especially useful when implementing [patterns][patterns] using themable
  elements.

  ```html
  <rh-card class="example-logo-text-and-cta">
    <p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>.</p>
    <rh-cta slot="footer" href="#">Call to action</rh-cta>
  </rh-card>

  <style>
    .example-logo-text-and-cta {
      width: 360px;
      & em {
        color: var(--rh-color-accent-base);
      }
    }
  </style>
  ```

  [theming]: ux.redhat.com/theming
  [patterns]: https://ux.redhat.com/patterns/

### Patch Changes

- 82ffb12: `<rh-audio-player>`: corrected focus when keyboard navigating options menu
- 82ffb12: `<rh-audio-player>`: use theme tokens
- 82ffb12: `<rh-accordion>`: Make `<rh-accordion-header>`'s bold.
- 82ffb12: `<rh-table>`: tables now adjust to the size of their containing element, not to the size of the viewport.
- 82ffb12: `<rh-accordion>`: removed arrow-key keyboard navigation in favor of tab navigation.
- 82ffb12: `<rh-audio-player>`: use official red hat icons
- 82ffb12: `<rh-tabs>`: tabs now adjust to the size of their containing element, not to the size of the viewport.
- 82ffb12: `<rh-alert>`: hide header when it is empty
- 82ffb12: `<rh-audio-player>`: add a playback control to the mini layout
- 82ffb12: `<rh-card>`: style some slotted links
- 82ffb12: `<rh-tile>`: corrected layout when rendering some image slotted elements
- 82ffb12: `<rh-tag>`: now supports color [theming](https://ux.redhat.com/theming/)
- 82ffb12: `<rh-tabs>`: allow tabs to participate in advanced layouts
- 82ffb12: `<rh-skip-link>`: ensure link is always at top of the page, per guidelines
- 82ffb12: `<rh-site-status>`: use `<rh-icon>` for status indicators

## 2.0.1

### Patch Changes

- 1ec3653: `<rh-footer-universal>`: improve compatibility with <abbr title="Server side rendering">SSR</abbr>
- f77af9a: `<rh-navigation-secondary>`: corrected visibility of the borders when using the dark color palette
- 1ec3653: `<rh-alert>`: fixed styles and typings for the `RhAlert.toast()` method
- fecbe5d: `<rh-button>`: corrected style issue which caused layout side effects
- 1ec3653: `<rh-icon>`: prevent error when hydrating server-side-rendered icons
- cb5e01a: `<rh-cta>`: corrected icon not loading on default variant
- f4fcd78: `<rh-back-to-top>`: builds-in the style guidelines in: back to top is fixed and always on top. Note that this change removes previously undocumented CSS custom properties `--rh-back-to-top-position-right` and `--rh-back-to-top-position-bottom`.
- 5323a21: `<rh-tooltip>`: added border radius style to match specifications
- b558e00: `<rh-navigation-secondary>`: corrected logo slot text line-height

## 2.0.0

### Major Changes

- fa2c4d2: `<rh-accordion>`: Removed the `heading-tag` and `heading-text` attributes from the `rh-accordion-header` element.
  `<h2>` (etc.) elements are no longer valid content for `<rh-accordion-header>`,
  but users are encouraged to wrap accordion headers in the appropriate heading element, in case javascript fails to load.

  Before:

  ```html
  <rh-accordion>
    <rh-accordion-header>
      <h2>First Header</h2>
    </rh-accordion-header>
    <rh-accordion-panel>...</rh-accordion-panel>
  </rh-accordion>
  ```

  After:

  ```html
  <rh-accordion>
    <h2><rh-accordion-header>First Header</rh-accordion-header></h2>
    <rh-accordion-panel>...</rh-accordion-panel>
  </rh-accordion>
  ```

- fa2c4d2: `<rh-accordion>`: removed the unused `icon` part and attribute from `<rh-accordion-header>`
- fa2c4d2: `<rh-accordion>`: removed the (previously undocumented) `container` part from `<rh-accordion-header>`
- fa2c4d2: `<rh-footer>`: removed deprecated `<rh-global-footer>` element and deprecated `global` slot. Use `<rh-footer-universal>` element and `universal` slot.

  Before:

  ```html
  <rh-footer>
    <!-- ... -->
    <rh-global-footer slot="global">
      <!-- ... -->
    </rh-global-footer>
  </rh-footer>
  ```

  After:

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

- fa2c4d2: `<rh-tabs>`: removed deprecated `RhTabs.isTab()` and `RhTabs.isPanel()` static class methods.
- fa2c4d2: `<rh-cta>`: removed read-only `cta` property; use `data-analytics` attributes instead
- fa2c4d2: Removed the `rhds.min.js` entrypoint and replaced it with a module that reexports all our element modules.

  Before:

  ```js
  import "@rhds/elements"; // get the minified bundle
  import "@rhds/elements/rh-cta/rh-cta.js";
  // => DOMException: 'rh-cta' has already been defined as a custom element
  ```

  After:

  ```js
  import "@rhds/elements"; // get the entrypoint module
  import "@rhds/elements/rh-cta/rh-cta.js";
  // => get the same module referenced in the entry point
  ```

- 8a061e9: `<rh-tabs>`: Removed the deprectated attribute that sets the theme for the tabs and panels
  Please use the `--rh-tabs-active-border-color` CSS property directly.

  Before:

  ```html
  <rh-tabs theme="base">
    <!-- ... -->
  </rh-tabs>
  ```

  After:

  ```html
  <rh-tabs
    style="--rh-tabs-active-border-color: var(--rh-color-border-interactive-on-light, #0066cc)"
  >
    <!-- ... -->
  </rh-tabs>

  <rh-tabs
    color-palette="darkest"
    style="--rh-tabs-active-border-color: var(--rh-color-border-interactive-on-dark, #92c5f9)"
  >
    <!-- ... -->
  </rh-tabs>
  ```

- 8e68a6a: `<rh-dialog>`: removed deprecated `--rh-modal-video-aspect-ratio` CSS custom property

  Before:

  ```css
  rh-dialog.custom-dialog {
    --rh-modal-video-aspect-ratio: 3/2;
  }
  ```

  After:

  ```css
  rh-dialog.custom-dialog {
    --rh-dialog-video-aspect-ratio: 3/2;
  }
  ```

- 8e68a6a: `<rh-footer>`: removed deprecated CSS custom properties

  Before:

  ```css
  rh-footer.custom-footer {
    --rh-color-link-inline-on-dark: cyan;
    --rh-color-link-inline-hover-on-dark: cornflowerblue;
    --rh-color-link-inline-focus-on-dark: cornflowerblue;
    --rh-color-link-inline-visited-on-dark: cornflowerblue;
  }
  ```

  After:

  ```css
  rh-footer.custom-footer {
    --rh-color-interactive-blue-lighter: cyan;
    --rh-color-interactive-blue-lightest: cornflowerblue;
  }
  ```

- fa2c4d2: `<rh-accordion>`: remove unused `bordered` attribute
- fa2c4d2: `<rh-spinner>`: remove deprecated `color-palette` attribute

  Before:

  ```html
  <rh-spinner color-palette="darkest"></rh-spinner>
  ```

  After:

  ```html
  <rh-surface color-palette="darkest">
    <rh-spinner></rh-spinner>
  </rh-surface>
  ```

- fa2c4d2: `<rh-cta>`: Removed previously-deprecated `color-palette` attribute

  Use themable containers (e.g. `<rh-surface>` or `<rh-card>`) instead.

  Before:

  ```html
  <rh-cta color-palette="dark" href="#default">Default</rh-cta>
  ```

  After:

  ```html
  <rh-surface color-palette="dark">
    <rh-cta href="#default">Default</rh-cta>
  </rh-surface>
  ```

- fa2c4d2: `<rh-alert>`: removed deprecated toast boolean attribute

  Before:

  ```html
  <rh-alert toast>
    <h3 slot="header">Default</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend
      elit sed est egestas, a sollicitudin mauris tincidunt.
    </p>
  </rh-alert>
  ```

  After:

  ```html
  <rh-alert variant="toast">
    <h3 slot="header">Default</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend
      elit sed est egestas, a sollicitudin mauris tincidunt.
    </p>
  </rh-alert>
  ```

- fa2c4d2: `<rh-table>`: removed deprecated CSS custom properties

  Before:

  ```css
  rh-table.custom-table {
    --rh-table-row-background-color: crimson;
    --rh-table-column-background-color: royalblue;
  }
  ```

  After:

  ```css
  rh-table.custom-table {
    --rh-table-row-background-hover-color: crimson;
    --rh-table-column-background-hover-color: royalblue;
  }
  ```

- fa2c4d2: `<rh-navigation-secondary>` removed deprecated alias `rh-secondary-nav`

  Before:

  ```html
  <rh-secondary-nav>
    <!-- ... -->
  </rh-secondary-nav>
  ```

  After:

  ```html
  <rh-navigation-secondary>
    <!-- ... -->
  </rh-navigation-secondary>
  ```

- 8e68a6a: `<rh-tabs>`: removed `box` and `vertical` attributes from `<rh-tab>`. Set them
  on `<rh-tabs>` instead.

  In most cases, you shouldn't need to update your templates, as long as `<rh-tabs>`
  has the right attributes

### Minor Changes

- fa2c4d2: ✨ Added `<rh-health-index>`

  Health index grades the health or security level of something.

  ```html
  <rh-health-index grade="A">A</rh-health-index>
  ```

- fa2c4d2: `<rh-alert>` added static `toast` method

  ```js
  import { RhAlert } from "@rhds/elements/rh-alert/rh-alert.js";

  RhAlert.toast({
    state: "warning",
    heading: "Careful",
    message: "Toast is high in calories!",
  });
  ```

- fa2c4d2: ✨ Added `<rh-video-embed>`

  A video embed is a graphical preview of a video overlayed with a play button. When clicked, the YouTube video will begin playing.

  ```html
  <rh-video-embed>
    <img
      slot="thumbnail"
      src="https://fakeimg.pl/900x499/282828/eae0d0"
      alt="Image description"
    />
    <template>
      <iframe
        title="Title of video"
        width="900"
        height="499"
        src="https://www.youtube.com/embed/Hc8emNr2igU"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerpolicy="strict-origin-when-cross-origin"
        allowfullscreen
      ></iframe>
    </template>
    <p slot="caption">
      <a class="rh-video-embed-caption-link" href="https://www.redhat.com/"
        >View the infographic</a
      >
    </p>
  </rh-video-embed>
  ```

- fa2c4d2: `<rh-pagination>`: ✨ Added open variant and small size

  Users can now further customize pagination by choosing which variant and size are most appropriate for their applications.

  ```html
  <rh-pagination variant="open" size="sm">
    <ol>
      <li><a href="#">1</a></li>
      <li><a href="#2">2</a></li>
      <li><a href="#3">3</a></li>
      <li><a href="#4">4</a></li>
      <li><a href="#5">5</a></li>
    </ol>
  </rh-pagination>
  ```

- fa2c4d2: `<rh-card>`: ✨ Added promo card variant

  The promo card variant allows users to easily display text and optionally an image side by side.

  ```html
  <rh-card variant="promo">
    <img
      slot="image"
      alt="product illustration"
      src="/assets/images/new-product.png"
    />
    <h2 slot="header">Try our new product</h2>
    <p>Our new product is the best in class.</p>
    <rh-cta slot="footer" href="#">Start a Free Trial</rh-cta>
  </rh-card>
  ```

- fa2c4d2: ✨ Added `<rh-breadcrumb>`.

  A breadcrumb navigation is a secondary navigation element consisting of a list of links to the parent pages of the current page in hierarchical order. It helps users find their place within a website or web application.

  ```html
  <rh-breadcrumb>
    <ol>
      <li><a href="../../../..">Home</a></li>
      <li><a href="../../../">About</a></li>
      <li><a href="#" aria-current="page">Our Team</a></li>
    </ol>
  </rh-breadcrumb>
  ```

- fa2c4d2: `<rh-pagination>`: ✨ Added support for dark color themes

  ```html
  <rh-surface color-palette="dark">
    <rh-pagination>
      <ol>
        <li><a href="#">1</a></li>
        <li><a href="#2">2</a></li>
        <li><a href="#3">3</a></li>
        <li><a href="#4">4</a></li>
        <li><a href="#5">5</a></li>
      </ol>
    </rh-pagination>
  </rh-surface>
  ```

- fa2c4d2: ✨ Added `<rh-icon>`.

  Icons represents general concepts and can support text as a decorative element. The `<rh-icon>` element allows experience and content authors to add Red Hat icons of varying dimensions in the same area without shifting surrounding content.

  ```html
  <rh-icon icon="alert"></rh-icon>
  ```

  `<rh-icon>` has experimental SSR support. It's not ready for production, but if you try it, let us know!

- fa2c4d2: `<rh-cta>`: Added `rh-cta-lightdom-shim.css` as an optional file to help reduce layout shift before element is defined, where declarative shadow DOM is not an option.
- fa2c4d2: `<rh-cta>`: added `href` attribute. When set, do not slot an anchor or button,
  instead, slot in the link text.

  These two are equivalent:

  ```html
  <rh-cta>
    <a href="/elements">Elements</a>
  </rh-cta>
  ```

  ```html
  <rh-cta href="/elements">Elements</rh-cta>
  ```

- fa2c4d2: `<rh-card>`: Added CSS custom properties for card headings:

  - `--rh-card-heading-font-family`
  - `--rh-card-heading-font-size`
  - `--rh-card-heading-font-weight`

- fa2c4d2: `<rh-cta>`: added `icon-set` attribute to better control icon loading

  ```html
  <rh-cta icon="success" icon-set="custom">...</rh-cta>
  ```

- fa2c4d2: ✨ Added `<rh-switch>`

  A switch toggles the state of a setting (between on and off). Switches and checkboxes can often be used interchangeably, but the switch provides a more explicit, visible representation on a setting.

  ```html
  <rh-switch id="switch-a" accessible-label="Switch A" checked>
    <span slot="message-on">Message when <strong>on</strong></span>
    <span slot="message-off">Message when <strong>off</strong></span>
  </rh-switch>
  ```

### Patch Changes

- fa2c4d2: `<rh-audio-player>`: enforce typography for headings
- fa2c4d2: `<rh-card>`: Corrected slotted header margin
- fa2c4d2: `<rh-tile>`: corrected border color token
- fa2c4d2: `<rh-tile-group>`: Corrected application of grid layout to slotted elements.
- fa2c4d2: `<rh-cta>`: lazy-load the icon component dependency
- fa2c4d2: `<rh-tag>`: update green border color
- fa2c4d2: `<rh-cta>`: corrected cta tokens public api
- fa2c4d2: `<rh-cta>`: Changed focus states to mimic hover states + an additional outline.
- fa2c4d2: `<rh-button variant="play">`: Play icon is now centered in the circle of the button.
- fa2c4d2: `<rh-breadcrumb>`: improved accessibility by adding underlines to links

  `<rh-navigation-secondary>`: improved accessibility by adding underlines to links

- fa2c4d2: `<rh-site-status>`: fix element layout
- 784da94: `<rh-navigation-secondary>`: corrected mobile menu keyboard accessibility, now properly closes when focus leaves
- fa2c4d2: `<rh-accordion-header>`: removed deprecated and unused `icon` property
- d564ef0: `<rh-navigation-secondary>`: improved accessibility
- fa2c4d2: `<rh-tile>`: Fixed the headline, title, body text, and footer font-sizes to match the Tile specs for both the default and compact variants

## 1.4.5

### Patch Changes

- 45ab120: **React**: resolve another syntax error in generated modules

## 1.4.4

### Patch Changes

- 0f94d81: **React**: corrected syntax errors in certain generated modules
- 0f94d81: **React**: moved files from `/react/elements/*` to `/react/*`, and updated the export map to match
- cbd7c6a: **Custom Elements Manifest**: corrected module paths in the manifest
- a5853c7: Copies lightdom CSS files into the package root, making it easier to use RHDS with CDNS like UNPKG.

## 1.4.3

### Patch Changes

- 8eebce6: `<rh-tabs>`: improved focus accessibility for keyboard navigation and assistive technology users.'

## 1.4.2

### Patch Changes

- 69e2cd9: `<rh-tabs>`: added support for rtl language overflow scroll buttons
- 1b20464: React: add generated react wrappers to NPM package
- 971214d: `<rh-site-status>`: automatically fetch status for the current domain
- 835a008: `<rh-card>`: hide header, body, or footer regions when they have no content
- 727c799: `<rh-card>`: applied heading font to card headings
- b443fe2: `<rh-code-block>`: corrected 'show more' button styles
- 8365fac: `<rh-tag>`: ensure correct font-family is used
- 2f1324e: `<rh-card>`: removes landmark semantics from card, simplifying page navigation for screen reader users

## 1.4.1

### Patch Changes

- 862380b: corrected `@patternfly/elements` dependency to be included with the package

## 1.4.0

### Minor Changes

- fecdcbf: `<rh-codeblock>`: added line numbers
- fecdcbf: ✨ Added `<rh-site-status>`

  Website status communicates the operational status of a website or domain using a status icon and link. It is usually located in the Footer component.

  ```html
  <rh-site-status></rh-site-status>
  ```

- fecdcbf: ✨ Added `<rh-back-to-top>`.

  Back to top component is a fragment link that allows users to quickly navigate to the top of a lengthy content.

  ```html
  <rh-back-to-top href="#top">Back to top</rh-back-to-top>
  ```

- fecdcbf: ✨ Added `<rh-skip-link>`.

  A skip link is used to skip repetitive content on a page. It is hidden by default and can be activated by hitting the "Tab" key after loading/refreshing a page.

  ```html
  <rh-skip-link>
    <a href="#main-content">Skip to main content</a>
  </rh-skip-link>
  ```

- fecdcbf: ⚛️ Added React wrapper components

  You can now more easily integrate RHDS elements into your React apps by importing our wrapper components

  First, make sure that you list `@lit/react` as a dependency in your project

  ```sh
  npm install --save @lit/react
  ```

  Then import the element components you need and treat them like any other react component

  ```js
  import { Tabs } from '@rhds/elements/react/rh-tabs/rh-tabs.js';
  import { Tab } from '@rhds/elements/react/rh-tabs/rh-tab.js';
  import { TabPanel } from '@rhds/elements/react/rh-tabs/rh-tab-panel.js';

  import { useState } from 'react';

  const tabs = [
    { heading: 'Hello Red Hat', content: 'Let\'s break down silos' },
    { heading: 'Web components', content: 'They work everywhere' }
  ];

  function App() {
    const [index, setExpanded] = useState(-1);
    return (
      <span>expanded {expanded}</span>
      <Tabs>{tabs.map(({ heading, content }, i) => (
        <Tab slot="tab" onExpand={() => setExpanded(i)}>{heading}</Tab>
        <TabPanel>{content}</TabPanel>))}
      </Tabs>
    );
  }
  ```

- fecdcbf: `<rh-codeblock>`: added `Show more` toggle
- fecdcbf: `<rh-codeblock>`: added copy and wrap actions, with localizable slots for the button labels

  ```html
  <rh-code-block actions="wrap copy">
    <span slot="action-label-copy">Copy to Clipboard</span>
    <span slot="action-label-copy" hidden data-code-block-state="active"
      >Copied!</span
    >
    <span slot="action-label-wrap">Toggle word wrap</span>
    <span slot="action-label-wrap" hidden data-code-block-state="active"
      >Toggle overflow</span
    >
    <script type="text/css">
      :host {
        display: block;
      }
    </script>
  </rh-code-block>
  ```

### Patch Changes

- fecdcbf: `<rh-menu>`: improved focus accessibility for keyboard navigation users on firefox
  `<rh-button>`: improved focus accessibility on firefox
- fecdcbf: `<rh-accordion>`: added a accents slot with placement options as inline and bottom
- fecdcbf: Context: aligned context implementation with updated [protocol defintions](https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md#definitions)
- fecdcbf: Update dependencies, including Lit version 3
- fecdcbf: `<rh-alert>`: make sure alerts always have to correct (lightest) color palette
- fecdcbf: `<rh-tabs>`: allow tabs with long text content to fit into different-sized containers

## 1.3.2

### Patch Changes

- 1d1640705: `<rh-tile>`: corrected icon slot visibility with a slotted icon
- d61b8dc71: `<rh-dialog>`: ensure that `cancel`, `open`, and `closed` events fire

## 1.3.1

### Patch Changes

- d87dfb94a: `<rh-tabs>`: fixed issue that stop tabs from correctly resizing on mobile
- 01f100cf8: `<rh-tile>`: fixed issue with click target area of tile
- 08722dd71: `<rh-table>`: corrected custom background hover color tokens.
- 4259ba0ed: `<rh-tabs>`: improved documentation

## 1.3.0

### Minor Changes

- 5e64235d5: `<rh-audio-player>`: added Hebrew translations
- 0829fa2c4: ✨ Added `<rh-surface>`.

  Surface is a container which sets background color and text color and provides that theme context to its child elements. Surface supports `darkest`, `darker`, `dark`, `light`, `lighter`, `lightest` color palettes.

  ```html
  <rh-surface color-palette="darker">
    <rh-cta><a href="#">Call to Action</a>
  </rh-surface>
  ```

- c9b81875e: `<rh-tabs-panel>`: adds ability to override panel margin and padding
- 31b28dcc6: `<rh-pagination>`: add `numeric` CSS shadow part, corresponding to the numeric page input

  Example: hiding the numeric paginator

  ```css
  rh-pagination::part(numeric) {
    display: none;
  }
  ```

- 05fbc275a: `<rh-tile>`: add `accessible-label` attribute to override form control label

  Accessible labels are visually hidden labels for form controls. In the case of
  `<rh-tile>`, they are optional, so long as the text content of the tile is
  already an accessible label for the control.

  Use `accessible-label` when you would like to label the form control with
  something other than the tile's text content, or when the tile has no text
  content.

  ```html
  <form>
    <rh-tile-group radio>
      <rh-tile name="radio" value="1">Tile 1</rh-tile>
      <rh-tile name="radio" value="2">Tile 2</rh-tile>
      <rh-tile name="radio" value="3" accessible-label="Tile 3">
        <img slot="image" role="presentation" src="tile-3.webp" />
      </rh-tile>
    </rh-tile-group>
  </form>
  ```

- 58ab8e60b: Uses `@rhds/tokens` - Red Hat Design Tokens - version 2!

  ⚠️ if your pages directly override "crayon" color values, (e.g. `--rh-color-red-50`)
  then this is a breaking change, since the token names have changed.

  However, if your project follows the theming guidelines and only overrides the
  semantic tokens, then you should automatically receive the new color values.

- 05fbc275a: `<rh-tile>`: radio and checkbox tiles now submit their values in `<form>` elements

### Patch Changes

- b123092da: `<rh-tabs>`: removed dependency on `@patternfly/elements` package.
- 5e64235d5: `<rh-alert>`: fix `<rh-button variant="link">` as slotted action
- 976981b0d: `<rh-alert>`: fix inline variant's styles
- 6a87885e8: `<rh-badge>`: remove dependency on `@patternfly/elements`
- 719873947: `<rh-blockquote>`: remove user-agent margin from blockquote, in accordance with [design guidelines][design]

  [design]: https://ux.redhat.com/elements/blockquote/style/

- fcf22f028: `<rh-button>`: remove dependency on `@patternfly/elements`
- 18f802f7f: `<rh-table>`: added color palette and theme support
- c0af10745: `<rh-card>`: improved styles for first body paragraph when there is other content displayed first
- 4f6ff65e7: `<rh-card>`: ensure footer is always on the bottom of the card
- 6e8fad64b: `<rh-card>`: adjust whitespace of card parts to suit design
- bf7c96ca4: `<rh-code-block>`: allow for pre-rendered (via prism.js) code blocks
- f969ff1f2: `<rh-tabs>`: fixed layout of non-vertical box variant tabs
- 54264f37c: `<rh-spinner>`: deprecates the `color-palette` attribute.
- 8cb9790e2: `<rh-tile>`: fixed cursor when arrow is hovered
- 976981b0d: `<rh-alert>`: remove padding for alerts which have only header content
- 976981b0d: `<rh-alert>`: make variants case-insensitive
- a6510e224: `<rh-tabs>`: adds default value for tab font-size
- eefc04cb9: `<rh-tooltip>`: fixes issue where content would take up unwanted space before the element fully upgraded
- 2137702b3: `<rh-footer-social-link>`: updated twitter logo with X
- 0254749cb: `<rh-tab-panel>`: removed unused color-palette attribute
- 8c5559cee: `<rh-dialog>`: remove the dependency on `@patternfly/elements`.
  _NOTE_: The `open`, `close`, and `cancel` events are no longer the same object constructor type as `<pf-modal>`, so `instanceof` checks may fail.
- 2eb82a822: `<rh-avatar>`: removed non-existent `name` slot from the element manifest.
  This doesn't change the element, only the documentation. Instead of `name`, use
  the anonymous slot:

  ```html
  <rh-avatar>
    <span>Title</span>
    <span slot="subtitle">Subtitle</span>
  </rh-avatar>
  ```

- 5e64235d5: `<rh-menu>`: support color context
- 6a134b5f4: `<rh-tag>`: remove dependency on `@patternfly/elements`
- 369d5b7cf: `<rh-card>`: collapses margins between header, body, and footer

  NOTE that this changes the default styling of the `header`, `body`, and `footer`
  CSS Shadow Parts. They previously used `padding` for layout, and now use `margin`.
  If you modified their padding via the `::part` selector, you will need to update your CSS

  Before:

  ```css
  .special-card::part(header) {
    padding: var(--rh-space-sm);
  }
  ```

  After:

  ```css
  .special-card::part(header) {
    margin-block-start: var(--rh-space-sm);
    margin-inline: var(--rh-space-sm);
  }
  ```

- 5e64235d5: `<rh-dialog>`: ensure dialog content is always on light theme
- 42c167f9e: `<rh-table>`: improved color palette styles
- 0d2d349d7: `rh-table`: corrected table height
- a1c587d1b: `<rh-navigation-secondary>`: adds current page indicator to logo slot
- c68165b4e: `<rh-tabs>`: adds deprecation notice on `theme` attribute
- 54264f37c: `<rh-spinner>`: remove dependency on `@patternfly/elements`
- baa382063: `<rh-accordion>`: fixed border color for dark color palettes
- fb9e3eac0: `<rh-accordion>`: remove dependency on `@patternfly/elements`
- d4e1ebd4b: `<rh-tag>`: while tag should not be used on dark contexts unless it has the
  `white` color, this change ensures that tags that are used on dark context will
  be legible.
- 422d6279b: `<rh-tile>`: ensure that tiles in a flex container grow along the cross axis
- 61ca7202d: `<rh-tooltip>`: remove dependency on `@patternfly/elements`
- b3f7b1877: `<rh-tile>`: added arrow animation on hover
- 9f1249474: `<rh-navigation-secondary>`: fixed initialization of current page indicator

## 1.2.0

### Minor Changes

- 35c28e72: Added `<rh-tile>`.

  Tile creates a component that can be used in place of a link, checkbox, or radio button selection.

  ```html
  <rh-tile-group radio>
    <rh-tile checked>
      <div slot="title">Title</div>
      <h2 slot="headline"><a href="#top">Link</a></h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <div slot="footer">Suspendisse eu turpis elementum</div>
    </rh-tile>

    <rh-tile>
      <div slot="title">Title</div>
      <h2 slot="headline"><a href="#top">Link</a></h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <div slot="footer">Suspendisse eu turpis elementum</div>
    </rh-tile>

    <rh-tile>
      <div slot="title">Title</div>
      <h2 slot="headline"><a href="#top">Link</a></h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <div slot="footer">Suspendisse eu turpis elementum</div>
    </rh-tile>
  </rh-tile-group>
  ```

- 9d3c7b09: ✨ Added `<rh-table>`.

  A table is a container for displaying information. It allows a user to scan, examine, and compare large amounts of data.

  ```html
  <rh-table>
    <table>
      <caption>
        Concerts
      </caption>
      <colgroup>
        <col />
        <col />
        <col />
      </colgroup>
      <thead>
        <tr>
          <th scope="col" data-label="Date">Date</th>
          <th scope="col" data-label="Event">
            Event<rh-sort-button></rh-sort-button>
          </th>
          <th scope="col" data-label="Venue">
            Venue<rh-sort-button></rh-sort-button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-label="Date">12 February</td>
          <td data-label="Event">Waltz with Strauss</td>
          <td data-label="Venue">Main Hall</td>
        </tr>
        <tr>
          <td data-label="Date">24 March</td>
          <td data-label="Event">The Obelisks</td>
          <td data-label="Venue">West Wing</td>
        </tr>
        <tr>
          <td data-label="Date">14 April</td>
          <td data-label="Event">The What</td>
          <td data-label="Venue">Main Hall</td>
        </tr>
      </tbody>
    </table>
    <small slot="summary">Dates and venues subject to change.</small>
  </rh-table>
  ```

- 39e76fc6: `rh-card`: `header` slot now displays items vertically instead of stacked, allowing for more than one item to display in the header.

  Example:

  ```html
  <rh-card>
    <img slot="header" src="kitten-400x250.jpeg"></img>
    <h2 slot="header">Headline, sm</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Nullam eleifend elit sed est egestas, a sollicitudin mauris
       tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
       felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
    <rh-cta priority="primary" slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>
  ```

- c9780fc2: ✨ Added `<rh-timestamp>`.

  Provides consistent formats for displaying date and time values.

  ```html
  <rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400"
    >Tue Aug 09 2006 14:57:00 GMT-0400</rh-timestamp
  >
  ```

### Patch Changes

- f4fcb1f3: `<rh-navigation-secondary>`: improved keyboard navigation
- 681519b5: `<rh-avatar>`:
  `<rh-code-block>`:
  `<rh-navigation-secondary>`: Updated custom elements manifest summaries
- ed6ff92e: `<rh-navigation-secondary>`: corrected and updated support for current page indicator
- a6ca3987: `<rh-cta>`: `brick` variants are now full width.

  `<rh-cta variant="brick">` should only be used within grids. Check your layouts to make sure they adhere to the guidelines.

- 0c2d42b1: `<rh-tabs>`: corrects the custom element manifest's event name for the `expand` event
- 7e2c9bb6: `<rh-cta>`: adds `color-palette` attribute back with deprecation notice

## 1.1.1

### Patch Changes

- ab339ac6: `<rh-tag>`: outline variant should now get the correct background styles added.
- f79543b7: `<rh-avatar>`: uses SVG for default images instead of much larger base-64 PNG images
- 77fa329a: `<rh-audio-player>`: Added @csspart docs.
- f0f66ec2: `<rh-tabs>`: fixed vertical tabs text alignment
- 716b52d1: `<rh-cta>` and other elements: color context support
- cf8ee6cb: `<rh-audio-player>`: corrected subscribe slot documentation.
- d709896f: `<rh-cta>`: corrected layout of icon brick variant
- d709896f: `<rh-cta>`: ensured entire CTA is clickable
- d709896f: `<rh-cta>`: fix a style bug which affects CTA links at narrow widths
- ff90f4d6: `<rh-footer>`: prevent an error when using footer and react in certain chrome versions
- 44a444a5: `<rh-navigation-secondary>`: corrected navigation bar height for small and large viewports'

## 1.1.0

### Minor Changes

- 9eedf473: `<rh-tag>`: added `outline` variant
- bc0fd968: ✨ Added `<rh-card>`.

  Card creates a component with a header, body, and footer. The header and footer are optional.

  ```html
  <rh-card>
    <h2 slot="header">Headline, sm</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend
      elit sed est egestas, a sollicitudin mauris tincidunt. Pellentesque vel
      dapibus risus. Nullam aliquam felis orci, eget cursus mi lacinia quis.
      Vivamus at felis sem.
    </p>
    <rh-cta slot="footer">
      <a href="#">Call to action</a>
    </rh-cta>
  </rh-card>
  ```

- b4815ae7: ✨ Added `<rh-audio-player>`.

  Audio-player creates a custom UI for audio files.

  ```html
  <rh-audio-player>
    <h3 slot="title">Rethinking Networks In Telecommunications</h3>
    <p slot="series">Code Comments</p>
    <audio crossorigin="anonymous" slot="media" controls>
      <source type="audio/mp3" srclang="en" src="./rethinking.mp3" />
    </audio>
  </rh-audio-player>
  ```

- d784f716: ✨ Added `<rh-code-block>`.

  A container for a block of code. May be composed into a toolbar or contain copy buttons or other interactive components.

  ```html
  <rh-code-block>
    <script type="text/text">
      Error: Error creating network Load Balancer: AccessDenied: User:
      arn:aws:sts::970xxxxxxxxx:assumed-role/ManagedOpenShift-Installer-Role/163xxxxxxxxxxxxxxxx is
      not authorized to perform: iam:CreateServiceLinkedRole on resource:
      arn:aws:iam::970xxxxxxxxx:role/aws-service-role/elasticloadbalancing.amazonaws.com/
      AWSServiceRoleForElasticLoadBalancing
    </script>
  </rh-code-block>
  ```

- b2e607bd: `<rh-tooltip>`: [added][commit] new CSS custom properties:

  - `--rh-tooltip-arrow-size`
  - `--rh-tooltip-content-background-color`
  - `--rh-tooltip-content-color`
  - `--rh-tooltip-content-font-size`
  - `--rh-tooltip-content-padding-block-end`
  - `--rh-tooltip-content-padding-block-start`
  - `--rh-tooltip-content-padding-inline-end`
  - `--rh-tooltip-content-padding-inline-start`
  - `--rh-tooltip-max-width`

  [commit]: https://github.com/RedHat-UX/red-hat-design-system/commit/b2e607bd99f9ff879295b8d6a86d82e353f0ac9a

### Patch Changes

- fca74374: Updated design system token metadata in custom elements manifest
- 9eedf473: `<rh-tag>`: support dark color context
- 4861f8a8: `<rh-navigation-secondary>`: corrected css parts and css properties manifest documentation
- 1a569a2d: `<rh-accordion>`: corrected and updated custom elements manifest
- 9acd4e0f: `<rh-tabs>`: Vertical tabs on small screen size `<768px` will display as a horizontal
- 760ef109: `<rh-footer>`: corrected and updated custom elements manifest
- c92f29f9: Adds `<rh-context-picker>` element in `/lib`. Moves the undocumented
  `<rh-context-provider>` element to `/lib`, and adds a deprecation warning.
- 2245dfe0: `<rh-footer>`: contain focus outline to the width of the link text
- b2e607bd: `<rh-tooltip>`: corrected and updated custom elements manifest
- 3785dfc0: `<rh-tabs>`: reduced padding on overflow scroll buttons
- a99c620a: `<rh-subnav>`: decreased padding on overflow buttons.
- 0504e5c5: `rh-footer`: fixes mobile layout on initial load
- 86c606bb: `<rh-button>`: corrected and updated custom elements manifest
- f42910c3: `<rh-badge>`: corrected and updated custom elements manifest
- cced7a49: prevent "command not found" error which could occur when installing the npm
  package in certain situations
- ee37ace4: `<rh-alert>`: clarify that the `variant` attribute takes values: `alternate`,
  `inline` (default) or `toast`
- f4ff68dc: `<rh-avatar>`: corrected css custom property data type in custom elements manifest
- b4815ae7: `<rh-avatar>`: fixed styles for names, links
- b4815ae7: `<rh-avatar>`: fix bug which could hide the name of the avatar's subject if the element contains whitespace.
- de61361d: `<rh-cta>`: make the entire background clickable
- b5333ad8: `<rh-navigation-secondary>`: fix unclosed `cta` slot tag
- de6c5869: `<rh-pagination>`: prevent false content validation warning
- 06252186: `<rh-pagination>`: fix for pagination in right-to-left contexts
- 4e272629: `<rh-spinner>`: updated and corrected custom elements manifest
- 58124c4a: `<rh-tabs>`: corrected and updated custom elements manifest
- 58124c4a: `<rh-tabs>`: replaced nonexistent `--rh-spacer-xl` token with the correct name `--rh-space-xl`
- 04573fa2: `<rh-accordion>`: fixed keyboard navigation inside of nested accordions
- 469a1c53: `<rh-navigation-secondary>`: reduce, validate, and simplify styles
- 71dd262c: `<rh-tag>`: improve loading performance by removing unnecessary imports
- 81c1676a: `<rh-subnav>`: corrected default background color to `@rhds/tokens` value
- a0d20b6d: `<rh-alert>`: corrected css for header font-weight and padding

## 1.0.1

### Patch Changes

- 12b71432: `<rh-accordion>`: fixed font-weight of focused or active header
- bac2b97c: `<rh-tabs>`: improved accessibility by updating PatternFly Elements
  dependencies. Assigns random IDs to tabs if none is provided.
- 0f5ecacb: `<rh-alert>`: fixed font-family for header slot

## 1.0.0

### Major Changes

- acbb034d: `<rh-navigation-secondary>`: renamed `rh-secondary-nav` to
  `rh-navigation-secondary`

  - Renamed all sub components `rh-secondary-nav-*` to `rh-navigation-secondary-*`
  - Renamed all css custom properties `--rh-secondary-nav-*` to `--rh-navigation-secondary-*`
  - Deprecated usage of `rh-secondary-nav-*` tags

- 16f2cf09: **Color Context**: Removed deprecated context tokens
- 8f533e50: ✨ Added `<rh-cta>`.

  A Call to Action is a styled link that directs a user to other pages or
  sometimes displays hidden content.

  ```html
  <rh-cta>
    <a href="/subscribe">Subscribe</a>
  </rh-cta>
  ```

  **Color Contrast**: added color context decorators and controllers.

- 96731e4c: 💱 Renamed `<rh-global-footer>` to `<rh-footer-universal>`
  💱 `<rh-footer>`: Renamed the `global` slot to `universal`

  Until the next major release, `<rh-global-footer>` will continue to work as an
  alias of `<rh-footer-universal>`, and the `global` slot will continue to work as
  the default content of the `universal` slot.

- 58831e00: ✨ Added `<rh-global-footer>` standalone component.

  Global footer only

  ```html
  <rh-global-footer> ... </rh-global-footer>
  ```

  Usage in <rh-footer>

  ```html
  <rh-footer>
    ...
    <rh-global-footer slot="global">...</rh-global-footer>
  </rh-footer>
  ```

  Adds font-size initial and em values instead of px values for a11y.
  Allow user stylesheet to increase and decrease font-size.

  https://github.com/RedHat-UX/red-hat-design-system/issues/312

  Fixes double border on mobile.

  https://github.com/RedHat-UX/red-hat-design-system/issues/392

  Removes `is-mobile` attribute

- 80c58924: `<rh-navigation-secondary>`: fixed incorrect color map for dark variant
  `color-palette="darker"` to `color-palette="dark"`
- 0266dd0f: `<rh-secondary-nav>`: removed the `main` boolean attribute in favour of
  `aria-label`.

  If before you used the `main` boolean attribute to set the `aria-label` of the
  shadow navigation, now, just use `aria-label` on the host.

  BEFORE:

  ```html
  <rh-secondary-nav role="navigation">
    <!-- shadow label for nav is "secondary" -->
  </rh-secondary-nav>
  <rh-secondary-nav role="navigation" main>
    <!-- shadow label for nav is "main" -->
  </rh-secondary-nav>
  ```

  AFTER:

  ```html
  <rh-secondary-nav role="navigation">
    <!-- shadow label for nav is "secondary" -->
  </rh-secondary-nav>
  <rh-secondary-nav role="navigation" aria-label="Hlavná">
    <!-- shadow label for nav is "Hlavná" -->
  </rh-secondary-nav>
  ```

- 80c58924: `<rh-secondary-nav>`: replaced `variant="dark"` attribute with
  `color-palette="darker"`
- 5841b46b: `<rh-footer>`: removed the side-effect free `RhFooter.js` module.

  If you were relying on this to extend `RhFooter`, instead import from `rh-footer.js` or use `whenDefined`, Note that `rh-footer` will be registered already, so choose a new custom element name.
  BEFORE:

  ```js
  import { RhFooter } from "@rhds/elements/rh-footer/RhFooter.js";
  ```

  AFTER:

  ```js
  import { RhFooter } from "@rhds/elements/rh-footer/rh-footer.js";
  ```

  or

  ```js
  const RhFooter = await customElements.whenDefined("rh-footer");
  ```

  **NOTE**: `<rh-footer>` is carefully developed to adhere to brand guidelines. If you find that your project has need to `extend RhFooter`, please reach out to the design systems team, so that we can work with you to use `<rh-footer>` as-is.

### Minor Changes

- 172bacfb: ✨ Added `<rh-spinner>`.

  Spinner consists of an animated circle and sometimes a message, and it indicates
  that a section is loading.

  ```html
  <rh-spinner> Loading... </rh-spinner>
  ```

- e40e87dc: ✨ Added `<rh-button>`.

  Button is a form-associated custom element. Buttons allow users to
  perform an action when triggered. They feature a text label, a background or a
  border, and icons.

  ```html
  <rh-button>Submit</rh-button>
  ```

- 99cf19e9: ✨ Added `<rh-tag>`.

  A tag is an inline-block element component that provides a distinct visual style for metadata in a UI. Supports adding icon by attribute or slotted.

  ```html
  <rh-tag>Content</rh-tag>
  ```

- ba05def7: ✨ Added `<rh-blockquote>`.

  Displays a quote with author's name and title.

  ```html
  <rh-blockquote>
    <p slot="quote">
      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>
  ```

- 4725692d: `<rh-footer>`: fixed sidegap spacing, introduced a new CSS custom property `--rh-footer-section-side-gap`.

  ```css
  rh-footer.custom-gap {
    /* use a larger gap in the footer */
    --rh-footer-section-side-gap: var(--rh-space-xl);
  }
  ```

- 5376e551: ✨ Added `<rh-subnav>`.

  The subnav component is used when an alternate navigation structure is needed to provide additional navigatation on a site that does not need the product branding or structural depth that `rh-secondary-nav` provides

  ```html
  <rh-subnav>
    <a href="#">Users</a>
    <a href="#">Containers</a>
    <a href="#">Databases</a>
    <a href="#" active>Servers</a>
    <a href="#">System</a>
    <a href="#">Network</a>
    <a href="#">Cloud</a>
  </rh-subnav>
  ```

- 0ed6700c: ✨ Added `<rh-tabs>`.

  A tab set of layered content, including tab widgets and their associated tab
  panel. When a tab is activated, the associated panel content becomes visible.
  Tabs automatically display their panel when they receive focus.

  ```html
  <rh-tabs>
    <rh-tab>Tab 1</rh-tab>
    <rh-tab-panel>Panel 1</rh-tab-panel>
    <rh-tab>Tab 2</rh-tab>
    <rh-tab-panel>Panel 2</rh-tab-panel>
  </rh-tabs>
  ```

- de7fd69b: ✨ Added `<rh-context-provider>`.

  Component meant to be used internally within rh-elements shadow templates or
  demos to override color context.

  `<rh-dialog>`:

  - [fixed][overrides] the color context overrides for slotted content.
  - renamed the `variant` attribute to `type`.

  [overrides]: https://github.com/patternfly/patternfly-elements/pull/2036#issuecomment-1134460631

- f58c607e: ✨ Added `<rh-accordion>`.

  Accordion displays multiple, related disclosure widgets.

  ```html
  <rh-accordion>
    <rh-accordion-header>
      <h2>Item One</h2>
    </rh-accordion-header>
    <rh-accordion-panel>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </rh-accordion-panel>
    <rh-accordion-header>
      <h2>Item Two</h2>
    </rh-accordion-header>
    <rh-accordion-panel>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </rh-accordion-panel>
    <rh-accordion-header>
      <h2>Item Three</h2>
    </rh-accordion-header>
    <rh-accordion-panel>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </rh-accordion-panel>
  </rh-accordion>
  ```

- b8af17ca: ✨ Added `<rh-alert>`.

  An alert displays auxiliary information on a website. An alert can have one of
  several states of severity.

  ```html
  <rh-alert>
    <h3 slot="header">Default</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend
      elit sed est egestas, a sollicitudin mauris tincidunt.
    </p>
    <button slot="actions" data-action="dismiss">Dismiss</button>
    <button slot="actions" data-action="confirm">Confirm</button>
  </rh-alert>
  ```

- 110def91: ✨ Added `<rh-avatar>`

  An Avatar is a placeholder graphic for a photo or an image that is placed to the
  left or on top of text.

  ```html
  <rh-avatar
    name="Grace Hopper"
    subtitle="Rear Admiral"
    src="hopper.jpg"
  ></rh-avatar>
  ```

- b625710c: ✨ Added `<rh-footer>`.

  ```html
  <rh-footer>
    <a slot="logo" href="/en">
      <img
        alt="Red Hat logo"
        src="https://static.redhat.com/libs/redhat/brand-assets/2/corp/logo--on-dark.svg"
      />
    </a>
    <rh-footer-social-link slot="social-links-end" icon="web-icon-github">
      <a aria-label="Github" href="#github">Github</a>
    </rh-footer-social-link>
    <h3 slot="links">Products</h3>
    <ul slot="links">
      <li><a href="#">Red Hat Ansible Automation Platform</a></li>
      <li><a href="#">Red Hat Enterprise Linux</a></li>
      <li><a href="#">Red Hat OpenShift</a></li>
      <li><a href="#">Red Hat OpenShift Container Storage</a></li>
      <li><a href="#">Red Hat OpenStack Platform</a></li>
      <li><a href="#">See all products</a></li>
    </ul>
    <h3 slot="links">Tools</h3>
    <ul slot="links">
      <li><a href="#">My account</a></li>
      <li><a href="#">Customer support</a></li>
      <li><a href="#">Red Hat OpenShift</a></li>
      <li><a href="#">Contact training</a></li>
      <li><a href="#">Red Hat OpenStack Platform</a></li>
      <li><a href="#">See all products</a></li>
    </ul>
    <rh-footer-block slot="main-secondary">
      <h3 slot="header">About Red Hat</h3>
      <p>
        We’re the world’s leading provider of enterprise open source
        solutions―including Linux, cloud, container, and Kubernetes. We deliver
        hardened solutions that make it easier for enterprises to work across
        platforms and environments, from the core datacenter to the network
        edge.
      </p>
    </rh-footer-block>
    <rh-footer-block slot="main-secondary">
      <h3 slot="header">Subscribe to our free newsletter, Red Hat Shares</h3>
      <rh-cta><a href="#blocks">Sign up now</a></rh-cta>
    </rh-footer-block>
    <h3 slot="footer-links-primary" hidden>Red Hat legal and privacy links</h3>
    <ul slot="footer-links-primary">
      <li><a href="#">About Red Hat</a></li>
      <li><a href="#">Jobs</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">Locations</a></li>
      <li><a href="#">Contact Red Hat</a></li>
      <li><a href="#">Red Hat Blog</a></li>
      <li><a href="#">Cool Stuff Store</a></li>
      <li><a href="#">Diversity, equity, and inclusion</a></li>
    </ul>
    <rh-footer-copyright slot="footer-links-secondary"></rh-footer-copyright>
  </rh-footer>
  ```

- 86d075e8: `<rh-secondary-nav>`: match the default color-palette to design spec, use token
  color values
- c677b9e8: ✨ Added `<rh-pagination>`.

  Pagination is a Web Component for navigating paginated content.

  ```html
  <rh-pagination>
    <ol>
      <li><a href="#">1</a></li>
      <li><a href="#2">2</a></li>
      <li><a href="#3">3</a></li>
      <li><a href="#4">4</a></li>
      <li><a href="#5">5</a></li>
    </ol>
  </rh-pagination>
  ```

  Read more on the [Pagination docs](https://ux.redhat.com/elements/pagination/)

- 32489905: ✨ Added `<rh-stat>`.

  An element which can be used to display statistics inside of an app.

  ```html
  <rh-stat size="large" icon="rh-atom">
    <span slot="title">Stat Title</span>
    <span slot="statistic">Stat</span>
    <span slot="description"
      >Stat body text that includes two lines and a footnote<sup>2</sup></span
    >
  </rh-stat>
  ```

- ffc4dddf: ✨ Added `<rh-badge>`.

  A badge is used to annotate other information with numerical content.

  ```html
  <rh-badge number="1">1</rh-badge>
  ```

- 8edb3df8: ✨ Added `<rh-secondary-nav>`.

  A non-primary navigation for products and subcategory pages.

  ```html
  <rh-secondary-nav role="navigation">
    <a href="#" slot="logo">Logo</a>
    <ul slot="nav">
      <li><a href="#">Link 1</a></li>
      <li>
        <rh-secondary-nav-dropdown>
          <a slot="link">Link 2</a>
          <rh-secondary-nav-menu slot="menu">
            <rh-secondary-nav-menu-section>
              <h3 slot="header">Title of Links</h3>
              <ul slot="links">
                <li><a href="#">Link 2.1</a></li>
                <li><a href="#">Link 2.2</a></li>
              </ul>
            </rh-secondary-nav-menu-section>
          </rh-secondary-nav-menu>
        </rh-secondary-nav-dropdown>
      </li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </rh-secondary-nav>
  ```

  lib: renamed `RHDSScreenSizeController` to `ScreenSizeController`.
  lib: updated `matchMedia()` breakpoints in `ScreenSizeController` to use
  `min-width` values for standard breakpoints

- b940eab4: ✨ Added `<rh-tooltip>`.

  A tooltip displays floating content next to a portion of inline content.

  ```html
  <p>
    Red Hat Design System is an interoperable
    <rh-tooltip position="top">
      <rh-icon icon="info" aria-label="information"></rh-icon>
      <span slot="content"
        >Interoperable components work in any frontend framework, or none</span
      >
    </rh-tooltip>
    set of components with Red Hat branding guidelines built in.
  </p>
  ```

- 0703a7ea: `<rh-tooltip>`: improved performance and removed need for `process.env.NODE_ENV`
- e59eceab: ✨ Added `ScreenSizeController`

  ```js
  import { ScreenSizeController } from '../../lib/ScreenSizeController.js';

  export class RhPagination extends LitElement {

    #screenSize = new ScreenSizeController(this);

    render() {
      const { mobile, size } = this.#screenSize;
      return html`
      <div id="container" class=${classMap({ mobile, [size as string]: true })}>
        ...
      </div>
      `
    }
  }
  ```

### Patch Changes

- aa2d5b40: `<rh-tooltip>`: calculated the tooltip offset when the element is first updated
- 1f196b58: `<rh-stat>`: fixed several bugs
  - **BREAKING**: removed `@pfelement` decorator
  - **BREAKING**: removed `is-mobile` attribute
  - **BREAKING**: removed `description` slot, replace with anonymous slot
  - replaced internal `MatchMediaController` with `ScreenSizeController`
  - documented slots and css properties
  - hid empty slots
  - made `updateIcons` method private, and refactor it to run on slot
    change and affect only the icon slotted into `icon`
  - initialized properties in class field initializers
- b627f538: `<rh-secondary-nav>`: fixed bugs:
  - Moved overflow from mobile menu list to outer container
  - Fixed border on dark variant in compact view
- 139044fe: `<rh-secondary-nav>`: added `mobile-menu` slot to allow for translations, RTL
  support.
- 84da26fd: `<rh-footer>`: corrected href for footer logo links. They were incorrectly pointing
  to the `href="/en"` url. They have been changed to `href="/"`.
- fd78f884: `<rh-footer>`: fixed styles when used on redhat.com
- 86d075e8: **Color Context**: added missing `light` color palette option
- aa2d5b40: `<rh-blockquote>`: added color context and updated style tokens
- b7aa79aa: **Color Context**: added `attribute` option to `@colorContextConsumer` (defaults
  to `false`), allowing elements to make their context private to the shadow DOM.
- da26ab31: `<rh-alert>`: clicking close button now removes the element.
- d36937b3: `<rh-button>`: improved readability of `<rh-button danger>` in dark color contexts.
- 41e27ddc: `<rh-tag>`: fixed styles and tests connected with upstream changes in `BaseLabel`
- 2831b7e5: Improves page-loading performance of individual elements
- 4d5a5385: `<rh-secondary-nav>`: updated demos
- 96453bf6: `<rh-navigation-secondary>`: realigned `color-palette` default to new surface
  token values
- eea1ec17: `<rh-footer>`: prevent warnings in certain JavaScript frameworks
- 94eeec07: `<rh-global-footer>`: fixed logo links, as per `<rh-footer>`
- 17d5bf87: `<rh-footer>`: fixed primary columns not being equal.
- 185df893: **Color Context**: fixed context features, making sure they update the host
  element.
- b6cd5137: `<rh-footer>`: fixed several bugs:
  - secondary start slot not being used but still showing gap #488
  - two column breakpoint on global footer not present #496
  - tertiary slot in global footer has a margin-start padding that needs to be removed #498
  - reduce the spacing beneath the primary footer nav / language switcher to match the xd #499
    - corrected the margin at Tablet, landscape breakpoint to 64px
  - add max-width on footer-block child elements #524
  - social icon size changed to 24px down from 28px (band aide) #525
  - add no-js styles to reduce flash of unstyled content before upgrade #543
  - remove Summit logo #534
  - ensure blocks in main secondary are flush to the top of the region
  - header colors are being overwritten by base styles. #563
- 9bf77eb7: `<rh-subnav>`: Added `rh-subnav-lightdom.css` to reduce layout shift before element is defined
- db3c6af1: `<rh-spinner>`: made color context implementation private (removed `on`
  attribute).
- ac4ef8fc: `<rh-footer>`: main footer logo fills height first
- e2d0e2a8: `<rh-cta>`: ensured that arrow in default CTAs is aligned to the end of the last line of text
- 54a2bbcc: `<rh-alert>`: fixed empty footer actions container still taking up blockwise
  space.
- 52476709: `<rh-footer>`: fixed several bugs:
  - links should be styled to match dark context colors. #307
  - `social-links` slot should not override the `social-links` internal
    `rh-footer-links`
  - `social-links` hrefs should point to the default RHDC links
- ee8e16d1: `<rh-secondary-nav>`: updated styles for `rh-context-provider` in shadowroot to
  ensure cta centering.

  **Color Context**: added `light` and `dark` context-color css rules to match
  surface tokens `--rh-color-surface-light` and `--rh-color-surface-dark`

- d46168fe: `<rh-subnav>`:
  - Applies `!important` to ensure slotted links styles
- 99a1e142: `<rh-secondary-nav>`:
  - Removed component scaling with user font size preference by replacing em based spacers with space tokens.
  - Updated font-family stacks with font tokens
  - Fixed nav bar height not adjusting when logo text wraps to 3 lines
  - Fixed button background on color-palette="darker"
  - Fixed focus out handler bug closing menu when clicking on flyout menu
- b04d8c8f: chore: included lib directory in npm package.
- 09996556: `<rh-cta>`: fixed layout when using the `icon` attribute
- 1a6cfee7: chore: added missing `tslib` dependency
- c6d26a43: `<rh-footer>`: added TypeScript types for the `rh-footer` tag name.
- ce2ce34a: chore: added missing development dependencies
- 750f451a: Added support for PFE 2.0 icon color in rh-footer
- fe8f11f6: `<rh-stat>`: fixed dark theme font color contrast.
- 42331698: Fixed nested color contexts
- 7f1ae4a8: `<rh-footer>`: fix typography in various page contexts ([#790][issue])

  [issue]: https://github.com/RedHat-UX/red-hat-design-system/issues/790

- d6de21ae: chore:
  - added tsconfig to pfeDevServerConfig in `web-dev-server.config.js` and `web-test-runner.config.js`
  - unpinned pfe-tools version.
- 3d579793: **Color**: replace "danger" red colors with non-brand reds
- 9229f99a: `<rh-alert>`: prevent page styles from overriding component styles
- e40e87dc: `<rh-context-provider>`: notify children of context when adding them using javascript.
- e40e87dc: `<rh-context-provider>`: set color context, rather than palette, on consumers
- 33aa1846: `<rh-cta>`: ensure slotted links are clickable
- b02d46c5: `<rh-footer-universal>`: improves layout of copyright statement
- 54ce28ab: `<rh-footer>`: improved loading performance for minified bundles
- 15b1100c: `<rh-footer>`: fixed layout at exactly 992px screen width
- f2cb6393: `<rh-footer>`: improved support for screen readers
- f2cb6393: `<rh-footer-universal>`: improved support for screen readers
- 94b43fcc: `<rh-footer-universal>`: improved accessibility for screen reader users, and others
- 694fd26b: `<rh-alert>`: fixed typography and description margins, and added a cursor style
  for the slotted actions.
- 6f29b7ca: `<rh-alert>`: used design tokens for icon dimensions
- 0d802409: css:

  - added missing `font-family` stacks when base css isn't applied
  - [Red Hat Design Tokens][tokens] for font family stacks

  * fixed a regression in spacing for slotted `<rh-cta>`

  [tokens]: https://github.com/redhat-ux/red-hat-design-tokens/

- 57f660c4: `<rh-cta>`: made color context implementation private (removed `on` attribute).
- 69abc30a: minor fixes:
  - included lightdom styles in the package.
  - prevented custom element double-registration by removing PFE dependencies.
- 620b59a2: chore: shipped the files in `lib` to npm
- e36bf5c6: `<rh-accordion>`: prevented unwanted scrollbars from appearing in headers
- b23a8038: `<rh-tooltip>`: fixed tooltips on dark contexts
- 38a788cf: `<rh-alert>`,
  `<rh-cta>`,
  `<rh-footer>`,
  `<rh-secondary-nav>`,
  `<rh-stat>`: added [Red Hat Design Tokens][tokens].

  `<rh-cta>`: fixed layout styles.

  `<rh-footer>`:

  - fixed primary links grid gap spacing on desktop
  - added parts for accordion header/panel

  [tokens]: https://red-hat-design-tokens.netlify.app

- 2efcf306: `<rh-secondary-nav>`:
  - fixed the nav level slotted cta color context when viewed in a mobile nav dropdown
  - fixed `:hover` color for dark variant logo text
- 448e4543: `<rh-footer>`: fixed a console error which would fire if the icon was not found
- d7af0721: `<rh-secondary-nav>`: updated documentation
- 9087c137: `<rh-footer>`: reduce bundle size when loading footer with other RHDS elements
- ccd0e376: `<rh-accordion>`: fixed double border on expanded state
- ccd0e376: `<rh-footer>`: fixed accordion styles at mobile screen sizes ([#707][issue])

  [issue]: https://github.com/RedHat-UX/red-hat-design-system/issues/707

- 6f8c8e79: `<rh-footer>`: fixed representation of social media links list for assistive technologies
- 399bca02: `<rh-cta>`: made inner border visible in focus and active states
- c269740d: `<rh-tabs>`: fixed color context default values
- ba3e8474: `<rh-footer>`: grid areas show gap regardless of existing ([#575][issue]).

  [issue]: https://github.com/RedHat-UX/red-hat-design-system/issues/575

- a76169e3: added the `lib/` directory to the exports in `package.json`.
  Users can now do things like import controllers into their own projects:

  ```js
  import { ScreenSizeController } from "@rhds/elements/lib/ScreenSizeController.js";
  ```

- 73a4a9ef: `<rh-footer>`: update icons
- 52b9fce3: `<rh-subnav>`: improved accessibility for keyboard users
- c38202a3: `<rh-spinner>`: added tokens to standardize styling for slotted text
- c0001bcf: `<rh-secondary-nav>`: update build dependencies
- 4f52fbb5: `<rh-tooltip>`: improved screen reader support
- 034e28d4: `<rh-blockquote>`: added [Red Hat Design Tokens][tokens].

  [tokens]: https://red-hat-design-tokens.netlify.app

- d2e77b5b: `<rh-tooltip>`: removed `on` attribute
- 21da484a: `<rh-accordion>`: fixed styles for RTL languages.
- 3edd725f: `<rh-cta>`: fixed styles
- b7aa79aa: `<rh-stat>`: fixed `icon` slot and attribute
- 7001943c: `<rh-cta>`: hide arrow from assistive tech

## 1.0.0-beta.34

### Patch Changes

- d46168fe: `<rh-subnav>`:
  - Applies `!important` to ensure slotted links styles
- fd3e0663: Removed undocumented `rh-demo` element

## 1.0.0-beta.33

### Major Changes

- acbb034d: Renamed `rh-secondary-nav` to `rh-navigation-secondary`

  - Renamed all sub components `rh-secondary-nav-*` to `rh-navigation-secondary-*`
  - Renamed all css custom properties `--rh-secondary-nav-*` to `--rh-navigation-secondary-*`
  - Deprecated usage of `rh-secondary-nav-*` tags

### Minor Changes

- 5376e551: :sparkles: Added `<rh-subnav>`.

  The subnav component is used when an alternate navigation structure is needed to provide additional navigatation on a site that does not need the product branding or structural depth that `rh-secondary-nav` provides

  ```html
  <rh-subnav>
    <a href="#">Users</a>
    <a href="#">Containers</a>
    <a href="#">Databases</a>
    <a href="#" active>Servers</a>
    <a href="#">System</a>
    <a href="#">Network</a>
    <a href="#">Cloud</a>
  </rh-subnav>
  ```

- 0ed6700c: ✨ Added `<rh-tabs>`.

  A tab set of layered content, including tab widgets and their associated tab
  panel. When a tab is activated, the associated panel content becomes visible.
  Tabs automatically display their panel when they receive focus.

  ```html
  <rh-tabs>
    <rh-tab>Tab 1</rh-tab>
    <rh-tab-panel>Panel 1</rh-tab-panel>
    <rh-tab>Tab 2</rh-tab>
    <rh-tab-panel>Panel 2</rh-tab-panel>
  </rh-tabs>
  ```

- 110def91: ✨ Added `<rh-avatar>`

  An Avatar is a placeholder graphic for a photo or an image that is placed to the
  left or on top of text.

  ```html
  <rh-avatar
    name="Grace Hopper"
    subtitle="Rear Admiral"
    src="hopper.jpg"
  ></rh-avatar>
  ```

### Patch Changes

- 2831b7e5: Improves page-loading performance of individual elements
- eea1ec17: `<rh-footer>`: prevent warnings in certain JavaScript frameworks
- 6f29b7ca: `<rh-alert>`: used design tokens for icon dimensions

## 1.0.0-beta.32

### Patch Changes

- ccd0e376: `<rh-accordion>`: fixed double border on expanded state
- ccd0e376: `<rh-footer>`: fixed accordion styles at mobile screen sizes ([#707][issue])

  [issue]: https://github.com/RedHat-UX/red-hat-design-system/issues/707

## 1.0.0-beta.31

### Patch Changes

- e40663d3: fix: bundle in package phase

## 1.0.0-beta.30

### Patch Changes

- b28681d0: Removed postinstall husky script from users

## 1.0.0-beta.29

### Minor Changes

- e40e87dc: ✨ Added `<rh-button>`.

  Button is a form-associated custom element. Buttons allow users to
  perform an action when triggered. They feature a text label, a background or a
  border, and icons.

  ```html
  <rh-button>Submit</rh-button>
  ```

### Patch Changes

- 84da26fd: `<rh-footer>`: Corrected href for footer logo links. They were incorrectly pointing
  to the `href="/en"` url. They have been changed to `href="/"`.
- 94eeec07: `<rh-global-footer>`: fixed logo links, as per `<rh-footer>`
- 42331698: Fixed nested color contexts
- e40e87dc: `<rh-context-provider>`: notify children of context when adding them using javascript.
- e40e87dc: `<rh-context-provider>`: set color context, rather than palette, on consumers
- b23a8038: `<rh-tooltip>`: fixed tooltips on dark contexts
- 62fe8299: Update to PatternFly Elements RC
- 21da484a: `<rh-accordion>`: fixed styles for RTL languages.
- 7001943c: `<rh-cta>`: hide arrow from assistive tech

## 1.0.0-beta.28

### Minor Changes

- 99cf19e9: ✨ Added `<rh-tag>`.

  A tag is an inline-block element component that provides a distinct visual style for metadata in a UI. Supports adding icon by attribute or slotted.

  ```html
  <rh-tag>Content</rh-tag>
  ```

- f58c607e: ✨ Added `<rh-accordion>`.

  Accordion displays multiple, related disclosure widgets.

  ```html
  <rh-accordion>
    <rh-accordion-header>
      <h2>Item One</h2>
    </rh-accordion-header>
    <rh-accordion-panel>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </rh-accordion-panel>
    <rh-accordion-header>
      <h2>Item Two</h2>
    </rh-accordion-header>
    <rh-accordion-panel>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </rh-accordion-panel>
    <rh-accordion-header>
      <h2>Item Three</h2>
    </rh-accordion-header>
    <rh-accordion-panel>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </rh-accordion-panel>
  </rh-accordion>
  ```

- ffc4dddf: ✨ Added `<rh-badge>`.

  A badge is used to annotate other information with numerical content.

  ```html
  <rh-badge number="1">1</rh-badge>
  ```

- 0703a7ea: `rh-tooltip` is being moved from the previous version of `pfe-tooltip` to the newest version which includes the migration from popperjs to floating-ui.

  This will provide user experience and performance improvements and eliminate the need for the `process.env.NODE_ENV` variable to be set by the user going forward.

### Patch Changes

- aa2d5b40: `<rh-tooltip>`: calculated the tooltip offset when the element is first updated
- aa2d5b40: `<rh-blockquote>`: added color context and updated style tokens
- b7aa79aa: **Color Context**: added `attribute` option to `@colorContextConsumer` (defaults
  to `false`), allowing elements to make their context private to the shadow DOM.
- 41e27ddc: `<rh-tag>`: Fixed styles and tests connected with upstream changes in `BaseLabel`
- 185df893: **Color Context**: fixed context features, making sure they update the host
  element.
- db3c6af1: `<rh-spinner>`: made color context implementation private (removed `on`
  attribute).
- 54a2bbcc: `<rh-alert>`: fixed empty footer actions container still taking up blockwise
  space.
- ee8e16d1: `<rh-secondary-nav>`:

  - updated styles for `rh-context-provider` in shadowroot to ensure cta
    centering.
  - **BREAKING**: fixed incorrect color map for dark variant `color-palette="darker"` to `color-palette="dark"`

  **Color Context**: added `light` and `dark` context-color css rules to match
  surface tokens `--rh-color-surface-light` and `--rh-color-surface-dark`

- 750f451a: Added support for PFE 2.0 icon color in rh-footer
- 57f660c4: `<rh-cta>`: made color context implementation private (removed `on` attribute).
- aa2d5b40: `<rh-dialog>`: internal refactoring
- 6f8c8e79: `<rh-footer>`: fixed representation of social media links list for assistive technologies
- a76169e3: chore: added the `lib/` directory to the exports in `package.json`.
  Users can now do things like import controllers into their own projects:

  ```js
  import { ScreenSizeController } from "@rhds/elements/lib/ScreenSizeController.js";
  ```

- d2e77b5b: `<rh-tooltip>`: removed `on` attribute
- 3edd725f: `<rh-cta>`: fixed styles.
- b7aa79aa: `<rh-stat>`: fixed `icon` slot and attribute.

## 1.0.0-beta.27

### Minor Changes

- 172bacfb: Added `<rh-spinner>`. Spinner consists of an animated circle and sometimes a message, and it indicates that a section is loading.

  ```html
  <rh-spinner> Loading... </rh-spinner>
  ```

## 1.0.0-beta.26

### Patch Changes

- 73a4a9ef: Updated `<rh-footer>` to use new `<pfe-icon>`

## 1.0.0-beta.25

### Patch Changes

- da26ab31: Added behaviour to `<rh-alert>`'s close button: clicking it now removes the element.

## 1.0.0-beta.24

### Minor Changes

- c677b9e8: Added `<rh-pagination>`, a Web Component for navigating paginated content.

  ```html
  <rh-pagination>
    <ol>
      <li><a href="#">1</a></li>
      <li><a href="#2">2</a></li>
      <li><a href="#3">3</a></li>
      <li><a href="#4">4</a></li>
      <li><a href="#5">5</a></li>
    </ol>
  </rh-pagination>
  ```

  Read more on the [Pagination docs](https://ux.redhat.com/elements/pagination/)

### Patch Changes

- 139044fe: Added `mobile-menu` slot to rh-secondary-nav to allow for translations
  Added translation demo demonstrating new slot and rtl support
- 72fdbc06: Fixes for `<rh-secondary-nav>`:
  - Remove `em` based font-styling, use rems
  - Move `font-size: initial` from `rh-secondary-nav-lightdom.css` to D7 specific stylesheet fix (proxy demo)
  - Fix carets to properly scale with font-size based on rh-tokens
- ba3e8474: `<rh-footer>` grid areas show gap regardless of existing [#575](https://github.com/RedHat-UX/red-hat-design-system/issues/575)

## 1.0.0-beta.23

### Patch Changes

- d6de21ae: Add tsconfig to pfeDevServerConfig in `web-dev-server.config.js`
  Add tsconfig to pfeDevServerConfig in `web-test-runner.config.js`
  Unpins pfe-tools in package.json, allows versions > next.29 to be installed.

## 1.0.0-beta.22

### Patch Changes

- c0001bcf: Recent update to @patternfly/pfe-tools breaks rh-secondary-nav

## 1.0.0-beta.21

### Patch Changes

- b627f538: Changes to `<rh-secondary-nav>`:
  - Moved overflow from mobile menu list to outer container
  - Fixes border on dark variant in compact view
- b6cd5137: Footer bug fixes
  - secondary start slot not being used but still showing gap #488
  - two column breakpoint on global footer not present #496
  - tertiary slot in global footer has a margin-start padding that needs to be removed #498
  - reduce the spacing beneath the primary footer nav / language switcher to match the xd #499
    - corrected the margin at Tablet, landscape breakpoint to 64px
  - add max-width on footer-block child elements #524
  - social icon size changed to 24px down from 28px (band aide) #525
  - add no-js styles to reduce flash of unstyled content before upgrade #543
  - remove Summit logo #534
  - ensure blocks in main secondary are flush to the top of the region
  - header colors are being overwritten by base styles. #563

## 1.0.0-beta.20

### Patch Changes

- 2efcf306: Changes to `<rh-secondary-nav>`:
  - Fixes the nav level slotted cta color context when viewed in a mobile nav dropdown
  - Fixes :hover color for dark variant logo text

## 1.0.0-beta.19

### Patch Changes

- 99a1e142: Changes to `<rh-secondary-nav>`:
  - Removed component scaling with user font size preference by replacing em based spacers with space tokens.
  - Updated font-family stacks with font tokens
  - Fixed nav bar height not adjusting when logo text wraps to 3 lines
  - Fixed button background on color-palette="darker"
  - Fixed focus out handler bug closing menu when clicking on flyout menu
- 694fd26b: rh-alert: fixing styling for font-family, header font-size, description margins, and adding a cursor: pointer style for the slotted actions.

## 1.0.0-beta.18

### Patch Changes

- 38a788c: Alert, Stat, Secondary Nav changes:

  - use [design system tokens](https://red-hat-design-tokens.netlify.app) for consistency and themability

  CTA Changes:

  - use [design system tokens](https://red-hat-design-tokens.netlify.app) for consistency and themability
  - fix CSS values like padding, etc.

  Footer Changes:

  - use [design system tokens](https://red-hat-design-tokens.netlify.app) for consistency and themability
  - fix: fixed primary links grid gap spacing on desktop
  - fix: added parts for accordion header/panel

## 1.0.0-beta.17

### Patch Changes

- fe8f11f: Stat: Fixes dark theme font color contrast.
- 620b59a: Ships the files in `lib` to npm

## 1.0.0-beta.16

### Major Changes

- 8f533e5: - Adds color context decorators and controllers.
  Affects footer, dialog, CTA, secondary nav, and stat.

  - Adds `<rh-cta>`, a styled link that directs a user to other pages or sometimes displays hidden content.

    ```html
    <rh-cta>
      <a href="/subscribe">Subscribe</a>
    </rh-cta>
    ```

### Minor Changes

- b940eab: Adds `<rh-tooltip>` element to display floating content.

  ```html
  <p>
    Red Hat Design System is an interoperable
    <rh-tooltip position="top">
      <rh-icon icon="info" aria-label="information"></rh-icon>
      <span slot="content"
        >Interoperable components work in any frontend framework, or none</span
      >
    </rh-tooltip>
    set of components with Red Hat branding guidelines built in.
  </p>
  ```

### Patch Changes

- 1f196b5: Changes to `<rh-stat>`:
  - **BREAKING**: remove `@pfelement` decorator
  - **BREAKING**: remove `is-mobile` attribute
  - **BREAKING**: remove `description` slot, replace with anonymous slot
  - replace internal `MatchMediaController` with `ScreenSizeController`
  - document slots and css properties
  - hide empty slots
  - make `updateIcons` method private, and refactor it to run on slot
    change and affect only the icon slotted into `icon`
  - initialize properties in class field initializers
- ac4ef8f: Footer: Main footer logo fills height first
- d7af072: Changes to `<rh-secondary-nav>`:
  - **BREAKING**: replaces `variant="dark"` attribute with `color-palette="darker"`
  - replaces internal `#textDirection` method with `DirController` implementation for consistent RTL support
  - updates documentation
- 034e28d: Blockquote: Add design tokens to rh-blockquote's css files

## 1.0.0-beta.15

### Patch Changes

- 0d80240: \* Fixes missing font-family stacks when base css isn't applied
  - Adds rh-token CSS custom properties for font family stacks
  - Fixes regression in spacing for slotted cta

## 1.0.0-beta.14

### Minor Changes

- 8edb3df: Adds `rh-secondary-nav`

  A non-primary navigation for products and subcategory pages.

  Renames `RHDSScreenSizeController` to `ScreenSizeController` and updates references.
  Updates `matchMedia()` breakpoints in `ScreenSizeController` to use `min-width` values for standard breakpoints

  ```html
  <rh-secondary-nav role="navigation">
    <a href="#" slot="logo">Logo</a>
    <ul slot="nav">
      <li><a href="#">Link 1</a></li>
      <li>
        <rh-secondary-nav-dropdown>
          <a slot="link">Link 2</a>
          <rh-secondary-nav-menu slot="menu">
            <rh-secondary-nav-menu-section>
              <h3 slot="header">Title of Links</h3>
              <ul slot="links">
                <li><a href="#">Link 2.1</a></li>
                <li><a href="#">Link 2.2</a></li>
              </ul>
            </rh-secondary-nav-menu-section>
          </rh-secondary-nav-menu>
        </rh-secondary-nav-dropdown>
      </li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </rh-secondary-nav>
  ```

### Patch Changes

- 4d5a538: Fixes path for light dom CSS in secondary-nav demo

## 1.0.0-beta.13

### Minor Changes

- ba05def: Add 'rh-blockquote'

  A blockquote for displaying quote, author, and author title..

  ```html
  <rh-blockquote color-palette="lightest" align="inline-start" size="default">
    <p slot="quote">
      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>
  ```

### Patch Changes

- 1a6cfee: Adds missing `tslib` dependency

## 1.0.0-beta.12

### Patch Changes

- 17d5bf8: Fixes rh-footer primary columns not being equal.

## 1.0.0-beta.11

### Patch Changes

- b04d8c8: Include lib directory in npm package

## 1.0.0-beta.10

### Minor Changes

- bdc1121: Ship components unbundled

### Patch Changes

- c6d26a4: Typescript: Map footer element classes to tagnames

## 1.0.0-beta.9

### Major Changes

- 58831e0: Adds `<rh-global-footer>` standalone component

  Global footer only

  ```html
  <rh-global-footer> ... </rh-global-footer>
  ```

  Usage in <rh-footer>

  ```html
  <rh-footer>
    ...
    <rh-global-footer slot="global">...</rh-global-footer>
  </rh-footer>
  ```

  Adds font-size initial and em values instead of px values for a11y.
  Allow user stylesheet to increase and decrease font-size.

  https://github.com/RedHat-UX/red-hat-design-system/issues/312

  Fixes double border on mobile.

  https://github.com/RedHat-UX/red-hat-design-system/issues/392

  Removes `is-mobile` attribute

## 1.0.0-beta.8

### Minor Changes

- de7fd69: Added `rh-context-provider` component, which is meant to be used internally within rh-elements shadow templates to override color context.
  In `rh-dialog`, fix the color context overrides for slotted content. See https://github.com/patternfly/patternfly-elements/pull/2036#issuecomment-1134460631
  In `rh-dialog`, changed the attribute `variant="video"` to `type="video"`, because `<pfe-modal>` uses variant for width.
- 3248990: Add `rh-stat`

  An element which can be used to display statistics inside of an app.

  ```html
  <rh-stat size="large" icon="rh-atom">
    <span slot="title">Stat Title</span>
    <span slot="statistic">Stat</span>
    <span slot="description"
      >Stat body text that includes two lines and a footnote<sup>2</sup></span
    >
  </rh-stat>
  ```

## 1.0.0-beta.7

### Patch Changes

- da9ba6d: Remove patch-package dev dependency

## 1.0.0-beta.6

### Patch Changes

- ce2ce34: Add missing devDependencies which prevent installing the package

## 1.0.0-beta.5

### Patch Changes

- 5247670: Fixed [bug] `<rh-footer>` links should be styled to match dark context colors. #307
  Fixed the `social-links` slot to not override the `social-links` internal `rh-footer-links`
  Fixed the `social-links` hrefs to point to the default RHDC links

## 1.0.0-beta.4

### Minor Changes

- e59ecea: Add `RHDSScreenSizeController`

  ```js
  import { RHDSScreenSizeController } from '../../lib/RHDSScreenSizeController.js';

  export class RhPagination extends LitElement {

    #screenSize = new RHDSScreenSizeController(this);

    render() {
      const { mobile, size } = this.#screenSize;
      return html`
      <div id="container" class=${classMap({ mobile, [size as string]: true })}>
        ...
      </div>
      `
    }
  }
  ```

### Patch Changes

- fd78f88: Fix `<rh-footer>` styles when used on redhat.com

## 1.0.0-beta.3

### Patch Changes

- 69abc30: Include lightdom styles in the package. Prevent custom-element double-registration error by removing pfe-1.0 dependencies.

## 1.0.0-beta.2

### Minor Changes

- b625710: Adds `<rh-footer>`

  ```html
  <rh-footer>
    <a slot="logo" href="/en">
      <img
        alt="Red Hat logo"
        src="https://static.redhat.com/libs/redhat/brand-assets/2/corp/logo--on-dark.svg"
      />
    </a>
    <rh-footer-social-link slot="social-links-end" icon="web-icon-github">
      <a aria-label="Github" href="#github">Github</a>
    </rh-footer-social-link>
    <h3 slot="links">Products</h3>
    <ul slot="links">
      <li><a href="#">Red Hat Ansible Automation Platform</a></li>
      <li><a href="#">Red Hat Enterprise Linux</a></li>
      <li><a href="#">Red Hat OpenShift</a></li>
      <li><a href="#">Red Hat OpenShift Container Storage</a></li>
      <li><a href="#">Red Hat OpenStack Platform</a></li>
      <li><a href="#">See all products</a></li>
    </ul>
    <h3 slot="links">Tools</h3>
    <ul slot="links">
      <li><a href="#">My account</a></li>
      <li><a href="#">Customer support</a></li>
      <li><a href="#">Red Hat OpenShift</a></li>
      <li><a href="#">Contact training</a></li>
      <li><a href="#">Red Hat OpenStack Platform</a></li>
      <li><a href="#">See all products</a></li>
    </ul>
    <rh-footer-block slot="main-secondary">
      <h3 slot="header">About Red Hat</h3>
      <p>
        We’re the world’s leading provider of enterprise open source
        solutions―including Linux, cloud, container, and Kubernetes. We deliver
        hardened solutions that make it easier for enterprises to work across
        platforms and environments, from the core datacenter to the network
        edge.
      </p>
    </rh-footer-block>
    <rh-footer-block slot="main-secondary">
      <h3 slot="header">Subscribe to our free newsletter, Red Hat Shares</h3>
      <pfe-cta><a href="#blocks">Sign up now</a></pfe-cta>
    </rh-footer-block>
    <h3 slot="footer-links-primary" hidden>Red Hat legal and privacy links</h3>
    <ul slot="footer-links-primary">
      <li><a href="#">About Red Hat</a></li>
      <li><a href="#">Jobs</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">Locations</a></li>
      <li><a href="#">Contact Red Hat</a></li>
      <li><a href="#">Red Hat Blog</a></li>
      <li><a href="#">Cool Stuff Store</a></li>
      <li><a href="#">Diversity, equity, and inclusion</a></li>
    </ul>
    <rh-footer-copyright slot="footer-links-secondary"></rh-footer-copyright>
  </rh-footer>
  ```

## 1.0.0-beta.1

### Minor Changes

- b8af17c: Add `<rh-alert>`

  An alert to display information on a website.

  ```html
  <rh-alert>
    <h3 slot="header">Default</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend
      elit sed est egestas, a sollicitudin mauris tincidunt.
    </p>
    <button slot="actions" data-action="dismiss">Dismiss</button>
    <button slot="actions" data-action="confirm">Confirm</button>
  </rh-alert>
  ```