@ui5/webcomponents 0.0.0-2c7615fe9 → 0.0.0-3236d56be

package/dist/Calendar.js

@@ -4,6 +4,9 @@ import {
 	isF4,
 	isF4Shift,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
 import * as CalendarDateComponent from "./CalendarDate.js";
 import CalendarPart from "./CalendarPart.js";
 import CalendarHeader from "./CalendarHeader.js";
@@ -26,6 +29,7 @@ import calendarCSS from "./generated/themes/Calendar.css.js";
  */
 const metadata = {
 	tag: "ui5-calendar",
+	fastNavigation: true,
 	properties: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
 		/**
 		 * Defines the type of selection used in the calendar component.
@@ -74,6 +78,14 @@ const metadata = {
 		_nextButtonDisabled: {
 			type: Boolean,
 		},
+
+		_headerMonthButtonText: {
+			type: String,
+		},
+
+		_headerYearButtonText: {
+			type: String,
+		},
 	},
 	managedSlots: true,
 	slots: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
@@ -164,8 +176,8 @@ const metadata = {
  * <br>
  * - Month picker: <br>
  * <ul>
- * <li>[PAGEUP] - Navigate to the previous month</li>
- * <li>[PAGEDOWN] - Navigate to the next month</li>
+ * <li>[PAGEUP] - Navigate to the previous year</li>
+ * <li>[PAGEDOWN] - Navigate to the next year</li>
  * <li>[HOME] - Navigate to the first month of the current row</li>
  * <li>[END] - Navigate to the last month of the current row</li>
  * <li>[CTRL] + [HOME] - Navigate to the first month of the current year</li>
@@ -183,6 +195,12 @@ const metadata = {
  * </ul>
  * <br>
  *
+ * <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:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
 * <h3>Calendar types</h3>
  * The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.
  * By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,
@@ -259,7 +277,7 @@ class Calendar extends CalendarPart {
 
 		// Create tags for the selected dates that don't already exist in DOM
 		selectedValues.filter(value => !valuesInDOM.includes(value)).forEach(value => {
-			const dateElement = document.createElement("ui5-date");
+			const dateElement = document.createElement(CalendarDateComponent.default.getMetadata().getTag());
 			dateElement.value = value;
 			this.appendChild(dateElement);
 		});
@@ -269,6 +287,21 @@ class Calendar extends CalendarPart {
 		await renderFinished(); // Await for the current picker to render and then ask if it has previous/next pages
 		this._previousButtonDisabled = !this._currentPickerDOM._hasPreviousPage();
 		this._nextButtonDisabled = !this._currentPickerDOM._hasNextPage();
+
+		const yearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.primaryCalendarType });
+		const localeData = getCachedLocaleDataInstance(getLocale());
+		this._headerMonthButtonText = localeData.getMonths("wide", this.primaryCalendarType)[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);
+
+			this._headerYearButtonText = `${yearFormat.format(rangeStart.toLocalJSDate(), true)} - ${yearFormat.format(rangeEnd.toLocalJSDate(), true)}`;
+		} else {
+			this._headerYearButtonText = String(yearFormat.format(this._localDate, true));
+		}
 	}
 
 	/**
@@ -307,13 +340,72 @@ class Calendar extends CalendarPart {
 		this._currentPickerDOM._showNextPage();
 	}
 
+	get secondaryCalendarTypeButtonText() {
+		if (!this.secondaryCalendarType) {
+			return;
+		}
+
+		const localDate = new Date(this._timestamp * 1000);
+		const secondYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType });
+		const secondMonthInfo = this._getDisplayedSecondaryMonthText();
+		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]),
+		};
+	}
+
+	_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 only hidden when the month picker is shown
+	 * The month button is hidden when the month picker or year picker is shown
 	 * @returns {boolean}
 	 * @private
 	 */
 	get _isHeaderMonthButtonHidden() {
-		return this._currentPicker === "month";
+		return this._currentPicker === "month" || this._currentPicker === "year";
 	}
 
 	get _isDayPickerHidden() {

package/dist/CalendarHeader.js

@@ -1,11 +1,7 @@
-import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
-import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
-import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
-import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
@@ -53,6 +49,15 @@ const metadata = {
 			type: CalendarType,
 		},
 
+		/**
+		 * Stores information for month button for secondary calendar type
+		 * @type {Object}
+		 * @private
+		*/
+		buttonTextForSecondaryCalendarType: {
+			type: Object,
+		},
+
 		isNextButtonDisabled: {
 			type: Boolean,
 		},
@@ -65,6 +70,14 @@ const metadata = {
 			type: Boolean,
 		},
 
+		_monthButtonText: {
+			type: String,
+		},
+
+		_yearButtonText: {
+			type: String,
+		},
+
 		isYearButtonHidden: {
 			type: Boolean,
 		},
@@ -99,31 +112,20 @@ class CalendarHeader extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		CalendarHeader.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
-		const localeData = getCachedLocaleDataInstance(getLocale());
-		const yearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.primaryCalendarType });
-		const localDate = new Date(this.timestamp * 1000);
-		const calendarDate = CalendarDate.fromTimestamp(localDate.getTime(), this.primaryCalendarType);
-		this._monthButtonText = localeData.getMonths("wide", this.primaryCalendarType)[calendarDate.getMonth()];
-		this._yearButtonText = yearFormat.format(localDate, true);
-		this._prevButtonText = this.i18nBundle.getText(CALENDAR_HEADER_PREVIOUS_BUTTON);
-		this._nextButtonText = this.i18nBundle.getText(CALENDAR_HEADER_NEXT_BUTTON);
+		this._prevButtonText = CalendarHeader.i18nBundle.getText(CALENDAR_HEADER_PREVIOUS_BUTTON);
+		this._nextButtonText = CalendarHeader.i18nBundle.getText(CALENDAR_HEADER_NEXT_BUTTON);
 
 		if (this.hasSecondaryCalendarType) {
-			const secondYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType });
-			const secoundaryMonths = this._getDisplayedSecondaryMonths(localDate);
-
-			this._secondaryMonthInfo = this._getDisplayedSecondaryMonthText(secoundaryMonths);
-			this._secondMonthButtonText = this._secondaryMonthInfo.text;
-			this._secondYearButtonText = secondYearFormat.format(localDate, true);
+			this._secondMonthButtonText = this.buttonTextForSecondaryCalendarType.monthButtonText;
+			this._secondYearButtonText = this.buttonTextForSecondaryCalendarType.yearButtonText;
 		}
 	}
 
