@gitlab/ui 123.6.0 → 123.7.0

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

@@ -294,6 +294,16 @@ $gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for ava
 $gl-avatar-fallback-background-color-green: #91d4a83d; // Green background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-orange: #e9be743d; // Orange background for avatar fallback with no particular meaning.
 $gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral background for avatar fallback with no particular meaning.
+$gl-button-default-primary-background-color-default: rgba(137, 136, 141, 0.4); // Used for the background of an default primary button in the default state.
+$gl-button-default-primary-background-color-hover: rgba(137, 136, 141, 0.64); // Used for the background of an default primary button in the hover state.
+$gl-button-default-primary-background-color-active: rgba(137, 136, 141, 0.32); // Used for the background of an default primary button in the active state.
+$gl-button-confirm-secondary-background-color-default: rgba(66, 143, 220, 0.4); // Used for the background of an outlined confirm (positive) button in the default state.
+$gl-button-confirm-secondary-background-color-hover: rgba(66, 143, 220, 0.64); // Used for the background of an outlined confirm (positive) button in the hover state.
+$gl-button-confirm-secondary-background-color-active: rgba(66, 143, 220, 0.32); // Used for the background of an outlined confirm (positive) button in the active state.
+$gl-button-danger-secondary-background-color-default: rgba(236, 89, 65, 0.40); // Used for the background of an outlined danger (destructive) button in the default state.
+$gl-button-danger-secondary-background-color-hover: rgba(236, 89, 65, 0.64); // Used for the background of an outlined danger (destructive) button in the hover state.
+$gl-button-danger-secondary-background-color-active: rgba(236, 89, 65, 0.32); // Used for the background of an outlined danger (destructive) button in the active state.
+$gl-button-disabled-background-color: rgba(137, 136, 141, 0.16); // Used for the background of a disabled button.
 $gl-chart-threshold-area-color: rgba(221,43,14,0.1); // Used in charts to delineate a threshold area in a chart.
 $gl-illustration-stroke-color-default: #e3e3e8; // Default stroke color to define shape and provide essential detail.
 $gl-illustration-stroke-width-default: 1.5; // Default stroke width to define shape and provide essential detail.
@@ -556,6 +566,7 @@ $gl-action-confirm-background-color-active: rgba(66, 143, 220, 0.16); // Used fo
 $gl-action-danger-background-color-default: rgba(236, 89, 65, 0.0); // Used for the background of a danger (destructive) action in the default state.
 $gl-action-danger-background-color-hover: rgba(236, 89, 65, 0.4); // Used for the background of a danger (destructive) action in the hover state.
 $gl-action-danger-background-color-active: rgba(236, 89, 65, 0.16); // Used for the background of a danger (destructive) action in the active state.
+$gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
 $gl-text-primary: #ececef; // Use text.color.default instead.
 $gl-text-secondary: #89888d; // Use text.color.subtle instead.
 $gl-text-tertiary: #737278; // Use text.color.disabled instead.
@@ -574,12 +585,16 @@ $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to
 $gl-shadow-color-default: $gl-color-alpha-dark-40; // Used for the default shadow color.
 $gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert.
 $gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
+$gl-alert-info-title-color: $gl-color-blue-300; // Used for the title color of an info alert.
 $gl-alert-info-border-top-color: $gl-color-blue-400; // Used for the border color of an info alert.
 $gl-alert-info-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of an info alert.
+$gl-alert-success-title-color: $gl-color-green-300; // Used for the title color of a success alert.
 $gl-alert-success-border-top-color: $gl-color-green-400; // Used for the border color of a success alert.
 $gl-alert-success-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a success alert.
+$gl-alert-warning-title-color: $gl-color-orange-300; // Used for the title color of a warning alert.
 $gl-alert-warning-border-top-color: $gl-color-orange-400; // Used for the border color of a warning alert.
 $gl-alert-warning-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a warning alert.
+$gl-alert-danger-title-color: $gl-color-red-300; // Used for the title color of a danger alert.
 $gl-alert-danger-border-top-color: $gl-color-red-400; // Used for the border color of a danger alert.
 $gl-alert-danger-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a danger alert.
 $gl-avatar-border-color-default: $gl-color-alpha-light-8; // Used to define the edge of an avatar.
