bug(mat-progress-bar): Using dir="rtl" does not work correctly

[vincentsels]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Adding dir="rtl" to a <mat-progress-bar> used to flip the direction to right-to-left. This currently doesn't work anymore. The result seems something random:

(note that explicitly setting dir="ltr" does work correctly)

This was already fixed once in 2021, but seems to be broken since then: #22705

Reproduction

StackBlitz link: https://stackblitz.com/edit/wnrmdf?file=src%2Fexample%2Fprogress-bar-determinate-example.html

Expected Behavior

The progress bar is displayed from right to left.

Actual Behavior

The progress bar is filled in somewhere in the middle, seemingly randomly.

Environment

• Angular: 17.0.0
• CDK/Material: 17.0.3
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

I've sent a fix in #28576, but you can also resolve it by putting the dir on a parent element.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}