feat(ui5-number-input): introduce NumberInput component

[GDamyanov]

Summary

Introduces a new ui5-number-input component as the dedicated numeric input primitive, and refactors ui5-step-input to be built on top of it.

New Component: ui5-number-input

A numeric input field ui5-number-input has been extracted as a standalone component. It handles all numeric input logic internally:

• Number formatting via locale-aware NumberFormat
• Min/max validation with value-state-change event (preventable)
• Keyboard navigation: arrow keys, Ctrl/Shift modifiers, Page Up/Down
• Mouse wheel support
• Spin button acceleration on long-press
• Increment/decrement buttons (opt-in via _showStepButtons)
• Form association support
• Full accessibility (ARIA labels, value state messages)

Refactored: ui5-step-input

ui5-step-input is now a thin wrapper around ui5-number-input, delegating all numeric logic to it

A new private property is added in the ui5-number-input:

_showStepButtons is a @Private, noAttribute boolean property on ui5-number-input (defaults to false) that controls whether the increment/decrement buttons are rendered. When false, ui5-number-input renders as a plain numeric input with no step buttons — suitable for standalone use. ui5-step-input sets _showStepButtons={true} in its template, which activates the buttons and the associated CSS modifier class (ui5-number-input-root--with-buttons). This means the step button UI lives entirely inside ui5-number-input; ui5-step-input does not render any buttons of its own.

Breaking Changes

BREAKING CHANGE: ui5-step-input shadow DOM internals changed

ui5-step-input now composes ui5-number-input internally instead of ui5-input.
Any CSS, querySelector, or ::part() targeting the previous inner [ui5-input]
(.ui5-step-input-root, .ui5-step-input-input) will no longer work and must be

[github-actions]

👋 Heads-up: dev close is in effect

Thanks for the contribution! This repository is currently in dev close ahead of release next (scheduled 2026-07-09, UTC). See the release schedule for the full timeline.

This PR appears to introduce public-API changes (detected by diffing the Custom Elements Manifest against the latest published version on npm):

@ui5/webcomponents

• ➕ added element: NumberInput
• ➕ added property: accessibleName
• ➕ added property: accessibleNameRef
• ➕ added property: disabled
• ➕ added property: max
• ➕ added property: min
• ➕ added property: name
• ➕ added property: placeholder
• ➕ added property: readonly
• ➕ added property: required
• ➕ added property: step
• ➕ added property: value
• ➕ added property: valuePrecision
• ➕ added property: valueState
• ➕ added event: change
• ➕ added event: input
• ➕ added event: value-state-change
• ➕ added slot: valueStateMessage
• ➕ added attribute: accessible-name
• ➕ added attribute: accessible-name-ref
• ➕ added attribute: disabled
• ➕ added attribute: max
• ➕ added attribute: min
• ➕ added attribute: name
• ➕ added attribute: placeholder
• ➕ added attribute: readonly
• ➕ added attribute: required
• ➕ added attribute: step
• ➕ added attribute: value
• ➕ added attribute: value-precision
• ➕ added attribute: value-state
• 🔄 changed attribute value-state (type)

Could you please hold off on merging into main until the release ships? Public-API changes are best landed in the next dev cycle so they don't slip into the release at the last minute. Once the release is out, this PR is good to go.

If this change must ship in the current release, please request a review from one or two members of @UI5/ui5-team-webc so the team can sign off explicitly.

💬 False positive? If you believe this PR doesn't actually change the public API (e.g. only internal refactoring, or an entry the detector mis-attributed), please reply on this thread — your feedback helps us improve the detection during this trial run.

Posted automatically by the Dev Close Notice workflow.

[sap-ui5-webcomponents-release]

🚀 Deployed on https://pr-13799--ui5-webcomponents-preview.netlify.app

[hinzzx]

getters invoked from templates should be pure, so i think we have to move this flag reset out of the getter (e.g. into onBeforeRendering or the language handler).

[hinzzx]

the _inputValue is never set back to undefined

the template renders value={this._inputValue ?? this._displayValue}

The language-change handler resets the formatter/delimiters and sets _languageChanged = true, but does not clear _inputValue. So once the user has interacted, switching locale will not re-format the displayed number (e.g. 1,234.50 won't become 1.234,50).