@patternfly/patternfly 6.0.0-alpha.165 → 6.0.0-alpha.167

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 (88) hide show
  1. package/components/Alert/alert-group.css +54 -3
  2. package/components/Alert/alert-group.scss +85 -0
  3. package/components/Alert/alert.scss +1 -1
  4. package/components/Button/button.css +33 -14
  5. package/components/Button/button.scss +36 -14
  6. package/components/_index.css +87 -17
  7. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  8. package/docs/components/ActionList/examples/ActionList.md +60 -20
  9. package/docs/components/Alert/examples/Alert.md +106 -62
  10. package/docs/components/BackToTop/examples/BackToTop.md +5 -3
  11. package/docs/components/Banner/examples/Banner.md +9 -3
  12. package/docs/components/Button/examples/Button.md +536 -367
  13. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  14. package/docs/components/Card/examples/Card.md +43 -29
  15. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +75 -33
  16. package/docs/components/CodeBlock/examples/CodeBlock.md +18 -6
  17. package/docs/components/CodeEditor/examples/CodeEditor.md +44 -22
  18. package/docs/components/ContextSelector/deprecated/context-selector.md +6 -8
  19. package/docs/components/DataList/examples/DataList.md +121 -63
  20. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  21. package/docs/components/DescriptionList/examples/DescriptionList.md +125 -75
  22. package/docs/components/Drawer/examples/Drawer.md +57 -19
  23. package/docs/components/DualListSelector/examples/DualListSelector.md +204 -100
  24. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  25. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  26. package/docs/components/Form/examples/Form.md +53 -19
  27. package/docs/components/Hint/examples/Hint.md +9 -9
  28. package/docs/components/InlineEdit/examples/InlineEdit.md +78 -26
  29. package/docs/components/InputGroup/examples/InputGroup.md +27 -9
  30. package/docs/components/JumpLinks/examples/JumpLinks.md +188 -68
  31. package/docs/components/Label/examples/Label.md +651 -217
  32. package/docs/components/LogViewer/examples/LogViewer.md +218 -86
  33. package/docs/components/Login/examples/Login.md +346 -282
  34. package/docs/components/Masthead/examples/masthead.md +27 -9
  35. package/docs/components/Menu/examples/Menu.md +35 -25
  36. package/docs/components/MenuToggle/examples/MenuToggle.md +3 -1
  37. package/docs/components/ModalBox/examples/ModalBox.md +48 -16
  38. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +48 -16
  39. package/docs/components/Nav/examples/Navigation.md +12 -4
  40. package/docs/components/NotificationBadge/examples/NotificationBadge.md +78 -42
  41. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +6 -2
  42. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  43. package/docs/components/OverflowMenu/examples/overflow-menu.md +48 -16
  44. package/docs/components/Page/examples/Page.md +21 -7
  45. package/docs/components/Pagination/examples/Pagination.md +132 -44
  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/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  77. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +12 -4
  78. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +306 -133
  79. package/docs/demos/Skeleton/examples/Skeleton.md +6 -2
  80. package/docs/demos/Table/examples/Table.md +474 -210
  81. package/docs/demos/Tabs/examples/Tabs.md +60 -22
  82. package/docs/demos/Toolbar/examples/Toolbar.md +123 -72
  83. package/docs/demos/Wizard/examples/Wizard.md +179 -110
  84. package/package.json +1 -1
  85. package/patternfly-no-globals.css +87 -17
  86. package/patternfly.css +87 -17
  87. package/patternfly.min.css +1 -1
  88. package/patternfly.min.css.map +1 -1
package/patternfly-no-globals.css CHANGED
@@ -6669,16 +6669,67 @@
6669
6669
  border-radius: var(--pf-v6-c-alert-group__overflow-button--BorderRadius);
6670
6670
  box-shadow: var(--pf-v6-c-alert-group__overflow-button--BoxShadow);
6671
6671
  }
