Setting individual shape to outlined text field fails if unit is not set

Nobody has claimed this yet.

### What is affected?

Component

### Description

I need to set a shape of the `md-outlined-text-field` to have rounded top angles but not rounded bottom ones when active. But it does not work if unit is not specified in css custom property which controls the shape.

### Reproduction

I need to set a shape of the md-outlined-text-field to have rounded top angles and not rounded bottom.
So I set the default shape and override the bottom corners:
```css
md-outlined-text-field {
--md-outlined-text-field-container-shape: 1.7rem;
}
md-outlined-text-field:focus {
--md-outlined-text-field-container-shape-end-start: 0;
--md-outlined-text-field-container-shape-end-end: 0;
}
```
But it results in broken shape of the component: not only the top left corner has the radius of 0, but also the left padding / margin completely disappeared:

### Workaround

I found that if I set units explicitly (0px or 0rem) it works.
```css
md-outlined-text-field:focus {
--md-outlined-text-field-container-shape-end-start: 0rem;
--md-outlined-text-field-container-shape-end-end: 0px;
}
```

### Is this a regression?

No or unsure. This never worked, or I haven't tried before.

### Affected versions

Failing on 1.2.0

### Browser/OS/Node environment

Firefox 123.0b4 (64-bit)
mas OS 14.3 (23D56)
node v18.14.0

Start at the md-outlined-text-field component's handling of its shape-related CSS custom properties and reproduce the issue with the provided CSS, especially unitless zero values. Add regression coverage for overriding the bottom corners while preserving the top radius and padding, then verify that explicit 0px or 0rem values continue to work.

Written by the indexing model from the issue text.