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

package/dist/esm/nimble-components/src/text-field/index.d.ts

@@ -0,0 +1,12 @@
+import { TextField as FoundationTextField } from '@microsoft/fast-foundation';
+export type { TextField };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-text-field': TextField;
+    }
+}
+/**
+ * A nimble-styed HTML text input
+ */
+declare class TextField extends FoundationTextField {
+}

package/dist/esm/nimble-components/src/text-field/styles.d.ts

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

package/dist/esm/nimble-components/src/text-field/types.d.ts

@@ -0,0 +1,3 @@
+import { TextFieldType } from '@microsoft/fast-foundation';
+export declare type TextFieldTypeAttribute = 'email' | 'password' | 'tel' | 'text' | 'url';
+export { TextFieldType };

package/dist/esm/nimble-components/src/theme-provider/design-tokens.d.ts

@@ -0,0 +1,48 @@
+import { DesignToken } from '@microsoft/fast-foundation';
+import { NimbleTheme } from './types';
+export declare const theme: DesignToken<NimbleTheme>;
+export declare const actionColorRgb: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const applicationBackgroundColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const fillColorSelected: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const fillColorSelectedRgb: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const fillColorSelectedHover: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const fillColorHover: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const borderColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const borderColorRgb: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const failColorTheme: (element: HTMLElement) => string;
+export declare const failColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const warningColorTheme: (element: HTMLElement) => string;
+export declare const warningColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const passColorTheme: (element: HTMLElement) => string;
+export declare const passColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const borderColorHover: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const popupBoxShadowColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const popupBorderColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const controlHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const standardPadding: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const borderWidth: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const iconSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const drawerWidth: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const fontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelFontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const groupLabelFontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const drawerHeaderFontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const contentFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const groupLabelFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const drawerHeaderFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const groupLabelFontWeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelFontWeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const groupLabelFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const contentFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const buttonContentFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelFontColorDisabled: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelTextTransform: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const groupLabelTextTransform: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const contentFontColorDisabled: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const smallDelay: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const mediumDelay: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const drawerAnimationDurationMs: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const passwordRevealFilter: import("@microsoft/fast-foundation").CSSDesignToken<string>;

package/dist/esm/nimble-components/src/theme-provider/index.d.ts

@@ -0,0 +1,17 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { NimbleTheme } from './types';
+export type { NimbleThemeProvider };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-theme-provider': NimbleThemeProvider;
+    }
+}
+/**
+ * The NimbleThemeProvider implementation. Add this component to the page and set its `theme` attribute to control
+ * the values of design tokens that provide colors and fonts as CSS custom properties to any descendant components.
+ * @internal
+ */
+declare class NimbleThemeProvider extends FoundationElement {
+    theme: NimbleTheme;
+    themeChanged(_prev: NimbleTheme | undefined, next: NimbleTheme | undefined): void;
+}

package/dist/esm/nimble-components/src/theme-provider/styles.d.ts

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

package/dist/esm/nimble-components/src/theme-provider/template.d.ts

@@ -0,0 +1,2 @@
+import type { NimbleThemeProvider } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<NimbleThemeProvider, any>;

package/dist/esm/nimble-components/src/theme-provider/types.d.ts

@@ -0,0 +1,7 @@
+export declare type NimbleThemeAttribute = 'light' | 'dark' | 'color' | 'legacy-blue';
+export declare enum NimbleTheme {
+    Light = "light",
+    Dark = "dark",
+    Color = "color",
+    LegacyBlue = "legacy-blue"
+}

package/dist/esm/nimble-components/src/tree-item/index.d.ts

@@ -0,0 +1,34 @@
+import { TreeItem as FoundationTreeItem } from '@microsoft/fast-foundation';
+export type { TreeItem };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tree-item': TreeItem;
+    }
+}
+/**
+ * A function that returns a nimble-tree-item registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#treeItemTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: \<nimble-tree-item\>
+ *
+ */
+declare class TreeItem extends FoundationTreeItem {
+    private treeView;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private hasChildTreeItems;
+    private readonly handleClickOverride;
+    private readonly handleSelectedChange;
+    private clearTreeGroupSelection;
+    private setGroupSelectionOnRootParentTreeItem;
+    private getImmediateTreeItem;
+    /**
+     * This was copied directly from the FAST TreeItem implementation
+     * @returns the root tree view
+     */
+    private getParentTreeView;
+}

package/dist/esm/nimble-components/src/tree-item/styles.d.ts

@@ -0,0 +1,3 @@
+import { ElementStyles } from '@microsoft/fast-element';
+import { ElementDefinitionContext, TreeItemOptions } from '@microsoft/fast-foundation';
+export declare const styles: (context: ElementDefinitionContext, definition: TreeItemOptions) => ElementStyles;

package/dist/esm/nimble-components/src/tree-view/index.d.ts

@@ -0,0 +1,22 @@
+import { TreeView as FoundationTreeView } from '@microsoft/fast-foundation';
+import { TreeViewSelectionMode } from './types';
+export type { TreeView };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tree-view': TreeView;
+    }
+}
+/**
+ * A function that returns a nimble-tree-view registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#treeViewTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: \<nimble-tree-view\>
+ *
+ */
+declare class TreeView extends FoundationTreeView {
+    selectionMode: TreeViewSelectionMode;
+    connectedCallback(): void;
+}

package/dist/esm/nimble-components/src/tree-view/styles.d.ts

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

package/dist/esm/nimble-components/src/tree-view/types.d.ts

@@ -0,0 +1,7 @@
+export declare const pinnedSelectedAttribute = "pinned-selected";
+export declare const groupSelectedAttribute = "group-selected";
+export declare type TreeViewSelectionModeAttribute = 'all' | 'leaves-only';
+export declare enum TreeViewSelectionMode {
+    All = "all",
+    LeavesOnly = "leaves-only"
+}

package/dist/esm/nimble-components/src/utilities/style/focus.d.ts

@@ -0,0 +1,11 @@
+/**
+ * This file is a workaround for: https://github.com/prettier/prettier/issues/11400
+ */
+/**
+ * The string representing the focus selector to be used. Value
+ * will be ":focus-visible" when https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
+ * is supported and ":focus" when it is not.
+ *
+ * @public
+ */
+export declare const focusVisible: string;

package/dist/esm/nimble-components/src/utilities/style/prefers-reduced-motion.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Singleton utility to watch the prefers-reduced-motion media value
+ */
+export declare class PrefersReducedMotionWatcher {
+    static instance: PrefersReducedMotionWatcher;
+    readonly mediaQuery: MediaQueryList;
+    private constructor();
+}

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;