mdui 2.0.3 → 2.0.5

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.d.ts

@@ -12,7 +12,7 @@ import type { Ripple } from '../ripple/index.js';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 declare const MenuItem_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/anchor.js").AnchorMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof MduiElement;
 /**
- * @summary 菜单项组件
+ * @summary 菜单项组件。需配合 `<mdui-menu>` 组件使用
  *
  * ```html
  * <mdui-menu>
@@ -47,17 +47,17 @@ declare const MenuItem_base: import("@open-wc/dedupe-mixin").Constructor<import(
 export declare class MenuItem extends MenuItem_base<MenuItemEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 该菜单项的值
+     * 菜单项的值
      */
     value?: string;
     /**
-     * 是否禁用该菜单项
+     * 是否禁用菜单项
      */
     disabled: boolean;
     /**
      * 左侧的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
      *
-     * 如果需要在左侧留出一个图标的位置，可以传入空字符串进行占位
+     * 如果左侧不需要显示图标，但需要预留一个图标的位置，可传入空字符串进行占位
      */
     icon?: string;
     /**

package/components/menu/menu-item.js

@@ -30,7 +30,7 @@ import '../icon.js';
 import { RippleMixin } from '../ripple/ripple-mixin.js';
 import { menuItemStyle } from './menu-item-style.js';
 /**
- * @summary 菜单项组件
+ * @summary 菜单项组件。需配合 `<mdui-menu>` 组件使用
  *
  * ```html
  * <mdui-menu>
@@ -66,7 +66,7 @@ let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMixin(Mdu
     constructor() {
         super();
         /**
-         * 是否禁用该菜单项
+         * 是否禁用菜单项
          */
         this.disabled = false;
         /**
@@ -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.d.ts

@@ -15,7 +15,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * * `Enter` - 包含子菜单时，打开子菜单；为链接时，跳转链接
  * * `Escape` - 子菜单已打开时，关闭子菜单
  *
- * @summary 菜单组件。需与 `<mdui-menu-item>` 组件配合使用
+ * @summary 菜单组件。需配合 `<mdui-menu-item>` 组件使用
  *
  * ```html
  * <mdui-menu>
@@ -24,49 +24,46 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * </mdui-menu>
  * ```
  *
- * @event change - 菜单项的选中状态变化时触发
+ * @event change - 菜单项选中状态变化时触发
  *
  * @slot - 子菜单项（`<mdui-menu-item>`）、分割线（[`<mdui-divider>`](/docs/2/components/divider)）等元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 export declare class Menu extends MduiElement<MenuEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 菜单项的可选中状态。默认为不可选中。可选值为：
+     * 菜单项的可选状态。默认不可选。可选值包括：
      *
-     * * `single`：最多只能选中一个
-     * * `multiple`：可以选中多个
+     * * `single`：单选
+     * * `multiple`：多选
      */
-    selects?: /*最多只能选中一个*/ 'single' | /*可以选中多个*/ 'multiple';
+    selects?: /*单选*/ 'single' | /*多选*/ 'multiple';
     /**
-     * 当前选中的 `<mdui-menu-item>` 的值
+     * 当前选中的 `<mdui-menu-item>` 的值。
      *
-     * Note:
-     * 该属性的 HTML 属性始终为字符串，且仅在 `selects="single"` 时可以通过 HTML 属性设置初始值；
-     * 该属性的 JavaScript 属性值在 `selects="single"` 时为字符串、在 `selects="multiple"` 时为字符串数组。
-     * 所以，在 `selects="multiple"` 时，如果要修改该值，只能通过修改 JavaScript 属性值实现。
+     * **Note**：该属性的 HTML 属性始终为字符串，仅在 `selects="single"` 时可通过 HTML 属性设置初始值；该属性的 JavaScript 属性值在 `selects="single"` 时为字符串，在 `selects="multiple"` 时为字符串数组。因此，在 `selects="multiple"` 时，若要修改该值，只能通过修改 JavaScript 属性值实现。
      */
     value?: string | string[];
     /**
-     * 菜单项是否使用更紧凑的布局
+     * 菜单项是否使用紧凑布局
      */
     dense: boolean;
     /**
-     * 子菜单的触发方式，支持传入多个值，用空格分隔。可选值为：
+     * 子菜单的触发方式，支持多个值，用空格分隔。可选值包括：
      *
      * * `click`：点击菜单项时打开子菜单
      * * `hover`：鼠标悬浮到菜单项上时打开子菜单
      * * `focus`：聚焦到菜单项上时打开子菜单
-     * * `manual`：使用了该值时，只能使用编程方式打开和关闭子菜单，且不能再指定其他触发方式
+     * * `manual`：仅能通过编程方式打开和关闭子菜单，不能再指定其他触发方式
      */
