diff --git a/BUILD.gn b/BUILD.gn
index a88bb2958bd48a46a59ed52175a1ec828ea0f0fc..5cdbddc5e7d0576f63d9ba33f73ee4167fb6c074 100644
--- a/BUILD.gn
+++ b/BUILD.gn
@@ -28,7 +28,7 @@ ohos_copy("ets_internal_api") {
 
 ohos_copy("ets_component") {
   sources = [
-    "api/@internal/component/ets/ability_component.d.ts",
+    "api/@internal/component/ets/action_sheet.d.ts",
     "api/@internal/component/ets/alert_dialog.d.ts",
     "api/@internal/component/ets/alphabet_indexer.d.ts",
     "api/@internal/component/ets/animator.d.ts",
@@ -36,6 +36,7 @@ ohos_copy("ets_component") {
     "api/@internal/component/ets/blank.d.ts",
     "api/@internal/component/ets/button.d.ts",
     "api/@internal/component/ets/calendar.d.ts",
+    "api/@internal/component/ets/canvas.d.ts",
     "api/@internal/component/ets/circle.d.ts",
     "api/@internal/component/ets/column.d.ts",
     "api/@internal/component/ets/column_split.d.ts",
@@ -51,12 +52,10 @@ ohos_copy("ets_component") {
     "api/@internal/component/ets/forEach.d.ts",
     "api/@internal/component/ets/form_component.d.ts",
     "api/@internal/component/ets/gauge.d.ts",
-    "api/@internal/component/ets/geometry_view.d.ts",
     "api/@internal/component/ets/gesture.d.ts",
     "api/@internal/component/ets/grid.d.ts",
     "api/@internal/component/ets/gridItem.d.ts",
     "api/@internal/component/ets/grid_container.d.ts",
-    "api/@internal/component/ets/hyperlink.d.ts",
     "api/@internal/component/ets/image.d.ts",
     "api/@internal/component/ets/image_animator.d.ts",
     "api/@internal/component/ets/index.d.ts",
@@ -83,12 +82,16 @@ ohos_copy("ets_component") {
     "api/@internal/component/ets/row.d.ts",
     "api/@internal/component/ets/row_split.d.ts",
     "api/@internal/component/ets/scroll.d.ts",
+    "api/@internal/component/ets/scroll_bar.d.ts",
     "api/@internal/component/ets/search.d.ts",
     "api/@internal/component/ets/shape.d.ts",
+    "api/@internal/component/ets/sheet.d.ts",
     "api/@internal/component/ets/slider.d.ts",
     "api/@internal/component/ets/span.d.ts",
     "api/@internal/component/ets/stack.d.ts",
     "api/@internal/component/ets/stateManagement.d.ts",
+    "api/@internal/component/ets/stepper.d.ts",
+    "api/@internal/component/ets/stepperItem.d.ts",
     "api/@internal/component/ets/swiper.d.ts",
     "api/@internal/component/ets/tab_content.d.ts",
     "api/@internal/component/ets/tabs.d.ts",
@@ -99,7 +102,7 @@ ohos_copy("ets_component") {
     "api/@internal/component/ets/toggle.d.ts",
     "api/@internal/component/ets/units.d.ts",
     "api/@internal/component/ets/video.d.ts",
-    "api/@internal/component/ets/web.d.ts",
+    "api/@internal/component/ets/xcomponent.d.ts",
   ]
   outputs = [ target_out_dir + "/$target_name/{{source_file_part}}" ]
   module_source_dir = target_out_dir + "/$target_name"
diff --git a/api/@internal/component/ets/ability_component.d.ts b/api/@internal/component/ets/ability_component.d.ts
deleted file mode 100644
index 6375574cc39f560f6a56539ff71a1e00758b4385..0000000000000000000000000000000000000000
--- a/api/@internal/component/ets/ability_component.d.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { CommonMethod } from "./common";
-import { Want } from "../api/common/ability/want";
-
-/**
- * controller of ability.
- * @since 7
- * @systemapi
- */
-export declare class AbilityController {
-  /**
-   * constructor.
-   */
-  constructor();
-
-  /**
-   * load the ability in the AbilityComponent.
-   * Want: Capability description to be loaded
-   */
-  startAbility(value: Want);
-
-  /**
-   * Perform a return operation inside the AbilityComponent.
-   */
-  performBackPress();
-
-  /**
-   * Obtains the number of tasks in the internal task stack of the AbilityComponent.
-   */
-  getStackCount();
-}
-
-/**
- * AbilityComponent constructor params.
- * @since 7
- * @systemapi
- */
-export declare interface AbilityComponentOptions {
-  /**
-   * Capability description to be loaded.
-   */
-  want: Want;
-
-  /**
-   * controller: Ability Controller.
-   */
-  controller?: AbilityController;
-}
-
-/**
- * AbilityComponent inheritance abilitycomponentattribute.
- * @since 7
- * @systemapi
- */
-interface AbilityComponent extends AbilityComponentAttribute<AbilityComponent> {
-  (value: AbilityComponentOptions): AbilityComponent;
-}
-
-/**
- * The attribute of ability.
- * @since 7
- * @systemapi
- */
-declare class AbilityComponentAttribute<T> extends CommonMethod<T> {
-  /**
-   * Callback when the abilityComponent environment starts up, after which the abilityController methods can be used.
-   */
-  onReady(event: () => void): T;
-
-  /**
-   * Callback when the abilityComponent environment is destroyed.
-   */
-  onDestroy(event: () => void): T;
-
-  /**
-   * This event is triggered when the abilityComponent loads the mobility. Name indicates the Ability name.
-   */
-  onAbilityCreated(event: (name: string) => void): T;
-
-  /**
-   * Internal to the AbilityComponent, which is triggered when the Ability moves to the foreground.
-   */
-  onAbilityMoveToFront(event: () => void): T;
-
-  /**
-   * Internal to the AbilityComponent, which is triggered before the Mobility is removed.
-   */
-  onAbilityWillRemove(event: () => void): T;
-}
-
-// Used for IDE.
-export declare class AbilityComponentExtend<T> extends AbilityComponentAttribute<T> {}
-export declare const AbilityComponentInterface: AbilityComponent;
diff --git a/api/@internal/component/ets/action_sheet.d.ts b/api/@internal/component/ets/action_sheet.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f1d2ba8b557464b79da6a98df913af4e05a564a3
--- /dev/null
+++ b/api/@internal/component/ets/action_sheet.d.ts
@@ -0,0 +1,113 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DialogAlignment } from "./alert_dialog";
+import { Resource } from ".";
+
+/**
+ * The information of sheet.
+ * @since 8
+ */
+export interface SheetInfo {
+  /**
+   * Title Properties
+   * @since 8
+   */
+  title: string | Resource;
+
+  /**
+   * Icon Properties.
+   * @since 8
+   */
+  icon?: string | Resource;
+
+  /**
+   * Callback method after the operation.
+   * @since 8
+   */
+  action: () => void;
+}
+
+/**
+ * Declare the ActionSheet
+ * @since 8
+ */
+export declare class ActionSheet {
+  /**
+   * Invoking method display.
+   * @since 8
+   */
+  static show(value: {
+    /**
+     * Title Properties
+     * @since 8
+     */
+    title: string | Resource;
+
+    /**
+     * message Properties
+     * @since 8
+     */
+    message: string | Resource;
+
+    /**
+     * Invoke the commit function.
+     * @since 8
+     */
+    confirm?: {
+      /**
+       * Text content of the confirmation button.
+       * @since 8
+       */
+      value: string | Resource;
+
+      /**
+       * Method executed by the callback.
+       * @since 8
+       */
+      action: () => void;
+    };
+
+    /**
+     * Execute Cancel Function.
+     * @since 8
+     */
+    cancel?: () => void;
+
+    /**
+     * The Array of sheets
+     * @since 8
+     */
+    sheets: Array<SheetInfo>;
+
+    /**
+     * Allows users to click the mask layer to exit.
+     * @since 8
+     */
+    autoCancel?: boolean;
+
+    /**
+     * Alignment in the vertical direction.
+     * @since 8
+     */
+    alignment?: DialogAlignment;
+
+    /**
+     * Offset of the pop-up window relative to the alignment position.
+     * @since 8
+     */
+    offset?: { dx: number | string | Resource; dy: number | string | Resource };
+  });
+}
diff --git a/api/@internal/component/ets/bundleInstaller.d.ts b/api/@internal/component/ets/bundleInstaller.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c5b36fc1245de7c14ee1a7af19f1e9193ec1d8fe
--- /dev/null
+++ b/api/@internal/component/ets/bundleInstaller.d.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @name Provides parameters required for installing or uninstalling an application.
+ * @since 7
+ * @SysCap SystemCapability.Appexecfwk
+ * @permission NA
+ * @devices phone, tablet, tv, wearable, car
+ */
+export declare interface InstallParam {
+  /**
+   * @default Indicates the user id
+   * @since 7
+   * @SysCap SystemCapability.Appexecfwk
+   */
+  userId: number;
+
+  /**
+   * @default Indicates the install flag
+   * @since 7
+   * @SysCap SystemCapability.Appexecfwk
+   */
+  installFlag: number;
+
+  /**
+   * @default Indicates whether the param has data
+   * @since 7
+   * @SysCap SystemCapability.Appexecfwk
+   */
+  isKeepData: boolean;
+}
diff --git a/api/@internal/component/ets/button.d.ts b/api/@internal/component/ets/button.d.ts
index 8eab0ed01ace07c182085ccdc22b55e3f2c48d3b..08b11f64b3292823ad40104e13cfb76738dc805a 100644
--- a/api/@internal/component/ets/button.d.ts
+++ b/api/@internal/component/ets/button.d.ts
@@ -14,8 +14,9 @@
  */
 
 import { CommonMethod } from "./common";
-import { FontWeight } from "./enums";
+import { FontWeight,FontStyle } from "./enums";
 import { Length, ResourceColor, ResourceStr } from "./units";
+import {  Resource } from ".";
 
 /**
  * Provides a button component.
@@ -117,6 +118,17 @@ declare class ButtonAttribute<T> extends CommonMethod<T> {
    * @since 7
    */
   fontWeight(value: number | FontWeight | string): T;
+  /**
+   * Font style.
+   * @since 8
+   */
+  fontStyle(value: FontStyle): T;
+
+  /**
+   * Font family.
+   * @since 8
+   */
+  fontFamily(value: string | Resource): T;
 }
 
 export declare class ButtonExtend<T> extends ButtonAttribute<T> {}
diff --git a/api/@internal/component/ets/canvas.d.ts b/api/@internal/component/ets/canvas.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1740d5e749cbe2c8d2865e47b107244e61f7a77a
--- /dev/null
+++ b/api/@internal/component/ets/canvas.d.ts
@@ -0,0 +1,1114 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonMethod, PixelMap } from "./common";
+import { Matrix2D } from "./matrix2d";
+
+/**
+ * Filling style algorithm, which determines whether a point is within or outside the path. The following
+ *    two configurations are supported:
+ * "evenodd": odd and even round rule
+ * "nonzero": (Default) Non-zero Wrap Rules
+ * @since 8
+ */
+export declare type CanvasFillRule = 'evenodd' | 'nonzero';
+
+/**
+ * Specifies the attribute of drawing the end of each line segment. The following configurations are supported:
+ * "butt": (Default) Segment Ends in Square
+ * "round": Segment ends in a circle
+ * "square": The end of the segment ends in a square, but a rectangular area is added that is the same width
+ *    as the segment and is half the thickness of the segment.
+ * @since 8
+ */
+export declare type CanvasLineCap = 'butt' | 'round' | 'square';
+
+/**
+ * Sets the attribute of how two connected parts (line segments, arcs, and curves) whose length is not 0
+ *    are connected together. The following three configurations are supported:
+ * "bevel": Fill the ends of the connected sections with an additional triangle-base area,
+ *    each with its own independent rectangular corner.
+ * "miter": (Default) An additional diamond region is formed by extending the outer edges of the connected portions
+ *    so that they intersect at a point.
+ * "round": Draw the shape of the corner by filling in an additional sector with the center at the end of the
+ *    connected section. The radius of the fillet is the width of the segment.
+ * @since 8
+ */
+export declare type CanvasLineJoin = 'bevel' | 'miter' | 'round';
+
+/**
+ * Indicates the attribute of the current text direction. The options are as follows:
+ * "inherit": (Default) Inherit current Canvas component settings
+ * "ltr": The text direction is left to right.
+ * "rtl": The text direction is from right to left.
+ * @since 8
+ */
+export declare type CanvasDirection = 'inherit' | 'ltr' | 'rtl';
+
+/**
+ * Describes the alignment mode for drawing text. The options are as follows:
+ * "center": The text is centered.
+ * "end": Where text aligns lines end (Left alignment refers to the local from left to right,
+ *    and right alignment refers to the local from right to left)
+ * "left": The text is left-aligned.
+ * "right": The text is right-aligned.
+ * "start": (Default) Where the text snap line begins (Left alignment refers to the local from left to right,
+ *    and right alignment refers to the local from right to left)
+ * @since 8
+ */
+export declare type CanvasTextAlign = 'center' | 'end' | 'left' | 'right' | 'start';
+
+/**
+ * Text baseline, which supports the following configurations:
+ * "alphabetic": (Default) The text baseline is the standard letter baseline.
+ * "bottom": The text baseline is at the bottom of the text block. The difference between the ideographic baseline
+ *    and the ideographic baseline is that the ideographic baseline does not need to consider downlink letters.
+ * "hanging": The text baseline is a hanging baseline.
+ * "ideographic": The text baseline is the ideographic baseline; If the character itself exceeds the alphabetic
+ *    baseline, the ideograhpic baseline is at the bottom of the character itself.
+ * "middle": The text baseline is in the middle of the text block.
+ * "top": The text baseline is at the top of the text block.
+ * @since 8
+ */
+export declare type CanvasTextBaseline = 'alphabetic' | 'bottom' | 'hanging' | 'ideographic' | 'middle' | 'top';
+
+/**
+ * Sets the image smoothness attribute. The options are as follows:
+ * "high": high
+ * "low": (default)low
+ * "medium": medium
+ * @since 8
+ */
+export declare type ImageSmoothingQuality = 'high' | 'low' | 'medium';
+
+/**
+ * Opaque objects that describe gradients, created by createLinearGradient() or createRadialGradient()
+ * @since 8
+ */
+export declare class CanvasGradient {
+  /**
+   * Add a breakpoint defined by offset and color to the gradient
+   * @param number Value between 0 and 1, out of range throws INDEX_SIZE_ERR error
+   * @param string CSS color value <color>. If the color value cannot be resolved to a valid CSS color value <color>
+   *    a SYNTAX_ERR error is thrown.
+   * @since 8
+   */
+  addColorStop(offset: number, color: string): void;
+}
+
+/**
+ * Path object, which provides basic methods for drawing paths.
+ * @since 8
+ */
+export declare class CanvasPath {
+  /**
+   * Draw an arc path
+   * @param x The x-axis coordinate of the center (center of the circle) of the arc.
+   * @param y The y-axis coordinate of the center (center of the circle) of the arc.
+   * @param radius Radius of the arc.
+   * @param startAngle Start point of an arc, which starts to be calculated in the x-axis direction. The unit is radian.
+   * @param endAngle The end point of the arc, in radians.
+   * @param counterclockwise If the value is true, the arc is drawn counterclockwise. Otherwise,
+   *    the arc is drawn clockwise. The default value is false.
+   * @since 8
+   */
+  arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
+
+  /**
+   * Draw arc paths based on control points and radius
+   * @param x1 The x-axis coordinate of the first control point.
+   * @param y1 The y-axis coordinate of the first control point.
+   * @param x2 The x-axis coordinate of the second control point.
+   * @param y2 The y-axis coordinate of the second control point.
+   * @param radius Radius of the arc.
+   * @since 8
+   */
+  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
+
+  /**
+   * Drawing Cubic Bessel Curve Paths
+   * @param cp1x The x-axis coordinate of the first control point.
+   * @param cp1y The y-axis coordinate of the first control point.
+   * @param cp2x The x-axis coordinate of the second control point.
+   * @param cp2y The y-axis coordinate of the second control point.
+   * @param x x-axis coordinate of the end point.
+   * @param y y-axis coordinate of the end point.
+   * @since 8
+   */
+  bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
+
+  /**
+   * Returns the pen point to the start point of the current subpath
+   * @since 8
+   */
+  closePath(): void;
+
+  /**
+   * Draw an Elliptic Path
+   * @param x x-axis coordinate of the center of the ellipse.
+   * @param y y-axis coordinate of the center of the ellipse.
+   * @param radiusX Radius of the major axis of the ellipse.
+   * @param radiusY Radius of the minor axis of the ellipse.
+   * @param rotation The rotation angle of the ellipse, in radians (not angular degrees).
+   * @param startAngle The angle of the starting point to be drawn, measured from the x-axis in radians
+   *    (not angular degrees).
+   * @param endAngle The angle, in radians, at which the ellipse is to be drawn (not angular degrees).
+   * @param counterclockwise If the value is true, the ellipse is drawn counterclockwise. Otherwise,
+   *    the ellipse is drawn clockwise. The default value is false.
+   * @since 8
+   */
+  ellipse(
+    x: number,
+    y: number,
+    radiusX: number,
+    radiusY: number,
+    rotation: number,
+    startAngle: number,
+    endAngle: number,
+    counterclockwise?: number,
+  ): void;
+
+  /**
+   * Connect subpaths using straight lines
+   * @param x The x-axis coordinate of the end point of the line.
+   * @param y The y-axis coordinate of the end point of the line.
+   * @since 8
+   */
+  lineTo(x: number, y: number): void;
+
+  /**
+   * Moves the start point of a new subpath to the (x, y) coordinate.
+   * @param x The x-axis coordinate of the point.
+   * @param y The y-axis coordinate of the point.
+   * @since 8
+   */
+  moveTo(x: number, y: number): void;
+
+  /**
+   * Draw quadratic Bezier curve paths
+   * @param cpx The x-axis coordinate of the control point.
+   * @param cpy The y-axis coordinate of the control point.
+   * @param x x-axis coordinate of the end point.
+   * @param y y-axis coordinate of the end point.
+   * @since 8
+   */
+  quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
+
+  /**
+   * Draw Rectangular Paths
+   * @param x The x-axis coordinate of the start point of the rectangle.
+   * @param y The y-axis coordinate of the start point of the rectangle.
+   * @param w Width of the rectangle.
+   * @param h Height of the rectangle.
+   * @since 8
+   */
+  rect(x: number, y: number, w: number, h: number): void;
+}
+
+/**
+ * 2D path object for path drawing
+ * @since 8
+ */
+export declare class Path2D extends CanvasPath {
+  /**
+   * Adds a path according to the specified path variable.
+   * @param path Indicates the path object to be added.
+   * @param transform Transformation matrix of the new trail
+   * @since 8
+   */
+  addPath(path: Path2D, transform?: Matrix2D): void;
+
+  /**
+   * Create an empty path object.
+   * @since 8
+   */
+  constructor();
+
+  /**
+   * Create a copy of a path object
+   * @param path Path object to be copied
+   * @since 8
+   */
+  constructor(path: Path2D);
+
+  /**
+   * Create a new path according to the description.
+   * @param d Indicates the path string that compiles with the SVG path description specifications.
+   * @since 8
+   */
+  constructor(d: string);
+}
+
+/**
+ * Describes an opaque object of a template, which is created using the createPattern() method.
+ * @since 8
+ */
+export declare interface CanvasPattern {
+  /**
+   * Adds the matrix transformation effect to the current template.
+   * @param transform transformation matrix
+   * @since 8
+   */
+  setTransform(transform?: Matrix2D): void;
+}
+
+/**
+ * Size information of the text
+ * @since 8
+ */
+export declare interface TextMetrics {
+  /**
+   * Double, the distance from the horizontal line indicated by the textBaseline property to the top of
+   *    the rectangular boundary of the rendered text.
+   * @since 8
+   */
+  readonly actualBoundingBoxAscent: number;
+
+  /**
+   * Double, the distance from the horizontal line indicated by the textBaseline property to the bottom of
+   *    the rectangular boundary of the rendered text.
+   * @since 8
+   */
+  readonly actualBoundingBoxDescent: number;
+
+  /**
+   * Double, parallel to the baseline, distance from the alignment point determined by the textAlign property to
+   *    the left of the text rectangle boundary.
+   * @since 8
+   */
+  readonly actualBoundingBoxLeft: number;
+
+  /**
+   * Double, parallel to the baseline, distance from the alignment point determined by the textAlign property to
+   *    the right of the text rectangle boundary.
+   * @since 8
+   */
+  readonly actualBoundingBoxRight: number;
+
+  /**
+   * Double, the distance from the horizontal line indicated by the textBaseline property to the alphabetic baseline of
+   *    the wireframe.
+   * @since 8
+   */
+  readonly alphabeticBaseline: number;
+
+  /**
+   * Double, the distance from the horizontal line indicated by the textBaseline property to the top of the
+   *    em square in the wireframe.
+   * @since 8
+   */
+  readonly emHeightAscent: number;
+
+  /**
+   * Double, distance from the horizontal line indicated by the textBaseline property to the bottom of the
+   *    em box in the wireframe.
+   * @since 8
+   */
+  readonly emHeightDescent: number;
+
+  /**
+   * Double, distance from the horizontal line indicated by the textBaseline property to the top of the
+   *    highest rectangle boundary of all fonts rendering text.
+   * @since 8
+   */
+  readonly fontBoundingBoxAscent: number;
+
+  /**
+   * Double, distance from the horizontal line indicated by the textBaseline property to the bottom of the
+   *   rectangular boundary of all fonts rendering text.
+   * @since 8
+   */
+  readonly fontBoundingBoxDescent: number;
+
+  /**
+   * Double, distance from the horizontal line indicated by the textBaseline property to
+   *    the hanging baseline of the wireframe.
+   * @since 8
+   */
+  readonly hangingBaseline: number;
+
+  /**
+   * Double, distance from the horizontal line indicated by the textBaseline property to
+   *    the ideographic baseline of the wireframe.
+   * @since 8
+   */
+  readonly ideographicBaseline: number;
+
+  /**
+   * Indicates the width of a character string. The value is of the double type.
+   * @since 8
+   */
+  readonly width: number;
+}
+
+/**
+ * Bitmap image object that can be drawn onto the current Canvas
+ * @since 8
+ */
+export declare class ImageBitmap {
+  /**
+   * Indicates the height of the CSS pixel unit of ImageData.
+   * @since 8
+   */
+  readonly height: number;
+
+  /**
+   * Indicates the width of the CSS pixel unit of ImageData.
+   * @since 8
+   */
+  readonly width: number;
+
+  /**
+   * Releases all graphics resources associated with an ImageBitmap.
+   * @since 8
+   */
+  close(): void;
+
+  /**
+   * Create an ImageBitmap object based on the transferred image path.
+   * @param src Path of the image object.
+   * @since 8
+   */
+  constructor(src: string);
+
+  /**
+   * Transfer a PixelMap object to construct an ImageBitmap object.
+   * @param data PixelMap object
+   * @since 8
+   */
+  constructor(data: PixelMap);
+}
+
+/**
+ * Image data object
+ * @since 8
+ */
+export declare class ImageData {
+  /**
+   * Array containing image pixel data
+   * @since 8
+   */
+  readonly data: Uint8ClampedArray;
+
+  /**
+   * Width of the image.
+   * @since 8
+   */
+  readonly height: number;
+
+  /**
+   * Height of the image.
+   * @since 8
+   */
+  readonly width: number;
+
+  /**
+   * Create an ImageData object based on the input parameters.
+   * @param width Width of the image.
+   * @param height Height of the image.
+   * @param data Data of the image. If this parameter is not specified, the default value is a black rectangular image.
+   * @since 8
+   */
+  constructor(width: number, height: number, data?: Uint8ClampedArray);
+}
+
+/**
+ * This object allows you to set properties when creating a rendering context
+ * @since 8
+ */
+export declare class RenderingContextSettings {
+  /**
+   * Indicates whether the canvas contains an alpha channel. The default value is false.
+   * @since 8
+   */
+  alpha?: boolean;
+
+  /**
+   * Indicates whether anti-aliasing is enabled for canvas. The default value is false.
+   * @since 8
+   */
+  antialias?: boolean;
+
+  /**
+   * Create an RenderingContextSettings object based on the antialias and alpha.
+   * @param antialias Indicates whether anti-aliasing is enabled for canvas
+   * @param alpha Indicates whether the canvas contains an alpha channel
+   * @since 8
+   */
+  constructor(antialias?: boolean, alpha?: boolean);
+}
+
+/**
+ * Canvas renderer for drawing shapes, text, images and other objects
+ * @since 8
+ */
+export declare class CanvasRenderer extends CanvasPath {
+  /**
+   * Transparency. The value ranges from 0.0 (completely transparent) to 1.0 (completely opaque).
+   *    The default value is 1.0. If the value is out of range, the assignment is invalid.
+   * @since 8
+   */
+  globalAlpha: number;
+
+  /**
+   * Type of composition operation applied when drawing a new shape. The following types are supported:
+   * source-over: (Default) Draws a new drawing on top of an existing canvas context.
+   * source-in: The new drawing is drawn only where the new drawing overlaps the target canvas.
+   *    Everything else is transparent.
+   * source-out: Draws a new drawing where it does not overlap with the existing canvas content.
+   * source-atop: The new drawing is drawn only where it overlaps the content of the existing canvas.
+   * destination-over: Draws a new graphic behind the existing canvas content.
+   * destination-in: Existing canvas content remains where the new drawing overlaps the existing canvas content.
+   *    Everything else is transparent.
+   * destination-out: Existing content remains where the new drawing does not overlap.
+   * destination-atop: The existing canvas retains only the part that overlaps with the new drawing,
+   *    which is drawn behind the canvas content.
+   * lighter: The color of two overlapping shapes is determined by adding the color values.
+   * copy: Only new graphics are displayed.
+   * xor: In the image, those overlaps and other places outside of the normal drawing are transparent.
+   * multiply: Multiply the top pixel by the bottom pixel, and the result is a darker picture.
+   * screen: The pixels are inverted, multiplied, and inverted again, and the result is a brighter picture.
+   * overlay: The combination of multiply and screen enables dark places to be darker and bright places to be brighter.
+   * darken: Keeps the darkest pixel in both layers.
+   * lighten: Keeps the brightest pixel in both layers.
+   * color-dodge: The inverse of dividing the bottom layer by the top layer.
+   * color-burn: Divide the inverted bottom layer by the top layer, and reverse the result.
+   * hard-light: A combination of multiplication and screen is similar to overlay, but the layers are interchanged.
+   * soft-light: Subtract the bottom from the top or vice versa to get a positive value.
+   * difference: A softer version of hard-light. Pure black or pure white does not result in pure black or pure white.
+   * exclusion: Similar to difference, but with lower contrast.
+   * hue: The luminance and chroma of the bottom layer are retained while the hue of the top layer is employed.
+   * saturation: The luminance (luma) and hue (hue) of the bottom layer are retained while the chroma (chroma) of
+   *    the top layer is used.
+   * color: The luminance (luma) of the bottom layer is retained while the hue (hue) and chroma (chroma) of
+   *    the top layer are used.
+   * luminosity: The hue and chroma of the bottom layer are maintained while the luminance of the top layer is used.
+   * @since 8
+   */
+  globalCompositeOperation: string;
+
+  /**
+   * Draw an image on a canvas
+   * @param image Picture objects drawn to the canvas.
+   * @param dx x-axis coordinate of the upper left corner of the image on the target canvas.
+   * @param dy y-axis coordinate of the upper left corner of the image on the target canvas.
+   * @since 8
+   */
+  drawImage(image: ImageBitmap, dx: number, dy: number): void;
+
+  /**
+   * Draw an image on a canvas
+   * @param image Picture objects drawn to the canvas.
+   * @param dx x-axis coordinate of the upper left corner of the image on the target canvas.
+   * @param dy y-axis coordinate of the upper left corner of the image on the target canvas.
+   * @param dw Specifies the drawing width of the image on the target canvas. The width of the drawn image will be scaled.
+   * @param dh Specifies the drawing height of the image on the target canvas. The height of the drawn image will be scaled.
+   * @since 8
+   */
+  drawImage(image: ImageBitmap, dx: number, dy: number, dw: number, dh: number): void;
+
+  /**
+   *Draw an image on a canvas
+   * @param image Picture objects drawn to the canvas.
+   * @param sx x coordinate of the upper left corner of the rectangle (cropping) selection box of the image.
+   * @param sy y coordinate of the upper left corner of the rectangle (cropping) selection box of the image.
+   * @param sw Width of the rectangle (cropping) selection box of the image.
+   * @param sh Height of the rectangle (cropping) selection box of the image.
+   * @param dx x-axis coordinate of the upper left corner of the image on the target canvas.
+   * @param dy y-axis coordinate of the upper left corner of the image on the target canvas.
+   * @param dw Specifies the drawing width of the image on the target canvas. The width of the drawn image will be scaled.
+   * @param dh Specifies the drawing height of the image on the target canvas. The height of the drawn image will be scaled.
+   * @since 8
+   */
+  drawImage(
+    image: ImageBitmap,
+    sx: number,
+    sy: number,
+    sw: number,
+    sh: number,
+    dx: number,
+    dy: number,
+    dw: number,
+    dh: number,
+  ): void;
+
+  /**
+   * Clear the sub-path list and start a new path.
+   * @since 8
+   */
+  beginPath(): void;
+
+  /**
+   * Sets the currently created path as the current clipping path
+   * @param fillRule Algorithm rule. For details, see {@link CanvasFillRule}.
+   * @since 8
+   */
+  clip(fillRule?: CanvasFillRule): void;
+
+  /**
+   * Tailoring according to the specified path
+   * @param path Path to be cut.
+   * @param fillRule Algorithm rule. For details, see {@link CanvasFillRule}.
+   * @since 8
+   */
+  clip(path: Path2D, fillRule?: CanvasFillRule): void;
+
+  /**
+   * Fills existing paths according to the current fill style.
+   * @param fillRule Algorithm rule. For details, see {@link CanvasFillRule}.
+   * @since 8
+   */
+  fill(fillRule?: CanvasFillRule): void;
+
+  /**
+   * Fills the specified path according to the current fill style
+   * @param path Path to be filled.
+   * @param fillRule Algorithm rule. For details, see {@link CanvasFillRule}.
+   * @since 8
+   */
+  fill(path: Path2D, fillRule?: CanvasFillRule): void;
+
+  /**
+   * Draws an existing path according to the current stroke style.
+   * @since 8
+   */
+  stroke(): void;
+
+  /**
+   * Draws the specified path according to the current stroke style
+   * @param path Specified stroke path object
+   * @since 8
+   */
+  stroke(path: Path2D): void;
+
+  /**
+   * Attributes that describe the fill color and style. The default value is # 000 (black). The options are as follows:
+   * color: Color String
+   * CanvasGradient: Color gradient object. For details, see {@link CanvasGradient}.
+   * CanvasPattern: Template object. For details, see {@link CanvasPattern}.
+   * @param path Specified stroke path object
+   * @since 8
+   */
+  fillStyle: string | CanvasGradient | CanvasPattern;
+
+  /**
+   * Attributes of the stroke color and style. The default value is # 000 (black). The options are as follows:
+   * color: Color String
+   * CanvasGradient: Color gradient object. For details, see {@link CanvasGradient}.
+   * CanvasPattern: Template object. For details, see {@link CanvasPattern}.
+   * @param path Specified stroke path object
+   * @since 8
+   */
+  strokeStyle: string | CanvasGradient | CanvasPattern;
+
+  /**
+   * Creates a linear gradient object that is specified along the parameter coordinates
+   * @param x0 The x-axis coordinate of the start point.
+   * @param y0 The y-axis coordinate of the start point.
+   * @param x1 x-axis coordinate of the end point.
+   * @param y1 y-axis coordinate of the end point.
+   * @since 8
+   */
+  createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient;
+
+  /**
+   * Creates a template object using the specified image
+   * @param image Objects as duplicate image sources
+   * @param repetition Specifies how to repeat images. The following four modes are supported:
+   * "repeat": Repeated images in both X and Y directions
+   * "repeat-x": Repeated images in the X-axis direction but not in the Y-axis direction
+   * "repeat-y": The image is repeated in the Y axis direction, and the image is not repeated in the X axis direction.
+   * "no-repeat": Non-repeating images in both X and Y directions
+   * @since 8
+   */
+  createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null;
+
+  /**
+   * Creates a radioactive gradient object based on parameters that determine the coordinates of two circles
+   * @param x0 The x-axis coordinate of the start circle.
+   * @param y0 The y-axis coordinate of the start circle.
+   * @param r0 Radius of the starting circle.
+   * @param x1 The x-axis coordinate of the end circle.
+   * @param y1 The y-axis coordinate of the end circle.
+   * @param r1 Radius of the end circle.
+   * @since 8
+   */
+  createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient;
+
+  /**
+   * Provides filter effects such as blur and grayscale. You can set the following filter effects:
+   * blur(<length>): Adds a Gaussian blur effect to the drawing
+   * brightness(<percentage>): Provides a linear multiplication for the drawing and adjusts the brightness level.
+   * contrast(<percentage>): Adjusts the contrast of the image. When the value is 0%, the image is completely blacked out.
+   *    When the value is 100%, there is no change in the image.
+   * drop-shadow(<offset-x>, <offset-y>, <blur-radius>, <spread-radius>, <color>): Shading Drawings
+   *           --- <offset-x>: Describes the horizontal distance of the shadow.
+   *           --- <offset-y>: Describes the vertical distance of the shadow.
+   *           --- <blur-radius>: Blur radius. The larger the value, the greater the blur. The value cannot be a negative number.
+   *           --- <spread-radius>: Positive numbers make the shadow expand larger, negative numbers make the shadow shrink.
+   *           --- <color>: Shadow Color
+   * grayscale(<percentage>): Converts the image to a gray image. When the value is 100%, the image is completely grayed out.
+   *    When the value is 0%, there is no change in the image.
+   * hue-rotate(<degree>): Perform color rotation on an image. When the value is 0 degrees, there is no change in the image.
+   * invert(<percentage>): Inverted image (representing the effect of a photographic negative). When the value is 100%,
+   *    the image is completely inverted. When the value is 0%, there is no change in the image.
+   * opacity(<percentage>): Transparency of the image. At 0%, the image is completely transparent.
+   *    When the value is 100%, there is no change in the image.
+   * saturate(<percentage>): Perform saturation processing on the image. At 0%, the image is completely unsaturated.
+   *    When the value is 100%, there is no change in the image.
+   * sepia(<percentage>): The image is sepia (nostalgic style). At 100%, the image turns completely sepia.
+   *    When the value is 0%, there is no change in the image.
+   * none:Turn off filter effects
+   * @since 8
+   */
+  filter(filter: string): void;
+
+  /**
+   * Creates a new, empty ImageData object of the specified size
+   * @param sw Width of the ImageData object.
+   * @param sh Height of the ImageData object.
+   * @since 8
+   */
+  createImageData(sw: number, sh: number): ImageData;
+
+  /**
+   * From an existing ImageData object, copy an object with the same width and height as the image.
+   *    The image content is not copied.
+   * @param imagedata ImageData object to be copied.
+   * @since 8
+   */
+  createImageData(imagedata: ImageData): ImageData;
+
+  /**
+   * Obtains the pixel data of a specified area on the current canvas.
+   * @param sx x coordinate of the upper left corner of the rectangular area of the image data to be extracted.
+   * @param sy y coordinate of the upper left corner of the rectangular area of the image data to be extracted.
+   * @param sw The width of the rectangular area of the image data to be extracted.
+   * @param sh The height of the rectangular area of the image data to be extracted.
+   * @since 8
+   */
+  getImageData(sx: number, sy: number, sw: number, sh: number): ImageData;
+
+  /**
+   * Draws the specified ImageData object onto the canvas
+   * @param imagedata ImageData object to be drawn.
+   * @param dx Position offset of the source image data in the target canvas (the offset in the x-axis direction).
+   * @param dy Position offset of the source image data in the target canvas (the offset in the y-axis direction).
+   * @since 8
+   */
+  putImageData(imagedata: ImageData, dx: number, dy: number): void;
+
+  /**
+   * Draws the specified ImageData object onto the canvas
+   * @param imagedata ImageData object to be drawn.
+   * @param dx Position offset of the source image data in the target canvas (the offset in the x-axis direction).
+   * @param dy Position offset of the source image data in the target canvas (the offset in the y-axis direction).
+   * @param dirtyX Position of the upper left corner of the rectangular area in the source image data.
+   *    The default is the upper left corner (x coordinate) of the entire image data.
+   * @param dirtyY Position of the upper left corner of the rectangular area in the source image data.
+   *    The default is the upper left corner (y coordinate) of the entire image data.
+   * @param dirtyWidth Width of the rectangular area in the source image data.
+   *    The default is the width of the image data.
+   * @param dirtyHeight Height of the rectangular area in the source image data.
+   *    The default is the height of the image data.
+   * @since 8
+   */
+  putImageData(
+    imagedata: ImageData,
+    dx: number,
+    dy: number,
+    dirtyX: number,
+    dirtyY: number,
+    dirtyWidth: number,
+    dirtyHeight: number,
+  ): void;
+
+  /**
+   * Specifies whether to smooth the image. The value true indicates that the image is smooth (default value).
+   *    The value false indicates that the image is not smooth.
+   * @since 8
+   */
+  imageSmoothingEnabled: boolean;
+
+  /**
+   * Smoothness level of the current image. For details, see {@link ImageSmoothingQuality}.
+   * @since 8
+   */
+  imageSmoothingQuality(quality: ImageSmoothingQuality): void;
+
+  /**
+   * Line segment endpoint attribute. For details, see {@link CanvasLineCap}.
+   * @since 8
+   */
+  lineCap: CanvasLineCap;
+
+  /**
+   * Dotted line offset attribute. The default value is 0.0.
+   * @since 8
+   */
+  lineDashOffset: number;
+
+  /**
+   * Line segment connection point attribute. For details, see {@link CanvasLineJoin}.
+   * @since 8
+   */
+  lineJoin: CanvasLineJoin;
+
+  /**
+   * Line thickness attribute. The value cannot be 0 or a negative number.
+   * @since 8
+   */
+  lineWidth: number;
+
+  /**
+   * The value of this parameter cannot be 0 or a negative number.
+   * @since 8
+   */
+  miterLimit: number;
+
+  /**
+   * Gets the current segment style.
+   * @since 8
+   */
+  getLineDash(): number[];
+
+  /**
+   * Sets the dashed line mode for line drawing.
+   * @param segments A set of numbers that describe the length of alternating drawn line segments and
+   *    spacing (coordinate space units).
+   * @since 8
+   */
+  setLineDash(segments: number[]): void;
+
+  /**
+   * Clears the drawing content of a rectangular area.
+   * @param x The x-axis coordinate of the start point of the rectangle.
+   * @param y The y-axis coordinate of the start point of the rectangle.
+   * @param w Width of the rectangle.
+   * @param h Height of the rectangle.
+   * @since 8
+   */
+  clearRect(x: number, y: number, w: number, h: number): void;
+
+  /**
+   * Fills a specified rectangular area
+   * @param x The x-axis coordinate of the start point of the rectangle.
+   * @param y The y-axis coordinate of the start point of the rectangle.
+   * @param w Width of the rectangle.
+   * @param h Height of the rectangle.
+   * @since 8
+   */
+  fillRect(x: number, y: number, w: number, h: number): void;
+
+  /**
+   * Stroke Specify Rectangular Area
+   * @param x The x-axis coordinate of the start point of the rectangle.
+   * @param y The y-axis coordinate of the start point of the rectangle.
+   * @param w Width of the rectangle.
+   * @param h Height of the rectangle.
+   * @since 8
+   */
+  strokeRect(x: number, y: number, w: number, h: number): void;
+
+  /**
+   * Shadow blur radius. The default value is 0. The value cannot be a negative number.
+   * @since 8
+   */
+  shadowBlur: number;
+
+  /**
+   * Shadow color. The default value is transparent black.
+   * @since 8
+   */
+  shadowColor: string;
+
+  /**
+   * Horizontal offset distance of the shadow. The default value is 0.
+   * @since 8
+   */
+  shadowOffsetX: number;
+
+  /**
+   * Vertical offset distance of the shadow. The default value is 0.
+   * @since 8
+   */
+  shadowOffsetY: number;
+
+  /**
+   * Top of the stack pop-up state in the drawing state stack
+   * @since 8
+   */
+  restore(): void;
+
+  /**
+   * Saves the current drawing state to the drawing state stack
+   * @since 8
+   */
+  save(): void;
+
+  /**
+   * Fills the specified text at the specified location
+   * @param text Text string to be drawn.
+   * @param x The x-axis coordinate of the start point of the text.
+   * @param y The y-axis coordinate of the start point of the text.
+   * @param maxWidth Maximum width of the drawing.
+   * @since 8
+   */
+  fillText(text: string, x: number, y: number, maxWidth?: number): void;
+
+  /**
+   * Measure the size of a specified text. For details about the return value, see {@link TextMetrics}.
+   * @param text Text string to be measured.
+   * @since 8
+   */
+  measureText(text: string): TextMetrics;
+
+  /**
+   * Stroke specified text at specified position
+   * @param text Text string to be stroked.
+   * @param x The x-axis coordinate of the start point of the text.
+   * @param y The y-axis-axis coordinate of the start point of the text.
+   * @param maxWidth Maximum width of the stroke.
+   * @since 8
+   */
+  strokeText(text: string, x: number, y: number, maxWidth?: number): void;
+
+  /**
+   * Text drawing direction. For details, see {@link CanvasDirection}.
+   * @since 8
+   */
+  direction(direction: CanvasDirection): void;
+
+  /**
+   * Font style. The default value is 10px sans-serif.
+   * @since 8
+   */
+  font: string;
+
+  /**
+   * Text alignment mode. For details, see {@link CanvasTextAlign}.
+   * @since 8
+   */
+  textAlign: CanvasTextAlign;
+
+  /**
+   * Text baseline. For details, see {@link CanvasTextBaseline}.
+   * @since 8
+   */
+  textBaseline: CanvasTextBaseline;
+
+  /**
+   * Obtains the currently applied transformation matrix.
+   * @since 8
+   */
+  getTransform(): Matrix2D;
+
+  /**
+   * Resets the current transformation matrix using the identity matrix
+   * @since 8
+   */
+  resetTransform(): void;
+
+  /**
+   * Adds the effect of a rotation
+   * @param angle The radian of clockwise rotation, which can be converted to an angle value using the formula:
+   *    degree * Math.PI / 180
+   * @since 8
+   */
+  rotate(angle: number): void;
+
+  /**
+   * Increases the scaling effect of the X and Y axes.
+   * @param x Horizontal scaling factor
+   * @param y Vertical scaling factor
+   * @since 8
+   */
+  scale(x: number, y: number): void;
+
+  /**
+   * Adds 2D transformation effects, including rotation, translation, and scaling.
+   *    The current transformation matrix will not be overwritten. Multiple transformations will be superimposed.
+   * @param a Horizontal Zoom
+   * @param b Vertical Tilt
+   * @param c Horizontal Tilt
+   * @param d Vertical Zoom
+   * @param e Horizontal movement
+   * @param f Vertical movement
+   * @since 8
+   */
+  setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+
+  /**
+   * The 2D transformation effect is added. The current transformation matrix is not overwritten and
+   *    the transformations are superimposed for multiple times.
+   * @param transform 2D transformation matrix. For details, see {@link Matrix2D}.
+   * @since 8
+   */
+  setTransform(transform?: Matrix2D): void;
+
+  /**
+   * Adds the 2D transformation effect, including rotation, translation, and scaling,
+   *    and overwrites the current transformation matrix.
+   * @param a Horizontal Zoom
+   * @param b Vertical Tilt
+   * @param c Horizontal Tilt
+   * @param d Vertical Zoom
+   * @param e Horizontal movement
+   * @param f Vertical movement
+   * @since 8
+   */
+  transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
+
+  /**
+   * Increases the translation effect of the X and Y axes
+   * @param x Horizontal movement distance
+   * @param y Vertical travel distance
+   * @since 8
+   */
+  translate(x: number, y: number): void;
+
+  /**
+   * Set a PixelMap to the current context. The drawing content is synchronized to the PixelMap.
+   * @param value PixelMap object
+   * @since 8
+   */
+  setPixelMap(value?: PixelMap): void;
+
+  /**
+   * transfer ImageBitmap to content.
+   * @param ImageBitmap
+   * @since 8
+   */
+  transferFromImageBitmap(bitmap: ImageBitmap): void;
+}
+
+/**
+ * Draw context object for the Canvas component.
+ * @since 8
+ */
+export declare class RenderingContext extends CanvasRenderer {
+  /**
+   * The default value is 0, which is bound to the height of the specified canvas. The value is read-only.
+   * @since 8
+   */
+  readonly height: number;
+
+  /**
+   * The default value is 0, which is bound to the width of the specified canvas. The value is read-only.
+   * @since 8
+   */
+  readonly width: number;
+
+  /**
+   * Generate a character string in the data url format.
+   * @param type Image format. The default value is image/png.
+   * @param quality If the image format is image/jpeg or image/webp, you can select the image quality from 0 to 1.
+   *    If the value is out of the range, the default value 0.92 is used.
+   * @since 8
+   */
+  toDataURL(type?: string, quality?: any): string;
+
+  /**
+   * Constructor of the canvas drawing context object, which is used to create a drawing context object.
+   * @param settings Drawing attribute. For details, see {@link RenderingContextSettings}.
+   * @since 8
+   */
+  constructor(settings?: RenderingContextSettings);
+}
+
+/**
+ * Draw context object for the OffscreenCanvas component.
+ * @since 8
+ */
+export declare class OffscreenRenderingContext extends CanvasRenderer {
+  /**
+   * Generate a character string in the data url format.
+   * @param type Image format. The default value is image/png.
+   * @param quality If the image format is image/jpeg or image/webp, you can select the image quality from 0 to 1.
+   *    If the value is out of the range, the default value 0.92 is used.
+   * @since 8
+   */
+  toDataURL(type?: string, quality?: any): string;
+
+  /**
+   * transfer the content to ImageBitmap
+   * @since 8
+   */
+  transferToImageBitmap(): ImageBitmap;
+
+  /**
+   * Constructor of the canvas drawing context object, which is used to create a drawing context object.
+   * @param width the width of the OffscreenCanvas
+   * @param height the height of the OffscreenCanvas
+   * @param settings Drawing attribute. For details, see {@link RenderingContextSettings}.
+   * @since 8
+   */
+  constructor(width: number, height: number, settings?: RenderingContextSettings);
+}
+
+/**
+ * Draw an object off the screen. The drawing content is not directly displayed on the screen.
+ * @since 8
+ */
+export declare class OffscreenCanvas extends CanvasRenderer {
+  /**
+   * Height of the off-screen canvas.
+   * @since 8
+   */
+  height: number;
+
+  /**
+   * Width of the off-screen canvas.
+   * @since 8
+   */
+  width: number;
+
+  /**
+   * Exports rendered content as an ImageBitmap object
+   * @since 8
+   */
+  transferToImageBitmap(): ImageBitmap;
+
+  /**
+   * Constructor of the off-screen canvas, which is used to create an off-screen canvas object.
+   * @param width Width of the off-screen canvas.
+   * @param height Height of the off-screen canvas.
+   * @since 8
+   */
+  constructor(width: number, height: number);
+}
+
+/**
+ *TextTimer component, which provides the text timer capability.
+ * @since 8
+ */
+interface Canvas extends CanvasAttribute<Canvas>{
+  /**
+   * Construct a canvas component.
+   * @param context Canvas context object. For details, see {@link RenderingContext}.
+   * @since 8
+   */
+  (context?: RenderingContext): Canvas;
+}
+
+declare class CanvasAttribute<T> extends CommonMethod<T> {
+  /**
+   * Event notification after the canvas component is constructed. You can draw the canvas at this time.
+   * @since 8
+   */
+  onReady(event: () => void): T;
+}
+export declare class CanvasExtend<T> extends CanvasAttribute<T> {}
+export declare const CanvasInstance: Canvas;
diff --git a/api/@internal/component/ets/circle.d.ts b/api/@internal/component/ets/circle.d.ts
index 15f39269be70b07179d039699ebf9edbdcc55477..d2f46571af264383a2e03124b2428588d63ef523 100644
--- a/api/@internal/component/ets/circle.d.ts
+++ b/api/@internal/component/ets/circle.d.ts
@@ -38,6 +38,12 @@ export declare interface CircleOption {
  * @since 7
  */
 interface Circle extends CircleAttribute<Circle> {
+  /**
+   * use new function to set the value.
+   * @since 7
+   */
+  new (value?: CircleOption): Circle;
+  
   /**
    * Set the value..
    * @since 7
diff --git a/api/@internal/component/ets/common.d.ts b/api/@internal/component/ets/common.d.ts
index 1ad7e09b6b194625f05c858a70e132818e635c24..d1e663991c75c78711a15688aeb7cfc4970efb20 100644
--- a/api/@internal/component/ets/common.d.ts
+++ b/api/@internal/component/ets/common.d.ts
@@ -18,7 +18,7 @@ import { Circle } from "./circle";
 import { Ellipse } from "./ellipse";
 import { Path } from "./path";
 import { Rect } from "./rect";
-import { Resource, Length, Padding, Margin } from "./units";
+import { Resource, Length, Padding, Margin, Area} from "./units";
 import {
   Alignment,
   BorderStyle,
@@ -36,6 +36,9 @@ import {
   SharedTransitionEffectType,
   TransitionType,
   Visibility,
+  FocusDirection,
+  Placement,
+  HoverEffect
 } from "./enums";
 
 /**
@@ -145,11 +148,46 @@ export declare interface Configuration {
   readonly fontScale: number;
 }
 
+/**
+ * Defines the data type of the interface restriction.
+ * @devices phone, tablet, car
+ * @since 8
+ */
+export declare interface Rectangle {
+  /**
+   * x:Horizontal coordinate
+   * @devices phone, tablet, car
+   * @since 8
+   */
+  x?: Length;
+
+  /**
+   * y:Vertical axis coordinate.
+   * @devices phone, tablet, car
+   * @since 8
+   */
+  y?: Length;
+
+  /**
+   * Sets the width of the current touchRect.
+   * @devices phone, tablet, car
+   * @since 8
+   */
+  width?: Length;
+
+  /**
+   * Sets the height of the current touchRect.
+   * @devices phone, tablet, car
+   * @since 8
+   */
+  height?: Length;
+}
+
 /**
  * Defining isSystemplugin Constants.
  * @since 7
  */
-declare const isSystemplugin: Function;
+declare const isSystemplugin: (...args: string[]) => any;
 
 /**
  * global $r function
@@ -173,6 +211,20 @@ export interface AnimateToParam {
   onFinish?: () => void;
 }
 
+/**
+ * Define Preview property
+ * @since 8
+ */
+export interface PreviewParams {
+  title?: string;
+  width?: number;
+  height?: number;
+  language?: string;
+  colorMode?: string;
+  deviceType?: string;
+  dpi?: number;
+}
+
 /**
  * Defining animation function.
  * @since 7
@@ -215,6 +267,36 @@ export declare function lpx2px(value: number): number;
  */
 export declare function px2lpx(value: number): number;
 
+/**
+ * Defines the event target.
+ * @since 8
+ */
+export interface EventTarget {
+  /**
+   * Area of current target.
+   * @since 8
+   */
+  area: Area;
+}
+
+/**
+ * Defines the base event.
+ * @since 8
+ */
+interface BaseEvent {
+  /**
+   * Defines the current target which fires this event.
+   * @since 8
+   */
+  target: EventTarget;
+
+  /**
+   * Event timestamp.
+   * @since 8
+   */
+  timestamp: number;
+}
+
 /**
  * The tap action triggers this method invocation.
  * @since 7
@@ -243,12 +325,6 @@ export interface ClickEvent {
    * @since 7
    */
   y: number;
-
-  /**
-   * Event timestamp.
-   * @since 7
-   */
-  timestamp: number;
 }
 
 /**
@@ -315,13 +391,7 @@ export interface TouchEvent {
    * @since 7
    */
   changedTouches: TouchObject[];
-
-  /**
-   * Event timestamp.
-   * @since 7
-   */
-  timestamp: number;
-
+  
   /**
    * The blocking event pops up.
    * @since 7
@@ -329,24 +399,6 @@ export interface TouchEvent {
   stopPropagation?: () => void;
 }
 
-/**
- * Description of the PasteData object
- * @since 7
- */
-export interface PasteData {
-  /**
-   * Gets the clipboard text data.
-   * @since 7
-   */
-  getPlainText(): string;
-
-  /**
-   * Sets the clipboard text data.
-   * @since 7
-   */
-  setPlainText(value: string);
-}
-
 /**
  * pixelmap object with release function.
  * @since 7
@@ -364,12 +416,6 @@ export declare class PixelMap {
  * @since 7
  */
 export interface DragEvent {
-  /**
-   * Gets the current clipboard data object.
-   * @since 7
-   */
-  getPasteData(): PasteData;
-
   /**
    * Obtains the X coordinate of the drag window, in vp.
    * @since 7
@@ -381,24 +427,6 @@ export interface DragEvent {
    * @since 7
    */
   getY(): number;
-
-  /**
-   * Obtains the drag description.
-   * @since 7
-   */
-  getDescription(): string;
-
-  /**
-   * Set the drag description.
-   * @since 7
-   */
-  setDescription(value: string);
-
-  /**
-   * Set the floating window object. Value: floating window object.
-   * @since 7
-   */
-  setPixmap(value: PixelMap);
 }
 
 /**
@@ -456,6 +484,142 @@ export interface KeyEvent {
   stopPropagation?: () => void;
 }
 
+/**
+* Component State Styels.
+* @since 8
+*/
+export interface StateStyels {
+  /**
+   * Defines normal state styles.
+   * @since 8
+   */
+  normal?: any;
+
+  /**
+   * Defines pressed state styles.
+   * @since 8
+   */
+  pressed?: any;
+
+  /**
+   * Defines disabled state styles.
+   * @since 8
+   */
+  disabled?: any;
+
+  /**
+   * Defines focused state styles.
+   * @since 8
+   */
+  focused?: any;
+
+  /**
+   * Defines clicked state styles.
+   * @since 8
+   */
+  clicked?: any;
+}
+
+interface PopupOption {
+  /**
+   * Information in the pop-up window.
+   * @since 7
+   */
+  message: string;
+
+  /**
+   * placement On Top
+   * @since 7
+   */
+  placementOnTop?: boolean;
+
+  /**
+   * The first button.
+   * @since 7
+   */
+  primaryButton?: {
+    /**
+     * Button text value
+     * @since 7
+     */
+    value: string;
+
+    /**
+     * action
+     * @since 7
+     */
+    action: () => void;
+  };
+
+  /**
+   * The second button.
+   * @since 7
+   */
+  secondaryButton?: {
+    /**
+     * Button text value
+     * @since 7
+     */
+    value: string;
+
+    /**
+     * action
+     * @since 7
+     */
+    action: () => void;
+  };
+
+  /**
+   * on State Change
+   * @since 7
+   */
+  onStateChange?: (event: { isVisible: boolean }) => void;
+}
+
+interface CustomPopupOption {
+  /**
+   * builder of popup
+   * @since 8
+   */
+  builder: CustomBuilder;
+
+  /**
+   * placement of popup
+   * @since 8
+   */
+  placement?: Placement;
+
+  /**
+   * mask color of popup
+   * @since 8
+   */
+  maskColor?: Color | string | Resource | number;
+
+  /**
+   * background color of popup
+   * @since 8
+   */
+  popupColor?: Color | string | Resource | number;
+
+  /**
+   * whether show arrow
+   * @since 8
+   */
+  enableArrow?: boolean;
+
+  /**
+   * whether hide popup when click mask
+   * @since 8
+   */
+  autoCancel?: boolean;
+
+  /**
+   * on State Change
+   * @since 8
+   */
+  onStateChange?: (event: { isVisible: boolean }) => void;
+}
+
 /**
  * CommonMethod
  * @since 7
@@ -479,6 +643,13 @@ export declare class CommonMethod<T> {
    */
   height(value: Length): T;
 
+  /**
+   * Sets the response region of the current component.
+   * @devices phone, tablet, car
+   * @since 8
+   */
+  responseRegion(value: Array<Rectangle> | Rectangle): T;
+
   /**
    * The size of the current component.
    * @since 7
@@ -496,6 +667,19 @@ export declare class CommonMethod<T> {
     minHeight?: number | string | Resource;
     maxHeight?: number | string | Resource;
   }): T;
+  /**
+   * Sets the touchable of the current component
+   * @devices phone, tablet, car
+   * @since 8
+   */
+  touchable(value: boolean): T;
+
+  /**
+   * layout Weight
+   * @devices phone, tablet, car.
+   * @since 7
+   */
+  layoutWeight(value: number | string): T;
 
   /**
    * Inner margin
@@ -577,36 +761,6 @@ export declare class CommonMethod<T> {
    */
   borderRadius(value: number | string | Resource): T;
 
-  /**
-   * Navigation title
-   * @since 7
-   */
-  navigationTitle(value: string): T;
-
-  /**
-   * Navigation subtitle
-   * @since 7
-   */
-  navigationSubTitle(value: string): T;
-
-  /**
-   * Hide navigation bar
-   * @since 7
-   */
-  hideNavigationBar(value: boolean): T;
-
-  /**
-   * Hide navigation back button
-   * @since 7
-   */
-  hideNavigationBackButton(value: boolean): T;
-
-  /**
-   * Hide tool bar
-   * @since 7
-   */
-  hideToolBar(value: boolean): T;
-
   /**
    * Trigger a click event when a click is clicked.
    * @since 7
@@ -619,24 +773,12 @@ export declare class CommonMethod<T> {
    */
   onTouch(event: (event?: TouchEvent) => void): T;
 
-  /**
-   * Mouse hover event
-   * @since 7
-   */
-  onHover(event: (isHover?: boolean) => void): T;
-
   /**
    * Keyboard input
    * @since 7
    */
   onKeyEvent(event: (event?: KeyEvent) => void): T;
 
-  /**
-   * Pan event
-   * @since 7
-   */
-  onPan(event: (event?: any) => void): T;
-
   /**
    * animation
    * @since 7
@@ -658,8 +800,18 @@ export declare class CommonMethod<T> {
   transition(value: {
     type?: TransitionType;
     opacity?: number;
-    translate?: { x?: number | string; y?: number | string; z?: number | string };
-    scale?: { x?: number; y?: number; z?: number; centerX?: number | string; centerY?: number | string };
+    translate?: {
+      x?: number | string;
+      y?: number | string;
+      z?: number | string;
+    };
+    scale?: {
+      x?: number;
+      y?: number;
+      z?: number;
+      centerX?: number | string;
+      centerY?: number | string;
+    };
     rotate?: {
       x?: number;
       y?: number;
@@ -825,6 +977,13 @@ export declare class CommonMethod<T> {
    */
   onDisAppear(event: () => void): T;
 
+  /**
+   * This callback is triggered when the size or position of this component has changed.
+   * @param event event callback.
+   * @since 8
+   */
+  onAreaChange(event: (oldValue: Area, newValue: Area) => void): T;
+
   /**
    * Controls the display or hide of the current component.
    * @since 7
@@ -1055,51 +1214,14 @@ export declare class CommonMethod<T> {
    * Applies a mask of the specified shape to the current assembly.
    * @since 7
    */
-  mask(value: Circle | Ellipse | Path | Rect): T;
-
-  /**
-   * Accessibility group. If this parameter is set to true, the component and all its subcomponents can be selected, and the accessibility service does not focus on the content of its subcomponents.
-   * @since 7
-   */
-  accessibilityGroup(value: boolean): T;
+  mask(value: Circle| Ellipse | Path | Rect): T;
+  
 
-  /**
-   * Accessible text. When a component does not contain text attributes,
-   * the screen reads aloud when the component is selected, and the user cannot clearly know what component is currently selected.
-   * To solve this problem, developers can set an accessible text for a component that does not contain text information.
-   * When the component is selected for screen reading, the content of the accessible text is broadcast, helping the user of screen reading clearly know which component is selected.
-   * If the component has both text attributes and accessible text attributes,
-   * only accessible text content is broadcast when the component is selected.
-   * @since 7
-   */
-  accessibilityText(value: string): T;
-
-  /**
-   * Accessibility instructions are used to further explain the current component to the user, for example,
-   * to help the user understand the possible consequences of the operation to be performed,
-   * especially when these consequences cannot be learned from the attributes of the component itself and the accessibility text.
-   * Developers can set relatively detailed explanatory text for this property of a component to help users understand what will be done.
-   * If the component has both the text attribute and the accessibility attribute, when the component is selected,
-   * the text attribute of the component is first broadcast, and then the content of the accessibility attribute is broadcast.
-   * @since 7
-   */
-  accessibilityDescription(value: string): T;
-
-  /**
-   * Accessibility importance, which controls whether a component is identifiable by an accessible auxiliary service.
-   * The value can be auto, yes, no, or no-hide-descendants.
-   * (The last value causes screen reading to ignore the current component and all its subcomponents).
-   * If this parameter is set to yes, the current component can be selected for accessibility auxiliary services.
-   * If this parameter is set to no, the current component cannot be selected for accessibility auxiliary services.
-   * @since 7
-   */
-  accessibilityImportance(value: string): T;
-
-  /**
-   * onAccessibility
-   * @since 7
+   /**
+   * Key. User can set an key to the component to identify it.
+   * @since 8
    */
-  onAccessibility(callback: (event?: { eventType: number }) => void): T;
+  key(value: string): T;
 
   /**
    * geometryTransition
@@ -1111,81 +1233,27 @@ export declare class CommonMethod<T> {
    * Popup control
    * @since 7
    */
-  bindPopup(
-    show: boolean,
-    popup: {
-      /**
-       * Information in the pop-up window.
-      .
-       * @since 7
-       */
-      message: string;
-
-      /**
-       * placement On Top
-      .
-       * @since 7
-       */
-      placementOnTop?: boolean;
-
-      /**
-       * The first button.
-      .
-       * @since 7
-       */
-      primaryButton?: {
-        /**
-         * Button text value
-        .
-         * @since 7
-         */
-        value: string;
-
-        /**
-         * action
-        .
-         * @since 7
-         */
-        action: () => void;
-      };
-
-      /**
-       * The second button.
-      .
-       * @since 7
-       */
-      secondaryButton?: {
-        /**
-         * Button text value
-        .
-         * @since 7
-         */
-        value: string;
-
-        /**
-         * action
-        .
-         * @since 7
-         */
-        action: () => void;
-      };
-
-      /**
-       * on State Change
-      .
-       * @since 7
-       */
-      onStateChange?: (event: { isVisible: boolean }) => void;
-    },
-  ): T;
+  bindPopup(show: boolean, popup: PopupOption | CustomPopupOption): T;
 
   /**
    * Menu control
    * @since 7
    */
-  bindMenu(content: { value: string; action: () => void }[]): T;
+  bindMenu(content: { value: string; action: () => void }[] | CustomBuilder): T;
+
+  /**
+   * Sets styles for component state.
+   * @since 8
+   */
+  stateStyles(value: StateStyels): T;
 }
 
+/**
+ * Defines the CustomBuilder Type.
+ * @since 7
+ */
+declare type CustomBuilder = () => any;
+
 /**
  * CommonShapeMethod
  * @since 7
diff --git a/api/@internal/component/ets/data_panel.d.ts b/api/@internal/component/ets/data_panel.d.ts
index 467ba76be7c16ec0943ef0093178400588718ce5..bde2a7cada642608dfbf8ba253c669310f05b1b0 100644
--- a/api/@internal/component/ets/data_panel.d.ts
+++ b/api/@internal/component/ets/data_panel.d.ts
@@ -12,8 +12,26 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+ 
+ import { CommonMethod } from "./common";
 
-import { CommonMethod } from "./common";
+/**
+ * DataPanelType enum
+ * @since 8
+ */
+export declare enum DataPanelType {
+  /**
+   * Line Type
+   * @since 8
+   */
+  Line,
+
+  /**
+   * Line Rainbow
+   * @since 8
+   */
+  Rainbow,
+}
 
 /**
  * Defines the option of DataPanel.
@@ -31,6 +49,11 @@ export declare interface DataPanelOption {
    * @since 7
    */
   max?: number;
+  /**
+   * DataPanel Type
+   * @since 8
+   */
+  type?: DataPanelType;
 }
 
 /**
diff --git a/api/@internal/component/ets/ellipse.d.ts b/api/@internal/component/ets/ellipse.d.ts
index 3b5fbc2348b064fd49b25dd06cdde98fd8617f3b..6f392e4decacb42d9904d52e36e4cbb3294bef39 100644
--- a/api/@internal/component/ets/ellipse.d.ts
+++ b/api/@internal/component/ets/ellipse.d.ts
@@ -19,7 +19,14 @@ import { CommonShapeMethod } from "./common";
  * Ellipse drawing.
  * @since 7
  */
+ 
 interface Ellipse extends EllipseAttribute<Ellipse> {
+   /**
+   * use new function to set the value.
+   * @since 7
+   */
+  new (value?: { width?: string | number; height?: string | number }): Ellipse;
+
   /**
    * Set the value.
    * @since 7
diff --git a/api/@internal/component/ets/enums.d.ts b/api/@internal/component/ets/enums.d.ts
index 732ce93c3dc59812711977d168ea884f8bca2d37..6ccfcf485756e74e40291d8d6bf2a7f07956e97d 100644
--- a/api/@internal/component/ets/enums.d.ts
+++ b/api/@internal/component/ets/enums.d.ts
@@ -589,6 +589,42 @@ export declare enum Direction {
   Auto,
 }
 
+/**
+ * Sets the horizontal layout of elements.
+ * @since 8
+ */
+export declare enum FocusDirection {
+  /**
+   * From the key up.
+   * @since 8
+   */
+  Up,
+
+  /**
+   * From the key down.
+   * @since 8
+   */
+  Down,
+
+  /**
+   * From the key left.
+   * @since 8
+   */
+  Left,
+
+  /**
+   * From the key right.
+   * @since 8
+   */
+  Right,
+
+  /**
+   * From the key tab.
+   * @since 8
+   */
+  Tab,
+}
+
 /**
  * Used to set the status of the scroll bar.
  * @since 7
@@ -1295,3 +1331,86 @@ export declare enum TextCase {
    */
   UpperCase,
 }
+/**
+ * HoverEffect enumeration description
+ * @since 8
+ */
+export declare enum HoverEffect {
+  /**
+   * Default effect
+   * @since 8
+   */
+  Auto,
+
+  /**
+   * Zoom in and out effect
+   * @since 8
+   */
+  Scale,
+
+  /**
+   * Highlight effect
+   * @since 8
+   */
+  Board,
+
+  /**
+   * None effect
+   * @since 8
+   */
+  None,
+}
+
+/**
+ * Placement enumeration description
+ * @since 8
+ */
+declare enum Placement {
+  /**
+   * Left placement
+   * @since 8
+   */
+  Left,
+
+  /**
+   * Right placement
+   * @since 8
+   */
+  Right,
+
+  /**
+   * Top placement
+   * @since 8
+   */
+  Top,
+
+  /**
+   * Bottom placement
+   * @since 8
+   */
+  Bottom,
+
+  /**
+   * TopLeft placement
+   * @since 8
+   */
+  TopLeft,
+
+  /**
+   * TopRight placement
+   * @since 8
+   */
+  TopRight,
+
+  /**
+   * BottomLeft placement
+   * @since 8
+   */
+  BottomLeft,
+
+  /**
+   * BottomRight placement
+   * @since 8
+   */
+  BottomRight,
+}
diff --git a/api/@internal/component/ets/gesture.d.ts b/api/@internal/component/ets/gesture.d.ts
index b5c61a15f7dd97bb08bd2e7416e6a1eaf1015583..7f407de6896d6ca18660ef8176717db65cdc7d61 100644
--- a/api/@internal/component/ets/gesture.d.ts
+++ b/api/@internal/component/ets/gesture.d.ts
@@ -13,6 +13,9 @@
  * limitations under the License.
  */
 
+
+import { BaseEvent } from "./common";
+
 /**
  * Creating an Object
  * @since 7
@@ -91,6 +94,36 @@ export declare enum PanDirection {
   All,
 }
 
+/**
+ * Creating an Object
+ * @since 8
+ */
+export declare enum SwipeDirection {
+  /**
+   * Default.
+   * @since 8
+   */
+  None,
+
+  /**
+   * Sliding horizontally.
+   * @since 8
+   */
+  Horizontal,
+
+  /**
+   * Sliding Vertical
+   * @since 8
+   */
+  Vertical,
+
+  /**
+   * Sliding in all directions.
+   * @since 8
+   */
+  All,
+}
+
 /**
  * Creating an Object
  * @since 7
@@ -134,32 +167,98 @@ export declare enum GestureMask {
 }
 
 /**
- * Creating an Object
+ * Type of the finger information.
+ * @since 8
+ */
+export interface FingerInfo {
+  /**
+   * Finger unique identifier.
+   * @since 8
+   */
+  id: number;
+
+  /**
+   * X coordinate of the touch point relative to the left edge of the device screen.
+   * @since 8
+   */
+  globalX: number;
+
+  /**
+   * The Y coordinate of the touch point relative to the upper edge of the device screen.
+   * @since 8
+   */
+  globalY: number;
+
+  /**
+   * X coordinate of the touch point relative to the left edge of the touched element.
+   * @since 8
+   */
+  localX: number;
+
+  /**
+   * Y coordinate of the touch point relative to the upper edge of the touched element.
+   * @since 8
+   */
+  localY: number;
+}
+
+/**
+ * Defines the Gesture Type.
  * @since 7
  */
 export declare type GestureType =
+  | TapGesture
+  | LongPressGesture
+  | PanGesture
+  | PinchGesture
+  | SwipeGesture
+  | RotationGesture
+  | GestureGroup;
   /**
    * Set a type value.
    * @since 7
    */
-  TapGesture | LongPressGesture | PanGesture | PinchGesture | RotationGesture | GestureGroup;
+declare type GestureEvent =
+  | TapGestureEvent
+  | LongPressGestureEvent
+  | PanGestureEvent
+  | SwipeGestureEvent
+  | PinchGestureEvent
+  | RotationGestureEvent;
+
+/**
+ * tap gesture event used in the longpress scenario.
+ * @since 8
+ */
+export interface TapGestureEvent extends BaseGestureEvent {
+  /**
+   * All finger information.
+   * @since 8
+   */
+  fingerList: FingerInfo[];
+}
 
 /**
  * long press gesture event used in the longpress scenario.
  * @since 7
  */
-export interface LongPressGestureEvent extends GestureEvent {
+export interface LongPressGestureEvent extends BaseGestureEvent {
   /**
    * Indicates whether an event is triggered repeatedly.
    * @since 7
    */
   repeat: boolean;
+  /**
+   * All finger information.
+   * @since 8
+   */
+  fingerList: FingerInfo[];
 }
 
 /**
  * pan gesture event used in the pan gesture triggering scenario.
  */
-export interface PanGestureEvent extends GestureEvent {
+export interface PanGestureEvent extends BaseGestureEvent {
   /**
    * Gesture event offset X.
    * @since 7
@@ -173,11 +272,28 @@ export interface PanGestureEvent extends GestureEvent {
   offsetY: number;
 }
 
+/**
+ * * pinch gesture event used for triggering the pinch gesture.
+ * @since 7
+ */
+export interface SwipeGestureEvent extends BaseGestureEvent {
+  /**
+   * Gesture event direction angle.
+   * @since 8
+   */
+  angle: number;
+
+  /**
+   * Gesture event slide speed.
+   * @since 8
+   */
+  speed: number;
+}
 /**
  * pinch gesture event used for triggering the pinch gesture.
  * @since 7
  */
-export interface PinchGestureEvent extends GestureEvent {
+export interface PinchGestureEvent extends BaseGestureEvent {
   /**
    * Scaling ratio.
    * @since 7
@@ -201,7 +317,7 @@ export interface PinchGestureEvent extends GestureEvent {
  * rotation gesture event used for triggering the pinch gesture.
  * @since 7
  */
-export interface RotationGestureEvent extends GestureEvent {
+export interface RotationGestureEvent extends BaseGestureEvent {
   /**
    * Rotation angle.
    * @since 7
@@ -213,13 +329,7 @@ export interface RotationGestureEvent extends GestureEvent {
  * base event for gesture.
  * @since 7
  */
-export interface GestureEvent {
-  /**
-   * Event timestamp.
-   * @since 7
-   */
-  timestamp: number;
-}
+export interface BaseGestureEvent extends BaseEvent {}
 
 /**
  * Creating an interface
@@ -338,6 +448,23 @@ interface PanGesture {
   onActionCancel(event: () => void): PanGesture;
 }
 
+/**
+ * @since 8
+ */
+interface SwipeGesture{
+  /**
+   * Set the value.
+   * @since 8
+   */
+  (value?: { fingers?: number; direction?: SwipeDirection; speed?: number }): SwipeGesture;
+
+  /**
+   * Slide gesture recognition success callback.
+   * @since 8
+   */
+  onAction(event: (event?: SwipeGestureEvent) => void): SwipeGesture;
+}
+
 /**
  * @since 7
  */
@@ -428,6 +555,7 @@ interface GestureGroup {
 export declare const TapGestureInterface: TapGesture;
 export declare const LongPressGestureInterface: LongPressGesture;
 export declare const PanGestureInterface: PanGesture;
+declare const SwipeGestureInterface: SwipeGesture;
 export declare const PinchGestureInterface: PinchGesture;
 export declare const RotationGestureInterface: RotationGesture;
 export declare const GestureGroupInterface: GestureGroup;
diff --git a/api/@internal/component/ets/image.d.ts b/api/@internal/component/ets/image.d.ts
index 609c093447bcb174b2e48988f5a2ec068c419d17..c9dd8cadc0bf35e0fc6e7613e9ea25048b9aed1c 100644
--- a/api/@internal/component/ets/image.d.ts
+++ b/api/@internal/component/ets/image.d.ts
@@ -142,6 +142,12 @@ declare class ImageAttribute<T> extends CommonMethod<T> {
    * @since 7
    */
   sourceSize(value: { width: number; height: number }): T;
+  /**
+   * Sets the synchronous or asynchronous mode for image loading.
+   * The default parameter type is bool, and the default value is false.
+   * @since 8
+   */
+  syncLoad(value: boolean): T;
 
   /**
    * This callback is triggered when an image is successfully loaded.
diff --git a/api/@internal/component/ets/index.d.ts b/api/@internal/component/ets/index.d.ts
index 030035bd3e108a2e536add8657736e18a534d2d1..7fdcb61da6416d565063c46fd75a3cefe1fabab9 100644
--- a/api/@internal/component/ets/index.d.ts
+++ b/api/@internal/component/ets/index.d.ts
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-export * from "./ability_component";
+export * from "./action_sheet";
 export * from "./alert_dialog";
 export * from "./alphabet_indexer";
 export * from "./animator";
@@ -21,6 +21,7 @@ export * from "./badge";
 export * from "./blank";
 export * from "./button";
 export * from "./calendar";
+export * from "./canvas";
 export * from "./circle";
 export * from "./column";
 export * from "./column_split";
@@ -36,14 +37,13 @@ export * from "./flex";
 export * from "./forEach";
 export * from "./form_component";
 export * from "./gauge";
-export * from "./geometry_view";
 export * from "./gesture";
 export * from "./grid";
 export * from "./gridItem";
 export * from "./grid_container";
-export * from "./hyperlink";
 export * from "./image";
 export * from "./image_animator";
+export * from "./inspector";
 export * from "./lazyForEach";
 export * from "./line";
 export * from "./list";
@@ -67,12 +67,16 @@ export * from "./refresh";
 export * from "./row";
 export * from "./row_split";
 export * from "./scroll";
+export * from "./scroll_bar";
 export * from "./search";
 export * from "./shape";
+export * from "./sheet";
 export * from "./slider";
 export * from "./span";
 export * from "./stack";
 export * from "./stateManagement";
+export * from "./stepper";
+export * from "./stepperItem";
 export * from "./swiper";
 export * from "./tabs";
 export * from "./tab_content";
@@ -84,3 +88,5 @@ export * from "./toggle";
 export * from "./units";
 export * from "./video";
 export * from "./web";
+export * from "./xcomponent";
+
diff --git a/api/@internal/component/ets/inspector.d.ts b/api/@internal/component/ets/inspector.d.ts
index 58001f0a6bf33936d667d50687a8130a1be08526..9e61446b4c4d265bee553cca67b8ffaaf71a4b7e 100644
--- a/api/@internal/component/ets/inspector.d.ts
+++ b/api/@internal/component/ets/inspector.d.ts
@@ -17,10 +17,30 @@
  * Get inspector node infos.
  * @since 7
  */
-declare function getInspectorNodes(): object;
+export declare function getInspectorNodes(): object;
 
 /**
  * Get inspector node info by node id.
  * @since 7
  */
-declare function getInspectorNodeById(id: number): object;
+ export declare function getInspectorNodeById(id: number): object;
+/**
+ * Get inspector info by key.
+ * @since 8
+ * @systemapi
+ */
+ export declare function getInspectorByKey(key: string): string;
+
+/**
+ * Get inspector tree.
+ * @systemapi
+ * @since 8
+ */
+ export declare function getInspectorTree(): string;
+
+/**
+ * Send event to inspector by key. Return false if no inspector with key is found.
+ * @since 8
+ * @systemapi
+ */
+ export declare function sendEventByKey(key: string, action: number, params: string): boolean;
diff --git a/api/@internal/component/ets/line.d.ts b/api/@internal/component/ets/line.d.ts
index 277258b4ee0fdd58adabc8604e7cbb45bd074e77..5204616af7d33dd504bde016e6460f81de23becb 100644
--- a/api/@internal/component/ets/line.d.ts
+++ b/api/@internal/component/ets/line.d.ts
@@ -21,11 +21,12 @@ import { CommonShapeMethod } from "./common";
  */
 interface Line extends LineAttribute<Line> {
   /**
-   * Returns the line.
+   * Uses new to create the line.
+   * width: Width of the rectangle where the line resides..
    * height: Height of the rectangle where the line resides.
    * @since 7
    */
-  (): Line;
+  new (value?: { width?: string | number; height?: string | number }): Line;
   /**
    * The return value of the parameter is Line.
    * width: Width of the rectangle where the line resides..
diff --git a/api/@internal/component/ets/list.d.ts b/api/@internal/component/ets/list.d.ts
index 127a90ce6254dca136dc57270371981bd4ee80e0..6e407e1847b00fb0b6ac5e52c105d85982ff929d 100644
--- a/api/@internal/component/ets/list.d.ts
+++ b/api/@internal/component/ets/list.d.ts
@@ -42,6 +42,24 @@ export declare enum ScrollState {
   Fling,
 }
 
+/**
+ * ItemDragInfo object description
+ * @since 8
+ */
+export interface ItemDragInfo {
+  /**
+   * Obtains the X coordinate of the drag window, in vp.
+   * @since 8
+   */
+  x: number;
+
+  /**
+   * Obtains the Y coordinate of the drag window, in vp.
+   * @since 8
+   */
+  y: number;
+}
+
 /**
  * ListExtend extension declaration.
  * @since 7
@@ -63,7 +81,7 @@ interface List extends ListAttribute<List> {
 /**
  * @since 7
  */
-declare class ListAttribute<T> extends CommonMethod<T> {
+export declare class ListAttribute<T> extends CommonMethod<T> {
   /**
    * Called when the arrangement direction of the list component is set.
    * @since 7
@@ -153,6 +171,39 @@ declare class ListAttribute<T> extends CommonMethod<T> {
    * @since 7
    */
   onItemMove(event: (from: number, to: number) => boolean): T;
+  /**
+   * After a listener is bound, the component can be dragged. After the drag occurs, a callback is triggered.
+   * (To be triggered, press and hold for 170 milliseconds (ms))
+   * @since 8
+   */
+  onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => (() => any) | void): T;
+
+  /**
+   * After binding, a callback is triggered when the component is dragged to the range of the component.
+   * @since 8
+   */
+  onItemDragEnter(event: (event: ItemDragInfo) => void): T;
+
+  /**
+   * After binding, a callback is triggered when the drag moves within the range of a placeable component.
+   * @since 8
+   */
+  onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void): T;
+
+  /**
+   * After binding, a callback is triggered when the component is dragged out of the component range.
+   * @since 8
+   */
+  onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void): T;
+
+  /**
+   * The component bound to this event can be used as the drag release target.
+   * This callback is triggered when the drag behavior is stopped within the scope of the component.
+   * @since 8
+   */
+  onItemDrop(
+    event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void,
+  ): T;
 }
 
 /**
diff --git a/api/@internal/component/ets/matrix2d.d.ts b/api/@internal/component/ets/matrix2d.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fd85c45f284acd1dd9d07b39e8951fa8659c4ad2
--- /dev/null
+++ b/api/@internal/component/ets/matrix2d.d.ts
@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * 2D transformation matrix, supporting rotation, translation, and scaling of the X-axis and Y-axis
+ * @since 8
+ */
+export declare class Matrix2D {
+  /**
+   * Horizontal Zoom
+   * @since 8
+   */
+  scaleX?: number;
+
+  /**
+   * Vertical Tilt
+   * @since 8
+   */
+  rotateY?: number;
+
+  /**
+   * Horizontal Tilt
+   * @since 8
+   */
+  rotateX?: number;
+
+  /**
+   * Vertical Zoom
+   * @since 8
+   */
+  scaleY?: number;
+
+  /**
+   * Horizontal movement
+   * @since 8
+   */
+  translateX?: number;
+
+  /**
+   * Vertical movement
+   * @since 8
+   */
+  translateY?: number;
+
+  /**
+   * Transforms the current 2D matrix back to the identity matrix (i.e., without any rotational
+   * translation scaling effect)
+   * @since 8
+   */
+  identity(): Matrix2D;
+
+  /**
+   * Transform the current 2D matrix into an inverse matrix (that is, the transformation effect
+   * is the opposite effect of the original)
+   * @since 8
+   */
+  invert(): Matrix2D;
+
+  /**
+   * The matrix is superimposed in right multiplication mode. When the input parameter is empty,
+   * the matrix is superimposed.
+   * @param other Matrix to be superimposed
+   * @since 8
+   */
+  multiply(other?: Matrix2D): Matrix2D;
+
+  /**
+   * Adds the rotation effect of the X and Y axes to the current matrix.
+   * @param rx Rotation effect of the X axis
+   * @param ry Rotation effect of the Y-axis
+   * @since 8
+   */
+  rotate(rx?: number, ry?: number): Matrix2D;
+
+  /**
+   * Adds the translation effect of the X and Y axes to the current matrix.
+   * @param tx X-axis translation effect
+   * @param ty Y-axis translation effect
+   * @since 8
+   */
+  translate(tx?: number, ty?: number): Matrix2D;
+
+  /**
+   * Adds the scaling effect of the X and Y axes to the current matrix.
+   * @param sx X-axis scaling effect
+   * @param sy Y-axis scaling effect
+   * @since 8
+   */
+  scale(sx?: number, sy?: number): Matrix2D;
+
+  /**
+   * Constructs a 2D change matrix object. The default value is the unit matrix.
+   * @since 8
+   */
+  constructor();
+}
diff --git a/api/@internal/component/ets/navigation.d.ts b/api/@internal/component/ets/navigation.d.ts
index 249ac096a87e396217c868bbc8a1b8b1a0b34ee7..092db160716221b622c1580afc79bcaf95eb33c8 100644
--- a/api/@internal/component/ets/navigation.d.ts
+++ b/api/@internal/component/ets/navigation.d.ts
@@ -13,8 +13,49 @@
  * limitations under the License.
  */
 
-import { CommonMethod } from "./common";
+import { CustomBuilder, CommonMethod } from "./common";
 
+/**
+ * Naivagtion title mode.
+ * @since 8
+ */
+export declare enum NavigationTitleMode {
+  /**
+   * The title is free mode.
+   * @since 8
+   */
+  Free = 0,
+
+  /**
+   * The title is full mode.
+   * @since 8
+   */
+  Full,
+
+  /**
+   * The title is mini mode.
+   * @since 8
+   */
+  Mini,
+}
+
+export declare interface NavigationMenuItem {
+  /**
+   * The value of navigation menu item.
+   * @since 8
+   */
+  value: string;
+  /**
+   * The icon of navigation menu item.
+   * @since 8
+   */
+  icon?: string;
+  /**
+   * Trigger by navigation menu item click.
+   * @since 8
+   */
+  action?: () => void;
+}
 /**
  * Provide navigator view interface
  * @since 8
@@ -31,7 +72,60 @@ interface Navigation extends NavigationAttribute<Navigation> {
  * Declare Navigation view properties.
  * @since 8
  */
-declare class NavigationAttribute<T> extends CommonMethod<T> {}
+export declare class NavigationAttribute<T> extends CommonMethod<T> {
+  /**
+   * Navigation title
+   * @since 8
+   */
+  title(value: string | CustomBuilder): T;
 
+  /**
+   * Navigation subtitle
+   * @since 8
+   */
+  subTitle(value: string): T;
+
+  /**
+   * Hide navigation bar
+   * @since 8
+   */
+  hideTitleBar(value: boolean): T;
+
+  /**
+   * Hide navigation back button
+   * @since 8
+   */
+  hideBackButton(value: boolean): T;
+
+  /**
+   * Navigation title mode
+   * @since 8
+   */
+  titleMode(value: NavigationTitleMode): T;
+
+  /**
+   * Navigation title bar's menus
+   * @since 8
+   */
+  menus(value: Array<NavigationMenuItem> | CustomBuilder): T;
+
+  /**
+   * Tool bar
+   * @since 8
+   */
+  toolBar(value: object | CustomBuilder): T;
+
+  /**
+   * Hide tool bar
+   * @since 8
+   */
+  hideToolBar(value: boolean): T;
+
+  /**
+   * Trigger a titleModeChanged event when title mode changed at free mode.
+   * @since 8
+   */
+  onTitleModeChanged(callback: (titleMode: NavigationTitleMode) => void): T;
+}
 export declare class NavigationExtend<T> extends NavigationAttribute<T> {}
 export declare const NavigationInterface: Navigation;
diff --git a/api/@internal/component/ets/path.d.ts b/api/@internal/component/ets/path.d.ts
index e450886eef04a00c6d421ee6e6c9649148ba1fb2..179094ae54e1eaceb32544d98725aa69f87b9b77 100644
--- a/api/@internal/component/ets/path.d.ts
+++ b/api/@internal/component/ets/path.d.ts
@@ -20,6 +20,11 @@ import { CommonShapeMethod } from "./common";
  * @since 7
  */
 interface Path extends PathAttribute<Path> {
+   /**
+   * Use new to create Path.
+   * @since 7
+   */
+  new (value?: { width?: number | string; height?: number | string; commands?: string }): Path;
   /**
    * Called when drawing path.
    * @since 7
diff --git a/api/@internal/component/ets/piece.d.ts b/api/@internal/component/ets/piece.d.ts
index 63ecaf96fddbc3fa56dee77958fc16b47edf9678..16fc881878b07c99151094e8ea45b24c9c5f86d6 100644
--- a/api/@internal/component/ets/piece.d.ts
+++ b/api/@internal/component/ets/piece.d.ts
@@ -14,6 +14,8 @@
  */
 
 import { CommonMethod } from "./common";
+import { FontStyle, FontWeight } from "./enums";
+import { Length, ResourceColor, ResourceStr } from "./units";
 
 /**
  * Sets the relative position of icons and text.
@@ -47,12 +49,51 @@ interface Piece extends PieceAttribute<Piece> {
   (options?: { content: string; icon?: string }): Piece;
 }
 
+/**
+ * @since 8
+ */
 declare class PieceAttribute<T> extends CommonMethod<T> {
   /**
    * Called when the relative position of the icon and the text is set.
    * @since 8
    */
   iconPosition(value: IconPosition): T;
+  /**
+   * Called when the value of Piece fontColor is set
+   * @since 8
+   */
+  fontColor(value: ResourceColor): T;
+  /**
+   * Called when the value of Piece fontSize is set
+   * @since 8
+   */
+  fontSize(value: Length): T;
+  /**
+   * Called when the value of Piece fontStyle is set
+   * @since 8
+   */
+  fontStyle(value: FontStyle): T;
+  /**
+   * Called when the value of Piece fontWeight is set
+   * @since 8
+   */
+  fontWeight(value: number | FontWeight | string): T;
+  /**
+   * Called when the value of Piece fontFamily is set
+   * @since 8
+   */
+  fontFamily(value: ResourceStr): T;
+  /**
+   * Called when the value of Piece showDelete is set
+   * @since 8
+   */
+  showDelete(value: boolean): T;
+  /**
+   * Default icon is invisible,
+   * Callback onClose function when icon is clicked
+   * @since 8
+   */
+  onClose(callback: () => void): T;
 }
 
 export declare class PieceExtend<T> extends PieceAttribute<T> {}
diff --git a/api/@internal/component/ets/polygon.d.ts b/api/@internal/component/ets/polygon.d.ts
index c300eaadbba3b3c57707d4c20093548b34ba5daa..7eaf226172154f51830dc02bf96819272704efe3 100644
--- a/api/@internal/component/ets/polygon.d.ts
+++ b/api/@internal/component/ets/polygon.d.ts
@@ -20,12 +20,11 @@ import { CommonShapeMethod } from "./common";
  * @since 7
  */
 interface Polygon extends PolygonAttribute<Polygon> {
-  /**
-   * Called when the draw polygon interface is used.
-   * @devices phone, tablet, car.
+   /**
+   * Uses new to create Polygon.
    * @since 7
    */
-  (): Polygon;
+  new (value?: { width?: string | number; height?: string | number }): Polygon;
 
   /**
    * Called when drawing a polygon.
diff --git a/api/@internal/component/ets/polyline.d.ts b/api/@internal/component/ets/polyline.d.ts
index a539a541bf8723247eb3f4c5022023eb5a751f14..0ca5d3b106db4e9f0b6fb141bd70c14ba6f2f607 100644
--- a/api/@internal/component/ets/polyline.d.ts
+++ b/api/@internal/component/ets/polyline.d.ts
@@ -20,6 +20,11 @@ import { CommonShapeMethod } from "./common";
  * @since 7
  */
 interface Polyline extends PolylineAttribute<Polyline> {
+   /**
+   * Uses new to create Polyline.
+   * @since 7
+   */
+  new (value?: { width?: string | number; height?: string | number }): Polyline;
   /**
    * Called when using the draw polyline interface.
    * @since 7
diff --git a/api/@internal/component/ets/progress.d.ts b/api/@internal/component/ets/progress.d.ts
index e161e278929e461e9cf7bb95064a9d4a0fbc558f..bd854ddb9f519f0331a3c5e059214487ecfa613f 100644
--- a/api/@internal/component/ets/progress.d.ts
+++ b/api/@internal/component/ets/progress.d.ts
@@ -29,11 +29,31 @@ export declare enum ProgressStyle {
   Linear,
 
   /**
-   * Circular progress bar.
+   * Ring progress bar.
+   * @devices phone, tablet, car.
+   * @since 8
+   */
+  Ring,
+
+  /**
+   * Eclipse progress bar.
    * @devices phone, tablet, car.
    * @since 7
    */
   Eclipse,
+  /**
+   * ScaleRing progress bar.
+   * @devices phone, tablet, car.
+   * @since 8
+   */
+  ScaleRing,
+
+  /**
+   * Capsule progress bar.
+   * @devices phone, tablet, car.
+   * @since 8
+   */
+  Capsule,
 }
 
 /**
diff --git a/api/@internal/component/ets/radio.d.ts b/api/@internal/component/ets/radio.d.ts
index 5c56790035a5044cb403f6e12c680cc76e79be3c..a9e1ae12dea37a16628bc12ed58fdb694b007a62 100644
--- a/api/@internal/component/ets/radio.d.ts
+++ b/api/@internal/component/ets/radio.d.ts
@@ -12,9 +12,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import { CommonMethod } from "./common";
 
+/**
+ * Input parameter for creating a radio box.
+ * @devices phone, tablet, car
+ * @since 8
+ */
+export declare interface RadioOption {
+  /**
+   * Radio group name.
+   * @devices phone, tablet, car
+   * @since 8
+   */
+  group: string;
+
+  /**
+   * Radio name.
+   * @devices phone, tablet, car
+   * @since 8
+   */
+  value: string;
+}
+
 /**
  * Provides an interface for creating a radio box.
  * @since 8
@@ -28,17 +48,20 @@ interface Radio extends RadioAttribute<Radio> {
 }
 
 /**
+ * @devices phone, tablet, car
  * @since 8
  */
 declare class RadioAttribute<T> extends CommonMethod<T> {
   /**
    * Called when the radio box is selected.
+   * @devices phone, tablet, car
    * @since 8
    */
   checked(value: boolean): T;
 
   /**
    * Called when the radio box selection status changes.
+   * @devices phone, tablet, car
    * @since 8
    */
   onChange(callback: (isChecked: boolean) => void): T;
diff --git a/api/@internal/component/ets/scroll_bar.d.ts b/api/@internal/component/ets/scroll_bar.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fa066f8e58f53469d8605598b4152a523b5b20f2
--- /dev/null
+++ b/api/@internal/component/ets/scroll_bar.d.ts
@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonMethod } from "./common";
+import { BarState } from "./enums";
+import { Scroller } from "./scroll"
+
+/**
+ * Content scroll direction.
+ * @since 8
+ */
+export declare enum ScrollBarDirection {
+  /**
+   * Vertical scrolling is supported.
+   * @since 8
+   */
+  Vertical,
+
+  /**
+   * Horizontal scrolling is supported.
+   * @since 8
+   */
+  Horizontal,
+}
+
+/**
+ * Defines the option of ScrollBar.
+ * @since 8
+ */
+export declare interface ScrollBarOption {
+  /**
+   * Sets the scroller of scroll bar.
+   * @since 8
+   */
+  scroller: Scroller;
+
+  /**
+   * Sets the direction of scroll bar.
+   * @since 8
+   */
+  direction?: ScrollBarDirection;
+
+  /**
+   * Sets the state of scroll bar.
+   * @since 8
+   */
+  state?: BarState;
+}
+
+/**
+ * Provides interfaces for scroll bar.
+ * @since 8
+ */
+interface ScrollBar extends ScrollBarAttribute<ScrollBar> {
+  /**
+   * Called when a ScrollBar container is set.
+   * @since 8
+   */
+  (value: ScrollBarOption): ScrollBar;
+}
+
+/**
+ * @since 8
+ */
+declare class ScrollBarAttribute<T> extends CommonMethod<T> {}
+export declare class ScrollBarExtend<T> extends ScrollBarAttribute<T> {}
+export declare const ScrollBarInterface: ScrollBar;
diff --git a/api/@internal/component/ets/search.d.ts b/api/@internal/component/ets/search.d.ts
index f7b61d722d28ac02f5d205732ca335a4ff51f662..a2ff32bdbaf7f26e796350796ff0e06717412f66 100644
--- a/api/@internal/component/ets/search.d.ts
+++ b/api/@internal/component/ets/search.d.ts
@@ -14,8 +14,7 @@
  */
 
 import { CommonMethod } from "./common";
-import { FontStyle, FontWeight } from "./enums";
-import { ResourceColor } from "./units";
+import { ResourceColor, Font } from "./units";
 
 /**
  * @since 8
@@ -28,11 +27,55 @@ interface Search extends SearchAttribute<Search> {
  * @since 8
  */
 declare class SearchAttribute<T> extends CommonMethod<T> {
+  /**
+   * Set the search button text
+   * @since 8
+   */
   searchButton(value: string): T;
+  /**
+   * Set the place hold text color
+   * @since 8
+   */
   placeholderColor(value: ResourceColor): T;
-  placeholderFont(value: { size: number; weight: FontWeight; family: string; style: FontStyle }): T;
+
+  /**
+   * Set the font used for place holder text
+   * @since 8
+   */
+  placeholderFont(value?: Font): T;
+
+  /**
+   * Set the font used for input text
+   * @since 8
+   */
+  textFont(value?: Font): T;
+  /**
+   * Call the function when clicked the search button
+   * @since 8
+   */
   onSubmit(callback: (value: string) => void): T;
+  /**
+   * Call the function when editing the input text
+   * @since 8
+   */
   onChange(callback: (value: string) => void): T;
+  /**
+   * Called when using the Clipboard menu
+   * @since 8
+   */
+  onCopy(callback: (value: string) => void): T;
+
+  /**
+   * Called when using the Clipboard menu
+   * @since 8
+   */
+  onCut(callback: (value: string) => void): T;
+
+  /**
+   * Called when using the Clipboard menu
+   * @since 8
+   */
+  onPaste(callback: (value: string) => void): T;
 }
 
 export declare class SearchExtend<T> extends SearchAttribute<T> {}
diff --git a/api/@internal/component/ets/geometry_view.d.ts b/api/@internal/component/ets/sheet.d.ts
similarity index 60%
rename from api/@internal/component/ets/geometry_view.d.ts
rename to api/@internal/component/ets/sheet.d.ts
index 5579704f336507f5fa1f07196e0a28c947945736..2a763b5d97c309e23be47bf5ad0cf541426e8b92 100644
--- a/api/@internal/component/ets/geometry_view.d.ts
+++ b/api/@internal/component/ets/sheet.d.ts
@@ -13,25 +13,25 @@
  * limitations under the License.
  */
 
-import { CommonMethod } from "./common";
+import { CommonMethod } from "./common"
 
 /**
- * Defines the GeometryView Component.
+ * Provides the interface for the sheet attributes.
  * @since 8
  */
-interface GeometryView extends GeometryViewAttribute<GeometryView> {
+interface Sheet extends  SheetAttribute<Sheet>{
   /**
-   * Callback function.
+   * Create sheet.
    * @since 8
    */
-  (callback: (geometry?: any) => void): GeometryView;
+  (): Sheet;
 }
 
 /**
- * Inherit Public
+ * Declares sheet properties.
  * @since 8
  */
-declare class GeometryViewAttribute<T> extends CommonMethod<T> {}
+declare class SheetAttribute<T> extends CommonMethod<T> {}
 
-export declare class GeometryViewExtend<T> extends GeometryViewAttribute<T> {}
-export declare const GeometryViewInterface: GeometryView;
+export declare class SheetExtend<T> extends SheetAttribute<T> {}
+export declare const SheetInstance: Sheet;
diff --git a/api/@internal/component/ets/slider.d.ts b/api/@internal/component/ets/slider.d.ts
index 4f42693e5d2ac8fe4582150547d65f80ac2d556e..e48f85cb1be2d330a664f945d4c87e28b8266ba1 100644
--- a/api/@internal/component/ets/slider.d.ts
+++ b/api/@internal/component/ets/slider.d.ts
@@ -13,6 +13,7 @@
  * limitations under the License.
  */
 
+import { Axis } from "./enums";
 import { CommonMethod } from "./common";
 import { ResourceColor } from "./units";
 
@@ -32,6 +33,11 @@ export declare enum SliderStyle {
    * @since 7
    */
   InSet,
+  /**
+   * Capsule style slider.
+   * @since 8
+   */
+  Capsule,
 }
 
 /**
@@ -92,6 +98,17 @@ export declare interface SliderOption {
    * @since 7
    */
   style?: SliderStyle;
+  /**
+   * Sets the slider direction style.
+   * @since 8
+   */
+  direction?: Axis;
+
+  /**
+   * Set whether the direction of the slider needs to be reversed.
+   * @since 8
+   */
+  reverse?: boolean;
 }
 
 /**
diff --git a/api/@internal/component/ets/stepper.d.ts b/api/@internal/component/ets/stepper.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1a06ce71b7c7957deff946214e13fe7cca3c367f
--- /dev/null
+++ b/api/@internal/component/ets/stepper.d.ts
@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonMethod } from "./common";
+
+/**
+ * Declare the stepper.
+ * @since 8
+ */
+interface Stepper extends StepperAttribute<Stepper> {
+  /**
+   * Called when the stepper component is used.
+   * @since 8
+   */
+  (value?: { index?: number }): Stepper;
+}
+
+/**
+ * Defines the stepper attribute functions
+ * @since 8
+ */
+declare class StepperAttribute<T> extends CommonMethod<T> {
+  /**
+   * Callback when the finish label is clicked.
+   * @since 8
+   */
+  onFinish(callback: () => void): T;
+
+  /**
+   * Callback when the skip label is clicked.
+   * @since 8
+   */
+  onSkip(callback: () => void): T;
+
+  /**
+   * Callback when the change label is clicked.
+   * @since 8
+   */
+  onChange(callback: (prevIndex?: number, index?: number) => void): T;
+
+  /**
+   * Callback when the next label is clicked.
+   * @since 8
+   */
+  onNext(callback: (index?: number, pendingIndex?: number) => void): T;
+
+  /**
+   * Callback when the previous label is clicked.
+   * @since 8
+   */
+  onPrevious(callback: (index?: number, pendingIndex?: number) => void): T;
+}
+
+export declare class StepperExtend<T> extends StepperAttribute<T> {}
+export declare const StepperInstance: Stepper;
diff --git a/api/@internal/component/ets/stepperItem.d.ts b/api/@internal/component/ets/stepperItem.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9bd38d5013d77bf01f41fe798468886518d0922f
--- /dev/null
+++ b/api/@internal/component/ets/stepperItem.d.ts
@@ -0,0 +1,104 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonMethod } from "./common";
+
+/**
+ * ItemState
+ * @devices phone, tablet, car
+ * @since 8
+ */
+export declare enum ItemState {
+  /**
+   * Default State
+   * @devices phone, tablet, car
+   * @since 8
+   */
+  Normal,
+
+  /**
+   * Disabled State
+   * @devices phone, tablet, car
+   * @since 8
+   */
+  Disabled,
+
+  /**
+   * Waiting State
+   * @devices phone, tablet, car
+   * @since 8
+   */
+  Waiting,
+
+  /**
+   * Skip State
+   * @devices phone, tablet, car
+   * @since 8
+   */
+  Skip,
+}
+
+/**
+ * @devices phone, tablet, car
+ * @since 8
+ */
+export declare class StepperItemExtend<T> extends StepperItemAttribute<T> {}
+
+/**
+ * Provides an interface for switching the stepperItem view on stepper container.
+ * @devices phone, tablet, car
+ * @since 8
+ */
+interface StepperItem extends StepperItemAttribute<StepperItem> {
+  /**
+   * Called when the stepperItem component is used.
+   * @devices phone, tablet, car
+   * @since 8
+   */
+  (): StepperItem;
+}
+
+/**
+ * @devices phone, tablet, car
+ * @since 8
+ */
+declare class StepperItemAttribute<T> extends CommonMethod<T> {
+  /**
+   * Called when the value of stepperItem prevLabel is set
+   * @devices phone, tablet, car
+   * @since 8
+   */
+  prevLabel(value: string): T;
+
+  /**
+   * Called when the value of stepperItem nextLabel is set
+   * @devices phone, tablet, car
+   * @since 8
+   */
+  nextLabel(value: string): T;
+
+  /**
+   * Called when the value of stepperItem status is set
+   * @devices phone, tablet, car
+   * @since 8
+   */
+  status(value?: ItemState): T;
+}
+
+/**
+ * @devices phone, tablet, car
+ * @since 8
+ */
+export declare const StepperItemInterface: StepperItem;
diff --git a/api/@internal/component/ets/swiper.d.ts b/api/@internal/component/ets/swiper.d.ts
index b2b91252fb579ea5e10ed015b84c2c6dea0871bf..062436ff0d9bc677b412c359b6ecb01f279c0cd8 100644
--- a/api/@internal/component/ets/swiper.d.ts
+++ b/api/@internal/component/ets/swiper.d.ts
@@ -14,6 +14,7 @@
  */
 
 import { CommonMethod } from "./common";
+import { EdgeEffect } from "./enums";
 
 /**
  * Provides methods for switching components.
@@ -37,6 +38,11 @@ export declare class SwiperController {
    * @since 7
    */
   showPrevious();
+  /**
+   * Called when need to stop the swiper animation.
+   * @since 8
+   */
+  finishAnimation(callback?: () => void);
 }
 
 /**
@@ -127,6 +133,30 @@ declare class SwiperAttribute<T> extends CommonMethod<T> {
    */
   displayMode(value: SwiperDisplayMode): T;
 
+  /**
+   * Called when setting the cached count of the swiper container one side.
+   * @since 8
+   */
+  cachedCount(value: number): T;
+
+  /**
+   * This command is invoked when the number of subcomponents is set.
+   * @since 8
+   */
+  displayCount(value: number | string): T;
+
+  /**
+   * Invoked when setting the sliding effect
+   * @since 8
+   */
+  effectMode(value: EdgeEffect): T;
+
+  /**
+   * Called when sliding is disableSwipe
+   * @since 8
+   */
+  disableSwipe(value: boolean): T;
+
   /**
    * Called when the index value changes.
    * @since 7
diff --git a/api/@internal/component/ets/text_area.d.ts b/api/@internal/component/ets/text_area.d.ts
index 94257dfec84cdac816156929094cc68400ce7219..439e7069f8082ca58a36a5b4efe4f632858cd4e6 100644
--- a/api/@internal/component/ets/text_area.d.ts
+++ b/api/@internal/component/ets/text_area.d.ts
@@ -15,8 +15,8 @@
 
 import { ResourceStr } from ".";
 import { CommonMethod } from "./common";
-import { TextAlign } from "./enums";
-import { Font, ResourceColor } from "./units";
+import { TextAlign, FontStyle,FontWeight} from "./enums";
+import { Font, ResourceColor, Length} from "./units";
 
 /**
  * Defines the option of TextArea.
@@ -77,12 +77,59 @@ declare class TextAreaAttribute<T> extends CommonMethod<T> {
    */
   caretColor(value: ResourceColor): T;
 
+  /**
+   * Called when the font color is set.
+   * @since 7
+   */
+  fontColor(value: ResourceColor): T;
+
+  /**
+   * Called when the font size is set.
+   * @since 7
+   */
+  fontSize(value: Length): T;
+
+  /**
+   * Called when the font style of a font is set.
+   * @since 7
+   */
+  fontStyle(value: FontStyle): T;
+
+  /**
+   * Called when the font weight is set.
+   * @since 7
+   */
+  fontWeight(value: number | FontWeight | string): T;
+
+  /**
+   * Called when the font list of text is set.
+   * @since 7
+   */
+  fontFamily(value: ResourceStr): T;
+
   /**
    * Called when the input changes.
    * @devices phone, tablet, car.
    * @since 8
    */
   onChange(callback: (value: string) => void): T;
+  /**
+   * Called when using the Clipboard menu
+   * @since 7
+   */
+  onCopy(callback: (value: string) => void): T;
+
+  /**
+   * Called when using the Clipboard menu
+   * @since 7
+   */
+  onCut(callback: (value: string) => void): T;
+
+  /**
+   * Called when using the Clipboard menu
+   * @since 7
+   */
+  onPaste(callback: (value: string) => void): T;
 }
 
 export declare class TextAreaExtend<T> extends TextAreaAttribute<T> {}
diff --git a/api/@internal/component/ets/text_input.d.ts b/api/@internal/component/ets/text_input.d.ts
index d89584506c470f0a1953beb921d643568e4b553e..b9fb92541c3a8122a241933c0cbf1d98838c18f6 100644
--- a/api/@internal/component/ets/text_input.d.ts
+++ b/api/@internal/component/ets/text_input.d.ts
@@ -16,7 +16,7 @@
 import { Font } from ".";
 import { CommonMethod } from "./common";
 import { FontWeight, FontStyle } from "./enums";
-import { Resource, ResourceColor, ResourceStr } from "./units";
+import { ResourceColor, ResourceStr, Length } from "./units";
 
 /**
  * Declare the type of input box
@@ -168,10 +168,57 @@ declare class TextInputAttribute<T> extends CommonMethod<T> {
 
   /**
    * Called when the input of maximum text length is set.
-   * @devices tv, phone, tablet, wearable, liteWearable, smartVision.
-   * @since 5
+   * @since 7
    */
   maxLength(value: number): T;
+
+  /**
+   * Called when the font color is set.
+   * @since 7
+   */
+  fontColor(value: ResourceColor): T;
+
+  /**
+   * Called when the font size is set.
+   * @since 7
+   */
+  fontSize(value: Length): T;
+
+  /**
+   * Called when the font style of a font is set.
+   * @since 7
+   */
+  fontStyle(value: FontStyle): T;
+
+  /**
+   * Called when the font weight is set.
+   * @since 7
+   */
+  fontWeight(value: number | FontWeight | string): T;
+
+  /**
+   * Called when the font list of text is set.
+   * @since 7
+   */
+  fontFamily(value: ResourceStr): T;
+
+  /**
+   * Called when using the Clipboard menu
+   * @since 7
+   */
+  onCopy(callback: (value: string) => void): T;
+
+  /**
+   * Called when using the Clipboard menu
+   * @since 7
+   */
+  onCut(callback: (value: string) => void): T;
+
+  /**
+   * Called when using the Clipboard menu
+   * @since 7
+   */
+  onPaste(callback: (value: string) => void): T;
 }
 
 export declare class TextInputExtend<T> extends TextInputAttribute<T> {}
diff --git a/api/@internal/component/ets/units.d.ts b/api/@internal/component/ets/units.d.ts
index 3bd195cfdaa8e9a6192cc406aee4db456b437174..2e4d53dedcb3cfc2384998e9bf363d4953c07f75 100644
--- a/api/@internal/component/ets/units.d.ts
+++ b/api/@internal/component/ets/units.d.ts
@@ -130,3 +130,49 @@ export declare interface Font {
    */
   style?: FontStyle;
 }
+/**
+ * Defines the area property.
+ * @since 8
+ */
+export declare interface Area {
+  /**
+   * Defines the width property.
+   * @since 8
+   */
+  width: Length;
+
+  /**
+   * Defines the height property.
+   * @since 8
+   */
+  height: Length;
+
+  /**
+   * Defines the local position.
+   * @since 8
+   */
+  pos: Position;
+
+  /**
+   * Defines the global position.
+   * @since 8
+   */
+  globalPos: Position;
+}
+
+/**
+ * Defines the position.
+ * @since 8
+ */
+export declare interface Position {
+  /**
+   * Coordinate x of the Position.
+   * @since 8
+   */
+  x: Length;
+  /**
+   * Coordinate y of the Position.
+   * @since 8
+   */
+  y: Length;
+}
diff --git a/api/@internal/component/ets/xcomponent.d.ts b/api/@internal/component/ets/xcomponent.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7ac37e0cbf860309408ad124fa40d78ac93b8c4c
--- /dev/null
+++ b/api/@internal/component/ets/xcomponent.d.ts
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonMethod } from "./common"
+
+/**
+ * @since 8
+ */
+interface XComponent extends XComponentAttribute<XComponent>{
+  (value: { id: string; type: string; libraryname: string; source: string }): XComponent;
+}
+
+/**
+ * @since 8
+ */
+declare class XComponentAttribute<T> extends CommonMethod<T> {
+  /**
+   * Called when judging whether the xcomponent surface is created.
+   * @since 8
+   */
+  onLoad(callback: (event?: any) => void): T;
+
+  /**
+   * Called when judging whether the xcomponent is destroyed.
+   * @since 8
+   */
+  onDestroy(event: () => void): T;
+}
+
+export declare class XComponentExtend<T> extends XComponentAttribute<T> {}
+export declare const XComponentInterface: XComponent;