@@ -177,47 +179,6 @@ class CalendarHeader extends UI5Element {
 		}
 	}
 
-	_getDisplayedSecondaryMonthText(month) {
-		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]),
-		};
-	}
-
-	_getDisplayedSecondaryMonths(localDate) {
-		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._daysInMonth(lastDate));
-		lastDate = new CalendarDate(lastDate, this.secondaryCalendarType);
-		const endMonth = lastDate.getMonth();
-		return { startMonth, endMonth };
-	}
-
-	_daysInMonth(calendarDate) {
-		calendarDate = new CalendarDate(calendarDate);
-		calendarDate.setDate(1);
-		calendarDate.setMonth(calendarDate.getMonth() + 1);
-		calendarDate.setDate(0);
-		return calendarDate.getDate();
-	}
-
 	get hasSecondaryCalendarType() {
 		return !!this.secondaryCalendarType;
 	}
@@ -237,7 +198,8 @@ class CalendarHeader extends UI5Element {
 
 	get accInfo() {
 		return {
-			ariaLabelMonthButton: this.hasSecondaryCalendarType ? `${this._monthButtonText},${this._secondaryMonthInfo.textInfo}` : `${this._monthButtonText}`,
+			ariaLabelMonthButton: this.hasSecondaryCalendarType
+				? `${this._monthButtonText}, ${this.buttonTextForSecondaryCalendarType.info}` : `${this._monthButtonText}`,
 		};
 	}
 }

