@ui5/webcomponents-fiori 2.5.0-rc.3 → 2.6.0-rc.0

package/src/DynamicPage.hbs

@@ -1,60 +0,0 @@
-<div class="ui5-dynamic-page-root">
-	<div  class="ui5-dynamic-page-scroll-container" @scroll="{{snapOnScroll}}">
-		<header
-			class="ui5-dynamic-page-title-header-wrapper"
-			id="{{_id}}-header"
-			aria-label="{{_headerLabel}}"
-			aria-expanded="{{_headerExpanded}}"
-			role="region"
-			@ui5-_toggle-title={{onToggleTitle}}
-		>
-			<slot name="titleArea"></slot>
-			{{#if headerInTitle}}
-				<slot tabindex="{{headerTabIndex}}" ?aria-hidden="{{headerAriaHidden}}" name="headerArea"></slot>
-			{{/if}}
-
-			{{#if actionsInTitle}}
-				{{> header-actions}}
-			{{/if}}
-		</header>
-		
-		{{#if headerInContent}}
-			<slot tabindex="{{headerTabIndex}}" ?aria-hidden="{{headerAriaHidden}}" name="headerArea"></slot>
-		{{/if}}
-
-		{{#unless actionsInTitle}}
-			{{> header-actions}}
-		{{/unless}}
-
-		<div class="ui5-dynamic-page-content" part="content">
-			<div class="ui5-dynamic-page-fit-content" part="fit-content">
-				<slot></slot>
-				{{#if showFooter}}
-					<div class="ui5-dynamic-page-spacer"></div>
-				{{/if}}
-			</div>
-		</div>
-	</div>
-
-	<div class="ui5-dynamic-page-footer" part="footer">
-		<slot name="footerArea"></slot>
-	</div>
-</div>
-
-{{#*inline "header-actions"}}
-	{{#unless hasSnappedTitleOnMobile}}
-		{{#if hasHeading}}
-			<ui5-dynamic-page-header-actions
-				?snapped="{{headerSnapped}}"
-				?pinned="{{headerPinned}}"
-				?hide-pin-button="{{hidePinButton}}"
-				.accessibilityAttributes="{{_accAttributesForHeaderActions}}"
-				@ui5-expand-button-click={{onExpandClick}}
-				@ui5-pin-button-click={{onPinClick}}
-				@ui5-expand-button-hover-in={{onExpandHoverIn}}
-				@ui5-expand-button-hover-out={{onExpandHoverOut}}
-				>
-			</ui5-dynamic-page-header-actions>
-		{{/if}}
-	{{/unless}}
-{{/inline}}

package/src/DynamicPageHeader.hbs

@@ -1,3 +0,0 @@
-<div class="ui5-dynamic-page-header-root">
-    <slot></slot>
-</div>

package/src/DynamicPageHeaderActions.hbs

@@ -1,25 +0,0 @@
-<div class="ui5-dynamic-page-header-actions-root">
-    <div class="ui5-dynamic-page-header-actions--wrapper">
-        <ui5-button
-            class="ui5-dynamic-page-header-action ui5-dynamic-page-header-action-expand"
-            @click="{{onExpandClick}}"
-            icon="{{arrowButtonIcon}}"
-            accessible-name="{{expandLabel}}"
-            .accessibilityAttributes="{{accessibilityAttributes}}"
-            tooltip="{{expandLabel}}"
-            @mouseover="{{onExpandHoverIn}}"
-            @mouseout="{{onExpandHoverOut}}"
-        ></ui5-button>
-    {{#if showPinButton}}
-        <ui5-toggle-button
-            class="ui5-dynamic-page-header-action ui5-dynamic-page-header-action-pin"
-            @click="{{onPinClick}}"
-            icon="{{pinButtonIcon}}"
-            ?pressed="{{pinned}}"
-            .accessibilityAttributes="{{accessibilityAttributes}}"
-            accessible-name="{{pinLabel}}"
-            tooltip="{{pinLabel}}"
-        ></ui5-toggle-button>
-    {{/if}}
-    </div>
-</div>

package/src/DynamicPageTitle.hbs

@@ -1,55 +0,0 @@
-<div class="ui5-dynamic-page-title-root">
-  <span class="ui5-dynamic-page-title-focus-area"
-    data-sap-focus-ref
-    tabindex="{{_tabIndex}}"
-    @keydown="{{_onkeydown}}"
-    @click="{{onTitleClick}}"
-    role="button"
-    aria-expanded="{{_headerExpanded}}"
-    aria-labelledby="{{_ariaLabelledBy}}"
-    aria-describedby="{{_id}}-toggle-description">
-  </span>
-
-  {{#if hasSnappedTitleOnMobile}}
-    <div id="{{_id}}-heading" class="ui5-dynamic-page--snapped-title-on-mobile">
-        <slot name="snappedTitleOnMobile"></slot>
-        <ui5-icon name="slim-arrow-down" mode="Decorative"></ui5-icon>
-    </div>
-  {{else}}
-    <div class="ui5-dynamic-page-title--top-area">
-      <slot name="breadcrumbs"></slot>
-
-      {{#if mobileNavigationActions}}
-        <slot name="navigationBar"></slot>
-      {{/if}}
-    </div>
-
-    <div class="ui5-dynamic-page-title--wrapper"
-      @ui5-_min-content-width-change={{onMinContentWidthChange}}>
-      <div id="{{_id}}-heading" class="ui5-dynamic-page-title--heading">
-        <slot name="{{headingSlotName}}"></slot>
-      </div>
-
-      {{#if hasContent}}
-        <div class="ui5-dynamic-page-title--content"
-          style="{{styles.content}}">
-          <slot></slot>
-        </div>
-      {{/if}}
-
-      <div class="ui5-dynamic-page-title--actions"
-        style="{{styles.actions}}">
-        <slot name="actionsBar"></slot>
-        {{#unless mobileNavigationActions}}
-          {{#if _needsSeparator}}
-            <div class="ui5-dynamic-page-title--actions-separator"></div>
-          {{/if}}
-          <slot name="navigationBar"></slot>
-        {{/unless}}
-      </div>
-    </div>
-    <slot name="{{subheadingSlotName}}"></slot>
-  {{/if}}
-  
-  <span id="{{_id}}-toggle-description" class="ui5-hidden-text">{{_ariaDescribedbyText}}</span>
-</div>

package/src/DynamicSideContent.hbs

@@ -1,34 +0,0 @@
-<div
-	class="ui5-dsc-root"
-	style="{{styles.root}}"
->
-
-	{{#if _isSideContentFirst}}
-		{{> sideContent}}
-		{{> mainContent}}
-	{{else}}
-		{{> mainContent}}
-		{{> sideContent}}
-	{{/if}}
-
-</div>
-
-{{#*inline "mainContent"}}
-	<div
-		class="{{classes.main}}"
-		style="{{styles.main}}"
-	>
-		<slot></slot>
-	</div>
-{{/inline}}
-
-{{#*inline "sideContent"}}
-	<aside
-		role="complementary"
-		aria-label="{{accInfo.label}}"
-		class="{{classes.side}}"
-		style="{{styles.side}}"
-	>
-		<slot name="sideContent"></slot>
-	</aside>
-{{/inline}}

package/src/FlexibleColumnLayout.hbs

@@ -1,58 +0,0 @@
-<div class="{{classes.root}}">
-	<div
-		role="{{_accAttributes.columns.start.role}}"
-		aria-hidden="{{_accAttributes.columns.start.ariaHidden}}"
-		class="{{classes.columns.start}}"
-		aria-labelledby="{{_id}}-startColumnText"
-	>
-		<span id="{{_id}}-startColumnText" class="ui5-hidden-text">{{accStartColumnText}}</span>
-		<slot name="startColumn" aria-hidden="{{_accAttributes.columns.middle.ariaHidden}}"></slot>
-	</div>
-
-	<div role="{{accStartSeparatorRole}}" title={{accStartSeparatorText}} class="ui5-fcl-separator ui5-fcl-separator-start" style="{{styles.separator.start}}" tabindex="{{startSeparatorTabIndex}}"
-		@mousedown="{{onSeparatorPress}}" @touchstart="{{onSeparatorPress}}" @keydown="{{_onkeydown}}" @keyup="{{_onkeyup}}">
-		{{> gripStart}}
-	</div>
-
-	<div
-		role="{{_accAttributes.columns.middle.role}}"
-		aria-hidden="{{_accAttributes.columns.middle.ariaHidden}}"
-		class="{{classes.columns.middle}}"
-		aria-labelledby="{{_id}}-midColumnText"
-	>
-		<span id="{{_id}}-midColumnText" class="ui5-hidden-text">{{accMiddleColumnText}}</span>
-		<slot name="midColumn" aria-hidden="{{_accAttributes.columns.middle.ariaHidden}}"></slot>
-	</div>
-
-	<div role="{{accEndSeparatorRole}}" title="{{accEndSeparatorText}}" class="ui5-fcl-separator ui5-fcl-separator-end" style="{{styles.separator.end}}" tabindex="{{endSeparatorTabIndex}}"
-		@mousedown="{{onSeparatorPress}}" @touchstart="{{onSeparatorPress}}" @keydown="{{_onkeydown}}" @keyup="{{_onkeyup}}">
-		{{> gripEnd}}
-	</div>
-
-	<div
-		role="{{_accAttributes.columns.end.role}}"
-		aria-hidden="{{_accAttributes.columns.end.ariaHidden}}"
-		class="{{classes.columns.end}}"
-		aria-labelledby="{{_id}}-endColumnText"
-	>
-		<span id="{{_id}}-endColumnText" class="ui5-hidden-text">{{accEndColumnText}}</span>
-		<slot name="endColumn" aria-hidden="{{_accAttributes.columns.middle.ariaHidden}}"></slot>
-	</div>
-</div>
-
-{{#*inline "gripStart"}}
-	<ui5-icon
-		class="ui5-fcl-grip ui5-fcl-grip--start"
-		name="vertical-grip"
-		style="{{styles.grip.start}}"
-	></ui5-icon>
-{{/inline}}
-
-
-{{#*inline "gripEnd"}}
-	<ui5-icon
-		class="ui5-fcl-grip ui5-fcl-grip--end"
-		style="{{styles.grip.end}}"
-		name="vertical-grip"
-	></ui5-icon>
-{{/inline}}

package/src/IllustratedMessage.hbs

@@ -1,67 +0,0 @@
-<div class="ui5-illustrated-message-root">
-	<div class="ui5-illustrated-message-inner">
-		<div class="ui5-illustrated-message-illustration">
-			{{{effectiveIllustration}}}
-		</div>
-		<div class="ui5-illustrated-message-text-and-actions-container">
-			{{#if hasTitle}}
-				<div part="title" class="ui5-illustrated-message-title">
-					{{#if hasFormattedTitle}}
-						<slot name="title"></slot>
-					{{else}}
-						<ui5-title>{{effectiveTitleText}}</ui5-title>
-					{{/if}}
-				</div>
-			{{/if}}
-
-			{{#if hasSubtitle}}
-				<div part="subtitle" class="ui5-illustrated-message-subtitle">
-					{{#if hasFormattedSubtitle}}
-						<slot name="subtitle"></slot>
-					{{else}}
-						{{effectiveSubitleText}}
-					{{/if}}
-				</div>
-			{{/if}}
-			{{#if hasActions}}
-				<div class="ui5-illustrated-message-actions">
-					<slot></slot>
-				</div>
-			{{/if}}
-		</div>
-	</div>
-
-	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-		class="ui5-illustrated-message-util">
-		<defs>
-			<pattern id="sapIllus_PatternShadow" data-name="sapIllus_PatternShadow" width="3" height="5.5"
-				patternUnits="userSpaceOnUse" viewBox="0 0 3 5.5">
-				<rect class="sapIllus_NoColor sapIllus_NoColor_Fill" width="3" height="5.5" />
-				<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cx="3"
-					cy="5.5001" r="0.5" />
-				<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cy="5.5001"
-					r="0.5" />
-				<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cx="1.5"
-					cy="2.7501" r="0.5" />
-				<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cx="3"
-					cy="0.0001" r="0.5" />
-				<circle class="sapIllus_BrandColorPrimary sapIllus_BrandColorPrimary_Fill" cy="0.0001"
-					r="0.5" />
-			</pattern>
-			<pattern id="sapIllus_PatternHighlight" data-name="sapIllus_PatternHighlight" width="3" height="5.5"
-				patternTransform="translate(35.9059 309.6208)" patternUnits="userSpaceOnUse" viewBox="0 0 3 5.5">
-				<rect class="sapIllus_NoColor sapIllus_NoColor_Fill" width="3" height="5.5" />
-				<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="3.0001"
-					cy="5.5001" r="0.5" />
-				<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="0.0001"
-					cy="5.5001" r="0.5" />
-				<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="1.5001"
-					cy="2.7501" r="0.5" />
-				<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="3.0001"
-					cy="0.0001" r="0.5" />
-				<circle class="sapIllus_ObjectFillColor sapIllus_ObjectFillColor_Fill" cx="0.0001"
-					cy="0.0001" r="0.5" />
-			</pattern>
-		</defs>
-	</svg>
-</div>

package/src/NavigationLayout.hbs

@@ -1,13 +0,0 @@
-<div class="ui5-nl-root">
-	<header class="ui5-nl-header">
-		<slot name="header"></slot>
-	</header>
-	<section class="ui5-nl-section">
-		<aside class="ui5-nl-aside">
-			<slot name="sideContent"></slot>
-		</aside>
-		<div class="ui5-nl-content">
-			<slot></slot>
-		</div>
-	</section>
-</div>

package/src/NotificationList.hbs

@@ -1,10 +0,0 @@
-<ui5-notification-list-internal
-	.accessibleName="{{_accessibleName}}"
-	.noDataText="{{noDataText}}"
-	@ui5-item-click="{{_onItemClick}}"
-	@ui5-item-close="{{_onItemClose}}"
-	@ui5-item-toggle="{{_onItemToggle}}"
-	@ui5-load-more="{{_onLoadMore}}"
->
-	<slot></slot>
-</ui5-notification-list-internal>

package/src/Page.hbs

@@ -1,15 +0,0 @@
-<div class="ui5-page-root">
-	<header
-		class="ui5-page-header-root"
-		id="ui5-page-header">
-		<slot name="header"></slot>
-	</header>
-
-	<section part="content" class="ui5-page-content-root" style="{{styles.content}}">
-		<slot></slot>
-	</section>
-
-	<footer class="ui5-page-footer-root" style="{{styles.footer}}">
-		<slot name="footer"></slot>
-	</footer>
-</div>

package/src/ProductSwitch.hbs

@@ -1,9 +0,0 @@
-<div class="ui5-product-switch-root"
-	role="list"
-	aria-label="{{_ariaLabelText}}"
-	@focusin={{_onfocusin}}
-	@keydown={{_onkeydown}}
-	@click="{{handleProductSwitchItemClick}}"
->
-	<slot></slot>
-</div>

package/src/ProductSwitchItem.hbs

@@ -1,44 +0,0 @@
-{{#if targetSrc}}
-	<a class="ui5-product-switch-item-root"
-		data-sap-focus-ref
-		@focusout="{{_onfocusout}}"
-		@focusin="{{_onfocusin}}"
-		@mousedown="{{_onmousedown}}"
-		@keydown="{{_onkeydown}}"
-		@keyup="{{_onkeyup}}"
-		tabindex={{forcedTabIndex}}
-		href="{{targetSrc}}"
-		target="{{_effectiveTarget}}">
-		{{> item}}
-	</a>
-{{else}}
-	<div
-		role="listitem"
-		class="ui5-product-switch-item-root"
-		data-sap-focus-ref
-		@focusout="{{_onfocusout}}"
-		@focusin="{{_onfocusin}}"
-		@mousedown="{{_onmousedown}}"
-		@keydown="{{_onkeydown}}"
-		@keyup="{{_onkeyup}}"
-		tabindex={{forcedTabIndex}}>
-		{{> item}}
-	</div>
-{{/if}}
-
-{{#*inline "item"}}
-	{{#if icon}}
-		<ui5-icon
-			class="ui5-product-switch-item-icon"
-			name="{{icon}}"
-		></ui5-icon>
-	{{/if}}
-	<span class="ui5-product-switch-item-text-content">
-		{{#if titleText}}
-			<span class="ui5-product-switch-item-title">{{titleText}}</span>
-		{{/if}}
-		{{#if subtitleText}}
-			<span class="ui5-product-switch-item-subtitle">{{subtitleText}}</span>
-		{{/if}}
-	</span>
-{{/inline}}

package/src/SideNavigation.hbs

@@ -1,57 +0,0 @@
-<nav class="ui5-sn-root {{classes.root}}" role="{{_rootRole}}">
-	{{> header }}
-
-	{{#if collapsed}}
-		<div role="menubar"
-			 class="ui5-sn-list ui5-sn-flexible"
-			 aria-orientation="vertical"
-			 aria-roledescription="{{ariaRoleDescNavigationList}}"
-		>
-			<slot></slot>
-			<ui5-side-navigation-item
-					is-overflow
-					id="{{_id}}-sn-overflow-item"
-					text="{{overflowAccessibleName}}"
-					@click="{{_handleOverflowClick}}"
-					class="ui5-sn-item-overflow"
-					side-nav-collapsed
-					icon="overflow">
-			</ui5-side-navigation-item>
-		</div>
-	{{else}}
-		<ul role="tree"
-			class="ui5-sn-list ui5-sn-flexible"
-			aria-roledescription="{{ariaRoleDescNavigationList}}"
-		>
-			<slot></slot>
-		</ul>
-	{{/if}}
-
-	{{#if hasFixedItems}}
-		<div role="separator" class="ui5-sn-spacer"></div>
-		{{#if collapsed}}
-			<div role="menubar"
-				 class="ui5-sn-list ui5-sn-fixed"
-				 aria-orientation="vertical"
-				 aria-roledescription="{{ariaRoleDescNavigationList}}"
-			>
-				<slot name="fixedItems"></slot>
-			</div>
-		{{else}}
-			<ul role="tree"
-				class="ui5-sn-list ui5-sn-fixed"
-				aria-roledescription="{{ariaRoleDescNavigationList}}"
-			>
-				<slot name="fixedItems"></slot>
-			</ul>
-		{{/if}}
-	{{/if}}
-</nav>
-
-{{#*inline header}}
-	{{#if showHeader}}
-		<slot name="header"></slot>
-	{{/if}}
-{{/inline}}
-
-{{>include "./SideNavigationPopover.hbs"}}

package/src/SideNavigationGroup.hbs

@@ -1,41 +0,0 @@
-{{#if sideNavCollapsed}}
-	<div class="ui5-sn-item-separator {{belowGroupClassName}}"></div>
-	<slot></slot>
-	<div class="ui5-sn-item-separator"></div>
-{{else}}
-	{{> treeitem }}
-{{/if}}
-
-{{#*inline treeitem}}
-	<li id="{{_id}}" class="ui5-sn-list-li {{belowGroupClassName}}" role="none">
-		<div class="ui5-sn-item-separator"></div>
-		<div class="ui5-sn-item ui5-sn-item-group {{_classes}}"
-			 role="treeitem"
-			 data-sap-focus-ref
-			 @keydown="{{_onkeydown}}"
-			 @click="{{_onclick}}"
-			 @focusin="{{_onfocusin}}"
-			 tabindex="{{effectiveTabIndex}}"
-			 aria-expanded="{{_expanded}}"
-			 aria-description="{{accDescription}}"
-			 title="{{_tooltip}}"
-			 aria-owns="{{_groupId}}"
-		>
-			<div class="ui5-sn-item-text">{{text}}</div>
-			{{#if items.length}}
-				<ui5-icon class="ui5-sn-item-toggle-icon"
-						  name="{{_toggleIconName}}"
-				></ui5-icon>
-			{{/if}}
-		</div>
-		{{#if items.length}}
-			<ul id="{{_groupId}}"
-				class="ui5-sn-item-ul"
-				role="group"
-			>
-				<slot></slot>
-			</ul>
-		{{/if}}
-		<div class="ui5-sn-item-separator"></div>
-	</li>
-{{/inline}}

package/src/SideNavigationItem.hbs

@@ -1,155 +0,0 @@
-{{#if sideNavCollapsed}}
-	{{> menuitem }}
-{{else}}
-	{{> treeitem }}
-{{/if}}
-
-{{#*inline menuitem}}
-	{{#if _href}}
-		<a id="{{_id}}"
-		   class="ui5-sn-item ui5-sn-item-level1 {{_classes}}"
-		   role="{{ariaRole}}"
-		   data-sap-focus-ref
-		   @keydown="{{_onkeydown}}"
-		   @keyup="{{_onkeyup}}"
-		   @click="{{_onclick}}"
-		   @focusin="{{_onfocusin}}"
-		   @focusout="{{_onfocusout}}"
-		   @mouseenter="{{_onmouseenter}}"
-		   @mouseleave="{{_onmouseleave}}"
-		   tabindex="{{effectiveTabIndex}}"
-		   aria-haspopup="{{_ariaHasPopup}}"
-		   aria-checked="{{_ariaChecked}}"
-		   title="{{_tooltip}}"
-		   href="{{_href}}"
-		   target="{{_target}}"
-		>
-			<ui5-icon class="ui5-sn-item-icon" name="{{icon}}"></ui5-icon>
-			<div class="ui5-sn-item-text">{{text}}</div>
-			{{#if items.length}}
-				<ui5-icon class="ui5-sn-item-toggle-icon"
-						  name="navigation-right-arrow"
-				></ui5-icon>
-			{{/if}}
-			{{#if isExternalLink}}
-				<ui5-icon class="ui5-sn-item-external-link-icon"
-						  name="arrow-right"
-				></ui5-icon>
-			{{/if}}
-		</a>
-	{{else}}
-		<div id="{{_id}}"
-			 class="ui5-sn-item ui5-sn-item-level1 {{_classes}}"
-			 role="{{ariaRole}}"
-			 data-sap-focus-ref
-			 @keydown="{{_onkeydown}}"
-			 @keyup="{{_onkeyup}}"
-			 @click="{{_onclick}}"
-			 @focusin="{{_onfocusin}}"
-			 @focusout="{{_onfocusout}}"
-			 @mouseenter="{{_onmouseenter}}"
-			 @mouseleave="{{_onmouseleave}}"
-			 tabindex="{{effectiveTabIndex}}"
-			 aria-haspopup="{{_ariaHasPopup}}"
-			 aria-checked="{{_ariaChecked}}"
-			 title="{{_tooltip}}"
-		>
-			<ui5-icon class="ui5-sn-item-icon" name="{{icon}}"></ui5-icon>
-			<div class="ui5-sn-item-text">{{text}}</div>
-			{{#if items.length}}
-				<ui5-icon class="ui5-sn-item-toggle-icon"
-						  name="navigation-right-arrow"
-				></ui5-icon>
-			{{/if}}
-			{{#if isExternalLink}}
-				<ui5-icon class="ui5-sn-item-external-link-icon"
-						  name="arrow-right"
-				></ui5-icon>
-			{{/if}}
-		</div>
-	{{/if}}
-{{/inline}}
-
-{{#*inline treeitem}}
-	<li id="{{_id}}" class="ui5-sn-list-li" role="none">
-		{{#if _href}}
-			<a class="ui5-sn-item ui5-sn-item-level1 {{_classes}}"
-			   role="{{ariaRole}}"
-			   data-sap-focus-ref
-			   @keydown="{{_onkeydown}}"
-			   @keyup="{{_onkeyup}}"
-			   @click="{{_onclick}}"
-			   @focusin="{{_onfocusin}}"
-			   tabindex="{{effectiveTabIndex}}"
-			   aria-expanded="{{_expanded}}"
-			   aria-current="{{_ariaCurrent}}"
-			   aria-selected="{{selected}}"
-			   title="{{_tooltip}}"
-			   aria-owns="{{_groupId}}"
-			   href="{{_href}}"
-			   target="{{_target}}"
-			>
-				{{#if icon}}
-					<ui5-icon class="ui5-sn-item-icon" name="{{icon}}"></ui5-icon>
-				{{/if}}
-				<div class="ui5-sn-item-text">{{text}}</div>
-				<ui5-icon class="ui5-sn-item-selection-icon"
-						  name="circle-task-2"
-				></ui5-icon>
-				{{#if isExternalLink}}
-					<ui5-icon class="ui5-sn-item-external-link-icon"
-							  name="arrow-right"
-					></ui5-icon>
-				{{/if}}
-				{{#if items.length}}
-					<ui5-icon class="ui5-sn-item-toggle-icon"
-							  name="{{_toggleIconName}}"
-							  @click="{{_onToggleClick}}"
-					></ui5-icon>
-				{{/if}}
-			</a>
-		{{else}}
-			<div class="ui5-sn-item ui5-sn-item-level1 {{_classes}}"
-				 role="{{ariaRole}}"
-				 data-sap-focus-ref
-				 @keydown="{{_onkeydown}}"
-				 @keyup="{{_onkeyup}}"
-				 @click="{{_onclick}}"
-				 @focusin="{{_onfocusin}}"
-				 tabindex="{{effectiveTabIndex}}"
-				 aria-expanded="{{_expanded}}"
-				 aria-current="{{_ariaCurrent}}"
-				 aria-selected="{{selected}}"
-				 title="{{_tooltip}}"
-				 aria-owns="{{_groupId}}"
-			>
-				{{#if icon}}
-					<ui5-icon class="ui5-sn-item-icon" name="{{icon}}"></ui5-icon>
-				{{/if}}
-				<div class="ui5-sn-item-text">{{text}}</div>
-				<ui5-icon class="ui5-sn-item-selection-icon"
-						  name="circle-task-2"
-				></ui5-icon>
-				{{#if isExternalLink}}
-					<ui5-icon class="ui5-sn-item-external-link-icon"
-							  name="arrow-right"
-					></ui5-icon>
-				{{/if}}
-				{{#if items.length}}
-					<ui5-icon class="ui5-sn-item-toggle-icon"
-							  name="{{_toggleIconName}}"
-							  @click="{{_onToggleClick}}"
-					></ui5-icon>
-				{{/if}}
-			</div>
-		{{/if}}
-		{{#if items.length}}
-			<ul id="{{_groupId}}"
-				class="ui5-sn-item-ul"
-				role="group"
-			>
-				<slot></slot>
-			</ul>
-		{{/if}}
-	</li>
-{{/inline}}