@ui5/webcomponents 0.0.0-2bd2204ed → 0.0.0-2cf9f07f8

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "0.0.0-2bd2204ed",
+  "version": "0.0.0-2cf9f07f8",
   "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",
@@ -14,23 +19,37 @@
     "clean": "wc-dev clean",
     "lint": "wc-dev lint",
     "start": "wc-dev start",
+    "watch": "wc-dev watch",
     "build": "wc-dev build",
     "test": "wc-dev test",
+    "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"
   },
+  "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",
     "url": "https://github.com/SAP/ui5-webcomponents.git",
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.0.0-2bd2204ed",
-    "@ui5/webcomponents-utils": "0.0.0-2bd2204ed",
-    "@ui5/webcomponents-icons": "0.0.0-2bd2204ed",
-    "@ui5/webcomponents-theme-base": "0.0.0-2bd2204ed"
+    "@ui5/webcomponents-base": "0.0.0-2cf9f07f8",
+    "@ui5/webcomponents-icons": "0.0.0-2cf9f07f8",
+    "@ui5/webcomponents-localization": "0.0.0-2cf9f07f8",
+    "@ui5/webcomponents-theming": "0.0.0-2cf9f07f8"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-2bd2204ed"
+    "@ui5/webcomponents-tools": "0.0.0-2cf9f07f8",
+    "chromedriver": "116.0.0"
   }
 }

package/src/Avatar.hbs

@@ -0,0 +1,29 @@
+<div
+	class="ui5-avatar-root"
+	tabindex="{{tabindex}}"
+	data-sap-focus-ref
+	@keyup={{_onkeyup}}
+	@keydown={{_onkeydown}}
+	@focusout={{_onfocusout}}
+	@focusin={{_onfocusin}}
+	@click={{_onclick}}
+	role="{{_role}}"
+	aria-haspopup="{{_ariaHasPopup}}"
+	aria-label="{{accessibleNameText}}"
+>
+	{{#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">{{validInitials}}</span>
+			<ui5-icon class="ui5-avatar-icon ui5-avatar-icon-fallback" name="employee"></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}}"
+				aria-label="{{_overflowButtonAriaLabelText}}"
+				?hidden="{{_overflowBtnHidden}}"
+				?non-interactive={{_isGroup}}
+				class="{{classes.overflowButton}}"
+			>
+				{{_overflowButtonText}}
+			</ui5-button>
+		{{/if}}
+	</div>
+</div>

package/src/Badge.hbs

