@patternfly/patternfly 6.0.0-alpha.164 → 6.0.0-alpha.166

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 (89) hide show
  1. package/components/Button/button.css +33 -14
  2. package/components/Button/button.scss +36 -14
  3. package/components/Panel/panel.css +17 -14
  4. package/components/Panel/panel.scss +17 -14
  5. package/components/_index.css +50 -28
  6. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  7. package/docs/components/ActionList/examples/ActionList.md +60 -20
  8. package/docs/components/Alert/examples/Alert.md +106 -62
  9. package/docs/components/BackToTop/examples/BackToTop.md +5 -3
  10. package/docs/components/Banner/examples/Banner.md +9 -3
  11. package/docs/components/Button/examples/Button.md +536 -367
  12. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  13. package/docs/components/Card/examples/Card.md +43 -29
  14. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +75 -33
  15. package/docs/components/CodeBlock/examples/CodeBlock.md +18 -6
  16. package/docs/components/CodeEditor/examples/CodeEditor.md +44 -22
  17. package/docs/components/ContextSelector/deprecated/context-selector.md +6 -8
  18. package/docs/components/DataList/examples/DataList.md +121 -63
  19. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  20. package/docs/components/DescriptionList/examples/DescriptionList.md +125 -75
  21. package/docs/components/Drawer/examples/Drawer.md +57 -19
  22. package/docs/components/DualListSelector/examples/DualListSelector.md +204 -100
  23. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  24. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  25. package/docs/components/Form/examples/Form.md +53 -19
  26. package/docs/components/Hint/examples/Hint.md +9 -9
  27. package/docs/components/InlineEdit/examples/InlineEdit.md +78 -26
  28. package/docs/components/InputGroup/examples/InputGroup.md +27 -9
  29. package/docs/components/JumpLinks/examples/JumpLinks.md +188 -68
  30. package/docs/components/Label/examples/Label.md +651 -217
  31. package/docs/components/LogViewer/examples/LogViewer.md +218 -86
  32. package/docs/components/Login/examples/Login.md +346 -282
  33. package/docs/components/Masthead/examples/masthead.md +27 -9
  34. package/docs/components/Menu/examples/Menu.md +35 -25
  35. package/docs/components/MenuToggle/examples/MenuToggle.md +3 -1
  36. package/docs/components/ModalBox/examples/ModalBox.md +48 -16
  37. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +48 -16
  38. package/docs/components/Nav/examples/Navigation.md +12 -4
  39. package/docs/components/NotificationBadge/examples/NotificationBadge.md +78 -42
  40. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +6 -2
  41. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  42. package/docs/components/OverflowMenu/examples/overflow-menu.md +48 -16
  43. package/docs/components/Page/examples/Page.md +21 -7
  44. package/docs/components/Pagination/examples/Pagination.md +132 -44
  45. package/docs/components/Panel/examples/Panel.md +1 -0
  46. package/docs/components/Popover/examples/Popover.md +45 -15
  47. package/docs/components/Select/deprecated/Select.md +111 -55
  48. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  49. package/docs/components/Slider/examples/Slider.md +12 -4
  50. package/docs/components/Table/examples/Table.md +363 -208
  51. package/docs/components/Tabs/examples/Tabs.md +1230 -574
  52. package/docs/components/TextInputGroup/examples/TextInputGroup.md +132 -44
  53. package/docs/components/Toolbar/examples/Toolbar.md +120 -64
  54. package/docs/components/TreeView/examples/TreeView.md +12 -4
  55. package/docs/components/Wizard/examples/Wizard.md +105 -38
  56. package/docs/demos/AboutModal/examples/AboutModal.md +9 -3
  57. package/docs/demos/Alert/examples/Alert.md +39 -25
  58. package/docs/demos/BackToTop/examples/BackToTop.md +11 -5
  59. package/docs/demos/Banner/examples/Banner.md +12 -4
  60. package/docs/demos/Button/examples/Button.md +7 -7
  61. package/docs/demos/Card/examples/Card.md +106 -57
  62. package/docs/demos/CardView/examples/CardView.md +30 -13
  63. package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -8
  64. package/docs/demos/Dashboard/examples/Dashboard.md +43 -28
  65. package/docs/demos/DataList/examples/DataList.md +255 -149
  66. package/docs/demos/DescriptionList/examples/DescriptionList.md +21 -7
  67. package/docs/demos/Drawer/examples/Drawer.md +89 -43
  68. package/docs/demos/Form/examples/BasicForms.md +141 -59
  69. package/docs/demos/JumpLinks/examples/JumpLinks.md +222 -109
  70. package/docs/demos/Masthead/examples/Masthead.md +63 -21
  71. package/docs/demos/Modal/examples/Modal.md +99 -37
  72. package/docs/demos/Nav/examples/Nav.md +45 -15
  73. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +58 -43
  74. package/docs/demos/Page/examples/Page.md +54 -21
  75. package/docs/demos/Page/examples/Penta.md +9 -6
  76. package/docs/demos/Panel/Panel.md +88 -0
  77. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  78. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +12 -4
  79. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +306 -133
  80. package/docs/demos/Skeleton/examples/Skeleton.md +6 -2
  81. package/docs/demos/Table/examples/Table.md +474 -210
  82. package/docs/demos/Tabs/examples/Tabs.md +60 -22
  83. package/docs/demos/Toolbar/examples/Toolbar.md +123 -72
  84. package/docs/demos/Wizard/examples/Wizard.md +179 -110
  85. package/package.json +1 -1
  86. package/patternfly-no-globals.css +50 -28
  87. package/patternfly.css +50 -28
  88. package/patternfly.min.css +1 -1
  89. package/patternfly.min.css.map +1 -1
