@ni/nimble-components 1.0.0-beta.12 → 1.0.0-beta.120

package/dist/esm/menu-item/styles.js

@@ -0,0 +1,64 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { focusVisible } from '../utilities/style/focus';
+import { controlHeight, fontFamily, contentFontSize, fillColorSelected, fillColorHover, contentFontColor, borderColorHover, contentFontColorDisabled, iconSize } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('grid')}
+
+    :host {
+        contain: layout;
+        overflow: visible;
+        box-sizing: border-box;
+        height: ${controlHeight};
+        grid-template-columns: 0px 1fr;
+        grid-template-rows: 1fr;
+        justify-items: start;
+        align-items: center;
+        padding-left: 8px;
+        padding-right: 8px;
+        margin: 0 0;
+        white-space: nowrap;
+        color: ${contentFontColor};
+        fill: currentcolor;
+        cursor: pointer;
+        font-family: ${fontFamily};
+        font-size: ${contentFontSize};
+    }
+    :host(${focusVisible}) {
+        outline: 2px solid ${borderColorHover};
+        outline-offset: -2px;
+    }
+    :host(:hover) {
+        background: ${fillColorHover};
+    }
+    :host(:active) {
+        background: ${fillColorSelected};
+    }
+    :host([disabled]) {
+        color: ${contentFontColorDisabled};
+        fill: currentcolor;
+        cursor: default;
+    }
+    :host([disabled]:hover) {
+        background: transparent;
+    }
+    :host(.indent-1) {
+        grid-template-columns: ${iconSize} 1fr;
+        column-gap: 8px;
+    }
+    [part='start'] {
+        display: contents;
+    }
+    slot[name='start']::slotted(*) {
+        fill: currentcolor;
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+    :host(.indent-1) .start {
+        grid-column: 1;
+    }
+    :host(.indent-1) .content {
+        grid-column: 2;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/menu-item/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,aAAa,EACb,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,wBAAwB,EACxB,QAAQ,EACX,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;kBAMH,aAAa;;;;;;;;;iBASd,gBAAgB;;;uBAGV,UAAU;qBACZ,eAAe;;YAExB,YAAY;6BACK,gBAAgB;;;;sBAIvB,cAAc;;;sBAGd,iBAAiB;;;iBAGtB,wBAAwB;;;;;;;;iCAQR,QAAQ;;;;;;;;iBAQxB,QAAQ;kBACP,QAAQ;;;;;;;;CAQzB,CAAC"}

package/dist/esm/number-field/index.d.ts

@@ -1 +1,12 @@
-export {};
+import { NumberField as FoundationNumberField } from '@microsoft/fast-foundation';
+export type { NumberField };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-number-field': NumberField;
+    }
+}
+/**
+ * A nimble-styled HTML number input
+ */
+declare class NumberField extends FoundationNumberField {
+}

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

