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

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 (196) 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 +195 -0
  21. package/components/Compass/compass.scss +262 -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/MenuToggle/menu-toggle.css +4 -0
  27. package/components/MenuToggle/menu-toggle.scss +5 -0
  28. package/components/Spinner/spinner.css +3 -0
  29. package/components/Spinner/spinner.scss +5 -0
  30. package/components/Table/table.css +3 -0
  31. package/components/Table/table.scss +5 -0
  32. package/components/Tabs/tabs.css +16 -1
  33. package/components/Tabs/tabs.scss +21 -1
  34. package/components/_index.css +324 -9
  35. package/components/_index.scss +1 -0
  36. package/docs/components/ActionList/examples/ActionList.md +85 -0
  37. package/docs/components/Button/examples/Button.md +116 -0
  38. package/docs/components/Card/examples/Card.md +154 -0
  39. package/docs/components/Compass/examples/Compass.css +11 -0
  40. package/docs/components/Compass/examples/Compass.md +66 -0
  41. package/docs/components/DataList/examples/DataList.md +181 -185
  42. package/docs/components/Drawer/examples/Drawer.md +80 -14
  43. package/docs/components/MenuToggle/examples/MenuToggle.md +40 -0
  44. package/docs/components/Table/examples/Table.md +88 -0
  45. package/docs/components/Tabs/examples/Tabs.md +197 -18
  46. package/docs/components/Wizard/examples/Wizard.md +15 -15
  47. package/docs/demos/Compass/examples/Compass.md +5824 -0
  48. package/docs/demos/Dashboard/examples/Dashboard.md +1 -4
  49. package/docs/demos/DescriptionList/examples/DescriptionList.md +31 -33
  50. package/docs/demos/Drawer/examples/Drawer.md +31 -33
  51. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +127 -163
  52. package/docs/demos/Wizard/examples/Wizard.md +31 -34
  53. package/icons/PfIcons/add-circle-o.svg +4 -0
  54. package/icons/PfIcons/ansible-tower.svg +4 -0
  55. package/icons/PfIcons/applications.svg +4 -0
  56. package/icons/PfIcons/arrow.svg +4 -0
  57. package/icons/PfIcons/asleep.svg +4 -0
  58. package/icons/PfIcons/attention-bell.svg +4 -0
  59. package/icons/PfIcons/automation.svg +4 -0
  60. package/icons/PfIcons/bell.svg +4 -0
  61. package/icons/PfIcons/blueprint.svg +4 -0
  62. package/icons/PfIcons/build.svg +4 -0
  63. package/icons/PfIcons/builder-image.svg +4 -0
  64. package/icons/PfIcons/bundle.svg +4 -0
  65. package/icons/PfIcons/catalog.svg +4 -0
  66. package/icons/PfIcons/chat.svg +4 -0
  67. package/icons/PfIcons/close.svg +4 -0
  68. package/icons/PfIcons/cloud-security.svg +4 -0
  69. package/icons/PfIcons/cloud-tenant.svg +4 -0
  70. package/icons/PfIcons/cluster.svg +4 -0
  71. package/icons/PfIcons/connected.svg +4 -0
  72. package/icons/PfIcons/container-node.svg +4 -0
  73. package/icons/PfIcons/cpu.svg +4 -0
  74. package/icons/PfIcons/critical-risk.svg +4 -0
  75. package/icons/PfIcons/data-processor.svg +4 -0
  76. package/icons/PfIcons/data-sink.svg +4 -0
  77. package/icons/PfIcons/data-source.svg +4 -0
  78. package/icons/PfIcons/degraded.svg +4 -0
  79. package/icons/PfIcons/disconnected.svg +4 -0
  80. package/icons/PfIcons/domain.svg +4 -0
  81. package/icons/PfIcons/edit.svg +4 -0
  82. package/icons/PfIcons/enhancement.svg +4 -0
  83. package/icons/PfIcons/enterprise.svg +4 -0
  84. package/icons/PfIcons/equalizer.svg +4 -0
  85. package/icons/PfIcons/error-circle-o.svg +4 -0
  86. package/icons/PfIcons/export.svg +4 -0
  87. package/icons/PfIcons/filter.svg +4 -0
  88. package/icons/PfIcons/flavor.svg +4 -0
  89. package/icons/PfIcons/folder-close.svg +4 -0
  90. package/icons/PfIcons/folder-open.svg +4 -0
  91. package/icons/PfIcons/globe-route.svg +4 -0
  92. package/icons/PfIcons/help.svg +4 -0
  93. package/icons/PfIcons/history.svg +4 -0
  94. package/icons/PfIcons/home.svg +4 -0
  95. package/icons/PfIcons/import.svg +4 -0
  96. package/icons/PfIcons/in-progress.svg +4 -0
  97. package/icons/PfIcons/info.svg +4 -0
  98. package/icons/PfIcons/infrastructure.svg +4 -0
  99. package/icons/PfIcons/integration.svg +4 -0
  100. package/icons/PfIcons/key.svg +4 -0
  101. package/icons/PfIcons/locked.svg +4 -0
  102. package/icons/PfIcons/maintenance.svg +4 -0
  103. package/icons/PfIcons/memory.svg +4 -0
  104. package/icons/PfIcons/messages.svg +4 -0
  105. package/icons/PfIcons/middleware.svg +4 -0
  106. package/icons/PfIcons/migration.svg +4 -0
  107. package/icons/PfIcons/module.svg +4 -0
  108. package/icons/PfIcons/monitoring.svg +4 -0
  109. package/icons/PfIcons/multicluster.svg +4 -0
  110. package/icons/PfIcons/namespaces.svg +4 -0
  111. package/icons/PfIcons/network.svg +4 -0
  112. package/icons/PfIcons/new-process.svg +4 -0
  113. package/icons/PfIcons/not-started.svg +4 -0
  114. package/icons/PfIcons/off.svg +4 -0
  115. package/icons/PfIcons/ok.svg +4 -0
  116. package/icons/PfIcons/on-running.svg +4 -0
  117. package/icons/PfIcons/on.svg +4 -0
  118. package/icons/PfIcons/open-drawer-right.svg +4 -0
  119. package/icons/PfIcons/openshift.svg +4 -0
  120. package/icons/PfIcons/openstack.svg +4 -0
  121. package/icons/PfIcons/optimize.svg +4 -0
  122. package/icons/PfIcons/orders.svg +4 -0
  123. package/icons/PfIcons/os-image.svg +4 -0
  124. package/icons/PfIcons/package.svg +4 -0
  125. package/icons/PfIcons/panel-close.svg +4 -0
  126. package/icons/PfIcons/panel-open.svg +4 -0
  127. package/icons/PfIcons/paused.svg +4 -0
  128. package/icons/PfIcons/pending.svg +4 -0
  129. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  130. package/icons/PfIcons/pficon-history.svg +4 -0
  131. package/icons/PfIcons/pficon-network-range.svg +4 -0
  132. package/icons/PfIcons/pficon-satellite.svg +4 -0
  133. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  134. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  135. package/icons/PfIcons/pficon-template.svg +4 -0
  136. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  137. package/icons/PfIcons/plugged.svg +4 -0
  138. package/icons/PfIcons/port.svg +4 -0
  139. package/icons/PfIcons/print.svg +4 -0
  140. package/icons/PfIcons/private.svg +4 -0
  141. package/icons/PfIcons/process-automation.svg +4 -0
  142. package/icons/PfIcons/project.svg +4 -0
  143. package/icons/PfIcons/rebalance.svg +4 -0
  144. package/icons/PfIcons/rebooting.svg +4 -0
  145. package/icons/PfIcons/regions.svg +4 -0
  146. package/icons/PfIcons/registry.svg +4 -0
  147. package/icons/PfIcons/remove2.svg +4 -0
  148. package/icons/PfIcons/replicator.svg +4 -0
  149. package/icons/PfIcons/repository.svg +4 -0
  150. package/icons/PfIcons/resource-pool.svg +4 -0
  151. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  152. package/icons/PfIcons/resources-almost-full.svg +4 -0
  153. package/icons/PfIcons/resources-empty.svg +4 -0
  154. package/icons/PfIcons/resources-full.svg +4 -0
  155. package/icons/PfIcons/running.svg +4 -0
  156. package/icons/PfIcons/save.svg +4 -0
  157. package/icons/PfIcons/screen.svg +4 -0
  158. package/icons/PfIcons/security.svg +4 -0
  159. package/icons/PfIcons/server-group.svg +4 -0
  160. package/icons/PfIcons/server.svg +4 -0
  161. package/icons/PfIcons/service-catalog.svg +4 -0
  162. package/icons/PfIcons/service.svg +4 -0
  163. package/icons/PfIcons/services.svg +4 -0
  164. package/icons/PfIcons/severity-critical.svg +4 -0
  165. package/icons/PfIcons/severity-important.svg +4 -0
  166. package/icons/PfIcons/severity-minor.svg +4 -0
  167. package/icons/PfIcons/severity-moderate.svg +4 -0
  168. package/icons/PfIcons/severity-none.svg +4 -0
  169. package/icons/PfIcons/severity-undefined.svg +4 -0
  170. package/icons/PfIcons/spinner.svg +4 -0
  171. package/icons/PfIcons/spinner2.svg +4 -0
  172. package/icons/PfIcons/storage-domain.svg +4 -0
  173. package/icons/PfIcons/task.svg +4 -0
  174. package/icons/PfIcons/tenant.svg +4 -0
  175. package/icons/PfIcons/thumb-tack.svg +4 -0
  176. package/icons/PfIcons/topology.svg +4 -0
  177. package/icons/PfIcons/treeview.svg +4 -0
  178. package/icons/PfIcons/trend-down.svg +4 -0
  179. package/icons/PfIcons/trend-up.svg +4 -0
  180. package/icons/PfIcons/unknown.svg +4 -0
  181. package/icons/PfIcons/unlocked.svg +4 -0
  182. package/icons/PfIcons/unplugged.svg +4 -0
  183. package/icons/PfIcons/user.svg +4 -0
  184. package/icons/PfIcons/users.svg +4 -0
  185. package/icons/PfIcons/virtual-machine.svg +4 -0
  186. package/icons/PfIcons/volume.svg +4 -0
  187. package/icons/PfIcons/warning-triangle.svg +4 -0
  188. package/icons/PfIcons/zone.svg +4 -0
  189. package/package.json +29 -14
  190. package/patternfly-base-no-globals.css +88 -0
  191. package/patternfly-base.css +95 -0
  192. package/patternfly-no-globals.css +412 -9
  193. package/patternfly.css +419 -9
  194. package/patternfly.min.css +1 -1
  195. package/patternfly.min.css.map +1 -1
  196. package/sass-utilities/namespaces-components.scss +3 -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,201 @@ 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
