mdui 2.0.5 → 2.1.0

package/components/avatar/index.js

@@ -32,14 +32,9 @@ let Avatar = class Avatar extends MduiElement {
         return this.hasSlotController.test('[default]')
             ? html `<slot></slot>`
             : this.src
-                ? html `<img
-          part="image"
-          alt=${ifDefined(this.label)}
-          src=${this.src}
-          style=${styleMap({ objectFit: this.fit })}
-        />`
+                ? html `<img part="image" alt="${ifDefined(this.label)}" src="${this.src}" style="${styleMap({ objectFit: this.fit })}">`
                 : this.icon
-                    ? html `<mdui-icon part="icon" name=${this.icon}></mdui-icon>`
+                    ? html `<mdui-icon part="icon" name="${this.icon}"></mdui-icon>`
                     : nothingTemplate;
     }
 };

package/components/avatar/style.js

@@ -1,32 +1,2 @@
 import { css } from 'lit';
-export const style = css `
-  :host {
-    --shape-corner: var(--mdui-shape-corner-full);
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    white-space: nowrap;
-    vertical-align: middle;
-    border-radius: var(--shape-corner);
-    -webkit-user-select: none;
-    user-select: none;
-    width: 2.5rem;
-    height: 2.5rem;
-    background-color: rgb(var(--mdui-color-primary-container));
-    color: rgb(var(--mdui-color-on-primary-container));
-    font-size: var(--mdui-typescale-title-medium-size);
-    font-weight: var(--mdui-typescale-title-medium-weight);
-    letter-spacing: var(--mdui-typescale-title-medium-tracking);
-    line-height: var(--mdui-typescale-title-medium-line-height);
-  }
-  img {
-    width: 100%;
-    height: 100%;
-  }
-  mdui-icon,
-  ::slotted(mdui-icon) {
-    font-size: 1.5em;
-  }
-`;
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-full);position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;vertical-align:middle;border-radius:var(--shape-corner);-webkit-user-select:none;user-select:none;width:2.5rem;height:2.5rem;background-color:rgb(var(--mdui-color-primary-container));color:rgb(var(--mdui-color-on-primary-container));font-size:var(--mdui-typescale-title-medium-size);font-weight:var(--mdui-typescale-title-medium-weight);letter-spacing:var(--mdui-typescale-title-medium-tracking);line-height:var(--mdui-typescale-title-medium-line-height)}img{width:100%;height:100%}::slotted(mdui-icon),mdui-icon{font-size:1.5em}`;

package/components/badge/style.js

@@ -1,26 +1,2 @@
 import { css } from 'lit';
-export const style = css `
-  :host {
-    --shape-corner: var(--mdui-shape-corner-full);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--shape-corner);
-    padding-left: 0.25rem;
-    padding-right: 0.25rem;
-    color: rgb(var(--mdui-color-on-error));
-    background-color: rgb(var(--mdui-color-error));
-    height: 1rem;
-    min-width: 1rem;
-    font-size: var(--mdui-typescale-label-small-size);
-    font-weight: var(--mdui-typescale-label-small-weight);
-    letter-spacing: var(--mdui-typescale-label-small-tracking);
-    line-height: var(--mdui-typescale-label-small-line-height);
-  }
-  :host([variant='small']) {
-    min-width: 0;
-    padding: 0;
-    width: 0.375rem;
-    height: 0.375rem;
-  }
-`;
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-full);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--shape-corner);padding-left:.25rem;padding-right:.25rem;color:rgb(var(--mdui-color-on-error));background-color:rgb(var(--mdui-color-error));height:1rem;min-width:1rem;font-size:var(--mdui-typescale-label-small-size);font-weight:var(--mdui-typescale-label-small-weight);letter-spacing:var(--mdui-typescale-label-small-tracking);line-height:var(--mdui-typescale-label-small-line-height)}:host([variant=small]){min-width:0;padding:0;width:.375rem;height:.375rem}`;

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

