@patternfly/patternfly 4.186.1 → 4.189.0

package/components/Card/card.css

@@ -51,6 +51,7 @@
   --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
   --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
   --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
+  --pf-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
   --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
   --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
@@ -155,6 +156,7 @@
   --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
   --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
   --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY);
+  z-index: var(--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex);
   box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
   transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
   transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));

package/components/Card/card.scss

@@ -57,6 +57,7 @@
   --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
   --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
   --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
+  --pf-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
   --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
   --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
@@ -196,6 +197,7 @@
       --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY); // moves before down when selected - same amount and speed as the selected card moves up
       --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY); // causes the before to grow in height - more performant than transitioning height
 
+      z-index: var(--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex); // allows elements (ie, dropdowns) from this card to appear on other cards since the transform creates a new stacking context
       box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
       transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
       transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY)); // moves card up when selected

package/components/FormControl/form-control.css

@@ -33,6 +33,7 @@
   --pf-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--focus--BorderBottomWidth));
   --pf-c-form-control--m-expanded--BorderBottomColor: var(--pf-global--primary-color--100);
   --pf-c-form-control--placeholder--Color: var(--pf-global--Color--dark-200);
+  --pf-c-form-control--placeholder--child--Color: var(--pf-global--Color--100);
   --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--100);
   --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
   --pf-c-form-control--disabled--BorderColor: transparent;
@@ -293,6 +294,12 @@ select.pf-c-form-control.pf-m-warning {
 select.pf-c-form-control.pf-m-placeholder {
   color: var(--pf-c-form-control--placeholder--Color);
 }
+select.pf-c-form-control.pf-m-placeholder * {
+  color: var(--pf-c-form-control--placeholder--child--Color);
+}
+select.pf-c-form-control.pf-m-placeholder *:disabled {
+  color: revert;
+}
 
 textarea.pf-c-form-control {
   --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);

package/components/FormControl/form-control.scss

@@ -62,6 +62,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
 
   // input placeholder style
   --pf-c-form-control--placeholder--Color: var(--pf-global--Color--dark-200);
+  --pf-c-form-control--placeholder--child--Color: var(--pf-global--Color--100);
 
   // input disabled style
   --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--100);
@@ -407,6 +408,16 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
 
     &.pf-m-placeholder {
       color: var(--pf-c-form-control--placeholder--Color);
+
+      * {
+        color: var(--pf-c-form-control--placeholder--child--Color);
+
+        // stylelint-disable max-nesting-depth
+        &:disabled {
+          color: revert;
+        }
+        // stylelint-enable
+      }
     }
   }
 

package/components/Page/themes/dark/page.scss

@@ -1,5 +1,6 @@
 @mixin page() {
   .pf-c-page {
+    --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--200);
     --pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-global--BackgroundColor--300);
     --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
     --pf-c-page__header--BackgroundColor: var(--pf-global--palette--black-1000);

package/components/Tabs/tabs.css

@@ -25,6 +25,8 @@
   --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-tabs__list--Display: flex;
   --pf-c-tabs__list--Visibility: visible;
+  --pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
+  --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-tabs__link--Color: var(--pf-global--Color--200);
   --pf-c-tabs__link--FontSize: var(--pf-global--FontSize--md);
   --pf-c-tabs__link--BackgroundColor: transparent;
@@ -40,11 +42,14 @@
   --pf-c-tabs--m-vertical__link--PaddingBottom: var(--pf-global--spacer--md);
   --pf-c-tabs--m-box__link--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
   --pf-c-tabs--m-secondary__link--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-tabs__link--before--border-color--base: var(--pf-global--BorderColor--100);
+  --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-tabs__link--before--BorderTopColor: var(--pf-c-tabs__link--before--border-color--base);
   --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__link--before--border-color--base);
   --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base);
-  --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-tabs__link--before--BorderLeftColor: var(--pf-c-tabs__link--before--border-color--base);
   --pf-c-tabs__link--before--BorderTopWidth: 0;
   --pf-c-tabs__link--before--BorderRightWidth: 0;
   --pf-c-tabs__link--before--BorderBottomWidth: 0;
