@ui5/webcomponents 2.12.0-rc.0 → 2.12.0-rc.1

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents",
-  "version": "2.12.0-rc.0",
+  "version": "2.12.0-rc.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -174,6 +174,16 @@
                 "default": "{}"
               }
             },
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible name of the AvatarGroup.\nWhen provided, this will override the default aria-label text.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-name-ref",
+              "description": "Receives id(s) of the elements that describe the AvatarGroup.\nWhen provided, this will be used as aria-labelledby instead of aria-label.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "hidden-items",
               "description": "Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.",
@@ -217,6 +227,16 @@
                 "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following field is supported:\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.",
                 "value": { "type": "AvatarGroupAccessibilityAttributes" }
               },
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible name of the AvatarGroup.\nWhen provided, this will override the default aria-label text.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-name-ref",
+                "description": "Receives id(s) of the elements that describe the AvatarGroup.\nWhen provided, this will be used as aria-labelledby instead of aria-label.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "hidden-items",
                 "description": "Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.",
@@ -677,7 +697,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- **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 year cells in between of selected years in range.\n- **year-range-cell** - Used to style the year range cells.\n- **year-range-cell-selected** - Used to style the year range cells when selected.\n- **year-range-cell-selected-between** - Used to style the year range cells in between of selected year ranges.",
+          "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- **month-picker-root** - Used to style the month picker root container.\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 year cells in between of selected years in range.\n- **year-picker-root** - Used to style the year picker root container.\n- **year-range-cell** - Used to style the year range cells.\n- **year-range-cell-selected** - Used to style the year range cells when selected.\n- **year-range-cell-selected-between** - Used to style the year range cells in between of selected year ranges.\n- **calendar-header-middle-button** - Used to style the calendar header middle buttons (month/year/year-range buttons).",
           "doc-url": "",
           "attributes": [
             {
@@ -10973,6 +10993,10 @@
           "name": "part(month-cell-selected-between)",
           "description": "Used to style the day cells in between of selected months in range."
         },
+        {
+          "name": "part(month-picker-root)",
+          "description": "Used to style the month picker root container."
+        },
         {
           "name": "part(year-cell)",
           "description": "Used to style the year cells."
@@ -10985,6 +11009,10 @@
           "name": "part(year-cell-selected-between)",
           "description": "Used to style the year cells in between of selected years in range."
         },
+        {
+          "name": "part(year-picker-root)",
+          "description": "Used to style the year picker root container."
+        },
         {
           "name": "part(year-range-cell)",
           "description": "Used to style the year range cells."
@@ -10997,6 +11025,10 @@
           "name": "part(year-range-cell-selected-between)",
           "description": "Used to style the year range cells in between of selected year ranges."
         },
+        {
+          "name": "part(calendar-header-middle-button)",
+          "description": "Used to style the calendar header middle buttons (month/year/year-range buttons)."
+        },
         {
           "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.12.0-rc.0",
+  "version": "2.12.0-rc.1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,20 +54,20 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.12.0-rc.0",
-    "@ui5/webcomponents-icons": "2.12.0-rc.0",
-    "@ui5/webcomponents-icons-business-suite": "2.12.0-rc.0",
-    "@ui5/webcomponents-icons-tnt": "2.12.0-rc.0",
-    "@ui5/webcomponents-localization": "2.12.0-rc.0",
-    "@ui5/webcomponents-theming": "2.12.0-rc.0"
+    "@ui5/webcomponents-base": "2.12.0-rc.1",
+    "@ui5/webcomponents-icons": "2.12.0-rc.1",
+    "@ui5/webcomponents-icons-business-suite": "2.12.0-rc.1",
+    "@ui5/webcomponents-icons-tnt": "2.12.0-rc.1",
+    "@ui5/webcomponents-localization": "2.12.0-rc.1",
+    "@ui5/webcomponents-theming": "2.12.0-rc.1"
   },
   "devDependencies": {
     "@ui5/cypress-internal": "0.0.0",
-    "@ui5/webcomponents-tools": "2.12.0-rc.0",
+    "@ui5/webcomponents-tools": "2.12.0-rc.1",
     "chromedriver": "^136.0.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vitest": "^3.0.2"
   },
-  "gitHead": "5c2fda3eb3253dcaf7587763aa436541f2c5160b"
+  "gitHead": "3bcf15cdf500ddc903d2373c4e4870c98ea318fb"
 }

package/src/CalendarHeaderTemplate.tsx

@@ -24,6 +24,7 @@ export default function CalendarTemplate(this: Calendar) {
 				<div
 					data-ui5-cal-header-btn-month
 					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+					part="calendar-header-middle-button"
 					hidden={this._isHeaderMonthButtonHidden}
 					tabindex={0}
 					role="button"
@@ -41,6 +42,7 @@ export default function CalendarTemplate(this: Calendar) {
 				<div
 					data-ui5-cal-header-btn-year
 					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+					part="calendar-header-middle-button"
 					hidden={this._isHeaderYearButtonHidden}
 					tabindex={0}
 					role="button"
@@ -56,6 +58,7 @@ export default function CalendarTemplate(this: Calendar) {
 				<div
 					data-ui5-cal-header-btn-year-range
 					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+					part="calendar-header-middle-button"
 					hidden={this._isHeaderYearRangeButtonHidden}
 					tabindex={0}
 					role="button"

package/src/CalendarTemplate.tsx

@@ -48,7 +48,7 @@ export default function CalendarTemplate(this: Calendar) {
 						timestamp={this._timestamp}
 						onChange={this.onSelectedMonthChange}
 						onNavigate={this.onNavigate}
-						exportparts="month-cell, month-cell-selected, month-cell-selected-between"
+						exportparts="month-cell, month-cell-selected, month-cell-selected-between, month-picker-root"
 					/>
 
 					<YearPicker
@@ -66,7 +66,7 @@ export default function CalendarTemplate(this: Calendar) {
 						_currentYearRange = {this._currentYearRange}
 						onChange={this.onSelectedYearChange}
 						onNavigate={this.onNavigate}
-						exportparts="year-cell, year-cell-selected, year-cell-selected-between"
+						exportparts="year-cell, year-cell-selected, year-cell-selected-between, year-picker-root"
 					/>
 
 					<YearRangePicker

package/src/MonthPickerTemplate.tsx

@@ -4,6 +4,7 @@ export default function MonthPickerTemplate(this: MonthPicker) {
 	return (
 		<div
 			class="ui5-mp-root"
+			part="month-picker-root"
 			role="grid"
 			aria-roledescription={this.roleDescription}
 			aria-readonly="false"

package/src/YearPickerTemplate.tsx

@@ -4,6 +4,7 @@ export default function YearPickerTemplate(this: YearPicker) {
 	return (
 		<div
 			class="ui5-yp-root"
+			part="year-picker-root"
 			role="grid"
 			aria-roledescription={this.roleDescription}
 			aria-readonly="false"