npm - @patternfly/patternfly-doc-core - Versions diffs - 1.13.2 → 1.13.3 - Mend

@patternfly/patternfly-doc-core 1.13.2 → 1.13.3

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 (369) hide show

package/dist/docs/components/drawer/index.html CHANGED Viewed

@@ -42,67 +42,67 @@
 	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.DBsLIFpI.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/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-1993" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
+			[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.DBsLIFpI.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.x46lNg3Y.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/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-1993" 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-1994" 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>
+<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.C43dqXje.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-1995" 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>
+<astro-island uid="Z9g48K" component-url="/_astro/LiveExample.C43dqXje.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-1996" 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>
+<astro-island uid="1ednn5" component-url="/_astro/LiveExample.C43dqXje.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-1997" 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>
+<astro-island uid="Z1S104p" component-url="/_astro/LiveExample.C43dqXje.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-1998" 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>
+<astro-island uid="Z2ecERC" component-url="/_astro/LiveExample.C43dqXje.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-1999" 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>
+<astro-island uid="Z29CQrW" component-url="/_astro/LiveExample.C43dqXje.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-2000" 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>
+<astro-island uid="22hE44" component-url="/_astro/LiveExample.C43dqXje.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-2001" 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>
+<astro-island uid="2q5mNY" component-url="/_astro/LiveExample.C43dqXje.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-2002" 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>
+<astro-island uid="1SEMrB" component-url="/_astro/LiveExample.C43dqXje.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-2003" 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>
+<astro-island uid="Z28PuwG" component-url="/_astro/LiveExample.C43dqXje.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-2004" 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>
+<astro-island uid="Dx5wW" component-url="/_astro/LiveExample.C43dqXje.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-2005" 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-2014" 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>
+<astro-island uid="Zgsqai" component-url="/_astro/LiveExample.C43dqXje.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-2006" 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>
+<astro-island uid="1MPdKz" component-url="/_astro/LiveExample.C43dqXje.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-2007" 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>
+<astro-island uid="1xYXeS" component-url="/_astro/LiveExample.C43dqXje.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-2008" 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>
+<astro-island uid="28EiQK" component-url="/_astro/LiveExample.C43dqXje.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-2009" 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>
+<astro-island uid="21F11E" component-url="/_astro/LiveExample.C43dqXje.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-2010" 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>
+<astro-island uid="1K7Ivl" component-url="/_astro/LiveExample.C43dqXje.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-2011" 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>
+<astro-island uid="Z2bz6u1" component-url="/_astro/LiveExample.C43dqXje.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-2012" 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-2017" 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-2013" 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-2015" 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-2016" 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="ZkTdYJ" 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-1992" 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>
+<astro-island uid="1uNrzJ" component-url="/_astro/LiveExample.C43dqXje.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="ZkTdYJ" 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-1992" 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>