@@ -1,93 +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: 0rem 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]) {
-    transition-duration: var(--mdui-motion-duration-short4);
-    bottom: -5.625rem;
-  }
-  ::slotted(:not(:first-child)) {
-    margin-left: 0.5rem;
-  }
-  ::slotted(mdui-fab) {
-    box-shadow: var(--mdui-elevation-level0);
-  }
-  :host([fab-detach]) ::slotted(mdui-fab) {
-    position: absolute;
-    transition: bottom var(--mdui-motion-duration-long2)
-      var(--mdui-motion-easing-standard);
-    right: 1rem;
-    bottom: 0.75rem;
-  }
-  :host([fab-detach][hide][scroll-behavior~='hide']) ::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(
-          [scroll-target='']
-        )
-    )
-    ::slotted(mdui-fab) {
-    bottom: 6.625rem;
-  }
-  :host([hide]) ::slotted(:not(mdui-fab)),
-  :host([hide]:not([fab-detach])) ::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: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]){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]) ::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]) ::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([scroll-target=''])) ::slotted(mdui-fab){bottom:6.625rem}:host([hide]) ::slotted(:not(mdui-fab)),:host([hide]:not([fab-detach])) ::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/button-base-style.js

@@ -1,29 +1,2 @@
 import { css } from 'lit';
-export const buttonBaseStyle = css `
-  .button {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    padding: 0;
-    overflow: hidden;
-    color: inherit;
-    font-size: inherit;
-    font-family: inherit;
-    font-weight: inherit;
-    letter-spacing: inherit;
-    white-space: nowrap;
-    text-align: center;
-    text-decoration: none;
-    vertical-align: middle;
-    background: transparent;
-    border: none;
-    outline: none;
-    cursor: inherit;
-    user-select: none;
-    touch-action: manipulation;
-    zoom: 1;
-    -webkit-user-drag: none;
-  }
-`;
+export const buttonBaseStyle = css `.button{position:relative;display:inline-flex;align-items:center;justify-content:center;height:100%;padding:0;overflow:hidden;color:inherit;font-size:inherit;font-family:inherit;font-weight:inherit;letter-spacing:inherit;white-space:nowrap;text-align:center;text-decoration:none;vertical-align:middle;background:0 0;border:none;outline:0;cursor:inherit;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1;-webkit-user-drag:none}`;

package/components/button/button-base.js

