@patternfly/patternfly 4.188.0 → 4.191.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.191.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -15778,17 +15778,25 @@ ul.pf-c-list {
15778
15778
  grid-template-columns: 1fr auto;
15779
15779
  }
15780
15780
  }
15781
+
15782
+ .pf-c-login__main-header-utilities,
15781
15783
  .pf-c-login__main-header .pf-c-dropdown {
15782
15784
  grid-column: auto;
15783
15785
  grid-row: auto;
15784
15786
  }
15785
15787
  @media (min-width: 768px) {
15786
- .pf-c-login__main-header .pf-c-dropdown {
15788
+ .pf-c-login__main-header-utilities,
15789
+ .pf-c-login__main-header .pf-c-dropdown {
15787
15790
  grid-column: 2/3;
15788
15791
  grid-row: 1;
15789
15792
  }
15790
15793
  }
15791
15794
 
15795
+ .pf-c-login__main-header-utilities .pf-c-dropdown {
15796
+ grid-column: auto;
15797
+ grid-row: auto;
15798
+ }
15799
+
15792
15800
  .pf-c-login__main-header-desc {
15793
15801
  margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
15794
15802
  font-size: var(--pf-c-login__main-header-desc--FontSize);
@@ -19497,6 +19505,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19497
19505
  --pf-c-page__main-wizard--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
19498
19506
  --pf-c-page__main-wizard--BorderTopColor: var(--pf-global--BorderColor--100);
19499
19507
  --pf-c-page__main-wizard--BorderTopWidth: var(--pf-global--BorderWidth--sm);
19508
+ --pf-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
19500
19509
  display: grid;
19501
19510
  height: 100%;
19502
19511
  grid-template-columns: 1fr;
@@ -20026,6 +20035,9 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20026
20035
  .pf-c-page__main-wizard:first-child {
20027
20036
  --pf-c-page__main-wizard--BorderTopWidth: 0;
20028
20037
  }
20038
+ .pf-c-page__main-wizard.pf-m-light-200 {
20039
+ --pf-c-page__main-wizard--BackgroundColor: var(--pf-c-page__main-wizard--m-light-200--BackgroundColor);
20040
+ }
20029
20041
 
20030
20042
  .pf-c-page__main-wizard .pf-c-page__main-body {
20031
20043
  min-height: 0;
@@ -26532,6 +26544,8 @@ svg.pf-c-spinner.pf-m-xl {
26532
26544
  --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--palette--black-150);
26533
26545
  --pf-c-tabs__list--Display: flex;
26534
26546
  --pf-c-tabs__list--Visibility: visible;
26547
+ --pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
26548
+ --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--sm);
26535
26549
  --pf-c-tabs__link--Color: var(--pf-global--Color--200);
26536
26550
  --pf-c-tabs__link--FontSize: var(--pf-global--FontSize--md);
26537
26551
  --pf-c-tabs__link--BackgroundColor: transparent;
@@ -26547,11 +26561,14 @@ svg.pf-c-spinner.pf-m-xl {
26547
26561
  --pf-c-tabs--m-vertical__link--PaddingBottom: var(--pf-global--spacer--md);
26548
26562
  --pf-c-tabs--m-box__link--BackgroundColor: var(--pf-global--BackgroundColor--200);
26549
26563
  --pf-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
26564
+ --pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
26550
26565
  --pf-c-tabs--m-secondary__link--FontSize: var(--pf-global--FontSize--sm);
26551
26566
  --pf-c-tabs__link--before--border-color--base: var(--pf-global--BorderColor--100);
26567
+ --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
26568
+ --pf-c-tabs__link--before--BorderTopColor: var(--pf-c-tabs__link--before--border-color--base);
26552
26569
  --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__link--before--border-color--base);
26553
26570
  --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);
26571
+ --pf-c-tabs__link--before--BorderLeftColor: var(--pf-c-tabs__link--before--border-color--base);
26555
26572
  --pf-c-tabs__link--before--BorderTopWidth: 0;
26556
26573
  --pf-c-tabs__link--before--BorderRightWidth: 0;
26557
26574
  --pf-c-tabs__link--before--BorderBottomWidth: 0;
@@ -26609,6 +26626,19 @@ svg.pf-c-spinner.pf-m-xl {
26609
26626
  --pf-c-tabs__toggle-button--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
26610
26627
  --pf-c-tabs--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
26611
26628
  --pf-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
26629
+ --pf-c-tabs__item-close--c-button--FontSize: var(--pf-global--FontSize--xs);
26630
+ --pf-c-tabs--m-secondary__item-close--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
26631
+ --pf-c-tabs__item-close--c-button--PaddingTop: var(--pf-global--spacer--sm);
26632
+ --pf-c-tabs__item-close--c-button--PaddingBottom: var(--pf-global--spacer--sm);
26633
+ --pf-c-tabs__item-close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
26634
+ --pf-c-tabs__item-close--c-button--OutlineOffset: -0.1875rem;
26635
+ --pf-c-tabs__item-close-icon--MarginTop: 0.125rem;
26636
+ --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
26637
+ --pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
26638
+ --pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
26639
+ --pf-c-tabs--m-secondary__add--c-button--FontSize: var(--pf-global--FontSize--xs);
26640
+ --pf-c-tabs__add--c-button--PaddingTop: var(--pf-c-tabs__link--PaddingTop);
26641
+ --pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
26612
26642
  position: relative;
26613
26643
  display: flex;
26614
26644
  width: var(--pf-c-tabs--Width);
@@ -26707,6 +26737,9 @@ svg.pf-c-spinner.pf-m-xl {
26707
26737
  --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor);
26708
26738
  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor);
26709
26739
  }
