@ui5/webcomponents 2.2.0-rc.2 → 2.2.0

package/dist/types/CalendarWeekNumbering.js

@@ -0,0 +1,46 @@
+/**
+ * The <code>CalendarWeekNumbering</code> enum defines how to calculate calendar weeks. Each
+ * value defines:
+ * - The first day of the week,
+ * - The first week of the year.
+ *
+ * @public
+ * @since 2.2.0
+ */
+var CalendarWeekNumbering;
+(function (CalendarWeekNumbering) {
+    /**
+     * The default calendar week numbering:
+     *
+     * The framework determines the week numbering scheme; currently it is derived from the
+     * active format locale. Future versions of ui5-webcomponents might select a different week numbering
+     * scheme.
+     *
+     * @public
+     */
+    CalendarWeekNumbering["Default"] = "Default";
+    /**
+     * Official calendar week numbering in most of Europe (ISO 8601 standard):
+     * Monday is first day of the week, the week containing January 4th is first week of the year.
+     *
+     * @public
+     */
+    CalendarWeekNumbering["ISO_8601"] = "ISO_8601";
+    /**
+     * Official calendar week numbering in much of the Middle East (Middle Eastern calendar):
+     * Saturday is first day of the week, the week containing January 1st is first week of the year.
+     *
+     * @public
+     */
+    CalendarWeekNumbering["MiddleEastern"] = "MiddleEastern";
+    /**
+     * Official calendar week numbering in the United States, Canada, Brazil, Israel, Japan, and
+     * other countries (Western traditional calendar):
+     * Sunday is first day of the week, the week containing January 1st is first week of the year.
+     *
+     * @public
+     */
+    CalendarWeekNumbering["WesternTraditional"] = "WesternTraditional";
+})(CalendarWeekNumbering || (CalendarWeekNumbering = {}));
+export default CalendarWeekNumbering;
+//# sourceMappingURL=CalendarWeekNumbering.js.map

package/dist/types/CalendarWeekNumbering.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarWeekNumbering.js","sourceRoot":"","sources":["../../src/types/CalendarWeekNumbering.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,IAAK,qBAqCJ;AArCD,WAAK,qBAAqB;IAEtB;;;;;;;;OAQG;IACH,4CAAmB,CAAA;IAEnB;;;;;OAKG;IACH,8CAAqB,CAAA;IAErB;;;;;OAKG;IACH,wDAA+B,CAAA;IAE/B;;;;;;OAMG;IACH,kEAAyC,CAAA;AAC7C,CAAC,EArCI,qBAAqB,KAArB,qBAAqB,QAqCzB;AAED,eAAe,qBAAqB,CAAC","sourcesContent":["/**\n * The <code>CalendarWeekNumbering</code> enum defines how to calculate calendar weeks. Each\n * value defines:\n * - The first day of the week,\n * - The first week of the year.\n *\n * @public\n * @since 2.2.0\n */\n\nenum CalendarWeekNumbering {\n\n    /**\n     * The default calendar week numbering:\n     *\n     * The framework determines the week numbering scheme; currently it is derived from the\n     * active format locale. Future versions of ui5-webcomponents might select a different week numbering\n     * scheme.\n     *\n     * @public\n     */\n    Default = \"Default\",\n\n    /**\n     * Official calendar week numbering in most of Europe (ISO 8601 standard):\n     * Monday is first day of the week, the week containing January 4th is first week of the year.\n     *\n     * @public\n     */\n    ISO_8601 = \"ISO_8601\",\n\n    /**\n     * Official calendar week numbering in much of the Middle East (Middle Eastern calendar):\n     * Saturday is first day of the week, the week containing January 1st is first week of the year.\n     *\n     * @public\n     */\n    MiddleEastern = \"MiddleEastern\",\n\n    /**\n     * Official calendar week numbering in the United States, Canada, Brazil, Israel, Japan, and\n     * other countries (Western traditional calendar):\n     * Sunday is first day of the week, the week containing January 1st is first week of the year.\n     *\n     * @public\n     */\n    WesternTraditional = \"WesternTraditional\",\n}\n\nexport default CalendarWeekNumbering;\n"]}

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

