@ni/nimble-components 10.0.9 → 11.0.2

package/dist/esm/icons/unlock.js

@@ -5,10 +5,10 @@ import { Icon, registerIcon } from '../icon-base';
 /**
  * The icon component for the 'unlock' icon
  */
-export class UnlockIcon extends Icon {
+export class IconUnlock extends Icon {
     constructor() {
         super(unlock16X16);
     }
 }
-registerIcon('unlock-icon', UnlockIcon);
+registerIcon('icon-unlock', IconUnlock);
 //# sourceMappingURL=unlock.js.map

package/dist/esm/icons/upload.d.ts

@@ -1,12 +1,12 @@
 import { Icon } from '../icon-base';
 declare global {
     interface HTMLElementTagNameMap {
-        'nimble-upload-icon': UploadIcon;
+        'nimble-icon-upload': IconUpload;
     }
 }
 /**
  * The icon component for the 'upload' icon
  */
-export declare class UploadIcon extends Icon {
+export declare class IconUpload extends Icon {
     constructor();
 }

package/dist/esm/icons/upload.js

@@ -5,10 +5,10 @@ import { Icon, registerIcon } from '../icon-base';
 /**
  * The icon component for the 'upload' icon
  */
-export class UploadIcon extends Icon {
+export class IconUpload extends Icon {
     constructor() {
         super(upload16X16);
     }
 }
-registerIcon('upload-icon', UploadIcon);
+registerIcon('icon-upload', IconUpload);
 //# sourceMappingURL=upload.js.map

package/dist/esm/icons/user.d.ts

@@ -1,12 +1,12 @@
 import { Icon } from '../icon-base';
 declare global {
     interface HTMLElementTagNameMap {
-        'nimble-user-icon': UserIcon;
+        'nimble-icon-user': IconUser;
     }
 }
 /**
  * The icon component for the 'user' icon
  */
-export declare class UserIcon extends Icon {
+export declare class IconUser extends Icon {
     constructor();
 }

package/dist/esm/icons/user.js

@@ -5,10 +5,10 @@ import { Icon, registerIcon } from '../icon-base';
 /**
  * The icon component for the 'user' icon
  */
-export class UserIcon extends Icon {
+export class IconUser extends Icon {
     constructor() {
         super(user16X16);
     }
 }
-registerIcon('user-icon', UserIcon);
+registerIcon('icon-user', IconUser);
 //# sourceMappingURL=user.js.map

package/dist/esm/icons/watch.d.ts

@@ -1,12 +1,12 @@
 import { Icon } from '../icon-base';
 declare global {
     interface HTMLElementTagNameMap {
-        'nimble-watch-icon': WatchIcon;
+        'nimble-icon-watch': IconWatch;
     }
 }
 /**
  * The icon component for the 'watch' icon
  */
-export declare class WatchIcon extends Icon {
+export declare class IconWatch extends Icon {
     constructor();
 }

package/dist/esm/icons/watch.js

@@ -5,10 +5,10 @@ import { Icon, registerIcon } from '../icon-base';
 /**
  * The icon component for the 'watch' icon
  */
-export class WatchIcon extends Icon {
+export class IconWatch extends Icon {
     constructor() {
         super(watch16X16);
     }
 }
-registerIcon('watch-icon', WatchIcon);
+registerIcon('icon-watch', IconWatch);
 //# sourceMappingURL=watch.js.map

package/dist/esm/icons/waveform.d.ts

@@ -1,12 +1,12 @@
 import { Icon } from '../icon-base';
 declare global {
     interface HTMLElementTagNameMap {
-        'nimble-waveform-icon': WaveformIcon;
+        'nimble-icon-waveform': IconWaveform;
     }
 }
 /**
  * The icon component for the 'waveform' icon
  */
-export declare class WaveformIcon extends Icon {
+export declare class IconWaveform extends Icon {
     constructor();
 }

package/dist/esm/icons/waveform.js

@@ -5,10 +5,10 @@ import { Icon, registerIcon } from '../icon-base';
 /**
  * The icon component for the 'waveform' icon
  */
-export class WaveformIcon extends Icon {
+export class IconWaveform extends Icon {
     constructor() {
         super(waveform16X16);
     }
 }
-registerIcon('waveform-icon', WaveformIcon);
+registerIcon('icon-waveform', IconWaveform);
 //# sourceMappingURL=waveform.js.map

package/dist/esm/icons/webvi-custom.d.ts

@@ -1,12 +1,12 @@
 import { Icon } from '../icon-base';
 declare global {
     interface HTMLElementTagNameMap {
-        'nimble-webvi-custom-icon': WebviCustomIcon;
+        'nimble-icon-webvi-custom': IconWebviCustom;
     }
 }
 /**
  * The icon component for the 'webviCustom' icon
  */
-export declare class WebviCustomIcon extends Icon {
+export declare class IconWebviCustom extends Icon {
     constructor();
 }

package/dist/esm/icons/webvi-custom.js

@@ -5,10 +5,10 @@ import { Icon, registerIcon } from '../icon-base';
 /**
  * The icon component for the 'webviCustom' icon
  */
-export class WebviCustomIcon extends Icon {
+export class IconWebviCustom extends Icon {
     constructor() {
         super(webviCustom16X16);
     }
 }
-registerIcon('webvi-custom-icon', WebviCustomIcon);
+registerIcon('icon-webvi-custom', IconWebviCustom);
 //# sourceMappingURL=webvi-custom.js.map

package/dist/esm/icons/webvi-host.d.ts

@@ -1,12 +1,12 @@
 import { Icon } from '../icon-base';
 declare global {
     interface HTMLElementTagNameMap {
-        'nimble-webvi-host-icon': WebviHostIcon;
+        'nimble-icon-webvi-host': IconWebviHost;
     }
 }
 /**
  * The icon component for the 'webviHost' icon
  */
-export declare class WebviHostIcon extends Icon {
+export declare class IconWebviHost extends Icon {
     constructor();
 }

package/dist/esm/icons/webvi-host.js

@@ -5,10 +5,10 @@ import { Icon, registerIcon } from '../icon-base';
 /**
  * The icon component for the 'webviHost' icon
  */
-export class WebviHostIcon extends Icon {
+export class IconWebviHost extends Icon {
     constructor() {
         super(webviHost16X16);
     }
 }
-registerIcon('webvi-host-icon', WebviHostIcon);
+registerIcon('icon-webvi-host', IconWebviHost);
 //# sourceMappingURL=webvi-host.js.map

package/dist/esm/icons/window-code.d.ts

@@ -1,12 +1,12 @@
 import { Icon } from '../icon-base';
 declare global {
     interface HTMLElementTagNameMap {
-        'nimble-window-code-icon': WindowCodeIcon;
+        'nimble-icon-window-code': IconWindowCode;
     }
 }
 /**
  * The icon component for the 'windowCode' icon
  */
-export declare class WindowCodeIcon extends Icon {
+export declare class IconWindowCode extends Icon {
     constructor();
 }

package/dist/esm/icons/window-code.js

@@ -5,10 +5,10 @@ import { Icon, registerIcon } from '../icon-base';
 /**
  * The icon component for the 'windowCode' icon
  */
-export class WindowCodeIcon extends Icon {
+export class IconWindowCode extends Icon {
     constructor() {
         super(windowCode16X16);
     }
 }
-registerIcon('window-code-icon', WindowCodeIcon);
+registerIcon('icon-window-code', IconWindowCode);
 //# sourceMappingURL=window-code.js.map

package/dist/esm/icons/window-text.d.ts

@@ -1,12 +1,12 @@
 import { Icon } from '../icon-base';
 declare global {
     interface HTMLElementTagNameMap {
-        'nimble-window-text-icon': WindowTextIcon;
+        'nimble-icon-window-text': IconWindowText;
     }
 }
 /**
  * The icon component for the 'windowText' icon
  */
-export declare class WindowTextIcon extends Icon {
+export declare class IconWindowText extends Icon {
     constructor();
 }

package/dist/esm/icons/window-text.js

@@ -5,10 +5,10 @@ import { Icon, registerIcon } from '../icon-base';
 /**
  * The icon component for the 'windowText' icon
  */
-export class WindowTextIcon extends Icon {
+export class IconWindowText extends Icon {
     constructor() {
         super(windowText16X16);
     }
 }
-registerIcon('window-text-icon', WindowTextIcon);
+registerIcon('icon-window-text', IconWindowText);
 //# sourceMappingURL=window-text.js.map

package/dist/esm/icons/wrench-hammer.d.ts

@@ -1,12 +1,12 @@
 import { Icon } from '../icon-base';
 declare global {
     interface HTMLElementTagNameMap {
-        'nimble-wrench-hammer-icon': WrenchHammerIcon;
+        'nimble-icon-wrench-hammer': IconWrenchHammer;
     }
 }
 /**
  * The icon component for the 'wrenchHammer' icon
  */
-export declare class WrenchHammerIcon extends Icon {
+export declare class IconWrenchHammer extends Icon {
     constructor();
 }

package/dist/esm/icons/wrench-hammer.js

@@ -5,10 +5,10 @@ import { Icon, registerIcon } from '../icon-base';
 /**
  * The icon component for the 'wrenchHammer' icon
  */
-export class WrenchHammerIcon extends Icon {
+export class IconWrenchHammer extends Icon {
     constructor() {
         super(wrenchHammer16X16);
     }
 }
-registerIcon('wrench-hammer-icon', WrenchHammerIcon);
+registerIcon('icon-wrench-hammer', IconWrenchHammer);
 //# sourceMappingURL=wrench-hammer.js.map

package/dist/esm/icons/xmark-check.d.ts

@@ -1,12 +1,12 @@
 import { Icon } from '../icon-base';
 declare global {
     interface HTMLElementTagNameMap {
-        'nimble-xmark-check-icon': XmarkCheckIcon;
+        'nimble-icon-xmark-check': IconXmarkCheck;
     }
 }
 /**
  * The icon component for the 'xmarkCheck' icon
  */
-export declare class XmarkCheckIcon extends Icon {
+export declare class IconXmarkCheck extends Icon {
     constructor();
 }

package/dist/esm/icons/xmark-check.js

@@ -5,10 +5,10 @@ import { Icon, registerIcon } from '../icon-base';
 /**
  * The icon component for the 'xmarkCheck' icon
  */
-export class XmarkCheckIcon extends Icon {
+export class IconXmarkCheck extends Icon {
     constructor() {
         super(xmarkCheck16X16);
     }
 }
-registerIcon('xmark-check-icon', XmarkCheckIcon);
+registerIcon('icon-xmark-check', IconXmarkCheck);
 //# sourceMappingURL=xmark-check.js.map

package/dist/esm/icons/xmark.d.ts

@@ -1,12 +1,12 @@
 import { Icon } from '../icon-base';
 declare global {
     interface HTMLElementTagNameMap {
-        'nimble-xmark-icon': XmarkIcon;
+        'nimble-icon-xmark': IconXmark;
     }
 }
 /**
  * The icon component for the 'xmark' icon
  */
-export declare class XmarkIcon extends Icon {
+export declare class IconXmark extends Icon {
     constructor();
 }

package/dist/esm/icons/xmark.js

@@ -5,10 +5,10 @@ import { Icon, registerIcon } from '../icon-base';
 /**
  * The icon component for the 'xmark' icon
  */
-export class XmarkIcon extends Icon {
+export class IconXmark extends Icon {
     constructor() {
         super(xmark16X16);
     }
 }
-registerIcon('xmark-icon', XmarkIcon);
+registerIcon('icon-xmark', IconXmark);
 //# sourceMappingURL=xmark.js.map

package/dist/esm/number-field/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { borderColor, borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, fillSelectedRgbPartialColor, iconSize, controlLabelFont, controlLabelFontColor, labelHeight, smallDelay, bodyFont } from '../theme-provider/design-tokens';
+import { borderColor, borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, fillSelectedRgbPartialColor, iconSize, controlLabelFont, controlLabelFontColor, labelHeight, smallDelay, bodyFont, failColor, standardPadding } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('inline-block')}
 
@@ -10,6 +10,7 @@ export const styles = css `
         user-select: none;
         color: ${bodyFontColor};
         height: calc(${labelHeight} + ${controlHeight});
+        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
     }
 
     :host([disabled]) {
@@ -17,32 +18,71 @@ export const styles = css `
         cursor: default;
     }
 
+    .label {
+        display: flex;
+        color: ${controlLabelFontColor};
+        font: ${controlLabelFont};
+    }
+
     .root {
         box-sizing: border-box;
         position: relative;
         display: flex;
         flex-direction: row;
+        justify-content: center;
         border-radius: 0px;
         border-bottom: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);
-        padding-bottom: 1px;
-        transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
+        gap: calc(${standardPadding} / 2);
+    }
+
+    .root:focus-within {
+        border-bottom-color: ${borderHoverColor};
+    }
+
+    :host([disabled]) .root,
+    :host([disabled]) .root:hover {
+        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
+    }
+
+    .root::before {
+        ${ /* Empty string causes alignment issue */''}
+        content: ' ';
+        color: transparent;
+        width: 0px;
+        user-select: none;
+    }
+
+    .root::after {
+        content: '';
+        position: absolute;
+        bottom: calc(-1 * ${borderWidth});
+        width: 0px;
+        height: 0px;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-hover-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
     }
 
     @media (prefers-reduced-motion) {
-        .root {
+        .root::after {
             transition-duration: 0s;
         }
     }
 
-    .root:hover {
-        border-bottom: 2px solid ${borderHoverColor};
-        padding-bottom: 0px;
+    :host(.invalid) .root::after {
+        border-bottom-color: ${failColor};
     }
 
-    :host([disabled]) .root,
-    :host([disabled]) .root:hover {
-        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
-        padding-bottom: 1px;
+    :host(:hover) .root::after {
+        width: 100%;
+    }
+
+    :host([disabled]:hover) .root::after {
+        width: 0px;
+    }
+
+    [part='start'] {
+        display: contents;
     }
 
     .control {
@@ -50,11 +90,10 @@ export const styles = css `
         font: inherit;
         background: transparent;
         color: inherit;
-        height: 28px;
+        height: calc(${controlHeight} - ${borderWidth});
         width: 100%;
-        margin-top: auto;
-        margin-bottom: auto;
         border: none;
+        padding: 0px;
     }
 
     .control:hover,
@@ -81,12 +120,6 @@ export const styles = css `
         color: ${bodyDisabledFontColor};
     }
 
-    .label {
-        display: flex;
-        color: ${controlLabelFontColor};
-        font: ${controlLabelFont};
-    }
-
     .controls {
         display: flex;
         flex-direction: column;

package/dist/esm/number-field/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,2BAA2B,EAC3B,QAAQ,EACR,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,QAAQ,EACX,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;iBAGP,aAAa;uBACP,WAAW,MAAM,aAAa;;;;iBAIpC,qBAAqB;;;;;;;;;;yBAUb,WAAW,eAAe,qBAAqB;;oCAEpC,UAAU,oBAAoB,UAAU;;;;;;;;;;mCAUzC,gBAAgB;;;;;;yBAM1B,WAAW,UAAU,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;iBAwBlD,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;;;;;;;;;;;;;;;;;kBAoBd,QAAQ;iBACT,QAAQ;gBACT,WAAW;;CAE1B,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,2BAA2B,EAC3B,QAAQ,EACR,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,QAAQ,EACR,SAAS,EACT,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;iBAGP,aAAa;uBACP,WAAW,MAAM,aAAa;mDACF,WAAW;;;;iBAI7C,qBAAqB;;;;;;iBAMrB,qBAAqB;gBACtB,gBAAgB;;;;;;;;;;yBAUP,WAAW,eAAe,qBAAqB;oBACpD,eAAe;;;;+BAIJ,gBAAgB;;;;;yBAKtB,WAAW,UAAU,qBAAqB;;;;UAIzD,CAAA,yCAA0C,EAAE;;;;;;;;;;4BAU1B,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;uBAoBjB,aAAa,MAAM,WAAW;;;;;;;;;;;;;;iBAcpC,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;;;;;;;;;;;;;;;;kBAoBpB,QAAQ;iBACT,QAAQ;gBACT,WAAW;;CAE1B,CAAC"}

package/dist/esm/select/index.d.ts

@@ -10,4 +10,6 @@ declare global {
 export declare class Select extends FoundationSelect {
     setPositioning(): void;
     slottedOptionsChanged(prev: Element[], next: Element[]): void;
+    private maxHeightChanged;
+    private updateListboxMaxHeightCssVariable;
 }

package/dist/esm/select/index.js

@@ -13,6 +13,7 @@ export class Select extends FoundationSelect {
             return;
         }
         super.setPositioning();
+        this.updateListboxMaxHeightCssVariable();
     }
     // Workaround for https://github.com/microsoft/fast/issues/5773
     slottedOptionsChanged(prev, next) {
@@ -22,6 +23,14 @@ export class Select extends FoundationSelect {
             this.value = value;
         }
     }
+    maxHeightChanged() {
+        this.updateListboxMaxHeightCssVariable();
+    }
+    updateListboxMaxHeightCssVariable() {
+        if (this.listbox) {
+            this.listbox.style.setProperty('--ni-private-select-max-height', `${this.maxHeight}px`);
+        }
+    }
 }
 const nimbleSelect = Select.compose({
     baseName: 'select',

package/dist/esm/select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,gBAAgB;IACxC,+DAA+D;IAC/C,cAAc;QAC1B,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACnC,qDAAqD;YACrD,mDAAmD;YACnD,OAAO;SACV;QACD,KAAK,CAAC,cAAc,EAAE,CAAC;IAC3B,CAAC;IAED,+DAA+D;IAC/C,qBAAqB,CACjC,IAAe,EACf,IAAe;QAEf,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,KAAK,CAAC,qBAAqB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QACxC,IAAI,KAAK,EAAE;YACP,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SACtB;IACL,CAAC;CACJ;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ;IACR,MAAM;IACN,SAAS,EAAE,sBAAsB,CAAC,IAAI;CACzC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,gBAAgB;IACxC,+DAA+D;IAC/C,cAAc;QAC1B,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACnC,qDAAqD;YACrD,mDAAmD;YACnD,OAAO;SACV;QACD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,iCAAiC,EAAE,CAAC;IAC7C,CAAC;IAED,+DAA+D;IAC/C,qBAAqB,CACjC,IAAe,EACf,IAAe;QAEf,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,KAAK,CAAC,qBAAqB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QACxC,IAAI,KAAK,EAAE;YACP,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SACtB;IACL,CAAC;IAEO,gBAAgB;QACpB,IAAI,CAAC,iCAAiC,EAAE,CAAC;IAC7C,CAAC;IAEO,iCAAiC;QACrC,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAC1B,gCAAgC,EAChC,GAAG,IAAI,CAAC,SAAS,IAAI,CACxB,CAAC;SACL;IACL,CAAC;CACJ;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ;IACR,MAAM;IACN,SAAS,EAAE,sBAAsB,CAAC,IAAI;CACzC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}

package/dist/esm/select/styles.js

@@ -24,14 +24,13 @@ export const styles = css `
         overflow-y: auto;
         position: absolute;
         width: 100%;
-        ${
-/*
- * The --max-height custom property is defined by fast-foundation.
- * See: https://github.com/microsoft/fast/blob/af1f8736ae9ff54a7449324bad952865981d1ece/packages/web-components/fast-foundation/src/select/select.ts#L199
- */ ''}
-        max-height: calc(var(--max-height) - ${controlHeight});
+        --ni-private-listbox-padding: 4px;
+        max-height: calc(
+            var(--ni-private-select-max-height) - 2 *
+                var(--ni-private-listbox-padding)
+        );
         z-index: 1;
-        padding: 4px;
+        padding: var(--ni-private-listbox-padding);
         box-shadow: 0px 3px 3px ${popupBoxShadowColor};
         border: 1px solid ${popupBorderColor};
         background-color: ${applicationBackgroundColor};

package/dist/esm/select/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACV,YAAY,EACf,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;;;;;;;;;;;;;;UAgBrB;AACE;;;GAGG,CAAC,EACR;+CACuC,aAAa;;;kCAG1B,mBAAmB;4BACzB,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;;;yBAe7B,WAAW,UAAU,qBAAqB;;;;;;;;;;;yBAW1C,WAAW,UAAU,gBAAgB;oCAC1B,UAAU,oBAAoB,UAAU;;;;mCAIzC,gBAAgB;;oCAEf,UAAU,oBAAoB,UAAU;;;;;yBAKnD,WAAW,UAAU,qBAAqB;;iBAElD,qBAAqB;;;;;;;;;;;;;;kBAcpB,aAAa;;;;oBAIX,aAAa,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;iBAsBlC,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;;;;;;;;;;;CAqBpC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACV,YAAY,EACf,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;;;;;;;;;;;;;;;;;;;;;kCAuBG,mBAAmB;4BACzB,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;;;yBAe7B,WAAW,UAAU,qBAAqB;;;;;;;;;;;yBAW1C,WAAW,UAAU,gBAAgB;oCAC1B,UAAU,oBAAoB,UAAU;;;;mCAIzC,gBAAgB;;oCAEf,UAAU,oBAAoB,UAAU;;;;;yBAKnD,WAAW,UAAU,qBAAqB;;iBAElD,qBAAqB;;;;;;;;;;;;;;kBAcpB,aAAa;;;;oBAIX,aAAa,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;iBAsBlC,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;;;;;;;;;;;CAqBpC,CAAC"}