@ui5/webcomponents 0.0.0-b132dd7b9 → 0.0.0-b3a4f8020

package/src/MultiComboBoxPopoverTemplate.tsx

@@ -1,4 +1,3 @@
-import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import multiSelectAll from "@ui5/webcomponents-icons/dist/multiselect-all.js";
 import type MultiComboBox from "./MultiComboBox.js";
 import ResponsivePopover from "./ResponsivePopover.js";
@@ -8,8 +7,11 @@ import ToggleButton from "./ToggleButton.js";
 import SuggestionItem from "./SuggestionItem.js";
 import Icon from "./Icon.js";
 import List from "./List.js";
+import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import Popover from "./Popover.js";
 import CheckBox from "./CheckBox.js";
+import Title from "./Title.js";
+import BusyIndicator from "./BusyIndicator.js";
 
 export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 	return (<>
@@ -31,17 +33,20 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 			open={this.open}
 			opener={this}
 		>
-			{this._isPhone && <>
+			{this.loading &&
+				<BusyIndicator active={true} class="ui5-multi-combobox-busy"/>
+			}
+
+			{!this.loading && this._isPhone && <>
 				<div slot="header" class="ui5-responsive-popover-header" style={this.styles.popoverHeader}>
 					<div class="row">
-						<span>{this._headerTitleText}</span>
-						<Button
-							class="ui5-responsive-popover-close-btn"
-							icon={decline}
-							design="Transparent"
-							onClick={this.handleCancel}
+						<Title
+							level="H1"
+							wrappingType="None"
+							class="ui5-responsive-popover-header-text"
 						>
-						</Button>
+							{this._headerTitleText}
+						</Title>
 					</div>
 					<div class="row">
 						<Input
@@ -62,6 +67,7 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 							icon={multiSelectAll}
 							design="Transparent"
 							pressed={this._showAllItemsButtonPressed}
+							disabled={this._getSelectedItems().length === 0}
 							onClick={this.filterSelectedItems}
 							accessibleName={this._showSelectedButtonAccessibleNameText}
 						></ToggleButton>
@@ -76,9 +82,9 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 				{selectAllWrapper.call(this)}
 			</>}
 
-			{!this._isPhone && <>
+			{!this.loading && !this._isPhone && <>
 				{this.hasValueStateMessage &&
-					<div slot="header" onKeyDown={this._onListHeaderKeydown} tabIndex={0} class={this.classes.responsivePopoverHeaderValueState} style={this.styles.popoverValueStateMessage}>
+					<div slot="header" onKeyDown={this._onListHeaderKeydown} class={this.classes.responsivePopoverHeaderValueState} style={this.styles.popoverValueStateMessage}>
 						<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}></Icon>
 						{this.open && valueStateMessage.call(this)}
 					</div>
@@ -87,11 +93,11 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 				{selectAllWrapper.call(this)}
 			</>}
 
-			{this.filterSelected ?
+			{!this.loading && this.filterSelected ?
 				<List separators="None" selectionMode="Multiple" class="ui5-multi-combobox-all-items-list" accessibleRole="ListBox">
 					{this.selectedItems.map(item => <slot name={item._individualSlot}></slot>)}
 				</List>
-				:
+				: !this.loading &&
 				<List separators="None" selectionMode="Multiple" class="ui5-multi-combobox-all-items-list" accessibleRole="ListBox" onKeyDown={this._onItemKeydown}>
 					{this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}
 				</List>
@@ -100,9 +106,16 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 			{this._isPhone &&
 				<div slot="footer" class="ui5-responsive-popover-footer">
 					<Button
-						design="Transparent"
+						design="Emphasized"
 						onClick={this.handleOK}
 					>{this._dialogOkButton}</Button>
+					<Button
+						class="ui5-responsive-popover-close-btn"
+						design="Transparent"
+						onClick={this.handleCancel}
+					>
+						{this._dialogCancelButton}
+					</Button>
 				</div>
 			}
 		</ResponsivePopover>
@@ -115,7 +128,7 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 				hideArrow={true}
 				class="ui5-valuestatemessage-popover"
 				placement="Bottom"
-				horizontalAlign={this._valueStatePopoverHorizontalAlign}
+				horizontalAlign={PopoverHorizontalAlign.Start}
 				tabIndex={-1}
 				open={this.valueStateOpen}
 				opener={this}

package/src/MultiComboBoxTemplate.tsx

@@ -14,6 +14,10 @@ export default function MultiComboBoxTemplate(this: MultiComboBox) {
 				<span id="ui5-multi-combobox-valueStateDesc" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
 			}
 
+			{this.linksInAriaValueStateHiddenText.length > 0 &&
+				<span id="hiddenText-value-state-link-shortcut" class="ui5-hidden-text">{this.getValueStateLinksShortcutsTextAcc}</span>
+			}
+
 			<Tokenizer
 				slot="_beginContent"
 				preventPopoverOpen={true}

package/src/MultiInputTemplate.tsx

@@ -1,12 +1,23 @@
 import Icon from "./Icon.js";
+import multiSelectAll from "@ui5/webcomponents-icons/dist/multiselect-all.js";
 import InputTemplate from "./InputTemplate.js";
 import type MultiInput from "./MultiInput.js";
+import type { MultiInputTokenDeleteEventDetail } from "./MultiInput.js";
 import Tokenizer from "./Tokenizer.js";
+import ToggleButton from "./ToggleButton.js";
+import List from "./List.js";
+import ListItemStandard from "./ListItemStandard.js";
+import ListAccessibleRole from "./types/ListAccessibleRole.js";
 import valueHelp from "@ui5/webcomponents-icons/dist/value-help.js";
 
 export default function MultiInputTemplate(this: MultiInput) {
 	return [
-		InputTemplate.call(this, { preContent, postContent }),
+		InputTemplate.call(this, {
+			preContent,
+			postContent,
+			suggestionsList: multiInputSuggestionsList,
+			mobileHeader: multiInputMobileHeader,
+		}),
 	];
 }
 
@@ -27,6 +38,7 @@ function preContent(this: MultiInput) {
 				onKeyDown={this._onTokenizerKeydown}
 				onTokenDelete={this.tokenDelete}
 				onFocusOut={this._tokenizerFocusOut}
+				onShowMoreItemsPress={this._showMoreItemsPress}
 			>
 				{ this.tokens.map(token => <slot name={token._individualSlot}></slot>)}
 			</Tokenizer>
@@ -50,3 +62,68 @@ function postContent(this: MultiInput) {
 		</>
 	);
 }
+
+function multiInputSuggestionsList(this: MultiInput) {
+	if (this._effectiveShowTokensInSuggestions) {
+		return (
+			<List
+				class="ui5-tokenizer-list"
+				accessibleRole={ListAccessibleRole.ListBox}
+				separators={this.suggestionSeparators}
+				selectionMode="Delete"
+				onMouseDown={this.onItemMouseDown}
+				onItemClick={this._handleSuggestionItemPress}
+				onSelectionChange={this._handleSelectionChange}
+				onItemDelete={(e: any) => {
+					const listItem = e.detail.item;
+					const tokenId = listItem.getAttribute("data-ui5-token-ref-id");
+					const token = this.tokens.find((t: any) => t._id === tokenId);
+
+					if (token) {
+						this.tokenDelete({ detail: { tokens: [token] } } as CustomEvent<MultiInputTokenDeleteEventDetail>);
+					}
+				}}
+			>
+				{this.tokens?.map((token: any, index: number) => (
+					<ListItemStandard
+						key={index}
+						class="ui5-suggestion-token-item"
+						data-ui5-token-ref-id={token._id}
+						wrappingType="Normal"
+						text={token.text}
+					/>
+				))}
+			</List>
+		);
+	}
+
+	return (
+		<List
+			accessibleRole={ListAccessibleRole.ListBox}
+			separators={this.suggestionSeparators}
+			selectionMode="Single"
+			onMouseDown={this.onItemMouseDown}
+			onItemClick={this._handleSuggestionItemPress}
+			onSelectionChange={this._handleSelectionChange}
+		>
+			<slot></slot>
+		</List>
+	);
+}
+
+function multiInputMobileHeader(this: MultiInput) {
+	return (
+		<ToggleButton
+			class="ui5-multi-input-mobile-dialog-button"
+			design="Transparent"
+			icon={multiSelectAll}
+			accessibleName={this._filterButtonAccessibleName}
+			disabled={!this.tokens?.length}
+			pressed={this._effectiveShowTokensInSuggestions}
+			onClick={() => {
+				this._userToggledShowTokens = true;
+				this._showTokensInSuggestions = !this._effectiveShowTokensInSuggestions;
+			}}
+		/>
+	);
+}

package/src/PanelTemplate.tsx

@@ -26,6 +26,8 @@ export default function PanelTemplate(this: Panel) {
 						onClick={this._headerClick}
 						onKeyDown={this._headerKeyDown}
 						onKeyUp={this._headerKeyUp}
+						onTouchStart={this._isMobile}
+						onFocusOut={this._headerFocusOut}
 						class="ui5-panel-header"
 						tabindex={this.headerTabIndex}
 						role={this.accInfo.role}

package/src/PopoverTemplate.tsx

@@ -1,3 +1,5 @@
+import Icon from "./Icon.js";
+import resizeCorner from "@ui5/webcomponents-icons/dist/resize-corner.js";
 import type Popover from "./Popover.js";
 import PopupTemplate from "./PopupTemplate.js";
 import Title from "./Title.js";
@@ -32,5 +34,13 @@ function afterContent(this: Popover) {
 				<slot name="footer"></slot>
 			</footer>
 		}
+
+		{this._showResizeHandle &&
+			<div class="ui5-popover-resize-handle"
+				 onMouseDown={this._onResizeMouseDown}
+			>
+				<Icon name={resizeCorner} />
+			</div>
+		}
 	</>);
 }

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,22 @@ 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.tooltipStartValue}
+				valueState={this.tooltipStartValueState}
+				min={this.min}
+				max={this.max}
+				data-sap-ui-start-value
+				editable={this.editableTooltip}
+				followRef={this._startHandle}
+				onChange={this._onTooltipChange}
+				onKeyDown={this._onTooltipKeydown}
+				onFocusChange={this._onTooltipFocusChange}
+				onOpen={this._onTooltipOpen}
+				onInput={this._onTooltipInput}
+			>
+			</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 +107,22 @@ 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.tooltipEndValue}
+				valueState={this.tooltipEndValueState}
+				min={this.min}
+				max={this.max}
+				data-sap-ui-end-value
+				editable={this.editableTooltip}
+				followRef={this._endHandle}
+				onChange={this._onTooltipChange}
+				onKeyDown={this._onTooltipKeydown}
+				onFocusChange={this._onTooltipFocusChange}
+				onOpen={this._onTooltipOpen}
+				onInput={this._onTooltipInput}
+			>
+			</SliderTooltip>
 		</div>
 	</>);
 }

