@patternfly/react-styles 4.12.1 → 4.12.5

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.12.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@4.12.4...@patternfly/react-styles@4.12.5) (2021-10-13)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## [4.12.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@4.12.3...@patternfly/react-styles@4.12.4) (2021-10-11)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## [4.12.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@4.12.2...@patternfly/react-styles@4.12.3) (2021-10-08)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## [4.12.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@4.12.1...@patternfly/react-styles@4.12.2) (2021-10-06)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
 ## [4.12.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@4.12.0...@patternfly/react-styles@4.12.1) (2021-10-01)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/Banner/banner.css

@@ -49,6 +49,12 @@
   --pf-c-banner--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-banner--Color: var(--pf-global--Color--100);
   --pf-c-banner--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
+  --pf-c-banner--link--Color: var(--pf-c-banner--Color);
+  --pf-c-banner--link--TextDecoration: underline;
+  --pf-c-banner--link--hover--Color: var(--pf-c-banner--Color);
+  --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-banner--link--disabled--Color: var(--pf-c-banner--Color);
+  --pf-c-banner--link--disabled--TextDecoration: none;
   --pf-c-banner--m-info--BackgroundColor: var(--pf-global--palette--blue-200);
   --pf-c-banner--m-danger--BackgroundColor: var(--pf-global--danger-color--100);
   --pf-c-banner--m-success--BackgroundColor: var(--pf-global--success-color--100);
@@ -91,4 +97,31 @@
   top: 0;
   z-index: var(--pf-c-banner--m-sticky--ZIndex);
   box-shadow: var(--pf-c-banner--m-sticky--BoxShadow);
+}
+.pf-c-banner a {
+  color: var(--pf-c-banner--link--Color);
+  text-decoration: var(--pf-c-banner--link--TextDecoration);
+}
+.pf-c-banner a:hover:not(.pf-m-disabled) {
+  --pf-c-banner--link--Color: var(--pf-c-banner--link--hover--Color);
+  font-weight: var(--pf-c-banner--link--hover--FontWeight);
+}
+.pf-c-banner a.pf-m-disabled {
+  --pf-c-banner--link--Color: var(--pf-c-banner--link--disabled--Color);
+  --pf-c-banner--link--TextDecoration: var(--pf-c-banner--link--disabled--TextDecoration);
+  cursor: not-allowed;
+}
+.pf-c-banner .pf-c-button.pf-m-inline {
+  --pf-c-button--m-link--Color: var(--pf-c-banner--link--Color);
+  --pf-c-button--m-link--m-inline--hover--Color: var(--pf-c-banner--link--hover--Color);
+  --pf-c-button--disabled--Color: var(--pf-c-banner--link--disabled--Color);
+  text-decoration: var(--pf-c-banner--link--TextDecoration);
+}
+.pf-c-banner .pf-c-button.pf-m-inline:hover {
+  --pf-c-banner--link--Color: var(--pf-c-banner--link--hover--Color);
+  font-weight: var(--pf-c-banner--link--hover--FontWeight);
+}
+.pf-c-banner .pf-c-button.pf-m-inline:disabled, .pf-c-banner .pf-c-button.pf-m-inline.pf-m-disabled {
+  --pf-c-banner--link--TextDecoration: var(--pf-c-banner--link--disabled--TextDecoration);
+  cursor: not-allowed;
 }

package/css/components/Banner/banner.d.ts

@@ -8,7 +8,9 @@ declare const _default: {
     "info": "pf-m-info",
     "danger": "pf-m-danger",
     "success": "pf-m-success",
-    "sticky": "pf-m-sticky"
+    "sticky": "pf-m-sticky",
+    "disabled": "pf-m-disabled",
+    "inline": "pf-m-inline"
   }
 };
 export default _default;

package/css/components/Banner/banner.js

@@ -10,6 +10,8 @@ exports.default = {
     "info": "pf-m-info",
     "danger": "pf-m-danger",
     "success": "pf-m-success",
-    "sticky": "pf-m-sticky"
+    "sticky": "pf-m-sticky",
+    "disabled": "pf-m-disabled",
+    "inline": "pf-m-inline"
   }
 };

package/css/components/DataList/data-list.css

@@ -820,7 +820,6 @@
 .pf-c-data-list__item-draggable-button.pf-m-disabled {
   --pf-c-data-list__item-draggable-button-icon--Color: var(--pf-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
   pointer-events: none;
-  cursor: none;
 }
 .pf-c-data-list__item-draggable-button .pf-c-data-list__item-draggable-icon {
   color: var(--pf-c-data-list__item-draggable-button-icon--Color);

package/css/components/DescriptionList/description-list.css

@@ -19,6 +19,8 @@
   --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
   --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width);
   --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
+  --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
+  --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
   --pf-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem;
   --pf-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-c-description-list--m-auto-fit--GridTemplateColumns--min);
   --pf-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
@@ -32,12 +34,6 @@
   column-gap: var(--pf-c-description-list--ColumnGap);
   grid-template-columns: var(--pf-c-description-list--GridTemplateColumns);
 }
-@media screen and (min-width: 768px) {
-  .pf-c-description-list {
-    --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
-    --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
-  }
-}
 .pf-c-description-list[class*=pf-m-horizontal] {
   --pf-c-description-list__term--width: var(--pf-c-description-list--m-horizontal__term--width);
 }