package/dist/Card.js

@@ -1,6 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import CardTemplate from "./generated/templates/CardTemplate.lit.js";
 import Icon from "./Icon.js";
 
@@ -47,6 +48,31 @@ const metadata = {
 	},
 	properties: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 
+		/**
+		 * Defines the accessible name of the component, which is used as the name of the card region and should be unique per card.
+		 * <b>Note:</b> <code>accessibleName</code> should be always set, unless <code>accessibleNameRef</code> is set.
+		 *
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.0.0-rc.16
+		 */
+		accessibleName: {
+			type: String,
+		},
+
+		/**
+		 * Defines the IDs of the elements that label the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.0.0-rc.16
+		 */
+		accessibleNameRef: {
+			type: String,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
 
@@ -80,14 +106,9 @@ const metadata = {
  * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-card
  * @public
+ * @appenddocs CardHeader
  */
 class Card extends UI5Element {
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
 	static get metadata() {
 		return metadata;
 	}
@@ -115,12 +136,14 @@ class Card extends UI5Element {
 		return !!this.header.length;
 	}
 
-	get _ariaCardRoleDescription() {
-		return this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD);
+	get _getAriaLabel() {
+		const effectiveAriaLabelText = getEffectiveAriaLabelText(this),
+			effectiveAriaLabel = effectiveAriaLabelText ? ` ${effectiveAriaLabelText}` : "";
+		return Card.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD) + effectiveAriaLabel;
 	}
 
 	get _ariaCardContentLabel() {
-		return this.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT);
+		return Card.i18nBundle.getText(ARIA_LABEL_CARD_CONTENT);
 	}
 
 	static get dependencies() {
@@ -128,7 +151,7 @@ class Card extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Card.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/dist/CardHeader.js

@@ -1,7 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+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";
 
@@ -35,9 +36,6 @@ const metadata = {
 
 		/**
 		 * Defines an action, displayed in the right most part of the header.
-		 * <br><br>
-		 * <b>Note:</b> If set, the <code>status</code> text will not be displayed,
-		 * you can either have <code>action</code>, or <code>status</code>.
 		 * @type {HTMLElement[]}
 		 * @slot
 		 * @public
@@ -70,9 +68,6 @@ const metadata = {
 
 		/**
 		 * Defines the status text.
-		 * <br><br>
-		 * <b>Note:</b> If the <code>action</code> slot is set, the <code>status</code> will not be displayed,
-		 * you can either have <code>action</code>, or <code>status</code>.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
@@ -92,6 +87,18 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * 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}
+		 * @defaultValue 3
+		 */
+		ariaLevel: {
+			type: Integer,
+			defaultValue: 3,
+		},
+
 		_headerActive: {
 			type: Boolean,
 			noAttribute: true,
@@ -141,17 +148,10 @@ const metadata = {
  * @alias sap.ui.webcomponents.main.CardHeader
  * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-card-header
- * @appenddocs CardHeader
  * @public
  * @since 1.0.0-rc.15
  */
 class CardHeader extends UI5Element {
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
 	static get metadata() {
 		return metadata;
 	}
@@ -180,16 +180,20 @@ class CardHeader extends UI5Element {
 		return this.interactive ? "button" : "heading";
 	}
 
-	get ariaLevel() {
-		return this.interactive ? undefined : "3";
+	get _ariaLevel() {
+		if (this.interactive) {
+			return undefined;
+		}
+
+		return this.ariaLevel;
 	}
 
 	get ariaCardHeaderRoleDescription() {
-		return this.interactive ? this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : this.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
+		return this.interactive ? CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
 	}
 
 	get ariaCardAvatarLabel() {
-		return this.i18nBundle.getText(AVATAR_TOOLTIP);
+		return CardHeader.i18nBundle.getText(AVATAR_TOOLTIP);
 	}
 
 	get ariaLabelledByHeader() {
@@ -227,19 +231,20 @@ class CardHeader extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		CardHeader.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	_headerClick(event) {
-		event.stopImmediatePropagation(); // prevents the native browser "click" event from firing
+		// prevents the native browser "click" event from firing
+		event.stopImmediatePropagation();
 
-		if (this.interactive) {
+		if (this.interactive && event.target === event.currentTarget) {
 			this.fireEvent("click");
 		}
 	}
 
 	_headerKeydown(event) {
-		if (!this.interactive) {
+		if (!this.interactive || event.target !== event.currentTarget) {
 			return;
 		}
 
@@ -259,7 +264,7 @@ class CardHeader extends UI5Element {
 	}
 
 	_headerKeyup(event) {
-		if (!this.interactive) {
+		if (!this.interactive || event.target !== event.currentTarget) {
 			return;
 		}
 

package/dist/Carousel.js

@@ -8,10 +8,7 @@ import {
 	isUp,
 	isF7,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import {
-	fetchI18nBundle,
-	getI18nBundle,
-} from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
@@ -41,6 +38,7 @@ import CarouselCss from "./generated/themes/Carousel.css.js";
 const metadata = {
 	tag: "ui5-carousel",
 	languageAware: true,
+	fastNavigation: true,
 	properties: /** @lends sap.ui.webcomponents.main.Carousel.prototype */ {
 		/**
 		 * Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.
@@ -234,10 +232,18 @@ const metadata = {
  * </ul>
  *
  * <h3>Keyboard Handling</h3>
+ *
+ * <h4>Basic Navigation</h4>
  * When the <code>ui5-carousel</code> is focused the user can navigate between the items
  * with the following keyboard shortcuts:
  * <br>
  *
+ * * <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:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
  * <ul>
  * <li>[UP/DOWN] - Navigates to previous and next item</li>
  * <li>[LEFT/RIGHT] - Navigates to previous and next item</li>
@@ -283,8 +289,6 @@ class Carousel extends UI5Element {
 		this._scrollEnablement.attachEvent("touchend", event => {
 			this._updateScrolling(event);
 		});
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 		this._onResizeBound = this._onResize.bind(this);
 		this._resizing = false; // indicates if the carousel is in process of resizing
 
@@ -499,7 +503,9 @@ class Carousel extends UI5Element {
 				tabIndex: visible ? "0" : "-1",
 				posinset: idx + 1,
 				setsize: this.content.length,
-				width: this._itemWidth,
+				styles: {
+					width: `${this._itemWidth}px`,
+				},
 				classes: visible ? "" : "ui5-carousel-item--hidden",
 			};
 		});
@@ -597,7 +603,7 @@ class Carousel extends UI5Element {
 		for (let index = 0; index < pages; index++) {
 			dots.push({
 				active: index === this._selectedIndex,
-				ariaLabel: this.i18nBundle.getText(CAROUSEL_DOT_TEXT, [index + 1], [pages]),
+				ariaLabel: Carousel.i18nBundle.getText(CAROUSEL_DOT_TEXT, index + 1, pages),
 			});
 		}
 
@@ -634,7 +640,7 @@ class Carousel extends UI5Element {
 	}
 
 	get ofText() {
-		return this.i18nBundle.getText(CAROUSEL_OF_TEXT);
+		return Carousel.i18nBundle.getText(CAROUSEL_OF_TEXT);
 	}
 
 	get ariaActiveDescendant() {
@@ -642,11 +648,11 @@ class Carousel extends UI5Element {
 	}
 
 	get nextPageText() {
-		return this.i18nBundle.getText(CAROUSEL_NEXT_ARROW_TEXT);
+		return Carousel.i18nBundle.getText(CAROUSEL_NEXT_ARROW_TEXT);
 	}
 
 	get previousPageText() {
-		return this.i18nBundle.getText(CAROUSEL_PREVIOUS_ARROW_TEXT);
+		return Carousel.i18nBundle.getText(CAROUSEL_PREVIOUS_ARROW_TEXT);
 	}
 
 	/**
@@ -675,7 +681,7 @@ class Carousel extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Carousel.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }