@ui5/webcomponents 2.11.0 → 2.12.0-rc.1

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>
+	);
+}

package/src/YearPickerTemplate.tsx

@@ -4,6 +4,7 @@ export default function YearPickerTemplate(this: YearPicker) {
 	return (
 		<div
 			class="ui5-yp-root"
+			part="year-picker-root"
 			role="grid"
 			aria-roledescription={this.roleDescription}
 			aria-readonly="false"