@ui5/webcomponents 0.0.0-4e00e5559 → 0.0.0-4e88b8243

package/src/themes/Menu.css

@@ -0,0 +1,48 @@
+
+.ui5-menu-rp[ui5-responsive-popover]::part(header),
+.ui5-menu-rp[ui5-responsive-popover]::part(content),
+.ui5-menu-rp[ui5-responsive-popover]::part(footer) {
+	padding: 0;
+}
+
+.ui5-menu-rp[ui5-responsive-popover] {
+	box-shadow: var(--sapContent_Shadow1);
+	border-radius: var(--_ui5_menu_popover_border_radius);
+}
+
+.ui5-menu-busy-indicator {
+	width: 100%;
+}
+
+.ui5-menu-dialog-header {
+	display: flex;
+	height: var(--_ui5-responsive_popover_header_height);
+	align-items: center;
+	justify-content: space-between;
+	padding: 0px 1rem;
+	width: 100%;
+	overflow: hidden;
+}
+
+.ui5-menu-dialog-title {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	width: calc(100% - 6.5rem);
+	padding-right: 1rem;
+	font-family: var(--sapFontHeaderFamily);
+}
+
+.ui5-menu-dialog-title > h1 {
+	display: inline-block;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: var(--sapFontHeader5Size);
+}
+
+.ui5-menu-back-button {
+	margin-right: 1rem;
+}

package/src/themes/MenuItem.css

@@ -0,0 +1,118 @@
+@import "./Menu.css";
+
+.ui5-menu-rp.ui5-menu-rp-sub-menu {
+	margin-top: 0.25rem;
+	margin-inline: var(--_ui5_menu_submenu_margin_offset);
+}
+
+.ui5-menu-rp.ui5-menu-rp-sub-menu[actual-placement="Start"] {
+	margin-top: 0.25rem;
+	margin-inline: var(--_ui5_menu_submenu_placement_type_left_margin_offset);
+}
+
+:host([disabled]) {
+	pointer-events: initial;
+	opacity: initial;
+}
+
+:host([disabled])::part(content) {
+	opacity: var(--_ui5-listitembase_disabled_opacity);
+}
+
+/* hovered and active */
+:host([disabled][actionable]:not([active]):not([selected]):hover),
+:host([disabled][active][actionable]) {
+	background: var(--ui5-listitem-background-color);
+}
+
+:host([active]:not([disabled])),
+:host([active]:not([disabled])):hover {
+	background-color: var(--sapList_Active_Background);
+}
+
+:host(:not([active]):not([selected]):not([disabled]):hover) {
+	background-color: var(--sapList_Hover_Background);
+}
+
+/* active */
+:host([disabled][active][actionable]) .ui5-li-root .ui5-li-icon {
+	color: var(--sapContent_NonInteractiveIconColor);
+}
+
+:host([active]:not([disabled]))::part(content),
+:host([active]:not([disabled]))::part(additional-text),
+:host([active]:not([disabled])) .ui5-li-root .ui5-li-icon {
+	color: var(--sapList_Active_TextColor);
+}
+
+:host([focused]:not([active]):not([disabled])) {
+	background-color: var(--sapList_Hover_Background);
+}
+
+:host(:not([is-phone]))::part(native-li) {
+	padding: var(--_ui5_menu_item_padding);
+}
+
+:host::part(additional-text) {
+	margin: unset;
+	margin-inline-start: 1rem;
+	color: var(--sapContent_LabelColor);
+	min-width: max-content;
+}
+
+.ui5-menu-item-text {
+	width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	pointer-events: none;
+	display: inline-block;
+}
+
+.ui5-menu-item-dummy-icon {
+	visibility: hidden;
+}
+
+:host::part(title) {
+	font-size: var(--sapFontSize);
+	padding-top: 0.125rem;
+}
+
+:host([icon]:not([is-phone]))::part(title),
+:host([is-phone]:not([icon=""]))::part(title) {
+	padding-top: 0;
+}
+
+:host(:not([is-phone]))::part(native-li) {
+	padding: var(--_ui5_menu_item_padding);
+}
+
+:host::part(content) {
+	padding-inline-end: 0.25rem;
+}
+
+.ui5-menu-item-submenu-icon {
+	min-width: var(--_ui5_list_item_icon_size);
+	min-height: var(--_ui5_list_item_icon_size);
+	display: inline-block;
+	vertical-align: middle;
+	pointer-events: none;
+}
+
+.ui5-menu-item-icon-end {
+	display: inline-block;
+	vertical-align: middle;
+	padding-inline-start: 0.5rem;
+	pointer-events: none;
+	position: absolute;
+	inset-inline-end: var(--_ui5_menu_item_submenu_icon_right);
+}
+
+.ui5-menu-item-dummy-icon {
+	min-width: var(--_ui5_list_item_icon_size);
+	min-height: var(--_ui5_list_item_icon_size);
+	display: inline-block;
+	vertical-align: middle;
+	padding-inline-end: 0.5rem;
+	pointer-events: none;
+}

