@gitlab/ui 107.0.1 → 107.1.1

package/dist/tokens/js/tokens.dark.js

@@ -628,15 +628,16 @@ export const GL_DATEPICKER_BACKGROUND_COLOR = '#28272d';
 export const GL_DATEPICKER_DATE_TEXT_COLOR_SELECTED = '#18171d';
 export const GL_DROPDOWN_BACKGROUND_COLOR = '#28272d';
 export const GL_DROPDOWN_BORDER_COLOR = '#4c4b51';
+export const GL_DROPDOWN_DIVIDER_COLOR = '#3a383f';
 export const GL_DROPDOWN_OPTION_TEXT_COLOR_DEFAULT = '#ececef';
 export const GL_DROPDOWN_OPTION_TEXT_COLOR_HOVER = '#ececef';
 export const GL_DROPDOWN_OPTION_TEXT_COLOR_FOCUS = '#ececef';
 export const GL_DROPDOWN_OPTION_TEXT_COLOR_ACTIVE = '#ececef';
 export const GL_DROPDOWN_OPTION_TEXT_COLOR_DISABLED = '#737278';
-export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_DEFAULT = '#fff';
-export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_HOVER = '#fff';
-export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_FOCUS = '#fff';
-export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_ACTIVE = '#dcdcde';
+export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_DEFAULT = '#63a6e9';
+export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_HOVER = '#9dc7f1';
+export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_FOCUS = '#9dc7f1';
+export const GL_DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_ACTIVE = '#9dc7f1';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_DEFAULT = 'rgba(137, 136, 141, 0.0)';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_HOVER = 'rgba(137, 136, 141, 0.4)';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_FOCUS = 'rgba(137, 136, 141, 0.4)';
@@ -645,6 +646,7 @@ export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_DEFAULT = '#3a383f';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_HOVER = '#4c4b51';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_FOCUS = '#4c4b51';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_ACTIVE = '#28272d';
+export const GL_DROPDOWN_SEARCH_BACKGROUND_COLOR = 'rgba(05, 05, 06, 0.24)';
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_DEFAULT = '#28272d';
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = '#3a383f';
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#3a383f';

package/dist/tokens/js/tokens.js

@@ -628,6 +628,7 @@ export const GL_DATEPICKER_BACKGROUND_COLOR = '#fff';
 export const GL_DATEPICKER_DATE_TEXT_COLOR_SELECTED = '#fff';
 export const GL_DROPDOWN_BACKGROUND_COLOR = '#fff';
 export const GL_DROPDOWN_BORDER_COLOR = '#bfbfc3';
+export const GL_DROPDOWN_DIVIDER_COLOR = '#dcdcde';
 export const GL_DROPDOWN_OPTION_TEXT_COLOR_DEFAULT = '#28272d';
 export const GL_DROPDOWN_OPTION_TEXT_COLOR_HOVER = '#28272d';
 export const GL_DROPDOWN_OPTION_TEXT_COLOR_FOCUS = '#28272d';
@@ -645,6 +646,7 @@ export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_DEFAULT = '#ececef';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_HOVER = '#dcdcde';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_FOCUS = '#dcdcde';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_ACTIVE = '#bfbfc3';
+export const GL_DROPDOWN_SEARCH_BACKGROUND_COLOR = 'rgba(05, 05, 06, 0.02)';
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_DEFAULT = '#ececef';
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = '#dcdcde';
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#dcdcde';

package/dist/tokens/json/tokens.dark.json

@@ -13797,8 +13797,8 @@
         "isSource": true,
         "original": {
           "$value": {
-            "default": "{color.neutral.200}",
-            "dark": "{color.neutral.700}"
+            "default": "{border.color.strong}",
+            "dark": "{border.color.default}"
           },
           "$type": "color",
           "$description": "Used for the border of a dropdown."
@@ -13812,6 +13812,26 @@
         ]
       }
     },
