@ni/nimble-components 29.3.4 → 29.3.5

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

@@ -41,7 +41,6 @@ export const styles = css `
     .positioning-region {
         display: flex;
         position: relative;
-        box-sizing: border-box;
         height: calc(${iconSize} * 2);
     }
 

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

package/dist/esm/utilities/style/display.d.ts

@@ -1,6 +1,8 @@
 import { display as foundationDisplay } from '@microsoft/fast-foundation';
 /**
- * This utility will generate the appropriate display style, as well as a style rule
- * to hide the host element when its `hidden` attribute is set.
+ * Each element should use the display utility which will create styles to:
+ * - Set the `:host` display property
+ * - Respond to the `hidden` attribute set on `:host`
+ * - Configure `box-sizing` for `:host`, all elements in shadow root, and `::before` / `::after` pseudoelements
  */
 export declare const display: typeof foundationDisplay;

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

@@ -2,8 +2,10 @@ import {
 // eslint-disable-next-line no-restricted-imports
 display as foundationDisplay } from '@microsoft/fast-foundation';
 /**
- * This utility will generate the appropriate display style, as well as a style rule
- * to hide the host element when its `hidden` attribute is set.
+ * Each element should use the display utility which will create styles to:
+ * - Set the `:host` display property
+ * - Respond to the `hidden` attribute set on `:host`
+ * - Configure `box-sizing` for `:host`, all elements in shadow root, and `::before` / `::after` pseudoelements
  */
-export const display = (displayValue) => `${foundationDisplay(displayValue)}`;
+export const display = (displayValue) => `${foundationDisplay(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;
 //# sourceMappingURL=display.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"display.js","sourceRoot":"","sources":["../../../../src/utilities/style/display.ts"],"names":[],"mappings":"AAAA,OAAO;AAEH,iDAAiD;AACjD,OAAO,IAAI,iBAAiB,EAC/B,MAAM,4BAA4B,CAAC;AAEpC;;;GAGG;AACH,MAAM,CAAC,MAAM,OAAO,GAA6B,CAC7C,YAAqC,EACvC,EAAE,CAAC,GAAG,iBAAiB,CAAC,YAAY,CAAC,EAAE,CAAC","sourcesContent":["import {\n    type CSSDisplayPropertyValue,\n    // eslint-disable-next-line no-restricted-imports\n    display as foundationDisplay\n} from '@microsoft/fast-foundation';\n\n/**\n * This utility will generate the appropriate display style, as well as a style rule\n * to hide the host element when its `hidden` attribute is set.\n */\nexport const display: typeof foundationDisplay = (\n    displayValue: CSSDisplayPropertyValue\n) => `${foundationDisplay(displayValue)}`;\n"]}
+{"version":3,"file":"display.js","sourceRoot":"","sources":["../../../../src/utilities/style/display.ts"],"names":[],"mappings":"AAAA,OAAO;AAEH,iDAAiD;AACjD,OAAO,IAAI,iBAAiB,EAC/B,MAAM,4BAA4B,CAAC;AAEpC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAA6B,CAC7C,YAAqC,EACvC,EAAE,CAAC,GAAG,iBAAiB,CAAC,YAAY,CAAC,2HAA2H,CAAC","sourcesContent":["import {\n    type CSSDisplayPropertyValue,\n    // eslint-disable-next-line no-restricted-imports\n    display as foundationDisplay\n} from '@microsoft/fast-foundation';\n\n/**\n * Each element should use the display utility which will create styles to:\n * - Set the `:host` display property\n * - Respond to the `hidden` attribute set on `:host`\n * - Configure `box-sizing` for `:host`, all elements in shadow root, and `::before` / `::after` pseudoelements\n */\nexport const display: typeof foundationDisplay = (\n    displayValue: CSSDisplayPropertyValue\n) => `${foundationDisplay(displayValue)}:host{box-sizing:border-box;}*{box-sizing:border-box;}:host::before,:host::after,::before,::after{box-sizing:border-box;}`;\n"]}

package/package.json

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