@ui5/webcomponents 1.0.2 → 1.1.0

package/src/themes/Breadcrumbs.css

@@ -1,99 +1,100 @@
-.ui5-breadcrumbs-root {
-    white-space: nowrap;
-    outline: none;
-    margin: 0 0 0.5rem 0;
-}
-
-.ui5-breadcrumbs-root > ol {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: flex;
-}
-
-.ui5-breadcrumbs-root > ol > li {
-    display: inline;
-}
-
-.ui5-breadcrumbs-current-location {
-    min-width: 1%;
-    -webkit-flex: 1;
-    -webkit-box-flex: 1;
-    flex: 1 1 auto;
-}
-
-.ui5-breadcrumbs-current-location > span:focus {
-	outline-offset: -1px;
-	outline: 1px dotted var(--sapContent_FocusColor);
-}
-
-.ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden] {
-    display: none
-}
-
-.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon] {
-    width: var(--sapFontSize);
-    height: var(--sapFontSize);
-    padding-left: .675rem;
-    vertical-align: text-top;
-    color: var(--sapLinkColor);
-}
-
-.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]::before {
-    content: "...";
-    vertical-align: middle;
-    position: absolute;
-    left: 0;
-    bottom: 0;
-}
-
-/* underline icon on hover */
-.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon]::after,
-.ui5-breadcrumbs-dropdown-arrow-link-wrapper:hover [ui5-icon]::after {
-    content: "";
-    position: absolute;
-    border-bottom: 0.0625rem solid;
-    top: 0;
-    left: 0;
-    bottom: 1px;
-    right: 0;
-}
-
-/* links separator */
-[ui5-link]::after {
-    content: "/"; /* default separator is "Slash" */
-    padding: 0 .25rem;
-    cursor: auto;
-    color: var(--sapContent_LabelColor);
-    display: flex;
-    align-items: flex-end;
-}
-
-.ui5-breadcrumbs-popover-footer {
-    display: flex;
-    justify-content: flex-end;
-    width: 100%;
-}
-
-/* separator styles */
-:host([separator-style="BackSlash"]) [ui5-link]::after {
-    content: "\\";
-}
-
-:host([separator-style="DoubleBackSlash"]) [ui5-link]::after {
-    content: "\\\\";
-}
-
-:host([separator-style="DoubleGreaterThan"]) [ui5-link]::after {
-    content: ">>";
-}
-
-:host([separator-style="DoubleSlash"]) [ui5-link]::after {
-    content: "//";
-}
-
-:host([separator-style="GreaterThan"]) [ui5-link]::after {
-    content: ">";
-}
+.ui5-breadcrumbs-root {
+    white-space: nowrap;
+    outline: none;
+    margin: 0 0 0.5rem 0;
+}
+
+.ui5-breadcrumbs-root > ol {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+}
+
+.ui5-breadcrumbs-root > ol > li {
+    display: inline;
+}
+
+.ui5-breadcrumbs-current-location {
+    min-width: 1%;
+    -webkit-flex: 1;
+    -webkit-box-flex: 1;
+    flex: 1 1 auto;
+}
+
+.ui5-breadcrumbs-current-location > span:focus {
+	outline-offset: -1px;
+	outline: 1px dotted var(--sapContent_FocusColor);
+}
+
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden] {
+    display: none
+}
+
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon] {
+    width: var(--sapFontSize);
+    height: var(--sapFontSize);
+    padding-left: .675rem;
+    vertical-align: text-top;
+    color: var(--sapLinkColor);
+}
+
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]::before {
+    content: "...";
+    vertical-align: middle;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+
+/* underline icon on hover */
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon]::after,
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper:hover [ui5-icon]::after {
+    content: "";
+    position: absolute;
+    border-bottom: 0.0625rem solid;
+    top: 0;
+    left: 0;
+    bottom: 1px;
+    right: 0;
+}
+
+/* links separator */
+li:not(.ui5-breadcrumbs-current-location)::after {
+    content: "/"; /* default separator is "Slash" */
+    padding: 0 .25rem;
+    cursor: auto;
+    color: var(--sapContent_LabelColor);
+    display: inline-block;
+    font-family: "72override",var(--sapFontFamily);
+    font-size: var(--sapFontSize);
+}
+
+.ui5-breadcrumbs-popover-footer {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+}
+
+/* separator styles */
+:host([separator-style="BackSlash"]) li:not(.ui5-breadcrumbs-current-location)::after {
+    content: "\\";
+}
+
+:host([separator-style="DoubleBackSlash"]) li:not(.ui5-breadcrumbs-current-location)::after {
+    content: "\\\\";
+}
+
+:host([separator-style="DoubleGreaterThan"]) li:not(.ui5-breadcrumbs-current-location)::after {
+    content: ">>";
+}
+
+:host([separator-style="DoubleSlash"]) li:not(.ui5-breadcrumbs-current-location)::after {
+    content: "//";
+}
+
+:host([separator-style="GreaterThan"]) li:not(.ui5-breadcrumbs-current-location)::after {
+    content: ">";
+}