@@ -719,9 +734,7 @@ $gl-broadcast-banner-text-color-lightindigo: $gl-color-neutral-0; // Used for th
 $gl-broadcast-banner-text-color-lightred: $gl-color-neutral-0; // Used for the text for the lightred banner type.
 $gl-broadcast-banner-text-color-red: $gl-color-neutral-0; // Used for the text for the red banner type.
 $gl-button-default-primary-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a default primary button in the default state.
-$gl-button-default-primary-background-color-default: rgba(137, 136, 141, 0.4); // Used for the background of an default primary button in the default state.
-$gl-button-default-primary-background-color-hover: rgba(137, 136, 141, 0.64); // Used for the background of an default primary button in the hover state.
-$gl-button-default-primary-background-color-active: rgba(137, 136, 141, 0.32); // Used for the background of an default primary button in the active state.
+$gl-button-default-primary-background-color-focus: $gl-button-default-primary-background-color-hover; // Used for the background of an default primary button in the focus state.
 $gl-button-default-primary-border-color-default: $gl-color-alpha-0; // Used for the border of an default primary button in the default state.
 $gl-button-default-primary-border-color-hover: $gl-color-alpha-0; // Used for the border of an default primary button in the hover state.
 $gl-button-default-primary-border-color-active: $gl-color-alpha-0; // Used for the border of an default primary button in the active state.
@@ -735,9 +748,7 @@ $gl-button-confirm-primary-border-color-active: $gl-color-alpha-0; // Used for t
 $gl-button-confirm-secondary-foreground-color-default: $gl-color-blue-100; // Used for the foreground of a confirm (positive) button in the default state.
 $gl-button-confirm-secondary-foreground-color-hover: $gl-color-blue-100; // Used for the foreground of a confirm (positive) button in the hover state.
 $gl-button-confirm-secondary-foreground-color-active: $gl-color-blue-100; // Used for the foreground of a confirm (positive) button in the active state.
-$gl-button-confirm-secondary-background-color-default: rgba(66, 143, 220, 0.4); // Used for the background of an outlined confirm (positive) button in the default state.
-$gl-button-confirm-secondary-background-color-hover: rgba(66, 143, 220, 0.64); // Used for the background of an outlined confirm (positive) button in the hover state.
-$gl-button-confirm-secondary-background-color-active: rgba(66, 143, 220, 0.32); // Used for the background of an outlined confirm (positive) button in the active state.
+$gl-button-confirm-secondary-background-color-focus: $gl-button-confirm-secondary-background-color-hover; // Used for the background of an outlined confirm (positive) button in the focus state.
 $gl-button-confirm-secondary-border-color-default: $gl-color-alpha-0; // Used for the border of an outlined confirm (positive) button in the default state.
 $gl-button-confirm-secondary-border-color-hover: $gl-color-alpha-0; // Used for the border of an outlined confirm (positive) button in the hover state.
 $gl-button-confirm-secondary-border-color-active: $gl-color-alpha-0; // Used for the border of an outlined confirm (positive) button in the active state.
@@ -754,9 +765,7 @@ $gl-button-danger-primary-border-color-active: $gl-color-alpha-0; // Used for th
 $gl-button-danger-secondary-foreground-color-default: $gl-color-red-100; // Used for the foreground of a danger (destructive) button in the default state.
 $gl-button-danger-secondary-foreground-color-hover: $gl-color-red-50; // Used for the foreground of a danger (destructive) button in the hover state.
 $gl-button-danger-secondary-foreground-color-active: $gl-color-red-50; // Used for the foreground of a danger (destructive) button in the active state.
-$gl-button-danger-secondary-background-color-default: rgba(236, 89, 65, 0.40); // Used for the background of an outlined danger (destructive) button in the default state.
-$gl-button-danger-secondary-background-color-hover: rgba(236, 89, 65, 0.64); // Used for the background of an outlined danger (destructive) button in the hover state.
-$gl-button-danger-secondary-background-color-active: rgba(236, 89, 65, 0.32); // Used for the background of an outlined danger (destructive) button in the active state.
+$gl-button-danger-secondary-background-color-focus: $gl-button-danger-secondary-background-color-hover; // Used for the background of an outlined danger (destructive) button in the focus state.
 $gl-button-danger-secondary-border-color-default: $gl-color-alpha-0; // Used for the border of an outlined danger (destructive) button in the default state.
 $gl-button-danger-secondary-border-color-hover: $gl-color-alpha-0; // Used for the border of an outlined danger (destructive) button in the hover state.
 $gl-button-danger-secondary-border-color-active: $gl-color-alpha-0; // Used for the border of an outlined danger (destructive) button in the active state.
