@ui5/webcomponents-fiori 2.24.0-rc.3 → 2.24.2

package/dist/vscode.html-custom-data.json

@@ -1463,6 +1463,11 @@
       "name": "ui5-user-menu",
       "description": "### Overview\n\nThe `ui5-user-menu` is an SAP Fiori specific web component that is used in `ui5-shellbar`\nand allows the user to easily see information and settings for the current user and all other logged in accounts.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserMenu.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";` (for `ui5-user-menu-item`)\n\n\n---\n\n\n\n\n### **Events:**\n - **avatar-click** - Fired when the account avatar is selected.\n- **change-account** - Fired when the account is switched to a different one.\n- **close** - Fired when a user menu is close.\n- **edit-accounts-click** - Fired when the \"Edit Accounts\" button is selected.\n- **item-click** - Fired when a menu item is selected.\n- **manage-account-click** - Fired when the \"Manage Account\" button is selected.\n- **open** - Fired when a user menu is open.\n- **sign-out-click** - Fired when the \"Sign Out\" button is selected.\n\n### **Slots:**\n - **accounts** - Defines the user accounts.\n\n**Note:** If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless\nthere is an item with `selected` property set to `true`.\n- **default** - Defines the menu items.\n- **footer** - Defines custom footer content.\n\n**Note:** When provided, replaces the default \"Sign Out\" button. Use an empty element to hide the footer completely.\n- **infoArea** - Defines the content of the info area inside the User Menu's account block.\n\n**Note:** When empty, the User Menu renders unchanged.",
       "attributes": [
+        {
+          "name": "avatar-interactive",
+          "description": "Defines whether the avatar of the selected account is interactive (focusable and pressable).\n\nWhen `false` (default), the avatar is rendered as a non-interactive image\nand is not announced as a button by screen readers.\n\n**Note:** When `showEditButton` is set to `true`, the avatar is treated as interactive\nregardless of this property's value, to preserve the edit affordance.",
+          "values": []
+        },
         {
           "name": "open",
           "description": "Defines if the User Menu is opened.",

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-fiori",
-  "version": "2.24.0-rc.3",
+  "version": "2.24.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3428,6 +3428,11 @@
           "description": "### Overview\n\nThe `ui5-user-menu` is an SAP Fiori specific web component that is used in `ui5-shellbar`\nand allows the user to easily see information and settings for the current user and all other logged in accounts.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/UserMenu.js\";`\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";` (for `ui5-user-menu-item`)\n---\n\n\n### **Events:**\n - **avatar-click** - Fired when the account avatar is selected.\n- **change-account** - Fired when the account is switched to a different one.\n- **close** - Fired when a user menu is close.\n- **edit-accounts-click** - Fired when the \"Edit Accounts\" button is selected.\n- **item-click** - Fired when a menu item is selected.\n- **manage-account-click** - Fired when the \"Manage Account\" button is selected.\n- **open** - Fired when a user menu is open.\n- **sign-out-click** - Fired when the \"Sign Out\" button is selected.\n\n### **Slots:**\n - **accounts** - Defines the user accounts.\n\n**Note:** If one item is used, it will be shown as the selected one. If more than one item is used, the first one will be shown as selected unless\nthere is an item with `selected` property set to `true`.\n- **default** - Defines the menu items.\n- **footer** - Defines custom footer content.\n\n**Note:** When provided, replaces the default \"Sign Out\" button. Use an empty element to hide the footer completely.\n- **infoArea** - Defines the content of the info area inside the User Menu's account block.\n\n**Note:** When empty, the User Menu renders unchanged.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "avatar-interactive",
+              "description": "Defines whether the avatar of the selected account is interactive (focusable and pressable).\n\nWhen `false` (default), the avatar is rendered as a non-interactive image\nand is not announced as a button by screen readers.\n\n**Note:** When `showEditButton` is set to `true`, the avatar is treated as interactive\nregardless of this property's value, to preserve the edit affordance.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "open",
               "description": "Defines if the User Menu is opened.",
@@ -3513,6 +3518,11 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "avatar-interactive",
+                "description": "Defines whether the avatar of the selected account is interactive (focusable and pressable).\n\nWhen `false` (default), the avatar is rendered as a non-interactive image\nand is not announced as a button by screen readers.\n\n**Note:** When `showEditButton` is set to `true`, the avatar is treated as interactive\nregardless of this property's value, to preserve the edit affordance.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "open",
                 "description": "Defines if the User Menu is opened.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "2.24.0-rc.3",
+  "version": "2.24.2",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -54,20 +54,20 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.24.0-rc.3",
-    "@ui5/webcomponents-base": "2.24.0-rc.3",
-    "@ui5/webcomponents-icons": "2.24.0-rc.3",
-    "@ui5/webcomponents-theming": "2.24.0-rc.3",
+    "@ui5/webcomponents": "2.24.2",
+    "@ui5/webcomponents-base": "2.24.2",
+    "@ui5/webcomponents-icons": "2.24.2",
+    "@ui5/webcomponents-theming": "2.24.2",
     "@zxing/library": "^0.21.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.24.0-rc.3",
+    "@ui5/webcomponents-tools": "2.24.2",
     "cypress": "15.9.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "yarn": "^1.22.22"
   },
-  "gitHead": "4e2fcc7b63a5a9156ecb89f839a698f2a59743b2"
+  "gitHead": "d2839e0e479bccb85bd3810650aaa25428873016"
 }

