@patternfly/patternfly 6.0.0-alpha.107 → 6.0.0-alpha.108

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 (128) hide show
  1. package/README.md +0 -1
  2. package/base/_common.scss +4 -4
  3. package/base/_globals.scss +2 -2
  4. package/base/_themes.scss +3 -3
  5. package/base/_variables.scss +14 -14
  6. package/base/patternfly-variables.css +18 -12
  7. package/base/themes/dark/_globals.scss +1 -1
  8. package/base/tokens/_tokens-charts.scss +1 -1
  9. package/base/tokens/_tokens-dark.scss +3 -3
  10. package/base/tokens/_tokens-default.scss +17 -11
  11. package/base/tokens/_tokens-palette.scss +1 -1
  12. package/components/AboutModalBox/about-modal-box.scss +12 -12
  13. package/components/Accordion/accordion.scss +2 -2
  14. package/components/Alert/alert.scss +2 -2
  15. package/components/AppLauncher/app-launcher.scss +2 -2
  16. package/components/AppLauncher/themes/dark/app-launcher.scss +1 -1
  17. package/components/Avatar/avatar.scss +5 -5
  18. package/components/BackToTop/back-to-top.scss +1 -1
  19. package/components/BackgroundImage/background-image.scss +1 -1
  20. package/components/Banner/banner.scss +1 -1
  21. package/components/Brand/brand.scss +3 -3
  22. package/components/Breadcrumb/breadcrumb.scss +1 -1
  23. package/components/CalendarMonth/calendar-month.scss +1 -1
  24. package/components/Card/card.scss +1 -1
  25. package/components/Chip/chip-group.scss +2 -2
  26. package/components/Chip/chip.scss +4 -4
  27. package/components/Chip/themes/dark/chip.scss +1 -1
  28. package/components/ClipboardCopy/clipboard-copy.scss +1 -1
  29. package/components/Content/content.scss +4 -4
  30. package/components/ContextSelector/context-selector.scss +5 -5
  31. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  32. package/components/DataList/data-list-grid.scss +6 -6
  33. package/components/DataList/data-list.css +15 -15
  34. package/components/DataList/data-list.scss +4 -4
  35. package/components/DescriptionList/description-list-order.scss +1 -1
  36. package/components/DescriptionList/description-list.scss +5 -5
  37. package/components/Divider/divider.css +15 -15
  38. package/components/Divider/divider.scss +16 -16
  39. package/components/Drawer/drawer.scss +25 -25
  40. package/components/Dropdown/dropdown.scss +6 -6
  41. package/components/Dropdown/themes/dark/dropdown.scss +1 -1
  42. package/components/DualListSelector/dual-list-selector.scss +4 -4
  43. package/components/ExpandableSection/expandable-section.scss +1 -1
  44. package/components/Form/form.scss +8 -8
  45. package/components/FormControl/form-control.css +1 -1
  46. package/components/FormControl/form-control.scss +1 -1
  47. package/components/JumpLinks/jump-links.scss +4 -4
  48. package/components/Label/label-group.scss +1 -1
  49. package/components/Label/label.scss +2 -2
  50. package/components/LogViewer/log-viewer.scss +3 -3
  51. package/components/LogViewer/themes/dark/log-viewer.scss +2 -2
  52. package/components/Login/login.scss +13 -13
  53. package/components/Masthead/masthead.scss +15 -15
  54. package/components/Menu/menu.css +17 -17
  55. package/components/Menu/menu.scss +9 -9
  56. package/components/MenuToggle/menu-toggle.scss +1 -1
  57. package/components/ModalBox/modal-box.scss +3 -3
  58. package/components/Nav/nav.scss +3 -3
  59. package/components/NotificationDrawer/notification-drawer.scss +3 -3
  60. package/components/NumberInput/number-input.scss +1 -1
  61. package/components/OptionsMenu/options-menu.scss +3 -3
  62. package/components/OptionsMenu/themes/dark/options-menu.scss +1 -1
  63. package/components/Page/page.css +16 -16
  64. package/components/Page/page.scss +19 -19
  65. package/components/Pagination/pagination.scss +10 -10
  66. package/components/Progress/progress.scss +1 -1
  67. package/components/ProgressStepper/progress-stepper.scss +11 -11
  68. package/components/Select/select.scss +5 -5
  69. package/components/Select/themes/dark/select.scss +1 -1
  70. package/components/Sidebar/sidebar.css +84 -84
  71. package/components/Sidebar/sidebar.scss +12 -12
  72. package/components/Skeleton/skeleton.scss +1 -1
  73. package/components/Slider/slider.scss +11 -11
  74. package/components/Switch/switch.scss +2 -2
  75. package/components/TabContent/tab-content.scss +1 -1
  76. package/components/Table/table-grid.scss +6 -6
  77. package/components/Table/table-tree-view.scss +6 -6
  78. package/components/Table/table.css +15 -15
  79. package/components/Table/table.scss +2 -2
  80. package/components/Tabs/tabs.scss +10 -10
  81. package/components/TextInputGroup/text-input-group.scss +1 -1
  82. package/components/ToggleGroup/toggle-group.css +2 -2
  83. package/components/ToggleGroup/toggle-group.scss +2 -2
  84. package/components/Toolbar/toolbar.css +15 -15
  85. package/components/Toolbar/toolbar.scss +20 -20
  86. package/components/TreeView/tree-view.scss +5 -5
  87. package/components/Truncate/truncate.scss +3 -3
  88. package/components/Wizard/wizard.scss +10 -10
  89. package/docs/components/Badge/examples/Badge.md +0 -21
  90. package/docs/components/Breadcrumb/examples/Breadcrumb.md +17 -58
  91. package/docs/components/Menu/examples/Menu.md +14 -6
  92. package/docs/components/MenuToggle/examples/MenuToggle.md +19 -0
  93. package/layouts/Flex/flex.scss +12 -12
  94. package/layouts/Gallery/gallery.scss +2 -2
  95. package/layouts/Grid/grid.scss +5 -5
  96. package/package.json +1 -1
  97. package/patternfly-base-no-globals-theme-dark-unversioned.css +18 -12
  98. package/patternfly-base-no-globals-theme-dark-unversioned.scss +1 -1
  99. package/patternfly-base-no-globals.css +18 -12
  100. package/patternfly-base-theme-dark-unversioned.css +18 -12
  101. package/patternfly-base.css +18 -12
  102. package/patternfly-charts-theme-dark-unversioned.scss +4 -4
  103. package/patternfly-charts-theme-dark.css +2 -2
  104. package/patternfly-charts-theme-dark.scss +4 -4
  105. package/patternfly-no-globals.css +142 -136
  106. package/patternfly-theme-dark-unversioned.css +142 -136
  107. package/patternfly.css +142 -136
  108. package/patternfly.min.css +1 -1
  109. package/patternfly.min.css.map +1 -1
  110. package/sass-utilities/_init.scss +3 -3
  111. package/sass-utilities/functions.scss +11 -11
  112. package/sass-utilities/mixins.scss +55 -54
  113. package/sass-utilities/placeholders.scss +12 -12
  114. package/sass-utilities/scss-variables.scss +27 -27
  115. package/sass-utilities/themes/dark/mixins.scss +2 -2
  116. package/sass-utilities/themes/dark/placeholders.scss +1 -1
  117. package/themes/dark/_patternfly-charts-theme-dark.scss +1 -1
  118. package/utilities/Accessibility/accessibility.scss +6 -6
  119. package/utilities/Alignment/alignment.scss +1 -1
  120. package/utilities/BackgroundColor/BackgroundColor.scss +1 -1
  121. package/utilities/BoxShadow/box-shadow.scss +1 -1
  122. package/utilities/Display/display.scss +1 -1
  123. package/utilities/Flex/flex.scss +10 -10
  124. package/utilities/Float/float.scss +1 -1
  125. package/utilities/Sizing/sizing.scss +6 -6
  126. package/utilities/Spacing/spacing.scss +3 -3
  127. package/utilities/Text/text.scss +5 -5
  128. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