+    "divider": {
+      "color": {
+        "$value": "#3a383f",
+        "filePath": "src/tokens/contextual/dropdown.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": {
+            "default": "{border.color.default}",
+            "dark": "{border.color.subtle}"
+          }
+        },
+        "name": "DROPDOWN_DIVIDER_COLOR",
+        "attributes": {},
+        "path": [
+          "dropdown",
+          "divider",
+          "color"
+        ]
+      }
+    },
     "option": {
       "text": {
         "color": {
@@ -13926,16 +13946,13 @@
         "color": {
           "selected": {
             "default": {
-              "$value": "#fff",
+              "$value": "#63a6e9",
               "$type": "color",
               "$description": "Used for the dropdown selected option indicator in the default state.",
               "filePath": "src/tokens/contextual/dropdown.tokens.json",
               "isSource": true,
               "original": {
-                "$value": {
-                  "default": "{control.background.color.selected.default}",
-                  "dark": "{color.neutral.0}"
-                },
+                "$value": "{control.background.color.selected.default}",
                 "$type": "color",
                 "$description": "Used for the dropdown selected option indicator in the default state."
               },
@@ -13951,16 +13968,13 @@
               ]
             },
             "hover": {
-              "$value": "#fff",
+              "$value": "#9dc7f1",
               "$type": "color",
               "$description": "Used for the dropdown selected option indicator in the hover state.",
               "filePath": "src/tokens/contextual/dropdown.tokens.json",
               "isSource": true,
               "original": {
-                "$value": {
-                  "default": "{control.background.color.selected.hover}",
-                  "dark": "{color.neutral.0}"
-                },
+                "$value": "{control.background.color.selected.hover}",
                 "$type": "color",
                 "$description": "Used for the dropdown selected option indicator in the hover state."
               },
@@ -13976,16 +13990,13 @@
               ]
             },
             "focus": {
-              "$value": "#fff",
+              "$value": "#9dc7f1",
               "$type": "color",
               "$description": "Used for the dropdown selected option indicator in the focus state.",
               "filePath": "src/tokens/contextual/dropdown.tokens.json",
               "isSource": true,
               "original": {
-                "$value": {
-                  "default": "{control.background.color.selected.focus}",
-                  "dark": "{color.neutral.0}"
-                },
+                "$value": "{control.background.color.selected.focus}",
                 "$type": "color",
                 "$description": "Used for the dropdown selected option indicator in the focus state."
               },
@@ -14001,16 +14012,13 @@
               ]
             },
             "active": {
-              "$value": "#dcdcde",
+              "$value": "#9dc7f1",
               "$type": "color",
               "$description": "Used for the dropdown selected option indicator in the active state.",
               "filePath": "src/tokens/contextual/dropdown.tokens.json",
               "isSource": true,
               "original": {
-                "$value": {
-                  "default": "{color.blue.700}",
-                  "dark": "{color.neutral.100}"
-                },
+                "$value": "{control.background.color.selected.focus}",
                 "$type": "color",
                 "$description": "Used for the dropdown selected option indicator in the active state."
               },
@@ -14221,6 +14229,33 @@
           }
         }
       }
+    },
+    "search": {
+      "background": {
+        "color": {
+          "$value": "rgba(05, 05, 06, 0.24)",
+          "$type": "color",
+          "$description": "Used for the background of a search input in a dropdown listbox.",
+          "filePath": "src/tokens/contextual/dropdown.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.alpha.dark.2}",
+              "dark": "{color.alpha.dark.24}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a search input in a dropdown listbox."
+          },
+          "name": "DROPDOWN_SEARCH_BACKGROUND_COLOR",
+          "attributes": {},
+          "path": [
+            "dropdown",
+            "search",
+            "background",
+            "color"
+          ]
+        }
+      }
     }
   },
   "filtered-search": {

package/dist/tokens/json/tokens.json

@@ -13797,8 +13797,8 @@
         "isSource": true,
         "original": {
           "$value": {
-            "default": "{color.neutral.200}",
-            "dark": "{color.neutral.700}"
+            "default": "{border.color.strong}",
+            "dark": "{border.color.default}"
           },
           "$type": "color",
           "$description": "Used for the border of a dropdown."
@@ -13812,6 +13812,26 @@
         ]
       }
     },
