@patternfly/react-styles 6.5.0-prerelease.9 → 6.5.0

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 (150) hide show
  1. package/CHANGELOG.md +120 -0
  2. package/README.md +1 -1
  3. package/css/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
  4. package/css/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
  5. package/css/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
  6. package/css/assets/images/PF-Bkg-Generic-Light.svg +74 -0
  7. package/css/assets/images/compass--hero-bg.png +0 -0
  8. package/css/assets/images/compass--wallpaper-dark.jpg +0 -0
  9. package/css/assets/images/compass--wallpaper-light.jpg +0 -0
  10. package/css/assets/images/glass-brand-dark.jpg +0 -0
  11. package/css/assets/images/glass-brand-dark.png +0 -0
  12. package/css/assets/images/glass-brand-light.jpg +0 -0
  13. package/css/assets/images/glass-brand-light.png +0 -0
  14. package/css/components/AboutModalBox/about-modal-box.css +36 -26
  15. package/css/components/Accordion/accordion.css +26 -14
  16. package/css/components/Accordion/accordion.d.ts +4 -1
  17. package/css/components/Accordion/accordion.js +4 -1
  18. package/css/components/Accordion/accordion.mjs +4 -1
  19. package/css/components/Alert/alert.css +7 -5
  20. package/css/components/Avatar/avatar.css +12 -4
  21. package/css/components/BackgroundImage/background-image.css +6 -3
  22. package/css/components/Banner/banner.css +12 -6
  23. package/css/components/Banner/banner.d.ts +1 -0
  24. package/css/components/Banner/banner.js +1 -0
  25. package/css/components/Banner/banner.mjs +1 -0
  26. package/css/components/Brand/brand.css +3 -1
  27. package/css/components/Breadcrumb/breadcrumb.css +10 -5
  28. package/css/components/Button/button.css +158 -68
  29. package/css/components/Button/button.d.ts +7 -2
  30. package/css/components/Button/button.js +7 -2
  31. package/css/components/Button/button.mjs +7 -2
  32. package/css/components/CalendarMonth/calendar-month.css +4 -3
  33. package/css/components/Card/card.css +45 -15
  34. package/css/components/Card/card.d.ts +3 -1
  35. package/css/components/Card/card.js +3 -1
  36. package/css/components/Card/card.mjs +3 -1
  37. package/css/components/ClipboardCopy/clipboard-copy.css +14 -7
  38. package/css/components/ClipboardCopy/clipboard-copy.d.ts +1 -0
  39. package/css/components/ClipboardCopy/clipboard-copy.js +1 -0
  40. package/css/components/ClipboardCopy/clipboard-copy.mjs +1 -0
  41. package/css/components/CodeEditor/code-editor.css +2 -2
  42. package/css/components/Compass/compass.css +211 -100
  43. package/css/components/Compass/compass.d.ts +17 -10
  44. package/css/components/Compass/compass.js +17 -10
  45. package/css/components/Compass/compass.mjs +17 -10
  46. package/css/components/DataList/data-list.css +30 -23
  47. package/css/components/DataList/data-list.d.ts +3 -1
  48. package/css/components/DataList/data-list.js +3 -1
  49. package/css/components/DataList/data-list.mjs +3 -1
  50. package/css/components/DescriptionList/description-list.css +7 -5
  51. package/css/components/Divider/divider.css +7 -5
  52. package/css/components/Drawer/drawer.css +167 -57
  53. package/css/components/Drawer/drawer.d.ts +5 -2
  54. package/css/components/Drawer/drawer.js +5 -2
  55. package/css/components/Drawer/drawer.mjs +5 -2
  56. package/css/components/DualListSelector/dual-list-selector.css +18 -12
  57. package/css/components/ExpandableSection/expandable-section.css +18 -16
  58. package/css/components/Form/form.css +2 -2
  59. package/css/components/FormControl/form-control.css +3 -3
  60. package/css/components/Hero/hero.css +19 -19
  61. package/css/components/Hero/hero.d.ts +1 -1
  62. package/css/components/Hero/hero.js +1 -1
  63. package/css/components/Hero/hero.mjs +1 -1
  64. package/css/components/JumpLinks/jump-links.css +16 -5
  65. package/css/components/Label/label-group.css +2 -2
  66. package/css/components/Label/label.css +4 -3
  67. package/css/components/Login/login.css +58 -40
  68. package/css/components/Masthead/masthead.css +69 -26
  69. package/css/components/Masthead/masthead.d.ts +5 -0
  70. package/css/components/Masthead/masthead.js +5 -0
  71. package/css/components/Masthead/masthead.mjs +5 -0
  72. package/css/components/Menu/menu.css +49 -33
  73. package/css/components/MenuToggle/menu-toggle.css +35 -8
  74. package/css/components/MenuToggle/menu-toggle.d.ts +5 -0
  75. package/css/components/MenuToggle/menu-toggle.js +5 -0
  76. package/css/components/MenuToggle/menu-toggle.mjs +5 -0
  77. package/css/components/ModalBox/modal-box.css +9 -7
  78. package/css/components/Nav/nav.css +32 -20
  79. package/css/components/Nav/nav.d.ts +4 -1
  80. package/css/components/Nav/nav.js +4 -1
  81. package/css/components/Nav/nav.mjs +4 -1
  82. package/css/components/NotificationDrawer/notification-drawer.css +19 -9
  83. package/css/components/OverflowMenu/overflow-menu.css +16 -0
  84. package/css/components/OverflowMenu/overflow-menu.d.ts +1 -0
  85. package/css/components/OverflowMenu/overflow-menu.js +1 -0
  86. package/css/components/OverflowMenu/overflow-menu.mjs +1 -0
  87. package/css/components/Page/page.css +409 -38
  88. package/css/components/Page/page.d.ts +17 -2
  89. package/css/components/Page/page.js +17 -2
  90. package/css/components/Page/page.mjs +17 -2
  91. package/css/components/Pagination/pagination.css +58 -4
  92. package/css/components/Pagination/pagination.d.ts +6 -1
  93. package/css/components/Pagination/pagination.js +6 -1
  94. package/css/components/Pagination/pagination.mjs +6 -1
  95. package/css/components/Panel/panel.css +41 -3
  96. package/css/components/Panel/panel.d.ts +8 -2
  97. package/css/components/Panel/panel.js +8 -2
  98. package/css/components/Panel/panel.mjs +8 -2
  99. package/css/components/Progress/progress.css +3 -1
  100. package/css/components/Sidebar/sidebar.css +1 -1
  101. package/css/components/Skeleton/skeleton.css +16 -15
  102. package/css/components/Slider/slider.css +32 -18
  103. package/css/components/Switch/switch.css +4 -2
  104. package/css/components/Table/table-grid.css +28 -36
  105. package/css/components/Table/table-scrollable.css +1 -1
  106. package/css/components/Table/table-tree-view.css +4 -2
  107. package/css/components/Table/table.css +104 -57
  108. package/css/components/Table/table.d.ts +6 -2
  109. package/css/components/Table/table.js +6 -2
  110. package/css/components/Table/table.mjs +6 -2
  111. package/css/components/Tabs/tabs.css +35 -32
  112. package/css/components/Tabs/tabs.d.ts +0 -1
  113. package/css/components/Tabs/tabs.js +0 -1
  114. package/css/components/Tabs/tabs.mjs +0 -1
  115. package/css/components/TextInputGroup/text-input-group.css +2 -2
  116. package/css/components/ToggleGroup/toggle-group.css +44 -19
  117. package/css/components/ToggleGroup/toggle-group.d.ts +1 -0
  118. package/css/components/ToggleGroup/toggle-group.js +1 -0
  119. package/css/components/ToggleGroup/toggle-group.mjs +1 -0
  120. package/css/components/Toolbar/toolbar.css +167 -11
  121. package/css/components/Toolbar/toolbar.d.ts +13 -0
  122. package/css/components/Toolbar/toolbar.js +13 -0
  123. package/css/components/Toolbar/toolbar.mjs +13 -0
  124. package/css/components/TreeView/tree-view.css +45 -14
  125. package/css/components/TreeView/tree-view.d.ts +1 -0
  126. package/css/components/TreeView/tree-view.js +1 -0
  127. package/css/components/TreeView/tree-view.mjs +1 -0
  128. package/css/components/Wizard/wizard.css +41 -19
  129. package/css/components/Wizard/wizard.d.ts +3 -0
  130. package/css/components/Wizard/wizard.js +3 -0
  131. package/css/components/Wizard/wizard.mjs +3 -0
  132. package/css/components/_index.css +2191 -858
  133. package/css/components/_index.d.ts +34 -10
  134. package/css/components/_index.js +34 -10
  135. package/css/components/_index.mjs +34 -10
  136. package/css/docs/components/Compass/examples/Compass.css +4 -13
  137. package/css/docs/components/Compass/examples/Compass.d.ts +1 -1
  138. package/css/docs/components/Compass/examples/Compass.js +1 -1
  139. package/css/docs/components/Compass/examples/Compass.mjs +1 -1
  140. package/css/docs/components/DragDrop/examples/DragDrop.css +1 -1
  141. package/css/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  142. package/css/docs/components/Panel/examples/Panel.css +3 -0
  143. package/css/docs/components/Panel/examples/Panel.d.ts +5 -0
  144. package/css/docs/components/Panel/examples/Panel.js +6 -0
  145. package/css/docs/components/Panel/examples/Panel.mjs +4 -0
  146. package/css/docs/components/Table/examples/Table.css +2 -1
  147. package/css/docs/components/Toolbar/examples/Toolbar.css +1 -1
  148. package/css/layouts/Gallery/gallery.css +6 -2
  149. package/css/layouts/_index.css +6 -2
  150. package/package.json +4 -4
