@patternfly/patternfly 6.0.0-alpha.165 → 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 (85) hide show
  1. package/components/Button/button.css +33 -14
  2. package/components/Button/button.scss +36 -14
  3. package/components/_index.css +33 -14
  4. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  5. package/docs/components/ActionList/examples/ActionList.md +60 -20
  6. package/docs/components/Alert/examples/Alert.md +106 -62
  7. package/docs/components/BackToTop/examples/BackToTop.md +5 -3
  8. package/docs/components/Banner/examples/Banner.md +9 -3
  9. package/docs/components/Button/examples/Button.md +536 -367
  10. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  11. package/docs/components/Card/examples/Card.md +43 -29
  12. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +75 -33
  13. package/docs/components/CodeBlock/examples/CodeBlock.md +18 -6
  14. package/docs/components/CodeEditor/examples/CodeEditor.md +44 -22
  15. package/docs/components/ContextSelector/deprecated/context-selector.md +6 -8
  16. package/docs/components/DataList/examples/DataList.md +121 -63
  17. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  18. package/docs/components/DescriptionList/examples/DescriptionList.md +125 -75
  19. package/docs/components/Drawer/examples/Drawer.md +57 -19
  20. package/docs/components/DualListSelector/examples/DualListSelector.md +204 -100
  21. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  22. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  23. package/docs/components/Form/examples/Form.md +53 -19
  24. package/docs/components/Hint/examples/Hint.md +9 -9
  25. package/docs/components/InlineEdit/examples/InlineEdit.md +78 -26
  26. package/docs/components/InputGroup/examples/InputGroup.md +27 -9
  27. package/docs/components/JumpLinks/examples/JumpLinks.md +188 -68
  28. package/docs/components/Label/examples/Label.md +651 -217
  29. package/docs/components/LogViewer/examples/LogViewer.md +218 -86
  30. package/docs/components/Login/examples/Login.md +346 -282
  31. package/docs/components/Masthead/examples/masthead.md +27 -9
  32. package/docs/components/Menu/examples/Menu.md +35 -25
  33. package/docs/components/MenuToggle/examples/MenuToggle.md +3 -1
  34. package/docs/components/ModalBox/examples/ModalBox.md +48 -16
  35. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +48 -16
  36. package/docs/components/Nav/examples/Navigation.md +12 -4
  37. package/docs/components/NotificationBadge/examples/NotificationBadge.md +78 -42
  38. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +6 -2
  39. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  40. package/docs/components/OverflowMenu/examples/overflow-menu.md +48 -16
  41. package/docs/components/Page/examples/Page.md +21 -7
  42. package/docs/components/Pagination/examples/Pagination.md +132 -44
  43. package/docs/components/Popover/examples/Popover.md +45 -15
  44. package/docs/components/Select/deprecated/Select.md +111 -55
  45. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  46. package/docs/components/Slider/examples/Slider.md +12 -4
  47. package/docs/components/Table/examples/Table.md +363 -208
  48. package/docs/components/Tabs/examples/Tabs.md +1230 -574
  49. package/docs/components/TextInputGroup/examples/TextInputGroup.md +132 -44
  50. package/docs/components/Toolbar/examples/Toolbar.md +120 -64
  51. package/docs/components/TreeView/examples/TreeView.md +12 -4
  52. package/docs/components/Wizard/examples/Wizard.md +105 -38
  53. package/docs/demos/AboutModal/examples/AboutModal.md +9 -3
  54. package/docs/demos/Alert/examples/Alert.md +39 -25
  55. package/docs/demos/BackToTop/examples/BackToTop.md +11 -5
  56. package/docs/demos/Banner/examples/Banner.md +12 -4
  57. package/docs/demos/Button/examples/Button.md +7 -7
  58. package/docs/demos/Card/examples/Card.md +106 -57
  59. package/docs/demos/CardView/examples/CardView.md +30 -13
  60. package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -8
  61. package/docs/demos/Dashboard/examples/Dashboard.md +43 -28
  62. package/docs/demos/DataList/examples/DataList.md +255 -149
  63. package/docs/demos/DescriptionList/examples/DescriptionList.md +21 -7
  64. package/docs/demos/Drawer/examples/Drawer.md +89 -43
  65. package/docs/demos/Form/examples/BasicForms.md +141 -59
  66. package/docs/demos/JumpLinks/examples/JumpLinks.md +222 -109
  67. package/docs/demos/Masthead/examples/Masthead.md +63 -21
  68. package/docs/demos/Modal/examples/Modal.md +99 -37
  69. package/docs/demos/Nav/examples/Nav.md +45 -15
  70. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +58 -43
  71. package/docs/demos/Page/examples/Page.md +54 -21
  72. package/docs/demos/Page/examples/Penta.md +9 -6
  73. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  74. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +12 -4
  75. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +306 -133
  76. package/docs/demos/Skeleton/examples/Skeleton.md +6 -2
  77. package/docs/demos/Table/examples/Table.md +474 -210
  78. package/docs/demos/Tabs/examples/Tabs.md +60 -22
  79. package/docs/demos/Toolbar/examples/Toolbar.md +123 -72
  80. package/docs/demos/Wizard/examples/Wizard.md +179 -110
  81. package/package.json +1 -1
  82. package/patternfly-no-globals.css +33 -14
  83. package/patternfly.css +33 -14
  84. package/patternfly.min.css +1 -1
  85. 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) {
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) {