package/src/themes/MenuSeparator.css

@@ -0,0 +1,11 @@
+:host {
+	border-top: 0.0625rem solid var(--sapGroup_ContentBorderColor);
+	min-height: 0.125rem;
+}
+
+.ui5-menu-separator {
+	border: inherit;
+	min-height: inherit;
+	background: inherit;
+	opacity: 1;
+}

package/src/themes/MessageStrip.css

@@ -0,0 +1,244 @@
+@import "./InvisibleTextStyles.css";
+
+:host(:not([hidden])) {
+	display: inline-block;
+	width: 100%;
+}
+
+/** Root classes **/
+.ui5-message-strip-root {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	border-radius: var(--sapPopover_BorderCornerRadius);
+	padding: var(--_ui5_message_strip_padding);
+	border-width: var(--_ui5_message_strip_border_width);
+	border-style: solid;
+	box-sizing: border-box;
+	position: relative;
+}
+
+.ui5-message-strip-root-hide-icon {
+	padding-inline: var(--_ui5_message_strip_padding_inline_no_icon);
+	padding-block: var(--_ui5_message_strip_padding_block_no_icon);
+}
+
+.ui5-message-strip-root-hide-close-button {
+	padding-inline-end: 1rem;
+}
+
+.ui5-message-strip-root--info {
+	background-color: var(--sapInformationBackground);
+	border-color: var(--sapMessage_InformationBorderColor);
+	color: var(--sapTextColor);
+}
+
+.ui5-message-strip-root--info .ui5-message-strip-icon {
+	color: var(--sapInformativeElementColor);
+}
+
+.ui5-message-strip-root--positive {
+	background-color: var(--sapSuccessBackground);
+	border-color: var(--sapMessage_SuccessBorderColor);
+}
+
+.ui5-message-strip-root--positive .ui5-message-strip-icon {
+	color: var(--sapPositiveElementColor);
+}
+
+.ui5-message-strip-root--negative {
+	background-color: var(--sapErrorBackground);
+	border-color: var(--sapMessage_ErrorBorderColor);
+}
+
+.ui5-message-strip-root--negative .ui5-message-strip-icon {
+	color: var(--sapNegativeElementColor);
+}
+
+.ui5-message-strip-root--critical {
+	background-color: var(--sapWarningBackground);
+	border-color: var(--sapMessage_WarningBorderColor);
+}
+
+.ui5-message-strip-root--critical .ui5-message-strip-icon {
+	color: var(--sapCriticalElementColor);
+}
+
+/** Icon wrapper **/
+.ui5-message-strip-icon-wrapper {
+	position: absolute;
+	top: var(--_ui5_message_strip_icon_top);
+	inset-inline-start: 0.75rem;
+	box-sizing: border-box;
+}
+
+/** Text **/
+.ui5-message-strip-text {
+	width: 100%;
+	color: var(--sapTextColor);
+	line-height: 1.2;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+}
+
+/** Close button - always in compact mode **/
+.ui5-message-strip-close-button {
+	height: 1.625rem;
+	min-height: 1.625rem;
+	position: absolute;
+	top: var(--_ui5_message_strip_close_button_top);
+	inset-inline-end: var(--_ui5_message_strip_close_button_right);
+}
+
+:host([color-scheme="1"]) .ui5-message-strip-root--color-set-1,
+:host(:not([color-scheme])[design="ColorSet1"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_1_Background);
+	border-color: var(--sapIndicationColor_1_BorderColor);
+}
+
+:host([color-scheme="2"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_2_Background);
+	border-color: var(--sapIndicationColor_2_BorderColor);
+}
+
+:host([color-scheme="3"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_3_Background);
+	border-color: var(--sapIndicationColor_3_BorderColor);
+}
+
+:host([color-scheme="4"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_4_Background);
+	border-color: var(--sapIndicationColor_4_BorderColor);
+}
+
+:host([color-scheme="5"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_5_Background);
+	border-color: var(--sapIndicationColor_5_BorderColor);
+}
+
+:host([color-scheme="6"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_6_Background);
+	border-color: var(--sapIndicationColor_6_BorderColor);
+}
+
+:host([color-scheme="7"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_7_Background);
+	border-color: var(--sapIndicationColor_7_BorderColor);
+}
+
+:host([color-scheme="8"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_8_Background);
+	border-color: var(--sapIndicationColor_8_BorderColor);
+}
+
+:host([color-scheme="9"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_9_Background);
+	border-color: var(--sapIndicationColor_9_BorderColor);
+}
+
+:host([color-scheme="10"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_10_Background);
+	border-color: var(--sapIndicationColor_10_BorderColor);
+}
+
+:host([color-scheme="1"]) .ui5-message-strip-root--color-set-2,
+:host(:not([color-scheme])[design="ColorSet2"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_1_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_1_set_2_border_color)
+}
+
+:host([color-scheme="2"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_2_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_2_set_2_border_color);
+}
+
+:host([color-scheme="3"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_3_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_3_set_2_border_color);
+}
+
+:host([color-scheme="4"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_4_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_4_set_2_border_color);
+}
+
+:host([color-scheme="5"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_5_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_5_set_2_border_color);
+}
+
+:host([color-scheme="6"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_6_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_6_set_2_border_color);
+}
+
+:host([color-scheme="7"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_7_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_7_set_2_border_color);
+}
+
+:host([color-scheme="8"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_8_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_8_set_2_border_color);
+}
+
+:host([color-scheme="9"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_9_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_9_set_2_border_color);
+}
+
+:host([color-scheme="10"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_10_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_10_set_2_border_color);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-root .ui5-message-strip-text {
+	color: var(--sapContent_ContrastTextColor);
+	text-shadow: var(--sapContent_ContrastTextShadow);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-root ::slotted([slot="icon"]){
+	color: var(--sapContent_ContrastIconColor);
+	text-shadow: var(--sapContent_ContrastTextShadow);
+}
+
+:host([design="ColorSet2"]) .ui5-message-strip-root .ui5-message-strip-text {
+	color: var(--sapTextColor);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-close-button {
+	color: var(--_ui5_message_strip_close_button_color_set_1_color);
+}
+
+:host([design="ColorSet2"]) .ui5-message-strip-close-button,
+:host([design="ColorSet2"]) .ui5-message-strip-root ::slotted([slot="icon"]) { 
+	color: var(--sapContent_IconColor);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-close-button:hover {
+	border-color: var(--sapContent_ContrastIconColor);
+	background-color: var(--_ui5_message_strip_close_button_color_set_1_background);
+	color: var(--_ui5_message_strip_close_button_color_set_1_hover_color);
+	text-shadow: var(--sapContent_ContrastTextShadow);
+}
+
+:host([design="ColorSet2"]) .ui5-message-strip-close-button:hover {
+	background-color: var(--_ui5_message_strip_close_button_color_set_2_background);
+	border-color: var(--sapContent_IconColor);
+	color: var(--sapContent_IconColor);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-close-button:active {
+	background: none;
+	border-color: var(--sapContent_ContrastIconColor);
+}
+
+:host([design="ColorSet2"]) .ui5-message-strip-close-button:active {
+	background: none;
+	border-color: var(--sapContent_IconColor);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-close-button::part(button):after,
+:host([design="ColorSet1"]) .ui5-message-strip-close-button::part(button):before {
+	border-color: var(--sapContent_ContrastFocusColor);
+}

package/src/themes/MonthPicker.css

@@ -0,0 +1,131 @@
+
+:host(:not([hidden])) {
+	display: block;
+}
+
+:host {
+	width: 100%;
+	height: 100%;
+}
+
+.ui5-mp-root {
+	box-sizing: border-box;
+	padding: 2rem 0 1rem 0;
+	display: flex;
+	flex-direction: column;
+	font-family: "72override", var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	justify-content: center;
+	align-items: center;
+}
+
+.ui5-mp-quarter {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+}
+
+.ui5-mp-item {
+	display: flex;
+	flex-direction: column;
+	width: calc(33.333% - 0.125rem);
+	height: var(--_ui5_month_picker_item_height);
+	color: var(--sapButton_Lite_TextColor);
+	background-color: var(--sapButton_Lite_Background);
+	align-items: center;
+	justify-content: center;
+	margin: var(--_ui5_monthpicker_item_margin);
+	box-sizing: border-box;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	cursor: default;
+	outline: none;
+	position: relative;
+	border: var(--_ui5_monthpicker_item_border);
+	border-radius: var(--_ui5_monthpicker_item_border_radius);
+}
+
+.ui5-dp-monthsectext {
+	font-size: 0.75rem;
+	color: var(--sapNeutralElementColor);
+}
+
+.ui5-mp-item.ui5-mp-item--selected,
+.ui5-mp-item.ui5-mp-item--selected-between {
+	background: var(--sapButton_Selected_Background);
+	border: var(--_ui5_monthpicker_item_selected_border);
+	color: var(--sapButton_Selected_TextColor);
+}
+
+.ui5-mp-item.ui5-mp-item--selected .ui5-dp-monthsectext,
+.ui5-mp-item.ui5-mp-item--selected-between .ui5-dp-monthsectext {
+	color: var(--sapButton_Selected_TextColor);
+}
+
+.ui5-mp-item:hover {
+	background: var(--sapButton_Lite_Hover_Background);
+	border: var(--_ui5_monthpicker_item_hover_border);
+	color: var(--sapButton_Lite_Hover_TextColor);
+}
+
+.ui5-mp-item.ui5-mp-item--selected:hover,
+.ui5-mp-item.ui5-mp-item--selected-between:hover {
+	background: var(--sapButton_Selected_Hover_Background);
+	border: var(--_ui5_monthpicker_item_selected_hover_border);
+	color: var(--sapButton_Selected_TextColor);
+}
+
+.ui5-mp-item.ui5-mp-item--selected:hover .ui5-dp-monthsectext,
+.ui5-mp-item.ui5-mp-item--selected-between:hover .ui5-dp-monthsectext {
+	color: var(--sapButton_Selected_TextColor);
+}
+
+.ui5-mp-item:active,
+.ui5-mp-item.ui5-mp-item--selected:active,
+.ui5-mp-item.ui5-mp-item--selected-between:active {
+	background: var(--sapButton_Active_Background);
+	border: var(--_ui5_monthpicker_item_active_border);
+	color: var(--sapButton_Active_TextColor);
+}
+
+.ui5-mp-item:active .ui5-dp-monthsectext,
+.ui5-mp-item.ui5-mp-item--selected:active .ui5-dp-monthsectext,
+.ui5-mp-item.ui5-mp-item--selected-between:active .ui5-dp-monthsectext {
+	color: var(--sapButton_Active_TextColor);
+}
+
+.ui5-mp-item.ui5-mp-item--disabled {
+	pointer-events: none;
+	opacity: 0.5;
+}
+
+.ui5-mp-item:focus::after {
+	content: "";
+	position: absolute;
+	inset: 0.0625rem;
+	border: var(--_ui5_button_focused_border);
+	border-radius: var(--_ui5_button_focused_border_radius);
+}
+
+/* Switching to a two column layout */
+:host([secondary-calendar-type="Persian"]:not([primary-calendar-type="Persian"])) .ui5-mp-root,
+:host([secondary-calendar-type="Islamic"]:not([primary-calendar-type="Islamic"])) .ui5-mp-root {
+	display: grid;
+	padding: 0.5625rem 0;
+	grid-template-columns: repeat(2, 1fr);
+	gap: var(--_ui5_monthpicker_item_margin);
+}
+
+:host([secondary-calendar-type="Persian"]:not([primary-calendar-type="Persian"])) .ui5-mp-item,
+:host([secondary-calendar-type="Islamic"]:not([primary-calendar-type="Islamic"])) .ui5-mp-item {
+	margin: 0;
+	width: auto;
+}
+
+:host([secondary-calendar-type="Persian"]:not([primary-calendar-type="Persian"])) .ui5-mp-quarter,
+:host([secondary-calendar-type="Islamic"]:not([primary-calendar-type="Islamic"])) .ui5-mp-quarter {
+	width: 100%;
+	display: contents;
+}

package/src/themes/MultiComboBox.css

@@ -0,0 +1,57 @@
+@import "./FormComponents.css";
+@import "./Input.css";
+@import "./InputIcon.css";
+@import "./InvisibleTextStyles.css";
+
+:host {
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)));
+}
+
+:host([tokenizer-available]) {
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width));
+}
+
+:host(:not([hidden])) {
+	display: inline-block;
+}
+
+.ui5-multi-combobox-root {
+	display: flex;
+	overflow: hidden;
+	width: 100%;
+	height: 100%;
+	border-radius: var(--_ui5_input_border_radius);
+}
+
+.ui5-multi-combobox-tokenizer {
+	min-width: var(--_ui5_input_tokenizer_min_width);
+	max-width: calc(100% - 3rem - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
+	border: none;
+	width: auto;
+	height: 100%;
+}
+
+:host([readonly]) .ui5-multi-combobox-tokenizer::part(n-more-text) {
+	color: var(--sapLinkColor);
+}
+
+:host([disabled]) .ui5-multi-combobox-tokenizer {
+	opacity: 100%;
+}
+
+.ui5-multi-combobox-tokenizer::part(n-more-text) {
+	padding-inline-end: var(--_ui5_input_inner_space_to_n_more_text);
+}
+
+[inner-input][inner-input-with-icon] {
+	padding: var(--_ui5_input_inner_padding_with_icon);
+}
+
+:host([tokenizer-available]) [inner-input] {
+	padding-inline-start: var(--_ui5_input_inner_space_to_tokenizer);
+}
+
+:host(:not([tokenizer-available])) .ui5-multi-combobox-tokenizer {
+	--_ui5_input_tokenizer_min_width: 0px;
+	width: var(--_ui5_input_tokenizer_min_width);
+}

package/src/themes/MultiComboBoxItem.css

@@ -0,0 +1,19 @@
+:host([ui5-mcb-item]) {
+	height: auto;
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-mcb-item]) .ui5-li-root {
+	padding-inline-start: 0;
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-mcb-item]) .ui5-li-content {
+	padding-bottom: .875rem;
+	padding-top: .875rem;
+	box-sizing: border-box;
+}
+
+:host([ui5-mcb-item]) [ui5-checkbox] {
+	overflow: visible;
+}

