@ni/nimble-components 29.0.0 → 29.1.1

package/dist/esm/switch/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import { Black15, Black7, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../utilities/style/display';
 import { bodyFont, borderHoverColor, borderWidth, buttonLabelDisabledFontColor, buttonLabelFontColor, controlHeight, controlLabelDisabledFontColor, controlLabelFont, controlLabelFontColor, fillHoverColor, smallDelay } from '../theme-provider/design-tokens';
 import { Theme } from '../theme-provider/types';
 import { hexToRgbaCssColor } from '../utilities/style/colors';

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,4BAA4B,EAC5B,oBAAoB,EACpB,aAAa,EACb,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,EACd,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;gBAIZ,QAAQ;iBACP,oBAAoB;;;;;;cAMvB,aAAa;;;;;;iBAMV,4BAA4B;;;;iBAI5B,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;;;;;;;;;4BAsBlB,cAAc;;;uBAGnB,WAAW;;;;;;;YAOtB,YAAY;wBACA,gBAAgB;;;;;gCAKR,UAAU;;;;;;;;;;;;;;;;;;;;;;;kBAuBxB,WAAW;;;;;uBAKN,WAAW,eAAe,gBAAgB;;;;;;;kBAO/C,WAAW;;;;YAIjB,YAAY;kBACN,WAAW,UAAU,gBAAgB;;;;;;;;;8BASzB,UAAU;;;;;;;;;;;;;;;;;;;;;;;CAuBvC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;iEAEsD,iBAAiB,CAC9D,OAAO,EACP,IAAI,CACP;kEACiD,KAAK;2EACI,iBAAiB,CACxE,KAAK,EACL,GAAG,CACN;8DAC6C,OAAO;uEACE,iBAAiB,CACpE,OAAO,EACP,GAAG,CACN;;SAER,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;iEAEsD,iBAAiB,CAC9D,OAAO,EACP,IAAI,CACP;kEACiD,iBAAiB,CAC/D,OAAO,EACP,GAAG,CACN;2EAC0D,iBAAiB,CACxE,OAAO,EACP,GAAG,CACN;8DAC6C,MAAM;uEACG,iBAAiB,CACpE,MAAM,EACN,GAAG,CACN;;SAER,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;iEAEsD,iBAAiB,CAC9D,KAAK,EACL,IAAI,CACP;kEACiD,iBAAiB,CAC/D,KAAK,EACL,GAAG,CACN;2EAC0D,iBAAiB,CACxE,KAAK,EACL,GAAG,CACN;8DAC6C,KAAK;uEACI,iBAAiB,CACpE,KAAK,EACL,GAAG,CACN;;SAER,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    Black15,\n    Black7,\n    Black91,\n    White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport {\n    bodyFont,\n    borderHoverColor,\n    borderWidth,\n    buttonLabelDisabledFontColor,\n    buttonLabelFontColor,\n    controlHeight,\n    controlLabelDisabledFontColor,\n    controlLabelFont,\n    controlLabelFontColor,\n    fillHoverColor,\n    smallDelay\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        outline: none;\n        font: ${bodyFont};\n        color: ${buttonLabelFontColor};\n        flex-direction: column;\n        cursor: pointer;\n        --ni-private-switch-height: 24px;\n        --ni-private-switch-indicator-size: 16px;\n        padding-bottom: calc(\n            ${controlHeight} - var(--ni-private-switch-height)\n        );\n    }\n\n    :host([disabled]) {\n        cursor: default;\n        color: ${buttonLabelDisabledFontColor};\n    }\n\n    .label {\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .label__hidden {\n        display: none;\n        visibility: hidden;\n    }\n\n    .switch-container {\n        display: flex;\n        align-items: center;\n    }\n\n    slot[name='unchecked-message']::slotted(*) {\n        margin-inline-end: 8px;\n    }\n\n    .switch {\n        display: flex;\n        height: var(--ni-private-switch-height);\n        width: calc(var(--ni-private-switch-height) * 2);\n        box-sizing: border-box;\n        background-color: ${fillHoverColor};\n        border-radius: calc(var(--ni-private-switch-height) / 2);\n        align-items: center;\n        border: calc(${borderWidth} * 2) solid transparent;\n    }\n\n    :host([disabled]) .switch {\n        background-color: var(--ni-private-switch-background-disabled-color);\n    }\n\n    :host(${focusVisible}) .switch {\n        border-color: ${borderHoverColor};\n    }\n\n    .checked-indicator-spacer {\n        flex-grow: 0;\n        transition: flex-grow ${smallDelay} ease-in-out;\n    }\n\n    :host([aria-checked='true']) .checked-indicator-spacer {\n        flex-grow: 1;\n    }\n\n    .checked-indicator {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        background-color: var(--ni-private-switch-indicator-background-color);\n        box-sizing: border-box;\n        width: var(--ni-private-switch-indicator-size);\n        height: var(--ni-private-switch-indicator-size);\n        border-radius: calc(var(--ni-private-switch-indicator-size) / 2);\n        margin: calc(\n            calc(\n                    var(--ni-private-switch-height) - var(\n                            --ni-private-switch-indicator-size\n                        )\n                ) / 2\n        );\n        border: ${borderWidth} solid\n            var(--ni-private-switch-indicator-border-color);\n    }\n\n    :host(:hover) .checked-indicator {\n        border: calc(${borderWidth} * 2) solid ${borderHoverColor};\n    }\n\n    :host([disabled]) .checked-indicator {\n        background-color: var(\n            --ni-private-switch-indicator-background-disabled-color\n        );\n        border: ${borderWidth} solid\n            var(--ni-private-switch-indicator-border-disabled-color);\n    }\n\n    :host(${focusVisible}) .checked-indicator {\n        border: ${borderWidth} solid ${borderHoverColor};\n    }\n\n    .checked-indicator-inner {\n        width: calc(var(--ni-private-switch-indicator-size) / 2);\n        height: calc(var(--ni-private-switch-indicator-size) / 2);\n        border-radius: calc(var(--ni-private-switch-indicator-size) / 4);\n        background-color: var(--ni-private-switch-indicator-border-color);\n        opacity: 0;\n        transition: opacity ${smallDelay} ease-in-out;\n    }\n\n    :host([disabled]) .checked-indicator-inner {\n        background-color: var(\n            --ni-private-switch-indicator-border-disabled-color\n        );\n    }\n\n    :host([aria-checked='true']) .checked-indicator-inner {\n        opacity: 1;\n    }\n\n    slot[name='checked-message']::slotted(*) {\n        margin-inline-start: 8px;\n    }\n\n    @media (prefers-reduced-motion) {\n        .checked-indicator-inner,\n        .checked-indicator-spacer {\n            transition-duration: 0s;\n        }\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.light,\n        css`\n            :host {\n                --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.07\n                )};\n                --ni-private-switch-indicator-background-color: ${White};\n                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n                    White,\n                    0.1\n                )};\n                --ni-private-switch-indicator-border-color: ${Black91};\n                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.3\n                )};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host {\n                --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n                    Black15,\n                    0.07\n                )};\n                --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.3\n                )};\n                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.1\n                )};\n                --ni-private-switch-indicator-border-color: ${Black7};\n                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n                    Black7,\n                    0.3\n                )};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            :host {\n                --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n                    White,\n                    0.07\n                )};\n                --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(\n                    White,\n                    0.1\n                )};\n                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n                    White,\n                    0.1\n                )};\n                --ni-private-switch-indicator-border-color: ${White};\n                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n                    White,\n                    0.3\n                )};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,4BAA4B,EAC5B,oBAAoB,EACpB,aAAa,EACb,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,EACd,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;gBAIZ,QAAQ;iBACP,oBAAoB;;;;;;cAMvB,aAAa;;;;;;iBAMV,4BAA4B;;;;iBAI5B,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;;;;;;;;;4BAsBlB,cAAc;;;uBAGnB,WAAW;;;;;;;YAOtB,YAAY;wBACA,gBAAgB;;;;;gCAKR,UAAU;;;;;;;;;;;;;;;;;;;;;;;kBAuBxB,WAAW;;;;;uBAKN,WAAW,eAAe,gBAAgB;;;;;;;kBAO/C,WAAW;;;;YAIjB,YAAY;kBACN,WAAW,UAAU,gBAAgB;;;;;;;;;8BASzB,UAAU;;;;;;;;;;;;;;;;;;;;;;;CAuBvC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;iEAEsD,iBAAiB,CAC9D,OAAO,EACP,IAAI,CACP;kEACiD,KAAK;2EACI,iBAAiB,CACxE,KAAK,EACL,GAAG,CACN;8DAC6C,OAAO;uEACE,iBAAiB,CACpE,OAAO,EACP,GAAG,CACN;;SAER,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;iEAEsD,iBAAiB,CAC9D,OAAO,EACP,IAAI,CACP;kEACiD,iBAAiB,CAC/D,OAAO,EACP,GAAG,CACN;2EAC0D,iBAAiB,CACxE,OAAO,EACP,GAAG,CACN;8DAC6C,MAAM;uEACG,iBAAiB,CACpE,MAAM,EACN,GAAG,CACN;;SAER,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;iEAEsD,iBAAiB,CAC9D,KAAK,EACL,IAAI,CACP;kEACiD,iBAAiB,CAC/D,KAAK,EACL,GAAG,CACN;2EAC0D,iBAAiB,CACxE,KAAK,EACL,GAAG,CACN;8DAC6C,KAAK;uEACI,iBAAiB,CACpE,KAAK,EACL,GAAG,CACN;;SAER,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    Black15,\n    Black7,\n    Black91,\n    White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\nimport {\n    bodyFont,\n    borderHoverColor,\n    borderWidth,\n    buttonLabelDisabledFontColor,\n    buttonLabelFontColor,\n    controlHeight,\n    controlLabelDisabledFontColor,\n    controlLabelFont,\n    controlLabelFontColor,\n    fillHoverColor,\n    smallDelay\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        outline: none;\n        font: ${bodyFont};\n        color: ${buttonLabelFontColor};\n        flex-direction: column;\n        cursor: pointer;\n        --ni-private-switch-height: 24px;\n        --ni-private-switch-indicator-size: 16px;\n        padding-bottom: calc(\n            ${controlHeight} - var(--ni-private-switch-height)\n        );\n    }\n\n    :host([disabled]) {\n        cursor: default;\n        color: ${buttonLabelDisabledFontColor};\n    }\n\n    .label {\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .label__hidden {\n        display: none;\n        visibility: hidden;\n    }\n\n    .switch-container {\n        display: flex;\n        align-items: center;\n    }\n\n    slot[name='unchecked-message']::slotted(*) {\n        margin-inline-end: 8px;\n    }\n\n    .switch {\n        display: flex;\n        height: var(--ni-private-switch-height);\n        width: calc(var(--ni-private-switch-height) * 2);\n        box-sizing: border-box;\n        background-color: ${fillHoverColor};\n        border-radius: calc(var(--ni-private-switch-height) / 2);\n        align-items: center;\n        border: calc(${borderWidth} * 2) solid transparent;\n    }\n\n    :host([disabled]) .switch {\n        background-color: var(--ni-private-switch-background-disabled-color);\n    }\n\n    :host(${focusVisible}) .switch {\n        border-color: ${borderHoverColor};\n    }\n\n    .checked-indicator-spacer {\n        flex-grow: 0;\n        transition: flex-grow ${smallDelay} ease-in-out;\n    }\n\n    :host([aria-checked='true']) .checked-indicator-spacer {\n        flex-grow: 1;\n    }\n\n    .checked-indicator {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        background-color: var(--ni-private-switch-indicator-background-color);\n        box-sizing: border-box;\n        width: var(--ni-private-switch-indicator-size);\n        height: var(--ni-private-switch-indicator-size);\n        border-radius: calc(var(--ni-private-switch-indicator-size) / 2);\n        margin: calc(\n            calc(\n                    var(--ni-private-switch-height) - var(\n                            --ni-private-switch-indicator-size\n                        )\n                ) / 2\n        );\n        border: ${borderWidth} solid\n            var(--ni-private-switch-indicator-border-color);\n    }\n\n    :host(:hover) .checked-indicator {\n        border: calc(${borderWidth} * 2) solid ${borderHoverColor};\n    }\n\n    :host([disabled]) .checked-indicator {\n        background-color: var(\n            --ni-private-switch-indicator-background-disabled-color\n        );\n        border: ${borderWidth} solid\n            var(--ni-private-switch-indicator-border-disabled-color);\n    }\n\n    :host(${focusVisible}) .checked-indicator {\n        border: ${borderWidth} solid ${borderHoverColor};\n    }\n\n    .checked-indicator-inner {\n        width: calc(var(--ni-private-switch-indicator-size) / 2);\n        height: calc(var(--ni-private-switch-indicator-size) / 2);\n        border-radius: calc(var(--ni-private-switch-indicator-size) / 4);\n        background-color: var(--ni-private-switch-indicator-border-color);\n        opacity: 0;\n        transition: opacity ${smallDelay} ease-in-out;\n    }\n\n    :host([disabled]) .checked-indicator-inner {\n        background-color: var(\n            --ni-private-switch-indicator-border-disabled-color\n        );\n    }\n\n    :host([aria-checked='true']) .checked-indicator-inner {\n        opacity: 1;\n    }\n\n    slot[name='checked-message']::slotted(*) {\n        margin-inline-start: 8px;\n    }\n\n    @media (prefers-reduced-motion) {\n        .checked-indicator-inner,\n        .checked-indicator-spacer {\n            transition-duration: 0s;\n        }\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.light,\n        css`\n            :host {\n                --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.07\n                )};\n                --ni-private-switch-indicator-background-color: ${White};\n                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n                    White,\n                    0.1\n                )};\n                --ni-private-switch-indicator-border-color: ${Black91};\n                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.3\n                )};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host {\n                --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n                    Black15,\n                    0.07\n                )};\n                --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.3\n                )};\n                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n                    Black91,\n                    0.1\n                )};\n                --ni-private-switch-indicator-border-color: ${Black7};\n                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n                    Black7,\n                    0.3\n                )};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            :host {\n                --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n                    White,\n                    0.07\n                )};\n                --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(\n                    White,\n                    0.1\n                )};\n                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n                    White,\n                    0.1\n                )};\n                --ni-private-switch-indicator-border-color: ${White};\n                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n                    White,\n                    0.3\n                )};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/tab/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 { borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, fillHoverColor, fillHoverSelectedColor, mediumPadding, standardPadding, smallDelay, buttonLabelFont } from '../theme-provider/design-tokens';
 import { focusVisible } from '../utilities/style/focus';
 export const styles = css `

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,aAAa,EACb,eAAe,EACf,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;gBAKZ,eAAe;kBACb,aAAa;iBACd,aAAa;;;;;;;;;;;4BAWF,cAAc;;;;4BAId,sBAAsB;;;YAGtC,YAAY;;;;;;;;;;iBAUP,qBAAqB;;;;;;mBAMnB,aAAa,IAAI,eAAe;mBAChC,aAAa,MAAM,WAAW;;;;;;;;;;;;yBAYxB,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;;;;yBAUC,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;;;;;oCAWY,gBAAgB;;CAEnD,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    borderHoverColor,\n    borderWidth,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    mediumPadding,\n    standardPadding,\n    smallDelay,\n    buttonLabelFont\n} from '../theme-provider/design-tokens';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        position: relative;\n        box-sizing: border-box;\n        font: ${buttonLabelFont};\n        height: ${controlHeight};\n        color: ${bodyFontColor};\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        --ni-private-active-indicator-width: 2px;\n        --ni-private-focus-indicator-width: 1px;\n        --ni-private-indicator-lines-gap: 1px;\n        --ni-private-focus-indicator-inset-width: 3px;\n    }\n\n    :host(:hover) {\n        background-color: ${fillHoverColor};\n    }\n\n    :host(:hover[aria-selected='true']) {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    :host(${focusVisible}) {\n        outline: none;\n    }\n\n    :host(:active) {\n        background: none;\n    }\n\n    :host([disabled]) {\n        cursor: default;\n        color: ${bodyDisabledFontColor};\n        background: none;\n    }\n\n    slot:not([name]) {\n        display: block;\n        padding: ${mediumPadding} ${standardPadding}\n            calc(${mediumPadding} - ${borderWidth});\n    }\n\n    :host::before {\n        content: '';\n        position: absolute;\n        bottom: calc(\n            var(--ni-private-active-indicator-width) +\n                var(--ni-private-indicator-lines-gap)\n        );\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-focus-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::before {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::before {\n        width: calc(100% - 2 * var(--ni-private-focus-indicator-inset-width));\n    }\n\n    :host::after {\n        content: '';\n        position: absolute;\n        bottom: 0px;\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-active-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-focus-indicator-width);\n    }\n\n    :host([aria-selected='true'])::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-active-indicator-width);\n    }\n\n    :host([aria-selected='true'][disabled])::after {\n        border-bottom-color: rgba(${borderHoverColor}, 0.3);\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,aAAa,EACb,eAAe,EACf,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;gBAKZ,eAAe;kBACb,aAAa;iBACd,aAAa;;;;;;;;;;;4BAWF,cAAc;;;;4BAId,sBAAsB;;;YAGtC,YAAY;;;;;;;;;;iBAUP,qBAAqB;;;;;;mBAMnB,aAAa,IAAI,eAAe;mBAChC,aAAa,MAAM,WAAW;;;;;;;;;;;;yBAYxB,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;;;;yBAUC,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;;;;;oCAWY,gBAAgB;;CAEnD,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    borderHoverColor,\n    borderWidth,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    mediumPadding,\n    standardPadding,\n    smallDelay,\n    buttonLabelFont\n} from '../theme-provider/design-tokens';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        position: relative;\n        box-sizing: border-box;\n        font: ${buttonLabelFont};\n        height: ${controlHeight};\n        color: ${bodyFontColor};\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        --ni-private-active-indicator-width: 2px;\n        --ni-private-focus-indicator-width: 1px;\n        --ni-private-indicator-lines-gap: 1px;\n        --ni-private-focus-indicator-inset-width: 3px;\n    }\n\n    :host(:hover) {\n        background-color: ${fillHoverColor};\n    }\n\n    :host(:hover[aria-selected='true']) {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    :host(${focusVisible}) {\n        outline: none;\n    }\n\n    :host(:active) {\n        background: none;\n    }\n\n    :host([disabled]) {\n        cursor: default;\n        color: ${bodyDisabledFontColor};\n        background: none;\n    }\n\n    slot:not([name]) {\n        display: block;\n        padding: ${mediumPadding} ${standardPadding}\n            calc(${mediumPadding} - ${borderWidth});\n    }\n\n    :host::before {\n        content: '';\n        position: absolute;\n        bottom: calc(\n            var(--ni-private-active-indicator-width) +\n                var(--ni-private-indicator-lines-gap)\n        );\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-focus-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::before {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::before {\n        width: calc(100% - 2 * var(--ni-private-focus-indicator-inset-width));\n    }\n\n    :host::after {\n        content: '';\n        position: absolute;\n        bottom: 0px;\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-active-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        :host::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(${focusVisible})::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-focus-indicator-width);\n    }\n\n    :host([aria-selected='true'])::after {\n        width: 100%;\n        border-bottom-width: var(--ni-private-active-indicator-width);\n    }\n\n    :host([aria-selected='true'][disabled])::after {\n        border-bottom-color: rgba(${borderHoverColor}, 0.3);\n    }\n`;\n"]}

