@patternfly/patternfly 6.5.0-prerelease.4 → 6.5.0-prerelease.41

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 (338) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.png +0 -0
  10. package/assets/images/compass--wallpaper-light.png +0 -0
  11. package/base/normalize.scss +7 -0
  12. package/base/patternfly-common.css +50 -0
  13. package/base/patternfly-common.scss +59 -0
  14. package/base/patternfly-svg-icons.css +11 -0
  15. package/base/patternfly-svg-icons.scss +14 -0
  16. package/base/patternfly-variables.css +345 -14
  17. package/base/patternfly-variables.scss +40 -0
  18. package/base/tokens/tokens-dark.scss +51 -3
  19. package/base/tokens/tokens-default.scss +67 -13
  20. package/base/tokens/tokens-glass-dark.scss +9 -0
  21. package/base/tokens/tokens-glass.scss +9 -0
  22. package/base/tokens/tokens-local.scss +16 -0
  23. package/base/tokens/tokens-palette.scss +3 -1
  24. package/base/tokens/tokens-redhat-dark.scss +14 -0
  25. package/base/tokens/tokens-redhat-glass-dark.scss +16 -0
  26. package/base/tokens/tokens-redhat-glass.scss +15 -0
  27. package/base/tokens/tokens-redhat-highcontrast-dark.scss +47 -0
  28. package/base/tokens/tokens-redhat-highcontrast.scss +127 -0
  29. package/base/tokens/tokens-redhat.scss +15 -0
  30. package/components/AboutModalBox/about-modal-box.css +36 -26
  31. package/components/Accordion/accordion.css +16 -13
  32. package/components/Accordion/accordion.scss +0 -1
  33. package/components/ActionList/action-list.css +2 -0
  34. package/components/ActionList/action-list.scss +2 -0
  35. package/components/Alert/alert.css +5 -4
  36. package/components/Avatar/avatar.css +12 -4
  37. package/components/BackgroundImage/background-image.css +6 -3
  38. package/components/Banner/banner.css +8 -6
  39. package/components/Brand/brand.css +3 -1
  40. package/components/Breadcrumb/breadcrumb.css +4 -3
  41. package/components/Button/button.css +39 -9
  42. package/components/Button/button.scss +40 -4
  43. package/components/CalendarMonth/calendar-month.css +4 -3
  44. package/components/Card/card.css +19 -6
  45. package/components/Card/card.scss +15 -1
  46. package/components/ClipboardCopy/clipboard-copy.css +4 -3
  47. package/components/CodeEditor/code-editor.css +1 -1
  48. package/components/CodeEditor/code-editor.scss +1 -1
  49. package/components/Compass/compass.css +320 -0
  50. package/components/Compass/compass.scss +349 -0
  51. package/components/DataList/data-list.css +33 -22
  52. package/components/DataList/data-list.scss +6 -1
  53. package/components/DescriptionList/description-list-order.scss +5 -1
  54. package/components/DescriptionList/description-list.css +7 -5
  55. package/components/DescriptionList/description-list.scss +5 -1
  56. package/components/Divider/divider.css +7 -5
  57. package/components/Drawer/drawer.css +110 -56
  58. package/components/Drawer/drawer.scss +69 -9
  59. package/components/DualListSelector/dual-list-selector.css +17 -11
  60. package/components/ExpandableSection/expandable-section.css +19 -14
  61. package/components/ExpandableSection/expandable-section.scss +4 -1
  62. package/components/Form/form.css +1 -1
  63. package/components/Form/form.scss +1 -1
  64. package/components/FormControl/form-control.css +1 -1
  65. package/components/FormControl/form-control.scss +1 -1
  66. package/components/Hero/hero.css +74 -0
  67. package/components/Hero/hero.scss +86 -0
  68. package/components/JumpLinks/jump-links.css +4 -3
  69. package/components/JumpLinks/jump-links.scss +5 -1
  70. package/components/Label/label-group.css +2 -2
  71. package/components/Label/label-group.scss +2 -2
  72. package/components/Label/label.css +4 -3
  73. package/components/Login/login.css +51 -37
  74. package/components/Masthead/masthead.css +70 -16
  75. package/components/Masthead/masthead.scss +54 -1
  76. package/components/Menu/menu.css +23 -14
  77. package/components/MenuToggle/menu-toggle.css +4 -0
  78. package/components/MenuToggle/menu-toggle.scss +5 -0
  79. package/components/ModalBox/modal-box.css +9 -7
  80. package/components/ModalBox/modal-box.scss +2 -2
  81. package/components/Nav/nav.css +72 -9
  82. package/components/Nav/nav.scss +75 -3
  83. package/components/NotificationDrawer/notification-drawer.css +8 -6
  84. package/components/NotificationDrawer/notification-drawer.scss +2 -0
  85. package/components/Page/page.css +55 -29
  86. package/components/Page/page.scss +44 -5
  87. package/components/Pagination/pagination.scss +5 -1
  88. package/components/ProgressStepper/progress-stepper.scss +5 -1
  89. package/components/Sidebar/sidebar.css +1 -1
  90. package/components/Sidebar/sidebar.scss +7 -3
  91. package/components/Skeleton/skeleton.css +16 -15
  92. package/components/Slider/slider.css +32 -18
  93. package/components/Switch/switch.css +3 -1
  94. package/components/Table/table-grid.css +28 -36
  95. package/components/Table/table-grid.scss +4 -4
  96. package/components/Table/table-tree-view.css +4 -2
  97. package/components/Table/table.css +31 -27
  98. package/components/Tabs/tabs.css +33 -16
  99. package/components/Tabs/tabs.scss +33 -5
  100. package/components/Toolbar/toolbar.css +46 -14
  101. package/components/Toolbar/toolbar.scss +33 -5
  102. package/components/TreeView/tree-view.css +44 -13
  103. package/components/TreeView/tree-view.scss +31 -0
  104. package/components/Wizard/wizard.css +20 -16
  105. package/components/Wizard/wizard.scss +3 -3
  106. package/components/_index.css +1460 -633
  107. package/components/_index.scss +3 -1
  108. package/docs/components/Avatar/examples/Avatar.md +4 -4
  109. package/docs/components/Brand/examples/Brand.md +2 -2
  110. package/docs/components/Button/examples/Button.md +116 -0
  111. package/docs/components/Card/examples/Card.md +154 -0
  112. package/docs/components/Compass/examples/Compass.css +17 -0
  113. package/docs/components/Compass/examples/Compass.md +118 -0
  114. package/docs/components/DataList/examples/DataList.md +184 -188
  115. package/docs/components/DescriptionList/examples/DescriptionList.md +2 -2
  116. package/docs/components/Divider/examples/Divider.md +2 -2
  117. package/docs/components/Drawer/examples/Drawer.md +83 -17
  118. package/docs/components/Hero/examples/Hero.md +25 -0
  119. package/docs/components/Icon/examples/Icon.md +1 -1
  120. package/docs/components/InputGroup/examples/InputGroup.md +1 -1
  121. package/docs/components/JumpLinks/examples/JumpLinks.md +2 -2
  122. package/docs/components/Masthead/examples/masthead.md +68 -1
  123. package/docs/components/Menu/examples/Menu.md +2 -2
  124. package/docs/components/MenuToggle/examples/MenuToggle.md +40 -0
  125. package/docs/components/ModalBox/examples/ModalBox.md +1 -1
  126. package/docs/components/Nav/examples/Navigation.md +44 -0
  127. package/docs/components/Page/examples/Page.md +39 -2
  128. package/docs/components/Pagination/examples/Pagination.md +3 -3
  129. package/docs/components/ProgressStepper/examples/ProgressStepper.md +2 -2
  130. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  131. package/docs/components/Table/examples/Table.md +4 -3
  132. package/docs/components/Tabs/examples/Tabs.md +998 -83
  133. package/docs/components/Toolbar/examples/Toolbar.md +35 -7
  134. package/docs/components/TreeView/examples/TreeView.md +38 -26
  135. package/docs/components/Wizard/examples/Wizard.md +15 -15
  136. package/docs/demos/AboutModal/examples/AboutModal.md +5 -5
  137. package/docs/demos/Alert/examples/Alert.md +15 -15
  138. package/docs/demos/BackToTop/examples/BackToTop.md +5 -5
  139. package/docs/demos/Banner/examples/Banner.md +10 -10
  140. package/docs/demos/Card/examples/Card.md +14 -2
  141. package/docs/demos/CardView/examples/CardView.md +5 -5
  142. package/docs/demos/Compass/examples/Compass.md +6470 -0
  143. package/docs/demos/Dashboard/examples/Dashboard.md +6 -9
  144. package/docs/demos/DataList/examples/DataList.md +20 -23
  145. package/docs/demos/DescriptionList/examples/DescriptionList.md +57 -50
  146. package/docs/demos/Drawer/examples/Drawer.md +67 -60
  147. package/docs/demos/JumpLinks/examples/JumpLinks.md +30 -30
  148. package/docs/demos/Masthead/examples/Masthead.md +55 -58
  149. package/docs/demos/Modal/examples/Modal.md +30 -33
  150. package/docs/demos/Nav/examples/Nav.md +299 -62
  151. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +25 -25
  152. package/docs/demos/Page/examples/Page.md +70 -79
  153. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +178 -200
  154. package/docs/demos/Skeleton/examples/Skeleton.md +5 -5
  155. package/docs/demos/Table/examples/Table.md +1922 -78
  156. package/docs/demos/Tabs/examples/Tabs.md +102 -39
  157. package/docs/demos/Toolbar/examples/Toolbar.md +10 -10
  158. package/docs/demos/Wizard/examples/Wizard.md +76 -82
  159. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  160. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  161. package/docs/layouts/Flex/examples/Flex.css +3 -3
  162. package/docs/layouts/Flex/examples/Flex.md +3 -2
  163. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  164. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  165. package/docs/layouts/Grid/examples/Grid.css +1 -1
  166. package/docs/layouts/Grid/examples/Grid.md +6 -5
  167. package/docs/layouts/Level/examples/Level.css +3 -3
  168. package/docs/layouts/Level/examples/Level.md +2 -1
  169. package/docs/layouts/Split/examples/Split.css +1 -1
  170. package/docs/layouts/Split/examples/Split.md +2 -1
  171. package/docs/layouts/Stack/examples/Stack.css +3 -3
  172. package/docs/layouts/Stack/examples/Stack.md +2 -1
  173. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  174. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  175. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  176. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  177. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  178. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  179. package/docs/utilities/Display/examples/Display.css +1 -1
  180. package/docs/utilities/Display/examples/Display.md +3 -2
  181. package/docs/utilities/Flex/examples/Flex.css +7 -7
  182. package/docs/utilities/Flex/examples/Flex.md +3 -2
  183. package/docs/utilities/Float/examples/Float.css +2 -2
  184. package/docs/utilities/Float/examples/Float.md +3 -2
  185. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  186. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  187. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  188. package/docs/utilities/Text/examples/Text.md +5 -4
  189. package/icons/PfIcons/add-circle-o.svg +4 -0
  190. package/icons/PfIcons/ansible-tower.svg +4 -0
  191. package/icons/PfIcons/applications.svg +4 -0
  192. package/icons/PfIcons/arrow.svg +4 -0
  193. package/icons/PfIcons/asleep.svg +4 -0
  194. package/icons/PfIcons/attention-bell.svg +4 -0
  195. package/icons/PfIcons/automation.svg +4 -0
  196. package/icons/PfIcons/bell.svg +4 -0
  197. package/icons/PfIcons/blueprint.svg +4 -0
  198. package/icons/PfIcons/build.svg +4 -0
  199. package/icons/PfIcons/builder-image.svg +4 -0
  200. package/icons/PfIcons/bundle.svg +4 -0
  201. package/icons/PfIcons/catalog.svg +4 -0
  202. package/icons/PfIcons/chat.svg +4 -0
  203. package/icons/PfIcons/close.svg +4 -0
  204. package/icons/PfIcons/cloud-security.svg +4 -0
  205. package/icons/PfIcons/cloud-tenant.svg +4 -0
  206. package/icons/PfIcons/cluster.svg +4 -0
  207. package/icons/PfIcons/connected.svg +4 -0
  208. package/icons/PfIcons/container-node.svg +4 -0
  209. package/icons/PfIcons/cpu.svg +4 -0
  210. package/icons/PfIcons/critical-risk.svg +4 -0
  211. package/icons/PfIcons/data-processor.svg +4 -0
  212. package/icons/PfIcons/data-sink.svg +4 -0
  213. package/icons/PfIcons/data-source.svg +4 -0
  214. package/icons/PfIcons/degraded.svg +4 -0
  215. package/icons/PfIcons/disconnected.svg +4 -0
  216. package/icons/PfIcons/domain.svg +4 -0
  217. package/icons/PfIcons/edit.svg +4 -0
  218. package/icons/PfIcons/enhancement.svg +4 -0
  219. package/icons/PfIcons/enterprise.svg +4 -0
  220. package/icons/PfIcons/equalizer.svg +4 -0
  221. package/icons/PfIcons/error-circle-o.svg +4 -0
  222. package/icons/PfIcons/export.svg +4 -0
  223. package/icons/PfIcons/filter.svg +4 -0
  224. package/icons/PfIcons/flavor.svg +4 -0
  225. package/icons/PfIcons/folder-close.svg +4 -0
  226. package/icons/PfIcons/folder-open.svg +4 -0
  227. package/icons/PfIcons/globe-route.svg +4 -0
  228. package/icons/PfIcons/help.svg +4 -0
  229. package/icons/PfIcons/history.svg +4 -0
  230. package/icons/PfIcons/home.svg +4 -0
  231. package/icons/PfIcons/import.svg +4 -0
  232. package/icons/PfIcons/in-progress.svg +4 -0
  233. package/icons/PfIcons/info.svg +4 -0
  234. package/icons/PfIcons/infrastructure.svg +4 -0
  235. package/icons/PfIcons/integration.svg +4 -0
  236. package/icons/PfIcons/key.svg +4 -0
  237. package/icons/PfIcons/locked.svg +4 -0
  238. package/icons/PfIcons/maintenance.svg +4 -0
  239. package/icons/PfIcons/memory.svg +4 -0
  240. package/icons/PfIcons/messages.svg +4 -0
  241. package/icons/PfIcons/middleware.svg +4 -0
  242. package/icons/PfIcons/migration.svg +4 -0
  243. package/icons/PfIcons/module.svg +4 -0
  244. package/icons/PfIcons/monitoring.svg +4 -0
  245. package/icons/PfIcons/multicluster.svg +4 -0
  246. package/icons/PfIcons/namespaces.svg +4 -0
  247. package/icons/PfIcons/network.svg +4 -0
  248. package/icons/PfIcons/new-process.svg +4 -0
  249. package/icons/PfIcons/not-started.svg +4 -0
  250. package/icons/PfIcons/off.svg +4 -0
  251. package/icons/PfIcons/ok.svg +4 -0
  252. package/icons/PfIcons/on-running.svg +4 -0
  253. package/icons/PfIcons/on.svg +4 -0
  254. package/icons/PfIcons/open-drawer-right.svg +4 -0
  255. package/icons/PfIcons/openshift.svg +4 -0
  256. package/icons/PfIcons/openstack.svg +4 -0
  257. package/icons/PfIcons/optimize.svg +4 -0
  258. package/icons/PfIcons/orders.svg +4 -0
  259. package/icons/PfIcons/os-image.svg +4 -0
  260. package/icons/PfIcons/package.svg +4 -0
  261. package/icons/PfIcons/panel-close.svg +4 -0
  262. package/icons/PfIcons/panel-open.svg +4 -0
  263. package/icons/PfIcons/paused.svg +4 -0
  264. package/icons/PfIcons/pending.svg +4 -0
  265. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  266. package/icons/PfIcons/pficon-history.svg +4 -0
  267. package/icons/PfIcons/pficon-network-range.svg +4 -0
  268. package/icons/PfIcons/pficon-satellite.svg +4 -0
  269. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  270. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  271. package/icons/PfIcons/pficon-template.svg +4 -0
  272. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  273. package/icons/PfIcons/plugged.svg +4 -0
  274. package/icons/PfIcons/port.svg +4 -0
  275. package/icons/PfIcons/print.svg +4 -0
  276. package/icons/PfIcons/private.svg +4 -0
  277. package/icons/PfIcons/process-automation.svg +4 -0
  278. package/icons/PfIcons/project.svg +4 -0
  279. package/icons/PfIcons/rebalance.svg +4 -0
  280. package/icons/PfIcons/rebooting.svg +4 -0
  281. package/icons/PfIcons/regions.svg +4 -0
  282. package/icons/PfIcons/registry.svg +4 -0
  283. package/icons/PfIcons/remove2.svg +4 -0
  284. package/icons/PfIcons/replicator.svg +4 -0
  285. package/icons/PfIcons/repository.svg +4 -0
  286. package/icons/PfIcons/resource-pool.svg +4 -0
  287. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  288. package/icons/PfIcons/resources-almost-full.svg +4 -0
  289. package/icons/PfIcons/resources-empty.svg +4 -0
  290. package/icons/PfIcons/resources-full.svg +4 -0
  291. package/icons/PfIcons/running.svg +4 -0
  292. package/icons/PfIcons/save.svg +4 -0
  293. package/icons/PfIcons/screen.svg +4 -0
  294. package/icons/PfIcons/security.svg +4 -0
  295. package/icons/PfIcons/server-group.svg +4 -0
  296. package/icons/PfIcons/server.svg +4 -0
  297. package/icons/PfIcons/service-catalog.svg +4 -0
  298. package/icons/PfIcons/service.svg +4 -0
  299. package/icons/PfIcons/services.svg +4 -0
  300. package/icons/PfIcons/severity-critical.svg +4 -0
  301. package/icons/PfIcons/severity-important.svg +4 -0
  302. package/icons/PfIcons/severity-minor.svg +4 -0
  303. package/icons/PfIcons/severity-moderate.svg +4 -0
  304. package/icons/PfIcons/severity-none.svg +4 -0
  305. package/icons/PfIcons/severity-undefined.svg +4 -0
  306. package/icons/PfIcons/spinner.svg +4 -0
  307. package/icons/PfIcons/spinner2.svg +4 -0
  308. package/icons/PfIcons/storage-domain.svg +4 -0
  309. package/icons/PfIcons/task.svg +4 -0
  310. package/icons/PfIcons/tenant.svg +4 -0
  311. package/icons/PfIcons/thumb-tack.svg +4 -0
  312. package/icons/PfIcons/topology.svg +4 -0
  313. package/icons/PfIcons/treeview.svg +4 -0
  314. package/icons/PfIcons/trend-down.svg +4 -0
  315. package/icons/PfIcons/trend-up.svg +4 -0
  316. package/icons/PfIcons/unknown.svg +4 -0
  317. package/icons/PfIcons/unlocked.svg +4 -0
  318. package/icons/PfIcons/unplugged.svg +4 -0
  319. package/icons/PfIcons/user.svg +4 -0
  320. package/icons/PfIcons/users.svg +4 -0
  321. package/icons/PfIcons/virtual-machine.svg +4 -0
  322. package/icons/PfIcons/volume.svg +4 -0
  323. package/icons/PfIcons/warning-triangle.svg +4 -0
  324. package/icons/PfIcons/zone.svg +4 -0
  325. package/layouts/Flex/flex.scss +83 -19
  326. package/layouts/Gallery/gallery.css +6 -2
  327. package/layouts/_index.css +6 -2
  328. package/package.json +34 -16
  329. package/patternfly-base-no-globals.css +406 -14
  330. package/patternfly-base.css +413 -14
  331. package/patternfly-charts.css +3 -3
  332. package/patternfly-no-globals.css +1796 -573
  333. package/patternfly.css +1803 -573
  334. package/patternfly.min.css +1 -1
  335. package/patternfly.min.css.map +1 -1
  336. package/sass-utilities/functions.scss +32 -25
  337. package/sass-utilities/mixins.scss +36 -20
  338. package/sass-utilities/namespaces-components.scss +6 -0
