@patternfly/patternfly 4.188.0 → 4.189.0

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.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.188.0",
4
+ "version": "4.189.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -26532,6 +26532,8 @@ svg.pf-c-spinner.pf-m-xl {
26532
26532
  --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--palette--black-150);
26533
26533
  --pf-c-tabs__list--Display: flex;
26534
26534
  --pf-c-tabs__list--Visibility: visible;
26535
+ --pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
26536
+ --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--sm);
26535
26537
  --pf-c-tabs__link--Color: var(--pf-global--Color--200);
26536
26538
  --pf-c-tabs__link--FontSize: var(--pf-global--FontSize--md);
26537
26539
  --pf-c-tabs__link--BackgroundColor: transparent;
@@ -26547,11 +26549,14 @@ svg.pf-c-spinner.pf-m-xl {
26547
26549
  --pf-c-tabs--m-vertical__link--PaddingBottom: var(--pf-global--spacer--md);
26548
26550
  --pf-c-tabs--m-box__link--BackgroundColor: var(--pf-global--BackgroundColor--200);
26549
26551
  --pf-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
26552
+ --pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
26550
26553
  --pf-c-tabs--m-secondary__link--FontSize: var(--pf-global--FontSize--sm);
26551
26554
  --pf-c-tabs__link--before--border-color--base: var(--pf-global--BorderColor--100);
26555
+ --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
26556
+ --pf-c-tabs__link--before--BorderTopColor: var(--pf-c-tabs__link--before--border-color--base);
26552
26557
  --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__link--before--border-color--base);
26553
26558
  --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base);
26554
- --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
26559
+ --pf-c-tabs__link--before--BorderLeftColor: var(--pf-c-tabs__link--before--border-color--base);
26555
26560
  --pf-c-tabs__link--before--BorderTopWidth: 0;
26556
26561
  --pf-c-tabs__link--before--BorderRightWidth: 0;
26557
26562
  --pf-c-tabs__link--before--BorderBottomWidth: 0;
@@ -26609,6 +26614,19 @@ svg.pf-c-spinner.pf-m-xl {
26609
26614
  --pf-c-tabs__toggle-button--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
26610
26615
  --pf-c-tabs--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
26611
26616
  --pf-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
26617
+ --pf-c-tabs__item-close--c-button--FontSize: var(--pf-global--FontSize--xs);
26618
+ --pf-c-tabs--m-secondary__item-close--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
26619
+ --pf-c-tabs__item-close--c-button--PaddingTop: var(--pf-global--spacer--sm);
26620
+ --pf-c-tabs__item-close--c-button--PaddingBottom: var(--pf-global--spacer--sm);
26621
+ --pf-c-tabs__item-close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
26622
+ --pf-c-tabs__item-close--c-button--OutlineOffset: -0.1875rem;
26623
+ --pf-c-tabs__item-close-icon--MarginTop: 0.125rem;
26624
+ --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
26625
+ --pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
26626
+ --pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
26627
+ --pf-c-tabs--m-secondary__add--c-button--FontSize: var(--pf-global--FontSize--xs);
26628
+ --pf-c-tabs__add--c-button--PaddingTop: var(--pf-c-tabs__link--PaddingTop);
26629
+ --pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
26612
26630
  position: relative;
26613
26631
  display: flex;
26614
26632
  width: var(--pf-c-tabs--Width);
@@ -26707,6 +26725,9 @@ svg.pf-c-spinner.pf-m-xl {
26707
26725
  --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor);
26708
26726
  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor);
26709
26727
  }
26728
+ .pf-c-tabs.pf-m-box .pf-c-tabs__item-close .pf-c-button {
26729
+ --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor);
26730
+ }
26710
26731
  .pf-c-tabs.pf-m-vertical {
26711
26732
  --pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width);
26712
26733
  --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--inset);
@@ -26879,6 +26900,8 @@ svg.pf-c-spinner.pf-m-xl {
26879
26900
  }
26880
26901
  .pf-c-tabs.pf-m-secondary {
26881
26902
  --pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
26903
+ --pf-c-tabs__item-close--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-close--c-button--FontSize);
26904
+ --pf-c-tabs__add--c-button--FontSize: var(--pf-c-tabs--m-secondary__add--c-button--FontSize);
26882
26905
  }
26883
26906
  .pf-c-tabs.pf-m-page-insets {
26884
26907
  --pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset);
