First, the Avatar component has a --calcite-avatar-background-color style option. This is not documented as an option for Navigation User but it does seem to work.
Second, I'm having trouble with CSP's style-src directive when using the Navigation User component, although this seems to apply equally to Avatar too. These dynamically set an inline style for background colors.
The violation occurs because the component uses element.setAttribute('style', 'background-color:var(--calcite-avatar-background-color, hsl(63, 60%, 90%));') to apply the style. I assume the default value is randomly generated based on the username property.
This then requires using 'unsafe-inline' or hashes for specific style strings (like the example above, and for empty strings used to clear styles) which isn't preferred.
Can these components be updated to not require inline styles? Or what is the recommended approach for configuring style-src in CSP to work smoothly with Calcite's dynamic styling?
Thank you!
