@patternfly/patternfly 6.0.0-alpha.122 → 6.0.0-alpha.124

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 (34) hide show
  1. package/base/patternfly-variables.css +39 -26
  2. package/base/patternfly-variables.scss +11 -5
  3. package/base/tokens/_index.scss +1 -0
  4. package/base/tokens/tokens-charts-dark.scss +169 -0
  5. package/base/tokens/tokens-charts.scss +75 -65
  6. package/base/tokens/tokens-dark.scss +19 -7
  7. package/base/tokens/tokens-default.scss +25 -13
  8. package/base/tokens/tokens-font.scss +1 -1
  9. package/base/tokens/tokens-palette.scss +4 -5
  10. package/components/DataList/data-list.css +2 -2
  11. package/components/DataList/data-list.scss +2 -2
  12. package/components/Page/page.css +2 -230
  13. package/components/Page/page.scss +3 -158
  14. package/components/Wizard/wizard.css +80 -41
  15. package/components/Wizard/wizard.scss +98 -48
  16. package/components/_index.css +84 -273
  17. package/docs/components/Nav/examples/Navigation.css +0 -5
  18. package/docs/components/Wizard/examples/Wizard.md +827 -91
  19. package/docs/demos/Wizard/examples/Wizard.md +356 -198
  20. package/docs/utilities/Alignment/examples/Alignment.css +2 -2
  21. package/docs/utilities/Display/examples/Display.css +2 -2
  22. package/docs/utilities/Flex/examples/Flex.css +2 -2
  23. package/docs/utilities/Float/examples/Float.css +3 -3
  24. package/docs/utilities/Sizing/examples/Sizing.css +2 -2
  25. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  26. package/package.json +1 -1
  27. package/patternfly-base-no-globals.css +39 -26
  28. package/patternfly-base.css +39 -26
  29. package/patternfly-no-globals.css +123 -299
  30. package/patternfly.css +123 -299
  31. package/patternfly.min.css +1 -1
  32. package/patternfly.min.css.map +1 -1
  33. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  34. package/docs/components/Page/deprecated/PageHeader.md +0 -275
@@ -4260,7 +4260,7 @@ ol) {
4260
4260
  --pf-v6-c-data-list--FontSize: var( --pf-t--global--font--size--body);
4261
4261
  --pf-v6-c-data-list--LineHeight: var(--pf-t--global--font--line-height--body);
4262
4262
  --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-t--global--border--color--default);
4263
- --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-t--global--spacer--sm);
4263
+ --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
4264
4264
  --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
4265
4265
  --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
4266
4266
  --pf-v6-c-data-list--MarginInlineStart: var(--pf-t--global--spacer--md);
@@ -4269,7 +4269,7 @@ ol) {
4269
4269
  --pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
4270
4270
  --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
4271
4271
  --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-t--global--border--color--default);
4272
- --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--spacer--sm);
4272
+ --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--border--width--strong);
4273
4273
  --pf-v6-c-data-list__item--sm--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
4274
4274
  --pf-v6-c-data-list__item--sm--BorderBlockEndColor: var(--pf-t--global--border--color--default);
4275
4275
  --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -15895,32 +15895,7 @@ ul.pf-v6-c-list {
15895
15895
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15896
15896
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--md);
15897
15897
  --pf-v6-c-page--xl--inset: var(--pf-t--global--spacer--xl);