-    submenuTrigger: /*点击菜单项时打开子菜单*/ 'click' | /*鼠标悬浮到菜单项上时打开子菜单*/ 'hover' | /*聚焦到菜单项上时打开子菜单*/ 'focus' | /*使用了该值时，只能使用编程方式打开和关闭子菜单，且不能再指定其他触发方式*/ 'manual' | string;
+    submenuTrigger: /*点击菜单项时打开子菜单*/ 'click' | /*鼠标悬浮到菜单项上时打开子菜单*/ 'hover' | /*聚焦到菜单项上时打开子菜单*/ 'focus' | /*仅能通过编程方式打开和关闭子菜单，不能再指定其他触发方式*/ 'manual' | string;
     /**
-     * 通过 hover 触发子菜单打开时的延时，单位为毫秒
+     * 鼠标悬浮触发子菜单打开的延时，单位毫秒
      */
     submenuOpenDelay: number;
     /**
-     * 通过 hover 触发子菜单关闭时的延时，单位为毫秒
+     * 鼠标悬浮触发子菜单关闭的延时，单位毫秒
      */
     submenuCloseDelay: number;
     private selectedKeys;

package/components/menu/menu.js

@@ -26,7 +26,7 @@ import { menuStyle } from './menu-style.js';
  * * `Enter` - 包含子菜单时，打开子菜单；为链接时，跳转链接
  * * `Escape` - 子菜单已打开时，关闭子菜单
  *
- * @summary 菜单组件。需与 `<mdui-menu-item>` 组件配合使用
+ * @summary 菜单组件。需配合 `<mdui-menu-item>` 组件使用
  *
  * ```html
  * <mdui-menu>
@@ -35,34 +35,34 @@ import { menuStyle } from './menu-style.js';
  * </mdui-menu>
  * ```
  *
- * @event change - 菜单项的选中状态变化时触发
+ * @event change - 菜单项选中状态变化时触发
  *
  * @slot - 子菜单项（`<mdui-menu-item>`）、分割线（[`<mdui-divider>`](/docs/2/components/divider)）等元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 let Menu = class Menu extends MduiElement {
     constructor() {
         super(...arguments);
         /**
-         * 菜单项是否使用更紧凑的布局
+         * 菜单项是否使用紧凑布局
          */
         this.dense = false;
         /**
-         * 子菜单的触发方式，支持传入多个值，用空格分隔。可选值为：
+         * 子菜单的触发方式，支持多个值，用空格分隔。可选值包括：
          *
          * * `click`：点击菜单项时打开子菜单
          * * `hover`：鼠标悬浮到菜单项上时打开子菜单
          * * `focus`：聚焦到菜单项上时打开子菜单
-         * * `manual`：使用了该值时，只能使用编程方式打开和关闭子菜单，且不能再指定其他触发方式
+         * * `manual`：仅能通过编程方式打开和关闭子菜单，不能再指定其他触发方式
          */
         this.submenuTrigger = 'click hover';
         /**
-         * 通过 hover 触发子菜单打开时的延时，单位为毫秒
+         * 鼠标悬浮触发子菜单打开的延时，单位毫秒
          */
         this.submenuOpenDelay = 200;
         /**
-         * 通过 hover 触发子菜单关闭时的延时，单位为毫秒
+         * 鼠标悬浮触发子菜单关闭的延时，单位毫秒
          */
         this.submenuCloseDelay = 200;
         // 因为 menu-item 的 value 可能会重复，所有在每一个 menu-item 元素上都加了一个唯一的 key 属性，通过 selectedKeys 来记录选中状态的 key
@@ -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)) {

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.d.ts

@@ -4,7 +4,7 @@ import type { Ripple } from '../ripple/index.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 declare const NavigationBarItem_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/anchor.js").AnchorMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("../ripple/ripple-mixin.js").RippleMixinInterface> & import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/focusable.js").FocusableMixinInterface> & typeof MduiElement;
 /**
- * @summary 底部导航栏项组件。需与 `<mdui-navigation-bar>` 组件配合使用
+ * @summary 底部导航栏项组件。需配合 `<mdui-navigation-bar>` 组件使用
  *
  * ```html
  * <mdui-navigation-bar>
@@ -14,7 +14,7 @@ declare const NavigationBarItem_base: import("@open-wc/dedupe-mixin").Constructo
  * </mdui-navigation-bar>
  * ```
  *
- * @slot - 文本
+ * @slot - 导航项文本
  * @slot icon - 图标
  * @slot active-icon - 激活状态的图标元素
  * @slot badge - 徽标
@@ -27,9 +27,9 @@ declare const NavigationBarItem_base: import("@open-wc/dedupe-mixin").Constructo
  * @csspart badge - 徽标
  * @csspart icon - 图标
  * @csspart active-icon - 激活状态的图标
- * @csspart label - 文本
+ * @csspart label - 导航项文本
  *
- * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 export declare class NavigationBarItem extends NavigationBarItem_base<NavigationBarItemEventMap> {
     static styles: CSSResultGroup;
@@ -42,7 +42,7 @@ export declare class NavigationBarItem extends NavigationBarItem_base<Navigation
      */
     activeIcon?: string;
     /**
-     * 该导航项的值
+     * 导航项的值
      */
     value?: string;
     /**