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/data-list/html/index.html CHANGED Viewed

@@ -42,11 +42,11 @@
 	animation-fill-mode: both;
 	animation-name: astroFadeIn; }</style><style>[data-astro-transition-scope="astro-2e6ke2uy-4"] { view-transition-name: astro-2e6ke2uy-4; }@layer astro { ::view-transition-old(astro-2e6ke2uy-4) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-2e6ke2uy-4) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-2e6ke2uy-4) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
 			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
-			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page">  <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="Z70K3H" 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-394"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="JoTkv" prefix="r7" component-url="/_astro/Toolbar.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-132"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-395"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-396"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-132"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="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/data-list/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/data-list/html"> HTML </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/data-list/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-2172" 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-2173" data-pf-content="true" class="pf-v6-c-content--h3">Basic</h3>
+			[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="jEV6F" 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-400"><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="dVAdk" 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-134"><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-401"><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-402"><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-134"><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/data-list/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/data-list/html"> HTML </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/data-list/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-2201" 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-2202" data-pf-content="true" class="pf-v6-c-content--h3">Basic</h3>
 <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="23pqgF" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0],&quot;html&quot;:[0,&quot;&lt;ul\n  class=\&quot;pf-v6-c-data-list\&quot;\n  role=\&quot;list\&quot;\n  aria-label=\&quot;Basic data list example\&quot;\n  id=\&quot;data-list-basic\&quot;\n&gt;\n  &lt;li class=\&quot;pf-v6-c-data-list__item\&quot; aria-labelledby=\&quot;data-list-basic-item-1\&quot;&gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span id=\&quot;data-list-basic-item-1\&quot;&gt;Primary content&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Secondary content&lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n\n  &lt;li class=\&quot;pf-v6-c-data-list__item\&quot; aria-labelledby=\&quot;data-list-basic-item-2\&quot;&gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell pf-m-no-fill\&quot;&gt;\n          &lt;span id=\&quot;data-list-basic-item-2\&quot;&gt;Secondary content (pf-m-no-fill)&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div\n          class=\&quot;pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right\&quot;\n        &gt;Secondary content (pf-m-align-right pf-m-no-fill)&lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n&lt;/ul&gt;\n&quot;]}" 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-2174" data-pf-content="true" class="pf-v6-c-content--h3">Accessibility</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2203" data-pf-content="true" class="pf-v6-c-content--h3">Accessibility</h3>
@@ -78,7 +78,7 @@
 <table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>role=&quot;list&quot;</code></td><td><code>.pf-v6-c-data-list</code></td><td>Indicates that the data list is a list. <strong>Required</strong></td></tr><tr><td><code>aria-label</code></td><td><code>.pf-v6-c-data-list</code></td><td>Provides an accessible name for the data list. <strong>Required</strong></td></tr><tr><td><code>aria-labelledby</code></td><td><code>.pf-v6-c-data-list__item</code></td><td>Provides an accessible description for data list item. <strong>Required</strong></td></tr><tr><td><code>id</code></td><td><code>.pf-v6-c-data-list__cell</code>, <code>.pf-v6-c-data-list__cell *</code></td><td>Provides a reference for data list item description. <strong>Required</strong></td></tr></tbody></table>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2175" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2204" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
@@ -135,15 +135,15 @@
 <table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-data-list</code></td><td><code>&lt;ul&gt;</code></td><td>Initiates a data list. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-data-list__item</code></td><td><code>&lt;li&gt;</code></td><td>Initiates a data list item. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-data-list__item-row</code></td><td><code>&lt;div&gt;</code></td><td>Initiates a data list item row. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-data-list__item-content</code></td><td><code>&lt;div&gt;</code></td><td>Initiates a container for data list content. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-data-list__cell</code></td><td><code>*</code></td><td>Initiates a data list content cell. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-data-list__cell-text</code></td><td><code>&lt;span&gt;</code></td><td>Initiates a data list content cell text element.</td></tr><tr><td><code>.pf-m-align-left</code></td><td><code>.pf-v6-c-data-list__cell</code></td><td>Modifies a data list cell to not grow and align-left when its the first data-list__cell element.</td></tr><tr><td><code>.pf-m-no-fill</code></td><td><code>.pf-v6-c-data-list__cell</code></td><td>Modifies a data list cell to not fill the available horizontal space.</td></tr><tr><td><code>.pf-m-align-right</code></td><td><code>.pf-v6-c-data-list__cell</code></td><td>Modifies a data list cell to align-right.</td></tr></tbody></table>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2176" data-pf-content="true" class="pf-v6-c-content--h3">With headings</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2205" data-pf-content="true" class="pf-v6-c-content--h3">With headings</h3>
 <astro-island uid="YOcgo" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0],&quot;html&quot;:[0,&quot;&lt;ul\n  class=\&quot;pf-v6-c-data-list\&quot;\n  role=\&quot;list\&quot;\n  aria-label=\&quot;With headings data list example\&quot;\n  id=\&quot;data-list-with-headings\&quot;\n&gt;\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-with-headings-item-1\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;h2 id=\&quot;data-list-with-headings-item-1\&quot;&gt;Primary content&lt;/h2&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Secondary content&lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-with-headings-item-2\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell pf-m-no-fill\&quot;&gt;\n          &lt;h2\n            id=\&quot;data-list-with-headings-item-2\&quot;\n          &gt;Secondary content (pf-m-no-fill)&lt;/h2&gt;\n        &lt;/div&gt;\n        &lt;div\n          class=\&quot;pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right\&quot;\n        &gt;Secondary content (pf-m-align-right pf-m-no-fill)&lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n&lt;/ul&gt;\n&quot;]}" 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-2177" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2210" data-pf-content="true" class="pf-v6-c-content--p">When a list item includes more than one block of content, it can be difficult for some screen reader users to discern where one list item ends and the next one begins. A simple way to provide better separation of list items is to define the primary content section as a heading. Headings are useful for indicating a new section of contents, but also provide an easy way for screen reader users to navigate to specific sections on the page. The heading level should be based on the context in which the DataList component is being used. For example, if the heading for the section that contains the DataList is a level 3, then <code>h4</code> elements should be used in the DataList list items.</p>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2178" data-pf-content="true" class="pf-v6-c-content--h3">Checkboxes, actions, and additional cells</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2206" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2239" data-pf-content="true" class="pf-v6-c-content--p">When a list item includes more than one block of content, it can be difficult for some screen reader users to discern where one list item ends and the next one begins. A simple way to provide better separation of list items is to define the primary content section as a heading. Headings are useful for indicating a new section of contents, but also provide an easy way for screen reader users to navigate to specific sections on the page. The heading level should be based on the context in which the DataList component is being used. For example, if the heading for the section that contains the DataList is a level 3, then <code>h4</code> elements should be used in the DataList list items.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2207" data-pf-content="true" class="pf-v6-c-content--h3">Checkboxes, actions, and additional cells</h3>
 <astro-island uid="Z2jN6Cv" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0],&quot;html&quot;:[0,&quot;&lt;ul\n  class=\&quot;pf-v6-c-data-list\&quot;\n  role=\&quot;list\&quot;\n  aria-label=\&quot;Checkbox and action data list example\&quot;\n  id=\&quot;data-list-checkboxes-actions-addl-cells\&quot;\n&gt;\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-checkboxes-actions-addl-cells-item-1\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__check\&quot;&gt;\n          &lt;label\n            class=\&quot;pf-v6-c-check pf-m-standalone\&quot;\n            for=\&quot;data-list-checkboxes-actions-addl-cells-item-1&amp;quot;-input\&quot;\n          &gt;\n            &lt;input\n              class=\&quot;pf-v6-c-check__input\&quot;\n              type=\&quot;checkbox\&quot;\n              id=\&quot;data-list-checkboxes-actions-addl-cells-item-1&amp;quot;-input\&quot;\n              name=\&quot;data-list-checkboxes-actions-addl-cells-item-1&amp;quot;-input\&quot;\n              aria-label=\&quot;Standalone check\&quot;\n            /&gt;\n          &lt;/label&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span\n            id=\&quot;data-list-checkboxes-actions-addl-cells-item-1\&quot;\n          &gt;Primary content&lt;/span&gt; Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.\n        &lt;/div&gt;\n        &lt;div\n          class=\&quot;pf-v6-c-data-list__cell\&quot;\n        &gt;Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Tertiary Content&lt;/span&gt; Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;More Content&lt;/span&gt; Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;More Content&lt;/span&gt; Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-action\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-menu-toggle pf-m-plain\&quot;\n          type=\&quot;button\&quot;\n          aria-expanded=\&quot;false\&quot;\n          aria-label=\&quot;Menu toggle\&quot;\n          id=\&quot;data-list-checkboxes-actions-addl-cells-item-1-menu-toggle\&quot;\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-menu-toggle__icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-ellipsis-v\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-checkboxes-actions-addl-cells-item-2\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__check\&quot;&gt;\n          &lt;label\n            class=\&quot;pf-v6-c-check pf-m-standalone\&quot;\n            for=\&quot;data-list-checkboxes-actions-addl-cells-item-2&amp;quot;-input\&quot;\n          &gt;\n            &lt;input\n              class=\&quot;pf-v6-c-check__input\&quot;\n              type=\&quot;checkbox\&quot;\n              id=\&quot;data-list-checkboxes-actions-addl-cells-item-2&amp;quot;-input\&quot;\n              name=\&quot;data-list-checkboxes-actions-addl-cells-item-2&amp;quot;-input\&quot;\n              aria-label=\&quot;Standalone check\&quot;\n            /&gt;\n          &lt;/label&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span\n            id=\&quot;data-list-checkboxes-actions-addl-cells-item-2\&quot;\n          &gt;Primary content - lorem ipsum&lt;/span&gt; dolor sit amet, consectetur adipisicing elit, sed do eiusmod.\n        &lt;/div&gt;\n        &lt;div\n          class=\&quot;pf-v6-c-data-list__cell\&quot;\n        &gt;Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.&lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-action pf-m-hidden-on-lg\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-menu-toggle pf-m-plain\&quot;\n          type=\&quot;button\&quot;\n          aria-expanded=\&quot;false\&quot;\n          aria-label=\&quot;Menu toggle\&quot;\n          id=\&quot;data-list-checkboxes-actions-addl-cells-item-2-menu-toggle\&quot;\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-menu-toggle__icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-ellipsis-v\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n      &lt;div\n        class=\&quot;pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-lg\&quot;\n      &gt;\n        &lt;button class=\&quot;pf-v6-c-button pf-m-primary\&quot; type=\&quot;button\&quot;&gt;\n          &lt;span class=\&quot;pf-v6-c-button__text\&quot;&gt;Primary&lt;/span&gt;\n        &lt;/button&gt;\n        &lt;button class=\&quot;pf-v6-c-button pf-m-secondary\&quot; type=\&quot;button\&quot;&gt;\n          &lt;span class=\&quot;pf-v6-c-button__text\&quot;&gt;Secondary&lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-checkboxes-actions-addl-cells-item-3\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__check\&quot;&gt;\n          &lt;label\n            class=\&quot;pf-v6-c-check pf-m-standalone\&quot;\n            for=\&quot;data-list-checkboxes-actions-addl-cells-item-3&amp;quot;-input\&quot;\n          &gt;\n            &lt;input\n              class=\&quot;pf-v6-c-check__input\&quot;\n              type=\&quot;checkbox\&quot;\n              id=\&quot;data-list-checkboxes-actions-addl-cells-item-3&amp;quot;-input\&quot;\n              name=\&quot;data-list-checkboxes-actions-addl-cells-item-3&amp;quot;-input\&quot;\n              aria-label=\&quot;Standalone check\&quot;\n            /&gt;\n          &lt;/label&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span\n            id=\&quot;data-list-checkboxes-actions-addl-cells-item-3\&quot;\n          &gt;Primary content - lorem ipsum&lt;/span&gt; dolor sit amet, consectetur adipisicing elit, sed do eiusmod.\n        &lt;/div&gt;\n        &lt;div\n          class=\&quot;pf-v6-c-data-list__cell\&quot;\n        &gt;Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.&lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-action pf-m-hidden-on-lg\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-menu-toggle pf-m-plain\&quot;\n          type=\&quot;button\&quot;\n          aria-expanded=\&quot;false\&quot;\n          aria-label=\&quot;Menu toggle\&quot;\n          id=\&quot;data-list-checkboxes-actions-addl-cells-item-3-menu-toggle\&quot;\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-menu-toggle__icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-ellipsis-v\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n      &lt;div\n        class=\&quot;pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-xl\&quot;\n      &gt;\n        &lt;button class=\&quot;pf-v6-c-button pf-m-primary\&quot; type=\&quot;button\&quot;&gt;\n          &lt;span class=\&quot;pf-v6-c-button__text\&quot;&gt;Primary&lt;/span&gt;\n        &lt;/button&gt;\n        &lt;button class=\&quot;pf-v6-c-button pf-m-secondary\&quot; type=\&quot;button\&quot;&gt;\n          &lt;span class=\&quot;pf-v6-c-button__text\&quot;&gt;Secondary&lt;/span&gt;\n        &lt;/button&gt;\n        &lt;button class=\&quot;pf-v6-c-button pf-m-secondary\&quot; type=\&quot;button\&quot;&gt;\n          &lt;span class=\&quot;pf-v6-c-button__text\&quot;&gt;Secondary&lt;/span&gt;\n        &lt;/button&gt;\n        &lt;button class=\&quot;pf-v6-c-button pf-m-secondary\&quot; type=\&quot;button\&quot;&gt;\n          &lt;span class=\&quot;pf-v6-c-button__text\&quot;&gt;Secondary&lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n&lt;/ul&gt;\n&quot;]}" 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-2179" data-pf-content="true" class="pf-v6-c-content--h3">Accessibility</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2208" data-pf-content="true" class="pf-v6-c-content--h3">Accessibility</h3>