+    "divider": {
+      "color": {
+        "$value": "#dcdcde",
+        "filePath": "src/tokens/contextual/dropdown.tokens.json",
+        "isSource": true,
+        "original": {
+          "$value": {
+            "default": "{border.color.default}",
+            "dark": "{border.color.subtle}"
+          }
+        },
+        "name": "DROPDOWN_DIVIDER_COLOR",
+        "attributes": {},
+        "path": [
+          "dropdown",
+          "divider",
+          "color"
+        ]
+      }
+    },
     "option": {
       "text": {
         "color": {
@@ -13932,10 +13952,7 @@
               "filePath": "src/tokens/contextual/dropdown.tokens.json",
               "isSource": true,
               "original": {
-                "$value": {
-                  "default": "{control.background.color.selected.default}",
-                  "dark": "{color.neutral.0}"
-                },
+                "$value": "{control.background.color.selected.default}",
                 "$type": "color",
                 "$description": "Used for the dropdown selected option indicator in the default state."
               },
@@ -13957,10 +13974,7 @@
               "filePath": "src/tokens/contextual/dropdown.tokens.json",
               "isSource": true,
               "original": {
-                "$value": {
-                  "default": "{control.background.color.selected.hover}",
-                  "dark": "{color.neutral.0}"
-                },
+                "$value": "{control.background.color.selected.hover}",
                 "$type": "color",
                 "$description": "Used for the dropdown selected option indicator in the hover state."
               },
@@ -13982,10 +13996,7 @@
               "filePath": "src/tokens/contextual/dropdown.tokens.json",
               "isSource": true,
               "original": {
-                "$value": {
-                  "default": "{control.background.color.selected.focus}",
-                  "dark": "{color.neutral.0}"
-                },
+                "$value": "{control.background.color.selected.focus}",
                 "$type": "color",
                 "$description": "Used for the dropdown selected option indicator in the focus state."
               },
@@ -14007,10 +14018,7 @@
               "filePath": "src/tokens/contextual/dropdown.tokens.json",
               "isSource": true,
               "original": {
-                "$value": {
-                  "default": "{color.blue.700}",
-                  "dark": "{color.neutral.100}"
-                },
+                "$value": "{control.background.color.selected.focus}",
                 "$type": "color",
                 "$description": "Used for the dropdown selected option indicator in the active state."
               },
@@ -14221,6 +14229,33 @@
           }
         }
       }
+    },
+    "search": {
+      "background": {
+        "color": {
+          "$value": "rgba(05, 05, 06, 0.02)",
+          "$type": "color",
+          "$description": "Used for the background of a search input in a dropdown listbox.",
+          "filePath": "src/tokens/contextual/dropdown.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": {
+              "default": "{color.alpha.dark.2}",
+              "dark": "{color.alpha.dark.24}"
+            },
+            "$type": "color",
+            "$description": "Used for the background of a search input in a dropdown listbox."
+          },
+          "name": "DROPDOWN_SEARCH_BACKGROUND_COLOR",
+          "attributes": {},
+          "path": [
+            "dropdown",
+            "search",
+            "background",
+            "color"
+          ]
+        }
+      }
     }
   },
   "filtered-search": {

package/dist/tokens/scss/_tokens.dark.scss

@@ -693,14 +693,13 @@ $gl-button-disabled-foreground-color: $gl-color-neutral-400; // Used for the for
 $gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); // Used for the background of a disabled button.
 $gl-button-disabled-border-color: $gl-color-alpha-0; // Used for the border of a disabled button.
 $gl-datepicker-background-color: $gl-color-neutral-900; // Used for the background color of datepicker.
-$gl-dropdown-border-color: $gl-color-neutral-700; // Used for the border of a dropdown.
-$gl-dropdown-option-indicator-color-selected-active: $gl-color-neutral-100; // Used for the dropdown selected option indicator in the active state.
 $gl-dropdown-option-background-color-unselected-default: $gl-action-neutral-background-color-default; // Used for the background of an unselected dropdown option in the default state.
 $gl-dropdown-option-background-color-unselected-hover: $gl-action-neutral-background-color-hover; // Used for the background of an unselected dropdown option in the hover state.
 $gl-dropdown-option-background-color-unselected-active: $gl-action-neutral-background-color-active; // Used for the background of an unselected dropdown option in the active state.
 $gl-dropdown-option-background-color-selected-default: $gl-color-neutral-800; // Used for the background of a selected dropdown option in the default state.
 $gl-dropdown-option-background-color-selected-hover: $gl-color-neutral-700; // Used for the background of a selected dropdown option in the hover state.
 $gl-dropdown-option-background-color-selected-active: $gl-color-neutral-900; // Used for the background of a selected dropdown option in the active state.