@@ -151,14 +151,7 @@ export class ButtonBase extends AnchorMixin(RippleMixin(FocusableMixin(MduiEleme
             : nothingTemplate;
     }
     renderButton({ id, className, part, content = html `<slot></slot>`, }) {
-        return html `<button
-      id=${ifDefined(id)}
-      class=${cc(['_button', className])}
-      part=${ifDefined(part)}
-      ?disabled=${this.rippleDisabled || this.focusDisabled}
-    >
-      ${content}
-    </button>`;
+        return html `<button id="${ifDefined(id)}" class="${cc(['_button', className])}" part="${ifDefined(part)}" ?disabled="${this.rippleDisabled || this.focusDisabled}">${content}</button>`;
     }
     isButton() {
         return !this.href;

package/components/button/index.js

@@ -53,20 +53,14 @@ let Button = class Button extends ButtonBase {
         return this.rippleRef.value;
     }
     render() {
-        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: 'button',
                 part: 'button',
                 content: this.renderInner(),
             })
             : this.disabled || this.loading
-                ? html `<span part="button" class="button _a">
-            ${this.renderInner()}
-          </span>`
+                ? html `<span part="button" class="button _a">${this.renderInner()}</span>`
                 : this.renderAnchor({
                     className: 'button',
                     part: 'button',
@@ -77,21 +71,17 @@ let Button = class Button extends ButtonBase {
         if (this.loading) {
             return this.renderLoading();
         }
-        return html `<slot name="icon" part="icon" class="icon">
-      ${this.icon
-            ? html `<mdui-icon name=${this.icon}></mdui-icon>`
-            : nothingTemplate}
-    </slot>`;
+        return html `<slot name="icon" part="icon" class="icon">${this.icon
+            ? html `<mdui-icon name="${this.icon}"></mdui-icon>`
+            : nothingTemplate}</slot>`;
     }
     renderLabel() {
         return html `<slot part="label" class="label"></slot>`;
     }
     renderEndIcon() {
-        return html `<slot name="end-icon" part="end-icon" class="end-icon">
-      ${this.endIcon
-            ? html `<mdui-icon name=${this.endIcon}></mdui-icon>`
-            : nothingTemplate}
-    </slot>`;
+        return html `<slot name="end-icon" part="end-icon" class="end-icon">${this.endIcon
+            ? html `<mdui-icon name="${this.endIcon}"></mdui-icon>`
+            : nothingTemplate}</slot>`;
     }
     renderInner() {
         return [this.renderIcon(), this.renderLabel(), this.renderEndIcon()];

package/components/button/style.js

@@ -1,113 +1,4 @@
 import { css } from 'lit';
-export const style = css `
-  /**
- * mdui-button 组件。默认为 variant="text"
- */
-  :host {
-    --shape-corner: var(--mdui-shape-corner-full);
-    position: relative;
-    display: inline-block;
-    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: 0rem 1rem;
-  }
-  :host([full-width]) {
-    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;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]){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(
       --mdui-color-on-secondary-container
-    );
-  }
-  :host([variant='outlined']) {
-    border: 0.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]),
-  :host([loading]) {
-    cursor: default;
-    pointer-events: none;
-  }
-  :host([disabled]) {
-    color: rgba(var(--mdui-color-on-surface), 38%);
-    box-shadow: var(--mdui-elevation-level0);
-  }
-  :host([variant='elevated'][disabled]),
-  :host([variant='filled'][disabled]),
-  :host([variant='tonal'][disabled]) {
-    background-color: rgba(var(--mdui-color-on-surface), 12%);
-  }
-  :host([variant='outlined'][disabled]) {
-    border-color: rgba(var(--mdui-color-on-surface), 12%);
-  }
-  .label {
-    display: inline-flex;
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
-  }
-  .icon,
-  .end-icon {
-    display: inline-flex;
-    font-size: 1.28571429em;
-  }
-  .icon mdui-icon,
-  .end-icon mdui-icon,
-  ::slotted([slot='icon']),
-  ::slotted([slot='end-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]) mdui-circular-progress {
-    stroke: rgba(var(--mdui-color-on-surface), 38%);
-  }
-`;
+    )}: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]),:host([loading]){cursor:default;pointer-events:none}:host([disabled]){color:rgba(var(--mdui-color-on-surface),38%);box-shadow:var(--mdui-elevation-level0)}:host([variant=elevated][disabled]),:host([variant=filled][disabled]),:host([variant=tonal][disabled]){background-color:rgba(var(--mdui-color-on-surface),12%)}:host([variant=outlined][disabled]){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]) mdui-circular-progress{stroke:rgba(var(--mdui-color-on-surface),38%)}`;

package/components/button-icon/index.js

@@ -70,45 +70,28 @@ let ButtonIcon = class ButtonIcon extends ButtonBase {
         });
     }
     render() {
-        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: 'button',
                 part: 'button',
                 content: this.renderIcon(),
             })
             : this.disabled || this.loading
-                ? html `<span part="button" class="button _a">
-            ${this.renderIcon()}
-          </span>`
+                ? html `<span part="button" class="button _a">${this.renderIcon()}</span>`
                 : this.renderAnchor({
                     className: 'button',
                     part: 'button',
                     content: this.renderIcon(),
-                })}
-      ${this.renderLoading()}`;
+                })} ${this.renderLoading()}`;
     }
     renderIcon() {
         const icon = () => this.hasSlotController.test('[default]')
             ? html `<slot></slot>`
             : this.icon
-                ? html `<mdui-icon
-            part="icon"
-            class="icon"
-            name=${this.icon}
-          ></mdui-icon>`
+                ? 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="${this.selectedIcon}"></mdui-icon></slot>`
             : icon();
         return this.selected ? selectedIcon() : icon();
     }

