mdui 2.1.3 → 2.1.5

package/README.md

@@ -1,49 +1,49 @@
-# mdui
-
-[![GitHub version](https://badge.fury.io/gh/zdhxiong%2Fmdui.svg)](https://badge.fury.io/gh/zdhxiong%2Fmdui)
-[![npm version](https://img.shields.io/npm/v/mdui.svg)](https://www.npmjs.com/package/mdui)
-[![CDNJS](https://img.shields.io/cdnjs/v/mdui.svg)](https://cdnjs.com/libraries/mdui)
-
-[官网](https://www.mdui.org) | [文档](https://www.mdui.org/docs/2/)
-
-使用 Web Components 实现，遵循 Material You 设计规范的 Web 前端组件库。
-
-* **Web Components**：mdui 组件全部使用 Web Components 开发，使用组件就像使用 `<div>` 标签一样简单。
-* **Material You**：遵循最新的 Material Design 3（Material You）设计规范，使你的产品美观、易用。
-* **动态配色**：支持根据给定颜色值，或给定一张图片，mdui 能自动计算出颜色值，生成整套配色方案，并在所有 mdui 组件中生效。
-* **暗色模式**：所有组件都支持暗色模式、及支持根据操作系统设置自动切换亮色模式和暗色模式。
-* **轻量级**：gzip 后的 CSS + JavaScript 仅 85KB，使用按需导入可进一步减小体积，使加载更迅速。
-* **IDE 支持**：在 VSCode 和 WebStorm 中能获得完美的代码提示。且提供了 VSCode 扩展和 WebStorm 插件，使开发更便捷。
-* **兼容所有框架**：mdui 能兼容 Vue、React、Angular 等框架，只要在浏览器上运行的应用，都能使用 mdui。
-* **TypeScript 支持**：mdui 完全使用 TypeScript 开发，拥有完美的类型提示。
-* **无依赖**：不需要依赖任何第三方库，节约网络流量，使加载更迅速。
-* **组件丰富**：mdui 包含 30 多个组件，及十余个工具函数，常用组件都有。
-* **Material Icons 图标库**：提供了超过 1 万个图标组件，可按需导入所需图标。
-* **低学习成本**：只需懂一点 HTML、CSS、JavaScript 的基础知识，就能使用 mdui。
-
-## 安装
-
-```bash
-npm install mdui --save
-```
-
-### 导入 CSS 及 JS 文件
-
-```js
-import 'mdui/mdui.css';
-import 'mdui';
-```
-
-### 使用组件
-
-```html
-<mdui-button>Button</mdui-button>
-```
-
-## 赞助
-
-赞助以帮助 mdui 持续更新
-
-![通过支付宝赞助](https://ww1.sinaimg.cn/large/63f511e3gy1ffhw0jj5n4j206o089dge.jpg)
-![通过微信赞助](https://ww1.sinaimg.cn/large/63f511e3gy1ffhw0vkaeaj206o0890ta.jpg)
-[![通过 Paypal 赞助](https://ww1.sinaimg.cn/large/63f511e3gy1fff6937xzbj203w00y3yc.jpg)](https://www.paypal.me/zdhxiong/5)
+# mdui
+
+[![GitHub version](https://badge.fury.io/gh/zdhxiong%2Fmdui.svg)](https://badge.fury.io/gh/zdhxiong%2Fmdui)
+[![npm version](https://img.shields.io/npm/v/mdui.svg)](https://www.npmjs.com/package/mdui)
+[![CDNJS](https://img.shields.io/cdnjs/v/mdui.svg)](https://cdnjs.com/libraries/mdui)
+
+[官网](https://www.mdui.org) | [文档](https://www.mdui.org/docs/2/)
+
+使用 Web Components 实现，遵循 Material You 设计规范的 Web 前端组件库。
+
+- **Web Components**：mdui 组件全部使用 Web Components 开发，使用组件就像使用 `<div>` 标签一样简单。
+- **Material You**：遵循最新的 Material Design 3（Material You）设计规范，使你的产品美观、易用。
+- **动态配色**：支持根据给定颜色值，或给定一张图片，mdui 能自动计算出颜色值，生成整套配色方案，并在所有 mdui 组件中生效。
+- **深色模式**：所有组件都支持深色模式、及支持根据操作系统设置自动切换浅色模式和深色模式。
+- **轻量级**：gzip 后的 CSS + JavaScript 仅 85KB，使用按需导入可进一步减小体积，使加载更迅速。
+- **IDE 支持**：在 VSCode 和 WebStorm 中能获得完美的代码提示。且提供了 VSCode 扩展和 WebStorm 插件，使开发更便捷。
+- **兼容所有框架**：mdui 能兼容 Vue、React、Angular 等框架，只要在浏览器上运行的应用，都能使用 mdui。
+- **TypeScript 支持**：mdui 完全使用 TypeScript 开发，拥有完美的类型提示。
+- **无依赖**：不需要依赖任何第三方库，节约网络流量，使加载更迅速。
+- **组件丰富**：mdui 包含 30 多个组件，及十余个工具函数，常用组件都有。
+- **Material Icons 图标库**：提供了超过 1 万个图标组件，可按需导入所需图标。
+- **低学习成本**：只需懂一点 HTML、CSS、JavaScript 的基础知识，就能使用 mdui。
+
+## 安装
+
+```bash
+npm install mdui --save
+```
+
+### 导入 CSS 及 JS 文件
+
+```js
+import 'mdui/mdui.css';
+import 'mdui';
+```
+
+### 使用组件
+
+```html
+<mdui-button>Button</mdui-button>
+```
+
+## 赞助
+
+赞助以帮助 mdui 持续更新
+
+![通过支付宝赞助](https://ww1.sinaimg.cn/large/63f511e3gy1ffhw0jj5n4j206o089dge.jpg)
+![通过微信赞助](https://ww1.sinaimg.cn/large/63f511e3gy1ffhw0vkaeaj206o0890ta.jpg)
+[![通过 Paypal 赞助](https://ww1.sinaimg.cn/large/63f511e3gy1fff6937xzbj203w00y3yc.jpg)](https://www.paypal.me/zdhxiong/5)

package/components/avatar/index.d.ts

@@ -13,7 +13,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @csspart image - 使用图片作为头像时，组件内部的 `<img>` 元素
  * @csspart icon - 使用图标作为头像时，组件内部的 `<mdui-icon>` 元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  */
 export declare class Avatar extends MduiElement<AvatarEventMap> {
     static styles: CSSResultGroup;
@@ -22,7 +22,7 @@ export declare class Avatar extends MduiElement<AvatarEventMap> {
      */
     src?: string;
     /**
-     * 图片如何适应容器框，与原生的 [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) 属性相同。可选值包括：
+     * 图片如何适应容器框，与原生的 [`object-fit`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit) 属性相同。可选值包括：
      *
      * * `contain`：保持图片原有尺寸比例，内容会被等比例缩放
      * * `cover`：保持图片原有尺寸比例，但部分内容可能被剪切

package/components/avatar/index.js

@@ -21,7 +21,7 @@ import { style } from './style.js';
  * @csspart image - 使用图片作为头像时，组件内部的 `<img>` 元素
  * @csspart icon - 使用图标作为头像时，组件内部的 `<mdui-icon>` 元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  */
 let Avatar = class Avatar extends MduiElement {
     constructor() {

package/components/badge/index.d.ts

@@ -9,7 +9,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @slot - 徽标中显示的文本
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  */
 export declare class Badge extends MduiElement<BadgeEventMap> {
     static styles: CSSResultGroup;

package/components/badge/index.js

@@ -14,7 +14,7 @@ import { style } from './style.js';
  *
  * @slot - 徽标中显示的文本
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  */
 let Badge = class Badge extends MduiElement {
     constructor() {

package/components/bottom-app-bar/index.d.ts

@@ -24,7 +24,7 @@ declare const BottomAppBar_base: import("@lit/reactive-element/decorators/base.j
  *
  * @slot - 底部应用栏内部的元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 export declare class BottomAppBar extends BottomAppBar_base<BottomAppBarEventMap> {
@@ -34,7 +34,7 @@ export declare class BottomAppBar extends BottomAppBar_base<BottomAppBarEventMap
      */
     hide: boolean;
     /**
-     * 是否让底部应用栏中的 [`<mdui-fab>`](/docs/2/components/fab) 组件脱离应用栏。如果为 `true`，则当应用栏隐藏后，[`<mdui-fab>`](/docs/2/components/fab) 仍会停留在页面上
+     * 是否让底部应用栏中的 [`<mdui-fab>`](/zh-cn/docs/2/components/fab) 组件脱离应用栏。如果为 `true`，则当应用栏隐藏后，[`<mdui-fab>`](/zh-cn/docs/2/components/fab) 仍会停留在页面上
      */
     fabDetach: boolean;
     /**

package/components/bottom-app-bar/index.js

@@ -27,7 +27,7 @@ import { style } from './style.js';
  *
  * @slot - 底部应用栏内部的元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 let BottomAppBar = class BottomAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
@@ -38,7 +38,7 @@ let BottomAppBar = class BottomAppBar extends ScrollBehaviorMixin(LayoutItemBase
          */
         this.hide = false;
         /**
-         * 是否让底部应用栏中的 [`<mdui-fab>`](/docs/2/components/fab) 组件脱离应用栏。如果为 `true`，则当应用栏隐藏后，[`<mdui-fab>`](/docs/2/components/fab) 仍会停留在页面上
+         * 是否让底部应用栏中的 [`<mdui-fab>`](/zh-cn/docs/2/components/fab) 组件脱离应用栏。如果为 `true`，则当应用栏隐藏后，[`<mdui-fab>`](/zh-cn/docs/2/components/fab) 仍会停留在页面上
          */
         this.fabDetach = false;
     }

package/components/bottom-app-bar/style.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const style = css `:host{--shape-corner:var(--mdui-shape-corner-none);--z-index:2000;position:fixed;right:0;bottom:0;left:0;display:flex;flex:0 0 auto;align-items:center;justify-content:flex-start;border-radius:var(--shape-corner) var(--shape-corner) 0 0;z-index:var(--z-index);transition:bottom var(--mdui-motion-duration-long2) var(--mdui-motion-easing-emphasized);padding:0 1rem;height:5rem;background-color:rgb(var(--mdui-color-surface-container));box-shadow:var(--mdui-elevation-level2)}:host([scroll-target]:not([scroll-target=''])){position:absolute}:host([hide]:not([hide=false i])){transition-duration:var(--mdui-motion-duration-short4);bottom:-5.625rem}::slotted(:not(:first-child)){margin-left:.5rem}::slotted(mdui-fab){box-shadow:var(--mdui-elevation-level0)}:host([fab-detach]:not([fab-detach=false i])) ::slotted(mdui-fab){position:absolute;transition:bottom var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard);right:1rem;bottom:.75rem}:host([fab-detach][hide][scroll-behavior~=hide]:not([hide=false i],[fab-detach=false i])) ::slotted(mdui-fab){transition-duration:var(--mdui-motion-duration-short4);bottom:1rem;box-shadow:var(--mdui-elevation-level2)}:host([fab-detach][hide][scroll-behavior~=hide][scroll-target]:not([fab-detach=false i],[hide=false i],[scroll-target=''])) ::slotted(mdui-fab){bottom:6.625rem}:host([hide]:not([hide=false i])) ::slotted(:not(mdui-fab)),:host([hide]:not([hide=false i],[fab-detach])) ::slotted(mdui-fab),:host([hide][fab-detach=false i]:not([hide=false i])) ::slotted(mdui-fab){transform:translateY(8.75rem);transition:transform var(--mdui-motion-duration-0) var(--mdui-motion-easing-emphasized-accelerate) var(--mdui-motion-duration-short4)}::slotted(:first-child){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-short1)}::slotted(:nth-child(2)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-short3)}::slotted(:nth-child(3)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-short4)}::slotted(:nth-child(4)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-medium1)}::slotted(:nth-child(5)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-medium2)}::slotted(:nth-child(6)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-medium3)}`;
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-none);--z-index:2000;position:fixed;right:0;bottom:0;left:0;display:flex;flex:0 0 auto;align-items:center;justify-content:flex-start;border-radius:var(--shape-corner) var(--shape-corner) 0 0;z-index:var(--z-index);transition:transform var(--mdui-motion-duration-long2) var(--mdui-motion-easing-emphasized);padding:0 1rem;height:5rem;background-color:rgb(var(--mdui-color-surface-container));box-shadow:var(--mdui-elevation-level2)}:host([scroll-target]:not([scroll-target=''])){position:absolute}:host([hide]:not([hide=false i])){transition-duration:var(--mdui-motion-duration-short4);transform:translateY(5.625rem)}::slotted(:not(:first-child)){margin-left:.5rem}::slotted(mdui-fab){box-shadow:var(--mdui-elevation-level0)}:host([fab-detach]:not([fab-detach=false i])) ::slotted(mdui-fab){transition:transform var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard)}:host([fab-detach][hide][scroll-behavior~=hide]:not([hide=false i],[fab-detach=false i])) ::slotted(mdui-fab){transition-duration:var(--mdui-motion-duration-short4);box-shadow:var(--mdui-elevation-level2);transform:translateY(-5.875rem)}:host([hide]:not([hide=false i])) ::slotted(:not(mdui-fab)),:host([hide]:not([hide=false i],[fab-detach])) ::slotted(mdui-fab),:host([hide][fab-detach=false i]:not([hide=false i])) ::slotted(mdui-fab){transform:translateY(8.75rem);transition:transform var(--mdui-motion-duration-0) var(--mdui-motion-easing-emphasized-accelerate) var(--mdui-motion-duration-short4)}::slotted(:first-child){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-short1)}::slotted(:nth-child(2)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-short3)}::slotted(:nth-child(3)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-short4)}::slotted(:nth-child(4)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-medium1)}::slotted(:nth-child(5)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-medium2)}::slotted(:nth-child(6)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-medium3)}`;

package/components/button/index.d.ts

@@ -23,7 +23,7 @@ import type { TemplateResult, CSSResultGroup } from 'lit';
  * @csspart end-icon - 按钮右侧的图标
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  */
 export declare class Button extends ButtonBase<ButtonEventMap> {
     static styles: CSSResultGroup;

package/components/button/index.js

@@ -28,7 +28,7 @@ import { style } from './style.js';
  * @csspart end-icon - 按钮右侧的图标
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  */
 let Button = class Button extends ButtonBase {
     constructor() {

package/components/button/style.js

@@ -1,4 +1,4 @@
 import { css } from 'lit';
-export const style = css `:host{--shape-corner:var(--mdui-shape-corner-full);position:relative;display:inline-block;flex-shrink:0;overflow:hidden;text-align:center;border-radius:var(--shape-corner);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);min-width:3rem;height:2.5rem;color:rgb(var(--mdui-color-primary));font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height)}.button{width:100%;padding:0 1rem}:host([full-width]:not([full-width=false i])){display:block}:host([variant=elevated]){box-shadow:var(--mdui-elevation-level1);background-color:rgb(var(--mdui-color-surface-container-low));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=filled]){color:rgb(var(--mdui-color-on-primary));background-color:rgb(var(--mdui-color-primary));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-primary)}:host([variant=tonal]){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var(
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-full);position:relative;display:inline-block;flex-shrink:0;overflow:hidden;text-align:center;border-radius:var(--shape-corner);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);min-width:3rem;height:2.5rem;color:rgb(var(--mdui-color-primary));font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking);line-height:var(--mdui-typescale-label-large-line-height)}.button{width:100%;padding:0 1rem}:host([full-width]:not([full-width=false i])){width:100%}:host([variant=elevated]){box-shadow:var(--mdui-elevation-level1);background-color:rgb(var(--mdui-color-surface-container-low));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=filled]){color:rgb(var(--mdui-color-on-primary));background-color:rgb(var(--mdui-color-primary));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-primary)}:host([variant=tonal]){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var(
       --mdui-color-on-secondary-container
     )}:host([variant=outlined]){border:.0625rem solid rgb(var(--mdui-color-outline));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=text]){--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=outlined][focus-visible]){border-color:rgb(var(--mdui-color-primary))}:host([variant=elevated][hover]){box-shadow:var(--mdui-elevation-level2)}:host([variant=filled][hover]),:host([variant=tonal][hover]){box-shadow:var(--mdui-elevation-level1)}:host([disabled]:not([disabled=false i])),:host([loading]:not([loading=false i])){cursor:default;pointer-events:none}:host([disabled]:not([disabled=false i])){color:rgba(var(--mdui-color-on-surface),38%);box-shadow:var(--mdui-elevation-level0)}:host([variant=elevated][disabled]:not([disabled=false i])),:host([variant=filled][disabled]:not([disabled=false i])),:host([variant=tonal][disabled]:not([disabled=false i])){background-color:rgba(var(--mdui-color-on-surface),12%)}:host([variant=outlined][disabled]:not([disabled=false i])){border-color:rgba(var(--mdui-color-on-surface),12%)}.label{display:inline-flex;padding-right:.5rem;padding-left:.5rem}.end-icon,.icon{display:inline-flex;font-size:1.28571429em}.end-icon mdui-icon,.icon mdui-icon,::slotted([slot=end-icon]),::slotted([slot=icon]){font-size:inherit}mdui-circular-progress{display:inline-flex;width:1.125rem;height:1.125rem}:host([variant=filled]) mdui-circular-progress{stroke:rgb(var(--mdui-color-on-primary))}:host([variant=tonal]) mdui-circular-progress{stroke:rgb(var(--mdui-color-on-secondary-container))}:host([disabled]:not([disabled=false i])) mdui-circular-progress{stroke:rgba(var(--mdui-color-on-surface),38%)}`;

package/components/button-icon/index.d.ts

@@ -22,7 +22,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @csspart selected-icon 选中状态的图标
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  */
 export declare class ButtonIcon extends ButtonBase<ButtonIconEventMap> {
     static styles: CSSResultGroup;

package/components/button-icon/index.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
@@ -29,7 +30,7 @@ import { style } from './style.js';
  * @csspart selected-icon 选中状态的图标
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  */
 let ButtonIcon = class ButtonIcon extends ButtonBase {
     constructor() {
@@ -91,7 +92,7 @@ let ButtonIcon = class ButtonIcon extends ButtonBase {
                 ? html `<mdui-icon part="icon" class="icon" name="${this.icon}"></mdui-icon>`
                 : nothingTemplate;
         const selectedIcon = () => this.hasSlotController.test('selected-icon') || this.selectedIcon
-            ? html `<slot name="selected-icon" part="selected-icon" class="selected-icon"><mdui-icon name="${this.selectedIcon}"></mdui-icon></slot>`
+            ? html `<slot name="selected-icon" part="selected-icon" class="selected-icon"><mdui-icon name="${ifDefined(this.selectedIcon)}"></mdui-icon></slot>`
             : icon();
         return this.selected ? selectedIcon() : icon();
     }

package/components/button-icon/style.js

@@ -1,4 +1,4 @@
 import { css } from 'lit';
 export const style = css `:host{--shape-corner:var(--mdui-shape-corner-full);position:relative;display:inline-block;flex-shrink:0;overflow:hidden;text-align:center;border-radius:var(--shape-corner);cursor:pointer;-webkit-tap-highlight-color:transparent;font-size:1.5rem;width:2.5rem;height:2.5rem}:host([variant=standard]){color:rgb(var(--mdui-color-on-surface-variant));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}:host([variant=filled]){color:rgb(var(--mdui-color-primary));background-color:rgb(var(--mdui-color-surface-container-highest));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=tonal]){color:rgb(var(--mdui-color-on-surface-variant));background-color:rgb(var(--mdui-color-surface-container-highest));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}:host([variant=outlined]){border:.0625rem solid rgb(var(--mdui-color-outline));color:rgb(var(--mdui-color-on-surface-variant));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}:host([variant=outlined][pressed]){color:rgb(var(--mdui-color-on-surface));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([variant=standard][selected]:not([selected=false i])){color:rgb(var(--mdui-color-primary));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=filled]:not([selectable])),:host([variant=filled][selectable=false i]),:host([variant=filled][selected]:not([selected=false i])){color:rgb(var(--mdui-color-on-primary));background-color:rgb(var(--mdui-color-primary));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-primary)}:host([variant=tonal]:not([selectable])),:host([variant=tonal][selectable=false i]),:host([variant=tonal][selected]:not([selected=false i])){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var(
       --mdui-color-on-secondary-container
-    )}:host([variant=outlined][selected]:not([selected=false i])){border:none;color:rgb(var(--mdui-color-inverse-on-surface));background-color:rgb(var(--mdui-color-inverse-surface));--mdui-comp-ripple-state-layer-color:var(--mdui-color-inverse-on-surface)}:host([variant=filled][disabled]:not([disabled=false i])),:host([variant=outlined][disabled]:not([disabled=false i])),:host([variant=tonal][disabled]:not([disabled=false i])){background-color:rgba(var(--mdui-color-on-surface),.12);border-color:rgba(var(--mdui-color-on-surface),.12)}:host([disabled]:not([disabled=false i])),:host([loading]:not([loading=false i])){cursor:default;pointer-events:none}:host([disabled]:not([disabled=false i])){color:rgba(var(--mdui-color-on-surface),.38)!important}:host([loading]:not([loading=false i])) .button,:host([loading]:not([loading=false i])) mdui-ripple{opacity:0}.button{float:left;width:100%}.icon,.selected-icon mdui-icon,::slotted(*){font-size:inherit}mdui-circular-progress{display:flex;position:absolute;top:calc(50% - 1.5rem / 2);left:calc(50% - 1.5rem / 2);width:1.5rem;height:1.5rem}:host([variant=filled]:not([disabled])) mdui-circular-progress,:host([variant=filled][disabled=false i]) mdui-circular-progress{stroke:rgb(var(--mdui-color-on-primary))}:host([disabled]:not([disabled=false i])) mdui-circular-progress{stroke:rgba(var(--mdui-color-on-surface),38%)}`;
+    )}:host([variant=outlined][selected]:not([selected=false i])){border:none;color:rgb(var(--mdui-color-inverse-on-surface));background-color:rgb(var(--mdui-color-inverse-surface));--mdui-comp-ripple-state-layer-color:var(--mdui-color-inverse-on-surface)}:host([variant=filled][disabled]:not([disabled=false i])),:host([variant=outlined][disabled]:not([disabled=false i])),:host([variant=tonal][disabled]:not([disabled=false i])){background-color:rgba(var(--mdui-color-on-surface),.12);border-color:rgba(var(--mdui-color-on-surface),.12)}:host([disabled]:not([disabled=false i])),:host([loading]:not([loading=false i])){cursor:default;pointer-events:none}:host([disabled]:not([disabled=false i])){color:rgba(var(--mdui-color-on-surface),.38)!important}.button{float:left;width:100%}:host([loading]:not([loading=false i])) .button,:host([loading]:not([loading=false i])) mdui-ripple{opacity:0}.icon,.selected-icon mdui-icon,::slotted(*){font-size:inherit}mdui-circular-progress{display:flex;position:absolute;top:calc(50% - 1.5rem / 2);left:calc(50% - 1.5rem / 2);width:1.5rem;height:1.5rem}:host([variant=filled]:not([disabled])) mdui-circular-progress,:host([variant=filled][disabled=false i]) mdui-circular-progress{stroke:rgb(var(--mdui-color-on-primary))}:host([disabled]:not([disabled=false i])) mdui-circular-progress{stroke:rgba(var(--mdui-color-on-surface),38%)}`;

package/components/card/index.d.ts

@@ -14,7 +14,7 @@ declare const Card_base: import("@lit/reactive-element/decorators/base.js").Cons
  *
  * @slot - 卡片的内容
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  */
 export declare class Card extends Card_base<CardEventMap> {
     static styles: CSSResultGroup;

package/components/card/index.js

@@ -21,7 +21,7 @@ import { style } from './style.js';
  *
  * @slot - 卡片的内容
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  */
 let Card = class Card extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
     constructor() {

package/components/checkbox/index.d.ts

@@ -1,7 +1,7 @@
+import '@mdui/icons-shared/check-box-outline-blank.js';
+import '@mdui/icons-shared/check-box.js';
+import '@mdui/icons-shared/indeterminate-check-box.js';
 import { MduiElement } from '@mdui/shared/base/mdui-element.js';
-import '@mdui/shared/icons/check-box-outline-blank.js';
-import '@mdui/shared/icons/check-box.js';
-import '@mdui/shared/icons/indeterminate-check-box.js';
 import '../icon.js';
 import type { Ripple } from '../ripple/index.js';
 import type { FormControl } from '@mdui/jq/shared/form.js';
@@ -64,7 +64,7 @@ export declare class Checkbox extends Checkbox_base<CheckboxEventMap> implements
      */
     name: string;
     /**
-     * 复选框的值，将于表单数据一起提交
+     * 复选框的值，将与表单数据一起提交
      */
     value: string;
     /**

package/components/checkbox/index.js

@@ -5,14 +5,14 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { createRef, ref } from 'lit/directives/ref.js';
+import '@mdui/icons-shared/check-box-outline-blank.js';
+import '@mdui/icons-shared/check-box.js';
+import '@mdui/icons-shared/indeterminate-check-box.js';
 import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { FormController, formResets } from '@mdui/shared/controllers/form.js';
 import { defaultValue } from '@mdui/shared/decorators/default-value.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
-import '@mdui/shared/icons/check-box-outline-blank.js';
-import '@mdui/shared/icons/check-box.js';
-import '@mdui/shared/icons/indeterminate-check-box.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { FocusableMixin } from '@mdui/shared/mixins/focusable.js';
 import '../icon.js';
@@ -70,7 +70,7 @@ let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(MduiElement)) {
          */
         this.name = '';
         /**
-         * 复选框的值，将于表单数据一起提交
+         * 复选框的值，将与表单数据一起提交
          */
         this.value = 'on';
         /**

package/components/chip/index.d.ts

@@ -1,11 +1,11 @@
-import '@mdui/shared/icons/check.js';
-import '@mdui/shared/icons/clear.js';
+import '@mdui/icons-shared/check.js';
+import '@mdui/icons-shared/clear.js';
 import { ButtonBase } from '../button/button-base.js';
 import '../icon.js';
 import type { Ripple } from '../ripple/index.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
- * @summary 纸片组件
+ * @summary 标签组件
  *
  * ```html
  * <mdui-chip>Chip</mdui-chip>
@@ -17,26 +17,26 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @event change - 选中状态变更时触发
  * @event delete - 点击删除图标时触发
  *
- * @slot - 纸片文本
+ * @slot - 标签文本
  * @slot icon - 左侧元素
  * @slot end-icon - 右侧元素
  * @slot selected-icon - 选中状态下的左侧元素
  * @slot delete-icon - 可删除时的右侧删除元素
  *
  * @csspart button - 内部的 `<button>` 或 `<a>` 元素
- * @csspart label - 纸片文本
+ * @csspart label - 标签文本
  * @csspart icon - 左侧图标
  * @csspart end-icon - 右侧图标
  * @csspart selected-icon - 选中状态下的左侧图标
  * @csspart delete-icon - 可删除时的右侧删除图标
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  */
 export declare class Chip extends ButtonBase<ChipEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 纸片的形状。可选值包括：
+     * 标签的形状。可选值包括：
      *
      * * `assist`：用于显示与当前上下文相关的辅助操作，如在点餐页面提供分享、收藏等功能
      * * `filter`：用于对内容进行筛选，如在搜索结果页过滤搜索结果
@@ -57,7 +57,7 @@ export declare class Chip extends ButtonBase<ChipEventMap> {
      */
     selected: boolean;
     /**
-     * 是否可删除。为 `true` 时，纸片右侧会显示删除图标
+     * 是否可删除。为 `true` 时，标签右侧会显示删除图标
      */
     deletable: boolean;
     /**

package/components/chip/index.js

@@ -2,18 +2,18 @@ import { __decorate } from "tslib";
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
+import '@mdui/icons-shared/check.js';
+import '@mdui/icons-shared/clear.js';
 import cc from 'classcat';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
-import '@mdui/shared/icons/check.js';
-import '@mdui/shared/icons/clear.js';
 import { ButtonBase } from '../button/button-base.js';
 import '../icon.js';
 import { style } from './style.js';
 /**
- * @summary 纸片组件
+ * @summary 标签组件
  *
  * ```html
  * <mdui-chip>Chip</mdui-chip>
@@ -25,27 +25,27 @@ import { style } from './style.js';
  * @event change - 选中状态变更时触发
  * @event delete - 点击删除图标时触发
  *
- * @slot - 纸片文本
+ * @slot - 标签文本
  * @slot icon - 左侧元素
  * @slot end-icon - 右侧元素
  * @slot selected-icon - 选中状态下的左侧元素
  * @slot delete-icon - 可删除时的右侧删除元素
  *
  * @csspart button - 内部的 `<button>` 或 `<a>` 元素
- * @csspart label - 纸片文本
+ * @csspart label - 标签文本
  * @csspart icon - 左侧图标
  * @csspart end-icon - 右侧图标
  * @csspart selected-icon - 选中状态下的左侧图标
  * @csspart delete-icon - 可删除时的右侧删除图标
  * @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  */
 let Chip = class Chip extends ButtonBase {
     constructor() {
         super();
         /**
-         * 纸片的形状。可选值包括：
+         * 标签的形状。可选值包括：
          *
          * * `assist`：用于显示与当前上下文相关的辅助操作，如在点餐页面提供分享、收藏等功能
          * * `filter`：用于对内容进行筛选，如在搜索结果页过滤搜索结果
@@ -66,7 +66,7 @@ let Chip = class Chip extends ButtonBase {
          */
         this.selected = false;
         /**
-         * 是否可删除。为 `true` 时，纸片右侧会显示删除图标
+         * 是否可删除。为 `true` 时，标签右侧会显示删除图标
          */
         this.deletable = false;
         this.rippleRef = createRef();

package/components/circular-progress/index.d.ts

@@ -1,7 +1,7 @@
 import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary 圆形进度指示器组件
+ * @summary 环形进度条组件
  *
  * ```html
  * <mdui-circular-progress></mdui-circular-progress>
@@ -10,11 +10,11 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 export declare class CircularProgress extends MduiElement<CircularProgressEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 进度指示器的最大值。默认为 `1`
+     * 进度条的最大值。默认为 `1`
      */
     max: number;
     /**
-     * 进度指示器的当前值。如果未指定该值，则显示为不确定状态
+     * 进度条的当前值。如果未指定该值，则显示为不确定状态
      */
     value?: number;
     protected render(): TemplateResult;

package/components/circular-progress/index.js

@@ -7,7 +7,7 @@ import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { style } from './style.js';
 /**
- * @summary 圆形进度指示器组件
+ * @summary 环形进度条组件
  *
  * ```html
  * <mdui-circular-progress></mdui-circular-progress>
@@ -17,7 +17,7 @@ let CircularProgress = class CircularProgress extends MduiElement {
     constructor() {
         super(...arguments);
         /**
-         * 进度指示器的最大值。默认为 `1`
+         * 进度条的最大值。默认为 `1`
          */
         this.max = 1;
     }

package/components/collapse/collapse-item.d.ts

@@ -38,7 +38,7 @@ export declare class CollapseItem extends MduiElement<CollapseItemEventMap> {
      */
     disabled: boolean;
     /**
-     * 点击该元素时触发折叠，值可以是 CSS 选择器、DOM 元素、或 [JQ 对象](/docs/2/functions/jq)。默认为点击整个 header 区域触发
+     * 点击该元素时触发折叠，值可以是 CSS 选择器、DOM 元素、或 [JQ 对象](/zh-cn/docs/2/functions/jq)。默认为点击整个 header 区域触发
      */
     trigger?: string | HTMLElement | JQ<HTMLElement>;
     /**

package/components/collapse/collapse-item.js

@@ -85,6 +85,7 @@ let CollapseItem = class CollapseItem extends MduiElement {
         // 如果是从 opened 状态开始关闭，则先设置高度值，并等重绘完成
         if (this.state === 'close') {
             $(this.bodyRef.value).height(scrollHeight);
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             this.bodyRef.value.clientLeft;
         }
         $(this.bodyRef.value).height(this.state === 'opened'

package/components/dialog/index.d.ts

@@ -30,7 +30,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @csspart description - 副文本部分，位于 body 中
  * @csspart action - 底部操作按钮
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 export declare class Dialog extends MduiElement<DialogEventMap> {

package/components/dialog/index.js

@@ -47,7 +47,7 @@ import { style } from './style.js';
  * @csspart description - 副文本部分，位于 body 中
  * @csspart action - 底部操作按钮
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 let Dialog = class Dialog extends MduiElement {

package/components/divider/index.d.ts

@@ -1,7 +1,7 @@
 import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary 分割线组件
+ * @summary 分隔线组件
  *
  * ```html
  * <mdui-divider></mdui-divider>
@@ -10,7 +10,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
 export declare class Divider extends MduiElement<DividerEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 是否为垂直分割线
+     * 是否为垂直分隔线
      */
     vertical: boolean;
     /**

package/components/divider/index.js

@@ -6,7 +6,7 @@ import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { style } from './style.js';
 /**
- * @summary 分割线组件
+ * @summary 分隔线组件
  *
  * ```html
  * <mdui-divider></mdui-divider>
@@ -16,7 +16,7 @@ let Divider = class Divider extends MduiElement {
     constructor() {
         super(...arguments);
         /**
-         * 是否为垂直分割线
+         * 是否为垂直分隔线
          */
         this.vertical = false;
         /**

package/components/dropdown/index.d.ts

@@ -22,7 +22,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * @event closed - 下拉组件关闭动画完成时，事件被触发
  *
  * @slot - 下拉组件的内容
- * @slot trigger - 触发下拉组件的元素，例如 [`<mdui-button>`](/docs/2/components/button) 元素
+ * @slot trigger - 触发下拉组件的元素，例如 [`<mdui-button>`](/zh-cn/docs/2/components/button) 元素
  *
  * @csspart trigger - 触发下拉组件的元素的容器，即 `trigger` slot 的容器
  * @csspart panel - 下拉组件内容的容器
@@ -68,7 +68,7 @@ export declare class Dropdown extends MduiElement<DropdownEventMap> {
      */
     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) 后，下拉组件是否保持打开状态
+     * 点击 [`<mdui-menu-item>`](/zh-cn/docs/2/components/menu#menu-item-api) 后，下拉组件是否保持打开状态
      */
     stayOpenOnClick: boolean;
     /**