@patternfly/patternfly 4.174.0 → 4.176.2

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 (23) hide show
  1. package/components/AlertGroup/alert-group.css +36 -0
  2. package/components/AlertGroup/alert-group.scss +41 -0
  3. package/components/Label/label.css +43 -12
  4. package/components/Label/label.scss +45 -13
  5. package/components/Nav/nav.css +11 -0
  6. package/components/Nav/nav.scss +14 -0
  7. package/components/TextInputGroup/text-input-group.css +4 -0
  8. package/components/TextInputGroup/text-input-group.scss +5 -0
  9. package/docs/components/AlertGroup/examples/AlertGroup.md +8 -3
  10. package/docs/components/Label/examples/Label.md +33 -67
  11. package/docs/components/LabelGroup/examples/LabelGroup.md +64 -107
  12. package/docs/components/LogViewer/examples/LogViewer.md +9 -9
  13. package/docs/components/Menu/examples/Menu.md +43 -42
  14. package/docs/components/Nav/examples/Navigation.md +23 -44
  15. package/docs/components/TextInputGroup/examples/TextInputGroup.md +2 -1
  16. package/docs/demos/Card/examples/Card.md +0 -22
  17. package/docs/demos/Masthead/examples/Masthead.md +12 -4
  18. package/docs/demos/Tabs/examples/Tabs.md +0 -2
  19. package/package.json +1 -1
  20. package/patternfly-no-reset.css +94 -12
  21. package/patternfly.css +94 -12
  22. package/patternfly.min.css +1 -1
  23. package/patternfly.min.css.map +1 -1
package/patternfly-no-reset.css CHANGED
@@ -6026,6 +6026,20 @@ html {
6026
6026
  --pf-c-alert-group--m-toast--Right: var(--pf-global--spacer--xl);
6027
6027
  --pf-c-alert-group--m-toast--MaxWidth: 37.5rem;
6028
6028
  --pf-c-alert-group--m-toast--ZIndex: var(--pf-global--ZIndex--2xl);
6029
+ --pf-c-alert-group__overflow-button--BorderWidth: 0;
6030
+ --pf-c-alert-group__overflow-button--PaddingTop: var(--pf-global--spacer--lg);
6031
+ --pf-c-alert-group__overflow-button--PaddingRight: var(--pf-global--spacer--md);
6032
+ --pf-c-alert-group__overflow-button--PaddingBottom: var(--pf-global--spacer--lg);
6033
+ --pf-c-alert-group__overflow-button--PaddingLeft: var(--pf-global--spacer--md);
6034
+ --pf-c-alert-group__overflow-button--Color: var(--pf-global--link--Color);
6035
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-global--BoxShadow--lg);
6036
+ --pf-c-alert-group__overflow-button--BackgroundColor: var(--pf-global--BackgroundColor--100);
6037
+ --pf-c-alert-group__overflow-button--hover--Color: var(--pf-global--link--Color--hover);
6038
+ --pf-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
6039
+ --pf-c-alert-group__overflow-button--focus--Color: var(--pf-global--link--Color--hover);
6040
+ --pf-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
6041
+ --pf-c-alert-group__overflow-button--active--Color: var(--pf-global--link--Color--hover);
6042
+ --pf-c-alert-group__overflow-button--active--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
6029
6043
  }
