@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/src/themes/SliderHandle.css

@@ -0,0 +1,62 @@
+:host {
+	background: var(--_ui5_slider_handle_background);
+	border: var(--_ui5_slider_handle_border);
+	border-radius: var(--_ui5_slider_handle_border_radius);
+	position: absolute;
+	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: 5;
+	top: 0;
+	cursor: pointer;
+	margin-inline-start: calc(var(--_ui5_slider_handle_width) / -2 );
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+:host(:focus) {
+	outline: var(--ui5_slider_handle_outline);
+	outline-offset: var(--ui5_slider_handle_outline_offset);
+	z-index: 6;
+}
+
+:host(:hover),
+:host([hovered]) {
+	background: var(--_ui5_slider_handle_hover_background);
+	border: var(--_ui5_slider_handle_hover_border);
+}
+
+.ui5-slider-handle-container {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	outline: none;
+}
+
+[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);
+}
+
+:host(:focus),
+:host([active]),
+:host(:active) {
+	[slider-icon] {
+		display: none;
+	}
+
+	background-color: var(--_ui5_slider_handle_background_focus);
+	border: var(--_ui5_slider_handle_focus_border);
+}
+
+:host([orientation="Vertical"]) {
+	transform: rotate(90deg);
+}

package/src/themes/SliderScale.css

@@ -0,0 +1,188 @@
+:host {
+	height: 2rem;
+	position: relative;
+	width: 100%;
+	box-sizing: border-box;
+	user-select: none;
+	cursor: pointer;
+}
+
+.ui5-slider-scale-root {
+	height: .25rem;
+	top: 50%;
+	transform: translateY(-50%);
+	box-sizing: var(--_ui5_slider_scale_root_box_sizing);
+	border-radius: 0.25rem;
+	width: 100%;
+	position: relative;
+	background: var(--_ui5_slider_scale_background);
+	border: var(--_ui5_slider_scale_border);
+}
+
+.ui5-slider-scale-tickmarks-container {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	z-index: 5;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.ui5-slider-scale-tickmark {
+	position: absolute;
+	height: var(--_ui5_slider_scale_tickmark_height);
+	border-left: 0.0625rem solid var(--sapField_BorderColor);
+}
+
+.ui5-slider-scale-tickmark-in-range {
+	border-left-color: var(--sapSlider_Selected_BorderColor);
+}
+
+.ui5-slider-scale-tickmark-label {
+	position: absolute;
+	top: 100%;
+	left: 50%;
+	transform: translateX(-50%);
+	margin-top: 0.875rem;
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapContent_LabelColor);
+	white-space: nowrap;
+}
+
+.ui5-slider-scale-progress {
+	position: absolute;
+	top: var(--_ui5_slider_scale_progress_top);
+	height: var(--_ui5_slider_scale_progress_height);
+	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: 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 {
+	content: "";
+	position: absolute;
+	width: .5rem;
+	height: .5rem;
+	background-color: var(--sapSlider_Selected_Background);
+	border: solid 0.0625rem var(--sapContent_Selected_MeasureIndicatorColor);
+	box-sizing: border-box;
+	border-radius: 50%;
+	inset-inline-start: var(--_ui5_slider_scale_dots_distance);
+	top: 50%;
+	transform: translateY(-50%);
+	display: var(--_ui5_slider_scale_dots_display);
+}
+
+.ui5-slider-scale-root::after {
+	content: "";
+	position: absolute;
+	top: 50%;
+	inset-inline-end: 0;
+	width: .5rem;
+	height: .5rem;
+	background-color: var(--sapContent_MeasureIndicatorColor);
+	border-radius: 50%;
+	border: solid 0.0625rem var(--sapContent_MeasureIndicatorColor);
+	box-sizing: border-box;
+	inset-inline-end: var(--_ui5_slider_scale_dots_distance);
+	top: 50%;
+	transform: translateY(-50%);
+	display: var(--_ui5_slider_scale_dots_display);
+}
+
+:host([orientation="Vertical"]) {
+	width: 2rem;
+	height: 100%;
+
+	.ui5-slider-scale-root {
+		box-sizing: border-box;
+		height: 100%;
+		width: 0.25rem;
+		background-color: var(--sapSlider_Background);
+		position: relative;
+	}
+
+	.ui5-slider-scale-progress {
+		width: 100%;
+		height: auto;
+	}
+
+	.ui5-slider-scale-root:before {
+		left: 50%;
+		top: -1rem;
+		right: auto;
+		transform: translateX(-50%);
+	}
+
+	.ui5-slider-scale-root:after {
+		left: 50%;
+		right: auto;
+		top: auto;
+		bottom: -1rem;
+		transform: translateX(-50%);
+	}
+
+	.ui5-slider-scale-tickmark-label {
+		margin-top: 0;
+		margin-left: 14px;
+		top: 50%;
+		left: 100%;
+		transform: translateY(-50%);
+	}
+
+	.ui5-slider-scale-tickmark {
+		height: auto;
+		width: .5rem;
+		margin-top: 0;
+		margin-left: 0;
+		border-left: none;
+		border-top: 0.0625rem solid var(--sapField_BorderColor);
+	}
+}

package/src/themes/SliderTooltip.css

@@ -24,7 +24,7 @@
 	height: fit-content;
 	border: none;
 	padding: 0;
-	margin-top: -3rem;
+	margin-top: -3.375rem;
 	box-shadow: none;
 }
 