@@ -38,14 +38,14 @@
38
38
  --pf-v6-c-tabs--m-vertical__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
39
39
  --pf-v6-c-tabs__item--m-current--BackgroundColor: transparent;
40
40
  --pf-v6-c-tabs--m-box__item--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
41
- --pf-v6-c-tabs--m-box__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
42
- --pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
41
+ --pf-v6-c-tabs--m-box__item--m-current--BackgroundColor: transparent;
42
+ --pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor: transparent;
43
43
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
44
44
  --pf-v6-c-tabs__item--m-action--before--ZIndex: var(--pf-t--global--z-index--sm);
45
45
  --pf-v6-c-tabs__link--Color: var(--pf-t--global--text--color--subtle);
46
46
  --pf-v6-c-tabs__link--FontSize: var(--pf-t--global--font--size--sm);
47
47
  --pf-v6-c-tabs__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
48
- --pf-v6-c-tabs__link--BorderRadius: var(--pf-t--global--border--radius--small);
48
+ --pf-v6-c-tabs__link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
49
49
  --pf-v6-c-tabs__link--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
50
50
  --pf-v6-c-tabs__link--BorderColor: transparent;
51
51
  --pf-v6-c-tabs__link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
@@ -55,21 +55,21 @@
55
55
  --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
56
56
  --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
