mdui 2.0.5 → 2.1.0

package/components/circular-progress/style.js

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

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

@@ -1,22 +1,2 @@
 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,18 +68,10 @@ 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,6 +1,2 @@
 import { css } from 'lit';
-export const collapseStyle = css `
-  :host {
-    display: block;
-  }
-`;
+export const collapseStyle = css `:host{display:block}`;

package/components/collapse/collapse.js

@@ -85,10 +85,7 @@ 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

@@ -15,6 +15,7 @@ import { getDuration, getEasing } from '@mdui/shared/helpers/motion.js';
 import { lockScreen, unlockScreen } from '@mdui/shared/helpers/scroll.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { offLocaleReady } from '../../internal/localize.js';
 import '../icon.js';
 import { style } from './style.js';
 /**
@@ -199,6 +200,8 @@ let Dialog = class Dialog extends MduiElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         unlockScreen(this);
+        // alert, confirm, prompt 函数支持 localize。这里确保在组件销毁时，取消监听 localize ready 事件
+        offLocaleReady(this);
     }
     firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
@@ -218,33 +221,11 @@ 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');
@@ -254,21 +235,15 @@ 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,117 +1,2 @@
 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), 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;
-  }
-`;
+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}`;

package/components/divider/style.js

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

package/components/dropdown/index.js

@@ -234,14 +234,7 @@ 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,12 +1,2 @@
 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,20 +94,14 @@ 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',
@@ -121,11 +115,9 @@ 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,157 +1,8 @@
 import { css } from 'lit';
-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(
+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(
       --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: 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%);
-  }
-`;
+    )}: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%)}`;

package/components/icon/index.js

@@ -34,11 +34,7 @@ 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))}`;