package/src/themes/StepInput.css

@@ -5,14 +5,12 @@
 
 :host(:not([hidden])) {
 	display: inline-block;
-	width: 100%;
 	line-height: normal;
 	letter-spacing: normal;
 	word-spacing: normal;
 }
 
 :host {
-	--ui5_input_focus_pseudo_element_content: none;
 	color: var(--sapField_TextColor);
 	background-color: var(--sapField_Background);
 	border: var(--_ui5_step_input_border_style);
@@ -20,6 +18,7 @@
 	box-sizing: border-box;
 	height: var(--_ui5_input_height);
 	position: relative;
+	isolation: isolate;
 	margin: var(--_ui5_input_margin_top_bottom) 0;
 	min-width: var(--_ui5_step_input_min_width);
 	text-align: right;
@@ -29,6 +28,10 @@
 	-ms-user-select: none;
 }
 
+[ui5-input] {
+	--ui5_input_focus_pseudo_element_content: none;
+}
+
 :host .ui5-step-input-input {
 	text-align: inherit;
 	height: inherit;
@@ -97,7 +100,7 @@
 	pointer-events: none;
 	border-radius: var(--sapField_BorderCornerRadius);
 	border-style: var(--_ui5_input_error_warning_border_style);
-	z-index: 1;
+	z-index: 0;
 	border-width: 0px;
 }
 

package/src/themes/Suggestions.css

@@ -21,4 +21,8 @@
 
 .native-input-wrapper .ui5-input-inner-phone {
 	margin: 0;
+}
+
+.native-input-wrapper .ui5-multi-input-mobile-dialog-button {
+	margin-inline-start: 0.5rem;
 }

package/src/themes/Switch.css

@@ -1,5 +1,6 @@
 @import "./InvisibleTextStyles.css";
 @import "./TapHighlightColor.css";
+@import "./FormComponents.css";
 
 :host(:not([hidden])) {
 	display: inline-block;
@@ -144,14 +145,16 @@
 	cursor: default;
 }
 
