@ui5/webcomponents 0.0.0-d9933bd82 → 0.0.0-da0d3eb88

package/{package-scripts.js → package-scripts.cjs}

@@ -2,6 +2,9 @@ const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js")
 
 const options = {
 	port: 8080,
+	portStep: 2,
+	noWatchTS: true,
+	dev: true,
 };
 
 const scripts = getScripts(options);

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "0.0.0-d9933bd82",
+  "version": "0.0.0-da0d3eb88",
   "description": "UI5 Web Components: webcomponents.main",
+  "ui5": {
+    "webComponentsPackage": true
+  },
+  "type": "module",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
   "private": false,
+  "customElements": "./dist/custom-elements.json",
   "keywords": [
     "openui5",
     "sapui5",
@@ -13,11 +18,29 @@
   "scripts": {
     "clean": "wc-dev clean",
     "lint": "wc-dev lint",
+    "lint:scope": "nps scope.lint",
     "start": "wc-dev start",
+    "watch": "wc-dev watch",
+    "generate": "nps generate",
+    "generateAPI": "nps generateAPI",
     "build": "wc-dev build",
+    "bundle": "nps build.bundle",
     "test": "wc-dev test",
+    "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
+    "test:suite-1": "wc-dev test-suite-1",
+    "test:suite-2": "wc-dev test-suite-2",
     "create-ui5-element": "wc-create-ui5-element",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "tsc -b"
+  },
+  "exports": {
+    "./.port": "./.port",
+    "./src/*": "./src/*",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json",
+    "./bundle.esm.js": "./bundle.esm.js",
+    "./bundle.common.js": "./bundle.common.js",
+    "./bundle.scoped.esm.js": "./bundle.scoped.esm.js",
+    "./*": "./dist/*"
   },
   "repository": {
     "type": "git",
@@ -25,12 +48,15 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.0.0-d9933bd82",
-    "@ui5/webcomponents-icons": "0.0.0-d9933bd82",
-    "@ui5/webcomponents-localization": "0.0.0-d9933bd82",
-    "@ui5/webcomponents-theme-base": "0.0.0-d9933bd82"
+    "@ui5/webcomponents-base": "0.0.0-da0d3eb88",
+    "@ui5/webcomponents-icons": "0.0.0-da0d3eb88",
+    "@ui5/webcomponents-icons-business-suite": "0.0.0-da0d3eb88",
+    "@ui5/webcomponents-icons-tnt": "0.0.0-da0d3eb88",
+    "@ui5/webcomponents-localization": "0.0.0-da0d3eb88",
+    "@ui5/webcomponents-theming": "0.0.0-da0d3eb88"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-d9933bd82"
+    "@ui5/webcomponents-tools": "0.0.0-da0d3eb88",
+    "chromedriver": "^125.0.0"
   }
 }

package/src/Avatar.hbs