@@ -249,7 +249,7 @@
249
249
  display: inline-block;
250
250
  transform: rotate(var(--#{$nav}__item__toggle-icon--Rotate));
251
251
 
252
- @include pf-v5-mirror-inline-on-rtl;
252
+ @include pf-v6-mirror-inline-on-rtl;
253
253
 
254
254
  .#{$nav}__item:where(.pf-m-flyout) & {
255
255
  --#{$nav}__item--m-expanded__toggle-icon--Rotate: 0;
@@ -297,7 +297,7 @@
297
297
  outline-offset: var(--#{$nav}--OutlineOffset);
298
298
 
299
299
  > * {
300
- @include pf-v5-mirror-inline-on-rtl;
300
+ @include pf-v6-mirror-inline-on-rtl;
301
301
  }
302
302
  }
303
303
  }
@@ -328,7 +328,7 @@
328
328
  scroll-padding-inline-end: var(--#{$nav}--m-horizontal__list--PaddingInlineEnd);
329
329
  -webkit-overflow-scrolling: touch;
330
330
 
331
- @include pf-v5-overflow-hide-scroll;
331
+ @include pf-v6-overflow-hide-scroll;
332
332
  }
333
333
 
334
334
  .#{$nav}__link {
@@ -237,7 +237,7 @@
237
237
  word-break: break-word;
238
238
 
239
239
  &.pf-m-truncate {
240
- @include pf-v5-line-clamp("var(--#{$notification-drawer}__list-item-header-title--max-lines)");
240
+ @include pf-v6-line-clamp("var(--#{$notification-drawer}__list-item-header-title--max-lines)");
241
241
  }
242
242
  }