@@ -273,7 +273,7 @@
     },
     {
       "name": "ui5-calendar",
-      "description": "### Overview\n\nThe `ui5-calendar` component allows users to select one or more dates.\n\nCurrently selected dates are represented with instances of `ui5-date` as\nchildren of the `ui5-calendar`. The value property of each `ui5-date` must be a\ndate string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.\nWhenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances\nof `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the\n`selection-change` event. This is useful if you want to control the selected dates externally.\n\n### Usage\n\nThe user can navigate to a particular date by:\n\n- Pressing over a month inside the months view\n- Pressing over an year inside the years view\n\nThe user can confirm a date selection by pressing over a date inside the days view.\n\n### Keyboard Handling\nThe `ui5-calendar` provides advanced keyboard handling.\nWhen a picker is showed and focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- Day picker:\n\n- [F4] - Shows month picker\n- [Shift] + [F4] - Shows year picker\n- [Page Up] - Navigate to the previous month\n- [Page Down] - Navigate to the next month\n- [Shift] + [Page Up] - Navigate to the previous year\n- [Shift] + [Page Down] - Navigate to the next year\n- [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards\n- [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards\n- [Home] - Navigate to the first day of the week\n- [End] - Navigate to the last day of the week\n- [Ctrl] + [Home] - Navigate to the first day of the month\n- [Ctrl] + [End] - Navigate to the last day of the month\n\n- Month picker:\n\n- [Page Up] - Navigate to the previous year\n- [Page Down] - Navigate to the next year\n- [Home] - Navigate to the first month of the current row\n- [End] - Navigate to the last month of the current row\n- [Ctrl] + [Home] - Navigate to the first month of the current year\n- [Ctrl] + [End] - Navigate to the last month of the year\n\n- Year picker:\n\n- [Page Up] - Navigate to the previous year range\n- [Page Down] - Navigate the next year range\n- [Home] - Navigate to the first year of the current row\n- [End] - Navigate to the last year of the current row\n- [Ctrl] + [Home] - Navigate to the first year of the current year range\n- [Ctrl] + [End] - Navigate to the last year of the current year range\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### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n</script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Calendar.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **selection-change** - Fired when the selected dates change.\n\n**Note:** If you call `preventDefault()` for this event, the component will not\ncreate instances of `ui5-date` for the newly selected dates. In that case you should do this manually.\n\n### **Slots:**\n - **calendarLegend** - Defines the calendar legend of the component.\n- **default** - Defines the selected date or dates (depending on the `selectionMode` property)\nfor this calendar as instances of `ui5-date` or `ui5-date-range`.\nUse `ui5-date` for single or multiple selection, and `ui5-date-range` for range selection.\n- **specialDates** - Defines the special dates, visually emphasized in the calendar.\n\n### **CSS Parts:**\n - **day-cell** - Used to style the day cells.\n- **day-cell-selected** - Used to style the day cells when selected.\n- **day-cell-selected-between** - Used to style the day cells in between of selected dates in range.\n- **month-cell** - Used to style the month cells.\n- **month-cell-selected** - Used to style the month cells when selected.\n- **year-cell** - Used to style the year cells.\n- **year-cell-selected** - Used to style the year cells when selected.",
+      "description": "### Overview\n\nThe `ui5-calendar` component allows users to select one or more dates.\n\nCurrently selected dates are represented with instances of `ui5-date` as\nchildren of the `ui5-calendar`. The value property of each `ui5-date` must be a\ndate string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.\nWhenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances\nof `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the\n`selection-change` event. This is useful if you want to control the selected dates externally.\n\n### Usage\n\nThe user can navigate to a particular date by:\n\n- Pressing over a month inside the months view\n- Pressing over an year inside the years view\n\nThe user can confirm a date selection by pressing over a date inside the days view.\n\n### Keyboard Handling\nThe `ui5-calendar` provides advanced keyboard handling.\nWhen a picker is showed and focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- Day picker:\n\n- [F4] - Shows month picker\n- [Shift] + [F4] - Shows year picker\n- [Page Up] - Navigate to the previous month\n- [Page Down] - Navigate to the next month\n- [Shift] + [Page Up] - Navigate to the previous year\n- [Shift] + [Page Down] - Navigate to the next year\n- [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards\n- [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards\n- [Home] - Navigate to the first day of the week\n- [End] - Navigate to the last day of the week\n- [Ctrl] + [Home] - Navigate to the first day of the month\n- [Ctrl] + [End] - Navigate to the last day of the month\n\n- Month picker:\n\n- [Page Up] - Navigate to the previous year\n- [Page Down] - Navigate to the next year\n- [Home] - Navigate to the first month of the current row\n- [End] - Navigate to the last month of the current row\n- [Ctrl] + [Home] - Navigate to the first month of the current year\n- [Ctrl] + [End] - Navigate to the last month of the year\n\n- Year picker:\n\n- [Page Up] - Navigate to the previous year range\n- [Page Down] - Navigate the next year range\n- [Home] - Navigate to the first year of the current row\n- [End] - Navigate to the last year of the current row\n- [Ctrl] + [Home] - Navigate to the first year of the current year range\n- [Ctrl] + [End] - Navigate to the last year of the current year range\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### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n</script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Calendar.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **selection-change** - Fired when the selected dates change.\n\n**Note:** If you call `preventDefault()` for this event, the component will not\ncreate instances of `ui5-date` for the newly selected dates. In that case you should do this manually.\n\n### **Slots:**\n - **calendarLegend** - Defines the calendar legend of the component.\n- **default** - Defines the selected date or dates (depending on the `selectionMode` property)\nfor this calendar as instances of `ui5-date` or `ui5-date-range`.\nUse `ui5-date` for single or multiple selection, and `ui5-date-range` for range selection.\n- **specialDates** - Defines the special dates, visually emphasized in the calendar.\n\n### **CSS Parts:**\n - **day-cell** - Used to style the day cells.\n- **day-cell-selected** - Used to style the day cells when selected.\n- **day-cell-selected-between** - Used to style the day cells in between of selected dates in range.\n- **month-cell** - Used to style the month cells.\n- **month-cell-selected** - Used to style the month cells when selected.\n- **month-cell-selected-between** - Used to style the day cells in between of selected months in range.\n- **year-cell** - Used to style the year cells.\n- **year-cell-selected** - Used to style the year cells when selected.\n- **year-cell-selected-between** - Used to style the day cells in between of selected years in range.",
       "attributes": [
         {
           "name": "selection-mode",
@@ -325,6 +325,16 @@
           "name": "max-date",
           "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
           "values": []
+        },
+        {
+          "name": "calendar-week-numbering",
+          "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.",
+          "values": [
+            { "name": "Default" },
+            { "name": "ISO_8601" },
+            { "name": "MiddleEastern" },
+            { "name": "WesternTraditional" }
+          ]
         }
       ],
       "references": []
@@ -461,6 +471,16 @@
           "name": "max-date",
           "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
           "values": []
+        },
+        {
+          "name": "calendar-week-numbering",
+          "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.",
+          "values": [
+            { "name": "Default" },
+            { "name": "ISO_8601" },
+            { "name": "MiddleEastern" },
+            { "name": "WesternTraditional" }
+          ]
         }
       ],
       "references": []