6672
- .pf-v6-c-alert-group__overflow-button:hover {
6672
+
6673
+ .pf-v6-c-alert-group__item {
6674
+ display: grid;
6675
+ grid-template-rows: 1fr;
6676
+ opacity: 1;
6677
+ transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
6678
+ transform: translateX(0) translateY(0);
6679
+ }
6680
+ @media screen and (prefers-reduced-motion: no-preference) {
6681
+ .pf-v6-c-alert-group__item {
6682
+ transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s, margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
6683
+ }
6684
+ .pf-v6-c-alert-group__item .pf-v6-c-alert {
6685
+ transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
6686
+ }
6687
+ }
6688
+ .pf-v6-c-alert-group__item.pf-m-offstage-top {
6689
+ grid-template-rows: 0fr;
6690
+ margin-block: 0;
6691
+ overflow: hidden;
6692
+ opacity: 0;
6693
+ transform: translateY(-100%);
6694
+ }
6695
+ .pf-v6-c-alert-group__item.pf-m-offstage-top .pf-v6-c-alert {
6696
+ min-height: 0;
6697
+ padding-block-start: 0;
6698
+ padding-block-end: 0;
6699
+ border-width: 0;
6700
+ }
6701
+ .pf-v6-c-alert-group__item.pf-m-offstage-right {
6702
+ grid-template-rows: 0fr;
6703
+ margin-block: 0;
6704
+ overflow: hidden;
6705
+ opacity: 0;
6706
+ transition: opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
6707
+ transform: translateX(100%);
6708
+ }
6709
+ .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
6710
+ min-height: 0;
6711
+ padding-block-start: 0;
6712
+ padding-block-end: 0;
6713
+ border-width: 0;
6714
+ }
6715
+ @media screen and (prefers-reduced-motion: no-preference) {
6716
+ .pf-v6-c-alert-group__item.pf-m-offstage-right {
6717
+ transition: transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short), grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
6718
+ }
6719
+ .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
6720
+ transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
6721
+ }
6722
+ }
6723
+ .pf-v6-c-alert-group__item:hover {
6673
6724
  --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
6674
6725
  --pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
6675
6726
  --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--hover--BoxShadow);
6676
6727
  }
6677
- .pf-v6-c-alert-group__overflow-button:focus {
6728
+ .pf-v6-c-alert-group__item:focus {
6678
6729
  --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--focus--Color);
6679
6730
  --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--focus--BoxShadow);
6680
6731
  }
6681
- .pf-v6-c-alert-group__overflow-button:active {
6732
+ .pf-v6-c-alert-group__item:active {
6682
6733
  --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--active--Color);
6683
6734
  --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--active--BoxShadow);
6684
6735
  }
@@ -7398,7 +7449,10 @@ button.pf-v6-c-breadcrumb__link {
7398
7449
  }
7399
7450
 
7400
7451
  :where(:root, .pf-v6-c-button) {
7401
- --pf-v6-c-button--Display: inline-block;
7452
+ --pf-v6-c-button--Display: inline-flex;
7453
+ --pf-v6-c-button--AlignItems: baseline;
7454
+ --pf-v6-c-button--JustifyContent: center;
7455
+ --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
7402
7456
  --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
7403
7457
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
7404
7458
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -7479,6 +7533,7 @@ button.pf-v6-c-breadcrumb__link {
7479
7533
  --pf-v6-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
7480
7534
  --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
7481
7535
  --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
7536
+ --pf-v6-c-button--m-link--m-inline--Display: inline-flex;
7482
7537
  --pf-v6-c-button--m-link--m-inline--FontSize: initial;
7483
7538
  --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
7484
7539
  --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
@@ -7491,6 +7546,9 @@ button.pf-v6-c-breadcrumb__link {
7491
7546
  --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
7547
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
7493
7548
  --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
7549
+ --pf-v6-c-button--span--m-link--m-inline--Display: inline;
7550
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
7551
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
7494
7552
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
7495
7553
  --pf-v6-c-button--m-plain--PaddingBlockStart: var(--pf-t--global--spacer--sm);
7496
7554
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -7503,7 +7561,8 @@ button.pf-v6-c-breadcrumb__link {
7503
7561
  --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
7504
7562
  --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
7505
7563
  --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);
7564
+ --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
7565
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
7507
7566
  --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
7508
7567
  --pf-v6-c-button--m-plain--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
7509
7568
  --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -7598,8 +7657,10 @@ button.pf-v6-c-breadcrumb__link {
7598
7657
  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
7599
7658
  --pf-v6-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
7600
7659
  --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);
7660
+ --pf-v6-c-button__icon--MarginInlineStart: 0;
7661
+ --pf-v6-c-button__icon--MarginInlineEnd: 0;
7662
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
7663
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
7603
7664
  --pf-v6-c-button__progress--width: calc(var(--pf-v6-c-spinner--m-md--diameter) + var(--pf-t--global--spacer--sm));
7604
7665
  --pf-v6-c-button__progress--Opacity: 0;
7605
7666
  --pf-v6-c-button__progress--TranslateY: -50%;
@@ -7614,16 +7675,17 @@ button.pf-v6-c-breadcrumb__link {
7614
7675
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
7615
7676
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
7616
7677
  --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
7678
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
7679
+ --pf-v6-c-button--m-block--Display: flex;
7680
+ --pf-v6-c-button--m-block--Width: 100%;
7619
7681
  }
7620
7682
 
7621
7683
  .pf-v6-c-button {
7622
7684
  position: relative;
7623
7685
  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);
7686
+ gap: var(--pf-v6-c-button--Gap);
7687
+ align-items: var(--pf-v6-c-button--AlignItems);
7688
+ justify-content: var(--pf-v6-c-button--JustifyContent);
7627
7689
  padding-block-start: var(--pf-v6-c-button--PaddingBlockStart);
7628
7690
  padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd);
7629
7691
  padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart);
@@ -7722,6 +7784,7 @@ button.pf-v6-c-breadcrumb__link {
7722
7784
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color);
7723
7785
  }
