Merge https://gitee.com/openharmony/docs into pr_20070

CODEOWNERS

@@ -129,11 +129,38 @@ zh-cn/device-dev/subsystems/subsys-toolchain-bytrace-guide.md @Austin23
 zh-cn/device-dev/subsystems/subsys-toolchain-hdc-guide.md @Austin23
 zh-cn/device-dev/subsystems/subsys-toolchain-hiperf.md @Austin23
 zh-cn/device-dev/subsystems/subsys-xts-guide.md @Austin23
-
+zh-cn/application-dev/quick-start/arkts-get-started.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-basic-syntax-overview.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-declarative-ui-description.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-create-custom-components.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-page-custom-components-lifecycle.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-builder.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-builderparam.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-style.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-extend.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-statestyles.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-state-management-overview.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-state.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-prop.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-link.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-provide-and-consume.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-observed-and-objectlink.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-application-state-management-overview.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-localstorage.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-appstorage.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-persiststorage.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-environment.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-other-state-mgmt-functions-overview.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-watch.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-two-way-sync.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-rendering-control-overview.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-rendering-control-ifelse.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-rendering-control-foreach.md @HelloCrease @tomatodevboy @s10021109
+zh-cn/application-dev/quick-start/arkts-rendering-control-lazyforeach.md @HelloCrease @tomatodevboy @s10021109
 zh-cn/application-dev/ability/ @RayShih @littlejerry1 @gwang2008 @ccllee @chengxingzhen
 zh-cn/application-dev/IDL/ @RayShih @littlejerry1 @gwang2008 @ccllee @chengxingzhen
 zh-cn/application-dev/device-usage-statistics/ @chenmingJay @ningningW @tangtiantian2021 @nan-xiansen @iceice1001
-zh-cn/application-dev/ui/ @HelloCrease @huaweimaxuchu @tomatodevboy @niulihua
+zh-cn/application-dev/ui/ @HelloCrease @tomatodevboy @niulihua
 zh-cn/application-dev/notification/ @RayShih @jayleehw @li-weifeng2 @currydavids
 zh-cn/application-dev/windowmanager/ @ge-yafang @zhangqiang183  @zhouyaoying @zxg-gitee @nobuggers
 zh-cn/application-dev/webgl/ @zengyawen @zhangqiang183  @wind_zj @zxg-gitee
@@ -208,8 +235,8 @@ zh-cn/application-dev/device/vibrator-overview.md @ningningW @hellohyh001 @butte
 zh-cn/application-dev/device/vibrator-guidelines.md @ningningW @hellohyh001 @butterls @star-wind-snow-and-rain
 zh-cn/application-dev/device/sample-server-overview.md @ningningW @hughes802 @zhangzhengxue @mamba-ting
 zh-cn/application-dev/device/sample-server-guidelines.md @ningningW @hughes802 @zhangzhengxue @mamba-ting
-zh-cn/application-dev/reference/arkui-js/ @HelloCrease @huaweimaxuchu @niulihua @tomatodevboy
-zh-cn/application-dev/reference/arkui-ts/ @HelloCrease @huaweimaxuchu @niulihua @tomatodevboy
+zh-cn/application-dev/reference/arkui-js/ @HelloCrease @niulihua @tomatodevboy
+zh-cn/application-dev/reference/arkui-ts/ @HelloCrease @niulihua @tomatodevboy
 zh-cn/application-dev/reference/native-lib @zengyawen @gongjunsong @liwentao_uiw @BlackStone
 zh-cn/application-dev/quick-start/start-overview.md @ge-yafang
 zh-cn/application-dev/quick-start/start-with-ets-stage.md @ge-yafang
@@ -241,7 +268,7 @@ zh-cn/application-dev/quick-start/arkts-state-mgmt-application-level.md @gaoyong
 zh-cn/application-dev/quick-start/arkts-dynamic-ui-elememt-building.md @gaoyong @niejiteng @jumozhanjiang @HelloCrease
 zh-cn/application-dev/quick-start/arkts-rendering-control.md @gaoyong @niejiteng @jumozhanjiang @HelloCrease
 zh-cn/application-dev/quick-start/arkts-restrictions-and-extensions.md @gaoyong @niejiteng @jumozhanjiang @HelloCrease
-zh-cn/application-dev/napi/napi-guidelines.md @RayShih @huaweimaxuchu @niulihua @tomatodevboy
+zh-cn/application-dev/napi/napi-guidelines.md @RayShih @niulihua @tomatodevboy
 zh-cn/application-dev/napi/drawing-guidelines.md @zengyawen @zhangqiang183  @wind_zj @zxg-gitee
 zh-cn/application-dev/napi/rawfile-guidelines.md @ningningW @Buda-Liu @budda-wang @yangqing3
 zh-cn/application-dev/reference/js-service-widget-ui/ @HelloCrease
@@ -258,7 +285,7 @@ zh-cn/application-dev/reference/apis/js-apis-abilityDelegatorRegistry.md @little
 zh-cn/application-dev/reference/apis/js-apis-abilityrunninginfo.md @littlejerry1 @RayShih @gwang2008 @chengxingzhen
 zh-cn/application-dev/reference/apis/js-apis-abilitystagecontext.md @littlejerry1 @RayShih @gwang2008 @chengxingzhen
 zh-cn/application-dev/reference/apis/js-apis-accessibility-extension-context.md @mupceet @RayShih @mupceet @gaoxi785
-zh-cn/application-dev/reference/apis/js-apis-animator.md @huaweimaxuchu @HelloCrease @niulihua @tomatodevboy
+zh-cn/application-dev/reference/apis/js-apis-animator.md @HelloCrease @niulihua @tomatodevboy
 zh-cn/application-dev/reference/apis/js-apis-appAccount.md @nianCode @zengyawen @JiDong-CS @murphy1984
 zh-cn/application-dev/reference/apis/js-apis-application-ability.md @littlejerry1 @RayShih @gwang2008 @chengxingzhen
 zh-cn/application-dev/reference/apis/js-apis-application-abilityConstant.md @littlejerry1 @RayShih @gwang2008 @chengxingzhen
@@ -393,7 +420,7 @@ zh-cn/application-dev/reference/apis/js-apis-list.md @gongjunsong @ge-yafang @fl
 zh-cn/application-dev/reference/apis/js-apis-logs.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
 zh-cn/application-dev/reference/apis/js-apis-media.md @liuyuehua1 @zengyawen @xxb-wzy @currydavids
 zh-cn/application-dev/reference/apis/js-apis-medialibrary.md @panqinxu @zengyawen @bubble_mao @jinhaihw
-zh-cn/application-dev/reference/apis/js-apis-mediaquery.md @huaweimaxuchu @HelloCrease @niulihua @tomatodevboy
+zh-cn/application-dev/reference/apis/js-apis-mediaquery.md @HelloCrease @niulihua @tomatodevboy
 zh-cn/application-dev/reference/apis/js-apis-missionManager.md @littlejerry1 @RayShih @gwang2008 @chengxingzhen
 zh-cn/application-dev/reference/apis/js-apis-mouseevent.md @yuanxinying @ningningW @cococoler @alien0208
 zh-cn/application-dev/reference/apis/js-apis-net-connection.md @zhang-hai-feng @zengyawen @jyh926 @gaoxi785
@@ -412,13 +439,13 @@ zh-cn/application-dev/reference/apis/js-apis-privacyManager.md @nianCode @zengya
 zh-cn/application-dev/reference/apis/js-apis-process.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
 zh-cn/application-dev/reference/apis/js-apis-processrunninginfo.md @littlejerry1 @RayShih @gwang2008 @chengxingzhen
 zh-cn/application-dev/reference/apis/js-apis-processrunninginformation.md @littlejerry1 @RayShih @gwang2008 @chengxingzhen
-zh-cn/application-dev/reference/apis/js-apis-prompt.md @huaweimaxuchu @HelloCrease @niulihua @tomatodevboy
+zh-cn/application-dev/reference/apis/js-apis-prompt.md @HelloCrease @niulihua @tomatodevboy
 zh-cn/application-dev/reference/apis/js-apis-queue.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
 zh-cn/application-dev/reference/apis/js-apis-radio.md @zhang-hai-feng @zengyawen @jyh926 @gaoxi785
 zh-cn/application-dev/reference/apis/js-apis-reminderAgent.md @jayleehw @RayShih @li-weifeng2 @currydavids
 zh-cn/application-dev/reference/apis/js-apis-request.md @feng-aiwen @ningningW @nagexiucai @murphy1984
 zh-cn/application-dev/reference/apis/js-apis-resource-manager.md @Buda-Liu @ningningW @mengjingzhimo @yangqing3
-zh-cn/application-dev/reference/apis/js-apis-router.md @huaweimaxuchu @HelloCrease @niulihua @tomatodevboy
+zh-cn/application-dev/reference/apis/js-apis-router.md @HelloCrease @niulihua @tomatodevboy
 zh-cn/application-dev/reference/apis/js-apis-rpc.md @xuepianpian @RayShih @zhaopeng_gitee @vagrant_world
 zh-cn/application-dev/reference/apis/js-apis-runninglock.md @aqxyjay @zengyawen @aqxyjay @alien0208
 zh-cn/application-dev/reference/apis/js-apis-screen.md @zhangqiang183  @ge-yafang @zhouyaoying @zxg-gitee @nobuggers
@@ -427,14 +454,14 @@ zh-cn/application-dev/reference/apis/js-apis-securityLabel.md @panqinxu @zengyaw
 zh-cn/application-dev/reference/apis/js-apis-sensor.md @hellohyh001 @ningningW @butterls @star-wind-snow-and-rain
 zh-cn/application-dev/reference/apis/js-apis-service-extension-ability.md @littlejerry1 @RayShih @gwang2008 @chengxingzhen
 zh-cn/application-dev/reference/apis/js-apis-service-extension-context.md @littlejerry1 @RayShih @gwang2008 @chengxingzhen
-zh-cn/application-dev/reference/apis/js-apis-settings.md @tetex @ge-yafang @cnzhaoxiaohu @anning7
+zh-cn/application-dev/reference/apis/js-apis-settings.md @xue-seu @ge-yafang
 zh-cn/application-dev/reference/apis/js-apis-sim.md @zhang-hai-feng @zengyawen @jyh926 @gaoxi785
 zh-cn/application-dev/reference/apis/js-apis-sms.md @zhang-hai-feng @zengyawen @jyh926 @gaoxi785
 zh-cn/application-dev/reference/apis/js-apis-socket.md @zhang-hai-feng @zengyawen @jyh926 @gaoxi785
 zh-cn/application-dev/reference/apis/js-apis-stack.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
 zh-cn/application-dev/reference/apis/js-apis-statfs.md @panqinxu @zengyawen @bubble_mao @jinhaihw
 zh-cn/application-dev/reference/apis/js-apis-storage-statistics.md @panqinxu @zengyawen @bubble_mao @jinhaihw
-zh-cn/application-dev/reference/apis/js-apis-system-app.md @huaweimaxuchu @HelloCrease @niulihua @tomatodevboy
+zh-cn/application-dev/reference/apis/js-apis-system-app.md @HelloCrease @niulihua @tomatodevboy
 zh-cn/application-dev/reference/apis/js-apis-system-battery.md @aqxyjay @zengyawen @aqxyjay @alien0208
 zh-cn/application-dev/reference/apis/js-apis-system-bluetooth.md @cheng_guohong @RayShih @cheng_guohong @quanli125
 zh-cn/application-dev/reference/apis/js-apis-system-brightness.md @aqxyjay @zengyawen @aqxyjay @alien0208
@@ -445,14 +472,14 @@ zh-cn/application-dev/reference/apis/js-apis-system-device.md @mupceet @zengyawe
 zh-cn/application-dev/reference/apis/js-apis-system-fetch.md @zhang-hai-feng @zengyawen @jyh926 @gaoxi785
 zh-cn/application-dev/reference/apis/js-apis-system-file.md @panqinxu @zengyawen @bubble_mao @jinhaihw
 zh-cn/application-dev/reference/apis/js-apis-system-location.md @cheng_guohong @RayShih @cheng_guohong @xiangkejin123
-zh-cn/application-dev/reference/apis/js-apis-system-mediaquery.md @huaweimaxuchu @HelloCrease @niulihua @tomatodevboy
+zh-cn/application-dev/reference/apis/js-apis-system-mediaquery.md @HelloCrease @niulihua @tomatodevboy
 zh-cn/application-dev/reference/apis/js-apis-system-network.md @zhang-hai-feng @zengyawen @jyh926 @gaoxi785
 zh-cn/application-dev/reference/apis/js-apis-system-notification.md @jayleehw @RayShih @li-weifeng2 @currydavids
 zh-cn/application-dev/reference/apis/js-apis-system-package.md @shuaytao @RayShih @wangzhen107 @inter515
 zh-cn/application-dev/reference/apis/js-apis-system-parameter.md @mupceet @zengyawen @handyohos @nan-xiansen
-zh-cn/application-dev/reference/apis/js-apis-system-prompt.md @huaweimaxuchu @HelloCrease @niulihua @tomatodevboy
+zh-cn/application-dev/reference/apis/js-apis-system-prompt.md @HelloCrease @niulihua @tomatodevboy
 zh-cn/application-dev/reference/apis/js-apis-system-request.md @zhang-hai-feng @zengyawen @jyh926 @gaoxi785
-zh-cn/application-dev/reference/apis/js-apis-system-router.md @huaweimaxuchu @HelloCrease @niulihua @tomatodevboy
+zh-cn/application-dev/reference/apis/js-apis-system-router.md @HelloCrease @niulihua @tomatodevboy
 zh-cn/application-dev/reference/apis/js-apis-system-sensor.md @hellohyh001 @ningningW @butterls @star-wind-snow-and-rain
 zh-cn/application-dev/reference/apis/js-apis-system-storage.md @feng-aiwen @ge-yafang @gong-a-shi @logic42
 zh-cn/application-dev/reference/apis/js-apis-system-time.md @feng-aiwen @ningningW @illybyy @murphy1984
@@ -534,7 +561,7 @@ zh-cn/application-dev/reference/apis/js-apis-configPolicy.md @liuzuming @ningnin
 zh-cn/application-dev/reference/apis/js-apis-cooperate.md @yuanxinying @ningningW @cococoler @alien0208
 zh-cn/application-dev/reference/apis/js-apis-cryptoFramework.md @gaoyong @zengyawen @niejiteng @jumozhanjiang
 zh-cn/application-dev/reference/apis/js-apis-cert.md @gaoyong @zengyawen @niejiteng @jumozhanjiang
-zh-cn/application-dev/reference/apis/js-apis-curve.md @huaweimaxuchu @HelloCrease @niulihua @tomatodevboy
+zh-cn/application-dev/reference/apis/js-apis-curve.md @HelloCrease @niulihua @tomatodevboy
 zh-cn/application-dev/reference/apis/js-apis-defaultAppManager.md @shuaytao @RayShih @wangzhen107 @inter515
 zh-cn/application-dev/reference/apis/js-apis-distributedBundle.md @shuaytao @RayShih @wangzhen107 @inter515
 zh-cn/application-dev/reference/apis/js-apis-distributedKVStore.md @feng-aiwen @ge-yafang @gong-a-shi @logic42
@@ -555,11 +582,11 @@ zh-cn/application-dev/reference/apis/js-apis-hiviewdfx-hiappevent.md @stone2050
 zh-cn/application-dev/reference/apis/js-apis-inputmethod-subtype.md @feng-aiwen @ningningW @SuperShrimp @murphy1984
 zh-cn/application-dev/reference/apis/js-apis-installer.md @shuaytao @RayShih @wangzhen107 @inter515
 zh-cn/application-dev/reference/apis/js-apis-launcherBundleManager.md @shuaytao @RayShih @wangzhen107 @inter515
-zh-cn/application-dev/reference/apis/js-apis-matrix4.md @huaweimaxuchu @HelloCrease @niulihua @tomatodevboy
+zh-cn/application-dev/reference/apis/js-apis-matrix4.md @HelloCrease @niulihua @tomatodevboy
 zh-cn/application-dev/reference/apis/js-apis-net-ethernet.md @zhang-hai-feng @zengyawen @jyh926 @gaoxi785
 zh-cn/application-dev/reference/apis/js-apis-net-sharing.md @zhang-hai-feng @zengyawen @jyh926 @gaoxi785
 zh-cn/application-dev/reference/apis/js-apis-nfctech.md @cheng_guohong @RayShih @cheng_guohong @quanli125
-zh-cn/application-dev/reference/apis/js-apis-promptAction.md @huaweimaxuchu @HelloCrease @niulihua @tomatodevboy
+zh-cn/application-dev/reference/apis/js-apis-promptAction.md @HelloCrease @niulihua @tomatodevboy
 zh-cn/application-dev/reference/apis/js-apis-reminderAgentManager.md @chenmingJay @ningningW @nan-xiansen @iceice1001
 zh-cn/application-dev/reference/apis/js-apis-resourceschedule-deviceStandby.md @chenmingJay @ningningW @nan-xiansen @iceice1001
 zh-cn/application-dev/reference/apis/js-apis-resourceschedule-backgroundTaskManager.md @chenmingJay @ningningW @nan-xiansen @iceice1001
@@ -572,7 +599,12 @@ zh-cn/application-dev/reference/apis/js-apis-system-parameterV9.md @mupceet @zen
 zh-cn/application-dev/reference/apis/js-apis-tagSession.md @cheng_guohong @RayShih @cheng_guohong @quanli125
 zh-cn/application-dev/reference/apis/js-apis-userFileManager.md @panqinxu @zengyawen @bubble_mao @jinhaihw
 zh-cn/application-dev/reference/apis/js-apis-useriam-faceauth.md @gaoyong @zengyawen @niejiteng @jumozhanjiang
-
+zh-cn/application-dev/reference/apis/js-apis-arkui-componentSnapshot.md @HelloCrease @niulihua @tomatodevboy
+zh-cn/application-dev/reference/apis/js-apis-arkui-drawableDescriptor.md @HelloCrease @niulihua @tomatodevboy
+zh-cn/application-dev/reference/apis/js-apis-arkui-UIContext.md @HelloCrease @niulihua @tomatodevboy
+zh-cn/application-dev/reference/apis/js-apis-font.md @HelloCrease @niulihua @tomatodevboy
+zh-cn/application-dev/reference/apis/js-apis-plugincomponent.md @HelloCrease @niulihua @tomatodevboy
+zh-cn/application-dev/reference/apis/js-apis-uiappearance.md @HelloCrease @niulihua @tomatodevboy
 zh-cn/application-dev/reference/errorcodes/errorcode-ability.md @RayShih
 zh-cn/application-dev/reference/errorcodes/errorcode-access-token.md @zengyawen
 zh-cn/application-dev/reference/errorcodes/errorcode-accessibility.md @RayShih

en/application-dev/application-models/arkts-ui-widget-update-by-status.md

 # Updating Widget Content by State
 
+There are cases where multiple copies of the same widget are added to the home screen to accommodate different needs. In these cases, the widget content needs to be dynamically updated based on the state. This topic exemplifies how this is implemented.
 
-There are cases where multiple copies of the same widget are added to the home screen to accommodate different needs. In these cases, the widget content needs to be dynamically updated based on the state. This topic exemplifies how this is implemented. In the following example, two weather widgets are added to the home screen: one for displaying the weather of London, and the other Beijing, both configured to be updated at 07:00 every morning. The widget provider detects the target city, and then displays the city-specific weather information on the widgets.
+In the following example, two copies of the weather widget are added to the home screen: one for displaying the weather of London, and the other Beijing, both configured to be updated at 07:00 every morning. The widget provider detects the target city, and then displays the city-specific weather information on the widgets.
 
 
 - Widget configuration file: Configure the widget to be updated at 07:00 every morning.
@@ -94,7 +95,7 @@ There are cases where multiple copies of the same widget are added to the home s
   import formProvider from '@ohos.app.form.formProvider';
   import formBindingData from '@ohos.app.form.formBindingData';
   import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