@@ -175,7 +175,7 @@
 <table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>aria-label=&quot;[descriptive text]&quot;</code></td><td><code>.pf-v6-c-data-list__action</code> &gt; <code>.pf-v6-c-button</code></td><td>Provides an accessible label buttons. <strong>Required</strong></td></tr><tr><td><code>aria-labelledby=&quot;{title_cell_id}&quot;</code></td><td><code>.pf-v6-c-data-list__check</code> &gt; <code>.pf-v6-c-check__input</code></td><td>Creates an accessible label for the checkbox based on the title cell. <strong>Required</strong></td></tr><tr><td><code>aria-labelledby=&quot;{title_cell_id} {data_list_action_id}&quot;</code></td><td><code>.pf-v6-c-data-list__action</code> &gt; <code>.pf-v6-c-button</code></td><td>Creates an accessible label for the action button using the title cell and button label <strong>Required</strong></td></tr><tr><td><code>id</code></td><td><code>.pf-v6-c-data-list__cell &gt; *</code>, <code>.pf-v6-c-data-list__check</code> &gt; <code>.pf-v6-c-check__input</code>, <code>.pf-v6-c-data-list__action</code> &gt; <code>.pf-v6-c-button</code></td><td>Provides a reference for interactive elements. <strong>Required</strong></td></tr></tbody></table>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2180" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2209" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