57
57
  --pf-v6-c-tabs__link--ColumnGap: var(--pf-t--global--spacer--sm);
58
- --pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
59
- --pf-v6-c-tabs__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
58
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--disabled);
59
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
60
60
  --pf-v6-c-tabs__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
61
61
  --pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--regular);
62
62
  --pf-v6-c-tabs__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
63
63
  --pf-v6-c-tabs--m-vertical__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
64
64
  --pf-v6-c-tabs--m-vertical__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
65
65
  --pf-v6-c-tabs--m-box__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
66
- --pf-v6-c-tabs--m-box__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
67
- --pf-v6-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
66
+ --pf-v6-c-tabs--m-box__link--disabled--Color: var(--pf-t--global--text--color--disabled);
67
+ --pf-v6-c-tabs--m-box__link--disabled--BackgroundColor: transparent;
68
68
  --pf-v6-c-tabs--m-box__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
69
69
  --pf-v6-c-tabs--m-box__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
70
70
  --pf-v6-c-tabs--m-box--m-secondary__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
71
- --pf-v6-c-tabs--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
72
- --pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
71
+ --pf-v6-c-tabs--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--disabled);
72
+ --pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: transparent;
73
73
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
74
74
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
75
75
  --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
@@ -89,6 +89,7 @@
89
89
  --pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
90
90
  --pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
91
91
  --pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
92
+ --pf-v6-c-tabs--m-box__link--m-current--before--BorderBlockEndColor: var(--pf-t--global--border--color--alt);
92
93
  --pf-v6-c-tabs__link--disabled--before--BorderInlineEndWidth: 0;
93
94
  --pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
94
95
  --pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth: 0;
@@ -101,7 +102,9 @@
101
102
  --pf-v6-c-tabs__link--after--BorderBlockStartWidth: 0;
102
103
  --pf-v6-c-tabs__link--after--BorderInlineEndWidth: 0;
103
104
  --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
104
- --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
105
+ --pf-v6-c-tabs__link--after--BorderRadius: var(--pf-t--global--border--radius--pill);
106
+ --pf-v6-c-tabs--m-box__link--after--BorderRadius: var(--pf-t--global--border--radius--sharp);
107
+ --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--color--brand--accent--default);
105
108
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
106
109
  --pf-v6-c-tabs--link-accent--start: 0;
107
110
  --pf-v6-c-tabs--link-accent--length: 0;
@@ -149,7 +152,7 @@
149
152
  --pf-v6-c-tabs__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
150
153
  --pf-v6-c-tabs__toggle-icon--Transition: transform var(--pf-v6-c-tabs__toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__toggle-icon--TransitionTimingFunction);
151
154
  --pf-v6-c-tabs__toggle-icon--Rotate: 0;
152
- --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
155
+ --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: -180deg;
153
156
  --pf-v6-c-tabs--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
154
157
  --pf-v6-c-tabs--m-expandable--PaddingBlockStart: var(--pf-t--global--spacer--sm);
155
158
  --pf-v6-c-tabs--m-expandable--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -175,7 +178,7 @@
