v1.3.2

Patch Changes

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

v1.3.1

Patch Changes

• d87dfb9: <rh-tabs>: fixed issue that stop tabs from correctly resizing on mobile
• 01f100c: <rh-tile>: fixed issue with click target area of tile
• 08722dd: <rh-table>: corrected custom background hover color tokens.
• 4259ba0: <rh-tabs>: improved documentation

v1.3.0

Minor Changes

• 5e64235: <rh-audio-player>: added Hebrew translations

• 0829fa2: ✨ 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.

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

• c9b8187: <rh-tabs-panel>: adds ability to override panel margin and padding

• 31b28dc: <rh-pagination>: add numeric CSS shadow part, corresponding to the numeric page input

  Example: hiding the numeric paginator

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

• 05fbc27: <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.

  <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>

• 58ab8e6: Uses @rhds/tokens - Red Hat Design Tokens - version 2!

  ⚠️ if your pages directly override "crayon" colour 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 colour values.

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

Patch Changes

• b123092: <rh-tabs>: removed dependency on @patternfly/elements package.

• 5e64235: <rh-alert>: fix <rh-button variant="link"> as slotted action

• 976981b: <rh-alert>: fix inline variant's styles

• 6a87885: <rh-badge>: remove dependency on @patternfly/elements

• 7198739: <rh-blockquote>: remove user-agent margin from blockquote, in accordance with design guidelines

• fcf22f0: <rh-button>: remove dependency on @patternfly/elements

• 18f802f: <rh-table>: added color palette and theme support

• c0af107: <rh-card>: improved styles for first body paragraph when there is other content displayed first

• 4f6ff65: <rh-card>: ensure footer is always on the bottom of the card

• 6e8fad6: <rh-card>: adjust whitespace of card parts to suit design

• bf7c96c: <rh-code-block>: allow for pre-rendered (via prism.js) code blocks

• f969ff1: <rh-tabs>: fixed layout of non-vertical box variant tabs

• 54264f3: <rh-spinner>: deprecates the color-palette attribute.

• 8cb9790: <rh-tile>: fixed cursor when arrow is hovered

• 976981b: <rh-alert>: remove padding for alerts which have only header content

• 976981b: <rh-alert>: make variants case-insensitive

• a6510e2: <rh-tabs>: adds default value for tab font-size

• eefc04c: <rh-tooltip>: fixes issue where content would take up unwanted space before the element fully upgraded

• 2137702: <rh-footer-social-link>: updated twitter logo with X

• 0254749: <rh-tab-panel>: removed unused color-palette attribute

• 8c5559c: <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.

• 2eb82a8: <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:

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

• 5e64235: <rh-menu>: support color context

• 6a134b5: <rh-tag>: remove dependency on @patternfly/elements

• 369d5b7: <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:

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

  After:

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

• 5e64235: <rh-dialog>: ensure dialog content is always on light theme

• 42c167f: <rh-table>: improved color palette styles

• 0d2d349: rh-table: corrected table height

• a1c587d: <rh-navigation-secondary>: adds current page indicator to logo slot

• c68165b: <rh-tabs>: adds deprecation notice on theme attribute

• 54264f3: <rh-spinner>: remove dependency on @patternfly/elements

• baa3820: <rh-accordion>: fixed border color for dark color palettes

• fb9e3ea: <rh-accordion>: remove dependency on @patternfly/elements

• d4e1ebd: <rh-tag>: while tag should not be used on dark contexts unless it has the
  white colour, this change ensures that tags that are used on dark context will
  be legible.

• 422d627: <rh-tile>: ensure that tiles in a flex container grow along the cross axis

• 61ca720: <rh-tooltip>: remove dependency on @patternfly/elements

• b3f7b18: <rh-tile>: added arrow animation on hover

• 9f12494: <rh-navigation-secondary>: fixed initialization of current page indicator

v1.2.0

Minor Changes

• 35c28e7: Added <rh-tile>.

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

  <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>

• 9d3c7b0: ✨ Added <rh-table>.

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

  <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>

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

  Example:

  <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>

• c9780fc: ✨ Added <rh-timestamp>.

  Provides consistent formats for displaying date and time values.

  <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

• f4fcb1f: <rh-navigation-secondary>: improved keyboard navigation

• 681519b: <rh-avatar>:
  <rh-code-block>:
  <rh-navigation-secondary>: Updated custom elements manifest summaries

• ed6ff92: <rh-navigation-secondary>: corrected and updated support for current page indicator

• a6ca398: <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.

• 0c2d42b: <rh-tabs>: corrects the custom element manifest's event name for the expand event

• 7e2c9bb: <rh-cta>: adds color-palette attribute back with deprecation notice

v1.1.1

Patch Changes

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

v1.1.0

Minor Changes

• 9eedf47: <rh-tag>: added outline variant

• bc0fd96: ✨ Added <rh-card>.

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

  <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>

• b4815ae: ✨ Added <rh-audio-player>.

  Audio-player creates a custom UI for audio files.

  <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>

• d784f71: ✨ 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.

  <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>

