mdui 2.0.5 → 2.1.0

package/components/navigation-bar/navigation-bar-item-style.js

@@ -1,133 +1,2 @@
 import { css } from 'lit';
-export const navigationBarItemStyle = css `
-  :host {
-    --shape-corner-indicator: var(--mdui-shape-corner-full);
-    position: relative;
-    z-index: 0;
-    flex: 1;
-    overflow: hidden;
-    min-width: 3rem;
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface-variant);
-  }
-  .container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    text-decoration: none;
-    cursor: pointer;
-    -webkit-user-select: none;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-  }
-  .container:not(.initial) {
-    transition: padding var(--mdui-motion-duration-short4)
-      var(--mdui-motion-easing-standard);
-  }
-  mdui-ripple {
-    z-index: 1;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 4rem;
-    height: 2rem;
-    margin-top: 0.75rem;
-    border-radius: var(--mdui-shape-corner-full);
-  }
-  mdui-ripple:not(.initial) {
-    transition: margin-top var(--mdui-motion-duration-short4)
-      var(--mdui-motion-easing-standard);
-  }
-  .indicator {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: transparent;
-    border-radius: var(--shape-corner-indicator);
-    height: 2rem;
-    width: 2rem;
-  }
-  :not(.initial) .indicator {
-    transition:
-      background-color var(--mdui-motion-duration-short1)
-        var(--mdui-motion-easing-standard),
-      width var(--mdui-motion-duration-short4)
-        var(--mdui-motion-easing-standard);
-  }
-  ::slotted([slot='badge']) {
-    position: absolute;
-    transform: translate(50%, -50%);
-  }
-  ::slotted([slot='badge'][variant='small']) {
-    transform: translate(0.5625rem, -0.5625rem);
-  }
-  .icon,
-  .active-icon {
-    color: rgb(var(--mdui-color-on-surface-variant));
-    font-size: 1.5rem;
-  }
-  .icon mdui-icon,
-  .active-icon mdui-icon,
-  ::slotted([slot='icon']),
-  ::slotted([slot='active']) {
-    font-size: inherit;
-  }
-  .icon {
-    display: flex;
-  }
-  .active-icon {
-    display: none;
-  }
-  .label {
-    display: flex;
-    align-items: center;
-    height: 1rem;
-    color: rgb(var(--mdui-color-on-surface-variant));
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
-    font-size: var(--mdui-typescale-label-medium-size);
-    font-weight: var(--mdui-typescale-label-medium-weight);
-    letter-spacing: var(--mdui-typescale-label-medium-tracking);
-    line-height: var(--mdui-typescale-label-medium-line-height);
-  }
-  :not(.initial) .label {
-    transition: opacity var(--mdui-motion-duration-short4)
-      var(--mdui-motion-easing-linear);
-  }
-  mdui-ripple.label-visibility-unlabeled,
-  :host(:not([active])) mdui-ripple.label-visibility-selected {
-    margin-top: 1.5rem;
-  }
-  .container.label-visibility-unlabeled,
-  :host(:not([active])) .container.label-visibility-selected {
-    padding-top: 1.5rem;
-    padding-bottom: 0rem;
-  }
-  .container.label-visibility-unlabeled .label,
-  :host(:not([active])) .container.label-visibility-selected .label {
-    opacity: 0;
-  }
-  :host([active]) {
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface);
-  }
-  :host([active]) .indicator {
-    width: 4rem;
-    background-color: rgb(var(--mdui-color-secondary-container));
-  }
-  :host([active]) .icon,
-  :host([active]) .active-icon {
-    color: rgb(var(--mdui-color-on-secondary-container));
-  }
-  :host([active]) .has-active-icon .active-icon {
-    display: flex;
-  }
-  :host([active]) .has-active-icon .icon {
-    display: none;
-  }
-  :host([active]) .label {
-    color: rgb(var(--mdui-color-on-surface));
-  }
-`;
+export const navigationBarItemStyle = css `:host{--shape-corner-indicator:var(--mdui-shape-corner-full);position:relative;z-index:0;flex:1;overflow:hidden;min-width:3rem;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;padding-top:.75rem;padding-bottom:.75rem}.container:not(.initial){transition:padding var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}mdui-ripple{z-index:1;left:50%;transform:translateX(-50%);width:4rem;height:2rem;margin-top:.75rem;border-radius:var(--mdui-shape-corner-full)}mdui-ripple:not(.initial){transition:margin-top var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}.indicator{position:relative;display:flex;align-items:center;justify-content:center;background-color:transparent;border-radius:var(--shape-corner-indicator);height:2rem;width:2rem}:not(.initial) .indicator{transition:background-color var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard),width var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}::slotted([slot=badge]){position:absolute;transform:translate(50%,-50%)}::slotted([slot=badge][variant=small]){transform:translate(.5625rem,-.5625rem)}.active-icon,.icon{color:rgb(var(--mdui-color-on-surface-variant));font-size:1.5rem}.active-icon mdui-icon,.icon mdui-icon,::slotted([slot=active]),::slotted([slot=icon]){font-size:inherit}.icon{display:flex}.active-icon{display:none}.label{display:flex;align-items:center;height:1rem;color:rgb(var(--mdui-color-on-surface-variant));margin-top:.25rem;margin-bottom:.25rem;font-size:var(--mdui-typescale-label-medium-size);font-weight:var(--mdui-typescale-label-medium-weight);letter-spacing:var(--mdui-typescale-label-medium-tracking);line-height:var(--mdui-typescale-label-medium-line-height)}:not(.initial) .label{transition:opacity var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear)}:host(:not([active])) mdui-ripple.label-visibility-selected,mdui-ripple.label-visibility-unlabeled{margin-top:1.5rem}.container.label-visibility-unlabeled,:host(:not([active])) .container.label-visibility-selected{padding-top:1.5rem;padding-bottom:0}.container.label-visibility-unlabeled .label,:host(:not([active])) .container.label-visibility-selected .label{opacity:0}:host([active]){--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([active]) .indicator{width:4rem;background-color:rgb(var(--mdui-color-secondary-container))}:host([active]) .active-icon,:host([active]) .icon{color:rgb(var(--mdui-color-on-secondary-container))}:host([active]) .has-active-icon .active-icon{display:flex}:host([active]) .has-active-icon .icon{display:none}:host([active]) .label{color:rgb(var(--mdui-color-on-surface))}`;

