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

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

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

package/dist/esm/tab-panel/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tab-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAC9B,gBAAgB,IAAI,QAAQ,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,QAAS,SAAQ,kBAAkB;CAAG;AAE5C,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,kBAAkB;IAC7B,0GAA0G;IAC1G,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/tab-panel/styles.d.ts

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

package/dist/esm/tab-panel/styles.js

@@ -0,0 +1,15 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { contentFontColor, contentFontSize, fontFamily, standardPadding } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('block')}
+
+    :host {
+        box-sizing: border-box;
+        font-family: ${fontFamily};
+        font-size: ${contentFontSize};
+        color: ${contentFontColor};
+        padding-top: ${standardPadding};
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tab-panel/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,eAAe,EACf,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;uBAIC,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;uBACV,eAAe;;CAErC,CAAC"}

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

@@ -0,0 +1,12 @@
+import { Tabs as FoundationTabs } from '@microsoft/fast-foundation';
+export type { Tabs };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tabs': Tabs;
+    }
+}
+/**
+ * A nimble-styled tabs control
+ */
+declare class Tabs extends FoundationTabs {
+}

package/dist/esm/tabs/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,IAAI,IAAI,cAAc,EAEtB,YAAY,IAAI,QAAQ,EAC3B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,IAAK,SAAQ,cAAc;CAAG;AAEpC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAc;IACzC,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,cAAc;IACzB,0GAA0G;IAC1G,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/tabs/styles.d.ts

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

package/dist/esm/tabs/styles.js

@@ -0,0 +1,43 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { borderColorHover, borderWidth, smallDelay } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('grid')}
+
+    :host {
+        box-sizing: border-box;
+        grid-template-columns: auto auto 1fr;
+        grid-template-rows: auto 1fr;
+    }
+
+    .tablist {
+        display: grid;
+        grid-template-rows: auto auto;
+        grid-template-columns: auto;
+        width: max-content;
+        align-self: end;
+    }
+
+    .activeIndicator {
+        grid-row: 2;
+        height: calc(${borderWidth} * 2);
+        background-color: ${borderColorHover};
+    }
+
+    .activeIndicatorTransition {
+        transition: transform ${smallDelay} ease-in-out;
+    }
+
+    @media (prefers-reduced-motion) {
+        .activeIndicatorTransition {
+            transition: transform 0.01s;
+        }
+    }
+
+    .tabpanel {
+        grid-row: 2;
+        grid-column-start: 1;
+        grid-column-end: 4;
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs/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,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;uBAkBE,WAAW;4BACN,gBAAgB;;;;gCAIZ,UAAU;;;;;;;;;;;;;;CAczC,CAAC"}

package/dist/esm/tabs-toolbar/index.d.ts

@@ -0,0 +1,12 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export type { TabsToolbar };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tabs-toolbar': TabsToolbar;
+    }
+}
+/**
+ * A nimble-styled container for toolbar content next to tabs.
+ */
+declare class TabsToolbar extends FoundationElement {
+}

package/dist/esm/tabs-toolbar/index.js

