@openui5/sap.ui.webc.main 1.119.0 → 1.120.0

package/src/sap/ui/webc/main/thirdparty/CheckBox.js

@@ -26,6 +26,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/w
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var CheckBox_1;
+
+  // Styles
+
+  // Template
+
   let isGlobalHandlerAttached = false;
   let activeCb;
   /**
@@ -104,7 +109,8 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/w
       const formSupport = (0, _FeaturesRegistry.getFeature)("FormSupport");
       if (formSupport) {
         formSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
-          nativeInput.disabled = element.disabled || !element.checked;
+          nativeInput.disabled = !!element.disabled;
+          nativeInput.checked = !!element.checked;
           nativeInput.value = element.checked ? "on" : "";
         });
       } else if (this.name) {

package/src/sap/ui/webc/main/thirdparty/ColorPalette.js

@@ -29,6 +29,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var ColorPalette_1;
+
+  // Styles
+
   /**
    * @class
    *

package/src/sap/ui/webc/main/thirdparty/ColorPaletteItem.js

@@ -22,6 +22,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var ColorPaletteItem_1;
+
+  // Styles
+
   /**
    * @class
    *

package/src/sap/ui/webc/main/thirdparty/ColorPalettePopover.js

@@ -28,6 +28,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var ColorPalettePopover_1;
+
+  // Styles
+
   /**
    * @class
    *

package/src/sap/ui/webc/main/thirdparty/ColorPicker.js

@@ -1,4 +1,4 @@
-sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/types/CSSColor", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/base/types/Float", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/util/ColorConversion", "./generated/templates/ColorPickerTemplate.lit", "./Input", "./Slider", "./Label", "./generated/i18n/i18n-defaults", "./generated/themes/ColorPicker.css"], function (_exports, _UI5Element, _customElement, _property, _event, _Keys, _CSSColor, _LitRenderer, _Integer, _Float, _i18nBundle, _ColorConversion, _ColorPickerTemplate, _Input, _Slider, _Label, _i18nDefaults, _ColorPicker) {
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/types/CSSColor", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/base/types/Float", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/CustomElementsScope", "sap/ui/webc/common/thirdparty/base/util/ColorConversion", "./generated/templates/ColorPickerTemplate.lit", "./Input", "./Slider", "./Label", "./generated/i18n/i18n-defaults", "./generated/themes/ColorPicker.css"], function (_exports, _UI5Element, _customElement, _property, _event, _Keys, _CSSColor, _LitRenderer, _Integer, _Float, _i18nBundle, _CustomElementsScope, _ColorConversion, _ColorPickerTemplate, _Input, _Slider, _Label, _i18nDefaults, _ColorPicker) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -27,6 +27,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var ColorPicker_1;
+
+  // Styles
+
   const PICKER_POINTER_WIDTH = 6.5;
   /**
    * @class
@@ -86,7 +89,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       const tempColor = `rgba(${this._color.r}, ${this._color.g}, ${this._color.b}, 1)`;
       this._setHex();
       this._setValues();
-      this.style.setProperty("--ui5_Color_Picker_Progress_Container_Color", tempColor);
+      this.style.setProperty((0, _CustomElementsScope.getScopedVarName)("--ui5_Color_Picker_Progress_Container_Color"), tempColor);
     }
     _handleMouseDown(e) {
       this.mouseDown = true;

package/src/sap/ui/webc/main/thirdparty/ComboBox.js

@@ -1,4 +1,4 @@
-sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/decorators/slot", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/types/ValueState", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/base/types/InvisibleMessageMode", "sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper", "sap/ui/webc/common/thirdparty/base/util/InvisibleMessage", "sap/ui/webc/common/thirdparty/icons/slim-arrow-down", "sap/ui/webc/common/thirdparty/icons/decline", "sap/ui/webc/common/thirdparty/icons/not-editable", "sap/ui/webc/common/thirdparty/icons/error", "sap/ui/webc/common/thirdparty/icons/alert", "sap/ui/webc/common/thirdparty/icons/sys-enter-2", "sap/ui/webc/common/thirdparty/icons/information", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/FeaturesRegistry", "sap/ui/webc/common/thirdparty/base/Keys", "./Filters", "./generated/i18n/i18n-defaults", "./generated/templates/ComboBoxTemplate.lit", "./generated/templates/ComboBoxPopoverTemplate.lit", "./generated/themes/ComboBox.css", "./generated/themes/ComboBoxPopover.css", "./generated/themes/ResponsivePopoverCommon.css", "./generated/themes/ValueStateMessage.css", "./generated/themes/Suggestions.css", "./ComboBoxItem", "./Icon", "./Popover", "./ResponsivePopover", "./List", "./BusyIndicator", "./Button", "./StandardListItem", "./ComboBoxGroupItem", "./GroupHeaderListItem", "./types/ComboBoxFilter", "./types/PopoverHorizontalAlign"], function (_exports, _UI5Element, _customElement, _property, _event, _slot, _LitRenderer, _ValueState, _Device, _Integer, _InvisibleMessageMode, _AriaLabelHelper, _InvisibleMessage, _slimArrowDown, _decline, _notEditable, _error, _alert, _sysEnter, _information, _i18nBundle, _FeaturesRegistry, _Keys, Filters, _i18nDefaults, _ComboBoxTemplate, _ComboBoxPopoverTemplate, _ComboBox, _ComboBoxPopover, _ResponsivePopoverCommon, _ValueStateMessage, _Suggestions, _ComboBoxItem, _Icon, _Popover, _ResponsivePopover, _List, _BusyIndicator, _Button, _StandardListItem, _ComboBoxGroupItem, _GroupHeaderListItem, _ComboBoxFilter, _PopoverHorizontalAlign) {
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/decorators/slot", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/types/ValueState", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/base/types/InvisibleMessageMode", "sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper", "sap/ui/webc/common/thirdparty/base/util/InvisibleMessage", "sap/ui/webc/common/thirdparty/base/CustomElementsScope", "sap/ui/webc/common/thirdparty/icons/slim-arrow-down", "sap/ui/webc/common/thirdparty/icons/decline", "sap/ui/webc/common/thirdparty/icons/not-editable", "sap/ui/webc/common/thirdparty/icons/error", "sap/ui/webc/common/thirdparty/icons/alert", "sap/ui/webc/common/thirdparty/icons/sys-enter-2", "sap/ui/webc/common/thirdparty/icons/information", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/FeaturesRegistry", "sap/ui/webc/common/thirdparty/base/Keys", "./Filters", "./generated/i18n/i18n-defaults", "./generated/templates/ComboBoxTemplate.lit", "./generated/templates/ComboBoxPopoverTemplate.lit", "./generated/themes/ComboBox.css", "./generated/themes/ComboBoxPopover.css", "./generated/themes/ResponsivePopoverCommon.css", "./generated/themes/ValueStateMessage.css", "./generated/themes/Suggestions.css", "./ComboBoxItem", "./Icon", "./Popover", "./ResponsivePopover", "./List", "./BusyIndicator", "./Button", "./StandardListItem", "./ComboBoxGroupItem", "./GroupHeaderListItem", "./types/ComboBoxFilter", "./types/PopoverHorizontalAlign"], function (_exports, _UI5Element, _customElement, _property, _event, _slot, _LitRenderer, _ValueState, _Device, _Integer, _InvisibleMessageMode, _AriaLabelHelper, _InvisibleMessage, _CustomElementsScope, _slimArrowDown, _decline, _notEditable, _error, _alert, _sysEnter, _information, _i18nBundle, _FeaturesRegistry, _Keys, Filters, _i18nDefaults, _ComboBoxTemplate, _ComboBoxPopoverTemplate, _ComboBox, _ComboBoxPopover, _ResponsivePopoverCommon, _ValueStateMessage, _Suggestions, _ComboBoxItem, _Icon, _Popover, _ResponsivePopover, _List, _BusyIndicator, _Button, _StandardListItem, _ComboBoxGroupItem, _GroupHeaderListItem, _ComboBoxFilter, _PopoverHorizontalAlign) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -46,6 +46,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var ComboBox_1;
+
+  // Templates
+
+  // Styles
+
   const SKIP_ITEMS_SIZE = 10;
   var ValueStateIconMapping;
   (function (ValueStateIconMapping) {
@@ -130,7 +135,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       this._initialRendering = false;
       const slottedIconsCount = this.icon.length || 0;
       const arrowDownIconsCount = this.readonly ? 0 : 1;
-      this.style.setProperty("--_ui5-input-icons-count", `${slottedIconsCount + arrowDownIconsCount}`);
+      this.style.setProperty((0, _CustomElementsScope.getScopedVarName)("--_ui5-input-icons-count"), `${slottedIconsCount + arrowDownIconsCount}`);
     }
     async onAfterRendering() {
       const picker = await this._getPicker();
@@ -525,8 +530,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     _selectMatchingItem() {
       const currentlyFocusedItem = this.items.find(item => item.focused);
       const shouldSelectionBeCleared = currentlyFocusedItem && currentlyFocusedItem.isGroupItem;
+      const itemToBeSelected = this._filteredItems.find(item => {
+        return !item.isGroupItem && item.text === this.value && !shouldSelectionBeCleared;
+      });
       this._filteredItems = this._filteredItems.map(item => {
-        item.selected = !item.isGroupItem && item.text === this.value && !shouldSelectionBeCleared;
+        item.selected = item === itemToBeSelected;
         return item;
       });
     }
@@ -577,7 +585,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       const itemPositionText = ComboBox_1.i18nBundle.getText(_i18nDefaults.LIST_ITEM_POSITION, indexOfItem + 1, this._filteredItems.length);
       const groupHeaderText = ComboBox_1.i18nBundle.getText(_i18nDefaults.LIST_ITEM_GROUP_HEADER);
       if (isGroupItem) {
-        (0, _InvisibleMessage.default)(`${groupHeaderText} ${currentItem.text} ${itemPositionText}`, _InvisibleMessageMode.default.Polite);
+        (0, _InvisibleMessage.default)(`${groupHeaderText} ${currentItem.text}`, _InvisibleMessageMode.default.Polite);
       } else {
         (0, _InvisibleMessage.default)(`${currentItemAdditionalText} ${itemPositionText}`.trim(), _InvisibleMessageMode.default.Polite);
       }

package/src/sap/ui/webc/main/thirdparty/CustomListItem.js

@@ -18,6 +18,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/web
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
+
+  // Styles
+
   /**
    * @class
    *
@@ -26,6 +29,20 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/web
    *
    * The component accepts arbitrary HTML content to allow full customization.
    *
+   * <h3>CSS Shadow Parts</h3>
+   *
+   * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+   * <br>
+   * The <code>ui5-li-custom</code> exposes the following CSS Shadow Parts:
+   * <ul>
+   * <li>native-li - Used to style the main li tag of the list item</li>
+   * <li>content - Used to style the content area of the list item</li>
+   * <li>detail-button - Used to style the button rendered when the list item is of type detail</li>
+   * <li>delete-button - Used to style the button rendered when the list item is in delete mode</li>
+   * <li>radio - Used to style the radio button rendered when the list item is in single selection mode</li>
+   * <li>checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode</li>
+   * </ul>
+   *
    * @constructor
    * @author SAP SE
    * @alias sap.ui.webc.main.CustomListItem

package/src/sap/ui/webc/main/thirdparty/DateComponentBase.js

@@ -46,6 +46,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       const localeData = (0, _getCachedLocaleDataInstance.default)((0, _getLocale.default)());
       return this.primaryCalendarType || (0, _CalendarType.getCalendarType)() || localeData.getPreferredCalendarType();
     }
+    get _secondaryCalendarType() {
+      return this.secondaryCalendarType || (0, _CalendarType.getSecondaryCalendarType)();
+    }
     get _minDate() {
       let minDate;
       if (this.minDate) {

package/src/sap/ui/webc/main/thirdparty/DatePicker.js

@@ -38,6 +38,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var DatePicker_1;
+
+  // default calendar for bundling
+
+  // Styles
+
   /**
    * @class
    *
@@ -235,13 +240,14 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
      *
      * @param { number } amount
      * @param { string } unit
+     * @param { boolean } preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April)
      * @protected
      */
