@ui5/webcomponents 2.11.0 → 2.12.0-rc.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents",
-  "version": "2.11.0",
+  "version": "2.12.0-rc.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2831,6 +2831,16 @@
                 "default": "\"Dialog\""
               }
             },
+            {
+              "name": "accessible-description",
+              "description": "Defines the accessible description of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-description-ref",
+              "description": "Receives id(or many ids) of the elements that describe the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "prevent-initial-focus",
               "description": "Indicates whether initial focus should be prevented.",
@@ -2928,6 +2938,16 @@
                 "description": "Allows setting a custom role.",
                 "value": { "type": "\"None\" | \"Dialog\" | \"AlertDialog\"" }
               },
+              {
+                "name": "accessible-description",
+                "description": "Defines the accessible description of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-description-ref",
+                "description": "Receives id(or many ids) of the elements that describe the component.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "prevent-initial-focus",
                 "description": "Indicates whether initial focus should be prevented.",
@@ -2961,7 +2981,7 @@
         },
         {
           "name": "ui5-dynamic-date-range",
-          "description": "### Overview\n\nThe `ui5-dynamic-date-range` component provides a flexible interface to define date ranges using a combination of absolute dates, relative intervals, and preset ranges (e.g., \"Today\", \"Yesterday\", etc.).\nIt allows users to select a date range from a predefined set of options or enter custom dates.\n\n### Usage\n\nThe component is typically used in scenarios where users need to filter data based on date ranges, such as in reports, dashboards, or data analysis tools.\nIt can be used with the predefined options or extended with custom options to suit specific requirements. You can create your own options by extending the `IDynamicDateRangeOption` interface.\nEvery option should be registered using the `DynamicDateRange.register` method.\n\nIf needed, you can also create a range of dates based on specific option using the `toDates` method.\n\n### Standard Options\n\nThe component comes with a set of standard options, including:\n- \"TODAY\" - Represents the current date. An example value is `{ operator: \"TODAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Today.js\";`\n- \"YESTERDAY\" - Represents the previous date. An example value is `{ operator: \"YESTERDAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js\";`\n- \"TOMORROW\" - Represents the next date. An example value is `{ operator: \"TOMORROW\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js\";`\n- \"DATE\" - Represents a single date. An example value is `{ operator: \"DATE\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js\";`\n- \"DATERANGE\" - Represents a range of dates. An example value is `{ operator: \"DATERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js\";`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DynamicDateRange.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout or a value is selected in the popover.",
+          "description": "### Overview\n\nThe `ui5-dynamic-date-range` component provides a flexible interface to define date ranges using a combination of absolute dates, relative intervals, and preset ranges (e.g., \"Today\", \"Yesterday\", etc.).\nIt allows users to select a date range from a predefined set of options or enter custom dates.\n\n### Usage\n\nThe component is typically used in scenarios where users need to filter data based on date ranges, such as in reports, dashboards, or data analysis tools.\nIt can be used with the predefined options or extended with custom options to suit specific requirements. You can create your own options by extending the `IDynamicDateRangeOption` interface.\nEvery option should be registered using the `DynamicDateRange.register` method.\n\nIf needed, you can also create a range of dates based on specific option using the `toDates` method.\n\n### Standard Options\n\nThe component comes with a set of standard options, including:\n- \"TODAY\" - Represents the current date. An example value is `{ operator: \"TODAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Today.js\";`\n- \"YESTERDAY\" - Represents the previous date. An example value is `{ operator: \"YESTERDAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js\";`\n- \"TOMORROW\" - Represents the next date. An example value is `{ operator: \"TOMORROW\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js\";`\n- \"DATE\" - Represents a single date. An example value is `{ operator: \"DATE\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js\";`\n- \"DATERANGE\" - Represents a range of dates. An example value is `{ operator: \"DATERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js\";`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DynamicDateRange.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout or a value is selected in the popover.\n\n### **Methods:**\n - **toDates(value: _DynamicDateRangeValue_): _Array<Date>_** - Converts a `value` into concrete `startDate` and `endDate` JavaScript `Date` objects.",
           "doc-url": "",
           "attributes": [
             {
@@ -6019,6 +6039,16 @@
                 "default": "\"Dialog\""
               }
             },
+            {
+              "name": "accessible-description",
+              "description": "Defines the accessible description of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-description-ref",
+              "description": "Receives id(or many ids) of the elements that describe the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "prevent-initial-focus",
               "description": "Indicates whether initial focus should be prevented.",
@@ -6135,6 +6165,16 @@
                 "description": "Allows setting a custom role.",
                 "value": { "type": "\"None\" | \"Dialog\" | \"AlertDialog\"" }
               },
+              {
+                "name": "accessible-description",
+                "description": "Defines the accessible description of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-description-ref",
+                "description": "Receives id(or many ids) of the elements that describe the component.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "prevent-initial-focus",
                 "description": "Indicates whether initial focus should be prevented.",
@@ -6721,6 +6761,16 @@
                 "default": "\"Dialog\""
               }
             },
