feat(file-picker): add styled scrollbar & fix files-list height (VIV-…

…2236) (#2029)

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

@@ -223,6 +223,12 @@ 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.
 
+## Dimensions
+
+### Block-Size
+
+When setting `block-size` or `max-block-size` on the file-picker the list of the added files will have auto scroll.
+
 ## 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;
@@ -16,6 +17,8 @@ $file-picker-list-item-background-color: --file-picker-list-item-background-colo
 .base {
 	display: flex;
 	flex-direction: column;
+	block-size: inherit;
+	max-block-size: inherit;
 }
 
 .control {
@@ -48,8 +51,9 @@ $file-picker-list-item-background-color: --file-picker-list-item-background-colo
 
 		@include focus.focus;
 	}
-	&:hover {
-		border-style: solid;
+	&:hover,
+	&:active,
+	&:focus-visible {
 		background-color: var(#{constants.$vvd-color-cta-100});
 	}
 }
@@ -65,7 +69,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 +131,15 @@ $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;
+		overflow-y: auto;
+	}
 
 	&:empty {
 		display: none;

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

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