@ui5/webcomponents 1.4.0 → 1.7.0

package/src/Button.js

@@ -4,7 +4,6 @@ import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js";
 import {
 	isPhone,
 	isTablet,
@@ -12,6 +11,7 @@ import {
 	isDesktop,
 	isSafari,
 } from "@ui5/webcomponents-base/dist/Device.js";
+import isDefaultSlotProvided from "@ui5/webcomponents-base/dist/util/isDefaultSlotProvided.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 import ButtonTemplate from "./generated/templates/ButtonTemplate.lit.js";
 import Icon from "./Icon.js";
@@ -20,7 +20,6 @@ import { BUTTON_ARIA_TYPE_ACCEPT, BUTTON_ARIA_TYPE_REJECT, BUTTON_ARIA_TYPE_EMPH
 
 // Styles
 import buttonCss from "./generated/themes/Button.css.js";
-import buttonIECss from "./generated/themes/Button.ie11.css.js";
 
 let isGlobalHandlerAttached = false;
 let activeButton = null;
@@ -71,12 +70,12 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the icon to be displayed as graphical element within the component.
+		 * Defines the icon, displayed as graphical element within the component.
 		 * The SAP-icons font provides numerous options.
 		 * <br><br>
 		 * Example:
 		 *
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons within the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -99,7 +98,7 @@ const metadata = {
 
 		/**
 		 * When set to <code>true</code>, the component will
-		 * automatically submit the nearest form element upon <code>press</code>.
+		 * automatically submit the nearest HTML form element on <code>press</code>.
 		 * <br><br>
 		 * <b>Note:</b> For the <code>submits</code> property to have effect, you must add the following import to your project:
 		 * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
@@ -115,7 +114,7 @@ const metadata = {
 		/**
 		 * Defines the tooltip of the component.
 		 * <br>
-		 * <b>Note:</b> We recommend setting tooltip to icon-only components.
+		 * <b>Note:</b> A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
 		 * @type {string}
 		 * @defaultvalue: ""
 		 * @public
@@ -158,7 +157,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: ""
@@ -327,7 +326,7 @@ class Button extends UI5Element {
 	}
 
 	static get styles() {
-		return [buttonCss, isLegacyBrowser() && buttonIECss];
+		return buttonCss;
 	}
 
 	static get render() {
@@ -462,11 +461,16 @@ class Button extends UI5Element {
 		return this.design !== ButtonDesign.Default && this.design !== ButtonDesign.Transparent;
 	}
 
+	get iconRole() {
+		if (!this.icon) {
+			return "";
+		}
+
+		return this.showIconTooltip ? "img" : "presentation";
+	}
+
 	get isIconOnly() {
-		return !Array.from(this.childNodes).filter(node => {
-			return node.nodeType !== Node.COMMENT_NODE
-			&& (node.nodeType !== Node.TEXT_NODE || node.nodeValue.trim().length !== 0);
-		}).length;
+		return !isDefaultSlotProvided(this);
 	}
 
 	static typeTextMappings() {

package/src/Calendar.hbs

@@ -27,6 +27,7 @@
 			.selectedDates="{{_selectedDatesTimestamps}}"
 			._hidden="{{_isMonthPickerHidden}}"
 			.primaryCalendarType="{{_primaryCalendarType}}"
+			.secondaryCalendarType="{{secondaryCalendarType}}"
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
 			timestamp="{{_timestamp}}"
@@ -41,6 +42,7 @@
 			.selectedDates="{{_selectedDatesTimestamps}}"
 			._hidden="{{_isYearPickerHidden}}"
 			.primaryCalendarType="{{_primaryCalendarType}}"
+			.secondaryCalendarType="{{secondaryCalendarType}}"
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
 			timestamp="{{_timestamp}}"
@@ -61,6 +63,7 @@
 			.isMonthButtonHidden="{{_isHeaderMonthButtonHidden}}"
 			._monthButtonText="{{_headerMonthButtonText}}"
 			._yearButtonText="{{_headerYearButtonText}}"
+			._yearButtonTextSecType="{{_headerYearButtonTextSecType}}"
 			@ui5-previous-press="{{onHeaderPreviousPress}}"
 			@ui5-next-press="{{onHeaderNextPress}}"
 			@ui5-show-month-press="{{onHeaderShowMonthPress}}"

package/src/Calendar.js

@@ -1,3 +1,5 @@
+import transformDateToSecondaryType from "@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js";
+import convertMonthNumbersToMonthNames from "@ui5/webcomponents-localization/dist/dates/convertMonthNumbersToMonthNames.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import {
@@ -30,7 +32,7 @@ import calendarCSS from "./generated/themes/Calendar.css.js";
 const metadata = {
 	tag: "ui5-calendar",
 	fastNavigation: true,
-	properties: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.Calendar.prototype */ {
 		/**
 		 * Defines the type of selection used in the calendar component.
 		 * Accepted property values are:<br>
@@ -86,9 +88,13 @@ const metadata = {
 		_headerYearButtonText: {
 			type: String,
 		},
+
+		_headerYearButtonTextSecType: {
+			type: String,
+		},
 	},
 	managedSlots: true,
-	slots: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.Calendar.prototype */ {
 		/**
 		 * Defines the selected date or dates (depending on the <code>selectionMode</code> property) for this calendar as instances of <code>ui5-date</code>
 		 *
@@ -102,7 +108,7 @@ const metadata = {
 			invalidateOnChildChange: true,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.Calendar.prototype */ {
 		/**
 		 * Fired when the selected dates change.
 		 * <b>Note:</b> If you call <code>preventDefault()</code> for this event, the component will not
@@ -302,6 +308,8 @@ class Calendar extends CalendarPart {
 		} else {
 			this._headerYearButtonText = String(yearFormat.format(this._localDate, true));
 		}
+
+		this.secondaryCalendarType && this._setSecondaryCalendarTypeButtonText();
 	}
 
 	/**
@@ -340,6 +348,27 @@ class Calendar extends CalendarPart {
 		this._currentPickerDOM._showNextPage();
 	}
 
+	_setSecondaryCalendarTypeButtonText() {
+		const localeData = getCachedLocaleDataInstance(getLocale());
+		const yearFormatSecType = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType });
+		this._headerMonthButtonTextInSexType = localeData.getMonthsStandAlone("wide", this.secondaryCalendarType)[this._calendarDate.getMonth()];
+
+		if (this._currentPicker === "year") {
+			const rangeStart = new CalendarDate(this._calendarDate, this._primaryCalendarType);
+			const rangeEnd = new CalendarDate(this._calendarDate, this._primaryCalendarType);
+			rangeStart.setYear(this._currentPickerDOM._firstYear);
+			rangeEnd.setYear(this._currentPickerDOM._lastYear);
+
+			const rangeStartSecType = transformDateToSecondaryType(this.primaryCalendarType, this.secondaryCalendarType, rangeStart.valueOf() / 1000, true)
+				.firstDate;
+			const rangeEndSecType = transformDateToSecondaryType(this.primaryCalendarType, this.secondaryCalendarType, rangeEnd.valueOf() / 1000, true)
+				.lastDate;
+			this._headerYearButtonTextSecType = `${yearFormatSecType.format(rangeStartSecType.toLocalJSDate(), true)} - ${yearFormatSecType.format(rangeEndSecType.toLocalJSDate(), true)}`;
+		} else {
+			this._headerYearButtonTextSecType = String(yearFormatSecType.format(this._localDate, true));
+		}
+	}
+
 	get secondaryCalendarTypeButtonText() {
 		if (!this.secondaryCalendarType) {
 			return;
@@ -347,58 +376,17 @@ class Calendar extends CalendarPart {
 
 		const localDate = new Date(this._timestamp * 1000);
 		const secondYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType });
-		const secondMonthInfo = this._getDisplayedSecondaryMonthText();
+		const dateInSecType = transformDateToSecondaryType(this._primaryCalendarType, this.secondaryCalendarType, this._timestamp);
+		const secondMonthInfo = convertMonthNumbersToMonthNames(dateInSecType.firstDate.getMonth(), dateInSecType.lastDate.getMonth(), this.secondaryCalendarType);
 		const secondYearText = secondYearFormat.format(localDate, true);
+
 		return {
 			yearButtonText: secondYearText,
 			monthButtonText: secondMonthInfo.text,
-			monthButtonInfo: secondMonthInfo.info,
-		};
-	}
-
-	_getDisplayedSecondaryMonthText() {
-		const month = this._getDisplayedSecondaryMonths();
-		const localeData = getCachedLocaleDataInstance(getLocale());
-		const pattern = localeData.getIntervalPattern();
-		const secondaryMonthsNames = getCachedLocaleDataInstance(getLocale()).getMonthsStandAlone("abbreviated", this.secondaryCalendarType);
-		const secondaryMonthsNamesWide = getCachedLocaleDataInstance(getLocale()).getMonthsStandAlone("wide", this.secondaryCalendarType);
-
-		if (month.startMonth === month.endMonth) {
-			return {
-				text: localeData.getMonths("abbreviated", this.secondaryCalendarType)[month.startMonth],
-				textInfo: localeData.getMonths("wide", this.secondaryCalendarType)[month.startMonth],
-			};
-		}
-
-		return {
-			text: pattern.replace(/\{0\}/, secondaryMonthsNames[month.startMonth]).replace(/\{1\}/, secondaryMonthsNames[month.endMonth]),
-			textInfo: pattern.replace(/\{0\}/, secondaryMonthsNamesWide[month.startMonth]).replace(/\{1\}/, secondaryMonthsNamesWide[month.endMonth]),
+			monthButtonInfo: secondMonthInfo.textInfo,
 		};
 	}
 
-	_getDisplayedSecondaryMonths() {
-		const localDate = new Date(this._timestamp * 1000);
-		let firstDate = CalendarDate.fromLocalJSDate(localDate, this._primaryCalendarType);
-		firstDate.setDate(1);
-		firstDate = new CalendarDate(firstDate, this.secondaryCalendarType);
-		const startMonth = firstDate.getMonth();
-
-		let lastDate = CalendarDate.fromLocalJSDate(localDate, this._primaryCalendarType);
-		lastDate.setDate(this._getDaysInMonth(lastDate));
-		lastDate = new CalendarDate(lastDate, this.secondaryCalendarType);
-		const endMonth = lastDate.getMonth();
-
-		return { startMonth, endMonth };
-	}
-
-	_getDaysInMonth(date) {
-		const tempCalendarDate = new CalendarDate(date);
-		tempCalendarDate.setDate(1);
-		tempCalendarDate.setMonth(tempCalendarDate.getMonth() + 1);
-		tempCalendarDate.setDate(0);
-		return tempCalendarDate.getDate();
-	}
-
 	/**
 	 * The month button is hidden when the month picker or year picker is shown
 	 * @returns {boolean}

package/src/CalendarDate.js

@@ -5,7 +5,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 */
 const metadata = {
 	tag: "ui5-date",
-	properties: /** @lends  sap.ui.webcomponents.main.CalendarDate.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.CalendarDate.prototype */ {
 
 		/**
 		 * The date formatted according to the <code>formatPattern</code> property of the <code>ui5-calendar</code> that hosts the component

package/src/CalendarHeader.hbs

@@ -2,6 +2,7 @@
 	<div
 		data-ui5-cal-header-btn-prev
 		class="{{classes.prevButton}}"
+		role="button"
 		@mousedown={{onPrevButtonClick}}
 		title="{{_prevButtonText}}"
 	>
@@ -14,6 +15,7 @@
 			class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
 			?hidden="{{isMonthButtonHidden}}"
 			tabindex="0"
+			role="button"
 			aria-label="{{accInfo.ariaLabelMonthButton}}"
 			@click={{onMonthButtonClick}}
 			@keydown={{onMonthButtonKeyDown}}
@@ -29,13 +31,14 @@
 			class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
 			?hidden="{{isYearButtonHidden}}"
 			tabindex="0"
+			role="button"
 			@click={{onYearButtonClick}}
 			@keydown={{onYearButtonKeyDown}}
 			@keyup={{onYearButtonKeyUp}}
 		>
 			<span>{{_yearButtonText}}</span>
 			{{#if hasSecondaryCalendarType}}
-				<span class="ui5-calheader-btn-sectext">{{_secondYearButtonText}}</span>
+				<span class="ui5-calheader-btn-sectext">{{_yearButtonTextSecType}}</span>
 			{{/if}}
 		</div>
 	</div>
@@ -43,6 +46,7 @@
 	<div
 		data-ui5-cal-header-btn-next
 		class="{{classes.nextButton}}"
+		role="button"
 		@mousedown={{onNextButtonClick}}
 		title={{_nextButtonText}}
 	>

package/src/CalendarHeader.js

@@ -78,6 +78,10 @@ const metadata = {
 			type: String,
 		},
 
+		_yearButtonTextSecType: {
+			type: String,
+		},
+
 		isYearButtonHidden: {
 			type: Boolean,
 		},
@@ -199,7 +203,7 @@ class CalendarHeader extends UI5Element {
 	get accInfo() {
 		return {
 			ariaLabelMonthButton: this.hasSecondaryCalendarType
-				? `${this._monthButtonText}, ${this.buttonTextForSecondaryCalendarType.info}` : `${this._monthButtonText}`,
+				? `${this._monthButtonText}, ${this.buttonTextForSecondaryCalendarType.monthButtonInfo}` : `${this._monthButtonText}`,
 		};
 	}
 }

package/src/CalendarPart.js

@@ -8,7 +8,7 @@ import DateComponentBase from "./DateComponentBase.js";
  * @public
  */
 const metadata = {
-	properties: /** @lends  sap.ui.webcomponents.main.CalendarPart.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.CalendarPart.prototype */ {
 		/**
 		 * The timestamp of the currently focused date. Set this property to move the component's focus to a certain date.
 		 * <b>Node:</b> Timestamp is 10-digit Integer representing the seconds (not milliseconds) since the Unix Epoch.

package/src/CardHeader.hbs

@@ -1,42 +1,58 @@
 <div
-	class="{{classes}}"
-	@click="{{_headerClick}}"
-	@keydown="{{_headerKeydown}}"
-	@keyup="{{_headerKeyup}}"
-	role="{{ariaHeaderRole}}"
-	aria-labelledby="{{ariaLabelledByHeader}}"
-	aria-level="{{_ariaLevel}}"
-	aria-roledescription="{{ariaCardHeaderRoleDescription}}"
-	tabindex="0"
 	id="{{_id}}--header"
+	class="{{classes}}"
+	role="group"
+	aria-roledescription="{{ariaRoleDescription}}"
+	@click="{{_click}}"
+	@keydown="{{_keydown}}"
+	@keyup="{{_keyup}}"
+	part="root"
 >
-	{{#if hasAvatar}}
-		<div id="{{_id}}-avatar" class="ui5-card-header-avatar" aria-label="{{ariaCardAvatarLabel}}">
-			<slot name="avatar"></slot>
-		</div>
-	{{/if}}
+	<div
+		class="ui5-card-header-focusable-element"
+		aria-labelledby="{{ariaLabelledBy}}"
+		role="{{ariaRoleFocusableElement}}"
+		data-sap-focus-ref
+		tabindex="0"
+	>
+		{{#if hasAvatar}}
+			<div id="{{_id}}-avatar" class="ui5-card-header-avatar" aria-label="{{ariaCardAvatarLabel}}">
+				<slot name="avatar"></slot>
+			</div>
+		{{/if}}
 
-	<div class="ui5-card-header-text">
-		<div class="ui5-card-header-first-line">
-			{{#if titleText}}
-				<div id="{{_id}}-title" class="ui5-card-header-title" part="title">{{titleText}}</div>
-			{{/if}}
+		<div class="ui5-card-header-text">
+			<div class="ui5-card-header-first-line">
+				{{#if titleText}}
+					<div
+						id="{{_id}}-title"
+						class="ui5-card-header-title"
+						part="title"
+						role="heading"
+						aria-level="3"
+					>{{titleText}}</div>
+				{{/if}}
 
-			{{#if status}}
-				<div class="ui5-card-header-status">
-					<span id="{{_id}}-status" part="status" dir="auto">{{status}}</span>
-				</div>
-			{{/if}}
+				{{#if status}}
+					<div class="ui5-card-header-status">
+						<span id="{{_id}}-status" part="status" dir="auto">{{status}}</span>
+					</div>
+				{{/if}}
 
-		</div>
+			</div>
 
-		{{#if subtitleText}}
-			<div id="{{_id}}-subtitle" class="ui5-card-header-subtitle" part="subtitle">{{subtitleText}}</div>
-		{{/if}}
+			{{#if subtitleText}}
+				<div id="{{_id}}-subtitle" class="ui5-card-header-subtitle" part="subtitle">{{subtitleText}}</div>
+			{{/if}}
+		</div>
 	</div>
 
 	{{#if hasAction}}
-		<div class="ui5-card-header-action">
+		<div
+			class="ui5-card-header-action"
+			@focusin="{{_actionsFocusin}}"
+			@focusout="{{_actionsFocusout}}"
+		>
 			<slot name="action"></slot>
 		</div>
 	{{/if}}

package/src/CardHeader.js

@@ -4,7 +4,6 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import CardHeaderTemplate from "./generated/templates/CardHeaderTemplate.lit.js";
-import Icon from "./Icon.js";
 
 import {
 	AVATAR_TOOLTIP,
@@ -134,6 +133,7 @@ const metadata = {
  * <br>
  * The <code>ui5-card</code> exposes the following CSS Shadow Parts:
  * <ul>
+ * <li>root - Used to style the root DOM element of the CardHeader</li>
  * <li>title - Used to style the title of the CardHeader</li>
  * <li>subtitle - Used to style the subtitle of the CardHeader</li>
  * <li>status - Used to style the status of the CardHeader</li>
@@ -176,27 +176,23 @@ class CardHeader extends UI5Element {
 		};
 	}
 
-	get ariaHeaderRole() {
-		return this.interactive ? "button" : "heading";
+	get _root() {
+		return this.shadowRoot.querySelector(".ui5-card-header");
 	}
 
-	get _ariaLevel() {
-		if (this.interactive) {
-			return undefined;
-		}
-
-		return this.ariaLevel;
+	get ariaRoleDescription() {
+		return this.interactive ? CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
 	}
 
-	get ariaCardHeaderRoleDescription() {
-		return this.interactive ? CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
+	get ariaRoleFocusableElement() {
+		return this.interactive ? "button" : null;
 	}
 
 	get ariaCardAvatarLabel() {
 		return CardHeader.i18nBundle.getText(AVATAR_TOOLTIP);
 	}
 
-	get ariaLabelledByHeader() {
+	get ariaLabelledBy() {
 		const labels = [];
 
 		if (this.titleText) {
@@ -226,25 +222,29 @@ class CardHeader extends UI5Element {
 		return !!this.action.length;
 	}
 
-	static get dependencies() {
-		return [Icon];
-	}
-
 	static async onDefine() {
 		CardHeader.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
-	_headerClick(event) {
+	_actionsFocusin() {
+		this._root.classList.add("ui5-card-header-hide-focus");
+	}
+
+	_actionsFocusout() {
+		this._root.classList.remove("ui5-card-header-hide-focus");
+	}
+
+	_click(event) {
 		// prevents the native browser "click" event from firing
 		event.stopImmediatePropagation();
 
-		if (this.interactive && event.target === event.currentTarget) {
+		if (this.interactive && this._root.contains(event.target)) {
 			this.fireEvent("click");
 		}
 	}
 
-	_headerKeydown(event) {
-		if (!this.interactive || event.target !== event.currentTarget) {
+	_keydown(event) {
+		if (!this.interactive || !this._root.contains(event.target)) {
 			return;
 		}
 
@@ -263,8 +263,8 @@ class CardHeader extends UI5Element {
 		}
 	}
 
-	_headerKeyup(event) {
-		if (!this.interactive || event.target !== event.currentTarget) {
+	_keyup(event) {
+		if (!this.interactive || !this._root.contains(event.target)) {
 			return;
 		}
 

package/src/Carousel.hbs

@@ -8,7 +8,7 @@
     @mouseout="{{_onmouseout}}"
     @mouseover="{{_onmouseover}}"
 >
-    <div class="{{classes.viewport}}">
+    <div class="{{classes.viewport}}" part="content">
         <div class="{{classes.content}}" style="{{styles.content}}">
             {{#each items}}
                  <div id="{{id}}"
@@ -70,7 +70,7 @@
         class="ui5-carousel-navigation-button {{classes.navPrevButton}}"
         icon="slim-arrow-left"
         tabindex="-1"
-        @click={{navigateLeft}}
+        @click={{_navButtonClick}}
     ></ui5-button>
 {{/inline}}
 
@@ -81,6 +81,6 @@
         class="ui5-carousel-navigation-button {{classes.navNextButton}}"
         icon="slim-arrow-right"
         tabindex="-1"
-        @click={{navigateRight}}
+        @click={{_navButtonClick}}
     ></ui5-button>
 {{/inline}}

package/src/Carousel.js

@@ -238,6 +238,15 @@ const metadata = {
  * with the following keyboard shortcuts:
  * <br>
  *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-carousel</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>content - Used to style the content of the component</li>
+ * </ul>
+ *
  * * <h4>Fast Navigation</h4>
  * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
  * In order to use this functionality, you need to import the following module:
@@ -479,6 +488,16 @@ class Carousel extends UI5Element {
 		}
 	}
 
+	_navButtonClick(event) {
+		if (event.target.hasAttribute("arrow-forward")) {
+			this.navigateRight();
+		} else {
+			this.navigateLeft();
+		}
+
+		this.focus();
+	}
+
 	/**
 	 * Changes the currently displayed page.
 	 * @param {Integer} itemIndex The index of the target page

package/src/CheckBox.js

@@ -46,7 +46,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @public
@@ -99,7 +99,7 @@ const metadata = {
 		/**
 		* Defines whether the component is displayed as partially checked.
 		* <br><br>
-		* <b>Note:</b> The indeterminate state can be set only programatically and can’t be achieved by user
+		* <b>Note:</b> The indeterminate state can be set only programmatically and can’t be achieved by user
 		* interaction and the resulting visual state depends on the values of the <code>indeterminate</code>
 		* and <code>checked</code> properties:
 		* <ul>

package/src/ColorPalette.js

@@ -119,7 +119,7 @@ const metadata = {
 		 * @param {string} color the selected color
 		 */
 		"item-click": {
-			details: {
+			detail: {
 				color: {
 					type: String,
 				},

package/src/ColorPaletteItem.js

@@ -17,7 +17,7 @@ import ColorPaletteItemCss from "./generated/themes/ColorPaletteItem.css.js";
 const metadata = {
 	tag: "ui5-color-palette-item",
 	managedSlots: true,
-	properties: /** @lends  sap.ui.webcomponents.main.ColorPaletteItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.ColorPaletteItem.prototype */ {
 		/**
 		 * Defines the colour of the component.
 		 * <br><br>

package/src/ColorPalettePopover.js

@@ -87,7 +87,7 @@ const metadata = {
 		 * @param {string} color the selected color
 		 */
 		"item-click": {
-			details: {
+			detail: {
 				color: {
 					type: String,
 				},

package/src/ColorPicker.js

@@ -1,8 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
-import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
@@ -224,13 +222,6 @@ class ColorPicker extends UI5Element {
 		this.style.setProperty("--ui5_Color_Picker_Progress_Container_Color", tempColor);
 	}
 
-	async onAfterRendering() {
-		if (isIE()) {
-			await renderFinished();
-			this._applySliderStyles();
-		}
-	}
-
 	_applySliderStyles() {
 		const hueSlider = this.getDomRef().querySelector(".ui5-color-picker-hue-slider").shadowRoot,
 			alphaSlider = this.getDomRef().querySelector(".ui5-color-picker-alpha-slider").shadowRoot;

package/src/ComboBox.hbs

@@ -1,6 +1,6 @@
 <div class="ui5-combobox-root ui5-input-focusable-element">
 	{{#if hasValueState}}
-		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{valueStateText}}</span>
+		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{ariaValueStateHiddenText}}</span>
 	{{/if}}
 
 	<input id="ui5-combobox-input"