@ni/nimble-components 1.0.0-beta.125 → 1.0.0-beta.129

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

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-status-icon': StatusIcon;
+    }
+}
+/**
+ *  The icon component for the 'status' icon
+ */
+export declare class StatusIcon extends Icon {
+    constructor();
+}

package/dist/esm/icons/status.js

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

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

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

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

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-terminated-icon': TerminatedIcon;
+    }
+}
+/**
+ *  The icon component for the 'terminated' icon
+ */
+export declare class TerminatedIcon extends Icon {
+    constructor();
+}

package/dist/esm/icons/terminated.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"terminated.js","sourceRoot":"","sources":["../../../src/icons/terminated.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sDAAsD,CAAC;AAC7F,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAQlD;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,IAAI;IACpC;QACI,KAAK,CAAC,qBAAqB,CAAC,CAAC;IACjC,CAAC;CACJ;AAED,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC"}

package/dist/esm/icons/timed-out.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-timed-out-icon': TimedOutIcon;
+    }
+}
+/**
+ *  The icon component for the 'timed-out' icon
+ */
+export declare class TimedOutIcon extends Icon {
+    constructor();
+}

package/dist/esm/icons/timed-out.js

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

package/dist/esm/icons/timed-out.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timed-out.js","sourceRoot":"","sources":["../../../src/icons/timed-out.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAQlD;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,IAAI;IAClC;QACI,KAAK,CAAC,mBAAmB,CAAC,CAAC;IAC/B,CAAC;CACJ;AAED,YAAY,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC"}

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

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-waiting-icon': WaitingIcon;
+    }
+}
+/**
+ *  The icon component for the 'waiting' icon
+ */
+export declare class WaitingIcon extends Icon {
+    constructor();
+}

package/dist/esm/icons/waiting.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"waiting.js","sourceRoot":"","sources":["../../../src/icons/waiting.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sDAAsD,CAAC;AAC1F,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAQlD;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,IAAI;IACjC;QACI,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAC9B,CAAC;CACJ;AAED,YAAY,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC"}

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

@@ -3,10 +3,10 @@
  * @public
  */
 import type { Button } from '@microsoft/fast-foundation';
-export declare type ButtonAppearanceAttribute = 'outline' | 'ghost' | 'block';
 export declare enum ButtonAppearance {
     Outline = "outline",
     Ghost = "ghost",
     Block = "block"
 }
+export declare type ButtonAppearanceAttribute = `${ButtonAppearance}`;
 export declare type ButtonType = Button['type'];

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

@@ -1,12 +1,12 @@
-export declare type DrawerLocationAttribute = 'left' | 'right';
 export declare enum DrawerLocation {
     Left = "left",
     Right = "right"
 }
-export declare type DrawerStateAttribute = 'opening' | 'opened' | 'closing' | 'closed';
+export declare type DrawerLocationAttribute = `${DrawerLocation}`;
 export declare enum DrawerState {
     Opening = "opening",
     Opened = "opened",
     Closing = "closing",
     Closed = "closed"
 }
+export declare type DrawerStateAttribute = `${DrawerState}`;

package/dist/esm/nimble-components/src/icon-base/types.d.ts

@@ -2,10 +2,10 @@
  * Predefined icon status states
  * @public
  */
-export declare type IconStatusAttribute = 'fail' | 'warning' | 'pass' | 'regular';
 export declare enum IconStatus {
     Fail = "fail",
     Warning = "warning",
     Pass = "pass",
     Regular = "regular"
 }
+export declare type IconStatusAttribute = `${IconStatus}`;

package/dist/esm/nimble-components/src/icons/all-icons.d.ts

@@ -3,13 +3,22 @@ export { AdminIcon } from './admin';
 export { AdministrationIcon } from './administration';
 export { CheckIcon } from './check';
 export { CustomApplicationsIcon } from './custom-applications';
+export { CustomStatusIcon } from './custom-status';
 export { DeleteIcon } from './delete';
+export { DoneIcon } from './done';
 export { FailIcon } from './fail';
 export { LoginIcon } from './login';
 export { LogoutIcon } from './logout';
