mdui 2.0.3 → 2.0.5

package/components/collapse/collapse-item.js

@@ -12,7 +12,7 @@ import { uniqueId } from '@mdui/shared/helpers/uniqueId.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { collapseItemStyle } from './collapse-item-style.js';
 /**
- * @summary 折叠面板项组件。需与 `<mdui-collapse>` 组件配合使用
+ * @summary 折叠面板项组件，需配合 `<mdui-collapse>` 组件使用
  *
  * ```html
  * <mdui-collapse>
@@ -36,7 +36,7 @@ let CollapseItem = class CollapseItem extends MduiElement {
     constructor() {
         super(...arguments);
         /**
-         * 是否禁用该折叠面板项
+         * 是否禁用此折叠面板项
          */
         this.disabled = false;
         /**
@@ -68,10 +68,18 @@ let CollapseItem = class CollapseItem extends MduiElement {
         this.updateBodyHeight();
     }
     render() {
-        return html `<slot name="header" part="header" class="header">${this.header}</slot><slot part="body" class="body ${classMap({
+        return html `<slot name="header" part="header" class="header">
+        ${this.header}
+      </slot>
+      <slot
+        part="body"
+        class="body ${classMap({
             opened: this.state === 'opened',
             active: this.active,
-        })}" ${ref(this.bodyRef)} @transitionend="${this.onTransitionEnd}"></slot>`;
+        })}"
+        ${ref(this.bodyRef)}
+        @transitionend=${this.onTransitionEnd}
+      ></slot>`;
     }
     onTransitionEnd(event) {
         if (event.target === this.bodyRef.value) {

package/components/collapse/collapse-style.js

@@ -1,2 +1,6 @@
 import { css } from 'lit';
-export const collapseStyle = css `:host{display:block}`;
+export const collapseStyle = css `
+  :host {
+    display: block;
+  }
+`;

package/components/collapse/collapse.d.ts

@@ -2,7 +2,7 @@ import '@mdui/jq/methods/is.js';
 import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary 折叠面板组件。需与 `<mdui-collapse-item>` 组件配合使用
+ * @summary 折叠面板组件，需配合 `<mdui-collapse-item>` 组件使用
  *
  * ```html
  * <mdui-collapse>
@@ -11,27 +11,24 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * </mdui-collapse>
  * ```
  *
- * @event change - 当前打开的折叠面板项改变时触发
+ * @event change - 当前展开的折叠面板项变化时触发
  *
  * @slot - `<mdui-collapse-item>` 组件
  */
 export declare class Collapse extends MduiElement<CollapseEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 是否为手风琴模式
+     * 是否启用手风琴模式
      */
     accordion: boolean;
     /**
-     * 当前打开的 `<mdui-collapse-item>` 的值
+     * 当前展开的 `<mdui-collapse-item>` 的值
      *
-     * Note:
-     * 该属性的 HTML 属性始终为字符串，且仅在 `accordion` 为 `true` 时可以设置初始值；
-     * 该属性的 JavaScript 属性值在 `accordion` 为 `true` 时为字符串、在 `accordion` 为 `false` 时为字符串数组。
-     * 所以，在 `accordion` 为 `false` 时，如果要修改该值，只能通过修改 JavaScript 属性值实现。
+     * **Note**：该属性的 HTML 属性始终为字符串，只有在 `accordion` 为 `true` 时，才能设置初始值；该属性的 JavaScript 属性值在 `accordion` 为 `true` 时为字符串，在 `accordion` 为 `false` 时为字符串数组。因此，当 `accordion` 为 `false` 时，只能通过修改 JavaScript 属性值来改变此值。
      */
     value?: string | string[];
     /**
-     * 是否禁用该折叠面板
+     * 是否禁用此折叠面板
      */
     disabled: boolean;
     private activeKeys;

package/components/collapse/collapse.js

