@patternfly/patternfly 6.5.0-prerelease.2 → 6.5.0-prerelease.21

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 (199) hide show
  1. package/assets/images/RHAiExperienceIcon.svg +27 -0
  2. package/assets/images/RHAutomationsLogo.svg +96 -0
  3. package/assets/images/RHServerStackIcon.svg +16 -0
  4. package/assets/images/compass--hero-bg.png +0 -0
  5. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  6. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  7. package/assets/images/compass--wallpaper-dark.png +0 -0
  8. package/assets/images/compass--wallpaper-light.png +0 -0
  9. package/base/normalize.scss +7 -0
  10. package/base/patternfly-common.css +46 -0
  11. package/base/patternfly-common.scss +56 -0
  12. package/base/patternfly-variables.css +42 -0
  13. package/base/tokens/tokens-local.scss +66 -0
  14. package/components/ActionList/action-list.css +9 -0
  15. package/components/ActionList/action-list.scss +12 -0
  16. package/components/Button/button.css +34 -4
  17. package/components/Button/button.scss +40 -4
  18. package/components/Card/card.css +12 -0
  19. package/components/Card/card.scss +15 -1
  20. package/components/Compass/compass.css +161 -0
  21. package/components/Compass/compass.scss +221 -0
  22. package/components/DataList/data-list.css +5 -1
  23. package/components/DataList/data-list.scss +6 -1
  24. package/components/Drawer/drawer.css +43 -3
  25. package/components/Drawer/drawer.scss +52 -4
  26. package/components/Hero/hero.css +74 -0
  27. package/components/Hero/hero.scss +86 -0
  28. package/components/MenuToggle/menu-toggle.css +4 -0
  29. package/components/MenuToggle/menu-toggle.scss +5 -0
  30. package/components/Spinner/spinner.css +3 -0
  31. package/components/Spinner/spinner.scss +5 -0
  32. package/components/Table/table.css +3 -0
  33. package/components/Table/table.scss +5 -0
  34. package/components/Tabs/tabs.css +16 -1
  35. package/components/Tabs/tabs.scss +21 -1
  36. package/components/_index.css +440 -84
  37. package/components/_index.scss +3 -1
  38. package/docs/components/ActionList/examples/ActionList.md +85 -0
  39. package/docs/components/Button/examples/Button.md +116 -0
  40. package/docs/components/Card/examples/Card.md +154 -0
  41. package/docs/components/Compass/examples/Compass.css +11 -0
  42. package/docs/components/Compass/examples/Compass.md +66 -0
  43. package/docs/components/DataList/examples/DataList.md +181 -185
  44. package/docs/components/Drawer/examples/Drawer.md +80 -14
  45. package/docs/components/Hero/examples/Hero.md +25 -0
  46. package/docs/components/MenuToggle/examples/MenuToggle.md +40 -0
  47. package/docs/components/Table/examples/Table.md +88 -0
  48. package/docs/components/Tabs/examples/Tabs.md +197 -18
  49. package/docs/components/Wizard/examples/Wizard.md +15 -15
  50. package/docs/demos/Compass/examples/Compass.md +5826 -0
  51. package/docs/demos/Dashboard/examples/Dashboard.md +1 -4
  52. package/docs/demos/DescriptionList/examples/DescriptionList.md +31 -33
  53. package/docs/demos/Drawer/examples/Drawer.md +31 -33
  54. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +127 -163
  55. package/docs/demos/Wizard/examples/Wizard.md +31 -34
  56. package/icons/PfIcons/add-circle-o.svg +4 -0
  57. package/icons/PfIcons/ansible-tower.svg +4 -0
  58. package/icons/PfIcons/applications.svg +4 -0
  59. package/icons/PfIcons/arrow.svg +4 -0
  60. package/icons/PfIcons/asleep.svg +4 -0
  61. package/icons/PfIcons/attention-bell.svg +4 -0
  62. package/icons/PfIcons/automation.svg +4 -0
  63. package/icons/PfIcons/bell.svg +4 -0
  64. package/icons/PfIcons/blueprint.svg +4 -0
  65. package/icons/PfIcons/build.svg +4 -0
  66. package/icons/PfIcons/builder-image.svg +4 -0
  67. package/icons/PfIcons/bundle.svg +4 -0
  68. package/icons/PfIcons/catalog.svg +4 -0
  69. package/icons/PfIcons/chat.svg +4 -0
  70. package/icons/PfIcons/close.svg +4 -0
  71. package/icons/PfIcons/cloud-security.svg +4 -0
  72. package/icons/PfIcons/cloud-tenant.svg +4 -0
  73. package/icons/PfIcons/cluster.svg +4 -0
  74. package/icons/PfIcons/connected.svg +4 -0
  75. package/icons/PfIcons/container-node.svg +4 -0
  76. package/icons/PfIcons/cpu.svg +4 -0
  77. package/icons/PfIcons/critical-risk.svg +4 -0
  78. package/icons/PfIcons/data-processor.svg +4 -0
  79. package/icons/PfIcons/data-sink.svg +4 -0
  80. package/icons/PfIcons/data-source.svg +4 -0
  81. package/icons/PfIcons/degraded.svg +4 -0
  82. package/icons/PfIcons/disconnected.svg +4 -0
  83. package/icons/PfIcons/domain.svg +4 -0
  84. package/icons/PfIcons/edit.svg +4 -0
  85. package/icons/PfIcons/enhancement.svg +4 -0
  86. package/icons/PfIcons/enterprise.svg +4 -0
  87. package/icons/PfIcons/equalizer.svg +4 -0
  88. package/icons/PfIcons/error-circle-o.svg +4 -0
  89. package/icons/PfIcons/export.svg +4 -0
  90. package/icons/PfIcons/filter.svg +4 -0
  91. package/icons/PfIcons/flavor.svg +4 -0
  92. package/icons/PfIcons/folder-close.svg +4 -0
  93. package/icons/PfIcons/folder-open.svg +4 -0
  94. package/icons/PfIcons/globe-route.svg +4 -0
  95. package/icons/PfIcons/help.svg +4 -0
  96. package/icons/PfIcons/history.svg +4 -0
  97. package/icons/PfIcons/home.svg +4 -0
  98. package/icons/PfIcons/import.svg +4 -0
  99. package/icons/PfIcons/in-progress.svg +4 -0
  100. package/icons/PfIcons/info.svg +4 -0
  101. package/icons/PfIcons/infrastructure.svg +4 -0
  102. package/icons/PfIcons/integration.svg +4 -0
  103. package/icons/PfIcons/key.svg +4 -0
  104. package/icons/PfIcons/locked.svg +4 -0
  105. package/icons/PfIcons/maintenance.svg +4 -0
  106. package/icons/PfIcons/memory.svg +4 -0
  107. package/icons/PfIcons/messages.svg +4 -0
  108. package/icons/PfIcons/middleware.svg +4 -0
  109. package/icons/PfIcons/migration.svg +4 -0
  110. package/icons/PfIcons/module.svg +4 -0
  111. package/icons/PfIcons/monitoring.svg +4 -0
  112. package/icons/PfIcons/multicluster.svg +4 -0
  113. package/icons/PfIcons/namespaces.svg +4 -0
  114. package/icons/PfIcons/network.svg +4 -0
  115. package/icons/PfIcons/new-process.svg +4 -0
  116. package/icons/PfIcons/not-started.svg +4 -0
  117. package/icons/PfIcons/off.svg +4 -0
  118. package/icons/PfIcons/ok.svg +4 -0
  119. package/icons/PfIcons/on-running.svg +4 -0
  120. package/icons/PfIcons/on.svg +4 -0
  121. package/icons/PfIcons/open-drawer-right.svg +4 -0
  122. package/icons/PfIcons/openshift.svg +4 -0
  123. package/icons/PfIcons/openstack.svg +4 -0
  124. package/icons/PfIcons/optimize.svg +4 -0
  125. package/icons/PfIcons/orders.svg +4 -0
  126. package/icons/PfIcons/os-image.svg +4 -0
  127. package/icons/PfIcons/package.svg +4 -0
  128. package/icons/PfIcons/panel-close.svg +4 -0
  129. package/icons/PfIcons/panel-open.svg +4 -0
  130. package/icons/PfIcons/paused.svg +4 -0
  131. package/icons/PfIcons/pending.svg +4 -0
  132. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  133. package/icons/PfIcons/pficon-history.svg +4 -0
  134. package/icons/PfIcons/pficon-network-range.svg +4 -0
  135. package/icons/PfIcons/pficon-satellite.svg +4 -0
  136. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  137. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  138. package/icons/PfIcons/pficon-template.svg +4 -0
  139. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  140. package/icons/PfIcons/plugged.svg +4 -0
  141. package/icons/PfIcons/port.svg +4 -0
  142. package/icons/PfIcons/print.svg +4 -0
  143. package/icons/PfIcons/private.svg +4 -0
  144. package/icons/PfIcons/process-automation.svg +4 -0
  145. package/icons/PfIcons/project.svg +4 -0
  146. package/icons/PfIcons/rebalance.svg +4 -0
  147. package/icons/PfIcons/rebooting.svg +4 -0
  148. package/icons/PfIcons/regions.svg +4 -0
  149. package/icons/PfIcons/registry.svg +4 -0
  150. package/icons/PfIcons/remove2.svg +4 -0
  151. package/icons/PfIcons/replicator.svg +4 -0
  152. package/icons/PfIcons/repository.svg +4 -0
  153. package/icons/PfIcons/resource-pool.svg +4 -0
  154. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  155. package/icons/PfIcons/resources-almost-full.svg +4 -0
  156. package/icons/PfIcons/resources-empty.svg +4 -0
  157. package/icons/PfIcons/resources-full.svg +4 -0
  158. package/icons/PfIcons/running.svg +4 -0
  159. package/icons/PfIcons/save.svg +4 -0
  160. package/icons/PfIcons/screen.svg +4 -0
  161. package/icons/PfIcons/security.svg +4 -0
  162. package/icons/PfIcons/server-group.svg +4 -0
  163. package/icons/PfIcons/server.svg +4 -0
  164. package/icons/PfIcons/service-catalog.svg +4 -0
  165. package/icons/PfIcons/service.svg +4 -0
  166. package/icons/PfIcons/services.svg +4 -0
  167. package/icons/PfIcons/severity-critical.svg +4 -0
  168. package/icons/PfIcons/severity-important.svg +4 -0
  169. package/icons/PfIcons/severity-minor.svg +4 -0
  170. package/icons/PfIcons/severity-moderate.svg +4 -0
  171. package/icons/PfIcons/severity-none.svg +4 -0
  172. package/icons/PfIcons/severity-undefined.svg +4 -0
  173. package/icons/PfIcons/spinner.svg +4 -0
  174. package/icons/PfIcons/spinner2.svg +4 -0
  175. package/icons/PfIcons/storage-domain.svg +4 -0
  176. package/icons/PfIcons/task.svg +4 -0
  177. package/icons/PfIcons/tenant.svg +4 -0
  178. package/icons/PfIcons/thumb-tack.svg +4 -0
  179. package/icons/PfIcons/topology.svg +4 -0
  180. package/icons/PfIcons/treeview.svg +4 -0
  181. package/icons/PfIcons/trend-down.svg +4 -0
  182. package/icons/PfIcons/trend-up.svg +4 -0
  183. package/icons/PfIcons/unknown.svg +4 -0
  184. package/icons/PfIcons/unlocked.svg +4 -0
  185. package/icons/PfIcons/unplugged.svg +4 -0
  186. package/icons/PfIcons/user.svg +4 -0
  187. package/icons/PfIcons/users.svg +4 -0
  188. package/icons/PfIcons/virtual-machine.svg +4 -0
  189. package/icons/PfIcons/volume.svg +4 -0
  190. package/icons/PfIcons/warning-triangle.svg +4 -0
  191. package/icons/PfIcons/zone.svg +4 -0
  192. package/package.json +29 -14
  193. package/patternfly-base-no-globals.css +88 -0
  194. package/patternfly-base.css +95 -0
  195. package/patternfly-no-globals.css +528 -84
  196. package/patternfly.css +535 -84
  197. package/patternfly.min.css +1 -1
  198. package/patternfly.min.css.map +1 -1
  199. package/sass-utilities/namespaces-components.scss +6 -0
