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

package/sass-utilities/namespaces-components.scss

@@ -18,9 +18,6 @@ $alert: #{$pf-prefix} + 'c-alert';
 // Alert Group
 $alert-group: #{$pf-prefix} + 'c-alert-group';
 
-// App Launcher
-$app-launcher: #{$pf-prefix} + 'c-app-launcher';
-
 // Avatar
 $avatar: #{$pf-prefix} + 'c-avatar';
 
@@ -75,9 +72,6 @@ $code-editor: #{$pf-prefix} + 'c-code-editor';
 // Content
 $content: #{$pf-prefix} + 'c-content';
 
-// Context Selector
-$context-selector: #{$pf-prefix} + 'c-context-selector';
-
 // Data List
 $data-list: #{$pf-prefix} + 'c-data-list';
 
@@ -98,9 +92,6 @@ $droppable: #{$pf-prefix} + 'c-droppable';
 // Drawer
 $drawer: #{$pf-prefix} + 'c-drawer';
 
-// Dropdown
-$dropdown: #{$pf-prefix} + 'c-dropdown';
-
 // Dual List Selector
 $dual-list-selector: #{$pf-prefix} + 'c-dual-list-selector';
 
@@ -179,9 +170,6 @@ $notification-drawer: #{$pf-prefix} + 'c-notification-drawer';
 // Number Input
 $number-input: #{$pf-prefix} + 'c-number-input';
 
-// Options Menu
-$options-menu: #{$pf-prefix} + 'c-options-menu';
-
 // Overflow Menu
 $overflow-menu: #{$pf-prefix} + 'c-overflow-menu';
 
@@ -206,9 +194,6 @@ $progress-stepper: #{$pf-prefix} + 'c-progress-stepper';
 // Radio
 $radio: #{$pf-prefix} + 'c-radio';
 
-// Select
-$select: #{$pf-prefix} + 'c-select';
-
 // Sidebar
 $sidebar: #{$pf-prefix} + 'c-sidebar';
 

package/sass-utilities/scss-variables.scss

@@ -27,6 +27,7 @@ $fa-font-path: "./assets/fonts/webfonts" !default;
 $pf-v6-global--fonticon-path: "./assets/pficon" !default;
 
 // Grid breakpoints
+// Note that these duplicate and should match breakpoint tokens
 $pf-v6-global--breakpoint--xs: 0 !default;
 $pf-v6-global--breakpoint--sm: 576px !default;
 $pf-v6-global--breakpoint--md: 768px !default;

package/components/AppLauncher/app-launcher.css