+ --pf-v6-c-compass__hero--gradient--angle: 109deg;
12287
+ --pf-v6-c-compass__hero--gradient--stop-1--light: transparent;
12288
+ --pf-v6-c-compass__hero--gradient--stop-2--light: transparent;
12289
+ --pf-v6-c-compass__hero--gradient--stop-3--light: transparent;
12290
+ --pf-v6-c-compass__hero--gradient--stop-1--dark: transparent;
12291
+ --pf-v6-c-compass__hero--gradient--stop-2--dark: transparent;
12292
+ --pf-v6-c-compass__hero--gradient--stop-3--dark: transparent;
12293
+ --pf-v6-c-compass__hero--BackgroundImage--light: none;
12294
+ --pf-v6-c-compass__hero--BackgroundImage--dark: none;
12295
+ --pf-v6-c-compass__hero-body--Width: 800px;
12296
+ --pf-v6-c-compass__hero-body--MaxWidth: 80%;
12297
+ }
12298
+
12299
+ .pf-v6-c-compass {
12300
+ display: grid;
12301
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
12302
+ grid-template-rows: auto 1fr auto;
12303
+ grid-template-columns: auto 1fr auto;
12304
+ gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
12305
+ align-items: center;
12306
+ justify-content: center;
12307
+ height: 100dvh;
12308
+ padding: var(--pf-v6-c-compass--Padding);
12309
+ background-image: var(--pf-v6-c-compass--BackgroundImage);
12310
+ background-size: cover;
12311
+ }
12312
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
12313
+ --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
12314
+ }
12315
+ .pf-v6-c-compass__panel.pf-m-no-glass, .pf-v6-c-compass.pf-m-no-glass {
12316
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12317
+ }
12318
+
12319
+ .pf-v6-c-compass__header {
12320
+ display: grid;
12321
+ grid-area: header;
12322
+ grid-template-columns: 1fr auto 1fr;
12323
+ align-items: start;
12324
+ }
12325
+
12326
+ .pf-v6-c-compass__profile {
12327
+ justify-self: end;
12328
+ }
12329
+ .pf-v6-c-compass__profile .pf-v6-c-menu-toggle.pf-m-plain {
12330
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
12331
+ }
12332
+
12333
+ .pf-v6-c-compass__nav {
12334
+ display: flex;
12335
+ flex-direction: column;
12336
+ gap: var(--pf-v6-c-compass__nav--RowGap);
12337
+ align-items: center;
12338
+ justify-self: stretch;
12339
+ }
12340
+
12341
+ .pf-v6-c-compass__sidebar {
12342
+ --pf-v6-c-compass__panel--Padding: var(--pf-v6-c-compass__sidebar--Padding);
12343
+ }
12344
+ .pf-v6-c-compass__sidebar.pf-m-start {
12345
+ grid-area: sidebar-start;
12346
+ }
12347
+
12348
+ .pf-v6-c-compass__main {
12349
+ display: flex;
12350
+ flex-direction: column;
12351
+ grid-area: main;
12352
+ gap: var(--pf-v6-c-compass__main--RowGap);
12353
+ align-self: stretch;
12354
+ min-height: 0;
12355
+ }
12356
+
12357
+ .pf-v6-c-compass__content {
12358
+ display: flex;
12359
+ flex: 1 0 0;
12360
+ flex-direction: column;
12361
+ min-height: 0;
12362
+ overflow: auto;
12363
+ }
12364
+ .pf-v6-c-compass__content > *:last-child {
12365
+ flex-grow: 1;
12366
+ max-height: 100%;
12367
+ }
12368
+
12369
+ .pf-v6-c-compass__sidebar.pf-m-end {
12370
+ grid-area: sidebar-end;
12371
+ padding: var(--pf-t--global--spacer--sm);
12372
+ }
12373
+
12374
+ .pf-v6-c-compass__footer {
12375
+ display: flex;
12376
+ grid-area: footer;
12377
+ justify-content: center;
12378
+ }
12379
+
12380
+ .pf-v6-c-compass__message-bar {
12381
+ width: var(--pf-v6-c-compass__message-bar--Width);
12382
+ min-width: var(--pf-v6-c-compass__message-bar--MinWidth);
12383
+ max-width: var(--pf-v6-c-compass__message-bar--MaxWidth);
12384
+ }
12385
+
12386
+ .pf-v6-c-compass__panel {
12387
+ padding: var(--pf-v6-c-compass__panel--Padding);
12388
+ background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
12389
+ backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
12390
+ border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
12391
+ border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
12392
+ box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
12393
+ }
12394
+ .pf-v6-c-compass__panel.pf-m-no-border {
12395
+ border-width: 0;
12396
+ }
12397
+ .pf-v6-c-compass__panel.pf-m-no-padding {
12398
+ padding: 0;
12399
+ }
12400
+ .pf-v6-c-compass__panel.pf-m-full-height {
12401
+ height: 100%;
12402
+ }
12403
+ .pf-v6-c-compass__panel.pf-m-pill {
12404
+ border-radius: var(--pf-v6-c-compass__panel--m-pill--BorderRadius);
12405
+ }
12406
+ .pf-v6-c-compass__panel.pf-m-scrollable {
12407
+ overflow: auto;
12408
+ }
12409
+
12410
+ .pf-v6-c-compass__hero {
12411
+ display: flex;
12412
+ padding-block-start: 32px;
12413
+ padding-block-end: 32px;
12414
+ padding-inline-start: 72px;
12415
+ padding-inline-end: 0;
12416
+ background-image: var(--pf-v6-c-compass__hero--BackgroundImage, var(--pf-v6-c-compass__hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-compass__hero--gradient--angle), var(--pf-v6-c-compass__hero--gradient--stop-1, var(--pf-v6-c-compass__hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-compass__hero--gradient--stop-2, var(--pf-v6-c-compass__hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-compass__hero--gradient--stop-3, var(--pf-v6-c-compass__hero--gradient--stop-3--light)) 100%);
12417
+ background-repeat: no-repeat;
12418
+ background-position: right center;
12419
+ background-size: contain;
12420
+ border-radius: 24px 72px;
12421
+ }
12422
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__hero {
12423
+ --pf-v6-c-compass__hero--BackgroundImage: var(--pf-v6-c-compass__hero--BackgroundImage--dark);
12424
+ --pf-v6-c-compass__hero--gradient--stop-1: var(--pf-v6-c-compass__hero--gradient--stop-1--dark);
12425
+ --pf-v6-c-compass__hero--gradient--stop-2: var(--pf-v6-c-compass__hero--gradient--stop-2--dark);
12426
+ --pf-v6-c-compass__hero--gradient--stop-3: var(--pf-v6-c-compass__hero--gradient--stop-3--dark);
12427
+ }
12428
+
12429
+ .pf-v6-c-compass__hero-body {
12430
+ width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
12431
+ }
12432
+
12433
+ /* stylelint-disable */
12434
+ @media (max-width: 1200px) {
12435
+ .pf-v6-c-compass * {
12436
+ display: none;
12437
+ }
12438
+ .pf-v6-c-compass {
12439
+ position: relative;
12440
+ display: grid;
12441
+ grid-template-columns: auto;
12442
+ grid-template-rows: auto;
12443
+ place-content: center;
12444
+ gap: 0;
12445
+ }
12446
+ .pf-v6-c-compass::after {
12447
+ padding: 1em;
12448
+ border-radius: var(--pf-t--global--border--radius--large);
12449
+ background: var(--pf-t--global--background--color--primary--default);
12450
+ content: "This page is optimized for wide screens.\a\aPlease view on a larger display and/or make your browser window wider.";
12451
+ width: 80%;
12452
+ width: 300px;
12453
+ border: 1px solid var(--pf-t--global--border--color--default);
12454
+ box-shadow: var(--pf-t--global--box-shadow--md);
12455
+ white-space: pre-wrap;
12456
+ text-align: center;
12457
+ }
12458
+ }
12459
+ /* stylelint-enable */
12126
12460
  :root {
12127
12461
  --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
12128
12462
  --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -12817,7 +13151,8 @@ ul) {
12817
13151
  --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
12818
13152
  --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
12819
13153
  --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);
13154
+ --pf-v6-c-data-list__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13155
+ --pf-v6-c-data-list--pf-m-plain__item--BackgroundColor: transparent;
12821
13156
  --pf-v6-c-data-list__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
12822
13157
  --pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
12823
13158
  --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
@@ -12972,6 +13307,9 @@ ul) {
12972
13307
  .pf-v6-c-data-list.pf-m-drag-over {
12973
13308
  overflow-anchor: none;
12974
13309
  }
13310
+ .pf-v6-c-data-list.pf-m-plain {
13311
+ --pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor);
13312
+ }
12975
13313
 
12976
13314
  .pf-v6-c-data-list.pf-m-truncate,
12977
13315
  .pf-v6-c-data-list__item-row.pf-m-truncate,
@@ -14379,6 +14717,7 @@ ul) {
14379
14717
  }
