@ni/nimble-components 1.0.0-beta.11 → 1.0.0-beta.110

package/dist/esm/icons/delete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"delete.js","sourceRoot":"","sources":["../../../src/icons/delete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACnF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAI;IAChC;QACI,KAAK,CAAC,WAAW,CAAC,CAAC;IACvB,CAAC;CACJ;AAED,YAAY,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC"}

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

@@ -0,0 +1,7 @@
+import { Icon } from '../icon-base';
+/**
+ *  The icon component for the 'fail' icon
+ */
+export declare class FailIcon extends Icon {
+    constructor();
+}

package/dist/esm/icons/fail.js

@@ -0,0 +1,12 @@
+import { statusFail16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ *  The icon component for the 'fail' icon
+ */
+export class FailIcon extends Icon {
+    constructor() {
+        super(statusFail16X16);
+    }
+}
+registerIcon('fail-icon', FailIcon);
+//# sourceMappingURL=fail.js.map

package/dist/esm/icons/fail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fail.js","sourceRoot":"","sources":["../../../src/icons/fail.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sDAAsD,CAAC;AACvF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,IAAI;IAC9B;QACI,KAAK,CAAC,eAAe,CAAC,CAAC;IAC3B,CAAC;CACJ;AAED,YAAY,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC"}

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

@@ -0,0 +1,7 @@
+import { Icon } from '../icon-base';
+/**
+ * The icon component for the 'login' icon
+ */
+export declare class LoginIcon extends Icon {
+    constructor();
+}

package/dist/esm/icons/login.js

@@ -0,0 +1,12 @@
+import { login16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ * The icon component for the 'login' icon
+ */
+export class LoginIcon extends Icon {
+    constructor() {
+        super(login16X16);
+    }
+}
+registerIcon('login-icon', LoginIcon);
+//# sourceMappingURL=login.js.map

package/dist/esm/icons/login.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"login.js","sourceRoot":"","sources":["../../../src/icons/login.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sDAAsD,CAAC;AAClF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,IAAI;IAC/B;QACI,KAAK,CAAC,UAAU,CAAC,CAAC;IACtB,CAAC;CACJ;AAED,YAAY,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC"}

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

@@ -0,0 +1,7 @@
+import { Icon } from '../icon-base';
+/**
+ * The icon component for the 'logout' icon
+ */
+export declare class LogoutIcon extends Icon {
+    constructor();
+}

package/dist/esm/icons/logout.js

@@ -0,0 +1,12 @@
+import { logout16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ * The icon component for the 'logout' icon
+ */
+export class LogoutIcon extends Icon {
+    constructor() {
+        super(logout16X16);
+    }
+}
+registerIcon('logout-icon', LogoutIcon);
+//# sourceMappingURL=logout.js.map

package/dist/esm/icons/logout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logout.js","sourceRoot":"","sources":["../../../src/icons/logout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACnF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAI;IAChC;QACI,KAAK,CAAC,WAAW,CAAC,CAAC;IACvB,CAAC;CACJ;AAED,YAAY,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC"}

package/dist/esm/icons/managed-systems.d.ts

@@ -0,0 +1,7 @@
+import { Icon } from '../icon-base';
+/**
+ * The icon component for the 'managed-systems' icon
+ */
+export declare class ManagedSystemsIcon extends Icon {
+    constructor();
+}

package/dist/esm/icons/managed-systems.js

@@ -0,0 +1,12 @@
+import { managedSystems16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ * The icon component for the 'managed-systems' icon
+ */
+export class ManagedSystemsIcon extends Icon {
+    constructor() {
+        super(managedSystems16X16);
+    }
+}
+registerIcon('managed-systems-icon', ManagedSystemsIcon);
+//# sourceMappingURL=managed-systems.js.map

package/dist/esm/icons/managed-systems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"managed-systems.js","sourceRoot":"","sources":["../../../src/icons/managed-systems.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,kBAAmB,SAAQ,IAAI;IACxC;QACI,KAAK,CAAC,mBAAmB,CAAC,CAAC;IAC/B,CAAC;CACJ;AAED,YAAY,CAAC,sBAAsB,EAAE,kBAAkB,CAAC,CAAC"}

package/dist/esm/icons/measurement-data-analysis.d.ts

@@ -0,0 +1,7 @@
+import { Icon } from '../icon-base';
+/**
+ * The icon component for the 'measurement-data-analysis' icon
+ */
+export declare class MeasurementDataAnalysisIcon extends Icon {
+    constructor();
+}

package/dist/esm/icons/measurement-data-analysis.js

@@ -0,0 +1,12 @@
+import { measurementDataAnalysis16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ * The icon component for the 'measurement-data-analysis' icon
+ */
+export class MeasurementDataAnalysisIcon extends Icon {
+    constructor() {
+        super(measurementDataAnalysis16X16);
+    }
+}
+registerIcon('measurement-data-analysis-icon', MeasurementDataAnalysisIcon);
+//# sourceMappingURL=measurement-data-analysis.js.map

package/dist/esm/icons/measurement-data-analysis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"measurement-data-analysis.js","sourceRoot":"","sources":["../../../src/icons/measurement-data-analysis.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,sDAAsD,CAAC;AACpG,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,2BAA4B,SAAQ,IAAI;IACjD;QACI,KAAK,CAAC,4BAA4B,CAAC,CAAC;IACxC,CAAC;CACJ;AAED,YAAY,CAAC,gCAAgC,EAAE,2BAA2B,CAAC,CAAC"}

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

@@ -0,0 +1,7 @@
+import { Icon } from '../icon-base';
+/**
+ * The icon component for the 'settings' icon
+ */
+export declare class SettingsIcon extends Icon {
+    constructor();
+}

package/dist/esm/icons/settings.js

@@ -0,0 +1,12 @@
+import { settings16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ * The icon component for the 'settings' icon
+ */
+export class SettingsIcon extends Icon {
+    constructor() {
+        super(settings16X16);
+    }
+}
+registerIcon('settings-icon', SettingsIcon);
+//# sourceMappingURL=settings.js.map

package/dist/esm/icons/settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.js","sourceRoot":"","sources":["../../../src/icons/settings.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sDAAsD,CAAC;AACrF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,IAAI;IAClC;QACI,KAAK,CAAC,aAAa,CAAC,CAAC;IACzB,CAAC;CACJ;AAED,YAAY,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC"}

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

@@ -0,0 +1,7 @@
+import { Icon } from '../icon-base';
+/**
+ *  The icon component for the 'succeeded' icon
+ */
+export declare class SucceededIcon extends Icon {
+    constructor();
+}

package/dist/esm/icons/succeeded.js

@@ -0,0 +1,12 @@
+import { statusSucceeded16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ *  The icon component for the 'succeeded' icon
+ */
+export class SucceededIcon extends Icon {
+    constructor() {
+        super(statusSucceeded16X16);
+    }
+}
+registerIcon('succeeded-icon', SucceededIcon);
+//# sourceMappingURL=succeeded.js.map

package/dist/esm/icons/succeeded.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"succeeded.js","sourceRoot":"","sources":["../../../src/icons/succeeded.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAC5F,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,IAAI;IACnC;QACI,KAAK,CAAC,oBAAoB,CAAC,CAAC;IAChC,CAAC;CACJ;AAED,YAAY,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC"}

package/dist/esm/icons/test-insights.d.ts

@@ -0,0 +1,7 @@
+import { Icon } from '../icon-base';
+/**
+ * The icon component for the 'test-insights' icon
+ */
+export declare class TestInsightsIcon extends Icon {
+    constructor();
+}

package/dist/esm/icons/test-insights.js

@@ -0,0 +1,12 @@
+import { testInsights16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ * The icon component for the 'test-insights' icon
+ */
+export class TestInsightsIcon extends Icon {
+    constructor() {
+        super(testInsights16X16);
+    }
+}
+registerIcon('test-insights-icon', TestInsightsIcon);
+//# sourceMappingURL=test-insights.js.map

package/dist/esm/icons/test-insights.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-insights.js","sourceRoot":"","sources":["../../../src/icons/test-insights.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sDAAsD,CAAC;AACzF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,IAAI;IACtC;QACI,KAAK,CAAC,iBAAiB,CAAC,CAAC;IAC7B,CAAC;CACJ;AAED,YAAY,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAC"}

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

@@ -0,0 +1,7 @@
+import { Icon } from '../icon-base';
+/**
+ * The icon component for the 'utilities' icon
+ */
+export declare class UtilitiesIcon extends Icon {
+    constructor();
+}

package/dist/esm/icons/utilities.js

@@ -0,0 +1,12 @@
+import { boxUtilities16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { Icon, registerIcon } from '../icon-base';
+/**
+ * The icon component for the 'utilities' icon
+ */
+export class UtilitiesIcon extends Icon {
+    constructor() {
+        super(boxUtilities16X16);
+    }
+}
+registerIcon('utilities-icon', UtilitiesIcon);
+//# sourceMappingURL=utilities.js.map

package/dist/esm/icons/utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.js","sourceRoot":"","sources":["../../../src/icons/utilities.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sDAAsD,CAAC;AACzF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAElD;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,IAAI;IACnC;QACI,KAAK,CAAC,iBAAiB,CAAC,CAAC;IAC7B,CAAC;CACJ;AAED,YAAY,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC"}

package/dist/esm/listbox-option/index.d.ts

@@ -0,0 +1,10 @@
+import { ListboxOption as FoundationListboxOption } from '@microsoft/fast-foundation';
+export type { ListboxOption };
+/**
+ * A nimble-styled HTML listbox option
+ */
+declare class ListboxOption extends FoundationListboxOption {
+    get value(): string;
+    set value(value: string);
+    connectedCallback(): void;
+}

package/dist/esm/listbox-option/index.js

@@ -0,0 +1,29 @@
+import { DesignSystem, ListboxOption as FoundationListboxOption, listboxOptionTemplate as template } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+/**
+ * A nimble-styled HTML listbox option
+ */
+class ListboxOption extends FoundationListboxOption {
+    // Workaround for https://github.com/microsoft/fast/issues/5219
+    get value() {
+        return super.value;
+    }
+    set value(value) {
+        // Coerce value to string
+        super.value = `${value}`;
+        if (this.$fastController.isConnected) {
+            this.setAttribute('value', this.value);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('value', this.value);
+    }
+}
+const nimbleListboxOption = ListboxOption.compose({
+    baseName: 'listbox-option',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListboxOption());
+//# sourceMappingURL=index.js.map

package/dist/esm/listbox-option/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/listbox-option/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,aAAa,IAAI,uBAAuB,EACxC,qBAAqB,IAAI,QAAQ,EACpC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC;;GAEG;AACH,MAAM,aAAc,SAAQ,uBAAuB;IAC/C,+DAA+D;IAC/D,IAAW,KAAK;QACZ,OAAO,KAAK,CAAC,KAAK,CAAC;IACvB,CAAC;IAED,IAAW,KAAK,CAAC,KAAa;QAC1B,yBAAyB;QACzB,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,EAAE,CAAC;QAEzB,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YAClC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;SAC1C;IACL,CAAC;IAEe,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC;CACJ;AAED,MAAM,mBAAmB,GAAG,aAAa,CAAC,OAAO,CAAC;IAC9C,QAAQ,EAAE,gBAAgB;IAC1B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,mBAAmB,EAAE,CAAC,CAAC"}

package/dist/esm/listbox-option/styles.d.ts

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

package/dist/esm/listbox-option/styles.js

@@ -0,0 +1,60 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { focusVisible } from '../utilities/style/focus';
+import { borderColorHover, contentFontSize, fontFamily, contentFontColorDisabled, fillColorSelected, fillColorSelectedHover, fillColorHover } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('flex')}
+
+    :host {
+        font-family: ${fontFamily};
+        font-size: ${contentFontSize};
+        cursor: pointer;
+        justify-content: left;
+    }
+
+    .content {
+        padding: 8px 4px;
+    }
+
+    :host(.selected) {
+        box-shadow: none;
+        outline: none;
+        background-color: ${fillColorSelected};
+    }
+
+    :host(:hover.selected) {
+        background-color: ${fillColorSelectedHover};
+    }
+
+    :host(:hover) {
+        background-color: ${fillColorHover};
+    }
+
+    :host(:hover):host([disabled]) {
+        box-shadow: none;
+        background-color: transparent;
+    }
+
+    :host(:${focusVisible}) {
+        box-shadow: 0px 0px 0px 1px ${borderColorHover} inset;
+        outline: 1px solid ${borderColorHover};
+        outline-offset: -4px;
+    }
+
+    :host(:active) {
+        box-shadow: none;
+        outline: none;
+        background-color: ${fillColorSelected};
+    }
+
+    :host([disabled]) {
+        color: ${contentFontColorDisabled};
+        cursor: default;
+    }
+
+    .content[disabled] {
+        box-shadow: none;
+        outline: none;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/listbox-option/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/listbox-option/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,gBAAgB,EAChB,eAAe,EACf,UAAU,EACV,wBAAwB,EACxB,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,EACjB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;uBAGE,UAAU;qBACZ,eAAe;;;;;;;;;;;;4BAYR,iBAAiB;;;;4BAIjB,sBAAsB;;;;4BAItB,cAAc;;;;;;;;aAQ7B,YAAY;sCACa,gBAAgB;6BACzB,gBAAgB;;;;;;;4BAOjB,iBAAiB;;;;iBAI5B,wBAAwB;;;;;;;;CAQxC,CAAC"}

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

@@ -0,0 +1,5 @@
+import { Menu as FoundationMenu } from '@microsoft/fast-foundation';
+/**
+ * A nimble-styled menu
+ */
+export { FoundationMenu as Menu };

package/dist/esm/menu/index.js

@@ -0,0 +1,22 @@
+import { DesignSystem, Menu as FoundationMenu, menuTemplate as template } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+/**
+ * A nimble-styled menu
+ */
+export { FoundationMenu as Menu };
+/**
+ * A function that returns a nimble-menu registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#menuTemplate}
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: \<nimble-menu\>
+ *
+ */
+const nimbleMenu = FoundationMenu.compose({
+    baseName: 'menu',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,IAAI,IAAI,cAAc,EACtB,YAAY,IAAI,QAAQ,EAC3B,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC;;GAEG;AACH,OAAO,EAAE,cAAc,IAAI,IAAI,EAAE,CAAC;AAElC;;;;;;;;GAQG;AACH,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,MAAM;IAChB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC"}

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

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

package/dist/esm/menu/styles.js

@@ -0,0 +1,40 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { applicationBackgroundColor, borderWidth, borderColor, groupLabelTextTransform, groupLabelFontColor, groupLabelFontFamily, groupLabelFontSize, groupLabelFontWeight, popupBorderColor, popupBoxShadowColor, labelHeight } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('grid')}
+
+    :host {
+        background: ${applicationBackgroundColor};
+        border: ${borderWidth} solid ${popupBorderColor};
+        margin: 0;
+        padding: 4px;
+        min-width: 168px;
+        width: max-content;
+        box-shadow: 0px 2px 3px ${popupBoxShadowColor};
+    }
+    ::slotted(*) {
+        padding-left: 8px;
+        padding-right: 8px;
+    }
+    ::slotted(hr) {
+        box-sizing: content-box;
+        height: 2px;
+        margin: 4px;
+        border: none;
+        background: ${borderColor};
+        opacity: 0.1;
+    }
+    ::slotted(header) {
+        display: flex;
+        font-family: ${groupLabelFontFamily};
+        font-size: ${groupLabelFontSize};
+        font-weight: ${groupLabelFontWeight};
+        line-height: ${labelHeight};
+        color: ${groupLabelFontColor};
+        text-transform: ${groupLabelTextTransform};
+        padding-top: 4px;
+        padding-bottom: 4px;
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,WAAW,EACX,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,EACnB,WAAW,EACd,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;sBAGC,0BAA0B;kBAC9B,WAAW,UAAU,gBAAgB;;;;;kCAKrB,mBAAmB;;;;;;;;;;;sBAW/B,WAAW;;;;;uBAKV,oBAAoB;qBACtB,kBAAkB;uBAChB,oBAAoB;uBACpB,WAAW;iBACjB,mBAAmB;0BACV,uBAAuB;;;;CAIhD,CAAC"}

package/dist/esm/menu-item/index.d.ts

@@ -0,0 +1,15 @@
+import { MenuItem as FoundationMenuItem, MenuItemOptions } from '@microsoft/fast-foundation';
+/**
+ * A nimble-styled menu-item
+ */
+export { FoundationMenuItem as MenuItem };
+/**
+ * A function that returns a nimble-menu-item registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#menuItemTemplate}
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: \<nimble-menu-item\>
+ *
+ */
+export declare const nimbleMenuItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<MenuItemOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<MenuItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

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

@@ -0,0 +1,22 @@
+import { DesignSystem, MenuItem as FoundationMenuItem, menuItemTemplate as template } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+/**
+ * A nimble-styled menu-item
+ */
+export { FoundationMenuItem as MenuItem };
+/**
+ * A function that returns a nimble-menu-item registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#menuItemTemplate}
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: \<nimble-menu-item\>
+ *
+ */
+export const nimbleMenuItem = FoundationMenuItem.compose({
+    baseName: 'menu-item',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAC9B,gBAAgB,IAAI,QAAQ,EAE/B,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC;;GAEG;AACH,OAAO,EAAE,kBAAkB,IAAI,QAAQ,EAAE,CAAC;AAE1C;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,kBAAkB,CAAC,OAAO,CAAkB;IACtE,QAAQ,EAAE,WAAW;IACrB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC"}

package/dist/esm/menu-item/styles.d.ts

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

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,6 @@
-export {};
+import { NumberField as FoundationNumberField } from '@microsoft/fast-foundation';
+/**
+ * A nimble-styled HTML number input
+ */
+declare type NumberField = FoundationNumberField;
+export type { NumberField };

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

@@ -1,6 +1,6 @@
-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 function that returns a number-field registration for configuring the component with a DesignSystem.
  *
@@ -9,19 +9,15 @@ import { nimbleIconNames } from '../shared/icon-font';
  * Generates HTML Element: \<nimble-number-field\>
  *
  */
-const nimbleNumberField = NumberField.compose({
+const nimbleNumberField = FoundationNumberField.compose({
     baseName: 'number-field',
     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;AASlC;;;;;;;GAOG;AACH,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,OAAO,CAAqB;IACxE,QAAQ,EAAE,cAAc;IACxB,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"}