@gitlab/ui 84.1.0 → 85.0.0

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

@@ -398,6 +398,83 @@ $gl-text-color-heading: $gl-color-neutral-0; // Used for headings level 1-6.
 $gl-text-color-strong: $gl-color-neutral-0; // Used for text with the highest contrast.
 $gl-text-color-subtle: $gl-color-neutral-200; // Used for supplemental text that doesn't need to be as prominent as other text.
 $gl-text-color-default: $gl-color-neutral-50; // Used for the default text color.
+$gl-status-brand-icon-color-active: $gl-color-purple-300; // Used for the icon of a brand related status item in the active state.
+$gl-status-brand-icon-color-focus: $gl-color-purple-400; // Used for the icon of a brand related status item in the focus state.
+$gl-status-brand-icon-color-hover: $gl-color-purple-400; // Used for the icon of a brand related status item in the hover state.
+$gl-status-brand-icon-color-default: $gl-color-purple-500; // Used for the icon of a brand related status item when static or the default state when linked.
+$gl-status-brand-text-color-active: $gl-color-purple-100; // Used for the text of a brand related status item in the active state.
+$gl-status-brand-text-color-focus: $gl-color-purple-200; // Used for the text of a brand related status item in the focus state.
+$gl-status-brand-text-color-hover: $gl-color-purple-200; // Used for the text of a brand related status item in the hover state.
+$gl-status-brand-text-color-default: $gl-color-purple-300; // Used for the text of a brand related status item when static or the default state when linked.
+$gl-status-brand-border-color-hover: $gl-color-purple-800; // Used for the border of a brand related status item in the hover state.
+$gl-status-brand-background-color-active: $gl-color-purple-800; // Used for the background of a brand related status item in the active state.
+$gl-status-brand-background-color-default: $gl-color-purple-900; // Used for the background of a brand related status item when static or the default state when linked.
+$gl-status-danger-icon-color-active: $gl-color-red-200; // Used for the icon of a danger (critical) status item in the active state.
+$gl-status-danger-icon-color-focus: $gl-color-red-300; // Used for the icon of a danger (critical) status item in the focus state.
+$gl-status-danger-icon-color-hover: $gl-color-red-300; // Used for the icon of a danger (critical) status item in the hover state.
+$gl-status-danger-icon-color-default: $gl-color-red-400; // Used for the icon of a danger (critical) status item when static or the default state when linked.
+$gl-status-danger-text-color-active: $gl-color-red-50; // Used for the text of a danger (critical) status item in the active state.
+$gl-status-danger-text-color-focus: $gl-color-red-100; // Used for the text of a danger (critical) status item in the focus state.
+$gl-status-danger-text-color-hover: $gl-color-red-100; // Used for the text of a danger (critical) status item in the hover state.
+$gl-status-danger-text-color-default: $gl-color-red-200; // Used for the text of a danger (critical) status item when static or the default state when linked.
+$gl-status-danger-border-color-hover: $gl-color-red-700; // Used for the border of a danger (critical) status item in the hover state.
+$gl-status-danger-background-color-active: $gl-color-red-700; // Used for the background of a danger (critical) status item in the active state.
+$gl-status-danger-background-color-default: $gl-color-red-800; // Used for the background of a danger (critical) status item when static or the default state when linked.
+$gl-status-warning-icon-color-active: $gl-color-orange-200; // Used for the icon of a warning status or confidential item in the active state.
+$gl-status-warning-icon-color-focus: $gl-color-orange-300; // Used for the icon of a warning status or confidential item in the focus state.
+$gl-status-warning-icon-color-hover: $gl-color-orange-300; // Used for the icon of a warning status or confidential item in the hover state.
+$gl-status-warning-icon-color-default: $gl-color-orange-400; // Used for the icon of a warning status or confidential item when static or the default state when linked.
+$gl-status-warning-text-color-active: $gl-color-orange-50; // Used for the text of a warning status or confidential item in the active state.N
+$gl-status-warning-text-color-focus: $gl-color-orange-100; // Used for the text of a warning status or confidential item in the focus state.
+$gl-status-warning-text-color-hover: $gl-color-orange-100; // Used for the text of a warning status or confidential item in the hover state.
+$gl-status-warning-text-color-default: $gl-color-orange-200; // Used for the text of a warning status or confidential item when static or the default state when linked.
+$gl-status-warning-border-color-hover: $gl-color-orange-700; // Used for the border of a warning status or confidential item in the hover state.
+$gl-status-warning-background-color-active: $gl-color-orange-700; // Used for the background of a warning status or confidential item in the active state.
+$gl-status-warning-background-color-default: $gl-color-orange-800; // Used for the background of a warning status or confidential item when static or the default state when linked.
+$gl-status-success-icon-color-active: $gl-color-green-200; // Used for the icon of a success status item in the active state.
+$gl-status-success-icon-color-focus: $gl-color-green-300; // Used for the icon of a success status item in the focus state.
+$gl-status-success-icon-color-hover: $gl-color-green-300; // Used for the icon of a success status item in the hover state.
+$gl-status-success-icon-color-default: $gl-color-green-400; // Used for the icon of a success status item when static or the default state when linked.
+$gl-status-success-text-color-active: $gl-color-green-50; // Used for the text of a success status item in the active state.
+$gl-status-success-text-color-focus: $gl-color-green-100; // Used for the text of a success status item in the focus state.
+$gl-status-success-text-color-hover: $gl-color-green-100; // Used for the text of a success status item in the hover state.
+$gl-status-success-text-color-default: $gl-color-green-200; // Used for the text of a success status item when static or the default state when linked.
+$gl-status-success-border-color-hover: $gl-color-green-700; // Used for the border of a success status item in the hover state.
+$gl-status-success-background-color-active: $gl-color-green-700; // Used for the background of a success status item in the active state.
+$gl-status-success-background-color-default: $gl-color-green-800; // Used for the background of a success status item when static or the default state when linked.
+$gl-status-info-icon-color-active: $gl-color-blue-200; // Used for the icon of an informational status item in the active state.
+$gl-status-info-icon-color-focus: $gl-color-blue-300; // Used for the icon of an informational status item in the focus state.
+$gl-status-info-icon-color-hover: $gl-color-blue-300; // Used for the icon of an informational status item in the hover state.
+$gl-status-info-icon-color-default: $gl-color-blue-400; // Used for the icon of an informational status item when static or the default state when linked.
+$gl-status-info-text-color-active: $gl-color-blue-50; // Used for the text of an informational status item in the active state.
+$gl-status-info-text-color-focus: $gl-color-blue-100; // Used for the text of an informational status item in the focus state.
+$gl-status-info-text-color-hover: $gl-color-blue-100; // Used for the text of an informational status item in the hover state.
+$gl-status-info-text-color-default: $gl-color-blue-200; // Used for the text of an informational status item when static or the default state when linked.
+$gl-status-info-border-color-hover: $gl-color-blue-700; // Used for the border of an informational status item in the hover state.
+$gl-status-info-background-color-active: $gl-color-blue-700; // Used for the background of an informational status item in the active state.
+$gl-status-info-background-color-default: $gl-color-blue-800; // Used for the background of an informational status item when static or the default state when linked.
+$gl-status-neutral-icon-color-active: $gl-color-neutral-200; // Used for the icon of a neutral status item in the active state.
+$gl-status-neutral-icon-color-focus: $gl-color-neutral-300; // Used for the icon of a neutral status item in the focus state.
+$gl-status-neutral-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a neutral status item in the hover state.
+$gl-status-neutral-icon-color-default: $gl-color-neutral-400; // Used for the icon of a neutral status item when static or the default state when linked.
+$gl-status-neutral-text-color-active: $gl-color-neutral-50; // Used for the text of a neutral status item in the active state.
+$gl-status-neutral-text-color-focus: $gl-color-neutral-100; // Used for the text of a neutral status item in the focus state.
+$gl-status-neutral-text-color-hover: $gl-color-neutral-100; // Used for the text of a neutral status item in the hover state.
+$gl-status-neutral-text-color-default: $gl-color-neutral-200; // Used for the text of a neutral status item when static or the default state when linked.
+$gl-status-neutral-border-color-hover: $gl-color-neutral-700; // Used for the border of a neutral status item in the hover state.
+$gl-status-neutral-background-color-active: $gl-color-neutral-700; // Used for the background of a neutral status item in the active state.
+$gl-status-neutral-background-color-default: $gl-color-neutral-800; // Used for the background of a neutral status item when static or the default state when linked.
+$gl-status-muted-icon-color-active: $gl-color-neutral-200; // Used for the icon of a subtle neutral status item in the active state.
+$gl-status-muted-icon-color-focus: $gl-color-neutral-300; // Used for the icon of a subtle neutral status item in the focus state.
+$gl-status-muted-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a subtle neutral status item in the hover state.
+$gl-status-muted-icon-color-default: $gl-color-neutral-400; // Used for the icon of a subtle neutral status item when static or the default state when linked.
+$gl-status-muted-text-color-active: $gl-color-neutral-100; // Used for the text of a subtle neutral status item in the active state.
+$gl-status-muted-text-color-focus: $gl-color-neutral-200; // Used for the text of a subtle neutral status item in the focus state.
+$gl-status-muted-text-color-hover: $gl-color-neutral-200; // Used for the text of a subtle neutral status item in the hover state.
+$gl-status-muted-text-color-default: $gl-color-neutral-300; // Used for the text of a subtle neutral status item when static or the default state when linked.
+$gl-status-muted-border-color-hover: $gl-color-neutral-700; // Used for the border of a subtle neutral status item in the hover state.
+$gl-status-muted-background-color-active: $gl-color-neutral-800; // Used for the background of a subtle neutral status item in the active state.
+$gl-status-muted-background-color-default: $gl-color-neutral-900; // Used for the background of a subtle neutral status item when static or the default state when linked.
 $gl-icon-color-success: $gl-color-green-300; // Used for an icon associated with success or validity.
 $gl-icon-color-danger: $gl-color-red-300; // Used for an icon associated with an error or danger.
 $gl-icon-color-warning: $gl-color-orange-300; // Used for an icon associated with a warning.

package/dist/tokens/scss/_tokens.scss

@@ -398,6 +398,83 @@ $gl-text-color-heading: $gl-color-neutral-950; // Used for headings level 1-6.
 $gl-text-color-strong: $gl-color-neutral-950; // Used for text with the highest contrast.
 $gl-text-color-subtle: $gl-color-neutral-600; // Used for supplemental text that doesn't need to be as prominent as other text.
 $gl-text-color-default: $gl-color-neutral-800; // Used for the default text color.
+$gl-status-brand-icon-color-active: $gl-color-purple-700; // Used for the icon of a brand related status item in the active state.
+$gl-status-brand-icon-color-focus: $gl-color-purple-600; // Used for the icon of a brand related status item in the focus state.
+$gl-status-brand-icon-color-hover: $gl-color-purple-600; // Used for the icon of a brand related status item in the hover state.
+$gl-status-brand-icon-color-default: $gl-color-purple-500; // Used for the icon of a brand related status item when static or the default state when linked.
+$gl-status-brand-text-color-active: $gl-color-purple-900; // Used for the text of a brand related status item in the active state.
+$gl-status-brand-text-color-focus: $gl-color-purple-800; // Used for the text of a brand related status item in the focus state.
+$gl-status-brand-text-color-hover: $gl-color-purple-800; // Used for the text of a brand related status item in the hover state.
+$gl-status-brand-text-color-default: $gl-color-purple-700; // Used for the text of a brand related status item when static or the default state when linked.
+$gl-status-brand-border-color-hover: $gl-color-purple-200; // Used for the border of a brand related status item in the hover state.
+$gl-status-brand-background-color-active: $gl-color-purple-200; // Used for the background of a brand related status item in the active state.
+$gl-status-brand-background-color-default: $gl-color-purple-100; // Used for the background of a brand related status item when static or the default state when linked.
+$gl-status-danger-icon-color-active: $gl-color-red-700; // Used for the icon of a danger (critical) status item in the active state.
+$gl-status-danger-icon-color-focus: $gl-color-red-600; // Used for the icon of a danger (critical) status item in the focus state.
+$gl-status-danger-icon-color-hover: $gl-color-red-600; // Used for the icon of a danger (critical) status item in the hover state.
+$gl-status-danger-icon-color-default: $gl-color-red-500; // Used for the icon of a danger (critical) status item when static or the default state when linked.
+$gl-status-danger-text-color-active: $gl-color-red-900; // Used for the text of a danger (critical) status item in the active state.
+$gl-status-danger-text-color-focus: $gl-color-red-800; // Used for the text of a danger (critical) status item in the focus state.
+$gl-status-danger-text-color-hover: $gl-color-red-800; // Used for the text of a danger (critical) status item in the hover state.
+$gl-status-danger-text-color-default: $gl-color-red-700; // Used for the text of a danger (critical) status item when static or the default state when linked.
+$gl-status-danger-border-color-hover: $gl-color-red-200; // Used for the border of a danger (critical) status item in the hover state.
+$gl-status-danger-background-color-active: $gl-color-red-200; // Used for the background of a danger (critical) status item in the active state.
+$gl-status-danger-background-color-default: $gl-color-red-100; // Used for the background of a danger (critical) status item when static or the default state when linked.
+$gl-status-warning-icon-color-active: $gl-color-orange-700; // Used for the icon of a warning status or confidential item in the active state.
+$gl-status-warning-icon-color-focus: $gl-color-orange-600; // Used for the icon of a warning status or confidential item in the focus state.
+$gl-status-warning-icon-color-hover: $gl-color-orange-600; // Used for the icon of a warning status or confidential item in the hover state.
+$gl-status-warning-icon-color-default: $gl-color-orange-500; // Used for the icon of a warning status or confidential item when static or the default state when linked.
+$gl-status-warning-text-color-active: $gl-color-orange-900; // Used for the text of a warning status or confidential item in the active state.N
+$gl-status-warning-text-color-focus: $gl-color-orange-800; // Used for the text of a warning status or confidential item in the focus state.
+$gl-status-warning-text-color-hover: $gl-color-orange-800; // Used for the text of a warning status or confidential item in the hover state.
+$gl-status-warning-text-color-default: $gl-color-orange-700; // Used for the text of a warning status or confidential item when static or the default state when linked.
+$gl-status-warning-border-color-hover: $gl-color-orange-200; // Used for the border of a warning status or confidential item in the hover state.
+$gl-status-warning-background-color-active: $gl-color-orange-200; // Used for the background of a warning status or confidential item in the active state.
+$gl-status-warning-background-color-default: $gl-color-orange-100; // Used for the background of a warning status or confidential item when static or the default state when linked.
+$gl-status-success-icon-color-active: $gl-color-green-700; // Used for the icon of a success status item in the active state.
+$gl-status-success-icon-color-focus: $gl-color-green-600; // Used for the icon of a success status item in the focus state.
+$gl-status-success-icon-color-hover: $gl-color-green-600; // Used for the icon of a success status item in the hover state.
+$gl-status-success-icon-color-default: $gl-color-green-500; // Used for the icon of a success status item when static or the default state when linked.
+$gl-status-success-text-color-active: $gl-color-green-900; // Used for the text of a success status item in the active state.
+$gl-status-success-text-color-focus: $gl-color-green-800; // Used for the text of a success status item in the focus state.
+$gl-status-success-text-color-hover: $gl-color-green-800; // Used for the text of a success status item in the hover state.
+$gl-status-success-text-color-default: $gl-color-green-700; // Used for the text of a success status item when static or the default state when linked.
+$gl-status-success-border-color-hover: $gl-color-green-200; // Used for the border of a success status item in the hover state.
+$gl-status-success-background-color-active: $gl-color-green-200; // Used for the background of a success status item in the active state.
+$gl-status-success-background-color-default: $gl-color-green-100; // Used for the background of a success status item when static or the default state when linked.
+$gl-status-info-icon-color-active: $gl-color-blue-700; // Used for the icon of an informational status item in the active state.
+$gl-status-info-icon-color-focus: $gl-color-blue-600; // Used for the icon of an informational status item in the focus state.
+$gl-status-info-icon-color-hover: $gl-color-blue-600; // Used for the icon of an informational status item in the hover state.
+$gl-status-info-icon-color-default: $gl-color-blue-500; // Used for the icon of an informational status item when static or the default state when linked.
+$gl-status-info-text-color-active: $gl-color-blue-900; // Used for the text of an informational status item in the active state.
+$gl-status-info-text-color-focus: $gl-color-blue-800; // Used for the text of an informational status item in the focus state.
+$gl-status-info-text-color-hover: $gl-color-blue-800; // Used for the text of an informational status item in the hover state.
+$gl-status-info-text-color-default: $gl-color-blue-700; // Used for the text of an informational status item when static or the default state when linked.
+$gl-status-info-border-color-hover: $gl-color-blue-200; // Used for the border of an informational status item in the hover state.
+$gl-status-info-background-color-active: $gl-color-blue-200; // Used for the background of an informational status item in the active state.
+$gl-status-info-background-color-default: $gl-color-blue-100; // Used for the background of an informational status item when static or the default state when linked.
+$gl-status-neutral-icon-color-active: $gl-color-neutral-700; // Used for the icon of a neutral status item in the active state.
+$gl-status-neutral-icon-color-focus: $gl-color-neutral-600; // Used for the icon of a neutral status item in the focus state.
+$gl-status-neutral-icon-color-hover: $gl-color-neutral-600; // Used for the icon of a neutral status item in the hover state.
+$gl-status-neutral-icon-color-default: $gl-color-neutral-500; // Used for the icon of a neutral status item when static or the default state when linked.
+$gl-status-neutral-text-color-active: $gl-color-neutral-900; // Used for the text of a neutral status item in the active state.
+$gl-status-neutral-text-color-focus: $gl-color-neutral-800; // Used for the text of a neutral status item in the focus state.
+$gl-status-neutral-text-color-hover: $gl-color-neutral-800; // Used for the text of a neutral status item in the hover state.
+$gl-status-neutral-text-color-default: $gl-color-neutral-700; // Used for the text of a neutral status item when static or the default state when linked.
+$gl-status-neutral-border-color-hover: $gl-color-neutral-200; // Used for the border of a neutral status item in the hover state.
+$gl-status-neutral-background-color-active: $gl-color-neutral-200; // Used for the background of a neutral status item in the active state.
+$gl-status-neutral-background-color-default: $gl-color-neutral-100; // Used for the background of a neutral status item when static or the default state when linked.
+$gl-status-muted-icon-color-active: $gl-color-neutral-700; // Used for the icon of a subtle neutral status item in the active state.
+$gl-status-muted-icon-color-focus: $gl-color-neutral-600; // Used for the icon of a subtle neutral status item in the focus state.
+$gl-status-muted-icon-color-hover: $gl-color-neutral-600; // Used for the icon of a subtle neutral status item in the hover state.
+$gl-status-muted-icon-color-default: $gl-color-neutral-500; // Used for the icon of a subtle neutral status item when static or the default state when linked.
+$gl-status-muted-text-color-active: $gl-color-neutral-800; // Used for the text of a subtle neutral status item in the active state.
+$gl-status-muted-text-color-focus: $gl-color-neutral-700; // Used for the text of a subtle neutral status item in the focus state.
+$gl-status-muted-text-color-hover: $gl-color-neutral-700; // Used for the text of a subtle neutral status item in the hover state.
+$gl-status-muted-text-color-default: $gl-color-neutral-600; // Used for the text of a subtle neutral status item when static or the default state when linked.
+$gl-status-muted-border-color-hover: $gl-color-neutral-200; // Used for the border of a subtle neutral status item in the hover state.
+$gl-status-muted-background-color-active: $gl-color-neutral-100; // Used for the background of a subtle neutral status item in the active state.
+$gl-status-muted-background-color-default: $gl-color-neutral-50; // Used for the background of a subtle neutral status item when static or the default state when linked.
 $gl-icon-color-success: $gl-color-green-600; // Used for an icon associated with success or validity.
 $gl-icon-color-danger: $gl-color-red-600; // Used for an icon associated with an error or danger.
 $gl-icon-color-warning: $gl-color-orange-600; // Used for an icon associated with a warning.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -406,6 +406,83 @@ $gl-line-height-36: var(--gl-line-height-36);
 $gl-line-height-42: var(--gl-line-height-42);
 $gl-line-height-44: var(--gl-line-height-44);
 $gl-line-height-52: var(--gl-line-height-52);