package/dist/esm/tab-panel/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 { bodyFont, bodyFontColor, standardPadding } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('block')}

package/dist/esm/tab-panel/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tab-panel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;gBAIN,QAAQ;iBACP,aAAa;uBACP,eAAe;;CAErC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    bodyFont,\n    bodyFontColor,\n    standardPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('block')}\n\n    :host {\n        box-sizing: border-box;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        padding-top: ${standardPadding};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tab-panel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;gBAIN,QAAQ;iBACP,aAAa;uBACP,eAAe;;CAErC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    bodyFont,\n    bodyFontColor,\n    standardPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('block')}\n\n    :host {\n        box-sizing: border-box;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        padding-top: ${standardPadding};\n    }\n`;\n"]}

package/dist/esm/table/components/cell/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 { controlHeight, controlSlimHeight, mediumPadding } from '../../../theme-provider/design-tokens';
 export const styles = css `
     ${display('flex')}
@@ -19,8 +19,6 @@ export const styles = css `
 
     .cell-view {
         overflow: hidden;
-        display: flex;
-        align-items: center;
     }
 
     .action-menu {

package/dist/esm/table/components/cell/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,aAAa,EACb,iBAAiB,EACjB,aAAa,EAChB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;uBAIE,aAAa;;cAEtB,aAAa,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;kBAoB5B,iBAAiB;;;CAGlC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    controlHeight,\n    controlSlimHeight,\n    mediumPadding\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        --ni-private-table-cell-nesting-level: 0;\n        padding: 0px ${mediumPadding};\n        padding-left: calc(\n            ${mediumPadding} + ${controlHeight} *\n                var(--ni-private-table-cell-nesting-level)\n        );\n        align-self: center;\n        height: 100%;\n        /* A default value that will be overridden by the row */\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    .cell-view {\n        overflow: hidden;\n        display: flex;\n        align-items: center;\n    }\n\n    .action-menu {\n        display: var(--ni-private-table-cell-action-menu-display);\n        margin-left: auto;\n        flex-shrink: 0;\n        flex-grow: 0;\n        height: ${controlSlimHeight};\n        align-self: center;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,aAAa,EACb,iBAAiB,EACjB,aAAa,EAChB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;uBAIE,aAAa;;cAEtB,aAAa,MAAM,aAAa;;;;;;;;;;;;;;;;;;kBAkB5B,iBAAiB;;;CAGlC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../../utilities/style/display';\nimport {\n    controlHeight,\n    controlSlimHeight,\n    mediumPadding\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        --ni-private-table-cell-nesting-level: 0;\n        padding: 0px ${mediumPadding};\n        padding-left: calc(\n            ${mediumPadding} + ${controlHeight} *\n                var(--ni-private-table-cell-nesting-level)\n        );\n        align-self: center;\n        height: 100%;\n        /* A default value that will be overridden by the row */\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    .cell-view {\n        overflow: hidden;\n    }\n\n    .action-menu {\n        display: var(--ni-private-table-cell-action-menu-display);\n        margin-left: auto;\n        flex-shrink: 0;\n        flex-grow: 0;\n        height: ${controlSlimHeight};\n        align-self: center;\n    }\n`;\n"]}