+export { LoopingIcon } from './looping';
 export { ManagedSystemsIcon } from './managed-systems';
 export { MeasurementDataAnalysisIcon } from './measurement-data-analysis';
+export { RunningIcon } from './running';
 export { SettingsIcon } from './settings';
+export { SkippedIcon } from './skipped';
+export { StatusIcon } from './status';
 export { SucceededIcon } from './succeeded';
+export { TerminatedIcon } from './terminated';
 export { TestInsightsIcon } from './test-insights';
+export { TimedOutIcon } from './timed-out';
 export { UtilitiesIcon } from './utilities';
+export { WaitingIcon } from './waiting';

package/dist/esm/nimble-components/src/icons/custom-status.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-custom-status-icon': CustomStatusIcon;
+    }
+}
+/**
+ *  The icon component for the 'custom-status' icon
+ */
+export declare class CustomStatusIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/done.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-done-icon': DoneIcon;
+    }
+}
+/**
+ *  The icon component for the 'done' icon
+ */
+export declare class DoneIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/looping.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-looping-icon': LoopingIcon;
+    }
+}
+/**
+ *  The icon component for the 'looping' icon
+ */
+export declare class LoopingIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/running.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-running-icon': RunningIcon;
+    }
+}
+/**
+ *  The icon component for the 'running' icon
+ */
+export declare class RunningIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/skipped.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-skipped-icon': SkippedIcon;
+    }
+}
+/**
+ *  The icon component for the 'skipped' icon
+ */
+export declare class SkippedIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/status.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-status-icon': StatusIcon;
+    }
+}
+/**
+ *  The icon component for the 'status' icon
+ */
+export declare class StatusIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/terminated.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-terminated-icon': TerminatedIcon;
+    }
+}
+/**
+ *  The icon component for the 'terminated' icon
+ */
+export declare class TerminatedIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/timed-out.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-timed-out-icon': TimedOutIcon;
+    }
+}
+/**
+ *  The icon component for the 'timed-out' icon
+ */
+export declare class TimedOutIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/waiting.d.ts

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-waiting-icon': WaitingIcon;
+    }
+}
+/**
+ *  The icon component for the 'waiting' icon
+ */
+export declare class WaitingIcon extends Icon {
+    constructor();
+}

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

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

package/dist/esm/nimble-components/src/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/nimble-components/src/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/nimble-components/src/theme-provider/design-tokens.d.ts

@@ -1,21 +1,16 @@
-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 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>;

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

@@ -1,17 +1,22 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
-import type { NimbleTheme } from './types';
-export type { NimbleThemeProvider };
+import { DesignToken, FoundationElement } from '@microsoft/fast-foundation';
+import { Direction } from '@microsoft/fast-web-utilities';
+import { Theme } from './types';
 declare global {
     interface HTMLElementTagNameMap {
-        'nimble-theme-provider': NimbleThemeProvider;
+        'nimble-theme-provider': ThemeProvider;
     }
 }
+export declare const direction: DesignToken<Direction>;
+export declare const theme: DesignToken<Theme>;
 /**
- * The NimbleThemeProvider implementation. Add this component to the page and set its `theme` attribute to control
+ * The ThemeProvider 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;
+export declare class ThemeProvider extends FoundationElement {
+    direction: Direction;
+    theme: Theme;
+    directionChanged(_prev: Direction | undefined, next: Direction | undefined): void;
+    themeChanged(_prev: Theme | undefined, next: Theme | undefined): void;
+    connectedCallback(): void;
 }

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

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

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

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

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

@@ -1,7 +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"
 }
+export declare type TreeViewSelectionModeAttribute = `${TreeViewSelectionMode}`;

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

@@ -0,0 +1,34 @@
+import type { Behavior, ElementStyles, FASTElement } from '@microsoft/fast-element';
+/**
+ * Behavior to conditionally apply LTR and RTL stylesheets. To determine which to apply,
+ * the behavior will use the nearest DesignSystemProvider's 'direction' design system value.
+ *
+ * @public
+ * @example
+ * ```ts
+ * import { css } from "@microsoft/fast-element";
+ * import { DirectionalStyleSheetBehavior } from "@microsoft/fast-foundation";
+ *
+ * css`
+ *  // ...
+ * `.withBehaviors(new DirectionalStyleSheetBehavior(
+ *   css`:host { content: "ltr"}`),
+ *   css`:host { content: "rtl"}`),
+ * )
+ * ```
+ */
+export declare class DirectionalStyleSheetBehavior implements Behavior {
+    private ltr;
+    private rtl;
+    private cache;
+    constructor(ltr: ElementStyles | null, rtl: ElementStyles | null);
+    /**
+     * @internal
+     */
+    bind(source: FASTElement & HTMLElement): void;
+    /**
+     * @internal
+     */
+    unbind(source: FASTElement & HTMLElement): void;
+    private attach;
+}

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

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

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

