@ni/nimble-components 11.7.2 → 11.8.2

package/dist/esm/all-components.d.ts

@@ -7,6 +7,7 @@ import './anchored-region';
 import './breadcrumb';
 import './breadcrumb-item';
 import './button';
+import './card-button';
 import './checkbox';
 import './combobox';
 import './drawer';

package/dist/esm/all-components.js

@@ -7,6 +7,7 @@ import './anchored-region';
 import './breadcrumb';
 import './breadcrumb-item';
 import './button';
+import './card-button';
 import './checkbox';
 import './combobox';
 import './drawer';

package/dist/esm/all-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}

package/dist/esm/breadcrumb/styles.js

@@ -2,6 +2,7 @@ import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { DigitalGreenDark, PowerGreen, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { bodyEmphasizedFont, bodyFont, bodyFontColor } from '../theme-provider/design-tokens';
+import { Theme } from '../theme-provider/types';
 import { hexToRgbaCssColor } from '../utilities/style/colors';
 import { themeBehavior } from '../utilities/style/theme';
 export const styles = css `
@@ -29,8 +30,7 @@ export const styles = css `
     ::slotted(*:not([href]):last-child) {
         font: ${bodyEmphasizedFont};
     }
-`.withBehaviors(themeBehavior(css `
-            ${'' /* Light theme */}
+`.withBehaviors(themeBehavior(Theme.light, css `
             :host {
                 --ni-private-breadcrumb-link-active-font-color: ${DigitalGreenDark};
             }
@@ -38,8 +38,7 @@ export const styles = css `
             :host(.prominent-links) {
                 --ni-private-breadcrumb-link-font-color: ${DigitalGreenDark};
             }
-        `, css `
-            ${'' /* Dark theme */}
+        `), themeBehavior(Theme.dark, css `
             :host {
                 --ni-private-breadcrumb-link-active-font-color: ${PowerGreen};
             }
@@ -47,8 +46,7 @@ export const styles = css `
             :host(.prominent-links) {
                 --ni-private-breadcrumb-link-font-color: ${PowerGreen};
             }
-        `, css `
-            ${'' /* Color theme */}
+        `), themeBehavior(Theme.color, css `
             :host {
                 --ni-private-breadcrumb-link-active-font-color: ${hexToRgbaCssColor(White, 0.6)};
             }

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb/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,UAAU,EACV,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,kBAAkB,EAClB,QAAQ,EACR,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;gBAIb,QAAQ;mDAC2B,aAAa;;;;;;;;;0DASN,aAAa;;;;;;;;gBAQvD,kBAAkB;;CAEjC,CAAC,aAAa,CACP,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;kEAEgC,gBAAgB;;;;2DAIvB,gBAAgB;;SAElE,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;kEAEiC,UAAU;;;;2DAIjB,UAAU;;SAE5D,EACG,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;kEAEgC,iBAAiB,CACnE,KAAK,EACL,GAAG,CACN;;;;2DAI8C,UAAU;;SAE5D,CACA,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb/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,UAAU,EACV,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,kBAAkB,EAClB,QAAQ,EACR,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;gBAIb,QAAQ;mDAC2B,aAAa;;;;;;;;;0DASN,aAAa;;;;;;;;gBAQvD,kBAAkB;;CAEjC,CAAC,aAAa,CACP,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;kEAEmD,gBAAgB;;;;2DAIvB,gBAAgB;;SAElE,CACA,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;kEAEmD,UAAU;;;;2DAIjB,UAAU;;SAE5D,CACA,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;kEAEmD,iBAAiB,CACnE,KAAK,EACL,GAAG,CACN;;;;2DAI8C,UAAU;;SAE5D,CACA,CACJ,CAAC"}

package/dist/esm/breadcrumb-item/styles.js

@@ -28,7 +28,7 @@ export const styles = css `
         padding-right: calc(4px - ${borderWidth});
     }
 
-    .control:link {
+    .control:any-link {
         cursor: pointer;
         text-decoration: none;
     }
@@ -42,7 +42,7 @@ export const styles = css `
         text-decoration: underline;
     }
 