@@ -102,6 +107,19 @@
   --pf-c-tabs__toggle-button--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
   --pf-c-tabs--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
   --pf-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-c-tabs__item-close--c-button--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-tabs--m-secondary__item-close--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
+  --pf-c-tabs__item-close--c-button--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-close--c-button--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-close--c-button--OutlineOffset: -0.1875rem;
+  --pf-c-tabs__item-close-icon--MarginTop: 0.125rem;
+  --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
+  --pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
+  --pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-tabs--m-secondary__add--c-button--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-tabs__add--c-button--PaddingTop: var(--pf-c-tabs__link--PaddingTop);
+  --pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
   position: relative;
   display: flex;
   width: var(--pf-c-tabs--Width);
@@ -154,6 +172,10 @@
   --pf-c-tabs--before--BorderBottomWidth: 0;
   --pf-c-tabs__link--disabled--before--BorderBottomWidth: 0;
 }
+.pf-c-tabs.pf-m-border-bottom {
+  --pf-c-tabs--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
+  --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
+}
 .pf-c-tabs.pf-m-box .pf-c-tabs__link, .pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
   --pf-c-tabs__link--after--BorderBottomWidth: 0;
 }
@@ -196,6 +218,9 @@
   --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor);
   --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor);
 }
+.pf-c-tabs.pf-m-box .pf-c-tabs__item-close .pf-c-button {
+  --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor);
+}
 .pf-c-tabs.pf-m-vertical {
   --pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width);
   --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--inset);
@@ -368,6 +393,8 @@
 }
 .pf-c-tabs.pf-m-secondary {
   --pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
+  --pf-c-tabs__item-close--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-close--c-button--FontSize);
+  --pf-c-tabs__add--c-button--FontSize: var(--pf-c-tabs--m-secondary__add--c-button--FontSize);
 }
 .pf-c-tabs.pf-m-page-insets {
   --pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset);
@@ -431,12 +458,26 @@
   --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor);
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth);
 }
+.pf-c-tabs__item.pf-m-action {
+  --pf-c-tabs__link--PaddingRight: var(--pf-c-tabs__item--m-action__link--PaddingRight);
+  position: relative;
+}
+.pf-c-tabs__item.pf-m-action::before {
+  z-index: var(--pf-c-tabs__item--m-action--before--ZIndex);
+}
+.pf-c-tabs__item.pf-m-action .pf-c-tabs__link::before,
+.pf-c-tabs__item.pf-m-action .pf-c-tabs__link::after {
+  content: revert;
+}
 
 .pf-c-tabs::before,
 .pf-c-tabs__list::before,
 .pf-c-tabs__link::before,
 .pf-c-tabs__link::after,
