@patternfly/patternfly 4.204.1 → 4.204.4

package/components/AppLauncher/app-launcher.css

@@ -56,8 +56,8 @@
   --pf-c-app-launcher__group-title--PaddingRight: var(--pf-c-app-launcher__menu-item--PaddingRight);
   --pf-c-app-launcher__group-title--PaddingBottom: var(--pf-c-app-launcher__menu-item--PaddingBottom);
   --pf-c-app-launcher__group-title--PaddingLeft: var(--pf-c-app-launcher__menu-item--PaddingLeft);
-  --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-app-launcher__group-title--Color: var(--pf-global--Color--dark-200);
   --pf-c-app-launcher--c-divider--MarginTop: var(--pf-global--spacer--sm);
   --pf-c-app-launcher--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -219,6 +219,4 @@
   --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
   --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
   --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
-  --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--bold);
 }

package/components/AppLauncher/app-launcher.scss

@@ -72,8 +72,8 @@
   --pf-c-app-launcher__group-title--PaddingRight: var(--pf-c-app-launcher__menu-item--PaddingRight);
   --pf-c-app-launcher__group-title--PaddingBottom: var(--pf-c-app-launcher__menu-item--PaddingBottom);
   --pf-c-app-launcher__group-title--PaddingLeft: var(--pf-c-app-launcher__menu-item--PaddingLeft);
-  --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-app-launcher__group-title--Color: var(--pf-global--Color--dark-200);
 
   // Divider

package/components/AppLauncher/themes/dark/app-launcher.scss

@@ -9,7 +9,5 @@
     --pf-c-app-launcher__menu-item--m-action--Color: var(--pf-global--Color--200);
     --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-global--palette--gold-300);
     --pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-global--palette--gold-100);
-    --pf-c-app-launcher__group-title--FontSize: var(--pf-global--FontSize--xs);
-    --pf-c-app-launcher__group-title--FontWeight: var(--pf-global--FontWeight--bold);
   }
 }

package/components/Dropdown/dropdown.css

@@ -121,8 +121,8 @@
   --pf-c-dropdown__group-title--PaddingRight: var(--pf-c-dropdown__menu-item--PaddingRight);
   --pf-c-dropdown__group-title--PaddingBottom: var(--pf-c-dropdown__menu-item--PaddingBottom);
   --pf-c-dropdown__group-title--PaddingLeft: var(--pf-c-dropdown__menu-item--PaddingLeft);
-  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
   --pf-c-dropdown__toggle-image--MarginTop: 0;
   --pf-c-dropdown__toggle-image--MarginBottom: 0;
@@ -633,8 +633,6 @@
   --pf-c-dropdown__menu--Top: 100%;
   --pf-c-dropdown--m-top__menu--TranslateY: -100%;
   --pf-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
-  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--bold);
 }
 :where(.pf-theme-dark) .pf-c-dropdown__toggle:not(.pf-m-plain):disabled, :where(.pf-theme-dark) .pf-c-dropdown__toggle:not(.pf-m-plain).pf-m-disabled {
   color: var(--pf-global--palette--black-100);

package/components/Dropdown/dropdown.scss

@@ -152,8 +152,8 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   --pf-c-dropdown__group-title--PaddingRight: var(--pf-c-dropdown__menu-item--PaddingRight);
   --pf-c-dropdown__group-title--PaddingBottom: var(--pf-c-dropdown__menu-item--PaddingBottom);
   --pf-c-dropdown__group-title--PaddingLeft: var(--pf-c-dropdown__menu-item--PaddingLeft);
-  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-dropdown__group-title--Color: var(--pf-global--Color--dark-200);
 
   // Image

package/components/Dropdown/themes/dark/dropdown.scss

@@ -13,8 +13,6 @@
     --pf-c-dropdown__menu--Top: 100%;
     --pf-c-dropdown--m-top__menu--TranslateY: -100%;
     --pf-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
-    --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
-    --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--bold);
   }
 
   .pf-c-dropdown__toggle {

package/components/FormControl/form-control.css

@@ -9,6 +9,7 @@
 }
 
 .pf-c-form-control {
+  --pf-c-form-control--Color: var(--pf-global--Color--100);
   --pf-c-form-control--FontSize: var(--pf-global--FontSize--md);
   --pf-c-form-control--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -131,7 +132,7 @@
   --pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) + 1px - var(--pf-global--spacer--lg));
   --pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg) + 0.0625rem);
   --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg));
