@patternfly/react-styles 5.0.0-alpha.10 → 5.0.0-alpha.11

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 5.0.0-alpha.11 (2023-05-16)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
 # [5.0.0-alpha.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@5.0.0-alpha.9...@patternfly/react-styles@5.0.0-alpha.10) (2023-05-05)
 
 ### Bug Fixes

package/css/components/AboutModalBox/about-modal-box.css

@@ -10,7 +10,6 @@
 
 .pf-v5-c-about-modal-box {
   --pf-v5-c-about-modal-box--BackgroundColor: var(--pf-v5-global--palette--black-1000);
-  --pf-v5-c-about-modal-box--BackgroundImage: url("../../assets/images/pfbg-icon.svg");
   --pf-v5-c-about-modal-box--BackgroundPosition: bottom right;
   --pf-v5-c-about-modal-box--BackgroundSize--min-width: 200px;
   --pf-v5-c-about-modal-box--BackgroundSize--width: 60%;
@@ -41,9 +40,6 @@
   --pf-v5-c-about-modal-box__close--c-button--Height: calc(var(--pf-v5-c-about-modal-box__close--c-button--FontSize) * 2);
   --pf-v5-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-v5-global--palette--black-1000);
   --pf-v5-c-about-modal-box__close--c-button--hover--BackgroundColor: rgba(3, 3, 3, 0.4);
-  --pf-v5-c-about-modal-box__hero--sm--BackgroundImage: url("../../assets/images/pfbg_992@2x.jpg");
-  --pf-v5-c-about-modal-box__hero--sm--BackgroundPosition: top left;
-  --pf-v5-c-about-modal-box__hero--sm--BackgroundSize: cover;
   --pf-v5-c-about-modal-box__brand-image--Height: 2.5rem;
   --pf-v5-c-about-modal-box__header--PaddingRight: var(--pf-v5-global--spacer--xl);
   --pf-v5-c-about-modal-box__header--PaddingBottom: var(--pf-v5-global--spacer--sm);
@@ -71,7 +67,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   background-color: var(--pf-v5-c-about-modal-box--BackgroundColor);
-  background-image: var(--pf-v5-c-about-modal-box--BackgroundImage);
+  background-image: var(--pf-v5-c-about-modal-box--BackgroundImage, none);
   background-repeat: no-repeat;
   background-position: var(--pf-v5-c-about-modal-box--BackgroundPosition);
   background-size: var(--pf-v5-c-about-modal-box--BackgroundSize);
@@ -198,6 +194,7 @@
   justify-content: center;
   width: var(--pf-v5-c-about-modal-box__close--c-button--Width);
   height: var(--pf-v5-c-about-modal-box__close--c-button--Height);
+  padding: 0;
   font-size: var(--pf-v5-c-about-modal-box__close--c-button--FontSize);
   color: var(--pf-v5-c-about-modal-box__close--c-button--Color);
   background-color: var(--pf-v5-c-about-modal-box__close--c-button--BackgroundColor);
@@ -207,21 +204,6 @@
   --pf-v5-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-v5-c-about-modal-box__close--c-button--hover--BackgroundColor);
 }
 
