@ui5/webcomponents 1.2.6 → 1.4.0

package/src/themes/Avatar.css

@@ -26,18 +26,13 @@
 	color: var(--ui5-avatar-initials-color);
 }
 
-/* Shapes */
-:host([shape="Square"]),
-:host([shape="Square"]) ::slotted(*){
-	border-radius: .25rem;
-}
-
-:host([shape="Square"]) .ui5-avatar-root {
-	border-radius: inherit;
-}
-
-:host([shape="Square"]) .ui5-avatar-img {
-	border-radius: inherit;
+.ui5-avatar-root {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	outline: none;
+	height: 100%;
+	width: 100%;
 }
 
 /* Sizes */
@@ -81,45 +76,52 @@
 
 /* Icon */
 :host .ui5-avatar-icon {
-	height: 1.5rem;
-	width: 1.5rem;
+	height: var(--_ui5_avatar_fontsize_S);
+	width: var(--_ui5_avatar_fontsize_S);
 	color: inherit;
 }
 
 :host([_size="XS"]) .ui5-avatar-icon,
 :host([size="XS"]) .ui5-avatar-icon {
-	height: 1rem;
-	width: 1rem;
+	height: var(--_ui5_avatar_icon_XS);
+	width: var(--_ui5_avatar_icon_XS);
 }
 
 :host([_size="S"]) .ui5-avatar-icon,
 :host([size="S"]) .ui5-avatar-icon {
-	height: 1.5rem;
-	width: 1.5rem;
+	height: var(--_ui5_avatar_icon_S);
+	width: var(--_ui5_avatar_icon_S);
 }
 
 :host([_size="M"]) .ui5-avatar-icon,
 :host([size="M"]) .ui5-avatar-icon {
-	height: 2rem;
-	width: 2rem;
+	height: var(--_ui5_avatar_icon_M);
+	width: var(--_ui5_avatar_icon_M);
 }
 
 :host([_size="L"]) .ui5-avatar-icon,
 :host([size="L"]) .ui5-avatar-icon {
-	height: 2.5rem;
-	width: 2.5rem;
+	height: var(--_ui5_avatar_icon_L);
+	width: var(--_ui5_avatar_icon_L);
 }
 
 :host([_size="XL"]) .ui5-avatar-icon,
 :host([size="XL"]) .ui5-avatar-icon {
-	height: 3rem;
-	width: 3rem;
+	height: var(--_ui5_avatar_icon_XL);
+	width: var(--_ui5_avatar_icon_XL);
 }
 
 ::slotted(*) {
 	border-radius: 50%;
     width: 100%;
     height: 100%;
+	pointer-events: none;
+}
+
+/* Shapes */
+:host([shape="Square"]),
+:host([shape="Square"]) ::slotted(*) {
+	border-radius: var(--ui5-avatar-border-radius);
 }
 
 :host(:not([color-scheme])),
@@ -128,66 +130,77 @@
 :host([color-scheme="Accent6"]) {
 	background-color: var(--ui5-avatar-accent6);
 	color: var(--ui5-avatar-accent6-color);
+	border-color: var(--ui5-avatar-accent6-border-color);
 }
 
 :host([_color-scheme="Accent1"]),
 :host([color-scheme="Accent1"]) {
 	background-color: var(--ui5-avatar-accent1);
 	color: var(--ui5-avatar-accent1-color);
+	border-color: var(--ui5-avatar-accent1-border-color);
 }
 
 :host([_color-scheme="Accent2"]),
 :host([color-scheme="Accent2"]) {
 	background-color: var(--ui5-avatar-accent2);
 	color: var(--ui5-avatar-accent2-color);
+	border-color: var(--ui5-avatar-accent2-border-color);
 }
 
 :host([_color-scheme="Accent3"]),
 :host([color-scheme="Accent3"]) {
 	background-color: var(--ui5-avatar-accent3);
 	color: var(--ui5-avatar-accent3-color);
+	border-color: var(--ui5-avatar-accent3-border-color);
 }
 
 :host([_color-scheme="Accent4"]),
 :host([color-scheme="Accent4"]) {
 	background-color: var(--ui5-avatar-accent4);
 	color: var(--ui5-avatar-accent4-color);
+	border-color: var(--ui5-avatar-accent4-border-color);
 }
 
 :host([_color-scheme="Accent5"]),
 :host([color-scheme="Accent5"]) {
 	background-color: var(--ui5-avatar-accent5);
 	color: var(--ui5-avatar-accent5-color);
+	border-color: var(--ui5-avatar-accent5-border-color);
 }
 
 :host([_color-scheme="Accent7"]),
 :host([color-scheme="Accent7"]) {
 	background-color: var(--ui5-avatar-accent7);
 	color: var(--ui5-avatar-accent7-color);
+	border-color: var(--ui5-avatar-accent7-border-color);
 }
 
 :host([_color-scheme="Accent8"]),
 :host([color-scheme="Accent8"]) {
 	background-color: var(--ui5-avatar-accent8);
 	color: var(--ui5-avatar-accent8-color);
+	border-color: var(--ui5-avatar-accent8-border-color);
 }
 
 :host([_color-scheme="Accent9"]),
 :host([color-scheme="Accent9"]) {
 	background-color: var(--ui5-avatar-accent9);
 	color: var(--ui5-avatar-accent9-color);
+	border-color: var(--ui5-avatar-accent9-border-color);
 }
 
 :host([_color-scheme="Accent10"]),
 :host([color-scheme="Accent10"]) {
 	background-color: var(--ui5-avatar-accent10);
 	color: var(--ui5-avatar-accent10-color);
+	border-color: var(--ui5-avatar-accent10-border-color);
 }
 
 :host([_color-scheme="Placeholder"]),
 :host([color-scheme="Placeholder"]) {
 	background-color: var(--ui5-avatar-placeholder);
 	color: var(--ui5-avatar-placeholder-color);
+	border-color: var(--ui5-avatar-placeholder-border-color);
 }
 
 :host([_has-image]) {
@@ -195,34 +208,6 @@
 	vertical-align: middle;
 }
 
-:host([image-fit-type="Contain"]) .ui5-avatar-img {
-	background-size: contain;
-}
-
-.ui5-avatar-root {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	outline: none;
-}
-
-.ui5-avatar-root,
-.ui5-avatar-img {
-	height: 100%;
-	width: 100%;
-	border-radius: 50%;
-}
-
-.ui5-avatar-img {
-	background-repeat: no-repeat;
-	background-position: center;
-	background-size: cover;
-}
-
 .ui5-avatar-initials {
 	color: inherit;
-}
-
-::slotted(*) {
-	pointer-events: none;
 }

package/src/themes/AvatarGroup.css

@@ -10,6 +10,7 @@
 :host([type="Group"]) .ui5-avatar-group-items:focus {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
+	border-radius: var(--_ui5_avatar_group_focus_border_radius);
 }
 
 .ui5-avatar-group-root {
@@ -41,8 +42,8 @@
 
 ::slotted([ui5-button][focused]),
 .ui5-avatar-group-overflow-btn[focused] {
-	outline: var(--_ui5_button_outline);
-	outline-offset: var(--_ui5_avatar_group_overflow_button_focus_offset);
+	outline: var(--_ui5_avatar_outline);
+	outline-offset: var(--_ui5_avatar_focus_offset);
 }
 
 .ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xs {

package/src/themes/Badge.css

@@ -2,21 +2,19 @@
 
 :host(:not([hidden])) {
 	display: inline-block;
-	height: var(--_ui5-badge-height);
+	height: 1rem;
 	min-width: 1.125em;
 	max-width: 100%;
 	padding: 0 0.3125em;
 	color: var(--sapAccentColor1);
 	background: var(--sapLegendBackgroundColor1);
-	border: var(--_ui5-badge-border);
-	border-inline-start: var(--_ui5-badge-left-border);
-	border-radius: var(--_ui5-badge-border-radius);
+	border: 0.0625em solid;
+	border-radius: 0.5rem;
 	box-sizing: border-box;
 	font-family: "72override", var(--sapFontFamily);
-	font-weight: var(--_ui5-badge-font-weight);
+	font-weight: bold;
 	text-align: center;
 	letter-spacing: 0.0125em;
-	transition: all .2s ease-in-out;
 }
 
 :host([color-scheme]:hover),
@@ -30,7 +28,7 @@
 	width: 100%;
 	height: 100%;
 	box-sizing: border-box;
-	pointer-events: var(--_ui5_badge_pointer_events);
+	pointer-events: none;
 }
 
 .ui5-badge-text {
@@ -40,9 +38,9 @@
 	font-weight: inherit;
 	text-overflow: ellipsis;
 	line-height: 1;
-	text-transform: var(--_ui5-badge-text-transform);
+	text-transform: uppercase;
 	letter-spacing: inherit;
-	font-size: var(--ui5-badge-font-size); /* origin from --sapFontSmallSize (0.75rem) */
+	font-size: 0.75em; /* origin from --sapFontSmallSize (0.75rem) */
 }
 
 :host(:hover) .ui5-badge-text {
@@ -67,13 +65,7 @@
 }
 
 :host([_has-icon]) .ui5-badge-text {
-	padding-left: 0.125em;
-}
-
-/* RTL */
-:host([_has-icon]) .ui5-badge-root[dir="rtl"] .ui5-badge-text {
-	padding-left: 0;
-	padding-right: 0.125em;
+	padding-inline-start: 0.125rem;
 }
 
 /* Scheme 1 */
@@ -83,16 +75,6 @@
 	color: var(--ui5-badge-color-scheme-1-color);
 }
 
-:host([color-scheme="1"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-1-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-1-shadow);
-}
-
-:host([active][color-scheme="1"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-1-active-shadow);
-	color: var(--ui5-badge-color-scheme-1-active-color);
-}
-
 /* Scheme 2 */
 :host([color-scheme="2"]) {
 	background-color: var(--ui5-badge-color-scheme-2-background);
@@ -100,16 +82,6 @@
 	color: var(--ui5-badge-color-scheme-2-color);
 }
 
-:host([color-scheme="2"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-2-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-2-shadow);
-}
-
-:host([active][color-scheme="2"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-2-active-shadow);
-	color: var(--ui5-badge-color-scheme-2-active-color);
-}
-
 /* Scheme 3 */
 :host([color-scheme="3"]) {
 	background-color: var(--ui5-badge-color-scheme-3-background);
@@ -117,16 +89,6 @@
 	color: var(--ui5-badge-color-scheme-3-color);
 }
 
-:host([color-scheme="3"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-3-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-3-shadow);
-}
-
-:host([active][color-scheme="3"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-3-active-shadow);
-	color: var(--ui5-badge-color-scheme-3-active-color);
-}
-
 /* Scheme 4 */
 :host([color-scheme="4"]) {
 	background-color: var(--ui5-badge-color-scheme-4-background);
@@ -134,16 +96,6 @@
 	color: var(--ui5-badge-color-scheme-4-color);
 }
 
-:host([color-scheme="4"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-4-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-4-shadow);
-}
-
-:host([active][color-scheme="4"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-4-active-shadow);
-	color: var(--ui5-badge-color-scheme-4-active-color);
-}
-
 /* Scheme 5 */
 :host([color-scheme="5"]) {
 	background-color: var(--ui5-badge-color-scheme-5-background);
@@ -151,16 +103,6 @@
 	color: var(--ui5-badge-color-scheme-5-color);
 }
 
-:host([color-scheme="5"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-5-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-5-shadow);
-}
-
-:host([active][color-scheme="5"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-5-active-shadow);
-	color: var(--ui5-badge-color-scheme-5-active-color);
-}
-
 /* Scheme 6 */
 :host([color-scheme="6"]) {
 	background-color: var(--ui5-badge-color-scheme-6-background);
@@ -168,16 +110,6 @@
 	color: var(--ui5-badge-color-scheme-6-color);
 }
 
-:host([color-scheme="6"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-6-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-6-shadow);
-}
-
-:host([active][color-scheme="6"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-6-active-shadow);
-	color: var(--ui5-badge-color-scheme-6-active-color);
-}
-
 /* Scheme 7 */
 :host([color-scheme="7"]) {
 	background-color: var(--ui5-badge-color-scheme-7-background);
@@ -185,16 +117,6 @@
 	color: var(--ui5-badge-color-scheme-7-color);
 }
 
-:host([color-scheme="7"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-7-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-7-shadow);
-}
-
-:host([active][color-scheme="7"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-7-active-shadow);
-	color: var(--ui5-badge-color-scheme-7-active-color);
-}
-
 /* Scheme 8 */
 :host([color-scheme="8"]) {
 	background-color: var(--ui5-badge-color-scheme-8-background);
@@ -202,16 +124,6 @@
 	color: var(--ui5-badge-color-scheme-8-color);
 }
 
-:host([color-scheme="8"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-8-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-8-shadow);
-}
-
-:host([active][color-scheme="8"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-8-active-shadow);
-	color: var(--ui5-badge-color-scheme-8-active-color);
-}
-
 /* Scheme 9 */
 :host([color-scheme="9"]) {
 	background-color: var(--ui5-badge-color-scheme-9-background);
@@ -219,29 +131,9 @@
 	color: var(--ui5-badge-color-scheme-9-color);
 }
 
-:host([color-scheme="9"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-9-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-9-shadow);
-}
-
-:host([active][color-scheme="9"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-9-active-shadow);
-	color: var(--ui5-badge-color-scheme-9-active-color);
-}
-
 /* Scheme 10 */
 :host([color-scheme="10"]) {
 	background-color: var(--ui5-badge-color-scheme-10-background);
 	border-color: var(--ui5-badge-color-scheme-10-border);
 	color: var(--ui5-badge-color-scheme-10-color);
 }
-
-:host([color-scheme="10"]:hover) {
-	background-color: var(--ui5-badge-color-scheme-10-hover-background);
-	box-shadow: var(--ui5-badge-color-scheme-10-shadow);
-}
-
-:host([active][color-scheme="10"]:hover) {
-	box-shadow: var(--ui5-badge-color-scheme-10-active-shadow);
-	color: var(--ui5-badge-color-scheme-10-active-color);
-}

package/src/themes/Breadcrumbs.css

@@ -25,8 +25,8 @@
 }
 
 .ui5-breadcrumbs-current-location > span:focus {
-	outline-offset: -1px;
-	outline: 1px dotted var(--sapContent_FocusColor);
+    outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+    border-radius: var(--_ui5_breadcrumbs_current_location_focus_border_radius);
 }
 
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden] {
@@ -41,6 +41,10 @@
     color: var(--sapLinkColor);
 }
 
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon] {
+    color: var(--_ui5_link_focus_color);
+}
+
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]::before {
     content: "...";
     vertical-align: middle;

package/src/themes/BreadcrumbsPopover.css

@@ -1,3 +1,7 @@
+.ui5-breadcrumbs-popover::part(content) {
+    padding: 0;
+}
+
 .ui5-breadcrumbs-popover-footer {
     display: flex;
     justify-content: flex-end;