@@ -56,11 +56,57 @@
56
56
  --pf-t--global--duration--200: 1ms !important;
57
57
  --pf-t--global--duration--100: 1ms !important;
58
58
  --pf-t--global--duration--50: 1ms !important;
59
+ --pf-v6-global--thinking-active--Animation--Duration: 0 !important;
59
60
  }
60
61
 
62
+ .pf-v6-m-ai-indicator {
63
+ position: relative;
64
+ }
65
+ .pf-v6-m-ai-indicator::before {
66
+ position: absolute;
67
+ inset: 0;
68
+ pointer-events: none;
69
+ content: "";
70
+ background: linear-gradient(to right, #f56e6e 0%, #876fd4 65%, #5e40be 100%) border-box;
71
+ border: var(--pf-t--global--border--width--extra-strong) solid transparent;
72
+ border-radius: inherit;
73
+ mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
74
+ mask-composite: exclude;
75
+ }
76
+
77
+ @property --pf-v6-global--thinking--BoxShadow--Spread {
78
+ syntax: "<length>";
79
+ initial-value: 0;
80
+ inherits: false;
81
+ }
82
+ .pf-v6-m-thinking {
83
+ box-shadow: 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-End), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-End), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-Start), 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-Start);
84
+ animation: pf-v6-global-thinking var(--pf-v6-global--thinking-active--Animation--Duration) infinite ease-in-out;
85
+ }
86
+ .pf-v6-m-thinking.pf-m-inset {
87
+ box-shadow: inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-End), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-End), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--End-Start), inset 0 0 var(--pf-v6-global--thinking--BoxShadow--Spread) var(--pf-v6-global--thinking--BoxShadow--Color--Start-Start);
88
+ }
89
+
90
+ @keyframes pf-v6-global-thinking {
91
+ 50% {
92
+ --pf-v6-global--thinking--BoxShadow--Spread: var(--pf-v6-global--thinking-active--BoxShadow--Spread);
93
+ }
94
+ }
61
95
  :root {
62
96
  --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
63
97
  --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
98
+ --pf-v6-global--thinking--BoxShadow--Spread: 0px;
99
+ --pf-v6-global--thinking--BoxShadow--Color--Start-Start: oklch(45.9% 0.187 3.815deg);
100
+ --pf-v6-global--thinking--BoxShadow--Color--Start-End: oklch(50% 0.134 242.749deg);
101
+ --pf-v6-global--thinking--BoxShadow--Color--End-Start: oklch(45.9% 0.187 3.815deg);
102
+ --pf-v6-global--thinking--BoxShadow--Color--End-End: oklch(43.2% 0.232 292.759deg);
103
+ --pf-v6-global--thinking-active--BoxShadow--Spread: 15px;
104
+ --pf-v6-global--thinking-active--Animation--Duration: 0;
105
+ }
106
+ @media screen and (prefers-reduced-motion: no-preference) {
107
+ :root {
108
+ --pf-v6-global--thinking-active--Animation--Duration: 2s;
109
+ }
64
110
  }