@@ -765,12 +774,18 @@ $gl-button-danger-tertiary-background-color-hover: $gl-action-danger-background-
 $gl-button-danger-tertiary-background-color-active: $gl-action-danger-background-color-active; // Used for the background of a borderless, tertiary danger (destructive) button in the active state.
 $gl-button-dashed-border-color-default: $gl-color-neutral-400; // Used for the border of a dashed button in the default state.
 $gl-button-dashed-border-color-active: $gl-color-neutral-300; // Used for the border of a dashed button in the active state.
+$gl-button-selected-foreground-color-default: $gl-color-neutral-900; // Used for the foreground of a selected button in the default state.
+$gl-button-selected-foreground-color-hover: $gl-color-neutral-950; // Used for the foreground of a selected button in the hover state.
+$gl-button-selected-foreground-color-focus: $gl-color-neutral-950; // Used for the foreground of a selected button in the focus state.
+$gl-button-selected-foreground-color-active: $gl-color-neutral-950; // Used for the foreground of a selected button in the active state.
 $gl-button-selected-background-color-default: $gl-color-neutral-300; // Used for the background of a selected button in the default state.
+$gl-button-selected-background-color-hover: $gl-color-neutral-200; // Used for the background of a selected button in the hover state.
+$gl-button-selected-background-color-focus: $gl-color-neutral-200; // Used for the background of a selected button in the focus state.
+$gl-button-selected-background-color-active: $gl-color-neutral-400; // Used for the background of a selected button in the active state.
 $gl-button-selected-border-color-default: $gl-color-alpha-0; // Used for the border of a selected button in the default state.
 $gl-button-selected-border-color-hover: $gl-color-alpha-0; // Used for the border of a selected button in the hover state.
 $gl-button-selected-border-color-active: $gl-color-alpha-0; // Used for the border of a selected button in the active state.
 $gl-button-disabled-foreground-color: $gl-color-neutral-400; // Used for the foreground of a disabled button.
-$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-button-count-background-color: $gl-color-alpha-light-16; // Used for the background of a button count element.
 $gl-chart-axis-line-color: $gl-color-neutral-700; // Used in charts for axis line color.
@@ -845,6 +860,9 @@ $gl-action-strong-neutral-background-color-default: $gl-color-neutral-700; // Us
 $gl-action-strong-neutral-background-color-hover: $gl-color-neutral-600; // Used for the background of a strong neutral action in the hover state.
 $gl-action-strong-neutral-background-color-active: $gl-color-neutral-500; // Used for the background of a strong neutral action in the active state.
 $gl-action-strong-neutral-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a strong neutral action in the default state.
+$gl-action-strong-neutral-foreground-color-hover: $gl-color-neutral-0; // Used for the foreground of a strong neutral action in the hover state.
+$gl-action-strong-neutral-foreground-color-focus: $gl-color-neutral-0; // Used for the foreground of a strong neutral action in the focus state.
+$gl-action-strong-neutral-foreground-color-active: $gl-color-neutral-0; // Used for the foreground of a strong neutral action in the active state.
 $gl-action-strong-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a strong neutral action in the default state.
 $gl-background-color-default: $gl-color-neutral-950; // Used for the default background color.
 $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.
@@ -852,7 +870,6 @@ $gl-background-color-strong: $gl-color-neutral-800; // Used to make the backgrou
 $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disabled section.
 $gl-background-color-overlap: $gl-color-neutral-900; // Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.
 $gl-background-color-section: $gl-color-neutral-800; // Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.
-$gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
 $gl-control-background-color-default: $gl-color-alpha-dark-40; // Used for form control (input, radio button, checkbox, textarea) default background.
 $gl-control-background-color-disabled: $gl-color-alpha-light-4; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-concatenation: $gl-color-alpha-light-4; // Used for the background of static content that prepends or appends a text input.
@@ -929,14 +946,10 @@ $gl-shadow-md: 0 0 1px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-defaul
 $gl-shadow-lg: 0 0 2px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 4px 12px $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.
 $gl-alert-border-radius: $gl-border-radius-lg; // Used for alert border radius.
 $gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
