mdui 2.0.4 → 2.0.5

package/components/icon/style.js

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

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

@@ -1,2 +1,7 @@
 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,2 +1,8 @@
 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,2 +1,12 @@
 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,9 +29,13 @@ 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,2 +1,74 @@
 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:.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: 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;
+    }
+  }
+`;

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

@@ -1,4 +1,155 @@
 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:.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}`;
+    );
+  }
+  :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;
+  }
+`;

package/components/list/list-item.js

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

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

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

package/components/menu/menu-item.js

@@ -208,7 +208,11 @@ 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,
@@ -216,7 +220,20 @@ 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>`)}`;
     }
     /**
      * 点击子菜单外面的区域，关闭子菜单
@@ -344,17 +361,42 @@ 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,2 +1,20 @@
 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:.5rem;padding-bottom:.5rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}::slotted(mdui-divider){margin-top:.5rem;margin-bottom:.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: 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;
+  }
+`;

package/components/menu/menu.js

@@ -226,7 +226,11 @@ 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)) {