-  color: var(--pf-global--Color--100);
+  color: var(--pf-c-form-control--Color);
   width: var(--pf-c-form-control--Width);
   padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
   font-size: var(--pf-c-form-control--FontSize);
@@ -176,8 +177,8 @@
   border-bottom-width: var(--pf-c-form-control--m-expanded--BorderBottomWidth);
 }
 .pf-c-form-control:disabled {
-  --pf-c-form-control--Color: var(--pf-c-form-control--disabled--Color);
   --pf-c-form-control--BackgroundColor: var(--pf-c-form-control--disabled--BackgroundColor);
+  color: var(--pf-c-form-control--disabled--Color);
   cursor: not-allowed;
   border-color: var(--pf-c-form-control--disabled--BorderColor);
 }

package/components/FormControl/form-control.scss

@@ -27,6 +27,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
 
 .pf-c-form-control {
   // Component
+  --pf-c-form-control--Color: var(--pf-global--Color--100);
   --pf-c-form-control--FontSize: var(--pf-global--FontSize--md);
   --pf-c-form-control--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -199,7 +200,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
   --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg));
 
   // This component always needs to be light
-  @include pf-t-light;
+  @include pf-t-light("--pf-c-form-control--Color");
 
   width: var(--pf-c-form-control--Width);
   padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
@@ -216,7 +217,7 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
   // stylelint-enable
 
   &::placeholder {
-    color: var(--pf-c-form-control--placeholder--Color);
+    color: var(--pf-c-form-control--placeholder--Color); // update to set --pf-c-form-control--Color in breaking change - also look for any other place to do that in this component
   }
 
   &:not(textarea) {
@@ -261,9 +262,9 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
   }
 
   &:disabled {
-    --pf-c-form-control--Color: var(--pf-c-form-control--disabled--Color);
     --pf-c-form-control--BackgroundColor: var(--pf-c-form-control--disabled--BackgroundColor);
 
+    color: var(--pf-c-form-control--disabled--Color);
     cursor: not-allowed;
     border-color: var(--pf-c-form-control--disabled--BorderColor);
   }

package/components/Menu/menu.css

@@ -140,8 +140,8 @@
   --pf-c-menu__group-title--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-menu__group-title--PaddingRight: var(--pf-c-menu__item--PaddingRight);
   --pf-c-menu__group-title--PaddingLeft: var(--pf-c-menu__item--PaddingLeft);
-  --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
+  --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-menu__group-title--Color: var(--pf-global--Color--200);
   --pf-c-menu__item-description--FontSize: var(--pf-global--FontSize--xs);
   --pf-c-menu__item-description--Color: var(--pf-global--Color--200);
@@ -635,6 +635,4 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
   --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400);
   --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--Color--200);
-  --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
-  --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
 }

package/components/Menu/menu.scss

@@ -98,8 +98,8 @@
   --pf-c-menu__group-title--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-menu__group-title--PaddingRight: var(--pf-c-menu__item--PaddingRight);
   --pf-c-menu__group-title--PaddingLeft: var(--pf-c-menu__item--PaddingLeft);
-  --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
+  --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-menu__group-title--Color: var(--pf-global--Color--200);
 
   // Description

package/components/Menu/themes/dark/menu.scss

@@ -6,7 +6,5 @@
     --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
     --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--400);
     --pf-c-menu__list-item--m-disabled__item--Color: var(--pf-global--Color--200); // global var?
-    --pf-c-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
-    --pf-c-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
   }
 }

package/components/OptionsMenu/options-menu.css

@@ -61,8 +61,8 @@
   --pf-c-options-menu__group-title--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight);
   --pf-c-options-menu__group-title--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom);
   --pf-c-options-menu__group-title--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft);
-  --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-options-menu__group-title--Color: var(--pf-global--Color--dark-200);
   --pf-c-options-menu--c-divider--MarginTop: var(--pf-global--spacer--sm);
   --pf-c-options-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm);
@@ -252,8 +252,6 @@
   --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
   --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
   --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
-  --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-options-menu__menu--Top: 100%;
 }
 :where(.pf-theme-dark) .pf-c-options-menu__toggle.pf-m-plain {

package/components/OptionsMenu/options-menu.scss

@@ -74,8 +74,8 @@
   --pf-c-options-menu__group-title--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight);
   --pf-c-options-menu__group-title--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom);
   --pf-c-options-menu__group-title--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft);