@@ -216,20 +216,20 @@
-<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-data-list__item-control</code></td><td><code>&lt;div&gt;</code></td><td>Initiates a container for data list controls. For example, add <code>.pf-v6-c-data-list__check</code> here. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-data-list__item-action</code></td><td><code>&lt;div&gt;</code></td><td>Initiates a container for the data list actions. For example, add <code>.pf-v6-c-data-list__action</code> here. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-data-list__check</code></td><td><code>&lt;div&gt;</code></td><td>Initiates a data list check cell. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-data-list__action</code></td><td><code>&lt;div&gt;</code></td><td>Initiates a data list action button cell. <strong>Required</strong></td></tr><tr><td><code>.pf-m-hidden{-on-[breakpoint]}</code></td><td><code>.pf-v6-c-data-list__item-action</code></td><td>Hides an actions container at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2181" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>, or hides it at all breakpoints with <code>.pf-m-hidden</code>.</td></tr><tr><td><code>.pf-m-visible{-on-[breakpoint]}</code></td><td><code>.pf-v6-c-data-list__item-action</code></td><td>Shows an actions container at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2182" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>.</td></tr></tbody></table>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2183" data-pf-content="true" class="pf-v6-c-content--h3">Expandable</h3>
+<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-data-list__item-control</code></td><td><code>&lt;div&gt;</code></td><td>Initiates a container for data list controls. For example, add <code>.pf-v6-c-data-list__check</code> here. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-data-list__item-action</code></td><td><code>&lt;div&gt;</code></td><td>Initiates a container for the data list actions. For example, add <code>.pf-v6-c-data-list__action</code> here. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-data-list__check</code></td><td><code>&lt;div&gt;</code></td><td>Initiates a data list check cell. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-data-list__action</code></td><td><code>&lt;div&gt;</code></td><td>Initiates a data list action button cell. <strong>Required</strong></td></tr><tr><td><code>.pf-m-hidden{-on-[breakpoint]}</code></td><td><code>.pf-v6-c-data-list__item-action</code></td><td>Hides an actions container at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2210" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>, or hides it at all breakpoints with <code>.pf-m-hidden</code>.</td></tr><tr><td><code>.pf-m-visible{-on-[breakpoint]}</code></td><td><code>.pf-v6-c-data-list__item-action</code></td><td>Shows an actions container at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2211" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>.</td></tr></tbody></table>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2212" data-pf-content="true" class="pf-v6-c-content--h3">Expandable</h3>
 <astro-island uid="1WBEQw" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0],&quot;html&quot;:[0,&quot;&lt;ul\n  class=\&quot;pf-v6-c-data-list\&quot;\n  role=\&quot;list\&quot;\n  aria-label=\&quot;Expandable data list example\&quot;\n  id=\&quot;data-list-expandable\&quot;\n&gt;\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item pf-m-expanded\&quot;\n    aria-labelledby=\&quot;data-list-expandable-item-1\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__toggle\&quot;&gt;\n          &lt;button\n            class=\&quot;pf-v6-c-button pf-m-plain\&quot;\n            type=\&quot;button\&quot;\n            aria-labelledby=\&quot;data-list-expandable-toggle1 data-list-expandable-item1\&quot;\n            id=\&quot;data-list-expandable-toggle1\&quot;\n            aria-label=\&quot;Toggle details for\&quot;\n            aria-expanded=\&quot;true\&quot;\n            aria-controls=\&quot;data-list-expandable-content1\&quot;\n          &gt;\n            &lt;span class=\&quot;pf-v6-c-button__icon pf-m-start\&quot;&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__toggle-icon\&quot;&gt;\n                &lt;i class=\&quot;fas fa-angle-right\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n              &lt;/div&gt;\n            &lt;/span&gt;\n          &lt;/button&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell pf-m-icon\&quot;&gt;\n          &lt;i class=\&quot;fas fa-code-branch\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span id=\&quot;data-list-expandable-item-1\&quot;&gt;Primary content&lt;/span&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n          &lt;a href=\&quot;#\&quot;&gt;link&lt;/a&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-action\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-menu-toggle pf-m-plain\&quot;\n          type=\&quot;button\&quot;\n          aria-expanded=\&quot;false\&quot;\n          aria-label=\&quot;Menu toggle\&quot;\n          id=\&quot;data-list-expandable-item-1-menu-toggle\&quot;\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-menu-toggle__icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-ellipsis-v\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;section\n      class=\&quot;pf-v6-c-data-list__expandable-content\&quot;\n      id=\&quot;data-list-expandable-content1\&quot;\n      aria-label=\&quot;Expandable primary content details\&quot;\n    &gt;\n      &lt;div\n        class=\&quot;pf-v6-c-data-list__expandable-content-body\&quot;\n      &gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/div&gt;\n    &lt;/section&gt;\n  &lt;/li&gt;\n\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-expandable-item-2\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__toggle\&quot;&gt;\n          &lt;button\n            class=\&quot;pf-v6-c-button pf-m-plain\&quot;\n            type=\&quot;button\&quot;\n            aria-labelledby=\&quot;data-list-expandable-toggle2 data-list-expandable-item2\&quot;\n            id=\&quot;data-list-expandable-toggle2\&quot;\n            aria-label=\&quot;Toggle details for\&quot;\n            aria-expanded=\&quot;false\&quot;\n            aria-controls=\&quot;data-list-expandable-content2\&quot;\n          &gt;\n            &lt;span class=\&quot;pf-v6-c-button__icon pf-m-start\&quot;&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__toggle-icon\&quot;&gt;\n                &lt;i class=\&quot;fas fa-angle-right\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n              &lt;/div&gt;\n            &lt;/span&gt;\n          &lt;/button&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;div id=\&quot;data-list-expandable-item-2\&quot;&gt;Secondary content&lt;/div&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet.&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-action\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-menu-toggle pf-m-plain\&quot;\n          type=\&quot;button\&quot;\n          aria-expanded=\&quot;false\&quot;\n          aria-label=\&quot;Menu toggle\&quot;\n          id=\&quot;data-list-expandable-item-2-menu-toggle\&quot;\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-menu-toggle__icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-ellipsis-v\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;section\n      class=\&quot;pf-v6-c-data-list__expandable-content\&quot;\n      id=\&quot;data-list-expandable-content2\&quot;\n      aria-label=\&quot;Expandable secondary content details\&quot;\n      hidden\n    &gt;\n      &lt;div\n        class=\&quot;pf-v6-c-data-list__expandable-content-body\&quot;\n      &gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/div&gt;\n    &lt;/section&gt;\n  &lt;/li&gt;\n\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item pf-m-expanded\&quot;\n    aria-labelledby=\&quot;data-list-expandable-item-3\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__toggle\&quot;&gt;\n          &lt;button\n            class=\&quot;pf-v6-c-button pf-m-plain\&quot;\n            type=\&quot;button\&quot;\n            aria-labelledby=\&quot;data-list-expandable-toggle3 data-list-expandable-item3\&quot;\n            id=\&quot;data-list-expandable-toggle3\&quot;\n            aria-label=\&quot;Toggle details for\&quot;\n            aria-expanded=\&quot;true\&quot;\n            aria-controls=\&quot;data-list-expandable-content3\&quot;\n          &gt;\n            &lt;span class=\&quot;pf-v6-c-button__icon pf-m-start\&quot;&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__toggle-icon\&quot;&gt;\n                &lt;i class=\&quot;fas fa-angle-right\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n              &lt;/div&gt;\n            &lt;/span&gt;\n          &lt;/button&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell pf-m-icon\&quot;&gt;\n          &lt;i class=\&quot;fas fa-code-branch\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;div id=\&quot;data-list-expandable-item-3\&quot;&gt;Tertiary content&lt;/div&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet.&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-action\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-menu-toggle pf-m-plain\&quot;\n          type=\&quot;button\&quot;\n          aria-expanded=\&quot;false\&quot;\n          aria-label=\&quot;Menu toggle\&quot;\n          id=\&quot;data-list-expandable-item-3-menu-toggle\&quot;\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-menu-toggle__icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-ellipsis-v\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;section\n      class=\&quot;pf-v6-c-data-list__expandable-content\&quot;\n      id=\&quot;data-list-expandable-content3\&quot;\n      aria-label=\&quot;Expandable tertiary content details\&quot;\n    &gt;\n      &lt;div\n        class=\&quot;pf-v6-c-data-list__expandable-content-body pf-m-no-padding\&quot;\n      &gt;This expanded section has no padding.&lt;/div&gt;\n    &lt;/section&gt;\n  &lt;/li&gt;\n&lt;/ul&gt;\n&quot;]}" 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-2184" data-pf-content="true" class="pf-v6-c-content--h3">Expandable compact</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2213" data-pf-content="true" class="pf-v6-c-content--h3">Expandable compact</h3>
 <astro-island uid="1qduyt" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0],&quot;html&quot;:[0,&quot;&lt;ul\n  class=\&quot;pf-v6-c-data-list pf-m-compact\&quot;\n  role=\&quot;list\&quot;\n  aria-label=\&quot;Expandable data list example\&quot;\n  id=\&quot;data-list-expandable-compact\&quot;\n&gt;\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item pf-m-expanded\&quot;\n    aria-labelledby=\&quot;data-list-expandable-compact-item-1\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__toggle\&quot;&gt;\n          &lt;button\n            class=\&quot;pf-v6-c-button pf-m-plain\&quot;\n            type=\&quot;button\&quot;\n            aria-labelledby=\&quot;data-list-expandable-compact-toggle1 data-list-expandable-compact-item1\&quot;\n            id=\&quot;data-list-expandable-compact-toggle1\&quot;\n            aria-label=\&quot;Toggle details for\&quot;\n            aria-expanded=\&quot;true\&quot;\n            aria-controls=\&quot;data-list-expandable-compact-content1\&quot;\n          &gt;\n            &lt;span class=\&quot;pf-v6-c-button__icon pf-m-start\&quot;&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__toggle-icon\&quot;&gt;\n                &lt;i class=\&quot;fas fa-angle-right\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n              &lt;/div&gt;\n            &lt;/span&gt;\n          &lt;/button&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell pf-m-icon\&quot;&gt;\n          &lt;i class=\&quot;fas fa-code-branch\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;div id=\&quot;data-list-expandable-compact-item-1\&quot;&gt;Primary content&lt;/div&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n          &lt;a href=\&quot;#\&quot;&gt;link&lt;/a&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-action\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-menu-toggle pf-m-plain pf-m-small\&quot;\n          type=\&quot;button\&quot;\n          aria-expanded=\&quot;false\&quot;\n          aria-label=\&quot;Menu toggle\&quot;\n          id=\&quot;data-list-expandable-compact-item-1-menu-toggle\&quot;\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-menu-toggle__icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-ellipsis-v\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;section\n      class=\&quot;pf-v6-c-data-list__expandable-content\&quot;\n      id=\&quot;data-list-expandable-compact-content1\&quot;\n      aria-label=\&quot;Expandable compact primary content details\&quot;\n    &gt;\n      &lt;div\n        class=\&quot;pf-v6-c-data-list__expandable-content-body\&quot;\n      &gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/div&gt;\n    &lt;/section&gt;\n  &lt;/li&gt;\n\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-expandable-compact-item-2\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__toggle\&quot;&gt;\n          &lt;button\n            class=\&quot;pf-v6-c-button pf-m-plain\&quot;\n            type=\&quot;button\&quot;\n            aria-labelledby=\&quot;data-list-expandable-compact-toggle2 data-list-expandable-compact-item2\&quot;\n            id=\&quot;data-list-expandable-compact-toggle2\&quot;\n            aria-label=\&quot;Toggle details for\&quot;\n            aria-expanded=\&quot;false\&quot;\n            aria-controls=\&quot;data-list-expandable-compact-content2\&quot;\n          &gt;\n            &lt;span class=\&quot;pf-v6-c-button__icon pf-m-start\&quot;&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__toggle-icon\&quot;&gt;\n                &lt;i class=\&quot;fas fa-angle-right\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n              &lt;/div&gt;\n            &lt;/span&gt;\n          &lt;/button&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell pf-m-icon\&quot;&gt;\n          &lt;i class=\&quot;fas fa-code-branch\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span id=\&quot;data-list-expandable-compact-item-2\&quot;&gt;Secondary content&lt;/span&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet.&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-action\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-menu-toggle pf-m-plain pf-m-small\&quot;\n          type=\&quot;button\&quot;\n          aria-expanded=\&quot;false\&quot;\n          aria-label=\&quot;Menu toggle\&quot;\n          id=\&quot;data-list-expandable-compact-item-2-menu-toggle\&quot;\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-menu-toggle__icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-ellipsis-v\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;section\n      class=\&quot;pf-v6-c-data-list__expandable-content\&quot;\n      id=\&quot;data-list-expandable-compact-content2\&quot;\n      aria-label=\&quot;Expandable compact secondary content details\&quot;\n      hidden\n    &gt;\n      &lt;div\n        class=\&quot;pf-v6-c-data-list__expandable-content-body\&quot;\n      &gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/div&gt;\n    &lt;/section&gt;\n  &lt;/li&gt;\n\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item pf-m-expanded\&quot;\n    aria-labelledby=\&quot;data-list-expandable-compact-item-3\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__toggle\&quot;&gt;\n          &lt;button\n            class=\&quot;pf-v6-c-button pf-m-plain\&quot;\n            type=\&quot;button\&quot;\n            aria-labelledby=\&quot;data-list-expandable-compact-toggle3 data-list-expandable-compact-item3\&quot;\n            id=\&quot;data-list-expandable-compact-toggle3\&quot;\n            aria-label=\&quot;Toggle details for\&quot;\n            aria-expanded=\&quot;true\&quot;\n            aria-controls=\&quot;data-list-expandable-compact-content3\&quot;\n          &gt;\n            &lt;span class=\&quot;pf-v6-c-button__icon pf-m-start\&quot;&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__toggle-icon\&quot;&gt;\n                &lt;i class=\&quot;fas fa-angle-right\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n              &lt;/div&gt;\n            &lt;/span&gt;\n          &lt;/button&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell pf-m-icon\&quot;&gt;\n          &lt;i class=\&quot;fas fa-code-branch\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span id=\&quot;data-list-expandable-compact-item-3\&quot;&gt;Tertiary content&lt;/span&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet.&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-action\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-menu-toggle pf-m-plain pf-m-small\&quot;\n          type=\&quot;button\&quot;\n          aria-expanded=\&quot;false\&quot;\n          aria-label=\&quot;Menu toggle\&quot;\n          id=\&quot;data-list-expandable-compact-item-3-menu-toggle\&quot;\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-menu-toggle__icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-ellipsis-v\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;section\n      class=\&quot;pf-v6-c-data-list__expandable-content\&quot;\n      id=\&quot;data-list-expandable-compact-content3\&quot;\n      aria-label=\&quot;Expandable compact tertiary content details\&quot;\n    &gt;\n      &lt;div\n        class=\&quot;pf-v6-c-data-list__expandable-content-body pf-m-no-padding\&quot;\n      &gt;This expanded section has no padding.&lt;/div&gt;\n    &lt;/section&gt;\n  &lt;/li&gt;\n&lt;/ul&gt;\n&quot;]}" 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-2185" data-pf-content="true" class="pf-v6-c-content--h3">Expandable nested</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2214" data-pf-content="true" class="pf-v6-c-content--h3">Expandable nested</h3>
 <astro-island uid="ZNvUBK" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0],&quot;html&quot;:[0,&quot;&lt;ul\n  class=\&quot;pf-v6-c-data-list\&quot;\n  role=\&quot;list\&quot;\n  aria-label=\&quot;Expandable nested data list example\&quot;\n  id=\&quot;data-list-expandable-nested\&quot;\n&gt;\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item pf-m-expanded\&quot;\n    aria-labelledby=\&quot;data-list-expandable-nested-item-1\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__toggle\&quot;&gt;\n          &lt;button\n            class=\&quot;pf-v6-c-button pf-m-plain\&quot;\n            type=\&quot;button\&quot;\n            aria-labelledby=\&quot;data-list-expandable-nested-toggle1 data-list-expandable-nested-item1\&quot;\n            id=\&quot;data-list-expandable-nested-toggle1\&quot;\n            aria-label=\&quot;Toggle details for\&quot;\n            aria-expanded=\&quot;true\&quot;\n            aria-controls=\&quot;data-list-expandable-nested-content1\&quot;\n          &gt;\n            &lt;span class=\&quot;pf-v6-c-button__icon pf-m-start\&quot;&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__toggle-icon\&quot;&gt;\n                &lt;i class=\&quot;fas fa-angle-right\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n              &lt;/div&gt;\n            &lt;/span&gt;\n          &lt;/button&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell pf-m-icon\&quot;&gt;\n          &lt;i class=\&quot;fas fa-code-branch\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span id=\&quot;data-list-expandable-nested-item-1\&quot;&gt;Primary content&lt;/span&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n          &lt;a href=\&quot;#\&quot;&gt;link&lt;/a&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-action\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-menu-toggle pf-m-plain\&quot;\n          type=\&quot;button\&quot;\n          aria-expanded=\&quot;false\&quot;\n          aria-label=\&quot;Menu toggle\&quot;\n          id=\&quot;data-list-expandable-nested-item-1-menu-toggle\&quot;\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-menu-toggle__icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-ellipsis-v\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;section\n      class=\&quot;pf-v6-c-data-list__expandable-content\&quot;\n      id=\&quot;data-list-expandable-nested-content1\&quot;\n      aria-label=\&quot;Expandable nested primary content details\&quot;\n    &gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__expandable-content-body\&quot;&gt;\n        &lt;ul\n          class=\&quot;pf-v6-c-data-list\&quot;\n          role=\&quot;list\&quot;\n          aria-label=\&quot;Expandable nested nested data list example\&quot;\n          id=\&quot;data-list-expandable-nested-nested\&quot;\n        &gt;\n          &lt;li\n            class=\&quot;pf-v6-c-data-list__item pf-m-expanded\&quot;\n            aria-labelledby=\&quot;data-list-expandable-nested-nested-item-1\&quot;\n          &gt;\n            &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n                &lt;div class=\&quot;pf-v6-c-data-list__toggle\&quot;&gt;\n                  &lt;button\n                    class=\&quot;pf-v6-c-button pf-m-plain\&quot;\n                    type=\&quot;button\&quot;\n                    aria-labelledby=\&quot;data-list-expandable-nested-nested-toggle1 data-list-expandable-nested-nested-item1\&quot;\n                    id=\&quot;data-list-expandable-nested-nested-toggle1\&quot;\n                    aria-label=\&quot;Toggle details for\&quot;\n                    aria-expanded=\&quot;true\&quot;\n                    aria-controls=\&quot;data-list-expandable-nested-nested-content1\&quot;\n                  &gt;\n                    &lt;span class=\&quot;pf-v6-c-button__icon pf-m-start\&quot;&gt;\n                      &lt;div class=\&quot;pf-v6-c-data-list__toggle-icon\&quot;&gt;\n                        &lt;i class=\&quot;fas fa-angle-right\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n                      &lt;/div&gt;\n                    &lt;/span&gt;\n                  &lt;/button&gt;\n                &lt;/div&gt;\n              &lt;/div&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n                &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n                  &lt;span\n                    id=\&quot;data-list-expandable-nested-nested-item-1\&quot;\n                  &gt;Nested row 1&lt;/span&gt;\n                &lt;/div&gt;\n              &lt;/div&gt;\n            &lt;/div&gt;\n            &lt;section\n              class=\&quot;pf-v6-c-data-list__expandable-content\&quot;\n              id=\&quot;data-list-expandable-nested-nested-content1\&quot;\n              aria-label=\&quot;Nested row 1 details\&quot;\n            &gt;\n              &lt;div\n                class=\&quot;pf-v6-c-data-list__expandable-content-body\&quot;\n              &gt;Nested row 1 expanded content.&lt;/div&gt;\n            &lt;/section&gt;\n          &lt;/li&gt;\n\n          &lt;li\n            class=\&quot;pf-v6-c-data-list__item\&quot;\n            aria-labelledby=\&quot;data-list-expandable-nested-nested-item-2\&quot;\n          &gt;\n            &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n                &lt;div class=\&quot;pf-v6-c-data-list__toggle\&quot;&gt;\n                  &lt;button\n                    class=\&quot;pf-v6-c-button pf-m-plain\&quot;\n                    type=\&quot;button\&quot;\n                    aria-labelledby=\&quot;data-list-expandable-nested-nested-toggle2 data-list-expandable-nested-nested-item2\&quot;\n                    id=\&quot;data-list-expandable-nested-nested-toggle2\&quot;\n                    aria-label=\&quot;Toggle details for\&quot;\n                    aria-expanded=\&quot;false\&quot;\n                    aria-controls=\&quot;data-list-expandable-nested-nested-content2\&quot;\n                  &gt;\n                    &lt;span class=\&quot;pf-v6-c-button__icon pf-m-start\&quot;&gt;\n                      &lt;div class=\&quot;pf-v6-c-data-list__toggle-icon\&quot;&gt;\n                        &lt;i class=\&quot;fas fa-angle-right\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n                      &lt;/div&gt;\n                    &lt;/span&gt;\n                  &lt;/button&gt;\n                &lt;/div&gt;\n              &lt;/div&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n                &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n                  &lt;div\n                    id=\&quot;data-list-expandable-nested-nested-item-2\&quot;\n                  &gt;Nested row 2&lt;/div&gt;\n                &lt;/div&gt;\n              &lt;/div&gt;\n            &lt;/div&gt;\n            &lt;section\n              class=\&quot;pf-v6-c-data-list__expandable-content\&quot;\n              id=\&quot;data-list-expandable-nested-nested-content2\&quot;\n              aria-label=\&quot;Nested row 2 details\&quot;\n              hidden\n            &gt;\n              &lt;div\n                class=\&quot;pf-v6-c-data-list__expandable-content-body\&quot;\n              &gt;Nested row 2 expanded content.&lt;/div&gt;\n            &lt;/section&gt;\n          &lt;/li&gt;\n\n          &lt;li\n            class=\&quot;pf-v6-c-data-list__item pf-m-expanded\&quot;\n            aria-labelledby=\&quot;data-list-expandable-nested-nested-item-3\&quot;\n          &gt;\n            &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n                &lt;div class=\&quot;pf-v6-c-data-list__toggle\&quot;&gt;\n                  &lt;button\n                    class=\&quot;pf-v6-c-button pf-m-plain\&quot;\n                    type=\&quot;button\&quot;\n                    aria-labelledby=\&quot;data-list-expandable-nested-nested-toggle3 data-list-expandable-nested-nested-item3\&quot;\n                    id=\&quot;data-list-expandable-nested-nested-toggle3\&quot;\n                    aria-label=\&quot;Toggle details for\&quot;\n                    aria-expanded=\&quot;true\&quot;\n                    aria-controls=\&quot;data-list-expandable-nested-nested-content3\&quot;\n                  &gt;\n                    &lt;span class=\&quot;pf-v6-c-button__icon pf-m-start\&quot;&gt;\n                      &lt;div class=\&quot;pf-v6-c-data-list__toggle-icon\&quot;&gt;\n                        &lt;i class=\&quot;fas fa-angle-right\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n                      &lt;/div&gt;\n                    &lt;/span&gt;\n                  &lt;/button&gt;\n                &lt;/div&gt;\n              &lt;/div&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n                &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n                  &lt;div\n                    id=\&quot;data-list-expandable-nested-nested-item-3\&quot;\n                  &gt;Nested row 3&lt;/div&gt;\n                &lt;/div&gt;\n              &lt;/div&gt;\n            &lt;/div&gt;\n            &lt;section\n              class=\&quot;pf-v6-c-data-list__expandable-content\&quot;\n              id=\&quot;data-list-expandable-nested-nested-content3\&quot;\n              aria-label=\&quot;Nested row 3 details\&quot;\n            &gt;\n              &lt;div\n                class=\&quot;pf-v6-c-data-list__expandable-content-body\&quot;\n              &gt;Nested row 3 expanded content.&lt;/div&gt;\n            &lt;/section&gt;\n          &lt;/li&gt;\n        &lt;/ul&gt;\n      &lt;/div&gt;\n    &lt;/section&gt;\n  &lt;/li&gt;\n\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-expandable-nested-item-2\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__toggle\&quot;&gt;\n          &lt;button\n            class=\&quot;pf-v6-c-button pf-m-plain\&quot;\n            type=\&quot;button\&quot;\n            aria-labelledby=\&quot;data-list-expandable-nested-toggle2 data-list-expandable-nested-item2\&quot;\n            id=\&quot;data-list-expandable-nested-toggle2\&quot;\n            aria-label=\&quot;Toggle details for\&quot;\n            aria-expanded=\&quot;false\&quot;\n            aria-controls=\&quot;data-list-expandable-nested-content2\&quot;\n          &gt;\n            &lt;span class=\&quot;pf-v6-c-button__icon pf-m-start\&quot;&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__toggle-icon\&quot;&gt;\n                &lt;i class=\&quot;fas fa-angle-right\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n              &lt;/div&gt;\n            &lt;/span&gt;\n          &lt;/button&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;div id=\&quot;data-list-expandable-nested-item-2\&quot;&gt;Secondary content&lt;/div&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet.&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-action\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-menu-toggle pf-m-plain\&quot;\n          type=\&quot;button\&quot;\n          aria-expanded=\&quot;false\&quot;\n          aria-label=\&quot;Menu toggle\&quot;\n          id=\&quot;data-list-expandable-nested-item-2-menu-toggle\&quot;\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-menu-toggle__icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-ellipsis-v\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;section\n      class=\&quot;pf-v6-c-data-list__expandable-content\&quot;\n      id=\&quot;data-list-expandable-nested-content2\&quot;\n      aria-label=\&quot;Expandable nested secondary content details\&quot;\n      hidden\n    &gt;\n      &lt;div\n        class=\&quot;pf-v6-c-data-list__expandable-content-body\&quot;\n      &gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/div&gt;\n    &lt;/section&gt;\n  &lt;/li&gt;\n\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item pf-m-expanded\&quot;\n    aria-labelledby=\&quot;data-list-expandable-nested-item-3\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__toggle\&quot;&gt;\n          &lt;button\n            class=\&quot;pf-v6-c-button pf-m-plain\&quot;\n            type=\&quot;button\&quot;\n            aria-labelledby=\&quot;data-list-expandable-nested-toggle3 data-list-expandable-nested-item3\&quot;\n            id=\&quot;data-list-expandable-nested-toggle3\&quot;\n            aria-label=\&quot;Toggle details for\&quot;\n            aria-expanded=\&quot;true\&quot;\n            aria-controls=\&quot;data-list-expandable-nested-content3\&quot;\n          &gt;\n            &lt;span class=\&quot;pf-v6-c-button__icon pf-m-start\&quot;&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__toggle-icon\&quot;&gt;\n                &lt;i class=\&quot;fas fa-angle-right\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n              &lt;/div&gt;\n            &lt;/span&gt;\n          &lt;/button&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell pf-m-icon\&quot;&gt;\n          &lt;i class=\&quot;fas fa-code-branch\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;div id=\&quot;data-list-expandable-nested-item-3\&quot;&gt;Tertiary content&lt;/div&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet.&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-action\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-menu-toggle pf-m-plain\&quot;\n          type=\&quot;button\&quot;\n          aria-expanded=\&quot;false\&quot;\n          aria-label=\&quot;Menu toggle\&quot;\n          id=\&quot;data-list-expandable-nested-item-3-menu-toggle\&quot;\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-menu-toggle__icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-ellipsis-v\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;section\n      class=\&quot;pf-v6-c-data-list__expandable-content\&quot;\n      id=\&quot;data-list-expandable-nested-content3\&quot;\n      aria-label=\&quot;Expandable nested tertiary content details\&quot;\n    &gt;\n      &lt;div\n        class=\&quot;pf-v6-c-data-list__expandable-content-body pf-m-no-padding\&quot;\n      &gt;This expanded section has no padding.&lt;/div&gt;\n    &lt;/section&gt;\n  &lt;/li&gt;\n&lt;/ul&gt;\n&quot;]}" 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-2186" data-pf-content="true" class="pf-v6-c-content--h3">Compact</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2215" data-pf-content="true" class="pf-v6-c-content--h3">Compact</h3>
 <astro-island uid="galE8" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0],&quot;html&quot;:[0,&quot;&lt;ul\n  class=\&quot;pf-v6-c-data-list pf-m-compact pf-m-grid-sm\&quot;\n  role=\&quot;list\&quot;\n  aria-label=\&quot;Compact data list example\&quot;\n  id=\&quot;data-list-compact\&quot;\n&gt;\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-compact-item-1\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__check\&quot;&gt;\n          &lt;label\n            class=\&quot;pf-v6-c-check pf-m-standalone\&quot;\n            for=\&quot;data-list-compact-item-1&amp;quot;-input\&quot;\n          &gt;\n            &lt;input\n              class=\&quot;pf-v6-c-check__input\&quot;\n              type=\&quot;checkbox\&quot;\n              id=\&quot;data-list-compact-item-1&amp;quot;-input\&quot;\n              name=\&quot;data-list-compact-item-1&amp;quot;-input\&quot;\n              aria-label=\&quot;Standalone check\&quot;\n            /&gt;\n          &lt;/label&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span id=\&quot;data-list-compact-item-1\&quot;&gt;Primary content&lt;/span&gt; Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.\n        &lt;/div&gt;\n        &lt;div\n          class=\&quot;pf-v6-c-data-list__cell\&quot;\n        &gt;Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;Tertiary Content&lt;/span&gt; Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;More Content&lt;/span&gt; Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span&gt;More Content&lt;/span&gt; Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-action\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-menu-toggle pf-m-plain pf-m-small\&quot;\n          type=\&quot;button\&quot;\n          aria-expanded=\&quot;false\&quot;\n          aria-label=\&quot;Menu toggle\&quot;\n          id=\&quot;data-list-compact-item-1-menu-toggle\&quot;\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-menu-toggle__icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-ellipsis-v\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-compact-item-2\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__check\&quot;&gt;\n          &lt;label\n            class=\&quot;pf-v6-c-check pf-m-standalone\&quot;\n            for=\&quot;data-list-compact-item-2&amp;quot;-input\&quot;\n          &gt;\n            &lt;input\n              class=\&quot;pf-v6-c-check__input\&quot;\n              type=\&quot;checkbox\&quot;\n              id=\&quot;data-list-compact-item-2&amp;quot;-input\&quot;\n              name=\&quot;data-list-compact-item-2&amp;quot;-input\&quot;\n              aria-label=\&quot;Standalone check\&quot;\n            /&gt;\n          &lt;/label&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span id=\&quot;data-list-compact-item-2\&quot;&gt;Primary content - lorem ipsum&lt;/span&gt; dolor sit amet, consectetur adipisicing elit, sed do eiusmod.\n        &lt;/div&gt;\n        &lt;div\n          class=\&quot;pf-v6-c-data-list__cell\&quot;\n        &gt;Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.&lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-action pf-m-hidden-on-lg\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-menu-toggle pf-m-plain pf-m-small\&quot;\n          type=\&quot;button\&quot;\n          aria-expanded=\&quot;false\&quot;\n          aria-label=\&quot;Menu toggle\&quot;\n          id=\&quot;data-list-compact-item-2-menu-toggle\&quot;\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-menu-toggle__icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-ellipsis-v\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n      &lt;div\n        class=\&quot;pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-lg\&quot;\n      &gt;\n        &lt;button class=\&quot;pf-v6-c-button pf-m-small pf-m-primary\&quot; type=\&quot;button\&quot;&gt;\n          &lt;span class=\&quot;pf-v6-c-button__text\&quot;&gt;Primary&lt;/span&gt;\n        &lt;/button&gt;\n        &lt;button class=\&quot;pf-v6-c-button pf-m-small pf-m-secondary\&quot; type=\&quot;button\&quot;&gt;\n          &lt;span class=\&quot;pf-v6-c-button__text\&quot;&gt;Secondary&lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-compact-item-3\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__check\&quot;&gt;\n          &lt;label\n            class=\&quot;pf-v6-c-check pf-m-standalone\&quot;\n            for=\&quot;data-list-compact-item-3&amp;quot;-input\&quot;\n          &gt;\n            &lt;input\n              class=\&quot;pf-v6-c-check__input\&quot;\n              type=\&quot;checkbox\&quot;\n              id=\&quot;data-list-compact-item-3&amp;quot;-input\&quot;\n              name=\&quot;data-list-compact-item-3&amp;quot;-input\&quot;\n              aria-label=\&quot;Standalone check\&quot;\n            /&gt;\n          &lt;/label&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span id=\&quot;data-list-compact-item-3\&quot;&gt;Primary content - lorem ipsum&lt;/span&gt; dolor sit amet, consectetur adipisicing elit, sed do eiusmod.\n        &lt;/div&gt;\n        &lt;div\n          class=\&quot;pf-v6-c-data-list__cell\&quot;\n        &gt;Secondary content. Dolor sit amet, consectetur adipisicing elit, sed do eiusmod.&lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-action pf-m-hidden-on-xl\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-menu-toggle pf-m-plain pf-m-small\&quot;\n          type=\&quot;button\&quot;\n          aria-expanded=\&quot;false\&quot;\n          aria-label=\&quot;Menu toggle\&quot;\n          id=\&quot;data-list-compact-item-3-menu-toggle\&quot;\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-menu-toggle__icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-ellipsis-v\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n      &lt;div\n        class=\&quot;pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-xl\&quot;\n      &gt;\n        &lt;button class=\&quot;pf-v6-c-button pf-m-small pf-m-primary\&quot; type=\&quot;button\&quot;&gt;\n          &lt;span class=\&quot;pf-v6-c-button__text\&quot;&gt;Primary&lt;/span&gt;\n        &lt;/button&gt;\n        &lt;button class=\&quot;pf-v6-c-button pf-m-small pf-m-secondary\&quot; type=\&quot;button\&quot;&gt;\n          &lt;span class=\&quot;pf-v6-c-button__text\&quot;&gt;Secondary&lt;/span&gt;\n        &lt;/button&gt;\n        &lt;button class=\&quot;pf-v6-c-button pf-m-small pf-m-secondary\&quot; type=\&quot;button\&quot;&gt;\n          &lt;span class=\&quot;pf-v6-c-button__text\&quot;&gt;Secondary&lt;/span&gt;\n        &lt;/button&gt;\n        &lt;button class=\&quot;pf-v6-c-button pf-m-small pf-m-secondary\&quot; type=\&quot;button\&quot;&gt;\n          &lt;span class=\&quot;pf-v6-c-button__text\&quot;&gt;Secondary&lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n&lt;/ul&gt;\n&quot;]}" 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-2187" data-pf-content="true" class="pf-v6-c-content--h3">Accessibility</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2216" data-pf-content="true" class="pf-v6-c-content--h3">Accessibility</h3>