15898
- --pf-v6-c-page__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15899
- --pf-v6-c-page__header--ZIndex: var(--pf-t--global--z-index--md);
15900
- --pf-v6-c-page__header--MinHeight: 4.75rem;
15901
- --pf-v6-c-page__header-brand--PaddingInlineStart: var(--pf-t--global--spacer--md);
15902
- --pf-v6-c-page__header-brand--xl--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
15903
- --pf-v6-c-page__header-brand--xl--PaddingInlineStart: var(--pf-t--global--spacer--xl);
15904
- --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
15905
- --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
15906
- --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
15907
- --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
15908
- --pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
15909
- --pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineStart: calc(var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineStart) * -1);
15910
- --pf-v6-c-page__header-sidebar-toggle__c-button--FontSize: var(--pf-t--global--icon--size--lg);
15911
- --pf-v6-c-page__header-brand-link--c-brand--MaxHeight: 3.75rem;
15912
- --pf-v6-c-page__header-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15913
- --pf-v6-c-page__header-nav--xl--BackgroundColor: transparent;
15914
- --pf-v6-c-page__header-nav--xl--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
15915
- --pf-v6-c-page__header-nav--xl--PaddingInlineStart: var(--pf-t--global--spacer--xl);
15916
- --pf-v6-c-page__header-tools--MarginInlineEnd: var(--pf-t--global--spacer--md);
15917
- --pf-v6-c-page__header-tools--xl--MarginInlineEnd: var(--pf-t--global--spacer--lg);
15918
- --pf-v6-c-page__header-tools--c-avatar--MarginInlineStart: var(--pf-t--global--spacer--md);
15919
- --pf-v6-c-page__header-tools-group--MarginInlineStart: var(--pf-t--global--spacer--xl);
15920
- --pf-v6-c-page__header-tools-group--Display: flex;
15921
- --pf-v6-c-page__header-tools-item--Display: block;
15922
- --pf-v6-c-page__header-tools--c-button--m-selected--before--Width: auto;
15923
- --pf-v6-c-page__header-tools--c-button--m-selected--before--Height: auto;
15898
+ --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
15924
15899
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
15925
15900
  --pf-v6-c-page__sidebar--Width: 18.125rem;
15926
15901
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -16004,22 +15979,9 @@ ul.pf-v6-c-list {
16004
15979
  }
16005
15980
  @media (min-width: 1200px) {
16006
15981
  :where(:root, .pf-v6-c-page) {
16007
- --pf-v6-c-page__header-brand--PaddingInlineStart: var(--pf-v6-c-page__header-brand--xl--PaddingInlineStart);
16008
15982
  --pf-v6-c-page--inset: var(--pf-v6-c-page--xl--inset);
16009
15983
  }
16010
15984
  }