-.ui5-switch-root.ui5-switch--checked .ui5-switch-text--off {
+.ui5-switch-root.ui5-switch--checked .ui5-switch-text--off,
+.ui5-switch-root.ui5-switch--checked .ui5-switch-text--readonly {
 	visibility: var(--_ui5_switch_text_hidden);
 }
-.ui5-switch-root:not(.ui5-switch--checked) .ui5-switch-text--on {
+.ui5-switch-root:not(.ui5-switch--checked) .ui5-switch-text--on,
+.ui5-switch-root:not(.ui5-switch--checked) .ui5-switch-text--readonly {
 	visibility: var(--_ui5_switch_text_hidden);
 }
 
-.ui5-switch-root.ui5-switch--checked.ui5-switch--semantic .ui5-switch-text--on, 
+.ui5-switch-root.ui5-switch--checked.ui5-switch--semantic .ui5-switch-text--on,
 .ui5-switch-root.ui5-switch--checked.ui5-switch--desktop.ui5-switch--no-label .ui5-switch-text--on {
 	inset-inline-start: var(--_ui5_switch_text_active_left);
 }
@@ -361,4 +364,50 @@
 
 :dir(rtl).ui5-switch-root.ui5-switch--checked .ui5-switch-slider {
 	transform: var(--_ui5_switch_rtl_transform);
-}
+}
+
+/* Readonly switch styling */
+:host([readonly]) .ui5-switch-root {
+	cursor: default;
+}
+
+:host([readonly]) .ui5-switch-track,
+:host([readonly]) .ui5-switch-root.ui5-switch--semantic .ui5-switch-track {
+	background: var(--sapField_ReadOnly_Background);
+	border: 0.0625rem var(--_ui5_switch_readonly_track_border_style) var(--sapField_ReadOnly_BorderColor);
+}
+
+:host([readonly]) .ui5-switch-handle,
+:host([readonly]) .ui5-switch-root.ui5-switch--semantic .ui5-switch-handle {
+	background: var(--sapField_ReadOnly_Background);
+	border: 0.0625rem var(--_ui5_switch_readonly_handle_border_style) var(--sapField_ReadOnly_BorderColor);
+}
+
+:host([readonly]) .ui5-switch-text--on,
+:host([readonly]) .ui5-switch-text--off,
+:host([readonly]) .ui5-switch-no-label-icon-on,
+:host([readonly]) .ui5-switch-no-label-icon-off,
+:host([readonly]) .ui5-switch-icon-on,
+:host([readonly]) .ui5-switch-icon-off,
+:host([readonly]) .ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-on,
+:host([readonly]) .ui5-switch-root.ui5-switch--semantic .ui5-switch-icon-off,
+:host([readonly]) .ui5-switch-root.ui5-switch--semantic .ui5-switch-text--on,
+:host([readonly]) .ui5-switch-root.ui5-switch--semantic .ui5-switch-text--off {
+	color: var(--sapButton_Handle_TextColor);
+}
+
+/* Readonly switch - remove hover effects */
+:host([readonly]) .ui5-switch--desktop.ui5-switch-root:hover .ui5-switch-handle,
+:host([readonly]) .ui5-switch--desktop.ui5-switch-root.ui5-switch--checked:hover .ui5-switch-handle,
+:host([readonly]) .ui5-switch--desktop.ui5-switch-root.ui5-switch--semantic:hover .ui5-switch-handle,
+:host([readonly]) .ui5-switch--desktop.ui5-switch-root.ui5-switch--semantic.ui5-switch--checked:hover .ui5-switch-handle {
+	box-shadow: none;
+}
+
+:host([readonly]) .ui5-switch--desktop.ui5-switch-root:hover .ui5-switch-track,
+:host([readonly]) .ui5-switch--desktop.ui5-switch-root:hover .ui5-switch-handle,
+:host([readonly]) .ui5-switch--desktop.ui5-switch-root.ui5-switch--semantic:hover .ui5-switch-track,
+:host([readonly]) .ui5-switch--desktop.ui5-switch-root.ui5-switch--semantic:hover .ui5-switch-handle {
+	background: var(--sapField_ReadOnly_Background);
+	border-color: var(--sapField_ReadOnly_BorderColor);
+}

package/src/themes/TabInStrip.css

@@ -154,7 +154,7 @@
 }
 
 .ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
-	bottom: -0.9375rem;
+	bottom: -1rem;
 }
 
 .ui5-tab-strip-item--disabled {

package/src/themes/Table.css

@@ -1,6 +1,7 @@
 :host {
 	display: block;
 	position: relative;
+	z-index: 0; /* create a stacking context for the sticky elements */
 	color: var(--sapList_TextColor);
 	font: var(--sapFontSize) var(--sapFontFamily);
 }
@@ -36,8 +37,4 @@
 	inset: 0;
 	height: 100%;
 	z-index: 2;
-}
-
-:host([loading]) #table:has(#loading[_is-busy]) ::slotted(*) {
-	opacity: var(--sapContent_DisabledOpacity);
 }

package/src/themes/TableCell.css

@@ -1,7 +1,24 @@
+:host {
+	border-top: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
+}
+
+:host([merged]),
+:host([data-border-merged]) {
+	--_ui5_table_cell_merged_border_color: var(--_ui5_table_cell_border_merged) transparent;
+	border-top-color: var(--_ui5_table_cell_merged_border_color, var(--sapList_BorderColor));
+}
+
+:host([merged]) ::slotted(*) {
+	--_ui5_table_cell_merged_content_opacity: var(--_ui5_table_cell_content_merged) 0;
+	opacity: var(--_ui5_table_cell_merged_content_opacity, 1);
+	transition: opacity 300ms ease;
+}
+
 :host([_popin]) {
 	padding-inline-start: 0;
 	padding-inline-end: 0;
 	align-items: center;
+	border-top: none;
 }
 
 :host([_popin]) #popin-header {

package/src/themes/TableCellBase.css

@@ -10,18 +10,12 @@
 	box-sizing: border-box;
 }
 
