@ui5/webcomponents 0.0.0-4180fe799 → 0.0.0-4237771ff

package/src/Select.hbs

@@ -1,6 +1,5 @@
 <div
-	class="ui5-select-root"
-	dir="{{effectiveDir}}"
+	class="ui5-select-root ui5-input-focusable-element"
 	id="{{_id}}-select"
 	@click="{{_onclick}}"
 >
@@ -9,34 +8,40 @@
 			aria-hidden="true"
 			class="ui5-select-option-icon"
 			name="{{selectedOptionIcon}}"
-			dir="{{effectiveDir}}"
 		></ui5-icon>
 	{{/if}}
 	<div class="ui5-select-label-root"
 		data-sap-focus-ref
-		tabindex="{{tabIndex}}"
+		tabindex="{{_effectiveTabIndex}}"
 		role="combobox"
 		aria-haspopup="listbox"
 		aria-label="{{ariaLabelText}}"
 		aria-describedby="{{valueStateTextId}}"
 		aria-disabled="{{isDisabled}}"
 		aria-required="{{required}}"
+		aria-readonly="{{readonly}}"
 		aria-expanded="{{_isPickerOpen}}"
+		aria-roledescription="{{_ariaRoleDescription}}"
 		@keydown="{{_onkeydown}}"
 		@keypress="{{_handleKeyboardNavigation}}"
 		@keyup="{{_onkeyup}}"
 		@focusin="{{_onfocusin}}"
 		@focusout="{{_onfocusout}}"
 	>
