@patternfly/react-styles 6.0.0-alpha.26 → 6.0.0-alpha.28

Sign up to get free protection for your applications and to get access to all the features.
Files changed (105) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/css/assets/images/img_avatar-dark.svg +22 -16
  3. package/css/assets/images/img_avatar-light.svg +25 -18
  4. package/css/components/Alert/alert-group.css +55 -4
  5. package/css/components/Alert/alert-group.d.ts +5 -1
  6. package/css/components/Alert/alert-group.js +5 -1
  7. package/css/components/Alert/alert-group.mjs +5 -1
  8. package/css/components/Alert/alert.css +5 -14
  9. package/css/components/Button/button.css +44 -21
  10. package/css/components/Card/card.css +7 -7
  11. package/css/components/Card/card.d.ts +1 -0
  12. package/css/components/Card/card.js +1 -0
  13. package/css/components/Card/card.mjs +1 -0
  14. package/css/components/ClipboardCopy/clipboard-copy.css +11 -19
  15. package/css/components/ClipboardCopy/clipboard-copy.d.ts +2 -1
  16. package/css/components/ClipboardCopy/clipboard-copy.js +2 -1
  17. package/css/components/ClipboardCopy/clipboard-copy.mjs +2 -1
  18. package/css/components/Content/content.css +19 -43
  19. package/css/components/DataList/data-list.css +2 -2
  20. package/css/components/Drawer/drawer.css +6 -6
  21. package/css/components/EmptyState/empty-state.css +3 -3
  22. package/css/components/Hint/hint.css +1 -7
  23. package/css/components/InlineEdit/inline-edit.css +2 -2
  24. package/css/components/JumpLinks/jump-links.css +3 -20
  25. package/css/components/JumpLinks/jump-links.d.ts +0 -2
  26. package/css/components/JumpLinks/jump-links.js +0 -2
  27. package/css/components/JumpLinks/jump-links.mjs +0 -2
  28. package/css/components/Label/label.css +6 -6
  29. package/css/components/List/list.css +33 -40
  30. package/css/components/MenuToggle/menu-toggle.css +6 -34
  31. package/css/components/MenuToggle/menu-toggle.d.ts +0 -1
  32. package/css/components/MenuToggle/menu-toggle.js +0 -1
  33. package/css/components/MenuToggle/menu-toggle.mjs +0 -1
  34. package/css/components/ModalBox/modal-box.css +2 -0
  35. package/css/components/Nav/nav.css +1 -0
  36. package/css/components/NotificationDrawer/notification-drawer.css +1 -7
  37. package/css/components/NumberInput/number-input.css +0 -1
  38. package/css/components/Page/page.css +45 -55
  39. package/css/components/Page/page.d.ts +1 -0
  40. package/css/components/Page/page.js +1 -0
  41. package/css/components/Page/page.mjs +1 -0
  42. package/css/components/Panel/panel.css +17 -14
  43. package/css/components/Popover/popover.css +3 -5
  44. package/css/components/Switch/switch.css +0 -6
  45. package/css/components/Switch/switch.d.ts +1 -3
  46. package/css/components/Switch/switch.js +1 -3
  47. package/css/components/Switch/switch.mjs +1 -3
  48. package/css/components/Table/table-grid.css +26 -100
  49. package/css/components/Table/table-grid.d.ts +2 -1
  50. package/css/components/Table/table-grid.js +2 -1
  51. package/css/components/Table/table-grid.mjs +2 -1
  52. package/css/components/Tabs/tabs.css +1 -18
  53. package/css/components/Tabs/tabs.d.ts +1 -2
  54. package/css/components/Tabs/tabs.js +1 -2
  55. package/css/components/Tabs/tabs.mjs +1 -2
  56. package/css/components/Toolbar/toolbar.css +67 -792
  57. package/css/components/Toolbar/toolbar.d.ts +2 -110
  58. package/css/components/Toolbar/toolbar.js +2 -110
  59. package/css/components/Toolbar/toolbar.mjs +2 -110
  60. package/css/components/Truncate/truncate.css +1 -1
  61. package/css/components/Wizard/wizard.css +24 -9
  62. package/css/components/Wizard/wizard.d.ts +1 -0
  63. package/css/components/Wizard/wizard.js +1 -0
  64. package/css/components/Wizard/wizard.mjs +1 -0
  65. package/css/components/_index.css +388 -1410
  66. package/css/components/_index.d.ts +7 -130
  67. package/css/components/_index.js +7 -130
  68. package/css/components/_index.mjs +7 -130
  69. package/css/docs/components/Page/examples/Page.css +5 -9
  70. package/css/docs/components/Page/examples/Page.d.ts +2 -0
  71. package/css/docs/components/Page/examples/Page.js +2 -0
  72. package/css/docs/components/Page/examples/Page.mjs +2 -0
  73. package/css/docs/demos/Page/examples/Page.css +11 -0
  74. package/css/docs/demos/Page/examples/Page.d.ts +9 -0
  75. package/css/docs/demos/Page/examples/Page.js +10 -0
  76. package/css/docs/demos/Page/examples/Page.mjs +8 -0
  77. package/package.json +3 -3
  78. package/css/components/LogViewer/log-viewer.css +0 -176
  79. package/css/components/LogViewer/log-viewer.d.ts +0 -25
  80. package/css/components/LogViewer/log-viewer.js +0 -26
  81. package/css/components/LogViewer/log-viewer.mjs +0 -24
  82. package/css/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  83. package/css/docs/components/AppLauncher/deprecated/application-launcher.d.ts +0 -3
  84. package/css/docs/components/AppLauncher/deprecated/application-launcher.js +0 -4
  85. package/css/docs/components/AppLauncher/deprecated/application-launcher.mjs +0 -2
  86. package/css/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  87. package/css/docs/components/ContextSelector/deprecated/context-selector.d.ts +0 -3
  88. package/css/docs/components/ContextSelector/deprecated/context-selector.js +0 -4
  89. package/css/docs/components/ContextSelector/deprecated/context-selector.mjs +0 -2
  90. package/css/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  91. package/css/docs/components/Dropdown/deprecated/Dropdown.d.ts +0 -6
  92. package/css/docs/components/Dropdown/deprecated/Dropdown.js +0 -7
  93. package/css/docs/components/Dropdown/deprecated/Dropdown.mjs +0 -5
  94. package/css/docs/components/LogViewer/examples/LogViewer.css +0 -24
  95. package/css/docs/components/LogViewer/examples/LogViewer.d.ts +0 -8
  96. package/css/docs/components/LogViewer/examples/LogViewer.js +0 -9
  97. package/css/docs/components/LogViewer/examples/LogViewer.mjs +0 -7
  98. package/css/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  99. package/css/docs/components/OptionsMenu/deprecated/options-menu.d.ts +0 -3
  100. package/css/docs/components/OptionsMenu/deprecated/options-menu.js +0 -4
  101. package/css/docs/components/OptionsMenu/deprecated/options-menu.mjs +0 -2
  102. package/css/docs/components/Select/deprecated/Select.css +0 -56
  103. package/css/docs/components/Select/deprecated/Select.d.ts +0 -3
  104. package/css/docs/components/Select/deprecated/Select.js +0 -4
  105. package/css/docs/components/Select/deprecated/Select.mjs +0 -2