14380
14718
 
14381
14719
  .pf-v6-c-drawer {
14720
+ --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
14382
14721
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14383
14722
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14384
14723
  --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -14409,6 +14748,7 @@ ul) {
14409
14748
  --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
14410
14749
  --pf-v6-c-drawer__panel--Opacity: 0;
14411
14750
  --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
14751
+ --pf-v6-c-drawer--m-expanded__panel--inset: 0px;
14412
14752
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
14413
14753
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
14414
14754
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -14424,6 +14764,16 @@ ul) {
14424
14764
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
14425
14765
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
14426
14766
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
14767
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
14768
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
14769
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
14770
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
14771
+ --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
14772
+ --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
14773
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
14774
+ --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
14775
+ --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
14776
+ --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
14427
14777
  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
14428
14778
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
14429
14779
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -14540,6 +14890,8 @@ ul) {
14540
14890
  .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
14541
14891
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
14542
14892
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
14893
+ --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
14894
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
14543
14895
  }
14544
14896
  .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
14897
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -14563,7 +14915,7 @@ ul) {
14563
14915
  --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
14564
14916
  }
14565
14917
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
14566
- transform: translateX(-100%);
14918
+ transform: translateX(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
14567
14919
  --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
14568
14920
  visibility: visible;
14569
14921
  }
