@ui5/webcomponents 2.12.0 → 2.13.0-rc.1

package/src/FileUploaderTemplate.tsx

@@ -1,5 +1,7 @@
+import Icon from "./Icon.js";
+import Tokenizer from "./Tokenizer.js";
+import Token from "./Token.js";
 import type FileUploader from "./FileUploader.js";
-import Input from "./Input.js";
 import FileUploaderPopoverTemplate from "./FileUploaderPopoverTemplate.js";
 
 export default function FileUploaderTemplate(this: FileUploader) {
@@ -7,39 +9,89 @@ export default function FileUploaderTemplate(this: FileUploader) {
 		<>
 			<div
 				class="ui5-file-uploader-root"
-				onMouseOver={this._onmouseover}
-				onMouseOut={this._onmouseout}
 				onFocusIn={this._onfocusin}
 				onFocusOut={this._onfocusout}
 				onKeyDown={this._onkeydown}
 				onKeyUp={this._onkeyup}
 				onClick={this._onclick}
+				onMouseDown={this._onmousedown}
 				onDragOver={this._ondrag}
 				onDrop={this._ondrop}
 			>
-				<div class="ui5-file-uploader-mask">
-					{!this.hideInput &&
-						<Input
-							value={this.value}
-							valueState={this.valueState}
-							placeholder={this.placeholder}
-							disabled={this.disabled}
-							tabindex={-1}
-							class="ui5-file-uploader-input"
-						/>
-					}
+				<form class="ui5-file-uploader-form" onSubmit={this._onFormSubmit}>
+					<input
+						type="file"
+						class="ui5-file-uploader-native-input"
+						name={this.name}
+						multiple={this.multiple}
+						accept={this.accept}
+						disabled={this.disabled}
+						title={this.inputTitle}
+						aria-roledescription={this.accInfo.ariaRoledescription}
+						aria-haspopup={this.accInfo.ariaHasPopup}
+						aria-label={this.accInfo.ariaLabel}
+						aria-required={this.accInfo.ariaRequired}
+						aria-invalid={this.accInfo.ariaInvalid}
+						onClick={this._onNativeInputClick}
+						onChange={this._onChange}
+						data-sap-focus-ref
+					/>
+				</form>
+
+				{this.hideInput ? (
 					<slot></slot>
-				</div>
-				<input
-					type="file"
-					tabindex={-1}
-					aria-hidden="true"
-					multiple={this.multiple}
-					accept={this.accept}
-					title={this.titleText}
-					disabled={this.disabled}
-					onChange={this._onChange}
-				/>
+				) : (
+					<div class="ui5-file-uploader-display-container">
+						<div class="ui5-file-uploader-display-elements">
+							{this._selectedFilesNames.length > 0 ? (
+								<>
+									<Tokenizer
+										class="ui5-file-uploader-tokenizer"
+										expanded={this._tokenizerExpanded}
+										open={this._tokenizerOpen}
+										popoverMinWidth={this._formWidth}
+										onClick={this._onTokenizerClick}
+										onMouseDown={this._onTokenizerMouseDown}
+										onKeyDown={this._onTokenizerKeyDown}
+										onKeyUp={this._onTokenizerKeyUp}
+										preventInitialFocus
+										readonly
+									>
+										{this._selectedFilesNames.map(fileName => (
+											<Token
+												text={fileName}
+											/>
+										))}
+									</Tokenizer>
+									<Icon
+										name="decline"
+										class="ui5-file-uploader-clear-icon inputIcon"
+										onClick={this._onClearIconClick}
+										title={this.clearIconTitle}
+									/>
+								</>
+							) : (
+								<input
+									class="ui5-file-uploader-display-input"
+									tabindex={-1}
+									aria-hidden="true"
+									title={this.inputTitle}
+									placeholder={this.resolvedPlaceholder}
+									inner-input
+									readonly
+								/>
+							)}
+
+							<Icon
+								name="value-help"
+								class="ui5-file-uploader-value-help-icon inputIcon"
+								title={this.valueHelpTitle}
+							/>
+						</div>
+
+						<slot></slot>
+					</div>
+				)}
 			</div>
 
 			{ FileUploaderPopoverTemplate.call(this) }

package/src/InputTemplate.tsx

@@ -108,6 +108,10 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						<span id="accessibleDescription" class="ui5-hidden-text">{this.accInfo.accessibleDescription}</span>
 					}
 
+					{this.linksInAriaValueStateHiddenText.length > 0 &&
+						<span id="hiddenText-value-state-link-shortcut" class="ui5-hidden-text">{this.valueStateLinksShortcutsTextAcc}</span>
+					}
+
 					{this.hasValueState &&
 						<span id="valueStateDesc" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
 					}

package/src/MultiComboBoxPopoverTemplate.tsx

@@ -78,7 +78,7 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 
 			{!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>

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/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>
 					}
 				</>}
 

