mdui 2.0.3 → 2.0.5

package/components/tabs/tab.d.ts

@@ -4,7 +4,7 @@ import type { Ripple } from '../ripple/index.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 declare const Tab_base: import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof MduiElement;
 /**
- * @summary 选项卡项组件。需与 `<mdui-tabs>` 和 `<mdui-tab-panel>` 组件配合使用
+ * @summary 选项卡导航项组件。需配合 `<mdui-tabs>` 和 `<mdui-tab-panel>` 组件使用
  *
  * ```html
  * <mdui-tabs value="tab-1">
@@ -21,19 +21,19 @@ declare const Tab_base: import("@open-wc/dedupe-mixin").Constructor<import("../r
  * @event focus - 获得焦点时触发
  * @event blur - 失去焦点时触发
  *
- * @slot - 选项卡导航项的文本
+ * @slot - 选项卡导航项的文本内容
  * @slot icon - 选项卡导航项中的图标
  * @slot badge - 徽标
  * @slot custom - 自定义整个选项卡导航项中的内容
  *
- * @csspart container - 导航项容器
- * @csspart icon - 导航项中的图标
- * @csspart label - 导航项的文本
+ * @csspart container - 选项卡导航项容器
+ * @csspart icon - 选项卡导航项中的图标
+ * @csspart label - 选项卡导航项的文本
  */
 export declare class Tab extends Tab_base<TabEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 该选项卡导航项的值
+     * 选项卡导航项的值
      */
     value?: string;
     /**

package/components/tabs/tab.js

@@ -15,7 +15,7 @@ import '../icon.js';
 import { RippleMixin } from '../ripple/ripple-mixin.js';
 import { tabStyle } from './tab-style.js';
 /**
- * @summary 选项卡项组件。需与 `<mdui-tabs>` 和 `<mdui-tab-panel>` 组件配合使用
+ * @summary 选项卡导航项组件。需配合 `<mdui-tabs>` 和 `<mdui-tab-panel>` 组件使用
  *
  * ```html
  * <mdui-tabs value="tab-1">
@@ -32,14 +32,14 @@ import { tabStyle } from './tab-style.js';
  * @event focus - 获得焦点时触发
  * @event blur - 失去焦点时触发
  *
- * @slot - 选项卡导航项的文本
+ * @slot - 选项卡导航项的文本内容
  * @slot icon - 选项卡导航项中的图标
  * @slot badge - 徽标
  * @slot custom - 自定义整个选项卡导航项中的内容
  *
- * @csspart container - 导航项容器
- * @csspart icon - 导航项中的图标
- * @csspart label - 导航项的文本
+ * @csspart container - 选项卡导航项容器
+ * @csspart icon - 选项卡导航项中的图标
+ * @csspart label - 选项卡导航项的文本
  */
 let Tab = class Tab extends RippleMixin(FocusableMixin(MduiElement)) {
     constructor() {
@@ -77,13 +77,33 @@ let Tab = class Tab extends RippleMixin(FocusableMixin(MduiElement)) {
         const hasIcon = this.icon || this.hasSlotController.test('icon');
         const hasCustomSlot = this.hasSlotController.test('custom');
         const renderBadge = () => html `<slot name="badge"></slot>`;
-        return html `<mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><div part="container" class="${classMap({
+        return html `<mdui-ripple
+        ${ref(this.rippleRef)}
+        .noRipple=${this.noRipple}
+      ></mdui-ripple>
+      <div
+        part="container"
+        class=${classMap({
             container: true,
             preset: !hasCustomSlot,
             'variant-secondary': this.variant === 'secondary',
-        })}"><slot name="custom"><div class="icon-container">${when(hasIcon || this.icon, renderBadge)}<slot name="icon" part="icon" class="icon">${this.icon
-            ? html `<mdui-icon name="${this.icon}"></mdui-icon>`
-            : nothingTemplate}</slot></div><div class="label-container">${when(!hasIcon, renderBadge)}<slot part="label" class="label"></slot></div></slot></div>`;
+        })}
+      >
+        <slot name="custom">
+          <div class="icon-container">
+            ${when(hasIcon || this.icon, renderBadge)}
+            <slot name="icon" part="icon" class="icon">
+              ${this.icon
+            ? html `<mdui-icon name=${this.icon}></mdui-icon>`
+            : nothingTemplate}
+            </slot>
+          </div>
+          <div class="label-container">
+            ${when(!hasIcon, renderBadge)}
+            <slot part="label" class="label"></slot>
+          </div>
+        </slot>
+      </div>`;
     }
 };
 Tab.styles = [componentStyle, tabStyle];

