@ni/nimble-components 29.3.4 → 29.3.5

package/dist/esm/patterns/dropdown/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/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,+BAA+B,CAAC;AACxD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,mBAAmB,EACtB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;UAGrB,cAAc;qBACH,YAAY;;;mDAGkB,WAAW;;;;;;;;uBAQvC,WAAW;;;;yBAIT,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;+BAKO,SAAS;;;;;;4BAMZ,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;;;;;;YAU1B,YAAY;;;;;+BAKO,SAAS;;;;;;;;;;;;;;;;;;iCAkBP,qBAAqB;;mBAEnC,WAAW;;;;+BAIC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;;;+BAMnB,SAAS;;;;;;;;;wCASA,YAAY;iEACa,YAAY;sBACvD,mBAAmB;4BACb,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;;;;;;;;0BAoB5B,YAAY;;;;uBAIf,YAAY;;;;;;;;;;;wBAWX,aAAa;;;;iBAIpB,qBAAqB;;;;;uBAKf,YAAY;;;;;;;;iBAQlB,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;CAWpC,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,SAAS,EAC5B,GAAG,CAAA;;uCAE4B,WAAW;;;;;qCAKb,qBAAqB;;SAEjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;uCAIvB,WAAW;;;;;yCAKT,qBAAqB;;SAErD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,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    bodyDisabledFontColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    iconSize,\n    menuMinWidth,\n    popupBorderColor,\n    smallDelay,\n    smallPadding,\n    borderRgbPartialColor,\n    mediumPadding,\n    failColor,\n    elevation2BoxShadow\n} from '../../theme-provider/design-tokens';\nimport { Theme } from '../../theme-provider/types';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { hexToRgbaCssColor } from '../../utilities/style/colors';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { DropdownAppearance } from './types';\nimport { userSelectNone } from '../../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        box-sizing: border-box;\n        color: ${bodyFontColor};\n        font: ${bodyFont};\n        height: ${controlHeight};\n        position: relative;\n        justify-content: center;\n        ${userSelectNone}\n        min-width: ${menuMinWidth};\n        outline: none;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-focus-indicator-width: 1px;\n        --ni-private-indicator-lines-gap: 1px;\n    }\n\n    :host::before {\n        content: '';\n        position: absolute;\n        bottom: calc(${borderWidth} + var(--ni-private-indicator-lines-gap));\n        width: 0px;\n        height: 0px;\n        justify-self: center;\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% - 8px);\n    }\n\n    :host([error-visible]):before {\n        border-bottom-color: ${failColor};\n    }\n\n    :host::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        justify-self: center;\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        :host::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(:hover)::after,\n    :host(${focusVisible})::after {\n        width: 100%;\n    }\n\n    :host([error-visible]):after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([disabled]:hover)::after {\n        width: 0px;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .control {\n        align-items: center;\n        box-sizing: border-box;\n        cursor: pointer;\n        display: flex;\n        min-height: 100%;\n        width: 100%;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        background-color: transparent;\n        padding: ${borderWidth};\n    }\n\n    :host([open]:not(:hover)) .control {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([disabled]) .control {\n        cursor: default;\n        color: ${bodyDisabledFontColor};\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .control,\n    :host([error-visible][open]) .control,\n    :host([error-visible][disabled]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    .listbox {\n        box-sizing: border-box;\n        display: inline-flex;\n        flex-direction: column;\n        overflow-y: auto;\n        width: 100%;\n        --ni-private-listbox-padding: ${smallPadding};\n        max-height: calc(var(--ni-private-select-max-height) - ${smallPadding});\n        box-shadow: ${elevation2BoxShadow};\n        border: 1px solid ${popupBorderColor};\n        background-color: ${applicationBackgroundColor};\n    }\n\n    .listbox slot {\n        display: block;\n        background: transparent;\n        padding: var(--ni-private-listbox-padding);\n    }\n\n    :host([open][position='above']) .listbox {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    :host([open][position='below']) .listbox {\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n    }\n\n    :host([open][position='above']) .anchored-region {\n        padding-bottom: ${smallPadding};\n    }\n\n    :host([open][position='below']) .anchored-region {\n        padding-top: ${smallPadding};\n    }\n\n    .selected-value {\n        flex: auto;\n        font-family: inherit;\n        text-align: start;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        padding: 0px;\n        padding-left: ${mediumPadding};\n    }\n\n    .selected-value[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .indicator {\n        flex: none;\n        margin-left: ${smallPadding};\n        padding-right: 8px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .indicator slot[name='indicator'] svg {\n        width: ${iconSize};\n        height: ${iconSize};\n        fill: ${bodyFontColor};\n    }\n\n    :host([disabled]) .indicator slot[name='indicator'] svg {\n        fill: ${bodyDisabledFontColor};\n    }\n\n    [part='end'] {\n        margin-inline-start: auto;\n    }\n\n    ::slotted([role='option']),\n    ::slotted(option) {\n        flex: none;\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.underline,\n        css`\n            .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.outline,\n        css`\n            .control {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .control:focus-within {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .listbox slot {\n                background: ${hexToRgbaCssColor(White, 0.15)};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/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,+BAA+B,CAAC;AACxD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,mBAAmB,EACtB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;iBAGX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;UAGrB,cAAc;qBACH,YAAY;;;mDAGkB,WAAW;;;;;;;;uBAQvC,WAAW;;;;yBAIT,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;+BAKO,SAAS;;;;;;4BAMZ,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;;;;;;YAU1B,YAAY;;;;;+BAKO,SAAS;;;;;;;;;;;;;;;;;iCAiBP,qBAAqB;;mBAEnC,WAAW;;;;+BAIC,gBAAgB;;;;;iBAK9B,qBAAqB;6BACT,qBAAqB;;;;;;+BAMnB,SAAS;;;;;;;;wCAQA,YAAY;iEACa,YAAY;sBACvD,mBAAmB;4BACb,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;;;;;;;;0BAoB5B,YAAY;;;;uBAIf,YAAY;;;;;;;;;;;wBAWX,aAAa;;;;iBAIpB,qBAAqB;;;;;uBAKf,YAAY;;;;;;;;iBAQlB,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;CAWpC,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,SAAS,EAC5B,GAAG,CAAA;;uCAE4B,WAAW;;;;;qCAKb,qBAAqB;;SAEjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;uCAIvB,WAAW;;;;;yCAKT,qBAAqB;;SAErD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,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    bodyDisabledFontColor,\n    borderHoverColor,\n    borderWidth,\n    controlHeight,\n    iconSize,\n    menuMinWidth,\n    popupBorderColor,\n    smallDelay,\n    smallPadding,\n    borderRgbPartialColor,\n    mediumPadding,\n    failColor,\n    elevation2BoxShadow\n} from '../../theme-provider/design-tokens';\nimport { Theme } from '../../theme-provider/types';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { hexToRgbaCssColor } from '../../utilities/style/colors';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { DropdownAppearance } from './types';\nimport { userSelectNone } from '../../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-flex')}\n\n    :host {\n        color: ${bodyFontColor};\n        font: ${bodyFont};\n        height: ${controlHeight};\n        position: relative;\n        justify-content: center;\n        ${userSelectNone}\n        min-width: ${menuMinWidth};\n        outline: none;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-focus-indicator-width: 1px;\n        --ni-private-indicator-lines-gap: 1px;\n    }\n\n    :host::before {\n        content: '';\n        position: absolute;\n        bottom: calc(${borderWidth} + var(--ni-private-indicator-lines-gap));\n        width: 0px;\n        height: 0px;\n        justify-self: center;\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% - 8px);\n    }\n\n    :host([error-visible]):before {\n        border-bottom-color: ${failColor};\n    }\n\n    :host::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        justify-self: center;\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        :host::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host(:hover)::after,\n    :host(${focusVisible})::after {\n        width: 100%;\n    }\n\n    :host([error-visible]):after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([disabled]:hover)::after {\n        width: 0px;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .control {\n        align-items: center;\n        cursor: pointer;\n        display: flex;\n        min-height: 100%;\n        width: 100%;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        background-color: transparent;\n        padding: ${borderWidth};\n    }\n\n    :host([open]:not(:hover)) .control {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([disabled]) .control {\n        cursor: default;\n        color: ${bodyDisabledFontColor};\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .control,\n    :host([error-visible][open]) .control,\n    :host([error-visible][disabled]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    .listbox {\n        display: inline-flex;\n        flex-direction: column;\n        overflow-y: auto;\n        width: 100%;\n        --ni-private-listbox-padding: ${smallPadding};\n        max-height: calc(var(--ni-private-select-max-height) - ${smallPadding});\n        box-shadow: ${elevation2BoxShadow};\n        border: 1px solid ${popupBorderColor};\n        background-color: ${applicationBackgroundColor};\n    }\n\n    .listbox slot {\n        display: block;\n        background: transparent;\n        padding: var(--ni-private-listbox-padding);\n    }\n\n    :host([open][position='above']) .listbox {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    :host([open][position='below']) .listbox {\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n    }\n\n    :host([open][position='above']) .anchored-region {\n        padding-bottom: ${smallPadding};\n    }\n\n    :host([open][position='below']) .anchored-region {\n        padding-top: ${smallPadding};\n    }\n\n    .selected-value {\n        flex: auto;\n        font-family: inherit;\n        text-align: start;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        padding: 0px;\n        padding-left: ${mediumPadding};\n    }\n\n    .selected-value[disabled]::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .indicator {\n        flex: none;\n        margin-left: ${smallPadding};\n        padding-right: 8px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .indicator slot[name='indicator'] svg {\n        width: ${iconSize};\n        height: ${iconSize};\n        fill: ${bodyFontColor};\n    }\n\n    :host([disabled]) .indicator slot[name='indicator'] svg {\n        fill: ${bodyDisabledFontColor};\n    }\n\n    [part='end'] {\n        margin-inline-start: auto;\n    }\n\n    ::slotted([role='option']),\n    ::slotted(option) {\n        flex: none;\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.underline,\n        css`\n            .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.outline,\n        css`\n            .control {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .control:focus-within {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([disabled]) .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n            }\n        `\n    ),\n    themeBehavior(\n        Theme.color,\n        css`\n            .listbox slot {\n                background: ${hexToRgbaCssColor(White, 0.15)};\n            }\n        `\n    )\n);\n"]}