package/src/themes/BrowserScrollbar.css

@@ -8,9 +8,11 @@
 
 ::-webkit-scrollbar {
 	background-color: var(--sapScrollBar_TrackColor);
+	border-left: var(--browser_scrollbar_border);
 }
 
 ::-webkit-scrollbar-thumb {
+	border-radius: var(--browser_scrollbar_border_radius);
 	background-color: var(--sapScrollBar_FaceColor);
 }
 

package/src/themes/BusyIndicator.css

@@ -2,18 +2,18 @@
 	display: inline-block;
 }
 
-:host([active]) {
+:host([_is-busy]) {
 	color: var(--_ui5_busy_indicator_color);
 }
 
-:host([active]) :not(.ui5-busy-indicator-root--ie) ::slotted(:not([class^="ui5-busy-indicator-"])) {
+:host([_is-busy]) :not(.ui5-busy-indicator-root--ie) ::slotted(:not([class^="ui5-busy-indicator-"])) {
 	opacity: 0.6;
 }
 
 /**
  * IE fix: 0.6 makes the content almost invisible, so we set it to 0.95 in IE
  */
-:host([active]) .ui5-busy-indicator-root--ie ::slotted(:not([class^="ui5-busy-indicator-"])) {
+:host([_is-busy]) .ui5-busy-indicator-root--ie ::slotted(:not([class^="ui5-busy-indicator-"])) {
 	opacity: 0.95;
 }
 

package/src/themes/CardHeader.css

@@ -72,7 +72,6 @@
 	color: var(--sapTile_TextColor);
 	text-align: left;
 	line-height: 1.125rem;
-	padding-left: 1rem;
 	margin-left: auto;
 	text-overflow: ellipsis;
 	overflow: hidden;
@@ -109,15 +108,20 @@
 	max-width: 100%;
 }
 
+
+.ui5-card-header-action {
+	display: flex;
+	padding-left: 1rem;
+}
+
 [dir="rtl"].ui5-card-header .ui5-card-header-avatar {
 	margin-left: .75rem;
 	margin-right: 0;
 }
 
-[dir="rtl"].ui5-card-header .ui5-card-header-status {
+[dir="rtl"].ui5-card-header .ui5-card-header-action {
 	padding-right: 1rem;
 	padding-left: 0rem;
-	margin-right: auto;
 }
 
 [dir="rtl"].ui5-card-header .ui5-card-header-text .ui5-card-header-title {

package/src/themes/CheckBox.css

@@ -15,6 +15,10 @@
 }
 
 /* disabled */
+:host([disabled]) {
+	cursor: default;
+}
+
 :host([disabled]) .ui5-checkbox-root {
 	opacity: .5;
 }
@@ -211,9 +215,6 @@ https://github.com/philipwalton/flexbugs/issues/231
 }
 
 .ui5-checkbox-inner {
-	display: flex;
-	justify-content: center;
-	align-items: center;
 	min-width: var(--_ui5_checkbox_inner_width_height);
 	max-width: var(--_ui5_checkbox_inner_width_height);
 	height: var(--_ui5_checkbox_inner_width_height);
@@ -224,12 +225,16 @@ https://github.com/philipwalton/flexbugs/issues/231
 	color: var(--_ui5_checkbox_checkmark_color);
 	box-sizing: border-box;
 	position: relative;
-	cursor: default;
+	cursor: inherit;
 }
 
 :host([indeterminate][checked]) .ui5-checkbox-inner::after {
 	content: "";
 	background-color: currentColor;
+	position: absolute;
+	left:50%;
+	top:50%;
+	transform: translate(-50%, -50%);
 	width: var(--_ui5_checkbox_partially_icon_size);
 	height: var(--_ui5_checkbox_partially_icon_size);
 }
@@ -246,7 +251,7 @@ https://github.com/philipwalton/flexbugs/issues/231
 .ui5-checkbox-root .ui5-checkbox-label {
 	margin-left: var(--_ui5_checkbox_label_offset_left);
 	margin-right: var(--_ui5_checkbox_label_offset_right);
-	cursor: default;
+	cursor: inherit;
 	text-overflow: ellipsis;
 	overflow: hidden;
 	pointer-events: none;
@@ -260,8 +265,11 @@ https://github.com/philipwalton/flexbugs/issues/231
 	width: var(--_ui5_checkbox_icon_size);
 	height: var(--_ui5_checkbox_icon_size);
 	color: currentColor;
-	cursor: default;
-    position: absolute;
+	cursor: inherit;
+	position: absolute;
+	left:50%;
+	top:50%;
+	transform: translate(-50%, -50%);
 }
 
 /* RTL */

package/src/themes/CustomListItem.css

@@ -4,7 +4,8 @@
 }
 
 :host {
-	height: var(--_ui5_custom_list_item_height);
+	min-height: var(--_ui5_list_item_base_height);
+	height: auto;
 	box-sizing: border-box;
 }
 

package/src/themes/Dialog.css

@@ -17,6 +17,7 @@
 	height: 100%;
 	max-height: 100%;
 	max-width: 100%;
+	border-radius: 0;
 }
 
 .ui5-popup-header-root {

package/src/themes/Input.css

@@ -135,6 +135,7 @@
 	visibility: hidden;
 }
 [inner-input]::-webkit-input-placeholder {
+	font-weight: normal;
 	font-style: var(--_ui5-input-placeholder-style);
 	color: var(--_ui5-input-placeholder-color);
 	padding-right: 0.125rem;
@@ -147,6 +148,7 @@
 	visibility: hidden;
 }
 [inner-input]::-moz-placeholder {
+	font-weight: normal;
 	font-style: var(--_ui5-input-placeholder-style);
 	color: var(--sapField_PlaceholderTextColor);
 	padding-right: 0.125rem;
@@ -159,6 +161,7 @@
 	visibility: hidden;
 }
 [inner-input]:-ms-input-placeholder {
+	font-weight: normal;
 	font-style: italic;
 	color: var(--sapField_PlaceholderTextColor);
 	padding-right: 0.125rem;
@@ -250,12 +253,23 @@
 :host([value-state="Error"]) [inner-input],
 :host([value-state="Warning"]) [inner-input] {
 	font-style: var(--_ui5_input_error_warning_font_style);
+	text-indent: var(--_ui5_input_error_warning_text_indent);
 }
 
 :host([value-state="Error"]) [inner-input] {
 	font-weight: var(--_ui5_input_error_font_weight);
 }
 
+:host([value-state="Warning"]) [inner-input] {
+	font-weight: var(--_ui5_input_warning_font_weight);
+}
+
+:host([value-state="Information"]) [inner-input] {
+	font-style: var(--_ui5_input_information_font_style);
+	font-weight: var(--_ui5_input_information_font_weight);
+	text-indent: var(--_ui5_input_information_text_indent);
+}
+
 :host([value-state="Error"]:not([readonly])) {
 	background-color: var(--sapField_InvalidBackground);
 	border-color: var(--_ui5-input-value-state-error-border-color);

package/src/themes/List.css

@@ -5,6 +5,7 @@
 	display: block;
 	max-width: 100%;
 	width: 100%;
+	-webkit-tap-highlight-color: transparent;
 }
 
 :host([indent]) .ui5-list-root {

package/src/themes/Panel.css

@@ -58,6 +58,10 @@
 	transform: rotate(90deg);
 }
 
+:host(:not([collapsed])) [dir="rtl"] .ui5-panel-header-button {
+	transform: rotate(-90deg);
+}
+
 :host([fixed]) .ui5-panel-header-title {
 	width: 100%;
 }

package/src/themes/Popover.css

@@ -96,3 +96,7 @@
 :host([hide-arrow]) .ui5-popover-arrow {
 	display: none;
 }
+
+.ui5-popover-root {
+	min-width: 6.25rem;
+}

package/src/themes/PopupsCommon.css

@@ -1,7 +1,6 @@
 :host {
     display: none;
     position: fixed;
-    min-width: 6.25rem;
     background: var(--sapGroup_ContentBackground);
     box-shadow: var(--sapContent_Shadow2);
     border-radius: var(--_ui5-popup-border-radius);

package/src/themes/RadioButton.css

@@ -10,11 +10,14 @@
 	text-overflow: ellipsis;
 	overflow: hidden;
 	color: var(--_ui5_radio_button_color);
-	cursor: pointer;
 	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);
@@ -152,7 +155,6 @@
 	border: var(--_ui5_radio_button_border);
 	border-radius: var(--_ui5_radio_button_border_radius);
 	transition: var(--_ui5_radio_button_transition);
-	cursor: pointer;
 }
 
 /* Inner */