16011
- @media screen and (min-width: 1200px) {
16012
- :where(:root, .pf-v6-c-page) {
16013
- --pf-v6-c-page__header-nav--BackgroundColor: var(--pf-v6-c-page__header-nav--xl--BackgroundColor);
16014
- --pf-v6-c-page__header-nav--PaddingInlineEnd: var(--pf-v6-c-page__header-nav--xl--PaddingInlineEnd);
16015
- --pf-v6-c-page__header-nav--PaddingInlineStart: var(--pf-v6-c-page__header-nav--xl--PaddingInlineStart);
16016
- }
16017
- }
16018
- @media screen and (min-width: 1200px) {
16019
- :where(:root, .pf-v6-c-page) {
16020
- --pf-v6-c-page__header-tools--MarginInlineEnd: var(--pf-v6-c-page__header-tools--xl--MarginInlineEnd);
16021
- }
16022
- }
16023
15985
  @media screen and (min-width: 1200px) {
16024
15986
  :where(:root, .pf-v6-c-page) {
16025
15987
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
@@ -16043,201 +16005,11 @@ ul.pf-v6-c-list {
16043
16005
  }
16044
16006
  }
16045
16007
 
16046
- .pf-v6-c-page__header,
16047
16008
  .pf-v6-c-page > .pf-v6-c-masthead {
16048
- z-index: var(--pf-v6-c-page__header--ZIndex);
16009
+ z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
16049
16010
  grid-area: header;
16050
16011
  }
16051
16012
 
16052
- .pf-v6-c-page__header {
16053
- display: grid;
16054
- grid-template-columns: auto auto;
16055
- align-items: center;
16056
- min-width: 0;
16057
- min-height: var(--pf-v6-c-page__header--MinHeight);
16058
- background-color: var(--pf-v6-c-page__header--BackgroundColor);
16059
- }
16060
- .pf-v6-c-page__header > * {
16061
- display: flex;
16062
- align-items: center;
16063
- }
16064
- @media screen and (min-width: 992px) {
16065
- .pf-v6-c-page__header {
16066
- grid-template-columns: auto 1fr auto;
16067
- }
16068
- }
16069
- .pf-v6-c-page__header .pf-v6-c-masthead {
16070
- grid-column: span 2;
16071
- align-self: stretch;
16072
- }
16073
-
16074
- .pf-v6-c-page__header-brand {
16075
- grid-column: 1/2;
16076
- padding-inline-start: var(--pf-v6-c-page__header-brand--PaddingInlineStart);
16077
- }
16078
- @media (min-width: 1200px) {
16079
- .pf-v6-c-page__header-brand {
16080
- padding-inline-end: var(--pf-v6-c-page__header-brand--xl--PaddingInlineEnd);
16081
- }
16082
- }
16083
-
16084
- .pf-v6-c-page__header-brand-link {
16085
- display: flex;
16086
- flex: 1;
16087
- align-items: center;
16088
- }
16089
- .pf-v6-c-page__header-brand-link .pf-v6-c-brand {
16090
- max-height: var(--pf-v6-c-page__header-brand-link--c-brand--MaxHeight);
16091
- }
16092
-
16093
- .pf-v6-c-page__header-brand-toggle .pf-v6-c-button {
16094
- padding-block-start: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockStart);
16095
- padding-block-end: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockEnd);
16096
- padding-inline-start: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineStart);
16097
- padding-inline-end: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineEnd);
16098
- margin-inline-start: var(--pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineStart);
16099
- margin-inline-end: var(--pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineEnd);
16100
- font-size: var(--pf-v6-c-page__header-sidebar-toggle__c-button--FontSize);
16101
- line-height: 1;
16102
- }
16103
-
16104
- .pf-v6-c-page__header-nav {
16105
- grid-row: 2/3;
16106
- grid-column: 1/-1;
16107
- align-self: stretch;
16108
- min-width: 0;
16109
- padding-inline-start: var(--pf-v6-c-page__header-nav--PaddingInlineStart);
16110
- padding-inline-end: var(--pf-v6-c-page__header-nav--PaddingInlineEnd);
16111
- background-color: var(--pf-v6-c-page__header-nav--BackgroundColor);
16112
- }
16113
- @media screen and (min-width: 1200px) {
16114
- .pf-v6-c-page__header-nav {
16115
- grid-row: 1/2;
16116
- grid-column: 2/3;
16117
- }
16118
- }
16119
- .pf-v6-c-page__header-nav .pf-v6-c-nav {
16120
- align-self: stretch;
16121
- }
16122
-
16123
- .pf-v6-c-page__header-tools {
16124
- grid-column: 2/3;
16125
- margin-inline-start: auto;
16126
- margin-inline-end: var(--pf-v6-c-page__header-tools--MarginInlineEnd);
16127
- }
16128
- .pf-v6-c-page__header-tools .pf-v6-c-avatar {
16129
- margin-inline-start: var(--pf-v6-c-page__header-tools--c-avatar--MarginInlineStart);
16130
- }
16131
- @media screen and (min-width: 992px) {
16132
- .pf-v6-c-page__header-tools {
16133
- grid-column: 3/4;
16134
- }
16135
- }
16136
-
16137
- .pf-v6-c-page__header-tools-group {
16138
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-group--Display);
16139
- --pf-v6-hidden-visible--hidden--Display: none;
16140
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16141
- display: var(--pf-v6-hidden-visible--Display);
16142
- align-items: center;
16143
- }
16144
- .pf-v6-c-page__header-tools-group.pf-m-hidden {
16145
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16146
- }
16147
- @media screen and (min-width: 576px) {
16148
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-sm {
16149
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16150
- }
16151
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-sm {
16152
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16153
- }
16154
- }
16155
- @media screen and (min-width: 768px) {
16156
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-md {
16157
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16158
- }
16159
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-md {
16160
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16161
- }
16162
- }
16163
- @media screen and (min-width: 992px) {
16164
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-lg {
16165
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16166
- }
16167
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-lg {
16168
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16169
- }
16170
- }
16171
- @media screen and (min-width: 1200px) {
16172
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-xl {
16173
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16174
- }
16175
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-xl {
16176
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16177
- }
16178
- }
16179
- @media screen and (min-width: 1450px) {
16180
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-2xl {
16181
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16182
- }
16183
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-2xl {
16184
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16185
- }
16186
- }
16187
- .pf-v6-c-page__header-tools-group + .pf-v6-c-page__header-tools-group {
16188
- margin-inline-start: var(--pf-v6-c-page__header-tools-group--MarginInlineStart);
16189
- }
16190
-
16191
- .pf-v6-c-page__header-tools-item {
16192
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-item--Display);
16193
- --pf-v6-hidden-visible--hidden--Display: none;
16194
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16195
- display: var(--pf-v6-hidden-visible--Display);
16196
- }
16197
- .pf-v6-c-page__header-tools-item.pf-m-hidden {
16198
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16199
- }
16200
- @media screen and (min-width: 576px) {
16201
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-sm {
16202
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16203
- }
16204
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-sm {
16205
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16206
- }
16207
- }
16208
- @media screen and (min-width: 768px) {
16209
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-md {
16210
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16211
- }
16212
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-md {
16213
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16214
- }
16215
- }
16216
- @media screen and (min-width: 992px) {
16217
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-lg {
16218
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16219
- }
16220
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-lg {
16221
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16222
- }
16223
- }
16224
- @media screen and (min-width: 1200px) {
16225
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-xl {
16226
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16227
- }
16228
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-xl {
16229
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16230
- }
16231
- }
16232
- @media screen and (min-width: 1450px) {
16233
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-2xl {
16234
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
16235
- }
16236
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-2xl {
16237
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
16238
- }
16239
- }
16240
-
16241
16013
  .pf-v6-c-page__sidebar {
16242
16014
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
16243
16015
  display: flex;
@@ -25418,54 +25190,61 @@ label.pf-v6-c-tree-view__node-text {
25418
25190
  --pf-v6-c-wizard__title-text--Color: var(--pf-t--global--text--color--regular);
25419
25191
  --pf-v6-c-wizard__description--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25420
25192
  --pf-v6-c-wizard__description--Color: var(--pf-t--global--text--color--subtle);
25421
- --pf-v6-c-wizard__nav-link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25422
- --pf-v6-c-wizard__nav-link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
25423
- --pf-v6-c-wizard__nav-link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
25424
- --pf-v6-c-wizard__nav-link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
25193
+ --pf-v6-c-wizard__nav-link--Gap: var(--pf-t--global--spacer--xs);
25425
25194
  --pf-v6-c-wizard__nav-link--Color: var(--pf-t--global--text--color--subtle);
25426
25195
  --pf-v6-c-wizard__nav-link--TextDecoration: none;
25427
- --pf-v6-c-wizard__nav-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
25428
- --pf-v6-c-wizard__nav-link--BorderRadius: var(--pf-t--global--border--radius--small);
25429
25196
  --pf-v6-c-wizard__nav-link--hover--Color: var(--pf-t--global--text--color--subtle);
25430
25197
  --pf-v6-c-wizard__nav-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
25431
25198
  --pf-v6-c-wizard__nav-link--m-current--Color: var(--pf-t--global--text--color--regular);
25432
25199
  --pf-v6-c-wizard__nav-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
25433
25200
  --pf-v6-c-wizard__nav-link--m-disabled--Color: var(--pf-t--global--text--color--disabled);
25434
25201
  --pf-v6-c-wizard__nav-link--m-disabled--BackgroundColor: transparent;
25202
+ --pf-v6-c-wizard__nav-link-main--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25203
+ --pf-v6-c-wizard__nav-link-main--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
25204
+ --pf-v6-c-wizard__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
25205
+ --pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
25206
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
25207
+ --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
25435
25208
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
25436
25209
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
25437
25210
  --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
25438
25211
  --pf-v6-c-wizard__nav-link-toggle-icon--Transition: var(--pf-t--global--transition);
25439
25212
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
25440
25213
  --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
25441
- --pf-v6-c-wizard__nav-link--before--Width: 1.5rem;
25442
- --pf-v6-c-wizard__nav-link--before--Height: 1.5rem;
25443
- --pf-v6-c-wizard__nav-link--before--InsetBlockStart: calc(calc(var(--pf-v6-c-wizard__nav-link--PaddingBlockStart) + var(--pf-v6-c-wizard__nav-link--PaddingBlockEnd) + 1em * var(--pf-t--global--font--line-height--body)) / 2);
25214
+ --pf-v6-c-wizard__nav-link--before--Width: var(--pf-t--global--icon--size--font--xl);
25215
+ --pf-v6-c-wizard__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
25216
+ --pf-v6-c-wizard__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);
25444
25217
  --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
25445
25218
  --pf-v6-c-wizard__nav-link--before--BorderRadius: var(--pf-t--global--border--radius--large);
25446
25219
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-t--global--text--color--regular);
25447
25220
  --pf-v6-c-wizard__nav-link--before--FontSize: var(--pf-t--global--font--size--body--default);