package/patternfly-no-globals.css CHANGED
@@ -7398,7 +7398,10 @@ button.pf-v6-c-breadcrumb__link {
7398
7398
  }
7399
7399
 
7400
7400
  :where(:root, .pf-v6-c-button) {
7401
- --pf-v6-c-button--Display: inline-block;
7401
+ --pf-v6-c-button--Display: inline-flex;
7402
+ --pf-v6-c-button--AlignItems: baseline;
7403
+ --pf-v6-c-button--JustifyContent: center;
7404
+ --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
7402
7405
  --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
7403
7406
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
7404
7407
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -7479,6 +7482,7 @@ button.pf-v6-c-breadcrumb__link {
7479
7482
  --pf-v6-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
7480
7483
  --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
7481
7484
  --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
7485
+ --pf-v6-c-button--m-link--m-inline--Display: inline-flex;
7482
7486
  --pf-v6-c-button--m-link--m-inline--FontSize: initial;
7483
7487
  --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
7484
7488
  --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
@@ -7491,6 +7495,9 @@ button.pf-v6-c-breadcrumb__link {
7491
7495
  --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
7492
7496
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
7493
7497
  --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
7498
+ --pf-v6-c-button--span--m-link--m-inline--Display: inline;
7499
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
7500
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
7494
7501
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
7495
7502
  --pf-v6-c-button--m-plain--PaddingBlockStart: var(--pf-t--global--spacer--sm);
7496
7503
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -7503,7 +7510,8 @@ button.pf-v6-c-breadcrumb__link {
7503
7510
  --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
7504
7511
  --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
7505
7512
  --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
7506
- --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
7513
+ --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
7514
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
7507
7515
  --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
7508
7516
  --pf-v6-c-button--m-plain--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
7509
7517
  --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -7598,8 +7606,10 @@ button.pf-v6-c-breadcrumb__link {
7598
7606
  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
7599
7607
  --pf-v6-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
7600
7608
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
7601
- --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
7602
- --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
7609
+ --pf-v6-c-button__icon--MarginInlineStart: 0;
7610
+ --pf-v6-c-button__icon--MarginInlineEnd: 0;
7611
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
7612
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
7603
7613
  --pf-v6-c-button__progress--width: calc(var(--pf-v6-c-spinner--m-md--diameter) + var(--pf-t--global--spacer--sm));
7604
7614
  --pf-v6-c-button__progress--Opacity: 0;
7605
7615
  --pf-v6-c-button__progress--TranslateY: -50%;
@@ -7614,16 +7624,17 @@ button.pf-v6-c-breadcrumb__link {
7614
7624
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
7615
7625
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
7616
7626
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
7617
- --pf-v6-c-button__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
7618
7627
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
7628
+ --pf-v6-c-button--m-block--Display: flex;
7629
+ --pf-v6-c-button--m-block--Width: 100%;
7619
7630
  }
7620
7631
 
7621
7632
  .pf-v6-c-button {
7622
7633
  position: relative;
7623
7634
  display: var(--pf-v6-c-button--Display);
7624
- flex: var(--pf-v6-c-button--Flex, initial);
7625
- align-items: var(--pf-v6-c-button--AlignItems, initial);
7626
- justify-content: var(--pf-v6-c-button--JustifyContent, initial);
7635
+ gap: var(--pf-v6-c-button--Gap);
7636
+ align-items: var(--pf-v6-c-button--AlignItems);
7637
+ justify-content: var(--pf-v6-c-button--JustifyContent);
7627
7638
  padding-block-start: var(--pf-v6-c-button--PaddingBlockStart);
7628
7639
  padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd);
7629
7640
  padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart);
@@ -7722,6 +7733,7 @@ button.pf-v6-c-breadcrumb__link {
7722
7733
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color);
7723
7734
  }
7724
7735
  .pf-v6-c-button.pf-m-link.pf-m-inline {
7736
+ --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
7725
7737
  --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize);
7726
7738
  --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight);
7727
7739
  --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight);
@@ -7737,11 +7749,16 @@ button.pf-v6-c-breadcrumb__link {
7737
7749
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
7738
7750
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color);
7739
7751
  --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color);