@@ -896,6 +916,16 @@
           "name": "max-date",
           "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
           "values": []
+        },
+        {
+          "name": "calendar-week-numbering",
+          "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.",
+          "values": [
+            { "name": "Default" },
+            { "name": "ISO_8601" },
+            { "name": "MiddleEastern" },
+            { "name": "WesternTraditional" }
+          ]
         }
       ],
       "references": []
@@ -1006,6 +1036,16 @@
           "name": "max-date",
           "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
           "values": []
+        },
+        {
+          "name": "calendar-week-numbering",
+          "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.",
+          "values": [
+            { "name": "Default" },
+            { "name": "ISO_8601" },
+            { "name": "MiddleEastern" },
+            { "name": "WesternTraditional" }
+          ]
         }
       ],
       "references": []
@@ -1136,6 +1176,16 @@
           "name": "max-date",
           "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
           "values": []
+        },
+        {
+          "name": "calendar-week-numbering",
+          "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.",
+          "values": [
+            { "name": "Default" },
+            { "name": "ISO_8601" },
+            { "name": "MiddleEastern" },
+            { "name": "WesternTraditional" }
+          ]
         }
       ],
       "references": []
@@ -1246,6 +1296,16 @@
           "name": "max-date",
           "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
           "values": []
+        },
+        {
+          "name": "calendar-week-numbering",
+          "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.",
+          "values": [
+            { "name": "Default" },
+            { "name": "ISO_8601" },
+            { "name": "MiddleEastern" },
+            { "name": "WesternTraditional" }
+          ]
         }
       ],
       "references": []