package/components/tabs/tabs-style.js

@@ -1,2 +1,139 @@
 import { css } from 'lit';
-export const tabsStyle = css `:host{position:relative;display:flex}:host([placement^=top]){flex-direction:column}:host([placement^=bottom]){flex-direction:column-reverse}:host([placement^=left]){flex-direction:row}:host([placement^=right]){flex-direction:row-reverse}.container{position:relative;display:flex;flex:0 0 auto;overflow-x:auto;background-color:rgb(var(--mdui-color-surface))}:host([placement^=bottom]) .container,:host([placement^=top]) .container{flex-direction:row}:host([placement^=left]) .container,:host([placement^=right]) .container{flex-direction:column}:host([placement$='-start']) .container{justify-content:flex-start}:host([placement=bottom]) .container,:host([placement=left]) .container,:host([placement=right]) .container,:host([placement=top]) .container{justify-content:center}:host([placement$='-end']) .container{justify-content:flex-end}.container::after{content:' ';position:absolute;background-color:rgb(var(--mdui-color-surface-variant))}:host([placement^=bottom]) .container::after,:host([placement^=top]) .container::after{left:0;width:100%;height:.0625rem}:host([placement^=top]) .container::after{bottom:0}:host([placement^=bottom]) .container::after{top:0}:host([placement^=left]) .container::after,:host([placement^=right]) .container::after{top:0;height:100%;width:.0625rem}:host([placement^=left]) .container::after{right:0}:host([placement^=right]) .container::after{left:0}.indicator{position:absolute;z-index:1;background-color:rgb(var(--mdui-color-primary))}.container:not(.initial) .indicator{transition-duration:var(--mdui-motion-duration-medium2);transition-timing-function:var(--mdui-motion-easing-standard-decelerate)}:host([placement^=bottom]) .indicator,:host([placement^=top]) .indicator{transition-property:transform,left,width}:host([placement^=left]) .indicator,:host([placement^=right]) .indicator{transition-property:transform,top,height}:host([placement^=top]) .indicator{bottom:0}:host([placement^=bottom]) .indicator{top:0}:host([placement^=left]) .indicator{right:0}:host([placement^=right]) .indicator{left:0}:host([placement^=bottom][variant=primary]) .indicator,:host([placement^=top][variant=primary]) .indicator{height:.1875rem}:host([placement^=bottom][variant=secondary]) .indicator,:host([placement^=top][variant=secondary]) .indicator{height:.125rem}:host([placement^=left][variant=primary]) .indicator,:host([placement^=right][variant=primary]) .indicator{width:.1875rem}:host([placement^=left][variant=secondary]) .indicator,:host([placement^=right][variant=secondary]) .indicator{width:.125rem}:host([placement^=top][variant=primary]) .indicator{border-top-left-radius:.1875rem;border-top-right-radius:.1875rem}:host([placement^=bottom][variant=primary]) .indicator{border-bottom-right-radius:.1875rem;border-bottom-left-radius:.1875rem}:host([placement^=left][variant=primary]) .indicator{border-top-left-radius:.1875rem;border-bottom-left-radius:.1875rem}:host([placement^=right][variant=primary]) .indicator{border-top-right-radius:.1875rem;border-bottom-right-radius:.1875rem}:host([full-width]) ::slotted(mdui-tab){flex:1}`;
+export const tabsStyle = css `
+  :host {
+    position: relative;
+    display: flex;
+  }
+  :host([placement^='top']) {
+    flex-direction: column;
+  }
+  :host([placement^='bottom']) {
+    flex-direction: column-reverse;
+  }
+  :host([placement^='left']) {
+    flex-direction: row;
+  }
+  :host([placement^='right']) {
+    flex-direction: row-reverse;
+  }
+  .container {
+    position: relative;
+    display: flex;
+    flex: 0 0 auto;
+    overflow-x: auto;
+    background-color: rgb(var(--mdui-color-surface));
+  }
+  :host([placement^='top']) .container,
+  :host([placement^='bottom']) .container {
+    flex-direction: row;
+  }
+  :host([placement^='left']) .container,
+  :host([placement^='right']) .container {
+    flex-direction: column;
+  }
+  :host([placement$='-start']) .container {
+    justify-content: flex-start;
+  }
+  :host([placement='top']) .container,
+  :host([placement='bottom']) .container,
+  :host([placement='left']) .container,
+  :host([placement='right']) .container {
+    justify-content: center;
+  }
+  :host([placement$='-end']) .container {
+    justify-content: flex-end;
+  }
+  .container::after {
+    content: ' ';
+    position: absolute;
+    background-color: rgb(var(--mdui-color-surface-variant));
+  }
+  :host([placement^='top']) .container::after,
+  :host([placement^='bottom']) .container::after {
+    left: 0;
+    width: 100%;
+    height: 0.0625rem;
+  }
+  :host([placement^='top']) .container::after {
+    bottom: 0;
+  }
+  :host([placement^='bottom']) .container::after {
+    top: 0;
+  }
+  :host([placement^='left']) .container::after,
+  :host([placement^='right']) .container::after {
+    top: 0;
+    height: 100%;
+    width: 0.0625rem;
+  }
+  :host([placement^='left']) .container::after {
+    right: 0;
+  }
+  :host([placement^='right']) .container::after {
+    left: 0;
+  }
+  .indicator {
+    position: absolute;
+    z-index: 1;
+    background-color: rgb(var(--mdui-color-primary));
+  }
+  .container:not(.initial) .indicator {
+    transition-duration: var(--mdui-motion-duration-medium2);
+    transition-timing-function: var(--mdui-motion-easing-standard-decelerate);
+  }
+  :host([placement^='top']) .indicator,
+  :host([placement^='bottom']) .indicator {
+    transition-property: transform, left, width;
+  }
+  :host([placement^='left']) .indicator,
+  :host([placement^='right']) .indicator {
+    transition-property: transform, top, height;
+  }
+  :host([placement^='top']) .indicator {
+    bottom: 0;
+  }
+  :host([placement^='bottom']) .indicator {
+    top: 0;
+  }
+  :host([placement^='left']) .indicator {
+    right: 0;
+  }
+  :host([placement^='right']) .indicator {
+    left: 0;
+  }
+  :host([placement^='top'][variant='primary']) .indicator,
+  :host([placement^='bottom'][variant='primary']) .indicator {
+    height: 0.1875rem;
+  }
+  :host([placement^='top'][variant='secondary']) .indicator,
+  :host([placement^='bottom'][variant='secondary']) .indicator {
+    height: 0.125rem;
+  }
+  :host([placement^='left'][variant='primary']) .indicator,
+  :host([placement^='right'][variant='primary']) .indicator {
+    width: 0.1875rem;
+  }
+  :host([placement^='left'][variant='secondary']) .indicator,
+  :host([placement^='right'][variant='secondary']) .indicator {
+    width: 0.125rem;
+  }
+  :host([placement^='top'][variant='primary']) .indicator {
+    border-top-left-radius: 0.1875rem;
+    border-top-right-radius: 0.1875rem;
+  }
+  :host([placement^='bottom'][variant='primary']) .indicator {
+    border-bottom-right-radius: 0.1875rem;
+    border-bottom-left-radius: 0.1875rem;
+  }
+  :host([placement^='left'][variant='primary']) .indicator {
+    border-top-left-radius: 0.1875rem;
+    border-bottom-left-radius: 0.1875rem;
+  }
+  :host([placement^='right'][variant='primary']) .indicator {
+    border-top-right-radius: 0.1875rem;
+    border-bottom-right-radius: 0.1875rem;
+  }
+  :host([full-width]) ::slotted(mdui-tab) {
+    flex: 1;
+  }
+`;

