@ui5/webcomponents 2.7.0-rc.0 → 2.7.0-rc.1

package/src/CardHeaderTemplate.tsx

@@ -12,8 +12,6 @@ export default function CardHeaderTemplate(this: CardHeader) {
 				"ui5-card-header-ff": isFirefox(),
 			}}
 			part="root"
-			role="group"
-			aria-roledescription={this.ariaRoleDescription}
 			onClick={this._click}
 			onKeyDown={this._keydown}
 			onKeyUp={this._keyup}
@@ -21,6 +19,7 @@ export default function CardHeaderTemplate(this: CardHeader) {
 			<div
 				class="ui5-card-header-focusable-element"
 				aria-labelledby={this.ariaLabelledBy}
+				aria-roledescription={this.ariaRoleDescription}
 				role={this.ariaRoleFocusableElement}
 				data-sap-focus-ref
 				tabindex={0}

package/src/ColorPaletteTemplate.tsx

@@ -40,7 +40,7 @@ export default function ColorPaletteTemplate(this: ColorPalette) {
 					)}
 				</div>
 
-				{this._showMoreColors &&
+				{this.showMoreColors &&
 					<div class="ui5-cp-more-colors-wrapper">
 						<div class="ui5-cp-separator"></div>
 						<Button
@@ -66,7 +66,7 @@ export default function ColorPaletteTemplate(this: ColorPalette) {
 				}
 			</div>
 
-			{ this._effectiveShowMoreColors && this.moreColorsFeature?.template.call(this) }
+			{ this.showMoreColors && this.showMoreColorsTemplate?.call(this) }
 		</>
 	);
 }

package/src/ColorPickerTemplate.tsx

@@ -2,6 +2,7 @@ import type ColorPicker from "./ColorPicker.js";
 import Label from "./Label.js";
 import Slider from "./Slider.js";
 import Input from "./Input.js";