65
111
 
66
112
  @property --pf-v6-global--danger-jiggle--TranslateX {
@@ -7069,6 +7115,11 @@
7069
7115
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
7070
7116
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
7071
7117
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
7118
+ --pf-t--global--text-decoration--color--default: var(--pf-t--global--border--color--default);
7119
+ --pf-t--global--text-decoration--color--hover: currentcolor;
7120
+ --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
7121
+ --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
7122
+ --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
7072
7123
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
7073
7124
  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
7074
7125
  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
@@ -7174,6 +7225,43 @@
7174
7225
  var(--pf-t--global--box-shadow--color--lg--directional);
7175
7226
  --pf-t--global--list-style: disc outside;
7176
7227
  --pf-t--temp--dev--tbd: #BC11E0;
7228
+ --pf-t--global--background--color--glass--filter--base: none;
7229
+ --pf-t--global--background--color--glass--opacity--base: 1;
7230
+ --pf-t--global--background--color--glass--default--base: var(--pf-t--global--background--color--primary--default);
7231
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7232
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7233
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7234
+ --pf-t--global--dark--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7235
+ --pf-t--global--dark--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7236
+ --pf-t--global--dark--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7237
+ --pf-t--global--light--glass--background--color--glass--color: #ffffff;
7238
+ --pf-t--global--light--glass--background--color--glass--filter: blur(12.5px);
7239
+ --pf-t--global--light--glass--background--color--glass--opacity: 85%;
7240
+ --pf-t--global--light--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--light--glass--background--color--glass--color) var(--pf-t--global--light--glass--background--color--glass--opacity), transparent );
7241
+ --pf-t--global--dark--glass--background--color--glass--color: #1d1d1d;
7242
+ --pf-t--global--dark--glass--background--color--glass--filter: blur(12.5px);
7243
+ --pf-t--global--dark--glass--background--color--glass--opacity: 85%;
7244
+ --pf-t--global--dark--glass--background--color--glass--default: color-mix(in srgb, var(--pf-t--global--dark--glass--background--color--glass--color) var(--pf-t--global--dark--glass--background--color--glass--opacity), transparent );
7245
+ }
7246
+ :root:where(.pf-v6-theme-dark) {
7247
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--background--color--glass--filter);
7248
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--background--color--glass--opacity);
7249
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--background--color--glass--default);
7250
+ }
7251
+ :root:where(.pf-v6-theme-glass) {
7252
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--light--glass--background--color--glass--filter);
7253
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--light--glass--background--color--glass--opacity);
7254
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--light--glass--background--color--glass--default);
7255
+ }
7256
+ :root:where(.pf-v6-theme-glass.pf-v6-theme-dark) {
7257
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--dark--glass--background--color--glass--filter);
7258
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--dark--glass--background--color--glass--opacity);
7259
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--dark--glass--background--color--glass--default);
7260
+ }
7261
+ :root:where(.pf-v6-theme-high-contrast) {
7262
+ --pf-t--global--background--color--glass--filter: var(--pf-t--global--background--color--glass--filter--base);
7263
+ --pf-t--global--background--color--glass--opacity: var(--pf-t--global--background--color--glass--opacity--base);
7264
+ --pf-t--global--background--color--glass--default: var(--pf-t--global--background--color--glass--default--base);
7177
7265
  }
7178
7266
 
7179
7267
  :root:where(.pf-v6-theme-dark) {
@@ -9112,7 +9200,9 @@
9112
9200
  --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
9113
9201
  --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--default);
9114
9202
  --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
9203
+ --pf-v6-c-action-list--m-vertical--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
9115
9204
  --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