@@ -271,7 +271,7 @@
 <table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>aria-expanded=&quot;true&quot;</code></td><td><code>.pf-v6-c-data-list__toggle</code> &gt; <code>.pf-v6-c-button</code></td><td>Indicates that the expandable content is visible. <strong>Required</strong></td></tr><tr><td><code>hidden</code></td><td><code>.pf-v6-c-data-list__expandable-content</code></td><td>Indicates that the expandable content is hidden. <strong>Required</strong></td></tr><tr><td><code>aria-label=&quot;[descriptive text]&quot;</code></td><td><code>.pf-v6-c-data-list__toggle</code> &gt; <code>.pf-v6-c-button</code></td><td>Provides an accessible name for toggle button. <strong>Required</strong></td></tr><tr><td><code>aria-labelledby=&quot;{title_cell_id} {button_id}&quot;</code></td><td><code>.pf-v6-c-data-list__toggle</code> &gt; <code>.pf-v6-c-button</code></td><td>Establishes relationship between aria-label text and toggle button. <strong>Required</strong></td></tr><tr><td><code>id=&quot;{button_id}&quot;</code></td><td><code>.pf-v6-c-data-list__toggle</code> &gt; <code>.pf-v6-c-button</code></td><td>Provides a reference for toggle button description. <strong>Required</strong></td></tr><tr><td><code>aria-controls=&quot;[id of element controlled]&quot;</code></td><td><code>.pf-v6-c-data-list__toggle</code> &gt; <code>.pf-v6-c-button</code></td><td>Identifies the section controlled by the toggle button. <strong>Required</strong></td></tr></tbody></table>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2188" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2217" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