6030
6044
  .pf-c-alert-group > * + * {
6031
6045
  margin-top: var(--pf-c-alert-group__item--MarginTop);
@@ -6039,6 +6053,28 @@ html {
6039
6053
  max-width: var(--pf-c-alert-group--m-toast--MaxWidth);
6040
6054
  }
6041
6055
 
6056
+ .pf-c-alert-group__overflow-button {
6057
+ position: relative;
6058
+ width: 100%;
6059
+ padding: var(--pf-c-alert-group__overflow-button--PaddingTop) var(--pf-c-alert-group__overflow-button--PaddingRight) var(--pf-c-alert-group__overflow-button--PaddingBottom) var(--pf-c-alert-group__overflow-button--PaddingLeft);
6060
+ color: var(--pf-c-alert-group__overflow-button--Color);
6061
+ background-color: var(--pf-c-alert-group__overflow-button--BackgroundColor);
6062
+ border-width: var(--pf-c-alert-group__overflow-button--BorderWidth);
6063
+ box-shadow: var(--pf-c-alert-group__overflow-button--BoxShadow);
6064
+ }
6065
+ .pf-c-alert-group__overflow-button:hover {
6066
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--hover--Color);
6067
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--hover--BoxShadow);
6068
+ }
6069
+ .pf-c-alert-group__overflow-button:focus {
6070
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--focus--Color);
6071
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--focus--BoxShadow);
6072
+ }
6073
+ .pf-c-alert-group__overflow-button:active {
6074
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--active--Color);
6075
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--active--BoxShadow);
6076
+ }
6077
+
6042
6078
  .pf-c-app-launcher {
6043
6079
  --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
6044
6080
  --pf-c-app-launcher__menu--BoxShadow: var(--pf-global--BoxShadow--md);
@@ -14635,7 +14671,9 @@ label.pf-c-input-group__text {
14635
14671
  --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
14636
14672
  --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
14637
14673
  --pf-c-label__content--Color: var(--pf-global--Color--100);
14674
+ --pf-c-label__content--MaxWidth: 100%;
14638
14675
  --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
14676
+ --pf-c-label--m-editable__content--MaxWidth: 16ch;
14639
14677
  --pf-c-label__text--MaxWidth: 16ch;
14640
14678
  --pf-c-label__icon--Color: var(--pf-global--Color--100);
14641
14679
  --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
@@ -14648,8 +14686,6 @@ label.pf-c-input-group__text {
14648
14686
  --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
14649
14687
  --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
14650
14688
  --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
14651
- --pf-c-label__editable-text--MaxWidth: 16ch;
14652
- --pf-c-label__editable-text--BorderWidth: 0;
14653
14689
  --pf-c-label--m-editable--Cursor: pointer;
14654
14690
  --pf-c-label--m-editable--TextDecoration: underline;
14655
14691
  --pf-c-label--m-editable--TextDecorationStyle: dashed;
@@ -14658,6 +14694,12 @@ label.pf-c-input-group__text {
14658
14694
  --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
14659
14695
  --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
14660
14696
  --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
14697
+ --pf-c-label--m-editable__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
14698
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-global--BorderColor--100);
14699
+ --pf-c-label--m-editable__content--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
14700
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-global--BorderColor--100);
14701
+ --pf-c-label--m-editable__content--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
14702
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-global--BorderColor--100);
14661
14703
  --pf-c-label--m-editable--m-editable-active--Cursor: auto;
14662
14704
  --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
14663
14705
  --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
@@ -14691,6 +14733,9 @@ label.pf-c-input-group__text {
14691
14733
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--before--BorderColor);
14692
14734
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor);
14693
14735
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor);
14736
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
14737
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
14738
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
14694
14739
  }
14695
14740
  .pf-c-label.pf-m-green {
14696
14741
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor);
@@ -14703,6 +14748,9 @@ label.pf-c-input-group__text {
14703
14748
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--before--BorderColor);
14704
14749
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor);
14705
14750
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor);
14751
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
14752
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
14753
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
14706
14754
  }
14707
14755
  .pf-c-label.pf-m-orange {
14708
14756
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor);
@@ -14715,6 +14763,9 @@ label.pf-c-input-group__text {
14715
14763
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--before--BorderColor);
14716
14764
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor);
14717
14765
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor);
14766
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
14767
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
14768
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
14718
14769
  }
14719
14770
  .pf-c-label.pf-m-red {
14720
14771
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor);
@@ -14727,6 +14778,9 @@ label.pf-c-input-group__text {
14727
14778
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--before--BorderColor);
14728
14779
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor);
14729
14780
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor);
14781
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
14782
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
14783
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
14730
14784
  }
14731
14785
  .pf-c-label.pf-m-purple {
14732
14786
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor);
@@ -14739,6 +14793,9 @@ label.pf-c-input-group__text {
14739
14793
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--before--BorderColor);
14740
14794
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor);
14741
14795
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor);
14796
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
14797
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
14798
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
14742
14799
  }
14743
14800
  .pf-c-label.pf-m-cyan {
14744
14801
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor);
@@ -14751,12 +14808,18 @@ label.pf-c-input-group__text {
14751
14808
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--before--BorderColor);
14752
14809
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor);
14753
14810
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor);
14811
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
14812
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
14813
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
14754
14814
  }
14755
14815
  .pf-c-label.pf-m-outline {
14756
14816
  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
14757
14817
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
14758
14818
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
14759
14819
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor);
14820
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
14821
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
14822
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
14760
14823
  }
14761
14824
  .pf-c-label.pf-m-overflow:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
14762
14825
  .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
