@ui5/webcomponents 2.16.0-rc.2 → 2.16.0-rc.3

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

@@ -614,7 +614,7 @@
     },
     {
       "name": "ui5-carousel",
-      "description": "### Overview\nThe Carousel allows the user to browse through a set of items.\nThe component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\nThere are several ways to perform navigation:\n\n- on desktop - the user can navigate using the navigation arrows or with keyboard shortcuts.\n- on touch devices - the user can navigate using the navigation arrows (always visible) or can use swipe gestures.\n\n### Usage\n\n#### When to use:\n\n- The items you want to display are very different from each other.\n- You want to display the items one after the other.\n\n#### When not to use:\n\n- The items you want to display need to be visible at the same time.\n- The items you want to display are uniform and very similar.\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-carousel` is focused the user can navigate between the items\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] - Navigates to previous and next item\n- [Left] or [Right] - Navigates to previous and next item\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\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Carousel.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **navigate** - Fired whenever the page changes due to user interaction,\nwhen the user clicks on the navigation arrows or while resizing,\nbased on the `items-per-page` property.\n\n### **Methods:**\n - **navigateTo(itemIndex: _number_)** - Changes the currently displayed page.\n\n### **Slots:**\n - **default** - Defines the content of the component.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component",
+      "description": "### Overview\nThe Carousel allows the user to browse through a set of items.\nThe component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\nThere are several ways to perform navigation:\n\n- on desktop - the user can navigate using the navigation arrows or with keyboard shortcuts.\n- on touch devices - the user can navigate using the navigation arrows (always visible) or can use swipe gestures.\n\n### Usage\n\n#### When to use:\n\n- The items you want to display are very different from each other.\n- You want to display the items one after the other.\n\n#### When not to use:\n\n- The items you want to display need to be visible at the same time.\n- The items you want to display are uniform and very similar.\n\n### Hidden Items\n\nCarousel items can be conditionally hidden by adding the `hidden` attribute to any child element.\nHidden items are automatically excluded from carousel navigation and will not be displayed or counted in pagination.\nThis allows for dynamic showing or hiding of carousel items without affecting the overall carousel behavior.\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-carousel` is focused the user can navigate between the items\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] - Navigates to previous and next item\n- [Left] or [Right] - Navigates to previous and next item\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\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Carousel.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **navigate** - Fired whenever the page changes due to user interaction,\nwhen the user clicks on the navigation arrows or while resizing,\nbased on the `items-per-page` property.\n\n### **Methods:**\n - **navigateTo(itemIndex: _number_)** - Changes the currently displayed page.\n\n### **Slots:**\n - **default** - Defines the content of the component.\n\n**Note:** Items with the `hidden` attribute will be automatically excluded from carousel navigation and page calculations.\nThey will not be displayed or accessible via keyboard navigation. See [sample](./#carousel-with-hidden-items).\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component",
       "attributes": [
         {
           "name": "accessible-name",
@@ -641,11 +641,6 @@
           "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.",
           "values": []
         },
-        {
-          "name": "_current-slide-index",
-          "description": "Defines the current first visible item in the viewport.\nDefault value is 0, which means the first item in the viewport.",
-          "values": []
-        },
         {
           "name": "hide-page-indicator",
           "description": "Defines the visibility of the page indicator.\nIf set to true the page indicator will be hidden.",
@@ -683,6 +678,11 @@
           "name": "arrows-placement",
           "description": "Defines the position of arrows.\n\nAvailable options are:\n\n- `Content` - the arrows are placed on the sides of the current page.\n- `Navigation` - the arrows are placed on the sides of the page indicator.",
           "values": [{ "name": "Content" }, { "name": "Navigation" }]
+        },
+        {
+          "name": "visible-items-indices",
+          "description": "The indices of the currently visible items of the component.",
+          "values": [{ "name": "any" }]
         }
       ],
       "references": []
@@ -2407,13 +2407,23 @@
           "description": "Indicates if the menu is open.",
           "values": []
         },
