npm - @patternfly/patternfly-doc-core - Versions diffs - 1.11.1 → 1.12.1 - Mend

@patternfly/patternfly-doc-core 1.11.1 → 1.12.1

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

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

@@ -0,0 +1,56 @@
+<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><script type="module">const n=e=>{requestAnimationFrame(()=>{document.documentElement.classList.toggle("pf-v6-theme-dark",e==="dark")})};document.addEventListener("astro:before-swap",()=>{const e=localStorage.getItem("theme-preference");n(e||"light")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:"smooth"})};document.addEventListener("DOMContentLoaded",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,""," "),setTimeout(()=>{o(e),history.replaceState(null,"",e)},500)}});window.addEventListener("hashchange",()=>{window.location.hash&&o(window.location.hash)});</script><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.9.3"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CtSceO8m.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
+<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css">
+<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
+<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
+<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-xikxfxwm-3"] { view-transition-name: astro-xikxfxwm-3; }@layer astro { ::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back]::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back]::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back][data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back][data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }</style><style>[data-astro-transition-scope="astro-2e6ke2uy-4"] { view-transition-name: astro-2e6ke2uy-4; }@layer astro { ::view-transition-old(astro-2e6ke2uy-4) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-2e6ke2uy-4) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-2e6ke2uy-4) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page">  <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="Z1vvUOD" prefix="r5" component-url="/_astro/PageToggle.Dnbvoa7R.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;data-astro-transition-persist&quot;:[0,&quot;astro-u5p5alki-2&quot;]}" ssr client="idle" opts="{&quot;name&quot;:&quot;PageToggle&quot;,&quot;value&quot;:true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-139"><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="2d1z7h" 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-47"><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-140"><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-141"><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-47"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="193Wv7" component-url="/_astro/Navigation.B2RHZcqO.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;navData&quot;:[1,[[1,[[0,{&quot;id&quot;:[0,&quot;src/components/aboutmodal/examples/aboutmodal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;About modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/accordion/examples/accordion&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Accordion&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/actionlist/examples/actionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Action list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/alert/examples/alert&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Alert&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/avatar/examples/avatar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Avatar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backtotop/examples/backtotop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Back to top&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backdrop/examples/backdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Backdrop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backgroundimage/examples/backgroundimage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Background image&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/badge/examples/badge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/banner/examples/banner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Banner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/brand/examples/brand&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Brand&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/breadcrumb/examples/breadcrumb&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Breadcrumb&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/button/examples/button&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Button&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/calendarmonth/examples/calendarmonth&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Calendar month&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/card/examples/card&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Card&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/checkbox/examples/checkbox&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Checkbox&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/chip/examples/chip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Chip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/clipboardcopy/examples/clipboardcopy&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Clipboard copy&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/codeblock/examples/codeblock&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Code block&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/content/examples/content&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datalist/examples/datalist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Data list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datepicker/examples/datepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Date picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/descriptionlist/examples/descriptionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Description list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/divider/examples/divider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Divider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/dragdrop/examples/dragdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drag and drop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/drawer/examples/drawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/dropdown/examples/dropdown&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dropdown&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/duallistselector/examples/duallistselector&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dual list selector&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/emptystate/examples/emptystate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Empty state&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/expandablesection/examples/expandablesection&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Expandable section&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/form/examples/form&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/formselect/examples/formselect&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/helpertext/examples/helpertext&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Helper text&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/hint/examples/hint&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Hint&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/icon/examples/icon&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Icon&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/inputgroup/examples/inputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/jumplinks/examples/jumplinks&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Jump links&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/label/examples/label&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Label&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/list/examples/list&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;List&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/loginpage/examples/loginpage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Login page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/masthead/examples/masthead&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Masthead&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menu/examples/menu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menutoggle/examples/menutoggle&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu toggle&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/modal/examples/modal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/multiplefileupload/examples/multiplefileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Multiple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/nav/examples/nav&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Navigation&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationbadge/examples/notificationbadge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationdrawer/examples/notificationdrawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/numberinput/examples/numberinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Number input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/overflowmenu/examples/overflowmenu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Overflow menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/page/examples/page&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/pagination/examples/pagination&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Pagination&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/panel/examples/panel&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Panel&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/popover/examples/popover&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Popover&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progress/examples/progress&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progressstepper/examples/progressstepper&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress stepper&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/radio/examples/radio&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Radio&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/searchinput/examples/searchinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Search input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/select/examples/select&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/sidebar/examples/sidebar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Sidebar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/fileupload/examples/fileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/simplelist/examples/simplelist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skeleton/examples/skeleton&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skeleton&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skiptocontent/examples/skiptocontent&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skip to content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/slider/examples/slider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Slider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/spinner/examples/spinner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Spinner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/switch/examples/switch&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Switch&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tabs/examples/tabs&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tabs&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textarea/examples/textarea&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text area&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinput/examples/textinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinputgroup/examples/textinputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/tile/examples/tile&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tile&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timepicker/examples/timepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Time picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timestamp/examples/timestamp&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Timestamp&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/title/examples/title&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Title&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/togglegroup/examples/togglegroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toggle group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/toolbar/examples/toolbar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toolbar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tooltip/examples/tooltip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tooltip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/treeview/examples/treeview&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tree view&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/truncate/examples/truncate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Truncate&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/wizard/examples/wizard&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Wizard&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}]]]]],&quot;data-astro-transition-scope&quot;:[0,&quot;astro-xikxfxwm-3&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;ReactNav&quot;,&quot;value&quot;:&quot;react&quot;}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body">    <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/notification-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-881" 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-882" 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="Iypld" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  NotificationDrawer,\n  NotificationDrawerBody,\n  NotificationDrawerHeader,\n  NotificationDrawerList,\n  NotificationDrawerListItem,\n  NotificationDrawerListItemBody,\n  NotificationDrawerListItemHeader,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement\n} from &#39;@patternfly/react-core&#39;;\nimport EllipsisVIcon from &#39;@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon&#39;;\n\nexport const NotificationDrawerBasic: React.FunctionComponent = () =&gt; {\n  const [isOpenMap, setIsOpenMap] = useState(new Array(7).fill(false));\n\n  const onToggle = (index: number) =&gt; () =&gt; {\n    const newState = [...isOpenMap.slice(0, index), !isOpenMap[index], ...isOpenMap.slice(index + 1)];\n    setIsOpenMap(newState);\n  };\n\n  const onSelect = () =&gt; {\n    setIsOpenMap(new Array(7).fill(false));\n  };\n\n  const onDrawerClose = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | KeyboardEvent) =&gt; {\n    setIsOpenMap(new Array(7).fill(false));\n  };\n\n  const [isOpen0, isOpen1, isOpen2, isOpen3, isOpen4, isOpen5, isOpen6] = isOpenMap;\n  const dropdownItems = (\n    &lt;&gt;\n      &lt;DropdownItem&gt;Action&lt;/DropdownItem&gt;\n      &lt;DropdownItem\n        to=\&quot;#default-link2\&quot;\n        // Prevent the default onClick functionality for example purposes\n        onClick={(ev: any) =&gt; ev.preventDefault()}\n      &gt;\n        Link\n      &lt;/DropdownItem&gt;\n      &lt;DropdownItem isDisabled&gt;Disabled Action&lt;/DropdownItem&gt;\n      &lt;DropdownItem isDisabled to=\&quot;#default-link4\&quot;&gt;\n        Disabled Link\n      &lt;/DropdownItem&gt;\n    &lt;/&gt;\n  );\n\n  return (\n    &lt;NotificationDrawer&gt;\n      &lt;NotificationDrawerHeader count={3} onClose={onDrawerClose}&gt;\n        &lt;Dropdown\n          onSelect={onSelect}\n          isOpen={isOpen0}\n          onOpenChange={() =&gt; setIsOpenMap(new Array(7).fill(false))}\n          popperProps={{ position: &#39;right&#39; }}\n          toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n            &lt;MenuToggle\n              ref={toggleRef}\n              isExpanded={isOpen0}\n              onClick={onToggle(0)}\n              variant=\&quot;plain\&quot;\n              aria-label={`Basic example header kebab toggle`}\n              icon={&lt;EllipsisVIcon /&gt;}\n            /&gt;\n          )}\n        &gt;\n          &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n        &lt;/Dropdown&gt;\n      &lt;/NotificationDrawerHeader&gt;\n      &lt;NotificationDrawerBody&gt;\n        &lt;NotificationDrawerList aria-label=\&quot;Notifications in the basic example\&quot;&gt;\n          &lt;NotificationDrawerListItem variant=\&quot;info\&quot;&gt;\n            &lt;NotificationDrawerListItemHeader\n              variant=\&quot;info\&quot;\n              title=\&quot;Unread info notification title\&quot;\n              srTitle=\&quot;Info notification:\&quot;\n            &gt;\n              &lt;Dropdown\n                onSelect={onSelect}\n                isOpen={isOpen1}\n                onOpenChange={() =&gt; setIsOpenMap(new Array(7).fill(false))}\n                popperProps={{ position: &#39;right&#39; }}\n                toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n                  &lt;MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen0}\n                    onClick={onToggle(1)}\n                    variant=\&quot;plain\&quot;\n                    aria-label={`Basic example notification 1 kebab toggle`}\n                    icon={&lt;EllipsisVIcon /&gt;}\n                  /&gt;\n                )}\n              &gt;\n                &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n              &lt;/Dropdown&gt;\n            &lt;/NotificationDrawerListItemHeader&gt;\n            &lt;NotificationDrawerListItemBody timestamp=\&quot;5 minutes ago\&quot;&gt;\n              This is an info notification description.\n            &lt;/NotificationDrawerListItemBody&gt;\n          &lt;/NotificationDrawerListItem&gt;\n          &lt;NotificationDrawerListItem variant=\&quot;danger\&quot;&gt;\n            &lt;NotificationDrawerListItemHeader\n              variant=\&quot;danger\&quot;\n              title=\&quot;Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.\&quot;\n              srTitle=\&quot;Danger notification:\&quot;\n            &gt;\n              &lt;Dropdown\n                onSelect={onSelect}\n                isOpen={isOpen2}\n                onOpenChange={() =&gt; setIsOpenMap(new Array(7).fill(false))}\n                popperProps={{ position: &#39;right&#39; }}\n                toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n                  &lt;MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen2}\n                    onClick={onToggle(2)}\n                    variant=\&quot;plain\&quot;\n                    aria-label={`Basic example notification 2 kebab toggle`}\n                    icon={&lt;EllipsisVIcon /&gt;}\n                  /&gt;\n                )}\n              &gt;\n                &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n              &lt;/Dropdown&gt;\n            &lt;/NotificationDrawerListItemHeader&gt;\n            &lt;NotificationDrawerListItemBody timestamp=\&quot;10 minutes ago\&quot;&gt;\n              This is a danger notification description. This is a long description to show how the title will wrap if\n              it is long and wraps to multiple lines.\n            &lt;/NotificationDrawerListItemBody&gt;\n          &lt;/NotificationDrawerListItem&gt;\n          &lt;NotificationDrawerListItem variant=\&quot;danger\&quot;&gt;\n            &lt;NotificationDrawerListItemHeader\n              truncateTitle={1}\n              variant=\&quot;danger\&quot;\n              title=\&quot;Unread danger notification title. This is a long title to show how the title will be truncated if it is long and will be shown in a single line.\&quot;\n              srTitle=\&quot;Danger notification:\&quot;\n            &gt;\n              &lt;Dropdown\n                onSelect={onSelect}\n                isOpen={isOpen3}\n                onOpenChange={() =&gt; setIsOpenMap(new Array(7).fill(false))}\n                popperProps={{ position: &#39;right&#39; }}\n                toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n                  &lt;MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen3}\n                    onClick={onToggle(3)}\n                    variant=\&quot;plain\&quot;\n                    aria-label={`Basic example notification 3 kebab toggle`}\n                    icon={&lt;EllipsisVIcon /&gt;}\n                  /&gt;\n                )}\n              &gt;\n                &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n              &lt;/Dropdown&gt;\n            &lt;/NotificationDrawerListItemHeader&gt;\n            &lt;NotificationDrawerListItemBody timestamp=\&quot;10 minutes ago\&quot;&gt;\n              This is a danger notification description. This is a long description to show how the title will wrap if\n              it is long and wraps to multiple lines.\n            &lt;/NotificationDrawerListItemBody&gt;\n          &lt;/NotificationDrawerListItem&gt;\n          &lt;NotificationDrawerListItem variant=\&quot;warning\&quot; isRead&gt;\n            &lt;NotificationDrawerListItemHeader\n              variant=\&quot;warning\&quot;\n              title=\&quot;Read warning notification title\&quot;\n              srTitle=\&quot;Warning notification:\&quot;\n            &gt;\n              &lt;Dropdown\n                onSelect={onSelect}\n                isOpen={isOpen4}\n                onOpenChange={() =&gt; setIsOpenMap(new Array(7).fill(false))}\n                popperProps={{ position: &#39;right&#39; }}\n                toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n                  &lt;MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen4}\n                    onClick={onToggle(4)}\n                    variant=\&quot;plain\&quot;\n                    aria-label={`Basic example notification 4 kebab toggle`}\n                    icon={&lt;EllipsisVIcon /&gt;}\n                  /&gt;\n                )}\n              &gt;\n                &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n              &lt;/Dropdown&gt;\n            &lt;/NotificationDrawerListItemHeader&gt;\n            &lt;NotificationDrawerListItemBody timestamp=\&quot;20 minutes ago\&quot;&gt;\n              This is a warning notification description.\n            &lt;/NotificationDrawerListItemBody&gt;\n          &lt;/NotificationDrawerListItem&gt;\n          &lt;NotificationDrawerListItem variant=\&quot;success\&quot; isRead&gt;\n            &lt;NotificationDrawerListItemHeader\n              variant=\&quot;success\&quot;\n              title=\&quot;Read success notification title\&quot;\n              srTitle=\&quot;Success notification:\&quot;\n            &gt;\n              &lt;Dropdown\n                onSelect={onSelect}\n                isOpen={isOpen5}\n                onOpenChange={() =&gt; setIsOpenMap(new Array(7).fill(false))}\n                popperProps={{ position: &#39;right&#39; }}\n                toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n                  &lt;MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen5}\n                    onClick={onToggle(5)}\n                    variant=\&quot;plain\&quot;\n                    aria-label={`Basic example notification 5 kebab toggle`}\n                    icon={&lt;EllipsisVIcon /&gt;}\n                  /&gt;\n                )}\n              &gt;\n                &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n              &lt;/Dropdown&gt;\n            &lt;/NotificationDrawerListItemHeader&gt;\n            &lt;NotificationDrawerListItemBody timestamp=\&quot;30 minutes ago\&quot;&gt;\n              This is a success notification description.\n            &lt;/NotificationDrawerListItemBody&gt;\n          &lt;/NotificationDrawerListItem&gt;\n          &lt;NotificationDrawerListItem isRead&gt;\n            &lt;NotificationDrawerListItemHeader title=\&quot;Read (default) notification title\&quot; srTitle=\&quot;notification:\&quot;&gt;\n              &lt;Dropdown\n                onSelect={onSelect}\n                isOpen={isOpen6}\n                onOpenChange={() =&gt; setIsOpenMap(new Array(7).fill(false))}\n                popperProps={{ position: &#39;right&#39; }}\n                toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n                  &lt;MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen6}\n                    onClick={onToggle(6)}\n                    variant=\&quot;plain\&quot;\n                    aria-label={`Basic example notification 6 kebab toggle`}\n                    icon={&lt;EllipsisVIcon /&gt;}\n                  /&gt;\n                )}\n              &gt;\n                &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n              &lt;/Dropdown&gt;\n            &lt;/NotificationDrawerListItemHeader&gt;\n            &lt;NotificationDrawerListItemBody timestamp=\&quot;35 minutes ago\&quot;&gt;\n              This is a default notification description.\n            &lt;/NotificationDrawerListItemBody&gt;\n          &lt;/NotificationDrawerListItem&gt;\n        &lt;/NotificationDrawerList&gt;\n      &lt;/NotificationDrawerBody&gt;\n    &lt;/NotificationDrawer&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-883" data-pf-content="true" class="pf-v6-c-content--h3">Groups</h3>
+<astro-island uid="Z2emfR" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  Button,\n  EmptyState,\n  EmptyStateBody,\n  EmptyStateFooter,\n  NotificationDrawer,\n  NotificationDrawerBody,\n  NotificationDrawerHeader,\n  NotificationDrawerGroup,\n  NotificationDrawerGroupList,\n  NotificationDrawerList,\n  NotificationDrawerListItem,\n  NotificationDrawerListItemBody,\n  NotificationDrawerListItemHeader,\n  EmptyStateVariant,\n  EmptyStateActions,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement\n} from &#39;@patternfly/react-core&#39;;\nimport EllipsisVIcon from &#39;@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon&#39;;\nimport SearchIcon from &#39;@patternfly/react-icons/dist/esm/icons/search-icon&#39;;\n\nexport const NotificationDrawerGroups: React.FunctionComponent = () =&gt; {\n  const [firstGroupExpanded, setFirstGroupExpanded] = useState(false);\n  const [secondGroupExpanded, setSecondGroupExpanded] = useState(true);\n  const [thirdGroupExpanded, setThirdGroupExpanded] = useState(false);\n  const [isOpenMap, setIsOpenMap] = useState({});\n\n  const onToggle = (id: string) =&gt; {\n    setIsOpenMap((prevState) =&gt; ({ ...prevState, [id]: !prevState[id] }));\n  };\n\n  const onSelect = () =&gt; {\n    setIsOpenMap({});\n  };\n\n  const toggleFirstDrawer = (_event: any, value: boolean) =&gt; {\n    setFirstGroupExpanded(value);\n    setSecondGroupExpanded(false);\n    setThirdGroupExpanded(false);\n  };\n\n  const toggleSecondDrawer = (_event: any, value: boolean) =&gt; {\n    setSecondGroupExpanded(value);\n    setFirstGroupExpanded(false);\n    setThirdGroupExpanded(false);\n  };\n\n  const toggleThirdDrawer = (_event: any, value: boolean) =&gt; {\n    setThirdGroupExpanded(value);\n    setSecondGroupExpanded(false);\n    setFirstGroupExpanded(false);\n  };\n\n  const dropdownItems = (\n    &lt;&gt;\n      &lt;DropdownItem&gt;Action&lt;/DropdownItem&gt;\n      &lt;DropdownItem\n        to=\&quot;#default-link2\&quot;\n        // Prevent the default onClick functionality for example purposes\n        onClick={(ev: any) =&gt; ev.preventDefault()}\n      &gt;\n        Link\n      &lt;/DropdownItem&gt;\n      &lt;DropdownItem isDisabled&gt;Disabled Action&lt;/DropdownItem&gt;\n      &lt;DropdownItem isDisabled to=\&quot;#default-link4\&quot;&gt;\n        Disabled Link\n      &lt;/DropdownItem&gt;\n    &lt;/&gt;\n  );\n\n  return (\n    &lt;NotificationDrawer&gt;\n      &lt;NotificationDrawerHeader count={4}&gt;\n        &lt;Dropdown\n          onSelect={onSelect}\n          isOpen={isOpenMap[&#39;groups-kebab-toggle-1&#39;] || false}\n          onOpenChange={() =&gt; setIsOpenMap({})}\n          popperProps={{ position: &#39;right&#39; }}\n          toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n            &lt;MenuToggle\n              ref={toggleRef}\n              id=\&quot;groups-kebab-toggle-1\&quot;\n              isExpanded={isOpenMap[&#39;groups-kebab-toggle-1&#39;] || false}\n              onClick={() =&gt; onToggle(&#39;groups-kebab-toggle-1&#39;)}\n              variant=\&quot;plain\&quot;\n              aria-label={`Groups example header kebab toggle`}\n              icon={&lt;EllipsisVIcon /&gt;}\n            /&gt;\n          )}\n        &gt;\n          &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n        &lt;/Dropdown&gt;\n      &lt;/NotificationDrawerHeader&gt;\n      &lt;NotificationDrawerBody&gt;\n        &lt;NotificationDrawerGroupList&gt;\n          &lt;NotificationDrawerGroup\n            title=\&quot;First notification group\&quot;\n            isExpanded={firstGroupExpanded}\n            count={2}\n            onExpand={toggleFirstDrawer}\n          &gt;\n            &lt;NotificationDrawerList isHidden={!firstGroupExpanded} aria-label=\&quot;Notifications in the first group\&quot;&gt;\n              &lt;NotificationDrawerListItem variant=\&quot;info\&quot;&gt;\n                &lt;NotificationDrawerListItemHeader\n                  variant=\&quot;info\&quot;\n                  title=\&quot;Unread info notification title\&quot;\n                  srTitle=\&quot;Info notification:\&quot;\n                &gt;\n                  &lt;Dropdown\n                    onSelect={onSelect}\n                    isOpen={isOpenMap[&#39;groups-kebab-toggle-2&#39;] || false}\n                    onOpenChange={() =&gt; setIsOpenMap({})}\n                    popperProps={{ position: &#39;right&#39; }}\n                    toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n                      &lt;MenuToggle\n                        ref={toggleRef}\n                        id=\&quot;groups-kebab-toggle-2\&quot;\n                        isExpanded={isOpenMap[&#39;groups-kebab-toggle-2&#39;] || false}\n                        onClick={() =&gt; onToggle(&#39;groups-kebab-toggle-2&#39;)}\n                        variant=\&quot;plain\&quot;\n                        aria-label={`Groups example group 1 notification 1 kebab toggle`}\n                        icon={&lt;EllipsisVIcon /&gt;}\n                      /&gt;\n                    )}\n                  &gt;\n                    &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n                  &lt;/Dropdown&gt;\n                &lt;/NotificationDrawerListItemHeader&gt;\n                &lt;NotificationDrawerListItemBody timestamp=\&quot;5 minutes ago\&quot;&gt;\n                  This is an info notification description.\n                &lt;/NotificationDrawerListItemBody&gt;\n              &lt;/NotificationDrawerListItem&gt;\n              &lt;NotificationDrawerListItem variant=\&quot;danger\&quot;&gt;\n                &lt;NotificationDrawerListItemHeader\n                  variant=\&quot;danger\&quot;\n                  title=\&quot;Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.\&quot;\n                  srTitle=\&quot;Danger notification:\&quot;\n                &gt;\n                  &lt;Dropdown\n                    onSelect={onSelect}\n                    isOpen={isOpenMap[&#39;groups-kebab-toggle-3&#39;] || false}\n                    onOpenChange={() =&gt; setIsOpenMap({})}\n                    popperProps={{ position: &#39;right&#39; }}\n                    toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n                      &lt;MenuToggle\n                        ref={toggleRef}\n                        id=\&quot;groups-kebab-toggle-3\&quot;\n                        isExpanded={isOpenMap[&#39;groups-kebab-toggle-3&#39;] || false}\n                        onClick={() =&gt; onToggle(&#39;groups-kebab-toggle-3&#39;)}\n                        variant=\&quot;plain\&quot;\n                        aria-label={`Groups example group 1 notification 2 kebab toggle`}\n                        icon={&lt;EllipsisVIcon /&gt;}\n                      /&gt;\n                    )}\n                  &gt;\n                    &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n                  &lt;/Dropdown&gt;\n                &lt;/NotificationDrawerListItemHeader&gt;\n                &lt;NotificationDrawerListItemBody timestamp=\&quot;10 minutes ago\&quot;&gt;\n                  This is a danger notification description. This is a long description to show how the title will wrap\n                  if it is long and wraps to multiple lines.\n                &lt;/NotificationDrawerListItemBody&gt;\n              &lt;/NotificationDrawerListItem&gt;\n              &lt;NotificationDrawerListItem variant=\&quot;warning\&quot; isRead&gt;\n                &lt;NotificationDrawerListItemHeader\n                  variant=\&quot;warning\&quot;\n                  title=\&quot;Read warning notification title\&quot;\n                  srTitle=\&quot;Warning notification:\&quot;\n                &gt;\n                  &lt;Dropdown\n                    onSelect={onSelect}\n                    isOpen={isOpenMap[&#39;groups-kebab-toggle-4&#39;] || false}\n                    onOpenChange={() =&gt; setIsOpenMap({})}\n                    popperProps={{ position: &#39;right&#39; }}\n                    toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n                      &lt;MenuToggle\n                        ref={toggleRef}\n                        id=\&quot;groups-kebab-toggle-4\&quot;\n                        isExpanded={isOpenMap[&#39;groups-kebab-toggle-4&#39;] || false}\n                        onClick={() =&gt; onToggle(&#39;groups-kebab-toggle-4&#39;)}\n                        variant=\&quot;plain\&quot;\n                        aria-label={`Groups example group 1 notification 3 kebab toggle`}\n                        icon={&lt;EllipsisVIcon /&gt;}\n                      /&gt;\n                    )}\n                  &gt;\n                    &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n                  &lt;/Dropdown&gt;\n                &lt;/NotificationDrawerListItemHeader&gt;\n                &lt;NotificationDrawerListItemBody timestamp=\&quot;20 minutes ago\&quot;&gt;\n                  This is a warning notification description.\n                &lt;/NotificationDrawerListItemBody&gt;\n              &lt;/NotificationDrawerListItem&gt;\n              &lt;NotificationDrawerListItem variant=\&quot;success\&quot; isRead&gt;\n                &lt;NotificationDrawerListItemHeader\n                  variant=\&quot;success\&quot;\n                  title=\&quot;Read success notification title\&quot;\n                  srTitle=\&quot;Success notification:\&quot;\n                &gt;\n                  &lt;Dropdown\n                    onSelect={onSelect}\n                    isOpen={isOpenMap[&#39;groups-kebab-toggle-5&#39;] || false}\n                    onOpenChange={() =&gt; setIsOpenMap({})}\n                    popperProps={{ position: &#39;right&#39; }}\n                    toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n                      &lt;MenuToggle\n                        ref={toggleRef}\n                        id=\&quot;groups-kebab-toggle-5\&quot;\n                        isExpanded={isOpenMap[&#39;groups-kebab-toggle-5&#39;] || false}\n                        onClick={() =&gt; onToggle(&#39;groups-kebab-toggle-5&#39;)}\n                        variant=\&quot;plain\&quot;\n                        aria-label={`Groups example group 1 notification 4 kebab toggle`}\n                        icon={&lt;EllipsisVIcon /&gt;}\n                      /&gt;\n                    )}\n                  &gt;\n                    &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n                  &lt;/Dropdown&gt;\n                &lt;/NotificationDrawerListItemHeader&gt;\n                &lt;NotificationDrawerListItemBody timestamp=\&quot;30 minutes ago\&quot;&gt;\n                  This is a success notification description.\n                &lt;/NotificationDrawerListItemBody&gt;\n              &lt;/NotificationDrawerListItem&gt;\n            &lt;/NotificationDrawerList&gt;\n          &lt;/NotificationDrawerGroup&gt;\n          &lt;NotificationDrawerGroup\n            title=\&quot;Second notification group\&quot;\n            isExpanded={secondGroupExpanded}\n            count={2}\n            onExpand={toggleSecondDrawer}\n          &gt;\n            &lt;NotificationDrawerList isHidden={!secondGroupExpanded} aria-label=\&quot;Notifications in the second group\&quot;&gt;\n              &lt;NotificationDrawerListItem variant=\&quot;info\&quot;&gt;\n                &lt;NotificationDrawerListItemHeader\n                  variant=\&quot;info\&quot;\n                  title=\&quot;Unread info notification title\&quot;\n                  srTitle=\&quot;Info notification:\&quot;\n                &gt;\n                  &lt;Dropdown\n                    onSelect={onSelect}\n                    isOpen={isOpenMap[&#39;groups-kebab-toggle-6&#39;] || false}\n                    onOpenChange={() =&gt; setIsOpenMap({})}\n                    popperProps={{ position: &#39;right&#39; }}\n                    toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n                      &lt;MenuToggle\n                        ref={toggleRef}\n                        id=\&quot;groups-kebab-toggle-6\&quot;\n                        isExpanded={isOpenMap[&#39;groups-kebab-toggle-6&#39;] || false}\n                        onClick={() =&gt; onToggle(&#39;groups-kebab-toggle-6&#39;)}\n                        variant=\&quot;plain\&quot;\n                        aria-label={`Groups example group 2 notification 1 kebab toggle`}\n                        icon={&lt;EllipsisVIcon /&gt;}\n                      /&gt;\n                    )}\n                  &gt;\n                    &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n                  &lt;/Dropdown&gt;\n                &lt;/NotificationDrawerListItemHeader&gt;\n                &lt;NotificationDrawerListItemBody timestamp=\&quot;5 minutes ago\&quot;&gt;\n                  This is an info notification description.\n                &lt;/NotificationDrawerListItemBody&gt;\n              &lt;/NotificationDrawerListItem&gt;\n              &lt;NotificationDrawerListItem variant=\&quot;danger\&quot;&gt;\n                &lt;NotificationDrawerListItemHeader\n                  variant=\&quot;danger\&quot;\n                  title=\&quot;Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.\&quot;\n                  srTitle=\&quot;Danger notification:\&quot;\n                &gt;\n                  &lt;Dropdown\n                    onSelect={onSelect}\n                    isOpen={isOpenMap[&#39;groups-kebab-toggle-7&#39;] || false}\n                    onOpenChange={() =&gt; setIsOpenMap({})}\n                    popperProps={{ position: &#39;right&#39; }}\n                    toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n                      &lt;MenuToggle\n                        ref={toggleRef}\n                        id=\&quot;groups-kebab-toggle-7\&quot;\n                        isExpanded={isOpenMap[&#39;groups-kebab-toggle-7&#39;] || false}\n                        onClick={() =&gt; onToggle(&#39;groups-kebab-toggle-7&#39;)}\n                        variant=\&quot;plain\&quot;\n                        aria-label={`Groups example group 2 notification 2 kebab toggle`}\n                        icon={&lt;EllipsisVIcon /&gt;}\n                      /&gt;\n                    )}\n                  &gt;\n                    &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n                  &lt;/Dropdown&gt;\n                &lt;/NotificationDrawerListItemHeader&gt;\n                &lt;NotificationDrawerListItemBody timestamp=\&quot;10 minutes ago\&quot;&gt;\n                  This is a danger notification description. This is a long description to show how the title will wrap\n                  if it is long and wraps to multiple lines.\n                &lt;/NotificationDrawerListItemBody&gt;\n              &lt;/NotificationDrawerListItem&gt;\n              &lt;NotificationDrawerListItem variant=\&quot;warning\&quot; isRead&gt;\n                &lt;NotificationDrawerListItemHeader\n                  variant=\&quot;warning\&quot;\n                  title=\&quot;Read warning notification title\&quot;\n                  srTitle=\&quot;Warning notification:\&quot;\n                &gt;\n                  &lt;Dropdown\n                    onSelect={onSelect}\n                    isOpen={isOpenMap[&#39;groups-kebab-toggle-8&#39;] || false}\n                    onOpenChange={() =&gt; setIsOpenMap({})}\n                    popperProps={{ position: &#39;right&#39; }}\n                    toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n                      &lt;MenuToggle\n                        ref={toggleRef}\n                        id=\&quot;groups-kebab-toggle-8\&quot;\n                        isExpanded={isOpenMap[&#39;groups-kebab-toggle-8&#39;] || false}\n                        onClick={() =&gt; onToggle(&#39;groups-kebab-toggle-8&#39;)}\n                        variant=\&quot;plain\&quot;\n                        aria-label={`Groups example group 2 notification 3 kebab toggle`}\n                        icon={&lt;EllipsisVIcon /&gt;}\n                      /&gt;\n                    )}\n                  &gt;\n                    &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n                  &lt;/Dropdown&gt;\n                &lt;/NotificationDrawerListItemHeader&gt;\n                &lt;NotificationDrawerListItemBody timestamp=\&quot;20 minutes ago\&quot;&gt;\n                  This is a warning notification description.\n                &lt;/NotificationDrawerListItemBody&gt;\n              &lt;/NotificationDrawerListItem&gt;\n              &lt;NotificationDrawerListItem variant=\&quot;success\&quot; isRead&gt;\n                &lt;NotificationDrawerListItemHeader\n                  variant=\&quot;success\&quot;\n                  title=\&quot;Read success notification title\&quot;\n                  srTitle=\&quot;Success notification:\&quot;\n                &gt;\n                  &lt;Dropdown\n                    onSelect={onSelect}\n                    isOpen={isOpenMap[&#39;groups-kebab-toggle-9&#39;] || false}\n                    onOpenChange={() =&gt; setIsOpenMap({})}\n                    popperProps={{ position: &#39;right&#39; }}\n                    toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n                      &lt;MenuToggle\n                        ref={toggleRef}\n                        id=\&quot;groups-kebab-toggle-9\&quot;\n                        isExpanded={isOpenMap[&#39;groups-kebab-toggle-9&#39;] || false}\n                        onClick={() =&gt; onToggle(&#39;groups-kebab-toggle-9&#39;)}\n                        variant=\&quot;plain\&quot;\n                        aria-label={`Groups example group 2 notification 4 kebab toggle`}\n                        icon={&lt;EllipsisVIcon /&gt;}\n                      /&gt;\n                    )}\n                  &gt;\n                    &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n                  &lt;/Dropdown&gt;\n                &lt;/NotificationDrawerListItemHeader&gt;\n                &lt;NotificationDrawerListItemBody timestamp=\&quot;30 minutes ago\&quot;&gt;\n                  This is a success notification description.\n                &lt;/NotificationDrawerListItemBody&gt;\n              &lt;/NotificationDrawerListItem&gt;\n            &lt;/NotificationDrawerList&gt;\n          &lt;/NotificationDrawerGroup&gt;\n          &lt;NotificationDrawerGroup\n            title=\&quot;Third notification group. This is a long title to show how the title will be truncated if it is long and will be shown in a single line.\&quot;\n            isExpanded={thirdGroupExpanded}\n            count={0}\n            onExpand={toggleThirdDrawer}\n            truncateTitle={1}\n          &gt;\n            &lt;NotificationDrawerList isHidden={!thirdGroupExpanded} aria-label=\&quot;Notifications in the third group\&quot;&gt;\n              &lt;EmptyState\n                headingLevel=\&quot;h2\&quot;\n                titleText=\&quot;No alerts found\&quot;\n                icon={SearchIcon}\n                variant={EmptyStateVariant.full}\n              &gt;\n                &lt;EmptyStateBody&gt;\n                  There are currently no critical alerts firing. There may be firing alerts of other severities or\n                  silenced critical alerts however.\n                &lt;/EmptyStateBody&gt;\n                &lt;EmptyStateFooter&gt;\n                  &lt;EmptyStateActions&gt;\n                    &lt;Button variant=\&quot;link\&quot;&gt;Action&lt;/Button&gt;\n                  &lt;/EmptyStateActions&gt;\n                &lt;/EmptyStateFooter&gt;\n              &lt;/EmptyState&gt;\n            &lt;/NotificationDrawerList&gt;\n          &lt;/NotificationDrawerGroup&gt;\n        &lt;/NotificationDrawerGroupList&gt;\n      &lt;/NotificationDrawerBody&gt;\n    &lt;/NotificationDrawer&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-884" data-pf-content="true" class="pf-v6-c-content--h3">Lightweight</h3>
+<astro-island uid="Qh1zA" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  Button,\n  EmptyState,\n  EmptyStateBody,\n  EmptyStateFooter,\n  EmptyStateVariant,\n  NotificationDrawer,\n  NotificationDrawerBody,\n  NotificationDrawerHeader,\n  NotificationDrawerGroup,\n  NotificationDrawerGroupList,\n  NotificationDrawerList,\n  NotificationDrawerListItem,\n  NotificationDrawerListItemBody,\n  NotificationDrawerListItemHeader,\n  EmptyStateActions\n} from &#39;@patternfly/react-core&#39;;\nimport SearchIcon from &#39;@patternfly/react-icons/dist/esm/icons/search-icon&#39;;\n\nexport const NotificationDrawerLightweight: React.FunctionComponent = () =&gt; {\n  const [firstGroupExpanded, setFirstGroupExpanded] = useState(false);\n  const [secondGroupExpanded, setSecondGroupExpanded] = useState(true);\n  const [thirdGroupExpanded, setThirdGroupExpanded] = useState(false);\n\n  const toggleFirstDrawer = (_event: any, value: boolean) =&gt; {\n    setFirstGroupExpanded(value);\n    setSecondGroupExpanded(false);\n    setThirdGroupExpanded(false);\n  };\n\n  const toggleSecondDrawer = (_event: any, value: boolean) =&gt; {\n    setSecondGroupExpanded(value);\n    setFirstGroupExpanded(false);\n    setThirdGroupExpanded(false);\n  };\n\n  const toggleThirdDrawer = (_event: any, value: boolean) =&gt; {\n    setThirdGroupExpanded(value);\n    setSecondGroupExpanded(false);\n    setFirstGroupExpanded(false);\n  };\n\n  const onDrawerClose = (_event: KeyboardEvent | React.MouseEvent&lt;Element, MouseEvent&gt;) =&gt; {\n    // do something cool in a callback\n  };\n\n  return (\n    &lt;NotificationDrawer&gt;\n      &lt;NotificationDrawerHeader onClose={(event) =&gt; onDrawerClose(event)} /&gt;\n      &lt;NotificationDrawerBody&gt;\n        &lt;NotificationDrawerGroupList&gt;\n          &lt;NotificationDrawerGroup\n            title=\&quot;First notification group\&quot;\n            isExpanded={firstGroupExpanded}\n            count={4}\n            isRead={true}\n            onExpand={toggleFirstDrawer}\n          &gt;\n            &lt;NotificationDrawerList\n              isHidden={!firstGroupExpanded}\n              aria-label=\&quot;Notifications in the first lightweight group\&quot;\n            &gt;\n              &lt;NotificationDrawerListItem variant=\&quot;info\&quot;&gt;\n                &lt;NotificationDrawerListItemHeader\n                  variant=\&quot;info\&quot;\n                  title=\&quot;Info notification title\&quot;\n                  srTitle=\&quot;Info notification:\&quot;\n                /&gt;\n                &lt;NotificationDrawerListItemBody timestamp=\&quot;5 minutes ago\&quot;&gt;\n                  This is an info notification description.\n                &lt;/NotificationDrawerListItemBody&gt;\n              &lt;/NotificationDrawerListItem&gt;\n              &lt;NotificationDrawerListItem variant=\&quot;danger\&quot;&gt;\n                &lt;NotificationDrawerListItemHeader\n                  variant=\&quot;danger\&quot;\n                  title=\&quot;Danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.\&quot;\n                  srTitle=\&quot;Danger notification:\&quot;\n                /&gt;\n                &lt;NotificationDrawerListItemBody timestamp=\&quot;10 minutes ago\&quot;&gt;\n                  This is a danger notification description. This is a long description to show how the title will wrap\n                  if it is long and wraps to multiple lines.\n                &lt;/NotificationDrawerListItemBody&gt;\n              &lt;/NotificationDrawerListItem&gt;\n              &lt;NotificationDrawerListItem variant=\&quot;warning\&quot;&gt;\n                &lt;NotificationDrawerListItemHeader\n                  variant=\&quot;warning\&quot;\n                  title=\&quot;Warning notification title\&quot;\n                  srTitle=\&quot;Warning notification:\&quot;\n                /&gt;\n                &lt;NotificationDrawerListItemBody timestamp=\&quot;20 minutes ago\&quot;&gt;\n                  This is a warning notification description.\n                &lt;/NotificationDrawerListItemBody&gt;\n              &lt;/NotificationDrawerListItem&gt;\n              &lt;NotificationDrawerListItem variant=\&quot;success\&quot;&gt;\n                &lt;NotificationDrawerListItemHeader\n                  variant=\&quot;success\&quot;\n                  title=\&quot;Success notification title\&quot;\n                  srTitle=\&quot;Success notification:\&quot;\n                /&gt;\n                &lt;NotificationDrawerListItemBody timestamp=\&quot;30 minutes ago\&quot;&gt;\n                  This is a success notification description.\n                &lt;/NotificationDrawerListItemBody&gt;\n              &lt;/NotificationDrawerListItem&gt;\n            &lt;/NotificationDrawerList&gt;\n          &lt;/NotificationDrawerGroup&gt;\n          &lt;NotificationDrawerGroup\n            title=\&quot;Second notification group\&quot;\n            isExpanded={secondGroupExpanded}\n            count={4}\n            isRead={true}\n            onExpand={toggleSecondDrawer}\n          &gt;\n            &lt;NotificationDrawerList\n              isHidden={!secondGroupExpanded}\n              aria-label=\&quot;Notifications in the second lightweight group\&quot;\n            &gt;\n              &lt;NotificationDrawerListItem variant=\&quot;info\&quot;&gt;\n                &lt;NotificationDrawerListItemHeader\n                  variant=\&quot;info\&quot;\n                  title=\&quot;Info notification title w/action\&quot;\n                  srTitle=\&quot;Info notification:\&quot;\n                &gt;\n                  &lt;Button variant=\&quot;link\&quot;&gt;Action&lt;/Button&gt;\n                &lt;/NotificationDrawerListItemHeader&gt;\n                &lt;NotificationDrawerListItemBody timestamp=\&quot;5 minutes ago\&quot;&gt;\n                  This is an info notification description.\n                &lt;/NotificationDrawerListItemBody&gt;\n              &lt;/NotificationDrawerListItem&gt;\n              &lt;NotificationDrawerListItem variant=\&quot;danger\&quot;&gt;\n                &lt;NotificationDrawerListItemHeader\n                  variant=\&quot;danger\&quot;\n                  title=\&quot;Danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.\&quot;\n                  srTitle=\&quot;Danger notification:\&quot;\n                /&gt;\n                &lt;NotificationDrawerListItemBody timestamp=\&quot;10 minutes ago\&quot;&gt;\n                  This is a danger notification description. This is a long description to show how the title will wrap\n                  if it is long and wraps to multiple lines.\n                &lt;/NotificationDrawerListItemBody&gt;\n              &lt;/NotificationDrawerListItem&gt;\n              &lt;NotificationDrawerListItem variant=\&quot;warning\&quot;&gt;\n                &lt;NotificationDrawerListItemHeader\n                  variant=\&quot;warning\&quot;\n                  title=\&quot;Warning notification title\&quot;\n                  srTitle=\&quot;Warning notification:\&quot;\n                /&gt;\n                &lt;NotificationDrawerListItemBody timestamp=\&quot;20 minutes ago\&quot;&gt;\n                  This is a warning notification description.\n                &lt;/NotificationDrawerListItemBody&gt;\n              &lt;/NotificationDrawerListItem&gt;\n              &lt;NotificationDrawerListItem variant=\&quot;success\&quot;&gt;\n                &lt;NotificationDrawerListItemHeader\n                  variant=\&quot;success\&quot;\n                  title=\&quot;Success notification title\&quot;\n                  srTitle=\&quot;Success notification:\&quot;\n                /&gt;\n                &lt;NotificationDrawerListItemBody timestamp=\&quot;30 minutes ago\&quot;&gt;\n                  This is a success notification description.\n                &lt;/NotificationDrawerListItemBody&gt;\n              &lt;/NotificationDrawerListItem&gt;\n            &lt;/NotificationDrawerList&gt;\n          &lt;/NotificationDrawerGroup&gt;\n          &lt;NotificationDrawerGroup\n            title=\&quot;Third notification group\&quot;\n            isExpanded={thirdGroupExpanded}\n            count={0}\n            isRead={true}\n            onExpand={toggleThirdDrawer}\n          &gt;\n            &lt;NotificationDrawerList\n              isHidden={!thirdGroupExpanded}\n              aria-label=\&quot;Notifications in the third lightweight group\&quot;\n            &gt;\n              &lt;EmptyState\n                headingLevel=\&quot;h2\&quot;\n                titleText=\&quot;No alerts found\&quot;\n                icon={SearchIcon}\n                variant={EmptyStateVariant.full}\n              &gt;\n                &lt;EmptyStateBody&gt;\n                  There are currently no critical alerts firing. There may be firing alerts of other severities or\n                  silenced critical alerts however.\n                &lt;/EmptyStateBody&gt;\n                &lt;EmptyStateFooter&gt;\n                  &lt;EmptyStateActions&gt;\n                    &lt;Button variant=\&quot;link\&quot;&gt;Action&lt;/Button&gt;\n                  &lt;/EmptyStateActions&gt;\n                &lt;/EmptyStateFooter&gt;\n              &lt;/EmptyState&gt;\n            &lt;/NotificationDrawerList&gt;\n          &lt;/NotificationDrawerGroup&gt;\n        &lt;/NotificationDrawerGroupList&gt;\n      &lt;/NotificationDrawerBody&gt;\n    &lt;/NotificationDrawer&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="1d7YaK" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;NotificationDrawer&quot;],[0,&quot;NotificationDrawerBody&quot;],[0,&quot;NotificationDrawerHeader&quot;],[0,&quot;NotificationDrawerGroup&quot;],[0,&quot;NotificationDrawerGroupList&quot;],[0,&quot;NotificationDrawerList&quot;],[0,&quot;NotificationDrawerListItem&quot;],[0,&quot;NotificationDrawerListItemBody&quot;],[0,&quot;NotificationDrawerListItemHeader&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/notification-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-880" 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="1fRnPr" 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-notification-drawer&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;CSSTableComponent&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div></div></div></div> </div></section>   </div></section> </main> </div> </div> <script type="module">try{localStorage.getItem("theme-preference")==="dark"&&document.documentElement.classList.add("pf-v6-theme-dark")}catch(e){console.error("Failed to set initial theme:",e)}</script></body></html>