package/src/SplitButtonTemplate.tsx

@@ -8,7 +8,7 @@ export default function SplitButtonTemplate(this: SplitButton) {
 			role={this._hideArrowButton ? "button" : "group"}
 			class="ui5-split-button-root"
 			tabindex={this._tabIndex}
-			aria-labelledby={`${this._id}-invisibleTextDefault ${this._id}}-invisibleText`}
+			aria-labelledby={`${this._id}-invisibleTextDefault ${this._id}-invisibleText`}
 			onFocusOut={this._onFocusOut}
 			onKeyDown={this._onKeyDown}
 			onKeyUp={this._onKeyUp}

package/src/TimeSelectionClocksTemplate.tsx

@@ -19,6 +19,7 @@ export default function TimeSelectionClocksTemplate(this: TimeSelectionClocks) {
 					<>
 						{ entity.hasSeparator && <span class="ui5-time-selection-separator">:</span> }
 						<ToggleSpinButton
+							data-sap-focus-ref
 							id={`${this._id}_button_${entity.entity}`}
 							data-ui5-clock={entity.entity}
 							valueMin={entity.attributes && entity.attributes.min}

package/src/TokenizerPopoverTemplate.tsx

@@ -42,7 +42,7 @@ export default function TokenizerPopoverTemplate(this: Tokenizer) {
 				onItemDelete={this.itemDelete}
 			>
 				{this._tokens
-					.map(token => <ListItemStandard key={String(token._id)} data-ui5-token-ref-id={token._id} wrappingType="Normal">{token.text}</ListItemStandard>)}
+					.map(token => <ListItemStandard key={String(token._id)} data-ui5-token-ref-id={token._id} wrappingType="Normal" text={token.text}></ListItemStandard>)}
 			</List>
 
 			{this._isPhone &&

package/src/features/InputSuggestionsTemplate.tsx

@@ -72,7 +72,6 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
 						slot="header"
 						class={{
 							"ui5-responsive-popover-header": true,
-							"ui5-responsive-popover-header--focused": this._isValueStateFocused,
 							...this.classes.popoverValueState,
 						}}
 						style={this.styles.suggestionPopoverHeader}

package/src/i18n/messagebundle.properties

@@ -218,10 +218,23 @@ EXPANDABLE_TEXT_SHOW_MORE_POPOVER_ARIA_LABEL=Show the full text
 #XACT: ARIA-label text for link that allows the user to close the popover with the complete text
 EXPANDABLE_TEXT_SHOW_LESS_POPOVER_ARIA_LABEL=Close the popover
 
-FILEUPLOAD_BROWSE=Browse...
+#XACT: ARIA announcement for the FileUploader's roledescription attribute
+FILEUPLOADER_ROLE_DESCRIPTION=File Uploader
 
-#XACT: File uploader title
-FILEUPLOADER_TITLE=Upload File
+#XACT: Default placeholder text for the ui5-file-uploader
+FILEUPLOADER_DEFAULT_PLACEHOLDER=Browse or drop a file
+
+#XACT: Default placeholder text for the multiple ui5-file-uploader
+FILEUPLOADER_DEFAULT_MULTIPLE_PLACEHOLDER=Browse or drop multiple files
+
+#XTOL: Default tooltip text for the ui5-file-uploader's input field
+FILEUPLOADER_INPUT_TOOLTIP=All files will be replaced on each upload
+
+#XTOL: Default tooltip text for the ui5-file-uploader's value help icon
+FILEUPLOADER_VALUE_HELP_TOOLTIP=Browse and replace all files
+
+#XTOL: Default tooltip text for the ui5-file-uploader's clear icon
+FILEUPLOADER_CLEAR_ICON_TOOLTIP=Remove all files
 
 GROUP_HEADER_TEXT=Group Header
 
@@ -564,6 +577,18 @@ VALUE_STATE_INFORMATION=Informative entry
 #XTOL: text that is appended to the tooltips of input fields etc. which are marked to be in success state
 VALUE_STATE_SUCCESS=Entry successfully validated
 
+#XACT: ARIA announcement for keyboard shortcut to value state link
+VALUE_STATE_LINK=To move the focus to the link, press Ctrl+Alt+F8
+
+#XACT: ARIA announcement for keyboard shortcut to value state link on Mac
+VALUE_STATE_LINK_MAC=To move the focus to the link, press Cmd+Option+F8
+
+#XACT: ARIA announcement for keyboard shortcut to value state multiple links
+VALUE_STATE_LINKS=To go to the first link, press Ctrl+Alt+F8. To move to the next link, use Tab
+
+#XACT: ARIA announcement for keyboard shortcut to value state multiple links on Mac
+VALUE_STATE_LINKS_MAC=To go to the first link, press Cmd+Option+F8. To move to the next link, use Tab
+
 #XBUT: Tooltip text for 'Next' button in the Calendar Header
 CALENDAR_HEADER_NEXT_BUTTON = Next
 

package/src/themes/Button.css

@@ -318,7 +318,7 @@ bdi {
 	top: 0;
 	inset-inline-end: 0;
 	margin: -0.5rem;
-	z-index: 1000;
+	z-index: 1;
 	font-family: "72override", var(--sapButton_FontFamily);
 	font-size: var(--sapFontSmallSize);
 	--_ui5-tag-height: 0.625rem;
@@ -331,7 +331,7 @@ bdi {
 	top: 0;
 	inset-inline-end: 0;
 	margin: -0.25rem;
-	z-index: 1000;
+	z-index: 1;
 }
 
 :host(:state(has-overlay-badge)) {

package/src/themes/FileUploader.css

@@ -1,66 +1,174 @@
 @import "./FormComponents.css";
+@import "./Input.css";
+@import "./InputIcon.css";
+@import "./ValueStateVariables.css";
 
 :host {
 	display: inline-block;
 }
 
-.ui5-file-uploader-root {
-	position: relative;
+:host([hide-input]) {
+	width: max-content;
+	height: max-content;
 }
 
-.ui5-file-uploader-root input[type=file] {
-	opacity: 0;
+:host([hide-input]) .ui5-file-uploader-form {
 	position: absolute;
 	top: 0;
 	left: 0;
-	height: 100%;
 	width: 100%;
-	font-size: 0;
+	height: 100%;
+	display: block;
 }
 
-.ui5-file-uploader-root input[type=file]:not([disabled]) {
-	cursor: pointer;
+.ui5-file-uploader-root,
+.ui5-file-uploader-form {
+	position: relative;
+	width: inherit;
+	height: inherit;
+}
+
+.ui5-file-uploader-root .ui5-file-uploader-native-input {
+	position: relative;
+	display: block;
+	width: inherit;
+	height: inherit;
+	opacity: 0;
+	font-size: 0;
 }
 
-.ui5-file-uploader-mask {
+.ui5-file-uploader-display-container {
+	position: absolute;
+	top: 0;
+	inset-inline-start: 0;
+	width: inherit;
+	height: inherit;
 	display: flex;
+	column-gap: 0.5rem;
 	align-items: center;
 }
 
-.ui5-file-uploader-mask [ui5-input] {
-	margin-right: 0.25rem;
+.ui5-file-uploader-display-elements {
+	height: inherit;
+	flex: 1;
+	display: flex;
+	position: relative;
 }
 
-:host([value-state="None"]:not([disabled]):hover) [ui5-input],
-:host(:not([value-state]):not([disabled]):hover) [ui5-input] {
-	border: var(--_ui5_file_uploader_hover_border);
-	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--sapField_Hover_Shadow);
+.ui5-file-uploader-tokenizer,
+.ui5-file-uploader-display-input {
+	position: absolute;
+	top: 0;
+	inset-inline-start: 0;
+	height: inherit;
+	border: none;
+	outline: none;
+	cursor: pointer;
 }
 
-:host([value-state="Negative"]:not([disabled]):hover) [ui5-input] {
-	background-color: var(--_ui5_file_uploader_value_state_error_hover_background_color);
-	box-shadow: var(--sapField_Hover_InvalidShadow);
+.ui5-file-uploader-clear-icon,
+.ui5-file-uploader-value-help-icon {
+	position: absolute;
+	cursor: pointer;
 }
 
-:host([value-state="Critical"]:not([disabled]):hover) [ui5-input] {
-	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--sapField_Hover_WarningShadow);
+.ui5-file-uploader-tokenizer {
+	max-width: var(--_ui5_file_uploader_tokenizer_width);
 }
 
-:host([value-state="Positive"]:not([disabled]):hover) [ui5-input] {
-	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--sapField_Hover_SuccessShadow);
+.ui5-file-uploader-display-input {
+	width: var(--_ui5_file_uploader_display_input_width);
+}
+
+.ui5-file-uploader-clear-icon {
+	inset-inline-end: var(--_ui5_input_icon_width);
+}
+
+.ui5-file-uploader-value-help-icon {
+	inset-inline-end: 0rem;
+}
+
+/* Input styles overrides */
+:host(:not([readonly])),
+:host([readonly][disabled]),
+:host([value-state="None"]:not([readonly]):hover),
+:host([value-state="Negative"]:not([readonly]):not([disabled])),
+:host([value-state="Negative"]:not([readonly])[focused][opened]:hover),
+:host([value-state="Negative"]:not([readonly]):not([focused]):hover),
+:host([value-state="Critical"]:not([readonly]):not([disabled])),
+:host([value-state="Critical"]:not([readonly])[focused][opened]:hover),
+:host([value-state="Critical"]:not([readonly]):not([focused]):hover),
+:host([value-state="Positive"]:not([readonly]):not([disabled])),
+:host([value-state="Positive"]:not([readonly])[focused][opened]:hover),
+:host([value-state="Positive"]:not([readonly]):not([focused]):hover),
+:host([value-state="Information"]:not([readonly]):not([disabled])),
+:host([value-state="Information"]:not([readonly])[focused][opened]:hover),
+:host([value-state="Information"]:not([readonly]):not([focused]):hover),
+:host(:not([value-state]):not([readonly]):hover) {
+	box-shadow: none;
+	background: none;
+}
+
+:host(:not([readonly])) .ui5-file-uploader-display-elements,
+:host([readonly][disabled]) .ui5-file-uploader-display-elements {
+	box-shadow: var(--sapField_Shadow);
+	border: var(--_ui5-input-border);
+	border-radius: var(--_ui5_input_border_radius);
+	background: var(--sapField_BackgroundStyle);
 }
 
-:host([value-state="Information"]:not([disabled]):hover) [ui5-input] {
+/* Value state styles */
+:host([value-state="Negative"]:not([readonly]):not([disabled])) .ui5-file-uploader-display-elements,
+:host([value-state="Critical"]:not([readonly]):not([disabled])) .ui5-file-uploader-display-elements,
+:host([value-state="Positive"]:not([readonly]):not([disabled])) .ui5-file-uploader-display-elements,
+:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-file-uploader-display-elements {
+	box-shadow: var(--ui5_value_state-box-shadow);
+	background: var(--ui5_value_state-background);
+	background-color: var(--ui5_value_state-background-color);
+}
+
+/* Value state hover styles */
+:host([value-state="None"]:not([readonly]):hover) .ui5-file-uploader-display-elements,
+:host(:not([value-state]):not([readonly]):hover) .ui5-file-uploader-display-elements {
+	box-shadow: var(--sapField_Hover_Shadow);
+	background: var(--sapField_Hover_BackgroundStyle);
+}
+
+:host([value-state="Negative"]:not([readonly]):not([focused]):hover) .ui5-file-uploader-display-elements,
+:host([value-state="Negative"]:not([readonly])[focused][opened]:hover) .ui5-file-uploader-display-elements {
+	background-color: var(--_ui5_input_value_state_error_hover_background);
+	box-shadow: var(--sapField_Hover_InvalidShadow);
+}
+
+:host([value-state="Negative"][focused]:not([opened]):not([readonly])) .ui5-file-uploader-display-elements,
+:host([value-state="Positive"]:not([readonly]):not([focused]):hover) .ui5-file-uploader-display-elements,
+:host([value-state="Positive"]:not([readonly])[focused][opened]:hover) .ui5-file-uploader-display-elements,
+:host([value-state="Positive"][focused]:not([opened]):not([readonly])) .ui5-file-uploader-display-elements,
+:host([value-state="Critical"]:not([readonly]):not([focused]):hover) .ui5-file-uploader-display-elements,
+:host([value-state="Critical"]:not([readonly])[focused][opened]:hover) .ui5-file-uploader-display-elements,
+:host([value-state="Critical"][focused]:not([opened]):not([readonly])) .ui5-file-uploader-display-elements,
+:host([value-state="Information"]:not([readonly]):not([focused]):hover) .ui5-file-uploader-display-elements,
+:host([value-state="Information"]:not([readonly])[focused][opened]:hover) .ui5-file-uploader-display-elements,
+:host([value-state="Information"][focused]:not([opened]):not([readonly])) .ui5-file-uploader-display-elements{
 	background-color: var(--sapField_Hover_Background);
-	box-shadow: var(--sapField_Hover_InformationShadow);
 }
 
-:host(:not([disabled]):active) [ui5-button] {
-	background-color: var(--sapButton_Active_Background);
-	border-color: var(--sapButton_Active_BorderColor);
-	color: var(--sapButton_Active_TextColor);
-	text-shadow: none;
+/* Value state focus styles */
+:host([focused][hide-input]) .ui5-file-uploader-root:has(.ui5-file-uploader-native-input:focus)::after,
+:host([focused]) .ui5-file-uploader-root:has(.ui5-file-uploader-native-input:focus) .ui5-file-uploader-display-elements::after {
+	content: var(--ui5_input_focus_pseudo_element_content);
+	position: absolute;
+	pointer-events: none;
+	z-index: 2;
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_input_focus_outline_color);
+	border-radius: var(--_ui5_input_focus_border_radius);
+	top: var(--_ui5_input_focus_offset);
+	bottom: var(--_ui5_input_focus_offset);
+	left: var(--_ui5_input_focus_offset);
+	right: var(--_ui5_input_focus_offset);
+}
+
+:host([focused]:not([opened]):not([readonly]):not([hide-input]))
+	.ui5-file-uploader-root:has(.ui5-file-uploader-native-input:focus) .ui5-file-uploader-display-elements::after {
+	border-color: var(--ui5_value_state-focus-outline, var(--_ui5_input_focus_outline_color));
 }

package/src/themes/SliderBase.css

@@ -93,7 +93,7 @@
 
 .ui5-slider-tickmarks li {
 	height: var(--_ui5_slider_tickmark_height);
-	border-inline-start: 1px solid var(--_ui5_slider_tickmark_bg);
+	border-inline-start: 0.0625rem solid var(--_ui5_slider_tickmark_bg);
 }
 
 .ui5-slider-handle {
@@ -203,28 +203,38 @@
 	margin: 0;
 	padding: 0;
 	white-space: nowrap;
+    height: 1rem;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
 }
 
 .ui5-slider-labels li {
-	position: relative;
+    position: relative;
 	list-style: none;
-	padding-top: 0.3125rem;
-	height: 1rem;
 	margin: 0;
 	text-align: center;
 	display: inline-block;
-	color: var(--_ui5_slider_label_color);
 	font-family: var(--sapFontFamily);
 	font-size: var(--_ui5_slider_label_fontsize);
 	padding-top: 0;
 	box-sizing: border-box;
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-	vertical-align: top;
+    width: 0.0625rem;
+    visibility: hidden;
+}
+
+.ui5-slider-labels li::after {
+	content: attr(data-counter);
+	position: absolute;
+	top: 0;
+	visibility: visible;
+    display: inline-block;
+    width: 2rem;
+	color: var(--_ui5_slider_label_color);
+    transform: translateX(-50%);
 }
 
-.ui5-slider-hidden-labels li:not(:first-child):not(:last-child) {
+.ui5-slider-hidden-labels li:not(:first-child):not(:last-child)::after {
 	visibility: hidden;
 }
 

package/src/themes/ValueStateMessage.css

@@ -74,7 +74,7 @@
 	background: var(--sapInformationBackground);
 }
 
-.ui5-responsive-popover-header.ui5-responsive-popover-header--focused, .ui5-responsive-popover-header:focus {
+.ui5-responsive-popover-header:focus {
 	outline-offset: var(--_ui5_value_state_header_offset);
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }

package/src/themes/ValueStateVariables.css

@@ -0,0 +1,27 @@
+:host([value-state="Negative"]:not([readonly]):not([disabled])) {
+	--ui5_value_state-background: var(--sapField_InvalidBackgroundStyle);
+	--ui5_value_state-background-color: var(--sapField_InvalidBackground);
+	--ui5_value_state-box-shadow: var(--sapField_InvalidShadow);
+	--ui5_value_state-focus-outline: var(--_ui5_input_focused_value_state_error_focus_outline_color);
+}
+
+:host([value-state="Critical"]:not([readonly]):not([disabled])) {
+	--ui5_value_state-background: var(--sapField_WarningBackgroundStyle);
+	--ui5_value_state-background-color: var(--sapField_WarningBackground);
+	--ui5_value_state-box-shadow: var(--sapField_WarningShadow);
+	--ui5_value_state-focus-outline: var(--_ui5_input_focused_value_state_warning_focus_outline_color);
+}
+
+:host([value-state="Positive"]:not([readonly]):not([disabled])) {
+	--ui5_value_state-background: var(--sapField_SuccessBackgroundStyle);
+	--ui5_value_state-background-color: var(--sapField_SuccessBackground);
+	--ui5_value_state-box-shadow: var(--sapField_SuccessShadow);
+	--ui5_value_state-focus-outline: var(--_ui5_input_focused_value_state_success_focus_outline_color);
+}
+
+:host([value-state="Information"]:not([readonly]):not([disabled])) {
+	--ui5_value_state-background: var(--sapField_InformationBackgroundStyle);
+	--ui5_value_state-background-color: var(--sapField_InformationBackground);
+	--ui5_value_state-box-shadow: var(--sapField_InformationShadow);
+	--ui5_value_state-focus-outline: var(--_ui5_input_focused_value_state_information_focus_outline_color);
+}

package/src/themes/base/FileUploader-parameters.css

@@ -1,4 +1,6 @@
 :root {
 	--_ui5_file_uploader_hover_border: 1px solid var(--sapField_Hover_BorderColor);
 	--_ui5_file_uploader_value_state_error_hover_background_color: var(--sapField_Hover_Background);
+	--_ui5_file_uploader_display_input_width: calc(100% - var(--_ui5_input_icon_width));
+	--_ui5_file_uploader_tokenizer_width: calc(100% - 2 * var(--_ui5_input_icon_width) - var(--_ui5_input_inner_space_to_tokenizer));
 }