@ni/nimble-components 1.0.0-beta.98 → 1.1.1

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

@@ -0,0 +1,43 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { DesignSystem, Switch as FoundationSwitch } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+import { ButtonAppearance } from '../patterns/button/types';
+/**
+ * A nimble-styled toggle button control.
+ */
+class ToggleButton extends FoundationSwitch {
+    constructor() {
+        super(...arguments);
+        /**
+         * Specify as 'true' to hide the text content of the button. The button will
+         * become square, and the text content will be used as the label of the button
+         * for accessibility purposes.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: content-hidden
+         */
+        this.contentHidden = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.appearance) {
+            this.appearance = ButtonAppearance.Outline;
+        }
+    }
+}
+__decorate([
+    attr
+], ToggleButton.prototype, "appearance", void 0);
+__decorate([
+    attr({ attribute: 'content-hidden', mode: 'boolean' })
+], ToggleButton.prototype, "contentHidden", void 0);
+const nimbleToggleButton = ToggleButton.compose({
+    baseName: 'toggle-button',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToggleButton());
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/toggle-button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAE7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAU5D;;GAEG;AACH,MAAM,YAAa,SAAQ,gBAAgB;IAA3C;;QAWI;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;IAUjC,CAAC;IANU,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,IAAI,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC;SAC9C;IACL,CAAC;CACJ;AAtBG;IADC,IAAI;gDACgC;AAYrC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mDAC1B;AAYjC,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,CAAgB;IAC3D,QAAQ,EAAE,eAAe;IACzB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC,CAAC"}

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

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

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

@@ -0,0 +1,31 @@
+import { css } from '@microsoft/fast-element';
+import { focusVisible } from '../utilities/style/focus';
+import { fillColorSelected } from '../theme-provider/design-tokens';
+import { styles as buttonStyles } from '../patterns/button/styles';
+export const styles = css `
+    ${buttonStyles}
+
+    .control[aria-pressed='true'] {
+        background-color: ${fillColorSelected};
+        border-color: ${fillColorSelected};
+    }
+
+    .control[aria-pressed='true']:hover {
+        background-color: ${fillColorSelected};
+    }
+
+    .control[aria-pressed='true']${focusVisible} {
+        background-color: ${fillColorSelected};
+    }
+
+    .control[aria-pressed='true'][disabled] {
+        background-color: ${fillColorSelected};
+        border-color: ${fillColorSelected};
+    }
+
+    .control[aria-pressed='true'][disabled]:hover {
+        background-color: ${fillColorSelected};
+        border-color: ${fillColorSelected};
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/toggle-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEnE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,YAAY;;;4BAGU,iBAAiB;wBACrB,iBAAiB;;;;4BAIb,iBAAiB;;;mCAGV,YAAY;4BACnB,iBAAiB;;;;4BAIjB,iBAAiB;wBACrB,iBAAiB;;;;4BAIb,iBAAiB;wBACrB,iBAAiB;;CAExC,CAAC"}

package/dist/esm/toggle-button/template.d.ts

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

package/dist/esm/toggle-button/template.js

@@ -0,0 +1,25 @@
+import { html, ref } from '@microsoft/fast-element';
+export const template = html `
+    <div
+        role="button"
+        part="control"
+        aria-pressed="${(x) => x.checked}"
+        aria-disabled="${(x) => x.disabled}"
+        aria-readonly="${(x) => x.readOnly}"
+        aria-labelledby="nimble-toggle-button-content"
+        tabindex="${(x) => (x.disabled ? null : 0)}"
+        @keypress="${(x, c) => x.keypressHandler(c.event)}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+        class="control ${(x) => (x.checked ? 'checked' : '')}"
+        ?disabled="${x => x.disabled}"
+        ${ref('control')}
+    >
+        <span part="start" class="start">
+            <slot name="start"></slot>
+        </span>
+        <span class="content" part="content" id="nimble-toggle-button-content">
+            <slot></slot>
+        </span>
+    </div>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/toggle-button/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/toggle-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAc;;;;wBAIlB,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO;yBAC7B,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;yBAC/B,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;;oBAEpC,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;qBAC3C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;kBACxD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;yBACxC,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;qBACrD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;UAC1B,GAAG,CAAC,SAAS,CAAC;;;;;;;;;CASvB,CAAC"}

package/dist/esm/toggle-button/types.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Types of toggle button appearance.
+ * @public
+ */
+export type { ButtonAppearanceAttribute } from '../patterns/button/types';
+export { ButtonAppearance } from '../patterns/button/types';

package/dist/esm/toggle-button/types.js

@@ -0,0 +1,2 @@
+export { ButtonAppearance } from '../patterns/button/types';
+//# sourceMappingURL=types.js.map

package/dist/esm/toggle-button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/toggle-button/types.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC"}

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

@@ -1,4 +1,10 @@
 import { TreeItem as FoundationTreeItem } from '@microsoft/fast-foundation';
+export type { TreeItem };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tree-item': TreeItem;
+    }
+}
 /**
  * A function that returns a nimble-tree-item registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#treeItemTemplate}
@@ -9,7 +15,7 @@ import { TreeItem as FoundationTreeItem } from '@microsoft/fast-foundation';
  * Generates HTML Element: \<nimble-tree-item\>
  *
  */
