fix(core): update select size handling and improve layout

- Adjusted the CSS variables for size and gap to enhance layout consistency.
- Updated the size property logic in the Select component to correctly reflect the intended size.
- Enhanced tests to verify proper rendering of options without overflow and ensure no blank space after visible rows.
Signed-off-by: Cory Rylan <crylan@nvidia.com>

Author: coryrylan

projects/core/.visual/pagination.dark.png

@@ -10,16 +10,21 @@
 --border-radius: var(--nve-ref-border-radius-sm);
 --border: var(--nve-ref-border-width-md) solid transparent;
 --border-bottom: var(--border);
+--gap: var(--nve-ref-space-xxs);
 --cursor: pointer;
 --font-weight: normal;
 --text-align: start;
 --scroll-height: 50vh;
---_input-background: var(--background);
---_icon-color: var(--color);
 --width: 100%;
 --control-width: var(--width);
 --max-width: 100%;
 --min-width: fit-content;
+--_input-background: var(--background);
+--_icon-color: var(--color);
+--_gap: var(--gap);
+--size: 1;
+--_row-height: calc(var(--height) *var(--size) +var(--gap) * (var(--size) - 1));
+--_height: calc(var(--_row-height) +var(--nve-ref-border-width-md) * 2);
  contain: initial;
  width: var(--width);
  max-width: var(--max-width);
@@ -35,7 +40,11 @@
 }
 
 [input] {
-height:var(--height);
+scroll-behavior: smooth;
+scrollbar-color:color-mix(in oklab,var(--nve-sys-scrollbar-thumb-color) 100%, currentColor 20%)
+var(--nve-sys-scrollbar-track-color);
+scrollbar-width:var(--nve-sys-scrollbar-width);
+height:var(--_height);
 background:var(--background);
 border:var(--border);
 border-bottom:var(--border-bottom);
@@ -64,7 +73,7 @@
 cursor:var(--cursor) !important;
 font-weight:var(--font-weight) !important;
 text-align:var(--text-align) !important;
-height:var(--height) !important;
+height:var(--_height) !important;
 width:100%!important;
 border:0!important;
 background: none !important;
@@ -94,7 +103,7 @@
 :host(:state(multiple)) .tags {
 width: fit-content;
 display: flex;
-gap:var(--nve-ref-space-xxs);
+gap:var(--gap);
 }
 
 :host(:state(multiple)) .tags-label {
@@ -130,10 +139,6 @@
 opacity:0!important;
 }
 
-:host(:state(size)) {
---height:calc(var(--nve-ref-size-800) *var(--size));
-}
-
 :host(:state(size)) [input] {
 overflow: auto;
 display: block;
@@ -184,6 +189,7 @@ nve-dropdown {
 
 nve-menu {
 --max-height:var(--scroll-height);
+--gap:var(--_gap);
 }
 
 nve-menu-item {

projects/core/.visual/pagination.png

@@ -700,7 +700,39 @@ describe(`${Select.metadata.tag}: size`, () => {
 });
 
 it('should set --size property',()=>{
-expect(getComputedStyle(element).getPropertyValue('--size')).toBe('3.75');// size (3) + 0.75 buffer
+expect(getComputedStyle(element).getPropertyValue('--size')).toBe('3');
+});
+
+it('should show all rows without overflow',async()=>{
+constselect=fixture.querySelector('select')asHTMLSelectElement;
+for(letoptionNumber=6;optionNumber<=10;optionNumber++){
+constoption=document.createElement('option');
+option.value=`${optionNumber}`;
+option.textContent=`Option ${optionNumber}`;
+select.append(option);
+}
+select.size=10;
+awaitelementIsStable(element);
+
+constinput=element.shadowRoot.querySelector<HTMLElement>('[input]')asHTMLElement;
+constitems=element.shadowRoot.querySelectorAll<MenuItem>(MenuItem.metadata.tag)asNodeListOf<MenuItem>;
+constinputBottom=
+input.getBoundingClientRect().bottom-Number.parseFloat(getComputedStyle(input).borderBottomWidth);
+constlastItemBottom=items[items.length-1].getBoundingClientRect().bottom;
+
+expect(input.scrollTop).toBe(0);
+expect(lastItemBottom).toBeCloseTo(inputBottom,5);
+});
+
+it('should not leave blank space after the visible rows',()=>{
+constinput=element.shadowRoot.querySelector<HTMLElement>('[input]');
+constitems=element.shadowRoot.querySelectorAll<MenuItem>(MenuItem.metadata.tag);
+constinputBottom=
+input.getBoundingClientRect().bottom-Number.parseFloat(getComputedStyle(input).borderBottomWidth);
+constlastVisibleItemBottom=items[2].getBoundingClientRect().bottom;
+
+expect(input.scrollTop).toBe(0);
+expect(lastVisibleItemBottom).toBeCloseTo(inputBottom,5);
 });
 
 it('should not render tags when using multiple with size',async()=>{

projects/core/.visual/select.dark.png

@@ -233,7 +233,7 @@ export class Select extends Control {
 super.updated(props);
 if(this.#select?.size&&this.#select?.size!==0){
 this._internals.states.add('size');
-this.style.setProperty('--size',`${this.#select?.size+0.75}`);
+this.style.setProperty('--size',`${this.#select.size}`);
 }else{
 this._internals.states.delete('size');
 this.style.removeProperty('--size');