@ui5/webcomponents 2.11.0-rc.1 → 2.11.0-rc.3

package/src/i18n/messagebundle_th.properties

@@ -51,6 +51,10 @@ BUTTON_ARIA_TYPE_EMPHASIZED=เน้น
 
 BUTTON_ARIA_TYPE_ATTENTION=คำเตือน
 
+BUTTON_BADGE_ONE_ITEM={0} รายการ
+
+BUTTON_BADGE_MANY_ITEMS={0} รายการ
+
 CAL_LEGEND_TODAY_TEXT=วันนี้
 
 CAL_LEGEND_SELECTED_TEXT=วันที่เลือก
@@ -409,6 +413,8 @@ TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=ตัวเลือกเพิ่มเต
 
 TOOLBAR_POPOVER_AVAILABLE_VALUES=ค่าที่มีอยู่
 
+FORM_ACCESSIBLE_NAME=แบบฟอร์ม
+
 FORM_CHECKABLE_REQUIRED=กรุณาเลือกเช็คบ็อกซ์นี้ถ้าคุณต้องการดำเนินการต่อ
 
 FORM_MIXED_TEXTFIELD_REQUIRED=กรุณาเติมข้อมูลในฟิลด์นี้หรือเลือกรายการในลิสต์

package/src/i18n/messagebundle_tr.properties

@@ -51,6 +51,10 @@ BUTTON_ARIA_TYPE_EMPHASIZED=Vurgulandı
 
 BUTTON_ARIA_TYPE_ATTENTION=Uyarı
 
+BUTTON_BADGE_ONE_ITEM={0} öğe
+
+BUTTON_BADGE_MANY_ITEMS={0} öğe
+
 CAL_LEGEND_TODAY_TEXT=Bugün
 
 CAL_LEGEND_SELECTED_TEXT=Seçilen gün
@@ -409,6 +413,8 @@ TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=Ek seçenekler
 
 TOOLBAR_POPOVER_AVAILABLE_VALUES=Kullanılabilir değerler
 
+FORM_ACCESSIBLE_NAME=Form
+
 FORM_CHECKABLE_REQUIRED=Devam etmek istiyorsanız bu kutuyu işaretleyin.
 
 FORM_MIXED_TEXTFIELD_REQUIRED=Bu alanı doldurun veya listeden bir öğe seçin.

package/src/i18n/messagebundle_uk.properties

@@ -51,6 +51,10 @@ BUTTON_ARIA_TYPE_EMPHASIZED=Виділено
 
 BUTTON_ARIA_TYPE_ATTENTION=Застереження
 
+BUTTON_BADGE_ONE_ITEM={0} позиція
+
+BUTTON_BADGE_MANY_ITEMS={0} позицій
+
 CAL_LEGEND_TODAY_TEXT=Сьогодні
 
 CAL_LEGEND_SELECTED_TEXT=Вибраний день
@@ -101,7 +105,7 @@ COLORPICKER_BLUE=Синій
 
 COLORPICKER_HUE=Відтінок
 
-COLORPICKER_SATURATION=Насиченність
+COLORPICKER_SATURATION=Насиченість
 
 COLORPICKER_LIGHT=Світлий
 
@@ -409,6 +413,8 @@ TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=Додаткові опції
 
 TOOLBAR_POPOVER_AVAILABLE_VALUES=Доступні значення
 
+FORM_ACCESSIBLE_NAME=Форма
+
 FORM_CHECKABLE_REQUIRED=Поставте галочку в цьому полі, якщо бажаєте продовжити.
 
 FORM_MIXED_TEXTFIELD_REQUIRED=Заповніть це поле або виберіть позицію у списку.

package/src/i18n/messagebundle_vi.properties

@@ -51,6 +51,10 @@ BUTTON_ARIA_TYPE_EMPHASIZED=Được nhấn mạnh
 
 BUTTON_ARIA_TYPE_ATTENTION=Cảnh báo
 