175
178
  --pf-v6-c-tabs__link-toggle-icon--Transition: transform var(--pf-v6-c-tabs__link-toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction);
176
179
  --pf-v6-c-tabs__link-toggle-icon--Rotate: 0;
177
180
  --pf-v6-c-tabs__link-toggle-icon--FontSize: var(--pf-t--global--font--size--sm);
178
- --pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
181
+ --pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate: -180deg;
179
182
  }
180
183
 
181
184
  .pf-v6-c-tabs {
@@ -242,6 +245,7 @@
242
245
  --pf-v6-c-tabs__link--before--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
243
246
  --pf-v6-c-tabs__link--after--InsetBlockStart: 0;
244
247
  --pf-v6-c-tabs__link--after--InsetBlockEnd: auto;
248
+ --pf-v6-c-tabs__link--after--BorderRadius: var(--pf-v6-c-tabs--m-box__link--after--BorderRadius);
245
249
  }
246
250
  .pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__link {
247
251
  --pf-v6-c-tabs__link--after--BorderBlockStartWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
@@ -251,7 +255,7 @@
251
255
  }
252
256
  .pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current {
253
257
  --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__item--m-current__link--BackgroundColor);
254
- --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--BackgroundColor);
258
+ --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderBlockEndColor);
255
259
  --pf-v6-c-tabs__link--before--BorderInlineStartColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineStartColor);
256
260
  --pf-v6-c-tabs__link--before--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineStartWidth);
257
261
  --pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineEndColor);
@@ -303,8 +307,8 @@
303
307
  }
304
308
  .pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__list {
305
309
  position: relative;
306
- flex-direction: column;
307
310
  flex-grow: 1;
311
+ flex-direction: column;
308
312
  max-width: var(--pf-v6-c-tabs--m-vertical--MaxWidth);
309
313
  }
310
314
  .pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__list::before {
@@ -421,7 +425,8 @@
421
425
  --pf-v6-c-tabs__link--before--BorderBlockStartWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
422
426
  }
423
427
  .pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item.pf-m-current {
424
- --pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs__item--m-current__link--BackgroundColor);
428
+ --pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderBlockEndColor);
429
+ --pf-v6-c-tabs__link--before--BorderInlineEndWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
425
430
  --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--before--border-color--base);
426
431
  }
427
432
  .pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:first-child.pf-m-current {
@@ -464,9 +469,8 @@
464
469
  align-items: center;
465
470
  }
466
471
 
467
- .pf-v6-c-tabs__toggle-button .pf-v6-c-button {
468
- justify-content: start;
469
- white-space: normal;
472
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__toggle-icon {
473
+ scale: -1 1;
470
474
  }
471
475
 
472
476
  .pf-v6-c-tabs__toggle-icon {
@@ -474,10 +478,10 @@
474
478
  transition: var(--pf-v6-c-tabs__toggle-icon--Transition);
475
479
  transform: rotate(var(--pf-v6-c-tabs__toggle-icon--Rotate));
476
480
  }
477
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__toggle-icon {
478
- scale: -1 1;
479
- }
480
481
 
482
+ .pf-v6-c-tabs__list::-webkit-scrollbar {
483
+ display: none;
484
+ }
481
485
  .pf-v6-c-tabs__list {
482
486
  scrollbar-width: none;
483
487
  -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -489,20 +493,17 @@
489
493
  scroll-snap-type: var(--pf-v6-c-tabs__list--ScrollSnapType);
490
494
  -webkit-overflow-scrolling: touch;
491
495
  }
492
- .pf-v6-c-tabs__list::-webkit-scrollbar {
493
- display: none;
494
- }
495
496
 
496
497
  .pf-v6-c-tabs__item {
497
498
  position: relative;
498
499
  display: flex;
499
500
  flex: none;
500
501
  column-gap: var(--pf-v6-c-tabs__item--ColumnGap);
501
- scroll-snap-align: var(--pf-v6-c-tabs__item--ScrollSnapAlign);
502
502
  padding-block-start: var(--pf-v6-c-tabs__item--PaddingBlockStart);
503
503
  padding-block-end: var(--pf-v6-c-tabs__item--PaddingBlockEnd);
504
504
  padding-inline-start: var(--pf-v6-c-tabs__item--PaddingInlineStart);
505
505
  padding-inline-end: var(--pf-v6-c-tabs__item--PaddingInlineEnd);
506
+ scroll-snap-align: var(--pf-v6-c-tabs__item--ScrollSnapAlign);
506
507
  background-color: var(--pf-v6-c-tabs__item--BackgroundColor);
507
508
  }
508
509
  .pf-v6-c-tabs__item.pf-m-current {
@@ -555,6 +556,10 @@
555
556
  border: 0;
556
557
  }
557
558
 
559
+ .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
560
+ --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
561
+ }
562
+
558
563
  .pf-v6-c-tabs__link {
559
564
  display: flex;
560
565
  flex: 1;
@@ -572,10 +577,6 @@
572
577
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
573
578
  transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
574
579
  }
