@ui5/webcomponents 2.11.0-rc.2 → 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

@@ -277,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 {

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/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/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,55 +0,0 @@
-import Avatar from "../../src/Avatar.js";
-import Tag from "../../src/Tag.js";
-import Icon from "../../src/Icon.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);
-	});
-
-	it("doesn't fire ui5-click event, when disabled property is set", () => {
-		cy.mount(
-			<div>
-				<Avatar interactive disabled initials="JD" id="diabled-avatar" onClick={increment}>
-				<Tag slot="badge">
-					<Icon slot="icon" name="accelerated"></Icon>
-				</Tag>
-				</Avatar>
-				<input value="0" id="click-event" />
-			</div>
-		);
-
-		function increment() {
-			const input = document.getElementById("click-event") as HTMLInputElement;
-			input.value = "1";
-		}
-		cy.get("#diabled-avatar").realClick();
-		cy.get("#click-event").should("have.value", "0");
-	});
-});

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]);
-    });
-});