npm - @patternfly/patternfly-doc-core - Versions diffs - 1.12.0 → 1.12.2 - Mend

@patternfly/patternfly-doc-core 1.12.0 → 1.12.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (460) hide show

package/dist/docs/components/drawer/react/index.html ADDED Viewed

@@ -0,0 +1,108 @@
+<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><script type="module">const n=e=>{requestAnimationFrame(()=>{document.documentElement.classList.toggle("pf-v6-theme-dark",e==="dark")})};document.addEventListener("astro:before-swap",()=>{const e=localStorage.getItem("theme-preference");n(e||"light")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:"smooth"})};document.addEventListener("DOMContentLoaded",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,""," "),setTimeout(()=>{o(e),history.replaceState(null,"",e)},500)}});window.addEventListener("hashchange",()=>{window.location.hash&&o(window.location.hash)});</script><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.9.3"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CtSceO8m.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
+<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css">
+<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
+<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
+<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-xikxfxwm-3"] { view-transition-name: astro-xikxfxwm-3; }@layer astro { ::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back]::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back]::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back][data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back][data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }</style><style>[data-astro-transition-scope="astro-2e6ke2uy-4"] { view-transition-name: astro-2e6ke2uy-4; }@layer astro { ::view-transition-old(astro-2e6ke2uy-4) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-2e6ke2uy-4) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-2e6ke2uy-4) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page">  <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="Z1LSlX6" prefix="r5" component-url="/_astro/PageToggle.Dnbvoa7R.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;data-astro-transition-persist&quot;:[0,&quot;astro-u5p5alki-2&quot;]}" ssr client="idle" opts="{&quot;name&quot;:&quot;PageToggle&quot;,&quot;value&quot;:true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-70"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="idcfH" prefix="r7" component-url="/_astro/Toolbar.BNjGRsAQ.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{&quot;name&quot;:&quot;ReactToolbar&quot;,&quot;value&quot;:true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-24"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-71"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-72"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-24"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="193Wv7" component-url="/_astro/Navigation.B2RHZcqO.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;navData&quot;:[1,[[1,[[0,{&quot;id&quot;:[0,&quot;src/components/aboutmodal/examples/aboutmodal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;About modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/accordion/examples/accordion&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Accordion&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/actionlist/examples/actionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Action list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/alert/examples/alert&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Alert&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/avatar/examples/avatar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Avatar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backtotop/examples/backtotop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Back to top&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backdrop/examples/backdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Backdrop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backgroundimage/examples/backgroundimage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Background image&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/badge/examples/badge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/banner/examples/banner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Banner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/brand/examples/brand&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Brand&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/breadcrumb/examples/breadcrumb&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Breadcrumb&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/button/examples/button&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Button&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/calendarmonth/examples/calendarmonth&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Calendar month&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/card/examples/card&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Card&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/checkbox/examples/checkbox&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Checkbox&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/chip/examples/chip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Chip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/clipboardcopy/examples/clipboardcopy&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Clipboard copy&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/codeblock/examples/codeblock&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Code block&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/content/examples/content&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datalist/examples/datalist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Data list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datepicker/examples/datepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Date picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/descriptionlist/examples/descriptionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Description list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/divider/examples/divider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Divider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/dragdrop/examples/dragdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drag and drop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/drawer/examples/drawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/dropdown/examples/dropdown&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dropdown&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/duallistselector/examples/duallistselector&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dual list selector&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/emptystate/examples/emptystate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Empty state&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/expandablesection/examples/expandablesection&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Expandable section&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/form/examples/form&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/formselect/examples/formselect&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/helpertext/examples/helpertext&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Helper text&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/hint/examples/hint&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Hint&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/icon/examples/icon&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Icon&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/inputgroup/examples/inputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/jumplinks/examples/jumplinks&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Jump links&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/label/examples/label&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Label&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/list/examples/list&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;List&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/loginpage/examples/loginpage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Login page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/masthead/examples/masthead&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Masthead&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menu/examples/menu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menutoggle/examples/menutoggle&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu toggle&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/modal/examples/modal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/multiplefileupload/examples/multiplefileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Multiple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/nav/examples/nav&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Navigation&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationbadge/examples/notificationbadge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationdrawer/examples/notificationdrawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/numberinput/examples/numberinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Number input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/overflowmenu/examples/overflowmenu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Overflow menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/page/examples/page&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/pagination/examples/pagination&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Pagination&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/panel/examples/panel&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Panel&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/popover/examples/popover&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Popover&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progress/examples/progress&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progressstepper/examples/progressstepper&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress stepper&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/radio/examples/radio&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Radio&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/searchinput/examples/searchinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Search input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/select/examples/select&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/sidebar/examples/sidebar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Sidebar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/fileupload/examples/fileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/simplelist/examples/simplelist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skeleton/examples/skeleton&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skeleton&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skiptocontent/examples/skiptocontent&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skip to content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/slider/examples/slider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Slider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/spinner/examples/spinner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Spinner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/switch/examples/switch&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Switch&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tabs/examples/tabs&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tabs&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textarea/examples/textarea&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text area&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinput/examples/textinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinputgroup/examples/textinputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/tile/examples/tile&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tile&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timepicker/examples/timepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Time picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timestamp/examples/timestamp&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Timestamp&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/title/examples/title&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Title&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/togglegroup/examples/togglegroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toggle group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/toolbar/examples/toolbar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toolbar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tooltip/examples/tooltip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tooltip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/treeview/examples/treeview&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tree view&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/truncate/examples/truncate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Truncate&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/wizard/examples/wizard&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Wizard&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}]]]]],&quot;data-astro-transition-scope&quot;:[0,&quot;astro-xikxfxwm-3&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;ReactNav&quot;,&quot;value&quot;:&quot;react&quot;}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body">    <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/drawer/react"> React </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-385" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-386" data-pf-content="true" class="pf-v6-c-content--h3">Basic</h3>
+<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="53XQQ" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerPanelBody,\n  DrawerPanelDescription,\n  Button\n} from &#39;@patternfly/react-core&#39;;\n\nexport const DrawerBasic: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef&lt;HTMLDivElement&gt;(undefined);\n\n  const onExpand = () =&gt; {\n    drawerRef.current &amp;&amp; drawerRef.current.focus();\n  };\n\n  const onClick = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    &lt;DrawerPanelContent&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}&gt;\n          Drawer panel header\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n      &lt;DrawerPanelDescription&gt;Drawer panel description&lt;/DrawerPanelDescription&gt;\n      &lt;DrawerPanelBody&gt;Drawer panel body&lt;/DrawerPanelBody&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const drawerContent =\n    &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button aria-expanded={isExpanded} onClick={onClick}&gt;\n        Toggle drawer\n      &lt;/Button&gt;\n      &lt;Drawer isExpanded={isExpanded} onExpand={onExpand}&gt;\n        &lt;DrawerContent panelContent={panelContent}&gt;\n          &lt;DrawerContentBody&gt;{drawerContent}&lt;/DrawerContentBody&gt;\n        &lt;/DrawerContent&gt;\n      &lt;/Drawer&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-387" data-pf-content="true" class="pf-v6-c-content--h3">Panel at end</h3>
+<astro-island uid="Z9g48K" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from &#39;@patternfly/react-core&#39;;\n\nexport const DrawerPanelEnd: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef&lt;HTMLDivElement&gt;(undefined);\n\n  const onExpand = () =&gt; {\n    drawerRef.current &amp;&amp; drawerRef.current.focus();\n  };\n\n  const onClick = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    &lt;DrawerPanelContent&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}&gt;\n          Drawer panel header\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const drawerContent =\n    &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button aria-expanded={isExpanded} onClick={onClick}&gt;\n        Toggle drawer\n      &lt;/Button&gt;\n      &lt;Drawer isExpanded={isExpanded} position=\&quot;end\&quot; onExpand={onExpand}&gt;\n        &lt;DrawerContent panelContent={panelContent}&gt;\n          &lt;DrawerContentBody&gt;{drawerContent}&lt;/DrawerContentBody&gt;\n        &lt;/DrawerContent&gt;\n      &lt;/Drawer&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-388" data-pf-content="true" class="pf-v6-c-content--h3">Panel at start</h3>
+<astro-island uid="1ednn5" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from &#39;@patternfly/react-core&#39;;\n\nexport const DrawerPanelStart: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef&lt;HTMLDivElement&gt;(undefined);\n\n  const onExpand = () =&gt; {\n    drawerRef.current &amp;&amp; drawerRef.current.focus();\n  };\n\n  const onClick = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    &lt;DrawerPanelContent&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}&gt;\n          Drawer panel header\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const drawerContent =\n    &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button aria-expanded={isExpanded} onClick={onClick}&gt;\n        Toggle drawer\n      &lt;/Button&gt;\n      &lt;Drawer isExpanded={isExpanded} position=\&quot;start\&quot; onExpand={onExpand}&gt;\n        &lt;DrawerContent panelContent={panelContent}&gt;\n          &lt;DrawerContentBody&gt;{drawerContent}&lt;/DrawerContentBody&gt;\n        &lt;/DrawerContent&gt;\n      &lt;/Drawer&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-389" data-pf-content="true" class="pf-v6-c-content--h3">Panel on bottom</h3>
+<astro-island uid="Z1S104p" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from &#39;@patternfly/react-core&#39;;\n\nexport const DrawerPanelBottom: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef&lt;HTMLDivElement&gt;(undefined);\n\n  const onExpand = () =&gt; {\n    drawerRef.current &amp;&amp; drawerRef.current.focus();\n  };\n\n  const onClick = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    &lt;DrawerPanelContent&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}&gt;\n          Drawer panel header\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const drawerContent =\n    &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button aria-expanded={isExpanded} onClick={onClick}&gt;\n        Toggle drawer\n      &lt;/Button&gt;\n      &lt;div style={{ height: &#39;400px&#39; }}&gt;\n        &lt;Drawer isExpanded={isExpanded} position=\&quot;bottom\&quot; onExpand={onExpand}&gt;\n          &lt;DrawerContent panelContent={panelContent}&gt;\n            &lt;DrawerContentBody&gt;{drawerContent}&lt;/DrawerContentBody&gt;\n          &lt;/DrawerContent&gt;\n        &lt;/Drawer&gt;\n      &lt;/div&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-390" data-pf-content="true" class="pf-v6-c-content--h3">Basic inline</h3>
+<astro-island uid="Z2ecERC" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from &#39;@patternfly/react-core&#39;;\n\nexport const DrawerBasicInline: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef&lt;HTMLDivElement&gt;(undefined);\n\n  const onExpand = () =&gt; {\n    drawerRef.current &amp;&amp; drawerRef.current.focus();\n  };\n\n  const onClick = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    &lt;DrawerPanelContent&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}&gt;\n          Drawer panel header\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const drawerContent =\n    &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button aria-expanded={isExpanded} onClick={onClick}&gt;\n        Toggle drawer\n      &lt;/Button&gt;\n      &lt;Drawer isExpanded={isExpanded} isInline onExpand={onExpand}&gt;\n        &lt;DrawerContent panelContent={panelContent}&gt;\n          &lt;DrawerContentBody&gt;{drawerContent}&lt;/DrawerContentBody&gt;\n        &lt;/DrawerContent&gt;\n      &lt;/Drawer&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-391" data-pf-content="true" class="pf-v6-c-content--h3">Inline panel at end</h3>
+<astro-island uid="Z29CQrW" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from &#39;@patternfly/react-core&#39;;\n\nexport const DrawerInlinePanelEnd: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef&lt;HTMLDivElement&gt;(undefined);\n\n  const onExpand = () =&gt; {\n    drawerRef.current &amp;&amp; drawerRef.current.focus();\n  };\n\n  const onClick = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    &lt;DrawerPanelContent&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}&gt;\n          Drawer panel header\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const drawerContent =\n    &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button aria-expanded={isExpanded} onClick={onClick}&gt;\n        Toggle drawer\n      &lt;/Button&gt;\n      &lt;Drawer isExpanded={isExpanded} isInline onExpand={onExpand}&gt;\n        &lt;DrawerContent panelContent={panelContent}&gt;\n          &lt;DrawerContentBody&gt;{drawerContent}&lt;/DrawerContentBody&gt;\n        &lt;/DrawerContent&gt;\n      &lt;/Drawer&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-392" data-pf-content="true" class="pf-v6-c-content--h3">Inline panel at start</h3>
+<astro-island uid="22hE44" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from &#39;@patternfly/react-core&#39;;\n\nexport const DrawerInlinePanelStart: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef&lt;HTMLDivElement&gt;(undefined);\n\n  const onExpand = () =&gt; {\n    drawerRef.current &amp;&amp; drawerRef.current.focus();\n  };\n\n  const onClick = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    &lt;DrawerPanelContent&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}&gt;\n          Drawer panel header\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const drawerContent =\n    &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button aria-expanded={isExpanded} onClick={onClick}&gt;\n        Toggle drawer\n      &lt;/Button&gt;\n      &lt;Drawer isExpanded={isExpanded} isInline position=\&quot;start\&quot; onExpand={onExpand}&gt;\n        &lt;DrawerContent panelContent={panelContent}&gt;\n          &lt;DrawerContentBody&gt;{drawerContent}&lt;/DrawerContentBody&gt;\n        &lt;/DrawerContent&gt;\n      &lt;/Drawer&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-393" data-pf-content="true" class="pf-v6-c-content--h3">Stacked content body elements</h3>
+<astro-island uid="2q5mNY" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerPanelBody,\n  Button,\n  Title\n} from &#39;@patternfly/react-core&#39;;\n\nexport const DrawerStackedContentBodyElements: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef&lt;HTMLDivElement&gt;(undefined);\n\n  const onExpand = () =&gt; {\n    drawerRef.current &amp;&amp; drawerRef.current.focus();\n  };\n\n  const onClick = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    &lt;DrawerPanelContent&gt;\n      &lt;DrawerHead&gt;\n        &lt;Title headingLevel=\&quot;h3\&quot; size=\&quot;2xl\&quot; tabIndex={isExpanded ? 0 : -1} ref={drawerRef}&gt;\n          Drawer panel header in a Title\n        &lt;/Title&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n      &lt;DrawerPanelBody hasNoPadding&gt;Drawer panel body with no padding&lt;/DrawerPanelBody&gt;\n      &lt;DrawerPanelBody&gt;Drawer panel body&lt;/DrawerPanelBody&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button aria-expanded={isExpanded} onClick={onClick}&gt;\n        Toggle drawer\n      &lt;/Button&gt;\n      &lt;Drawer isExpanded={isExpanded} onExpand={onExpand}&gt;\n        &lt;DrawerContent panelContent={panelContent}&gt;\n          &lt;DrawerContentBody&gt;content-body&lt;/DrawerContentBody&gt;\n          &lt;DrawerContentBody hasPadding&gt;content-body with padding&lt;/DrawerContentBody&gt;\n          &lt;DrawerContentBody&gt;content-body&lt;/DrawerContentBody&gt;\n        &lt;/DrawerContent&gt;\n      &lt;/Drawer&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-394" data-pf-content="true" class="pf-v6-c-content--h3">Modified content padding</h3>
+<astro-island uid="1SEMrB" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from &#39;@patternfly/react-core&#39;;\n\nexport const DrawerModifiedContentPadding: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef&lt;HTMLDivElement&gt;(undefined);\n\n  const onExpand = () =&gt; {\n    drawerRef.current &amp;&amp; drawerRef.current.focus();\n  };\n\n  const onClick = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    &lt;DrawerPanelContent&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}&gt;\n          Drawer panel header\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const drawerContent =\n    &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button aria-expanded={isExpanded} onClick={onClick}&gt;\n        Toggle drawer\n      &lt;/Button&gt;\n      &lt;Drawer isExpanded={isExpanded} onExpand={onExpand}&gt;\n        &lt;DrawerContent panelContent={panelContent}&gt;\n          &lt;DrawerContentBody hasPadding&gt;\n            &lt;b&gt;Drawer content padding.&lt;/b&gt; {drawerContent}\n          &lt;/DrawerContentBody&gt;\n        &lt;/DrawerContent&gt;\n      &lt;/Drawer&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-395" data-pf-content="true" class="pf-v6-c-content--h3">Modified panel padding</h3>
+<astro-island uid="Z28PuwG" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from &#39;@patternfly/react-core&#39;;\n\nexport const DrawerModifiedPanelPadding: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef&lt;HTMLDivElement&gt;(undefined);\n\n  const onExpand = () =&gt; {\n    drawerRef.current &amp;&amp; drawerRef.current.focus();\n  };\n\n  const onClick = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    &lt;DrawerPanelContent&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}&gt;\n          Drawer panel header\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const drawerContent =\n    &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button aria-expanded={isExpanded} onClick={onClick}&gt;\n        Toggle drawer\n      &lt;/Button&gt;\n      &lt;Drawer isExpanded={isExpanded} onExpand={onExpand}&gt;\n        &lt;DrawerContent panelContent={panelContent}&gt;\n          &lt;DrawerContentBody&gt;{drawerContent}&lt;/DrawerContentBody&gt;\n        &lt;/DrawerContent&gt;\n      &lt;/Drawer&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-396" data-pf-content="true" class="pf-v6-c-content--h3">Additional section above drawer content</h3>
+<astro-island uid="Dx5wW" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerSection,\n  Button\n} from &#39;@patternfly/react-core&#39;;\n\nexport const DrawerAdditionalSectionAboveContent: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef&lt;HTMLDivElement&gt;(undefined);\n\n  const onExpand = () =&gt; {\n    drawerRef.current &amp;&amp; drawerRef.current.focus();\n  };\n\n  const onClick = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    &lt;DrawerPanelContent&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}&gt;\n          drawer-panel\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const drawerContent =\n    &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button aria-expanded={isExpanded} onClick={onClick}&gt;\n        Toggle drawer\n      &lt;/Button&gt;\n      &lt;Drawer isExpanded={isExpanded} onExpand={onExpand}&gt;\n        &lt;DrawerSection&gt;drawer-section&lt;/DrawerSection&gt;\n        &lt;DrawerContent panelContent={panelContent}&gt;\n          &lt;DrawerContentBody&gt;{drawerContent}&lt;/DrawerContentBody&gt;\n        &lt;/DrawerContent&gt;\n      &lt;/Drawer&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-397" data-pf-content="true" class="pf-v6-c-content--h3">Static drawer</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-406" data-pf-content="true" class="pf-v6-c-content--p"><strong>Note:</strong> For mobile viewports, all drawer variants behave the same way. At the <code>md</code> breakpoint, or where <code>.pf-m-static{-on-[lg, xl, 2xl]}</code> is applied, the <code>static drawer</code> variant’s <code>close button</code> is automatically hidden because the drawer panel doesn’t close by design.</p>
+<astro-island uid="Zgsqai" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from &#39;@patternfly/react-core&#39;;\nimport accessibility from &#39;@patternfly/react-styles/css/utilities/Accessibility/accessibility&#39;;\n\nexport const DrawerStatic: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef&lt;HTMLDivElement&gt;(undefined);\n\n  const onExpand = () =&gt; {\n    drawerRef.current &amp;&amp; drawerRef.current.focus();\n  };\n\n  const onClick = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    &lt;DrawerPanelContent&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}&gt;\n          Drawer panel header\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const drawerContent =\n    &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button className={accessibility.hiddenOnMd} aria-expanded={isExpanded} onClick={onClick}&gt;\n        Toggle drawer\n      &lt;/Button&gt;\n      &lt;Drawer isStatic isExpanded={isExpanded} onExpand={onExpand}&gt;\n        &lt;DrawerContent panelContent={panelContent}&gt;\n          &lt;DrawerContentBody&gt;{drawerContent}&lt;/DrawerContentBody&gt;\n        &lt;/DrawerContent&gt;\n      &lt;/Drawer&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-398" data-pf-content="true" class="pf-v6-c-content--h3">Breakpoint</h3>
+<astro-island uid="1MPdKz" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from &#39;@patternfly/react-core&#39;;\n\nexport const DrawerBreakpoint: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef&lt;HTMLDivElement&gt;(undefined);\n\n  const onExpand = () =&gt; {\n    drawerRef.current &amp;&amp; drawerRef.current.focus();\n  };\n\n  const onClick = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    &lt;DrawerPanelContent widths={{ default: &#39;width_33&#39; }}&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}&gt;\n          Drawer panel header\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const drawerContent =\n    &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button aria-expanded={isExpanded} onClick={onClick}&gt;\n        Toggle drawer\n      &lt;/Button&gt;\n      &lt;Drawer isExpanded={isExpanded} onExpand={onExpand}&gt;\n        &lt;DrawerContent panelContent={panelContent}&gt;\n          &lt;DrawerContentBody&gt;{drawerContent}&lt;/DrawerContentBody&gt;\n        &lt;/DrawerContent&gt;\n      &lt;/Drawer&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-399" data-pf-content="true" class="pf-v6-c-content--h3">Resizable at end</h3>
+<astro-island uid="1xYXeS" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from &#39;@patternfly/react-core&#39;;\n\nexport const DrawerResizableAtEnd: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef&lt;HTMLDivElement&gt;(undefined);\n\n  const onExpand = () =&gt; {\n    drawerRef.current &amp;&amp; drawerRef.current.focus();\n  };\n\n  const onClick = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsExpanded(false);\n  };\n\n  const onResize = (_event: MouseEvent | TouchEvent | React.KeyboardEvent, newWidth: number, id: string) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(`${id} has new width of: ${newWidth}`);\n  };\n\n  const panelContent = (\n    &lt;DrawerPanelContent isResizable onResize={onResize} id=\&quot;end-resize-panel\&quot; defaultSize={&#39;500px&#39;} minSize={&#39;150px&#39;}&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}&gt;\n          Drawer panel header\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const drawerContent =\n    &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button aria-expanded={isExpanded} onClick={onClick}&gt;\n        Toggle drawer\n      &lt;/Button&gt;\n      &lt;Drawer isExpanded={isExpanded} onExpand={onExpand} position=\&quot;end\&quot;&gt;\n        &lt;DrawerContent panelContent={panelContent}&gt;\n          &lt;DrawerContentBody&gt;{drawerContent}&lt;/DrawerContentBody&gt;\n        &lt;/DrawerContent&gt;\n      &lt;/Drawer&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-400" data-pf-content="true" class="pf-v6-c-content--h3">Resizable at start</h3>
+<astro-island uid="28EiQK" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from &#39;@patternfly/react-core&#39;;\n\nexport const DrawerResizableAtStart: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef&lt;HTMLDivElement&gt;(undefined);\n\n  const onExpand = () =&gt; {\n    drawerRef.current &amp;&amp; drawerRef.current.focus();\n  };\n\n  const onClick = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    &lt;DrawerPanelContent isResizable defaultSize={&#39;500px&#39;} minSize={&#39;200px&#39;}&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}&gt;\n          Drawer panel header\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const drawerContent =\n    &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button aria-expanded={isExpanded} onClick={onClick}&gt;\n        Toggle drawer\n      &lt;/Button&gt;\n      &lt;Drawer isExpanded={isExpanded} onExpand={onExpand} position=\&quot;start\&quot;&gt;\n        &lt;DrawerContent panelContent={panelContent}&gt;\n          &lt;DrawerContentBody&gt;{drawerContent}&lt;/DrawerContentBody&gt;\n        &lt;/DrawerContent&gt;\n      &lt;/Drawer&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-401" data-pf-content="true" class="pf-v6-c-content--h3">Resizable on bottom</h3>
+<astro-island uid="21F11E" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button,\n  DrawerContent,\n  DrawerContentBody\n} from &#39;@patternfly/react-core&#39;;\n\nexport const DrawerResizableOnBottom: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef&lt;HTMLDivElement&gt;(undefined);\n\n  const onExpand = () =&gt; {\n    drawerRef.current &amp;&amp; drawerRef.current.focus();\n  };\n\n  const onClick = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsExpanded(false);\n  };\n  const panelContent = (\n    &lt;DrawerPanelContent isResizable defaultSize={&#39;200px&#39;} minSize={&#39;100px&#39;}&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}&gt;\n          Drawer panel header\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const drawerContent =\n    &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button aria-expanded={isExpanded} onClick={onClick}&gt;\n        Toggle drawer\n      &lt;/Button&gt;\n      &lt;div style={{ height: &#39;400px&#39; }}&gt;\n        &lt;Drawer isExpanded={isExpanded} onExpand={onExpand} position=\&quot;bottom\&quot;&gt;\n          &lt;DrawerContent panelContent={panelContent}&gt;\n            &lt;DrawerContentBody&gt;{drawerContent}&lt;/DrawerContentBody&gt;\n          &lt;/DrawerContent&gt;\n        &lt;/Drawer&gt;\n      &lt;/div&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-402" data-pf-content="true" class="pf-v6-c-content--h3">Resizable on inline</h3>
+<astro-island uid="1K7Ivl" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button,\n  DrawerContent,\n  DrawerContentBody\n} from &#39;@patternfly/react-core&#39;;\n\nexport const DrawerResizableOnInline: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const drawerRef = useRef&lt;HTMLDivElement&gt;(undefined);\n\n  const onExpand = () =&gt; {\n    drawerRef.current &amp;&amp; drawerRef.current.focus();\n  };\n\n  const onClick = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsExpanded(false);\n  };\n  const panelContent = (\n    &lt;DrawerPanelContent isResizable defaultSize={&#39;500px&#39;} minSize={&#39;150px&#39;}&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}&gt;\n          Drawer panel header\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const drawerContent =\n    &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button aria-expanded={isExpanded} onClick={onClick}&gt;\n        Toggle drawer\n      &lt;/Button&gt;\n      &lt;Drawer isExpanded={isExpanded} onExpand={onExpand} isInline&gt;\n        &lt;DrawerContent panelContent={panelContent}&gt;\n          &lt;DrawerContentBody&gt;{drawerContent}&lt;/DrawerContentBody&gt;\n        &lt;/DrawerContent&gt;\n      &lt;/Drawer&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-403" data-pf-content="true" class="pf-v6-c-content--h3">Panel with secondary background</h3>
+<astro-island uid="Z2bz6u1" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Checkbox,\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerSection,\n  Button,\n  DrawerColorVariant,\n  DrawerContentColorVariant\n} from &#39;@patternfly/react-core&#39;;\n\nexport const DrawerSecondaryBackground: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [panelSecondary, setPanelSecondary] = useState(true);\n  const [contentSecondary, setContentSecondary] = useState(false);\n  const [sectionSecondary, setSectionSecondary] = useState(false);\n\n  const drawerRef = useRef&lt;HTMLSpanElement&gt;(null);\n\n  const onExpand = () =&gt; {\n    drawerRef.current &amp;&amp; drawerRef.current.focus();\n  };\n\n  const onClick = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsExpanded(false);\n  };\n\n  const togglePanelSecondary = (checked: boolean) =&gt; {\n    setPanelSecondary(checked);\n  };\n\n  const toggleSectionSecondary = (checked: boolean) =&gt; {\n    setSectionSecondary(checked);\n  };\n\n  const toggleContentSecondary = (checked: boolean) =&gt; {\n    setContentSecondary(checked);\n  };\n\n  const panelContent = (\n    &lt;DrawerPanelContent colorVariant={panelSecondary ? DrawerColorVariant.secondary : DrawerColorVariant.default}&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={isExpanded ? 0 : -1} ref={drawerRef}&gt;\n          Drawer panel header\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const drawerContent =\n    &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Checkbox\n        label=\&quot;Secondary panel\&quot;\n        isChecked={panelSecondary}\n        onChange={(_event, checked) =&gt; togglePanelSecondary(checked)}\n        aria-label=\&quot;Secondary panel checkbox\&quot;\n        id=\&quot;toggle-secondary-panel\&quot;\n        name=\&quot;toggle-secondary-panel\&quot;\n      /&gt;\n      &lt;Checkbox\n        label=\&quot;Secondary content\&quot;\n        isChecked={contentSecondary}\n        onChange={(_event, checked) =&gt; toggleContentSecondary(checked)}\n        aria-label=\&quot;Secondary content checkbox\&quot;\n        id=\&quot;toggle-secondary-content\&quot;\n        name=\&quot;toggle-secondary-content\&quot;\n      /&gt;\n      &lt;Checkbox\n        label=\&quot;Secondary section\&quot;\n        isChecked={sectionSecondary}\n        onChange={(_event, checked) =&gt; toggleSectionSecondary(checked)}\n        aria-label=\&quot;Secondary section checkbox\&quot;\n        id=\&quot;toggle-secondary-section\&quot;\n        name=\&quot;toggle-secondary-section\&quot;\n      /&gt;\n      &lt;br /&gt;\n      &lt;Button aria-expanded={isExpanded} onClick={onClick}&gt;\n        Toggle drawer\n      &lt;/Button&gt;\n      &lt;Drawer isExpanded={isExpanded} onExpand={onExpand}&gt;\n        &lt;DrawerSection colorVariant={sectionSecondary ? DrawerColorVariant.secondary : DrawerColorVariant.default}&gt;\n          drawer-section\n        &lt;/DrawerSection&gt;\n        &lt;DrawerContent\n          colorVariant={contentSecondary ? DrawerContentColorVariant.secondary : DrawerContentColorVariant.default}\n          panelContent={panelContent}\n        &gt;\n          &lt;DrawerContentBody&gt;{drawerContent}&lt;/DrawerContentBody&gt;\n        &lt;/DrawerContent&gt;\n      &lt;/Drawer&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-404" data-pf-content="true" class="pf-v6-c-content--h3">With focus trap</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-409" data-pf-content="true" class="pf-v6-c-content--p">When a <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-405" data-pf-content="true" class="pf-v6-c-content--a">focus trap</a> is enabled on an element, a user will only be able to interact with the contents of that element until the focus trap is closed or deactivated.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-407" data-pf-content="true" class="pf-v6-c-content--p">To enable and customize a focus trap on a drawer panel, apply the <code>focusTrap</code> property to the <code>&lt;DrawerPanelContent&gt;</code> component. Enabling a focus trap with <code>focusTrap.enabled</code> will also automatically place focus on the first focusable element when the drawer panel expands, and return focus to the previously focused element when it collapses.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-408" data-pf-content="true" class="pf-v6-c-content--p">To customize which element receives focus when the drawer panel expands, use the <code>focusTrap.elementToFocusOnExpand</code> property.</p>
+<astro-island uid="1uNrzJ" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerPanelContent,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Button\n} from &#39;@patternfly/react-core&#39;;\n\nexport const DrawerFocusTrap: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const onClick = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsExpanded(false);\n  };\n\n  // An onKeyDown property must be passed to the Drawer component to handle closing\n  // the drawer panel and deactivating the focus trap via the Escape key.\n  const onEscape = (event: React.KeyboardEvent) =&gt; {\n    if (event.key === &#39;Escape&#39;) {\n      setIsExpanded(false);\n    }\n  };\n\n  const panelContent = (\n    &lt;DrawerPanelContent focusTrap={{ enabled: true }}&gt;\n      &lt;DrawerHead&gt;\n        &lt;span&gt;Drawer panel header&lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const drawerContent =\n    &#39;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button aria-expanded={isExpanded} onClick={onClick}&gt;\n        Toggle drawer with focus trap\n      &lt;/Button&gt;\n      &lt;Drawer onKeyDown={onEscape} isExpanded={isExpanded}&gt;\n        &lt;DrawerContent panelContent={panelContent}&gt;\n          &lt;DrawerContentBody&gt;{drawerContent}&lt;/DrawerContentBody&gt;\n        &lt;/DrawerContent&gt;\n      &lt;/Drawer&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="ZrDmBN" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;Drawer&quot;],[0,&quot;DrawerSection&quot;],[0,&quot;DrawerContent&quot;],[0,&quot;DrawerContentBody&quot;],[0,&quot;DrawerPanelContent&quot;],[0,&quot;DrawerHead&quot;],[0,&quot;DrawerActions&quot;],[0,&quot;DrawerCloseButton&quot;],[0,&quot;DrawerPanelDescription&quot;],[0,&quot;DrawerPanelBody&quot;],[0,&quot;DrawerPanelFocusTrapObject&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/drawer/react/&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;PropsTables&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-384" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
+CSS variables
+</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="2ra0zI" component-url="/_astro/CSSTable.-Emc9iTg.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;autoLinkHeader&quot;:[0,false],&quot;cssPrefix&quot;:[0,&quot;pf-v6-c-drawer&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;CSSTableComponent&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div></div></div></div> </div></section>   </div></section> </main> </div> </div> <script type="module">try{localStorage.getItem("theme-preference")==="dark"&&document.documentElement.classList.add("pf-v6-theme-dark")}catch(e){console.error("Failed to set initial theme:",e)}</script></body></html>