package/css/components/DualListSelector/dual-list-selector.css

@@ -36,6 +36,7 @@
   --pf-c-dual-list-selector__item-text--Color: var(--pf-global--Color--100);
   --pf-c-dual-list-selector__list-item-row--m-selected__text--Color: var(--pf-global--active-color--100);
   --pf-c-dual-list-selector__list-item-row--m-selected__text--FontWeight: var(--pf-global--FontWeight--bold);
+  --pf-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-global--disabled-color--100);
   --pf-c-dual-list-selector__status--MarginBottom: var(--pf-global--spacer--sm);
   --pf-c-dual-list-selector__status-text--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-dual-list-selector__status-text--Color: var(--pf-global--Color--200);
@@ -56,6 +57,7 @@
   --pf-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
   --pf-c-dual-list-selector__item-toggle-icon--Transition: var(--pf-global--Transition);
   --pf-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-c-dual-list-selector__list-item-row--FontSize);
+  --pf-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-global--disabled-color--200);
   display: grid;
   grid-template-areas: "pane-header . pane-header-c" "pane-tools . pane-tools-c" "pane-status . pane-status-c" "pane-menu controls pane-menu-c";
   grid-template-columns: minmax(var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min), var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max)) min-content minmax(var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min), var(--pf-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max));
@@ -143,6 +145,11 @@
 .pf-c-dual-list-selector__list-item.pf-m-expanded {
   --pf-c-dual-list-selector__item-toggle-icon--Rotate: var(--pf-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate);
 }
+.pf-c-dual-list-selector__list-item.pf-m-disabled {
+  --pf-c-dual-list-selector__item-text--Color: var(--pf-c-dual-list-selector__list-item--m-disabled__item-text--Color);
+  --pf-c-dual-list-selector__item-toggle-icon--Color: var(--pf-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color);
+  pointer-events: none;
+}
 
 .pf-c-dual-list-selector__list-item-row {
   display: flex;
@@ -245,6 +252,7 @@
 .pf-c-dual-list-selector__item-toggle-icon {
   display: inline-block;
   min-width: var(--pf-c-dual-list-selector__item-toggle-icon--MinWidth);
+  color: var(--pf-c-dual-list-selector__item-toggle-icon--Color, inherit);
   text-align: center;
   transition: var(--pf-c-dual-list-selector__item-toggle-icon--Transition);
   transform: rotate(var(--pf-c-dual-list-selector__item-toggle-icon--Rotate));

package/css/components/DualListSelector/dual-list-selector.d.ts

@@ -30,6 +30,7 @@ declare const _default: {
     "dragOver": "pf-m-drag-over",
     "expandable": "pf-m-expandable",
     "expanded": "pf-m-expanded",
+    "disabled": "pf-m-disabled",
     "selected": "pf-m-selected",
     "check": "pf-m-check",
     "ghostRow": "pf-m-ghost-row",

package/css/components/DualListSelector/dual-list-selector.js

@@ -32,6 +32,7 @@ exports.default = {
     "dragOver": "pf-m-drag-over",
     "expandable": "pf-m-expandable",
     "expanded": "pf-m-expanded",
+    "disabled": "pf-m-disabled",
     "selected": "pf-m-selected",
     "check": "pf-m-check",
     "ghostRow": "pf-m-ghost-row",

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

@@ -173,6 +173,7 @@
   color: var(--pf-c-log-viewer__text--Color);
   word-break: break-all;
   white-space: break-spaces;
+  line-break: anywhere;
 }
 
 .pf-c-log-viewer__timestamp {

package/css/components/Masthead/masthead.css

@@ -130,7 +130,7 @@
   --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
   --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
   --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-  --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+  --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
   --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
   --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
   --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -207,7 +207,7 @@
 }
 .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height {
   --pf-c-menu-toggle--before--BorderRightColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderRightColor);
-  --pf-c-menu-toggle--before--BorderBottomColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor);
+  --pf-c-menu-toggle--before--BorderLeftColor: var(--pf-c-masthead--c-menu-toggle--m-full-height--before--BorderLeftColor);
 }
 .pf-c-masthead .pf-c-context-selector {
   --pf-c-context-selector--Width: var(--pf-c-masthead--c-context-selector--Width);
@@ -266,6 +266,7 @@
   padding-bottom: var(--pf-c-masthead__content--PaddingBottom);
   margin-left: var(--pf-c-masthead__content--MarginLeft);
   grid-column: var(--pf-c-masthead__content--GridColumn);
+  grid-column-end: -1;
   flex-shrink: 1;
 }
 .pf-c-masthead__content:only-child {
@@ -310,7 +311,7 @@
   --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
   --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
   --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-  --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+  --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
   --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
   --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
   --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -367,7 +368,7 @@
     --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
     --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
     --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
     --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
     --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
     --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -427,7 +428,7 @@
     --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
     --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
     --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
     --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
     --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
     --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -487,7 +488,7 @@
     --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
     --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
     --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
     --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
     --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
     --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -547,7 +548,7 @@
     --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
     --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
     --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
     --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
     --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
     --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);
@@ -607,7 +608,7 @@
     --pf-c-masthead__main--PaddingBottom: var(--pf-c-masthead--m-display-stack__main--PaddingBottom);
     --pf-c-masthead__main--MarginRight: var(--pf-c-masthead--m-display-stack__main--MarginRight);
     --pf-c-masthead__main--before--BorderBottom: var(--pf-c-masthead--m-display-stack__main--before--BorderBottom);
-    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-stack-inline__content--GridColumn);
+    --pf-c-masthead__content--GridColumn: var(--pf-c-masthead--m-display-stack__content--GridColumn);
     --pf-c-masthead__content--MinHeight: var(--pf-c-masthead--m-display-stack__content--MinHeight);
     --pf-c-masthead__content--Order: var(--pf-c-masthead--m-display-stack__content--Order);
     --pf-c-masthead__content--PaddingTop: var(--pf-c-masthead--m-display-stack__content--PaddingTop);