package/dist/esm/table/components/group-row/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../../../utilities/style/display';
 import { applicationBackgroundColor, borderWidth, controlHeight, fillHoverColor, mediumPadding, standardPadding } from '../../../theme-provider/design-tokens';
 import { Theme } from '../../../theme-provider/types';
 import { hexToRgbaCssColor } from '../../../utilities/style/colors';
@@ -63,7 +63,6 @@ export const styles = css `
         padding-left: ${mediumPadding};
         ${userSelectNone}
         overflow: hidden;
-        display: flex;
     }
 
     .group-row-child-count {

package/dist/esm/table/components/group-row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,aAAa,EACb,cAAc,EACd,aAAa,EACb,eAAe,EAClB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAE1F,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;MACf,oBAAoB;;;;uBAIH,aAAa,UAAU,WAAW;+BAC1B,WAAW,WAAW,0BAA0B;;;;kBAI7D,aAAa;;;;;;;;cAQjB,aAAa;;kBAET,aAAa;;;;;;;;;kBASb,aAAa;;;;;;;4BAOH,cAAc;;;;;cAK5B,aAAa,MAAM,eAAe;;;;;;;;;;;wBAWxB,aAAa;UAC3B,cAAc;;;;;;;yBAOC,aAAa;;UAE5B,cAAc;;;;;;;;uBAQD,eAAe;;;;;;CAMrC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEzD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAExD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport {\n    applicationBackgroundColor,\n    borderWidth,\n    controlHeight,\n    fillHoverColor,\n    mediumPadding,\n    standardPadding\n} from '../../../theme-provider/design-tokens';\nimport { Theme } from '../../../theme-provider/types';\nimport { hexToRgbaCssColor } from '../../../utilities/style/colors';\nimport { themeBehavior } from '../../../utilities/style/theme';\nimport { userSelectNone } from '../../../utilities/style/user-select';\nimport { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';\n\nexport const styles = css`\n    ${display('grid')}\n    ${expandCollapseStyles}\n\n    :host {\n        align-items: center;\n        height: calc(${controlHeight} + 2 * ${borderWidth});\n        border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};\n        box-sizing: border-box;\n        grid-template-columns:\n            calc(\n                ${controlHeight} *\n                    (var(--ni-private-table-group-row-indent-level) + 1)\n            )\n            1fr;\n    }\n\n    :host([selectable]) {\n        grid-template-columns:\n            ${controlHeight}\n            calc(\n                ${controlHeight} *\n                    (var(--ni-private-table-group-row-indent-level) + 1)\n            )\n            1fr;\n    }\n\n    :host::before {\n        content: '';\n        width: 100%;\n        height: ${controlHeight};\n        pointer-events: none;\n        bottom: 0px;\n        position: absolute;\n    }\n\n    :host(:hover)::before {\n        background-color: ${fillHoverColor};\n    }\n\n    .expand-collapse-button {\n        margin-left: calc(\n            ${mediumPadding} + ${standardPadding} * 2 *\n                var(--ni-private-table-group-row-indent-level)\n        );\n    }\n\n    .group-row-header-content {\n        display: flex;\n        overflow: hidden;\n    }\n\n    .group-header-view {\n        padding-left: ${mediumPadding};\n        ${userSelectNone}\n        overflow: hidden;\n        display: flex;\n    }\n\n    .group-row-child-count {\n        padding-left: 2px;\n        padding-right: ${mediumPadding};\n        pointer-events: none;\n        ${userSelectNone}\n    }\n\n    .checkbox-container {\n        display: flex;\n    }\n\n    .selection-checkbox {\n        margin-left: ${standardPadding};\n    }\n\n    .selection-checkbox::part(label) {\n        padding-left: 0px;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            :host(:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.05)};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host(:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.1)};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/group-row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,aAAa,EACb,cAAc,EACd,aAAa,EACb,eAAe,EAClB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAE1F,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;MACf,oBAAoB;;;;uBAIH,aAAa,UAAU,WAAW;+BAC1B,WAAW,WAAW,0BAA0B;;;;kBAI7D,aAAa;;;;;;;;cAQjB,aAAa;;kBAET,aAAa;;;;;;;;;kBASb,aAAa;;;;;;;4BAOH,cAAc;;;;;cAK5B,aAAa,MAAM,eAAe;;;;;;;;;;;wBAWxB,aAAa;UAC3B,cAAc;;;;;;yBAMC,aAAa;;UAE5B,cAAc;;;;;;;;uBAQD,eAAe;;;;;;CAMrC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEzD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAExD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    borderWidth,\n    controlHeight,\n    fillHoverColor,\n    mediumPadding,\n    standardPadding\n} from '../../../theme-provider/design-tokens';\nimport { Theme } from '../../../theme-provider/types';\nimport { hexToRgbaCssColor } from '../../../utilities/style/colors';\nimport { themeBehavior } from '../../../utilities/style/theme';\nimport { userSelectNone } from '../../../utilities/style/user-select';\nimport { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';\n\nexport const styles = css`\n    ${display('grid')}\n    ${expandCollapseStyles}\n\n    :host {\n        align-items: center;\n        height: calc(${controlHeight} + 2 * ${borderWidth});\n        border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};\n        box-sizing: border-box;\n        grid-template-columns:\n            calc(\n                ${controlHeight} *\n                    (var(--ni-private-table-group-row-indent-level) + 1)\n            )\n            1fr;\n    }\n\n    :host([selectable]) {\n        grid-template-columns:\n            ${controlHeight}\n            calc(\n                ${controlHeight} *\n                    (var(--ni-private-table-group-row-indent-level) + 1)\n            )\n            1fr;\n    }\n\n    :host::before {\n        content: '';\n        width: 100%;\n        height: ${controlHeight};\n        pointer-events: none;\n        bottom: 0px;\n        position: absolute;\n    }\n\n    :host(:hover)::before {\n        background-color: ${fillHoverColor};\n    }\n\n    .expand-collapse-button {\n        margin-left: calc(\n            ${mediumPadding} + ${standardPadding} * 2 *\n                var(--ni-private-table-group-row-indent-level)\n        );\n    }\n\n    .group-row-header-content {\n        display: flex;\n        overflow: hidden;\n    }\n\n    .group-header-view {\n        padding-left: ${mediumPadding};\n        ${userSelectNone}\n        overflow: hidden;\n    }\n\n    .group-row-child-count {\n        padding-left: 2px;\n        padding-right: ${mediumPadding};\n        pointer-events: none;\n        ${userSelectNone}\n    }\n\n    .checkbox-container {\n        display: flex;\n    }\n\n    .selection-checkbox {\n        margin-left: ${standardPadding};\n    }\n\n    .selection-checkbox::part(label) {\n        padding-left: 0px;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            :host(:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.05)};\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.dark,\n        css`\n            :host(:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.1)};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/table/components/header/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 { controlHeight, iconColor, mediumPadding, tableHeaderFont, tableHeaderFontColor } from '../../../theme-provider/design-tokens';
 export const styles = css `
     ${display('flex')}

package/dist/esm/table/components/header/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/header/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,aAAa,EACb,SAAS,EACT,aAAa,EACb,eAAe,EACf,oBAAoB,EACvB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;kBAGH,aAAa;;uBAER,aAAa;gBACpB,eAAe;iBACd,oBAAoB;UAC3B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;eAE/C,aAAa;;;;;;;;CAQ3B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    controlHeight,\n    iconColor,\n    mediumPadding,\n    tableHeaderFont,\n    tableHeaderFontColor\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        height: ${controlHeight};\n        align-items: center;\n        padding: 0px ${mediumPadding};\n        font: ${tableHeaderFont};\n        color: ${tableHeaderFontColor};\n        ${iconColor.cssCustomProperty}: ${tableHeaderFontColor};\n        text-transform: uppercase;\n        gap: ${mediumPadding};\n        cursor: default;\n    }\n\n    .sort-indicator,\n    .grouped-indicator {\n        flex: 0 0 auto;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/header/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,aAAa,EACb,SAAS,EACT,aAAa,EACb,eAAe,EACf,oBAAoB,EACvB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;kBAGH,aAAa;;uBAER,aAAa;gBACpB,eAAe;iBACd,oBAAoB;UAC3B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;eAE/C,aAAa;;;;;;;;CAQ3B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../../utilities/style/display';\nimport {\n    controlHeight,\n    iconColor,\n    mediumPadding,\n    tableHeaderFont,\n    tableHeaderFontColor\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        height: ${controlHeight};\n        align-items: center;\n        padding: 0px ${mediumPadding};\n        font: ${tableHeaderFont};\n        color: ${tableHeaderFontColor};\n        ${iconColor.cssCustomProperty}: ${tableHeaderFontColor};\n        text-transform: uppercase;\n        gap: ${mediumPadding};\n        cursor: default;\n    }\n\n    .sort-indicator,\n    .grouped-indicator {\n        flex: 0 0 auto;\n    }\n`;\n"]}

package/dist/esm/table/components/row/styles.js

@@ -1,14 +1,14 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../../../utilities/style/display';
 import { applicationBackgroundColor, borderWidth, controlHeight, controlSlimHeight, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, mediumPadding, standardPadding } from '../../../theme-provider/design-tokens';
 import { Theme } from '../../../theme-provider/types';
 import { hexToRgbaCssColor } from '../../../utilities/style/colors';
 import { themeBehavior } from '../../../utilities/style/theme';
 import { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';
 export const styles = css `
-    ${expandCollapseStyles}
     ${display('flex')}
+    ${expandCollapseStyles}
 
     :host {
         width: fit-content;

package/dist/esm/table/components/row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,eAAe,EAClB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAE1F,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,oBAAoB;MACpB,OAAO,CAAC,MAAM,CAAC;;;;;4BAKO,0BAA0B;uBAC/B,aAAa,UAAU,WAAW;+BAC1B,WAAW;;;;;;;;kBAQxB,aAAa;;;;;;;;4BAQH,cAAc;;;;4BAId,iBAAiB;;;;4BAIjB,sBAAsB;;;;;;cAMpC,aAAa;kBACT,aAAa;;;;;;iBAMd,iBAAiB;kBAChB,iBAAiB;;;;;;cAMrB,aAAa;kBACT,aAAa;;;;;;;;;;uBAUR,eAAe;;;;;;;;iBAQrB,aAAa;;;;;iBAKb,aAAa;;;;;;;;;;;;;eAaf,aAAa;;;;;;;;;;;;;;;;;;;CAmB3B,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;oCAI9B,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;oCAI9B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAExD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport {\n    applicationBackgroundColor,\n    borderWidth,\n    controlHeight,\n    controlSlimHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    fillSelectedColor,\n    mediumPadding,\n    standardPadding\n} from '../../../theme-provider/design-tokens';\nimport { Theme } from '../../../theme-provider/types';\nimport { hexToRgbaCssColor } from '../../../utilities/style/colors';\nimport { themeBehavior } from '../../../utilities/style/theme';\nimport { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';\n\nexport const styles = css`\n    ${expandCollapseStyles}\n    ${display('flex')}\n\n    :host {\n        width: fit-content;\n        min-width: 100%;\n        background-color: ${applicationBackgroundColor};\n        height: calc(${controlHeight} + 2 * ${borderWidth});\n        border-top: calc(2 * ${borderWidth}) solid transparent;\n        box-sizing: border-box;\n        background-clip: padding-box;\n    }\n\n    :host::before {\n        content: '';\n        width: 100%;\n        height: ${controlHeight};\n        pointer-events: none;\n        box-sizing: border-box;\n        bottom: 0px;\n        position: absolute;\n    }\n\n    :host([selectable]:not([selected]):hover)::before {\n        background-color: ${fillHoverColor};\n    }\n\n    :host([selected])::before {\n        background-color: ${fillSelectedColor};\n    }\n\n    :host([selected]:hover)::before {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    .expand-collapse-button {\n        flex: 0 0 auto;\n        padding-left: calc(\n            ${mediumPadding} + (var(--ni-private-table-row-indent-level) - 1) *\n                ${controlHeight}\n        );\n    }\n\n    .spinner-container {\n        flex: 0 0 auto;\n        width: ${controlSlimHeight};\n        height: ${controlSlimHeight};\n        align-self: center;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding-left: calc(\n            ${mediumPadding} + (var(--ni-private-table-row-indent-level) - 1) *\n                ${controlHeight}\n        );\n    }\n\n    .row-operations-container {\n        flex: 0 0 auto;\n        display: flex;\n    }\n\n    .selection-checkbox {\n        margin-left: ${standardPadding};\n    }\n\n    .selection-checkbox::part(label) {\n        padding-left: 0px;\n    }\n\n    .row-front-spacer {\n        width: ${controlHeight};\n        flex: 0 0 auto;\n    }\n\n    .row-front-spacer.top-level-parent {\n        width: ${mediumPadding};\n    }\n\n    .cell-container {\n        display: grid;\n        width: 100%;\n        grid-auto-flow: column;\n        grid-auto-columns: 1fr;\n        grid-template-columns: var(--ni-private-table-row-grid-columns) auto;\n    }\n\n    .cell-container.nested-parent {\n        margin-left: calc(\n            (${controlHeight} * var(--ni-private-table-row-indent-level)) * -1\n        );\n    }\n\n    nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: none;\n    }\n\n    nimble-table-cell[menu-open] {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    :host(:hover) nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    :host([selected]) nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            :host([selectable]:not([selected]):hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.05)};\n            }\n\n            :host([selected])::before {\n                background-color: ${hexToRgbaCssColor(White, 0.25)};\n            }\n\n            :host([selected]:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.2)};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table/components/row/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,eAAe,EAClB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;AAE1F,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;MACf,oBAAoB;;;;;4BAKE,0BAA0B;uBAC/B,aAAa,UAAU,WAAW;+BAC1B,WAAW;;;;;;;;kBAQxB,aAAa;;;;;;;;4BAQH,cAAc;;;;4BAId,iBAAiB;;;;4BAIjB,sBAAsB;;;;;;cAMpC,aAAa;kBACT,aAAa;;;;;;iBAMd,iBAAiB;kBAChB,iBAAiB;;;;;;cAMrB,aAAa;kBACT,aAAa;;;;;;;;;;uBAUR,eAAe;;;;;;;;iBAQrB,aAAa;;;;;iBAKb,aAAa;;;;;;;;;;;;;eAaf,aAAa;;;;;;;;;;;;;;;;;;;CAmB3B,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;oCAI9B,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;;;oCAI9B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAExD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    borderWidth,\n    controlHeight,\n    controlSlimHeight,\n    fillHoverColor,\n    fillHoverSelectedColor,\n    fillSelectedColor,\n    mediumPadding,\n    standardPadding\n} from '../../../theme-provider/design-tokens';\nimport { Theme } from '../../../theme-provider/types';\nimport { hexToRgbaCssColor } from '../../../utilities/style/colors';\nimport { themeBehavior } from '../../../utilities/style/theme';\nimport { styles as expandCollapseStyles } from '../../../patterns/expand-collapse/styles';\n\nexport const styles = css`\n    ${display('flex')}\n    ${expandCollapseStyles}\n\n    :host {\n        width: fit-content;\n        min-width: 100%;\n        background-color: ${applicationBackgroundColor};\n        height: calc(${controlHeight} + 2 * ${borderWidth});\n        border-top: calc(2 * ${borderWidth}) solid transparent;\n        box-sizing: border-box;\n        background-clip: padding-box;\n    }\n\n    :host::before {\n        content: '';\n        width: 100%;\n        height: ${controlHeight};\n        pointer-events: none;\n        box-sizing: border-box;\n        bottom: 0px;\n        position: absolute;\n    }\n\n    :host([selectable]:not([selected]):hover)::before {\n        background-color: ${fillHoverColor};\n    }\n\n    :host([selected])::before {\n        background-color: ${fillSelectedColor};\n    }\n\n    :host([selected]:hover)::before {\n        background-color: ${fillHoverSelectedColor};\n    }\n\n    .expand-collapse-button {\n        flex: 0 0 auto;\n        padding-left: calc(\n            ${mediumPadding} + (var(--ni-private-table-row-indent-level) - 1) *\n                ${controlHeight}\n        );\n    }\n\n    .spinner-container {\n        flex: 0 0 auto;\n        width: ${controlSlimHeight};\n        height: ${controlSlimHeight};\n        align-self: center;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding-left: calc(\n            ${mediumPadding} + (var(--ni-private-table-row-indent-level) - 1) *\n                ${controlHeight}\n        );\n    }\n\n    .row-operations-container {\n        flex: 0 0 auto;\n        display: flex;\n    }\n\n    .selection-checkbox {\n        margin-left: ${standardPadding};\n    }\n\n    .selection-checkbox::part(label) {\n        padding-left: 0px;\n    }\n\n    .row-front-spacer {\n        width: ${controlHeight};\n        flex: 0 0 auto;\n    }\n\n    .row-front-spacer.top-level-parent {\n        width: ${mediumPadding};\n    }\n\n    .cell-container {\n        display: grid;\n        width: 100%;\n        grid-auto-flow: column;\n        grid-auto-columns: 1fr;\n        grid-template-columns: var(--ni-private-table-row-grid-columns) auto;\n    }\n\n    .cell-container.nested-parent {\n        margin-left: calc(\n            (${controlHeight} * var(--ni-private-table-row-indent-level)) * -1\n        );\n    }\n\n    nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: none;\n    }\n\n    nimble-table-cell[menu-open] {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    :host(:hover) nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n\n    :host([selected]) nimble-table-cell {\n        --ni-private-table-cell-action-menu-display: block;\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            :host([selectable]:not([selected]):hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.05)};\n            }\n\n            :host([selected])::before {\n                background-color: ${hexToRgbaCssColor(White, 0.25)};\n            }\n\n            :host([selected]:hover)::before {\n                background-color: ${hexToRgbaCssColor(White, 0.2)};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/table/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
 import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { display } from '../utilities/style/display';
 import { applicationBackgroundColor, bodyFont, bodyFontColor, popupBorderColor, controlSlimHeight, mediumPadding, standardPadding, tableRowBorderColor, borderHoverColor } from '../theme-provider/design-tokens';
 import { Theme } from '../theme-provider/types';
 import { hexToRgbaCssColor } from '../utilities/style/colors';

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EACnB,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;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;UASX,cAAc;;;;;;;;gBAQR,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;sBAkBR,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA6B9B,iBAAiB;uBACZ,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;cAyBtB,gBAAgB;;kBAEZ,iBAAiB;;;mBAGhB,YAAY,CAAC,OAAO;;;;;wBAKf,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAkDZ,mBAAmB;;;;uBAIxB,eAAe;;;;;;;;;;;;;;;;UAgB5B,gBAAgB;;CAEzB,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;oCAKyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;;SAGxD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport {\n    applicationBackgroundColor,\n    bodyFont,\n    bodyFontColor,\n    popupBorderColor,\n    controlSlimHeight,\n    mediumPadding,\n    standardPadding,\n    tableRowBorderColor,\n    borderHoverColor\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { userSelectNone } from '../utilities/style/user-select';\nimport { accessiblyHidden } from '../utilities/style/accessibly-hidden';\nimport { ZIndexLevels } from '../utilities/style/types';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        height: 480px;\n        --ni-private-column-divider-width: 2px;\n        --ni-private-column-divider-padding: 3px;\n    }\n\n    .disable-select {\n        ${userSelectNone}\n    }\n\n    .table-container {\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        cursor: var(--ni-private-table-cursor-override);\n    }\n\n    .glass-overlay {\n        width: 100%;\n        height: 100%;\n        display: contents;\n        pointer-events: var(--ni-private-glass-overlay-pointer-events);\n    }\n\n    .header-row-container {\n        position: sticky;\n        top: 0;\n    }\n\n    .header-row {\n        display: flex;\n        background: ${applicationBackgroundColor};\n        position: relative;\n        width: fit-content;\n        min-width: max(\n            100%,\n            calc(\n                var(--ni-private-table-scrollable-min-width) +\n                    var(--ni-private-table-header-container-margin-right)\n            )\n        );\n        left: var(--ni-private-table-scroll-x);\n        align-items: center;\n    }\n\n    .header-row-action-container {\n        display: flex;\n    }\n\n    .checkbox-container {\n        display: flex;\n    }\n\n    .column-headers-container {\n        display: grid;\n        width: 100%;\n        grid-template-columns: var(--ni-private-table-row-grid-columns) auto;\n    }\n\n    .collapse-all-button {\n        height: ${controlSlimHeight};\n        margin-left: ${mediumPadding};\n        visibility: hidden;\n    }\n\n    .collapse-all-button.visible {\n        visibility: visible;\n    }\n\n    .header-container {\n        display: flex;\n        align-items: center;\n        position: relative;\n    }\n\n    .header-scrollbar-spacer {\n        width: var(--ni-private-table-header-container-margin-right);\n    }\n\n    .header {\n        flex: 1;\n        overflow: hidden;\n    }\n\n    .column-divider {\n        border-left: var(--ni-private-column-divider-width) solid\n            ${popupBorderColor};\n        display: none;\n        height: ${controlSlimHeight};\n        cursor: col-resize;\n        position: absolute;\n        z-index: ${ZIndexLevels.zIndex1};\n    }\n\n    .column-divider:hover,\n    .column-divider.divider-active {\n        border-color: ${borderHoverColor};\n    }\n\n    .column-divider.column-active.draggable,\n    .header-container:hover .column-divider.draggable {\n        display: block;\n    }\n\n    .column-divider::before {\n        content: '';\n        position: absolute;\n        width: calc(\n            var(--ni-private-column-divider-width) +\n                (2 * var(--ni-private-column-divider-padding))\n        );\n        height: 100%;\n        left: calc(\n            -1 * (var(--ni-private-column-divider-width) +\n                        var(--ni-private-column-divider-padding))\n        );\n    }\n\n    .column-divider.left {\n        left: -1px;\n    }\n\n    .column-divider.right {\n        left: calc(100% - 1px);\n    }\n\n    .table-viewport {\n        overflow: auto;\n        display: block;\n        height: 100%;\n        position: relative;\n    }\n\n    .table-scroll {\n        pointer-events: none;\n        position: absolute;\n        top: 0px;\n        width: 100%;\n        height: var(--ni-private-table-scroll-height);\n    }\n\n    .table-row-container {\n        width: fit-content;\n        min-width: max(100%, var(--ni-private-table-scrollable-min-width));\n        position: relative;\n        top: var(--ni-private-table-row-container-top);\n        background-color: ${tableRowBorderColor};\n    }\n\n    .selection-checkbox {\n        margin-left: ${standardPadding};\n    }\n\n    .selection-checkbox::part(label) {\n        padding-left: 0px;\n    }\n\n    .group-row {\n        position: relative;\n    }\n\n    .row {\n        position: relative;\n    }\n\n    .accessibly-hidden {\n        ${accessiblyHidden}\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            .table-row-container::before {\n                content: '';\n                width: 100%;\n                height: 100%;\n                background-color: ${hexToRgbaCssColor(White, 0.1)};\n                position: absolute;\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EACnB,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;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;UASX,cAAc;;;;;;;;gBAQR,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;sBAkBR,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA6B9B,iBAAiB;uBACZ,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;cAyBtB,gBAAgB;;kBAEZ,iBAAiB;;;mBAGhB,YAAY,CAAC,OAAO;;;;;wBAKf,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAkDZ,mBAAmB;;;;uBAIxB,eAAe;;;;;;;;;;;;;;;;UAgB5B,gBAAgB;;CAEzB,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;oCAKyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;;SAGxD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\nimport {\n    applicationBackgroundColor,\n    bodyFont,\n    bodyFontColor,\n    popupBorderColor,\n    controlSlimHeight,\n    mediumPadding,\n    standardPadding,\n    tableRowBorderColor,\n    borderHoverColor\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { userSelectNone } from '../utilities/style/user-select';\nimport { accessiblyHidden } from '../utilities/style/accessibly-hidden';\nimport { ZIndexLevels } from '../utilities/style/types';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        height: 480px;\n        --ni-private-column-divider-width: 2px;\n        --ni-private-column-divider-padding: 3px;\n    }\n\n    .disable-select {\n        ${userSelectNone}\n    }\n\n    .table-container {\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        cursor: var(--ni-private-table-cursor-override);\n    }\n\n    .glass-overlay {\n        width: 100%;\n        height: 100%;\n        display: contents;\n        pointer-events: var(--ni-private-glass-overlay-pointer-events);\n    }\n\n    .header-row-container {\n        position: sticky;\n        top: 0;\n    }\n\n    .header-row {\n        display: flex;\n        background: ${applicationBackgroundColor};\n        position: relative;\n        width: fit-content;\n        min-width: max(\n            100%,\n            calc(\n                var(--ni-private-table-scrollable-min-width) +\n                    var(--ni-private-table-header-container-margin-right)\n            )\n        );\n        left: var(--ni-private-table-scroll-x);\n        align-items: center;\n    }\n\n    .header-row-action-container {\n        display: flex;\n    }\n\n    .checkbox-container {\n        display: flex;\n    }\n\n    .column-headers-container {\n        display: grid;\n        width: 100%;\n        grid-template-columns: var(--ni-private-table-row-grid-columns) auto;\n    }\n\n    .collapse-all-button {\n        height: ${controlSlimHeight};\n        margin-left: ${mediumPadding};\n        visibility: hidden;\n    }\n\n    .collapse-all-button.visible {\n        visibility: visible;\n    }\n\n    .header-container {\n        display: flex;\n        align-items: center;\n        position: relative;\n    }\n\n    .header-scrollbar-spacer {\n        width: var(--ni-private-table-header-container-margin-right);\n    }\n\n    .header {\n        flex: 1;\n        overflow: hidden;\n    }\n\n    .column-divider {\n        border-left: var(--ni-private-column-divider-width) solid\n            ${popupBorderColor};\n        display: none;\n        height: ${controlSlimHeight};\n        cursor: col-resize;\n        position: absolute;\n        z-index: ${ZIndexLevels.zIndex1};\n    }\n\n    .column-divider:hover,\n    .column-divider.divider-active {\n        border-color: ${borderHoverColor};\n    }\n\n    .column-divider.column-active.draggable,\n    .header-container:hover .column-divider.draggable {\n        display: block;\n    }\n\n    .column-divider::before {\n        content: '';\n        position: absolute;\n        width: calc(\n            var(--ni-private-column-divider-width) +\n                (2 * var(--ni-private-column-divider-padding))\n        );\n        height: 100%;\n        left: calc(\n            -1 * (var(--ni-private-column-divider-width) +\n                        var(--ni-private-column-divider-padding))\n        );\n    }\n\n    .column-divider.left {\n        left: -1px;\n    }\n\n    .column-divider.right {\n        left: calc(100% - 1px);\n    }\n\n    .table-viewport {\n        overflow: auto;\n        display: block;\n        height: 100%;\n        position: relative;\n    }\n\n    .table-scroll {\n        pointer-events: none;\n        position: absolute;\n        top: 0px;\n        width: 100%;\n        height: var(--ni-private-table-scroll-height);\n    }\n\n    .table-row-container {\n        width: fit-content;\n        min-width: max(100%, var(--ni-private-table-scrollable-min-width));\n        position: relative;\n        top: var(--ni-private-table-row-container-top);\n        background-color: ${tableRowBorderColor};\n    }\n\n    .selection-checkbox {\n        margin-left: ${standardPadding};\n    }\n\n    .selection-checkbox::part(label) {\n        padding-left: 0px;\n    }\n\n    .group-row {\n        position: relative;\n    }\n\n    .row {\n        position: relative;\n    }\n\n    .accessibly-hidden {\n        ${accessiblyHidden}\n    }\n`.withBehaviors(\n    themeBehavior(\n        Theme.color,\n        css`\n            .table-row-container::before {\n                content: '';\n                width: 100%;\n                height: 100%;\n                background-color: ${hexToRgbaCssColor(White, 0.1)};\n                position: absolute;\n            }\n        `\n    )\n);\n"]}