package/css/components/NotificationDrawer/notification-drawer.css CHANGED
@@ -44,10 +44,7 @@
44
44
  --pf-v6-c-notification-drawer__list-item-header--MarginBlockEnd: var(--pf-t--global--spacer--xs);
45
45
  --pf-v6-c-notification-drawer__list-item-header-icon--Color: inherit;
46
46
  --pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
47
- --pf-v6-c-notification-drawer__list-item-header-title--FontFamily: var(--pf-t--global--font--family--heading);
48
- --pf-v6-c-notification-drawer__list-item-header-title--FontSize: var(--pf-t--global--font--size--heading--xs);
49
- --pf-v6-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
50
- --pf-v6-c-notification-drawer__list-item-header-title--LineHeight: var(--pf-t--global--font--line-height--heading);
47
+ --pf-v6-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
51
48
  --pf-v6-c-notification-drawer__list-item-header-title--max-lines: 1;
52
49
  --pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd: var(--pf-t--global--spacer--sm);
53
50
  --pf-v6-c-notification-drawer__list-item-timestamp--Color: var(--pf-t--global--text--color--subtle);
@@ -186,10 +183,7 @@
186
183
  }
187
184
 
188
185
  .pf-v6-c-notification-drawer__list-item-header-title {
189
- font-family: var(--pf-v6-c-notification-drawer__list-item-header-title--FontFamily);
190
- font-size: var(--pf-v6-c-notification-drawer__list-item-header-title--FontSize);
191
186
  font-weight: var(--pf-v6-c-notification-drawer__list-item-header-title--FontWeight);
192
- line-height: var(--pf-v6-c-notification-drawer__list-item-header-title--LineHeight);
193
187
  word-break: break-word;
194
188
  }