package/src/FlexibleColumnLayoutTemplate.tsx

@@ -29,11 +29,12 @@ export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout)
 
 			<div
 				role={this.accStartSeparatorRole}
-				title={this.accStartSeparatorText}
+				aria-label={this.accStartSeparatorText}
 				class="ui5-fcl-separator ui5-fcl-separator-start"
 				style={{ display: this.showStartSeparator ? "flex" : "none" }}
 				tabindex={this.startSeparatorTabIndex}
 				aria-valuenow={this.startSeparatorValue}
+				aria-orientation="vertical"
 				onMouseDown={this.onSeparatorPress}
 				onTouchStart={this.onSeparatorPress}
 				onKeyDown={this._onSeparatorKeydown}
@@ -60,11 +61,12 @@ export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout)
 
 			<div
 				role={this.accEndSeparatorRole}
-				title={this.accEndSeparatorText}
+				aria-label={this.accEndSeparatorText}
 				class="ui5-fcl-separator ui5-fcl-separator-end"
 				style={{ display: this.showEndSeparator ? "flex" : "none" }}
 				tabindex={this.endSeparatorTabIndex}
 				aria-valuenow={this.endSeparatorValue}
+				aria-orientation="vertical"
 				onMouseDown={this.onSeparatorPress}
 				onTouchStart={this.onSeparatorPress}
 				onKeyDown={this._onSeparatorKeydown}

package/src/SearchPopoverTemplate.tsx

@@ -40,7 +40,7 @@ export default function SearchPopoverTemplate(this: Search, headerTemplate?: Jsx
 			{isPhone() ? (headerTemplate ? headerTemplate.call(this) : (
 				<>
 					<header slot="header" class="ui5-search-popup-searching-header">
-						<Input class="ui5-search-popover-search-field" onInput={this._handleMobileInput} showClearIcon={this.showClearIcon} noTypeahead={this.noTypeahead} hint={InputKeyHint.Search} onKeyDown={this._onMobileInputKeydown}>
+						<Input value={this.value} class="ui5-search-popover-search-field" onInput={this._handleMobileInput} showClearIcon={this.showClearIcon} noTypeahead={this.noTypeahead} hint={InputKeyHint.Search} onKeyDown={this._onMobileInputKeydown}>
 							{this._flattenItems.map(item => {
 								return (<SuggestionItem text={item.text}></SuggestionItem>);
 							})}

package/src/ShellBarItemTemplate.tsx

@@ -12,6 +12,7 @@ export default function ShellBarItemTemplate(this: ShellBarItem) {
 				data-count={this.count}
 				data-ui5-stable={this.stableDomRef}
 				accessibilityAttributes={this.accessibilityAttributes}
+				onClick={this.fireClickEvent}
 			>
 				{this.text}
 			</ListItemStandard>

package/src/UserMenuTemplate.tsx

@@ -106,7 +106,7 @@ function headerContent(this: UserMenu) {
 		{this._selectedAccount &&
 			<div class="ui5-user-menu-selected-account" aria-label={this._ariaLabelledByAccountInformationText}>
 				<span title={this.showEditButton ? this._editAvatarTooltip : undefined}>
-					<Avatar size="L" onClick={this._handleAvatarClick} initials={this._selectedAccount._initials} colorScheme={this._selectedAccount.avatarColorScheme} fallbackIcon={personPlaceholder} class="ui5-user-menu-selected-account-avatar" interactive>
+					<Avatar size="L" onClick={this._isAvatarInteractive ? this._handleAvatarClick : undefined} initials={this._selectedAccount._initials} colorScheme={this._selectedAccount.avatarColorScheme} fallbackIcon={personPlaceholder} class="ui5-user-menu-selected-account-avatar" mode={this._isAvatarInteractive ? "Interactive" : "Image"}>
 						{this._selectedAccount.avatarSrc &&
 							<img src={this._selectedAccount.avatarSrc}/>
 						}

package/src/themes/DynamicPage.css

@@ -83,21 +83,19 @@
 
 /* Responsive paddings */
 
-/* S Size */
-@container (max-width: 599px) {
-    .ui5-dynamic-page-fit-content {
-        padding: var(--_ui5_dynamic_page_content_padding_S);
-    }
-    ::slotted([slot="titleArea"]) {
-        padding: var(--_ui5_dynamic_page_title_padding_S);
-    }
-    ::slotted([slot="headerArea"]) {
-        padding: var(--_ui5_dynamic_page_header_padding_S);
-    }
+/* S Size (default, no container query needed) */
+.ui5-dynamic-page-fit-content {
+    padding: var(--_ui5_dynamic_page_content_padding_S);
+}
+::slotted([slot="titleArea"]) {
+    padding: var(--_ui5_dynamic_page_title_padding_S);
+}
+::slotted([slot="headerArea"]) {
+    padding: var(--_ui5_dynamic_page_header_padding_S);
 }
 
 /* M Size */
-@container (min-width: 600px) and (max-width: 1023px) {
+@container (min-width: 600px) {
     .ui5-dynamic-page-fit-content {
         padding: var(--_ui5_dynamic_page_content_padding_M);
     }
@@ -110,7 +108,7 @@
 }
 
 /* L Size */
-@container (min-width: 1024px) and (max-width: 1439px) {
+@container (min-width: 1024px) {
     .ui5-dynamic-page-fit-content {
         padding: var(--_ui5_dynamic_page_content_padding_L);
     }