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

package/components/OptionsMenu/options-menu.css

@@ -1,264 +0,0 @@
-.pf-v6-c-options-menu {
-  --pf-v6-c-options-menu__toggle--BackgroundColor: transparent;
-  --pf-v6-c-options-menu__toggle--PaddingBlockStart: var(--pf-v6-global--spacer--form-element);
-  --pf-v6-c-options-menu__toggle--PaddingInlineEnd: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__toggle--PaddingBlockEnd: var(--pf-v6-global--spacer--form-element);
-  --pf-v6-c-options-menu__toggle--PaddingInlineStart: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__toggle--ColumnGap: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__toggle--MinWidth: 0;
-  --pf-v6-c-options-menu__toggle--BorderWidth: var(--pf-v6-global--BorderWidth--sm);
-  --pf-v6-c-options-menu__toggle--BorderBlockStartColor: var(--pf-v6-global--BorderColor--300);
-  --pf-v6-c-options-menu__toggle--BorderInlineEndColor: var(--pf-v6-global--BorderColor--300);
-  --pf-v6-c-options-menu__toggle--BorderBlockEndColor: var(--pf-v6-global--BorderColor--200);
-  --pf-v6-c-options-menu__toggle--BorderInlineStartColor: var(--pf-v6-global--BorderColor--300);
-  --pf-v6-c-options-menu__toggle--Color: var(--pf-v6-global--Color--100);
-  --pf-v6-c-options-menu__toggle--hover--BorderBlockEndColor: var(--pf-v6-global--active-color--100);
-  --pf-v6-c-options-menu__toggle--active--BorderBlockEndWidth: var(--pf-v6-global--BorderWidth--md);
-  --pf-v6-c-options-menu__toggle--active--BorderBlockEndColor: var(--pf-v6-global--active-color--100);
-  --pf-v6-c-options-menu__toggle--focus--BorderBlockEndWidth: var(--pf-v6-global--BorderWidth--md);
-  --pf-v6-c-options-menu__toggle--focus--BorderBlockEndColor: var(--pf-v6-global--active-color--100);
-  --pf-v6-c-options-menu__toggle--expanded--BorderBlockEndWidth: var(--pf-v6-global--BorderWidth--md);
-  --pf-v6-c-options-menu__toggle--expanded--BorderBlockEndColor: var(--pf-v6-global--active-color--100);
-  --pf-v6-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-v6-global--disabled-color--300);
-  --pf-v6-c-options-menu__toggle--m-plain--Color: var(--pf-v6-global--Color--200);
-  --pf-v6-c-options-menu__toggle--m-plain--hover--Color: var(--pf-v6-global--Color--100);
-  --pf-v6-c-options-menu__toggle--m-plain--disabled--Color: var(--pf-v6-global--disabled-color--200);
-  --pf-v6-c-options-menu__toggle--m-plain--PaddingInlineEnd: var(--pf-v6-global--spacer--md);
-  --pf-v6-c-options-menu__toggle--m-plain--PaddingInlineStart: var(--pf-v6-global--spacer--md);
-  --pf-v6-c-options-menu__toggle-icon--PaddingInlineEnd: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__toggle-icon--PaddingInlineStart: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
-  --pf-v6-c-options-menu--m-plain__toggle-icon--Color: var(--pf-v6-global--Color--200);
-  --pf-v6-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-v6-global--Color--100);
-  --pf-v6-c-options-menu__toggle-button--BackgroundColor: transparent;
-  --pf-v6-c-options-menu__toggle-button--PaddingBlockStart: var(--pf-v6-global--spacer--form-element);
-  --pf-v6-c-options-menu__toggle-button--PaddingInlineEnd: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__toggle-button--PaddingBlockEnd: var(--pf-v6-global--spacer--form-element);
-  --pf-v6-c-options-menu__toggle-button--PaddingInlineStart: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__menu--BackgroundColor: var(--pf-v6-global--BackgroundColor--light-100);
-  --pf-v6-c-options-menu__menu--BoxShadow: var(--pf-v6-global--BoxShadow--md);
-  --pf-v6-c-options-menu__menu--PaddingBlockStart: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__menu--PaddingBlockEnd: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__menu--InsetBlockStart: calc(100% + var(--pf-v6-global--spacer--xs));
-  --pf-v6-c-options-menu__menu--ZIndex: var(--pf-t--global--z-index--sm);
-  --pf-v6-c-options-menu--m-top__menu--InsetBlockStart: 0;
-  --pf-v6-c-options-menu--m-top__menu--TranslateY: calc(-100% - var(--pf-v6-global--spacer--xs));
-  --pf-v6-c-options-menu__menu-item--BackgroundColor: transparent;
-  --pf-v6-c-options-menu__menu-item--Color: var(--pf-v6-global--Color--100);
-  --pf-v6-c-options-menu__menu-item--FontSize: var(--pf-v6-global--FontSize--md);
-  --pf-v6-c-options-menu__menu-item--PaddingBlockStart: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__menu-item--PaddingInlineEnd: var(--pf-v6-global--spacer--md);
-  --pf-v6-c-options-menu__menu-item--PaddingBlockEnd: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__menu-item--PaddingInlineStart: var(--pf-v6-global--spacer--md);
-  --pf-v6-c-options-menu__menu-item--disabled--Color: var(--pf-v6-global--Color--dark-200);
-  --pf-v6-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-v6-global--BackgroundColor--light-300);
-  --pf-v6-c-options-menu__menu-item--disabled--BackgroundColor: transparent;
-  --pf-v6-c-options-menu__menu-item-icon--Color: var(--pf-v6-global--active-color--100);
-  --pf-v6-c-options-menu__menu-item-icon--FontSize: var(--pf-v6-global--icon--FontSize--sm);
-  --pf-v6-c-options-menu__menu-item-icon--PaddingInlineStart: var(--pf-v6-global--spacer--lg);
-  --pf-v6-c-options-menu__group--group--PaddingBlockStart: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__group-title--PaddingBlockStart: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__group-title--PaddingInlineEnd: var(--pf-v6-c-options-menu__menu-item--PaddingInlineEnd);
-  --pf-v6-c-options-menu__group-title--PaddingBlockEnd: var(--pf-v6-c-options-menu__menu-item--PaddingBlockEnd);
-  --pf-v6-c-options-menu__group-title--PaddingInlineStart: var(--pf-v6-c-options-menu__menu-item--PaddingInlineStart);
-  --pf-v6-c-options-menu__group-title--FontSize: var(--pf-v6-global--FontSize--xs);
-  --pf-v6-c-options-menu__group-title--FontWeight: var(--pf-v6-global--FontWeight--normal);
-  --pf-v6-c-options-menu__group-title--Color: var(--pf-v6-global--Color--dark-200);
-  --pf-v6-c-options-menu--c-divider--MarginBlockStart: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu--c-divider--MarginBlockEnd: var(--pf-v6-global--spacer--sm);
-  position: relative;
-  display: inline-block;
-  max-width: 100%;
-}
-.pf-v6-c-options-menu .pf-v6-c-divider {
-  margin-block-start: var(--pf-v6-c-options-menu--c-divider--MarginBlockStart);
-  margin-block-end: var(--pf-v6-c-options-menu--c-divider--MarginBlockEnd);
-}
-.pf-v6-c-options-menu .pf-v6-c-divider:last-child {
-  --pf-v6-c-options-menu--c-divider--MarginBlockEnd: 0;
-}
-
-.pf-v6-c-options-menu__toggle:not(.pf-m-plain)::before,
-.pf-v6-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-v6-c-options-menu__toggle-button::before {
-  position: absolute;
-  inset-block-start: 0;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  content: "";
-  border: var(--pf-v6-c-options-menu__toggle--BorderWidth) solid;
-  border-block-start-color: var(--pf-v6-c-options-menu__toggle--BorderBlockStartColor);
-  border-block-end-color: var(--pf-v6-c-options-menu__toggle--BorderBlockEndColor);
-  border-inline-start-color: var(--pf-v6-c-options-menu__toggle--BorderInlineStartColor);
-  border-inline-end-color: var(--pf-v6-c-options-menu__toggle--BorderInlineEndColor);
-}
-.pf-v6-c-options-menu__toggle:not(.pf-m-plain):hover::before,
-.pf-v6-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-v6-c-options-menu__toggle-button:hover::before {
-  --pf-v6-c-options-menu__toggle--BorderBlockEndColor: var(--pf-v6-c-options-menu__toggle--hover--BorderBlockEndColor);
-}
-.pf-v6-c-options-menu__toggle:not(.pf-m-plain):active::before, .pf-v6-c-options-menu__toggle:not(.pf-m-plain).pf-m-active::before,
-.pf-v6-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-v6-c-options-menu__toggle-button:active::before,
-.pf-v6-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-v6-c-options-menu__toggle-button.pf-m-active::before {
-  --pf-v6-c-options-menu__toggle--BorderBlockEndColor: var(--pf-v6-c-options-menu__toggle--active--BorderBlockEndColor);
-  border-block-end-width: var(--pf-v6-c-options-menu__toggle--active--BorderBlockEndWidth);
-}
-.pf-v6-c-options-menu__toggle:not(.pf-m-plain):focus::before,
-.pf-v6-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-v6-c-options-menu__toggle-button:focus::before {
-  --pf-v6-c-options-menu__toggle--BorderBlockEndColor: var(--pf-v6-c-options-menu__toggle--focus--BorderBlockEndColor);
-  border-block-end-width: var(--pf-v6-c-options-menu__toggle--focus--BorderBlockEndWidth);
-}
-
-.pf-v6-c-options-menu__toggle {
-  position: relative;
-  display: flex;
-  column-gap: var(--pf-v6-c-options-menu__toggle--ColumnGap);
-  align-items: center;
-  min-width: var(--pf-v6-c-options-menu__toggle--MinWidth);
-  max-width: 100%;
-  padding-block-start: var(--pf-v6-c-options-menu__toggle--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-options-menu__toggle--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-options-menu__toggle--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-options-menu__toggle--PaddingInlineEnd);
-  color: var(--pf-v6-c-options-menu__toggle--Color);
-  background-color: var(--pf-v6-c-options-menu__toggle--BackgroundColor);
-  border: none;
-}
-.pf-v6-c-options-menu.pf-m-expanded > .pf-v6-c-options-menu__toggle::before {
-  --pf-v6-c-options-menu__toggle--BorderBlockEndColor: var(--pf-v6-c-options-menu__toggle--expanded--BorderBlockEndColor);
-  border-block-end-width: var(--pf-v6-c-options-menu__toggle--expanded--BorderBlockEndWidth);
-}
-.pf-v6-c-options-menu__toggle.pf-m-plain {
-  --pf-v6-c-options-menu__toggle-icon--Color: var(--pf-v6-c-options-menu--m-plain__toggle-icon--Color);
-}
-.pf-v6-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
-  --pf-v6-c-options-menu__toggle--PaddingInlineEnd: var(--pf-v6-c-options-menu__toggle--m-plain--PaddingInlineEnd);
-  --pf-v6-c-options-menu__toggle--PaddingInlineStart: var(--pf-v6-c-options-menu__toggle--m-plain--PaddingInlineStart);
-  display: inline-block;
-  color: var(--pf-v6-c-options-menu__toggle--m-plain--Color);
-}
-.pf-v6-c-options-menu__toggle.pf-m-plain:hover, .pf-v6-c-options-menu__toggle.pf-m-plain:active, .pf-v6-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-v6-c-options-menu__toggle.pf-m-plain:focus, .pf-v6-c-options-menu.pf-m-expanded > .pf-v6-c-options-menu__toggle.pf-m-plain {
-  --pf-v6-c-options-menu__toggle--m-plain--Color: var(--pf-v6-c-options-menu__toggle--m-plain--hover--Color);
-  --pf-v6-c-options-menu--m-plain__toggle-icon--Color: var(--pf-v6-c-options-menu--m-plain--hover__toggle-icon--Color);
-}
-.pf-v6-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-v6-c-options-menu__toggle.pf-m-plain:disabled {
-  --pf-v6-c-options-menu__toggle--m-plain--Color: var(--pf-v6-c-options-menu__toggle--m-plain--disabled--Color);
-}
-.pf-v6-c-options-menu__toggle.pf-m-disabled, .pf-v6-c-options-menu__toggle:disabled {
-  pointer-events: none;
-}
-.pf-v6-c-options-menu__toggle.pf-m-disabled:not(.pf-m-plain), .pf-v6-c-options-menu__toggle.pf-m-disabled.pf-m-text, .pf-v6-c-options-menu__toggle:disabled:not(.pf-m-plain), .pf-v6-c-options-menu__toggle:disabled.pf-m-text {
-  --pf-v6-c-options-menu__toggle--BackgroundColor: var(--pf-v6-c-options-menu__toggle--disabled--BackgroundColor);
-}
-.pf-v6-c-options-menu__toggle.pf-m-disabled::before, .pf-v6-c-options-menu__toggle:disabled::before {
-  border: 0;
-}
-
-.pf-v6-c-options-menu__toggle-button-icon {
-  position: relative;
-}
-
-.pf-v6-c-options-menu__toggle-button {
-  padding-block-start: var(--pf-v6-c-options-menu__toggle-button--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-options-menu__toggle-button--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-options-menu__toggle-button--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-options-menu__toggle-button--PaddingInlineEnd);
-  background-color: var(--pf-v6-c-options-menu__toggle-button--BackgroundColor);
-  border: 0;
-}
-
-.pf-v6-c-options-menu__toggle-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1 1 auto;
-  text-align: start;
-}
-
-.pf-v6-c-options-menu__toggle-icon,
-.pf-v6-c-options-menu__toggle-button-icon {
-  color: var(--pf-v6-c-options-menu__toggle-icon--Color, inherit);
-}
-
-.pf-v6-c-options-menu__toggle-icon {
-  padding-inline-start: var(--pf-v6-c-options-menu__toggle-icon--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-options-menu__toggle-icon--PaddingInlineEnd);
-}
-.pf-v6-c-options-menu.pf-m-top.pf-m-expanded .pf-v6-c-options-menu__toggle-icon {
-  transform: rotate(var(--pf-v6-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));
-}
-
-.pf-v6-c-options-menu__menu {
-  position: absolute;
-  inset-block-start: var(--pf-v6-c-options-menu__menu--InsetBlockStart);
-  z-index: var(--pf-v6-c-options-menu__menu--ZIndex);
-  min-width: 100%;
-  padding-block-start: var(--pf-v6-c-options-menu__menu--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-options-menu__menu--PaddingBlockEnd);
-  background-color: var(--pf-v6-c-options-menu__menu--BackgroundColor);
-  background-clip: padding-box;
-  box-shadow: var(--pf-v6-c-options-menu__menu--BoxShadow);
-}
-.pf-v6-c-options-menu__menu.pf-m-align-right {
-  inset-inline-end: 0;
-}
-.pf-v6-c-options-menu.pf-m-top .pf-v6-c-options-menu__menu {
-  --pf-v6-c-options-menu__menu--InsetBlockStart: var(--pf-v6-c-options-menu--m-top__menu--InsetBlockStart);
-  transform: translateY(var(--pf-v6-c-options-menu--m-top__menu--TranslateY));
-}
-.pf-v6-c-options-menu__menu.pf-m-static {
-  --pf-v6-c-options-menu--m-top__menu--TranslateY: 0;
-  position: static;
-  inset-block-start: auto;
-  inset-block-end: auto;
-  inset-inline-start: auto;
-  inset-inline-end: auto;
-  z-index: auto;
-  min-width: min-content;
-}
-
-.pf-v6-c-options-menu__menu-item {
-  display: flex;
-  align-items: baseline;
-  width: 100%;
-  padding-block-start: var(--pf-v6-c-options-menu__menu-item--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-options-menu__menu-item--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-options-menu__menu-item--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-options-menu__menu-item--PaddingInlineEnd);
-  font-size: var(--pf-v6-c-options-menu__menu-item--FontSize);
-  color: var(--pf-v6-c-options-menu__menu-item--Color);
-  white-space: nowrap;
-  background-color: var(--pf-v6-c-options-menu__menu-item--BackgroundColor);
-  border: none;
-}
-.pf-v6-c-options-menu__menu-item:hover, .pf-v6-c-options-menu__menu-item:focus {
-  text-decoration: none;
-  background-color: var(--pf-v6-c-options-menu__menu-item--hover--BackgroundColor);
-}
-.pf-v6-c-options-menu__menu-item:disabled, .pf-v6-c-options-menu__menu-item.pf-m-disabled {
-  color: var(--pf-v6-c-options-menu__menu-item--disabled--Color);
-  pointer-events: none;
-  background-color: var(--pf-v6-c-options-menu__menu-item--disabled--BackgroundColor);
-}
-
-.pf-v6-c-options-menu__menu-item-icon {
-  align-self: center;
-  width: auto;
-  padding-inline-start: var(--pf-v6-c-options-menu__menu-item-icon--PaddingInlineStart);
-  margin-inline-start: auto;
-  font-size: var(--pf-v6-c-options-menu__menu-item-icon--FontSize);
-  color: var(--pf-v6-c-options-menu__menu-item-icon--Color);
-}
-
-.pf-v6-c-options-menu__group + .pf-v6-c-options-menu__group {
-  padding-block-start: var(--pf-v6-c-options-menu__group--group--PaddingBlockStart);
-}
-
-.pf-v6-c-options-menu__group-title {
-  padding-block-start: var(--pf-v6-c-options-menu__group-title--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-options-menu__group-title--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-options-menu__group-title--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-options-menu__group-title--PaddingInlineEnd);
-  font-size: var(--pf-v6-c-options-menu__group-title--FontSize);
-  font-weight: var(--pf-v6-c-options-menu__group-title--FontWeight);
-  color: var(--pf-v6-c-options-menu__group-title--Color);
-}