-$gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
-$gl-alert-info-title-color: $gl-color-blue-300; // Used for the title color of an info alert.
+$gl-alert-neutral-background-color: $gl-background-color-subtle; // Used for the background color of a neutral alert.
 $gl-alert-info-background-color: $gl-background-color-subtle; // Used for the background color of an info alert.
-$gl-alert-success-title-color: $gl-color-green-300; // Used for the title color of a success alert.
 $gl-alert-success-background-color: $gl-background-color-subtle; // Used for the background color of a success alert.
-$gl-alert-warning-title-color: $gl-color-orange-300; // Used for the title color of a warning alert.
 $gl-alert-warning-background-color: $gl-background-color-subtle; // Used for the background color of a warning alert.
-$gl-alert-danger-title-color: $gl-color-red-300; // Used for the title color of a danger alert.
 $gl-alert-danger-background-color: $gl-background-color-subtle; // Used for the background color of a danger alert.
 $gl-badge-muted-background-color-hover: $gl-badge-muted-background-color-default; // Used for the background of a muted badge in the hover state.
 $gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a muted badge in the focus state.
@@ -962,7 +975,6 @@ $gl-badge-tier-icon-color-focus: $gl-badge-tier-icon-color-hover; // Used for th
 $gl-button-default-primary-foreground-color-hover: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a default primary button in the hover state.
 $gl-button-default-primary-foreground-color-focus: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a default primary button in the focus state.
 $gl-button-default-primary-foreground-color-active: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a default primary button in the active state.
-$gl-button-default-primary-background-color-focus: $gl-button-default-primary-background-color-hover; // Used for the background of an default primary button in the focus state.
 $gl-button-default-primary-border-color-focus: $gl-button-default-primary-border-color-hover; // Used for the border of an default primary button in the focus state.
 $gl-button-default-tertiary-foreground-color-default: $gl-action-neutral-foreground-color-default; // Used for the foreground of a default borderless, tertiary button in the default state.
 $gl-button-default-tertiary-background-color-focus: $gl-action-neutral-background-color-focus; // Used for the background of a default borderless, tertiary button in the focus state.
@@ -972,7 +984,6 @@ $gl-button-confirm-primary-background-color-hover: $gl-action-strong-confirm-bac
 $gl-button-confirm-primary-background-color-active: $gl-action-strong-confirm-background-color-active; // Used for the background of a confirm (positive) primary button in the active state.
 $gl-button-confirm-primary-border-color-focus: $gl-button-confirm-primary-border-color-hover; // Used for the border of a confirm (positive) primary button in the focus state.
 $gl-button-confirm-secondary-foreground-color-focus: $gl-button-confirm-secondary-foreground-color-hover; // Used for the foreground of a confirm (positive) button in the focus state.
-$gl-button-confirm-secondary-background-color-focus: $gl-button-confirm-secondary-background-color-hover; // Used for the background of an outlined confirm (positive) button in the focus state.
 $gl-button-confirm-secondary-border-color-focus: $gl-button-confirm-secondary-border-color-hover; // Used for the border of an outlined confirm (positive) button in the focus state.
 $gl-button-confirm-tertiary-foreground-color-default: $gl-action-confirm-foreground-color-default; // Used for the foreground of a borderless, tertiary confirm (positive) button in the default state.
 $gl-button-confirm-tertiary-foreground-color-hover: $gl-action-confirm-foreground-color-hover; // Used for the foreground of a borderless, tertiary confirm (positive) button in the hover state.
@@ -985,7 +996,6 @@ $gl-button-danger-primary-foreground-color-active: $gl-button-danger-primary-for
 $gl-button-danger-primary-background-color-focus: $gl-button-danger-primary-background-color-hover; // Used for the background of a danger (destructive) primary button in the focus state.
 $gl-button-danger-primary-border-color-focus: $gl-button-danger-primary-border-color-hover; // Used for the border of a danger (destructive) primary button in the focus state.
 $gl-button-danger-secondary-foreground-color-focus: $gl-button-danger-secondary-foreground-color-hover; // Used for the foreground of a danger (destructive) button in the focus state.