195
189
  .pf-v6-c-notification-drawer__list-item-header-title.pf-m-truncate {
package/css/components/NumberInput/number-input.css CHANGED
@@ -34,6 +34,5 @@
34
34
  }
35
35
 
36
36
  .pf-v6-c-number-input__icon {
37
- display: flex;
38
37
  font-size: var(--pf-v6-c-number-input__icon--FontSize);
39
38
  }
package/css/components/Page/page.css CHANGED
@@ -28,6 +28,8 @@
28
28
  --pf-v6-c-page__sidebar-body--PaddingInlineStart: 0;
29
29
  --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineEnd: var(--pf-v6-c-page--inset);
30
30
  --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineStart: var(--pf-v6-c-page--inset);
31
+ --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
32
+ --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);
31
33
  --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs);
32
34
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
33
35
  --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
@@ -36,11 +38,11 @@
36
38
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
37
39
  --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--spacer--sm);
38
40
  --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
39
- --pf-v6-c-page__main-section--MarginBlockStart: var(--pf-t--global--spacer--md);
40
- --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--lg);
41
- --pf-v6-c-page__main-section--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
42
- --pf-v6-c-page__main-section--PaddingBlockEnd: 0;
43
- --pf-v6-c-page__main-section--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
41
+ --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
42
+ --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
43
+ --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
44
+ --pf-v6-c-page__main-section--PaddingInlineStart: var(--pf-t--global--spacer--lg);
45
+ --pf-v6-c-page__main-section--RowGap: var(--pf-t--global--spacer--lg);
44
46
  --pf-v6-c-page__main-breadcrumb--main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
45
47
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
46
48
  --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -75,10 +77,11 @@
75
77
  --pf-v6-c-page__main-tabs--PaddingBlockStart: 0;
76
78
  --pf-v6-c-page__main-tabs--PaddingInlineEnd: 0;
77
79
  --pf-v6-c-page__main-tabs--PaddingBlockEnd: 0;
80
+ --pf-v6-c-page__main-tabs--PaddingInlineStart: 0;
78
81
  --pf-v6-c-page__main-tabs--BackgroundColor: var(--pf-t--global--background--color--primary--default);
79
82
  --pf-v6-c-page__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
80
83
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
81
- --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--button--default);
84
+ --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
82
85
  }
83
86
  @media (min-width: 1200px) {
84
87
  :where(:root, .pf-v6-c-page) {
@@ -175,6 +178,10 @@
175
178
  --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineEnd);
176
179
  --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineStart);
177
180
  }
181
+ .pf-v6-c-page__sidebar-body.pf-m-context-selector {
182
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd);
183
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart);
184
+ }
178
185
  .pf-v6-c-page__sidebar-body.pf-m-inset-none {
179
186
  --pf-v6-c-page__sidebar-body--PaddingInlineEnd: 0;
180
187
  --pf-v6-c-page__sidebar-body--PaddingInlineStart: 0;
@@ -186,21 +193,11 @@
186
193
  flex-grow: 0;
187
194
  }
188
195
 
189
- .pf-v6-c-page__main-nav.pf-m-limit-width,
190
- .pf-v6-c-page__main-breadcrumb.pf-m-limit-width,
191
- .pf-v6-c-page__main-tabs.pf-m-limit-width,
192
- .pf-v6-c-page__main-section.pf-m-limit-width,
193
- .pf-v6-c-page__main-wizard.pf-m-limit-width {
194
- display: flex;
195
- flex-direction: column;
196
- padding: 0;
197
- }
198
196
  .pf-v6-c-page__main-nav.pf-m-limit-width > .pf-v6-c-page__main-body,
199
197
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
200
198
  .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
201
199
  .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
202
200
  .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
203
- flex: 1;
204
201
  max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
205
202
  }