@@ -26942,12 +26965,26 @@ svg.pf-c-spinner.pf-m-xl {
26942
26965
  --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor);
26943
26966
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth);
26944
26967
  }
26968
+ .pf-c-tabs__item.pf-m-action {
26969
+ --pf-c-tabs__link--PaddingRight: var(--pf-c-tabs__item--m-action__link--PaddingRight);
26970
+ position: relative;
26971
+ }
26972
+ .pf-c-tabs__item.pf-m-action::before {
26973
+ z-index: var(--pf-c-tabs__item--m-action--before--ZIndex);
26974
+ }
26975
+ .pf-c-tabs__item.pf-m-action .pf-c-tabs__link::before,
26976
+ .pf-c-tabs__item.pf-m-action .pf-c-tabs__link::after {
26977
+ content: revert;
26978
+ }
26945
26979
 
26946
26980
  .pf-c-tabs::before,
26947
26981
  .pf-c-tabs__list::before,
26948
26982
  .pf-c-tabs__link::before,
26949
26983
  .pf-c-tabs__link::after,
26950
- .pf-c-tabs__scroll-button::before {
26984
+ .pf-c-tabs__item.pf-m-action::before,
26985
+ .pf-c-tabs__item.pf-m-action::after,
26986
+ .pf-c-tabs__scroll-button::before,
26987
+ .pf-c-tabs__add::before {
26951
26988
  position: absolute;
26952
26989
  right: 0;
26953
26990
  bottom: 0;
@@ -26959,18 +26996,21 @@ svg.pf-c-spinner.pf-m-xl {
26959
26996
  .pf-c-tabs__list::before,
26960
26997
  .pf-c-tabs__link::before,
26961
26998
  .pf-c-tabs__link::after,
26962
- .pf-c-tabs__scroll-button::before {
26999
+ .pf-c-tabs__item.pf-m-action::before,
27000
+ .pf-c-tabs__item.pf-m-action::after,
27001
+ .pf-c-tabs__scroll-button::before,
27002
+ .pf-c-tabs__add::before {
26963
27003
  top: 0;
26964
27004
  }
26965
27005
 
26966
27006
  .pf-c-tabs__link,
26967
27007
  .pf-c-tabs__scroll-button,
26968
- .pf-c-tabs__list::before {
27008
+ .pf-c-tabs__list::before,
27009
+ .pf-c-tabs__add::before {
26969
27010
  border: 0;
26970
27011
  }
26971
27012
 
26972
27013
  .pf-c-tabs__link {
26973
- --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
26974
27014
  position: relative;
26975
27015
  display: flex;
26976
27016
  flex: 1;
@@ -26978,17 +27018,23 @@ svg.pf-c-spinner.pf-m-xl {
26978
27018
  font-size: var(--pf-c-tabs__link--FontSize);
26979
27019
  color: var(--pf-c-tabs__link--Color);
26980
27020
  text-decoration: none;
26981
- background-color: var(--pf-c-tabs__link--BackgroundColor);
26982
27021
  outline-offset: var(--pf-c-tabs__link--OutlineOffset);
26983
27022
  }
26984
- .pf-c-tabs__link::before {
27023
+ .pf-c-tabs__item.pf-m-action, .pf-c-tabs__link {
27024
+ --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
27025
+ background-color: var(--pf-c-tabs__link--BackgroundColor);
27026
+ }
27027
+
27028
+ .pf-c-tabs__item.pf-m-action::before, .pf-c-tabs__link::before {
26985
27029
  pointer-events: none;
26986
- border-color: var(--pf-c-tabs__link--before--border-color--base);
26987
27030
  border-width: var(--pf-c-tabs__link--before--BorderTopWidth) var(--pf-c-tabs__link--before--BorderRightWidth) var(--pf-c-tabs__link--before--BorderBottomWidth) var(--pf-c-tabs__link--before--BorderLeftWidth);
27031
+ border-top-color: var(--pf-c-tabs__link--before--BorderTopColor);
26988
27032
  border-right-color: var(--pf-c-tabs__link--before--BorderRightColor);
26989
27033
  border-bottom-color: var(--pf-c-tabs__link--before--BorderBottomColor);
27034
+ border-left-color: var(--pf-c-tabs__link--before--BorderLeftColor);
26990
27035
  }
26991
- .pf-c-tabs__link::after {
27036
+
27037
+ .pf-c-tabs__item.pf-m-action::after, .pf-c-tabs__link::after {
26992
27038
  top: var(--pf-c-tabs__link--after--Top);
26993
27039
  right: var(--pf-c-tabs__link--after--Right);
26994
27040
  bottom: var(--pf-c-tabs__link--after--Bottom);
@@ -26996,25 +27042,30 @@ svg.pf-c-spinner.pf-m-xl {
26996
27042
  border-color: var(--pf-c-tabs__link--after--BorderColor);
26997
27043
  border-width: var(--pf-c-tabs__link--after--BorderTopWidth) var(--pf-c-tabs__link--after--BorderRightWidth) var(--pf-c-tabs__link--after--BorderBottomWidth) var(--pf-c-tabs__link--after--BorderLeftWidth);
26998
27044
  }
26999
- .pf-c-tabs__link:hover {
27045
+
27046
+ .pf-c-tabs__item.pf-m-action:hover, .pf-c-tabs__link:hover {
27000
27047
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth);
27001
27048
  }
27002
- .pf-c-tabs__link:focus {
27049
+
27050
+ .pf-c-tabs__item.pf-m-action:focus-within, .pf-c-tabs__link:focus {
27003
27051
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth);
27004
27052
  }
27005
- .pf-c-tabs__link:active {
27053
+
27054
+ .pf-c-tabs__item.pf-m-action:active, .pf-c-tabs__link:active {
27006
27055
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
27007
27056
  }
27057
+
27008
27058
  .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled {
27009
27059
  pointer-events: none;
27010
27060
  }
27011
- .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
27061
+ .pf-c-tabs__item.pf-m-action.pf-m-disabled, .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
27012
27062
  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor);
27013
27063
  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth);
27014
27064
  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth);
27015
27065
  --pf-c-tabs__link--before--BorderLeftWidth: var(--pf-c-tabs__link--disabled--before--BorderLeftWidth);
27016
27066
  --pf-c-tabs__link--after--BorderWidth: 0;
27017
27067
  }
27068
+
27018
27069
  .pf-c-tabs__link.pf-m-aria-disabled {
27019
27070
  cursor: default;
27020
27071
  }
@@ -27027,6 +27078,22 @@ svg.pf-c-spinner.pf-m-xl {
27027
27078
  --pf-c-tabs__link--child--MarginRight: 0;
27028
27079
  }
27029
27080
 
27081
+ .pf-c-tabs__item-close {
27082
+ display: flex;
27083
+ }
27084
+ .pf-c-tabs__item-close .pf-c-button {
27085
+ --pf-c-button--FontSize: var(--pf-c-tabs__item-close--c-button--FontSize);
27086
+ --pf-c-button--PaddingTop: var(--pf-c-tabs__item-close--c-button--PaddingTop);
27087
+ --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-close--c-button--PaddingBottom);
27088
+ --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-close--c-button--PaddingLeft);
27089
+ outline-offset: var(--pf-c-tabs__item-close--c-button--OutlineOffset);
27090
+ }
27091
+
27092
+ .pf-c-tabs__item-close-icon {
27093
+ display: inline-block;
27094
+ margin-top: var(--pf-c-tabs__item-close-icon--MarginTop);
27095
+ }
27096
+
27030
27097
  .pf-c-tabs__scroll-button {
27031
27098
  flex: none;
27032
27099
  width: var(--pf-c-tabs__scroll-button--Width);
@@ -27059,6 +27126,19 @@ svg.pf-c-spinner.pf-m-xl {
27059
27126
  pointer-events: none;
27060
27127
  }
27061
27128
 
27129
+ .pf-c-tabs__add {
27130
+ position: relative;
27131
+ display: flex;
27132
+ }
27133
+ .pf-c-tabs__add::before {
27134
+ border-left: var(--pf-c-tabs__add--before--BorderLeftWidth) solid var(--pf-c-tabs__add--before--BorderColor);
27135
+ }
27136
+ .pf-c-tabs__add .pf-c-button {
27137
+ --pf-c-button--FontSize: var(--pf-c-tabs__add--c-button--FontSize);
27138
+ --pf-c-button--PaddingTop: var(--pf-c-tabs__add--c-button--PaddingTop);
27139
+ --pf-c-button--PaddingBottom: var(--pf-c-tabs__add--c-button--PaddingBottom);
27140
+ }
27141
+
27062
27142
  .pf-c-tabs.pf-m-inset-none {
27063
27143
  --pf-c-tabs--inset: 0;
27064
27144
  --pf-c-tabs--m-vertical--inset: 0;
package/patternfly.css CHANGED
@@ -26659,6 +26659,8 @@ svg.pf-c-spinner.pf-m-xl {
26659
26659
  --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--palette--black-150);
26660
26660
  --pf-c-tabs__list--Display: flex;
26661
26661
  --pf-c-tabs__list--Visibility: visible;
26662
+ --pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
26663
+ --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--sm);
26662
26664
  --pf-c-tabs__link--Color: var(--pf-global--Color--200);
26663
26665
  --pf-c-tabs__link--FontSize: var(--pf-global--FontSize--md);
26664
26666
  --pf-c-tabs__link--BackgroundColor: transparent;
@@ -26674,11 +26676,14 @@ svg.pf-c-spinner.pf-m-xl {
26674
26676
  --pf-c-tabs--m-vertical__link--PaddingBottom: var(--pf-global--spacer--md);
26675
26677
  --pf-c-tabs--m-box__link--BackgroundColor: var(--pf-global--BackgroundColor--200);
26676
26678
  --pf-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
26679
+ --pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
26677
26680
  --pf-c-tabs--m-secondary__link--FontSize: var(--pf-global--FontSize--sm);
26678
26681
  --pf-c-tabs__link--before--border-color--base: var(--pf-global--BorderColor--100);
26682
+ --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
26683
+ --pf-c-tabs__link--before--BorderTopColor: var(--pf-c-tabs__link--before--border-color--base);
26679
26684
  --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__link--before--border-color--base);
26680
26685
  --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base);
26681
- --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
26686
+ --pf-c-tabs__link--before--BorderLeftColor: var(--pf-c-tabs__link--before--border-color--base);
26682
26687
  --pf-c-tabs__link--before--BorderTopWidth: 0;
26683
26688
  --pf-c-tabs__link--before--BorderRightWidth: 0;
26684
26689
  --pf-c-tabs__link--before--BorderBottomWidth: 0;
@@ -26736,6 +26741,19 @@ svg.pf-c-spinner.pf-m-xl {
26736
26741
  --pf-c-tabs__toggle-button--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
26737
26742
  --pf-c-tabs--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
26738
26743
  --pf-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
26744
+ --pf-c-tabs__item-close--c-button--FontSize: var(--pf-global--FontSize--xs);
26745
+ --pf-c-tabs--m-secondary__item-close--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
26746
+ --pf-c-tabs__item-close--c-button--PaddingTop: var(--pf-global--spacer--sm);
26747
+ --pf-c-tabs__item-close--c-button--PaddingBottom: var(--pf-global--spacer--sm);
26748
+ --pf-c-tabs__item-close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
26749
+ --pf-c-tabs__item-close--c-button--OutlineOffset: -0.1875rem;
26750
+ --pf-c-tabs__item-close-icon--MarginTop: 0.125rem;
26751
+ --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
26752
+ --pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
26753
+ --pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
26754
+ --pf-c-tabs--m-secondary__add--c-button--FontSize: var(--pf-global--FontSize--xs);
26755
+ --pf-c-tabs__add--c-button--PaddingTop: var(--pf-c-tabs__link--PaddingTop);
26756
+ --pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
26739
26757
  position: relative;
26740
26758
  display: flex;
26741
26759
  width: var(--pf-c-tabs--Width);
@@ -26834,6 +26852,9 @@ svg.pf-c-spinner.pf-m-xl {
26834
26852
  --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor);
26835
26853
  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor);
26836
26854
  }
26855
+ .pf-c-tabs.pf-m-box .pf-c-tabs__item-close .pf-c-button {
26856
+ --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor);
26857
+ }
26837
26858
  .pf-c-tabs.pf-m-vertical {
26838
26859
  --pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width);
26839
26860
  --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--inset);
@@ -27006,6 +27027,8 @@ svg.pf-c-spinner.pf-m-xl {
27006
27027
  }
27007
27028
  .pf-c-tabs.pf-m-secondary {
27008
27029
  --pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
27030
+ --pf-c-tabs__item-close--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-close--c-button--FontSize);
27031
+ --pf-c-tabs__add--c-button--FontSize: var(--pf-c-tabs--m-secondary__add--c-button--FontSize);
27009
27032
  }
