@ui5/webcomponents 0.0.0-4e88b8243 → 0.0.0-50f1454ef

package/src/themes/CalendarLegendItem.css

@@ -42,7 +42,20 @@
 
 :host([type="Selected"]) .ui5-calendar-legend-item-box {
 	background: var(--sapContent_Selected_Background);
-	border: 0.0625rem solid var(--sapContent_FocusColor);
+	border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+}
+
+/* Dot in the middle of the box */
+:host([type="Selected"]) .ui5-calendar-legend-item-box::after {
+	content: "";
+	display: var(--_ui5-calendar-legend-item-box-dot-display); /* Dot should be visible only in sap_horizon and sap_horizon_dark themes */
+	width: 0.25rem;
+	height: 0.25rem;
+	background: var(--sapContent_Selected_TextColor);
+	border-radius: 50%;
+	position: relative;
+	inset-block-start: 0.3125rem;
+	inset-inline-end: -0.3125rem;
 }
 
 :host([type="NonWorking"]) .ui5-calendar-legend-item-box {

package/src/themes/CheckBox.css

@@ -5,6 +5,19 @@
 	display: inline-block;
 }
 
+:host([required]) {
+	vertical-align: middle;
+}
+
+:host([required]) .ui5-checkbox-label:after {
+	content:"*";
+	margin-inline-start: .125rem;
+	color: var(--sapField_RequiredColor);
+	font-size: var(--sapFontLargeSize);
+	font-family: var(--sapFontFamily);
+	font-weight: bold;
+}
+
 :host {
 	overflow: hidden;
 	max-width: 100%;
@@ -115,7 +128,7 @@
 	position: relative;
 	display: inline-flex;
 	align-items: center;
-	width: 100%;
+	max-width: 100%;
 	min-height: var(--_ui5_checkbox_width_height);
 	min-width: var(--_ui5_checkbox_width_height);
 	padding: 0 var(--_ui5_checkbox_wrapper_padding);

package/src/themes/ColorPaletteItem.css

@@ -66,7 +66,7 @@
 	outline: none;
 }
 
-:host(:not([_disabled]):not([on-phone]):focus) .ui5-cp-item {
+:host(:not([_disabled]):not([on-phone]):focus:not(:hover)) .ui5-cp-item {
 	pointer-events: none;
 }
 
@@ -90,7 +90,7 @@
 	pointer-events: none;
 }
 
