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

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

@@ -1,9 +1,9 @@
-import { DirectionalStyleSheetBehavior } from '@microsoft/fast-components';
 import { css } from '@microsoft/fast-element';
 import { display, TreeItem } from '@microsoft/fast-foundation';
 import { focusVisible } from '../utilities/style/focus';
 import { contentFontColor, fontFamily, borderColorHover, fillColorSelected, contentFontSize, fillColorHover, fillColorSelectedHover, borderWidth, iconSize } from '../theme-provider/design-tokens';
 import { groupSelectedAttribute } from '../tree-view/types';
+import { DirectionalStyleSheetBehavior } from '../utilities/style/direction';
 export const styles = (context) => css `
         ${display('block')}
 
@@ -14,7 +14,7 @@ export const styles = (context) => css `
             color: ${contentFontColor};
             cursor: pointer;
             font-family: ${fontFamily};
-            --tree-item-nested-width: 0;
+            --ni-private-tree-item-nested-width: 0;
         }
 
         ${ /* this controls the side border */''}
@@ -57,7 +57,7 @@ export const styles = (context) => css `
         .positioning-region::before {
             content: '';
             display: block;
-            width: var(--tree-item-nested-width);
+            width: var(--ni-private-tree-item-nested-width);
             flex-shrink: 0;
         }
 
@@ -131,8 +131,10 @@ export const styles = (context) => css `
         }
 
         ::slotted(${context.tagFor(TreeItem)}) {
-            --tree-item-nested-width: 1em;
-            --expand-collapse-button-nested-width: calc(${iconSize} * -1);
+            --ni-private-tree-item-nested-width: 1em;
+            --ni-private-expand-collapse-button-nested-width: calc(
+                ${iconSize} * -1
+            );
         }
 
         ${
@@ -163,7 +165,7 @@ export const styles = (context) => css `
                     ${ /* ltr styles */''}
                     :host(.nested) .expand-collapse-button {
                         left: var(
-                            --expand-collapse-button-nested-width,
+                            --ni-private-expand-collapse-button-nested-width,
                             calc(${iconSize} * -1)
                         );
                     }
@@ -179,7 +181,7 @@ export const styles = (context) => css `
                     ${ /* rtl styles */''}
                     :host(.nested) .expand-collapse-button {
                         right: var(
-                            --expand-collapse-button-nested-width,
+                            --ni-private-expand-collapse-button-nested-width,
                             calc(${iconSize} * -1)
                         );
                     }

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tree-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAiB,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EACH,OAAO,EAEP,QAAQ,EAEX,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,gBAAgB,EAChB,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,QAAQ,EACX,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,MAAM,CAAC,MAAM,MAAM,GAGE,CAAC,OAAiC,EAAE,EAAE,CAAC,GAAG,CAAA;UACrD,OAAO,CAAC,OAAO,CAAC;;;;;;qBAML,gBAAgB;;2BAEV,UAAU;;;;UAI3B,CAAA,mCAAoC,EAAE;iBAC/B,sBAAsB;0BACb,gBAAgB;;;;;;0BAMhB,WAAW;2BACV,QAAQ;;;;;;;2BAOR,QAAQ;;;;0BAIT,cAAc;;;gBAGxB,YAAY;sCACU,WAAW,IAAI,gBAAgB;uBAC9C,WAAW,UAAU,gBAAgB;;;;;0BAKlC,iBAAiB;;;;0BAIjB,sBAAsB;;;;;;;;;;;;;;;;yBAgBvB,eAAe;;;;gBAIxB,YAAY;;;;;;mCAMO,QAAQ;;;;;;;;;;;;qBAYtB,QAAQ;sBACP,QAAQ;;;;;;;;;;;;;qBAaT,QAAQ;sBACP,QAAQ;;;;;;UAMpB;AACE,wEAAwE,CAAC,EAC7E;;qBAEa,QAAQ;;;UAGnB;AACE,uEAAuE,CAAC,EAC5E;;;;mCAI2B,QAAQ;iCACV,QAAQ;;;;qBAIpB,QAAQ;sBACP,QAAQ;;;oBAGV,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC;;0DAEc,QAAQ;;;UAGxD;AACE,qEAAqE,CAAC,EAC1E;;;;mCAI2B,QAAQ;;;;;cAK7B;AACE;;;;GAIG,CAAC,EACR;qCACyB,QAAQ;;;;;;KAMxC;IACL,kBAAkB;KACb,aAAa,CACV,IAAI,6BAA6B,CAC7B,GAAG,CAAA;sBACO,CAAA,gBAAiB,EAAE;;;;mCAIN,QAAQ;;;;;;;;;;;iBAW1B,EACL,GAAG,CAAA;sBACO,CAAA,gBAAiB,EAAE;;;;mCAIN,QAAQ;;;;;;;;;;;iBAW1B,CACR,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tree-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAiB,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EACH,OAAO,EAEP,QAAQ,EAEX,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,gBAAgB,EAChB,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,QAAQ,EACX,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,6BAA6B,EAAE,MAAM,8BAA8B,CAAC;AAE7E,MAAM,CAAC,MAAM,MAAM,GAGE,CAAC,OAAiC,EAAE,EAAE,CAAC,GAAG,CAAA;UACrD,OAAO,CAAC,OAAO,CAAC;;;;;;qBAML,gBAAgB;;2BAEV,UAAU;;;;UAI3B,CAAA,mCAAoC,EAAE;iBAC/B,sBAAsB;0BACb,gBAAgB;;;;;;0BAMhB,WAAW;2BACV,QAAQ;;;;;;;2BAOR,QAAQ;;;;0BAIT,cAAc;;;gBAGxB,YAAY;sCACU,WAAW,IAAI,gBAAgB;uBAC9C,WAAW,UAAU,gBAAgB;;;;;0BAKlC,iBAAiB;;;;0BAIjB,sBAAsB;;;;;;;;;;;;;;;;yBAgBvB,eAAe;;;;gBAIxB,YAAY;;;;;;mCAMO,QAAQ;;;;;;;;;;;;qBAYtB,QAAQ;sBACP,QAAQ;;;;;;;;;;;;;qBAaT,QAAQ;sBACP,QAAQ;;;;;;UAMpB;AACE,wEAAwE,CAAC,EAC7E;;qBAEa,QAAQ;;;UAGnB;AACE,uEAAuE,CAAC,EAC5E;;;;mCAI2B,QAAQ;iCACV,QAAQ;;;;qBAIpB,QAAQ;sBACP,QAAQ;;;oBAGV,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC;;;kBAG1B,QAAQ;;;;UAIhB;AACE,qEAAqE,CAAC,EAC1E;;;;mCAI2B,QAAQ;;;;;cAK7B;AACE;;;;GAIG,CAAC,EACR;qCACyB,QAAQ;;;;;;KAMxC;IACL,kBAAkB;KACb,aAAa,CACV,IAAI,6BAA6B,CAC7B,GAAG,CAAA;sBACO,CAAA,gBAAiB,EAAE;;;;mCAIN,QAAQ;;;;;;;;;;;iBAW1B,EACL,GAAG,CAAA;sBACO,CAAA,gBAAiB,EAAE;;;;mCAIN,QAAQ;;;;;;;;;;;iBAW1B,CACR,CACJ,CAAC"}

package/dist/esm/tree-view/index.d.ts

@@ -1,5 +1,11 @@
 import { TreeView as FoundationTreeView } from '@microsoft/fast-foundation';
-import { SelectionMode } from './types';
+import { TreeViewSelectionMode } from './types';
+export type { TreeView };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tree-view': TreeView;
+    }
+}
 /**
  * A function that returns a nimble-tree-view registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#treeViewTemplate}
@@ -10,7 +16,7 @@ import { SelectionMode } from './types';
  * Generates HTML Element: \<nimble-tree-view\>
  *
  */
