@ui5/webcomponents 2.26.0-rc.1 → 2.27.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.26.0-rc.1",
+  "version": "2.27.0-rc.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -56,22 +56,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.26.0-rc.1",
-    "@ui5/webcomponents-icons": "2.26.0-rc.1",
-    "@ui5/webcomponents-icons-business-suite": "2.26.0-rc.1",
-    "@ui5/webcomponents-icons-tnt": "2.26.0-rc.1",
-    "@ui5/webcomponents-localization": "2.26.0-rc.1",
-    "@ui5/webcomponents-theming": "2.26.0-rc.1"
+    "@ui5/webcomponents-base": "2.27.0-rc.0",
+    "@ui5/webcomponents-icons": "2.27.0-rc.0",
+    "@ui5/webcomponents-icons-business-suite": "2.27.0-rc.0",
+    "@ui5/webcomponents-icons-tnt": "2.27.0-rc.0",
+    "@ui5/webcomponents-localization": "2.27.0-rc.0",
+    "@ui5/webcomponents-theming": "2.27.0-rc.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.26.0-rc.1",
+    "@ui5/webcomponents-tools": "2.27.0-rc.0",
     "cypress": "15.18.1",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.2.7"
   },
-  "gitHead": "5a9a30101e46d6a525886f4dadebdbf85a6afceb"
+  "gitHead": "053bb4316b0b85cc05bce4335d910122a279dcd7"
 }

package/src/ListBoxItemGroupTemplate.tsx

