@ni/nimble-components 20.17.5 → 20.17.6

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

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { bodyFontFamily, bodyFontWeight, bodyFontColor, borderHoverColor, borderWidth, iconSize, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, bodyFontSize } from '../theme-provider/design-tokens';
+import { bodyFontFamily, bodyFontWeight, bodyFontColor, borderHoverColor, borderWidth, iconSize, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, bodyFontSize, bodyDisabledFontColor, iconColor } from '../theme-provider/design-tokens';
 import { focusVisible } from '../utilities/style/focus';
 import { userSelectNone } from '../utilities/style/user-select';
 export const styles = css `
@@ -19,10 +19,15 @@ export const styles = css `
         --ni-private-tree-item-nested-width: 0;
     }
 
+    :host([disabled]) {
+        color: ${bodyDisabledFontColor};
+        cursor: default;
+    }
+
     .control {
         display: flex;
         text-decoration: none;
-        color: ${bodyFontColor};
+        color: inherit;
     }
 
     .control${focusVisible} {
@@ -31,10 +36,6 @@ export const styles = css `
         outline-offset: -2px;
     }
 
-    :host([disabled]) .control {
-        cursor: not-allowed;
-    }
-
     .positioning-region {
         display: flex;
         position: relative;
@@ -47,6 +48,10 @@ export const styles = css `
         background: ${fillHoverColor};
     }
 
+    :host([disabled]) .positioning-region:hover {
+        background: transparent;
+    }
+
     :host([selected]) .positioning-region {
         background: ${fillSelectedColor};
     }
@@ -75,11 +80,6 @@ export const styles = css `
         margin-inline-start: ${iconSize};
     }
 
-    :host([disabled]) .content-region {
-        opacity: 0.5;
-        cursor: not-allowed;
-    }
-
     ${
 /* this rule keeps children without an icon text aligned with parents */ ''}
     [part="start"] {
@@ -89,12 +89,12 @@ export const styles = css `
     ${ /* the start class is applied when the corresponding slot is filled */''}
     .start {
         display: flex;
-        fill: currentcolor;
         margin-inline-start: ${iconSize};
         margin-inline-end: ${iconSize};
     }
 
     slot[name='start']::slotted(*) {
+        ${iconColor.cssCustomProperty}: currentcolor;
         width: ${iconSize};
         height: ${iconSize};
     }

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-tree-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,cAAc,EACd,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;UAGZ;AACE,yEAAyE,CAAC,EAC9E;uBACe,cAAc;uBACd,cAAc;;;;iBAIpB,aAAa;;;;;;;;iBAQb,aAAa;;;cAGhB,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;uBAYjC,QAAQ;;;;;sBAKT,cAAc;;;;sBAId,iBAAiB;;;;sBAIjB,sBAAsB;;;;;;;;;;;;;;;;;qBAiBvB,YAAY;UACvB,cAAc;;+BAEO,QAAQ;;;;;;;;MAQjC;AACE,wEAAwE,CAAC,EAC7E;;iBAEa,QAAQ;;;MAGnB,CAAA,sEAAuE,EAAE;;;;+BAIhD,QAAQ;6BACV,QAAQ;;;;iBAIpB,QAAQ;kBACP,QAAQ;;;;;;CAMzB,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-tree-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,cAAc,EACd,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,YAAY,EACZ,qBAAqB,EACrB,SAAS,EACZ,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;UAGZ;AACE,yEAAyE,CAAC,EAC9E;uBACe,cAAc;uBACd,cAAc;;;;iBAIpB,aAAa;;;;;;iBAMb,qBAAqB;;;;;;;;;;cAUxB,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;uBAQjC,QAAQ;;;;;sBAKT,cAAc;;;;;;;;sBAQd,iBAAiB;;;;sBAIjB,sBAAsB;;;;;;;;;;;;;;;;;qBAiBvB,YAAY;UACvB,cAAc;;+BAEO,QAAQ;;;MAGjC;AACE,wEAAwE,CAAC,EAC7E;;iBAEa,QAAQ;;;MAGnB,CAAA,sEAAuE,EAAE;;;+BAGhD,QAAQ;6BACV,QAAQ;;;;UAI3B,SAAS,CAAC,iBAAiB;iBACpB,QAAQ;kBACP,QAAQ;;;;;;CAMzB,CAAC"}

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

@@ -1,7 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { focusVisible } from '../utilities/style/focus';
-import { bodyFontColor, bodyFontFamily, bodyFontSize, bodyFontWeight, borderHoverColor, fillSelectedColor, fillHoverColor, fillHoverSelectedColor, borderWidth, iconSize, mediumDelay } from '../theme-provider/design-tokens';
+import { bodyFontColor, bodyFontFamily, bodyFontSize, bodyFontWeight, borderHoverColor, fillSelectedColor, fillHoverColor, fillHoverSelectedColor, borderWidth, iconSize, mediumDelay, bodyDisabledFontColor, iconColor } from '../theme-provider/design-tokens';
 import { groupSelectedAttribute } from '../tree-view/types';
 import { DirectionalStyleSheetBehavior } from '../utilities/style/direction';
 import { userSelectNone } from '../utilities/style/user-select';
