@patternfly/patternfly 6.0.0-alpha.85 → 6.0.0-alpha.87

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

@@ -24,7 +24,6 @@
   --pf-v5-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
   --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
-  --pf-v5-c-dual-list-selector__list-item-row--BorderRadius: var(--pf-t--global--border--radius--tiny);
   --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
   --pf-v5-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --pf-v5-c-dual-list-selector__list-item--m-ghost-row--Opacity: .4;
@@ -38,7 +37,7 @@
   --pf-v5-c-dual-list-selector__draggable--item--PaddingLeft: var(--pf-t--global--spacer--xs);
   --pf-v5-c-dual-list-selector__item-text--Color: var(--pf-t--global--text--color--subtle);
   --pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color: var(--pf-t--global--text--color--regular);
-  --pf-v5-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-t--global--background--color--disabled--default);
+  --pf-v5-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-t--global--text--color--disabled);
   --pf-v5-c-dual-list-selector__status--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-dual-list-selector__status-text--FontSize: var(--pf-t--global--font--size--sm);
   --pf-v5-c-dual-list-selector__status-text--Color: var(--pf-t--global--text--color--subtle);
@@ -55,7 +54,7 @@
   --pf-v5-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
   --pf-v5-c-dual-list-selector__item-toggle-icon--Transition: var(--pf-v5-global--Transition);
   --pf-v5-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v5-c-dual-list-selector__list-item-row--FontSize);
-  --pf-v5-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--background--color--disabled--default);
+  --pf-v5-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
 }
 
 .pf-v5-c-dual-list-selector {
@@ -165,10 +164,6 @@
   display: flex;
   font-size: var(--pf-v5-c-dual-list-selector__list-item-row--FontSize);
   background-color: var(--pf-v5-c-dual-list-selector__list-item-row--BackgroundColor);
-  border-radius: var(--pf-v5-c-dual-list-selector__list-item-row--BorderRadius);
-}
-.pf-v5-c-dual-list-selector__list-item-row:hover {
-  --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor);
 }
 .pf-v5-c-dual-list-selector__list-item-row.pf-m-selected {
   --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor);
@@ -177,7 +172,7 @@
   --pf-v5-c-dual-list-selector__item-text--Color: var(--pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color);
   font-weight: var(--pf-v5-c-dual-list-selector__list-item-row--m-selected__text--FontWeight);
 }
-.pf-v5-c-dual-list-selector__list-item-row.pf-m-selected:hover {
+.pf-v5-c-dual-list-selector__list-item-row:hover {
   --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor);
 }
 .pf-v5-c-dual-list-selector__list-item-row.pf-m-check {

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

@@ -38,7 +38,6 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
   --#{$dual-list-selector}__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
   --#{$dual-list-selector}__list-item-row--BackgroundColor:  var(--pf-t--global--background--color--action--plain--default);
   --#{$dual-list-selector}__list-item-row--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
-  --#{$dual-list-selector}__list-item-row--BorderRadius: var(--pf-t--global--border--radius--tiny);
   --#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
   --#{$dual-list-selector}__list-item--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --#{$dual-list-selector}__list-item--m-ghost-row--Opacity: .4;
@@ -56,7 +55,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
   // Item text
   --#{$dual-list-selector}__item-text--Color: var(--pf-t--global--text--color--subtle);
   --#{$dual-list-selector}__list-item-row--m-selected__text--Color: var(--pf-t--global--text--color--regular);
-  --#{$dual-list-selector}__list-item--m-disabled__item-text--Color: var(--pf-t--global--background--color--disabled--default); // token?
+  --#{$dual-list-selector}__list-item--m-disabled__item-text--Color: var(--pf-t--global--text--color--disabled);
 
   // Status
   --#{$dual-list-selector}__status--MarginBottom: var(--pf-t--global--spacer--sm);
@@ -85,7 +84,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
   --#{$dual-list-selector}__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
   --#{$dual-list-selector}__item-toggle-icon--Transition: var(--#{$pf-global}--Transition); // need token
   --#{$dual-list-selector}__item-toggle-icon--MinWidth: var(--#{$dual-list-selector}__list-item-row--FontSize);
-  --#{$dual-list-selector}__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--background--color--disabled--default);
+  --#{$dual-list-selector}__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
 }
 
 .#{$dual-list-selector} {
