@ui5/webcomponents 0.0.0-b132dd7b9 → 0.0.0-b3a4f8020

package/package-scripts.cjs

@@ -5,9 +5,9 @@ const options = {
 	portStep: 2,
 	noWatchTS: true,
 	dev: true,
+	cssVariablesTarget: "host",
 	internal: {
 		cypress_code_coverage: false,
-		cypress_acc_tests: false,
 	},
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "0.0.0-b132dd7b9",
+  "version": "0.0.0-b3a4f8020",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -8,8 +8,7 @@
   "type": "module",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
-  "private": false,
-  "customElements": "./dist/custom-elements.json",
+  "customElements": "dist/custom-elements.json",
   "keywords": [
     "openui5",
     "sapui5",
@@ -18,20 +17,22 @@
   "scripts": {
     "clean": "wc-dev clean",
     "lint": "wc-dev lint",
-    "lint:scope": "nps scope.lint",
+    "lint:scope": "wc-dev scope.lint",
     "start": "wc-dev start",
     "watch": "wc-dev watch",
-    "generate": "nps generate",
-    "generateAPI": "nps generateAPI",
+    "generate": "wc-dev generate",
+    "generateCEM": "wc-dev generateAPI.generateCEM",
+    "mergeCEM": "wc-dev generateAPI.mergeCEM",
+    "validateCEM": "wc-dev generateAPI.validateCEM",
     "build": "wc-dev build",
-    "bundle": "nps build.bundle",
-    "test": "wc-dev test",
-    "test:suite-1": "wc-dev test-suite-1",
-    "test:suite-2": "wc-dev test-suite-2",
-    "test:cypress": "nps test-cy-ci",
-    "test:cypress:suite-1": "nps test-cy-ci-suite-1",
-    "test:cypress:suite-2": "nps test-cy-ci-suite-2",
-    "test:cypress:open": "nps test-cy-open",
+    "bundle": "wc-dev build.bundle",
+    "test": "yarn test:cypress",
+    "test:cypress": "wc-dev test-cy-ci",
+    "test:cypress:suite-1": "wc-dev test-cy-ci-suite-1",
+    "test:cypress:suite-2": "wc-dev test-cy-ci-suite-2",
+    "test:cypress:suite-3": "wc-dev test-cy-ci-suite-3",
+    "test:cypress:suite-4": "wc-dev test-cy-ci-suite-4",
+    "test:cypress:open": "wc-dev test-cy-open",
     "test:cypress:single": "npx cypress run --component --browser chrome --spec",
     "test:vitest": "yarn vitest run",
     "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
@@ -39,7 +40,6 @@
     "prepublishOnly": "tsc -b"
   },
   "exports": {
-    "./.port": "./.port",
     "./src/*": "./src/*",
     "./dist/*": "./dist/*",
     "./package.json": "./package.json",
@@ -50,23 +50,26 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/SAP/ui5-webcomponents.git",
+    "url": "https://github.com/UI5/webcomponents.git",
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.0.0-b132dd7b9",
-    "@ui5/webcomponents-icons": "0.0.0-b132dd7b9",
-    "@ui5/webcomponents-icons-business-suite": "0.0.0-b132dd7b9",
-    "@ui5/webcomponents-icons-tnt": "0.0.0-b132dd7b9",
-    "@ui5/webcomponents-localization": "0.0.0-b132dd7b9",
-    "@ui5/webcomponents-theming": "0.0.0-b132dd7b9"
+    "@ui5/webcomponents-base": "0.0.0-b3a4f8020",
+    "@ui5/webcomponents-icons": "0.0.0-b3a4f8020",
+    "@ui5/webcomponents-icons-business-suite": "0.0.0-b3a4f8020",
+    "@ui5/webcomponents-icons-tnt": "0.0.0-b3a4f8020",
+    "@ui5/webcomponents-localization": "0.0.0-b3a4f8020",
+    "@ui5/webcomponents-theming": "0.0.0-b3a4f8020"
   },
   "devDependencies": {
-    "@ui5/cypress-internal": "0.0.0",
-    "@ui5/webcomponents-tools": "0.0.0-b132dd7b9",
-    "chromedriver": "^135.0.0",
+    "@custom-elements-manifest/analyzer": "^0.10.10",
+    "@ui5/cypress-internal": "0.1.0",
+    "@ui5/webcomponents-tools": "0.0.0-b3a4f8020",
+    "cypress": "15.9.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
+    "vite": "5.4.21",
     "vitest": "^3.0.2"
-  }
-}
+  },
+  "gitHead": "0a174f7ce9239f60c2840e8920fd70e3cf935a61"
+}