@@ -187,7 +189,6 @@
 	align-items: center;
 	padding-right: var(--_ui5_radio_button_label_offset);
 	vertical-align: top;
-	cursor: default;
 	max-width: 100%;
 	text-overflow: ellipsis;
 	overflow: hidden;

package/src/themes/RatingIndicator.css

@@ -41,7 +41,6 @@
 	content: "\2605";
 	position: absolute;
 	top: 0;
-	left: 0;
 	width: 50%;
 	height: 100%;
 	color: var(--sapContent_RatedColor);

package/src/themes/SliderBase.css

@@ -89,7 +89,7 @@
 	outline: none;
 }
 
-.ui5-slider-progress:focus::before {
+.ui5-slider-root:not(.ui5-slider-root-phone) .ui5-slider-progress:focus::before {
 	display: var(--_ui5_range_slider_legacy_progress_focus_display);
 	content: '';
 	position: absolute;
@@ -159,7 +159,8 @@
 	border: var(--_ui5_slider_handle_hover_border);
 }
 
-.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle, .ui5-slider-inner .ui5-slider-handle:focus {
+.ui5-slider-root:not(.ui5-slider-root-phone):focus .ui5-slider-inner .ui5-slider-handle,
+.ui5-slider-root:not(.ui5-slider-root-phone) .ui5-slider-inner .ui5-slider-handle:focus {
 	outline: var(--_ui5_slider_handle_outline);
 	outline-offset: var(--_ui5_slider_handle_outline_offset);
 	border: var(--_ui5_slider_handle_focus_border);

package/src/themes/SplitButton.css

@@ -0,0 +1,98 @@
+@import "./InvisibleTextStyles.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+	height: 100%;
+}
+
+.ui5-split-button-root {
+	display: inline-block;
+	position: relative;
+	width: inherit;
+}
+
+.ui5-split-text-button {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+	border-right-width: 0;
+	margin-right: 2.1875rem;
+	vertical-align: top;
+	width: inherit;
+}
+
+.ui5-split-arrow-button-wrapper {
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+.ui5-split-arrow-button {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+	width: 2.25rem;
+}
+
+.ui5-split-arrow-button[design="Transparent"] {
+	border-left-color: var(--sapButton_Lite_Hover_BorderColor);
+}
+
+.ui5-split-arrow-button[design="Emphasized"] {
+	border-left-color: var(--sapButton_Emphasized_TextColor);
+}
+
+:host([focused]) .ui5-split-button-root {
+	outline: 0;
+}
+
+:host([focused]) .ui5-split-button-root:after {
+	content: "";
+	position: absolute;
+	box-sizing: border-box;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	pointer-events: none;
+	outline: var(--_ui5_button_outline);
+	outline-offset: -0.1875rem;
+	border-radius: var(--_ui5_button_border_radius);
+}
+
+:host([design="Emphasized"]) ui5-button[focused] {
+	outline-color: transparent;
+}
+
+:host([design="Emphasized"][focused]) .ui5-split-button-root:after {
+	outline: var(--_ui5_button_emphasized_focused_border);
+}
+
+.ui5-split-text-button[dir="rtl"] {
+	border-radius: 0 var(--_ui5_button_border_radius) var(--_ui5_button_border_radius) 0;
+	border-width: 1px 1px 1px 0;
+	margin-right: 0;
+	margin-left: 2.1875rem;
+}
+
+.ui5-split-arrow-button-wrapper[dir="rtl"] {
+	left: 0;
+	right: auto;
+}
+
+[dir="rtl"] .ui5-split-arrow-button {
+	border-radius: var(--_ui5_button_border_radius) 0 0 var(--_ui5_button_border_radius);
+}
+
+[dir="rtl"] .ui5-split-arrow-button[design="Transparent"] {
+	border-right-color: var(--sapButton_Lite_Hover_BorderColor);
+	border-left-color: var(--sapButton_Lite_BorderColor);
+}
+
+[dir="rtl"] .ui5-split-arrow-button[design="Transparent"]:not([disabled]):hover {
+	border-left-color: var(--sapButton_Lite_Hover_BorderColor);
+}
+
+[dir="rtl"] .ui5-split-arrow-button[design="Emphasized"] {
+	border-right-color: var(--sapButton_Emphasized_TextColor);
+	border-left-color: var(--sapButton_Emphasized_BorderColor);
+}
+