package/components/button-icon/style.js

@@ -1,105 +1,4 @@
 import { css } from 'lit';
-export const style = css `
-  :host {
-    --shape-corner: var(--mdui-shape-corner-full);
-    position: relative;
-    display: inline-block;
-    overflow: hidden;
-    text-align: center;
-    border-radius: var(--shape-corner);
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-    font-size: 1.5rem;
-    width: 2.5rem;
-    min-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: 0.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]) {
-    color: rgb(var(--mdui-color-primary));
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-primary);
-  }
-  :host([variant='filled'][selected]),
-  :host([variant='filled']:not([selectable])) {
-    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'][selected]),
-  :host([variant='tonal']:not([selectable])) {
-    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;overflow:hidden;text-align:center;border-radius:var(--shape-corner);cursor:pointer;-webkit-tap-highlight-color:transparent;font-size:1.5rem;width:2.5rem;min-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]){color:rgb(var(--mdui-color-primary));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=filled]:not([selectable])),:host([variant=filled][selected]){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][selected]){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]) {
-    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]),
-  :host([variant='tonal'][disabled]),
-  :host([variant='outlined'][disabled]) {
-    background-color: rgba(var(--mdui-color-on-surface), 0.12);
-    border-color: rgba(var(--mdui-color-on-surface), 0.12);
-  }
-  :host([disabled]),
-  :host([loading]) {
-    cursor: default;
-    pointer-events: none;
-  }
-  :host([disabled]) {
-    color: rgba(var(--mdui-color-on-surface), 0.38) !important;
-  }
-  :host([loading]) mdui-ripple,
-  :host([loading]) .button {
-    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 {
-    stroke: rgb(var(--mdui-color-on-primary));
-  }
-  :host([disabled]) mdui-circular-progress {
-    stroke: rgba(var(--mdui-color-on-surface), 38%);
-  }
-`;
+    )}:host([variant=outlined][selected]){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]),:host([variant=outlined][disabled]),:host([variant=tonal][disabled]){background-color:rgba(var(--mdui-color-on-surface),.12);border-color:rgba(var(--mdui-color-on-surface),.12)}:host([disabled]),:host([loading]){cursor:default;pointer-events:none}:host([disabled]){color:rgba(var(--mdui-color-on-surface),.38)!important}:host([loading]) .button,:host([loading]) 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{stroke:rgb(var(--mdui-color-on-primary))}:host([disabled]) mdui-circular-progress{stroke:rgba(var(--mdui-color-on-surface),38%)}`;

package/components/card/index.js

@@ -59,11 +59,7 @@ let Card = class Card extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement
         return this.rippleDisabled;
     }
     render() {
-        return html `<mdui-ripple
-        ${ref(this.rippleRef)}
-        .noRipple=${this.noRipple}
-      ></mdui-ripple
-      >${this.href && !this.disabled
+        return html `<mdui-ripple ${ref(this.rippleRef)} .noRipple="${this.noRipple}"></mdui-ripple>${this.href && !this.disabled
             ? this.renderAnchor({
                 className: 'link',
                 content: html `<slot></slot>`,

package/components/card/style.js

@@ -1,73 +1,2 @@
 import { css } from 'lit';
-export const style = css `
-  /**
- * mdui-card 组件。默认为 variant="elevated"
- */
-  :host {
-    --shape-corner: var(--mdui-shape-corner-medium);
-    position: relative;
-    display: inline-block;
-    overflow: hidden;
-    border-radius: var(--shape-corner);
-    -webkit-tap-highlight-color: transparent;
-    transition: box-shadow var(--mdui-motion-duration-short4)
-      var(--mdui-motion-easing-linear);
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface);
-  }
-  :host([clickable]) {
-    cursor: pointer;
-  }
-  :host([variant='elevated']) {
-    background-color: rgb(var(--mdui-color-surface-container-low));
-    box-shadow: var(--mdui-elevation-level1);
-  }
-  :host([variant='filled']) {
-    background-color: rgb(var(--mdui-color-surface-container-highest));
-  }
-  :host([variant='outlined']) {
-    background-color: rgb(var(--mdui-color-surface));
-    border: 0.0625rem solid rgb(var(--mdui-color-outline));
-  }
-  :host([variant='elevated'][hover]) {
-    box-shadow: var(--mdui-elevation-level2);
-  }
-  :host([variant='filled'][hover]),
-  :host([variant='outlined'][hover]) {
-    box-shadow: var(--mdui-elevation-level1);
-  }
-  :host([variant='elevated'][dragged]),
-  :host([variant='filled'][dragged]),
-  :host([variant='outlined'][dragged]) {
-    box-shadow: var(--mdui-elevation-level3);
-  }
-  :host([disabled]) {
-    opacity: 0.38;
-    cursor: default;
-    -webkit-user-select: none;
-    user-select: none;
-  }
-  :host([variant='elevated'][disabled]) {
-    background-color: rgb(var(--mdui-color-surface-variant));
-    box-shadow: var(--mdui-elevation-level0);
-  }
-  :host([variant='filled'][disabled]) {
-    background-color: rgb(var(--mdui-color-surface));
-    box-shadow: var(--mdui-elevation-level1);
-  }
-  :host([variant='outlined'][disabled]) {
-    box-shadow: var(--mdui-elevation-level0);
-    border-color: rgba(var(--mdui-color-outline), 0.32);
-  }
-  .link {
-    position: relative;
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    color: inherit;
-    font-size: inherit;
-    letter-spacing: inherit;
-    text-decoration: none;
-    touch-action: manipulation;
-    -webkit-user-drag: none;
-  }
-`;
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-medium);position:relative;display:inline-block;overflow:hidden;border-radius:var(--shape-corner);-webkit-tap-highlight-color:transparent;transition:box-shadow var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([clickable]){cursor:pointer}:host([variant=elevated]){background-color:rgb(var(--mdui-color-surface-container-low));box-shadow:var(--mdui-elevation-level1)}:host([variant=filled]){background-color:rgb(var(--mdui-color-surface-container-highest))}:host([variant=outlined]){background-color:rgb(var(--mdui-color-surface));border:.0625rem solid rgb(var(--mdui-color-outline))}:host([variant=elevated][hover]){box-shadow:var(--mdui-elevation-level2)}:host([variant=filled][hover]),:host([variant=outlined][hover]){box-shadow:var(--mdui-elevation-level1)}:host([variant=elevated][dragged]),:host([variant=filled][dragged]),:host([variant=outlined][dragged]){box-shadow:var(--mdui-elevation-level3)}:host([disabled]){opacity:.38;cursor:default;-webkit-user-select:none;user-select:none}:host([variant=elevated][disabled]){background-color:rgb(var(--mdui-color-surface-variant));box-shadow:var(--mdui-elevation-level0)}:host([variant=filled][disabled]){background-color:rgb(var(--mdui-color-surface));box-shadow:var(--mdui-elevation-level1)}:host([variant=outlined][disabled]){box-shadow:var(--mdui-elevation-level0);border-color:rgba(var(--mdui-color-outline),.32)}.link{position:relative;display:inline-block;width:100%;height:100%;color:inherit;font-size:inherit;letter-spacing:inherit;text-decoration:none;touch-action:manipulation;-webkit-user-drag:none}`;