package/dist/docs/components/dropdown/index.html ADDED Viewed

@@ -0,0 +1,71 @@
+<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><script type="module">const n=e=>{requestAnimationFrame(()=>{document.documentElement.classList.toggle("pf-v6-theme-dark",e==="dark")})};document.addEventListener("astro:before-swap",()=>{const e=localStorage.getItem("theme-preference");n(e||"light")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:"smooth"})};document.addEventListener("DOMContentLoaded",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,""," "),setTimeout(()=>{o(e),history.replaceState(null,"",e)},500)}});window.addEventListener("hashchange",()=>{window.location.hash&&o(window.location.hash)});</script><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.9.3"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CtSceO8m.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
+<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css">
+<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
+<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
+<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-xikxfxwm-3"] { view-transition-name: astro-xikxfxwm-3; }@layer astro { ::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back]::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back]::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back][data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back][data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }</style><style>[data-astro-transition-scope="astro-2e6ke2uy-4"] { view-transition-name: astro-2e6ke2uy-4; }@layer astro { ::view-transition-old(astro-2e6ke2uy-4) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-2e6ke2uy-4) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-2e6ke2uy-4) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page">  <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="1NKv0m" prefix="r5" component-url="/_astro/PageToggle.Dnbvoa7R.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;data-astro-transition-persist&quot;:[0,&quot;astro-u5p5alki-2&quot;]}" ssr client="idle" opts="{&quot;name&quot;:&quot;PageToggle&quot;,&quot;value&quot;:true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-325"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="ZKG6RK" prefix="r7" component-url="/_astro/Toolbar.BNjGRsAQ.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{&quot;name&quot;:&quot;ReactToolbar&quot;,&quot;value&quot;:true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-109"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-326"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-327"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-109"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="193Wv7" component-url="/_astro/Navigation.B2RHZcqO.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;navData&quot;:[1,[[1,[[0,{&quot;id&quot;:[0,&quot;src/components/aboutmodal/examples/aboutmodal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;About modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/accordion/examples/accordion&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Accordion&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/actionlist/examples/actionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Action list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/alert/examples/alert&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Alert&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/avatar/examples/avatar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Avatar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backtotop/examples/backtotop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Back to top&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backdrop/examples/backdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Backdrop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backgroundimage/examples/backgroundimage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Background image&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/badge/examples/badge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/banner/examples/banner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Banner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/brand/examples/brand&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Brand&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/breadcrumb/examples/breadcrumb&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Breadcrumb&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/button/examples/button&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Button&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/calendarmonth/examples/calendarmonth&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Calendar month&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/card/examples/card&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Card&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/checkbox/examples/checkbox&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Checkbox&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/chip/examples/chip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Chip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/clipboardcopy/examples/clipboardcopy&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Clipboard copy&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/codeblock/examples/codeblock&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Code block&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/content/examples/content&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datalist/examples/datalist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Data list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datepicker/examples/datepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Date picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/descriptionlist/examples/descriptionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Description list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/divider/examples/divider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Divider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/dragdrop/examples/dragdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drag and drop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/drawer/examples/drawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/dropdown/examples/dropdown&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dropdown&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/duallistselector/examples/duallistselector&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dual list selector&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/emptystate/examples/emptystate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Empty state&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/expandablesection/examples/expandablesection&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Expandable section&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/form/examples/form&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/formselect/examples/formselect&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/helpertext/examples/helpertext&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Helper text&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/hint/examples/hint&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Hint&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/icon/examples/icon&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Icon&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/inputgroup/examples/inputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/jumplinks/examples/jumplinks&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Jump links&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/label/examples/label&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Label&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/list/examples/list&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;List&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/loginpage/examples/loginpage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Login page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/masthead/examples/masthead&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Masthead&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menu/examples/menu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menutoggle/examples/menutoggle&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu toggle&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/modal/examples/modal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/multiplefileupload/examples/multiplefileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Multiple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/nav/examples/nav&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Navigation&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationbadge/examples/notificationbadge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationdrawer/examples/notificationdrawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/numberinput/examples/numberinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Number input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/overflowmenu/examples/overflowmenu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Overflow menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/page/examples/page&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/pagination/examples/pagination&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Pagination&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/panel/examples/panel&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Panel&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/popover/examples/popover&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Popover&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progress/examples/progress&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progressstepper/examples/progressstepper&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress stepper&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/radio/examples/radio&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Radio&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/searchinput/examples/searchinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Search input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/select/examples/select&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/sidebar/examples/sidebar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Sidebar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/fileupload/examples/fileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/simplelist/examples/simplelist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skeleton/examples/skeleton&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skeleton&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skiptocontent/examples/skiptocontent&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skip to content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/slider/examples/slider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Slider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/spinner/examples/spinner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Spinner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/switch/examples/switch&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Switch&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tabs/examples/tabs&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tabs&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textarea/examples/textarea&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text area&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinput/examples/textinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinputgroup/examples/textinputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/tile/examples/tile&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tile&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timepicker/examples/timepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Time picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timestamp/examples/timestamp&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Timestamp&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/title/examples/title&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Title&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/togglegroup/examples/togglegroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toggle group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/toolbar/examples/toolbar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toolbar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tooltip/examples/tooltip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tooltip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/treeview/examples/treeview&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tree view&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/truncate/examples/truncate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Truncate&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/wizard/examples/wizard&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Wizard&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}]]]]],&quot;data-astro-transition-scope&quot;:[0,&quot;astro-xikxfxwm-3&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;ReactNav&quot;,&quot;value&quot;:&quot;react&quot;}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body">    <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item pf-m-current"> <a class="pf-v6-c-tabs__link" href="/components/dropdown/react"> React </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1999" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2015" data-pf-content="true" class="pf-v6-c-content--p"><code>Dropdown</code> builds off of the Menu component suite to wrap commonly used properties and functions for a dropdown menu. See the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2000" data-pf-content="true" class="pf-v6-c-content--a">Menu documentation</a> for a full list of properties that may be passed through <code>Dropdown</code> to further customize the dropdown menu, or the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2001" data-pf-content="true" class="pf-v6-c-content--a">custom menu examples</a> for additional examples of fully functional menus.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2002" data-pf-content="true" class="pf-v6-c-content--h3">Basic dropdowns</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2003" data-pf-content="true" class="pf-v6-c-content--p">Basic dropdowns present users with a menu of items upon clicking a dropdown toggle.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2016" data-pf-content="true" class="pf-v6-c-content--p">A <code>&lt;Dropdown&gt;</code> uses a <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2004" data-pf-content="true" class="pf-v6-c-content--a">menu toggle</a>, which is passed to the <code>toggle</code> property, as well as a <code>&lt;DropdownList&gt;</code> with multiple <code>&lt;DropdownItem&gt;</code> components. To allow a dropdown to change the open state of the menu, pass the <code>isOpen</code> property into the <code>onOpenChange</code> callback.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2005" data-pf-content="true" class="pf-v6-c-content--p">The following example shows a few different states of dropdown items. As shown in this example, dropdown items may:</p>
+<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2017" data-pf-content="true" class="pf-v6-c-content--ul">
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2009" data-pf-content="true" class="pf-v6-c-content--li">Use the <code>isDisabled</code> property to disable an item.</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2010" data-pf-content="true" class="pf-v6-c-content--li">Use the <code>onClick</code> property to trigger a callback for an action.</li>
+</ul>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2011" data-pf-content="true" class="pf-v6-c-content--p">This example also uses a <code>&lt;Divider&gt;</code> which passes in <code>key=”separator”</code> to split the menu into 2 sections with a horizontal line.</p>
+<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="NQ1Bq" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle, MenuToggleElement } from &#39;@patternfly/react-core&#39;;\n\nexport const DropdownBasic: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, value);\n    setIsOpen(false);\n  };\n\n  return (\n    &lt;Dropdown\n      isOpen={isOpen}\n      onSelect={onSelect}\n      onOpenChange={(isOpen: boolean) =&gt; setIsOpen(isOpen)}\n      toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n        &lt;MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}&gt;\n          Dropdown\n        &lt;/MenuToggle&gt;\n      )}\n      ouiaId=\&quot;BasicDropdown\&quot;\n      shouldFocusToggleOnSelect\n    &gt;\n      &lt;DropdownList&gt;\n        &lt;DropdownItem value={0} key=\&quot;action\&quot;&gt;\n          Action\n        &lt;/DropdownItem&gt;\n        &lt;DropdownItem\n          value={1}\n          key=\&quot;link\&quot;\n          to=\&quot;#default-link2\&quot;\n          // Prevent the default onClick functionality for example purposes\n          onClick={(ev: any) =&gt; ev.preventDefault()}\n        &gt;\n          Link\n        &lt;/DropdownItem&gt;\n        &lt;DropdownItem value={2} isDisabled key=\&quot;disabled action\&quot;&gt;\n          Disabled Action\n        &lt;/DropdownItem&gt;\n        &lt;DropdownItem value={3} isDisabled key=\&quot;disabled link\&quot; to=\&quot;#default-link4\&quot;&gt;\n          Disabled Link\n        &lt;/DropdownItem&gt;\n        &lt;DropdownItem\n          value={4}\n          isAriaDisabled\n          key=\&quot;aria-disabled link\&quot;\n          to=\&quot;#default-link5\&quot;\n          tooltipProps={{ content: &#39;aria-disabled link&#39;, position: &#39;top&#39; }}\n        &gt;\n          Aria-disabled Link\n        &lt;/DropdownItem&gt;\n        &lt;Divider component=\&quot;li\&quot; key=\&quot;separator\&quot; /&gt;\n        &lt;DropdownItem value={5} key=\&quot;separated action\&quot;&gt;\n          Separated Action\n        &lt;/DropdownItem&gt;\n        &lt;DropdownItem value={6} key=\&quot;separated link\&quot; to=\&quot;#default-link6\&quot; onClick={(ev) =&gt; ev.preventDefault()}&gt;\n          Separated Link\n        &lt;/DropdownItem&gt;\n      &lt;/DropdownList&gt;\n    &lt;/Dropdown&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2006" data-pf-content="true" class="pf-v6-c-content--h3">With kebab toggle</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2012" data-pf-content="true" class="pf-v6-c-content--p">To style a dropdown menu’s toggle with a kebab icon, pass a “plain” <code>&lt;MenuToggle&gt;</code> to the <code>toggle</code> property. When there isn’t enough space for a labeled button, a kebab icon can be used to toggle the dropdown menu open or closed.</p>
+<astro-island uid="Z2m23G4" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle, MenuToggleElement } from &#39;@patternfly/react-core&#39;;\nimport EllipsisVIcon from &#39;@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon&#39;;\n\nexport const DropdownWithKebab: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, value);\n    setIsOpen(false);\n  };\n\n  return (\n    &lt;Dropdown\n      isOpen={isOpen}\n      onSelect={onSelect}\n      onOpenChange={(isOpen: boolean) =&gt; setIsOpen(isOpen)}\n      toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n        &lt;MenuToggle\n          ref={toggleRef}\n          aria-label=\&quot;kebab dropdown toggle\&quot;\n          variant=\&quot;plain\&quot;\n          onClick={onToggleClick}\n          isExpanded={isOpen}\n          icon={&lt;EllipsisVIcon /&gt;}\n        /&gt;\n      )}\n      shouldFocusToggleOnSelect\n    &gt;\n      &lt;DropdownList&gt;\n        &lt;DropdownItem value={0} key=\&quot;action\&quot;&gt;\n          Action\n        &lt;/DropdownItem&gt;\n        &lt;DropdownItem\n          value={1}\n          key=\&quot;link\&quot;\n          to=\&quot;#default-link2\&quot;\n          // Prevent the default onClick functionality for example purposes\n          onClick={(ev: any) =&gt; ev.preventDefault()}\n        &gt;\n          Link\n        &lt;/DropdownItem&gt;\n        &lt;DropdownItem value={2} isDisabled key=\&quot;disabled action\&quot;&gt;\n          Disabled Action\n        &lt;/DropdownItem&gt;\n        &lt;DropdownItem value={3} isDisabled key=\&quot;disabled link\&quot; to=\&quot;#default-link4\&quot;&gt;\n          Disabled Link\n        &lt;/DropdownItem&gt;\n        &lt;Divider component=\&quot;li\&quot; key=\&quot;separator\&quot; /&gt;\n        &lt;DropdownItem value={4} key=\&quot;separated action\&quot;&gt;\n          Separated Action\n        &lt;/DropdownItem&gt;\n        &lt;DropdownItem value={5} key=\&quot;separated link\&quot; to=\&quot;#default-link6\&quot; onClick={(ev) =&gt; ev.preventDefault()}&gt;\n          Separated Link\n        &lt;/DropdownItem&gt;\n      &lt;/DropdownList&gt;\n    &lt;/Dropdown&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2007" data-pf-content="true" class="pf-v6-c-content--h3">With groups of items</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2013" data-pf-content="true" class="pf-v6-c-content--p">To group sets of related dropdown items together, use a <code>&lt;DropdownGroup&gt;</code>. When more than 1 <code>&lt;DropdownGroup&gt;</code> is created in a menu, use the <code>label</code> and <code>labelHeadingLevel</code> properties to assign a name and heading level to each group.</p>
+<astro-island uid="7EKUv" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  Dropdown,\n  DropdownGroup,\n  DropdownItem,\n  DropdownList,\n  MenuToggle,\n  MenuToggleElement,\n  Divider\n} from &#39;@patternfly/react-core&#39;;\n\nexport const DropdownWithGroups: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, value);\n    setIsOpen(false);\n  };\n\n  return (\n    &lt;Dropdown\n      isOpen={isOpen}\n      onSelect={onSelect}\n      onOpenChange={(isOpen: boolean) =&gt; setIsOpen(isOpen)}\n      toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n        &lt;MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}&gt;\n          Dropdown\n        &lt;/MenuToggle&gt;\n      )}\n      shouldFocusToggleOnSelect\n    &gt;\n      &lt;DropdownGroup&gt;\n        &lt;DropdownList&gt;\n          &lt;DropdownItem value={0} key=\&quot;action\&quot;&gt;\n            Action\n          &lt;/DropdownItem&gt;\n          &lt;DropdownItem\n            value={1}\n            key=\&quot;link\&quot;\n            to=\&quot;#default-link2\&quot;\n            // Prevent the default onClick functionality for example purposes\n            onClick={(ev: any) =&gt; ev.preventDefault()}\n          &gt;\n            Link\n          &lt;/DropdownItem&gt;\n        &lt;/DropdownList&gt;\n      &lt;/DropdownGroup&gt;\n      &lt;Divider component=\&quot;li\&quot; /&gt;\n      &lt;DropdownGroup label=\&quot;Group 2\&quot; labelHeadingLevel=\&quot;h3\&quot;&gt;\n        &lt;DropdownList&gt;\n          &lt;DropdownItem value={2} key=\&quot;group2 action\&quot;&gt;\n            Group 2 action\n          &lt;/DropdownItem&gt;\n          &lt;DropdownItem value={3} key=\&quot;group2 link\&quot; to=\&quot;#default-link4\&quot; onClick={(ev: any) =&gt; ev.preventDefault()}&gt;\n            Group 2 link\n          &lt;/DropdownItem&gt;\n        &lt;/DropdownList&gt;\n      &lt;/DropdownGroup&gt;\n      &lt;Divider /&gt;\n      &lt;DropdownGroup label=\&quot;Group 3\&quot; labelHeadingLevel=\&quot;h3\&quot;&gt;\n        &lt;DropdownList&gt;\n          &lt;DropdownItem value={4} key=\&quot;group3 action\&quot;&gt;\n            Group 3 action\n          &lt;/DropdownItem&gt;\n          &lt;DropdownItem value={5} key=\&quot;group3 link\&quot; to=\&quot;#default-link6\&quot; onClick={(ev: any) =&gt; ev.preventDefault()}&gt;\n            Group 3 link\n          &lt;/DropdownItem&gt;\n        &lt;/DropdownList&gt;\n      &lt;/DropdownGroup&gt;\n    &lt;/Dropdown&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2008" data-pf-content="true" class="pf-v6-c-content--h3">With item descriptions</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2014" data-pf-content="true" class="pf-v6-c-content--p">To provide users with more context about a <code>&lt;DropdownItem&gt;</code>, pass a short message to <code>description</code> property. As shown in the example below, an item’s description will appear below its label.</p>
+<astro-island uid="1B0zIi" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from &#39;@patternfly/react-core&#39;;\n\nexport const DropdownWithDescriptions: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const onToggleClick = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, value: string | number | undefined) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;selected&#39;, value);\n    setIsOpen(false);\n  };\n\n  return (\n    &lt;Dropdown\n      isOpen={isOpen}\n      onSelect={onSelect}\n      onOpenChange={(isOpen: boolean) =&gt; setIsOpen(isOpen)}\n      toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n        &lt;MenuToggle ref={toggleRef} isFullWidth onClick={onToggleClick} isExpanded={isOpen}&gt;\n          Dropdown\n        &lt;/MenuToggle&gt;\n      )}\n      shouldFocusToggleOnSelect\n    &gt;\n      &lt;DropdownList&gt;\n        &lt;DropdownItem value={0} key=\&quot;action\&quot; description=\&quot;This is a description\&quot;&gt;\n          Action\n        &lt;/DropdownItem&gt;\n        &lt;DropdownItem\n          value={1}\n          key=\&quot;link\&quot;\n          description=\&quot;This is a very long description that describes the menu item\&quot;\n          to=\&quot;#default-link2\&quot;\n          // Prevent the default onClick functionality for example purposes\n          onClick={(ev: any) =&gt; ev.preventDefault()}\n        &gt;\n          Link\n        &lt;/DropdownItem&gt;\n        &lt;DropdownItem value={2} isDisabled description=\&quot;Disabled link description\&quot; key=\&quot;disabled action\&quot;&gt;\n          Disabled action\n        &lt;/DropdownItem&gt;\n        &lt;DropdownItem value={3} isDisabled description=\&quot;This is a description\&quot; key=\&quot;disabled link\&quot; to=\&quot;#default-link4\&quot;&gt;\n          Disabled link\n        &lt;/DropdownItem&gt;\n      &lt;/DropdownList&gt;\n    &lt;/Dropdown&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="ZYr2Hp" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;Dropdown&quot;],[0,&quot;DropdownGroup&quot;],[0,&quot;DropdownItem&quot;],[0,&quot;DropdownList&quot;],[0,&quot;MenuToggle&quot;],[0,&quot;DropdownToggleProps&quot;],[0,&quot;DropdownPopperProps&quot;],[0,&quot;TooltipProps&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/dropdown/react&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;PropsTables&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1998" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
+CSS variables
+</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="10lBQB" component-url="/_astro/CSSTable.-Emc9iTg.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;autoLinkHeader&quot;:[0,false],&quot;cssPrefix&quot;:[0,&quot;pf-v6-c-menu&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;CSSTableComponent&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div></div></div></div> </div></section>   </div></section> </main> </div> </div> <script type="module">try{localStorage.getItem("theme-preference")==="dark"&&document.documentElement.classList.add("pf-v6-theme-dark")}catch(e){console.error("Failed to set initial theme:",e)}</script></body></html>