@@ -328,10 +328,10 @@
 <table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-data-list__item-control</code></td><td><code>&lt;div&gt;</code></td><td>Initiates a container for data list controls. For example, add <code>.pf-v6-c-data-list__toggle</code> here. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-data-list__toggle</code></td><td><code>&lt;div&gt;</code></td><td>Initiates a toggle button.</td></tr><tr><td><code>.pf-v6-c-data-list__toggle-icon</code></td><td><code>&lt;span&gt;</code></td><td>Initiates a toggle icon.</td></tr><tr><td><code>.pf-v6-c-data-list__expandable-content</code></td><td><code>&lt;div&gt;</code></td><td>Initiates an expandable content container.</td></tr><tr><td><code>.pf-v6-c-data-list__expandable-content-body</code></td><td><code>&lt;div&gt;</code></td><td>Initiates an expandable content container body. <strong>Required</strong> when <code>.pf-v6-c-data-list__expandable-content</code> is used.</td></tr><tr><td><code>.pf-m-expanded</code></td><td><code>.pf-v6-c-data-list__item</code></td><td>Modifies for expanded state.</td></tr><tr><td><code>.pf-m-compact</code></td><td><code>.pf-v6-c-data-list</code></td><td>Modifies for compact variation.</td></tr><tr><td><code>.pf-m-no-padding</code></td><td><code>.pf-v6-c-data-list__expandable-content-body</code></td><td>Removes padding for the expandable content body.</td></tr><tr><td><code>.pf-m-icon</code></td><td><code>.pf-v6-c-data-list__cell</code></td><td>Modifies a data list cell to not grow and align-left when its the first data-list__cell element.</td></tr></tbody></table>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2189" data-pf-content="true" class="pf-v6-c-content--h3">Modifiers</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2218" data-pf-content="true" class="pf-v6-c-content--h3">Modifiers</h3>
 <astro-island uid="Z2n2pbE" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0],&quot;html&quot;:[0,&quot;&lt;h2 class=\&quot;Preview__section-title\&quot;&gt;Default fitting - example 1&lt;/h2&gt;\n&lt;ul\n  class=\&quot;pf-v6-c-data-list\&quot;\n  role=\&quot;list\&quot;\n  aria-label=\&quot;Width modifier data list example 1\&quot;\n  id=\&quot;data-list-default-fitting\&quot;\n&gt;\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-default-fitting-item-1\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__check\&quot;&gt;\n          &lt;label\n            class=\&quot;pf-v6-c-check pf-m-standalone\&quot;\n            for=\&quot;data-list-default-fitting-item-1&amp;quot;-input\&quot;\n          &gt;\n            &lt;input\n              class=\&quot;pf-v6-c-check__input\&quot;\n              type=\&quot;checkbox\&quot;\n              id=\&quot;data-list-default-fitting-item-1&amp;quot;-input\&quot;\n              name=\&quot;data-list-default-fitting-item-1&amp;quot;-input\&quot;\n              aria-label=\&quot;Standalone check\&quot;\n            /&gt;\n          &lt;/label&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;div class=\&quot;Preview__placeholder\&quot;&gt;\n            &lt;b id=\&quot;data-list-default-fitting-item-1\&quot;&gt;default&lt;/b&gt;\n            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;\n          &lt;/div&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;div class=\&quot;Preview__placeholder\&quot;&gt;\n            &lt;b&gt;default&lt;/b&gt;\n            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;\n          &lt;/div&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2 class=\&quot;Preview__section-title\&quot;&gt;Flex modifiers - example 2&lt;/h2&gt;\n&lt;ul\n  class=\&quot;pf-v6-c-data-list\&quot;\n  role=\&quot;list\&quot;\n  aria-label=\&quot;Width modifier data list example 2\&quot;\n  id=\&quot;data-list-flex-modifiers\&quot;\n&gt;\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-flex-modifiers-item-1\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__check\&quot;&gt;\n          &lt;label\n            class=\&quot;pf-v6-c-check pf-m-standalone\&quot;\n            for=\&quot;data-list-flex-modifiers-item-1&amp;quot;-input\&quot;\n          &gt;\n            &lt;input\n              class=\&quot;pf-v6-c-check__input\&quot;\n              type=\&quot;checkbox\&quot;\n              id=\&quot;data-list-flex-modifiers-item-1&amp;quot;-input\&quot;\n              name=\&quot;data-list-flex-modifiers-item-1&amp;quot;-input\&quot;\n              aria-label=\&quot;Standalone check\&quot;\n            /&gt;\n          &lt;/label&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell pf-m-flex-2\&quot;&gt;\n          &lt;div class=\&quot;Preview__placeholder\&quot;&gt;\n            &lt;b id=\&quot;data-list-flex-modifiers-item-1\&quot;&gt;.pf-m-flex-2&lt;/b&gt;\n            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.&lt;/p&gt;\n          &lt;/div&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell pf-m-flex-4\&quot;&gt;\n          &lt;div class=\&quot;Preview__placeholder\&quot;&gt;\n            &lt;b&gt;.pf-m-flex-4&lt;/b&gt;\n            &lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;\n          &lt;/div&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-action\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-menu-toggle pf-m-plain\&quot;\n          type=\&quot;button\&quot;\n          aria-expanded=\&quot;false\&quot;\n          aria-label=\&quot;Menu toggle\&quot;\n          id=\&quot;data-list-flex-modifiers-item-1-menu-toggle\&quot;\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-menu-toggle__icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-ellipsis-v\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2 class=\&quot;Preview__section-title\&quot;&gt;Flex modifiers - example 3&lt;/h2&gt;\n&lt;ul\n  class=\&quot;pf-v6-c-data-list\&quot;\n  role=\&quot;list\&quot;\n  aria-label=\&quot;Width modifier data list example 3\&quot;\n  id=\&quot;data-list-flex-modifiers-2\&quot;\n&gt;\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item pf-m-expanded\&quot;\n    aria-labelledby=\&quot;data-list-flex-modifiers-2-item-1\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__toggle\&quot;&gt;\n          &lt;button\n            class=\&quot;pf-v6-c-button pf-m-plain\&quot;\n            type=\&quot;button\&quot;\n            aria-labelledby=\&quot;data-list-flex-modifiers-2-toggle1 data-list-flex-modifiers-2-item1\&quot;\n            id=\&quot;data-list-flex-modifiers-2-toggle1\&quot;\n            aria-label=\&quot;Toggle details for\&quot;\n            aria-expanded=\&quot;true\&quot;\n            aria-controls=\&quot;data-list-flex-modifiers-2-content1\&quot;\n          &gt;\n            &lt;span class=\&quot;pf-v6-c-button__icon pf-m-start\&quot;&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__toggle-icon\&quot;&gt;\n                &lt;i class=\&quot;fas fa-angle-right\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n              &lt;/div&gt;\n            &lt;/span&gt;\n          &lt;/button&gt;\n        &lt;/div&gt;\n\n        &lt;div class=\&quot;pf-v6-c-data-list__check\&quot;&gt;\n          &lt;label\n            class=\&quot;pf-v6-c-check pf-m-standalone\&quot;\n            for=\&quot;data-list-flex-modifiers-2-item-1&amp;quot;-input\&quot;\n          &gt;\n            &lt;input\n              class=\&quot;pf-v6-c-check__input\&quot;\n              type=\&quot;checkbox\&quot;\n              id=\&quot;data-list-flex-modifiers-2-item-1&amp;quot;-input\&quot;\n              name=\&quot;data-list-flex-modifiers-2-item-1&amp;quot;-input\&quot;\n              aria-label=\&quot;Standalone check\&quot;\n            /&gt;\n          &lt;/label&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell pf-m-flex-5\&quot;&gt;\n          &lt;div class=\&quot;Preview__placeholder\&quot;&gt;\n            &lt;b id=\&quot;data-list-flex-modifiers-2-item-1\&quot;&gt;.pf-m-flex-5&lt;/b&gt;\n            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;\n          &lt;/div&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell pf-m-flex-2\&quot;&gt;\n          &lt;div class=\&quot;Preview__placeholder\&quot;&gt;\n            &lt;b&gt;.pf-m-flex-2&lt;/b&gt;\n            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;\n          &lt;/div&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell pf-m-flex-3\&quot;&gt;\n          &lt;div class=\&quot;Preview__placeholder\&quot;&gt;\n            &lt;b&gt;.pf-m-flex-3&lt;/b&gt;\n            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;\n          &lt;/div&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell pf-m-flex-3\&quot;&gt;\n          &lt;div class=\&quot;Preview__placeholder\&quot;&gt;\n            &lt;b&gt;.pf-m-flex-3&lt;/b&gt;\n            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;\n          &lt;/div&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-action\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-menu-toggle pf-m-plain\&quot;\n          type=\&quot;button\&quot;\n          aria-expanded=\&quot;false\&quot;\n          aria-label=\&quot;Menu toggle\&quot;\n          id=\&quot;data-list-flex-modifiers-2-item-1-menu-toggle\&quot;\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-menu-toggle__icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-ellipsis-v\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;section\n      class=\&quot;pf-v6-c-data-list__expandable-content\&quot;\n      id=\&quot;data-list-flex-modifiers-2-content1\&quot;\n      aria-label=\&quot;Flex modifier expandable primary content details\&quot;\n    &gt;\n      &lt;div\n        class=\&quot;pf-v6-c-data-list__expandable-content-body\&quot;\n      &gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/div&gt;\n    &lt;/section&gt;\n  &lt;/li&gt;\n&lt;/ul&gt;\n&quot;]}" 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-2190" data-pf-content="true" class="pf-v6-c-content--h3">Accessibility</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2219" data-pf-content="true" class="pf-v6-c-content--h3">Accessibility</h3>