+BUTTON_BADGE_ONE_ITEM={0} mục
+
+BUTTON_BADGE_MANY_ITEMS={0} mục
+
 CAL_LEGEND_TODAY_TEXT=Hôm nay
 
 CAL_LEGEND_SELECTED_TEXT=Ngày được chọn
@@ -409,6 +413,8 @@ TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=Tùy chọn bổ sung
 
 TOOLBAR_POPOVER_AVAILABLE_VALUES=Giá trị có sẵn
 
+FORM_ACCESSIBLE_NAME=Biểu mẫu
+
 FORM_CHECKABLE_REQUIRED=Vui lòng đánh dấu vào ô này nếu bạn muốn tiến hành.
 
 FORM_MIXED_TEXTFIELD_REQUIRED=Vui lòng điền vào trường này hoặc chọn một mục trong danh sách.

package/src/i18n/messagebundle_zh_CN.properties

@@ -51,6 +51,10 @@ BUTTON_ARIA_TYPE_EMPHASIZED=加重
 
 BUTTON_ARIA_TYPE_ATTENTION=警告
 
+BUTTON_BADGE_ONE_ITEM={0} 个项目
+
+BUTTON_BADGE_MANY_ITEMS={0} 个项目
+
 CAL_LEGEND_TODAY_TEXT=今天
 
 CAL_LEGEND_SELECTED_TEXT=选定日
@@ -409,6 +413,8 @@ TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=附加选项
 
 TOOLBAR_POPOVER_AVAILABLE_VALUES=可用值 
 
+FORM_ACCESSIBLE_NAME=表单
+
 FORM_CHECKABLE_REQUIRED=如果要继续，请勾选此框。
 
 FORM_MIXED_TEXTFIELD_REQUIRED=请填写此字段或在列表中选择一项。

package/src/i18n/messagebundle_zh_TW.properties

@@ -51,6 +51,10 @@ BUTTON_ARIA_TYPE_EMPHASIZED=強調
 
 BUTTON_ARIA_TYPE_ATTENTION=警告
 
+BUTTON_BADGE_ONE_ITEM={0} 個項目
+
+BUTTON_BADGE_MANY_ITEMS={0} 個項目
+
 CAL_LEGEND_TODAY_TEXT=今天
 
 CAL_LEGEND_SELECTED_TEXT=選取的日期
@@ -409,6 +413,8 @@ TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=附加選項
 
 TOOLBAR_POPOVER_AVAILABLE_VALUES=可用值
 
+FORM_ACCESSIBLE_NAME=表單
+
 FORM_CHECKABLE_REQUIRED=若您要繼續，請勾選此方塊。
 
 FORM_MIXED_TEXTFIELD_REQUIRED=請填寫此欄位或在清單中選擇項目。

package/src/themes/Avatar.css

