@ui5/webcomponents 0.0.0-b132dd7b9 → 0.0.0-b3a4f8020

package/src/themes/SliderHandle.css

@@ -0,0 +1,61 @@
+: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: 2;
+	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);
+}
+
+:host(:hover) {
+	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"]) {
+	/* rotate */
+	transform: rotate(90deg);
+}

package/src/themes/SliderScale.css

@@ -0,0 +1,149 @@
+: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%);
+}
+
+.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);
+	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(--sapSlider_Selected_Background);
+	border: var(--_ui5_slider_scale_progress_border);
+	border-left: none;
+	box-sizing: border-box;
+	z-index: 4;
+	border-radius: .25rem;
+}
+
+.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

@@ -0,0 +1,34 @@
+@import "./InvisibleTextStyles.css";
+
+:host(:popover-open) {
+	margin: 0;
+	display: inline-block;
+	margin-top: -28px;
+	height: 1rem;
+	background: var(--sapBackgroundColor);
+	border: none;
+	box-shadow: var(--sapContent_Shadow1);
+	border-radius: 0.0625rem;
+	padding: 0 0.5rem;
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapTextColor);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	overflow: hidden;
+}
+
+:host([editable]:popover-open) {
+	cursor: pointer;
+	height: fit-content;
+	border: none;
+	padding: 0;
+	margin-top: -3rem;
+	box-shadow: none;
+}
+
+:host([editable]:popover-open) [ui5-input] {
+	width: min-content;
+	text-align: center;
+}

package/src/themes/SplitButton.css

@@ -388,3 +388,8 @@
 :host([design="Attention"]) .ui5-split-text-button[active] + .ui5-split-arrow-button::before {
 	background-color: var(--_ui5_split_button_attention_separator_color);
 }
+
+.ui5-split-text-button::part(button) {
+    justify-content: flex-start;
+	padding: 0 var(--_ui5_button_base_padding);
+}

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);
@@ -29,6 +27,10 @@
 	-ms-user-select: none;
 }
 
+[ui5-input] {
+	--ui5_input_focus_pseudo_element_content: none;
+}
+
 :host .ui5-step-input-input {
 	text-align: inherit;
 	height: inherit;
@@ -163,25 +165,32 @@
 }
 
 :host .ui5-step-input-root {
-	white-space: nowrap;
 	line-height: inherit;
 	letter-spacing: inherit;
 	word-spacing: inherit;
 	height: inherit;
 }
 
-:host .ui5-step-input-input[text-align=left] {
+:host .ui5-step-input-input::part(input) {
+	white-space: nowrap;
+}
+
+:host .ui5-step-input-input[text-align=left]::part(input) {
 	text-align: left;
 }
 
-:host .ui5-step-input-input[text-align=center] {
+:host .ui5-step-input-input[text-align=center]::part(input) {
 	text-align: center;
 }
 
-:host .ui5-step-input-input[text-align=right] {
+:host .ui5-step-input-input[text-align=right]::part(input) {
 	text-align: right;
 }
 
+::slotted([slot="valueStateMessage"]) {
+	text-align: left;
+}
+
 :host .ui5-step-icon {
 	position: absolute;
 	display: var(--_ui5_step_input_button_display);

package/src/themes/SuggestionItem.css

@@ -8,7 +8,7 @@
 }
 
 :host([ui5-suggestion-item]) .ui5-li-content {
-	padding-bottom: .875rem;
-	padding-top: .875rem;
+	padding-bottom: .5rem;
+	padding-top: .5rem;
 	box-sizing: border-box;
-}
+}

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;

package/src/themes/TabContainer.css

@@ -13,7 +13,7 @@
 	flex-direction: column;
 	width: 100%;
 	height: 100%;
-	font-family: "72override", var(--sapFontHeaderFamily);
+	font-family: var(--sapFontHeaderFamily);
 	font-size: 1rem;
 }
 

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,59 +1,43 @@
 :host {
 	display: block;
-    position: relative;
-    color: var(--sapList_TextColor);
-    font: var(--sapFontSize) var(--sapFontFamily);
+	position: relative;
+	color: var(--sapList_TextColor);
+	font: var(--sapFontSize) var(--sapFontFamily);
 }
 
 :host([hidden]) {
-    display: none;
+	display: none;
 }
 
 #table {
-    display: grid;
-    grid-auto-rows: minmax(min-content, max-content);
+	display: grid;
+	grid-auto-rows: minmax(min-content, max-content);
 }
 
 :host([overflow-mode="Scroll"]) #table {