-.pf-c-tabs__scroll-button::before {
+.pf-c-tabs__item.pf-m-action::before,
+.pf-c-tabs__item.pf-m-action::after,
+.pf-c-tabs__scroll-button::before,
+.pf-c-tabs__add::before {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -448,18 +489,21 @@
 .pf-c-tabs__list::before,
 .pf-c-tabs__link::before,
 .pf-c-tabs__link::after,
-.pf-c-tabs__scroll-button::before {
+.pf-c-tabs__item.pf-m-action::before,
+.pf-c-tabs__item.pf-m-action::after,
+.pf-c-tabs__scroll-button::before,
+.pf-c-tabs__add::before {
   top: 0;
 }
 
 .pf-c-tabs__link,
 .pf-c-tabs__scroll-button,
-.pf-c-tabs__list::before {
+.pf-c-tabs__list::before,
+.pf-c-tabs__add::before {
   border: 0;
 }
 
 .pf-c-tabs__link {
-  --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
   position: relative;
   display: flex;
   flex: 1;
@@ -467,17 +511,23 @@
   font-size: var(--pf-c-tabs__link--FontSize);
   color: var(--pf-c-tabs__link--Color);
   text-decoration: none;
-  background-color: var(--pf-c-tabs__link--BackgroundColor);
   outline-offset: var(--pf-c-tabs__link--OutlineOffset);
 }
-.pf-c-tabs__link::before {
+.pf-c-tabs__item.pf-m-action, .pf-c-tabs__link {
+  --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
+  background-color: var(--pf-c-tabs__link--BackgroundColor);
+}
+
+.pf-c-tabs__item.pf-m-action::before, .pf-c-tabs__link::before {
   pointer-events: none;
-  border-color: var(--pf-c-tabs__link--before--border-color--base);
   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);
+  border-top-color: var(--pf-c-tabs__link--before--BorderTopColor);
   border-right-color: var(--pf-c-tabs__link--before--BorderRightColor);
   border-bottom-color: var(--pf-c-tabs__link--before--BorderBottomColor);
+  border-left-color: var(--pf-c-tabs__link--before--BorderLeftColor);
 }
-.pf-c-tabs__link::after {
+
+.pf-c-tabs__item.pf-m-action::after, .pf-c-tabs__link::after {
   top: var(--pf-c-tabs__link--after--Top);
   right: var(--pf-c-tabs__link--after--Right);
   bottom: var(--pf-c-tabs__link--after--Bottom);
@@ -485,25 +535,30 @@
   border-color: var(--pf-c-tabs__link--after--BorderColor);
   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);
 }
-.pf-c-tabs__link:hover {
+
+.pf-c-tabs__item.pf-m-action:hover, .pf-c-tabs__link:hover {
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth);
 }
-.pf-c-tabs__link:focus {
+
+.pf-c-tabs__item.pf-m-action:focus-within, .pf-c-tabs__link:focus {
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth);
 }
-.pf-c-tabs__link:active {
+
+.pf-c-tabs__item.pf-m-action:active, .pf-c-tabs__link:active {
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
 }
+
 .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled {
   pointer-events: none;
 }
-.pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
+.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 {
   --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor);
   --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth);
   --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth);
   --pf-c-tabs__link--before--BorderLeftWidth: var(--pf-c-tabs__link--disabled--before--BorderLeftWidth);
   --pf-c-tabs__link--after--BorderWidth: 0;
 }
+
 .pf-c-tabs__link.pf-m-aria-disabled {
   cursor: default;
 }
@@ -516,6 +571,22 @@
   --pf-c-tabs__link--child--MarginRight: 0;
 }
 
+.pf-c-tabs__item-close {
+  display: flex;
+}
+.pf-c-tabs__item-close .pf-c-button {
+  --pf-c-button--FontSize: var(--pf-c-tabs__item-close--c-button--FontSize);
+  --pf-c-button--PaddingTop: var(--pf-c-tabs__item-close--c-button--PaddingTop);
+  --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-close--c-button--PaddingBottom);
+  --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-close--c-button--PaddingLeft);
+  outline-offset: var(--pf-c-tabs__item-close--c-button--OutlineOffset);
+}
+
+.pf-c-tabs__item-close-icon {
+  display: inline-block;
+  margin-top: var(--pf-c-tabs__item-close-icon--MarginTop);
+}
+
 .pf-c-tabs__scroll-button {
   flex: none;
   width: var(--pf-c-tabs__scroll-button--Width);
@@ -548,6 +619,19 @@
   pointer-events: none;
 }
 
+.pf-c-tabs__add {
+  position: relative;
+  display: flex;
+}
+.pf-c-tabs__add::before {
+  border-left: var(--pf-c-tabs__add--before--BorderLeftWidth) solid var(--pf-c-tabs__add--before--BorderColor);
+}
+.pf-c-tabs__add .pf-c-button {
+  --pf-c-button--FontSize: var(--pf-c-tabs__add--c-button--FontSize);
+  --pf-c-button--PaddingTop: var(--pf-c-tabs__add--c-button--PaddingTop);
+  --pf-c-button--PaddingBottom: var(--pf-c-tabs__add--c-button--PaddingBottom);
+}
+
 .pf-c-tabs.pf-m-inset-none {
   --pf-c-tabs--inset: 0;
   --pf-c-tabs--m-vertical--inset: 0;

package/components/Tabs/tabs.scss

@@ -39,6 +39,10 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
   --pf-c-tabs__list--Display: flex;
   --pf-c-tabs__list--Visibility: visible;
 
+  // Item
+  --pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
+  --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--sm);
+
   // Tab link
   --pf-c-tabs__link--Color: var(--pf-global--Color--200);
   --pf-c-tabs__link--FontSize: var(--pf-global--FontSize--md);