@@ -14575,7 +14927,7 @@ ul) {
14575
14927
  transform: translateX(0);
14576
14928
  }
14577
14929
  .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%);
14930
+ transform: translate(0, calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
14579
14931
  }
14580
14932
  .pf-v6-c-drawer.pf-m-resizing {
14581
14933
  --pf-v6-c-drawer__panel--TransitionProperty: none;
@@ -14584,6 +14936,26 @@ ul) {
14584
14936
  .pf-v6-c-drawer.pf-m-resizing .pf-v6-c-drawer__splitter {
14585
14937
  pointer-events: auto;
14586
14938
  }
14939
+ @media screen and (min-width: 48rem) {
14940
+ .pf-v6-c-drawer.pf-m-pill {
14941
+ --pf-v6-c-drawer__main--Gap: var(--pf-v6-c-drawer--m-pill__main--Gap, revert);
14942
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer--m-pill__panel--BorderColor);
14943
+ --pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
14944
+ --pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
14945
+ --pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
14946
+ }
14947
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
14948
+ border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
14949
+ border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
14950
+ border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
14951
+ border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
14952
+ }
14953
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-glass) {
14954
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
14955
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
14956
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
14957
+ }
14958
+ }
14587
14959
 
14588
14960
  .pf-v6-c-drawer__section {
14589
14961
  flex-grow: 0;
@@ -14599,6 +14971,7 @@ ul) {
14599
14971
  .pf-v6-c-drawer__main {
14600
14972
  display: flex;
14601
14973
  flex: 1;
14974
+ gap: var(--pf-v6-c-drawer__main--Gap, 0);
14602
14975
  overflow: hidden;
14603
14976
  }
14604
14977
 
@@ -14637,6 +15010,8 @@ ul) {
14637
15010
  row-gap: var(--pf-v6-c-drawer__panel--RowGap);
14638
15011
  order: 1;
14639
15012
  max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
15013
+ margin-block: var(--pf-v6-c-drawer__panel--MarginBlock, revert);
15014
+ margin-inline: var(--pf-v6-c-drawer__panel--MarginInline, revert);
14640
15015
  overflow: auto;
14641
15016
  visibility: hidden;
14642
15017
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
@@ -14645,6 +15020,7 @@ ul) {
14645
15020
  border-block-end-width: var(--pf-v6-c-drawer__panel--BorderBlockEndWidth);
14646
15021
  border-inline-start-width: var(--pf-v6-c-drawer__panel--BorderInlineStartWidth);
14647
15022
  border-inline-end-width: var(--pf-v6-c-drawer__panel--BorderInlineEndWidth);
15023
+ border-radius: var(--pf-v6-c-drawer__panel--BorderRadius, revert);
14648
15024
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
14649
15025
  opacity: var(--pf-v6-c-drawer__panel--Opacity);
14650
15026
  transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
@@ -14832,7 +15208,7 @@ ul) {
14832
15208
  padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
14833
15209
  }