7740
- display: inline;
7741
7752
  text-align: start;
7742
7753
  white-space: normal;
7743
7754
  outline-offset: 0.125rem;
7744
7755
  }
7756
+ span.pf-v6-c-button.pf-m-link.pf-m-inline {
7757
+ --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
7758
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
7759
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
7760
+ }
7761
+
7745
7762
  .pf-v6-c-button.pf-m-link.pf-m-danger {
7746
7763
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
7747
7764
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -7847,6 +7864,7 @@ button.pf-v6-c-breadcrumb__link {
7847
7864
  --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-plain--m-clicked--Color);
7848
7865
  --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
7849
7866
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color);
7867
+ --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-plain--disabled__icon--Color);
7850
7868
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
7851
7869
  --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-small--PaddingBlockStart);
7852
7870
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
@@ -7865,8 +7883,8 @@ button.pf-v6-c-breadcrumb__link {
7865
7883
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
7866
7884
  }
7867
7885
  .pf-v6-c-button.pf-m-block {
7868
- display: block;
7869
- width: 100%;
7886
+ --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
7887
+ width: var(--pf-v6-c-button--m-block--Width);
7870
7888
  }
7871
7889
  .pf-v6-c-button.pf-m-small {
7872
7890
  --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
@@ -7933,13 +7951,15 @@ button.pf-v6-c-breadcrumb__link {
7933
7951
  }
7934
7952
 
7935
7953
  .pf-v6-c-button__icon {
7954
+ margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
7955
+ margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
7936
7956
  color: var(--pf-v6-c-button__icon--Color);
7937
7957
  }
7938
7958
  .pf-v6-c-button__icon.pf-m-start {
7939
- margin-inline-end: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
7959
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
7940
7960
  }
7941
7961
  .pf-v6-c-button__icon.pf-m-end {
7942
- margin-inline-start: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
7962
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
7943
7963
  }
7944
7964
 
7945
7965
  .pf-v6-c-button__progress {
@@ -7957,7 +7977,6 @@ button.pf-v6-c-breadcrumb__link {
7957
7977
  .pf-v6-c-button__count {
7958
7978
  display: inline-flex;
7959
7979
  align-items: center;
7960
- margin-inline-start: var(--pf-v6-c-button__count--MarginInlineStart);
7961
7980
  }
7962
7981
 
7963
7982
  :where(:root, .pf-v6-c-calendar-month) {
@@ -18581,43 +18600,44 @@ ul.pf-v6-c-list {
18581
18600
  --pf-v6-c-panel--Width: auto;
18582
18601
  --pf-v6-c-panel--MinWidth: auto;
18583
18602
  --pf-v6-c-panel--MaxWidth: none;
18584
- --pf-v6-c-panel--ZIndex: auto;
18585
18603
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
18586
18604
  --pf-v6-c-panel--BoxShadow: none;
18605
+ --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--small);
18587
18606
  --pf-v6-c-panel--before--BorderWidth: 0;
18588
18607
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
18589
18608
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
18590
- --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
18609
+ --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
18591
18610
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
18592
- --pf-v6-c-panel--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
18593
18611
  --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
18594
18612
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
18595
- --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18613
+ --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18596
18614
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18597
- --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
18615
+ --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18598
18616
  --pf-v6-c-panel__main--MaxHeight: none;
18599
18617
  --pf-v6-c-panel__main--Overflow: visible;
18600
18618
  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
18601
- --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18619
+ --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18602
18620
  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18603
- --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--md);
18604
- --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
18605
- --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18606
- --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18607
- --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
18621
+ --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18622
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
18623
+ --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18624
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
18625
+ --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18608
18626
  --pf-v6-c-panel__footer--BoxShadow: none;
18609
18627
  --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
18610
18628
  --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
18611
- --pf-v6-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
18629
+ --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
18630
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
18631
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18612
18632
  }
18613
18633
 
18614
18634
  .pf-v6-c-panel {
18615
18635
  position: relative;
18616
- z-index: var(--pf-v6-c-panel--ZIndex);
18617
18636
  width: var(--pf-v6-c-panel--Width);
18618
18637
  min-width: var(--pf-v6-c-panel--MinWidth);
18619
18638
  max-width: var(--pf-v6-c-panel--MaxWidth);
18620
18639
  background-color: var(--pf-v6-c-panel--BackgroundColor);
18640
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
18621
18641
  box-shadow: var(--pf-v6-c-panel--BoxShadow);
18622
18642
  }
18623
18643
  .pf-v6-c-panel::before {
@@ -18626,6 +18646,7 @@ ul.pf-v6-c-list {
18626
18646
  pointer-events: none;
18627
18647
  content: "";
18628
18648
  border: var(--pf-v6-c-panel--before--BorderWidth) solid var(--pf-v6-c-panel--before--BorderColor);
18649
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
18629
18650
  }
18630
18651
  .pf-v6-c-panel.pf-m-bordered {
18631
18652
  --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-bordered--before--BorderWidth);
@@ -18636,12 +18657,13 @@ ul.pf-v6-c-list {
18636
18657
  .pf-v6-c-panel.pf-m-raised {
18637
18658
  --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-raised--BackgroundColor);
18638
18659
  --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-raised--BoxShadow);
18639
- --pf-v6-c-panel--ZIndex: var(--pf-v6-c-panel--m-raised--ZIndex);
18640
18660
  }
18641
18661
  .pf-v6-c-panel.pf-m-scrollable {
18642
18662
  --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
18643
18663
  --pf-v6-c-panel__main--Overflow: var(--pf-v6-c-panel--m-scrollable__main--Overflow);
18644
18664
  --pf-v6-c-panel__footer--BoxShadow: var(--pf-v6-c-panel--m-scrollable__footer--BoxShadow);
18665
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart);
18666
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd);
18645
18667
  }