-.pf-v5-c-about-modal-box__hero {
-  display: none;
-}
-@media only screen and (min-width: 576px) {
-  .pf-v5-c-about-modal-box__hero {
-    display: block;
-    grid-area: hero;
-    background-image: var(--pf-v5-c-about-modal-box__hero--sm--BackgroundImage);
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-position: var(--pf-v5-c-about-modal-box__hero--sm--BackgroundPosition);
-    background-size: var(--pf-v5-c-about-modal-box__hero--sm--BackgroundSize);
-  }
-}
-
 :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box {
   --pf-v5-global--Color--100: #e0e0e0;
   --pf-v5-global--Color--200: #aaabac;

package/css/components/AboutModalBox/about-modal-box.d.ts

@@ -6,7 +6,6 @@ declare const _default: {
   "aboutModalBoxClose": "pf-v5-c-about-modal-box__close",
   "aboutModalBoxContent": "pf-v5-c-about-modal-box__content",
   "aboutModalBoxHeader": "pf-v5-c-about-modal-box__header",
-  "aboutModalBoxHero": "pf-v5-c-about-modal-box__hero",
   "aboutModalBoxStrapline": "pf-v5-c-about-modal-box__strapline",
   "button": "pf-v5-c-button",
   "modifiers": {

package/css/components/AboutModalBox/about-modal-box.js

@@ -8,7 +8,6 @@ exports.default = {
   "aboutModalBoxClose": "pf-v5-c-about-modal-box__close",
   "aboutModalBoxContent": "pf-v5-c-about-modal-box__content",
   "aboutModalBoxHeader": "pf-v5-c-about-modal-box__header",
-  "aboutModalBoxHero": "pf-v5-c-about-modal-box__hero",
   "aboutModalBoxStrapline": "pf-v5-c-about-modal-box__strapline",
   "button": "pf-v5-c-button",
   "modifiers": {

package/css/components/AboutModalBox/about-modal-box.mjs

@@ -6,7 +6,6 @@ export default {
   "aboutModalBoxClose": "pf-v5-c-about-modal-box__close",
   "aboutModalBoxContent": "pf-v5-c-about-modal-box__content",
   "aboutModalBoxHeader": "pf-v5-c-about-modal-box__header",
-  "aboutModalBoxHero": "pf-v5-c-about-modal-box__hero",
   "aboutModalBoxStrapline": "pf-v5-c-about-modal-box__strapline",
   "button": "pf-v5-c-button",
   "modifiers": {

package/css/components/BackgroundImage/background-image.css

@@ -1,6 +1,5 @@
 .pf-v5-c-background-image {
   --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
-  --pf-v5-c-background-image--BackgroundImage: url("../../assets/images/pfbg-icon.svg");
   --pf-v5-c-background-image--BackgroundPosition: bottom right;
   --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
   --pf-v5-c-background-image--BackgroundSize--width: 60%;
@@ -13,7 +12,7 @@
   width: 100%;
   height: 100%;
   background-color: var(--pf-v5-c-background-image--BackgroundColor);
-  background-image: var(--pf-v5-c-background-image--BackgroundImage);
+  background-image: var(--pf-v5-c-background-image--BackgroundImage, none);
   background-repeat: no-repeat;
   background-position: var(--pf-v5-c-background-image--BackgroundPosition);
   background-size: var(--pf-v5-c-background-image--BackgroundSize);

package/css/components/Breadcrumb/breadcrumb.css

@@ -2,7 +2,7 @@
   --pf-v5-c-breadcrumb__item--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-breadcrumb__item--LineHeight: var(--pf-v5-global--LineHeight--sm);
   --pf-v5-c-breadcrumb__item--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-breadcrumb__item-divider--Color: var(--pf-v5-global--BorderColor--200);
+  --pf-v5-c-breadcrumb__item-divider--Color: var(--pf-v5-global--icon--Color--dark);
   --pf-v5-c-breadcrumb__item-divider--MarginRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-breadcrumb__item-divider--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-breadcrumb__link--Color: var(--pf-v5-global--link--Color);
@@ -89,8 +89,4 @@ button.pf-v5-c-breadcrumb__link {
 
 .pf-v5-c-breadcrumb__list > :first-child .pf-v5-c-breadcrumb__item-divider {
   display: none;
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-breadcrumb {
-  --pf-v5-c-breadcrumb__item-divider--Color: var(--pf-v5-global--BorderColor--100);
 }

package/css/components/Breadcrumb/breadcrumb.d.ts

@@ -10,7 +10,6 @@ declare const _default: {
   "dropdownToggle": "pf-v5-c-dropdown__toggle",
   "modifiers": {
     "current": "pf-m-current"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };
 export default _default;

package/css/components/Breadcrumb/breadcrumb.js

@@ -12,6 +12,5 @@ exports.default = {
   "dropdownToggle": "pf-v5-c-dropdown__toggle",
   "modifiers": {
     "current": "pf-m-current"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };

package/css/components/Breadcrumb/breadcrumb.mjs

@@ -10,6 +10,5 @@ export default {
   "dropdownToggle": "pf-v5-c-dropdown__toggle",
   "modifiers": {
     "current": "pf-m-current"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };

package/css/components/FormControl/form-control.css

@@ -122,13 +122,6 @@
   --pf-v5-c-form-control--textarea--success--BackgroundPositionY: var(--pf-v5-c-form-control--PaddingLeft);
   --pf-v5-c-form-control--textarea--m-warning--BackgroundPositionY: var(--pf-v5-c-form-control--PaddingLeft);
   --pf-v5-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-v5-c-form-control--PaddingLeft);
-  --pf-v5-c-form-control--m-icon-sprite--success--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#success");
-  --pf-v5-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#warning");
-  --pf-v5-c-form-control--m-icon-sprite--invalid--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#invalid");
-  --pf-v5-c-form-control--m-icon-sprite__select--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#select");
-  --pf-v5-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#search");
-  --pf-v5-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#calendar");
-  --pf-v5-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#clock");
   --pf-v5-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-v5-c-form-control--FontSize);
   --pf-v5-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-v5-global--spacer--md) + 7px);
   --pf-v5-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-v5-global--spacer--md) + 1px - var(--pf-v5-global--spacer--lg));

package/css/components/Icon/icon.css

@@ -1,29 +1,30 @@
 .pf-v5-c-icon {
-  --pf-v5-c-icon--Width: var(--pf-v5-global--icon--FontSize--md);
-  --pf-v5-c-icon--Height: var(--pf-v5-global--icon--FontSize--md);
-  --pf-v5-c-icon--m-inline--Width: 1em;
-  --pf-v5-c-icon--m-inline--Height: 1em;
+  --pf-v5-c-icon--Width: 1em;
+  --pf-v5-c-icon--Height: 1em;
   --pf-v5-c-icon--m-sm--Width: var(--pf-v5-global--icon--FontSize--sm);
-  --pf-v5-c-icon--m-md--Width: var(--pf-v5-global--icon--FontSize--md);
-  --pf-v5-c-icon--m-lg--Width: var(--pf-v5-global--icon--FontSize--lg);
-  --pf-v5-c-icon--m-xl--Width: var(--pf-v5-global--icon--FontSize--xl);
   --pf-v5-c-icon--m-sm--Height: var(--pf-v5-global--icon--FontSize--sm);
+  --pf-v5-c-icon--m-md--Width: var(--pf-v5-global--icon--FontSize--md);
   --pf-v5-c-icon--m-md--Height: var(--pf-v5-global--icon--FontSize--md);
+  --pf-v5-c-icon--m-lg--Width: var(--pf-v5-global--icon--FontSize--lg);
   --pf-v5-c-icon--m-lg--Height: var(--pf-v5-global--icon--FontSize--lg);
+  --pf-v5-c-icon--m-xl--Width: var(--pf-v5-global--icon--FontSize--xl);
   --pf-v5-c-icon--m-xl--Height: var(--pf-v5-global--icon--FontSize--xl);
-  --pf-v5-c-icon__content--Color: var(--pf-v5-global--icon--Color--dark);
+  --pf-v5-c-icon--m-inline--Width: 1em;
+  --pf-v5-c-icon--m-inline--Height: 1em;
+  --pf-v5-c-icon__content--svg--VerticalAlign: -.125em;
+  --pf-v5-c-icon__content--Color: initial;
   --pf-v5-c-icon__content--m-danger--Color: var(--pf-v5-global--danger-color--100);
   --pf-v5-c-icon__content--m-warning--Color: var(--pf-v5-global--warning-color--100);
   --pf-v5-c-icon__content--m-success--Color: var(--pf-v5-global--success-color--100);
   --pf-v5-c-icon__content--m-info--Color: var(--pf-v5-global--info-color--100);
   --pf-v5-c-icon__content--m-custom--Color: var(--pf-v5-global--custom-color--100);
-  --pf-v5-c-icon__content--FontSize: var(--pf-v5-global--icon--FontSize--md);
+  --pf-v5-c-icon--m-inline__content--Color: initial;
+  --pf-v5-c-icon__content--FontSize: 1em;
+  --pf-v5-c-icon--m-sm__content--FontSize: var(--pf-v5-global--icon--FontSize--sm);
+  --pf-v5-c-icon--m-md__content--FontSize: var(--pf-v5-global--icon--FontSize--md);
+  --pf-v5-c-icon--m-lg__content--FontSize: var(--pf-v5-global--icon--FontSize--lg);
+  --pf-v5-c-icon--m-xl__content--FontSize: var(--pf-v5-global--icon--FontSize--xl);
   --pf-v5-c-icon--m-inline__content--FontSize: 1em;
-  --pf-v5-c-icon__content--svg--VerticalAlign: -.125em;
-  --pf-v5-c-icon--m-sm--content--FontSize: var(--pf-v5-global--icon--FontSize--sm);
-  --pf-v5-c-icon--m-md--content--FontSize: var(--pf-v5-global--icon--FontSize--md);
-  --pf-v5-c-icon--m-lg--content--FontSize: var(--pf-v5-global--icon--FontSize--lg);
-  --pf-v5-c-icon--m-xl--content--FontSize: var(--pf-v5-global--icon--FontSize--xl);
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -35,7 +36,7 @@
   --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-inline--Width);
   --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-inline--Height);
   --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-inline__content--FontSize);
-  --pf-v5-c-icon__content--Color: currentcolor;
+  --pf-v5-c-icon__content--Color: var(--pf-v5-c-icon--m-inline__content--Color);
   line-height: 1;
 }
 .pf-v5-c-icon.pf-m-inline .pf-v5-c-spinner {
@@ -44,22 +45,22 @@
 .pf-v5-c-icon.pf-m-sm {
   --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-sm--Width);
   --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-sm--Height);
-  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-sm--content--FontSize);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-sm__content--FontSize);
 }
 .pf-v5-c-icon.pf-m-md {
   --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-md--Width);
   --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-md--Height);
