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

package/src/MultiComboBox.hbs

@@ -1,20 +1,25 @@
-<div class="ui5-multi-combobox-root"
+<div class="ui5-multi-combobox-root ui5-input-focusable-element"
 >
-	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
+	<span id="ui5-multi-combobox-hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
 
 	{{#if hasValueState}}
-		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{valueStateText}}</span>
+		<span id="ui5-multi-combobox-valueStateDesc" class="ui5-hidden-text">{{ariaValueStateHiddenText}}</span>
 	{{/if}}
 
 	<ui5-tokenizer slot="_beginContent"
 		show-more
+		prevent-popover-open
 		class="ui5-multi-combobox-tokenizer"
 		?disabled="{{disabled}}"
 		@ui5-show-more-items-press="{{_showFilteredItems}}"
+		.morePopoverOpener={{morePopoverOpener}}
+		.popoverMinWidth={{_inputWidth}}
 		@ui5-token-delete="{{_tokenDelete}}"
+		@ui5-before-more-popover-open="{{handleBeforeTokenizerPopoverOpen}}"
 		@focusout="{{_tokenizerFocusOut}}"
 		@focusin="{{_tokenizerFocusIn}}"
 		@click={{_click}}
+		@paste={{_handlePaste}}
 		@keydown="{{_onTokenizerKeydown}}"
 		?expanded="{{_tokenizerExpanded}}"
 	>
@@ -42,22 +47,20 @@
 		@input="{{_inputLiveChange}}"
 		@change={{_inputChange}}
 		@keydown="{{_onkeydown}}"
-		@keyup="{{_onkeyup}}"
 		@click={{_click}}
 		@focusin={{inputFocusIn}}
 		@focusout={{inputFocusOut}}
+		@paste={{_handlePaste}}
 		role="combobox"
 		aria-haspopup="listbox"
 		aria-expanded="{{open}}"
 		aria-autocomplete="both"
 		aria-describedby="{{ariaDescribedByText}}"
 		aria-required="{{required}}"
+		aria-label="{{ariaLabelText}}"
+		data-sap-focus-ref
 	/>
 
-	{{#if readonly}}
-		<ui5-icon class="ui5-input-readonly-icon" name="not-editable" @click="{{_readonlyIconClick}}"></ui5-icon>
-	{{/if}}
-
 	{{#if icon}}
 		<slot name="icon"></slot>
 	{{/if}}
@@ -67,11 +70,10 @@
 			input-icon
 			slot="icon"
 			tabindex="-1"
-			@click="{{togglePopover}}"
+			@click="{{togglePopoverByDropdownIcon}}"
 			@mousedown="{{_onIconMousedown}}"
 			@focusin="{{_forwardFocusToInner}}"
 			?pressed="{{open}}"
-			dir="{{effectiveDir}}"
 			accessible-name="{{_iconAccessibleNameText}}"
 		></ui5-icon>
 	{{/unless}}

package/src/MultiComboBoxPopover.hbs

@@ -1,9 +1,10 @@
 <ui5-responsive-popover
 	placement-type="Bottom"
-	horizontal-align="Stretch"
+	horizontal-align="Left"
 	class="{{classes.popover}}"
 	hide-arrow
 	_disable-initial-focus
+	style="{{styles.suggestionsPopover}}"
 	@ui5-selection-change={{_listSelectionChange}}
 	@ui5-after-close={{_afterClosePicker}}
 	@ui5-before-open={{_beforeOpen}}
@@ -34,28 +35,26 @@
 						value-state="{{valueState}}"
 						@input="{{_inputLiveChange}}"
 						@change={{_inputChange}}
+						@keydown={{_onkeydown}}
 						aria-autocomplete="both"
-						aria-labelledby="{{_id}}-hiddenText-nMore"
-						aria-describedby="{{_id}}-valueStateDesc"
 						/>
-					</div>
-					<ui5-toggle-button
+				</div>
+				<ui5-toggle-button
 						slot="header"
 						class="ui5-multi-combobox-toggle-button"
 						icon="multiselect-all"
 						design="Transparent"
 						?pressed={{_showAllItemsButtonPressed}}
-						@click="{{filterSelectedItems}}"
-					></ui5-toggle-button>
-				</div>
-			{{#if hasValueStateMessage}}
-				<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
-					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
-					{{> valueStateMessage}}
-				</div>
-			{{/if}}
+						@click="{{filterSelectedItems}}">
+				</ui5-toggle-button>
 			</div>
 		</div>
+		{{#if hasValueStateMessage}}
+			<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
+				{{> valueStateMessage}}
+			</div>
+		{{/if}}
 	{{/if}}
 
 	{{#unless _isPhone}}
@@ -70,13 +69,21 @@
 	{{#if filterSelected}}
 		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
 			{{#each selectedItems}}
-				{{> listItem}}
+				{{#if isGroupItem}}
+					<ui5-li-groupheader data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-groupheader>
+				{{else}}
+					{{> listItem}}
+				{{/if}}
 			{{/each}}
 		</ui5-list>
 	{{else}}
 		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
 			{{#each _filteredItems}}
-				{{> listItem}}
+				{{#if isGroupItem}}
+					<ui5-li-groupheader data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-groupheader>
+				{{else}}
+					{{> listItem}}
+				{{/if}}
 			{{/each}}
 		</ui5-list>
 	{{/if}}
@@ -96,11 +103,10 @@
 		skip-registry-update
 		_disable-initial-focus
 		prevent-focus-restore
-		no-padding
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
 		placement-type="Bottom"
-		horizontal-align="Left"
+		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
@@ -111,7 +117,7 @@
 
 {{#*inline "valueStateMessage"}}
 	{{#if shouldDisplayDefaultValueStateMessage}}
-		{{valueStateText}}
+		{{valueStateDefaultText}}
 	{{else}}
 		{{#each valueStateMessageText}}
 			{{this}}
@@ -121,6 +127,7 @@
 
 {{#*inline "listItem"}}
 	<ui5-li
+		wrapping-type="Normal"
 		type="{{../_listItemsType}}"
 		additional-text={{this.additionalText}}
 		?selected={{this.selected}}

package/src/MultiInput.hbs

@@ -4,14 +4,14 @@
 	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
 	<ui5-tokenizer
 		class="ui5-multi-input-tokenizer"
-		.morePopoverOpener={{this}}
+		.morePopoverOpener={{morePopoverOpener}}
 		.popoverMinWidth={{_inputWidth}}
 		.valueState={{valueState}}
 		?expanded="{{expandedTokenizer}}"
 		show-more
 		@keydown="{{_onTokenizerKeydown}}"
-		@show-more-items-press={{showMorePress}}
-		@token-delete={{tokenDelete}}
+		@ui5-show-more-items-press={{showMorePress}}
+		@ui5-token-delete={{tokenDelete}}
 		@focusout="{{_tokenizerFocusOut}}"
 	>
 		<slot name="tokens"></slot>

package/src/Panel.hbs

@@ -1,56 +1,70 @@
 <div
-	data-sap-ui-fastnavgroup="true"
 	class="ui5-panel-root"
 	role="{{accRole}}"
 	aria-label="{{effectiveAccessibleName}}"
+	aria-labelledby="{{fixedPanelAriaLabelledbyReference}}"
 >
-	<!-- header: either header or h1 with header text -->
-	<div
-		@click="{{_headerClick}}"
-		@keydown="{{_headerKeyDown}}"
-		@keyup="{{_headerKeyUp}}"
-		class="ui5-panel-header"
-		tabindex="{{headerTabIndex}}"
-		role="{{accInfo.role}}"
-		aria-expanded="{{accInfo.ariaExpanded}}"
-		aria-controls="{{accInfo.ariaControls}}"
-		aria-labelledby="{{accInfo.ariaLabelledby}}"
-	>
-		{{#unless fixed}}
-			<div class="ui5-panel-header-button-root">
-				{{#if _hasHeader}}
-					<ui5-button
-						design="Transparent"
-						class="ui5-panel-header-button {{classes.headerBtn}}"
-						icon="slim-arrow-right"
-						@click="{{_toggleButtonClick}}"
-						._buttonAccInfo="{{accInfo.button}}"
-						accessible-name="{{accInfo.button.ariaLabelButton}}"
-					></ui5-button>
-				{{else}}
-					<ui5-icon
-						class="ui5-panel-header-button ui5-panel-header-icon {{classes.headerBtn}}"
-						name="slim-arrow-right"
-					></ui5-icon>
-				{{/if}}
-			</div>
-		{{/unless}}
 
-		{{#if _hasHeader}}
-			<slot name="header"></slot>
-		{{else}}
+	{{#if hasHeaderOrHeaderText}}
+		{{! header: either header or h1 with header text}}
+		<div
+			class="ui5-panel-heading-wrapper{{classes.stickyHeaderClass}}"
+			role="{{headingWrapperRole}}"
+			aria-level="{{headingWrapperAriaLevel}}"
+		>
 			<div
-				id="{{_id}}-header-title"
-				role="heading"
-				aria-level="{{headerAriaLevel}}"
-				class="ui5-panel-header-title"
+				@click="{{_headerClick}}"
+				@keydown="{{_headerKeyDown}}"
+				@keyup="{{_headerKeyUp}}"
+				class="ui5-panel-header"
+				tabindex="{{headerTabIndex}}"
+				role="{{accInfo.role}}"
+				aria-expanded="{{accInfo.ariaExpanded}}"
+				aria-controls="{{accInfo.ariaControls}}"
+				aria-labelledby="{{accInfo.ariaLabelledby}}"
+				part="header"
 			>
-				{{headerText}}
+				{{#unless fixed}}
+					<div class="ui5-panel-header-button-root">
+						{{#if _hasHeader}}
+							<ui5-button
+								design="Transparent"
+								class="ui5-panel-header-button ui5-panel-header-button-with-icon"
+								@click="{{_toggleButtonClick}}"
+								.accessibilityAttributes={{accInfo.button.accessibilityAttributes}}
+								tooltip="{{accInfo.button.title}}"
+								accessible-name="{{accInfo.button.ariaLabelButton}}"
+							>
+								<div class="ui5-panel-header-icon-wrapper">
+									<ui5-icon class="ui5-panel-header-icon {{classes.headerBtn}}" name="slim-arrow-right"></ui5-icon>
+								</div>
+							</ui5-button>
+						{{else}}
+							<ui5-icon
+								class="ui5-panel-header-button ui5-panel-header-icon {{classes.headerBtn}}"
+								name="slim-arrow-right"
+								show-tooltip
+								accessible-name="{{toggleButtonTitle}}"
+							></ui5-icon>
+						{{/if}}
+					</div>
+				{{/unless}}
+
+				{{#if _hasHeader}}
+					<slot name="header"></slot>
+				{{else}}
+					<div
+						id="{{_id}}-header-title"
+						class="ui5-panel-header-title"
+					>
+						{{headerText}}
+					</div>
+				{{/if}}
 			</div>
-		{{/if}}
-	</div>
+		</div>
+	{{/if}}
 
-	<!-- content area -->
+	{{! content area}}
 	<div
 		class="ui5-panel-content"
 		id="{{_id}}-content"

package/src/Popover.hbs

@@ -4,11 +4,11 @@
 	<span class="ui5-popover-arrow" style="{{styles.arrow}}"></span>
 
 	{{#if _displayHeader}}
-		<header class="ui5-popup-header-root" id="ui5-popup-header">
+		<header class="ui5-popup-header-root" id="ui5-popup-header" part="header">
 			{{#if header.length }}
 				<slot name="header"></slot>
 			{{else}}
-				<h2 class="ui5-popup-header-text">{{headerText}}</h2>
+				<h1 class="ui5-popup-header-text">{{headerText}}</h1>
 			{{/if}}
 		</header>
 	{{/if}}
@@ -17,7 +17,7 @@
 {{#*inline "afterContent"}}
 	{{#if _displayFooter}}
 		{{#if footer.length }}
-			<footer class="ui5-popup-footer-root">
+			<footer class="ui5-popup-footer-root" part="footer">
 				<slot name="footer"></slot>
 			</footer>
 		{{/if}}

package/src/Popup.hbs

@@ -1,11 +1,10 @@
 <section
 	style="{{styles.root}}"
 	class="{{classes.root}}"
-	role="dialog"
+	role="{{_role}}"
 	aria-modal="{{_ariaModal}}"
 	aria-label="{{_ariaLabel}}"
 	aria-labelledby="{{_ariaLabelledBy}}"
-	dir="{{effectiveDir}}"
 	@keydown={{_onkeydown}}
 	@focusout={{_onfocusout}}
 	@mouseup={{_onmouseup}}
@@ -16,7 +15,7 @@
 
 	{{> beforeContent}}
 
-	<div style="{{styles.content}}" class="{{classes.content}}"  @scroll="{{_scroll}}">
+	<div style="{{styles.content}}" class="{{classes.content}}"  @scroll="{{_scroll}}" part="content">
 		<slot></slot>
 	</div>
 

package/src/PopupBlockLayer.hbs

@@ -1,6 +1,6 @@
 <div class="ui5-block-layer"
     ?hidden={{_blockLayerHidden}}
-    tabindex="1"
+    tabindex="0"
     style="{{styles.blockLayer}}"
 	@keydown="{{_preventBlockLayerFocus}}"
     @mousedown="{{_preventBlockLayerFocus}}">

package/src/ProgressIndicator.hbs

@@ -1,11 +1,11 @@
 <div class="ui5-progress-indicator-root {{classes.root}}"
-     dir="{{effectiveDir}}"
      role="progressbar"
      aria-valuemin="0"
      aria-valuenow="{{validatedValue}}"
      aria-valuemax="100"
      aria-valuetext="{{valueStateText}}"
      aria-disabled="{{_ariaDisabled}}"
+     aria-label="{{accessibleName}}"
 >
     <div class="ui5-progress-indicator-bar" style="{{styles.bar}}">
         {{#unless showValueInRemainingBar}}

package/src/RadioButton.hbs

@@ -1,12 +1,10 @@
-<div class="ui5-radio-root {{classes.main}}"
+<div class="ui5-radio-root"
 	role="radio"
 	aria-checked="{{checked}}"
-	aria-readonly="{{ariaReadonly}}"
-	aria-disabled="{{ariaDisabled}}"
+	aria-disabled="{{effectiveAriaDisabled}}"
+	aria-describedby="{{effectiveAriaDescribedBy}}"
 	aria-label="{{ariaLabelText}}"
-	aria-describedby="{{ariaDescribedBy}}"
-	tabindex="{{tabIndex}}"
-	dir="{{effectiveDir}}"
+	tabindex="{{effectiveTabIndex}}"
 	@click="{{_onclick}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
@@ -14,13 +12,12 @@
 	@mouseup="{{_onmouseup}}"
 	@focusout="{{_onfocusout}}"
 >
-
 	<div class='ui5-radio-inner {{classes.inner}}'>
 		<svg class="ui5-radio-svg" focusable="false" aria-hidden="true">
 			<circle class="ui5-radio-svg-outer" cx="50%" cy="50%" r="50%" />
-			<circle class="ui5-radio-svg-inner" cx="50%" cy="50%" r="22%" />
+			<circle class="ui5-radio-svg-inner" cx="50%" cy="50%" />
 		</svg>
- 		<input type='radio' ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{disabled}}" name="{{name}}" data-sap-no-tab-ref/>
+		<input type='radio' ?required="{{required}}" ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{effectiveAriaDisabled}}" name="{{name}}"  data-sap-no-tab-ref/>
 	</div>
 
 	{{#if text}}
@@ -30,4 +27,5 @@
 	{{#if hasValueState}}
 		<span id="{{_id}}-descr" class="ui5-hidden-text">{{valueStateText}}</span>
 	{{/if}}
+	<slot name="formSupport"></slot>
 </div>

package/src/RangeSlider.hbs

@@ -6,18 +6,23 @@
 {{/inline}}
 
 {{#*inline "progressBar"}}
-	<div class="ui5-slider-progress-container">
+	<div
+		class="ui5-slider-progress-container"
+		part="progress-container"
+	>
 		<div class="ui5-slider-progress"
+			part="progress-bar"
 			style="{{styles.progress}}"
 			@focusin="{{_onfocusin}}"
 			@focusout="{{_onfocusout}}"
 			role="slider"
-			tabindex="{{tabIndex}}"
+			tabindex="{{_tabIndex}}"
 			aria-orientation="horizontal"
 			aria-valuemin="{{min}}"
 			aria-valuemax="{{max}}"
+			aria-valuenow="{{_ariaValueNow}}"
 			aria-valuetext="From {{startValue}} to {{endValue}}"
-			aria-labelledby="{{_id}}-sliderDesc"
+			aria-labelledby="{{_ariaLabelledByProgressBarRefs}}"
 			aria-disabled="{{_ariaDisabled}}"
 		></div>
 	</div>
@@ -25,19 +30,20 @@
 
 {{#*inline "handles"}}
 	<div class="ui5-slider-handle ui5-slider-handle--start"
+		part="handle"
 		style="{{styles.startHandle}}"
 		@focusin="{{_onfocusin}}"
 		@focusout="{{_onfocusout}}"
 		role="slider"
-		tabindex="{{tabIndex}}"
+		tabindex="{{_tabIndex}}"
 		aria-orientation="horizontal"
 		aria-valuemin="{{min}}"
 		aria-valuemax="{{max}}"
 		aria-valuenow="{{startValue}}"
-		aria-labelledby="{{_id}}-startHandleDesc"
+		aria-labelledby="{{_ariaLabelledByStartHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
-		<ui5-icon name="source-code" slider-icon></ui5-icon>
+		<ui5-icon name="direction-arrows" slider-icon></ui5-icon>
 
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip ui5-slider-tooltip--start" style="{{styles.tooltip}}">
@@ -47,19 +53,20 @@
 	</div>
 
 	<div class="ui5-slider-handle ui5-slider-handle--end"
+		part="handle"
 		style="{{styles.endHandle}}"
 		@focusin="{{_onfocusin}}"
 		@focusout="{{_onfocusout}}"
 		role="slider"
-		tabindex="{{tabIndex}}"
+		tabindex="{{_tabIndex}}"
 		aria-orientation="horizontal"
 		aria-valuemin="{{min}}"
 		aria-valuemax="{{max}}"
 		aria-valuenow="{{endValue}}"
-		aria-labelledby="{{_id}}-endHandleDesc"
+		aria-labelledby="{{_ariaLabelledByEndHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
-		<ui5-icon name="source-code" slider-icon></ui5-icon>
+		<ui5-icon name="direction-arrows" slider-icon></ui5-icon>
 
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip ui5-slider-tooltip--end" style="{{styles.tooltip}}">
@@ -67,4 +74,4 @@
 			</div>
 		{{/if}}
 	</div>
-{{/inline}}
+{{/inline}}

package/src/RatingIndicator.hbs

@@ -4,30 +4,47 @@
 	aria-valuemin="0"
 	aria-valuenow="{{value}}"
 	aria-valuemax="{{max}}"
+	aria-valuetext="{{value}} of {{max}}"
 	aria-orientation="horizontal"
 	aria-disabled="{{_ariaDisabled}}"
 	aria-readonly="{{ariaReadonly}}"
-	tabindex="{{tabIndex}}"
+	aria-description="{{_ariaDescription}}"
+	tabindex="{{effectiveTabIndex}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 	@click="{{_onclick}}"
 	@keydown="{{_onkeydown}}"
-	title="{{tooltip}}"
-	aria-label="{{accessibleName}}"
+	title="{{ratingTooltip}}"
+	aria-label="{{_ariaLabel}}"
 >
-	<div
-		class="ui5-rating-indicator-stars-wrapper"
-	>
+	<ul class="ui5-rating-indicator-list"
+		aria-hidden="true"
+		>
 		{{#each _stars}}
 			{{#if this.selected}}
-				<div class="ui5-rating-indicator-icon ui5-rating-indicator-active-icon" data-value="{{this.index}}">&#9733;</div>
+				<li data-ui5-value="{{this.index}}" class="ui5-rating-indicator-item ui5-rating-indicator-item-sel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
+				</li>
 			{{else if this.halfStar}}
-				<div class="ui5-rating-indicator-icon ui5-rating-indicator-half-icon" data-value="{{this.index}}">&#9734;</div>
+				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-half">
+					<ui5-icon data-ui5-value="{{this.index}}" name="unfavorite"></ui5-icon>
+					<div class="ui5-rating-indicator-half-icon-wrapper">
+						<ui5-icon data-ui5-value="{{this.index}}" name="favorite" class="ui5-rating-indicator-half-icon"></ui5-icon>
+					</div>
+				</li>
 			{{else if ../readonly}}
-				<div class="ui5-rating-indicator-icon ui5-rating-indicator-readonly-unselected-icon" data-value="{{this.index}}">&#9733;</div>
+				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
+				</li>
+			{{else if ../disabled}}
+				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="favorite"></ui5-icon>
+				</li>
 			{{else}}
-				<div class="ui5-rating-indicator-icon" data-value="{{this.index}}">&#9734;</div>
+				<li data-ui5-value="{{this.index}}" class="ui5-rating-indicator-item ui5-rating-indicator-item-unsel">
+					<ui5-icon data-ui5-value="{{this.index}}" name="unfavorite"></ui5-icon>
+				</li>
 			{{/if}}
 		{{/each}}
-	</div>
+	</ul>
 </div>

package/src/ResponsivePopover.hbs

@@ -1,19 +1,22 @@
 {{#if _isPhone}}
 	<ui5-dialog
-		?with-padding={{withPadding}}
+		accessible-name={{accessibleName}}
+		accessible-name-ref={{accessibleNameRef}}
+		accessible-role={{accessibleRole}}
 		stretch
 		_disable-initial-focus
-		@ui5-before-open="{{_propagateDialogEvent}}"
-		@ui5-after-open="{{_afterDialogOpen}}"
+		@ui5-before-open="{{_beforeDialogOpen}}"
+		@ui5-after-open="{{_propagateDialogEvent}}"
 		@ui5-before-close="{{_propagateDialogEvent}}"
 		@ui5-after-close="{{_afterDialogClose}}"
+		exportparts="content, header, footer"
 	>
 		{{!-- forward slot header to inner dialog slot header --}}
 		{{#unless _hideHeader}}
 			{{#if header.length}}
 				<slot slot="header" name="header"></slot>
 			{{else}}
-				<header class="{{classes.header}}">
+				<div class="{{classes.header}}" slot="header">
 					{{#if headerText }}
 						<ui5-title level="H2" class="ui5-popup-header-text ui5-responsive-popover-header-text">{{headerText}}</ui5-title>
 					{{/if}}
@@ -26,7 +29,7 @@
 						>
 						</ui5-button>
 					{{/unless}}
-				</header>
+				</div>
 			{{/if}}
 		{{/unless}}
 

package/src/SegmentedButton.hbs

@@ -1,14 +1,15 @@
 <ul
 	@click="{{_onclick}}"
+	@mousedown="{{_onmousedown}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
 	@focusin="{{_onfocusin}}"
 	class="ui5-segmented-button-root"
 	role="listbox"
-	dir="{{effectiveDir}}"
 	aria-multiselectable="true"
 	aria-describedby="{{_id}}-invisibleText"
 	aria-roledescription={{ariaDescription}}
+	aria-label={{accessibleName}}
 >
 	<slot></slot>
 

package/src/SegmentedButtonItem.hbs

@@ -8,7 +8,6 @@
 		aria-disabled="{{disabled}}"
 		data-sap-focus-ref
 	{{> ariaPressed}}
-		dir="{{effectiveDir}}"
 		@focusout={{_onfocusout}}
 		@focusin={{_onfocusin}}
 		@click={{_onclick}}
@@ -20,7 +19,7 @@
 		@touchend="{{_ontouchend}}"
 		tabindex={{tabIndexValue}}
 		aria-label="{{ariaLabelText}}"
-		title="{{accInfo.title}}"
+		title="{{tooltip}}"
 >
 	{{#if icon}}
 		<ui5-icon