Merge branch 'main' into fix/card/empty-header

docs/_plugins/shortcodes/renderInstallation.cjs

@@ -26,13 +26,25 @@ fully initialized.
   return /* md */`
 <script type="module" src="/assets/elements/uxdot-installation-tabs.js"></script>
 
+<style>
+  /* progressively enhanced rh-tab-panel width */
+  rh-tab-panel {
+    container-type: inline-size;
+  }
+
+  rh-tab-panel > pre {
+    max-width: 800px;
+    max-width: 100cqw;
+  }
+</style>
+
 <section class="band">
 
   ## Installation ${!docsPage.manifest?.packageJson ? '' : /* md */`
 
 <uxdot-installation-tabs>
 <rh-tab slot="tab">Red Hat CDN</rh-tab>
-<uxdot-installation-tab-panel>
+<rh-tab-panel>
   <rh-alert state="warning">
     <h3 slot="header">CDN Prerelease</h3>
     <p>We are currently working on our CDN, which will be soon moving
@@ -81,9 +93,9 @@ ${!lightdomcss ? '' : /* md */`${lightdomcssblock}
 ~~~
 
 `}
-</uxdot-installation-tab-panel>
+</rh-tab-panel>
 <rh-tab slot="tab">NPM</rh-tab>
-<uxdot-installation-tab-panel>
+<rh-tab-panel>
 
 Install RHDS using your team's preferred NPM package manager, e.g.
 
@@ -111,9 +123,9 @@ Replace \`/path/to\` in the \`href\` attribute with the installation path
 to the \`${docsPage.tagName}\` directory in your project.
 
   `}
-</uxdot-installation-tab-panel>
+</rh-tab-panel>
 <rh-tab slot="tab">JSPM</rh-tab>
-<uxdot-installation-tab-panel>
+<rh-tab-panel>
   <rh-alert state="warning">
     <h3 slot="header">Public CDNs</h3>
     <p>JSPM and other public CDNs should not be used on corporate domains.
@@ -153,7 +165,7 @@ ${!lightdomcss ? '' : /* md */ `${lightdomcssblock}
 ~~~
 
 `}
-  </uxdot-installation-tab-panel>
+  </rh-tab-panel>
 </uxdot-installation-tabs>
 
 ${content ?? ''}`}

docs/assets/elements/uxdot-installation-tabs.js

@@ -1,7 +1,4 @@
-import { css } from 'lit';
-
 import { RhTabs } from '@rhds/elements/rh-tabs/rh-tabs.js';
-import { RhTabPanel } from '@rhds/elements/rh-tabs/rh-tab-panel.js';
 
 import '@rhds/elements/rh-alert/rh-alert.js';
 
@@ -46,18 +43,3 @@ export class InstallationTabs extends RhTabs {
     this.addEventListener('expand', this.#onExpand);
   }
 }
-
-export class InstallationTabPanel extends RhTabPanel {
-  static is = 'uxdot-installation-tab-panel';
-
-  static styles = [...RhTabPanel.styles, css`
-    ::slotted(pre) {
-      max-width: 800px !important;
-      overflow-x: scroll;
-    }
-  `];
-
-  static {
-    customElements.define(this.is, this);
-  }
-}

elements/rh-accordion/docs/10-style.md

@@ -14,7 +14,8 @@ Accordion panels include title text, a chevron icon, body text, and other conten
 6) Emphasis
 7) Content
 8) Panel body region
-   {.example-notes}
+9) Accent slot
+{.example-notes}
 
 ### Sizes 
 There are two available sizes and the only difference is the title text size. You can use the Small size on large breakpoints, but not the Large size on small breakpoints due to the potential of long title text wrapping to more than two lines.
@@ -35,13 +36,22 @@ An accordion is available in both light and dark themes. The light theme expande
           alt="Dark theme accordion with an expanded panel",
           src="../accordion-theme-dark.png" %}
 
-## Configuration 
+## Configuration
+
 An expanded panel does not have a maximum height, but it may scroll if constrained by vertical space. The width of an accordion varies based on content and page layout. Title text and icons are horizontally aligned.
 
 {% example palette="light",
           alt="How an accordion is constructed showing alignment, space, scrolling, and width details",
           src="../accordion-configuration.png" %}
 
+### Accent slot
+
+The accent slot can be positioned inline or below the panel's title. This can contain tags, badges, or other small elements with secondary information.
+
+{% example palette="light",
+          alt="Accordion panel with two tags in inline accent slot and an accordion with two tags below the title",
+          src="../accordion-accent-slot.png" %}
+
 ### Nested panels 
 Panels can be nested to help organize complex or granular sections of content.
 

elements/rh-accordion/docs/20-guidelines.md

@@ -1,7 +1,9 @@
 ## Usage 
 Use an accordion to organize a large amount of content into sections. This allows users to scan through critical information first and then access additional information when needed. Users can also compare information by expanding multiple panels simultaneously.
+
 ### When to use an accordion 
 Using an accordion provides an easy way to organize content while reducing page scrolling, but at the expense of hiding information or burdening users with more clicks. There is a chance that important information will be missed or not immediately noticed by users. Therefore, if reading important information is critical to the user experience or if important information requires more focus and less clicking, it is advised to not use an accordion.
+
 ### Accordion vs. disclosure 
 An accordion is used to organize important information whereas a [Disclosure](/patterns/dislosure) can be used to organize secondary information that might not be critical to read or impact the experience. An accordion can also accommodate multiple sections of content, whereas a disclosure can only accommodate one.
 
@@ -51,7 +53,7 @@ Title text can be two lines on small breakpoints, but no more.
           src="../accordion-long-title-text.png" %}
 
 ## Layout 
-The width of an accordion can be adjusted on large breakpoints to fit less columns if necessary.
+The width of an accordion can be adjusted on large breakpoints to fit fewer columns if necessary.
 
 {% example palette="light",
           alt="A thinner accordion placed on a 12-column grid and occupying eight grid columns",