package/css/components/Menu/menu.css

@@ -76,17 +76,20 @@
   color: var(--pf-global--Color--100);
   --pf-c-menu--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-menu--BoxShadow: var(--pf-global--BoxShadow--md);
-  --pf-c-menu--MinWidth: 100%;
+  --pf-c-menu--MinWidth: auto;
   --pf-c-menu--Width: auto;
   --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
   --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
   --pf-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-c-menu--m-flyout__menu--left-offset));
   --pf-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
   --pf-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-c-menu--m-flyout__menu--m-left--right-offset));
+  --pf-c-menu--m-plain--BoxShadow: none;
   --pf-c-menu--m-flyout__menu--top-offset: 0px;
   --pf-c-menu--m-flyout__menu--left-offset: 0px;
   --pf-c-menu--m-flyout__menu--m-left--right-offset: 0px;
   --pf-c-menu__content--Height: auto;
+  --pf-c-menu__content--MaxHeight: none;
+  --pf-c-menu--m-scrollable__content--MaxHeight: 18.75rem;
   --pf-c-menu--c-divider--MarginTop: 0;
   --pf-c-menu--c-divider--MarginBottom: 0;
   --pf-c-menu__list--c-divider--MarginTop: var(--pf-global--spacer--sm);
@@ -182,9 +185,17 @@
   --pf-c-menu__footer--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-menu__footer--PaddingBottom: var(--pf-global--spacer--md);
   --pf-c-menu__footer--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-menu__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
+  --pf-c-menu__footer--BoxShadow: none;
+  --pf-c-menu__footer--after--BorderTopWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-menu__footer--after--BorderTopColor: var(--pf-global--BorderColor--100);
+  --pf-c-menu__footer--after--BorderBottomWidth: 0;
+  --pf-c-menu__footer--after--BorderBottomColor: var(--pf-global--BorderColor--100);
+  --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
+  --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
+  --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
   z-index: var(--pf-c-menu--ZIndex);
   width: var(--pf-c-menu--Width);
+  min-width: var(--pf-c-menu--MinWidth);
   background-color: var(--pf-c-menu--BackgroundColor);
   box-shadow: var(--pf-c-menu--BoxShadow);
 }
@@ -278,6 +289,15 @@
 .pf-c-menu.pf-m-drilled-in > .pf-c-menu__content > .pf-c-menu__list > .pf-c-menu__list-item:not(.pf-m-current-path) {
   display: none;
 }
+.pf-c-menu.pf-m-plain {
+  --pf-c-menu--BoxShadow: var(--pf-c-menu--m-plain--BoxShadow);
+}
+.pf-c-menu.pf-m-scrollable {
+  --pf-c-menu__content--MaxHeight: var(--pf-c-menu--m-scrollable__content--MaxHeight);
+  --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
+  --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
+  --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
+}
 
 .pf-c-menu__breadcrumb {
   display: flex;
@@ -349,9 +369,11 @@
 }
 .pf-c-menu__list-item:hover {
   --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--hover--BackgroundColor);
+  --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--hover--Color, inherit);
 }
 .pf-c-menu__list-item:focus-within {
   --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--focus-within--BackgroundColor);
+  --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--focus-within--Color, inherit);
 }
 .pf-c-menu__list-item.pf-m-disabled {
   --pf-c-menu__list-item--hover--BackgroundColor: transparent;
@@ -492,6 +514,18 @@
 }
 
 .pf-c-menu__footer {
+  position: relative;
   padding: var(--pf-c-menu__footer--PaddingTop) var(--pf-c-menu__footer--PaddingRight) var(--pf-c-menu__footer--PaddingBottom) var(--pf-c-menu__footer--PaddingLeft);
   box-shadow: var(--pf-c-menu__footer--BoxShadow);
+}
+.pf-c-menu__footer::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: "";
+  border-top: var(--pf-c-menu__footer--after--BorderTopWidth) solid var(--pf-c-menu__footer--after--BorderTopColor);
+  border-bottom: var(--pf-c-menu__footer--after--BorderBottomWidth) solid var(--pf-c-menu__footer--after--BorderBottomColor);
 }

package/css/components/Menu/menu.d.ts

