@openui5/sap.ui.webc.main 1.97.1 → 1.100.0

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

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/types/ValueState', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/icons/slim-arrow-down', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/icons/decline', 'sap/ui/webc/common/thirdparty/icons/multiselect-all', './MultiComboBoxItem', './Tokenizer', './Token', './Icon', './Popover', './ResponsivePopover', './List', './StandardListItem', './ToggleButton', './ComboBoxFilters-f59100bd', './Button', './generated/i18n/i18n-defaults', './generated/templates/MultiComboBoxTemplate.lit', './generated/templates/MultiComboBoxPopoverTemplate.lit', './generated/themes/MultiComboBox.css', './generated/themes/ResponsivePopoverCommon.css', './generated/themes/ValueStateMessage.css', './generated/themes/Suggestions.css'], function (UI5Element, litRender, ResizeHandler, ValueState, Keys, Integer, slimArrowDown, Device, i18nBundle, decline, multiselectAll, MultiComboBoxItem, Tokenizer, Token, Icon, Popover, ResponsivePopover, List, StandardListItem, ToggleButton, ComboBoxFilters, Button, i18nDefaults, MultiComboBoxTemplate_lit, MultiComboBoxPopoverTemplate_lit, MultiComboBox_css, ResponsivePopoverCommon_css, ValueStateMessage_css, Suggestions_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/types/ValueState', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/icons/slim-arrow-down', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/icons/decline', 'sap/ui/webc/common/thirdparty/icons/multiselect-all', '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', './MultiComboBoxItem', './Tokenizer', './Token', './Icon', './Popover', './ResponsivePopover', './List', './StandardListItem', './ToggleButton', './_chunks/ComboBoxFilters', './Button', './generated/i18n/i18n-defaults', './generated/templates/MultiComboBoxTemplate.lit', './generated/templates/MultiComboBoxPopoverTemplate.lit', './generated/themes/MultiComboBox.css', './generated/themes/ResponsivePopoverCommon.css', './generated/themes/ValueStateMessage.css', './generated/themes/Suggestions.css'], function (UI5Element, litRender, ResizeHandler, ValueState, Keys, Integer, slimArrowDown, Device, i18nBundle, decline, multiselectAll, notEditable, error, alert, sysEnter2, information, MultiComboBoxItem, Tokenizer, Token, Icon, Popover, ResponsivePopover, List, StandardListItem, ToggleButton, ComboBoxFilters, Button, i18nDefaults, MultiComboBoxTemplate_lit, MultiComboBoxPopoverTemplate_lit, MultiComboBox_css, ResponsivePopoverCommon_css, ValueStateMessage_css, Suggestions_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -139,6 +139,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			this._deleting = false;
 			this._validationTimeout = null;
 			this._handleResizeBound = this._handleResize.bind(this);
+			this.currentItemIdx = -1;
 		}
 		onEnterDOM() {
 			ResizeHandler__default.register(this, this._handleResizeBound);
@@ -218,7 +219,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			}
 			return this.placeholder;
 		}