26740
+ .pf-c-tabs.pf-m-box .pf-c-tabs__item-close .pf-c-button {
26741
+ --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor);
26742
+ }
26710
26743
  .pf-c-tabs.pf-m-vertical {
26711
26744
  --pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width);
26712
26745
  --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--inset);
@@ -26879,6 +26912,8 @@ svg.pf-c-spinner.pf-m-xl {
26879
26912
  }
26880
26913
  .pf-c-tabs.pf-m-secondary {
26881
26914
  --pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
26915
+ --pf-c-tabs__item-close--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-close--c-button--FontSize);
26916
+ --pf-c-tabs__add--c-button--FontSize: var(--pf-c-tabs--m-secondary__add--c-button--FontSize);
26882
26917
  }
26883
26918
  .pf-c-tabs.pf-m-page-insets {
26884
26919
  --pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset);
@@ -26942,12 +26977,26 @@ svg.pf-c-spinner.pf-m-xl {
26942
26977
  --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor);
26943
26978
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth);
26944
26979
  }
26980
+ .pf-c-tabs__item.pf-m-action {
26981
+ --pf-c-tabs__link--PaddingRight: var(--pf-c-tabs__item--m-action__link--PaddingRight);
26982
+ position: relative;
26983
+ }
26984
+ .pf-c-tabs__item.pf-m-action::before {
26985
+ z-index: var(--pf-c-tabs__item--m-action--before--ZIndex);
26986
+ }
26987
+ .pf-c-tabs__item.pf-m-action .pf-c-tabs__link::before,
26988
+ .pf-c-tabs__item.pf-m-action .pf-c-tabs__link::after {
26989
+ content: revert;
26990
+ }
26945
26991
 
26946
26992
  .pf-c-tabs::before,
26947
26993
  .pf-c-tabs__list::before,
26948
26994
  .pf-c-tabs__link::before,
26949
26995
  .pf-c-tabs__link::after,