@@ -55,13 +59,16 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
   --pf-c-tabs--m-vertical__link--PaddingBottom: var(--pf-global--spacer--md);
   --pf-c-tabs--m-box__link--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
   --pf-c-tabs--m-secondary__link--FontSize: var(--pf-global--FontSize--sm);
 
   // Link before
   --pf-c-tabs__link--before--border-color--base: var(--pf-global--BorderColor--100);
+  --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-tabs__link--before--BorderTopColor: var(--pf-c-tabs__link--before--border-color--base);
   --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__link--before--border-color--base);
   --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base);
-  --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-tabs__link--before--BorderLeftColor: var(--pf-c-tabs__link--before--border-color--base);
   --pf-c-tabs__link--before--BorderTopWidth: 0;
   --pf-c-tabs__link--before--BorderRightWidth: 0;
   --pf-c-tabs__link--before--BorderBottomWidth: 0;
@@ -130,6 +137,23 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
   --pf-c-tabs--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
   --pf-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
 
+  // Close button
+  --pf-c-tabs__item-close--c-button--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-tabs--m-secondary__item-close--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
+  --pf-c-tabs__item-close--c-button--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-close--c-button--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-close--c-button--OutlineOffset: #{pf-size-prem(-3px)};
+  --pf-c-tabs__item-close-icon--MarginTop: #{pf-size-prem(2px)};
+
+  // Add button
+  --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
+  --pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
+  --pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-tabs--m-secondary__add--c-button--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-tabs__add--c-button--PaddingTop: var(--pf-c-tabs__link--PaddingTop);
+  --pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
+
   @media screen and (min-width: $pf-global--breakpoint--xl) {
     --pf-c-tabs__scroll-button--Width: var(--pf-c-tabs__scroll-button--xl--Width);
     --pf-c-tabs--m-page-insets--inset: var(--pf-c-tabs--m-page-insets--xl--inset);
@@ -199,6 +223,11 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
     --pf-c-tabs__link--disabled--before--BorderBottomWidth: 0;
   }
 
+  &.pf-m-border-bottom {
+    --pf-c-tabs--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
+    --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
+  }
+
   // Remove bottom border for variants
   &.pf-m-box,
   &.pf-m-vertical {
@@ -266,6 +295,10 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
       --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor);
       --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor);
     }
+
+    .pf-c-tabs__item-close .pf-c-button {
+      --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor);
+    }
   }
 
   // Vertical
@@ -409,6 +442,8 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
   &.pf-m-secondary {
     --pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
+    --pf-c-tabs__item-close--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-close--c-button--FontSize);
+    --pf-c-tabs__add--c-button--FontSize: var(--pf-c-tabs--m-secondary__add--c-button--FontSize);
   }
 
   &.pf-m-page-insets {
@@ -478,13 +513,32 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
     --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor);
     --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth);
   }
+
+  // Action
+  &.pf-m-action {
+    --pf-c-tabs__link--PaddingRight: var(--pf-c-tabs__item--m-action__link--PaddingRight);
+
+    position: relative;
+
+    &::before {
+      z-index: var(--pf-c-tabs__item--m-action--before--ZIndex);
+    }
+
+    .pf-c-tabs__link::before,
+    .pf-c-tabs__link::after {
+      content: revert;
+    }
+  }
 }
 
 .pf-c-tabs::before,
 .pf-c-tabs__list::before,
 .pf-c-tabs__link::before,
 .pf-c-tabs__link::after,