package/src/themes/MultiComboBoxPopover.css

@@ -0,0 +1,38 @@
+.ui5-suggestions-popover .ui5-multi-combobox-all-items-list {
+	--_ui5_checkbox_width_height: var(--_ui5_list_item_dropdown_base_height);
+}
+
+.ui5-mcb-select-all-header {
+	width: 100%;
+	height: 44px;
+	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+	display: flex;
+	align-items: center;
+	font-family: "72override", var(--sapFontFamily);
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	background: var(--sapPageHeader_Background);
+}
+
+.ui5-mcb-select-all-checkbox {
+	width: 100%;
+	font-family: var(--sapFontBoldFamily);
+}
+
+.ui5-mcb-select-all-checkbox::part(root):focus::before {
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	border-radius: 0;
+	right: 2px;
+	left: 2px;
+	bottom: 0;
+	top: 0;
+}
+
+.ui5-mcb-select-all-checkbox::part(label) {
+	font-family: var(--sapFontBoldFamily);
+}
+
+:host([readonly]) ::slotted([ui5-mcb-item]) {
+	cursor: auto;
+}

package/src/themes/MultiInput.css

@@ -0,0 +1,38 @@
+@import "./InputIcon.css";
+
+:host {
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)));
+}
+
+:host([tokenizer-available]) {
+	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width));
+}
+
+.ui5-multi-input-tokenizer {
+	min-width: var(--_ui5_input_tokenizer_min_width);
+	max-width: calc(100% - 3rem - var(--_ui5-input-icons-count) * var(--_ui5_input_icon_min_width));
+	border: none;
+	width: auto;
+	height: 100%;
+}
+
+:host([readonly]) .ui5-multi-input-tokenizer::part(n-more-text) {
+	color: var(--sapLinkColor);
+}
+
+.ui5-multi-input-tokenizer::part(n-more-text) {
+	padding-inline-end: var(--_ui5_input_inner_space_to_n_more_text);
+}
+
+[inner-input][inner-input-with-icon] {
+	padding: var(--_ui5_input_inner_padding_with_icon);
+}
+
+:host([tokenizer-available]) [inner-input] {
+	padding-inline-start: var(--_ui5_input_inner_space_to_tokenizer);
+}
+
+:host(:not([tokenizer-available])) .ui5-multi-input-tokenizer {
+	--_ui5_input_tokenizer_min_width: 0px;
+	width: var(--_ui5_input_tokenizer_min_width);
+}