@patternfly/patternfly 5.0.0-alpha.57 → 5.0.0-alpha.59

package/components/Tabs/tabs.css

@@ -837,5 +837,6 @@
 :where(.pf-v5-theme-dark) .pf-v5-c-tabs {
   --pf-v5-c-tabs__scroll-button--BackgroundColor: transparent;
   --pf-v5-c-tabs__link--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+  --pf-v5-c-tabs__link--disabled--Color: var(--pf-v5-global--disabled-color--300);
   --pf-v5-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
 }

package/components/Tabs/themes/dark/tabs.scss

@@ -4,6 +4,7 @@
   .#{$tabs} {
     --#{$tabs}__scroll-button--BackgroundColor: transparent;
     --#{$tabs}__link--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
+    --#{$tabs}__link--disabled--Color: var(--#{$pf-global}--disabled-color--300);
     --#{$tabs}--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
   }
 }

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

@@ -146,4 +146,12 @@
 
 .pf-v5-c-text-input-group__group {
   display: flex;
+}
+
+:where(.pf-v5-theme-dark) .pf-v5-c-text-input-group {
+  --pf-v5-c-text-input-group--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
+  --pf-v5-c-text-input-group--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
+  --pf-v5-c-text-input-group--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+  --pf-v5-c-text-input-group__text--before--BorderWidth: 0;
+  --pf-v5-c-text-input-group__text--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
 }

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

@@ -188,3 +188,10 @@
 .#{$text-input-group}__group {
   display: flex;
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/text-input-group";
+
+@include pf-v5-theme-dark {
+  @include pf-v5-theme-dark-text-input-group;
+}

package/components/TextInputGroup/themes/dark/text-input-group.scss

@@ -0,0 +1,11 @@
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-v5-theme-dark-text-input-group() {
+  .#{$text-input-group} {
+    --#{$text-input-group}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
+    --#{$text-input-group}--m-disabled--Color: var(--#{$pf-global}--disabled-color--300);
+    --#{$text-input-group}--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
+    --#{$text-input-group}__text--before--BorderWidth: 0;
+    --#{$text-input-group}__text--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--400);
+  }
+}

package/components/ToggleGroup/themes/dark/toggle-group.scss

@@ -7,5 +7,6 @@
     --#{$toggle-group}__button--disabled--BackgroundColor: var(--#{$pf-global}--palette--black-600);
     --#{$toggle-group}__button--disabled--Color: var(--#{$pf-global}--palette--black-100);
     --#{$toggle-group}__button--m-selected--BackgroundColor: var(--#{$pf-global}--primary-color--300);
+    --#{$toggle-group}__button--m-selected--Color: var(--#{$pf-global}--primary-color--400);
   }
 }

package/components/ToggleGroup/toggle-group.css

@@ -25,6 +25,7 @@
   --pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-v5-global--BorderRadius--sm);
   --pf-v5-c-toggle-group__icon--text--MarginLeft: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--palette--blue-50);
+  --pf-v5-c-toggle-group__button--m-selected--Color: initial;
   --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-v5-global--primary-color--100);
   --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-v5-global--ZIndex--xs);
   --pf-v5-c-toggle-group--m-compact__button--PaddingTop: 0;
@@ -88,6 +89,7 @@
 }
 .pf-v5-c-toggle-group__button.pf-m-selected {
   --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--m-selected--BackgroundColor);
+  --pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--m-selected--Color, inherit);
   --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--m-selected--ZIndex);
   --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--m-selected--before--BorderColor);
 }
@@ -108,4 +110,5 @@
   --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--palette--black-600);
   --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-v5-global--palette--black-100);
   --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--primary-color--300);
+  --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-v5-global--primary-color--400);
 }

package/components/ToggleGroup/toggle-group.scss

@@ -34,6 +34,7 @@
 
   // Selected
   --#{$toggle-group}__button--m-selected--BackgroundColor: var(--#{$pf-global}--palette--blue-50);
+  --#{$toggle-group}__button--m-selected--Color: initial;
   --#{$toggle-group}__button--m-selected--before--BorderColor: var(--#{$pf-global}--primary-color--100);
   --#{$toggle-group}__button--m-selected--ZIndex: var(--#{$pf-global}--ZIndex--xs);
 
@@ -119,6 +120,7 @@
 
   &.pf-m-selected {
     --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--m-selected--BackgroundColor);
+    --#{$toggle-group}__button--Color: var(--#{$toggle-group}__button--m-selected--Color, inherit);
     --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--m-selected--ZIndex);
     --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--m-selected--before--BorderColor);
   }

package/components/Wizard/themes/dark/wizard.scss