+            {
+              "name": "accessible-description",
+              "description": "Defines the accessible description of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-description-ref",
+              "description": "Receives id(or many ids) of the elements that describe the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "prevent-initial-focus",
               "description": "Indicates whether initial focus should be prevented.",
@@ -6837,6 +6887,16 @@
                 "description": "Allows setting a custom role.",
                 "value": { "type": "\"None\" | \"Dialog\" | \"AlertDialog\"" }
               },
+              {
+                "name": "accessible-description",
+                "description": "Defines the accessible description of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-description-ref",
+                "description": "Receives id(or many ids) of the elements that describe the component.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "prevent-initial-focus",
                 "description": "Indicates whether initial focus should be prevented.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.11.0",
+  "version": "2.12.0-rc.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,20 +54,20 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.11.0",
-    "@ui5/webcomponents-icons": "2.11.0",
-    "@ui5/webcomponents-icons-business-suite": "2.11.0",
-    "@ui5/webcomponents-icons-tnt": "2.11.0",
-    "@ui5/webcomponents-localization": "2.11.0",
-    "@ui5/webcomponents-theming": "2.11.0"
+    "@ui5/webcomponents-base": "2.12.0-rc.0",
+    "@ui5/webcomponents-icons": "2.12.0-rc.0",
+    "@ui5/webcomponents-icons-business-suite": "2.12.0-rc.0",
+    "@ui5/webcomponents-icons-tnt": "2.12.0-rc.0",
+    "@ui5/webcomponents-localization": "2.12.0-rc.0",
+    "@ui5/webcomponents-theming": "2.12.0-rc.0"
   },
   "devDependencies": {
     "@ui5/cypress-internal": "0.0.0",
-    "@ui5/webcomponents-tools": "2.11.0",
-    "chromedriver": "^135.0.0",
+    "@ui5/webcomponents-tools": "2.12.0-rc.0",
+    "chromedriver": "^136.0.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vitest": "^3.0.2"
   },
-  "gitHead": "a768710e9fa722b88e495e9aea1964764af5b985"
+  "gitHead": "5c2fda3eb3253dcaf7587763aa436541f2c5160b"
 }

package/src/AvatarTemplate.tsx