@@ -348,7 +348,7 @@
 <table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>aria-controls=&quot;[id of element controlled]&quot;</code></td><td><code>.pf-v6-c-data-list__toggle</code> &gt; <code>.pf-v6-c-button</code></td><td>Identifies the section controlled by the toggle button. <strong>Required</strong></td></tr></tbody></table>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2191" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2220" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
@@ -365,10 +365,10 @@
 <table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-flex-{1, 2, 3, 4, 5}</code></td><td><code>.pf-v6-c-data-list__cell</code></td><td>Percentage based modifier for <code>.pf-v6-c-data-list__cell</code> widths.</td></tr></tbody></table>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2192" data-pf-content="true" class="pf-v6-c-content--h3">Clickable rows</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2221" data-pf-content="true" class="pf-v6-c-content--h3">Clickable rows</h3>
 <astro-island uid="Z21IzVx" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0],&quot;html&quot;:[0,&quot;&lt;ul\n  class=\&quot;pf-v6-c-data-list\&quot;\n  role=\&quot;list\&quot;\n  aria-label=\&quot;Clickable rows data list example\&quot;\n  id=\&quot;data-list-clickable-rows\&quot;\n&gt;\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item pf-m-clickable pf-m-selected\&quot;\n    aria-labelledby=\&quot;data-list-clickable-rows-item-1\&quot;\n    tabindex=\&quot;0\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span id=\&quot;data-list-clickable-rows-item-1\&quot;&gt;Primary content (clicked)&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item pf-m-clickable\&quot;\n    aria-labelledby=\&quot;data-list-clickable-rows-item-2\&quot;\n    tabindex=\&quot;0\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span id=\&quot;data-list-clickable-rows-item-2\&quot;&gt;Secondary content&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item pf-m-clickable\&quot;\n    aria-labelledby=\&quot;data-list-clickable-rows-item-3\&quot;\n    tabindex=\&quot;0\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span id=\&quot;data-list-clickable-rows-item-3\&quot;&gt;Tertiary content&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n&lt;/ul&gt;\n&quot;]}" 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-2193" data-pf-content="true" class="pf-v6-c-content--h3">Accessibility</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2222" data-pf-content="true" class="pf-v6-c-content--h3">Accessibility</h3>
@@ -385,7 +385,7 @@
 <table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>tabindex=&quot;0&quot;</code></td><td><code>.pf-v6-c-data-list__item.pf-m-clickable</code></td><td>Inserts the clickable row into the tab order of the page so that it is focusable. <strong>Required</strong></td></tr></tbody></table>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2194" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2223" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
