feat(ui5-view-settings-dialog): provide part for header (#12627)

fixes: #12479

Author: tsanislavgatev

packages/fiori/src/ViewSettingsDialog.ts

@@ -114,6 +114,7 @@ type VSDInternalSettings = {
  * @extends UI5Element
  * @since 1.0.0-rc.16
  * @public
+ * @csspart header - Used to style the header.
  */
 @customElement({
 	tag: "ui5-view-settings-dialog",

packages/fiori/src/ViewSettingsDialogTemplate.tsx

@@ -16,7 +16,7 @@ import type ViewSettingsDialog from "./ViewSettingsDialog.js";
 function ViewSettingsDialogTemplateHeader(this: ViewSettingsDialog) {
 	return (
 		<div slot="header" class="ui5-vsd-header">
-			<div class="ui5-vsd-header-container">
+			<div class="ui5-vsd-header-container" part="header">
 				<div class="ui5-vsd-header-start">
 					{this.showBackButton && (
 						<Button

packages/fiori/test/pages/ViewSettingsDialog.html

@@ -12,6 +12,12 @@
 		}
 	</script>
 
+	<style>
+		#vsd::part(header) {
+			--sapButton_Lite_TextColor: pink;
+		}
+	</style>
+
 	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
 
 <link rel="stylesheet" type="text/css" href="./styles/ViewSettingsDialog.css">