@@ -14776,6 +14839,15 @@ label.pf-c-input-group__text {
14776
14839
  text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
14777
14840
  text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
14778
14841
  text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
14842
+ --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
14843
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
14844
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
14845
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--hover--before--BorderWidth);
14846
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-editable__content--hover--before--BorderColor);
14847
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--focus--before--BorderWidth);
14848
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
14849
+ --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
14850
+ --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
14779
14851
  }
14780
14852
  .pf-c-label.pf-m-editable:hover {
14781
14853
  --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
@@ -14787,19 +14859,10 @@ label.pf-c-input-group__text {
14787
14859
  --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
14788
14860
  --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
14789
14861
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
14790
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
14791
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
14792
14862
  }
14793
14863
  .pf-c-label.pf-m-editable-active .pf-c-button {
14794
14864
  visibility: hidden;
14795
14865
  }
14796
- .pf-c-label .pf-c-label__editable-text {
14797
- overflow: hidden;
14798
- text-overflow: ellipsis;
14799
- white-space: nowrap;
14800
- max-width: var(--pf-c-label__editable-text--MaxWidth);
14801
- border-width: var(--pf-c-label__editable-text--BorderWidth);
14802
- }
14803
14866
  .pf-c-label .pf-c-button {
14804
14867
  --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
14805
14868
  --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
@@ -14836,8 +14899,12 @@ label.pf-c-input-group__text {
14836
14899
  }
14837
14900
 
14838
14901
  .pf-c-label__content {
14902
+ overflow: hidden;
14903
+ text-overflow: ellipsis;
14904
+ white-space: nowrap;
14905
+ max-width: var(--pf-c-label__content--MaxWidth);
14839
14906
  color: var(--pf-c-label__content--Color);
14840
- border: 0;
14907
+ border-width: 0;
14841
14908
  }
14842
14909
  .pf-c-label__content::before {
14843
14910
  position: absolute;
@@ -17565,6 +17632,8 @@ ul.pf-c-list {
17565
17632
  --pf-c-nav--c-menu__list-item--focus-within--Color: var(--pf-global--Color--light-100);
17566
17633
  --pf-c-nav--c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
17567
17634
  --pf-c-nav--c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
17635
+ --pf-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth: var(--pf-global--BorderWidth--lg);
17636
+ --pf-c-nav--c-menu__list-item--m-drill-up__item--FontWeight: var(--pf-global--FontWeight--bold);
17568
17637
  --pf-c-nav--c-menu__item--PaddingTop: var(--pf-global--spacer--md);
17569
17638
  --pf-c-nav--c-menu__item--PaddingRight: var(--pf-global--spacer--md);
17570
17639
  --pf-c-nav--c-menu__item--PaddingBottom: var(--pf-global--spacer--md);
@@ -17693,6 +17762,15 @@ ul.pf-c-list {
17693
17762
  --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu__item--m-current--after--BorderColor);
17694
17763
  background-color: var(--pf-c-nav--c-menu__item--m-current--BackgroundColor);
17695
17764
  }
17765
+ .pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up) {
17766
+ --pf-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth);
17767
+ }
17768
+ .pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up) > .pf-c-menu__item {
17769
+ --pf-c-menu__item--FontWeight: var(--pf-c-nav--c-menu__list-item--m-drill-up__item--FontWeight);
17770
+ }
17771
+ .pf-c-nav .pf-c-menu__item-toggle-icon {
17772
+ margin-left: calc(var(--pf-c-menu__item-toggle-icon--PaddingLeft) * -1);
17773
+ }
17696
17774
  .pf-c-nav.pf-m-horizontal .pf-c-nav__link::after, .pf-c-nav.pf-m-tertiary .pf-c-nav__link::after {
17697
17775
  content: none;
17698
17776
  }