-$gl-button-danger-secondary-background-color-focus: $gl-button-danger-secondary-background-color-hover; // Used for the background of an outlined danger (destructive) button in the focus state.
 $gl-button-danger-secondary-border-color-focus: $gl-button-danger-secondary-border-color-hover; // Used for the border of an outlined danger (destructive) button in the focus state.
 $gl-button-danger-tertiary-foreground-color-default: $gl-action-danger-foreground-color-default; // Used for the foreground of a borderless, tertiary danger (destructive) button in the default state.
 $gl-button-danger-tertiary-foreground-color-hover: $gl-action-danger-foreground-color-hover; // Used for the foreground of a borderless, tertiary danger (destructive) button in the hover state.
@@ -995,9 +1005,6 @@ $gl-button-danger-tertiary-border-color-default: $gl-action-danger-border-color-
 $gl-button-dashed-border-color-hover: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the hover state.
 $gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the focus state.
 $gl-button-link-text-color-default: $gl-text-color-link; // Used for the text of a link button in the default state.
-$gl-button-selected-foreground-color-default: $gl-color-neutral-900; // Used for the foreground of a selected button in the default state.
-$gl-button-selected-background-color-hover: $gl-color-neutral-200; // Used for the background of a selected button in the hover state.
-$gl-button-selected-background-color-active: $gl-color-neutral-400; // Used for the background of a selected button in the active state.
 $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-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text color of axis titles and labels.
 $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
@@ -1050,7 +1057,6 @@ $gl-action-strong-confirm-background-color-focus: $gl-action-strong-confirm-back
 $gl-action-strong-confirm-foreground-color-hover: $gl-action-strong-confirm-foreground-color-default; // Used for the foreground of a strong confirm action in the hover state.
 $gl-action-strong-confirm-border-color-hover: $gl-action-strong-confirm-border-color-default; // Used for the border of a strong confirm action in the hover state.
 $gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.
-$gl-action-strong-neutral-foreground-color-hover: $gl-color-neutral-0; // Used for the foreground of a strong neutral action in the hover state.
 $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
 $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
@@ -1092,10 +1098,6 @@ $gl-button-danger-tertiary-border-color-active: $gl-action-danger-border-color-a
 $gl-button-link-text-color-hover: $gl-button-link-text-color-default; // Used for the text of a link button in the hover state.
 $gl-button-link-text-color-focus: $gl-button-link-text-color-default; // Used for the text of a link button in the focus state.
 $gl-button-link-text-color-active: $gl-button-link-text-color-default; // Used for the text of a link button in the active state.
-$gl-button-selected-foreground-color-hover: $gl-color-neutral-950; // Used for the foreground of a selected button in the hover state.
-$gl-button-selected-foreground-color-focus: $gl-color-neutral-950; // Used for the foreground of a selected button in the focus state.
-$gl-button-selected-foreground-color-active: $gl-color-neutral-950; // Used for the foreground of a selected button in the active state.
-$gl-button-selected-background-color-focus: $gl-color-neutral-200; // Used for the background of a selected button in the focus state.
 $gl-card-border-radius: $gl-border-radius-default; // Used for card border radius.
 $gl-chart-axis-pointer-color: $gl-icon-color-subtle; // Used in charts for the color of the reference line and axis value under mouse pointer.
 $gl-chart-zoom-handle-color: $gl-icon-color-subtle; // Used in charts for the handle color when zooming in on a specific area of data.
@@ -1110,7 +1112,6 @@ $gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color
 $gl-action-selected-border-color-focus: $gl-action-selected-background-color-focus; // Used for the border of a selected action in the focus state.
 $gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a strong confirm action in the focus state.
 $gl-action-strong-confirm-border-color-focus: $gl-action-strong-confirm-border-color-hover; // Used for the border of a strong confirm action in the focus state.
-$gl-action-strong-neutral-foreground-color-focus: $gl-action-strong-neutral-foreground-color-hover; // Used for the foreground of a strong neutral action in the focus state.
 $gl-action-strong-neutral-border-color-focus: $gl-action-strong-neutral-border-color-hover; // Used for the border of a strong neutral action in the focus state.
 $gl-control-border-radius: $gl-border-radius-default; // Used for form control (input, radio button, checkbox, textarea) default border radius.
 $gl-button-border-radius: $gl-action-border-radius; // Used for button border radius.
