mdui 2.0.4 → 2.0.5

package/components/avatar/index.js

@@ -32,9 +32,14 @@ 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,2 +1,32 @@
 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%}::slotted(mdui-icon),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%;
+  }
+  mdui-icon,
+  ::slotted(mdui-icon) {
+    font-size: 1.5em;
+  }
+`;

package/components/badge/style.js

@@ -1,2 +1,26 @@
 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:.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}`;
+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;
+  }
+`;

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

@@ -1,2 +1,93 @@
 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]){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)}`;
+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);
+  }
+`;

package/components/button/button-base-style.js

@@ -1,2 +1,29 @@
 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:0 0;border:none;outline:0;cursor:inherit;-webkit-user-select:none;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: transparent;
+    border: none;
+    outline: none;
+    cursor: inherit;
+    user-select: none;
+    touch-action: manipulation;
+    zoom: 1;
+    -webkit-user-drag: none;
+  }
+`;

package/components/button/button-base.js

@@ -151,7 +151,14 @@ 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,14 +53,20 @@ 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',
@@ -71,17 +77,21 @@ 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,4 +1,113 @@
 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;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(
+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(
       --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]),: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%)}`;
+    );
+  }
+  :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%);
+  }
+`;

package/components/button-icon/index.js

@@ -70,28 +70,45 @@ 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,4 +1,105 @@
 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:.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(
+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(
       --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=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%)}`;
+    );
+  }
+  :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%);
+  }
+`;

package/components/card/index.js

@@ -59,7 +59,11 @@ 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,2 +1,73 @@
 import { css } from 'lit';
-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}`;
+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;
+  }
+`;