14834
15210
  .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);
15211
+ transform: translateX(var(--pf-v6-c-drawer--m-expanded__panel--inset));
14836
15212
  }
14837
15213
  .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
15214
  --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
@@ -14844,6 +15220,8 @@ ul) {
14844
15220
  --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
14845
15221
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: 0;
14846
15222
  --pf-v6-c-drawer__panel--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
15223
+ --pf-v6-c-drawer__panel--MarginBlock: initial;
15224
+ --pf-v6-c-drawer__panel--MarginInline: var(--pf-v6-c-drawer--m-expanded__panel--inset);
14847
15225
  min-width: auto;
14848
15226
  min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
14849
15227
  }
@@ -19679,6 +20057,7 @@ ul.pf-v6-c-list {
19679
20057
  --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
19680
20058
  --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
19681
20059
  --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
20060
+ --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
19682
20061
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
19683
20062
  --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
19684
20063
  --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
@@ -19807,6 +20186,9 @@ ul.pf-v6-c-list {
19807
20186
  --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
19808
20187
  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
19809
20188
  }
20189
+ .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
20190
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
20191
+ }
19810
20192
  .pf-v6-c-menu-toggle.pf-m-plain::before {
19811
20193
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
19812
20194
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
@@ -24418,6 +24800,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24418
24800
  .pf-v6-c-spinner.pf-m-xl {
24419
24801
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
24420
24802
  }
24803
+ .pf-v6-m-no-motion .pf-v6-c-spinner {
24804
+ --pf-v6-c-spinner--AnimationDuration: 0s;
24805
+ }
24421
24806
 
24422
24807
  .pf-v6-c-spinner__path {
24423
24808
  width: 100%;
@@ -26483,6 +26868,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
26483
26868
  .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
26869
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
26485
26870
  }
26871
+ .pf-v6-c-table.pf-m-plain {
26872
+ --pf-v6-c-table--BackgroundColor: transparent;
26873
+ }
26486
26874
  .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
26875
  .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
26488
26876
  .pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -28320,6 +28708,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28320
28708
  --pf-v6-c-tabs__add--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
28321
28709
  --pf-v6-c-tabs__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
28322
28710
  --pf-v6-c-tabs__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
28711
+ --pf-v6-c-tabs--m-nav__link--BorderRadius: var(--pf-t--global--border--radius--pill);
28712
+ --pf-v6-c-tabs--m-nav__link--disabled--Color: var(--pf-t--global--text--color--disabled);
28713
+ --pf-v6-c-tabs--m-nav--m-subtab__scroll-button--button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
28323
28714
  --pf-v6-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
28324
28715
  --pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
28325
28716
  --pf-v6-c-tabs__link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -28597,6 +28988,18 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28597
28988
  .pf-v6-c-tabs.pf-m-overflow .pf-v6-c-tabs__list {
28598
28989
  overflow: visible;
28599
28990
  }
28991
+ .pf-v6-c-tabs.pf-m-nav {
28992
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
28993
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-nav__link--disabled--Color);
28994
+ --pf-v6-c-tabs__link--BorderRadius: var(--pf-v6-c-tabs--m-nav__link--BorderRadius);
28995
+ }
28996
+ .pf-v6-c-tabs.pf-m-nav::before,
28997
+ .pf-v6-c-tabs.pf-m-nav .pf-v6-c-tabs__link::before {
28998
+ border: 0;
28999
+ }
29000
+ .pf-v6-c-tabs.pf-m-nav.pf-m-subtab .pf-v6-c-tabs__scroll-button .pf-v6-c-button {
29001
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-tabs--m-nav--m-subtab__scroll-button--button--FontSize);
29002
+ }
28600
29003
 
28601
29004
  .pf-v6-c-tabs__toggle {
28602
29005
  display: var(--pf-v6-c-tabs__toggle--Display);
@@ -28646,7 +29049,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
28646
29049
  }
28647
29050
  .pf-v6-c-tabs__item.pf-m-current {
28648
29051
  --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);
29052
+ --pf-v6-c-tabs__link--after--BorderColor: var(--pf-v6-c-tabs--link-accent--color);
28650
29053
  --pf-v6-c-tabs__link--after--BorderWidth: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
28651
29054
  --pf-v6-c-tabs__item--BackgroundColor: var(--pf-v6-c-tabs__item--m-current--BackgroundColor);
28652
29055
  }