@ni/nimble-components 29.0.0 → 29.1.1

package/dist/esm/tooltip/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import { BannerFail100DarkUi, Black15, Black85, Black91, ForestGreen, Information100DarkUi, Information100LightUi, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../utilities/style/display';
 import { tooltipCaptionFont, tooltipCaptionFontColor, borderWidth, mediumPadding, smallPadding, elevation2BoxShadow } from '../theme-provider/design-tokens';
 import { Theme } from '../theme-provider/types';
 import { hexToRgbaCssColor } from '../utilities/style/colors';

package/dist/esm/tooltip/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tooltip/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,mBAAmB,EACnB,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,oBAAoB,EACpB,qBAAqB,EACrB,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,kBAAkB,EAClB,uBAAuB,EACvB,WAAW,EACX,aAAa,EACb,YAAY,EACZ,mBAAmB,EACtB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,kBAAkB;iBACjB,uBAAuB;;6CAEK,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;iDAC3B,OAAO;;;;;;;sBAOlC,mBAAmB;;kBAEvB,WAAW;;;wBAGL,aAAa;yBACZ,aAAa;uBACf,YAAY;;;;;;;;;;;;;;;;;;;CAmBlC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;qDAE0C,mBAAmB;yDACf,KAAK;;;;qDAIT,qBAAqB;yDACjB,KAAK;;SAErD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;qDAE0C,iBAAiB,CAClD,OAAO,EACP,GAAG,CACN;yDACwC,OAAO;;;;qDAIX,oBAAoB;;;;qDAIpB,mBAAmB;;SAE/D,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,WAAW;;;;qDAIM,iBAAiB,CAClD,KAAK,EACL,GAAG,CACN;yDACwC,iBAAiB,CACtD,KAAK,EACL,IAAI,CACP;;;;qDAIoC,KAAK;;;;qDAIL,KAAK;;;;;;SAMjD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    BannerFail100DarkUi,\n    Black15,\n    Black85,\n    Black91,\n    ForestGreen,\n    Information100DarkUi,\n    Information100LightUi,\n    White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport {\n    tooltipCaptionFont,\n    tooltipCaptionFontColor,\n    borderWidth,\n    mediumPadding,\n    smallPadding,\n    elevation2BoxShadow\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { themeBehavior } from '../utilities/style/theme';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        font: ${tooltipCaptionFont};\n        color: ${tooltipCaptionFontColor};\n        text-align: left;\n        --ni-private-tooltip-border-color: ${hexToRgbaCssColor(Black91, 0.3)};\n        --ni-private-tooltip-background-color: ${Black15};\n    }\n\n    .tooltip {\n        box-sizing: border-box;\n        flex-shrink: 0;\n        max-width: 440px;\n        box-shadow: ${elevation2BoxShadow};\n        display: inline-flex;\n        border: ${borderWidth} solid var(--ni-private-tooltip-border-color);\n        background-color: var(--ni-private-tooltip-background-color);\n        padding-bottom: 6px;\n        padding-left: ${mediumPadding};\n        padding-right: ${mediumPadding};\n        padding-top: ${smallPadding};\n    }\n\n    .status-icon {\n        display: none;\n        width: 14px;\n        height: 14px;\n        padding-right: 8px;\n    }\n\n    :host([severity='error'][icon-visible]) [severity='error'] {\n        display: flex;\n        flex: 0 0 auto;\n    }\n\n    :host([severity='information'][icon-visible]) [severity='information'] {\n        display: flex;\n        flex: 0 0 auto;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.light,\n        css`\n            :host([severity='error']) {\n                --ni-private-tooltip-border-color: ${BannerFail100DarkUi};\n                --ni-private-tooltip-background-color: ${White};\n            }\n\n            :host([severity='information']) {\n                --ni-private-tooltip-border-color: ${Information100LightUi};\n                --ni-private-tooltip-background-color: ${White};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host {\n                --ni-private-tooltip-border-color: ${hexToRgbaCssColor(\n                    Black15,\n                    0.3\n                )};\n                --ni-private-tooltip-background-color: ${Black85};\n            }\n\n            :host([severity='information']) {\n                --ni-private-tooltip-border-color: ${Information100DarkUi};\n            }\n\n            :host([severity='error']) {\n                --ni-private-tooltip-border-color: ${BannerFail100DarkUi};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .anchored-region {\n                background-color: ${ForestGreen};\n            }\n\n            :host {\n                --ni-private-tooltip-border-color: ${hexToRgbaCssColor(\n                    White,\n                    0.3\n                )};\n                --ni-private-tooltip-background-color: ${hexToRgbaCssColor(\n                    White,\n                    0.15\n                )};\n            }\n\n            :host([severity='error']) {\n                --ni-private-tooltip-border-color: ${White};\n            }\n\n            :host([severity='information']) {\n                --ni-private-tooltip-border-color: ${White};\n            }\n\n            .status-icon {\n                opacity: 0.6;\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tooltip/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,mBAAmB,EACnB,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,oBAAoB,EACpB,qBAAqB,EACrB,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,kBAAkB,EAClB,uBAAuB,EACvB,WAAW,EACX,aAAa,EACb,YAAY,EACZ,mBAAmB,EACtB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,kBAAkB;iBACjB,uBAAuB;;6CAEK,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;iDAC3B,OAAO;;;;;;;sBAOlC,mBAAmB;;kBAEvB,WAAW;;;wBAGL,aAAa;yBACZ,aAAa;uBACf,YAAY;;;;;;;;;;;;;;;;;;;CAmBlC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;qDAE0C,mBAAmB;yDACf,KAAK;;;;qDAIT,qBAAqB;yDACjB,KAAK;;SAErD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;qDAE0C,iBAAiB,CAClD,OAAO,EACP,GAAG,CACN;yDACwC,OAAO;;;;qDAIX,oBAAoB;;;;qDAIpB,mBAAmB;;SAE/D,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,WAAW;;;;qDAIM,iBAAiB,CAClD,KAAK,EACL,GAAG,CACN;yDACwC,iBAAiB,CACtD,KAAK,EACL,IAAI,CACP;;;;qDAIoC,KAAK;;;;qDAIL,KAAK;;;;;;SAMjD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    BannerFail100DarkUi,\n    Black15,\n    Black85,\n    Black91,\n    ForestGreen,\n    Information100DarkUi,\n    Information100LightUi,\n    White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\nimport {\n    tooltipCaptionFont,\n    tooltipCaptionFontColor,\n    borderWidth,\n    mediumPadding,\n    smallPadding,\n    elevation2BoxShadow\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { themeBehavior } from '../utilities/style/theme';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        font: ${tooltipCaptionFont};\n        color: ${tooltipCaptionFontColor};\n        text-align: left;\n        --ni-private-tooltip-border-color: ${hexToRgbaCssColor(Black91, 0.3)};\n        --ni-private-tooltip-background-color: ${Black15};\n    }\n\n    .tooltip {\n        box-sizing: border-box;\n        flex-shrink: 0;\n        max-width: 440px;\n        box-shadow: ${elevation2BoxShadow};\n        display: inline-flex;\n        border: ${borderWidth} solid var(--ni-private-tooltip-border-color);\n        background-color: var(--ni-private-tooltip-background-color);\n        padding-bottom: 6px;\n        padding-left: ${mediumPadding};\n        padding-right: ${mediumPadding};\n        padding-top: ${smallPadding};\n    }\n\n    .status-icon {\n        display: none;\n        width: 14px;\n        height: 14px;\n        padding-right: 8px;\n    }\n\n    :host([severity='error'][icon-visible]) [severity='error'] {\n        display: flex;\n        flex: 0 0 auto;\n    }\n\n    :host([severity='information'][icon-visible]) [severity='information'] {\n        display: flex;\n        flex: 0 0 auto;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.light,\n        css`\n            :host([severity='error']) {\n                --ni-private-tooltip-border-color: ${BannerFail100DarkUi};\n                --ni-private-tooltip-background-color: ${White};\n            }\n\n            :host([severity='information']) {\n                --ni-private-tooltip-border-color: ${Information100LightUi};\n                --ni-private-tooltip-background-color: ${White};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host {\n                --ni-private-tooltip-border-color: ${hexToRgbaCssColor(\n                    Black15,\n                    0.3\n                )};\n                --ni-private-tooltip-background-color: ${Black85};\n            }\n\n            :host([severity='information']) {\n                --ni-private-tooltip-border-color: ${Information100DarkUi};\n            }\n\n            :host([severity='error']) {\n                --ni-private-tooltip-border-color: ${BannerFail100DarkUi};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .anchored-region {\n                background-color: ${ForestGreen};\n            }\n\n            :host {\n                --ni-private-tooltip-border-color: ${hexToRgbaCssColor(\n                    White,\n                    0.3\n                )};\n                --ni-private-tooltip-background-color: ${hexToRgbaCssColor(\n                    White,\n                    0.15\n                )};\n            }\n\n            :host([severity='error']) {\n                --ni-private-tooltip-border-color: ${White};\n            }\n\n            :host([severity='information']) {\n                --ni-private-tooltip-border-color: ${White};\n            }\n\n            .status-icon {\n                opacity: 0.6;\n            }\n        `\n    )\n);\n"]}

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

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import { focusVisible } from '../utilities/style/focus';
 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';

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 '@microsoft/fast-foundation';\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;;;;;;;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"]}

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

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utilities/style/display';
 import { focusVisible } from '../utilities/style/focus';
 export const styles = css `
     ${display('flex')}

package/dist/esm/tree-view/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tree-view/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;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;YAQT,YAAY;;;CAGvB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        flex-direction: column;\n        align-items: stretch;\n        min-width: fit-content;\n        font-size: 0;\n    }\n    :host(${focusVisible}) {\n        outline: none;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tree-view/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;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;YAQT,YAAY;;;CAGvB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        flex-direction: column;\n        align-items: stretch;\n        min-width: fit-content;\n        font-size: 0;\n    }\n    :host(${focusVisible}) {\n        outline: none;\n    }\n`;\n"]}

package/dist/esm/unit/base/styles.d.ts

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

package/dist/esm/unit/base/styles.js

@@ -0,0 +1,6 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '../../utilities/style/display';
+export const styles = css `
+    ${display('none')}
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/unit/base/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/unit/base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;CACpB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    ${display('none')}\n`;\n"]}

package/dist/esm/unit/byte/index.js

@@ -5,6 +5,7 @@ import { template } from '../base/template';
 import { byte1024UnitScale } from '../../utilities/unit-format/unit-scale/byte-1024-unit-scale';
 import { byteUnitScale } from '../../utilities/unit-format/unit-scale/byte-unit-scale';
 import { Unit } from '../base/unit';
+import { styles } from '../base/styles';
 /**
  * Element that provides a unit scale for conversion of bytes
  */
@@ -29,7 +30,8 @@ __decorate([
 ], UnitByte.prototype, "binary", void 0);
 const nimbleUnitByte = UnitByte.compose({
     baseName: 'unit-byte',
-    template
+    template,
+    styles
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());
 export const unitByteTag = 'nimble-unit-byte';

package/dist/esm/unit/byte/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/unit/byte/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6DAA6D,CAAC;AAChG,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAQpC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,IAAI;IAQ9B;QACI,KAAK,EAAE,CAAC;QARZ;;;WAGG;QAEI,WAAM,GAAG,KAAK,CAAC;QAIlB,IAAI,CAAC,iBAAiB,GAAG,aAAa,CAAC;IAC3C,CAAC;IAEO,aAAa;QACjB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,MAAM;YAChC,CAAC,CAAC,iBAAiB;YACnB,CAAC,CAAC,aAAa,CAAC;IACxB,CAAC;CACJ;AAZU;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;wCACJ;AAc1B,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,QAAQ;CACX,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../base/template';\nimport { byte1024UnitScale } from '../../utilities/unit-format/unit-scale/byte-1024-unit-scale';\nimport { byteUnitScale } from '../../utilities/unit-format/unit-scale/byte-unit-scale';\nimport { Unit } from '../base/unit';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-unit-byte': UnitByte;\n    }\n}\n\n/**\n * Element that provides a unit scale for conversion of bytes\n */\nexport class UnitByte extends Unit {\n    /**\n     * Use binary (base 1024 scale with binary prefixes) instead of\n     * the default of decimal (base 1000 scale with metric prefixes)\n     */\n    @attr({ mode: 'boolean' })\n    public binary = false;\n\n    public constructor() {\n        super();\n        this.resolvedUnitScale = byteUnitScale;\n    }\n\n    private binaryChanged(): void {\n        this.resolvedUnitScale = this.binary\n            ? byte1024UnitScale\n            : byteUnitScale;\n    }\n}\n\nconst nimbleUnitByte = UnitByte.compose({\n    baseName: 'unit-byte',\n    template\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());\nexport const unitByteTag = 'nimble-unit-byte';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/unit/byte/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6DAA6D,CAAC;AAChG,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,IAAI;IAQ9B;QACI,KAAK,EAAE,CAAC;QARZ;;;WAGG;QAEI,WAAM,GAAG,KAAK,CAAC;QAIlB,IAAI,CAAC,iBAAiB,GAAG,aAAa,CAAC;IAC3C,CAAC;IAEO,aAAa;QACjB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,MAAM;YAChC,CAAC,CAAC,iBAAiB;YACnB,CAAC,CAAC,aAAa,CAAC;IACxB,CAAC;CACJ;AAZU;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;wCACJ;AAc1B,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../base/template';\nimport { byte1024UnitScale } from '../../utilities/unit-format/unit-scale/byte-1024-unit-scale';\nimport { byteUnitScale } from '../../utilities/unit-format/unit-scale/byte-unit-scale';\nimport { Unit } from '../base/unit';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-unit-byte': UnitByte;\n    }\n}\n\n/**\n * Element that provides a unit scale for conversion of bytes\n */\nexport class UnitByte extends Unit {\n    /**\n     * Use binary (base 1024 scale with binary prefixes) instead of\n     * the default of decimal (base 1000 scale with metric prefixes)\n     */\n    @attr({ mode: 'boolean' })\n    public binary = false;\n\n    public constructor() {\n        super();\n        this.resolvedUnitScale = byteUnitScale;\n    }\n\n    private binaryChanged(): void {\n        this.resolvedUnitScale = this.binary\n            ? byte1024UnitScale\n            : byteUnitScale;\n    }\n}\n\nconst nimbleUnitByte = UnitByte.compose({\n    baseName: 'unit-byte',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());\nexport const unitByteTag = 'nimble-unit-byte';\n"]}

package/dist/esm/unit/celsius/index.js

@@ -2,6 +2,7 @@ import { DesignSystem } from '@microsoft/fast-foundation';
 import { template } from '../base/template';
 import { Unit } from '../base/unit';
 import { celsiusUnitScale } from '../../utilities/unit-format/unit-scale/celsius-unit-scale';
+import { styles } from '../base/styles';
 /**
  * Element representing degrees Celsius unit
  */
@@ -13,7 +14,8 @@ export class UnitCelsius extends Unit {
 }
 const nimbleUnitCelsius = UnitCelsius.compose({
     baseName: 'unit-celsius',
-    template
+    template,
+    styles
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitCelsius());
 export const unitCelsiusTag = 'nimble-unit-celsius';

package/dist/esm/unit/celsius/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/unit/celsius/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2DAA2D,CAAC;AAQ7F;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,IAAI;IACjC;QACI,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,CAAC;IAC9C,CAAC;CACJ;AAED,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAC;IAC1C,QAAQ,EAAE,cAAc;IACxB,QAAQ;CACX,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAC9E,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../base/template';\nimport { Unit } from '../base/unit';\nimport { celsiusUnitScale } from '../../utilities/unit-format/unit-scale/celsius-unit-scale';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-unit-celsius': UnitCelsius;\n    }\n}\n\n/**\n * Element representing degrees Celsius unit\n */\nexport class UnitCelsius extends Unit {\n    public constructor() {\n        super();\n        this.resolvedUnitScale = celsiusUnitScale;\n    }\n}\n\nconst nimbleUnitCelsius = UnitCelsius.compose({\n    baseName: 'unit-celsius',\n    template\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitCelsius());\nexport const unitCelsiusTag = 'nimble-unit-celsius';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/unit/celsius/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2DAA2D,CAAC;AAC7F,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,IAAI;IACjC;QACI,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,CAAC;IAC9C,CAAC;CACJ;AAED,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAC;IAC1C,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAC9E,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../base/template';\nimport { Unit } from '../base/unit';\nimport { celsiusUnitScale } from '../../utilities/unit-format/unit-scale/celsius-unit-scale';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-unit-celsius': UnitCelsius;\n    }\n}\n\n/**\n * Element representing degrees Celsius unit\n */\nexport class UnitCelsius extends Unit {\n    public constructor() {\n        super();\n        this.resolvedUnitScale = celsiusUnitScale;\n    }\n}\n\nconst nimbleUnitCelsius = UnitCelsius.compose({\n    baseName: 'unit-celsius',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitCelsius());\nexport const unitCelsiusTag = 'nimble-unit-celsius';\n"]}

package/dist/esm/unit/fahrenheit/index.js

@@ -2,6 +2,7 @@ import { DesignSystem } from '@microsoft/fast-foundation';
 import { template } from '../base/template';
 import { Unit } from '../base/unit';
 import { fahrenheitUnitScale } from '../../utilities/unit-format/unit-scale/fahrenheit-unit-scale';
+import { styles } from '../base/styles';
 /**
  * Element representing degrees Fahrenheit unit
  */
@@ -13,7 +14,8 @@ export class UnitFahrenheit extends Unit {
 }
 const nimbleUnitFahrenheit = UnitFahrenheit.compose({
     baseName: 'unit-fahrenheit',
-    template
+    template,
+    styles
 });
 DesignSystem.getOrCreate()
     .withPrefix('nimble')

package/dist/esm/unit/fahrenheit/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/unit/fahrenheit/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,8DAA8D,CAAC;AAQnG;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,IAAI;IACpC;QACI,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,iBAAiB,GAAG,mBAAmB,CAAC;IACjD,CAAC;CACJ;AAED,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,CAAC;IAChD,QAAQ,EAAE,iBAAiB;IAC3B,QAAQ;CACX,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;AACtC,MAAM,CAAC,MAAM,iBAAiB,GAAG,wBAAwB,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../base/template';\nimport { Unit } from '../base/unit';\nimport { fahrenheitUnitScale } from '../../utilities/unit-format/unit-scale/fahrenheit-unit-scale';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-unit-fahrenheit': UnitFahrenheit;\n    }\n}\n\n/**\n * Element representing degrees Fahrenheit unit\n */\nexport class UnitFahrenheit extends Unit {\n    public constructor() {\n        super();\n        this.resolvedUnitScale = fahrenheitUnitScale;\n    }\n}\n\nconst nimbleUnitFahrenheit = UnitFahrenheit.compose({\n    baseName: 'unit-fahrenheit',\n    template\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleUnitFahrenheit());\nexport const unitFahrenheitTag = 'nimble-unit-fahrenheit';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/unit/fahrenheit/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,8DAA8D,CAAC;AACnG,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,IAAI;IACpC;QACI,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,iBAAiB,GAAG,mBAAmB,CAAC;IACjD,CAAC;CACJ;AAED,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,CAAC;IAChD,QAAQ,EAAE,iBAAiB;IAC3B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;AACtC,MAAM,CAAC,MAAM,iBAAiB,GAAG,wBAAwB,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../base/template';\nimport { Unit } from '../base/unit';\nimport { fahrenheitUnitScale } from '../../utilities/unit-format/unit-scale/fahrenheit-unit-scale';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-unit-fahrenheit': UnitFahrenheit;\n    }\n}\n\n/**\n * Element representing degrees Fahrenheit unit\n */\nexport class UnitFahrenheit extends Unit {\n    public constructor() {\n        super();\n        this.resolvedUnitScale = fahrenheitUnitScale;\n    }\n}\n\nconst nimbleUnitFahrenheit = UnitFahrenheit.compose({\n    baseName: 'unit-fahrenheit',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('nimble')\n    .register(nimbleUnitFahrenheit());\nexport const unitFahrenheitTag = 'nimble-unit-fahrenheit';\n"]}

package/dist/esm/unit/volt/index.js

@@ -2,6 +2,7 @@ import { DesignSystem } from '@microsoft/fast-foundation';
 import { template } from '../base/template';
 import { Unit } from '../base/unit';
 import { voltUnitScale } from '../../utilities/unit-format/unit-scale/volt-unit-scale';
+import { styles } from '../base/styles';
 /**
  * Element representing units for volts
  */
@@ -13,7 +14,8 @@ export class UnitVolt extends Unit {
 }
 const nimbleUnitVolt = UnitVolt.compose({
     baseName: 'unit-volt',
-    template
+    template,
+    styles
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());
 export const unitVoltTag = 'nimble-unit-volt';

package/dist/esm/unit/volt/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/unit/volt/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AAQvF;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,IAAI;IAC9B;QACI,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,iBAAiB,GAAG,aAAa,CAAC;IAC3C,CAAC;CACJ;AAED,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,QAAQ;CACX,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../base/template';\nimport { Unit } from '../base/unit';\nimport { voltUnitScale } from '../../utilities/unit-format/unit-scale/volt-unit-scale';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-unit-volt': UnitVolt;\n    }\n}\n\n/**\n * Element representing units for volts\n */\nexport class UnitVolt extends Unit {\n    public constructor() {\n        super();\n        this.resolvedUnitScale = voltUnitScale;\n    }\n}\n\nconst nimbleUnitVolt = UnitVolt.compose({\n    baseName: 'unit-volt',\n    template\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());\nexport const unitVoltTag = 'nimble-unit-volt';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/unit/volt/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,IAAI;IAC9B;QACI,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,iBAAiB,GAAG,aAAa,CAAC;IAC3C,CAAC;CACJ;AAED,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../base/template';\nimport { Unit } from '../base/unit';\nimport { voltUnitScale } from '../../utilities/unit-format/unit-scale/volt-unit-scale';\nimport { styles } from '../base/styles';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'nimble-unit-volt': UnitVolt;\n    }\n}\n\n/**\n * Element representing units for volts\n */\nexport class UnitVolt extends Unit {\n    public constructor() {\n        super();\n        this.resolvedUnitScale = voltUnitScale;\n    }\n}\n\nconst nimbleUnitVolt = UnitVolt.compose({\n    baseName: 'unit-volt',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());\nexport const unitVoltTag = 'nimble-unit-volt';\n"]}

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

@@ -0,0 +1,6 @@
+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.
+ */
+export declare const display: typeof foundationDisplay;

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

@@ -0,0 +1,9 @@
+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.
+ */
+export const display = (displayValue) => `${foundationDisplay(displayValue)}`;
+//# sourceMappingURL=display.js.map

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

@@ -0,0 +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"]}

package/dist/esm/wafer-map/styles.js

@@ -1,9 +1,11 @@
 import { css } from '@microsoft/fast-element';
 import { DigitalGreenLight } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { borderColor, borderWidth } from '../theme-provider/design-tokens';
+import { display } from '../utilities/style/display';
 export const styles = css `
+    ${display('inline-block')}
+
     :host {
-        display: inline-block;
         width: 500px;
         height: 500px;
     }

package/dist/esm/wafer-map/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/wafer-map/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE3E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA2DD,WAAW;kBACjB,WAAW;;;;;;;;;;;;;;yBAcJ,iBAAiB;;;;;;;;;;;;;;CAczC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { DigitalGreenLight } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { borderColor, borderWidth } from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    :host {\n        display: inline-block;\n        width: 500px;\n        height: 500px;\n    }\n\n    .main-wafer {\n        display: inline-block;\n        position: absolute;\n    }\n\n    .worker-wafer {\n        display: inline-block;\n        position: absolute;\n    }\n\n    .wafer-map-container {\n        width: 100%;\n        height: 100%;\n        position: relative;\n        display: inline-block;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .svg-root {\n        width: 100%;\n        height: 100%;\n        position: absolute;\n    }\n\n    .notch {\n        transform-origin: center center;\n    }\n\n    .notch.top {\n        transform: rotate(-90deg);\n    }\n\n    .notch.right {\n        transform: rotate(0deg);\n    }\n\n    .notch.left {\n        transform: rotate(180deg);\n    }\n\n    .notch.bottom {\n        transform: rotate(90deg);\n    }\n\n    .circle-base {\n        fill: white;\n    }\n\n    .circle-drawing-path {\n        shape-rendering: 'crispEdges';\n        vector-effect: non-scaling-stroke;\n        stroke-width: ${borderWidth};\n        stroke: ${borderColor};\n    }\n\n    .hover-layer {\n        position: absolute;\n        pointer-events: none;\n        width: 100%;\n        height: 100%;\n    }\n\n    .hover-rect {\n        fill: transparent;\n        stroke: white;\n        outline-style: solid;\n        outline-color: ${DigitalGreenLight};\n    }\n\n    .hover-rect.show {\n        opacity: 1;\n        stroke-width: 2px;\n        outline-width: 2px;\n    }\n\n    .hover-rect.hide {\n        opacity: 0;\n        stroke-width: 0px;\n        outline-width: 0px;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/wafer-map/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA2DL,WAAW;kBACjB,WAAW;;;;;;;;;;;;;;yBAcJ,iBAAiB;;;;;;;;;;;;;;CAczC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { DigitalGreenLight } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { borderColor, borderWidth } from '../theme-provider/design-tokens';\nimport { display } from '../utilities/style/display';\n\nexport const styles = css`\n    ${display('inline-block')}\n\n    :host {\n        width: 500px;\n        height: 500px;\n    }\n\n    .main-wafer {\n        display: inline-block;\n        position: absolute;\n    }\n\n    .worker-wafer {\n        display: inline-block;\n        position: absolute;\n    }\n\n    .wafer-map-container {\n        width: 100%;\n        height: 100%;\n        position: relative;\n        display: inline-block;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .svg-root {\n        width: 100%;\n        height: 100%;\n        position: absolute;\n    }\n\n    .notch {\n        transform-origin: center center;\n    }\n\n    .notch.top {\n        transform: rotate(-90deg);\n    }\n\n    .notch.right {\n        transform: rotate(0deg);\n    }\n\n    .notch.left {\n        transform: rotate(180deg);\n    }\n\n    .notch.bottom {\n        transform: rotate(90deg);\n    }\n\n    .circle-base {\n        fill: white;\n    }\n\n    .circle-drawing-path {\n        shape-rendering: 'crispEdges';\n        vector-effect: non-scaling-stroke;\n        stroke-width: ${borderWidth};\n        stroke: ${borderColor};\n    }\n\n    .hover-layer {\n        position: absolute;\n        pointer-events: none;\n        width: 100%;\n        height: 100%;\n    }\n\n    .hover-rect {\n        fill: transparent;\n        stroke: white;\n        outline-style: solid;\n        outline-color: ${DigitalGreenLight};\n    }\n\n    .hover-rect.show {\n        opacity: 1;\n        stroke-width: 2px;\n        outline-width: 2px;\n    }\n\n    .hover-rect.hide {\n        opacity: 0;\n        stroke-width: 0px;\n        outline-width: 0px;\n    }\n`;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "29.0.0",
+  "version": "29.1.1",
   "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",