+        {
+          "name": "placement",
+          "description": "Determines on which side the component is placed at.",
+          "values": [
+            { "name": "Top" },
+            { "name": "Bottom" },
+            { "name": "Start" },
+            { "name": "End" }
+          ]
+        },
         {
           "name": "horizontal-align",
           "description": "Determines the horizontal alignment of the menu relative to its opener control.",
           "values": [
-            { "name": "Center" },
             { "name": "Start" },
             { "name": "End" },
+            { "name": "Center" },
             { "name": "Stretch" }
           ]
         },
@@ -2967,9 +2977,9 @@
           "name": "horizontal-align",
           "description": "Determines the horizontal alignment of the component.",
           "values": [
-            { "name": "Center" },
             { "name": "Start" },
             { "name": "End" },
+            { "name": "Center" },
             { "name": "Stretch" }
           ]
         },
@@ -3359,9 +3369,9 @@
           "name": "horizontal-align",
           "description": "Determines the horizontal alignment of the component.",
           "values": [
-            { "name": "Center" },
             { "name": "Start" },
             { "name": "End" },
+            { "name": "Center" },
             { "name": "Stretch" }
           ]
         },
@@ -4167,9 +4177,9 @@
           "name": "horizontal-align",
           "description": "Determines the horizontal alignment of table cells.",
           "values": [
-            { "name": "Center" },
             { "name": "Start" },
             { "name": "End" },
+            { "name": "Center" },
             { "name": "Left" },
             { "name": "Right" }
           ]
@@ -4185,9 +4195,9 @@
           "name": "horizontal-align",
           "description": "Determines the horizontal alignment of table cells.",
           "values": [
-            { "name": "Center" },
             { "name": "Start" },
             { "name": "End" },
+            { "name": "Center" },
             { "name": "Left" },
             { "name": "Right" }
           ]
@@ -4259,9 +4269,9 @@
           "name": "horizontal-align",
           "description": "Determines the horizontal alignment of table cells.",
           "values": [
-            { "name": "Center" },
             { "name": "Start" },
             { "name": "End" },
+            { "name": "Center" },
             { "name": "Left" },
             { "name": "Right" }
           ]

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.16.0-rc.2",
+  "version": "2.16.0-rc.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1161,7 +1161,7 @@
         },
         {
           "name": "ui5-carousel",
-          "description": "### Overview\nThe Carousel allows the user to browse through a set of items.\nThe component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\nThere are several ways to perform navigation:\n\n- on desktop - the user can navigate using the navigation arrows or with keyboard shortcuts.\n- on touch devices - the user can navigate using the navigation arrows (always visible) or can use swipe gestures.\n\n### Usage\n\n#### When to use:\n\n- The items you want to display are very different from each other.\n- You want to display the items one after the other.\n\n#### When not to use:\n\n- The items you want to display need to be visible at the same time.\n- The items you want to display are uniform and very similar.\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-carousel` is focused the user can navigate between the items\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] - Navigates to previous and next item\n- [Left] or [Right] - Navigates to previous and next item\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\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Carousel.js\";`\n---\n\n\n### **Events:**\n - **navigate** - Fired whenever the page changes due to user interaction,\nwhen the user clicks on the navigation arrows or while resizing,\nbased on the `items-per-page` property.\n\n### **Methods:**\n - **navigateTo(itemIndex: _number_)** - Changes the currently displayed page.\n\n### **Slots:**\n - **default** - Defines the content of the component.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component",
+          "description": "### Overview\nThe Carousel allows the user to browse through a set of items.\nThe component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\nThere are several ways to perform navigation:\n\n- on desktop - the user can navigate using the navigation arrows or with keyboard shortcuts.\n- on touch devices - the user can navigate using the navigation arrows (always visible) or can use swipe gestures.\n\n### Usage\n\n#### When to use:\n\n- The items you want to display are very different from each other.\n- You want to display the items one after the other.\n\n#### When not to use:\n\n- The items you want to display need to be visible at the same time.\n- The items you want to display are uniform and very similar.\n\n### Hidden Items\n\nCarousel items can be conditionally hidden by adding the `hidden` attribute to any child element.\nHidden items are automatically excluded from carousel navigation and will not be displayed or counted in pagination.\nThis allows for dynamic showing or hiding of carousel items without affecting the overall carousel behavior.\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-carousel` is focused the user can navigate between the items\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] - Navigates to previous and next item\n- [Left] or [Right] - Navigates to previous and next item\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\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Carousel.js\";`\n---\n\n\n### **Events:**\n - **navigate** - Fired whenever the page changes due to user interaction,\nwhen the user clicks on the navigation arrows or while resizing,\nbased on the `items-per-page` property.\n\n### **Methods:**\n - **navigateTo(itemIndex: _number_)** - Changes the currently displayed page.\n\n### **Slots:**\n - **default** - Defines the content of the component.\n\n**Note:** Items with the `hidden` attribute will be automatically excluded from carousel navigation and page calculations.\nThey will not be displayed or accessible via keyboard navigation. See [sample](./#carousel-with-hidden-items).\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component",
           "doc-url": "",
           "attributes": [
             {
@@ -1189,11 +1189,6 @@
               "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "_current-slide-index",
-              "description": "Defines the current first visible item in the viewport.\nDefault value is 0, which means the first item in the viewport.",
-              "value": { "type": "number", "default": "0" }
-            },
             {
               "name": "hide-page-indicator",
               "description": "Defines the visibility of the page indicator.\nIf set to true the page indicator will be hidden.",
@@ -1238,12 +1233,17 @@
                 "type": "\"Content\" | \"Navigation\"",
                 "default": "\"Content\""
               }
+            },
+            {
+              "name": "visible-items-indices",
+              "description": "The indices of the currently visible items of the component.",
+              "value": { "type": "any", "default": "[]" }
             }
           ],
           "slots": [
             {
               "name": "default",
-              "description": "Defines the content of the component."
+              "description": "Defines the content of the component.\n\n**Note:** Items with the `hidden` attribute will be automatically excluded from carousel navigation and page calculations.\nThey will not be displayed or accessible via keyboard navigation. See [sample](./#carousel-with-hidden-items)."
             }
           ],
           "events": [
@@ -1279,11 +1279,6 @@
                 "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.",
                 "value": { "type": "boolean" }
               },