+:host([_popin]) {
+	justify-content: initial !important;
+	text-align: initial !important;
+}
+
 :host([tabindex]:focus) {
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: calc(-1 * var(--sapContent_FocusWidth));
-}
-
-:host(#selection-cell) {
-	width: auto;
-	min-width: auto;
-	background-color: inherit;
-}
-
-:host([data-ui5-table-cell-fixed]) {
-	position: sticky;
-	z-index: 1;
 }

package/src/themes/TableGroupRow.css

@@ -0,0 +1,20 @@
+:host {
+	color: var(--sapList_TableGroupHeaderTextColor);
+	background: var(--sapList_TableGroupHeaderBackground);
+	font-weight: bold;
+	min-height: 2rem;
+}
+
+#group-cell {
+	grid-column: 1 / -1;
+	padding-inline: var(--_ui5_first_table_cell_horizontal_padding);
+}
+
+:host([_render-dummy-cell]) #group-cell {
+	grid-column: 1 / -2;
+}
+
+:host(:first-of-type) > [ui5-table-cell][aria-colspan] {
+	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
+	border-top: none;
+}

package/src/themes/TableGrowing.css

@@ -6,6 +6,7 @@
 	flex-direction: column;
 	cursor: pointer;
 	border-bottom: 1px solid var(--sapList_BorderColor);
+	background: var(--sapList_Background);
 }
 
 #button:focus {

package/src/themes/TableHeaderRow.css

@@ -1,6 +1,6 @@
 :host {
 	background: var(--sapList_HeaderBackground);
-	border-top: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
+	border-top: var(--sapList_BorderWidth) solid var(--sapList_HeaderBorderColor);
 	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_HeaderBorderColor);
 	grid-template-rows: auto 0px;
 }

package/src/themes/TableRow.css

@@ -6,9 +6,44 @@
 	background: var(--_ui5_table_row_alternating_background);
 }
 
-:host([aria-selected=true]) {
+:host([position]) {
+	height: var(--row-height);
+}
+
+:host(:first-of-type) > [ui5-table-cell],
+:host(:first-of-type) > ::slotted([ui5-table-cell]) {
+	border-top: none;
+}
+
+:host(:last-of-type) {
+	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_TableFooterBorder);
+}
+
+:host([aria-selected="true"]) {
 	background: var(--sapList_SelectionBackgroundColor);
-	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor);
+	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([_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([_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) {
@@ -18,65 +53,45 @@
 	:host([_interactive][aria-selected=true]:hover) {
 		background: var(--sapList_Hover_SelectionBackground);
 	}
+	: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;
+	}
 }
 
-:host([_interactive]:active),
 :host([_interactive][_active]),
-:host([_interactive][aria-selected=true]:active),
-:host([_interactive][aria-selected=true][_active]) {
+:host([_interactive][aria-selected="true"][_active]) {
 	background: var(--sapList_Active_Background);
 }
 
-:host([position]) {
-	height: var(--row-height);
-}
-
-:host([_interactive]) {
-	cursor: pointer;
-}
-
 #popin-cell {
+	padding-inline-start: var(--_ui5_first_table_cell_horizontal_padding);
 	align-content: initial;
 	flex-direction: column;
 	grid-column: 1 / -1;
+	border-top: none;
 }
 
 #navigated-cell {
-	position: sticky;
-	right: 0;
 	overflow: visible;
 	grid-row: span 2;
-	min-width: 0;
-	padding: 0;
-	background: inherit;
-}
-
-:dir(rtl)#navigated-cell {
-	left: 0;
 }
 
 :host([navigated]) #navigated {
 	position: absolute;
-	inset: 0;
+	inset: 0px 0px 0px 1px;
 	background: var(--sapList_SelectionBorderColor);
 }
 
-:host([tabindex]:focus) #navigated {
-	transform: translateX(calc(var(--_ui5_table_navigated_cell_width) * -1));
-	bottom: 2px;
-	top: 3px;
-}
-
-: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 {
@@ -85,19 +100,9 @@
 
 #selection-cell ~ #popin-cell {
 	grid-column-start: 2;
+	padding-inline-start: var(--_ui5_table_cell_horizontal_padding);
 }
 
 #actions-cell {
-	display: flex;
-	align-items: center;
 	gap: var(--_ui5_table_row_actions_gap);
 }
-
-#actions-cell:has(+ #navigated-cell) {
-	right: var(--_ui5_table_navigated_cell_width);
-	overflow: auto;
-}
-
-:dir(rtl)#actions-cell:has(+ #navigated-cell) {
-	left: var(--_ui5_table_navigated_cell_width);
-}