@@ -215,11 +214,6 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
   display: flex;
   font-size: var(--#{$dual-list-selector}__list-item-row--FontSize);
   background-color: var(--#{$dual-list-selector}__list-item-row--BackgroundColor);
-  border-radius: var(--#{$dual-list-selector}__list-item-row--BorderRadius);
-
-  &:hover {
-    --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--hover--BackgroundColor);
-  }
 
   &.pf-m-selected {
     --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor);
@@ -229,10 +223,10 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
 
       font-weight: var(--#{$dual-list-selector}__list-item-row--m-selected__text--FontWeight);
     }
+  }
 
-    &:hover {
-      --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--hover--BackgroundColor);
-    }
+  &:hover {
+    --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--hover--BackgroundColor);
   }
 
   &.pf-m-check {

package/components/Login/login.css

@@ -40,6 +40,7 @@
   --pf-v5-c-login__main-footer-links--PaddingBottom: var(--pf-t--global--spacer--xl);
   --pf-v5-c-login__main-footer-links--PaddingLeft: var(--pf-t--global--spacer--3xl);
   --pf-v5-c-login__main-footer-links--Gap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-login__main-footer-links-item--c-button--FontSize: var(--pf-t--global--icon--size--xl);
   --pf-v5-c-login__main-footer-band--PaddingTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-login__main-footer-band--PaddingRight: var(--pf-t--global--spacer--md);
   --pf-v5-c-login__main-footer-band--PaddingBottom: var(--pf-t--global--spacer--lg);
@@ -226,6 +227,10 @@
   padding-inline-end: var(--pf-v5-c-login__main-footer-links--PaddingRight);
 }
 