-  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-md--content--FontSize);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-md__content--FontSize);
 }
 .pf-v5-c-icon.pf-m-lg {
   --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-lg--Width);
   --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-lg--Height);
-  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg--content--FontSize);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg__content--FontSize);
 }
 .pf-v5-c-icon.pf-m-xl {
   --pf-v5-c-icon--Width: var(--pf-v5-c-icon--m-xl--Width);
   --pf-v5-c-icon--Height: var(--pf-v5-c-icon--m-xl--Height);
-  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl--content--FontSize);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl__content--FontSize);
 }
 .pf-v5-c-icon.pf-m-in-progress {
   --pf-v5-c-icon__content--Opacity: 0;
@@ -76,23 +77,23 @@
 }
 .pf-v5-c-icon__content.pf-m-sm,
 .pf-v5-c-icon__progress.pf-m-sm {
-  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-sm--content--FontSize);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-sm__content--FontSize);
 }
 .pf-v5-c-icon__content.pf-m-md,
 .pf-v5-c-icon__progress.pf-m-md {
-  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-md--content--FontSize);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-md__content--FontSize);
 }
 .pf-v5-c-icon__content.pf-m-lg,
 .pf-v5-c-icon__progress.pf-m-lg {
-  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg--content--FontSize);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-lg__content--FontSize);
 }
 .pf-v5-c-icon__content.pf-m-xl,
 .pf-v5-c-icon__progress.pf-m-xl {
-  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl--content--FontSize);
+  --pf-v5-c-icon__content--FontSize: var(--pf-v5-c-icon--m-xl__content--FontSize);
 }
 
 .pf-v5-c-icon__content {
-  color: var(--pf-v5-c-icon__content--Color);
+  color: var(--pf-v5-c-icon__content--Color, inherit);
   opacity: var(--pf-v5-c-icon__content--Opacity, 1);
 }
 .pf-v5-c-icon__content.pf-m-danger {

package/css/components/List/list.css

@@ -11,7 +11,7 @@
   --pf-v5-c-list__item-icon--MinWidth: var(--pf-v5-global--icon--FontSize--sm);
   --pf-v5-c-list__item-icon--MarginTop: 0.375rem;
   --pf-v5-c-list__item-icon--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-list__item-icon--Color: var(--pf-v5-global--icon--Color--light);
+  --pf-v5-c-list__item-icon--Color: var(--pf-v5-global--icon--Color--dark);
   --pf-v5-c-list__item-icon--FontSize: var(--pf-v5-global--icon--FontSize--sm);
   --pf-v5-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-v5-global--icon--FontSize--lg);
   --pf-v5-c-list--m-icon-lg__item-icon--MarginRight: var(--pf-v5-global--spacer--md);