-    .control:link${focusVisible} {
+    .control:any-link${focusVisible} {
         border: ${borderWidth} solid ${borderHoverColor};
         outline: 2px solid ${borderHoverColor};
         outline-offset: 1px;

package/dist/esm/breadcrumb-item/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;kBAGV,aAAa;;gBAEf,QAAQ;iBACP,aAAa;mCACK,WAAW;;;;;;;;;;;;;;kBAc5B,WAAW;oCACO,WAAW;;;;;;;;;;;;;;;;;mBAiB5B,YAAY;kBACb,WAAW,UAAU,gBAAgB;6BAC1B,gBAAgB;;;;;;;;;;;;;;;;;;;;iBAoB5B,QAAQ;kBACP,QAAQ;;;;gBAIV,oBAAoB;;CAEnC,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;kBAGV,aAAa;;gBAEf,QAAQ;iBACP,aAAa;mCACK,WAAW;;;;;;;;;;;;;;kBAc5B,WAAW;oCACO,WAAW;;;;;;;;;;;;;;;;;uBAiBxB,YAAY;kBACjB,WAAW,UAAU,gBAAgB;6BAC1B,gBAAgB;;;;;;;;;;;;;;;;;;;;iBAoB5B,QAAQ;kBACP,QAAQ;;;;gBAIV,oBAAoB;;CAEnC,CAAC"}

package/dist/esm/card-button/index.d.ts

@@ -0,0 +1,17 @@
+import { Button as FoundationButton } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-card-button': CardButton;
+    }
+}
+/**
+ * A nimble-styled card button
+ */
+export declare class CardButton extends FoundationButton {
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: selected
+     */
+    selected: boolean;
+}

package/dist/esm/card-button/index.js