@@ -0,0 +1,31 @@
+<div
+	class="ui5-avatar-root"
+	tabindex="{{tabindex}}"
+	data-sap-focus-ref
+	@keyup={{_onkeyup}}
+	@keydown={{_onkeydown}}
+	@click={{_onclick}}
+	role="{{_role}}"
+	aria-haspopup="{{_ariaHasPopup}}"
+	aria-label="{{accessibleNameText}}"
+	fallback-icon="{{_fallbackIcon}}"
+>
+	{{#if hasImage}}
+		<slot></slot>
+	{{else}}
+		{{#if icon}}
+			<ui5-icon class="ui5-avatar-icon" name="{{icon}}"></ui5-icon>
+		{{/if}}
+
+		{{#if initials}}
+			<span class="ui5-avatar-initials ui5-avatar-initials-hidden">{{validInitials}}</span>
+			<ui5-icon
+				class="ui5-avatar-icon ui5-avatar-icon-fallback ui5-avatar-fallback-icon-hidden"
+				name="{{fallbackIcon}}"
+			></ui5-icon>
+		{{/if}}
+
+	{{/if}}
+
+	<slot name="badge"></slot>
+</div>

package/src/AvatarGroup.hbs

@@ -0,0 +1,30 @@
+<div class="ui5-avatar-group-root">
+	<div
+		class="ui5-avatar-group-items"
+		@keyup="{{_onkeyup}}"
+		@keydown="{{_onkeydown}}"
+		@focusin="{{_onfocusin}}"
+		tabindex="{{_groupTabIndex}}"
+		@click="{{_onClick}}"
+		@ui5-click="{{_onUI5Click}}"
+		aria-label="{{_ariaLabelText}}"
+		role="{{_role}}"
+		aria-haspopup="{{_containerAriaHasPopup}}"
+	>
+		<slot></slot>
+
+		{{#if _customOverflowButton}}
+			<slot name="overflowButton"></slot>
+		{{else}}
+			<ui5-button
+				.accessibilityAttributes="{{_overflowButtonAccAttributes}}"
+				accessible-name="{{_overflowButtonAriaLabelText}}"
+				?hidden="{{_overflowBtnHidden}}"
+				?non-interactive={{_isGroup}}
+				class="{{classes.overflowButton}}"
+			>
+				{{_overflowButtonText}}
+			</ui5-button>
+		{{/if}}
+	</div>
+</div>

package/src/Bar.hbs

@@ -0,0 +1,16 @@
+<div
+	class="{{classes.root}}"
+	aria-label="{{accInfo.label}}"
+	role="toolbar"
+	part="bar"
+>
+	<div class="ui5-bar-content-container ui5-bar-startcontent-container">
+		<slot name="startContent"></slot>
+	</div>
+	<div class="ui5-bar-content-container ui5-bar-midcontent-container">
+		<slot></slot>
+	</div>
+	<div class="ui5-bar-content-container ui5-bar-endcontent-container">
+		<slot name="endContent"></slot>
+	</div>
+</div>

package/src/Breadcrumbs.hbs

@@ -0,0 +1,39 @@
+<nav class="ui5-breadcrumbs-root"
+	aria-label="{{_accessibleNameText}}">
+
+	<ol @focusin="{{_onfocusin}}"
+		@keydown="{{_onkeydown}}"
+		@keyup="{{_onkeyup}}">
+
+		<li class="ui5-breadcrumbs-dropdown-arrow-link-wrapper" ?hidden="{{_isOverflowEmpty}}">
+			<ui5-link @ui5-click="{{_openRespPopover}}"
+				accessible-role="button"
+				accessible-name="{{_dropdownArrowAccessibleNameText}}"
+				.accessibilityAttributes="{{linkAccessibilityAttributes}}">
+				<ui5-icon name="slim-arrow-down" title="{{_dropdownArrowAccessibleNameText}}"></ui5-icon>
+			</ui5-link>
+		</li>
+
+		{{#each _linksData}}
+		<li class="ui5-breadcrumbs-link-wrapper"
+			id="{{this._id}}-link-wrapper">
+
+			<ui5-link @ui5-click="{{../_onLinkPress}}"
+				href="{{this.href}}"
+				target="{{this.target}}"
+				id="{{this._id}}-link"
+				design="{{this._linkDesign}}"
+				accessible-name="{{this._accessibleNameText}}"
+				data-ui5-stable="{{this.stableDomRef}}">
+				{{this.innerText}}
+			</ui5-link>
+
+			{{#unless this._isCurrentPageItem}}
+				<span class="ui5-breadcrumbs-separator" aria-hidden="true"></span>
+			{{/unless}}
+		</li>
+		{{/each}}
+	</ol>
+</nav>
+
+{{>include "./BreadcrumbsPopover.hbs"}}

package/src/BreadcrumbsPopover.hbs

@@ -0,0 +1,28 @@
+<ui5-responsive-popover
+	class="ui5-breadcrumbs-popover"
+	hide-arrow
+	content-only-on-desktop
+	placement="Bottom"
+	horizontal-align="Start"
+	_hide-header
+	@keydown="{{_onkeydown}}">
+	<ui5-list selection-mode="Single"
+		separators="None"
+		@ui5-selection-change="{{_onOverflowListItemSelect}}">
+
+		{{#each _overflowItemsData}}
+			<ui5-li
+				id="{{this._id}}-li"
+				accessible-name="{{this.accessibleName}}"
+				data-ui5-stable="{{this.stableDomRef}}">
+				{{this.textContent}}
+			</ui5-li>
+		{{/each}}
+	</ui5-list>
+	<div slot="footer" class="ui5-breadcrumbs-popover-footer">
+		<ui5-button
+			design="Transparent"
+			@click="{{_closeRespPopover}}"
+		>{{_cancelButtonText}}</ui5-button>
+	</div>
+</ui5-responsive-popover>

package/src/BusyIndicator.hbs

@@ -0,0 +1,40 @@
+<div class="{{classes.root}}">
+	{{#if _isBusy}}
+		<div
+			class="ui5-busy-indicator-busy-area"
+			title="{{ariaTitle}}"
+			tabindex="0"
+			role="progressbar"
+			aria-valuemin="0"
+			aria-valuemax="100"
+			aria-valuetext="Busy"
+			aria-labelledby="{{labelId}}"
+			data-sap-focus-ref
+		>
+			{{#if textPosition.top}}
+				{{> busy-text}}
+			{{/if}}
+			<div class="ui5-busy-indicator-circles-wrapper">
+				<div class="ui5-busy-indicator-circle circle-animation-0"></div>
+				<div class="ui5-busy-indicator-circle circle-animation-1"></div>
+				<div class="ui5-busy-indicator-circle circle-animation-2"></div>
+			</div>
+			{{#if textPosition.bottom}}
+				{{> busy-text}}
+			{{/if}}
+		</div>
+	{{/if}}
+	<slot></slot>
+
+	{{#if _isBusy}}
+		<span data-ui5-focus-redirect tabindex="0" @focusin="{{_redirectFocus}}"></span>
+	{{/if}}
+</div>
+
+{{#*inline "busy-text"}}
+	{{#if text}}
+		<ui5-label id="{{_id}}-label" class="ui5-busy-indicator-text">
+			{{text}}
+		</ui5-label>
+	{{/if}}
+{{/inline}}

package/src/Button.hbs

@@ -0,0 +1,55 @@
+<button
+	type="button"
+	class="ui5-button-root"
+	?disabled="{{disabled}}"
+	data-sap-focus-ref
+	{{> ariaPressed}}
+	@focusout={{_onfocusout}}
+	@focusin={{_onfocusin}}
+	@click={{_onclick}}
+	@mousedown={{_onmousedown}}
+	@mouseup={{_onmouseup}}
+	@keydown={{_onkeydown}}
+	@keyup={{_onkeyup}}
+	@touchstart="{{_ontouchstart}}"
+	@touchend="{{_ontouchend}}"
+	tabindex={{tabIndexValue}}
+	aria-expanded="{{accessibilityAttributes.expanded}}"
+	aria-controls="{{accessibilityAttributes.controls}}"
+	aria-haspopup="{{_hasPopup}}"
+	aria-label="{{ariaLabelText}}"
+	title="{{buttonTitle}}"
+	part="button"
+	role="{{effectiveAccRole}}"
+>
+	{{#if icon}}
+		<ui5-icon
+			class="ui5-button-icon"
+			name="{{icon}}"
+			mode="{{iconMode}}"
+			part="icon"
+			?show-tooltip={{showIconTooltip}}
+		></ui5-icon>
+	{{/if}}
+
+	<span id="{{_id}}-content" class="ui5-button-text">
+		<bdi>
+			<slot></slot>
+		</bdi>
+	</span>
+
+	{{#if endIcon}}
+		<ui5-icon
+			class="ui5-button-end-icon"
+			name="{{endIcon}}"
+			mode="{{endIconMode}}"
+			part="endIcon"
+		></ui5-icon>
+	{{/if}}
+
+	{{#if hasButtonType}}
+		<span class="ui5-hidden-text">{{buttonTypeText}}</span>
+	{{/if}}
+</button>
+
+{{#*inline "ariaPressed"}}{{/inline}}

package/src/Calendar.hbs

@@ -0,0 +1,80 @@
+<div
+	class="ui5-cal-root"
+	@keydown={{_onkeydown}}
+>
+	<div id="{{_id}}-content" class="ui5-cal-content">
+		<ui5-daypicker
+			id="{{_id}}-daypicker"
+			?hidden="{{_isDayPickerHidden}}"
+			format-pattern="{{_formatPattern}}"
+			.selectedDates="{{_selectedDatesTimestamps}}"
+			.specialCalendarDates="{{_specialCalendarDates}}"
+			._hidden="{{_isDayPickerHidden}}"
+			.primaryCalendarType="{{_primaryCalendarType}}"
+			.secondaryCalendarType="{{_secondaryCalendarType}}"
+			.selectionMode="{{selectionMode}}"
+			.minDate="{{minDate}}"
+			.maxDate="{{maxDate}}"
+			timestamp="{{_timestamp}}"
+			?hide-week-numbers="{{hideWeekNumbers}}"
+			@ui5-change="{{onSelectedDatesChange}}"
+			@ui5-navigate="{{onNavigate}}"
+		></ui5-daypicker>
+
+		<ui5-monthpicker
+			id="{{_id}}-MP"
+			?hidden="{{_isMonthPickerHidden}}"
+			format-pattern="{{_formatPattern}}"
+			.selectedDates="{{_selectedDatesTimestamps}}"
+			._hidden="{{_isMonthPickerHidden}}"
+			.primaryCalendarType="{{_primaryCalendarType}}"
+			.secondaryCalendarType="{{_secondaryCalendarType}}"
+			.minDate="{{minDate}}"
+			.maxDate="{{maxDate}}"
+			timestamp="{{_timestamp}}"
+			@ui5-change="{{onSelectedMonthChange}}"
+			@ui5-navigate="{{onNavigate}}"
+		></ui5-monthpicker>
+
+		<ui5-yearpicker
+			id="{{_id}}-YP"
+			?hidden="{{_isYearPickerHidden}}"
+			format-pattern="{{_formatPattern}}"
+			.selectedDates="{{_selectedDatesTimestamps}}"
+			._hidden="{{_isYearPickerHidden}}"
+			.primaryCalendarType="{{_primaryCalendarType}}"
+			.secondaryCalendarType="{{_secondaryCalendarType}}"
+			.minDate="{{minDate}}"
+			.maxDate="{{maxDate}}"
+			timestamp="{{_timestamp}}"
+			@ui5-change="{{onSelectedYearChange}}"
+			@ui5-navigate="{{onNavigate}}"
+		></ui5-yearpicker>
+	</div>
+
+	{{! Positioned above the content due to flex-direction:column-reverse, but physically here for tab order to work}}
+	<ui5-calendar-header
+			id="{{_id}}-head"
+			.primaryCalendarType="{{_primaryCalendarType}}"
+			.secondaryCalendarType="{{_secondaryCalendarType}}"
+			.buttonTextForSecondaryCalendarType="{{secondaryCalendarTypeButtonText}}"
+			timestamp="{{_timestamp}}"
+			.isPrevButtonDisabled="{{_previousButtonDisabled}}"
+			.isNextButtonDisabled="{{_nextButtonDisabled}}"
+			.isMonthButtonHidden="{{_isHeaderMonthButtonHidden}}"
+			._monthButtonText="{{_headerMonthButtonText}}"
+			._yearButtonText="{{_headerYearButtonText}}"
+			._yearButtonTextSecType="{{_headerYearButtonTextSecType}}"
+			@ui5-previous-press="{{onHeaderPreviousPress}}"
+			@ui5-next-press="{{onHeaderNextPress}}"
+			@ui5-show-month-view="{{onHeaderShowMonthPress}}"
+			@ui5-show-year-view="{{onHeaderShowYearPress}}"
+	></ui5-calendar-header>
+</div>
+
+<div
+	@ui5-_calendar-legend-selection-change={{_onCalendarLegendSelectionChange}}
+	@ui5-_calendar-legend-focus-out={{_onLegendFocusOut}}
+>
+	<slot name="calendarLegend"></slot>
+</div>

package/src/CalendarHeader.hbs

@@ -0,0 +1,55 @@
+<div class="ui5-calheader-root">
+	<div
+		data-ui5-cal-header-btn-prev
+		class="{{classes.prevButton}}"
+		role="button"
+		@mousedown={{onPrevButtonClick}}
+		title="{{_prevButtonText}}"
+	>
+		<ui5-icon class="ui5-calheader-arrowicon" name="slim-arrow-left"></ui5-icon>
+	</div>
+
+	<div class="ui5-calheader-midcontainer">
+		<div
+			data-ui5-cal-header-btn-month
+			class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+			?hidden="{{isMonthButtonHidden}}"
+			tabindex="0"
+			role="button"
+			aria-label="{{accInfo.ariaLabelMonthButton}}"
+			@click={{onMonthButtonClick}}
+			@keydown={{onMonthButtonKeyDown}}
+			@keyup={{onMonthButtonKeyUp}}
+		>
+			<span>{{_monthButtonText}}</span>
+			{{#if hasSecondaryCalendarType}}
+				<span class="ui5-calheader-btn-sectext">{{_secondMonthButtonText}}</span>
+			{{/if}}
+		</div>
+		<div
+			data-ui5-cal-header-btn-year
+			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">{{_yearButtonTextSecType}}</span>
+			{{/if}}
+		</div>
+	</div>
+
+	<div
+		data-ui5-cal-header-btn-next
+		class="{{classes.nextButton}}"
+		role="button"
+		@mousedown={{onNextButtonClick}}
+		title={{_nextButtonText}}
+	>
+		<ui5-icon class="ui5-calheader-arrowicon" name="slim-arrow-right"></ui5-icon>
+	</div>
+</div>

package/src/CalendarLegend.hbs

@@ -0,0 +1,16 @@
+<div class="ui5-calendar-legend-root"
+		@focusout="{{_onFocusOut}}"
+		@focusin="{{_onFocusIn}}"
+		@keydown="{{_onItemKeyDown}}"
+		@mousedown="{{_onMouseDown}}"
+	>
+	{{#each defaultItemsMapping}}
+		{{#unless this.hide}}
+			<ui5-calendar-legend-item type={{this.type}}></ui5-calendar-legend-item>
+		{{/unless}}
+	{{/each}}
+
+	{{#each legendItems}}
+		<slot name="{{this._individualSlot}}"></slot>
+	{{/each}}
+</div>

package/src/CalendarLegendItem.hbs

@@ -0,0 +1,6 @@
+<div class="ui5-calendar-legend-item-root" 
+	tabindex="{{forcedTabIndex}}"
+	>
+	<div class="ui5-calendar-legend-item-box"></div>
+	<div class="ui5-calendar-legend-item-text">{{effectiveText}}</div>
+</div>

package/src/Card.hbs

@@ -0,0 +1,14 @@
+<div
+	class="{{classes.root}}"
+	role="region"
+	aria-label="{{_getAriaLabel}}"
+	part="root">
+	{{#if _hasHeader}}
+		<div class="ui5-card-header-root">
+			<slot name="header"></slot>
+		</div>
+	{{/if}}
+	<div role="group" aria-label="{{_ariaCardContentLabel}}" part="content">
+		<slot></slot>
+	</div>
+</div>

package/src/CardHeader.hbs

@@ -0,0 +1,61 @@
+<div
+	id="{{_id}}--header"
+	class="{{classes.root}}"
+	role="group"
+	aria-roledescription="{{ariaRoleDescription}}"
+	@click="{{_click}}"
+	@keydown="{{_keydown}}"
+	@keyup="{{_keyup}}"
+	part="root"
+>
+	<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"
+						role="heading"
+						aria-level="3"
+					>{{titleText}}</div>
+				{{/if}}
+
+				{{#if additionalText}}
+					<div class="ui5-card-header-additionalText">
+						<span id="{{_id}}-additionalText" part="additional-text" dir="auto">{{additionalText}}</span>
+					</div>
+				{{/if}}
+
+			</div>
+
+			{{#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"
+			@focusin="{{_actionsFocusin}}"
+			@focusout="{{_actionsFocusout}}"
+		>
+			<slot name="action"></slot>
+		</div>
+	{{/if}}
+
+	</div>
+</div>

package/src/Carousel.hbs

@@ -0,0 +1,86 @@
+<section
+	class="ui5-carousel-root ui5-carousel-background-{{_backgroundDesign}}"
+	tabindex="0"
+	role="listbox"
+	aria-label="{{ariaLabelTxt}}"
+	aria-activedescendant="{{ariaActiveDescendant}}"
+	@focusin="{{_onfocusin}}"
+	@keydown={{_onkeydown}}
+	@mouseout="{{_onmouseout}}"
+	@mouseover="{{_onmouseover}}"
+>
+	<div class="{{classes.viewport}}" part="content">
+		<div class="{{classes.content}}" style="{{styles.content}}">
+			{{#each items}}
+				<div id="{{id}}"
+					class="ui5-carousel-item {{classes}}"
+					style="{{styles}}"
+					role="option"
+					aria-posinset="{{posinset}}"
+					aria-setsize="{{setsize}}"
+					part="item"
+				>
+					<slot name="{{this.item._individualSlot}}" tabindex="{{this.tabIndex}}"></slot>
+				</div>
+			{{/each}}
+		</div>
+		{{#if showArrows.content}}
+			<div class="ui5-carousel-navigation-arrows">
+				{{> arrow-back}}
+				{{> arrow-forward}}
+			</div>
+		{{/if}}
+	</div>
+
+	{{#if renderNavigation}}
+		<div class="{{classes.navigation}}">
+			{{#if showArrows.navigation}}
+				{{> arrow-back}}
+			{{/if}}
+
+			<div class="ui5-carousel-navigation">
+				{{#unless hidePageIndicator}}
+					{{#if isPageTypeDots}}
+						{{#each dots}}
+							<div
+								role="img"
+								aria-label="{{ariaLabel}}"
+								?active="{{active}}"
+								class="ui5-carousel-navigation-dot"
+							></div>
+						{{/each}}
+					{{else}}
+						<div dir="auto" class="ui5-carousel-navigation-text">{{selectedIndexToShow}}&nbsp;{{ofText}}&nbsp;{{pagesCount}}</div>
+					{{/if}}
+				{{/unless}}
+			</div>
+
+			{{#if showArrows.navigation}}
+				{{> arrow-forward}}
+			{{/if}}
+		</div>
+	{{/if}}
+	</div>
+</section>
+
+{{#*inline "arrow-back"}}
+	<ui5-button
+		arrow-back
+		tooltip="{{previousPageText}}"
+		class="ui5-carousel-navigation-button {{classes.navPrevButton}}"
+		icon="slim-arrow-left"
+		tabindex="-1"
+		@click={{_navButtonClick}}
+	></ui5-button>
+{{/inline}}
+
+{{#*inline "arrow-forward"}}
+	<ui5-button
+		arrow-forward
+		tooltip="{{nextPageText}}"
+		class="ui5-carousel-navigation-button {{classes.navNextButton}}"
+		icon="slim-arrow-right"
+		tabindex="-1"
+		@click={{_navButtonClick}}
+	></ui5-button>
+{{/inline}}