package/css/components/LogViewer/log-viewer.css

@@ -109,9 +109,6 @@
 .pf-v5-c-log-viewer .pf-v5-c-toolbar__content-section {
   flex-wrap: nowrap;
 }
-.pf-v5-c-log-viewer .pf-v5-c-search-input {
-  width: 100%;
-}
 
 .pf-v5-c-log-viewer__header {
   margin-bottom: var(--pf-v5-c-log-viewer__header--MarginBottom);

package/css/components/LogViewer/log-viewer.d.ts

@@ -19,7 +19,6 @@ declare const _default: {
     "match": "pf-m-match",
     "current": "pf-m-current"
   },
-  "searchInput": "pf-v5-c-search-input",
   "themeDark": "pf-v5-theme-dark",
   "toolbar": "pf-v5-c-toolbar",
   "toolbarContentSection": "pf-v5-c-toolbar__content-section"

package/css/components/LogViewer/log-viewer.js

@@ -21,7 +21,6 @@ exports.default = {
     "match": "pf-m-match",
     "current": "pf-m-current"
   },
-  "searchInput": "pf-v5-c-search-input",
   "themeDark": "pf-v5-theme-dark",
   "toolbar": "pf-v5-c-toolbar",
   "toolbarContentSection": "pf-v5-c-toolbar__content-section"

package/css/components/LogViewer/log-viewer.mjs

@@ -19,7 +19,6 @@ export default {
     "match": "pf-m-match",
     "current": "pf-m-current"
   },
-  "searchInput": "pf-v5-c-search-input",
   "themeDark": "pf-v5-theme-dark",
   "toolbar": "pf-v5-c-toolbar",
   "toolbarContentSection": "pf-v5-c-toolbar__content-section"

package/css/components/MultipleFileUpload/multiple-file-upload.css

@@ -20,7 +20,7 @@
   --pf-v5-c-multiple-file-upload__title--Display: grid;
   --pf-v5-c-multiple-file-upload__title--GridTemplateColumns: auto;
   --pf-v5-c-multiple-file-upload__title--Gap: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-multiple-file-upload__title-icon--Color: var(--pf-v5-global--Color--200);
+  --pf-v5-c-multiple-file-upload__title-icon--Color: var(--pf-v5-global--icon--Color--dark);
   --pf-v5-c-multiple-file-upload__title-text-separator--Display: block;
   --pf-v5-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-multiple-file-upload__info--FontSize: var(--pf-v5-global--FontSize--sm);
@@ -47,7 +47,7 @@
   --pf-v5-c-multiple-file-upload--m-horizontal__info--MarginTop: 0;
   --pf-v5-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
   --pf-v5-c-multiple-file-upload__status-progress--Gap: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-multiple-file-upload__status-progress-icon--Color: var(--pf-v5-global--Color--200);
+  --pf-v5-c-multiple-file-upload__status-progress-icon--Color: var(--pf-v5-global--icon--Color--dark);
   --pf-v5-c-multiple-file-upload__status-item--PaddingTop: var(--pf-v5-global--spacer--md);
   --pf-v5-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-v5-global--spacer--md);
   --pf-v5-c-multiple-file-upload__status-item--first-child--PaddingTop: 0;