@@ -1,6 +1,11 @@
-import { DesignSystem, NumberField, numberFieldTemplate as template } from '@microsoft/fast-foundation';
+import { DesignSystem, NumberField as FoundationNumberField, numberFieldTemplate as template } from '@microsoft/fast-foundation';
+import { controlsArrowExpanderDown16X16, controlsArrowExpanderUp16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
 import { styles } from './styles';
-import { nimbleIconNames } from '../shared/icon-font';
+/**
+ * A nimble-styled HTML number input
+ */
+class NumberField extends FoundationNumberField {
+}
 /**
  * A function that returns a number-field registration for configuring the component with a DesignSystem.
  *
@@ -11,17 +16,15 @@ import { nimbleIconNames } from '../shared/icon-font';
  */
 const nimbleNumberField = NumberField.compose({
     baseName: 'number-field',
+    baseClass: FoundationNumberField,
+    // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
     template,
     styles,
     shadowOptions: {
         delegatesFocus: true
     },
-    stepDownGlyph: `
-        <i class="${nimbleIconNames.DownArrow}"></i>
-    `,
-    stepUpGlyph: `
-        <i class="${nimbleIconNames.UpArrow}"></i>
-    `
+    stepDownGlyph: controlsArrowExpanderDown16X16.data,
+    stepUpGlyph: controlsArrowExpanderUp16X16.data
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/number-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,WAAW,EAEX,mBAAmB,IAAI,QAAQ,EAClC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD;;;;;;;GAOG;AACH,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAqB;IAC9D,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,aAAa,EAAE;oBACC,eAAe,CAAC,SAAS;KACxC;IACD,WAAW,EAAE;oBACG,eAAe,CAAC,OAAO;KACtC;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/number-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,WAAW,IAAI,qBAAqB,EAEpC,mBAAmB,IAAI,QAAQ,EAClC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACH,8BAA8B,EAC9B,4BAA4B,EAC/B,MAAM,sDAAsD,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,WAAY,SAAQ,qBAAqB;CAAG;AAElD;;;;;;;GAOG;AACH,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAqB;IAC9D,QAAQ,EAAE,cAAc;IACxB,SAAS,EAAE,qBAAqB;IAChC,0GAA0G;IAC1G,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,aAAa,EAAE,8BAA8B,CAAC,IAAI;IAClD,WAAW,EAAE,4BAA4B,CAAC,IAAI;CACjD,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC"}

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

@@ -1,91 +1,118 @@
 import { css } from '@microsoft/fast-element';
-import { nimbleIconFontStyles } from '../shared/icon-font';
-import { borderColor, borderColorHover, fillColorSelectedRgb, fontFamily, fontColor, labelFontFamily, labelFontSize } from '../theme-provider/design-tokens';
+import { display } from '@microsoft/fast-foundation';
+import { borderColor, borderColorRgb, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelectedRgb, fontFamily, iconSize, labelFontColor, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, smallDelay } from '../theme-provider/design-tokens';
 export const styles = css `
-  ${nimbleIconFontStyles}
-
-  :host {
-    display: inline-block;
-    font-family: ${fontFamily};
-    outline: none;
-    user-select: none;
-    color: ${fontColor};
-  }
-
-  .root {
-    box-sizing: border-box;
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    border-radius: 0px;
-    font-family: ${fontFamily};
-    border-bottom: 2px solid ${borderColor};
-  }
-
-  .root:hover {
-    border-bottom: 2px solid ${borderColorHover};
-  }
-
-  .control {
-    -webkit-appearance: none;
-    font: inherit;
-    background: transparent;
-    border: 0;
-    color: inherit;
-    height: 28px;
-    width: 100%;
-    margin-top: auto;
-    margin-bottom: auto;
-    border: none;
-  }
-
-  .control:hover,
-  .control:focus,
-  .control:disabled,
-  .control:active {
-    outline: none;
-  }
-
-  .control::selection {
-    color: ${fontColor};
-    background: rgba(${fillColorSelectedRgb}, 0.3);
-  }
-
-  .control::placeholder {
-    color: ${fontColor};
-    opacity: 0.5;
-  }
-
-  .control:focus-within::placeholder {
-    opacity: 1;
-  }
-
-  .label {
-    font-family: ${labelFontFamily};
-    font-size: ${labelFontSize};
-    line-height: 16px;
-    text-transform: uppercase;
-  }
-
-  .controls {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .step-up,
-  .step-down {
-    display: contents;
-  }
-
-  .nimble-icons-DownArrow,
-  .nimble-icons-UpArrow {
-    display: inline-flex;
-    height: 15px;
-    width: 15px;
-    justify-content: center;
-    align-items: center;
-    font-size: 10px;
-    cursor: pointer;
-  }
+    ${display('inline-block')}
+
+    :host {
+        font-family: ${fontFamily};
+        font-size: ${contentFontSize};
+        outline: none;
+        user-select: none;
+        color: ${contentFontColor};
+        height: calc(${labelHeight} + ${controlHeight});
+    }
+
+    :host([disabled]) {
+        color: ${contentFontColorDisabled};
+        cursor: default;
+    }
+
+    .root {
+        box-sizing: border-box;
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        border-radius: 0px;
+        font-family: ${fontFamily};
+        border-bottom: ${borderWidth} solid rgba(${borderColorRgb}, 0.3);
+        padding-bottom: 1px;
+        transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
+    }
+
+    @media (prefers-reduced-motion) {
+        .root {
+            transition-duration: 0s;
+        }
+    }
+
+    .root:hover {
+        border-bottom: 2px solid ${borderColorHover};
+        padding-bottom: 0px;
+    }
+
+    :host([disabled]) .root,
+    :host([disabled]) .root:hover {
+        border-bottom: ${borderWidth} solid ${contentFontColorDisabled};
+        padding-bottom: 1px;
+    }
+
+    .control {
+        -webkit-appearance: none;
+        font: inherit;
+        background: transparent;
+        color: inherit;
+        height: 28px;
+        width: 100%;
+        margin-top: auto;
+        margin-bottom: auto;
+        border: none;
+    }
+
+    .control:hover,
+    .control:focus,
+    .control:disabled,
+    .control:active {
+        outline: none;
+    }
+
+    .control::selection {
+        color: ${labelFontColor};
+        background: rgba(${fillColorSelectedRgb}, 0.3);
+    }
+
+    .control::placeholder {
+        color: ${labelFontColor};
+    }
+
+    .control:focus-within::placeholder {
+        opacity: 1;
+    }
+
+    .control[disabled]::placeholder {
+        color: ${contentFontColorDisabled};
+    }
+
+    .label {
+        display: flex;
+        color: ${labelFontColor};
+        font-family: ${labelFontFamily};
+        font-size: ${labelFontSize};
+        font-weight: ${labelFontWeight};
+        line-height: ${labelHeight};
+        text-transform: ${labelTextTransform};
+    }
+
+    .controls {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .step-up,
+    .step-down {
+        display: inline-flex;
+        height: 15px;
+        width: 15px;
+        cursor: pointer;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .step-up svg,
+    .step-down svg {
+        height: ${iconSize};
+        width: ${iconSize};
+        fill: ${borderColor};
+    }
 `;
 //# sourceMappingURL=styles.js.map

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,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,oBAAoB,EACpB,UAAU,EACV,SAAS,EACT,eAAe,EACf,aAAa,EAChB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,oBAAoB;;;;mBAIL,UAAU;;;aAGhB,SAAS;;;;;;;;;mBASH,UAAU;+BACE,WAAW;;;;+BAIX,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;aAwBlC,SAAS;uBACC,oBAAoB;;;;aAI9B,SAAS;;;;;;;;;mBASH,eAAe;iBACjB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;CAyB7B,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,cAAc,EACd,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,oBAAoB,EACpB,UAAU,EACV,QAAQ,EACR,cAAc,EACd,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;uBAGN,UAAU;qBACZ,eAAe;;;iBAGnB,gBAAgB;uBACV,WAAW,MAAM,aAAa;;;;iBAIpC,wBAAwB;;;;;;;;;;uBAUlB,UAAU;yBACR,WAAW,eAAe,cAAc;;oCAE7B,UAAU,oBAAoB,UAAU;;;;;;;;;;mCAUzC,gBAAgB;;;;;;yBAM1B,WAAW,UAAU,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;iBAwBrD,cAAc;2BACJ,oBAAoB;;;;iBAI9B,cAAc;;;;;;;;iBAQd,wBAAwB;;;;;iBAKxB,cAAc;uBACR,eAAe;qBACjB,aAAa;uBACX,eAAe;uBACf,WAAW;0BACR,kBAAkB;;;;;;;;;;;;;;;;;;;;kBAoB1B,QAAQ;iBACT,QAAQ;gBACT,WAAW;;CAE1B,CAAC"}

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

@@ -0,0 +1,16 @@
+import { Select as FoundationSelect } from '@microsoft/fast-foundation';
+export type { Select };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-select': Select;
+    }
+}
+/**
+ * A nimble-styed HTML select
+ */
+declare class Select extends FoundationSelect {
+    get value(): string;
+    set value(value: string);
+    setPositioning(): void;
+    connectedCallback(): void;
+}

package/dist/esm/select/index.js

@@ -0,0 +1,50 @@
+import { DesignSystem, Select as FoundationSelect, selectTemplate as template } from '@microsoft/fast-foundation';
+import { controlsArrowExpanderDown16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { styles } from './styles';
+/**
+ * A nimble-styed HTML select
+ */
+class Select extends FoundationSelect {
+    get value() {
+        return super.value;
+    }
+    set value(value) {
+        super.value = value;
+        // Workaround for https://github.com/microsoft/fast/issues/5139
+        // When the value property is set very early in the element's lifecycle (e.g. Angular value binding),
+        // the options property will not be set yet. As a workaround, we mark the listbox-option element with
+        // the selected attribute, which will set the initial value correctly.
+        if (value !== null && this.options.length === 0) {
+            const options = this.querySelectorAll('option,[role="option"]');
+            options.forEach(option => {
+                if (option.getAttribute('value') === value) {
+                    option.setAttribute('selected', '');
+                }
+            });
+        }
+    }
+    // Workaround for https://github.com/microsoft/fast/issues/5123
+    setPositioning() {
+        if (!this.$fastController.isConnected) {
+            // Don't call setPositioning() until we're connected,
+            // since this.forcedPosition isn't initialized yet.
+            return;
+        }
+        super.setPositioning();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Call setPositioning() after this.forcedPosition is initialized.
+        this.setPositioning();
+    }
+}
+const nimbleSelect = Select.compose({
+    baseName: 'select',
+    baseClass: FoundationSelect,
+    // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
+    template,
+    styles,
+    indicator: controlsArrowExpanderDown16X16.data
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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,8BAA8B,EAAE,MAAM,sDAAsD,CAAC;AACtG,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;IACjC,IAAW,KAAK;QACZ,OAAO,KAAK,CAAC,KAAK,CAAC;IACvB,CAAC;IAED,IAAW,KAAK,CAAC,KAAa;QAC1B,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;QAEpB,+DAA+D;QAC/D,qGAAqG;QACrG,qGAAqG;QACrG,sEAAsE;QACtE,IAAI,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;YAC7C,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;YAChE,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;gBACrB,IAAI,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,KAAK,EAAE;oBACxC,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;iBACvC;YACL,CAAC,CAAC,CAAC;SACN;IACL,CAAC;IAED,+DAA+D;IACxD,cAAc;QACjB,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACnC,qDAAqD;YACrD,mDAAmD;YACnD,OAAO;SACV;QACD,KAAK,CAAC,cAAc,EAAE,CAAC;IAC3B,CAAC;IAEM,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,kEAAkE;QAClE,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;CACJ;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,0GAA0G;IAC1G,QAAQ;IACR,MAAM;IACN,SAAS,EAAE,8BAA8B,CAAC,IAAI;CACjD,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}

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

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/select/styles.js

@@ -0,0 +1,141 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { applicationBackgroundColor, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fontFamily, iconSize, popupBorderColor, popupBoxShadowColor, smallDelay } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('inline-flex')}
+
+    :host {
+        box-sizing: border-box;
+        color: ${contentFontColor};
+        font-family: ${fontFamily};
+        height: ${controlHeight};
+        position: relative;
+        user-select: none;
+        min-width: 250px;
+        outline: none;
+        vertical-align: top;
+    }
+
+    .listbox {
+        box-sizing: border-box;
+        display: inline-flex;
+        flex-direction: column;
+        left: 0;
+        overflow-y: auto;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+        padding: 4px;
+        box-shadow: 0px 3px 3px ${popupBoxShadowColor};
+        border: 1px solid ${popupBorderColor};
+        background-color: ${applicationBackgroundColor};
+        background-clip: padding-box;
+    }
+
+    .listbox[hidden] {
+        display: none;
+    }
+
+    .control {
+        align-items: center;
+        box-sizing: border-box;
+        cursor: pointer;
+        display: flex;
+        font-size: ${contentFontSize};
+        font-family: inherit;
+        min-height: 100%;
+        width: 100%;
+        border-bottom: ${borderWidth} solid ${contentFontColorDisabled};
+        background-color: transparent;
+        padding-left: 8px;
+        padding-bottom: 1px;
+    }
+
+    :host([disabled]) .control {
+        cursor: default;
+    }
+
+    :host(.open:not(:hover)) .control {
+        border-bottom: ${borderWidth} solid ${borderColorHover};
+        transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
+    }
+
+    :host(:hover) .control {
+        border-bottom: 2px solid ${borderColorHover};
+        padding-bottom: 0px;
+        transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
+    }
+
+    :host([disabled]) .control,
+    :host([disabled]) .control:hover {
+        border-bottom: ${borderWidth} solid ${contentFontColorDisabled};
+        padding-bottom: 1px;
+        color: ${contentFontColorDisabled};
+    }
+
+    :host([open][position='above']) .listbox {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    :host([open][position='below']) .listbox {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+
+    :host([open][position='above']) .listbox {
+        bottom: ${controlHeight};
+    }
+
+    :host([open][position='below']) .listbox {
+        top: calc(${controlHeight} + 3px);
+    }
+
+    .selected-value {
+        flex: 1 1 auto;
+        font-family: inherit;
+        text-align: start;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .indicator {
+        flex: 0 0 auto;
+        margin-inline-start: 1em;
+        padding-right: 8px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .indicator slot[name='indicator'] svg {
+        width: ${iconSize};
+        height: ${iconSize};
+        fill: ${contentFontColor};
+    }
+
+    :host([disabled]) .indicator slot[name='indicator'] svg {
+        fill: ${contentFontColorDisabled};
+    }
+
+    slot[name='listbox'] {
+        display: none;
+        width: 100%;
+    }
+
+    :host([open]) slot[name='listbox'] {
+        display: flex;
+        position: absolute;
+    }
+
+    .end {
+        margin-inline-start: auto;
+    }
+
+    ::slotted([role='option']),
+    ::slotted(option) {
+        flex: 0 0 auto;
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +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,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,UAAU,EACV,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,gBAAgB;uBACV,UAAU;kBACf,aAAa;;;;;;;;;;;;;;;;;;kCAkBG,mBAAmB;4BACzB,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;qBAajC,eAAe;;;;yBAIX,WAAW,UAAU,wBAAwB;;;;;;;;;;;yBAW7C,WAAW,UAAU,gBAAgB;oCAC1B,UAAU,oBAAoB,UAAU;;;;mCAIzC,gBAAgB;;oCAEf,UAAU,oBAAoB,UAAU;;;;;yBAKnD,WAAW,UAAU,wBAAwB;;iBAErD,wBAAwB;;;;;;;;;;;;;;kBAcvB,aAAa;;;;oBAIX,aAAa;;;;;;;;;;;;;;;;;;;;;;iBAsBhB,QAAQ;kBACP,QAAQ;gBACV,gBAAgB;;;;gBAIhB,wBAAwB;;;;;;;;;;;;;;;;;;;;;CAqBvC,CAAC"}

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

@@ -0,0 +1,12 @@
+import { Tab as FoundationTab } from '@microsoft/fast-foundation';
+export type { Tab };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tab': Tab;
+    }
+}
+/**
+ * A nimble-styled HTML tab
+ */
+declare class Tab extends FoundationTab {
+}

package/dist/esm/tab/index.js

@@ -0,0 +1,16 @@
+import { DesignSystem, Tab as FoundationTab, tabTemplate as template } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+/**
+ * A nimble-styled HTML tab
+ */
+class Tab extends FoundationTab {
+}
+const nimbleTab = Tab.compose({
+    baseName: 'tab',
+    baseClass: FoundationTab,
+    // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,GAAG,IAAI,aAAa,EACpB,WAAW,IAAI,QAAQ,EAC1B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,GAAI,SAAQ,aAAa;CAAG;AAElC,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC;IAC1B,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,aAAa;IACxB,0GAA0G;IAC1G,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC"}

package/dist/esm/tab/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/tab/styles.js

@@ -0,0 +1,53 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorHover, fontFamily, mediumDelay, standardPadding } from '../theme-provider/design-tokens';
+import { focusVisible } from '../utilities/style/focus';
+export const styles = css `
+    ${display('inline-flex')}
+
+    :host {
+        box-sizing: border-box;
+        font-family: ${fontFamily};
+        font-size: ${contentFontSize};
+        height: ${controlHeight};
+        padding: calc(${standardPadding} / 2) ${standardPadding}
+            calc(${standardPadding} / 2 - ${borderWidth});
+        color: ${contentFontColor};
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        ${ /* Separate focus indicator from active indicator */''}
+        border-bottom: transparent ${borderWidth} solid;
+    }
+
+    :host(:hover) {
+        background-color: ${fillColorHover};
+    }
+
+    :host(:focus) {
+        outline: none;
+    }
+
+    :host(${focusVisible}) {
+        outline: none;
+        box-shadow: 0 calc(${borderWidth} * -1) ${borderColorHover} inset;
+        transition: box-shadow ${mediumDelay} ease-in-out;
+    }
+
+    @media (prefers-reduced-motion) {
+        :host(${focusVisible}) {
+            transition-duration: 0.01s;
+        }
+    }
+
+    :host(:active) {
+        background: none;
+    }
+
+    :host([disabled]) {
+        cursor: default;
+        color: ${contentFontColorDisabled};
+        background: none;
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,cAAc,EACd,UAAU,EACV,WAAW,EACX,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;uBAIL,UAAU;qBACZ,eAAe;kBAClB,aAAa;wBACP,eAAe,SAAS,eAAe;mBAC5C,eAAe,UAAU,WAAW;iBACtC,gBAAgB;;;;UAIvB,CAAA,oDAAqD,EAAE;qCAC5B,WAAW;;;;4BAIpB,cAAc;;;;;;;YAO9B,YAAY;;6BAEK,WAAW,UAAU,gBAAgB;iCACjC,WAAW;;;;gBAI5B,YAAY;;;;;;;;;;;iBAWX,wBAAwB;;;CAGxC,CAAC"}