mdui 2.0.3 → 2.0.5

package/components/chip/index.js

@@ -25,36 +25,36 @@ import { style } from './style.js';
  * @event change - 选中状态变更时触发
  * @event delete - 点击删除图标时触发
  *
- * @slot - 文本
+ * @slot - 纸片文本
  * @slot icon - 左侧元素
  * @slot end-icon - 右侧元素
- * @slot selected-icon - 选中状态的左侧元素
- * @slot delete-icon - 可删除时，右侧的删除元素
+ * @slot selected-icon - 选中状态下的左侧元素
+ * @slot delete-icon - 可删除时的右侧删除元素
  *
- * @csspart button - 内部的 `button` 或 `a` 元素
- * @csspart label - 文本
+ * @csspart button - 内部的 `<button>` 或 `<a>` 元素
+ * @csspart label - 纸片文本
  * @csspart icon - 左侧图标
  * @csspart end-icon - 右侧图标
- * @csspart selected-icon - 选中状态的左侧图标
- * @csspart delete-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 - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 let Chip = class Chip extends ButtonBase {
     constructor() {
         super();
         /**
-         * 纸片形状。可选值为：
+         * 纸片的形状。可选值包括：
          *
-         * * `assist`：用于显示和当前上下文相关的辅助操作。例如在点餐页面，提供分享，收藏等功能
-         * * `filter`：用于对内容进行筛选。例如在搜索结果页，对搜索结果进行过滤
-         * * `input`：用于表示用户输入的信息片段。例如 Gmail 中“收件人”字段中的联系人
-         * * `suggestion`：用于提供动态生成的推荐信息，以简化用户操作。例如在聊天应用中猜测用户可能想发送的信息，供用户选择
+         * * `assist`：用于显示与当前上下文相关的辅助操作，如在点餐页面提供分享、收藏等功能
+         * * `filter`：用于对内容进行筛选，如在搜索结果页过滤搜索结果
+         * * `input`：用于表示用户输入的信息片段，如在 Gmail 的“收件人”字段中的联系人
+         * * `suggestion`：用于提供动态生成的推荐信息，以简化用户操作，如在聊天应用中预测用户可能想发送的信息
          */
         this.variant = 'assist';
         /**
-         * 是否包含阴影
+         * 是否显示阴影
          */
         this.elevated = false;
         /**
@@ -62,11 +62,11 @@ let Chip = class Chip extends ButtonBase {
          */
         this.selectable = false;
         /**
-         * 是否为选中状态
+         * 是否已选中
          */
         this.selected = false;
         /**
-         * 是否可删除。为 `true` 时，在右侧会显示删除图标图标
+         * 是否可删除。为 `true` 时，纸片右侧会显示删除图标
          */
         this.deletable = false;
         this.rippleRef = createRef();
@@ -99,14 +99,20 @@ let Chip = class Chip extends ButtonBase {
                 (this.selected && hasSelectedIcon),
             'has-end-icon': hasEndIcon,
         });
-        return html `<mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.isButton()
+        return html `<mdui-ripple
+        ${ref(this.rippleRef)}
+        .noRipple=${this.noRipple}
+      ></mdui-ripple>
+      ${this.isButton()
             ? this.renderButton({
                 className,
                 part: 'button',
                 content: this.renderInner(),
             })
             : this.disabled || this.loading
-                ? html `<span part="button" class="${className} _a">${this.renderInner()}</span>`
+                ? html `<span part="button" class="${className} _a">
+            ${this.renderInner()}
+          </span>`
                 : this.renderAnchor({
                     className,
                     part: 'button',
@@ -149,12 +155,15 @@ let Chip = class Chip extends ButtonBase {
         }
         const icon = () => {
             return this.icon
-                ? html `<mdui-icon name="${this.icon}" class="i"></mdui-icon>`
+                ? html `<mdui-icon name=${this.icon} class="i"></mdui-icon>`
                 : nothingTemplate;
         };
         const selectedIcon = () => {
             if (this.selectedIcon) {
-                return html `<mdui-icon name="${this.selectedIcon}" class="i"></mdui-icon>`;
+                return html `<mdui-icon
+          name="${this.selectedIcon}"
+          class="i"
+        ></mdui-icon>`;
             }
             if (this.variant === 'assist' || this.variant === 'filter') {
                 return html `<mdui-icon-check class="i"></mdui-icon-check>`;
@@ -163,23 +172,38 @@ let Chip = class Chip extends ButtonBase {
         };
         return !this.selected
             ? html `<slot name="icon" part="icon" class="icon">${icon()}</slot>`
-            : html `<slot name="selected-icon" part="selected-icon" class="selected-icon">${selectedIcon()}</slot>`;
+            : html `<slot
+          name="selected-icon"
+          part="selected-icon"
+          class="selected-icon"
+        >
+          ${selectedIcon()}
+        </slot>`;
     }
     renderLabel() {
         return html `<slot part="label" class="label"></slot>`;
     }
     renderEndIcon() {
-        return html `<slot name="end-icon" part="end-icon" class="end-icon">${this.endIcon
+        return html `<slot name="end-icon" part="end-icon" class="end-icon">
+      ${this.endIcon
             ? html `<mdui-icon name="${this.endIcon}" class="i"></mdui-icon>`
-            : nothingTemplate}</slot>`;
+            : nothingTemplate}
+    </slot>`;
     }
     renderDeleteIcon() {
         if (!this.deletable) {
             return nothingTemplate;
         }
-        return html `<slot name="delete-icon" part="delete-icon" class="delete-icon" @click="${this.onDelete}">${this.deleteIcon
+        return html `<slot
+      name="delete-icon"
+      part="delete-icon"
+      class="delete-icon"
+      @click=${this.onDelete}
+    >
+      ${this.deleteIcon
             ? html `<mdui-icon name="${this.deleteIcon}" class="i"></mdui-icon>`
-            : html `<mdui-icon-clear class="i"></mdui-icon-clear>`}</slot>`;
+            : html `<mdui-icon-clear class="i"></mdui-icon-clear>`}
+    </slot>`;
     }
     renderInner() {
         return [

package/components/chip/style.js

@@ -1,4 +1,207 @@
 import { css } from 'lit';
-export const style = css `:host{--shape-corner:var(--mdui-shape-corner-small);position:relative;display:inline-block;overflow:hidden;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);height:2rem;background-color:rgb(var(--mdui-color-surface));border:.0625rem solid rgb(var(--mdui-color-outline));color:rgb(var(--mdui-color-on-surface-variant));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);--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}.button{padding-right:.4375rem;padding-left:.4375rem}:host([variant=input]) .button{padding-right:.1875rem;padding-left:.1875rem}:host([selected]) .button{padding-right:.5rem;padding-left:.5rem}:host([selected][variant=input]) .button{padding-right:.25rem;padding-left:.25rem}:host([elevated]) .button{padding-right:.5rem;padding-left:.5rem}:host([variant=assist]){color:rgb(var(--mdui-color-on-surface));--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([elevated]){border-width:0;background-color:rgb(var(--mdui-color-surface-container-low));box-shadow:var(--mdui-elevation-level1)}:host([selected]){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));border-width:0;--mdui-comp-ripple-state-layer-color:var(
+export const style = css `
+  /**
+ * mdui-chip 组件。默认为 variant="assist"
+ */
+  :host {
+    --shape-corner: var(--mdui-shape-corner-small);
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    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);
+    height: 2rem;
+    background-color: rgb(var(--mdui-color-surface));
+    border: 0.0625rem solid rgb(var(--mdui-color-outline));
+    color: rgb(var(--mdui-color-on-surface-variant));
+    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);
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface-variant);
+  }
+  .button {
+    padding-right: 0.4375rem;
+    padding-left: 0.4375rem;
+  }
+  :host([variant='input']) .button {
+    padding-right: 0.1875rem;
+    padding-left: 0.1875rem;
+  }
+  :host([selected]) .button {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  :host([selected][variant='input']) .button {
+    padding-right: 0.25rem;
+    padding-left: 0.25rem;
+  }
+  :host([elevated]) .button {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  :host([variant='assist']) {
+    color: rgb(var(--mdui-color-on-surface));
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface);
+  }
+  :host([elevated]) {
+    border-width: 0;
+    background-color: rgb(var(--mdui-color-surface-container-low));
+    box-shadow: var(--mdui-elevation-level1);
+  }
+  :host([selected]) {
+    color: rgb(var(--mdui-color-on-secondary-container));
+    background-color: rgb(var(--mdui-color-secondary-container));
+    border-width: 0rem;
+    --mdui-comp-ripple-state-layer-color: var(
       --mdui-color-on-secondary-container
-    )}:host([disabled]),:host([loading]){cursor:default;pointer-events:none}:host([disabled]){border-color:rgba(var(--mdui-color-on-surface),12%);color:rgba(var(--mdui-color-on-surface),38%);box-shadow:var(--mdui-elevation-level0)}:host([disabled][elevated]),:host([disabled][selected]){background-color:rgba(var(--mdui-color-on-surface),12%)}:host([selected][hover]){box-shadow:var(--mdui-elevation-level1)}:host([elevated][hover]){color:rgb(var(--mdui-color-on-secondary-container));box-shadow:var(--mdui-elevation-level2)}:host([variant=filter][hover]),:host([variant=input][hover]),:host([variant=suggestion][hover]){color:rgb(var(--mdui-color-on-surface-variant))}:host([variant=filter][focus-visible]),:host([variant=input][focus-visible]),:host([variant=suggestion][focus-visible]){border-color:rgb(var(--mdui-color-on-surface-variant))}:host([dragged]),:host([dragged][hover]){box-shadow:var(--mdui-elevation-level4)}.button{overflow:visible}.label{display:inline-flex;padding-right:.5rem;padding-left:.5rem}.end-icon,.icon,.selected-icon{display:inline-flex;font-size:1.28571429em;color:rgb(var(--mdui-color-on-surface-variant))}:host([variant=assist]) .end-icon,:host([variant=assist]) .icon,:host([variant=assist]) .selected-icon{color:rgb(var(--mdui-color-primary))}:host([selected]) .end-icon,:host([selected]) .icon,:host([selected]) .selected-icon{color:rgb(var(--mdui-color-on-secondary-container))}:host([disabled]) .end-icon,:host([disabled]) .icon,:host([disabled]) .selected-icon{opacity:.38;color:rgb(var(--mdui-color-on-surface))}.end-icon .i,.icon .i,.selected-icon .i,::slotted([slot=end-icon]),::slotted([slot=icon]),::slotted([slot=selected-icon]){font-size:inherit}:host([variant=input]) .has-icon .icon,:host([variant=input]) .has-icon .selected-icon,:host([variant=input]) .has-icon mdui-circular-progress{margin-left:.25rem}:host([variant=input]) .has-end-icon .end-icon{margin-right:.25rem}mdui-circular-progress{display:inline-flex;width:1.125rem;height:1.125rem}:host([disabled]) mdui-circular-progress{stroke:rgba(var(--mdui-color-on-surface),38%)}::slotted(mdui-avatar[slot=end-icon]),::slotted(mdui-avatar[slot=icon]),::slotted(mdui-avatar[slot=selected-icon]){width:1.5rem;height:1.5rem}:host([disabled]) ::slotted(mdui-avatar[slot=end-icon]),:host([disabled]) ::slotted(mdui-avatar[slot=icon]),:host([disabled]) ::slotted(mdui-avatar[slot=selected-icon]){opacity:.38}::slotted(mdui-avatar[slot=icon]),::slotted(mdui-avatar[slot=selected-icon]){margin-left:-.25rem;margin-right:-.125rem}::slotted(mdui-avatar[slot=end-icon]){margin-right:-.25rem;margin-left:-.125rem}.delete-icon{display:inline-flex;font-size:1.28571429em;transition:background-color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);border-radius:var(--mdui-shape-corner-full);margin-right:-.25rem;margin-left:-.25rem;padding:.25rem;color:rgb(var(--mdui-color-on-surface-variant))}.delete-icon:hover{background-color:rgba(var(--mdui-color-on-surface-variant),12%)}.has-end-icon .delete-icon{margin-left:.25rem}:host([variant=assiat]) .delete-icon{color:rgb(var(--mdui-color-primary))}:host([variant=input]) .delete-icon{margin-right:.0625rem}:host([disabled]) .delete-icon{color:rgba(var(--mdui-color-on-surface),38%)}.delete-icon .i,::slotted([slot=delete-icon]){font-size:inherit}::slotted(mdui-avatar[slot=delete-icon]){width:1.125rem;height:1.125rem}`;
+    );
+  }
+  :host([disabled]),
+  :host([loading]) {
+    cursor: default;
+    pointer-events: none;
+  }
+  :host([disabled]) {
+    border-color: rgba(var(--mdui-color-on-surface), 12%);
+    color: rgba(var(--mdui-color-on-surface), 38%);
+    box-shadow: var(--mdui-elevation-level0);
+  }
+  :host([disabled][elevated]),
+  :host([disabled][selected]) {
+    background-color: rgba(var(--mdui-color-on-surface), 12%);
+  }
+  :host([selected][hover]) {
+    box-shadow: var(--mdui-elevation-level1);
+  }
+  :host([elevated][hover]) {
+    color: rgb(var(--mdui-color-on-secondary-container));
+    box-shadow: var(--mdui-elevation-level2);
+  }
+  :host([variant='filter'][hover]),
+  :host([variant='input'][hover]),
+  :host([variant='suggestion'][hover]) {
+    color: rgb(var(--mdui-color-on-surface-variant));
+  }
+  :host([variant='filter'][focus-visible]),
+  :host([variant='input'][focus-visible]),
+  :host([variant='suggestion'][focus-visible]) {
+    border-color: rgb(var(--mdui-color-on-surface-variant));
+  }
+  :host([dragged]),
+  :host([dragged][hover]) {
+    box-shadow: var(--mdui-elevation-level4);
+  }
+  .button {
+    overflow: visible;
+  }
+  .label {
+    display: inline-flex;
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .icon,
+  .selected-icon,
+  .end-icon {
+    display: inline-flex;
+    font-size: 1.28571429em;
+    color: rgb(var(--mdui-color-on-surface-variant));
+  }
+  :host([variant='assist']) .icon,
+  :host([variant='assist']) .selected-icon,
+  :host([variant='assist']) .end-icon {
+    color: rgb(var(--mdui-color-primary));
+  }
+  :host([selected]) .icon,
+  :host([selected]) .selected-icon,
+  :host([selected]) .end-icon {
+    color: rgb(var(--mdui-color-on-secondary-container));
+  }
+  :host([disabled]) .icon,
+  :host([disabled]) .selected-icon,
+  :host([disabled]) .end-icon {
+    opacity: 0.38;
+    color: rgb(var(--mdui-color-on-surface));
+  }
+  .icon .i,
+  .selected-icon .i,
+  .end-icon .i,
+  ::slotted([slot='icon']),
+  ::slotted([slot='selected-icon']),
+  ::slotted([slot='end-icon']) {
+    font-size: inherit;
+  }
+  :host([variant='input']) .has-icon .icon,
+  :host([variant='input']) .has-icon .selected-icon,
+  :host([variant='input']) .has-icon mdui-circular-progress {
+    margin-left: 0.25rem;
+  }
+  :host([variant='input']) .has-end-icon .end-icon {
+    margin-right: 0.25rem;
+  }
+  mdui-circular-progress {
+    display: inline-flex;
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+  :host([disabled]) mdui-circular-progress {
+    stroke: rgba(var(--mdui-color-on-surface), 38%);
+  }
+  ::slotted(mdui-avatar[slot='icon']),
+  ::slotted(mdui-avatar[slot='end-icon']),
+  ::slotted(mdui-avatar[slot='selected-icon']) {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  :host([disabled]) ::slotted(mdui-avatar[slot='icon']),
+  :host([disabled]) ::slotted(mdui-avatar[slot='end-icon']),
+  :host([disabled]) ::slotted(mdui-avatar[slot='selected-icon']) {
+    opacity: 0.38;
+  }
+  ::slotted(mdui-avatar[slot='icon']),
+  ::slotted(mdui-avatar[slot='selected-icon']) {
+    margin-left: -0.25rem;
+    margin-right: -0.125rem;
+  }
+  ::slotted(mdui-avatar[slot='end-icon']) {
+    margin-right: -0.25rem;
+    margin-left: -0.125rem;
+  }
+  .delete-icon {
+    display: inline-flex;
+    font-size: 1.28571429em;
+    transition: background-color var(--mdui-motion-duration-short4)
+      var(--mdui-motion-easing-linear);
+    border-radius: var(--mdui-shape-corner-full);
+    margin-right: -0.25rem;
+    margin-left: -0.25rem;
+    padding: 0.25rem;
+    color: rgb(var(--mdui-color-on-surface-variant));
+  }
+  .delete-icon:hover {
+    background-color: rgba(var(--mdui-color-on-surface-variant), 12%);
+  }
+  .has-end-icon .delete-icon {
+    margin-left: 0.25rem;
+  }
+  :host([variant='assiat']) .delete-icon {
+    color: rgb(var(--mdui-color-primary));
+  }
+  :host([variant='input']) .delete-icon {
+    margin-right: 0.0625rem;
+  }
+  :host([disabled]) .delete-icon {
+    color: rgba(var(--mdui-color-on-surface), 38%);
+  }
+  .delete-icon .i,
+  ::slotted([slot='delete-icon']) {
+    font-size: inherit;
+  }
+  ::slotted(mdui-avatar[slot='delete-icon']) {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+`;

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

@@ -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

@@ -17,16 +17,20 @@ let CircularProgress = class CircularProgress extends MduiElement {
     constructor() {
         super(...arguments);
         /**
-         * 进度指示器的最大值，默认为 1
+         * 进度指示器的最大值。默认为 `1`
          */
         this.max = 1;
     }
     render() {
         const isDeterminate = !isUndefined(this.value);
-        return html `<div class="progress ${classMap({
+        return html `<div
+      class="progress ${classMap({
             determinate: isDeterminate,
             indeterminate: !isDeterminate,
-        })}">${isDeterminate ? this.renderDeterminate() : this.renderInDeterminate()}</div>`;
+        })}"
+    >
+      ${isDeterminate ? this.renderDeterminate() : this.renderInDeterminate()}
+    </div>`;
     }
     renderDeterminate() {
         const value = this.value;
@@ -36,7 +40,24 @@ let CircularProgress = class CircularProgress extends MduiElement {
         const center = circleRadius + strokeWidth / 2;
         const circumference = 2 * π * circleRadius;
         const determinateStrokeDashOffset = (1 - value / Math.max(this.max ?? value, value)) * circumference;
-        return html `<svg viewBox="0 0 ${center * 2} ${center * 2}"><circle class="track" cx="${center}" cy="${center}" r="${circleRadius}" stroke-width="${strokeWidth}"></circle><circle class="circle" cx="${center}" cy="${center}" r="${circleRadius}" stroke-dasharray="${2 * π * circleRadius}" stroke-dashoffset="${determinateStrokeDashOffset}" stroke-width="${strokeWidth}"></circle></svg>`;
+        return html `<svg viewBox="0 0 ${center * 2} ${center * 2}">
+      <circle
+        class="track"
+        cx="${center}"
+        cy="${center}"
+        r="${circleRadius}"
+        stroke-width="${strokeWidth}"
+      ></circle>
+      <circle
+        class="circle"
+        cx="${center}"
+        cy="${center}"
+        r="${circleRadius}"
+        stroke-dasharray="${2 * π * circleRadius}"
+        stroke-dashoffset="${determinateStrokeDashOffset}"
+        stroke-width="${strokeWidth}"
+      ></circle>
+    </svg>`;
     }
     renderInDeterminate() {
         const strokeWidth = 4; // 圆环宽度
@@ -45,8 +66,21 @@ let CircularProgress = class CircularProgress extends MduiElement {
         const center = circleRadius + strokeWidth / 2;
         const circumference = 2 * π * circleRadius;
         const halfCircumference = 0.5 * circumference;
-        const circle = (thisStrokeWidth) => html `<svg class="circle" viewBox="0 0 ${center * 2} ${center * 2}"><circle cx="${center}" cy="${center}" r="${circleRadius}" stroke-dasharray="${circumference}" stroke-dashoffset="${halfCircumference}" stroke-width="${thisStrokeWidth}"></circle></svg>`;
-        return html `<div class="layer"><div class="clipper left">${circle(strokeWidth)}</div><div class="gap-patch">${circle(strokeWidth * 0.8)}</div><div class="clipper right">${circle(strokeWidth)}</div></div>`;
+        const circle = (thisStrokeWidth) => html `<svg class="circle" viewBox="0 0 ${center * 2} ${center * 2}">
+        <circle
+          cx="${center}"
+          cy="${center}"
+          r="${circleRadius}"
+          stroke-dasharray="${circumference}"
+          stroke-dashoffset="${halfCircumference}"
+          stroke-width="${thisStrokeWidth}"
+        ></circle>
+      </svg>`;
+        return html `<div class="layer">
+      <div class="clipper left">${circle(strokeWidth)}</div>
+      <div class="gap-patch">${circle(strokeWidth * 0.8)}</div>
+      <div class="clipper right">${circle(strokeWidth)}</div>
+    </div>`;
     }
 };
 CircularProgress.styles = [componentStyle, style];

package/components/circular-progress/style.js

@@ -1,2 +1,137 @@
 import { css } from 'lit';
-export const style = css `:host{position:relative;display:inline-block;width:2.5rem;height:2.5rem;stroke:rgb(var(--mdui-color-primary))}.progress{position:relative;display:inline-block;width:100%;height:100%;text-align:left;transition:opacity var(--mdui-motion-duration-medium1) var(--mdui-motion-easing-linear)}.determinate svg{transform:rotate(-90deg);fill:transparent}.determinate .track{stroke:transparent}.determinate .circle{stroke:inherit;transition:stroke-dashoffset var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard)}.indeterminate{font-size:0;letter-spacing:0;white-space:nowrap;animation:mdui-comp-circular-progress-rotate 1568ms var(--mdui-motion-easing-linear) infinite}.indeterminate .circle,.indeterminate .layer{position:absolute;width:100%;height:100%}.indeterminate .layer{animation:mdui-comp-circular-progress-layer-rotate 5332ms var(--mdui-motion-easing-standard) infinite both}.indeterminate .circle{fill:transparent;stroke:inherit}.indeterminate .gap-patch{position:absolute;top:0;left:47.5%;width:5%;height:100%;overflow:hidden}.indeterminate .gap-patch .circle{left:-900%;width:2000%;transform:rotate(180deg)}.indeterminate .clipper{position:relative;display:inline-block;width:50%;height:100%;overflow:hidden}.indeterminate .clipper .circle{width:200%}.indeterminate .clipper.left .circle{animation:mdui-comp-circular-progress-left-spin 1333ms var(--mdui-motion-easing-standard) infinite both}.indeterminate .clipper.right .circle{left:-100%;animation:mdui-comp-circular-progress-right-spin 1333ms var(--mdui-motion-easing-standard) infinite both}@keyframes mdui-comp-circular-progress-rotate{to{transform:rotate(360deg)}}@keyframes mdui-comp-circular-progress-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}@keyframes mdui-comp-circular-progress-left-spin{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}100%{transform:rotate(265deg)}}@keyframes mdui-comp-circular-progress-right-spin{0%{transform:rotate(-265deg)}50%{transform:rotate(-130deg)}100%{transform:rotate(-265deg)}}`;
+export const style = css `
+  :host {
+    position: relative;
+    display: inline-block;
+    width: 2.5rem;
+    height: 2.5rem;
+    stroke: rgb(var(--mdui-color-primary));
+  }
+  .progress {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    text-align: left;
+    transition: opacity var(--mdui-motion-duration-medium1)
+      var(--mdui-motion-easing-linear);
+  }
+  .determinate svg {
+    transform: rotate(-90deg);
+    fill: transparent;
+  }
+  .determinate .track {
+    stroke: transparent;
+  }
+  .determinate .circle {
+    stroke: inherit;
+    transition: stroke-dashoffset var(--mdui-motion-duration-long2)
+      var(--mdui-motion-easing-standard);
+  }
+  .indeterminate {
+    font-size: 0;
+    letter-spacing: 0;
+    white-space: nowrap;
+    animation: mdui-comp-circular-progress-rotate 1568ms
+      var(--mdui-motion-easing-linear) infinite;
+  }
+  .indeterminate .layer,
+  .indeterminate .circle {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+  .indeterminate .layer {
+    animation: mdui-comp-circular-progress-layer-rotate 5332ms
+      var(--mdui-motion-easing-standard) infinite both;
+  }
+  .indeterminate .circle {
+    fill: transparent;
+    stroke: inherit;
+  }
+  .indeterminate .gap-patch {
+    position: absolute;
+    top: 0;
+    left: 47.5%;
+    width: 5%;
+    height: 100%;
+    overflow: hidden;
+  }
+  .indeterminate .gap-patch .circle {
+    left: -900%;
+    width: 2000%;
+    transform: rotate(180deg);
+  }
+  .indeterminate .clipper {
+    position: relative;
+    display: inline-block;
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+  }
+  .indeterminate .clipper .circle {
+    width: 200%;
+  }
+  .indeterminate .clipper.left .circle {
+    animation: mdui-comp-circular-progress-left-spin 1333ms
+      var(--mdui-motion-easing-standard) infinite both;
+  }
+  .indeterminate .clipper.right .circle {
+    left: -100%;
+    animation: mdui-comp-circular-progress-right-spin 1333ms
+      var(--mdui-motion-easing-standard) infinite both;
+  }
+  @keyframes mdui-comp-circular-progress-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes mdui-comp-circular-progress-layer-rotate {
+    12.5% {
+      transform: rotate(135deg);
+    }
+    25% {
+      transform: rotate(270deg);
+    }
+    37.5% {
+      transform: rotate(405deg);
+    }
+    50% {
+      transform: rotate(540deg);
+    }
+    62.5% {
+      transform: rotate(675deg);
+    }
+    75% {
+      transform: rotate(810deg);
+    }
+    87.5% {
+      transform: rotate(945deg);
+    }
+    100% {
+      transform: rotate(1080deg);
+    }
+  }
+  @keyframes mdui-comp-circular-progress-left-spin {
+    0% {
+      transform: rotate(265deg);
+    }
+    50% {
+      transform: rotate(130deg);
+    }
+    100% {
+      transform: rotate(265deg);
+    }
+  }
+  @keyframes mdui-comp-circular-progress-right-spin {
+    0% {
+      transform: rotate(-265deg);
+    }
+    50% {
+      transform: rotate(-130deg);
+    }
+    100% {
+      transform: rotate(-265deg);
+    }
+  }
+`;

package/components/collapse/collapse-item-style.js

@@ -1,2 +1,22 @@
 import { css } from 'lit';
-export const collapseItemStyle = css `:host{display:flex;flex-direction:column}.header{display:block}.body{display:block;overflow:hidden;transition:height var(--mdui-motion-duration-short4) var(--mdui-motion-easing-emphasized)}.body.opened{overflow:visible}.body.active{transition-duration:var(--mdui-motion-duration-medium4)}`;
+export const collapseItemStyle = css `
+  :host {
+    display: flex;
+    flex-direction: column;
+  }
+  .header {
+    display: block;
+  }
+  .body {
+    display: block;
+    overflow: hidden;
+    transition: height var(--mdui-motion-duration-short4)
+      var(--mdui-motion-easing-emphasized);
+  }
+  .body.opened {
+    overflow: visible;
+  }
+  .body.active {
+    transition-duration: var(--mdui-motion-duration-medium4);
+  }
+`;

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

@@ -3,7 +3,7 @@ import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { JQ } from '@mdui/jq/shared/core.js';
 import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
 /**
- * @summary 折叠面板项组件。需与 `<mdui-collapse>` 组件配合使用
+ * @summary 折叠面板项组件，需配合 `<mdui-collapse>` 组件使用
  *
  * ```html
  * <mdui-collapse>
@@ -26,15 +26,15 @@ import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
 export declare class CollapseItem extends MduiElement<CollapseItemEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 该折叠面板项的值
+     * 此折叠面板项的值
      */
     value?: string;
     /**
-     * 该折叠面板项的头部文本
+     * 此折叠面板项的头部文本
      */
     header?: string;
     /**
-     * 是否禁用该折叠面板项
+     * 是否禁用此折叠面板项
      */
     disabled: boolean;
     /**