add scrollbar style

libs/components/src/lib/file-picker/README.md

@@ -170,6 +170,10 @@ The `helper-text` slot allows you to use rich content as the file picker's helpe
 Each added file in the preview list has a default background-color of `vvd-color-canvas` (`#fff` in light theme, `#000` in dark).  
 If needed, the background of the item can be changed using the `--file-picker-list-item-background-color` CSS variable.
 
+### file-picker-list-block-size
+
+Use `--file-picker-list-block-size` the set the max-block-size of list of the added files, other than `408px`.
+
 ## Properties
 
 <div class="table-wrapper">

libs/components/src/lib/file-picker/file-picker.scss

@@ -1,12 +1,13 @@
+@use 'partials/variables' as variables;
 @use '../../../../../dist/libs/tokens/scss/tokens.constants' as constants;
 @use '../../../../../dist/libs/tokens/scss/size.variables' as size;
 @use '../../../../shared/src/lib/sass/mixins/border-radius' as
 	border-radius-variables;
 @use '../../../../shared/src/lib/sass/mixins/focus' as focus;
 @use '../../../../shared/src/lib/sass/mixins/focus' as focus-variables;
+@use '../../../../shared/src/lib/sass/mixins/scrollbar' as scrollbar;
 
 $low-ink-color: --_low-ink-color;
-$file-picker-list-item-background-color: --file-picker-list-item-background-color;
 
 :host {
 	display: block;
@@ -48,7 +49,9 @@ $file-picker-list-item-background-color: --file-picker-list-item-background-colo
 
 		@include focus.focus;
 	}
-	&:hover {
+	&:hover,
+	&:active,
+	&:focus-visible {
 		border-style: solid;
 		background-color: var(#{constants.$vvd-color-cta-100});
 	}
@@ -65,7 +68,7 @@ $file-picker-list-item-background-color: --file-picker-list-item-background-colo
 	border: 1px solid var(#{constants.$vvd-color-neutral-300});
 	border-radius: #{border-radius-variables.$border-radius-normal};
 	background-color: var(
-		#{$file-picker-list-item-background-color},
+		#{variables.$file-picker-list-item-background-color},
 		var(#{constants.$vvd-color-canvas})
 	);
 	grid-template-columns: 1fr auto;
@@ -127,11 +130,16 @@ $file-picker-list-item-background-color: --file-picker-list-item-background-colo
 }
 
 .preview-list {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-	margin-block-start: 12px;
-	overflow-y: auto;
+	@include scrollbar.scrollbar;
+
+	& {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		margin-block-start: 12px;
+		max-block-size: var(variables.$file-picker-list-block-size, 408px);
+		overflow-y: auto;
+	}
 
 	&:empty {
 		display: none;

libs/components/src/lib/file-picker/partials/variables.scss

@@ -0,0 +1,2 @@
+$file-picker-list-item-background-color: --file-picker-list-item-background-color;
+$file-picker-list-block-size: --file-picker-list-block-size;

libs/components/src/lib/tabs/tabs.scss

@@ -188,6 +188,7 @@ slot[name='action-items'] {
 
 	.base.scroll & {
 		overflow-y: auto;
+
 		@include scrollbar.scrollbar;
 	}