27010
27033
  .pf-c-tabs.pf-m-page-insets {
27011
27034
  --pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset);
@@ -27069,12 +27092,26 @@ svg.pf-c-spinner.pf-m-xl {
27069
27092
  --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor);
27070
27093
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth);
27071
27094
  }
27095
+ .pf-c-tabs__item.pf-m-action {
27096
+ --pf-c-tabs__link--PaddingRight: var(--pf-c-tabs__item--m-action__link--PaddingRight);
27097
+ position: relative;
27098
+ }
27099
+ .pf-c-tabs__item.pf-m-action::before {
27100
+ z-index: var(--pf-c-tabs__item--m-action--before--ZIndex);
27101
+ }
27102
+ .pf-c-tabs__item.pf-m-action .pf-c-tabs__link::before,
27103
+ .pf-c-tabs__item.pf-m-action .pf-c-tabs__link::after {
27104
+ content: revert;
27105
+ }
27072
27106
 
27073
27107
  .pf-c-tabs::before,
27074
27108
  .pf-c-tabs__list::before,
27075
27109
  .pf-c-tabs__link::before,
27076
27110
  .pf-c-tabs__link::after,
27077
- .pf-c-tabs__scroll-button::before {
27111
+ .pf-c-tabs__item.pf-m-action::before,
27112
+ .pf-c-tabs__item.pf-m-action::after,
27113
+ .pf-c-tabs__scroll-button::before,
27114
+ .pf-c-tabs__add::before {
27078
27115
  position: absolute;
27079
27116
  right: 0;
27080
27117
  bottom: 0;
@@ -27086,18 +27123,21 @@ svg.pf-c-spinner.pf-m-xl {
27086
27123
  .pf-c-tabs__list::before,
27087
27124
  .pf-c-tabs__link::before,
27088
27125
  .pf-c-tabs__link::after,
27089
- .pf-c-tabs__scroll-button::before {
27126
+ .pf-c-tabs__item.pf-m-action::before,
27127
+ .pf-c-tabs__item.pf-m-action::after,
27128
+ .pf-c-tabs__scroll-button::before,
27129
+ .pf-c-tabs__add::before {
27090
27130
  top: 0;
27091
27131
  }
27092
27132
 
27093
27133
  .pf-c-tabs__link,
27094
27134
  .pf-c-tabs__scroll-button,
27095
- .pf-c-tabs__list::before {
27135
+ .pf-c-tabs__list::before,
27136
+ .pf-c-tabs__add::before {
27096
27137
  border: 0;
27097
27138
  }
27098
27139
 
27099
27140
  .pf-c-tabs__link {
27100
- --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
27101
27141
  position: relative;
27102
27142
  display: flex;
27103
27143
  flex: 1;
@@ -27105,17 +27145,23 @@ svg.pf-c-spinner.pf-m-xl {
27105
27145
  font-size: var(--pf-c-tabs__link--FontSize);
27106
27146
  color: var(--pf-c-tabs__link--Color);
27107
27147
  text-decoration: none;
27108
- background-color: var(--pf-c-tabs__link--BackgroundColor);
27109
27148
  outline-offset: var(--pf-c-tabs__link--OutlineOffset);
27110
27149
  }
27111
- .pf-c-tabs__link::before {
27150
+ .pf-c-tabs__item.pf-m-action, .pf-c-tabs__link {
27151
+ --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
27152
+ background-color: var(--pf-c-tabs__link--BackgroundColor);
27153
+ }
27154
+
27155
+ .pf-c-tabs__item.pf-m-action::before, .pf-c-tabs__link::before {
27112
27156
  pointer-events: none;
27113
- border-color: var(--pf-c-tabs__link--before--border-color--base);
27114
27157
  border-width: var(--pf-c-tabs__link--before--BorderTopWidth) var(--pf-c-tabs__link--before--BorderRightWidth) var(--pf-c-tabs__link--before--BorderBottomWidth) var(--pf-c-tabs__link--before--BorderLeftWidth);
27158
+ border-top-color: var(--pf-c-tabs__link--before--BorderTopColor);
27115
27159
  border-right-color: var(--pf-c-tabs__link--before--BorderRightColor);
27116
27160
  border-bottom-color: var(--pf-c-tabs__link--before--BorderBottomColor);
27161
+ border-left-color: var(--pf-c-tabs__link--before--BorderLeftColor);
27117
27162
  }
27118
- .pf-c-tabs__link::after {
27163
+
27164
+ .pf-c-tabs__item.pf-m-action::after, .pf-c-tabs__link::after {
27119
27165
  top: var(--pf-c-tabs__link--after--Top);
27120
27166
  right: var(--pf-c-tabs__link--after--Right);
27121
27167
  bottom: var(--pf-c-tabs__link--after--Bottom);
@@ -27123,25 +27169,30 @@ svg.pf-c-spinner.pf-m-xl {
27123
27169
  border-color: var(--pf-c-tabs__link--after--BorderColor);
27124
27170
  border-width: var(--pf-c-tabs__link--after--BorderTopWidth) var(--pf-c-tabs__link--after--BorderRightWidth) var(--pf-c-tabs__link--after--BorderBottomWidth) var(--pf-c-tabs__link--after--BorderLeftWidth);
27125
27171
  }
27126
- .pf-c-tabs__link:hover {
27172
+
27173
+ .pf-c-tabs__item.pf-m-action:hover, .pf-c-tabs__link:hover {
27127
27174
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth);
27128
27175
  }
27129
- .pf-c-tabs__link:focus {
27176
+
27177
+ .pf-c-tabs__item.pf-m-action:focus-within, .pf-c-tabs__link:focus {
27130
27178
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth);
27131
27179
  }
27132
- .pf-c-tabs__link:active {
27180
+
27181
+ .pf-c-tabs__item.pf-m-action:active, .pf-c-tabs__link:active {
27133
27182
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
27134
27183
  }
27184
+
27135
27185
  .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled {
27136
27186
  pointer-events: none;
27137
27187
  }
27138
- .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
27188
+ .pf-c-tabs__item.pf-m-action.pf-m-disabled, .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
27139
27189
  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor);
27140
27190
  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth);
27141
27191
  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth);
27142
27192
  --pf-c-tabs__link--before--BorderLeftWidth: var(--pf-c-tabs__link--disabled--before--BorderLeftWidth);
27143
27193
  --pf-c-tabs__link--after--BorderWidth: 0;
27144
27194
  }
27195
+
27145
27196
  .pf-c-tabs__link.pf-m-aria-disabled {
27146
27197
  cursor: default;
27147
27198
  }
@@ -27154,6 +27205,22 @@ svg.pf-c-spinner.pf-m-xl {
27154
27205
  --pf-c-tabs__link--child--MarginRight: 0;
27155
27206
  }
27156
27207
 
27208
+ .pf-c-tabs__item-close {
27209
+ display: flex;
27210
+ }
27211
+ .pf-c-tabs__item-close .pf-c-button {
27212
+ --pf-c-button--FontSize: var(--pf-c-tabs__item-close--c-button--FontSize);
27213
+ --pf-c-button--PaddingTop: var(--pf-c-tabs__item-close--c-button--PaddingTop);
27214
+ --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-close--c-button--PaddingBottom);
27215
+ --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-close--c-button--PaddingLeft);
27216
+ outline-offset: var(--pf-c-tabs__item-close--c-button--OutlineOffset);
27217
+ }
27218
+
27219
+ .pf-c-tabs__item-close-icon {
27220
+ display: inline-block;
27221
+ margin-top: var(--pf-c-tabs__item-close-icon--MarginTop);
27222
+ }
27223
+
27157
27224
  .pf-c-tabs__scroll-button {
27158
27225
  flex: none;
27159
27226
  width: var(--pf-c-tabs__scroll-button--Width);
@@ -27186,6 +27253,19 @@ svg.pf-c-spinner.pf-m-xl {
27186
27253
  pointer-events: none;
27187
27254
  }
27188
27255
 
27256
+ .pf-c-tabs__add {
27257
+ position: relative;
27258
+ display: flex;
27259
+ }
27260
+ .pf-c-tabs__add::before {
27261
+ border-left: var(--pf-c-tabs__add--before--BorderLeftWidth) solid var(--pf-c-tabs__add--before--BorderColor);
27262
+ }
27263
+ .pf-c-tabs__add .pf-c-button {
27264
+ --pf-c-button--FontSize: var(--pf-c-tabs__add--c-button--FontSize);
27265
+ --pf-c-button--PaddingTop: var(--pf-c-tabs__add--c-button--PaddingTop);
27266
+ --pf-c-button--PaddingBottom: var(--pf-c-tabs__add--c-button--PaddingBottom);
27267
+ }
27268
+
27189
27269
  .pf-c-tabs.pf-m-inset-none {
27190
27270
  --pf-c-tabs--inset: 0;
27191
27271
  --pf-c-tabs--m-vertical--inset: 0;