@@ -1329,7 +1389,7 @@
     },
     {
       "name": "ui5-file-uploader",
-      "description": "### Overview\n\nThe `ui5-file-uploader` opens a file explorer dialog and enables users to upload files.\nThe component consists of input field, but you can provide an HTML element by your choice\nto trigger the file upload, by using the default slot.\nFurthermore, you can set the property \"hideInput\" to \"true\" to hide the input field.\n\nTo get all selected files, you can simply use the read-only \"files\" property.\nTo restrict the types of files the user can select, you can use the \"accept\" property.\n\nAnd, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n\nFor the `ui5-file-uploader`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/FileUploader.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.\n- **fileSizeExceeded** - Event is fired when the size of a file is above the `maxFileSize` property value.\n\n### **Slots:**\n - **default** - By default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.\n\n**Note:** If no content is provided in this slot, the component will only consist of an input field and will not be interactable using the keyboard.\nAlso it is not recommended to use any non-interactable components, as it may lead to poor accessibility experience.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
+      "description": "### Overview\n\nThe `ui5-file-uploader` opens a file explorer dialog and enables users to upload files.\nThe component consists of input field, but you can provide an HTML element by your choice\nto trigger the file upload, by using the default slot.\nFurthermore, you can set the property \"hideInput\" to \"true\" to hide the input field.\n\nTo get all selected files, you can simply use the read-only \"files\" property.\nTo restrict the types of files the user can select, you can use the \"accept\" property.\n\nAnd, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n\nFor the `ui5-file-uploader`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/FileUploader.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **change** - Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.\n- **file-size-exceed** - Event is fired when the size of a file is above the `maxFileSize` property value.\n\n### **Slots:**\n - **default** - By default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.\n\n**Note:** If no content is provided in this slot, the component will only consist of an input field and will not be interactable using the keyboard.\nAlso it is not recommended to use any non-interactable components, as it may lead to poor accessibility experience.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
       "attributes": [
         {
           "name": "accept",

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.2.0-rc.2",
+  "version": "2.2.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -605,7 +605,7 @@
         },
         {
           "name": "ui5-calendar",
-          "description": "### Overview\n\nThe `ui5-calendar` component allows users to select one or more dates.\n\nCurrently selected dates are represented with instances of `ui5-date` as\nchildren of the `ui5-calendar`. The value property of each `ui5-date` must be a\ndate string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.\nWhenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances\nof `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the\n`selection-change` event. This is useful if you want to control the selected dates externally.\n\n### Usage\n\nThe user can navigate to a particular date by:\n\n- Pressing over a month inside the months view\n- Pressing over an year inside the years view\n\nThe user can confirm a date selection by pressing over a date inside the days view.\n\n### Keyboard Handling\nThe `ui5-calendar` provides advanced keyboard handling.\nWhen a picker is showed and focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- Day picker:\n\n- [F4] - Shows month picker\n- [Shift] + [F4] - Shows year picker\n- [Page Up] - Navigate to the previous month\n- [Page Down] - Navigate to the next month\n- [Shift] + [Page Up] - Navigate to the previous year\n- [Shift] + [Page Down] - Navigate to the next year\n- [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards\n- [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards\n- [Home] - Navigate to the first day of the week\n- [End] - Navigate to the last day of the week\n- [Ctrl] + [Home] - Navigate to the first day of the month\n- [Ctrl] + [End] - Navigate to the last day of the month\n\n- Month picker:\n\n- [Page Up] - Navigate to the previous year\n- [Page Down] - Navigate to the next year\n- [Home] - Navigate to the first month of the current row\n- [End] - Navigate to the last month of the current row\n- [Ctrl] + [Home] - Navigate to the first month of the current year\n- [Ctrl] + [End] - Navigate to the last month of the year\n\n- Year picker:\n\n- [Page Up] - Navigate to the previous year range\n- [Page Down] - Navigate the next year range\n- [Home] - Navigate to the first year of the current row\n- [End] - Navigate to the last year of the current row\n- [Ctrl] + [Home] - Navigate to the first year of the current year range\n- [Ctrl] + [End] - Navigate to the last year of the current year range\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### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n</script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Calendar.js\";`\n---\n\n\n### **Events:**\n - **selection-change** - Fired when the selected dates change.\n\n**Note:** If you call `preventDefault()` for this event, the component will not\ncreate instances of `ui5-date` for the newly selected dates. In that case you should do this manually.\n\n### **Slots:**\n - **calendarLegend** - Defines the calendar legend of the component.\n- **default** - Defines the selected date or dates (depending on the `selectionMode` property)\nfor this calendar as instances of `ui5-date` or `ui5-date-range`.\nUse `ui5-date` for single or multiple selection, and `ui5-date-range` for range selection.\n- **specialDates** - Defines the special dates, visually emphasized in the calendar.\n\n### **CSS Parts:**\n - **day-cell** - Used to style the day cells.\n- **day-cell-selected** - Used to style the day cells when selected.\n- **day-cell-selected-between** - Used to style the day cells in between of selected dates in range.\n- **month-cell** - Used to style the month cells.\n- **month-cell-selected** - Used to style the month cells when selected.\n- **year-cell** - Used to style the year cells.\n- **year-cell-selected** - Used to style the year cells when selected.",
+          "description": "### Overview\n\nThe `ui5-calendar` component allows users to select one or more dates.\n\nCurrently selected dates are represented with instances of `ui5-date` as\nchildren of the `ui5-calendar`. The value property of each `ui5-date` must be a\ndate string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.\nWhenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances\nof `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the\n`selection-change` event. This is useful if you want to control the selected dates externally.\n\n### Usage\n\nThe user can navigate to a particular date by:\n\n- Pressing over a month inside the months view\n- Pressing over an year inside the years view\n\nThe user can confirm a date selection by pressing over a date inside the days view.\n\n### Keyboard Handling\nThe `ui5-calendar` provides advanced keyboard handling.\nWhen a picker is showed and focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- Day picker:\n\n- [F4] - Shows month picker\n- [Shift] + [F4] - Shows year picker\n- [Page Up] - Navigate to the previous month\n- [Page Down] - Navigate to the next month\n- [Shift] + [Page Up] - Navigate to the previous year\n- [Shift] + [Page Down] - Navigate to the next year\n- [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards\n- [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards\n- [Home] - Navigate to the first day of the week\n- [End] - Navigate to the last day of the week\n- [Ctrl] + [Home] - Navigate to the first day of the month\n- [Ctrl] + [End] - Navigate to the last day of the month\n\n- Month picker:\n\n- [Page Up] - Navigate to the previous year\n- [Page Down] - Navigate to the next year\n- [Home] - Navigate to the first month of the current row\n- [End] - Navigate to the last month of the current row\n- [Ctrl] + [Home] - Navigate to the first month of the current year\n- [Ctrl] + [End] - Navigate to the last month of the year\n\n- Year picker:\n\n- [Page Up] - Navigate to the previous year range\n- [Page Down] - Navigate the next year range\n- [Home] - Navigate to the first year of the current row\n- [End] - Navigate to the last year of the current row\n- [Ctrl] + [Home] - Navigate to the first year of the current year range\n- [Ctrl] + [End] - Navigate to the last year of the current year range\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### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n</script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Calendar.js\";`\n---\n\n\n### **Events:**\n - **selection-change** - Fired when the selected dates change.\n\n**Note:** If you call `preventDefault()` for this event, the component will not\ncreate instances of `ui5-date` for the newly selected dates. In that case you should do this manually.\n\n### **Slots:**\n - **calendarLegend** - Defines the calendar legend of the component.\n- **default** - Defines the selected date or dates (depending on the `selectionMode` property)\nfor this calendar as instances of `ui5-date` or `ui5-date-range`.\nUse `ui5-date` for single or multiple selection, and `ui5-date-range` for range selection.\n- **specialDates** - Defines the special dates, visually emphasized in the calendar.\n\n### **CSS Parts:**\n - **day-cell** - Used to style the day cells.\n- **day-cell-selected** - Used to style the day cells when selected.\n- **day-cell-selected-between** - Used to style the day cells in between of selected dates in range.\n- **month-cell** - Used to style the month cells.\n- **month-cell-selected** - Used to style the month cells when selected.\n- **month-cell-selected-between** - Used to style the day cells in between of selected months in range.\n- **year-cell** - Used to style the year cells.\n- **year-cell-selected** - Used to style the year cells when selected.\n- **year-cell-selected-between** - Used to style the day cells in between of selected years in range.",
           "doc-url": "",
           "attributes": [
             {
@@ -651,6 +651,14 @@
               "name": "max-date",
               "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
               "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "calendar-week-numbering",
+              "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.",
+              "value": {
+                "type": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"",
+                "default": "\"Default\""
+              }
             }
           ],
           "slots": [
@@ -713,6 +721,13 @@
                 "name": "max-date",
                 "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
                 "value": { "type": "string" }
+              },
+              {
+                "name": "calendar-week-numbering",
+                "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.",
+                "value": {
+                  "type": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\""
+                }
               }
             ],
             "events": [
@@ -1890,6 +1905,14 @@
               "name": "max-date",
               "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
               "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "calendar-week-numbering",
+              "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.",
+              "value": {
+                "type": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"",
+                "default": "\"Default\""
+              }
             }
           ],
           "slots": [
@@ -2004,6 +2027,13 @@
                 "name": "max-date",
                 "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
                 "value": { "type": "string" }
+              },
+              {
+                "name": "calendar-week-numbering",
+                "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.",
+                "value": {
+                  "type": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\""
+                }
               }
             ],
             "events": [
@@ -2140,6 +2170,14 @@
               "name": "max-date",
               "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
               "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "calendar-week-numbering",
+              "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.",
+              "value": {
+                "type": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"",
+                "default": "\"Default\""
+              }
             }
           ],
           "events": [
@@ -2268,6 +2306,13 @@
                 "name": "max-date",
                 "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
                 "value": { "type": "string" }
+              },
+              {
+                "name": "calendar-week-numbering",
+                "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.",
+                "value": {
+                  "type": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\""
+                }
               }
             ],
             "events": [
@@ -2384,6 +2429,14 @@
               "name": "max-date",
               "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
               "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "calendar-week-numbering",
+              "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.",
+              "value": {
+                "type": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\"",
+                "default": "\"Default\""
+              }
             }
           ],
           "events": [
@@ -2492,6 +2545,13 @@
                 "name": "max-date",
                 "description": "Determines the maximum date available for selection.\n\n**Note:** If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).",
                 "value": { "type": "string" }
+              },
+              {
+                "name": "calendar-week-numbering",
+                "description": "Defines how to calculate calendar weeks and first day of the week.\nIf not set, the calendar will be displayed according to the currently set global configuration.",
+                "value": {
+                  "type": "\"Default\" | \"ISO_8601\" | \"MiddleEastern\" | \"WesternTraditional\""
+                }
               }
             ],
             "events": [
@@ -2697,7 +2757,7 @@
         },
         {
           "name": "ui5-file-uploader",
-          "description": "### Overview\n\nThe `ui5-file-uploader` opens a file explorer dialog and enables users to upload files.\nThe component consists of input field, but you can provide an HTML element by your choice\nto trigger the file upload, by using the default slot.\nFurthermore, you can set the property \"hideInput\" to \"true\" to hide the input field.\n\nTo get all selected files, you can simply use the read-only \"files\" property.\nTo restrict the types of files the user can select, you can use the \"accept\" property.\n\nAnd, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n\nFor the `ui5-file-uploader`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/FileUploader.js\";`\n---\n\n\n### **Events:**\n - **change** - Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.\n- **fileSizeExceeded** - Event is fired when the size of a file is above the `maxFileSize` property value.\n\n### **Slots:**\n - **default** - By default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.\n\n**Note:** If no content is provided in this slot, the component will only consist of an input field and will not be interactable using the keyboard.\nAlso it is not recommended to use any non-interactable components, as it may lead to poor accessibility experience.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
+          "description": "### Overview\n\nThe `ui5-file-uploader` opens a file explorer dialog and enables users to upload files.\nThe component consists of input field, but you can provide an HTML element by your choice\nto trigger the file upload, by using the default slot.\nFurthermore, you can set the property \"hideInput\" to \"true\" to hide the input field.\n\nTo get all selected files, you can simply use the read-only \"files\" property.\nTo restrict the types of files the user can select, you can use the \"accept\" property.\n\nAnd, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n\nFor the `ui5-file-uploader`\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/FileUploader.js\";`\n---\n\n\n### **Events:**\n - **change** - Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.\n- **file-size-exceed** - Event is fired when the size of a file is above the `maxFileSize` property value.\n\n### **Slots:**\n - **default** - By default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.\n\n**Note:** If no content is provided in this slot, the component will only consist of an input field and will not be interactable using the keyboard.\nAlso it is not recommended to use any non-interactable components, as it may lead to poor accessibility experience.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
           "doc-url": "",
           "attributes": [
             {
@@ -2770,7 +2830,7 @@
               "description": "Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed."
             },
             {
-              "name": "fileSizeExceeded",
+              "name": "file-size-exceed",
               "description": "Event is fired when the size of a file is above the `maxFileSize` property value."
             }
           ],
@@ -2835,7 +2895,7 @@
                 "description": "Event is fired when the value of the file path has been changed.\n\n**Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed."
               },
               {
-                "name": "fileSizeExceeded",
+                "name": "file-size-exceed",
                 "description": "Event is fired when the size of a file is above the `maxFileSize` property value."
               }
             ]