9205
+ --pf-v6-c-action-list--m-vertical--m-icons--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
9116
9206
  }
9117
9207
 
9118
9208
  .pf-v6-c-action-list,
@@ -9127,8 +9217,15 @@
9127
9217
  }
9128
9218
  .pf-v6-c-action-list.pf-m-icons {
9129
9219
  --pf-v6-c-action-list__group--ColumnGap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
9220
+ --pf-v6-c-action-list--m-vertical--RowGap: var(--pf-v6-c-action-list--m-vertical--m-icons--RowGap);
9130
9221
  column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
9131
9222
  }
9223
+ .pf-v6-c-action-list.pf-m-vertical, .pf-v6-c-action-list.pf-m-vertical .pf-v6-c-action-list__group {
9224
+ flex-direction: column;
9225
+ }
9226
+ .pf-v6-c-action-list.pf-m-vertical {
9227
+ row-gap: var(--pf-v6-c-action-list--m-vertical--RowGap);
9228
+ }
9132
9229
 
9133
9230
  .pf-v6-c-action-list__group {
9134
9231
  row-gap: var(--pf-v6-c-action-list__group--RowGap, var(--pf-v6-c-action-list--RowGap));
@@ -10343,10 +10440,17 @@ button.pf-v6-c-breadcrumb__link {
10343
10440
  --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
10344
10441
  --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
10345
10442
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
10443
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
10346
10444
  --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
10347
10445
  --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
10446
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
10447
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
10348
10448
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
10349
10449
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
10450
+ --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
10451
+ --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
10452
+ --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
10453
+ --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
10350
10454
  --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
10351
10455
  --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
10352
10456
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -10356,10 +10460,8 @@ button.pf-v6-c-breadcrumb__link {
10356
10460
  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
10357
10461
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
10358
10462
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
10359
- --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
10360
10463
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
10361
10464
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
10362
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
10363
10465
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
10364
10466
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
10365
10467
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -10545,6 +10647,14 @@ button.pf-v6-c-breadcrumb__link {
10545
10647
  --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
10546
10648
  --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
10547
10649
  --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
10650
+ --pf-v6-c-button--m-circle--ScaleX: 1.29;
10651
+ --pf-v6-c-button--m-circle--ScaleY: 1.29;
10652
+ --pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
10653
+ --pf-v6-c-button--m-circle--Padding--base: var(--pf-t--global--spacer--control--vertical--default);
10654
+ --pf-v6-c-button--m-circle--PaddingBlockStart: var(--pf-v6-c-button--m-circle--Padding--base);
10655
+ --pf-v6-c-button--m-circle--PaddingInlineEnd: 0;
10656
+ --pf-v6-c-button--m-circle--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--Padding--base);
10657
+ --pf-v6-c-button--m-circle--PaddingInlineStart: 0;
10548
10658
  }
10549
10659
 
10550
10660
  .pf-v6-c-button {
@@ -10676,12 +10786,13 @@ button.pf-v6-c-breadcrumb__link {
10676
10786
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
10677
10787
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
10678
10788
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
10789
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration);
10790
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction);
10791
+ --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty);
10679
10792
  --pf-v6-c-button--BackgroundColor: transparent;
10680
10793
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
10681
10794
  --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
10682
10795
  --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
10683
- --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
10684
- --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
10685
10796
  --pf-v6-c-button--hover--BackgroundColor: transparent;
10686
10797
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
10687
10798
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
@@ -10690,6 +10801,8 @@ button.pf-v6-c-breadcrumb__link {
10690
10801
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
10691
10802
  --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
10692
10803
  --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
10804
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
10805
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
10693
10806
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
10694
10807
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
10695
10808
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
@@ -10697,6 +10810,7 @@ button.pf-v6-c-breadcrumb__link {
10697
10810
  --pf-v6-c-button--hover--BorderWidth: 0;
10698
10811
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
10699
10812
  text-align: start;
10813
+ text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
10700
10814
  white-space: normal;
10701
10815
  background: transparent;
10702
10816
  outline-offset: 0.125rem;
@@ -10707,6 +10821,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
10707
10821
  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
10708
10822
  }
10709
10823
 
10824
+ .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
10825
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
10826
+ }
10710
10827
  .pf-v6-c-button.pf-m-link.pf-m-danger {
10711
10828
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
10712
10829
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -10912,6 +11029,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
10912
11029
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
10913
11030
  --pf-v6-c-button--hover__icon--ScaleX: 1;
10914
11031
  }
11032
+ .pf-v6-c-button.pf-m-circle {
11033
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
11034
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-circle--PaddingBlockStart);
11035
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-circle--PaddingInlineEnd);
11036
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--PaddingBlockEnd);
11037
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-circle--PaddingInlineStart);
11038
+ }
11039
+ .pf-v6-c-button.pf-m-circle .pf-v6-c-button__icon {
11040
+ scale: var(--pf-v6-c-button--m-circle--ScaleX) var(--pf-v6-c-button--m-circle--ScaleY);
11041
+ }
10915
11042
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
10916
11043
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
10917
11044
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -11449,6 +11576,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11449
11576
  .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
11450
11577
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
11451
11578
  }
11579
+ .pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
11580
+ --pf-v6-c-card__actions--PaddingInlineStart: 0;
11581
+ --pf-v6-c-card__actions--MarginBlockStart: 0;
11582
+ --pf-v6-c-card__actions--MarginBlockEnd: 0;
11583
+ }
11584
+
11452
11585
  .pf-v6-c-card.pf-m-compact {
11453
11586
  --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize);
11454
11587
  --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-compact__body--FontSize);
@@ -11554,6 +11687,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11554
11687
  overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
11555
11688
  }
11556
11689
 
11690
+ .pf-v6-c-card__subtitle {
11691
+ padding-block-start: var(--pf-t--global--spacer--sm);
11692
+ font-size: var(--pf-t--global--font--size--body--sm);
11693
+ color: var(--pf-t--global--text--color--subtle);
11694
+ }
11695
+
11557
11696
  .pf-v6-c-card__actions {
11558
11697
  display: flex;
11559
11698
  gap: var(--pf-v6-c-card__actions--Gap);
@@ -12123,6 +12262,167 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12123
12262
  margin-inline-start: var(--pf-v6-c-code-editor__tab-icon--text--MarginInlineStart);
12124
12263
  }