@@ -15,7 +15,7 @@ export default function ListItemGroupTemplate(this: ListItemGroup, hooks?: { ite
 			onDragLeave={this._ondragleave}
 		>
 			{this.hasHeader &&
-				<ListItemGroupHeader focused={this.focused} part="header" accessibleRole="Group" wrappingType={this.getGroupHeaderWrapping()} >
+				<ListItemGroupHeader focused={this.focused} part="header" exportparts="title" accessibleRole="Group" wrappingType={this.getGroupHeaderWrapping()} >
 					{ this.hasFormattedHeader ? <slot name="header"></slot> : this.headerText }
 				</ListItemGroupHeader>
 			}

package/src/ListItemBaseTemplate.tsx

@@ -4,6 +4,8 @@ import type { AriaRole, JsxTemplate } from "@ui5/webcomponents-base/";
 export default function ListItemBaseTemplate(this: ListItemBase, hooks?: { listItemContent: JsxTemplate }, injectedProps?: {
 	role?: AriaRole,
 	title?: string,
+	ariaSetsize?: number,
+	ariaPosinset?: number,
 }) {
 	const listItemContent = hooks?.listItemContent || defaultListItemContent;
 
@@ -17,6 +19,8 @@ export default function ListItemBaseTemplate(this: ListItemBase, hooks?: { listI
 			role={injectedProps?.role}
 			title={injectedProps?.title}
 			aria-selected={injectedProps?.role === "option" ? this.selected : undefined}
+			{...(injectedProps?.ariaSetsize !== undefined && { "aria-setsize": injectedProps.ariaSetsize })}
+			{...(injectedProps?.ariaPosinset !== undefined && { "aria-posinset": injectedProps.ariaPosinset })}
 			onFocusIn={this._onfocusin}
 			onKeyUp={this._onkeyup}
 			onKeyDown={this._onkeydown}

package/src/NumberInputTemplate.tsx

@@ -0,0 +1,95 @@
+import type NumberInput from "./NumberInput.js";
+import Icon from "./Icon.js";
+import Input from "./Input.js";
+
+import less from "@ui5/webcomponents-icons/dist/less.js";
+import add from "@ui5/webcomponents-icons/dist/add.js";
+
+export default function NumberInputTemplate(this: NumberInput) {
+	return (
+		<div
+			id={`${this._id}`}
+			class={{ "ui5-number-input-root": true, "ui5-number-input-root--with-buttons": this._showStepButtons && !this.readonly }}
+			onKeyDown={this._onkeydown}
+			onFocusIn={this._onfocusin}
+			onFocusOut={this._onfocusout}
+			onWheel={this._onMouseWheel}
+		>
+			{/* Decrement Icon */}
+			{this._showStepButtons && !this.readonly &&
+			<div
+				class="ui5-step-icon ui5-step-dec"
+				title={this.decIconTitle}
+				onMouseDown={this._decSpin}
+				onMouseUp={this._resetSpin}
+				onMouseOut={this._resetSpinOut}
+			>
+				<Icon
+					id={`${this._id}-dec`}
+					name={less}
+					tabindex={-1}
+					accessibleName={this.decIconTitle}
+					onClick={this._decValue}
+					onFocusOut={this._onButtonFocusOut}
+					class={{
+						"inputIcon": true,
+						"ui5-number-input-icon--clickable": this._decIconClickable,
+					}}
+					showTooltip={true}
+				/>
+			</div>
+			}
+
+			{/* INPUT */}
+			<Input
+				id={`${this._id}-inner`}
+				data-sap-focus-ref
+				class="ui5-number-input-input"
+				placeholder={this.placeholder}
+				type={this.type}
+				value={this._inputValue ?? this._displayValue}
+				disabled={this.disabled}
+				required={this.required}
+				readonly={this.readonly}
+				focused={this.focused}
+				onui5-_request-submit={this._onInputRequestSubmit}
+				valueState={this.valueState}
+				_inputAccInfo={this.accInfo}
+				_nativeInputAttributes={this.inputAttributes}
+				onChange={this._onInputChange}
+				onFocusOut={this._onInputFocusOut}
+				onFocusIn={this._onInputFocusIn}
+				onInput={this._onInput}
+			>
+				{this.valueStateMessage.length > 0 &&
+					<slot name="valueStateMessage" slot="valueStateMessage"></slot>
+				}
+			</Input>
+
+			{/* Increment Icon */}
+			{this._showStepButtons && !this.readonly &&
+				<div
+					class="ui5-step-icon ui5-step-inc"
+					title={this.incIconTitle}
+					onMouseDown={this._incSpin}
+					onMouseUp={this._resetSpin}
+					onMouseOut={this._resetSpinOut}
+				>
+					<Icon
+						id={`${this._id}-inc`}
+						class={{
+							"inputIcon": true,
+							"ui5-number-input-icon--clickable": this._incIconClickable,
+						}}
+						name={add}
+						tabindex={-1}
+						accessibleName={this.incIconTitle}
+						onClick={this._incValue}
+						onFocusOut={this._onButtonFocusOut}
+						showTooltip={true}
+					/>
+				</div>
+			}
+		</div>
+	);
+}

package/src/OptionGroupTemplate.tsx

@@ -0,0 +1,20 @@
+import type OptionGroup from "./OptionGroup.js";
+import type Option from "./Option.js";
+
+export default function OptionGroupTemplate(this: OptionGroup) {
+	return (
+		<div
+			class="ui5-option-group-root"
+			role="group"
+			aria-label={this.headerText || undefined}
+			aria-roledescription={this._groupHeaderRoleDescription}
+		>
+			{this.headerText &&
+				<div class="ui5-option-group-header" aria-hidden="true">
+					{this.headerText}
+				</div>
+			}
+			{this.items.map((item: Option) => <slot name={item._individualSlot}></slot>)}
+		</div>
+	);
+}

package/src/OptionTemplate.tsx

@@ -3,7 +3,12 @@ import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
 import type Option from "./Option.js";
 
 export default function OptionTemplate(this: Option) {
-	return ListItemBaseTemplate.call(this, { listItemContent }, { role: "option", title: this.tooltip });
+	return ListItemBaseTemplate.call(this, { listItemContent }, {
+		role: "option",
+		title: this.tooltip,
+		ariaSetsize: this._forcedSetsize,
+		ariaPosinset: this._forcedPosinset,
+	});
 }
 
 function listItemContent(this: Option) {

package/src/SelectPopoverTemplate.tsx

@@ -9,7 +9,7 @@ import Title from "./Title.js";
 export default function SelectPopoverTemplate(this: Select) {
 	return (
 		<>
-			{this.options.length > 0 &&
+			{this._flatOptions.length > 0 &&
 				<ResponsivePopover
 					id={this.responsivePopoverId}
 					class={{

package/src/SelectTemplate.tsx

@@ -91,6 +91,12 @@ export default function SelectTemplate(this: Select) {
 						{this.ariaDescriptionText}
 					</span>
 				}
+
+				{this.hasGroups &&
+					<span id={this._groupCountMessageId} class="ui5-hidden-text">
+						{this._groupCountText}
+					</span>
+				}
 			</div>
 			{SelectPopoverTemplate.call(this)}
 		</>

package/src/StepInputTemplate.tsx

@@ -1,94 +1,31 @@
 import type StepInput from "./StepInput.js";
-import Icon from "./Icon.js";
-import Input from "./Input.js";
-
-import less from "@ui5/webcomponents-icons/dist/less.js";
-import add from "@ui5/webcomponents-icons/dist/add.js";
+import NumberInput from "./NumberInput.js";
 
 export default function StepInputTemplate(this: StepInput) {
 	return (
-		<div
-			id={`${this._id}`}
-			class="ui5-step-input-root"
-			onKeyDown={this._onkeydown}
-			onFocusIn={this._onfocusin}
-			onFocusOut={this._onfocusout}
-			onWheel={this._onMouseWheel}
+		<NumberInput
+			_showStepButtons={true}
+			_externalAriaLabel={this._associatedLabelText}
+			value={this.value}
+			min={this.min}
+			max={this.max}
+			step={this.step}
+			valueState={this.valueState}
+			required={this.required}
+			disabled={this.disabled}
+			readonly={this.readonly}
+			placeholder={this.placeholder}
+			valuePrecision={this.valuePrecision}
+			accessibleName={this.accessibleName}
+			accessibleNameRef={this.accessibleNameRef}
+			onChange={this._onNumberInputChange}
+			onInput={this._onNumberInputInput}
+			onValueStateChange={this._onNumberInputValueStateChange}
+			onui5-_request-submit={this._onRequestSubmit}
 		>
-			{/* Decrement Icon */}
-			{!this.readonly &&
-			<div
-				class="ui5-step-icon ui5-step-dec"
-				title={this.decIconTitle}
-			>
-				<Icon
-					id={`${this._id}-dec`}
-					name={less}
-					tabindex={-1}
-					accessibleName={this.decIconTitle}
-					onClick={this._decValue}
-					onFocusOut={this._onButtonFocusOut}
-					onMouseDown={this._decSpin}
-					onMouseUp={this._resetSpin}
-					onMouseOut={this._resetSpinOut}
-					class={{
-						"inputIcon": true,
-						"ui5-step-input-icon--clickable": this._decIconClickable,
-					}}
-					showTooltip={true}
-				/>
-			</div>
-			}
-
-			{/* INPUT */}
-			<Input
-				id={`${this._id}-inner`}
-				data-sap-focus-ref
-				class="ui5-step-input-input"
-				placeholder={this.placeholder}
-				type={this.type}
-				value={this._displayValue}
-				disabled={this.disabled}
-				required={this.required}
-				readonly={this.readonly}
-				onui5-_request-submit={this._onInputRequestSubmit}
-				valueState={this.valueState}
-				_inputAccInfo={this.accInfo}
-				_nativeInputAttributes={this.inputAttributes}
-				onChange={this._onInputChange}
-				onFocusOut={this._onInputFocusOut}
-				onFocusIn={this._onInputFocusIn}
-				onInput={this._onInput}
-			>
-				{this.valueStateMessage.length > 0 &&
-					<slot name="valueStateMessage" slot="valueStateMessage"></slot>
-				}
-			</Input>
-
-			{/* Increment Icon */}
-			{!this.readonly &&
-				<div
-					class="ui5-step-icon ui5-step-inc"
-					title={this.incIconTitle}
-				>
-					<Icon
-						id={`${this._id}-inc`}
-						class={{
-							"inputIcon": true,
-							"ui5-step-input-icon--clickable": this._incIconClickable,
-						}}
-						name={add}
-						tabindex={-1}
-						accessibleName={this.incIconTitle}
-						onClick={this._incValue}
-						onFocusOut={this._onButtonFocusOut}
-						onMouseDown={this._incSpin}
-						onMouseUp={this._resetSpin}
-						onMouseOut={this._resetSpinOut}
-						showTooltip={true}
-					/>
-				</div>
+			{this.valueStateMessage.length > 0 &&
+				<slot name="valueStateMessage" slot="valueStateMessage"></slot>
 			}
-		</div>
+		</NumberInput>
 	);
 }

package/src/i18n/messagebundle.properties

@@ -321,6 +321,9 @@ SELECT_ROLE_DESCRIPTION=Listbox
 #XTXT: MultiComboBox and ComboBox icon accessible name
 SELECT_OPTIONS=Select Options
 
+#XTXT: Announced by screen reader when Select with grouped options is opened; {0} is the option count, {1} is the group count
+SELECT_OPTIONS_IN_GROUPS={0} results are available in {1} groups
+
 #XACT: ARIA announcement prefix for Select dialog accessible name on mobile (without trailing space)
 SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Select:
 
@@ -793,18 +796,17 @@ SLIDER_TOOLTIP_INPUT_DESCRIPTION = Press F2 to enter a value
 #XACT: ARIA label for slider tooltip input
 SLIDER_TOOLTIP_INPUT_LABEL = Current Value
 
-#XTOL: tooltip for decrease button of the StepInput
-STEPINPUT_DEC_ICON_TITLE=Decrease
-
-#XTOL: tooltip for increase button of the StepInput
-STEPINPUT_INC_ICON_TITLE=Increase
+#XTOL: tooltip for decrease button of the NumberInput
+NUMBERINPUT_DEC_ICON_TITLE=Decrease
 
-STEPINPUT_PATTER_MISSMATCH=This format is not supported. Fill in a number with {0} decimal places.
+#XTOL: tooltip for increase button of the NumberInput
+NUMBERINPUT_INC_ICON_TITLE=Increase
 
-STEPINPUT_RANGEOVERFLOW=Fill in a number that is lower than the set max. value of  {0}.
+NUMBERINPUT_PATTERN_MISSMATCH=This format is not supported. Fill in a number with {0} decimal places.
 
-STEPINPUT_RANGEUNDERFLOW=Fill in a number that is higher than the set min. value of  {0}.
+NUMBERINPUT_RANGEOVERFLOW=Fill in a number that is lower than the set max. value of  {0}.
 
+NUMBERINPUT_RANGEUNDERFLOW=Fill in a number that is higher than the set min. value of  {0}.
 #XACT: Aria information for the Split Button
 SPLIT_BUTTON_DESCRIPTION=Split Button
 

package/src/i18n/messagebundle_de.properties

@@ -222,11 +222,11 @@ SELECT_ROLE_DESCRIPTION=Listenfeld
 
 SELECT_OPTIONS=Auswahloptionen
 
-SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Auswählen:
+SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Markieren:
 
 SELECT_LISTBOX_LABEL=Alle Elemente
 
-SHOW_SELECTED_BUTTON=Nur ausgewählte Elemente einblenden
+SHOW_SELECTED_BUTTON=Nur markierte Elemente einblenden
 
 INPUT_SUGGESTIONS=Es sind Vorschläge verfügbar
 

package/src/i18n/messagebundle_pl.properties

@@ -222,7 +222,7 @@ SELECT_ROLE_DESCRIPTION=Pole listy
 
 SELECT_OPTIONS=Wybierz opcje
 
-SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Wybierz:
+SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Wybór:
 
 SELECT_LISTBOX_LABEL=Wszystkie pozycje
 

package/src/i18n/messagebundle_ru.properties

@@ -643,7 +643,7 @@ TABLE_MORE_DESCRIPTION=Нажмите Enter или пробел, чтобы за
 TABLE_ROW_ACTIONS=Действия со строкой
 TABLE_ROW_SINGLE_ACTION=Доступно действий со строкой: 1
 TABLE_ROW_MULTIPLE_ACTIONS=Доступно действий со строкой: {0}
-TABLE_ROW_OVERFLOW_BUTTON=Другие операции
+TABLE_ROW_OVERFLOW_BUTTON=Другие действия
 TABLE_NAVIGATION=Навигация
 TABLE_GENERATED_BY_AI=Сгенерировано с помощью ИИ
 TABLE_SELECT_ALL_ROWS=Выбрать все строки

package/src/themes/CheckBox.css

@@ -240,6 +240,7 @@
 .ui5-checkbox-icon {
 	width: var(--_ui5_checkbox_icon_size);
 	height: var(--_ui5_checkbox_icon_size);
+	font-size: inherit;
 	color: currentColor;
 	cursor: inherit;
 	position: absolute;

package/src/themes/Icon.css

@@ -17,10 +17,10 @@
 	display: inline-block;
 	width: 1rem;
 	height: 1rem;
+	font-size: 1rem;
 	color: var(--sapContent_IconColor);
 	fill: currentColor;
 	outline: none;
-	container-type: size;
 }
 
 :host([design="Contrast"]) {
@@ -66,7 +66,7 @@
 	box-sizing: border-box;
 	align-items: center;
 	justify-content: center;
-	font-size: min(100cqw, 100cqh);
+	font-size: inherit;
 	line-height: 1;
 }