• b2e607b: <rh-tooltip>: added 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

Patch Changes

• fca7437: Updated design system token metadata in custom elements manifest
• 9eedf47: <rh-tag>: support dark color context
• 4861f8a: <rh-navigation-secondary>: corrected css parts and css properties manifest documentation
• 1a569a2: <rh-accordion>: corrected and updated custom elements manifest
• 9acd4e0: <rh-tabs>: Vertical tabs on small screen size <768px will display as a horizontal
• 760ef10: <rh-footer>: corrected and updated custom elements manifest
• c92f29f: Adds <rh-context-picker> element in /lib. Moves the undocumented
  <rh-context-provider> element to /lib, and adds a deprecation warning.
• 2245dfe: <rh-footer>: contain focus outline to the width of the link text
• b2e607b: <rh-tooltip>: corrected and updated custom elements manifest
• 3785dfc: <rh-tabs>: reduced padding on overflow scroll buttons
• a99c620: <rh-subnav>: decreased padding on overflow buttons.
• 0504e5c: rh-footer: fixes mobile layout on initial load
• 86c606b: <rh-button>: corrected and updated custom elements manifest
• f42910c: <rh-badge>: corrected and updated custom elements manifest
• cced7a4: prevent "command not found" error which could occur when installing the npm
  package in certain situations
• ee37ace: <rh-alert>: clarify that the variant attribute takes values: alternate,
  inline (default) or toast
• f4ff68d: <rh-avatar>: corrected css custom property data type in custom elements manifest
• b4815ae: <rh-avatar>: fixed styles for names, links
• b4815ae: <rh-avatar>: fix bug which could hide the name of the avatar's subject if the element contains whitespace.
• de61361: <rh-cta>: make the entire background clickable
• b5333ad: <rh-navigation-secondary>: fix unclosed cta slot tag
• de6c586: <rh-pagination>: prevent false content validation warning
• 0625218: <rh-pagination>: fix for pagination in right-to-left contexts
• 4e27262: <rh-spinner>: updated and corrected custom elements manifest
• 58124c4: <rh-tabs>: corrected and updated custom elements manifest
• 58124c4: <rh-tabs>: replaced nonexistent --rh-spacer-xl token with the correct name --rh-space-xl
• 04573fa: <rh-accordion>: fixed keyboard navigation inside of nested accordions
• 469a1c5: <rh-navigation-secondary>: reduce, validate, and simplify styles
• 71dd262: <rh-tag>: improve loading performance by removing unnecessary imports
• 81c1676: <rh-subnav>: corrected default background color to @rhds/tokens value
• a0d20b6: <rh-alert>: corrected css for header font-weight and padding

v1.0.1

Patch Changes

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

v1.0.0

Major Changes

• acbb034: <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

• 16f2cf0: Color Context: Removed deprecated context tokens

• 8f533e5: ✨ Added <rh-cta>.

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

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

  Color Contrast: added color context decorators and controllers.

• 96731e4: 💱 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.

• 58831e0: ✨ Added <rh-global-footer> standalone component.

  Global footer only

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

  Usage in

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

  #312

  Fixes double border on mobile.

  #392

  Removes is-mobile attribute

• 80c5892: <rh-navigation-secondary>: fixed incorrect color map for dark variant
  color-palette="darker" to color-palette="dark"

• 0266dd0: <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:

  <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:

  <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>

• 80c5892: <rh-secondary-nav>: replaced variant="dark" attribute with
  color-palette="darker"

• 5841b46: <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:

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

  AFTER:

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

  or

  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

• 172bacf: ✨ Added <rh-spinner>.

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

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

• e40e87d: ✨ 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.

  <rh-button>Submit</rh-button>

• 99cf19e: ✨ 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.

  <rh-tag>Content</rh-tag>

• ba05def: ✨ Added <rh-blockquote>.

  Displays a quote with author's name and title.

  <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>

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

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

• 5376e55: ✨ 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

  <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>

• 0ed6700: ✨ 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.

  <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>

• de7fd69: ✨ Added <rh-context-provider>.

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

  <rh-dialog>:

  • fixed the colour context overrides for slotted content.
  • renamed the variant attribute to type.

• f58c607: ✨ Added <rh-accordion>.

  Accordion displays multiple, related disclosure widgets.

  <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>

• b8af17c: ✨ Added <rh-alert>.

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

  <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>

• 110def9: ✨ 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.

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

• b625710: ✨ Added <rh-footer>.

  <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 d...

v1.0.0-beta.34

Patch Changes

• d46168f: <rh-subnav>:
  • Applies !important to ensure slotted links styles
• fd3e066: Removed undocumented rh-demo element

v1.0.0-beta.33

Major Changes

• acbb034: 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

• 5376e55: ✨ 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

  <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>

• 0ed6700: ✨ 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.

  <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>

• 110def9: ✨ 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.

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

Patch Changes

• 2831b7e: Improves page-loading performance of individual elements
• eea1ec1: <rh-footer>: prevent warnings in certain JavaScript frameworks
• 6f29b7c: <rh-alert>: used design tokens for icon dimensions