@@ -9666,6 +9726,10 @@
           "name": "part(month-cell-selected)",
           "description": "Used to style the month cells when selected."
         },
+        {
+          "name": "part(month-cell-selected-between)",
+          "description": "Used to style the day cells in between of selected months in range."
+        },
         {
           "name": "part(year-cell)",
           "description": "Used to style the year cells."
@@ -9674,6 +9738,10 @@
           "name": "part(year-cell-selected)",
           "description": "Used to style the year cells when selected."
         },
+        {
+          "name": "part(year-cell-selected-between)",
+          "description": "Used to style the day cells in between of selected years in range."
+        },
         {
           "name": "part(root)",
           "description": "Used to style the root DOM element of the card component"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.2.0-rc.2",
+  "version": "2.2.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -50,16 +50,17 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.2.0-rc.2",
-    "@ui5/webcomponents-icons": "2.2.0-rc.2",
-    "@ui5/webcomponents-icons-business-suite": "2.2.0-rc.2",
-    "@ui5/webcomponents-icons-tnt": "2.2.0-rc.2",
-    "@ui5/webcomponents-localization": "2.2.0-rc.2",
-    "@ui5/webcomponents-theming": "2.2.0-rc.2"
+    "@ui5/webcomponents-base": "2.2.0",
+    "@ui5/webcomponents-icons": "2.2.0",
+    "@ui5/webcomponents-icons-business-suite": "2.2.0",
+    "@ui5/webcomponents-icons-tnt": "2.2.0",
+    "@ui5/webcomponents-localization": "2.2.0",
+    "@ui5/webcomponents-theming": "2.2.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.2.0-rc.2",
-    "chromedriver": "^126.0.0"
+    "@ui5/webcomponents-tools": "2.2.0",
+    "chromedriver": "^127.0.3",
+    "lit": "^2.0.0"
   },