@@ -55,7 +55,7 @@
   --pf-v5-c-multiple-file-upload__status-item--Gap: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-multiple-file-upload__status-item--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-multiple-file-upload__status-item--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-multiple-file-upload__status-item-icon--Color: var(--pf-v5-global--Color--200);
+  --pf-v5-c-multiple-file-upload__status-item-icon--Color: var(--pf-v5-global--icon--Color--dark);
   --pf-v5-c-multiple-file-upload__status-item-close--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
   --pf-v5-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
   --pf-v5-c-multiple-file-upload__status-item-progress--Gap: var(--pf-v5-global--spacer--sm);

package/css/components/NotificationBadge/notification-badge.css

@@ -31,7 +31,7 @@
   --pf-v5-c-notification-badge--m-attention--hover--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
   --pf-v5-c-notification-badge--m-attention--m-expanded--after--BackgroundColor: var(--pf-v5-global--danger-color--200);
   --pf-v5-c-notification-badge__count--MarginLeft: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-notification-badge--pf-v5-c-icon-attention-bell--LineHeight: var(--pf-v5-global--LineHeight--sm);
+  --pf-v5-c-notification-badge--pf-v5-pficon-attention-bell--LineHeight: var(--pf-v5-global--LineHeight--sm);
   position: relative;
   display: inline-block;
   padding: var(--pf-v5-c-notification-badge--PaddingTop) var(--pf-v5-c-notification-badge--PaddingRight) var(--pf-v5-c-notification-badge--PaddingBottom) var(--pf-v5-c-notification-badge--PaddingLeft);