575
- .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
576
- --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
577
- }
578
-
579
580
  .pf-v6-c-tabs__item.pf-m-action::before, .pf-v6-c-tabs__link::before {
580
581
  pointer-events: none;
581
582
  border-block-start-color: var(--pf-v6-c-tabs__link--before--BorderBlockStartColor);
@@ -598,6 +599,7 @@
598
599
  border-block-end-width: var(--pf-v6-c-tabs__link--after--BorderBlockEndWidth);
599
600
  border-inline-start-width: var(--pf-v6-c-tabs__link--after--BorderInlineStartWidth);
600
601
  border-inline-end-width: var(--pf-v6-c-tabs__link--after--BorderInlineEndWidth);
602
+ border-radius: var(--pf-v6-c-tabs__link--after--BorderRadius);
601
603
  }
602
604
 
603
605
  .pf-v6-c-tabs__link:where(:hover, :focus) {
@@ -630,6 +632,10 @@
630
632
  --pf-v6-c-tabs__link-toggle-icon--Rotate: var(--pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate);
631
633
  }
632
634
 
635
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__link-toggle-icon {
636
+ scale: -1 1;
637
+ }
638
+
633
639
  .pf-v6-c-tabs__link-toggle-icon {
634
640
  align-self: end;
635
641
  font-size: var(--pf-v6-c-tabs__link-toggle-icon--FontSize);
@@ -637,9 +643,6 @@
637
643
  transition: var(--pf-v6-c-tabs__link-toggle-icon--Transition);
638
644
  transform: rotate(var(--pf-v6-c-tabs__link-toggle-icon--Rotate));
639
645
  }
640
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__link-toggle-icon {
641
- scale: -1 1;
642
- }
643
646
 
644
647
  .pf-v6-c-tabs__item-action {
645
648
  display: flex;
@@ -80,7 +80,6 @@ declare const _default: {
80
80
  "tabsList": "pf-v6-c-tabs__list",
81
81
  "tabsScrollButton": "pf-v6-c-tabs__scroll-button",
82
82
  "tabsToggle": "pf-v6-c-tabs__toggle",
83
- "tabsToggleButton": "pf-v6-c-tabs__toggle-button",
84
83
  "tabsToggleIcon": "pf-v6-c-tabs__toggle-icon"
85
84
  };
86
85
  export default _default;
@@ -82,6 +82,5 @@ exports.default = {
82
82
  "tabsList": "pf-v6-c-tabs__list",
83
83
  "tabsScrollButton": "pf-v6-c-tabs__scroll-button",
84
84
  "tabsToggle": "pf-v6-c-tabs__toggle",
85
- "tabsToggleButton": "pf-v6-c-tabs__toggle-button",
86
85
  "tabsToggleIcon": "pf-v6-c-tabs__toggle-icon"
87
86
  };
@@ -80,6 +80,5 @@ export default {
80
80
  "tabsList": "pf-v6-c-tabs__list",
81
81
  "tabsScrollButton": "pf-v6-c-tabs__scroll-button",
82
82
  "tabsToggle": "pf-v6-c-tabs__toggle",
83
- "tabsToggleButton": "pf-v6-c-tabs__toggle-button",
84
83
  "tabsToggleIcon": "pf-v6-c-tabs__toggle-icon"
85
84
  };
@@ -1,6 +1,6 @@
1
1
  .pf-v6-c-text-input-group {
2
2
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
3
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
3
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
4
4
  --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
5
5
  --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
6
6
  --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
@@ -17,7 +17,7 @@
17
17
  --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
18
18
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
19
19
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
20
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
20
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
21
21
  --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
22
22
  --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
23
23
  --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
@@ -6,34 +6,41 @@
6
6
  --pf-v6-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default);
7
7
  --pf-v6-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body);
8
8
  --pf-v6-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular);
9
- --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
9
+ --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--control--default);
10
10
  --pf-v6-c-toggle-group__button--ZIndex: auto;
11
- --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
11
+ --pf-v6-c-toggle-group__button--hover--Color: var(--pf-t--global--text--color--on-brand--subtle--default);
12
+ --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--color--brand--subtle--default);
12
13
  --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
13
- --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
14
+ --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--brand--subtle--hover);
14
15
  --pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
15
16
  --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
16
- --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
17
+ --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--control--default);
17
18
  --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
