@patternfly/patternfly 6.0.0-alpha.128 → 6.0.0-alpha.129

package/components/Select/select.scss

@@ -1,704 +0,0 @@
-@use '../../sass-utilities' as *;
-
-.#{$select} {
-  // Toggle
-  --#{$select}__toggle--PaddingBlockStart: var(--#{$pf-global}--spacer--form-element);
-  --#{$select}__toggle--PaddingInlineEnd: var(--#{$pf-global}--spacer--sm);
-  --#{$select}__toggle--PaddingBlockEnd: var(--#{$pf-global}--spacer--form-element);
-  --#{$select}__toggle--PaddingInlineStart: var(--#{$pf-global}--spacer--sm);
-  --#{$select}__toggle--MinWidth: var(--#{$pf-global}--target-size--MinWidth);
-  --#{$select}__toggle--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$select}__toggle--FontWeight: var(--#{$pf-global}--FontWeight--normal);
-  --#{$select}__toggle--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$select}__toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$select}__toggle--before--BorderBlockStartWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$select}__toggle--before--BorderInlineEndWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$select}__toggle--before--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$select}__toggle--before--BorderInlineStartWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$select}__toggle--before--BorderWidth: initial; // remove at breaking change
-  --#{$select}__toggle--before--BorderBlockStartColor: var(--#{$pf-global}--BorderColor--300);
-  --#{$select}__toggle--before--BorderInlineEndColor: var(--#{$pf-global}--BorderColor--300);
-  --#{$select}__toggle--before--BorderBlockEndColor: var(--#{$pf-global}--BorderColor--200);
-  --#{$select}__toggle--before--BorderInlineStartColor: var(--#{$pf-global}--BorderColor--300);
-  --#{$select}__toggle--Color: var(--#{$pf-global}--Color--100);
-  --#{$select}__toggle--hover--before--BorderBlockEndColor: var(--#{$pf-global}--active-color--100);
-  --#{$select}__toggle--focus--before--BorderBlockEndColor: var(--#{$pf-global}--active-color--100);
-  --#{$select}__toggle--focus--before--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$select}__toggle--active--before--BorderBlockEndColor: var(--#{$pf-global}--active-color--100);
-  --#{$select}__toggle--active--before--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$select}__toggle--m-expanded--before--BorderBlockEndColor: var(--#{$pf-global}--active-color--100); // rename to c-select--m-expanded at breaking change
-  --#{$select}__toggle--m-expanded--before--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--md); // rename to c-select--m-expanded at breaking change
-  --#{$select}__toggle--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
-  --#{$select}__toggle--m-plain--before--BorderColor: transparent;
-  --#{$select}__toggle--m-placeholder--Color: transparent;
-  --#{$select}--m-invalid__toggle--before--BorderBlockEndColor: var(--#{$pf-global}--danger-color--100);
-  --#{$select}--m-invalid__toggle--before--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$select}--m-invalid__toggle--hover--before--BorderBlockEndColor: var(--#{$pf-global}--danger-color--100);
-  --#{$select}--m-invalid__toggle--focus--before--BorderBlockEndColor: var(--#{$pf-global}--danger-color--100);
-  --#{$select}--m-invalid__toggle--active--before--BorderBlockEndColor: var(--#{$pf-global}--danger-color--100);
-  --#{$select}--m-invalid__toggle--m-expanded--before--BorderBlockEndColor: var(--#{$pf-global}--danger-color--100);
-  --#{$select}--m-invalid__toggle-status-icon--Color: var(--#{$pf-global}--danger-color--100);
-  --#{$select}--m-success__toggle--before--BorderBlockEndColor: var(--#{$pf-global}--success-color--100);
-  --#{$select}--m-success__toggle--before--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$select}--m-success__toggle--hover--before--BorderBlockEndColor: var(--#{$pf-global}--success-color--100);
-  --#{$select}--m-success__toggle--focus--before--BorderBlockEndColor: var(--#{$pf-global}--success-color--100);
-  --#{$select}--m-success__toggle--active--before--BorderBlockEndColor: var(--#{$pf-global}--success-color--100);
-  --#{$select}--m-success__toggle--m-expanded--before--BorderBlockEndColor: var(--#{$pf-global}--success-color--100);
-  --#{$select}--m-success__toggle-status-icon--Color: var(--#{$pf-global}--success-color--100);
-  --#{$select}--m-warning__toggle--before--BorderBlockEndColor: var(--#{$pf-global}--warning-color--100);
-  --#{$select}--m-warning__toggle--before--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$select}--m-warning__toggle--hover--before--BorderBlockEndColor: var(--#{$pf-global}--warning-color--100);
-  --#{$select}--m-warning__toggle--focus--before--BorderBlockEndColor: var(--#{$pf-global}--warning-color--100);
-  --#{$select}--m-warning__toggle--active--before--BorderBlockEndColor: var(--#{$pf-global}--warning-color--100);
-  --#{$select}--m-warning__toggle--m-expanded--before--BorderBlockEndColor: var(--#{$pf-global}--warning-color--100);
-  --#{$select}--m-warning__toggle-status-icon--Color: var(--#{$pf-global}--warning-color--100);
-
-  // Space for the children of the toggle
-  --#{$select}__toggle-wrapper--not-last-child--MarginInlineEnd: var(--#{$pf-global}--spacer--xs);
-
-  // Max-width is needed for ellipsing the text. This leaves enough space for the toggle caret.
-  // However, for cases where the clear icon button or a badge are added, the correct width will need to be calculated in script
-  --#{$select}__toggle-wrapper--MaxWidth: calc(100% - var(--#{$pf-global}--spacer--lg));
-
-  // Chip group within a toggle-wrapper needs a margin-bottom in case it wraps
-  --#{$select}__toggle-wrapper--c-chip-group--MarginBlockStart: #{pf-size-prem(5px)};
-  --#{$select}__toggle-wrapper--c-chip-group--MarginBlockEnd: #{pf-size-prem(5px)};
-
-  // Select input for typeahead
-  --#{$select}__toggle-typeahead--FlexBasis: 10em;
-  --#{$select}__toggle-typeahead--BackgroundColor: transparent;
-  --#{$select}__toggle-typeahead--BorderBlockStart: var(--#{$pf-global}--BorderWidth--sm) solid transparent;
-  --#{$select}__toggle-typeahead--BorderInlineEnd: none;
-  --#{$select}__toggle-typeahead--BorderInlineStart: none;
-
-  // Typeahead form
-  --#{$select}__toggle-typeahead--MinWidth: #{pf-size-prem(120px)};
-
-  // Toggle text
-  --#{$select}__toggle--m-placeholder__toggle-text--Color: var(--#{$pf-global}--Color--dark-200);
-
-  //  Select toggle icon + toggle text
-  --#{$select}__toggle-icon--toggle-text--MarginInlineStart: var(--#{$pf-global}--spacer--xs);
-
-  // Select toggle badge
-  --#{$select}__toggle-badge--PaddingInlineStart: var(--#{$pf-global}--spacer--sm);
-
-  // Select toggle status icon
-  --#{$select}__toggle-status-icon--MarginInlineStart: var(--#{$pf-global}--spacer--xs);
-  --#{$select}__toggle-status-icon--Color: var(--#{$pf-global}--Color--100);
-
-  // Toggle arrow
-  --#{$select}__toggle-arrow--MarginInlineStart: var(--#{$pf-global}--spacer--md);
-  --#{$select}__toggle-arrow--MarginInlineEnd: var(--#{$pf-global}--spacer--sm);
-  --#{$select}__toggle-arrow--with-clear--MarginInlineStart: var(--#{$pf-global}--spacer--sm);
-  --#{$select}__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate: 180deg;
-  --#{$select}--m-plain__toggle-arrow--Color: var(--#{$pf-global}--Color--200);
-  --#{$select}--m-plain--hover__toggle-arrow--Color: var(--#{$pf-global}--Color--100);
-
-  // Toggle button
-  --#{$select}__toggle-clear--PaddingInlineEnd: var(--#{$pf-global}--spacer--sm);
-  --#{$select}__toggle-clear--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
-  --#{$select}__toggle-clear--toggle-button--PaddingInlineStart: var(--#{$pf-global}--spacer--sm);
-  --#{$select}__toggle-button--Color: var(--#{$pf-global}--Color--100);
-
-  // Menu
-  --#{$select}__menu--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
-  --#{$select}__menu--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
-  --#{$select}__menu--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
-  --#{$select}__menu--PaddingBlockEnd: var(--#{$pf-global}--spacer--sm);
-  --#{$select}__menu--InsetBlockStart: calc(100% + var(--#{$pf-global}--spacer--xs)); // The top of the menu must be pushed down to create space between the toggle and menu
-  --#{$select}__menu--ZIndex: var(--pf-t--global--z-index--sm);
-  --#{$select}__menu--Width: auto;
-  --#{$select}__menu--MinWidth: 100%;
-  --#{$select}__menu--m-top--TranslateY: calc(-100% - var(--#{$pf-global}--spacer--xs)); // The "dropup" menu must be transformed up and this calculates how much to create space between the toggle and menu
-
-  // Menu list item
-  --#{$select}__list-item--m-loading--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
-
-  // Menu item
-  --#{$select}__menu-item--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
-  --#{$select}__menu-item--PaddingInlineEnd: var(--#{$pf-global}--spacer--md);
-  --#{$select}__menu-item--m-selected--PaddingInlineEnd: var(--#{$pf-global}--spacer--2xl);
-  --#{$select}__menu-item--PaddingBlockEnd: var(--#{$pf-global}--spacer--sm);
-  --#{$select}__menu-item--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
-  --#{$select}__menu-item--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$select}__menu-item--FontWeight: var(--#{$pf-global}--FontWeight--normal);
-  --#{$select}__menu-item--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$select}__menu-item--Color: var(--#{$pf-global}--Color--dark-100);
-  --#{$select}__menu-item--disabled--Color: var(--#{$pf-global}--Color--dark-200);
-  --#{$select}__menu-item--Width: 100%;
-  --#{$select}__menu-item--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
-  --#{$select}__menu-item--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
-  --#{$select}__menu-item--disabled--BackgroundColor: transparent;
-  --#{$select}__menu-item--m-link--Width: auto;
-  --#{$select}__menu-item--m-link--hover--BackgroundColor: transparent;
-  --#{$select}__menu-item--m-link--focus--BackgroundColor: transparent;
-  --#{$select}__menu-item--m-action--Color: var(--#{$pf-global}--Color--200);
-  --#{$select}__menu-item--m-action--hover--Color: var(--#{$pf-global}--Color--100);
-  --#{$select}__menu-item--m-action--focus--Color: var(--#{$pf-global}--Color--100);
-  --#{$select}__menu-item--m-action--disabled--Color: var(--#{$pf-global}--disabled-color--200);
-  --#{$select}__menu-item--m-action--Width: auto;
-  --#{$select}__menu-item--m-action--FontSize: var(--#{$pf-global}--icon--FontSize--sm);
-  --#{$select}__menu-item--m-action--hover--BackgroundColor: transparent;
-  --#{$select}__menu-item--m-action--focus--BackgroundColor: transparent;
-  --#{$select}__menu-item--hover__menu-item--m-action--Color: var(--#{$pf-global}--Color--200); // remove at breaking change
-  --#{$select}__menu-item--m-favorite-action--Color: var(--#{$pf-global}--Color--200);
-  --#{$select}__menu-item--m-favorite-action--hover--Color: var(--#{$pf-global}--Color--100);
-  --#{$select}__menu-item--m-favorite-action--focus--Color: var(--#{$pf-global}--Color--100);
-  --#{$select}__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color: var(--#{$pf-global}--palette--gold-400);
-  --#{$select}__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color: var(--#{$pf-global}--palette--gold-500);
-  --#{$select}__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color: var(--#{$pf-global}--palette--gold-500);
-  --#{$select}__menu-item--m-load--Color: var(--#{$pf-global}--link--Color);
-
-  // Menu item icon
-  --#{$select}__menu-item-icon--Color: var(--#{$pf-global}--active-color--100);
-  --#{$select}__menu-item-icon--FontSize: var(--#{$pf-global}--icon--FontSize--sm);
-  --#{$select}__menu-item-icon--InsetInlineEnd: var(--#{$pf-global}--spacer--md);
-  --#{$select}__menu-item-icon--InsetBlockStart: 50%;
-  --#{$select}__menu-item-icon--TranslateY: -50%;
-
-  // Menu item action icon
-  --#{$select}__menu-item-action-icon--MinHeight: calc(var(--#{$select}__menu-item--FontSize) * var(--#{$select}__menu-item--LineHeight));
-
-  // Match within a menu item when using typeahead
-  --#{$select}__menu-item--match--FontWeight: var(--#{$pf-global}--FontWeight--bold);
-
-  // Menu group padding
-  --#{$select}__menu-search--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
-  --#{$select}__menu-search--PaddingInlineEnd: var(--#{$select}__menu-item--PaddingInlineEnd);
-  --#{$select}__menu-search--PaddingBlockEnd: var(--#{$pf-global}--spacer--md);
-  --#{$select}__menu-search--PaddingInlineStart: var(--#{$select}__menu-item--PaddingInlineStart);
-
-  // Menu group
-  // add a little space if it's not the first group because the first one also has the menu padding
-  --#{$select}__menu-group--menu-group--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
-
-  // Menu section heading
-  // Paddings are set to always line up with the other menu items
-  --#{$select}__menu-group-title--PaddingBlockStart: var(--#{$select}__menu-item--PaddingBlockStart);
-  --#{$select}__menu-group-title--PaddingInlineEnd: var(--#{$select}__menu-item--PaddingInlineEnd);
-  --#{$select}__menu-group-title--PaddingBlockEnd: var(--#{$select}__menu-item--PaddingBlockEnd);
-  --#{$select}__menu-group-title--PaddingInlineStart: var(--#{$select}__menu-item--PaddingInlineStart);
-  --#{$select}__menu-group-title--FontSize: var(--#{$pf-global}--FontSize--xs);
-  --#{$select}__menu-group-title--FontWeight: var(--#{$pf-global}--FontWeight--normal);
-  --#{$select}__menu-group-title--Color: var(--#{$pf-global}--Color--dark-200);
-
-  // Menu item count
-  --#{$select}__menu-item-count--MarginInlineStart: var(--#{$pf-global}--spacer--md);
-  --#{$select}__menu-item-count--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$select}__menu-item-count--Color: var(--#{$pf-global}--Color--200);
-  --#{$select}__menu-item--disabled__menu-item-count--Color: var(--#{$pf-global}--Color--dark-200);
-
-  // Menu item description
-  --#{$select}__menu-item-description--FontSize: var(--#{$pf-global}--FontSize--xs);
-  --#{$select}__menu-item-description--Color: var(--#{$pf-global}--Color--200);
-  --#{$select}__menu-item-description--PaddingInlineEnd: var(--#{$select}__menu-item--PaddingInlineEnd);
-
-  // Menu item title
-  --#{$select}__menu-item-main--PaddingInlineEnd: var(--#{$select}__menu-item--PaddingInlineEnd);
-  --#{$select}__menu-item--m-selected__menu-item-main--PaddingInlineEnd: var(--#{$select}__menu-item--m-selected--PaddingInlineEnd);
-
-  // Menu footer
-  --#{$select}__menu-footer--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top);
-  --#{$select}__menu-footer--PaddingBlockStart: var(--#{$pf-global}--spacer--md);
-  --#{$select}__menu-footer--PaddingInlineEnd: var(--#{$pf-global}--spacer--md);
-  --#{$select}__menu-footer--PaddingBlockEnd: var(--#{$pf-global}--spacer--md);
-  --#{$select}__menu-footer--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
-  --#{$select}__menu-footer--MarginBlockStart: var(--#{$pf-global}--spacer--sm);
-  --#{$select}__menu-footer--MarginBlockEnd: calc(var(--#{$pf-global}--spacer--sm) * -1);
-
-  // Divider
-  --#{$select}-menu--c-divider--MarginBlockStart: var(--#{$pf-global}--spacer--sm);
-  --#{$select}-menu--c-divider--MarginBlockEnd: var(--#{$pf-global}--spacer--sm);
-
-  position: relative;
-  display: inline-block;
-  width: 100%;
-
-  .#{$divider} {
-    margin-block-start: var(--#{$select}-menu--c-divider--MarginBlockStart);
-    margin-block-end: var(--#{$select}-menu--c-divider--MarginBlockEnd);
-
-    // Support divider as last item in group to separate groups
-    &:last-child {
-      --#{$select}-menu--c-divider--MarginBlockEnd: 0;
-    }
-  }
-
-  &.pf-m-invalid {
-    --#{$select}__toggle--before--BorderBlockEndColor: var(--#{$select}--m-invalid__toggle--before--BorderBlockEndColor);
-    --#{$select}__toggle--before--BorderBlockEndWidth: var(--#{$select}--m-invalid__toggle--before--BorderBlockEndWidth);
-    --#{$select}__toggle--hover--before--BorderBlockEndColor: var(--#{$select}--m-invalid__toggle--hover--before--BorderBlockEndColor);
-    --#{$select}__toggle--focus--before--BorderBlockEndColor: var(--#{$select}--m-invalid__toggle--focus--before--BorderBlockEndColor);
-    --#{$select}__toggle--active--before--BorderBlockEndColor: var(--#{$select}--m-invalid__toggle--active--before--BorderBlockEndColor);
-    --#{$select}__toggle--m-expanded--before--BorderBlockEndColor: var(--#{$select}--m-invalid__toggle--m-expanded--before--BorderBlockEndColor);
-    --#{$select}__toggle-status-icon--Color: var(--#{$select}--m-invalid__toggle-status-icon--Color);
-  }
-
-  &.pf-m-success {
-    --#{$select}__toggle--before--BorderBlockEndColor: var(--#{$select}--m-success__toggle--before--BorderBlockEndColor);
-    --#{$select}__toggle--before--BorderBlockEndWidth: var(--#{$select}--m-success__toggle--before--BorderBlockEndWidth);
-    --#{$select}__toggle--hover--before--BorderBlockEndColor: var(--#{$select}--m-success__toggle--hover--before--BorderBlockEndColor);
-    --#{$select}__toggle--focus--before--BorderBlockEndColor: var(--#{$select}--m-success__toggle--focus--before--BorderBlockEndColor);
-    --#{$select}__toggle--active--before--BorderBlockEndColor: var(--#{$select}--m-success__toggle--active--before--BorderBlockEndColor);
-    --#{$select}__toggle--m-expanded--before--BorderBlockEndColor: var(--#{$select}--m-success__toggle--m-expanded--before--BorderBlockEndColor);
-    --#{$select}__toggle-status-icon--Color: var(--#{$select}--m-success__toggle-status-icon--Color);
-  }
-
-  &.pf-m-warning {
-    --#{$select}__toggle--before--BorderBlockEndColor: var(--#{$select}--m-warning__toggle--before--BorderBlockEndColor);
-    --#{$select}__toggle--before--BorderBlockEndWidth: var(--#{$select}--m-warning__toggle--before--BorderBlockEndWidth);
-    --#{$select}__toggle--hover--before--BorderBlockEndColor: var(--#{$select}--m-warning__toggle--hover--before--BorderBlockEndColor);
-    --#{$select}__toggle--focus--before--BorderBlockEndColor: var(--#{$select}--m-warning__toggle--focus--before--BorderBlockEndColor);
-    --#{$select}__toggle--active--before--BorderBlockEndColor: var(--#{$select}--m-warning__toggle--active--before--BorderBlockEndColor);
-    --#{$select}__toggle--m-expanded--before--BorderBlockEndColor: var(--#{$select}--m-warning__toggle--m-expanded--before--BorderBlockEndColor);
-    --#{$select}__toggle-status-icon--Color: var(--#{$select}--m-warning__toggle-status-icon--Color);
-  }
-}
-
-.#{$select}__menu-search + .#{$divider} {
-  --#{$select}-menu--c-divider--MarginBlockStart: 0;
-}
-
-.#{$select}__toggle {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  min-width: var(--#{$select}__toggle--MinWidth);
-  padding-block-start: var(--#{$select}__toggle--PaddingBlockStart);
-  padding-block-end: var(--#{$select}__toggle--PaddingBlockEnd);
-  padding-inline-start: var(--#{$select}__toggle--PaddingInlineStart);
-  padding-inline-end: var(--#{$select}__toggle--PaddingInlineEnd);
-  font-size: var(--#{$select}__toggle--FontSize);
-  font-weight: var(--#{$select}__toggle--FontWeight);
-  line-height: var(--#{$select}__toggle--LineHeight);
-  color: var(--#{$select}__toggle--Color);
-  white-space: nowrap;
-  cursor: pointer;
-  background-color: var(--#{$select}__toggle--BackgroundColor);
-  border: none;
-
-  &.pf-m-disabled,
-  &:disabled {
-    --#{$select}__toggle--BackgroundColor: var(--#{$select}__toggle--disabled--BackgroundColor);
-
-    pointer-events: none;
-
-    &::before {
-      border: 0;
-    }
-  }
-
-  &::before {
-    --#{$select}__toggle--before--BorderWidth-base: var(--#{$select}__toggle--before--BorderBlockStartWidth) var(--#{$select}__toggle--before--BorderInlineEndWidth) var(--#{$select}__toggle--before--BorderBlockEndWidth) var(--#{$select}__toggle--before--BorderInlineStartWidth); // remove at breaking change
-
-    position: absolute;
-    inset: 0;
-    content: "";
-    border-style: solid;
-    border-width: var(--#{$select}__toggle--before--BorderWidth, var(--#{$select}__toggle--before--BorderWidth-base));
-    border-block-start-color: var(--#{$select}__toggle--before--BorderBlockStartColor);
-    border-block-end-color: var(--#{$select}__toggle--before--BorderBlockEndColor);
-    border-inline-start-color: var(--#{$select}__toggle--before--BorderInlineStartColor);
-    border-inline-end-color: var(--#{$select}__toggle--before--BorderInlineEndColor);
-  }
-
-  &:hover {
-    --#{$select}__toggle--before--BorderBlockEndColor: var(--#{$select}__toggle--hover--before--BorderBlockEndColor);
-  }
-
-  &:focus,
-  &:focus-within {
-    --#{$select}__toggle--before--BorderBlockEndColor: var(--#{$select}__toggle--focus--before--BorderBlockEndColor);
-    --#{$select}__toggle--before--BorderBlockEndWidth: var(--#{$select}__toggle--focus--before--BorderBlockEndWidth);
-  }
-
-  &:active,
-  &.pf-m-active {
-    --#{$select}__toggle--before--BorderBlockEndColor: var(--#{$select}__toggle--active--before--BorderBlockEndColor);
-    --#{$select}__toggle--before--BorderBlockEndWidth: var(--#{$select}__toggle--active--before--BorderBlockEndWidth);
-  }
-
-  .pf-m-expanded > & {
-    --#{$select}__toggle--before--BorderBlockEndColor: var(--#{$select}__toggle--m-expanded--before--BorderBlockEndColor);
-    --#{$select}__toggle--before--BorderBlockEndWidth: var(--#{$select}__toggle--m-expanded--before--BorderBlockEndWidth);
-  }
-
-  &.pf-m-plain {
-    --#{$select}__toggle-arrow--Color: var(--#{$select}--m-plain__toggle-arrow--Color);
-
-    &::before {
-      border-color: var(--#{$select}__toggle--m-plain--before--BorderColor);
-    }
-
-    &:hover,
-    &:active,
-    &.pf-m-active,
-    &:focus,
-    .#{$select}.pf-m-expanded > & {
-      --#{$select}--m-plain__toggle-arrow--Color: var(--#{$select}--m-plain--hover__toggle-arrow--Color);
-    }
-  }
-
-  &.pf-m-typeahead {
-    --#{$select}__toggle--PaddingBlockStart: 0;
-    --#{$select}__toggle--PaddingInlineEnd: 0;
-    --#{$select}__toggle--PaddingBlockEnd: 0;
-
-    .#{$form-control} {
-      @include pf-v6-text-overflow;
-
-      --#{$form-control}--invalid--BackgroundUrl: none;
-
-      position: relative;
-    }
-  }
-
-  .#{$select}__toggle-clear {
-    padding-inline-start: var(--#{$select}__toggle-clear--PaddingInlineStart);
-    padding-inline-end: var(--#{$select}__toggle-clear--PaddingInlineEnd);
-    margin-inline-start: auto;
-  }
-
-  .#{$select}__toggle-button {
-    color: var(--#{$select}__toggle-button--Color);
-  }
-
-  .#{$select}__toggle-clear + .#{$select}__toggle-button {
-    padding-inline-start: var(--#{$select}__toggle-clear--toggle-button--PaddingInlineStart);
-  }
-
-  &.pf-m-placeholder {
-    --#{$select}__toggle-text--Color: var(--#{$select}__toggle--m-placeholder__toggle-text--Color);
-  }
-}
-
-.#{$select}__toggle-arrow {
-  color: var(--#{$select}__toggle-arrow--Color, inherit);
-
-  * + & {
-    margin-inline-start: var(--#{$select}__toggle-arrow--MarginInlineStart);
-    margin-inline-end: var(--#{$select}__toggle-arrow--MarginInlineEnd);
-  }
-  // stylelint-disable-next-line
-  .#{$select}.pf-m-top.pf-m-expanded & {
-    transform: rotate(var(--#{$select}__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate));
-  }
-}
-
-.#{$select}__toggle-text {
-  @include pf-v6-text-overflow;
-
-  color: var(--#{$select}__toggle-text--Color, inherit);
-}
-
-.#{$select}__toggle-wrapper {
-  display: flex;
-  flex: 1;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: flex-start;
-
-  // Max-width is needed for ellipsing the text. This leaves enough space for the toggle caret.
-  // However, for cases where the clear icon button or a badge are added, the correct width will need to be calculated in script
-  min-width: 0;
-  max-width: var(--#{$select}__toggle-wrapper--MaxWidth);
-  white-space: normal;
-
-  // Add space between children
-  > :not(:last-child) {
-    margin-inline-end: var(--#{$select}__toggle-wrapper--not-last-child--MarginInlineEnd);
-  }
-
-  // a chip group needs a bottom margin to make some space between the chip group and typeahead input box if it wraps
-  .#{$chip}-group {
-    margin-block-start: var(--#{$select}__toggle-wrapper--c-chip-group--MarginBlockStart);
-    margin-block-end: var(--#{$select}__toggle-wrapper--c-chip-group--MarginBlockEnd);
-  }
-
-  // When the input is the first thing then use a negative left padding so it matches the toggle container
-  > .#{$select}__toggle-typeahead:first-child {
-    margin-inline-start: calc(-1 * var(--#{$select}__toggle--PaddingInlineStart));
-  }
-}
-
-.#{$select}__toggle-icon + .#{$select}__toggle-text {
-  margin-inline-start: var(--#{$select}__toggle-icon--toggle-text--MarginInlineStart);
-}
-
-.#{$select}__toggle-status-icon {
-  margin-inline-start: var(--#{$select}__toggle-status-icon--MarginInlineStart);
-  color: var(--#{$select}__toggle-status-icon--Color);
-}
-
-.#{$select}__toggle-badge {
-  display: flex;
-  padding-inline-start: var(--#{$select}__toggle-badge--PaddingInlineStart);
-}
-
-.#{$select}__toggle-typeahead {
-  flex-basis: var(--#{$select}__toggle-typeahead--FlexBasis);
-  flex-grow: 1;
-  flex-shrink: 0;
-  min-width: var(--#{$select}__toggle-typeahead--MinWidth);
-
-  &.#{$form-control} {
-    background-color: var(--#{$select}__toggle-typeahead--BackgroundColor);
-
-    &::before,
-    &::after {
-      border: 0;
-    }
-  }
-}
-
-.#{$select}__menu {
-  position: absolute;
- inset-block-start: var(--#{$select}__menu--InsetBlockStart);
-  z-index: var(--#{$select}__menu--ZIndex);
-  width: var(--#{$select}__menu--Width);
-  min-width: var(--#{$select}__menu--MinWidth);
-  padding-block-start: var(--#{$select}__menu--PaddingBlockStart);
-  padding-block-end: var(--#{$select}__menu--PaddingBlockEnd);
-  background-color: var(--#{$select}__menu--BackgroundColor);
-  background-clip: padding-box;
-  box-shadow: var(--#{$select}__menu--BoxShadow);
-
-  &.pf-m-align-right {
-   inset-inline-end: 0;
-  }
-
-  .#{$select}.pf-m-top & {
-   inset-block-start: 0;
-    transform: translateY(var(--#{$select}__menu--m-top--TranslateY));
-  }
-
-  &.pf-m-static {
-    --#{$select}__menu--m-top--TranslateY: 0;
-
-    position: static;
-    inset: auto;
-    z-index: auto;
-    min-width: min-content;
-  }
-}
-
-.#{$select}__menu-fieldset {
-  border: 0;
-}
-
-.#{$select}__menu-wrapper {
-  display: flex;
-
-  &.pf-m-favorite .#{$select}__menu-item.pf-m-favorite-action {
-    --#{$select}__menu-item--m-favorite-action--Color: var(--#{$select}__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color);
-    --#{$select}__menu-item--m-favorite-action--hover--Color: var(--#{$select}__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color);
-    --#{$select}__menu-item--m-favorite-action--focus--Color: var(--#{$select}__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color);
-  }
-}
-
-.#{$select}__menu-item {
-  position: relative;
-  width: var(--#{$select}__menu-item--Width);
-  padding-block-start: var(--#{$select}__menu-item--PaddingBlockStart);
-  padding-block-end: var(--#{$select}__menu-item--PaddingBlockEnd);
-  padding-inline-start: var(--#{$select}__menu-item--PaddingInlineStart);
-  padding-inline-end: var(--#{$select}__menu-item--PaddingInlineEnd);
-  font-size: var(--#{$select}__menu-item--FontSize);
-  font-weight: var(--#{$select}__menu-item--FontWeight);
-  line-height: var(--#{$select}__menu-item--LineHeight);
-  color: var(--#{$select}__menu-item--Color);
-  text-align: start;
-  white-space: nowrap;
-  background-color: transparent;
-  border: none;
-
-  &:hover,
-  &:focus,
-  &.pf-m-focus {
-    --#{$select}__menu-item--m-action--Color: var(--#{$select}__menu-item--hover__menu-item--m-action--Color); // remove at breaking change
-
-    text-decoration: none;
-  }
-
-  @at-root .#{$select}__menu-wrapper,
-  & {
-    &:hover {
-      background-color: var(--#{$select}__menu-item--hover--BackgroundColor);
-    }
-  }
-
-  @at-root .#{$select}__menu-wrapper:focus-within,
-  .#{$select}__menu-wrapper.pf-m-focus,
-  &:focus,
-  &.pf-m-focus {
-    position: relative;
-    background-color: var(--#{$select}__menu-item--focus--BackgroundColor);
-  }
-
-  &.pf-m-link {
-    --#{$select}__menu-item--PaddingInlineEnd: 0;
-    --#{$select}__menu-item-main--PaddingInlineEnd: 0;
-    --#{$select}__menu-item-description--PaddingInlineEnd: 0;
-    --#{$select}__menu-item--Width: var(--#{$select}__menu-item--m-link--Width);
-    --#{$select}__menu-item--hover--BackgroundColor: var(--#{$select}__menu-item--m-link--hover--BackgroundColor);
-    --#{$select}__menu-item--focus--BackgroundColor: var(--#{$select}__menu-item--m-link--focus--BackgroundColor);
-
-    flex-grow: 1;
-  }
-
-  &.pf-m-action {
-    --#{$select}__menu-item--Color: var(--#{$select}__menu-item--m-action--Color);
-    --#{$select}__menu-item--Width: var(--#{$select}__menu-item--m-action--Width);
-    --#{$select}__menu-item--hover--BackgroundColor: var(--#{$select}__menu-item--m-action--hover--BackgroundColor);
-    --#{$select}__menu-item--focus--BackgroundColor: var(--#{$select}__menu-item--m-action--focus--BackgroundColor);
-
-    display: flex;
-    align-items: flex-start;
-    font-size: var(--#{$select}__menu-item--m-action--FontSize);
-
-    &:hover {
-      --#{$select}__menu-item--m-action--Color: var(--#{$select}__menu-item--m-action--hover--Color);
-    }
-
-    &:focus {
-      --#{$select}__menu-item--m-action--Color: var(--#{$select}__menu-item--m-action--focus--Color);
-    }
-
-    &:disabled {
-      --#{$select}__menu-item--disabled--Color: var(--#{$select}__menu-item--m-action--disabled--Color);
-    }
-  }
-
-  &.pf-m-favorite-action {
-    --#{$select}__menu-item--m-action--Color: var(--#{$select}__menu-item--m-favorite-action--Color);
-    --#{$select}__menu-item--m-action--hover--Color: var(--#{$select}__menu-item--m-favorite-action--hover--Color);
-    --#{$select}__menu-item--m-action--focus--Color: var(--#{$select}__menu-item--m-favorite-action--focus--Color);
-  }
-
-  &.pf-m-selected {
-    --#{$select}__menu-item--PaddingInlineEnd: var(--#{$select}__menu-item--m-selected--PaddingInlineEnd);
-    --#{$select}__menu-item-main--PaddingInlineEnd: var(--#{$select}__menu-item--m-selected__menu-item-main--PaddingInlineEnd);
-  }
-
-  &.pf-m-description {
-    &:not(.#{$check}) {
-      --#{$select}__menu-item--PaddingInlineEnd: 0;
-    }
-
-    .#{$check}__label {
-      white-space: nowrap;
-    }
-
-    white-space: normal;
-  }
-
-  @at-root .#{$select}__menu-wrapper.pf-m-disabled,
-  &:disabled,
-  &.pf-m-disabled {
-    --#{$select}__menu-item-count--Color: var(--#{$select}__menu-item--disabled__menu-item-count--Color);
-
-    color: var(--#{$select}__menu-item--disabled--Color);
-    pointer-events: none;
-    background-color: var(--#{$select}__menu-item--disabled--BackgroundColor);
-  }
-
-  &.#{$check} .#{$check}__label {
-    width: 100%;
-  }
-
-  &.pf-m-load {
-    --#{$select}__menu-item--hover--BackgroundColor: transparent;
-    --#{$select}__menu-item--focus--BackgroundColor: transparent;
-    --#{$select}__menu-item--Color: var(--#{$select}__menu-item--m-load--Color);
-  }
-}
-
-.#{$select}__list-item {
-  &.pf-m-loading {
-    padding-block-start: var(--#{$select}__list-item--m-loading--PaddingBlockStart);
-    text-align: center;
-  }
-}
-
-.#{$select}__menu-item-main {
-  position: relative;
-  display: block;
-  padding-inline-end: var(--#{$select}__menu-item-main--PaddingInlineEnd);
-  white-space: nowrap;
-}
-
-.#{$select}__menu-item-row {
-  display: flex;
-}
-
-.#{$select}__menu-item-text {
-  flex-grow: 1;
-}
-
-.#{$select}__menu-item-count {
-  align-self: center;
-  margin-inline-start: var(--#{$select}__menu-item-count--MarginInlineStart);
-  font-size: var(--#{$select}__menu-item-count--FontSize);
-  color: var(--#{$select}__menu-item-count--Color);
-}
-
-.#{$select}__menu-item-description {
-  display: block;
-  padding-inline-end: var(--#{$select}__menu-item-description--PaddingInlineEnd);
-  font-size: var(--#{$select}__menu-item-description--FontSize);
-  color: var(--#{$select}__menu-item-description--Color);
-}
-
-.#{$select}__menu-item-icon {
-  position: absolute;
-  inset-block-start: var(--#{$select}__menu-item-icon--InsetBlockStart);
-  inset-inline-end: var(--#{$select}__menu-item-icon--InsetInlineEnd);
-  font-size: var(--#{$select}__menu-item-icon--FontSize);
-  color: var(--#{$select}__menu-item-icon--Color);
-  transform: translateY(var(--#{$select}__menu-item-icon--TranslateY));
-}
-
-.#{$select}__menu-item-action-icon {
-  display: flex;
-  align-items: center;
-  min-height: var(--#{$select}__menu-item-action-icon--MinHeight);
-}
-
-.#{$select}__menu-item--match {
-  font-weight: var(--#{$select}__menu-item--match--FontWeight);
-  background-color: inherit;
-}
-
-.#{$select}__menu-group + .#{$select}__menu-group {
-  padding-block-start: var(--#{$select}__menu-group--menu-group--PaddingBlockStart);
-}
-
-.#{$select}__menu-search {
-  padding-block-start: var(--#{$select}__menu-search--PaddingBlockStart);
-  padding-block-end: var(--#{$select}__menu-search--PaddingBlockEnd);
-  padding-inline-start: var(--#{$select}__menu-search--PaddingInlineStart);
-  padding-inline-end: var(--#{$select}__menu-search--PaddingInlineEnd);
-}
-
-.#{$select}__menu-group-title {
-  padding-block-start: var(--#{$select}__menu-group-title--PaddingBlockStart);
-  padding-block-end: var(--#{$select}__menu-group-title--PaddingBlockEnd);
-  padding-inline-start: var(--#{$select}__menu-group-title--PaddingInlineStart);
-  padding-inline-end: var(--#{$select}__menu-group-title--PaddingInlineEnd);
-  font-size: var(--#{$select}__menu-group-title--FontSize);
-  font-weight: var(--#{$select}__menu-group-title--FontWeight);
-  color: var(--#{$select}__menu-group-title--Color);
-}
-
-.#{$select}__menu-footer {
-  padding-block-start: var(--#{$select}__menu-footer--PaddingBlockStart);
-  padding-block-end: var(--#{$select}__menu-footer--PaddingBlockEnd);
-  padding-inline-start: var(--#{$select}__menu-footer--PaddingInlineStart);
-  padding-inline-end: var(--#{$select}__menu-footer--PaddingInlineEnd);
-  margin-block-start: var(--#{$select}__menu-footer--MarginBlockStart);
-  margin-block-end: var(--#{$select}__menu-footer--MarginBlockEnd);
-  box-shadow: var(--#{$select}__menu-footer--BoxShadow);
-}