@ui5/webcomponents 2.2.0-rc.0 → 2.2.0-rc.1

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents",
-  "version": "2.2.0-rc.0",
+  "version": "2.2.0-rc.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3036,7 +3036,7 @@
         },
         {
           "name": "ui5-input",
-          "description": "### Overview\n\nThe `ui5-input` component allows the user to enter and edit text or numeric values in one line.\n\nAdditionally, you can provide `suggestionItems`,\nthat are displayed in a popover right under the input.\n\nThe text field can be editable or read-only (`readonly` property),\nand it can be enabled or disabled (`disabled` property).\nTo visualize semantic states, such as \"Negative\" or \"Critical\", the `valueState` property is provided.\nWhen the user makes changes to the text, the change event is fired,\nwhich enables you to react on any text change.\n\n**Note:** If you are using the `ui5-input` as a single npm module,\ndon't forget to import the `InputSuggestions` module from\n\"@ui5/webcomponents/dist/features/InputSuggestions.js\"\nto enable the suggestions functionality.\n\n### Keyboard Handling\nThe `ui5-input` provides the following keyboard shortcuts:\n\n- [Escape] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.\n- [Enter] or [Return] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.\n- [Down] - Focuses the next matching item in the suggestion list. Selection-change event is fired.\n- [Up] - Focuses the previous matching item in the suggestion list. Selection-change event is fired.\n- [Home] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.\n- [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.\n- [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.\n- [Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Input.js\";`\n\n`import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";` (optional - for input suggestions support)\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.\n- **select** - Fired when some text has been selected.\n- **selection-change** - Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.\n- **open** - Fired when the suggestions picker is open.\n- **close** - Fired when the suggestions picker is closed.\n\n### **Slots:**\n - **default** - Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n\n**Note:** Importing the Input Suggestions Support feature:\n\n`import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";`\n\nautomatically imports the `<ui5-suggestion-item>` and `<ui5-suggestion-item-group>` for your convenience.\n- **icon** - Defines the icon to be displayed in the component.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.",
+          "description": "### Overview\n\nThe `ui5-input` component allows the user to enter and edit text or numeric values in one line.\n\nAdditionally, you can provide `suggestionItems`,\nthat are displayed in a popover right under the input.\n\nThe text field can be editable or read-only (`readonly` property),\nand it can be enabled or disabled (`disabled` property).\nTo visualize semantic states, such as \"Negative\" or \"Critical\", the `valueState` property is provided.\nWhen the user makes changes to the text, the change event is fired,\nwhich enables you to react on any text change.\n\n**Note:** If you are using the `ui5-input` as a single npm module,\ndon't forget to import the `InputSuggestions` module from\n\"@ui5/webcomponents/dist/features/InputSuggestions.js\"\nto enable the suggestions functionality.\n\n### Keyboard Handling\nThe `ui5-input` provides the following keyboard shortcuts:\n\n- [Escape] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.\n- [Enter] or [Return] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.\n- [Down] - Focuses the next matching item in the suggestion list. Selection-change event is fired.\n- [Up] - Focuses the previous matching item in the suggestion list. Selection-change event is fired.\n- [Home] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.\n- [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.\n- [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.\n- [Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Input.js\";`\n\n`import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";` (optional - for input suggestions support)\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.\n- **select** - Fired when some text has been selected.\n- **selection-change** - Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.\n- **open** - Fired when the suggestions picker is open.\n- **close** - Fired when the suggestions picker is closed.\n\n### **Slots:**\n - **default** - Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n\n**Note:** Importing the Input Suggestions Support feature:\n\n`import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";`\n\nautomatically imports the `<ui5-suggestion-item>` and `<ui5-suggestion-item-group>` for your convenience.\n- **icon** - Defines the icon to be displayed in the component.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.\n\n### **CSS Parts:**\n - **root** - Used to style the root DOM element of the Input component\n- **input** - Used to style the native input element\n- **clear-icon** - Used to style the clear icon, which can be pressed to clear user input text",
           "doc-url": "",
           "attributes": [
             {
@@ -9736,6 +9736,18 @@
           "name": "part(root)",
           "description": "Used to style the outermost wrapper of the `ui5-icon`."
         },
+        {
+          "name": "part(root)",
+          "description": "Used to style the root DOM element of the Input component"
+        },
+        {
+          "name": "part(input)",
+          "description": "Used to style the native input element"
+        },
+        {
+          "name": "part(clear-icon)",
+          "description": "Used to style the clear icon, which can be pressed to clear user input text"
+        },
         {
           "name": "part(icon)",
           "description": "Used to style the provided icon within the link"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.2.0-rc.0",
+  "version": "2.2.0-rc.1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -50,16 +50,16 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.2.0-rc.0",
-    "@ui5/webcomponents-icons": "2.2.0-rc.0",
-    "@ui5/webcomponents-icons-business-suite": "2.2.0-rc.0",
-    "@ui5/webcomponents-icons-tnt": "2.2.0-rc.0",
-    "@ui5/webcomponents-localization": "2.2.0-rc.0",
-    "@ui5/webcomponents-theming": "2.2.0-rc.0"
+    "@ui5/webcomponents-base": "2.2.0-rc.1",
+    "@ui5/webcomponents-icons": "2.2.0-rc.1",
+    "@ui5/webcomponents-icons-business-suite": "2.2.0-rc.1",
+    "@ui5/webcomponents-icons-tnt": "2.2.0-rc.1",
+    "@ui5/webcomponents-localization": "2.2.0-rc.1",
+    "@ui5/webcomponents-theming": "2.2.0-rc.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.2.0-rc.0",
+    "@ui5/webcomponents-tools": "2.2.0-rc.1",
     "chromedriver": "^126.0.0"
   },
-  "gitHead": "8955aa596143ba93da03d4e6cf2bd547993c59c2"
+  "gitHead": "a9c2d71dd33a061700108410c9e9ad4dcc1046a8"
 }

package/src/Breadcrumbs.hbs

@@ -29,12 +29,27 @@
 				wrapping-type="None">
 				{{this.innerText}}
 			</ui5-link>
-
-			{{#unless this._isCurrentPageItem}}
+			{{#if this._needsSeparator}}
 				<span class="ui5-breadcrumbs-separator" aria-hidden="true"></span>
-			{{/unless}}
+			{{/if}}
 		</li>
 		{{/each}}
+		{{#unless _endsWithCurrentLinkItem }}
+			{{#if _endsWithCurrentLocation}}
+				<li class="ui5-breadcrumbs-current-location" @click="{{../_onLabelPress}}">
+
+					<span aria-current="page"
+						aria-label="{{_currentLocationAccName}}"
+						role="link"
+						id="{{this._id}}-labelWrapper">
+
+						<ui5-label>
+							{{_currentLocationText}}
+						</ui5-label>
+					</span>
+				</li>
+			{{/if}}
+		{{/unless}}
 	</ol>
 </nav>
 

package/src/ComboBox.hbs

@@ -24,6 +24,7 @@
 		aria-describedby="value-state-description"
 		aria-label="{{ariaLabelText}}"
 		aria-required="{{required}}"
+		aria-controls="{{responsivePopoverId}}"
 		autocomplete="off"
 		data-sap-focus-ref
 	/>

package/src/ComboBoxPopover.hbs

@@ -13,6 +13,7 @@
 	@keydown={{_handlePopoverKeydown}}
 	@focusout={{_handlePopoverFocusout}}
 	accessible-name="{{_popupLabel}}"
+	id="{{responsivePopoverId}}"
 	.open={{open}}
 	.opener={{this}}
 >

package/src/Input.hbs

@@ -1,5 +1,6 @@
 <div
 	class="ui5-input-root ui5-input-focusable-element"
+	part="root"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 >
@@ -8,6 +9,7 @@
 
 		<input
 			id="inner"
+			part="input"
 			class="ui5-input-inner"
 			style="{{styles.innerInput}}"
 			type="{{inputType}}"
@@ -44,7 +46,7 @@
 
 		{{#if _effectiveShowClearIcon}}
 			<div @click={{_clear}} @mousedown={{_iconMouseDown}} class="ui5-input-clear-icon-wrapper inputIcon" tabindex="-1">
-				<ui5-icon tabindex="-1" class="ui5-input-clear-icon" name="decline" accessible-name="{{clearIconAccessibleName}}"></ui5-icon>
+				<ui5-icon part="clear-icon" tabindex="-1" class="ui5-input-clear-icon" name="decline" accessible-name="{{clearIconAccessibleName}}"></ui5-icon>
 			</div>
 		{{/if}}
 

package/src/List.hbs

@@ -48,7 +48,7 @@
 			<slot></slot>
 
 			{{#if showNoDataText}}
-				<li id="{{_id}}-nodata" class="ui5-list-nodata">
+				<li tabindex="0" id="{{_id}}-nodata" class="ui5-list-nodata">
 					<div id="{{_id}}-nodata-text" class="ui5-list-nodata-text">
 						{{noDataText}}
 					</div>

package/src/MultiComboBox.hbs

@@ -76,6 +76,7 @@
 		aria-describedby="{{ariaDescribedByText}}"
 		aria-required="{{required}}"
 		aria-label="{{ariaLabelText}}"
+		aria-controls="{{responsivePopoverId}}"
 		autocomplete="off"
 		data-sap-focus-ref
 	/>

package/src/MultiComboBoxPopover.hbs

@@ -2,6 +2,7 @@
 	placement="Bottom"
 	horizontal-align="Start"
 	class="{{classes.popover}}"
+	id="{{responsivePopoverId}}"
 	hide-arrow
 	prevent-initial-focus
 	style="{{styles.suggestionsPopover}}"

package/src/MultiInput.hbs

@@ -27,6 +27,7 @@
 			@mouseup={{valueHelpMouseUp}}
 			class="inputIcon"
 			name="value-help"
+			accessible-name="{{valueHelpLabel}}"
 		></ui5-icon>
 	{{/if}}
 {{/inline}}

package/src/RangeSlider.hbs

@@ -43,7 +43,7 @@
 		aria-labelledby="{{_ariaLabelledByStartHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
-		<ui5-icon name="direction-arrows" slider-icon></ui5-icon>
+		<ui5-icon name="direction-arrows" mode="Decorative" slider-icon></ui5-icon>
 
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip ui5-slider-tooltip--start" style="{{styles.tooltip}}">
@@ -66,7 +66,7 @@
 		aria-labelledby="{{_ariaLabelledByEndHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
-		<ui5-icon name="direction-arrows" slider-icon></ui5-icon>
+		<ui5-icon name="direction-arrows" mode="Decorative" slider-icon></ui5-icon>
 
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip ui5-slider-tooltip--end" style="{{styles.tooltip}}">

package/src/Slider.hbs

@@ -32,7 +32,7 @@
 		data-sap-focus-ref
 		part="handle"
 	>
-			<ui5-icon name="direction-arrows" part="icon-slider" slider-icon></ui5-icon>
+			<ui5-icon mode="Decorative" "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>

package/src/i18n/messagebundle.properties

@@ -279,6 +279,9 @@ MULTIINPUT_ROLEDESCRIPTION_TEXT=Multi Value Input
 #XFLD: Token number indicator which is used to show more tokens
 MULTIINPUT_SHOW_MORE_TOKENS={0} more
 
+#XACT: ARIA announcement for value help
+MULTIINPUT_VALUE_HELP_LABEL=Show Value Help
+
 #XTOL: Tooltip for panel expand title
 PANEL_ICON=Expand/Collapse
 

package/src/themes/Breadcrumbs.css

@@ -22,6 +22,19 @@
     display: inline;
 }
 
+.ui5-breadcrumbs-current-location {
+    min-width: 1%;
+    flex: 1 1 auto;
+    /* Fix extra height in ul -> li element */
+    font-size: 0;
+    align-self: center;
+}
+
+.ui5-breadcrumbs-current-location > span:focus {
+    outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+    border-radius: var(--_ui5_breadcrumbs_current_location_focus_border_radius);
+}
+
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden] {
     display: none
 }

package/src/themes/DayPicker.css

@@ -107,7 +107,7 @@
 	height: 100%;
 }
 
-.ui5-dp-item.ui5-dp-item--weeekend {
+.ui5-dp-item.ui5-dp-item--weekend {
 	background: var(--sapLegend_NonWorkingBackground);
 }
 
@@ -117,7 +117,7 @@
 }
 
 
-.ui5-dp-item.ui5-dp-item--weeekend:hover {
+.ui5-dp-item.ui5-dp-item--weekend:hover {
 	background: var(--sapList_Hover_Background);
 	filter: var(--_ui5_daypicker_item_weeekend_filter);
 }
@@ -129,7 +129,7 @@
 }
 
 .ui5-dp-item.ui5-dp-item--othermonth:hover,
-.ui5-dp-item.ui5-dp-item--weeekend.ui5-dp-item--othermonth:hover {
+.ui5-dp-item.ui5-dp-item--weekend.ui5-dp-item--othermonth:hover {
 	color: var(--_ui5_daypicker_item_othermonth_hover_color);
 	background: var(--sapList_Hover_Background);
 }
@@ -328,6 +328,11 @@
 	border-block-start: var(--_ui5_daypicker_special_day_border_top);
 }
 
+.ui5-dp-specialday.NonWorking,
+.ui5-dp-specialday.Working {
+	border-block-start: none;
+}
+
 .ui5-dp-item--selected .ui5-dp-specialday {
 	width: var(--_ui5_daypicker_selected_item_special_day_width);
 }

package/src/themes/List.css

@@ -86,11 +86,21 @@
 	background-color: var(--sapList_Background);
 	border-bottom: 1px solid var(--sapList_BorderColor);
 	padding: 0 1rem !important;
+	outline: none;
 	height: var(--_ui5_list_no_data_height);
 	font-size: var(--_ui5_list_no_data_font_size);
 	font-family: "72override", var(--sapFontFamily);
 }
 
+.ui5-list-nodata:focus::after {
+	content: "";
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	position: absolute;
+	inset: 0.125rem;
+	pointer-events: none;
+	top: calc(50% + 0.125rem);
+}
+
 .ui5-list-nodata-text {
 	overflow: hidden;
 	text-overflow: ellipsis;

package/src/themes/SplitButton.css

@@ -209,7 +209,6 @@
 .ui5-split-arrow-button {
 	border-start-start-radius: var(--_ui5_split_button_hover_border_radius);
 	border-end-start-radius: var(--_ui5_split_button_hover_border_radius);
-	width: 2.25rem;
 	border-color: var(--_ui5_split_text_button_border_color);
 	background-color: var(--_ui5_split_text_button_background_color);
 	position: relative;

package/src/themes/TimePicker.css

@@ -12,7 +12,7 @@
 
 :host {
 	min-width: calc(var(--_ui5_input_min_width) + var(--_ui5_input_icon_width));
-	height: var(--sapElement_Height);
+	height: var(--_ui5_input_height);
 	color: var(--sapField_TextColor);
 	background-color: var(--sapField_Background);
 	border-radius: var(--_ui5-time_picker_border_radius);