12125
12264
 
12265
+ .pf-v6-c-compass {
12266
+ --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--light);
12267
+ --pf-v6-c-compass--BackgroundImage--light: none;
12268
+ --pf-v6-c-compass--BackgroundImage--dark: none;
12269
+ --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
12270
+ --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--xl);
12271
+ --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--xl);
12272
+ --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
12273
+ --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
12274
+ --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
12275
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12276
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12277
+ --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
12278
+ --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
12279
+ --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
12280
+ --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
12281
+ --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
12282
+ --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
12283
+ --pf-v6-c-compass__message-bar--Width: 450px;
12284
+ --pf-v6-c-compass__message-bar--MinWidth: 300px;
12285
+ --pf-v6-c-compass__message-bar--MaxWidth: 600px;
12286
+ }
12287
+
12288
+ .pf-v6-c-compass {
12289
+ display: grid;
12290
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
12291
+ grid-template-rows: auto 1fr auto;
12292
+ grid-template-columns: auto 1fr auto;
12293
+ gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
12294
+ align-items: center;
12295
+ justify-content: center;
12296
+ height: 100dvh;
12297
+ padding: var(--pf-v6-c-compass--Padding);
12298
+ background-image: var(--pf-v6-c-compass--BackgroundImage);
12299
+ background-size: cover;
12300
+ }
12301
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
12302
+ --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
12303
+ }
12304
+ .pf-v6-c-compass__panel.pf-m-no-glass, .pf-v6-c-compass.pf-m-no-glass {
12305
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12306
+ }
12307
+
12308
+ .pf-v6-c-compass__header {
12309
+ display: grid;
12310
+ grid-area: header;
12311
+ grid-template-columns: 1fr auto 1fr;
12312
+ align-items: start;
12313
+ }
12314
+
12315
+ .pf-v6-c-compass__profile {
12316
+ justify-self: end;
12317
+ }
12318
+ .pf-v6-c-compass__profile .pf-v6-c-menu-toggle.pf-m-plain {
12319
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
12320
+ }
12321
+
12322
+ .pf-v6-c-compass__nav {
12323
+ display: flex;
12324
+ flex-direction: column;
12325
+ gap: var(--pf-v6-c-compass__nav--RowGap);
12326
+ align-items: center;
12327
+ justify-self: stretch;
12328
+ }
12329
+
12330
+ .pf-v6-c-compass__sidebar {
12331
+ --pf-v6-c-compass__panel--Padding: var(--pf-v6-c-compass__sidebar--Padding);
12332
+ }
12333
+ .pf-v6-c-compass__sidebar.pf-m-start {
12334
+ grid-area: sidebar-start;
12335
+ }
12336
+
12337
+ .pf-v6-c-compass__main {
12338
+ display: flex;
12339
+ flex-direction: column;
12340
+ grid-area: main;
12341
+ gap: var(--pf-v6-c-compass__main--RowGap);
12342
+ align-self: stretch;
12343
+ min-height: 0;
12344
+ }
12345
+
12346
+ .pf-v6-c-compass__content {
12347
+ display: flex;
12348
+ flex: 1 0 0;
12349
+ flex-direction: column;
12350
+ min-height: 0;
12351
+ overflow: auto;
12352
+ }
12353
+ .pf-v6-c-compass__content > *:last-child {
12354
+ flex-grow: 1;
12355
+ max-height: 100%;
12356
+ }
12357
+
12358
+ .pf-v6-c-compass__sidebar.pf-m-end {
12359
+ grid-area: sidebar-end;
12360
+ padding: var(--pf-t--global--spacer--sm);
12361
+ }
12362
+
12363
+ .pf-v6-c-compass__footer {
12364
+ display: flex;
12365
+ grid-area: footer;
12366
+ justify-content: center;
12367
+ }
12368
+
12369
+ .pf-v6-c-compass__message-bar {
12370
+ width: var(--pf-v6-c-compass__message-bar--Width);
12371
+ min-width: var(--pf-v6-c-compass__message-bar--MinWidth);
12372
+ max-width: var(--pf-v6-c-compass__message-bar--MaxWidth);
12373
+ }
12374
+
12375
+ .pf-v6-c-compass__panel {
12376
+ padding: var(--pf-v6-c-compass__panel--Padding);
12377
+ background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
12378
+ backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
12379
+ border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
12380
+ border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
12381
+ box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
12382
+ }
12383
+ .pf-v6-c-compass__panel.pf-m-no-border {
12384
+ border-width: 0;
12385
+ }
12386
+ .pf-v6-c-compass__panel.pf-m-no-padding {
12387
+ padding: 0;
12388
+ }
12389
+ .pf-v6-c-compass__panel.pf-m-full-height {
12390
+ height: 100%;
12391
+ }
12392
+ .pf-v6-c-compass__panel.pf-m-pill {
12393
+ border-radius: var(--pf-v6-c-compass__panel--m-pill--BorderRadius);
12394
+ }
12395
+ .pf-v6-c-compass__panel.pf-m-scrollable {
12396
+ overflow: auto;
12397
+ }
12398
+
12399
+ /* stylelint-disable */
12400
+ @media (max-width: 1200px) {
12401
+ .pf-v6-c-compass * {
12402
+ display: none;
12403
+ }
12404
+ .pf-v6-c-compass {
12405
+ position: relative;
12406
+ display: grid;
12407
+ grid-template-columns: auto;
12408
+ grid-template-rows: auto;
12409
+ place-content: center;
12410
+ gap: 0;
12411
+ }
12412
+ .pf-v6-c-compass::after {
12413
+ padding: 1em;
12414
+ border-radius: var(--pf-t--global--border--radius--large);
12415
+ background: var(--pf-t--global--background--color--primary--default);
12416
+ content: "This page is optimized for wide screens.\a\aPlease view on a larger display and/or make your browser window wider.";
12417
+ width: 80%;
12418
+ width: 300px;
12419
+ border: 1px solid var(--pf-t--global--border--color--default);
12420
+ box-shadow: var(--pf-t--global--box-shadow--md);
12421
+ white-space: pre-wrap;
12422
+ text-align: center;
12423
+ }
12424
+ }
12425
+ /* stylelint-enable */
12126
12426
  :root {
12127
12427
  --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
12128
12428
  --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -12817,7 +13117,8 @@ ul) {
12817
13117
  --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
12818
13118
  --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
12819
13119
  --pf-v6-c-data-list--MarginInlineStart: var(--pf-t--global--spacer--md);
12820
- --pf-v6-c-data-list__item--BackgroundColor: var( --pf-t--global--background--color--primary--default);
13120
+ --pf-v6-c-data-list__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13121
+ --pf-v6-c-data-list--pf-m-plain__item--BackgroundColor: transparent;
12821
13122
  --pf-v6-c-data-list__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
12822
13123
  --pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
12823
13124
  --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
@@ -12972,6 +13273,9 @@ ul) {
12972
13273
  .pf-v6-c-data-list.pf-m-drag-over {
12973
13274
  overflow-anchor: none;
12974
13275
  }
13276
+ .pf-v6-c-data-list.pf-m-plain {
13277
+ --pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor);
13278
+ }
12975
13279
 