@@ -4,8 +4,6 @@
   .#{$wizard} {
     --#{$wizard}__header--BackgroundColor: var(--#{$pf-global}--palette--black-1000);
     --#{$wizard}__nav-link--before--BackgroundColor: var(--#{$pf-global}--palette--black-500);
-    --#{$wizard}__nav-link--m-disabled--Color: var(--#{$pf-global}--disabled-color--300);
-    --#{$wizard}__nav-link--m-disabled--before--Color: var(--#{$pf-global}--disabled-color--300);
   }
 
   .#{$wizard}__header {

package/components/Wizard/wizard.css

@@ -39,7 +39,7 @@
   --pf-v5-c-wizard__nav-link--focus--Color: var(--pf-v5-global--link--Color);
   --pf-v5-c-wizard__nav-link--m-current--Color: var(--pf-v5-global--link--Color);
   --pf-v5-c-wizard__nav-link--m-current--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-wizard__nav-link--m-disabled--Color: var(--pf-v5-global--Color--dark-200);
+  --pf-v5-c-wizard__nav-link--m-disabled--Color: var(--pf-v5-global--disabled-color--100);
   --pf-v5-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-wizard__nav-link-toggle--PaddingRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-wizard__nav-link-toggle--PaddingLeft: var(--pf-v5-global--spacer--sm);
@@ -60,7 +60,7 @@
   --pf-v5-c-wizard__nav-link--m-current--before--BackgroundColor: var(--pf-v5-global--active-color--100);
   --pf-v5-c-wizard__nav-link--m-current--before--Color: var(--pf-v5-global--Color--light-100);
   --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__nav-link--m-disabled--before--Color: var(--pf-v5-global--disabled-color--100);
   --pf-v5-c-wizard__toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --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);
@@ -510,8 +510,6 @@
 :where(.pf-v5-theme-dark) .pf-v5-c-wizard {
   --pf-v5-c-wizard__header--BackgroundColor: var(--pf-v5-global--palette--black-1000);
   --pf-v5-c-wizard__nav-link--before--BackgroundColor: var(--pf-v5-global--palette--black-500);
-  --pf-v5-c-wizard__nav-link--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-wizard__nav-link--m-disabled--before--Color: var(--pf-v5-global--disabled-color--300);
 }
 :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
   color: var(--pf-v5-global--Color--100);

package/components/Wizard/wizard.scss

@@ -57,7 +57,7 @@
   --#{$wizard}__nav-link--focus--Color: var(--#{$pf-global}--link--Color);
   --#{$wizard}__nav-link--m-current--Color: var(--#{$pf-global}--link--Color);
   --#{$wizard}__nav-link--m-current--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
-  --#{$wizard}__nav-link--m-disabled--Color: var(--#{$pf-global}--Color--dark-200);
+  --#{$wizard}__nav-link--m-disabled--Color: var(--#{$pf-global}--disabled-color--100);
   --#{$wizard}__nav-list__nav-list__nav-link--m-current--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
 
   // Nav link toggle icon
@@ -82,7 +82,7 @@
   --#{$wizard}__nav-link--m-current--before--BackgroundColor: var(--#{$pf-global}--active-color--100);
   --#{$wizard}__nav-link--m-current--before--Color: var(--#{$pf-global}--Color--light-100);
   --#{$wizard}__nav-link--m-disabled--before--BackgroundColor: transparent;
-  --#{$wizard}__nav-link--m-disabled--before--Color: var(--#{$pf-global}--Color--dark-200);
+  --#{$wizard}__nav-link--m-disabled--before--Color: var(--#{$pf-global}--disabled-color--100);
 
   // Toggle
   --#{$wizard}__toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);

package/docs/components/DualListSelector/examples/DualListSelector.md

@@ -680,7 +680,7 @@ cssPrefix: pf-v5-c-dual-list-selector
       <span
         class="pf-v5-c-dual-list-selector__status-text"
         id="multiple-available-items-selected-available-status-text"
-      >1 of 5 items selected</span>
+      >3 of 5 items selected</span>
     </div>
     <div class="pf-v5-c-dual-list-selector__menu">
       <ul

package/docs/components/Slider/examples/Slider.md

@@ -290,7 +290,7 @@ cssPrefix: pf-v5-c-slider
           <input type="number" value="50" aria-label="Slider value input" />
         </div>
       </div>
-      <div class="pf-v5-c-input-group__item">
+      <div class="pf-v5-c-input-group__item pf-m-box">
         <span class="pf-v5-c-input-group__text">%</span>
       </div>
     </div>
@@ -321,7 +321,7 @@ cssPrefix: pf-v5-c-slider
           <input type="number" value="50" aria-label="Slider value input" />
         </div>
       </div>