@@ -0,0 +1,15 @@
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A nimble-styled container for toolbar content next to tabs.
+ */
+class TabsToolbar extends FoundationElement {
+}
+const nimbleTabsToolbar = TabsToolbar.compose({
+    baseName: 'tabs-toolbar',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
+//# sourceMappingURL=index.js.map

package/dist/esm/tabs-toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAUtC;;GAEG;AACH,MAAM,WAAY,SAAQ,iBAAiB;CAAG;AAE9C,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAC;IAC1C,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC"}

package/dist/esm/tabs-toolbar/styles.d.ts

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

package/dist/esm/tabs-toolbar/styles.js

@@ -0,0 +1,23 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { borderColorRgb, borderWidth, contentFontColor, contentFontSize, controlHeight, fontFamily, standardPadding } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('flex')}
+
+    :host {
+        align-items: center;
+        height: ${controlHeight};
+        box-sizing: border-box;
+        font-family: ${fontFamily};
+        font-size: ${contentFontSize};
+        color: ${contentFontColor};
+    }
+
+    .separator {
+        display: inline-block;
+        height: 24px;
+        border-left: calc(${borderWidth} * 2) solid rgba(${borderColorRgb}, 0.3);
+        margin: calc(${standardPadding} / 4) calc(${standardPadding} / 2);
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/tabs-toolbar/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;kBAIH,aAAa;;uBAER,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;;;;;;4BAML,WAAW,oBAAoB,cAAc;uBAClD,eAAe,cAAc,eAAe;;CAElE,CAAC"}

package/dist/esm/tabs-toolbar/template.d.ts

@@ -0,0 +1 @@
+export declare const template: import("@microsoft/fast-element").ViewTemplate<any, any>;

package/dist/esm/tabs-toolbar/template.js

@@ -0,0 +1,8 @@
+import { html } from '@microsoft/fast-element';
+export const template = html `
+    <template slot="end">
+        <div class="separator"></div>
+        <slot></slot>
+    </template>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/tabs-toolbar/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAA;;;;;CAK3B,CAAC"}

package/dist/esm/testing/async-helpers.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Allows test code to wait for components to complete pending asynchronous updates that resulted
+ * from DOM interactions like property or attribute changes.
+ */
+export declare const waitForUpdatesAsync: () => Promise<void>;
+/**
+ * Allows test code to force components to synchronously complete normally asynchronous pending
+ * updates that resulted from DOM interactions like property or attribute changes.
+ */
+export declare const processUpdates: () => void;

package/dist/esm/testing/async-helpers.js

@@ -0,0 +1,12 @@
+import { DOM } from '@microsoft/fast-element';
+/**
+ * Allows test code to wait for components to complete pending asynchronous updates that resulted
+ * from DOM interactions like property or attribute changes.
+ */
+export const waitForUpdatesAsync = async () => DOM.nextUpdate();
+/**
+ * Allows test code to force components to synchronously complete normally asynchronous pending
+ * updates that resulted from DOM interactions like property or attribute changes.
+ */
+export const processUpdates = () => DOM.processUpdates();
+//# sourceMappingURL=async-helpers.js.map

package/dist/esm/testing/async-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"async-helpers.js","sourceRoot":"","sources":["../../../src/testing/async-helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,IAAmB,EAAE,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC;AAE/E;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAS,EAAE,CAAC,GAAG,CAAC,cAAc,EAAE,CAAC"}

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

@@ -1 +1,12 @@
-export {};
+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/text-field/index.js

@@ -1,12 +1,21 @@
 import { DesignSystem, TextField as FoundationTextField, textFieldTemplate as template } from '@microsoft/fast-foundation';
+import { statusAlarmActive16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
 import { styles } from './styles';
-const nimbleTextField = FoundationTextField.compose({
+/**
+ * A nimble-styed HTML text input
+ */
+class TextField extends FoundationTextField {
+}
+const nimbleTextField = TextField.compose({
     baseName: 'text-field',
+    baseClass: FoundationTextField,
+    // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
     template,
     styles,
     shadowOptions: {
         delegatesFocus: true
-    }
+    },
+    end: statusAlarmActive16X16.data
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,IAAI,mBAAmB,EAAE,iBAAiB,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAC3H,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,eAAe,GAAG,mBAAmB,CAAC,OAAO,CAAC;IAChD,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEhC,iBAAiB,IAAI,QAAQ,EAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,sDAAsD,CAAC;AAC9F,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,SAAU,SAAQ,mBAAmB;CAAG;AAE9C,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAmB;IACxD,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,mBAAmB;IAC9B,0GAA0G;IAC1G,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,GAAG,EAAE,sBAAsB,CAAC,IAAI;CACnC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC"}

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

@@ -1,66 +1,142 @@
 import { css } from '@microsoft/fast-element';
-import { borderColor, borderColorHover, fillColorSelectedRgb, fontFamily, fontColor, labelFontFamily, labelFontSize } from '../theme-provider/design-tokens';
+import { display } from '@microsoft/fast-foundation';
+import { borderColorRgb, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, failColor, fillColorSelectedRgb, fontFamily, iconSize, labelFontColor, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, passwordRevealFilter, smallDelay } from '../theme-provider/design-tokens';
 export const styles = css `
-: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;
-}`;
+    ${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};
+    }
+
+    .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};
+        align-items: flex-end;
+    }
+
+    @media (prefers-reduced-motion) {
+        .root {
+            transition-duration: 0s;
+        }
+    }
+
+    .root:hover {
+        border-bottom: 2px solid ${borderColorHover};
+        padding-bottom: 0px;
+    }
+
+    :host(.invalid) .root {
+        border-bottom: ${borderWidth} solid ${failColor};
+    }
+
+    :host(.invalid) .root:hover {
+        border-bottom: 2px solid ${failColor};
+        padding-bottom: 0px;
+    }
+
+    :host([disabled]) .root,
+    :host([disabled]) .root:hover {
+        border-bottom: ${borderWidth} solid ${contentFontColorDisabled};
+        padding-bottom: 1px;
+    }
+
+    :host([readonly]) .root,
+    :host([readonly]) .root:hover {
+        border: none;
+    }
+
+    .control {
+        -webkit-appearance: none;
+        font: inherit;
+        background: transparent;
+        color: inherit;
+        height: 28px;
+        width: 100%;
+        margin-top: auto;
+        margin-bottom: auto;
+        border: none;
+    }
+
+    .control::-ms-reveal {
+        filter: ${passwordRevealFilter};
+    }
+
+    .control:hover,
+    .control:focus,
+    .control:disabled,
+    .control:active {
+        outline: none;
+    }
+
+    .control::selection {
+        color: ${labelFontColor};
+        background: rgba(${fillColorSelectedRgb}, 0.3);
+    }
+
+    .control::placeholder {
+        color: ${labelFontColor};
+    }
+
+    .control:not([readonly]):focus-within::placeholder {
+        opacity: 1;
+    }
+
+    .control[readonly] {
+        cursor: default;
+    }
+
+    .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};
+    }
+
+    :host [part='end'] {
+        display: none;
+    }
+
+    :host(.invalid) [part='end'] {
+        align-self: center;
+        display: inline-flex;
+        padding-left: 8px;
+        padding-right: 8px;
+    }
+
+    :host(.invalid) [part='end'] svg {
+        height: ${iconSize};
+        width: ${iconSize};
+    }
+
+    :host(.invalid) [part='end'] path {
+        fill: ${failColor};
+    }
+
+    :host([disabled]) [part='end'] path {
+        fill: ${contentFontColorDisabled};
+    }
+`;
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAE7J,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;mBAGN,UAAU;;;aAGhB,SAAS;;;;;;;;;mBASH,UAAU;+BACE,WAAW;;;;+BAIX,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;aAwBlC,SAAS;uBACC,oBAAoB;;;;aAI9B,SAAS;;;;;;;;;mBASH,eAAe;iBACjB,aAAa;;;EAG5B,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,cAAc,EACd,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,SAAS,EACT,oBAAoB,EACpB,UAAU,EACV,QAAQ,EACR,cAAc,EACd,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,oBAAoB,EACpB,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;;;;;;;;;uBASlB,UAAU;yBACR,WAAW,eAAe,cAAc;;oCAE7B,UAAU,oBAAoB,UAAU;;;;;;;;;;;mCAWzC,gBAAgB;;;;;yBAK1B,WAAW,UAAU,SAAS;;;;mCAIpB,SAAS;;;;;;yBAMnB,WAAW,UAAU,wBAAwB;;;;;;;;;;;;;;;;;;;;;;kBAsBpD,oBAAoB;;;;;;;;;;;iBAWrB,cAAc;2BACJ,oBAAoB;;;;iBAI9B,cAAc;;;;;;;;;;;;iBAYd,wBAAwB;;;;;iBAKxB,cAAc;uBACR,eAAe;qBACjB,aAAa;uBACX,eAAe;uBACf,WAAW;0BACR,kBAAkB;;;;;;;;;;;;;;;kBAe1B,QAAQ;iBACT,QAAQ;;;;gBAIT,SAAS;;;;gBAIT,wBAAwB;;CAEvC,CAAC"}

package/dist/esm/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/text-field/types.js

@@ -0,0 +1,3 @@
+import { TextFieldType } from '@microsoft/fast-foundation';
+export { TextFieldType };
+//# sourceMappingURL=types.js.map

package/dist/esm/text-field/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/text-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,OAAO,EAAE,aAAa,EAAE,CAAC"}

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

@@ -1,17 +1,48 @@
 import { DesignToken } from '@microsoft/fast-foundation';
-import { NimbleTheme } from './themes';
+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 fontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const fontColorDisabled: 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>;