243
243
 
@@ -288,7 +288,7 @@
288
288
  }
289
289
 
290
290
  .#{$notification-drawer}__group-toggle-title {
291
- @include pf-v5-line-clamp("var(--#{$notification-drawer}__group-toggle-title--max-lines)");
291
+ @include pf-v6-line-clamp("var(--#{$notification-drawer}__group-toggle-title--max-lines)");
292
292
 
293
293
  flex: 1;
294
294
  margin-inline-end: var(--#{$notification-drawer}__group-toggle-title--MarginRight);
@@ -303,7 +303,7 @@
303
303
  }
304
304
 
305
305
  .#{$notification-drawer}__group-toggle-icon {
306
- @include pf-v5-mirror-inline-on-rtl;
306
+ @include pf-v6-mirror-inline-on-rtl;
307
307
 
308
308
  margin-inline-end: var(--#{$notification-drawer}__group-toggle-icon--MarginRight);
309
309
  color: var(--#{$notification-drawer}__group-toggle-icon--Color);
@@ -30,7 +30,7 @@
30
30
  > :is(input) {
31
31
  text-align: end;
32
32
 
33
- @extend %pf-v5-remove-num-arrows;
33
+ @extend %pf-v6-remove-num-arrows;
34
34
  }
35
35
  }
36
36
  }
@@ -217,7 +217,7 @@
217
217
  }
218
218
 
219
219
  .#{$options-menu}__toggle-text {
220
- @include pf-v5-text-overflow;
220
+ @include pf-v6-text-overflow;
221
221
 
222
222
  flex: 1 1 auto;
223
223
  text-align: start;
@@ -327,6 +327,6 @@
327
327
  // stylelint-disable no-invalid-position-at-import-rule
328
328
  @import "themes/dark/options-menu";
329
329
 