@@ -41,6 +41,8 @@ declare const _default: {
     "drilledIn": "pf-m-drilled-in",
     "currentPath": "pf-m-current-path",
     "static": "pf-m-static",
+    "plain": "pf-m-plain",
+    "scrollable": "pf-m-scrollable",
     "disabled": "pf-m-disabled",
     "load": "pf-m-load",
     "loading": "pf-m-loading",

package/css/components/Menu/menu.js

@@ -43,6 +43,8 @@ exports.default = {
     "drilledIn": "pf-m-drilled-in",
     "currentPath": "pf-m-current-path",
     "static": "pf-m-static",
+    "plain": "pf-m-plain",
+    "scrollable": "pf-m-scrollable",
     "disabled": "pf-m-disabled",
     "load": "pf-m-load",
     "loading": "pf-m-loading",

package/css/components/Nav/nav.css

@@ -219,25 +219,41 @@
   --pf-c-nav__list--ScrollSnapTypeStrictness: proximity;
   --pf-c-nav__list--ScrollSnapType: var(--pf-c-nav__list--ScrollSnapTypeAxis) var(--pf-c-nav__list--ScrollSnapTypeStrictness);
   --pf-c-nav__item--ScrollSnapAlign: end;
+  --pf-c-nav__item--m-flyout--c-menu--top-offset: 0px;
+  --pf-c-nav__item--m-flyout--c-menu--left-offset: 0.25rem;
+  --pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset: 0px;
+  --pf-c-nav__item--m-flyout--c-menu--m-left--right-offset: 0.25rem;
   --pf-c-nav__item--m-flyout--MarginTop: 0;
-  --pf-c-nav__item--m-flyout--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
-  --pf-c-nav__item--m-flyout--focus--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
-  --pf-c-nav__item--m-flyout--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
+  --pf-c-nav__item--m-flyout--hover__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav__item--m-flyout--focus__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav__item--m-flyout--active__link--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-nav__item--m-flyout--hover__link--before--BorderWidth: 0;
+  --pf-c-nav__item--m-flyout--focus__link--before--BorderWidth: 0;
+  --pf-c-nav__item--m-flyout--active__link--before--BorderWidth: 0;
   --pf-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth: 0;
-  --pf-c-nav__item--m-flyout__subnav--Top: 0;
-  --pf-c-nav__item--m-flyout__subnav--Left: calc(100% - 0.25rem);
-  --pf-c-nav__item--m-flyout--subnav--PaddingBottom: 0;
-  --pf-c-nav__item--m-flyout--subnav--PaddingLeft: 0;
-  --pf-c-nav__item--m-flyout__subnav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
-  --pf-c-nav__item--m-flyout__subnav--MaxHeight: none;
-  --pf-c-nav__item--m-flyout__subnav--BoxShadow: var(--pf-global--BoxShadow--lg-left);
-  --pf-c-nav__item--m-flyout__subnav__subnav--Top: 0;
-  --pf-c-nav__item--m-flyout__subnav__link--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-nav__item--m-flyout__subnav__link--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-nav__item--m-flyout__subnav__link--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-nav__item--m-flyout__subnav__link--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-nav__item--m-flyout__subnav__link--before--BorderColor: var(--pf-global--BackgroundColor--dark-200);
-  --pf-c-nav__item--m-flyout__list--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
+  --pf-c-nav__item--m-flyout--c-menu--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-nav__item--m-flyout--c-menu--Top: calc(0px + var(--pf-c-nav__item--m-flyout--c-menu--top-offset));
+  --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: calc(var(--pf-c-nav__item--m-flyout--c-menu--Top) - var(--pf-c-nav__item--before--BorderWidth));
+  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top: 0;
+  --pf-c-nav__item--m-flyout--c-menu--Left: calc(100% - var(--pf-c-nav__item--m-flyout--c-menu--left-offset));
+  --pf-c-nav__item--m-flyout--c-menu--m-left--Right: calc(100% - var(--pf-c-nav__item--m-flyout--c-menu--m-left--right-offset));
+  --pf-c-nav__item--m-flyout--c-menu--m-top--Bottom: calc(0 + var(--pf-c-nav__item--m-flyout--c-menu--m-top--bottom-offset));
+  --pf-c-nav__item--m-flyout--c-menu--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
+  --pf-c-nav__item--m-flyout--c-menu__item--Color: var(--pf-c-nav__link--Color);
+  --pf-c-nav__item--m-flyout--c-menu__item--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav__link--hover--BackgroundColor);
+  --pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav__link--focus--BackgroundColor);
+  --pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__link--active--BackgroundColor);
+  --pf-c-nav__item--m-flyout--c-menu__item-description--Color: var(--pf-global--Color--light-200);
+  --pf-c-nav__item--m-flyout--c-menu__item--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset: var(--pf-c-nav__link--OutlineOffset);
+  --pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth: var(--pf-c-nav__item--before--BorderWidth);
+  --pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor: var(--pf-c-nav__item--before--BorderColor);
+  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
+  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: calc(-1 * var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth));
+  --pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top: 0;
   --pf-c-nav__item--m-drilldown__subnav--PaddingTop: 0;
   --pf-c-nav__item--m-drilldown__subnav--PaddingLeft: 0;
   --pf-c-nav__item--m-drilldown__subnav--PaddingBottom: 0;
@@ -468,52 +484,70 @@
   content: "";
   border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
 }
