@ni/nimble-components 7.2.1 → 7.3.0

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

@@ -4,198 +4,198 @@ import { focusVisible } from '../utilities/style/focus';
 import { bodyFontColor, bodyFontFamily, bodyFontSize, bodyFontWeight, borderHoverColor, fillSelectedColor, fillHoverColor, fillHoverSelectedColor, 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')}
+export const styles = (context, _definition) => css `
+            ${display('block')}
 
-        :host {
-            ${
+            :host {
+                ${
 /* don't set font-size here or else it overrides what we set on .items */ ''}
-            font-family: ${bodyFontFamily};
-            font-weight: ${bodyFontWeight};
-            contain: content;
-            position: relative;
-            outline: none;
-            color: ${bodyFontColor};
-            cursor: pointer;
-            --ni-private-tree-item-nested-width: 0;
-        }
-
-        ${ /* this controls the side border */''}
-        :host([${groupSelectedAttribute}])::after {
-            background: ${borderHoverColor};
-            border-radius: 0px;
-            content: '';
-            display: block;
-            position: absolute;
-            top: 0px;
-            width: calc(${borderWidth} * 2);
-            height: calc(${iconSize} * 2);
-        }
-
-        .positioning-region {
-            display: flex;
-            position: relative;
-            box-sizing: border-box;
-            height: calc(${iconSize} * 2);
-        }
-
-        .positioning-region:hover {
-            background: ${fillHoverColor};
-        }
-
-        :host(${focusVisible}) .positioning-region {
-            box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-            outline: ${borderWidth} solid ${borderHoverColor};
-            outline-offset: -2px;
-        }
-
-        :host([selected]) .positioning-region {
-            background: ${fillSelectedColor};
-        }
-
-        :host([selected]) .positioning-region:hover {
-            background: ${fillHoverSelectedColor};
-        }
-
-        .positioning-region::before {
-            content: '';
-            display: block;
-            width: var(--ni-private-tree-item-nested-width);
-            flex-shrink: 0;
-        }
-
-        .content-region {
-            display: inline-flex;
-            align-items: center;
-            white-space: nowrap;
-            width: 100%;
-            padding-left: 10px;
-            font: inherit;
-            font-size: ${bodyFontSize};
-            user-select: none;
-        }
-
-        :host(${focusVisible}) .content-region {
-            outline: none;
-        }
-
-        :host(.nested) .content-region {
-            position: relative;
-            margin-inline-start: ${iconSize};
-        }
-
-        :host([disabled]) .content-region {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-
-        .expand-collapse-button {
-            background: none;
-            border: none;
-            outline: none;
-            width: ${iconSize};
-            height: ${iconSize};
-            padding: 0px;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-            margin-left: 10px;
-        }
-
-        :host(.nested) .expand-collapse-button {
-            position: absolute;
-        }
-
-        .expand-collapse-button svg {
-            width: ${iconSize};
-            height: ${iconSize};
-            transition: transform 0.2s ease-in;
-            pointer-events: none;
-            fill: currentcolor;
-        }
-
-        ${
+                font-family: ${bodyFontFamily};
+                font-weight: ${bodyFontWeight};
+                contain: content;
+                position: relative;
+                outline: none;
+                color: ${bodyFontColor};
+                cursor: pointer;
+                --ni-private-tree-item-nested-width: 0;
+            }
+
+            ${ /* this controls the side border */''}
+            :host([${groupSelectedAttribute}])::after {
+                background: ${borderHoverColor};
+                border-radius: 0px;
+                content: '';
+                display: block;
+                position: absolute;
+                top: 0px;
+                width: calc(${borderWidth} * 2);
+                height: calc(${iconSize} * 2);
+            }
+
+            .positioning-region {
+                display: flex;
+                position: relative;
+                box-sizing: border-box;
+                height: calc(${iconSize} * 2);
+            }
+
+            .positioning-region:hover {
+                background: ${fillHoverColor};
+            }
+
+            :host(${focusVisible}) .positioning-region {
+                box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+                outline: ${borderWidth} solid ${borderHoverColor};
+                outline-offset: -2px;
+            }
+
+            :host([selected]) .positioning-region {
+                background: ${fillSelectedColor};
+            }
+
+            :host([selected]) .positioning-region:hover {
+                background: ${fillHoverSelectedColor};
+            }
+
+            .positioning-region::before {
+                content: '';
+                display: block;
+                width: var(--ni-private-tree-item-nested-width);
+                flex-shrink: 0;
+            }
+
+            .content-region {
+                display: inline-flex;
+                align-items: center;
+                white-space: nowrap;
+                width: 100%;
+                padding-left: 10px;
+                font: inherit;
+                font-size: ${bodyFontSize};
+                user-select: none;
+            }
+
+            :host(${focusVisible}) .content-region {
+                outline: none;
+            }
+
+            :host(.nested) .content-region {
+                position: relative;
+                margin-inline-start: ${iconSize};
+            }
+
+            :host([disabled]) .content-region {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+
+            .expand-collapse-button {
+                background: none;
+                border: none;
+                outline: none;
+                width: ${iconSize};
+                height: ${iconSize};
+                padding: 0px;
+                justify-content: center;
+                align-items: center;
+                cursor: pointer;
+                margin-left: 10px;
+            }
+
+            :host(.nested) .expand-collapse-button {
+                position: absolute;
+            }
+
+            .expand-collapse-button svg {
+                width: ${iconSize};
+                height: ${iconSize};
+                transition: transform 0.2s ease-in;
+                pointer-events: none;
+                fill: currentcolor;
+            }
+
+            ${
 /* this rule keeps children without an icon text aligned with parents */ ''}
-        span[part="start"] {
-            width: ${iconSize};
-        }
+            span[part="start"] {
+                width: ${iconSize};
+            }
 
-        ${
+            ${
 /* the start class is applied when the corresponding slots is filled */ ''}
-        .start {
-            display: flex;
-            fill: currentcolor;
-            margin-inline-start: ${iconSize};
-            margin-inline-end: ${iconSize};
-        }
-
-        slot[name='start']::slotted(*) {
-            width: ${iconSize};
-            height: ${iconSize};
-        }
-
-        ::slotted(${context.tagFor(TreeItem)}) {
-            --ni-private-tree-item-nested-width: 1em;
-            --ni-private-expand-collapse-button-nested-width: calc(
-                ${iconSize} * -1
-            );
-        }
-
-        ${
-/* the end class is applied when the corresponding slots is filled */ ''}
-        .end {
-            display: flex;
-            fill: currentcolor;
-            margin-inline-start: ${iconSize};
-        }
-
-        .items {
-            display: none;
+            .start {
+                display: flex;
+                fill: currentcolor;
+                margin-inline-start: ${iconSize};
+                margin-inline-end: ${iconSize};
+            }
+
+            slot[name='start']::slotted(*) {
+                width: ${iconSize};
+                height: ${iconSize};
+            }
+
+            ::slotted(${context.tagFor(TreeItem)}) {
+                --ni-private-tree-item-nested-width: 1em;
+                --ni-private-expand-collapse-button-nested-width: calc(
+                    ${iconSize} * -1
+                );
+            }
+
             ${
+/* the end class is applied when the corresponding slots is filled */ ''}
+            .end {
+                display: flex;
+                fill: currentcolor;
+                margin-inline-start: ${iconSize};
+            }
+
+            .items {
+                display: none;
+                ${
 /*
  * this controls the nested indentation (by affecting .positioning-region::before)
  * it must minimally contain arithmetic with an em and a px value
  * make it larger or shorter by changing the px value
  */ ''}
-            font-size: calc(1em + (${iconSize} * 2));
-        }
+                font-size: calc(1em + (${iconSize} * 2));
+            }
 
-        :host([expanded]) .items {
-            display: block;
-        }
-    `
+            :host([expanded]) .items {
+                display: block;
+            }
+        `
     // prettier-ignore
     .withBehaviors(new DirectionalStyleSheetBehavior(css `
-                    ${ /* ltr styles */''}
-                    :host(.nested) .expand-collapse-button {
-                        left: var(
-                            --ni-private-expand-collapse-button-nested-width,
-                            calc(${iconSize} * -1)
-                        );
-                    }
-
-                    .expand-collapse-button svg {
-                        transform: rotate(90deg);
-                    }
-
-                    :host([expanded]) .expand-collapse-button svg {
-                        transform: rotate(180deg);
-                    }
-                `, css `
-                    ${ /* rtl styles */''}
-                    :host(.nested) .expand-collapse-button {
-                        right: var(
-                            --ni-private-expand-collapse-button-nested-width,
-                            calc(${iconSize} * -1)
-                        );
-                    }
-
-                    .expand-collapse-button svg {
-                        transform: rotate(180deg);
-                    }
-
-                    :host([expanded]) .expand-collapse-button svg {
-                        transform: rotate(135deg);
-                    }
-                `));
+                        ${ /* ltr styles */''}
+                        :host(.nested) .expand-collapse-button {
+                            left: var(
+                                --ni-private-expand-collapse-button-nested-width,
+                                calc(${iconSize} * -1)
+                            );
+                        }
+
+                        .expand-collapse-button svg {
+                            transform: rotate(90deg);
+                        }
+
+                        :host([expanded]) .expand-collapse-button svg {
+                            transform: rotate(180deg);
+                        }
+                    `, css `
+                        ${ /* rtl styles */''}
+                        :host(.nested) .expand-collapse-button {
+                            right: var(
+                                --ni-private-expand-collapse-button-nested-width,
+                                calc(${iconSize} * -1)
+                            );
+                        }
+
+                        .expand-collapse-button svg {
+                            transform: rotate(180deg);
+                        }
+
+                        :host([expanded]) .expand-collapse-button svg {
+                            transform: rotate(135deg);
+                        }
+                    `));
 //# sourceMappingURL=styles.js.map

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,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,aAAa,EACb,cAAc,EACd,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,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;;;cAGZ;AACE,yEAAyE,CAAC,EAC9E;2BACe,cAAc;2BACd,cAAc;;;;qBAIpB,aAAa;;;;;UAKxB,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;;;;;;;;;;;;;;;;;yBAiBvB,YAAY;;;;gBAIrB,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"}
+{"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,aAAa,EACb,cAAc,EACd,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,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,GAA8D,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,CAAC,GAAG,CAAA;cAChG,OAAO,CAAC,OAAO,CAAC;;;kBAGZ;AACE,yEAAyE,CAAC,EAC9E;+BACe,cAAc;+BACd,cAAc;;;;yBAIpB,aAAa;;;;;cAKxB,CAAA,mCAAoC,EAAE;qBAC/B,sBAAsB;8BACb,gBAAgB;;;;;;8BAMhB,WAAW;+BACV,QAAQ;;;;;;;+BAOR,QAAQ;;;;8BAIT,cAAc;;;oBAGxB,YAAY;0CACU,WAAW,IAAI,gBAAgB;2BAC9C,WAAW,UAAU,gBAAgB;;;;;8BAKlC,iBAAiB;;;;8BAIjB,sBAAsB;;;;;;;;;;;;;;;;;6BAiBvB,YAAY;;;;oBAIrB,YAAY;;;;;;uCAMO,QAAQ;;;;;;;;;;;;yBAYtB,QAAQ;0BACP,QAAQ;;;;;;;;;;;;;yBAaT,QAAQ;0BACP,QAAQ;;;;;;cAMpB;AACE,wEAAwE,CAAC,EAC7E;;yBAEa,QAAQ;;;cAGnB;AACE,uEAAuE,CAAC,EAC5E;;;;uCAI2B,QAAQ;qCACV,QAAQ;;;;yBAIpB,QAAQ;0BACP,QAAQ;;;wBAGV,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC;;;sBAG1B,QAAQ;;;;cAIhB;AACE,qEAAqE,CAAC,EAC1E;;;;uCAI2B,QAAQ;;;;;kBAK7B;AACE;;;;GAIG,CAAC,EACR;yCACyB,QAAQ;;;;;;SAMxC;IACT,kBAAkB;KACb,aAAa,CACV,IAAI,6BAA6B,CAC7B,GAAG,CAAA;0BACW,CAAA,gBAAiB,EAAE;;;;uCAIN,QAAQ;;;;;;;;;;;qBAW1B,EACT,GAAG,CAAA;0BACW,CAAA,gBAAiB,EAAE;;;;uCAIN,QAAQ;;;;;;;;;;;qBAW1B,CACZ,CACJ,CAAC"}

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