26950
- .pf-c-tabs__scroll-button::before {
26996
+ .pf-c-tabs__item.pf-m-action::before,
26997
+ .pf-c-tabs__item.pf-m-action::after,
26998
+ .pf-c-tabs__scroll-button::before,
26999
+ .pf-c-tabs__add::before {
26951
27000
  position: absolute;
26952
27001
  right: 0;
26953
27002
  bottom: 0;
@@ -26959,18 +27008,21 @@ svg.pf-c-spinner.pf-m-xl {
26959
27008
  .pf-c-tabs__list::before,
26960
27009
  .pf-c-tabs__link::before,
26961
27010
  .pf-c-tabs__link::after,
26962
- .pf-c-tabs__scroll-button::before {
27011
+ .pf-c-tabs__item.pf-m-action::before,
27012
+ .pf-c-tabs__item.pf-m-action::after,
27013
+ .pf-c-tabs__scroll-button::before,
27014
+ .pf-c-tabs__add::before {
26963
27015
  top: 0;
26964
27016
  }
26965
27017
 
26966
27018
  .pf-c-tabs__link,
26967
27019
  .pf-c-tabs__scroll-button,
26968
- .pf-c-tabs__list::before {
27020
+ .pf-c-tabs__list::before,
27021
+ .pf-c-tabs__add::before {
26969
27022
  border: 0;
26970
27023
  }
26971
27024
 
26972
27025
  .pf-c-tabs__link {
26973
- --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
26974
27026
  position: relative;
26975
27027
  display: flex;
26976
27028
  flex: 1;
@@ -26978,17 +27030,23 @@ svg.pf-c-spinner.pf-m-xl {
26978
27030
  font-size: var(--pf-c-tabs__link--FontSize);
26979
27031
  color: var(--pf-c-tabs__link--Color);
26980
27032
  text-decoration: none;
26981
- background-color: var(--pf-c-tabs__link--BackgroundColor);
26982
27033
  outline-offset: var(--pf-c-tabs__link--OutlineOffset);
26983
27034
  }
26984
- .pf-c-tabs__link::before {
27035
+ .pf-c-tabs__item.pf-m-action, .pf-c-tabs__link {
27036
+ --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
27037
+ background-color: var(--pf-c-tabs__link--BackgroundColor);
27038
+ }
27039
+
27040
+ .pf-c-tabs__item.pf-m-action::before, .pf-c-tabs__link::before {
26985
27041
  pointer-events: none;
26986
- border-color: var(--pf-c-tabs__link--before--border-color--base);
26987
27042
  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);
27043
+ border-top-color: var(--pf-c-tabs__link--before--BorderTopColor);
26988
27044
  border-right-color: var(--pf-c-tabs__link--before--BorderRightColor);
26989
27045
  border-bottom-color: var(--pf-c-tabs__link--before--BorderBottomColor);
27046
+ border-left-color: var(--pf-c-tabs__link--before--BorderLeftColor);
26990
27047
  }
26991
- .pf-c-tabs__link::after {
27048
+
27049
+ .pf-c-tabs__item.pf-m-action::after, .pf-c-tabs__link::after {
26992
27050
  top: var(--pf-c-tabs__link--after--Top);
26993
27051
  right: var(--pf-c-tabs__link--after--Right);
26994
27052
  bottom: var(--pf-c-tabs__link--after--Bottom);
@@ -26996,25 +27054,30 @@ svg.pf-c-spinner.pf-m-xl {
26996
27054
  border-color: var(--pf-c-tabs__link--after--BorderColor);
26997
27055
  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
27056
  }
26999
- .pf-c-tabs__link:hover {
27057
+
27058
+ .pf-c-tabs__item.pf-m-action:hover, .pf-c-tabs__link:hover {
27000
27059
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth);
27001
27060
  }
27002
- .pf-c-tabs__link:focus {
27061
+
27062
+ .pf-c-tabs__item.pf-m-action:focus-within, .pf-c-tabs__link:focus {
27003
27063
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth);
27004
27064
  }
27005
- .pf-c-tabs__link:active {
27065
+
27066
+ .pf-c-tabs__item.pf-m-action:active, .pf-c-tabs__link:active {
27006
27067
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
27007
27068
  }
27069
+
27008
27070
  .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled {
27009
27071
  pointer-events: none;
27010
27072
  }
27011
- .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
27073
+ .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
27074
  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor);
27013
27075
  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth);
27014
27076
  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth);
27015
27077
  --pf-c-tabs__link--before--BorderLeftWidth: var(--pf-c-tabs__link--disabled--before--BorderLeftWidth);
27016
27078
  --pf-c-tabs__link--after--BorderWidth: 0;
27017
27079
  }
27080
+
27018
27081
  .pf-c-tabs__link.pf-m-aria-disabled {
27019
27082
  cursor: default;
27020
27083
  }
@@ -27027,6 +27090,22 @@ svg.pf-c-spinner.pf-m-xl {
27027
27090
  --pf-c-tabs__link--child--MarginRight: 0;
27028
27091
  }
27029
27092
 
27093
+ .pf-c-tabs__item-close {
27094
+ display: flex;
27095
+ }
27096
+ .pf-c-tabs__item-close .pf-c-button {
27097
+ --pf-c-button--FontSize: var(--pf-c-tabs__item-close--c-button--FontSize);
27098
+ --pf-c-button--PaddingTop: var(--pf-c-tabs__item-close--c-button--PaddingTop);
27099
+ --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-close--c-button--PaddingBottom);
27100
+ --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-close--c-button--PaddingLeft);
27101
+ outline-offset: var(--pf-c-tabs__item-close--c-button--OutlineOffset);
27102
+ }
27103
+
27104
+ .pf-c-tabs__item-close-icon {
27105
+ display: inline-block;
27106
+ margin-top: var(--pf-c-tabs__item-close-icon--MarginTop);
27107
+ }
27108
+
27030
27109
  .pf-c-tabs__scroll-button {
27031
27110
  flex: none;
27032
27111
  width: var(--pf-c-tabs__scroll-button--Width);
@@ -27059,6 +27138,19 @@ svg.pf-c-spinner.pf-m-xl {
27059
27138
  pointer-events: none;
27060
27139
  }
27061
27140
 
27141
+ .pf-c-tabs__add {
27142
+ position: relative;
27143
+ display: flex;
27144
+ }
27145
+ .pf-c-tabs__add::before {
27146
+ border-left: var(--pf-c-tabs__add--before--BorderLeftWidth) solid var(--pf-c-tabs__add--before--BorderColor);
27147
+ }
27148
+ .pf-c-tabs__add .pf-c-button {
27149
+ --pf-c-button--FontSize: var(--pf-c-tabs__add--c-button--FontSize);
27150
+ --pf-c-button--PaddingTop: var(--pf-c-tabs__add--c-button--PaddingTop);
27151
+ --pf-c-button--PaddingBottom: var(--pf-c-tabs__add--c-button--PaddingBottom);
27152
+ }
27153
+
27062
27154
  .pf-c-tabs.pf-m-inset-none {
27063
27155
  --pf-c-tabs--inset: 0;
27064
27156
  --pf-c-tabs--m-vertical--inset: 0;
@@ -28446,7 +28538,7 @@ svg.pf-c-spinner.pf-m-xl {
28446
28538
  flex: 1 1 var(--pf-c-modal-box--c-wizard--FlexBasis);
28447
28539
  min-height: 0;
28448
28540
  }
28449
- .pf-c-wizard > *:not(.pf-c-wizard__outer-wrap) {
28541
+ .pf-c-wizard > :not(.pf-c-wizard__outer-wrap):not(.pf-c-drawer) {
28450
28542
  flex-shrink: 0;
28451
28543
  }
28452
28544
  .pf-c-wizard.pf-m-finished {
package/patternfly.css CHANGED
@@ -15905,17 +15905,25 @@ ul.pf-c-list {
15905
15905
  grid-template-columns: 1fr auto;
15906
15906
  }
15907
15907
  }
15908
+
15909
+ .pf-c-login__main-header-utilities,
15908
15910
  .pf-c-login__main-header .pf-c-dropdown {
15909
15911
  grid-column: auto;
15910
15912
  grid-row: auto;
15911
15913
  }
15912
15914
  @media (min-width: 768px) {
15913
- .pf-c-login__main-header .pf-c-dropdown {
15915
+ .pf-c-login__main-header-utilities,
15916
+ .pf-c-login__main-header .pf-c-dropdown {
15914
15917
  grid-column: 2/3;
15915
15918
  grid-row: 1;
15916
15919
  }
15917
15920
  }
15918
15921
 
15922
+ .pf-c-login__main-header-utilities .pf-c-dropdown {
15923
+ grid-column: auto;
15924
+ grid-row: auto;
15925
+ }
15926
+
15919
15927
  .pf-c-login__main-header-desc {
15920
15928
  margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
15921
15929
  font-size: var(--pf-c-login__main-header-desc--FontSize);
@@ -19624,6 +19632,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19624
19632
  --pf-c-page__main-wizard--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
19625
19633
  --pf-c-page__main-wizard--BorderTopColor: var(--pf-global--BorderColor--100);
19626
19634
  --pf-c-page__main-wizard--BorderTopWidth: var(--pf-global--BorderWidth--sm);
19635
+ --pf-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
19627
19636
  display: grid;
19628
19637
  height: 100%;
19629
19638
  grid-template-columns: 1fr;
@@ -20153,6 +20162,9 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20153
20162
  .pf-c-page__main-wizard:first-child {
20154
20163
  --pf-c-page__main-wizard--BorderTopWidth: 0;
20155
20164
  }
20165
+ .pf-c-page__main-wizard.pf-m-light-200 {
20166
+ --pf-c-page__main-wizard--BackgroundColor: var(--pf-c-page__main-wizard--m-light-200--BackgroundColor);
20167
+ }
20156
20168
 
20157
20169
  .pf-c-page__main-wizard .pf-c-page__main-body {
20158
20170
  min-height: 0;
@@ -26659,6 +26671,8 @@ svg.pf-c-spinner.pf-m-xl {
26659
26671
  --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--palette--black-150);
26660
26672
  --pf-c-tabs__list--Display: flex;
26661
26673
  --pf-c-tabs__list--Visibility: visible;
26674
+ --pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
26675
+ --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--sm);
26662
26676
  --pf-c-tabs__link--Color: var(--pf-global--Color--200);
26663
26677
  --pf-c-tabs__link--FontSize: var(--pf-global--FontSize--md);
26664
26678
  --pf-c-tabs__link--BackgroundColor: transparent;
@@ -26674,11 +26688,14 @@ svg.pf-c-spinner.pf-m-xl {
26674
26688
  --pf-c-tabs--m-vertical__link--PaddingBottom: var(--pf-global--spacer--md);
26675
26689
  --pf-c-tabs--m-box__link--BackgroundColor: var(--pf-global--BackgroundColor--200);
26676
26690
  --pf-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
26691
+ --pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
26677
26692
  --pf-c-tabs--m-secondary__link--FontSize: var(--pf-global--FontSize--sm);
26678
26693
  --pf-c-tabs__link--before--border-color--base: var(--pf-global--BorderColor--100);
26694
+ --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
26695
+ --pf-c-tabs__link--before--BorderTopColor: var(--pf-c-tabs__link--before--border-color--base);
26679
26696
  --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__link--before--border-color--base);
26680
26697
  --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);
26698
+ --pf-c-tabs__link--before--BorderLeftColor: var(--pf-c-tabs__link--before--border-color--base);
26682
26699
  --pf-c-tabs__link--before--BorderTopWidth: 0;
26683
26700
  --pf-c-tabs__link--before--BorderRightWidth: 0;
26684
26701
  --pf-c-tabs__link--before--BorderBottomWidth: 0;
@@ -26736,6 +26753,19 @@ svg.pf-c-spinner.pf-m-xl {
26736
26753
  --pf-c-tabs__toggle-button--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
26737
26754
  --pf-c-tabs--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
26738
26755
  --pf-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
26756
+ --pf-c-tabs__item-close--c-button--FontSize: var(--pf-global--FontSize--xs);
26757
+ --pf-c-tabs--m-secondary__item-close--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
26758
+ --pf-c-tabs__item-close--c-button--PaddingTop: var(--pf-global--spacer--sm);
26759
+ --pf-c-tabs__item-close--c-button--PaddingBottom: var(--pf-global--spacer--sm);
26760
+ --pf-c-tabs__item-close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
26761
+ --pf-c-tabs__item-close--c-button--OutlineOffset: -0.1875rem;
26762
+ --pf-c-tabs__item-close-icon--MarginTop: 0.125rem;
26763
+ --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
26764
+ --pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
26765
+ --pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
26766
+ --pf-c-tabs--m-secondary__add--c-button--FontSize: var(--pf-global--FontSize--xs);
26767
+ --pf-c-tabs__add--c-button--PaddingTop: var(--pf-c-tabs__link--PaddingTop);
26768
+ --pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
26739
26769
  position: relative;
26740
26770
  display: flex;
26741
26771
  width: var(--pf-c-tabs--Width);
@@ -26834,6 +26864,9 @@ svg.pf-c-spinner.pf-m-xl {
26834
26864
  --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor);
26835
26865
  --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor);
26836
26866
  }
26867
+ .pf-c-tabs.pf-m-box .pf-c-tabs__item-close .pf-c-button {
26868
+ --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor);
26869
+ }
26837
26870
  .pf-c-tabs.pf-m-vertical {
26838
26871
  --pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width);
26839
26872
  --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--inset);
@@ -27006,6 +27039,8 @@ svg.pf-c-spinner.pf-m-xl {
27006
27039
  }
27007
27040
  .pf-c-tabs.pf-m-secondary {
27008
27041
  --pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
27042
+ --pf-c-tabs__item-close--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-close--c-button--FontSize);
27043
+ --pf-c-tabs__add--c-button--FontSize: var(--pf-c-tabs--m-secondary__add--c-button--FontSize);
27009
27044
  }
27010
27045
  .pf-c-tabs.pf-m-page-insets {
27011
27046
  --pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset);
@@ -27069,12 +27104,26 @@ svg.pf-c-spinner.pf-m-xl {
27069
27104
  --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor);
27070
27105
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth);
27071
27106
  }
27107
+ .pf-c-tabs__item.pf-m-action {
27108
+ --pf-c-tabs__link--PaddingRight: var(--pf-c-tabs__item--m-action__link--PaddingRight);
27109
+ position: relative;
27110
+ }
27111
+ .pf-c-tabs__item.pf-m-action::before {
27112
+ z-index: var(--pf-c-tabs__item--m-action--before--ZIndex);
27113
+ }
27114
+ .pf-c-tabs__item.pf-m-action .pf-c-tabs__link::before,
27115
+ .pf-c-tabs__item.pf-m-action .pf-c-tabs__link::after {
27116
+ content: revert;
27117
+ }
27072
27118
 
27073
27119
  .pf-c-tabs::before,
27074
27120
  .pf-c-tabs__list::before,
27075
27121
  .pf-c-tabs__link::before,
27076
27122
  .pf-c-tabs__link::after,
27077
- .pf-c-tabs__scroll-button::before {
27123
+ .pf-c-tabs__item.pf-m-action::before,
27124
+ .pf-c-tabs__item.pf-m-action::after,
27125
+ .pf-c-tabs__scroll-button::before,
27126
+ .pf-c-tabs__add::before {
27078
27127
  position: absolute;
27079
27128
  right: 0;
27080
27129
  bottom: 0;
@@ -27086,18 +27135,21 @@ svg.pf-c-spinner.pf-m-xl {
27086
27135
  .pf-c-tabs__list::before,
27087
27136
  .pf-c-tabs__link::before,
27088
27137
  .pf-c-tabs__link::after,
27089
- .pf-c-tabs__scroll-button::before {
27138
+ .pf-c-tabs__item.pf-m-action::before,
27139
+ .pf-c-tabs__item.pf-m-action::after,
27140
+ .pf-c-tabs__scroll-button::before,
27141
+ .pf-c-tabs__add::before {
27090
27142
  top: 0;
27091
27143
  }
27092
27144
 
27093
27145
  .pf-c-tabs__link,
27094
27146
  .pf-c-tabs__scroll-button,
27095
- .pf-c-tabs__list::before {
27147
+ .pf-c-tabs__list::before,
27148
+ .pf-c-tabs__add::before {
27096
27149
  border: 0;
27097
27150
  }
27098
27151
 
27099
27152
  .pf-c-tabs__link {
27100
- --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
27101
27153
  position: relative;
27102
27154
  display: flex;
27103
27155
  flex: 1;
@@ -27105,17 +27157,23 @@ svg.pf-c-spinner.pf-m-xl {
27105
27157
  font-size: var(--pf-c-tabs__link--FontSize);
27106
27158
  color: var(--pf-c-tabs__link--Color);
27107
27159
  text-decoration: none;
27108
- background-color: var(--pf-c-tabs__link--BackgroundColor);
27109
27160
  outline-offset: var(--pf-c-tabs__link--OutlineOffset);
27110
27161
  }
27111
- .pf-c-tabs__link::before {
27162
+ .pf-c-tabs__item.pf-m-action, .pf-c-tabs__link {
27163
+ --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
27164
+ background-color: var(--pf-c-tabs__link--BackgroundColor);
27165
+ }
27166
+
27167
+ .pf-c-tabs__item.pf-m-action::before, .pf-c-tabs__link::before {
27112
27168
  pointer-events: none;
27113
- border-color: var(--pf-c-tabs__link--before--border-color--base);
27114
27169
  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);
27170
+ border-top-color: var(--pf-c-tabs__link--before--BorderTopColor);
27115
27171
  border-right-color: var(--pf-c-tabs__link--before--BorderRightColor);
27116
27172
  border-bottom-color: var(--pf-c-tabs__link--before--BorderBottomColor);
27173
+ border-left-color: var(--pf-c-tabs__link--before--BorderLeftColor);
27117
27174
  }
27118
- .pf-c-tabs__link::after {
27175
+
27176
+ .pf-c-tabs__item.pf-m-action::after, .pf-c-tabs__link::after {
27119
27177
  top: var(--pf-c-tabs__link--after--Top);
27120
27178
  right: var(--pf-c-tabs__link--after--Right);
27121
27179
  bottom: var(--pf-c-tabs__link--after--Bottom);
@@ -27123,25 +27181,30 @@ svg.pf-c-spinner.pf-m-xl {
27123
27181
  border-color: var(--pf-c-tabs__link--after--BorderColor);
27124
27182
  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
27183
  }
27126
- .pf-c-tabs__link:hover {
27184
+
27185
+ .pf-c-tabs__item.pf-m-action:hover, .pf-c-tabs__link:hover {
27127
27186
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth);
27128
27187
  }
27129
- .pf-c-tabs__link:focus {
27188
+
27189
+ .pf-c-tabs__item.pf-m-action:focus-within, .pf-c-tabs__link:focus {
27130
27190
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth);
27131
27191
  }
27132
- .pf-c-tabs__link:active {
27192
+
27193
+ .pf-c-tabs__item.pf-m-action:active, .pf-c-tabs__link:active {
27133
27194
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
27134
27195
  }
27196
+
27135
27197
  .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled {
27136
27198
  pointer-events: none;
27137
27199
  }
27138
- .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
27200
+ .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
27201
  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor);
27140
27202
  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth);
27141
27203
  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth);
27142
27204
  --pf-c-tabs__link--before--BorderLeftWidth: var(--pf-c-tabs__link--disabled--before--BorderLeftWidth);
27143
27205
  --pf-c-tabs__link--after--BorderWidth: 0;
27144
27206
  }
27207
+
27145
27208
  .pf-c-tabs__link.pf-m-aria-disabled {
27146
27209
  cursor: default;
27147
27210
  }
@@ -27154,6 +27217,22 @@ svg.pf-c-spinner.pf-m-xl {
27154
27217
  --pf-c-tabs__link--child--MarginRight: 0;
27155
27218
  }
27156
27219
 
27220
+ .pf-c-tabs__item-close {
27221
+ display: flex;
27222
+ }
27223
+ .pf-c-tabs__item-close .pf-c-button {
27224
+ --pf-c-button--FontSize: var(--pf-c-tabs__item-close--c-button--FontSize);
27225
+ --pf-c-button--PaddingTop: var(--pf-c-tabs__item-close--c-button--PaddingTop);
27226
+ --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-close--c-button--PaddingBottom);
27227
+ --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-close--c-button--PaddingLeft);
27228
+ outline-offset: var(--pf-c-tabs__item-close--c-button--OutlineOffset);
27229
+ }
27230
+
27231
+ .pf-c-tabs__item-close-icon {
27232
+ display: inline-block;
27233
+ margin-top: var(--pf-c-tabs__item-close-icon--MarginTop);
27234
+ }
27235
+
27157
27236
  .pf-c-tabs__scroll-button {
27158
27237
  flex: none;
27159
27238
  width: var(--pf-c-tabs__scroll-button--Width);
@@ -27186,6 +27265,19 @@ svg.pf-c-spinner.pf-m-xl {
27186
27265
  pointer-events: none;
27187
27266
  }
27188
27267
 
27268
+ .pf-c-tabs__add {
27269
+ position: relative;
27270
+ display: flex;
27271
+ }
27272
+ .pf-c-tabs__add::before {
27273
+ border-left: var(--pf-c-tabs__add--before--BorderLeftWidth) solid var(--pf-c-tabs__add--before--BorderColor);
27274
+ }
27275
+ .pf-c-tabs__add .pf-c-button {
27276
+ --pf-c-button--FontSize: var(--pf-c-tabs__add--c-button--FontSize);
27277
+ --pf-c-button--PaddingTop: var(--pf-c-tabs__add--c-button--PaddingTop);
27278
+ --pf-c-button--PaddingBottom: var(--pf-c-tabs__add--c-button--PaddingBottom);
27279
+ }
27280
+
27189
27281
  .pf-c-tabs.pf-m-inset-none {
27190
27282
  --pf-c-tabs--inset: 0;
27191
27283
  --pf-c-tabs--m-vertical--inset: 0;
@@ -28573,7 +28665,7 @@ svg.pf-c-spinner.pf-m-xl {
28573
28665
  flex: 1 1 var(--pf-c-modal-box--c-wizard--FlexBasis);
28574
28666
  min-height: 0;
28575
28667
  }
28576
- .pf-c-wizard > *:not(.pf-c-wizard__outer-wrap) {
28668
+ .pf-c-wizard > :not(.pf-c-wizard__outer-wrap):not(.pf-c-drawer) {
28577
28669
  flex-shrink: 0;
28578
28670
  }
28579
28671
  .pf-c-wizard.pf-m-finished {