-    _modifyDateValue(amount, unit) {
+    _modifyDateValue(amount, unit, preserveDate) {
       if (!this.dateValue) {
         return;
       }
-      const modifiedDate = (0, _modifyDateBy.default)(_CalendarDate.default.fromLocalJSDate(this.dateValue), amount, unit, this._minDate, this._maxDate);
+      const modifiedDate = (0, _modifyDateBy.default)(_CalendarDate.default.fromLocalJSDate(this.dateValue), amount, unit, preserveDate, this._minDate, this._maxDate);
       const newValue = this.formatValue(modifiedDate.toUTCJSDate());
       this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
     }
@@ -269,20 +275,22 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
         }
       });
       if (!executeEvent && updateValue) {
+        if (this.value !== previousValue && this.value !== this._getInput().value) {
+          return; // If the value was changed in the change event, do not revert it
+        }
+
         this._getInput().value = previousValue;
         this.value = previousValue;
-        this._updateValueState(); // Change the value state to Error/None, but only if needed
       }
     }
-
     _updateValueState() {
       const isValid = this._checkValueValidity(this.value);
-      if (!isValid) {
+      if (isValid && this.valueState === _ValueState.default.Error) {
         // If not valid - always set Error regardless of the current value state
-        this.valueState = _ValueState.default.Error;
-      } else if (isValid && this.valueState === _ValueState.default.Error) {
-        // However if valid, change only Error (but not the others) to None
         this.valueState = _ValueState.default.None;
+      } else if (!isValid) {
+        // However if valid, change only Error (but not the others) to None
+        this.valueState = _ValueState.default.Error;
       }
     }
     _toggleAndFocusInput() {

package/src/sap/ui/webc/main/thirdparty/DateRangePicker.js

@@ -22,6 +22,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var DateRangePicker_1;
+
+  // Styles
+
   /**
    * @class
    *
@@ -218,17 +221,17 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
     /**
      * @override
      */
-    async _modifyDateValue(amount, unit) {
+    async _modifyDateValue(amount, unit, preserveDate) {
       if (!this._endDateTimestamp) {
         // If empty or only one date -> treat as datepicker entirely
-        return super._modifyDateValue(amount, unit);
+        return super._modifyDateValue(amount, unit, preserveDate);
       }
       const input = this._getInput();
       let caretPos = input.getCaretPosition(); // caret position is always number for input of type text;
       let newValue;
       if (caretPos <= this.value.indexOf(this._effectiveDelimiter)) {
         // The user is focusing the first date -> change it and keep the second date
-        const startDateModified = (0, _modifyDateBy.default)(_CalendarDate.default.fromTimestamp(this._startDateTimestamp * 1000), amount, unit, this._minDate, this._maxDate);
+        const startDateModified = (0, _modifyDateBy.default)(_CalendarDate.default.fromTimestamp(this._startDateTimestamp * 1000), amount, unit, preserveDate, this._minDate, this._maxDate);
         const newStartDateTimestamp = startDateModified.valueOf() / 1000;
         if (newStartDateTimestamp > this._endDateTimestamp) {
           // dates flipped -> move the caret to the same position but on the last date
@@ -236,7 +239,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
         }
         newValue = this._buildValue(newStartDateTimestamp, this._endDateTimestamp); // the value will be normalized so we don't try to order them here
       } else {
-        const endDateModified = (0, _modifyDateBy.default)(_CalendarDate.default.fromTimestamp(this._endDateTimestamp * 1000), amount, unit, this._minDate, this._maxDate);
+        const endDateModified = (0, _modifyDateBy.default)(_CalendarDate.default.fromTimestamp(this._endDateTimestamp * 1000), amount, unit, preserveDate, this._minDate, this._maxDate);
         const newEndDateTimestamp = endDateModified.valueOf() / 1000;
         newValue = this._buildValue(this._startDateTimestamp, newEndDateTimestamp); // the value will be normalized so we don't try to order them here
         if (newEndDateTimestamp < this._startDateTimestamp) {

package/src/sap/ui/webc/main/thirdparty/DateTimePicker.js

@@ -31,6 +31,13 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/propert
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var DateTimePicker_1;
+
+  // i18n texts
+
+  // Template
+
+  // Styles
+
   const PHONE_MODE_BREAKPOINT = 640; // px
   /**
    * @class
@@ -279,11 +286,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/propert
     /**
      * @override
      */
-    _modifyDateValue(amount, unit) {
+    _modifyDateValue(amount, unit, preserveDate) {
       if (!this.dateValue) {
         return;
       }
-      const modifiedDate = (0, _modifyDateBy.default)(_CalendarDate.default.fromLocalJSDate(this.dateValue), amount, unit, this._minDate, this._maxDate);
+      const modifiedDate = (0, _modifyDateBy.default)(_CalendarDate.default.fromLocalJSDate(this.dateValue), amount, unit, preserveDate, this._minDate, this._maxDate);
       const modifiedLocalDate = modifiedDate.toLocalJSDate();
       modifiedLocalDate.setHours(this.dateValue.getHours());
       modifiedLocalDate.setMinutes(this.dateValue.getMinutes());

package/src/sap/ui/webc/main/thirdparty/DayPicker.js

@@ -27,6 +27,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var DayPicker_1;
+
+  // Template
+
+  // Styles
+
   const isBetween = (x, num1, num2) => x > Math.min(num1, num2) && x < Math.max(num1, num2);
   const DAYS_IN_WEEK = 7;
   /**
@@ -189,6 +194,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
       if (this._autoFocus && !this._hidden) {
         this.focus();
       }
+      const focusedDay = this.shadowRoot.querySelector("[data-sap-focus-ref]");
+      if (focusedDay && document.activeElement !== focusedDay) {
+        focusedDay.focus();
+      }
     }
     _onfocusin() {
       this._autoFocus = true;
@@ -360,13 +369,13 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
       } else if ((0, _Keys.isSpace)(e) || (0, _Keys.isSpaceShift)(e)) {
         e.preventDefault();
       } else if ((0, _Keys.isLeft)(e)) {
-        this._modifyTimestampBy(-1, "day");
+        this._modifyTimestampBy(-1, "day", false);
       } else if ((0, _Keys.isRight)(e)) {
-        this._modifyTimestampBy(1, "day");
+        this._modifyTimestampBy(1, "day", false);
       } else if ((0, _Keys.isUp)(e)) {
-        this._modifyTimestampBy(-7, "day");
+        this._modifyTimestampBy(-7, "day", false);
       } else if ((0, _Keys.isDown)(e)) {
-        this._modifyTimestampBy(7, "day");
+        this._modifyTimestampBy(7, "day", false);
       } else if ((0, _Keys.isPageUp)(e)) {
         this._modifyTimestampBy(-1, "month");
       } else if ((0, _Keys.isPageDown)(e)) {
@@ -451,29 +460,28 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
     }
     /**
      * Called by the Calendar component.
-     * <b>Note:</b> same as for "PageUp"
      * @protected
      */
     _showPreviousPage() {
-      this._modifyTimestampBy(-1, "month");
+      this._modifyTimestampBy(-1, "month", false);
     }
     /**
      * Called by the Calendar component.
-     * <b>Note:</b> same as for "PageDown"
      * @protected
      */
     _showNextPage() {
-      this._modifyTimestampBy(1, "month");
+      this._modifyTimestampBy(1, "month", false);
     }
     /**
      * Modifies the timestamp by a certain amount of days/months/years.
      * @param { number } amount
      * @param { string } unit
+     * @param { boolean } preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April)
      * @private
      */
-    _modifyTimestampBy(amount, unit) {
+    _modifyTimestampBy(amount, unit, preserveDate) {
       // Modify the current timestamp
-      this._safelyModifyTimestampBy(amount, unit);
+      this._safelyModifyTimestampBy(amount, unit, preserveDate);
       this._updateSecondTimestamp();
       // Notify the calendar to update its timestamp
       this.fireEvent("navigate", {

package/src/sap/ui/webc/main/thirdparty/Dialog.js

@@ -26,6 +26,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/w
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var Dialog_1;
+
+  // Template
+
+  // Styles
+
   /**
    * Defines the step size at which this component would change by when being dragged or resized with the keyboard.
    */
@@ -74,6 +79,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/w
    * <li>content - Used to style the content of the component</li>
    * <li>footer - Used to style the footer of the component</li>
    * </ul>
+   * <b>Note:</b> When a <code>ui5-bar</code> is used in the header or in the footer, you should remove the default dialog's paddings.
+   * <br>
+   * For more information see the sample "Bar in Header/Footer".
+  
    *
    * <h3>ES6 Module Import</h3>
    *

package/src/sap/ui/webc/main/thirdparty/FileUploader.js

@@ -29,6 +29,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var FileUploader_1;
+
+  // Template
+
+  // Styles
+
   /**
    * @class
    *

package/src/sap/ui/webc/main/thirdparty/GroupHeaderListItem.js

@@ -19,6 +19,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/propert
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var GroupHeaderListItem_1;
+
+  // Template
+
+  // Styles
+
   /**
    * @class
    * The <code>ui5-li-groupheader</code> is a special list item, used only to separate other list items into logical groups.

package/src/sap/ui/webc/main/thirdparty/Icon.js

@@ -22,6 +22,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
+
+  // Styles
+
   const ICON_NOT_FOUND = "ICON_NOT_FOUND";
   const PRESENTATION_ROLE = "presentation";
   /**

package/src/sap/ui/webc/main/thirdparty/Input.js

@@ -1,4 +1,4 @@
-sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/slot", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/webc/common/thirdparty/base/types/ValueState", "sap/ui/webc/common/thirdparty/base/FeaturesRegistry", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper", "sap/ui/webc/common/thirdparty/base/util/Caret", "sap/ui/webc/common/thirdparty/base/util/getActiveElement", "sap/ui/webc/common/thirdparty/icons/decline", "sap/ui/webc/common/thirdparty/icons/not-editable", "sap/ui/webc/common/thirdparty/icons/error", "sap/ui/webc/common/thirdparty/icons/alert", "sap/ui/webc/common/thirdparty/icons/sys-enter-2", "sap/ui/webc/common/thirdparty/icons/information", "./types/InputType", "./Popover", "./Icon", "./generated/templates/InputTemplate.lit", "./generated/templates/InputPopoverTemplate.lit", "./Filters", "./generated/i18n/i18n-defaults", "./generated/themes/Input.css", "./generated/themes/ResponsivePopoverCommon.css", "./generated/themes/ValueStateMessage.css", "./generated/themes/Suggestions.css"], function (_exports, _UI5Element, _property, _customElement, _slot, _event, _LitRenderer, _ResizeHandler, _Device, _ValueState, _FeaturesRegistry, _Keys, _Integer, _i18nBundle, _AriaLabelHelper, _Caret, _getActiveElement, _decline, _notEditable, _error, _alert, _sysEnter, _information, _InputType, _Popover, _Icon, _InputTemplate, _InputPopoverTemplate, _Filters, _i18nDefaults, _Input, _ResponsivePopoverCommon, _ValueStateMessage, _Suggestions) {
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/slot", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler", "sap/ui/webc/common/thirdparty/base/CustomElementsScope", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/webc/common/thirdparty/base/types/ValueState", "sap/ui/webc/common/thirdparty/base/FeaturesRegistry", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper", "sap/ui/webc/common/thirdparty/base/util/Caret", "sap/ui/webc/common/thirdparty/base/util/getActiveElement", "sap/ui/webc/common/thirdparty/icons/decline", "sap/ui/webc/common/thirdparty/icons/not-editable", "sap/ui/webc/common/thirdparty/icons/error", "sap/ui/webc/common/thirdparty/icons/alert", "sap/ui/webc/common/thirdparty/icons/sys-enter-2", "sap/ui/webc/common/thirdparty/icons/information", "./types/InputType", "./Popover", "./Icon", "./generated/templates/InputTemplate.lit", "./generated/templates/InputPopoverTemplate.lit", "./Filters", "./generated/i18n/i18n-defaults", "./generated/themes/Input.css", "./generated/themes/ResponsivePopoverCommon.css", "./generated/themes/ValueStateMessage.css", "./generated/themes/Suggestions.css"], function (_exports, _UI5Element, _property, _customElement, _slot, _event, _LitRenderer, _ResizeHandler, _CustomElementsScope, _Device, _ValueState, _FeaturesRegistry, _Keys, _Integer, _i18nBundle, _AriaLabelHelper, _Caret, _getActiveElement, _decline, _notEditable, _error, _alert, _sysEnter, _information, _InputType, _Popover, _Icon, _InputTemplate, _InputPopoverTemplate, _Filters, _i18nDefaults, _Input, _ResponsivePopoverCommon, _ValueStateMessage, _Suggestions) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -33,6 +33,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var Input_1;
+
+  // Templates
+
+  // Styles
+
   // all sementic events
   var INPUT_EVENTS;
   (function (INPUT_EVENTS) {
@@ -123,7 +128,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       // Indicates, if the user is typing. Gets reset once popup is closed
       this.isTyping = false;
       // Suggestions array initialization
-      this.suggestionsTexts = [];
+      this.suggestionObjects = [];
       this._handleResizeBound = this._handleResize.bind(this);
       this._keepInnerValue = false;
       this._focusedAfterClear = false;
@@ -142,10 +147,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       }
       if (this.showSuggestions) {
         this.enableSuggestions();
-        this.suggestionsTexts = this.Suggestions.defaultSlotProperties(this.typedInValue);
+        this.suggestionObjects = this.Suggestions.defaultSlotProperties(this.typedInValue);
       }
       this.effectiveShowClearIcon = this.showClearIcon && !!this.value && !this.readonly && !this.disabled;
-      this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`);
+      this.style.setProperty((0, _CustomElementsScope.getScopedVarName)("--_ui5-input-icons-count"), `${this.iconsCount}`);
       this.FormSupport = (0, _FeaturesRegistry.getFeature)("FormSupport");
       const hasItems = !!this.suggestionItems.length;
       const hasValue = !!this.value;
@@ -756,11 +761,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     }
     announceSelectedItem() {
       const invisibleText = this.shadowRoot.querySelector(`#${this._id}-selectionText`);
-      if (this.Suggestions && this.Suggestions._isItemOnTarget()) {
-        invisibleText.textContent = this.itemSelectionAnnounce;
-      } else {
-        invisibleText.textContent = "";
-      }
+      invisibleText.textContent = this.itemSelectionAnnounce;
     }
     get _readonly() {
       return this.readonly && !this.disabled;
@@ -889,13 +890,14 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     }
     get availableSuggestionsCount() {
       if (this.showSuggestions && (this.value || this.Suggestions.isOpened())) {
-        switch (this.suggestionsTexts.length) {
+        const nonGroupItems = this.suggestionObjects.filter(item => !item.groupItem);
+        switch (nonGroupItems.length) {
           case 0:
             return Input_1.i18nBundle.getText(_i18nDefaults.INPUT_SUGGESTIONS_NO_HIT);
           case 1:
             return Input_1.i18nBundle.getText(_i18nDefaults.INPUT_SUGGESTIONS_ONE_HIT);
           default:
-            return Input_1.i18nBundle.getText(_i18nDefaults.INPUT_SUGGESTIONS_MORE_HITS, this.suggestionsTexts.length);
+            return Input_1.i18nBundle.getText(_i18nDefaults.INPUT_SUGGESTIONS_MORE_HITS, nonGroupItems.length);
         }
       }
       return undefined;

package/src/sap/ui/webc/main/thirdparty/Interfaces.js

@@ -4,7 +4,7 @@ sap.ui.define(["exports"], function (_exports) {
   Object.defineProperty(_exports, "__esModule", {
     value: true
   });
-  _exports.ITreeItem = _exports.IToken = _exports.ITableRow = _exports.ITableColumn = _exports.ITableCell = _exports.ITab = _exports.ISelectOption = _exports.ISegmentedButtonItem = _exports.IMultiComboBoxItem = _exports.IMenuItem = _exports.IListItem = _exports.IInputSuggestionItem = _exports.IInput = _exports.IIcon = _exports.IComboBoxItem = _exports.IColorPaletteItem = _exports.ICardHeader = _exports.ICalendarDate = _exports.IButton = _exports.IBreadcrumbsItem = _exports.IAvatar = void 0;
+  _exports.ITreeItem = _exports.IToolbarSelectOption = _exports.IToolbarItem = _exports.IToken = _exports.ITableRow = _exports.ITableColumn = _exports.ITableCell = _exports.ITab = _exports.ISelectOption = _exports.ISelectMenuOption = _exports.ISegmentedButtonItem = _exports.IMultiComboBoxItem = _exports.IMenuItem = _exports.IListItem = _exports.IInputSuggestionItem = _exports.IInput = _exports.IIcon = _exports.IComboBoxItem = _exports.IColorPaletteItem = _exports.ICardHeader = _exports.ICalendarDate = _exports.IButton = _exports.IBreadcrumbsItem = _exports.IAvatar = void 0;
   /**
    * Interface for components that represent an avatar and may be slotted in numerous higher-order components such as <code>ui5-avatar-group</code>
    *
@@ -139,6 +139,15 @@ sap.ui.define(["exports"], function (_exports) {
    */
   _exports.ISegmentedButtonItem = ISegmentedButtonItem;
   const ISelectOption = "sap.ui.webc.main.ISelectOption";
+  /**
+   * Interface for components that may be slotted inside <code>ui5-select-menu</code> as options
+   *
+   * @name sap.ui.webc.main.ISelectMenuOption
+   * @interface
+   * @public
+   */
+  _exports.ISelectOption = ISelectOption;
+  const ISelectMenuOption = "sap.ui.webc.main.ISelectMenuOption";
   /**
    * Interface for components that may be slotted inside <code>ui5-tabcontainer</code>
    *
@@ -146,7 +155,7 @@ sap.ui.define(["exports"], function (_exports) {
    * @interface
    * @public
    */
-  _exports.ISelectOption = ISelectOption;
+  _exports.ISelectMenuOption = ISelectMenuOption;
   const ITab = "sap.ui.webc.main.ITab";
   /**
    * Interface for components that may be slotted inside a <code>ui5-table</code> as rows
@@ -193,5 +202,23 @@ sap.ui.define(["exports"], function (_exports) {
    */
   _exports.IToken = IToken;
   const ITreeItem = "sap.ui.webc.main.ITreeItem";
+  /**
+   * Interface for toolbar items for the purpose of <code>ui5-toolbar</code>
+   *
+   * @name sap.ui.webc.main.IToolbarItem
+   * @interface
+   * @public
+   */
   _exports.ITreeItem = ITreeItem;
+  const IToolbarItem = "sap.ui.webc.main.IToolbarItem";
+  /**
+   * Interface for toolbar select items for the purpose of <code>ui5-toolbar-select</code>
+   *
+   * @name sap.ui.webc.main.IToolbarSelectOption
+   * @interface
+   * @public
+   */
+  _exports.IToolbarItem = IToolbarItem;
+  const IToolbarSelectOption = "sap.ui.webc.main.IToolbarSelectOption";
+  _exports.IToolbarSelectOption = IToolbarSelectOption;
 });

package/src/sap/ui/webc/main/thirdparty/Label.js

@@ -21,6 +21,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var Label_1;
+
+  // Template
+
+  // Styles
+
   /**
    * @class
    *

package/src/sap/ui/webc/main/thirdparty/Link.js

@@ -23,6 +23,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var Link_1;
+
+  // Template
+
+  // Styles
+
   /**
    * @class
    *
@@ -157,6 +162,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   __decorate([(0, _property.default)({
     type: Boolean
   })], Link.prototype, "disabled", void 0);
+  __decorate([(0, _property.default)()], Link.prototype, "title", void 0);
   __decorate([(0, _property.default)()], Link.prototype, "href", void 0);
   __decorate([(0, _property.default)()], Link.prototype, "target", void 0);
   __decorate([(0, _property.default)({