@ui5/webcomponents 2.22.0-rc.3 → 2.22.0-rc.4

package/src/themes/RangeSlider.css

@@ -1,77 +1,29 @@
-:host([ui5-range-slider]) .ui5-slider-progress-container::before {
-	background-color: var(--_ui5_slider_progress_container_dot_background);
-}
-
-/* Range Slider handles (Horizon implementatioon) */
-
-.ui5-slider-root:hover:active .ui5-slider-handle:not(:focus) {
-	background: var(--sapSlider_RangeHandleBackground);
-}
-
-:host([range-pressed]) .ui5-slider-root:active .ui5-slider-handle:not(:focus) {
-	background: var(--_ui5_range_slider_handle_active_background);
-	border: var(--_ui5_slider_handle_focus_border);
-	box-shadow: none;
-}
-
-:host([range-pressed]) .ui5-slider-handle [slider-icon] {
-	display: var(--_ui5_range_slider_active_handle_icon_display);
-}
-
-.ui5-slider-root:not(.ui5-slider-root-phone):focus .ui5-slider-inner .ui5-slider-handle,
-.ui5-slider-root:not(.ui5-slider-root-phone) .ui5-slider-inner .ui5-slider-handle:focus {
-	background: var(--_ui5_range_slider_handle_background_focus);
-}
+@import "./InvisibleTextStyles.css";
+@import "./FormComponents.css";
 