206
203
  .pf-v6-c-page__main-nav.pf-m-limit-width.pf-m-align-center,
@@ -225,6 +222,8 @@
225
222
  .pf-v6-c-page__main-wizard,
226
223
  .pf-v6-c-page__main-group,
227
224
  .pf-v6-c-page__main-subnav {
225
+ display: flex;
226
+ flex-direction: column;
228
227
  flex-shrink: 0;
229
228
  }
230
229
  .pf-v6-c-page__main-nav.pf-m-overflow-scroll,
@@ -445,6 +444,7 @@
445
444
  .pf-v6-c-page__main-list {
446
445
  display: flex;
447
446
  flex-direction: column;
447
+ flex-grow: 1;
448
448
  }
449
449
 
450
450
  .pf-v6-c-page__main-nav {
@@ -559,10 +559,11 @@
559
559
  }
560
560
 
561
561
  .pf-v6-c-page__main-section {
562
+ gap: var(--pf-v6-c-page__main-section--RowGap);
562
563
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
563
564
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
564
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
565
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
565
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
566
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
566
567
  background-color: var(--pf-v6-c-page__main-section--BackgroundColor);
567
568
  }
568
569
  .pf-v6-c-page__main-section.pf-m-secondary {
@@ -571,8 +572,8 @@
571
572
  .pf-v6-c-page__main-section.pf-m-padding {
572
573
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
573
574
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
574
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
575
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
575
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
576
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
576
577
  }
577
578
  .pf-v6-c-page__main-section.pf-m-padding.pf-m-limit-width {
578
579
  padding: 0;
@@ -580,8 +581,8 @@
580
581
  .pf-v6-c-page__main-section.pf-m-padding.pf-m-limit-width .pf-v6-c-page__main-body {
581
582
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
582
583
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
583
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
584
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
584
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
585
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
585
586
  }
586
587
  .pf-v6-c-page__main-section.pf-m-no-padding, .pf-v6-c-page__main-section.pf-m-no-padding.pf-m-limit-width .pf-v6-c-page__main-body {
587
588
  padding: 0;
@@ -590,8 +591,8 @@
590
591
  .pf-v6-c-page__main-section.pf-m-padding-on-sm {
591
592
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
592
593
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
593
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
594
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
594
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
595
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
595
596
  }
596
597
  .pf-v6-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width {
597
598
  padding: 0;
@@ -599,8 +600,8 @@
599
600
  .pf-v6-c-page__main-section.pf-m-padding-on-sm.pf-m-limit-width .pf-v6-c-page__main-body {
600
601
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
601
602
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
602
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
603
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
603
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
604
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
604
605
  }
605
606
  .pf-v6-c-page__main-section.pf-m-no-padding-on-sm, .pf-v6-c-page__main-section.pf-m-no-padding-on-sm.pf-m-limit-width .pf-v6-c-page__main-body {
606
607
  padding: 0;
@@ -610,8 +611,8 @@
610
611
  .pf-v6-c-page__main-section.pf-m-padding-on-md {
611
612
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
612
613
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
613
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
614
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
614
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
615
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
615
616
  }
616
617
  .pf-v6-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width {
617
618
  padding: 0;
@@ -619,8 +620,8 @@
619
620
  .pf-v6-c-page__main-section.pf-m-padding-on-md.pf-m-limit-width .pf-v6-c-page__main-body {
620
621
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
621
622
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
622
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
623
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
623
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
624
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
624
625
  }
625
626
  .pf-v6-c-page__main-section.pf-m-no-padding-on-md, .pf-v6-c-page__main-section.pf-m-no-padding-on-md.pf-m-limit-width .pf-v6-c-page__main-body {
626
627
  padding: 0;
@@ -630,8 +631,8 @@
630
631
  .pf-v6-c-page__main-section.pf-m-padding-on-lg {
631
632
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
632
633
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
633
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
634
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
634
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
635
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
635
636
  }
636
637
  .pf-v6-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width {
637
638
  padding: 0;
@@ -639,8 +640,8 @@
639
640
  .pf-v6-c-page__main-section.pf-m-padding-on-lg.pf-m-limit-width .pf-v6-c-page__main-body {
640
641
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
641
642
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
642
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
643
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
643
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
644
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
644
645
  }
645
646
  .pf-v6-c-page__main-section.pf-m-no-padding-on-lg, .pf-v6-c-page__main-section.pf-m-no-padding-on-lg.pf-m-limit-width .pf-v6-c-page__main-body {
646
647
  padding: 0;
@@ -650,8 +651,8 @@
650
651
  .pf-v6-c-page__main-section.pf-m-padding-on-xl {
651
652
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
652
653
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
653
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
654
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
654
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
655
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
655
656
  }
656
657
  .pf-v6-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width {
657
658
  padding: 0;
@@ -659,8 +660,8 @@
659
660
  .pf-v6-c-page__main-section.pf-m-padding-on-xl.pf-m-limit-width .pf-v6-c-page__main-body {
660
661
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
661
662
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
662
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
663
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
663
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
664
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
664
665
  }
665
666
  .pf-v6-c-page__main-section.pf-m-no-padding-on-xl, .pf-v6-c-page__main-section.pf-m-no-padding-on-xl.pf-m-limit-width .pf-v6-c-page__main-body {
666
667
  padding: 0;
@@ -670,8 +671,8 @@
670
671
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl {
671
672
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
672
673
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
673
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
674
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
674
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
675
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
675
676
  }
676
677
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width {
677
678
  padding: 0;
@@ -679,8 +680,8 @@
679
680
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl.pf-m-limit-width .pf-v6-c-page__main-body {
680
681
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
681
682
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
682
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
683
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
683
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
684
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
684
685
  }
685
686
  .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl, .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl.pf-m-limit-width .pf-v6-c-page__main-body {
686
687
  padding: 0;
@@ -706,25 +707,14 @@
706
707
  }
707
708
 
708
709
  .pf-v6-c-page__main-nav .pf-v6-c-page__main-body {
709
- padding-block-start: var(--pf-v6-c-page__main-nav--PaddingBlockStart);
710
710
  padding-inline-start: var(--pf-v6-c-page__main-nav--PaddingInlineStart);
711
711
  padding-inline-end: var(--pf-v6-c-page__main-nav--PaddingInlineEnd);
712
712
  }
713
713
  .pf-v6-c-page__main-breadcrumb .pf-v6-c-page__main-body {
714
- padding-block-start: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockStart);
715
- padding-block-end: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockEnd);
716
- padding-inline-start: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineStart);
717
- padding-inline-end: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineEnd);
718
- }
719
- .pf-v6-c-page__main-section .pf-v6-c-page__main-body {
720
- padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
721
- padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
722
- padding-inline-start: var(--pf-v6-c-page__main-section--PaddingInlineStart);
723
- padding-inline-end: var(--pf-v6-c-page__main-section--PaddingInlineEnd);
714
+ padding-inline-start: 0;
715
+ padding-inline-end: 0;
724
716
  }
725
717
  .pf-v6-c-page__main-tabs .pf-v6-c-page__main-body {
726
- padding-block-start: var(--pf-v6-c-page__main-tabs--PaddingBlockStart);
727
- padding-block-end: var(--pf-v6-c-page__main-tabs--PaddingBlockEnd);
728
718
  padding-inline-start: var(--pf-v6-c-page__main-tabs--PaddingInlineStart);
729
719
  padding-inline-end: var(--pf-v6-c-page__main-tabs--PaddingInlineEnd);
730
720
  }
package/css/components/Page/page.d.ts CHANGED
@@ -7,6 +7,7 @@ declare const _default: {
7
7
  "expanded": "pf-m-expanded",
8
8
  "collapsed": "pf-m-collapsed",
9
9
  "pageInsets": "pf-m-page-insets",
10
+ "contextSelector": "pf-m-context-selector",
10
11
  "insetNone": "pf-m-inset-none",
11
12
  "fill": "pf-m-fill",
12
13
  "noFill": "pf-m-no-fill",
package/css/components/Page/page.js CHANGED
@@ -9,6 +9,7 @@ exports.default = {
9
9
  "expanded": "pf-m-expanded",
10
10
  "collapsed": "pf-m-collapsed",
11
11
  "pageInsets": "pf-m-page-insets",
12
+ "contextSelector": "pf-m-context-selector",
12
13
  "insetNone": "pf-m-inset-none",
13
14
  "fill": "pf-m-fill",
14
15
  "noFill": "pf-m-no-fill",
package/css/components/Page/page.mjs CHANGED
@@ -7,6 +7,7 @@ export default {
7
7
  "expanded": "pf-m-expanded",
8
8
  "collapsed": "pf-m-collapsed",
9
9
  "pageInsets": "pf-m-page-insets",
10
+ "contextSelector": "pf-m-context-selector",
10
11
  "insetNone": "pf-m-inset-none",
11
12
  "fill": "pf-m-fill",
12
13
  "noFill": "pf-m-no-fill",
package/css/components/Panel/panel.css CHANGED
@@ -2,43 +2,44 @@
2
2
  --pf-v6-c-panel--Width: auto;
3
3
  --pf-v6-c-panel--MinWidth: auto;
4
4
  --pf-v6-c-panel--MaxWidth: none;
5
- --pf-v6-c-panel--ZIndex: auto;
6
5
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
7
6
  --pf-v6-c-panel--BoxShadow: none;
7
+ --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--small);
8
8
  --pf-v6-c-panel--before--BorderWidth: 0;
9
9
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
10
10
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11
- --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
11
+ --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
12
12
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
13
- --pf-v6-c-panel--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
14
13
  --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
15
14
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
16
- --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
15
+ --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
17
16
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18
- --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
17
+ --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
19
18
  --pf-v6-c-panel__main--MaxHeight: none;
20
19
  --pf-v6-c-panel__main--Overflow: visible;
21
20
  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
22
- --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
21
+ --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
23
22
  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
24
- --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--md);
25
- --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
26
- --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
27
- --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
28
- --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
23
+ --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
24
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
25
+ --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
26
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
27
+ --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
29
28
  --pf-v6-c-panel__footer--BoxShadow: none;
30
29
  --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
31
30
  --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
32
- --pf-v6-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
31
+ --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
32
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
33
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
33
34
  }
34
35
 
35
36
  .pf-v6-c-panel {
36
37
  position: relative;
37
- z-index: var(--pf-v6-c-panel--ZIndex);
38
38
  width: var(--pf-v6-c-panel--Width);
39
39
  min-width: var(--pf-v6-c-panel--MinWidth);
40
40
  max-width: var(--pf-v6-c-panel--MaxWidth);
41
41
  background-color: var(--pf-v6-c-panel--BackgroundColor);
42
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
42
43
  box-shadow: var(--pf-v6-c-panel--BoxShadow);
43
44
  }
44
45
  .pf-v6-c-panel::before {
@@ -47,6 +48,7 @@
47
48
  pointer-events: none;
48
49
  content: "";
49
50
  border: var(--pf-v6-c-panel--before--BorderWidth) solid var(--pf-v6-c-panel--before--BorderColor);
51
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
50
52
  }
51
53
  .pf-v6-c-panel.pf-m-bordered {
52
54
  --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-bordered--before--BorderWidth);
@@ -57,12 +59,13 @@
57
59
  .pf-v6-c-panel.pf-m-raised {
58
60
  --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-raised--BackgroundColor);
59
61
  --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-raised--BoxShadow);
60
- --pf-v6-c-panel--ZIndex: var(--pf-v6-c-panel--m-raised--ZIndex);
61
62
  }
62
63
  .pf-v6-c-panel.pf-m-scrollable {
63
64
  --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
64
65
  --pf-v6-c-panel__main--Overflow: var(--pf-v6-c-panel--m-scrollable__main--Overflow);
65
66
  --pf-v6-c-panel__footer--BoxShadow: var(--pf-v6-c-panel--m-scrollable__footer--BoxShadow);
67
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart);
68
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd);
66
69
  }
67
70
 
68
71
  .pf-v6-c-panel__header {
package/css/components/Popover/popover.css CHANGED
@@ -35,17 +35,16 @@
35
35
  --pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd: var(--pf-t--global--border--radius--medium);
36
36
  --pf-v6-c-popover__arrow--m-block-left--InsetInlineStart: var(--pf-t--global--border--radius--medium);
37
37
  --pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd: var(--pf-t--global--border--radius--medium);
38
- --pf-v6-c-popover__close--InsetBlockStart: calc(var(--pf-v6-c-popover__content--PaddingBlockStart) - (var(--pf-t--global--spacer--control--vertical--compact) * 1.5));
38
+ --pf-v6-c-popover__close--InsetBlockStart: calc(var(--pf-v6-c-popover__content--PaddingBlockStart) - var(--pf-t--global--spacer--control--vertical--default));
39
39
  --pf-v6-c-popover__close--InsetInlineEnd: var(--pf-v6-c-popover__content--PaddingInlineEnd);
40
40
  --pf-v6-c-popover__close--sibling--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
41
41
  --pf-v6-c-popover__header--MarginBlockEnd: var(--pf-t--global--spacer--sm);
42
42
  --pf-v6-c-popover__title-text--Color: var(--pf-t--global--text--color--regular);
43
- --pf-v6-c-popover__title-text--FontFamily: var(--pf-t--global--font--family--body);
44
- --pf-v6-c-popover__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
45
43
  --pf-v6-c-popover__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
44
+ --pf-v6-c-popover__title-text--FontSize: var(--pf-t--global--font--size--body--default);
46
45
  --pf-v6-c-popover__title-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
47
46
  --pf-v6-c-popover__title-icon--Color: var(--pf-t--global--icon--color--regular);
48
- --pf-v6-c-popover__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
47
+ --pf-v6-c-popover__title-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
49
48
  --pf-v6-c-popover__footer--MarginBlockStart: var(--pf-t--global--spacer--md);
50
49
  }
51
50
 
@@ -188,7 +187,6 @@
188
187
  }
189
188
 
190
189
  .pf-v6-c-popover__title-text {
191
- font-family: var(--pf-v6-c-popover__title-text--FontFamily);
192
190
  font-size: var(--pf-v6-c-popover__title-text--FontSize);
193
191
  font-weight: var(--pf-v6-c-popover__title-text--FontWeight);
194
192
  color: var(--pf-v6-c-popover__title-text--Color);
package/css/components/Switch/switch.css CHANGED
@@ -78,18 +78,12 @@
78
78
  transform: translate(calc(var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), -50%);
79
79
  }
80
80
 
81
- .pf-v6-c-switch__input:checked ~ .pf-m-off {
82
- display: none;
83
- }
84
81
  .pf-v6-c-switch__input:not(:checked) ~ .pf-v6-c-switch__label {
85
82
  color: var(--pf-v6-c-switch__input--not-checked__label--Color);
86
83
  }
87
84
  .pf-v6-c-switch__input:not(:checked) ~ .pf-v6-c-switch__toggle .pf-v6-c-switch__toggle-icon {
88
85
  display: none;
89
86
  }
90
- .pf-v6-c-switch__input:not(:checked) ~ .pf-m-on {
91
- display: none;
92
- }
93
87
  .pf-v6-c-switch__input:disabled {
94
88
  cursor: not-allowed;
95
89
  }
package/css/components/Switch/switch.d.ts CHANGED
@@ -2,9 +2,7 @@ import './switch.css';
2
2
  declare const _default: {
3
3
  "dirRtl": "pf-v6-m-dir-rtl",
4
4
  "modifiers": {
5
- "reverse": "pf-m-reverse",
6
- "off": "pf-m-off",
7
- "on": "pf-m-on"
5
+ "reverse": "pf-m-reverse"
8
6
  },
9
7
  "switch": "pf-v6-c-switch",
10
8
  "switchInput": "pf-v6-c-switch__input",
package/css/components/Switch/switch.js CHANGED
@@ -4,9 +4,7 @@ require('./switch.css');
4
4
  exports.default = {
5
5
  "dirRtl": "pf-v6-m-dir-rtl",
6
6
  "modifiers": {
7
- "reverse": "pf-m-reverse",
8
- "off": "pf-m-off",
9
- "on": "pf-m-on"
7
+ "reverse": "pf-m-reverse"
10
8
  },
11
9
  "switch": "pf-v6-c-switch",
12
10
  "switchInput": "pf-v6-c-switch__input",
package/css/components/Switch/switch.mjs CHANGED
@@ -2,9 +2,7 @@ import './switch.css';
2
2
  export default {
3
3
  "dirRtl": "pf-v6-m-dir-rtl",
4
4
  "modifiers": {
5
- "reverse": "pf-m-reverse",
6
- "off": "pf-m-off",
7
- "on": "pf-m-on"
5
+ "reverse": "pf-m-reverse"
8
6
  },
9
7
  "switch": "pf-v6-c-switch",
10
8
  "switchInput": "pf-v6-c-switch__input",