+$gl-dropdown-search-background-color: $gl-color-alpha-dark-24; // Used for the background of a search input in a dropdown listbox.
 $gl-filtered-search-token-type-background-color-default: $gl-color-neutral-900; // Used for the filtered search type token background color in the default state.
 $gl-filtered-search-token-type-background-color-hover: $gl-color-neutral-800; // Used for the filtered search type token background color in the hover state.
 $gl-filtered-search-token-data-background-color-default: $gl-color-neutral-800; // Used for the filtered search data background color in the default state.
@@ -907,11 +906,14 @@ $gl-button-selected-background-color-active: $gl-button-default-primary-backgrou
 $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
+$gl-dropdown-border-color: $gl-border-color-default; // Used for the border of a dropdown.
+$gl-dropdown-divider-color: $gl-border-color-subtle;
 $gl-dropdown-option-text-color-default: $gl-action-neutral-foreground-color-default; // Used for the text of a dropdown option in the default state.
 $gl-dropdown-option-text-color-disabled: $gl-action-disabled-foreground-color; // Used for the text of a dropdown option in the disabled state.
-$gl-dropdown-option-indicator-color-selected-default: $gl-color-neutral-0; // Used for the dropdown selected option indicator in the default state.
-$gl-dropdown-option-indicator-color-selected-hover: $gl-color-neutral-0; // Used for the dropdown selected option indicator in the hover state.
-$gl-dropdown-option-indicator-color-selected-focus: $gl-color-neutral-0; // Used for the dropdown selected option indicator in the focus state.
+$gl-dropdown-option-indicator-color-selected-default: $gl-control-background-color-selected-default; // Used for the dropdown selected option indicator in the default state.
+$gl-dropdown-option-indicator-color-selected-hover: $gl-control-background-color-selected-hover; // Used for the dropdown selected option indicator in the hover state.
+$gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the focus state.
+$gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
 $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.

package/dist/tokens/scss/_tokens.scss

@@ -693,14 +693,13 @@ $gl-button-disabled-foreground-color: $gl-color-neutral-500; // Used for the for
 $gl-button-disabled-background-color: $gl-color-neutral-10; // Used for the background of a disabled button.
 $gl-button-disabled-border-color: $gl-color-neutral-100; // Used for the border of a disabled button.
 $gl-datepicker-background-color: $gl-color-neutral-0; // Used for the background color of datepicker.
-$gl-dropdown-border-color: $gl-color-neutral-200; // Used for the border of a dropdown.
-$gl-dropdown-option-indicator-color-selected-active: $gl-color-blue-700; // Used for the dropdown selected option indicator in the active state.
 $gl-dropdown-option-background-color-unselected-default: $gl-action-neutral-background-color-default; // Used for the background of an unselected dropdown option in the default state.
 $gl-dropdown-option-background-color-unselected-hover: $gl-action-neutral-background-color-hover; // Used for the background of an unselected dropdown option in the hover state.
 $gl-dropdown-option-background-color-unselected-active: $gl-action-neutral-background-color-active; // Used for the background of an unselected dropdown option in the active state.
 $gl-dropdown-option-background-color-selected-default: $gl-color-neutral-50; // Used for the background of a selected dropdown option in the default state.
 $gl-dropdown-option-background-color-selected-hover: $gl-color-neutral-100; // Used for the background of a selected dropdown option in the hover state.
 $gl-dropdown-option-background-color-selected-active: $gl-color-neutral-200; // Used for the background of a selected dropdown option in the active state.