+$gl-status-muted-background-color-default: var(--gl-status-muted-background-color-default);
+$gl-status-muted-background-color-active: var(--gl-status-muted-background-color-active);
+$gl-status-muted-border-color-hover: var(--gl-status-muted-border-color-hover);
+$gl-status-muted-text-color-default: var(--gl-status-muted-text-color-default);
+$gl-status-muted-text-color-hover: var(--gl-status-muted-text-color-hover);
+$gl-status-muted-text-color-focus: var(--gl-status-muted-text-color-focus);
+$gl-status-muted-text-color-active: var(--gl-status-muted-text-color-active);
+$gl-status-muted-icon-color-default: var(--gl-status-muted-icon-color-default);
+$gl-status-muted-icon-color-hover: var(--gl-status-muted-icon-color-hover);
+$gl-status-muted-icon-color-focus: var(--gl-status-muted-icon-color-focus);
+$gl-status-muted-icon-color-active: var(--gl-status-muted-icon-color-active);
+$gl-status-neutral-background-color-default: var(--gl-status-neutral-background-color-default);
+$gl-status-neutral-background-color-active: var(--gl-status-neutral-background-color-active);
+$gl-status-neutral-border-color-hover: var(--gl-status-neutral-border-color-hover);
+$gl-status-neutral-text-color-default: var(--gl-status-neutral-text-color-default);
+$gl-status-neutral-text-color-hover: var(--gl-status-neutral-text-color-hover);
+$gl-status-neutral-text-color-focus: var(--gl-status-neutral-text-color-focus);
+$gl-status-neutral-text-color-active: var(--gl-status-neutral-text-color-active);
+$gl-status-neutral-icon-color-default: var(--gl-status-neutral-icon-color-default);
+$gl-status-neutral-icon-color-hover: var(--gl-status-neutral-icon-color-hover);
+$gl-status-neutral-icon-color-focus: var(--gl-status-neutral-icon-color-focus);
+$gl-status-neutral-icon-color-active: var(--gl-status-neutral-icon-color-active);
+$gl-status-info-background-color-default: var(--gl-status-info-background-color-default);
+$gl-status-info-background-color-active: var(--gl-status-info-background-color-active);
+$gl-status-info-border-color-hover: var(--gl-status-info-border-color-hover);
+$gl-status-info-text-color-default: var(--gl-status-info-text-color-default);
+$gl-status-info-text-color-hover: var(--gl-status-info-text-color-hover);
+$gl-status-info-text-color-focus: var(--gl-status-info-text-color-focus);
+$gl-status-info-text-color-active: var(--gl-status-info-text-color-active);
+$gl-status-info-icon-color-default: var(--gl-status-info-icon-color-default);
+$gl-status-info-icon-color-hover: var(--gl-status-info-icon-color-hover);
+$gl-status-info-icon-color-focus: var(--gl-status-info-icon-color-focus);
+$gl-status-info-icon-color-active: var(--gl-status-info-icon-color-active);
+$gl-status-success-background-color-default: var(--gl-status-success-background-color-default);
+$gl-status-success-background-color-active: var(--gl-status-success-background-color-active);
+$gl-status-success-border-color-hover: var(--gl-status-success-border-color-hover);
+$gl-status-success-text-color-default: var(--gl-status-success-text-color-default);
+$gl-status-success-text-color-hover: var(--gl-status-success-text-color-hover);
+$gl-status-success-text-color-focus: var(--gl-status-success-text-color-focus);
+$gl-status-success-text-color-active: var(--gl-status-success-text-color-active);
+$gl-status-success-icon-color-default: var(--gl-status-success-icon-color-default);
+$gl-status-success-icon-color-hover: var(--gl-status-success-icon-color-hover);
+$gl-status-success-icon-color-focus: var(--gl-status-success-icon-color-focus);
+$gl-status-success-icon-color-active: var(--gl-status-success-icon-color-active);
+$gl-status-warning-background-color-default: var(--gl-status-warning-background-color-default);
+$gl-status-warning-background-color-active: var(--gl-status-warning-background-color-active);
+$gl-status-warning-border-color-hover: var(--gl-status-warning-border-color-hover);
+$gl-status-warning-text-color-default: var(--gl-status-warning-text-color-default);
+$gl-status-warning-text-color-hover: var(--gl-status-warning-text-color-hover);
+$gl-status-warning-text-color-focus: var(--gl-status-warning-text-color-focus);
+$gl-status-warning-text-color-active: var(--gl-status-warning-text-color-active);
+$gl-status-warning-icon-color-default: var(--gl-status-warning-icon-color-default);
+$gl-status-warning-icon-color-hover: var(--gl-status-warning-icon-color-hover);
+$gl-status-warning-icon-color-focus: var(--gl-status-warning-icon-color-focus);
+$gl-status-warning-icon-color-active: var(--gl-status-warning-icon-color-active);
+$gl-status-danger-background-color-default: var(--gl-status-danger-background-color-default);
+$gl-status-danger-background-color-active: var(--gl-status-danger-background-color-active);
+$gl-status-danger-border-color-hover: var(--gl-status-danger-border-color-hover);
+$gl-status-danger-text-color-default: var(--gl-status-danger-text-color-default);
+$gl-status-danger-text-color-hover: var(--gl-status-danger-text-color-hover);
+$gl-status-danger-text-color-focus: var(--gl-status-danger-text-color-focus);
+$gl-status-danger-text-color-active: var(--gl-status-danger-text-color-active);
+$gl-status-danger-icon-color-default: var(--gl-status-danger-icon-color-default);
+$gl-status-danger-icon-color-hover: var(--gl-status-danger-icon-color-hover);
+$gl-status-danger-icon-color-focus: var(--gl-status-danger-icon-color-focus);
+$gl-status-danger-icon-color-active: var(--gl-status-danger-icon-color-active);
+$gl-status-brand-background-color-default: var(--gl-status-brand-background-color-default);
+$gl-status-brand-background-color-active: var(--gl-status-brand-background-color-active);
+$gl-status-brand-border-color-hover: var(--gl-status-brand-border-color-hover);
+$gl-status-brand-text-color-default: var(--gl-status-brand-text-color-default);
+$gl-status-brand-text-color-hover: var(--gl-status-brand-text-color-hover);
+$gl-status-brand-text-color-focus: var(--gl-status-brand-text-color-focus);
+$gl-status-brand-text-color-active: var(--gl-status-brand-text-color-active);
+$gl-status-brand-icon-color-default: var(--gl-status-brand-icon-color-default);
+$gl-status-brand-icon-color-hover: var(--gl-status-brand-icon-color-hover);
+$gl-status-brand-icon-color-focus: var(--gl-status-brand-icon-color-focus);
+$gl-status-brand-icon-color-active: var(--gl-status-brand-icon-color-active);
 $gl-text-primary: var(--gl-text-primary);
 $gl-text-secondary: var(--gl-text-secondary);
 $gl-text-tertiary: var(--gl-text-tertiary);