-  "gitHead": "2c1b6c66d0abba9532115b63acd68c81e62acf66"
+  "gitHead": "15c5f5eba0d2d366c3022c99dbeb2a60658b0759"
 }

package/src/Breadcrumbs.hbs

@@ -25,6 +25,7 @@
 				id="{{this._id}}-link"
 				design="{{this._linkDesign}}"
 				accessible-name="{{this._accessibleNameText}}"
+				.accessibilityAttributes="{{this.accessibilityAttributes}}"
 				data-ui5-stable="{{this.stableDomRef}}"
 				wrapping-type="None">
 				{{this.innerText}}

package/src/Calendar.hbs

@@ -15,6 +15,7 @@
 			.selectionMode="{{selectionMode}}"
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
+			.calendarWeekNumbering="{{calendarWeekNumbering}}"
 			timestamp="{{_timestamp}}"
 			?hide-week-numbers="{{hideWeekNumbers}}"
 			@ui5-change="{{onSelectedDatesChange}}"
@@ -30,12 +31,13 @@
 			._hidden="{{_isMonthPickerHidden}}"
 			.primaryCalendarType="{{_primaryCalendarType}}"
 			.secondaryCalendarType="{{_secondaryCalendarType}}"
+			.selectionMode="{{selectionMode}}"
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
 			timestamp="{{_timestamp}}"
 			@ui5-change="{{onSelectedMonthChange}}"
 			@ui5-navigate="{{onNavigate}}"