package/dist/docs/components/number-input/index.html ADDED Viewed

@@ -0,0 +1,72 @@
+<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><script type="module">const n=e=>{requestAnimationFrame(()=>{document.documentElement.classList.toggle("pf-v6-theme-dark",e==="dark")})};document.addEventListener("astro:before-swap",()=>{const e=localStorage.getItem("theme-preference");n(e||"light")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:"smooth"})};document.addEventListener("DOMContentLoaded",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,""," "),setTimeout(()=>{o(e),history.replaceState(null,"",e)},500)}});window.addEventListener("hashchange",()=>{window.location.hash&&o(window.location.hash)});</script><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.9.3"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CtSceO8m.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
+<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css">
+<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
+<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
+<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-xikxfxwm-3"] { view-transition-name: astro-xikxfxwm-3; }@layer astro { ::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back]::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back]::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back][data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back][data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }</style><style>[data-astro-transition-scope="astro-2e6ke2uy-4"] { view-transition-name: astro-2e6ke2uy-4; }@layer astro { ::view-transition-old(astro-2e6ke2uy-4) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-2e6ke2uy-4) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-2e6ke2uy-4) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page">  <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="Z70K3H" prefix="r5" component-url="/_astro/PageToggle.Dnbvoa7R.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;data-astro-transition-persist&quot;:[0,&quot;astro-u5p5alki-2&quot;]}" ssr client="idle" opts="{&quot;name&quot;:&quot;PageToggle&quot;,&quot;value&quot;:true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-394"><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="JoTkv" 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-132"><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-395"><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-396"><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-132"><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/number-input/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-2474" 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-2475" data-pf-content="true" class="pf-v6-c-content--h3">Default</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="pJh05" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { NumberInput } from &#39;@patternfly/react-core&#39;;\n\nexport const NumberInputDefault: React.FunctionComponent = () =&gt; {\n  const [value, setValue] = useState&lt;number | &#39;&#39;&gt;(90);\n\n  const onMinus = () =&gt; {\n    const newValue = (value || 0) - 1;\n    setValue(newValue);\n  };\n\n  const onChange = (event: React.FormEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const value = (event.target as HTMLInputElement).value;\n    setValue(value === &#39;&#39; ? value : +value);\n  };\n\n  const onPlus = () =&gt; {\n    const newValue = (value || 0) + 1;\n    setValue(newValue);\n  };\n\n  return (\n    &lt;NumberInput\n      value={value}\n      onMinus={onMinus}\n      onChange={onChange}\n      onPlus={onPlus}\n      inputName=\&quot;input\&quot;\n      inputAriaLabel=\&quot;number input\&quot;\n      minusBtnAriaLabel=\&quot;minus\&quot;\n      plusBtnAriaLabel=\&quot;plus\&quot;\n    /&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-2476" data-pf-content="true" class="pf-v6-c-content--h3">With unit</h3>
+<astro-island uid="GySR6" 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 { NumberInput } from &#39;@patternfly/react-core&#39;;\n\nexport const NumberInputUnit: React.FunctionComponent = () =&gt; {\n  const [value1, setValue1] = useState&lt;number | &#39;&#39;&gt;(90);\n  const [value2, setValue2] = useState&lt;number | &#39;&#39;&gt;(Number((1.0).toFixed(2)));\n\n  const onMinus1 = () =&gt; setValue1((value1 || 0) - 1);\n  const onChange1 = (event: React.FormEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const value = (event.target as HTMLInputElement).value;\n    setValue1(value === &#39;&#39; ? value : +value);\n  };\n  const onPlus1 = () =&gt; setValue1((value1 || 0) + 1);\n\n  const onMinus2 = () =&gt; {\n    const newValue = Number(((value2 || 0) - 0.01).toFixed(2));\n    setValue2(newValue);\n  };\n  const onChange2 = (event: React.FormEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const value = (event.target as HTMLInputElement).value;\n    setValue2(value === &#39;&#39; ? value : +value);\n  };\n  const onPlus2 = () =&gt; {\n    const newValue = Number(((value2 || 0) + 0.01).toFixed(2));\n    setValue2(newValue);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;NumberInput\n        value={value1}\n        onMinus={onMinus1}\n        onChange={onChange1}\n        onPlus={onPlus1}\n        inputName=\&quot;input 1\&quot;\n        inputAriaLabel=\&quot;number input 1\&quot;\n        minusBtnAriaLabel=\&quot;minus 1\&quot;\n        plusBtnAriaLabel=\&quot;plus 1\&quot;\n        unit=\&quot;%\&quot;\n      /&gt;\n      &lt;br /&gt;\n      &lt;br /&gt;\n      &lt;NumberInput\n        value={value2}\n        onMinus={onMinus2}\n        onChange={onChange2}\n        onPlus={onPlus2}\n        inputName=\&quot;input 2\&quot;\n        inputAriaLabel=\&quot;number input 2\&quot;\n        minusBtnAriaLabel=\&quot;minus 0.01\&quot;\n        plusBtnAriaLabel=\&quot;plus 0.01\&quot;\n        unit=\&quot;$\&quot;\n        unitPosition=\&quot;before\&quot;\n      /&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-2477" data-pf-content="true" class="pf-v6-c-content--h3">With unit and thresholds</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2478" data-pf-content="true" class="pf-v6-c-content--p">To enable a user entered value to snap to the nearest threshold if the entered input is out of bounds, define the blur event handler.</p>
+<astro-island uid="877gh" 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 { NumberInput } from &#39;@patternfly/react-core&#39;;\n\nexport const NumberInputUnitThreshold: React.FunctionComponent = () =&gt; {\n  const [value, setValue] = useState&lt;number | &#39;&#39;&gt;(0);\n  const minValue = 0;\n  const maxValue = 10;\n\n  const normalizeBetween = (value, min, max) =&gt; {\n    if (min !== undefined &amp;&amp; max !== undefined) {\n      return Math.max(Math.min(value, max), min);\n    } else if (value &lt;= min) {\n      return min;\n    } else if (value &gt;= max) {\n      return max;\n    }\n    return value;\n  };\n\n  const onMinus = () =&gt; {\n    const newValue = normalizeBetween((value as number) - 1, minValue, maxValue);\n    setValue(newValue);\n  };\n\n  const onChange = (event: React.FormEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const value = (event.target as HTMLInputElement).value;\n    setValue(value === &#39;&#39; ? value : +value);\n  };\n\n  const onBlur = (event: React.FocusEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const blurVal = +event.target.value;\n\n    if (blurVal &lt; minValue) {\n      setValue(minValue);\n    } else if (blurVal &gt; maxValue) {\n      setValue(maxValue);\n    }\n  };\n\n  const onPlus = () =&gt; {\n    const newValue = normalizeBetween((value as number) + 1, minValue, maxValue);\n    setValue(newValue);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      With a minimum value of 0 and maximum value of 10\n      &lt;br /&gt;\n      &lt;NumberInput\n        value={value}\n        min={minValue}\n        max={maxValue}\n        onMinus={onMinus}\n        onChange={onChange}\n        onBlur={onBlur}\n        onPlus={onPlus}\n        inputName=\&quot;input\&quot;\n        inputAriaLabel=\&quot;number input\&quot;\n        minusBtnAriaLabel=\&quot;minus\&quot;\n        plusBtnAriaLabel=\&quot;plus\&quot;\n        unit=\&quot;%\&quot;\n      /&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-2479" data-pf-content="true" class="pf-v6-c-content--h3">Disabled</h3>
+<astro-island uid="22cS9N" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { NumberInput } from &#39;@patternfly/react-core&#39;;\n\nexport const NumberInputDisabled: React.FunctionComponent = () =&gt; {\n  const [value, setValue] = useState&lt;number | &#39;&#39;&gt;(100);\n  const minValue = 0;\n  const maxValue = 100;\n\n  const onMinus = () =&gt; {\n    const newValue = (value || 0) - 1;\n    setValue(newValue);\n  };\n\n  const onChange = (event: React.FormEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const value = (event.target as HTMLInputElement).value;\n    setValue(value === &#39;&#39; ? value : +value);\n  };\n\n  const onPlus = () =&gt; {\n    const newValue = (value || 0) + 1;\n    setValue(newValue);\n  };\n\n  return (\n    &lt;NumberInput\n      value={value}\n      min={minValue}\n      max={maxValue}\n      onMinus={onMinus}\n      onChange={onChange}\n      onPlus={onPlus}\n      inputName=\&quot;input\&quot;\n      inputAriaLabel=\&quot;number input\&quot;\n      minusBtnAriaLabel=\&quot;minus\&quot;\n      plusBtnAriaLabel=\&quot;plus\&quot;\n      unit=\&quot;%\&quot;\n      isDisabled\n    /&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-2480" data-pf-content="true" class="pf-v6-c-content--h3">With status</h3>
+<astro-island uid="Z1hCyz8" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useReducer, useState } from &#39;react&#39;;\nimport { NumberInput, ValidatedOptions } from &#39;@patternfly/react-core&#39;;\n\nexport const NumberInputWithStatus: React.FunctionComponent = () =&gt; {\n  const max = 10;\n  const min = 0;\n\n  const [validated, setValidated] = useState&lt;ValidatedOptions&gt;(ValidatedOptions.success);\n  const [value, setValue] = useReducer((state, newVal) =&gt; Math.max(min, Math.min(max, Number(newVal))), 5);\n\n  const onPlus = () =&gt; {\n    const newVal = (value || 0) + 1;\n    setValue(newVal);\n    validate(newVal);\n  };\n\n  const onMinus = () =&gt; {\n    const newVal = (value || 0) - 1;\n    setValue(newVal);\n    validate(newVal);\n  };\n\n  const onChange = (event: React.FormEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const value = (event.target as HTMLInputElement).value;\n    setValue(value === &#39;&#39; ? value : +value);\n    validate(value);\n  };\n\n  const validate = (newVal) =&gt; {\n    const diff = Math.abs(5 - newVal);\n    if (diff &gt; 3) {\n      setValidated(ValidatedOptions.error);\n    } else if (diff &gt; 1) {\n      setValidated(ValidatedOptions.warning);\n    } else {\n      setValidated(ValidatedOptions.success);\n    }\n  };\n  return (\n    &lt;&gt;\n      In the following example, the validated status will update based on the value of the number input and how far from\n      the number 5 it is.\n      &lt;br /&gt;\n      &lt;NumberInput\n        validated={validated}\n        value={value}\n        min={0}\n        max={10}\n        onMinus={onMinus}\n        onPlus={onPlus}\n        onChange={onChange}\n        inputName=\&quot;input\&quot;\n        inputAriaLabel=\&quot;number input\&quot;\n        minusBtnAriaLabel=\&quot;minus\&quot;\n        plusBtnAriaLabel=\&quot;plus\&quot;\n      /&gt;\n    &lt;/&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-2481" data-pf-content="true" class="pf-v6-c-content--h3">Varying sizes</h3>
+<astro-island uid="2b1fpM" 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 { NumberInput } from &#39;@patternfly/react-core&#39;;\n\nexport const NumberInputVaryingSizes: React.FunctionComponent = () =&gt; {\n  const [input1Value, setInput1Value] = useState&lt;number | &#39;&#39;&gt;(1);\n  const [input2Value, setInput2Value] = useState&lt;number | &#39;&#39;&gt;(1234567890);\n  const [input3Value, setInput3Value] = useState&lt;number | &#39;&#39;&gt;(5);\n  const [input4Value, setInput4Value] = useState&lt;number | &#39;&#39;&gt;(12345);\n\n  const onChange = (\n    event: React.FormEvent&lt;HTMLInputElement&gt;,\n    updateFunction: React.Dispatch&lt;React.SetStateAction&lt;number | &#39;&#39;&gt;&gt;\n  ) =&gt; {\n    const value = (event.target as HTMLInputElement).value;\n    updateFunction(value === &#39;&#39; ? value : +value);\n  };\n\n  const onMinus = (value: number | &#39;&#39;, updateFunction: React.Dispatch&lt;React.SetStateAction&lt;number | &#39;&#39;&gt;&gt;) =&gt; {\n    updateFunction((value || 0) - 1);\n  };\n\n  const onPlus = (value: number | &#39;&#39;, updateFunction: React.Dispatch&lt;React.SetStateAction&lt;number | &#39;&#39;&gt;&gt;) =&gt; {\n    updateFunction((value || 0) + 1);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;NumberInput\n        value={input1Value}\n        onMinus={() =&gt; onMinus(input1Value, setInput1Value)}\n        onChange={(event) =&gt; onChange(event, setInput1Value)}\n        onPlus={() =&gt; onPlus(input1Value, setInput1Value)}\n        inputName=\&quot;input1\&quot;\n        inputAriaLabel=\&quot;number input 1\&quot;\n        minusBtnAriaLabel=\&quot;input 2 minus\&quot;\n        plusBtnAriaLabel=\&quot;input 2 plus\&quot;\n        widthChars={1}\n      /&gt;\n      &lt;br /&gt;\n      &lt;br /&gt;\n      &lt;NumberInput\n        value={input2Value}\n        onMinus={() =&gt; onMinus(input2Value, setInput2Value)}\n        onChange={(event) =&gt; onChange(event, setInput2Value)}\n        onPlus={() =&gt; onPlus(input2Value, setInput2Value)}\n        inputName=\&quot;input2\&quot;\n        inputAriaLabel=\&quot;number input 2\&quot;\n        minusBtnAriaLabel=\&quot;input 2 minus\&quot;\n        plusBtnAriaLabel=\&quot;input 2 plus\&quot;\n        widthChars={10}\n      /&gt;\n      &lt;br /&gt;\n      &lt;br /&gt;\n      &lt;NumberInput\n        value={input3Value}\n        onMinus={() =&gt; onMinus(input3Value, setInput3Value)}\n        onChange={(event) =&gt; onChange(event, setInput3Value)}\n        onPlus={() =&gt; onPlus(input3Value, setInput3Value)}\n        inputName=\&quot;input3\&quot;\n        inputAriaLabel=\&quot;number input 3\&quot;\n        minusBtnAriaLabel=\&quot;input 3 minus\&quot;\n        plusBtnAriaLabel=\&quot;input 3 plus\&quot;\n        widthChars={5}\n      /&gt;\n      &lt;br /&gt;\n      &lt;br /&gt;\n      &lt;NumberInput\n        value={input4Value}\n        onMinus={() =&gt; onMinus(input4Value, setInput4Value)}\n        onChange={(event) =&gt; onChange(event, setInput4Value)}\n        onPlus={() =&gt; onPlus(input4Value, setInput4Value)}\n        inputName=\&quot;input4\&quot;\n        inputAriaLabel=\&quot;number input 4\&quot;\n        minusBtnAriaLabel=\&quot;input 4 minus\&quot;\n        plusBtnAriaLabel=\&quot;input 4 plus\&quot;\n        widthChars={5}\n      /&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-2482" data-pf-content="true" class="pf-v6-c-content--h3">Custom increment/decrement</h3>
+<astro-island uid="ZMCVXi" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { NumberInput } from &#39;@patternfly/react-core&#39;;\n\nexport const NumberInputCustomStep: React.FunctionComponent = () =&gt; {\n  const [value, setValue] = useState&lt;number | &#39;&#39;&gt;(90);\n  const step = 3;\n\n  const stepper = (stepValue: number) =&gt; {\n    setValue((value || 0) + stepValue);\n  };\n\n  const onChange = (event: React.FormEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const value = (event.target as HTMLInputElement).value;\n    setValue(value === &#39;&#39; ? value : +value);\n  };\n\n  return (\n    &lt;NumberInput\n      value={value}\n      onMinus={() =&gt; stepper(-step)}\n      onChange={onChange}\n      onPlus={() =&gt; stepper(step)}\n      inputName=\&quot;input\&quot;\n      inputAriaLabel=\&quot;number input\&quot;\n      minusBtnAriaLabel=\&quot;minus\&quot;\n      plusBtnAriaLabel=\&quot;plus\&quot;\n    /&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-2483" data-pf-content="true" class="pf-v6-c-content--h3">Custom increment/decrement and thresholds</h3>
+<astro-island uid="dv6fY" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { NumberInput } from &#39;@patternfly/react-core&#39;;\n\nexport const NumberInputCustomStepAndThreshold: React.FunctionComponent = () =&gt; {\n  const [value, setValue] = useState&lt;number | &#39;&#39;&gt;(90);\n  const minValue = 90;\n  const maxValue = 100;\n  const step = 3;\n\n  const normalizeBetween = (value, min, max) =&gt; {\n    if (min !== undefined &amp;&amp; max !== undefined) {\n      return Math.max(Math.min(value, max), min);\n    } else if (value &lt;= min) {\n      return min;\n    } else if (value &gt;= max) {\n      return max;\n    }\n    return value;\n  };\n\n  const stepper = (stepValue: number) =&gt; {\n    setValue((value || 0) + stepValue);\n  };\n\n  const onChange = (event: React.FormEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const value = (event.target as HTMLInputElement).value;\n    setValue(value === &#39;&#39; ? value : +value);\n  };\n\n  const onBlur = (event: React.FormEvent&lt;HTMLInputElement&gt;) =&gt; {\n    const target = event.target as HTMLInputElement;\n    const newValue = normalizeBetween(isNaN(+target.value) ? 0 : Number(target.value), minValue, maxValue);\n    setValue(newValue);\n  };\n\n  return (\n    &lt;NumberInput\n      value={value}\n      min={minValue}\n      max={maxValue}\n      onMinus={() =&gt; stepper(-step)}\n      onChange={onChange}\n      onBlur={onBlur}\n      onPlus={() =&gt; stepper(step)}\n      inputName=\&quot;input\&quot;\n      inputAriaLabel=\&quot;number input\&quot;\n      minusBtnAriaLabel=\&quot;minus\&quot;\n      plusBtnAriaLabel=\&quot;plus\&quot;\n    /&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="Z2hSPXU" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;NumberInput&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/number-input/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-2473" 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="Zj9pJN" 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-number-input&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>