package/components/tabs/tabs.d.ts

@@ -5,7 +5,7 @@ import '@mdui/jq/methods/get.js';
 import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
- * @summary 选项卡组件。需与 `<mdui-tab>` 和 `<mdui-tab-panel>` 组件配合使用
+ * @summary 选项卡组件。需配合 `<mdui-tab>` 和 `<mdui-tab-panel>` 组件使用
  *
  * ```html
  * <mdui-tabs value="tab-1">
@@ -30,33 +30,33 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 export declare class Tabs extends MduiElement<TabsEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 选项卡形状。可选值为：
+     * 选项卡形状。可选值包括：
      *
-     * * `primary`：位于 `<mdui-top-app-bar>` 下方，用于切换应用的主页面时，可使用该形状的选项卡
-     * * `secondary`：位于页面中，用于切换一组相关内容时，可使用该形状的选项卡
+     * * `primary`：适用于位于 `<mdui-top-app-bar>` 下方，用于切换应用的主页面的场景
+     * * `secondary`：适用于位于页面中，用于切换一组相关内容的场景
      */
-    variant: /*位于 `<mdui-top-app-bar>` 下方，用于切换应用的主页面时，可使用该形状的选项卡*/ 'primary' | /*位于页面中，用于切换一组相关内容时，可使用该形状的选项卡*/ 'secondary';
+    variant: /*适用于位于 `<mdui-top-app-bar>` 下方，用于切换应用的主页面的场景*/ 'primary' | /*适用于位于页面中，用于切换一组相关内容的场景*/ 'secondary';
     /**
      * 当前激活的 `<mdui-tab>` 的值
      */
     value?: string;
     /**
-     * 选项卡位置。默认为 `top-start`。可选值为：
+     * 选项卡位置。默认为 `top-start`。可选值包括：
      *
-     * * `top-start`：位于上方，且左对齐
-     * * `top`：位于上方，且居中对齐
-     * * `top-end`：位于上方，且右对齐
-     * * `bottom-start`：位于下方，且左对齐
-     * * `bottom`：位于下方，且居中对齐
-     * * `bottom-end`：位于下方，且右对齐
-     * * `left-start`：位于左侧，且顶部对齐
-     * * `left`：位于左侧，且居中对齐
-     * * `left-end`：位于左侧，且底部对齐
-     * * `right-start`：位于右侧，且顶部对齐
-     * * `right`：位于右侧，且居中对齐
-     * * `right-end`：位于右侧，且底部对齐
+     * * `top-start`：位于上方，左对齐
+     * * `top`：位于上方，居中对齐
+     * * `top-end`：位于上方，右对齐
+     * * `bottom-start`：位于下方，左对齐
+     * * `bottom`：位于下方，居中对齐
+     * * `bottom-end`：位于下方，右对齐
+     * * `left-start`：位于左侧，顶部对齐
+     * * `left`：位于左侧，居中对齐
+     * * `left-end`：位于左侧，底部对齐
+     * * `right-start`：位于右侧，顶部对齐
+     * * `right`：位于右侧，居中对齐
+     * * `right-end`：位于右侧，底部对齐
      */
-    placement: /*位于上方，且左对齐*/ 'top-start' | /*位于上方，且居中对齐*/ 'top' | /*位于上方，且右对齐*/ 'top-end' | /*位于下方，且左对齐*/ 'bottom-start' | /*位于下方，且居中对齐*/ 'bottom' | /*位于下方，且右对齐*/ 'bottom-end' | /*位于左侧，且顶部对齐*/ 'left-start' | /*位于左侧，且居中对齐*/ 'left' | /*位于左侧，且底部对齐*/ 'left-end' | /*位于右侧，且顶部对齐*/ 'right-start' | /*位于右侧，且居中对齐*/ 'right' | /*位于右侧，且底部对齐*/ 'right-end';
+    placement: /*位于上方，左对齐*/ 'top-start' | /*位于上方，居中对齐*/ 'top' | /*位于上方，右对齐*/ 'top-end' | /*位于下方，左对齐*/ 'bottom-start' | /*位于下方，居中对齐*/ 'bottom' | /*位于下方，右对齐*/ 'bottom-end' | /*位于左侧，顶部对齐*/ 'left-start' | /*位于左侧，居中对齐*/ 'left' | /*位于左侧，底部对齐*/ 'left-end' | /*位于右侧，顶部对齐*/ 'right-start' | /*位于右侧，居中对齐*/ 'right' | /*位于右侧，底部对齐*/ 'right-end';
     /**
      * 是否填满父元素宽度
      */

package/components/tabs/tabs.js

@@ -16,7 +16,7 @@ import { observeResize } from '@mdui/shared/helpers/observeResize.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { tabsStyle } from './tabs-style.js';
 /**
- * @summary 选项卡组件。需与 `<mdui-tab>` 和 `<mdui-tab-panel>` 组件配合使用
+ * @summary 选项卡组件。需配合 `<mdui-tab>` 和 `<mdui-tab-panel>` 组件使用
  *
  * ```html
  * <mdui-tabs value="tab-1">