-      <div class="pf-v5-c-input-group__item">
+      <div class="pf-v5-c-input-group__item pf-m-box">
         <span class="pf-v5-c-input-group__text">%</span>
       </div>
     </div>
@@ -348,13 +348,15 @@ cssPrefix: pf-v5-c-slider
       tabindex="0"
     ></div>
     <div class="pf-v5-c-slider__value pf-m-floating">
-      <div class="pf-v5-c-input-group__item pf-m-fill">
-        <div class="pf-v5-c-form-control">
-          <input type="number" value="50" aria-label="Slider value input" />
+      <div class="pf-v5-c-input-group">
+        <div class="pf-v5-c-input-group__item pf-m-fill">
+          <div class="pf-v5-c-form-control">
+            <input type="number" value="50" aria-label="Slider value input" />
+          </div>
+        </div>
+        <div class="pf-v5-c-input-group__item pf-m-box">
+          <span class="pf-v5-c-input-group__text">%</span>
         </div>
-      </div>
-      <div class="pf-v5-c-input-group__item">
-        <span class="pf-v5-c-input-group__text">%</span>
       </div>
     </div>
   </div>
@@ -421,8 +423,8 @@ cssPrefix: pf-v5-c-slider
             />
           </div>
         </div>
-        <div class="pf-v5-c-input-group__item">
-          <span class="pf-v5-c-input-group__text pf-m-disabled">%</span>
+        <div class="pf-v5-c-input-group__item pf-m-box pf-m-disabled">
+          <span class="pf-v5-c-input-group__text">%</span>
         </div>
       </div>
     </div>
@@ -458,7 +460,7 @@ cssPrefix: pf-v5-c-slider
             <input type="number" value="50" aria-label="Slider value input" />
           </div>
         </div>
-        <div class="pf-v5-c-input-group__item">
+        <div class="pf-v5-c-input-group__item pf-m-box">
           <span class="pf-v5-c-input-group__text">%</span>
         </div>
       </div>
@@ -622,8 +624,8 @@ cssPrefix: pf-v5-c-slider
           />
         </div>
       </div>
-      <div class="pf-v5-c-input-group__item">
-        <span class="pf-v5-c-input-group__text pf-m-disabled">%</span>
+      <div class="pf-v5-c-input-group__item pf-m-box pf-m-disabled">
+        <span class="pf-v5-c-input-group__text">%</span>
       </div>
     </div>
   </div>

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

@@ -8,3 +8,7 @@
   top: 40px;
   width: 100%;
 }
+
+#ws-core-c-text-input-group-search-input-group-advanced-search-expanded-with-autocomplete {
+  height: 540px;
+}

package/layouts/Level/level.css

@@ -1,10 +1,10 @@
 .pf-v5-l-level {
-  --pf-v5-l-level--m-gutter--MarginRight: var(--pf-v5-global--gutter);
+  --pf-v5-l-level--m-gutter--Gap: var(--pf-v5-global--gutter);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
 }