package/dist/esm/radio/styles.js

@@ -21,7 +21,6 @@ export const styles = css `
         position: relative;
         width: calc(${controlHeight} / 2);
         height: calc(${controlHeight} / 2);
-        box-sizing: border-box;
         flex-shrink: 0;
         border: ${borderWidth} solid ${borderColor};
         border-radius: 100%;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/radio/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,QAAQ,EACR,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,QAAQ;;;;;;;;;;;;;sBAaF,aAAa;uBACZ,aAAa;;;kBAGlB,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;iCAKyB,qBAAqB;6BACzB,qBAAqB;;;;wBAI1B,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;;;YAG5B,YAAY;;;4BAGI,aAAa;6BACZ,aAAa;4BACd,gBAAgB;;;;;;iBAM3B,aAAa;;;;;;iBAMb,qBAAqB;;;;;;;;kBAQpB,QAAQ;iBACT,QAAQ;;;;;;;;;gBAST,WAAW;;;;qBAIN,qBAAqB;;CAEzC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    bodyDisabledFontColor,\n    bodyFont,\n    bodyFontColor,\n    borderColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    iconSize,\n    smallDelay\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        font: ${bodyFont};\n        align-items: center;\n        outline: none;\n        width: fit-content;\n        cursor: pointer;\n    }\n\n    :host([disabled]) {\n        cursor: default;\n    }\n\n    .control {\n        position: relative;\n        width: calc(${controlHeight} / 2);\n        height: calc(${controlHeight} / 2);\n        box-sizing: border-box;\n        flex-shrink: 0;\n        border: ${borderWidth} solid ${borderColor};\n        border-radius: 100%;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        transition: box-shadow ${smallDelay};\n        ${\n            /*\n             * Firefox includes the line height in the outline height calculation (not sure if intended or accidental).\n             * Set it to 0 to ensure the outline is just as high as the control.\n             */ ''\n        }\n        line-height: 0;\n    }\n\n    :host([disabled]) .control {\n        background-color: rgba(${borderRgbPartialColor}, 0.1);\n        border-color: rgba(${borderRgbPartialColor}, 0.2);\n    }\n\n    :host(:not([disabled]):not(:active):hover) .control {\n        border-color: ${borderHoverColor};\n        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n    }\n\n    :host(${focusVisible}) .control {\n        border-color: ${borderHoverColor};\n    }\n\n    :host(${focusVisible}) .control::after {\n        content: '';\n        position: absolute;\n        width: calc(2px + ${controlHeight} / 2);\n        height: calc(2px + ${controlHeight} / 2);\n        border: 2px solid ${borderHoverColor};\n        border-radius: 100%;\n    }\n\n    .label {\n        font: inherit;\n        color: ${bodyFontColor};\n        padding-left: 1ch;\n        cursor: inherit;\n    }\n\n    :host([disabled]) .label {\n        color: ${bodyDisabledFontColor};\n    }\n\n    slot[name='checked-indicator'] {\n        display: none;\n    }\n\n    slot[name='checked-indicator'] svg {\n        height: ${iconSize};\n        width: ${iconSize};\n        overflow: visible;\n    }\n\n    :host(.checked) slot[name='checked-indicator'] {\n        display: contents;\n    }\n\n    slot[name='checked-indicator'] circle {\n        fill: ${borderColor};\n    }\n\n    :host([disabled]) slot[name='checked-indicator'] circle {\n        fill: rgba(${borderRgbPartialColor}, 0.3);\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/radio/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,QAAQ,EACR,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,QAAQ;;;;;;;;;;;;;sBAaF,aAAa;uBACZ,aAAa;;kBAElB,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;iCAKyB,qBAAqB;6BACzB,qBAAqB;;;;wBAI1B,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;;;YAG5B,YAAY;;;4BAGI,aAAa;6BACZ,aAAa;4BACd,gBAAgB;;;;;;iBAM3B,aAAa;;;;;;iBAMb,qBAAqB;;;;;;;;kBAQpB,QAAQ;iBACT,QAAQ;;;;;;;;;gBAST,WAAW;;;;qBAIN,qBAAqB;;CAEzC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    bodyDisabledFontColor,\n    bodyFont,\n    bodyFontColor,\n    borderColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlHeight,\n    iconSize,\n    smallDelay\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        font: ${bodyFont};\n        align-items: center;\n        outline: none;\n        width: fit-content;\n        cursor: pointer;\n    }\n\n    :host([disabled]) {\n        cursor: default;\n    }\n\n    .control {\n        position: relative;\n        width: calc(${controlHeight} / 2);\n        height: calc(${controlHeight} / 2);\n        flex-shrink: 0;\n        border: ${borderWidth} solid ${borderColor};\n        border-radius: 100%;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        transition: box-shadow ${smallDelay};\n        ${\n            /*\n             * Firefox includes the line height in the outline height calculation (not sure if intended or accidental).\n             * Set it to 0 to ensure the outline is just as high as the control.\n             */ ''\n        }\n        line-height: 0;\n    }\n\n    :host([disabled]) .control {\n        background-color: rgba(${borderRgbPartialColor}, 0.1);\n        border-color: rgba(${borderRgbPartialColor}, 0.2);\n    }\n\n    :host(:not([disabled]):not(:active):hover) .control {\n        border-color: ${borderHoverColor};\n        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n    }\n\n    :host(${focusVisible}) .control {\n        border-color: ${borderHoverColor};\n    }\n\n    :host(${focusVisible}) .control::after {\n        content: '';\n        position: absolute;\n        width: calc(2px + ${controlHeight} / 2);\n        height: calc(2px + ${controlHeight} / 2);\n        border: 2px solid ${borderHoverColor};\n        border-radius: 100%;\n    }\n\n    .label {\n        font: inherit;\n        color: ${bodyFontColor};\n        padding-left: 1ch;\n        cursor: inherit;\n    }\n\n    :host([disabled]) .label {\n        color: ${bodyDisabledFontColor};\n    }\n\n    slot[name='checked-indicator'] {\n        display: none;\n    }\n\n    slot[name='checked-indicator'] svg {\n        height: ${iconSize};\n        width: ${iconSize};\n        overflow: visible;\n    }\n\n    :host(.checked) slot[name='checked-indicator'] {\n        display: contents;\n    }\n\n    slot[name='checked-indicator'] circle {\n        fill: ${borderColor};\n    }\n\n    :host([disabled]) slot[name='checked-indicator'] circle {\n        fill: rgba(${borderRgbPartialColor}, 0.3);\n    }\n`;\n"]}

