@ui5/webcomponents 2.7.0-rc.2 → 2.7.1

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents",
-  "version": "2.7.0-rc.2",
+  "version": "2.7.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3785,7 +3785,7 @@
         },
         {
           "name": "ui5-list",
-          "description": "### Overview\n\nThe `ui5-list` component allows displaying a list of items, advanced keyboard\nhandling support for navigating between items, and predefined modes to improve the development efficiency.\n\nThe `ui5-list` is a container for the available list items:\n\n- `ui5-li`\n- `ui5-li-custom`\n- `ui5-li-group`\n\nTo benefit from the built-in selection mechanism, you can use the available\nselection modes, such as\n`Single`, `Multiple` and `Delete`.\n\nAdditionally, the `ui5-list` provides header, footer, and customization for the list item separators.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-list` provides advanced keyboard handling.\nWhen a list is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Up] or [Down] - Navigates up and down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete),\nwhen the `selectionMode` property is in use:\n\n- [Space] - Select an item (if `type` is 'Active') when `selectionMode` is selection\n- [Delete] - Delete an item if `selectionMode` property is `Delete`\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/List.js\";`\n\n`import \"@ui5/webcomponents/dist/ListItemStandard.js\";` (for `ui5-li`)\n\n`import \"@ui5/webcomponents/dist/ListItemCustom.js\";` (for `ui5-li-custom`)\n\n`import \"@ui5/webcomponents/dist/ListItemGroup.js\";` (for `ui5-li-group`)\n---\n\n\n### **Events:**\n - **item-click** - Fired when an item is activated, unless the item's `type` property\nis set to `Inactive`.\n- **item-close** - Fired when the `Close` button of any item is clicked\n\n**Note:** This event is only applicable to list items that can be closed (such as notification list items),\nnot to be confused with `item-delete`.\n- **item-toggle** - Fired when the `Toggle` button of any item is clicked.\n\n**Note:** This event is only applicable to list items that can be toggled (such as notification group list items).\n- **item-delete** - Fired when the Delete button of any item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `selectionMode` property is set to `Delete`.\n- **selection-change** - Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` selection modes.\n- **load-more** - Fired when the user scrolls to the bottom of the list.\n\n**Note:** The event is fired when the `growing='Scroll'` property is enabled.\n- **move-over** - Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n- **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n\n**Note:** Use `ui5-li`, `ui5-li-custom`, and `ui5-li-group` for the intended design.\n- **header** - Defines the component header.\n\n**Note:** When `header` is set, the\n`headerText` property is ignored.\n\n### **CSS Parts:**\n - **growing-button** - Used to style the button, that is used for growing of the component\n- **growing-button-inner** - Used to style the button inner element",
+          "description": "### Overview\n\nThe `ui5-list` component allows displaying a list of items, advanced keyboard\nhandling support for navigating between items, and predefined modes to improve the development efficiency.\n\nThe `ui5-list` is a container for the available list items:\n\n- `ui5-li`\n- `ui5-li-custom`\n- `ui5-li-group`\n\nTo benefit from the built-in selection mechanism, you can use the available\nselection modes, such as\n`Single`, `Multiple` and `Delete`.\n\nAdditionally, the `ui5-list` provides header, footer, and customization for the list item separators.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-list` provides advanced keyboard handling.\nWhen a list is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Up] or [Down] - Navigates up and down the items\n- [Home] - Navigates to first item\n- [End] - Navigates to the last item\n\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete),\nwhen the `selectionMode` property is in use:\n\n- [Space] - Select an item (if `type` is 'Active') when `selectionMode` is selection\n- [Delete] - Delete an item if `selectionMode` property is `Delete`\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/List.js\";`\n\n`import \"@ui5/webcomponents/dist/ListItemStandard.js\";` (for `ui5-li`)\n\n`import \"@ui5/webcomponents/dist/ListItemCustom.js\";` (for `ui5-li-custom`)\n\n`import \"@ui5/webcomponents/dist/ListItemGroup.js\";` (for `ui5-li-group`)\n---\n\n\n### **Events:**\n - **item-click** - Fired when an item is activated, unless the item's `type` property\nis set to `Inactive`.\n\n**Note**: This event is not triggered by interactions with selection components such as the checkboxes and radio buttons,\nassociated with non-default `selectionMode` values, or if any other **interactive** component\n(such as a button or input) within the list item is directly clicked.\n- **item-close** - Fired when the `Close` button of any item is clicked\n\n**Note:** This event is only applicable to list items that can be closed (such as notification list items),\nnot to be confused with `item-delete`.\n- **item-toggle** - Fired when the `Toggle` button of any item is clicked.\n\n**Note:** This event is only applicable to list items that can be toggled (such as notification group list items).\n- **item-delete** - Fired when the Delete button of any item is pressed.\n\n**Note:** A Delete button is displayed on each item,\nwhen the component `selectionMode` property is set to `Delete`.\n- **selection-change** - Fired when selection is changed by user interaction\nin `Single`, `SingleStart`, `SingleEnd` and `Multiple` selection modes.\n- **load-more** - Fired when the user scrolls to the bottom of the list.\n\n**Note:** The event is fired when the `growing='Scroll'` property is enabled.\n- **move-over** - Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n- **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n\n**Note:** Use `ui5-li`, `ui5-li-custom`, and `ui5-li-group` for the intended design.\n- **header** - Defines the component header.\n\n**Note:** When `header` is set, the\n`headerText` property is ignored.\n\n### **CSS Parts:**\n - **growing-button** - Used to style the button, that is used for growing of the component\n- **growing-button-inner** - Used to style the button inner element",
           "doc-url": "",
           "attributes": [
             {
@@ -3894,7 +3894,7 @@
           "events": [
             {
               "name": "item-click",
-              "description": "Fired when an item is activated, unless the item's `type` property\nis set to `Inactive`."
+              "description": "Fired when an item is activated, unless the item's `type` property\nis set to `Inactive`.\n\n**Note**: This event is not triggered by interactions with selection components such as the checkboxes and radio buttons,\nassociated with non-default `selectionMode` values, or if any other **interactive** component\n(such as a button or input) within the list item is directly clicked."
             },
             {
               "name": "item-close",
@@ -4015,7 +4015,7 @@
             "events": [
               {
                 "name": "item-click",
-                "description": "Fired when an item is activated, unless the item's `type` property\nis set to `Inactive`."
+                "description": "Fired when an item is activated, unless the item's `type` property\nis set to `Inactive`.\n\n**Note**: This event is not triggered by interactions with selection components such as the checkboxes and radio buttons,\nassociated with non-default `selectionMode` values, or if any other **interactive** component\n(such as a button or input) within the list item is directly clicked."
               },
               {
                 "name": "item-close",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.7.0-rc.2",
+  "version": "2.7.1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -26,12 +26,14 @@
     "build": "wc-dev build",
     "bundle": "nps build.bundle",
     "test": "wc-dev test",
-    "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
     "test:suite-1": "wc-dev test-suite-1",
     "test:suite-2": "wc-dev test-suite-2",
     "test:cypress": "nps test-cy-ci",
+    "test:cypress:suite-1": "nps test-cy-ci-suite-1",
+    "test:cypress:suite-2": "nps test-cy-ci-suite-2",
     "test:cypress:open": "nps test-cy-open",
     "test:vitest": "yarn vitest run",
+    "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
     "create-ui5-element": "wc-create-ui5-element",
     "prepublishOnly": "tsc -b"
   },
@@ -51,19 +53,19 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.7.0-rc.2",
-    "@ui5/webcomponents-icons": "2.7.0-rc.2",
-    "@ui5/webcomponents-icons-business-suite": "2.7.0-rc.2",
-    "@ui5/webcomponents-icons-tnt": "2.7.0-rc.2",
-    "@ui5/webcomponents-localization": "2.7.0-rc.2",
-    "@ui5/webcomponents-theming": "2.7.0-rc.2"
+    "@ui5/webcomponents-base": "2.7.1",
+    "@ui5/webcomponents-icons": "2.7.1",
+    "@ui5/webcomponents-icons-business-suite": "2.7.1",
+    "@ui5/webcomponents-icons-tnt": "2.7.1",
+    "@ui5/webcomponents-localization": "2.7.1",
+    "@ui5/webcomponents-theming": "2.7.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.7.0-rc.2",
+    "@ui5/webcomponents-tools": "2.7.1",
     "chromedriver": "^131.0.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vitest": "^3.0.2"
   },
-  "gitHead": "26546e81e1e1e3c9186a9540b979ec7032a8cf95"
+  "gitHead": "ac15553f68d3e22b4a3a70203976dbf1bb916724"
 }

package/src/DayPickerTemplate.tsx

@@ -42,6 +42,7 @@ export default function DayPickerTemplate(this: DayPicker) {
 										data-sap-focus-ref={day.focusRef ? "true" : undefined}
 										data-sap-timestamp={day.timestamp}
 										role="gridcell"
+										title={day.tooltip}
 										aria-selected={day.ariaSelected}
 										aria-label={day.ariaLabel}
 										aria-disabled={day.ariaDisabled}

package/src/MenuItemTemplate.tsx

@@ -35,16 +35,6 @@ function listItemContent(this: MenuItem) {
 		{this.text && <div class="ui5-menu-item-text">{this.text}</div>}
 
 		{rightContent.call(this)}
-
-		{this.hasSubmenu && (
-			<div class="ui5-menu-item-submenu-icon" >
-				<Icon
-					part="subicon"
-					name={slimArrowRight}
-					class="ui5-menu-item-icon-end"
-				/>
-			</div>
-		)}
 	</>);
 }
 

package/src/SelectPopoverTemplate.tsx

@@ -99,7 +99,7 @@ function valueStateMessage(this: Select) {
 		<>
 			{this.shouldDisplayDefaultValueStateMessage
 				? this.valueStateText
-				: <slot name="valueStateMessage"></slot>
+				: <slot onClick={this._applyFocus} name="valueStateMessage"></slot>
 			}
 		</>
 	);

package/src/TableGrowing.hbs

@@ -1,19 +1,17 @@
-{{#if _hasGrowingButton}}
-	<div
-		id="growing-button"
-		tabindex="-1"
-		?active="{{_activeState}}"
-		@click="{{loadMore}}"
-		@keydown="{{_onKeydown}}"
-		@keyup="{{_onKeyup}}"
-		@focusout="{{_onFocusout}}"
-		role="button"
-		aria-labelledby="growing-text growing-subtext"
-		aria-describedby="growing-description">
-		<span id="growing-text">{{_growingButtonText}}</span>
-		{{#if growingSubText}}
-			<span id="growing-subtext">{{growingSubText}}</span>
-		{{/if}}
-		<span id="growing-description" style="display: none;" aria-hidden="true">{{_growingButtonDescription}}</span>
-	</div>
-{{/if}}
+<div
+	id="growing-button"
+	tabindex="-1"
+	?active="{{_activeState}}"
+	@click="{{loadMore}}"
+	@keydown="{{_onKeydown}}"
+	@keyup="{{_onKeyup}}"
+	@focusout="{{_onFocusout}}"
+	role="button"
+	aria-labelledby="growing-text growing-subtext"
+	aria-describedby="growing-description">
+	<span id="growing-text">{{_growingButtonText}}</span>
+	{{#if growingSubText}}
+		<span id="growing-subtext">{{growingSubText}}</span>
+	{{/if}}
+	<span id="growing-description" style="display: none;" aria-hidden="true">{{_growingButtonDescription}}</span>
+</div>

package/src/i18n/messagebundle_en_US_saprigi.properties

@@ -384,8 +384,6 @@ MENU_CLOSE_BUTTON_ARIA_LABEL=‌‌​‌​​‍‌‌‍​‍‌‌
 
 MENU_POPOVER_ACCESSIBLE_NAME=‌​‍​‍​​​‌​‍‍‍‍‌‍​‌‌‍​‌​‌‌‌‍​‌​‍​‍‍​‌​‍​‍‌Select an option from the menu
 
-NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=‍‌‍‍​‌​‍​‍​‌‌‍​‍‍​​​​‌​‍‌‌‍‍​‌‍‍​‍​‍‌‍Navigation
-
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=‍‌‌‍​‌‌‍‌‌​‍​​​‌‌​‍​‍‌‌‍‍‌‍‍‌​‍​‌​‌‌‍‍‍‍Interactive Header
 
 DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=‍‍​‍‍‍‌‍‍‍‌‍‍‌‍‌‌‌‍‌‍​​‍‍‌​‌‍‌‍​‍​‌‌​‍‍​Use Shift+Arrow keys to resize

package/src/themes/DayPicker.css

@@ -87,6 +87,7 @@
 	font-size: var(--sapFontSize);
 	border: var(--_ui5_daypicker_item_border);
 	border-radius: var(--_ui5_daypicker_item_border_radius);
+	cursor: pointer;
 }
 
 .ui5-dp-item:hover {

package/src/themes/MenuItem.css

@@ -108,6 +108,10 @@
 	inset-inline-end: var(--_ui5_menu_item_submenu_icon_right);
 }
 
+.ui5-menu-item-submenu-icon .ui5-menu-item-icon-end {
+	color: var(--sapContent_NonInteractiveIconColor);
+}
+
 .ui5-menu-item-dummy-icon {
 	min-width: var(--_ui5_list_item_icon_size);
 	min-height: var(--_ui5_list_item_icon_size);
@@ -115,4 +119,4 @@
 	vertical-align: middle;
 	padding-inline-end: 0.5rem;
 	pointer-events: none;
-}
+}

package/cypress/specs/ColorPalette.cy.ts

@@ -1,46 +0,0 @@
-import { html } from "lit";
-import "../../src/ColorPalette.js";
-import "../../src/ColorPaletteItem.js";
-
-describe("Color Palette tests", () => {
-	it("internal color picker should have selected color set on open", () => {
-		cy.mount(html`<ui5-color-palette show-more-colors show-recent-colors>
-<ui5-color-palette-item id="named" value="red"></ui5-color-palette-item>
-<ui5-color-palette-item id="rgba" value="rgba(0, 255, 0, 0.5)"></ui5-color-palette-item>
-<ui5-color-palette-item id="rgb" value="rgb(0,0,255)"></ui5-color-palette-item>
-<ui5-color-palette-item id="hex" value="#C0FFEE"></ui5-color-palette-item>
-</ui5-color-palette>`);
-
-		cy.get("ui5-color-palette")
-			.ui5ColorPaletteCheckSelectedColor("#named", {
-				r: "255",
-				g: "0",
-				b: "0",
-				a: "1",
-			});
-
-		cy.get("ui5-color-palette")
-			.ui5ColorPaletteCheckSelectedColor("#rgba", {
-				r: "0",
-				g: "255",
-				b: "0",
-				a: "0.5",
-			});
-
-		cy.get("ui5-color-palette")
-			.ui5ColorPaletteCheckSelectedColor("#rgb", {
-				r: "0",
-				g: "0",
-				b: "255",
-				a: "1",
-			});
-
-		cy.get("ui5-color-palette")
-			.ui5ColorPaletteCheckSelectedColor("#hex", {
-				r: "192",
-				g: "255",
-				b: "238",
-				a: "1",
-			});
-	});
-});

package/cypress/specs/MessageStrip.cy.ts

@@ -1,91 +0,0 @@
-import { html } from "lit";
-import "../../src/MessageStrip.js";
-import {
-	MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION,
-	MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM,
-	MESSAGE_STRIP_INFORMATION,
-	MESSAGE_STRIP_CLOSABLE,
-	MESSAGE_STRIP_CUSTOM,
-} from "../../src/generated/i18n/i18n-defaults.js";
-
-describe("API", () => {
-	it("tests close event", () => {
-		cy.mount(html`<ui5-message-strip>MessageStrip</ui5-message-strip>`);
-
-		cy.get("[ui5-message-strip]").then($strip => {
-			$strip.get(0).addEventListener("close", cy.stub().as("close"));
-		});
-
-		cy.get("[ui5-message-strip]")
-			.shadow()
-			.find(".ui5-message-strip-close-button")
-			.as("closeButton");
-
-		cy.get("@closeButton")
-			.realClick();
-
-		cy.get("@closeButton")
-			.realPress("Space");
-
-		cy.get("@closeButton")
-			.realPress("Enter");
-
-		cy.get("@close").should("have.callCount", 3);
-	});
-
-	it("Message strip is rendered without icon when design changes from default to a specific color set and scheme", () => {
-		cy.mount(html`<ui5-message-strip >MessageStrip w/ default properties</ui5-message-strip>`);
-
-		cy.get("[ui5-message-strip]")
-			.invoke("prop", "design", "ColorSet1")
-			.invoke("prop", "colorScheme", "1");
-
-		cy.get("[ui5-message-strip]")
-			.shadow()
-			.find("ui5-icon")
-			.should("not.exist");
-	});
-
-	it("should display the correct tooltip text for different designs", () => {
-		const designs = [
-		  {
-				design: "Information",
-				btnText: MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION.defaultText,
-		  },
-		  {
-				design: "ColorSet1",
-				btnText: MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM.defaultText,
-		  },
-		];
-
-		designs.forEach(({ design, btnText }) => {
-		  cy.mount(html`<ui5-message-strip class="top" design="${design}">${design} design with icon and close button:</ui5-message-strip>`);
-
-		  cy.get("[ui5-message-strip]")
-				.shadow()
-				.find("ui5-button")
-				.shadow()
-				.find("button")
-				.should("have.attr", "title", btnText);
-		});
-	});
-});
-
-describe("Accessibility", () => {
-	it("Test hidden text element content", () => {
-		cy.mount(html`
-			<ui5-message-strip id="messageStrip">Hello World!</ui5-message-strip>
-			<ui5-message-strip id="colorSet1ColorScheme1" design="ColorSet1" color-scheme="1" class="top"><ui5-icon name="palette" slot="icon"></ui5-icon>Color Set 1 - color-scheme 1</ui5-message-strip>
-		`);
-
-		cy.get("#messageStrip")
-			.shadow()
-			.find(".ui5-hidden-text")
-			.should("have.text", `${MESSAGE_STRIP_INFORMATION.defaultText} ${MESSAGE_STRIP_CLOSABLE.defaultText}`);
-
-		cy.get("#colorSet1ColorScheme1")
-			.shadow()
-			.find(".ui5-hidden-text")
-			.should("have.text", `${MESSAGE_STRIP_CUSTOM.defaultText} ${MESSAGE_STRIP_CLOSABLE.defaultText}`);
-	});
-});

package/cypress/specs/RTL.cy.ts

@@ -1,17 +0,0 @@
-import { html } from "lit";
-import "../../src/CheckBox.js";
-
-describe("RTL", () => {
-	it("tests effectiveDir", () => {
-		cy.mount(html`<section dir="rtl">
-	<ui5-checkbox id="cbRTL" text="Click me"></ui5-checkbox>
-	<ui5-checkbox id="cbLTR" text="This checkbox however defines dir=ltr" dir="ltr"></ui5-checkbox>
-</section>`);
-
-		cy.get("#cbRTL")
-			.should("have.prop", "effectiveDir", "rtl");
-
-		cy.get("#cbLTR")
-			.should("have.prop", "effectiveDir", "ltr");
-	});
-});