@ni/nimble-components 1.0.0-beta.92 → 1.0.0

package/dist/esm/select/index.js

@@ -15,10 +15,12 @@ class Select extends FoundationSelect {
         // 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 matchingOption = this.querySelector(`nimble-listbox-option[value="${value}"]`);
-            if (matchingOption !== null) {
-                matchingOption.setAttribute('selected', '');
-            }
+            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
@@ -36,8 +38,10 @@ class Select extends FoundationSelect {
         this.setPositioning();
     }
 }
-export const nimbleSelect = Select.compose({
+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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,8BAA8B,EAAE,MAAM,sDAAsD,CAAC;AACtG,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC;;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,cAAc,GAAG,IAAI,CAAC,aAAa,CACrC,gCAAgC,KAAK,IAAI,CAC5C,CAAC;YACF,IAAI,cAAc,KAAK,IAAI,EAAE;gBACzB,cAAc,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;aAC/C;SACJ;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,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IACtD,QAAQ,EAAE,QAAQ;IAClB,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"}
+{"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/tab/index.d.ts

@@ -1,2 +1,12 @@
-import { Tab } from '@microsoft/fast-foundation';
+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

@@ -1,7 +1,14 @@
-import { DesignSystem, Tab, tabTemplate as template } from '@microsoft/fast-foundation';
+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
 });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,GAAG,EACH,WAAW,IAAI,QAAQ,EAC1B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC;IAC1B,QAAQ,EAAE,KAAK;IACf,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC"}
+{"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-panel/index.d.ts

@@ -1,2 +1,12 @@
-import { TabPanel } from '@microsoft/fast-foundation';
+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

@@ -1,7 +1,14 @@
-import { DesignSystem, TabPanel, tabPanelTemplate as template } from '@microsoft/fast-foundation';
+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
 });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tab-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,QAAQ,EACR,gBAAgB,IAAI,QAAQ,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,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"}
+{"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/tabs/index.d.ts

@@ -1,2 +1,12 @@
-import { Tabs } from '@microsoft/fast-foundation';
+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

@@ -1,7 +1,14 @@
-import { DesignSystem, Tabs, tabsTemplate as template } from '@microsoft/fast-foundation';
+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
 });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,IAAI,EAEJ,YAAY,IAAI,QAAQ,EAC3B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAc;IACzC,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"}