package/dist/esm/rich-text/editor/styles.js

@@ -31,7 +31,6 @@ export const styles = css `
     }
 
     .container {
-        box-sizing: border-box;
         display: flex;
         flex-direction: column;
         position: relative;
@@ -112,7 +111,6 @@ export const styles = css `
         ${
 /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''}
         padding-right: calc(${iconSize});
-        box-sizing: border-box;
         position: relative;
         color: inherit;
     }
@@ -234,7 +232,6 @@ export const styles = css `
     ${toolbarTag}::part(positioning-region) {
         background: transparent;
         padding-right: 8px;
-        box-sizing: border-box;
         gap: 0px;
         height: var(--ni-private-rich-text-editor-footer-section-height);
     }

package/dist/esm/rich-text/editor/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/rich-text/editor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,qBAAqB,EACrB,6BAA6B,EAC7B,SAAS,EACT,QAAQ,EACR,UAAU,EACV,aAAa,EACb,eAAe,EACf,aAAa,EACb,iBAAiB,EACpB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;;;gBAGD,QAAQ;;iBAEP,aAAa;;;cAGhB,WAAW;;;UAGf;AACE,yFAAyF,CAAC,EAC9F;;;;UAIE;AACE,qHAAqH,CAAC,EAC1H;;;;;;;;;;kBAUU,WAAW,eAAe,qBAAqB;;;;;;;4BAOrC,WAAW;;;;;yBAKd,gBAAgB;;4BAEb,UAAU;;;;+BAIP,gBAAgB;;;;;;;;;;iBAU9B,qBAAqB;kBACpB,WAAW,eAAe,qBAAqB;;;;+BAIlC,SAAS;;;;iCAIP,WAAW;;;;;;;;+BAQb,SAAS;;;;;;;;;;kBAUtB,WAAW;;;;;;;;;;;;;;;;;;UAkBnB;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;MAMhC;AACE;;;;;GAKG,CAAC,EACR;;;;;;;;;;;;;;;;;MAiBE,CAAA,+DAAgE,EAAE;;;;;;;;;;;;;;;;;;MAkBlE;AACE;;;GAGG,CAAC,EACR;;iBAEa,qBAAqB;;;;;;;;;iBASrB,6BAA6B;;;MAGxC;AACE;;;GAGG,CAAC,EACR;;iBAEa,aAAa;;UAEpB;AACE;;;;;;;;GAQG,CAAC,EACR;;;;;iBAKS,qBAAqB;;;;;MAKhC,CAAA,2BAA4B,EAAE;;MAE9B,CAAA,uDAAwD,EAAE;;iBAE/C,aAAa;;;;iBAIb,qBAAqB;;;;;;;;;;;yBAWb,qBAAqB;;;;;;;;;MASxC,UAAU;;;;;;;;MAQV,UAAU;;;;MAIV,SAAS;MACT,eAAe;kBACH,iBAAiB;;;;;;6BAMN,eAAe;eAC7B,eAAe;;;;gBAId,SAAS;gBACT,eAAe;gBACf,eAAe;gBACf,aAAa;kBACX,iBAAiB;;;;;;;;;;eAUpB,aAAa;;;CAG3B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\nimport {\n    bodyDisabledFontColor,\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlLabelFontColor,\n    controlLabelDisabledFontColor,\n    failColor,\n    iconSize,\n    smallDelay,\n    mediumPadding,\n    standardPadding,\n    linkFontColor,\n    controlSlimHeight\n} from '../../theme-provider/design-tokens';\nimport { styles as errorStyles } from '../../patterns/error/styles';\nimport { toolbarTag } from '../../toolbar';\nimport { toggleButtonTag } from '../../toggle-button';\nimport { buttonTag } from '../../button';\nimport { anchorButtonTag } from '../../anchor-button';\nimport { menuButtonTag } from '../../menu-button';\n\nexport const styles = css`\n    ${display('inline-flex')}\n    ${errorStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        color: ${bodyFontColor};\n        flex-direction: column;\n        --ni-private-rich-text-editor-hover-indicator-width: calc(\n            ${borderWidth} + 1px\n        );\n\n        ${\n            /** Initial height of rich text editor with one line space when the footer is visible. */ ''\n        }\n        height: 82px;\n        --ni-private-rich-text-editor-footer-section-height: 40px;\n        --ni-private-rich-text-editor-footer-section-border-top-width: 2px;\n        ${\n            /** Minimum width is added to accommodate all the possible buttons in the toolbar and to support the mobile width. */ ''\n        }\n        min-width: 360px;\n    }\n\n    .container {\n        box-sizing: border-box;\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        height: 100%;\n        border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);\n    }\n\n    .container::after {\n        display: block;\n        content: ' ';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        left: 50%;\n        transform: translate(-50%, 50%);\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-rich-text-editor-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    .container:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    @media (prefers-reduced-motion) {\n        .container::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([disabled]) .container {\n        color: ${bodyDisabledFontColor};\n        border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .container {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .container::after {\n        width: calc(100% + 2 * ${borderWidth});\n    }\n\n    :host([disabled]:hover) .container::after {\n        width: 0px;\n    }\n\n    :host([error-visible]) .container::after {\n        border-bottom-color: ${failColor};\n    }\n\n    .editor-container {\n        display: contents;\n    }\n\n    .editor {\n        display: flex;\n        flex-direction: column;\n        border: ${borderWidth} solid transparent;\n        border-radius: 0px;\n        flex: 1;\n        overflow: hidden;\n    }\n\n    :host([footer-hidden]) .editor {\n        height: 100%;\n    }\n\n    .ProseMirror {\n        overflow: auto;\n        height: 100%;\n        border: 0px;\n        border-radius: 0px;\n        background-color: transparent;\n        font: inherit;\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        box-sizing: border-box;\n        position: relative;\n        color: inherit;\n    }\n\n    ${\n        /**\n         * Below are the styles from prosemirror-view as the Prose mirror expects the \"white-space\" to be set. The recommendation is to load the style from the below package.\n         * However, the other classes used in the below file like \".ProseMirror-selectednode\", \".ProseMirror-hideselection\" were not used anywhere in the \".Prosemirror\" content editable div in the DOM. So added only the necessary styles below.\n         *\n         * https://github.com/ProseMirror/prosemirror-view/blob/db2223a88b540a8f381fc2720198342e29a60566/style/prosemirror.css#L5C1-L12C2\n         */ ''\n    }\n    .ProseMirror {\n        word-wrap: break-word;\n        white-space: pre-wrap;\n        -webkit-font-variant-ligatures: none;\n        font-variant-ligatures: none;\n        font-feature-settings: 'liga' 0;\n    }\n\n    .ProseMirror pre {\n        white-space: pre-wrap;\n    }\n\n    .ProseMirror li {\n        position: relative;\n    }\n\n    ${/** End of Prose Mirror defined styles from prosemirror-view */ ''}\n\n    .ProseMirror-focused {\n        outline: none;\n    }\n\n    .ProseMirror > :first-child {\n        margin-block-start: 0;\n    }\n\n    .ProseMirror > :last-child {\n        margin-block-end: 0;\n    }\n\n    .ProseMirror li > p {\n        margin-block: 0;\n    }\n\n    ${\n        /**\n         * Styles provided by Tiptap are necessary to display the placeholder value when the editor is empty.\n         * Tiptap doc reference: https://tiptap.dev/api/extensions/placeholder#additional-setup\n         */ ''\n    }\n    .ProseMirror p.is-editor-empty:first-child::before {\n        color: ${controlLabelFontColor};\n        content: attr(data-placeholder);\n        float: left;\n        height: 0;\n        pointer-events: none;\n        word-break: break-word;\n    }\n\n    :host([disabled]) .ProseMirror p.is-editor-empty:first-child::before {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    ${\n        /**\n         * Custom anchor stylings can be removed once leveraging 'nimble-anchor' is supported.\n         * See: https://github.com/ni/nimble/issues/1516\n         */ ''\n    }\n    .ProseMirror a {\n        color: ${linkFontColor};\n        white-space: normal;\n        ${\n            /**\n             * Setting 'pointer-events: none;' to restrict the user from opening a link using the right-click context menu: If the user manually edits\n             * the link's text content, the 'href' attribute of the anchor tag will not be updated. If they attempt to open it using\n             * the right-click context menu with 'Open in new tab/window,' it will still navigate to the link specified\n             * in the 'href' attribute, which may create unnecessary confusion while trying to open the link.\n             *\n             * Using pointer-events: none to disable link interactions can be removed when hyperlink support is added.\n             * see: https://github.com/ni/nimble/issues/1527\n             */ ''\n        }\n        pointer-events: none;\n    }\n\n    :host([disabled]) .ProseMirror a {\n        color: ${bodyDisabledFontColor};\n        fill: currentcolor;\n        cursor: default;\n    }\n\n    ${/** End of anchor styles */ ''}\n\n    ${/* Shared styles for all mention views at edit time. */ ''}\n    .ProseMirror .nimble-mention-view-edit {\n        color: ${bodyFontColor};\n    }\n\n    :host([disabled]) .ProseMirror .nimble-mention-view-edit {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .footer-section {\n        display: flex;\n        justify-content: space-between;\n        flex-shrink: 0;\n        border: 0px;\n        border-top: var(\n                --ni-private-rich-text-editor-footer-section-border-top-width\n            )\n            solid rgba(${borderRgbPartialColor}, 0.1);\n        height: var(--ni-private-rich-text-editor-footer-section-height);\n        overflow: hidden;\n    }\n\n    :host([footer-hidden]) .footer-section {\n        display: none;\n    }\n\n    ${toolbarTag}::part(positioning-region) {\n        background: transparent;\n        padding-right: 8px;\n        box-sizing: border-box;\n        gap: 0px;\n        height: var(--ni-private-rich-text-editor-footer-section-height);\n    }\n\n    ${toolbarTag}::part(start) {\n        gap: 8px;\n    }\n\n    ${buttonTag},\n    ${toggleButtonTag} {\n        height: ${controlSlimHeight};\n    }\n\n    .footer-actions {\n        display: flex;\n        justify-content: flex-end;\n        margin-inline-end: ${standardPadding};\n        gap: ${standardPadding};\n        place-items: center;\n    }\n\n    ::slotted(${buttonTag}),\n    ::slotted(${toggleButtonTag}),\n    ::slotted(${anchorButtonTag}),\n    ::slotted(${menuButtonTag}) {\n        height: ${controlSlimHeight};\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-rich-text-editor-scrollbar-width);\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/rich-text/editor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,qBAAqB,EACrB,6BAA6B,EAC7B,SAAS,EACT,QAAQ,EACR,UAAU,EACV,aAAa,EACb,eAAe,EACf,aAAa,EACb,iBAAiB,EACpB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;;;gBAGD,QAAQ;;iBAEP,aAAa;;;cAGhB,WAAW;;;UAGf;AACE,yFAAyF,CAAC,EAC9F;;;;UAIE;AACE,qHAAqH,CAAC,EAC1H;;;;;;;;;kBASU,WAAW,eAAe,qBAAqB;;;;;;;4BAOrC,WAAW;;;;;yBAKd,gBAAgB;;4BAEb,UAAU;;;;+BAIP,gBAAgB;;;;;;;;;;iBAU9B,qBAAqB;kBACpB,WAAW,eAAe,qBAAqB;;;;+BAIlC,SAAS;;;;iCAIP,WAAW;;;;;;;;+BAQb,SAAS;;;;;;;;;;kBAUtB,WAAW;;;;;;;;;;;;;;;;;;UAkBnB;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;MAKhC;AACE;;;;;GAKG,CAAC,EACR;;;;;;;;;;;;;;;;;MAiBE,CAAA,+DAAgE,EAAE;;;;;;;;;;;;;;;;;;MAkBlE;AACE;;;GAGG,CAAC,EACR;;iBAEa,qBAAqB;;;;;;;;;iBASrB,6BAA6B;;;MAGxC;AACE;;;GAGG,CAAC,EACR;;iBAEa,aAAa;;UAEpB;AACE;;;;;;;;GAQG,CAAC,EACR;;;;;iBAKS,qBAAqB;;;;;MAKhC,CAAA,2BAA4B,EAAE;;MAE9B,CAAA,uDAAwD,EAAE;;iBAE/C,aAAa;;;;iBAIb,qBAAqB;;;;;;;;;;;yBAWb,qBAAqB;;;;;;;;;MASxC,UAAU;;;;;;;MAOV,UAAU;;;;MAIV,SAAS;MACT,eAAe;kBACH,iBAAiB;;;;;;6BAMN,eAAe;eAC7B,eAAe;;;;gBAId,SAAS;gBACT,eAAe;gBACf,eAAe;gBACf,aAAa;kBACX,iBAAiB;;;;;;;;;;eAUpB,aAAa;;;CAG3B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\nimport {\n    bodyDisabledFontColor,\n    bodyFont,\n    bodyFontColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    borderWidth,\n    controlLabelFontColor,\n    controlLabelDisabledFontColor,\n    failColor,\n    iconSize,\n    smallDelay,\n    mediumPadding,\n    standardPadding,\n    linkFontColor,\n    controlSlimHeight\n} from '../../theme-provider/design-tokens';\nimport { styles as errorStyles } from '../../patterns/error/styles';\nimport { toolbarTag } from '../../toolbar';\nimport { toggleButtonTag } from '../../toggle-button';\nimport { buttonTag } from '../../button';\nimport { anchorButtonTag } from '../../anchor-button';\nimport { menuButtonTag } from '../../menu-button';\n\nexport const styles = css`\n    ${display('inline-flex')}\n    ${errorStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        color: ${bodyFontColor};\n        flex-direction: column;\n        --ni-private-rich-text-editor-hover-indicator-width: calc(\n            ${borderWidth} + 1px\n        );\n\n        ${\n            /** Initial height of rich text editor with one line space when the footer is visible. */ ''\n        }\n        height: 82px;\n        --ni-private-rich-text-editor-footer-section-height: 40px;\n        --ni-private-rich-text-editor-footer-section-border-top-width: 2px;\n        ${\n            /** Minimum width is added to accommodate all the possible buttons in the toolbar and to support the mobile width. */ ''\n        }\n        min-width: 360px;\n    }\n\n    .container {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        height: 100%;\n        border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);\n    }\n\n    .container::after {\n        display: block;\n        content: ' ';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        left: 50%;\n        transform: translate(-50%, 50%);\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-rich-text-editor-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    .container:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    @media (prefers-reduced-motion) {\n        .container::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([disabled]) .container {\n        color: ${bodyDisabledFontColor};\n        border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .container {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .container::after {\n        width: calc(100% + 2 * ${borderWidth});\n    }\n\n    :host([disabled]:hover) .container::after {\n        width: 0px;\n    }\n\n    :host([error-visible]) .container::after {\n        border-bottom-color: ${failColor};\n    }\n\n    .editor-container {\n        display: contents;\n    }\n\n    .editor {\n        display: flex;\n        flex-direction: column;\n        border: ${borderWidth} solid transparent;\n        border-radius: 0px;\n        flex: 1;\n        overflow: hidden;\n    }\n\n    :host([footer-hidden]) .editor {\n        height: 100%;\n    }\n\n    .ProseMirror {\n        overflow: auto;\n        height: 100%;\n        border: 0px;\n        border-radius: 0px;\n        background-color: transparent;\n        font: inherit;\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        position: relative;\n        color: inherit;\n    }\n\n    ${\n        /**\n         * Below are the styles from prosemirror-view as the Prose mirror expects the \"white-space\" to be set. The recommendation is to load the style from the below package.\n         * However, the other classes used in the below file like \".ProseMirror-selectednode\", \".ProseMirror-hideselection\" were not used anywhere in the \".Prosemirror\" content editable div in the DOM. So added only the necessary styles below.\n         *\n         * https://github.com/ProseMirror/prosemirror-view/blob/db2223a88b540a8f381fc2720198342e29a60566/style/prosemirror.css#L5C1-L12C2\n         */ ''\n    }\n    .ProseMirror {\n        word-wrap: break-word;\n        white-space: pre-wrap;\n        -webkit-font-variant-ligatures: none;\n        font-variant-ligatures: none;\n        font-feature-settings: 'liga' 0;\n    }\n\n    .ProseMirror pre {\n        white-space: pre-wrap;\n    }\n\n    .ProseMirror li {\n        position: relative;\n    }\n\n    ${/** End of Prose Mirror defined styles from prosemirror-view */ ''}\n\n    .ProseMirror-focused {\n        outline: none;\n    }\n\n    .ProseMirror > :first-child {\n        margin-block-start: 0;\n    }\n\n    .ProseMirror > :last-child {\n        margin-block-end: 0;\n    }\n\n    .ProseMirror li > p {\n        margin-block: 0;\n    }\n\n    ${\n        /**\n         * Styles provided by Tiptap are necessary to display the placeholder value when the editor is empty.\n         * Tiptap doc reference: https://tiptap.dev/api/extensions/placeholder#additional-setup\n         */ ''\n    }\n    .ProseMirror p.is-editor-empty:first-child::before {\n        color: ${controlLabelFontColor};\n        content: attr(data-placeholder);\n        float: left;\n        height: 0;\n        pointer-events: none;\n        word-break: break-word;\n    }\n\n    :host([disabled]) .ProseMirror p.is-editor-empty:first-child::before {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    ${\n        /**\n         * Custom anchor stylings can be removed once leveraging 'nimble-anchor' is supported.\n         * See: https://github.com/ni/nimble/issues/1516\n         */ ''\n    }\n    .ProseMirror a {\n        color: ${linkFontColor};\n        white-space: normal;\n        ${\n            /**\n             * Setting 'pointer-events: none;' to restrict the user from opening a link using the right-click context menu: If the user manually edits\n             * the link's text content, the 'href' attribute of the anchor tag will not be updated. If they attempt to open it using\n             * the right-click context menu with 'Open in new tab/window,' it will still navigate to the link specified\n             * in the 'href' attribute, which may create unnecessary confusion while trying to open the link.\n             *\n             * Using pointer-events: none to disable link interactions can be removed when hyperlink support is added.\n             * see: https://github.com/ni/nimble/issues/1527\n             */ ''\n        }\n        pointer-events: none;\n    }\n\n    :host([disabled]) .ProseMirror a {\n        color: ${bodyDisabledFontColor};\n        fill: currentcolor;\n        cursor: default;\n    }\n\n    ${/** End of anchor styles */ ''}\n\n    ${/* Shared styles for all mention views at edit time. */ ''}\n    .ProseMirror .nimble-mention-view-edit {\n        color: ${bodyFontColor};\n    }\n\n    :host([disabled]) .ProseMirror .nimble-mention-view-edit {\n        color: ${bodyDisabledFontColor};\n    }\n\n    .footer-section {\n        display: flex;\n        justify-content: space-between;\n        flex-shrink: 0;\n        border: 0px;\n        border-top: var(\n                --ni-private-rich-text-editor-footer-section-border-top-width\n            )\n            solid rgba(${borderRgbPartialColor}, 0.1);\n        height: var(--ni-private-rich-text-editor-footer-section-height);\n        overflow: hidden;\n    }\n\n    :host([footer-hidden]) .footer-section {\n        display: none;\n    }\n\n    ${toolbarTag}::part(positioning-region) {\n        background: transparent;\n        padding-right: 8px;\n        gap: 0px;\n        height: var(--ni-private-rich-text-editor-footer-section-height);\n    }\n\n    ${toolbarTag}::part(start) {\n        gap: 8px;\n    }\n\n    ${buttonTag},\n    ${toggleButtonTag} {\n        height: ${controlSlimHeight};\n    }\n\n    .footer-actions {\n        display: flex;\n        justify-content: flex-end;\n        margin-inline-end: ${standardPadding};\n        gap: ${standardPadding};\n        place-items: center;\n    }\n\n    ::slotted(${buttonTag}),\n    ::slotted(${toggleButtonTag}),\n    ::slotted(${anchorButtonTag}),\n    ::slotted(${menuButtonTag}) {\n        height: ${controlSlimHeight};\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-rich-text-editor-scrollbar-width);\n    }\n`;\n"]}

package/dist/esm/rich-text/viewer/styles.js

@@ -16,7 +16,6 @@ export const styles = css `
     .viewer {
         font: inherit;
         outline: none;
-        box-sizing: border-box;
         position: relative;
         color: inherit;
         overflow-wrap: anywhere;

package/dist/esm/rich-text/viewer/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/rich-text/viewer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,aAAa,EAChB,MAAM,oCAAoC,CAAC;AAE5C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;iBAEP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BxB;AACE,gLAAgL,CAAC,EACrL;;;;;MAKE;AACE;;;;;;;;;;GAUG,CAAC,EACR;;iBAEa,aAAa;;CAE7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\nimport {\n    bodyFont,\n    bodyFontColor,\n    linkFontColor\n} from '../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        color: ${bodyFontColor};\n        width: auto;\n        overflow: auto;\n        height: 100%;\n    }\n\n    .viewer {\n        font: inherit;\n        outline: none;\n        box-sizing: border-box;\n        position: relative;\n        color: inherit;\n        overflow-wrap: anywhere;\n    }\n\n    .viewer > :first-child {\n        margin-block-start: 0;\n    }\n\n    .viewer > :last-child {\n        margin-block-end: 0;\n    }\n\n    li > p {\n        margin-block: 0;\n    }\n\n    ${\n        /* In Firefox, if the paragraph within the list is empty, the ordered lists overlap. Therefore, hiding the paragraph element allows for the proper rendering of empty lists.  */ ''\n    }\n    li > p:empty {\n        display: none;\n    }\n\n    ${\n        /**\n         * In the rich-text editor, an absolute link renders as a native anchor, not a `nimble-anchor`. When such a link\n         * is not HTTPS/HTTP, the anchor renders without an `href`, appearing as plain text.\n         * However, in the rich-text viewer, absolute links are rendered as `nimble-anchor`s, and they do not look like\n         * plain text when the `href` attribute is absent. They have a \"disabled\" color and may have an underline.\n         * To ensure a consistent appearance between the editor and viewer, we force the font color to the default link/\n         * plain text color regardless of the `href` attribute's presence. To remove the underline, the markdown parser\n         * emits an `underline-hidden` attribute when the `href` attribute is absent.\n         *\n         * See models/markdown-parser.ts where link elements are emitted for more info.\n         */ ''\n    }\n    nimble-anchor::part(control) {\n        color: ${linkFontColor};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/rich-text/viewer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,aAAa,EAChB,MAAM,oCAAoC,CAAC;AAE5C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;iBAEP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;MA0BxB;AACE,gLAAgL,CAAC,EACrL;;;;;MAKE;AACE;;;;;;;;;;GAUG,CAAC,EACR;;iBAEa,aAAa;;CAE7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\nimport {\n    bodyFont,\n    bodyFontColor,\n    linkFontColor\n} from '../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('flex')}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        color: ${bodyFontColor};\n        width: auto;\n        overflow: auto;\n        height: 100%;\n    }\n\n    .viewer {\n        font: inherit;\n        outline: none;\n        position: relative;\n        color: inherit;\n        overflow-wrap: anywhere;\n    }\n\n    .viewer > :first-child {\n        margin-block-start: 0;\n    }\n\n    .viewer > :last-child {\n        margin-block-end: 0;\n    }\n\n    li > p {\n        margin-block: 0;\n    }\n\n    ${\n        /* In Firefox, if the paragraph within the list is empty, the ordered lists overlap. Therefore, hiding the paragraph element allows for the proper rendering of empty lists.  */ ''\n    }\n    li > p:empty {\n        display: none;\n    }\n\n    ${\n        /**\n         * In the rich-text editor, an absolute link renders as a native anchor, not a `nimble-anchor`. When such a link\n         * is not HTTPS/HTTP, the anchor renders without an `href`, appearing as plain text.\n         * However, in the rich-text viewer, absolute links are rendered as `nimble-anchor`s, and they do not look like\n         * plain text when the `href` attribute is absent. They have a \"disabled\" color and may have an underline.\n         * To ensure a consistent appearance between the editor and viewer, we force the font color to the default link/\n         * plain text color regardless of the `href` attribute's presence. To remove the underline, the markdown parser\n         * emits an `underline-hidden` attribute when the `href` attribute is absent.\n         *\n         * See models/markdown-parser.ts where link elements are emitted for more info.\n         */ ''\n    }\n    nimble-anchor::part(control) {\n        color: ${linkFontColor};\n    }\n`;\n"]}

package/dist/esm/rich-text-mention/users/view/styles.js

@@ -5,7 +5,6 @@ export const styles = css `
     ${display('inline-block')}
 
     :host {
-        box-sizing: border-box;
         font: ${mentionFont};
     }
 

package/dist/esm/rich-text-mention/users/view/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/rich-text-mention/users/view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EAC3B,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;gBAIb,WAAW;;;;iBAIV,gBAAgB;;;;iBAIhB,wBAAwB;;CAExC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../../utilities/style/display';\nimport {\n    mentionFont,\n    mentionFontColor,\n    mentionDisabledFontColor\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-block')}\n\n    :host {\n        box-sizing: border-box;\n        font: ${mentionFont};\n    }\n\n    .control {\n        color: ${mentionFontColor};\n    }\n\n    :host([disabled]) .control {\n        color: ${mentionDisabledFontColor};\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/rich-text-mention/users/view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EAC3B,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,WAAW;;;;iBAIV,gBAAgB;;;;iBAIhB,wBAAwB;;CAExC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../../utilities/style/display';\nimport {\n    mentionFont,\n    mentionFontColor,\n    mentionDisabledFontColor\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n    ${display('inline-block')}\n\n    :host {\n        font: ${mentionFont};\n    }\n\n    .control {\n        color: ${mentionFontColor};\n    }\n\n    :host([disabled]) .control {\n        color: ${mentionDisabledFontColor};\n    }\n`;\n"]}

package/dist/esm/switch/styles.js

@@ -54,7 +54,6 @@ export const styles = css `
         display: flex;
         height: var(--ni-private-switch-height);
         width: calc(var(--ni-private-switch-height) * 2);
-        box-sizing: border-box;
         background-color: ${fillHoverColor};
         border-radius: calc(var(--ni-private-switch-height) / 2);
         align-items: center;
@@ -83,7 +82,6 @@ export const styles = css `
         justify-content: center;
         align-items: center;
         background-color: var(--ni-private-switch-indicator-background-color);
-        box-sizing: border-box;
         width: var(--ni-private-switch-indicator-size);
         height: var(--ni-private-switch-indicator-size);
         border-radius: calc(var(--ni-private-switch-indicator-size) / 2);

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,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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;4BAqBlB,cAAc;;;uBAGnB,WAAW;;;;;;;YAOtB,YAAY;wBACA,gBAAgB;;;;;gCAKR,UAAU;;;;;;;;;;;;;;;;;;;;;;kBAsBxB,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        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        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

@@ -7,7 +7,6 @@ export const styles = css `
 
     :host {
         position: relative;
-        box-sizing: border-box;
         font: ${buttonLabelFont};
         height: ${controlHeight};
         color: ${bodyFontColor};

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 '../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"]}
+{"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;;;;gBAIZ,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        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

@@ -5,7 +5,6 @@ export const styles = css `
     ${display('block')}
 
     :host {
-        box-sizing: border-box;
         font: ${bodyFont};
         color: ${bodyFontColor};
         padding-top: ${standardPadding};

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 '../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"]}
+{"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;;;gBAGN,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        font: ${bodyFont};\n        color: ${bodyFontColor};\n        padding-top: ${standardPadding};\n    }\n`;\n"]}

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

@@ -15,7 +15,6 @@ export const styles = css `
         align-items: center;
         height: calc(${controlHeight} + 2 * ${borderWidth});
         border-top: calc(2 * ${borderWidth}) solid ${applicationBackgroundColor};
-        box-sizing: border-box;
         grid-template-columns:
             calc(
                 ${controlHeight} *

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,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"]}
+{"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;;;kBAG7D,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        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/row/styles.js

@@ -16,7 +16,6 @@ export const styles = css `
         background-color: ${applicationBackgroundColor};
         height: calc(${controlHeight} + 2 * ${borderWidth});
         border-top: calc(2 * ${borderWidth}) solid transparent;
-        box-sizing: border-box;
         background-clip: padding-box;
     }
 
@@ -25,7 +24,6 @@ export const styles = css `
         width: 100%;
         height: ${controlHeight};
         pointer-events: none;
-        box-sizing: border-box;
         bottom: 0px;
         position: absolute;
     }
@@ -44,9 +42,13 @@ export const styles = css `
 
     .expand-collapse-button {
         flex: 0 0 auto;
-        padding-left: calc(
-            ${mediumPadding} + (var(--ni-private-table-row-indent-level) - 1) *
-                ${controlHeight}
+        margin-left: max(
+            calc(
+                ${mediumPadding} +
+                    (var(--ni-private-table-row-indent-level) - 1) *
+                    ${controlHeight}
+            ),
+            0px
         );
     }
 
@@ -58,9 +60,13 @@ export const styles = css `
         display: flex;
         align-items: center;
         justify-content: center;
-        padding-left: calc(
-            ${mediumPadding} + (var(--ni-private-table-row-indent-level) - 1) *
-                ${controlHeight}
+        margin-left: max(
+            calc(
+                ${mediumPadding} +
+                    (var(--ni-private-table-row-indent-level) - 1) *
+                    ${controlHeight}
+            ),
+            0px
         );
     }
 

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,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"]}
+{"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;;;;;;;kBAOxB,aAAa;;;;;;;4BAOH,cAAc;;;;4BAId,iBAAiB;;;;4BAIjB,sBAAsB;;;;;;;kBAOhC,aAAa;;sBAET,aAAa;;;;;;;;iBAQlB,iBAAiB;kBAChB,iBAAiB;;;;;;;kBAOjB,aAAa;;sBAET,aAAa;;;;;;;;;;;;uBAYZ,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        background-clip: padding-box;\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([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        margin-left: max(\n            calc(\n                ${mediumPadding} +\n                    (var(--ni-private-table-row-indent-level) - 1) *\n                    ${controlHeight}\n            ),\n            0px\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        margin-left: max(\n            calc(\n                ${mediumPadding} +\n                    (var(--ni-private-table-row-indent-level) - 1) *\n                    ${controlHeight}\n            ),\n            0px\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/tabs/styles.js

@@ -4,7 +4,6 @@ export const styles = css `
     ${display('grid')}
 
     :host {
-        box-sizing: border-box;
         grid-template-columns: auto 1fr;
         grid-template-rows: auto 1fr;
     }

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 '../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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;CAyBpB,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        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

@@ -7,7 +7,6 @@ export const styles = css `
     :host {
         align-items: center;
         height: ${controlHeight};
-        box-sizing: border-box;
         font: ${bodyFont};
         color: ${bodyFontColor};
     }

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 '../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"]}
+{"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;gBACf,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        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

@@ -76,7 +76,6 @@ export const styles = css `
         font: inherit;
         flex-grow: 1;
         outline: none;
-        box-sizing: border-box;
         position: relative;
         color: inherit;
         border-radius: 0px;

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 '../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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;kBAqBtB,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        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

@@ -37,7 +37,6 @@ export const styles = css `
     }
 
     .root {
-        box-sizing: border-box;
         position: relative;
         display: flex;
         flex-direction: row;

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,EAChB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA0Cd;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} 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        opacity: 0.6;\n    }\n\n    :host([disabled]) slot[name='start']::slotted(*) {\n        opacity: 0.3;\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,EAChB,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;;;;;;;;;;;iCAWb,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA0Cd;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} 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        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        opacity: 0.6;\n    }\n\n    :host([disabled]) slot[name='start']::slotted(*) {\n        opacity: 0.3;\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/tooltip/styles.js

@@ -17,7 +17,6 @@ export const styles = css `
     }
 
     .tooltip {
-        box-sizing: border-box;
         flex-shrink: 0;
         max-width: 440px;
         box-shadow: ${elevation2BoxShadow};

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

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