npm - @patternfly/patternfly-doc-core - Versions diffs - 1.15.3 → 1.15.5 - Mend

@patternfly/patternfly-doc-core 1.15.3 → 1.15.5

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

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

@@ -42,128 +42,128 @@
 	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="Z29YhSx" prefix="r5" component-url="/_astro/PageToggle.Dnq2xvgl.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-196"><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="Z2lylR6" prefix="r7" component-url="/_astro/Toolbar.BmprOKR8.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-66"><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-197"><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-198"><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-66"><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="2tEdvJ" component-url="/_astro/Navigation.B03CQhTw.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;docs/components/codeeditor/examples/codeeditor&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Code editor&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;docs/components/formcontrol/examples/formcontrol&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form control&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;docs/components/inlineedit/examples/inlineedit&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Inline edit&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;docs/demos/passwordgenerator/examples/passwordgenerator&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Password generator&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/demos/passwordstrength/examples/passwordstrength&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Password strength&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;docs/demos/table/examples/table&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Table&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]}]}]]],[1,[[0,{&quot;id&quot;:[0,&quot;dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Quick starts&quot;],&quot;section&quot;:[0,&quot;extensions&quot;],&quot;sortValue&quot;:[0]}]}]]],[1,[[0,{&quot;id&quot;:[0,&quot;docs/layouts/bullseye/examples/bullseye&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Bullseye&quot;],&quot;section&quot;:[0,&quot;layouts&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/layouts/flex/examples/flex&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Flex&quot;],&quot;section&quot;:[0,&quot;layouts&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/layouts/gallery/examples/gallery&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Gallery&quot;],&quot;section&quot;:[0,&quot;layouts&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/layouts/grid/examples/grid&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Grid&quot;],&quot;section&quot;:[0,&quot;layouts&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/layouts/level/examples/level&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Level&quot;],&quot;section&quot;:[0,&quot;layouts&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/layouts/split/examples/split&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Split&quot;],&quot;section&quot;:[0,&quot;layouts&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/layouts/stack/examples/stack&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Stack&quot;],&quot;section&quot;:[0,&quot;layouts&quot;],&quot;sortValue&quot;:[0]}]}]]],[1,[[0,{&quot;id&quot;:[0,&quot;docs/demos/cardview/examples/cardview&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Card view&quot;],&quot;section&quot;:[0,&quot;patterns&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/demos/dashboard/examples/dashboard&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dashboard&quot;],&quot;section&quot;:[0,&quot;patterns&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/demos/primarydetail/examples/primarydetail&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Primary-detail&quot;],&quot;section&quot;:[0,&quot;patterns&quot;],&quot;sortValue&quot;:[0]}]}]]],[1,[[0,{&quot;id&quot;:[0,&quot;docs/utilities/accessibility/examples/accessibility&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Accessibility&quot;],&quot;section&quot;:[0,&quot;utility-classes&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/utilities/alignment/examples/alignment&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Alignment&quot;],&quot;section&quot;:[0,&quot;utility-classes&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/utilities/backgroundcolor/examples/backgroundcolor&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Background color&quot;],&quot;section&quot;:[0,&quot;utility-classes&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/utilities/boxshadow/examples/box-shadow&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Box shadow&quot;],&quot;section&quot;:[0,&quot;utility-classes&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/utilities/display/examples/display&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Display&quot;],&quot;section&quot;:[0,&quot;utility-classes&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/utilities/flex/examples/flex&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Flex&quot;],&quot;section&quot;:[0,&quot;utility-classes&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/utilities/float/examples/float&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Float&quot;],&quot;section&quot;:[0,&quot;utility-classes&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/utilities/sizing/examples/sizing&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Sizing&quot;],&quot;section&quot;:[0,&quot;utility-classes&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/utilities/spacing/examples/spacing&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Spacing&quot;],&quot;section&quot;:[0,&quot;utility-classes&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/utilities/text/examples/text&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text&quot;],&quot;section&quot;:[0,&quot;utility-classes&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/tabs/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/tabs/html"> HTML </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/tabs/html-demos"> HTML demos </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1196" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1197" data-pf-content="true" class="pf-v6-c-content--h3">Default tabs</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1237" data-pf-content="true" class="pf-v6-c-content--p">A <code>&lt;Tabs&gt;</code> component contains multiple <code>&lt;Tab&gt;</code> components that may be used to navigate between sets of content within a page.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1198" data-pf-content="true" class="pf-v6-c-content--p">You can adjust a tab in the following ways:</p>
-<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1267" 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-1238" data-pf-content="true" class="pf-v6-c-content--li">To label a tab with text, pass a <code>&lt;TabTitleText&gt;</code> component into the <code>title</code> property of a <code>&lt;Tab&gt;</code>.</li>
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1239" data-pf-content="true" class="pf-v6-c-content--li">To disable a tab, use the <code>isDisabled</code> property. Tabs using <code>isDisabled</code> are not perceivable or operable by users navigating via assistive technologies.</li>
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1240" data-pf-content="true" class="pf-v6-c-content--li">To disable a tab, but keep it perceivable to assistive technology users, use the <code>isAriaDisabled</code> property. If a disabled tab has a tooltip, use this property instead of <code>isDisabled</code>.</li>
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1241" data-pf-content="true" class="pf-v6-c-content--li">To add a tooltip to an aria-disabled tab, use the <code>tooltip</code> property.</li>
+			[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="Z1IiAIa" prefix="r5" component-url="/_astro/PageToggle.Dnq2xvgl.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-202"><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="uTvJO" prefix="r7" component-url="/_astro/Toolbar.BmprOKR8.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-68"><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-203"><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-204"><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-68"><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="2tEdvJ" component-url="/_astro/Navigation.B03CQhTw.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;docs/components/codeeditor/examples/codeeditor&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Code editor&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;docs/components/formcontrol/examples/formcontrol&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form control&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;docs/components/inlineedit/examples/inlineedit&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Inline edit&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;docs/demos/passwordgenerator/examples/passwordgenerator&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Password generator&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/demos/passwordstrength/examples/passwordstrength&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Password strength&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;docs/demos/table/examples/table&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Table&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]}]}]]],[1,[[0,{&quot;id&quot;:[0,&quot;dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Quick starts&quot;],&quot;section&quot;:[0,&quot;extensions&quot;],&quot;sortValue&quot;:[0]}]}]]],[1,[[0,{&quot;id&quot;:[0,&quot;docs/layouts/bullseye/examples/bullseye&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Bullseye&quot;],&quot;section&quot;:[0,&quot;layouts&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/layouts/flex/examples/flex&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Flex&quot;],&quot;section&quot;:[0,&quot;layouts&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/layouts/gallery/examples/gallery&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Gallery&quot;],&quot;section&quot;:[0,&quot;layouts&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/layouts/grid/examples/grid&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Grid&quot;],&quot;section&quot;:[0,&quot;layouts&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/layouts/level/examples/level&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Level&quot;],&quot;section&quot;:[0,&quot;layouts&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/layouts/split/examples/split&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Split&quot;],&quot;section&quot;:[0,&quot;layouts&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/layouts/stack/examples/stack&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Stack&quot;],&quot;section&quot;:[0,&quot;layouts&quot;],&quot;sortValue&quot;:[0]}]}]]],[1,[[0,{&quot;id&quot;:[0,&quot;docs/demos/cardview/examples/cardview&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Card view&quot;],&quot;section&quot;:[0,&quot;patterns&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/demos/dashboard/examples/dashboard&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dashboard&quot;],&quot;section&quot;:[0,&quot;patterns&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/demos/primarydetail/examples/primarydetail&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Primary-detail&quot;],&quot;section&quot;:[0,&quot;patterns&quot;],&quot;sortValue&quot;:[0]}]}]]],[1,[[0,{&quot;id&quot;:[0,&quot;docs/utilities/accessibility/examples/accessibility&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Accessibility&quot;],&quot;section&quot;:[0,&quot;utility-classes&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/utilities/alignment/examples/alignment&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Alignment&quot;],&quot;section&quot;:[0,&quot;utility-classes&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/utilities/backgroundcolor/examples/backgroundcolor&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Background color&quot;],&quot;section&quot;:[0,&quot;utility-classes&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/utilities/boxshadow/examples/box-shadow&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Box shadow&quot;],&quot;section&quot;:[0,&quot;utility-classes&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/utilities/display/examples/display&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Display&quot;],&quot;section&quot;:[0,&quot;utility-classes&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/utilities/flex/examples/flex&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Flex&quot;],&quot;section&quot;:[0,&quot;utility-classes&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/utilities/float/examples/float&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Float&quot;],&quot;section&quot;:[0,&quot;utility-classes&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/utilities/sizing/examples/sizing&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Sizing&quot;],&quot;section&quot;:[0,&quot;utility-classes&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/utilities/spacing/examples/spacing&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Spacing&quot;],&quot;section&quot;:[0,&quot;utility-classes&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;docs/utilities/text/examples/text&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text&quot;],&quot;section&quot;:[0,&quot;utility-classes&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/tabs/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/tabs/html"> HTML </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/tabs/html-demos"> HTML demos </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1215" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1216" data-pf-content="true" class="pf-v6-c-content--h3">Default tabs</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1256" data-pf-content="true" class="pf-v6-c-content--p">A <code>&lt;Tabs&gt;</code> component contains multiple <code>&lt;Tab&gt;</code> components that may be used to navigate between sets of content within a page.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1217" data-pf-content="true" class="pf-v6-c-content--p">You can adjust a tab in the following ways:</p>
+<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1286" 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-1257" data-pf-content="true" class="pf-v6-c-content--li">To label a tab with text, pass a <code>&lt;TabTitleText&gt;</code> component into the <code>title</code> property of a <code>&lt;Tab&gt;</code>.</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1258" data-pf-content="true" class="pf-v6-c-content--li">To disable a tab, use the <code>isDisabled</code> property. Tabs using <code>isDisabled</code> are not perceivable or operable by users navigating via assistive technologies.</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1259" data-pf-content="true" class="pf-v6-c-content--li">To disable a tab, but keep it perceivable to assistive technology users, use the <code>isAriaDisabled</code> property. If a disabled tab has a tooltip, use this property instead of <code>isDisabled</code>.</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1260" data-pf-content="true" class="pf-v6-c-content--li">To add a tooltip to an aria-disabled tab, use the <code>tooltip</code> property.</li>
 </ul>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1199" data-pf-content="true" class="pf-v6-c-content--p">Tabs can be styled as ‘default’ or ‘boxed’:</p>
-<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1268" 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-1200" data-pf-content="true" class="pf-v6-c-content--li">Default tabs do not have any borders and use a bottom line to distinguish between a selected tab, a hovered tab, and an inactive tab.</li>
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1242" data-pf-content="true" class="pf-v6-c-content--li">Boxed tabs are outlined to emphasize the area that a tab spans. To preview boxed tabs in the following examples, select the ‘isBox’ checkbox, which sets the <code>isBox</code> property to true.</li>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1218" data-pf-content="true" class="pf-v6-c-content--p">Tabs can be styled as ‘default’ or ‘boxed’:</p>
+<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1287" 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-1219" data-pf-content="true" class="pf-v6-c-content--li">Default tabs do not have any borders and use a bottom line to distinguish between a selected tab, a hovered tab, and an inactive tab.</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1261" data-pf-content="true" class="pf-v6-c-content--li">Boxed tabs are outlined to emphasize the area that a tab spans. To preview boxed tabs in the following examples, select the ‘isBox’ checkbox, which sets the <code>isBox</code> property to true.</li>
 </ul>
 <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="ZqSFYa" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from &#39;@patternfly/react-core&#39;;\n\nexport const TabsDefault: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;string | number&gt;(0);\n  const [isBox, setIsBox] = useState&lt;boolean&gt;(false);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey(tabIndex);\n  };\n\n  const toggleBox = (checked: boolean) =&gt; {\n    setIsBox(checked);\n  };\n\n  const tooltip = (\n    &lt;Tooltip content=\&quot;Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support.\&quot; /&gt;\n  );\n  return (\n    &lt;div&gt;\n      &lt;Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        isBox={isBox}\n        aria-label=\&quot;Tabs in the default example\&quot;\n        role=\&quot;region\&quot;\n      &gt;\n        &lt;Tab eventKey={0} title={&lt;TabTitleText&gt;Users&lt;/TabTitleText&gt;} aria-label=\&quot;Default content - users\&quot;&gt;\n          Users\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={1} title={&lt;TabTitleText&gt;Containers&lt;/TabTitleText&gt;}&gt;\n          Containers\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={2} title={&lt;TabTitleText&gt;Database&lt;/TabTitleText&gt;}&gt;\n          Database\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={3} title={&lt;TabTitleText&gt;Disabled&lt;/TabTitleText&gt;} isDisabled&gt;\n          Disabled\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={4} title={&lt;TabTitleText&gt;ARIA Disabled&lt;/TabTitleText&gt;} isAriaDisabled&gt;\n          ARIA Disabled\n        &lt;/Tab&gt;\n        &lt;Tab tooltip={tooltip} eventKey={5} title={&lt;TabTitleText&gt;ARIA Disabled (Tooltip)&lt;/TabTitleText&gt;} isAriaDisabled&gt;\n          ARIA Disabled (Tooltip)\n        &lt;/Tab&gt;\n      &lt;/Tabs&gt;\n      &lt;div style={{ marginTop: &#39;20px&#39; }}&gt;\n        &lt;Checkbox\n          label=\&quot;isBox\&quot;\n          isChecked={isBox}\n          onChange={(_event, checked) =&gt; toggleBox(checked)}\n          aria-label=\&quot;show box variation checkbox\&quot;\n          id=\&quot;toggle-box-default\&quot;\n          name=\&quot;toggle-box-default\&quot;\n        /&gt;\n      &lt;/div&gt;\n    &lt;/div&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-1201" data-pf-content="true" class="pf-v6-c-content--h3">Boxed secondary tabs</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1243" data-pf-content="true" class="pf-v6-c-content--p">To change the background color of boxed tabs or the tab content, use the <code>variant</code> property.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1202" data-pf-content="true" class="pf-v6-c-content--p">Toggle the tab color by selecting the ‘Tabs secondary variant’ checkbox in the following example.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1220" data-pf-content="true" class="pf-v6-c-content--h3">Boxed secondary tabs</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1262" data-pf-content="true" class="pf-v6-c-content--p">To change the background color of boxed tabs or the tab content, use the <code>variant</code> property.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1221" data-pf-content="true" class="pf-v6-c-content--p">Toggle the tab color by selecting the ‘Tabs secondary variant’ checkbox in the following example.</p>
 <astro-island uid="1lEPM3" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from &#39;@patternfly/react-core&#39;;\n\nexport const TabsBoxSecondary: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;string | number&gt;(0);\n  const [isTabsBoxSecondary, setIsTabsBoxSecondary] = useState&lt;boolean&gt;(true);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey(tabIndex);\n  };\n\n  const toggleScheme = (checked: boolean) =&gt; {\n    setIsTabsBoxSecondary(checked);\n  };\n\n  const tooltip = (\n    &lt;Tooltip content=\&quot;Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support.\&quot; /&gt;\n  );\n  return (\n    &lt;div&gt;\n      &lt;Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        variant={isTabsBoxSecondary ? &#39;secondary&#39; : &#39;default&#39;}\n        isBox\n        aria-label=\&quot;Tabs in the box light variation example\&quot;\n        role=\&quot;region\&quot;\n      &gt;\n        &lt;Tab eventKey={0} title={&lt;TabTitleText&gt;Users&lt;/TabTitleText&gt;} aria-label=\&quot;Box light variation content - users\&quot;&gt;\n          Users\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={1} title={&lt;TabTitleText&gt;Containers&lt;/TabTitleText&gt;}&gt;\n          Containers\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={2} title={&lt;TabTitleText&gt;Database&lt;/TabTitleText&gt;}&gt;\n          Database\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={3} title={&lt;TabTitleText&gt;Disabled&lt;/TabTitleText&gt;} isDisabled&gt;\n          Disabled\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={4} title={&lt;TabTitleText&gt;ARIA Disabled&lt;/TabTitleText&gt;} isAriaDisabled&gt;\n          ARIA Disabled\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={5} title={&lt;TabTitleText&gt;ARIA Disabled (Tooltip)&lt;/TabTitleText&gt;} isAriaDisabled tooltip={tooltip}&gt;\n          ARIA Disabled (Tooltip)\n        &lt;/Tab&gt;\n      &lt;/Tabs&gt;\n      &lt;div style={{ marginTop: &#39;20px&#39; }}&gt;\n        &lt;Checkbox\n          label=\&quot;Tabs secondary variant\&quot;\n          isChecked={isTabsBoxSecondary}\n          onChange={(_event, checked) =&gt; toggleScheme(checked)}\n          id=\&quot;toggle-tabs-variant\&quot;\n          name=\&quot;toggle-tabs-variant\&quot;\n        /&gt;\n      &lt;/div&gt;\n    &lt;/div&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-1203" data-pf-content="true" class="pf-v6-c-content--h3">Vertical tabs</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1204" data-pf-content="true" class="pf-v6-c-content--p">Vertical tabs are placed on the left-hand side of a page or container and may appear in both ‘default’ and ‘boxed’ tab variations.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1244" data-pf-content="true" class="pf-v6-c-content--p">To style tabs vertically, use the <code>isVertical</code> property.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1222" data-pf-content="true" class="pf-v6-c-content--h3">Vertical tabs</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1223" data-pf-content="true" class="pf-v6-c-content--p">Vertical tabs are placed on the left-hand side of a page or container and may appear in both ‘default’ and ‘boxed’ tab variations.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1263" data-pf-content="true" class="pf-v6-c-content--p">To style tabs vertically, use the <code>isVertical</code> property.</p>
 <astro-island uid="ZolUcY" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from &#39;@patternfly/react-core&#39;;\n\nexport const TabsVertical: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;string | number&gt;(0);\n  const [isBox, setIsBox] = useState&lt;boolean&gt;(false);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey(tabIndex);\n  };\n\n  const toggleBox = (checked: boolean) =&gt; {\n    setIsBox(checked);\n  };\n\n  const tooltip = (\n    &lt;Tooltip content=\&quot;Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support.\&quot; /&gt;\n  );\n\n  return (\n    &lt;div&gt;\n      &lt;Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        isVertical\n        isBox={isBox}\n        aria-label=\&quot;Tabs in the vertical example\&quot;\n        role=\&quot;region\&quot;\n      &gt;\n        &lt;Tab\n          eventKey={0}\n          title={\n            &lt;TabTitleText aria-label=\&quot;vertical\&quot; role=\&quot;region\&quot;&gt;\n              Users\n            &lt;/TabTitleText&gt;\n          }\n          aria-label=\&quot;Vertical example content users\&quot;\n        &gt;\n          Users\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={1} title={&lt;TabTitleText&gt;Containers&lt;/TabTitleText&gt;}&gt;\n          Containers\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={2} title={&lt;TabTitleText&gt;Database&lt;/TabTitleText&gt;}&gt;\n          Database\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={3} title={&lt;TabTitleText&gt;Disabled&lt;/TabTitleText&gt;} isDisabled&gt;\n          Disabled\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={4} title={&lt;TabTitleText&gt;ARIA Disabled&lt;/TabTitleText&gt;} isAriaDisabled&gt;\n          ARIA Disabled\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={5} title={&lt;TabTitleText&gt;ARIA Disabled (Tooltip)&lt;/TabTitleText&gt;} isAriaDisabled tooltip={tooltip}&gt;\n          ARIA Disabled (Tooltip)\n        &lt;/Tab&gt;\n      &lt;/Tabs&gt;\n      &lt;div style={{ marginTop: &#39;20px&#39; }}&gt;\n        &lt;Checkbox\n          label=\&quot;isBox\&quot;\n          isChecked={isBox}\n          onChange={(_event, checked) =&gt; toggleBox(checked)}\n          aria-label=\&quot;show box variation checkbox with vertical\&quot;\n          id=\&quot;toggle-box-vertical\&quot;\n          name=\&quot;toggle-box-vertical\&quot;\n        /&gt;\n      &lt;/div&gt;\n    &lt;/div&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-1205" data-pf-content="true" class="pf-v6-c-content--h3">Vertical expandable tabs</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1206" data-pf-content="true" class="pf-v6-c-content--p">Vertical tabs can be made expandable to save space. Users can select the caret to expand a menu and switch between tabs.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1245" data-pf-content="true" class="pf-v6-c-content--p">Expandable tabs can be enabled at different breakpoints. The following example passes <code>expandable={{ default: &#39;expandable&#39;, md: &#39;nonExpandable&#39;, lg: &#39;expandable&#39; }}</code> into the <code>&lt;Tabs&gt;</code> component.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1246" data-pf-content="true" class="pf-v6-c-content--p">To flag vertical tabs when they’re expanded, use the <code>isExpanded</code> property.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1224" data-pf-content="true" class="pf-v6-c-content--h3">Vertical expandable tabs</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1225" data-pf-content="true" class="pf-v6-c-content--p">Vertical tabs can be made expandable to save space. Users can select the caret to expand a menu and switch between tabs.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1264" data-pf-content="true" class="pf-v6-c-content--p">Expandable tabs can be enabled at different breakpoints. The following example passes <code>expandable={{ default: &#39;expandable&#39;, md: &#39;nonExpandable&#39;, lg: &#39;expandable&#39; }}</code> into the <code>&lt;Tabs&gt;</code> component.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1265" data-pf-content="true" class="pf-v6-c-content--p">To flag vertical tabs when they’re expanded, use the <code>isExpanded</code> property.</p>
 <astro-island uid="Z1fn6QV" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText } from &#39;@patternfly/react-core&#39;;\n\nexport const TabsVerticalExpandable: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;string | number&gt;(0);\n  const [isExpanded, setIsExpanded] = useState&lt;boolean&gt;(false);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey(tabIndex);\n  };\n\n  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) =&gt; {\n    setIsExpanded(isExpanded);\n  };\n\n  return (\n    &lt;Tabs\n      activeKey={activeTabKey}\n      onSelect={handleTabClick}\n      isVertical\n      expandable={{ default: &#39;expandable&#39;, md: &#39;nonExpandable&#39;, lg: &#39;expandable&#39; }}\n      isExpanded={isExpanded}\n      onToggle={onToggle}\n      toggleText=\&quot;Containers\&quot;\n      aria-label=\&quot;Tabs in the vertical expandable example\&quot;\n      role=\&quot;region\&quot;\n    &gt;\n      &lt;Tab eventKey={0} title={&lt;TabTitleText&gt;Users&lt;/TabTitleText&gt;} aria-label=\&quot;Vertical expandable content users\&quot;&gt;\n        Users\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={1} title={&lt;TabTitleText&gt;Containers&lt;/TabTitleText&gt;}&gt;\n        Containers\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={2} title={&lt;TabTitleText&gt;Database&lt;/TabTitleText&gt;}&gt;\n        Database\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={3} title={&lt;TabTitleText&gt;Server&lt;/TabTitleText&gt;}&gt;\n        Server\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={4} title={&lt;TabTitleText&gt;System&lt;/TabTitleText&gt;}&gt;\n        System\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={6} title={&lt;TabTitleText&gt;Network&lt;/TabTitleText&gt;}&gt;\n        Network\n      &lt;/Tab&gt;\n    &lt;/Tabs&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-1207" data-pf-content="true" class="pf-v6-c-content--h3">Vertical expandable uncontrolled</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1247" data-pf-content="true" class="pf-v6-c-content--p">To flag the default expanded state for uncontrolled tabs, use the <code>defaultIsExpanded</code> property.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1226" data-pf-content="true" class="pf-v6-c-content--h3">Vertical expandable uncontrolled</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1266" data-pf-content="true" class="pf-v6-c-content--p">To flag the default expanded state for uncontrolled tabs, use the <code>defaultIsExpanded</code> property.</p>
 <astro-island uid="qoBh" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText } from &#39;@patternfly/react-core&#39;;\nexport const TabsVerticalExpandableUncontrolled: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;string | number&gt;(0);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey(tabIndex);\n  };\n\n  return (\n    &lt;Tabs\n      activeKey={activeTabKey}\n      onSelect={handleTabClick}\n      isVertical\n      expandable={{ default: &#39;expandable&#39;, md: &#39;nonExpandable&#39;, lg: &#39;expandable&#39; }}\n      defaultIsExpanded={false}\n      toggleText=\&quot;Containers\&quot;\n      aria-label=\&quot;Tabs in the vertical expandable uncontrolled example\&quot;\n      role=\&quot;region\&quot;\n    &gt;\n      &lt;Tab\n        eventKey={0}\n        title={&lt;TabTitleText&gt;Users&lt;/TabTitleText&gt;}\n        aria-label=\&quot;Vertical expandable uncontrolled content users\&quot;\n      &gt;\n        Users\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={1} title={&lt;TabTitleText&gt;Containers&lt;/TabTitleText&gt;}&gt;\n        Containers\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={2} title={&lt;TabTitleText&gt;Database&lt;/TabTitleText&gt;}&gt;\n        Database\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={3} title={&lt;TabTitleText&gt;Server&lt;/TabTitleText&gt;}&gt;\n        Server\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={4} title={&lt;TabTitleText&gt;System&lt;/TabTitleText&gt;}&gt;\n        System\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={6} title={&lt;TabTitleText&gt;Network&lt;/TabTitleText&gt;}&gt;\n        Network\n      &lt;/Tab&gt;\n    &lt;/Tabs&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-1208" data-pf-content="true" class="pf-v6-c-content--h3">Default overflow tabs</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1209" data-pf-content="true" class="pf-v6-c-content--p">By default, overflow is applied when there are too many tabs for the width of the container they are in. This overflow can be navigated by side-scrolling within the tabs section, or by selecting the left and right arrows.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1227" data-pf-content="true" class="pf-v6-c-content--h3">Default overflow tabs</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1228" data-pf-content="true" class="pf-v6-c-content--p">By default, overflow is applied when there are too many tabs for the width of the container they are in. This overflow can be navigated by side-scrolling within the tabs section, or by selecting the left and right arrows.</p>
 <astro-island uid="1hstNi" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText, Checkbox } from &#39;@patternfly/react-core&#39;;\n\nexport const TabsDefaultOverflow: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;string | number&gt;(0);\n  const [isBox, setIsBox] = useState&lt;boolean&gt;(false);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey(tabIndex);\n  };\n\n  const toggleBox = (checked: boolean) =&gt; {\n    setIsBox(checked);\n  };\n\n  return (\n    &lt;div&gt;\n      &lt;Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        isBox={isBox}\n        aria-label=\&quot;Tabs in the default overflow example\&quot;\n        role=\&quot;region\&quot;\n      &gt;\n        &lt;Tab eventKey={0} title={&lt;TabTitleText&gt;Users&lt;/TabTitleText&gt;} aria-label=\&quot;Default overflow content users\&quot;&gt;\n          Users\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={1} title={&lt;TabTitleText&gt;Containers&lt;/TabTitleText&gt;}&gt;\n          Containers\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={2} title={&lt;TabTitleText&gt;Database&lt;/TabTitleText&gt;}&gt;\n          Database\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={3} title={&lt;TabTitleText&gt;Server&lt;/TabTitleText&gt;}&gt;\n          Server\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={4} title={&lt;TabTitleText&gt;System&lt;/TabTitleText&gt;}&gt;\n          System\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={6} title={&lt;TabTitleText&gt;Network&lt;/TabTitleText&gt;}&gt;\n          Network\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={7} title={&lt;TabTitleText&gt;Tab item 7&lt;/TabTitleText&gt;}&gt;\n          Tab 7 section\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={8} title={&lt;TabTitleText&gt;Tab item 8&lt;/TabTitleText&gt;}&gt;\n          Tab 8 section\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={9} title={&lt;TabTitleText&gt;Tab item 9&lt;/TabTitleText&gt;}&gt;\n          Tab 9 section\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={10} title={&lt;TabTitleText&gt;Tab item 10&lt;/TabTitleText&gt;}&gt;\n          Tab 10 section\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={11} title={&lt;TabTitleText&gt;Tab item 11&lt;/TabTitleText&gt;}&gt;\n          Tab 11 section\n        &lt;/Tab&gt;\n      &lt;/Tabs&gt;\n      &lt;div style={{ marginTop: &#39;20px&#39; }}&gt;\n        &lt;Checkbox\n          label=\&quot;isBox\&quot;\n          isChecked={isBox}\n          onChange={(_event, checked) =&gt; toggleBox(checked)}\n          aria-label=\&quot;show box variation checkbox on overflow\&quot;\n          id=\&quot;toggle-box-overflow\&quot;\n          name=\&quot;toggle-box-overflow\&quot;\n        /&gt;\n      &lt;/div&gt;\n    &lt;/div&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-1210" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal overflow tabs</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1211" data-pf-content="true" class="pf-v6-c-content--p">Horizontal overflow can be used instead of the default application. To navigate horizontal overflow tabs users can select the last tab, labeled “more”, to see the overflowed content.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1248" data-pf-content="true" class="pf-v6-c-content--p">To enable horizontal overflow, use the <code>isOverflowHorizontal</code> property.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1212" data-pf-content="true" class="pf-v6-c-content--p">In the following example, select the ‘Show overflowing tab count’ checkbox to add a count of overflow items to the final “more” tab.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1229" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal overflow tabs</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1230" data-pf-content="true" class="pf-v6-c-content--p">Horizontal overflow can be used instead of the default application. To navigate horizontal overflow tabs users can select the last tab, labeled “more”, to see the overflowed content.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1267" data-pf-content="true" class="pf-v6-c-content--p">To enable horizontal overflow, use the <code>isOverflowHorizontal</code> property.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1231" data-pf-content="true" class="pf-v6-c-content--p">In the following example, select the ‘Show overflowing tab count’ checkbox to add a count of overflow items to the final “more” tab.</p>
 <astro-island uid="XpbIS" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText, Checkbox } from &#39;@patternfly/react-core&#39;;\n\nexport const TabsHorizontalOverflow: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;string | number&gt;(0);\n  const [showTabCount, setShowTabCount] = useState(false);\n\n  const handleTabClick = (_event: any, tabIndex: string | number) =&gt; {\n    setActiveTabKey(tabIndex);\n  };\n\n  return (\n    &lt;div&gt;\n      &lt;Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        aria-label=\&quot;Tabs in the horizontal overflow example\&quot;\n        role=\&quot;region\&quot;\n        isOverflowHorizontal={{ showTabCount }}\n      &gt;\n        &lt;Tab eventKey={0} title={&lt;TabTitleText&gt;Users&lt;/TabTitleText&gt;} aria-label=\&quot;Horizontal overflow content users\&quot;&gt;\n          Users\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={1} title={&lt;TabTitleText&gt;Containers&lt;/TabTitleText&gt;}&gt;\n          Containers\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={2} title={&lt;TabTitleText&gt;Database&lt;/TabTitleText&gt;}&gt;\n          Database\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={3} title={&lt;TabTitleText&gt;Server&lt;/TabTitleText&gt;}&gt;\n          Server\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={4} title={&lt;TabTitleText&gt;System&lt;/TabTitleText&gt;}&gt;\n          System\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={6} title={&lt;TabTitleText&gt;Network&lt;/TabTitleText&gt;}&gt;\n          Network\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={7} title={&lt;TabTitleText&gt;Tab item 7&lt;/TabTitleText&gt;}&gt;\n          Tab 7 section\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={8} title={&lt;TabTitleText&gt;Tab item 8&lt;/TabTitleText&gt;}&gt;\n          Tab 8 section\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={9} title={&lt;TabTitleText&gt;Tab item 9&lt;/TabTitleText&gt;}&gt;\n          Tab 9 section\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={10} title={&lt;TabTitleText&gt;Tab item 10&lt;/TabTitleText&gt;}&gt;\n          Tab 10 section\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={11} title={&lt;TabTitleText&gt;Tab item 11&lt;/TabTitleText&gt;}&gt;\n          Tab 11 section\n        &lt;/Tab&gt;\n      &lt;/Tabs&gt;\n      &lt;div style={{ marginTop: &#39;20px&#39; }}&gt;\n        &lt;Checkbox\n          label=\&quot;Show overflowing tab count\&quot;\n          isChecked={showTabCount}\n          onChange={() =&gt; setShowTabCount(!showTabCount)}\n          aria-label=\&quot;show overflow tab count variation checkbox\&quot;\n          id=\&quot;toggle-show-count-overflow\&quot;\n          name=\&quot;toggle-show-count-overflow\&quot;\n        /&gt;\n      &lt;/div&gt;\n    &lt;/div&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-1213" data-pf-content="true" class="pf-v6-c-content--h3">With tooltip react ref</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1249" data-pf-content="true" class="pf-v6-c-content--p">When using a React ref to link a tooltip to a tab component via the <code>reference</code> property, you should avoid manually passing in a value of “off” to the <code>aria-live</code> property. Doing so may cause the tooltip to become less accessible to assistive technologies.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1250" data-pf-content="true" class="pf-v6-c-content--p">The tooltip should also have the <code>id</code> property passed in. The value of <code>id</code> should be passed into the tab’s <code>aria-describedby</code> property. This ensures a tooltip used with a React ref will be announced by the JAWS and NVDA screen readers.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1232" data-pf-content="true" class="pf-v6-c-content--h3">With tooltip react ref</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1268" data-pf-content="true" class="pf-v6-c-content--p">When using a React ref to link a tooltip to a tab component via the <code>reference</code> property, you should avoid manually passing in a value of “off” to the <code>aria-live</code> property. Doing so may cause the tooltip to become less accessible to assistive technologies.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1269" data-pf-content="true" class="pf-v6-c-content--p">The tooltip should also have the <code>id</code> property passed in. The value of <code>id</code> should be passed into the tab’s <code>aria-describedby</code> property. This ensures a tooltip used with a React ref will be announced by the JAWS and NVDA screen readers.</p>
 <astro-island uid="ZBPSK2" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { createRef, useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from &#39;@patternfly/react-core&#39;;\n\nexport const TabsTooltipReactRef: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;string | number&gt;(0);\n  const [isBox, setIsBox] = useState&lt;boolean&gt;(false);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey(tabIndex);\n  };\n\n  const toggleBox = (checked: boolean) =&gt; {\n    setIsBox(checked);\n  };\n\n  const tooltipRef = createRef&lt;HTMLElement&gt;();\n\n  return (\n    &lt;div&gt;\n      &lt;Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        isBox={isBox}\n        aria-label=\&quot;Tabs in the example with a tooltip ref\&quot;\n        role=\&quot;region\&quot;\n      &gt;\n        &lt;Tab eventKey={0} title={&lt;TabTitleText&gt;Users&lt;/TabTitleText&gt;} aria-label=\&quot;Tooltip ref content - users\&quot;&gt;\n          Users\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={1} title={&lt;TabTitleText&gt;Containers&lt;/TabTitleText&gt;}&gt;\n          Containers\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={2} title={&lt;TabTitleText&gt;Database&lt;/TabTitleText&gt;}&gt;\n          Database\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={3} title={&lt;TabTitleText&gt;Disabled&lt;/TabTitleText&gt;} isDisabled&gt;\n          Disabled\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={4} title={&lt;TabTitleText&gt;ARIA Disabled&lt;/TabTitleText&gt;} isAriaDisabled&gt;\n          ARIA Disabled\n        &lt;/Tab&gt;\n        &lt;Tab\n          eventKey={5}\n          title={&lt;TabTitleText&gt;ARIA Disabled (Tooltip)&lt;/TabTitleText&gt;}\n          isAriaDisabled\n          ref={tooltipRef}\n          aria-describedby=\&quot;tooltip-ref1\&quot;\n        &gt;\n          ARIA Disabled (Tooltip)\n        &lt;/Tab&gt;\n      &lt;/Tabs&gt;\n      &lt;Tooltip\n        id=\&quot;tooltip-ref1\&quot;\n        content=\&quot;Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support.\&quot;\n        triggerRef={tooltipRef}\n      /&gt;\n      &lt;div style={{ marginTop: &#39;20px&#39; }}&gt;\n        &lt;Checkbox\n          label=\&quot;isBox\&quot;\n          isChecked={isBox}\n          onChange={(_event, checked) =&gt; toggleBox(checked)}\n          aria-label=\&quot;show box variation checkbox\&quot;\n          id=\&quot;toggle-box-tooltip-ref\&quot;\n          name=\&quot;toggle-box-tooltip-ref\&quot;\n        /&gt;\n      &lt;/div&gt;\n    &lt;/div&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-1214" data-pf-content="true" class="pf-v6-c-content--h3">Uncontrolled tabs</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1251" data-pf-content="true" class="pf-v6-c-content--p">To allow the <code>&lt;Tabs&gt;</code> component to manage setting the active tab and displaying correct content itself, use uncontrolled tabs, as shown in the following example.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1233" data-pf-content="true" class="pf-v6-c-content--h3">Uncontrolled tabs</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1270" data-pf-content="true" class="pf-v6-c-content--p">To allow the <code>&lt;Tabs&gt;</code> component to manage setting the active tab and displaying correct content itself, use uncontrolled tabs, as shown in the following example.</p>
 <astro-island uid="ZTi0F4" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Tabs, Tab, TabTitleText, Tooltip } from &#39;@patternfly/react-core&#39;;\n\nexport const TabsUncontrolled: React.FunctionComponent = () =&gt; {\n  const tooltip = (\n    &lt;Tooltip content=\&quot;Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support.\&quot; /&gt;\n  );\n\n  return (\n    &lt;&gt;\n      &lt;Tabs defaultActiveKey={0} aria-label=\&quot;Tabs in the uncontrolled example\&quot; role=\&quot;region\&quot;&gt;\n        &lt;Tab eventKey={0} title={&lt;TabTitleText&gt;Users&lt;/TabTitleText&gt;} aria-label=\&quot;Uncontrolled ref content - users\&quot;&gt;\n          Users\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={1} title={&lt;TabTitleText&gt;Containers&lt;/TabTitleText&gt;}&gt;\n          Containers\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={2} title={&lt;TabTitleText&gt;Database&lt;/TabTitleText&gt;}&gt;\n          Database\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={3} title={&lt;TabTitleText&gt;Disabled&lt;/TabTitleText&gt;} isDisabled&gt;\n          Disabled\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={4} title={&lt;TabTitleText&gt;ARIA Disabled&lt;/TabTitleText&gt;} isAriaDisabled&gt;\n          ARIA Disabled\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={5} title={&lt;TabTitleText&gt;ARIA Disabled (Tooltip)&lt;/TabTitleText&gt;} isAriaDisabled tooltip={tooltip}&gt;\n          ARIA Disabled (Tooltip)\n        &lt;/Tab&gt;\n      &lt;/Tabs&gt;\n    &lt;/&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1215" data-pf-content="true" class="pf-v6-c-content--h3">With adjusted inset</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1252" data-pf-content="true" class="pf-v6-c-content--p">To adjust the inset of tabs and visually separate them more, use the <code>inset</code> property. You can set the inset to “insetNone”, “insetSm”, “insetMd”, “insetLg”, “insetXl”, or “inset2xl” at “default”, “sm”, “md”, “lg, “xl, and “2xl” breakpoints.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1234" data-pf-content="true" class="pf-v6-c-content--h3">With adjusted inset</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1271" data-pf-content="true" class="pf-v6-c-content--p">To adjust the inset of tabs and visually separate them more, use the <code>inset</code> property. You can set the inset to “insetNone”, “insetSm”, “insetMd”, “insetLg”, “insetXl”, or “inset2xl” at “default”, “sm”, “md”, “lg, “xl, and “2xl” breakpoints.</p>
 <astro-island uid="Z20zrve" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText, Checkbox } from &#39;@patternfly/react-core&#39;;\n\nexport const TabsInset: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;string | number&gt;(0);\n  const [isBox, setIsBox] = useState&lt;boolean&gt;(false);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey(tabIndex);\n  };\n\n  const toggleBox = (checked: boolean) =&gt; {\n    setIsBox(checked);\n  };\n\n  return (\n    &lt;div&gt;\n      &lt;Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        inset={{\n          default: &#39;insetNone&#39;,\n          md: &#39;insetSm&#39;,\n          xl: &#39;insetLg&#39;,\n          &#39;2xl&#39;: &#39;inset2xl&#39;\n        }}\n        isBox={isBox}\n        aria-label=\&quot;Tabs in the inset example\&quot;\n        role=\&quot;region\&quot;\n      &gt;\n        &lt;Tab eventKey={0} title={&lt;TabTitleText&gt;Users&lt;/TabTitleText&gt;} aria-label=\&quot;Inset example content users\&quot;&gt;\n          Users\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={1} title={&lt;TabTitleText&gt;Containers&lt;/TabTitleText&gt;}&gt;\n          Containers\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={2} title={&lt;TabTitleText&gt;Database&lt;/TabTitleText&gt;}&gt;\n          Database\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={3} title={&lt;TabTitleText&gt;Server&lt;/TabTitleText&gt;}&gt;\n          Server\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={4} title={&lt;TabTitleText&gt;System&lt;/TabTitleText&gt;}&gt;\n          System\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={6} title={&lt;TabTitleText&gt;Network&lt;/TabTitleText&gt;}&gt;\n          Network\n        &lt;/Tab&gt;\n      &lt;/Tabs&gt;\n      &lt;div style={{ marginTop: &#39;20px&#39; }}&gt;\n        &lt;Checkbox\n          label=\&quot;isBox\&quot;\n          isChecked={isBox}\n          onChange={(_event, checked) =&gt; toggleBox(checked)}\n          aria-label=\&quot;show box variation checkbox with inset\&quot;\n          id=\&quot;toggle-box-inset\&quot;\n          name=\&quot;toggle-box-inset\&quot;\n        /&gt;\n      &lt;/div&gt;\n    &lt;/div&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-1216" data-pf-content="true" class="pf-v6-c-content--h3">With page insets</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1253" data-pf-content="true" class="pf-v6-c-content--p">To adjust the left padding of tabs, use the <code>usePageInsets</code> property. This property aligns the tabs padding with the default padding of the page section, which makes it easier to align tabs with page section content.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1235" data-pf-content="true" class="pf-v6-c-content--h3">With page insets</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1272" data-pf-content="true" class="pf-v6-c-content--p">To adjust the left padding of tabs, use the <code>usePageInsets</code> property. This property aligns the tabs padding with the default padding of the page section, which makes it easier to align tabs with page section content.</p>
 <astro-island uid="ZHF3yd" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText, Checkbox } from &#39;@patternfly/react-core&#39;;\n\nexport const TabsPageInsets: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;string | number&gt;(0);\n  const [isBox, setIsBox] = useState&lt;boolean&gt;(false);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey(tabIndex);\n  };\n\n  const toggleBox = (checked: boolean) =&gt; {\n    setIsBox(checked);\n  };\n\n  return (\n    &lt;div&gt;\n      &lt;Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        usePageInsets\n        isBox={isBox}\n        aria-label=\&quot;Tabs in the page insets example\&quot;\n        role=\&quot;region\&quot;\n      &gt;\n        &lt;Tab eventKey={0} title={&lt;TabTitleText&gt;Users&lt;/TabTitleText&gt;} aria-label=\&quot;Page insets example content users\&quot;&gt;\n          Users\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={1} title={&lt;TabTitleText&gt;Containers&lt;/TabTitleText&gt;}&gt;\n          Containers\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={2} title={&lt;TabTitleText&gt;Database&lt;/TabTitleText&gt;}&gt;\n          Database\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={3} title={&lt;TabTitleText&gt;Server&lt;/TabTitleText&gt;}&gt;\n          Server\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={4} title={&lt;TabTitleText&gt;System&lt;/TabTitleText&gt;}&gt;\n          System\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={6} title={&lt;TabTitleText&gt;Network&lt;/TabTitleText&gt;}&gt;\n          Network\n        &lt;/Tab&gt;\n      &lt;/Tabs&gt;\n      &lt;div style={{ marginTop: &#39;20px&#39; }}&gt;\n        &lt;Checkbox\n          label=\&quot;isBox\&quot;\n          isChecked={isBox}\n          onChange={(_event, checked) =&gt; toggleBox(checked)}\n          aria-label=\&quot;show box variation checkbox with inset\&quot;\n          id=\&quot;toggle-box-page-inset\&quot;\n          name=\&quot;toggle-box-page-inset\&quot;\n        /&gt;\n      &lt;/div&gt;\n    &lt;/div&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-1217" data-pf-content="true" class="pf-v6-c-content--h3">With icons and text</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1254" data-pf-content="true" class="pf-v6-c-content--p">You can render different content in the <code>title</code> property of a tab to add icons and text.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1255" data-pf-content="true" class="pf-v6-c-content--p">To add an icon to a tab, pass a <code>&lt;TabTitleIcon&gt;</code> component that contains the icon of your choice into the <code>title</code>. To use an icon alongside styled text, keep the text in the <code>&lt;TabTitleText&gt;</code> component.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1236" data-pf-content="true" class="pf-v6-c-content--h3">With icons and text</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1273" data-pf-content="true" class="pf-v6-c-content--p">You can render different content in the <code>title</code> property of a tab to add icons and text.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1274" data-pf-content="true" class="pf-v6-c-content--p">To add an icon to a tab, pass a <code>&lt;TabTitleIcon&gt;</code> component that contains the icon of your choice into the <code>title</code>. To use an icon alongside styled text, keep the text in the <code>&lt;TabTitleText&gt;</code> component.</p>
 <astro-island uid="2g7zjy" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText, TabTitleIcon } from &#39;@patternfly/react-core&#39;;\nimport UsersIcon from &#39;@patternfly/react-icons/dist/esm/icons/users-icon&#39;;\nimport BoxIcon from &#39;@patternfly/react-icons/dist/esm/icons/box-icon&#39;;\nimport DatabaseIcon from &#39;@patternfly/react-icons/dist/esm/icons/database-icon&#39;;\nimport ServerIcon from &#39;@patternfly/react-icons/dist/esm/icons/server-icon&#39;;\nimport LaptopIcon from &#39;@patternfly/react-icons/dist/esm/icons/laptop-icon&#39;;\nimport ProjectDiagramIcon from &#39;@patternfly/react-icons/dist/esm/icons/project-diagram-icon&#39;;\n\nexport const TabsIconAndText: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;string | number&gt;(0);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey(tabIndex);\n  };\n\n  return (\n    &lt;Tabs\n      activeKey={activeTabKey}\n      onSelect={handleTabClick}\n      aria-label=\&quot;Tabs in the icons and text example\&quot;\n      role=\&quot;region\&quot;\n    &gt;\n      &lt;Tab\n        eventKey={0}\n        title={\n          &lt;&gt;\n            &lt;TabTitleIcon&gt;\n              &lt;UsersIcon /&gt;\n            &lt;/TabTitleIcon&gt;{&#39; &#39;}\n            &lt;TabTitleText&gt;Users&lt;/TabTitleText&gt;{&#39; &#39;}\n          &lt;/&gt;\n        }\n        aria-label=\&quot;icons and text content\&quot;\n      &gt;\n        Users\n      &lt;/Tab&gt;\n      &lt;Tab\n        eventKey={1}\n        title={\n          &lt;&gt;\n            &lt;TabTitleIcon&gt;\n              &lt;BoxIcon /&gt;\n            &lt;/TabTitleIcon&gt;{&#39; &#39;}\n            &lt;TabTitleText&gt;Containers&lt;/TabTitleText&gt;{&#39; &#39;}\n          &lt;/&gt;\n        }\n      &gt;\n        Containers\n      &lt;/Tab&gt;\n      &lt;Tab\n        eventKey={2}\n        title={\n          &lt;&gt;\n            &lt;TabTitleIcon&gt;\n              &lt;DatabaseIcon /&gt;\n            &lt;/TabTitleIcon&gt;{&#39; &#39;}\n            &lt;TabTitleText&gt;Database&lt;/TabTitleText&gt;{&#39; &#39;}\n          &lt;/&gt;\n        }\n      &gt;\n        Database\n      &lt;/Tab&gt;\n      &lt;Tab\n        eventKey={3}\n        title={\n          &lt;&gt;\n            &lt;TabTitleIcon&gt;\n              &lt;ServerIcon /&gt;\n            &lt;/TabTitleIcon&gt;{&#39; &#39;}\n            &lt;TabTitleText&gt;Server&lt;/TabTitleText&gt;{&#39; &#39;}\n          &lt;/&gt;\n        }\n      &gt;\n        Server\n      &lt;/Tab&gt;\n      &lt;Tab\n        eventKey={4}\n        title={\n          &lt;&gt;\n            &lt;TabTitleIcon&gt;\n              &lt;LaptopIcon /&gt;\n            &lt;/TabTitleIcon&gt;{&#39; &#39;}\n            &lt;TabTitleText&gt;System&lt;/TabTitleText&gt;{&#39; &#39;}\n          &lt;/&gt;\n        }\n      &gt;\n        System\n      &lt;/Tab&gt;\n      &lt;Tab\n        eventKey={6}\n        title={\n          &lt;&gt;\n            &lt;TabTitleIcon&gt;\n              &lt;ProjectDiagramIcon /&gt;\n            &lt;/TabTitleIcon&gt;{&#39; &#39;}\n            &lt;TabTitleText&gt;Network&lt;/TabTitleText&gt;{&#39; &#39;}\n          &lt;/&gt;\n        }\n      &gt;\n        Network\n      &lt;/Tab&gt;\n    &lt;/Tabs&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-1218" data-pf-content="true" class="pf-v6-c-content--h3">Subtabs</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1219" data-pf-content="true" class="pf-v6-c-content--p">Use subtabs within other components, like modals. Subtabs have less visually prominent styling.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1256" data-pf-content="true" class="pf-v6-c-content--p">To apply subtab styling to tabs, use the <code>isSubtab</code> property.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1237" data-pf-content="true" class="pf-v6-c-content--h3">Subtabs</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1238" data-pf-content="true" class="pf-v6-c-content--p">Use subtabs within other components, like modals. Subtabs have less visually prominent styling.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1275" data-pf-content="true" class="pf-v6-c-content--p">To apply subtab styling to tabs, use the <code>isSubtab</code> property.</p>
 <astro-island uid="yod88" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText, Checkbox } from &#39;@patternfly/react-core&#39;;\n\nexport const TabsSubtabs: React.FunctionComponent = () =&gt; {\n  const [activeTabKey1, setActiveTabKey1] = useState&lt;string | number&gt;(0);\n  const [activeTabKey2, setActiveTabKey2] = useState&lt;string | number&gt;(0);\n  const [isBox, setIsBox] = useState&lt;boolean&gt;(false);\n\n  // Toggle currently active primary tab\n  const handleTabClickFirst = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey1(tabIndex);\n  };\n\n  // Toggle currently active subtab\n  const handleTabClickSecond = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey2(tabIndex);\n  };\n\n  const toggleBox = (checked: boolean) =&gt; {\n    setIsBox(checked);\n  };\n\n  return (\n    &lt;div&gt;\n      &lt;Tabs\n        activeKey={activeTabKey1}\n        onSelect={handleTabClickFirst}\n        isBox={isBox}\n        aria-label=\&quot;Tabs in the tabs with subtabs example\&quot;\n        role=\&quot;region\&quot;\n      &gt;\n        &lt;Tab eventKey={0} title={&lt;TabTitleText&gt;Users&lt;/TabTitleText&gt;} aria-label=\&quot;Tabs with subtabs content users\&quot;&gt;\n          &lt;Tabs\n            aria-label=\&quot;subtabs for users\&quot;\n            role=\&quot;region\&quot;\n            activeKey={activeTabKey2}\n            isSubtab\n            onSelect={handleTabClickSecond}\n          &gt;\n            &lt;Tab eventKey={20} title={&lt;TabTitleText&gt;Subtab item 1&lt;/TabTitleText&gt;}&gt;\n              Subtab item 1 item section\n            &lt;/Tab&gt;\n            &lt;Tab eventKey={21} title={&lt;TabTitleText&gt;Subtab item 2&lt;/TabTitleText&gt;}&gt;\n              Subtab item 2 section\n            &lt;/Tab&gt;\n            &lt;Tab eventKey={22} title={&lt;TabTitleText&gt;Subtab item 3&lt;/TabTitleText&gt;}&gt;\n              Subtab item 3 section\n            &lt;/Tab&gt;\n            &lt;Tab eventKey={23} title={&lt;TabTitleText&gt;Subtab item 4&lt;/TabTitleText&gt;}&gt;\n              Subtab item 4 section\n            &lt;/Tab&gt;\n            &lt;Tab eventKey={24} title={&lt;TabTitleText&gt;Subtab item 5&lt;/TabTitleText&gt;}&gt;\n              Subtab item 5 section\n            &lt;/Tab&gt;\n            &lt;Tab eventKey={25} title={&lt;TabTitleText&gt;Subtab item 6&lt;/TabTitleText&gt;}&gt;\n              Subtab item 6 section\n            &lt;/Tab&gt;\n            &lt;Tab eventKey={26} title={&lt;TabTitleText&gt;Subtab item 7&lt;/TabTitleText&gt;}&gt;\n              Subtab item 7 section\n            &lt;/Tab&gt;\n            &lt;Tab eventKey={27} title={&lt;TabTitleText&gt;Subtab item 8&lt;/TabTitleText&gt;}&gt;\n              Subtab item 8 section\n            &lt;/Tab&gt;\n          &lt;/Tabs&gt;\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={1} title={&lt;TabTitleText&gt;Containers&lt;/TabTitleText&gt;}&gt;\n          Containers\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={2} title={&lt;TabTitleText&gt;Database&lt;/TabTitleText&gt;}&gt;\n          Database\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={3} title={&lt;TabTitleText&gt;Server&lt;/TabTitleText&gt;}&gt;\n          Server\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={4} title={&lt;TabTitleText&gt;System&lt;/TabTitleText&gt;}&gt;\n          System\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={6} title={&lt;TabTitleText&gt;Network&lt;/TabTitleText&gt;}&gt;\n          Network\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={7} title={&lt;TabTitleText&gt;Tab item 7&lt;/TabTitleText&gt;}&gt;\n          Tab 7 section\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={8} title={&lt;TabTitleText&gt;Tab item 8&lt;/TabTitleText&gt;}&gt;\n          Tab 8 section\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={9} title={&lt;TabTitleText&gt;Tab item 9&lt;/TabTitleText&gt;}&gt;\n          Tab 9 section\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={10} title={&lt;TabTitleText&gt;Tab item 10&lt;/TabTitleText&gt;}&gt;\n          Tab 10 section\n        &lt;/Tab&gt;\n        &lt;Tab eventKey={11} title={&lt;TabTitleText&gt;Tab item 11&lt;/TabTitleText&gt;}&gt;\n          Tab 11 section\n        &lt;/Tab&gt;\n      &lt;/Tabs&gt;\n      &lt;div style={{ marginTop: &#39;20px&#39; }}&gt;\n        &lt;Checkbox\n          label=\&quot;isBox\&quot;\n          isChecked={isBox}\n          onChange={(_event, checked) =&gt; toggleBox(checked)}\n          aria-label=\&quot;show box variation checkbox with sub tabs\&quot;\n          id=\&quot;toggle-box-subtab\&quot;\n          name=\&quot;toggle-box-subtab\&quot;\n        /&gt;\n      &lt;/div&gt;\n    &lt;/div&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-1220" data-pf-content="true" class="pf-v6-c-content--h3">Filled tabs with icons</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1257" data-pf-content="true" class="pf-v6-c-content--p">To allow tabs to fill the available width of the page section, use the <code>isFilled</code> property.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1239" data-pf-content="true" class="pf-v6-c-content--h3">Filled tabs with icons</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1276" data-pf-content="true" class="pf-v6-c-content--p">To allow tabs to fill the available width of the page section, use the <code>isFilled</code> property.</p>
 <astro-island uid="ZglS0G" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText, TabTitleIcon, Checkbox } from &#39;@patternfly/react-core&#39;;\nimport UsersIcon from &#39;@patternfly/react-icons/dist/esm/icons/users-icon&#39;;\nimport BoxIcon from &#39;@patternfly/react-icons/dist/esm/icons/box-icon&#39;;\nimport DatabaseIcon from &#39;@patternfly/react-icons/dist/esm/icons/database-icon&#39;;\n\nexport const TabsFilledWithIcons: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;string | number&gt;(0);\n  const [isBox, setIsBox] = useState&lt;boolean&gt;(false);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey(tabIndex);\n  };\n\n  const toggleBox = (checked: boolean) =&gt; {\n    setIsBox(checked);\n  };\n\n  return (\n    &lt;div&gt;\n      &lt;Tabs\n        isFilled\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        isBox={isBox}\n        aria-label=\&quot;Tabs in the filled with icons example\&quot;\n        role=\&quot;region\&quot;\n      &gt;\n        &lt;Tab\n          eventKey={0}\n          title={\n            &lt;&gt;\n              &lt;TabTitleIcon&gt;\n                &lt;UsersIcon /&gt;\n              &lt;/TabTitleIcon&gt;{&#39; &#39;}\n              &lt;TabTitleText&gt;Users&lt;/TabTitleText&gt;{&#39; &#39;}\n            &lt;/&gt;\n          }\n          aria-label=\&quot;filled tabs with icons content users\&quot;\n        &gt;\n          Users\n        &lt;/Tab&gt;\n        &lt;Tab\n          eventKey={1}\n          title={\n            &lt;&gt;\n              &lt;TabTitleIcon&gt;\n                &lt;BoxIcon /&gt;\n              &lt;/TabTitleIcon&gt;{&#39; &#39;}\n              &lt;TabTitleText&gt;Containers&lt;/TabTitleText&gt;{&#39; &#39;}\n            &lt;/&gt;\n          }\n        &gt;\n          Containers\n        &lt;/Tab&gt;\n        &lt;Tab\n          eventKey={2}\n          title={\n            &lt;&gt;\n              &lt;TabTitleIcon&gt;\n                &lt;DatabaseIcon /&gt;\n              &lt;/TabTitleIcon&gt;{&#39; &#39;}\n              &lt;TabTitleText&gt;Database&lt;/TabTitleText&gt;{&#39; &#39;}\n            &lt;/&gt;\n          }\n        &gt;\n          Database\n        &lt;/Tab&gt;\n      &lt;/Tabs&gt;\n      &lt;div style={{ marginTop: &#39;20px&#39; }}&gt;\n        &lt;Checkbox\n          label=\&quot;isBox\&quot;\n          isChecked={isBox}\n          onChange={(_event, checked) =&gt; toggleBox(checked)}\n          aria-label=\&quot;show box variation checkbox with filled icon tabs\&quot;\n          id=\&quot;toggle-box-filled-icon\&quot;\n          name=\&quot;toggle-box-filled-icon\&quot;\n        /&gt;\n      &lt;/div&gt;\n    &lt;/div&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-1221" data-pf-content="true" class="pf-v6-c-content--h3">Tabs linked to nav elements</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1258" data-pf-content="true" class="pf-v6-c-content--p">To let tabs link to nav elements, pass <code>{TabsComponent.nav}</code> into the <code>component</code> property.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1259" data-pf-content="true" class="pf-v6-c-content--p">Nav tabs should use the <code>href</code> property to link the tab to the URL of another page or page section. A tab with an <code>href</code> will render as an <code>&lt;a&gt;</code> instead of a <code>&lt;button&gt;</code>.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1240" data-pf-content="true" class="pf-v6-c-content--h3">Tabs linked to nav elements</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1277" data-pf-content="true" class="pf-v6-c-content--p">To let tabs link to nav elements, pass <code>{TabsComponent.nav}</code> into the <code>component</code> property.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1278" data-pf-content="true" class="pf-v6-c-content--p">Nav tabs should use the <code>href</code> property to link the tab to the URL of another page or page section. A tab with an <code>href</code> will render as an <code>&lt;a&gt;</code> instead of a <code>&lt;button&gt;</code>.</p>
 <astro-island uid="2sou4b" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabsComponent, TabTitleText } from &#39;@patternfly/react-core&#39;;\n\nexport const TabsNav: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;string | number&gt;(0);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey(tabIndex);\n  };\n  return (\n    &lt;Tabs\n      activeKey={activeTabKey}\n      onSelect={handleTabClick}\n      component={TabsComponent.nav}\n      aria-label=\&quot;Tabs in the nav element example\&quot;\n    &gt;\n      &lt;Tab eventKey={0} title={&lt;TabTitleText&gt;Users&lt;/TabTitleText&gt;} href=\&quot;#users\&quot; aria-label=\&quot;Nav element content users\&quot;&gt;\n        Users\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={1} title={&lt;TabTitleText&gt;Containers&lt;/TabTitleText&gt;} href=\&quot;#containers\&quot;&gt;\n        Containers\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={2} title={&lt;TabTitleText&gt;Database&lt;/TabTitleText&gt;} href=\&quot;#database\&quot;&gt;\n        Database\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={3} title={&lt;TabTitleText&gt;Disabled&lt;/TabTitleText&gt;} isDisabled href=\&quot;#disabled\&quot;&gt;\n        Disabled\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={4} title={&lt;TabTitleText&gt;ARIA Disabled&lt;/TabTitleText&gt;} isAriaDisabled href=\&quot;#aria-disabled\&quot;&gt;\n        ARIA Disabled\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={6} title={&lt;TabTitleText&gt;Network&lt;/TabTitleText&gt;} href=\&quot;#network\&quot;&gt;\n        Network\n      &lt;/Tab&gt;\n    &lt;/Tabs&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-1222" data-pf-content="true" class="pf-v6-c-content--h3">Subtabs linked to nav elements</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1223" data-pf-content="true" class="pf-v6-c-content--p">Subtabs can also link to nav elements.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1241" data-pf-content="true" class="pf-v6-c-content--h3">Subtabs linked to nav elements</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1242" data-pf-content="true" class="pf-v6-c-content--p">Subtabs can also link to nav elements.</p>
 <astro-island uid="13PYhl" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabsComponent, TabTitleText } from &#39;@patternfly/react-core&#39;;\n\nexport const TabsNavSubtab: React.FunctionComponent = () =&gt; {\n  const [activeTabKey1, setActiveTabKey1] = useState&lt;string | number&gt;(0);\n  const [activeTabKey2, setActiveTabKey2] = useState&lt;string | number&gt;(0);\n\n  // Toggle currently active primary tab\n  const handleTabClickFirst = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey1(tabIndex);\n  };\n\n  // Toggle currently active secondary tab\n  const handleTabClickSecond = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey2(tabIndex);\n  };\n\n  return (\n    &lt;Tabs\n      activeKey={activeTabKey1}\n      onSelect={handleTabClickFirst}\n      component={TabsComponent.nav}\n      aria-label=\&quot;Tabs in the sub tabs with nav element example\&quot;\n    &gt;\n      &lt;Tab eventKey={0} title={&lt;TabTitleText&gt;Users&lt;/TabTitleText&gt;} href=\&quot;#\&quot; aria-label=\&quot;Subtabs with nav content users\&quot;&gt;\n        &lt;Tabs\n          activeKey={activeTabKey2}\n          isSubtab\n          onSelect={handleTabClickSecond}\n          aria-label=\&quot;Local secondary\&quot;\n          component={TabsComponent.nav}\n        &gt;\n          &lt;Tab eventKey={20} title={&lt;TabTitleText&gt;Item 1&lt;/TabTitleText&gt;} href=\&quot;#\&quot;&gt;\n            Item 1 item section\n          &lt;/Tab&gt;\n          &lt;Tab eventKey={21} title={&lt;TabTitleText&gt;Item 2&lt;/TabTitleText&gt;} href=\&quot;#\&quot;&gt;\n            Item 2 section\n          &lt;/Tab&gt;\n          &lt;Tab eventKey={22} title={&lt;TabTitleText&gt;Item 3&lt;/TabTitleText&gt;} href=\&quot;#\&quot;&gt;\n            Item 3 section\n          &lt;/Tab&gt;\n          &lt;Tab eventKey={3} title={&lt;TabTitleText&gt;Disabled&lt;/TabTitleText&gt;} isDisabled href=\&quot;#\&quot;&gt;\n            Disabled\n          &lt;/Tab&gt;\n          &lt;Tab eventKey={4} title={&lt;TabTitleText&gt;ARIA Disabled&lt;/TabTitleText&gt;} isAriaDisabled href=\&quot;#\&quot;&gt;\n            ARIA Disabled\n          &lt;/Tab&gt;\n          &lt;Tab eventKey={25} title={&lt;TabTitleText&gt;Item 6&lt;/TabTitleText&gt;} href=\&quot;#\&quot;&gt;\n            Item 6 section\n          &lt;/Tab&gt;\n        &lt;/Tabs&gt;\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={1} title={&lt;TabTitleText&gt;Containers&lt;/TabTitleText&gt;} href=\&quot;#\&quot;&gt;\n        Containers\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={2} title={&lt;TabTitleText&gt;Database&lt;/TabTitleText&gt;} href=\&quot;#\&quot;&gt;\n        Database\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={3} title={&lt;TabTitleText&gt;Disabled&lt;/TabTitleText&gt;} isDisabled href=\&quot;#\&quot;&gt;\n        Disabled\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={4} title={&lt;TabTitleText&gt;ARIA Disabled&lt;/TabTitleText&gt;} isAriaDisabled href=\&quot;#\&quot;&gt;\n        ARIA Disabled\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={6} title={&lt;TabTitleText&gt;Network&lt;/TabTitleText&gt;} href=\&quot;#\&quot;&gt;\n        Network\n      &lt;/Tab&gt;\n    &lt;/Tabs&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-1224" data-pf-content="true" class="pf-v6-c-content--h3">With separate content</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1260" data-pf-content="true" class="pf-v6-c-content--p">If a <code>&lt;TabContent&gt;</code> component is defined outside of a <code>&lt;Tabs&gt;</code> component, use the <code>tabContentRef</code> and <code>tabContentId</code> properties</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1243" data-pf-content="true" class="pf-v6-c-content--h3">With separate content</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1279" data-pf-content="true" class="pf-v6-c-content--p">If a <code>&lt;TabContent&gt;</code> component is defined outside of a <code>&lt;Tabs&gt;</code> component, use the <code>tabContentRef</code> and <code>tabContentId</code> properties</p>
 <astro-island uid="lnSCm" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { createRef, Fragment, useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText, TabContent } from &#39;@patternfly/react-core&#39;;\n\nexport const TabsSeparateContent: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;string | number&gt;(0);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey(tabIndex);\n  };\n\n  const contentRef1 = createRef&lt;HTMLElement&gt;();\n  const contentRef2 = createRef&lt;HTMLElement&gt;();\n  const contentRef3 = createRef&lt;HTMLElement&gt;();\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        aria-label=\&quot;Tabs in the separate content example\&quot;\n        role=\&quot;region\&quot;\n      &gt;\n        &lt;Tab\n          eventKey={0}\n          title={&lt;TabTitleText&gt;Tab item 1&lt;/TabTitleText&gt;}\n          tabContentId=\&quot;refTab1Section\&quot;\n          tabContentRef={contentRef1}\n        /&gt;\n        &lt;Tab\n          eventKey={1}\n          title={&lt;TabTitleText&gt;Tab item 2&lt;/TabTitleText&gt;}\n          tabContentId=\&quot;refTab2Section\&quot;\n          tabContentRef={contentRef2}\n        /&gt;\n        &lt;Tab\n          eventKey={2}\n          title={&lt;TabTitleText&gt;Tab item 3&lt;/TabTitleText&gt;}\n          tabContentId=\&quot;refTab3Section\&quot;\n          tabContentRef={contentRef3}\n        /&gt;\n      &lt;/Tabs&gt;\n      &lt;div&gt;\n        &lt;TabContent\n          eventKey={0}\n          id=\&quot;refTab1Section\&quot;\n          ref={contentRef1}\n          aria-label=\&quot;This is content for the first separate content tab\&quot;\n        &gt;\n          Tab 1 section\n        &lt;/TabContent&gt;\n        &lt;TabContent\n          eventKey={1}\n          id=\&quot;refTab2Section\&quot;\n          ref={contentRef2}\n          aria-label=\&quot;This is content for the second separate content tab\&quot;\n          hidden\n        &gt;\n          Tab 2 section\n        &lt;/TabContent&gt;\n        &lt;TabContent\n          eventKey={2}\n          id=\&quot;refTab3Section\&quot;\n          ref={contentRef3}\n          aria-label=\&quot;This is content for the third separate content tab\&quot;\n          hidden\n        &gt;\n          Tab 3 section\n        &lt;/TabContent&gt;\n      &lt;/div&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1225" data-pf-content="true" class="pf-v6-c-content--h3">With tab content with body and padding</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1261" data-pf-content="true" class="pf-v6-c-content--p">To add a content body to a <code>&lt;TabContent&gt;</code> component, pass a <code>&lt;TabContentBody&gt;</code>. To add padding to the body section, use the <code>hasPadding</code> property.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1244" data-pf-content="true" class="pf-v6-c-content--h3">With tab content with body and padding</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1280" data-pf-content="true" class="pf-v6-c-content--p">To add a content body to a <code>&lt;TabContent&gt;</code> component, pass a <code>&lt;TabContentBody&gt;</code>. To add padding to the body section, use the <code>hasPadding</code> property.</p>
 <astro-island uid="18fRUK" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { createRef, Fragment, useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText, TabContent, TabContentBody } from &#39;@patternfly/react-core&#39;;\n\nexport const TabContentWithBodyPadding: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;string | number&gt;(0);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey(tabIndex);\n  };\n\n  const contentRef1 = createRef&lt;HTMLElement&gt;();\n  const contentRef2 = createRef&lt;HTMLElement&gt;();\n  const contentRef3 = createRef&lt;HTMLElement&gt;();\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        aria-label=\&quot;Tabs in the body and padding example\&quot;\n        role=\&quot;region\&quot;\n      &gt;\n        &lt;Tab\n          eventKey={0}\n          title={&lt;TabTitleText&gt;Tab item 1&lt;/TabTitleText&gt;}\n          tabContentId=\&quot;tab1SectionBodyPadding\&quot;\n          tabContentRef={contentRef1}\n        /&gt;\n        &lt;Tab\n          eventKey={1}\n          title={&lt;TabTitleText&gt;Tab item 2&lt;/TabTitleText&gt;}\n          tabContentId=\&quot;tab2SectionBodyPadding\&quot;\n          tabContentRef={contentRef2}\n        /&gt;\n        &lt;Tab\n          eventKey={2}\n          title={&lt;TabTitleText&gt;Tab item 3&lt;/TabTitleText&gt;}\n          tabContentId=\&quot;tab3SectionBodyPadding\&quot;\n          tabContentRef={contentRef3}\n        /&gt;\n      &lt;/Tabs&gt;\n      &lt;div&gt;\n        &lt;TabContent eventKey={0} id=\&quot;tab1SectionBodyPadding\&quot; ref={contentRef1}&gt;\n          &lt;TabContentBody hasPadding&gt; Tab 1 section with body and padding &lt;/TabContentBody&gt;\n        &lt;/TabContent&gt;\n        &lt;TabContent eventKey={1} id=\&quot;tab2SectionBodyPadding\&quot; ref={contentRef2} hidden&gt;\n          &lt;TabContentBody hasPadding&gt; Tab 2 section with body and padding &lt;/TabContentBody&gt;\n        &lt;/TabContent&gt;\n        &lt;TabContent eventKey={2} id=\&quot;tab3SectionBodyPadding\&quot; ref={contentRef3} hidden&gt;\n          &lt;TabContentBody hasPadding&gt; Tab 3 section with body and padding &lt;/TabContentBody&gt;\n        &lt;/TabContent&gt;\n      &lt;/div&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1226" data-pf-content="true" class="pf-v6-c-content--h3">Children mounting on click</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1262" data-pf-content="true" class="pf-v6-c-content--p">To mount tab children (add to the DOM) when a tab is clicked, use the <code>mountOnEnter</code> property.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1227" data-pf-content="true" class="pf-v6-c-content--p">Note that this property does not create the tab children until the tab is clicked, so they are not preloaded into the DOM.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1245" data-pf-content="true" class="pf-v6-c-content--h3">Children mounting on click</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1281" data-pf-content="true" class="pf-v6-c-content--p">To mount tab children (add to the DOM) when a tab is clicked, use the <code>mountOnEnter</code> property.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1246" data-pf-content="true" class="pf-v6-c-content--p">Note that this property does not create the tab children until the tab is clicked, so they are not preloaded into the DOM.</p>
 <astro-island uid="ViU0e" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText } from &#39;@patternfly/react-core&#39;;\n\nexport const TabsChildrenMounting: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;string | number&gt;(0);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey(tabIndex);\n  };\n\n  return (\n    &lt;Tabs\n      mountOnEnter\n      activeKey={activeTabKey}\n      onSelect={handleTabClick}\n      aria-label=\&quot;Tabs in the children mounting on click example\&quot;\n      role=\&quot;region\&quot;\n    &gt;\n      &lt;Tab eventKey={0} title={&lt;TabTitleText&gt;Tab item 1&lt;/TabTitleText&gt;} aria-label=\&quot;Tab 1\&quot;&gt;\n        Tab 1 section\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={1} title={&lt;TabTitleText&gt;Tab item 2&lt;/TabTitleText&gt;} aria-label=\&quot;Tab 2\&quot;&gt;\n        Tab 2 section\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={2} title={&lt;TabTitleText&gt;Tab item 3&lt;/TabTitleText&gt;} aria-label=\&quot;Tab 3\&quot;&gt;\n        Tab 3 section\n      &lt;/Tab&gt;\n    &lt;/Tabs&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-1228" data-pf-content="true" class="pf-v6-c-content--h3">Unmounting invisible children</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1263" data-pf-content="true" class="pf-v6-c-content--p">To unmount tab children (remove from the DOM) when they are no longer visible, use the <code>unmountOnExit</code> property.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1247" data-pf-content="true" class="pf-v6-c-content--h3">Unmounting invisible children</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1282" data-pf-content="true" class="pf-v6-c-content--p">To unmount tab children (remove from the DOM) when they are no longer visible, use the <code>unmountOnExit</code> property.</p>
 <astro-island uid="wiFuQ" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText } from &#39;@patternfly/react-core&#39;;\n\nexport const TabsUnmountingInvisibleChildren: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;string | number&gt;(0);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey(tabIndex);\n  };\n\n  return (\n    &lt;Tabs\n      unmountOnExit\n      activeKey={activeTabKey}\n      onSelect={handleTabClick}\n      aria-label=\&quot;Tabs in the unmounting invisible children example\&quot;\n      role=\&quot;region\&quot;\n    &gt;\n      &lt;Tab eventKey={0} title={&lt;TabTitleText&gt;Tab item 1&lt;/TabTitleText&gt;} aria-label=\&quot;Invisible children tab 1\&quot;&gt;\n        Tab 1 section\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={1} title={&lt;TabTitleText&gt;Tab item 2&lt;/TabTitleText&gt;} aria-label=\&quot;Invisible children tab 2\&quot;&gt;\n        Tab 2 section\n      &lt;/Tab&gt;\n      &lt;Tab eventKey={2} title={&lt;TabTitleText&gt;Tab item 3&lt;/TabTitleText&gt;} aria-label=\&quot;Invisible children tab 3\&quot;&gt;\n        Tab 3 section\n      &lt;/Tab&gt;\n    &lt;/Tabs&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-1229" data-pf-content="true" class="pf-v6-c-content--h3">Toggled tab content</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1230" data-pf-content="true" class="pf-v6-c-content--p">You may control tabs from outside of the tabs component. For example, select the “Hide tab 2” button below to make “Tab item  2” invisible.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1231" data-pf-content="true" class="pf-v6-c-content--p">The tab its content should only be mounted when the tab is visible.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1248" data-pf-content="true" class="pf-v6-c-content--h3">Toggled tab content</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1249" data-pf-content="true" class="pf-v6-c-content--p">You may control tabs from outside of the tabs component. For example, select the “Hide tab 2” button below to make “Tab item  2” invisible.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1250" data-pf-content="true" class="pf-v6-c-content--p">The tab its content should only be mounted when the tab is visible.</p>
 <astro-island uid="QSG8a" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { createRef, Fragment, useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabContent, Button, Divider } from &#39;@patternfly/react-core&#39;;\n\nexport const TabsToggledSeparateContent: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;string | number&gt;(0);\n  const [isTab2Hidden, setIsTab2Hidden] = useState&lt;boolean&gt;(false);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent&lt;any&gt; | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) =&gt; {\n    setActiveTabKey(tabIndex);\n  };\n\n  const contentRef1 = createRef&lt;HTMLElement&gt;();\n  const contentRef2 = createRef&lt;HTMLElement&gt;();\n  const contentRef3 = createRef&lt;HTMLElement&gt;();\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button onClick={() =&gt; setIsTab2Hidden(!isTab2Hidden)}&gt;{isTab2Hidden ? &#39;Show&#39; : &#39;Hide&#39;} tab 2&lt;/Button&gt;\n      &lt;Divider style={{ paddingTop: &#39;1rem&#39;, paddingBottom: &#39;1rem&#39; }} /&gt;\n      &lt;Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        aria-label=\&quot;Tabs in the toggled separate content example\&quot;\n        role=\&quot;region\&quot;\n      &gt;\n        &lt;Tab eventKey={0} title=\&quot;Tab item 1\&quot; tabContentId=\&quot;tab1SectionSeparateContent\&quot; tabContentRef={contentRef1} /&gt;\n        {!isTab2Hidden &amp;&amp; (\n          &lt;Tab eventKey={1} title=\&quot;Tab item 2\&quot; tabContentId=\&quot;tab2SectionSeparateContent\&quot; tabContentRef={contentRef2} /&gt;\n        )}\n        &lt;Tab eventKey={2} title=\&quot;Tab item 3\&quot; tabContentId=\&quot;tab3SectionSeparateContent\&quot; tabContentRef={contentRef3} /&gt;\n      &lt;/Tabs&gt;\n      &lt;div&gt;\n        &lt;TabContent\n          eventKey={0}\n          id=\&quot;tab1SectionSeparateContent\&quot;\n          ref={contentRef1}\n          aria-label=\&quot;This is content for the first toggled separate content tab\&quot;\n        &gt;\n          Tab 1 section\n        &lt;/TabContent&gt;\n        {!isTab2Hidden &amp;&amp; (\n          &lt;TabContent\n            eventKey={1}\n            id=\&quot;tab2SectionSeparateContent\&quot;\n            ref={contentRef2}\n            aria-label=\&quot;This is content for the second toggled separate content tab\&quot;\n            hidden\n          &gt;\n            Tab 2 section\n          &lt;/TabContent&gt;\n        )}\n        &lt;TabContent\n          eventKey={2}\n          id=\&quot;tab3SectionSeparateContent\&quot;\n          ref={contentRef3}\n          aria-label=\&quot;This is content for the third toggled separate content tab\&quot;\n          hidden\n        &gt;\n          Tab 3 section\n        &lt;/TabContent&gt;\n      &lt;/div&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1232" data-pf-content="true" class="pf-v6-c-content--h3">Dynamic tabs</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1264" data-pf-content="true" class="pf-v6-c-content--p">To enable closeable tabs, pass the <code>onClose</code> property to the <code>&lt;Tabs&gt;</code> component. To enable a button that adds new tabs, pass the <code>onAdd</code> property to <code>&lt;Tabs&gt;</code>.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1251" data-pf-content="true" class="pf-v6-c-content--h3">Dynamic tabs</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1283" data-pf-content="true" class="pf-v6-c-content--p">To enable closeable tabs, pass the <code>onClose</code> property to the <code>&lt;Tabs&gt;</code> component. To enable a button that adds new tabs, pass the <code>onAdd</code> property to <code>&lt;Tabs&gt;</code>.</p>
 <astro-island uid="Z2jgbJf" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useRef, useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText } from &#39;@patternfly/react-core&#39;;\n\nexport const TabsDynamic: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;number&gt;(0);\n  const [tabs, setTabs] = useState&lt;string[]&gt;([&#39;Terminal 1&#39;, &#39;Terminal 2&#39;, &#39;Terminal 3&#39;]);\n  const [newTabNumber, setNewTabNumber] = useState&lt;number&gt;(4);\n  const tabComponentRef = useRef&lt;any&gt;(undefined);\n  const firstMount = useRef(true);\n\n  const onClose = (event: any, tabIndex: string | number) =&gt; {\n    const tabIndexNum = tabIndex as number;\n    let nextTabIndex = activeTabKey;\n    if (tabIndexNum &lt; activeTabKey) {\n      // if a preceding tab is closing, keep focus on the new index of the current tab\n      nextTabIndex = activeTabKey - 1 &gt; 0 ? activeTabKey - 1 : 0;\n    } else if (activeTabKey === tabs.length - 1) {\n      // if the closing tab is the last tab, focus the preceding tab\n      nextTabIndex = tabs.length - 2 &gt; 0 ? tabs.length - 2 : 0;\n    }\n    setActiveTabKey(nextTabIndex);\n    setTabs(tabs.filter((tab, index) =&gt; index !== tabIndex));\n  };\n\n  const onAdd = () =&gt; {\n    setTabs([...tabs, `Terminal ${newTabNumber}`]);\n    setActiveTabKey(tabs.length);\n    setNewTabNumber(newTabNumber + 1);\n  };\n\n  useEffect(() =&gt; {\n    if (firstMount.current) {\n      firstMount.current = false;\n      return;\n    } else {\n      const first = tabComponentRef.current.tabList.current.childNodes[activeTabKey];\n      first &amp;&amp; first.firstChild.focus();\n    }\n  }, [tabs]);\n\n  return (\n    &lt;Tabs\n      activeKey={activeTabKey}\n      onSelect={(event: any, tabIndex: string | number) =&gt; setActiveTabKey(tabIndex as number)}\n      onClose={onClose}\n      onAdd={onAdd}\n      aria-label=\&quot;Tabs in the addable/closeable example\&quot;\n      addButtonAriaLabel=\&quot;Add new tab\&quot;\n      role=\&quot;region\&quot;\n      ref={tabComponentRef}\n    &gt;\n      {tabs.map((tab, index) =&gt; (\n        &lt;Tab\n          key={index}\n          eventKey={index}\n          aria-label={`Dynamic ${tab}`}\n          title={&lt;TabTitleText&gt;{tab}&lt;/TabTitleText&gt;}\n          closeButtonAriaLabel={`Close ${tab}`}\n          isCloseDisabled={tabs.length === 1}\n        &gt;\n          {tab}\n        &lt;/Tab&gt;\n      ))}\n    &lt;/Tabs&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-1233" data-pf-content="true" class="pf-v6-c-content--h3">With help action popover</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1234" data-pf-content="true" class="pf-v6-c-content--p">You may add a help action to a tab to provide users with additional context in a popover.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1265" data-pf-content="true" class="pf-v6-c-content--p">To render an action beside the tab content, use the <code>actions</code> property of a <code>&lt;Tab&gt;</code>. Pass a popover and a <code>&lt;TabsAction&gt;</code> component into the <code>actions</code> property.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1252" data-pf-content="true" class="pf-v6-c-content--h3">With help action popover</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1253" data-pf-content="true" class="pf-v6-c-content--p">You may add a help action to a tab to provide users with additional context in a popover.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1284" data-pf-content="true" class="pf-v6-c-content--p">To render an action beside the tab content, use the <code>actions</code> property of a <code>&lt;Tab&gt;</code>. Pass a popover and a <code>&lt;TabsAction&gt;</code> component into the <code>actions</code> property.</p>
 <astro-island uid="UfYtv" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { createRef, useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText, TabAction, Popover } from &#39;@patternfly/react-core&#39;;\nimport HelpIcon from &#39;@patternfly/react-icons/dist/esm/icons/help-icon&#39;;\n\nexport const TabsHelp: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;number&gt;(0);\n\n  const tabs = [&#39;Users&#39;, &#39;Containers&#39;, &#39;Database&#39;, &#39;Disabled&#39;, &#39;ARIA disabled&#39;, &#39;Help disabled&#39;];\n\n  const helpPopover = (header: string, popoverRef: React.RefObject&lt;any&gt;) =&gt; (\n    &lt;Popover\n      headerContent={&lt;div&gt;{header}&lt;/div&gt;}\n      bodyContent={\n        &lt;div&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.\n        &lt;/div&gt;\n      }\n      footerContent=\&quot;Popover footer\&quot;\n      triggerRef={popoverRef}\n    /&gt;\n  );\n\n  return (\n    &lt;Tabs\n      activeKey={activeTabKey}\n      onSelect={(event: any, tabIndex: string | number) =&gt; setActiveTabKey(tabIndex as number)}\n      aria-label=\&quot;Tabs in the help action example\&quot;\n      role=\&quot;region\&quot;\n    &gt;\n      {tabs.map((tab, index) =&gt; {\n        const ref = createRef&lt;HTMLElement&gt;();\n\n        return (\n          &lt;Tab\n            key={index}\n            eventKey={index}\n            aria-label={`Help action content - ${tab}`}\n            title={&lt;TabTitleText&gt;{tab}&lt;/TabTitleText&gt;}\n            {...(tab === &#39;Disabled&#39; &amp;&amp; { isDisabled: true })}\n            {...(tab === &#39;ARIA disabled&#39; &amp;&amp; { isAriaDisabled: true })}\n            actions={\n              &lt;&gt;\n                &lt;TabAction\n                  aria-label={`Help action for ${tab}`}\n                  ref={ref}\n                  {...(tab === &#39;Help disabled&#39; &amp;&amp; { isDisabled: true })}\n                &gt;\n                  &lt;HelpIcon /&gt;\n                &lt;/TabAction&gt;\n                {helpPopover(`Help popover for ${tab}`, ref)}\n              &lt;/&gt;\n            }\n          &gt;\n            {tab}\n          &lt;/Tab&gt;\n        );\n      })}\n    &lt;/Tabs&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-1235" data-pf-content="true" class="pf-v6-c-content--h3">With help and close actions</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1266" data-pf-content="true" class="pf-v6-c-content--p">To add multiple actions to a tab, create a <code>&lt;TabAction&gt;</code> component for each action.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1236" data-pf-content="true" class="pf-v6-c-content--p">The following example passes in both help popover and close actions.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1254" data-pf-content="true" class="pf-v6-c-content--h3">With help and close actions</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1285" data-pf-content="true" class="pf-v6-c-content--p">To add multiple actions to a tab, create a <code>&lt;TabAction&gt;</code> component for each action.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1255" data-pf-content="true" class="pf-v6-c-content--p">The following example passes in both help popover and close actions.</p>