18
- --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--tiny);
19
- --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--tiny);
20
- --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--tiny);
21
- --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--tiny);
19
+ --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--control--default);
20
+ --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--control--default);
21
+ --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--control--default);
22
+ --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--control--default);
22
23
  --pf-v6-c-toggle-group__icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
23
- --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
24
- --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
25
- --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
26
- --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
24
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-t--global--icon--color--regular);
25
+ --pf-v6-c-toggle-group__icon--hover--Color: var(--pf-t--global--icon--color--on-brand--subtle--default);
26
+ --pf-v6-c-toggle-group__icon--m-selected--Color: var(--pf-t--global--icon--color--on-brand--subtle--default);
27
+ --pf-v6-c-toggle-group__icon--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
28
+ --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--subtle--default);
29
+ --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--subtle--default);
30
+ --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--brand--subtle--clicked);
31
+ --pf-v6-c-toggle-group__button--m-selected--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
32
+ --pf-v6-c-toggle-group__button--m-selected--after--BorderColor: var(--pf-t--global--border--color--brand--subtle--clicked);
33
+ --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
34
+ --pf-v6-c-toggle-group__button--m-selected--selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--brand--subtle--clicked);
27
35
  --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
28
- --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
29
36
  --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
30
37
  --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
31
- --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
32
- --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
38
+ --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--control--default);
39
+ --pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--control--default);
33
40
  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
34
- --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
41
+ --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
35
42
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
36
- --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: 0;
43
+ --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
37
44
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
38
45
  --pf-v6-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
39
46
  }
@@ -48,6 +55,14 @@
48
55
  --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart);
49
56
  --pf-v6-c-toggle-group__button--FontSize: var(--pf-v6-c-toggle-group--m-compact__button--FontSize);
50
57
  }
58
+ .pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__item {
59
+ display: flex;
60
+ flex-grow: 1;
61
+ }
62
+ .pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__button {
63
+ flex-basis: 100%;
64
+ justify-content: center;
65
+ }
51
66
 
52
67
  .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
53
68
  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
@@ -97,9 +112,11 @@
97
112
  }
98
113
  .pf-v6-c-toggle-group__button:is(:hover, :focus) {
99
114
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
115
+ --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--hover--Color);
100
116
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
101
117
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
102
118
  --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--hover--after--BorderWidth);
119
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--hover--Color);
103
120
  text-decoration-line: none;
104
121
  }
105
122
  .pf-v6-c-toggle-group__button.pf-m-selected {
@@ -107,22 +124,30 @@
107
124
  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
108
125
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
109
126
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
127
+ --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderWidth);
128
+ --pf-v6-c-toggle-group__button--after--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderColor);
110
129
  --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth);
130
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--m-selected--Color);
111
131
  }
112
132
  .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
113
133
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);
114
134
  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--disabled--Color);
115
135
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--disabled--ZIndex);
116
136
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--disabled--before--BorderColor);
137
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--disabled--Color);
117
138
  pointer-events: none;
118
139
  }
119
140
 
120
141
  .pf-v6-c-toggle-group__item:has(.pf-m-selected) + .pf-v6-c-toggle-group__item:has(.pf-m-selected) {
121
- --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
142
+ --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected--selected--before--BorderInlineStartColor);
122
143
  }
123
144
 
124
145
  .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
125
- --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
146
+ --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor);
147
+ }
148
+
149
+ .pf-v6-c-toggle-group__icon {
150
+ color: var(--pf-v6-c-toggle-group__icon--Color);
126
151
  }
127
152
 
128
153
  .pf-v6-c-toggle-group__icon + .pf-v6-c-toggle-group__text,
