@openui5/sap.ui.webc.main 1.119.1 → 1.120.1

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

@@ -1,4 +1,4 @@
-sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/slot", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/Keys", "./generated/i18n/i18n-defaults", "./Input", "./generated/templates/MultiInputTemplate.lit", "./generated/themes/MultiInput.css", "./Token", "./Tokenizer", "./Icon", "sap/ui/webc/common/thirdparty/icons/value-help"], function (_exports, _property, _slot, _event, _customElement, _LitRenderer, _Keys, _i18nDefaults, _Input, _MultiInputTemplate, _MultiInput, _Token, _Tokenizer, _Icon, _valueHelp) {
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/slot", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/CustomElementsScope", "./generated/i18n/i18n-defaults", "./Input", "./generated/templates/MultiInputTemplate.lit", "./generated/themes/MultiInput.css", "./Token", "./Tokenizer", "./Icon", "sap/ui/webc/common/thirdparty/icons/value-help"], function (_exports, _property, _slot, _event, _customElement, _LitRenderer, _Keys, _CustomElementsScope, _i18nDefaults, _Input, _MultiInputTemplate, _MultiInput, _Token, _Tokenizer, _Icon, _valueHelp) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -100,12 +100,16 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/propert
       target.focus();
     }
     _tokenizerFocusOut(e) {
-      if (!this.contains(e.relatedTarget)) {
+      const isFocusingMorePopover = e.relatedTarget === this.tokenizer.staticAreaItem;
+      if (!this.contains(e.relatedTarget) && !isFocusingMorePopover) {
         this.tokenizer._tokens.forEach(token => {
           token.selected = false;
         });
         this.tokenizer.scrollToStart();
       }
+      if (e.relatedTarget === this.nativeInput) {
+        this.tokenizer.closeMorePopover();
+      }
     }
     valueHelpMouseUp() {
       setTimeout(() => {
@@ -116,11 +120,16 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/propert
       this.expandedTokenizer = true;
       this.focused = true;
       this.tokenizer.scrollToEnd();
+      this.tokenizer._getTokens().forEach(token => {
+        token.selected = false;
+      });
     }
     _onkeydown(e) {
       super._onkeydown(e);
       const target = e.target;
       const isHomeInBeginning = (0, _Keys.isHome)(e) && target.selectionStart === 0;
+      const isCtrl = e.metaKey || e.ctrlKey;
+      const tokens = this.tokens;
       if (isHomeInBeginning) {
         this._skipOpenSuggestions = true; // Prevent input focus when navigating through the tokens
         return this._focusFirstToken(e);
@@ -133,6 +142,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/propert
       if ((0, _Keys.isShow)(e)) {
         this.valueHelpPress();
       }
+      if (isCtrl && e.key.toLowerCase() === "i" && tokens.length > 0) {
+        e.preventDefault();
+        this.tokenizer.openMorePopover();
+      }
     }
     _onTokenizerKeydown(e) {
       const rightCtrl = (0, _Keys.isRightCtrl)(e);
@@ -166,6 +179,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/propert
         }
         return this.tokenizer._fillClipboard(_Tokenizer.ClipboardDataOperation.copy, selectedTokens);
       }
+      if (isCtrl && e.key.toLowerCase() === "i" && tokens.length > 0) {
+        e.preventDefault();
+        this.tokenizer.openMorePopover();
+      }
     }
     _handleLeft(e) {
       const cursorPosition = this.getDomRef().querySelector(`input`).selectionStart;
@@ -213,7 +230,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/propert
     }
     onBeforeRendering() {
       super.onBeforeRendering();
-      this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`);
+      this.style.setProperty((0, _CustomElementsScope.getScopedVarName)("--_ui5-input-icons-count"), `${this.iconsCount}`);
       this.tokenizerAvailable = this.tokens && this.tokens.length > 0;
     }
     get iconsCount() {
@@ -254,6 +271,12 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/propert
     get ariaRoleDescription() {
       return MultiInput_1.i18nBundle.getText(_i18nDefaults.MULTIINPUT_ROLEDESCRIPTION_TEXT);
     }
+    get morePopoverOpener() {
+      if (this.tokens.length === 1 && this.tokens[0].isTruncatable) {
+        return this.tokens[0];
+      }
+      return this;
+    }
   };
   __decorate([(0, _property.default)({
     type: Boolean

package/src/sap/ui/webc/main/thirdparty/Option.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"], function (_exports, _UI5Element, _customElement, _property) {
+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/slot", "sap/ui/webc/common/thirdparty/base/decorators/property"], function (_exports, _UI5Element, _customElement, _slot, _property) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -7,6 +7,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   _exports.default = void 0;
   _UI5Element = _interopRequireDefault(_UI5Element);
   _customElement = _interopRequireDefault(_customElement);
+  _slot = _interopRequireDefault(_slot);
   _property = _interopRequireDefault(_property);
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
   var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
@@ -27,21 +28,12 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
    * @author SAP SE
    * @alias sap.ui.webc.main.Option
    * @extends sap.ui.webc.base.UI5Element
+   * @abstract
    * @tagname ui5-option
    * @implements sap.ui.webc.main.ISelectOption
    * @public
    */
   let Option = class Option extends _UI5Element.default {
-    /**
-     * Defines the text of the component.
-     * <br><br>
-     * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
-     *
-     * @type {Node[]}
-     * @name sap.ui.webc.main.Option.prototype.default
-     * @slot
-     * @public
-     */
     get stableDomRef() {
       return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
     }
@@ -61,6 +53,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   __decorate([(0, _property.default)({
     type: Boolean
   })], Option.prototype, "_focused", void 0);
+  __decorate([(0, _slot.default)({
+    type: Node,
+    "default": true,
+    invalidateOnChildChange: true
+  })], Option.prototype, "text", void 0);
   Option = __decorate([(0, _customElement.default)("ui5-option")], Option);
   Option.define();
   var _default = Option;

package/src/sap/ui/webc/main/thirdparty/Panel.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 Panel_1;
+
+  // Styles
+
   /**
    * @class
    *
@@ -181,6 +184,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       return {
         headerBtn: {
           "ui5-panel-header-button-animated": !this.shouldNotAnimate()
+        },
+        stickyHeaderClass: {
+          "ui5-panel-heading-wrapper-sticky": this.stickyHeader
         }
       };
     }
@@ -268,6 +274,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     defaultValue: _TitleLevel.default.H2
   })], Panel.prototype, "headerLevel", void 0);
   __decorate([(0, _property.default)()], Panel.prototype, "accessibleName", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Panel.prototype, "stickyHeader", void 0);
   __decorate([(0, _property.default)({
     type: Boolean
   })], Panel.prototype, "useAccessibleNameForToggleButton", void 0);

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

@@ -29,6 +29,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var Popup_1;
+
+  // Styles
+
   const createBlockingStyle = () => {
     if (!(0, _ManagedStyles.hasStyle)("data-ui5-popup-scroll-blocker")) {
       (0, _ManagedStyles.createStyle)(_PopupGlobal.default, "data-ui5-popup-scroll-blocker");
@@ -172,9 +175,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
     async forwardToFirst() {
       const firstFocusable = await (0, _FocusableElements.getFirstFocusableElement)(this);
       if (firstFocusable) {
-        firstFocusable.focus({
-          focusVisible: true
-        });
+        firstFocusable.focus();
       } else {
         this._root.focus();
       }
@@ -186,9 +187,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
     async forwardToLast() {
       const lastFocusable = await (0, _FocusableElements.getLastFocusableElement)(this);
       if (lastFocusable) {
-        lastFocusable.focus({
-          focusVisible: true
-        });
+        lastFocusable.focus();
       } else {
         this._root.focus();
       }
@@ -219,9 +218,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
         if (element === this._root) {
           element.tabIndex = -1;
         }
-        element.focus({
-          focusVisible: true
-        });
+        element.focus();
       }
     }
     /**
@@ -319,9 +316,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
       if (!this._focusedElementBeforeOpen) {
         return;
       }
-      this._focusedElementBeforeOpen.focus({
-        focusVisible: true
-      });
+      this._focusedElementBeforeOpen.focus();
       this._focusedElementBeforeOpen = null;
     }
     /**

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

@@ -24,6 +24,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var ProgressIndicator_1;
+
+  // Template
+
+  // Styles
+
   /**
    * @class
    *
@@ -69,7 +74,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         "Error": "status-negative",
         "Warning": "status-critical",
         "Success": "status-positive",
-        "Information": "hint"
+        "Information": "information"
       };
     }
     get styles() {
@@ -121,6 +126,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       ProgressIndicator_1.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
     }
   };
+  __decorate([(0, _property.default)()], ProgressIndicator.prototype, "accessibleName", void 0);
   __decorate([(0, _property.default)({
     type: Boolean
   })], ProgressIndicator.prototype, "disabled", void 0);

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

@@ -26,6 +26,13 @@ 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 RadioButton_1;
+
+  // Template
+
+  // i18n
+
+  // Styles
+
   let isGlobalHandlerAttached = false;
   let activeRadio;
   /**
@@ -62,8 +69,12 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/w
    * @public
    */
   let RadioButton = RadioButton_1 = class RadioButton extends _UI5Element.default {
+    static get formAssociated() {
+      return true;
+    }
     constructor() {
       super();
+      this._internals = this.attachInternals();
       this._deactivate = () => {
         if (activeRadio) {
           activeRadio.active = false;
@@ -113,16 +124,23 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/w
     _enableFormSupport() {
       const formSupport = (0, _FeaturesRegistry.getFeature)("FormSupport");
       if (formSupport) {
-        formSupport.syncNativeHiddenInput(this, (element, nativeInput) => {
-          nativeInput.value = element.value;
-          nativeInput.type = "radio";
-          nativeInput.checked = element.checked;
-        });
+        this._setFormValue();
       } else if (this.value) {
         console.warn(`In order for the "value" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
       }
     }
 
+    _setFormValue() {
+      this._internals.setFormValue(this.checked ? this.value : null);
+    }
+    _resetFormValidity() {
+      this._internals.setValidity({});
+    }
+    _invalidateForm() {
+      this._internals.setValidity({
+        valueMissing: true
+      }, this.radioButtonGroupRequiredText, this.shadowRoot.firstElementChild);
+    }
     _onclick() {
       return this.toggle();
     }
@@ -224,6 +242,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/w
           return "";
       }
     }