-  --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-options-menu__group-title--Color: var(--pf-global--Color--dark-200);
 
   // Divider

package/components/OptionsMenu/themes/dark/options-menu.scss

@@ -10,8 +10,6 @@
     --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
     --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
     --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
-    --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
-    --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
     --pf-c-options-menu__menu--Top: 100%;
   }
 

package/components/Popover/popover.css

@@ -36,7 +36,7 @@
   --pf-c-popover__arrow--m-left--Rotate: 45deg;
   --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
-  --pf-c-popover--c-button--Right: var(--pf-global--spacer--md);
+  --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
   --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
   --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
   --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);

package/components/Popover/popover.scss

@@ -47,7 +47,7 @@
   // Close
   --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element)); // align top of button with top of text
-  --pf-c-popover--c-button--Right: var(--pf-global--spacer--md);
+  --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md)); // align right of content
   --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
 
   // Header

package/components/Select/select.css

@@ -145,8 +145,8 @@
   --pf-c-select__menu-group-title--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
   --pf-c-select__menu-group-title--PaddingBottom: var(--pf-c-select__menu-item--PaddingBottom);
   --pf-c-select__menu-group-title--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
-  --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-select__menu-group-title--Color: var(--pf-global--Color--dark-200);
   --pf-c-select__menu-item-count--MarginLeft: var(--pf-global--spacer--md);
   --pf-c-select__menu-item-count--FontSize: var(--pf-global--FontSize--sm);

package/components/Select/select.scss

@@ -182,8 +182,8 @@
   --pf-c-select__menu-group-title--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);
   --pf-c-select__menu-group-title--PaddingBottom: var(--pf-c-select__menu-item--PaddingBottom);
   --pf-c-select__menu-group-title--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);
-  --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal);
   --pf-c-select__menu-group-title--Color: var(--pf-global--Color--dark-200);
 
   // Menu item count

package/docs/components/DescriptionList/examples/DescriptionList.md

@@ -1235,7 +1235,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
 
 ```html
 <dl class="pf-c-description-list pf-m-2-col-on-lg">
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Name</span>
     </dt>
@@ -1243,7 +1243,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       <div class="pf-c-description-list__text">example</div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Namespace</span>
     </dt>
@@ -1253,7 +1253,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       </div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Labels</span>
     </dt>
@@ -1261,7 +1261,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       <div class="pf-c-description-list__text">example</div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Pod selector</span>
     </dt>
@@ -1276,7 +1276,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       </div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Annotation</span>
     </dt>
@@ -1292,7 +1292,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
 
 ```html
 <dl class="pf-c-description-list pf-m-display-lg pf-m-2-col-on-lg">
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Name</span>
     </dt>
@@ -1300,7 +1300,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       <div class="pf-c-description-list__text">example</div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Namespace</span>
     </dt>
@@ -1310,7 +1310,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       </div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Labels</span>
     </dt>
@@ -1318,7 +1318,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       <div class="pf-c-description-list__text">example</div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Pod selector</span>
     </dt>
@@ -1333,7 +1333,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       </div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Annotation</span>
     </dt>
@@ -1349,7 +1349,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
 
 ```html
 <dl class="pf-c-description-list pf-m-display-2xl pf-m-2-col-on-lg">
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Name</span>
     </dt>
@@ -1357,7 +1357,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       <div class="pf-c-description-list__text">example</div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Namespace</span>
     </dt>
@@ -1367,7 +1367,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       </div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Labels</span>
     </dt>
@@ -1375,7 +1375,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       <div class="pf-c-description-list__text">example</div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Pod selector</span>
     </dt>
@@ -1390,7 +1390,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       </div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Annotation</span>
     </dt>
@@ -1406,7 +1406,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
 
 ```html
 <dl class="pf-c-description-list pf-m-3-col-on-lg pf-m-display-lg">
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Name</span>
     </dt>
@@ -1414,7 +1414,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       <div class="pf-c-description-list__text">example</div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Namespace</span>
     </dt>
@@ -1424,7 +1424,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       </div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Labels</span>
     </dt>
@@ -1443,7 +1443,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
   class="pf-c-description-list pf-m-2-col-on-lg pf-m-display-lg pf-m-horizontal"
   style="--pf-c-description-list__term--width: 10ch;"
 >
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Name</span>
     </dt>