@@ -2,6 +2,7 @@ import './toggle-group.css';
2
2
  declare const _default: {
3
3
  "modifiers": {
4
4
  "compact": "pf-m-compact",
5
+ "fill": "pf-m-fill",
5
6
  "selected": "pf-m-selected",
6
7
  "disabled": "pf-m-disabled"
7
8
  },
@@ -4,6 +4,7 @@ require('./toggle-group.css');
4
4
  exports.default = {
5
5
  "modifiers": {
6
6
  "compact": "pf-m-compact",
7
+ "fill": "pf-m-fill",
7
8
  "selected": "pf-m-selected",
8
9
  "disabled": "pf-m-disabled"
9
10
  },
@@ -2,6 +2,7 @@ import './toggle-group.css';
2
2
  export default {
3
3
  "modifiers": {
4
4
  "compact": "pf-m-compact",
5
+ "fill": "pf-m-fill",
5
6
  "selected": "pf-m-selected",
6
7
  "disabled": "pf-m-disabled"
7
8
  },
@@ -36,15 +36,33 @@
36
36
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
37
37
  --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
38
38
  --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
39
- --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
40
- --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
39
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: 0;
40
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: 0;
41
+ --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
42
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
41
43
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
42
44
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
45
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: 0;
46
+ --pf-v6-c-toolbar--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
47
+ --pf-v6-c-toolbar--m-sticky--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
48
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass: var(--pf-t--global--spacer--sm);
49
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass: var(--pf-t--global--spacer--sm);
50
+ --pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
51
+ --pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
52
+ }
53
+ :where(.pf-v6-theme-glass) .pf-v6-c-toolbar {
54
+ --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: 0;
55
+ --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow--glass);
56
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius--glass);
57
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass);
58
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass);
59
+ }
60
+ .pf-v6-c-toolbar {
43
61
  --pf-v6-c-toolbar--m-vertical--Width: fit-content;
44
62
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
45
63
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
46
64
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
47
- --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
65
+ --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: -180deg;
48
66
  --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
49
67
  --pf-v6-c-toolbar__item--m-label--FontWeight: var(--pf-t--global--font--weight--body--bold);
50
68
  --pf-v6-c-toolbar__group--m-label-group--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
@@ -66,6 +84,66 @@
66
84
  .pf-v6-c-toolbar__item.pf-m-hidden {
67
85
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
68
86
  }
87
+ @media screen and (min-height: 0) {
88
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-sm-height,
89
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-sm-height,
90
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-sm-height {
91
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
92
+ }
93
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-sm-height,
94
+ .pf-v6-c-toolbar__group.pf-m-visible-on-sm-height,
95
+ .pf-v6-c-toolbar__item.pf-m-visible-on-sm-height {
96
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
97
+ }
98
+ }
99
+ @media screen and (min-height: 40rem) {
100
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-md-height,
101
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-md-height,
102
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-md-height {
103
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
104
+ }
105
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-md-height,
106
+ .pf-v6-c-toolbar__group.pf-m-visible-on-md-height,
107
+ .pf-v6-c-toolbar__item.pf-m-visible-on-md-height {
108
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
109
+ }
110
+ }
111
+ @media screen and (min-height: 48rem) {
112
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-lg-height,
113
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-lg-height,
114
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-lg-height {
115
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
116
+ }
117
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-lg-height,
118
+ .pf-v6-c-toolbar__group.pf-m-visible-on-lg-height,
119
+ .pf-v6-c-toolbar__item.pf-m-visible-on-lg-height {
120
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
121
+ }
122
+ }
123
+ @media screen and (min-height: 60rem) {
124
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-xl-height,
125
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-xl-height,
126
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-xl-height {
127
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
128
+ }
129
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-xl-height,
130
+ .pf-v6-c-toolbar__group.pf-m-visible-on-xl-height,
131
+ .pf-v6-c-toolbar__item.pf-m-visible-on-xl-height {
132
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
133
+ }
134
+ }
135
+ @media screen and (min-height: 80rem) {
136
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-2xl-height,
137
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-2xl-height,
138
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-2xl-height {
139
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
140
+ }
141
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-2xl-height,
142
+ .pf-v6-c-toolbar__group.pf-m-visible-on-2xl-height,
143
+ .pf-v6-c-toolbar__item.pf-m-visible-on-2xl-height {
144
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
145
+ }
146
+ }
69
147
  @media screen and (min-width: 36rem) {
70
148
  .pf-v6-c-toolbar__content-section.pf-m-hidden-on-sm,
71
149
  .pf-v6-c-toolbar__group.pf-m-hidden-on-sm,
@@ -137,13 +215,50 @@
137
215
  --pf-v6-hidden-visible--hidden--Display: none;
138
216
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
139
217
  display: var(--pf-v6-hidden-visible--Display);
140
- row-gap: var(--pf-v6-c-toolbar__content--RowGap);
141
- padding-inline-start: var(--pf-v6-c-toolbar__content--PaddingInlineStart);
142
- padding-inline-end: var(--pf-v6-c-toolbar__content--PaddingInlineEnd);
143
218
  }
144
219
  .pf-v6-c-toolbar__content.pf-m-hidden {
145
220
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
146
221
  }
222
+ @media screen and (min-height: 0) {
223
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-sm-height {
224
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
225
+ }
226
+ .pf-v6-c-toolbar__content.pf-m-visible-on-sm-height {
227
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
228
+ }
229
+ }
230
+ @media screen and (min-height: 40rem) {
231
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-md-height {
232
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
233
+ }
234
+ .pf-v6-c-toolbar__content.pf-m-visible-on-md-height {
235
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
236
+ }
237
+ }
238
+ @media screen and (min-height: 48rem) {
239
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-lg-height {
240
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
241
+ }
242
+ .pf-v6-c-toolbar__content.pf-m-visible-on-lg-height {
243
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
244
+ }
245
+ }
246
+ @media screen and (min-height: 60rem) {
247
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-xl-height {
248
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
249
+ }
250
+ .pf-v6-c-toolbar__content.pf-m-visible-on-xl-height {
251
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
252
+ }
253
+ }
254
+ @media screen and (min-height: 80rem) {
255
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-2xl-height {
256
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
257
+ }
258
+ .pf-v6-c-toolbar__content.pf-m-visible-on-2xl-height {
259
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
260
+ }
261
+ }
147
262
  @media screen and (min-width: 36rem) {
148
263
  .pf-v6-c-toolbar__content.pf-m-hidden-on-sm {
149
264
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -184,6 +299,11 @@
184
299
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
185
300
  }
186
301
  }
302
+ .pf-v6-c-toolbar__content {
303
+ row-gap: var(--pf-v6-c-toolbar__content--RowGap);
304
+ padding-inline-start: var(--pf-v6-c-toolbar__content--PaddingInlineStart);
305
+ padding-inline-end: var(--pf-v6-c-toolbar__content--PaddingInlineEnd);
306
+ }
187
307
 
188
308
  .pf-v6-c-toolbar__content-section {
189
309
  flex-wrap: wrap;
@@ -211,9 +331,41 @@
211
331
  z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
212
332
  padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
213
333
  padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
334
+ padding-inline-start: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart);
335
+ padding-inline-end: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd);
214
336
  border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
