mdui 2.0.5 → 2.1.0

package/components/checkbox/index.js

@@ -170,56 +170,13 @@ let Checkbox = class Checkbox extends RippleMixin(FocusableMixin(MduiElement)) {
         this.invalid = !this.inputRef.value.checkValidity();
     }
     render() {
-        return html `<label class="${classMap({ invalid: this.invalid })}">
-      <input
-        ${ref(this.inputRef)}
-        type="checkbox"
-        name=${ifDefined(this.name)}
-        value=${ifDefined(this.value)}
-        .indeterminate=${live(this.indeterminate)}
-        .disabled=${this.disabled}
-        .checked=${live(this.checked)}
-        .required=${this.required}
-        @change=${this.onChange}
-      />
-      <i part="control">
-        <mdui-ripple
-          ${ref(this.rippleRef)}
-          .noRipple=${this.noRipple}
-        ></mdui-ripple>
-        <slot
-          name="unchecked-icon"
-          part="unchecked-icon"
-          class="icon unchecked-icon"
-        >
-          ${this.uncheckedIcon
-            ? html `<mdui-icon name=${this.uncheckedIcon} class="i"></mdui-icon>`
-            : html `<mdui-icon-check-box-outline-blank
-                class="i"
-              ></mdui-icon-check-box-outline-blank>`}
-        </slot>
-        <slot name="checked-icon" part="checked-icon" class="icon checked-icon">
-          ${this.checkedIcon
-            ? html `<mdui-icon name=${this.checkedIcon} class="i"></mdui-icon>`
-            : html `<mdui-icon-check-box class="i"></mdui-icon-check-box>`}
-        </slot>
-        <slot
-          name="indeterminate-icon"
-          part="indeterminate-icon"
-          class="icon indeterminate-icon"
-        >
-          ${this.indeterminateIcon
-            ? html `<mdui-icon
-                name=${this.indeterminateIcon}
-                class="i"
-              ></mdui-icon>`
-            : html `<mdui-icon-indeterminate-check-box
-                class="i"
-              ></mdui-icon-indeterminate-check-box>`}
-        </slot>
-      </i>
-      <slot part="label" class="label"></slot>
-    </label>`;
+        return html `<label class="${classMap({ invalid: this.invalid })}"><input ${ref(this.inputRef)} type="checkbox" name="${ifDefined(this.name)}" value="${ifDefined(this.value)}" .indeterminate="${live(this.indeterminate)}" .disabled="${this.disabled}" .checked="${live(this.checked)}" .required="${this.required}" @change="${this.onChange}"> <i part="control"><mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple><slot name="unchecked-icon" part="unchecked-icon" class="icon unchecked-icon">${this.uncheckedIcon
+            ? html `<mdui-icon name="${this.uncheckedIcon}" class="i"></mdui-icon>`
+            : html `<mdui-icon-check-box-outline-blank class="i"></mdui-icon-check-box-outline-blank>`}</slot><slot name="checked-icon" part="checked-icon" class="icon checked-icon">${this.checkedIcon
+            ? html `<mdui-icon name="${this.checkedIcon}" class="i"></mdui-icon>`
+            : html `<mdui-icon-check-box class="i"></mdui-icon-check-box>`}</slot><slot name="indeterminate-icon" part="indeterminate-icon" class="icon indeterminate-icon">${this.indeterminateIcon
+            ? html `<mdui-icon name="${this.indeterminateIcon}" class="i"></mdui-icon>`
+            : html `<mdui-icon-indeterminate-check-box class="i"></mdui-icon-indeterminate-check-box>`}</slot></i><slot part="label" class="label"></slot></label>`;
     }
     /**
      * input[type="checkbox"] 的 change 事件无法冒泡越过 shadow dom

package/components/checkbox/style.js

@@ -1,132 +1,2 @@
 import { css } from 'lit';
-export const style = css `
-  :host {
-    position: relative;
-    display: inline-flex;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-    border-radius: 0.125rem;
-    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);
-  }
-  label {
-    display: inline-flex;
-    align-items: center;
-    width: 100%;
-    cursor: inherit;
-    -webkit-user-select: none;
-    user-select: none;
-    touch-action: manipulation;
-    zoom: 1;
-    -webkit-user-drag: none;
-  }
-  /* 隐藏系统 input 标签，用自定义的图标代替 */
-  input {
-    position: absolute;
-    padding: 0;
-    opacity: 0;
-    pointer-events: none;
-    width: 1.125rem;
-    height: 1.125rem;
-    margin: 0rem 0rem 0rem 0.6875rem;
-  }
-  .icon {
-    display: flex;
-    position: absolute;
-    opacity: 1;
-    transform: scale(1);
-    color: rgb(var(--mdui-color-on-surface));
-    font-size: 1.5rem;
-    transition: color var(--mdui-motion-duration-short4)
-      var(--mdui-motion-easing-standard);
-  }
-  .checked-icon,
-  .indeterminate-icon {
-    opacity: 0;
-    transform: scale(0.5);
-    transition-property: color, opacity, transform;
-    transition-duration: var(--mdui-motion-duration-short4);
-    transition-timing-function: var(--mdui-motion-easing-standard);
-  }
-  .icon .i,
-  ::slotted([slot='unchecked-icon']),
-  ::slotted([slot='checked-icon']),
-  ::slotted([slot='indeterminate-icon']) {
-    color: inherit;
-    font-size: inherit;
-  }
-  i {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    border-radius: 50%;
-    width: 2.5rem;
-    min-width: 2.5rem;
-    height: 2.5rem;
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface);
-  }
-  .label {
-    display: flex;
-    width: 100%;
-    padding-top: 0.625rem;
-    padding-bottom: 0.625rem;
-    color: rgb(var(--mdui-color-on-surface));
-    transition: color var(--mdui-motion-duration-short4)
-      var(--mdui-motion-easing-standard);
-  }
-  :host([checked]) i {
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-primary);
-  }
-  :host([checked]) .icon {
-    color: rgb(var(--mdui-color-primary));
-  }
-  :host([checked]) .indeterminate-icon {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-  :host([checked]) .checked-icon {
-    opacity: 1;
-    transform: scale(1);
-  }
-  :host([indeterminate]) i {
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-primary);
-  }
-  :host([indeterminate]) .icon {
-    color: rgb(var(--mdui-color-primary));
-  }
-  :host([indeterminate]) .checked-icon {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-  :host([indeterminate]) .indeterminate-icon {
-    opacity: 1;
-    transform: scale(1);
-  }
-  .invalid i {
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-error);
-  }
-  .invalid .icon {
-    color: rgb(var(--mdui-color-error));
-  }
-  .invalid .label {
-    color: rgb(var(--mdui-color-error));
-  }
-  :host([disabled]) {
-    cursor: default;
-    pointer-events: none;
-  }
-  :host([disabled]) .icon {
-    color: rgba(var(--mdui-color-on-surface), 38%);
-  }
-  :host([disabled]) .label {
-    color: rgba(var(--mdui-color-on-surface), 38%);
-  }
-  :host([disabled][checked]) .unchecked-icon,
-  :host([disabled][indeterminate]) .unchecked-icon {
-    opacity: 0;
-  }
-`;
+export const style = css `:host{position:relative;display:inline-flex;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:.125rem;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)}label{display:inline-flex;align-items:center;width:100%;cursor:inherit;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none}input{position:absolute;padding:0;opacity:0;pointer-events:none;width:1.125rem;height:1.125rem;margin:0 0 0 .6875rem}.icon{display:flex;position:absolute;opacity:1;transform:scale(1);color:rgb(var(--mdui-color-on-surface));font-size:1.5rem;transition:color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}.checked-icon,.indeterminate-icon{opacity:0;transform:scale(.5);transition-property:color,opacity,transform;transition-duration:var(--mdui-motion-duration-short4);transition-timing-function:var(--mdui-motion-easing-standard)}.icon .i,::slotted([slot=checked-icon]),::slotted([slot=indeterminate-icon]),::slotted([slot=unchecked-icon]){color:inherit;font-size:inherit}i{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;width:2.5rem;min-width:2.5rem;height:2.5rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}.label{display:flex;width:100%;padding-top:.625rem;padding-bottom:.625rem;color:rgb(var(--mdui-color-on-surface));transition:color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}:host([checked]) i{--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([checked]) .icon{color:rgb(var(--mdui-color-primary))}:host([checked]) .indeterminate-icon{opacity:0;transform:scale(.5)}:host([checked]) .checked-icon{opacity:1;transform:scale(1)}:host([indeterminate]) i{--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([indeterminate]) .icon{color:rgb(var(--mdui-color-primary))}:host([indeterminate]) .checked-icon{opacity:0;transform:scale(.5)}:host([indeterminate]) .indeterminate-icon{opacity:1;transform:scale(1)}.invalid i{--mdui-comp-ripple-state-layer-color:var(--mdui-color-error)}.invalid .icon{color:rgb(var(--mdui-color-error))}.invalid .label{color:rgb(var(--mdui-color-error))}:host([disabled]){cursor:default;pointer-events:none}:host([disabled]) .icon{color:rgba(var(--mdui-color-on-surface),38%)}:host([disabled]) .label{color:rgba(var(--mdui-color-on-surface),38%)}:host([disabled][checked]) .unchecked-icon,:host([disabled][indeterminate]) .unchecked-icon{opacity:0}`;

package/components/chip/index.js

@@ -99,20 +99,14 @@ 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',
@@ -155,15 +149,12 @@ 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>`;
@@ -172,38 +163,23 @@ 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,207 +1,4 @@
 import { css } from 'lit';
-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(
+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(
       --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: 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;
-  }
-`;
+    )}: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}`;

package/components/circular-progress/index.js

@@ -23,14 +23,10 @@ let CircularProgress = class CircularProgress extends MduiElement {
     }
     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;
@@ -40,24 +36,7 @@ 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; // 圆环宽度
@@ -66,21 +45,8 @@ 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];