@@ -1,6 +1,5 @@
 import { TreeView as FoundationTreeView } from '@microsoft/fast-foundation';
 import { TreeViewSelectionMode } from './types';
-export type { TreeView };
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-tree-view': TreeView;
@@ -16,6 +15,6 @@ declare global {
  * Generates HTML Element: \<nimble-tree-view\>
  *
  */
-declare class TreeView extends FoundationTreeView {
+export declare class TreeView extends FoundationTreeView {
     selectionMode: TreeViewSelectionMode;
 }

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

@@ -13,7 +13,7 @@ import { TreeViewSelectionMode } from './types';
  * Generates HTML Element: \<nimble-tree-view\>
  *
  */
-class TreeView extends FoundationTreeView {
+export class TreeView extends FoundationTreeView {
     constructor() {
         super(...arguments);
         this.selectionMode = TreeViewSelectionMode.All;
@@ -25,7 +25,6 @@ __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,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAUhD;;;;;;;;;GASG;AACH,MAAM,QAAS,SAAQ,kBAAkB;IAAzC;;QAEW,kBAAa,GAA0B,qBAAqB,CAAC,GAAG,CAAC;IAC5E,CAAC;CAAA;AADG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;+CACkC;AAG5E,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"}
+{"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;AAQhD;;;;;;;;;GASG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;IAAhD;;QAEW,kBAAa,GAA0B,qBAAqB,CAAC,GAAG,CAAC;IAC5E,CAAC;CAAA;AADG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;+CACkC;AAG5E,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "7.2.1",
+  "version": "7.3.0",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run generate-scss && npm run build-storybook",
@@ -46,8 +46,8 @@
   "homepage": "https://github.com/ni/nimble#readme",
   "dependencies": {
     "@microsoft/fast-animation": "^4.1.8",
-    "@microsoft/fast-element": "^1.7.0",
-    "@microsoft/fast-foundation": "^2.28.0 <2.29.0",
+    "@microsoft/fast-element": "^1.8.0",
+    "@microsoft/fast-foundation": "^2.37.1",
     "@microsoft/fast-web-utilities": "^5.1.0",
     "@ni/nimble-tokens": "^3.0.1",
     "hex-rgb": "^5.0.0"