+import Button from "./Button.js";
 
 export default function ColorPickerTemplate(this: ColorPicker) {
 	return (
@@ -46,7 +47,7 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 						value={this._alpha}
 						accessibleName={this.alphaSliderLabel}
 						showTooltip={true}
-						onInput={this._handleAlphaInputFromSlider}
+						onInput={this._handleAlphaInput}
 					/>
 				}
 			</div>
@@ -57,7 +58,7 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 					<span class="ui5-color-picker-color">
 						<div
 							class="ui5-color-picker-color-inner"
-							style={{ "background-color": `rgba(${this._value.r}, ${this._value.g}, ${this._value.b}, ${this._alpha})` }}
+							style={{ "background-color": this._colorValue.toRGBString() }}
 						></div>
 					</span>
 				</div>
@@ -66,7 +67,7 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 					<Label>Hex</Label>
 					<Input
 						class="ui5-color-picker-hex-input"
-						value={this.hex}
+						value={this.HEX}
 						onKeyDown={this._onkeydown}
 						accessibleName={this.hexInputLabel}
 						onChange={this._handleHEXChange}
@@ -77,50 +78,49 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 
 			{this._isDefaultPickerMode &&
 				<div
-					class="ui5-color-picker-rgb-wrapper"
-					onui5-change={this._handleRGBInputsChange}
+					class="ui5-color-channel-inputs-wrapper"
+					onui5-change={this._handleColorInputChange}
 				>
-					<div class="ui5-color-picker-rgb">
-						<Input
-							id="red"
-							class="ui5-color-picker-rgb-input"
-							disabled={this.inputsDisabled}
-							accessibleName={this.redInputLabel}
-							value={String(this._value.r)}
-						/>
-						<Label>R</Label>
-					</div>
-					<div class="ui5-color-picker-rgb">
-						<Input
-							id="green"
-							class="ui5-color-picker-rgb-input"
-							disabled={this.inputsDisabled}
-							accessibleName={this.greenInputLabel}
-							value={String(this._value.g)}
-						/>
-						<Label>G</Label>
-					</div>
-					<div class="ui5-color-picker-rgb">
-						<Input
-							id="blue"
-							class="ui5-color-picker-rgb-input"
-							disabled={this.inputsDisabled}
-							accessibleName={this.blueInputLabel}
-							value={String(this._value.b)}
-						/>
-						<Label>B</Label>
-					</div>
-					<div class="ui5-color-picker-rgb">
+					{this.colorChannelInputs.map(input =>
+						<><div class="ui5-color-channel">
+							<Input
+								id={input.id}
+								class="ui5-color-channel-input"
+								disabled={this.inputsDisabled}
+								accessibleName={input.accessibleName}
+								value={String(input.value)} />
+							<Label>{input.label}</Label>
+						</div>
+						<div class="ui5-color-channel-percentage-label">
+							{input.showPercentSymbol &&
+								<Label>%</Label>
+							}
+						</div></>
+					)}
+
+					<div class="ui5-color-channel">
 						<Input
 							id="alpha"
 							disabled={this.inputsDisabled}
-							class="ui5-color-picker-rgb-input"
+							class="ui5-color-channel-input"
 							value={String(this._alpha)}
 							accessibleName={this.alphaInputLabel}
 							onChange={this._handleAlphaChange}
+							onInput={this._handleAlphaInput}
 						/>
 						<Label>A</Label>
 					</div>
+
+					<div>
+						<Button
+							class="ui5-color-channel-toggle"
+							id="toggle-picker-mode"
+							icon="expand"
+							design="Transparent"
+							tooltip={this.toggleModeTooltip}
+							onClick={this._togglePickerMode}
+						/>
+					</div>
 				</div>
 			}
 		</section>

package/src/TimePickerPopoverTemplate.tsx

@@ -1,9 +1,15 @@
 import type TimePicker from "./TimePicker.js";
 import Button from "./Button.js";
 import Popover from "./Popover.js";
+import Icon from "./Icon.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import TimeSelectionClocks from "./TimeSelectionClocks.js";
 import TimeSelectionInputs from "./TimeSelectionInputs.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import error from "@ui5/webcomponents-icons/dist/error.js";
+import alert from "@ui5/webcomponents-icons/dist/alert.js";
+import sysEnter2 from "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import information from "@ui5/webcomponents-icons/dist/information.js";
 
 export default function TimePickerPopoverTemplate(this: TimePicker) {
 	return (
@@ -16,7 +22,7 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 				opener={this}
 				open={this.open}
 				allowTargetOverlap={true}
-				_hideHeader={true}
+				_hideHeader={!this.hasValueStateText}
 				hideArrow={true}
 				accessibleName={this.pickerAccessibleName}
 				onClose={this.onResponsivePopoverAfterClose}
@@ -24,6 +30,8 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 				onWheel={this._handleWheel}
 				onKeyDown={this._onkeydown}
 			>
+				{this.hasValueStateText && valueStateTextHeader.call(this)}
+
 				<TimeSelectionClocks
 					id={`${this._id}-time-sel`}
 					value={this._timeSelectionValue}
@@ -52,6 +60,8 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 					onWheel={this._handleWheel}
 					onKeyDown={this._onkeydown}
 				>
+					{this.hasValueStateText && valueStateTextHeader.call(this, { "width": "100%" }) }
+
 					<div class="popover-content">
 						<TimeSelectionInputs
 							id={`${this._id}-time-sel-inputs`}
@@ -71,3 +81,40 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 		</>
 	);
 }
+
+function valueStateMessage(this: TimePicker) {
+	return (
+		this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name="valueStateMessage"></slot>
+	);
+}
+
+function valueStateTextHeader(this: TimePicker, style?: Record<string, string>) {
+	if (!this.hasValueStateText) {
+		return;
+	}
+
+	return (
+		<div
+			slot="header"
+			class={{
+				"ui5-popover-header": true,
+				...this.classes.popoverValueState,
+			}}
+			style={style}
+		>
+			<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)}/>
+			{ valueStateMessage.call(this) }
+		</div>
+	);
+}
+
+function valueStateMessageInputIcon(this: TimePicker) {
+	const iconPerValueState = {
+		Negative: error,
+		Critical: alert,
+		Positive: sysEnter2,
+		Information: information,
+	};
+
+	return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+}