@@ -0,0 +1,9 @@
+<div class="ui5-badge-root">
+	<slot name="icon"></slot>
+
+	{{#if hasText}}
+		<label class="ui5-badge-text"><bdi><slot></slot></bdi></label>
+	{{/if}}
+
+	<span class="ui5-hidden-text">{{badgeDescription}}</span>
+</div>

package/src/Breadcrumbs.hbs

@@ -0,0 +1,47 @@
+<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"
+				aria-label="{{_dropdownArrowAccessibleNameText}}"
+				aria-haspopup="{{_ariaHasPopup}}">
+				<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"
+				accessible-name="{{this._accessibleNameText}}"
+				data-ui5-stable="{{this.stableDomRef}}">
+				{{this.innerText}}
+			</ui5-link>
+		</li>
+		{{/each}}
+
+		{{#if _endsWithCurrentLocationLabel}}
+			<li class="ui5-breadcrumbs-current-location" @click="{{../_onLabelPress}}">
+
+				<span aria-current="page"
+					aria-label="{{_currentLocationAccName}}"
+					role="link"
+					id="{{this._id}}-labelWrapper">
+
+					<ui5-label>
+						{{_currentLocationText}}
+					</ui5-label>
+				</span>
+			</li>
+		{{/if}}
+	</ol>
+</nav>

package/src/BreadcrumbsPopover.hbs

@@ -0,0 +1,28 @@
+<ui5-responsive-popover
+	class="ui5-breadcrumbs-popover"
+	hide-arrow
+	content-only-on-desktop
+	placement-type="Bottom"
+	horizontal-align="Left"
+	_hide-header
+	@keydown="{{_onkeydown}}">
+	<ui5-list mode="SingleSelect"
+		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,32 @@
+<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
+		>
+			<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 text}}
+				<ui5-label id="{{_id}}-label" class="ui5-busy-indicator-text">
+					{{text}}
+				</ui5-label>
+			{{/if}}
+		</div>
+	{{/if}}
+
+	<slot></slot>
+
+	{{#if _isBusy}}
+		<span data-ui5-focus-redirect tabindex="0" @focusin="{{_redirectFocus}}"></span>
+	{{/if}}
+</div>

package/src/Button.hbs

@@ -0,0 +1,45 @@
+<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="{{accessibilityAttributes.hasPopup}}"
+	aria-label="{{ariaLabelText}}"
+	title="{{buttonTitle}}"
+	part="button"
+>
+	{{#if icon}}
+		<ui5-icon
+			class="ui5-button-icon"
+			name="{{icon}}"
+			accessible-role="{{iconRole}}"
+			part="icon"
+			?show-tooltip={{showIconTooltip}}
+		></ui5-icon>
+	{{/if}}
+
+	<span id="{{_id}}-content" class="ui5-button-text">
+		<bdi>
+			<slot></slot>
+		</bdi>
+	</span>
+
+	{{#if hasButtonType}}
+		<span class="ui5-hidden-text">{{buttonTypeText}}</span>
+	{{/if}}
+</button>
+
+{{#*inline "ariaPressed"}}{{/inline}}

package/src/Calendar.hbs

@@ -0,0 +1,72 @@
+<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}}"
+			._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-press="{{onHeaderShowMonthPress}}"
+			@ui5-show-year-press="{{onHeaderShowYearPress}}"
+	></ui5-calendar-header>
+</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/Card.hbs

@@ -0,0 +1,13 @@
+<div
+	class="{{classes.root}}"
+	role="region"
+	aria-label="{{_getAriaLabel}}">
+	{{#if _hasHeader}}
+		<div class="ui5-card-header-root">
+			<slot name="header"></slot>
+		</div>
+	{{/if}}
+	<div role="group" aria-label="{{_ariaCardContentLabel}}">
+		<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 status}}
+					<div class="ui5-card-header-status">
+						<span id="{{_id}}-status" part="status" dir="auto">{{status}}</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,85 @@
+<section
+	class="ui5-carousel-root ui5-carousel-background-{{_backgroundDesign}}"
+	tabindex="0"
+	role="listbox"
+	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 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}}

package/src/CheckBox.hbs

@@ -0,0 +1,46 @@
+<div
+	class="ui5-checkbox-root {{classes.main}}"
+	role="checkbox"
+	part="root"
+	aria-checked="{{effectiveAriaChecked}}"
+	aria-readonly="{{ariaReadonly}}"
+	aria-disabled="{{effectiveAriaDisabled}}"
+	aria-label="{{ariaLabelText}}"
+	aria-labelledby="{{ariaLabelledBy}}"
+	aria-describedby="{{ariaDescribedBy}}"
+	aria-required="{{required}}"
+	tabindex="{{effectiveTabIndex}}"
+	@mousedown="{{_onmousedown}}"
+	@mouseup="{{_onmouseup}}"
+	@keydown="{{_onkeydown}}"
+	@keyup="{{_onkeyup}}"
+	@click="{{_onclick}}"
+	@focusout="{{_onfocusout}}"
+>
+		<div id="{{_id}}-CbBg" class="ui5-checkbox-inner">
+			{{#if isCompletelyChecked}}
+				<ui5-icon aria-hidden="true" name="accept" class="ui5-checkbox-icon"></ui5-icon>
+			{{/if}}
+
+			<input
+				id="{{_id}}-CB"
+				type='checkbox'
+				?checked="{{checked}}"
+				?readonly="{{readonly}}"
+				?disabled="{{disabled}}"
+				tabindex="-1"
+				aria-hidden="true"
+				data-sap-no-tab-ref
+			/>
+		</div>
+
+		{{#if text}}
+			<ui5-label id="{{_id}}-label" class="ui5-checkbox-label" wrapping-type="{{wrappingType}}">{{text}}</ui5-label>
+		{{/if}}
+
+		{{#if hasValueState}}
+			<span id="{{_id}}-descr" class="ui5-hidden-text">{{valueStateText}}</span>
+		{{/if}}
+
+		<slot name="formSupport"></slot>
+</div>

package/src/ColorPalette.hbs

@@ -0,0 +1,52 @@
+<div
+	class="{{classes.colorPaletteRoot}}"
+	@click={{_onclick}}
+	@keyup={{_onkeyup}}
+	@keydown={{_onkeydown}}
+>
+	{{#if this.showDefaultColor}}
+		<div class="ui5-cp-default-color-button-wrapper">
+			<ui5-button 
+				class="ui5-cp-default-color-button"
+				design="Transparent" 
+				@click={{_onDefaultColorClick}}
+				@keydown={{_onDefaultColorKeyDown}}>Default color</ui5-button>
+			<div class="ui5-cp-separator"></div>
+		</div>
+	{{/if}}
+	<div class="ui5-cp-item-container" 
+		role="region"
+		aria-label="{{colorContainerLabel}}"
+		@keydown="{{_onColorContainerKeyDown}}"
+	>
+		{{#each this.displayedColors}}
+			<slot
+				name="{{this._individualSlot}}"
+			>
+			</slot>
+		{{/each}}
+	</div>
+
+	{{#if _showMoreColors}}
+		<div class="ui5-cp-more-colors-wrapper">
+			<div class="ui5-cp-separator"></div>
+			<ui5-button
+				design="Transparent"
+				class="ui5-cp-more-colors"
+				@click="{{_openMoreColorsDialog}}"
+				@keydown={{_onMoreColorsKeyDown}}
+			>{{colorPaleteMoreColorsText}}</ui5-button>
+		</div>
+	{{/if}}
+
+	{{#if showRecentColors}}
+		<div class="ui5-cp-recent-colors-wrapper">
+			<div class="ui5-cp-separator"></div>
+			<div class="ui5-cp-recent-colors-container" @keydown="{{_onRecentColorsContainerKeyDown}}">
+				{{#each recentColors}}
+					<ui5-color-palette-item value="{{this}}"></ui5-color-palette-item>
+				{{/each}}
+			</div>
+		</div>
+	{{/if}}
+</div>