7724
7786
  .pf-v6-c-button.pf-m-link.pf-m-inline {
7787
+ --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
7725
7788
  --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize);
7726
7789
  --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight);
7727
7790
  --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight);
@@ -7737,11 +7800,16 @@ button.pf-v6-c-breadcrumb__link {
7737
7800
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
7738
7801
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color);
7739
7802
  --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color);
7740
- display: inline;
7741
7803
  text-align: start;
7742
7804
  white-space: normal;
7743
7805
  outline-offset: 0.125rem;
7744
7806
  }
7807
+ span.pf-v6-c-button.pf-m-link.pf-m-inline {
7808
+ --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
7809
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
7810
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
7811
+ }
7812
+
7745
7813
  .pf-v6-c-button.pf-m-link.pf-m-danger {
7746
7814
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
7747
7815
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -7847,6 +7915,7 @@ button.pf-v6-c-breadcrumb__link {
7847
7915
  --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-plain--m-clicked--Color);
7848
7916
  --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
7849
7917
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color);
7918
+ --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-plain--disabled__icon--Color);
7850
7919
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
7851
7920
  --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-small--PaddingBlockStart);
7852
7921
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
@@ -7865,8 +7934,8 @@ button.pf-v6-c-breadcrumb__link {
7865
7934
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
7866
7935
  }
7867
7936
  .pf-v6-c-button.pf-m-block {
7868
- display: block;
7869
- width: 100%;
7937
+ --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
7938
+ width: var(--pf-v6-c-button--m-block--Width);
7870
7939
  }