@@ -0,0 +1,40 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { Button as FoundationButton, buttonTemplate as template, DesignSystem } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+/**
+ * A nimble-styled card button
+ */
+export class CardButton extends FoundationButton {
+    constructor() {
+        super(...arguments);
+        /**
+         * @public
+         * @remarks
+         * HTML Attribute: selected
+         */
+        this.selected = false;
+    }
+}
+__decorate([
+    attr({ mode: 'boolean' })
+], CardButton.prototype, "selected", void 0);
+/**
+ * A function that returns a nimble-card-button registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#buttonTemplate}
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: \<nimble-card-button\>
+ *
+ */
+const nimbleCardButton = CardButton.compose({
+    baseName: 'card-button',
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true
+    }
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
+//# sourceMappingURL=index.js.map

package/dist/esm/card-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/card-button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAC1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,gBAAgB;IAAhD;;QACI;;;;WAIG;QAEI,aAAQ,GAAG,KAAK,CAAC;IAC5B,CAAC;CAAA;AADG;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACF;AAG5B;;;;;;;;GAQG;AACH,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,aAAa;IACvB,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,gBAAgB,EAAE,CAAC,CAAC"}

package/dist/esm/card-button/styles.d.ts

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

package/dist/esm/card-button/styles.js

@@ -0,0 +1,143 @@
+import { css } from '@microsoft/fast-element';
+import { Black, Black15, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '@microsoft/fast-foundation';
+import { focusVisible } from '../utilities/style/focus';
+import { borderWidth, smallDelay, buttonLabelFont, buttonLabelFontColor, borderHoverColor } from '../theme-provider/design-tokens';
+import { themeBehavior } from '../utilities/style/theme';
+import { hexToRgbaCssColor } from '../utilities/style/colors';
+import { Theme } from '../theme-provider/types';
+// prettier-ignore
+export const styles = css `
+    ${display('inline-flex')}
+
+    :host {
+        background-color: transparent;
+        color: ${buttonLabelFontColor};
+        font: ${buttonLabelFont};
+        cursor: pointer;
+        outline: none;
+        border: none;
+        box-sizing: border-box;
+    }
+
+    :host(:hover) {
+        box-shadow: 0px 1px 4px
+            var(--ni-private-card-button-box-shadow-hover-color);
+    }
+
+    :host(:active) {
+        box-shadow: none;
+    }
+
+    :host([disabled]) {
+        cursor: default;
+        box-shadow: none;
+    }
+
+    .control {
+        background-color: transparent;
+        height: 100%;
+        width: 100%;
+        border: ${borderWidth} solid transparent;
+        color: inherit;
+        border-radius: inherit;
+        fill: inherit;
+        cursor: inherit;
+        font: inherit;
+        outline: none;
+        transition: box-shadow ${smallDelay};
+        padding: 0px;
+    }
+
+    .control:hover {
+        background: var(--ni-private-card-button-background-hover-color);
+    }
+
+    .control${focusVisible} {
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        border-color: ${borderHoverColor};
+        outline: ${borderWidth} solid ${borderHoverColor};
+        outline-offset: -4px;
+    }
+
+    .control:active {
+        background: var(--ni-private-card-button-background-active-color);
+        border-color: var(--ni-private-card-button-border-active-color);
+        outline: none;
+        box-shadow: none;
+    }
+
+    :host([selected]) .control {
+        background: var(--ni-private-card-button-background-active-color);
+        border-color: var(--ni-private-card-button-border-selected-color);
+    }
+
+    :host([selected]) .control${focusVisible} {
+        border-color: ${borderHoverColor};
+    }
+
+    :host([selected]) .control:active {
+        border-color: var(--ni-private-card-button-border-active-color);
+    }
+
+    :host([selected]) .control${focusVisible}:active {
+        outline: none;
+        box-shadow: none;
+    }
+
+    .control[disabled] {
+        background: transparent;
+        opacity: 0.3;
+    }
+
+    .control[disabled]:active {
+        border-color: transparent;
+    }
+
+    :host([selected]) .control[disabled]:active {
+        border-color: var(--ni-private-card-button-border-selected-color);
+    }
+
+    .content {
+        display: contents;
+    }
+
+    slot[name='start'] {
+        display: none;
+    }
+
+    slot[name='end'] {
+        display: none;
+    }
+
+    @media (prefers-reduced-motion) {
+        .control {
+            transition-duration: 0s;
+        }
+    }
+`.withBehaviors(themeBehavior(Theme.light, css `
+                :host {
+                    --ni-private-card-button-box-shadow-hover-color: ${hexToRgbaCssColor(Black, 0.3)};
+                    --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(White, 0.3)};
+                    --ni-private-card-button-background-active-color: ${White};
+                    --ni-private-card-button-border-active-color: ${hexToRgbaCssColor(Black91, 0.2)};
+                    --ni-private-card-button-border-selected-color: ${hexToRgbaCssColor(Black91, 0.6)};
+                }
+            `), themeBehavior(Theme.dark, css `
+                :host {
+                    --ni-private-card-button-box-shadow-hover-color: ${hexToRgbaCssColor(Black, 0.77)};
+                    --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(Black15, 0.07)};
+                    --ni-private-card-button-background-active-color: ${hexToRgbaCssColor(Black15, 0.15)};
+                    --ni-private-card-button-border-active-color: ${hexToRgbaCssColor(Black15, 0.2)};
+                    --ni-private-card-button-border-selected-color: ${Black15};
+                }
+            `), themeBehavior(Theme.color, css `
+                :host {
+                    --ni-private-card-button-box-shadow-hover-color: ${hexToRgbaCssColor(White, 0.77)};
+                    --ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(White, 0.2)};
+                    --ni-private-card-button-background-active-color: ${hexToRgbaCssColor(White, 0.4)};
+                    --ni-private-card-button-border-active-color: ${hexToRgbaCssColor(White, 0.2)};
+                    --ni-private-card-button-border-selected-color: ${hexToRgbaCssColor(White, 0.6)};
+                }
+            `));
+//# sourceMappingURL=styles.js.map

package/dist/esm/card-button/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/card-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,KAAK,EACL,OAAO,EACP,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,gBAAgB,EACnB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,kBAAkB;AAClB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,oBAAoB;gBACrB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;kBAyBb,WAAW;;;;;;;iCAOI,UAAU;;;;;;;;cAQ7B,YAAY;kCACQ,WAAW,IAAI,gBAAgB;wBACzC,gBAAgB;mBACrB,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;gCAgBxB,YAAY;wBACpB,gBAAgB;;;;;;;gCAOR,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmC3C,CAAC,aAAa,CACP,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;uEAEwD,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;uEAC7B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;wEAC5B,KAAK;oEACT,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;sEAC7B,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;;aAExF,CACJ,EAAE,aAAa,CACZ,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;uEAEwD,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;uEAC9B,iBAAiB,CAAC,OAAO,EAAE,IAAI,CAAC;wEAC/B,iBAAiB,CAAC,OAAO,EAAE,IAAI,CAAC;oEACpC,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;sEAC7B,OAAO;;aAEhE,CACJ,EAAE,aAAa,CACZ,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;uEAEwD,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;uEAC9B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;wEAC5B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;oEACjC,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;sEAC3B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;aAEtF,CACJ,CACJ,CAAC"}

package/dist/esm/switch/styles.js

@@ -2,6 +2,7 @@ import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { Black15, Black7, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { borderHoverColor, borderWidth, buttonLabelDisabledFontColor, buttonLabelFont, buttonLabelFontColor, controlHeight, controlLabelDisabledFontColor, controlLabelFont, controlLabelFontColor, fillHoverColor, smallDelay } from '../theme-provider/design-tokens';
+import { Theme } from '../theme-provider/types';
 import { hexToRgbaCssColor } from '../utilities/style/colors';
 import { focusVisible } from '../utilities/style/focus';
 import { themeBehavior } from '../utilities/style/theme';
@@ -143,8 +144,7 @@ export const styles = css `
             transition-duration: 0s;
         }
     }
-`.withBehaviors(themeBehavior(css `
-            ${'' /* Light theme */}
+`.withBehaviors(themeBehavior(Theme.light, css `
             :host {
                 --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(Black91, 0.07)};
                 --ni-private-switch-indicator-background-color: ${White};
@@ -152,8 +152,7 @@ export const styles = css `
                 --ni-private-switch-indicator-border-color: ${Black91};
                 --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black91, 0.3)};
             }
-        `, css `
-            ${'' /* Dark theme */}
+        `), themeBehavior(Theme.dark, css `
             :host {
                 --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(Black15, 0.07)};
                 --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(Black91, 0.3)};
@@ -161,8 +160,7 @@ export const styles = css `
                 --ni-private-switch-indicator-border-color: ${Black7};
                 --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black7, 0.3)};
             }
-        `, css `
-            ${'' /* Color theme */}
+        `), themeBehavior(Theme.color, css `
             :host {
                 --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(White, 0.07)};
                 --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(White, 0.1)};

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,4BAA4B,EAC5B,eAAe,EACf,oBAAoB,EACpB,aAAa,EACb,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,EACd,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;gBAIZ,eAAe;iBACd,oBAAoB;;;;;;cAMvB,aAAa;;;;;;iBAMV,4BAA4B;;;;iBAI5B,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;;;;;;;;;4BAsBlB,cAAc;;;uBAGnB,WAAW;;;;;;;YAOtB,YAAY;wBACA,gBAAgB;;;;;gCAKR,UAAU;;;;;gCAKV,UAAU;;;;;;;;;;;;;;;;;;kBAkBxB,WAAW;;;;;uBAKN,WAAW,eAAe,gBAAgB;;;;;;;kBAO/C,WAAW;;;;YAIjB,YAAY;kBACN,WAAW,UAAU,gBAAgB;;;;;;;;;8BASzB,UAAU;;;;;;;;;;;8BAWV,UAAU;;;;;;;;;;;;;CAavC,CAAC,aAAa,CACP,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;iEAE+B,iBAAiB,CAClE,OAAO,EACP,IAAI,CACP;kEACqD,KAAK;2EACI,iBAAiB,CAC5E,KAAK,EACL,GAAG,CACN;8DACiD,OAAO;uEACE,iBAAiB,CACxE,OAAO,EACP,GAAG,CACN;;SAEJ,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;iEAEgC,iBAAiB,CAClE,OAAO,EACP,IAAI,CACP;kEACqD,iBAAiB,CACnE,OAAO,EACP,GAAG,CACN;2EAC8D,iBAAiB,CAC5E,OAAO,EACP,GAAG,CACN;8DACiD,MAAM;uEACG,iBAAiB,CACxE,MAAM,EACN,GAAG,CACN;;SAEJ,EACG,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;iEAE+B,iBAAiB,CAClE,KAAK,EACL,IAAI,CACP;kEACqD,iBAAiB,CACnE,KAAK,EACL,GAAG,CACN;2EAC8D,iBAAiB,CAC5E,KAAK,EACL,GAAG,CACN;8DACiD,KAAK;uEACI,iBAAiB,CACxE,KAAK,EACL,GAAG,CACN;;SAEJ,CACA,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,4BAA4B,EAC5B,eAAe,EACf,oBAAoB,EACpB,aAAa,EACb,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,EACd,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;gBAIZ,eAAe;iBACd,oBAAoB;;;;;;cAMvB,aAAa;;;;;;iBAMV,4BAA4B;;;;iBAI5B,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;;;;;;;;;4BAsBlB,cAAc;;;uBAGnB,WAAW;;;;;;;YAOtB,YAAY;wBACA,gBAAgB;;;;;gCAKR,UAAU;;;;;gCAKV,UAAU;;;;;;;;;;;;;;;;;;kBAkBxB,WAAW;;;;;uBAKN,WAAW,eAAe,gBAAgB;;;;;;;kBAO/C,WAAW;;;;YAIjB,YAAY;kBACN,WAAW,UAAU,gBAAgB;;;;;;;;;8BASzB,UAAU;;;;;;;;;;;8BAWV,UAAU;;;;;;;;;;;;;CAavC,CAAC,aAAa,CACP,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;iEAEkD,iBAAiB,CAClE,OAAO,EACP,IAAI,CACP;kEACqD,KAAK;2EACI,iBAAiB,CAC5E,KAAK,EACL,GAAG,CACN;8DACiD,OAAO;uEACE,iBAAiB,CACxE,OAAO,EACP,GAAG,CACN;;SAEJ,CACA,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;iEAEkD,iBAAiB,CAClE,OAAO,EACP,IAAI,CACP;kEACqD,iBAAiB,CACnE,OAAO,EACP,GAAG,CACN;2EAC8D,iBAAiB,CAC5E,OAAO,EACP,GAAG,CACN;8DACiD,MAAM;uEACG,iBAAiB,CACxE,MAAM,EACN,GAAG,CACN;;SAEJ,CACA,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;iEAEkD,iBAAiB,CAClE,KAAK,EACL,IAAI,CACP;kEACqD,iBAAiB,CACnE,KAAK,EACL,GAAG,CACN;2EAC8D,iBAAiB,CAC5E,KAAK,EACL,GAAG,CACN;8DACiD,KAAK;uEACI,iBAAiB,CACxE,KAAK,EACL,GAAG,CACN;;SAEJ,CACA,CACJ,CAAC"}

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/indent */
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, failColor, fillSelectedRgbPartialColor, labelHeight, smallDelay, controlLabelFont, bodyFont, controlLabelFontColor, controlLabelDisabledFontColor, standardPadding } from '../theme-provider/design-tokens';
@@ -234,17 +235,13 @@ export const styles = css `
             :host([readonly]) .root {
                 border-color: transparent;
             }
-        `), themeBehavior(css `
-            ${'' /* Light theme */}
+        `), themeBehavior(Theme.light, css `
             .control::-ms-reveal {
                 filter: invert(0%);
             }
-        `, css `
-            ${'' /* Dark theme */}
+        `), themeBehavior([Theme.dark, Theme.color], css `
             .control::-ms-reveal {
                 filter: invert(100%);
             }
-        `, 
-// Color theme
-Theme.dark));
+        `));
 //# 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,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;gBAGD,QAAQ;;;;iBAIP,aAAa;uBACP,WAAW,MAAM,aAAa;mDACF,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;iCAYb,qBAAqB;oBAClC,eAAe;mBAChB,WAAW;;;;6BAID,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;;;;;;;;;UAY5C,CAAA,yCAA0C,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyC5C;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;;;;4BAUV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;UAiB9B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACC,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;uCAEgB,WAAW;;;SAGzC,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAEkB,qBAAqB;;;;gCAI9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;;;;;;yCAST,qBAAqB;;;;;yCAKrB,qBAAqB;;SAErD,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;gCAES,WAAW;;;SAGlC,CACQ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;gCAES,WAAW;iCACV,WAAW;;;;;;SAMnC,CACQ,EACD,aAAa,CACT,GAAG,CAAA;cACT,EAAE,CAAC,iBAAiB;;;;SAIzB,EACW,GAAG,CAAA;cACT,EAAE,CAAC,gBAAgB;;;;SAIxB;AACW,cAAc;AACd,KAAK,CAAC,IAAI,CACb,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,8CAA8C;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;gBAGD,QAAQ;;;;iBAIP,aAAa;uBACP,WAAW,MAAM,aAAa;mDACF,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;iCAYb,qBAAqB;oBAClC,eAAe;mBAChB,WAAW;;;;6BAID,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;;;;;;;;;UAY5C,CAAA,yCAA0C,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyC5C;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;;;;4BAUV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;UAiB9B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACX,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;gCAI9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;;;;;;yCAST,qBAAqB;;;;;yCAKrB,qBAAqB;;SAErD,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;iCACV,WAAW;;;;;;SAMnC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;SAIF,CACJ,EACD,aAAa,CACT,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EACzB,GAAG,CAAA;;;;SAIF,CACJ,CACJ,CAAC"}

package/dist/esm/tooltip/styles.js

@@ -2,6 +2,7 @@ import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { BannerFail100DarkUi, Black15, Black85, Black91, ForestGreen, Information100DarkUi, Information100LightUi, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { tooltipCaptionFont, tooltipCaptionFontColor, popupBoxShadowColor, borderWidth, standardPadding, smallPadding } from '../theme-provider/design-tokens';
+import { Theme } from '../theme-provider/types';
 import { hexToRgbaCssColor } from '../utilities/style/colors';
 import { themeBehavior } from '../utilities/style/theme';
 export const styles = css `
@@ -45,11 +46,7 @@ export const styles = css `
         display: flex;
         flex: 0 0 auto;
     }
-`.withBehaviors(
-/* Local Theme Behaviors for tooltip borders and backgrounds */
-themeBehavior(
-// Light Theme
-css `
+`.withBehaviors(themeBehavior(Theme.light, css `
             :host(.fail) {
                 --ni-private-tooltip-border-color: ${BannerFail100DarkUi};
                 --ni-private-tooltip-background-color: ${White};
@@ -59,9 +56,7 @@ css `
                 --ni-private-tooltip-border-color: ${Information100LightUi};
                 --ni-private-tooltip-background-color: ${White};
             }
-        `, 
-// Dark Theme
-css `
+        `), themeBehavior(Theme.dark, css `
             :host {
                 --ni-private-tooltip-border-color: ${hexToRgbaCssColor(Black15, 0.3)};
                 --ni-private-tooltip-background-color: ${Black85};
@@ -74,9 +69,7 @@ css `
             :host(.fail) {
                 --ni-private-tooltip-border-color: ${BannerFail100DarkUi};
             }
-        `, 
-// Color Theme
-css `
+        `), themeBehavior(Theme.color, css `
             .anchored-region {
                 background-color: ${ForestGreen};
             }

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tooltip/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,mBAAmB,EACnB,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,oBAAoB,EACpB,qBAAqB,EACrB,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,WAAW,EACX,eAAe,EACf,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,kBAAkB;iBACjB,uBAAuB;;6CAEK,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;iDAC3B,OAAO;;;;;;;kCAOtB,mBAAmB;;kBAEnC,WAAW;;;6BAGA,eAAe;8BACd,eAAe;uBACtB,YAAY;;;;;;;;;;;;;;;;;;;CAmBlC,CAAC,aAAa;AACX,+DAA+D;AAC3D,aAAa;AACb,cAAc;AACV,GAAG,CAAA;;qDAEsC,mBAAmB;yDACf,KAAK;;;;qDAIT,qBAAqB;yDACjB,KAAK;;SAErD;AACG,aAAa;AACb,GAAG,CAAA;;qDAEsC,iBAAiB,CACtD,OAAO,EACP,GAAG,CACN;yDAC4C,OAAO;;;;qDAIX,oBAAoB;;;;qDAIpB,mBAAmB;;SAE/D;AACG,cAAc;AACd,GAAG,CAAA;;oCAEqB,WAAW;;;;qDAIM,iBAAiB,CACtD,KAAK,EACL,GAAG,CACN;yDAC4C,iBAAiB,CAC1D,KAAK,EACL,IAAI,CACP;;;;qDAIwC,KAAK;;;;qDAIL,KAAK;;;;;;SAMjD,CACA,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tooltip/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,mBAAmB,EACnB,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,oBAAoB,EACpB,qBAAqB,EACrB,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,WAAW,EACX,eAAe,EACf,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,kBAAkB;iBACjB,uBAAuB;;6CAEK,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;iDAC3B,OAAO;;;;;;;kCAOtB,mBAAmB;;kBAEnC,WAAW;;;6BAGA,eAAe;8BACd,eAAe;uBACtB,YAAY;;;;;;;;;;;;;;;;;;;CAmBlC,CAAC,aAAa,CACP,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;qDAEsC,mBAAmB;yDACf,KAAK;;;;qDAIT,qBAAqB;yDACjB,KAAK;;SAErD,CACA,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;qDAEsC,iBAAiB,CACtD,OAAO,EACP,GAAG,CACN;yDAC4C,OAAO;;;;qDAIX,oBAAoB;;;;qDAIpB,mBAAmB;;SAE/D,CACA,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEqB,WAAW;;;;qDAIM,iBAAiB,CACtD,KAAK,EACL,GAAG,CACN;yDAC4C,iBAAiB,CAC1D,KAAK,EACL,IAAI,CACP;;;;qDAIwC,KAAK;;;;qDAIL,KAAK;;;;;;SAMjD,CACA,CACJ,CAAC"}

package/dist/esm/utilities/style/appearance.d.ts

@@ -3,9 +3,9 @@ import type { Behavior, ElementStyles } from '@microsoft/fast-element';
  * Behavior that will conditionally apply a stylesheet based on the element's
  * appearance property
  *
- * @param value - The value of the appearance property
+ * @param value - The value or values of the appearance property
  * @param styles - The styles to be applied when condition matches
  *
  * @public
  */
-export declare function appearanceBehavior<AppearanceType>(value: AppearanceType, styles: ElementStyles): Behavior;
+export declare function appearanceBehavior<AppearanceType>(value: AppearanceType | AppearanceType[], styles: ElementStyles): Behavior;

package/dist/esm/utilities/style/appearance.js

@@ -1,14 +1,14 @@
-import { PropertyStyleSheetBehavior } from '@microsoft/fast-foundation';
+import { MultivaluePropertyStyleSheetBehavior } from './multivalue-property-stylesheet-behavior';
 /**
  * Behavior that will conditionally apply a stylesheet based on the element's
  * appearance property
  *
- * @param value - The value of the appearance property
+ * @param value - The value or values of the appearance property
  * @param styles - The styles to be applied when condition matches
  *
  * @public
  */
 export function appearanceBehavior(value, styles) {
-    return new PropertyStyleSheetBehavior('appearance', value, styles);
+    return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
 }
 //# sourceMappingURL=appearance.js.map

package/dist/esm/utilities/style/appearance.js.map

@@ -1 +1 @@
-{"version":3,"file":"appearance.js","sourceRoot":"","sources":["../../../../src/utilities/style/appearance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAGxE;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAC9B,KAAqB,EACrB,MAAqB;IAErB,OAAO,IAAI,0BAA0B,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AACvE,CAAC"}
+{"version":3,"file":"appearance.js","sourceRoot":"","sources":["../../../../src/utilities/style/appearance.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oCAAoC,EAAE,MAAM,2CAA2C,CAAC;AAEjG;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAC9B,KAAwC,EACxC,MAAqB;IAErB,OAAO,IAAI,oCAAoC,CAC3C,YAAY,EACZ,KAAK,EACL,MAAM,CACT,CAAC;AACN,CAAC"}

package/dist/esm/utilities/style/multivalue-property-stylesheet-behavior.d.ts

@@ -0,0 +1,37 @@
+import { Behavior, ElementStyles, FASTElement } from '@microsoft/fast-element';
+/**
+ * A behavior to add or remove a stylesheet from an element based on a property. The behavior ensures that
+ * styles are applied while the property matches and that styles are not applied if the property does
+ * not match.
+ *
+ * @public
+ */
+export declare class MultivaluePropertyStyleSheetBehavior<PropertyType> implements Behavior {
+    private readonly propertyName;
+    private readonly value;
+    private readonly styles;
+    /**
+     * Constructs a {@link MultivaluePropertyStyleSheetBehavior} instance.
+     * @param propertyName - The property name to operate from.
+     * @param value - The property value or values to operate from.
+     * @param styles - The styles to coordinate with the property.
+     */
+    constructor(propertyName: string, value: PropertyType | PropertyType[], styles: ElementStyles);
+    /**
+     * Binds the behavior to the element.
+     * @param elementInstance - The element for which the property is applied.
+     */
+    bind(elementInstance: FASTElement): void;
+    /**
+     * Unbinds the behavior from the element.
+     * @param source - The element for which the behavior is unbinding.
+     */
+    unbind(source: FASTElement & HTMLElement): void;
+    /**
+     * Change event for the provided element.
+     * @param source - the element for which to attach or detach styles.
+     * @param key - the key to lookup to know if the element already has the styles
+     * @internal
+     */
+    handleChange(source: FASTElement, key: string): void;
+}

package/dist/esm/utilities/style/multivalue-property-stylesheet-behavior.js

@@ -0,0 +1,56 @@
+import { Observable } from '@microsoft/fast-element';
+/**
+ * A behavior to add or remove a stylesheet from an element based on a property. The behavior ensures that
+ * styles are applied while the property matches and that styles are not applied if the property does
+ * not match.
+ *
+ * @public
+ */
+export class MultivaluePropertyStyleSheetBehavior {
+    /**
+     * Constructs a {@link MultivaluePropertyStyleSheetBehavior} instance.
+     * @param propertyName - The property name to operate from.
+     * @param value - The property value or values to operate from.
+     * @param styles - The styles to coordinate with the property.
+     */
+    constructor(propertyName, value, styles) {
+        this.propertyName = propertyName;
+        this.value = value;
+        this.styles = styles;
+    }
+    /**
+     * Binds the behavior to the element.
+     * @param elementInstance - The element for which the property is applied.
+     */
+    bind(elementInstance) {
+        Observable.getNotifier(elementInstance).subscribe(this, this.propertyName);
+        this.handleChange(elementInstance, this.propertyName);
+    }
+    /**
+     * Unbinds the behavior from the element.
+     * @param source - The element for which the behavior is unbinding.
+     */
+    unbind(source) {
+        Observable.getNotifier(source).unsubscribe(this, this.propertyName);
+        source.$fastController.removeStyles(this.styles);
+    }
+    /**
+     * Change event for the provided element.
+     * @param source - the element for which to attach or detach styles.
+     * @param key - the key to lookup to know if the element already has the styles
+     * @internal
+     */
+    handleChange(source, key) {
+        // @ts-expect-error Accessing arbitrary property of an element
+        const currentValue = source[key];
+        if (Array.isArray(this.value)
+            ? this.value.includes(currentValue)
+            : this.value === currentValue) {
+            source.$fastController.addStyles(this.styles);
+        }
+        else {
+            source.$fastController.removeStyles(this.styles);
+        }
+    }
+}
+//# sourceMappingURL=multivalue-property-stylesheet-behavior.js.map

package/dist/esm/utilities/style/multivalue-property-stylesheet-behavior.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multivalue-property-stylesheet-behavior.js","sourceRoot":"","sources":["../../../../src/utilities/style/multivalue-property-stylesheet-behavior.ts"],"names":[],"mappings":"AAAA,OAAO,EAIH,UAAU,EACb,MAAM,yBAAyB,CAAC;AAEjC;;;;;;GAMG;AACH,MAAM,OAAO,oCAAoC;IAE7C;;;;;OAKG;IACH,YACqB,YAAoB,EACpB,KAAoC,EACpC,MAAqB;QAFrB,iBAAY,GAAZ,YAAY,CAAQ;QACpB,UAAK,GAAL,KAAK,CAA+B;QACpC,WAAM,GAAN,MAAM,CAAe;IACvC,CAAC;IAEJ;;;OAGG;IACI,IAAI,CAAC,eAA4B;QACpC,UAAU,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,SAAS,CAC7C,IAAI,EACJ,IAAI,CAAC,YAAY,CACpB,CAAC;QACF,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC1D,CAAC;IAED;;;OAGG;IACI,MAAM,CAAC,MAAiC;QAC3C,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACpE,MAAM,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACrD,CAAC;IAED;;;;;OAKG;IACI,YAAY,CAAC,MAAmB,EAAE,GAAW;QAChD,8DAA8D;QAC9D,MAAM,YAAY,GAAiB,MAAM,CAAC,GAAG,CAAiB,CAAC;QAC/D,IACI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;YACrB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC;YACnC,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,YAAY,EACnC;YACE,MAAM,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACjD;aAAM;YACH,MAAM,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACpD;IACL,CAAC;CACJ"}

package/dist/esm/utilities/style/theme.d.ts

@@ -1,16 +1,13 @@
-import { Behavior, ElementStyles, FASTElement } from '@microsoft/fast-element';
+import type { 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 | Extract<Theme, 'light'>;
-export declare type ColorStyleOrAlias = ElementStyles | null | Extract<Theme, 'light' | 'dark'>;
 /**
  * Behavior to conditionally apply theme-based stylesheets.
  */
 declare class ThemeStyleSheetBehavior implements Behavior {
-    private readonly themeStyles;
+    private readonly theme;
+    private readonly styles;
     private readonly cache;
-    constructor(lightStyle: LightStyle, darkStyleOrAlias: DarkStyleOrAlias, colorStyleOrAlias: ColorStyleOrAlias);
-    private static resolveTheme;
+    constructor(theme: Theme | Theme[], styles: ElementStyles);
     /**
      * @internal
      */
@@ -23,20 +20,18 @@ declare class ThemeStyleSheetBehavior implements Behavior {
 /**
  * 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... }`),
- *   null, // No style needed for Theme.dark style
- *   Theme.light // For the Theme.color style, re-use the previously set Theme.light style
+ *     // ...
+ * `.withBehaviors(
+ *     themeBehavior(Theme.light, css` ... `),
+ *     // Apply style for both dark and color theme
+ *     themeBehavior([Theme.dark, Theme.color], css` ... `)
  * )
  * ```
  */
-export declare const themeBehavior: (lightStyle: LightStyle, darkStyleOrAlias: DarkStyleOrAlias, colorStyleOrAlias: ColorStyleOrAlias) => ThemeStyleSheetBehavior;
+export declare const themeBehavior: (theme: Theme | Theme[], styles: ElementStyles) => ThemeStyleSheetBehavior;
 export {};