+    get radioButtonGroupRequiredText() {
+      return RadioButton_1.i18nBundle.getText(_i18nDefaults.RADIO_BUTTON_GROUP_REQUIRED);
+    }
     get effectiveTabIndex() {
       const tabindex = this.getAttribute("tabindex");
       if (this.disabled) {

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

@@ -73,6 +73,17 @@ sap.ui.define(["exports"], function (_exports) {
       }
       this.updateSelectionInGroup(nextItemToSelect, groupName);
     }
+    static updateFormValidity(groupName) {
+      const group = this.getGroup(groupName);
+      if (!group) {
+        return;
+      }
+      group.forEach(r => r._resetFormValidity());
+      const groupRequiresValue = group.some(r => r.required) && group.every(r => !r.checked);
+      if (groupRequiresValue) {
+        group[0]._invalidateForm();
+      }
+    }
     static updateTabOrder(groupName) {
       const group = this.getGroup(groupName);
       if (!group) {
@@ -122,9 +133,7 @@ sap.ui.define(["exports"], function (_exports) {
     }
     static _selectRadio(radioBtn) {
       if (radioBtn) {
-        radioBtn.focus({
-          focusVisible: true
-        });
+        radioBtn.focus();
         radioBtn.checked = true;
         radioBtn._checked = true;
         radioBtn.fireEvent("change");
@@ -176,6 +185,7 @@ sap.ui.define(["exports"], function (_exports) {
         this.checkedRadios.set(groupName, null);
       }
       this.updateTabOrder(groupName);
+      this.updateFormValidity(groupName);
     }
     static get groups() {
       if (!this._groups) {

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

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

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

@@ -1,4 +1,4 @@
-sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/base/types/Float", "./generated/i18n/i18n-defaults", "./generated/templates/RatingIndicatorTemplate.lit", "./Icon", "sap/ui/webc/common/thirdparty/icons/favorite", "sap/ui/webc/common/thirdparty/icons/unfavorite", "./generated/themes/RatingIndicator.css"], function (_exports, _customElement, _event, _property, _UI5Element, _LitRenderer, _Keys, _i18nBundle, _Integer, _Float, _i18nDefaults, _RatingIndicatorTemplate, _Icon, _favorite, _unfavorite, _RatingIndicator) {
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/base/types/Float", "./generated/i18n/i18n-defaults", "./generated/templates/RatingIndicatorTemplate.lit", "./Icon", "sap/ui/webc/common/thirdparty/icons/favorite", "sap/ui/webc/common/thirdparty/icons/unfavorite", "./generated/themes/RatingIndicator.css"], function (_exports, _customElement, _event, _property, _UI5Element, _LitRenderer, _Keys, _AriaLabelHelper, _i18nBundle, _Integer, _Float, _i18nDefaults, _RatingIndicatorTemplate, _Icon, _favorite, _unfavorite, _RatingIndicator) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -24,6 +24,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var RatingIndicator_1;
+
+  // Styles
+
   /**
    * @class
    *
@@ -168,6 +171,12 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
     get _ariaDisabled() {
       return this.disabled || undefined;
     }
+    get _ariaLabel() {
+      return (0, _AriaLabelHelper.getEffectiveAriaLabelText)(this);
+    }
+    get _ariaDescription() {
+      return this.required ? RatingIndicator_1.i18nBundle.getText(_i18nDefaults.RATING_INDICATOR_ARIA_DESCRIPTION) : undefined;
+    }
     get ariaReadonly() {
       return this.readonly ? "true" : undefined;
     }
@@ -187,6 +196,12 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customE
     type: Boolean
   })], RatingIndicator.prototype, "readonly", void 0);
   __decorate([(0, _property.default)()], RatingIndicator.prototype, "accessibleName", void 0);
+  __decorate([(0, _property.default)({
+    defaultValue: ""
+  })], RatingIndicator.prototype, "accessibleNameRef", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], RatingIndicator.prototype, "required", void 0);
   __decorate([(0, _property.default)({
     type: Object,
     multiple: true

package/src/sap/ui/webc/main/thirdparty/ResponsivePopover.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 ResponsivePopover_1;
+
+  // Styles
+
   /**
    * @class
    *

package/src/sap/ui/webc/main/thirdparty/SegmentedButton.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/delegate/ItemNavigation", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler", "sap/ui/webc/common/thirdparty/base/Render", "sap/ui/webc/common/thirdparty/base/Keys", "./generated/i18n/i18n-defaults", "./SegmentedButtonItem", "./types/SegmentedButtonMode", "./generated/templates/SegmentedButtonTemplate.lit", "./generated/themes/SegmentedButton.css"], function (_exports, _UI5Element, _customElement, _property, _event, _slot, _ItemNavigation, _LitRenderer, _i18nBundle, _ResizeHandler, _Render, _Keys, _i18nDefaults, _SegmentedButtonItem, _SegmentedButtonMode, _SegmentedButtonTemplate, _SegmentedButton) {
+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/delegate/ItemNavigation", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/CustomElementsScope", "sap/ui/webc/common/thirdparty/base/Keys", "./generated/i18n/i18n-defaults", "./SegmentedButtonItem", "./types/SegmentedButtonMode", "./generated/templates/SegmentedButtonTemplate.lit", "./generated/themes/SegmentedButton.css"], function (_exports, _UI5Element, _customElement, _property, _event, _slot, _ItemNavigation, _LitRenderer, _i18nBundle, _CustomElementsScope, _Keys, _i18nDefaults, _SegmentedButtonItem, _SegmentedButtonMode, _SegmentedButtonTemplate, _SegmentedButton) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -12,7 +12,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   _slot = _interopRequireDefault(_slot);
   _ItemNavigation = _interopRequireDefault(_ItemNavigation);
   _LitRenderer = _interopRequireDefault(_LitRenderer);
-  _ResizeHandler = _interopRequireDefault(_ResizeHandler);
   _SegmentedButtonItem = _interopRequireDefault(_SegmentedButtonItem);
   _SegmentedButtonMode = _interopRequireDefault(_SegmentedButtonMode);
   _SegmentedButtonTemplate = _interopRequireDefault(_SegmentedButtonTemplate);
@@ -26,6 +25,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
   var SegmentedButton_1;
+
+  // Template
+
+  // Styles
+
   /**
    * @class
    *
@@ -59,18 +63,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       this._itemNavigation = new _ItemNavigation.default(this, {
         getItemsCallback: () => this.getSlottedNodes("items")
       });
-      this.absoluteWidthSet = false; // true when component width is set to absolute
-      this.percentageWidthSet = false; // true when component width is set to 100%
       this.hasPreviouslyFocusedItem = false;
-      this._handleResizeBound = this._doLayout.bind(this);
-    }
-    onEnterDOM() {
-      _ResizeHandler.default.register(this.parentNode, this._handleResizeBound);
-    }
-    onExitDOM() {
-      if (this.parentNode) {
-        _ResizeHandler.default.deregister(this.parentNode, this._handleResizeBound);
-      }
     }
     onBeforeRendering() {
       const items = this.getSlottedNodes("items");
@@ -79,23 +72,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         item.sizeOfSet = arr.length;
       });
       this.normalizeSelection();
-    }
-    async onAfterRendering() {
-      await this._doLayout();
-    }
-    prepareToMeasureItems() {
-      this.style.width = "";
-      this.items.forEach(item => {
-        item.style.width = "";
-      });
-    }
-    async measureItemsWidth() {
-      await (0, _Render.renderFinished)();
-      this.prepareToMeasureItems();
-      this.widths = this.items.map(item => {
-        // 1 is added because for width 100.44px the offsetWidth property is 100px and not 101px
-        return item.offsetWidth + 1;
-      });
+      this.style.setProperty((0, _CustomElementsScope.getScopedVarName)("--_ui5_segmented_btn_items_count"), `${items.length}`);
     }
     normalizeSelection() {
       switch (this.mode) {
@@ -182,24 +159,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         this.hasPreviouslyFocusedItem = true;
       }
     }
-    async _doLayout() {
-      const itemsHaveWidth = this.widths && this.widths.some(itemWidth => itemWidth > 2); // 2 pixels added for rounding
-      if (!itemsHaveWidth) {
-        await this.measureItemsWidth();
-      }
-      const parentWidth = this.parentNode ? this.parentNode.offsetWidth : 0;
-      if (!this.style.width || this.percentageWidthSet) {
-        this.style.width = `${Math.max(...this.widths) * this.items.length}px`;
-        this.absoluteWidthSet = true;
-      }
-      this.items.forEach(item => {
-        item.style.width = "100%";
-      });
-      if (parentWidth <= this.offsetWidth && this.absoluteWidthSet) {
-        this.style.width = "100%";
-        this.percentageWidthSet = true;
-      }
-    }
     /**
      * Currently selected item.
      *