diff --git a/dev/integer-field.html b/dev/integer-field.html
index f34b35ff275..728e593267f 100644
--- a/dev/integer-field.html
+++ b/dev/integer-field.html
@@ -1,21 +1,99 @@
-
+
- Integer field
+ Integer Field
-
-
-
+
+
+
+ Bells & Whistles
+
+ €
+
+
+ €
+
+
+
+
+ States
+
+ €
+
+
+ €
+
+
+
+
+
+
+
diff --git a/dev/number-field.html b/dev/number-field.html
index 0e85fc17302..a817118a09e 100644
--- a/dev/number-field.html
+++ b/dev/number-field.html
@@ -1,21 +1,99 @@
-
+
- Number field
+ Number Field
-
-
-
+
+
+
+ Bells & Whistles
+
+ €
+
+
+ €
+
+
+
+
+ States
+
+ €
+
+
+ €
+
+
+
+
+
+
+
diff --git a/packages/component-base/src/style-props.js b/packages/component-base/src/style-props.js
index 4ce6788d1c8..68d51100421 100644
--- a/packages/component-base/src/style-props.js
+++ b/packages/component-base/src/style-props.js
@@ -53,6 +53,8 @@ addGlobalThemeStyles(
--_vaadin-icon-cross: url('data:image/svg+xml;utf8,');
--_vaadin-icon-eye: url('data:image/svg+xml;utf8,');
--_vaadin-icon-eye-slash: url('data:image/svg+xml;utf8,');
+ --_vaadin-icon-minus: url('data:image/svg+xml;utf8,');
+ --_vaadin-icon-plus: url('data:image/svg+xml;utf8,');
--_vaadin-icon-warn: url('data:image/svg+xml;utf8,');
}
diff --git a/packages/number-field/src/vaadin-number-field-styles.js b/packages/number-field/src/vaadin-number-field-styles.js
index c1b81b10069..e844eeed3b8 100644
--- a/packages/number-field/src/vaadin-number-field-styles.js
+++ b/packages/number-field/src/vaadin-number-field-styles.js
@@ -6,25 +6,42 @@
import { css } from 'lit';
export const numberFieldStyles = css`
- :host([readonly]) [part$='button'] {
- pointer-events: none;
+ :host([step-buttons-visible]) ::slotted(input) {
+ text-align: center;
}
- [part='decrease-button']::before {
- content: '\\2212';
+ [part='decrease-button'],
+ [part='increase-button'] {
+ color: var(--_vaadin-color-subtle);
}
- [part='increase-button']::before {
- content: '+';
+ :is([part='decrease-button'], [part='increase-button'])::before {
+ background: currentColor;
+ content: '';
+ display: block;
+ height: var(--vaadin-icon-size, 1lh);
+ width: var(--vaadin-icon-size, 1lh);
}
- [part='decrease-button'],
- [part='increase-button'] {
- -webkit-user-select: none;
- user-select: none;
+ [part='decrease-button']::before {
+ mask-image: var(--_vaadin-icon-minus);
+ }
+
+ [part='increase-button']::before {
+ mask-image: var(--_vaadin-icon-plus);
}
:host([dir='rtl']) [part='input-field'] {
direction: ltr;
}
+
+ :host([readonly]) [part$='button'] {
+ pointer-events: none;
+ }
+
+ @media (forced-colors: active) {
+ :is([part='decrease-button'], [part='increase-button'])::before {
+ background: CanvasText;
+ }
+ }
`;