@@ -26743,6 +26821,7 @@ svg.pf-c-spinner.pf-m-xl {
26743
26821
  --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
26744
26822
  --pf-c-text-input-group__text-input--MinWidth: 12ch;
26745
26823
  --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
26824
+ --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
26746
26825
  --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
26747
26826
  --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
26748
26827
  --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
@@ -26849,6 +26928,9 @@ svg.pf-c-spinner.pf-m-xl {
26849
26928
  .pf-c-text-input-group__text-input.pf-m-hint {
26850
26929
  color: var(--pf-c-text-input-group__text-input--m-hint--Color);
26851
26930
  }
26931
+ .pf-c-text-input-group__text-input::placeholder {
26932
+ color: var(--pf-c-text-input-group--placeholder--Color);
26933
+ }
26852
26934
 
26853
26935
  .pf-c-text-input-group__utilities {
26854
26936
  display: flex;
package/patternfly.css CHANGED
@@ -6148,6 +6148,20 @@ a {
6148
6148
  --pf-c-alert-group--m-toast--Right: var(--pf-global--spacer--xl);
6149
6149
  --pf-c-alert-group--m-toast--MaxWidth: 37.5rem;
6150
6150
  --pf-c-alert-group--m-toast--ZIndex: var(--pf-global--ZIndex--2xl);
6151
+ --pf-c-alert-group__overflow-button--BorderWidth: 0;
6152
+ --pf-c-alert-group__overflow-button--PaddingTop: var(--pf-global--spacer--lg);
6153
+ --pf-c-alert-group__overflow-button--PaddingRight: var(--pf-global--spacer--md);
6154
+ --pf-c-alert-group__overflow-button--PaddingBottom: var(--pf-global--spacer--lg);
6155
+ --pf-c-alert-group__overflow-button--PaddingLeft: var(--pf-global--spacer--md);
6156
+ --pf-c-alert-group__overflow-button--Color: var(--pf-global--link--Color);
6157
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-global--BoxShadow--lg);
6158
+ --pf-c-alert-group__overflow-button--BackgroundColor: var(--pf-global--BackgroundColor--100);
6159
+ --pf-c-alert-group__overflow-button--hover--Color: var(--pf-global--link--Color--hover);
6160
+ --pf-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
6161
+ --pf-c-alert-group__overflow-button--focus--Color: var(--pf-global--link--Color--hover);
6162
+ --pf-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
6163
+ --pf-c-alert-group__overflow-button--active--Color: var(--pf-global--link--Color--hover);
6164
+ --pf-c-alert-group__overflow-button--active--BoxShadow: var(--pf-global--BoxShadow--lg), var(--pf-global--BoxShadow--lg-bottom);
6151
6165
  }
6152
6166
  .pf-c-alert-group > * + * {
6153
6167
  margin-top: var(--pf-c-alert-group__item--MarginTop);
@@ -6161,6 +6175,28 @@ a {
6161
6175
  max-width: var(--pf-c-alert-group--m-toast--MaxWidth);
6162
6176
  }
6163
6177
 
6178
+ .pf-c-alert-group__overflow-button {
6179
+ position: relative;
6180
+ width: 100%;
6181
+ padding: var(--pf-c-alert-group__overflow-button--PaddingTop) var(--pf-c-alert-group__overflow-button--PaddingRight) var(--pf-c-alert-group__overflow-button--PaddingBottom) var(--pf-c-alert-group__overflow-button--PaddingLeft);
6182
+ color: var(--pf-c-alert-group__overflow-button--Color);
6183
+ background-color: var(--pf-c-alert-group__overflow-button--BackgroundColor);
6184
+ border-width: var(--pf-c-alert-group__overflow-button--BorderWidth);
6185
+ box-shadow: var(--pf-c-alert-group__overflow-button--BoxShadow);
6186
+ }
6187
+ .pf-c-alert-group__overflow-button:hover {
6188
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--hover--Color);
6189
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--hover--BoxShadow);
6190
+ }
6191
+ .pf-c-alert-group__overflow-button:focus {
6192
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--focus--Color);
6193
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--focus--BoxShadow);
6194
+ }
6195
+ .pf-c-alert-group__overflow-button:active {
6196
+ --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--active--Color);
6197
+ --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--active--BoxShadow);
6198
+ }
6199
+
6164
6200
  .pf-c-app-launcher {
6165
6201
  --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
6166
6202
  --pf-c-app-launcher__menu--BoxShadow: var(--pf-global--BoxShadow--md);
@@ -14757,7 +14793,9 @@ label.pf-c-input-group__text {
14757
14793
  --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
14758
14794
  --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
14759
14795
  --pf-c-label__content--Color: var(--pf-global--Color--100);
14796
+ --pf-c-label__content--MaxWidth: 100%;
14760
14797
  --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
14798
+ --pf-c-label--m-editable__content--MaxWidth: 16ch;
14761
14799
  --pf-c-label__text--MaxWidth: 16ch;
14762
14800
  --pf-c-label__icon--Color: var(--pf-global--Color--100);
14763
14801
  --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
@@ -14770,8 +14808,6 @@ label.pf-c-input-group__text {
14770
14808
  --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
14771
14809
  --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
14772
14810
  --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
14773
- --pf-c-label__editable-text--MaxWidth: 16ch;
14774
- --pf-c-label__editable-text--BorderWidth: 0;
14775
14811
  --pf-c-label--m-editable--Cursor: pointer;
14776
14812
  --pf-c-label--m-editable--TextDecoration: underline;
14777
14813
  --pf-c-label--m-editable--TextDecorationStyle: dashed;
@@ -14780,6 +14816,12 @@ label.pf-c-input-group__text {
14780
14816
  --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
14781
14817
  --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
14782
14818
  --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
14819
+ --pf-c-label--m-editable__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
14820
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-global--BorderColor--100);
14821
+ --pf-c-label--m-editable__content--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
14822
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-global--BorderColor--100);
14823
+ --pf-c-label--m-editable__content--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
14824
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-global--BorderColor--100);
14783
14825
  --pf-c-label--m-editable--m-editable-active--Cursor: auto;
14784
14826
  --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
14785
14827
  --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
@@ -14813,6 +14855,9 @@ label.pf-c-input-group__text {
14813
14855
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--before--BorderColor);
14814
14856
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor);
14815
14857
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor);
14858
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
14859
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
14860
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-blue__content--before--BorderColor);
14816
14861
  }