@@ -0,0 +1,44 @@
+import { Behavior, ElementStyles, FASTElement } from '@microsoft/fast-element';
+import type { Theme } from '../../theme-provider/types';
+export declare type LightStyle = ElementStyles | null;
+export declare type DarkStyleOrAlias = ElementStyles | null | Theme.Light;
+export declare type ColorStyleOrAlias = ElementStyles | null | Theme.Light | Theme.Dark;
+export declare type LegacyBlueStyleOrAlias = ElementStyles | null | Theme.Light | Theme.Dark | Theme.Color;
+/**
+ * Behavior to conditionally apply theme-based stylesheets.
+ */
+declare class ThemeStyleSheetBehavior implements Behavior {
+    private readonly themeStyles;
+    private readonly cache;
+    constructor(lightStyle: LightStyle, darkStyleOrAlias: DarkStyleOrAlias, colorStyleOrAlias: ColorStyleOrAlias, legacyBlueStyleOrAlias: LegacyBlueStyleOrAlias);
+    private static resolveTheme;
+    /**
+     * @internal
+     */
+    bind(source: FASTElement & HTMLElement): void;
+    /**
+     * @internal
+     */
+    unbind(source: FASTElement & HTMLElement): void;
+}
+/**
+ * Behavior to conditionally apply theme-based stylesheets. To determine which to apply,
+ * the behavior will use the nearest ThemeProvider's 'theme' design system value.
+ * To re-use the same style for multiple themes you can specify the name of an already
+ * defined theme to alias them together.
+ *
+ * @public
+ * @example
+ * ```ts
+ * css`
+ *  // ...
+ * `.withBehaviors(new ThemeStyleSheetBehavior(
+ *   css`:host { ... Theme.Light style... }`),
+ *   css`:host { ... Theme.Dark style... }`),
+ *   null, // No style needed for Theme.Color style
+ *   Theme.Light, // For the Theme.LegacyBlue style, re-use the previously set Theme.Light style
+ * )
+ * ```
+ */
+export declare const themeBehavior: (lightStyle: LightStyle, darkStyleOrAlias: DarkStyleOrAlias, colorStyleOrAlias: ColorStyleOrAlias, legacyBlueStyleOrAlias: LegacyBlueStyleOrAlias) => ThemeStyleSheetBehavior;
+export {};

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

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 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';
+import { borderColor, borderColorRgbPartial, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelectedRgbPartial, fontFamily, iconSize, labelFontColor, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, smallDelay } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('inline-block')}
 
@@ -25,7 +25,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};
     }
@@ -68,7 +68,7 @@ export const styles = css `
 
     .control::selection {
         color: ${labelFontColor};
-        background: rgba(${fillColorSelectedRgb}, 0.3);
+        background: rgba(${fillColorSelectedRgbPartial}, 0.3);
     }
 
     .control::placeholder {

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,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"}
+{"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,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,2BAA2B,EAC3B,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,qBAAqB;;oCAEpC,UAAU,oBAAoB,UAAU;;;;;;;;;;mCAUzC,gBAAgB;;;;;;yBAM1B,WAAW,UAAU,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;iBAwBrD,cAAc;2BACJ,2BAA2B;;;;iBAIrC,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/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"}