@@ -15,7 +15,7 @@ wrapperTag: div
15
15
  <span class="pf-v6-c-button__text">Skip to content</span>
16
16
  </a>
17
17
  </div>
18
- <header class="pf-v6-c-masthead" id="basic-demo-masthead">
18
+ <header class="pf-v6-c-masthead" id="basic-demo-docked">
19
19
  <div class="pf-v6-c-masthead__main">
20
20
  <span class="pf-v6-c-masthead__toggle">
21
21
  <button
@@ -57,7 +57,7 @@ wrapperTag: div
57
57
  y1="2.25860997e-13%"
58
58
  x2="32%"
59
59
  y2="100%"
60
- id="linearGradient-basic-demo-masthead"
60
+ id="linearGradient-basic-demo-docked"
61
61
  >
62
62
  <stop stop-color="#2B9AF3" offset="0%" />
63
63
  <stop
@@ -111,11 +111,11 @@ wrapperTag: div
111
111
  />
112
112
  <path
113
113
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
114
- fill="url(#linearGradient-basic-demo-masthead)"
114
+ fill="url(#linearGradient-basic-demo-docked)"
115
115
  />
116
116
  <path
117
117
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
118
- fill="url(#linearGradient-basic-demo-masthead)"
118
+ fill="url(#linearGradient-basic-demo-docked)"
119
119
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
120
120
  />
121
121
  </g>
@@ -125,7 +125,7 @@ wrapperTag: div
125
125
  </div>
126
126
  </div>
127
127
  <div class="pf-v6-c-masthead__content">
128
- <div class="pf-v6-c-toolbar pf-m-static" id="basic-demo-masthead-toolbar">
128
+ <div class="pf-v6-c-toolbar pf-m-static" id="basic-demo-docked-toolbar">
129
129
  <div class="pf-v6-c-toolbar__content">
130
130
  <div class="pf-v6-c-toolbar__content-section">
131
131
  <div
@@ -1032,7 +1032,7 @@ wrapperTag: div
1032
1032
  <span class="pf-v6-c-button__text">Skip to content</span>
1033
1033
  </a>
1034
1034
  </div>
1035
- <header class="pf-v6-c-masthead" id="sortable-demo-masthead">
1035
+ <header class="pf-v6-c-masthead" id="sortable-demo-docked">
1036
1036
  <div class="pf-v6-c-masthead__main">
1037
1037
  <span class="pf-v6-c-masthead__toggle">
1038
1038
  <button
@@ -1074,7 +1074,7 @@ wrapperTag: div
1074
1074
  y1="2.25860997e-13%"
1075
1075
  x2="32%"
1076
1076
  y2="100%"
1077
- id="linearGradient-sortable-demo-masthead"
1077
+ id="linearGradient-sortable-demo-docked"
1078
1078
  >
1079
1079
  <stop stop-color="#2B9AF3" offset="0%" />
1080
1080
  <stop
@@ -1128,11 +1128,11 @@ wrapperTag: div
1128
1128
  />
1129
1129
  <path
1130
1130
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1131
- fill="url(#linearGradient-sortable-demo-masthead)"
1131
+ fill="url(#linearGradient-sortable-demo-docked)"
1132
1132
  />
1133
1133
  <path
1134
1134
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1135
- fill="url(#linearGradient-sortable-demo-masthead)"
1135
+ fill="url(#linearGradient-sortable-demo-docked)"
1136
1136
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1137
1137
  />
1138
1138
  </g>
@@ -1144,7 +1144,7 @@ wrapperTag: div
1144
1144
  <div class="pf-v6-c-masthead__content">
1145
1145
  <div
1146
1146
  class="pf-v6-c-toolbar pf-m-static"
1147
- id="sortable-demo-masthead-toolbar"
1147
+ id="sortable-demo-docked-toolbar"
1148
1148
  >
1149
1149
  <div class="pf-v6-c-toolbar__content">
1150
1150
  <div class="pf-v6-c-toolbar__content-section">
@@ -2156,7 +2156,7 @@ wrapperTag: div
2156
2156
  <span class="pf-v6-c-button__text">Skip to content</span>
2157
2157
  </a>
2158
2158
  </div>
2159
- <header class="pf-v6-c-masthead" id="expandable-demo-masthead">
2159
+ <header class="pf-v6-c-masthead" id="expandable-demo-docked">
2160
2160
  <div class="pf-v6-c-masthead__main">
2161
2161
  <span class="pf-v6-c-masthead__toggle">
2162
2162
  <button
@@ -2198,7 +2198,7 @@ wrapperTag: div
2198
2198
  y1="2.25860997e-13%"
2199
2199
  x2="32%"
2200
2200
  y2="100%"
2201
- id="linearGradient-expandable-demo-masthead"
2201
+ id="linearGradient-expandable-demo-docked"
2202
2202
  >
2203
2203
  <stop stop-color="#2B9AF3" offset="0%" />
2204
2204
  <stop
@@ -2252,11 +2252,11 @@ wrapperTag: div
2252
2252
  />
2253
2253
  <path
2254
2254
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2255
- fill="url(#linearGradient-expandable-demo-masthead)"
2255
+ fill="url(#linearGradient-expandable-demo-docked)"
2256
2256
  />
2257
2257
  <path
2258
2258
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
2259
- fill="url(#linearGradient-expandable-demo-masthead)"
2259
+ fill="url(#linearGradient-expandable-demo-docked)"
2260
2260
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2261
2261
  />
2262
2262
  </g>
@@ -2268,7 +2268,7 @@ wrapperTag: div
2268
2268
  <div class="pf-v6-c-masthead__content">
2269
2269
  <div
2270
2270
  class="pf-v6-c-toolbar pf-m-static"
2271
- id="expandable-demo-masthead-toolbar"
2271
+ id="expandable-demo-docked-toolbar"
2272
2272
  >
2273
2273
  <div class="pf-v6-c-toolbar__content">
2274
2274
  <div class="pf-v6-c-toolbar__content-section">
@@ -3451,7 +3451,7 @@ wrapperTag: div
3451
3451
  <span class="pf-v6-c-button__text">Skip to content</span>
3452
3452
  </a>
3453
3453
  </div>
3454
- <header class="pf-v6-c-masthead" id="compact-demo-masthead">
3454
+ <header class="pf-v6-c-masthead" id="compact-demo-docked">
3455
3455
  <div class="pf-v6-c-masthead__main">
3456
3456
  <span class="pf-v6-c-masthead__toggle">
3457
3457
  <button
@@ -3493,7 +3493,7 @@ wrapperTag: div
3493
3493
  y1="2.25860997e-13%"
3494
3494
  x2="32%"
3495
3495
  y2="100%"
3496
- id="linearGradient-compact-demo-masthead"
3496
+ id="linearGradient-compact-demo-docked"
3497
3497
  >
3498
3498
  <stop stop-color="#2B9AF3" offset="0%" />
3499
3499
  <stop
@@ -3547,11 +3547,11 @@ wrapperTag: div
3547
3547
  />
3548
3548
  <path
3549
3549
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3550
- fill="url(#linearGradient-compact-demo-masthead)"
3550
+ fill="url(#linearGradient-compact-demo-docked)"
3551
3551
  />
3552
3552
  <path
3553
3553
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
3554
- fill="url(#linearGradient-compact-demo-masthead)"
3554
+ fill="url(#linearGradient-compact-demo-docked)"
3555
3555
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3556
3556
  />
3557
3557
  </g>
@@ -3561,10 +3561,7 @@ wrapperTag: div
3561
3561
  </div>
3562
3562
  </div>
3563
3563
  <div class="pf-v6-c-masthead__content">
3564
- <div
3565
- class="pf-v6-c-toolbar pf-m-static"
3566
- id="compact-demo-masthead-toolbar"
3567
- >
3564
+ <div class="pf-v6-c-toolbar pf-m-static" id="compact-demo-docked-toolbar">
3568
3565
  <div class="pf-v6-c-toolbar__content">
3569
3566
  <div class="pf-v6-c-toolbar__content-section">
3570
3567
  <div
@@ -4405,7 +4402,7 @@ wrapperTag: div
4405
4402
  <span class="pf-v6-c-button__text">Skip to content</span>
4406
4403
  </a>
4407
4404
  </div>
4408
- <header class="pf-v6-c-masthead" id="compound-expansion-demo-masthead">
4405
+ <header class="pf-v6-c-masthead" id="compound-expansion-demo-docked">
4409
4406
  <div class="pf-v6-c-masthead__main">
