mdui 2.0.5 → 2.0.6

package/components/icon/style.js

@@ -1,30 +1,2 @@
 import { css } from 'lit';
-export const style = css `
-  :host {
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    font-weight: normal;
-    font-family: 'Material Icons';
-    font-style: normal;
-    line-height: 1;
-    direction: ltr;
-    letter-spacing: normal;
-    white-space: nowrap;
-    text-transform: none;
-    word-wrap: normal;
-    /* Support for all WebKit browsers. */
-    -webkit-font-smoothing: antialiased;
-    /* Support for Safari and Chrome. */
-    text-rendering: optimizelegibility;
-    /* Support for Firefox. */
-    -moz-osx-font-smoothing: grayscale;
-    font-size: 1.5rem;
-  }
-  svg,
-  ::slotted(svg) {
-    width: 100%;
-    height: 100%;
-    fill: currentcolor;
-  }
-`;
+export const style = css `:host{display:inline-block;width:1em;height:1em;font-weight:400;font-family:'Material Icons';font-style:normal;line-height:1;direction:ltr;letter-spacing:normal;white-space:nowrap;text-transform:none;word-wrap:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;-moz-osx-font-smoothing:grayscale;font-size:1.5rem}::slotted(svg),svg{width:100%;height:100%;fill:currentcolor}`;

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

@@ -1,7 +1,2 @@
 import { css } from 'lit';
-export const layoutItemStyle = css `
-  :host {
-    display: flex;
-    z-index: 1;
-  }
-`;
+export const layoutItemStyle = css `:host{display:flex;z-index:1}`;

package/components/layout/layout-main-style.js

@@ -1,8 +1,2 @@
 import { css } from 'lit';
-export const layoutMainStyle = css `
-  :host {
-    flex: 1 0 auto;
-    max-width: 100%;
-    overflow: auto;
-  }
-`;
+export const layoutMainStyle = css `:host{flex:1 0 auto;max-width:100%;overflow:auto}`;

package/components/layout/layout-style.js

@@ -1,12 +1,2 @@
 import { css } from 'lit';
-export const layoutStyle = css `
-  :host {
-    position: relative;
-    display: flex;
-    flex: 1 1 auto;
-    overflow: hidden;
-  }
-  :host([full-height]) {
-    height: 100%;
-  }
-`;
+export const layoutStyle = css `:host{position:relative;display:flex;flex:1 1 auto;overflow:hidden}:host([full-height]){height:100%}`;

package/components/linear-progress/index.js

@@ -29,13 +29,9 @@ let LinearProgress = class LinearProgress extends MduiElement {
         const isDeterminate = !isUndefined(this.value);
         if (isDeterminate) {
             const value = this.value;
-            return html `<div
-        part="indicator"
-        class="determinate"
-        style="${styleMap({
+            return html `<div part="indicator" class="determinate" style="${styleMap({
                 width: `${(value / Math.max(this.max ?? value, value)) * 100}%`,
-            })}"
-      ></div>`;
+            })}"></div>`;
         }
         return html `<div part="indicator" class="indeterminate"></div>`;
     }

package/components/linear-progress/style.js

@@ -1,74 +1,2 @@
 import { css } from 'lit';