@@ -42,27 +42,27 @@ let Tabs = class Tabs extends MduiElement {
     constructor() {
         super(...arguments);
         /**
-         * 选项卡形状。可选值为：
+         * 选项卡形状。可选值包括：
          *
-         * * `primary`：位于 `<mdui-top-app-bar>` 下方，用于切换应用的主页面时，可使用该形状的选项卡
-         * * `secondary`：位于页面中，用于切换一组相关内容时，可使用该形状的选项卡
+         * * `primary`：适用于位于 `<mdui-top-app-bar>` 下方，用于切换应用的主页面的场景
+         * * `secondary`：适用于位于页面中，用于切换一组相关内容的场景
          */
         this.variant = 'primary';
         /**
-         * 选项卡位置。默认为 `top-start`。可选值为：
+         * 选项卡位置。默认为 `top-start`。可选值包括：
          *
-         * * `top-start`：位于上方，且左对齐
-         * * `top`：位于上方，且居中对齐
-         * * `top-end`：位于上方，且右对齐
-         * * `bottom-start`：位于下方，且左对齐
-         * * `bottom`：位于下方，且居中对齐
-         * * `bottom-end`：位于下方，且右对齐
-         * * `left-start`：位于左侧，且顶部对齐
-         * * `left`：位于左侧，且居中对齐
-         * * `left-end`：位于左侧，且底部对齐
-         * * `right-start`：位于右侧，且顶部对齐
-         * * `right`：位于右侧，且居中对齐
-         * * `right-end`：位于右侧，且底部对齐
+         * * `top-start`：位于上方，左对齐
+         * * `top`：位于上方，居中对齐
+         * * `top-end`：位于上方，右对齐
+         * * `bottom-start`：位于下方，左对齐
+         * * `bottom`：位于下方，居中对齐
+         * * `bottom-end`：位于下方，右对齐
+         * * `left-start`：位于左侧，顶部对齐
+         * * `left`：位于左侧，居中对齐
+         * * `left-end`：位于左侧，底部对齐
+         * * `right-start`：位于右侧，顶部对齐
+         * * `right`：位于右侧，居中对齐
+         * * `right-end`：位于右侧，底部对齐
          */
         this.placement = 'top-start';
         /**
@@ -107,7 +107,15 @@ let Tabs = class Tabs extends MduiElement {
         this.observeResize = observeResize(this.containerRef.value, () => this.updateIndicator());
     }
     render() {
-        return html `<div ${ref(this.containerRef)} part="container" class="container ${classMap({ initial: this.isInitial })}"><slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot><div ${ref(this.indicatorRef)} part="indicator" class="indicator"></div></div><slot name="panel" @slotchange="${this.onSlotChange}"></slot>`;
+        return html `<div
+        ${ref(this.containerRef)}
+        part="container"
+        class="container ${classMap({ initial: this.isInitial })}"
+      >
+        <slot @slotchange=${this.onSlotChange} @click=${this.onClick}></slot>
+        <div ${ref(this.indicatorRef)} part="indicator" class="indicator"></div>
+      </div>
+      <slot name="panel" @slotchange=${this.onSlotChange}></slot>`;
     }
     async onSlotChange() {
         await this.definedController.whenDefined();

package/components/text-field/index.d.ts

@@ -30,9 +30,9 @@ declare const TextField_base: import("@open-wc/dedupe-mixin").Constructor<import
  * @slot suffix - 右侧文本
  * @slot clear-button - 清空按钮
  * @slot clear-icon - 清空按钮中的图标
- * @slot toggle-password-button - 显示密码状态下，密码显示切换按钮中的图标
- * @slot show-password-icon - 显示密码状态下，密码显示切换按钮中的图标
- * @slot hide-password-icon - 隐藏密码状态下，密码显示切换按钮中的图标
+ * @slot toggle-password-button - 密码显示状态切换按钮
+ * @slot show-password-icon - 显示密码状态下，密码显示状态切换按钮中的图标
+ * @slot hide-password-icon - 隐藏密码状态下，密码显示状态切换按钮中的图标
  * @slot helper - 底部的帮助文本
  *
  * @csspart container - 文本框容器
@@ -45,9 +45,9 @@ declare const TextField_base: import("@open-wc/dedupe-mixin").Constructor<import
  * @csspart input - 内部的 `<input>` 或 `<textarea>` 元素
  * @csspart clear-button - 清空按钮
  * @csspart clear-icon - 清空按钮中的图标
- * @csspart toggle-password-button - 密码显示切换按钮
- * @csspart show-password-icon - 显示密码状态下，密码显示切换按钮中的图标
- * @csspart hide-password-icon - 隐藏密码状态下，密码显示切换按钮中的图标
+ * @csspart toggle-password-button - 密码显示状态切换按钮
+ * @csspart show-password-icon - 显示密码状态下，密码显示状态切换按钮中的图标
+ * @csspart hide-password-icon - 隐藏密码状态下，密码显示状态切换按钮中的图标
  * @csspart supporting - 底部辅助信息容器，包括 helper、error、counter
  * @csspart helper - 底部的帮助文本
  * @csspart error - 底部的错误描述文本
@@ -56,14 +56,14 @@ declare const TextField_base: import("@open-wc/dedupe-mixin").Constructor<import
 export declare class TextField extends TextField_base<TextFieldEventMap> implements FormControl {
     static styles: CSSResultGroup;
     /**
-     * 文本框形状。默认为 `filled`。可选值为：
+     * 文本框的形状。默认为 `filled`。可选值包括：
      *
      * * `filled`：带背景色的文本框，视觉效果较强
      * * `outlined`：带边框的文本框，视觉效果较弱
      */
     variant: /*带背景色的文本框，视觉效果较强*/ 'filled' | /*带边框的文本框，视觉效果较弱*/ 'outlined';
     /**
-     * 文本框输入类型。默认为 `text`。可选值为：
+     * 文本框输入类型。默认为 `text`。可选值包括：
      *
      * * `text`：默认值。文本字段
      * * `number`：只能输入数字。拥有动态键盘的设备上会显示数字键盘
@@ -97,7 +97,7 @@ export declare class TextField extends TextField_base<TextFieldEventMap> impleme
      */
     label?: string;
     /**
-     * 提示文本
+     * 占位符文本
      */
     placeholder?: string;
     /**
@@ -105,11 +105,11 @@ export declare class TextField extends TextField_base<TextFieldEventMap> impleme
      */
     helper?: string;
     /**
-     * 是否仅在获得焦点时，显示底部帮助文本
+     * 是否仅在获得焦点时，显示底部的帮助文本
      */
     helperOnFocus: boolean;
     /**
-     * 是否可清空文本框
+     * 是否可清空文本框内容
      */
     clearable: boolean;
     /**
@@ -117,15 +117,15 @@ export declare class TextField extends TextField_base<TextFieldEventMap> impleme
      */
     clearIcon?: string;
     /**
-     * 文本是否右对齐
+     * 是否将文本右对齐
      */
     endAligned: boolean;
     /**
-     * 文本框的前缀文本。仅在聚焦状态，或文本框有值时才会显示。也可以通过 `slot="prefix"` 设置
+     * 文本框的前缀文本。只在文本框聚焦或有值时显示。也可以通过 `slot="prefix"` 设置
      */
     prefix: string;
     /**
-     * 文本框的后缀文本。仅在聚焦状态，或文本框有值时才会显示。也可以通过 `slot="suffix"` 设置
+     * 文本框的后缀文本。只在文本框聚焦或有值时显示。也可以通过 `slot="suffix"` 设置
      */
     suffix?: string;
     /**
@@ -141,17 +141,17 @@ export declare class TextField extends TextField_base<TextFieldEventMap> impleme
      */
     errorIcon?: string;
     /**
-     * 关联的 `form` 元素。此属性值必须为同一页面中的一个 `<form>` 元素的 `id` 属性。
+     * 关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。
      *
-     * 如果此属性未指定，则元素必须是 `form` 元素的后代。利用此属性，你可以将元素放置在页面中的任何位置，而不仅仅是作为 `form` 元素的后代。
+     * 如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。
      */
     form?: string;
     /**
-     * 是否为只读
+     * 是否为只读模式
      */
     readonly: boolean;
     /**
-     * 是否为禁用状态
+     * 是否禁用输入框
      */
     disabled: boolean;
     /**
@@ -159,19 +159,19 @@ export declare class TextField extends TextField_base<TextFieldEventMap> impleme
      */
     required: boolean;
     /**
-     * 文本框固定显示的行数
+     * 文本框的固定显示行数
      */
     rows?: number;
     /**
-     * 是否根据输入的内容自动调整文本框高度
+     * 是否根据输入内容自动调整文本框高度
      */
     autosize: boolean;
     /**
-     * `autosize` 为 `true` 时，可以通过该属性指定最小行数
+     * `autosize` 为 `true` 时，文本框的最小行数
      */
     minRows?: number;
     /**
-     * `autosize` 为 `true` 时，可以通过该属性指定最大行数
+     * `autosize` 为 `true` 时，文本框的最大行数
      */
     maxRows?: number;
     /**
@@ -183,7 +183,7 @@ export declare class TextField extends TextField_base<TextFieldEventMap> impleme
      */
     maxlength?: number;
     /**
-     * 是否显示字数统计。必须指定了 `maxlength` 时，该参数才有效
+     * 是否显示字数统计，只在 `maxlength` 被指定时有效
      */
     counter: boolean;
     /**
@@ -195,7 +195,7 @@ export declare class TextField extends TextField_base<TextFieldEventMap> impleme
      */
     max?: number;
     /**
-     * `type` 为 `number` 时，数值在增减过程固定改变的值
+     * `type` 为 `number` 时，数值增减的步长
      */
     step?: number;
     /**
@@ -203,55 +203,55 @@ export declare class TextField extends TextField_base<TextFieldEventMap> impleme
      */
     pattern?: string;
     /**
-     * `type` 为 `password` 时，设置该属性会添加一个切换按钮，点击时可在密文和明文之间切换
+     * `type` 为 `password` 时，设置此属性会添加一个切换按钮，用于在明文和密文之间切换
      */
     togglePassword: boolean;
     /**
-     * 含密码切换按钮时，明文密码状态下，按钮的 Material Icons 图标。也可以通过 `slot="show-password-icon"` 设置
+     * 密码切换按钮的 Material Icons 图标，当密码为明文时显示。也可以通过 `slot="show-password-icon"` 设置
      */
     showPasswordIcon?: string;
     /**
-     * 含密码切换按钮时，密文密码状态下，按钮的 Material Icons 图标。也可以通过 `slot="hide-password-icon"` 设置
+     * 密码切换按钮的 Material Icons 图标，当密码为密文时显示。也可以通过 `slot="hide-password-icon"` 设置
      */
     hidePasswordIcon?: string;
     /**
-     * iOS 的非标准属性（运行在 iOS 上的 Safari、Firefox、Chrome 都支持），文本是否自动首字母大写。在 iOS5 和之后的版本上有效。可选值为：
+     * iOS 的非标准属性，用于控制文本首字母是否自动大写。在 iOS5 及以后的版本上有效。可选值包括：
      *
      * * `none`：禁用首字母大写
-     * * `sentences`：句子的首字母大写
-     * * `words`：单词或字母的首字母大写
-     * * `characters`：全部字母大写
+     * * `sentences`：句子首字母大写
+     * * `words`：单词首字母大写
+     * * `characters`：所有字母大写
      */
-    autocapitalize: /*禁用首字母大写*/ 'none' | /*句子的首字母大写*/ 'sentences' | /*单词或字母的首字母大写*/ 'words' | /*全部字母大写*/ 'characters';
+    autocapitalize: /*禁用首字母大写*/ 'none' | /*句子首字母大写*/ 'sentences' | /*单词首字母大写*/ 'words' | /*所有字母大写*/ 'characters';
     /**
      * `input` 元素的 `autocorrect` 属性
      */
     autocorrect?: string;
     /**
-     * 是否使用浏览器的记忆功能自动填充文本。可选值为：
+     * 是否使用浏览器的自动填充功能。可选值包括：
      *
-     * * `off`：不使用浏览器的记忆自动填充，使用者必须输入他们想要输入的所有内容。或者网页提供了自己的自动填充方法
+     * * `off`：禁用浏览器的自动填充，使用者必须输入他们想要输入的所有内容。或者网页提供了自己的自动填充方法
      * * `on`：浏览器根据用户之前输入的内容或者习惯，在用户输入的时候给出相应输入提示
      */
-    autocomplete?: /*不使用浏览器的记忆自动填充，使用者必须输入他们想要输入的所有内容。或者网页提供了自己的自动填充方法*/ 'off' | /*浏览器根据用户之前输入的内容或者习惯，在用户输入的时候给出相应输入提示*/ 'on';
+    autocomplete?: /*禁用浏览器的自动填充，使用者必须输入他们想要输入的所有内容。或者网页提供了自己的自动填充方法*/ 'off' | /*浏览器根据用户之前输入的内容或者习惯，在用户输入的时候给出相应输入提示*/ 'on';
     /**
-     * `input` 元素的 `enterkeyhint` 属性。可用于定制虚拟键盘上的 Enter 键的显示文本或图标。具体显示效果取决于用户使用的设备和语言。可选值为：
+     * `input` 元素的 `enterkeyhint` 属性，用于定制虚拟键盘上的 Enter 键的显示文本或图标。具体显示效果取决于用户使用的设备和语言。可选值包括：
      *
-     * * `enter`：插入新行，多出现在多行文本框等需要输入多行的场景中
-     * * `done`：输入完成，虚拟键盘将关闭
-     * * `go`：把用户带到他们输入的文本的目标处
+     * * `enter`：插入新行
+     * * `done`：完成输入，关闭虚拟键盘
+     * * `go`：导航到输入文本的目标
      * * `next`：移动到下一个输入项
      * * `previous`：移动到上一个输入项
-     * * `search`：把用户带到搜索结果
+     * * `search`：导航到搜索结果
      * * `send`：发送文本信息
      */
-    enterkeyhint?: /*插入新行，多出现在多行文本框等需要输入多行的场景中*/ 'enter' | /*输入完成，虚拟键盘将关闭*/ 'done' | /*把用户带到他们输入的文本的目标处*/ 'go' | /*移动到下一个输入项*/ 'next' | /*移动到上一个输入项*/ 'previous' | /*把用户带到搜索结果*/ 'search' | /*发送文本信息*/ 'send';
+    enterkeyhint?: /*插入新行*/ 'enter' | /*完成输入，关闭虚拟键盘*/ 'done' | /*导航到输入文本的目标*/ 'go' | /*移动到下一个输入项*/ 'next' | /*移动到上一个输入项*/ 'previous' | /*导航到搜索结果*/ 'search' | /*发送文本信息*/ 'send';
     /**
-     * 启用拼写检查
+     * 是否启用拼写检查
      */
     spellcheck: boolean;
     /**
-     * `input` 元素的 `inputmode` 属性。用于定制使用哪种虚拟键盘。可选值为：
+     * `input` 元素的 `inputmode` 属性，用于定制虚拟键盘的类型。可选值包括：
      *
      * * `none`：无虚拟键盘。在需要实现自己的键盘输入控件时很有用
      * * `text`：标准文本输入键盘
@@ -296,11 +296,11 @@ export declare class TextField extends TextField_base<TextFieldEventMap> impleme
      */
     private readonlyButClearable;
     /**
-     * 表单验证状态对象
+     * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
      */
     get validity(): ValidityState;
     /**
-     * 表单验证的错误提示信息
+     * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
      */
     get validationMessage(): string;
     /**
@@ -338,7 +338,7 @@ export declare class TextField extends TextField_base<TextFieldEventMap> impleme
      */
     setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void;
     /**
-     * 把文本框中特定范围的文本替换成一个新的文本
+     * 将文本框中特定范围的文本替换为新的文本
      * @param replacement 要插入的字符串
      * @param start 要替换的字符的起止位置的索引。默认为当前用户选中的字符的起始位置的索引
      * @param end 要替换的字符的结束位置的索引。默认为当前用户选中的字符的结束位置的索引
@@ -350,19 +350,19 @@ export declare class TextField extends TextField_base<TextFieldEventMap> impleme
      */
     setRangeText(replacement: string, start: number, end: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
      */
     checkValidity(): boolean;
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
      *
-     * 验证未通过时，还将在组件上显示未通过的提示。
+     * 如果验证未通过，还会在组件上显示验证失败的提示。
      */
     reportValidity(): boolean;
     /**
-     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
      *
-     * @param message 自定义的提示文本
+     * @param message 自定义的错误提示文本
      */
     setCustomValidity(message: string): void;
     protected firstUpdated(_changedProperties: PropertyValues): void;