package/components/OptionsMenu/options-menu.scss

@@ -1,325 +0,0 @@
-@use '../../sass-utilities' as *;
-
-.#{$options-menu} {
-  // Toggle
-  --#{$options-menu}__toggle--BackgroundColor: transparent;
-  --#{$options-menu}__toggle--PaddingBlockStart: var(--#{$pf-global}--spacer--form-element);
-  --#{$options-menu}__toggle--PaddingInlineEnd: var(--#{$pf-global}--spacer--sm);
-  --#{$options-menu}__toggle--PaddingBlockEnd: var(--#{$pf-global}--spacer--form-element);
-  --#{$options-menu}__toggle--PaddingInlineStart: var(--#{$pf-global}--spacer--sm);
-  --#{$options-menu}__toggle--ColumnGap: var(--#{$pf-global}--spacer--sm);
-  --#{$options-menu}__toggle--MinWidth: 0;
-  --#{$options-menu}__toggle--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$options-menu}__toggle--BorderBlockStartColor: var(--#{$pf-global}--BorderColor--300);
-  --#{$options-menu}__toggle--BorderInlineEndColor: var(--#{$pf-global}--BorderColor--300);
-  --#{$options-menu}__toggle--BorderBlockEndColor: var(--#{$pf-global}--BorderColor--200);
-  --#{$options-menu}__toggle--BorderInlineStartColor: var(--#{$pf-global}--BorderColor--300);
-  --#{$options-menu}__toggle--Color: var(--#{$pf-global}--Color--100);
-  --#{$options-menu}__toggle--hover--BorderBlockEndColor: var(--#{$pf-global}--active-color--100);
-  --#{$options-menu}__toggle--active--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$options-menu}__toggle--active--BorderBlockEndColor: var(--#{$pf-global}--active-color--100);
-  --#{$options-menu}__toggle--focus--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$options-menu}__toggle--focus--BorderBlockEndColor: var(--#{$pf-global}--active-color--100);
-  --#{$options-menu}__toggle--expanded--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--md);
-  --#{$options-menu}__toggle--expanded--BorderBlockEndColor: var(--#{$pf-global}--active-color--100);
-  --#{$options-menu}__toggle--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
-  --#{$options-menu}__toggle--m-plain--Color: var(--#{$pf-global}--Color--200);
-  --#{$options-menu}__toggle--m-plain--hover--Color: var(--#{$pf-global}--Color--100);
-  --#{$options-menu}__toggle--m-plain--disabled--Color: var(--#{$pf-global}--disabled-color--200);
-  --#{$options-menu}__toggle--m-plain--PaddingInlineEnd: var(--#{$pf-global}--spacer--md);
-  --#{$options-menu}__toggle--m-plain--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
-
-  // Toggle arrow
-  --#{$options-menu}__toggle-icon--PaddingInlineEnd: var(--#{$pf-global}--spacer--sm);
-  --#{$options-menu}__toggle-icon--PaddingInlineStart: var(--#{$pf-global}--spacer--sm);
-  --#{$options-menu}--m-top--m-expanded__toggle-icon--Rotate: 180deg;
-  --#{$options-menu}--m-plain__toggle-icon--Color: var(--#{$pf-global}--Color--200);
-  --#{$options-menu}--m-plain--hover__toggle-icon--Color: var(--#{$pf-global}--Color--100);
-
-  // Text toggle button
-  --#{$options-menu}__toggle-button--BackgroundColor: transparent;
-  --#{$options-menu}__toggle-button--PaddingBlockStart: var(--#{$pf-global}--spacer--form-element);
-  --#{$options-menu}__toggle-button--PaddingInlineEnd: var(--#{$pf-global}--spacer--sm);
-  --#{$options-menu}__toggle-button--PaddingBlockEnd: var(--#{$pf-global}--spacer--form-element);
-  --#{$options-menu}__toggle-button--PaddingInlineStart: var(--#{$pf-global}--spacer--sm);
-
-  // Menu
-  --#{$options-menu}__menu--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
-  --#{$options-menu}__menu--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
-  --#{$options-menu}__menu--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
-  --#{$options-menu}__menu--PaddingBlockEnd: var(--#{$pf-global}--spacer--sm);
-  --#{$options-menu}__menu--InsetBlockStart: calc(100% + var(--#{$pf-global}--spacer--xs));
-  --#{$options-menu}__menu--ZIndex: var(--pf-t--global--z-index--sm);
-  --#{$options-menu}--m-top__menu--InsetBlockStart: 0;
-  --#{$options-menu}--m-top__menu--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 item
-  --#{$options-menu}__menu-item--BackgroundColor: transparent;
-  --#{$options-menu}__menu-item--Color: var(--#{$pf-global}--Color--100);
-  --#{$options-menu}__menu-item--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$options-menu}__menu-item--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
-  --#{$options-menu}__menu-item--PaddingInlineEnd: var(--#{$pf-global}--spacer--md);
-  --#{$options-menu}__menu-item--PaddingBlockEnd: var(--#{$pf-global}--spacer--sm);
-  --#{$options-menu}__menu-item--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
-  --#{$options-menu}__menu-item--disabled--Color: var(--#{$pf-global}--Color--dark-200);
-  --#{$options-menu}__menu-item--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
-  --#{$options-menu}__menu-item--disabled--BackgroundColor: transparent;
-
-  // Menu item icon
-  --#{$options-menu}__menu-item-icon--Color: var(--#{$pf-global}--active-color--100);
-  --#{$options-menu}__menu-item-icon--FontSize: var(--#{$pf-global}--icon--FontSize--sm);
-  --#{$options-menu}__menu-item-icon--PaddingInlineStart: var(--#{$pf-global}--spacer--lg);
-
-  // Groups
-  --#{$options-menu}__group--group--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
-  --#{$options-menu}__group-title--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
-  --#{$options-menu}__group-title--PaddingInlineEnd: var(--#{$options-menu}__menu-item--PaddingInlineEnd);
-  --#{$options-menu}__group-title--PaddingBlockEnd: var(--#{$options-menu}__menu-item--PaddingBlockEnd);
-  --#{$options-menu}__group-title--PaddingInlineStart: var(--#{$options-menu}__menu-item--PaddingInlineStart);
-  --#{$options-menu}__group-title--FontSize: var(--#{$pf-global}--FontSize--xs);
-  --#{$options-menu}__group-title--FontWeight: var(--#{$pf-global}--FontWeight--normal);
-  --#{$options-menu}__group-title--Color: var(--#{$pf-global}--Color--dark-200);
-
-  // Divider
-  --#{$options-menu}--c-divider--MarginBlockStart: var(--#{$pf-global}--spacer--sm);
-  --#{$options-menu}--c-divider--MarginBlockEnd: var(--#{$pf-global}--spacer--sm);
-
-  position: relative;
-  display: inline-block;
-  max-width: 100%;
-
-  .#{$divider} {
-    margin-block-start: var(--#{$options-menu}--c-divider--MarginBlockStart);
-    margin-block-end: var(--#{$options-menu}--c-divider--MarginBlockEnd);
-
-    // Support divider as last item in group to separate groups
-    &:last-child {
-      --#{$options-menu}--c-divider--MarginBlockEnd: 0;
-    }
-  }
-}
-
-.#{$options-menu}__toggle:not(.pf-m-plain),
-.#{$options-menu}.pf-m-text:not(.pf-m-plain) .#{$options-menu}__toggle-button {
-  &::before {
-    position: absolute;
-    inset-block-start: 0;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
-    content: "";
-    border: var(--#{$options-menu}__toggle--BorderWidth) solid;
-    border-block-start-color: var(--#{$options-menu}__toggle--BorderBlockStartColor);
-    border-block-end-color: var(--#{$options-menu}__toggle--BorderBlockEndColor);
-    border-inline-start-color: var(--#{$options-menu}__toggle--BorderInlineStartColor);
-    border-inline-end-color: var(--#{$options-menu}__toggle--BorderInlineEndColor);
-  }
-
-  &:hover {
-    &::before {
-      --#{$options-menu}__toggle--BorderBlockEndColor: var(--#{$options-menu}__toggle--hover--BorderBlockEndColor);
-    }
-  }
-
-  &:active,
-  &.pf-m-active {
-    &::before {
-      --#{$options-menu}__toggle--BorderBlockEndColor: var(--#{$options-menu}__toggle--active--BorderBlockEndColor);
-
-      border-block-end-width: var(--#{$options-menu}__toggle--active--BorderBlockEndWidth);
-    }
-  }
-
-  &:focus {
-    &::before {
-      --#{$options-menu}__toggle--BorderBlockEndColor: var(--#{$options-menu}__toggle--focus--BorderBlockEndColor);
-
-      border-block-end-width: var(--#{$options-menu}__toggle--focus--BorderBlockEndWidth);
-    }
-  }
-}
-
-.#{$options-menu}__toggle {
-  position: relative;
-  display: flex;
-  column-gap: var(--#{$options-menu}__toggle--ColumnGap);
-  align-items: center;
-  min-width: var(--#{$options-menu}__toggle--MinWidth);
-  max-width: 100%;
-  padding-block-start: var(--#{$options-menu}__toggle--PaddingBlockStart);
-  padding-block-end: var(--#{$options-menu}__toggle--PaddingBlockEnd);
-  padding-inline-start: var(--#{$options-menu}__toggle--PaddingInlineStart);
-  padding-inline-end: var(--#{$options-menu}__toggle--PaddingInlineEnd);
-  color: var(--#{$options-menu}__toggle--Color);
-  background-color: var(--#{$options-menu}__toggle--BackgroundColor);
-  border: none;
-
-  .#{$options-menu}.pf-m-expanded > & {
-    &::before {
-      --#{$options-menu}__toggle--BorderBlockEndColor: var(--#{$options-menu}__toggle--expanded--BorderBlockEndColor);
-
-      border-block-end-width: var(--#{$options-menu}__toggle--expanded--BorderBlockEndWidth);
-    }
-  }
-
-  &.pf-m-plain {
-    --#{$options-menu}__toggle-icon--Color: var(--#{$options-menu}--m-plain__toggle-icon--Color);
-
-    &:not(.pf-m-text) {
-      --#{$options-menu}__toggle--PaddingInlineEnd: var(--#{$options-menu}__toggle--m-plain--PaddingInlineEnd);
-      --#{$options-menu}__toggle--PaddingInlineStart: var(--#{$options-menu}__toggle--m-plain--PaddingInlineStart);
-
-      display: inline-block;
-      color: var(--#{$options-menu}__toggle--m-plain--Color);
-    }
-
-    &:hover,
-    &:active,
-    &.pf-m-active,
-    &:focus,
-    .#{$options-menu}.pf-m-expanded > & {
-      --#{$options-menu}__toggle--m-plain--Color: var(--#{$options-menu}__toggle--m-plain--hover--Color);
-      --#{$options-menu}--m-plain__toggle-icon--Color: var(--#{$options-menu}--m-plain--hover__toggle-icon--Color);
-    }
-
-    &.pf-m-disabled,
-    &:disabled {
-      --#{$options-menu}__toggle--m-plain--Color: var(--#{$options-menu}__toggle--m-plain--disabled--Color);
-    }
-  }
-
-  &.pf-m-disabled,
-  &:disabled {
-    pointer-events: none;
-
-    &:not(.pf-m-plain),
-    &.pf-m-text {
-      --#{$options-menu}__toggle--BackgroundColor: var(--#{$options-menu}__toggle--disabled--BackgroundColor);
-    }
-
-    &::before {
-      border: 0;
-    }
-  }
-}
-
-.#{$options-menu}__toggle-button-icon {
-  position: relative;
-}
-
-.#{$options-menu}__toggle-button {
-  padding-block-start: var(--#{$options-menu}__toggle-button--PaddingBlockStart);
-  padding-block-end: var(--#{$options-menu}__toggle-button--PaddingBlockEnd);
-  padding-inline-start: var(--#{$options-menu}__toggle-button--PaddingInlineStart);
-  padding-inline-end: var(--#{$options-menu}__toggle-button--PaddingInlineEnd);
-  background-color: var(--#{$options-menu}__toggle-button--BackgroundColor);
-  border: 0;
-}
-
-.#{$options-menu}__toggle-text {
-  @include pf-v6-text-overflow;
-
-  flex: 1 1 auto;
-  text-align: start;
-}
-
-.#{$options-menu}__toggle-icon,
-.#{$options-menu}__toggle-button-icon {
-  color: var(--#{$options-menu}__toggle-icon--Color, inherit);
-}
-
-.#{$options-menu}__toggle-icon {
-  padding-inline-start: var(--#{$options-menu}__toggle-icon--PaddingInlineStart);
-  padding-inline-end: var(--#{$options-menu}__toggle-icon--PaddingInlineEnd);
-
-  .#{$options-menu}.pf-m-top.pf-m-expanded & {
-    transform: rotate(var(--#{$options-menu}--m-top--m-expanded__toggle-icon--Rotate));
-  }
-}
-
-.#{$options-menu}__menu {
-  position: absolute;
- inset-block-start: var(--#{$options-menu}__menu--InsetBlockStart);
-  z-index: var(--#{$options-menu}__menu--ZIndex);
-  min-width: 100%;
-  padding-block-start: var(--#{$options-menu}__menu--PaddingBlockStart);
-  padding-block-end: var(--#{$options-menu}__menu--PaddingBlockEnd);
-  background-color: var(--#{$options-menu}__menu--BackgroundColor);
-  background-clip: padding-box;
-  box-shadow: var(--#{$options-menu}__menu--BoxShadow);
-
-  &.pf-m-align-right {
-   inset-inline-end: 0;
-  }
-
-  .#{$options-menu}.pf-m-top & {
-    --#{$options-menu}__menu--InsetBlockStart: var(--#{$options-menu}--m-top__menu--InsetBlockStart);
-
-    transform: translateY(var(--#{$options-menu}--m-top__menu--TranslateY));
-  }
-
-  &.pf-m-static {
-    --#{$options-menu}--m-top__menu--TranslateY: 0;
-
-    position: static;
-    inset-block-start: auto;
-    inset-block-end: auto;
-    inset-inline-start: auto;
-    inset-inline-end: auto;
-    z-index: auto;
-    min-width: min-content;
-  }
-}
-
-.#{$options-menu}__menu-item {
-  display: flex;
-  align-items: baseline;
-  width: 100%;
-  padding-block-start: var(--#{$options-menu}__menu-item--PaddingBlockStart);
-  padding-block-end: var(--#{$options-menu}__menu-item--PaddingBlockEnd);
-  padding-inline-start: var(--#{$options-menu}__menu-item--PaddingInlineStart);
-  padding-inline-end: var(--#{$options-menu}__menu-item--PaddingInlineEnd);
-  font-size: var(--#{$options-menu}__menu-item--FontSize);
-  color: var(--#{$options-menu}__menu-item--Color);
-  white-space: nowrap;
-  background-color: var(--#{$options-menu}__menu-item--BackgroundColor);
-  border: none;
-
-  &:hover,
-  &:focus {
-    text-decoration: none;
-    background-color: var(--#{$options-menu}__menu-item--hover--BackgroundColor);
-  }
-
-  &:disabled,
-  &.pf-m-disabled {
-    color: var(--#{$options-menu}__menu-item--disabled--Color);
-    pointer-events: none;
-    background-color: var(--#{$options-menu}__menu-item--disabled--BackgroundColor);
-  }
-}
-
-.#{$options-menu}__menu-item-icon {
-  align-self: center;
-  width: auto; // this allows the padding to apply when this class is used with an svg element
-  padding-inline-start: var(--#{$options-menu}__menu-item-icon--PaddingInlineStart);
-  margin-inline-start: auto;
-  font-size: var(--#{$options-menu}__menu-item-icon--FontSize);
-  color: var(--#{$options-menu}__menu-item-icon--Color);
-}
-
-.#{$options-menu}__group {
-  & + & {
-    padding-block-start: var(--#{$options-menu}__group--group--PaddingBlockStart);
-  }
-}
-
-.#{$options-menu}__group-title {
-  padding-block-start: var(--#{$options-menu}__group-title--PaddingBlockStart);
-  padding-block-end: var(--#{$options-menu}__group-title--PaddingBlockEnd);
-  padding-inline-start: var(--#{$options-menu}__group-title--PaddingInlineStart);
-  padding-inline-end: var(--#{$options-menu}__group-title--PaddingInlineEnd);
-  font-size: var(--#{$options-menu}__group-title--FontSize);
-  font-weight: var(--#{$options-menu}__group-title--FontWeight);
-  color: var(--#{$options-menu}__group-title--Color);
-}