+.pf-v5-c-login__main-footer-links-item .pf-v5-c-button {
+  --pf-v5-c-button--FontSize: var(--pf-v5-c-login__main-footer-links-item--c-button--FontSize);
+}
+
 .pf-v5-c-login__main-footer-band {
   padding-block-start: var(--pf-v5-c-login__main-footer-band--PaddingTop);
   padding-block-end: var(--pf-v5-c-login__main-footer-band--PaddingBottom);

package/components/Login/login.scss

@@ -87,6 +87,7 @@
   --#{$login}__main-footer-links--PaddingBottom: var(--pf-t--global--spacer--xl);
   --#{$login}__main-footer-links--PaddingLeft: var(--pf-t--global--spacer--3xl);
   --#{$login}__main-footer-links--Gap: var(--pf-t--global--spacer--md);
+  --#{$login}__main-footer-links-item--c-button--FontSize: var(--pf-t--global--icon--size--xl);
   --#{$login}__main-footer-band--PaddingTop: var(--pf-t--global--spacer--lg);
   --#{$login}__main-footer-band--PaddingRight: var(--pf-t--global--spacer--md);
   --#{$login}__main-footer-band--PaddingBottom: var(--pf-t--global--spacer--lg);
@@ -246,6 +247,12 @@
   padding-inline-end: var(--#{$login}__main-footer-links--PaddingRight);
 }
 
+.#{$login}__main-footer-links-item {
+  .#{$button}{
+    --#{$button}--FontSize: var(--#{$login}__main-footer-links-item--c-button--FontSize);
+  }
+}
+
 .#{$login}__main-footer-band {
   padding-block-start: var(--#{$login}__main-footer-band--PaddingTop);
   padding-block-end: var(--#{$login}__main-footer-band--PaddingBottom);

package/components/MenuToggle/menu-toggle.css

@@ -73,8 +73,6 @@
   --pf-v5-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
   --pf-v5-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
   --pf-v5-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
-  --pf-v5-c-menu-toggle__icon--MarginRight: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-menu-toggle__count--MarginLeft: var(--pf-t--global--spacer--sm);
   --pf-v5-c-menu-toggle__controls--MinWidth: calc(var(--pf-v5-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
   --pf-v5-c-menu-toggle--m-full-height--PaddingRight: var(--pf-t--global--spacer--lg);
   --pf-v5-c-menu-toggle--m-full-height--PaddingLeft: var(--pf-t--global--spacer--lg);
@@ -102,9 +100,8 @@
   --pf-v5-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v5-c-menu-toggle--m-plain--active--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --pf-v5-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
-  --pf-v5-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
-  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
+  --pf-v5-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
   --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
   --pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
 }
@@ -112,6 +109,7 @@
 .pf-v5-c-menu-toggle {
   position: relative;
   display: inline-flex;
+  column-gap: var(--pf-v5-c-menu-toggle--ColumnGap);
   align-items: center;
   justify-content: center;
   min-width: var(--pf-v5-c-menu-toggle--MinWidth);
@@ -196,22 +194,12 @@
   --pf-v5-c-menu-toggle--active--BackgroundColor: var(--pf-v5-c-menu-toggle--m-plain--active--BackgroundColor);
   --pf-v5-c-menu-toggle--expanded--BackgroundColor: var(--pf-v5-c-menu-toggle--m-plain--expanded--BackgroundColor);
   --pf-v5-c-menu-toggle--disabled--Color: var(--pf-v5-c-menu-toggle--m-plain--disabled--Color);
+  --pf-v5-c-menu-toggle--disabled--BackgroundColor: var(--pf-v5-c-menu-toggle--m-plain--disabled--BackgroundColor);
   mix-blend-mode: var(--pf-v5-c-menu-toggle--m-plain--MixBlendMode);
 }
 .pf-v5-c-menu-toggle.pf-m-plain::before {
   border: none;
 }
-.pf-v5-c-menu-toggle:has(.pf-v5-c-button:only-child) {
-  padding: revert;
-}
-.pf-v5-c-menu-toggle:is(button),
-.pf-v5-c-menu-toggle .pf-v5-c-button {
-  background-color: var(--pf-v5-c-menu-toggle--BackgroundColor);
-}
-.pf-v5-c-menu-toggle:is(button):has(> i:only-child),
-.pf-v5-c-menu-toggle .pf-v5-c-button:has(> i:only-child) {
-  aspect-ratio: 1/1;
-}
 .pf-v5-c-menu-toggle:is(:hover, :focus) {
   --pf-v5-c-menu-toggle--Color: var(--pf-v5-c-menu-toggle--hover--Color);
   --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--hover--BackgroundColor);
@@ -249,6 +237,7 @@
 }
 
 .pf-v5-c-menu-toggle.pf-m-split-button {
+  --pf-v5-c-menu-toggle--ColumnGap: 0;
   padding: 0;
 }
 .pf-v5-c-menu-toggle.pf-m-split-button > * {
@@ -282,7 +271,6 @@
 }
 
 .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action {
-  --pf-v5-c-menu-toggle--ColumnGap: 0;
   --pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-v5-c-menu-toggle--BorderColor);
 }
 .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action > :not(:first-child) {
@@ -323,6 +311,7 @@
 
 .pf-v5-c-menu-toggle.pf-m-typeahead {
   --pf-v5-c-menu-toggle__button--AlignSelf: var(--pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf);
+  --pf-v5-c-menu-toggle--ColumnGap: 0;
   align-items: stretch;
   padding: 0;
 }
@@ -330,7 +319,6 @@
   --pf-v5-c-menu-toggle__button--PaddingRight: 0;
 }
 .pf-v5-c-menu-toggle.pf-m-typeahead .pf-v5-c-menu-toggle__controls {
-  --pf-v5-c-menu-toggle--ColumnGap: 0;
   --pf-v5-c-menu-toggle__button--PaddingRight: 0;
   display: flex;
   align-items: stretch;
@@ -357,8 +345,6 @@
 .pf-v5-c-menu-toggle__icon {
   flex-shrink: 0;
   align-self: center;
-  margin-inline-end: var(--pf-v5-c-menu-toggle__icon--MarginRight);
-  line-height: 1;
 }
 
 .pf-v5-c-menu-toggle__text {
@@ -371,7 +357,6 @@
 .pf-v5-c-menu-toggle__count {
   display: flex;
   flex-wrap: nowrap;
-  margin-inline-start: var(--pf-v5-c-menu-toggle__count--MarginLeft);
 }
 
 .pf-v5-c-menu-toggle__controls {
@@ -379,7 +364,6 @@
   align-items: center;
   justify-content: center;
   min-width: var(--pf-v5-c-menu-toggle__controls--MinWidth);
-  margin-inline-start: var(--pf-v5-c-menu-toggle--ColumnGap);
 }
 
 .pf-v5-c-menu-toggle__toggle-icon {

package/components/MenuToggle/menu-toggle.scss

@@ -105,12 +105,6 @@
   --#{$menu-toggle}--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
   --#{$menu-toggle}--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
 
-  // Icon
-  --#{$menu-toggle}__icon--MarginRight: var(--pf-t--global--spacer--sm);
-
-  // Count
-  --#{$menu-toggle}__count--MarginLeft: var(--pf-t--global--spacer--sm);
-
   // Controls
   --#{$menu-toggle}__controls--MinWidth: calc(var(--#{$menu-toggle}--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
 
@@ -153,11 +147,10 @@
   --#{$menu-toggle}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --#{$menu-toggle}--m-plain--active--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --#{$menu-toggle}--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
-  --#{$menu-toggle}--m-plain--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
+  --#{$menu-toggle}--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled); // picking icon color rather than text...?
+  --#{$menu-toggle}--m-plain--disabled--BackgroundColor: transparent; // picking icon color rather than text...?
 
   // Typeahead
-  --#{$menu-toggle}--m-typeahead__controls--MarginRight: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}--m-typeahead__controls--MarginLeft: var(--pf-t--global--spacer--sm);
   --#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
   --#{$menu-toggle}--m-typeahead__button--AlignSelf: stretch;
 }
@@ -165,6 +158,7 @@
 .#{$menu-toggle} {
   position: relative;
   display: inline-flex;
+  column-gap: var(--#{$menu-toggle}--ColumnGap);
   align-items: center;
   justify-content: center;
   min-width: var(--#{$menu-toggle}--MinWidth);
@@ -259,6 +253,7 @@
     --#{$menu-toggle}--active--BackgroundColor: var(--#{$menu-toggle}--m-plain--active--BackgroundColor);
     --#{$menu-toggle}--expanded--BackgroundColor: var(--#{$menu-toggle}--m-plain--expanded--BackgroundColor);
     --#{$menu-toggle}--disabled--Color: var(--#{$menu-toggle}--m-plain--disabled--Color);
+    --#{$menu-toggle}--disabled--BackgroundColor: var(--#{$menu-toggle}--m-plain--disabled--BackgroundColor);
 
     mix-blend-mode: var(--#{$menu-toggle}--m-plain--MixBlendMode);
 
@@ -267,22 +262,6 @@
     }
   }
 
-  // TODO: wrap all toggle icons with .menu-toggle__button to eliminate the need for this
-  &:has(.#{$button}:only-child) {
-    padding: revert;
-  }
-
-  // TODO: wrap all toggle icons with .menu-toggle__button to eliminate the need for this
-  // TODO: update menu toggle to consume .pf-v5-c-button
-  &:is(button),
-  .#{$button} {
-    background-color: var(--#{$menu-toggle}--BackgroundColor);
-
-    &:has(> i:only-child) {
-      aspect-ratio: 1 / 1;
-    }
-  }
-
   &:is(:hover, :focus) {
     --#{$menu-toggle}--Color: var(--#{$menu-toggle}--hover--Color);
     --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--hover--BackgroundColor);
@@ -331,6 +310,8 @@
 
 // - Menu toggle split button
 .#{$menu-toggle}.pf-m-split-button {
+  --#{$menu-toggle}--ColumnGap: 0;
+
   padding: 0; // pass padding to children
 
   > * {
@@ -373,7 +354,6 @@
 
 // - Menu toggle split button action
 .#{$menu-toggle}.pf-m-split-button.pf-m-action {
-  --#{$menu-toggle}--ColumnGap: 0;
   --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor: var(--#{$menu-toggle}--BorderColor);
 
   // all subsequent buttons
@@ -435,6 +415,7 @@
 // - Menu toggle typeahead
 .#{$menu-toggle}.pf-m-typeahead {
   --#{$menu-toggle}__button--AlignSelf: var(--#{$menu-toggle}--m-typeahead__button--AlignSelf);
+  --#{$menu-toggle}--ColumnGap: 0;
 
   align-items: stretch;
   padding: 0;
@@ -444,7 +425,6 @@
   }
 
   .#{$menu-toggle}__controls {
-    --#{$menu-toggle}--ColumnGap: 0;
     --#{$menu-toggle}__button--PaddingRight: 0;
 
     display: flex;
@@ -477,8 +457,6 @@
 .#{$menu-toggle}__icon {
   flex-shrink: 0;
   align-self: center;
-  margin-inline-end: var(--#{$menu-toggle}__icon--MarginRight);
-  line-height: 1;
 }
 
 .#{$menu-toggle}__text {
@@ -490,7 +468,6 @@
 .#{$menu-toggle}__count {
   display: flex;
   flex-wrap: nowrap;
-  margin-inline-start: var(--#{$menu-toggle}__count--MarginLeft);
 }
 
 .#{$menu-toggle}__controls {
@@ -498,7 +475,6 @@
   align-items: center;
   justify-content: center;
   min-width: var(--#{$menu-toggle}__controls--MinWidth);
-  margin-inline-start: var(--#{$menu-toggle}--ColumnGap);
 }
 
 .#{$menu-toggle}__toggle-icon {

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

@@ -108,7 +108,7 @@ cssPrefix: pf-v5-c-dual-list-selector
         id="basic-available-status-text"
       >0 of 5 items selected</span>
     </div>
-    <div class="pf-v5-c-dual-list-selector__menu">
+    <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
       <ul
         class="pf-v5-c-dual-list-selector__list"
         role="listbox"
@@ -325,7 +325,7 @@ cssPrefix: pf-v5-c-dual-list-selector
         id="basic-chosen-status-text"
       >0 of 0 items selected</span>
     </div>
-    <div class="pf-v5-c-dual-list-selector__menu">
+    <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
       <ul
         class="pf-v5-c-dual-list-selector__list"
         role="listbox"
@@ -443,7 +443,7 @@ cssPrefix: pf-v5-c-dual-list-selector
         id="available-item-selected-available-status-text"
       >1 of 5 items selected</span>
     </div>
-    <div class="pf-v5-c-dual-list-selector__menu">
+    <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
       <ul
         class="pf-v5-c-dual-list-selector__list"
         role="listbox"
@@ -654,7 +654,7 @@ cssPrefix: pf-v5-c-dual-list-selector
         id="available-item-selected-chosen-status-text"
       >0 of 0 items selected</span>
     </div>
-    <div class="pf-v5-c-dual-list-selector__menu">
+    <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
       <ul
         class="pf-v5-c-dual-list-selector__list"
         role="listbox"
@@ -772,7 +772,7 @@ cssPrefix: pf-v5-c-dual-list-selector
         id="multiple-available-items-selected-available-status-text"
       >3 of 5 items selected</span>
     </div>
-    <div class="pf-v5-c-dual-list-selector__menu">
+    <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
       <ul
         class="pf-v5-c-dual-list-selector__list"
         role="listbox"
@@ -983,7 +983,7 @@ cssPrefix: pf-v5-c-dual-list-selector
         id="multiple-available-items-selected-chosen-status-text"
       >0 of 0 items selected</span>
     </div>
-    <div class="pf-v5-c-dual-list-selector__menu">
+    <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
       <ul
         class="pf-v5-c-dual-list-selector__list"
         role="listbox"
@@ -1101,7 +1101,7 @@ cssPrefix: pf-v5-c-dual-list-selector
         id="chosen-item-available-status-text"
       >0 of 4 items selected</span>
     </div>
-    <div class="pf-v5-c-dual-list-selector__menu">
+    <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
       <ul
         class="pf-v5-c-dual-list-selector__list"
         role="listbox"
@@ -1312,7 +1312,7 @@ cssPrefix: pf-v5-c-dual-list-selector
         id="chosen-item-chosen-status-text"
       >0 of 1 items selected</span>
     </div>
-    <div class="pf-v5-c-dual-list-selector__menu">
+    <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
       <ul
         class="pf-v5-c-dual-list-selector__list"
         role="listbox"
@@ -1443,7 +1443,7 @@ cssPrefix: pf-v5-c-dual-list-selector
         id="chosen-item-selected-available-status-text"
       >0 of 4 items selected</span>
     </div>
-    <div class="pf-v5-c-dual-list-selector__menu">
+    <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
       <ul
         class="pf-v5-c-dual-list-selector__list"
         role="listbox"
@@ -1653,7 +1653,7 @@ cssPrefix: pf-v5-c-dual-list-selector
         id="chosen-item-selected-chosen-status-text"
       >1 of 1 items selected</span>
     </div>
-    <div class="pf-v5-c-dual-list-selector__menu">
+    <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
       <ul
         class="pf-v5-c-dual-list-selector__list"
         role="listbox"
@@ -1784,7 +1784,7 @@ cssPrefix: pf-v5-c-dual-list-selector
         id="tree-available-status-text"
       >1 of 11 items selected</span>
     </div>
-    <div class="pf-v5-c-dual-list-selector__menu">
+    <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
       <ul
         class="pf-v5-c-dual-list-selector__list"
         role="tree"
@@ -2263,7 +2263,7 @@ cssPrefix: pf-v5-c-dual-list-selector
         id="tree-chosen-status-text"
       >0 of 0 items selected</span>
     </div>
-    <div class="pf-v5-c-dual-list-selector__menu">
+    <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
       <ul
         class="pf-v5-c-dual-list-selector__list"
         role="listbox"
@@ -2381,7 +2381,7 @@ cssPrefix: pf-v5-c-dual-list-selector
         id="tree-options-available-status-text"
       >0 of 10 items selected</span>
     </div>
-    <div class="pf-v5-c-dual-list-selector__menu">
+    <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
       <ul
         class="pf-v5-c-dual-list-selector__list"
         role="tree"
@@ -2841,7 +2841,7 @@ cssPrefix: pf-v5-c-dual-list-selector
         id="tree-options-chosen-status-text"
       >0 of 0 items selected</span>
     </div>
-    <div class="pf-v5-c-dual-list-selector__menu">
+    <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
       <ul
         class="pf-v5-c-dual-list-selector__list"
         role="tree"
@@ -3026,7 +3026,7 @@ cssPrefix: pf-v5-c-dual-list-selector
         id="draggable-available-status-text"
       >0 of 5 items selected</span>
     </div>
-    <div class="pf-v5-c-dual-list-selector__menu">
+    <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
       <ul
         class="pf-v5-c-dual-list-selector__list"
         role="listbox"
@@ -3214,7 +3214,7 @@ cssPrefix: pf-v5-c-dual-list-selector
         id="draggable-chosen-status-text"
       >0 of 0 items selected</span>
     </div>
-    <div class="pf-v5-c-dual-list-selector__menu">
+    <div class="pf-v5-c-dual-list-selector__menu" tabindex="0">
       <ul
         class="pf-v5-c-dual-list-selector__list"
         role="listbox"

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

@@ -88,7 +88,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-basic-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div
@@ -658,7 +660,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-line-number-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div
@@ -1228,7 +1232,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-line-number-chars-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div
@@ -1798,7 +1804,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-text-wrap-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div
@@ -2368,7 +2376,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-text-nowrap-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div
@@ -2938,7 +2948,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-search-results-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div
@@ -3578,7 +3590,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-max-height-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div
@@ -4148,7 +4162,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-dropdowns-expanded-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div
@@ -4716,7 +4732,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-popover-expanded-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div
@@ -5319,7 +5337,9 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-label="Show filters"
                 aria-controls="log-viewer-dark-example-toolbar-expandable-content"
               >
-                <i class="fas fa-search" aria-hidden="true"></i>
+                <span class="pf-v5-c-menu-toggle__icon">
+                  <i class="fas fa-search" aria-hidden="true"></i>
+                </span>
               </button>
             </div>
             <div