25448
- --pf-v6-c-wizard__nav-link--before--TranslateX: calc(-100% - var(--pf-t--global--spacer--xs));
25449
- --pf-v6-c-wizard__nav-link--before--TranslateY: -50%;
25450
25221
  --pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor: var(--pf-t--global--color--brand--default);
25451
25222
  --pf-v6-c-wizard__nav-link--m-current--before--Color: var(--pf-t--global--text--color--on-brand--default);
25452
25223
  --pf-v6-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
25453
25224
  --pf-v6-c-wizard__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
25225
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
25226
+ --pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
25227
+ --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
25228
+ --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
25454
25229
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
25455
25230
  --pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--z-index--xs);
25456
25231
  --pf-v6-c-wizard__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
25457
25232
  --pf-v6-c-wizard__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
25458
25233
  --pf-v6-c-wizard__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
25459
- --pf-v6-c-wizard__toggle--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) + var(--pf-v6-c-wizard__nav-link--before--Width) + var(--pf-t--global--spacer--sm));
25234
+ --pf-v6-c-wizard__toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
25460
25235
  --pf-v6-c-wizard__toggle--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
25461
25236
  --pf-v6-c-wizard__toggle--BorderBlockEndColor: var(--pf-t--global--border--color--default);
25462
- --pf-v6-c-wizard--m-in-page__toggle--xl--PaddingInlineStart: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-wizard__nav-link--before--Width) + var(--pf-t--global--spacer--sm));
25463
- --pf-v6-c-wizard__toggle-num--before--InsetBlockStart: -0.125rem;
25237
+ --pf-v6-c-wizard__toggle-num--InsetBlockStart: 0;
25464
25238
  --pf-v6-c-wizard__toggle-list-item--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--sm);
