mdui 2.0.4 → 2.0.5

package/components/circular-progress/style.js

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

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

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

package/components/collapse/collapse-item.js

@@ -68,10 +68,18 @@ let CollapseItem = class CollapseItem extends MduiElement {
         this.updateBodyHeight();
     }
     render() {
-        return html `<slot name="header" part="header" class="header">${this.header}</slot><slot part="body" class="body ${classMap({
+        return html `<slot name="header" part="header" class="header">
+        ${this.header}
+      </slot>
+      <slot
+        part="body"
+        class="body ${classMap({
             opened: this.state === 'opened',
             active: this.active,
-        })}" ${ref(this.bodyRef)} @transitionend="${this.onTransitionEnd}"></slot>`;
+        })}"
+        ${ref(this.bodyRef)}
+        @transitionend=${this.onTransitionEnd}
+      ></slot>`;
     }
     onTransitionEnd(event) {
         if (event.target === this.bodyRef.value) {

package/components/collapse/collapse-style.js

@@ -1,2 +1,6 @@
 import { css } from 'lit';
-export const collapseStyle = css `:host{display:block}`;
+export const collapseStyle = css `
+  :host {
+    display: block;
+  }
+`;

package/components/collapse/collapse.js

@@ -85,7 +85,10 @@ let Collapse = class Collapse extends MduiElement {
         this.updateItems();
     }
     render() {
-        return html `<slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot>`;
+        return html `<slot
+      @slotchange=${this.onSlotChange}
+      @click=${this.onClick}
+    ></slot>`;
     }
     setActiveKeys(activeKeys) {
         if (!arraysEqualIgnoreOrder(this.activeKeys, activeKeys)) {

package/components/dialog/index.js

@@ -218,11 +218,33 @@ let Dialog = class Dialog extends MduiElement {
         const hasDescription = !!this.description || this.hasSlotController.test('description');
         const hasHeader = hasIcon || hasHeadline || this.hasSlotController.test('header');
         const hasBody = hasDescription || hasDefaultSlot;
-        return html `<div ${ref(this.overlayRef)} part="overlay" class="overlay" @click="${this.onOverlayClick}" tabindex="-1"></div><div ${ref(this.panelRef)} part="panel" class="panel ${classMap({
+        return html `<div
+        ${ref(this.overlayRef)}
+        part="overlay"
+        class="overlay"
+        @click=${this.onOverlayClick}
+        tabindex="-1"
+      ></div>
+      <div
+        ${ref(this.panelRef)}
+        part="panel"
+        class="panel ${classMap({
             'has-icon': hasIcon,
             'has-description': hasDescription,
             'has-default': hasDefaultSlot,
-        })}" tabindex="0">${when(hasHeader, () => html `<slot name="header" part="header" class="header">${when(hasIcon, () => this.renderIcon())} ${when(hasHeadline, () => this.renderHeadline())}</slot>`)} ${when(hasBody, () => html `<div ${ref(this.bodyRef)} part="body" class="body">${when(hasDescription, () => this.renderDescription())}<slot></slot></div>`)} ${when(hasActionSlot, () => html `<slot name="action" part="action" class="action"></slot>`)}</div>`;
+        })}"
+        tabindex="0"
+      >
+        ${when(hasHeader, () => html `<slot name="header" part="header" class="header">
+              ${when(hasIcon, () => this.renderIcon())}
+              ${when(hasHeadline, () => this.renderHeadline())}
+            </slot>`)}
+        ${when(hasBody, () => html `<div ${ref(this.bodyRef)} part="body" class="body">
+              ${when(hasDescription, () => this.renderDescription())}
+              <slot></slot>
+            </div>`)}
+        ${when(hasActionSlot, () => html `<slot name="action" part="action" class="action"></slot>`)}
+      </div>`;
     }
     onOverlayClick() {
         this.emit('overlay-click');
@@ -232,15 +254,21 @@ let Dialog = class Dialog extends MduiElement {
         this.open = false;
     }
     renderIcon() {
-        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>`;
     }
     renderHeadline() {
-        return html `<slot name="headline" part="headline" class="headline">${this.headline}</slot>`;
+        return html `<slot name="headline" part="headline" class="headline">
+      ${this.headline}
+    </slot>`;
     }
     renderDescription() {
-        return html `<slot name="description" part="description" class="description">${this.description}</slot>`;
+        return html `<slot name="description" part="description" class="description">
+      ${this.description}
+    </slot>`;
     }
 };
 Dialog.styles = [componentStyle, style];