@@ -12,7 +12,7 @@ import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { collapseStyle } from './collapse-style.js';
 /**
- * @summary 折叠面板组件。需与 `<mdui-collapse-item>` 组件配合使用
+ * @summary 折叠面板组件，需配合 `<mdui-collapse-item>` 组件使用
  *
  * ```html
  * <mdui-collapse>
@@ -21,7 +21,7 @@ import { collapseStyle } from './collapse-style.js';
  * </mdui-collapse>
  * ```
  *
- * @event change - 当前打开的折叠面板项改变时触发
+ * @event change - 当前展开的折叠面板项变化时触发
  *
  * @slot - `<mdui-collapse-item>` 组件
  */
@@ -29,11 +29,11 @@ let Collapse = class Collapse extends MduiElement {
     constructor() {
         super(...arguments);
         /**
-         * 是否为手风琴模式
+         * 是否启用手风琴模式
          */
         this.accordion = false;
         /**
-         * 是否禁用该折叠面板
+         * 是否禁用此折叠面板
          */
         this.disabled = false;
         // 因为 collapse-item 的 value 可能会重复，所以在每个 collapse-item 元素上都添加了一个唯一的 key，通过 activeKey 来记录激活状态的 key
@@ -85,7 +85,10 @@ let Collapse = class Collapse extends MduiElement {
         this.updateItems();
     }
     render() {
-        return html `<slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot>`;
+        return html `<slot
+      @slotchange=${this.onSlotChange}
+      @click=${this.onClick}
+    ></slot>`;
     }
     setActiveKeys(activeKeys) {
         if (!arraysEqualIgnoreOrder(this.activeKeys, activeKeys)) {

package/components/dialog/index.d.ts

@@ -8,10 +8,10 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * <mdui-dialog>content</mdui-dialog>
  * ```
  *
- * @event open - 在对话框打开之前触发。可以通过调用 `event.preventDefault()` 阻止对话框打开
- * @event opened - 在对话框打开之后触发
- * @event close - 在对话框关闭之前触发。可以通过调用 `event.preventDefault()` 阻止对话框关闭
- * @event closed - 在对话框关闭之后触发
+ * @event open - 对话框开始打开时触发。可以通过调用 `event.preventDefault()` 阻止对话框打开
+ * @event opened - 对话框打开动画完成后触发
+ * @event close - 对话框开始关闭时触发。可以通过调用 `event.preventDefault()` 阻止对话框关闭
+ * @event closed - 对话框关闭动画完成后触发
  * @event overlay-click - 点击遮罩层时触发
  *
  * @slot header - 顶部元素，默认包含 `icon` slot 和 `headline` slot
@@ -23,15 +23,15 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  *
  * @csspart overlay - 遮罩层
  * @csspart panel - 对话框容器
- * @csspart header - 对话框 header 部分，其中包含了 icon 和 headline
- * @csspart icon - 顶部的图标，位于 header 中
- * @csspart headline - 顶部的标题，位于 header 中
- * @csspart body - 对话框的 body 部分
+ * @csspart header - 对话框 header 部分，包含 icon 和 headline
+ * @csspart icon - 顶部图标，位于 header 中
+ * @csspart headline - 顶部标题，位于 header 中
+ * @csspart body - 对话框 body 部分
  * @csspart description - 副文本部分，位于 body 中
  * @csspart action - 底部操作按钮
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 export declare class Dialog extends MduiElement<DialogEventMap> {
     static styles: CSSResultGroup;
@@ -52,15 +52,15 @@ export declare class Dialog extends MduiElement<DialogEventMap> {
      */
     open: boolean;
     /**
-     * 是否为全屏对话框
+     * 是否全屏显示对话框
      */
     fullscreen: boolean;
     /**
-     * 是否在按下 ESC 键时，关闭对话框
+     * 是否允许按下 ESC 键关闭对话框
      */
     closeOnEsc: boolean;
     /**
-     * 是否在点击遮罩时，关闭对话框
+     * 是否允许点击遮罩层关闭对话框
      */
     closeOnOverlayClick: boolean;
     /**

package/components/dialog/index.js

@@ -24,10 +24,10 @@ import { style } from './style.js';
  * <mdui-dialog>content</mdui-dialog>
  * ```
  *
- * @event open - 在对话框打开之前触发。可以通过调用 `event.preventDefault()` 阻止对话框打开
- * @event opened - 在对话框打开之后触发
- * @event close - 在对话框关闭之前触发。可以通过调用 `event.preventDefault()` 阻止对话框关闭
- * @event closed - 在对话框关闭之后触发
+ * @event open - 对话框开始打开时触发。可以通过调用 `event.preventDefault()` 阻止对话框打开
+ * @event opened - 对话框打开动画完成后触发
+ * @event close - 对话框开始关闭时触发。可以通过调用 `event.preventDefault()` 阻止对话框关闭
+ * @event closed - 对话框关闭动画完成后触发
  * @event overlay-click - 点击遮罩层时触发
  *
  * @slot header - 顶部元素，默认包含 `icon` slot 和 `headline` slot
@@ -39,15 +39,15 @@ import { style } from './style.js';
  *
  * @csspart overlay - 遮罩层
  * @csspart panel - 对话框容器
- * @csspart header - 对话框 header 部分，其中包含了 icon 和 headline
- * @csspart icon - 顶部的图标，位于 header 中
- * @csspart headline - 顶部的标题，位于 header 中
- * @csspart body - 对话框的 body 部分
+ * @csspart header - 对话框 header 部分，包含 icon 和 headline
+ * @csspart icon - 顶部图标，位于 header 中
+ * @csspart headline - 顶部标题，位于 header 中
+ * @csspart body - 对话框 body 部分
  * @csspart description - 副文本部分，位于 body 中
  * @csspart action - 底部操作按钮
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 let Dialog = class Dialog extends MduiElement {
     constructor() {
@@ -57,15 +57,15 @@ let Dialog = class Dialog extends MduiElement {
          */
         this.open = false;
         /**
-         * 是否为全屏对话框
+         * 是否全屏显示对话框
          */
         this.fullscreen = false;
         /**
-         * 是否在按下 ESC 键时，关闭对话框
+         * 是否允许按下 ESC 键关闭对话框
          */
         this.closeOnEsc = false;
         /**
-         * 是否在点击遮罩时，关闭对话框
+         * 是否允许点击遮罩层关闭对话框
          */
         this.closeOnOverlayClick = false;
         /**
@@ -218,11 +218,33 @@ let Dialog = class Dialog extends MduiElement {
         const hasDescription = !!this.description || this.hasSlotController.test('description');
         const hasHeader = hasIcon || hasHeadline || this.hasSlotController.test('header');
         const hasBody = hasDescription || hasDefaultSlot;
-        return html `<div ${ref(this.overlayRef)} part="overlay" class="overlay" @click="${this.onOverlayClick}" tabindex="-1"></div><div ${ref(this.panelRef)} part="panel" class="panel ${classMap({
+        return html `<div
+        ${ref(this.overlayRef)}
+        part="overlay"
+        class="overlay"
+        @click=${this.onOverlayClick}
+        tabindex="-1"
+      ></div>
+      <div
+        ${ref(this.panelRef)}
+        part="panel"
+        class="panel ${classMap({
             'has-icon': hasIcon,
             'has-description': hasDescription,
             'has-default': hasDefaultSlot,
-        })}" tabindex="0">${when(hasHeader, () => html `<slot name="header" part="header" class="header">${when(hasIcon, () => this.renderIcon())} ${when(hasHeadline, () => this.renderHeadline())}</slot>`)} ${when(hasBody, () => html `<div ${ref(this.bodyRef)} part="body" class="body">${when(hasDescription, () => this.renderDescription())}<slot></slot></div>`)} ${when(hasActionSlot, () => html `<slot name="action" part="action" class="action"></slot>`)}</div>`;
+        })}"
+        tabindex="0"
+      >
+        ${when(hasHeader, () => html `<slot name="header" part="header" class="header">
+              ${when(hasIcon, () => this.renderIcon())}
+              ${when(hasHeadline, () => this.renderHeadline())}
+            </slot>`)}
+        ${when(hasBody, () => html `<div ${ref(this.bodyRef)} part="body" class="body">
+              ${when(hasDescription, () => this.renderDescription())}
+              <slot></slot>
+            </div>`)}
+        ${when(hasActionSlot, () => html `<slot name="action" part="action" class="action"></slot>`)}
+      </div>`;
     }
     onOverlayClick() {
         this.emit('overlay-click');
@@ -232,15 +254,21 @@ let Dialog = class Dialog extends MduiElement {
         this.open = false;
     }
     renderIcon() {
-        return html `<slot name="icon" part="icon" class="icon">${this.icon
-            ? html `<mdui-icon name="${this.icon}"></mdui-icon>`
-            : nothingTemplate}</slot>`;
+        return html `<slot name="icon" part="icon" class="icon">
+      ${this.icon
+            ? html `<mdui-icon name=${this.icon}></mdui-icon>`
+            : nothingTemplate}
+    </slot>`;
     }
     renderHeadline() {
-        return html `<slot name="headline" part="headline" class="headline">${this.headline}</slot>`;
+        return html `<slot name="headline" part="headline" class="headline">
+      ${this.headline}
+    </slot>`;
     }
     renderDescription() {
-        return html `<slot name="description" part="description" class="description">${this.description}</slot>`;
+        return html `<slot name="description" part="description" class="description">
+      ${this.description}
+    </slot>`;
     }
 };
 Dialog.styles = [componentStyle, style];

package/components/dialog/style.js

@@ -1,2 +1,117 @@
 import { css } from 'lit';
-export const style = css `:host{--shape-corner:var(--mdui-shape-corner-extra-large);--z-index:2300;position:fixed;z-index:var(--z-index);display:none;align-items:center;justify-content:center;inset:0;padding:3rem}::slotted(mdui-top-app-bar[slot=header]){position:absolute;border-top-left-radius:var(--mdui-shape-corner-extra-large);border-top-right-radius:var(--mdui-shape-corner-extra-large);background-color:rgb(var(--mdui-color-surface-container-high))}:host([fullscreen]){--shape-corner:var(--mdui-shape-corner-none);padding:0}:host([fullscreen]) ::slotted(mdui-top-app-bar[slot=header]){border-top-left-radius:var(--mdui-shape-corner-none);border-top-right-radius:var(--mdui-shape-corner-none)}.overlay{position:fixed;inset:0;background-color:rgba(var(--mdui-color-scrim),.4)}.panel{position:relative;display:flex;flex-direction:column;max-height:100%;border-radius:var(--shape-corner);outline:0;transform-origin:top;min-width:17.5rem;max-width:35rem;padding:1.5rem;background-color:rgb(var(--mdui-color-surface-container-high));box-shadow:var(--mdui-elevation-level3)}:host([fullscreen]) .panel{width:100%;max-width:100%;height:100%;max-height:100%;box-shadow:var(--mdui-elevation-level0)}.header{display:flex;flex-direction:column}.has-icon .header{align-items:center}.icon{display:flex;color:rgb(var(--mdui-color-secondary));font-size:1.5rem}.icon mdui-icon,::slotted([slot=icon]){font-size:inherit}.headline{display:flex;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-headline-small-size);font-weight:var(--mdui-typescale-headline-small-weight);letter-spacing:var(--mdui-typescale-headline-small-tracking);line-height:var(--mdui-typescale-headline-small-line-height)}.icon+.headline{padding-top:1rem}.body{overflow:auto}.header+.body{margin-top:1rem}.description{display:flex;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-body-medium-size);font-weight:var(--mdui-typescale-body-medium-weight);letter-spacing:var(--mdui-typescale-body-medium-tracking);line-height:var(--mdui-typescale-body-medium-line-height)}:host([fullscreen]) .description{color:rgb(var(--mdui-color-on-surface))}.has-description.has-default .description{margin-bottom:1rem}.action{display:flex;justify-content:flex-end;padding-top:1.5rem}.action::slotted(:not(:first-child)){margin-left:.5rem}:host([stacked-actions]) .action{flex-direction:column;align-items:end}:host([stacked-actions]) .action::slotted(:not(:first-child)){margin-left:0;margin-top:.5rem}`;
+export const style = css `
+  :host {
+    --shape-corner: var(--mdui-shape-corner-extra-large);
+    --z-index: 2300;
+    position: fixed;
+    z-index: var(--z-index);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    inset: 0;
+    padding: 3rem;
+  }
+  ::slotted(mdui-top-app-bar[slot='header']) {
+    position: absolute;
+    border-top-left-radius: var(--mdui-shape-corner-extra-large);
+    border-top-right-radius: var(--mdui-shape-corner-extra-large);
+    background-color: rgb(var(--mdui-color-surface-container-high));
+  }
+  :host([fullscreen]) {
+    --shape-corner: var(--mdui-shape-corner-none);
+    padding: 0;
+  }
+  :host([fullscreen]) ::slotted(mdui-top-app-bar[slot='header']) {
+    border-top-left-radius: var(--mdui-shape-corner-none);
+    border-top-right-radius: var(--mdui-shape-corner-none);
+  }
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(var(--mdui-color-scrim), 0.4);
+  }
+  .panel {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    border-radius: var(--shape-corner);
+    outline: none;
+    transform-origin: top;
+    min-width: 17.5rem;
+    max-width: 35rem;
+    padding: 1.5rem;
+    background-color: rgb(var(--mdui-color-surface-container-high));
+    box-shadow: var(--mdui-elevation-level3);
+  }
+  :host([fullscreen]) .panel {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    box-shadow: var(--mdui-elevation-level0);
+  }
+  .header {
+    display: flex;
+    flex-direction: column;
+  }
+  .has-icon .header {
+    align-items: center;
+  }
+  .icon {
+    display: flex;
+    color: rgb(var(--mdui-color-secondary));
+    font-size: 1.5rem;
+  }
+  .icon mdui-icon,
+  ::slotted([slot='icon']) {
+    font-size: inherit;
+  }
+  .headline {
+    display: flex;
+    color: rgb(var(--mdui-color-on-surface));
+    font-size: var(--mdui-typescale-headline-small-size);
+    font-weight: var(--mdui-typescale-headline-small-weight);
+    letter-spacing: var(--mdui-typescale-headline-small-tracking);
+    line-height: var(--mdui-typescale-headline-small-line-height);
+  }
+  .icon + .headline {
+    padding-top: 1rem;
+  }
+  .body {
+    overflow: auto;
+  }
+  .header + .body {
+    margin-top: 1rem;
+  }
+  .description {
+    display: flex;
+    color: rgb(var(--mdui-color-on-surface-variant));
+    font-size: var(--mdui-typescale-body-medium-size);
+    font-weight: var(--mdui-typescale-body-medium-weight);
+    letter-spacing: var(--mdui-typescale-body-medium-tracking);
+    line-height: var(--mdui-typescale-body-medium-line-height);
+  }
+  :host([fullscreen]) .description {
+    color: rgb(var(--mdui-color-on-surface));
+  }
+  .has-description.has-default .description {
+    margin-bottom: 1rem;
+  }
+  .action {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: 1.5rem;
+  }
+  .action::slotted(:not(:first-child)) {
+    margin-left: 0.5rem;
+  }
+  :host([stacked-actions]) .action {
+    flex-direction: column;
+    align-items: end;
+  }
+  :host([stacked-actions]) .action::slotted(:not(:first-child)) {
+    margin-left: 0rem;
+    margin-top: 0.5rem;
+  }
+`;

package/components/divider/index.d.ts

@@ -10,15 +10,15 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 export declare class Divider extends MduiElement<DividerEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 是否显示垂直分割线
+     * 是否为垂直分割线
      */
     vertical: boolean;
     /**
-     * 是否左侧缩进
+     * 是否进行左侧缩进
      */
     inset: boolean;
     /**
-     * 是否左右两侧缩进
+     * 是否进行左右两侧缩进
      */
     middle: boolean;
     protected render(): TemplateResult;

package/components/divider/index.js

@@ -16,15 +16,15 @@ let Divider = class Divider extends MduiElement {
     constructor() {
         super(...arguments);
         /**
-         * 是否显示垂直分割线
+         * 是否为垂直分割线
          */
         this.vertical = false;
         /**
-         * 是否左侧缩进
+         * 是否进行左侧缩进
          */
         this.inset = false;
         /**
-         * 是否左右两侧缩进
+         * 是否进行左右两侧缩进
          */
         this.middle = false;
     }

package/components/divider/style.js

@@ -1,2 +1,19 @@
 import { css } from 'lit';
-export const style = css `:host{display:block;height:.0625rem;background-color:rgb(var(--mdui-color-surface-variant))}:host([inset]){margin-left:1rem}:host([middle]){margin-left:1rem;margin-right:1rem}:host([vertical]){height:100%;width:.0625rem}`;
+export const style = css `
+  :host {
+    display: block;
+    height: 0.0625rem;
+    background-color: rgb(var(--mdui-color-surface-variant));
+  }
+  :host([inset]) {
+    margin-left: 1rem;
+  }
+  :host([middle]) {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+  :host([vertical]) {
+    height: 100%;
+    width: 0.0625rem;
+  }
+`;

package/components/dropdown/index.d.ts

@@ -16,71 +16,71 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * </mdui-dropdown>
  * ```
  *
- * @event open - dropdown 开始打开时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 dropdown 打开
- * @event opened - dropdown 打开动画完成时，事件被触发
- * @event close - dropdown 开始关闭时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 dropdown 关闭
- * @event closed - dropdown 关闭动画完成时，事件被触发
+ * @event open - 下拉组件开始打开时，事件被触发。可以通过调用 `event.preventDefault()` 阻止下拉组件打开
+ * @event opened - 下拉组件打开动画完成时，事件被触发
+ * @event close - 下拉组件开始关闭时，事件被触发。可以通过调用 `event.preventDefault()` 阻止下拉组件关闭
+ * @event closed - 下拉组件关闭动画完成时，事件被触发
  *
- * @slot - dropdown 的内容
- * @slot trigger - 触发 dropdown 的元素，例如 [`<mdui-button>`](/docs/2/components/button) 元素
+ * @slot - 下拉组件的内容
+ * @slot trigger - 触发下拉组件的元素，例如 [`<mdui-button>`](/docs/2/components/button) 元素
  *
- * @csspart trigger - 触发 dropdown 的元素的容器，即 `trigger` slot 的容器
- * @csspart panel - dropdown 内容的容器
+ * @csspart trigger - 触发下拉组件的元素的容器，即 `trigger` slot 的容器
+ * @csspart panel - 下拉组件内容的容器
  *
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 export declare class Dropdown extends MduiElement<DropdownEventMap> {
     static styles: CSSResultGroup;
     /**
-     * dropdown 是否打开
+     * 是否打开下拉组件
      */
     open: boolean;
     /**
-     * 是否禁用 dropdown
+     * 是否禁用下拉组件
      */
     disabled: boolean;
     /**
-     * dropdown 的触发方式，支持传入多个值，用空格分隔。可选值为：
+     * 下拉组件的触发方式，支持多个值，用空格分隔。可选值包括：
      *
-     * * `click`：点击时触发
+     * * `click`：点击触发
      * * `hover`：鼠标悬浮触发
-     * * `focus`：聚焦时触发
-     * * `contextmenu`：鼠标右键点击、或触摸长按时触发
-     * * `manual`：使用了该值时，只能使用编程方式打开和关闭 dropdown，且不能再指定其他触发方式
+     * * `focus`：聚焦触发
+     * * `contextmenu`：鼠标右键点击、或触摸长按触发
+     * * `manual`：仅能通过编程方式打开和关闭下拉组件，不能再指定其他触发方式
      */
-    trigger: /*点击时触发*/ 'click' | /*鼠标悬浮触发*/ 'hover' | /*聚焦时触发*/ 'focus' | /*鼠标右键点击、或触摸长按时触发*/ 'contextmenu' | /*使用了该值时，只能使用编程方式打开和关闭 dropdown，且不能再指定其他触发方式*/ 'manual' | string;
+    trigger: /*点击触发*/ 'click' | /*鼠标悬浮触发*/ 'hover' | /*聚焦触发*/ 'focus' | /*鼠标右键点击、或触摸长按触发*/ 'contextmenu' | /*仅能通过编程方式打开和关闭下拉组件，不能再指定其他触发方式*/ 'manual' | string;
     /**
-     * dropdown 内容的位置。可选值为：
+     * 下拉组件内容的位置。可选值包括：
      *
      * * `auto`：自动判断位置
-     * * `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: /*自动判断位置*/ 'auto' | /*位于上方，且左对齐*/ 'top-start' | /*位于上方，且居中对齐*/ 'top' | /*位于上方，且右对齐*/ 'top-end' | /*位于下方，且左对齐*/ 'bottom-start' | /*位于下方，且居中对齐*/ 'bottom' | /*位于下方，且右对齐*/ 'bottom-end' | /*位于左侧，且顶部对齐*/ 'left-start' | /*位于左侧，且居中对齐*/ 'left' | /*位于左侧，且底部对齐*/ 'left-end' | /*位于右侧，且顶部对齐*/ 'right-start' | /*位于右侧，且居中对齐*/ 'right' | /*位于右侧，且底部对齐*/ 'right-end';
+    placement: /*自动判断位置*/ 'auto' | /*上方左对齐*/ 'top-start' | /*上方居中*/ 'top' | /*上方右对齐*/ 'top-end' | /*下方左对齐*/ 'bottom-start' | /*下方居中*/ 'bottom' | /*下方右对齐*/ 'bottom-end' | /*左侧顶部对齐*/ 'left-start' | /*左侧居中*/ 'left' | /*左侧底部对齐*/ 'left-end' | /*右侧顶部对齐*/ 'right-start' | /*右侧居中*/ 'right' | /*右侧底部对齐*/ 'right-end';
     /**
-     * 在点击 [`<mdui-menu-item>`](/docs/2/components/menu#menu-item-api) 元素后，是否仍保持 dropdown 为打开状态
+     * 点击 [`<mdui-menu-item>`](/docs/2/components/menu#menu-item-api) 后，下拉组件是否保持打开状态
      */
     stayOpenOnClick: boolean;
     /**
-     * 通过 hover 触发 dropdown 打开时的延时，单位为毫秒
+     * 鼠标悬浮触发下拉组件打开的延时，单位为毫秒
      */
     openDelay: number;
     /**
-     * 通过 hover 触发 dropdown 关闭时的延时，单位为毫秒
+     * 鼠标悬浮触发下拉组件关闭的延时，单位为毫秒
      */
     closeDelay: number;
     /**
-     * 是否在触发 dropdown 时的光标所在的位置打开 dropdown。通常用于在打开鼠标右键菜单时使用
+     * 是否在触发下拉组件的光标位置打开下拉组件，常用于打开鼠标右键菜单
      */
     openOnPointer: boolean;
     private readonly triggerElements;