-.pf-v5-l-level.pf-m-gutter > *:not(:last-child) {
-  margin-right: var(--pf-v5-l-level--m-gutter--MarginRight);
+.pf-v5-l-level.pf-m-gutter {
+  gap: var(--pf-v5-l-level--m-gutter--Gap);
 }

package/layouts/Level/level.scss

@@ -1,12 +1,12 @@
 .#{$level} {
-  --#{$level}--m-gutter--MarginRight: var(--#{$pf-global}--gutter);
+  --#{$level}--m-gutter--Gap: var(--#{$pf-global}--gutter);
 
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
 
-  &.pf-m-gutter > *:not(:last-child) {
-    margin-right: var(--#{$level}--m-gutter--MarginRight);
+  &.pf-m-gutter {
+    gap: var(--#{$level}--m-gutter--Gap);
   }
 }

package/layouts/Split/split.css

@@ -1,5 +1,5 @@
 .pf-v5-l-split {
-  --pf-v5-l-stack--m-gutter--MarginRight: var(--pf-v5-global--gutter);
+  --pf-v5-l-stack--m-gutter--Gap: var(--pf-v5-global--gutter);
   display: flex;
   padding: 0;
   margin: 0;
@@ -12,6 +12,6 @@
   flex-grow: 1;
 }
 
-.pf-v5-l-split.pf-m-gutter > *:not(:last-child) {
-  margin-right: var(--pf-v5-l-stack--m-gutter--MarginRight);
+.pf-v5-l-split.pf-m-gutter {
+  gap: var(--pf-v5-l-stack--m-gutter--Gap);
 }

package/layouts/Split/split.scss

@@ -1,5 +1,5 @@
 .#{$split} {
-  --#{$stack}--m-gutter--MarginRight: var(--#{$pf-global}--gutter);
+  --#{$stack}--m-gutter--Gap: var(--#{$pf-global}--gutter);
 
   display: flex;
   padding: 0;
@@ -14,6 +14,6 @@
   flex-grow: 1;
 }
 
-.#{$split}.pf-m-gutter > *:not(:last-child) {
-  margin-right: var(--#{$stack}--m-gutter--MarginRight);
+.#{$split}.pf-m-gutter {
+  gap: var(--#{$stack}--m-gutter--Gap);
 }

package/layouts/Stack/stack.css

@@ -1,5 +1,5 @@
 .pf-v5-l-stack {
-  --pf-v5-l-stack--m-gutter--MarginBottom: var(--pf-v5-global--gutter);
+  --pf-v5-l-stack--m-gutter--Gap: var(--pf-v5-global--gutter);
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -9,6 +9,6 @@
   flex-grow: 1;
 }
 
-.pf-v5-l-stack.pf-m-gutter > *:not(:last-child) {
-  margin-bottom: var(--pf-v5-l-stack--m-gutter--MarginBottom);
+.pf-v5-l-stack.pf-m-gutter {
+  gap: var(--pf-v5-l-stack--m-gutter--Gap);
 }

package/layouts/Stack/stack.scss

@@ -1,5 +1,5 @@
 .#{$stack} {
-  --#{$stack}--m-gutter--MarginBottom: var(--#{$pf-global}--gutter);
+  --#{$stack}--m-gutter--Gap: var(--#{$pf-global}--gutter);
 
   display: flex;
   flex-direction: column;
@@ -10,6 +10,6 @@
   flex-grow: 1;
 }
 
-.#{$stack}.pf-m-gutter > *:not(:last-child) {
-  margin-bottom: var(--#{$stack}--m-gutter--MarginBottom);
+.#{$stack}.pf-m-gutter {
+  gap: var(--#{$stack}--m-gutter--Gap);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.0.0-alpha.57",
+  "version": "5.0.0-alpha.59",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -45,7 +45,7 @@
     "@patternfly/documentation-framework": "2.0.0-alpha.41",
     "@patternfly/patternfly-a11y": "4.3.1",
     "@patternfly/react-code-editor": "5.0.0-alpha.105",
-    "@patternfly/react-core": "5.0.0-alpha.102",
+    "@patternfly/react-core": "5.0.0-alpha.104",
     "@patternfly/react-table": "5.0.0-alpha.106",
     "@starptech/prettyhtml": "^0.10.0",
     "cheerio": "^1.0.0-rc.12",

package/patternfly-base-no-globals.css

@@ -284,6 +284,8 @@
   --pf-v5-global--active-color--100: #1fa7f8;
   --pf-v5-global--primary-color--100: #1fa7f8;
   --pf-v5-global--primary-color--300: #06c;
+  --pf-v5-global--primary-color--400: #fff;
+  --pf-v5-global--custom-color--200: #73c5c5;
   --pf-v5-global--success-color--100: #5ba352;
   --pf-v5-global--warning-color--100: #f0ab00;
   --pf-v5-global--warning-color--200: #f4c145;
@@ -292,7 +294,7 @@
   --pf-v5-global--link--Color: #1fa7f8;
   --pf-v5-global--link--Color--hover: #73bcf7;
   --pf-v5-global--link--Color--visited: #a18fff;
-  --pf-v5-global--disabled-color--100: #57585a;
+  --pf-v5-global--disabled-color--100: #868789;
   --pf-v5-global--disabled-color--200: #444548;
   --pf-v5-global--disabled-color--300: #aaabac;
   --pf-v5-global--icon--Color--light: #aaabac;

package/patternfly-base.css

@@ -284,6 +284,8 @@
   --pf-v5-global--active-color--100: #1fa7f8;
   --pf-v5-global--primary-color--100: #1fa7f8;
   --pf-v5-global--primary-color--300: #06c;
+  --pf-v5-global--primary-color--400: #fff;
+  --pf-v5-global--custom-color--200: #73c5c5;
   --pf-v5-global--success-color--100: #5ba352;
   --pf-v5-global--warning-color--100: #f0ab00;
   --pf-v5-global--warning-color--200: #f4c145;
@@ -292,7 +294,7 @@
   --pf-v5-global--link--Color: #1fa7f8;
   --pf-v5-global--link--Color--hover: #73bcf7;
   --pf-v5-global--link--Color--visited: #a18fff;
-  --pf-v5-global--disabled-color--100: #57585a;
+  --pf-v5-global--disabled-color--100: #868789;
   --pf-v5-global--disabled-color--200: #444548;
   --pf-v5-global--disabled-color--300: #aaabac;
   --pf-v5-global--icon--Color--light: #aaabac;