@gitlab/ui 94.6.0 → 94.7.0

package/dist/tokens/json/tokens.json

@@ -13742,6 +13742,463 @@
       }
     }
   },
+  "dropdown": {
+    "background": {
+      "color": {
+        "value": "#fff",
+        "$type": "color",
+        "comment": "Used for the background of a dropdown.",
+        "filePath": "src/tokens/contextual/dropdown.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "{background.color.overlap}",
+          "$type": "color",
+          "comment": "Used for the background of a dropdown."
+        },
+        "name": "DROPDOWN_BACKGROUND_COLOR",
+        "attributes": {},
+        "path": [
+          "dropdown",
+          "background",
+          "color"
+        ]
+      }
+    },
+    "border": {
+      "color": {
+        "value": "#bfbfc3",
+        "$type": "color",
+        "comment": "Used for the border of a dropdown.",
+        "filePath": "src/tokens/contextual/dropdown.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.neutral.200}",
+            "dark": "{color.neutral.700}"
+          },
+          "$type": "color",
+          "comment": "Used for the border of a dropdown."
+        },
+        "name": "DROPDOWN_BORDER_COLOR",
+        "attributes": {},
+        "path": [
+          "dropdown",
+          "border",
+          "color"
+        ]
+      }
+    },
+    "option": {
+      "text": {
+        "color": {
+          "default": {
+            "value": "#28272d",
+            "$type": "color",
+            "comment": "Used for the text of a dropdown option in the default state.",
+            "filePath": "src/tokens/contextual/dropdown.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.neutral.foreground.color.default}",
+              "$type": "color",
+              "comment": "Used for the text of a dropdown option in the default state."
+            },
+            "name": "DROPDOWN_OPTION_TEXT_COLOR_DEFAULT",
+            "attributes": {},
+            "path": [
+              "dropdown",
+              "option",
+              "text",
+              "color",
+              "default"
+            ]
+          },
+          "hover": {
+            "value": "#28272d",
+            "$type": "color",
+            "comment": "Used for the text of a dropdown option in the hover state.",
+            "filePath": "src/tokens/contextual/dropdown.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.neutral.foreground.color.hover}",
+              "$type": "color",
+              "comment": "Used for the text of a dropdown option in the hover state."
+            },
+            "name": "DROPDOWN_OPTION_TEXT_COLOR_HOVER",
+            "attributes": {},
+            "path": [
+              "dropdown",
+              "option",
+              "text",
+              "color",
+              "hover"
+            ]
+          },
+          "focus": {
+            "value": "#28272d",
+            "$type": "color",
+            "comment": "Used for the text of a dropdown option in the focus state.",
+            "filePath": "src/tokens/contextual/dropdown.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.neutral.foreground.color.focus}",
+              "$type": "color",
+              "comment": "Used for the text of a dropdown option in the focus state."
+            },
+            "name": "DROPDOWN_OPTION_TEXT_COLOR_FOCUS",
+            "attributes": {},
+            "path": [
+              "dropdown",
+              "option",
+              "text",
+              "color",
+              "focus"
+            ]
+          },
+          "active": {
+            "value": "#28272d",
+            "$type": "color",
+            "comment": "Used for the text of a dropdown option in the active state.",
+            "filePath": "src/tokens/contextual/dropdown.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.neutral.foreground.color.active}",
+              "$type": "color",
+              "comment": "Used for the text of a dropdown option in the active state."
+            },
+            "name": "DROPDOWN_OPTION_TEXT_COLOR_ACTIVE",
+            "attributes": {},
+            "path": [
+              "dropdown",
+              "option",
+              "text",
+              "color",
+              "active"
+            ]
+          },
+          "disabled": {
+            "value": "#89888d",
+            "$type": "color",
+            "comment": "Used for the text of a dropdown option in the disabled state.",
+            "filePath": "src/tokens/contextual/dropdown.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.disabled.foreground.color}",
+              "$type": "color",
+              "comment": "Used for the text of a dropdown option in the disabled state."
+            },
+            "name": "DROPDOWN_OPTION_TEXT_COLOR_DISABLED",
+            "attributes": {},
+            "path": [
+              "dropdown",
+              "option",
+              "text",
+              "color",
+              "disabled"
+            ]
+          }
+        }
+      },
+      "indicator": {
+        "color": {
+          "selected": {
+            "default": {
+              "value": "#1f75cb",
+              "$type": "color",
+              "comment": "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}"
+                },
+                "$type": "color",
+                "comment": "Used for the dropdown selected option indicator in the default state."
+              },
+              "name": "DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_DEFAULT",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "indicator",
+                "color",
+                "selected",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#0b5cad",
+              "$type": "color",
+              "comment": "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}"
+                },
+                "$type": "color",
+                "comment": "Used for the dropdown selected option indicator in the hover state."
+              },
+              "name": "DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_HOVER",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "indicator",
+                "color",
+                "selected",
+                "hover"
+              ]
+            },
+            "focus": {
+              "value": "#0b5cad",
+              "$type": "color",
+              "comment": "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}"
+                },
+                "$type": "color",
+                "comment": "Used for the dropdown selected option indicator in the focus state."
+              },
+              "name": "DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_FOCUS",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "indicator",
+                "color",
+                "selected",
+                "focus"
+              ]
+            },
+            "active": {
+              "value": "#0b5cad",
+              "$type": "color",
+              "comment": "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}"
+                },
+                "$type": "color",
+                "comment": "Used for the dropdown selected option indicator in the active state."
+              },
+              "name": "DROPDOWN_OPTION_INDICATOR_COLOR_SELECTED_ACTIVE",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "indicator",
+                "color",
+                "selected",
+                "active"
+              ]
+            }
+          }
+        }
+      },
+      "background": {
+        "color": {
+          "unselected": {
+            "default": {
+              "value": "rgba(164, 163, 168, 0.0)",
+              "$type": "color",
+              "comment": "Used for the background of an unselected dropdown option in the default state.",
+              "filePath": "src/tokens/contextual/dropdown.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.neutral.background.color.default}",
+                "$type": "color",
+                "comment": "Used for the background of an unselected dropdown option in the default state."
+              },
+              "name": "DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_DEFAULT",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "background",
+                "color",
+                "unselected",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "rgba(164, 163, 168, 0.16)",
+              "$type": "color",
+              "comment": "Used for the background of an unselected dropdown option in the hover state.",
+              "filePath": "src/tokens/contextual/dropdown.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.neutral.background.color.hover}",
+                "$type": "color",
+                "comment": "Used for the background of an unselected dropdown option in the hover state."
+              },
+              "name": "DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_HOVER",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "background",
+                "color",
+                "unselected",
+                "hover"
+              ]
+            },
+            "focus": {
+              "value": "rgba(164, 163, 168, 0.16)",
+              "$type": "color",
+              "comment": "Used for the background of an unselected dropdown option in the focus state.",
+              "filePath": "src/tokens/contextual/dropdown.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.neutral.background.color.focus}",
+                "$type": "color",
+                "comment": "Used for the background of an unselected dropdown option in the focus state."
+              },
+              "name": "DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_FOCUS",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "background",
+                "color",
+                "unselected",
+                "focus"
+              ]
+            },
+            "active": {
+              "value": "rgba(83, 81, 88, 0.24)",
+              "$type": "color",
+              "comment": "Used for the background of an unselected dropdown option in the active state.",
+              "filePath": "src/tokens/contextual/dropdown.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.neutral.background.color.active}",
+                "$type": "color",
+                "comment": "Used for the background of an unselected dropdown option in the active state."
+              },
+              "name": "DROPDOWN_OPTION_BACKGROUND_COLOR_UNSELECTED_ACTIVE",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "background",
+                "color",
+                "unselected",
+                "active"
+              ]
+            }
+          },
+          "selected": {
+            "default": {
+              "value": "#ececef",
+              "$type": "color",
+              "comment": "Used for the background of a selected dropdown option in the default state.",
+              "filePath": "src/tokens/contextual/dropdown.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.50}",
+                  "dark": "{color.neutral.800}"
+                },
+                "$type": "color",
+                "comment": "Used for the background of a selected dropdown option in the default state."
+              },
+              "name": "DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_DEFAULT",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "background",
+                "color",
+                "selected",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#dcdcde",
+              "$type": "color",
+              "comment": "Used for the background of a selected dropdown option in the hover state.",
+              "filePath": "src/tokens/contextual/dropdown.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.100}",
+                  "dark": "{color.neutral.700}"
+                },
+                "$type": "color",
+                "comment": "Used for the background of a selected dropdown option in the hover state."
+              },
+              "name": "DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_HOVER",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "background",
+                "color",
+                "selected",
+                "hover"
+              ]
+            },
+            "focus": {
+              "value": "#dcdcde",
+              "$type": "color",
+              "comment": "Used for the background of a selected dropdown option in the focus state.",
+              "filePath": "src/tokens/contextual/dropdown.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{dropdown.option.background.color.selected.hover}",
+                "$type": "color",
+                "comment": "Used for the background of a selected dropdown option in the focus state."
+              },
+              "name": "DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_FOCUS",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "background",
+                "color",
+                "selected",
+                "focus"
+              ]
+            },
+            "active": {
+              "value": "#bfbfc3",
+              "$type": "color",
+              "comment": "Used for the background of a selected dropdown option in the active state.",
+              "filePath": "src/tokens/contextual/dropdown.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.200}",
+                  "dark": "{color.neutral.900}"
+                },
+                "$type": "color",
+                "comment": "Used for the background of a selected dropdown option in the active state."
+              },
+              "name": "DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_ACTIVE",
+              "attributes": {},
+              "path": [
+                "dropdown",
+                "option",
+                "background",
+                "color",
+                "selected",
+                "active"
+              ]
+            }
+          }
+        }
+      }
+    }
+  },
   "filtered-search": {
     "token": {
       "type": {

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

@@ -525,6 +525,14 @@ $gl-filtered-search-token-data-background-color-hover: $gl-color-neutral-700; //
 $gl-filtered-search-token-data-background-color-default: $gl-color-neutral-800; // Used for the filtered search data 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-type-background-color-default: $gl-color-neutral-900; // Used for the filtered search type token background color in the default 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-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-default: $gl-color-neutral-800; // Used for the background of a selected dropdown option in the default 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-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-default: $gl-action-neutral-background-color-default; // Used for the background of an unselected dropdown option in the default state.
+$gl-dropdown-option-indicator-color-selected-active: $gl-color-neutral-100; // Used for the dropdown selected option indicator in the active state.
+$gl-dropdown-border-color: $gl-color-neutral-700; // Used for the border of a dropdown.
 $gl-datepicker-background-color: $gl-color-neutral-900; // Used for the background color of datepicker.
 $gl-button-disabled-border-color: $gl-color-neutral-800; // Used for the border of a disabled button.
 $gl-button-disabled-background-color: $gl-color-neutral-950; // Used for the background of a disabled button.
@@ -771,6 +779,14 @@ $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover 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-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-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-hover: $gl-color-neutral-0; // Used for the dropdown selected option indicator in the hover 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-text-color-disabled: $gl-action-disabled-foreground-color; // Used for the text of a dropdown option in the disabled state.
+$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-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $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-button-selected-background-color-active: $gl-button-default-primary-background-color-active; // Used for the background of a selected button in the active state.
@@ -870,6 +886,9 @@ $gl-action-selected-border-color-hover: $gl-action-selected-background-color-hov
 $gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
 $gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
 $gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover state.
+$gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
+$gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
+$gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
 $gl-button-selected-background-color-focus: $gl-button-default-primary-background-color-focus; // Used for the background of a selected button in the focus state.
 $gl-button-selected-foreground-color-active: $gl-button-default-primary-foreground-color-active; // Used for the foreground of a selected button in the active state.
 $gl-button-selected-foreground-color-focus: $gl-button-default-primary-foreground-color-focus; // Used for the foreground of a selected button in the focus state.

package/dist/tokens/scss/_tokens.scss

@@ -525,6 +525,14 @@ $gl-filtered-search-token-data-background-color-hover: $gl-color-neutral-200; //
 $gl-filtered-search-token-data-background-color-default: $gl-color-neutral-100; // Used for the filtered search data 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-type-background-color-default: $gl-color-neutral-50; // Used for the filtered search type token background color in the default 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-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-default: $gl-color-neutral-50; // Used for the background of a selected dropdown option in the default 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-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-default: $gl-action-neutral-background-color-default; // Used for the background of an unselected dropdown option in the default state.
+$gl-dropdown-option-indicator-color-selected-active: $gl-color-blue-700; // Used for the dropdown selected option indicator in the active state.
+$gl-dropdown-border-color: $gl-color-neutral-200; // Used for the border of a dropdown.
 $gl-datepicker-background-color: $gl-color-neutral-0; // Used for the background color of datepicker.
 $gl-button-disabled-border-color: $gl-color-neutral-100; // Used for the border of a disabled button.
 $gl-button-disabled-background-color: $gl-color-neutral-10; // Used for the background of a disabled button.
@@ -771,6 +779,14 @@ $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover 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-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-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-hover: $gl-control-background-color-selected-hover; // Used for the dropdown selected option indicator in the hover 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-text-color-disabled: $gl-action-disabled-foreground-color; // Used for the text of a dropdown option in the disabled state.
+$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-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
 $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-button-selected-background-color-active: $gl-button-default-primary-background-color-active; // Used for the background of a selected button in the active state.
@@ -870,6 +886,9 @@ $gl-action-selected-border-color-hover: $gl-action-selected-background-color-hov
 $gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
 $gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
 $gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover state.
+$gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
+$gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
+$gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
 $gl-button-selected-background-color-focus: $gl-button-default-primary-background-color-focus; // Used for the background of a selected button in the focus state.
 $gl-button-selected-foreground-color-active: $gl-button-default-primary-foreground-color-active; // Used for the foreground of a selected button in the active state.
 $gl-button-selected-foreground-color-focus: $gl-button-default-primary-foreground-color-focus; // Used for the foreground of a selected button in the focus state.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -627,6 +627,25 @@ $gl-button-disabled-background-color: var(--gl-button-disabled-background-color)
 $gl-button-disabled-border-color: var(--gl-button-disabled-border-color);
 $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-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);
+$gl-dropdown-option-text-color-active: var(--gl-dropdown-option-text-color-active);
+$gl-dropdown-option-text-color-disabled: var(--gl-dropdown-option-text-color-disabled);
+$gl-dropdown-option-indicator-color-selected-default: var(--gl-dropdown-option-indicator-color-selected-default);
+$gl-dropdown-option-indicator-color-selected-hover: var(--gl-dropdown-option-indicator-color-selected-hover);
+$gl-dropdown-option-indicator-color-selected-focus: var(--gl-dropdown-option-indicator-color-selected-focus);
+$gl-dropdown-option-indicator-color-selected-active: var(--gl-dropdown-option-indicator-color-selected-active);
+$gl-dropdown-option-background-color-unselected-default: var(--gl-dropdown-option-background-color-unselected-default);
+$gl-dropdown-option-background-color-unselected-hover: var(--gl-dropdown-option-background-color-unselected-hover);
+$gl-dropdown-option-background-color-unselected-focus: var(--gl-dropdown-option-background-color-unselected-focus);
+$gl-dropdown-option-background-color-unselected-active: var(--gl-dropdown-option-background-color-unselected-active);
+$gl-dropdown-option-background-color-selected-default: var(--gl-dropdown-option-background-color-selected-default);
+$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-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

@@ -303,11 +303,13 @@ const colors = {
 const backgroundColor = {
   ...colors,
   ...backgroundColors,
+  dropdown: 'var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #fff))',
 };
 
 const borderColor = {
   ...colors,
   ...borderColors,
+  dropdown: 'var(--gl-dropdown-border-color, var(--gl-color-neutral-200, #bfbfc3))',
 };
 
 const fill = {

package/dist/vendor/bootstrap-vue/src/constants/components.js

@@ -31,9 +31,6 @@ const NAME_FORM_SELECT_OPTION_GROUP = 'BFormSelectOptionGroup';
 const NAME_FORM_TEXT = 'BFormText';
 const NAME_FORM_TEXTAREA = 'BFormTextarea';
 const NAME_FORM_VALID_FEEDBACK = 'BFormValidFeedback';
-const NAME_ICON = 'BIcon';
-const NAME_ICONSTACK = 'BIconstack';
-const NAME_ICON_BASE = 'BIconBase';
 const NAME_INPUT_GROUP = 'BInputGroup';
 const NAME_INPUT_GROUP_ADDON = 'BInputGroupAddon';
 const NAME_INPUT_GROUP_APPEND = 'BInputGroupAppend';
@@ -79,4 +76,4 @@ const NAME_TRANSITION = 'BVTransition';
 const NAME_TRANSPORTER = 'BVTransporter';
 const NAME_TRANSPORTER_TARGET = 'BVTransporterTarget';
 
-export { NAME_BADGE, NAME_BREADCRUMB, NAME_BREADCRUMB_ITEM, NAME_BREADCRUMB_LINK, NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_BUTTON_GROUP, NAME_COL, NAME_COLLAPSE, NAME_COLLAPSE_HELPER, NAME_DROPDOWN, NAME_DROPDOWN_DIVIDER, NAME_DROPDOWN_FORM, NAME_DROPDOWN_GROUP, NAME_DROPDOWN_HEADER, NAME_DROPDOWN_ITEM, NAME_DROPDOWN_ITEM_BUTTON, NAME_DROPDOWN_TEXT, NAME_FORM, NAME_FORM_BUTTON_LABEL_CONTROL, NAME_FORM_CHECKBOX, NAME_FORM_CHECKBOX_GROUP, NAME_FORM_GROUP, NAME_FORM_INPUT, NAME_FORM_INVALID_FEEDBACK, NAME_FORM_RADIO, NAME_FORM_RADIO_GROUP, NAME_FORM_RATING_STAR, NAME_FORM_ROW, NAME_FORM_SELECT, NAME_FORM_SELECT_OPTION, NAME_FORM_SELECT_OPTION_GROUP, NAME_FORM_TEXT, NAME_FORM_TEXTAREA, NAME_FORM_VALID_FEEDBACK, NAME_ICON, NAME_ICONSTACK, NAME_ICON_BASE, NAME_INPUT_GROUP, NAME_INPUT_GROUP_ADDON, NAME_INPUT_GROUP_APPEND, NAME_INPUT_GROUP_PREPEND, NAME_INPUT_GROUP_TEXT, NAME_LINK, NAME_MODAL, NAME_NAV, NAME_NAVBAR, NAME_NAVBAR_BRAND, NAME_NAV_ITEM, NAME_NAV_ITEM_DROPDOWN, NAME_POPOVER, NAME_POPOVER_HELPER, NAME_POPOVER_TEMPLATE, NAME_POPPER, NAME_PROGRESS, NAME_PROGRESS_BAR, NAME_TAB, NAME_TABLE, NAME_TABLE_CELL, NAME_TABLE_LITE, NAME_TABLE_SIMPLE, NAME_TABS, NAME_TAB_BUTTON_HELPER, NAME_TBODY, NAME_TFOOT, NAME_TH, NAME_THEAD, NAME_TOAST, NAME_TOASTER, NAME_TOAST_POP, NAME_TOOLTIP, NAME_TOOLTIP_HELPER, NAME_TOOLTIP_TEMPLATE, NAME_TR, NAME_TRANSITION, NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET };
+export { NAME_BADGE, NAME_BREADCRUMB, NAME_BREADCRUMB_ITEM, NAME_BREADCRUMB_LINK, NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_BUTTON_GROUP, NAME_COL, NAME_COLLAPSE, NAME_COLLAPSE_HELPER, NAME_DROPDOWN, NAME_DROPDOWN_DIVIDER, NAME_DROPDOWN_FORM, NAME_DROPDOWN_GROUP, NAME_DROPDOWN_HEADER, NAME_DROPDOWN_ITEM, NAME_DROPDOWN_ITEM_BUTTON, NAME_DROPDOWN_TEXT, NAME_FORM, NAME_FORM_BUTTON_LABEL_CONTROL, NAME_FORM_CHECKBOX, NAME_FORM_CHECKBOX_GROUP, NAME_FORM_GROUP, NAME_FORM_INPUT, NAME_FORM_INVALID_FEEDBACK, NAME_FORM_RADIO, NAME_FORM_RADIO_GROUP, NAME_FORM_RATING_STAR, NAME_FORM_ROW, NAME_FORM_SELECT, NAME_FORM_SELECT_OPTION, NAME_FORM_SELECT_OPTION_GROUP, NAME_FORM_TEXT, NAME_FORM_TEXTAREA, NAME_FORM_VALID_FEEDBACK, NAME_INPUT_GROUP, NAME_INPUT_GROUP_ADDON, NAME_INPUT_GROUP_APPEND, NAME_INPUT_GROUP_PREPEND, NAME_INPUT_GROUP_TEXT, NAME_LINK, NAME_MODAL, NAME_NAV, NAME_NAVBAR, NAME_NAVBAR_BRAND, NAME_NAV_ITEM, NAME_NAV_ITEM_DROPDOWN, NAME_POPOVER, NAME_POPOVER_HELPER, NAME_POPOVER_TEMPLATE, NAME_POPPER, NAME_PROGRESS, NAME_PROGRESS_BAR, NAME_TAB, NAME_TABLE, NAME_TABLE_CELL, NAME_TABLE_LITE, NAME_TABLE_SIMPLE, NAME_TABS, NAME_TAB_BUTTON_HELPER, NAME_TBODY, NAME_TFOOT, NAME_TH, NAME_THEAD, NAME_TOAST, NAME_TOASTER, NAME_TOAST_POP, NAME_TOOLTIP, NAME_TOOLTIP_HELPER, NAME_TOOLTIP_TEMPLATE, NAME_TR, NAME_TRANSITION, NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET };

package/dist/vendor/bootstrap-vue/src/constants/regex.js

@@ -17,7 +17,6 @@ const RX_START_SPACE_WORD = /(\s|^)(\w)/g;
 const RX_TRIM_LEFT = /^\s+/;
 const RX_TRIM_RIGHT = /\s+$/;
 const RX_UNDERSCORE = /_/g;
-const RX_UN_KEBAB = /-(\w)/g;
 
 // --- URL ---
 
@@ -29,12 +28,8 @@ const RX_QUERY_START = /^(\?|#|&)/;
 
 const RX_COL_CLASS = /^col-/;
 
-// --- Icon ---
-
-const RX_ICON_PREFIX = /^BIcon/;
-
 // --- Locale ---
 
 const RX_STRIP_LOCALE_MODS = /-u-.+/;
 
-export { RX_ARRAY_NOTATION, RX_BV_PREFIX, RX_COL_CLASS, RX_DIGITS, RX_ENCODED_COMMA, RX_ENCODE_REVERSE, RX_HASH, RX_HASH_ID, RX_HTML_TAGS, RX_HYPHENATE, RX_ICON_PREFIX, RX_LOWER_UPPER, RX_NUMBER, RX_PLUS, RX_QUERY_START, RX_REGEXP_REPLACE, RX_SPACES, RX_SPACE_SPLIT, RX_START_SPACE_WORD, RX_STRIP_LOCALE_MODS, RX_TRIM_LEFT, RX_TRIM_RIGHT, RX_UNDERSCORE, RX_UN_KEBAB };
+export { RX_ARRAY_NOTATION, RX_BV_PREFIX, RX_COL_CLASS, RX_DIGITS, RX_ENCODED_COMMA, RX_ENCODE_REVERSE, RX_HASH, RX_HASH_ID, RX_HTML_TAGS, RX_HYPHENATE, RX_LOWER_UPPER, RX_NUMBER, RX_PLUS, RX_QUERY_START, RX_REGEXP_REPLACE, RX_SPACES, RX_SPACE_SPLIT, RX_START_SPACE_WORD, RX_STRIP_LOCALE_MODS, RX_TRIM_LEFT, RX_TRIM_RIGHT, RX_UNDERSCORE };

package/dist/vendor/bootstrap-vue/src/index.js

@@ -2,10 +2,6 @@ import { installFactory } from './utils/plugins';
 import { componentsPlugin } from './components';
 export { BVConfigPlugin as BVConfig, BVConfigPlugin } from './bv-config';
 export { BVToastPlugin } from './components/toast/helpers/bv-toast';
-export { BootstrapVueIcons, IconsPlugin } from './icons/plugin';
-export { BIcon } from './icons/icon';
-export { BIconstack } from './icons/iconstack';
-export * from './icons/icons';
 export { BBadge } from './components/badge/badge';
 export { BBreadcrumb } from './components/breadcrumb/breadcrumb';
 export { BBreadcrumbItem } from './components/breadcrumb/breadcrumb-item';