-    overflow-x: auto;
-    height: 100%;
-    height: -webkit-fill-available;
-    height: fill-available;
+	overflow-x: auto;
+	height: 100%;
 }
 
 #rows, #spacer {
-    display: grid;
-    grid-template-rows: min-content;
-    grid-template-columns: subgrid;
-    grid-column: 1 / -1;
+	display: grid;
+	grid-template-rows: min-content;
+	grid-template-columns: subgrid;
+	grid-column: 1 / -1;
 }
 
 #no-data-cell {
-    grid-column: 1 / -1;
-    justify-content: center;
-}
-
-#footer {
-    grid-column: 1 / -1;
-    grid-template-rows: subgrid;
-    height: fit-content;
-}
-
-#growing-cell {
-    grid-column: 1 / -1;
-    justify-content: center;
-    padding: 0;
-    border-top: 1px solid var(--sapList_BorderColor);
-    box-sizing: border-box;
+	grid-column: 1 / -1;
+	justify-content: center;
 }
 
 #loading {
-    position: absolute;
-    inset: 0;
-    height: 100%;
-    z-index: 2;
+	position: absolute;
+	inset: 0;
+	height: 100%;
+	z-index: 2;
 }
 
 :host([loading]) #table:has(#loading[_is-busy]) ::slotted(*) {
-    opacity: var(--sapContent_DisabledOpacity);
+	opacity: var(--sapContent_DisabledOpacity);
 }

package/src/themes/TableCell.css

@@ -1,14 +1,18 @@
 :host([_popin]) {
-    color: var(--sapContent_LabelColor);
-    padding-inline-start: 0;
-    padding-inline-end: 0;
-    align-items: center;
+	padding-inline-start: 0;
+	padding-inline-end: 0;
+	align-items: center;
 }
 
-.popin-colon {
-    padding-inline-end: 0.5rem;
+:host([_popin]) #popin-header {
+	color: var(--sapContent_LabelColor);
 }
 
-.popin-header {
-    display: contents;
+#popin-colon {
+	padding-inline-end: 0.5rem;
+	white-space: pre;
+}
+
+#popin-header {
+	display: contents;
 }

package/src/themes/TableCellBase.css

@@ -1,27 +1,32 @@
 :host {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: var(--_ui5_table_cell_valign);
-    min-width: var(--_ui5_table_cell_min_width);
-    max-width: 100%;
-    overflow: clip;
-    overflow-clip-margin: content-box;
-    padding: var(--_ui5_table_cell_vertical_padding) var(--_ui5_table_cell_horizontal_padding);
-    box-sizing: border-box;
+	display: flex;
+	flex-wrap: wrap;
+	align-content: var(--_ui5_table_cell_valign);
+	min-width: var(--_ui5_table_cell_min_width);
+	max-width: 100%;
+	overflow: clip;
+	overflow-clip-margin: content-box;
+	padding: var(--_ui5_table_cell_vertical_padding) var(--_ui5_table_cell_horizontal_padding);
+	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));
+	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;
+	width: auto;
+	min-width: auto;
+	background-color: inherit;
 }
 
 :host([data-ui5-table-cell-fixed]) {
-    position: sticky;
-    z-index: 1;
+	position: sticky;
+	z-index: 1;
 }

package/src/themes/TableGrowing.css

@@ -1,44 +1,38 @@
 @import "./InvisibleTextStyles.css";
 