18646
18668
 
18647
18669
  .pf-v6-c-panel__header {
package/patternfly.css CHANGED
@@ -7519,7 +7519,10 @@ button.pf-v6-c-breadcrumb__link {
7519
7519
  }
7520
7520
 
7521
7521
  :where(:root, .pf-v6-c-button) {
7522
- --pf-v6-c-button--Display: inline-block;
7522
+ --pf-v6-c-button--Display: inline-flex;
7523
+ --pf-v6-c-button--AlignItems: baseline;
7524
+ --pf-v6-c-button--JustifyContent: center;
7525
+ --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
7523
7526
  --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
7524
7527
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
7525
7528
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -7600,6 +7603,7 @@ button.pf-v6-c-breadcrumb__link {
7600
7603
  --pf-v6-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
7601
7604
  --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
7602
7605
  --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
7606
+ --pf-v6-c-button--m-link--m-inline--Display: inline-flex;
7603
7607
  --pf-v6-c-button--m-link--m-inline--FontSize: initial;
7604
7608
  --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
7605
7609
  --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
@@ -7612,6 +7616,9 @@ button.pf-v6-c-breadcrumb__link {
7612
7616
  --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
7613
7617
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
7614
7618
  --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
7619
+ --pf-v6-c-button--span--m-link--m-inline--Display: inline;
7620
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
7621
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
7615
7622
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
7616
7623
  --pf-v6-c-button--m-plain--PaddingBlockStart: var(--pf-t--global--spacer--sm);
7617
7624
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -7624,7 +7631,8 @@ button.pf-v6-c-breadcrumb__link {
7624
7631
  --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
7625
7632
  --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
7626
7633
  --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
7627
- --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
7634
+ --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
7635
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
7628
7636
  --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
7629
7637
  --pf-v6-c-button--m-plain--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
7630
7638
  --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -7719,8 +7727,10 @@ button.pf-v6-c-breadcrumb__link {
7719
7727
  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
7720
7728
  --pf-v6-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
7721
7729
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
7722
- --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
7723
- --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
7730
+ --pf-v6-c-button__icon--MarginInlineStart: 0;
7731
+ --pf-v6-c-button__icon--MarginInlineEnd: 0;
7732
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
7733
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
7724
7734
  --pf-v6-c-button__progress--width: calc(var(--pf-v6-c-spinner--m-md--diameter) + var(--pf-t--global--spacer--sm));
7725
7735
  --pf-v6-c-button__progress--Opacity: 0;
7726
7736
  --pf-v6-c-button__progress--TranslateY: -50%;
@@ -7735,16 +7745,17 @@ button.pf-v6-c-breadcrumb__link {
7735
7745
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
7736
7746
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
7737
7747
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
7738
- --pf-v6-c-button__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
7739
7748
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
7749
+ --pf-v6-c-button--m-block--Display: flex;
7750
+ --pf-v6-c-button--m-block--Width: 100%;
7740
7751
  }
7741
7752
 
7742
7753
  .pf-v6-c-button {
7743
7754
  position: relative;
7744
7755
  display: var(--pf-v6-c-button--Display);
7745
- flex: var(--pf-v6-c-button--Flex, initial);
7746
- align-items: var(--pf-v6-c-button--AlignItems, initial);
7747
- justify-content: var(--pf-v6-c-button--JustifyContent, initial);
7756
+ gap: var(--pf-v6-c-button--Gap);
7757
+ align-items: var(--pf-v6-c-button--AlignItems);
7758
+ justify-content: var(--pf-v6-c-button--JustifyContent);
7748
7759
  padding-block-start: var(--pf-v6-c-button--PaddingBlockStart);
7749
7760
  padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd);
7750
7761
  padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart);
@@ -7843,6 +7854,7 @@ button.pf-v6-c-breadcrumb__link {
7843
7854
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color);
7844
7855
  }
7845
7856
  .pf-v6-c-button.pf-m-link.pf-m-inline {
7857
+ --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
7846
7858
  --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize);
7847
7859
  --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight);
7848
7860
  --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight);
@@ -7858,11 +7870,16 @@ button.pf-v6-c-breadcrumb__link {
7858
7870
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
7859
7871
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color);
7860
7872
  --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color);
7861
- display: inline;
7862
7873
  text-align: start;
7863
7874
  white-space: normal;
7864
7875
  outline-offset: 0.125rem;
7865
7876
  }