25465
25239
  --pf-v6-c-wizard__toggle-list-item--MarginBlockEnd: var(--pf-t--global--spacer--xs);
25240
+ --pf-v6-c-wizard__toggle-list-item--Gap: var(--pf-t--global--spacer--sm);
25241
+ --pf-v6-c-wizard__nav-link-status-icon--LineHeight: 1;
25242
+ --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
25243
+ --pf-v6-c-wizard__toggle--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
25244
+ --pf-v6-c-wizard__toggle-status-icon--InsetBlockStart: 2px;
25245
+ --pf-v6-c-wizard__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
25466
25246
  --pf-v6-c-wizard__toggle-list--MarginInlineEnd: var(--pf-t--global--spacer--sm);
25467
25247
  --pf-v6-c-wizard__toggle-list--MarginBlockEnd: calc(var(--pf-v6-c-wizard__toggle-list-item--MarginBlockEnd) * -1);
25468
- --pf-v6-c-wizard__toggle-separator--MarginInlineStart: var(--pf-t--global--spacer--sm);
25469
25248
  --pf-v6-c-wizard__toggle-separator--Color: var(--pf-t--global--border--color--default);
25470
25249
  --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
25471
25250
  --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
@@ -25479,8 +25258,8 @@ label.pf-v6-c-tree-view__node-text {
25479
25258
  --pf-v6-c-wizard__nav-list--PaddingBlockStart: var(--pf-t--global--spacer--lg);
25480
25259
  --pf-v6-c-wizard__nav-list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
25481
25260
  --pf-v6-c-wizard__nav-list--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
25482
- --pf-v6-c-wizard__nav-list--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) + var(--pf-v6-c-wizard__nav-link--before--Width) + var(--pf-t--global--spacer--sm));
25483
- --pf-v6-c-wizard__nav-list--nested--MarginInlineStart: var(--pf-t--global--spacer--md);
25261
+ --pf-v6-c-wizard__nav-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
25262
+ --pf-v6-c-wizard__nav-list--nested--MarginInlineStart: var(--pf-t--global--spacer--lg);
25484
25263
  --pf-v6-c-wizard__nav-list--nested--MarginBlockStart: var(--pf-t--global--spacer--md);