12976
13280
  .pf-v6-c-data-list.pf-m-truncate,
12977
13281
  .pf-v6-c-data-list__item-row.pf-m-truncate,
@@ -14379,6 +14683,7 @@ ul) {
14379
14683
  }
14380
14684
 
14381
14685
  .pf-v6-c-drawer {
14686
+ --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
14382
14687
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14383
14688
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14384
14689
  --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -14409,6 +14714,7 @@ ul) {
14409
14714
  --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
14410
14715
  --pf-v6-c-drawer__panel--Opacity: 0;
14411
14716
  --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
14717
+ --pf-v6-c-drawer--m-expanded__panel--inset: 0px;
14412
14718
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
14413
14719
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
14414
14720
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -14424,6 +14730,16 @@ ul) {
14424
14730
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
14425
14731
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
14426
14732
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
14733
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
14734
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
14735
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
14736
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
14737
+ --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
14738
+ --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
14739
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
14740
+ --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
14741
+ --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
14742
+ --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
14427
14743
  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
14428
14744
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
14429
14745
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -14540,6 +14856,8 @@ ul) {
14540
14856
  .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
14541
14857
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
14542
14858
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
14859
+ --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
14860
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
14543
14861
  }
14544
14862
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
14545
14863
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -14563,7 +14881,7 @@ ul) {
14563
14881
  --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
14564
14882
  }
14565
14883
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
14566
- transform: translateX(-100%);
14884
+ transform: translateX(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
14567
14885
  --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
14568
14886
  visibility: visible;
14569
14887
  }
@@ -14575,7 +14893,7 @@ ul) {
14575
14893
  transform: translateX(0);
14576
14894
  }
14577
14895
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
14578
- transform: translate(0, -100%);
14896
+ transform: translate(0, calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
14579
14897
  }
14580
14898
  .pf-v6-c-drawer.pf-m-resizing {
14581
14899
  --pf-v6-c-drawer__panel--TransitionProperty: none;
@@ -14584,6 +14902,26 @@ ul) {
14584
14902
  .pf-v6-c-drawer.pf-m-resizing .pf-v6-c-drawer__splitter {
14585
14903
  pointer-events: auto;
14586
14904
  }
14905
+ @media screen and (min-width: 48rem) {
14906
+ .pf-v6-c-drawer.pf-m-pill {
14907
+ --pf-v6-c-drawer__main--Gap: var(--pf-v6-c-drawer--m-pill__main--Gap, revert);
14908
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer--m-pill__panel--BorderColor);
14909
+ --pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
14910
+ --pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
14911
+ --pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
14912
+ }
14913
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
14914
+ border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
14915
+ border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
14916
+ border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
14917
+ border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
14918
+ }
14919
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-glass) {
14920
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
14921
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
14922
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
14923
+ }
14924
+ }
14587
14925
 
14588
14926
  .pf-v6-c-drawer__section {
14589
14927
  flex-grow: 0;
@@ -14599,6 +14937,7 @@ ul) {
14599
14937
  .pf-v6-c-drawer__main {
14600
14938
  display: flex;
14601
14939
  flex: 1;
14940
+ gap: var(--pf-v6-c-drawer__main--Gap, 0);
14602
14941
  overflow: hidden;
14603
14942
  }
14604
14943
 
@@ -14637,6 +14976,8 @@ ul) {
14637
14976
  row-gap: var(--pf-v6-c-drawer__panel--RowGap);
14638
14977
  order: 1;
14639
14978
  max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
14979
+ margin-block: var(--pf-v6-c-drawer__panel--MarginBlock, revert);
14980
+ margin-inline: var(--pf-v6-c-drawer__panel--MarginInline, revert);
14640
14981
  overflow: auto;
14641
14982
  visibility: hidden;
14642
14983
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
@@ -14645,6 +14986,7 @@ ul) {
14645
14986
  border-block-end-width: var(--pf-v6-c-drawer__panel--BorderBlockEndWidth);
14646
14987
  border-inline-start-width: var(--pf-v6-c-drawer__panel--BorderInlineStartWidth);
14647
14988
  border-inline-end-width: var(--pf-v6-c-drawer__panel--BorderInlineEndWidth);
14989
+ border-radius: var(--pf-v6-c-drawer__panel--BorderRadius, revert);
14648
14990
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
14649
14991
  opacity: var(--pf-v6-c-drawer__panel--Opacity);
14650
14992
  transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
@@ -14832,7 +15174,7 @@ ul) {
14832
15174
  padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
14833
15175
  }
14834
15176
  .pf-v6-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
14835
- transform: translateX(0);
15177
+ transform: translateX(var(--pf-v6-c-drawer--m-expanded__panel--inset));
14836
15178
  }
14837
15179
  .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
14838
15180
  --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
@@ -14844,6 +15186,8 @@ ul) {
14844
15186
  --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
14845
15187
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: 0;
14846
15188
  --pf-v6-c-drawer__panel--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
15189
+ --pf-v6-c-drawer__panel--MarginBlock: initial;
15190
+ --pf-v6-c-drawer__panel--MarginInline: var(--pf-v6-c-drawer--m-expanded__panel--inset);
14847
15191
  min-width: auto;
14848
15192
  min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
14849
15193
  }
@@ -16506,81 +16850,6 @@ ul) {
16506
16850
  pointer-events: none;
16507
16851
  }
16508
16852
 
