@ui5/webcomponents 0.0.0-b6f02e4b3 → 0.0.0-b804b8982

package/src/themes/ColorPaletteItem.css

@@ -1,27 +1,37 @@
 :host(:not([hidden])) {
 	height: var(--_ui5_color-palette-item-height);
 	width: var(--_ui5_color-palette-item-height);
-	border: 1px solid var(--sapContent_ForegroundBorderColor);
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
 	border-radius: var(--_ui5_color-palette-item-outer-border-radius);
 	display: inline-block;
 	margin: var(--_ui5_color-palette-item-margin);
 	box-sizing: border-box;
 }
 
-:host(:not([_disabled]):hover) {
+:host(:not([_disabled]):hover),
+:host([selected]) {
 	height: var(--_ui5_color-palette-item-hover-height);
 	width: var(--_ui5_color-palette-item-hover-height);
 	margin: var(--_ui5_color-palette-item-hover-margin);
 	border-radius: var(--_ui5_color-palette-item-hover-outer-border-radius);
 }
 
-:host(:not([hidden])[phone]) {
-	height: 2.75rem;
-	width: 2.75rem;
-	border: 1px solid var(--sapContent_ForegroundBorderColor);
+:host(:not([hidden])[on-phone]) {
+	width: calc(100% - 0.5rem);
+	padding-block-start: calc(100% - 0.625rem); /* padding-block-start is used to base the height on dynamic width */
+	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
 	border-radius: 0.25rem;
 	display: inline-block;
-	margin: 0.375rem;
+	margin: 0.625rem;
+	height: 0; /* since height is determined by the padding-block-start we have to nullify the height on phone */
+	max-width: 4.5rem;
+	max-height: 4.5rem;
+}
+
+:host([selected][on-phone]) {
+	padding-block-start: calc(100% - .125rem);
+	width: 100%;
+	margin: 0;
 }
 
 .ui5-cp-item {
@@ -32,76 +42,119 @@
 	height: 100%;
 }
 
-:host(:not([_disabled]):not([phone]):hover) .ui5-cp-item {
+:host(:not([_disabled]):not([on-phone]):hover) .ui5-cp-item {
 	border-radius: var(--_ui5_color-palette-item-hover-inner-border-radius);
 }
 
-:host(:not([_disabled])[phone]) .ui5-cp-item {
+:host(:not([_disabled])[on-phone]) .ui5-cp-item {
 	border-radius: 0.1875rem;
 }
 
-.ui5-cp-item:hover:not(:focus) {
-	border: 1px solid var(--sapGroup_ContentBackground);
+.ui5-cp-item:hover:not(:focus),
+:host([selected]:not([on-phone])) .ui5-cp-item {
 	border-radius: var(--_ui5_color-palette-item-hover-inner-border-radius);
 	box-sizing: border-box;
 }
 
-:host(:not([_disabled]):not([phone])) .ui5-cp-item:focus{
+:host(:not([_disabled]):not([on-phone])) .ui5-cp-item:focus,
+:host([selected]:not([_disabled]):not([on-phone]):hover:focus) .ui5-cp-item {
+	border: var(--_ui5_color-palette-item-selected-focused-border);
+}
+
+:host([selected]) .ui5-cp-item:focus,
+:host(:not([_disabled])) .ui5-cp-item:focus {
 	outline: none;
 }
 
-:host(:not([_disabled]):not([phone]):focus) .ui5-cp-item {
+:host(:not([_disabled]):not([on-phone]):focus) .ui5-cp-item {
 	pointer-events: none;
 }
 
-:host(:not([_disabled]):not([phone])) .ui5-cp-item:focus:not(:hover)::before {
+:host(:not([_disabled]):not([on-phone])) .ui5-cp-item:focus:not(:hover)::before {
 	content: "";
 	box-sizing: border-box;
 	position: absolute;
-	left: var(--_ui5_color-palette-item-before-focus-offset);
-	top: var(--_ui5_color-palette-item-before-focus-offset);
-	right: var(--_ui5_color-palette-item-before-focus-offset);
-	bottom: var(--_ui5_color-palette-item-before-focus-offset);
+	inset: var(--_ui5_color-palette-item-before-focus-inset);
 	border: var(--_ui5_color-palette-item-before-focus-color);
 	border-radius: var(--_ui5_color-palette-item-before-focus-border-radius);
 	pointer-events: none;
 }
 
-:host(:not([_disabled])) .ui5-cp-item:focus:not(:hover)::after {
+:host(:not([_disabled]):not([on-phone])) .ui5-cp-item:focus:not(:hover)::after {
 	content: "";
 	box-sizing: border-box;
 	position: absolute;
-	left: var(--_ui5_color-palette-item-after-focus-offset);
-	top: var(--_ui5_color-palette-item-after-focus-offset);
-	right: var(--_ui5_color-palette-item-after-focus-offset);
-	bottom: var(--_ui5_color-palette-item-after-focus-offset);
+	inset: var(--_ui5_color-palette-item-after-focus-inset);
 	border: var(--_ui5_color-palette-item-after-focus-color);
 	border-radius: var(--_ui5_color-palette-item-after-focus-border-radius);
 	pointer-events: none;
 }
 
-:host(:not([_disabled]):not([phone]):hover:focus) .ui5-cp-item:focus:not(:hover)::before {
+:host(:not([_disabled]):not([on-phone]):hover:focus) .ui5-cp-item:focus:not(:hover)::before {
 	content: "";
 	box-sizing: border-box;
 	position: absolute;
-	left: var(--_ui5_color-palette-item-before-focus-hover-offset);
-	top: var(--_ui5_color-palette-item-before-focus-hover-offset);
-	right: var(--_ui5_color-palette-item-before-focus-hover-offset);
-	bottom: var(--_ui5_color-palette-item-before-focus-hover-offset);
+	inset: var(--_ui5_color-palette-item-before-focus-hover-inset);
 	border: var(--_ui5_color-palette-item-before-focus-color);
 	border-radius: var(--_ui5_color-palette-item-before-focus-border-radius);
 	pointer-events: none;
 }
 
-:host(:not([_disabled]):not([phone]):hover:focus) .ui5-cp-item:focus:not(:hover)::after {
+:host(:not([_disabled]):not([on-phone]):focus:not(:hover)) .ui5-cp-item:focus:not(:hover)::after {
 	content: "";
 	box-sizing: border-box;
 	position: absolute;
-	left: var(--_ui5_color-palette-item-after-focus-hover-offset);
-	top: var(--_ui5_color-palette-item-after-focus-hover-offset);
-	right: var(--_ui5_color-palette-item-after-focus-hover-offset);
-	bottom: var(--_ui5_color-palette-item-after-focus-hover-offset);
+	inset: var(--_ui5_color-palette-item-after-focus-hover-inset);
 	border: var(--_ui5_color-palette-item-after-focus-color);
 	border-radius: var(--_ui5_color-palette-item-after-focus-border-radius);
 	pointer-events: none;
 }
+
+:host([selected]:not([_disabled]):not([on-phone]):not(:focus):not(:hover)) .ui5-cp-item::after,
+:host([selected]:not([_disabled]):not([on-phone]):not(:focus):hover) .ui5-cp-item::after,
+:host(:not([selected]):not([on-phone]):hover) .ui5-cp-item::after {
+	content: "";
+	box-sizing: border-box;
+	position: absolute;
+	inset: calc(var(--_ui5_color-palette-item-after-focus-hover-inset) - 0.0625rem);
+	border: var(--_ui5_color-palette-item-after-not-focus-color);
+	border-radius: calc(var(--_ui5_color-palette-item-after-focus-border-radius) + 0.0625rem);
+	pointer-events: none;
+}
+
+:host(:not([_disabled]):not([on-phone]):not([selected]):not(:hover)) .ui5-cp-item:focus:not(:hover)::after {
+	border: var(--_ui5_color-palette-item-after-focus-not-selected-border);
+}
+
+:host([selected]:not([_disabled]):not([on-phone])) .ui5-cp-item:focus:not(:hover)::before,
+:host([selected]:not([_disabled]):not([on-phone])) .ui5-cp-item:focus:hover::before {
+	content: "";
+	box-sizing: border-box;
+	position: absolute;
+	inset: var(--_ui5_color-palette-item-selected-focused-border-before);
+	border: var(--_ui5_color-palette-item-before-focus-color);
+	border-radius: var(--_ui5_color-palette-item-before-focus-border-radius);
+	pointer-events: none;
+}
+
+/* Focus on mobile ONLY with external keyboard/mouse */
+:host(:not([disabled])) .ui5-cp-item:focus-visible::before,
+:host(:not([disabled])) .ui5-cp-item:focus-visible::after {
+	content: "";
+	box-sizing: border-box;
+	position: absolute;
+	pointer-events: none;
+}
+
+:host(:not([disabled])) .ui5-cp-item:focus-visible::before {
+	inset: calc(100% - var(--_ui5_color_palette_item_height) + var(--_ui5-color-palette-item-mobile-focus-inset))
+			var(--_ui5_color-palette-item-mobile-focus-sides-inset);
+	border: var(--_ui5_color-palette-item-before-focus-color);
+	border-radius: var(--_ui5_color-palette-item-after-focus-border-radius);
+}
+
+:host(:not([disabled])) .ui5-cp-item:focus-visible::after {
+	inset: calc(100% - var(--_ui5_color_palette_item_height) + var(--_ui5-color-palette-item-mobile-focus-inset))
+			var(--_ui5_color-palette-item-mobile-focus-sides-inset);
+	border: var(--_ui5_color-palette-item-after-mobile-focus-border);
+}

package/src/themes/ColorPalettePopover.css

@@ -9,6 +9,7 @@
 	width: 100%;
 	display: flex;
 	justify-content: flex-end;
+    align-items: center;
 	margin: 0.1875rem 0;
 }
 

package/src/themes/ColorPicker.css

@@ -15,17 +15,15 @@
     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);
     background-image: linear-gradient(left, #000, rgba(0,0,0,0)),linear-gradient(top, rgba(255,255,255,0), #fff);
-    background-image: -ms-linear-gradient(left, #000, rgba(0,0,0,0)),-ms-linear-gradient(top, rgba(255,255,255,0), #fff);
     background-image: -webkit-linear-gradient(left, #000, rgba(0,0,0,0), #fff),-webkit-linear-gradient(top, rgba(128,128,128,0), #808080);
     background-image: -moz-linear-gradient(left, #000, rgba(0,0,0,0), #fff),-moz-linear-gradient(top, rgba(128,128,128,0), #808080);
     background-image: linear-gradient(left, #000, rgba(0,0,0,0), #fff),linear-gradient(top, rgba(128,128,128,0), #808080);
-    background-image: -ms-linear-gradient(left, #000, rgba(0,0,0,0), #fff),-ms-linear-gradient(top, rgba(128,128,128,0), #808080);
 	user-select: none;
     -moz-user-select: none;
 }
@@ -33,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;
@@ -51,48 +49,57 @@
 }
 
 .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;
-    margin-left: -2px;
-    margin-top: var(--_ui5_color_picker_slider_handle_margin_top);
     box-sizing: border-box;
 }
 
+[ui5-slider]::part(handle-container) {
+    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: 1px 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: 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) {
     background-size: 100%;
     background-image: -webkit-linear-gradient(left, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
     background-image: -moz-linear-gradient(left, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
-    background-image: -ms-linear-gradient(left, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
     background-image: linear-gradient(left, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
     background-color: none;
 }
@@ -108,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,
@@ -142,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,
@@ -192,23 +217,37 @@
     outline-offset: 0.0625rem;
 }
 
-.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);
+.ui5-color-picker-alpha-slider::part(handle):focus::before,
+.ui5-color-picker-hue-slider::part(handle):focus::before {
+    content: "";
+    border: var(--_ui5_color_picker_slider_handle_inline_focus);
+    display: block;
+    height: var(--_ui5_color_picker_slider_handle_focus_height);
+    border-radius: 1rem;
+    box-sizing: border-box;
+    top: -0.1875rem;
+    position: absolute;
+    bottom: 0.125rem;
+    left: -0.1875rem;
+    right: -0.1875rem;
 }
 
-[dir=rtl] [ui5-slider].ui5-color-picker-hue-slider::part(progress-container) {
+.ui5-color-picker-alpha-slider::part(handle)::before,
+.ui5-color-picker-hue-slider::part(handle)::before {
+    display: none;
+}
+
+: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: -ms-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){
+: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;
-}
+:dir(rtl) .ui5-color-picker-sliders-wrapper {
+	margin-left: 0.625rem;
+}

package/src/themes/ComboBox.css

@@ -1,3 +1,4 @@
+@import "./FormComponents.css";
 @import "./Input.css";
 @import "./InputIcon.css";
 

package/src/themes/ComboBoxItem.css

@@ -0,0 +1,18 @@
+:host([ui5-cb-item]) {
+	height: auto;
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-cb-item]) .ui5-li-root {
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-cb-item]) .ui5-li-content {
+	padding-bottom: .875rem;
+	padding-top: .875rem;
+	box-sizing: border-box;
+}
+
+:host([ui5-cb-item][text][additional-text]) .ui5-li-text-wrapper {
+	gap: 1rem;
+}

package/src/themes/DatePicker.css

@@ -1,21 +1,26 @@
 @import "./InvisibleTextStyles.css";
 @import "./InputIcon.css";
+@import "./InputSharedStyles.css";
 
 :host(:not([hidden])) {
 	display: inline-block;
 	line-height: normal;
 	letter-spacing: normal;
 	word-spacing: normal;
+	height: var(--_ui5_input_height);
+	border-radius: var(--_ui5_input_border_radius);
 }
 
 :host {
+	min-width: calc(var(--_ui5_input_min_width) + var(--_ui5_input_icon_width));
 	color: var(--sapField_TextColor);
 	background-color: var(--sapField_Background);
 	border-radius: var(--_ui5-datepicker_border_radius);
-}
-
-:host([value-state="Error"]) {
-	background-color: var(--sapField_InvalidBackground);
+	margin: var(--_ui5_input_margin_top_bottom) 0;
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
 }
 
 :host(:not([disabled]):not([readonly]):active) {
@@ -26,21 +31,27 @@
 	background: var(--_ui5-datepicker-hover-background);
 }
 
+.ui5-date-picker-root {
+	border-radius: inherit;
+	height: inherit;
+	line-height: inherit;
+	letter-spacing: inherit;
+	word-spacing: inherit;
+}
+
 :host .ui5-date-picker-input {
 	width: 100%;
 	min-width: 12.5625rem;
 	color: inherit;
 	background-color: inherit;
+	border-radius: inherit;
+	height: inherit;
 	line-height: inherit;
 	letter-spacing: inherit;
 	word-spacing: inherit;
+	margin: inherit;
 }
 
 :host(:not([disabled]):not([readonly])) .ui5-date-picker-input[focused] {
 	background-color: var(--_ui5-datepicker-hover-background);
-}
-
-[slot="icon"] {
-	border-top-right-radius: var(--_ui5-datepicker_icon_border_radius);
-    border-bottom-right-radius: var(--_ui5-datepicker_icon_border_radius);
-}
+}

package/src/themes/DateTimePickerPopover.css

@@ -50,7 +50,6 @@
 	align-items: center;
 	height: 2.75rem;
 	width: 100%;
-	padding: 0 0.5rem 0 0.25rem;
 }
 
 
@@ -69,10 +68,19 @@
 /* Phone mode */
 /* TODO: Improve that layouting */
 .ui5-dt-picker-content--phone.ui5-dt-picker-content {
-	min-width: auto;
+	min-width: 20rem;
 	height: calc(100% - 4rem);
 }
 
+.ui5-dt-picker-content--phone.ui5-dt-picker-content [ui5-time-selection-clocks] {
+	height: var(--_ui5_datetime_timeview_phonemode_clocks_width);
+	width: auto;
+}
+
+.ui5-dt-picker-content--phone.ui5-dt-picker-content [ui5-calendar] {
+	margin-bottom: var(--_ui5_datetime_dateview_phonemode_margin_bottom);
+}
+
 .ui5-dt-picker-content--phone .ui5-dt-cal {
 	width: 100%;
 }