-export declare class TreeItem extends FoundationTreeItem {
+declare class TreeItem extends FoundationTreeItem {
     private treeView;
     constructor();
     connectedCallback(): void;

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

@@ -1,6 +1,6 @@
 import { treeItemTemplate as template, TreeItem as FoundationTreeItem, DesignSystem } from '@microsoft/fast-foundation';
 import { controlsArrowExpanderUp16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
-import { groupSelectedAttribute, SelectionMode } from '../tree-view/types';
+import { groupSelectedAttribute, TreeViewSelectionMode } from '../tree-view/types';
 import { styles } from './styles';
 /**
  * A function that returns a nimble-tree-item registration for configuring the component with a DesignSystem.
@@ -12,9 +12,10 @@ import { styles } from './styles';
  * Generates HTML Element: \<nimble-tree-item\>
  *
  */
-export class TreeItem extends FoundationTreeItem {
+class TreeItem extends FoundationTreeItem {
     constructor() {
         super();
+        this.treeView = null;
         this.handleClickOverride = (event) => {
             if (event.composedPath().includes(this.expandCollapseButton)) {
                 // just have base class handle click event for glyph
@@ -26,32 +27,30 @@ export class TreeItem extends FoundationTreeItem {
                 event.stopImmediatePropagation();
                 return;
             }
-            const leavesOnly = this.treeView?.selectionMode === SelectionMode.LeavesOnly;
+            const leavesOnly = this.treeView?.selectionMode === TreeViewSelectionMode.LeavesOnly;
             const hasChildren = this.hasChildTreeItems();
             if ((leavesOnly && !hasChildren) || !leavesOnly) {
                 // if either a leaf tree item, or in a mode that supports select on groups,
                 // process click as a select
-                this.setGroupSelectionOnRootParentTreeItem(treeItem);
-                if (this.selected) {
-                    // if already selected, prevent base-class from issuing selected-change event
-                    event.stopImmediatePropagation();
+                if (!this.selected) {
+                    this.selected = true;
+                    this.$emit('selected-change', this);
                 }
             }
             else {
                 // implicit hasChildren && leavesOnly, so only allow expand/collapse, not select
                 this.expanded = !this.expanded;
                 this.$emit('expanded-change', this);
-                // don't allow base class to process click event, as all we want to happen
-                // here is toggling 'expanded', and to issue the expanded-change event
-                event.stopImmediatePropagation();
             }
+            // don't allow base class to process click event
+            event.stopImmediatePropagation();
         };
         // This prevents the toggling of selected state when a TreeItem is clicked multiple times,
         // which is what the FAST TreeItem allows
         this.handleSelectedChange = (event) => {
             // only process selection
-            if (event.target === this) {
-                this.selected = true;
+            if (event.target === this && this.selected) {
+                this.setGroupSelectionOnRootParentTreeItem(this);
             }
         };
         this.addEventListener('click', this.handleClickOverride);
@@ -108,7 +107,9 @@ export class TreeItem extends FoundationTreeItem {
 const nimbleTreeItem = TreeItem.compose({
     baseName: 'tree-item',
     baseClass: FoundationTreeItem,
+    // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
     template,
+    // @ts-expect-error FAST styles have incorrect type, see: https://github.com/microsoft/fast/issues/5047
     styles,
     expandCollapseGlyph: controlsArrowExpanderUp16X16.data
 });

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

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

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/appearance.d.ts

@@ -0,0 +1,12 @@
+import type { Behavior, ElementStyles } from '@microsoft/fast-element';
+import type { ButtonAppearance } from '../../patterns/button/types';
+/**
+ * Behavior that will conditionally apply a stylesheet based on the element's
+ * appearance property
+ *
+ * @param value - The value of the appearance property
+ * @param styles - The styles to be applied when condition matches
+ *
+ * @public
+ */
+export declare function appearanceBehavior(value: ButtonAppearance, styles: ElementStyles): Behavior;

package/dist/esm/{button/behaviors.js → utilities/style/appearance.js}

@@ -11,4 +11,4 @@ import { PropertyStyleSheetBehavior } from '@microsoft/fast-foundation';
 export function appearanceBehavior(value, styles) {
     return new PropertyStyleSheetBehavior('appearance', value, styles);
 }
-//# sourceMappingURL=behaviors.js.map
+//# sourceMappingURL=appearance.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"appearance.js","sourceRoot":"","sources":["../../../../src/utilities/style/appearance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAIxE;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAC9B,KAAuB,EACvB,MAAqB;IAErB,OAAO,IAAI,0BAA0B,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AACvE,CAAC"}

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 {};