16509
- .pf-v6-c-hint {
16510
- --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
16511
- --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
16512
- --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
16513
- --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
16514
- --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
16515
- --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
16516
- --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
16517
- --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
16518
- --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
16519
- --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
16520
- --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
16521
- --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
16522
- --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
16523
- --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
16524
- --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
16525
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
16526
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
16527
- }
16528
-
16529
- .pf-v6-c-hint {
16530
- display: grid;
16531
- grid-template-columns: 1fr auto;
16532
- grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
16533
- padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
16534
- padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
16535
- padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
16536
- padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
16537
- color: var(--pf-v6-c-hint--Color);
16538
- background-color: var(--pf-v6-c-hint--BackgroundColor);
16539
- border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
16540
- border-radius: var(--pf-v6-c-hint--BorderRadius);
16541
- }
16542
- .pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
16543
- text-align: start;
16544
- white-space: normal;
16545
- }
16546
-
16547
- .pf-v6-c-hint__actions {
16548
- display: inline-grid;
16549
- grid-row: 1;
16550
- grid-column: 2;
16551
- grid-auto-flow: column;
16552
- align-self: start;
16553
- margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
16554
- margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
16555
- margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
16556
- text-align: end;
16557
- }
16558
- .pf-v6-c-hint__actions.pf-m-no-offset {
16559
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
16560
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
16561
- }
16562
- .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
16563
- grid-column: 1;
16564
- }
16565
-
16566
- .pf-v6-c-hint__title {
16567
- align-self: center;
16568
- font-weight: var(--pf-v6-c-hint__title--FontWeight);
16569
- }
16570
-
16571
- .pf-v6-c-hint__body {
16572
- grid-column: 1/-1;
16573
- font-size: var(--pf-v6-c-hint__body--FontSize);
16574
- }
16575
-
16576
- .pf-v6-c-hint__footer {
16577
- grid-column: 1/-1;
16578
- margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
16579
- }
16580
- .pf-v6-c-hint__footer > :not(:last-child) {
16581
- margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
16582
- }
16583
-
16584
16853
  .pf-v6-c-helper-text {
16585
16854
  --pf-v6-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
16586
16855
  --pf-v6-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -16666,6 +16935,156 @@ ul) {
16666
16935
  color: var(--pf-v6-c-helper-text__item-text--Color);
16667
16936
  }
16668
16937
 
16938
+ .pf-v6-c-hero {
16939
+ --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--xl);
16940
+ --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
16941
+ --pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
16942
+ --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
16943
+ --pf-v6-c-hero--gradient--angle: 109deg;
16944
+ --pf-v6-c-hero--gradient--stop-1--light: transparent;
16945
+ --pf-v6-c-hero--gradient--stop-2--light: transparent;
16946
+ --pf-v6-c-hero--gradient--stop-3--light: transparent;
16947
+ --pf-v6-c-hero--gradient--stop-1--dark: transparent;
16948
+ --pf-v6-c-hero--gradient--stop-2--dark: transparent;
16949
+ --pf-v6-c-hero--gradient--stop-3--dark: transparent;
16950
+ --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--default);
16951
+ --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
16952
+ --pf-v6-c-hero--BackgroundImage--light: none;
16953
+ --pf-v6-c-hero--BackgroundImage--dark: none;
16954
+ --pf-v6-c-hero--BackgroundRepeat: no-repeat;
16955
+ --pf-v6-c-hero--BackgroundPosition: right center;
16956
+ --pf-v6-c-hero--BackgroundSize: contain;
16957
+ --pf-v6-c-hero--BorderStyle: solid;
16958
+ --pf-v6-c-hero--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
16959
+ --pf-v6-c-hero--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
16960
+ --pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
16961
+ --pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
16962
+ --pf-v6-c-hero--BorderColor: var(--pf-t--global--border--color--default);
16963
+ --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
16964
+ --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
16965
+ --pf-v6-c-hero--BorderStartStartRadius: 24px;
16966
+ --pf-v6-c-hero--BorderStartEndRadius: 72px;
16967
+ --pf-v6-c-hero--BorderEndEndRadius: 24px;
16968
+ --pf-v6-c-hero--BorderEndStartRadius: 72px;
16969
+ --pf-v6-c-hero__body--Width: 800px;
16970
+ --pf-v6-c-hero__body--MaxWidth: 80%;
16971
+ }
16972
+
16973
+ .pf-v6-c-hero {
16974
+ display: flex;
16975
+ padding-block-start: var(--pf-v6-c-hero--PaddingBlockStart);
16976
+ padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
16977
+ padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
16978
+ padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
16979
+ background-image: var(--pf-v6-c-hero--BackgroundImage, var(--pf-v6-c-hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-hero--gradient--angle), var(--pf-v6-c-hero--gradient--stop-1, var(--pf-v6-c-hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-hero--gradient--stop-2, var(--pf-v6-c-hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-hero--gradient--stop-3, var(--pf-v6-c-hero--gradient--stop-3--light)) 100%);
16980
+ background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
16981
+ background-position: var(--pf-v6-c-hero--BackgroundPosition);
16982
+ background-size: var(--pf-v6-c-hero--BackgroundSize);
16983
+ border-color: var(--pf-v6-c-hero--BorderColor);
16984
+ border-style: var(--pf-v6-c-hero--BorderStyle);
16985
+ border-block-start-width: var(--pf-v6-c-hero--BorderBlockStartWidth);
16986
+ border-block-end-width: var(--pf-v6-c-hero--BorderBlockEndWidth);
16987
+ border-inline-start-width: var(--pf-v6-c-hero--BorderInlineStartWidth);
16988
+ border-inline-end-width: var(--pf-v6-c-hero--BorderInlineEndWidth);
16989
+ border-start-start-radius: var(--pf-v6-c-hero--BorderStartStartRadius);
16990
+ border-start-end-radius: var(--pf-v6-c-hero--BorderStartEndRadius);
16991
+ border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
16992
+ border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
16993
+ }
16994
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
16995
+ --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
16996
+ --pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
16997
+ --pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
16998
+ --pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
16999
+ }
17000
+ :root:where(.pf-v6-theme-glass) .pf-v6-c-hero {
17001
+ --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
17002
+ box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
17003
+ }
17004
+ .pf-v6-c-hero:not(.pf-m-no-glass) {
17005
+ background-color: var(--pf-v6-c-hero--BackgroundColor);
17006
+ backdrop-filter: var(--pf-v6-c-hero--BackdropFilter);
17007
+ }
17008
+
17009
+ .pf-v6-c-hero__body {
17010
+ width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));
17011
+ }
17012
+
17013
+ .pf-v6-c-hint {
17014
+ --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
17015
+ --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
17016
+ --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
17017
+ --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
17018
+ --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
17019
+ --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
17020
+ --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
17021
+ --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
17022
+ --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
17023
+ --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
17024
+ --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
17025
+ --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
17026
+ --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
17027
+ --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
17028
+ --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
17029
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
17030
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
17031
+ }
17032
+
17033
+ .pf-v6-c-hint {
17034
+ display: grid;
17035
+ grid-template-columns: 1fr auto;
17036
+ grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
17037
+ padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
17038
+ padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
17039
+ padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
17040
+ padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
17041
+ color: var(--pf-v6-c-hint--Color);
17042
+ background-color: var(--pf-v6-c-hint--BackgroundColor);
17043
+ border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
17044
+ border-radius: var(--pf-v6-c-hint--BorderRadius);
17045
+ }
17046
+ .pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
17047
+ text-align: start;
17048
+ white-space: normal;
17049
+ }
17050
+
17051
+ .pf-v6-c-hint__actions {
17052
+ display: inline-grid;
17053
+ grid-row: 1;
17054
+ grid-column: 2;
17055
+ grid-auto-flow: column;
17056
+ align-self: start;
17057
+ margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
17058
+ margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
17059
+ margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
17060
+ text-align: end;
17061
+ }
17062
+ .pf-v6-c-hint__actions.pf-m-no-offset {
17063
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
17064
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
17065
+ }
17066
+ .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
17067
+ grid-column: 1;
17068
+ }
17069
+
17070
+ .pf-v6-c-hint__title {
17071
+ align-self: center;
17072
+ font-weight: var(--pf-v6-c-hint__title--FontWeight);
17073
+ }
17074
+
17075
+ .pf-v6-c-hint__body {
17076
+ grid-column: 1/-1;
17077
+ font-size: var(--pf-v6-c-hint__body--FontSize);
17078
+ }
17079
+
17080
+ .pf-v6-c-hint__footer {
17081
+ grid-column: 1/-1;
17082
+ margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
17083
+ }
17084
+ .pf-v6-c-hint__footer > :not(:last-child) {
17085
+ margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
17086
+ }
17087
+
16669
17088
  .pf-v6-c-icon {
16670
17089
  --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
16671
17090
  --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);