14817
14862
  .pf-c-label.pf-m-green {
14818
14863
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-green--BackgroundColor);
@@ -14825,6 +14870,9 @@ label.pf-c-input-group__text {
14825
14870
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--before--BorderColor);
14826
14871
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor);
14827
14872
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor);
14873
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
14874
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
14875
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-green__content--before--BorderColor);
14828
14876
  }
14829
14877
  .pf-c-label.pf-m-orange {
14830
14878
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-orange--BackgroundColor);
@@ -14837,6 +14885,9 @@ label.pf-c-input-group__text {
14837
14885
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--before--BorderColor);
14838
14886
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor);
14839
14887
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor);
14888
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
14889
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
14890
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-orange__content--before--BorderColor);
14840
14891
  }
14841
14892
  .pf-c-label.pf-m-red {
14842
14893
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-red--BackgroundColor);
@@ -14849,6 +14900,9 @@ label.pf-c-input-group__text {
14849
14900
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--before--BorderColor);
14850
14901
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor);
14851
14902
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor);
14903
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
14904
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
14905
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-red__content--before--BorderColor);
14852
14906
  }
14853
14907
  .pf-c-label.pf-m-purple {
14854
14908
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-purple--BackgroundColor);
@@ -14861,6 +14915,9 @@ label.pf-c-input-group__text {
14861
14915
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--before--BorderColor);
14862
14916
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor);
14863
14917
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor);
14918
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
14919
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
14920
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-purple__content--before--BorderColor);
14864
14921
  }
14865
14922
  .pf-c-label.pf-m-cyan {
14866
14923
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-cyan--BackgroundColor);
@@ -14873,12 +14930,18 @@ label.pf-c-input-group__text {
14873
14930
  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--before--BorderColor);
14874
14931
  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor);
14875
14932
  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor);
14933
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
14934
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
14935
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
14876
14936
  }
14877
14937
  .pf-c-label.pf-m-outline {
14878
14938
  --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
14879
14939
  --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
14880
14940
  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
14881
14941
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-outline--BackgroundColor);
14942
+ --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
14943
+ --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
14944
+ --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-outline__content--before--BorderColor);
14882
14945
  }
14883
14946
  .pf-c-label.pf-m-overflow:hover, .pf-c-label.pf-m-outline a.pf-c-label__content:hover,
14884
14947
  .pf-c-label.pf-m-outline button.pf-c-label__content:hover {
@@ -14898,6 +14961,15 @@ label.pf-c-input-group__text {
14898
14961
  text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
14899
14962
  text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
14900
14963
  text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
14964
+ --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
14965
+ --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
14966
+ --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
14967
+ --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--hover--before--BorderWidth);
14968
+ --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-editable__content--hover--before--BorderColor);
14969
+ --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--focus--before--BorderWidth);
14970
+ --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-editable__content--focus--before--BorderColor);
14971
+ --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
14972
+ --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
14901
14973
  }