@@ -1451,7 +1451,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       <div class="pf-c-description-list__text">example</div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Namespace</span>
     </dt>
@@ -1461,7 +1461,7 @@ Cards can be used as [description list group wrappers](../card#description-list-
       </div>
     </dd>
   </div>
-  <div class="pf-c-card pf-m-description-list-group">
+  <div class="pf-c-card">
     <dt class="pf-c-description-list__term">
       <span class="pf-c-description-list__text">Labels</span>
     </dt>

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

@@ -39,6 +39,16 @@ cssPrefix: pf-c-form-control
 />
 <br />
 <br />
+<input
+  class="pf-c-form-control"
+  disabled
+  type="text"
+  value="Disabled"
+  id="input-disabled"
+  aria-label="Disabled input example"
+/>
+<br />
+<br />
 <input
   class="pf-c-form-control pf-m-success"
   type="text"
@@ -68,16 +78,6 @@ cssPrefix: pf-c-form-control
 />
 <br />
 <br />
-<input
-  class="pf-c-form-control"
-  disabled
-  type="text"
-  value="Disabled"
-  id="input-disabled"
-  aria-label="Disabled input example"
-/>
-<br />
-<br />
 <input
   class="pf-c-form-control pf-m-expanded"
   type="text"
@@ -123,11 +123,11 @@ cssPrefix: pf-c-form-control
 ```html
 <select
   class="pf-c-form-control pf-m-placeholder"
-  id="select-standard"
-  name="select-standard"
-  aria-label="Standard select example"
+  id="select-selectable-placeholder"
+  name="select-selectable-placeholder"
+  aria-label="Selectable placeholder select example"
 >
-  <option value selected disabled>Please choose</option>
+  <option value selected>Selectable placeholder</option>
   <option value="Mr">Mr</option>
   <option value="Miss">Miss</option>
   <option value="Mrs">Mrs</option>
@@ -139,11 +139,11 @@ cssPrefix: pf-c-form-control
 <br />
 <select
   class="pf-c-form-control pf-m-placeholder"
-  id="select-placeholder-enabled"
-  name="select-placeholder-enabled"
-  aria-label="Placeholder enabled select example"
+  id="select-non-selectable-placeholder"
+  name="select-non-selectable-placeholder"
+  aria-label="Non-selectable placeholder select example"
 >
-  <option value selected>Please choose</option>
+  <option value selected disabled>Non-selectable placeholder</option>
   <option value="Mr">Mr</option>
   <option value="Miss">Miss</option>
   <option value="Mrs">Mrs</option>
@@ -161,7 +161,7 @@ cssPrefix: pf-c-form-control
 >
   <optgroup label="Group 1">
     <option value="Option 1">The first option</option>
-    <option value="Option 2" selected>The second option is selected by default</option>
+    <option value="Option 2" selected>Option groups (second option selected)</option>
   </optgroup>
   <optgroup label="Group 2">
     <option value="Option 3">The third option</option>
@@ -226,6 +226,21 @@ cssPrefix: pf-c-form-control
 </select>
 <br />
 <br />
+<select
+  class="pf-c-form-control pf-m-placeholder"
+  disabled
+  id="select-disabled"
+  name="select-disabled"
+  aria-label="Disabled select example"
+>
+  <option value selected>Disabled</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>
 
 ```
 
@@ -251,6 +266,16 @@ cssPrefix: pf-c-form-control
 </textarea>
 <br />
 <br />
+<textarea
+  class="pf-c-form-control"
+  disabled
+  name="textarea-disabled"
+  id="textarea-disabled"
+  aria-label="Disabled textarea example"
+>Disabled
+</textarea>
+<br />
+<br />
 <textarea
   class="pf-c-form-control pf-m-success"
   name="textarea-success"

package/docs/components/LogViewer/examples/LogViewer.md

@@ -4476,6 +4476,7 @@ cssPrefix: pf-c-log-viewer
 </div>
 <div
   class="pf-c-popover pf-m-bottom"
+  role="dialog"
   aria-modal="true"
   aria-labelledby="popover-bottom-header"
   aria-describedby="popover-bottom-body"

package/docs/components/ModalBox/examples/ModalBox.css

@@ -0,0 +1,10 @@
+.ws-core-c-modal .ws-preview-html {
+ position: relative;
+}
+
+.ws-core-c-modal .pf-c-modal-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}