package/components/dialog/style.js

@@ -1,2 +1,117 @@
 import { css } from 'lit';
-export const style = css `:host{--shape-corner:var(--mdui-shape-corner-extra-large);--z-index:2300;position:fixed;z-index:var(--z-index);display:none;align-items:center;justify-content:center;inset:0;padding:3rem}::slotted(mdui-top-app-bar[slot=header]){position:absolute;border-top-left-radius:var(--mdui-shape-corner-extra-large);border-top-right-radius:var(--mdui-shape-corner-extra-large);background-color:rgb(var(--mdui-color-surface-container-high))}:host([fullscreen]){--shape-corner:var(--mdui-shape-corner-none);padding:0}:host([fullscreen]) ::slotted(mdui-top-app-bar[slot=header]){border-top-left-radius:var(--mdui-shape-corner-none);border-top-right-radius:var(--mdui-shape-corner-none)}.overlay{position:fixed;inset:0;background-color:rgba(var(--mdui-color-scrim),.4)}.panel{position:relative;display:flex;flex-direction:column;max-height:100%;border-radius:var(--shape-corner);outline:0;transform-origin:top;min-width:17.5rem;max-width:35rem;padding:1.5rem;background-color:rgb(var(--mdui-color-surface-container-high));box-shadow:var(--mdui-elevation-level3)}:host([fullscreen]) .panel{width:100%;max-width:100%;height:100%;max-height:100%;box-shadow:var(--mdui-elevation-level0)}.header{display:flex;flex-direction:column}.has-icon .header{align-items:center}.icon{display:flex;color:rgb(var(--mdui-color-secondary));font-size:1.5rem}.icon mdui-icon,::slotted([slot=icon]){font-size:inherit}.headline{display:flex;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-headline-small-size);font-weight:var(--mdui-typescale-headline-small-weight);letter-spacing:var(--mdui-typescale-headline-small-tracking);line-height:var(--mdui-typescale-headline-small-line-height)}.icon+.headline{padding-top:1rem}.body{overflow:auto}.header+.body{margin-top:1rem}.description{display:flex;color:rgb(var(--mdui-color-on-surface-variant));font-size:var(--mdui-typescale-body-medium-size);font-weight:var(--mdui-typescale-body-medium-weight);letter-spacing:var(--mdui-typescale-body-medium-tracking);line-height:var(--mdui-typescale-body-medium-line-height)}:host([fullscreen]) .description{color:rgb(var(--mdui-color-on-surface))}.has-description.has-default .description{margin-bottom:1rem}.action{display:flex;justify-content:flex-end;padding-top:1.5rem}.action::slotted(:not(:first-child)){margin-left:.5rem}:host([stacked-actions]) .action{flex-direction:column;align-items:end}:host([stacked-actions]) .action::slotted(:not(:first-child)){margin-left:0;margin-top:.5rem}`;
+export const style = css `
+  :host {
+    --shape-corner: var(--mdui-shape-corner-extra-large);
+    --z-index: 2300;
+    position: fixed;
+    z-index: var(--z-index);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    inset: 0;
+    padding: 3rem;
+  }
+  ::slotted(mdui-top-app-bar[slot='header']) {
+    position: absolute;
+    border-top-left-radius: var(--mdui-shape-corner-extra-large);
+    border-top-right-radius: var(--mdui-shape-corner-extra-large);
+    background-color: rgb(var(--mdui-color-surface-container-high));
+  }
+  :host([fullscreen]) {
+    --shape-corner: var(--mdui-shape-corner-none);
+    padding: 0;
+  }
+  :host([fullscreen]) ::slotted(mdui-top-app-bar[slot='header']) {
+    border-top-left-radius: var(--mdui-shape-corner-none);
+    border-top-right-radius: var(--mdui-shape-corner-none);
+  }
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(var(--mdui-color-scrim), 0.4);
+  }
+  .panel {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+    border-radius: var(--shape-corner);
+    outline: none;
+    transform-origin: top;
+    min-width: 17.5rem;
+    max-width: 35rem;
+    padding: 1.5rem;
+    background-color: rgb(var(--mdui-color-surface-container-high));
+    box-shadow: var(--mdui-elevation-level3);
+  }
+  :host([fullscreen]) .panel {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    box-shadow: var(--mdui-elevation-level0);
+  }
+  .header {
+    display: flex;
+    flex-direction: column;
+  }
+  .has-icon .header {
+    align-items: center;
+  }
+  .icon {
+    display: flex;
+    color: rgb(var(--mdui-color-secondary));
+    font-size: 1.5rem;
+  }
+  .icon mdui-icon,
+  ::slotted([slot='icon']) {
+    font-size: inherit;
+  }
+  .headline {
+    display: flex;
+    color: rgb(var(--mdui-color-on-surface));
+    font-size: var(--mdui-typescale-headline-small-size);
+    font-weight: var(--mdui-typescale-headline-small-weight);
+    letter-spacing: var(--mdui-typescale-headline-small-tracking);
+    line-height: var(--mdui-typescale-headline-small-line-height);
+  }
+  .icon + .headline {
+    padding-top: 1rem;
+  }
+  .body {
+    overflow: auto;
+  }
+  .header + .body {
+    margin-top: 1rem;
+  }
+  .description {
+    display: flex;
+    color: rgb(var(--mdui-color-on-surface-variant));
+    font-size: var(--mdui-typescale-body-medium-size);
+    font-weight: var(--mdui-typescale-body-medium-weight);
+    letter-spacing: var(--mdui-typescale-body-medium-tracking);
+    line-height: var(--mdui-typescale-body-medium-line-height);
+  }
+  :host([fullscreen]) .description {
+    color: rgb(var(--mdui-color-on-surface));
+  }
+  .has-description.has-default .description {
+    margin-bottom: 1rem;
+  }
+  .action {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: 1.5rem;
+  }
+  .action::slotted(:not(:first-child)) {
+    margin-left: 0.5rem;
+  }
+  :host([stacked-actions]) .action {
+    flex-direction: column;
+    align-items: end;
+  }
+  :host([stacked-actions]) .action::slotted(:not(:first-child)) {
+    margin-left: 0rem;
+    margin-top: 0.5rem;
+  }
+`;