-		{{_text}}
+		{{#if hasCustomLabel}}
+			<slot name="label"></slot>
+		{{else}}
+			{{_text}}
+		{{/if}}
 	</div>
 
-	<ui5-icon
-		name="slim-arrow-down"
-		input-icon
-		?pressed="{{_iconPressed}}"
-		dir="{{effectiveDir}}"
-	></ui5-icon>
+	{{#unless readonly}}
+		<ui5-icon
+			name="slim-arrow-down"
+			input-icon
+			?pressed="{{_iconPressed}}"
+		></ui5-icon>
+	{{/unless}}
 
 	{{#if hasValueState}}
 		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{valueStateText}}</span>

package/src/SelectMenu.hbs

@@ -0,0 +1,57 @@
+<ui5-responsive-popover
+	class="ui5-select-menu"
+	placement-type="Bottom"
+	horizontal-align="Left"
+	@ui5-after-open="{{_onAfterOpen}}"
+	@ui5-after-close="{{_onAfterClose}}"
+	@ui5-before-open="{{_onBeforeOpen}}"
+	hide-arrow
+	_disable-initial-focus
+	style={{styles.responsivePopover}}
+	>
+		{{#if _isPhone}}
+			<div slot="header" class="ui5-responsive-popover-header">
+				<div class="row">
+					<span>{{_headerTitleText}}</span>
+					<ui5-button
+						class="ui5-responsive-popover-close-btn"
+						icon="decline"
+						design="Transparent"
+						@click="{{_onCloseBtnClick}}"
+					>
+					</ui5-button>
+				</div>
+				{{#if hasValueState}}
+					<div class="{{classes.popoverValueState}} row ui5-select-value-state-dialog-header">
+						{{> valueStateMessage}}
+					</div>
+				{{/if}}
+			</div>
+		{{/if}}
+		{{#unless _isPhone}}
+				{{#if hasValueState}}
+					<div class="{{classes.popoverValueState}}" style={{styles.valueStatePopover}}>
+						<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
+						{{> valueStateMessage}}
+					</div>
+				{{/if}}
+		{{/unless}}
+
+		<ui5-list 
+			mode="SingleSelect"
+			separators="None"
+			@ui5-item-click="{{_onOptionClick}}">
+					<slot></slot>
+		</ui5-list>
+</ui5-responsive-popover>
+
+
+{{#*inline "valueStateMessage"}}
+	{{#if hasValueStateSlot}}
+		{{#each valueStateMessageText}}
+			{{this}}
+		{{/each}}
+	{{else}}
+		{{ valueStateText }}
+	{{/if}}
+{{/inline}}

package/src/SelectPopover.hbs

@@ -4,11 +4,12 @@
 		_disable-initial-focus
 		placement-type="Bottom"
 		class="ui5-select-popover {{classes.popover}}"
-		horizontal-align="Stretch"
+		horizontal-align="Left"
 		@ui5-after-open="{{_afterOpen}}"
 		@ui5-before-open="{{_beforeOpen}}"
 		@ui5-after-close="{{_afterClose}}"
 		@keydown="{{_onkeydown}}"
+		style={{styles.responsivePopover}}
 	>
 		{{#if _isPhone}}
 			<div slot="header" class="ui5-responsive-popover-header">
@@ -31,7 +32,7 @@
 		{{/if}}
 		{{#unless _isPhone}}
 			{{#if hasValueStateText}}
-				<div slot="header" class="{{classes.popoverValueState}}" style={{styles.responsivePopoverHeader}}>
+				<div class="{{classes.popoverValueState}}" style={{styles.responsivePopoverHeader}}>
 					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 					{{> valueStateMessage}}
 				</div>
@@ -42,7 +43,7 @@
 			mode="SingleSelectAuto"
 			separators="None"
 			@mousedown="{{_itemMousedown}}"
-			@ui5-item-press="{{_handleItemPress}}"
+			@ui5-item-click="{{_handleItemPress}}"
 		>
 			{{#each _syncedOptions}}
 				<ui5-li
@@ -50,6 +51,8 @@
 					icon="{{this.icon}}"
 					?selected="{{this.selected}}"
 					?focused="{{this._focused}}"
+					title="{{this.title}}"
+					additional-text="{{this.additionalText}}"
 					?aria-selected="{{this.selected}}"
 					data-ui5-stable="{{this.stableDomRef}}"
 				>
@@ -65,13 +68,12 @@
 		skip-registry-update
 		_disable-initial-focus
 		prevent-focus-restore
-		no-padding
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
 		placement-type="Bottom"
 		horizontal-align="Left"
 	>
-		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+		<div class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 			{{> valueStateMessage}}
 		</div>

package/src/Slider.hbs

@@ -22,21 +22,21 @@
 		@focusout="{{_onfocusout}}"
 		@focusin="{{_onfocusin}}"
 		role="slider"
-		tabindex="{{tabIndex}}"
+		tabindex="{{_tabIndex}}"
 		aria-orientation="horizontal"
 		aria-valuemin="{{min}}"
 		aria-valuemax="{{max}}"
 		aria-valuenow="{{value}}"
-		aria-labelledby="{{_id}}-sliderDesc"
+		aria-labelledby="{{_ariaLabelledByHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 		data-sap-focus-ref
 		part="handle"
 	>
-	<ui5-icon name="source-code" part="icon-slider" slider-icon></ui5-icon>
+			<ui5-icon name="direction-arrows" part="icon-slider" slider-icon></ui5-icon>
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip" style="{{styles.tooltip}}">
 				<span class="ui5-slider-tooltip-value">{{tooltipValue}}</span>
 			</div>
 		{{/if}}
 	</div>
-{{/inline}}
+{{/inline}}

package/src/SliderBase.hbs

@@ -1,19 +1,27 @@
 <div
-	class="ui5-slider-root"
+	class="ui5-slider-root {{classes.root}}"
 	@mousedown="{{_onmousedown}}"
 	@touchstart="{{_ontouchstart}}"
 	@mouseover="{{_onmouseover}}"
 	@mouseout="{{_onmouseout}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
-	dir="{{effectiveDir}}"
+	part="root-container"
 >
 	{{> handlesAriaText}}
 
 	<div class="ui5-slider-inner">
 		{{#if step}}
 			{{#if showTickmarks}}
-				<div class="ui5-slider-tickmarks" style="{{styles.tickmarks}}"></div>
+				<ul class="ui5-slider-tickmarks">
+					{{#each tickmarksObject}}
+						{{#if this}}
+							<li class="ui5-slider-tickmark ui5-slider-tickmark-in-range"></li>
+						{{else}}
+							<li class="ui5-slider-tickmark"></li>
+						{{/if}}
+					{{/each}}
+				</ul>
 				{{#if labelInterval}}
 					<ul class="ui5-slider-labels {{classes.labelContainer}}" style="{{styles.labelContainer}}">
 						{{#each _labels}}
@@ -29,6 +37,7 @@
 		{{> handles}}
 	</div>
 
+	<span id="{{_id}}-accName" class="ui5-hidden-text">{{accessibleName}}</span>
 	<span id="{{_id}}-sliderDesc" class="ui5-hidden-text">{{_ariaLabelledByText}}</span>
 </div>
 

package/src/SplitButton.hbs

@@ -0,0 +1,57 @@
+<div
+	class="ui5-split-button-root"
+	role="group"
+	tabindex={{_tabIndex}}
+	aria-labelledby="{{_id}}-invisibleTextDefault {{_id}}-invisibleText"
+	@focusout={{_onFocusOut}}
+	@focusin={{_onFocusIn}}
+	@keydown={{_onKeyDown}}
+	@keyup={{_onKeyUp}}
+>
+
+	<ui5-button
+		class="ui5-split-text-button"
+		design="{{design}}"
+		dir={{effectiveDir}}
+		icon="{{_textButtonIcon}}"
+		tabindex="-1"
+		?disabled="{{disabled}}"
+		?active="{{_textButtonActive}}"
+		@click="{{_handleMouseClick}}"
+		@touchstart={{_textButtonPress}}
+		@mousedown={{_textButtonPress}}
+		@mouseup={{_textButtonRelease}}
+		@focusin={{_textButtonFocusIn}}
+		@focusout={{_onFocusOut}}
+	>
+		{{#if isTextButton}}
+			<slot></slot>
+		{{/if}}
+	</ui5-button>
+
+	<div
+		class="ui5-split-arrow-button-wrapper"
+		dir={{effectiveDir}}
+	>
+		<ui5-button
+			class="ui5-split-arrow-button"
+			design="{{design}}"
+			icon="slim-arrow-down"
+			tabindex="-1"
+			?disabled="{{disabled}}"
+			?active="{{effectiveActiveArrowButton}}"
+			aria-expanded="{{accessibilityInfo.ariaExpanded}}"
+			aria-haspopup="{{accessibilityInfo.ariaHaspopup}}"
+			@click="{{_handleArrowButtonAction}}"
+			@mousedown={{_arrowButtonPress}}
+			@mouseup={{_arrowButtonRelease}}
+			@focusin={{_setTabIndexValue}}
+			@ui5-_active-state-change={{_onArrowButtonActiveStateChange}}
+		>
+		</ui5-button>
+	</div>
+
+	<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accessibilityInfo.description}} {{accessibilityInfo.keyboardHint}} {{accessibleName}}</span>
+	<span id="{{_id}}-invisibleTextDefault" class="ui5-hidden-text">{{textButtonAccText}}</span>
+
+</div>

package/src/StandardListItem.hbs

@@ -24,21 +24,27 @@
 {{/inline}}
 
 {{#*inline "imageBegin"}}
-	{{#if displayImage}}
-		<ui5-avatar shape="Square" class="ui5-li-img">
-			<img src="{{image}}" class="ui5-li-img-inner" />
-		</ui5-avatar>
+	{{#if hasImageContent}}
+		<div class="ui5-li-imgContent" >
+			<slot name="imageContent"></slot>
+		</div>
+	{{else}}
+		{{#if displayImage}}
+			<ui5-avatar shape="Square" class="ui5-li-img">
+				<img src="{{image}}" class="ui5-li-img-inner" />
+			</ui5-avatar>
+		{{/if}}
 	{{/if}}
 {{/inline}}
 
 {{#*inline "iconBegin"}}
 	{{#if displayIconBegin}}
-		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon"></ui5-icon>
+		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon" accessible-role="presentation" aria-hidden="true"></ui5-icon>
 	{{/if}}
 {{/inline}}
 
 {{#*inline "iconEnd"}}
 	{{#if displayIconEnd}}
-		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon"></ui5-icon>
+		<ui5-icon part="icon" name="{{icon}}" class="ui5-li-icon" accessible-role="presentation" aria-hidden="true"></ui5-icon>
 	{{/if}}
 {{/inline}}

package/src/StepInput.hbs

@@ -5,13 +5,13 @@
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 >
-	<!-- Decrement Icon -->
+	{{! Decrement Icon}}
 	{{#unless readonly}}
 	<div
 		class="ui5-step-icon ui5-step-dec"
 		title="{{decIconTitle}}"
 	>
-	
+
 		<ui5-icon
 			id="{{_id}}-dec"
 			name="{{decIconName}}"
@@ -28,7 +28,8 @@
 		></ui5-icon>
 	</div>
 	{{/unless}}
-	<!-- INPUT -->
+
+	{{! INPUT}}
 	<ui5-input
 			id="{{_id}}-inner"
 			class="ui5-step-input-input"
@@ -53,7 +54,7 @@
 
 	</ui5-input>
 
-	<!-- Increment Icon -->
+	{{! Increment Icon}}
 	{{#unless readonly}}
 	<div
 		class="ui5-step-icon ui5-step-inc"

package/src/Switch.hbs

@@ -1,21 +1,23 @@
 <div
 	class="ui5-switch-root {{classes.main}}"
-	role="checkbox"
+	role="switch"
+	aria-label="{{ariaLabelText}}"
 	aria-checked="{{checked}}"
-	aria-disabled="{{ariaDisabled}}"
-	aria-labelledby="{{_id}}-hiddenText"
+	aria-disabled="{{effectiveAriaDisabled}}"
+	aria-required="{{required}}"
 	@click="{{_onclick}}"
 	@keyup="{{_onkeyup}}"
 	@keydown="{{_onkeydown}}"
-	tabindex="{{tabIndex}}"
+	tabindex="{{effectiveTabIndex}}"
 	dir="{{effectiveDir}}"
+	title="{{tooltip}}"
 >
 	<div class="ui5-switch-inner">
 		<div class="ui5-switch-track" part="slider">
 			<div class="ui5-switch-slider">
 				{{#if graphical}}
 					<span class="ui5-switch-text ui5-switch-text--on">
-						<ui5-icon name="accept" dir="ltr" class="ui5-switch-icon-on"></ui5-icon>
+						<ui5-icon name="accept" class="ui5-switch-icon-on"></ui5-icon>
 					</span>
 					<span class="ui5-switch-text ui5-switch-text--off">
 						<ui5-icon name="decline" class="ui5-switch-icon-off"></ui5-icon>
@@ -46,5 +48,5 @@
 	</div>
 
 	<input type='checkbox' ?checked="{{checked}}" class="ui5-switch-input" data-sap-no-tab-ref/>
-	<span id="{{_id}}-hiddenText" class="ui5-hidden-text">{{hiddenText}}</span>
+	<slot name="formSupport"></slot>
 </div>

package/src/Tab.hbs

@@ -1,3 +1,9 @@
-<div id="{{_id}}" class="ui5-tab-root">
-	<slot></slot>
+<div id="{{_id}}"
+	class="ui5-tab-root"
+	data-ui5-stable="{{this.stableDomRef}}">
+	<slot name="{{this._defaultSlotName}}"></slot>
+
+	{{#each tabs}}
+	<slot name="{{this._effectiveSlotName}}"></slot>
+	{{/each}}
 </div>

package/src/TabContainer.hbs

@@ -1,93 +1,88 @@
-<div
-	class="{{classes.root}}"
-	dir="{{effectiveDir}}"
->
+<div class="{{classes.root}}">
 	{{#if tabsAtTheBottom}}
 		{{> contentArea}}
 	{{/if}}
+	<div
+		class="{{classes.header}}"
+		id="{{_id}}-header"
+		@focusin="{{_onHeaderFocusin}}"
+		part="tabstrip"
+	>
+		<div
+			class="ui5-tc__overflow ui5-tc__overflow--start"
+			@click="{{_onOverflowClick}}"
+			@keydown="{{_onOverflowKeyDown}}"
+			hidden
+		>
+			{{#if startOverflowButton.length}}
+				<slot name="startOverflowButton"></slot>
+			{{else}}
+				<ui5-button
+					icon="{{overflowMenuIcon}}"
+					data-ui5-stable="overflow-start"
+					tabindex="-1"
+					tooltip="{{overflowMenuTitle}}"
+					aria-haspopup="menu"
+					icon-end>{{this._startOverflowText}}</ui5-button>
+			{{/if}}
+		</div>
 
-	<div class="{{classes.header}}" id="{{_id}}-header">
-		<div class="{{classes.headerInnerContainer}}">
-			<div class="{{classes.headerBackArrow}}">
-				<ui5-button @click="{{_onHeaderBackArrowClick}}"
-							icon="slim-arrow-left"
-							design="Transparent"
-							tabindex="-1"
-							title="{{previousIconACCName}}"></ui5-button>
-			</div>
-			<!-- tab items -->
-			<div class="{{classes.headerScrollContainer}}" id="{{_id}}-headerScrollContainer">
-				<ul
-					role="tablist"
-					@focusin={{_onTablistFocusin}}
-					class="{{classes.headerList}}"
-					@click="{{_onHeaderClick}}"
-					@keydown="{{_onHeaderKeyDown}}"
-					@keyup="{{_onHeaderKeyUp}}"
-				>
-					{{#each items}}
-						{{#unless this.isSeparator}}
-							{{this.stripPresentation}}
-						{{/unless}}
-						{{#if this.isSeparator}}
-							<li
-								id="{{this._id}}"
-								data-ui5-stable="{{this.stableDomRef}}"
-								role="separator"
-								class="{{../classes.separator}}"
-							></li>
-						{{/if}}
-					{{/each}}
-				</ul>
-			</div>
-			<div class="{{classes.headerForwardArrow}}">
-			<ui5-button @click="{{_onHeaderForwardArrowClick}}"
-						icon="slim-arrow-right"
-						design="Transparent"
-						tabindex="-1"
-						title="{{nextIconACCName}}"></ui5-button>
+		<div
+			id="{{_id}}-tabStrip"
+			class="{{classes.tabStrip}}"
+			role="tablist"
+			aria-describedby="{{tablistAriaDescribedById}}"
+			@click="{{_onTabStripClick}}"
+			@keydown="{{_onTabStripKeyDown}}"
+			@keyup="{{_onTabStripKeyUp}}"
+		>
+			{{#each items}}
+				{{this.stripPresentation}}
+			{{/each}}
 		</div>
+
+		<div
+			class="ui5-tc__overflow ui5-tc__overflow--end"
+			@click="{{_onOverflowClick}}"
+			@keydown="{{_onOverflowKeyDown}}"
+			hidden
+		>
+			{{#if overflowButton.length}}
+				<slot name="overflowButton"></slot>
+			{{else}}
+				<ui5-button
+					icon="{{overflowMenuIcon}}"
+					data-ui5-stable="overflow-end"
+					tabindex="-1"
+					tooltip="{{overflowMenuTitle}}"
+					aria-haspopup="menu"
+					icon-end>{{this._endOverflowText}}</ui5-button>
+			{{/if}}
 		</div>
-		<!-- overflow button -->
-		{{#if shouldShowOverflow}}
-			<div
-				class="ui-tc__overflowButton"
-				@click="{{_onOverflowButtonClick}}"
-			>
-				{{#if overflowButton.length}}
-					<slot name="overflowButton"></slot>
-				{{else}}
-					<ui5-button
-						icon="{{overflowMenuIcon}}"
-						design="Transparent"
-						tabindex="-1"
-						title="{{overflowMenuTitle}}"
-						aria-haspopup="true"></ui5-button>
-				{{/if}}
-			</div>
-		{{/if}}
 	</div>
 
 	{{#unless tabsAtTheBottom}}
 		{{> contentArea}}
 	{{/unless}}
 
+	{{#if hasSubTabs}}
+		<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accInvisibleText}}</span>
+	{{/if}}
+
 </div>
 
 {{#*inline "contentArea"}}
-	<div class="{{classes.content}}">
-		{{#each items}}
-			{{#unless this.isSeparator}}
-				<div
-					class="ui5-tc__contentItem"
-					id="ui5-tc-contentItem-{{this._posinset}}"
-					?hidden="{{this.effectiveHidden}}"
-					role="tabpanel"
-					aria-labelledby="{{this._id}}"
-				>
-					<slot name="{{this._individualSlot}}"></slot>
-				</div>
-			{{/unless}}
-		{{/each}}
+	<div class="{{classes.content}}" part="content">
+		<div
+			class="ui5-tc__contentItem"
+			id="ui5-tc-content"
+			?hidden="{{this._selectedTab.effectiveHidden}}"
+			role="tabpanel"
+			aria-labelledby="{{this._selectedTab._id}}"
+		>
+			{{#each items}}
+				<slot name="{{this._effectiveSlotName}}"></slot>
+			{{/each}}
+		</div>
 	</div>
 {{/inline}}

package/src/TabContainerPopover.hbs

@@ -3,22 +3,19 @@
 	horizontal-align="Right"
 	placement-type="Bottom"
 	content-only-on-desktop
-	with-padding
 	hide-arrow
 	_hide-header
 	class="ui5-tab-container-responsive-popover"
 >
-	<ui5-list @ui5-item-press="{{_onOverflowListItemSelect}}">
-		{{#each items}}
-			{{#unless this.isSeparator}}
-				{{this.overflowPresentation}}
-			{{/unless}}
+	<ui5-list mode="SingleSelect" separators="None" @ui5-item-click="{{_onOverflowListItemClick}}">
+		{{#each _overflowItems}}
+			{{overflowPresentation}}
 		{{/each}}
 	</ui5-list>
 	<div slot="footer" class="ui5-responsive-popover-footer">
 		<ui5-button
 			design="Transparent"
 			@click="{{_closeRespPopover}}"
-		>Cancel</ui5-button>
+		>{{popoverCancelButtonText}}</ui5-button>
 	</div>
-</ui5-responsive-popover>
+</ui5-responsive-popover>

package/src/TabInOverflow.hbs

@@ -1,22 +1,32 @@
 <ui5-li-custom
-	id="{{this._id}}"
+	id="{{this._id}}-li"
 	class="{{this.overflowClasses}}"
 	type="{{this.overflowState}}"
-	?selected="{{this.effectiveSelected}}"
-	?disabled="{{this.effectiveDisabled}}"
 	aria-disabled="{{this.effectiveDisabled}}"
 	aria-selected="{{this.effectiveSelected}}"
-	aria-labelledby="{{this.ariaLabelledBy}}"
+	._realTab="{{this}}"
+	style="{{this._style}}"
 >
-	<div class="ui5-tab-overflow-itemContent">
-		{{#if this.icon}}
-			<ui5-icon name="{{this.icon}}"></ui5-icon>
-		{{/if}}
-
-		{{this.text}}
-
-		{{#if this.additionalText}}
-			({{this.additionalText}})
-		{{/if}}
+	<div class="ui5-tab-overflow-itemContent-wrapper">
+		<div class="ui5-tab-overflow-itemContent">
+			{{#if this.semanticIconName}}
+				<ui5-icon class="{{this.semanticIconClasses}}" name="{{this.semanticIconName}}"></ui5-icon>
+			{{/if}}
+			{{#if this.icon}}
+				<ui5-icon name="{{this.icon}}"></ui5-icon>
+			{{/if}}
+			{{this.text}}
+			{{#if this.additionalText}}
+				({{this.additionalText}})
+			{{/if}}
+			{{#if this._designDescription}}
+				<div id="{{this._id}}-designDescription" class="ui5-hidden-text">
+					{{this._designDescription}}
+				</div>
+			{{/if}}
+		</div>
 	</div>
 </ui5-li-custom>
+{{#each subTabs}}
+	{{overflowPresentation}}
+{{/each}}