@ni/nimble-components 11.15.0 → 12.0.0

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

@@ -1,199 +1,204 @@
 import { css } from '@microsoft/fast-element';
-import { display, TreeItem } from '@microsoft/fast-foundation';
+import { display } from '@microsoft/fast-foundation';
 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, _definition) => css `
-            ${display('block')}
+export const styles = 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([${groupSelectedAttribute}]) .positioning-region:hover {
-                background: ${fillHoverSelectedColor};
-            }
-
-            :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;
-                position: relative;
-                margin-inline-start: ${iconSize};
-            }
-
-            :host(${focusVisible}) .content-region {
-                outline: none;
-            }
-
-            :host([disabled]) .content-region {
-                opacity: 0.5;
-                cursor: not-allowed;
-            }
+        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([${groupSelectedAttribute}]) .positioning-region:hover {
+        background: ${fillHoverSelectedColor};
+    }
+
+    :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;
+        position: relative;
+        margin-inline-start: ${iconSize};
+    }
+
+    :host(${focusVisible}) .content-region {
+        outline: none;
+    }
+
+    :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;
+        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};
+    }
 
+    ${
+/* 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};
+    }
+
+    ${
+/*
+Cannot call DesignSystem.tagFor(TreeItem) as this string is evaluated
+before the registration of the element itself; the style is self-referencing.
+Instead styling against the role which is more general and likely a better approach.
+*/ ''}
+    ::slotted([role='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));
+    }
+
+    :host([expanded]) .items {
+        display: block;
+    }
+`.withBehaviors(new DirectionalStyleSheetBehavior(
+// ltr styles
+css `
             .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;
-                position: absolute;
+                left: var(
+                    --ni-private-expand-collapse-button-nested-width,
+                    calc(${iconSize} * -1)
+                );
             }
 
             .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};
-            }
-
-            ${
-/* the start class is applied when the corresponding slots is filled */ ''}
-            .start {
-                display: flex;
-                fill: currentcolor;
-                margin-inline-start: ${iconSize};
-                margin-inline-end: ${iconSize};
+                transform: rotate(90deg);
             }
 
-            slot[name='start']::slotted(*) {
-                width: ${iconSize};
-                height: ${iconSize};
+            :host([expanded]) .expand-collapse-button svg {
+                transform: rotate(180deg);
             }
-
-            ::slotted(${context.tagFor(TreeItem)}) {
-                --ni-private-tree-item-nested-width: 1em;
-                --ni-private-expand-collapse-button-nested-width: calc(
-                    ${iconSize} * -1
+        `, 
+// rtl styles
+css `
+            .expand-collapse-button {
+                right: var(
+                    --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));
+            .expand-collapse-button svg {
+                transform: rotate(180deg);
             }
 
-            :host([expanded]) .items {
-                display: block;
+            :host([expanded]) .expand-collapse-button svg {
+                transform: rotate(135deg);
             }
-        `
-    // prettier-ignore
-    .withBehaviors(new DirectionalStyleSheetBehavior(css `
-                        ${ /* ltr styles */''}
-                        .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 */''}
-                        .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,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;;;qBAGvB,sBAAsB;8BACb,sBAAsB;;;oBAGhC,YAAY;0CACU,WAAW,IAAI,gBAAgB;2BAC9C,WAAW,UAAU,gBAAgB;;;;;8BAKlC,iBAAiB;;;;8BAIjB,sBAAsB;;;;;;;;;;;;;;;;;6BAiBvB,YAAY;;;uCAGF,QAAQ;;;oBAG3B,YAAY;;;;;;;;;;;;;yBAaP,QAAQ;0BACP,QAAQ;;;;;;;;;;yBAUT,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"}
+{"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,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,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;;;+BAGF,QAAQ;;;YAG3B,YAAY;;;;;;;;;;;;;iBAaP,QAAQ;kBACP,QAAQ;;;;;;;;;;iBAUT,QAAQ;kBACP,QAAQ;;;;;;MAMpB;AACE,wEAAwE,CAAC,EAC7E;;iBAEa,QAAQ;;;MAGnB;AACE,uEAAuE,CAAC,EAC5E;;;;+BAI2B,QAAQ;6BACV,QAAQ;;;;iBAIpB,QAAQ;kBACP,QAAQ;;;MAGpB;AACE;;;;EAIF,CAAC,EACH;;;;cAIU,QAAQ;;;;MAIhB,CAAA,qEAAsE,EAAE;;;;+BAI/C,QAAQ;;;;;UAK7B;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": "11.15.0",
+  "version": "12.0.0",
   "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",