package/dist/esm/table-column/anchor/cell-view/styles.js

@@ -1,11 +1,15 @@
 import { css } from '@microsoft/fast-element';
 import { bodyFont, bodyFontColor, placeholderFont, placeholderFontColor } from '../../../theme-provider/design-tokens';
+import { display } from '../../../utilities/style/display';
 export const styles = css `
+    ${display('flex')}
+
     :host {
         width: fit-content;
         max-width: 100%;
         height: fit-content;
         align-self: center;
+        align-items: center;
     }
 
     nimble-anchor {

package/dist/esm/table-column/anchor/cell-view/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/anchor/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,QAAQ,EACR,aAAa,EACb,eAAe,EACf,oBAAoB,EACvB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;gBAeT,QAAQ;iBACP,aAAa;;;;;;;gBAOd,eAAe;iBACd,oBAAoB;;CAEpC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    bodyFont,\n    bodyFontColor,\n    placeholderFont,\n    placeholderFontColor\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    :host {\n        width: fit-content;\n        max-width: 100%;\n        height: fit-content;\n        align-self: center;\n    }\n\n    nimble-anchor {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    span {\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    :host(.placeholder) span {\n        font: ${placeholderFont};\n        color: ${placeholderFontColor};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/anchor/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,QAAQ,EACR,aAAa,EACb,eAAe,EACf,oBAAoB,EACvB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;gBAiBL,QAAQ;iBACP,aAAa;;;;;;;gBAOd,eAAe;iBACd,oBAAoB;;CAEpC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    bodyFont,\n    bodyFontColor,\n    placeholderFont,\n    placeholderFontColor\n} from '../../../theme-provider/design-tokens';\nimport { display } from '../../../utilities/style/display';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        width: fit-content;\n        max-width: 100%;\n        height: fit-content;\n        align-self: center;\n        align-items: center;\n    }\n\n    nimble-anchor {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    span {\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    :host(.placeholder) span {\n        font: ${placeholderFont};\n        color: ${placeholderFontColor};\n    }\n`;\n"]}