-<astro-island uid="15i6ri" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { createRef, useEffect, useRef, useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText, Popover, TabAction } from &#39;@patternfly/react-core&#39;;\nimport HelpIcon from &#39;@patternfly/react-icons/dist/esm/icons/help-icon&#39;;\nimport TimesIcon from &#39;@patternfly/react-icons/dist/esm/icons/times-icon&#39;;\n\nexport const TabsHelpAndClose: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;number&gt;(0);\n  const [tabs, setTabs] = useState&lt;string[]&gt;([&#39;Terminal 1&#39;, &#39;Terminal 2&#39;, &#39;Terminal 3&#39;]);\n  const tabComponentRef = useRef&lt;any&gt;(undefined);\n  const firstMount = useRef(true);\n\n  const onClose = (event: any, tabIndex: string | number) =&gt; {\n    const tabIndexNum = tabIndex as number;\n    let nextTabIndex = activeTabKey;\n    if (tabIndexNum &lt; activeTabKey) {\n      // if a preceding tab is closing, keep focus on the new index of the current tab\n      nextTabIndex = activeTabKey - 1 &gt; 0 ? activeTabKey - 1 : 0;\n    } else if (activeTabKey === tabs.length - 1) {\n      // if the closing tab is the last tab, focus the preceding tab\n      nextTabIndex = tabs.length - 2 &gt; 0 ? tabs.length - 2 : 0;\n    }\n    setActiveTabKey(nextTabIndex);\n    setTabs(tabs.filter((tab, index) =&gt; index !== tabIndex));\n  };\n\n  const helpPopover = (header: string, popoverRef: React.RefObject&lt;any&gt;) =&gt; (\n    &lt;Popover\n      headerContent={&lt;div&gt;{header}&lt;/div&gt;}\n      bodyContent={\n        &lt;div&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.\n        &lt;/div&gt;\n      }\n      footerContent=\&quot;Popover footer\&quot;\n      triggerRef={popoverRef}\n    /&gt;\n  );\n\n  useEffect(() =&gt; {\n    if (firstMount.current) {\n      firstMount.current = false;\n      return;\n    } else {\n      const first = tabComponentRef.current.tabList.current.childNodes[activeTabKey];\n      first &amp;&amp; first.firstChild.focus();\n    }\n  }, [tabs]);\n\n  return (\n    &lt;Tabs\n      activeKey={activeTabKey}\n      onSelect={(event: any, tabIndex: string | number) =&gt; setActiveTabKey(tabIndex as number)}\n      aria-label=\&quot;Tabs in the help enabled and closeable example\&quot;\n      role=\&quot;region\&quot;\n      ref={tabComponentRef}\n    &gt;\n      {tabs.map((tab, index) =&gt; {\n        const ref = createRef&lt;HTMLElement&gt;();\n\n        return (\n          &lt;Tab\n            key={index}\n            eventKey={index}\n            aria-label={`Help action and closable content - ${tab}`}\n            title={&lt;TabTitleText&gt;{tab}&lt;/TabTitleText&gt;}\n            actions={\n              &lt;&gt;\n                &lt;TabAction aria-label={`Help for ${tab}`} ref={ref}&gt;\n                  &lt;HelpIcon /&gt;\n                &lt;/TabAction&gt;\n                &lt;TabAction\n                  aria-label={`Close ${tab}`}\n                  onClick={(e) =&gt; onClose(e, index)}\n                  isDisabled={tabs.length === 1}\n                &gt;\n                  &lt;TimesIcon /&gt;\n                &lt;/TabAction&gt;\n                {helpPopover(`Help popover for ${tab}`, ref)}\n              &lt;/&gt;\n            }\n          &gt;\n            {tab}\n          &lt;/Tab&gt;\n        );\n      })}\n    &lt;/Tabs&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="Z1sWJBt" component-url="/_astro/PropsTables.DC2ugmn8.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;Tabs&quot;],[0,&quot;Tab&quot;],[0,&quot;TabContent&quot;],[0,&quot;TabContentBody&quot;],[0,&quot;TabTitleText&quot;],[0,&quot;TabTitleIcon&quot;],[0,&quot;horizontalOverflowObject&quot;],[0,&quot;TabAction&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/tabs/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-1195" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
+<astro-island uid="15i6ri" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { createRef, useEffect, useRef, useState } from &#39;react&#39;;\nimport { Tabs, Tab, TabTitleText, Popover, TabAction } from &#39;@patternfly/react-core&#39;;\nimport HelpIcon from &#39;@patternfly/react-icons/dist/esm/icons/help-icon&#39;;\nimport TimesIcon from &#39;@patternfly/react-icons/dist/esm/icons/times-icon&#39;;\n\nexport const TabsHelpAndClose: React.FunctionComponent = () =&gt; {\n  const [activeTabKey, setActiveTabKey] = useState&lt;number&gt;(0);\n  const [tabs, setTabs] = useState&lt;string[]&gt;([&#39;Terminal 1&#39;, &#39;Terminal 2&#39;, &#39;Terminal 3&#39;]);\n  const tabComponentRef = useRef&lt;any&gt;(undefined);\n  const firstMount = useRef(true);\n\n  const onClose = (event: any, tabIndex: string | number) =&gt; {\n    const tabIndexNum = tabIndex as number;\n    let nextTabIndex = activeTabKey;\n    if (tabIndexNum &lt; activeTabKey) {\n      // if a preceding tab is closing, keep focus on the new index of the current tab\n      nextTabIndex = activeTabKey - 1 &gt; 0 ? activeTabKey - 1 : 0;\n    } else if (activeTabKey === tabs.length - 1) {\n      // if the closing tab is the last tab, focus the preceding tab\n      nextTabIndex = tabs.length - 2 &gt; 0 ? tabs.length - 2 : 0;\n    }\n    setActiveTabKey(nextTabIndex);\n    setTabs(tabs.filter((tab, index) =&gt; index !== tabIndex));\n  };\n\n  const helpPopover = (header: string, popoverRef: React.RefObject&lt;any&gt;) =&gt; (\n    &lt;Popover\n      headerContent={&lt;div&gt;{header}&lt;/div&gt;}\n      bodyContent={\n        &lt;div&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.\n        &lt;/div&gt;\n      }\n      footerContent=\&quot;Popover footer\&quot;\n      triggerRef={popoverRef}\n    /&gt;\n  );\n\n  useEffect(() =&gt; {\n    if (firstMount.current) {\n      firstMount.current = false;\n      return;\n    } else {\n      const first = tabComponentRef.current.tabList.current.childNodes[activeTabKey];\n      first &amp;&amp; first.firstChild.focus();\n    }\n  }, [tabs]);\n\n  return (\n    &lt;Tabs\n      activeKey={activeTabKey}\n      onSelect={(event: any, tabIndex: string | number) =&gt; setActiveTabKey(tabIndex as number)}\n      aria-label=\&quot;Tabs in the help enabled and closeable example\&quot;\n      role=\&quot;region\&quot;\n      ref={tabComponentRef}\n    &gt;\n      {tabs.map((tab, index) =&gt; {\n        const ref = createRef&lt;HTMLElement&gt;();\n\n        return (\n          &lt;Tab\n            key={index}\n            eventKey={index}\n            aria-label={`Help action and closable content - ${tab}`}\n            title={&lt;TabTitleText&gt;{tab}&lt;/TabTitleText&gt;}\n            actions={\n              &lt;&gt;\n                &lt;TabAction aria-label={`Help for ${tab}`} ref={ref}&gt;\n                  &lt;HelpIcon /&gt;\n                &lt;/TabAction&gt;\n                &lt;TabAction\n                  aria-label={`Close ${tab}`}\n                  onClick={(e) =&gt; onClose(e, index)}\n                  isDisabled={tabs.length === 1}\n                &gt;\n                  &lt;TimesIcon /&gt;\n                &lt;/TabAction&gt;\n                {helpPopover(`Help popover for ${tab}`, ref)}\n              &lt;/&gt;\n            }\n          &gt;\n            {tab}\n          &lt;/Tab&gt;\n        );\n      })}\n    &lt;/Tabs&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="Z1sWJBt" component-url="/_astro/PropsTables.DC2ugmn8.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;Tabs&quot;],[0,&quot;Tab&quot;],[0,&quot;TabContent&quot;],[0,&quot;TabContentBody&quot;],[0,&quot;TabTitleText&quot;],[0,&quot;TabTitleIcon&quot;],[0,&quot;horizontalOverflowObject&quot;],[0,&quot;TabAction&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/tabs/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-1214" 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="Z1Wq1PW" component-url="/_astro/CSSTable.DRfZMeKo.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;autoLinkHeader&quot;:[0,false],&quot;cssPrefix&quot;:[0,&quot;pf-v6-c-tabs&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>