@ui5/webcomponents 0.0.0-7c7170d4a → 0.0.0-7d8c57f70

package/src/themes/BusyIndicator.css

@@ -6,62 +6,62 @@
 	color: var(--_ui5_busy_indicator_color);
 }
 
-:host([size="S"]) .ui5-busy-indicator-root {
+:host([size="Small"]) .ui5-busy-indicator-root {
 	min-width: 1.625rem; /*width of the dots plus the gap between them*/
 	min-height: .5rem;
 }
 
-:host([size="S"][text]:not([text=""])) .ui5-busy-indicator-root {
+:host([size="Small"][text]:not([text=""])) .ui5-busy-indicator-root {
 	min-height: 1.75rem;
 }
 
-:host([size="S"]) .ui5-busy-indicator-circle {
+:host([size="Small"]) .ui5-busy-indicator-circle {
 	width: .5rem;
 	height: .5rem;
 }
 
-:host([size="S"]) .ui5-busy-indicator-circle:first-child,
-:host([size="S"]) .ui5-busy-indicator-circle:nth-child(2) {
+:host([size="Small"]) .ui5-busy-indicator-circle:first-child,
+:host([size="Small"]) .ui5-busy-indicator-circle:nth-child(2) {
 	margin-inline-end: 0.0625rem;
 }
 
 :host(:not([size])) .ui5-busy-indicator-root,
-:host([size="M"]) .ui5-busy-indicator-root {
+:host([size="Medium"]) .ui5-busy-indicator-root {
 	min-width: 3.375rem; /*width of the dots plus the gap between them*/
 	min-height: 1rem;
 }
 
-:host([size="M"]) .ui5-busy-indicator-circle:first-child,
-:host([size="M"]) .ui5-busy-indicator-circle:nth-child(2) {
+:host([size="Medium"]) .ui5-busy-indicator-circle:first-child,
+:host([size="Medium"]) .ui5-busy-indicator-circle:nth-child(2) {
 	margin-inline-end: 0.1875rem;
 }
 
 :host(:not([size])[text]:not([text=""])) .ui5-busy-indicator-root,
-:host([size="M"][text]:not([text=""])) .ui5-busy-indicator-root {
+:host([size="Medium"][text]:not([text=""])) .ui5-busy-indicator-root {
 	min-height: 2.25rem;
 }
 
 :host(:not([size])) .ui5-busy-indicator-circle,
-:host([size="M"])  .ui5-busy-indicator-circle {
+:host([size="Medium"])  .ui5-busy-indicator-circle {
 	width: 1rem;
 	height: 1rem;
 }
 
-:host([size="L"]) .ui5-busy-indicator-root {
+:host([size="Large"]) .ui5-busy-indicator-root {
 	min-width: 6.5rem; /*width of the dots plus the gap between them*/
 	min-height: 2rem;
 }
 
-:host([size="L"]) .ui5-busy-indicator-circle:first-child,
-:host([size="L"]) .ui5-busy-indicator-circle:nth-child(2) {
+:host([size="Large"]) .ui5-busy-indicator-circle:first-child,
+:host([size="Large"]) .ui5-busy-indicator-circle:nth-child(2) {
 	margin-inline-end: 0.25rem;
 }
 
-:host([size="L"][text]:not([text=""])) .ui5-busy-indicator-root {
+:host([size="Large"][text]:not([text=""])) .ui5-busy-indicator-root {
 	min-height: 3.25rem;
 }
 
-:host([size="L"]) .ui5-busy-indicator-circle {
+:host([size="Large"]) .ui5-busy-indicator-circle {
 	width: 2rem;
 	height: 2rem;
 }
@@ -89,11 +89,14 @@
 	flex-direction: column;
 }
 
-:host([desktop]) .ui5-busy-indicator-busy-area:focus,
-.ui5-busy-indicator-busy-area:focus-visible {
+:host(:not(:empty)) .ui5-busy-indicator-busy-area {
+	background-color: var(--_ui5_busy_indicator_block_layer);
+}
+
+.ui5-busy-indicator-busy-area:focus {
 	outline: var(--_ui5_busy_indicator_focus_outline);
 	outline-offset: -2px;
-	border-radius: var(--_ui5_busy_indicator_focus_border_radius);
+    border-radius: var(--_ui5_busy_indicator_focus_border_radius);
 }
 
 .ui5-busy-indicator-circles-wrapper {

package/src/themes/Button.css

@@ -58,17 +58,20 @@
 	color: var(--sapButton_Hover_TextColor);
 }
 
-.ui5-button-icon,
-.ui5-button-end-icon {
+.ui5-button-icon {
 	color: inherit;
 	flex-shrink: 0;
 }
 
-.ui5-button-end-icon {
+:host([icon-end]) .ui5-button-root {
+	flex-direction: row-reverse;
+}
+
+:host([icon-end]) .ui5-button-icon {
 	margin-inline-start: var(--_ui5_button_base_icon_margin);
 }
 
-:host([icon-only]:not([has-end-icon])) .ui5-button-root {
+:host([icon-only]) .ui5-button-root {
 	min-width: auto;
 	padding: 0;
 }
@@ -85,11 +88,11 @@
 	text-overflow: inherit;
 }
 
-:host([has-icon]:not(:empty)) .ui5-button-text {
+:host([has-icon]:not([icon-end])) .ui5-button-text {
 	margin-inline-start: var(--_ui5_button_base_icon_margin);
 }
 
-:host([has-end-icon]:not([has-icon]):empty) .ui5-button-end-icon {
+:host([has-icon][icon-end]) .ui5-button-text {
 	margin-inline-start: 0;
 }
 
@@ -99,7 +102,7 @@
 	cursor: default;
 }
 
-:host([has-icon]:not([icon-only]):not([has-end-icon])) .ui5-button-text{
+:host([has-icon]:not([icon-only])) .ui5-button-text{
 	/* calculating the minimum width by removing the icon size  */
 	min-width: calc(var(--_ui5_button_base_min_width) - var(--_ui5_button_base_icon_margin) - 1rem);
 }
@@ -107,12 +110,9 @@
 	pointer-events: none;
 }
 
-:host([desktop]:not([active])) .ui5-button-root:focus-within:after,
-:host(:not([active])) .ui5-button-root:focus-visible:after,
-:host([desktop][active][design="Emphasized"]) .ui5-button-root:focus-within:after,
-:host([active][design="Emphasized"]) .ui5-button-root:focus-visible:after,
-:host([desktop][active]) .ui5-button-root:focus-within:before,
-:host([active]) .ui5-button-root:focus-visible:before {
+:host([focused]:not([active])) .ui5-button-root:after,
+:host([focused][active][design="Emphasized"]) .ui5-button-root:after,
+:host([focused][active]) .ui5-button-root:before {
 	content: "";
 	position: absolute;
 	box-sizing: border-box;
@@ -124,18 +124,15 @@
 	border-radius: var(--_ui5_button_focused_border_radius);
 }
 
-:host([desktop][active]) .ui5-button-root:focus-within:before,
-:host([active]) .ui5-button-root:focus-visible:before {
+:host([focused][active]) .ui5-button-root:before {
 	border-color: var(--_ui5_button_pressed_focused_border_color);
 }
 
-:host([design="Emphasized"][desktop]) .ui5-button-root:focus-within:after,
-:host([design="Emphasized"]) .ui5-button-root:focus-visible:after {
+:host([design="Emphasized"][focused]) .ui5-button-root:after {
 	border-color: var(--_ui5_button_emphasized_focused_border_color);
 }
 
-:host([design="Emphasized"][desktop]) .ui5-button-root:focus-within:before,
-:host([design="Emphasized"]) .ui5-button-root:focus-visible:before {
+:host([design="Emphasized"][focused]) .ui5-button-root:before {
 	content: "";
 	position: absolute;
 	box-sizing: border-box;
@@ -248,15 +245,13 @@ bdi {
 	color: var(--sapButton_Emphasized_Active_TextColor);
 }
 
-:host([design="Emphasized"][desktop]) .ui5-button-root:focus-within:after,
-:host([design="Emphasized"]) .ui5-button-root:focus-visible:after {
+:host([design="Emphasized"][focused]) .ui5-button-root:after {
 	border-color: var(--_ui5_button_emphasized_focused_border_color);
 	outline: none;
 }
 
 /* Belize related */
-:host([design="Emphasized"][desktop][active]:not([non-interactive])) .ui5-button-root:focus-within:after,
-:host([design="Emphasized"][active]:not([non-interactive])) .ui5-button-root:focus-visible:after  {
+:host([design="Emphasized"][focused][active]:not([non-interactive])) .ui5-button-root:after {
 	border-color: var(--_ui5_button_emphasized_focused_active_border_color);
 }
 
@@ -281,22 +276,18 @@ bdi {
 }
 
 /* SegmentedButton and ToggleButton */
-:host([ui5-segmented-button-item][active][desktop]) .ui5-button-root:focus-within:after,
-:host([ui5-segmented-button-item][active]) .ui5-button-root:focus-visible:after,
-:host([pressed][desktop]) .ui5-button-root:focus-within:after,
-:host([pressed]) .ui5-button-root:focus-visible:after {
+:host([ui5-segmented-button-item][active][focused]) .ui5-button-root:after,
+:host([pressed][focused]) .ui5-button-root:after {
 	border-color: var(--_ui5_button_pressed_focused_border_color);
 	outline: none;
 }
 
-:host([ui5-segmented-button-item][desktop]:not(:last-child)) .ui5-button-root:focus-within:after,
-:host([ui5-segmented-button-item]:not(:last-child)) .ui5-button-root:focus-visible:after  {
+:host([ui5-segmented-button-item][focused]:not(:last-child)) .ui5-button-root:after {
 	border-top-right-radius: var(--_ui5_button_focused_inner_border_radius);
 	border-bottom-right-radius: var(--_ui5_button_focused_inner_border_radius);
 }
 
-:host([ui5-segmented-button-item][desktop]:not(:first-child)) .ui5-button-root:focus-within:after,
-:host([ui5-segmented-button-item]:not(:first-child)) .ui5-button-root:focus-visible:after {
+:host([ui5-segmented-button-item][focused]:not(:first-child)) .ui5-button-root:after {
 	border-top-left-radius: var(--_ui5_button_focused_inner_border_radius);
 	border-bottom-left-radius: var(--_ui5_button_focused_inner_border_radius);
 }

package/src/themes/CalendarLegendItem.css

@@ -7,7 +7,6 @@
 	text-overflow: ellipsis;
 	overflow: hidden;
 	cursor: default;
-	margin: 0.0625rem 0;
 }
 
 .ui5-calendar-legend-item-box {
@@ -16,7 +15,6 @@
 	height: 1rem;
 	width: 1rem;
 	margin: var(--_ui5-calendar-legend-item-box-margin);
-	margin-inline-end: var(--_ui5-calendar-legend-item-box-inner-margin);
 	background: var(--sapLegend_WorkingBackground);
 	border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
 }
@@ -155,7 +153,6 @@
 
 .ui5-calendar-legend-item-root:focus {
 	outline: var(--_ui5-calendar-legend-item-root-focus-border);
-	outline-offset: var(--_ui5-calendar-legend-item-root-focus-offset);
+	outline-offset: -.0625rem;
 	border-radius: var(--_ui5-calendar-legend-item-root-focus-border-radius);
-	margin: 0.0625rem 0;
 }

package/src/themes/CardHeader.css

@@ -12,8 +12,7 @@
 	align-items: flex-start;
 }
 
-:host([desktop]) .ui5-card-header.ui5-card-header-ff:not(.ui5-card-header-hide-focus):focus-within:before,
-.ui5-card-header.ui5-card-header-ff:not(.ui5-card-header-hide-focus):focus-visible:before {
+.ui5-card-header.ui5-card-header-ff:not(.ui5-card-header-hide-focus):focus-within:before {
 	outline: none;
 	content: "";
 	position: absolute;
@@ -30,8 +29,7 @@
 }
 
 /* cannot be combined with the above style, because :has selector breaks the whole style if FF */
-:host([desktop]) .ui5-card-header:not(.ui5-card-header-ff):not(.ui5-card-header-hide-focus):has(.ui5-card-header-focusable-element:focus):before,
-.ui5-card-header:not(.ui5-card-header-ff):not(.ui5-card-header-hide-focus):has(.ui5-card-header-focusable-element:focus-visible):before {
+.ui5-card-header:not(.ui5-card-header-ff):not(.ui5-card-header-hide-focus):has(.ui5-card-header-focusable-element:focus):before {
 	outline: none;
 	content: "";
 	position: absolute;
@@ -80,7 +78,7 @@
 	justify-content: space-between;
 }
 
-.ui5-card-header-additionalText {
+.ui5-card-header-status {
 	flex: none;
 }
 
@@ -107,7 +105,7 @@
 	border-radius: 50%;
 }
 
-.ui5-card-header .ui5-card-header-additionalText {
+.ui5-card-header .ui5-card-header-status {
 	display: inline-block;
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSmallSize);

package/src/themes/Carousel.css

@@ -8,8 +8,7 @@
     height: 100%;
 }
 
-:host([desktop]) .ui5-carousel-root:focus,
-.ui5-carousel-root:focus-visible {
+.ui5-carousel-root:focus {
     outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 

package/src/themes/CheckBox.css

@@ -36,7 +36,7 @@
 }
 
 /* readonly */
-:host([readonly]:not([value-state="Critical"]):not([value-state="Negative"])) .ui5-checkbox-inner {
+:host([readonly]:not([value-state="Warning"]):not([value-state="Error"])) .ui5-checkbox-inner {
 	background: var(--sapField_ReadOnly_Background);
 	border: var(--_ui5_checkbox_inner_readonly_border);
 	color: var(--sapField_TextColor);
@@ -61,31 +61,30 @@
 	align-self: center;
 }
 
-:host([desktop][wrapping-type="Normal"]) .ui5-checkbox-root:focus-within::before,
-:host([wrapping-type="Normal"]) .ui5-checkbox-root:focus-visible::before {
+:host([wrapping-type="Normal"]) .ui5-checkbox-root:focus::before {
 	bottom: var(--_ui5_checkbox_wrapped_focus_left_top_bottom_position);
 }
 
 /* value states */
-:host([value-state="Negative"]) .ui5-checkbox-inner,
-:host([value-state="Negative"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
+:host([value-state="Error"]) .ui5-checkbox-inner,
+:host([value-state="Error"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
 	background: var(--sapField_InvalidBackground);
 	border: var(--_ui5_checkbox_inner_error_border);
 	color: var(--sapField_InvalidColor);
 }
 
-:host([value-state="Negative"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
+:host([value-state="Error"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
 	background: var(--_ui5_checkbox_inner_error_background_hover);
 }
 
-:host([value-state="Critical"]) .ui5-checkbox-inner,
-:host([value-state="Critical"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
+:host([value-state="Warning"]) .ui5-checkbox-inner,
+:host([value-state="Warning"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
 	background: var(--sapField_WarningBackground);
 	border: var(--_ui5_checkbox_inner_warning_border);
 	color: var(--_ui5_checkbox_inner_warning_color);
 }
 
-:host([value-state="Critical"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
+:host([value-state="Warning"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
 	background: var(--_ui5_checkbox_inner_warning_background_hover);
 }
 
@@ -100,22 +99,31 @@
 	background: var(--_ui5_checkbox_inner_information_background_hover);
 }
 
-:host([value-state="Positive"]) .ui5-checkbox-inner,
-:host([value-state="Positive"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner  {
+
+:host([value-state="Success"]) .ui5-checkbox-inner,
+:host([value-state="Success"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner  {
 	background: var(--sapField_SuccessBackground);
 	border: var(--_ui5_checkbox_inner_success_border);
 	color: var(--sapField_SuccessColor);
 }
 
-:host([value-state="Positive"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner  {
+:host([value-state="Success"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner  {
 	background: var(--_ui5_checkbox_inner_success_background_hover);
 }
 
-:host([value-state="Critical"]) .ui5-checkbox-icon,
-:host([value-state="Critical"][indeterminate]) .ui5-checkbox-inner::after {
+:host([value-state="Warning"]) .ui5-checkbox-icon,
+:host([value-state="Warning"][indeterminate]) .ui5-checkbox-inner::after {
 	color: var(--_ui5_checkbox_checkmark_warning_color);
 }
 
+:host([text]) .ui5-checkbox-root {
+	padding-inline-end: var(--_ui5_checkbox_right_focus_distance);
+}
+
+:host([text]) .ui5-checkbox-root:focus::before {
+	inset-inline-end: 0;
+}
+
 .ui5-checkbox-root {
 	position: relative;
 	display: inline-flex;
@@ -133,8 +141,7 @@
 }
 
 /* focused */
-:host([desktop]) .ui5-checkbox-root:focus-within::before,
-.ui5-checkbox-root:focus-visible::before {
+.ui5-checkbox-root:focus::before {
 	display: var(--_ui5_checkbox_focus_outline_display);
 	content: "";
 	position: absolute;
@@ -144,13 +151,9 @@
 	border-radius: var(--_ui5_checkbox_focus_border_radius);
 }
 
-:host([text]) .ui5-checkbox-root {
-	padding-inline-end: var(--_ui5_checkbox_right_focus_distance);
-}
-
-:host([text]) .ui5-checkbox-root:focus-within::before,
-:host([text]) .ui5-checkbox-root:focus-visible::before {
-	inset-inline-end: 0;
+:host .ui5-checkbox-root:focus {
+	border: var(--_ui5_checkbox_focus_border);
+	border-radius: 0.5rem;
 }
 
 /* hover */

package/src/themes/Dialog.css

@@ -36,10 +36,6 @@
 	user-select: text;
 }
 
-::slotted([slot="header"]) {
-	max-width: 100%;
-}
-
 .ui5-popup-root {
 	display: flex;
 	flex-direction: column;
@@ -61,7 +57,7 @@
 	background: var(--sapObjectHeader_BorderColor);
 }
 
-:host([state="Negative"]) .ui5-popup-header-root::before {
+:host([state="Error"]) .ui5-popup-header-root::before {
 	background: var(--sapErrorBorderColor);
 }
 
@@ -69,11 +65,11 @@
 	background: var(--sapInformationBorderColor);
 }
 
-:host([state="Positive"]) .ui5-popup-header-root::before {
+:host([state="Success"]) .ui5-popup-header-root::before {
 	background: var(--sapSuccessBorderColor);
 }
 
-:host([state="Critical"]) .ui5-popup-header-root::before {
+:host([state="Warning"]) .ui5-popup-header-root::before {
 	background: var(--sapWarningBorderColor);
 }
 
@@ -82,18 +78,18 @@
 	flex-shrink: 0;
 }
 
-:host([state="Negative"]) .ui5-dialog-value-state-icon {
+:host([state="Error"]) .ui5-dialog-value-state-icon {
 	color: var(--_ui5_dialog_header_error_state_icon_color);
 }
 
 :host([state="Information"]) .ui5-dialog-value-state-icon {
 	color: var(--_ui5_dialog_header_information_state_icon_color);
 }
-:host([state="Positive"]) .ui5-dialog-value-state-icon {
+:host([state="Success"]) .ui5-dialog-value-state-icon {
 	color: var(--_ui5_dialog_header_success_state_icon_color);
 }
 
-:host([state="Critical"]) .ui5-dialog-value-state-icon {
+:host([state="Warning"]) .ui5-dialog-value-state-icon {
 	color: var(--_ui5_dialog_header_warning_state_icon_color);
 }
 
@@ -101,8 +97,7 @@
 	outline: none;
 }
 
-:host([desktop]) .ui5-popup-header-root:focus:after,
-.ui5-popup-header-root:focus-visible:after {
+.ui5-popup-header-root:focus:after {
 	content: '';
 	position: absolute;
 	left: var(--_ui5_dialog_header_focus_left_offset);
@@ -142,12 +137,4 @@
 
 ::slotted([slot="header"][ui5-bar]) {
 	box-shadow: none;
-}
-
-:host::backdrop {
-	background-color: var(--_ui5_popup_block_layer_background);
-}
-
-.ui5-block-layer {
-	display: block;
 }

package/src/themes/DropIndicator.css

@@ -12,10 +12,6 @@
 	background: var(--sapContent_DragAndDropActiveColor);
 }
 
-:host([orientation="Vertical"]) {
-	margin-left: -0.0625rem; /* half of the width */
-}
-
 :host([orientation="Horizontal"]) .ui5-di-needle {
 	height: 0.125rem;
 	width: 100%;
@@ -23,18 +19,6 @@
 	background: var(--sapContent_DragAndDropActiveColor);
 }
 
-:host([orientation="Horizontal"]) {
-	margin-top: -0.0625rem; /* half of the needle height */
-}
-
-:host([orientation="Horizontal"][placement="Before"][first]) {
-	margin-top: 0.3125rem; /* half of the needle height + half of the ear height */
-}
-
-:host([orientation="Horizontal"][placement="After"][last]) {
-	margin-top: -0.3125rem; /* half of the needle height + half of the ear height */
-}
-
 /* the ear of the needle */
 :host([orientation="Vertical"]) .ui5-di-needle::before {
 	left: -0.1875rem;

package/src/themes/FileUploader.css

@@ -38,17 +38,17 @@
 	box-shadow: var(--sapField_Hover_Shadow);
 }
 
-:host([value-state="Negative"]:not([disabled]):hover) [ui5-input] {
+:host([value-state="Error"]:not([disabled]):hover) [ui5-input] {
 	background-color: var(--_ui5_file_uploader_value_state_error_hover_background_color);
 	box-shadow: var(--sapField_Hover_InvalidShadow);
 }
 
-:host([value-state="Critical"]:not([disabled]):hover) [ui5-input] {
+:host([value-state="Warning"]:not([disabled]):hover) [ui5-input] {
 	background-color: var(--sapField_Hover_Background);
 	box-shadow: var(--sapField_Hover_WarningShadow);
 }
 
-:host([value-state="Positive"]:not([disabled]):hover) [ui5-input] {
+:host([value-state="Success"]:not([disabled]):hover) [ui5-input] {
 	background-color: var(--sapField_Hover_Background);
 	box-shadow: var(--sapField_Hover_SuccessShadow);
 }

package/src/themes/{ListItemGroupHeader.css → GroupHeaderListItem.css}

@@ -27,7 +27,3 @@
 	font-weight: bold;
 	font-family: var(--sapFontHeaderFamily);
 }
-
-.ui5-li-content {
-	width: 100%;
-}

package/src/themes/Icon.css

@@ -50,8 +50,7 @@
 	color: var(--sapPositiveElementColor);
 }
 
-:host([mode="Interactive"][desktop]) .ui5-icon-root:focus-within,
-:host([mode="Interactive"]) .ui5-icon-root:focus-visible {
+:host([interactive][focused]) .ui5-icon-root {
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	border-radius: var(--ui5-icon-focus-border-radius);
 }
@@ -65,7 +64,7 @@
 }
 
 
-:host([mode="Interactive"]) {
+:host([interactive]) {
 	cursor: pointer;
 }