@ui5/webcomponents 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/package-scripts.cjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "0.0.0-0a35d6b3d",
+  "version": "0.0.0-0dd36ca4b",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -26,10 +26,11 @@
     "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": "tsc"
+    "prepublishOnly": "tsc -b"
   },
   "exports": {
     "./.port": "./.port",
@@ -47,15 +48,15 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "0.0.0-0a35d6b3d",
-    "@ui5/webcomponents-icons": "0.0.0-0a35d6b3d",
-    "@ui5/webcomponents-icons-business-suite": "0.0.0-0a35d6b3d",
-    "@ui5/webcomponents-icons-tnt": "0.0.0-0a35d6b3d",
-    "@ui5/webcomponents-localization": "0.0.0-0a35d6b3d",
-    "@ui5/webcomponents-theming": "0.0.0-0a35d6b3d"
+    "@ui5/webcomponents-base": "0.0.0-0dd36ca4b",
+    "@ui5/webcomponents-icons": "0.0.0-0dd36ca4b",
+    "@ui5/webcomponents-icons-business-suite": "0.0.0-0dd36ca4b",
+    "@ui5/webcomponents-icons-tnt": "0.0.0-0dd36ca4b",
+    "@ui5/webcomponents-localization": "0.0.0-0dd36ca4b",
+    "@ui5/webcomponents-theming": "0.0.0-0dd36ca4b"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "0.0.0-0a35d6b3d",
-    "chromedriver": "119.0.1"
+    "@ui5/webcomponents-tools": "0.0.0-0dd36ca4b",
+    "chromedriver": "^123.0.3"
   }
 }

package/src/Avatar.hbs

@@ -4,8 +4,6 @@
 	data-sap-focus-ref
 	@keyup={{_onkeyup}}
 	@keydown={{_onkeydown}}
-	@focusout={{_onfocusout}}
-	@focusin={{_onfocusin}}
 	@click={{_onclick}}
 	role="{{_role}}"
 	aria-haspopup="{{_ariaHasPopup}}"
@@ -20,8 +18,11 @@
 		{{/if}}
 
 		{{#if initials}}
-			<span class="ui5-avatar-initials">{{validInitials}}</span>
-			<ui5-icon class="ui5-avatar-icon ui5-avatar-icon-fallback" name="{{fallbackIcon}}"></ui5-icon>
+			<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}}

package/src/AvatarGroup.hbs

@@ -18,7 +18,7 @@
 		{{else}}
 			<ui5-button
 				.accessibilityAttributes="{{_overflowButtonAccAttributes}}"
-				aria-label="{{_overflowButtonAriaLabelText}}"
+				accessible-name="{{_overflowButtonAriaLabelText}}"
 				?hidden="{{_overflowBtnHidden}}"
 				?non-interactive={{_isGroup}}
 				class="{{classes.overflowButton}}"

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

@@ -8,8 +8,8 @@
 		<li class="ui5-breadcrumbs-dropdown-arrow-link-wrapper" ?hidden="{{_isOverflowEmpty}}">
 			<ui5-link @ui5-click="{{_openRespPopover}}"
 				accessible-role="button"
-				aria-label="{{_dropdownArrowAccessibleNameText}}"
-				aria-haspopup="{{_ariaHasPopup}}">
+				accessible-name="{{_dropdownArrowAccessibleNameText}}"
+				.accessibilityAttributes="{{linkAccessibilityAttributes}}">
 				<ui5-icon name="slim-arrow-down" title="{{_dropdownArrowAccessibleNameText}}"></ui5-icon>
 			</ui5-link>
 		</li>
@@ -22,26 +22,18 @@
 				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}}
-
-		{{#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>
+</nav>
+
+{{>include "./BreadcrumbsPopover.hbs"}}

package/src/BreadcrumbsPopover.hbs

@@ -2,11 +2,11 @@
 	class="ui5-breadcrumbs-popover"
 	hide-arrow
 	content-only-on-desktop
-	placement-type="Bottom"
-	horizontal-align="Left"
+	placement="Bottom"
+	horizontal-align="Start"
 	_hide-header
 	@keydown="{{_onkeydown}}">
-	<ui5-list mode="SingleSelect"
+	<ui5-list selection-mode="Single"
 		separators="None"
 		@ui5-selection-change="{{_onOverflowListItemSelect}}">
 

package/src/BusyIndicator.hbs

@@ -11,22 +11,30 @@
 			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 text}}