+$gl-dropdown-search-background-color: $gl-color-alpha-dark-2; // Used for the background of a search input in a dropdown listbox.
 $gl-filtered-search-token-type-background-color-default: $gl-color-neutral-50; // Used for the filtered search type token background color in the default state.
 $gl-filtered-search-token-type-background-color-hover: $gl-color-neutral-100; // Used for the filtered search type token background color in the hover state.
 $gl-filtered-search-token-data-background-color-default: $gl-color-neutral-100; // Used for the filtered search data background color in the default state.
@@ -907,11 +906,14 @@ $gl-button-selected-background-color-active: $gl-button-default-primary-backgrou
 $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
+$gl-dropdown-border-color: $gl-border-color-strong; // Used for the border of a dropdown.
+$gl-dropdown-divider-color: $gl-border-color-default;
 $gl-dropdown-option-text-color-default: $gl-action-neutral-foreground-color-default; // Used for the text of a dropdown option in the default state.
 $gl-dropdown-option-text-color-disabled: $gl-action-disabled-foreground-color; // Used for the text of a dropdown option in the disabled state.
 $gl-dropdown-option-indicator-color-selected-default: $gl-control-background-color-selected-default; // Used for the dropdown selected option indicator in the default state.
 $gl-dropdown-option-indicator-color-selected-hover: $gl-control-background-color-selected-hover; // Used for the dropdown selected option indicator in the hover state.
 $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the focus state.
+$gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
 $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -628,6 +628,7 @@ $gl-datepicker-background-color: var(--gl-datepicker-background-color);
 $gl-datepicker-date-text-color-selected: var(--gl-datepicker-date-text-color-selected);
 $gl-dropdown-background-color: var(--gl-dropdown-background-color);
 $gl-dropdown-border-color: var(--gl-dropdown-border-color);
+$gl-dropdown-divider-color: var(--gl-dropdown-divider-color);
 $gl-dropdown-option-text-color-default: var(--gl-dropdown-option-text-color-default);
 $gl-dropdown-option-text-color-hover: var(--gl-dropdown-option-text-color-hover);
 $gl-dropdown-option-text-color-focus: var(--gl-dropdown-option-text-color-focus);
@@ -645,6 +646,7 @@ $gl-dropdown-option-background-color-selected-default: var(--gl-dropdown-option-
 $gl-dropdown-option-background-color-selected-hover: var(--gl-dropdown-option-background-color-selected-hover);
 $gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-focus);
 $gl-dropdown-option-background-color-selected-active: var(--gl-dropdown-option-background-color-selected-active);
+$gl-dropdown-search-background-color: var(--gl-dropdown-search-background-color);
 $gl-filtered-search-token-type-background-color-default: var(--gl-filtered-search-token-type-background-color-default);
 $gl-filtered-search-token-type-background-color-hover: var(--gl-filtered-search-token-type-background-color-hover);
 $gl-filtered-search-token-data-background-color-default: var(--gl-filtered-search-token-data-background-color-default);

package/dist/tokens/tailwind/tokens.cjs