package/src/AvatarBadgeTemplate.tsx

@@ -0,0 +1,16 @@
+import type AvatarBadge from "./AvatarBadge.js";
+import Icon from "./Icon.js";
+
+export default function AvatarBadgeTemplate(this: AvatarBadge) {
+	return (
+		<>
+			{!this.invalid && (
+				<Icon
+					name={this.icon}
+					class="ui5-avatar-badge-icon"
+					mode="Decorative"
+				></Icon>
+			)}
+		</>
+	);
+}

package/src/AvatarGroupTemplate.tsx

@@ -6,7 +6,14 @@ export default function AvatarGroupTemplate(this: AvatarGroup) {
 	return (
 		<div class="ui5-avatar-group-root">
 			<div
-				class="ui5-avatar-group-items"
+				class={{
+					"ui5-avatar-group-items": true,
+					"ui5-avatar-group-items-xs": this.firstAvatarSize === AvatarSize.XS,
+					"ui5-avatar-group-items-s": this.firstAvatarSize === AvatarSize.S,
+					"ui5-avatar-group-items-m": this.firstAvatarSize === AvatarSize.M,
+					"ui5-avatar-group-items-l": this.firstAvatarSize === AvatarSize.L,
+					"ui5-avatar-group-items-xl": this.firstAvatarSize === AvatarSize.XL,
+				}}
 				role={this._role}
 				tabindex={this._groupTabIndex}
 				aria-label={this._ariaLabelText}

package/src/AvatarTemplate.tsx

@@ -8,27 +8,34 @@ export default function AvatarTemplate(this: Avatar) {
 			tabindex={this.tabindex}
 			data-sap-focus-ref
 			role={this._role}
+			aria-hidden={this.effectiveAriaHidden}
 			aria-haspopup={this._ariaHasPopup}
 			aria-label={this.accessibleNameText}
 			onKeyUp={this._onkeyup}
 			onKeyDown={this._onkeydown}
 			onClick={this._onclick}
 		>
-			{this.hasImage ?
+			{this._hasImage ?
 				<slot></slot>
-				:
-				<>
-					{ this.icon && <Icon class="ui5-avatar-icon" name={this.icon} accessibleName={this.accessibleName}></Icon> }
+				: <>
+					{this.icon && <Icon class="ui5-avatar-icon" name={this.icon} accessibleName={this.accessibleName}></Icon>}
 
-					{ this.initials &&
-					<>
-						<span class="ui5-avatar-initials ui5-avatar-initials-hidden">{this.validInitials}</span>
+					{this.initials ? (
+						<>
+							{/* Show initials + hidden fallback icon */}
+							<span class="ui5-avatar-initials ui5-avatar-initials-hidden">{this.validInitials}</span>
+							<Icon
+								name={this.fallbackIcon}
+								class="ui5-avatar-icon ui5-avatar-icon-fallback ui5-avatar-fallback-icon-hidden"
+							></Icon>
+						</>
+					) : (
+						// Show fallback icon only
 						<Icon
 							name={this.fallbackIcon}
-							class="ui5-avatar-icon ui5-avatar-icon-fallback ui5-avatar-fallback-icon-hidden"
+							class="ui5-avatar-icon ui5-avatar-icon-fallback"
 						></Icon>
-					</>
-					}
+					)}
 				</>
 			}
 

package/src/BarTemplate.tsx

@@ -4,7 +4,7 @@ export default function BarTemplate(this: Bar) {
 	return (
 		<div
 			class="ui5-bar-root"
-			aria-label={this.accInfo.role && this.accInfo.label}
+			aria-label={this.accInfo.label}
 			role={this.accInfo.role}
 			part="bar"
 		>

package/src/BreadcrumbsTemplate.tsx

@@ -52,11 +52,10 @@ export default function BreadcrumbsTemplate(this: Breadcrumbs) {
 					<li class="ui5-breadcrumbs-current-location" onClick={this._onLabelPress}>
 						<span
 							id={`${this._id}-labelWrapper`}
-							role="link"
 							aria-current="page"
 							aria-label={this._currentLocationAccName}
 						>
-							<Label>
+							<Label wrappingType="None">
 								{this._currentLocationText}
 							</Label>
 						</span>

package/src/BusyIndicatorTemplate.tsx

@@ -6,7 +6,10 @@ export default function BusyIndicatorTemplate(this: BusyIndicator) {
 		<div class="ui5-busy-indicator-root">
 			{this._isBusy && (
 				<div
-					class="ui5-busy-indicator-busy-area"
+					class={{
+						"ui5-busy-indicator-busy-area": true,
+						"ui5-busy-indicator-busy-area-over-content": this.hasContent,
+					}}
 					title={this.ariaTitle}
 					tabindex={0}
 					role="progressbar"

package/src/ButtonTemplate.tsx

@@ -1,5 +1,7 @@
 import type Button from "./Button.js";
 import Icon from "./Icon.js";
+import BusyIndicator from "./BusyIndicator.js";
+import BusyIndicatorSize from "./types/BusyIndicatorSize.js";
 
 export default function ButtonTemplate(this: Button, injectedProps?: {
 		ariaPressed?: boolean,
@@ -15,7 +17,7 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 				"ui5-button-root": true,
 				"ui5-button-badge-placement-end": this.badge[0]?.design === "InlineText",
 				"ui5-button-badge-placement-end-top": this.badge[0]?.design === "OverlayText",
-				"ui5-button-badge-dot": this.badge[0]?.design === "AttentionDot",
+				"ui5-button-badge-dot": this.badge[0]?.design === "AttentionDot"
 			}}
 			disabled={this.disabled}
 			data-sap-focus-ref
@@ -32,11 +34,13 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 			onTouchStart={this._ontouchstart}
 			onTouchEnd={this._ontouchend}
 			tabindex={this.tabIndexValue}
-			aria-expanded={this.accessibilityAttributes.expanded}
-			aria-controls={this.accessibilityAttributes.controls}
-			aria-haspopup={this._hasPopup}
-			aria-label={this.ariaLabelText}
+			aria-expanded={this._computedAccessibilityAttributes?.expanded}
+			aria-controls={this._computedAccessibilityAttributes?.controls}
+			aria-haspopup={this._computedAccessibilityAttributes?.hasPopup}
+			aria-label={this._computedAccessibilityAttributes?.ariaLabel}
+			aria-keyshortcuts={this._computedAccessibilityAttributes?.ariaKeyShortcuts}
 			aria-description={this.ariaDescriptionText}
+			aria-busy={this.loading ? "true" : undefined}
 			title={this.buttonTitle}
 			part="button"
 			role={this.effectiveAccRole}
@@ -69,5 +73,15 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 				<slot name="badge"/>
 			}
 		</button>
+		{this.loading &&
+			<BusyIndicator
+				id={`${this._id}-button-busy-indicator`}
+				class="ui5-button-busy-indicator"
+				size={this.iconOnly ? BusyIndicatorSize.S : BusyIndicatorSize.M}
+				active={true}
+				delay={this.loadingDelay}
+				inert={this.loading}
+			/>
+		}
 	</>);
 }

package/src/CalendarHeaderTemplate.tsx

@@ -13,9 +13,14 @@ export default function CalendarTemplate(this: Calendar) {
 					"ui5-calheader-arrowbtn": true,
 					"ui5-calheader-arrowbtn-disabled": this._previousButtonDisabled,
 				}}
+				part="calendar-header-arrow-button"
 				role="button"
 				onMouseDown={this.onPrevButtonClick}
-				title={this.headerPreviousButtonText}
+				tabindex={this._previousButtonDisabled ? -1 : 0}
+				title={this.accInfo.tooltipPrevButton}
+				aria-label={this.accInfo.ariaLabelPrevButton}
+				aria-description={this.accInfo.ariaLabelPrevButton}
+				aria-keyshortcuts={this.accInfo.keyShortcutPrevButton}
 			>
 				<Icon class="ui5-calheader-arrowicon" name={slimArowLeft}/>
 			</div>
@@ -24,11 +29,15 @@ 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"
 					aria-label={this.accInfo.ariaLabelMonthButton}
-					onClick={this.onHeaderShowMonthPress}
+					aria-description={this.accInfo.ariaLabelMonthButton}
+					title={this.accInfo.tooltipMonthButton}
+					aria-keyshortcuts={this.accInfo.keyShortcutMonthButton}
+					onClick={this.onHeaderMonthButtonPress}
 					onKeyDown={this.onMonthButtonKeyDown}
 					onKeyUp={this.onMonthButtonKeyUp}
 				>
@@ -41,24 +50,37 @@ 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"
-					onClick={this.onHeaderShowYearPress}
+					aria-label={this.accInfo.ariaLabelYearButton}
+					aria-description={this.accInfo.ariaLabelYearButton}
+					onClick={this.onHeaderYearButtonPress}
 					onKeyDown={this.onYearButtonKeyDown}
 					onKeyUp={this.onYearButtonKeyUp}
+					title={this.accInfo.tooltipYearButton}
+					aria-keyshortcuts={this.accInfo.keyShortcutYearButton}
 				>
 					<span>{this._headerYearButtonText}</span>
 					{this.hasSecondaryCalendarType &&
 						<span class="ui5-calheader-btn-sectext">{this._headerYearButtonTextSecType}</span>
 					}
 				</div>
-
 				<div
 					data-ui5-cal-header-btn-year-range
-					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn ui5-calheader-yearrange-btn-disabled"
+					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+					part="calendar-header-middle-button"
 					hidden={this._isHeaderYearRangeButtonHidden}
-					tabindex={-1}
+					tabindex={0}
+					role="button"
+					aria-label={this.accInfo.ariaLabelYearRangeButton}
+					aria-description={this.accInfo.ariaLabelYearRangeButton}
+					title={this.accInfo.tooltipYearRangeButton}
+					aria-keyshortcuts={this.accInfo.keyShortcutYearRangeButton}
+					onClick={this.onHeaderYearRangeButtonPress}
+					onKeyDown={this.onYearRangeButtonKeyDown}
+					onKeyUp={this.onYearRangeButtonKeyUp}
 				>
 					<span>{this._headerYearRangeButtonText}</span>
 					{this.hasSecondaryCalendarType &&
@@ -73,9 +95,14 @@ export default function CalendarTemplate(this: Calendar) {
 					"ui5-calheader-arrowbtn": true,
 					"ui5-calheader-arrowbtn-disabled": this._nextButtonDisabled,
 				}}
+				part="calendar-header-arrow-button"
 				role="button"
 				onMouseDown={this.onNextButtonClick}
-				title={this.headerNextButtonText}
+				tabindex={this._nextButtonDisabled ? -1 : 0}
+				title={this.accInfo.tooltipNextButton}
+				aria-label={this.accInfo.ariaLabelNextButton}
+				aria-description={this.accInfo.ariaLabelNextButton}
+				aria-keyshortcuts={this.accInfo.keyShortcutNextButton}
 			>
 				<Icon class="ui5-calheader-arrowicon" name={slimArowRight}/>
 			</div>

package/src/CalendarTemplate.tsx

@@ -2,7 +2,9 @@ import type Calendar from "./Calendar.js";
 import DayPicker from "./DayPicker.js";
 import MonthPicker from "./MonthPicker.js";
 import YearPicker from "./YearPicker.js";
+import YearRangePicker from "./YearRangePicker.js";
 import CalendarHeaderTemplate from "./CalendarHeaderTemplate.js";
+import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
 
 export default function CalendarTemplate(this: Calendar) {
 	return (
@@ -11,6 +13,9 @@ export default function CalendarTemplate(this: Calendar) {
 				class="ui5-cal-root"
 				onKeyDown={this._onkeydown}
 			>
+				<div class="ui5-calheader" exportparts="calendar-header-arrow-button, calendar-header-middle-button">
+					{ CalendarHeaderTemplate.call(this) }
+				</div>
 				<div id={`${this._id}-content`} class="ui5-cal-content">
 					<DayPicker
 						id={`${this._id}-daypicker`}
@@ -18,6 +23,7 @@ export default function CalendarTemplate(this: Calendar) {
 						formatPattern={this._formatPattern}
 						selectedDates={this._selectedDatesTimestamps}
 						specialCalendarDates={this._specialCalendarDates}
+						disabledDates={this._disabledDates}
 						_hidden={this._isDayPickerHidden}
 						primaryCalendarType={this._primaryCalendarType}
 						secondaryCalendarType={this._secondaryCalendarType}
@@ -46,7 +52,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
@@ -61,14 +67,29 @@ export default function CalendarTemplate(this: Calendar) {
 						minDate={this.minDate}
 						maxDate={this.maxDate}
 						timestamp={this._timestamp}
+						_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"
 					/>
-				</div>
 
-				<div class="ui5-calheader">
-					{ CalendarHeaderTemplate.call(this) }
+					<YearRangePicker
+						id={`${this._id}-YRP`}
+						hidden={this._isYearRangePickerHidden}
+						formatPattern={this._formatPattern}
+						selectedDates={this._selectedDatesTimestamps}
+						_showRangeSelection={this.selectionMode === CalendarSelectionMode.Range}
+						_hidden={this._isYearRangePickerHidden}
+						primaryCalendarType={this._primaryCalendarType}
+						secondaryCalendarType={this._secondaryCalendarType}
+						minDate={this.minDate}
+						maxDate={this.maxDate}
+						timestamp={this._timestamp}
+						_currentYearRange = {this._currentYearRange}
+						onChange={this.onSelectedYearRangeChange}
+						onNavigate={this.onNavigate}
+						exportparts="year-range-cell, year-range-cell-selected, year-range-cell-selected-between, year-range-picker-root"
+					/>
 				</div>
 			</div>
 

package/src/CarouselTemplate.tsx

@@ -1,5 +1,5 @@
 import type Carousel from "./Carousel.js";
-import Button from "./Button.js";
+import Icon from "./Icon.js";
 import slimArrowLeft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 
@@ -10,31 +10,33 @@ export default function CarouselTemplate(this: Carousel) {
 				"ui5-carousel-root": true,
 				[`ui5-carousel-background-${this._backgroundDesign}`]: true,
 			}}
-			tabindex={0}
-			role="list"
+			role="region"
 			aria-label={this.ariaLabelTxt}
 			aria-roledescription={this._roleDescription}
-			aria-activedescendant={this.ariaActiveDescendant}
 			onFocusIn={this._onfocusin}
 			onKeyDown={this._onkeydown}
 			onMouseOut={this._onmouseout}
 			onMouseOver={this._onmouseover}
+			onTouchStart={this._ontouchstart}
+			onMouseDown={this._onmousedown}
 		>
 			<div class={this.classes.viewport} part="content">
-				<div class={this.classes.content} style={{ transform: `translateX(${this._isRTL ? "" : "-"}${this._selectedIndex * (this._itemWidth || 0)}px` }}>
-					{this.items.map(itemInfo =>
+				<div role="list" aria-label={this._ariaListLabel} class={this.classes.content} style={{ transform: `translate3d(${this._isRTL ? "" : "-"}${this._currentSlideIndex * (this._itemWidth || 0)}px, 0, 0` }}>
+					{this.items.map((itemInfo, i) =>
 						<div
+							data-sap-focus-ref={this._focusedItemIndex === i ? true : undefined}
 							id={itemInfo.id}
 							class={{
 								"ui5-carousel-item": true,
-								"ui5-carousel-item--hidden": !itemInfo.selected,
+								"ui5-carousel-item--hidden": !itemInfo.visible,
 							}}
 							style={{ width: `${this._itemWidth || 0}px` }}
 							part="item"
 							role="listitem"
 							aria-posinset={itemInfo.posinset}
 							aria-setsize={itemInfo.setsize}
-							aria-selected = {itemInfo.selected}
+							aria-hidden={!itemInfo.visible}
+							tabindex= {itemInfo.tabIndex}
 						>
 							<slot name={itemInfo.item._individualSlot} tabindex={itemInfo.tabIndex}></slot>
 						</div>
@@ -51,11 +53,9 @@ export default function CarouselTemplate(this: Carousel) {
 			{this.renderNavigation &&
 				<div class={this.classes.navigation}>
 					{this.showArrows.navigation && arrowBack.call(this)}
-
 					<div class="ui5-carousel-navigation">
 						{ !this.hidePageIndicator && navIndicator.call(this) }
 					</div>
-
 					{this.showArrows.navigation && arrowForward.call(this)}
 				</div>
 			}
@@ -64,29 +64,29 @@ export default function CarouselTemplate(this: Carousel) {
 }
 
 function arrowBack(this: Carousel) {
-	return <Button
-		icon={slimArrowLeft}
+	return <Icon name={slimArrowLeft}
 		tabindex={-1}
-		tooltip={this.previousPageText}
+		data-ui5-arrow-back
+		title={this.previousPageText	}
+		mode="Decorative"
 		class={{
 			"ui5-carousel-navigation-button": true,
 			"ui5-carousel-navigation-button--hidden": !this.hasPrev
 		}}
-		data-ui5-arrow-back
 		onClick={this._navButtonClick}
 	/>;
 }
 
 function arrowForward(this: Carousel) {
-	return <Button
-		icon={slimArrowRight}
+	return <Icon name={slimArrowRight}
 		tabindex={-1}
-		tooltip={this.nextPageText}
+		data-ui5-arrow-forward
+		title={this.nextPageText}
+		mode="Decorative"
 		class={{
 			"ui5-carousel-navigation-button": true,
 			"ui5-carousel-navigation-button--hidden": !this.hasNext
 		}}
-		data-ui5-arrow-forward
 		onClick={this._navButtonClick}
 	/>;
 }
@@ -94,8 +94,9 @@ function arrowForward(this: Carousel) {
 function navIndicator(this: Carousel) {
 	return this.isPageTypeDots ? this.dots.map(dot =>
 		<div
-			role="img"
 			aria-label={dot.ariaLabel}
+			role="presentation"
+			aria-hidden="true"
 			class={{
 				"ui5-carousel-navigation-dot": true,
 				"ui5-carousel-navigation-dot--active": dot.active
@@ -105,5 +106,5 @@ function navIndicator(this: Carousel) {
 		<div
 			dir="auto"
 			class="ui5-carousel-navigation-text"
-		>{this.selectedIndexToShow}&nbsp;{this.ofText}&nbsp;{this.pagesCount}</div>;
+		>{this._currentSlideIndex + 1}&nbsp;{this.ofText}&nbsp;{this.pagesCount}</div>;
 }

package/src/CheckBoxTemplate.tsx

@@ -15,16 +15,16 @@ export default function CheckBoxTemplate(this: CheckBox) {
 				"ui5-checkbox-root": true,
 				"ui5-checkbox--hoverable": !this.disabled && !this.readonly && isDesktop(),
 			}}
-			role="checkbox"
+			role={this.accInfo.role}
 			part="root"
-			aria-checked={this.effectiveAriaChecked}
-			aria-readonly={this.ariaReadonly}
-			aria-disabled={this.effectiveAriaDisabled}
+			aria-checked={this.accInfo.ariaChecked}
+			aria-readonly={this.accInfo.ariaReadonly}
+			aria-disabled={this.accInfo.ariaDisabled}
 			aria-label={this.ariaLabelText}
 			aria-labelledby={this.ariaLabelledBy}
 			aria-describedby={this.ariaDescribedBy}
-			aria-required={this.required}
-			tabindex={this.effectiveTabIndex}
+			aria-required={this.accInfo.ariaRequired}
+			tabindex={this.accInfo.tabindex}
 			onMouseDown={this._onmousedown}
 			onMouseUp={this._onmouseup}
 			onKeyDown={this._onkeydown}
@@ -45,16 +45,19 @@ export default function CheckBoxTemplate(this: CheckBox) {
 				</div>
 			}
 
+			{this.accInfo.role === "checkbox" &&
 			<input
 				id={`${this._id}-CB`}
 				type="checkbox"
 				checked={this.checked}
+				value={this.value}
 				readonly={this.readonly}
 				disabled={this.disabled}
 				tabindex={-1}
 				aria-hidden="true"
 				data-sap-no-tab-ref
 			/>
+			}
 
 			{this.text &&
 			<Label
@@ -62,6 +65,7 @@ export default function CheckBoxTemplate(this: CheckBox) {
 				part="label"
 				class="ui5-checkbox-label"
 				wrappingType={this.wrappingType}
+				required={this.required}
 			>
 				{this.text}
 			</Label>

package/src/ColorPaletteItemTemplate.tsx

@@ -4,9 +4,6 @@ export default function ColorPaletteItemTemplate(this: ColorPaletteItem) {
 	return (
 		<div
 			class="ui5-cp-item"
-			style={{
-				"background-color": this.value,
-			}}
 			tabindex={parseInt(this.forcedTabIndex)}
 			role="button"
 			aria-label={`${this.colorLabel} - ${this.index}: ${this.value}`}

package/src/ColorPalettePopoverTemplate.tsx

@@ -9,11 +9,12 @@ export default function ColorPalettePopoverTemplate(this: ColorPalettePopover) {
 		<ResponsivePopover
 			hideArrow={true}
 			contentOnlyOnDesktop={true}
-			placement="Bottom"
+			placement={this.placement}
 			opener={this.opener}
 			open={this._open}
 			onClose={this.onAfterClose}
 			onOpen={this.onAfterOpen}
+			accessibleName={this._colorPaletteTitle}
 		>
 			<div slot="header" class="ui5-cp-header">
 				<Title level="H1" wrappingType="None">
@@ -27,6 +28,8 @@ export default function ColorPalettePopoverTemplate(this: ColorPalettePopover) {
 					showRecentColors={this.showRecentColors}
 					showDefaultColor={this.showDefaultColor}
 					defaultColor={this.defaultColor}
+					accessibleName={this.accessibleName}
+					accessibleNameRef={this.accessibleNameRef}
 					popupMode={true}
 					onItemClick={this.onSelectedColor}
 				>

package/src/ColorPaletteTemplate.tsx

@@ -15,6 +15,7 @@ export default function ColorPaletteTemplate(this: ColorPalette) {
 				onClick={this._onclick}
 				onKeyUp={this._onkeyup}
 				onKeyDown={this._onkeydown}
+				onMouseDown={this._onmousedown}
 			>
 				{this.showDefaultColor &&
 					<div class="ui5-cp-default-color-button-wrapper">
@@ -31,7 +32,7 @@ export default function ColorPaletteTemplate(this: ColorPalette) {
 					</div>
 				}
 				<div class="ui5-cp-item-container"
-					role="region"
+					role="group"
 					aria-label={this.colorContainerLabel}
 					onKeyDown={this._onColorContainerKeyDown}
 				>