330
- @include pf-v5-theme-dark {
331
- @include pf-v5-theme-dark-options-menu;
330
+ @include pf-v6-theme-dark {
331
+ @include pf-v6-theme-dark-options-menu;
332
332
  }
@@ -1,6 +1,6 @@
1
1
  @import "../../../../sass-utilities/themes/dark/all";
2
2
 
3
- @mixin pf-v5-theme-dark-options-menu() {
3
+ @mixin pf-v6-theme-dark-options-menu() {
4
4
  .#{$options-menu} {
5
5
  --#{$options-menu}__toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
6
6
  --#{$options-menu}__toggle--BorderTopColor: transparent;
@@ -14,51 +14,51 @@
14
14
  }
15
15
 
16
16
  .pf-v6-c-page__header-tools-item, .pf-v6-c-page__header-tools-group {
17
- --pf-v5-hidden-visible--hidden--Display: none;
18
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
19
- display: var(--pf-v5-hidden-visible--Display);
17
+ --pf-v6-hidden-visible--hidden--Display: none;
18
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
19
+ display: var(--pf-v6-hidden-visible--Display);
20
20
  }
21
21
  .pf-m-hidden.pf-v6-c-page__header-tools-item, .pf-m-hidden.pf-v6-c-page__header-tools-group {
22
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
22
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
23
23
  }
24
24
  @media screen and (min-width: 576px) {
25
25
  .pf-m-hidden-on-sm.pf-v6-c-page__header-tools-item, .pf-m-hidden-on-sm.pf-v6-c-page__header-tools-group {
26
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
26
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
27
27
  }
28
28
  .pf-m-visible-on-sm.pf-v6-c-page__header-tools-item, .pf-m-visible-on-sm.pf-v6-c-page__header-tools-group {
29
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
29
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
30
30
  }
31
31
  }
32
32
  @media screen and (min-width: 768px) {
33
33
  .pf-m-hidden-on-md.pf-v6-c-page__header-tools-item, .pf-m-hidden-on-md.pf-v6-c-page__header-tools-group {
34
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
34
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
35
35
  }
36
36
  .pf-m-visible-on-md.pf-v6-c-page__header-tools-item, .pf-m-visible-on-md.pf-v6-c-page__header-tools-group {
37
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
37
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
38
38
  }
39
39
  }
40
40
  @media screen and (min-width: 992px) {
41
41
  .pf-m-hidden-on-lg.pf-v6-c-page__header-tools-item, .pf-m-hidden-on-lg.pf-v6-c-page__header-tools-group {
42
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
42
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
43
43
  }
44
44
  .pf-m-visible-on-lg.pf-v6-c-page__header-tools-item, .pf-m-visible-on-lg.pf-v6-c-page__header-tools-group {
45
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
45
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
46
46
  }
47
47
  }
48
48
  @media screen and (min-width: 1200px) {
49
49
  .pf-m-hidden-on-xl.pf-v6-c-page__header-tools-item, .pf-m-hidden-on-xl.pf-v6-c-page__header-tools-group {
50
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
50
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
51
51
  }
52
52
  .pf-m-visible-on-xl.pf-v6-c-page__header-tools-item, .pf-m-visible-on-xl.pf-v6-c-page__header-tools-group {
53
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
53
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
54
54
  }
55
55
  }
56
56
  @media screen and (min-width: 1450px) {
57
57
  .pf-m-hidden-on-2xl.pf-v6-c-page__header-tools-item, .pf-m-hidden-on-2xl.pf-v6-c-page__header-tools-group {
58
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
58
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
59
59
  }
60
60
  .pf-m-visible-on-2xl.pf-v6-c-page__header-tools-item, .pf-m-visible-on-2xl.pf-v6-c-page__header-tools-group {
61
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
61
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
62
62
  }
63
63
  }
64
64
 
@@ -306,7 +306,7 @@
306
306
  }
307
307
 
308
308
  .pf-v6-c-page__header-tools-group {
309
- --pf-v5-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-group--Display);
309
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-group--Display);
310
310
  align-items: center;
311
311
  }
312
312
  .pf-v6-c-page__header-tools-group + .pf-v6-c-page__header-tools-group {
@@ -314,7 +314,7 @@
314
314
  }
315
315
 
316
316
  .pf-v6-c-page__header-tools-item {
317
- --pf-v5-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-item--Display);
317
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-item--Display);
318
318
  }
319
319
 
320
320
  .pf-v6-c-page__sidebar {
@@ -19,7 +19,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
19
19
  --#{$page}__header-brand--xl--PaddingRight: var(--pf-t--global--spacer--xl);
20
20
  --#{$page}__header-brand--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
21
21
 
22
- @media (min-width: $pf-v5-global--breakpoint--xl) {
22
+ @media (min-width: $pf-v6-global--breakpoint--xl) {
23
23
  --#{$page}__header-brand--PaddingLeft: var(--#{$page}__header-brand--xl--PaddingLeft);
24
24
  --#{$page}--inset: var(--#{$page}--xl--inset);
25
25
  }
@@ -42,7 +42,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
42
42
  --#{$page}__header-nav--xl--PaddingRight: var(--pf-t--global--spacer--xl);
43
43
  --#{$page}__header-nav--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
44
44
 
45
- @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
45
+ @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
46
46
  --#{$page}__header-nav--BackgroundColor: var(--#{$page}__header-nav--xl--BackgroundColor);
47
47
  --#{$page}__header-nav--PaddingRight: var(--#{$page}__header-nav--xl--PaddingRight);
48
48
  --#{$page}__header-nav--PaddingLeft: var(--#{$page}__header-nav--xl--PaddingLeft);
@@ -60,7 +60,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
60
60
  --#{$page}__header-tools--c-button--m-selected--before--Width: auto;
61
61
  --#{$page}__header-tools--c-button--m-selected--before--Height: auto;
62
62
 
63
- @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
63
+ @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
64
64
  --#{$page}__header-tools--MarginRight: var(--#{$page}__header-tools--xl--MarginRight);
65
65
  }
66
66
 
@@ -100,7 +100,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
100
100
  --#{$page}__sidebar-body--m-menu--BorderTopWidth: var(--pf-t--global--border--width--button--default);
101
101
  --#{$page}__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-t--global--border--color--default);
102
102
 
103
- @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
103
+ @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
104
104
  --#{$page}__sidebar--TranslateX: var(--#{$page}__sidebar--xl--TranslateX);
105
105
  }