@@ -1118,6 +1119,5 @@ $gl-button-confirm-primary-foreground-color-focus: $gl-action-strong-confirm-for
 $gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
 $gl-action-strong-confirm-foreground-color-active: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a strong confirm action in the active state.
 $gl-action-strong-confirm-border-color-active: $gl-action-strong-confirm-border-color-focus; // Used for the border of a strong confirm action in the active state.
-$gl-action-strong-neutral-foreground-color-active: $gl-action-strong-neutral-foreground-color-focus; // Used for the foreground of a strong neutral action in the active state.
 $gl-action-strong-neutral-border-color-active: $gl-action-strong-neutral-border-color-focus; // Used for the border of a strong neutral action in the active state.
 $gl-button-confirm-primary-foreground-color-active: $gl-action-strong-confirm-foreground-color-active; // Used for the foreground of a confirm (positive) primary button in the active state.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "123.6.0",
+  "version": "123.7.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -142,9 +142,9 @@
     "glob": "11.0.3",
     "globby": "^14.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "30.0.5",
-    "jest-circus": "30.0.5",
-    "jest-environment-jsdom": "30.0.5",
+    "jest": "30.2.0",
+    "jest-circus": "30.2.0",
+    "jest-environment-jsdom": "30.2.0",
     "jest-image-snapshot": "^6.5.1",
     "merge-cobertura": "^1.0.4",
     "mockdate": "^3.0.5",
@@ -169,9 +169,9 @@
     "start-server-and-test": "^2.1.2",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.0.4",
+    "style-dictionary": "^5.1.0",
     "style-loader": "^4",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "3.4.18",
     "vue": "2.7.16",
     "vue-docgen-loader": "1.5.1",
     "vue-loader": "^15.11.1",

package/src/components/base/filtered_search/filtered_search.vue

@@ -70,7 +70,7 @@ export default {
         }
 
         // eslint-disable-next-line no-underscore-dangle