+{"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-toolbar/index.d.ts

@@ -1,6 +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.
  */
-export declare class TabsToolbar extends FoundationElement {
+declare class TabsToolbar extends FoundationElement {
 }

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

@@ -4,7 +4,7 @@ import { template } from './template';
 /**
  * A nimble-styled container for toolbar content next to tabs.
  */
-export class TabsToolbar extends FoundationElement {
+class TabsToolbar extends FoundationElement {
 }
 const nimbleTabsToolbar = TabsToolbar.compose({
     baseName: 'tabs-toolbar',

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

@@ -1 +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;AAEtC;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB;CAAG;AAErD,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"}
+{"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.js

@@ -1,6 +1,6 @@
 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';
+import { borderColorRgbPartial, borderWidth, contentFontColor, contentFontSize, controlHeight, fontFamily, standardPadding } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('flex')}
 
@@ -16,7 +16,8 @@ export const styles = css `
     .separator {
         display: inline-block;
         height: 24px;
-        border-left: calc(${borderWidth} * 2) solid rgba(${borderColorRgb}, 0.3);
+        border-left: calc(${borderWidth} * 2) solid
+            rgba(${borderColorRgbPartial}, 0.3);
         margin: calc(${standardPadding} / 4) calc(${standardPadding} / 2);
     }
 `;

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

@@ -1 +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"}
+{"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,qBAAqB,EACrB,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;mBACpB,qBAAqB;uBACjB,eAAe,cAAc,eAAe;;CAElE,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,6 +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 type TextField = FoundationTextField;
-export type { TextField };
+declare class TextField extends FoundationTextField {
+}

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

@@ -1,8 +1,15 @@
 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: {

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,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;AASlC,MAAM,eAAe,GAAG,mBAAmB,CAAC,OAAO,CAAmB;IAClE,QAAQ,EAAE,YAAY;IACtB,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"}
+{"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,6 +1,8 @@
 import { css } from '@microsoft/fast-element';
 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';
+import { borderColorRgbPartial, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, failColor, fillColorSelectedRgbPartial, fontFamily, iconSize, labelFontColor, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, smallDelay } from '../theme-provider/design-tokens';
+import { Theme } from '../theme-provider/types';
+import { themeBehavior } from '../utilities/style/theme';
 export const styles = css `
     ${display('inline-block')}
 
@@ -24,7 +26,7 @@ export const styles = css `
         flex-direction: row;
         border-radius: 0px;
         font-family: ${fontFamily};
-        border-bottom: ${borderWidth} solid rgba(${borderColorRgb}, 0.3);
+        border-bottom: ${borderWidth} solid rgba(${borderColorRgbPartial}, 0.3);
         padding-bottom: 1px;
         transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
         align-items: flex-end;
@@ -73,10 +75,6 @@ export const styles = css `
         border: none;
     }
 
-    .control::-ms-reveal {
-        filter: ${passwordRevealFilter};
-    }
-
     .control:hover,
     .control:focus,
     .control:disabled,
@@ -86,7 +84,7 @@ export const styles = css `
 
     .control::selection {
         color: ${labelFontColor};
-        background: rgba(${fillColorSelectedRgb}, 0.3);
+        background: rgba(${fillColorSelectedRgbPartial}, 0.3);
     }
 
     .control::placeholder {
@@ -138,5 +136,19 @@ export const styles = css `
     :host([disabled]) [part='end'] path {
         fill: ${contentFontColorDisabled};
     }
-`;
+`.withBehaviors(themeBehavior(css `
+            ${'' /* Light theme */}
+            .control::-ms-reveal {
+                filter: invert(0%);
+            }
+        `, css `
+            ${'' /* Dark theme */}
+            .control::-ms-reveal {
+                filter: invert(100%);
+            }
+        `, 
+// Color theme
+Theme.Dark, 
+// LegacyBlue theme
+Theme.Light));
 //# 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;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"}
+{"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,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,UAAU,EACV,QAAQ,EACR,cAAc,EACd,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,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,qBAAqB;;oCAEpC,UAAU,oBAAoB,UAAU;;;;;;;;;;;mCAWzC,gBAAgB;;;;;yBAK1B,WAAW,UAAU,SAAS;;;;mCAIpB,SAAS;;;;;;yBAMnB,WAAW,UAAU,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6BrD,cAAc;2BACJ,2BAA2B;;;;iBAIrC,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,aAAa,CACP,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;;;SAIzB,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;;;SAIxB;AACG,cAAc;AACd,KAAK,CAAC,IAAI;AACV,mBAAmB;AACnB,KAAK,CAAC,KAAK,CACd,CACJ,CAAC"}

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

@@ -0,0 +1,3 @@
+import { TextFieldType } from '@microsoft/fast-foundation';
+export { TextFieldType };
+export declare type TextFieldTypeAttribute = `${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;AAE3D,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/esm/theme-provider/design-token-comments.d.ts

@@ -0,0 +1,6 @@
+import type * as TokensNamespace from './design-tokens';
+declare type TokenName = keyof typeof TokensNamespace;
+export declare const comments: {
+    readonly [key in TokenName]: string;
+};
+export {};

package/dist/esm/theme-provider/design-token-comments.js

@@ -0,0 +1,45 @@
+export const comments = {
+    actionColorRgbPartial: '',
+    applicationBackgroundColor: 'Background color for the application.',
+    fillColorSelected: '',
+    fillColorSelectedRgbPartial: '',
+    fillColorSelectedHover: '',
+    fillColorHover: '',
+    borderColor: '',
+    borderColorRgbPartial: '',
+    failColor: '',
+    warningColor: '',
+    passColor: '',
+    borderColorHover: '',
+    iconColor: '',
+    popupBoxShadowColor: '',
+    popupBorderColor: '',
+    controlHeight: '',
+    standardPadding: '',
+    labelHeight: '',
+    borderWidth: '',
+    iconSize: '',
+    drawerWidth: '',
+    fontFamily: '',
+    labelFontFamily: '',
+    groupLabelFontFamily: '',
+    drawerHeaderFontFamily: '',
+    labelFontSize: '',
+    contentFontSize: '',
+    groupLabelFontSize: '',
+    drawerHeaderFontSize: '',
+    groupLabelFontWeight: '',
+    labelFontWeight: '',
+    labelFontColor: '',
+    groupLabelFontColor: '',
+    contentFontColor: '',
+    buttonContentFontColor: '',
+    labelFontColorDisabled: '',
+    labelTextTransform: '',
+    groupLabelTextTransform: '',
+    contentFontColorDisabled: '',
+    smallDelay: '',
+    mediumDelay: '',
+    drawerAnimationDurationMs: ''
+};
+//# sourceMappingURL=design-token-comments.js.map

package/dist/esm/theme-provider/design-token-comments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-token-comments.js","sourceRoot":"","sources":["../../../src/theme-provider/design-token-comments.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,QAAQ,GAA4C;IAC7D,qBAAqB,EAAE,EAAE;IACzB,0BAA0B,EAAE,uCAAuC;IACnE,iBAAiB,EAAE,EAAE;IACrB,2BAA2B,EAAE,EAAE;IAC/B,sBAAsB,EAAE,EAAE;IAC1B,cAAc,EAAE,EAAE;IAClB,WAAW,EAAE,EAAE;IACf,qBAAqB,EAAE,EAAE;IACzB,SAAS,EAAE,EAAE;IACb,YAAY,EAAE,EAAE;IAChB,SAAS,EAAE,EAAE;IACb,gBAAgB,EAAE,EAAE;IACpB,SAAS,EAAE,EAAE;IACb,mBAAmB,EAAE,EAAE;IACvB,gBAAgB,EAAE,EAAE;IACpB,aAAa,EAAE,EAAE;IACjB,eAAe,EAAE,EAAE;IACnB,WAAW,EAAE,EAAE;IACf,WAAW,EAAE,EAAE;IACf,QAAQ,EAAE,EAAE;IACZ,WAAW,EAAE,EAAE;IACf,UAAU,EAAE,EAAE;IACd,eAAe,EAAE,EAAE;IACnB,oBAAoB,EAAE,EAAE;IACxB,sBAAsB,EAAE,EAAE;IAC1B,aAAa,EAAE,EAAE;IACjB,eAAe,EAAE,EAAE;IACnB,kBAAkB,EAAE,EAAE;IACtB,oBAAoB,EAAE,EAAE;IACxB,oBAAoB,EAAE,EAAE;IACxB,eAAe,EAAE,EAAE;IACnB,cAAc,EAAE,EAAE;IAClB,mBAAmB,EAAE,EAAE;IACvB,gBAAgB,EAAE,EAAE;IACpB,sBAAsB,EAAE,EAAE;IAC1B,sBAAsB,EAAE,EAAE;IAC1B,kBAAkB,EAAE,EAAE;IACtB,uBAAuB,EAAE,EAAE;IAC3B,wBAAwB,EAAE,EAAE;IAC5B,UAAU,EAAE,EAAE;IACd,WAAW,EAAE,EAAE;IACf,yBAAyB,EAAE,EAAE;CAChC,CAAC"}

package/dist/esm/theme-provider/design-token-names.d.ts

@@ -0,0 +1,11 @@
+import type * as TokensNamespace from './design-tokens';
+declare type TokenName = keyof typeof TokensNamespace;
+export declare const tokenNames: {
+    readonly [key in TokenName]: string;
+};
+export declare const styleNameFromTokenName: (tokenName: string) => string;
+export declare const cssPropertyFromTokenName: (tokenName: string) => string;
+export declare const scssPropertyFromTokenName: (tokenName: string) => string;
+export declare const scssInternalPropertyFromTokenName: (tokenName: string) => string;
+export declare const scssInternalPropertySetterMarkdown: (tokenName: string, property: string) => string;
+export {};

package/dist/esm/theme-provider/design-token-names.js

@@ -0,0 +1,51 @@
+export const tokenNames = {
+    actionColorRgbPartial: 'action-color-rgb-partial',
+    applicationBackgroundColor: 'application-background-color',
+    fillColorSelected: 'fill-color-selected',
+    fillColorSelectedRgbPartial: 'fill-color-selected-rgb-partial',
+    fillColorSelectedHover: 'fill-color-selected-hover',
+    fillColorHover: 'fill-color-hover',
+    borderColor: 'border-color',
+    borderColorRgbPartial: 'border-color-rgb-partial',
+    failColor: 'fail-color',
+    warningColor: 'warning-color',
+    passColor: 'pass-color',
+    borderColorHover: 'border-color-hover',
+    iconColor: 'icon-color',
+    popupBoxShadowColor: 'popup-box-shadow-color',
+    popupBorderColor: 'popup-border-color',
+    controlHeight: 'control-height',
+    standardPadding: 'standard-padding',
+    labelHeight: 'label-height',
+    borderWidth: 'border-width',
+    iconSize: 'icon-size',
+    drawerWidth: 'drawer-width',
+    fontFamily: 'font-family',
+    labelFontFamily: 'label-font-family',
+    groupLabelFontFamily: 'group-label-font-family',
+    drawerHeaderFontFamily: 'drawer-header-font-family',
+    labelFontSize: 'label-font-size',
+    contentFontSize: 'content-font-size',
+    groupLabelFontSize: 'group-label-font-size',
+    drawerHeaderFontSize: 'drawer-header-font-size',
+    groupLabelFontWeight: 'group-label-font-weight',
+    labelFontWeight: 'label-font-weight',
+    labelFontColor: 'label-font-color',
+    groupLabelFontColor: 'group-label-font-color',
+    contentFontColor: 'content-font-color',
+    buttonContentFontColor: 'button-content-font-color',
+    labelFontColorDisabled: 'label-font-color-disabled',
+    labelTextTransform: 'label-text-transform',
+    groupLabelTextTransform: 'group-label-text-transform',
+    contentFontColorDisabled: 'content-font-color-disabled',
+    smallDelay: 'small-delay',
+    mediumDelay: 'medium-delay',
+    drawerAnimationDurationMs: 'drawer-animation-duration-ms'
+};
+const prefix = 'ni-nimble';
+export const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
+export const cssPropertyFromTokenName = (tokenName) => `--${prefix}-${tokenName}`;
+export const scssPropertyFromTokenName = (tokenName) => `$${prefix}-${tokenName}`;
+export const scssInternalPropertyFromTokenName = (tokenName) => `$${prefix}-internal-${tokenName}`;
+export const scssInternalPropertySetterMarkdown = (tokenName, property) => `\`#{$${prefix}-internal-${tokenName}}: ${property};\``;
+//# sourceMappingURL=design-token-names.js.map

package/dist/esm/theme-provider/design-token-names.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-token-names.js","sourceRoot":"","sources":["../../../src/theme-provider/design-token-names.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,UAAU,GAA4C;IAC/D,qBAAqB,EAAE,0BAA0B;IACjD,0BAA0B,EAAE,8BAA8B;IAC1D,iBAAiB,EAAE,qBAAqB;IACxC,2BAA2B,EAAE,iCAAiC;IAC9D,sBAAsB,EAAE,2BAA2B;IACnD,cAAc,EAAE,kBAAkB;IAClC,WAAW,EAAE,cAAc;IAC3B,qBAAqB,EAAE,0BAA0B;IACjD,SAAS,EAAE,YAAY;IACvB,YAAY,EAAE,eAAe;IAC7B,SAAS,EAAE,YAAY;IACvB,gBAAgB,EAAE,oBAAoB;IACtC,SAAS,EAAE,YAAY;IACvB,mBAAmB,EAAE,wBAAwB;IAC7C,gBAAgB,EAAE,oBAAoB;IACtC,aAAa,EAAE,gBAAgB;IAC/B,eAAe,EAAE,kBAAkB;IACnC,WAAW,EAAE,cAAc;IAC3B,WAAW,EAAE,cAAc;IAC3B,QAAQ,EAAE,WAAW;IACrB,WAAW,EAAE,cAAc;IAC3B,UAAU,EAAE,aAAa;IACzB,eAAe,EAAE,mBAAmB;IACpC,oBAAoB,EAAE,yBAAyB;IAC/C,sBAAsB,EAAE,2BAA2B;IACnD,aAAa,EAAE,iBAAiB;IAChC,eAAe,EAAE,mBAAmB;IACpC,kBAAkB,EAAE,uBAAuB;IAC3C,oBAAoB,EAAE,yBAAyB;IAC/C,oBAAoB,EAAE,yBAAyB;IAC/C,eAAe,EAAE,mBAAmB;IACpC,cAAc,EAAE,kBAAkB;IAClC,mBAAmB,EAAE,wBAAwB;IAC7C,gBAAgB,EAAE,oBAAoB;IACtC,sBAAsB,EAAE,2BAA2B;IACnD,sBAAsB,EAAE,2BAA2B;IACnD,kBAAkB,EAAE,sBAAsB;IAC1C,uBAAuB,EAAE,4BAA4B;IACrD,wBAAwB,EAAE,6BAA6B;IACvD,UAAU,EAAE,aAAa;IACzB,WAAW,EAAE,cAAc;IAC3B,yBAAyB,EAAE,8BAA8B;CAC5D,CAAC;AAEF,MAAM,MAAM,GAAG,WAAW,CAAC;AAE3B,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,SAAiB,EAAU,EAAE,CAAC,GAAG,MAAM,IAAI,SAAS,EAAE,CAAC;AAC9F,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,SAAiB,EAAU,EAAE,CAAC,KAAK,MAAM,IAAI,SAAS,EAAE,CAAC;AAClG,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,SAAiB,EAAU,EAAE,CAAC,IAAI,MAAM,IAAI,SAAS,EAAE,CAAC;AAClG,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,SAAiB,EAAU,EAAE,CAAC,IAAI,MAAM,aAAa,SAAS,EAAE,CAAC;AACnH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAC9C,SAAiB,EACjB,QAAgB,EACV,EAAE,CAAC,QAAQ,MAAM,aAAa,SAAS,MAAM,QAAQ,KAAK,CAAC"}

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

@@ -1,21 +1,16 @@
-import { DesignToken } from '@microsoft/fast-foundation';
-import { NimbleTheme } from './themes';
-export declare const theme: DesignToken<NimbleTheme>;
-export declare const actionColorRgb: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const actionColorRgbPartial: 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 fillColorSelectedRgbPartial: 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 borderColorRgbPartial: import("@microsoft/fast-foundation").CSSDesignToken<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 iconColor: 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>;
@@ -45,4 +40,3 @@ export declare const contentFontColorDisabled: import("@microsoft/fast-foundatio
 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>;