-			exportparts="month-cell, month-cell-selected"
+			exportparts="month-cell, month-cell-selected, month-cell-selected-between"
 		></ui5-monthpicker>
 
 		<ui5-yearpicker
@@ -46,12 +48,13 @@
 			._hidden="{{_isYearPickerHidden}}"
 			.primaryCalendarType="{{_primaryCalendarType}}"
 			.secondaryCalendarType="{{_secondaryCalendarType}}"
+			.selectionMode="{{selectionMode}}"
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
 			timestamp="{{_timestamp}}"
 			@ui5-change="{{onSelectedYearChange}}"
 			@ui5-navigate="{{onNavigate}}"
-			exportparts="year-cell, year-cell-selected"
+			exportparts="year-cell, year-cell-selected, year-cell-selected-between"
 		></ui5-yearpicker>
 	</div>
 	<div class="ui5-calheader">

package/src/ColorPalettePopover.hbs

@@ -2,8 +2,8 @@
 	hide-arrow
 	content-only-on-desktop
 	placement="Bottom"
-	?open="{{_open}}"
 	.opener="{{opener}}"
+	?open="{{_open}}"
 	@ui5-close="{{onAfterClose}}"
 	@ui5-open="{{onAfterOpen}}"
 >

package/src/DatePickerPopover.hbs

@@ -47,6 +47,7 @@
 		.selectionMode="{{_calendarSelectionMode}}"
 		.minDate="{{minDate}}"
 		.maxDate="{{maxDate}}"
+		.calendarWeekNumbering="{{calendarWeekNumbering}}"
 		@ui5-selection-change="{{onSelectedDatesChange}}"
 		@ui5-show-month-view="{{onHeaderShowMonthPress}}"
 		@ui5-show-year-view="{{onHeaderShowYearPress}}"

package/src/DateRangePicker.hbs

@@ -10,6 +10,7 @@
 		.selectionMode="{{_calendarSelectionMode}}"
 		.minDate="{{minDate}}"
 		.maxDate="{{maxDate}}"
+		.calendarWeekNumbering="{{calendarWeekNumbering}}"
 		@ui5-selection-change="{{onSelectedDatesChange}}"
 		@ui5-show-month-view="{{onHeaderShowMonthPress}}"
 		@ui5-show-year-view="{{onHeaderShowYearPress}}"

package/src/DateTimePickerPopover.hbs

@@ -23,6 +23,7 @@
 			.selectionMode="{{_calendarSelectionMode}}"
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
+			.calendarWeekNumbering="{{calendarWeekNumbering}}"
 			@ui5-selection-change="{{onSelectedDatesChange}}"
 			@ui5-show-month-view="{{onHeaderShowMonthPress}}"
 			@ui5-show-year-view="{{onHeaderShowYearPress}}"

package/src/Link.hbs

@@ -10,6 +10,7 @@
 	aria-label="{{ariaLabelText}}"
 	aria-haspopup="{{_hasPopup}}"
 	aria-expanded="{{accessibilityAttributes.expanded}}"
+	aria-current="{{accessibilityAttributes.current}}"
 	@focusin={{_onfocusin}}
 	@focusout={{_onfocusout}}
 	@click={{_onclick}}