4410
4407
  <span class="pf-v6-c-masthead__toggle">
4411
4408
  <button
@@ -4447,7 +4444,7 @@ wrapperTag: div
4447
4444
  y1="2.25860997e-13%"
4448
4445
  x2="32%"
4449
4446
  y2="100%"
4450
- id="linearGradient-compound-expansion-demo-masthead"
4447
+ id="linearGradient-compound-expansion-demo-docked"
4451
4448
  >
4452
4449
  <stop stop-color="#2B9AF3" offset="0%" />
4453
4450
  <stop
@@ -4501,11 +4498,11 @@ wrapperTag: div
4501
4498
  />
4502
4499
  <path
4503
4500
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4504
- fill="url(#linearGradient-compound-expansion-demo-masthead)"
4501
+ fill="url(#linearGradient-compound-expansion-demo-docked)"
4505
4502
  />
4506
4503
  <path
4507
4504
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
4508
- fill="url(#linearGradient-compound-expansion-demo-masthead)"
4505
+ fill="url(#linearGradient-compound-expansion-demo-docked)"
4509
4506
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4510
4507
  />
4511
4508
  </g>
@@ -4517,7 +4514,7 @@ wrapperTag: div
4517
4514
  <div class="pf-v6-c-masthead__content">
4518
4515
  <div
4519
4516
  class="pf-v6-c-toolbar pf-m-static"
4520
- id="compound-expansion-demo-masthead-toolbar"
4517
+ id="compound-expansion-demo-docked-toolbar"
4521
4518
  >
4522
4519
  <div class="pf-v6-c-toolbar__content">
4523
4520
  <div class="pf-v6-c-toolbar__content-section">
@@ -7317,7 +7314,7 @@ wrapperTag: div
7317
7314
  <span class="pf-v6-c-button__text">Skip to content</span>
7318
7315
  </a>
7319
7316
  </div>
7320
- <header class="pf-v6-c-masthead" id="loading-state-demo-masthead">
7317
+ <header class="pf-v6-c-masthead" id="loading-state-demo-docked">
7321
7318
  <div class="pf-v6-c-masthead__main">
7322
7319
  <span class="pf-v6-c-masthead__toggle">
7323
7320
  <button
@@ -7359,7 +7356,7 @@ wrapperTag: div
7359
7356
  y1="2.25860997e-13%"
7360
7357
  x2="32%"
7361
7358
  y2="100%"
7362
- id="linearGradient-loading-state-demo-masthead"
7359
+ id="linearGradient-loading-state-demo-docked"
7363
7360
  >
7364
7361
  <stop stop-color="#2B9AF3" offset="0%" />
7365
7362
  <stop
@@ -7413,11 +7410,11 @@ wrapperTag: div
7413
7410
  />
7414
7411
  <path
7415
7412
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
7416
- fill="url(#linearGradient-loading-state-demo-masthead)"
7413
+ fill="url(#linearGradient-loading-state-demo-docked)"
7417
7414
  />
7418
7415
  <path
7419
7416
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
7420
- fill="url(#linearGradient-loading-state-demo-masthead)"
7417
+ fill="url(#linearGradient-loading-state-demo-docked)"
7421
7418
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
7422
7419
  />
7423
7420
  </g>
@@ -7429,7 +7426,7 @@ wrapperTag: div
7429
7426
  <div class="pf-v6-c-masthead__content">
7430
7427
  <div
7431
7428
  class="pf-v6-c-toolbar pf-m-static"
7432
- id="loading-state-demo-masthead-toolbar"
7429
+ id="loading-state-demo-docked-toolbar"
7433
7430
  >
7434
7431
  <div class="pf-v6-c-toolbar__content">
7435
7432
  <div class="pf-v6-c-toolbar__content-section">
@@ -7710,7 +7707,7 @@ wrapperTag: div
7710
7707
  <span class="pf-v6-c-button__text">Skip to content</span>
7711
7708
  </a>
7712
7709
  </div>
7713
- <header class="pf-v6-c-masthead" id="empty-state-demo-masthead">
7710
+ <header class="pf-v6-c-masthead" id="empty-state-demo-docked">
7714
7711
  <div class="pf-v6-c-masthead__main">
7715
7712
  <span class="pf-v6-c-masthead__toggle">
7716
7713
  <button
@@ -7752,7 +7749,7 @@ wrapperTag: div
7752
7749
  y1="2.25860997e-13%"
7753
7750
  x2="32%"
7754
7751
  y2="100%"
7755
- id="linearGradient-empty-state-demo-masthead"
7752
+ id="linearGradient-empty-state-demo-docked"
7756
7753
  >
7757
7754
  <stop stop-color="#2B9AF3" offset="0%" />
7758
7755
  <stop
@@ -7806,11 +7803,11 @@ wrapperTag: div
7806
7803
  />
7807
7804
  <path
7808
7805
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
7809
- fill="url(#linearGradient-empty-state-demo-masthead)"
7806
+ fill="url(#linearGradient-empty-state-demo-docked)"
7810
7807
  />
7811
7808
  <path
7812
7809
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
7813
- fill="url(#linearGradient-empty-state-demo-masthead)"
7810
+ fill="url(#linearGradient-empty-state-demo-docked)"
7814
7811
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
7815
7812
  />
7816
7813
  </g>
@@ -7822,7 +7819,7 @@ wrapperTag: div
7822
7819
  <div class="pf-v6-c-masthead__content">
7823
7820
  <div
7824
7821
  class="pf-v6-c-toolbar pf-m-static"
7825
- id="empty-state-demo-masthead-toolbar"
7822
+ id="empty-state-demo-docked-toolbar"
7826
7823
  >
7827
7824
  <div class="pf-v6-c-toolbar__content">
7828
7825
  <div class="pf-v6-c-toolbar__content-section">
@@ -8097,7 +8094,7 @@ wrapperTag: div
8097
8094
  <span class="pf-v6-c-button__text">Skip to content</span>
8098
8095
  </a>
8099
8096
  </div>
8100
- <header class="pf-v6-c-masthead" id="static-bottom-pagination-demo-masthead">
8097
+ <header class="pf-v6-c-masthead" id="static-bottom-pagination-demo-docked">
8101
8098
  <div class="pf-v6-c-masthead__main">
8102
8099
  <span class="pf-v6-c-masthead__toggle">
8103
8100
  <button
@@ -8139,7 +8136,7 @@ wrapperTag: div
8139
8136
  y1="2.25860997e-13%"
8140
8137
  x2="32%"
8141
8138
  y2="100%"
8142
- id="linearGradient-static-bottom-pagination-demo-masthead"
8139
+ id="linearGradient-static-bottom-pagination-demo-docked"
8143
8140
  >
8144
8141
  <stop stop-color="#2B9AF3" offset="0%" />
8145
8142
  <stop
@@ -8193,11 +8190,11 @@ wrapperTag: div
8193
8190
  />
8194
8191
  <path
8195
8192
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
8196
- fill="url(#linearGradient-static-bottom-pagination-demo-masthead)"
8193
+ fill="url(#linearGradient-static-bottom-pagination-demo-docked)"
8197
8194
  />
8198
8195
  <path
8199
8196
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
8200
- fill="url(#linearGradient-static-bottom-pagination-demo-masthead)"
8197
+ fill="url(#linearGradient-static-bottom-pagination-demo-docked)"
8201
8198
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
8202
8199
  />
8203
8200
  </g>
@@ -8209,7 +8206,7 @@ wrapperTag: div
8209
8206
  <div class="pf-v6-c-masthead__content">
8210
8207
  <div
8211
8208
  class="pf-v6-c-toolbar pf-m-static"
8212
- id="static-bottom-pagination-demo-masthead-toolbar"
8209
+ id="static-bottom-pagination-demo-docked-toolbar"
8213
8210
  >
8214
8211
  <div class="pf-v6-c-toolbar__content">
8215
8212
  <div class="pf-v6-c-toolbar__content-section">
@@ -9139,7 +9136,7 @@ wrapperTag: div
9139
9136
  <span class="pf-v6-c-button__text">Skip to content</span>
9140
9137
  </a>
9141
9138
  </div>
9142
- <header class="pf-v6-c-masthead" id="column-management-demo-masthead">
9139
+ <header class="pf-v6-c-masthead" id="column-management-demo-docked">
9143
9140
  <div class="pf-v6-c-masthead__main">
9144
9141
  <span class="pf-v6-c-masthead__toggle">
9145
9142
  <button
@@ -9181,7 +9178,7 @@ wrapperTag: div
9181
9178
  y1="2.25860997e-13%"
9182
9179
  x2="32%"
9183
9180
  y2="100%"
9184
- id="linearGradient-column-management-demo-masthead"
9181
+ id="linearGradient-column-management-demo-docked"
9185
9182
  >
9186
9183
  <stop stop-color="#2B9AF3" offset="0%" />
9187
9184
  <stop
@@ -9235,11 +9232,11 @@ wrapperTag: div
9235
9232
  />
9236
9233
  <path
9237
9234
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
9238
- fill="url(#linearGradient-column-management-demo-masthead)"
9235
+ fill="url(#linearGradient-column-management-demo-docked)"
9239
9236
  />
9240
9237
  <path
9241
9238
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
9242
- fill="url(#linearGradient-column-management-demo-masthead)"
9239
+ fill="url(#linearGradient-column-management-demo-docked)"
9243
9240
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
9244
9241
  />
9245
9242
  </g>
@@ -9251,7 +9248,7 @@ wrapperTag: div
9251
9248
  <div class="pf-v6-c-masthead__content">
9252
9249
  <div
9253
9250
  class="pf-v6-c-toolbar pf-m-static"
9254
- id="column-management-demo-masthead-toolbar"
9251
+ id="column-management-demo-docked-toolbar"
9255
9252
  >
9256
9253
  <div class="pf-v6-c-toolbar__content">
9257
9254
  <div class="pf-v6-c-toolbar__content-section">
@@ -10306,7 +10303,7 @@ wrapperTag: div
10306
10303
  <span class="pf-v6-c-button__text">Skip to content</span>
10307
10304
  </a>
10308
10305
  </div>
10309
- <header class="pf-v6-c-masthead" id="sticky-header-demo-masthead">
10306
+ <header class="pf-v6-c-masthead" id="sticky-header-demo-docked">
10310
10307
  <div class="pf-v6-c-masthead__main">
10311
10308
  <span class="pf-v6-c-masthead__toggle">
10312
10309
  <button
@@ -10348,7 +10345,7 @@ wrapperTag: div
10348
10345
  y1="2.25860997e-13%"
10349
10346
  x2="32%"
10350
10347
  y2="100%"
10351
- id="linearGradient-sticky-header-demo-masthead"
10348
+ id="linearGradient-sticky-header-demo-docked"
10352
10349
  >
10353
10350
  <stop stop-color="#2B9AF3" offset="0%" />
10354
10351
  <stop
@@ -10402,11 +10399,11 @@ wrapperTag: div
10402
10399
  />
10403
10400
  <path
10404
10401
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
10405
- fill="url(#linearGradient-sticky-header-demo-masthead)"
10402
+ fill="url(#linearGradient-sticky-header-demo-docked)"
10406
10403
  />
10407
10404
  <path
10408
10405
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
10409
- fill="url(#linearGradient-sticky-header-demo-masthead)"
10406
+ fill="url(#linearGradient-sticky-header-demo-docked)"
10410
10407
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
10411
10408
  />
10412
10409
  </g>
@@ -10418,7 +10415,7 @@ wrapperTag: div
10418
10415
  <div class="pf-v6-c-masthead__content">
10419
10416
  <div
10420
10417
  class="pf-v6-c-toolbar pf-m-static"
10421
- id="sticky-header-demo-masthead-toolbar"
10418
+ id="sticky-header-demo-docked-toolbar"
10422
10419
  >
10423
10420
  <div class="pf-v6-c-toolbar__content">
10424
10421
  <div class="pf-v6-c-toolbar__content-section">
@@ -11345,7 +11342,7 @@ wrapperTag: div
11345
11342
  <span class="pf-v6-c-button__text">Skip to content</span>
11346
11343
  </a>
11347
11344
  </div>
11348
- <header class="pf-v6-c-masthead" id="sticky-first-column-demo-masthead">
11345
+ <header class="pf-v6-c-masthead" id="sticky-first-column-demo-docked">
11349
11346
  <div class="pf-v6-c-masthead__main">
11350
11347
  <span class="pf-v6-c-masthead__toggle">
11351
11348
  <button
@@ -11387,7 +11384,7 @@ wrapperTag: div
11387
11384
  y1="2.25860997e-13%"
11388
11385
  x2="32%"
11389
11386
  y2="100%"
11390
- id="linearGradient-sticky-first-column-demo-masthead"
11387
+ id="linearGradient-sticky-first-column-demo-docked"
11391
11388
  >
11392
11389
  <stop stop-color="#2B9AF3" offset="0%" />
11393
11390
  <stop
@@ -11441,11 +11438,11 @@ wrapperTag: div
11441
11438
  />
11442
11439
  <path
11443
11440
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
11444
- fill="url(#linearGradient-sticky-first-column-demo-masthead)"
11441
+ fill="url(#linearGradient-sticky-first-column-demo-docked)"
11445
11442
  />
11446
11443
  <path
11447
11444
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
11448
- fill="url(#linearGradient-sticky-first-column-demo-masthead)"
11445
+ fill="url(#linearGradient-sticky-first-column-demo-docked)"
11449
11446
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
11450
11447
  />
11451
11448
  </g>
@@ -11457,7 +11454,7 @@ wrapperTag: div
11457
11454
  <div class="pf-v6-c-masthead__content">
11458
11455
  <div
11459
11456
  class="pf-v6-c-toolbar pf-m-static"
11460
- id="sticky-first-column-demo-masthead-toolbar"
11457
+ id="sticky-first-column-demo-docked-toolbar"
11461
11458
  >
11462
11459
  <div class="pf-v6-c-toolbar__content">
11463
11460
  <div class="pf-v6-c-toolbar__content-section">
@@ -12495,7 +12492,7 @@ wrapperTag: div
12495
12492
  <span class="pf-v6-c-button__text">Skip to content</span>