@@ -1,234 +0,0 @@
-.pf-v6-c-app-launcher {
-  --pf-v6-c-app-launcher__menu--BackgroundColor: var(--pf-v6-global--BackgroundColor--light-100);
-  --pf-v6-c-app-launcher__menu--BoxShadow: var(--pf-v6-global--BoxShadow--md);
-  --pf-v6-c-app-launcher__menu--PaddingBlockStart: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-app-launcher__menu--PaddingBlockEnd: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-app-launcher__menu--InsetBlockStart: calc(100% + var(--pf-v6-global--spacer--xs));
-  --pf-v6-c-app-launcher__menu--ZIndex: var(--pf-t--global--z-index--sm);
-  --pf-v6-c-app-launcher--m-top__menu--InsetBlockStart: 0;
-  --pf-v6-c-app-launcher--m-top__menu--TranslateY: calc(-100% - var(--pf-v6-global--spacer--xs));
-  --pf-v6-c-app-launcher__toggle--PaddingBlockStart: var(--pf-v6-global--spacer--form-element);
-  --pf-v6-c-app-launcher__toggle--PaddingInlineEnd: var(--pf-v6-global--spacer--md);
-  --pf-v6-c-app-launcher__toggle--PaddingBlockEnd: var(--pf-v6-global--spacer--form-element);
-  --pf-v6-c-app-launcher__toggle--PaddingInlineStart: var(--pf-v6-global--spacer--md);
-  --pf-v6-c-app-launcher__toggle--Color: var(--pf-v6-global--Color--200);
-  --pf-v6-c-app-launcher__toggle--hover--Color: var(--pf-v6-global--Color--100);
-  --pf-v6-c-app-launcher__toggle--active--Color: var(--pf-v6-global--Color--100);
-  --pf-v6-c-app-launcher__toggle--focus--Color: var(--pf-v6-global--Color--100);
-  --pf-v6-c-app-launcher__toggle--disabled--Color: var(--pf-v6-global--disabled-color--200);
-  --pf-v6-c-app-launcher__toggle--m-expanded--Color: var(--pf-v6-global--Color--100);
-  --pf-v6-c-app-launcher__toggle--BackgroundColor: transparent;
-  --pf-v6-c-app-launcher__menu-search--PaddingBlockStart: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-app-launcher__menu-search--PaddingInlineEnd: var(--pf-v6-global--spacer--md);
-  --pf-v6-c-app-launcher__menu-search--PaddingBlockEnd: var(--pf-v6-global--spacer--md);
-  --pf-v6-c-app-launcher__menu-search--PaddingInlineStart: var(--pf-v6-global--spacer--md);
-  --pf-v6-c-app-launcher__menu-search--BorderBlockEndColor: var(--pf-v6-global--BorderColor--100);
-  --pf-v6-c-app-launcher__menu-search--BorderBlockEndWidth: var(--pf-v6-global--BorderWidth--sm);
-  --pf-v6-c-app-launcher__menu-search--MarginBlockEnd: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-app-launcher__menu-item--PaddingBlockStart: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-app-launcher__menu-item--PaddingInlineEnd: var(--pf-v6-global--spacer--md);
-  --pf-v6-c-app-launcher__menu-item--PaddingBlockEnd: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-app-launcher__menu-item--PaddingInlineStart: var(--pf-v6-global--spacer--md);
-  --pf-v6-c-app-launcher__menu-item--Color: var(--pf-v6-global--Color--dark-100);
-  --pf-v6-c-app-launcher__menu-item--FontWeight: var(--pf-v6-global--FontWeight--normal);
-  --pf-v6-c-app-launcher__menu-item--Width: 100%;
-  --pf-v6-c-app-launcher__menu-item--disabled--Color: var(--pf-v6-global--Color--dark-200);
-  --pf-v6-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-v6-global--BackgroundColor--light-300);
-  --pf-v6-c-app-launcher__menu-item--m-link--PaddingInlineEnd: 0;
-  --pf-v6-c-app-launcher__menu-item--m-link--hover--BackgroundColor: transparent;
-  --pf-v6-c-app-launcher__menu-item--m-action--Color: var(--pf-v6-global--Color--200);
-  --pf-v6-c-app-launcher__menu-item--m-action--Width: auto;
-  --pf-v6-c-app-launcher__menu-item--m-action--FontSize: var(--pf-v6-global--icon--FontSize--sm);
-  --pf-v6-c-app-launcher__menu-item--m-action--hover--BackgroundColor: transparent;
-  --pf-v6-c-app-launcher__menu-item--hover__menu-item--m-action--Color: var(--pf-v6-global--Color--200);
-  --pf-v6-c-app-launcher__menu-item--m-action--hover--Color: var(--pf-v6-global--Color--100);
-  --pf-v6-c-app-launcher__menu-item--m-action--disabled--Color: var(--pf-v6-global--disabled-color--200);
-  --pf-v6-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-v6-global--palette--gold-400);
-  --pf-v6-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-v6-global--palette--gold-500);
-  --pf-v6-c-app-launcher__menu-item-icon--MarginInlineEnd: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-app-launcher__menu-item-icon--Width: var(--pf-v6-global--icon--FontSize--lg);
-  --pf-v6-c-app-launcher__menu-item-icon--Height: var(--pf-v6-global--icon--FontSize--lg);
-  --pf-v6-c-app-launcher__menu-item-external-icon--Color: var(--pf-v6-global--link--Color);
-  --pf-v6-c-app-launcher__menu-item-external-icon--PaddingInlineStart: var(--pf-v6-global--spacer--md);
-  --pf-v6-c-app-launcher__menu-item-external-icon--TranslateY: -0.0625rem;
-  --pf-v6-c-app-launcher__menu-item-external-icon--FontSize: var(--pf-v6-global--icon--FontSize--sm);
-  --pf-v6-c-app-launcher__group--group--PaddingBlockStart: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-app-launcher__group-title--PaddingBlockStart: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-app-launcher__group-title--PaddingInlineEnd: var(--pf-v6-c-app-launcher__menu-item--PaddingInlineEnd);
-  --pf-v6-c-app-launcher__group-title--PaddingBlockEnd: var(--pf-v6-c-app-launcher__menu-item--PaddingBlockEnd);
-  --pf-v6-c-app-launcher__group-title--PaddingInlineStart: var(--pf-v6-c-app-launcher__menu-item--PaddingInlineStart);
-  --pf-v6-c-app-launcher__group-title--FontSize: var(--pf-v6-global--FontSize--xs);
-  --pf-v6-c-app-launcher__group-title--FontWeight: var(--pf-v6-global--FontWeight--normal);
-  --pf-v6-c-app-launcher__group-title--Color: var(--pf-v6-global--Color--dark-200);
-  --pf-v6-c-app-launcher--c-divider--MarginBlockStart: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-app-launcher--c-divider--MarginBlockEnd: var(--pf-v6-global--spacer--sm);
-  position: relative;
-  display: inline-block;
-  max-width: 100%;
-}
-.pf-v6-c-app-launcher.pf-m-expanded > .pf-v6-c-app-launcher__toggle {
-  color: var(--pf-v6-c-app-launcher__toggle--m-expanded--Color);
-}
-.pf-v6-c-app-launcher .pf-v6-c-divider {
-  margin-block-start: var(--pf-v6-c-app-launcher--c-divider--MarginBlockStart);
-  margin-block-end: var(--pf-v6-c-app-launcher--c-divider--MarginBlockEnd);
-}
-.pf-v6-c-app-launcher .pf-v6-c-divider:last-child {
-  --pf-v6-c-app-launcher--c-divider--MarginBlockEnd: 0;
-}
-
-.pf-v6-c-app-launcher__toggle {
-  padding-block-start: var(--pf-v6-c-app-launcher__toggle--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-app-launcher__toggle--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-app-launcher__toggle--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-app-launcher__toggle--PaddingInlineEnd);
-  color: var(--pf-v6-c-app-launcher__toggle--Color);
-  background-color: var(--pf-v6-c-app-launcher__toggle--BackgroundColor);
-  border: none;
-}
-.pf-v6-c-app-launcher__toggle:hover {
-  --pf-v6-c-app-launcher__toggle--Color: var(--pf-v6-c-app-launcher__toggle--hover--Color);
-}
-.pf-v6-c-app-launcher__toggle:active, .pf-v6-c-app-launcher__toggle.pf-m-active {
-  --pf-v6-c-app-launcher__toggle--Color: var(--pf-v6-c-app-launcher__toggle--active--Color);
-}
-.pf-v6-c-app-launcher__toggle:focus {
-  --pf-v6-c-app-launcher__toggle--Color: var(--pf-v6-c-app-launcher__toggle--focus--Color);
-}
-.pf-v6-c-app-launcher__toggle:disabled {
-  --pf-v6-c-app-launcher__toggle--Color: var(--pf-v6-c-app-launcher__toggle--disabled--Color);
-  pointer-events: none;
-}
-
-.pf-v6-c-app-launcher__menu {
-  position: absolute;
-  inset-block-start: var(--pf-v6-c-app-launcher__menu--InsetBlockStart);
-  z-index: var(--pf-v6-c-app-launcher__menu--ZIndex);
-  min-width: 100%;
-  padding-block-start: var(--pf-v6-c-app-launcher__menu--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-app-launcher__menu--PaddingBlockEnd);
-  background-color: var(--pf-v6-c-app-launcher__menu--BackgroundColor);
-  background-clip: padding-box;
-  box-shadow: var(--pf-v6-c-app-launcher__menu--BoxShadow);
-}
-.pf-v6-c-app-launcher__menu.pf-m-align-right {
-  inset-inline-end: 0;
-}
-.pf-v6-c-app-launcher.pf-m-top .pf-v6-c-app-launcher__menu {
-  --pf-v6-c-app-launcher__menu--InsetBlockStart: var(--pf-v6-c-app-launcher--m-top__menu--InsetBlockStart);
-  transform: translateY(var(--pf-v6-c-app-launcher--m-top__menu--TranslateY));
-}
-.pf-v6-c-app-launcher__menu.pf-m-static {
-  --pf-v6-c-app-launcher--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-app-launcher__menu-search {
-  padding-block-start: var(--pf-v6-c-app-launcher__menu-search--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-app-launcher__menu-search--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-app-launcher__menu-search--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-app-launcher__menu-search--PaddingInlineEnd);
-  margin-block-end: var(--pf-v6-c-app-launcher__menu-search--MarginBlockEnd);
-  border-block-end: var(--pf-v6-c-app-launcher__menu-search--BorderBlockEndWidth) solid var(--pf-v6-c-app-launcher__menu-search--BorderBlockEndColor);
-}
-
-.pf-v6-c-app-launcher__menu-wrapper {
-  display: flex;
-}
-.pf-v6-c-app-launcher__menu-wrapper.pf-m-favorite {
-  --pf-v6-c-app-launcher__menu-item--m-action--Color: var(--pf-v6-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color);
-  --pf-v6-c-app-launcher__menu-item--m-action--hover--Color: var(--pf-v6-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color);
-}
-
-.pf-v6-c-app-launcher__menu-item {
-  display: flex;
-  align-items: center;
-  width: var(--pf-v6-c-app-launcher__menu-item--Width);
-  padding-block-start: var(--pf-v6-c-app-launcher__menu-item--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-app-launcher__menu-item--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-app-launcher__menu-item--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-app-launcher__menu-item--PaddingInlineEnd);
-  font-weight: var(--pf-v6-c-app-launcher__menu-item--FontWeight);
-  color: var(--pf-v6-c-app-launcher__menu-item--Color);
-  white-space: nowrap;
-  background: none;
-  border: 0;
-}
-.pf-v6-c-app-launcher__menu-item:hover, .pf-v6-c-app-launcher__menu-item:focus {
-  --pf-v6-c-app-launcher__menu-item--m-action--Color: var(--pf-v6-c-app-launcher__menu-item--hover__menu-item--m-action--Color);
-  text-decoration: none;
-}
-.pf-v6-c-app-launcher__menu-wrapper:hover,
-.pf-v6-c-app-launcher__menu-wrapper:focus-within,
-.pf-v6-c-app-launcher__menu-wrapper.pf-m-focus, .pf-v6-c-app-launcher__menu-item:hover, .pf-v6-c-app-launcher__menu-item:focus {
-  background-color: var(--pf-v6-c-app-launcher__menu-item--hover--BackgroundColor);
-}
-
-.pf-v6-c-app-launcher__menu-item:disabled, .pf-v6-c-app-launcher__menu-item.pf-m-disabled {
-  --pf-v6-c-app-launcher__menu-item--Color: var(--pf-v6-c-app-launcher__menu-item--disabled--Color);
-  --pf-v6-c-app-launcher__menu-item--m-action--Color: var(--pf-v6-c-app-launcher__menu-item--m-action--disabled--Color);
-  pointer-events: none;
-}
-.pf-v6-c-app-launcher__menu-wrapper:disabled, .pf-v6-c-app-launcher__menu-wrapper.pf-m-disabled, .pf-v6-c-app-launcher__menu-item:disabled, .pf-v6-c-app-launcher__menu-item.pf-m-disabled {
-  background-color: transparent;
-}
-
-.pf-v6-c-app-launcher__menu-wrapper.pf-m-external:hover .pf-v6-c-app-launcher__menu-item-external-icon, .pf-v6-c-app-launcher__menu-wrapper.pf-m-external:focus .pf-v6-c-app-launcher__menu-item-external-icon, .pf-v6-c-app-launcher__menu-item.pf-m-external:hover .pf-v6-c-app-launcher__menu-item-external-icon, .pf-v6-c-app-launcher__menu-item.pf-m-external:focus .pf-v6-c-app-launcher__menu-item-external-icon {
-  opacity: 1;
-}
-
-.pf-v6-c-app-launcher__menu-item.pf-m-link {
-  --pf-v6-c-app-launcher__menu-item--PaddingInlineEnd: var(--pf-v6-c-app-launcher__menu-item--m-link--PaddingInlineEnd);
-  --pf-v6-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-v6-c-app-launcher__menu-item--m-link--hover--BackgroundColor);
-}
-.pf-v6-c-app-launcher__menu-item.pf-m-action {
-  --pf-v6-c-app-launcher__menu-item--Color: var(--pf-v6-c-app-launcher__menu-item--m-action--Color);
-  --pf-v6-c-app-launcher__menu-item--Width: var(--pf-v6-c-app-launcher__menu-item--m-action--Width);
-  --pf-v6-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-v6-c-app-launcher__menu-item--m-action--hover--BackgroundColor);
-  font-size: var(--pf-v6-c-app-launcher__menu-item--m-action--FontSize);
-}
-.pf-v6-c-app-launcher__menu-item.pf-m-action:hover, .pf-v6-c-app-launcher__menu-item.pf-m-action:focus {
-  --pf-v6-c-app-launcher__menu-item--m-action--Color: var(--pf-v6-c-app-launcher__menu-item--m-action--hover--Color);
-}
-
-.pf-v6-c-app-launcher__menu-item-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--pf-v6-c-app-launcher__menu-item-icon--Width);
-  height: var(--pf-v6-c-app-launcher__menu-item-icon--Height);
-  margin-inline-end: var(--pf-v6-c-app-launcher__menu-item-icon--MarginInlineEnd);
-}
-.pf-v6-c-app-launcher__menu-item-icon > * {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.pf-v6-c-app-launcher__menu-item-external-icon {
-  padding-inline-start: var(--pf-v6-c-app-launcher__menu-item-external-icon--PaddingInlineStart);
-  margin-inline-start: auto;
-  font-size: var(--pf-v6-c-app-launcher__menu-item-external-icon--FontSize);
-  color: var(--pf-v6-c-app-launcher__menu-item-external-icon--Color);
-  opacity: 0;
-  transform: translateY(var(--pf-v6-c-app-launcher__menu-item-external-icon--TranslateY));
-}
-
-.pf-v6-c-app-launcher__group + .pf-v6-c-app-launcher__group {
-  padding-block-start: var(--pf-v6-c-app-launcher__group--group--PaddingBlockStart);
-}
-
-.pf-v6-c-app-launcher__group-title {
-  padding-block-start: var(--pf-v6-c-app-launcher__group-title--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-app-launcher__group-title--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-app-launcher__group-title--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-app-launcher__group-title--PaddingInlineEnd);
-  font-size: var(--pf-v6-c-app-launcher__group-title--FontSize);
-  font-weight: var(--pf-v6-c-app-launcher__group-title--FontWeight);
-  color: var(--pf-v6-c-app-launcher__group-title--Color);
-}

package/components/AppLauncher/app-launcher.scss

@@ -1,299 +0,0 @@
-@use '../../sass-utilities' as *;
-
-.#{$app-launcher} {
-  // Menu
-  --#{$app-launcher}__menu--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
-  --#{$app-launcher}__menu--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
-  --#{$app-launcher}__menu--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__menu--PaddingBlockEnd: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__menu--InsetBlockStart: calc(100% + var(--#{$pf-global}--spacer--xs));
-  --#{$app-launcher}__menu--ZIndex: var(--pf-t--global--z-index--sm);
-  --#{$app-launcher}--m-top__menu--InsetBlockStart: 0;
-  --#{$app-launcher}--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
-
-  // Expanded
-  --#{$app-launcher}__toggle--PaddingBlockStart: var(--#{$pf-global}--spacer--form-element);
-  --#{$app-launcher}__toggle--PaddingInlineEnd: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__toggle--PaddingBlockEnd: var(--#{$pf-global}--spacer--form-element);
-  --#{$app-launcher}__toggle--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__toggle--Color: var(--#{$pf-global}--Color--200);
-  --#{$app-launcher}__toggle--hover--Color: var(--#{$pf-global}--Color--100);
-  --#{$app-launcher}__toggle--active--Color: var(--#{$pf-global}--Color--100);
-  --#{$app-launcher}__toggle--focus--Color: var(--#{$pf-global}--Color--100);
-  --#{$app-launcher}__toggle--disabled--Color: var(--#{$pf-global}--disabled-color--200);
-  --#{$app-launcher}__toggle--m-expanded--Color: var(--#{$pf-global}--Color--100);
-  --#{$app-launcher}__toggle--BackgroundColor: transparent;
-
-  // Menu input
-  --#{$app-launcher}__menu-search--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__menu-search--PaddingInlineEnd: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__menu-search--PaddingBlockEnd: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__menu-search--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__menu-search--BorderBlockEndColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$app-launcher}__menu-search--BorderBlockEndWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$app-launcher}__menu-search--MarginBlockEnd: var(--#{$pf-global}--spacer--sm);
-
-  // Menu item
-  --#{$app-launcher}__menu-item--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__menu-item--PaddingInlineEnd: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__menu-item--PaddingBlockEnd: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__menu-item--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__menu-item--Color: var(--#{$pf-global}--Color--dark-100);
-  --#{$app-launcher}__menu-item--FontWeight: var(--#{$pf-global}--FontWeight--normal);
-  --#{$app-launcher}__menu-item--Width: 100%;
-  --#{$app-launcher}__menu-item--disabled--Color: var(--#{$pf-global}--Color--dark-200);
-  --#{$app-launcher}__menu-item--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
-  --#{$app-launcher}__menu-item--m-link--PaddingInlineEnd: 0;
-  --#{$app-launcher}__menu-item--m-link--hover--BackgroundColor: transparent;
-  --#{$app-launcher}__menu-item--m-action--Color: var(--#{$pf-global}--Color--200);
-  --#{$app-launcher}__menu-item--m-action--Width: auto;
-  --#{$app-launcher}__menu-item--m-action--FontSize: var(--#{$pf-global}--icon--FontSize--sm);
-  --#{$app-launcher}__menu-item--m-action--hover--BackgroundColor: transparent;
-  --#{$app-launcher}__menu-item--hover__menu-item--m-action--Color: var(--#{$pf-global}--Color--200); // remove at breaking change
-  --#{$app-launcher}__menu-item--m-action--hover--Color: var(--#{$pf-global}--Color--100);
-  --#{$app-launcher}__menu-item--m-action--disabled--Color: var(--#{$pf-global}--disabled-color--200);
-  --#{$app-launcher}__menu-item--m-favorite__menu-item--m-action--Color: var(--#{$pf-global}--palette--gold-400);
-  --#{$app-launcher}__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--#{$pf-global}--palette--gold-500);
-
-  // Menu item icon
-  --#{$app-launcher}__menu-item-icon--MarginInlineEnd: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__menu-item-icon--Width: var(--#{$pf-global}--icon--FontSize--lg);
-  --#{$app-launcher}__menu-item-icon--Height: var(--#{$pf-global}--icon--FontSize--lg);
-
-  // Menu item external icon
-  --#{$app-launcher}__menu-item-external-icon--Color: var(--#{$pf-global}--link--Color);
-  --#{$app-launcher}__menu-item-external-icon--PaddingInlineStart: var(--#{$pf-global}--spacer--md);
-  --#{$app-launcher}__menu-item-external-icon--TranslateY: #{pf-size-prem(-1px)};
-  --#{$app-launcher}__menu-item-external-icon--FontSize: var(--#{$pf-global}--icon--FontSize--sm);
-
-  // Groups
-  --#{$app-launcher}__group--group--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__group-title--PaddingBlockStart: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}__group-title--PaddingInlineEnd: var(--#{$app-launcher}__menu-item--PaddingInlineEnd);
-  --#{$app-launcher}__group-title--PaddingBlockEnd: var(--#{$app-launcher}__menu-item--PaddingBlockEnd);
-  --#{$app-launcher}__group-title--PaddingInlineStart: var(--#{$app-launcher}__menu-item--PaddingInlineStart);
-  --#{$app-launcher}__group-title--FontSize: var(--#{$pf-global}--FontSize--xs);
-  --#{$app-launcher}__group-title--FontWeight: var(--#{$pf-global}--FontWeight--normal);
-  --#{$app-launcher}__group-title--Color: var(--#{$pf-global}--Color--dark-200);
-
-  // Divider
-  --#{$app-launcher}--c-divider--MarginBlockStart: var(--#{$pf-global}--spacer--sm);
-  --#{$app-launcher}--c-divider--MarginBlockEnd: var(--#{$pf-global}--spacer--sm);
-
-  position: relative;
-  display: inline-block;
-  max-width: 100%;
-
-  &.pf-m-expanded {
-    > .#{$app-launcher}__toggle {
-      color: var(--#{$app-launcher}__toggle--m-expanded--Color);
-    }
-  }
-
-  .#{$divider} {
-    margin-block-start: var(--#{$app-launcher}--c-divider--MarginBlockStart);
-    margin-block-end: var(--#{$app-launcher}--c-divider--MarginBlockEnd);
-
-    // Support divider as last item in group to separate groups
-    &:last-child {
-      --#{$app-launcher}--c-divider--MarginBlockEnd: 0;
-    }
-  }
-}
-
-.#{$app-launcher}__toggle {
-  padding-block-start: var(--#{$app-launcher}__toggle--PaddingBlockStart);
-  padding-block-end: var(--#{$app-launcher}__toggle--PaddingBlockEnd);
-  padding-inline-start: var(--#{$app-launcher}__toggle--PaddingInlineStart);
-  padding-inline-end: var(--#{$app-launcher}__toggle--PaddingInlineEnd);
-  color: var(--#{$app-launcher}__toggle--Color);
-  background-color: var(--#{$app-launcher}__toggle--BackgroundColor);
-  border: none;
-
-  &:hover {
-    --#{$app-launcher}__toggle--Color: var(--#{$app-launcher}__toggle--hover--Color);
-  }
-
-  &:active,
-  &.pf-m-active {
-    --#{$app-launcher}__toggle--Color: var(--#{$app-launcher}__toggle--active--Color);
-  }
-
-  &:focus {
-    --#{$app-launcher}__toggle--Color: var(--#{$app-launcher}__toggle--focus--Color);
-  }
-
-  &:disabled {
-    --#{$app-launcher}__toggle--Color: var(--#{$app-launcher}__toggle--disabled--Color);
-
-    pointer-events: none;
-  }
-}
-
-.#{$app-launcher}__menu {
-  position: absolute;
-  inset-block-start: var(--#{$app-launcher}__menu--InsetBlockStart);
-  z-index: var(--#{$app-launcher}__menu--ZIndex);
-  min-width: 100%;
-  padding-block-start: var(--#{$app-launcher}__menu--PaddingBlockStart);
-  padding-block-end: var(--#{$app-launcher}__menu--PaddingBlockEnd);
-  background-color: var(--#{$app-launcher}__menu--BackgroundColor);
-  background-clip: padding-box;
-  box-shadow: var(--#{$app-launcher}__menu--BoxShadow);
-
-  &.pf-m-align-right {
-   inset-inline-end: 0;
-  }
-
-  .#{$app-launcher}.pf-m-top & {
-    --#{$app-launcher}__menu--InsetBlockStart: var(--#{$app-launcher}--m-top__menu--InsetBlockStart);
-
-    transform: translateY(var(--#{$app-launcher}--m-top__menu--TranslateY));
-  }
-
-  &.pf-m-static {
-    --#{$app-launcher}--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;
-  }
-}
-
-.#{$app-launcher}__menu-search {
-  padding-block-start: var(--#{$app-launcher}__menu-search--PaddingBlockStart);
-  padding-block-end: var(--#{$app-launcher}__menu-search--PaddingBlockEnd);
-  padding-inline-start: var(--#{$app-launcher}__menu-search--PaddingInlineStart);
-  padding-inline-end: var(--#{$app-launcher}__menu-search--PaddingInlineEnd);
-  margin-block-end: var(--#{$app-launcher}__menu-search--MarginBlockEnd);
-  border-block-end: var(--#{$app-launcher}__menu-search--BorderBlockEndWidth) solid var(--#{$app-launcher}__menu-search--BorderBlockEndColor);
-}
-
-.#{$app-launcher}__menu-wrapper {
-  display: flex;
-
-  &.pf-m-favorite {
-    --#{$app-launcher}__menu-item--m-action--Color: var(--#{$app-launcher}__menu-item--m-favorite__menu-item--m-action--Color);
-    --#{$app-launcher}__menu-item--m-action--hover--Color: var(--#{$app-launcher}__menu-item--m-favorite__menu-item--m-action--hover--Color);
-  }
-}
-
-.#{$app-launcher}__menu-item {
-  display: flex;
-  align-items: center;
-  width: var(--#{$app-launcher}__menu-item--Width);
-  padding-block-start: var(--#{$app-launcher}__menu-item--PaddingBlockStart);
-  padding-block-end: var(--#{$app-launcher}__menu-item--PaddingBlockEnd);
-  padding-inline-start: var(--#{$app-launcher}__menu-item--PaddingInlineStart);
-  padding-inline-end: var(--#{$app-launcher}__menu-item--PaddingInlineEnd);
-  font-weight: var(--#{$app-launcher}__menu-item--FontWeight);
-  color: var(--#{$app-launcher}__menu-item--Color);
-  white-space: nowrap;
-  background: none;
-  border: 0;
-
-  &:hover,
-  &:focus {
-    --#{$app-launcher}__menu-item--m-action--Color: var(--#{$app-launcher}__menu-item--hover__menu-item--m-action--Color); // remove at breaking change
-
-    text-decoration: none;
-  }
-
-  @at-root .#{$app-launcher}__menu-wrapper:hover,
-  .#{$app-launcher}__menu-wrapper:focus-within,
-  .#{$app-launcher}__menu-wrapper.pf-m-focus,
-  &:hover,
-  &:focus {
-    background-color: var(--#{$app-launcher}__menu-item--hover--BackgroundColor);
-  }
-
-  &:disabled,
-  &.pf-m-disabled {
-    --#{$app-launcher}__menu-item--Color: var(--#{$app-launcher}__menu-item--disabled--Color);
-    --#{$app-launcher}__menu-item--m-action--Color: var(--#{$app-launcher}__menu-item--m-action--disabled--Color);
-
-    pointer-events: none;
-  }
-
-  @at-root .#{$app-launcher}__menu-wrapper,
-  & {
-    &:disabled,
-    &.pf-m-disabled {
-      background-color: transparent;
-    }
-  }
-
-  @at-root .#{$app-launcher}__menu-wrapper,
-  & {
-    &.pf-m-external {
-      &:hover,
-      &:focus {
-        // stylelint-disable-next-line
-        .#{$app-launcher}__menu-item-external-icon {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  &.pf-m-link {
-    --#{$app-launcher}__menu-item--PaddingInlineEnd: var(--#{$app-launcher}__menu-item--m-link--PaddingInlineEnd);
-    --#{$app-launcher}__menu-item--hover--BackgroundColor: var(--#{$app-launcher}__menu-item--m-link--hover--BackgroundColor);
-  }
-
-  &.pf-m-action {
-    --#{$app-launcher}__menu-item--Color: var(--#{$app-launcher}__menu-item--m-action--Color);
-    --#{$app-launcher}__menu-item--Width: var(--#{$app-launcher}__menu-item--m-action--Width);
-    --#{$app-launcher}__menu-item--hover--BackgroundColor: var(--#{$app-launcher}__menu-item--m-action--hover--BackgroundColor);
-
-    font-size: var(--#{$app-launcher}__menu-item--m-action--FontSize);
-
-    &:hover,
-    &:focus {
-      --#{$app-launcher}__menu-item--m-action--Color: var(--#{$app-launcher}__menu-item--m-action--hover--Color);
-    }
-  }
-}
-
-.#{$app-launcher}__menu-item-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--#{$app-launcher}__menu-item-icon--Width);
-  height: var(--#{$app-launcher}__menu-item-icon--Height);
-  margin-inline-end: var(--#{$app-launcher}__menu-item-icon--MarginInlineEnd);
-
-  > * {
-    max-width: 100%;
-    max-height: 100%;
-  }
-}
-
-.#{$app-launcher}__menu-item-external-icon {
-  padding-inline-start: var(--#{$app-launcher}__menu-item-external-icon--PaddingInlineStart);
-  margin-inline-start: auto;
-  font-size: var(--#{$app-launcher}__menu-item-external-icon--FontSize);
-  color: var(--#{$app-launcher}__menu-item-external-icon--Color);
-  opacity: 0;
-  transform: translateY(var(--#{$app-launcher}__menu-item-external-icon--TranslateY)); // move icon a bit to appear more visually centered
-}
-
-.#{$app-launcher}__group {
-  & + & {
-    padding-block-start: var(--#{$app-launcher}__group--group--PaddingBlockStart);
-  }
-}
-
-.#{$app-launcher}__group-title {
-  padding-block-start: var(--#{$app-launcher}__group-title--PaddingBlockStart);
-  padding-block-end: var(--#{$app-launcher}__group-title--PaddingBlockEnd);
-  padding-inline-start: var(--#{$app-launcher}__group-title--PaddingInlineStart);
-  padding-inline-end: var(--#{$app-launcher}__group-title--PaddingInlineEnd);
-  font-size: var(--#{$app-launcher}__group-title--FontSize);
-  font-weight: var(--#{$app-launcher}__group-title--FontWeight);
-  color: var(--#{$app-launcher}__group-title--Color);
-}