7871
7940
  .pf-v6-c-button.pf-m-small {
7872
7941
  --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
@@ -7933,13 +8002,15 @@ button.pf-v6-c-breadcrumb__link {
7933
8002
  }
7934
8003
 
7935
8004
  .pf-v6-c-button__icon {
8005
+ margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
8006
+ margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
7936
8007
  color: var(--pf-v6-c-button__icon--Color);
7937
8008
  }
7938
8009
  .pf-v6-c-button__icon.pf-m-start {
7939
- margin-inline-end: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
8010
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
7940
8011
  }
7941
8012
  .pf-v6-c-button__icon.pf-m-end {
7942
- margin-inline-start: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
8013
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
7943
8014
  }
7944
8015
 
7945
8016
  .pf-v6-c-button__progress {
@@ -7957,7 +8028,6 @@ button.pf-v6-c-breadcrumb__link {
7957
8028
  .pf-v6-c-button__count {
7958
8029
  display: inline-flex;
7959
8030
  align-items: center;
7960
- margin-inline-start: var(--pf-v6-c-button__count--MarginInlineStart);
7961
8031
  }
7962
8032
 
7963
8033
  :where(:root, .pf-v6-c-calendar-month) {
package/patternfly.css CHANGED
@@ -6790,16 +6790,67 @@ button) {
6790
6790
  border-radius: var(--pf-v6-c-alert-group__overflow-button--BorderRadius);
6791
6791
  box-shadow: var(--pf-v6-c-alert-group__overflow-button--BoxShadow);
6792
6792
  }
6793
- .pf-v6-c-alert-group__overflow-button:hover {
6793
+
6794
+ .pf-v6-c-alert-group__item {
6795
+ display: grid;
6796
+ grid-template-rows: 1fr;
6797
+ opacity: 1;
6798
+ transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
6799
+ transform: translateX(0) translateY(0);
6800
+ }
6801
+ @media screen and (prefers-reduced-motion: no-preference) {
6802
+ .pf-v6-c-alert-group__item {
6803
+ transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s, margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
6804
+ }
6805
+ .pf-v6-c-alert-group__item .pf-v6-c-alert {
6806
+ transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
6807
+ }
6808
+ }
6809
+ .pf-v6-c-alert-group__item.pf-m-offstage-top {
6810
+ grid-template-rows: 0fr;
6811
+ margin-block: 0;
6812
+ overflow: hidden;
6813
+ opacity: 0;
6814
+ transform: translateY(-100%);
6815
+ }
6816
+ .pf-v6-c-alert-group__item.pf-m-offstage-top .pf-v6-c-alert {
6817
+ min-height: 0;
6818
+ padding-block-start: 0;
6819
+ padding-block-end: 0;
6820
+ border-width: 0;
6821
+ }
6822
+ .pf-v6-c-alert-group__item.pf-m-offstage-right {
6823
+ grid-template-rows: 0fr;
6824
+ margin-block: 0;
6825
+ overflow: hidden;
6826
+ opacity: 0;
6827
+ transition: opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
6828
+ transform: translateX(100%);
6829
+ }
6830
+ .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
6831
+ min-height: 0;
6832
+ padding-block-start: 0;
6833
+ padding-block-end: 0;
6834
+ border-width: 0;
6835
+ }
6836
+ @media screen and (prefers-reduced-motion: no-preference) {
6837
+ .pf-v6-c-alert-group__item.pf-m-offstage-right {
6838
+ transition: transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short), grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
6839
+ }
6840
+ .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
6841
+ transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
6842
+ }
6843
+ }
6844
+ .pf-v6-c-alert-group__item:hover {
6794
6845
  --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
6795
6846
  --pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
6796
6847
  --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--hover--BoxShadow);
6797
6848
  }
6798
- .pf-v6-c-alert-group__overflow-button:focus {
6849
+ .pf-v6-c-alert-group__item:focus {
6799
6850
  --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--focus--Color);
6800
6851
  --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--focus--BoxShadow);
6801
6852
  }
6802
- .pf-v6-c-alert-group__overflow-button:active {
6853
+ .pf-v6-c-alert-group__item:active {
6803
6854
  --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--active--Color);
6804
6855
  --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--active--BoxShadow);
6805
6856
  }
@@ -7519,7 +7570,10 @@ button.pf-v6-c-breadcrumb__link {
7519
7570
  }
7520
7571
 
7521
7572
  :where(:root, .pf-v6-c-button) {
7522
- --pf-v6-c-button--Display: inline-block;
7573
+ --pf-v6-c-button--Display: inline-flex;
7574
+ --pf-v6-c-button--AlignItems: baseline;
7575
+ --pf-v6-c-button--JustifyContent: center;
7576
+ --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
7523
7577
  --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
7524
7578
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
7525
7579
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -7600,6 +7654,7 @@ button.pf-v6-c-breadcrumb__link {
7600
7654
  --pf-v6-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
7601
7655
  --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
7602
7656
  --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
7657
+ --pf-v6-c-button--m-link--m-inline--Display: inline-flex;
7603
7658
  --pf-v6-c-button--m-link--m-inline--FontSize: initial;
7604
7659
  --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
7605
7660
  --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
@@ -7612,6 +7667,9 @@ button.pf-v6-c-breadcrumb__link {
7612
7667
  --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
7668
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
7614
7669
  --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
7670
+ --pf-v6-c-button--span--m-link--m-inline--Display: inline;
7671
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
7672
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
7615
7673
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
7616
7674
  --pf-v6-c-button--m-plain--PaddingBlockStart: var(--pf-t--global--spacer--sm);
7617
7675
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -7624,7 +7682,8 @@ button.pf-v6-c-breadcrumb__link {
7624
7682
  --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
7625
7683
  --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
7626
7684
  --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);
7685
+ --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
7686
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
7628
7687
  --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
7629
7688
  --pf-v6-c-button--m-plain--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
7630
7689
  --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -7719,8 +7778,10 @@ button.pf-v6-c-breadcrumb__link {
7719
7778
  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
7720
7779
  --pf-v6-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
7721
7780
  --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);
7781
+ --pf-v6-c-button__icon--MarginInlineStart: 0;
7782
+ --pf-v6-c-button__icon--MarginInlineEnd: 0;
7783
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
7784
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
7724
7785
  --pf-v6-c-button__progress--width: calc(var(--pf-v6-c-spinner--m-md--diameter) + var(--pf-t--global--spacer--sm));
7725
7786
  --pf-v6-c-button__progress--Opacity: 0;
7726
7787
  --pf-v6-c-button__progress--TranslateY: -50%;
@@ -7735,16 +7796,17 @@ button.pf-v6-c-breadcrumb__link {
7735
7796
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
7736
7797
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
7737
7798
  --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
7799
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
7800
+ --pf-v6-c-button--m-block--Display: flex;
7801
+ --pf-v6-c-button--m-block--Width: 100%;
7740
7802
  }
7741
7803
 
7742
7804
  .pf-v6-c-button {
7743
7805
  position: relative;
7744
7806
  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);
7807
+ gap: var(--pf-v6-c-button--Gap);
7808
+ align-items: var(--pf-v6-c-button--AlignItems);
7809
+ justify-content: var(--pf-v6-c-button--JustifyContent);
7748
7810
  padding-block-start: var(--pf-v6-c-button--PaddingBlockStart);
7749
7811
  padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd);
7750
7812
  padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart);
@@ -7843,6 +7905,7 @@ button.pf-v6-c-breadcrumb__link {
7843
7905
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color);
7844
7906
  }