package/components/navigation-bar/navigation-bar-item.js

@@ -86,36 +86,20 @@ let NavigationBarItem = class NavigationBarItem extends AnchorMixin(RippleMixin(
             },
             labelVisibilityClassName,
         ]);
-        return html `<mdui-ripple
-        .noRipple=${!this.active || this.noRipple}
-        class=${labelVisibilityClassName}
-        ${ref(this.rippleRef)}
-      ></mdui-ripple>
-      ${this.href
+        return html `<mdui-ripple .noRipple="${!this.active || this.noRipple}" class="${labelVisibilityClassName}" ${ref(this.rippleRef)}></mdui-ripple>${this.href
             ? this.renderAnchor({
                 part: 'container',
                 className,
                 content: this.renderInner(),
             })
-            : html `<div part="container" class=${className}>
-            ${this.renderInner()}
-          </div>`} `;
+            : html `<div part="container" class="${className}">${this.renderInner()}</div>`}`;
     }
     renderInner() {
-        return html `<div part="indicator" class="indicator">
-        <slot name="badge" part="badge" class="badge"></slot>
-        <slot name="active-icon" part="active-icon" class="active-icon">
-          ${this.activeIcon
-            ? html `<mdui-icon name=${this.activeIcon}></mdui-icon>`
-            : nothingTemplate}
-        </slot>
-        <slot name="icon" part="icon" class="icon">
-          ${this.icon
-            ? html `<mdui-icon name=${this.icon}></mdui-icon>`
-            : nothingTemplate}
-        </slot>
-      </div>
-      <slot part="label" class="label"></slot>`;
+        return html `<div part="indicator" class="indicator"><slot name="badge" part="badge" class="badge"></slot><slot name="active-icon" part="active-icon" class="active-icon">${this.activeIcon
+            ? html `<mdui-icon name="${this.activeIcon}"></mdui-icon>`
+            : nothingTemplate}</slot><slot name="icon" part="icon" class="icon">${this.icon
+            ? html `<mdui-icon name="${this.icon}"></mdui-icon>`
+            : nothingTemplate}</slot></div><slot part="label" class="label"></slot>`;
     }
 };
 NavigationBarItem.styles = [

package/components/navigation-bar/navigation-bar-style.js

@@ -1,29 +1,2 @@
 import { css } from 'lit';
-export const navigationBarStyle = css `
-  :host {
-    --shape-corner: var(--mdui-shape-corner-none);
-    --z-index: 2000;
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    flex: 0 0 auto;
-    overflow: hidden;
-    border-radius: var(--shape-corner) var(--shape-corner) 0 0;
-    z-index: var(--z-index);
-    transition-property: transform;
-    transition-duration: var(--mdui-motion-duration-long2);
-    transition-timing-function: var(--mdui-motion-easing-emphasized);
-    height: 5rem;
-    background-color: rgb(var(--mdui-color-surface));
-    box-shadow: var(--mdui-elevation-level2);
-  }
-  :host([scroll-target]:not([scroll-target=''])) {
-    position: absolute;
-  }
-  :host([hide]) {
-    transform: translateY(5.625rem);
-    transition-duration: var(--mdui-motion-duration-short4);
-  }
-`;
+export const navigationBarStyle = css `:host{--shape-corner:var(--mdui-shape-corner-none);--z-index:2000;position:fixed;right:0;bottom:0;left:0;display:flex;flex:0 0 auto;overflow:hidden;border-radius:var(--shape-corner) var(--shape-corner) 0 0;z-index:var(--z-index);transition-property:transform;transition-duration:var(--mdui-motion-duration-long2);transition-timing-function:var(--mdui-motion-easing-emphasized);height:5rem;background-color:rgb(var(--mdui-color-surface));box-shadow:var(--mdui-elevation-level2)}:host([scroll-target]:not([scroll-target=''])){position:absolute}:host([hide]){transform:translateY(5.625rem);transition-duration:var(--mdui-motion-duration-short4)}`;

package/components/navigation-bar/navigation-bar.js

@@ -89,10 +89,7 @@ let NavigationBar = class NavigationBar extends ScrollBehaviorMixin(LayoutItemBa
         });
     }
     render() {
-        return html `<slot
-      @slotchange=${this.onSlotChange}
-      @click=${this.onClick}
-    ></slot>`;
+        return html `<slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot>`;
     }
     /**
      * 滚动行为

package/components/navigation-drawer/index.js

@@ -310,18 +310,7 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
         });
     }
     render() {
-        return html `${when(this.isModal, () => html `<div
-            ${ref(this.overlayRef)}
-            part="overlay"
-            class="overlay"
-            @click=${this.onOverlayClick}
-          ></div>`)}
-      <slot
-        ${ref(this.panelRef)}
-        part="panel"
-        class="panel"
-        tabindex="0"
-      ></slot>`;
+        return html `${when(this.isModal, () => html `<div ${ref(this.overlayRef)} part="overlay" class="overlay" @click="${this.onOverlayClick}"></div>`)}<slot ${ref(this.panelRef)} part="panel" class="panel" tabindex="0"></slot>`;
     }
     onOverlayClick() {
         this.emit('overlay-click');

package/components/navigation-drawer/style.js

@@ -1,67 +1,2 @@
 import { css } from 'lit';
-export const style = css `
-  :host {
-    --shape-corner: var(--mdui-shape-corner-large);
-    --z-index: 2200;
-    display: none;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-    width: 22.5rem;
-  }
-  :host([placement='right']) {
-    left: initial;
-    right: 0;
-  }
-  :host([modal]),
-  :host([mobile]) {
-    top: 0 !important;
-    right: 0;
-    bottom: 0 !important;
-    width: initial;
-    z-index: var(--z-index);
-  }
-  :host([placement='right'][modal]),
-  :host([placement='right'][mobile]) {
-    left: 0;
-  }
-  :host([contained]) {
-    position: absolute;
-  }
-  .overlay {
-    position: absolute;
-    inset: 0;
-    z-index: inherit;
-    background-color: rgba(var(--mdui-color-scrim), 0.4);
-  }
-  .panel {
-    display: block;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    overflow: auto;
-    z-index: inherit;
-    background-color: rgb(var(--mdui-color-surface));
-    box-shadow: var(--mdui-elevation-level0);
-  }
-  :host([modal]) .panel,
-  :host([mobile]) .panel {
-    border-radius: 0 var(--shape-corner) var(--shape-corner) 0;
-    max-width: 80%;
-    width: 22.5rem;
-    background-color: rgb(var(--mdui-color-surface-container-low));
-    box-shadow: var(--mdui-elevation-level1);
-  }
-  :host([placement='right']) .panel {
-    left: initial;
-    right: 0;
-  }
-  :host([placement='right'][modal]) .panel,
-  :host([placement='right'][mobile]) .panel {
-    border-radius: var(--shape-corner) 0 0 var(--shape-corner);
-  }
-`;
+export const style = css `:host{--shape-corner:var(--mdui-shape-corner-large);--z-index:2200;display:none;position:fixed;top:0;bottom:0;left:0;z-index:1;width:22.5rem}:host([placement=right]){left:initial;right:0}:host([mobile]),:host([modal]){top:0!important;right:0;bottom:0!important;width:initial;z-index:var(--z-index)}:host([placement=right][mobile]),:host([placement=right][modal]){left:0}:host([contained]){position:absolute}.overlay{position:absolute;inset:0;z-index:inherit;background-color:rgba(var(--mdui-color-scrim),.4)}.panel{display:block;position:absolute;top:0;bottom:0;left:0;width:100%;overflow:auto;z-index:inherit;background-color:rgb(var(--mdui-color-surface));box-shadow:var(--mdui-elevation-level0)}:host([mobile]) .panel,:host([modal]) .panel{border-radius:0 var(--shape-corner) var(--shape-corner) 0;max-width:80%;width:22.5rem;background-color:rgb(var(--mdui-color-surface-container-low));box-shadow:var(--mdui-elevation-level1)}:host([placement=right]) .panel{left:initial;right:0}:host([placement=right][mobile]) .panel,:host([placement=right][modal]) .panel{border-radius:var(--shape-corner) 0 0 var(--shape-corner)}`;

package/components/navigation-rail/navigation-rail-item-style.js

@@ -1,123 +1,2 @@
 import { css } from 'lit';
-export const navigationRailItemStyle = css `
-  :host {
-    --shape-corner-indicator: var(--mdui-shape-corner-full);
-    position: relative;
-    z-index: 0;
-    width: 100%;
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface-variant);
-  }
-  .container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-decoration: none;
-    cursor: pointer;
-    -webkit-user-select: none;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
-    height: 3.5rem;
-  }
-  .container:not(.initial) {
-    transition: padding var(--mdui-motion-duration-short4)
-      var(--mdui-motion-easing-standard);
-  }
-  mdui-ripple {
-    z-index: 1;
-    width: 3.5rem;
-    height: 2rem;
-    border-radius: var(--mdui-shape-corner-full);
-  }
-  .container:not(.has-label) + mdui-ripple {
-    height: 3.5rem;
-  }
-  .indicator {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: transparent;
-    border-radius: var(--shape-corner-indicator);
-    height: 2rem;
-    width: 2rem;
-  }
-  :not(.initial) .indicator {
-    transition:
-      background-color var(--mdui-motion-duration-short1)
-        var(--mdui-motion-easing-standard),
-      width var(--mdui-motion-duration-short4)
-        var(--mdui-motion-easing-standard),
-      height var(--mdui-motion-duration-short4)
-        var(--mdui-motion-easing-standard);
-  }
-  ::slotted([slot='badge']) {
-    position: absolute;
-    transform: translate(50%, -50%);
-  }
-  .placement-right::slotted([slot='badge']) {
-    transform: translate(-50%, -50%);
-  }
-  ::slotted([slot='badge'][variant='small']) {
-    transform: translate(0.5625rem, -0.5625rem);
-  }
-  .placement-right::slotted([slot='badge'][variant='small']) {
-    transform: translate(-0.5625rem, -0.5625rem);
-  }
-  .icon,
-  .active-icon {
-    color: rgb(var(--mdui-color-on-surface-variant));
-    font-size: 1.5rem;
-  }
-  .icon mdui-icon,
-  .active-icon mdui-icon,
-  ::slotted([slot='icon']),
-  ::slotted([slot='active-icon']) {
-    font-size: inherit;
-  }
-  .icon {
-    display: flex;
-  }
-  .active-icon {
-    display: none;
-  }
-  .label {
-    display: flex;
-    align-items: center;
-    height: 1rem;
-    color: rgb(var(--mdui-color-on-surface-variant));
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
-    font-size: var(--mdui-typescale-label-medium-size);
-    font-weight: var(--mdui-typescale-label-medium-weight);
-    letter-spacing: var(--mdui-typescale-label-medium-tracking);
-    line-height: var(--mdui-typescale-label-medium-line-height);
-  }
-  :not(.initial) .label {
-    transition: opacity var(--mdui-motion-duration-short4)
-      var(--mdui-motion-easing-linear);
-  }
-  :host([active]) {
-    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface);
-  }
-  :host([active]) .indicator {
-    width: 3.5rem;
-    background-color: rgb(var(--mdui-color-secondary-container));
-  }
-  :host([active]) :not(.has-label) .indicator {
-    height: 3.5rem;
-  }
-  :host([active]) .icon,
-  :host([active]) .active-icon {
-    color: rgb(var(--mdui-color-on-secondary-container));
-  }
-  :host([active]) .has-active-icon .active-icon {
-    display: flex;
-  }
-  :host([active]) .has-active-icon .icon {
-    display: none;
-  }
-  :host([active]) .label {
-    color: rgb(var(--mdui-color-on-surface));
-  }
-`;
+export const navigationRailItemStyle = css `:host{--shape-corner-indicator:var(--mdui-shape-corner-full);position:relative;z-index:0;width:100%;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;height:3.5rem}.container:not(.initial){transition:padding var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}mdui-ripple{z-index:1;width:3.5rem;height:2rem;border-radius:var(--mdui-shape-corner-full)}.container:not(.has-label)+mdui-ripple{height:3.5rem}.indicator{position:relative;display:flex;align-items:center;justify-content:center;background-color:transparent;border-radius:var(--shape-corner-indicator);height:2rem;width:2rem}:not(.initial) .indicator{transition:background-color var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard),width var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard),height var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}::slotted([slot=badge]){position:absolute;transform:translate(50%,-50%)}.placement-right::slotted([slot=badge]){transform:translate(-50%,-50%)}::slotted([slot=badge][variant=small]){transform:translate(.5625rem,-.5625rem)}.placement-right::slotted([slot=badge][variant=small]){transform:translate(-.5625rem,-.5625rem)}.active-icon,.icon{color:rgb(var(--mdui-color-on-surface-variant));font-size:1.5rem}.active-icon mdui-icon,.icon mdui-icon,::slotted([slot=active-icon]),::slotted([slot=icon]){font-size:inherit}.icon{display:flex}.active-icon{display:none}.label{display:flex;align-items:center;height:1rem;color:rgb(var(--mdui-color-on-surface-variant));margin-top:.25rem;margin-bottom:.25rem;font-size:var(--mdui-typescale-label-medium-size);font-weight:var(--mdui-typescale-label-medium-weight);letter-spacing:var(--mdui-typescale-label-medium-tracking);line-height:var(--mdui-typescale-label-medium-line-height)}:not(.initial) .label{transition:opacity var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear)}:host([active]){--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([active]) .indicator{width:3.5rem;background-color:rgb(var(--mdui-color-secondary-container))}:host([active]) :not(.has-label) .indicator{height:3.5rem}:host([active]) .active-icon,:host([active]) .icon{color:rgb(var(--mdui-color-on-secondary-container))}:host([active]) .has-active-icon .active-icon{display:flex}:host([active]) .has-active-icon .icon{display:none}:host([active]) .label{color:rgb(var(--mdui-color-on-surface))}`;

package/components/navigation-rail/navigation-rail-item.js

@@ -91,36 +91,17 @@ let NavigationRailItem = class NavigationRailItem extends AnchorMixin(RippleMixi
                 className,
                 content: this.renderInner(hasDefaultSlot),
             })
-            : html `<div part="container" class=${className}>
-            ${this.renderInner(hasDefaultSlot)}
-          </div>`}
-      <mdui-ripple
-        .noRipple=${!this.active || this.noRipple}
-        ${ref(this.rippleRef)}
-      ></mdui-ripple>`;
+            : html `<div part="container" class="${className}">${this.renderInner(hasDefaultSlot)}</div>`}<mdui-ripple .noRipple="${!this.active || this.noRipple}" ${ref(this.rippleRef)}></mdui-ripple>`;
     }
     renderInner(hasDefaultSlot) {
-        return html `<div part="indicator" class="indicator">
-        <slot
-          name="badge"
-          part="badge"
-          class=${classMap({
+        return html `<div part="indicator" class="indicator"><slot name="badge" part="badge" class="${classMap({
             badge: true,
             'placement-right': this.placement === 'right',
-        })}
-        ></slot>
-        <slot name="active-icon" part="active-icon" class="active-icon">
-          ${this.activeIcon
-            ? html `<mdui-icon name=${this.activeIcon}></mdui-icon>`
-            : nothingTemplate}
-        </slot>
-        <slot name="icon" part="icon" class="icon">
-          ${this.icon
-            ? html `<mdui-icon name=${this.icon}></mdui-icon>`
-            : nothingTemplate}
-        </slot>
-      </div>
-      ${hasDefaultSlot
+        })}"></slot><slot name="active-icon" part="active-icon" class="active-icon">${this.activeIcon
+            ? html `<mdui-icon name="${this.activeIcon}"></mdui-icon>`
+            : nothingTemplate}</slot><slot name="icon" part="icon" class="icon">${this.icon
+            ? html `<mdui-icon name="${this.icon}"></mdui-icon>`
+            : nothingTemplate}</slot></div>${hasDefaultSlot
             ? html `<slot part="label" class="label"></slot>`
             : nothing}`;
     }

package/components/navigation-rail/navigation-rail-style.js

@@ -1,80 +1,2 @@
 import { css } from 'lit';
-export const navigationRailStyle = css `
-  :host {
-    --shape-corner: var(--mdui-shape-corner-none);
-    --z-index: 2000;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    border-radius: 0 var(--shape-corner) var(--shape-corner) 0;
-    z-index: var(--z-index);
-    width: 5rem;
-    background-color: rgb(var(--mdui-color-surface));
-    padding: 0.375rem 0.75rem;
-  }
-  :host([contained]) {
-    position: absolute;
-  }
-  :host([divider]) {
-    border-right: 0.0625rem solid rgb(var(--mdui-color-surface-variant));
-    width: 5.0625rem;
-  }
-  :host([placement='right']) {
-    left: initial;
-    right: 0;
-    border-radius: var(--shape-corner) 0 0 var(--shape-corner);
-  }
-  :host([placement='right'][divider]) {
-    border-right: none;
-    border-left: 0.0625rem solid rgb(var(--mdui-color-surface-variant));
-  }
-  .top,
-  .items,
-  .bottom {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-  }
-  .top {
-    margin-bottom: 1.75rem;
-  }
-  .bottom {
-    margin-top: 1.75rem;
-  }
-  ::slotted(mdui-navigation-rail-item),
-  ::slotted([slot='top']),
-  ::slotted([slot='bottom']) {
-    margin-top: 0.375rem;
-    margin-bottom: 0.375rem;
-  }
-  :host([alignment='start']) .top-spacer {
-    flex-grow: 0;
-  }
-  :host([alignment='start']) .bottom-spacer {
-    flex-grow: 1;
-  }
-  :host([alignment='end']) .top-spacer {
-    flex-grow: 1;
-  }
-  :host([alignment='end']) .bottom-spacer {
-    flex-grow: 0;
-  }
-  :host([alignment='center']) {
-    justify-content: center;
-  }
-  :host([alignment='center']) .top,
-  :host([alignment='center']) .bottom {
-    position: absolute;
-  }
-  :host([alignment='center']) .top {
-    top: 0.375rem;
-  }
-  :host([alignment='center']) .bottom {
-    bottom: 0.375rem;
-  }
-`;
+export const navigationRailStyle = css `:host{--shape-corner:var(--mdui-shape-corner-none);--z-index:2000;position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;border-radius:0 var(--shape-corner) var(--shape-corner) 0;z-index:var(--z-index);width:5rem;background-color:rgb(var(--mdui-color-surface));padding:.375rem .75rem}:host([contained]){position:absolute}:host([divider]){border-right:.0625rem solid rgb(var(--mdui-color-surface-variant));width:5.0625rem}:host([placement=right]){left:initial;right:0;border-radius:var(--shape-corner) 0 0 var(--shape-corner)}:host([placement=right][divider]){border-right:none;border-left:.0625rem solid rgb(var(--mdui-color-surface-variant))}.bottom,.items,.top{display:flex;flex-direction:column;align-items:center;width:100%}.top{margin-bottom:1.75rem}.bottom{margin-top:1.75rem}::slotted([slot=bottom]),::slotted([slot=top]),::slotted(mdui-navigation-rail-item){margin-top:.375rem;margin-bottom:.375rem}:host([alignment=start]) .top-spacer{flex-grow:0}:host([alignment=start]) .bottom-spacer{flex-grow:1}:host([alignment=end]) .top-spacer{flex-grow:1}:host([alignment=end]) .bottom-spacer{flex-grow:0}:host([alignment=center]){justify-content:center}:host([alignment=center]) .bottom,:host([alignment=center]) .top{position:absolute}:host([alignment=center]) .top{top:.375rem}:host([alignment=center]) .bottom{bottom:.375rem}`;

package/components/navigation-rail/navigation-rail.js

@@ -155,16 +155,7 @@ let NavigationRail = class NavigationRail extends LayoutItemBase {
     render() {
         const hasTopSlot = this.hasSlotController.test('top');
         const hasBottomSlot = this.hasSlotController.test('bottom');
-        return html `${when(hasTopSlot, () => html `<slot name="top" part="top" class="top"></slot>`)}
-      <span class="top-spacer"></span>
-      <slot
-        part="items"
-        class="items"
-        @slotchange=${this.onSlotChange}
-        @click=${this.onClick}
-      ></slot>
-      <span class="bottom-spacer"></span>
-      ${when(hasBottomSlot, () => html `<slot name="bottom" part="bottom" class="bottom"></slot>`)}`;
+        return html `${when(hasTopSlot, () => html `<slot name="top" part="top" class="top"></slot>`)} <span class="top-spacer"></span><slot part="items" class="items" @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot><span class="bottom-spacer"></span> ${when(hasBottomSlot, () => html `<slot name="bottom" part="bottom" class="bottom"></slot>`)}`;
     }
     onClick(event) {
         // event.button 为 0 时，为鼠标左键点击。忽略鼠标中键和右键

package/components/radio/radio-group-style.js

@@ -1,21 +1,2 @@
 import { css } from 'lit';
-export const radioGroupStyle = css `
-  :host {
-    display: inline-block;
-  }
-  fieldset {
-    border: none;
-    padding: 0;
-    margin: 0;
-    min-width: 0;
-  }
-  input {
-    position: absolute;
-    padding: 0;
-    opacity: 0;
-    pointer-events: none;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin: 0rem 0rem 0rem 0.625rem;
-  }
-`;
+export const radioGroupStyle = css `:host{display:inline-block}fieldset{border:none;padding:0;margin:0;min-width:0}input{position:absolute;padding:0;opacity:0;pointer-events:none;width:1.25rem;height:1.25rem;margin:0 0 0 .625rem}`;

package/components/radio/radio-group.js

@@ -154,25 +154,7 @@ let RadioGroup = class RadioGroup extends MduiElement {
         this.invalid = !this.inputRef.value.checkValidity();
     }
     render() {
-        return html `<fieldset>
-      <input
-        ${ref(this.inputRef)}
-        type="radio"
-        class="input"
-        name=${ifDefined(this.name)}
-        value=${ifDefined(this.value)}
-        .checked=${!!this.value}
-        .required=${this.required}
-        tabindex="-1"
-        @keydown=${this.onKeyDown}
-      />
-      <slot
-        @click=${this.onClick}
-        @keydown=${this.onKeyDown}
-        @slotchange=${this.onSlotChange}
-        @change=${this.onCheckedChange}
-      ></slot>
-    </fieldset>`;
+        return html `<fieldset><input ${ref(this.inputRef)} type="radio" class="input" name="${ifDefined(this.name)}" value="${ifDefined(this.value)}" .checked="${!!this.value}" .required="${this.required}" tabindex="-1" @keydown="${this.onKeyDown}"><slot @click="${this.onClick}" @keydown="${this.onKeyDown}" @slotchange="${this.onSlotChange}" @change="${this.onCheckedChange}"></slot></fieldset>`;
     }
     // 更新 mdui-radio 的 checked 后，需要更新可聚焦状态
     // 同一个 mdui-radio-group 中的多个 mdui-radio，仅有一个可聚焦