package/components/divider/style.js

@@ -1,2 +1,19 @@
 import { css } from 'lit';
-export const style = css `:host{display:block;height:.0625rem;background-color:rgb(var(--mdui-color-surface-variant))}:host([inset]){margin-left:1rem}:host([middle]){margin-left:1rem;margin-right:1rem}:host([vertical]){height:100%;width:.0625rem}`;
+export const style = css `
+  :host {
+    display: block;
+    height: 0.0625rem;
+    background-color: rgb(var(--mdui-color-surface-variant));
+  }
+  :host([inset]) {
+    margin-left: 1rem;
+  }
+  :host([middle]) {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+  :host([vertical]) {
+    height: 100%;
+    width: 0.0625rem;
+  }
+`;

package/components/dropdown/index.js

@@ -234,7 +234,14 @@ let Dropdown = class Dropdown extends MduiElement {
         });
     }
     render() {
-        return html `<slot name="trigger" part="trigger" class="trigger"></slot><slot ${ref(this.panelRef)} part="panel" class="panel" hidden @click="${this.onPanelClick}"></slot>`;
+        return html `<slot name="trigger" part="trigger" class="trigger"></slot>
+      <slot
+        ${ref(this.panelRef)}
+        part="panel"
+        class="panel"
+        hidden
+        @click=${this.onPanelClick}
+      ></slot>`;
     }
     /**
      * 获取 dropdown 打开、关闭动画的 CSS scaleX 或 scaleY

package/components/dropdown/style.js

@@ -1,2 +1,12 @@
 import { css } from 'lit';
-export const style = css `:host{--z-index:2100;display:contents}.panel{display:block;position:fixed;z-index:var(--z-index)}`;
+export const style = css `
+  :host {
+    --z-index: 2100;
+    display: contents;
+  }
+  .panel {
+    display: block;
+    position: fixed;
+    z-index: var(--z-index);
+  }
+`;

package/components/fab/index.js

@@ -94,14 +94,20 @@ let Fab = class Fab extends ButtonBase {
             button: true,
             'has-icon': this.icon || this.hasSlotController.test('icon'),
         });
-        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="_a ${className}">${this.renderInner()}</span>`
+                ? html `<span part="button" class="_a ${className}">
+            ${this.renderInner()}
+          </span>`
                 : this.renderAnchor({
                     className,
                     part: 'button',
@@ -115,9 +121,11 @@ let Fab = class Fab 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>`;
     }
     renderInner() {
         return [this.renderIcon(), this.renderLabel()];

package/components/fab/style.js

@@ -1,8 +1,157 @@
 import { css } from 'lit';
-export const style = css `:host{--shape-corner-small:var(--mdui-shape-corner-small);--shape-corner-normal:var(--mdui-shape-corner-large);--shape-corner-large:var(--mdui-shape-corner-extra-large);position:relative;display:inline-block;overflow:hidden;text-align:center;border-radius:var(--shape-corner-normal);cursor:pointer;-webkit-tap-highlight-color:transparent;transition-property:box-shadow;transition-timing-function:var(--mdui-motion-easing-emphasized);transition-duration:var(--mdui-motion-duration-medium4);width:3.5rem;height:3.5rem;box-shadow:var(--mdui-elevation-level3);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{padding:0 1rem}:host([size=small]) .button{padding:0 .5rem}:host([size=large]) .button{padding:0 1.875rem}:host([lowered]){box-shadow:var(--mdui-elevation-level1)}:host([focus-visible]){box-shadow:var(--mdui-elevation-level3)}:host([lowered][focus-visible]){box-shadow:var(--mdui-elevation-level1)}:host([pressed]){box-shadow:var(--mdui-elevation-level3)}:host([lowered][pressed]){box-shadow:var(--mdui-elevation-level1)}:host([hover]){box-shadow:var(--mdui-elevation-level4)}:host([lowered][hover]){box-shadow:var(--mdui-elevation-level2)}:host([variant=primary]){color:rgb(var(--mdui-color-on-primary-container));background-color:rgb(var(--mdui-color-primary-container));--mdui-comp-ripple-state-layer-color:var(
+export const style = css `
+  /**
+ * mdui-fab 组件。默认为 variant="primary" size="normal"
+ */
+  :host {
+    --shape-corner-small: var(--mdui-shape-corner-small);
+    --shape-corner-normal: var(--mdui-shape-corner-large);
+    --shape-corner-large: var(--mdui-shape-corner-extra-large);
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    text-align: center;
+    border-radius: var(--shape-corner-normal);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition-property: box-shadow;
+    transition-timing-function: var(--mdui-motion-easing-emphasized);
+    transition-duration: var(--mdui-motion-duration-medium4);
+    width: 3.5rem;
+    height: 3.5rem;
+    box-shadow: var(--mdui-elevation-level3);
+    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 {
+    padding: 0rem 1rem;
+  }
+  :host([size='small']) .button {
+    padding: 0rem 0.5rem;
+  }
+  :host([size='large']) .button {
+    padding: 0rem 1.875rem;
+  }
+  :host([lowered]) {
+    box-shadow: var(--mdui-elevation-level1);
+  }
+  :host([focus-visible]) {
+    box-shadow: var(--mdui-elevation-level3);
+  }
+  :host([lowered][focus-visible]) {
+    box-shadow: var(--mdui-elevation-level1);
+  }
+  :host([pressed]) {
+    box-shadow: var(--mdui-elevation-level3);
+  }
+  :host([lowered][pressed]) {
+    box-shadow: var(--mdui-elevation-level1);
+  }
+  :host([hover]) {
+    box-shadow: var(--mdui-elevation-level4);
+  }
+  :host([lowered][hover]) {
+    box-shadow: var(--mdui-elevation-level2);
+  }
+  :host([variant='primary']) {
+    color: rgb(var(--mdui-color-on-primary-container));
+    background-color: rgb(var(--mdui-color-primary-container));
+    --mdui-comp-ripple-state-layer-color: var(
       --mdui-color-on-primary-container
-    )}:host([variant=surface]){color:rgb(var(--mdui-color-primary));background-color:rgb(var(--mdui-color-surface-container-high));--mdui-comp-ripple-state-layer-color:var(--mdui-color-primary)}:host([variant=surface][lowered]){background-color:rgb(var(--mdui-color-surface-container-low))}:host([variant=secondary]){color:rgb(var(--mdui-color-on-secondary-container));background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var(
+    );
+  }
+  :host([variant='surface']) {
+    color: rgb(var(--mdui-color-primary));
+    background-color: rgb(var(--mdui-color-surface-container-high));
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-primary);
+  }
+  :host([variant='surface'][lowered]) {
+    background-color: rgb(var(--mdui-color-surface-container-low));
+  }
+  :host([variant='secondary']) {
+    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=tertiary]){color:rgb(var(--mdui-color-on-tertiary-container));background-color:rgb(var(--mdui-color-tertiary-container));--mdui-comp-ripple-state-layer-color:var(
+    );
+  }
+  :host([variant='tertiary']) {
+    color: rgb(var(--mdui-color-on-tertiary-container));
+    background-color: rgb(var(--mdui-color-tertiary-container));
+    --mdui-comp-ripple-state-layer-color: var(
       --mdui-color-on-tertiary-container
-    )}:host([size=small]){border-radius:var(--shape-corner-small);width:2.5rem;height:2.5rem}:host([size=large]){border-radius:var(--shape-corner-large);width:6rem;height:6rem}:host([disabled]),:host([loading]){cursor:default;pointer-events:none}:host([disabled]){color:rgba(var(--mdui-color-on-surface),38%);background-color:rgba(var(--mdui-color-on-surface),12%);box-shadow:var(--mdui-elevation-level0)}:host([extended]){width:auto}.label{display:inline-flex;transition:opacity var(--mdui-motion-duration-short2) var(--mdui-motion-easing-linear) var(--mdui-motion-duration-short2);padding-left:.25rem;padding-right:.25rem}.has-icon .label{margin-left:.5rem}:host([size=small]) .has-icon .label{margin-left:.25rem}:host([size=large]) .has-icon .label{margin-left:1rem}:host(:not([extended])) .label{opacity:0;transition-delay:0s;transition-duration:var(--mdui-motion-duration-short1)}:host([size=large]) .label{font-size:1.5em}.icon{display:inline-flex;font-size:1.71428571em}:host([size=large]) .icon{font-size:2.57142857em}.icon mdui-icon,::slotted([slot=icon]){font-size:inherit}mdui-circular-progress{display:inline-flex;width:1.5rem;height:1.5rem}:host([size=large]) mdui-circular-progress{width:2.25rem;height:2.25rem}:host([disabled]) mdui-circular-progress{stroke:rgba(var(--mdui-color-on-surface),38%)}`;
+    );
+  }
+  :host([size='small']) {
+    border-radius: var(--shape-corner-small);
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+  :host([size='large']) {
+    border-radius: var(--shape-corner-large);
+    width: 6rem;
+    height: 6rem;
+  }
+  :host([disabled]),
+  :host([loading]) {
+    cursor: default;
+    pointer-events: none;
+  }
+  :host([disabled]) {
+    color: rgba(var(--mdui-color-on-surface), 38%);
+    background-color: rgba(var(--mdui-color-on-surface), 12%);
+    box-shadow: var(--mdui-elevation-level0);
+  }
+  :host([extended]) {
+    width: auto;
+  }
+  .label {
+    display: inline-flex;
+    transition: opacity var(--mdui-motion-duration-short2)
+      var(--mdui-motion-easing-linear) var(--mdui-motion-duration-short2);
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+  .has-icon .label {
+    margin-left: 0.5rem;
+  }
+  :host([size='small']) .has-icon .label {
+    margin-left: 0.25rem;
+  }
+  :host([size='large']) .has-icon .label {
+    margin-left: 1rem;
+  }
+  :host(:not([extended])) .label {
+    opacity: 0;
+    transition-delay: 0ms;
+    transition-duration: var(--mdui-motion-duration-short1);
+  }
+  :host([size='large']) .label {
+    font-size: 1.5em;
+  }
+  .icon {
+    display: inline-flex;
+    font-size: 1.71428571em;
+  }
+  :host([size='large']) .icon {
+    font-size: 2.57142857em;
+  }
+  .icon mdui-icon,
+  ::slotted([slot='icon']) {
+    font-size: inherit;
+  }
+  mdui-circular-progress {
+    display: inline-flex;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  :host([size='large']) mdui-circular-progress {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+  :host([disabled]) mdui-circular-progress {
+    stroke: rgba(var(--mdui-color-on-surface), 38%);
+  }
+`;

package/components/icon/index.js

@@ -34,7 +34,11 @@ let Icon = class Icon extends MduiElement {
                     ['sharp', 'Material Icons Sharp'],
                     ['two-tone', 'Material Icons Two Tone'],
                 ]);
-                return html `<span style="${styleMap({ fontFamily: familyMap.get(variant) })}">${name}</span>`;
+                return html `<span
+          style=${styleMap({ fontFamily: familyMap.get(variant) })}
+        >
+          ${name}
+        </span>`;
             }
             if (this.src) {
                 return html `${until(ajax({ url: this.src }).then(unsafeSVG))}`;