package/dist/esm/table-column/base/styles.js

@@ -1,8 +1,7 @@
 import { css } from '@microsoft/fast-element';
+import { display } from '../../utilities/style/display';
 export const styles = css `
-    :host {
-        display: contents;
-    }
+    ${display('contents')}
 
     .header-content {
         white-space: nowrap;

package/dist/esm/table-column/base/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/table-column/base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;CAUxB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\n\nexport const styles = css`\n    :host {\n        display: contents;\n    }\n\n    .header-content {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/table-column/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,UAAU,CAAC;;;;;;;CAOxB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n    ${display('contents')}\n\n    .header-content {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n`;\n"]}

package/dist/esm/table-column/mapping/cell-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 { bodyFont, bodyFontColor, iconSize, smallPadding } from '../../../theme-provider/design-tokens';
 export const styles = css `
     ${display('inline-flex')}

package/dist/esm/table-column/mapping/cell-view/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/mapping/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,YAAY,EACf,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;eAGb,YAAY;;;;;;iBAMV,QAAQ;kBACP,QAAQ;;;;;gBAKV,QAAQ;iBACP,aAAa;;;;;CAK7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    bodyFont,\n    bodyFontColor,\n    iconSize,\n    smallPadding\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        gap: ${smallPadding};\n        align-items: center;\n    }\n\n    .reserve-icon-size {\n        flex-shrink: 0;\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n\n    .text {\n        flex-shrink: 1;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/mapping/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,YAAY,EACf,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;eAGb,YAAY;;;;;;iBAMV,QAAQ;kBACP,QAAQ;;;;;gBAKV,QAAQ;iBACP,aAAa;;;;;CAK7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../../utilities/style/display';\nimport {\n    bodyFont,\n    bodyFontColor,\n    iconSize,\n    smallPadding\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        gap: ${smallPadding};\n        align-items: center;\n    }\n\n    .reserve-icon-size {\n        flex-shrink: 0;\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n\n    .text {\n        flex-shrink: 1;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n`;\n"]}

package/dist/esm/table-column/mapping/group-header-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 { bodyFont, bodyFontColor, iconSize, smallPadding } from '../../../theme-provider/design-tokens';
 export const styles = css `
     ${display('inline-flex')}

package/dist/esm/table-column/mapping/group-header-view/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/mapping/group-header-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,YAAY,EACf,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;eAGb,YAAY;;;;;;iBAMV,QAAQ;kBACP,QAAQ;;;;;gBAKV,QAAQ;iBACP,aAAa;;;;;CAK7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    bodyFont,\n    bodyFontColor,\n    iconSize,\n    smallPadding\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        gap: ${smallPadding};\n        align-items: center;\n    }\n\n    .reserve-icon-size {\n        flex-shrink: 0;\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n\n    .text {\n        flex-shrink: 1;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/mapping/group-header-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,YAAY,EACf,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;eAGb,YAAY;;;;;;iBAMV,QAAQ;kBACP,QAAQ;;;;;gBAKV,QAAQ;iBACP,aAAa;;;;;CAK7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../../utilities/style/display';\nimport {\n    bodyFont,\n    bodyFontColor,\n    iconSize,\n    smallPadding\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        gap: ${smallPadding};\n        align-items: center;\n    }\n\n    .reserve-icon-size {\n        flex-shrink: 0;\n        width: ${iconSize};\n        height: ${iconSize};\n    }\n\n    .text {\n        flex-shrink: 1;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n`;\n"]}

package/dist/esm/table-column/text-base/cell-view/styles.js

@@ -1,6 +1,13 @@
 import { css } from '@microsoft/fast-element';
 import { bodyFont, bodyFontColor, placeholderFont, placeholderFontColor } from '../../../theme-provider/design-tokens';
+import { display } from '../../../utilities/style/display';
 export const styles = css `
+    ${display('flex')}
+
+    :host {
+        align-items: center;
+    }
+
     :host(.right-align) {
         margin-left: auto;
     }

package/dist/esm/table-column/text-base/cell-view/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,QAAQ,EACR,aAAa,EACb,eAAe,EACf,oBAAoB,EACvB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;gBAMT,QAAQ;iBACP,aAAa;;;;;;;gBAOd,eAAe;iBACd,oBAAoB;;CAEpC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    bodyFont,\n    bodyFontColor,\n    placeholderFont,\n    placeholderFontColor\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    :host(.right-align) {\n        margin-left: auto;\n    }\n\n    span {\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    :host(.placeholder) span {\n        font: ${placeholderFont};\n        color: ${placeholderFontColor};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,QAAQ,EACR,aAAa,EACb,eAAe,EACf,oBAAoB,EACvB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;gBAWL,QAAQ;iBACP,aAAa;;;;;;;gBAOd,eAAe;iBACd,oBAAoB;;CAEpC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    bodyFont,\n    bodyFontColor,\n    placeholderFont,\n    placeholderFontColor\n} from '../../../theme-provider/design-tokens';\nimport { display } from '../../../utilities/style/display';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        align-items: center;\n    }\n\n    :host(.right-align) {\n        margin-left: auto;\n    }\n\n    span {\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    :host(.placeholder) span {\n        font: ${placeholderFont};\n        color: ${placeholderFontColor};\n    }\n`;\n"]}

package/dist/esm/table-column/text-base/group-header-view/styles.js

@@ -1,6 +1,9 @@
 import { css } from '@microsoft/fast-element';
 import { bodyFont, bodyFontColor } from '../../../theme-provider/design-tokens';
+import { display } from '../../../utilities/style/display';
 export const styles = css `
+    ${display('flex')}
+
     span {
         font: ${bodyFont};
         color: ${bodyFontColor};

package/dist/esm/table-column/text-base/group-header-view/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/group-header-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAEhF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;gBAET,QAAQ;iBACP,aAAa;;;;;CAK7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { bodyFont, bodyFontColor } from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    span {\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/group-header-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;iBACP,aAAa;;;;;CAK7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { bodyFont, bodyFontColor } from '../../../theme-provider/design-tokens';\nimport { display } from '../../../utilities/style/display';\n\nexport const styles = css`\n    ${display('flex')}\n\n    span {\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n`;\n"]}

package/dist/esm/tabs/styles.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BpB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\n\nexport const styles = css`\n    ${display('grid')}\n\n    :host {\n        box-sizing: border-box;\n        grid-template-columns: auto 1fr;\n        grid-template-rows: auto 1fr;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .tablist {\n        display: grid;\n        grid-template-rows: auto auto;\n        grid-template-columns: auto;\n        width: max-content;\n        align-self: end;\n    }\n\n    .tabpanel {\n        grid-row: 2;\n        grid-column-start: 1;\n        grid-column-end: 4;\n        overflow: auto;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BpB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nexport const styles = css`\n    ${display('grid')}\n\n    :host {\n        box-sizing: border-box;\n        grid-template-columns: auto 1fr;\n        grid-template-rows: auto 1fr;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .tablist {\n        display: grid;\n        grid-template-rows: auto auto;\n        grid-template-columns: auto;\n        width: max-content;\n        align-self: end;\n    }\n\n    .tabpanel {\n        grid-row: 2;\n        grid-column-start: 1;\n        grid-column-end: 4;\n        overflow: auto;\n    }\n`;\n"]}

package/dist/esm/tabs-toolbar/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 { bodyFont, bodyFontColor, borderRgbPartialColor, borderWidth, controlHeight, mediumPadding, smallPadding } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('flex')}

package/dist/esm/tabs-toolbar/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACf,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;kBAIH,aAAa;;gBAEf,QAAQ;iBACP,aAAa;;;;;;4BAMF,WAAW;mBACpB,qBAAqB;kBACtB,YAAY,IAAI,aAAa;;CAE9C,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    bodyFont,\n    bodyFontColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    mediumPadding,\n    smallPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        align-items: center;\n        height: ${controlHeight};\n        box-sizing: border-box;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n    }\n\n    .separator {\n        display: inline-block;\n        height: 24px;\n        border-left: calc(${borderWidth} * 2) solid\n            rgba(${borderRgbPartialColor}, 0.3);\n        margin: ${smallPadding} ${mediumPadding};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACf,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;kBAIH,aAAa;;gBAEf,QAAQ;iBACP,aAAa;;;;;;4BAMF,WAAW;mBACpB,qBAAqB;kBACtB,YAAY,IAAI,aAAa;;CAE9C,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    bodyFont,\n    bodyFontColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    mediumPadding,\n    smallPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        align-items: center;\n        height: ${controlHeight};\n        box-sizing: border-box;\n        font: ${bodyFont};\n        color: ${bodyFontColor};\n    }\n\n    .separator {\n        display: inline-block;\n        height: 24px;\n        border-left: calc(${borderWidth} * 2) solid\n            rgba(${borderRgbPartialColor}, 0.3);\n        margin: ${smallPadding} ${mediumPadding};\n    }\n`;\n"]}

package/dist/esm/text-area/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 { borderRgbPartialColor, borderHoverColor, borderWidth, smallDelay, bodyFontColor, bodyDisabledFontColor, controlLabelFont, controlLabelFontColor, bodyFont, controlLabelDisabledFontColor, iconSize, failColor, standardPadding, mediumPadding } from '../theme-provider/design-tokens';
 import { appearanceBehavior } from '../utilities/style/appearance';
 import { TextAreaAppearance } from './types';

package/dist/esm/text-area/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-area/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,QAAQ,EACR,6BAA6B,EAC7B,QAAQ,EACR,SAAS,EACT,eAAe,EACf,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;;;gBAGD,QAAQ;;UAEd,cAAc;iBACP,aAAa;;;mDAGqB,WAAW;;;;iBAI7C,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;4BAclB,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;kBAsBtB,WAAW;;2BAEF,QAAQ,MAAM,eAAe;;UAE9C;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;;;;;;;+BAYP,gBAAgB;;;;;;;;6BAQlB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,SAAS;;;;iBAIvB,qBAAqB;;;;iBAIrB,6BAA6B;;;;;;;;;;;;;;;;;;;;eAoB/B,aAAa;;;CAG3B,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;qCAE0B,qBAAqB;;;SAGjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;;;;;yCASrB,qBAAqB;;;;uCAIvB,SAAS;;SAEvC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    smallDelay,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlLabelFont,\n    controlLabelFontColor,\n    bodyFont,\n    controlLabelDisabledFontColor,\n    iconSize,\n    failColor,\n    standardPadding,\n    mediumPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextAreaAppearance } from './types';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-flex')}\n    ${errorStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        ${userSelectNone}\n        color: ${bodyFontColor};\n        flex-direction: column;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .label {\n        display: block;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .container {\n        display: flex;\n        justify-content: center;\n        position: relative;\n        height: 100%;\n        width: 100%;\n    }\n\n    .container::after {\n        content: ' ';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        .container::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) .container::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .container::after {\n        width: 100%;\n    }\n\n    :host([disabled]:hover) .container::after,\n    :host([readonly]:hover) .container::after {\n        width: 0px;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        flex-grow: 1;\n        outline: none;\n        box-sizing: border-box;\n        position: relative;\n        color: inherit;\n        border-radius: 0px;\n        align-items: flex-end;\n        border: ${borderWidth} solid transparent;\n        min-width: 100px;\n        min-height: calc(${iconSize} + ${standardPadding});\n        padding: 8px;\n        ${\n            /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''\n        }\n        padding-right: calc(${iconSize});\n        margin: 0px;\n        resize: none;\n    }\n\n    @media (prefers-reduced-motion) {\n        .control {\n            transition-duration: 0s;\n        }\n    }\n\n    .control:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    .control[readonly],\n    .control[readonly]:hover,\n    .control[readonly]:hover:focus-within,\n    .control[disabled],\n    .control[disabled]:hover {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([error-visible]) .control[readonly]:hover:focus-within {\n        border-bottom-color: ${failColor};\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    .control[disabled]::placeholder {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    :host([resize='both']) .control {\n        resize: both;\n    }\n    :host([resize='horizontal']) .control {\n        resize: horizontal;\n    }\n    :host([resize='vertical']) .control {\n        resize: vertical;\n    }\n\n    :host([error-visible]) .error-icon {\n        display: none;\n    }\n\n    :host([error-visible]) .error-icon.scrollbar-width-calculated {\n        display: inline-flex;\n        position: absolute;\n        top: ${mediumPadding};\n        right: var(--ni-private-scrollbar-width);\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        TextAreaAppearance.outline,\n        css`\n            .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.3);\n                background-color: transparent;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextAreaAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            :host([readonly]) .control {\n                background-color: transparent;\n            }\n\n            :host([disabled]) .control {\n                border-color: transparent;\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            :host([error-visible][disabled]) .control {\n                border-bottom-color: ${failColor};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-area/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,QAAQ,EACR,6BAA6B,EAC7B,QAAQ,EACR,SAAS,EACT,eAAe,EACf,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;;;gBAGD,QAAQ;;UAEd,cAAc;iBACP,aAAa;;;mDAGqB,WAAW;;;;iBAI7C,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;4BAclB,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;kBAsBtB,WAAW;;2BAEF,QAAQ,MAAM,eAAe;;UAE9C;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;;;;;;;+BAYP,gBAAgB;;;;;;;;6BAQlB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,SAAS;;;;iBAIvB,qBAAqB;;;;iBAIrB,6BAA6B;;;;;;;;;;;;;;;;;;;;eAoB/B,aAAa;;;CAG3B,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;qCAE0B,qBAAqB;;;SAGjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;;;;;yCASrB,qBAAqB;;;;uCAIvB,SAAS;;SAEvC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    smallDelay,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlLabelFont,\n    controlLabelFontColor,\n    bodyFont,\n    controlLabelDisabledFontColor,\n    iconSize,\n    failColor,\n    standardPadding,\n    mediumPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextAreaAppearance } from './types';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-flex')}\n    ${errorStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        ${userSelectNone}\n        color: ${bodyFontColor};\n        flex-direction: column;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .label {\n        display: block;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .container {\n        display: flex;\n        justify-content: center;\n        position: relative;\n        height: 100%;\n        width: 100%;\n    }\n\n    .container::after {\n        content: ' ';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        .container::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) .container::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .container::after {\n        width: 100%;\n    }\n\n    :host([disabled]:hover) .container::after,\n    :host([readonly]:hover) .container::after {\n        width: 0px;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        flex-grow: 1;\n        outline: none;\n        box-sizing: border-box;\n        position: relative;\n        color: inherit;\n        border-radius: 0px;\n        align-items: flex-end;\n        border: ${borderWidth} solid transparent;\n        min-width: 100px;\n        min-height: calc(${iconSize} + ${standardPadding});\n        padding: 8px;\n        ${\n            /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''\n        }\n        padding-right: calc(${iconSize});\n        margin: 0px;\n        resize: none;\n    }\n\n    @media (prefers-reduced-motion) {\n        .control {\n            transition-duration: 0s;\n        }\n    }\n\n    .control:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    .control[readonly],\n    .control[readonly]:hover,\n    .control[readonly]:hover:focus-within,\n    .control[disabled],\n    .control[disabled]:hover {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([error-visible]) .control[readonly]:hover:focus-within {\n        border-bottom-color: ${failColor};\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    .control[disabled]::placeholder {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    :host([resize='both']) .control {\n        resize: both;\n    }\n    :host([resize='horizontal']) .control {\n        resize: horizontal;\n    }\n    :host([resize='vertical']) .control {\n        resize: vertical;\n    }\n\n    :host([error-visible]) .error-icon {\n        display: none;\n    }\n\n    :host([error-visible]) .error-icon.scrollbar-width-calculated {\n        display: inline-flex;\n        position: absolute;\n        top: ${mediumPadding};\n        right: var(--ni-private-scrollbar-width);\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        TextAreaAppearance.outline,\n        css`\n            .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.3);\n                background-color: transparent;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextAreaAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            :host([readonly]) .control {\n                background-color: transparent;\n            }\n\n            :host([disabled]) .control {\n                border-color: transparent;\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            :host([error-visible][disabled]) .control {\n                border-bottom-color: ${failColor};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/text-field/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 { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, failColor, smallDelay, controlLabelFont, bodyFont, controlLabelFontColor, controlLabelDisabledFontColor, mediumPadding, iconColor } from '../theme-provider/design-tokens';
 import { appearanceBehavior } from '../utilities/style/appearance';
 import { TextFieldAppearance } from './types';

package/dist/esm/text-field/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,aAAa,EACb,SAAS,EACZ,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;gBAGD,QAAQ;;UAEd,cAAc;iBACP,aAAa;mDACqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;iCAYb,qBAAqB;eACvC,aAAa;mBACT,WAAW;;;;6BAID,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;UAQd,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;;;;;;UAad,SAAS,CAAC,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;UAyB3B;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;;;;4BAUV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;UAiB9B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACX,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;gCAI9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;;;;;;yCAST,qBAAqB;;;;;yCAKrB,qBAAqB;;SAErD,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;iCACV,WAAW;;;;;;SAMnC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;SAIF,CACJ,EACD,aAAa,CACT,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EACzB,GAAG,CAAA;;;;SAIF,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\n\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    failColor,\n    smallDelay,\n    controlLabelFont,\n    bodyFont,\n    controlLabelFontColor,\n    controlLabelDisabledFontColor,\n    mediumPadding,\n    iconColor\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextFieldAppearance } from './types';\nimport { Theme } from '../theme-provider/types';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-block')}\n    ${errorStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        ${userSelectNone}\n        color: ${bodyFontColor};\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-height-within-border: calc(\n            ${controlHeight} - 2 * ${borderWidth}\n        );\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .label {\n        display: flex;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .root {\n        box-sizing: border-box;\n        position: relative;\n        display: flex;\n        flex-direction: row;\n        border-radius: 0px;\n        font: inherit;\n        align-items: center;\n        justify-content: center;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        gap: ${mediumPadding};\n        padding: ${borderWidth};\n    }\n\n    :host([readonly]) .root {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([disabled]) .root {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .root {\n        border-bottom-color: ${failColor};\n    }\n\n    .root:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([appearance='frameless'][full-bleed]) .root {\n        padding-left: 0px;\n        padding-right: 0px;\n    }\n\n    .root::before {\n        ${/* Empty string causes alignment issue */ ''}\n        content: ' ';\n        color: transparent;\n        width: 0px;\n        ${userSelectNone}\n    }\n\n    :host([appearance='frameless'][full-bleed]) .root::before {\n        display: none;\n    }\n\n    .root::after {\n        ${/* Empty string causes alignment issue */ ''}\n        content: ' ';\n        color: transparent;\n        width: 0px;\n        ${userSelectNone}\n    }\n\n    :host([appearance='frameless'][full-bleed]) .root::after {\n        display: none;\n    }\n\n    [part='start'] {\n        display: contents;\n    }\n\n    slot[name='start']::slotted(*) {\n        flex: none;\n        ${iconColor.cssCustomProperty}: currentcolor;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        background: transparent;\n        color: inherit;\n        padding: 0px;\n        height: var(--ni-private-height-within-border);\n        width: 100%;\n        margin-top: auto;\n        margin-bottom: auto;\n        border: none;\n        text-overflow: ellipsis;\n    }\n\n    .control:hover,\n    .control:focus,\n    .control:disabled,\n    .control:active {\n        outline: none;\n    }\n\n    .control:disabled {\n        ${\n            /* There's an issue with the input element where the ellipsized\n               overflowed text is blank when scrolled into view, so just clip instead.\n               See https://webcompat.com/issues/104481 */ ''\n        }\n        text-overflow: clip;\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    .control[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    [part='end'] {\n        display: contents;\n    }\n\n    [part='end']::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        [part='end']::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) [part='end']::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) [part='end']::after {\n        width: 100%;\n    }\n\n    :host([disabled]:hover) [part='end']::after,\n    :host([readonly]:hover) [part='end']::after {\n        width: 0px;\n    }\n\n    [part='actions'] {\n        display: contents;\n    }\n\n    slot[name='actions']::slotted(*) {\n        ${controlHeight.cssCustomProperty}: 24px;\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        TextFieldAppearance.underline,\n        css`\n            .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextFieldAppearance.block,\n        css`\n            .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .control {\n                padding-left: ${borderWidth};\n                padding-right: ${borderWidth};\n            }\n\n            .root:focus-within,\n            :host([error-visible]) .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host(:hover) .root {\n                padding-bottom: 0;\n            }\n\n            :host([readonly]) .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n                border-color: transparent;\n            }\n\n            :host([disabled]) .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextFieldAppearance.outline,\n        css`\n            .root {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextFieldAppearance.frameless,\n        css`\n            .control {\n                padding-left: ${borderWidth};\n                padding-right: ${borderWidth};\n            }\n\n            :host([readonly]) .root {\n                border-color: transparent;\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.light,\n        css`\n            .control::-ms-reveal {\n                filter: invert(0%);\n            }\n        `\n    ),\n    themeBehavior(\n        [Theme.dark, Theme.color],\n        css`\n            .control::-ms-reveal {\n                filter: invert(100%);\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,aAAa,EACb,SAAS,EACZ,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;gBAGD,QAAQ;;UAEd,cAAc;iBACP,aAAa;mDACqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;iCAYb,qBAAqB;eACvC,aAAa;mBACT,WAAW;;;;6BAID,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;UAQd,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;;;;;;UAad,SAAS,CAAC,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;UAyB3B;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;;;;4BAUV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;UAiB9B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACX,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;gCAI9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;;;;;;yCAST,qBAAqB;;;;;yCAKrB,qBAAqB;;SAErD,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;iCACV,WAAW;;;;;;SAMnC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;SAIF,CACJ,EACD,aAAa,CACT,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EACzB,GAAG,CAAA;;;;SAIF,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    failColor,\n    smallDelay,\n    controlLabelFont,\n    bodyFont,\n    controlLabelFontColor,\n    controlLabelDisabledFontColor,\n    mediumPadding,\n    iconColor\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextFieldAppearance } from './types';\nimport { Theme } from '../theme-provider/types';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-block')}\n    ${errorStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        ${userSelectNone}\n        color: ${bodyFontColor};\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-height-within-border: calc(\n            ${controlHeight} - 2 * ${borderWidth}\n        );\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .label {\n        display: flex;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    .root {\n        box-sizing: border-box;\n        position: relative;\n        display: flex;\n        flex-direction: row;\n        border-radius: 0px;\n        font: inherit;\n        align-items: center;\n        justify-content: center;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        gap: ${mediumPadding};\n        padding: ${borderWidth};\n    }\n\n    :host([readonly]) .root {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([disabled]) .root {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .root {\n        border-bottom-color: ${failColor};\n    }\n\n    .root:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([appearance='frameless'][full-bleed]) .root {\n        padding-left: 0px;\n        padding-right: 0px;\n    }\n\n    .root::before {\n        ${/* Empty string causes alignment issue */ ''}\n        content: ' ';\n        color: transparent;\n        width: 0px;\n        ${userSelectNone}\n    }\n\n    :host([appearance='frameless'][full-bleed]) .root::before {\n        display: none;\n    }\n\n    .root::after {\n        ${/* Empty string causes alignment issue */ ''}\n        content: ' ';\n        color: transparent;\n        width: 0px;\n        ${userSelectNone}\n    }\n\n    :host([appearance='frameless'][full-bleed]) .root::after {\n        display: none;\n    }\n\n    [part='start'] {\n        display: contents;\n    }\n\n    slot[name='start']::slotted(*) {\n        flex: none;\n        ${iconColor.cssCustomProperty}: currentcolor;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        background: transparent;\n        color: inherit;\n        padding: 0px;\n        height: var(--ni-private-height-within-border);\n        width: 100%;\n        margin-top: auto;\n        margin-bottom: auto;\n        border: none;\n        text-overflow: ellipsis;\n    }\n\n    .control:hover,\n    .control:focus,\n    .control:disabled,\n    .control:active {\n        outline: none;\n    }\n\n    .control:disabled {\n        ${\n            /* There's an issue with the input element where the ellipsized\n               overflowed text is blank when scrolled into view, so just clip instead.\n               See https://webcompat.com/issues/104481 */ ''\n        }\n        text-overflow: clip;\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    .control[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    [part='end'] {\n        display: contents;\n    }\n\n    [part='end']::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        [part='end']::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) [part='end']::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) [part='end']::after {\n        width: 100%;\n    }\n\n    :host([disabled]:hover) [part='end']::after,\n    :host([readonly]:hover) [part='end']::after {\n        width: 0px;\n    }\n\n    [part='actions'] {\n        display: contents;\n    }\n\n    slot[name='actions']::slotted(*) {\n        ${controlHeight.cssCustomProperty}: 24px;\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        TextFieldAppearance.underline,\n        css`\n            .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextFieldAppearance.block,\n        css`\n            .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .control {\n                padding-left: ${borderWidth};\n                padding-right: ${borderWidth};\n            }\n\n            .root:focus-within,\n            :host([error-visible]) .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host(:hover) .root {\n                padding-bottom: 0;\n            }\n\n            :host([readonly]) .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n                border-color: transparent;\n            }\n\n            :host([disabled]) .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextFieldAppearance.outline,\n        css`\n            .root {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextFieldAppearance.frameless,\n        css`\n            .control {\n                padding-left: ${borderWidth};\n                padding-right: ${borderWidth};\n            }\n\n            :host([readonly]) .root {\n                border-color: transparent;\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.light,\n        css`\n            .control::-ms-reveal {\n                filter: invert(0%);\n            }\n        `\n    ),\n    themeBehavior(\n        [Theme.dark, Theme.color],\n        css`\n            .control::-ms-reveal {\n                filter: invert(100%);\n            }\n        `\n    )\n);\n"]}

package/dist/esm/theme-provider/styles.js

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

package/dist/esm/theme-provider/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/theme-provider/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\n\nexport const styles = css`\n    :host {\n        display: contents;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/theme-provider/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,UAAU,CAAC;CACxB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nexport const styles = css`\n    ${display('contents')}\n`;\n"]}

package/dist/esm/toolbar/styles.js

@@ -1,6 +1,9 @@
 import { css } from '@microsoft/fast-element';
 import { applicationBackgroundColor, smallPadding, standardPadding } from '../theme-provider/design-tokens';
+import { display } from '../utilities/style/display';
 export const styles = css `
+    ${display('inline')}
+
     .positioning-region {
         display: flex;
         padding: ${smallPadding} ${standardPadding};

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/toolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,0BAA0B,EAC1B,YAAY,EACZ,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;mBAGN,YAAY,IAAI,eAAe;;eAEnC,eAAe;sBACR,0BAA0B;;;;;;;;;eASjC,eAAe;;;;;;eAMf,eAAe;;;CAG7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    applicationBackgroundColor,\n    smallPadding,\n    standardPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    .positioning-region {\n        display: flex;\n        padding: ${smallPadding} ${standardPadding};\n        align-items: center;\n        gap: ${standardPadding};\n        background: ${applicationBackgroundColor};\n    }\n\n    slot[name='label'] {\n        display: none;\n    }\n\n    [part='start'] {\n        display: flex;\n        gap: ${standardPadding};\n        margin-right: auto;\n    }\n\n    [part='end'] {\n        display: flex;\n        gap: ${standardPadding};\n        margin-left: auto;\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/toolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,0BAA0B,EAC1B,YAAY,EACZ,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,QAAQ,CAAC;;;;mBAIJ,YAAY,IAAI,eAAe;;eAEnC,eAAe;sBACR,0BAA0B;;;;;;;;;eASjC,eAAe;;;;;;eAMf,eAAe;;;CAG7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n    applicationBackgroundColor,\n    smallPadding,\n    standardPadding\n} from '../theme-provider/design-tokens';\nimport { display } from '../utilities/style/display';\n\nexport const styles = css`\n    ${display('inline')}\n\n    .positioning-region {\n        display: flex;\n        padding: ${smallPadding} ${standardPadding};\n        align-items: center;\n        gap: ${standardPadding};\n        background: ${applicationBackgroundColor};\n    }\n\n    slot[name='label'] {\n        display: none;\n    }\n\n    [part='start'] {\n        display: flex;\n        gap: ${standardPadding};\n        margin-right: auto;\n    }\n\n    [part='end'] {\n        display: flex;\n        gap: ${standardPadding};\n        margin-left: auto;\n    }\n`;\n"]}