@ui5/webcomponents 0.0.0-7c7170d4a → 0.0.0-7d8c57f70

package/src/InputPopover.hbs

@@ -1,18 +1,14 @@
-{{#if showSuggestions}}
+{{#if _effectiveShowSuggestions}}
 	<ui5-responsive-popover
 		class="{{classes.popover}}"
 		hide-arrow
-		prevent-focus-restore
-		prevent-initial-focus
-		placement="Bottom"
-		horizontal-align="Start"
-		tabindex="-1"
+		_disable-initial-focus
+		placement-type="Bottom"
+		horizontal-align="Left"
 		style="{{styles.suggestionsPopover}}"
-		@ui5-open="{{_afterOpenPicker}}"
-		@ui5-close="{{_afterClosePicker}}"
+		@ui5-after-open="{{_afterOpenPopover}}"
+		@ui5-after-close="{{_afterClosePopover}}"
 		@ui5-scroll="{{_scroll}}"
-		.open={{open}}
-		.opener={{this}}
 	>
 	{{#if _isPhone}}
 		<div slot="header" class="ui5-responsive-popover-header">
@@ -22,7 +18,7 @@
 					class="ui5-responsive-popover-close-btn"
 					icon="decline"
 					design="Transparent"
-					@click="{{_closePicker}}"
+					@click="{{_closeRespPopover}}"
 				>
 				</ui5-button>
 			</div>
@@ -43,9 +39,7 @@
 		{{#if hasValueStateMessage}}
 			<div class="{{classes.popoverValueState}}" style="{{styles.suggestionPopoverHeader}}">
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
-				{{#if open}}
 					{{> valueStateMessage}}
-				{{/if}}
 			</div>
 		{{/if}}
 	{{/if}}
@@ -54,9 +48,7 @@
 		{{#if hasValueStateMessage}}
 			<div slot="header" ?focused={{_isValueStateFocused}} class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.suggestionPopoverHeader}}>
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
-				{{#if open}}
-					{{> valueStateMessage}}
-				{{/if}}
+				{{> valueStateMessage}}
 			</div>
 		{{/if}}
 	{{/unless}}
@@ -67,7 +59,7 @@
 			<div slot="footer" class="ui5-responsive-popover-footer">
 				<ui5-button
 					design="Transparent"
-					@click="{{_closePicker}}"
+					@click="{{_closeRespPopover}}"
 				>OK</ui5-button>
 			</div>
 		{{/if}}
@@ -76,22 +68,16 @@
 {{#if hasValueStateMessage}}
 		<ui5-popover
 			skip-registry-update
-			prevent-initial-focus
+			_disable-initial-focus
 			prevent-focus-restore
 			hide-arrow
 			class="ui5-valuestatemessage-popover"
-			placement="Bottom"
-			tabindex="-1"
+			placement-type="Bottom"
 			horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
-			.opener={{this}}
-			.open={{valueStateOpen}}
-			@ui5-close="{{_handleValueStatePopoverAfterClose}}"
 		>
 			<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
-				{{#if valueStateOpen}}
-					{{> valueStateMessage}}
-				{{/if}}
+				{{> valueStateMessage}}
 			</div>
 		</ui5-popover>
 {{/if}}
@@ -100,23 +86,17 @@
 	{{#if shouldDisplayDefaultValueStateMessage}}
 		{{valueStateText}}
 	{{else}}
-		<slot name="valueStateMessage"></slot>
+		{{#each valueStateMessageText}}
+			{{this}}
+		{{/each}}
 	{{/if}}
 {{/inline}}
 
 {{#*inline "suggestionsList"}}
-	<ui5-list
-		separators="{{suggestionSeparators}}"
-		selection-mode="Single"
-		@mousedown="{{onItemMouseDown}}"
-		@mouseover="{{_handleItemMouseOver}}"
-		@mouseout="{{_handleItemMouseOut}}"
-		@ui5-item-click="{{_handleSuggestionItemPress}}"
-		@ui5-selection-change="{{_handleSelectionChange}}"
-	>
+	<ui5-list separators="{{suggestionSeparators}}" @mousedown="{{onItemMouseDown}}" mode="SingleSelect">
 		{{#each suggestionObjects}}
 			{{#if groupItem}}
-				<ui5-li-group-header data-ui5-key="{{key}}">{{{ this.text }}}</ui5-li-group-header>
+				<ui5-li-groupheader data-ui5-key="{{key}}">{{{ this.text }}}</ui5-li-groupheader>
 			{{else}}
 				<ui5-li-suggestion-item
 					wrapping-type="Normal"

package/src/Link.hbs

@@ -5,7 +5,7 @@
 	target="{{target}}"
 	rel="{{_rel}}"
 	tabindex="{{effectiveTabIndex}}"
-	title="{{tooltip}}"
+	title="{{title}}"
 	?disabled="{{disabled}}"
 	aria-label="{{ariaLabelText}}"
 	aria-haspopup="{{_hasPopup}}"

package/src/List.hbs

@@ -35,9 +35,10 @@
 
 		<ul id="{{_id}}-listUl"
 			class="ui5-list-ul"
-			role="{{listAccessibleRole}}"
+			role="{{accessibleRole}}"
 			aria-label="{{ariaLabelTxt}}"
 			aria-labelledby="{{ariaLabelledBy}}"
+			aria-roledescription="{{accessibleRoleDescription}}"
 		>
 			<slot></slot>
 
@@ -67,13 +68,14 @@
 		<span tabindex="-1" aria-hidden="true" class="ui5-list-end-marker"></span>
 	</div>
 
-	{{#if loading}}
-		<div class="ui5-list-loading-row">
+	{{#if busy}}
+		<div class="ui5-list-busy-row">
 			<ui5-busy-indicator
-				delay="{{loadingDelay}}"
+				delay="{{busyDelay}}"
 				active
-				class="ui5-list-loading-ind"
-				style="{{styles.loadingInd}}"
+				size="Medium"
+				class="ui5-list-busy-ind"
+				style="{{styles.busyInd}}"
 				data-sap-focus-ref
 			></ui5-busy-indicator>
 		</div>

package/src/ListItem.hbs

@@ -21,6 +21,7 @@
 	aria-level="{{_accInfo.ariaLevel}}"
 	aria-haspopup="{{_accInfo.ariaHaspopup}}"
 	aria-posinset="{{_accInfo.posinset}}"
+	aria-roledescription="{{accessibleRoleDescription}}"
 	aria-setsize="{{_accInfo.setsize}}"
 	aria-describedby="{{_id}}-invisibleText-describedby"
 	aria-labelledby="{{_accessibleNameRef}}"
@@ -95,7 +96,7 @@
 		</ui5-radio-button>
 	{{/if}}
 
-	{{#if modeMultiple}}
+	{{#if modeMultiSelect}}
 		<ui5-checkbox
 				part="checkbox"
 				?disabled="{{isInactive}}"

package/src/Menu.hbs

@@ -1,16 +1,16 @@
 <ui5-responsive-popover
 	id="{{_id}}-menu-rp"
 	class="ui5-menu-rp"
-	horizontal-align="Start"
-	placement={{placement}}
+	horizontal-align="Left"
+	placement-type={{placementType}}
 	vertical-align={{verticalAlign}}
 	hide-arrow
 	allow-target-overlap
 	?sub-menu={{_isSubMenu}}
 	@ui5-before-open={{_beforePopoverOpen}}
-	@ui5-open={{_afterPopoverOpen}}
+	@ui5-after-open={{_afterPopoverOpen}}
 	@ui5-before-close={{_beforePopoverClose}}
-	@ui5-close={{_afterPopoverClose}}
+	@ui5-after-close={{_afterPopoverClose}}
 >
 {{#if isPhone}}
 	<div
@@ -22,7 +22,7 @@
 			icon="nav-back"
 			class="ui5-menu-back-button"
 			design="Transparent"
-			accessible-name="{{labelBack}}"
+			aria-label="{{labelBack}}"
 			@click={{_navigateBack}}
 		>
 		</ui5-button>
@@ -37,7 +37,7 @@
 		<ui5-button
 			icon="decline"
 			design="Transparent"
-			accessible-name="{{labelClose}}"
+			aria-label="{{labelClose}}"
 			@click={{_closeAll}}
 		>
 		</ui5-button>
@@ -49,13 +49,13 @@
 	{{#if _currentItems.length}}
 		<ui5-list
 			id="{{_id}}-menu-list"
-			selection-mode="None"
-			?loading="{{loading}}"
-			loading-delay="{{loadingDelay}}"
+			mode="None"
+			?busy="{{busy}}"
+			busy-delay="{{busyDelay}}"
 			separators="None"
-			accessible-role="Menu"
+			accessible-role="menu"
 			@ui5-item-click={{_itemClick}}
-			@mouseover="{{_loadingMouseOver}}"
+			@mouseover="{{_busyMouseOver}}"
 		>
 		{{#each _currentItems}}
 			<ui5-menu-li
@@ -64,7 +64,7 @@
 				id="{{../_id}}-menu-item-{{@index}}"
 				.icon="{{this.item.icon}}"
 				accessible-name={{this.item.ariaLabelledByText}}
-				accessible-role="MenuItem"
+				accessible-role="menuitem"
 				.additionalText="{{this.item._additionalText}}"
 				tooltip="{{this.item.tooltip}}"
 				selected="{{this.item.subMenuOpened}}"
@@ -80,12 +80,12 @@
 			</ui5-menu-li>
 		{{/each}}
 		</ui5-list>
-	{{else if loading}}
+	{{else if busy}}
 		<ui5-busy-indicator
 			id="{{_id}}-menu-busy-indicator"
-			delay="{{loadingDelay}}"
+			delay="{{busyDelay}}"
 			class="ui5-menu-busy-indicator"
-			@mouseover="{{_loadingMouseOver}}"
+			@mouseover="{{_busyMouseOver}}"
 			active>
 		</ui5-busy-indicator>
 	{{/if}}

package/src/MonthPicker.hbs

@@ -9,7 +9,7 @@
 	@click={{_selectMonth}}
 >
 	{{#each _months}}
-		<div class="ui5-mp-quarter">
+		<div role="row" class="ui5-mp-quarter">
 
 			{{#each this}}
 				<div

package/src/MultiComboBox.hbs

@@ -7,12 +7,12 @@
 	{{/if}}
 
 	<ui5-tokenizer slot="_beginContent"
+		show-more
 		prevent-popover-open
-		hide-popover-arrow
 		class="ui5-multi-combobox-tokenizer"
 		?disabled="{{disabled}}"
 		@ui5-show-more-items-press="{{_showFilteredItems}}"
-		.opener={{morePopoverOpener}}
+		.morePopoverOpener={{morePopoverOpener}}
 		.popoverMinWidth={{_inputWidth}}
 		@ui5-token-delete="{{_tokenDelete}}"
 		@ui5-before-more-popover-open="{{handleBeforeTokenizerPopoverOpen}}"
@@ -52,17 +52,18 @@
 		@focusout={{inputFocusOut}}
 		@paste={{_handlePaste}}
 		role="combobox"
-		aria-haspopup="dialog"
+		aria-haspopup="listbox"
 		aria-expanded="{{open}}"
 		aria-autocomplete="both"
 		aria-describedby="{{ariaDescribedByText}}"
 		aria-required="{{required}}"
 		aria-label="{{ariaLabelText}}"
+		autocomplete="off"
 		data-sap-focus-ref
 	/>
 
 	{{#if _effectiveShowClearIcon}}
-		<div @click={{_clear}} class="ui5-input-clear-icon-wrapper inputIcon" tabindex="-1" @mousedown={{_iconMouseDown}}>
+		<div @click={{_clear}} class="ui5-input-clear-icon-wrapper" input-icon tabindex="-1" @mousedown={{_iconMouseDown}}>
 			<ui5-icon tabindex="-1" class="ui5-input-clear-icon" name="decline" accessible-name="{{clearIconAccessibleName}}"></ui5-icon>
 		</div>
 	{{/if}}
@@ -73,7 +74,7 @@
 
 	{{#unless readonly}}
 		<ui5-icon name="slim-arrow-down"
-			class="inputIcon"
+			input-icon
 			slot="icon"
 			tabindex="-1"
 			@click="{{togglePopoverByDropdownIcon}}"
@@ -84,5 +85,3 @@
 		></ui5-icon>
 	{{/unless}}
 </div>
-
-{{>include "./MultiComboBoxPopover.hbs"}}

package/src/MultiComboBoxPopover.hbs

@@ -1,14 +1,14 @@
 <ui5-responsive-popover
-	placement="Bottom"
-	horizontal-align="Start"
+	placement-type="Bottom"
+	horizontal-align="Left"
 	class="{{classes.popover}}"
 	hide-arrow
-	prevent-initial-focus
+	_disable-initial-focus
 	style="{{styles.suggestionsPopover}}"
 	@ui5-selection-change={{_listSelectionChange}}
-	@ui5-close={{_afterClosePicker}}
+	@ui5-after-close={{_afterClosePicker}}
 	@ui5-before-open={{_beforeOpen}}
-	@ui5-open={{_afterOpenPicker}}
+	@ui5-after-open={{_afterOpenPicker}}
 >
 	{{#if _isPhone}}
 		<div slot="header" class="ui5-responsive-popover-header" style="{{styles.popoverHeader}}">
@@ -68,20 +68,20 @@
 	{{/unless}}
 
 	{{#if filterSelected}}
-		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list">
+		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list" accessible-role="listbox">
 			{{#each selectedItems}}
 				{{#if isGroupItem}}
-					<ui5-li-group-header data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-group-header>
+					<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" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list">
+		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list" accessible-role="listbox">
 			{{#each _filteredItems}}
 				{{#if isGroupItem}}
-					<ui5-li-group-header data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-group-header>
+					<ui5-li-groupheader data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">{{ this.text }}</ui5-li-groupheader>
 				{{else}}
 					{{> listItem}}
 				{{/if}}
@@ -102,13 +102,12 @@
 {{#if hasValueStateMessage}}
 	<ui5-popover
 		skip-registry-update
-		prevent-initial-focus
+		_disable-initial-focus
 		prevent-focus-restore
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
-		placement="Bottom"
+		placement-type="Bottom"
 		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
-		tabindex="-1"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
@@ -136,6 +135,7 @@
 		data-ui5-token-id="{{this._id}}"
 		data-ui5-stable="{{this.stableDomRef}}"
 		@keydown="{{../_onItemKeydown}}"
+		accessible-role="option"
 	>
 		{{this.text}}
 	</ui5-li>

package/src/MultiInput.hbs

@@ -1,18 +1,29 @@
 {{>include "./Input.hbs"}}
 
 {{#*inline "preContent"}}
-	<span id="hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
+	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
 	<ui5-tokenizer
 		class="ui5-multi-input-tokenizer"
-		.opener={{morePopoverOpener}}
+		.morePopoverOpener={{morePopoverOpener}}
 		.popoverMinWidth={{_inputWidth}}
-		hide-popover-arrow
-		?expanded="{{tokenizerExpanded}}"
+		.valueState={{valueState}}
+		?expanded="{{expandedTokenizer}}"
+		show-more
 		@keydown="{{_onTokenizerKeydown}}"
+		@ui5-show-more-items-press={{showMorePress}}
 		@ui5-token-delete={{tokenDelete}}
 		@focusout="{{_tokenizerFocusOut}}"
 	>
 		<slot name="tokens"></slot>
+		<div slot="valueStateMessage">
+			{{#if shouldDisplayDefaultValueStateMessage}}
+				{{valueStateText}}
+			{{else}}
+				{{#each valueStateMessageText}}
+					{{this}}
+				{{/each}}
+			{{/if}}
+		</div>
 	</ui5-tokenizer>
 {{/inline}}
 
@@ -23,7 +34,7 @@
 			@click={{valueHelpPress}}
 			@mousedown={{valueHelpMouseDown}}
 			@mouseup={{valueHelpMouseUp}}
-			class="inputIcon"
+			input-icon
 			name="value-help"
 		></ui5-icon>
 	{{/if}}

package/src/NavigationMenu.hbs

@@ -4,9 +4,9 @@
 	vertical-align="Center"
 	?sub-menu={{_isSubMenu}}
 	@ui5-before-open={{_beforePopoverOpen}}
-	@ui5-open={{_afterPopoverOpen}}
+	@ui5-after-open={{_afterPopoverOpen}}
 	@ui5-before-close={{_beforePopoverClose}}
-	@ui5-close={{_afterPopoverClose}}
+	@ui5-after-close={{_afterPopoverClose}}
     accessible-name-ref="{{_id}}-navigationMenuPopoverText"
 >
 <span id="{{_id}}-navigationMenuPopoverText" class="ui5-hidden-text">{{accSideNavigationPopoverHiddenText}}</span>
@@ -20,7 +20,7 @@
 			icon="nav-back"
 			class="ui5-menu-back-button"
 			design="Transparent"
-			accessible-name="{{labelBack}}"
+			aria-label="{{labelBack}}"
 			@click={{_navigateBack}}
 		>
 		</ui5-button>
@@ -35,7 +35,7 @@
 		<ui5-button
 			icon="decline"
 			design="Transparent"
-			accessible-name="{{labelClose}}"
+			aria-label="{{labelClose}}"
 			@click={{close}}
 		>
 		</ui5-button>
@@ -47,14 +47,14 @@
 	>
 	{{#if _currentItems.length}}
 		<ui5-list
-			accessible-role="Tree"
+			accessible-role="tree"
 			id="{{_id}}-menu-list"
-			selection-mode="None"
-			?loading="{{loading}}"
-			loading-delay="{{loadingDelay}}"
+			mode="None"
+			?busy="{{busy}}"
+			busy-delay="{{busyDelay}}"
 			separators="None"
 			@ui5-item-click={{_itemClick}}
-			@mouseover="{{_loadingMouseOver}}"
+			@mouseover="{{_busyMouseOver}}"
 		>
 		{{#each _currentItems}}
 			{{#if this.item.href}}
@@ -63,7 +63,7 @@
 					id="{{../_id}}-menu-item-{{@index}}"
 					.icon="{{this.item.icon}}"
 					accessible-name={{this.item.ariaLabelledByText}}
-					accessible-role="None"
+					accessible-role="none"
 					.additionalText="{{this.item._additionalText}}"
 					.ariaHasPopup={{this.ariaHasPopup}}
 					?disabled={{this.item.disabled}}
@@ -104,7 +104,7 @@
 					id="{{../_id}}-menu-item-{{@index}}"
 					.icon="{{this.item.icon}}"
 					accessible-name={{this.item.ariaLabelledByText}}
-					accessible-role="TreeItem"
+					accessible-role="treeitem"
 					.additionalText="{{this.item._additionalText}}"
 					.ariaHasPopup={{this.ariaHasPopup}}
 					?disabled={{this.item.disabled}}
@@ -133,12 +133,12 @@
 			{{/if}}
 		{{/each}}
 		</ui5-list>
-	{{else if loading}}
+	{{else if busy}}
 		<ui5-busy-indicator
 			id="{{_id}}-menu-busy-indicator"
-			delay="{{loadingDelay}}"
+			delay="{{busyDelay}}"
 			class="ui5-menu-busy-indicator"
-			@mouseover="{{_loadingMouseOver}}"
+			@mouseover="{{_busyMouseOver}}"
 			active>
 		</ui5-busy-indicator>
 	{{/if}}

package/src/Popup.hbs

@@ -1,7 +1,4 @@
-{{>include "./PopupBlockLayer.hbs"}}
-
 <section
-	root-element
 	style="{{styles.root}}"
 	class="{{classes.root}}"
 	role="{{_role}}"
@@ -31,4 +28,6 @@
 
 {{#*inline "beforeContent"}}{{/inline}}
 
-{{#*inline "afterContent"}}{{/inline}}
+{{#*inline "afterContent"}}{{/inline}}
+
+

package/src/PopupBlockLayer.hbs

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

package/src/ProgressIndicator.hbs

@@ -4,6 +4,7 @@
      aria-valuenow="{{validatedValue}}"
      aria-valuemax="100"
      aria-valuetext="{{valueStateText}}"
+     aria-disabled="{{_ariaDisabled}}"
      aria-label="{{accessibleName}}"
 >
     <div class="ui5-progress-indicator-bar" part="bar" style="{{styles.bar}}">

package/src/RadioButton.hbs

@@ -27,4 +27,5 @@
 	{{#if hasValueState}}
 		<span id="{{_id}}-descr" class="ui5-hidden-text">{{valueStateText}}</span>
 	{{/if}}
+	<slot name="formSupport"></slot>
 </div>

package/src/ResponsivePopover.hbs

@@ -1,16 +1,15 @@
 {{#if _isPhone}}
 	<ui5-dialog
-		root-element
 		accessible-name={{accessibleName}}
 		accessible-name-ref={{accessibleNameRef}}
 		accessible-role={{accessibleRole}}
 		stretch
-		?prevent-initial-focus="{{preventInitialFocus}}"
+		?_disable-initial-focus="{{_disableInitialFocus}}"
 		initial-focus="{{initialFocus}}"
 		@ui5-before-open="{{_beforeDialogOpen}}"
-		@ui5-open="{{_propagateDialogEvent}}"
+		@ui5-after-open="{{_propagateDialogEvent}}"
 		@ui5-before-close="{{_propagateDialogEvent}}"
-		@ui5-close="{{_afterDialogClose}}"
+		@ui5-after-close="{{_afterDialogClose}}"
 		exportparts="content, header, footer"
 	>
 		{{!-- forward slot header to inner dialog slot header --}}
@@ -20,20 +19,14 @@
 			{{else}}
 				<div class="{{classes.header}}" slot="header">
 					{{#if headerText }}
-						<ui5-title
-							level="H2"
-							wrapping-type="None"
-							class="ui5-popup-header-text ui5-responsive-popover-header-text"
-						>
-							{{headerText}}
-						</ui5-title>
+						<ui5-title level="H2" class="ui5-popup-header-text ui5-responsive-popover-header-text">{{headerText}}</ui5-title>
 					{{/if}}
 					{{#unless _hideCloseButton}}
 						<ui5-button
 							icon="decline"
 							design="Transparent"
-							accessible-name="{{_closeDialogAriaLabel}}"
-							@click="{{closePopup}}"
+							aria-label="{{_closeDialogAriaLabel}}"
+							@click="{{close}}"
 						>
 						</ui5-button>
 					{{/unless}}

package/src/SegmentedButtonItem.hbs

@@ -3,29 +3,39 @@
 		aria-roledescription="{{ariaDescription}}"
 		aria-posinset="{{posInSet}}"
 		aria-setsize="{{sizeOfSet}}"
-		aria-selected="{{selected}}"
-		class="ui5-segmented-button-item-root"
+		aria-selected="{{pressed}}"
+		class="ui5-button-root"
 		aria-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-label="{{ariaLabelText}}"
 		title="{{tooltip}}"
 >
 	{{#if icon}}
 		<ui5-icon
-			class="ui5-segmented-button-item-icon"
+			class="ui5-button-icon"
 			name="{{icon}}"
 			part="icon"
-			?show-tooltip={{isIconOnly}}
+			?show-tooltip={{showIconTooltip}}
 		></ui5-icon>
 	{{/if}}
 
-	<span id="{{_id}}-content" class="ui5-segmented-button-item-text">
+	<span id="{{_id}}-content" class="ui5-button-text">
 		<bdi>
 			<slot></slot>
 		</bdi>
 	</span>
 
 </li>
+
+{{#*inline "ariaPressed"}}{{/inline}}

package/src/Select.hbs

@@ -5,7 +5,7 @@
 >
 	{{#if selectedOptionIcon}}
 		<ui5-icon
-			mode="Decorative"
+			aria-hidden="true"
 			class="ui5-select-option-icon"
 			name="{{selectedOptionIcon}}"
 		></ui5-icon>
@@ -38,7 +38,7 @@
 	{{#unless readonly}}
 		<ui5-icon
 			name="slim-arrow-down"
-			class="inputIcon"
+			input-icon
 			?pressed="{{_iconPressed}}"
 		></ui5-icon>
 	{{/unless}}
@@ -46,6 +46,5 @@
 	{{#if hasValueState}}
 		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{valueStateText}}</span>
 	{{/if}}
+	<slot name="formSupport"></slot>
 </div>
-
-{{>include "./SelectPopover.hbs"}}