14902
14974
  .pf-c-label.pf-m-editable:hover {
14903
14975
  --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
@@ -14909,19 +14981,10 @@ label.pf-c-input-group__text {
14909
14981
  --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
14910
14982
  --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
14911
14983
  --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
14912
- --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
14913
- --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
14914
14984
  }
14915
14985
  .pf-c-label.pf-m-editable-active .pf-c-button {
14916
14986
  visibility: hidden;
14917
14987
  }
14918
- .pf-c-label .pf-c-label__editable-text {
14919
- overflow: hidden;
14920
- text-overflow: ellipsis;
14921
- white-space: nowrap;
14922
- max-width: var(--pf-c-label__editable-text--MaxWidth);
14923
- border-width: var(--pf-c-label__editable-text--BorderWidth);
14924
- }
14925
14988
  .pf-c-label .pf-c-button {
14926
14989
  --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
14927
14990
  --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
@@ -14958,8 +15021,12 @@ label.pf-c-input-group__text {
14958
15021
  }
14959
15022
 
14960
15023
  .pf-c-label__content {
15024
+ overflow: hidden;
15025
+ text-overflow: ellipsis;
15026
+ white-space: nowrap;
15027
+ max-width: var(--pf-c-label__content--MaxWidth);
14961
15028
  color: var(--pf-c-label__content--Color);
14962
- border: 0;
15029
+ border-width: 0;
14963
15030
  }
14964
15031
  .pf-c-label__content::before {
14965
15032
  position: absolute;
@@ -17687,6 +17754,8 @@ ul.pf-c-list {
17687
17754
  --pf-c-nav--c-menu__list-item--focus-within--Color: var(--pf-global--Color--light-100);
17688
17755
  --pf-c-nav--c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
17689
17756
  --pf-c-nav--c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
17757
+ --pf-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth: var(--pf-global--BorderWidth--lg);
17758
+ --pf-c-nav--c-menu__list-item--m-drill-up__item--FontWeight: var(--pf-global--FontWeight--bold);
17690
17759
  --pf-c-nav--c-menu__item--PaddingTop: var(--pf-global--spacer--md);
17691
17760
  --pf-c-nav--c-menu__item--PaddingRight: var(--pf-global--spacer--md);
17692
17761
  --pf-c-nav--c-menu__item--PaddingBottom: var(--pf-global--spacer--md);
@@ -17815,6 +17884,15 @@ ul.pf-c-list {
17815
17884
  --pf-c-nav--c-menu__item--after--BorderLeftColor: var(--pf-c-nav--c-menu__item--m-current--after--BorderColor);
17816
17885
  background-color: var(--pf-c-nav--c-menu__item--m-current--BackgroundColor);
17817
17886
  }
17887
+ .pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up) {
17888
+ --pf-c-nav--c-menu__item--before--BorderBottomWidth: var(--pf-c-nav--c-menu__list-item--m-drill-up--before--BorderBottomWidth);
17889
+ }
17890
+ .pf-c-nav .pf-c-menu__list-item:where(.pf-m-drill-up) > .pf-c-menu__item {
17891
+ --pf-c-menu__item--FontWeight: var(--pf-c-nav--c-menu__list-item--m-drill-up__item--FontWeight);
17892
+ }
17893
+ .pf-c-nav .pf-c-menu__item-toggle-icon {
17894
+ margin-left: calc(var(--pf-c-menu__item-toggle-icon--PaddingLeft) * -1);
17895
+ }
17818
17896
  .pf-c-nav.pf-m-horizontal .pf-c-nav__link::after, .pf-c-nav.pf-m-tertiary .pf-c-nav__link::after {
17819
17897
  content: none;
17820
17898
  }
@@ -26865,6 +26943,7 @@ svg.pf-c-spinner.pf-m-xl {
26865
26943
  --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
26866
26944
  --pf-c-text-input-group__text-input--MinWidth: 12ch;
26867
26945
  --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
26946
+ --pf-c-text-input-group--placeholder--Color: var(--pf-global--Color--dark-200);
26868
26947
  --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
26869
26948
  --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
26870
26949
  --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
@@ -26971,6 +27050,9 @@ svg.pf-c-spinner.pf-m-xl {
26971
27050
  .pf-c-text-input-group__text-input.pf-m-hint {
26972
27051
  color: var(--pf-c-text-input-group__text-input--m-hint--Color);
26973
27052
  }
27053
+ .pf-c-text-input-group__text-input::placeholder {
27054
+ color: var(--pf-c-text-input-group--placeholder--Color);
27055
+ }
26974
27056
 
26975
27057
  .pf-c-text-input-group__utilities {
26976
27058
  display: flex;