@@ -21,6 +21,11 @@ export const styles = css `
         --ni-private-tree-item-nested-width: 0;
     }
 
+    :host([disabled]) {
+        color: ${bodyDisabledFontColor};
+        cursor: default;
+    }
+
     ${ /* this controls the side border */''}
     :host([${groupSelectedAttribute}])::after {
         background: ${borderHoverColor};
@@ -62,6 +67,10 @@ export const styles = css `
         background: ${fillHoverSelectedColor};
     }
 
+    :host([disabled]) .positioning-region:hover {
+        background-color: transparent;
+    }
+
     .positioning-region::before {
         content: '';
         display: block;
@@ -86,11 +95,6 @@ export const styles = css `
         outline: none;
     }
 
-    :host([disabled]) .content-region {
-        opacity: 0.5;
-        cursor: not-allowed;
-    }
-
     .expand-collapse-button {
         background: none;
         border: none;
@@ -100,7 +104,6 @@ export const styles = css `
         padding: 0px;
         justify-content: center;
         align-items: center;
-        cursor: pointer;
         margin-left: 10px;
         position: absolute;
     }
@@ -123,12 +126,12 @@ export const styles = css `
 /* 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(*) {
+        ${iconColor.cssCustomProperty}: currentcolor;
         width: ${iconSize};
         height: ${iconSize};
     }

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,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,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,EACR,WAAW,EACd,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,6BAA6B,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;UAGZ;AACE,yEAAyE,CAAC,EAC9E;uBACe,cAAc;uBACd,cAAc;;;;iBAIpB,aAAa;;;;;MAKxB,CAAA,mCAAoC,EAAE;aAC/B,sBAAsB;sBACb,gBAAgB;;;;;;sBAMhB,WAAW;uBACV,QAAQ;;;;;;;uBAOR,QAAQ;;;;sBAIT,cAAc;;;aAGvB,sBAAsB;sBACb,sBAAsB;;;YAGhC,YAAY;kCACU,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;sBAKlC,iBAAiB;;;;sBAIjB,sBAAsB;;;;;;;;;;;;;;;;;qBAiBvB,YAAY;UACvB,cAAc;;+BAEO,QAAQ;;;YAG3B,YAAY;;;;;;;;;;;;;iBAaP,QAAQ;kBACP,QAAQ;;;;;;;;;;iBAUT,QAAQ;kBACP,QAAQ;gCACM,WAAW;;;;;MAKrC;AACE,wEAAwE,CAAC,EAC7E;;iBAEa,QAAQ;;;MAGnB;AACE,uEAAuE,CAAC,EAC5E;;;;+BAI2B,QAAQ;6BACV,QAAQ;;;;iBAIpB,QAAQ;kBACP,QAAQ;;;;;;cAMZ,QAAQ;;;;;;;;;;UAUZ;AACE;;;;GAIG,CAAC,EACR;iCACyB,QAAQ;;;;;;CAMxC,CAAC,aAAa,CACX,IAAI,6BAA6B;AAC7B,aAAa;AACb,GAAG,CAAA;;;;2BAIgB,QAAQ;;;;;;;;;;;SAW1B;AACD,aAAa;AACb,GAAG,CAAA;;;;2BAIgB,QAAQ;;;;;;;;;;;SAW1B,CACJ,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tree-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,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,EACR,WAAW,EACX,qBAAqB,EACrB,SAAS,EACZ,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,6BAA6B,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;UAGZ;AACE,yEAAyE,CAAC,EAC9E;uBACe,cAAc;uBACd,cAAc;;;;iBAIpB,aAAa;;;;;;iBAMb,qBAAqB;;;;MAIhC,CAAA,mCAAoC,EAAE;aAC/B,sBAAsB;sBACb,gBAAgB;;;;;;sBAMhB,WAAW;uBACV,QAAQ;;;;;;;uBAOR,QAAQ;;;;sBAIT,cAAc;;;aAGvB,sBAAsB;sBACb,sBAAsB;;;YAGhC,YAAY;kCACU,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;sBAKlC,iBAAiB;;;;sBAIjB,sBAAsB;;;;;;;;;;;;;;;;;;;;;qBAqBvB,YAAY;UACvB,cAAc;;+BAEO,QAAQ;;;YAG3B,YAAY;;;;;;;;iBAQP,QAAQ;kBACP,QAAQ;;;;;;;;;iBAST,QAAQ;kBACP,QAAQ;gCACM,WAAW;;;;;MAKrC;AACE,wEAAwE,CAAC,EAC7E;;iBAEa,QAAQ;;;MAGnB;AACE,uEAAuE,CAAC,EAC5E;;;+BAG2B,QAAQ;6BACV,QAAQ;;;;UAI3B,SAAS,CAAC,iBAAiB;iBACpB,QAAQ;kBACP,QAAQ;;;;;;cAMZ,QAAQ;;;;;;;;;;UAUZ;AACE;;;;GAIG,CAAC,EACR;iCACyB,QAAQ;;;;;;CAMxC,CAAC,aAAa,CACX,IAAI,6BAA6B;AAC7B,aAAa;AACb,GAAG,CAAA;;;;2BAIgB,QAAQ;;;;;;;;;;;SAW1B;AACD,aAAa;AACb,GAAG,CAAA;;;;2BAIgB,QAAQ;;;;;;;;;;;SAW1B,CACJ,CACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "20.17.5",
+  "version": "20.17.6",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",