-.pf-c-nav__item.pf-m-flyout, .pf-c-nav__item.pf-m-drilldown {
-  position: static;
-}
-.pf-c-nav__item.pf-m-flyout.pf-m-expanded .pf-c-nav__subnav, .pf-c-nav__item.pf-m-drilldown.pf-m-expanded .pf-c-nav__subnav {
-  overflow: visible;
-}
-.pf-c-nav__item.pf-m-flyout {
-  --pf-c-nav__item--MarginTop: var(--pf-c-nav__item--m-flyout--MarginTop);
-}
-.pf-c-nav__item.pf-m-flyout .pf-c-nav__item:last-child > .pf-c-nav__link {
-  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout__item--last-child__link--before--BorderBottomWidth);
-}
 .pf-c-nav__item.pf-m-flyout:hover {
-  background-color: var(--pf-c-nav__item--m-flyout--hover--BackgroundColor);
+  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--hover__link--BackgroundColor);
+  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--hover__link--before--BorderWidth);
 }
 .pf-c-nav__item.pf-m-flyout:focus {
-  background-color: var(--pf-c-nav__item--m-flyout--focus--BackgroundColor);
+  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--focus__link--BackgroundColor);
+  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--focus__link--before--BorderWidth);
 }
 .pf-c-nav__item.pf-m-flyout:active {
-  background-color: var(--pf-c-nav__item--m-flyout--active--BackgroundColor);
+  --pf-c-nav__link--BackgroundColor: var(--pf-c-nav__item--m-flyout--active__link--BackgroundColor);
+  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout--active__link--before--BorderWidth);
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu {
+  --pf-c-menu--MinWidth: 100%;
+  --pf-c-menu--BoxShadow: var(--pf-c-nav__item--m-flyout--c-menu--BoxShadow);
+  --pf-c-menu--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu--BackgroundColor);
+  --pf-c-menu__list--PaddingTop: 0;
+  --pf-c-menu__list--PaddingBottom: 0;
+  --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--hover--BackgroundColor);
+  --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--focus-within--BackgroundColor);
+  --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-nav__item--m-flyout--c-menu__list-item--active--BackgroundColor);
+  --pf-c-menu__item--FontSize: var(--pf-c-nav__item--m-flyout--c-menu__item--FontSize);
+  --pf-c-menu__item--Color: var(--pf-c-nav__item--m-flyout--c-menu__item--Color);
+  --pf-c-menu__item--PaddingRight: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingRight);
+  --pf-c-menu__item--PaddingLeft: var(--pf-c-nav__item--m-flyout--c-menu__item--PaddingLeft);
+  --pf-c-menu__item-description--Color: var(--pf-c-nav__item--m-flyout--c-menu__item-description--Color);
+  position: absolute;
+  top: var(--pf-c-nav__item--m-flyout--c-menu--Top);
+  left: var(--pf-c-nav__item--m-flyout--c-menu--Left);
 }