@@ -407,13 +407,13 @@
 <table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-clickable</code></td><td><code>.pf-v6-c-data-list__item</code></td><td>Modifies a data list item so that it is clickable.</td></tr><tr><td><code>.pf-m-selected</code></td><td><code>.pf-v6-c-data-list__item</code></td><td>Modifies a data list item for the selected state.</td></tr></tbody></table>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2195" data-pf-content="true" class="pf-v6-c-content--h3">Clickable expandable rows</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2224" data-pf-content="true" class="pf-v6-c-content--h3">Clickable expandable rows</h3>
 <astro-island uid="Z18rbys" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0],&quot;html&quot;:[0,&quot;&lt;ul\n  class=\&quot;pf-v6-c-data-list\&quot;\n  role=\&quot;list\&quot;\n  aria-label=\&quot;Clickable, expandable data list example\&quot;\n  id=\&quot;data-list-clickable-expandable-rows\&quot;\n&gt;\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item pf-m-expanded pf-m-clickable pf-m-selected\&quot;\n    aria-labelledby=\&quot;data-list-clickable-expandable-rows-item-1\&quot;\n    tabindex=\&quot;0\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__toggle\&quot;&gt;\n          &lt;button\n            class=\&quot;pf-v6-c-button pf-m-plain\&quot;\n            type=\&quot;button\&quot;\n            aria-labelledby=\&quot;data-list-clickable-expandable-rows-toggle1 data-list-clickable-expandable-rows-item1\&quot;\n            id=\&quot;data-list-clickable-expandable-rows-toggle1\&quot;\n            aria-label=\&quot;Toggle details for\&quot;\n            aria-expanded=\&quot;true\&quot;\n            aria-controls=\&quot;data-list-clickable-expandable-rows-content1\&quot;\n          &gt;\n            &lt;span class=\&quot;pf-v6-c-button__icon pf-m-start\&quot;&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__toggle-icon\&quot;&gt;\n                &lt;i class=\&quot;fas fa-angle-right\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n              &lt;/div&gt;\n            &lt;/span&gt;\n          &lt;/button&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span\n            id=\&quot;data-list-clickable-expandable-rows-item-1\&quot;\n          &gt;Primary content (clicked and expanded)&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;section\n      class=\&quot;pf-v6-c-data-list__expandable-content\&quot;\n      id=\&quot;data-list-clickable-expandable-rows-content1\&quot;\n      aria-label=\&quot;Clickable expandable row primary content details\&quot;\n    &gt;\n      &lt;div\n        class=\&quot;pf-v6-c-data-list__expandable-content-body\&quot;\n      &gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/div&gt;\n    &lt;/section&gt;\n  &lt;/li&gt;\n\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item pf-m-clickable\&quot;\n    aria-labelledby=\&quot;data-list-clickable-expandable-rows-item-2\&quot;\n    tabindex=\&quot;0\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__toggle\&quot;&gt;\n          &lt;button\n            class=\&quot;pf-v6-c-button pf-m-plain\&quot;\n            type=\&quot;button\&quot;\n            aria-labelledby=\&quot;data-list-clickable-expandable-rows-toggle2 data-list-clickable-expandable-rows-item2\&quot;\n            id=\&quot;data-list-clickable-expandable-rows-toggle2\&quot;\n            aria-label=\&quot;Toggle details for\&quot;\n            aria-expanded=\&quot;false\&quot;\n            aria-controls=\&quot;data-list-clickable-expandable-rows-content2\&quot;\n          &gt;\n            &lt;span class=\&quot;pf-v6-c-button__icon pf-m-start\&quot;&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__toggle-icon\&quot;&gt;\n                &lt;i class=\&quot;fas fa-angle-right\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n              &lt;/div&gt;\n            &lt;/span&gt;\n          &lt;/button&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span\n            id=\&quot;data-list-clickable-expandable-rows-item-2\&quot;\n          &gt;Secondary content&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;section\n      class=\&quot;pf-v6-c-data-list__expandable-content\&quot;\n      id=\&quot;data-list-clickable-expandable-rows-content2\&quot;\n      aria-label=\&quot;Clickable expandable row secondary content details\&quot;\n      hidden\n    &gt;\n      &lt;div\n        class=\&quot;pf-v6-c-data-list__expandable-content-body\&quot;\n      &gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/div&gt;\n    &lt;/section&gt;\n  &lt;/li&gt;\n\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item pf-m-expanded pf-m-clickable\&quot;\n    aria-labelledby=\&quot;data-list-clickable-expandable-rows-item-3\&quot;\n    tabindex=\&quot;0\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__toggle\&quot;&gt;\n          &lt;button\n            class=\&quot;pf-v6-c-button pf-m-plain\&quot;\n            type=\&quot;button\&quot;\n            aria-labelledby=\&quot;data-list-clickable-expandable-rows-toggle3 data-list-clickable-expandable-rows-item3\&quot;\n            id=\&quot;data-list-clickable-expandable-rows-toggle3\&quot;\n            aria-label=\&quot;Toggle details for\&quot;\n            aria-expanded=\&quot;true\&quot;\n            aria-controls=\&quot;data-list-clickable-expandable-rows-content3\&quot;\n          &gt;\n            &lt;span class=\&quot;pf-v6-c-button__icon pf-m-start\&quot;&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__toggle-icon\&quot;&gt;\n                &lt;i class=\&quot;fas fa-angle-right\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n              &lt;/div&gt;\n            &lt;/span&gt;\n          &lt;/button&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span\n            id=\&quot;data-list-clickable-expandable-rows-item-3\&quot;\n          &gt;Tertiary content (expanded)&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;section\n      class=\&quot;pf-v6-c-data-list__expandable-content\&quot;\n      id=\&quot;data-list-clickable-expandable-rows-content3\&quot;\n      aria-label=\&quot;Clickable expandable row tertiary content details\&quot;\n    &gt;\n      &lt;div\n        class=\&quot;pf-v6-c-data-list__expandable-content-body pf-m-no-padding\&quot;\n      &gt;This expanded section has no padding.&lt;/div&gt;\n    &lt;/section&gt;\n  &lt;/li&gt;\n\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item pf-m-clickable\&quot;\n    aria-labelledby=\&quot;data-list-clickable-expandable-rows-item-4\&quot;\n    tabindex=\&quot;0\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__toggle\&quot;&gt;\n          &lt;button\n            class=\&quot;pf-v6-c-button pf-m-plain\&quot;\n            type=\&quot;button\&quot;\n            aria-labelledby=\&quot;data-list-clickable-expandable-rows-toggle4 data-list-clickable-expandable-rows-item4\&quot;\n            id=\&quot;data-list-clickable-expandable-rows-toggle4\&quot;\n            aria-label=\&quot;Toggle details for\&quot;\n            aria-expanded=\&quot;false\&quot;\n            aria-controls=\&quot;data-list-clickable-expandable-rows-content4\&quot;\n          &gt;\n            &lt;span class=\&quot;pf-v6-c-button__icon pf-m-start\&quot;&gt;\n              &lt;div class=\&quot;pf-v6-c-data-list__toggle-icon\&quot;&gt;\n                &lt;i class=\&quot;fas fa-angle-right\&quot; aria-hidden=\&quot;true\&quot;&gt;&lt;/i&gt;\n              &lt;/div&gt;\n            &lt;/span&gt;\n          &lt;/button&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span\n            id=\&quot;data-list-clickable-expandable-rows-item-4\&quot;\n          &gt;Quaternary content&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;section\n      class=\&quot;pf-v6-c-data-list__expandable-content\&quot;\n      id=\&quot;data-list-clickable-expandable-rows-content4\&quot;\n      aria-label=\&quot;Clickable expandable row quaternary content details\&quot;\n      hidden\n    &gt;\n      &lt;div\n        class=\&quot;pf-v6-c-data-list__expandable-content-body\&quot;\n      &gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/div&gt;\n    &lt;/section&gt;\n  &lt;/li&gt;\n&lt;/ul&gt;\n&quot;]}" 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-2196" data-pf-content="true" class="pf-v6-c-content--h3">Draggable</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2225" data-pf-content="true" class="pf-v6-c-content--h3">Draggable</h3>
 <astro-island uid="Z2ojQyo" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0],&quot;html&quot;:[0,&quot;&lt;div\n  id=\&quot;draggable-help\&quot;\n&gt;Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.&lt;/div&gt;\n&lt;ul\n  class=\&quot;pf-v6-c-data-list pf-m-compact\&quot;\n  role=\&quot;list\&quot;\n  aria-label=\&quot;Draggable data list rows\&quot;\n  id=\&quot;data-list-draggable\&quot;\n&gt;\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-draggable-item-1\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-data-list__item-draggable-button pf-m-disabled\&quot;\n          type=\&quot;button\&quot;\n          aria-label=\&quot;Reorder\&quot;\n          aria-pressed=\&quot;false\&quot;\n          id=\&quot;data-list-draggable-draggable-button-1\&quot;\n          aria-describedby=\&quot;draggable-help\&quot;\n          aria-labelledby=\&quot;data-list-draggable-draggable-button-1 data-list-draggable-item-1\&quot;\n          disabled\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-data-list__item-draggable-icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-grip-vertical\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__check\&quot;&gt;\n          &lt;label\n            class=\&quot;pf-v6-c-check pf-m-standalone\&quot;\n            for=\&quot;data-list-draggable-item-1&amp;quot;-input\&quot;\n          &gt;\n            &lt;input\n              class=\&quot;pf-v6-c-check__input\&quot;\n              type=\&quot;checkbox\&quot;\n              id=\&quot;data-list-draggable-item-1&amp;quot;-input\&quot;\n              name=\&quot;data-list-draggable-item-1&amp;quot;-input\&quot;\n              aria-label=\&quot;Standalone check\&quot;\n            /&gt;\n          &lt;/label&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span\n            class=\&quot;pf-v6-c-data-list__cell-text\&quot;\n            id=\&quot;data-list-draggable-item-1\&quot;\n          &gt;Draggable icon disabled&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-draggable-item-2\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-data-list__item-draggable-button\&quot;\n          type=\&quot;button\&quot;\n          aria-label=\&quot;Reorder\&quot;\n          aria-pressed=\&quot;false\&quot;\n          id=\&quot;data-list-draggable-draggable-button-2\&quot;\n          aria-describedby=\&quot;draggable-help\&quot;\n          aria-labelledby=\&quot;data-list-draggable-draggable-button-2 data-list-draggable-item-2\&quot;\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-data-list__item-draggable-icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-grip-vertical\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__check\&quot;&gt;\n          &lt;label\n            class=\&quot;pf-v6-c-check pf-m-standalone\&quot;\n            for=\&quot;data-list-draggable-item-2&amp;quot;-input\&quot;\n          &gt;\n            &lt;input\n              class=\&quot;pf-v6-c-check__input\&quot;\n              type=\&quot;checkbox\&quot;\n              id=\&quot;data-list-draggable-item-2&amp;quot;-input\&quot;\n              name=\&quot;data-list-draggable-item-2&amp;quot;-input\&quot;\n              aria-label=\&quot;Standalone check\&quot;\n            /&gt;\n          &lt;/label&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span\n            class=\&quot;pf-v6-c-data-list__cell-text\&quot;\n            id=\&quot;data-list-draggable-item-2\&quot;\n          &gt;List item&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item pf-m-ghost-row\&quot;\n    aria-labelledby=\&quot;data-list-draggable-item-3\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-data-list__item-draggable-button\&quot;\n          type=\&quot;button\&quot;\n          aria-label=\&quot;Reorder\&quot;\n          aria-pressed=\&quot;false\&quot;\n          id=\&quot;data-list-draggable-draggable-button-3\&quot;\n          aria-describedby=\&quot;draggable-help\&quot;\n          aria-labelledby=\&quot;data-list-draggable-draggable-button-3 data-list-draggable-item-3\&quot;\n          disabled\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-data-list__item-draggable-icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-grip-vertical\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__check\&quot;&gt;\n          &lt;label\n            class=\&quot;pf-v6-c-check pf-m-standalone\&quot;\n            for=\&quot;data-list-draggable-item-3&amp;quot;-input\&quot;\n          &gt;\n            &lt;input\n              class=\&quot;pf-v6-c-check__input\&quot;\n              type=\&quot;checkbox\&quot;\n              id=\&quot;data-list-draggable-item-3&amp;quot;-input\&quot;\n              name=\&quot;data-list-draggable-item-3&amp;quot;-input\&quot;\n              aria-label=\&quot;Standalone check\&quot;\n            /&gt;\n          &lt;/label&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span\n            class=\&quot;pf-v6-c-data-list__cell-text\&quot;\n            id=\&quot;data-list-draggable-item-3\&quot;\n          &gt;Ghost row&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-draggable-item-4\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-control\&quot;&gt;\n        &lt;button\n          class=\&quot;pf-v6-c-data-list__item-draggable-button\&quot;\n          type=\&quot;button\&quot;\n          aria-label=\&quot;Reorder\&quot;\n          aria-pressed=\&quot;false\&quot;\n          id=\&quot;data-list-draggable-draggable-button-4\&quot;\n          aria-describedby=\&quot;draggable-help\&quot;\n          aria-labelledby=\&quot;data-list-draggable-draggable-button-4 data-list-draggable-item-4\&quot;\n        &gt;\n          &lt;span class=\&quot;pf-v6-c-data-list__item-draggable-icon\&quot;&gt;\n            &lt;i class=\&quot;fas fa-grip-vertical\&quot;&gt;&lt;/i&gt;\n          &lt;/span&gt;\n        &lt;/button&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__check\&quot;&gt;\n          &lt;label\n            class=\&quot;pf-v6-c-check pf-m-standalone\&quot;\n            for=\&quot;data-list-draggable-item-4&amp;quot;-input\&quot;\n          &gt;\n            &lt;input\n              class=\&quot;pf-v6-c-check__input\&quot;\n              type=\&quot;checkbox\&quot;\n              id=\&quot;data-list-draggable-item-4&amp;quot;-input\&quot;\n              name=\&quot;data-list-draggable-item-4&amp;quot;-input\&quot;\n              aria-label=\&quot;Standalone check\&quot;\n            /&gt;\n          &lt;/label&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span\n            class=\&quot;pf-v6-c-data-list__cell-text\&quot;\n            id=\&quot;data-list-draggable-item-4\&quot;\n          &gt;List item&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n&lt;/ul&gt;\n&lt;div\n  class=\&quot;pf-v6-screen-reader\&quot;\n  aria-live=\&quot;assertive\&quot;\n&gt;This is the aria-live section that provides real-time feedback to the user.&lt;/div&gt;\n&quot;]}" 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-2197" data-pf-content="true" class="pf-v6-c-content--h3">Accessibility</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2226" data-pf-content="true" class="pf-v6-c-content--h3">Accessibility</h3>
@@ -450,7 +450,7 @@
 <table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>aria-pressed=&quot;true or false&quot;</code></td><td><code>.pf-v6-c-data-list__item-draggable-button</code></td><td>Indicates that the button is a toggle. When set to “true”, <code>pf-m-active</code> should also be set so that the button displays in an active state.</td></tr><tr><td><code>aria-live</code></td><td><code>[element with live text]</code></td><td>Gives screen reader users live feedback about what’s happening during interaction with the data list, both during drag and drop interactions and keyboard interactions. <strong>Highly Recommended</strong></td></tr><tr><td><code>aria-describedby=&quot;[id value of applicable content]&quot;</code></td><td><code>.pf-v6-c-data-list__item-draggable-button</code></td><td>Gives the draggable button an accessible description by referring to the textual content that describes how to use the button to drag elements. The example here uses a <code>&lt;div id=&quot;draggable-help&quot;&gt;&lt;/div&gt;</code>. <strong>Highly recommended</strong></td></tr><tr><td><code>aria-labelledby=&quot;[id value of .pf-v6-c-data-list__item-draggable-button] [id value of .pf-v6-c-data-list__cell-text]&quot;</code></td><td><code>.pf-v6-c-data-list__item-draggable-button</code></td><td>Provides an accessible name for the draggable button.</td></tr><tr><td><code>id=&quot;[]&quot;</code></td><td><code>.pf-v6-c-data-list__item-draggable-button</code>, <code>.pf-v6-c-data-list__cell-text</code></td><td>Gives the button and the text element accessible IDs</td></tr></tbody></table>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2198" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2227" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
