[number-field] Disabled field step buttons almost invisible when value is set

[web-padawan]

Description

The vaadin-number-field has special logic to set disabled on step buttons (and it is also set when host is disabled).
This becomes problematic since there is opacity: 0.2 set on the disabled buttons by the themes:

web-components/packages/number-field/theme/lumo/vaadin-number-field-styles.js

Lines 17 to 19 in 6f3ad57

	[part$='button'][disabled] {
	opacity: 0.2;
	}

As a result, here's the difference of disabled field with and without value:

No value	With value

Expected outcome

Expected the step buttons in the disabled number field to look the same regardless of whether value is present.

This should be probably done by not applying opacity to disabled buttons when the field itself is disabled.

Minimal reproducible example

<-- Correct: no value -->
<vaadin-number-field label="Count" step-buttons-visible disabled></vaadin-number-field>

<-- Incorrect: with value -->
<vaadin-number-field label="Count" step-buttons-visible disabled value="1"></vaadin-number-field>

Steps to reproduce

Add the snippet above to the HTML page, note the difference in step buttons.

Environment

Vaadin version(s): 24.x and earlier

Browsers

Issue is not browser related