@@ -14,21 +14,27 @@ export default function AvatarTemplate(this: Avatar) {
 			onKeyDown={this._onkeydown}
 			onClick={this._onclick}
 		>
-			{this.hasImage ?
+			{this._hasImage ?
 				<slot></slot>
-				:
-				<>
-					{ this.icon && <Icon class="ui5-avatar-icon" name={this.icon} accessibleName={this.accessibleName}></Icon> }
+				: <>
+					{this.icon && <Icon class="ui5-avatar-icon" name={this.icon} accessibleName={this.accessibleName}></Icon>}
 
-					{ this.initials &&
-					<>
-						<span class="ui5-avatar-initials ui5-avatar-initials-hidden">{this.validInitials}</span>
+					{this.initials ? (
+						<>
+							{/* Show initials + hidden fallback icon */}
+							<span class="ui5-avatar-initials ui5-avatar-initials-hidden">{this.validInitials}</span>
+							<Icon
+								name={this.fallbackIcon}
+								class="ui5-avatar-icon ui5-avatar-icon-fallback ui5-avatar-fallback-icon-hidden"
+							></Icon>
+						</>
+					) : (
+						// Show fallback icon only
 						<Icon
 							name={this.fallbackIcon}
-							class="ui5-avatar-icon ui5-avatar-icon-fallback ui5-avatar-fallback-icon-hidden"
+							class="ui5-avatar-icon ui5-avatar-icon-fallback"
 						></Icon>
-					</>
-					}
+					)}
 				</>
 			}
 

package/src/BusyIndicatorTemplate.tsx

@@ -6,7 +6,10 @@ export default function BusyIndicatorTemplate(this: BusyIndicator) {
 		<div class="ui5-busy-indicator-root">
 			{this._isBusy && (
 				<div
-					class="ui5-busy-indicator-busy-area"
+					class={{
+						"ui5-busy-indicator-busy-area": true,
+						"ui5-busy-indicator-busy-area-over-content": this.hasContent,
+					}}
 					title={this.ariaTitle}
 					tabindex={0}
 					role="progressbar"

package/src/InputTemplate.tsx

@@ -29,7 +29,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						style={this.styles.innerInput}
 						type={this.inputNativeType}
 						inner-input
-						inner-input-with-icon={this.icon.length}
+						inner-input-with-icon={!!this.icon.length}
 						disabled={this.disabled}
 						readonly={this._readonly}
 						value={this._innerValue}

package/src/PopupTemplate.tsx

@@ -13,6 +13,7 @@ export default function PopupTemplate(this: Popup, hooks?: {
 			style={this.styles.root}
 			class={this.classes.root}
 			role={this._role}
+			aria-describedby={this.ariaDescribedByIds}
 			aria-modal={this._ariaModal}
 			aria-label={this._ariaLabel}
 			aria-labelledby={this._ariaLabelledBy}
@@ -30,6 +31,10 @@ export default function PopupTemplate(this: Popup, hooks?: {
 				<slot></slot>
 			</div>
 
+			{this.ariaDescriptionText &&
+						<span id="accessibleDescription" class="ui5-hidden-text">{this.ariaDescriptionText}</span>
+			}
+
 			{(hooks?.afterContent || afterContent).call(this)}
 
 			<span class="last-fe" data-ui5-focus-trap role="none" tabIndex={0} onFocusIn={this.forwardToFirst}></span>

package/src/RangeSliderTemplate.tsx

@@ -1,8 +1,8 @@
 import directionArrows from "@ui5/webcomponents-icons/dist/direction-arrows.js";
 import type RangeSlider from "./RangeSlider.js";
 import Icon from "./Icon.js";
-import Input from "./Input.js";
 import SliderBaseTemplate from "./SliderBaseTemplate.js";
+import SliderTooltip from "./SliderTooltip.js";
 
 export default function RangeSliderTemplate(this: RangeSlider) {
 	return SliderBaseTemplate.call(this, {
@@ -68,25 +68,18 @@ export function handles(this: RangeSlider) {
 				></Icon>
 			</div>
 
-			{this.showTooltip &&
-				<div class="ui5-slider-tooltip ui5-slider-tooltip--start" style={this.styles.tooltip}>
-					{this.editableTooltip ?
-						<Input
-							type="Number"
-							value={this.startValue.toString()}
-							accessibleNameRef="ui5-slider-InputLabel"
-							onFocusOut={this._onInputFocusOut}
-							onKeyDown={this._onInputKeydown}
-							onChange={this._onInputChange}
-							onInput={this._onInputInput}
-							data-sap-ui-start-value
-							tabIndex={-1}
-						></Input>
-						:
-						<span class="ui5-slider-tooltip-value">{this.tooltipStartValue}</span>
-					}
-				</div>
-			}
+			<SliderTooltip
+				open={this._tooltipsOpen}
+				value={this.startValue.toString()}
+				min={this.min}
+				max={this.max}
+				data-sap-ui-start-value
+				editable={this.editableTooltip}
+				followRef={this._startHandle}
+				onChange={this._onTooltipChange}
+				onForwardFocus={this._onTooltopForwardFocus}
+			>
+			</SliderTooltip>
 		</div>
 		<div class="ui5-slider-handle-container" style={this.styles.endHandle} part="handle-container">
 			<div class="ui5-slider-handle ui5-slider-handle--end"
@@ -110,25 +103,18 @@ export function handles(this: RangeSlider) {
 				></Icon>
 			</div>
 
-			{this.showTooltip &&
-				<div class="ui5-slider-tooltip ui5-slider-tooltip--end" style={this.styles.tooltip}>
-					{this.editableTooltip ?
-						<Input
-							type="Number"
-							value={this.endValue.toString()}
-							accessibleNameRef="ui5-slider-InputLabel"
-							onFocusOut={this._onInputFocusOut}
-							onKeyDown={this._onInputKeydown}
-							onChange={this._onInputChange}
-							onInput={this._onInputInput}
-							data-sap-ui-end-value
-							tabIndex={-1}
-						></Input>
-						:
-						<span class="ui5-slider-tooltip-value">{this.tooltipEndValue}</span>
-					}
-				</div>
-			}
+			<SliderTooltip
+				open={this._tooltipsOpen}
+				value={this.endValue.toString()}
+				min={this.min}
+				max={this.max}
+				data-sap-ui-end-value
+				editable={this.editableTooltip}
+				followRef={this._endHandle}
+				onChange={this._onTooltipChange}
+				onForwardFocus={this._onTooltopForwardFocus}
+			>
+			</SliderTooltip>
 		</div>
 	</>);
 }

package/src/ResponsivePopoverTemplate.tsx

@@ -15,6 +15,8 @@ export default function ResponsivePopoverTemplate(this: ResponsivePopover) {
 			root-element
 			accessibleName={this.accessibleName}
 			accessibleNameRef={this.accessibleNameRef}
+			accessibleDescription={this.accessibleDescription}
+			accessibleDescriptionRef={this.accessibleDescriptionRef}
 			accessibleRole={this.accessibleRole}
 			stretch={true}
 			preventInitialFocus={this.preventInitialFocus}

package/src/SelectTemplate.tsx

@@ -48,22 +48,32 @@ export default function SelectTemplate(this: Select) {
 				</div>
 
 				{this.icon &&
-					<Icon
-						name={this.icon}
-						class={{
-							"inputIcon": true,
-							"inputIcon--pressed": this._iconPressed,
-						}} />
+					<div class={{
+						"ui5-select-icon-root": true,
+						"inputIcon": true,
+						"inputIcon--pressed": this._iconPressed,
+					}}>
+						<Icon
+							name={this.icon}
+							class={{
+								"ui5-select-icon": true,
+							}} />
+					</div>
 				}
 
 				{!this.icon && !this.readonly &&
-					<Icon
-						part="icon"
-						name={slimArrowDown}
-						class={{
-							"inputIcon": true,
-							"inputIcon--pressed": this._iconPressed,
-						}} />
+					<div class={{
+						"ui5-select-icon-root": true,
+						"inputIcon": true,
+						"inputIcon--pressed": this._iconPressed,
+					}}>
+						<Icon
+							part="icon"
+							name={slimArrowDown}
+							class={{
+								"ui5-select-icon": true,
+							}} />
+					</div>
 				}
 
 				{this.hasValueState &&

package/src/SliderBaseTemplate.tsx

@@ -54,7 +54,6 @@ export default function SliderBaseTemplate(this: SliderBase, hooks?: {
 			</div>
 			{this.editableTooltip && <>
 				<span id="ui5-slider-InputDesc" class="ui5-hidden-text">{this._ariaDescribedByInputText}</span>
-				<span id="ui5-slider-InputLabel" class="ui5-hidden-text">{this._ariaLabelledByInputText}</span>
 			</>}
 
 		</div>

package/src/SliderTemplate.tsx

@@ -1,8 +1,8 @@
 import directionArrows from "@ui5/webcomponents-icons/dist/direction-arrows.js";
 import type Slider from "./Slider.js";
 import Icon from "./Icon.js";
-import Input from "./Input.js";
 import SliderBaseTemplate from "./SliderBaseTemplate.js";
+import SliderTooltip from "./SliderTooltip.js";
 
 export default function SliderTemplate(this: Slider) {
 	return SliderBaseTemplate.call(this, {
@@ -48,6 +48,7 @@ export function handles(this: Slider) {
 				aria-describedby={this._ariaDescribedByHandleText}
 				data-sap-focus-ref
 				part="handle"
+				id="handle1"
 			>
 				<Icon name={directionArrows}
 					mode="Decorative"
@@ -55,26 +56,18 @@ export function handles(this: Slider) {
 					slider-icon
 				></Icon>
 			</div>
-			{this.showTooltip &&
-			<div class="ui5-slider-tooltip" style={this.styles.tooltip}>
-				{this.editableTooltip ?
-					<Input
-						value={this._tooltipInputValue}
-						valueState={this._tooltipInputValueState}
-						type="Number"
-						accessibleNameRef="ui5-slider-InputLabel"
-						onFocusOut={this._onInputFocusOut}
-						onKeyDown={this._onInputKeydown}
-						onChange={this._onInputChange}
-						onInput={this._onInputInput}
-						data-sap-ui-end-value
-						tabIndex={-1}
-					></Input>
-					:
-					<span class="ui5-slider-tooltip-value">{this.tooltipValue}</span>
-				}
-			</div>
-			}
+
+			<SliderTooltip
+				open={this._tooltipsOpen}
+				value={this.tooltipValue}
+				min={this.min}
+				max={this.max}
+				editable={this.editableTooltip}
+				followRef={this.shadowRoot?.querySelector("#handle1") as HTMLElement}
+				onChange={this._onTooltipChange}
+				onForwardFocus={this._onTooltopForwardFocus}
+			>
+			</SliderTooltip>
 		</div>
 	);
 }

package/src/SliderTooltipTemplate.tsx

@@ -0,0 +1,27 @@
+import Input from "./Input.js";
+import type SliderTooltip from "./SliderTooltip.js";
+
+export default function SliderTooltipTemplate(this: SliderTooltip) {
+	return (
+		<div class="ui5-slider-tooltip-root">
+			{this.editable ?
+				<Input
+					value={this.value}
+					type="Number"
+					accessibleNameRef="ui5-slider-InputLabel"
+					onKeyDown={this._keydown}
+					onFocusIn={this._onInputFocusin}
+					onFocusOut={this._onInputFocusOut}
+					tabIndex={-1}
+					data-sap-focus-ref
+					valueState={this.valueState}
+				></Input> :
+				<span class="ui5-slider-tooltip-value">{this.value}</span>
+			}
+
+			{this.editable && <>
+				<span id="ui5-slider-InputLabel" class="ui5-hidden-text">{this._ariaLabelledByInputText}</span>
+			</>}
+		</div>
+	);
+}