25485
25264
  --pf-v6-c-wizard__nav-item--MarginBlockStart: var(--pf-t--global--spacer--md);
25486
25265
  --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
@@ -25497,8 +25276,8 @@ label.pf-v6-c-tree-view__node-text {
25497
25276
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
25498
25277
  --pf-v6-c-wizard__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
25499
25278
  --pf-v6-c-wizard__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
25500
- --pf-v6-c-wizard__footer--BorderWidth: var(--pf-t--global--border--width--divider--default);
25501
- --pf-v6-c-wizard__footer--BorderColor: var(--pf-t--global--border--color--default);
25279
+ --pf-v6-c-wizard__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
25280
+ --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
25502
25281
  --pf-v6-c-wizard__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
25503
25282
  --pf-v6-c-wizard__footer--child--MarginBlockEnd: var(--pf-t--global--spacer--sm);
25504
25283
  --pf-v6-c-wizard__footer-cancel--MarginInlineStart: calc(var(--pf-t--global--spacer--2xl) - var(--pf-v6-c-wizard__footer--child--MarginInlineEnd));
@@ -25610,6 +25389,9 @@ label.pf-v6-c-tree-view__node-text {
25610
25389
  }
25611
25390
 
25612
25391
  .pf-v6-c-wizard__toggle-list-item {
25392
+ display: flex;
25393
+ gap: var(--pf-v6-c-wizard__toggle-list-item--Gap);
25394
+ align-items: baseline;
25613
25395
  margin-block-end: var(--pf-v6-c-wizard__toggle-list-item--MarginBlockEnd);
25614
25396
  text-align: start;
25615
25397
  word-break: break-word;
@@ -25617,14 +25399,25 @@ label.pf-v6-c-tree-view__node-text {
25617
25399
  .pf-v6-c-wizard__toggle-list-item:not(:last-child) {
25618
25400
  margin-inline-end: var(--pf-v6-c-wizard__toggle-list-item--not-last-child--MarginInlineEnd);
25619
25401
  }
25402
+ .pf-v6-c-wizard__toggle-list-item.pf-m-danger {
25403
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
25404
+ --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
25405
+ }
25620
25406
 
25621
25407
  .pf-v6-c-wizard__toggle-num {
25622
- --pf-v6-c-wizard__nav-link--before--TranslateY: 0;
25623
- --pf-v6-c-wizard__nav-link--before--InsetBlockStart: var(--pf-v6-c-wizard__toggle-num--before--InsetBlockStart);
25408
+ position: relative;
25409
+ inset-block-start: var(--pf-v6-c-wizard__toggle-num--InsetBlockStart);
25410
+ }
25411
+
25412
+ .pf-v6-c-wizard__toggle-status-icon {
25413
+ position: relative;
25414
+ inset-block-start: var(--pf-v6-c-wizard__toggle-status-icon--InsetBlockStart);
25415
+ font-size: var(--pf-v6-c-wizard__toggle-status-icon--FontSize);
25416
+ line-height: var(--pf-v6-c-wizard__nav-link-status-icon--LineHeight);
25417
+ color: var(--pf-v6-c-wizard__toggle-status-icon--Color);
25624
25418
  }
25625
25419
 
25626
25420
  .pf-v6-c-wizard__toggle-separator {
25627
- margin-inline-start: var(--pf-v6-c-wizard__toggle-separator--MarginInlineStart);
25628
25421
  color: var(--pf-v6-c-wizard__toggle-separator--Color);
25629
25422
  }
25630
25423
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__toggle-separator {
@@ -25723,30 +25516,26 @@ label.pf-v6-c-tree-view__node-text {
25723
25516
  }
25724
25517
  .pf-v6-c-wizard__nav-item :where(:hover) {
25725
25518
  --pf-v6-c-wizard__nav-link--Color: var({$wizard}__nav-link--hover--Color);
25726
- --pf-v6-c-wizard__nav-link--BackgroundColor: var({$wizard}__nav-link--hover--BackgroundColor);
25519
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var({$wizard}__nav-link--hover--BackgroundColor);
25727
25520
  }
25728
25521
 
25729
25522
  .pf-v6-c-wizard__nav-link {
25730
25523
  position: relative;
25731
- display: inline-block;
25524
+ display: flex;
25525
+ gap: var(--pf-v6-c-wizard__nav-link--Gap);
25732
25526
  width: 100%;
25733
- padding-block-start: var(--pf-v6-c-wizard__nav-link--PaddingBlockStart);
25734
- padding-block-end: var(--pf-v6-c-wizard__nav-link--PaddingBlockEnd);
25735
- padding-inline-start: var(--pf-v6-c-wizard__nav-link--PaddingInlineStart);
25736
- padding-inline-end: var(--pf-v6-c-wizard__nav-link--PaddingInlineEnd);
25527
+ padding-inline: 0;
25737
25528
  color: var(--pf-v6-c-wizard__nav-link--Color);
25738
25529
  text-align: start;
25739
25530
  text-decoration: var(--pf-v6-c-wizard__nav-link--TextDecoration);
25740
25531
  word-break: break-word;
25741
- background-color: var(--pf-v6-c-wizard__nav-link--BackgroundColor);
25532
+ counter-increment: wizard-nav-count;
25533
+ background-color: transparent;
25742
25534
  border: none;
25743
25535
  border-radius: var(--pf-v6-c-wizard__nav-link--BorderRadius);
25744
25536
  }
25745
25537
  .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link::before {
25746
- transform: translateX(var(--pf-v6-c-wizard__nav-link--before--TranslateX)) translateY(var(--pf-v6-c-wizard__nav-link--before--TranslateY));
25747
- position: absolute;
25748
- inset-block-start: var(--pf-v6-c-wizard__nav-link--before--InsetBlockStart);
25749
- inset-inline-start: 0;
25538
+ position: relative;
25750
25539
  display: inline-flex;
25751
25540
  align-items: center;
25752
25541
  justify-content: center;
@@ -25758,30 +25547,33 @@ label.pf-v6-c-tree-view__node-text {
25758
25547
  background-color: var(--pf-v6-c-wizard__nav-link--before--BackgroundColor);
25759
25548
  border-radius: var(--pf-v6-c-wizard__nav-link--before--BorderRadius);
25760
25549
  }
25761
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link::before {
25762
- transform: translateX(calc(var(--pf-v6-c-wizard__nav-link--before--TranslateX) * var(--pf-v6-global--inverse--multiplier))) translateY(var(--pf-v6-c-wizard__nav-link--before--TranslateY));
25763
- }
25764
25550
 
25765
25551
  .pf-v6-c-wizard__nav-link::before {
25552
+ inset-block-start: var(--pf-v6-c-wizard__nav-link--before--InsetBlockStart);
25766
25553
  content: counter(wizard-nav-count);
25767
- counter-increment: wizard-nav-count;
25768
25554
  }
25769
25555
  .pf-v6-c-wizard__nav-link.pf-m-current {
25770
25556
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-current--Color);
25771
- --pf-v6-c-wizard__nav-link--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--BackgroundColor);
25557
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--BackgroundColor);
25772
25558
  }
25773
25559
  .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link.pf-m-current::before {
25774
25560
  --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor);
25775
25561
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-current--before--Color);
25776
25562
  }