7877
+ span.pf-v6-c-button.pf-m-link.pf-m-inline {
7878
+ --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
7879
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
7880
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
7881
+ }
7882
+
7866
7883
  .pf-v6-c-button.pf-m-link.pf-m-danger {
7867
7884
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
7868
7885
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -7968,6 +7985,7 @@ button.pf-v6-c-breadcrumb__link {
7968
7985
  --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-plain--m-clicked--Color);
7969
7986
  --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
7970
7987
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color);
7988
+ --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-plain--disabled__icon--Color);
7971
7989
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
7972
7990
  --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-small--PaddingBlockStart);
7973
7991
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
@@ -7986,8 +8004,8 @@ button.pf-v6-c-breadcrumb__link {
7986
8004
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
7987
8005
  }
7988
8006
  .pf-v6-c-button.pf-m-block {
7989
- display: block;
7990
- width: 100%;
8007
+ --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
8008
+ width: var(--pf-v6-c-button--m-block--Width);
7991
8009
  }
7992
8010
  .pf-v6-c-button.pf-m-small {
7993
8011
  --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
@@ -8054,13 +8072,15 @@ button.pf-v6-c-breadcrumb__link {
8054
8072
  }
8055
8073
 
8056
8074
  .pf-v6-c-button__icon {
8075
+ margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
8076
+ margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
8057
8077
  color: var(--pf-v6-c-button__icon--Color);
8058
8078
  }
8059
8079
  .pf-v6-c-button__icon.pf-m-start {
8060
- margin-inline-end: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
8080
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
8061
8081
  }
8062
8082
  .pf-v6-c-button__icon.pf-m-end {
8063
- margin-inline-start: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
8083
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
8064
8084
  }
8065
8085
 
8066
8086
  .pf-v6-c-button__progress {
@@ -8078,7 +8098,6 @@ button.pf-v6-c-breadcrumb__link {
8078
8098
  .pf-v6-c-button__count {
8079
8099
  display: inline-flex;
8080
8100
  align-items: center;
8081
- margin-inline-start: var(--pf-v6-c-button__count--MarginInlineStart);
8082
8101
  }
8083
8102
 
8084
8103
  :where(:root, .pf-v6-c-calendar-month) {
@@ -18702,43 +18721,44 @@ ul.pf-v6-c-list {
18702
18721
  --pf-v6-c-panel--Width: auto;
18703
18722
  --pf-v6-c-panel--MinWidth: auto;
18704
18723
  --pf-v6-c-panel--MaxWidth: none;
18705
- --pf-v6-c-panel--ZIndex: auto;
18706
18724
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
18707
18725
  --pf-v6-c-panel--BoxShadow: none;
18726
+ --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--small);
18708
18727
  --pf-v6-c-panel--before--BorderWidth: 0;
18709
18728
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
18710
18729
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
18711
- --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
18730
+ --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
18712
18731
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
18713
- --pf-v6-c-panel--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
18714
18732
  --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
18715
18733
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
18716
- --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18734
+ --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18717
18735
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18718
- --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
18736
+ --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18719
18737
  --pf-v6-c-panel__main--MaxHeight: none;
18720
18738
  --pf-v6-c-panel__main--Overflow: visible;
18721
18739
  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
18722
- --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18740
+ --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18723
18741
  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18724
- --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--md);
18725
- --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
18726
- --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18727
- --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18728
- --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
18742
+ --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18743
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
18744
+ --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18745
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
18746
+ --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
18729
18747
  --pf-v6-c-panel__footer--BoxShadow: none;
18730
18748
  --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
18731
18749
  --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
18732
- --pf-v6-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
18750
+ --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
18751
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
18752
+ --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
18733
18753
  }
18734
18754
 
18735
18755
  .pf-v6-c-panel {
18736
18756
  position: relative;
18737
- z-index: var(--pf-v6-c-panel--ZIndex);
18738
18757
  width: var(--pf-v6-c-panel--Width);
18739
18758
  min-width: var(--pf-v6-c-panel--MinWidth);
18740
18759
  max-width: var(--pf-v6-c-panel--MaxWidth);
18741
18760
  background-color: var(--pf-v6-c-panel--BackgroundColor);
18761
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
18742
18762
  box-shadow: var(--pf-v6-c-panel--BoxShadow);
18743
18763
  }
18744
18764
  .pf-v6-c-panel::before {
@@ -18747,6 +18767,7 @@ ul.pf-v6-c-list {
18747
18767
  pointer-events: none;
18748
18768
  content: "";
18749
18769
  border: var(--pf-v6-c-panel--before--BorderWidth) solid var(--pf-v6-c-panel--before--BorderColor);
18770
+ border-radius: var(--pf-v6-c-panel--BorderRadius);
18750
18771
  }
18751
18772
  .pf-v6-c-panel.pf-m-bordered {
18752
18773
  --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-bordered--before--BorderWidth);
@@ -18757,12 +18778,13 @@ ul.pf-v6-c-list {
18757
18778
  .pf-v6-c-panel.pf-m-raised {
18758
18779
  --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-raised--BackgroundColor);
18759
18780
  --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-raised--BoxShadow);
18760
- --pf-v6-c-panel--ZIndex: var(--pf-v6-c-panel--m-raised--ZIndex);
18761
18781
  }
18762
18782
  .pf-v6-c-panel.pf-m-scrollable {
18763
18783
  --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
18764
18784
  --pf-v6-c-panel__main--Overflow: var(--pf-v6-c-panel--m-scrollable__main--Overflow);
18765
18785
  --pf-v6-c-panel__footer--BoxShadow: var(--pf-v6-c-panel--m-scrollable__footer--BoxShadow);
18786
+ --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart);
18787
+ --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd);
18766
18788
  }
18767
18789
 
18768
18790
  .pf-v6-c-panel__header {