-export declare class TreeView extends FoundationTreeView {
-    selectionMode: SelectionMode;
+declare class TreeView extends FoundationTreeView {
+    selectionMode: TreeViewSelectionMode;
     connectedCallback(): void;
 }

package/dist/esm/tree-view/index.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
 import { treeViewTemplate as template, TreeView as FoundationTreeView, DesignSystem } from '@microsoft/fast-foundation';
 import { styles } from './styles';
-import { SelectionMode } from './types';
+import { TreeViewSelectionMode } from './types';
 /**
  * A function that returns a nimble-tree-view registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#treeViewTemplate}
@@ -13,11 +13,11 @@ import { SelectionMode } from './types';
  * Generates HTML Element: \<nimble-tree-view\>
  *
  */
-export class TreeView extends FoundationTreeView {
+class TreeView extends FoundationTreeView {
     connectedCallback() {
         super.connectedCallback();
         if (!this.selectionMode) {
-            this.selectionMode = SelectionMode.All;
+            this.selectionMode = TreeViewSelectionMode.All;
         }
     }
 }
@@ -27,6 +27,7 @@ __decorate([
 const nimbleTreeView = TreeView.compose({
     baseName: 'tree-view',
     baseClass: FoundationTreeView,
+    // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
     template,
     styles
 });

package/dist/esm/tree-view/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,gBAAgB,IAAI,QAAQ,EAC5B,QAAQ,IAAI,kBAAkB,EAC9B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC;;;;;;;;;GASG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;IAIrC,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACrB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC,GAAG,CAAC;SAC1C;IACL,CAAC;CACJ;AARG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;+CACF;AAUxC,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,kBAAkB;IAC7B,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/tree-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,gBAAgB,IAAI,QAAQ,EAC5B,QAAQ,IAAI,kBAAkB,EAC9B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAUhD;;;;;;;;;GASG;AACH,MAAM,QAAS,SAAQ,kBAAkB;IAI9B,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACrB,IAAI,CAAC,aAAa,GAAG,qBAAqB,CAAC,GAAG,CAAC;SAClD;IACL,CAAC;CACJ;AARG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;+CACO;AAUjD,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/tree-view/types.d.ts

@@ -1,6 +1,7 @@
 export declare const pinnedSelectedAttribute = "pinned-selected";
 export declare const groupSelectedAttribute = "group-selected";
-export declare enum SelectionMode {
+export declare enum TreeViewSelectionMode {
     All = "all",
     LeavesOnly = "leaves-only"
 }
+export declare type TreeViewSelectionModeAttribute = `${TreeViewSelectionMode}`;

package/dist/esm/tree-view/types.js

@@ -1,8 +1,8 @@
 export const pinnedSelectedAttribute = 'pinned-selected';
 export const groupSelectedAttribute = 'group-selected';
-export var SelectionMode;
-(function (SelectionMode) {
-    SelectionMode["All"] = "all";
-    SelectionMode["LeavesOnly"] = "leaves-only";
-})(SelectionMode || (SelectionMode = {}));
+export var TreeViewSelectionMode;
+(function (TreeViewSelectionMode) {
+    TreeViewSelectionMode["All"] = "all";
+    TreeViewSelectionMode["LeavesOnly"] = "leaves-only";
+})(TreeViewSelectionMode || (TreeViewSelectionMode = {}));
 //# sourceMappingURL=types.js.map

package/dist/esm/tree-view/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/tree-view/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG,iBAAiB,CAAC;AACzD,MAAM,CAAC,MAAM,sBAAsB,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAN,IAAY,aAGX;AAHD,WAAY,aAAa;IACrB,4BAAW,CAAA;IACX,2CAA0B,CAAA;AAC9B,CAAC,EAHW,aAAa,KAAb,aAAa,QAGxB"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/tree-view/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG,iBAAiB,CAAC;AACzD,MAAM,CAAC,MAAM,sBAAsB,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAN,IAAY,qBAGX;AAHD,WAAY,qBAAqB;IAC7B,oCAAW,CAAA;IACX,mDAA0B,CAAA;AAC9B,CAAC,EAHW,qBAAqB,KAArB,qBAAqB,QAGhC"}

package/dist/esm/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/utilities/style/direction.js

@@ -0,0 +1,78 @@
+/* eslint-disable */
+// Sourced from: https://github.com/microsoft/fast/blob/a150068ee196e73fe7a4f7b538a38752e0e506ba/packages/web-components/fast-components/src/styles/direction.ts
+// Changes: Updated imports to reference nimble design tokens
+import { direction as directionDesignToken } from '../../theme-provider';
+/**
+ * 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 class DirectionalStyleSheetBehavior {
+    constructor(ltr, rtl) {
+        this.cache = new WeakMap();
+        this.ltr = ltr;
+        this.rtl = rtl;
+    }
+    /**
+     * @internal
+     */
+    bind(source) {
+        this.attach(source);
+    }
+    /**
+     * @internal
+     */
+    unbind(source) {
+        const cache = this.cache.get(source);
+        if (cache) {
+            directionDesignToken.unsubscribe(cache);
+        }
+    }
+    attach(source) {
+        const subscriber = this.cache.get(source) ||
+            new DirectionalStyleSheetBehaviorSubscription(this.ltr, this.rtl, source);
+        const value = directionDesignToken.getValueFor(source);
+        directionDesignToken.subscribe(subscriber);
+        subscriber.attach(value);
+        this.cache.set(source, subscriber);
+    }
+}
+/**
+ * Subscription for {@link DirectionalStyleSheetBehavior}
+ */
+class DirectionalStyleSheetBehaviorSubscription {
+    constructor(ltr, rtl, source) {
+        this.ltr = ltr;
+        this.rtl = rtl;
+        this.source = source;
+        this.attached = null;
+    }
+    handleChange({ target, token, }) {
+        this.attach(token.getValueFor(target));
+    }
+    attach(direction) {
+        if (this.attached !== this[direction]) {
+            if (this.attached !== null) {
+                this.source.$fastController.removeStyles(this.attached);
+            }
+            this.attached = this[direction];
+            if (this.attached !== null) {
+                this.source.$fastController.addStyles(this.attached);
+            }
+        }
+    }
+}
+//# sourceMappingURL=direction.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"direction.js","sourceRoot":"","sources":["../../../../src/utilities/style/direction.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,gKAAgK;AAChK,6DAA6D;AAU7D,OAAO,EAAE,SAAS,IAAI,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AACzE;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,OAAO,6BAA6B;IAQtC,YAAY,GAAyB,EAAE,GAAyB;QALxD,UAAK,GAGT,IAAI,OAAO,EAAE,CAAC;QAGd,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QACf,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;IACnB,CAAC;IAED;;OAEG;IACI,IAAI,CAAC,MAAiC;QACzC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACxB,CAAC;IAED;;OAEG;IACI,MAAM,CAAC,MAAiC;QAC3C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAErC,IAAI,KAAK,EAAE;YACP,oBAAoB,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SAC3C;IACL,CAAC;IAEO,MAAM,CAAC,MAAiC;QAC5C,MAAM,UAAU,GACZ,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC;YACtB,IAAI,yCAAyC,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;QAE9E,MAAM,KAAK,GAAG,oBAAoB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QACvD,oBAAoB,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;QAC3C,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAEzB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACvC,CAAC;CACJ;AAED;;GAEG;AACH,MAAM,yCAAyC;IAG3C,YACY,GAAyB,EACzB,GAAyB,EACzB,MAAiC;QAFjC,QAAG,GAAH,GAAG,CAAsB;QACzB,QAAG,GAAH,GAAG,CAAsB;QACzB,WAAM,GAAN,MAAM,CAA2B;QALrC,aAAQ,GAAyB,IAAI,CAAC;IAM3C,CAAC;IAEG,YAAY,CAAC,EAChB,MAAM,EACN,KAAK,GAC8C;QACnD,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;IAC3C,CAAC;IAEM,MAAM,CAAC,SAAoB;QAC9B,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,CAAC,EAAE;YACnC,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE;gBACxB,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;aAC3D;YACD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;YAChC,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE;gBACxB,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;aACxD;SACJ;IACL,CAAC;CACJ"}

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

@@ -1,7 +1,7 @@
 /**
  * This file is a workaround for: https://github.com/prettier/prettier/issues/11400
  */
-// eslint-disable-next-line
+// eslint-disable-next-line no-restricted-imports
 import { focusVisible as focusVisibleOriginal } from '@microsoft/fast-foundation';
 /**
  * The string representing the focus selector to be used. Value

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

@@ -1 +1 @@
-{"version":3,"file":"focus.js","sourceRoot":"","sources":["../../../../src/utilities/style/focus.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,2BAA2B;AAC3B,OAAO,EAAE,YAAY,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"focus.js","sourceRoot":"","sources":["../../../../src/utilities/style/focus.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,iDAAiD;AACjD,OAAO,EAAE,YAAY,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,oBAAoB,EAAE,CAAC"}

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

@@ -0,0 +1,4 @@
+/**
+ * Singleton utility to watch the prefers-reduced-motion media value
+ */
+export declare const prefersReducedMotionMediaQuery: MediaQueryList;

package/dist/esm/utilities/style/prefers-reduced-motion.js

@@ -0,0 +1,5 @@
+/**
+ * Singleton utility to watch the prefers-reduced-motion media value
+ */
+export const prefersReducedMotionMediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+//# sourceMappingURL=prefers-reduced-motion.js.map

package/dist/esm/utilities/style/prefers-reduced-motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prefers-reduced-motion.js","sourceRoot":"","sources":["../../../../src/utilities/style/prefers-reduced-motion.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAmB,MAAM,CAAC,UAAU,CAC3E,kCAAkC,CACrC,CAAC"}

package/dist/esm/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/utilities/style/theme.js

@@ -0,0 +1,116 @@
+/* eslint-disable max-classes-per-file */
+import { ElementStyles } from '@microsoft/fast-element';
+import { theme as themeToken } from '../../theme-provider';
+/**
+ * Subscription for {@link ThemeStyleSheetBehavior}
+ */
+class ThemeStyleSheetBehaviorSubscription {
+    constructor(themeStyles, source) {
+        this.themeStyles = themeStyles;
+        this.source = source;
+        this.attached = null;
+    }
+    handleChange({ target, token }) {
+        this.attach(token.getValueFor(target));
+    }
+    attach(theme) {
+        if (this.attached !== this.themeStyles[theme]) {
+            if (this.attached !== null) {
+                this.source.$fastController.removeStyles(this.attached);
+            }
+            this.attached = this.themeStyles[theme];
+            if (this.attached !== null) {
+                this.source.$fastController.addStyles(this.attached);
+            }
+        }
+    }
+}
+/**
+ * Behavior to conditionally apply theme-based stylesheets.
+ */
+class ThemeStyleSheetBehavior {
+    constructor(lightStyle, darkStyleOrAlias, colorStyleOrAlias, legacyBlueStyleOrAlias) {
+        this.cache = new WeakMap();
+        const light = lightStyle;
+        const dark = ThemeStyleSheetBehavior.resolveTheme(darkStyleOrAlias, {
+            light,
+            dark: null,
+            color: null,
+            'legacy-blue': null
+        });
+        const color = ThemeStyleSheetBehavior.resolveTheme(colorStyleOrAlias, {
+            light,
+            dark,
+            color: null,
+            'legacy-blue': null
+        });
+        const legacyBlue = ThemeStyleSheetBehavior.resolveTheme(legacyBlueStyleOrAlias, {
+            light,
+            dark,
+            color,
+            'legacy-blue': null
+        });
+        this.themeStyles = {
+            light,
+            dark,
+            color,
+            'legacy-blue': legacyBlue
+        };
+    }
+    static resolveTheme(value, currentThemeStyles) {
+        if (value instanceof ElementStyles || value === null) {
+            return value;
+        }
+        const currentStyle = currentThemeStyles[value];
+        if (currentStyle === null) {
+            throw new Error(`Tried to alias to theme '${value}' but the theme value is not set to a style.`);
+        }
+        return currentStyle;
+    }
+    /**
+     * @internal
+     */
+    bind(source) {
+        const subscriber = this.cache.get(source)
+            || new ThemeStyleSheetBehaviorSubscription(this.themeStyles, source);
+        const value = themeToken.getValueFor(source);
+        // Currently subscriber from cache may have gone through unbind
+        // but still be in cache so always resubscribe
+        // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
+        themeToken.subscribe(subscriber);
+        subscriber.attach(value);
+        this.cache.set(source, subscriber);
+    }
+    /**
+     * @internal
+     */
+    unbind(source) {
+        const subscriber = this.cache.get(source);
+        if (subscriber) {
+            themeToken.unsubscribe(subscriber);
+        }
+        // Currently does not evict subscriber from cache
+        // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
+    }
+}
+/**
+ * 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 const themeBehavior = (lightStyle, darkStyleOrAlias, colorStyleOrAlias, legacyBlueStyleOrAlias) => new ThemeStyleSheetBehavior(lightStyle, darkStyleOrAlias, colorStyleOrAlias, legacyBlueStyleOrAlias);
+//# sourceMappingURL=theme.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../../src/utilities/style/theme.ts"],"names":[],"mappings":"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"}

package/dist/fonts.scss

@@ -0,0 +1,3 @@
+// Nimble Components Fonts SCSS
+
+@import '~@ni/nimble-tokens/source/fonts';