-.pf-c-tabs__scroll-button::before {
+.pf-c-tabs__item.pf-m-action::before,
+.pf-c-tabs__item.pf-m-action::after,
+.pf-c-tabs__scroll-button::before,
+.pf-c-tabs__add::before {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -496,19 +550,28 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 .pf-c-tabs__list::before,
 .pf-c-tabs__link::before,
 .pf-c-tabs__link::after,
-.pf-c-tabs__scroll-button::before {
+.pf-c-tabs__item.pf-m-action::before,
+.pf-c-tabs__item.pf-m-action::after,
+.pf-c-tabs__scroll-button::before,
+.pf-c-tabs__add::before {
   top: 0;
 }
 
 .pf-c-tabs__link,
 .pf-c-tabs__scroll-button,
-.pf-c-tabs__list::before {
+.pf-c-tabs__list::before,
+.pf-c-tabs__add::before {
   border: 0;
 }
 
 // Tab link
 .pf-c-tabs__link {
-  --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth); // Set default border target
+  @at-root .pf-c-tabs__item.pf-m-action,
+  & {
+    --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth); // Set default border target
+
+    background-color: var(--pf-c-tabs__link--BackgroundColor);
+  }
 
   position: relative;
   display: flex;
@@ -517,37 +580,50 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
   font-size: var(--pf-c-tabs__link--FontSize);
   color: var(--pf-c-tabs__link--Color);
   text-decoration: none;
-  background-color: var(--pf-c-tabs__link--BackgroundColor);
   outline-offset: var(--pf-c-tabs__link--OutlineOffset);
 
-  &::before {
-    pointer-events: none;
-    border-color: var(--pf-c-tabs__link--before--border-color--base);
-    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);
-    border-right-color: var(--pf-c-tabs__link--before--BorderRightColor);
-    border-bottom-color: var(--pf-c-tabs__link--before--BorderBottomColor);
+  @at-root .pf-c-tabs__item.pf-m-action,
+  & {
+    &::before {
+      pointer-events: none;
+      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);
+      border-top-color: var(--pf-c-tabs__link--before--BorderTopColor);
+      border-right-color: var(--pf-c-tabs__link--before--BorderRightColor);
+      border-bottom-color: var(--pf-c-tabs__link--before--BorderBottomColor);
+      border-left-color: var(--pf-c-tabs__link--before--BorderLeftColor);
+    }
   }
 
-  &::after {
-    top: var(--pf-c-tabs__link--after--Top);
-    right: var(--pf-c-tabs__link--after--Right);
-    bottom: var(--pf-c-tabs__link--after--Bottom);
-    left: var(--pf-c-tabs__link--before--Left); // use the ::before Left value to offset the top border / overlap left border
-    border-color: var(--pf-c-tabs__link--after--BorderColor);
-    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);
+  @at-root .pf-c-tabs__item.pf-m-action,
+  & {
+    &::after {
+      top: var(--pf-c-tabs__link--after--Top);
+      right: var(--pf-c-tabs__link--after--Right);
+      bottom: var(--pf-c-tabs__link--after--Bottom);
+      left: var(--pf-c-tabs__link--before--Left); // use the ::before Left value to offset the top border / overlap left border
+      border-color: var(--pf-c-tabs__link--after--BorderColor);
+      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);
+    }
   }
 
   // Tab item hover state
-  &:hover {
-    --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth);
+  @at-root .pf-c-tabs__item.pf-m-action,
+  & {
+    &:hover {
+      --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth);
+    }
   }
 
+  @at-root .pf-c-tabs__item.pf-m-action:focus-within,
   &:focus {
     --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth);
   }
 
-  &:active {
-    --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
+  @at-root .pf-c-tabs__item.pf-m-action,
+  & {
+    &:active {
+      --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
+    }
   }
 
   &:disabled,
@@ -555,6 +631,7 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
     pointer-events: none;
   }
 
+  @at-root .pf-c-tabs__item.pf-m-action.pf-m-disabled,
   &:disabled,
   &.pf-m-disabled,
   &.pf-m-aria-disabled {
@@ -569,6 +646,7 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
     cursor: default;
   }
 
+  // un-nest these selectors in a breaking change release
   .pf-c-tabs__item-icon,
   .pf-c-tabs__item-text {
     margin-right: var(--pf-c-tabs__link--child--MarginRight);
@@ -579,6 +657,24 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
   }
 }
 