-.pf-c-nav__item.pf-m-flyout .pf-c-nav__list {
-  width: 100%;
-  background-color: var(--pf-c-nav__item--m-flyout__list--BackgroundColor);
+.pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu {
+  top: var(--pf-c-nav__item--m-flyout--c-menu--c-menu--Top);
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-top {
+  top: auto;
+  bottom: var(--pf-c-nav__item--m-flyout--c-menu--m-top--Bottom);
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu.pf-m-left {
+  right: var(--pf-c-nav__item--m-flyout--c-menu--m-left--Right);
+  left: auto;
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__list-item:first-child {
+  --pf-c-nav__item--m-flyout--c-menu--c-menu--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child--c-menu--Top);
+  --pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top: var(--pf-c-nav__item--m-flyout--c-menu__list-item--first-child__item--hover--after--Top);
 }
-.pf-c-nav__item.pf-m-flyout .pf-c-nav__item.pf-m-flyout {
+.pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item {
   position: relative;
+  outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
 }
-.pf-c-nav__item.pf-m-flyout .pf-c-nav__subnav {
-  --pf-c-nav__link--PaddingTop: var(--pf-c-nav__item--m-flyout__subnav__link--PaddingTop);
-  --pf-c-nav__link--PaddingBottom: var(--pf-c-nav__item--m-flyout__subnav__link--PaddingBottom);
-  --pf-c-nav__subnav--PaddingBottom: var(--pf-c-nav__item--m-flyout--subnav--PaddingBottom);
-  --pf-c-nav__subnav--PaddingLeft: var(--pf-c-nav__item--m-flyout--subnav--PaddingLeft);
-  --pf-c-nav__subnav--MaxHeight: var(--pf-c-nav__item--m-flyout__subnav--MaxHeight);
-  --pf-c-nav__link--FontSize: var(--pf-c-nav__item--m-flyout__subnav__link--FontSize);
-  --pf-c-nav__link--before--BorderBottomWidth: var(--pf-c-nav__item--m-flyout__subnav__link--before--BorderBottomWidth);
-  --pf-c-nav__link--before--BorderColor: var(--pf-c-nav__item--m-flyout__subnav__link--before--BorderColor);
+.pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item::before {
   position: absolute;
-  top: var(--pf-c-nav__item--m-flyout__subnav--Top);
-  left: var(--pf-c-nav__item--m-flyout__subnav--Left);
-  min-width: 100%;
-  background-color: var(--pf-c-nav__item--m-flyout__subnav--BackgroundColor);
-  box-shadow: var(--pf-c-nav__item--m-flyout__subnav--BoxShadow);
-}
-.pf-c-nav__item.pf-m-flyout .pf-c-nav__subnav .pf-c-nav__item.pf-m-flyout .pf-c-nav__subnav {
-  --pf-c-nav__item--m-flyout__subnav--Top: var(--pf-c-nav__item--m-flyout__subnav__subnav--Top);
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border-bottom: var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomWidth) solid var(--pf-c-nav__item--m-flyout--c-menu__item--before--BorderBottomColor);
+}
+.pf-c-nav__item.pf-m-flyout .pf-c-menu .pf-c-menu__item:hover::after {
+  position: absolute;
+  top: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--Top);
+  bottom: 0;
+  left: 0;
+  content: "";
+  border-left: var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftWidth) solid var(--pf-c-nav__item--m-flyout--c-menu__item--hover--after--BorderLeftColor);
 }
 .pf-c-nav__item.pf-m-drilldown {
   --pf-c-nav__subnav--PaddingTop: var(--pf-c-nav__item--m-drilldown__subnav--PaddingTop);

package/css/components/Nav/nav.d.ts

@@ -1,6 +1,9 @@
 import './nav.css';
 declare const _default: {
   "divider": "pf-c-divider",
+  "menu": "pf-c-menu",
+  "menuItem": "pf-c-menu__item",
+  "menuListItem": "pf-c-menu__list-item",
   "modifiers": {
     "horizontal": "pf-m-horizontal",
     "tertiary": "pf-m-tertiary",
@@ -10,6 +13,8 @@ declare const _default: {
     "overflowHidden": "pf-m-overflow-hidden",
     "expandable": "pf-m-expandable",
     "flyout": "pf-m-flyout",
+    "top": "pf-m-top",
+    "left": "pf-m-left",
     "drilldown": "pf-m-drilldown",
     "expanded": "pf-m-expanded",
     "current": "pf-m-current",

package/css/components/Nav/nav.js

@@ -3,6 +3,9 @@ exports.__esModule = true;
 require('./nav.css');
 exports.default = {
   "divider": "pf-c-divider",
+  "menu": "pf-c-menu",
+  "menuItem": "pf-c-menu__item",
+  "menuListItem": "pf-c-menu__list-item",
   "modifiers": {
     "horizontal": "pf-m-horizontal",
     "tertiary": "pf-m-tertiary",
@@ -12,6 +15,8 @@ exports.default = {
     "overflowHidden": "pf-m-overflow-hidden",
     "expandable": "pf-m-expandable",
     "flyout": "pf-m-flyout",
+    "top": "pf-m-top",
+    "left": "pf-m-left",
     "drilldown": "pf-m-drilldown",
     "expanded": "pf-m-expanded",
     "current": "pf-m-current",

package/css/components/Select/select.css

@@ -261,6 +261,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  --pf-c-form-control--invalid--BackgroundUrl: none;
   position: relative;
   height: auto;
 }

package/css/components/Table/table-scrollable.css

@@ -0,0 +1,53 @@
+.pf-c-table {
+  --pf-c-table__sticky-column--cell-min-width--base: 12.5rem;
+  --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
+  --pf-c-table__sticky-column--Left: 0;
+  --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
+  --pf-c-table__sticky-column--Top: 0;
+  --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
+  --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
+}
+.pf-c-table .pf-c-table__sticky-column {
+  position: sticky;
+  left: var(--pf-c-table__sticky-column--Left);
+  z-index: var(--pf-c-table__sticky-column--ZIndex);
+  min-width: var(--pf-c-table__sticky-column--MinWidth);
+  background-color: var(--pf-c-table__sticky-column--BackgroundColor);
+  background-clip: padding-box;
+}
+.pf-c-table .pf-c-table__sticky-column.pf-m-border-right::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: "";
+  border-right: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth) solid var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
+}
+.pf-c-table.pf-m-sticky-header {
+  --pf-c-table--cell--Overflow: visible;
+}
+.pf-c-table.pf-m-sticky-header thead .pf-c-table__sticky-column {
+  z-index: var(--pf-c-table--m-sticky-header--thead__sticky-column--ZIndex);
+}
+
+.pf-c-scroll-outer-wrapper {
+  --pf-c-scroll-outer-wrapper--MinHeight: 25rem;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  min-height: var(--pf-c-scroll-outer-wrapper--MinHeight);
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.pf-c-scroll-inner-wrapper {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: auto;
+}

package/css/components/Table/table-scrollable.d.ts

@@ -0,0 +1,12 @@
+import './table-scrollable.css';
+declare const _default: {
+  "modifiers": {
+    "borderRight": "pf-m-border-right",
+    "stickyHeader": "pf-m-sticky-header"
+  },
+  "scrollInnerWrapper": "pf-c-scroll-inner-wrapper",
+  "scrollOuterWrapper": "pf-c-scroll-outer-wrapper",
+  "table": "pf-c-table",
+  "tableStickyColumn": "pf-c-table__sticky-column"
+};
+export default _default;

package/css/components/Table/table-scrollable.js

@@ -0,0 +1,13 @@
+"use strict";
+exports.__esModule = true;
+require('./table-scrollable.css');
+exports.default = {
+  "modifiers": {
+    "borderRight": "pf-m-border-right",
+    "stickyHeader": "pf-m-sticky-header"
+  },
+  "scrollInnerWrapper": "pf-c-scroll-inner-wrapper",
+  "scrollOuterWrapper": "pf-c-scroll-outer-wrapper",
+  "table": "pf-c-table",
+  "tableStickyColumn": "pf-c-table__sticky-column"
+};

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

@@ -0,0 +1,124 @@
+.pf-c-text-input-group {
+  --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
+  --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-global--BorderColor--200);
+  --pf-c-text-input-group--hover__text--after--BorderBottomColor: var(--pf-global--primary-color--100);
+  --pf-c-text-input-group__text--focus-within--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-text-input-group__text--focus-within--after--BorderBottomColor: var(--pf-global--primary-color--100);
+  --pf-c-text-input-group__main--first-child--not--text-input--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-text-input-group__text-input--PaddingTop: var(--pf-global--spacer--form-element);
+  --pf-c-text-input-group__text-input--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-text-input-group__text-input--PaddingBottom: var(--pf-global--spacer--form-element);
+  --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-text-input-group--m-icon__text-input--PaddingLeft: var(--pf-global--spacer--xl);
+  --pf-c-text-input-group__text-input--MinWidth: 12ch;
+  --pf-c-text-input-group__text-input--m-hint--Color: var(--pf-global--Color--dark-200);
+  --pf-c-text-input-group__icon--Left: var(--pf-global--spacer--sm);
+  --pf-c-text-input-group__icon--Color: var(--pf-global--Color--200);
+  --pf-c-text-input-group__text--hover__icon--Color: var(--pf-global--Color--100);
+  --pf-c-text-input-group__icon--TranslateY: -50%;
+  --pf-c-text-input-group__utilities--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-text-input-group__utilities--MarginLeft: var(--pf-global--spacer--xs);
+  --pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
+  --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
+  --pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
+  position: relative;
+  display: flex;
+}
+.pf-c-text-input-group:hover {
+  --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
+}
+.pf-c-text-input-group.pf-m-icon {
+  --pf-c-text-input-group__text-input--PaddingLeft: var(--pf-c-text-input-group--m-icon__text-input--PaddingLeft);
+}
+
+.pf-c-text-input-group__main {
+  display: flex;
+  flex: 1;
+  gap: var(--pf-global--spacer--sm);
+  min-width: 0;
+}
+.pf-c-text-input-group__main > :first-child:not(.pf-c-text-input-group__text) {
+  margin-left: var(--pf-c-text-input-group__main--first-child--not--text-input--MarginLeft);
+}
+.pf-c-text-input-group__main .pf-c-chip-group {
+  overflow: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.pf-c-text-input-group__main .pf-c-chip-group::-webkit-scrollbar {
+  display: none;
+}
+.pf-c-text-input-group__main .pf-c-chip-group,
+.pf-c-text-input-group__main .pf-c-chip-group__list {
+  flex-wrap: nowrap;
+}
+
+.pf-c-text-input-group__text {
+  display: inline-grid;
+  grid-template-columns: 1fr;
+  grid-template-areas: "text-input";
+  flex: 1;
+}
+.pf-c-text-input-group__text::before, .pf-c-text-input-group__text::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: "";
+}
+.pf-c-text-input-group__text::before {
+  border: var(--pf-c-text-input-group__text--before--BorderWidth) solid var(--pf-c-text-input-group__text--before--BorderColor);
+}
+.pf-c-text-input-group__text::after {
+  border-bottom: var(--pf-c-text-input-group__text--after--BorderBottomWidth) solid var(--pf-c-text-input-group__text--after--BorderBottomColor);
+}
+.pf-c-text-input-group__text:hover, .pf-c-text-input-group__text:focus-within {
+  --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group__text--hover__icon--Color);
+}
+.pf-c-text-input-group__text:focus-within {
+  --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-c-text-input-group__text--focus-within--after--BorderBottomWidth);
+  --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group__text--focus-within--after--BorderBottomColor);
+}
+
+.pf-c-text-input-group__icon {
+  position: absolute;
+  top: 50%;
+  left: var(--pf-c-text-input-group__icon--Left);
+  color: var(--pf-c-text-input-group__icon--Color);
+  transform: translateY(var(--pf-c-text-input-group__icon--TranslateY));
+}
+
+.pf-c-text-input-group__text-input {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+  width: 100%;
+  min-width: var(--pf-c-text-input-group__text-input--MinWidth);
+  padding: var(--pf-c-text-input-group__text-input--PaddingTop) var(--pf-c-text-input-group__text-input--PaddingRight) var(--pf-c-text-input-group__text-input--PaddingBottom) var(--pf-c-text-input-group__text-input--PaddingLeft);
+  border: 0;
+}
+.pf-c-text-input-group__text-input, .pf-c-text-input-group__text-input.pf-m-hint {
+  grid-area: text-input;
+}
+.pf-c-text-input-group__text-input.pf-m-hint {
+  color: var(--pf-c-text-input-group__text-input--m-hint--Color);
+}
+
+.pf-c-text-input-group__utilities {
+  display: flex;
+  align-items: center;
+  margin-right: var(--pf-c-text-input-group__utilities--MarginRight);
+  margin-left: var(--pf-c-text-input-group__utilities--MarginLeft);
+}
+.pf-c-text-input-group__utilities > * + * {
+  margin-left: var(--pf-c-text-input-group__utilities--child--MarginLeft);
+}
+.pf-c-text-input-group__utilities .pf-c-button {
+  --pf-c-button--PaddingRight: var(--pf-c-text-input-group__utilities--c-button--PaddingRight);
+  --pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
+}

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

@@ -0,0 +1,17 @@
+import './text-input-group.css';
+declare const _default: {
+  "button": "pf-c-button",
+  "chipGroup": "pf-c-chip-group",
+  "chipGroupList": "pf-c-chip-group__list",
+  "modifiers": {
+    "icon": "pf-m-icon",
+    "hint": "pf-m-hint"
+  },
+  "textInputGroup": "pf-c-text-input-group",
+  "textInputGroupIcon": "pf-c-text-input-group__icon",
+  "textInputGroupMain": "pf-c-text-input-group__main",
+  "textInputGroupText": "pf-c-text-input-group__text",
+  "textInputGroupTextInput": "pf-c-text-input-group__text-input",
+  "textInputGroupUtilities": "pf-c-text-input-group__utilities"
+};
+export default _default;

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

@@ -0,0 +1,18 @@
+"use strict";
+exports.__esModule = true;
+require('./text-input-group.css');
+exports.default = {
+  "button": "pf-c-button",
+  "chipGroup": "pf-c-chip-group",
+  "chipGroupList": "pf-c-chip-group__list",
+  "modifiers": {
+    "icon": "pf-m-icon",
+    "hint": "pf-m-hint"
+  },
+  "textInputGroup": "pf-c-text-input-group",
+  "textInputGroupIcon": "pf-c-text-input-group__icon",
+  "textInputGroupMain": "pf-c-text-input-group__main",
+  "textInputGroupText": "pf-c-text-input-group__text",
+  "textInputGroupTextInput": "pf-c-text-input-group__text-input",
+  "textInputGroupUtilities": "pf-c-text-input-group__utilities"
+};

package/css/docs/components/Nav/examples/Navigation.css

@@ -5,16 +5,14 @@
 #ws-core-c-navigation-expanded,
 #ws-core-c-navigation-expanded-with-subnav-titles,
 #ws-core-c-navigation-mixed,
-#ws-core-c-navigation-flyout,
-#ws-core-c-navigation-grouped-flyout-with-title,
+#ws-core-c-navigation-flyout-with-menu-component,
 #ws-core-c-navigation-horizontal,
 #ws-core-c-navigation-horizontal-overflow,
 #ws-core-c-navigation-horizontal-subnav,
 #ws-core-c-navigation-horizontal-subnav-overflow,
 #ws-core-c-navigation-drilldown,
 #ws-core-c-navigation-level-2-drilldown,
-#ws-core-c-navigation-level-3-drilldown,
-#ws-core-c-navigation-level-3-with-flyout {
+#ws-core-c-navigation-level-3-drilldown {
   padding: 0;
   background-color: var(--pf-global--BackgroundColor--dark-300);
 }
@@ -42,11 +40,9 @@
   grid-row: 1;
 }
 
-#ws-core-c-navigation-flyout,
-#ws-core-c-navigation-grouped-flyout-with-title,
+#ws-core-c-navigation-flyout-with-menu-component,
 #ws-core-c-navigation-drilldown,
 #ws-core-c-navigation-level-2-drilldown,
-#ws-core-c-navigation-level-3-drilldown,
-#ws-core-c-navigation-level-3-with-flyout {
+#ws-core-c-navigation-level-3-drilldown {
   width: 260px;
 }