-              {
-                "name": "_current-slide-index",
-                "description": "Defines the current first visible item in the viewport.\nDefault value is 0, which means the first item in the viewport.",
-                "value": { "type": "number" }
-              },
               {
                 "name": "hide-page-indicator",
                 "description": "Defines the visibility of the page indicator.\nIf set to true the page indicator will be hidden.",
@@ -1317,6 +1312,11 @@
                 "name": "arrows-placement",
                 "description": "Defines the position of arrows.\n\nAvailable options are:\n\n- `Content` - the arrows are placed on the sides of the current page.\n- `Navigation` - the arrows are placed on the sides of the page indicator.",
                 "value": { "type": "\"Content\" | \"Navigation\"" }
+              },
+              {
+                "name": "visible-items-indices",
+                "description": "The indices of the currently visible items of the component.",
+                "value": { "type": "any" }
               }
             ],
             "events": [
@@ -4965,11 +4965,19 @@
               "description": "Indicates if the menu is open.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "placement",
+              "description": "Determines on which side the component is placed at.",
+              "value": {
+                "type": "\"Top\" | \"Bottom\" | \"Start\" | \"End\"",
+                "default": "\"Bottom\""
+              }
+            },
             {
               "name": "horizontal-align",
               "description": "Determines the horizontal alignment of the menu relative to its opener control.",
               "value": {
-                "type": "\"Center\" | \"Start\" | \"End\" | \"Stretch\"",
+                "type": "\"Start\" | \"End\" | \"Center\" | \"Stretch\"",
                 "default": "\"Start\""
               }
             },
@@ -5032,11 +5040,18 @@
                 "description": "Indicates if the menu is open.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "placement",
+                "description": "Determines on which side the component is placed at.",
+                "value": {
+                  "type": "\"Top\" | \"Bottom\" | \"Start\" | \"End\""
+                }
+              },
               {
                 "name": "horizontal-align",
                 "description": "Determines the horizontal alignment of the menu relative to its opener control.",
                 "value": {
-                  "type": "\"Center\" | \"Start\" | \"End\" | \"Stretch\""
+                  "type": "\"Start\" | \"End\" | \"Center\" | \"Stretch\""
                 }
               },
               {
@@ -6331,7 +6346,7 @@
               "name": "horizontal-align",
               "description": "Determines the horizontal alignment of the component.",
               "value": {
-                "type": "\"Center\" | \"Start\" | \"End\" | \"Stretch\"",
+                "type": "\"Start\" | \"End\" | \"Center\" | \"Stretch\"",
                 "default": "\"Center\""
               }
             },