@@ -32,6 +32,7 @@
 
 :host([disabled]) {
 	opacity: var(--sapContent_DisabledOpacity);
+	pointer-events: none;
 }
 
 :host {
@@ -276,8 +277,8 @@
 
 :host([_has-image]) {
 	color: var(--ui5-avatar-accent10-color);
+	border: var(--ui5-avatar-optional-border);
 	background-color: transparent;
-	vertical-align: middle;
 }
 
 .ui5-avatar-initials {
@@ -302,7 +303,6 @@
 
 /* Slotted Badge */
 ::slotted([slot="badge"]) {
-	pointer-events: initial;
 	position: absolute;
 	bottom: 0;
 	right: 0;
@@ -315,6 +315,10 @@
 	--_ui5-tag-height: 1.125rem;
 }
 
+:host(:not([disabled])) ::slotted([slot="badge"]) {
+	pointer-events: initial;
+}
+
 :host([_size="L"]) ::slotted([slot="badge"]),
 :host([size="L"]) ::slotted([slot="badge"]) {
 	width: 1.25rem;

package/src/themes/CheckBox.css

@@ -9,15 +9,6 @@
 	vertical-align: middle;
 }
 
-:host([required]) .ui5-checkbox-label:after {
-	content:"*";
-	margin-inline-start: .125rem;
-	color: var(--sapField_RequiredColor);
-	font-size: var(--sapFontLargeSize);
-	font-family: var(--sapFontFamily);
-	font-weight: bold;
-}
-
 :host {
 	overflow: hidden;
 	max-width: 100%;

package/src/themes/ColorPaletteItem.css

@@ -66,7 +66,7 @@
 	outline: none;
 }
 
-:host(:not([_disabled]):not([on-phone]):focus) .ui5-cp-item {
+:host(:not([_disabled]):not([on-phone]):focus:not(:hover)) .ui5-cp-item {
 	pointer-events: none;
 }
 
@@ -90,7 +90,7 @@
 	pointer-events: none;
 }
 
-:host(:not([_disabled]):not([on-phone]):hover:focus) .ui5-cp-item:focus:not(:hover)::before {
+:host(:not([_disabled]):not([on-phone]):focus:hover) .ui5-cp-item::before {
 	content: "";
 	box-sizing: border-box;
 	position: absolute;
@@ -100,7 +100,7 @@
 	pointer-events: none;
 }
 
-:host(:not([_disabled]):not([on-phone]):focus:not(:hover)) .ui5-cp-item:focus:not(:hover)::after {
+:host(:not([_disabled]):not([on-phone]):focus:hover) .ui5-cp-item::after {
 	content: "";
 	box-sizing: border-box;
 	position: absolute;

package/src/themes/ListItem.css

@@ -167,15 +167,15 @@
 	margin-top: var(--_ui5_list_item_selection_btn_margin_top);
 }
 
-:host([ui5-li][_selection-mode="SingleStart"]) .ui5-li-root {
+:host([_selection-mode="SingleStart"][wrapping-type]) .ui5-li-root {
 	padding-inline: 0 1rem;
 }
 
-:host([ui5-li][_selection-mode="Multiple"]) .ui5-li-root {
+:host([_selection-mode="Multiple"][wrapping-type]) .ui5-li-root {
 	padding-inline: 0 1rem;
 }
 
-:host([ui5-li][_selection-mode="SingleEnd"]) .ui5-li-root {
+:host([_selection-mode="SingleEnd"][wrapping-type]) .ui5-li-root {
 	padding-inline: 1rem 0;
 }
 

package/src/themes/ListItemCustom.css

@@ -29,3 +29,15 @@
 [ui5-radio-button].ui5-li-singlesel-radiobtn {
 	min-width: var(--_ui5_custom_list_item_rb_min_width);
 }
+
+:host([_selection-mode="SingleStart"]) .ui5-li-root.ui5-custom-li-root {
+	padding-inline: 0 1rem;
+}
+
+:host([_selection-mode="Multiple"]) .ui5-li-root.ui5-custom-li-root {
+	padding-inline: 0 1rem;
+}
+
+:host([_selection-mode="SingleEnd"]) .ui5-li-root.ui5-custom-li-root {
+	padding-inline: 1rem 0;
+}

package/src/themes/PopupsCommon.css

@@ -23,7 +23,6 @@
 }
 
 .ui5-popup-root .ui5-popup-header-root {
-    color: var(--sapPageHeader_TextColor);
     box-shadow: var(--_ui5_popup_header_shadow);
     border-bottom: var(--_ui5_popup_header_border);
 }
@@ -56,7 +55,9 @@
 }
 
 .ui5-popup-header-root .ui5-popup-header-text {
-	font-weight: var(--_ui5_popup_header_font_weight);
+	font-weight: var(--sapFontHeaderFamily);
+	font-size: var(--sapFontHeader5Size);
+	color: var(--sapPageHeader_TextColor);
 }
 
 .ui5-popup-content {

package/src/themes/TextArea.css

@@ -422,22 +422,6 @@
 	border-bottom-right-radius: var(--sapField_BorderCornerRadius);
 }
 
-:host([value-state="Negative"]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
-	background-color: var(--sapScrollBar_TrackColor);
-}
-
-:host([value-state="Critical"]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
-	background-color: var(--sapScrollBar_TrackColor);
-}
-
-:host([value-state="Information"]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
-	background-color: var(--sapScrollBar_TrackColor);
-}
-
-:host([value-state="Positive"]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
-	background-color: var(--sapScrollBar_TrackColor);
-}
-
 :host([focused]) .ui5-content-custom-scrollbars ::-webkit-scrollbar {
 	background-image: none;
 }

package/src/themes/base/Avatar-parameters.css

@@ -4,6 +4,7 @@
 	--ui5-avatar-border-radius: .25rem;
 	--ui5-avatar-border-radius-img-deduction: 0.0625rem;
 	--ui5-avatar-initials-border: none;
+	--ui5-avatar-optional-border: .0625rem solid var(--sapGroup_ContentBorderColor);
 	--ui5-avatar-accent1: var(--sapAccentColor1);
 	--ui5-avatar-accent2: var(--sapAccentColor2);
 	--ui5-avatar-accent3: var(--sapAccentColor3);

package/src/themes/base/PopupsCommon-parameters.css

@@ -6,7 +6,6 @@
 	--_ui5_popup_header_footer_padding_m_l: 2rem;
 	--_ui5_popup_header_footer_padding_xl: 3rem;
 	--_ui5_popup_viewport_margin: 10px;
-	--_ui5_popup_header_font_weight: 400;
 	--_ui5_popup_header_prop_header_text_alignment: flex-start;
 	--_ui5_popup_border_radius: var(--sapElement_BorderCornerRadius);
 	--_ui5_popup_header_background: var(--sapPageHeader_Background);

package/src/themes/base/rtl-parameters.css

@@ -17,7 +17,7 @@
 	--_ui5_menu_submenu_margin_offset: -0.25rem 0;
 	--_ui5_menu_submenu_placement_type_left_margin_offset: 0.25rem 0;
 
-	--_ui5-shellbar-notification-btn-count-offset: -0.125rem;
+	--_ui5-shellbar-notification-btn-count-offset: 0.125rem;
 }
 
 [dir="rtl"],

package/cypress/specs/Avatar.cy.tsx

@@ -1,33 +0,0 @@
-import Avatar from "../../src/Avatar.js";
-import "@ui5/webcomponents-icons/dist/supplier.js";
-
-describe("Accessibility", () => {
-	it("checks if initials of avatar are correctly announced", () => {
-		const INITIALS = "XS";
-
-		cy.mount(<Avatar id="interactive-avatar" initials={INITIALS} interactive></Avatar>);
-
-		// Store the expected label to compare against
-		const expectedLabel = `Avatar ${INITIALS}`;
-
-		// Check if the aria-label is correctly set
-		cy.get("#interactive-avatar")
-			.shadow()
-			.find(".ui5-avatar-root")
-			.should("have.attr", "aria-label", expectedLabel);
-	});
-
-	it("checks if accessible-name is correctly passed to the icon", () => {
-		const ACCESSIBLE_NAME = "Supplier Icon";
-		const ICON_NAME = "supplier";
-
-		cy.mount(<Avatar id="avatar-with-icon" icon={ICON_NAME} accessibleName={ACCESSIBLE_NAME}></Avatar>);
-
-		cy.get("#avatar-with-icon")
-			.shadow()
-			.find("ui5-icon")
-			.shadow()
-			.find("svg")
-			.should("have.attr", "aria-label", ACCESSIBLE_NAME);
-	});
-});

package/cypress/specs/AvatarGroup.cy.tsx

@@ -1,66 +0,0 @@
-import Avatar from "../../src/Avatar.js";
-import AvatarGroup from "../../src/AvatarGroup.js";
-
-describe("Overflow", () => {
-	it("checks if overflow button is hiding properly", () => {
-		cy.mount(<AvatarGroup id="ag" style="width: 100px;">
-			<Avatar initials="II"></Avatar>
-			<Avatar initials="II"></Avatar>
-			<Avatar initials="II"></Avatar>
-		</AvatarGroup>);
-
-		// Store the expected hidden items to compare against
-		const expectedHiddenItems = 0;
-
-		// Check if the aria-label is correctly set
-		cy.get("#ag")
-			.as("ag")
-			.then($el => {
-				$el.get(0).innerHTML = "";
-				return $el;
-			});
-
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
-		cy.get("@ag")
-			.then($el => {
-				const avatar = document.createElement("ui5-avatar");
-				avatar.setAttribute("initials", "II");
-				$el.get(0).appendChild(avatar);
-				const ag = document.querySelector("#ag") as AvatarGroup;
-				return ag._hiddenItems;
-			})
-			.should("equal", expectedHiddenItems);
-	});
-});
-
-describe("Avatars", () => {
-	it("checks if no unnecessary margin is applied of only one Avatar is available", () => {
-		cy.mount(<AvatarGroup id="ag2" type="Group">
-			<Avatar id="av1" initials="II"></Avatar>
-			<Avatar id="av2" initials="II"></Avatar>
-		</AvatarGroup>);
-
-		cy.get("#av2").invoke("remove");
-
-		cy.get("#av1")
-			.invoke("attr", "style")
-			.should("equal", "");
-	});
-
-
-	it("tests if _color-scheme attribute is automatically set to avatars", () => {
-		const avatarCount = 20;
-		cy.mount(<AvatarGroup id="ag" type="Group">
-			{Array.from({ length: avatarCount }, (_, i) => {
-				return <Avatar initials="II"></Avatar>;
-			})}
-		</AvatarGroup>);
-
-		Array.from({ length: avatarCount }, (_, i) => {
-			const index = (i % 10) + 1;
-			cy.get("ui5-avatar").eq(i).should("have.attr", "_color-scheme", `Accent${index}`);
-		});
-	});
-});

package/cypress/specs/Breadcrumbs.mobile.cy.tsx

@@ -1,53 +0,0 @@
-import Breadcrumbs from "../../src/Breadcrumbs.js";
-import BreadcrumbsItem from "../../src/BreadcrumbsItem.js";
-
-describe("Breadcrumbs mobile behavior", () => {
-    before(() => {
-        cy.ui5SimulateDevice("phone");
-    });
-
-    it("displays all items in the popover on mobile", () => {
-        const breadcrumbItems = [
-            "Products",
-            "Categories",
-            "Laptops",
-            "Gaming Laptops",
-            "XPS Pro"
-        ];
-
-        cy.mount(
-            <Breadcrumbs>
-                {breadcrumbItems.map((item, index) => (
-                    <BreadcrumbsItem key={index} href={`#${item}`}>{item}</BreadcrumbsItem>
-                ))}
-            </Breadcrumbs>
-        );
-
-        // Open the overflow popover by clicking on the dropdown arrow within shadow DOM
-        cy.get("ui5-breadcrumbs")
-            .shadow()
-            .find(".ui5-breadcrumbs-dropdown-arrow-link-wrapper ui5-link")
-            .click();
-
-        // Wait for the popover to be fully open
-        cy.get("ui5-breadcrumbs")
-            .shadow()
-            .find("ui5-responsive-popover")
-            .shadow()
-            .find("ui5-dialog")
-            .should("be.visible");
-
-        // Verify that all items are displayed in the popover
-        cy.get("ui5-breadcrumbs")
-            .shadow()
-            .find("ui5-responsive-popover ui5-list ui5-li")
-            .should("have.length", breadcrumbItems.length);
-
-        // Verify the items are in the correct order (reversed)
-        cy.get("ui5-breadcrumbs")
-            .shadow()
-            .find("ui5-responsive-popover ui5-list ui5-li")
-            .eq(0)
-            .should("contain.text", breadcrumbItems[breadcrumbItems.length - 1]);
-    });
-});