@@ -62,7 +62,7 @@
 .pf-v5-c-notification-badge .pf-v5-c-icon-attention-bell,
 .pf-v5-c-notification-badge .pf-v5-c-icon-bell {
   display: inline-block;
-  line-height: var(--pf-v5-c-notification-badge--pf-v5-c-icon-attention-bell--LineHeight);
+  line-height: var(--pf-v5-c-notification-badge--pf-v5-pficon-attention-bell--LineHeight);
 }
 .pf-v5-c-notification-badge .pf-v5-c-icon-attention-bell::before,
 .pf-v5-c-notification-badge .pf-v5-c-icon-bell::before {

package/css/components/ProgressStepper/progress-stepper.css

@@ -271,7 +271,7 @@
   border: var(--pf-v5-c-progress-stepper__step-icon--BorderWidth) solid var(--pf-v5-c-progress-stepper__step-icon--BorderColor);
   border-radius: 50%;
 }
-.pf-v5-c-progress-stepper__step-icon .pf-v5-c-icon {
+.pf-v5-c-progress-stepper__step-icon .pf-v5-pficon {
   margin-top: var(--pf-v5-c-progress-stepper__pficon--MarginTop);
 }
 .pf-v5-c-progress-stepper__step-icon .fa-exclamation-triangle {

package/css/components/ProgressStepper/progress-stepper.d.ts

@@ -1,7 +1,6 @@
 import './progress-stepper.css';
 declare const _default: {
   "faExclamationTriangle": "fa-exclamation-triangle",
-  "icon": "pf-v5-c-icon",
   "modifiers": {
     "center": "pf-m-center",
     "compact": "pf-m-compact",
@@ -25,6 +24,7 @@ declare const _default: {
     "horizontalOn_2xl": "pf-m-horizontal-on-2xl",
     "verticalOn_2xl": "pf-m-vertical-on-2xl"
   },
+  "pficon": "pf-v5-pficon",
   "progressStepper": "pf-v5-c-progress-stepper",
   "progressStepperStep": "pf-v5-c-progress-stepper__step",
   "progressStepperStepConnector": "pf-v5-c-progress-stepper__step-connector",

package/css/components/ProgressStepper/progress-stepper.js

@@ -3,7 +3,6 @@ exports.__esModule = true;
 require('./progress-stepper.css');
 exports.default = {
   "faExclamationTriangle": "fa-exclamation-triangle",
-  "icon": "pf-v5-c-icon",
   "modifiers": {
     "center": "pf-m-center",
     "compact": "pf-m-compact",
@@ -27,6 +26,7 @@ exports.default = {
     "horizontalOn_2xl": "pf-m-horizontal-on-2xl",
     "verticalOn_2xl": "pf-m-vertical-on-2xl"
   },
+  "pficon": "pf-v5-pficon",
   "progressStepper": "pf-v5-c-progress-stepper",
   "progressStepperStep": "pf-v5-c-progress-stepper__step",
   "progressStepperStepConnector": "pf-v5-c-progress-stepper__step-connector",

package/css/components/ProgressStepper/progress-stepper.mjs

@@ -1,7 +1,6 @@
 import './progress-stepper.css';
 export default {
   "faExclamationTriangle": "fa-exclamation-triangle",
-  "icon": "pf-v5-c-icon",
   "modifiers": {
     "center": "pf-m-center",
     "compact": "pf-m-compact",
@@ -25,6 +24,7 @@ export default {
     "horizontalOn_2xl": "pf-m-horizontal-on-2xl",
     "verticalOn_2xl": "pf-m-vertical-on-2xl"
   },
+  "pficon": "pf-v5-pficon",
   "progressStepper": "pf-v5-c-progress-stepper",
   "progressStepperStep": "pf-v5-c-progress-stepper__step",
   "progressStepperStepConnector": "pf-v5-c-progress-stepper__step-connector",

package/css/components/TextInputGroup/text-input-group.css

@@ -23,8 +23,7 @@
   --pf-v5-c-text-input-group__text-input--placeholder--Color: var(--pf-v5-global--Color--dark-200);
   --pf-v5-c-text-input-group__text-input--BackgroundColor: transparent;
   --pf-v5-c-text-input-group__icon--Left: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-text-input-group__icon--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-text-input-group__text--hover__icon--Color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-text-input-group__icon--Color: var(--pf-v5-global--icon--Color--dark);
   --pf-v5-c-text-input-group__icon--TranslateY: -50%;
   --pf-v5-c-text-input-group__utilities--MarginRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-text-input-group__utilities--MarginLeft: var(--pf-v5-global--spacer--xs);
@@ -97,9 +96,6 @@
 .pf-v5-c-text-input-group__text::after {
   border-bottom: var(--pf-v5-c-text-input-group__text--after--BorderBottomWidth) solid var(--pf-v5-c-text-input-group__text--after--BorderBottomColor);
 }
-.pf-v5-c-text-input-group__text:hover, .pf-v5-c-text-input-group__text:focus-within {
-  --pf-v5-c-text-input-group__icon--Color: var(--pf-v5-c-text-input-group__text--hover__icon--Color);
-}
 .pf-v5-c-text-input-group__text:focus-within {
   --pf-v5-c-text-input-group__text--after--BorderBottomWidth: var(--pf-v5-c-text-input-group__text--focus-within--after--BorderBottomWidth);
   --pf-v5-c-text-input-group__text--after--BorderBottomColor: var(--pf-v5-c-text-input-group__text--focus-within--after--BorderBottomColor);

package/css/components/Wizard/wizard.css

@@ -12,7 +12,7 @@
   --pf-v5-c-wizard--Height: 100%;
   --pf-v5-c-modal-box--c-wizard--FlexBasis: 47.625rem;
   --pf-v5-c-wizard__header--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
-  --pf-v5-c-wizard__header--ZIndex: var(--pf-v5-global--ZIndex--md);
+  --pf-v5-c-wizard__header--ZIndex: auto;
   --pf-v5-c-wizard__header--PaddingTop: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-wizard__header--PaddingRight: var(--pf-v5-global--spacer--md);
   --pf-v5-c-wizard__header--PaddingBottom: var(--pf-v5-global--spacer--lg);
@@ -62,7 +62,7 @@
   --pf-v5-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
   --pf-v5-c-wizard__nav-link--m-disabled--before--Color: var(--pf-v5-global--Color--dark-200);
   --pf-v5-c-wizard__toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-wizard__toggle--ZIndex: var(--pf-v5-global--ZIndex--md);
+  --pf-v5-c-wizard__toggle--ZIndex: var(--pf-v5-global--ZIndex--xs);
   --pf-v5-c-wizard__toggle--BoxShadow: var(--pf-v5-global--BoxShadow--md-bottom);
   --pf-v5-c-wizard__toggle--PaddingTop: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-wizard__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
@@ -80,7 +80,7 @@
   --pf-v5-c-wizard__toggle-separator--Color: var(--pf-v5-global--BorderColor--200);
   --pf-v5-c-wizard__toggle-icon--LineHeight: var(--pf-v5-global--LineHeight--md);
   --pf-v5-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
-  --pf-v5-c-wizard__nav--ZIndex: var(--pf-v5-global--ZIndex--sm);
+  --pf-v5-c-wizard__nav--ZIndex: var(--pf-v5-global--ZIndex--xs);
   --pf-v5-c-wizard__nav--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-wizard__nav--BoxShadow: var(--pf-v5-global--BoxShadow--md-bottom);
   --pf-v5-c-wizard__nav--Width: 100%;
@@ -104,7 +104,7 @@
   --pf-v5-c-wizard__outer-wrap--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-wizard__outer-wrap--lg--PaddingLeft: var(--pf-v5-c-wizard__nav--Width);
   --pf-v5-c-wizard__outer-wrap--MinHeight: 15.625rem;
-  --pf-v5-c-wizard__main--ZIndex: var(--pf-v5-global--ZIndex--xs);
+  --pf-v5-c-wizard__main--ZIndex: auto;
   --pf-v5-c-wizard__main-body--PaddingTop: var(--pf-v5-global--spacer--md);
   --pf-v5-c-wizard__main-body--PaddingRight: var(--pf-v5-global--spacer--md);
   --pf-v5-c-wizard__main-body--PaddingBottom: var(--pf-v5-global--spacer--md);
@@ -114,7 +114,7 @@
   --pf-v5-c-wizard__main-body--xl--PaddingBottom: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-wizard__main-body--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-wizard__footer--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-wizard__footer--ZIndex: var(--pf-v5-global--ZIndex--sm);
+  --pf-v5-c-wizard__footer--ZIndex: var(--pf-v5-global--ZIndex--xs);
   --pf-v5-c-wizard__footer--PaddingTop: var(--pf-v5-global--spacer--md);
   --pf-v5-c-wizard__footer--PaddingRight: var(--pf-v5-global--spacer--md);
   --pf-v5-c-wizard__footer--PaddingBottom: var(--pf-v5-global--spacer--sm);

package/css/docs/components/Avatar/examples/Avatar.css

@@ -1,3 +1,3 @@
 #ws-core-c-avatar-bordered---dark {
-  background: var(--#{$pf-global}--BackgroundColor--dark-100);
+  background: var(--pf-v5-global--BackgroundColor--dark-100);
 }

package/css/docs/components/NotificationBadge/examples/NotificationBadge.css

@@ -1,3 +1,3 @@
 .ws-core-c-notification-badge {
-  background: var(--#{$pf-global}--BackgroundColor--dark-100);
+  background: var(--pf-v5-global--BackgroundColor--dark-100);
 }

package/css/docs/components/TextInputGroup/examples/TextInputGroup.css

@@ -1,16 +1,3 @@
-#ws-core-c-search-input-advanced-search-expanded,
-#ws-core-c-text-input-group-search-input-group-advanced-search-expanded-with-autocomplete {
-  height: 540px;
-}
-
-#ws-core-c-search-input-autocomplete {
-  height: 250px;
-}
-
-#ws-core-c-search-input-autocomplete-last-option-hint {
-  height: 130px;
-}
-
 .ws-example-wrapper {
   position: relative;
 }