-  import dataStorage from '@ohos.data.storage'
+  import dataPreferences from '@ohos.data.preferences';
   
   export default class EntryFormAbility extends FormExtensionAbility {
     onAddForm(want) {
@@ -102,10 +103,10 @@ There are cases where multiple copies of the same widget are added to the home s
       let isTempCard: boolean = want.parameters[formInfo.FormParam.TEMPORARY_KEY];
       if (isTempCard === false) {// If the widget is a normal one, the widget information is persisted.
         console.info('Not temp card, init db for:' + formId);
-        let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
-        storeDB.putSync('A' + formId, 'false');
-        storeDB.putSync('B' + formId, 'false');
-        storeDB.flushSync();
+        let storeDB = dataPreferences.getPreferences(this.context, 'mystore')
+        storeDB.put('A' + formId, 'false');
+        storeDB.put('B' + formId, 'false');
+        storeDB.flush();
       }
       let formData = {};
       return formBindingData.createFormBindingData(formData);
@@ -113,24 +114,24 @@ There are cases where multiple copies of the same widget are added to the home s
   
     onRemoveForm(formId) {
       console.info('onRemoveForm, formId:' + formId);
-      let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
-      storeDB.deleteSync('A' + formId);
-      storeDB.deleteSync('B' + formId);
+      let storeDB = dataPreferences.getPreferences(this.context, 'mystore')
+      storeDB.delete('A' + formId);
+      storeDB.delete('B' + formId);
     }
   
     // If the widget is a temporary one, it is recommended that the widget information be persisted when the widget is converted to a normal one.
     onCastToNormalForm(formId) {
       console.info('onCastToNormalForm, formId:' + formId);
-      let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
-      storeDB.putSync('A' + formId, 'false');
-      storeDB.putSync('B' + formId, 'false');
-      storeDB.flushSync();
+      let storeDB = dataPreferences.getPreferences(this.context, 'myStore')
+      storeDB.put('A' + formId, 'false');
+      storeDB.put('B' + formId, 'false');
+      storeDB.flush();
     }
   
     onUpdateForm(formId) {
-      let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
-      let stateA = storeDB.getSync('A' + formId, 'false').toString()
-      let stateB = storeDB.getSync('B' + formId, 'false').toString()
+      let storeDB = dataPreferences.getPreferences(this.context, 'myStore')
+      let stateA = storeDB.get('A' + formId, 'false').toString()
+      let stateB = storeDB.get('B' + formId, 'false').toString()
       // Update textA in state A.
       if (stateA === 'true') {
         let formInfo = formBindingData.createFormBindingData({
@@ -150,17 +151,17 @@ There are cases where multiple copies of the same widget are added to the home s
     onFormEvent(formId, message) {
       // Store the widget state.
       console.info('onFormEvent formId:' + formId + 'msg:' + message);
-      let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
+      let storeDB = dataPreferences.getPreferences(this.context, 'myStore')
       let msg = JSON.parse(message)
       if (msg.selectA != undefined) {
         console.info('onFormEvent selectA info:' + msg.selectA);
-        storeDB.putSync('A' + formId, msg.selectA);
+        storeDB.put('A' + formId, msg.selectA);
       }
       if (msg.selectB != undefined) {
         console.info('onFormEvent selectB info:' + msg.selectB);
-        storeDB.putSync('B' + formId, msg.selectB);
+        storeDB.put('B' + formId, msg.selectB);
       }
-      storeDB.flushSync();
+      storeDB.flush();
     }
   };
   ```
@@ -168,4 +169,4 @@ There are cases where multiple copies of the same widget are added to the home s
 
 > **NOTE**
 >
-> When the local database is used for widget information persistence, it is recommended that [TEMPORARY_KEY](../reference/apis/js-apis-app-form-formInfo.md#formparam) be used to determine whether the currently added widget is a normal one in the [onAddForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onaddform) lifecycle callback. If the widget is a normal one, the widget information is directly persisted. If the widget is a temporary one, the widget information is persisted when the widget is converted to a normal one ([onCastToNormalForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#oncasttonormalform)). In addition, the persistent widget information needs to be deleted when the widget is destroyed ([onRemoveForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onremoveform)), preventing the database size from continuously increasing due to repeated widget addition and deletion.
+> When the local database is used for widget information persistence, it is recommended that [TEMPORARY_KEY](../reference/apis/js-apis-app-form-formInfo.md#formparam) be used in the [onAddForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onaddform) lifecycle callback to determine whether the currently added widget is a normal one. If the widget is a normal one, the widget information is directly persisted. If the widget is a temporary one, the widget information is persisted when the widget is converted to a normal one ([onCastToNormalForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#oncasttonormalform)). In addition, the persistent widget information needs to be deleted when the widget is destroyed ([onRemoveForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onremoveform)), preventing the database size from continuously increasing due to repeated widget addition and deletion.

en/application-dev/faqs/Readme-EN.md

@@ -3,7 +3,7 @@
 - [Full SDK Compilation](full-sdk-compile-guide.md)
 - [Switching to Full SDK](full-sdk-switch-guide.md)
 - [Application Model Development](faqs-ability.md)
-- ArkUI Framework Development (ArkTS)
+- ArkUI Development (ArkTS)
   - [ArkTS Syntax Usage](faqs-arkui-arkts.md)
   - [ArkUI Component Development (ArkTS)](faqs-arkui-component.md)
   - [ArkUI Layout Development (ArkTS)](faqs-arkui-layout.md)

en/application-dev/file-management/app-sandbox-directory.md

@@ -47,12 +47,12 @@ The following figure shows the application file directories. The path of a file
 3. Level 3 directories **el1/** and **el2/**: indicate directories for files of different encryption levels (els).
    - **el1**: directory for the data that can be accessed once the device starts. This directory contains device-focused files.
    - **el2**: directory for the data that can be accessed only after at lease one successful unlocking operation (by PIN, fingerprint, or facial authentication, or password-free sign-in) upon the start of the device. This directory contains user-focused files.<br>
-   Unless otherwise required, application data is placed in the **el2** directory for security purposes. However, the data that needs to be accessed before the screen is unlocked (such as the clock, alarm, and wallpaper data) can be placed in the **el1** directory. For details about how to switch to and modify the **el** directories, see [Obtaining and Modifying el Directories](../application-models/application-context-stage.md#obtaining-and-modifying-encryption-areas).
+   Unless otherwise required, application data is placed in the **el2** directory for security purposes. However, the data that needs to be accessed before the screen is unlocked (such as the clock, alarm, and wallpaper data) can be placed in the **el1** directory. For details about how to switch to and modify the **el** directories, see [Obtaining and Modifying el Directories](../application-models/application-context-stage.md#obtaining-and-modifying-encryption-levels).
 
 4. Level 4 and level 5 directories:
    The application's global data is stored in the **files**, **cache**, **preferences**, **temp**, and **distributedfiles** folders in **base**. You can use **ApplicationContext** to obtain the application file paths of these folders.
 
-   You can use **UIAbilityContext**, **AbilityStageContext**, and **ExtensionContext** to obtain application file paths related to the OpenHarmoy Ability Package (HAP). When the HAP is uninstalled, the files stored in these directories are automatically deleted, without affecting the files in app-level directories. An application in the development state contains one or more HAPs. For details, see [Application Package Structure in Stage Mode](../quick-start/application-package-structure-stage.md).
+   You can use **UIAbilityContext**, **AbilityStageContext**, and **ExtensionContext** to obtain application file paths related to the OpenHarmony Ability Package (HAP). When the HAP is uninstalled, the files stored in these directories are automatically deleted, without affecting the files in app-level directories. An application in the development state contains one or more HAPs. For details, see [Application Package Structure in Stage Mode](../quick-start/application-package-structure-stage.md).
 
    For details about how to obtain the context and application file paths, see [Context (Stage Model)](../application-models/application-context-stage.md).
 

en/application-dev/reference/apis/js-apis-font.md

@@ -5,6 +5,8 @@ The **font** module provides APIs for registering custom fonts.
 > **NOTE**
 >
 > The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
+>
+> The APIs provided by this module are system APIs.
 
 ## Modules to Import
 
@@ -62,3 +64,104 @@ struct FontExample {
   }
 }
 ```
+## font.getSystemFontList
+
+getSystemFontList(): Array\<string>
+
+Obtains the list of supported fonts.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Return value**
+
+| Type                | Description              |
+| -------------------- | ----------------- |
+| Array\<string>       | List of supported fonts. |
+
+## Example
+
+```ts
+// xxx.ets
+import font from '@ohos.font';
+
+@Entry
+@Component
+struct FontExample {
+  fontList: Array<string>;
+  build() {
+    Column() {
+      Button("getSystemFontList")
+        .width('60%')
+        .height('6%')
+        .onClick(()=>{
+          this.fontList = font.getSystemFontList()
+        })
+    }.width('100%')
+  }
+}
+```
+
+## font.getFontByName
+
+getFontByName(fontName: string): FontInfo;
+
+Obtains information about a system font based on the font name.
+
+**System capability**: SystemCapability.ArkUI.ArkUI.Full
+
+**Parameters**
+
+| Name     | Type     | Mandatory   | Description         |
+| ---------- | --------- | ------- | ------------ |
+| fontName   | string    | Yes     | System font name.|
+
+**Return value**
+
+| Type            | Description                         |
+| ---------------- | ---------------------------- |
+| FontInfo         | Information about the system font.                |
+
+## FontInfo
+
+| Name           | Type   | Description                      |
+| -------------- | ------- | ------------------------- |
+| path           | string  | File path of the system font.       |
+| postScriptName | string  | PostScript name of the system font.|
+| fullName       | string  | Name of the system font.          |
+| family         | string  | Family of the system font.      |
+| subfamily      | string  | Subfamily of the system font.     |
+| weight         | number  | Weight of the system font.       |
+| width          | number  | Width of the system font.   |
+| italic         | boolean | Whether the system font is italic.         |
+| monoSpace      | boolean | Whether the system font is monospaced.        |
+| symbolic       | boolean | Whether the system font supports symbols. |
+
+```ts
+// xxx.ets
+import font from '@ohos.font';
+
+@Entry
+@Component
+struct FontExample {
+  fontList: Array<string>;
+  fontInfo: font.FontInfo;
+  build() {
+    Column() {
+      Button("getFontByName")
+        .onClick(() => {
+          this.fontInfo = font.getFontByName('HarmonyOS Sans Italic')
+          console.log("getFontByName(): path = " + this.fontInfo.path)
+          console.log("getFontByName(): postScriptName = " + this.fontInfo.postScriptName)
+          console.log("getFontByName(): fullName = " + this.fontInfo.fullName)
+          console.log("getFontByName(): Family = " + this.fontInfo.family)
+          console.log("getFontByName(): Subfamily = " + this.fontInfo.subfamily)
+          console.log("getFontByName(): weight = " + this.fontInfo.weight)
+          console.log("getFontByName(): width = " + this.fontInfo.width)
+          console.log("getFontByName(): italic = " + this.fontInfo.italic)
+          console.log("getFontByName(): monoSpace = " + this.fontInfo.monoSpace)
+          console.log("getFontByName(): symbolic = " + this.fontInfo.symbolic)
+        })
+    }.width('100%')
+  }
+}
+```

en/application-dev/reference/apis/js-apis-nfcTag.md

@@ -41,8 +41,10 @@ Before developing applications related to tag read and write, you must declare N
             }
         ],
         "requestPermissions": [
-            "name": "ohos.permission.NFC_TAG",
-            "reason": "tag",
+            {
+                "name": "ohos.permission.NFC_TAG",
+                "reason": "tag",
+            }
         ]
     }
 }

en/application-dev/reference/apis/js-apis-webview.md

@@ -63,42 +63,6 @@ struct WebComponent {
 
 Implements a **WebMessagePort** object to send and receive messages.
 
-### close
-
-close(): void
-
-Closes this message port.
-
-**System capability**: SystemCapability.Web.Webview.Core
-
-**Example**
-
-```ts
-// xxx.ets
-import web_webview from '@ohos.web.webview'
-
-@Entry
-@Component
-struct WebComponent {
-  controller: web_webview.WebviewController = new web_webview.WebviewController();
-  msgPort: web_webview.WebMessagePort[] = null;
-
-  build() {
-    Column() {
-      Button('close')
-        .onClick(() => {
-          if (this.msgPort && this.msgPort[1]) {
-            this.msgPort[1].close();
-          } else {
-            console.error("msgPort is null, Please initialize first");
-          }
-        })
-      Web({ src: 'www.example.com', controller: this.controller })
-    }
-  }
-}
-```
-
 ### postMessageEvent
 
 postMessageEvent(message: WebMessage): void
@@ -364,6 +328,7 @@ struct WebComponent {
 }
 ```
 
+HTML file to be loaded:
 ```html
 <!--index.html-->
 <!DOCTYPE html>
@@ -448,6 +413,56 @@ function postStringToApp() {
 }
 ```
 
+### close
+
+close(): void
+
+Closes this message port. To use this API, a message port must first be created using [createWebMessagePorts](#createwebmessageports).
+
+**System capability**: SystemCapability.Web.Webview.Core
+
+**Example**
+
+```ts
+// xxx.ets
+import web_webview from '@ohos.web.webview'
+
+@Entry
+@Component
+struct WebComponent {
+  controller: web_webview.WebviewController = new web_webview.WebviewController();
+  msgPort: web_webview.WebMessagePort[] = null;
+
+  build() {
+    Column() {
+      // Use createWebMessagePorts to create a message port.
+      Button('createWebMessagePorts')
+        .onClick(() => {
+          try {
+            this.msgPort = this.controller.createWebMessagePorts();
+            console.log("createWebMessagePorts size:" + this.msgPort.length)
+          } catch (error) {
+            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
+          }
+        })
+      Button('close')
+        .onClick(() => {
+          try {
+            if (this.msgPort && this.msgPort.length == 2) {
+              this.msgPort[1].close();
+            } else {
+              console.error("msgPort is null, Please initialize first");
+            }
+          } catch (error) {
+            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
+          }      
+        })
+      Web({ src: 'www.example.com', controller: this.controller })
+    }
+  }
+}
+```
+
 ## WebviewController
 
 Implements a **WebviewController** to control the behavior of the **\<Web>** component. A **WebviewController** can control only one **\<Web>** component, and the APIs (except static APIs) in the **WebviewController** can be invoked only after it has been bound to the target **\<Web>** component.
@@ -473,7 +488,6 @@ export default class EntryAbility extends UIAbility {
     onCreate(want, launchParam) {
         console.log("EntryAbility onCreate")
         web_webview.WebviewController.initializeWebEngine()
-        globalThis.abilityWant = want
         console.log("EntryAbility onCreate done")
     }
 }
@@ -516,30 +530,11 @@ export default class EntryAbility extends UIAbility {
 }
 ```
 
-### Creating an Object
-
-```ts
-// xxx.ets
-import web_webview from '@ohos.web.webview';
-
-@Entry
-@Component
-struct WebComponent {
-  controller: web_webview.WebviewController = new web_webview.WebviewController();
-
-  build() {
-    Column() {
-      Web({ src: 'www.example.com', controller: this.controller })
-    }
-  }
-}
-```
-
 ### setWebDebuggingAccess
 
 static setWebDebuggingAccess(webDebuggingAccess: boolean): void
 
-Sets whether to enable web debugging.
+Sets whether to enable web debugging. For details, see [Debugging Frontend Pages by Using DevTools](../../web/web-debugging-with-devtools.md).
 
 **System capability**: SystemCapability.Web.Webview.Core
 
@@ -656,70 +651,73 @@ struct WebComponent {
 ```
 
 There are three methods for loading local resource files:
-1. Using $rawfile
-```ts
-// xxx.ets
-import web_webview from '@ohos.web.webview'
 
-@Entry
-@Component
-struct WebComponent {
-  controller: web_webview.WebviewController = new web_webview.WebviewController();
+1. Using $rawfile
+   ```ts
+   // xxx.ets
+   import web_webview from '@ohos.web.webview'
+
+   @Entry
+   @Component
+   struct WebComponent {
+     controller: web_webview.WebviewController = new web_webview.WebviewController();
+
+     build() {
+       Column() {
+         Button('loadUrl')
+           .onClick(() => {
+             try {
+               // Load a local resource file through $rawfile.
+               this.controller.loadUrl($rawfile('index.html'));
+             } catch (error) {
+               console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
+             }
+           })
+         Web({ src: 'www.example.com', controller: this.controller })
+       }
+     }
+   }
+   ```
 
-  build() {
-    Column() {
-      Button('loadUrl')
-        .onClick(() => {
-          try {
-            // Load a local resource file through $rawfile.
-            this.controller.loadUrl($rawfile('xxx.html'));
-          } catch (error) {
-            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
-          }
-        })
-      Web({ src: 'www.example.com', controller: this.controller })
-    }
-  }
-}
-```
 2. Using the resources protocol
-```ts
-// xxx.ets
-import web_webview from '@ohos.web.webview'
-
-@Entry
-@Component
-struct WebComponent {
-  controller: web_webview.WebviewController = new web_webview.WebviewController();
-
-  build() {
-    Column() {
-      Button('loadUrl')
-        .onClick(() => {
-          try {
-            // Load a local resource file through the resource protocol.
-            this.controller.loadUrl("resource://rawfile/xxx.html");
-          } catch (error) {
-            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
-          }
-        })
-      Web({ src: 'www.example.com', controller: this.controller })
-    }
-  }
-}
-```
+   ```ts
+   // xxx.ets
+   import web_webview from '@ohos.web.webview'
+
+   @Entry
+   @Component
+   struct WebComponent {
+     controller: web_webview.WebviewController = new web_webview.WebviewController();
+
+     build() {
+       Column() {
+         Button('loadUrl')
+           .onClick(() => {
+             try {
+               // Load a local resource file through the resource protocol.
+               this.controller.loadUrl("resource://rawfile/index.html");
+             } catch (error) {
+               console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
+             }
+           })
+         Web({ src: 'www.example.com', controller: this.controller })
+       }
+     }
+   }
+   ```
 
 3. Using a sandbox path. For details, see the example of loading local resource files in the sandbox in [Web](../arkui-ts/ts-basic-components-web.md#web).
 
-```html
-<!-- xxx.html -->
-<!DOCTYPE html>
-<html>
-  <body>
-    <p>Hello World</p>
-  </body>
-</html>
-```
+   HTML file to be loaded:
+   ```html
+   <!-- index.html -->
+   <!DOCTYPE html>
+   <html>
+     <body>
+       <p>Hello World</p>
+     </body>
+   </html>
+   ```
 
 ### loadData
 
@@ -1343,6 +1341,24 @@ struct Index {
 }
 ```
 
+HTML file to be loaded:
+```html
+<!-- index.html -->
+<!DOCTYPE html>
+<html>
+    <meta charset="utf-8">
+    <body>
+        Hello world!
+    </body>
+    <script type="text/javascript">
+    function htmlTest() {
+        str = objName.test("test function")
+        console.log('objName.test result:'+ str)
+    }
+</script>
+</html>
+```
+
 ### runJavaScript
 
 runJavaScript(script: string, callback : AsyncCallback\<string>): void
@@ -1406,6 +1422,24 @@ struct WebComponent {
 }
 ```
 
+HTML file to be loaded:
+```html
+<!-- index.html -->
+<!DOCTYPE html>
+<html>
+  <meta charset="utf-8">
+  <body>
+      Hello world!
+  </body>
+  <script type="text/javascript">
+  function test() {
+      console.log('Ark WebComponent')
+      return "This value is from index.html"
+  }
+  </script>
+</html>
+```
+
 ### runJavaScript
 
 runJavaScript(script: string): Promise\<string>
@@ -1444,11 +1478,9 @@ import web_webview from '@ohos.web.webview'
 @Component
 struct WebComponent {
   controller: web_webview.WebviewController = new web_webview.WebviewController();
-  @State webResult: string = '';
 
   build() {
     Column() {
-      Text(this.webResult).fontSize(20)
       Web({ src: $rawfile('index.html'), controller: this.controller })
         .javaScriptAccess(true)
         .onPageEnd(e => {
@@ -1470,6 +1502,23 @@ struct WebComponent {
 }
 ```
 
+HTML file to be loaded:
+```html
+<!-- index.html -->
+<!DOCTYPE html>
+<html>
+  <meta charset="utf-8">
+  <body>
+      Hello world!
+  </body>
+  <script type="text/javascript">
+  function test() {
+      console.log('Ark WebComponent')
+      return "This value is from index.html"
+  }
+  </script>
+</html>
+```
 
 ### runJavaScriptExt<sup>10+</sup>
 
@@ -1569,8 +1618,11 @@ struct WebComponent {
     }
   }
 }
+```
 
-//index.html
+HTML file to be loaded:
+```html
+<!-- index.html -->
 <!DOCTYPE html>
 <html lang="en-gb">
 <body>
@@ -1681,8 +1733,11 @@ struct WebComponent {
     }
   }
 }
+```
 
-//index.html
+HTML file to be loaded:
+```html
+<!-- index.html -->
 <!DOCTYPE html>
 <html lang="en-gb">
 <body>
@@ -2178,14 +2233,15 @@ struct WebComponent {
             console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
           }
         })
-      Web({ src: $rawfile('xxx.html'), controller: this.controller })
+      Web({ src: $rawfile('index.html'), controller: this.controller })
     }
   }
 }
 ```
 
+HTML file to be loaded:
 ```html
-<!--xxx.html-->
+<!--index.html-->
 <!DOCTYPE html>
 <html>
 <head>
@@ -2973,14 +3029,15 @@ struct WebComponent {
             console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
           }
         })
-      Web({ src: 'www.example.com', controller: this.controller })
+      Web({ src: $rawfile('index.html'), controller: this.controller })
     }
   }
 }
 ```
 
+HTML file to be loaded:
 ```html
-<!--xxx.html-->
+<!--index.html-->
 <!DOCTYPE html>
 <html>
 <head>
@@ -3045,14 +3102,15 @@ struct WebComponent {
             console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
           }
         })
-      Web({ src: 'www.example.com', controller: this.controller })
+      Web({ src: $rawfile('index.html'), controller: this.controller })
     }
   }
 }
 ```
 
+HTML file to be loaded:
 ```html
-<!--xxx.html-->
+<!--index.html-->
 <!DOCTYPE html>
 <html>
 <head>