package/src/MonthPicker.hbs

@@ -4,6 +4,7 @@
 	aria-roledescription="{{roleDescription}}"
 	aria-readonly="false"
 	aria-multiselectable="false"
+	@mouseover={{_onmouseover}}
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}
 	@click={{_selectMonth}}
@@ -20,6 +21,7 @@
 					part="{{this.parts}}"
 					role="gridcell"
 					aria-selected="{{this.ariaSelected}}"
+					aria-disabled="{{this.ariaDisabled}}"
 				>
 					<span class="ui5-dp-monthtext">
 						{{this.name}}

package/src/YearPicker.hbs

@@ -4,6 +4,7 @@
 	aria-roledescription="{{roleDescription}}"
 	aria-readonly="false"
 	aria-multiselectable="false"
+	@mouseover={{_onmouseover}}
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}
 	@click={{_selectYear}}
@@ -19,8 +20,9 @@
 					part="{{this.parts}}"
 					role="gridcell"
 					aria-selected="{{this.ariaSelected}}"
+					aria-disabled="{{this.ariaDisabled}}"
 				>
-					<span>
+					<span class="ui5-dp-yeartext">
 						{{this.year}}
 					</span>
 					{{#if this.yearInSecType}}

package/src/i18n/messagebundle_ar.properties

@@ -109,6 +109,9 @@ DATERANGEPICKER_POPOVER_ACCESSIBLE_NAME=اختيار نطاق التواريخ
 
 DELETE=حذف
 
+EMPTY_INDICATOR_SYMBOL=–
+EMPTY_INDICATOR_ACCESSIBLE_TEXT=قيمة فارغة
+
 FILEUPLOAD_BROWSE=استعراض...
 
 FILEUPLOADER_TITLE=تحميل ملف
@@ -183,6 +186,8 @@ MULTIINPUT_ROLEDESCRIPTION_TEXT=إدخال متعدد القيمة
 
 MULTIINPUT_SHOW_MORE_TOKENS={0} إضافي
 
+MULTIINPUT_VALUE_HELP_LABEL=إظهار مساعدة الإدخال
+
 PANEL_ICON=توسيع/طي
 
 RANGE_SLIDER_ARIA_DESCRIPTION=النطاق
@@ -335,10 +340,14 @@ SPLIT_BUTTON_DESCRIPTION=زر التقسيم
 
 SPLIT_BUTTON_KEYBOARD_HINT=اضغط على Space أو Enter لبدء تشغيل الإجراء الافتراضي وAlt + Arrow Down أو F4 لبدء تشغيل إجراء السهم
 
+SPLIT_BUTTON_ARROW_BUTTON_TOOLTIP=فتح القائمة
+
 MENU_BACK_BUTTON_ARIA_LABEL=الخلف
 
 MENU_CLOSE_BUTTON_ARIA_LABEL=رفض
 
+MENU_POPOVER_ACCESSIBLE_NAME=حدد خيارًا من القائمة
+
 NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=تنقل
 
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=مقدمة تفاعلية

package/src/i18n/messagebundle_bg.properties

@@ -109,6 +109,9 @@ DATERANGEPICKER_POPOVER_ACCESSIBLE_NAME=Изберете диапазон от
 
 DELETE=Изтриване
 
+EMPTY_INDICATOR_SYMBOL=–
+EMPTY_INDICATOR_ACCESSIBLE_TEXT=Празна стойност
+
 FILEUPLOAD_BROWSE=Браузване...
 
 FILEUPLOADER_TITLE=Качване на файл
@@ -183,6 +186,8 @@ MULTIINPUT_ROLEDESCRIPTION_TEXT=Въвеждане на множество ст
 
 MULTIINPUT_SHOW_MORE_TOKENS=Още {0}
 
+MULTIINPUT_VALUE_HELP_LABEL=Показване на помощ при въвеждане на стойност
+
 PANEL_ICON=Разширяване/скриване
 
 RANGE_SLIDER_ARIA_DESCRIPTION=Диапазон
@@ -335,10 +340,14 @@ SPLIT_BUTTON_DESCRIPTION=Бутон разделяне
 
 SPLIT_BUTTON_KEYBOARD_HINT=Натиснете интервал или Enter, за да инициирате действие по подразбиране и Alt + стрелка надолу или F4, за да инициирате действие на стрелка.
 
+SPLIT_BUTTON_ARROW_BUTTON_TOOLTIP=Отваряне на менюто
+
 MENU_BACK_BUTTON_ARIA_LABEL=Назад
 
 MENU_CLOSE_BUTTON_ARIA_LABEL=Отхвърляне
 
+MENU_POPOVER_ACCESSIBLE_NAME=Изберете опция от менюто
+
 NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=Навигация
 
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Интерактивно заглавие