@ui5/webcomponents 0.0.0-deac3098a → 0.0.0-e0658a650

package/dist/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>
@@ -39,7 +41,7 @@ const metadata = {
 		 * <li><code>CalendarSelectionMode.Range</code> - enables selection of a date range.</li>
 		 * <li><code>CalendarSelectionMode.Multiple</code> - enables selection of multiple dates.</li>
 		 * </ul>
-		 * @type {CalendarSelectionMode}
+		 * @type {sap.ui.webcomponents.main.types.CalendarSelectionMode}
 		 * @defaultvalue "Single"
 		 * @public
 		 */
@@ -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
@@ -234,7 +240,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Calendar
- * @extends CalendarPart
+ * @extends sap.ui.webcomponents.main.CalendarPart
  * @tagname ui5-calendar
  * @appenddocs CalendarDate
  * @public
@@ -290,7 +296,7 @@ class Calendar extends CalendarPart {
 
 		const yearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.primaryCalendarType });
 		const localeData = getCachedLocaleDataInstance(getLocale());
-		this._headerMonthButtonText = localeData.getMonths("wide", this.primaryCalendarType)[this._calendarDate.getMonth()];
+		this._headerMonthButtonText = localeData.getMonthsStandAlone("wide", this.primaryCalendarType)[this._calendarDate.getMonth()];
 
 		if (this._currentPicker === "year") {
 			const rangeStart = new CalendarDate(this._calendarDate, this._primaryCalendarType);
@@ -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/dist/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/dist/CalendarHeader.js

@@ -22,7 +22,7 @@ const metadata = {
 	properties: {
 		/**
 		 * Already normalized by Calendar
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @public
 		 */
 		timestamp: {
@@ -31,7 +31,7 @@ const metadata = {
 
 		/**
 		 * Already normalized by Calendar
-		 * @type {CalendarType}
+		 * @type {sap.ui.webcomponents.base.types.CalendarType}
 		 * @public
 		 */
 		primaryCalendarType: {
@@ -42,7 +42,7 @@ const metadata = {
 		 * Already normalized by Calendar
 		 * @sience 1.0.0-rc.16
 		 * @defaultvalue undefined
-		 * @type {CalendarType}
+		 * @type {sap.ui.webcomponents.base.types.CalendarType}
 		 * @public
 		 */
 		secondaryCalendarType: {
@@ -51,7 +51,7 @@ const metadata = {
 
 		/**
 		 * Stores information for month button for secondary calendar type
-		 * @type {Object}
+		 * @type {object}
 		 * @private
 		*/
 		buttonTextForSecondaryCalendarType: {
@@ -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/dist/CalendarPart.js

@@ -8,11 +8,11 @@ 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.
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @protected
 		 */
 		timestamp: {
@@ -31,7 +31,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.CalendarPart
- * @extends DateComponentBase
+ * @extends sap.ui.webcomponents.main.DateComponentBase
  * @public
  */
 class CalendarPart extends DateComponentBase {

package/dist/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,
@@ -91,7 +90,7 @@ const metadata = {
 		 * Define the <code>aria-level</code> attribute of the component
 		 * <b>Note: </b> If the interactive property is set, <code>aria-level</code> attribute is not rendered at all.
 		 * @private
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultValue 3
 		 */
 		ariaLevel: {
@@ -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/dist/Carousel.js

@@ -52,7 +52,7 @@ const metadata = {
 
 		/**
 		 * Defines the number of items per page on small size (up to 640px). One item per page shown by default.
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 1
 		 * @public
 		 */
@@ -63,7 +63,7 @@ const metadata = {
 
 		/**
 		 * Defines the number of items per page on medium size (from 640px to 1024px). One item per page shown by default.
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 1
 		 * @public
 		 */
@@ -74,7 +74,7 @@ const metadata = {
 
 		/**
 		 * Defines the number of items per page on large size (more than 1024px). One item per page shown by default.
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 1
 		 * @public
 		 */
@@ -112,7 +112,7 @@ const metadata = {
 
 		/**
 		 * Defines the index of the initially selected item.
-		 * @type {Integer}
+		 * @type {sap.ui.webcomponents.base.types.Integer}
 		 * @defaultvalue 0
 		 * @private
 		 */
@@ -133,7 +133,7 @@ const metadata = {
 		 * When set to "Content", the arrows are placed on the sides of the current page.
 		 * <br>
 		 * When set to "Navigation", the arrows are placed on the sides of the page indicator.
-		 * @type {CarouselArrowsPlacement}
+		 * @type {sap.ui.webcomponents.main.types.CarouselArrowsPlacement}
 		 * @defaultvalue "Content"
 		 * @public
 		 */
@@ -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:
@@ -256,7 +265,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Carousel
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-carousel
  * @since 1.0.0-rc.6
  * @public
@@ -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/dist/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>
@@ -126,6 +126,8 @@ const metadata = {
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
+		 * @formEvents change
+		 * @formProperty
 		 * @public
 		 */
 		checked: {
@@ -157,7 +159,7 @@ const metadata = {
 		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
-		 * @type {ValueState}
+		 * @type {sap.ui.webcomponents.base.types.ValueState}
 		 * @defaultvalue "None"
 		 * @public
 		 */
@@ -175,7 +177,7 @@ const metadata = {
 		 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
 		 * </ul>
 		 *
-		 * @type {WrappingType}
+		 * @type {sap.ui.webcomponents.main.types.WrappingType}
 		 * @defaultvalue "None"
 		 * @public
 		 */

package/dist/ColorPalette.js

@@ -69,7 +69,7 @@ const metadata = {
 		/**
 		 * Defines the default color of the color palette
 		 * <b>Note:</b> The default color should be a part of the ColorPalette colors</code>
-		 * @type {CSSColor}
+		 * @type {sap.ui.webcomponents.base.types.CSSColor}
 		 * @private
 		 * @since 1.0.0-rc.16
 		 */
@@ -79,7 +79,7 @@ const metadata = {
 
 		/**
 		 * Defines the selected color.
-		 * @type {CSSColor}
+		 * @type {sap.ui.webcomponents.base.types.CSSColor}
 		 * @private
 		 */
 		_selectedColor: {
@@ -88,7 +88,7 @@ const metadata = {
 
 		/**
 		 * Defines if the palette is in Popup or Embeded mode.
-		 * @type {CSSColor}
+		 * @type {sap.ui.webcomponents.base.types.CSSColor}
 		 * @private
 		 */
 		popupMode: {
@@ -119,7 +119,7 @@ const metadata = {
 		 * @param {string} color the selected color
 		 */
 		"item-click": {
-			details: {
+			detail: {
 				color: {
 					type: String,
 				},
@@ -146,7 +146,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ColorPalette
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-color-palette
  * @since 1.0.0-rc.12
  * @appenddocs ColorPaletteItem

package/dist/ColorPaletteItem.js

@@ -17,13 +17,13 @@ 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>
 		 * <b>Note:</b> The value should be a valid CSS color.
 		 *
-		 * @type {CSSColor}
+		 * @type {sap.ui.webcomponents.base.types.CSSColor}
 		 * @public
 		 */
 		value: {

package/dist/ColorPalettePopover.js

@@ -58,7 +58,7 @@ const metadata = {
 		/**
 		 * Defines the default color of the component.
 		 * <b>Note:</b> The default color should be a part of the ColorPalette colors</code>
-		 * @type {CSSColor}
+		 * @type {sap.ui.webcomponents.base.types.CSSColor}
 		 * @public
 		 */
 		defaultColor: {
@@ -87,7 +87,7 @@ const metadata = {
 		 * @param {string} color the selected color
 		 */
 		"item-click": {
-			details: {
+			detail: {
 				color: {
 					type: String,
 				},
@@ -120,7 +120,7 @@ const metadata = {
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ColorPalettePopover
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-color-palette-popover
  * @public
  * @since 1.0.0-rc.16

package/dist/ColorPicker.js

@@ -1,11 +1,10 @@
 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";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
 	getRGBColor,
 	HSLToRGB,
@@ -17,6 +16,16 @@ import Input from "./Input.js";
 import Slider from "./Slider.js";
 import Label from "./Label.js";
 
+import {
+	COLORPICKER_ALPHA_SLIDER,
+	COLORPICKER_HUE_SLIDER,
+	COLORPICKER_HEX,
+	COLORPICKER_RED,
+	COLORPICKER_GREEN,
+	COLORPICKER_BLUE,
+	COLORPICKER_ALPHA,
+} from "./generated/i18n/i18n-defaults.js";
+
 // Styles
 import ColorPickerCss from "./generated/themes/ColorPicker.css.js";
 
@@ -31,7 +40,7 @@ const metadata = {
 		 * Defines the currently selected color of the component.
 		 * <br><br>
 		 * <b>Note</b>: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.
-		 * @type {CSSColor}
+		 * @type {sap.ui.webcomponents.base.types.CSSColor}
 		 * @public
 		 */
 		color: {
@@ -150,7 +159,7 @@ const metadata = {
  * @author SAP SE
  * @since 1.0.0-rc.12
  * @alias sap.ui.webcomponents.main.ColorPicker
- * @extends UI5Element
+ * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-color-picker
  * @public
  */
@@ -179,6 +188,10 @@ class ColorPicker extends UI5Element {
 		];
 	}
 
+	static async onDefine() {
+		ColorPicker.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+
 	constructor() {
 		super();
 
@@ -209,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;
@@ -533,6 +539,34 @@ class ColorPicker extends UI5Element {
 		this._setMainColor(this._hue);
 	}
 
+	get hueSliderLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_HUE_SLIDER);
+	}
+
+	get alphaSliderLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_ALPHA_SLIDER);
+	}
+
+	get hexInputLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_HEX);
+	}
+
+	get redInputLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_RED);
+	}
+
+	get greenInputLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_GREEN);
+	}
+
+	get blueInputLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_BLUE);
+	}
+
+	get alphaInputLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_ALPHA);
+	}
+
 	get inputsDisabled() {
 		return this._wrongHEX ? true : undefined;
 	}