-.ui5-slider-root:not(.ui5-slider-root-phone) .ui5-slider-inner .ui5-slider-handle:focus [slider-icon] {
-  display: none;
+:host {
+	display: inline-block;
+	height: var(--_ui5_slider_height, 2.75rem);
+	width: 100%;
 }
 
-.ui5-slider-root:not(.ui5-slider-root-phone) .ui5-slider-progress:focus::before {
-	display: var(--_ui5_range_slider_legacy_progress_focus_display);
-	content: '';
-	position: absolute;
-	width: var(--_ui5_range_slider_focus_outline_width);
-	border: var(--_ui5_slider_progress_outline);
-	border-radius: var(--_ui5_range_slider_focus_outline_radius);
-	top: var(--_ui5_slider_progress_outline_offset);
-	height: var(--_ui5_slider_outer_height);
-	box-sizing: border-box;
-	left: var(--_ui5_slider_progress_outline_offset_left);
+:host([label-interval]:not([label-interval="0"])) {
+	height: 3.75rem;
+	align-items: flex-start;
 }
 
-.ui5-slider-progress {
-  position: relative;
-  inset-inline-start: 0;
-}
-
-.ui5-slider-progress:focus::after {
-	border: 0.125rem solid var(--sapContent_FocusColor);
-	border-radius: 0.5rem;
-	content: "";
-	display: var(--_ui5_range_slider_progress_focus_display);
-	position: absolute;
-	top: var(--_ui5_range_slider_progress_focus_top);
-	left: var(--_ui5_range_slider_progress_focus_left);
-	right: var(--_ui5_range_slider_progress_focus_right);
-	padding: var(--_ui5_range_slider_progress_focus_padding);
-	height: var(--_ui5_range_slider_progress_focus_height);
+.ui5-slider-evo-root {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	padding: var(--_ui5_slider_root_side_padding);
 	box-sizing: border-box;
+	min-width: var(--_ui5_slider_inner_min_width);
 }
 
-.ui5-slider-handle {
-	background: var(--_ui5_range_slider_handle_background);
+:host([disabled]) {
+	opacity: var(--_ui5_slider_disabled_opacity);
+	cursor: default;
+	pointer-events: none;
 }
-
-.ui5-slider-progress-container:hover ~ .ui5-slider-handle:not(:focus),
-.ui5-slider-handle:hover  {
-	background: var(--_ui5_range_slider_root_hover_handle_bg);
-}
-
-.ui5-slider-root:hover .ui5-slider-handle:not(:focus) [slider-icon] {
-	display: var(--_ui5_range_slider_root_hover_handle_icon_display);
-}
-
-:host([range-pressed]) .ui5-slider-root:active .ui5-slider-handle:not(:focus) [slider-icon] {
-	display: var(--_ui5_range_slider_root_active_handle_icon_display);
-}

package/src/themes/Slider.css

@@ -3,7 +3,7 @@
 
 :host {
 	display: inline-block;
-	height: var(--_slider_height, 2.75rem);
+	height: var(--_ui5_slider_height, 2.75rem);
 	width: 100%;
 }
 
@@ -17,8 +17,9 @@
 	height: 100%;
 	display: flex;
 	align-items: center;
-	padding: var(--_slider_root_side_padding);
+	padding: var(--_ui5_slider_root_side_padding);
 	box-sizing: border-box;
+	min-width: var(--_ui5_slider_inner_min_width);
 }
 
 :host([disabled]) {
@@ -26,7 +27,3 @@
 	cursor: default;
 	pointer-events: none;
 }
-
-[ui5-slider-handle] {
-	z-index: 5;
-}

package/src/themes/SliderBase.css

@@ -1,270 +1,2 @@
 @import "./InvisibleTextStyles.css";
-@import "./FormComponents.css";
-
-:host([disabled]) {
-	opacity: var(--_ui5_slider_disabled_opacity);
-	cursor: default;
-	pointer-events: none;
-}
-
-:host {
-	box-sizing: border-box;
-	cursor: pointer;
-	width: 100%;
-}
-
-:host(:not([hidden])) {
-	display: inline-block;
-}
-
-.ui5-slider-root {
-	box-sizing: border-box;
-	height: var(--_ui5_slider_root_height);
-	outline: none;
-	padding: var(--_ui5_slider_padding);
-	touch-action: none;
-}
-
-.ui5-slider-inner {
-	background-repeat: no-repeat;
-	position: relative;
-	min-width: var(--_ui5_slider_inner_min_width);
-	height: 100%;
-}
-
-.ui5-slider-progress-container {
-	width: 100%;
-	background: var(--_ui5_slider_progress_container_background);
-	border: var(--_ui5_slider_progress_border);
-	border-radius: var(--_ui5_slider_progress_border_radius);
-	height: var(--_ui5_slider_inner_height);
-	position: relative;
-	box-sizing: var(--_ui5_slider_progress_box_sizing);
-	top: var(--_ui5_slider_progress_container_top);
-}
-
-.ui5-slider-progress-container::before,
-.ui5-slider-progress-container::after {
-	display: var(--_ui5_slider_progress_container_dot_display);
-	content: "";
-	position: absolute;
-	box-sizing: border-box;
-	border-radius: 50%;
-	width: var(--_ui5_slider_start_end_point_size);
-	height: var(--_ui5_slider_start_end_point_size);
-	top: var(--_ui5_slider_start_end_point_top);
-}
-
-.ui5-slider-progress-container::before {
-	inset-inline-start: var(--_ui5_slider_start_end_point_left);
-	background-color: var(--_ui5_slider_progress_before_background);
-	border: var(--_ui5_slider_progress_before_border);
-}
-
-.ui5-slider-progress-container::after {
-	inset-inline-end: var(--_ui5_slider_start_end_point_left);
-	background-color: var(--_ui5_slider_progress_after_background);
-	border: var(--_ui5_slider_progress_after_border);
-}
-
-.ui5-slider-progress {
-	background: var(--_ui5_slider_progress_background);
-	border-radius: var(--_ui5_slider_active_progress_border_radius);
-	height: var(--_ui5_slider_active_progress_height);
-	position: absolute;
-	outline: none;
-	box-sizing: content-box;
-	border: var(--_ui5_slider_active_progress_border);
-	inset-inline-start: var(--_ui5_slider_active_progress_left);
-	top: var(--_ui5_slider_active_progress_top);
-}
-
-.ui5-slider-tickmarks {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	top: var(--_ui5_slider_tickmark_top);
-	display: flex;
-	box-sizing: border-box;
-	width: 100%;
-	justify-content: space-between;
-	position: absolute;
-	z-index: 1;
-}
-
-.ui5-slider-tickmarks li {
-	height: var(--_ui5_slider_tickmark_height);
-	border-inline-start: 0.0625rem solid var(--_ui5_slider_tickmark_bg);
-}
-
-.ui5-slider-handle {
-	background: var(--_ui5_slider_handle_background);
-	border: var(--_ui5_slider_handle_border);
-	border-radius: var(--_ui5_slider_handle_border_radius);
-	position: relative;
-	outline: none;
-	height: var(--_ui5_slider_handle_height);
-	width: var(--_ui5_slider_handle_width);
-	box-sizing: var(--_ui5_slider_handle_box_sizing);
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	z-index: 2;
-}
-
-[slider-icon] {
-	display: var(--_ui5_slider_handle_icon_display);
-	color: var(--sapContent_Selected_ForegroundColor);
-	width: var(--_ui5_slider_handle_icon_size);
-	height: var(--_ui5_slider_handle_icon_size);
-}
-
-.ui5-slider-root .ui5-slider-handle:focus [slider-icon] {
-	display: var(--_ui5_range_slider_active_handle_icon_display);
-}
-
-.ui5-slider-progress-container:hover ~ .ui5-slider-handle:not(:focus),
-.ui5-slider-handle:hover {
-	background: var(--_ui5_slider_handle_hover_background);
-	border: var(--_ui5_slider_handle_hover_border);
-}
-
-.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle,
-.ui5-slider-handle:focus {
-	outline: var(--_ui5_slider_handle_outline);
-	outline-offset: var(--_ui5_slider_handle_outline_offset);
-	border: var(--_ui5_slider_handle_focus_border);
-	background: var(--_ui5_slider_handle_background_focus);
-}
-
-.ui5-slider-handle.ui5-slider-handle--start:focus,
-.ui5-slider-handle--end:focus {
-	border: var(--_ui5_slider_handle_focus_border);
-}
-
-.ui5-slider-root:focus:hover .ui5-slider-handle,
-.ui5-slider-handle:focus:hover {
-	border: var(--_ui5_slider_handle_focus_border);
-}
-
-.ui5-slider-handle-container {
-	position: absolute;
-	margin-inline-start: calc(-1 * var(--_ui5_slider_handle_width) / 2);
-	top: var(--_ui5_slider_handle_top);
-}
-
-:host(:not([hidden])) .ui5-slider-handle-container .ui5-slider-tooltip {
-	display: flex;
-	font-family: var(--sapFontFamily);
-	justify-content: center;
-	align-items: center;
-	visibility: hidden;
-	position: absolute;
-	left: 50%;
-	transform: translate(-50%);
-	bottom: var(--_ui5_slider_tooltip_bottom);
-	background: var(--_ui5_slider_tooltip_background);
-	border: var(--_ui5_slider_tooltip_border);
-	border-radius: var(--_ui5_slider_tooltip_border_radius);
-	box-shadow: var(--_ui5_slider_tooltip_box_shadow);
-	font-size: var(--_ui5_slider_tooltip_fontsize);
-	color: var(--_ui5_slider_tooltip_color);
-	height: var(--_ui5_slider_tooltip_height);
-	min-width: var(--_ui5_slider_tooltip_min_width);
-	padding: var(--_ui5_slider_tooltip_padding);
-	box-sizing: var(--_ui5_slider_tooltip_border_box);
-}
-
-:host(:not([hidden])):host([editable-tooltip]) .ui5-slider-handle-container .ui5-slider-tooltip {
-	border: none;
-	background: none;
-	box-shadow: none;
-}
-
-:host([editable-tooltip]) .ui5-slider-tooltip {
-	padding: 0;
-	box-shadow: none;
-}
-
-.ui5-slider-tooltip [ui5-input] {
-	width: 100%;
-	text-align: center;
-}
-
-.ui5-slider-tooltip-value {
-	position: relative;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.ui5-slider-labels {
-	position: absolute;
-	top: 1.25rem;
-	margin: 0;
-	padding: 0;
-	white-space: nowrap;
-    height: 1rem;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-}
-
-.ui5-slider-labels li {
-    position: relative;
-	list-style: none;
-	margin: 0;
-	text-align: center;
-	display: inline-block;
-	font-family: var(--sapFontFamily);
-	font-size: var(--_ui5_slider_label_fontsize);
-	padding-top: 0;
-	box-sizing: border-box;
-    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)::after {
-	visibility: hidden;
-}
-
-.ui5-slider-handle:focus .ui5-slider-tooltip {
-	bottom: var(--_ui5_slider_handle_focused_tooltip_distance);
-}
-
-.ui5-slider-tickmarks li.ui5-slider-tickmark-in-range {
-	border-inline-start: 1px solid var(--_ui5_slider_tickmark_in_range_bg);
-}
-
-:host([show-tickmarks]) .ui5-slider-progress {
-	height: var(--_ui5_slider_no_tickmarks_active_progress_height);
-	border: var(--_ui5_slider_no_tickmarks_active_progress_border);
-	inset-inline-start: var(--_ui5_slider_no_tickmarks_active_progress_left);
-	top: var(--_ui5_slider_no_tickmarks_active_progress_top);
-}
-
-:host([show-tickmarks]) .ui5-slider-progress-container {
-	top: var(--_ui5_slider_no_tickmarks_progress_container_top);
-}
-
-.ui5-slider-handle:focus:after {
-	content: "";
-	display: var(--_ui5_slider_handle_focus_visibility);
-	width: calc(100% + (var(--sapContent_FocusWidth) * 2) + 2px);
-	height: calc(100% + (var(--sapContent_FocusWidth) * 2) + 2px);
-	border: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor);
-	position: absolute;
-	border-radius: var(--_ui5_slider_handle_border_radius);
-	pointer-events: none;
-}
+@import "./FormComponents.css";

package/src/themes/SliderHandle.css

@@ -10,7 +10,7 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	z-index: 2;
+	z-index: 5;
 	top: 0;
 	cursor: pointer;
 	margin-inline-start: calc(var(--_ui5_slider_handle_width) / -2 );
@@ -21,9 +21,11 @@
 :host(:focus) {
 	outline: var(--ui5_slider_handle_outline);
 	outline-offset: var(--ui5_slider_handle_outline_offset);
+	z-index: 6;
 }
 
-:host(:hover) {
+:host(:hover),
+:host([hovered]) {
 	background: var(--_ui5_slider_handle_hover_background);
 	border: var(--_ui5_slider_handle_hover_border);
 }
@@ -56,6 +58,5 @@
 }
 
 :host([orientation="Vertical"]) {
-	/* rotate */
 	transform: rotate(90deg);
 }

package/src/themes/SliderScale.css

@@ -11,14 +11,11 @@
 	height: .25rem;
 	top: 50%;
 	transform: translateY(-50%);
-}
-
-.ui5-slider-scale-root {
 	box-sizing: var(--_ui5_slider_scale_root_box_sizing);
 	border-radius: 0.25rem;
 	width: 100%;
 	position: relative;
-	background: var(--ui5_slider_scale_background);
+	background: var(--_ui5_slider_scale_background);
 	border: var(--_ui5_slider_scale_border);
 }
 
@@ -58,12 +55,54 @@
 	position: absolute;
 	top: var(--_ui5_slider_scale_progress_top);
 	height: var(--_ui5_slider_scale_progress_height);
-	background-color: var(--sapSlider_Selected_Background);
+	background-color: var(--_ui5_slider_scale_progress_background);
 	border: var(--_ui5_slider_scale_progress_border);
 	border-left: none;
 	box-sizing: border-box;
 	z-index: 4;
-	border-radius: .25rem;
+	border-radius: var(--_ui5_slider_scale_progress_border_radius);
+}
+
+.ui5-slider-scale-progress-hover-area {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	height: 2rem;
+	z-index: 3;
+	cursor: pointer;
+}
+
+.ui5-slider-scale-progress:focus {
+	outline: none;
+}
+
+.ui5-slider-scale-progress:focus::after,
+.ui5-slider-scale-progress.ui5-slider-progress--focused::after {
+	border: var(--_ui5_range_slider_progress_focus_border);
+	border-radius: var(--_ui5_range_slider_progress_focus_border_radius, 0.5rem);
+	content: "";
+	display: var(--_ui5_range_slider_progress_focus_display);
+	position: absolute;
+	top: var(--_ui5_range_slider_progress_focus_top);
+	left: var(--_ui5_range_slider_progress_focus_left);
+	right: var(--_ui5_range_slider_progress_focus_right);
+	padding: var(--_ui5_range_slider_progress_focus_padding);
+	height: var(--_ui5_range_slider_progress_focus_height);
+	box-sizing: border-box;
+}
+
+.ui5-slider-scale-progress:focus::before,
+.ui5-slider-scale-progress.ui5-slider-progress--focused::before {
+	display: var(--_ui5_range_slider_legacy_progress_focus_display);
+	content: '';
+	position: absolute;
+	width: var(--_ui5_range_slider_focus_outline_width);
+	border: var(--_ui5_slider_progress_outline);
+	border-radius: var(--_ui5_range_slider_focus_outline_radius);
+	top: var(--_ui5_slider_progress_outline_offset);
+	height: var(--_ui5_slider_outer_height);
+	box-sizing: border-box;
+	left: var(--_ui5_slider_progress_outline_offset_left);
 }
 
 .ui5-slider-scale-root::before {

package/src/themes/SliderTooltip.css

@@ -12,7 +12,7 @@
 	padding: 0 0.5rem;
 	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSmallSize);
-	color: var(--sapTextColor);
+	color: var(--_ui5_slider_tooltip_color);
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -24,7 +24,7 @@
 	height: fit-content;
 	border: none;
 	padding: 0;
-	margin-top: -3rem;
+	margin-top: -3.375rem;
 	box-shadow: none;
 }
 