@@ -3117,14 +3175,15 @@ struct WebComponent {
             console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
           }
         })
-      Web({ src: 'www.example.com', controller: this.controller })
+      Web({ src: $rawfile('index.html'), controller: this.controller })
     }
   }
 }
 ```
 
+HTML file to be loaded:
 ```html
-<!--xxx.html-->
+<!--index.html-->
 <!DOCTYPE html>
 <html>
 <head>
@@ -3640,7 +3699,7 @@ struct WebComponent {
         .onClick(() => {
           try {
             let state = this.controller.serializeWebState();
-            // Obtain the value of globalThis.cacheDir from MainAbility.ts.
+            // globalThis.cacheDir is obtained from EntryAbility.ts.
             let path = globalThis.cacheDir;
             path += '/WebState';
             // Synchronously open a file.
@@ -3657,14 +3716,14 @@ struct WebComponent {
 }
 ```
 
-2. Modify **MainAbility.ts**.
+2. Modify the **EntryAbility.ts** file.
 Obtain the path of the application cache file.
 ```ts
 // xxx.ts
 import UIAbility from '@ohos.app.ability.UIAbility';
 import web_webview from '@ohos.web.webview';
 
-export default class MainAbility extends UIAbility {
+export default class EntryAbility extends UIAbility {
     onCreate(want, launchParam) {
         // Bind cacheDir to the globalThis object to implement data synchronization between the UIAbility component and the page.
         globalThis.cacheDir = this.context.cacheDir;
@@ -3712,7 +3771,7 @@ struct WebComponent {
       Button('RestoreWebState')
         .onClick(() => {
           try {
-            // Obtain the value of globalThis.cacheDir from MainAbility.ts.
+            // globalThis.cacheDir is obtained from EntryAbility.ts.
             let path = globalThis.cacheDir;
             path += '/WebState';
             // Synchronously open a file.
@@ -3739,14 +3798,14 @@ struct WebComponent {
 }
 ```
 
-2. Modify **MainAbility.ts**.
+2. Modify the **EntryAbility.ts** file.
 Obtain the path of the application cache file.
 ```ts
 // xxx.ts
 import UIAbility from '@ohos.app.ability.UIAbility';
 import web_webview from '@ohos.web.webview';
 
-export default class MainAbility extends UIAbility {
+export default class EntryAbility extends UIAbility {
     onCreate(want, launchParam) {
         // Bind cacheDir to the globalThis object to implement data synchronization between the UIAbility component and the page.
         globalThis.cacheDir = this.context.cacheDir;
@@ -6230,6 +6289,9 @@ Describes the mode in which the **\<Web>** component uses HTTPDNS.
 
 | Name         | Value| Description                                     |
 | ------------- | -- |----------------------------------------- |
-| Off           | 0 |HTTPDNS is not used. This value can be used to revoke the previously used HTTPDNS configuration.|
-| Auto          | 1 |HTTPDNS is used in automatic mode. When the specified HTTPDNS server is unavailable for resolution, the component will fall back to the system DNS server.|
-| SecureOnly    | 2 |The specified HTTPDNS server is forcibly used for DNS resolution.|
+| Off<sup>(deprecated)</sup>           | 0 |HTTPDNS is not used. This value can be used to revoke the previously used HTTPDNS configuration.<br>This API is deprecated since API version 10. You are advised to use **OFF** instead.|
+| Auto<sup>(deprecated)</sup>          | 1 |HTTPDNS is used in automatic mode. When the specified HTTPDNS server is unavailable for resolution, the component will fall back to the system DNS server.<br>This API is deprecated since API version 10. You are advised to use **AUTO** instead.|
+| SecureOnly<sup>(deprecated)</sup>    | 2 |The specified HTTPDNS server is forcibly used for DNS resolution.<br>This API is deprecated since API version 10. You are advised to use **SECURE_ONLY** instead.|
+| OFF                                  | 0 |HTTPDNS is not used. This value can be used to revoke the previously used HTTPDNS configuration.|
+| AUTO                                 | 1 |HTTPDNS is used in automatic mode. When the specified HTTPDNS server is unavailable for resolution, the component will fall back to the system DNS server.|
+| SECURE_ONLY                          | 2 |The specified HTTPDNS server is forcibly used for DNS resolution.|

en/application-dev/reference/arkui-ts/Readme-EN.md

@@ -12,7 +12,7 @@
     - [Mouse Event](ts-universal-mouse-key.md)
     - [Component Area Change Event](ts-universal-component-area-change-event.md)
     - [Visible Area Change Event](ts-universal-component-visible-area-change-event.md)
-    - [Custom Keyboard Shortcuts](ts-universal-events-keyboardshortcut.md)
+    - [Component Keyboard Shortcut Event](ts-universal-events-keyboardshortcut.md)
   - Universal Attributes
     - [Size](ts-universal-attributes-size.md)
     - [Location](ts-universal-attributes-location.md)
@@ -43,7 +43,7 @@
     - Touch Interactions
       - [Touch Target](ts-universal-attributes-touch-target.md)
       - [Hit Test Control](ts-universal-attributes-hit-test-behavior.md)
-    - Touch Interactions
+    - Transition
       - [Modal Transition](ts-universal-attributes-modal-transition.md)
       - [Sheet Transition](ts-universal-attributes-sheet-transition.md)
     - [Obscuring](ts-universal-attributes-obscured.md)

en/application-dev/reference/arkui-ts/ts-appendix-enums.md

@@ -557,3 +557,10 @@ This API is supported in ArkTS widgets.
 | LIGHT  | Small area (light)| Spring effect, with stiffness of 410, damping of 38, and initial velocity of 1.| 90% |
 | MIDDLE | Medium area (stable)| Spring effect, with stiffness of 350, damping of 35, and initial velocity of 0.5.| 95% |
 | HEAVY  | Large area (heavy)| Spring effect, with stiffness of 240, damping of 28, and initial velocity of 0.| 95% |
+
+## TextContentStyle<sup>10+</sup>
+
+| Name   | Description                                                        |
+| ------- | ------------------------------------------------------------ |
+| DEFAULT | Default style. The caret width is fixed at 1.5 vp, and the caret height is subject to the background height and font size of the selected text.|
+| INLINE  | Inline input style. The background height of the selected text is the same as the height of the text box.            |

en/application-dev/reference/arkui-ts/ts-basic-components-image.md

@@ -21,7 +21,7 @@ Not supported
 
 Image(src: PixelMap | ResourceStr | DrawableDescriptor)
 
-Obtains an image from the specified source for subsequent rendering and display.
+Obtains an image from the specified source for subsequent rendering and display. If the **\<Image>** component fails to obtain the image or the obtained image size is 0, the **\<Image>** component is automatically resized to 0 and does not follow the layout constraints of its parent component.
 
 Since API version 9, this API is supported in ArkTS widgets.
 
@@ -29,7 +29,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 | Name | Type                                    | Mandatory  | Description                                    |
 | ---- | ---------------------------------------- | ---- | ---------------------------------------- |
-| src  |  [PixelMap](../apis/js-apis-image.md#pixelmap7) \| ResourceStr\| [DrawableDescriptor](../apis/js-apis-arkui-drawableDescriptor.md#drawabledescriptor) | Yes   | Image source. Both local and online images are supported.<br>When using an image referenced using a relative path, for example, **Image("common/test.jpg")**, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use **\$r** to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.<br/>\- Strings with the **datashare://** prefix are supported, which are used to access the image path provided by a Data ability.<br/>\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the current application. Ensure that the application has the read permission to the files in the specified path.<br/>\- [DrawableDescriptor](../apis/js-apis-arkui-drawableDescriptor.md#drawabledescriptor) objects are supported.<br/>- For details, see [Displaying Images](../../ui/arkts-graphics-display.md).<br/>**NOTE**<br/>- ArkTS widgets support GIF animations, but the animations only play once on display.<br/>- ArkTS widgets do not support the strings with the **http://**, **datashare://**, or **file:///data/storage** prefix.<br>- ArkTS widgets do not support the [PixelMap](../apis/js-apis-image.md#pixelmap7) type.|
+| src  |  [PixelMap](../apis/js-apis-image.md#pixelmap7) \|ResourceStr\| [DrawableDescriptor](../apis/js-apis-arkui-drawableDescriptor.md#drawabledescriptor) | Yes   | Image source. Both local and online images are supported.<br>When using an image referenced using a relative path, for example, **Image("common/test.jpg")**, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use **\$r** to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.<br/>\- Strings with the **datashare://** prefix are supported, which are used to access the image path provided by a Data ability.<br/>\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the current application. Ensure that the application has the read permission to the files in the specified path.<br/>\- [DrawableDescriptor](../apis/js-apis-arkui-drawableDescriptor.md#drawabledescriptor) objects are supported.<br/>- For details, see [Displaying Images](../../ui/arkts-graphics-display.md).<br/>**NOTE**<br/>- ArkTS widgets support GIF animations, but the animations only play once on display.<br/>- ArkTS widgets do not support the strings with the **http://**, **datashare://**, or **file:///data/storage** prefix.<br>- ArkTS widgets do not support the [PixelMap](../apis/js-apis-image.md#pixelmap7) type.|
 
 ## Attributes
 
@@ -50,7 +50,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | syncLoad<sup>8+</sup>    | boolean                                  | Whether to load the image synchronously. By default, the image is loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
 | copyOption<sup>9+</sup>  | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether the image can be copied. (SVG images cannot be copied.)<br>When **copyOption** is set to a value other than **CopyOptions.None**, the image can be copied in various manners, such as long pressing, right-clicking, or pressing Ctrl+C.<br>Default value: **CopyOptions.None**<br>This API is supported in ArkTS widgets.|
 | colorFilter<sup>9+</sup> | [ColorFilter](ts-types.md#colorfilter9)  | Color filter of the image.<br>This API is supported in ArkTS widgets.      |
-| draggable<sup>9+</sup>   | boolean                                  | Whether the image is draggable. This attribute cannot be used together with the [onDragStart](ts-universal-events-drag-drop.md) event.<br>Default value: **false**<br>This API is supported in ArkTS widgets.|
+| draggable<sup>(deprecated)</sup>   | boolean                                  | Whether the image is draggable. This attribute cannot be used together with the [onDragStart](ts-universal-events-drag-drop.md) event.<br>Default value: **false**<br>This API is supported in ArkTS widgets.<br>**NOTE**<br>This API is supported since API version 8 and deprecated since API version 10. You are advised to use the universal attribute [draggable](ts-universal-events-drag-drop.md) instead.|
 
 >  **NOTE**
 >

en/application-dev/reference/arkui-ts/ts-basic-components-progress.md

 # Progress
 
-The **\<Progress>** component is used to provide a progress indicator that displays the progress of content loading or an operation.
+The **\<Progress>** component represents a progress indicator that displays the progress of content loading or an operation.
 
 >  **NOTE**
 >
@@ -22,47 +22,77 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **Parameters**
 
-| Name| Type| Mandatory| Description|
-| -------- | -------- | -------- | -------- |
-| value | number | Yes| Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| total | number | No| Total progress.<br>Default value: **100**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| type<sup>8+</sup> | [ProgressType](#progresstype) | No| Style the progress indicator.<br>Default value: **ProgressType.Linear**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| style<sup>deprecated</sup> | [ProgressStyle](#progressstyle) | No| Type of the progress indicator.<br>This parameter is deprecated since API version 8. You are advised to use **type** instead.<br>Default value: **ProgressStyle.Linear**|
+| Name                       | Type                               | Mandatory  | Description                                    |
+| -------------------------- | ----------------------------------- | ---- | ---------------------------------------- |
+| value                      | number                              | Yes   | Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| total                      | number                              | No   | Total progress.<br>Default value: **100**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| type<sup>8+</sup>          | [ProgressType](#progresstype)   | No   | Style of the progress indicator.<br>Default value: **ProgressType.Linear**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| style<sup>deprecated</sup> | [ProgressStyle](#progressstyle) | No   | Style of the progress indicator.<br>This parameter is deprecated since API version 8. You are advised to use **type** instead.<br>Default value: **ProgressStyle.Linear**|
 
 ## ProgressType
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name| Description|
-| -------- | -------- |
-| Linear | Linear type. Since API version 9, the progress indicator adaptively switches to vertical layout if the height is greater than the width.|
-| Ring<sup>8+</sup> | Indeterminate ring type. The ring fills up as the progress increases.|
-| Eclipse<sup>8+</sup> | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full.|
-| ScaleRing<sup>8+</sup> | Determinate ring type, which is similar to the clock scale. Since API version 9, when the outer circles of scales overlap, the progress indicator is automatically converted to the **Ring** type.|
-| Capsule<sup>8+</sup> | Capsule type. At both ends, the progress indicator works in a same manner as the eclipse type. In the middle part of the capsule, the progress indicator works in a same manner as the linear type. If the height is greater than the width, the progress indicator adaptively switches to vertical layout.|
+| Name                    | Description                                      |
+| ---------------------- | ---------------------------------------- |
+| Linear                 | Linear style. Since API version 9, the progress indicator adaptively switches to vertical layout if the height is greater than the width.  |
+| Ring<sup>8+</sup>      | Indeterminate ring style. The ring fills up as the progress increases.                |
+| Eclipse<sup>8+</sup>   | Eclipse style, which visualizes the progress in a way similar to the moon waxing from new to full.        |
+| ScaleRing<sup>8+</sup> | Determinate ring style, which is similar to the clock scale. Since API version 9, when the outer circles of scales overlap, the progress indicator is automatically converted to the **Ring** style.|
+| Capsule<sup>8+</sup>   | Capsule style. At both ends, the progress indicator works in a same manner as the eclipse style. In the middle part of the capsule, the progress indicator works in a same manner as the linear style. If the height is greater than the width, the progress indicator adaptively switches to vertical layout.|
 
 ##  ProgressStyle
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name     | Description                                                        |
-| --------- | ------------------------------------------------------------ |
-| Linear    | Linear type.|
-| Ring      | Indeterminate ring type. The ring fills up as the progress increases.|
-| Eclipse   | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full.|
-| ScaleRing | Determinate ring type, which is similar to the clock scale.|
-| Capsule   | Capsule type. At both ends, the progress indicator works in a same manner as the eclipse type. In the middle part of the capsule, the progress indicator works in a same manner as the linear type. If the height is greater than the width, the progress indicator adaptively switches to vertical layout.|
+| Name       | Description                                      |
+| --------- | ---------------------------------------- |
+| Linear    | Linear style.                                   |
+| Ring      | Indeterminate ring style. The ring fills up as the progress increases.                |
+| Eclipse   | Eclipse style, which visualizes the progress in a way similar to the moon waxing from new to full.        |
+| ScaleRing | Determinate ring style, which is similar to the clock scale.              |
+| Capsule   | Capsule style. At both ends, the progress indicator works in a same manner as the eclipse style. In the middle part of the capsule, the progress indicator works in a same manner as the linear style. If the height is greater than the width, the progress indicator adaptively switches to vertical layout.|
 
 ## Attributes
 
 In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
 
-| Name| Type| Description|
-| -------- | -------- | -------- |
-| value | number | Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used. Invalid values do not take effect.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| color | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.<br>Default value: **'\#ff007dff'**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.<br>Default value: **'\#19182431'**<br><br>Since API version 9, this API is supported in ArkTS widgets.|
-| style<sup>8+</sup> | {<br>strokeWidth?: [Length](ts-types.md#length),<br>scaleCount?: number,<br>scaleWidth?: [Length](ts-types.md#length)<br>} | Component style.<br>- **strokeWidth**: stroke width of the progress indicator. It cannot be set in percentage. Since API version 9, if the stroke width of the ring progress bar is greater than or equal to the radius, the width is changed to half of the radius.<br>Default value: **4.0Vp**<br>- **scaleCount**: number of divisions on the determinate ring-type process indicator.<br>Default value: **120**<br>- **scaleWidth**: scale width of the ring progress bar. It cannot be set in percentage. If it is greater than the value of **strokeWidth**, the default scale width is used.<br>Default value: **2.0Vp**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| Name              | Type                                                    | Description                                                        |
+| ------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| value              | number                                                       | Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used. Invalid values do not take effect.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| color              | [ResourceColor](ts-types.md#resourcecolor)    \| [LinearGradient<sup>10+</sup>](ts-basic-components-datapanel.md#lineargradient10) | Background color of the progress indicator. Since API version 10, this attribute can be set to **LinearGradient** for the **Ring** style.<br>Default value (API version 9): **'\#ff007dff'**<br>Default value (API version 10):<br>- Capsule: **'\#33006cde'**<br>- Ring: starting point: **'\#ff3b61f7'**, ending point: **'\#ff6591bf'**<br>- Other styles: **'\#ff007dff'**<br>Since API version 9, this API is supported in ArkTS widgets, except that **LinearGradient** is not supported.|
+| backgroundColor    | [ResourceColor](ts-types.md#resourcecolor)                   | Background color of the progress indicator.<br>Default value (API version 9): **'\#19182431'**<br>Default value (API version 10):<br>- Capsule: **'\#33ffffff'**<br>- Ring: **'\#08182431'**<br>- Other styles: **'\#19182431'**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>The settings of the universal attribute [backgroundColor](./ts-universal-attributes-background.md) applies to the progress indicator instead of the entire **\<Progress>** component.|
+| style<sup>8+</sup> | [ProgressStyleOptions](#progressstyleoptions) \| [CapsuleStyleOptions<sup>10+</sup>](#capsulestyleoptions10) \| [RingStyleOptions<sup>10+</sup>](#ringstyleoptions10) | Component style. Since API version 10, this attribute can be set to **CapsuleStyleOptions** or **RingStyleOptions**.<br>- **CapsuleStyleOptions** is available for the **Capsule** style.<br>- **RingStyleOptions** is available for the **Ring** style.<br>- **ProgressStyleOptions** is available for other styles.<br>Since API version 9, this API is supported in ArkTS widgets, except that **CapsuleStyleOptions** and **RingStyleOptions** are not supported.|
+
+## ProgressStyleOptions
+| Name         | Type                     | Mandatory| Description                                                                                       |
+| ------------ | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ |
+| strokeWidth  | [Length](ts-types.md#length) | No  | Stroke width of the progress indicator. It cannot be set in percentage.<br>Default value: **4.0Vp**                                           |
+| scaleCount   | number                       | No  | Number of divisions on the ring-style process indicator.<br>Default value: **120**                                                       |
+| scaleWidth   | [Length](ts-types.md#length) | No  | Scale width of the ring-style progress bar. It cannot be set in percentage. If it is greater than the value of **strokeWidth**, the default scale width is used.<br>Default value: **2.0Vp**|
+
+## CapsuleStyleOptions<sup>10+</sup>
+| Name         | Type| Mandatory| Description|
+| ------------- | ------- | ---- | -------- |
+| borderColor | [ResourceColor](ts-types.md#resourcecolor) | No| Border color.<br>Default value: **'\#33006cde'**|
+| borderWidth | [Length](ts-types.md#length) | No| Border width. It cannot be set in percentage.<br>Default value: **1 Vp**|
+| content | string | No| Text content, which can be customized .|
+| font | [Font](ts-types.md#font) | No| Text style.<br>Default value:<br>- Font size (cannot be set in percentage): **12Fp**<br>- Other attributes: following the settings of the **\<Text>** component.|
+| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No| Font color.<br>Default value: **'\#ff182431'**|
+| enableScanEffect | boolean | No| Whether to enable the scan effect.<br>Default value: **false**|
+
+## RingStyleOptions<sup>10+</sup>
+| Name          | Type                     | Mandatory| Description                                                                                       |
+| ------------- | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ |
+| strokeWidth   | [Length](ts-types.md#length) | No  | Stroke width of the progress indicator. It cannot be set in percentage. A value greater than or equal to the radius evaluates to half of the radius.<br>Default value: **4Vp**|
+| shadow        | boolean                      | No  | Whether to enable the shadow effect.<br>Default value: **false**                                                            |
+| status        | [ProgressStatus<sup>10+</sup>](#progressstatus10) | No| Status of the progress indicator. When this parameter is set to **LOADING**, the **value** settings do not take effect.<br>Default value: **ProgressStatus.PROGRESSING**|
+
+## ProgressStatus<sup>10+</sup>
+| Name                   | Description            |
+| ----------------------- | ---------------- |
+| LOADING<sup>10+</sup>  | Loading.|
+| PROGRESSING<sup>10+</sup>  | The progress is being updated.|
 
 ## Events
 
@@ -111,7 +141,7 @@ struct ProgressExample {
         Progress({ value: 10, type: ProgressType.Ring }).width(100)
         Progress({ value: 20, total: 150, type: ProgressType.Ring })
           .color(Color.Grey).value(50).width(100)
-          .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 20 })
+          .style({ strokeWidth: 20 })
       }
 
       Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
@@ -128,4 +158,4 @@ struct ProgressExample {
 }
 ```
 
-![progress](figures/progress.png)
+![progress](figures/arkts-progress.png)

en/application-dev/reference/arkui-ts/ts-basic-components-select.md

@@ -28,17 +28,18 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | Name                   | Type                             | Description                                         |
 | ----------------------- | ------------------------------------- | --------------------------------------------- |
 | selected                | number                                | Index of the initial selected option in the drop-down list box. The index of the first option is **0**.<br>If this attribute is not set, the default value **-1** is used, indicating that no option is selected.<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
-| value                   | string                                | Text of the drop-down button. By default, it will be replaced by the content of the selected option.<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
-| font                    | [Font](ts-types.md#font)          | Text font of the drop-down button.<br>Default value:<br>{<br>size:&nbsp;'16fp',<br>weight:&nbsp;FontWeight.Medium<br>} |
+| value                   | string                                | Text of the drop-down button. By default, it will be replaced by the content of the selected option.<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables. |
+| font                    | [Font](ts-types.md#font)          | Text font of the drop-down button.<br>Default value:<br>{<br>size: '16fp',<br>weight: FontWeight.Medium<br>} |
 | fontColor               | [ResourceColor](ts-types.md#resourcecolor) | Text color of the drop-down button.<br>Default value: **'\#E6FFFFFF'**|
 | selectedOptionBgColor   | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected option in the drop-down list box.<br>Default value: **'\#33007DFF'**|
-| selectedOptionFont      | [Font](ts-types.md#font)          | Text font of the selected option in the drop-down list box.<br>Default value:<br>{<br>size:&nbsp;'16fp',<br>weight:&nbsp;FontWeight.Regular<br>} |
+| selectedOptionFont      | [Font](ts-types.md#font)          | Text font of the selected option in the drop-down list box.<br>Default value:<br>{<br>size: '16fp',<br>weight: FontWeight.Regular<br>} |
 | selectedOptionFontColor | [ResourceColor](ts-types.md#resourcecolor) | Text color of the selected option in the drop-down list box.<br>Default value: **'\#ff007dff'**|
 | optionBgColor           | [ResourceColor](ts-types.md#resourcecolor) | Background color of an option in the drop-down list box.<br>Default value: **'\#ffffffff'**|
-| optionFont              | [Font](ts-types.md#font)          | Text font of an option in the drop-down list box.<br>Default value:<br>{<br>size:&nbsp;'16fp',<br>weight:&nbsp;FontWeight.Regular<br>} |
+| optionFont              | [Font](ts-types.md#font)          | Text font of an option in the drop-down list box.<br>Default value:<br>{<br>size: '16fp',<br>weight: FontWeight.Regular<br>} |
 | optionFontColor         | [ResourceColor](ts-types.md#resourcecolor) | Text color of an option in the drop-down list box.<br>Default value: **'\#ff182431'**|
 | space<sup>10+</sup>         | [Length](ts-types.md#length)               | Spacing between the text and arrow of an option.<br>**NOTE**<br>This attribute cannot be set in percentage.|
 | arrowPosition<sup>10+</sup> | [ArrowPosition](#arrowposition10)                  | Alignment between the text and arrow of an option.<br>Default value: **ArrowPosition.END**|
+| menuAlign<sup>10+</sup> | alignType: [MenuAlignType](#menualigntype10),<br> offset?: [Offset](ts-types.md#offset)    | Alignment between the drop-down button and the drop-down menu.<br> - **alignType**: alignment type. Mandatory.<br> - **offset**: offset of the drop-down menu relative to the drop-down button after alignment based on the specified alignment type.<br> Default value: **{dx: 0, dy: 0}**|
 
 ## ArrowPosition<sup>10+</sup>
 
@@ -47,11 +48,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | END<sup>10+</sup>   | The text is in front of the arrow.|
 | START<sup>10+</sup> | The arrow is in front of the text.|
 
+
+## MenuAlignType<sup>10+</sup>
+
+| Name               | Description              |
+| ------------------- | ------------------ |
+| START               | Aligned with the start edge in the same direction as the language in use.|
+| CENTER              | Aligned with the center.|
+| END                 | Aligned with the end edge in the same direction as the language in use.|
+
 ## Events
 
 | Name                                                        | Description                                                    |
 | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| onSelect(callback: (index: number, value?:&nbsp;string) => void) | Invoked when an option in the drop-down list box is selected.<br>**index**: index of the selected option.<br>**value**: value of the selected option.|
+| onSelect(callback: (index: number, value?: string) => void) | Invoked when an option in the drop-down list box is selected.<br>**index**: index of the selected option.<br>**value**: value of the selected option.|
 
 ##  Example
 

en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md

@@ -20,29 +20,32 @@ TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Tex
 
 | Name                    | Type                                    | Mandatory  | Description          |
 | ----------------------- | ---------------------------------------- | ---- | -------------- |
-| placeholder      | [ResourceStr](ts-types.md#resourcestr)  | No   | Placeholder text displayed when there is no input. It is not displayed once there is any input.    |
+| placeholder      | [ResourceStr](ts-types.md#resourcestr)  | No   | Placeholder text displayed when no text input is set.  <br>When only the **placeholder** attribute is set, the text selection handle is still available; and the caret moves back to the beginning of the placeholder text when the handle is released. |
 | text             | [ResourceStr](ts-types.md#resourcestr)  | No   | Current text input.<br>If the component has [stateStyles](ts-universal-attributes-polymorphic-style.md) or any other attribute that may trigger updating configured, you are advised to bind the state variable to the text in real time through the **onChange** event,<br>so as to prevent display errors when the component is updated.<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
 | controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | No   | Text area controller.|
 
 
 ## Attributes
 
-In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
-
-| Name                    | Type                                                    | Description                                                        |
-| ------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| placeholderColor         | [ResourceColor](ts-types.md#resourcecolor)                   | Placeholder text color.                                   |
-| placeholderFont          | [Font](ts-types.md#font)                                     | Placeholder text style, including the font size, font width, font family, and font style. Currently, only the default font family is supported.|
-| textAlign                | [TextAlign](ts-appendix-enums.md#textalign)                  | Horizontal alignment of the text.<br>Default value: **TextAlign.Start**|
-| caretColor               | [ResourceColor](ts-types.md#resourcecolor)                   | Color of the caret in the text box.                                        |
-| inputFilter<sup>8+</sup> | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>error?: (value: string) => void<br>} | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The specified regular expression can match single characters, but not strings.<br>- **value**: regular expression to set.<br>- **error**: filtered-out content to return when regular expression matching fails.|
-| copyOption<sup>9+</sup>  | [CopyOptions](ts-appendix-enums.md#copyoptions9)             | Whether copy and paste is allowed.<br>If this attribute is set to **CopyOptions.None**, the paste operation is allowed, but the copy and cut operations are not.|
+Among the [universal attributes](ts-universal-attributes-size.md) and [universal text attributes](ts-universal-attributes-text-style.md), **fontColor**, **fontSize**, **fontStyle**, **fontWeight**, and **fontFamily** are supported. In addition, the following attributes are supported.
+
+| Name                     | Type                                                    | Description                                                        |
+| ------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| placeholderColor          | [ResourceColor](ts-types.md#resourcecolor)                   | Placeholder text color.<br>The default value follows the theme.              |
+| placeholderFont           | [Font](ts-types.md#font)                                     | Placeholder text style, including the font size, font width, font family, and font style. Currently, only the default font family is supported.|
+| textAlign                 | [TextAlign](ts-appendix-enums.md#textalign)                  | Horizontal alignment of the text.<br>Default value: **TextAlign.Start**<br>**NOTE**<br>Available options are **TextAlign.Start**, **TextAlign.Center**, and **TextAlign.End**.<br>To set vertical alignment for the text, use the [align](ts-universal-attributes-location.md) attribute. The **align** attribute alone does not control the horizontal position of the text. In other words, **Alignment.TopStart**, **Alignment.Top**, and **Alignment.TopEnd** produce the same effect, top-aligning the text; **Alignment.Start**, **Alignment.Center**, and **Alignment.End** produce the same effect, centered-aligning the text vertically; **Alignment.BottomStart**, **Alignment.Bottom**, and **Alignment.BottomEnd** produce the same effect, bottom-aligning the text.|
+| caretColor                | [ResourceColor](ts-types.md#resourcecolor)                   | Color of the caret in the text box.<br>Default value: **'#007DFF'**                |
+| inputFilter<sup>8+</sup>  | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>error?: (value: string) => void<br>} | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The specified regular expression can match single characters, but not strings.<br>- **value**: regular expression to set.<br>- **error**: filtered-out content to return when regular expression matching fails.|
+| copyOption<sup>9+</sup>   | [CopyOptions](ts-appendix-enums.md#copyoptions9)             | Whether copy and paste is allowed.<br>Default value: **CopyOptions.LocalDevice**<br>If this attribute is set to **CopyOptions.None**, the paste operation is allowed, but the copy and cut operations are not.|
+| maxLength<sup>10+</sup>   | number                                                       | Maximum number of characters in the text input.<br>By default, there is no maximum number of characters.|
+| showCounter<sup>10+</sup> | boolean                                                      | Whether to show the number of entered characters when **maxLength** is set.<br>Default value: **false**  |
+| style<sup>10+</sup>       | [TextContentStyle](ts-appendix-enums.md#textcontentstyle10)  | Style of the component.<br>Default value: **TextContentStyle.DEFAULT**   |
+| enableKeyboardOnFocus<sup>10+</sup> | boolean | Whether to enable the input method when the component obtains focus.<br>Default value: **true**  |
 
 >  **NOTE**
 >
 >  The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows: <br>{<br> top: 8 vp,<br> right: 16 vp,<br> bottom: 8 vp,<br> left: 16 vp<br> }
 
-
 ## Events
 
 In addition to the [universal events](ts-universal-events-click.md), the following events are supported.

en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md

@@ -21,30 +21,35 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te
 | Name                    | Type                                    | Mandatory  | Description           |
 | ----------------------- | ---------------------------------------- | ---- | --------------- |
 | placeholder   | [ResourceStr](ts-types.md#resourcestr)       | No   | Placeholder text displayed when there is no input.     |
-| text          | [ResourceStr](ts-types.md#resourcestr)       | No   | Current text input.<br>If the component has [stateStyles](ts-universal-attributes-polymorphic-style.md) or any other attribute that may trigger updating configured, you are advised to bind the state variable to the text in real time through the **onChange** event,<br>so as to prevent display errors when the component is updated.<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
+| text          | [ResourceStr](ts-types.md#resourcestr)       | No   | Current text input.<br>If the component has [stateStyles](ts-universal-attributes-polymorphic-style.md) or any other attribute that may trigger updating configured, you are advised to bind the state variable to the text in real time through the **onChange** event, so as to prevent display errors when the component is updated.<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables. |
 | controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | No   | Text input controller.|
 
 
 ## Attributes
 
-In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
+Among the [universal attributes](ts-universal-attributes-size.md) and [universal text attributes](ts-universal-attributes-text-style.md), **fontColor**, **fontSize**, **fontStyle**, **fontWeight**, and **fontFamily** are supported. In addition, the following attributes are supported.
 
 | Name                      | Type                                    | Description                                      |
 | ------------------------ | ---------------------------------------- | ---------------------------------------- |
 | type                     | [InputType](#inputtype)     | Input box type.<br>Default value: **InputType.Normal**       |
-| placeholderColor         | [ResourceColor](ts-types.md#resourcecolor)     | Placeholder text color.|
+| placeholderColor         | [ResourceColor](ts-types.md#resourcecolor)     | Placeholder text color.<br>The default value follows the theme.  |
 | placeholderFont          | [Font](ts-types.md#font) | Placeholder text font.|
 | enterKeyType             | [EnterKeyType](#enterkeytype) | Type of the Enter key. Currently, only the default value is supported.<br>Default value: **EnterKeyType.Done**|
-| caretColor               | [ResourceColor](ts-types.md#resourcecolor)    | Color of the caret in the text box.                              |
+| caretColor               | [ResourceColor](ts-types.md#resourcecolor)    | Color of the caret in the text box.<br>Default value: **'#007DFF'**                               |
 | maxLength                | number                                   | Maximum number of characters in the text input.                           |
 | inputFilter<sup>8+</sup> | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>error?: (value: string) =&gt; void<br>} | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The regular expression can match single characters, but not strings.<br>- **value**: regular expression to set.<br>- **error**: filtered-out content to return when regular expression matching fails.|
-| copyOption<sup>9+</sup>  | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.<br>If this attribute is set to **CopyOptions.None**, the paste operation is allowed, but not the copy or cut operation.|
-| showPasswordIcon<sup>9+</sup> | boolean | Whether to display the show password icon at the end of the password text box.<br>Default value: **true**|
-| style<sup>9+</sup> | [TextInputStyle](#textinputstyle9) | Text input style.<br>Default value: **TextInputStyle.Default**|
-| textAlign<sup>9+</sup>   | [TextAlign](ts-appendix-enums.md#textalign) | Alignment mode of the text in the text box.<br>Default value: **TextAlign.Start** |
+| copyOption<sup>9+</sup>  | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.<br>Default value: **CopyOptions.LocalDevice**<br>If this attribute is set to **CopyOptions.None**, the paste operation is allowed, but not the copy or cut operation.|
+| showPasswordIcon<sup>9+</sup> | boolean | Whether to display the password icon at the end of the password text box.<br>Default value: **true**|
+| style<sup>9+</sup> | [TextInputStyle](#textinputstyle9) \| [TextContentStyle](ts-appendix-enums.md#textcontentstyle10) | Text input style.<br>Default value: **TextInputStyle.Default**|
+| textAlign<sup>9+</sup>   | [TextAlign](ts-appendix-enums.md#textalign) | Horizontal alignment of the text.<br>Default value: **TextAlign.Start**<br>**NOTE**<br>Available options are **TextAlign.Start**, **TextAlign.Center**, and **TextAlign.End**.<br>To set vertical alignment for the text, use the [align](ts-universal-attributes-location.md) attribute. The **align** attribute alone does not control the horizontal position of the text. In other words, **Alignment.TopStart**, **Alignment.Top**, and **Alignment.TopEnd** produce the same effect, top-aligning the text; **Alignment.Start**, **Alignment.Center**, and **Alignment.End** produce the same effect, centered-aligning the text vertically; **Alignment.BottomStart**, **Alignment.Bottom**, and **Alignment.BottomEnd** produce the same effect, bottom-aligning the text. |
 | selectedBackgroundColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Background color of the selected text.<br>If the opacity is not set, the color is opaque. For example, **0x80000000** indicates black with 50% opacity.|
 | caretStyle<sup>10+</sup> | {<br>width: [Length](ts-types.md#length)<br>} | Caret style.                                       |
 | caretPosition<sup>10+</sup> | number | Caret position.|
+| showUnit<sup>10+</sup>                |  [CustomBuilder](ts-types.md#CustomBuilder8)         | Unit for content in the component.<br>By default, there is no unit.|
+| showError<sup>10+</sup> | string \| undefined | Error text displayed when an error occurs.<br>By default, no error text is displayed.|
+| showUnderline<sup>10+</sup> | boolean | Whether to show an underline.<br>Default value: **false**|
+| passwordIcon<sup>10+</sup> | [PasswordIcon](#passwordicon10) | Password icon to display at the end of the password text box.<br>By default, the system-provided icon is used.|
+| enableKeyboardOnFocus<sup>10+</sup> | boolean | Whether to enable the input method when the component obtains focus.<br>Default value: **true**  |
 
 >  **NOTE**
 >
@@ -77,6 +82,13 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | Default   | Default style. The caret width is fixed at 1.5 vp, and the caret height is subject to the background height and font size of the selected text.  |
 | Inline    | Inline input style. The background height of the selected text is the same as the height of the text box.     |
 
+## PasswordIcon<sup>10+</sup>
+
+| Name      | Type                                              | Mandatory| Description                                              |
+| ---------- | -------------------------------------------------- | ---- | -------------------------------------------------- |
+| onIconSrc  | string \|[Resource](ts-types.md#resource)| No  | Icon that can be used to hide the password in password input mode.|
+| offIconSrc | string \|[Resource](ts-types.md#resource)| No  | Icon that can be used to show the password in password input mode.|
+
 ## Events
 
 In addition to the [universal events](ts-universal-events-click.md), the following events are supported.

en/application-dev/reference/arkui-ts/ts-basic-components-web.md

@@ -87,28 +87,28 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController})
 
   Example of loading local resource files in the sandbox:
 
-  1. Use [globalthis](../../application-models/uiability-data-sync-with-ui.md#using-globalthis-between-uiability-and-page) to obtain the path of the sandbox.
-     ```ts
-     // xxx.ets
-     import web_webview from '@ohos.web.webview'
-     let url = 'file://' + globalThis.filesDir + '/xxx.html'
-
-     @Entry
-     @Component
-     struct WebComponent {
-       controller: web_webview.WebviewController = new web_webview.WebviewController()
-       build() {
-         Column() {
-           // Load the files in the sandbox.
-           Web({ src: url, controller: this.controller })
-         }
-       }
-     }
-     ```
+  1. Use [globalthis](../../application-models/uiability-data-sync-with-ui.md#using-globalthis-between-uiability-and-ui-page) to obtain the path of the sandbox.
+  ```ts
+  // xxx.ets
+  import web_webview from '@ohos.web.webview'
+  let url = 'file://' + globalThis.filesDir + '/index.html'
 
-  2. Modify the **MainAbility.ts** file.
-  
-     The following uses **filesDir** as an example to describe how to obtain the path of the sandbox. For details about how to obtain other paths, see [Obtaining the Application Development Path](../../application-models/application-context-stage.md#obtaining-the-application-development-path).
+  @Entry
+  @Component
+  struct WebComponent {
+    controller: web_webview.WebviewController = new web_webview.WebviewController()
+    build() {
+      Column() {
+        // Load the files in the sandbox.
+        Web({ src: url, controller: this.controller })
+      }
+    }
+  }
+  ```
+
+  2. Modify the **EntryAbility.ts** file.
+
+     The following uses **filesDir** as an example to describe how to obtain the path of the sandbox. For details about how to obtain other paths, see [Obtaining Application File Paths](../../application-models/application-context-stage.md#obtaining-application-file-paths).
      ```ts
      // xxx.ts
      import UIAbility from '@ohos.app.ability.UIAbility';
@@ -123,6 +123,7 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController})
      }
      ```
 
+     HTML file to be loaded:
      ```html
      <!-- index.html -->
      <!DOCTYPE html>
@@ -587,15 +588,16 @@ Sets whether to display the horizontal scrollbar, including the default system s
     controller: web_webview.WebviewController = new web_webview.WebviewController()
     build() {
       Column() {
-        Web({ src: 'www.example.com', controller: this.controller })
+        Web({ src: $rawfile('index.html'), controller: this.controller })
         .horizontalScrollBarAccess(true)
       }
     }
   }
   ```
 
+  HTML file to be loaded:
   ```html
-  <!--xxx.html-->
+  <!--index.html-->
   <!DOCTYPE html>
   <html>
   <head>
@@ -640,15 +642,16 @@ Sets whether to display the vertical scrollbar, including the default system scr
     controller: web_webview.WebviewController = new web_webview.WebviewController()
     build() {
       Column() {
-        Web({ src: 'www.example.com', controller: this.controller })
+        Web({ src: $rawfile('index.html'), controller: this.controller })
         .verticalScrollBarAccess(true)
       }
     }
   }
   ```
 
+  HTML file to be loaded:
   ```html
-  <!--xxx.html-->
+  <!--index.html-->
   <!DOCTYPE html>
   <html>
   <head>
@@ -669,6 +672,11 @@ Sets whether to display the vertical scrollbar, including the default system scr
   </html>
   ```
 
+### password
+
+password(password: boolean)
+
+Sets whether the password should be saved. This API is a void API.
 
 ### cacheMode
 
@@ -1236,6 +1244,18 @@ Sets whether to enable forcible dark mode for the web page. By default, this fea
   }
   ```
 
+### tableData
+
+tableData(tableData: boolean)
+
+Sets whether form data should be saved. This API is a void API.
+
+### wideViewModeAccess
+
+wideViewModeAccess(wideViewModeAccess: boolean)
+
+Sets whether to support the viewport attribute of the HTML **\<meta>** tag. This API is a void API.
+
 ### pinchSmooth<sup>9+</sup>
 
 pinchSmooth(isEnabled: boolean)
@@ -1420,7 +1440,7 @@ Called when **alert()** is invoked to display an alert dialog box on the web pag
     controller: web_webview.WebviewController = new web_webview.WebviewController()
     build() {
       Column() {
-        Web({ src: $rawfile("xxx.html"), controller: this.controller })
+        Web({ src: $rawfile("index.html"), controller: this.controller })
           .onAlert((event) => {
             console.log("event.url:" + event.url)
             console.log("event.message:" + event.message)
@@ -1450,8 +1470,9 @@ Called when **alert()** is invoked to display an alert dialog box on the web pag
   }
   ```
 
-  ```
-  <!--xxx.html-->
+  HTML file to be loaded:
+  ```html
+  <!--index.html-->
   <!DOCTYPE html>
   <html>
   <head>
@@ -1502,7 +1523,7 @@ Called when this page is about to exit after the user refreshes or closes the pa
 
     build() {
       Column() {
-        Web({ src: $rawfile("xxx.html"), controller: this.controller })
+        Web({ src: $rawfile("index.html"), controller: this.controller })
           .onBeforeUnload((event) => {
             console.log("event.url:" + event.url)
             console.log("event.message:" + event.message)
@@ -1532,8 +1553,9 @@ Called when this page is about to exit after the user refreshes or closes the pa
   }
   ```
 
-  ```
-  <!--xxx.html-->
+  HTML file to be loaded:
+  ```html
+  <!--index.html-->
   <!DOCTYPE html>
   <html>
   <head>
@@ -1584,7 +1606,7 @@ Called when **confirm()** is invoked by the web page.
 
     build() {
       Column() {
-        Web({ src: $rawfile("xxx.html"), controller: this.controller })
+        Web({ src: $rawfile("index.html"), controller: this.controller })
           .onConfirm((event) => {
             console.log("event.url:" + event.url)
             console.log("event.message:" + event.message)
@@ -1614,8 +1636,9 @@ Called when **confirm()** is invoked by the web page.
   }
   ```
 
-  ```
-  <!--xxx.html-->
+  HTML file to be loaded:
+  ```html
+  <!--index.html-->
   <!DOCTYPE html>
   <html>
   <head>
@@ -1673,7 +1696,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
 
     build() {
       Column() {
-        Web({ src: $rawfile("xxx.html"), controller: this.controller })
+        Web({ src: $rawfile("index.html"), controller: this.controller })
           .onPrompt((event) => {
             console.log("url:" + event.url)
             console.log("message:" + event.message)
@@ -1704,8 +1727,9 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
   }
   ```
 
-  ```
-  <!--xxx.html-->
+  HTML file to be loaded:
+  ```html
+  <!--index.html-->
   <!DOCTYPE html>
   <html>
   <head>
@@ -1776,6 +1800,8 @@ Called to notify the host application of a JavaScript console message.
 
 onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void)
 
+Instructs the main application to start downloading a file.
+
 **Parameters**
 
 | Name               | Type         | Description                               |
@@ -2084,6 +2110,26 @@ Called when loading of the web page is complete. This API is used by an applicat
   }
   ```
 
+### onSslErrorReceive<sup>(deprecated)</sup>
+
+onSslErrorReceive(callback: (event?: { handler: Function, error: object }) => void)
+
+Called when an SSL error occurs during resource loading.
+
+> **NOTE**
+>
+> This API is supported since API version 8 and deprecated since API version 9. You are advised to use [onSslErrorEventReceive<sup>9+</sup>](#onsslerroreventreceive9) instead.
+
+### onFileSelectorShow<sup>(deprecated)</sup>
+
+onFileSelectorShow(callback: (event?: { callback: Function, fileSelector: object }) => void)
+
+Called to process an HTML form whose input type is **file**, in response to the tapping of the **Select File** button.
+
+> **NOTE**
+>
+> This API is supported since API version 8 and deprecated since API version 9. You are advised to use [onShowFileSelector<sup>9+</sup>](#onshowfileselector9) instead.
+
 ### onRenderExited<sup>9+</sup>
 
 onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => void)
@@ -3308,7 +3354,7 @@ Called when the **\<Web>** component is about to access a URL. This API is used
 
 | Name | Type                                    | Description     |
 | ------- | ---------------------------------------- | --------- |
-| request | [Webresourcerequest](#webresourcerequest) | Information about the URL request.|
+| request | [WebResourceRequest](#webresourcerequest) | Information about the URL request.|
 
 **Return value**
 
@@ -4280,6 +4326,7 @@ Enumerates the error codes returned by **onSslErrorEventReceive** API.
 | Name       | Description           | Remarks                        |
 | --------- | ------------- | -------------------------- |
 | MidiSysex | MIDI SYSEX resource.| Currently, only permission events can be reported. MIDI devices are not yet supported.|
+| VIDEO_CAPTURE<sup>10+</sup> | Video capture resource, such as a camera.| |
 
 ## WebDarkMode<sup>9+</sup>
 | Name     | Description                                  |
@@ -4933,6 +4980,7 @@ This API is deprecated since API version 9. You are advised to use [registerJava
   }
   ```
 
+  HTML file to be loaded:
   ```html
   <!-- index.html -->
   <!DOCTYPE html>
@@ -4993,7 +5041,7 @@ This API is deprecated since API version 9. You are advised to use [runJavaScrip
     }
   }
   ```
-
+  HTML file to be loaded:
   ```html
   <!-- index.html -->
   <!DOCTYPE html>
@@ -5009,7 +5057,6 @@ This API is deprecated since API version 9. You are advised to use [runJavaScrip
     }
     </script>
   </html>
-
   ```
 
 ### stop<sup>(deprecated)</sup>
@@ -5075,17 +5122,12 @@ This API is deprecated since API version 9. You are advised to use [clearHistory
 Manages behavior of cookies in **\<Web>** components. All **\<Web>** components in an application share a **WebCookie**. You can use the **getCookieManager** API in **controller** to obtain the **WebCookie** for subsequent cookie management.
 
 ### setCookie<sup>(deprecated)</sup>
-setCookie(url: string, value: string): boolean
 
-Sets the cookie. This API returns the result synchronously. Returns **true** if the operation is successful; returns **false** otherwise.
-This API is deprecated since API version 9. You are advised to use [setCookie<sup>9+</sup>](../apis/js-apis-webview.md#setcookie) instead.
+setCookie(): boolean
 
-**Parameters**
+Sets the cookie. This API returns the result synchronously. Returns **true** if the operation is successful; returns **false** otherwise.
 
-| Name  | Type  | Mandatory  | Default Value | Description             |
-| ----- | ------ | ---- | ---- | ----------------- |
-| url   | string | Yes   | -    | URL of the cookie to set. A complete URL is recommended.|
-| value | string | Yes   | -    | Value of the cookie to set.        |
+This API is deprecated since API version 9. You are advised to use [setCookie<sup>9+</sup>](../apis/js-apis-webview.md#setcookie) instead.
 
 **Return value**
 
@@ -5093,31 +5135,12 @@ This API is deprecated since API version 9. You are advised to use [setCookie<su
 | ------- | ------------- |
 | boolean | Returns **true** if the operation is successful; returns **false** otherwise.|
 
-**Example**
-
-  ```ts
-  // xxx.ets
-  @Entry
-  @Component
-  struct WebComponent {
-    controller: WebController = new WebController()
-
-    build() {
-      Column() {
-        Button('setCookie')
-          .onClick(() => {
-            let result = this.controller.getCookieManager().setCookie("https://www.example.com", "a=b")
-            console.log("result: " + result)
-          })
-        Web({ src: 'www.example.com', controller: this.controller })
-      }
-    }
-  }
-  ```
 ### saveCookie<sup>(deprecated)</sup>
+
 saveCookie(): boolean
 
 Saves the cookies in the memory to the drive. This API returns the result synchronously.
+
 This API is deprecated since API version 9. You are advised to use [saveCookieAsync<sup>9+</sup>](../apis/js-apis-webview.md#savecookieasync) instead.
 
 **Return value**
@@ -5125,25 +5148,3 @@ This API is deprecated since API version 9. You are advised to use [saveCookieAs
 | Type     | Description                  |
 | ------- | -------------------- |
 | boolean | Operation result.|
-
-**Example**
-
-  ```ts
-  // xxx.ets
-  @Entry
-  @Component
-  struct WebComponent {
-    controller: WebController = new WebController()
-
-    build() {
-      Column() {
-        Button('saveCookie')
-          .onClick(() => {
-            let result = this.controller.getCookieManager().saveCookie()
-            console.log("result: " + result)
-          })
-        Web({ src: 'www.example.com', controller: this.controller })
-      }
-    }
-  }
-  ```

en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md

@@ -14,20 +14,39 @@ Since API version 9, child components are supported when **type** is set to **"c
 
 ## APIs
 
-XComponent(value: {id: string, type: string, libraryname?: string, controller?: XComponentController})
+**API 1**: XComponent(value: {id: string, type: string, libraryname?: string, controller?: XComponentController})
 
 **Parameters**
 
-| Name        | Type                                    | Mandatory  | Description                                      |
-| ----------- | ---------------------------------------- | ---- | ---------------------------------------- |
-| id          | string                                   | Yes   | Unique ID of the component. The value can contain a maximum of 128 characters.                  |
-| type        | string                                   | Yes   | Type of the component. The options are as follows:<br>- **"surface"**: The content of the component is displayed individually, without being combined with that of other components. This option is used for displaying EGL/OpenGL ES and media data.<br>- **"component"**<sup>9+</sup>: The component becomes a container where non-UI logic can be executed to dynamically load the display content.|
-| libraryname | string                                   | No   | Name of the dynamic library generated after compilation at the application native layer. This parameter is valid only when the component type is **"surface"**.|
-| controller  | [XComponentcontroller](#xcomponentcontroller) | No   | Controller bound to the component, which can be used to invoke methods of the component. This parameter is valid only when the component type is **"surface"**.|
+| Name     | Type                                     | Mandatory| Description                                                        |
+| ----------- | --------------------------------------------- | ---- | ------------------------------------------------------------ |
+| id          | string                                        | Yes  | Unique ID of the component. The value can contain a maximum of 128 characters.                   |
+| type        | string                                        | Yes  | Type of the component. The options are as follows:<br>- **"surface"**: The custom content is displayed individually on the screen. This option is used for displaying EGL/OpenGL ES and media data.<br>- **"component"**<sup>9+</sup>: The component becomes a container where non-UI logic can be executed to dynamically load the display content.<br>Any other value evaluates to **"surface"**.|
+| libraryname | string                                        | No  | Name of the dynamic library generated after compilation at the application native layer. This parameter is valid only when **type** is **"surface"**.|
+| controller  | [XComponentcontroller](#xcomponentcontroller) | No  | Controller bound to the component, which can be used to invoke methods of the component. This parameter is valid only when the component type is **"surface"**.|
+
+**API 2**: XComponent(value: {id: string, type: XComponentType, libraryname?: string, controller?: XComponentController})<sup>10+</sup>
+
+**Parameters**
+
+| Name     | Type                                     | Mandatory| Description                                                        |
+| ----------- | --------------------------------------------- | ---- | ------------------------------------------------------------ |
+| id          | string                                        | Yes  | Unique ID of the component. The value can contain a maximum of 128 characters.                   |
+| type        | [XComponentType](#xcomponenttype10)   | Yes  | Type of the component.                                |
+| libraryname | string                                        | No  | Name of the dynamic library generated after compilation at the application native layer. This parameter is valid only when **type** is **SURFACE** or **TEXTURE**.|
+| controller  | [XComponentcontroller](#xcomponentcontroller) | No  | Controller bound to the component, which can be used to invoke methods of the component. This parameter is valid only when **type** is **SURFACE** or **TEXTURE**.|
+
+## XComponentType<sup>10+</sup>
+
+| Name     | Description                                                        |
+| --------- | ------------------------------------------------------------ |
+| SURFACE   | The custom content is displayed individually on the screen. This option is used for displaying EGL/OpenGL ES and media data.|
+| COMPONENT | The component becomes a container where non-UI logic can be executed to dynamically load the display content.|
+| TEXTURE   | The custom content of the component is grouped and displayed together with content of the component.|
 
 > **NOTE**
 >
-> When **type** is set to **"component"**, the **\<XComponent>** functions as a container, where child components are laid out vertically.
+> When **type** is set to **COMPONENT("component")**, the **\<XComponent>** functions as a container, where child components are laid out vertically.
 >
 > - Vertical alignment: [FlexAlign](ts-appendix-enums.md#flexalign).Start
 > - Horizontal alignment: [FlexAlign](ts-appendix-enums.md#flexalign).Center
@@ -39,13 +58,14 @@ XComponent(value: {id: string, type: string, libraryname?: string, controller?:
 > The non-UI logic written internally needs to be encapsulated in one or more functions.
 
 ## Attributes
-- You can customize the content displayed in the **\<XComponent>**. Among the universal attributes, the [background](./ts-universal-attributes-background.md), [opacity](./ts-universal-attributes-opacity.md), and [image effects](./ts-universal-attributes-image-effect.md) attributes are not supported.
-- When **type** is set to **"surface"**, you are advised to use the APIs provided by the EGL/OpenGL ES to set the display content.
-- When **type** is set to **"component"**, you are advised to mount child components to set the display content.
+- You can customize the content displayed in the **\<XComponent>**. Depending on the **type** settings, the support for the universal attributes [background](./ts-universal-attributes-background.md), [opacity](./ts-universal-attributes-opacity.md), and [image effects](./ts-universal-attributes-image-effect.md) varies:
+- When **type** is set to **SURFACE("surface")**, none of these attributes is supported. For configuration, you are advised to use the APIs provided by EGL/OpenGL ES instead.
+- When **type** is set to **COMPONENT("component")**, none of these attributes is supported. For configuration, you are advised to mount child components.
+- When **type** is set to **TEXTURE**, only [opacity](./ts-universal-attributes-opacity.md) and **backgroundColor** in [background](./ts-universal-attributes-background.md) are supported. For configuration of other attributes, you are advised to use the APIs provided by EGL/OpenGL ES instead.
 
 ## Events
 
-The following events are supported only when **type** is set to **"surface"**. The [universal events](ts-universal-events-click.md) and [universal gestures](ts-gesture-settings.md) are not supported.
+When **type** is set to **SURFACE("surface")** or **TEXTURE**, the following events are supported. The [universal events](ts-universal-events-click.md) and gestures (ts-gesture-settings.md) are not supported.
 
 ### onLoad
 
@@ -79,7 +99,7 @@ xcomponentController: XComponentController = new XComponentController()
 
 getXComponentSurfaceId(): string
 
-Obtains the ID of the surface held by the **\<XComponent>**. The ID can be used for @ohos interfaces. For details, see [Camera Management](../apis/js-apis-camera.md). This API works only when **type** of the **\<XComponent>** is set to **"surface"**.
+Obtains the ID of the surface held by the **\<XComponent>**, which can then be used for @ohos APIs. For details, see [Camera Management](../apis/js-apis-camera.md). This API works only when **type** of the **\<XComponent>** is set to **SURFACE("surface")** or **TEXTURE**.
 
 
 **Return value**
@@ -93,7 +113,7 @@ Obtains the ID of the surface held by the **\<XComponent>**. The ID can be used
 
 setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}): void
 
-Sets the width and height of the surface held by the **\<XComponent>**. This API works only when **type** of the **\<XComponent>** is set to **"surface"**.
+Sets the width and height of the surface held by the **\<XComponent>**. This API works only when **type** of the **\<XComponent>** is set to **SURFACE("surface")** or **TEXTURE**.
 
 
 **Parameters**
@@ -108,7 +128,7 @@ Sets the width and height of the surface held by the **\<XComponent>**. This API
 
 getXComponentContext(): Object
 
-Obtains the context of an **\<XComponent>** object. This API works only when **type** of the **\<XComponent>** is set to **"surface"**.
+Obtains the context of an **\<XComponent>** object. This API works only when **type** of the **\<XComponent>** is set to **SURFACE("surface")** or **TEXTURE**.
 
 **Return value**
 

en/application-dev/reference/arkui-ts/ts-container-ability-component.md

@@ -29,9 +29,9 @@ AbilityComponent(want: Want)
 
 **Parameters**
 
-| Name| Type| Mandatory| Description|
-| -------- | -------- | -------- | -------- |
-| want | [Want](../apis/js-apis-app-ability-want.md) | Yes| Description of the default ability to load.|
+| Name | Type                                    | Mandatory  | Description           |
+| ---- | ---------------------------------------- | ---- | --------------- |
+| want | [Want](../apis/js-apis-app-ability-want.md) | Yes   | Description of the default ability to load.|
 
 
 ## Events
@@ -74,5 +74,3 @@ struct MyComponent {
   }
 }
 ```
-
- <!--no_check--> 
\ No newline at end of file

en/application-dev/reference/arkui-ts/ts-container-listitem.md

@@ -11,13 +11,28 @@ The **\<ListItem>** component displays specific items in the list. It must be us
 
 This component can contain a single child component.
 
-
 ## APIs
 
-ListItem(value?: string)
-
 Since API version 9, this API is supported in ArkTS widgets.
 
+**API 1**: ListItem(value?: ListItemOptions)<sup>10+</sup>
+
+**Parameters**
+
+| Name| Type                                     | Mandatory| Description                                                    |
+| ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ |
+| value  | [ListItemOptions](#listitemoptions10) | No  | Value of the list item, containing the **style** parameter of the **ListItemStyle**enum type.|
+
+**API 2**: ListItem(value?: string)<sup>(deprecated)</sup>
+
+This API is deprecated since API version 10. You are advised to use API 1 instead.
+
+**Parameters**
+
+| Name| Type                     | Mandatory| Description|
+| ------ | ----------------------------- | ---- | -------- |
+| value  | string<sup>(deprecated)</sup> | No  | N/A      |
+
 ## Attributes
 
 In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
@@ -27,7 +42,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | sticky<sup>(deprecated)</sup> | [Sticky](#stickydeprecated) | Sticky effect of the list item.<br>Default value: **Sticky.None**<br>This API is deprecated since API version 9. You are advised to use **sticky** of the [\<List>](ts-container-list.md#attributes) component.|
 | editable<sup>(deprecated)</sup>  | boolean \| [EditMode](#editmodedeprecated) | Whether to enter editing mode, where the list item can be deleted or moved.<br>This API is deprecated since API version 9.<br>Default value: **false**|
 | selectable<sup>8+</sup> | boolean | Whether the current list item is selectable by mouse drag.<br>**NOTE**<br>This attribute takes effect only when mouse frame selection is enabled for the parent **\<List>** container.<br>Default value: **true**|
-| swipeAction<sup>9+</sup> | {<br>start?: CustomBuilder,<br>end?:CustomBuilder,<br>edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9),<br>} | Component displayed when the list item is swiped out from the screen edge.<br>- **start**: component on the left of the list item when the item is swiped to the right (in vertical list layout) or component above the list item when the item is swiped down (in horizontal list layout).<br>- **end**: component on the right of the list item when the item is swiped to the left (in vertical list layout) or component below the list item when the item is swiped up (in horizontal list layout).<br>- **edgeEffect**: scroll effect.<br>**NOTE**<br>The top level of the **@builder** function corresponding to **start** and **end** must be a single component and cannot be an **if/else**, **ForEach**, or **LazyForEach** statement.|
+| swipeAction<sup>9+</sup> | {<br>start?: CustomBuilder \| [SwipeActionItem](#swipeactionitem10),<br>end?:CustomBuilder \| [SwipeActionItem](#swipeactionitem10),<br>edgeEffect?: [SwipeEdgeEffect](#swipeedgeeffect9),<br>} | Swipe action displayed when the list item is swiped out from the screen edge.<br>- **start**: swipe action displayed on the left of the list item when the item is swiped right (in vertical list layout) or above the list item when the item is swiped down (in horizontal list layout).<br>- **end**: swipe action displayed on the right of the list item when the item is swiped left (in vertical list layout) or below the list item when the item is swiped up (in horizontal list layout).<br>- **edgeEffect**: scroll effect.<br>**NOTE**<br>- The top level of the **@builder** function corresponding to **start** and **end** must be a single component and cannot be an **if/else**, **ForEach**, or **LazyForEach** statement.<br> - The swipe gesture works only in the list item area. If a swipe causes a child component to extend beyond the list item area, the portion outside the area does not respond to the swipe. In light of this, avoid setting **swipeAction** to a component too wide in a multi-column list. |
 
 ## Sticky<sup>(deprecated)</sup>
 This API is deprecated since API version 9. You are advised to use [stickyStyle](ts-container-list.md#stickystyle9) of the **\<List>** component.
@@ -48,8 +63,36 @@ This API is deprecated since API version 9.
 ## SwipeEdgeEffect<sup>9+</sup>
 | Name| Description|
 | -------- | -------- |
-| Spring | When the list item scrolls to the edge of the list, it can continue to scroll for a distance and rebound after being released.|
-| None | The list item cannot scroll beyond the edge of the list|
+| Spring | When the list item scrolls to the edge of the list, it can continue to scroll for a distance. If the delete area is set, the list item can continue to scroll after the scroll distance reaches the delete threshold and, after being released, rebound following the spring curve.|
+| None | The list item cannot scroll beyond the edge of the list. If the delete area is set, the list item cannot continue to scroll after the scroll distance reaches the delete threshold. If the delete callback is set, it is triggered when the delete threshold is reached and the list item is released.|
+
+## SwipeActionItem<sup>10+</sup>
+Describes the swipe action item.
+
+For a list in vertical layout, it refers to the delete item displayed on the left (or right) of the list item when the list item is swiped right (or left).
+
+For a list in horizontal layout, it refers to the delete item displayed below (or above) the list item when the list item is swiped up (or down).
+
+| Name                | Type                                                    | Mandatory| Description                                                        |
+| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
+| deleteAreaDistance | [Length](ts-types.md#length) | No| Swipe distance threshold for deleting the list item.<br>Default value: **56vp**<br>**NOTE**<br>This parameter cannot be set in percentage.<br>If the value is greater than the list item width minus the width of **swipeAction**, or is less than or equal to 0, the delete area will not be set.|
+| onDelete | () => void | No| Callback invoked when the list item is released while in the delete area.<br>**NOTE**<br> This callback is invoked only when the list item is released in a position that meets or goes beyond the specified swipe distance threshold (which must be valid) for deleting the list item.|
+| onEntryDeleteArea | () => void | No| Callback invoked each time the list item enters the delete area.|
+| onExitDeleteArea | () => void | No|Callback invoked each time the list item exits the delete area.|
+| builder |  CustomBuilder | No|Swipe action item displayed when the list item is swiped left or right (in vertical list layout) or up or down (in horizontal list layout).|
+| useDefaultDeleteAnimation | boolean | No|Whether to use the default delete animation.<br>Default value: **true**|
+## ListItemOptions<sup>10+</sup>
+
+| Name | Type                                 | Mandatory| Description                                                        |
+| ----- | ----------------------------------------- | ---- | ------------------------------------------------------------ |
+| style | [ListItemStyle](#listitemstyle10) | No  | Style of the list item.<br>Default value: **ListItemStyle.NONE**<br>If this parameter is set to **ListItemStyle.NONE**, no style is applied.<br>If this parameter is set to **ListItemStyle.CARD**, the default card style is applied, but only when **ListItemGroupStyle.CARD** is set for [\<ListItemGroup>](ts-container-listitemgroup.md).<br>In the default card style, the list item has a 48 vp height and 100% width. It can be in focus, hover, press, selected, or disable style depending on the state.<br>**NOTE**<br>In the default card style, the list has its **listDirection** attribute fixed at **Axis.Vertical** and **alignListItem** attribute at **ListItemAlign.Center**. |
+
+## ListItemStyle<sup>10+</sup>
+
+| Name| Description              |
+| ---- | ------------------ |
+| NONE | No style.          |
+| CARD | Default card style.|
 
 ## Events
 
@@ -78,6 +121,7 @@ struct ListItemExample {
           }
         }, item => item)
       }.width('90%')
+      .scrollBar(BarState.Off)
     }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
   }
 }
@@ -85,45 +129,63 @@ struct ListItemExample {
 
 ![en-us_image_0000001219864159](figures/en-us_image_0000001219864159.gif)
 
+
 ```ts
 // xxx.ets
 @Entry
 @Component
 struct ListItemExample2 {
   @State message: string = 'Hello World'
+  @State arr: number[] = [0, 1, 2, 3, 4]
+  @State enterEndDeleteAreaString: string = "not enterEndDeleteArea"
+  @State exitEndDeleteAreaString: string = "not exitEndDeleteArea"
 
   @Builder itemEnd() {
-    Row () {
-      Button("Del").margin("4vp")
+    Row() {
+      Button("Delete").margin("4vp")
       Button("Set").margin("4vp")
     }.padding("4vp").justifyContent(FlexAlign.SpaceEvenly)
   }
 
   build() {
     Column() {
-      List({space:10}) {
-        ListItem() {
-          Text(this.message)
-          .width('100%')
-          .height(100)
-          .fontSize(16)
-          .textAlign(TextAlign.Center)
-          .borderRadius(10)
-          .backgroundColor(0xFFFFFF)
-        }
-        .swipeAction({ end:this.itemEnd})
-
-        ListItem() {
-          Text(this.message)
-          .width('100%')
-          .height(100)
-          .fontSize(16)
-          .textAlign(TextAlign.Center)
-          .borderRadius(10)
-          .backgroundColor(0xFFFFFF)
-        }
-        .swipeAction({ start:this.itemEnd})
+      List({ space: 10 }) {
+        ForEach(this.arr, (item) => {
+          ListItem() {
+            Text("item" + item)
+              .width('100%')
+              .height(100)
+              .fontSize(16)
+              .textAlign(TextAlign.Center)
+              .borderRadius(10)
+              .backgroundColor(0xFFFFFF)
+          }
+          .transition({ type: TransitionType.Delete, opacity: 0 })
+          .swipeAction({
+            end: {
+              builder: this.itemEnd.bind(this, item),
+              useDefaultDeleteAnimation: true,
+              onDelete: () => {
+                animateTo({ duration: 1000 }, () => {
+                  let index = this.arr.indexOf(item)
+                  this.arr.splice(index, 1)
+                })
+              },
+              deleteAreaDistance: 80,
+              onEnterDeleteArea: () => {
+                this.enterEndDeleteAreaString = "enterEndDeleteArea"
+                this.exitEndDeleteAreaString = "not exitEndDeleteArea"
+              },
+              onExitDeleteArea: () => {
+                this.enterEndDeleteAreaString = "not enterEndDeleteArea"
+                this.exitEndDeleteAreaString = "exitEndDeleteArea"
+              }
+            }
+          })
+        }, item => item)
       }
+      Text(this.enterEndDeleteAreaString).fontSize(20)
+      Text(this.exitEndDeleteAreaString).fontSize(20)
     }
     .padding(10)
     .backgroundColor(0xDCDCDC)
@@ -132,4 +194,4 @@ struct ListItemExample2 {
   }
 }
 ```
-![en-us_image_1501929990650](figures/en-us_image_1501929990650.jpg)
+![deleteListItem](figures/deleteListItem.gif)

en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md

@@ -19,15 +19,16 @@ This component supports the **[\<ListItem>](ts-container-listitem.md)** child co
 
 ## APIs
 
-ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: number | string})
+ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: number | string, style?: ListItemGroupStyle})
 
 **Parameters**
 
-| Name| Type| Mandatory| Description|
-| -------- | -------- | -------- | -------- |
-| header | [CustomBuilder](ts-types.md#custombuilder8) | No|  Header of the **\<ListItemGroup>** component.|
-| footer | [CustomBuilder](ts-types.md#custombuilder8) | No|  Footer of the **\<ListItemGroup>** component.|
-| space | number \| string | No| Spacing between list items. This parameter is valid only between list items, but not between a header and list item or between a footer and list item.|
+| Name             | Type                                           | Mandatory| Description                                                    |
+| ------------------- | --------------------------------------------------- | ---- | ------------------------------------------------------------ |
+| header              | [CustomBuilder](ts-types.md#custombuilder8)         | No  | Header of the list item group.                                 |
+| footer              | [CustomBuilder](ts-types.md#custombuilder8)         | No  | Footer of the list item group.                                 |
+| space               | number \| string                          | No  | Spacing between list items. This parameter is valid only between list items, but not between a header and list item or between a footer and list item.|
+| style<sup>10+</sup> | [ListItemGroupStyle](#listitemgroupstyle10) | No  | Style of the list item group.<br>Default value: **ListItemGroupStyle.NONE**<br>If this parameter is set to **ListItemGroupStyle.NONE**, no style is applied.<br>If this parameter is set to **ListItemGroupStyle.CARD**, the default card style is applied, but only when **ListItemStyle.CARD** is set for [\<ListItem>](ts-container-listitem.md).<br>It can be in focus, hover, press, selected, or disable style depending on the state.<br>**NOTE**<br>In the default card style, the list has its **listDirection** attribute fixed at **Axis.Vertical** and **alignListItem** attribute at **ListItemAlign.Center**; the **header** and **footer** parameters cannot be set for the list item group. |
 
 ## Attributes
 
@@ -35,6 +36,13 @@ ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?:
 | -------- | -------- | -------- |
 | divider | {<br>strokeWidth: [Length](ts-types.md#length),<br>color?: [ResourceColor](ts-types.md#resourcecolor),<br>startMargin?: [Length](ts-types.md#length),<br>endMargin?: [Length](ts-types.md#length)<br>} \| null | Style of the divider for the list items. By default, there is no divider.<br>- **strokeWidth**: stroke width of the divider.<br>- **color**: color of the divider.<br>- **startMargin**: distance between the divider and the start of the list.<br>- **endMargin**: distance between the divider and the end of the list.|
 
+## ListItemGroupStyle<sup>10+</sup>
+
+| Name| Description              |
+| ---- | ------------------ |
+| NONE | No style.          |
+| CARD | Default card style.|
+
 > **NOTE**
 >
 > The **\<ListItemGroup>** component does not support the universal attribute **[aspectRatio](ts-universal-attributes-layout-constraints.md)**.
@@ -99,12 +107,12 @@ struct ListItemGroupExample {
               }
             }, item => item)
           }
-          .borderRadius(20)
           .divider ({ strokeWidth: 1,color:Color.Blue }) // Divider between lines
         })
       }
       .width('90%')
       .sticky(StickyStyle.Header|StickyStyle.Footer)
+      .scrollBar(BarState.Off)
     }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
   }
 }

en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md

@@ -34,6 +34,7 @@ SideBarContainer( type?: SideBarContainerType )
 | -------- | -------- |
 | Embed | The sidebar is embedded in the component and displayed side by side with the content area.|
 | Overlay | The sidebar is displayed overlaid on the content area.|
+| AUTO | The sidebar is displayed in Embed mode when the component size is greater than or equal to the sum of **minSideBarWidth** and **minContentWidth**<br>and in Overlay mode otherwise.|
 
 ## Attributes
 
@@ -50,6 +51,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | autoHide<sup>9+</sup> | boolean | Whether to automatically hide the sidebar when it is dragged to be smaller than the minimum width.<br>Default value: **true**<br>**NOTE**<br>The value is subject to the **minSideBarWidth** attribute method. If it is not set in **minSideBarWidth**, the default value is used.<br>Whether the sidebar should be hidden is determined when it is being dragged. When its width is less than the minimum width, the damping effect is required to trigger hiding (a distance out of range).|
 | sideBarPosition<sup>9+</sup> | [SideBarPosition](#sidebarposition9) | Position of the sidebar.<br>Default value: **SideBarPosition.Start**|
 | divider<sup>10+</sup>        | [DividerStyle](#dividerstyle10) \| null | Divider style.<br>- **DividerStyle** (default): The divider is displayed.<br>- **null**: The divider is not displayed.|
+| minContentWidth<sup>10+</sup> | Dimension | Minimum width of the content area of the sidebar container.<br>Default value: **360**<br>Unit: vp|
 
 ## ButtonStyle
 

en/application-dev/reference/arkui-ts/ts-container-tabcontent.md

@@ -27,8 +27,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| tabBar | string \| Resource \| {<br>icon?: string \| Resource,<br>text?: string \| Resource<br>}<br>\| [CustomBuilder](ts-types.md)<sup>8+</sup> | Content displayed on the tab bar.<br>**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).<br>**NOTE**<br>If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image.<br>If the content set exceeds the space provided by the tab bar, it will be clipped.|
-| tabBar<sup>9+</sup> | [SubTabBarStyle](#subtabbarstyle) \| [BottomTabBarStyle](#bottomtabbarstyle) | Content displayed on the tab bar.<br>**SubTabBarStyle**: subtab style. It takes text as its input parameter.<br>**BottomTabBarStyle**: bottom and side tab style. It takes text and images as its input parameters.<br>**NOTE**<br>The bottom tab style does not include an underline.<br>When an icon display error occurs, a gray blank block is displayed.|
+| tabBar | string \| [Resource](ts-types.md#resource) \| {<br>icon?: string \| [Resource](ts-types.md#resource),<br>text?: string \| [Resource](ts-types.md#resource)<br>}<br>\| [CustomBuilder](ts-types.md)<sup>8+</sup> | Content displayed on the tab bar.<br>**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).<br>**NOTE**<br>If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image.<br>If the content set exceeds the space provided by the tab bar, it will be clipped.|
+| tabBar<sup>9+</sup> | [SubTabBarStyle](#subtabbarstyle9) \| [BottomTabBarStyle](#bottomtabbarstyle9) | Content displayed on the tab bar.<br>**SubTabBarStyle**: subtab style. It takes text as its input parameter.<br>**BottomTabBarStyle**: bottom and side tab style. It takes text and images as its input parameters.<br>**NOTE**<br>The bottom tab style does not include an underline.<br>When an icon display error occurs, a gray blank block is displayed.|
 
 >  **NOTE**
 >
@@ -81,10 +81,10 @@ The following attributes are supported.
 | Name| Type| Mandatory| Description|
 | -------- | -------- | -------- | -------------------------------- |
 | color | [ResourceColor](ts-types.md#resourcecolor) | No| Underline indicator color and board color.<br>Default value: **#FF007DFF**|
-| height | [Length](ts-types.md#length) | No| Height of the underline indicator.<br>Default value: **2.0**<br>Unit: vp|
-| width | [Length](ts-types.md#length) | No| Width of the underline indicator.<br>Default value: **0.0**<br>Unit: vp|
-| borderRadius | [Length](ts-types.md#length) | No| Radius of the rounded corner of the underline indicator.<br>Default value: **0.0**<br>Unit: vp|
-| marginTop | [Length](ts-types.md#length) | No| Spacing between the underline indicator and text.<br>Default value: **8.0**<br>Unit: vp|
+| height | [Length](ts-types.md#length) | No| Height of the underline indicator. It cannot be set in percentage.<br>Default value: **2.0**<br>Unit: vp|
+| width | [Length](ts-types.md#length) | No| Width of the underline indicator. It cannot be set in percentage.<br>Default value: **0.0**<br>Unit: vp|
+| borderRadius | [Length](ts-types.md#length) | No| Radius of the rounded corner of the underline indicator. It cannot be set in percentage.<br>Default value: **0.0**<br>Unit: vp|
+| marginTop | [Length](ts-types.md#length) | No| Spacing between the underline indicator and text. It cannot be set in percentage.<br>Default value: **8.0**<br>Unit: vp|
 
 ## SelectedMode<sup>10+</sup>
 | Name      | Description                    |
@@ -96,7 +96,7 @@ The following attributes are supported.
 
 | Name| Type| Mandatory| Description|
 | -------- | -------- | -------- | ------------------------------------ |
-| borderRadius | [Length](ts-types.md#length) | No| Radius of the rounded corner of the underline indicator.<br>Default value: **8.0**<br>Unit: vp|
+| borderRadius | [Length](ts-types.md#length) | No| Radius of the rounded corner of the board. It cannot be set in percentage.<br>Default value: **8.0**<br>Unit: vp|
 
 ## LabelStyle<sup>10+</sup>
 

en/application-dev/reference/arkui-ts/ts-container-tabs.md

@@ -41,7 +41,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | vertical                 | boolean                                  | Whether to use vertical tabs. The value **true** means to use vertical tabs, and **false** means to use horizontal tabs.<br>Default value: **false**|
 | scrollable               | boolean                                  | Whether the tabs are scrollable. The value **true** means that the tabs are scrollable, and **false** means the opposite.<br>Default value: **true**|
 | barMode                  | BarMode                                  | Tab bar layout mode. For details, see **BarMode**.<br>Default value: **BarMode.Fixed**|
-| barWidth                 | number \| Length<sup>8+</sup>  | Width of the tab bar.<br>The default value varies.<br>If the tab bar has the **vertical** attribute set to **false** and does not have a style specified, the default value is the width of the **\<Tabs>** component.<br>If the tab bar has the **vertical** attribute set to **true** and does not have a style specified, the default value is **56vp**.<br>If the tab bar has the **vertical** attribute set to **false** and **SubTabbarStyle** specified, the default value is the width of the **\<Tabs>** component.<br>If the tab bar has the **vertical** attribute set to **true** and **SubTabbarStyle** specified, the default value is **56vp**.<br>If the tab bar has the **vertical** attribute set to **true** and **BottomTabbarStyle** specified, the default value is **96vp**.<br>If the tab bar has the **vertical** attribute set to **false** and **BottomTabbarStyle** specified, the default value is the width of the **\<Tabs>** component.<br>**NOTE**<br><br>A value less than 0 or greater than the width of the **\<Tabs>** component evaluates to the default value.|
+| barWidth                 | number \| Length<sup>8+</sup>  | Width of the tab bar.<br>The default value varies.<br>If the tab bar has the **vertical** attribute set to **false** and does not have a style specified, the default value is the width of the **\<Tabs>** component.<br>If the tab bar has the **vertical** attribute set to **true** and does not have a style specified, the default value is **56vp**.<br>If the tab bar has the **vertical** attribute set to **false** and **SubTabbarStyle** specified, the default value is the width of the **\<Tabs>** component.<br>If the tab bar has the **vertical** attribute set to **true** and **SubTabbarStyle** specified, the default value is **56vp**.<br>If the tab bar has the **vertical** attribute set to **true** and **BottomTabbarStyle** specified, the default value is **96vp**.<br>If the tab bar has the **vertical** attribute set to **false** and **BottomTabbarStyle** specified, the default value is the width of the **\<Tabs>** component.<br>**NOTE**<br>A value less than 0 or greater than the width of the **\<Tabs>** component evaluates to the default value.|
 | barHeight                | number \| Length<sup>8+</sup>  | Height of the tab bar.<br>The default value varies.<br>If the tab bar has the **vertical** attribute set to **false** and does not have a style specified, the default value is **56vp**.<br>If the tab bar has the **vertical** attribute set to **true** and does not have a style specified, the default value is the height of the **\<Tabs>** component.<br>If the tab bar has the **vertical** attribute set to **false** and **SubTabbarStyle** specified, the default value is **56vp**.<br>If the tab bar has the **vertical** attribute set to **true** and **SubTabbarStyle** specified, the default value is the height of the **\<Tabs>** component.<br>If the tab bar has the **vertical** attribute set to **true** and **BottomTabbarStyle** specified, the default value is the height of the **\<Tabs>** component.<br>If the tab bar has the **vertical** attribute set to **false** and **BottomTabbarStyle** specified, the default value is **56vp**.<br>**NOTE**<br>A value less than 0 or greater than the height of the **\<Tabs>** component evaluates to the default value. |
 | animationDuration        | number                                   | Duration of the slide animation for tab switching. If this parameter is set, the tab switching animation is played when the user switches between tabs by sliding or clicking. If this parameter is not set, the tab switching animation is played only when the user switches between tabs by sliding.<br>Default value: **300**<br>**NOTE**<br>A value less than 0 or in percentage evaluates to the default value. |
 | divider<sup>10+</sup>    | [DividerStyle](#dividerstyle10) \| null | Whether the divider is displayed for the **\<TabBar>** and **\<TabContent>** components and the divider style. By default, the divider is not displayed.<br> **DividerStyle**: divider style.<br> **null**: The divider is not displayed.|
@@ -53,10 +53,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 | Name         | Type                                    | Mandatory  | Description                                 |
 | ----------- | ---------------------------------------- | ---- | ----------------------------------- |
-| strokeWidth | [Length](ts-types.md#length)             | Yes   | Width of the divider.                            |
+| strokeWidth | [Length](ts-types.md#length)             | Yes   | Width of the divider. It cannot be set in percentage.                            |
 | color       | [ResourceColor](ts-types.md#resourcecolor) | No   | Color of the divider.<br>Default value: **#33182431**          |
-| startMargin | [Length](ts-types.md#length)             | No   | Distance between the divider and the top of the sidebar.<br>Default value: **0.0**<br>Unit: vp|
-| endMargin   | [Length](ts-types.md#length)             | No   | Distance between the divider and the bottom of the sidebar.<br>Default value: **0.0**<br>Unit: vp|
+| startMargin | [Length](ts-types.md#length)             | No   | Distance between the divider and the top of the sidebar. It cannot be set in percentage.<br>Default value: **0.0**<br>Unit: vp|
+| endMargin   | [Length](ts-types.md#length)             | No   | Distance between the divider and the bottom of the sidebar. It cannot be set in percentage.<br>Default value: **0.0**<br>Unit: vp|
 
 ## BarMode
 

en/application-dev/reference/arkui-ts/ts-custom-component-lifecycle.md

 # Custom Component Lifecycle
 
-
 The lifecycle callbacks of a custom component are used to notify users of the lifecycle of the component. These callbacks are private and are invoked by the development framework at a specified time at runtime. They cannot be manually invoked from applications.
 
-
 >**NOTE**
 >
->Promise and asynchronous callback functions can be used in lifecycle functions, for example, network resource getters and timer setters.
+>- The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
+>- Promise and asynchronous callback functions can be used in lifecycle functions, for example, network resource getters and timer setters.
 
 
 ## aboutToAppear
@@ -123,8 +122,8 @@ Since API version 10, this API is supported in ArkTS widgets.
 
 **Parameters**
 
-| Name| Type                      | Description                |
-| ------ | -------------------------- | -------------------- |
+| Name   | Type                        | Description        |
+| ------ | -------------------------- | ---------- |
 | params | { [key: string]: unknown } | Parameters used for constructing the custom component.|
 
 

en/application-dev/reference/arkui-ts/ts-pixel-units.md

 # Pixel Units
 
-The framework provides four pixel units, with vp as the reference data unit.
+ArkUI provides four pixel units, with vp as the reference data unit.
 
+>**Notes:**
+>
+>The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
-| Name| Description                                                        |
-| ---- | ------------------------------------------------------------ |
-| px   | Physical pixel unit of the screen.                                          |
+
+| Name  | Description                                      |
+| ---- | ---------------------------------------- |
+| px   | Physical pixel unit of the screen.                               |
 | vp   | Pixel unit specific to the screen density. Pixels in this unit are converted into physical pixels of the screen based on the screen pixel density. This unit is used for values whose unit is not specified. On a screen with an actual width of 1440 physical pixels, 1 vp is approximately equal to 3 px.|
-| fp   | Font pixel, which is similar to vp and varies according to the system font size.|
+| fp   | Font pixel, which is similar to vp and varies according to the system font size.         |
 | lpx  | Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by **designWidth**). For example, if **designWidth** is set to **720** (default value), then 1 lpx is equal to 2 px for a screen with an actual width of 1440 physical pixels.|
 
 
@@ -15,12 +19,12 @@ The framework provides four pixel units, with vp as the reference data unit.
 
 Conversion between px and other pixel units is supported.
 
-| API                                               | Description                                                        |
-| --------------------------------------------------- | ------------------------------------------------------------ |
-| vp2px(value : number) : number  | Converts a value in units of vp to a value in units of px.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| px2vp(value : number) : number  | Converts a value in units of px to a value in units of vp.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| fp2px(value : number) : number  | Converts a value in units of fp to a value in units of px.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| px2fp(value : number) : number  | Converts a value in units of px to a value in units of fp.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| API                                      | Description                                      |
+| ---------------------------------------- | ---------------------------------------- |
+| vp2px(value : number) : number | Converts a value in units of vp to a value in units of px.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| px2vp(value : number) : number | Converts a value in units of px to a value in units of vp.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| fp2px(value : number) : number | Converts a value in units of fp to a value in units of px.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| px2fp(value : number) : number | Converts a value in units of px to a value in units of fp.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | lpx2px(value : number) : number | Converts a value in units of lpx to a value in units of px.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | px2lpx(value : number) : number | Converts a value in units of px to a value in units of lpx.<br>Since API version 9, this API is supported in ArkTS widgets.|
 

en/application-dev/reference/arkui-ts/ts-universal-attributes-click.md

@@ -12,7 +12,7 @@ Click control attributes are used to set whether a component can respond to fing
 
 | Name     | Type| Description                   |
 | ----------- | -------- | ------------------------ |
-| touchable   | boolean  | Whether the component can respond to finger interactions such as click and touch events.<br>Default value: **true**|
+| touchable<sup>(deprecated)</sup>   | boolean  | Whether the component can respond to finger interactions such as click and touch events.<br>Default value: **true**<br>**NOTE**<br>This API is deprecated since API version 9. You are advised to use [hitTestBehavior](ts-universal-attributes-hit-test-behavior.md) instead.|
 
 
 ## Example

en/application-dev/reference/arkui-ts/ts-universal-attributes-sheet-transition.md

@@ -18,7 +18,7 @@ You can bind a sheet to a component through the **bindSheet** attribute. You can
 | Name              | Type                                  | Mandatory| Description                  |
 | ------------------ | -------------------------------------- | ---- | ---------------------- |
 | height             | [SheetSize](#sheetsize10) \| [Length](ts-types.md#length) | No| Height of the sheet.         |
-| showDragBar        | boolean                                | No  | Whether the control bar is visible.         |
+| dragBar            | boolean                                | No  | Whether the control bar is visible.         |
 
 ## SheetSize<sup>10+</sup>
 

en/application-dev/reference/arkui-ts/ts-universal-events-keyboardshortcut.md

-# Custom Keyboard Shortcuts
+# Component Keyboard Shortcut Event
 
 You can set one or more custom keyboard shortcuts for a component. The behavior of these keyboard shortcuts is the same as that of clicks. Components can respond to custom keyboard shortcuts even when they are not focused.
 
@@ -12,23 +12,23 @@ keyboardShortcut(value: string | [FunctionKey], keys: Array<[ModifierKey]>)
 
 **Parameters**
 
-| Name| Type                             | Mandatory| Description                                                    |
-| ------ | ------------------------------------- | ---- | ------------------------------------------------------------ |
-| value  | string \| [FunctionKey](#functionkey) | Yes  | Character key (which can be entered through the keyboard) or [function key](#functionkey).<br>|
-| keys   | Array<[ModifierKey](#modifierkey)>    | Yes  | Modifier keys.<br>                                             |
+| Name  | Type                                 | Mandatory  | Description                                    |
+| ----- | ------------------------------------- | ---- | ---------------------------------------- |
+| value | string \| [FunctionKey](#functionkey) | Yes   | Character key (which can be entered through the keyboard) or [function key](#functionkey).<br>|
+| keys  | Array<[ModifierKey](#modifierkey)>    | Yes   | Modifier keys.<br>                              |
 
 ## ModifierKey
 
-| Name | Description               |
-| ----- | ------------------- |
+| Name   | Description          |
+| ----- | ------------ |
 | CTRL  | Ctrl key on the keyboard. |
 | SHIFT | Shift key on the keyboard.|
 | ALT   | Alt key on the keyboard.  |
 
 ## FunctionKey
 
-| Name| Description                 |
-| ---- | --------------------- |
+| Name  | Description          |
+| ---- | ------------ |
 | ESC  | Esc key on the keyboard.|
 | F1   | F1 key on the keyboard. |
 | F2   | F2 key on the keyboard. |
@@ -45,35 +45,35 @@ keyboardShortcut(value: string | [FunctionKey], keys: Array<[ModifierKey]>)
 
 ## Precautions for Using Keyboard Shortcuts
 
-| Scenario                                                        | Processing Logic                                          | Example                                                        |
-| ------------------------------------------------------------ | -------------------------------------------------------- | ------------------------------------------------------------ |
-| All components that support the **onClick** event                                   | Custom keyboard shortcuts are supported.                                        | –                                                          |
-| Requirements for custom keyboard shortcuts                                            | A custom keyboard shortcut consists of one or more modifier keys (**Ctrl**, **Shift**, **Alt**, or any combination thereof) and a character key or function key.| Button('button1').keyboardShortcut('a',[ModifierKey.CTRL])   |
-| Setting one custom keyboard shortcut for multiple components                                  | Only the first component in the component tree responds to the custom keyboard shortcut.      | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('a',[ModifierKey.CTRL]) |
-| When the component is focused or not                                        | The component responds to the custom keyboard shortcut as long as the window is focused.                              | –                                                          |
-| When a single keyboard shortcut is set, it can be canceled by setting the **value**, **keys**, or both of them to null in the **keyboardShortcut** API.<br>When multiple keyboard shortcuts are set, they cannot be canceled.| Canceling the custom keyboard shortcut settings                                        | Button('button1').keyboardShortcut('',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('a',[l])<br>Button('button3').keyboardShortcut('',[]) |
-| The independent pipeline sub-window and main window coexist                      | The focused window responds to the keyboard shortcut.                                    | –                                                          |
-| Ctrl, Shift, or Alt key in the **keys** parameter of the **keyboardShortcut** API          | Both the keys on the left or right sides of the keyboard work.                                      | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL, ModifierKey.ALT]) |
-| Character key in the **value** parameter of the **keyboardShortcut** API                       | The response is case-insensitive.                                      | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('A',[ModifierKey.CTRL]) |
-| Response to keyboard shortcuts                                                | The component responds continuously to the keyboard shortcut when all the set keys are pressed.                  | –                                                          |
-| Hidden component<br>                                              | The keyboard shortcut also works.                                              | –                                                          |
-| Components in the disable state                                             | The keyboard shortcut does not work.                                            | –                                                          |
-| 1. The keyboard shortcut is the same as an existing one (including the system-defined ones).<br>2. The **value** parameter contains multiple character keys.<br>3. The **key** parameter has a duplicate modifier key.| In these cases, the keyboard shortcut is not added, and the previously added keyboard shortcuts still work.        | Button('button1').keyboardShortcut('c',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('ab',[ModifierKey.CTRL])<br>Button('button3').keyboardShortcut('ab',[ModifierKey.CTRL,ModifierKey.CTRL]) |
+| Scenario                                      | Processing Logic                           | Example                                      |
+| ---------------------------------------- | ---------------------------------- | ---------------------------------------- |
+| All components that support the **onClick** event                        | Custom keyboard shortcuts are supported.                          | –                                       |
+| Requirements for custom keyboard shortcuts                                | A custom keyboard shortcut consists of one or more modifier keys (**Ctrl**, **Shift**, **Alt**, or any combination thereof) and a character key or function key.| Button('button1').keyboardShortcut('a',[ModifierKey.CTRL]) |
+| Setting one custom keyboard shortcut for multiple components                           | Only the first component in the component tree responds to the custom keyboard shortcut.         | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('a',[ModifierKey.CTRL]) |
+| When the component is focused or not                              | The component responds to the custom keyboard shortcut as long as the window is focused.                     | –                                       |
+| When a single keyboard shortcut is set, it can be canceled by setting the **value**, **keys**, or both of them to null in the **keyboardShortcut** API.<br>When multiple keyboard shortcuts are set, they cannot be canceled.| Canceling the custom keyboard shortcut settings                          | Button('button1').keyboardShortcut('',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('a',[l])<br>Button('button3').keyboardShortcut('',[]) |
+| The independent pipeline sub-window and main window coexist                 | The focused window responds to the keyboard shortcut.                        | –                                       |
+| Ctrl, Shift, or Alt key in the **keys** parameter of the **keyboardShortcut** API| Both the keys on the left or right sides of the keyboard work.                         | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL, ModifierKey.ALT]) |
+| Character key in the **value** parameter of the **keyboardShortcut** API           | The response is case-insensitive.                         | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('A',[ModifierKey.CTRL]) |
+| Response to keyboard shortcuts                                  | The component responds continuously to the keyboard shortcut when all the set keys are pressed.             | –                                       |
+| Hidden component<br>                              | The keyboard shortcut also works.                             | –                                       |
+| Components in the disable state                             | The keyboard shortcut does not work.                            | –                                       |
+| 1. The keyboard shortcut is the same as an existing one (including the system-defined ones).<br>2. The **value** parameter contains multiple character keys.<br>3. The **key** parameter has a duplicate modifier key.| In these cases, the keyboard shortcut is not added, and the previously added keyboard shortcuts still work.         | Button('button1').keyboardShortcut('c',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('ab',[ModifierKey.CTRL])<br>Button('button3').keyboardShortcut('ab',[ModifierKey.CTRL,ModifierKey.CTRL]) |
 
 ## System-defined Keyboard Shortcuts
 
-| Keyboard Shortcut        | Component                                                        |
-| -------------- | ------------------------------------------------------------ |
+| Keyboard Shortcut           | Component                                      |
+| -------------- | ---------------------------------------- |
 | Ctrl + C       | [Image](ts-basic-components-image.md), [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
 | Ctrl+ A        | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
 | Ctrl+ V        | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
 | Ctrl+ X        | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
-| Shift + arrow keys| [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
+| Shift + arrow keys   | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
 | Ctrl+ Shift+ Z | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
 | Ctrl+ Z        | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
 | Ctrl+ Y        | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
-| Arrow keys and Enter key| [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
-| Tab key         | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
+| Arrow keys and Enter key       | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
+| Tab key          | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
 
 ## Example
 

en/application-dev/reference/js-service-widget-ui/js-service-widget-syntax-css.md

@@ -23,7 +23,7 @@ CSS files can be imported using the **\@import** statement. This facilitates mod
 The **.css** file with the same name as the **.hml** file in each page directory describes the styles of components on the HML page, determining how the components will be displayed.
 
 1. Internal style: The **style** and **class** attributes can be used to specify the component style. Example:
-  
+
    ```html
    <!-- index.hml -->
    <div class="container">
@@ -31,7 +31,7 @@ The **.css** file with the same name as the **.hml** file in each page directory
    </div>
    ```
 
-   
+
    ```css
    /* index.css */
    .container {
@@ -40,7 +40,7 @@ The **.css** file with the same name as the **.hml** file in each page directory
    ```
 
 2. External style files: You need to import the files. For example, create a **style.css** file in the **common** directory and import the file at the beginning of **index.css**.
-  
+
    ```css
    /* style.css */
    .title {
@@ -48,7 +48,7 @@ The **.css** file with the same name as the **.hml** file in each page directory
    }
    ```
 
-   
+
    ```css
    /* index.css */
    @import '../../common/style.css';
@@ -62,10 +62,10 @@ The **.css** file with the same name as the **.hml** file in each page directory
 
 A CSS selector is used to select elements for which styles need to be added to. The following table lists the supported selectors.
 
-| Selector| Example| Description|
-| -------- | -------- | -------- |
+| Selector   | Example        | Description                     |
+| ------ | ---------- | ------------------------- |
 | .class | .container | Selects all components whose **class** is **container**.|
-| \#id | \#titleId | Selects all components whose **id** is **titleId**.|
+| \#id   | \#titleId  | Selects all components whose **id** is **titleId**.     |
 
 Example:
 

en/application-dev/ui/arkts-common-components-button.md

@@ -54,33 +54,36 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or
 
 
 - Capsule button (default type)
+  
   Buttons of this type have rounded corners whose radius is automatically set to half of the button height. The rounded corners cannot be reset through the **borderRadius** attribute.
-
+  
   ```ts
   Button('Disable', { type: ButtonType.Capsule, stateEffect: false }) 
     .backgroundColor(0x317aff) 
     .width(90)
     .height(40)
   ```
-
+  
   ![en-us_image_0000001511421208](figures/en-us_image_0000001511421208.png)
 
 
 - Circle button
+  
   Buttons of this type are round. The rounded corners cannot be reset through the **borderRadius** attribute.
-
+  
   ```ts
   Button('Circle', { type: ButtonType.Circle, stateEffect: false }) 
     .backgroundColor(0x317aff) 
     .width(90) 
     .height(90)
   ```
-
+  
   ![en-us_image_0000001511740428](figures/en-us_image_0000001511740428.png)
-
+  
 - Normal button
+  
   Buttons of this type have rounded corners set to 0. The rounded corners can be reset through the **borderRadius** attribute.
-
+  
   ```ts
   Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
     .borderRadius(8) 
@@ -88,56 +91,60 @@ Use the **type** parameter to set the button type to **Capsule**, **Circle**, or
     .width(90)
     .height(40)
   ```
-
+  
   ![en-us_image_0000001563060641](figures/en-us_image_0000001563060641.png)
 
 
 ## Setting Styles
 
-- Set the border radius:
+- Set the border radius.
+  
   In general cases, you can use universal attributes to define the button styles. For example, you can use the **borderRadius** attribute to set the border radius.
-
+  
   ```ts
   Button('circle border', { type: ButtonType.Normal }) 
     .borderRadius(20)
     .height(40)
   ```
-
+  
   ![en-us_image_0000001511900392](figures/en-us_image_0000001511900392.png)
 
 
-- The **Font** type is used to set the text style.
-  Add a font style for text displayed on the button.
-
+- Set the text style.
+  
+  Add text style attributes for the button.
+  
   ```ts
   Button('font style', { type: ButtonType.Normal }) 
     .fontSize(20) 
     .fontColor(Color.Pink) 
     .fontWeight(800)
   ```
-
+  
   ![en-us_image_0000001511580828](figures/en-us_image_0000001511580828.png)
 
 
-- Set the background color:
-  You can do so by adding the **backgroundColor** attribute.
-
+- Set the background color.
+  
+  Add the **backgroundColor** attribute for the button.
+  
   ```ts
   Button('background color').backgroundColor(0xF55A42)
   ```
-
+  
   ![en-us_image_0000001562940477](figures/en-us_image_0000001562940477.png)
 
 
-- Assign a function to the button:
+- Assign a function to the button.
+  
   In this example, the delete function is assigned to the button.
-
+  
   ```ts
   Button({ type: ButtonType.Circle, stateEffect: true }) { 
     Image($r('app.media.ic_public_delete_filled')).width(30).height(30) 
   }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42)
   ```
-
+  
   ![en-us_image_0000001511740436](figures/en-us_image_0000001511740436.png)
 
 
@@ -153,9 +160,10 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
 ```
 
 
-## Example Scenario
+## Example
+
+- Using the button for startup
 
-- Using the Button for Startup
   You can use the button for any UI element that involves the startup operation. The button triggers the predefined event based on the user's operation. For example, you can use a button in the **\<List>** container to redirect the user to another page.
 
   ```ts
@@ -194,7 +202,8 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
   ![en-us_image_0000001562700393](figures/en-us_image_0000001562700393.png)
 
 
-- Use the button for submitting forms:
+- Using the button for submitting forms
+
   On the user login/registration page, you can use a button to submit a login or registration request.
 
   ```ts
@@ -217,7 +226,8 @@ Button('Ok', { type: ButtonType.Normal, stateEffect: true })
 
   ![en-us_image_0000001562940473](figures/en-us_image_0000001562940473.png)
 
-- Configure the button to float:
+- Configuring the button to float
+
   The button can remain floating when the user swipes on the screen.
 
   ```ts

en/application-dev/ui/arkts-common-events-touch-screen-event.md

@@ -12,7 +12,7 @@ Touchscreen events are events triggered when a finger or stylus is placed on, mo
 
 ## Click Event
 
-A click event is triggered when a complete press and lift action performed by using a finger or a stylus. When a click event occurs, the following callback is triggered:
+A click event is triggered when a complete press and lift action is performed by using a finger or a stylus. When a click event occurs, the following callback is triggered:
 
 ```ts
 onClick(event: (event?: ClickEvent) => void)

en/application-dev/ui/arkts-drawing-customization-on-canvas.md

@@ -89,11 +89,7 @@ You can draw custom graphics on the canvas in any of the following ways:
   import lottie from '@ohos/lottie'
   ```
 
-  For details about the APIs, see [Lottie](../reference/arkui-ts/ts-components-canvas-lottie.md).
-
-  >**NOTE**
-  >
-  >Before using Lottie for the first time, run the **ohpm install \@ohos/lottieETS** command in the Terminal window to download Lottie.
+  For details about the APIs, see [Lottie](https://gitee.com/openharmony-tpc/lottieETS).
 
 
 ## Initializing the Canvas Component
@@ -117,7 +113,7 @@ Canvas(this.context)
 
 ## Canvas Component Drawing Modes
 
-Two modes are available for drawing with the **Canvas** component: 
+Two modes are available for drawing with the **Canvas** component:
 
 - After the **onReady()** callback of the **Canvas** component is invoked, use the **CanvasRenderingContext2D** and **OffscreenCanvasRenderingContext2D** objects to call related APIs for drawing.
 
@@ -159,9 +155,8 @@ Two modes are available for drawing with the **Canvas** component:
 
 - Draw a basic shape.
   
-
-You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#arc), [ellipse](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#ellipse), and [rect](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#rect).
-
+  You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#arc), [ellipse](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#ellipse), and [rect](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#rect).
+  
   ```ts
   Canvas(this.context)
     .width('100%')
@@ -183,9 +178,9 @@ You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/t
   })
   
   ```
-
+  
 ![2023022794521(1)](figures/2023022794521(1).jpg)
-
+  
 - Draw text.
 
   You can use APIs such as [fillText](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#filltext) and [strokeText](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#stroketext) to draw text.
@@ -345,4 +340,3 @@ You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/t
   ```
 
   ![2023032422159](figures/2023032422159.jpg)
-

en/application-dev/ui/arkts-event-overview.md

-# Event Overview
+# Interaction Event Overview
 
 
-Interaction events are classified into touchscreen events, keyboard and mouse events, and focus events based on trigger types.
+Interaction events are classified based on trigger types into touchscreen events, keyboard and mouse events, and focus events.
 
 
-- [Touchscreen event](arkts-common-events-touch-screen-event.md): single-finger or single-stroke operation performed by a finger or stylus on the touchscreen.
+- [Touchscreen event](arkts-common-events-touch-screen-event.md): an event triggered by the operation performed a finger or stylus on the touchscreen.
 
-- [Keyboard and mouse event](arkts-common-events-device-input-event.md): includes operation events of the peripheral mouse or touchpad and key events of the peripheral keyboard.
-  - The mouse event refers to an event responded to when an operation is performed with a peripheral mouse/touchpad.
-  - The key event refer to an event responded to when an operation is performed with a peripheral keyboard.
+- [Keyboard and mouse event](arkts-common-events-device-input-event.md): an event triggered by an operation performed on a peripheral mouse, touchpad, or keyboard.
+  - The mouse event refers to an event responded to when an operation is performed with a peripheral mouse or touchpad.
+  - The keyboard event refera to an event responded to when an operation is performed with a peripheral keyboard.
 
-- [Focus event](arkts-common-events-focus-event.md): controls the focusability and response events of the component in the preceding ways.
+- [Focus event](arkts-common-events-focus-event.md): an event triggered when a component receives or loses focus.
 
 
-The gesture event includes the gesture binding method and the bound gesture. The bound gesture may be classified into two types: a single gesture and a combined gesture, and is distinguished according to complexity of the gesture.
+The gesture event includes the gesture binding method and the bound gesture – a single or combined gesture.
 
 
-- [Gesture binding](arkts-gesture-events-binding.md): binds a single gesture or a combination of gestures to a component and declares the response priority of the bound gesture.
+- [Gesture binding method](arkts-gesture-events-binding.md): a method that binds a single or combined gesture to a component and declares the response priority of the bound gesture.
 
-- [Single gesture](arkts-gesture-events-single-gesture.md): basic unit of a gesture, which is a part of all complex gestures.
+- [Single gesture](arkts-gesture-events-single-gesture.md): basic unit of gestures, which is a part of all complex gestures.
 
-- [Combined gesture](arkts-gesture-events-combined-gestures.md): a combination of multiple single gestures. Multiple single gestures can be combined into a combined gesture according to a declared type and a certain rule, and the combined gesture can be used.
+- [Combined gesture](arkts-gesture-events-combined-gestures.md): a combination of single gestures brought together according to a declared type and a certain rule.

en/application-dev/web/web-debugging-with-devtools.md

@@ -28,8 +28,17 @@ To use DevTools for frontend page debugging, perform the following steps:
      }
    }
    ```
+2. Declare the required permission in the **module.json5** file of the application project in DevEco Studio.
 
-2. Connect your device to a PC, and configure port mapping on the PC as follows:
+   ```
+   "requestPermissions":[
+      {
+        "name" : "ohos.permission.INTERNET"
+      }
+    ]
+   ```
+
+3. Connect your device to a PC, and configure port mapping on the PC as follows:
 
    ```
    // Configure port mapping.
@@ -38,7 +47,7 @@ To use DevTools for frontend page debugging, perform the following steps:
    hdc fport ls
    ```
 
-3. Enter **chrome://inspect/\#devices** in the address box of the Chrome browser on the PC. Once the device is identified, you can get started with page debugging. The debugging effect is as follows:
+4. Enter **chrome://inspect/\#devices** in the address box of the Chrome browser on the PC. Once the device is identified, you can get started with page debugging. The debugging effect is as follows:
 
      **Figure 1** Page debugging effect 
 

en/release-notes/changelogs/OpenHarmony_3.2.9.1/changelogs-arkui.md

@@ -2,15 +2,15 @@
 
 ## cl.arkui.1 xcomponent API Change
 
-The following APIs of the **xcomponent** component of the ArkUI subsystem are changed:
+Changed the following APIs of the **xcomponent** component of the ArkUI subsystem:
 
- - **getXComponentSurfaceId** and **setXComponentSurfaceSize**: The **@systemapi** tag is removed.
- - **getXComponentSurfaceId**, **getXComponentContext**, and **setXComponentSurfaceSize**: The return value types are specified.
+ - **getXComponentSurfaceId** and **setXComponentSurfaceSize**: Removed the **@systemapi** tag.
+ - **getXComponentSurfaceId**, **getXComponentContext**, and **setXComponentSurfaceSize**: Specified return value types.
 
-You need to adapt your applications based on the following information.
+You need to adapt your application based on the following information.
 
 
-**Change Impacts**
+**Change Impact**
 
 Released JS APIs are affected. The application needs to adapt these APIs so that it can be properly compiled in the SDK environment of the new version.
 
@@ -27,35 +27,35 @@ Startup rules for different scenarios are as follows:
 Adaptions to be made:
 
   - **getXComponentSurfaceId**
-    - OpenHarmony 3.2 Beta3 rules:
+    - In OpenHarmony 3.2 Beta3:
       - System API
       - No specified return value
-    - OpenHarmony 3.2 Beta4 rules:
+    - In OpenHarmony 3.2 Beta4:
       - Public API
       - Return value type specified as string
       - You need to process the return value as a string.
   - **setXComponentSurfaceSize**
-    - OpenHarmony 3.2 Beta3 rules:
+    - In OpenHarmony 3.2 Beta3:
       - System API
       - No specified return value
-    - OpenHarmony 3.2 Beta4 rules:
+    - In OpenHarmony 3.2 Beta4:
       - Public API
       - Return value type specified as void
       - You need to process the return value as a void.
   - **getXComponentContext**
-    - OpenHarmony 3.2 Beta3 rules:
+    - In OpenHarmony 3.2 Beta3:
       - No specified return value
-    - OpenHarmony 3.2 Beta4 rules:
+    - In OpenHarmony 3.2 Beta4:
       - Return value type specified as object
       - You need to process the return value as an object.
-
+        
 ## cl.arkui.2 Change of Styles of Popup Component and APIs
 
 The styles of the **alertDialog**, **actionSheet**, and **customDialog** components, as well as the **prompt** and **promptAction** APIs were changed. Specifically speaking:
 
 The popup background blurring effect is added to **promptAction.showDialog**, **promptAction.showActionMenu**, **alertDialog**, **actionSheet**, and **customDialog**.
 
-**Change Impacts**
+**Change Impact**
 
 The popup background blurring effect is set by default.
 
@@ -70,9 +70,10 @@ No adaptation is required.
 
 ## cl.arkui.3 Supplementation of the Initialization Mode and Restriction Verification Scenarios of Custom Components' Member Variables
 
-For details, see [Restrictions and Extensions](../../../application-dev/quick-start/arkts-restrictions-and-extensions.md).
+Added verification for scenarios previously left out concerning initialization of custom components' member variables.
+
 
-**Change Impacts**
+**Change Impact**
 
 If custom components' member variables are initialized or assigned with values not according to the document specifications, an error will be reported during compilation.
 
@@ -86,10 +87,10 @@ Make modification according to specifications in the above document.
 
 ## cl.arkui.4 Supplementation of Verification Scenarios of Value Assignment Restrictions on Member Variables of Custom Parent Components and Child Components
 
-For details, see [Restrictions and Extensions](../../../application-dev/quick-start/arkts-restrictions-and-extensions.md).
+Added verification for scenarios previously left out concerning value assignment of member variables of custom parent components and child components.
 
 
-**Change Impacts**
+**Change Impact**
 
 If member variables of the parent component or child component are initialized not according to the document specifications, an error will be reported during compilation.
 
@@ -101,14 +102,13 @@ N/A
 
 Make modification according to specifications in the above document, using other decorators or normal member variables for value assignment.
 
-## cl.arkui.5 Supplementation of Verification for a Single Subcomponent
-
-Verification for a single subcomponent is enabled for the following components: **Button**, **FlowItem**, **GridItem**, **GridCol**, **ListItem**, **Navigator**, **Refresh**, **RichText**, **ScrollBar**, **StepperItem**, and **TabContent**.
+## cl.arkui.5 Supplementation of Verification for a Single Child Component
 
+Added verification for a single child component for the following components: **Button**, **FlowItem**, **GridItem**, **GridCol**, **ListItem**, **Navigator**, **Refresh**, **RichText**, **ScrollBar**, **StepperItem**, and **TabContent**.
 
-**Change Impacts**
+**Change Impact**
 
-If one of the preceding components contains more than one subcomponent, an error will be reported during compilation.
+If one of the preceding components contains more than one child component, an error will be reported during compilation.
 
 **Key API/Component Changes**
 
@@ -123,4 +123,4 @@ RichText('RichText') {
 
 **Adaptation Guide**
 
-Make modification based on the error message. Make sure that the specified component contains only one subcomponent.
+Make modification based on the error message. Make sure that the specified component contains only one child component.

en/release-notes/changelogs/OpenHarmony_4.0.7.3/changelog-web.md

+# Web Subsystem Changelog
+
+Compared with earlier versions, OpenHarmony 4.0.7.3 has the following API changes in its web subsystem:
+
+## cl.web.1 New Input Parameter Type of the setResponseData API
+
+Added the input parameter type **Resource** for the **setResponseData** API.
+
+**Change Impact**
+
+In the scenario where a HAP file is not decompressed, the file path in the HAP does not exist. Under this scenario, to access resources in the HAP file, you must use the input parameter **data:Resource** instead of **data:number**.
+
+
+**Key API/Component Changes**
+
+- Involved APIs:
+
+  setResponseData
+
+- Before change: 
+
+  ```ts
+  setResponseData(data: string | number)
+  ```
+
+- After change:
+
+  ```ts
+  setResponseData(data: string | number | Resource)
+  ```
+
+**Adaptation Guide**
+
+When a HAP file is decompressed, open the hold the FD of the target resource file, and then transfer the resource response data to the kernel through **setResponseData(data:number)**.
+
+```ts
+// xxx.ets
+import web_webview from '@ohos.web.webview'
+import fileio from '@ohos.fileio';
+
+@Entry
+@Component
+struct WebComponent {
+  controller: web_webview.WebviewController = new web_webview.WebviewController()
+  responseweb: WebResourceResponse = new WebResourceResponse()
+  heads: Header[] = new Array()
+
+  build() {
+    Column() {
+      Web({ src: 'www.example.com', controller: this.controller })
+        .onInterceptRequest((event) => {
+          console.log('url:' + event.request.getRequestUrl())
+          var head1:Header = {
+            headerKey:"Connection",
+            headerValue:"keep-alive"
+          }
+          var head2:Header = {
+            headerKey:"Cache-Control",
+            headerValue:"no-cache"
+          }
+          var length = this.heads.push(head1)
+          length = this.heads.push(head2)
+          this.responseweb.setResponseHeader(this.heads)
+          this.responseweb.setResponseEncoding('utf-8')
+          this.responseweb.setResponseMimeType('text/html')
+          this.responseweb.setResponseCode(200)
+          this.responseweb.setReasonMessage('OK')
+
+          //// fd scheme --start
+          // '/xxx/.../test.html' is the local path of the file.
+          // @ts-ignore
+          let fd = fileio.openSync('/xxx/.../test.html', 0o102, 0o666)
+          this.responseweb.setResponseData(fd)
+          //// fd scheme --end
+
+          return this.responseweb
+        })
+    }
+  }
+}
+```
+
+When a HAP file is decompressed, the file path in the HAP does not exist. In this case, transfer the resource response data to the kernel through **setResponseData(data:Resource)**.
+```ts
+// xxx.ets
+import web_webview from '@ohos.web.webview'
+
+@Entry
+@Component
+struct WebComponent {
+  controller: web_webview.WebviewController = new web_webview.WebviewController()
+  responseweb: WebResourceResponse = new WebResourceResponse()
+  heads: Header[] = new Array()
+
+  build() {
+    Column() {
+      Web({ src: 'www.example.com', controller: this.controller })
+        .onInterceptRequest((event) => {
+          console.log('url:' + event.request.getRequestUrl())
+          var head1:Header = {
+            headerKey:"Connection",
+            headerValue:"keep-alive"
+          }
+          var head2:Header = {
+            headerKey:"Cache-Control",
+            headerValue:"no-cache"
+          }
+          var length = this.heads.push(head1)
+          length = this.heads.push(head2)
+          this.responseweb.setResponseHeader(this.heads)
+          this.responseweb.setResponseEncoding('utf-8')
+          this.responseweb.setResponseMimeType('text/html')
+          this.responseweb.setResponseCode(200)
+          this.responseweb.setReasonMessage('OK')
+          
+          //// Resource scheme --start
+          // Specify the target file in the rawfile directory of the HAP file.
+          this.responseweb.setResponseData($rawfile('test.html'))
+          //// Resource scheme --end
+
+          return this.responseweb
+        })
+    }
+  }
+}
+```

en/release-notes/changelogs/OpenHarmony_4.0.7.5/changelogs-arkui.md

+# ArkUI Subsystem Changelog
+
+## cl.arkui.1 Change in the \<Button> Component Hover Effect
+
+The hover effect of the **\<Button>** component is changed from scale-up by 100% to 105% to overlay of 0% to 5% opacity. The pressed effect of the component is changed to overlay of 5% to 10% opacity.
+
+**Change Impact**
+
+The visual effect of the **\<Button>** is affected.
+
+## cl.arkui.2 Change in the Multi-line Text Alignment Mode of Toasts
+
+Changed the alignment mode of multi-line text in toasts from center-aligned to left-aligned.
+
+**Change Impact**
+
+The visual effect of toasts is affected.

en/release-notes/changelogs/v4.0-beta1/Readme-EN.md

@@ -8,5 +8,10 @@
 | Multi-language runtime subsystem| Verification enhanced    | [New alarms are added and existing alarms are enhanced along with the upgrade from LLVM 12 to LLVM 15](changelogs-arkcompiler.md)|
 | Multi-language runtime subsystem| Verification enhanced    | [LLVM emu-tls is changed. If you use both LLVM 12 and LLVM 15, the emu-tls symbol cannot be found in libc++.so.](changelogs-arkcompiler.md)|
 | Multi-language runtime subsystem| Verification enhanced    | [New features and internal interface changes in the official release of LLVM 15 are inherited.](changelogs-arkcompiler.md)|
+| ArkUI          | Behavior changed    | [The stack layout issue is fixed.](changelogs-arkui.md)                    |
+| ArkUI          | Default value changed  | [The default state of the scrollbar in the \<List> and \<Gird> components is changed.](changelogs-arkui.md) |
+| ArkUI          | UX changed      | [The hover effect of the \<Button> component is changed from scale-up by 100% to 105% to overlay of 0% to 5% opacity.](changelogs-arkui.md)|
+| ArkUI          | UX changed      | [The alignment mode of multi-line text in toasts is changed from center-aligned to left-aligned.](changelogs-arkui.md)|
 | Bundle management subsystem        | Mechanism changed    | [The HAP is no longer decompressed during HAP installation.](changelogs-bundlemanager.md)|
+| Web            | Input parameter added | [The input parameter type Resource is added for the setResponseData API.](changelogs-web.md) |
 | Resource scheduler subsystem      | Behavior changed    | [The reminder agent allows you to customize buttons for system applications. Clicking a custom button will redirect you to the specified application page.](changelogs-resourceschedule.md)|

zh-cn/application-dev/Readme-CN.md

@@ -50,6 +50,7 @@
       - [\@BuilderParam装饰器：引用\@Builder函数](quick-start/arkts-builderparam.md)
       - [\@Styles装饰器：定义组件重用样式](quick-start/arkts-style.md)
       - [\@Extend装饰器：定义扩展组件样式](quick-start/arkts-extend.md)
+      - [\@AnimatableExtend装饰器：定义可动画属性](quick-start/arkts-animatable-extend.md)
       - [stateStyles：多态样式](quick-start/arkts-statestyles.md)
     - 状态管理
       - [状态管理概述](quick-start/arkts-state-management-overview.md)

zh-cn/application-dev/application-models/arkts-ui-widget-event-overview.md

@@ -21,7 +21,7 @@ action参数说明：
 
 | **Key** | **Value** | **样例描述** |
 | -------- | -------- | -------- |
-| "action" | string | action的类型，支持三种预定义的类型：<br/>-&nbsp;"router"：跳转到提供方应用的指定UIAbility。<br/>-&nbsp;"message"：自定义消息，触发后会调用提供方FormExtensionAbility的[onFormEvent()](../reference/apis/js-apis-app-form-formExtensionAbility.md#onformevent)生命周期回调。<br/>-&nbsp;"call"：后台启动提供方应用。触发后会拉起提供方应用的指定UIAbility，但不会调度到前台。提供方应用需要具备后台运行权限([ohos.permission.KEEP_BACKGROUND_RUNNING](../security/permission-list.md#ohospermissionkeep_background_running))。 |
+| "action" | string | action的类型，支持三种预定义的类型：<br/>-&nbsp;"router"：跳转到提供方应用的指定UIAbility。<br/>-&nbsp;"message"：自定义消息，触发后会调用提供方FormExtensionAbility的[onFormEvent()](../reference/apis/js-apis-app-form-formExtensionAbility.md#onformevent)生命周期回调。<br/>-&nbsp;"call"：后台启动提供方应用。触发后会拉起提供方应用的指定UIAbility（仅支持[launchType](uiability-launch-type.md)为singleton的UIAbility，即启动模式为单实例的UIAbility），但不会调度到前台。提供方应用需要具备后台运行权限([ohos.permission.KEEP_BACKGROUND_RUNNING](../security/permission-list.md#ohospermissionkeep_background_running))。 |
 | "bundleName" | string | "router"&nbsp;/&nbsp;"call"&nbsp;类型时跳转的包名，可选。 |
 | "moduleName" | string | "router"&nbsp;/&nbsp;"call"&nbsp;类型时跳转的模块名，可选。 |
 | "abilityName" | string | "router"&nbsp;/&nbsp;"call"&nbsp;类型时跳转的UIAbility名，必填。 |

zh-cn/application-dev/application-models/create-dataability.md

@@ -12,7 +12,7 @@ import dataAbility from '@ohos.data.dataAbility'
 import relationalStore from '@ohos.data.relationalStore'
 
 const TABLE_NAME = 'book'
-const STORE_CONFIG = { name: 'book.db' }
+const STORE_CONFIG = { name: 'book.db',securityLevel: 1 }
 const SQL_CREATE_TABLE = 'CREATE TABLE IF NOT EXISTS book(id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, introduction TEXT NOT NULL)'
 let rdbStore: relationalStore.RdbStore = undefined
 

zh-cn/application-dev/application-models/hop-cross-device-migration.md

-# 跨端迁移（仅对系统应用开放）
+# 跨端迁移
 
 
 ## 功能描述
@@ -40,9 +40,10 @@
 
 | **接口名** | **描述** |
 | -------- | -------- |
-| onContinue(wantParam&nbsp;:&nbsp;{[key:&nbsp;string]:&nbsp;any}):&nbsp;OnContinueResult | 迁移发起端在该回调中保存迁移所需要的数据，同时返回是否同意迁移：<br/>-&nbsp;AGREE：表示同意。<br/>-&nbsp;REJECT：表示拒绝。<br/>-&nbsp;MISMATCH：表示版本不匹配。 |
-| onCreate(want:&nbsp;Want,&nbsp;param:&nbsp;AbilityConstant.LaunchParam):&nbsp;void; | 多实例应用迁移接收端在该回调中完成数据恢复，并触发页面恢复。 |
-| onNewWant(want:&nbsp;Want,&nbsp;launchParams:&nbsp;AbilityConstant.LaunchParam):&nbsp;void; | 单实例应用迁移接收端在该回调中完成数据恢复，并触发页面恢复。 |
+| onContinue(wantParam&nbsp;:&nbsp;{[key:&nbsp;string]:&nbsp;any}):&nbsp;OnContinueResult | 迁移发起端在该回调中保存迁移所需要的数据，同时返回是否同意迁移：<br/>-&nbsp;AGREE：表示同意。<br/>-&nbsp;REJECT：表示拒绝：如应用在onContinue中异常可以直接REJECT。<br/>-&nbsp;MISMATCH：表示版本不匹配：迁移发起端应用可以在onContinue中获取到迁移接收端应用的版本号，进行协商后，如果版本不匹配导致无法迁移，可以返回该错误。 |
+| onCreate(want:&nbsp;Want,&nbsp;param:&nbsp;AbilityConstant.LaunchParam):&nbsp;void; | 多实例应用迁移接收端在该回调中完成数据恢复，并触发页面恢复。详见[应用组件启动模式](uiability-launch-type.md) |
+| onNewWant(want:&nbsp;Want,&nbsp;launchParams:&nbsp;AbilityConstant.LaunchParam):&nbsp;void; | 单实例应用迁移接收端在该回调中完成数据恢复，并触发页面恢复。详见[应用组件启动模式](uiability-launch-type.md) |
+
 
 
 ## 开发步骤
@@ -77,7 +78,7 @@
    当应用触发迁移时，[onContinue()](../reference/apis/js-apis-app-ability-uiAbility.md#abilityoncontinue)接口在发起端被调用，开发者可以在该接口中保存迁移数据，实现应用兼容性检测，决定是否支持此次迁移。
    - 保存迁移数据：开发者可以将要迁移的数据通过键值对的方式保存在wantParam中。
 
-   - 应用兼容性检测：开发者可以通过从wantParam中获取目标应用的版本号与本应用版本号做兼容性校验。
+   - 应用兼容性检测：开发者可以通过从wantParam中获取目标应用的版本号与本应用版本号做兼容性校验。开发者可以在触发迁移时从`onContinue`接口中`wantParam.version`获取到迁移接收端应用的版本号与迁移发起端应用版本号做兼容校验。
 
    - 迁移决策：开发者可以通过onContinue接口的返回值决定是否支持此次迁移，返回值信息见[接口说明](#接口说明)。
 
@@ -101,7 +102,7 @@
    - 多实例场景onCreate实现示例
       - 目标端设备上，在onCreate中根据launchReason判断该次启动是否为迁移LaunchReason.CONTINUATION。
       - 开发者可以从want中获取保存的迁移数据。
-      - 完成数据恢复后，开发者需要调用restoreWindowStage来触发页面恢复。
+      - 完成数据恢复后，开发者需要调用restoreWindowStage来触发页面恢复：包括页面栈信息。
         
          ```ts
          import UIAbility from '@ohos.app.ability.UIAbility'; 

zh-cn/application-dev/application-models/service-widget-overview.md

@@ -56,7 +56,7 @@ ArkTS卡片与JS卡片具备不同的实现原理及特征，在场景能力上
 
 推荐在开发需求需要动态能力的卡片时使用ArkTS卡片，因为它拥有更加丰富的能力和适应更多的场景，能够提高效率并实现动态化。但如果只需要静态展示卡片，可以考虑使用JS卡片。
 
-# 相关实例
+## 相关实例
 
 针对Stage模型卡片提供方的开发，有以下相关实例可供参考：
 

zh-cn/application-dev/database/Readme-CN.md

@@ -19,4 +19,5 @@
 - 同设备跨应用数据共享（仅对系统应用开放）
   - [同设备跨应用数据共享概述](share-device-data-across-apps-overview.md)
   - [通过DataShareExtensionAbility实现数据共享](share-data-by-datashareextensionability.md)
-  - [通过静默数据访问实现数据共享](share-data-by-silent-access.md)
+  - [通过数据管理服务实现数据共享静默访问](share-data-by-silent-access.md)
+