337
+ border-radius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius);
215
338
  box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
216
339
  }
340
+ .pf-v6-c-toolbar.pf-m-sticky-base {
341
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
342
+ position: sticky;
343
+ inset-block-start: 0;
344
+ z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
345
+ padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
346
+ padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
347
+ padding-inline-start: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart);
348
+ padding-inline-end: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd);
349
+ background: transparent;
350
+ border-radius: inherit;
351
+ }
352
+ .pf-v6-c-toolbar.pf-m-sticky-base::before {
353
+ position: absolute;
354
+ inset: 0;
355
+ z-index: -1;
356
+ content: "";
357
+ background: var(--pf-v6-c-toolbar--BackgroundColor);
358
+ border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
359
+ border-radius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius);
360
+ box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
361
+ opacity: 0;
362
+ transition-timing-function: var(--pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor);
363
+ transition-duration: var(--pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor);
364
+ transition-property: opacity;
365
+ }
366
+ .pf-v6-c-toolbar.pf-m-sticky-stuck::before {
367
+ opacity: 1;
368
+ }
217
369
  .pf-v6-c-toolbar.pf-m-static,
218
370
  .pf-v6-c-toolbar.pf-m-static .pf-v6-c-toolbar__content {
219
371
  position: static;
@@ -257,11 +409,6 @@
257
409
 
258
410
  .pf-v6-c-toolbar__item {
259
411
  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
260
- --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth);
261
- row-gap: var(--pf-v6-c-toolbar__item--RowGap);
262
- column-gap: var(--pf-v6-c-toolbar__item--ColumnGap);
263
- width: var(--pf-v6-c-toolbar__item--Width--base);
264
- min-width: var(--pf-v6-c-toolbar__item--MinWidth--base);
265
412
  }
266
413
  @media (min-width: 36rem) {
267
414
  .pf-v6-c-toolbar__item {
@@ -288,6 +435,9 @@
288
435
  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-2xl, var(--pf-v6-c-toolbar__item--Width-on-xl, var(--pf-v6-c-toolbar__item--Width-on-lg, var(--pf-v6-c-toolbar__item--Width-on-md, var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width))))));
289
436
  }
290
437
  }
438
+ .pf-v6-c-toolbar__item {
439
+ --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth);
440
+ }
291
441
  @media (min-width: 36rem) {
292
442
  .pf-v6-c-toolbar__item {
293
443
  --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth));
@@ -313,6 +463,12 @@
313
463
  --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-2xl, var(--pf-v6-c-toolbar__item--MinWidth-on-xl, var(--pf-v6-c-toolbar__item--MinWidth-on-lg, var(--pf-v6-c-toolbar__item--MinWidth-on-md, var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth))))));
314
464
  }
315
465
  }
466
+ .pf-v6-c-toolbar__item {
467
+ row-gap: var(--pf-v6-c-toolbar__item--RowGap);
468
+ column-gap: var(--pf-v6-c-toolbar__item--ColumnGap);
469
+ width: var(--pf-v6-c-toolbar__item--Width--base);
470
+ min-width: var(--pf-v6-c-toolbar__item--MinWidth--base);
471
+ }
316
472
  .pf-v6-c-toolbar__item.pf-m-expand-all.pf-m-expanded {
317
473
  --pf-v6-c-toolbar__expand-all-icon--Rotate: var(--pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate);
318
474
  }