+.pf-c-tabs__item-close {
+  display: flex;
+
+  .pf-c-button {
+    --pf-c-button--FontSize: var(--pf-c-tabs__item-close--c-button--FontSize);
+    --pf-c-button--PaddingTop: var(--pf-c-tabs__item-close--c-button--PaddingTop);
+    --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-close--c-button--PaddingBottom);
+    --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-close--c-button--PaddingLeft);
+
+    outline-offset: var(--pf-c-tabs__item-close--c-button--OutlineOffset);
+  }
+}
+
+.pf-c-tabs__item-close-icon {
+  display: inline-block;
+  margin-top: var(--pf-c-tabs__item-close-icon--MarginTop);
+}
+
 // Scroll buttons
 .pf-c-tabs__scroll-button {
   flex: none;
@@ -622,6 +718,21 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
   }
 }
 
+.pf-c-tabs__add {
+  position: relative;
+  display: flex;
+
+  &::before {
+    border-left: var(--pf-c-tabs__add--before--BorderLeftWidth) solid var(--pf-c-tabs__add--before--BorderColor);
+  }
+
+  .pf-c-button {
+    --pf-c-button--FontSize: var(--pf-c-tabs__add--c-button--FontSize);
+    --pf-c-button--PaddingTop: var(--pf-c-tabs__add--c-button--PaddingTop);
+    --pf-c-button--PaddingBottom: var(--pf-c-tabs__add--c-button--PaddingBottom);
+  }
+}
+
 // stylelint-disable no-duplicate-selectors, max-nesting-depth
 .pf-c-tabs {
   @each $breakpoint, $breakpoint-value in $pf-c-tabs--breakpoint-map {

package/docs/components/FormControl/examples/FormControl.md

@@ -124,6 +124,22 @@ cssPrefix: pf-c-form-control
   id="select-standard"
   name="select-standard"
   aria-label="Standard select example"
+>
+  <option value selected disabled>Please choose</option>
+  <option value="Mr">Mr</option>
+  <option value="Miss">Miss</option>
+  <option value="Mrs">Mrs</option>
+  <option value="Ms">Ms</option>
+  <option value="Dr">Dr</option>
+  <option value="Other">Other</option>
+</select>
+<br />
+<br />
+<select
+  class="pf-c-form-control pf-m-placeholder"
+  id="select-placeholder-enabled"
+  name="select-placeholder-enabled"
+  aria-label="Placeholder enabled select example"
 >
   <option value selected>Please choose</option>
   <option value="Mr">Mr</option>

package/docs/components/TabContent/examples/TabContent.md

@@ -43,40 +43,35 @@ cssPrefix: pf-c-tab-content
 ### Padding
 
 ```html
-<section
-  class="pf-c-tab-content pf-m-padding"
-  id="tab1-panel"
-  role="tabpanel"
-  tabindex="0"
->
-  <div class="pf-c-tab-content__body">Panel 1</div>
+<section class="pf-c-tab-content" id="tab1-panel" role="tabpanel" tabindex="0">
+  <div class="pf-c-tab-content__body pf-m-padding">Panel 1</div>
 </section>
 <section
-  class="pf-c-tab-content pf-m-padding"
+  class="pf-c-tab-content"
   id="tab2-panel"
   role="tabpanel"
   tabindex="0"
   hidden
 >
-  <div class="pf-c-tab-content__body">Panel 2</div>
+  <div class="pf-c-tab-content__body pf-m-padding">Panel 2</div>
 </section>
 <section
-  class="pf-c-tab-content pf-m-padding"
+  class="pf-c-tab-content"
   id="tab3-panel"
   role="tabpanel"
   tabindex="0"
   hidden
 >
-  <div class="pf-c-tab-content__body">Panel 3</div>
+  <div class="pf-c-tab-content__body pf-m-padding">Panel 3</div>
 </section>
 <section
-  class="pf-c-tab-content pf-m-padding"
+  class="pf-c-tab-content"
   id="tab4-panel"
   role="tabpanel"
   tabindex="0"
   hidden
 >
-  <div class="pf-c-tab-content__body">Panel 4</div>
+  <div class="pf-c-tab-content__body pf-m-padding">Panel 4</div>
 </section>
 
 ```