@@ -492,13 +492,13 @@
 <table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-data-list__item-draggable-button</code></td><td><code>&lt;button&gt;</code></td><td>Initiates the draggable button. Use for drag and drop.</td></tr><tr><td><code>.pf-v6-c-data-list__item-draggable-icon</code></td><td><code>&lt;span&gt;</code></td><td>Initiates the draggable button icon.</td></tr><tr><td><code>.pf-m-draggable</code></td><td><code>.pf-v6-c-data-list__item</code></td><td>Modifies a data list item so that it is draggable.</td></tr><tr><td><code>.pf-m-ghost-row</code></td><td><code>.pf-v6-c-data-list__item.pf-m-draggable</code></td><td>Modifies a draggable data list item to be the ghost row.</td></tr><tr><td><code>.pf-m-disabled</code></td><td><code>.pf-v6-c-data-list__item.pf-m-draggable</code></td><td>Modifies a data list draggable item for the disabled state.</td></tr><tr><td><code>.pf-m-drag-over</code></td><td><code>.pf-v6-c-data-list</code></td><td>Modifies the data list to indicate that a draggable item is being dragged over the data list.</td></tr></tbody></table>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2199" data-pf-content="true" class="pf-v6-c-content--h3">Text modifiers</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2228" data-pf-content="true" class="pf-v6-c-content--h3">Text modifiers</h3>
 <astro-island uid="Z29pPGJ" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0],&quot;html&quot;:[0,&quot;&lt;ul\n  class=\&quot;pf-v6-c-data-list\&quot;\n  role=\&quot;list\&quot;\n  aria-label=\&quot;Data list with text modifiers\&quot;\n  id=\&quot;data-list-with-text-modifiers\&quot;\n&gt;\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-with-text-modifiers-item\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span\n            id=\&quot;data-list-with-text-modifiers-item\&quot;\n          &gt;This text will wrap to the next line because it has the default behavior of the data list cell.&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div\n          class=\&quot;pf-v6-c-data-list__cell pf-m-truncate\&quot;\n        &gt;This text will truncate because it is very very long.&lt;/div&gt;\n        &lt;div\n          class=\&quot;pf-v6-c-data-list__cell pf-m-break-word\&quot;\n        &gt;http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org&lt;/div&gt;\n        &lt;div\n          class=\&quot;pf-v6-c-data-list__cell pf-m-nowrap\&quot;\n        &gt;This text will not break or wrap.&lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row pf-m-truncate\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div\n          class=\&quot;pf-v6-c-data-list__cell\&quot;\n        &gt;This text will truncate because it is very very long. This text will truncate because it is very very long.&lt;/div&gt;\n        &lt;div\n          class=\&quot;pf-v6-c-data-list__cell\&quot;\n        &gt;This text will truncate because it is very very long. This text will truncate because it is very very long.&lt;/div&gt;\n        &lt;div\n          class=\&quot;pf-v6-c-data-list__cell\&quot;\n        &gt;This text will truncate because it is very very long. This text will truncate because it is very very long.&lt;/div&gt;\n        &lt;div\n          class=\&quot;pf-v6-c-data-list__cell\&quot;\n        &gt;This text will truncate because it is very very long. This text will truncate because it is very very long.&lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row pf-m-break-word\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div\n          class=\&quot;pf-v6-c-data-list__cell\&quot;\n        &gt;http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org&lt;/div&gt;\n        &lt;div\n          class=\&quot;pf-v6-c-data-list__cell\&quot;\n        &gt;http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org&lt;/div&gt;\n        &lt;div\n          class=\&quot;pf-v6-c-data-list__cell\&quot;\n        &gt;http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org&lt;/div&gt;\n        &lt;div\n          class=\&quot;pf-v6-c-data-list__cell\&quot;\n        &gt;http://thisisaverylongurlthatneedstobreakusethebreakwordmodifier.org&lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row pf-m-nowrap\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;This text will not break or wrap.&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;This text will not break or wrap.&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;This text will not break or wrap.&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;This text will not break or wrap.&lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n&lt;/ul&gt;\n&quot;]}" 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-2200" data-pf-content="true" class="pf-v6-c-content--h3">Text-modifiers-data-list-text</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2229" data-pf-content="true" class="pf-v6-c-content--h3">Text-modifiers-data-list-text</h3>
 <astro-island uid="14yr7B" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0],&quot;html&quot;:[0,&quot;&lt;ul\n  class=\&quot;pf-v6-c-data-list\&quot;\n  role=\&quot;list\&quot;\n  aria-label=\&quot;Data list with modifiers and text\&quot;\n  id=\&quot;data-list-with-text-modifiers-and-text\&quot;\n&gt;\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-with-text-modifiers-and-text-item-1\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span\n            id=\&quot;data-list-with-text-modifiers-and-text-item-1\&quot;\n          &gt;This text will wrap to the next line because it has the default behavior of the data list cell.&lt;/span&gt;\n          &lt;span\n            class=\&quot;pf-v6-c-data-list__text pf-m-truncate\&quot;\n          &gt;This is data list text, you can apply `pf-m-truncate` directly to the text. This is data list text, you can apply `pf-m-truncate` directly to the text.&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          This text will wrap to the next line because it has the default behavior of the data list cell.\n          &lt;span\n            class=\&quot;pf-v6-c-data-list__text pf-m-break-word\&quot;\n          &gt;http://thisisaverylongdatalisttextthatneedstobreakusethebreakwordmodifier.org&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          This text will wrap to the next line because it has the default behavior of the data list cell.\n          &lt;span\n            class=\&quot;pf-v6-c-data-list__text pf-m-nowrap\&quot;\n          &gt;This is data list text, you can apply `pf-m-nowrap` directly to the text.&lt;/span&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n&lt;/ul&gt;\n&quot;]}" 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-2201" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2230" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
@@ -530,19 +530,19 @@
 <table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-data-list__text</code></td><td><code>*</code></td><td>Inserts the data list text element. Use this class to modify specific text directly.</td></tr><tr><td><code>.pf-m-truncate</code></td><td><code>.pf-v6-c-data-list</code>, <code>.pf-v6-c-data-list__item-row</code>, <code>.pf-v6-c-data-list__cell</code>, <code>.pf-v6-c-data-list__text</code></td><td>Modifies the data list element so that text is truncated.</td></tr><tr><td><code>.pf-m-break-word</code></td><td><code>.pf-v6-c-data-list</code>, <code>.pf-v6-c-data-list__item-row</code>, <code>.pf-v6-c-data-list__cell</code>, <code>.pf-v6-c-data-list__text</code></td><td>Modifies the data list element so that text breaks to the next line.</td></tr><tr><td><code>.pf-m-nowrap</code></td><td><code>.pf-v6-c-data-list</code>, <code>.pf-v6-c-data-list__item-row</code>, <code>.pf-v6-c-data-list__cell</code>, <code>.pf-v6-c-data-list__text</code></td><td>Modifies the data list element so that text does not wrap to the next line.</td></tr></tbody></table>
-<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2202" data-pf-content="true" class="pf-v6-c-content--h2">Documentation</h2>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2203" data-pf-content="true" class="pf-v6-c-content--h3">Overview</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2211" data-pf-content="true" class="pf-v6-c-content--p">The DataList component provides a flexible alternative to the Table component, wherein individual data points may or may not exist within each row. DataList relies upon PatternFly layouts to achieve desired presentation within <code>pf-v6-c-data-list__cell</code>s. DataLists do not have headers. If headers are required, use the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2204" data-pf-content="true" class="pf-v6-c-content--a">table component</a>.</p>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2205" data-pf-content="true" class="pf-v6-c-content--h3">Grid</h3>
+<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2231" data-pf-content="true" class="pf-v6-c-content--h2">Documentation</h2>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2232" data-pf-content="true" class="pf-v6-c-content--h3">Overview</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2240" data-pf-content="true" class="pf-v6-c-content--p">The DataList component provides a flexible alternative to the Table component, wherein individual data points may or may not exist within each row. DataList relies upon PatternFly layouts to achieve desired presentation within <code>pf-v6-c-data-list__cell</code>s. DataLists do not have headers. If headers are required, use the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2233" data-pf-content="true" class="pf-v6-c-content--a">table component</a>.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2234" data-pf-content="true" class="pf-v6-c-content--h3">Grid</h3>
 <astro-island uid="VYPFb" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0],&quot;html&quot;:[0,&quot;&lt;ul\n  class=\&quot;pf-v6-c-data-list pf-m-grid\&quot;\n  role=\&quot;list\&quot;\n  aria-label=\&quot;Grid data list example\&quot;\n  id=\&quot;data-list-grid\&quot;\n&gt;\n  &lt;li class=\&quot;pf-v6-c-data-list__item\&quot; aria-labelledby=\&quot;data-list-grid-item-1\&quot;&gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span id=\&quot;data-list-grid-item-1\&quot;&gt;Cell 1&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 2&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 3&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 4&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 5&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 6&lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n  &lt;li class=\&quot;pf-v6-c-data-list__item\&quot; aria-labelledby=\&quot;data-list-grid-item-2\&quot;&gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span id=\&quot;data-list-grid-item-2\&quot;&gt;Cell 1&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 2&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 3&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 4&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 5&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 6&lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n&lt;/ul&gt;\n&quot;]}" 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-2206" data-pf-content="true" class="pf-v6-c-content--h3">Grid (small breakpoint)</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2235" data-pf-content="true" class="pf-v6-c-content--h3">Grid (small breakpoint)</h3>
 <astro-island uid="1cFYfL" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0],&quot;html&quot;:[0,&quot;&lt;ul\n  class=\&quot;pf-v6-c-data-list pf-m-grid-sm\&quot;\n  role=\&quot;list\&quot;\n  aria-label=\&quot;Grid small data list example\&quot;\n  id=\&quot;data-list-grid-small\&quot;\n&gt;\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-grid-small-item-1\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span id=\&quot;data-list-grid-small-item-1\&quot;&gt;Cell 1&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 2&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 3&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 4&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 5&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 6&lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-grid-small-item-2\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span id=\&quot;data-list-grid-small-item-2\&quot;&gt;Cell 1&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 2&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 3&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 4&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 5&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 6&lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n&lt;/ul&gt;\n&quot;]}" 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-2207" data-pf-content="true" class="pf-v6-c-content--h3">Grid none</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2236" data-pf-content="true" class="pf-v6-c-content--h3">Grid none</h3>
 <astro-island uid="exaD6" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0],&quot;html&quot;:[0,&quot;&lt;ul\n  class=\&quot;pf-v6-c-data-list pf-m-grid-none\&quot;\n  role=\&quot;list\&quot;\n  aria-label=\&quot;Grid none data list example\&quot;\n  id=\&quot;data-list-grid-none\&quot;\n&gt;\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-grid-none-item-1\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span id=\&quot;data-list-grid-none-item-1\&quot;&gt;Cell 1&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 2&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 3&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 4&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 5&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 6&lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n  &lt;li\n    class=\&quot;pf-v6-c-data-list__item\&quot;\n    aria-labelledby=\&quot;data-list-grid-none-item-2\&quot;\n  &gt;\n    &lt;div class=\&quot;pf-v6-c-data-list__item-row\&quot;&gt;\n      &lt;div class=\&quot;pf-v6-c-data-list__item-content\&quot;&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;\n          &lt;span id=\&quot;data-list-grid-none-item-2\&quot;&gt;Cell 1&lt;/span&gt;\n        &lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 2&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 3&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 4&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 5&lt;/div&gt;\n        &lt;div class=\&quot;pf-v6-c-data-list__cell\&quot;&gt;Cell 6&lt;/div&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/li&gt;\n&lt;/ul&gt;\n&quot;]}" 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-2208" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2237" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
@@ -558,6 +558,6 @@
-<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}</code></td><td><code>.pf-v6-c-data-list</code></td><td>Modifies the data list to switch to a grid layout at a specified <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2209" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>. <code>.pf-m-grid</code> will display the grid layout at all breakpoints. <code>.pf-m-grid-none</code> will display the desktop layout at all breakpoints. <strong>Note:</strong> Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint.</td></tr></tbody></table> <div class="pf-v6-l-stack pf-m-gutter"><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-2171" 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>
+<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}</code></td><td><code>.pf-v6-c-data-list</code></td><td>Modifies the data list to switch to a grid layout at a specified <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2238" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>. <code>.pf-m-grid</code> will display the grid layout at all breakpoints. <code>.pf-m-grid-none</code> will display the desktop layout at all breakpoints. <strong>Note:</strong> Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint.</td></tr></tbody></table> <div class="pf-v6-l-stack pf-m-gutter"><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-2200" 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="2spRWS" 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-data-list&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>