@ui5/webcomponents 2.4.1-rc.0 → 2.5.0-rc.1

package/src/ColorPicker.hbs

@@ -23,16 +23,18 @@
             accessible-name="{{hueSliderLabel}}"
             @ui5-input="{{_handleHueInput}}"
         ></ui5-slider>
-        <ui5-slider
-            disabled="{{inputsDisabled}}"
-            class="ui5-color-picker-alpha-slider"
-            min="0"
-            max="1"
-            step="0.01"
-            value="{{_alpha}}"
-            accessible-name="{{alphaSliderLabel}}"
-            @ui5-input="{{_handleAlphaInput}}"
-        ></ui5-slider>
+        {{#if _isDefaultPickerMode}}
+            <ui5-slider
+                disabled="{{inputsDisabled}}"
+                class="ui5-color-picker-alpha-slider"
+                min="0"
+                max="1"
+                step="0.01"
+                value="{{_alpha}}"
+                accessible-name="{{alphaSliderLabel}}"
+                @ui5-input="{{_handleAlphaInput}}"
+            ></ui5-slider>
+        {{/if}}
     </div>
 
     <div class="ui5-color-picker-current-color">
@@ -56,51 +58,53 @@
         </div>
     </div>
 
-    <div
-        class="ui5-color-picker-rgb-wrapper"
-        @ui5-change="{{_handleRGBInputsChange}}"
-    >
-        <div class="ui5-color-picker-rgb">
-            <ui5-input
-                id="red"
-                class="ui5-color-picker-rgb-input"
-                disabled="{{inputsDisabled}}"
-                accessible-name="{{redInputLabel}}"
-                value="{{_value.r}}"
-            ></ui5-input>
-            <ui5-label>R</ui5-label>
-        </div>
-        <div class="ui5-color-picker-rgb">
-            <ui5-input
-                id="green"
-                class="ui5-color-picker-rgb-input"
-                disabled="{{inputsDisabled}}"
-                accessible-name="{{greenInputLabel}}"
-                value="{{_value.g}}"
-            ></ui5-input>
-            <ui5-label>G</ui5-label>
-        </div>
-        <div class="ui5-color-picker-rgb">
-            <ui5-input
-                id="blue"
-                class="ui5-color-picker-rgb-input"
-                disabled="{{inputsDisabled}}"
-                accessible-name="{{blueInputLabel}}"
-                value="{{_value.b}}"
-            ></ui5-input>
-            <ui5-label>B</ui5-label>
-        </div>
-        <div class="ui5-color-picker-rgb">
-            <ui5-input
-				id="alpha"
-                disabled="{{inputsDisabled}}"
-                class="ui5-color-picker-rgb-input"
-                value="{{_alpha}}"
-                accessible-name="{{alphaInputLabel}}"
-                @ui5-input="{{_handleAlphaInput}}"
-                @ui5-change="{{_handleAlphaChange}}"
-            ></ui5-input>
-            <ui5-label>A</ui5-label>
+    {{#if _isDefaultPickerMode}}
+        <div
+            class="ui5-color-picker-rgb-wrapper"
+            @ui5-change="{{_handleRGBInputsChange}}"
+        >
+            <div class="ui5-color-picker-rgb">
+                <ui5-input
+                    id="red"
+                    class="ui5-color-picker-rgb-input"
+                    disabled="{{inputsDisabled}}"
+                    accessible-name="{{redInputLabel}}"
+                    value="{{_value.r}}"
+                ></ui5-input>
+                <ui5-label>R</ui5-label>
+            </div>
+            <div class="ui5-color-picker-rgb">
+                <ui5-input
+                    id="green"
+                    class="ui5-color-picker-rgb-input"
+                    disabled="{{inputsDisabled}}"
+                    accessible-name="{{greenInputLabel}}"
+                    value="{{_value.g}}"
+                ></ui5-input>
+                <ui5-label>G</ui5-label>
+            </div>
+            <div class="ui5-color-picker-rgb">
+                <ui5-input
+                    id="blue"
+                    class="ui5-color-picker-rgb-input"
+                    disabled="{{inputsDisabled}}"
+                    accessible-name="{{blueInputLabel}}"
+                    value="{{_value.b}}"
+                ></ui5-input>
+                <ui5-label>B</ui5-label>
+            </div>
+            <div class="ui5-color-picker-rgb">
+                <ui5-input
+                    id="alpha"
+                    disabled="{{inputsDisabled}}"
+                    class="ui5-color-picker-rgb-input"
+                    value="{{_alpha}}"
+                    accessible-name="{{alphaInputLabel}}"
+                    @ui5-input="{{_handleAlphaInput}}"
+                    @ui5-change="{{_handleAlphaChange}}"
+                ></ui5-input>
+                <ui5-label>A</ui5-label>
+            </div>
         </div>
-    </div>
+    {{/if}}
 </section>

package/src/ComboBoxItem.hbs

@@ -0,0 +1,18 @@
+{{>include "./ListItemBase.hbs"}}
+
+{{#*inline "listItemContent"}}
+	<div part="content" id="content" class="ui5-li-content">
+		<div class="ui5-li-text-wrapper">
+			<span part="title" class="ui5-li-title">
+				{{{text}}}
+			</span>
+			{{#if additionalText}}
+				<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+			{{/if}}
+		</div>
+	</div>
+{{/inline}}
+
+{{#*inline "listItemAttributes"}}
+	role="option"
+{{/inline}}

package/src/ComboBoxItemGroup.hbs

@@ -0,0 +1,9 @@
+{{>include "./ListItemGroup.hbs"}}
+
+{{#*inline "items"}}
+	{{#each items}}
+		{{#if _isVisible}}
+			<slot name="{{this._individualSlot}}"></slot>
+		{{/if}}
+	{{/each}}
+{{/inline}}

package/src/ComboBoxPopover.hbs

@@ -85,20 +85,7 @@
 		selection-mode="Single"
 	>
 		{{#each _filteredItems}}
-			{{#if isGroupItem}}
-				{{#if _isVisible}}
-					<ui5-li-group header-text="{{this.headerText}}" ?focused={{this.focused}}>
-						{{#each this.items}}
-							{{#if _isVisible}}
-								{{> listItem}}
-							{{/if}}
-						{{/each}}
-					</ui5-li-group>
-				{{/if}}
-			{{else}}
-				{{> listItem}}
-			{{/if}}
-
+			<slot name="{{this._individualSlot}}"></slot>
 		{{/each}}
 	</ui5-list>
 
@@ -140,20 +127,4 @@
 	{{else}}
 		<slot name="valueStateMessage"></slot>
 	{{/if}}
-{{/inline}}
-
-{{#*inline "listItem"}}
-	<ui5-li
-			accessible-role="Option"
-			type="Active"
-			wrapping-type="Normal"
-			additional-text={{this.additionalText}}
-			group-name={{this.groupName}}
-			.mappedItem={{this}}
-			?selected={{this.selected}}
-			?focused={{this.focused}}
-			data-ui5-stable="{{this.stableDomRef}}"
-	>
-		{{this.text}}
-	</ui5-li>
-{{/inline}}
+{{/inline}}

package/src/Form.hbs

@@ -1,4 +1,4 @@
-<div class="ui5-form-root" role="form" aria-labelledby="{{ariaLabelledByID}}">
+<div class="ui5-form-root" role="{{effectiveAccessibleRole}}" aria-labelledby="{{effectiveАccessibleNameRef}}">
 	{{#if hasHeader}}
 		<div class="ui5-form-header" part="header">
 			{{#if hasCustomHeader}}
@@ -13,10 +13,10 @@
 			{{#if this.hasGroupItems}}
 					{{#each groupItemsInfo}}
 						<div class="ui5-form-column {{this.classes}}" part="column">
-							<div class="ui5-form-group">
+							<div class="ui5-form-group" role="form" aria-labelledby="{{this.accessibleNameRef}}">
 								{{#if this.groupItem.headerText}}
 									<div class="ui5-form-group-heading">
-										<ui5-title level="H6">{{ this.groupItem.headerText }}</ui5-title>
+										<ui5-title id="{{this.groupItem._id}}-group-header-text" level="H6">{{ this.groupItem.headerText }}</ui5-title>
 									</div>
 								{{/if}}
 

package/src/List.hbs

@@ -44,6 +44,7 @@
 			role="{{listAccessibleRole}}"
 			aria-label="{{ariaLabelTxt}}"
 			aria-labelledby="{{ariaLabelledBy}}"
+			aria-description="{{ariaDescriptionText}}"
 		>
 			<slot></slot>
 

package/src/ListItemGroup.hbs

@@ -4,18 +4,25 @@
 	@dragover="{{_ondragover}}"
 	@drop="{{_ondrop}}"
 	@dragleave="{{_ondragleave}}">
+
 	{{#if hasHeader}}
 		<ui5-li-group-header ?focused="{{focused}}" part="header">
 			{{#if hasFormattedHeader}}
-			<slot name="header"></slot>
+				<slot name="header"></slot>
 			{{else}}
-			{{headerText}}
+				{{headerText}}
 			{{/if}}
 		</ui5-li-group-header>
 	{{/if}}
-	<slot></slot>
+
+	{{> items}}
 	<ui5-drop-indicator
 		orientation="Horizontal"
 		.ownerReference="{{this}}"
 	></ui5-drop-indicator>
-</ul>
+</ul>
+
+
+{{#*inline "items"}}
+	<slot></slot>
+{{/inline}}

package/src/MultiComboBox.hbs

@@ -39,18 +39,16 @@
 					{{/if}}
 				{{/each}}
 			{{else}}
-					{{#if selected}}
-
-				<ui5-token
-					?readonly="{{../readonly}}"
-					class="ui5-multi-combobox-token"
-					data-ui5-id="{{this._id}}"
-					part="token-{{@index}}"
-					text="{{this.text}}"
-				>
-				</ui5-token>
-					{{/if}}
-
+				{{#if selected}}
+					<ui5-token
+						?readonly="{{../readonly}}"
+						class="ui5-multi-combobox-token"
+						data-ui5-id="{{this._id}}"
+						part="token-{{@index}}"
+						text="{{this.text}}"
+					>
+					</ui5-token>
+				{{/if}}
 			{{/if}}
 		{{/each}}
 	</ui5-tokenizer>

package/src/MultiComboBoxItem.hbs

@@ -0,0 +1,19 @@
+{{>include "./ComboBoxItem.hbs"}}
+
+{{#*inline "listItemContent"}}
+	<ui5-checkbox ?disabled="{{_readonly}}" ?checked="{{selected}}" tabindex="invalid" accessible-name="{{_accessibleName}}"></ui5-checkbox>
+	<div part="content" id="content" class="ui5-li-content">
+		<div class="ui5-li-text-wrapper">
+			<span part="title" class="ui5-li-title">
+				{{{text}}}
+			</span>
+			{{#if additionalText}}
+				<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+			{{/if}}
+		</div>
+	</div>
+{{/inline}}
+
+{{#*inline "listItemAttributes"}}
+	role="option"
+{{/inline}}

package/src/MultiComboBoxItemGroup.hbs

@@ -0,0 +1,9 @@
+{{>include "./ListItemGroup.hbs"}}
+
+{{#*inline "items"}}
+	{{#each items}}
+		{{#if _isVisible}}
+			<slot name="{{this._individualSlot}}"></slot>
+		{{/if}}
+	{{/each}}
+{{/inline}}

package/src/MultiComboBoxPopover.hbs

@@ -80,33 +80,13 @@
 	{{#if filterSelected}}
 		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list" accessible-role="ListBox">
 			{{#each selectedItems}}
-				{{#if isGroupItem}}
-					<ui5-li-group header-text="{{this.headerText}}" data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">
-						{{#each this.items}}
-							{{#if _isVisible}}
-								{{> listItem}}
-							{{/if}}
-						{{/each}}
-					</ui5-li-group>
-				{{else}}
-					{{> listItem}}
-				{{/if}}
+				{{> listItem}}
 			{{/each}}
 		</ui5-list>
 	{{else}}
-		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list" accessible-role="ListBox">
+		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list" accessible-role="ListBox" @keydown="{{_onItemKeydown}}">
 			{{#each _filteredItems}}
-				{{#if isGroupItem}}
-					<ui5-li-group header-text="{{this.headerText}}" data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">
-						{{#each this.items}}
-							{{#if _isVisible}}
-								{{> listItem}}
-							{{/if}}
-						{{/each}}
-					</ui5-li-group>
-				{{else}}
-					{{> listItem}}
-				{{/if}}
+				{{> listItem}}
 			{{/each}}
 		</ui5-list>
 	{{/if}}
@@ -152,24 +132,13 @@
 {{/inline}}
 
 {{#*inline "listItem"}}
-	<ui5-li
-		wrapping-type="Normal"
-		type="{{../_listItemsType}}"
-		additional-text={{this.additionalText}}
-		?selected={{this.selected}}
-		data-ui5-token-id="{{this._id}}"
-		data-ui5-stable="{{this.stableDomRef}}"
-		@keydown="{{../_onItemKeydown}}"
-		accessible-role="Option"
-	>
-		{{this.text}}
-	</ui5-li>
+	<slot name="{{this._individualSlot}}"></slot>
 {{/inline}}
 
 {{#*inline "selectAllWrapper"}}
 	{{#if showSelectAll}}
 		<div class="ui5-mcb-select-all-header" @keydown="{{_onListHeaderKeydown}}" tabindex="0">
-			<ui5-checkbox ?checked={{_allSelected}} class="ui5-mcb-select-all-checkbox" text="{{selectAllCheckboxLabel}}" @ui5-change="{{_handleSelectAllCheckboxClick}}"></ui5-checkbox>
+			<ui5-checkbox ?disabled={{this.readonly}} ?checked={{_allSelected}} class="ui5-mcb-select-all-checkbox" text="{{selectAllCheckboxLabel}}" @ui5-change="{{_handleSelectAllCheckboxClick}}"></ui5-checkbox>
 		</div>
 	{{/if}}
 {{/inline}}

package/src/Tokenizer.hbs

@@ -8,26 +8,37 @@
 		@focusout="{{_onfocusout}}"
 		@focusin="{{_onfocusin}}"
 		@ui5-select="{{onTokenSelect}}"
-		role="listbox"
-		aria-label="{{tokenizerLabel}}"
-		aria-description="{{tokenizerAriaDescription}}"
-		aria-disabled="{{_ariaDisabled}}"
-		aria-readonly="{{_ariaReadonly}}"
 	>
-		{{#each tokens}}
-			<slot name="{{this._individualSlot}}"></slot>
-		{{/each}}
+		<div class="ui5-tokenizer--list"
+			role="listbox"
+			aria-label="{{tokenizerLabel}}"
+			aria-description="{{tokenizerAriaDescription}}"
+			aria-disabled="{{_ariaDisabled}}"
+			aria-readonly="{{_ariaReadonly}}"
+		>
+			{{#each tokens}}
+				<slot name="{{this._individualSlot}}"></slot>
+			{{/each}}
+		</div>
+
+		{{#if showEffectiveClearAll}}
+			<span
+				role="button"
+				@click={{handleClearAll}}
+				class="ui5-tokenizer--clear-all">
+				{{_clearAllText}}</span>
+		{{/if}}
 	</div>
 
-	{{#if showNMore}}
-		<span
-			role="button"
-			aria-haspopup="dialog"
-			@click="{{_handleNMoreClick}}"
-			class="ui5-tokenizer-more-text"
-			part="n-more-text"
-		>{{_nMoreText}}</span>
-	{{/if}}
+		{{#if showNMore}}
+			<span
+				role="button"
+				aria-haspopup="dialog"
+				@click="{{_handleNMoreClick}}"
+				class="ui5-tokenizer-more-text"
+				part="n-more-text"
+			>{{_nMoreText}}</span>
+		{{/if}}
 </div>
 
 {{>include "./TokenizerPopover.hbs"}}

package/src/Tree.hbs

@@ -4,7 +4,10 @@
     .footerText="{{footerText}}"
     .noDataText="{{noDataText}}"
     .accessibleRole="{{_role}}"
-    .accessibleName="{{_label}}"
+    .accessibleName="{{accessibleName}}"
+    .accessibleNameRef="{{accessibleNameRef}}"
+    .accessibleDescription="{{accessibleDescription}}"
+    .accessibleDescriptionRef="{{accessibleDescriptionRef}}"
 	@dragenter="{{_ondragenter}}"
 	@dragover="{{_ondragover}}"
 	@drop="{{_ondrop}}"

package/src/i18n/messagebundle.properties

@@ -444,6 +444,9 @@ TOKENIZER_POPOVER_REMOVE=All items
 #XFLD: Token number indicator which is used to show all tokens in Tokenizer when all of the tokens are hidden
 TOKENIZER_SHOW_ALL_ITEMS={0} Items
 
+#XFLD: Clear All link text in Tokenizer
+TOKENIZER_CLEAR_ALL=Clear All
+
 #XACT: Label text for TreeListItem
 TREE_ITEM_ARIA_LABEL=Tree Item
 

package/src/i18n/messagebundle_en.properties

@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=All items
 
 TOKENIZER_SHOW_ALL_ITEMS={0} Items
 
+TOKENIZER_CLEAR_ALL=Clear All
+
 TREE_ITEM_ARIA_LABEL=Tree Item
 
 TREE_ITEM_EXPAND_NODE=Expand Node

package/src/i18n/messagebundle_en_US_sappsd.properties

@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=[[[Āĺĺ įţēɱş∙∙∙∙∙]]]
 
 TOKENIZER_SHOW_ALL_ITEMS=[[[{0} Ĭţēɱş]]]
 
+TOKENIZER_CLEAR_ALL=[[[Ĉĺēąŗ Āĺĺ∙∙∙∙∙]]]
+
 TREE_ITEM_ARIA_LABEL=[[[Ţŗēē Ĭţēɱ∙∙∙∙∙]]]
 
 TREE_ITEM_EXPAND_NODE=[[[Ĕχρąŋƌ Ńŏƌē∙∙∙∙∙∙∙∙]]]

package/src/i18n/messagebundle_en_US_saprigi.properties

@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=‌‍​‍​‍‌​​‌‍‌​​‍
 
 TOKENIZER_SHOW_ALL_ITEMS=‍​‍‌‌‌​​‍‌‍‍‌​‍​‌‌‌‍‌‌‌‌‍‌‌​‍‍‌​​‍​‌‍‍​‌​​​{0}‌‌‌ Items
 
+TOKENIZER_CLEAR_ALL=‌‌​‍‍​‍‍​‍‍​​​‌​‍​‌​‍‍​‌​‌‌‍​‍​​​‍​​‌‌​​‍Clear All
+
 TREE_ITEM_ARIA_LABEL=‌‌‌​​‌​​​‍‍‌‌​‍‍‍​‍‌​‍​​‍‌‌‍‌‌‌‌‌​‍‌‌‍​‍​Tree Item
 
 TREE_ITEM_EXPAND_NODE=‍‍‍‍​​‍​‌‍‍​‌‍‍​‍‌‍​​​‌​‍‍‌‌​​‌‌‍‌​‍‌‌​‍Expand Node

package/src/themes/ComboBoxItem.css

@@ -0,0 +1,14 @@
+:host([ui5-cb-item]) {
+	height: auto;
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-cb-item]) .ui5-li-root {
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-cb-item]) .ui5-li-content {
+	padding-bottom: .875rem;
+	padding-top: .875rem;
+	box-sizing: border-box;
+}

package/src/themes/Dialog.css

@@ -21,6 +21,7 @@
 	max-height: 100%;
 	max-width: 100%;
 	border-radius: 0;
+	min-width: 0; /*this is for preventing the dialog to hold its width on small screens*/
 }
 
 :host([draggable]) .ui5-popup-header-root,

package/src/themes/FormItem.css

@@ -9,7 +9,7 @@
 :host([column-span="3"]) {
 	grid-column: span 3;
 }
-	
+
 :host([column-span="4"]) {
 	grid-column: span 4;
 }
@@ -62,4 +62,34 @@
 }
 ::slotted([ui5-select]) {
 	width: 100%;
+}
+
+
+@container (max-width: 600px) {
+	:host {
+		order: var(--ui5-form-item-order-S, unset);
+	}
+}
+
+/* M  - 1 column by default, up to 2 columns */
+@container (width > 600px) and (width <= 1024px) {
+	:host {
+		order: var(--ui5-form-item-order-M, unset);
+	}
+
+}
+
+/* L - 2 columns by default, up to 3 columns */
+@container (width > 1024px) and (width <= 1440px) {
+	:host {
+		order: var(--ui5-form-item-order-L, unset);
+	}
+}
+
+/* XL - 3 columns by default, up to 6 */
+@container (min-width: 1441px) {
+	:host {
+		order: var(--ui5-form-item-order-Xl, unset);
+	}
+
 }

package/src/themes/MultiComboBoxItem.css

@@ -0,0 +1,19 @@
+:host([ui5-mcb-item]) {
+	height: auto;
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-mcb-item]) .ui5-li-root {
+	padding-inline-start: 0;
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-mcb-item]) .ui5-li-content {
+	padding-bottom: .875rem;
+	padding-top: .875rem;
+	box-sizing: border-box;
+}
+
+:host([ui5-mcb-item]) [ui5-checkbox] {
+	overflow: visible;
+}

package/src/themes/MultiComboBoxPopover.css

@@ -31,4 +31,8 @@
 
 .ui5-mcb-select-all-checkbox::part(label) {
 	font-family: var(--sapFontBoldFamily);
-}
+}
+
+:host([readonly]) ::slotted([ui5-mcb-item]) {
+	cursor: auto;
+}

package/src/themes/Table.css

@@ -9,14 +9,11 @@
     display: none;
 }
 
-:host([overflow-mode="Scroll"]) {
-    overflow-x: scroll;
-}
-
 #table {
     display: grid;
     grid-auto-rows: minmax(min-content, auto);
     background: var(--sapList_Background);
+    height: -moz-fill, -webkit-fill-available, 100%;
 }
 
 #nodata-cell {