12496
12493
  </a>
12497
12494
  </div>
12498
- <header class="pf-v6-c-masthead" id="sticky-multiple-columns-demo-masthead">
12495
+ <header class="pf-v6-c-masthead" id="sticky-multiple-columns-demo-docked">
12499
12496
  <div class="pf-v6-c-masthead__main">
12500
12497
  <span class="pf-v6-c-masthead__toggle">
12501
12498
  <button
@@ -12537,7 +12534,7 @@ wrapperTag: div
12537
12534
  y1="2.25860997e-13%"
12538
12535
  x2="32%"
12539
12536
  y2="100%"
12540
- id="linearGradient-sticky-multiple-columns-demo-masthead"
12537
+ id="linearGradient-sticky-multiple-columns-demo-docked"
12541
12538
  >
12542
12539
  <stop stop-color="#2B9AF3" offset="0%" />
12543
12540
  <stop
@@ -12591,11 +12588,11 @@ wrapperTag: div
12591
12588
  />
12592
12589
  <path
12593
12590
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
12594
- fill="url(#linearGradient-sticky-multiple-columns-demo-masthead)"
12591
+ fill="url(#linearGradient-sticky-multiple-columns-demo-docked)"
12595
12592
  />
12596
12593
  <path
12597
12594
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
12598
- fill="url(#linearGradient-sticky-multiple-columns-demo-masthead)"
12595
+ fill="url(#linearGradient-sticky-multiple-columns-demo-docked)"
12599
12596
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
12600
12597
  />
12601
12598
  </g>
@@ -12607,7 +12604,7 @@ wrapperTag: div
12607
12604
  <div class="pf-v6-c-masthead__content">
12608
12605
  <div
12609
12606
  class="pf-v6-c-toolbar pf-m-static"
12610
- id="sticky-multiple-columns-demo-masthead-toolbar"
12607
+ id="sticky-multiple-columns-demo-docked-toolbar"
12611
12608
  >
12612
12609
  <div class="pf-v6-c-toolbar__content">
12613
12610
  <div class="pf-v6-c-toolbar__content-section">
@@ -13680,7 +13677,7 @@ wrapperTag: div
13680
13677
  </div>
13681
13678
  <header
13682
13679
  class="pf-v6-c-masthead"
13683
- id="sticky-header-and-multiple-columns-demo-masthead"
13680
+ id="sticky-header-and-multiple-columns-demo-docked"
13684
13681
  >
13685
13682
  <div class="pf-v6-c-masthead__main">
13686
13683
  <span class="pf-v6-c-masthead__toggle">
@@ -13723,7 +13720,7 @@ wrapperTag: div
13723
13720
  y1="2.25860997e-13%"
13724
13721
  x2="32%"
13725
13722
  y2="100%"
13726
- id="linearGradient-sticky-header-and-multiple-columns-demo-masthead"
13723
+ id="linearGradient-sticky-header-and-multiple-columns-demo-docked"
13727
13724
  >
13728
13725
  <stop stop-color="#2B9AF3" offset="0%" />
13729
13726
  <stop
@@ -13777,11 +13774,11 @@ wrapperTag: div
13777
13774
  />
13778
13775
  <path
13779
13776
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
13780
- fill="url(#linearGradient-sticky-header-and-multiple-columns-demo-masthead)"
13777
+ fill="url(#linearGradient-sticky-header-and-multiple-columns-demo-docked)"
13781
13778
  />
13782
13779
  <path
13783
13780
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
13784
- fill="url(#linearGradient-sticky-header-and-multiple-columns-demo-masthead)"
13781
+ fill="url(#linearGradient-sticky-header-and-multiple-columns-demo-docked)"
13785
13782
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
13786
13783
  />
13787
13784
  </g>
@@ -13793,7 +13790,7 @@ wrapperTag: div
13793
13790
  <div class="pf-v6-c-masthead__content">
13794
13791
  <div
13795
13792
  class="pf-v6-c-toolbar pf-m-static"
13796
- id="sticky-header-and-multiple-columns-demo-masthead-toolbar"
13793
+ id="sticky-header-and-multiple-columns-demo-docked-toolbar"
13797
13794
  >
13798
13795
  <div class="pf-v6-c-toolbar__content">
13799
13796
  <div class="pf-v6-c-toolbar__content-section">
@@ -14864,7 +14861,7 @@ wrapperTag: div
14864
14861
  </div>
14865
14862
  <header
14866
14863
  class="pf-v6-c-masthead"
14867
- id="sticky-header-and-multiple-columns-demo-masthead"
14864
+ id="sticky-header-and-multiple-columns-demo-docked"
14868
14865
  >
14869
14866
  <div class="pf-v6-c-masthead__main">
14870
14867
  <span class="pf-v6-c-masthead__toggle">
@@ -14907,7 +14904,7 @@ wrapperTag: div
14907
14904
  y1="2.25860997e-13%"
14908
14905
  x2="32%"
14909
14906
  y2="100%"
14910
- id="linearGradient-sticky-header-and-multiple-columns-demo-masthead"
14907
+ id="linearGradient-sticky-header-and-multiple-columns-demo-docked"
14911
14908
  >
14912
14909
  <stop stop-color="#2B9AF3" offset="0%" />
14913
14910
  <stop
@@ -14961,11 +14958,11 @@ wrapperTag: div
14961
14958
  />
14962
14959
  <path
14963
14960
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
14964
- fill="url(#linearGradient-sticky-header-and-multiple-columns-demo-masthead)"
14961
+ fill="url(#linearGradient-sticky-header-and-multiple-columns-demo-docked)"
14965
14962
  />
14966
14963
  <path
14967
14964
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
14968
- fill="url(#linearGradient-sticky-header-and-multiple-columns-demo-masthead)"
14965
+ fill="url(#linearGradient-sticky-header-and-multiple-columns-demo-docked)"
14969
14966
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
14970
14967
  />
14971
14968
  </g>
@@ -14977,7 +14974,7 @@ wrapperTag: div
14977
14974
  <div class="pf-v6-c-masthead__content">
14978
14975
  <div
14979
14976
  class="pf-v6-c-toolbar pf-m-static"
14980
- id="sticky-header-and-multiple-columns-demo-masthead-toolbar"
14977
+ id="sticky-header-and-multiple-columns-demo-docked-toolbar"
14981
14978
  >
14982
14979
  <div class="pf-v6-c-toolbar__content">
14983
14980
  <div class="pf-v6-c-toolbar__content-section">
@@ -16011,7 +16008,7 @@ By default, table cell alignment is set to baseline. This retains vertical align
16011
16008
  <span class="pf-v6-c-button__text">Skip to content</span>
16012
16009
  </a>
16013
16010
  </div>
16014
- <header class="pf-v6-c-masthead" id="image-alignment-demo-masthead">
16011
+ <header class="pf-v6-c-masthead" id="image-alignment-demo-docked">
16015
16012
  <div class="pf-v6-c-masthead__main">
16016
16013
  <span class="pf-v6-c-masthead__toggle">
16017
16014
  <button
@@ -16053,7 +16050,7 @@ By default, table cell alignment is set to baseline. This retains vertical align
16053
16050
  y1="2.25860997e-13%"
16054
16051
  x2="32%"
16055
16052
  y2="100%"
16056
- id="linearGradient-image-alignment-demo-masthead"
16053
+ id="linearGradient-image-alignment-demo-docked"
16057
16054
  >
16058
16055
  <stop stop-color="#2B9AF3" offset="0%" />
16059
16056
  <stop
@@ -16107,11 +16104,11 @@ By default, table cell alignment is set to baseline. This retains vertical align
16107
16104
  />
16108
16105
  <path
16109
16106
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
16110
- fill="url(#linearGradient-image-alignment-demo-masthead)"
16107
+ fill="url(#linearGradient-image-alignment-demo-docked)"
16111
16108
  />
16112
16109
  <path
16113
16110
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
16114
- fill="url(#linearGradient-image-alignment-demo-masthead)"
16111
+ fill="url(#linearGradient-image-alignment-demo-docked)"
16115
16112
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
16116
16113
  />
16117
16114
  </g>
@@ -16123,7 +16120,7 @@ By default, table cell alignment is set to baseline. This retains vertical align
16123
16120
  <div class="pf-v6-c-masthead__content">
16124
16121
  <div
16125
16122
  class="pf-v6-c-toolbar pf-m-static"
16126
- id="image-alignment-demo-masthead-toolbar"
16123
+ id="image-alignment-demo-docked-toolbar"
16127
16124
  >
16128
16125
  <div class="pf-v6-c-toolbar__content">
16129
16126
  <div class="pf-v6-c-toolbar__content-section">
@@ -16584,3 +16581,1850 @@ By default, table cell alignment is set to baseline. This retains vertical align
16584
16581
  </div>
16585
16582
 