-:host {
-	/** Growing Control spans the whole row **/
-	flex-grow: 1;
+#button {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	cursor: pointer;
+	border-bottom: 1px solid var(--sapList_BorderColor);
+	background: var(--sapList_Background);
 }
 
 #button:focus {
-    outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-    outline-offset: calc(-1 * var(--sapContent_FocusWidth));
-}
-
-#button {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    cursor: pointer;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: calc(-1 * var(--sapContent_FocusWidth));
 }
 
 @media (hover: hover) {
-    #button:hover {
-        background: var(--sapButton_Hover_Background);
-    }
+	#button:hover {
+		background: var(--sapButton_Hover_Background);
+	}
 }
 
 #button:active,
 #button[data-ui5-growing-active="true"] {
-    background: var(--sapList_Active_Background);
+	background: var(--sapList_Active_Background);
 }
 
 #text {
-    padding: 1rem 0 1rem 0;
-    font-size: var(--sapFontSize);
-    color: var(--sapButton_TextColor);
-    font-weight: bold;
+	padding: 1rem 0;
+	font-size: var(--sapFontSize);
+	color: var(--sapButton_TextColor);
+	font-weight: bold;
 }
 
 #subtext {
-    padding-bottom: 1rem;
-    color: var(--sapButton_TextColor);
+	padding-bottom: 1rem;
+	color: var(--sapButton_TextColor);
 }

package/src/themes/TableHeaderRow.css

@@ -1,22 +1,33 @@
 :host {
-    background: var(--sapList_HeaderBackground);
-    border-top: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
-    border-bottom: var(--sapList_BorderWidth) solid var(--sapList_HeaderBorderColor);
-    grid-template-rows: auto 0px;
+	background: var(--sapList_HeaderBackground);
+	border-top: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
+	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_HeaderBorderColor);
+	grid-template-rows: auto 0px;
 }
 
 :host([hidden]) {
-    display: none;
+	display: none;
 }
 
 :host([sticky]) {
-    position: sticky;
-    top: var(--ui5_grid_sticky_top, 0);
-    z-index: 2;
+	position: sticky;
+	top: var(--ui5_grid_sticky_top, 0);
+	z-index: 3;
 }
 
 #popin-cell {
-    padding: 0;
-    width: 0;
-    height: 0;
-}
+	padding: 0;
+	width: 0;
+	height: 0;
+}
+
+#selection-cell [ui5-icon] {
+	width: var(--_ui5_checkbox_inner_width_height);
+	height: var(--_ui5_checkbox_inner_width_height);
+}
+
+#popin-cell-content,
+#actions-cell-content {
+	position: absolute;
+	clip: rect(0, 0, 0, 0);
+}

package/src/themes/TableRow.css

@@ -2,19 +2,15 @@
 	background: var(--sapList_Background);
 }
 
-:host([position]) {
-	height: var(--row-height);
+:host([_alternate]) {
+	background: var(--_ui5_table_row_alternating_background);
 }
 
 :host([aria-selected=true]) {
-	background-color: var(--sapList_SelectionBackgroundColor);
+	background: var(--sapList_SelectionBackgroundColor);
 	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor);
 }
 
-:host([_interactive]) {
-	cursor: pointer;
-}
-
 @media (hover: hover) {
 	:host([_interactive]:hover) {
 		background: var(--sapList_Hover_Background);
@@ -24,13 +20,19 @@
 	}
 }
 
-:host([_interactive]:active),
 :host([_interactive][_active]),
-:host([_interactive][aria-selected=true]:active),
 :host([_interactive][aria-selected=true][_active]) {
 	background: var(--sapList_Active_Background);
 }
 
+:host([_interactive]) {
+	cursor: pointer;
+}
+
+:host([position]) {
+	height: var(--row-height);
+}
+
 #popin-cell {
 	align-content: initial;
 	flex-direction: column;
@@ -54,7 +56,7 @@
 :host([navigated]) #navigated {
 	position: absolute;
 	inset: 0;
-    background-color: var(--sapList_SelectionBorderColor);
+	background: var(--sapList_SelectionBorderColor);
 }
 
 :host([tabindex]:focus) #navigated {