package/css/docs/components/Table/examples/Table.css

@@ -8,3 +8,7 @@
   left: 440px;
   top: -18px;
 }
+
+#ws-core-c-table-sticky-columns-and-header .ws-preview-html {
+  height: 600px;
+}

package/css/docs/components/Table/examples/Table.d.ts

@@ -1,5 +1,6 @@
 import './Table.css';
 declare const _default: {
-  "tooltip": "pf-c-tooltip"
+  "tooltip": "pf-c-tooltip",
+  "wsPreviewHtml": "ws-preview-html"
 };
 export default _default;

package/css/docs/components/Table/examples/Table.js

@@ -2,5 +2,6 @@
 exports.__esModule = true;
 require('./Table.css');
 exports.default = {
-  "tooltip": "pf-c-tooltip"
+  "tooltip": "pf-c-tooltip",
+  "wsPreviewHtml": "ws-preview-html"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "4.12.1",
+  "version": "4.12.5",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.139.2",
+    "@patternfly/patternfly": "4.144.5",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
@@ -29,5 +29,5 @@
     "typescript": "^4.0.0"
   },
   "license": "MIT",
-  "gitHead": "0e8749fe9df1fa35cc8f94e9a7c87c5f45eb3da2"
+  "gitHead": "22b55059379d09343e494079fe32bcecf7a75fc2"
 }