@ui5/webcomponents 2.22.0-rc.5 → 2.22.0-rc.6

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.22.0-rc.5",
+  "version": "2.22.0-rc.6",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -4225,7 +4225,7 @@
         },
         {
           "name": "ui5-form",
-          "description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (< 600px) – 1 column is recommended (default: 1)\n- **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n- **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (> 1439px) – up to 6 columns are recommended (default: 3)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise  - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### Items Empty Span\n\nBy default, a form item spans 12 cells, fully divided between its label and field, with no empty space at the end:\n- **Label:** occupies 4 cells.\n- **Field:** occupies 8 cells.\n\nThe `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end.\n\n**For example:** Setting \"S0 M0 L3 XL3\" (or just \"L3 XL3\") adjusts the layout as follows:\n- **Label:** remains 4 cells.\n- **Field:** is reduced to 5 cells.\n- **Empty space:** 3 cells are added at the end.\n\nGreater values increase the empty space at the end of the form item, reducing the space available for the label and its field.\nHowever, setting `emptySpan` to 1 cell is recommended and typically sufficient to achieve a balanced layout.\n\n### Navigation flow\n\nThe Form component supports two layout options for keyboard navigation:\n\n#### Simple form\n\nIn this \"simple form\" layout, each `ui5-form-item` acts as a standalone group\nwith one item, so focus moves horizontally across the grid from one `ui5-form-item` to the next.\nThis layout is ideal for simpler forms and supports custom arrangements, e.g.,\n\n```\n| 1 | 2 |\n|   3   |\n| 4 | 5 |\n```\n\n#### Complex form\n\nIn this layout, items are grouped into `ui5-form-group` elements, allowing more complex configurations:\n\n- **Single-Column Group**: Focus moves vertically down from one item to the next.\n  ```\n  | 1 |\n  | 2 |\n  | 3 |\n  ```\n\n- **Multi-Column Group**: Focus moves horizontally within each row, advancing to the next row after completing the current one.\n  ```\n  | 1 | 4 |\n  | 2 | 5 |\n  | 3 | 6 |\n  ```\n\n### Keyboard Handling\n\n- [Tab] - Moves the focus to the next interactive element within the Form/FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [Tab] - Moves the focus to the previous interactive element within the Form/FormGroup (if available) or to the previous element in the tab chain outside the Form\n- [F6] - Moves the focus to the first interactive element of the next FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [F6] - Moves the focus to the first interactive element of the previous FormGroup (if available) or to the previous element in the tab chain outside the Form\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";\n---\n\n\n### **Slots:**\n - **default** - Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.\n- **header** - Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.\n\n### **CSS Parts:**\n - **column** - Used to style a single column of the form column layout.\n- **header** - Used to style the wrapper of the header.\n- **layout** - Used to style the element defining the form column layout.",
+          "description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (0 - 599px) – 1 column is recommended (default: 1)\n- **M** (600px - 1023px) – up to 2 columns are recommended (default: 1)\n- **L** (1024px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (>= 1440px) – up to 6 columns are recommended (default: 3)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise  - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### Items Empty Span\n\nBy default, a form item spans 12 cells, fully divided between its label and field, with no empty space at the end:\n- **Label:** occupies 4 cells.\n- **Field:** occupies 8 cells.\n\nThe `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end.\n\n**For example:** Setting \"S0 M0 L3 XL3\" (or just \"L3 XL3\") adjusts the layout as follows:\n- **Label:** remains 4 cells.\n- **Field:** is reduced to 5 cells.\n- **Empty space:** 3 cells are added at the end.\n\nGreater values increase the empty space at the end of the form item, reducing the space available for the label and its field.\nHowever, setting `emptySpan` to 1 cell is recommended and typically sufficient to achieve a balanced layout.\n\n### Navigation flow\n\nThe Form component supports two layout options for keyboard navigation:\n\n#### Simple form\n\nIn this \"simple form\" layout, each `ui5-form-item` acts as a standalone group\nwith one item, so focus moves horizontally across the grid from one `ui5-form-item` to the next.\nThis layout is ideal for simpler forms and supports custom arrangements, e.g.,\n\n```\n| 1 | 2 |\n|   3   |\n| 4 | 5 |\n```\n\n#### Complex form\n\nIn this layout, items are grouped into `ui5-form-group` elements, allowing more complex configurations:\n\n- **Single-Column Group**: Focus moves vertically down from one item to the next.\n  ```\n  | 1 |\n  | 2 |\n  | 3 |\n  ```\n\n- **Multi-Column Group**: Focus moves horizontally within each row, advancing to the next row after completing the current one.\n  ```\n  | 1 | 4 |\n  | 2 | 5 |\n  | 3 | 6 |\n  ```\n\n### Keyboard Handling\n\n- [Tab] - Moves the focus to the next interactive element within the Form/FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [Tab] - Moves the focus to the previous interactive element within the Form/FormGroup (if available) or to the previous element in the tab chain outside the Form\n- [F6] - Moves the focus to the first interactive element of the next FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [F6] - Moves the focus to the first interactive element of the previous FormGroup (if available) or to the previous element in the tab chain outside the Form\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";\n---\n\n\n### **Slots:**\n - **default** - Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.\n- **header** - Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.\n\n### **CSS Parts:**\n - **column** - Used to style a single column of the form column layout.\n- **header** - Used to style the wrapper of the header.\n- **layout** - Used to style the element defining the form column layout.",
           "doc-url": "",
           "attributes": [
             {
@@ -10338,6 +10338,79 @@
             "events": []
           }
         },
+        {
+          "name": "ui5-table-group-row",
+          "description": "### Overview\n\nThe `ui5-table-group-row` component represents a group header row in the `ui5-table`.\nIt is used to visually group rows and spans across all visible table columns.\n\n### Usage\n\nThe `ui5-table-group-row` is placed as a direct child of `ui5-table`, alongside `ui5-table-row` elements.\nRows following a group row are considered part of that group until the next group row.\n\n```html\n<ui5-table>\n  <ui5-table-header-row>...</ui5-table-header-row>\n  <ui5-table-group-row>Country: Germany</ui5-table-group-row>\n  <ui5-table-row>...</ui5-table-row>\n  <ui5-table-row>...</ui5-table-row>\n  <ui5-table-group-row>Country: France</ui5-table-group-row>\n  <ui5-table-row>...</ui5-table-row>\n</ui5-table>\n```\n\n### Unsupported Features\n\nThe following features of `ui5-table-row` are currently not supported by `ui5-table-group-row` and have no effect:\n\n- **Cells** (`cells` slot): Group rows render a single spanning cell with a text. Any slotted `ui5-table-cell` elements are ignored.\n- **Actions** (`actions` slot): Row actions such as `ui5-table-row-action` or `ui5-table-row-action-navigation` are not rendered.\n- **Navigation** (`navigated` property): The navigated indicator is not rendered on group rows.\n- **Interactive** (`interactive` property): Group rows do not support click/activation behavior.\n- **Selection** (`rowKey` property`): Group rows cannot be selected. They are excluded from select all and range selection operations.\n- **Virtualizer** (`position` property`): Group rows are not supported by the `ui5-table-virtualizer`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableGroupRow.js\";`\n---\n\n\n### **Slots:**\n - **actions** - Defines the actions of the component.\n\n**Note:** Use `ui5-table-row-action` or `ui5-table-row-action-navigation` for the intended design.\n- **default** - Defines the cells of the component.\n\n**Note:** Use `ui5-table-cell` for the intended design.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "interactive",
+              "description": "Defines the interactive state of the row.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "movable",
+              "description": "Defines whether the row is movable.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "navigated",
+              "description": "Defines the navigated state of the row.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "position",
+              "description": "Defines the 0-based position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.",
+              "value": { "type": "number | undefined", "default": "undefined" }
+            },
+            {
+              "name": "row-key",
+              "description": "Unique identifier of the row.\n\n**Note:** For selection features to work properly, this property is mandatory, and its value must not contain spaces.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "actions",
+              "description": "Defines the actions of the component.\n\n**Note:** Use `ui5-table-row-action` or `ui5-table-row-action-navigation` for the intended design."
+            },
+            {
+              "name": "default",
+              "description": "Defines the cells of the component.\n\n**Note:** Use `ui5-table-cell` for the intended design."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "interactive",
+                "description": "Defines the interactive state of the row.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "movable",
+                "description": "Defines whether the row is movable.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "navigated",
+                "description": "Defines the navigated state of the row.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "position",
+                "description": "Defines the 0-based position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.",
+                "value": { "type": "number | undefined" }
+              },
+              {
+                "name": "row-key",
+                "description": "Unique identifier of the row.\n\n**Note:** For selection features to work properly, this property is mandatory, and its value must not contain spaces.",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "ui5-table-growing",
           "description": "### Overview\n\nThe `ui5-table-growing` component is used inside the `ui5-table` to add a growing/data loading functionalities\nto the table.\n\nThe component offers two options:\n* Button - a More button is displayed, clicking it will load more data.\n* Scroll - additional data is loaded automatically when the user scrolls to the end of the table.\n\n### Usage\n\nThe `ui5-table-growing` component is only used inside the `ui5-table` component as a feature.\nIt has to be slotted inside the `ui5-table` in the `features` slot.\nThe component is not intended to be used as a standalone component.\n\n```html\n<ui5-table>\n\t<ui5-table-growing mode=\"Button\" text=\"More\" slot=\"features\"></ui5-table-growing>\n</ui5-table>\n```\n\n**Notes**:\n* When the `ui5-table-growing` component is used with the `Scroll` mode and the table is currently not scrollable,\nthe component will render a growing button instead to ensure growing capabilities until the table becomes scrollable.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableGrowing.js\";`\n---\n\n\n### **Events:**\n - **load-more** - Fired when the growing button is pressed or the user scrolls to the end of the table.",
@@ -10867,7 +10940,7 @@
         },
         {
           "name": "ui5-table-virtualizer",
-          "description": "### Overview\n\nThe `ui5-table-virtualizer` component is used inside the `ui5-table` to virtualize the table rows, if the `overflowMode` property of the table is set to 'Scroll'.\nIt is responsible for rendering only the rows that are visible in the viewport and updating them on scroll.\nThis allows large numbers of rows to exist, but maintain high performance by only paying the cost for those that are currently visible.\n\n**Note:** The maximum number of virtualized rows is limited by browser constraints, specifically the maximum supported height for a DOM element.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TableVirtualizer.js\";`\n---\n\n\n### **Events:**\n - **range-change** - Fired when the virtualizer is changed by user interaction e.g. on scrolling.\n\n### **Methods:**\n - **reset(): _void_** - Resets the virtualizer to its initial state and triggers the `range-change` event.",
+          "description": "### Overview\n\nThe `ui5-table-virtualizer` component is used inside the `ui5-table` to virtualize the table rows, if the `overflowMode` property of the table is set to 'Scroll'.\nIt is responsible for rendering only the rows that are visible in the viewport and updating them on scroll.\nThis allows large numbers of rows to exist, but maintain high performance by only paying the cost for those that are currently visible.\n\n**Note:** The maximum number of virtualized rows is limited by browser constraints, specifically the maximum supported height for a DOM element.\n**Note:** The `ui5-table-group-row` component is not supported by the virtualizer. Only `ui5-table-row` elements can be virtualized.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TableVirtualizer.js\";`\n---\n\n\n### **Events:**\n - **range-change** - Fired when the virtualizer is changed by user interaction e.g. on scrolling.\n\n### **Methods:**\n - **reset(): _void_** - Resets the virtualizer to its initial state and triggers the `range-change` event.",
           "doc-url": "",
           "attributes": [
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.22.0-rc.5",
+  "version": "2.22.0-rc.6",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,22 +54,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.22.0-rc.5",
-    "@ui5/webcomponents-icons": "2.22.0-rc.5",
-    "@ui5/webcomponents-icons-business-suite": "2.22.0-rc.5",
-    "@ui5/webcomponents-icons-tnt": "2.22.0-rc.5",
-    "@ui5/webcomponents-localization": "2.22.0-rc.5",
-    "@ui5/webcomponents-theming": "2.22.0-rc.5"
+    "@ui5/webcomponents-base": "2.22.0-rc.6",
+    "@ui5/webcomponents-icons": "2.22.0-rc.6",
+    "@ui5/webcomponents-icons-business-suite": "2.22.0-rc.6",
+    "@ui5/webcomponents-icons-tnt": "2.22.0-rc.6",
+    "@ui5/webcomponents-localization": "2.22.0-rc.6",
+    "@ui5/webcomponents-theming": "2.22.0-rc.6"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.22.0-rc.5",
+    "@ui5/webcomponents-tools": "2.22.0-rc.6",
     "cypress": "15.9.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "f42d27cb7d91aad64df6bf51b3b4cc02d5972b2f"
+  "gitHead": "02b74836f3c8fd461ab38ac2195b158ac4eac1a7"
 }

package/src/ListItemTemplate.tsx

@@ -154,8 +154,6 @@ function selectionElement(this: ListItem) {
 						) : (
 							<Button
 								part="delete-button"
-								tabindex={-1}
-								data-sap-no-tab-ref
 								id={`${this._id}-deleteSelectionElement`}
 								design="Transparent"
 								icon={declineIcon}

package/src/TableGroupRowTemplate.tsx

@@ -0,0 +1,24 @@
+import TableCell from "./TableCell.js";
+import type TableGroupRow from "./TableGroupRow.js";
+
+export default function TableGroupRowTemplate(this: TableGroupRow) {
+	return (
+		<>
+			<TableCell id="group-cell"
+				aria-colindex={1}
+				aria-colspan={this._ariaColSpan}
+				data-excluded-from-navigation={true}
+			>
+				<slot></slot>
+			</TableCell>
+
+			{ this._renderDummyCell &&
+				<TableCell id="dummy-cell"
+					role="none"
+					aria-hidden={true}
+					data-excluded-from-navigation="nofocus"
+				></TableCell>
+			}
+		</>
+	);
+}

package/src/i18n/messagebundle.properties

@@ -884,6 +884,8 @@ TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=Select All Checkbox
 TABLE_COLUMNHEADER_CLEARALL_DESCRIPTION=Clear All Button
 #XACT: ARIA announcement of a table row
 TABLE_ROW=Row
+#XACT: ARIA roledescription for a group row in the table
+TABLE_GROUP_ROW=Group Row
 #XACT: Description for the popin containing column header
 TABLE_ROW_POPIN=Row Popin
 #XACT: ARIA announcement for the position of a row among all table rows

package/src/i18n/messagebundle_ar.properties

@@ -149,6 +149,8 @@ DATEPICKER_OPEN_ICON_TITLE_OPENED=إغلاق أداة الانتقاء
 
 DATEPICKER_DATE_DESCRIPTION=إدخال التاريخ
 
+DATEPICKER_MOBILE_HEADER_TITLE=أدخل تاريخًا
+
 DATEPICKER_VALUE_MISSING=أدخل التاريخ بالتنسيق التالي: {0}.
 
 DATEPICKER_PATTERN_MISSMATCH=هذا التنسيق غير مدعوم. أدخل نطاق تواريخ ووقت بالتنسيق التالي: {0}.
@@ -177,7 +179,7 @@ DATERANGE_OVERFLOW=أدخل قيمة أقل من القيمة القصوى لـ
 
 DATERANGE_UNDERFLOW=أدخل قيمة أعلى من القيمة الدنيا لـ {0}.
 
-DATEPICKER_POPOVER_ACCESSIBLE_NAME=اختيار تاريخ لـ {0}
+DATEPICKER_POPOVER_ACCESSIBLE_NAME=أدخل تاريخًا لـ {0}
 
 DATETIME_COMPONENTS_PLACEHOLDER_PREFIX=على سبيل المثال
 
@@ -234,6 +236,10 @@ INPUT_SUGGESTIONS_MORE_HITS={0} النتائج متوفرة
 
 INPUT_SUGGESTIONS_NO_HIT=لا توجد نتائج
 
+INPUT_SUGGESTIONS_EXPANDED=موسَّع
+
+INPUT_SUGGESTIONS_COLLAPSED=مطوي
+
 INPUT_CLEAR_ICON_ACC_NAME=مسح
 
 INPUT_SUGGESTIONS_OK_BUTTON=موافق
@@ -244,6 +250,8 @@ LINK_SUBTLE=غامض
 
 LINK_EMPHASIZED=مؤكد
 
+LIST_ROLE_DESCRIPTION=قائمة ببنود تفاعلية. للانتقال إلى المحتوى، اضغط F2.
+
 LIST_ITEM_ACTIVE=نشط
 
 LIST_ITEM_POSITION=بند القائمة {0} لـ {1}
@@ -286,7 +294,7 @@ MESSAGE_STRIP_WARNING=شريط رسالة التحذير
 
 MESSAGE_STRIP_SUCCESS=شريط رسالة النجاح
 
-MESSAGE_STRIP_INFORMATION=شريط الرسالة
+MESSAGE_STRIP_INFORMATION=شريط الرسائل
 
 MESSAGE_STRIP_CUSTOM=شريط الرسالة المخصصة
 
@@ -318,9 +326,9 @@ PANEL_ICON=توسيع/طي
 
 RANGE_SLIDER_ARIA_DESCRIPTION=النطاق
 
-RANGE_SLIDER_START_HANDLE_DESCRIPTION=المؤشر الأيمن
+RANGE_SLIDER_START_HANDLE_DESCRIPTION=الحد الأدنى
 
-RANGE_SLIDER_END_HANDLE_DESCRIPTION=المؤشر الأيسر
+RANGE_SLIDER_END_HANDLE_DESCRIPTION=الحد الأقصى
 
 RATING_INDICATOR_TOOLTIP_TEXT=التصنيف
 
@@ -418,7 +426,7 @@ DATETIME_PICKER_TIME_BUTTON=الوقت
 
 TOKEN_ARIA_DELETABLE=قابل للحذف
 
-TOKEN_ARIA_REMOVE=إزالة
+TOKEN_ARIA_DELETE=حذف
 
 TOKEN_ARIA_LABEL=الرمز المميز
 
@@ -432,7 +440,7 @@ TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS=يحتوى على {0} من الرموز ا
 
 TOKENIZER_ARIA_LABEL=عارض الرموز المميزة
 
-TOKENIZER_SHOW_ALL_ITEMS={0} من البنود
+TOKENIZER_SHOW_ALL_ITEMS={0} من العناصر
 
 TOKENIZER_CLEAR_ALL=مسح الكل
 
@@ -476,6 +484,10 @@ CALENDAR_HEADER_YEAR_BUTTON=السنة {0}
 
 CALENDAR_HEADER_YEAR_RANGE_BUTTON=نطاق السنة من {0} إلى {1}
 
+CALENDAR_FOOTER_CANCEL_BUTTON=إلغاء
+
+CALENDAR_FOOTER_OK_BUTTON=موافق
+
 CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT=F4
 
 CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT=Shift + F4
@@ -548,6 +560,10 @@ MENU_ITEM_GROUP_SINGLE_ACCESSIBLE_NAME=توجد بنود قابلة للتحدي
 
 MENU_ITEM_GROUP_MULTI_ACCESSIBLE_NAME=توجد بنود قابلة للتحديد المتعدد
 
+MENU_ITEM_END_CONTENT_ACCESSIBLE_NAME=الإجراءات الإضافية
+
+MENU_ITEM_LOADING=تحميل
+
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=مقدمة تفاعلية
 
 DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=استخدام مفاتيح Shift+Arrow لتغيير الحجم
@@ -678,6 +694,10 @@ DYNAMIC_DATE_RANGE_NEXT_COMBINED_TEXT=X {0} التالي (متضمن)
 
 DYNAMIC_DATE_RANGE_INCLUDED_TEXT=(متضمن)
 
+SWITCH_ON=تشغيل
+
+SWITCH_OFF=إيقاف
+
 ICON_ARIA_TYPE_IMAGE=الصورة
 
 ICON_ARIA_TYPE_INTERACTIVE=الزر

package/src/i18n/messagebundle_bg.properties

@@ -149,6 +149,8 @@ DATEPICKER_OPEN_ICON_TITLE_OPENED=Затваряне на средството
 
 DATEPICKER_DATE_DESCRIPTION=Въвеждане на дата
 
+DATEPICKER_MOBILE_HEADER_TITLE=Въведете дата
+
 DATEPICKER_VALUE_MISSING=Въведете датата в следния формат: {0}.
 
 DATEPICKER_PATTERN_MISSMATCH=Форматът не се поддържа. Въведете времевия диапазон в следния формат: {0}.
@@ -177,7 +179,7 @@ DATERANGE_OVERFLOW=Въведете стойност, по-малка от ма
 
 DATERANGE_UNDERFLOW=Въведете стойност, по-голяма от минималната стойност на {0}.
 
-DATEPICKER_POPOVER_ACCESSIBLE_NAME=Избор на дата за {0}
+DATEPICKER_POPOVER_ACCESSIBLE_NAME=Въведете дата за {0}
 
 DATETIME_COMPONENTS_PLACEHOLDER_PREFIX=например
 
@@ -234,6 +236,10 @@ INPUT_SUGGESTIONS_MORE_HITS={0} резултата са налични
 
 INPUT_SUGGESTIONS_NO_HIT=Няма резултати
 
+INPUT_SUGGESTIONS_EXPANDED=Разгърнато
+
+INPUT_SUGGESTIONS_COLLAPSED=Свито
+
 INPUT_CLEAR_ICON_ACC_NAME=Изчистване
 
 INPUT_SUGGESTIONS_OK_BUTTON=ОК
@@ -244,6 +250,8 @@ LINK_SUBTLE=Блед
 
 LINK_EMPHASIZED=Подчертано
 
+LIST_ROLE_DESCRIPTION=Списък с интерактивни позиции. За да преминете към съдържанието, натиснете F2.
+
 LIST_ITEM_ACTIVE=Активно
 
 LIST_ITEM_POSITION=Позиция от списък {0} от {1}
@@ -318,9 +326,9 @@ PANEL_ICON=Разширяване/скриване
 
 RANGE_SLIDER_ARIA_DESCRIPTION=Диапазон
 
-RANGE_SLIDER_START_HANDLE_DESCRIPTION=Ляв регулатор
+RANGE_SLIDER_START_HANDLE_DESCRIPTION=Минимум
 
-RANGE_SLIDER_END_HANDLE_DESCRIPTION=Десен регулатор
+RANGE_SLIDER_END_HANDLE_DESCRIPTION=Максимум
 
 RATING_INDICATOR_TOOLTIP_TEXT=Оценка
 
@@ -418,7 +426,7 @@ DATETIME_PICKER_TIME_BUTTON=Час
 
 TOKEN_ARIA_DELETABLE=С възможност за изтриване
 
-TOKEN_ARIA_REMOVE=Премахване
+TOKEN_ARIA_DELETE=Изтриване
 
 TOKEN_ARIA_LABEL=Токен
 
@@ -476,6 +484,10 @@ CALENDAR_HEADER_YEAR_BUTTON=Година {0}
 
 CALENDAR_HEADER_YEAR_RANGE_BUTTON=Диапазон от години от {0} до {1}
 
+CALENDAR_FOOTER_CANCEL_BUTTON=Отказ
+
+CALENDAR_FOOTER_OK_BUTTON=ОК
+
 CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT=F4
 
 CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT=Shift + F4
@@ -548,6 +560,10 @@ MENU_ITEM_GROUP_SINGLE_ACCESSIBLE_NAME=Съдържа позиции, които
 
 MENU_ITEM_GROUP_MULTI_ACCESSIBLE_NAME=Съдържа позиции с възможност за множествен избор
 
+MENU_ITEM_END_CONTENT_ACCESSIBLE_NAME=Допълнителни действия
+
+MENU_ITEM_LOADING=Зареждане
+
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Интерактивно заглавие
 
 DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=Изберете Shift+стрелки, за да промените размера
@@ -678,6 +694,10 @@ DYNAMIC_DATE_RANGE_NEXT_COMBINED_TEXT=Следващите X {0} (включит
 
 DYNAMIC_DATE_RANGE_INCLUDED_TEXT=(Включено)
 
+SWITCH_ON=Включено
+
+SWITCH_OFF=Изключено
+
 ICON_ARIA_TYPE_IMAGE=Изображение
 
 ICON_ARIA_TYPE_INTERACTIVE=Бутон

package/src/i18n/messagebundle_ca.properties

@@ -149,6 +149,8 @@ DATEPICKER_OPEN_ICON_TITLE_OPENED=Tancar selector
 
 DATEPICKER_DATE_DESCRIPTION=Entrada de data
 
+DATEPICKER_MOBILE_HEADER_TITLE=Introduir data
+
 DATEPICKER_VALUE_MISSING=Introduïu la data amb el format següent: {0}.
 
 DATEPICKER_PATTERN_MISSMATCH=No s''admet aquest format. Introduïu l''interval de dates i hores amb el format següent: {0}.
@@ -177,7 +179,7 @@ DATERANGE_OVERFLOW=Introduïu un valor inferior al valor màxim de {0}.
 
 DATERANGE_UNDERFLOW=Introduïu un valor superior al valor mínim de {0}.
 
-DATEPICKER_POPOVER_ACCESSIBLE_NAME=Seleccionar data per a {0}
+DATEPICKER_POPOVER_ACCESSIBLE_NAME=Introduir data per a {0}
 
 DATETIME_COMPONENTS_PLACEHOLDER_PREFIX=Per exemple
 
@@ -234,6 +236,10 @@ INPUT_SUGGESTIONS_MORE_HITS={0} resultats disponibles
 
 INPUT_SUGGESTIONS_NO_HIT=Cap resultat
 
+INPUT_SUGGESTIONS_EXPANDED=Desplegat
+
+INPUT_SUGGESTIONS_COLLAPSED=Ocult
+
 INPUT_CLEAR_ICON_ACC_NAME=Esborrar
 
 INPUT_SUGGESTIONS_OK_BUTTON=D''acord
@@ -244,6 +250,8 @@ LINK_SUBTLE=Discret
 
 LINK_EMPHASIZED=Destacat
 
+LIST_ROLE_DESCRIPTION=Llista amb elements interactius. Per anar al contingut, premeu F2.
+
 LIST_ITEM_ACTIVE=Està actiu
 
 LIST_ITEM_POSITION=Element de llista {0} de {1}
@@ -318,9 +326,9 @@ PANEL_ICON=Ampliar/Comprimir
 
 RANGE_SLIDER_ARIA_DESCRIPTION=Interval
 
-RANGE_SLIDER_START_HANDLE_DESCRIPTION=Ansa esquerre
+RANGE_SLIDER_START_HANDLE_DESCRIPTION=Mínim
 
-RANGE_SLIDER_END_HANDLE_DESCRIPTION=Ansa dreta
+RANGE_SLIDER_END_HANDLE_DESCRIPTION=Màxim
 
 RATING_INDICATOR_TOOLTIP_TEXT=Valoració
 
@@ -418,7 +426,7 @@ DATETIME_PICKER_TIME_BUTTON=Hora
 
 TOKEN_ARIA_DELETABLE=Suprimible
 
-TOKEN_ARIA_REMOVE=Eliminar
+TOKEN_ARIA_DELETE=Suprimir
 
 TOKEN_ARIA_LABEL=Marca
 
@@ -476,6 +484,10 @@ CALENDAR_HEADER_YEAR_BUTTON=Any {0}
 
 CALENDAR_HEADER_YEAR_RANGE_BUTTON=Interval d''anys {0}-{1}
 
+CALENDAR_FOOTER_CANCEL_BUTTON=Cancel·lar
+
+CALENDAR_FOOTER_OK_BUTTON=D''acord
+
 CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT=F4
 
 CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT=Majús + F4
@@ -548,6 +560,10 @@ MENU_ITEM_GROUP_SINGLE_ACCESSIBLE_NAME=Conté elements que es poden seleccionar
 
 MENU_ITEM_GROUP_MULTI_ACCESSIBLE_NAME=Conté elements de selecció múltiple
 
+MENU_ITEM_END_CONTENT_ACCESSIBLE_NAME=Accions addicionals
+
+MENU_ITEM_LOADING=S''està carregant
+
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Capçalera interactiva
 
 DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=Utilitzeu les tecles Majús+fletxa per ajustar la mida
@@ -678,6 +694,10 @@ DYNAMIC_DATE_RANGE_NEXT_COMBINED_TEXT=Següents X {0} (inclosos)
 
 DYNAMIC_DATE_RANGE_INCLUDED_TEXT=(inclosos)
 
+SWITCH_ON=Activat
+
+SWITCH_OFF=Desactivat
+
 ICON_ARIA_TYPE_IMAGE=Imatge
 
 ICON_ARIA_TYPE_INTERACTIVE=Botó

package/src/i18n/messagebundle_cnr.properties

@@ -149,6 +149,8 @@ DATEPICKER_OPEN_ICON_TITLE_OPENED=Zatvori alat za odabir
 
 DATEPICKER_DATE_DESCRIPTION=Unos datuma
 
+DATEPICKER_MOBILE_HEADER_TITLE=Unesite datum
+
 DATEPICKER_VALUE_MISSING=Unesite datum u sljedećem formatu: {0}.
 
 DATEPICKER_PATTERN_MISSMATCH=Ovaj format nije podržan. Unesite raspon datuma i vremena u sljedećem formatu: {0}.
@@ -177,7 +179,7 @@ DATERANGE_OVERFLOW=Unesite vrijednost manju od maksimalne vrijednosti {0}.
 
 DATERANGE_UNDERFLOW=Unesite vrijednost veću od minimalne vrijednosti {0}.
 
-DATEPICKER_POPOVER_ACCESSIBLE_NAME=Izaberi datume za {0}
+DATEPICKER_POPOVER_ACCESSIBLE_NAME=Unesite datum za {0}
 
 DATETIME_COMPONENTS_PLACEHOLDER_PREFIX=npr.
 
@@ -234,6 +236,10 @@ INPUT_SUGGESTIONS_MORE_HITS={0} rezultata je dostupno
 
 INPUT_SUGGESTIONS_NO_HIT=Nema rezultata
 
+INPUT_SUGGESTIONS_EXPANDED=Prošireno
+
+INPUT_SUGGESTIONS_COLLAPSED=Sažeto
+
 INPUT_CLEAR_ICON_ACC_NAME=Poništi
 
 INPUT_SUGGESTIONS_OK_BUTTON=OK
@@ -244,6 +250,8 @@ LINK_SUBTLE=Suptilno
 
 LINK_EMPHASIZED=Naglašeno
 
+LIST_ROLE_DESCRIPTION=Lista sa interaktivnim stavkama. Da biste pomjerili sadržaj, pritisnite F2.
+
 LIST_ITEM_ACTIVE=Aktivno
 
 LIST_ITEM_POSITION=Stavke liste {0} od {1}
@@ -318,9 +326,9 @@ PANEL_ICON=Proširi/sažmi
 
 RANGE_SLIDER_ARIA_DESCRIPTION=Raspon
 
-RANGE_SLIDER_START_HANDLE_DESCRIPTION=Lijevi regulator
+RANGE_SLIDER_START_HANDLE_DESCRIPTION=Minimalno
 
-RANGE_SLIDER_END_HANDLE_DESCRIPTION=Desni regulator
+RANGE_SLIDER_END_HANDLE_DESCRIPTION=Maksimalno
 
 RATING_INDICATOR_TOOLTIP_TEXT=Vrednovanje
 
@@ -418,7 +426,7 @@ DATETIME_PICKER_TIME_BUTTON=Vrijeme
 
 TOKEN_ARIA_DELETABLE=Može se izbrisati
 
-TOKEN_ARIA_REMOVE=Ukloni
+TOKEN_ARIA_DELETE=Izbriši
 
 TOKEN_ARIA_LABEL=Token
 
@@ -476,6 +484,10 @@ CALENDAR_HEADER_YEAR_BUTTON=Godina {0}
 
 CALENDAR_HEADER_YEAR_RANGE_BUTTON=Raspon godina od {0} do {1}
 
+CALENDAR_FOOTER_CANCEL_BUTTON=Odustani
+
+CALENDAR_FOOTER_OK_BUTTON=OK
+
 CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT=F4
 
 CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT=Shift + F4
@@ -548,6 +560,10 @@ MENU_ITEM_GROUP_SINGLE_ACCESSIBLE_NAME=Sadrži stavke koje se mogu odabrati
 
 MENU_ITEM_GROUP_MULTI_ACCESSIBLE_NAME=Sadrži stavke s mogućnošću višestrukog odabira
 
+MENU_ITEM_END_CONTENT_ACCESSIBLE_NAME=Dodatne radnje
+
+MENU_ITEM_LOADING=Učitavanje
+
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Interaktivno zaglavlje
 
 DIALOG_HEADER_ARIA_DESCRIBEDBY_RESIZABLE=Koristite Shift+strelice na tastaturi za promjenu veličine
@@ -678,6 +694,10 @@ DYNAMIC_DATE_RANGE_NEXT_COMBINED_TEXT=Sljedećih X {0} (uključeno)
 
 DYNAMIC_DATE_RANGE_INCLUDED_TEXT=(Uključeno)
 
+SWITCH_ON=Uključeno
+
+SWITCH_OFF=Isključeno
+
 ICON_ARIA_TYPE_IMAGE=Slika
 
 ICON_ARIA_TYPE_INTERACTIVE=Dugme