package/src/TimePickerTemplate.tsx

@@ -1,13 +1,14 @@
 import type TimePicker from "./TimePicker.js";
 import Icon from "./Icon.js";
-import Input from "./Input.js";
+import DateTimeInput from "./DateTimeInput.js";
 import TimePickerPopoverTemplate from "./TimePickerPopoverTemplate.js";
+import timeEntryRequest from "@ui5/webcomponents-icons/dist/time-entry-request.js";
 
 export default function TimePickerTemplate(this: TimePicker) {
 	return (
 		<>
 			<div id={this._id} class="ui5-time-picker-root">
-				<Input
+				<DateTimeInput
 					data-sap-focus-ref
 					id={`${this._id}-inner`}
 					class="ui5-time-picker-input"
@@ -17,6 +18,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 					readonly={this.readonly}
 					required={this.required}
 					valueState={this.valueState}
+					_shouldOpenValueStatePopover={!this.open}
 					_inputAccInfo={this.accInfo}
 					onClick={this._handleInputClick}
 					onChange={this._handleInputChange}
@@ -24,7 +26,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 					onFocusIn={this._onfocusin}
 					onKeyDown={this._onkeydown}
 				>
-					{this.valueStateMessage.length > 0 &&
+					{this.valueStateMessage.length > 0 && !this.open &&
 						<slot
 							name="valueStateMessage"
 							slot="valueStateMessage"
@@ -34,7 +36,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 					{!this.readonly &&
 						<Icon
 							slot="icon"
-							name={this.openIconName}
+							name={timeEntryRequest}
 							tabindex={-1}
 							showTooltip={true}
 							onClick={this._togglePicker}
@@ -45,7 +47,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 							}}
 						/>
 					}
-				</Input>
+				</DateTimeInput>
 			</div>
 
 			{ TimePickerPopoverTemplate.call(this) }

package/src/ToolbarButtonTemplate.tsx

@@ -21,6 +21,7 @@ export default function ToolbarButtonTemplate(this: ToolbarButton) {
 			hidden={this.hidden}
 			data-ui5-external-action-item-id={this._id}
 			data-ui5-stable={this.stableDomRef}
+			onClick={(...args) => this.onClick(...args)}
 		>
 			{this.text}
 		</Button>

package/src/ToolbarPopoverButtonTemplate.tsx

@@ -16,6 +16,7 @@ export default function ToolbarPopoverButtonTemplate(this: ToolbarButton) {
 			class="ui5-tb-popover-button ui5-tb-popover-item"
 			data-ui5-external-action-item-id={this._id}
 			data-ui5-stable={this.stableDomRef}
+			onClick={(...args) => this.onClick(...args)}
 		>
 			{this.text}
 		</Button>

package/src/ToolbarPopoverSelectTemplate.tsx

@@ -11,6 +11,10 @@ export default function ToolbarPopoverSelectTemplate(this: ToolbarSelect) {
 			disabled={this.disabled}
 			accessibleName={this.accessibleName}
 			accessibleNameRef={this.accessibleNameRef}
+			onClick={(...args) => this.onClick(...args)}
+			onClose={(...args) => this.onClose(...args)}
+			onOpen={(...args) => this.onOpen(...args)}
+			onChange={(...args) => this.onChange(...args)}
 		>
 			{this.options.map((option, index) => (
 				<Option

package/src/ToolbarSelectTemplate.tsx

@@ -12,6 +12,10 @@ export default function ToolbarSelectTemplate(this: ToolbarSelect) {
 			disabled={this.disabled}
 			accessibleName={this.accessibleName}
 			accessibleNameRef={this.accessibleNameRef}
+			onClick={(...args) => this.onClick(...args)}
+			onClose={(...args) => this.onClose(...args)}
+			onOpen={(...args) => this.onOpen(...args)}
+			onChange={(...args) => this.onChange(...args)}
 		>
 			{this.options.map((option, index) => (
 				<Option

package/src/ToolbarTemplate.tsx

@@ -21,6 +21,7 @@ export default function ToolbarTemplate(this: Toolbar) {
 				aria-hidden={this.hideOverflowButton}
 				icon={overflowIcon}
 				design="Transparent"
+				onClick={this.toggleOverflow}
 				class={{
 					"ui5-tb-item": true,
 					"ui5-tb-overflow-btn": true,

package/src/features/ColorPaletteMoreColorsTemplate.tsx

@@ -5,9 +5,9 @@ import ColorPicker from "../ColorPicker.js";
 
 export default function ColorPaletteMoreColorsTemplate(this: ColorPalette) {
 	return (
-		<Dialog headerText={this.colorPaletteDialogTitle}>
+		<Dialog open={this.dialogOpen} headerText={this.colorPaletteDialogTitle} onClose={this._closeDialog}>
 			<div class="ui5-cp-dialog-content">
-				<ColorPicker />
+				<ColorPicker value={this.colorPickerValue} onChange={this.onColorPickerChange} />
 			</div>
 
 			<div slot="footer" class="ui5-cp-dialog-footer">

package/src/i18n/messagebundle.properties

@@ -127,24 +127,36 @@ COLOR_PALETTE_MORE_COLORS_TEXT=More Colors...
 #XTIT: Color Palette dialog button text to set the default color
 COLOR_PALETTE_DEFAULT_COLOR_TEXT=Default Color
 
-#XACT: Aria information for the ColorPicker Alpha slider
+#XACT: ARIA information for the ColorPicker Alpha slider
 COLORPICKER_ALPHA_SLIDER=Alpha control
 
-#XACT: Aria information for the ColorPicker Hue slider
+#XACT: ARIA information for the ColorPicker Hue slider
 COLORPICKER_HUE_SLIDER=Hue control
 
 #XTOL: Six symbol hexadecimal group representing CSS color hex string
 COLORPICKER_HEX=Hexadecimal
 
-#XTOL: Red color for the ColorPicker control
+#XFLD: Label text for the ColorPicker Red input field
 COLORPICKER_RED=Red
 
-#XTOL: Green color for the ColorPicker control
+#XFLD: Label text for the ColorPicker Green input field
 COLORPICKER_GREEN=Green
 
-#XTOL: Blue color for the ColorPicker control
+#XFLD: Label text for the ColorPicker Blue input field
 COLORPICKER_BLUE=Blue
 
+#XFLD: Label text for the ColorPicker Hue input field
+COLORPICKER_HUE=Hue
+
+#XFLD: Label text for the ColorPicker Saturation input field
+COLORPICKER_SATURATION=Saturation
+
+#XFLD: Label text for the ColorPicker Light input field
+COLORPICKER_LIGHT=Light
+
+#XTOL: Tooltip for color picker mode toggle button
+COLORPICKER_TOGGLE_MODE_TOOLTIP=Change Color Mode
+
 #XTOL: Alpha chanel transparency value for RGBA color mode
 COLORPICKER_ALPHA=Alpha
 

package/src/i18n/messagebundle_de.properties

@@ -174,7 +174,7 @@ ARIA_LABEL_LIST_MULTISELECTABLE=Enthält Elemente für Mehrfachauswahl
 
 ARIA_LABEL_LIST_DELETABLE=Enthält löschbare Elemente
 
-MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION=Informierende Informationsleiste schließen
+MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION=Informationsleiste schließen
 
 MESSAGE_STRIP_CLOSE_BUTTON_POSITIVE=Positive Informationsleiste schließen
 

package/src/i18n/messagebundle_en.properties

@@ -404,4 +404,6 @@ TABLE_ROW_SELECTOR=Row Selector
 TABLE_NO_DATA=No Data
 TABLE_ROW_POPIN=Row Popin
 TABLE_MORE=More
-TABLE_MORE_DESCRIPTION=Load more rows by pressing Enter or Space
+TABLE_MORE_DESCRIPTION=To load more rows, press Enter or Space
+TABLE_ROW_ACTIONS=Row Actions
+TABLE_NAVIGATION=Navigation

package/src/i18n/messagebundle_en_US_sappsd.properties

@@ -404,4 +404,6 @@ TABLE_ROW_SELECTOR=[[[Řŏŵ Ŝēĺēċţŏŗ∙∙∙∙∙∙∙]]]
 TABLE_NO_DATA=[[[Ńŏ Ďąţą∙∙∙∙∙∙∙]]]
 TABLE_ROW_POPIN=[[[Řŏŵ Ƥŏρįŋ∙∙∙∙∙]]]
 TABLE_MORE=[[[Μŏŗē]]]
-TABLE_MORE_DESCRIPTION=[[[Ļŏąƌ ɱŏŗē ŗŏŵş ƃŷ ρŗēşşįŋğ Ĕŋţēŗ ŏŗ Ŝρąċē∙∙∙∙∙∙∙∙∙∙∙∙∙∙∙]]]
+TABLE_MORE_DESCRIPTION=[[[Ţŏ ĺŏąƌ ɱŏŗē ŗŏŵş, ρŗēşş Ĕŋţēŗ ŏŗ Ŝρąċē∙∙∙∙∙∙∙∙∙∙∙∙∙∙]]]
+TABLE_ROW_ACTIONS=[[[Řŏŵ Āċţįŏŋş∙∙∙∙∙∙∙∙]]]
+TABLE_NAVIGATION=[[[Ńąʋįğąţįŏŋ∙∙∙∙]]]

package/src/i18n/messagebundle_en_US_saprigi.properties

@@ -404,4 +404,6 @@ TABLE_ROW_SELECTOR=‌‍‌‌‌‌​‍‍‌‍​‍‌‍​​
 TABLE_NO_DATA=‌‌​‌‌‍‍​‍‌​‌‍​​​‍‍​‌‌‌‍‌​‍​​‌‍‌​​​​‌‌​‌‍​No Data
 TABLE_ROW_POPIN=‍‌‍​‌‍​‍‌​‍​‌‍​‌‌‍‍‍​​​​‍‍​​​‍‌​​‍​‌​‌‌‌Row Popin
 TABLE_MORE=‌​​​‍​​​‍‍‍‌​‌​​‍​‌‍​‍​​‍‌‍‍‍‍​​​‍​‍​‍‌‍More
-TABLE_MORE_DESCRIPTION=‌​​‌‍​‍‍​​‍‍​‍​​​‌‍​‌‌‌‍‌​‌‍​‍‍​‍‌‌​​‍‍​‌Load more rows by pressing Enter or Space
+TABLE_MORE_DESCRIPTION=‌​​‌‍​‍‍​​‍‍​‍​​​‌‍​‌‌‌‍‌​‌‍​‍‍​‍‌‌​​‍‍​‌To load more rows, press Enter or Space
+TABLE_ROW_ACTIONS=‌‌‍‍‍‍​‍‍​‌‌‌​‌‌‌‍‍‍‌‍​‍‍​‌‍‍​‍‌‌‍‌‌‍‍Row Actions
+TABLE_NAVIGATION=‌‌​​‍​‌‍​​‌​​‌‍‌‌‌‍​‍‍​‍​‍‍‍‍‌‍‍‍‌‍​‌​Navigation

package/src/i18n/messagebundle_en_US_saptrc.properties

@@ -404,4 +404,6 @@ TABLE_ROW_SELECTOR=qZIIHgNuZwYacqpEsiE0Tg_Row Selector
 TABLE_NO_DATA=78zSy/9LpYivrUvDJGbBxg_No Data
 TABLE_ROW_POPIN=jSWaz9VQvAMjWONvW6vG+w_Row Popin
 TABLE_MORE=e9f2uqDaKq//pPHVgPgVUQ_More
-TABLE_MORE_DESCRIPTION=ni4QAJOJ9vPScc627PXE/w_Load more rows by pressing Enter or Space
+TABLE_MORE_DESCRIPTION=07V7nFnmmsXPc7e5e1Lgxw_To load more rows, press Enter or Space
+TABLE_ROW_ACTIONS=d+acSF9P9XYhZsNi2A7O8Q_Row Actions
+TABLE_NAVIGATION=hr4qP8qbNMvgblRgE3rJwA_Navigation

package/src/themes/ColorPicker.css

@@ -117,7 +117,7 @@
 .ui5-color-picker-current-color {
     width: 100%;
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
     align-items: center;
 }
 
@@ -156,25 +156,41 @@
     margin-left: .2rem;
 }
 
-.ui5-color-picker-rgb-wrapper {
+.ui5-color-channel-inputs-wrapper {
     display: flex;
     justify-content: space-around;
     width: 100%;
+    align-items: center;
 }
 
-.ui5-color-picker-rgb {
+.ui5-color-channel {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-top: 1rem;
+    position: relative;
 }
 
-.ui5-color-picker-rgb-input {
+.ui5-color-channel-input {
     width: 2.5rem;
     min-width: 2.5rem;
     text-align: center;
 }
 
+.ui5-color-channel-input::part(input) {
+    min-width: initial;
+    padding: 0 0.25rem;
+}
+
+.ui5-color-channel-percentage-label {
+    width: 1rem;
+}
+
+.ui5-color-channel-toggle {
+    min-width: var(--_ui_color_channel_toggle_button_width);
+    margin-inline-start: 0.5rem;
+}
+
 .ui5-color-picker-hue-slider::part(progress-container)::before,
 .ui5-color-picker-alpha-slider::part(progress-container)::before,
 .ui5-color-picker-hue-slider::part(progress-container)::after,

package/src/themes/TabInOverflow.css

@@ -14,11 +14,6 @@
 	display: none;
 }
 
-.ui5-tab-semantic-icon {
-	position: absolute;
-	inset-inline-start: -0.25rem;
-}
-
 .ui5-tab-overflow-item--positive:not(.ui5-tab-overflow-item--disabled) .ui5-tab-overflow-itemContent {
 	color: var(--_ui5_tc_overflowItem_positive_color);
 }
@@ -45,9 +40,14 @@
 }
 
 .ui5-tab-overflow-itemContent-wrapper {
-	padding-inline-start: calc(var(--_ui5-tab-indentation-level) * 0.5rem + var(--_ui5-tab-extra-indent, 0) * var(--_ui5_tc_overflowItem_extraIndent));
+	padding-inline-start: calc((calc(var(--_ui5-tab-indentation-level) + var(--_ui5-tab-level-has-icon) * var(--_ui5_tc_overflowItem_additional, 0))) * (var(--_ui5_tc_overflowItem_indent) + var(--_ui5_tc_overflowItem_extra_indent)));
 }
 
+.ui5-tab-overflow-item  .ui5-tab-semantic-icon {
+	position: absolute;
+	inset-inline-start: -1.25rem;
+} 
+
 .ui5-tab-overflow-item--selectedSubTab {
 	background-color: var(--sapList_SelectionBackgroundColor);
 }

package/src/themes/TimePicker.css

@@ -47,4 +47,8 @@
 	word-spacing: inherit;
 	margin: inherit;
 	height: inherit;
+}
+
+.ui5-time-picker-popover::part(header) {
+	padding: 0;
 }

package/src/themes/TimePickerPopover.css

@@ -17,3 +17,8 @@
 .ui5-time-picker-popover::part(content) {
 	padding: 0;
 }
+
+.ui5-time-picker-inputs-popover::part(header) {
+	padding: 0;
+	width: 100%;
+}

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

@@ -74,7 +74,8 @@
 	--_ui5_tc_overflowItem_negative_color: var(--sapNegativeColor);
 	--_ui5_tc_overflowItem_critical_color: var(--sapCriticalColor);
 	--_ui5_tc_overflowItem_focus_offset: 0.125rem;
-	--_ui5_tc_overflowItem_extraIndent: 0rem;
+	--_ui5_tc_overflowItem_indent: 0.5rem;
+	--_ui5_tc_overflowItem_extra_indent: 0rem;
 
 	/* Header Item icons */
 	--_ui5_tc_headerItemIcon_border: 1px solid var(--sapHighlightColor);

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

@@ -36,6 +36,9 @@
 	--_ui5-calendar-legend-item-box-margin: 0.25rem;
 	--_ui5-calendar-legend-item-box-inner-margin: 0.5rem;
 
+	/* ColorPicker */
+	--_ui_color_channel_toggle_button_width: 1.625rem;
+
 	/* ColorPalette */
 	 --_ui5_color-palette-item-height: 1.75rem;
 	 --_ui5_color-palette-item-hover-height: 2.375rem;
@@ -202,6 +205,9 @@
 	--_ui5_checkbox_icon_size: .75rem;
 	--_ui5_checkbox_partially_icon_size: .5rem;
 
+	/* ColorPicker */
+	--_ui_color_channel_toggle_button_width: 1.375rem;
+
 	/* ColorPalette */
 	--_ui5_color-palette-item-height: 1.25rem;
 	--_ui5_color-palette-item-focus-height: 1rem;

package/src/themes/sap_fiori_3_hcb/TabContainer-parameters.css

@@ -40,5 +40,6 @@
 	--_ui5_tc_overflowItem_critical_color: var(--sapGroup_TitleTextColor);
 	--_ui5_tc_overflowItem_default_color: var(--sapGroup_TitleTextColor);
 	--_ui5_tc_overflowItem_current_color: var(--_ui5_tc_overflowItem_default_color);
-	--_ui5_tc_overflowItem_extraIndent: 1rem;
+	--_ui5_tc_overflowItem_extra_indent: 1rem;
+	--_ui5_tc_overflowItem_additional: 1;
 }

package/src/themes/sap_fiori_3_hcw/TabContainer-parameters.css

@@ -40,5 +40,6 @@
 	--_ui5_tc_overflowItem_critical_color: var(--sapGroup_TitleTextColor);
 	--_ui5_tc_overflowItem_default_color: var(--sapGroup_TitleTextColor);
 	--_ui5_tc_overflowItem_current_color: var(--_ui5_tc_overflowItem_default_color);
-	--_ui5_tc_overflowItem_extraIndent: 1rem;
+	--_ui5_tc_overflowItem_extra_indent: 1rem;
+	--_ui5_tc_overflowItem_additional: 1;
 }

package/src/themes/sap_horizon_hcb/TabContainer-parameters.css

@@ -42,7 +42,8 @@
 	--_ui5_tc_overflowItem_critical_color: var(--sapTextColor);
 	--_ui5_tc_overflowItem_default_color: var(--sapTextColor);
 	--_ui5_tc_overflowItem_current_color: var(--_ui5_tc_overflowItem_default_color);
-	--_ui5_tc_overflowItem_extraIndent: 1rem;
+	--_ui5_tc_overflowItem_extra_indent: 1rem;
+	--_ui5_tc_overflowItem_additional: 1;
 
 	/* Overflow Buttons*/
 	--_ui5_tc_overflow_text_color: var(--sapTextColor);

package/src/themes/sap_horizon_hcw/TabContainer-parameters.css

@@ -42,7 +42,8 @@
 	--_ui5_tc_overflowItem_critical_color: var(--sapTextColor);
 	--_ui5_tc_overflowItem_default_color: var(--sapTextColor);
 	--_ui5_tc_overflowItem_current_color: var(--_ui5_tc_overflowItem_default_color);
-	--_ui5_tc_overflowItem_extraIndent: 1rem;
+	--_ui5_tc_overflowItem_extra_indent: 1rem;
+	--_ui5_tc_overflowItem_additional: 1;
 
 	/* Overflow Buttons*/
 	--_ui5_tc_overflow_text_color: var(--sapTextColor);

package/vitest.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    include: ['test/unit/**.test.js'],
+    globals: true,
+    environment: 'jsdom',
+  },
+});