@@ -6462,7 +6477,7 @@
                 "name": "horizontal-align",
                 "description": "Determines the horizontal alignment of the component.",
                 "value": {
-                  "type": "\"Center\" | \"Start\" | \"End\" | \"Stretch\""
+                  "type": "\"Start\" | \"End\" | \"Center\" | \"Stretch\""
                 }
               },
               {
@@ -7053,7 +7068,7 @@
               "name": "horizontal-align",
               "description": "Determines the horizontal alignment of the component.",
               "value": {
-                "type": "\"Center\" | \"Start\" | \"End\" | \"Stretch\"",
+                "type": "\"Start\" | \"End\" | \"Center\" | \"Stretch\"",
                 "default": "\"Center\""
               }
             },
@@ -7184,7 +7199,7 @@
                 "name": "horizontal-align",
                 "description": "Determines the horizontal alignment of the component.",
                 "value": {
-                  "type": "\"Center\" | \"Start\" | \"End\" | \"Stretch\""
+                  "type": "\"Start\" | \"End\" | \"Center\" | \"Stretch\""
                 }
               },
               {
@@ -8830,7 +8845,7 @@
               "name": "horizontal-align",
               "description": "Determines the horizontal alignment of table cells.",
               "value": {
-                "type": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined",
+                "type": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined",
                 "default": "undefined"
               }
             }
@@ -8848,7 +8863,7 @@
                 "name": "horizontal-align",
                 "description": "Determines the horizontal alignment of table cells.",
                 "value": {
-                  "type": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined"
+                  "type": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined"
                 }
               }
             ],
@@ -8953,7 +8968,7 @@
               "name": "horizontal-align",
               "description": "Determines the horizontal alignment of table cells.",
               "value": {
-                "type": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined",
+                "type": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined",
                 "default": "undefined"
               }
             }
@@ -9005,7 +9020,7 @@
                 "name": "horizontal-align",
                 "description": "Determines the horizontal alignment of table cells.",
                 "value": {
-                  "type": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined"
+                  "type": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined"
                 }
               }
             ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.16.0-rc.2",
+  "version": "2.16.0-rc.3",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -52,17 +52,17 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.16.0-rc.2",
-    "@ui5/webcomponents-icons": "2.16.0-rc.2",
-    "@ui5/webcomponents-icons-business-suite": "2.16.0-rc.2",
-    "@ui5/webcomponents-icons-tnt": "2.16.0-rc.2",
-    "@ui5/webcomponents-localization": "2.16.0-rc.2",
-    "@ui5/webcomponents-theming": "2.16.0-rc.2"
+    "@ui5/webcomponents-base": "2.16.0-rc.3",
+    "@ui5/webcomponents-icons": "2.16.0-rc.3",
+    "@ui5/webcomponents-icons-business-suite": "2.16.0-rc.3",
+    "@ui5/webcomponents-icons-tnt": "2.16.0-rc.3",
+    "@ui5/webcomponents-localization": "2.16.0-rc.3",
+    "@ui5/webcomponents-theming": "2.16.0-rc.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.16.0-rc.2",
+    "@ui5/webcomponents-tools": "2.16.0-rc.3",
     "chokidar-cli": "^3.0.0",
     "cypress": "^15.3.0",
     "eslint": "^7.22.0",
@@ -71,5 +71,5 @@
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "f61ddd10e76c10e8bccaf7cb49266834878893ea"
+  "gitHead": "73762a2be34acc196e0f251c0b54f3559d02c1aa"
 }

package/src/MenuTemplate.tsx

@@ -10,7 +10,7 @@ export default function MenuTemplate(this: Menu) {
 		<ResponsivePopover
 			id={`${this._id}-menu-rp`}
 			class="ui5-menu-rp"
-			placement="Bottom"
+			placement={this.placement}
 			verticalAlign="Bottom"
 			horizontalAlign={this.horizontalAlign}
 			opener={this.opener}