package/src/themes/TableRow.css

@@ -6,6 +6,10 @@
 	background: var(--_ui5_table_row_alternating_background);
 }
 
+:host([position]) {
+	height: var(--row-height);
+}
+
 :host(:first-of-type) > [ui5-table-cell],
 :host(:first-of-type) > ::slotted([ui5-table-cell]) {
 	border-top: none;
@@ -18,20 +22,30 @@
 :host([aria-selected="true"]) {
 	background: var(--sapList_SelectionBackgroundColor);
 	box-shadow: inset 0 calc(-1 * var(--sapList_BorderWidth)) 0 0 var(--sapList_SelectionBorderColor);
+
+	#actions-cell,
+	#navigated-cell,
+	#selection-cell {
+		clip-path: inset(0px 0px 1px 0px); /* selection bottom border should not overlap with sticky cells */
+	}
 }
 
-:host(:not([_haspopin])) {
+:host(:not([_has-popin])) {
 	/* Use CSS Space Toggles until if() or container style queries are widely supported */
 	--_ui5_table_cell_border_merged: ;
 	--_ui5_table_cell_content_merged: ;
 }
 
-:host(:not([_haspopin]):active),
-:host(:not([_haspopin]):focus-within) {
+:host(:not([_has-popin]):active),
+:host(:not([_has-popin]):focus-within) {
 	/* Provide a valid CSS value to intentionally invalidate the TableCell variable-based rules and disable visual merging. */
 	--_ui5_table_cell_content_merged: initial;
 }
 
+:host([_interactive]) {
+	cursor: pointer;
+}
+
 @media (hover: hover) {
 	:host([_interactive]:hover) {
 		background: var(--sapList_Hover_Background);
@@ -39,7 +53,7 @@
 	:host([_interactive][aria-selected=true]:hover) {
 		background: var(--sapList_Hover_SelectionBackground);
 	}
-	:host(:not([_haspopin]):hover) {
+	:host(:not([_has-popin]):hover) {
 		/* Provide a valid CSS value to intentionally invalidate the TableCell variable-based rules and disable visual merging. */
 		--_ui5_table_cell_content_merged: initial;
 	}
@@ -50,14 +64,6 @@
 	background: var(--sapList_Active_Background);
 }
 
-:host([_interactive]) {
-	cursor: pointer;
-}
-
-:host([position]) {
-	height: var(--row-height);
-}
-
 #popin-cell {
 	padding-inline-start: var(--_ui5_first_table_cell_horizontal_padding);
 	align-content: initial;
@@ -67,38 +73,25 @@
 }
 
 #navigated-cell {
- 	position: sticky;
-	inset-inline-end: 0;
-	z-index: 1;
-	background-color: inherit;
 	overflow: visible;
 	grid-row: span 2;
-	min-width: 0;
-	padding: 0;
 }
 
 :host([navigated]) #navigated {
 	position: absolute;
-	inset: -1px 0px 0px 1px;
+	inset: 0px 0px 0px 1px;
 	background: var(--sapList_SelectionBorderColor);
 }
 
-:host([tabindex]:focus) #navigated {
-	transform: translateX(calc(var(--_ui5_table_navigated_cell_width) * -1));
-	bottom: 3px;
-	top: 2px;
-}
-
-:host([tabindex]:focus) #navigated:dir(rtl) {
-	transform: translateX(var(--_ui5_table_navigated_cell_width));
-}
-
-:host([tabindex]:focus) #navigated-cell {
-	clip-path: inset(var(--sapContent_FocusWidth) var(--sapContent_FocusWidth) var(--sapContent_FocusWidth) calc(var(--_ui5_table_navigated_cell_width) * -1));
-}
-
-:host([tabindex]:focus) #navigated-cell:dir(rtl) {
-	clip-path: inset(var(--sapContent_FocusWidth) calc(var(--_ui5_table_navigated_cell_width) * -1) var(--sapContent_FocusWidth) var(--sapContent_FocusWidth));
+:host([navigated][tabindex]:focus) {
+	#navigated {
+		transform: translateX(calc(var(--_ui5_table_navigated_cell_width) * -1));
+		bottom: 3px;
+		top: 2px;
+	}
+	#navigated:dir(rtl) {
+		transform: translateX(var(--_ui5_table_navigated_cell_width));
+	}
 }
 
 :host([navigated]) #popin-cell {
@@ -113,7 +106,3 @@
 #actions-cell {
 	gap: var(--_ui5_table_row_actions_gap);
 }
-
-#actions-cell:has(+ #navigated-cell) {
-	inset-inline-end: var(--_ui5_table_navigated_cell_width);
-}