-:host(:not([_disabled]):not([on-phone]):hover:focus) .ui5-cp-item:focus:not(:hover)::before {
+:host(:not([_disabled]):not([on-phone]):focus:hover) .ui5-cp-item::before {
 	content: "";
 	box-sizing: border-box;
 	position: absolute;
@@ -100,7 +100,7 @@
 	pointer-events: none;
 }
 
-:host(:not([_disabled]):not([on-phone]):focus:not(:hover)) .ui5-cp-item:focus:not(:hover)::after {
+:host(:not([_disabled]):not([on-phone]):focus:hover) .ui5-cp-item::after {
 	content: "";
 	box-sizing: border-box;
 	position: absolute;

package/src/themes/ColorPicker.css

@@ -15,8 +15,8 @@
     width: 16rem;
     height: 16rem;
     position: relative;
-    margin-bottom: 1.5rem;
-    border: 1px solid var(--sapContent_ForegroundBorderColor);
+    margin-bottom: var(--_ui5_color_picker_main_color_margin_bottom);
+    border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
     background-size: 100%;
     background-image: -webkit-linear-gradient(left, #000, rgba(0,0,0,0)),-webkit-linear-gradient(top, rgba(255,255,255,0), #fff);
     background-image: -moz-linear-gradient(left, #000, rgba(0,0,0,0)),-moz-linear-gradient(top, rgba(255,255,255,0), #fff);
@@ -31,8 +31,8 @@
 .ui5-color-picker-circle {
     position: absolute;
     box-sizing: border-box;
-    width: 13px;
-    height: 13px;
+    width: 0.8125rem;
+    height: 0.8125rem;
     border: var(--_ui5_color_picker_circle_outer_border);
     border-radius: 0.6875rem;
     pointer-events: none;
@@ -49,53 +49,51 @@
 }
 
 .ui5-color-picker-sliders-wrapper {
-    width: calc(100% - 11px);
-    margin-left: -10px;
+    width: calc(100% - 0.9375rem);
+    margin-left: -0.9375rem;
+    padding-bottom: 0.25rem;
 }
 
 [ui5-slider] {
     --_ui5_slider_active_progress_border: none;
     --_ui5_slider_progress_box_sizing: content-box;
+    height: var(--_ui5_color_picker_sliders_height);
 }
 
 [ui5-slider]::part(handle) {
-    width: 0.9375rem;
-    height: 1.5rem;
+    width: var(--_ui5_color_picker_slider_handle_width);
+    height: var(--_ui5_color_picker_slider_handle_height);
     background: transparent;
     box-sizing: border-box;
 }
 
 [ui5-slider]::part(handle-container) {
-    margin-inline-start: -2px;
-    margin-top: var(--_ui5_color_picker_slider_handle_margin_top);
-}
-
-[ui5-slider]::part(handle-container):focus-within {
-    margin-inline-start: unset;
-    margin-top: unset;
+    margin-top: var(--_ui5_color_picker_slider_handle_container_margin_top);
+    margin-inline-start: -0.125rem;
+    z-index: 2;
 }
 
 [ui5-slider]::part(handle)::after {
     content: "";
-    border: 2px solid #fff;
+    border: 0.125rem solid var(--_ui5_color_picker_slider_handle_inner_border_color);
     display: block;
-    height: 1.25rem;
+    height: var(--_ui5_color_picker_slider_handle_after_height);
     border-radius: 1rem;
     width: 100%;
     box-sizing: border-box;
 }
 
 [ui5-slider]::part(root-container) {
-	padding: 1rem 0;
+	padding: var(--_ui5_color_picker_slider_spacing) 0;
 }
 
 [ui5-slider]::part(progress-container) {
-    width: calc(100% + 11px);
-    height: 18px;
+    width: calc(100% + 0.6875rem);
+    height: var(--_ui5_color_picker_slider_progress_container_height);
     position: absolute;
     margin-top: var(--_ui5_color_picker_slider_container_margin_top);
     border-radius: 0;
-    border: 1px solid var(--sapField_BorderColor);
+    border: 0.0625rem solid var(--sapField_BorderColor);
 }
 
 [ui5-slider].ui5-color-picker-hue-slider::part(progress-container) {
@@ -117,15 +115,15 @@
 .ui5-color-picker-current-color {
     width: 100%;
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
     align-items: center;
 }
 
 .ui5-color-picker-colors-wrapper {
     display: flex;
     flex-wrap: nowrap;
-    height: 1.5rem;
-    border: 1px solid var(--sapField_BorderColor);
+    height: var(--_ui5_color_picker_colors_wrapper_height);
+    border: 0.0625rem solid var(--sapField_BorderColor);
 }
 
 .ui5-color-picker-white,
@@ -151,30 +149,48 @@
 }
 
 .ui5-color-picker-hex-input {
-    width: 4.5rem;
+    width: var(--_ui5_color_channel_hex_input_width);
     min-width: 4.5rem;
     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;
+    margin-top: var(--_ui5-color_channel_margin_top);
+    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;
+    margin-top: var(--_ui5_color_channel_toggle_button_margin-top);
+}
+
+.ui5-color-channel-toggle {
+    min-width: var(--_ui5_color_channel_toggle_button_width);
+    margin-inline-start: 0.5rem;
+    margin-top: var(--_ui5_color_channel_toggle_button_margin-top);
+}
+
 .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,
@@ -206,15 +222,14 @@
     content: "";
     border: var(--_ui5_color_picker_slider_handle_inline_focus);
     display: block;
-    height: 1.625rem;
+    height: var(--_ui5_color_picker_slider_handle_focus_height);
     border-radius: 1rem;
-    width: 1.05rem;
     box-sizing: border-box;
-    top: -3px;
+    top: -0.1875rem;
     position: absolute;
-    bottom: 2px;
-    left: -3px;
-    right: -3px;
+    bottom: 0.125rem;
+    left: -0.1875rem;
+    right: -0.1875rem;
 }
 
 .ui5-color-picker-alpha-slider::part(handle)::before,
@@ -222,22 +237,12 @@
     display: none;
 }
 
-.ui5-color-picker-alpha-slider::part(handle):focus,
-.ui5-color-picker-hue-slider::part(handle):focus {
-    margin-top: var(--_ui5_color_picker_slider_handle_focus_margin_top);
-}
-
 :dir(rtl) [ui5-slider].ui5-color-picker-hue-slider::part(progress-container) {
     background-image: -webkit-linear-gradient(right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
     background-image: -moz-linear-gradient(right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
     background-image: linear-gradient(right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
 }
 
-:dir(rtl) .ui5-color-picker-alpha-slider::part(handle),
-:dir(rtl) .ui5-color-picker-hue-slider::part(handle){
-	--_ui5_slider_handle_margin_left: 0;
-}
-
 :dir(rtl) .ui5-color-picker-sliders-wrapper {
-	margin-left: 10px;
+	margin-left: 0.625rem;
 }

package/src/themes/ComboBoxPopover.css

@@ -4,12 +4,11 @@
 	top: 50%;
 	transform: translate(-50%,-50%);
 	z-index: 42;
-	width: 100%;
-	height: 100%;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	pointer-events: all;
+	width: 100%;
 }
 
 .ui5-combobox-busy:not([active]) {

package/src/themes/DatePicker.css

@@ -54,4 +54,8 @@
 
 :host(:not([disabled]):not([readonly])) .ui5-date-picker-input[focused] {
 	background-color: var(--_ui5-datepicker-hover-background);
+}
+
+.ui5-date-picker-popover::part(header) {
+	padding: 0;
 }

package/src/themes/DatePickerPopover.css

@@ -1,3 +1,10 @@
+.ui5-date-picker-popover {
+	width: 20rem;
+	.ui5-popover-header {
+		width: 100%;
+	}
+}
+
 [ui5-calendar] {
 	width: 100%;
 	display: flex;

package/src/themes/DateTimePickerPopover.css

@@ -1,3 +1,12 @@
+
+:host .ui5-date-picker-popover {
+	width: auto;
+}
+
+:host .ui5-date-picker-popover:not([on-phone]) .ui5-popover-header {
+	width: 20rem;
+}
+
 .ui5-dt-picker-content {
 	display: flex;
 	flex-direction: row;

package/src/themes/DayPicker.css

@@ -87,6 +87,7 @@
 	font-size: var(--sapFontSize);
 	border: var(--_ui5_daypicker_item_border);
 	border-radius: var(--_ui5_daypicker_item_border_radius);
+	cursor: pointer;
 }
 
 .ui5-dp-item:hover {
@@ -210,7 +211,7 @@
 }
 
 .ui5-dp-item.ui5-dp-item--selected:hover {
-	background: var( --_ui5_daypicker_item_selected_hover);
+	background: var(--_ui5_daypicker_item_selected_hover);
 	color: var(--sapContent_ContrastTextColor);
 }
 

package/src/themes/FormItem.css

@@ -17,6 +17,7 @@
 :host([column-span="5"]) {
 	grid-column: span 5;
 }
+
 :host([column-span="6"]) {
 	grid-column: span 6;
 }
@@ -40,6 +41,8 @@
 }
 
 .ui5-form-item-content {
+	overflow: hidden;
+	width: 100%;
 	display: flex;
 	padding: 0 0.25rem;
 }
@@ -57,13 +60,9 @@
 	box-sizing: border-box;
 }
 
-::slotted([ui5-input]) {
+::slotted(*) {
 	width: 100%;
 }
-::slotted([ui5-select]) {
-	width: 100%;
-}
-
 
 @container (max-width: 600px) {
 	:host {

package/src/themes/Icon.css

@@ -80,7 +80,7 @@
  * In this case, we need to explicitly check for it as the global CSS definitions (rtl-parameters.css)
  * is placed in the "head" and won't consider it.
  */
-.ui5-icon-root:not([dir="ltr"]) {
+.ui5-icon-root:not([dir="ltr"]) > g {
 	transform: var(--_ui5_icon_transform_scale);
 	transform-origin: center;
 }

package/src/themes/Input.css

@@ -128,8 +128,13 @@
 [inner-input][type="search"]::-webkit-search-decoration,
 [inner-input][type="search"]::-webkit-search-cancel-button,
 [inner-input][type="search"]::-webkit-search-results-button,
-[inner-input][type="search"]::-webkit-search-results-decoration { 
-	display: none; 
+[inner-input][type="search"]::-webkit-search-results-decoration {
+	display: none;
+}
+
+[inner-input]::-ms-reveal,
+[inner-input]::-ms-clear {
+	display: none;
 }
 
 .ui5-input-value-state-icon {
@@ -226,7 +231,7 @@
 }
 
 :host([readonly]:not([disabled])) {
-	border-color: var(--_ui5_input_readonly_border_color);
+	border: var(--_ui5_input_readonly_border);
 	background: var(--sapField_ReadOnly_BackgroundStyle);
 	background-color: var(--_ui5_input_readonly_background);
 }

package/src/themes/Label.css

@@ -44,7 +44,7 @@
 :host([required]) .ui5-label-required-colon:after {
 	content:"*";
 	color: var(--sapField_RequiredColor);
-	font-size: 1.25rem;
+	font-size: var(--sapFontLargeSize);
 	font-weight: bold;
 	position: relative;
 	font-style: normal;

package/src/themes/Link.css

@@ -124,4 +124,13 @@
 :host([design="Subtle"][desktop]:hover:not(:active):focus-within) {
 	color: var(--_ui5_link_focused_hover_text_color);
 	text-decoration: var(--_ui5_link_focused_hover_text_decoration);
+}
+
+:host([interactive-area-size="Large"]) .ui5-link-root {
+	line-height: var(--_ui5_link_large_interactive_area_height);
+}
+
+:host([interactive-area-size="Large"])::part(icon), 
+:host([interactive-area-size="Large"])::part(endIcon) {
+	height: var(--_ui5_link_large_interactive_area_height);
 }

package/src/themes/List.css

@@ -87,9 +87,10 @@
 	border-bottom: 1px solid var(--sapList_BorderColor);
 	padding: 0 1rem !important;
 	outline: none;
-	height: var(--_ui5_list_no_data_height);
+    min-height: var(--_ui5_list_no_data_height);
 	font-size: var(--_ui5_list_no_data_font_size);
 	font-family: "72override", var(--sapFontFamily);
+	position: relative;
 }
 
 .ui5-list-nodata:focus::after {
@@ -98,13 +99,13 @@
 	position: absolute;
 	inset: 0.125rem;
 	pointer-events: none;
-	top: calc(50% + 0.125rem);
 }
 
 .ui5-list-nodata-text {
 	overflow: hidden;
 	text-overflow: ellipsis;
-	white-space: nowrap;
+	white-space: normal;
+    margin: var(--_ui5_list_item_content_vertical_offset) 0;
 }
 
 :host([growing="Scroll"]) .ui5-list-end-marker {

package/src/themes/ListItem.css

@@ -67,7 +67,22 @@
 	object-fit: contain
 }
 
-:host([description]) .ui5-li-root {
+::slotted([ui5-icon][slot="image"]){
+	color: var(--sapContent_NonInteractiveIconColor);
+	min-width: var(--_ui5_list_item_icon_size);
+	min-height: var(--_ui5_list_item_icon_size);
+	padding-inline-end: var(--_ui5_list_item_icon_padding-inline-end);
+}
+
+::slotted([ui5-avatar][slot="image"]) {
+	min-width: var(--_ui5_list_item_img_size);
+	min-height: var(--_ui5_list_item_img_size);
+	margin-top: var(--_ui5_list_item_img_top_margin);
+	margin-bottom: var(--_ui5_list_item_img_bottom_margin);
+	margin-inline-end: var(--_ui5_list_item_img_hn_margin);
+}
+
+:host([wrapping-type="None"][description]) .ui5-li-root {
 	padding: 1rem;
 }
 
@@ -119,14 +134,6 @@
 	align-self: flex-end;
 }
 
-.ui5-li-image {
-	min-width: var(--_ui5_list_item_img_size);
-	min-height: var(--_ui5_list_item_img_size);
-	margin-top: var(--_ui5_list_item_img_top_margin);
-	margin-bottom: var(--_ui5_list_item_img_bottom_margin);
-	margin-inline-end: var(--_ui5_list_item_img_hn_margin);
-}
-
 .ui5-li-icon {
 	min-width: var(--_ui5_list_item_icon_size);
 	min-height: var(--_ui5_list_item_icon_size);
@@ -134,6 +141,10 @@
 	padding-inline-end: var(--_ui5_list_item_icon_padding-inline-end);
 }
 
+:host([icon-end]) .ui5-li-icon {
+	padding-inline-start: var(--_ui5_list_item_icon_padding-inline-end);
+}
+
 .ui5-li-detailbtn,
 .ui5-li-deletebtn {
 	display: flex;
@@ -156,15 +167,15 @@
 	margin-top: var(--_ui5_list_item_selection_btn_margin_top);
 }
 
-:host([_selection-mode="SingleStart"]) .ui5-li-root {
+:host([ui5-li][_selection-mode="SingleStart"]) .ui5-li-root {
 	padding-inline: 0 1rem;
 }
 
-:host([_selection-mode="Multiple"]) .ui5-li-root {
+:host([ui5-li][_selection-mode="Multiple"]) .ui5-li-root {
 	padding-inline: 0 1rem;
 }
 
-:host([_selection-mode="SingleEnd"]) .ui5-li-root {
+:host([ui5-li][_selection-mode="SingleEnd"]) .ui5-li-root {
 	padding-inline: 1rem 0;
 }
 
@@ -197,4 +208,65 @@
 
 :host([highlight="Information"]) .ui5-li-highlight {
 	background: var(--sapInformativeTextColor);
-}
+}
+
+/* wrapping */
+:host([wrapping-type="Normal"][description]),
+:host([wrapping-type="Normal"][has-title][description]),
+:host([wrapping-type="Normal"][has-title][image]) {
+	height: auto;
+	min-height: 5rem;
+}
+
+:host([wrapping-type="Normal"][description]) .ui5-li-content,
+:host([wrapping-type="Normal"][image]) .ui5-li-content {
+	height: auto;
+	min-height: 3rem;
+}
+
+:host([wrapping-type="Normal"][has-title][description]) .ui5-li-title {
+	padding-bottom: .75rem;
+}
+
+:host([wrapping-type="Normal"][additional-text]) .ui5-li-additional-text {
+	padding-inline-start: .75rem;
+}
+
+:host([wrapping-type="Normal"]) .ui5-li-description-info-wrapper {
+	flex-direction: column;
+}
+
+:host([wrapping-type="Normal"]) .ui5-li-description-info-wrapper .ui5-li-additional-text {
+	white-space: normal;
+}
+
+:host([wrapping-type="Normal"]) .ui5-li-multisel-cb,
+:host([wrapping-type="Normal"]) .ui5-li-singlesel-radiobtn {
+	display: flex;
+	align-self: flex-start;
+}
+
+:host([wrapping-type="Normal"][description]) .ui5-li-multisel-cb,
+:host([wrapping-type="Normal"][description]) .ui5-li-singlesel-radiobtn {
+	margin-top: 0;
+}
+
+:host([wrapping-type="Normal"]) .ui5-li-icon,
+:host([wrapping-type="Normal"]) .ui5-li-image {
+	display: flex;
+	align-self: flex-start;
+}
+
+:host([wrapping-type="Normal"][icon-end]) .ui5-li-icon {
+	margin-top: var(--_ui5_list_item_content_vertical_offset);
+}
+
+:host([wrapping-type="Normal"]) ::slotted([ui5-avatar][slot="image"]) {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+:host([wrapping-type="Normal"]) .ui5-li-detailbtn,
+:host([wrapping-type="Normal"]) .ui5-li-deletebtn {
+	margin-inline-start: .875rem;
+}

package/src/themes/ListItemBase.css

@@ -27,19 +27,19 @@
 :host([selected]) {
 	background-color: var(--sapList_SelectionBackgroundColor);
 	border-bottom: var(--ui5-listitem-selected-border-bottom);
+}
 
-	.ui5-li-additional-text {
-		text-shadow: var(--sapContent_TextShadow);
-	}
+:host([selected]) .ui5-li-additional-text {
+	text-shadow: var(--sapContent_TextShadow);
 }
 
 /* hovered */
 :host([actionable]:not([active]):not([selected]):not([ui5-li-group-header]):hover) {
     background-color: var(--sapList_Hover_Background);
+}
 
-	.ui5-li-additional-text {
-		text-shadow: var(--sapContent_TextShadow);
-	}
+:host([actionable]:not([active]):not([selected]):not([ui5-li-group-header]):hover) .ui5-li-additional-text {
+	text-shadow: var(--sapContent_TextShadow);
 }
 
 /* selected and hovered */

package/src/themes/Menu.css

@@ -1,3 +1,10 @@
+:host {
+	line-height: initial;
+}
+
+::slotted([ui5-menu-item]) {
+	line-height: inherit;
+  }
 
 .ui5-menu-rp[ui5-responsive-popover]::part(header),
 .ui5-menu-rp[ui5-responsive-popover]::part(content),

package/src/themes/MenuItem.css

@@ -108,6 +108,10 @@
 	inset-inline-end: var(--_ui5_menu_item_submenu_icon_right);
 }
 
+.ui5-menu-item-submenu-icon .ui5-menu-item-icon-end {
+	color: var(--sapContent_NonInteractiveIconColor);
+}
+
 .ui5-menu-item-dummy-icon {
 	min-width: var(--_ui5_list_item_icon_size);
 	min-height: var(--_ui5_list_item_icon_size);
@@ -115,4 +119,4 @@
 	vertical-align: middle;
 	padding-inline-end: 0.5rem;
 	pointer-events: none;
-}
+}

package/src/themes/MessageStrip.css

@@ -211,14 +211,14 @@
 }
 
 :host([design="ColorSet2"]) .ui5-message-strip-close-button,
-:host([design="ColorSet2"]) .ui5-message-strip-root ::slotted([slot="icon"]) { 
+:host([design="ColorSet2"]) .ui5-message-strip-root ::slotted([slot="icon"]) {
 	color: var(--sapContent_IconColor);
 }
 
 :host([design="ColorSet1"]) .ui5-message-strip-close-button:hover {
 	border-color: var(--sapContent_ContrastIconColor);
 	background-color: var(--_ui5_message_strip_close_button_color_set_1_background);
-	color: var(--_ui5_message_strip_close_button_color_set_1_hover_color);
+	color: var(--_ui5_message_strip_close_button_color_set_1_color);
 	text-shadow: var(--sapContent_ContrastTextShadow);
 }
 
@@ -241,4 +241,4 @@
 :host([design="ColorSet1"]) .ui5-message-strip-close-button::part(button):after,
 :host([design="ColorSet1"]) .ui5-message-strip-close-button::part(button):before {
 	border-color: var(--sapContent_ContrastFocusColor);
-}
+}