-				<ui5-label id="{{_id}}-label" class="ui5-busy-indicator-text" wrapping-type="Normal">
-					{{text}}
-				</ui5-label>
+			{{#if textPosition.bottom}}
+				{{> busy-text}}
 			{{/if}}
 		</div>
 	{{/if}}
-
 	<slot></slot>
 
 	{{#if _isBusy}}
 		<span data-ui5-focus-redirect tabindex="0" @focusin="{{_redirectFocus}}"></span>
 	{{/if}}
-</div>
+</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

@@ -16,16 +16,17 @@
 	tabindex={{tabIndexValue}}
 	aria-expanded="{{accessibilityAttributes.expanded}}"
 	aria-controls="{{accessibilityAttributes.controls}}"
-	aria-haspopup="{{accessibilityAttributes.hasPopup}}"
+	aria-haspopup="{{_hasPopup}}"
 	aria-label="{{ariaLabelText}}"
 	title="{{buttonTitle}}"
 	part="button"
+	role="{{effectiveAccRole}}"
 >
 	{{#if icon}}
 		<ui5-icon
 			class="ui5-button-icon"
 			name="{{icon}}"
-			accessible-role="{{iconRole}}"
+			mode="{{iconMode}}"
 			part="icon"
 			?show-tooltip={{showIconTooltip}}
 		></ui5-icon>

package/src/Calendar.hbs

@@ -8,6 +8,7 @@
 			?hidden="{{_isDayPickerHidden}}"
 			format-pattern="{{_formatPattern}}"
 			.selectedDates="{{_selectedDatesTimestamps}}"
+			.specialCalendarDates="{{_specialCalendarDates}}"
 			._hidden="{{_isDayPickerHidden}}"
 			.primaryCalendarType="{{_primaryCalendarType}}"
 			.secondaryCalendarType="{{_secondaryCalendarType}}"
@@ -66,7 +67,14 @@
 			._yearButtonTextSecType="{{_headerYearButtonTextSecType}}"
 			@ui5-previous-press="{{onHeaderPreviousPress}}"
 			@ui5-next-press="{{onHeaderNextPress}}"
-			@ui5-show-month-press="{{onHeaderShowMonthPress}}"
-			@ui5-show-year-press="{{onHeaderShowYearPress}}"
+			@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/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

@@ -1,13 +1,14 @@
 <div
 	class="{{classes.root}}"
 	role="region"
-	aria-label="{{_getAriaLabel}}">
+	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}}">
+	<div role="group" aria-label="{{_ariaCardContentLabel}}" part="content">
 		<slot></slot>
 	</div>
 </div>

package/src/CardHeader.hbs

@@ -33,9 +33,9 @@
 					>{{titleText}}</div>
 				{{/if}}
 
-				{{#if status}}
-					<div class="ui5-card-header-status">
-						<span id="{{_id}}-status" part="status" dir="auto">{{status}}</span>
+				{{#if additionalText}}
+					<div class="ui5-card-header-additionalText">
+						<span id="{{_id}}-additionalText" part="additional-text" dir="auto">{{additionalText}}</span>
 					</div>
 				{{/if}}
 

package/src/Carousel.hbs

@@ -2,6 +2,7 @@
 	class="ui5-carousel-root ui5-carousel-background-{{_backgroundDesign}}"
 	tabindex="0"
 	role="listbox"
+	aria-label="{{ariaLabelTxt}}"
 	aria-activedescendant="{{ariaActiveDescendant}}"
 	@focusin="{{_onfocusin}}"
 	@keydown={{_onkeydown}}
@@ -49,7 +50,7 @@
 							></div>
 						{{/each}}
 					{{else}}
-						<div class="ui5-carousel-navigation-text">{{selectedIndexToShow}}&nbsp;{{ofText}}&nbsp;{{pagesCount}}</div>
+						<div dir="auto" class="ui5-carousel-navigation-text">{{selectedIndexToShow}}&nbsp;{{ofText}}&nbsp;{{pagesCount}}</div>
 					{{/if}}
 				{{/unless}}
 			</div>

package/src/CheckBox.hbs

@@ -17,30 +17,35 @@
 	@click="{{_onclick}}"
 	@focusout="{{_onfocusout}}"
 >
+
+	{{#if isDisplayOnly}}
+		<div class="ui5-checkbox-display-only-icon-inner">
+			<ui5-icon aria-hidden="true" name={{displayOnlyIcon}} class="ui5-checkbox-display-only-icon" part="icon"></ui5-icon>
+		</div>
+	{{else}}
 		<div id="{{_id}}-CbBg" class="ui5-checkbox-inner">
 			{{#if isCompletelyChecked}}
-				<ui5-icon aria-hidden="true" name="accept" class="ui5-checkbox-icon"></ui5-icon>
+				<ui5-icon aria-hidden="true" name="accept" class="ui5-checkbox-icon" part="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}}
 
-		{{#if text}}
-			<ui5-label part="label" id="{{_id}}-label" class="ui5-checkbox-label" wrapping-type="{{wrappingType}}">{{text}}</ui5-label>
-		{{/if}}
+	<input
+		id="{{_id}}-CB"
+		type='checkbox'
+		?checked="{{checked}}"
+		?readonly="{{readonly}}"
+		?disabled="{{disabled}}"
+		tabindex="-1"
+		aria-hidden="true"
+		data-sap-no-tab-ref
+	/>
 
-		{{#if hasValueState}}
-			<span id="{{_id}}-descr" class="ui5-hidden-text">{{valueStateText}}</span>
-		{{/if}}
+	{{#if text}}
+		<ui5-label part="label" id="{{_id}}-label" class="ui5-checkbox-label" wrapping-type="{{wrappingType}}">{{text}}</ui5-label>
+	{{/if}}
 
-		<slot name="formSupport"></slot>
+	{{#if hasValueState}}
+		<span id="{{_id}}-descr" class="ui5-hidden-text">{{valueStateText}}</span>
+	{{/if}}
 </div>

package/src/ColorPalette.hbs

@@ -6,15 +6,15 @@
 >
 	{{#if this.showDefaultColor}}
 		<div class="ui5-cp-default-color-button-wrapper">
-			<ui5-button 
+			<ui5-button
 				class="ui5-cp-default-color-button"
-				design="Transparent" 
+				design="Transparent"
 				@click={{_onDefaultColorClick}}
-				@keydown={{_onDefaultColorKeyDown}}>Default color</ui5-button>
+				@keydown={{_onDefaultColorKeyDown}}>{{colorPaletteDefaultColorText}}</ui5-button>
 			<div class="ui5-cp-separator"></div>
 		</div>
 	{{/if}}
-	<div class="ui5-cp-item-container" 
+	<div class="ui5-cp-item-container"
 		role="region"
 		aria-label="{{colorContainerLabel}}"
 		@keydown="{{_onColorContainerKeyDown}}"
@@ -35,7 +35,7 @@
 				class="ui5-cp-more-colors"
 				@click="{{_openMoreColorsDialog}}"
 				@keydown={{_onMoreColorsKeyDown}}
-			>{{colorPaleteMoreColorsText}}</ui5-button>
+			>{{colorPaletteMoreColorsText}}</ui5-button>
 		</div>
 	{{/if}}
 
@@ -50,3 +50,5 @@
 		</div>
 	{{/if}}
 </div>
+
+{{>include "./ColorPaletteDialog.hbs"}}

package/src/ColorPaletteDialog.hbs

@@ -1,3 +1,4 @@
+{{#if _showMoreColors}}
 <ui5-dialog
     header-text="{{moreColorsFeature.colorPaletteDialogTitle}}"
 >
@@ -16,3 +17,4 @@
         >{{moreColorsFeature.colorPaletteCancelButton}}</ui5-button>
     </div>
 </ui5-dialog>
+{{/if}}

package/src/ColorPaletteItem.hbs

@@ -2,7 +2,7 @@
 	class="ui5-cp-item"
 	style="{{styles.root}}"
 	value="{{value}}"
-	tabindex="{{_tabIndex}}"
+	tabindex="{{forcedTabIndex}}"
 	role="button"
 	aria-label="{{colorLabel}} - {{index}}: {{this.value}}"
 	title="{{colorLabel}} - {{index}}: {{this.value}}"

package/src/ColorPalettePopover.hbs

@@ -1,14 +1,15 @@
 <ui5-responsive-popover
 	hide-arrow
 	content-only-on-desktop
-	placement-type="Bottom"
+	placement="Bottom"
 	?open="{{_open}}"
 	.opener="{{opener}}"
-	@ui5-after-close="{{onAfterClose}}"
+	@ui5-close="{{onAfterClose}}"
 >
 	<div slot="header" class="ui5-cp-header">
 		<ui5-title
-			class="ui5-cp-title"
+			level="H5"
+			wrapping-type="None"
 		>{{_colorPaletteTitle}}</ui5-title>
 	</div>
 	<div>

package/src/ColorPicker.hbs

@@ -1,4 +1,4 @@
-<section dir="{{effectiveDir}}" class="ui5-color-picker-root"  >
+<section class="ui5-color-picker-root"  >
     <div
         class="ui5-color-picker-main-color"
         style="{{styles.mainColor}}"
@@ -66,7 +66,7 @@
                 class="ui5-color-picker-rgb-input"
                 disabled="{{inputsDisabled}}"
                 accessible-name="{{redInputLabel}}"
-                value="{{_color.r}}"
+                value="{{_value.r}}"
             ></ui5-input>
             <ui5-label>R</ui5-label>
         </div>
@@ -76,7 +76,7 @@
                 class="ui5-color-picker-rgb-input"
                 disabled="{{inputsDisabled}}"
                 accessible-name="{{greenInputLabel}}"
-                value="{{_color.g}}"
+                value="{{_value.g}}"
             ></ui5-input>
             <ui5-label>G</ui5-label>
         </div>
@@ -86,7 +86,7 @@
                 class="ui5-color-picker-rgb-input"
                 disabled="{{inputsDisabled}}"
                 accessible-name="{{blueInputLabel}}"
-                value="{{_color.b}}"
+                value="{{_value.b}}"
             ></ui5-input>
             <ui5-label>B</ui5-label>
         </div>

package/src/ComboBox.hbs

@@ -19,7 +19,7 @@
 		@focusout="{{_focusout}}"
 		aria-expanded="{{open}}"
 		role="combobox"
-		aria-haspopup="listbox"
+		aria-haspopup="dialog"
 		aria-autocomplete="both"
 		aria-describedby="value-state-description"
 		aria-label="{{ariaLabelText}}"
@@ -27,6 +27,12 @@
 		data-sap-focus-ref
 	/>
 
+	{{#if _effectiveShowClearIcon}}
+		<div @click={{_clear}} class="ui5-input-clear-icon-wrapper" input-icon tabindex="-1">
+			<ui5-icon tabindex="-1" class="ui5-input-clear-icon" name="decline" accessible-name="{{clearIconAccessibleName}}"></ui5-icon>
+		</div>
+	{{/if}}
+
 	{{#if icon}}
 		<slot name="icon"></slot>
 	{{/if}}
@@ -43,3 +49,5 @@
 		></ui5-icon>
 	{{/unless}}
 </div>
+
+{{>include "./ComboBoxPopover.hbs"}}

package/src/ComboBoxPopover.hbs

@@ -1,16 +1,15 @@
 <ui5-responsive-popover
 	class="{{classes.popover}}"
 	hide-arrow
-	_disable-initial-focus
-	placement-type="Bottom"
-	horizontal-align="Left"
+	placement="Bottom"
+	horizontal-align="Start"
+	prevent-initial-focus
 	style="{{styles.suggestionsPopover}}"
-	@ui5-after-open={{_afterOpenPopover}}
-	@ui5-after-close={{_afterClosePopover}}
+	@ui5-open={{_afterOpenPopover}}
+	@ui5-close={{_afterClosePopover}}
 >
 	<ui5-busy-indicator
 		?active={{loading}}
-		size="Medium"
 		class="ui5-combobox-busy"
 	>
 	</ui5-busy-indicator>
@@ -29,25 +28,22 @@
 			</div>
 
 			<div class="row">
-				<div
-					class="input-root-phone"
+				<ui5-input
+					.value="{{value}}"
+					@ui5-input="{{_handleMobileInput}}"
+					@ui5-change="{{_inputChange}}"
+					placeholder="{{placeholder}}"
 					value-state="{{valueState}}"
+					?show-clear-icon="{{showClearIcon}}"
+					?no-typeahead="{{noTypeahead}}"
 				>
-					<input
-						class="ui5-input-inner-phone"
-						.value="{{value}}"
-						inner-input
-						placeholder="{{placeholder}}"
-						value-state="{{valueState}}"
-						@input="{{_input}}"
-						@change="{{_inputChange}}"
-						@keydown="{{_keydown}}"
-						aria-autocomplete="both"
-					/>
-				</div>
+					{{#each _filteredItems}}
+						<ui5-suggestion-item text="{{this.text}}" additional-text="{{this.additionalText}}"></ui5-suggestion-item>
+					{{/each}}
+				</ui5-input>
 			</div>
 		</div>
-		
+
 		{{#if hasValueStateText}}
 			<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
@@ -71,11 +67,11 @@
 		@ui5-item-click={{_selectItem}}
 		@ui5-item-focused={{_onItemFocus}}
 		@mousedown={{_itemMousedown}}
-		mode="SingleSelect"
+		selection-mode="Single"
 	>
 		{{#each _filteredItems}}
 			{{#if isGroupItem}}
-				<ui5-li-groupheader ?focused={{this.focused}}>{{ this.text }}</ui5-li-groupheader>
+				<ui5-li-group-header ?focused={{this.focused}}>{{ this.text }}</ui5-li-group-header>
 			{{else}}
 				{{> listItem}}
 			{{/if}}
@@ -96,12 +92,12 @@
 {{#if shouldOpenValueStateMessagePopover}}
 	<ui5-popover
 		skip-registry-update
-		_disable-initial-focus
+		prevent-initial-focus
 		prevent-focus-restore
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
 		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
-		placement-type="Bottom"
+		placement="Bottom"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
@@ -130,6 +126,7 @@
 			.mappedItem={{this}}
 			?selected={{this.selected}}
 			?focused={{this.focused}}
+			data-ui5-stable="{{this.stableDomRef}}"
 	>
 		{{this.text}}
 	</ui5-li>

package/src/DatePicker.hbs

@@ -1,45 +1,2 @@
-<div
-		class="ui5-date-picker-root"
-		style="{{styles.main}}"
->
-	{{! INPUT}}
-	<ui5-input
-			id="{{_id}}-inner"
-			class="ui5-date-picker-input"
-			placeholder="{{_placeholder}}"
-			type="{{type}}"
-			value="{{value}}"
-			?disabled="{{disabled}}"
-			?required="{{required}}"
-			?readonly="{{readonly}}"
-			value-state="{{valueState}}"
-			data-sap-focus-ref
-			._inputAccInfo ="{{accInfo}}"
-			@ui5-change="{{_onInputChange}}"
-			@ui5-input="{{_onInputInput}}"
-			@ui5-submit="{{_onInputSubmit}}"
-			@keydown="{{_onkeydown}}"
-	>
-
-		{{#if valueStateMessage.length}}
-			<slot name="valueStateMessage" slot="valueStateMessage"></slot>
-		{{/if}}
-
-		{{#unless readonly}}
-			<ui5-icon
-				slot="icon"
-				name="{{openIconName}}"
-				tabindex="-1"
-				accessible-name="{{openIconTitle}}"
-				accessible-role="button"
-				aria-hidden="{{_ariaHidden}}"
-				show-tooltip
-				@click="{{togglePicker}}"
-				input-icon
-				?pressed="{{_isPickerOpen}}"
-			></ui5-icon>
-		{{/unless}}
-	</ui5-input>
-
-	<slot name="formSupport"></slot>
-</div>
+{{>include "./DatePickerInput.hbs"}}
+{{>include "./DatePickerPopover.hbs"}}