25777
25563
 
25564
+ .pf-v6-c-wizard__nav-link.pf-m-danger {
25565
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
25566
+ }
25567
+ .pf-v6-c-wizard__nav-link.pf-m-danger::before {
25568
+ display: none;
25569
+ }
25778
25570
  .pf-v6-c-wizard__nav-link:where(:hover, :focus) {
25779
25571
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--hover--Color);
25780
- --pf-v6-c-wizard__nav-link--BackgroundColor: var(--pf-v6-c-wizard__nav-link--hover--BackgroundColor);
25572
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--hover--BackgroundColor);
25781
25573
  }
25782
25574
  .pf-v6-c-wizard__nav-link:disabled, .pf-v6-c-wizard__nav-link.pf-m-disabled {
25783
25575
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-disabled--Color);
25784
- --pf-v6-c-wizard__nav-link--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-disabled--BackgroundColor);
25576
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-disabled--BackgroundColor);
25785
25577
  pointer-events: none;
25786
25578
  }
25787
25579
  .pf-v6-c-wizard__nav-link:disabled::before, .pf-v6-c-wizard__nav-link.pf-m-disabled::before {
@@ -25793,6 +25585,25 @@ label.pf-v6-c-tree-view__node-text {
25793
25585
  flex-grow: 1;
25794
25586
  }
25795
25587
 
25588
+ .pf-v6-c-wizard__nav-link-main {
25589
+ display: flex;
25590
+ justify-content: space-between;
25591
+ padding-block-start: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockStart);
25592
+ padding-block-end: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockEnd);
25593
+ padding-inline-start: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineStart);
25594
+ padding-inline-end: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineEnd);
25595
+ background-color: var(--pf-v6-c-wizard__nav-link-main--BackgroundColor);
25596
+ border: none;
25597
+ border-radius: var(--pf-v6-c-wizard__nav-link-main--BorderRadius);
25598
+ }
25599
+
25600
+ .pf-v6-c-wizard__nav-link-status-icon {
25601
+ position: relative;
25602
+ inset-block-start: var(--pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart);
25603
+ font-size: var(--pf-v6-c-wizard__nav-link-status-icon--FontSize);
25604
+ color: var(--pf-v6-c-wizard__nav-link-status-icon--Color);
25605
+ }
25606
+
25796
25607
  .pf-v6-c-wizard__nav-link-toggle {
25797
25608
  padding-inline-start: var(--pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart);
25798
25609
  padding-inline-end: var(--pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd);
@@ -25837,7 +25648,7 @@ label.pf-v6-c-tree-view__node-text {
25837
25648
  padding-inline-start: var(--pf-v6-c-wizard__footer--PaddingInlineStart);
25838
25649
  padding-inline-end: var(--pf-v6-c-wizard__footer--PaddingInlineEnd);
25839
25650
  background-color: var(--pf-v6-c-wizard__footer--BackgroundColor);
25840
- border-block-start: var(--pf-v6-c-wizard__footer--BorderWidth) solid var(--pf-v6-c-wizard__footer--BorderColor);
25651
+ border-block-start: var(--pf-v6-c-wizard__footer--BorderBlockStartWidth) solid var(--pf-v6-c-wizard__footer--BorderBlockStartColor);
25841
25652
  }
25842
25653
  .pf-v6-c-wizard__footer > * {
25843
25654
  margin-block-end: var(--pf-v6-c-wizard__footer--child--MarginBlockEnd);
@@ -1,8 +1,3 @@
1
- #ws-core-c-navigation-horizontal-in-masthead .pf-v6-c-page__header-nav,
2
- #ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v6-c-page__header-nav {
3
- grid-row: 1;
4
- }
5
-
6
1
  #ws-core-c-navigation-nav-with-flyout .ws-preview-html,
7
2
  [id^="ws-core-c-navigation-nav-with-drilldown-menu"] .ws-preview-html {
8
3
  width: 280px;