-export const style = css `
-  :host {
-    --shape-corner: var(--mdui-shape-corner-none);
-    position: relative;
-    display: inline-block;
-    width: 100%;
-    overflow: hidden;
-    border-radius: var(--shape-corner);
-    background-color: rgb(var(--mdui-color-surface-container-highest));
-    height: 0.25rem;
-  }
-  .determinate,
-  .indeterminate {
-    background-color: rgb(var(--mdui-color-primary));
-  }
-  .determinate {
-    height: 100%;
-    transition: width var(--mdui-motion-duration-long2)
-      var(--mdui-motion-easing-standard);
-  }
-  .indeterminate::before {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    background-color: inherit;
-    animation: mdui-comp-progress-indeterminate 2s
-      var(--mdui-motion-easing-linear) infinite;
-    content: ' ';
-  }
-  .indeterminate::after {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    background-color: inherit;
-    animation: mdui-comp-progress-indeterminate-short 2s
-      var(--mdui-motion-easing-linear) infinite;
-    content: ' ';
-  }
-  @keyframes mdui-comp-progress-indeterminate {
-    0% {
-      left: 0;
-      width: 0;
-    }
-    50% {
-      left: 30%;
-      width: 70%;
-    }
-    75% {
-      left: 100%;
-      width: 0;
-    }
-  }
-  @keyframes mdui-comp-progress-indeterminate-short {
-    0% {
-      left: 0;
-      width: 0;
-    }
-    50% {
-      left: 0;
-      width: 0;
-    }
-    75% {
-      left: 0;
-      width: 25%;
-    }
-    100% {
-      left: 100%;
-      width: 0;
-    }
-  }
-`;
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-none);position:relative;display:inline-block;width:100%;overflow:hidden;border-radius:var(--shape-corner);background-color:rgb(var(--mdui-color-surface-container-highest));height:.25rem}.determinate,.indeterminate{background-color:rgb(var(--mdui-color-primary))}.determinate{height:100%;transition:width var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard)}.indeterminate::before{position:absolute;top:0;bottom:0;left:0;background-color:inherit;animation:mdui-comp-progress-indeterminate 2s var(--mdui-motion-easing-linear) infinite;content:' '}.indeterminate::after{position:absolute;top:0;bottom:0;left:0;background-color:inherit;animation:mdui-comp-progress-indeterminate-short 2s var(--mdui-motion-easing-linear) infinite;content:' '}@keyframes mdui-comp-progress-indeterminate{0%{left:0;width:0}50%{left:30%;width:70%}75%{left:100%;width:0}}@keyframes mdui-comp-progress-indeterminate-short{0%{left:0;width:0}50%{left:0;width:0}75%{left:0;width:25%}100%{left:100%;width:0}}`;

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

@@ -1,155 +1,4 @@
 import { css } from 'lit';
-export const listItemStyle = css `
-  :host {
-    --shape-corner: var(--mdui-shape-corner-none);
-    --shape-corner-rounded: var(--mdui-shape-corner-extra-large);
-    position: relative;
-    display: block;
-    border-radius: var(--shape-corner);
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface);
-  }
-  :host([rounded]),
-  :host([rounded]) mdui-ripple {
-    border-radius: var(--shape-corner-rounded);
-  }
-  :host([active]) {
-    background-color: rgb(var(--mdui-color-secondary-container));
-    --mdui-comp-ripple-state-layer-color: var(
+export const listItemStyle = css `:host{--shape-corner:var(--mdui-shape-corner-none);--shape-corner-rounded:var(--mdui-shape-corner-extra-large);position:relative;display:block;border-radius:var(--shape-corner);--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([rounded]),:host([rounded]) mdui-ripple{border-radius:var(--shape-corner-rounded)}:host([active]){background-color:rgb(var(--mdui-color-secondary-container));--mdui-comp-ripple-state-layer-color:var(
       --mdui-color-on-secondary-container
-    );
-  }
-  :host([disabled]) {
-    pointer-events: none;
-  }
-  .container {
-    cursor: pointer;
-    -webkit-user-select: none;
-    user-select: none;
-    text-decoration: none;
-    color: inherit;
-    -webkit-tap-highlight-color: transparent;
-  }
-  :host([disabled]) .container {
-    cursor: default;
-    opacity: 0.38;
-  }
-  :host([nonclickable]:not([href])) .container {
-    cursor: auto;
-    -webkit-user-select: auto;
-    user-select: auto;
-  }
-  .preset {
-    display: flex;
-    align-items: center;
-    padding: 0.5rem 1.5rem 0.5rem 1rem;
-    min-height: 3.5rem;
-  }
-  :host([alignment='start']) .preset {
-    align-items: flex-start;
-  }
-  :host([alignment='end']) .preset {
-    align-items: flex-end;
-  }
-  .body {
-    display: flex;
-    flex: 1 1 100%;
-    flex-direction: column;
-    justify-content: center;
-    min-width: 0;
-  }
-  .headline {
-    display: block;
-    color: rgb(var(--mdui-color-on-surface));
-    font-size: var(--mdui-typescale-body-large-size);
-    font-weight: var(--mdui-typescale-body-large-weight);
-    letter-spacing: var(--mdui-typescale-body-large-tracking);
-    line-height: var(--mdui-typescale-body-large-line-height);
-  }
-  :host([active]) .headline {
-    color: rgb(var(--mdui-color-on-secondary-container));
-  }
-  .description {
-    display: none;
-    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([disabled]) .description,
-  :host([hover]) .description,
-  :host([focused]) .description,
-  :host([pressed]) .description {
-    color: rgb(var(--mdui-color-on-surface));
-  }
-  .has-description .description {
-    display: block;
-  }
-  :host([headline-line='1']) .headline,
-  :host([description-line='1']) .description {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  :host([headline-line='2']) .headline,
-  :host([description-line='2']) .description,
-  :host([headline-line='3']) .headline,
-  :host([description-line='3']) .description {
-    display: -webkit-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -webkit-box-orient: vertical;
-  }
-  :host([headline-line='2']) .headline,
-  :host([description-line='2']) .description {
-    -webkit-line-clamp: 2;
-  }
-  :host([headline-line='3']) .headline,
-  :host([description-line='3']) .description {
-    -webkit-line-clamp: 3;
-  }
-  .icon,
-  .end-icon {
-    display: flex;
-    flex: 0 0 auto;
-    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);
-    color: rgb(var(--mdui-color-on-surface-variant));
-  }
-  :host([disabled]) .icon,
-  :host([disabled]) .end-icon,
-  :host([hover]) .icon,
-  :host([hover]) .end-icon,
-  :host([focused]) .icon,
-  :host([focused]) .end-icon,
-  :host([pressed]) .icon,
-  :host([pressed]) .end-icon {
-    color: rgb(var(--mdui-color-on-surface));
-  }
-  :host([active]) .icon,
-  :host([active]) .end-icon {
-    color: rgb(var(--mdui-color-on-secondary-container));
-  }
-  .icon mdui-icon,
-  .end-icon mdui-icon,
-  .is-icon ::slotted([slot='icon']),
-  .is-end-icon ::slotted([slot='end-icon']) {
-    font-size: 1.5rem;
-  }
-  .has-icon .icon {
-    margin-right: 1rem;
-  }
-  .has-icon ::slotted(mdui-checkbox[slot='icon']),
-  .has-icon ::slotted(mdui-radio[slot='icon']) {
-    margin-left: -0.5rem;
-  }
-  .has-end-icon .end-icon {
-    margin-left: 1rem;
-  }
-  .has-end-icon ::slotted(mdui-checkbox[slot='end-icon']),
-  .has-end-icon ::slotted(mdui-radio[slot='end-icon']) {
-    margin-right: -0.5rem;
-  }
-`;
+    )}:host([disabled]){pointer-events:none}.container{cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}:host([disabled]) .container{cursor:default;opacity:.38}:host([nonclickable]:not([href])) .container{cursor:auto;-webkit-user-select:auto;user-select:auto}.preset{display:flex;align-items:center;padding:.5rem 1.5rem .5rem 1rem;min-height:3.5rem}:host([alignment=start]) .preset{align-items:flex-start}:host([alignment=end]) .preset{align-items:flex-end}.body{display:flex;flex:1 1 100%;flex-direction:column;justify-content:center;min-width:0}.headline{display:block;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-body-large-size);font-weight:var(--mdui-typescale-body-large-weight);letter-spacing:var(--mdui-typescale-body-large-tracking);line-height:var(--mdui-typescale-body-large-line-height)}:host([active]) .headline{color:rgb(var(--mdui-color-on-secondary-container))}.description{display:none;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([disabled]) .description,:host([focused]) .description,:host([hover]) .description,:host([pressed]) .description{color:rgb(var(--mdui-color-on-surface))}.has-description .description{display:block}:host([description-line='1']) .description,:host([headline-line='1']) .headline{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([description-line='2']) .description,:host([description-line='3']) .description,:host([headline-line='2']) .headline,:host([headline-line='3']) .headline{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}:host([description-line='2']) .description,:host([headline-line='2']) .headline{-webkit-line-clamp:2}:host([description-line='3']) .description,:host([headline-line='3']) .headline{-webkit-line-clamp:3}.end-icon,.icon{display:flex;flex:0 0 auto;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);color:rgb(var(--mdui-color-on-surface-variant))}:host([disabled]) .end-icon,:host([disabled]) .icon,:host([focused]) .end-icon,:host([focused]) .icon,:host([hover]) .end-icon,:host([hover]) .icon,:host([pressed]) .end-icon,:host([pressed]) .icon{color:rgb(var(--mdui-color-on-surface))}:host([active]) .end-icon,:host([active]) .icon{color:rgb(var(--mdui-color-on-secondary-container))}.end-icon mdui-icon,.icon mdui-icon,.is-end-icon ::slotted([slot=end-icon]),.is-icon ::slotted([slot=icon]){font-size:1.5rem}.has-icon .icon{margin-right:1rem}.has-icon ::slotted(mdui-checkbox[slot=icon]),.has-icon ::slotted(mdui-radio[slot=icon]){margin-left:-.5rem}.has-end-icon .end-icon{margin-left:1rem}.has-end-icon ::slotted(mdui-checkbox[slot=end-icon]),.has-end-icon ::slotted(mdui-radio[slot=end-icon]){margin-right:-.5rem}`;

package/components/list/list-item.js

@@ -103,43 +103,24 @@ let ListItem = class ListItem extends AnchorMixin(RippleMixin(FocusableMixin(Mdu
             // end-icon slot 中的元素是否为 mdui-icon 或 mdui-icon-* 组件
             'is-end-icon': getNodeName(this.endIconElements[0]).startsWith('mdui-icon-'),
         });
-        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,
                 content: this.renderInner(),
                 part: 'container',
                 refDirective: ref(this.itemRef),
             })
-            : html `<div part="container" class="${className}" ${ref(this.itemRef)}>
-            ${this.renderInner()}
-          </div>`}`;
+            : html `<div part="container" class="${className}" ${ref(this.itemRef)}>${this.renderInner()}</div>`}`;
     }
     renderInner() {
         const hasDefaultSlot = this.hasSlotController.test('[default]');
-        return html `<slot name="custom">
-      <slot name="icon" part="icon" class="icon">
-        ${this.icon
-            ? html `<mdui-icon name=${this.icon}></mdui-icon>`
-            : nothingTemplate}
-      </slot>
-      <div part="body" class="body">
-        ${hasDefaultSlot
+        return html `<slot name="custom"><slot name="icon" part="icon" class="icon">${this.icon
+            ? html `<mdui-icon name="${this.icon}"></mdui-icon>`
+            : nothingTemplate}</slot><div part="body" class="body">${hasDefaultSlot
             ? html `<slot part="headline" class="headline"></slot>`
-            : html `<div part="headline" class="headline">${this.headline}</div>`}
-        <slot name="description" part="description" class="description">
-          ${this.description}
-        </slot>
-      </div>
-      <slot name="end-icon" part="end-icon" class="end-icon">
-        ${this.endIcon
-            ? html `<mdui-icon name=${this.endIcon}></mdui-icon>`
-            : nothingTemplate}
-      </slot>
-    </slot>`;
+            : html `<div part="headline" class="headline">${this.headline}</div>`}<slot name="description" part="description" class="description">${this.description}</slot></div><slot name="end-icon" part="end-icon" class="end-icon">${this.endIcon
+            ? html `<mdui-icon name="${this.endIcon}"></mdui-icon>`
+            : nothingTemplate}</slot></slot>`;
     }
 };
 ListItem.styles = [

package/components/list/list-style.js

@@ -1,11 +1,2 @@
 import { css } from 'lit';
-export const listStyle = css `
-  :host {
-    display: block;
-    padding: 0.5rem 0rem;
-  }
-  ::slotted(mdui-divider[middle]) {
-    margin-left: 1rem;
-    margin-right: 1.5rem;
-  }
-`;
+export const listStyle = css `:host{display:block;padding:.5rem 0}::slotted(mdui-divider[middle]){margin-left:1rem;margin-right:1.5rem}`;

package/components/list/list-subheader-style.js

@@ -1,20 +1,2 @@
 import { css } from 'lit';
-export const listSubheaderStyle = css `
-  /* 规范中没有该描述 */
-  :host {
-    display: block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    cursor: default;
-    color: rgb(var(--mdui-color-on-surface-variant));
-    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);
-    padding-left: 1rem;
-    padding-right: 1.5rem;
-    height: 3.5rem;
-    line-height: 3.5rem;
-  }
-`;
+export const listSubheaderStyle = css `:host{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:default;color:rgb(var(--mdui-color-on-surface-variant));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);padding-left:1rem;padding-right:1.5rem;height:3.5rem;line-height:3.5rem}`;

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

@@ -1,126 +1,2 @@
 import { css } from 'lit';
-export const menuItemStyle = css `
-  :host {
-    position: relative;
-    display: block;
-  }
-  :host([selected]) {
-    background-color: rgba(var(--mdui-color-primary), 12%);
-  }
-  :host([disabled]) {
-    pointer-events: none;
-  }
-  .container {
-    cursor: pointer;
-    -webkit-user-select: none;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
-  }
-  :host([disabled]) .container {
-    cursor: default;
-    opacity: 0.38;
-  }
-  .preset {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-    height: 3rem;
-    padding: 0rem 0.75rem;
-  }
-  .preset.dense {
-    height: 2rem;
-  }
-  .label-container {
-    flex: 1 1 100%;
-    min-width: 0;
-  }
-  .label {
-    display: block;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    color: rgb(var(--mdui-color-on-surface));
-    font-size: var(--mdui-typescale-label-large-size);
-    font-weight: var(--mdui-typescale-label-large-weight);
-    letter-spacing: var(--mdui-typescale-label-large-tracking);
-  }
-  .icon,
-  .selected-icon,
-  .end-icon,
-  .end-text {
-    display: none;
-    flex: 0 0 auto;
-    color: rgb(var(--mdui-color-on-surface-variant));
-  }
-  .has-icon .icon,
-  .has-icon .selected-icon,
-  .has-end-icon .end-icon,
-  .has-end-text .end-text {
-    display: flex;
-  }
-  .icon,
-  .selected-icon,
-  .end-icon {
-    font-size: 1.5rem;
-  }
-  .icon::slotted(mdui-avatar),
-  .selected-icon::slotted(mdui-avatar),
-  .end-icon::slotted(mdui-avatar) {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-  .dense .icon,
-  .dense .selected-icon,
-  .dense .end-icon {
-    font-size: 1.125rem;
-  }
-  .dense .icon::slotted(mdui-avatar),
-  .dense .selected-icon::slotted(mdui-avatar),
-  .dense .end-icon::slotted(mdui-avatar) {
-    width: 1.125rem;
-    height: 1.125rem;
-  }
-  .icon .i,
-  .selected-icon .i,
-  .end-icon .i,
-  ::slotted([slot='icon']),
-  ::slotted([slot='selected-icon']),
-  ::slotted([slot='end-icon']) {
-    font-size: inherit;
-  }
-  .end-text {
-    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);
-  }
-  .icon,
-  .selected-icon {
-    margin-right: 0.75rem;
-  }
-  .end-icon,
-  .end-text {
-    margin-left: 0.75rem;
-  }
-  .arrow-right {
-    color: rgb(var(--mdui-color-on-surface));
-  }
-  .submenu {
-    --shape-corner: var(--mdui-shape-corner-extra-small);
-    display: block;
-    position: absolute;
-    z-index: 1;
-    border-radius: var(--shape-corner);
-    background-color: rgb(var(--mdui-color-surface-container));
-    box-shadow: var(--mdui-elevation-level2);
-    min-width: 7rem;
-    max-width: 17.5rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface);
-  }
-  .submenu::slotted(mdui-divider) {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-`;
+export const menuItemStyle = css `:host{position:relative;display:block}:host([selected]){background-color:rgba(var(--mdui-color-primary),12%)}:host([disabled]){pointer-events:none}.container{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host([disabled]) .container{cursor:default;opacity:.38}.preset{display:flex;align-items:center;text-decoration:none;height:3rem;padding:0 .75rem}.preset.dense{height:2rem}.label-container{flex:1 1 100%;min-width:0}.label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-label-large-size);font-weight:var(--mdui-typescale-label-large-weight);letter-spacing:var(--mdui-typescale-label-large-tracking)}.end-icon,.end-text,.icon,.selected-icon{display:none;flex:0 0 auto;color:rgb(var(--mdui-color-on-surface-variant))}.has-end-icon .end-icon,.has-end-text .end-text,.has-icon .icon,.has-icon .selected-icon{display:flex}.end-icon,.icon,.selected-icon{font-size:1.5rem}.end-icon::slotted(mdui-avatar),.icon::slotted(mdui-avatar),.selected-icon::slotted(mdui-avatar){width:1.5rem;height:1.5rem}.dense .end-icon,.dense .icon,.dense .selected-icon{font-size:1.125rem}.dense .end-icon::slotted(mdui-avatar),.dense .icon::slotted(mdui-avatar),.dense .selected-icon::slotted(mdui-avatar){width:1.125rem;height:1.125rem}.end-icon .i,.icon .i,.selected-icon .i,::slotted([slot=end-icon]),::slotted([slot=icon]),::slotted([slot=selected-icon]){font-size:inherit}.end-text{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)}.icon,.selected-icon{margin-right:.75rem}.end-icon,.end-text{margin-left:.75rem}.arrow-right{color:rgb(var(--mdui-color-on-surface))}.submenu{--shape-corner:var(--mdui-shape-corner-extra-small);display:block;position:absolute;z-index:1;border-radius:var(--shape-corner);background-color:rgb(var(--mdui-color-surface-container));box-shadow:var(--mdui-elevation-level2);min-width:7rem;max-width:17.5rem;padding-top:.5rem;padding-bottom:.5rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}.submenu::slotted(mdui-divider){margin-top:.5rem;margin-bottom:.5rem}`;

package/components/menu/menu-item.js

@@ -208,11 +208,7 @@ let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMixin(Mdu
             'has-end-text': hasEndText,
             'has-end-icon': hasEndIcon,
         });
-        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({
                 part: 'container',
                 className,
@@ -220,20 +216,7 @@ let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMixin(Mdu
                 refDirective: ref(this.containerRef),
                 tabIndex: this.focusable ? 0 : -1,
             })
-            : html `<div
-            part="container"
-            ${ref(this.containerRef)}
-            class=${className}
-          >
-            ${this.renderInner(useDefaultEndIcon, hasIcon)}
-          </div>`}
-      ${when(hasSubmenu, () => html `<slot
-            name="submenu"
-            ${ref(this.submenuRef)}
-            part="submenu"
-            class="submenu"
-            hidden
-          ></slot>`)}`;
+            : html `<div part="container" ${ref(this.containerRef)} class="${className}">${this.renderInner(useDefaultEndIcon, hasIcon)}</div>`} ${when(hasSubmenu, () => html `<slot name="submenu" ${ref(this.submenuRef)} part="submenu" class="submenu" hidden></slot>`)}`;
     }
     /**
      * 点击子菜单外面的区域，关闭子菜单
@@ -361,42 +344,17 @@ let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMixin(Mdu
         });
     }
     renderInner(useDefaultEndIcon, hasIcon) {
-        return html `<slot name="custom">
-      ${this.selected
-            ? html `<slot
-            name="selected-icon"
-            part="selected-icon"
-            class="selected-icon"
-          >
-            ${this.selectedIcon
-                ? html `<mdui-icon
-                  name=${this.selectedIcon}
-                  class="i"
-                ></mdui-icon>`
-                : html `<mdui-icon-check class="i"></mdui-icon-check>`}
-          </slot>`
-            : html `<slot name="icon" part="icon" class="icon">
-            ${hasIcon
-                ? html `<mdui-icon name=${this.icon} class="i"></mdui-icon>`
-                : nothingTemplate}
-          </slot>`}
-      <div class="label-container">
-        <slot part="label" class="label"></slot>
-      </div>
-      <slot name="end-text" part="end-text" class="end-text">
-        ${this.endText}
-      </slot>
-      ${useDefaultEndIcon
-            ? html `<mdui-icon-arrow-right
-            part="end-icon"
-            class="end-icon arrow-right"
-          ></mdui-icon-arrow-right>`
-            : html `<slot name="end-icon" part="end-icon" class="end-icon">
-            ${this.endIcon
-                ? html `<mdui-icon name=${this.endIcon}></mdui-icon>`
-                : nothingTemplate}
-          </slot>`}
-    </slot>`;
+        return html `<slot name="custom">${this.selected
+            ? html `<slot name="selected-icon" part="selected-icon" class="selected-icon">${this.selectedIcon
+                ? html `<mdui-icon name="${this.selectedIcon}" class="i"></mdui-icon>`
+                : html `<mdui-icon-check class="i"></mdui-icon-check>`}</slot>`
+            : html `<slot name="icon" part="icon" class="icon">${hasIcon
+                ? html `<mdui-icon name="${this.icon}" class="i"></mdui-icon>`
+                : nothingTemplate}</slot>`}<div class="label-container"><slot part="label" class="label"></slot></div><slot name="end-text" part="end-text" class="end-text">${this.endText}</slot>${useDefaultEndIcon
+            ? html `<mdui-icon-arrow-right part="end-icon" class="end-icon arrow-right"></mdui-icon-arrow-right>`
+            : html `<slot name="end-icon" part="end-icon" class="end-icon">${this.endIcon
+                ? html `<mdui-icon name="${this.endIcon}"></mdui-icon>`
+                : nothingTemplate}</slot>`}</slot>`;
     }
 };
 MenuItem.styles = [

package/components/menu/menu-style.js

@@ -1,20 +1,2 @@
 import { css } from 'lit';
-export const menuStyle = css `
-  :host {
-    --shape-corner: var(--mdui-shape-corner-extra-small);
-    position: relative;
-    display: block;
-    border-radius: var(--shape-corner);
-    background-color: rgb(var(--mdui-color-surface-container));
-    box-shadow: var(--mdui-elevation-level2);
-    min-width: 7rem;
-    max-width: 17.5rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface);
-  }
-  ::slotted(mdui-divider) {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-`;
+export const menuStyle = css `:host{--shape-corner:var(--mdui-shape-corner-extra-small);position:relative;display:block;border-radius:var(--shape-corner);background-color:rgb(var(--mdui-color-surface-container));box-shadow:var(--mdui-elevation-level2);min-width:7rem;max-width:17.5rem;padding-top:.5rem;padding-bottom:.5rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}::slotted(mdui-divider){margin-top:.5rem;margin-bottom:.5rem}`;

package/components/menu/menu.js

@@ -226,11 +226,7 @@ let Menu = class Menu extends MduiElement {
         });
     }
     render() {
-        return html `<slot
-      @slotchange=${this.onSlotChange}
-      @click=${this.onClick}
-      @keydown=${this.onKeyDown}
-    ></slot>`;
+        return html `<slot @slotchange="${this.onSlotChange}" @click="${this.onClick}" @keydown="${this.onKeyDown}"></slot>`;
     }
     setSelectedKeys(selectedKeys) {
         if (!arraysEqualIgnoreOrder(this.selectedKeys, selectedKeys)) {