package/src/RatingIndicatorTemplate.tsx

@@ -1,8 +1,6 @@
 import type RatingIndicator from "./RatingIndicator.js";
 import type { Star } from "./RatingIndicator.js";
 import Icon from "./Icon.js";
-import favorite from "@ui5/webcomponents-icons/dist/favorite.js";
-import unfavorite from "@ui5/webcomponents-icons/dist/unfavorite.js";
 
 export default function RatingIndicatorTemplate(this: RatingIndicator) {
 	return (
@@ -37,38 +35,40 @@ function starLi(this: RatingIndicator, star: Star) {
 	if (star.selected) {
 		return (
 			<li data-ui5-value={star.index} class="ui5-rating-indicator-item ui5-rating-indicator-item-sel">
-				<Icon data-ui5-value={star.index} name={favorite} />
+				<Icon data-ui5-value={star.index} name={this.effectiveIconSelected} />
 			</li>
 		);
 	} if (star.halfStar) {
 		return (
 			<li class="ui5-rating-indicator-item ui5-rating-indicator-item-half">
-				<Icon data-ui5-value={star.index} name={halfStarIconName.call(this)} />
-				<div class="ui5-rating-indicator-half-icon-wrapper">
-					<Icon data-ui5-value={star.index} name={favorite} class="ui5-rating-indicator-half-icon" />
+				<div class="ui5-rating-indicator-half-icon-wrapper ui5-rating-indicator-half-icon-left">
+					<Icon data-ui5-value={star.index} name={this.effectiveIconSelected} />
+				</div>
+				<div class="ui5-rating-indicator-half-icon-wrapper ui5-rating-indicator-half-icon-right">
+					<Icon data-ui5-value={star.index} name={halfStarIconName.call(this)} />
 				</div>
 			</li>
 		);
 	} if (this.readonly) {
 		return (
 			<li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
-				<Icon data-ui5-value={star.index} name={favorite} />
+				<Icon data-ui5-value={star.index} name={this.effectiveIconSelected} />
 			</li>
 		);
 	} if (this.disabled) {
 		return (
 			<li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
-				<Icon data-ui5-value={star.index} name={favorite} />
+				<Icon data-ui5-value={star.index} name={this.effectiveIconSelected} />
 			</li>
 		);
 	}
 	return (
 		<li data-ui5-value={star.index} class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
-			<Icon data-ui5-value={star.index} name={unfavorite}/>
+			<Icon data-ui5-value={star.index} name={this.effectiveIconUnselected}/>
 		</li>
 	);
 }
 
 function halfStarIconName(this: RatingIndicator) {
-	return this.disabled || this.readonly ? favorite : unfavorite;
+	return this.disabled || this.readonly ? this.effectiveIconSelected : this.effectiveIconUnselected;
 }

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/SegmentedButtonItemTemplate.tsx

@@ -16,7 +16,8 @@ export default function SegmentedButtonItemTemplate(this: SegmentedButtonItem) {
 			onKeyUp={this._onkeyup}
 			tabindex={this.tabIndexValue ? parseInt(this.tabIndexValue) : undefined }
 			aria-label={this.ariaLabelText}
-			title={this.tooltip}
+			aria-description={this.ariaDescriptionText}
+			title={this.tooltip || this.slotTextContent}
 		>
 			{this.icon &&
 				<Icon

package/src/SegmentedButtonTemplate.tsx

@@ -4,19 +4,23 @@ export default function SegmentedButtonTemplate(this: SegmentedButton) {
 	return (
 		<ul
 			role="listbox"
-			class="ui5-segmented-button-root"
+			class={{
+				"ui5-segmented-button-root": true,
+				"ui5-segmented-button-root-equal-sized-items": !this.itemsFitContent,
+				"ui5-segmented-button-root-content-fit-items": this.itemsFitContent,
+			}}
 			onClick={this._onclick}
 			onMouseDown={this._onmousedown}
 			onKeyDown={this._onkeydown}
 			onKeyUp={this._onkeyup}
 			onFocusIn={this._onfocusin}
-			aria-multiselectable="true"
-			aria-describedby={`${this._id}-invisibleText`}
-			aria-roledescription={this.ariaDescription}
-			aria-label={this.accessibleName}
+			aria-multiselectable={this.selectionMode === "Multiple" ? "true" : "false"}
+			aria-orientation="horizontal"
+			aria-description={this.ariaDescriptionText}
+			aria-label={this.ariaLabelText}
+			aria-roledescription={this.ariaRoleDescription}
 		>
 			<slot></slot>
-			<span id={`${this._id}-invisibleText`} class="ui5-hidden-text">{this.ariaDescribedBy}</span>
 		</ul>
 	);
 }

package/src/SelectPopoverTemplate.tsx

@@ -5,12 +5,14 @@ import ResponsivePopover from "./ResponsivePopover.js";
 import Popover from "./Popover.js";
 import Icon from "./Icon.js";
 import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import Title from "./Title.js";
 
 export default function SelectPopoverTemplate(this: Select) {
 	return (
 		<>
 			{this.options.length > 0 &&
 				<ResponsivePopover
+					id={this.responsivePopoverId}
 					class={{
 						"ui5-select-popover": true,
 						...this.classes.popover
@@ -25,11 +27,12 @@ export default function SelectPopoverTemplate(this: Select) {
 					onBeforeOpen={this._beforeOpen}
 					onClose={this._afterClose}
 					onKeyDown={this._onkeydown}
+					accessibleName={this._isPhone ? this._headerTitleText : undefined}
 				>
 					{this._isPhone &&
 						<div slot="header" class="ui5-responsive-popover-header">
 							<div class="row">
-								<span>{this._headerTitleText}</span>
+								<Title>{this._headerTitleText}</Title>
 								<Button
 									class="ui5-responsive-popover-close-btn"
 									icon={decline}

package/src/SelectTemplate.tsx

@@ -13,7 +13,7 @@ export default function SelectTemplate(this: Select) {
 				}}
 				id={`${this._id}-select`}
 				onClick={this._onclick}
-				title={this.tooltip}
+				title={this._effectiveTooltip}
 			>
 				{!this.icon && this.selectedOptionIcon &&
 					<Icon
@@ -29,7 +29,9 @@ export default function SelectTemplate(this: Select) {
 					role="combobox"
 					aria-haspopup="listbox"
 					aria-label={this.ariaLabelText}
-					aria-describedby={this.valueStateTextId}
+					{...this.ariaDescribedByIds && {
+						"aria-describedby": this.ariaDescribedByIds
+					}}
 					aria-disabled={this.isDisabled}
 					aria-required={this.required}
 					aria-readonly={this.readonly}
@@ -40,6 +42,7 @@ export default function SelectTemplate(this: Select) {
 					onKeyUp={this._onkeyup}
 					onFocusIn={this._onfocusin}
 					onFocusOut={this._onfocusout}
+					aria-controls={this.responsivePopoverId}
 				>
 					{this.hasCustomLabel
 						? <slot name="label"></slot>
@@ -48,22 +51,33 @@ 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}
+					<div part="icon-wrapper"
 						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 &&
@@ -71,6 +85,12 @@ export default function SelectTemplate(this: Select) {
 						{this.valueStateText}
 					</span>
 				}
+
+				{this.ariaDescriptionText &&
+					<span id="accessibleDescription" class="ui5-hidden-text">
+						{this.ariaDescriptionText}
+					</span>
+				}
 			</div>
 			{SelectPopoverTemplate.call(this)}
 		</>

package/src/SliderBaseTemplate.tsx

@@ -35,16 +35,15 @@ export default function SliderBaseTemplate(this: SliderBase, hooks?: {
 						</>)}
 					</ul>
 					{!!this.labelInterval &&
-							<ul class={{
-								"ui5-slider-labels": true,
-								"ui5-slider-hidden-labels": this._labelsOverlapping,
-							}}
-							style={this.styles.labelContainer}
-							>
-								{this._labels.map(l =>
-									<li style={this.styles.label}>{l}</li>
-								)}
-							</ul>
+						<ul class={{
+							"ui5-slider-labels": true,
+							"ui5-slider-hidden-labels": this._labelsOverlapping,
+						}}
+						>
+							{this._labels.map(l =>
+								<li data-counter={l}></li>
+							)}
+						</ul>
 					}
 				</>}
 
@@ -54,7 +53,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/SliderHandleTemplate.tsx

@@ -0,0 +1,15 @@
+import directionArrows from "@ui5/webcomponents-icons/dist/direction-arrows.js";
+import Icon from "./Icon.js";
+import type SliderHandle from "./SliderHandle.js";
+
+export default function SliderHandleTemplate(this: SliderHandle) {
+	return (
+		<div class="ui5-slider-handle-container">
+			<Icon name={directionArrows}
+				mode="Decorative"
+				part="icon"
+				slider-icon
+			></Icon>
+		</div>
+	);
+}

package/src/SliderScaleTemplate.tsx

@@ -0,0 +1,32 @@
+import type SliderScale from "./SliderScale.js";
+
+export default function SliderScaleTemplate(this: SliderScale) {
+	return (
+		<div class="ui5-slider-scale-root" part="inner">
+			{this._tickmarks.length > 0 && (
+				<div class="ui5-slider-scale-tickmarks-container">
+					{this._tickmarks.map(tick => (
+						<div
+							class={{
+								"ui5-slider-scale-tickmark": true,
+								"ui5-slider-scale-tickmark-in-range": tick.isInRange,
+							}}
+							style={{
+								insetInlineStart: `${this.orientation === "Horizontal" ? tick.position : "50"}%`,
+								bottom: `${this.orientation === "Vertical" ? tick.position : "auto"}%`
+							}}
+						>
+							{tick.label && tick.showLabel && (
+								<span class="ui5-slider-scale-tickmark-label">
+									{tick.label}
+								</span>
+							)}
+						</div>
+					))}
+				</div>
+			)}
+			<div class="ui5-slider-scale-progress" part="progress" style={this._progressStyle}></div>
+			<slot></slot>
+		</div>
+	);
+}