@ui5/webcomponents 1.0.0 → 1.1.1

package/src/themes/RadioButton.css

@@ -0,0 +1,249 @@
+@import "./InvisibleTextStyles.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+}
+
+:host {
+	min-width: var(--_ui5_radio_button_min_width);
+	max-width: 100%;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	color: var(--_ui5_radio_button_color);
+	border-radius: var(--_ui5_radio_button_border_radius);
+	transition: var(--_ui5_radio_button_transition);
+}
+
+:host(:not([disabled])) .ui5-radio-root {
+	cursor: pointer;
+}
+
+/* checked */
+:host([checked]) {
+	color: var(--_ui5_radio_button_checked_fill);
+}
+
+:host([checked]) .ui5-radio-svg-inner {
+	fill: currentColor;
+}
+
+:host([checked]) .ui5-radio-svg-outer {
+	stroke: var(--_ui5_radio_button_outer_ring_color);
+}
+
+/* disabled */
+:host([disabled]) .ui5-radio-root {
+	color: var(--_ui5_radio_button_color);
+	opacity: var(--sapContent_DisabledOpacity);
+}
+
+:host([disabled][checked]) .ui5-radio-svg-outer {
+	stroke: var(--_ui5_radio_button_color);
+}
+
+/* focused */
+:host(:not([disabled])) .ui5-radio-root:focus:before {
+	content: "";
+	display: var(--_ui5_radio_button_focus_outline);
+	position: absolute;
+	top: var(--_ui5_radio_button_focus_dist);
+	bottom: var(--_ui5_radio_button_focus_dist);
+	left: var(--_ui5_radio_button_focus_dist);
+	right: var(--_ui5_radio_button_focus_dist);
+	pointer-events: none;
+	border: var(--_ui5_radio_button_border_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	border-radius: var(--_ui5_radio_button_border_radius);
+}
+
+/* horizon readonly focus */
+:host(:not([disabled])[readonly]) .ui5-radio-root:focus:before {
+	border: var(--_ui5_radio_button_border_width) var(--_ui5_radio_button_border_readonly_focus_style) var(--sapContent_FocusColor);
+}
+
+:host(:not([disabled])) .ui5-radio-root:focus {
+	border-radius: var(--_ui5_radio_button_border_radius);
+	border: var(--_ui5_radio_button_focus_border);
+}
+
+/* hovered */
+:host(:not([disabled]):hover) {
+	background: var(--_ui5_radio_button_hover_background);
+	box-shadow: var(--_ui5_radio_button_hover_shadow);
+}
+
+/* hovered and value-state */
+:host(:not([active]):not([value-state="Error"]):not([value-state="Warning"])) .ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer {
+	fill: var(--_ui5_radio_button_hover_fill);
+	stroke: var(--_ui5_radio_button_outer_ring_hover_color);
+}
+
+:host(:not([value-state="Error"]):not([value-state="Warning"])[checked]) .ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer {
+	fill: var(--_ui5_radio_button_hover_fill);
+	stroke: var(--_ui5_radio_button_outer_ring_checked_hover_color);
+}
+
+/* active, checked */
+:host([active][checked]:not([value-state])) .ui5-radio-svg-outer {
+	stroke: var(--_ui5_radio_button_outer_ring_checked_hover_color);
+}
+
+/* active, not checked */
+:host([active]:not([checked]):not([value-state])) .ui5-radio-svg-outer {
+	stroke: var(--_ui5_radio_button_outer_ring_active_color);
+}
+
+/* with label */
+:host([text]) .ui5-radio-root:focus:before {
+	right: 0;
+}
+
+:host([text]) .ui5-radio-inner {
+	padding: var(--_ui5_radio_button_outer_ring_padding_with_label);
+}
+
+/* readonly */
+:host([checked][readonly]) .ui5-radio-svg-inner {
+	fill: var(--sapContent_NonInteractiveIconColor);
+}
+
+:host([readonly]) .ui5-radio-root .ui5-radio-svg-outer {
+	fill: var(--sapField_ReadOnly_Background);
+	stroke: var(--sapField_ReadOnly_BorderColor);
+}
+
+/* value states */
+:host([value-state="Error"]) .ui5-radio-svg-outer,
+:host([value-state="Warning"]) .ui5-radio-svg-outer {
+	stroke-width: 2;
+}
+
+/* Error state */
+:host([value-state="Error"][checked]) .ui5-radio-svg-inner {
+	fill: var(--_ui5_radio_button_checked_error_fill);
+}
+:host([value-state="Error"]) .ui5-radio-svg-outer,
+:host([value-state="Error"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer {
+	stroke: var(--sapField_InvalidColor);
+	fill: var(--sapField_InvalidBackground);
+}
+
+/* Warning state */
+:host([value-state="Warning"][checked]) .ui5-radio-svg-inner {
+	fill: var(--_ui5_radio_button_checked_warning_fill);
+}
+:host([value-state="Warning"]) .ui5-radio-svg-outer,
+:host([value-state="Warning"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer {
+	stroke: var(--sapField_WarningColor);
+	fill: var(--sapField_WarningBackground);
+}
+
+:host([value-state="Error"]) .ui5-radio-root,
+:host([value-state="Warning"]) .ui5-radio-root,
+:host([value-state="Information"]) .ui5-radio-root {
+	stroke-dasharray: var(--_ui5_radio_button_warning_error_border_dash);
+}
+
+.ui5-radio-root {
+	height: var(--_ui5_radio_button_height);
+	position: relative;
+	display: inline-flex;
+	flex-wrap: nowrap;
+	outline: none;
+	max-width: 100%;
+	width: var(--_ui5_radio_button_inner_width);
+	box-sizing: border-box;
+	border: var(--_ui5_radio_button_border);
+	border-radius: var(--_ui5_radio_button_border_radius);
+	transition: var(--_ui5_radio_button_transition);
+}
+
+/* Inner */
+.ui5-radio-inner {
+	display: flex;
+	align-items: center;
+	padding: var(--_ui5_radio_button_outer_ring_padding);
+	flex-shrink: 0;
+	height: var(--_ui5_radio_button_inner_size);
+	font-size: 1rem; /* override font size of the message dialog */
+	pointer-events: none;
+	vertical-align: top;
+}
+
+.ui5-radio-inner:focus {
+	outline: none;
+}
+
+.ui5-radio-inner input {
+	-webkit-appearance: none;
+	visibility: hidden;
+	width: 0;
+	left: 0;
+	position: absolute;
+	font-size: inherit;
+	margin: 0; /* FF puts margin */
+}
+
+/* Label */
+[ui5-label].ui5-radio-label {
+	display: flex;
+	align-items: center;
+	padding-right: var(--_ui5_radio_button_label_offset);
+	vertical-align: top;
+	max-width: 100%;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	pointer-events: none;
+	color: var(--_ui5_radio_button_label_color);
+}
+
+:host([wrapping-type="Normal"][text]) .ui5-radio-root {
+	height: auto;
+}
+
+:host([wrapping-type="Normal"][text]) [ui5-label].ui5-radio-label {
+	padding: var(--_ui5_radio_button_label_side_padding) 0;
+	word-break: break-all;
+}
+
+/* SVG */
+.ui5-radio-svg {
+	height: var(--_ui5_radio_button_svg_size);
+	width: var(--_ui5_radio_button_svg_size);
+	overflow: visible;
+	pointer-events: none;
+}
+
+.ui5-radio-svg-outer {
+	fill: var(--_ui5_radio_button_outer_ring_bg);
+	stroke: currentColor;
+	stroke-width: var(--_ui5_radio_button_outer_ring_width);
+}
+
+.ui5-radio-svg-inner {
+	fill: none;
+}
+
+.ui5-radio-svg-outer,
+.ui5-radio-svg-inner {
+	flex-shrink: 0;
+}
+
+/* RTL */
+:host([text]) [dir="rtl"].ui5-radio-root:focus:before {
+	left: 0;
+	right: var(--_ui5_radio_button_rtl_focus_right);
+}
+
+[dir="rtl"] .ui5-radio-inner {
+	padding: var(--_ui5_radio_button_outer_ring_padding_rtl);
+}
+
+[dir="rtl"] [ui5-label].ui5-radio-label {
+	padding-left: var(--_ui5_radio_button_label_offset);
+	padding-right: 0;
+}
+
+/* ListItem Context */
+:host(.ui5-li-singlesel-radiobtn) .ui5-radio-root .ui5-radio-inner .ui5-radio-svg-outer {
+	fill: var(--sapList_Background);
+}

package/src/themes/RatingIndicator.css

@@ -0,0 +1,52 @@
+:host(:not([hidden])) {
+	display: inline-block;
+	font-size: 1.5rem;
+	cursor: pointer;
+}
+
+:host([disabled]) {
+	opacity: .4;
+	cursor: initial;
+	outline: none;
+}
+
+:host([readonly]) {
+	cursor: initial;
+}
+
+:host([readonly]) .ui5-rating-indicator-icon.ui5-rating-indicator-readonly-unselected-icon {
+	color: var(--sapContent_UnratedColor);
+}
+
+:host([_focused]) {
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	border-radius: var(--_ui5_rating_indicator_border_radius);
+}
+
+.ui5-rating-indicator-root {
+	outline: none;
+}
+
+.ui5-rating-indicator-icon {
+	position: relative;
+	color: var(--sapContent_UnratedColor);
+	user-select: none;
+}
+
+.ui5-rating-indicator-icon.ui5-rating-indicator-active-icon {
+	color: var(--sapContent_RatedColor);
+}
+
+.ui5-rating-indicator-icon.ui5-rating-indicator-half-icon:before {
+	content: "\2605";
+	position: absolute;
+	top: 0;
+	width: 50%;
+	height: 100%;
+	color: var(--sapContent_RatedColor);
+	overflow: hidden;
+}
+
+.ui5-rating-indicator-stars-wrapper {
+	display: flex;
+}

package/src/themes/ResponsivePopover.css

@@ -0,0 +1,34 @@
+:host {
+	--_ui5_input_width: 100%;
+	min-width: 6.25rem;
+	min-height: 2rem;
+}
+
+:host(:not([with-padding])) {
+	--_ui5_popup_content_padding: 0;
+}
+
+:host([opened]) {
+	display: inline-block;
+}
+
+.ui5-responsive-popover-header {
+	height: var(--_ui5-responsive_popover_header_height);
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0 1rem;
+	box-shadow: var(--sapContent_HeaderShadow);
+}
+
+:host [dir="rtl"] .ui5-responsive-popover-header {
+	padding: 0 1rem 0 0;
+}
+
+.ui5-responsive-popover-header-text {
+	width: calc(100% - var(--_ui5_button_base_min_width));
+}
+
+.ui5-responsive-popover-header-no-title {
+	justify-content: flex-end;
+}

package/src/themes/ResponsivePopoverCommon.css

@@ -0,0 +1,207 @@
+/* styles for input in dialog */
+.input-root-phone {
+	flex: 1;
+	height: var(--_ui5_input_height);
+	color: var(--sapField_TextColor);
+	font-size: var(--sapFontSize);
+	font-family: "72override", var(--sapFontFamily);
+	background-color: var(--_ui5-input-background-color);
+	border: var(--_ui5-input-border);
+	border-radius: var(--_ui5-input-border-radius);
+	box-sizing: border-box;
+}
+
+.input-root-phone [inner-input] {
+	padding: 0 0.5rem;
+	width: 100%;
+	height: 100%;
+}
+
+.input-root-phone [inner-input]:focus {
+	border-color: var(--_ui5-input-focused-border-color);
+	background-color: var(--sapField_Focus_Background);
+	box-shadow: var(--_ui5-input-focus-box-shadow);
+}
+
+.input-root-phone[value-state]:not([value-state="None"])[focused] {
+	outline: var(--_ui5_input_focus_border_width) dotted var(--sapContent_FocusColor);
+	outline-offset: -4px;
+}
+
+.input-root-phone [value-state="Error"] [input-icon][data-ui5-compact-size],
+.input-root-phone [value-state="Success"] [input-icon][data-ui5-compact-size],
+.input-root-phone [value-state="Warning"] [input-icon][data-ui5-compact-size] {
+	padding: .1875rem .5rem
+}
+
+[inner-input] {
+	background: transparent;
+	color: inherit;
+	border: none;
+	font-style: normal;
+	-webkit-appearance: none;
+	-moz-appearance: textfield;
+	line-height: normal;
+	padding: var(--_ui5_input_inner_padding);
+	box-sizing: border-box;
+	min-width: 3rem;
+	text-overflow: ellipsis;
+	flex: 1;
+	outline: none;
+	font-size: inherit;
+	font-family: inherit;
+	border-radius: var(--_ui5-input-border-radius);
+}
+
+[inner-input]::selection,
+[inner-input]::-moz-selection {
+	background: var(--sapSelectedColor);
+	color: var(--sapContent_ContrastTextColor);
+}
+
+/* Input placeholder */
+[inner-input]::-webkit-input-placeholder {
+	font-style: italic;
+	color: var(--sapField_PlaceholderTextColor);
+}
+
+[inner-input]::-moz-placeholder {
+	font-style: italic;
+	color: var(--sapField_PlaceholderTextColor);
+}
+
+[inner-input]:-ms-input-placeholder {
+	font-style: italic;
+	color: var(--sapField_PlaceholderTextColor);
+}
+
+.input-root-phone[value-state]:not([value-state="None"]) {
+	border-width: var(--_ui5_input_state_border_width);
+}
+
+.input-root-phone[value-state="Error"] [inner-input],
+.input-root-phone[value-state="Warning"] [inner-input] {
+	font-style: var(--_ui5_input_error_warning_font_style);
+}
+
+.input-root-phone[value-state="Error"] [inner-input] {
+	font-weight: var(--_ui5_input_error_font_weight);
+}
+
+.input-root-phone[value-state="Error"]:not([readonly]) {
+	background-color: var(--sapField_InvalidBackground);
+	border-color: var(--sapField_InvalidColor);
+	background-image: var(--_ui5-input-error-background-image);
+	background-size: 100% var(--sapField_InvalidBorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+}
+
+.input-root-phone[value-state="Error"]:not([readonly]) [inner-input]:focus {
+	background-color: var(--_ui5-input-focused-value-state-error-background);
+	border-color: var(--_ui5-input-focused-value-state-error-border-color);
+	box-shadow: var(--_ui5-input-value-state-error-focus-box-shadow);
+}
+
+.input-root-phone[value-state="Error"]:not([readonly]):not([disabled]),
+.input-root-phone[value-state="Warning"]:not([readonly]):not([disabled]) {
+	border-style: var(--_ui5_input_error_warning_border_style);
+}
+
+.input-root-phone[value-state="Warning"]:not([readonly]) {
+	background-color: var(--sapField_WarningBackground);
+	border-color: var(--sapField_WarningColor);
+	background-image: var(--_ui5-input-warning-background-image);
+	background-size: 100% var(--sapField_WarningBorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+}
+
+.input-root-phone[value-state="Warning"]:not([readonly]) [inner-input]:focus {
+	background-color: var(--_ui5-input-focused-value-state-warning-background);
+	border-color: var(--_ui5-input-focused-value-state-warning-border-color);
+	box-shadow: var(--_ui5-input-value-state-warning-focus-box-shadow);
+}
+
+.input-root-phone[value-state="Success"]:not([readonly]) {
+	background-color: var(--sapField_SuccessBackground);
+	border-color: var(--sapField_SuccessColor);
+	background-image: var(--_ui5-input-success-background-image);
+	background-size: 100% var(--sapField_SuccessBorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+}
+
+.input-root-phone[value-state="Success"]:not([readonly]) [inner-input]:focus {
+	background-color: var(--_ui5-input-focused-value-state-success-background);
+	border-color: var(--_ui5-input-focused-value-state-success-border-color);
+	box-shadow: var(--_ui5-input-value-state-success-focus-box-shadow);
+}
+
+.input-root-phone[value-state="Information"]:not([readonly]) {
+	background-color: var(--sapField_InformationBackground);
+	border-color: var(--_ui5-input-value-state-information-border-color);
+	border-width: var(--_ui5-input-information_border_width);
+	background-image: var(--_ui5-input-information-background-image);
+	background-size: 100% var(--sapField_InformationBorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+}
+
+.input-root-phone[value-state="Information"]:not([readonly]) [inner-input]:focus {
+	background-color: var(--_ui5-input-focused-value-state-information-background);
+	border-color: var(--_ui5-input-focused-value-state-information-border-color);
+	box-shadow: var(--_ui5-input-focus-box-shadow);
+}
+
+.input-root-phone[value-state="None"]:not([readonly]) {
+	background-image: var(--_ui5-input-background-image);
+	background-size: 100% var(--sapField_BorderWidth);
+	background-repeat: repeat-x;
+	background-position: bottom;
+}
+
+/* Remove IE's defaut clear button */
+[inner-input]::-ms-clear {
+	height: 0;
+	width: 0;
+}
+
+/* MultiComboBox & MultiInput specific */
+.ui5-multi-combobox-toggle-button {
+	margin-left: 0.5rem;
+}
+
+.ui5-responsive-popover-header {
+	width: 100%;
+	min-height: 2.5rem;
+	display: flex;
+	flex-direction: column;
+}
+
+.ui5-responsive-popover-header-text {
+	width: calc(100% - var(--_ui5_button_base_min_width));
+}
+
+/* Header and footer layout */
+.ui5-responsive-popover-header .row {
+	box-sizing: border-box;
+	padding: 0.25rem 1rem;
+	min-height: 2.5rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: var(--sapFontHeader5Size);
+}
+
+.ui5-responsive-popover-footer {
+	display: flex;
+	justify-content: flex-end;
+	padding: 0.25rem;
+	width: 100%;
+}
+
+.ui5-responsive-popover-close-btn {
+	position: absolute;
+	right: 1rem;
+}

package/src/themes/SegmentedButton.css

@@ -0,0 +1,88 @@
+@import "./InvisibleTextStyles.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+}
+
+.ui5-segmented-button-root {
+	display: flex;
+	margin: 0;
+	padding: 0;
+	background-color: var(--_ui5_segmented_btn_background_color);
+	border-radius: var(--_ui5_segmented_btn_inner_border_radius);
+}
+
+::slotted([ui5-segmented-button-item]) {
+	border-radius: var(--_ui5_segmented_btn_inner_border_radius);
+	height: var(--_ui5_button_base_height);
+	min-width: 2.5rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	border: var(--_ui5_segmented_btn_inner_border);
+}
+
+::slotted([ui5-segmented-button-item][pressed]) {
+	border: 0.0625rem solid var(--sapButton_Selected_BorderColor)
+}
+
+::slotted([ui5-segmented-button-item]:nth-child(odd)) {
+	border-right: var(--_ui5_segmented_btn_inner_border_odd_child);
+	border-left: var(--_ui5_segmented_btn_inner_border_odd_child);
+}
+
+::slotted([ui5-segmented-button-item][pressed]:nth-child(odd)) {
+	border-right: var(--_ui5_segmented_btn_inner_pressed_border_odd_child);
+	border-left: var(--_ui5_segmented_btn_inner_pressed_border_odd_child);
+}
+
+::slotted([ui5-segmented-button-item]:last-child) {
+	border-top-right-radius: var(--_ui5_segmented_btn_border_radius);
+	border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius);
+	border-right: var(--_ui5_segmented_btn_inner_border);
+}
+
+::slotted([ui5-segmented-button-item][pressed]:last-child) {
+	border-right: 0.0625rem solid var(--sapButton_Selected_BorderColor);
+}
+
+::slotted([ui5-segmented-button-item]:first-child) {
+	border-top-left-radius: var(--_ui5_segmented_btn_border_radius);
+	border-bottom-left-radius: var(--_ui5_segmented_btn_border_radius);
+	border-left: var(--_ui5_segmented_btn_inner_border);
+}
+
+::slotted([ui5-segmented-button-item][pressed]:first-child) {
+	border-left: 0.0625rem solid var(--sapButton_Selected_BorderColor);
+}
+
+[dir="rtl"] ::slotted([ui5-segmented-button-item]:first-child) {
+	border-top-right-radius: var(--_ui5_segmented_btn_border_radius);
+	border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius);
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+	border-right: var(--_ui5_segmented_btn_inner_border);
+}
+
+[dir="rtl"] ::slotted([ui5-segmented-button-item][pressed]:first-child) {
+	border-right: 0.0625rem solid var(--sapButton_Selected_BorderColor);
+}
+
+[dir="rtl"] ::slotted([ui5-segmented-button-item]:last-child) {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+	border-top-left-radius: var(--_ui5_segmented_btn_border_radius);
+	border-bottom-left-radius: var(--_ui5_segmented_btn_border_radius);
+	border-left: var(--_ui5_segmented_btn_inner_border);
+}
+
+[dir="rtl"] ::slotted([ui5-segmented-button-item][pressed]:last-child) {
+	border-left: 0.0625rem solid var(--sapButton_Selected_BorderColor);
+}
+
+[dir="rtl"] ::slotted([ui5-segmented-button-item]:only-child) {
+	border-top-right-radius: var(--_ui5_segmented_btn_border_radius);
+	border-bottom-right-radius: var(--_ui5_segmented_btn_border_radius);
+	border-top-left-radius: var(--_ui5_segmented_btn_border_radius);
+	border-bottom-left-radius: var(--_ui5_segmented_btn_border_radius);
+}

package/src/themes/Select.css

@@ -0,0 +1,53 @@
+@import "./InputIcon.css";
+@import "./Input.css";
+
+.ui5-select-root {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	outline: none;
+	cursor: pointer;
+	overflow: hidden;
+}
+
+.ui5-select-label-root {
+	flex-shrink: 1;
+	flex-grow: 1;
+	align-self: center;
+	min-width: 1rem;
+	padding-left: 0.5rem;
+	cursor: pointer;
+	outline: none;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	color: var(--_ui5_select_label_olor);
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	font-weight: normal;
+}
+
+.ui5-select-option-icon {
+	padding-left: 0.5rem;
+	color: var(--sapField_TextColor);
+	align-self: center;
+}
+
+:host [dir="rtl"].ui5-select-root .ui5-select-label-root {
+	padding-left: 0;
+	padding-right: 0.5rem;
+}
+
+:host [dir="rtl"] .ui5-select-option-icon {
+	padding-right: 0.5rem;
+	padding-left: 0;
+}
+
+:host(:not([disabled])) {
+	cursor: pointer;
+}
+
+:host([focused][opened]),
+:host([value-state]:not([value-state="None"])[focused][opened]) {
+	outline: none;
+}

package/src/themes/SelectPopover.css

@@ -0,0 +1,10 @@
+.ui5-select-popover:not(.ui5-valuestatemessage-popover) [ui5-li]:first-child::part(native-li)::after {
+	border-top-left-radius: var(--_ui5_select_option_focus_border_radius);
+	border-top-right-radius: var(--_ui5_select_option_focus_border_radius);
+}
+
+
+.ui5-select-popover [ui5-li]:last-child::part(native-li)::after {
+	border-bottom-left-radius: var(--_ui5_select_option_focus_border_radius);
+	border-bottom-right-radius: var(--_ui5_select_option_focus_border_radius);
+}