16586
16583
  ```
16584
+
16585
+ ### Container query with drawer
16586
+
16587
+ This demo shows how tables can use container queries to respond to the size of their container. The drawer panel is defined as a container using `container-type: inline-size; container-name: pf-v6-contain-table`. This allows the table in the drawer to respond to the panel's width rather than the viewport width.
16588
+
16589
+ Because the table in the main content area does not have a specific container around it, its responsive behavior defaults to the container specified on the `:root` element.
16590
+
16591
+ Note that the table in the main content area uses the `pf-m-grid-lg` modifier and will change between the stacked and grid layout when the viewport reaches the large breakpoint. The table in the drawer uses the medium breakpoint, but changes from stacked to grid layout when its container (the drawer) reaches the medium breakpoint.
16592
+
16593
+ ```html isFullscreen
16594
+ <div class="pf-v6-c-page" id="table-drawer-container">
16595
+ <div class="pf-v6-c-skip-to-content">
16596
+ <a
16597
+ class="pf-v6-c-button pf-m-primary"
16598
+ href="#main-content-table-drawer-container"
16599
+ >
16600
+ <span class="pf-v6-c-button__text">Skip to content</span>
16601
+ </a>
16602
+ </div>
16603
+ <header class="pf-v6-c-masthead" id="table-drawer-container-docked">
16604
+ <div class="pf-v6-c-masthead__main">
16605
+ <span class="pf-v6-c-masthead__toggle">
16606
+ <button
16607
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
16608
+ type="button"
16609
+ aria-label="Global navigation"
16610
+ >
16611
+ <span class="pf-v6-c-button__icon">
16612
+ <svg
16613
+ viewBox="0 0 10 10"
16614
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
16615
+ width="1em"
16616
+ height="1em"
16617
+ >
16618
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
16619
+ <path
16620
+ class="pf-v6-c-button--hamburger-icon--middle"
16621
+ d="M1,5 L9,5"
16622
+ />
16623
+ <path
16624
+ class="pf-v6-c-button--hamburger-icon--arrow"
16625
+ d="M1,5 L1,5 L1,5"
16626
+ />
16627
+ <path
16628
+ class="pf-v6-c-button--hamburger-icon--bottom"
16629
+ d="M9,9 L1,9"
16630
+ />
16631
+ </svg>
16632
+ </span>
16633
+ </button>
16634
+ </span>
16635
+ <div class="pf-v6-c-masthead__brand">
16636
+ <a class="pf-v6-c-masthead__logo" href="#">
16637
+ <svg height="37px" viewBox="0 0 679 158">
16638
+ <title>PF-HorizontalLogo-Color</title>
16639
+ <defs>
16640
+ <linearGradient
16641
+ x1="68%"
16642
+ y1="2.25860997e-13%"
16643
+ x2="32%"
16644
+ y2="100%"
16645
+ id="linearGradient-table-drawer-container-docked"
16646
+ >
16647
+ <stop stop-color="#2B9AF3" offset="0%" />
16648
+ <stop
16649
+ stop-color="#73BCF7"
16650
+ stop-opacity="0.502212631"
16651
+ offset="100%"
16652
+ />
16653
+ </linearGradient>
16654
+ </defs>
16655
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
16656
+ <g
16657
+ transform="translate(206.000000, 45.750000)"
16658
+ fill="var(--pf-t--global--text--color--regular)"
16659
+ fill-rule="nonzero"
16660
+ >
16661
+ <path
16662
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
16663
+ />
16664
+ <path
16665
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
16666
+ />
16667
+ <path
16668
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
16669
+ />
16670
+ <path
16671
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
16672
+ />
16673
+ <path
16674
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
16675
+ />
16676
+ <path
16677
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
16678
+ />
16679
+ <path
16680
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
16681
+ />
16682
+ <polygon
16683
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
16684
+ />
16685
+ <polygon
16686
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
16687
+ />
16688
+ <path
16689
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
16690
+ />
16691
+ </g>
16692
+ <g transform="translate(0.000000, 0.000000)">
16693
+ <path
16694
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
16695
+ fill="#0066CC"
16696
+ />
16697
+ <path
16698
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
16699
+ fill="url(#linearGradient-table-drawer-container-docked)"
16700
+ />
16701
+ <path
16702
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
16703
+ fill="url(#linearGradient-table-drawer-container-docked)"
16704
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
16705
+ />
16706
+ </g>
16707
+ </g>
16708
+ </svg>
16709
+ </a>
16710
+ </div>
16711
+ </div>
16712
+ <div class="pf-v6-c-masthead__content">
16713
+ <div
16714
+ class="pf-v6-c-toolbar pf-m-static"
16715
+ id="table-drawer-container-docked-toolbar"
16716
+ >
16717
+ <div class="pf-v6-c-toolbar__content">
16718
+ <div class="pf-v6-c-toolbar__content-section">
16719
+ <div
16720
+ class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
16721
+ >
16722
+ <div
16723
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
16724
+ >
16725
+ <div class="pf-v6-c-toolbar__item">
16726
+ <button
16727
+ class="pf-v6-c-menu-toggle pf-m-plain"
16728
+ type="button"
16729
+ aria-expanded="false"
16730
+ aria-label="Application launcher"
16731
+ >
16732
+ <span class="pf-v6-c-menu-toggle__icon">
16733
+ <i class="fas fa-th" aria-hidden="true"></i>
16734
+ </span>
16735
+ </button>
16736
+ </div>
16737
+ <div class="pf-v6-c-toolbar__item">
16738
+ <button
16739
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
16740
+ type="button"
16741
+ aria-expanded="false"
16742
+ aria-label="Settings"
16743
+ >
16744
+ <span class="pf-v6-c-menu-toggle__icon">
16745
+ <i class="fas fa-cog" aria-hidden="true"></i>
16746
+ </span>
16747
+ </button>
16748
+ </div>
16749
+ <div class="pf-v6-c-toolbar__item">
16750
+ <button
16751
+ class="pf-v6-c-menu-toggle pf-m-plain"
16752
+ type="button"
16753
+ aria-expanded="false"
16754
+ aria-label="Help"
16755
+ >
16756
+ <span class="pf-v6-c-menu-toggle__icon">
16757
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
16758
+ </span>
16759
+ </button>
16760
+ </div>
16761
+ </div>
16762
+
16763
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
16764
+ <button
16765
+ class="pf-v6-c-menu-toggle pf-m-plain"
16766
+ type="button"
16767
+ aria-expanded="false"
16768
+ aria-label="Actions"
16769
+ >
16770
+ <span class="pf-v6-c-menu-toggle__icon">
16771
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
16772
+ </span>
16773
+ </button>
16774
+ </div>
16775
+ </div>
16776
+ </div>
16777
+ </div>
16778
+ </div>
16779
+ </div>
16780
+ </header>
16781
+ <div class="pf-v6-c-page__sidebar">
16782
+ <div class="pf-v6-c-page__sidebar-body">
16783
+ <nav
16784
+ class="pf-v6-c-nav"
16785
+ id="table-drawer-container-primary-nav"
16786
+ aria-label="Global"
16787
+ >
16788
+ <ul class="pf-v6-c-nav__list" role="list">
16789
+ <li class="pf-v6-c-nav__item">
16790
+ <a href="#" class="pf-v6-c-nav__link">
16791
+ <span class="pf-v6-c-nav__link-text">System panel</span>
16792
+ </a>
16793
+ </li>
16794
+ <li class="pf-v6-c-nav__item">
16795
+ <a
16796
+ href="#"
16797
+ class="pf-v6-c-nav__link pf-m-current"
16798
+ aria-current="page"
16799
+ >
16800
+ <span class="pf-v6-c-nav__link-text">Policy</span>
16801
+ </a>
16802
+ </li>
16803
+ <li class="pf-v6-c-nav__item">
16804
+ <a href="#" class="pf-v6-c-nav__link">
16805
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
16806
+ </a>
16807
+ </li>
16808
+ <li class="pf-v6-c-nav__item">
16809
+ <a href="#" class="pf-v6-c-nav__link">
16810
+ <span class="pf-v6-c-nav__link-text">Network services</span>
16811
+ </a>
16812
+ </li>
16813
+ <li class="pf-v6-c-nav__item">
16814
+ <a href="#" class="pf-v6-c-nav__link">
16815
+ <span class="pf-v6-c-nav__link-text">Server</span>
16816
+ </a>
16817
+ </li>
16818
+ </ul>
16819
+ </nav>
16820
+ </div>
16821
+ </div>
16822
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
16823
+ <main
16824
+ class="pf-v6-c-page__main"
16825
+ tabindex="-1"
16826
+ id="main-content-table-drawer-container"
16827
+ >
16828
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
16829
+ <div class="pf-v6-c-page__main-body">
16830
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
16831
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
16832
+ <li class="pf-v6-c-breadcrumb__item">
16833
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
16834
+ </li>
16835
+ <li class="pf-v6-c-breadcrumb__item">
16836
+ <span class="pf-v6-c-breadcrumb__item-divider">
16837
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
16838
+ </span>
16839
+
16840
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
16841
+ </li>
16842
+ <li class="pf-v6-c-breadcrumb__item">
16843
+ <span class="pf-v6-c-breadcrumb__item-divider">
16844
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
16845
+ </span>
16846
+
16847
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
16848
+ </li>
16849
+ <li class="pf-v6-c-breadcrumb__item">
16850
+ <span class="pf-v6-c-breadcrumb__item-divider">
16851
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
16852
+ </span>
16853
+
16854
+ <a
16855
+ href="#"
16856
+ class="pf-v6-c-breadcrumb__link pf-m-current"
16857
+ aria-current="page"
16858
+ >Section landing</a>
16859
+ </li>
16860
+ </ol>
16861
+ </nav>
16862
+ </div>
16863
+ </section>
16864
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
16865
+ <div class="pf-v6-c-page__main-body">
16866
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
16867
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
16868
+ </div>
16869
+ </section>
16870
+ <section class="pf-v6-c-page__main-section pf-m-no-padding">
16871
+ <div class="pf-v6-c-page__main-body">
16872
+ <div class="pf-v6-c-drawer pf-m-expanded pf-m-inline">
16873
+ <div class="pf-v6-c-drawer__main">
16874
+ <div class="pf-v6-c-drawer__content">
16875
+ <div class="pf-v6-c-drawer__body">
16876
+ <div class="pf-v6-c-drawer__body pf-m-padding">
16877
+ <div
16878
+ class="pf-v6-c-toolbar"
16879
+ id="table-drawer-container-main-toolbar"
16880
+ >
16881
+ <div class="pf-v6-c-toolbar__content">
16882
+ <div
16883
+ class="pf-v6-c-toolbar__content-section pf-m-nowrap"
16884
+ >
16885
+ <div class="pf-v6-c-toolbar__item pf-m-bulk-select">
16886
+ <div
16887
+ class="pf-v6-c-menu-toggle pf-m-split-button"
16888
+ id="table-drawer-container-main-toolbar-check"
16889
+ >
16890
+ <label
16891
+ class="pf-v6-c-check pf-m-standalone"
16892
+ for="table-drawer-container-main-toolbar-check-check-input"
16893
+ >
16894
+ <input
16895
+ class="pf-v6-c-check__input"
16896
+ type="checkbox"
16897
+ id="table-drawer-container-main-toolbar-check-check-input"
16898
+ name="table-drawer-container-main-toolbar-check-check-input"
16899
+ aria-label="Standalone check"
16900
+ />
16901
+ </label>
16902
+ <button
16903
+ class="pf-v6-c-menu-toggle__button"
16904
+ type="button"
16905
+ aria-expanded="false"
16906
+ id="table-drawer-container-main-toolbar-menu-toggle-toggle-button"
16907
+ aria-label="Menu toggle"
16908
+ >
16909
+ <span class="pf-v6-c-menu-toggle__controls">
16910
+ <span
16911
+ class="pf-v6-c-menu-toggle__toggle-icon"
16912
+ >
16913
+ <i
16914
+ class="fas fa-caret-down fa-fw"
16915
+ aria-hidden="true"
16916
+ ></i>
16917
+ </span>
16918
+ </span>
16919
+ </button>
16920
+ </div>
16921
+ </div>
16922
+
16923
+ <div class="pf-v6-c-toolbar__item pf-m-search-filter">
16924
+ <div
16925
+ class="pf-v6-c-input-group"
16926
+ aria-label="search filter"
16927
+ role="group"
16928
+ >
16929
+ <div class="pf-v6-c-input-group__item">
16930
+ <button
16931
+ class="pf-v6-c-menu-toggle"
16932
+ type="button"
16933
+ aria-expanded="false"
16934
+ id="table-drawer-container-main-toolbar-search-filter-menu"
16935
+ >
16936
+ <span class="pf-v6-c-menu-toggle__icon">
16937
+ <i class="fas fa-filter" aria-hidden="true"></i>
16938
+ </span>
16939
+ <span class="pf-v6-c-menu-toggle__text">Name</span>
16940
+ <span class="pf-v6-c-menu-toggle__controls">
16941
+ <span
16942
+ class="pf-v6-c-menu-toggle__toggle-icon"
16943
+ >
16944
+ <i
16945
+ class="fas fa-caret-down fa-fw"
16946
+ aria-hidden="true"
16947
+ ></i>
16948
+ </span>
16949
+ </span>
16950
+ </button>
16951
+ </div>
16952
+ <div class="pf-v6-c-input-group__item pf-m-fill">
16953
+ <div class="pf-v6-c-text-input-group">
16954
+ <div
16955
+ class="pf-v6-c-text-input-group__main pf-m-icon"
16956
+ >
16957
+ <span
16958
+ class="pf-v6-c-text-input-group__text"
16959
+ >
16960
+ <span
16961
+ class="pf-v6-c-text-input-group__icon"
16962
+ >
16963
+ <i class="fas fa-fw fa-search"></i>
16964
+ </span>
16965
+ <input
16966
+ class="pf-v6-c-text-input-group__text-input"
16967
+ type="text"
16968
+ placeholder="Filter by name"
16969
+ value
16970
+ aria-label="Search input"
16971
+ />
16972
+ </span>
16973
+ </div>
16974
+ </div>
16975
+ </div>
16976
+ </div>
16977
+ </div>
16978
+
16979
+ <div class="pf-v6-c-toolbar__item pf-m-pagination">
16980
+ <div class="pf-v6-c-pagination pf-m-compact">
16981
+ <div class="pf-v6-c-pagination__page-menu">
16982
+ <button
16983
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
16984
+ type="button"
16985
+ aria-expanded="false"
16986
+ aria-label="Menu toggle"
16987
+ id="table-drawer-container-main-toolbar-top-pagination"
16988
+ >
16989
+ <span class="pf-v6-c-menu-toggle__text">
16990
+ <b>1 - 10</b>&nbsp;of&nbsp;
16991
+ <b>36</b>
16992
+ </span>
16993
+ <span class="pf-v6-c-menu-toggle__controls">
16994
+ <span
16995
+ class="pf-v6-c-menu-toggle__toggle-icon"
16996
+ >
16997
+ <i
16998
+ class="fas fa-caret-down fa-fw"
16999
+ aria-hidden="true"
17000
+ ></i>
17001
+ </span>
17002
+ </span>
17003
+ </button>
17004
+ </div>
17005
+ <nav
17006
+ class="pf-v6-c-pagination__nav"
17007
+ aria-label="Toolbar top pagination"
17008
+ >
17009
+ <div
17010
+ class="pf-v6-c-pagination__nav-control pf-m-prev"
17011
+ >
17012
+ <button
17013
+ class="pf-v6-c-button pf-m-plain"
17014
+ type="button"
17015
+ disabled
17016
+ aria-label="Go to previous page"
17017
+ >
17018
+ <span class="pf-v6-c-button__icon">
17019
+ <i
17020
+ class="fas fa-angle-left"
17021
+ aria-hidden="true"
17022
+ ></i>
17023
+ </span>
17024
+ </button>
17025
+ </div>
17026
+ <div
17027
+ class="pf-v6-c-pagination__nav-control pf-m-next"
17028
+ >
17029
+ <button
17030
+ class="pf-v6-c-button pf-m-plain"
17031
+ type="button"
17032
+ aria-label="Go to next page"
17033
+ >
17034
+ <span class="pf-v6-c-button__icon">
17035
+ <i
17036
+ class="fas fa-angle-right"
17037
+ aria-hidden="true"
17038
+ ></i>
17039
+ </span>
17040
+ </button>
17041
+ </div>
17042
+ </nav>
17043
+ </div>
17044
+ </div>
17045
+ </div>
17046
+
17047
+ <div
17048
+ class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
17049
+ id="table-drawer-container-main-toolbar-expandable-content"
17050
+ hidden
17051
+ ></div>
17052
+ </div>
17053
+ </div>
17054
+ <table
17055
+ class="pf-v6-c-table pf-m-grid-md pf-m-grid-lg"
17056
+ role="grid"
17057
+ aria-label="This is a table with checkboxes"
17058
+ id="table-drawer-container-table"
17059
+ >
17060
+ <thead class="pf-v6-c-table__thead">
17061
+ <tr class="pf-v6-c-table__tr" role="row">
17062
+ <th
17063
+ class="pf-v6-c-table__th pf-v6-c-table__cell-empty"
17064
+ role="columnheader"
17065
+ scope="col"
17066
+ >
17067
+ <span class="pf-v6-screen-reader">Row select</span>
17068
+ </th>
17069
+
17070
+ <th
17071
+ class="pf-v6-c-table__th"
17072
+ role="columnheader"
17073
+ scope="col"
17074
+ >Repositories</th>
17075
+
17076
+ <th
17077
+ class="pf-v6-c-table__th"
17078
+ role="columnheader"
17079
+ scope="col"
17080
+ >Branches</th>
17081
+
17082
+ <th
17083
+ class="pf-v6-c-table__th"
17084
+ role="columnheader"
17085
+ scope="col"
17086
+ >Pull requests</th>
17087
+
17088
+ <th
17089
+ class="pf-v6-c-table__th"
17090
+ role="columnheader"
17091
+ scope="col"
17092
+ >Workspaces</th>
17093
+
17094
+ <th
17095
+ class="pf-v6-c-table__th"
17096
+ role="columnheader"
17097
+ scope="col"
17098
+ >Last commit</th>
17099
+
17100
+ <th
17101
+ class="pf-v6-c-table__th pf-v6-c-table__cell-empty"
17102
+ role="columnheader"
17103
+ scope="col"
17104
+ >
17105
+ <span class="pf-v6-screen-reader">Actions</span>
17106
+ </th>
17107
+
17108
+ <th
17109
+ class="pf-v6-c-table__th pf-v6-c-table__cell-empty"
17110
+ role="columnheader"
17111
+ scope="col"
17112
+ >
17113
+ <span class="pf-v6-screen-reader">Actions</span>
17114
+ </th>
17115
+ </tr>
17116
+ </thead>
17117
+
17118
+ <tbody class="pf-v6-c-table__tbody" role="rowgroup">
17119
+ <tr class="pf-v6-c-table__tr" role="row">
17120
+ <td
17121
+ class="pf-v6-c-table__td pf-v6-c-table__check"
17122
+ aria-label="Check row"
17123
+ >
17124
+ <label
17125
+ class="pf-v6-c-check pf-m-standalone"
17126
+ for="table-drawer-container-table-checkrow-2-check-input"
17127
+ >
17128
+ <input
17129
+ class="pf-v6-c-check__input"
17130
+ type="checkbox"
17131
+ id="table-drawer-container-table-checkrow-2-check-input"
17132
+ name="table-drawer-container-table-checkrow-2-check-input"
17133
+ aria-label="Select row"
17134
+ />
17135
+ </label>
17136
+ </td>
17137
+
17138
+ <th
17139
+ class="pf-v6-c-table__th"
17140
+ role="columnheader"
17141
+ data-label="Repository name"
17142
+ >
17143
+ <div>
17144
+ <div
17145
+ id="table-drawer-container-table-node1"
17146
+ >Node 1</div>
17147
+ <a href="#">siemur/test-space</a>
17148
+ </div>
17149
+ </th>
17150
+
17151
+ <td
17152
+ class="pf-v6-c-table__td"
17153
+ role="cell"
17154
+ data-label="Branches"
17155
+ >
17156
+ <span>
17157
+ <i class="fas fa-code-branch"></i> 10
17158
+ </span>
17159
+ </td>
17160
+ <td
17161
+ class="pf-v6-c-table__td"
17162
+ role="cell"
17163
+ data-label="Pull requests"
17164
+ >
17165
+ <span>
17166
+ <i class="fas fa-code"></i> 25
17167
+ </span>
17168
+ </td>
17169
+ <td
17170
+ class="pf-v6-c-table__td"
17171
+ role="cell"
17172
+ data-label="Workspaces"
17173
+ >
17174
+ <span>
17175
+ <i class="fas fa-cube"></i> 5
17176
+ </span>
17177
+ </td>
17178
+ <td
17179
+ class="pf-v6-c-table__td"
17180
+ role="cell"
17181
+ data-label="Last commit"
17182
+ >2 days ago</td>
17183
+ <td
17184
+ class="pf-v6-c-table__td"
17185
+ role="cell"
17186
+ data-label="Action"
17187
+ >
17188
+ <a href="#">Action link</a>
17189
+ </td>
17190
+
17191
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
17192
+ <button
17193
+ class="pf-v6-c-menu-toggle pf-m-plain"
17194
+ type="button"
17195
+ aria-expanded="false"
17196
+ aria-label="Table actions"
17197
+ >
17198
+ <span class="pf-v6-c-menu-toggle__icon">
17199
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
17200
+ </span>
17201
+ </button>
17202
+ </td>
17203
+ </tr>
17204
+
17205
+ <tr class="pf-v6-c-table__tr" role="row">
17206
+ <td
17207
+ class="pf-v6-c-table__td pf-v6-c-table__check"
17208
+ aria-label="Check row"
17209
+ >
17210
+ <label
17211
+ class="pf-v6-c-check pf-m-standalone"
17212
+ for="table-drawer-container-table-checkrow-3-check-input"
17213
+ >
17214
+ <input
17215
+ class="pf-v6-c-check__input"
17216
+ type="checkbox"
17217
+ id="table-drawer-container-table-checkrow-3-check-input"
17218
+ name="table-drawer-container-table-checkrow-3-check-input"
17219
+ aria-label="Select row"
17220
+ />
17221
+ </label>
17222
+ </td>
17223
+
17224
+ <th
17225
+ class="pf-v6-c-table__th"
17226
+ role="columnheader"
17227
+ data-label="Repository name"
17228
+ >
17229
+ <div>
17230
+ <div
17231
+ id="table-drawer-container-table-node2"
17232
+ >Node 2</div>
17233
+ <a href="#">siemur/test-space</a>
17234
+ </div>
17235
+ </th>
17236
+
17237
+ <td
17238
+ class="pf-v6-c-table__td"
17239
+ role="cell"
17240
+ data-label="Branches"
17241
+ >
17242
+ <span>
17243
+ <i class="fas fa-code-branch"></i> 8
17244
+ </span>
17245
+ </td>
17246
+ <td
17247
+ class="pf-v6-c-table__td"
17248
+ role="cell"
17249
+ data-label="Pull requests"
17250
+ >
17251
+ <span>
17252
+ <i class="fas fa-code"></i> 30
17253
+ </span>
17254
+ </td>
17255
+ <td
17256
+ class="pf-v6-c-table__td"
17257
+ role="cell"
17258
+ data-label="Workspaces"
17259
+ >
17260
+ <span>
17261
+ <i class="fas fa-cube"></i> 2
17262
+ </span>
17263
+ </td>
17264
+ <td
17265
+ class="pf-v6-c-table__td"
17266
+ role="cell"
17267
+ data-label="Last commit"
17268
+ >2 days ago</td>
17269
+ <td
17270
+ class="pf-v6-c-table__td"
17271
+ role="cell"
17272
+ data-label="Action"
17273
+ >
17274
+ <a href="#">Action link</a>
17275
+ </td>
17276
+
17277
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
17278
+ <button
17279
+ class="pf-v6-c-menu-toggle pf-m-plain"
17280
+ type="button"
17281
+ aria-expanded="false"
17282
+ aria-label="Table actions"
17283
+ >
17284
+ <span class="pf-v6-c-menu-toggle__icon">
17285
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
17286
+ </span>
17287
+ </button>
17288
+ </td>
17289
+ </tr>
17290
+
17291
+ <tr class="pf-v6-c-table__tr" role="row">
17292
+ <td
17293
+ class="pf-v6-c-table__td pf-v6-c-table__check"
17294
+ aria-label="Check row"
17295
+ >
17296
+ <label
17297
+ class="pf-v6-c-check pf-m-standalone"
17298
+ for="table-drawer-container-table-checkrow-4-check-input"
17299
+ >
17300
+ <input
17301
+ class="pf-v6-c-check__input"
17302
+ type="checkbox"
17303
+ id="table-drawer-container-table-checkrow-4-check-input"
17304
+ name="table-drawer-container-table-checkrow-4-check-input"
17305
+ aria-label="Select row"
17306
+ />
17307
+ </label>
17308
+ </td>
17309
+
17310
+ <th
17311
+ class="pf-v6-c-table__th"
17312
+ role="columnheader"
17313
+ data-label="Repository name"
17314
+ >
17315
+ <div>
17316
+ <div
17317
+ id="table-drawer-container-table-node3"
17318
+ >Node 3</div>
17319
+ <a href="#">siemur/test-space</a>
17320
+ </div>
17321
+ </th>
17322
+
17323
+ <td
17324
+ class="pf-v6-c-table__td"
17325
+ role="cell"
17326
+ data-label="Branches"
17327
+ >
17328
+ <span>
17329
+ <i class="fas fa-code-branch"></i> 12
17330
+ </span>
17331
+ </td>
17332
+ <td
17333
+ class="pf-v6-c-table__td"
17334
+ role="cell"
17335
+ data-label="Pull requests"
17336
+ >
17337
+ <span>
17338
+ <i class="fas fa-code"></i> 48
17339
+ </span>
17340
+ </td>
17341
+ <td
17342
+ class="pf-v6-c-table__td"
17343
+ role="cell"
17344
+ data-label="Workspaces"
17345
+ >
17346
+ <span>
17347
+ <i class="fas fa-cube"></i> 13
17348
+ </span>
17349
+ </td>
17350
+ <td
17351
+ class="pf-v6-c-table__td"
17352
+ role="cell"
17353
+ data-label="Last commit"
17354
+ >30 days ago</td>
17355
+ <td
17356
+ class="pf-v6-c-table__td"
17357
+ role="cell"
17358
+ data-label="Action"
17359
+ >
17360
+ <a href="#">Action link</a>
17361
+ </td>
17362
+
17363
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
17364
+ <button
17365
+ class="pf-v6-c-menu-toggle pf-m-plain"
17366
+ type="button"
17367
+ aria-expanded="false"
17368
+ aria-label="Table actions"
17369
+ >
17370
+ <span class="pf-v6-c-menu-toggle__icon">
17371
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
17372
+ </span>
17373
+ </button>
17374
+ </td>
17375
+ </tr>
17376
+
17377
+ <tr class="pf-v6-c-table__tr" role="row">
17378
+ <td
17379
+ class="pf-v6-c-table__td pf-v6-c-table__check"
17380
+ aria-label="Check row"
17381
+ >
17382
+ <label
17383
+ class="pf-v6-c-check pf-m-standalone"
17384
+ for="table-drawer-container-table-checkrow-5-check-input"
17385
+ >
17386
+ <input
17387
+ class="pf-v6-c-check__input"
17388
+ type="checkbox"
17389
+ id="table-drawer-container-table-checkrow-5-check-input"
17390
+ name="table-drawer-container-table-checkrow-5-check-input"
17391
+ aria-label="Select row"
17392
+ />
17393
+ </label>
17394
+ </td>
17395
+
17396
+ <th
17397
+ class="pf-v6-c-table__th"
17398
+ role="columnheader"
17399
+ data-label="Repository name"
17400
+ >
17401
+ <div>
17402
+ <div
17403
+ id="table-drawer-container-table-node4"
17404
+ >Node 4</div>
17405
+ <a href="#">siemur/test-space</a>
17406
+ </div>
17407
+ </th>
17408
+
17409
+ <td
17410
+ class="pf-v6-c-table__td"
17411
+ role="cell"
17412
+ data-label="Branches"
17413
+ >
17414
+ <span>
17415
+ <i class="fas fa-code-branch"></i> 3
17416
+ </span>
17417
+ </td>
17418
+ <td
17419
+ class="pf-v6-c-table__td"
17420
+ role="cell"
17421
+ data-label="Pull requests"
17422
+ >
17423
+ <span>
17424
+ <i class="fas fa-code"></i> 8
17425
+ </span>
17426
+ </td>
17427
+ <td
17428
+ class="pf-v6-c-table__td"
17429
+ role="cell"
17430
+ data-label="Workspaces"
17431
+ >
17432
+ <span>
17433
+ <i class="fas fa-cube"></i> 20
17434
+ </span>
17435
+ </td>
17436
+ <td
17437
+ class="pf-v6-c-table__td"
17438
+ role="cell"
17439
+ data-label="Last commit"
17440
+ >8 days ago</td>
17441
+ <td
17442
+ class="pf-v6-c-table__td"
17443
+ role="cell"
17444
+ data-label="Action"
17445
+ >
17446
+ <a href="#">Action link</a>
17447
+ </td>
17448
+
17449
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
17450
+ <button
17451
+ class="pf-v6-c-menu-toggle pf-m-plain"
17452
+ type="button"
17453
+ aria-expanded="false"
17454
+ aria-label="Table actions"
17455
+ >
17456
+ <span class="pf-v6-c-menu-toggle__icon">
17457
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
17458
+ </span>
17459
+ </button>
17460
+ </td>
17461
+ </tr>
17462
+
17463
+ <tr class="pf-v6-c-table__tr" role="row">
17464
+ <td
17465
+ class="pf-v6-c-table__td pf-v6-c-table__check"
17466
+ aria-label="Check row"
17467
+ >
17468
+ <label
17469
+ class="pf-v6-c-check pf-m-standalone"
17470
+ for="table-drawer-container-table-checkrow-6-check-input"
17471
+ >
17472
+ <input
17473
+ class="pf-v6-c-check__input"
17474
+ type="checkbox"
17475
+ id="table-drawer-container-table-checkrow-6-check-input"
17476
+ name="table-drawer-container-table-checkrow-6-check-input"
17477
+ aria-label="Select row"
17478
+ />
17479
+ </label>
17480
+ </td>
17481
+
17482
+ <td
17483
+ class="pf-v6-c-table__td"
17484
+ role="cell"
17485
+ data-label="Repository name"
17486
+ >
17487
+ <div>
17488
+ <div
17489
+ id="table-drawer-container-table-node5"
17490
+ >Node 5</div>
17491
+ <a href="#">siemur/test-space</a>
17492
+ </div>
17493
+ </td>
17494
+ <td
17495
+ class="pf-v6-c-table__td"
17496
+ role="cell"
17497
+ data-label="Branches"
17498
+ >
17499
+ <span>
17500
+ <i class="fas fa-code-branch"></i> 34
17501
+ </span>
17502
+ </td>
17503
+ <td
17504
+ class="pf-v6-c-table__td"
17505
+ role="cell"
17506
+ data-label="Pull requests"
17507
+ >
17508
+ <span>
17509
+ <i class="fas fa-code"></i> 21
17510
+ </span>
17511
+ </td>
17512
+ <td
17513
+ class="pf-v6-c-table__td"
17514
+ role="cell"
17515
+ data-label="Workspaces"
17516
+ >
17517
+ <span>
17518
+ <i class="fas fa-cube"></i> 26
17519
+ </span>
17520
+ </td>
17521
+ <td
17522
+ class="pf-v6-c-table__td"
17523
+ role="cell"
17524
+ data-label="Last commit"
17525
+ >2 days ago</td>
17526
+ <td
17527
+ class="pf-v6-c-table__td"
17528
+ role="cell"
17529
+ data-label="Action"
17530
+ >
17531
+ <a href="#">Action link</a>
17532
+ </td>
17533
+
17534
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
17535
+ <button
17536
+ class="pf-v6-c-menu-toggle pf-m-plain"
17537
+ type="button"
17538
+ aria-expanded="false"
17539
+ aria-label="Table actions"
17540
+ >
17541
+ <span class="pf-v6-c-menu-toggle__icon">
17542
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
17543
+ </span>
17544
+ </button>
17545
+ </td>
17546
+ </tr>
17547
+ </tbody>
17548
+ </table>
17549
+ <div class="pf-v6-c-pagination pf-m-bottom">
17550
+ <div class="pf-v6-c-pagination__page-menu">
17551
+ <button
17552
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
17553
+ type="button"
17554
+ aria-expanded="false"
17555
+ aria-label="Menu toggle"
17556
+ id="table-drawer-container-pagination-menu-toggle-bottom-example"
17557
+ >
17558
+ <span class="pf-v6-c-menu-toggle__text">
17559
+ <b>1 - 10</b>&nbsp;of&nbsp;
17560
+ <b>36</b>
17561
+ </span>
17562
+ <span class="pf-v6-c-menu-toggle__controls">
17563
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
17564
+ <i
17565
+ class="fas fa-caret-down fa-fw"
17566
+ aria-hidden="true"
17567
+ ></i>
17568
+ </span>
17569
+ </span>
17570
+ </button>
17571
+ </div>
17572
+ <nav
17573
+ class="pf-v6-c-pagination__nav"
17574
+ aria-label="Pagination"
17575
+ >
17576
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
17577
+ <button
17578
+ class="pf-v6-c-button pf-m-plain"
17579
+ type="button"
17580
+ disabled
17581
+ aria-label="Go to first page"
17582
+ >
17583
+ <span class="pf-v6-c-button__icon">
17584
+ <i
17585
+ class="fas fa-angle-double-left"
17586
+ aria-hidden="true"
17587
+ ></i>
17588
+ </span>
17589
+ </button>
17590
+ </div>
17591
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
17592
+ <button
17593
+ class="pf-v6-c-button pf-m-plain"
17594
+ type="button"
17595
+ disabled
17596
+ aria-label="Go to previous page"
17597
+ >
17598
+ <span class="pf-v6-c-button__icon">
17599
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
17600
+ </span>
17601
+ </button>
17602
+ </div>
17603
+ <div class="pf-v6-c-pagination__nav-page-select">
17604
+ <span class="pf-v6-c-form-control">
17605
+ <input
17606
+ aria-label="Current page"
17607
+ type="number"
17608
+ min="1"
17609
+ max="4"
17610
+ value="1"
17611
+ />
17612
+ </span>
17613
+ <span aria-hidden="true">of 4</span>
17614
+ </div>
17615
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
17616
+ <button
17617
+ class="pf-v6-c-button pf-m-plain"
17618
+ type="button"
17619
+ aria-label="Go to next page"
17620
+ >
17621
+ <span class="pf-v6-c-button__icon">
17622
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
17623
+ </span>
17624
+ </button>
17625
+ </div>
17626
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
17627
+ <button
17628
+ class="pf-v6-c-button pf-m-plain"
17629
+ type="button"
17630
+ disabled
17631
+ aria-label="Go to last page"
17632
+ >
17633
+ <span class="pf-v6-c-button__icon">
17634
+ <i
17635
+ class="fas fa-angle-double-right"
17636
+ aria-hidden="true"
17637
+ ></i>
17638
+ </span>
17639
+ </button>
17640
+ </div>
17641
+ </nav>
17642
+ </div>
17643
+ </div>
17644
+ </div>
17645
+ </div>
17646
+
17647
+ <div
17648
+ class="pf-v6-c-drawer__panel pf-m-width-50"
17649
+ hidden
17650
+ style="container-type: inline-size; container-name: pf-v6-contain-table;"
17651
+ >
17652
+ <div class="pf-v6-c-drawer__head">
17653
+ <h2 class="pf-v6-c-title pf-m-2xl">Drawer as a container</h2>
17654
+ <div class="pf-v6-c-drawer__actions">
17655
+ <div class="pf-v6-c-drawer__close">
17656
+ <button
17657
+ class="pf-v6-c-button pf-m-plain"
17658
+ type="button"
17659
+ aria-label="Close drawer panel"
17660
+ >
17661
+ <span class="pf-v6-c-button__icon">
17662
+ <i class="fas fa-times" aria-hidden="true"></i>
17663
+ </span>
17664
+ </button>
17665
+ </div>
17666
+ </div>
17667
+ </div>
17668
+
17669
+ <div class="pf-v6-c-drawer__body">
17670
+ <div
17671
+ class="pf-v6-c-toolbar"
17672
+ id="table-drawer-container-drawer-toolbar"
17673
+ >
17674
+ <div class="pf-v6-c-toolbar__content">
17675
+ <div class="pf-v6-c-toolbar__content-section pf-m-nowrap">
17676
+ <div class="pf-v6-c-toolbar__item pf-m-bulk-select">
17677
+ <div
17678
+ class="pf-v6-c-menu-toggle pf-m-split-button"
17679
+ id="table-drawer-container-drawer-toolbar-check"
17680
+ >
17681
+ <label
17682
+ class="pf-v6-c-check pf-m-standalone"
17683
+ for="table-drawer-container-drawer-toolbar-check-check-input"
17684
+ >
17685
+ <input
17686
+ class="pf-v6-c-check__input"
17687
+ type="checkbox"
17688
+ id="table-drawer-container-drawer-toolbar-check-check-input"
17689
+ name="table-drawer-container-drawer-toolbar-check-check-input"
17690
+ aria-label="Standalone check"
17691
+ />
17692
+ </label>
17693
+ <button
17694
+ class="pf-v6-c-menu-toggle__button"
17695
+ type="button"
17696
+ aria-expanded="false"
17697
+ id="table-drawer-container-drawer-toolbar-menu-toggle-toggle-button"
17698
+ aria-label="Menu toggle"
17699
+ >
17700
+ <span class="pf-v6-c-menu-toggle__controls">
17701
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
17702
+ <i
17703
+ class="fas fa-caret-down fa-fw"
17704
+ aria-hidden="true"
17705
+ ></i>
17706
+ </span>
17707
+ </span>
17708
+ </button>
17709
+ </div>
17710
+ </div>
17711
+
17712
+ <div class="pf-v6-c-toolbar__item pf-m-search-filter">
17713
+ <div
17714
+ class="pf-v6-c-input-group"
17715
+ aria-label="search filter"
17716
+ role="group"
17717
+ >
17718
+ <div class="pf-v6-c-input-group__item">
17719
+ <button
17720
+ class="pf-v6-c-menu-toggle"
17721
+ type="button"
17722
+ aria-expanded="false"
17723
+ id="table-drawer-container-drawer-toolbar-search-filter-menu"
17724
+ >
17725
+ <span class="pf-v6-c-menu-toggle__icon">
17726
+ <i class="fas fa-filter" aria-hidden="true"></i>
17727
+ </span>
17728
+ <span class="pf-v6-c-menu-toggle__text">Name</span>
17729
+ <span class="pf-v6-c-menu-toggle__controls">
17730
+ <span
17731
+ class="pf-v6-c-menu-toggle__toggle-icon"
17732
+ >
17733
+ <i
17734
+ class="fas fa-caret-down fa-fw"
17735
+ aria-hidden="true"
17736
+ ></i>
17737
+ </span>
17738
+ </span>
17739
+ </button>
17740
+ </div>
17741
+ <div class="pf-v6-c-input-group__item pf-m-fill">
17742
+ <div class="pf-v6-c-text-input-group">
17743
+ <div
17744
+ class="pf-v6-c-text-input-group__main pf-m-icon"
17745
+ >
17746
+ <span class="pf-v6-c-text-input-group__text">
17747
+ <span
17748
+ class="pf-v6-c-text-input-group__icon"
17749
+ >
17750
+ <i class="fas fa-fw fa-search"></i>
17751
+ </span>
17752
+ <input
17753
+ class="pf-v6-c-text-input-group__text-input"
17754
+ type="text"
17755
+ placeholder="Filter by name"
17756
+ value
17757
+ aria-label="Search input"
17758
+ />
17759
+ </span>
17760
+ </div>
17761
+ </div>
17762
+ </div>
17763
+ </div>
17764
+ </div>
17765
+
17766
+ <div class="pf-v6-c-toolbar__item pf-m-pagination">
17767
+ <div class="pf-v6-c-pagination pf-m-compact">
17768
+ <div class="pf-v6-c-pagination__page-menu">
17769
+ <button
17770
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
17771
+ type="button"
17772
+ aria-expanded="false"
17773
+ aria-label="Menu toggle"
17774
+ id="table-drawer-container-drawer-toolbar-top-pagination"
17775
+ >
17776
+ <span class="pf-v6-c-menu-toggle__text">
17777
+ <b>1 - 10</b>&nbsp;of&nbsp;
17778
+ <b>36</b>
17779
+ </span>
17780
+ <span class="pf-v6-c-menu-toggle__controls">
17781
+ <span
17782
+ class="pf-v6-c-menu-toggle__toggle-icon"
17783
+ >
17784
+ <i
17785
+ class="fas fa-caret-down fa-fw"
17786
+ aria-hidden="true"
17787
+ ></i>
17788
+ </span>
17789
+ </span>
17790
+ </button>
17791
+ </div>
17792
+ <nav
17793
+ class="pf-v6-c-pagination__nav"
17794
+ aria-label="Toolbar top pagination"
17795
+ >
17796
+ <div
17797
+ class="pf-v6-c-pagination__nav-control pf-m-prev"
17798
+ >
17799
+ <button
17800
+ class="pf-v6-c-button pf-m-plain"
17801
+ type="button"
17802
+ disabled
17803
+ aria-label="Go to previous page"
17804
+ >
17805
+ <span class="pf-v6-c-button__icon">
17806
+ <i
17807
+ class="fas fa-angle-left"
17808
+ aria-hidden="true"
17809
+ ></i>
17810
+ </span>
17811
+ </button>
17812
+ </div>
17813
+ <div
17814
+ class="pf-v6-c-pagination__nav-control pf-m-next"
17815
+ >
17816
+ <button
17817
+ class="pf-v6-c-button pf-m-plain"
17818
+ type="button"
17819
+ aria-label="Go to next page"
17820
+ >
17821
+ <span class="pf-v6-c-button__icon">
17822
+ <i
17823
+ class="fas fa-angle-right"
17824
+ aria-hidden="true"
17825
+ ></i>
17826
+ </span>
17827
+ </button>
17828
+ </div>
17829
+ </nav>
17830
+ </div>
17831
+ </div>
17832
+ </div>
17833
+
17834
+ <div
17835
+ class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
17836
+ id="table-drawer-container-drawer-toolbar-expandable-content"
17837
+ hidden
17838
+ ></div>
17839
+ </div>
17840
+ </div>
17841
+ <table
17842
+ class="pf-v6-c-table pf-m-grid-md"
17843
+ role="grid"
17844
+ aria-label="This is a table with checkboxes"
17845
+ id="table-drawer-container-table"
17846
+ >
17847
+ <thead class="pf-v6-c-table__thead">
17848
+ <tr class="pf-v6-c-table__tr" role="row">
17849
+ <th
17850
+ class="pf-v6-c-table__th pf-v6-c-table__cell-empty"
17851
+ role="columnheader"
17852
+ scope="col"
17853
+ >
17854
+ <span class="pf-v6-screen-reader">Row select</span>
17855
+ </th>
17856
+
17857
+ <th
17858
+ class="pf-v6-c-table__th"
17859
+ role="columnheader"
17860
+ scope="col"
17861
+ >Repositories</th>
17862
+
17863
+ <th
17864
+ class="pf-v6-c-table__th"
17865
+ role="columnheader"
17866
+ scope="col"
17867
+ >Branches</th>
17868
+
17869
+ <th
17870
+ class="pf-v6-c-table__th"
17871
+ role="columnheader"
17872
+ scope="col"
17873
+ >Pull requests</th>
17874
+
17875
+ <th
17876
+ class="pf-v6-c-table__th"
17877
+ role="columnheader"
17878
+ scope="col"
17879
+ >Workspaces</th>
17880
+
17881
+ <th
17882
+ class="pf-v6-c-table__th"
17883
+ role="columnheader"
17884
+ scope="col"
17885
+ >Last commit</th>
17886
+
17887
+ <th
17888
+ class="pf-v6-c-table__th pf-v6-c-table__cell-empty"
17889
+ role="columnheader"
17890
+ scope="col"
17891
+ >
17892
+ <span class="pf-v6-screen-reader">Actions</span>
17893
+ </th>
17894
+
17895
+ <th
17896
+ class="pf-v6-c-table__th pf-v6-c-table__cell-empty"
17897
+ role="columnheader"
17898
+ scope="col"
17899
+ >
17900
+ <span class="pf-v6-screen-reader">Actions</span>
17901
+ </th>
17902
+ </tr>
17903
+ </thead>
17904
+
17905
+ <tbody class="pf-v6-c-table__tbody" role="rowgroup">
17906
+ <tr class="pf-v6-c-table__tr" role="row">
17907
+ <td
17908
+ class="pf-v6-c-table__td pf-v6-c-table__check"
17909
+ aria-label="Check row"
17910
+ >
17911
+ <label
17912
+ class="pf-v6-c-check pf-m-standalone"
17913
+ for="table-drawer-container-table-checkrow-2-check-input"
17914
+ >
17915
+ <input
17916
+ class="pf-v6-c-check__input"
17917
+ type="checkbox"
17918
+ id="table-drawer-container-table-checkrow-2-check-input"
17919
+ name="table-drawer-container-table-checkrow-2-check-input"
17920
+ aria-label="Select row"
17921
+ />
17922
+ </label>
17923
+ </td>
17924
+
17925
+ <th
17926
+ class="pf-v6-c-table__th"
17927
+ role="columnheader"
17928
+ data-label="Repository name"
17929
+ >
17930
+ <div>
17931
+ <div id="table-drawer-container-table-node1">Node 1</div>
17932
+ <a href="#">siemur/test-space</a>
17933
+ </div>
17934
+ </th>
17935
+
17936
+ <td
17937
+ class="pf-v6-c-table__td"
17938
+ role="cell"
17939
+ data-label="Branches"
17940
+ >
17941
+ <span>
17942
+ <i class="fas fa-code-branch"></i> 10
17943
+ </span>
17944
+ </td>
17945
+ <td
17946
+ class="pf-v6-c-table__td"
17947
+ role="cell"
17948
+ data-label="Pull requests"
17949
+ >
17950
+ <span>
17951
+ <i class="fas fa-code"></i> 25
17952
+ </span>
17953
+ </td>
17954
+ <td
17955
+ class="pf-v6-c-table__td"
17956
+ role="cell"
17957
+ data-label="Workspaces"
17958
+ >
17959
+ <span>
17960
+ <i class="fas fa-cube"></i> 5
17961
+ </span>
17962
+ </td>
17963
+ <td
17964
+ class="pf-v6-c-table__td"
17965
+ role="cell"
17966
+ data-label="Last commit"
17967
+ >2 days ago</td>
17968
+ <td
17969
+ class="pf-v6-c-table__td"
17970
+ role="cell"
17971
+ data-label="Action"
17972
+ >
17973
+ <a href="#">Action link</a>
17974
+ </td>
17975
+
17976
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
17977
+ <button
17978
+ class="pf-v6-c-menu-toggle pf-m-plain"
17979
+ type="button"
17980
+ aria-expanded="false"
17981
+ aria-label="Table actions"
17982
+ >
17983
+ <span class="pf-v6-c-menu-toggle__icon">
17984
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
17985
+ </span>
17986
+ </button>
17987
+ </td>
17988
+ </tr>
17989
+
17990
+ <tr class="pf-v6-c-table__tr" role="row">
17991
+ <td
17992
+ class="pf-v6-c-table__td pf-v6-c-table__check"
17993
+ aria-label="Check row"
17994
+ >
17995
+ <label
17996
+ class="pf-v6-c-check pf-m-standalone"
17997
+ for="table-drawer-container-table-checkrow-3-check-input"
17998
+ >
17999
+ <input
18000
+ class="pf-v6-c-check__input"
18001
+ type="checkbox"
18002
+ id="table-drawer-container-table-checkrow-3-check-input"
18003
+ name="table-drawer-container-table-checkrow-3-check-input"
18004
+ aria-label="Select row"
18005
+ />
18006
+ </label>
18007
+ </td>
18008
+
18009
+ <th
18010
+ class="pf-v6-c-table__th"
18011
+ role="columnheader"
18012
+ data-label="Repository name"
18013
+ >
18014
+ <div>
18015
+ <div id="table-drawer-container-table-node2">Node 2</div>
18016
+ <a href="#">siemur/test-space</a>
18017
+ </div>
18018
+ </th>
18019
+
18020
+ <td
18021
+ class="pf-v6-c-table__td"
18022
+ role="cell"
18023
+ data-label="Branches"
18024
+ >
18025
+ <span>
18026
+ <i class="fas fa-code-branch"></i> 8
18027
+ </span>
18028
+ </td>
18029
+ <td
18030
+ class="pf-v6-c-table__td"
18031
+ role="cell"
18032
+ data-label="Pull requests"
18033
+ >
18034
+ <span>
18035
+ <i class="fas fa-code"></i> 30
18036
+ </span>
18037
+ </td>
18038
+ <td
18039
+ class="pf-v6-c-table__td"
18040
+ role="cell"
18041
+ data-label="Workspaces"
18042
+ >
18043
+ <span>
18044
+ <i class="fas fa-cube"></i> 2
18045
+ </span>
18046
+ </td>
18047
+ <td
18048
+ class="pf-v6-c-table__td"
18049
+ role="cell"
18050
+ data-label="Last commit"
18051
+ >2 days ago</td>
18052
+ <td
18053
+ class="pf-v6-c-table__td"
18054
+ role="cell"
18055
+ data-label="Action"
18056
+ >
18057
+ <a href="#">Action link</a>
18058
+ </td>
18059
+
18060
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
18061
+ <button
18062
+ class="pf-v6-c-menu-toggle pf-m-plain"
18063
+ type="button"
18064
+ aria-expanded="false"
18065
+ aria-label="Table actions"
18066
+ >
18067
+ <span class="pf-v6-c-menu-toggle__icon">
18068
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
18069
+ </span>
18070
+ </button>
18071
+ </td>
18072
+ </tr>
18073
+
18074
+ <tr class="pf-v6-c-table__tr" role="row">
18075
+ <td
18076
+ class="pf-v6-c-table__td pf-v6-c-table__check"
18077
+ aria-label="Check row"
18078
+ >
18079
+ <label
18080
+ class="pf-v6-c-check pf-m-standalone"
18081
+ for="table-drawer-container-table-checkrow-4-check-input"
18082
+ >
18083
+ <input
18084
+ class="pf-v6-c-check__input"
18085
+ type="checkbox"
18086
+ id="table-drawer-container-table-checkrow-4-check-input"
18087
+ name="table-drawer-container-table-checkrow-4-check-input"
18088
+ aria-label="Select row"
18089
+ />
18090
+ </label>
18091
+ </td>
18092
+
18093
+ <th
18094
+ class="pf-v6-c-table__th"
18095
+ role="columnheader"
18096
+ data-label="Repository name"
18097
+ >
18098
+ <div>
18099
+ <div id="table-drawer-container-table-node3">Node 3</div>
18100
+ <a href="#">siemur/test-space</a>
18101
+ </div>
18102
+ </th>
18103
+
18104
+ <td
18105
+ class="pf-v6-c-table__td"
18106
+ role="cell"
18107
+ data-label="Branches"
18108
+ >
18109
+ <span>
18110
+ <i class="fas fa-code-branch"></i> 12
18111
+ </span>
18112
+ </td>
18113
+ <td
18114
+ class="pf-v6-c-table__td"
18115
+ role="cell"
18116
+ data-label="Pull requests"
18117
+ >
18118
+ <span>
18119
+ <i class="fas fa-code"></i> 48
18120
+ </span>
18121
+ </td>
18122
+ <td
18123
+ class="pf-v6-c-table__td"
18124
+ role="cell"
18125
+ data-label="Workspaces"
18126
+ >
18127
+ <span>
18128
+ <i class="fas fa-cube"></i> 13
18129
+ </span>
18130
+ </td>
18131
+ <td
18132
+ class="pf-v6-c-table__td"
18133
+ role="cell"
18134
+ data-label="Last commit"
18135
+ >30 days ago</td>
18136
+ <td
18137
+ class="pf-v6-c-table__td"
18138
+ role="cell"
18139
+ data-label="Action"
18140
+ >
18141
+ <a href="#">Action link</a>
18142
+ </td>
18143
+
18144
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
18145
+ <button
18146
+ class="pf-v6-c-menu-toggle pf-m-plain"
18147
+ type="button"
18148
+ aria-expanded="false"
18149
+ aria-label="Table actions"
18150
+ >
18151
+ <span class="pf-v6-c-menu-toggle__icon">
18152
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
18153
+ </span>
18154
+ </button>
18155
+ </td>
18156
+ </tr>
18157
+
18158
+ <tr class="pf-v6-c-table__tr" role="row">
18159
+ <td
18160
+ class="pf-v6-c-table__td pf-v6-c-table__check"
18161
+ aria-label="Check row"
18162
+ >
18163
+ <label
18164
+ class="pf-v6-c-check pf-m-standalone"
18165
+ for="table-drawer-container-table-checkrow-5-check-input"
18166
+ >
18167
+ <input
18168
+ class="pf-v6-c-check__input"
18169
+ type="checkbox"
18170
+ id="table-drawer-container-table-checkrow-5-check-input"
18171
+ name="table-drawer-container-table-checkrow-5-check-input"
18172
+ aria-label="Select row"
18173
+ />
18174
+ </label>
18175
+ </td>
18176
+
18177
+ <th
18178
+ class="pf-v6-c-table__th"
18179
+ role="columnheader"
18180
+ data-label="Repository name"
18181
+ >
18182
+ <div>
18183
+ <div id="table-drawer-container-table-node4">Node 4</div>
18184
+ <a href="#">siemur/test-space</a>
18185
+ </div>
18186
+ </th>
18187
+
18188
+ <td
18189
+ class="pf-v6-c-table__td"
18190
+ role="cell"
18191
+ data-label="Branches"
18192
+ >
18193
+ <span>
18194
+ <i class="fas fa-code-branch"></i> 3
18195
+ </span>
18196
+ </td>
18197
+ <td
18198
+ class="pf-v6-c-table__td"
18199
+ role="cell"
18200
+ data-label="Pull requests"
18201
+ >
18202
+ <span>
18203
+ <i class="fas fa-code"></i> 8
18204
+ </span>
18205
+ </td>
18206
+ <td
18207
+ class="pf-v6-c-table__td"
18208
+ role="cell"
18209
+ data-label="Workspaces"
18210
+ >
18211
+ <span>
18212
+ <i class="fas fa-cube"></i> 20
18213
+ </span>
18214
+ </td>
18215
+ <td
18216
+ class="pf-v6-c-table__td"
18217
+ role="cell"
18218
+ data-label="Last commit"
18219
+ >8 days ago</td>
18220
+ <td
18221
+ class="pf-v6-c-table__td"
18222
+ role="cell"
18223
+ data-label="Action"
18224
+ >
18225
+ <a href="#">Action link</a>
18226
+ </td>
18227
+
18228
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
18229
+ <button
18230
+ class="pf-v6-c-menu-toggle pf-m-plain"
18231
+ type="button"
18232
+ aria-expanded="false"
18233
+ aria-label="Table actions"
18234
+ >
18235
+ <span class="pf-v6-c-menu-toggle__icon">
18236
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
18237
+ </span>
18238
+ </button>
18239
+ </td>
18240
+ </tr>
18241
+
18242
+ <tr class="pf-v6-c-table__tr" role="row">
18243
+ <td
18244
+ class="pf-v6-c-table__td pf-v6-c-table__check"
18245
+ aria-label="Check row"
18246
+ >
18247
+ <label
18248
+ class="pf-v6-c-check pf-m-standalone"
18249
+ for="table-drawer-container-table-checkrow-6-check-input"
18250
+ >
18251
+ <input
18252
+ class="pf-v6-c-check__input"
18253
+ type="checkbox"
18254
+ id="table-drawer-container-table-checkrow-6-check-input"
18255
+ name="table-drawer-container-table-checkrow-6-check-input"
18256
+ aria-label="Select row"
18257
+ />
18258
+ </label>
18259
+ </td>
18260
+
18261
+ <td
18262
+ class="pf-v6-c-table__td"
18263
+ role="cell"
18264
+ data-label="Repository name"
18265
+ >
18266
+ <div>
18267
+ <div id="table-drawer-container-table-node5">Node 5</div>
18268
+ <a href="#">siemur/test-space</a>
18269
+ </div>
18270
+ </td>
18271
+ <td
18272
+ class="pf-v6-c-table__td"
18273
+ role="cell"
18274
+ data-label="Branches"
18275
+ >
18276
+ <span>
18277
+ <i class="fas fa-code-branch"></i> 34
18278
+ </span>
18279
+ </td>
18280
+ <td
18281
+ class="pf-v6-c-table__td"
18282
+ role="cell"
18283
+ data-label="Pull requests"
18284
+ >
18285
+ <span>
18286
+ <i class="fas fa-code"></i> 21
18287
+ </span>
18288
+ </td>
18289
+ <td
18290
+ class="pf-v6-c-table__td"
18291
+ role="cell"
18292
+ data-label="Workspaces"
18293
+ >
18294
+ <span>
18295
+ <i class="fas fa-cube"></i> 26
18296
+ </span>
18297
+ </td>
18298
+ <td
18299
+ class="pf-v6-c-table__td"
18300
+ role="cell"
18301
+ data-label="Last commit"
18302
+ >2 days ago</td>
18303
+ <td
18304
+ class="pf-v6-c-table__td"
18305
+ role="cell"
18306
+ data-label="Action"
18307
+ >
18308
+ <a href="#">Action link</a>
18309
+ </td>
18310
+
18311
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
18312
+ <button
18313
+ class="pf-v6-c-menu-toggle pf-m-plain"
18314
+ type="button"
18315
+ aria-expanded="false"
18316
+ aria-label="Table actions"
18317
+ >
18318
+ <span class="pf-v6-c-menu-toggle__icon">
18319
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
18320
+ </span>
18321
+ </button>
18322
+ </td>
18323
+ </tr>
18324
+ </tbody>
18325
+ </table>
18326
+ <div class="pf-v6-c-pagination pf-m-bottom">
18327
+ <div class="pf-v6-c-pagination__page-menu">
18328
+ <button
18329
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
18330
+ type="button"
18331
+ aria-expanded="false"
18332
+ aria-label="Menu toggle"
18333
+ id="table-drawer-container-pagination-menu-toggle-bottom-example"
18334
+ >
18335
+ <span class="pf-v6-c-menu-toggle__text">
18336
+ <b>1 - 10</b>&nbsp;of&nbsp;
18337
+ <b>36</b>
18338
+ </span>
18339
+ <span class="pf-v6-c-menu-toggle__controls">
18340
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
18341
+ <i
18342
+ class="fas fa-caret-down fa-fw"
18343
+ aria-hidden="true"
18344
+ ></i>
18345
+ </span>
18346
+ </span>
18347
+ </button>
18348
+ </div>
18349
+ <nav
18350
+ class="pf-v6-c-pagination__nav"
18351
+ aria-label="Pagination"
18352
+ >
18353
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
18354
+ <button
18355
+ class="pf-v6-c-button pf-m-plain"
18356
+ type="button"
18357
+ disabled
18358
+ aria-label="Go to first page"
18359
+ >
18360
+ <span class="pf-v6-c-button__icon">
18361
+ <i
18362
+ class="fas fa-angle-double-left"
18363
+ aria-hidden="true"
18364
+ ></i>
18365
+ </span>
18366
+ </button>
18367
+ </div>
18368
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
18369
+ <button
18370
+ class="pf-v6-c-button pf-m-plain"
18371
+ type="button"
18372
+ disabled
18373
+ aria-label="Go to previous page"
18374
+ >
18375
+ <span class="pf-v6-c-button__icon">
18376
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
18377
+ </span>
18378
+ </button>
18379
+ </div>
18380
+ <div class="pf-v6-c-pagination__nav-page-select">
18381
+ <span class="pf-v6-c-form-control">
18382
+ <input
18383
+ aria-label="Current page"
18384
+ type="number"
18385
+ min="1"
18386
+ max="4"
18387
+ value="1"
18388
+ />
18389
+ </span>
18390
+ <span aria-hidden="true">of 4</span>
18391
+ </div>
18392
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
18393
+ <button
18394
+ class="pf-v6-c-button pf-m-plain"
18395
+ type="button"
18396
+ aria-label="Go to next page"
18397
+ >
18398
+ <span class="pf-v6-c-button__icon">
18399
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
18400
+ </span>
18401
+ </button>
18402
+ </div>
18403
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
18404
+ <button
18405
+ class="pf-v6-c-button pf-m-plain"
18406
+ type="button"
18407
+ disabled
18408
+ aria-label="Go to last page"
18409
+ >
18410
+ <span class="pf-v6-c-button__icon">
18411
+ <i
18412
+ class="fas fa-angle-double-right"
18413
+ aria-hidden="true"
18414
+ ></i>
18415
+ </span>
18416
+ </button>
18417
+ </div>
18418
+ </nav>
18419
+ </div>
18420
+ </div>
18421
+ </div>
18422
+ </div>
18423
+ </div>
18424
+ </div>
18425
+ </section>
18426
+ </main>
18427
+ </div>
18428
+ </div>
18429
+
18430
+ ```