@ui5/webcomponents 1.3.0 → 1.5.0

package/src/Button.js

@@ -4,7 +4,6 @@ import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import isLegacyBrowser from "@ui5/webcomponents-base/dist/isLegacyBrowser.js";
 import {
 	isPhone,
 	isTablet,
@@ -12,6 +11,7 @@ import {
 	isDesktop,
 	isSafari,
 } from "@ui5/webcomponents-base/dist/Device.js";
+import isDefaultSlotProvided from "@ui5/webcomponents-base/dist/util/isDefaultSlotProvided.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 import ButtonTemplate from "./generated/templates/ButtonTemplate.lit.js";
 import Icon from "./Icon.js";
@@ -20,7 +20,6 @@ import { BUTTON_ARIA_TYPE_ACCEPT, BUTTON_ARIA_TYPE_REJECT, BUTTON_ARIA_TYPE_EMPH
 
 // Styles
 import buttonCss from "./generated/themes/Button.css.js";
-import buttonIECss from "./generated/themes/Button.ie11.css.js";
 
 let isGlobalHandlerAttached = false;
 let activeButton = null;
@@ -71,12 +70,12 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the icon to be displayed as graphical element within the component.
+		 * Defines the icon, displayed as graphical element within the component.
 		 * The SAP-icons font provides numerous options.
 		 * <br><br>
 		 * Example:
 		 *
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons within the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -99,7 +98,7 @@ const metadata = {
 
 		/**
 		 * When set to <code>true</code>, the component will
-		 * automatically submit the nearest form element upon <code>press</code>.
+		 * automatically submit the nearest HTML form element on <code>press</code>.
 		 * <br><br>
 		 * <b>Note:</b> For the <code>submits</code> property to have effect, you must add the following import to your project:
 		 * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
@@ -327,7 +326,7 @@ class Button extends UI5Element {
 	}
 
 	static get styles() {
-		return [buttonCss, isLegacyBrowser() && buttonIECss];
+		return buttonCss;
 	}
 
 	static get render() {
@@ -357,15 +356,17 @@ class Button extends UI5Element {
 			isGlobalHandlerAttached = true;
 		}
 
+		const handleTouchStartEvent = event => {
+			event.isMarked = "button";
+			if (this.nonInteractive) {
+				return;
+			}
+
+			this.active = true;
+		};
+
 		this._ontouchstart = {
-			handleEvent(event) {
-				event.isMarked = "button";
-				if (this.nonInteractive) {
-					return;
-				}
-
-				this.active = true;
-			},
+			handleEvent: handleTouchStartEvent,
 			passive: true,
 		};
 	}
@@ -460,11 +461,16 @@ class Button extends UI5Element {
 		return this.design !== ButtonDesign.Default && this.design !== ButtonDesign.Transparent;
 	}
 
+	get iconRole() {
+		if (!this.icon) {
+			return "";
+		}
+
+		return this.isIconOnly ? "img" : "presentation";
+	}
+
 	get isIconOnly() {
-		return !Array.from(this.childNodes).filter(node => {
-			return node.nodeType !== Node.COMMENT_NODE
-			&& (node.nodeType !== Node.TEXT_NODE || node.nodeValue.trim().length !== 0);
-		}).length;
+		return !isDefaultSlotProvided(this);
 	}
 
 	static typeTextMappings() {

package/src/Calendar.js

@@ -30,7 +30,7 @@ import calendarCSS from "./generated/themes/Calendar.css.js";
 const metadata = {
 	tag: "ui5-calendar",
 	fastNavigation: true,
-	properties: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.Calendar.prototype */ {
 		/**
 		 * Defines the type of selection used in the calendar component.
 		 * Accepted property values are:<br>
@@ -88,7 +88,7 @@ const metadata = {
 		},
 	},
 	managedSlots: true,
-	slots: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.Calendar.prototype */ {
 		/**
 		 * Defines the selected date or dates (depending on the <code>selectionMode</code> property) for this calendar as instances of <code>ui5-date</code>
 		 *
@@ -102,7 +102,7 @@ const metadata = {
 			invalidateOnChildChange: true,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.Calendar.prototype */ {
 		/**
 		 * Fired when the selected dates change.
 		 * <b>Note:</b> If you call <code>preventDefault()</code> for this event, the component will not
@@ -290,7 +290,7 @@ class Calendar extends CalendarPart {
 
 		const yearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.primaryCalendarType });
 		const localeData = getCachedLocaleDataInstance(getLocale());
-		this._headerMonthButtonText = localeData.getMonths("wide", this.primaryCalendarType)[this._calendarDate.getMonth()];
+		this._headerMonthButtonText = localeData.getMonthsStandAlone("wide", this.primaryCalendarType)[this._calendarDate.getMonth()];
 
 		if (this._currentPicker === "year") {
 			const rangeStart = new CalendarDate(this._calendarDate, this._primaryCalendarType);

package/src/CalendarDate.js

@@ -5,7 +5,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 */
 const metadata = {
 	tag: "ui5-date",
-	properties: /** @lends  sap.ui.webcomponents.main.CalendarDate.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.CalendarDate.prototype */ {
 
 		/**
 		 * The date formatted according to the <code>formatPattern</code> property of the <code>ui5-calendar</code> that hosts the component

package/src/CalendarPart.js

@@ -8,7 +8,7 @@ import DateComponentBase from "./DateComponentBase.js";
  * @public
  */
 const metadata = {
-	properties: /** @lends  sap.ui.webcomponents.main.CalendarPart.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.CalendarPart.prototype */ {
 		/**
 		 * The timestamp of the currently focused date. Set this property to move the component's focus to a certain date.
 		 * <b>Node:</b> Timestamp is 10-digit Integer representing the seconds (not milliseconds) since the Unix Epoch.

package/src/CardHeader.hbs

@@ -1,42 +1,57 @@
 <div
-	class="{{classes}}"
-	@click="{{_headerClick}}"
-	@keydown="{{_headerKeydown}}"
-	@keyup="{{_headerKeyup}}"
-	role="{{ariaHeaderRole}}"
-	aria-labelledby="{{ariaLabelledByHeader}}"
-	aria-level="{{_ariaLevel}}"
-	aria-roledescription="{{ariaCardHeaderRoleDescription}}"
-	tabindex="0"
 	id="{{_id}}--header"
+	class="{{classes}}"
+	role="group"
+	aria-roledescription="{{ariaRoleDescription}}"
+	@click="{{_click}}"
+	@keydown="{{_keydown}}"
+	@keyup="{{_keyup}}"
 >
-	{{#if hasAvatar}}
-		<div id="{{_id}}-avatar" class="ui5-card-header-avatar" aria-label="{{ariaCardAvatarLabel}}">
-			<slot name="avatar"></slot>
-		</div>
-	{{/if}}
+	<div
+		class="ui5-card-header-focusable-element"
+		aria-labelledby="{{ariaLabelledBy}}"
+		role="{{ariaRoleFocusableElement}}"
+		data-sap-focus-ref
+		tabindex="0"
+	>
+		{{#if hasAvatar}}
+			<div id="{{_id}}-avatar" class="ui5-card-header-avatar" aria-label="{{ariaCardAvatarLabel}}">
+				<slot name="avatar"></slot>
+			</div>
+		{{/if}}
 
-	<div class="ui5-card-header-text">
-		<div class="ui5-card-header-first-line">
-			{{#if titleText}}
-				<div id="{{_id}}-title" class="ui5-card-header-title" part="title">{{titleText}}</div>
-			{{/if}}
+		<div class="ui5-card-header-text">
+			<div class="ui5-card-header-first-line">
+				{{#if titleText}}
+					<div
+						id="{{_id}}-title"
+						class="ui5-card-header-title"
+						part="title"
+						aria-role="heading"
+						aria-level="3"
+					>{{titleText}}</div>
+				{{/if}}
 
-			{{#if status}}
-				<div class="ui5-card-header-status">
-					<span id="{{_id}}-status" part="status" dir="auto">{{status}}</span>
-				</div>
-			{{/if}}
+				{{#if status}}
+					<div class="ui5-card-header-status">
+						<span id="{{_id}}-status" part="status" dir="auto">{{status}}</span>
+					</div>
+				{{/if}}
 
-		</div>
+			</div>
 
-		{{#if subtitleText}}
-			<div id="{{_id}}-subtitle" class="ui5-card-header-subtitle" part="subtitle">{{subtitleText}}</div>
-		{{/if}}
+			{{#if subtitleText}}
+				<div id="{{_id}}-subtitle" class="ui5-card-header-subtitle" part="subtitle">{{subtitleText}}</div>
+			{{/if}}
+		</div>
 	</div>
 
 	{{#if hasAction}}
-		<div class="ui5-card-header-action">
+		<div
+			class="ui5-card-header-action"
+			@focusin="{{_actionsFocusin}}"
+			@focusout="{{_actionsFocusout}}"
+		>
 			<slot name="action"></slot>
 		</div>
 	{{/if}}

package/src/CardHeader.js

@@ -4,7 +4,6 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import CardHeaderTemplate from "./generated/templates/CardHeaderTemplate.lit.js";
-import Icon from "./Icon.js";
 
 import {
 	AVATAR_TOOLTIP,
@@ -176,27 +175,23 @@ class CardHeader extends UI5Element {
 		};
 	}
 
-	get ariaHeaderRole() {
-		return this.interactive ? "button" : "heading";
+	get _root() {
+		return this.shadowRoot.querySelector(".ui5-card-header");
 	}
 
-	get _ariaLevel() {
-		if (this.interactive) {
-			return undefined;
-		}
-
-		return this.ariaLevel;
+	get ariaRoleDescription() {
+		return this.interactive ? CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
 	}
 
-	get ariaCardHeaderRoleDescription() {
-		return this.interactive ? CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER) : CardHeader.i18nBundle.getText(ARIA_ROLEDESCRIPTION_CARD_HEADER);
+	get ariaRoleFocusableElement() {
+		return this.interactive ? "button" : null;
 	}
 
 	get ariaCardAvatarLabel() {
 		return CardHeader.i18nBundle.getText(AVATAR_TOOLTIP);
 	}
 
-	get ariaLabelledByHeader() {
+	get ariaLabelledBy() {
 		const labels = [];
 
 		if (this.titleText) {
@@ -226,25 +221,29 @@ class CardHeader extends UI5Element {
 		return !!this.action.length;
 	}
 
-	static get dependencies() {
-		return [Icon];
-	}
-
 	static async onDefine() {
 		CardHeader.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
-	_headerClick(event) {
+	_actionsFocusin() {
+		this._root.classList.add("ui5-card-header-hide-focus");
+	}
+
+	_actionsFocusout() {
+		this._root.classList.remove("ui5-card-header-hide-focus");
+	}
+
+	_click(event) {
 		// prevents the native browser "click" event from firing
 		event.stopImmediatePropagation();
 
-		if (this.interactive && event.target === event.currentTarget) {
+		if (this.interactive && this._root.contains(event.target)) {
 			this.fireEvent("click");
 		}
 	}
 
-	_headerKeydown(event) {
-		if (!this.interactive || event.target !== event.currentTarget) {
+	_keydown(event) {
+		if (!this.interactive || !this._root.contains(event.target)) {
 			return;
 		}
 
@@ -263,8 +262,8 @@ class CardHeader extends UI5Element {
 		}
 	}
 
-	_headerKeyup(event) {
-		if (!this.interactive || event.target !== event.currentTarget) {
+	_keyup(event) {
+		if (!this.interactive || !this._root.contains(event.target)) {
 			return;
 		}
 

package/src/Carousel.hbs

@@ -70,7 +70,7 @@
         class="ui5-carousel-navigation-button {{classes.navPrevButton}}"
         icon="slim-arrow-left"
         tabindex="-1"
-        @click={{navigateLeft}}
+        @click={{_navButtonClick}}
     ></ui5-button>
 {{/inline}}
 
@@ -81,6 +81,6 @@
         class="ui5-carousel-navigation-button {{classes.navNextButton}}"
         icon="slim-arrow-right"
         tabindex="-1"
-        @click={{navigateRight}}
+        @click={{_navButtonClick}}
     ></ui5-button>
 {{/inline}}

package/src/Carousel.js

@@ -479,6 +479,16 @@ class Carousel extends UI5Element {
 		}
 	}
 
+	_navButtonClick(event) {
+		if (event.target.hasAttribute("arrow-forward")) {
+			this.navigateRight();
+		} else {
+			this.navigateLeft();
+		}
+
+		this.focus();
+	}
+
 	/**
 	 * Changes the currently displayed page.
 	 * @param {Integer} itemIndex The index of the target page

package/src/ColorPalette.js

@@ -119,7 +119,7 @@ const metadata = {
 		 * @param {string} color the selected color
 		 */
 		"item-click": {
-			details: {
+			detail: {
 				color: {
 					type: String,
 				},

package/src/ColorPaletteDialog.hbs

@@ -7,7 +7,7 @@
 
     <div slot="footer" class="ui5-cp-dialog-footer">
         <ui5-button
-            design="Transparent"
+            design="Emphasized"
             @click="{{_chooseCustomColor}}"
         >{{moreColorsFeature.colorPaletteDialogOKButton}}</ui5-button>
         <ui5-button

package/src/ColorPaletteItem.js

@@ -17,7 +17,7 @@ import ColorPaletteItemCss from "./generated/themes/ColorPaletteItem.css.js";
 const metadata = {
 	tag: "ui5-color-palette-item",
 	managedSlots: true,
-	properties: /** @lends  sap.ui.webcomponents.main.ColorPaletteItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.ColorPaletteItem.prototype */ {
 		/**
 		 * Defines the colour of the component.
 		 * <br><br>

package/src/ColorPalettePopover.js

@@ -87,7 +87,7 @@ const metadata = {
 		 * @param {string} color the selected color
 		 */
 		"item-click": {
-			details: {
+			detail: {
 				color: {
 					type: String,
 				},

package/src/ColorPicker.hbs

@@ -20,6 +20,7 @@
             min="0"
             max="1530"
             value="{{_hue}}"
+            accessible-name="{{hueSliderLabel}}"
             @ui5-input="{{_handleHueInput}}"
         ></ui5-slider>
         <ui5-slider
@@ -29,6 +30,7 @@
             max="1"
             step="0.01"
             value="{{_alpha}}"
+            accessible-name="{{alphaSliderLabel}}"
             @ui5-input="{{_handleAlphaInput}}"
         ></ui5-slider>
     </div>
@@ -47,6 +49,7 @@
                 class="ui5-color-picker-hex-input"
                 value="{{hex}}"
                 @keydown="{{_onkeydown}}"
+                accessible-name="{{hexInputLabel}}"
                 @ui5-change="{{_handleHEXChange}}"
                 value-state="{{hexInputErrorState}}"
             ></ui5-input>
@@ -62,6 +65,7 @@
                 id="red"
                 class="ui5-color-picker-rgb-input"
                 disabled="{{inputsDisabled}}"
+                accessible-name="{{redInputLabel}}"
                 value="{{_color.r}}"
             ></ui5-input>
             <ui5-label>R</ui5-label>
@@ -71,6 +75,7 @@
                 id="green"
                 class="ui5-color-picker-rgb-input"
                 disabled="{{inputsDisabled}}"
+                accessible-name="{{greenInputLabel}}"
                 value="{{_color.g}}"
             ></ui5-input>
             <ui5-label>G</ui5-label>
@@ -80,6 +85,7 @@
                 id="blue"
                 class="ui5-color-picker-rgb-input"
                 disabled="{{inputsDisabled}}"
+                accessible-name="{{blueInputLabel}}"
                 value="{{_color.b}}"
             ></ui5-input>
             <ui5-label>B</ui5-label>
@@ -90,6 +96,7 @@
                 disabled="{{inputsDisabled}}"
                 class="ui5-color-picker-rgb-input"
                 value="{{_alpha}}"
+                accessible-name="{{alphaInputLabel}}"
                 @ui5-input="{{_handleAlphaInput}}"
                 @ui5-change="{{_handleAlphaChange}}"
             ></ui5-input>

package/src/ColorPicker.js

@@ -1,11 +1,10 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
-import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
 	getRGBColor,
 	HSLToRGB,
@@ -17,6 +16,16 @@ import Input from "./Input.js";
 import Slider from "./Slider.js";
 import Label from "./Label.js";
 
+import {
+	COLORPICKER_ALPHA_SLIDER,
+	COLORPICKER_HUE_SLIDER,
+	COLORPICKER_HEX,
+	COLORPICKER_RED,
+	COLORPICKER_GREEN,
+	COLORPICKER_BLUE,
+	COLORPICKER_ALPHA,
+} from "./generated/i18n/i18n-defaults.js";
+
 // Styles
 import ColorPickerCss from "./generated/themes/ColorPicker.css.js";
 
@@ -179,6 +188,10 @@ class ColorPicker extends UI5Element {
 		];
 	}
 
+	static async onDefine() {
+		ColorPicker.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+
 	constructor() {
 		super();
 
@@ -209,13 +222,6 @@ class ColorPicker extends UI5Element {
 		this.style.setProperty("--ui5_Color_Picker_Progress_Container_Color", tempColor);
 	}
 
-	async onAfterRendering() {
-		if (isIE()) {
-			await renderFinished();
-			this._applySliderStyles();
-		}
-	}
-
 	_applySliderStyles() {
 		const hueSlider = this.getDomRef().querySelector(".ui5-color-picker-hue-slider").shadowRoot,
 			alphaSlider = this.getDomRef().querySelector(".ui5-color-picker-alpha-slider").shadowRoot;
@@ -533,6 +539,34 @@ class ColorPicker extends UI5Element {
 		this._setMainColor(this._hue);
 	}
 
+	get hueSliderLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_HUE_SLIDER);
+	}
+
+	get alphaSliderLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_ALPHA_SLIDER);
+	}
+
+	get hexInputLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_HEX);
+	}
+
+	get redInputLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_RED);
+	}
+
+	get greenInputLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_GREEN);
+	}
+
+	get blueInputLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_BLUE);
+	}
+
+	get alphaInputLabel() {
+		return ColorPicker.i18nBundle.getText(COLORPICKER_ALPHA);
+	}
+
 	get inputsDisabled() {
 		return this._wrongHEX ? true : undefined;
 	}

package/src/ComboBox.hbs

@@ -39,7 +39,6 @@
 			input-icon
 			?pressed="{{_iconPressed}}"
 			@click="{{_arrowClick}}"
-			dir="{{effectiveDir}}"
 			accessible-name="{{_iconAccessibleNameText}}"
 		></ui5-icon>
 	{{/unless}}

package/src/ComboBox.js

@@ -29,7 +29,7 @@ import {
 	isHome,
 	isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import * as Filters from "./ComboBoxFilters.js";
+import * as Filters from "./Filters.js";
 
 import {
 	VALUE_STATE_SUCCESS,
@@ -598,7 +598,7 @@ class ComboBox extends UI5Element {
 	}
 
 	_startsWithMatchingItems(str) {
-		return Filters.StartsWith(str, this._filteredItems);
+		return Filters.StartsWith(str, this._filteredItems, "text");
 	}
 
 	_clearFocus() {
@@ -779,8 +779,9 @@ class ComboBox extends UI5Element {
 		}
 
 		if (isEnter(event)) {
+			this._fireChangeEvent();
+
 			if (this.responsivePopover.opened) {
-				this._fireChangeEvent();
 				this._closeRespPopover();
 				this.focused = true;
 			} else if (this.FormSupport) {
@@ -845,7 +846,7 @@ class ComboBox extends UI5Element {
 
 	_filterItems(str) {
 		const itemsToFilter = this.items.filter(item => !item.isGroupItem);
-		const filteredItems = (Filters[this.filter] || Filters.StartsWithPerTerm)(str, itemsToFilter);
+		const filteredItems = (Filters[this.filter] || Filters.StartsWithPerTerm)(str, itemsToFilter, "text");
 
 		// Return the filtered items and their group items
 		return this.items.filter((item, idx, allItems) => ComboBox._groupItemFilter(item, ++idx, allItems, filteredItems) || filteredItems.indexOf(item) !== -1);
@@ -933,6 +934,7 @@ class ComboBox extends UI5Element {
 		const sameSelectionPerformed = this.value.toLowerCase() === this.filterValue.toLowerCase();
 
 		if (sameItemSelected && sameSelectionPerformed) {
+			this._fireChangeEvent(); // Click on an already typed, but not memoized value shouold also trigger the change event
 			return this._closeRespPopover();
 		}
 
@@ -1083,6 +1085,7 @@ class ComboBox extends UI5Element {
 	}
 
 	get styles() {
+		const remSizeInPx = parseInt(getComputedStyle(document.documentElement).fontSize);
 		return {
 			popoverHeader: {
 				"width": `${this.offsetWidth}px`,
@@ -1091,6 +1094,10 @@ class ComboBox extends UI5Element {
 				"display": this._listWidth === 0 ? "none" : "inline-block",
 				"width": `${this._listWidth}px`,
 			},
+			suggestionsPopover: {
+				"min-width": `${this.offsetWidth}px`,
+				"max-width": (this.offsetWidth / remSizeInPx) > 40 ? `${this.offsetWidth}px` : "40rem",
+			},
 		};
 	}
 

package/src/ComboBoxGroupItem.js

@@ -6,7 +6,7 @@ import GroupHeaderListItem from "./GroupHeaderListItem.js";
  */
 const metadata = {
 	tag: "ui5-cb-group-item",
-	properties: /** @lends  sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 *
@@ -25,15 +25,15 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends  sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
 	},
-	events: /** @lends  sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
 	},
 };
 
 /**
  * @class
- * The <code>ui5-combobox-group-item</code> is type of suggestion item,
+ * The <code>ui5-cb-group-item</code> is type of suggestion item,
  * that can be used to split the <code>ui5-combobox</code> suggestions into groups.
  *
  * @constructor

package/src/ComboBoxItem.js

@@ -5,7 +5,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
  */
 const metadata = {
 	tag: "ui5-cb-item",
-	properties: /** @lends  sap.ui.webcomponents.main.ComboBoxItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.ComboBoxItem.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 *