-        const isOk = Array.isArray(value) && value.every(({ token }) => token.__v_skip);
+        const isOk = Array.isArray(value) && value.every(({ token }) => !token || token.__v_skip);
         if (!isOk) {
           // eslint-disable-next-line no-console
           console.warn(

package/src/components/base/filtered_search/filtered_search_suggestion.vue

@@ -55,14 +55,12 @@ export default {
 
 <template>
   <li
-    role="presentation"
     class="gl-dropdown-item gl-filtered-search-suggestion"
     :class="{ 'gl-filtered-search-suggestion-active': isActive }"
   >
     <button
       data-testid="filtered-search-suggestion"
       tabindex="-1"
-      role="menuitem"
       class="dropdown-item"
       @mousedown.prevent="emitValue"
     >

package/src/components/base/filtered_search/filtered_search_suggestion_list.vue

@@ -97,6 +97,7 @@ export default {
       ) {
         // The user wants to move past the end of the list, so ensure nothing is selected.
         this.activeIdx = NO_ACTIVE_ITEM;
+        this.$refs.top.scrollIntoView();
       } else {
         const index =
           this.activeIdx === DEFER_TO_INITIAL_VALUE
@@ -116,6 +117,7 @@ export default {
 </script>
 <template>
   <ul :class="listClasses">
+    <li ref="top"></li>
     <!-- @slot The suggestions (implemented with GlFilteredSearchSuggestion). -->
     <slot></slot>
   </ul>

package/src/components/base/filtered_search/filtered_search_term.vue

@@ -104,7 +104,18 @@ export default {
         return [];
       }
 
-      const tokens = this.availableTokens.filter((token) => match(token.title, this.value.data));
+      const tokens = this.availableTokens.filter((token) => {
+        if (typeof token.match === 'function') {
+          return token.match.call(null, {
+            query: this.value.data,
+            title: token.title,
+            defaultMatcher: match,
+          });
+        }
+
+        return match(token.title, this.value.data);
+      });
+
       if (this.termsAsTokens() && this.value.data) {
         tokens.push({
           ...termTokenDefinition,

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -344,7 +344,7 @@ export default {
 
     <gl-filtered-search-token-segment
       key="title-segment"
-      :value="config.title"
+      :value="config.segmentTitle || config.title"
       :active="isSegmentActive($options.segments.SEGMENT_TITLE)"
       :cursor-position="intendedCursorPosition"
       :options="availableTokensWithSelf"

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -330,6 +330,10 @@ export default {
       }
     },
 
+    showHeader(option) {
+      return option.value?.toString().startsWith('gl-filtered-search-suggestion-group-');
+    },
+
     handleInputKeydown(e) {
       const { key } = e;
       const { suggestions, input } = this.$refs;
@@ -450,25 +454,42 @@ export default {
           v-if="hasOptionsOrSuggestions"
           :key="`operator-${_uid}`"
           ref="suggestions"
+          role="list"
+          tabindex="0"
           :initial-value="defaultSuggestedValue"
           @suggestion="applySuggestion"
         >
           <template v-if="options">
-            <gl-filtered-search-suggestion
-              v-for="(option, idx) in options"
-              :key="`${option.value}-${idx}`"
-              :value="option.value"
-              :icon-name="option.icon"
-            >
-              <slot name="option" v-bind="{ option }">
-                <template v-if="option.component">
-                  <component :is="option.component" :option="option" />
-                </template>
-                <template v-else>
-                  {{ option[optionTextField] }}
-                </template>
-              </slot>
-            </gl-filtered-search-suggestion>
+            <template v-for="(option, idx) in options">
+              <template v-if="showHeader(option)">
+                <li v-if="idx > 0" :key="`separator-${idx}`">
+                  <hr class="gl-border-t -gl-mx-2 gl-my-2" />
+                </li>
+                <li
+                  :key="`header-${idx}`"
+                  role="presentation"
+                  data-testid="filtered-search-section-header"
+                  class="gl-mx-0 gl-pb-2 gl-pl-5 gl-pt-3 gl-text-sm gl-font-bold gl-text-strong"
+                >
+                  {{ option.title }}
+                </li>
+              </template>
+              <gl-filtered-search-suggestion
+                v-else
+                :key="`${option.value}-${idx}`"
+                :value="option.value"
+                :icon-name="option.icon"
+              >
+                <slot name="option" v-bind="{ option }">
+                  <template v-if="option.component">
+                    <component :is="option.component" :option="option" />
+                  </template>
+                  <template v-else>
+                    {{ option[optionTextField] }}
+                  </template>
+                </slot>
+              </gl-filtered-search-suggestion>
+            </template>
           </template>
 
           <slot v-else name="suggestions"></slot>

package/src/components/base/form/form_select/form_select.vue

@@ -28,6 +28,11 @@ export default {
       required: false,
       default: '',
     },
+    selectSize: {
+      type: Number,
+      required: false,
+      default: 1,
+    },
   },
   computed: {
     cssClasses() {
@@ -56,7 +61,13 @@ export default {
 </script>
 <template>
   <span class="gl-form-select-wrapper" :class="cssClasses">
-    <b-form-select class="gl-form-select" v-bind="$attrs" :class="selectClass" v-on="$listeners">
+    <b-form-select
+      class="gl-form-select"
+      v-bind="$attrs"
+      :class="selectClass"
+      :select-size="selectSize"
+      v-on="$listeners"
+    >
       <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
       <template v-for="slot in Object.keys($slots)" #[slot]>
         <slot :name="slot"></slot>

package/src/components/experimental/experiment_badge/experiment_badge.vue

@@ -9,7 +9,7 @@ import { badgeTypeValidator } from './constants';
 export const i18n = {
   experiment: {
     BADGE: 'Experiment',
-    HELP_PAGE_URL: 'https://docs.gitlab.com/ee/policy/development_stages_support.html#experiment',
+    HELP_PAGE_URL: 'https://docs.gitlab.com/policy/development_stages_support/#experiment',
     POPOVER_TITLE: "What's an experiment?",
     POPOVER_CONTENT:
       'An %{linkStart}experiment%{linkEnd} is not yet production-ready, but is released for initial testing and feedback during development.%{line-breakStart}Experiments:%{line-breakEnd} %{bullets}',
@@ -21,7 +21,7 @@ export const i18n = {
   },
   beta: {
     BADGE: 'Beta',
-    HELP_PAGE_URL: 'https://docs.gitlab.com/ee/policy/development_stages_support.html#beta',
+    HELP_PAGE_URL: 'https://docs.gitlab.com/policy/development_stages_support/#beta',
     POPOVER_TITLE: "What's a beta?",
     POPOVER_CONTENT:
       "A %{linkStart}beta%{linkEnd} feature is not yet production-ready, but is ready for testing and unlikely to change significantly before it's released.%{line-breakStart}Beta features:%{line-breakEnd} %{bullets}",