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

@patternfly/patternfly-doc-core 1.12.1 → 1.12.3

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

Files changed (180) hide show

package/dist/docs/components/alert/react/index.html CHANGED Viewed

@@ -1,8 +1,8 @@
 <!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/AutoLinkHeader.Chv_bGyU.css">
 <link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
-<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css"><style>.ws-react-c-alert .pf-v6-c-alert{margin-bottom:21px}
+<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
+<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css"><style>.ws-react-c-alert .pf-v6-c-alert{margin-bottom:21px}
 </style><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) {
@@ -43,11 +43,11 @@
 	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="Z18pYTc" 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-13"><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="NT4yD" 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-5"><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-14"><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-15"><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-5"><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/alert/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"> <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-68" data-pf-content="true" class="pf-v6-c-content--p">Micro animations have been added for <code>&lt;Alert&gt;</code> components within an <code>&lt;AlertGroup&gt;</code>. By default, you must opt into animations, since they can require updates to tests. To enable or disable animations as needed, use the <code>hasAnimations</code> property. With animations enabled, we recommend you ensure that dynamically-added alerts are prepended to a list of alerts, rather than appended to the end of it.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-25" data-pf-content="true" class="pf-v6-c-content--p">Micro animations are turned on for all examples and demos where alerts are dynamically added.</p>
-<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-26" data-pf-content="true" class="pf-v6-c-content--h2">Alert examples</h2>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-27" data-pf-content="true" class="pf-v6-c-content--h3">Alert variants</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-69" data-pf-content="true" class="pf-v6-c-content--p">PatternFly supports several alert variants for different scenarios. Each variant has an associated status icon, background, and alert title coded to communicate the severity of an alert. Use the <code>variant</code> property to apply the following styling options. If no <code>variant</code> is specified, then the variant will be set to “custom”.</p>
+			[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="1hGeDB" prefix="r5" component-url="/_astro/PageToggle.pXRgGXc2.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-10"><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="1sQMN7" 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-4"><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-11"><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-12"><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-4"><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/alert/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"> <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-63" data-pf-content="true" class="pf-v6-c-content--p">Micro animations have been added for <code>&lt;Alert&gt;</code> components within an <code>&lt;AlertGroup&gt;</code>. By default, you must opt into animations, since they can require updates to tests. To enable or disable animations as needed, use the <code>hasAnimations</code> property. With animations enabled, we recommend you ensure that dynamically-added alerts are prepended to a list of alerts, rather than appended to the end of it.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-20" data-pf-content="true" class="pf-v6-c-content--p">Micro animations are turned on for all examples and demos where alerts are dynamically added.</p>
+<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-21" data-pf-content="true" class="pf-v6-c-content--h2">Alert examples</h2>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-22" data-pf-content="true" class="pf-v6-c-content--h3">Alert variants</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-64" data-pf-content="true" class="pf-v6-c-content--p">PatternFly supports several alert variants for different scenarios. Each variant has an associated status icon, background, and alert title coded to communicate the severity of an alert. Use the <code>variant</code> property to apply the following styling options. If no <code>variant</code> is specified, then the variant will be set to “custom”.</p>
@@ -78,7 +78,7 @@
 <table><thead><tr><th>Variant</th><th>Description</th></tr></thead><tbody><tr><td>Custom</td><td>Use for generic messages that should have a custom color set by the associated CSS variable. Should be used when the message has no associated severity.</td></tr><tr><td>Info</td><td>Use for general informational messages</td></tr><tr><td>Success</td><td>Use to indicate that a task or process has been completed successfully</td></tr><tr><td>Warning</td><td>Use to indicate that a non-critical error has occurred</td></tr><tr><td>Danger</td><td>Use to indicate that a critical or blocking error has occurred</td></tr></tbody></table>
-<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-87" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"></span>
+<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-82" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"></span>
 <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#B392F0">Fragment</span><span style="color:#E1E4E8">&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Custom alert title&quot;</span><span style="color:#E1E4E8"> ouiaId</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;CustomAlert&quot;</span><span style="color:#F97583"> /&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;info&quot;</span><span style="color:#E1E4E8"> title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Info alert title&quot;</span><span style="color:#E1E4E8"> ouiaId</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;InfoAlert&quot;</span><span style="color:#F97583"> /&gt;</span></span>
@@ -86,27 +86,27 @@
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;warning&quot;</span><span style="color:#E1E4E8"> title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Warning alert title&quot;</span><span style="color:#E1E4E8"> ouiaId</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;WarningAlert&quot;</span><span style="color:#F97583"> /&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;danger&quot;</span><span style="color:#E1E4E8"> title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Danger alert title&quot;</span><span style="color:#E1E4E8"> ouiaId</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;DangerAlert&quot;</span><span style="color:#F97583"> /&gt;</span></span>
 <span class="line"><span style="color:#F97583">&lt;/</span><span style="color:#E1E4E8">Fragment</span><span style="color:#F97583">&gt;</span><span style="color:#E1E4E8">;</span></span></code></pre>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-28" data-pf-content="true" class="pf-v6-c-content--h3">Alert variations</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-29" data-pf-content="true" class="pf-v6-c-content--p">PatternFly supports several properties and variations that can be used to add extra content to an alert.</p>
-<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-110" data-pf-content="true" class="pf-v6-c-content--ul">
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-107" data-pf-content="true" class="pf-v6-c-content--li">
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-70" data-pf-content="true" class="pf-v6-c-content--p">As demonstrated in the 1st variation below, use the <code>actionLinks</code> property to add one or more <code>&lt;AlertActionLink&gt;</code> components that place links beneath the alert message. You must pass in <code>href</code> and <code>component=&quot;a&quot;</code> properties to have an <code>&lt;AlertActionLink&gt;</code> act as a proper link, rather than as a button.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-23" data-pf-content="true" class="pf-v6-c-content--h3">Alert variations</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-24" data-pf-content="true" class="pf-v6-c-content--p">PatternFly supports several properties and variations that can be used to add extra content to an alert.</p>
+<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-105" data-pf-content="true" class="pf-v6-c-content--ul">
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-102" data-pf-content="true" class="pf-v6-c-content--li">
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-65" data-pf-content="true" class="pf-v6-c-content--p">As demonstrated in the 1st variation below, use the <code>actionLinks</code> property to add one or more <code>&lt;AlertActionLink&gt;</code> components that place links beneath the alert message. You must pass in <code>href</code> and <code>component=&quot;a&quot;</code> properties to have an <code>&lt;AlertActionLink&gt;</code> act as a proper link, rather than as a button.</p>
 </li>
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-105" data-pf-content="true" class="pf-v6-c-content--li">
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-71" data-pf-content="true" class="pf-v6-c-content--p">As demonstrated in the 2nd variation below, use a native HTML <code>&lt;a&gt;</code> element to add links within an alert message.</p>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-100" data-pf-content="true" class="pf-v6-c-content--li">
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-66" data-pf-content="true" class="pf-v6-c-content--p">As demonstrated in the 2nd variation below, use a native HTML <code>&lt;a&gt;</code> element to add links within an alert message.</p>
 </li>
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-106" data-pf-content="true" class="pf-v6-c-content--li">
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-72" data-pf-content="true" class="pf-v6-c-content--p">As demonstrated in the 3rd variation below, use the <code>actionClose</code> property to add an <code>&lt;AlertActionCloseButton&gt;</code> component, which can be used to manage and customize alert dismissals.</p>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-101" data-pf-content="true" class="pf-v6-c-content--li">
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-67" data-pf-content="true" class="pf-v6-c-content--p">As demonstrated in the 3rd variation below, use the <code>actionClose</code> property to add an <code>&lt;AlertActionCloseButton&gt;</code> component, which can be used to manage and customize alert dismissals.</p>
 </li>
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-109" data-pf-content="true" class="pf-v6-c-content--li">
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-73" data-pf-content="true" class="pf-v6-c-content--p">As demonstrated in the 4th and 5th variations below, use the <code>component</code> property to set the element for an alert title.</p>
-<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-108" data-pf-content="true" class="pf-v6-c-content--ul">
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-74" data-pf-content="true" class="pf-v6-c-content--li">If there is not a description passed via <code>children</code> prop, then the <code>component</code> prop should be set to a non-heading element such as a <code>span</code> or <code>div</code>.</li>
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-75" data-pf-content="true" class="pf-v6-c-content--li">If there is a description passed via <code>children</code> prop, then the <code>component</code> prop should be a heading element. Headings should be ordered by their level and heading levels should not be skipped. For example, a heading of an <code>h2</code> level should not be followed directly by an <code>h4</code>.</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-104" data-pf-content="true" class="pf-v6-c-content--li">
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-68" data-pf-content="true" class="pf-v6-c-content--p">As demonstrated in the 4th and 5th variations below, use the <code>component</code> property to set the element for an alert title.</p>
+<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-103" data-pf-content="true" class="pf-v6-c-content--ul">
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-69" data-pf-content="true" class="pf-v6-c-content--li">If there is not a description passed via <code>children</code> prop, then the <code>component</code> prop should be set to a non-heading element such as a <code>span</code> or <code>div</code>.</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-70" data-pf-content="true" class="pf-v6-c-content--li">If there is a description passed via <code>children</code> prop, then the <code>component</code> prop should be a heading element. Headings should be ordered by their level and heading levels should not be skipped. For example, a heading of an <code>h2</code> level should not be followed directly by an <code>h4</code>.</li>
 </ul>
 </li>
 </ul>
-<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-88" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"></span>
+<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-83" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"></span>
 <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#B392F0">Fragment</span><span style="color:#E1E4E8">&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert</span></span>
 <span class="line"><span style="color:#E1E4E8">    variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;success&quot;</span></span>
@@ -145,9 +145,9 @@
 <span class="line"><span style="color:#E1E4E8">    &lt;p&gt;Short alert description.&lt;/p&gt;</span></span>
 <span class="line"><span style="color:#E1E4E8">  &lt;/Alert&gt;</span></span>
 <span class="line"><span style="color:#E1E4E8">&lt;/Fragment&gt;;</span></span></code></pre>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-30" data-pf-content="true" class="pf-v6-c-content--h3">Alert timeout</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-76" data-pf-content="true" class="pf-v6-c-content--p">Use the <code>timeout</code> property to automatically dismiss an alert after a period of time. If set to <code>true</code>, the <code>timeout</code> will be 8000 milliseconds. Provide a specific value to dismiss the alert after a different number of milliseconds.</p>
-<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-89" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"></span>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-25" data-pf-content="true" class="pf-v6-c-content--h3">Alert timeout</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-71" data-pf-content="true" class="pf-v6-c-content--p">Use the <code>timeout</code> property to automatically dismiss an alert after a period of time. If set to <code>true</code>, the <code>timeout</code> will be 8000 milliseconds. Provide a specific value to dismiss the alert after a different number of milliseconds.</p>
+<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-84" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"></span>
 <span class="line"><span style="color:#F97583">const</span><span style="color:#B392F0"> AlertTimeout</span><span style="color:#F97583">:</span><span style="color:#B392F0"> React</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">FunctionComponent</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> () </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> {</span></span>
 <span class="line"><span style="color:#F97583">  const</span><span style="color:#E1E4E8"> [</span><span style="color:#79B8FF">alerts</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">setAlerts</span><span style="color:#E1E4E8">] </span><span style="color:#F97583">=</span><span style="color:#B392F0"> useState</span><span style="color:#E1E4E8">&lt;</span><span style="color:#B392F0">React</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">ReactNode</span><span style="color:#E1E4E8">[]&gt;([]);</span></span>
 <span class="line"><span style="color:#F97583">  const</span><span style="color:#E1E4E8"> [</span><span style="color:#79B8FF">newAlertKey</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">setNewAlertKey</span><span style="color:#E1E4E8">] </span><span style="color:#F97583">=</span><span style="color:#B392F0"> useState</span><span style="color:#E1E4E8">&lt;</span><span style="color:#79B8FF">number</span><span style="color:#E1E4E8">&gt;(</span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">);</span></span>
@@ -192,11 +192,11 @@
 <span class="line"><span style="color:#F97583">    &lt;/</span><span style="color:#E1E4E8">Fragment</span><span style="color:#F97583">&gt;</span></span>
 <span class="line"><span style="color:#E1E4E8">  );</span></span>
 <span class="line"><span style="color:#E1E4E8">};</span></span></code></pre>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-31" data-pf-content="true" class="pf-v6-c-content--h3">Expandable alerts</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-32" data-pf-content="true" class="pf-v6-c-content--p">An alert can contain additional, hidden information that is made visible when users click a caret icon. This information can be expanded and collapsed each time the icon is clicked.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-98" data-pf-content="true" class="pf-v6-c-content--p">It is not recommended to use an expandable alert with a <code>timeout</code> in a <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-33" data-pf-content="true" class="pf-v6-c-content--a">toast alert group</a> because the alert could timeout before users have time to interact with and view the entire alert.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-99" data-pf-content="true" class="pf-v6-c-content--p">See the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-34" data-pf-content="true" class="pf-v6-c-content--a">toast alert considerations</a> section of the alert accessibility documentation to understand the accessibility risks associated with using toast alerts.</p>
-<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-90" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"></span>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-26" data-pf-content="true" class="pf-v6-c-content--h3">Expandable alerts</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-27" data-pf-content="true" class="pf-v6-c-content--p">An alert can contain additional, hidden information that is made visible when users click a caret icon. This information can be expanded and collapsed each time the icon is clicked.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-93" data-pf-content="true" class="pf-v6-c-content--p">It is not recommended to use an expandable alert with a <code>timeout</code> in a <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-28" data-pf-content="true" class="pf-v6-c-content--a">toast alert group</a> because the alert could timeout before users have time to interact with and view the entire alert.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-94" data-pf-content="true" class="pf-v6-c-content--p">See the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-29" data-pf-content="true" class="pf-v6-c-content--a">toast alert considerations</a> section of the alert accessibility documentation to understand the accessibility risks associated with using toast alerts.</p>
+<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-85" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"></span>
 <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#B392F0">Fragment</span><span style="color:#E1E4E8">&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert</span></span>
 <span class="line"><span style="color:#E1E4E8">    isExpandable</span></span>
@@ -228,9 +228,9 @@
 <span class="line"><span style="color:#E1E4E8">    &lt;p&gt;Success alert description. This should tell the user more information about the alert.&lt;/p&gt;</span></span>
 <span class="line"><span style="color:#E1E4E8">  &lt;/Alert&gt;</span></span>
 <span class="line"><span style="color:#E1E4E8">&lt;/Fragment&gt;;</span></span></code></pre>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-35" data-pf-content="true" class="pf-v6-c-content--h3">Truncated alerts</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-77" data-pf-content="true" class="pf-v6-c-content--p">Use the <code>truncateTitle</code> property to shorten a long <code>title</code>. Set <code>truncateTitle</code> equal to a number (passed in as <code>{n}</code>) to reduce the number of lines of text in the alert’s <code>title</code>. Users may hover over or tab to a truncated <code>title</code> to see the full message in a tooltip.</p>
-<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-91" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"></span>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-30" data-pf-content="true" class="pf-v6-c-content--h3">Truncated alerts</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-72" data-pf-content="true" class="pf-v6-c-content--p">Use the <code>truncateTitle</code> property to shorten a long <code>title</code>. Set <code>truncateTitle</code> equal to a number (passed in as <code>{n}</code>) to reduce the number of lines of text in the alert’s <code>title</code>. Users may hover over or tab to a truncated <code>title</code> to see the full message in a tooltip.</p>
+<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-86" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"></span>
 <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#B392F0">Fragment</span><span style="color:#E1E4E8">&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert</span></span>
 <span class="line"><span style="color:#E1E4E8">    variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;info&quot;</span></span>
@@ -254,9 +254,9 @@
 <span class="line"><span style="color:#9ECBFF">  `</span><span style="color:#E1E4E8">}</span></span>
 <span class="line"><span style="color:#F97583">  /&gt;</span></span>
 <span class="line"><span style="color:#F97583">&lt;/</span><span style="color:#E1E4E8">Fragment</span><span style="color:#F97583">&gt;</span><span style="color:#E1E4E8">;</span></span></code></pre>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-36" data-pf-content="true" class="pf-v6-c-content--h3">Custom icons</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-78" data-pf-content="true" class="pf-v6-c-content--p">Use the <code>customIcon</code> property to replace a default alert icon with a custom icon.</p>
-<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-92" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"></span>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-31" data-pf-content="true" class="pf-v6-c-content--h3">Custom icons</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-73" data-pf-content="true" class="pf-v6-c-content--p">Use the <code>customIcon</code> property to replace a default alert icon with a custom icon.</p>
+<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-87" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"></span>
 <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#B392F0">Fragment</span><span style="color:#E1E4E8">&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert customIcon</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{&lt;UsersIcon /&gt;} title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Default alert title&quot;</span><span style="color:#F97583"> /&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert customIcon</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{&lt;BoxIcon /&gt;} variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;info&quot;</span><span style="color:#E1E4E8"> title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Info alert title&quot;</span><span style="color:#F97583"> /&gt;</span></span>
@@ -264,18 +264,18 @@
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert customIcon</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{&lt;ServerIcon /&gt;} variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;warning&quot;</span><span style="color:#E1E4E8"> title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Warning alert title&quot;</span><span style="color:#F97583"> /&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert customIcon</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{&lt;LaptopIcon /&gt;} variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;danger&quot;</span><span style="color:#E1E4E8"> title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Danger alert title&quot;</span><span style="color:#F97583"> /&gt;</span></span>
 <span class="line"><span style="color:#F97583">&lt;/</span><span style="color:#E1E4E8">Fragment</span><span style="color:#F97583">&gt;</span><span style="color:#E1E4E8">;</span></span></code></pre>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-37" data-pf-content="true" class="pf-v6-c-content--h3">Inline alerts variants</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-79" data-pf-content="true" class="pf-v6-c-content--p">Use inline alerts to display an alert inline with content. All alert variants may use the <code>isInline</code> property to position alerts in content-heavy areas, such as within forms, wizards, or drawers.</p>
-<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-93" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#B392F0">Fragment</span><span style="color:#E1E4E8">&gt;</span></span>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-32" data-pf-content="true" class="pf-v6-c-content--h3">Inline alerts variants</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-74" data-pf-content="true" class="pf-v6-c-content--p">Use inline alerts to display an alert inline with content. All alert variants may use the <code>isInline</code> property to position alerts in content-heavy areas, such as within forms, wizards, or drawers.</p>
+<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-88" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#B392F0">Fragment</span><span style="color:#E1E4E8">&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;custom&quot;</span><span style="color:#E1E4E8"> isInline title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Custom inline alert title&quot;</span><span style="color:#F97583"> /&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;info&quot;</span><span style="color:#E1E4E8"> isInline title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Info inline alert title&quot;</span><span style="color:#F97583"> /&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;success&quot;</span><span style="color:#E1E4E8"> isInline title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Success inline alert title&quot;</span><span style="color:#F97583"> /&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;warning&quot;</span><span style="color:#E1E4E8"> isInline title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Warning inline alert title&quot;</span><span style="color:#F97583"> /&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;danger&quot;</span><span style="color:#E1E4E8"> isInline title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Danger inline alert title&quot;</span><span style="color:#F97583"> /&gt;</span></span>
 <span class="line"><span style="color:#F97583">&lt;/</span><span style="color:#E1E4E8">Fragment</span><span style="color:#F97583">&gt;</span><span style="color:#E1E4E8">;</span></span></code></pre>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-38" data-pf-content="true" class="pf-v6-c-content--h3">Inline alert variations</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-80" data-pf-content="true" class="pf-v6-c-content--p">All general alert variations can use the <code>isInline</code> property to apply inline styling.</p>
-<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-94" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#B392F0">Fragment</span><span style="color:#E1E4E8">&gt;</span></span>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-33" data-pf-content="true" class="pf-v6-c-content--h3">Inline alert variations</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-75" data-pf-content="true" class="pf-v6-c-content--p">All general alert variations can use the <code>isInline</code> property to apply inline styling.</p>
+<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-89" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#B392F0">Fragment</span><span style="color:#E1E4E8">&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert</span></span>
 <span class="line"><span style="color:#E1E4E8">    isInline</span></span>
 <span class="line"><span style="color:#E1E4E8">    variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;success&quot;</span></span>
@@ -315,24 +315,24 @@
 <span class="line"><span style="color:#E1E4E8">    &lt;p&gt;Short alert description.&lt;/p&gt;</span></span>
 <span class="line"><span style="color:#E1E4E8">  &lt;/Alert&gt;</span></span>
 <span class="line"><span style="color:#E1E4E8">&lt;/Fragment&gt;;</span></span></code></pre>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-39" data-pf-content="true" class="pf-v6-c-content--h3">Plain inline alert variants</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-81" data-pf-content="true" class="pf-v6-c-content--p">Use the <code>isPlain</code> property to make any inline alert plain. Plain styling removes the colored background but keeps colored text and icons.</p>
-<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-95" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#B392F0">Fragment</span><span style="color:#E1E4E8">&gt;</span></span>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-34" data-pf-content="true" class="pf-v6-c-content--h3">Plain inline alert variants</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-76" data-pf-content="true" class="pf-v6-c-content--p">Use the <code>isPlain</code> property to make any inline alert plain. Plain styling removes the colored background but keeps colored text and icons.</p>
+<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-90" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#B392F0">Fragment</span><span style="color:#E1E4E8">&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;custom&quot;</span><span style="color:#E1E4E8"> isInline isPlain title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Custom inline alert title&quot;</span><span style="color:#F97583"> /&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;info&quot;</span><span style="color:#E1E4E8"> isInline isPlain title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Info inline alert title&quot;</span><span style="color:#F97583"> /&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;success&quot;</span><span style="color:#E1E4E8"> isInline isPlain title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Success inline alert title&quot;</span><span style="color:#F97583"> /&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;warning&quot;</span><span style="color:#E1E4E8"> isInline isPlain title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Warning inline alert title&quot;</span><span style="color:#F97583"> /&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;danger&quot;</span><span style="color:#E1E4E8"> isInline isPlain title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Danger inline alert title&quot;</span><span style="color:#F97583"> /&gt;</span></span>
 <span class="line"><span style="color:#F97583">&lt;/</span><span style="color:#E1E4E8">Fragment</span><span style="color:#F97583">&gt;</span><span style="color:#E1E4E8">;</span></span></code></pre>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-40" data-pf-content="true" class="pf-v6-c-content--h3">Plain inline alert variations</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-82" data-pf-content="true" class="pf-v6-c-content--p">It is not recommended to use a plain inline alert with <code>actionClose</code> nor <code>actionLinks</code> because these alerts are non-dismissible and should persist until the error or action related to the alert is resolved.</p>
-<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-96" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span style="color:#F97583">&lt;</span><span style="color:#E1E4E8">Alert isInline isPlain variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;success&quot;</span><span style="color:#E1E4E8"> title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Success alert title&quot;</span><span style="color:#F97583">&gt;</span></span>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-35" data-pf-content="true" class="pf-v6-c-content--h3">Plain inline alert variations</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-77" data-pf-content="true" class="pf-v6-c-content--p">It is not recommended to use a plain inline alert with <code>actionClose</code> nor <code>actionLinks</code> because these alerts are non-dismissible and should persist until the error or action related to the alert is resolved.</p>
+<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-91" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span style="color:#F97583">&lt;</span><span style="color:#E1E4E8">Alert isInline isPlain variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;success&quot;</span><span style="color:#E1E4E8"> title</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Success alert title&quot;</span><span style="color:#F97583">&gt;</span></span>
 <span class="line"><span style="color:#E1E4E8">  &lt;</span><span style="color:#B392F0">p</span><span style="color:#E1E4E8">&gt;Success alert description. This should tell the user more information about the alert.</span><span style="color:#F97583">&lt;/</span><span style="color:#E1E4E8">p</span><span style="color:#F97583">&gt;</span></span>
 <span class="line"><span style="color:#F97583">&lt;/</span><span style="color:#E1E4E8">Alert</span><span style="color:#F97583">&gt;</span><span style="color:#E1E4E8">;</span></span></code></pre>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-41" data-pf-content="true" class="pf-v6-c-content--h3">Static live region alerts</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-42" data-pf-content="true" class="pf-v6-c-content--p">Live region alerts allow you to expose dynamic content changes in a way that can be announced by assistive technologies.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-83" data-pf-content="true" class="pf-v6-c-content--p">By default, <code>isLiveRegion</code>alerts are static.</p>
-<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-97" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"></span>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-36" data-pf-content="true" class="pf-v6-c-content--h3">Static live region alerts</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-37" data-pf-content="true" class="pf-v6-c-content--p">Live region alerts allow you to expose dynamic content changes in a way that can be announced by assistive technologies.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-78" data-pf-content="true" class="pf-v6-c-content--p">By default, <code>isLiveRegion</code>alerts are static.</p>
+<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-92" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"></span>
 <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#B392F0">Fragment</span><span style="color:#E1E4E8">&gt;</span></span>
 <span class="line"><span style="color:#F97583">  &lt;</span><span style="color:#E1E4E8">Alert</span></span>
 <span class="line"><span style="color:#E1E4E8">    isLiveRegion</span></span>
@@ -356,18 +356,18 @@
 <span class="line"><span style="color:#E1E4E8">    containing element.</span></span>
 <span class="line"><span style="color:#E1E4E8">  &lt;/Alert&gt;</span></span>
 <span class="line"><span style="color:#E1E4E8">&lt;/Fragment&gt;;</span></span></code></pre>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-43" data-pf-content="true" class="pf-v6-c-content--h3">Dynamic live region alerts</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-100" data-pf-content="true" class="pf-v6-c-content--p">Alerts that are asynchronously appended into dynamic <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-44" data-pf-content="true" class="pf-v6-c-content--a">alert groups</a> via the <code>isLiveRegion</code> property will be announced to assistive technology the moment the change happens, following the strategy used for <code>aria-atomic</code>, which defaults to false. This means only changes of type “addition” will be announced.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-38" data-pf-content="true" class="pf-v6-c-content--h3">Dynamic live region alerts</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-95" data-pf-content="true" class="pf-v6-c-content--p">Alerts that are asynchronously appended into dynamic <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-39" data-pf-content="true" class="pf-v6-c-content--a">alert groups</a> via the <code>isLiveRegion</code> property will be announced to assistive technology the moment the change happens, following the strategy used for <code>aria-atomic</code>, which defaults to false. This means only changes of type “addition” will be announced.</p>
-<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="Z2spPag" 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 { Alert, AlertGroup, AlertVariant, InputGroup } from &#39;@patternfly/react-core&#39;;\nimport buttonStyles from &#39;@patternfly/react-styles/css/components/Button/button&#39;;\n\ninterface AlertInfo {\n  title: string;\n  variant: AlertVariant;\n  key: number;\n}\n\nexport const DynamicLiveRegionAlert: React.FunctionComponent = () =&gt; {\n  const [alerts, setAlerts] = useState&lt;AlertInfo[]&gt;([]);\n  const getUniqueId: () =&gt; number = () =&gt; new Date().getTime();\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(&#39; &#39;);\n\n  const addAlert = (alertInfo: AlertInfo) =&gt; {\n    setAlerts((prevAlertInfo) =&gt; [alertInfo, ...prevAlertInfo]);\n  };\n\n  const addSuccessAlert = () =&gt; {\n    addAlert({\n      title: &#39;Single success alert&#39;,\n      variant: AlertVariant.success,\n      key: getUniqueId()\n    });\n  };\n  const addInfoAlert = () =&gt; {\n    addAlert({\n      title: &#39;Single info alert&#39;,\n      variant: AlertVariant.info,\n      key: getUniqueId()\n    });\n  };\n  const addDangerAlert = () =&gt; {\n    addAlert({\n      title: &#39;Single danger alert&#39;,\n      variant: AlertVariant.danger,\n      key: getUniqueId()\n    });\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;InputGroup style={{ marginBottom: &#39;16px&#39; }}&gt;\n        &lt;button onClick={addSuccessAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n          Add single success alert\n        &lt;/button&gt;\n        &lt;button onClick={addInfoAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n          Add single info alert\n        &lt;/button&gt;\n        &lt;button onClick={addDangerAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n          Add single danger alert\n        &lt;/button&gt;\n      &lt;/InputGroup&gt;\n      &lt;AlertGroup hasAnimations isLiveRegion aria-live=\&quot;polite\&quot; aria-relevant=\&quot;additions text\&quot; aria-atomic=\&quot;false\&quot;&gt;\n        {alerts.map(({ title, variant, key }) =&gt; (\n          &lt;Alert variant={variant} title={title} key={key} /&gt;\n        ))}\n      &lt;/AlertGroup&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-45" data-pf-content="true" class="pf-v6-c-content--h3">Asynchronous live region alerts</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-101" data-pf-content="true" class="pf-v6-c-content--p">This example shows how an alert could be triggered by an asynchronous event in the application. Note that you can customize how the alert will be announced to assistive technology. See the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-46" data-pf-content="true" class="pf-v6-c-content--a">alert accessibility</a> for more information.</p>
+<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="Z2spPag" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Alert, AlertGroup, AlertVariant, InputGroup } from &#39;@patternfly/react-core&#39;;\nimport buttonStyles from &#39;@patternfly/react-styles/css/components/Button/button&#39;;\n\ninterface AlertInfo {\n  title: string;\n  variant: AlertVariant;\n  key: number;\n}\n\nexport const DynamicLiveRegionAlert: React.FunctionComponent = () =&gt; {\n  const [alerts, setAlerts] = useState&lt;AlertInfo[]&gt;([]);\n  const getUniqueId: () =&gt; number = () =&gt; new Date().getTime();\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(&#39; &#39;);\n\n  const addAlert = (alertInfo: AlertInfo) =&gt; {\n    setAlerts((prevAlertInfo) =&gt; [alertInfo, ...prevAlertInfo]);\n  };\n\n  const addSuccessAlert = () =&gt; {\n    addAlert({\n      title: &#39;Single success alert&#39;,\n      variant: AlertVariant.success,\n      key: getUniqueId()\n    });\n  };\n  const addInfoAlert = () =&gt; {\n    addAlert({\n      title: &#39;Single info alert&#39;,\n      variant: AlertVariant.info,\n      key: getUniqueId()\n    });\n  };\n  const addDangerAlert = () =&gt; {\n    addAlert({\n      title: &#39;Single danger alert&#39;,\n      variant: AlertVariant.danger,\n      key: getUniqueId()\n    });\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;InputGroup style={{ marginBottom: &#39;16px&#39; }}&gt;\n        &lt;button onClick={addSuccessAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n          Add single success alert\n        &lt;/button&gt;\n        &lt;button onClick={addInfoAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n          Add single info alert\n        &lt;/button&gt;\n        &lt;button onClick={addDangerAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n          Add single danger alert\n        &lt;/button&gt;\n      &lt;/InputGroup&gt;\n      &lt;AlertGroup hasAnimations isLiveRegion aria-live=\&quot;polite\&quot; aria-relevant=\&quot;additions text\&quot; aria-atomic=\&quot;false\&quot;&gt;\n        {alerts.map(({ title, variant, key }) =&gt; (\n          &lt;Alert variant={variant} title={title} key={key} /&gt;\n        ))}\n      &lt;/AlertGroup&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-40" data-pf-content="true" class="pf-v6-c-content--h3">Asynchronous live region alerts</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-96" data-pf-content="true" class="pf-v6-c-content--p">This example shows how an alert could be triggered by an asynchronous event in the application. Note that you can customize how the alert will be announced to assistive technology. See the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-41" data-pf-content="true" class="pf-v6-c-content--a">alert accessibility</a> for more information.</p>
-<astro-island uid="Z1nXG5E" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useEffect, useState } from &#39;react&#39;;\nimport { Alert, AlertGroup, AlertVariant, ToggleGroup, ToggleGroupItem } from &#39;@patternfly/react-core&#39;;\n\ninterface AlertInfo {\n  title: string;\n  variant: AlertVariant;\n  key: number;\n}\n\nexport const AsyncLiveRegionAlert: React.FunctionComponent = () =&gt; {\n  const [alerts, setAlerts] = useState&lt;AlertInfo[]&gt;([]);\n  const [isActive, setIsActive] = useState(false);\n  const getUniqueId: () =&gt; number = () =&gt; new Date().getTime();\n\n  const addAlert = (alertInfo: AlertInfo) =&gt; {\n    setAlerts((prevAlertInfo) =&gt; [alertInfo, ...prevAlertInfo]);\n  };\n\n  useEffect(() =&gt; {\n    let timer = null;\n    if (isActive) {\n      timer = setInterval(() =&gt; {\n        addAlert({\n          title: `Async alert number ${alerts.length + 1}`,\n          variant: AlertVariant.info,\n          key: getUniqueId()\n        });\n      }, 4500);\n    } else {\n      clearInterval(timer);\n    }\n\n    return () =&gt; {\n      clearInterval(timer);\n    };\n  }, [isActive, alerts]);\n\n  return (\n    &lt;Fragment&gt;\n      &lt;ToggleGroup aria-label=\&quot;Toggle asynchronous alerts\&quot;&gt;\n        &lt;ToggleGroupItem\n          text=\&quot;Async alerts on\&quot;\n          buttonId=\&quot;async-alerts-on\&quot;\n          isSelected={isActive}\n          onChange={() =&gt; setIsActive(true)}\n        /&gt;\n        &lt;ToggleGroupItem\n          text=\&quot;Async alerts off\&quot;\n          buttonId=\&quot;async-alerts-off\&quot;\n          isSelected={!isActive}\n          onChange={() =&gt; setIsActive(false)}\n        /&gt;\n      &lt;/ToggleGroup&gt;\n      &lt;AlertGroup hasAnimations isLiveRegion&gt;\n        {alerts.map(({ title, variant, key }) =&gt; (\n          &lt;Alert variant={variant} title={title} key={key} /&gt;\n        ))}\n      &lt;/AlertGroup&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>
-<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-47" data-pf-content="true" class="pf-v6-c-content--h2">Alert group examples</h2>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-48" data-pf-content="true" class="pf-v6-c-content--p">An alert group stacks and positions 2 or more alerts in a live region, either in a layer over the main content of a page or inline with the page content. Alert groups should always rank alerts by age, stacking new alerts on top of old ones as they surface.</p>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-49" data-pf-content="true" class="pf-v6-c-content--h3">Alert group variants</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-50" data-pf-content="true" class="pf-v6-c-content--p">Alert groups can be one of the following variants:</p>
+<astro-island uid="Z1nXG5E" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useEffect, useState } from &#39;react&#39;;\nimport { Alert, AlertGroup, AlertVariant, ToggleGroup, ToggleGroupItem } from &#39;@patternfly/react-core&#39;;\n\ninterface AlertInfo {\n  title: string;\n  variant: AlertVariant;\n  key: number;\n}\n\nexport const AsyncLiveRegionAlert: React.FunctionComponent = () =&gt; {\n  const [alerts, setAlerts] = useState&lt;AlertInfo[]&gt;([]);\n  const [isActive, setIsActive] = useState(false);\n  const getUniqueId: () =&gt; number = () =&gt; new Date().getTime();\n\n  const addAlert = (alertInfo: AlertInfo) =&gt; {\n    setAlerts((prevAlertInfo) =&gt; [alertInfo, ...prevAlertInfo]);\n  };\n\n  useEffect(() =&gt; {\n    let timer = null;\n    if (isActive) {\n      timer = setInterval(() =&gt; {\n        addAlert({\n          title: `Async alert number ${alerts.length + 1}`,\n          variant: AlertVariant.info,\n          key: getUniqueId()\n        });\n      }, 4500);\n    } else {\n      clearInterval(timer);\n    }\n\n    return () =&gt; {\n      clearInterval(timer);\n    };\n  }, [isActive, alerts]);\n\n  return (\n    &lt;Fragment&gt;\n      &lt;ToggleGroup aria-label=\&quot;Toggle asynchronous alerts\&quot;&gt;\n        &lt;ToggleGroupItem\n          text=\&quot;Async alerts on\&quot;\n          buttonId=\&quot;async-alerts-on\&quot;\n          isSelected={isActive}\n          onChange={() =&gt; setIsActive(true)}\n        /&gt;\n        &lt;ToggleGroupItem\n          text=\&quot;Async alerts off\&quot;\n          buttonId=\&quot;async-alerts-off\&quot;\n          isSelected={!isActive}\n          onChange={() =&gt; setIsActive(false)}\n        /&gt;\n      &lt;/ToggleGroup&gt;\n      &lt;AlertGroup hasAnimations isLiveRegion&gt;\n        {alerts.map(({ title, variant, key }) =&gt; (\n          &lt;Alert variant={variant} title={title} key={key} /&gt;\n        ))}\n      &lt;/AlertGroup&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>
+<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-42" data-pf-content="true" class="pf-v6-c-content--h2">Alert group examples</h2>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-43" data-pf-content="true" class="pf-v6-c-content--p">An alert group stacks and positions 2 or more alerts in a live region, either in a layer over the main content of a page or inline with the page content. Alert groups should always rank alerts by age, stacking new alerts on top of old ones as they surface.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-44" data-pf-content="true" class="pf-v6-c-content--h3">Alert group variants</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-45" data-pf-content="true" class="pf-v6-c-content--p">Alert groups can be one of the following variants:</p>
@@ -390,39 +390,39 @@
 <table><thead><tr><th>Variant</th><th>Description</th></tr></thead><tbody><tr><td>Static inline</td><td>Static inline alert groups contain alerts that appear when the page loads, and are seen within the normal page content flow. These groups should not contain alerts that will dynamically appear or update.</td></tr><tr><td>Toast</td><td>Toast alert groups contain alerts that typically appear in response to an asynchronous event or user action. These groups are positioned on top of other content at the top right of the page.</td></tr><tr><td>Dynamic</td><td>Dynamic alert groups contain alerts that typically appear in response to a user action, and are seen within the normal page content flow.</td></tr></tbody></table>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-102" data-pf-content="true" class="pf-v6-c-content--p">Dynamic alerts that are generated after the page initially loads must be appended to either a toast or dynamic <code>AlertGroup</code>, both of which must use the <code>isLiveRegion</code> property. New alerts appended to a toast or dynamic group will be announced by assistive technologies the moment the change happens. For information about customizing this announcement, read the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-51" data-pf-content="true" class="pf-v6-c-content--a">aria-atomic and aria-relevant</a> section of the alert accessibility documentation.</p>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-52" data-pf-content="true" class="pf-v6-c-content--h3">Static inline alert group</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-103" data-pf-content="true" class="pf-v6-c-content--p">All alert group variants may combine multiple <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-53" data-pf-content="true" class="pf-v6-c-content--a">alert variants</a> For example, the following static inline alert group includes one “success” alert and one “info” alert.</p>
-<astro-island uid="Zxlmrh" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment } from &#39;react&#39;;\nimport { Alert, AlertGroup } from &#39;@patternfly/react-core&#39;;\n\nexport const AlertGroupStatic: React.FunctionComponent = () =&gt; (\n  &lt;Fragment&gt;\n    &lt;AlertGroup&gt;\n      &lt;Alert title=\&quot;Success alert\&quot; variant=\&quot;success\&quot; isInline /&gt;\n      &lt;Alert title=\&quot;Info alert\&quot; variant=\&quot;info\&quot; isInline /&gt;\n    &lt;/AlertGroup&gt;\n  &lt;/Fragment&gt;\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-54" data-pf-content="true" class="pf-v6-c-content--h3">Toast alert group</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-84" data-pf-content="true" class="pf-v6-c-content--p">Toast alert groups are created by passing in the <code>isToast</code> and <code>isLiveRegion</code> properties.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-55" data-pf-content="true" class="pf-v6-c-content--p">Click the buttons in the example below to add alerts to a toast group.</p>
-<astro-island uid="Z26yI4P" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Alert,\n  AlertProps,\n  AlertGroup,\n  AlertActionCloseButton,\n  AlertVariant,\n  InputGroup,\n  InputGroupItem\n} from &#39;@patternfly/react-core&#39;;\nimport buttonStyles from &#39;@patternfly/react-styles/css/components/Button/button&#39;;\n\nexport const AlertGroupToast: React.FunctionComponent = () =&gt; {\n  const [alerts, setAlerts] = useState&lt;Partial&lt;AlertProps&gt;[]&gt;([]);\n\n  const addAlert = (title: string, variant: AlertProps[&#39;variant&#39;], key: React.Key) =&gt; {\n    setAlerts((prevAlerts) =&gt; [{ title, variant, key }, ...prevAlerts]);\n  };\n\n  const removeAlert = (key: React.Key) =&gt; {\n    setAlerts((prevAlerts) =&gt; [...prevAlerts.filter((alert) =&gt; alert.key !== key)]);\n  };\n\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(&#39; &#39;);\n\n  const getUniqueId = () =&gt; new Date().getTime();\n\n  const addSuccessAlert = () =&gt; {\n    addAlert(&#39;Toast success alert&#39;, &#39;success&#39;, getUniqueId());\n  };\n\n  const addDangerAlert = () =&gt; {\n    addAlert(&#39;Toast danger alert&#39;, &#39;danger&#39;, getUniqueId());\n  };\n\n  const addInfoAlert = () =&gt; {\n    addAlert(&#39;Toast info alert&#39;, &#39;info&#39;, getUniqueId());\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;InputGroup style={{ marginBottom: &#39;16px&#39; }}&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addSuccessAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add toast success alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addDangerAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add toast danger alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addInfoAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add toast info alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n      &lt;/InputGroup&gt;\n      &lt;AlertGroup hasAnimations isToast isLiveRegion&gt;\n        {alerts.map(({ key, variant, title }) =&gt; (\n          &lt;Alert\n            variant={AlertVariant[variant]}\n            title={title}\n            actionClose={\n              &lt;AlertActionCloseButton\n                title={title as string}\n                variantLabel={`${variant} alert`}\n                onClose={() =&gt; removeAlert(key)}\n              /&gt;\n            }\n            key={key}\n          /&gt;\n        ))}\n      &lt;/AlertGroup&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-56" data-pf-content="true" class="pf-v6-c-content--h3">Toast alert group with overflow capture</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-57" data-pf-content="true" class="pf-v6-c-content--p">Users will see an overflow message once a predefined number of alerts are displayed. They will not see any alerts beyond the display limit, which must be explicitly set.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-58" data-pf-content="true" class="pf-v6-c-content--p">In the following example, an overflow message will appear when more than 4 alerts would be shown. When a 5th alert would appear, an overflow message is shown instead.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-85" data-pf-content="true" class="pf-v6-c-content--p">When an overflow message appears in an <code>AlertGroup</code> using the <code>isLiveRegion</code> property, the “view 1 more alert” text label will be announced, but the alert message will not.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-59" data-pf-content="true" class="pf-v6-c-content--p">Users navigating via keyboard or another assistive technology will need a way to navigate to and reveal hidden alerts before they disappear. Alternatively, there should be a place where notifications or alerts are collected to be viewed or read later.</p>
-<astro-island uid="Z1hVmGt" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Alert,\n  AlertProps,\n  AlertGroup,\n  AlertActionCloseButton,\n  AlertVariant,\n  InputGroup,\n  InputGroupItem\n} from &#39;@patternfly/react-core&#39;;\nimport buttonStyles from &#39;@patternfly/react-styles/css/components/Button/button&#39;;\n\nexport const AlertGroupToastOverflowCapture: React.FunctionComponent = () =&gt; {\n  const [alerts, setAlerts] = useState&lt;Partial&lt;AlertProps&gt;[]&gt;([]);\n  const [overflowMessage, setOverflowMessage] = useState&lt;string&gt;(&#39;&#39;);\n\n  const maxDisplayed = 4;\n\n  const getOverflowMessage = (alertsNumber: number) =&gt; {\n    const overflow = alertsNumber - maxDisplayed;\n    if (overflow &gt; 0) {\n      return `View ${overflow} more alerts`;\n    }\n    return &#39;&#39;;\n  };\n\n  const addAlert = (title: string, variant: AlertProps[&#39;variant&#39;], key: React.Key) =&gt; {\n    setAlerts((prevAlerts) =&gt; [{ title, variant, key }, ...prevAlerts]);\n    setOverflowMessage(getOverflowMessage(alerts.length + 1));\n  };\n\n  const removeAlert = (key: React.Key) =&gt; {\n    const newAlerts = alerts.filter((alert) =&gt; alert.key !== key);\n    setAlerts(newAlerts);\n    setOverflowMessage(getOverflowMessage(newAlerts.length));\n  };\n\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(&#39; &#39;);\n\n  const getUniqueId = () =&gt; new Date().getTime();\n\n  const addSuccessAlert = () =&gt; {\n    addAlert(&#39;Toast success alert&#39;, &#39;success&#39;, getUniqueId());\n  };\n\n  const addDangerAlert = () =&gt; {\n    addAlert(&#39;Toast danger alert&#39;, &#39;danger&#39;, getUniqueId());\n  };\n\n  const addInfoAlert = () =&gt; {\n    addAlert(&#39;Toast info alert&#39;, &#39;info&#39;, getUniqueId());\n  };\n\n  const onOverflowClick = () =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;Overflow message clicked&#39;);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;InputGroup style={{ marginBottom: &#39;16px&#39; }}&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addSuccessAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add toast success alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addDangerAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add toast danger alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addInfoAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add toast info alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n      &lt;/InputGroup&gt;\n      &lt;AlertGroup\n        hasAnimations\n        isToast\n        isLiveRegion\n        onOverflowClick={onOverflowClick}\n        overflowMessage={overflowMessage}\n      &gt;\n        {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) =&gt; (\n          &lt;Alert\n            variant={AlertVariant[variant]}\n            title={title}\n            actionClose={\n              &lt;AlertActionCloseButton\n                title={title as string}\n                variantLabel={`${variant} alert`}\n                onClose={() =&gt; removeAlert(key)}\n              /&gt;\n            }\n            key={key}\n          /&gt;\n        ))}\n      &lt;/AlertGroup&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-60" data-pf-content="true" class="pf-v6-c-content--h3">Asynchronous alert groups</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-86" data-pf-content="true" class="pf-v6-c-content--p">The following example shows how alerts can be triggered by an asynchronous event in the application. You can customize how an alert will be announced to assistive technology by adjusting the value of the <code>aria-live</code> property. Click the “start async” alert button below and then click the buttons in the above toast examples to demonstrate how asynchronous events add alerts to a group. Click the “stop async alerts” button to halt this behavior.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-104" data-pf-content="true" class="pf-v6-c-content--p">See the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-61" data-pf-content="true" class="pf-v6-c-content--a">alert accessibility tab</a> for more information on customizing this behavior.</p>
-<astro-island uid="Z1joS3z" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Alert,\n  AlertProps,\n  AlertGroup,\n  AlertActionCloseButton,\n  AlertVariant,\n  InputGroup,\n  InputGroupItem,\n  useInterval\n} from &#39;@patternfly/react-core&#39;;\nimport buttonStyles from &#39;@patternfly/react-styles/css/components/Button/button&#39;;\n\nexport const AlertGroupAsync: React.FunctionComponent = () =&gt; {\n  const [alerts, setAlerts] = useState&lt;Partial&lt;AlertProps&gt;[]&gt;([]);\n  const [isRunning, setIsRunning] = useState(false);\n\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(&#39; &#39;);\n\n  const getUniqueId = () =&gt; new Date().getTime();\n\n  const addAlert = () =&gt; {\n    setAlerts((prevAlerts) =&gt; [\n      {\n        title: `Async notification ${prevAlerts.length + 1} was added to the queue.`,\n        variant: &#39;danger&#39;,\n        key: getUniqueId()\n      },\n      ...prevAlerts\n    ]);\n  };\n\n  const removeAlert = (key: React.Key) =&gt; {\n    setAlerts((prevAlerts) =&gt; [...prevAlerts.filter((alert) =&gt; alert.key !== key)]);\n  };\n\n  const startAsyncAlerts = () =&gt; {\n    setIsRunning(true);\n  };\n\n  const stopAsyncAlerts = () =&gt; {\n    setIsRunning(false);\n  };\n\n  useInterval(addAlert, isRunning ? 4500 : null);\n\n  return (\n    &lt;Fragment&gt;\n      &lt;InputGroup style={{ marginBottom: &#39;16px&#39; }}&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={startAsyncAlerts} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Start async alerts\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={stopAsyncAlerts} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Stop async alerts\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n      &lt;/InputGroup&gt;\n      &lt;AlertGroup hasAnimations isToast isLiveRegion aria-live=\&quot;assertive\&quot;&gt;\n        {alerts.map(({ title, variant, key }) =&gt; (\n          &lt;Alert\n            variant={AlertVariant[variant]}\n            title={title}\n            key={key}\n            actionClose={\n              &lt;AlertActionCloseButton\n                title={title as string}\n                variantLabel={`${variant} alert`}\n                onClose={() =&gt; removeAlert(key)}\n              /&gt;\n            }\n          /&gt;\n        ))}\n      &lt;/AlertGroup&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-62" data-pf-content="true" class="pf-v6-c-content--h3">Dynamic alert groups</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-63" data-pf-content="true" class="pf-v6-c-content--p">Click the buttons in the example below to add dynamic alerts to a group.</p>
-<astro-island uid="Zu8Dml" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Alert,\n  AlertProps,\n  AlertGroup,\n  AlertActionCloseButton,\n  AlertVariant,\n  InputGroup,\n  InputGroupItem\n} from &#39;@patternfly/react-core&#39;;\nimport buttonStyles from &#39;@patternfly/react-styles/css/components/Button/button&#39;;\n\nexport const AlertGroupSingularDynamic: React.FunctionComponent = () =&gt; {\n  const [alerts, setAlerts] = useState&lt;Partial&lt;AlertProps&gt;[]&gt;([]);\n\n  const addAlert = (title: string, variant: AlertProps[&#39;variant&#39;], key: React.Key) =&gt; {\n    setAlerts((prevAlerts) =&gt; [{ title, variant, key }, ...prevAlerts]);\n  };\n\n  const removeAlert = (key: React.Key) =&gt; {\n    setAlerts((prevAlerts) =&gt; [...prevAlerts.filter((alert) =&gt; alert.key !== key)]);\n  };\n\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(&#39; &#39;);\n\n  const getUniqueId = () =&gt; new Date().getTime();\n\n  const addSuccessAlert = () =&gt; {\n    addAlert(&#39;Success alert&#39;, &#39;success&#39;, getUniqueId());\n  };\n\n  const addDangerAlert = () =&gt; {\n    addAlert(&#39;Danger alert&#39;, &#39;danger&#39;, getUniqueId());\n  };\n\n  const addInfoAlert = () =&gt; {\n    addAlert(&#39;Info alert&#39;, &#39;info&#39;, getUniqueId());\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;InputGroup style={{ marginBottom: &#39;16px&#39; }}&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addSuccessAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add single success alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addDangerAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add single danger alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addInfoAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add single info alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n      &lt;/InputGroup&gt;\n      &lt;AlertGroup hasAnimations isLiveRegion&gt;\n        {alerts.map(({ title, variant, key }) =&gt; (\n          &lt;Alert\n            isInline\n            variant={AlertVariant[variant]}\n            title={title}\n            key={key}\n            actionClose={\n              &lt;AlertActionCloseButton\n                title={title as string}\n                variantLabel={`${variant} alert`}\n                onClose={() =&gt; removeAlert(key)}\n              /&gt;\n            }\n          /&gt;\n        ))}\n      &lt;/AlertGroup&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-64" data-pf-content="true" class="pf-v6-c-content--h3">Dynamic alert group with overflow message</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-65" data-pf-content="true" class="pf-v6-c-content--p">In the following example, there can be a maximum of 4 alerts shown at once.</p>
-<astro-island uid="7KzW7" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Alert,\n  AlertProps,\n  AlertGroup,\n  AlertActionCloseButton,\n  AlertVariant,\n  InputGroup,\n  InputGroupItem\n} from &#39;@patternfly/react-core&#39;;\nimport buttonStyles from &#39;@patternfly/react-styles/css/components/Button/button&#39;;\n\nexport const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () =&gt; {\n  const [alerts, setAlerts] = useState&lt;Partial&lt;AlertProps&gt;[]&gt;([]);\n  const [overflowMessage, setOverflowMessage] = useState&lt;string&gt;(&#39;&#39;);\n\n  const maxDisplayed = 4;\n\n  const getOverflowMessage = (alertsNumber: number) =&gt; {\n    const overflow = alertsNumber - maxDisplayed;\n    if (overflow &gt; 0) {\n      return `View ${overflow} more alerts`;\n    }\n    return &#39;&#39;;\n  };\n\n  const addAlert = (title: string, variant: AlertProps[&#39;variant&#39;], key: React.Key) =&gt; {\n    setAlerts((prevAlerts) =&gt; [{ title, variant, key }, ...prevAlerts]);\n    setOverflowMessage(getOverflowMessage(alerts.length + 1));\n  };\n\n  const removeAlert = (key: React.Key) =&gt; {\n    const newAlerts = alerts.filter((alert) =&gt; alert.key !== key);\n    setAlerts(newAlerts);\n    setOverflowMessage(getOverflowMessage(newAlerts.length));\n  };\n\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(&#39; &#39;);\n\n  const getUniqueId = () =&gt; new Date().getTime();\n\n  const addSuccessAlert = () =&gt; {\n    addAlert(&#39;Success alert&#39;, &#39;success&#39;, getUniqueId());\n  };\n\n  const addDangerAlert = () =&gt; {\n    addAlert(&#39;Danger alert&#39;, &#39;danger&#39;, getUniqueId());\n  };\n\n  const addInfoAlert = () =&gt; {\n    addAlert(&#39;Info alert&#39;, &#39;info&#39;, getUniqueId());\n  };\n\n  const onOverflowClick = () =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;Overflow message clicked&#39;);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;InputGroup style={{ marginBottom: &#39;16px&#39; }}&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addSuccessAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add single success alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addDangerAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add single danger alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addInfoAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add single info alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n      &lt;/InputGroup&gt;\n      &lt;AlertGroup hasAnimations isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={overflowMessage}&gt;\n        {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) =&gt; (\n          &lt;Alert\n            isInline\n            variant={AlertVariant[variant]}\n            title={title}\n            actionClose={\n              &lt;AlertActionCloseButton\n                title={title as string}\n                variantLabel={`${variant} alert`}\n                onClose={() =&gt; removeAlert(key)}\n              /&gt;\n            }\n            key={key}\n          /&gt;\n        ))}\n      &lt;/AlertGroup&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-66" data-pf-content="true" class="pf-v6-c-content--h3">Multiple dynamic alert groups</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-67" data-pf-content="true" class="pf-v6-c-content--p">You may add multiple alerts to an alert group at once. Click the “add alert collection” button in the example below to add a batch of 3 toast alerts to a group.</p>
-<astro-island uid="Z13LFpu" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Alert,\n  AlertProps,\n  AlertGroup,\n  AlertActionCloseButton,\n  AlertVariant,\n  InputGroup,\n  InputGroupItem\n} from &#39;@patternfly/react-core&#39;;\nimport buttonStyles from &#39;@patternfly/react-styles/css/components/Button/button&#39;;\n\nexport const AlertGroupMultipleDynamic: React.FunctionComponent = () =&gt; {\n  const [alerts, setAlerts] = useState&lt;Partial&lt;AlertProps&gt;[]&gt;([]);\n\n  const addAlerts = (incomingAlerts: Partial&lt;AlertProps&gt;[]) =&gt; {\n    setAlerts((prevAlerts) =&gt; [...incomingAlerts, ...prevAlerts]);\n  };\n\n  const removeAlert = (key: React.Key) =&gt; {\n    setAlerts((prevAlerts) =&gt; [...prevAlerts.filter((alert) =&gt; alert.key !== key)]);\n  };\n\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(&#39; &#39;);\n\n  const getUniqueId = () =&gt; String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now();\n\n  const addAlertCollection = () =&gt; {\n    addAlerts([\n      { title: &#39;First alert notification.&#39;, variant: &#39;success&#39;, key: getUniqueId() },\n      { title: &#39;Second alert notification.&#39;, variant: &#39;warning&#39;, key: getUniqueId() },\n      { title: &#39;Third alert notification.&#39;, variant: &#39;danger&#39;, key: getUniqueId() }\n    ]);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;InputGroup style={{ marginBottom: &#39;16px&#39; }}&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addAlertCollection} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add alert collection\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n      &lt;/InputGroup&gt;\n      &lt;AlertGroup hasAnimations isToast isLiveRegion&gt;\n        {alerts.map(({ title, variant, key }) =&gt; (\n          &lt;Alert\n            variant={AlertVariant[variant]}\n            title={title}\n            key={key}\n            actionClose={\n              &lt;AlertActionCloseButton\n                title={title as string}\n                variantLabel={`${variant} alert`}\n                onClose={() =&gt; removeAlert(key)}\n              /&gt;\n            }\n          /&gt;\n        ))}\n      &lt;/AlertGroup&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="2kit83" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;Alert&quot;],[0,&quot;AlertGroup&quot;],[0,&quot;AlertActionCloseButton&quot;],[0,&quot;AlertActionLink&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/alert/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-24" 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>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-97" data-pf-content="true" class="pf-v6-c-content--p">Dynamic alerts that are generated after the page initially loads must be appended to either a toast or dynamic <code>AlertGroup</code>, both of which must use the <code>isLiveRegion</code> property. New alerts appended to a toast or dynamic group will be announced by assistive technologies the moment the change happens. For information about customizing this announcement, read the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-46" data-pf-content="true" class="pf-v6-c-content--a">aria-atomic and aria-relevant</a> section of the alert accessibility documentation.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-47" data-pf-content="true" class="pf-v6-c-content--h3">Static inline alert group</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-98" data-pf-content="true" class="pf-v6-c-content--p">All alert group variants may combine multiple <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-48" data-pf-content="true" class="pf-v6-c-content--a">alert variants</a> For example, the following static inline alert group includes one “success” alert and one “info” alert.</p>
+<astro-island uid="Zxlmrh" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment } from &#39;react&#39;;\nimport { Alert, AlertGroup } from &#39;@patternfly/react-core&#39;;\n\nexport const AlertGroupStatic: React.FunctionComponent = () =&gt; (\n  &lt;Fragment&gt;\n    &lt;AlertGroup&gt;\n      &lt;Alert title=\&quot;Success alert\&quot; variant=\&quot;success\&quot; isInline /&gt;\n      &lt;Alert title=\&quot;Info alert\&quot; variant=\&quot;info\&quot; isInline /&gt;\n    &lt;/AlertGroup&gt;\n  &lt;/Fragment&gt;\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-49" data-pf-content="true" class="pf-v6-c-content--h3">Toast alert group</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-79" data-pf-content="true" class="pf-v6-c-content--p">Toast alert groups are created by passing in the <code>isToast</code> and <code>isLiveRegion</code> properties.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-50" data-pf-content="true" class="pf-v6-c-content--p">Click the buttons in the example below to add alerts to a toast group.</p>
+<astro-island uid="Z26yI4P" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Alert,\n  AlertProps,\n  AlertGroup,\n  AlertActionCloseButton,\n  AlertVariant,\n  InputGroup,\n  InputGroupItem\n} from &#39;@patternfly/react-core&#39;;\nimport buttonStyles from &#39;@patternfly/react-styles/css/components/Button/button&#39;;\n\nexport const AlertGroupToast: React.FunctionComponent = () =&gt; {\n  const [alerts, setAlerts] = useState&lt;Partial&lt;AlertProps&gt;[]&gt;([]);\n\n  const addAlert = (title: string, variant: AlertProps[&#39;variant&#39;], key: React.Key) =&gt; {\n    setAlerts((prevAlerts) =&gt; [{ title, variant, key }, ...prevAlerts]);\n  };\n\n  const removeAlert = (key: React.Key) =&gt; {\n    setAlerts((prevAlerts) =&gt; [...prevAlerts.filter((alert) =&gt; alert.key !== key)]);\n  };\n\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(&#39; &#39;);\n\n  const getUniqueId = () =&gt; new Date().getTime();\n\n  const addSuccessAlert = () =&gt; {\n    addAlert(&#39;Toast success alert&#39;, &#39;success&#39;, getUniqueId());\n  };\n\n  const addDangerAlert = () =&gt; {\n    addAlert(&#39;Toast danger alert&#39;, &#39;danger&#39;, getUniqueId());\n  };\n\n  const addInfoAlert = () =&gt; {\n    addAlert(&#39;Toast info alert&#39;, &#39;info&#39;, getUniqueId());\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;InputGroup style={{ marginBottom: &#39;16px&#39; }}&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addSuccessAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add toast success alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addDangerAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add toast danger alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addInfoAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add toast info alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n      &lt;/InputGroup&gt;\n      &lt;AlertGroup hasAnimations isToast isLiveRegion&gt;\n        {alerts.map(({ key, variant, title }) =&gt; (\n          &lt;Alert\n            variant={AlertVariant[variant]}\n            title={title}\n            actionClose={\n              &lt;AlertActionCloseButton\n                title={title as string}\n                variantLabel={`${variant} alert`}\n                onClose={() =&gt; removeAlert(key)}\n              /&gt;\n            }\n            key={key}\n          /&gt;\n        ))}\n      &lt;/AlertGroup&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-51" data-pf-content="true" class="pf-v6-c-content--h3">Toast alert group with overflow capture</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-52" data-pf-content="true" class="pf-v6-c-content--p">Users will see an overflow message once a predefined number of alerts are displayed. They will not see any alerts beyond the display limit, which must be explicitly set.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-53" data-pf-content="true" class="pf-v6-c-content--p">In the following example, an overflow message will appear when more than 4 alerts would be shown. When a 5th alert would appear, an overflow message is shown instead.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-80" data-pf-content="true" class="pf-v6-c-content--p">When an overflow message appears in an <code>AlertGroup</code> using the <code>isLiveRegion</code> property, the “view 1 more alert” text label will be announced, but the alert message will not.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-54" data-pf-content="true" class="pf-v6-c-content--p">Users navigating via keyboard or another assistive technology will need a way to navigate to and reveal hidden alerts before they disappear. Alternatively, there should be a place where notifications or alerts are collected to be viewed or read later.</p>
+<astro-island uid="Z1hVmGt" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Alert,\n  AlertProps,\n  AlertGroup,\n  AlertActionCloseButton,\n  AlertVariant,\n  InputGroup,\n  InputGroupItem\n} from &#39;@patternfly/react-core&#39;;\nimport buttonStyles from &#39;@patternfly/react-styles/css/components/Button/button&#39;;\n\nexport const AlertGroupToastOverflowCapture: React.FunctionComponent = () =&gt; {\n  const [alerts, setAlerts] = useState&lt;Partial&lt;AlertProps&gt;[]&gt;([]);\n  const [overflowMessage, setOverflowMessage] = useState&lt;string&gt;(&#39;&#39;);\n\n  const maxDisplayed = 4;\n\n  const getOverflowMessage = (alertsNumber: number) =&gt; {\n    const overflow = alertsNumber - maxDisplayed;\n    if (overflow &gt; 0) {\n      return `View ${overflow} more alerts`;\n    }\n    return &#39;&#39;;\n  };\n\n  const addAlert = (title: string, variant: AlertProps[&#39;variant&#39;], key: React.Key) =&gt; {\n    setAlerts((prevAlerts) =&gt; [{ title, variant, key }, ...prevAlerts]);\n    setOverflowMessage(getOverflowMessage(alerts.length + 1));\n  };\n\n  const removeAlert = (key: React.Key) =&gt; {\n    const newAlerts = alerts.filter((alert) =&gt; alert.key !== key);\n    setAlerts(newAlerts);\n    setOverflowMessage(getOverflowMessage(newAlerts.length));\n  };\n\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(&#39; &#39;);\n\n  const getUniqueId = () =&gt; new Date().getTime();\n\n  const addSuccessAlert = () =&gt; {\n    addAlert(&#39;Toast success alert&#39;, &#39;success&#39;, getUniqueId());\n  };\n\n  const addDangerAlert = () =&gt; {\n    addAlert(&#39;Toast danger alert&#39;, &#39;danger&#39;, getUniqueId());\n  };\n\n  const addInfoAlert = () =&gt; {\n    addAlert(&#39;Toast info alert&#39;, &#39;info&#39;, getUniqueId());\n  };\n\n  const onOverflowClick = () =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;Overflow message clicked&#39;);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;InputGroup style={{ marginBottom: &#39;16px&#39; }}&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addSuccessAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add toast success alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addDangerAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add toast danger alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addInfoAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add toast info alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n      &lt;/InputGroup&gt;\n      &lt;AlertGroup\n        hasAnimations\n        isToast\n        isLiveRegion\n        onOverflowClick={onOverflowClick}\n        overflowMessage={overflowMessage}\n      &gt;\n        {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) =&gt; (\n          &lt;Alert\n            variant={AlertVariant[variant]}\n            title={title}\n            actionClose={\n              &lt;AlertActionCloseButton\n                title={title as string}\n                variantLabel={`${variant} alert`}\n                onClose={() =&gt; removeAlert(key)}\n              /&gt;\n            }\n            key={key}\n          /&gt;\n        ))}\n      &lt;/AlertGroup&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-55" data-pf-content="true" class="pf-v6-c-content--h3">Asynchronous alert groups</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-81" data-pf-content="true" class="pf-v6-c-content--p">The following example shows how alerts can be triggered by an asynchronous event in the application. You can customize how an alert will be announced to assistive technology by adjusting the value of the <code>aria-live</code> property. Click the “start async” alert button below and then click the buttons in the above toast examples to demonstrate how asynchronous events add alerts to a group. Click the “stop async alerts” button to halt this behavior.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-99" data-pf-content="true" class="pf-v6-c-content--p">See the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-56" data-pf-content="true" class="pf-v6-c-content--a">alert accessibility tab</a> for more information on customizing this behavior.</p>
+<astro-island uid="Z1joS3z" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Alert,\n  AlertProps,\n  AlertGroup,\n  AlertActionCloseButton,\n  AlertVariant,\n  InputGroup,\n  InputGroupItem,\n  useInterval\n} from &#39;@patternfly/react-core&#39;;\nimport buttonStyles from &#39;@patternfly/react-styles/css/components/Button/button&#39;;\n\nexport const AlertGroupAsync: React.FunctionComponent = () =&gt; {\n  const [alerts, setAlerts] = useState&lt;Partial&lt;AlertProps&gt;[]&gt;([]);\n  const [isRunning, setIsRunning] = useState(false);\n\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(&#39; &#39;);\n\n  const getUniqueId = () =&gt; new Date().getTime();\n\n  const addAlert = () =&gt; {\n    setAlerts((prevAlerts) =&gt; [\n      {\n        title: `Async notification ${prevAlerts.length + 1} was added to the queue.`,\n        variant: &#39;danger&#39;,\n        key: getUniqueId()\n      },\n      ...prevAlerts\n    ]);\n  };\n\n  const removeAlert = (key: React.Key) =&gt; {\n    setAlerts((prevAlerts) =&gt; [...prevAlerts.filter((alert) =&gt; alert.key !== key)]);\n  };\n\n  const startAsyncAlerts = () =&gt; {\n    setIsRunning(true);\n  };\n\n  const stopAsyncAlerts = () =&gt; {\n    setIsRunning(false);\n  };\n\n  useInterval(addAlert, isRunning ? 4500 : null);\n\n  return (\n    &lt;Fragment&gt;\n      &lt;InputGroup style={{ marginBottom: &#39;16px&#39; }}&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={startAsyncAlerts} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Start async alerts\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={stopAsyncAlerts} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Stop async alerts\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n      &lt;/InputGroup&gt;\n      &lt;AlertGroup hasAnimations isToast isLiveRegion aria-live=\&quot;assertive\&quot;&gt;\n        {alerts.map(({ title, variant, key }) =&gt; (\n          &lt;Alert\n            variant={AlertVariant[variant]}\n            title={title}\n            key={key}\n            actionClose={\n              &lt;AlertActionCloseButton\n                title={title as string}\n                variantLabel={`${variant} alert`}\n                onClose={() =&gt; removeAlert(key)}\n              /&gt;\n            }\n          /&gt;\n        ))}\n      &lt;/AlertGroup&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-57" data-pf-content="true" class="pf-v6-c-content--h3">Dynamic alert groups</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-58" data-pf-content="true" class="pf-v6-c-content--p">Click the buttons in the example below to add dynamic alerts to a group.</p>
+<astro-island uid="Zu8Dml" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Alert,\n  AlertProps,\n  AlertGroup,\n  AlertActionCloseButton,\n  AlertVariant,\n  InputGroup,\n  InputGroupItem\n} from &#39;@patternfly/react-core&#39;;\nimport buttonStyles from &#39;@patternfly/react-styles/css/components/Button/button&#39;;\n\nexport const AlertGroupSingularDynamic: React.FunctionComponent = () =&gt; {\n  const [alerts, setAlerts] = useState&lt;Partial&lt;AlertProps&gt;[]&gt;([]);\n\n  const addAlert = (title: string, variant: AlertProps[&#39;variant&#39;], key: React.Key) =&gt; {\n    setAlerts((prevAlerts) =&gt; [{ title, variant, key }, ...prevAlerts]);\n  };\n\n  const removeAlert = (key: React.Key) =&gt; {\n    setAlerts((prevAlerts) =&gt; [...prevAlerts.filter((alert) =&gt; alert.key !== key)]);\n  };\n\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(&#39; &#39;);\n\n  const getUniqueId = () =&gt; new Date().getTime();\n\n  const addSuccessAlert = () =&gt; {\n    addAlert(&#39;Success alert&#39;, &#39;success&#39;, getUniqueId());\n  };\n\n  const addDangerAlert = () =&gt; {\n    addAlert(&#39;Danger alert&#39;, &#39;danger&#39;, getUniqueId());\n  };\n\n  const addInfoAlert = () =&gt; {\n    addAlert(&#39;Info alert&#39;, &#39;info&#39;, getUniqueId());\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;InputGroup style={{ marginBottom: &#39;16px&#39; }}&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addSuccessAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add single success alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addDangerAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add single danger alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addInfoAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add single info alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n      &lt;/InputGroup&gt;\n      &lt;AlertGroup hasAnimations isLiveRegion&gt;\n        {alerts.map(({ title, variant, key }) =&gt; (\n          &lt;Alert\n            isInline\n            variant={AlertVariant[variant]}\n            title={title}\n            key={key}\n            actionClose={\n              &lt;AlertActionCloseButton\n                title={title as string}\n                variantLabel={`${variant} alert`}\n                onClose={() =&gt; removeAlert(key)}\n              /&gt;\n            }\n          /&gt;\n        ))}\n      &lt;/AlertGroup&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-59" data-pf-content="true" class="pf-v6-c-content--h3">Dynamic alert group with overflow message</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-60" data-pf-content="true" class="pf-v6-c-content--p">In the following example, there can be a maximum of 4 alerts shown at once.</p>
+<astro-island uid="7KzW7" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Alert,\n  AlertProps,\n  AlertGroup,\n  AlertActionCloseButton,\n  AlertVariant,\n  InputGroup,\n  InputGroupItem\n} from &#39;@patternfly/react-core&#39;;\nimport buttonStyles from &#39;@patternfly/react-styles/css/components/Button/button&#39;;\n\nexport const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () =&gt; {\n  const [alerts, setAlerts] = useState&lt;Partial&lt;AlertProps&gt;[]&gt;([]);\n  const [overflowMessage, setOverflowMessage] = useState&lt;string&gt;(&#39;&#39;);\n\n  const maxDisplayed = 4;\n\n  const getOverflowMessage = (alertsNumber: number) =&gt; {\n    const overflow = alertsNumber - maxDisplayed;\n    if (overflow &gt; 0) {\n      return `View ${overflow} more alerts`;\n    }\n    return &#39;&#39;;\n  };\n\n  const addAlert = (title: string, variant: AlertProps[&#39;variant&#39;], key: React.Key) =&gt; {\n    setAlerts((prevAlerts) =&gt; [{ title, variant, key }, ...prevAlerts]);\n    setOverflowMessage(getOverflowMessage(alerts.length + 1));\n  };\n\n  const removeAlert = (key: React.Key) =&gt; {\n    const newAlerts = alerts.filter((alert) =&gt; alert.key !== key);\n    setAlerts(newAlerts);\n    setOverflowMessage(getOverflowMessage(newAlerts.length));\n  };\n\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(&#39; &#39;);\n\n  const getUniqueId = () =&gt; new Date().getTime();\n\n  const addSuccessAlert = () =&gt; {\n    addAlert(&#39;Success alert&#39;, &#39;success&#39;, getUniqueId());\n  };\n\n  const addDangerAlert = () =&gt; {\n    addAlert(&#39;Danger alert&#39;, &#39;danger&#39;, getUniqueId());\n  };\n\n  const addInfoAlert = () =&gt; {\n    addAlert(&#39;Info alert&#39;, &#39;info&#39;, getUniqueId());\n  };\n\n  const onOverflowClick = () =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;Overflow message clicked&#39;);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;InputGroup style={{ marginBottom: &#39;16px&#39; }}&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addSuccessAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add single success alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addDangerAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add single danger alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addInfoAlert} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add single info alert\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n      &lt;/InputGroup&gt;\n      &lt;AlertGroup hasAnimations isLiveRegion onOverflowClick={onOverflowClick} overflowMessage={overflowMessage}&gt;\n        {alerts.slice(0, maxDisplayed).map(({ key, variant, title }) =&gt; (\n          &lt;Alert\n            isInline\n            variant={AlertVariant[variant]}\n            title={title}\n            actionClose={\n              &lt;AlertActionCloseButton\n                title={title as string}\n                variantLabel={`${variant} alert`}\n                onClose={() =&gt; removeAlert(key)}\n              /&gt;\n            }\n            key={key}\n          /&gt;\n        ))}\n      &lt;/AlertGroup&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-61" data-pf-content="true" class="pf-v6-c-content--h3">Multiple dynamic alert groups</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-62" data-pf-content="true" class="pf-v6-c-content--p">You may add multiple alerts to an alert group at once. Click the “add alert collection” button in the example below to add a batch of 3 toast alerts to a group.</p>
+<astro-island uid="Z13LFpu" component-url="/_astro/LiveExample.BOl02361.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Alert,\n  AlertProps,\n  AlertGroup,\n  AlertActionCloseButton,\n  AlertVariant,\n  InputGroup,\n  InputGroupItem\n} from &#39;@patternfly/react-core&#39;;\nimport buttonStyles from &#39;@patternfly/react-styles/css/components/Button/button&#39;;\n\nexport const AlertGroupMultipleDynamic: React.FunctionComponent = () =&gt; {\n  const [alerts, setAlerts] = useState&lt;Partial&lt;AlertProps&gt;[]&gt;([]);\n\n  const addAlerts = (incomingAlerts: Partial&lt;AlertProps&gt;[]) =&gt; {\n    setAlerts((prevAlerts) =&gt; [...incomingAlerts, ...prevAlerts]);\n  };\n\n  const removeAlert = (key: React.Key) =&gt; {\n    setAlerts((prevAlerts) =&gt; [...prevAlerts.filter((alert) =&gt; alert.key !== key)]);\n  };\n\n  const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(&#39; &#39;);\n\n  const getUniqueId = () =&gt; String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now();\n\n  const addAlertCollection = () =&gt; {\n    addAlerts([\n      { title: &#39;First alert notification.&#39;, variant: &#39;success&#39;, key: getUniqueId() },\n      { title: &#39;Second alert notification.&#39;, variant: &#39;warning&#39;, key: getUniqueId() },\n      { title: &#39;Third alert notification.&#39;, variant: &#39;danger&#39;, key: getUniqueId() }\n    ]);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;InputGroup style={{ marginBottom: &#39;16px&#39; }}&gt;\n        &lt;InputGroupItem&gt;\n          &lt;button onClick={addAlertCollection} type=\&quot;button\&quot; className={btnClasses}&gt;\n            Add alert collection\n          &lt;/button&gt;\n        &lt;/InputGroupItem&gt;\n      &lt;/InputGroup&gt;\n      &lt;AlertGroup hasAnimations isToast isLiveRegion&gt;\n        {alerts.map(({ title, variant, key }) =&gt; (\n          &lt;Alert\n            variant={AlertVariant[variant]}\n            title={title}\n            key={key}\n            actionClose={\n              &lt;AlertActionCloseButton\n                title={title as string}\n                variantLabel={`${variant} alert`}\n                onClose={() =&gt; removeAlert(key)}\n              /&gt;\n            }\n          /&gt;\n        ))}\n      &lt;/AlertGroup&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="2kit83" component-url="/_astro/PropsTables.Cio9znJH.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;Alert&quot;],[0,&quot;AlertGroup&quot;],[0,&quot;AlertActionCloseButton&quot;],[0,&quot;AlertActionLink&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/alert/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-19" 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="Z1hQzeP" component-url="/_astro/CSSTable.-Emc9iTg.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;autoLinkHeader&quot;:[0,true],&quot;cssPrefix&quot;:[0,&quot;pf-v6-c-alert&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;CSSTableComponent&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div><div class="pf-v6-l-stack__item"><astro-island uid="ZWM8rD" component-url="/_astro/CSSTable.-Emc9iTg.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;autoLinkHeader&quot;:[0,true],&quot;cssPrefix&quot;:[0,&quot;pf-v6-c-alert-group&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>