-		_handleLeft() {
+		_handleArrowLeft() {
 			const cursorPosition = this.getDomRef().querySelector(`input`).selectionStart;
 			if (cursorPosition === 0) {
 				this._tokenizer._focusLastToken();
@@ -226,12 +227,15 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		_tokenizerFocusOut(event) {
 			this._tokenizerFocused = false;
-			const tokensCount = this._tokenizer.tokens.length - 1;
-			if (!event.relatedTarget || event.relatedTarget.localName !== "ui5-token") {
+			const tokensCount = this._tokenizer.tokens.length;
+			const selectedTokens = this._selectedTokensCount;
+			const lastTokenBeingDeleted = tokensCount - 1 === 0 && this._deleting;
+			const allTokensAreBeingDeleted = selectedTokens === tokensCount && this._deleting;
+			if (!event.relatedTarget || !event.relatedTarget.hasAttribute("ui5-token")) {
 				this._tokenizer.tokens.forEach(token => { token.selected = false; });
 				this._tokenizer.scrollToStart();
 			}
-			if (tokensCount === 0 && this._deleting) {
+			if (allTokensAreBeingDeleted || lastTokenBeingDeleted) {
 				setTimeout(() => {
 					if (!Device.isPhone()) {
 						this.shadowRoot.querySelector("input").focus();
@@ -248,31 +252,62 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			this._keyDown = false;
 		}
 		async _onkeydown(event) {
-			if (Keys.isLeft(event)) {
-				this._handleLeft(event);
-			}
 			if (Keys.isShow(event) && !this.readonly && !this.disabled) {
 				event.preventDefault();
 				this.togglePopover();
 			}
-			if (this.open && (Keys.isUp(event) || Keys.isDown(event))) {
+			if (Keys.isUp(event) || Keys.isDown(event)) {
 				this._handleArrowNavigation(event);
+				return;
 			}
-			if (Keys.isBackSpace(event) && event.target.value === "") {
+			this._keyDown = true;
+			this[`_handle${event.key}`] && this[`_handle${event.key}`](event);
+		}
+		_handleBackspace(event) {
+			if (event.target.value === "") {
 				event.preventDefault();
 				this._tokenizer._focusLastToken();
 			}
-			if (Keys.isEscape(event) && (!this.allowCustomValues || (!this.open && this.allowCustomValues))) {
+		}
+		_handleEscape(event) {
+			if (!this.allowCustomValues || (!this.open && this.allowCustomValues)) {
 				this.value = this._lastValue;
 			}
-			if (Keys.isEnter(event)) {
-				this.handleEnter();
+		}
+		_handleHome(event) {
+			const shouldFocusToken = this._isFocusInside && event.target.selectionStart === 0 && this._tokenizer.tokens.length > 0;
+			if (shouldFocusToken) {
+				event.preventDefault();
+				this._tokenizer.tokens[0].focus();
 			}
-			this._keyDown = true;
+		}
+		_handleEnd(event) {
+			const tokens = this._tokenizer.tokens;
+			const lastTokenIdx = tokens.length - 1;
+			const shouldFocusInput = event.target === tokens[lastTokenIdx] && tokens[lastTokenIdx] === this.shadowRoot.activeElement;
+			if (shouldFocusInput) {
+				event.preventDefault();
+				this._inputDom.focus();
+			}
+		}
+		_handleTab(event) {
+			this.allItemsPopover.close();
+		}
+		_handleSelectAll(event) {
+			const filteredItems = this._filteredItems;
+			const allItemsSelected = filteredItems.every(item => item.selected);
+			filteredItems.forEach(item => {
+				item.selected = !allItemsSelected;
+			});
+			this.fireSelectionChange();
 		}
 		_onValueStateKeydown(event) {
 			const isArrowDown = Keys.isDown(event);
 			const isArrowUp = Keys.isUp(event);
+			if (Keys.isTabNext(event) || Keys.isTabPrevious(event)) {
+				this._onItemTab(event);
+				return;
+			}
 			event.preventDefault();
 			if (isArrowDown) {
 				this._handleArrowDown(event);
@@ -283,37 +318,106 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		_onItemKeydown(event) {
 			const isFirstItem = this.list.items[0] === event.target;
+			if (Keys.isTabNext(event) || Keys.isTabPrevious(event)) {
+				this._onItemTab(event);
+				return;
+			}
 			event.preventDefault();
-			if (!Keys.isUp(event) || !isFirstItem) {
+			if (Keys.isCtrlA(event)) {
+				this._handleSelectAll(event);
 				return;
 			}
-			if (this.valueStateHeader) {
+			if (((Keys.isUp(event) && isFirstItem) || Keys.isHome(event)) && this.valueStateHeader) {
 				this.valueStateHeader.focus();
-				return;
 			}
+			if (!this.valueStateHeader && Keys.isUp(event) && isFirstItem) {
+				this._inputDom.focus();
+			}
+		}
+		_onItemTab(event) {
 			this._inputDom.focus();
+			this.allItemsPopover.close();
 		}
 		async _handleArrowNavigation(event) {
 			const isArrowDown = Keys.isDown(event);
-			const hasSuggestions = this.allItemsPopover.opened && this.items.length;
+			const hasSuggestions = this.items.length;
+			const isOpen = this.allItemsPopover.opened;
 			event.preventDefault();
 			if (this.hasValueStateMessage && !this.valueStateHeader) {
 				await this._setValueStateHeader();
 			}
-			if (isArrowDown && this.focused && this.valueStateHeader) {
+			if (isArrowDown && isOpen && this.focused && this.valueStateHeader) {
 				this.valueStateHeader.focus();
 				return;
 			}
 			if (isArrowDown && this.focused && hasSuggestions) {
 				this._handleArrowDown(event);
 			}
+			if (!isArrowDown && !isOpen && !this.readonly) {
+				this._navigateToPrevItem();
+			}
 		}
 		_handleArrowDown(event) {
+			const isOpen = this.allItemsPopover.opened;
 			const firstListItem = this.list.items[0];
-			this.list._itemNavigation.setCurrentItem(firstListItem);
-			firstListItem.focus();
+			if (isOpen) {
+				this.list._itemNavigation.setCurrentItem(firstListItem);
+				firstListItem.focus();
+			} else if (!this.readonly) {
+				this._navigateToNextItem();
+			}
 		}
-		handleEnter() {
+		_navigateToNextItem() {
+			const items = this.items;
+			const itemsCount = items.length;
+			const previousItemIdx = this.currentItemIdx;
+			if (previousItemIdx > -1 && items[previousItemIdx].text !== this.value) {
+				this.currentItemIdx = -1;
+			}
+			if (previousItemIdx >= itemsCount - 1) {
+				return;
+			}
+			let currentItem = this.items[++this.currentItemIdx];
+			while (this.currentItemIdx < itemsCount - 1 && currentItem.selected) {
+				currentItem = this.items[++this.currentItemIdx];
+			}
+			if (currentItem.selected === true) {
+				this.currentItemIdx = previousItemIdx;
+				return;
+			}
+			this.value = currentItem.text;
+			this._innerInput.value = currentItem.text;
+			this._innerInput.setSelectionRange(0, currentItem.text.length);
+		}
+		_navigateToPrevItem() {
+			const items = this.items;
+			let previousItemIdx = this.currentItemIdx;
+			if ((!this.value && previousItemIdx !== -1) || (previousItemIdx !== -1 && this.value && this.value !== items[previousItemIdx].text)) {
+				previousItemIdx = -1;
+			}
+			if (previousItemIdx === -1) {
+				this.currentItemIdx = items.length;
+			}
+			if (previousItemIdx === 0) {
+				this.currentItemIdx = 0;
+				return;
+			}
+			let currentItem = this.items[--this.currentItemIdx];
+			while (currentItem && currentItem.selected && this.currentItemIdx > 0) {
+				currentItem = this.items[--this.currentItemIdx];
+			}
+			if (!currentItem) {
+				return;
+			}
+			if (currentItem.selected) {
+				this.currentItemIdx = previousItemIdx;
+				return;
+			}
+			this.value = currentItem.text;
+			this._innerInput.value = currentItem.text;
+			this._innerInput.setSelectionRange(0, currentItem.text.length);
+		}
+		_handleEnter() {
 			const lowerCaseValue = this.value.toLowerCase();
 			const matchingItem = this.items.find(item => item.text.toLowerCase() === lowerCaseValue);
 			const oldValueState = this.valueState;
@@ -351,6 +455,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 					}, 0);
 				}
 			}
+			this[`_handle${event.key}`] && this[`_handle${event.key}`](event);
 		}
 		_filterItems(str) {
 			return (ComboBoxFilters.Filters[this.filter] || ComboBoxFilters.StartsWithPerTerm)(str, this.items);
@@ -438,6 +543,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			if (input && !input.value) {
 				this._filteredItems = this.items;
 			}
+			this.items.forEach(item => {
+				item._getRealDomRef = () => this.allItemsPopover.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
+			});
 			const filteredItems = this._filterItems(this.value);
 			this._filteredItems = filteredItems;
 		}
@@ -508,11 +616,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return this.shadowRoot.querySelector("[ui5-tokenizer]");
 		}
 		inputFocusIn() {
-			if (!Device.isPhone()) {
+			if (!Device.isPhone() || this.readonly) {
 				this.focused = true;
 			} else {
 				this._innerInput.blur();
 			}
+			!Device.isPhone() && this._innerInput.setSelectionRange(0, this.value.length);
 			this._lastValue = this.value;
 		}
 		inputFocusOut(event) {
@@ -523,6 +632,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				}
 			}
 		}
+		_readonlyIconClick() {
+			this._inputDom.focus();
+		}
 		get editable() {
 			return !this.readonly;
 		}
@@ -553,6 +665,15 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		get valueStateMessageText() {
 			return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
+		}
+		 get _valueStateMessageIcon() {
+			const iconPerValueState = {
+				Error: "error",
+				Warning: "alert",
+				Success: "sys-enter-2",
+				Information: "information",
+			};
+			return this.valueState !== ValueState__default.None ? iconPerValueState[this.valueState] : "";
 		}
 		get _tokensCountText() {
 			if (!this._tokenizer) {
@@ -563,6 +684,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		get _tokensCountTextId() {
 			return `${this._id}-hiddenText-nMore`;
 		}
+		get _selectedTokensCount() {
+			return this._tokenizer.tokens.filter(token => token.selected).length;
+		}
 		get ariaDescribedByText() {
 			return this.valueStateTextId ? `${this._tokensCountTextId} ${this.valueStateTextId}` : `${this._tokensCountTextId}`;
 		}
@@ -570,7 +694,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return !this.valueStateMessage.length && this.hasValueStateMessage;
 		}
 		get shouldDisplayOnlyValueStateMessage() {
-			return this.focused && this.hasValueStateMessage && !this._iconPressed;
+			return this.focused && !this.readonly && this.hasValueStateMessage && !this._iconPressed;
 		}
 		get valueStateTextMappings() {
 			return {
@@ -578,6 +702,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				"Error": MultiComboBox.i18nBundle.getText(i18nDefaults.VALUE_STATE_ERROR),
 				"Error_Selection": MultiComboBox.i18nBundle.getText(i18nDefaults.VALUE_STATE_ERROR_ALREADY_SELECTED),
 				"Warning": MultiComboBox.i18nBundle.getText(i18nDefaults.VALUE_STATE_WARNING),
+				"Information": MultiComboBox.i18nBundle.getText(i18nDefaults.VALUE_STATE_INFORMATION),
 			};
 		}
 		get _innerInput() {
@@ -600,6 +725,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		get _tokenizerExpanded() {
 			return (this._isFocusInside || this.open) && !this.readonly;
 		}
+		get _valueStatePopoverHorizontalAlign() {
+			return this.effectiveDir !== "rtl" ? "Left" : "Right";
+		}
 		get classes() {
 			return {
 				popover: {

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

@@ -4,15 +4,15 @@ sap.ui.define(['./ComboBoxItem'], function (ComboBoxItem) { 'use strict';
 		tag: "ui5-mcb-item",
 		properties:  {
 			selected: { type: Boolean },
-			stableDomRef: {
-				type: String,
-			},
 		},
 	};
 	class MultiComboBoxItem extends ComboBoxItem {
 		static get metadata() {
 			return metadata;
 		}
+		get stableDomRef() {
+			return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+		}
 	}
 	MultiComboBoxItem.define();
 

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

@@ -54,8 +54,13 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/u
 			this.focus();
 		}
 		tokenDelete(event) {
-			this.fireEvent("token-delete", {
-				token: event.detail.ref,
+			const focusedToken = event.detail.ref;
+			const selectedTokens = this.tokens.filter(token => token.selected);
+			if (selectedTokens.indexOf(focusedToken) === -1) {
+				selectedTokens.push(focusedToken);
+			}
+			selectedTokens.forEach(token => {
+				this.fireEvent("token-delete", { token });
 			});
 			this.focus();
 		}
@@ -81,7 +86,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/u
 		}
 		_onkeydown(event) {
 			super._onkeydown(event);
-			if (Keys.isLeft(event)) {
+			const isHomeInBeginning = Keys.isHome(event) && event.target.selectionStart === 0;
+			if (Keys.isLeft(event) || isHomeInBeginning) {
 				this._skipOpenSuggestions = true;
 				return this._handleLeft(event);
 			}
@@ -95,19 +101,44 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/u
 			}
 		}
 		_onTokenizerKeydown(event) {
-			if (Keys.isRight(event)) {
-				const lastTokenIndex = this.tokenizer._tokens.length - 1;
-				if (this.tokenizer._tokens[lastTokenIndex] === document.activeElement) {
+			const rightCtrl = Keys.isRightCtrl(event);
+			const isCtrl = !!(event.metaKey || event.ctrlKey);
+			const tokens = this.tokens;
+			if (Keys.isRight(event) || Keys.isEnd(event) || rightCtrl) {
+				event.preventDefault();
+				const lastTokenIndex = this.tokens.length - 1;
+				if (event.target === this.tokens[lastTokenIndex] && this.tokens[lastTokenIndex] === document.activeElement) {
 					setTimeout(() => {
 						this.focus();
 					}, 0);
+				} else if (rightCtrl) {
+					event.preventDefault();
+					return this.tokenizer._handleArrowCtrl(event.target, this.tokens, true);
+				}
+			}
+			this.tokenizer._handleItemNavigation(event, tokens);
+			if (isCtrl && ["c", "x"].includes(event.key.toLowerCase())) {
+				event.preventDefault();
+				const isCut = event.key.toLowerCase() === "x";
+				const selectedTokens = tokens.filter(token => token.selected);
+				if (isCut) {
+					const cutResult = this.tokenizer._fillClipboard("cut", selectedTokens);
+					selectedTokens.forEach(token => {
+						this.fireEvent("token-delete", { token });
+					});
+					this.focus();
+					return cutResult;
 				}
+				return this.tokenizer._fillClipboard("copy", selectedTokens);
 			}
 		}
 		_handleLeft() {
 			const cursorPosition = this.getDomRef().querySelector(`input`).selectionStart;
-			if (cursorPosition === 0) {
-				this.tokenizer._focusLastToken();
+			const tokens = this.tokens;
+			const lastToken = tokens.length && tokens[tokens.length - 1];
+			if (cursorPosition === 0 && lastToken) {
+				lastToken.focus();
+				this.tokenizer._itemNav.setCurrentItem(lastToken);
 			}
 		}
 		_onfocusout(event) {

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

@@ -14,6 +14,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element'], function (UI5El
 			disabled: {
 				type: Boolean,
 			},
+			title: {
+				type: String,
+			},
 			icon: {
 				type: String,
 				defaultValue: null,
@@ -21,9 +24,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element'], function (UI5El
 			value: {
 				type: String,
 			},
-			stableDomRef: {
-				type: String,
-			},
 			_focused: {
 				type: Boolean,
 			},
@@ -39,6 +39,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element'], function (UI5El
 		static get metadata() {
 			return metadata;
 		}
+		get stableDomRef() {
+			return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+		}
 	}
 	Option.define();
 

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

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/animations/slideDown', 'sap/ui/webc/common/thirdparty/base/animations/slideUp', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/types/AnimationMode', 'sap/ui/webc/common/thirdparty/base/config/AnimationMode', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/icons/slim-arrow-right', './Button', './types/TitleLevel', './types/PanelAccessibleRole', './generated/templates/PanelTemplate.lit', './generated/i18n/i18n-defaults', './generated/themes/Panel.css'], function (UI5Element, litRender, slideDown, slideUp, Keys, AnimationMode$1, AnimationMode, i18nBundle, slimArrowRight, Button, TitleLevel, PanelAccessibleRole, PanelTemplate_lit, i18nDefaults, Panel_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/animations/slideDown', 'sap/ui/webc/common/thirdparty/base/animations/slideUp', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/types/AnimationMode', 'sap/ui/webc/common/thirdparty/base/config/AnimationMode', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/icons/slim-arrow-right', './Button', './Icon', './types/TitleLevel', './types/PanelAccessibleRole', './generated/templates/PanelTemplate.lit', './generated/i18n/i18n-defaults', './generated/themes/Panel.css'], function (UI5Element, litRender, slideDown, slideUp, Keys, AnimationMode$1, AnimationMode, i18nBundle, slimArrowRight, Button, Icon, TitleLevel, PanelAccessibleRole, PanelTemplate_lit, i18nDefaults, Panel_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -12,6 +12,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		tag: "ui5-panel",
 		languageAware: true,
 		managedSlots: true,
+		fastNavigation: true,
 		slots:  {
 			header: {
 				type: HTMLElement,
@@ -61,9 +62,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				type: Boolean,
 				noAttribute: true,
 			},
-			_buttonAccInfo: {
-				type: Object,
-			},
 		},
 		events:  {
 			toggle: {},
@@ -186,8 +184,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		get accInfo() {
 			return {
 				"button": {
-					"ariaExpanded": this.expanded,
-					"ariaControls": `${this._id}-content`,
+					"accessibilityAttributes": {
+						"expanded": this.expanded,
+						"controls": `${this._id}-content`,
+					},
 					"title": this.toggleButtonTitle,
 					"ariaLabelButton": !this.nonFocusableButton && this.useAccessibleNameForToggleButton ? this.effectiveAccessibleName : undefined,
 				},
@@ -226,7 +226,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			};
 		}
 		static get dependencies() {
-			return [Button];
+			return [Button, Icon];
 		}
 		static async onDefine() {
 			Panel.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");