package/dist/utils/utils.js

@@ -1,4 +1,4 @@
-import { isVisible } from 'bootstrap-vue/esm/utils/dom';
+import { isVisible } from '../vendor/bootstrap-vue/src/utils/dom';
 import { COMMA, labelColorOptions, CONTRAST_LEVELS, focusableTags } from './constants';
 
 function debounceByAnimationFrame(fn) {

package/dist/vendor/bootstrap-vue/src/browser-icons.js

@@ -0,0 +1,8 @@
+import { vueUse } from './utils/plugins';
+import { BootstrapVueIcons } from './icons-only';
+export { BootstrapVueIcons as default } from './icons-only';
+
+// Main entry point for the browser icons-only build
+
+// Auto installation only occurs if window.Vue exists
+vueUse(BootstrapVueIcons);

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

@@ -0,0 +1,8 @@
+import { vueUse } from './utils/plugins';
+import { BootstrapVue } from './index';
+export { BootstrapVue as default } from './index';
+
+// Main entry point for the browser build
+
+// Auto installation only occurs if window.Vue exists
+vueUse(BootstrapVue);

package/dist/vendor/bootstrap-vue/src/bv-config.js

@@ -0,0 +1,6 @@
+import { pluginFactory } from './utils/plugins';
+
+//
+const BVConfigPlugin = /*#__PURE__*/pluginFactory();
+
+export { BVConfigPlugin };

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

@@ -0,0 +1,179 @@
+import { NAME_ALERT } from '../../constants/components';
+import { EVENT_NAME_DISMISS_COUNT_DOWN, EVENT_NAME_DISMISSED } from '../../constants/events';
+import { PROP_TYPE_BOOLEAN_NUMBER_STRING, PROP_TYPE_STRING, PROP_TYPE_BOOLEAN } from '../../constants/props';
+import { SLOT_NAME_DISMISS } from '../../constants/slots';
+import { normalizeSlotMixin } from '../../mixins/normalize-slot';
+import { requestAF } from '../../utils/dom';
+import { isNumeric, isBoolean } from '../../utils/inspect';
+import { makeModelMixin } from '../../utils/model';
+import { toInteger } from '../../utils/number';
+import { sortKeys } from '../../utils/object';
+import { makePropsConfigurable, makeProp } from '../../utils/props';
+import { extend, COMPONENT_UID_KEY } from '../../vue';
+import { BButtonClose } from '../button/button-close';
+import { BVTransition } from '../transition/bv-transition';
+
+// --- Constants ---
+
+const {
+  mixin: modelMixin,
+  props: modelProps,
+  prop: MODEL_PROP_NAME,
+  event: MODEL_EVENT_NAME
+} = makeModelMixin('show', {
+  type: PROP_TYPE_BOOLEAN_NUMBER_STRING,
+  defaultValue: false
+});
+
+// --- Helper methods ---
+
+// Convert `show` value to a number
+const parseCountDown = show => {
+  if (show === '' || isBoolean(show)) {
+    return 0;
+  }
+  show = toInteger(show, 0);
+  return show > 0 ? show : 0;
+};
+
+// Convert `show` value to a boolean
+const parseShow = show => {
+  if (show === '' || show === true) {
+    return true;
+  }
+  if (toInteger(show, 0) < 1) {
+    // Boolean will always return false for the above comparison
+    return false;
+  }
+  return !!show;
+};
+
+// --- Props ---
+
+const props = makePropsConfigurable(sortKeys({
+  ...modelProps,
+  dismissLabel: makeProp(PROP_TYPE_STRING, 'Close'),
+  dismissible: makeProp(PROP_TYPE_BOOLEAN, false),
+  fade: makeProp(PROP_TYPE_BOOLEAN, false),
+  variant: makeProp(PROP_TYPE_STRING, 'info')
+}), NAME_ALERT);
+
+// --- Main component ---
+
+// @vue/component
+const BAlert = /*#__PURE__*/extend({
+  name: NAME_ALERT,
+  mixins: [modelMixin, normalizeSlotMixin],
+  props,
+  data() {
+    return {
+      countDown: 0,
+      // If initially shown, we need to set these for SSR
+      localShow: parseShow(this[MODEL_PROP_NAME])
+    };
+  },
+  watch: {
+    [MODEL_PROP_NAME](newValue) {
+      this.countDown = parseCountDown(newValue);
+      this.localShow = parseShow(newValue);
+    },
+    countDown(newValue) {
+      this.clearCountDownInterval();
+      const show = this[MODEL_PROP_NAME];
+      // Ignore if `show` transitions to a boolean value
+      if (isNumeric(show)) {
+        this.$emit(EVENT_NAME_DISMISS_COUNT_DOWN, newValue);
+        // Update the v-model if needed
+        if (show !== newValue) {
+          this.$emit(MODEL_EVENT_NAME, newValue);
+        }
+        if (newValue > 0) {
+          this.localShow = true;
+          this.$_countDownTimeout = setTimeout(() => {
+            this.countDown--;
+          }, 1000);
+        } else {
+          // Slightly delay the hide to allow any UI updates
+          this.$nextTick(() => {
+            requestAF(() => {
+              this.localShow = false;
+            });
+          });
+        }
+      }
+    },
+    localShow(newValue) {
+      const show = this[MODEL_PROP_NAME];
+      // Only emit dismissed events for dismissible or auto-dismissing alerts
+      if (!newValue && (this.dismissible || isNumeric(show))) {
+        this.$emit(EVENT_NAME_DISMISSED);
+      }
+      // Only emit booleans if we weren't passed a number via v-model
+      if (!isNumeric(show) && show !== newValue) {
+        this.$emit(MODEL_EVENT_NAME, newValue);
+      }
+    }
+  },
+  created() {
+    // Create private non-reactive props
+    this.$_filterTimer = null;
+    const show = this[MODEL_PROP_NAME];
+    this.countDown = parseCountDown(show);
+    this.localShow = parseShow(show);
+  },
+  beforeDestroy() {
+    this.clearCountDownInterval();
+  },
+  methods: {
+    dismiss() {
+      this.clearCountDownInterval();
+      this.countDown = 0;
+      this.localShow = false;
+    },
+    clearCountDownInterval() {
+      clearTimeout(this.$_countDownTimeout);
+      this.$_countDownTimeout = null;
+    }
+  },
+  render(h) {
+    let $alert = h();
+    if (this.localShow) {
+      const {
+        dismissible,
+        variant
+      } = this;
+      let $dismissButton = h();
+      if (dismissible) {
+        // Add dismiss button
+        $dismissButton = h(BButtonClose, {
+          attrs: {
+            'aria-label': this.dismissLabel
+          },
+          on: {
+            click: this.dismiss
+          }
+        }, [this.normalizeSlot(SLOT_NAME_DISMISS)]);
+      }
+      $alert = h('div', {
+        staticClass: 'alert',
+        class: {
+          'alert-dismissible': dismissible,
+          [`alert-${variant}`]: variant
+        },
+        attrs: {
+          role: 'alert',
+          'aria-live': 'polite',
+          'aria-atomic': true
+        },
+        key: this[COMPONENT_UID_KEY]
+      }, [$dismissButton, this.normalizeSlot()]);
+    }
+    return h(BVTransition, {
+      props: {
+        noFade: !this.fade
+      }
+    }, [$alert]);
+  }
+});
+
+export { BAlert, props };

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

@@ -0,0 +1,11 @@
+import { BAlert } from './alert';
+export { BAlert } from './alert';
+import { pluginFactory } from '../../utils/plugins';
+
+const AlertPlugin = /*#__PURE__*/pluginFactory({
+  components: {
+    BAlert
+  }
+});
+
+export { AlertPlugin };

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

@@ -0,0 +1,67 @@
+import { extend } from '../../vue';
+import { NAME_ASPECT } from '../../constants/components';
+import { PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props';
+import { RX_ASPECT, RX_ASPECT_SEPARATOR } from '../../constants/regex';
+import { mathAbs } from '../../utils/math';
+import { toFloat } from '../../utils/number';
+import { makePropsConfigurable, makeProp } from '../../utils/props';
+import { normalizeSlotMixin } from '../../mixins/normalize-slot';
+
+// --- Constants ---
+
+const CLASS_NAME = 'b-aspect';
+
+// --- Props ---
+
+const props = makePropsConfigurable({
+  // Accepts a number (i.e. `16 / 9`, `1`, `4 / 3`)
+  // Or a string (i.e. '16/9', '16:9', '4:3' '1:1')
+  aspect: makeProp(PROP_TYPE_NUMBER_STRING, '1:1'),
+  tag: makeProp(PROP_TYPE_STRING, 'div')
+}, NAME_ASPECT);
+
+// --- Main component ---
+
+// @vue/component
+const BAspect = /*#__PURE__*/extend({
+  name: NAME_ASPECT,
+  mixins: [normalizeSlotMixin],
+  props,
+  computed: {
+    padding() {
+      const {
+        aspect
+      } = this;
+      let ratio = 1;
+      if (RX_ASPECT.test(aspect)) {
+        // Width and/or Height can be a decimal value below `1`, so
+        // we only fallback to `1` if the value is `0` or `NaN`
+        const [width, height] = aspect.split(RX_ASPECT_SEPARATOR).map(v => toFloat(v) || 1);
+        ratio = width / height;
+      } else {
+        ratio = toFloat(aspect) || 1;
+      }
+      return `${100 / mathAbs(ratio)}%`;
+    }
+  },
+  render(h) {
+    const $sizer = h('div', {
+      staticClass: `${CLASS_NAME}-sizer flex-grow-1`,
+      style: {
+        paddingBottom: this.padding,
+        height: 0
+      }
+    });
+    const $content = h('div', {
+      staticClass: `${CLASS_NAME}-content flex-grow-1 w-100 mw-100`,
+      style: {
+        marginLeft: '-100%'
+      }
+    }, this.normalizeSlot());
+    return h(this.tag, {
+      staticClass: `${CLASS_NAME} d-flex`
+    }, [$sizer, $content]);
+  }
+});
+
+export { BAspect, props };

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

@@ -0,0 +1,11 @@
+import { BAspect } from './aspect';
+export { BAspect } from './aspect';
+import { pluginFactory } from '../../utils/plugins';
+
+const AspectPlugin = /*#__PURE__*/pluginFactory({
+  components: {
+    BAspect
+  }
+});
+
+export { AspectPlugin };

package/dist/vendor/bootstrap-vue/src/components/avatar/avatar-group.js

@@ -0,0 +1,67 @@
+import { NAME_AVATAR_GROUP } from '../../constants/components';
+import { PROP_TYPE_NUMBER_STRING, PROP_TYPE_BOOLEAN_STRING, PROP_TYPE_STRING, PROP_TYPE_BOOLEAN } from '../../constants/props';
+import { normalizeSlotMixin } from '../../mixins/normalize-slot';
+import { mathMin, mathMax } from '../../utils/math';
+import { toFloat } from '../../utils/number';
+import { makePropsConfigurable, makeProp } from '../../utils/props';
+import { extend } from '../../vue';
+import { computeSize } from './avatar';
+
+// --- Props ---
+
+const props = makePropsConfigurable({
+  overlap: makeProp(PROP_TYPE_NUMBER_STRING, 0.3),
+  // Child avatars will prefer this prop (if set) over their own
+  rounded: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
+  // Child avatars will always use this over their own size
+  size: makeProp(PROP_TYPE_STRING),
+  // Child avatars will prefer this prop (if set) over their own
+  square: makeProp(PROP_TYPE_BOOLEAN, false),
+  tag: makeProp(PROP_TYPE_STRING, 'div'),
+  // Child avatars will prefer this variant over their own
+  variant: makeProp(PROP_TYPE_STRING)
+}, NAME_AVATAR_GROUP);
+
+// --- Main component ---
+
+// @vue/component
+const BAvatarGroup = /*#__PURE__*/extend({
+  name: NAME_AVATAR_GROUP,
+  mixins: [normalizeSlotMixin],
+  provide() {
+    return {
+      getBvAvatarGroup: () => this
+    };
+  },
+  props,
+  computed: {
+    computedSize() {
+      return computeSize(this.size);
+    },
+    overlapScale() {
+      return mathMin(mathMax(toFloat(this.overlap, 0), 0), 1) / 2;
+    },
+    paddingStyle() {
+      let value = this.computedSize;
+      value = value ? `calc(${value} * ${this.overlapScale})` : null;
+      return value ? {
+        paddingLeft: value,
+        paddingRight: value
+      } : {};
+    }
+  },
+  render(h) {
+    const $inner = h('div', {
+      staticClass: 'b-avatar-group-inner',
+      style: this.paddingStyle
+    }, this.normalizeSlot());
+    return h(this.tag, {
+      staticClass: 'b-avatar-group',
+      attrs: {
+        role: 'group'
+      }
+    }, [$inner]);
+  }
+});
+
+export { BAvatarGroup, props };