@@ -19679,6 +20098,7 @@ ul.pf-v6-c-list {
19679
20098
  --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
19680
20099
  --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
19681
20100
  --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
20101
+ --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
19682
20102
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
19683
20103
  --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
19684
20104
  --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
@@ -19807,6 +20227,9 @@ ul.pf-v6-c-list {
19807
20227
  --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
19808
20228
  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
19809
20229
  }
20230
+ .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
20231
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
20232
+ }
19810
20233
  .pf-v6-c-menu-toggle.pf-m-plain::before {
19811
20234
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
19812
20235
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
@@ -24418,6 +24841,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24418
24841
  .pf-v6-c-spinner.pf-m-xl {
24419
24842
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
24420
24843
  }
24844
+ .pf-v6-m-no-motion .pf-v6-c-spinner {
24845
+ --pf-v6-c-spinner--AnimationDuration: 0s;
24846
+ }
24421
24847
 
24422
24848
  .pf-v6-c-spinner__path {
24423
24849
  width: 100%;
@@ -26483,6 +26909,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
26483
26909
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
26484
26910
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
26485
26911
  }
26912
+ .pf-v6-c-table.pf-m-plain {
26913
+ --pf-v6-c-table--BackgroundColor: transparent;
26914
+ }
26486
26915
  .pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
26487
26916
  .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
26488
26917
  .pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -28320,6 +28749,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28320
28749
  --pf-v6-c-tabs__add--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
28321
28750
  --pf-v6-c-tabs__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
28322
28751
  --pf-v6-c-tabs__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
28752
+ --pf-v6-c-tabs--m-nav__link--BorderRadius: var(--pf-t--global--border--radius--pill);
28753
+ --pf-v6-c-tabs--m-nav__link--disabled--Color: var(--pf-t--global--text--color--disabled);
28754
+ --pf-v6-c-tabs--m-nav--m-subtab__scroll-button--button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
28323
28755
  --pf-v6-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
28324
28756
  --pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
28325
28757
  --pf-v6-c-tabs__link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -28597,6 +29029,18 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28597
29029
  .pf-v6-c-tabs.pf-m-overflow .pf-v6-c-tabs__list {
28598
29030
  overflow: visible;
28599
29031
  }
29032
+ .pf-v6-c-tabs.pf-m-nav {
29033
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
29034
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-nav__link--disabled--Color);
29035
+ --pf-v6-c-tabs__link--BorderRadius: var(--pf-v6-c-tabs--m-nav__link--BorderRadius);
29036
+ }
29037
+ .pf-v6-c-tabs.pf-m-nav::before,
29038
+ .pf-v6-c-tabs.pf-m-nav .pf-v6-c-tabs__link::before {
29039
+ border: 0;
29040
+ }
29041
+ .pf-v6-c-tabs.pf-m-nav.pf-m-subtab .pf-v6-c-tabs__scroll-button .pf-v6-c-button {
29042
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-tabs--m-nav--m-subtab__scroll-button--button--FontSize);
29043
+ }
28600
29044
 
28601
29045
  .pf-v6-c-tabs__toggle {
28602
29046
  display: var(--pf-v6-c-tabs__toggle--Display);
@@ -28646,7 +29090,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28646
29090
  }
28647
29091
  .pf-v6-c-tabs__item.pf-m-current {
28648
29092
  --pf-v6-c-tabs__link--Color: var(--pf-v6-c-tabs__item--m-current__link--Color);
28649
- --pf-v6-c-tabs__link--after--BorderColor: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
29093
+ --pf-v6-c-tabs__link--after--BorderColor: var(--pf-v6-c-tabs--link-accent--color);
28650
29094
  --pf-v6-c-tabs__link--after--BorderWidth: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
28651
29095
  --pf-v6-c-tabs__item--BackgroundColor: var(--pf-v6-c-tabs__item--m-current--BackgroundColor);
28652
29096
  }