[Bug]: ESM templates contain whitespace not present in minified build

[bearcat-msft]

Related Issue

Follow-up to #36282 — splitting into focused issues for clearer tracking.

Component

All components using HTML templates (Label, Listbox, TextInput observed)

Package version

3.0.0-rc.15

@microsoft/fast-element version

2.10.4

Environment

System:
    OS: macOS 15.7.7
    CPU: (8) x64 Apple M2
    Memory: 20.61 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 149.0.7827.53
    Edge: 148.0.3967.96
    Safari: 26.0.1
  npmPackages:
    @fluentui/react-components: 9.73.8 => 9.73.8 
    @fluentui/web-components: 3.0.0-rc.15 => 3.0.0-rc.15 
    @microsoft/fast-element: ^2.10.4 => 2.10.4

Current Behavior

ESM templates ship with literal newlines and indentation for readability. When consumers use CSS white-space values other than normal on parent elements, these text nodes become visible and break rendering.

The minified build strips this whitespace, but ESM does not — creating inconsistent behavior between builds.

Note: It is not clear which components are afflicted with this problem, or if it is something beyond line breaks in the template whitespace.

Current workaround

Consumers can strip whitespace via rollup template sanitization, but this:

• Bakes @fluentui/web-components into consumer bundles
• Increases bundle size
• Requires every consuming team to implement the same fix

Proposed Solutions

1. :host reset for white-space — Add white-space: normal to :host in component stylesheets
2. Wrapper root element with white-space reset — Wrap template content in an element with white-space: normal
3. Eliminate whitespace from templates — Ship single-line templates in ESM (requires per-template care since some whitespace may be structural)

Expected Behavior

ESM and minified builds should behave identically regarding whitespace handling.

Reproduction

https://stackblitz.com/edit/vitejs-vite-vcgc2r59?file=src%2Fmain.js

Steps to reproduce

1. Open the StackBlitz reproduction
2. Observe whitespace artifacts in components when parent has non-normal white-space CSS

Are you reporting an Accessibility issue?

None

Suggested severity

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there is not already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.