@@ -381,7 +381,8 @@ const backgroundColor = {
 const borderColor = {
   ...colors,
   ...borderColors,
-  dropdown: 'var(--gl-dropdown-border-color, var(--gl-color-neutral-200, #bfbfc3))',
+  dropdown: 'var(--gl-dropdown-border-color, var(--gl-border-color-strong, #bfbfc3))',
+  'dropdown-divider': 'var(--gl-dropdown-divider-color, var(--gl-border-color-default, #dcdcde))',
 };
 
 const outlineColor = {

package/dist/utils/constants.js

@@ -102,6 +102,10 @@ const dropdownVariantOptions = {
   danger: 'danger',
   link: 'link'
 };
+const dropdownItemVariantOptions = {
+  default: 'default',
+  danger: 'danger'
+};
 const dropdownPlacements = {
   'right-start': 'right-start',
   'bottom-start': 'bottom-start',
@@ -291,4 +295,4 @@ const loadingIconVariants = {
   dots: 'dots'
 };
 
-export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, iconSizeOptions, iconVariantOptions, keyboard, labelColorOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, progressBarVariantOptions, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, viewModeOptions };
+export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownItemVariantOptions, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, iconSizeOptions, iconVariantOptions, keyboard, labelColorOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, progressBarVariantOptions, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, viewModeOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "107.0.1",
+  "version": "107.1.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -32,6 +32,7 @@
     "build": "NODE_ENV=production rollup -c",
     "prebuild": "run-s build-tokens build-migration-script",
     "prepare": "run-s build-tokens",
+    "postinstall": "patch-package --error-on-fail --error-on-warn",
     "copy-fonts": "make copy-fonts",
     "build-tokens": "node ./bin/build_tokens.mjs",
     "build-migration-script": "esbuild --bundle --platform=node --target=esnext --outfile=bin/migrate_custom_utils_to_tw.bundled.mjs --format=esm --banner:js=\"import { createRequire as __gl__createRequire } from 'node:module'; const require = __gl__createRequire(import.meta.url);\" bin/migrate_custom_utils_to_tw.mjs",
@@ -169,6 +170,7 @@
     "mockdate": "^2.0.5",
     "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
+    "patch-package": "^8.0.0",
     "pikaday": "^1.8.0",
     "playwright": "^1.49.1",
     "playwright-core": "^1.49.1",

package/src/components/base/dropdown/dropdown.scss

@@ -38,7 +38,7 @@
   }
 
   .gl-dropdown-header-top {
-    @apply gl-border-1 gl-border-b-solid gl-border-dropdown;
+    @apply gl-border-1 gl-border-b-solid gl-border-dropdown-divider;
     @apply gl-flex;
     @apply gl-text-base;
     @apply gl-text-strong;
@@ -52,11 +52,11 @@
   }
 
   .gl-dropdown-header {
-    @apply gl-border-b-1 gl-border-b-solid gl-border-b-dropdown;
+    @apply gl-border-b-1 gl-border-b-solid gl-border-b-dropdown-divider;
   }
 
   .gl-dropdown-footer {
-    @apply gl-border-t-1 gl-border-t-solid gl-border-t-dropdown;
+    @apply gl-border-t-1 gl-border-t-solid gl-border-t-dropdown-divider;
     @apply gl-py-3;
   }
 

package/src/components/base/dropdown/dropdown_divider.scss

@@ -4,7 +4,7 @@
   @apply gl-my-2;
   @apply gl-mx-0;
   @apply gl-p-0;
-  @apply gl-border-t-1 gl-border-t-solid gl-border-t-dropdown;
+  @apply gl-border-t-1 gl-border-t-solid gl-border-t-dropdown-divider;
 }
 
 /* Styling when the component is used on its own */

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue

@@ -8,8 +8,8 @@ import {
 } from './constants';
 
 export const BORDER_CLASSES = {
-  [borderPositions.top]: 'gl-border-t gl-border-t-dropdown gl-pt-2 gl-mt-2',
-  [borderPositions.bottom]: 'gl-border-b gl-border-b-dropdown gl-pb-2 gl-mb-2',
+  [borderPositions.top]: 'gl-border-t gl-border-t-dropdown-divider gl-pt-2 gl-mt-2',
+  [borderPositions.bottom]: 'gl-border-b gl-border-b-dropdown-divider gl-pb-2 gl-mb-2',
 };
 
 export default {

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue

@@ -2,6 +2,7 @@
 import { BLink } from '../../../../vendor/bootstrap-vue/src/components/link/link';
 import { ENTER, SPACE } from '../constants';
 import { stopEvent } from '../../../../utils/utils';
+import { dropdownItemVariantOptions } from '../../../../utils/constants';
 import { isItem } from './utils';
 import { DISCLOSURE_DROPDOWN_ITEM_NAME } from './constants';
 
@@ -18,6 +19,17 @@ export default {
       default: null,
       validator: isItem,
     },
+    /**
+     * The variant of the dropdown item.
+     */
+    variant: {
+      type: String,
+      default: null,
+      validator(value) {
+        return dropdownItemVariantOptions[value] !== undefined;
+      },
+      required: false,
+    },
   },
   computed: {
     isLink() {
@@ -62,8 +74,20 @@ export default {
     componentIndex() {
       return this.item?.extraAttrs?.disabled ? null : -1;
     },
-    wrapperClass() {
-      return this.item?.wrapperClass ?? '';
+    itemVariant() {
+      return this.variant || this.item?.variant;
+    },
+    classes() {
+      return [
+        this.$options.ITEM_CLASS,
+        this.item?.wrapperClass ?? '',
+        // This isn't a Tailwind class, so this lint rule isn't relevant.
+        // It just so happens this class has the same prefix `gl-`.
+        this.itemVariant && this.itemVariant !== 'default'
+          ? // eslint-disable-next-line @gitlab/tailwind-no-interpolation
+            `gl-new-dropdown-item-${this.itemVariant}`
+          : '',
+      ];
     },
     wrapperListeners() {
       const listeners = {
@@ -107,7 +131,7 @@ export default {
 <template>
   <li
     :tabindex="listIndex"
-    :class="[$options.ITEM_CLASS, wrapperClass]"
+    :class="classes"
     data-testid="disclosure-dropdown-item"
     v-on="wrapperListeners"
   >

package/src/components/base/new_dropdowns/disclosure/mock_data.js

@@ -25,12 +25,12 @@ export const mockItems = [
   },
   {
     text: 'Close merge request',
+    variant: 'danger',
     action: () => {
       // eslint-disable-next-line no-console
       console.log('CLOSED');
     },
     extraAttrs: {
-      class: '!gl-text-red-500',
       rel: 'nofollow',
       'data-method': 'put',
     },

package/src/components/base/new_dropdowns/dropdown_item.scss

@@ -131,4 +131,33 @@
       @apply gl-py-3;
     }
   }
+
+  &.gl-new-dropdown-item-danger {
+    .gl-new-dropdown-item-content {
+      color: var(--gl-action-danger-foreground-color-default);
+      background-color: var(--gl-action-danger-background-color-default);
+    }
+
+    &:hover {
+      .gl-new-dropdown-item-content {
+        color: var(--gl-action-danger-foreground-color-hover);
+        background-color: var(--gl-action-danger-background-color-hover);
+      }
+    }
+
+    &:focus {
+      .gl-new-dropdown-item-content {
+        color: var(--gl-action-danger-foreground-color-focus);
+        background-color: var(--gl-action-danger-background-color-focus);
+      }
+    }
+
+    &:active,
+    &:focus:active {
+      .gl-new-dropdown-item-content {
+        color: var(--gl-action-danger-foreground-color-active);
+        background-color: var(--gl-action-danger-background-color-active);
+      }
+    }
+  }
 }

package/src/components/base/new_dropdowns/listbox/listbox.scss

@@ -14,6 +14,7 @@ $clear-button-size: 24px;
     padding-right: calc(#{$gl-spacing-scale-6} + #{$gl-spacing-scale-2});
     @apply gl-py-4;
     @apply gl-text-base;
+    background-color: var(--gl-dropdown-search-background-color);
 
     &:focus {
       @include gl-focus($inset: true);

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -33,8 +33,18 @@ import GlListboxGroup from './listbox_group.vue';
 import { isOption, itemsValidator, flattenedOptions } from './utils';
 
 export const ITEM_SELECTOR = '[role="option"]';
-const HEADER_ITEMS_BORDER_CLASSES = ['gl-border-b-1', 'gl-border-b-solid', 'gl-border-b-dropdown'];
-const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-border-t-dropdown', 'gl-pt-1', 'gl-mt-2'];
+const HEADER_ITEMS_BORDER_CLASSES = [
+  'gl-border-b-1',
+  'gl-border-b-solid',
+  'gl-border-b-dropdown-divider',
+];
+const GROUP_TOP_BORDER_CLASSES = [
+  'gl-border-t-1',
+  'gl-border-t-solid',
+  'gl-border-t-dropdown-divider',
+  'gl-pt-1',
+  'gl-mt-2',
+];
 export const SEARCH_INPUT_SELECTOR = '.gl-listbox-search-input';
 
 export default {

package/src/components/base/popover/popover.vue

@@ -106,6 +106,6 @@ export default {
         />
       </div>
     </template>
-    <slot></slot>
+    <template v-if="$scopedSlots.default" #default><slot></slot></template>
   </b-popover>
 </template>