106
106
 
@@ -189,7 +189,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
189
189
  max-height: 100%;
190
190
  background-color: var(--#{$page}--BackgroundColor);
191
191
 
192
- @media (min-width: $pf-v5-global--breakpoint--xl) {
192
+ @media (min-width: $pf-v6-global--breakpoint--xl) {
193
193
  grid-template-areas:
194
194
  "header header"
195
195
  "sidebar main";
@@ -217,7 +217,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
217
217
  align-items: center;
218
218
  }
219
219
 
220
- @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
220
+ @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
221
221
  grid-template-columns: auto 1fr auto;
222
222
  }
223
223
 
@@ -232,7 +232,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
232
232
  grid-column: 1 / 2;
233
233
  padding-inline-start: var(--#{$page}__header-brand--PaddingLeft);
234
234
 
235
- @media (min-width: $pf-v5-global--breakpoint--xl) {
235
+ @media (min-width: $pf-v6-global--breakpoint--xl) {
236
236
  padding-inline-end: var(--#{$page}__header-brand--xl--PaddingRight); // set padding right here to allow mobile view to accomodate tools
237
237
  }
238
238
  }
@@ -272,7 +272,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
272
272
  padding-inline-end: var(--#{$page}__header-nav--PaddingRight);
273
273
  background-color: var(--#{$page}__header-nav--BackgroundColor);
274
274
 
275
- @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
275
+ @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
276
276
  grid-row: 1 / 2;
277
277
  grid-column: 2 / 3;
278
278
  }
@@ -292,13 +292,13 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
292
292
  margin-inline-start: var(--#{$page}__header-tools--c-avatar--MarginLeft);
293
293
  }
294
294
 
295
- @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
295
+ @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
296
296
  grid-column: 3 / 4;
297
297
  }
298
298
  }
299
299
 
300
300
  .#{$page}__header-tools-group {
301
- @include pf-v5-hidden-visible(var(--#{$page}__header-tools-group--Display));
301
+ @include pf-v6-hidden-visible(var(--#{$page}__header-tools-group--Display));
302
302
 
303
303
  align-items: center;
304
304
 
@@ -308,7 +308,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
308
308
  }
309
309
 
310
310
  .#{$page}__header-tools-item {
311
- @include pf-v5-hidden-visible(var(--#{$page}__header-tools-item--Display));
311
+ @include pf-v6-hidden-visible(var(--#{$page}__header-tools-item--Display));
312
312
  }
313
313
 
314
314
  // Sidebar
@@ -330,10 +330,10 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
330
330
  background-color: var(--#{$page}__sidebar--BackgroundColor);
331
331
  transition: var(--#{$page}__sidebar--Transition);
332
332
 
333
- @include pf-v5-bidirectional-style(
333
+ @include pf-v6-bidirectional-style(
334
334
  $prop: transform,
335
335
  $ltr-val: translateX(var(--#{$page}__sidebar--TranslateX)) translateZ(var(--#{$page}__sidebar--TranslateZ)),
336
- $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$page}__sidebar--TranslateX))}) translateZ(var(--#{$page}__sidebar--TranslateZ))
336
+ $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$page}__sidebar--TranslateX))}) translateZ(var(--#{$page}__sidebar--TranslateZ))
337
337
  );
338
338
 
339
339
  // Mobile
@@ -343,7 +343,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
343
343
 
344
344
  box-shadow: var(--#{$page}__sidebar--BoxShadow);
345
345
 
346
- @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
346
+ @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
347
347
  --#{$page}__sidebar--BoxShadow: none;
348
348
  }
349
349
  }
@@ -393,7 +393,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
393
393
  --#{$context-selector}__toggle--BorderLeftColor: transparent;
394
394
  --#{$context-selector}__menu--Top: 100%;
395
395
 
396
- @include pf-v5-t-dark;
396
+ @include pf-v6-t-dark;
397
397
 
398
398
  width: 100%;
399
399
  }
@@ -472,7 +472,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
472
472
  @each $breakpoint, $breakpoint-value in $pf-page-v5--height-breakpoint-map {
473
473
  $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
474
474
 
475
- @include pf-v5-apply-height-breakpoint($breakpoint) {
475
+ @include pf-v6-apply-height-breakpoint($breakpoint) {
476
476
 
477
477
  &.pf-m-sticky-top#{$breakpoint-name} {
478
478
  position: sticky;
@@ -535,7 +535,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
535
535
  @each $breakpoint, $breakpoint-value in $pf-page-v5--height-breakpoint-map {
536
536
  $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
537
537
 
538
- @include pf-v5-apply-height-breakpoint($breakpoint) {
538
+ @include pf-v6-apply-height-breakpoint($breakpoint) {
539
539
  &.pf-m-sticky-top#{$breakpoint-name},
540
540
  .#{$page}__main-group.pf-m-sticky-top#{$breakpoint-name} &:last-child {
541
541
  padding-block-end: var(--#{$page}__main-nav--m-sticky-top--PaddingBottom);
@@ -567,7 +567,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
567
567
  @each $breakpoint, $breakpoint-value in $pf-page-v5--height-breakpoint-map {
568
568
  $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
569
569
 
570
- @include pf-v5-apply-height-breakpoint($breakpoint) {
570
+ @include pf-v6-apply-height-breakpoint($breakpoint) {
571
571
  &.pf-m-sticky-top#{$breakpoint-name},
572
572
  .#{$page}__main-group.pf-m-sticky-top#{$breakpoint-name} &:last-child {
573
573
  --#{$page}__main-breadcrumb--PaddingBottom: var(--#{$page}__main-breadcrumb--m-sticky-top--PaddingBottom);
@@ -620,7 +620,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
620
620
  @each $breakpoint, $breakpoint-value in $pf-page-v5--breakpoint-map {
621
621
  $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
622
622
 
623
- @include pf-v5-apply-breakpoint($breakpoint) {
623
+ @include pf-v6-apply-breakpoint($breakpoint) {
624
624
  // stylelint-disable max-nesting-depth
625
625
  &.pf-m-padding#{$breakpoint-name} {
626
626
  padding-block-start: var(--#{$page}__main-section--PaddingTop);
@@ -1,6 +1,6 @@
1
1
  // @debug $pagination; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
- $pf-v5-c-pagination--breakpoint-map: build-breakpoint-map();
3
- $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
2
+ $pf-v6-c-pagination--breakpoint-map: build-breakpoint-map();
3
+ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
4
4
 
5
5
  :where(:root),
6
6
  :where(.#{$pagination}) {
@@ -51,14 +51,14 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
51
51
  --#{$pagination}--m-display-summary__page-menu--Display: none;
52
52
  --#{$pagination}--m-display-full__page-menu--Display: inline-flex;
53
53
 
54
- @media screen and (min-width: $pf-v5-global--breakpoint--md) {
54
+ @media screen and (min-width: $pf-v6-global--breakpoint--md) {
55
55
  --#{$pagination}--m-bottom--BoxShadow: none;
56
56
  --#{$pagination}__page-menu--Display: inline-flex;
57
57
  --#{$pagination}__nav--Display: inline-flex;
58
58
  --#{$pagination}__total-items--Display: none;
59
59
  }
60
60
 
61
- @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
61
+ @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
62
62
  --#{$pagination}__scroll-button--Width: var(--#{$pagination}__scroll-button--xl--Width);
63
63
  }
64
64
  }
@@ -113,7 +113,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
113
113
  justify-content: space-between;
114
114
  }
115
115
 
116
- @media screen and (min-width: $pf-v5-global--breakpoint--md) {
116
+ @media screen and (min-width: $pf-v6-global--breakpoint--md) {
117
117
  --#{$pagination}--m-bottom--BorderTopWidth: 0;
118
118
  --#{$pagination}--m-bottom--MarginTop: 0;
119
119
  --#{$pagination}--m-bottom--Bottom: auto;
@@ -171,7 +171,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
171
171
 
172
172
  // nav control
173
173
  .#{$pagination}__nav-control {
174
- @include pf-v5-mirror-inline-on-rtl;
174
+ @include pf-v6-mirror-inline-on-rtl;
175
175
  }
176
176
 
177
177
  // nav page element
@@ -189,7 +189,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
189
189
  width: var(--#{$pagination}__nav-page-select--c-form-control--Width);
190
190
 
191
191
  > :is(input) {
192
- @extend %pf-v5-remove-num-arrows;
192
+ @extend %pf-v6-remove-num-arrows;
193
193
  }
194
194
  }
195
195
  }
@@ -201,10 +201,10 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
201
201
 
202
202
  // stylelint-disable no-duplicate-selectors
203
203
  .#{$pagination} {
204
- @each $breakpoint, $breakpoint-value in $pf-v5-c-pagination--breakpoint-map {
204
+ @each $breakpoint, $breakpoint-value in $pf-v6-c-pagination--breakpoint-map {
205
205
  $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
206
206
 
207
- @include pf-v5-apply-breakpoint($breakpoint) {
207
+ @include pf-v6-apply-breakpoint($breakpoint) {
208
208
  &.pf-m-display-summary#{$breakpoint-name} {
209
209
  --#{$pagination}__nav--Display: var(--#{$pagination}--m-display-summary__nav--Display);
210
210
  --#{$pagination}__page-menu--Display: var(--#{$pagination}--m-display-summary__page-menu--Display);
@@ -217,7 +217,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
217
217
  --#{$pagination}__total-items--Display: var(--#{$pagination}--m-display-full__total-items--Display);
218
218
  }
219
219
 
220
- @each $spacer, $spacer-value in $pf-v5-c-pagination--variable-map {
220
+ @each $spacer, $spacer-value in $pf-v6-c-pagination--variable-map {
221
221
  &.pf-m-inset-#{$spacer}#{$breakpoint-name} {
222
222
  --#{$pagination}--inset: #{$spacer-value};
223
223
  }
@@ -151,7 +151,7 @@
151
151
  word-break: break-word;
152
152
 
153
153
  &.pf-m-truncate {
154
- @include pf-v5-text-overflow;
154
+ @include pf-v6-text-overflow;
155
155
  }
156
156
  }
157
157
 
@@ -1,8 +1,8 @@
1
1
  // @debug $progress-stepper; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
- $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
2
+ $pf-v6-c-progress-stepper--breakpoint-map: build-breakpoint-map();
3
3
 
4
4
  // Default layout is vertical
5
- @mixin pf-v5-c-progress-stepper--m-vertical {
5
+ @mixin pf-v6-c-progress-stepper--m-vertical {
6
6
  --#{$progress-stepper}--GridAutoFlow: var(--#{$progress-stepper}--m-vertical--GridAutoFlow);
7
7
  --#{$progress-stepper}--GridTemplateColumns: var(--#{$progress-stepper}--m-vertical--GridTemplateColumns);
8
8
  --#{$progress-stepper}__step-connector--before--Top: var(--#{$progress-stepper}--m-vertical__step-connector--before--Top);
@@ -29,7 +29,7 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
29
29
  --#{$progress-stepper}--m-center__step-main--before--Content: ""; // border swap
30
30
  }
31
31
 
32
- @mixin pf-v5-c-progress-stepper--m-horizontal {
32
+ @mixin pf-v6-c-progress-stepper--m-horizontal {
33
33
  --#{$progress-stepper}--GridAutoFlow: var(--#{$progress-stepper}--m-horizontal--GridAutoFlow);
34
34
  --#{$progress-stepper}--GridTemplateColumns: var(--#{$progress-stepper}--m-horizontal--GridTemplateColumns);
35
35
  --#{$progress-stepper}__step-connector--before--Top: var(--#{$progress-stepper}--m-horizontal__step-connector--before--Top);
@@ -186,11 +186,11 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
186
186
  --#{$progress-stepper}__step-description--TextAlign: start;
187
187
 
188
188
  // Vertical by default
189
- @include pf-v5-c-progress-stepper--m-vertical;
189
+ @include pf-v6-c-progress-stepper--m-vertical;
190
190
 
191
191
  // Horizontal at md breakpoint
192
- @media screen and (min-width: $pf-v5-global--breakpoint--md) {
193
- @include pf-v5-c-progress-stepper--m-horizontal;
192
+ @media screen and (min-width: $pf-v6-global--breakpoint--md) {
193
+ @include pf-v6-c-progress-stepper--m-horizontal;
194
194
  }
195
195
  }
196
196
 
@@ -265,7 +265,7 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
265
265
  }
266
266
 
267
267
  .#{$progress-stepper}__step:not(.pf-m-current) .#{$progress-stepper}__step-main {
268
- @include pf-v5-u-screen-reader;
268
+ @include pf-v6-u-screen-reader;
269
269
  }
270
270
 
271
271
  // For this compact variant only, move the main content for the current step to above the icons
@@ -428,16 +428,16 @@ $pf-v5-c-progress-stepper--breakpoint-map: build-breakpoint-map();
428
428
 
429
429
  // stylelint-disable no-duplicate-selectors
430
430
  .#{$progress-stepper} {
431
- @each $breakpoint, $breakpoint-value in $pf-v5-c-progress-stepper--breakpoint-map {
431
+ @each $breakpoint, $breakpoint-value in $pf-v6-c-progress-stepper--breakpoint-map {
432
432
  $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
433
433
 
434
- @include pf-v5-apply-breakpoint($breakpoint) {
434
+ @include pf-v6-apply-breakpoint($breakpoint) {
435
435
  &.pf-m-horizontal#{$breakpoint-name} {
436
- @include pf-v5-c-progress-stepper--m-horizontal;
436
+ @include pf-v6-c-progress-stepper--m-horizontal;
437
437
  }
438
438
 
439
439
  &.pf-m-vertical#{$breakpoint-name} {
440
- @include pf-v5-c-progress-stepper--m-vertical;
440
+ @include pf-v6-c-progress-stepper--m-vertical;
441
441
  }
442
442
  }
443
443
  }
@@ -1,7 +1,7 @@
1
1
  // @debug $select; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
3
  .#{$select} {
4
- @include pf-v5-t-light; // force the container follow the light theme
4
+ @include pf-v6-t-light; // force the container follow the light theme
5
5
 
6
6
  // Toggle
7
7
  --#{$select}__toggle--PaddingTop: var(--#{$pf-global}--spacer--form-element);
@@ -350,7 +350,7 @@
350
350
  --#{$select}__toggle--PaddingBottom: 0;
351
351
 
352
352
  .#{$form-control} {
353
- @include pf-v5-text-overflow;
353
+ @include pf-v6-text-overflow;
354
354
 
355
355
  --#{$form-control}--invalid--BackgroundUrl: none;
356
356
 
@@ -391,7 +391,7 @@
391
391
  }
392
392
 
393
393
  .#{$select}__toggle-text {
394
- @include pf-v5-text-overflow;
394
+ @include pf-v6-text-overflow;
395
395
 
396
396
  color: var(--#{$select}__toggle-text--Color, inherit);
397
397
  }
@@ -708,6 +708,6 @@
708
708
  // stylelint-disable no-invalid-position-at-import-rule
709
709
  @import "themes/dark/select";
710
710
 
711
- @include pf-v5-theme-dark {
712
- @include pf-v5-theme-dark-select;
711
+ @include pf-v6-theme-dark {
712
+ @include pf-v6-theme-dark-select;
713
713
  }
@@ -1,6 +1,6 @@
1
1
  @import "../../../../sass-utilities/themes/dark/all";
2
2
 
3
- @mixin pf-v5-theme-dark-select() {
3
+ @mixin pf-v6-theme-dark-select() {
4
4
  .#{$select} {
5
5
  --#{$select}__toggle--disabled--BackgroundColor: var(--#{$pf-global}--palette--black-500);
6
6
  --#{$select}__toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);