mdui 2.0.4 → 2.0.5

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

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

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

@@ -86,20 +86,36 @@ 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,2 +1,29 @@
 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,7 +89,10 @@ 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,7 +310,18 @@ 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,2 +1,67 @@
 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([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)}`;
+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);
+  }
+`;

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

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

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

@@ -91,17 +91,36 @@ 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,2 +1,80 @@
 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:.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}`;
+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;
+  }
+`;

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

@@ -155,7 +155,16 @@ 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,2 +1,21 @@
 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:0 0 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: 0rem 0rem 0rem 0.625rem;
+  }
+`;

package/components/radio/radio-group.js

@@ -154,7 +154,25 @@ 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，仅有一个可聚焦