7845
7907
  .pf-v6-c-button.pf-m-link.pf-m-inline {
7908
+ --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
7846
7909
  --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize);
7847
7910
  --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight);
7848
7911
  --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight);
@@ -7858,11 +7921,16 @@ button.pf-v6-c-breadcrumb__link {
7858
7921
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
7859
7922
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color);
7860
7923
  --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color);
7861
- display: inline;
7862
7924
  text-align: start;
7863
7925
  white-space: normal;
7864
7926
  outline-offset: 0.125rem;
7865
7927
  }
7928
+ span.pf-v6-c-button.pf-m-link.pf-m-inline {
7929
+ --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
7930
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
7931
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
7932
+ }
7933
+
7866
7934
  .pf-v6-c-button.pf-m-link.pf-m-danger {
7867
7935
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
7868
7936
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -7968,6 +8036,7 @@ button.pf-v6-c-breadcrumb__link {
7968
8036
  --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-plain--m-clicked--Color);
7969
8037
  --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
7970
8038
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color);
8039
+ --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-plain--disabled__icon--Color);
7971
8040
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
7972
8041
  --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-small--PaddingBlockStart);
7973
8042
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
@@ -7986,8 +8055,8 @@ button.pf-v6-c-breadcrumb__link {
7986
8055
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
7987
8056
  }
7988
8057
  .pf-v6-c-button.pf-m-block {
7989
- display: block;
7990
- width: 100%;
8058
+ --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
8059
+ width: var(--pf-v6-c-button--m-block--Width);
7991
8060
  }
7992
8061
  .pf-v6-c-button.pf-m-small {
7993
8062
  --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
@@ -8054,13 +8123,15 @@ button.pf-v6-c-breadcrumb__link {
8054
8123
  }
8055
8124
 
8056
8125
  .pf-v6-c-button__icon {
8126
+ margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
8127
+ margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
8057
8128
  color: var(--pf-v6-c-button__icon--Color);
8058
8129
  }
8059
8130
  .pf-v6-c-button__icon.pf-m-start {
8060
- margin-inline-end: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
8131
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
8061
8132
  }
8062
8133
  .pf-v6-c-button__icon.pf-m-end {
8063
- margin-inline-start: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
8134
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
8064
8135
  }
8065
8136
 
8066
8137
  .pf-v6-c-button__progress {
@@ -8078,7 +8149,6 @@ button.pf-v6-c-breadcrumb__link {
8078
8149
  .pf-v6-c-button__count {
8079
8150
  display: inline-flex;
8080
8151
  align-items: center;
8081
- margin-inline-start: var(--pf-v6-c-button__count--MarginInlineStart);
8082
8152
  }
8083
8153
 
8084
8154
  :where(:root, .pf-v6-c-calendar-month) {