mdui 1.0.2 → 2.0.0

package/components/menu/menu-style.js

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

package/components/menu/menu.d.ts

@@ -0,0 +1,111 @@
+import { LitElement } from 'lit';
+import '@mdui/jq/methods/add.js';
+import '@mdui/jq/methods/children.js';
+import '@mdui/jq/methods/find.js';
+import '@mdui/jq/methods/get.js';
+import '@mdui/jq/methods/is.js';
+import '@mdui/jq/methods/parent.js';
+import '@mdui/jq/methods/parents.js';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+/**
+ * 键盘快捷键：
+ * * `Arrow Up` / `Arrow Down` - 使焦点在 `<mdui-menu-item>` 之间向上/向下切换
+ * * `Home` / `End` - 使焦点跳转到第一个/最后一个 `<mdui-menu-item>` 元素上
+ * * `Space` - 可选中时，选中/取消选中一项
+ * * `Enter` - 包含子菜单时，打开子菜单；为链接时，跳转链接
+ * * `Escape` - 子菜单已打开时，关闭子菜单
+ *
+ * @summary 菜单组件。需与 `<mdui-menu-item>` 组件配合使用
+ *
+ * ```html
+ * <mdui-menu>
+ * ..<mdui-menu-item>Item 1</mdui-menu-item>
+ * ..<mdui-menu-item>Item 2</mdui-menu-item>
+ * </mdui-menu>
+ * ```
+ *
+ * @event change - 菜单项的选中状态变化时触发
+ *
+ * @slot - 子菜单项（`<mdui-menu-item>`）、分割线（[`<mdui-divider>`](/docs/2/components/divider)）等元素
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+export declare class Menu extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * 菜单项的可选中状态。默认为不可选中。可选值为：
+     *
+     * * `single`：最多只能选中一个
+     * * `multiple`：可以选中多个
+     */
+    selects?: /*最多只能选中一个*/ 'single' | /*可以选中多个*/ 'multiple';
+    /**
+     * 当前选中的 `<mdui-menu-item>` 的值
+     *
+     * Note:
+     * 该属性的 HTML 属性始终为字符串，且仅在 `selects="single"` 时可以通过 HTML 属性设置初始值；
+     * 该属性的 JavaScript 属性值在 `selects="single"` 时为字符串、在 `selects="multiple"` 时为字符串数组。
+     * 所以，在 `selects="multiple"` 时，如果要修改该值，只能通过修改 JavaScript 属性值实现。
+     */
+    value?: string | string[];
+    /**
+     * 菜单项是否使用更紧凑的布局
+     */
+    dense: boolean;
+    /**
+     * 子菜单的触发方式，支持传入多个值，用空格分隔。可选值为：
+     *
+     * * `click`：点击菜单项时打开子菜单
+     * * `hover`：鼠标悬浮到菜单项上时打开子菜单
+     * * `focus`：聚焦到菜单项上时打开子菜单
+     * * `manual`：使用了该值时，只能使用编程方式打开和关闭子菜单，且不能再指定其他触发方式
+     */
+    submenuTrigger: /*点击菜单项时打开子菜单*/ 'click' | /*鼠标悬浮到菜单项上时打开子菜单*/ 'hover' | /*聚焦到菜单项上时打开子菜单*/ 'focus' | /*使用了该值时，只能使用编程方式打开和关闭子菜单，且不能再指定其他触发方式*/ 'manual' | string;
+    /**
+     * 通过 hover 触发子菜单打开时的延时，单位为毫秒
+     */
+    submenuOpenDelay: number;
+    /**
+     * 通过 hover 触发子菜单关闭时的延时，单位为毫秒
+     */
+    submenuCloseDelay: number;
+    private selectedKeys;
+    private readonly childrenItems;
+    private hasSetDefaultValue;
+    private lastActiveItems;
+    private get items();
+    private get itemsEnabled();
+    private get isSingle();
+    private get isMultiple();
+    private get isSelectable();
+    private get isSubmenu();
+    private get lastActiveItem();
+    private set lastActiveItem(value);
+    private onSlotChange;
+    private onSelectsChange;
+    private onSelectedKeysChange;
+    private onValueChange;
+    /**
+     * 将焦点设置在当前元素上
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * 从当前元素中移除焦点
+     */
+    blur(): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected render(): TemplateResult;
+    private getSiblingsItems;
+    private updateFocusable;
+    private updateSelected;
+    private selectOne;
+    private focusableOne;
+    private focusOne;
+    private onClick;
+    private onKeyDown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-menu': Menu;
+    }
+}

package/components/menu/menu.js

@@ -0,0 +1,425 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, queryAssignedElements, state, } from 'lit/decorators.js';
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/add.js';
+import '@mdui/jq/methods/children.js';
+import '@mdui/jq/methods/find.js';
+import '@mdui/jq/methods/get.js';
+import '@mdui/jq/methods/is.js';
+import '@mdui/jq/methods/parent.js';
+import '@mdui/jq/methods/parents.js';
+import { isString } from '@mdui/jq/shared/helper.js';
+import { watch } from '@mdui/shared/decorators/watch.js';
+import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
+import { delay } from '@mdui/shared/helpers/delay.js';
+import { emit } from '@mdui/shared/helpers/event.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { menuStyle } from './menu-style.js';
+/**
+ * 键盘快捷键：
+ * * `Arrow Up` / `Arrow Down` - 使焦点在 `<mdui-menu-item>` 之间向上/向下切换
+ * * `Home` / `End` - 使焦点跳转到第一个/最后一个 `<mdui-menu-item>` 元素上
+ * * `Space` - 可选中时，选中/取消选中一项
+ * * `Enter` - 包含子菜单时，打开子菜单；为链接时，跳转链接
+ * * `Escape` - 子菜单已打开时，关闭子菜单
+ *
+ * @summary 菜单组件。需与 `<mdui-menu-item>` 组件配合使用
+ *
+ * ```html
+ * <mdui-menu>
+ * ..<mdui-menu-item>Item 1</mdui-menu-item>
+ * ..<mdui-menu-item>Item 2</mdui-menu-item>
+ * </mdui-menu>
+ * ```
+ *
+ * @event change - 菜单项的选中状态变化时触发
+ *
+ * @slot - 子菜单项（`<mdui-menu-item>`）、分割线（[`<mdui-divider>`](/docs/2/components/divider)）等元素
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+export let Menu = class Menu extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 菜单项是否使用更紧凑的布局
+         */
+        this.dense = false;
+        /**
+         * 子菜单的触发方式，支持传入多个值，用空格分隔。可选值为：
+         *
+         * * `click`：点击菜单项时打开子菜单
+         * * `hover`：鼠标悬浮到菜单项上时打开子菜单
+         * * `focus`：聚焦到菜单项上时打开子菜单
+         * * `manual`：使用了该值时，只能使用编程方式打开和关闭子菜单，且不能再指定其他触发方式
+         */
+        this.submenuTrigger = 'click hover';
+        /**
+         * 通过 hover 触发子菜单打开时的延时，单位为毫秒
+         */
+        this.submenuOpenDelay = 200;
+        /**
+         * 通过 hover 触发子菜单关闭时的延时，单位为毫秒
+         */
+        this.submenuCloseDelay = 200;
+        // 因为 menu-item 的 value 可能会重复，所有在每一个 menu-item 元素上都加了一个唯一的 key 属性，通过 selectedKeys 来记录选中状态的 key
+        this.selectedKeys = [];
+        // 是否已完成初始 value 的设置。首次设置初始值时，不触发 change 事件
+        this.hasSetDefaultValue = false;
+        // 最后一次获得焦点的 menu-item 元素。为嵌套菜单时，把不同层级的 menu-item 放到对应索引位的位置
+        this.lastActiveItems = [];
+    }
+    // 菜单项元素（包含子菜单中的菜单项）
+    get items() {
+        return $(this.childrenItems)
+            .find('mdui-menu-item')
+            .add(this.childrenItems)
+            .get();
+    }
+    // 菜单项元素（不包含已禁用的，包含子菜单中的菜单项）
+    get itemsEnabled() {
+        return this.items.filter((item) => !item.disabled);
+    }
+    // 当前菜单是否为单选
+    get isSingle() {
+        return this.selects === 'single';
+    }
+    // 当前菜单是否为多选
+    get isMultiple() {
+        return this.selects === 'multiple';
+    }
+    // 当前菜单是否可选择
+    get isSelectable() {
+        return this.isSingle || this.isMultiple;
+    }
+    // 当前菜单是否为子菜单
+    get isSubmenu() {
+        return !$(this).parent().length;
+    }
+    // 最深层级的子菜单中，最后交互过的 menu-item
+    get lastActiveItem() {
+        const index = this.lastActiveItems.length
+            ? this.lastActiveItems.length - 1
+            : 0;
+        return this.lastActiveItems[index];
+    }
+    set lastActiveItem(item) {
+        const index = this.lastActiveItems.length
+            ? this.lastActiveItems.length - 1
+            : 0;
+        this.lastActiveItems[index] = item;
+    }
+    onSlotChange() {
+        this.items.forEach((item) => {
+            item.dense = this.dense;
+            item.selects = this.selects;
+            item.submenuTrigger = this.submenuTrigger;
+            item.submenuOpenDelay = this.submenuOpenDelay;
+            item.submenuCloseDelay = this.submenuCloseDelay;
+        });
+    }
+    onSelectsChange() {
+        if (!this.isSelectable && this.selectedKeys.length) {
+            this.selectedKeys = [];
+            this.onSelectedKeysChange();
+            this.onValueChange();
+        }
+        if (this.isSingle && this.selectedKeys.length > 1) {
+            this.selectedKeys = this.selectedKeys.slice(0, 1);
+            this.onSelectedKeysChange();
+            this.onValueChange();
+        }
+    }
+    onSelectedKeysChange(oldSelectedKeys) {
+        // 根据 selectedKeys 读取出对应 menu-item 的 value。页面首次渲染时，values 始终为空数组
+        const values = this.itemsEnabled
+            .filter((item) => this.selectedKeys.includes(item.key))
+            .map((item) => item.value);
+        // 如果是多选，且每一项值都不变，则视为未变更，不触发 change 事件
+        if (this.isMultiple &&
+            oldSelectedKeys &&
+            oldSelectedKeys.length === this.selectedKeys.length &&
+            oldSelectedKeys.every((v, i) => v === this.selectedKeys[i])) {
+            this.hasSetDefaultValue = true;
+            return;
+        }
+        this.value = this.isMultiple ? values : values[0] || undefined;
+        if (this.hasSetDefaultValue) {
+            emit(this, 'change');
+        }
+        else {
+            this.hasSetDefaultValue = true;
+        }
+    }
+    async onValueChange() {
+        if (!this.hasUpdated) {
+            await this.updateComplete;
+        }
+        // 根据 value 找出对应的 menu-item，并把这些 menu-item 的 key 赋值给 selectedKeys
+        if (!this.isSelectable) {
+            this.updateSelected();
+            return;
+        }
+        const values = (this.isSingle
+            ? [this.value]
+            : // 多选时，传入的值可能是字符串（通过 attribute 属性设置）；或字符串数组（通过 property 属性设置）
+                isString(this.value)
+                    ? [this.value]
+                    : this.value).filter((i) => i);
+        if (!values.length) {
+            this.selectedKeys = [];
+        }
+        else if (this.isSingle) {
+            const firstItem = this.itemsEnabled.find((item) => item.value === values[0]);
+            this.selectedKeys = firstItem ? [firstItem.key] : [];
+        }
+        else if (this.isMultiple) {
+            this.selectedKeys = this.itemsEnabled
+                .filter((item) => values.includes(item.value))
+                .map((item) => item.key);
+        }
+        this.updateSelected();
+        this.updateFocusable();
+    }
+    /**
+     * 将焦点设置在当前元素上
+     */
+    focus(options) {
+        if (this.lastActiveItem) {
+            this.focusOne(this.lastActiveItem, options);
+        }
+    }
+    /**
+     * 从当前元素中移除焦点
+     */
+    blur() {
+        if (this.lastActiveItem) {
+            this.lastActiveItem.blur();
+        }
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.updateFocusable();
+        this.lastActiveItem = this.items.find((item) => item.focusable);
+        // 子菜单打开时，把焦点放到新的子菜单上
+        this.addEventListener('submenu-open', (e) => {
+            const $parentItem = $(e.target);
+            const submenuItemsEnabled = $parentItem
+                .children('mdui-menu-item:not([disabled])')
+                .get();
+            const submenuLevel = $parentItem.parents('mdui-menu-item').length + 1; // 打开的是第几级子菜单
+            if (submenuItemsEnabled.length) {
+                this.lastActiveItems[submenuLevel] = submenuItemsEnabled[0];
+                this.updateFocusable();
+                this.focusOne(this.lastActiveItems[submenuLevel]);
+            }
+        });
+        // 子菜单关闭时，把焦点还原到父菜单上
+        this.addEventListener('submenu-close', (e) => {
+            const $parentItem = $(e.target);
+            const submenuLevel = $parentItem.parents('mdui-menu-item').length + 1; // 打开的是第几级子菜单
+            if (this.lastActiveItems.length - 1 === submenuLevel) {
+                this.lastActiveItems.pop();
+                this.updateFocusable();
+                if (this.lastActiveItems[submenuLevel - 1]) {
+                    this.focusOne(this.lastActiveItems[submenuLevel - 1]);
+                }
+            }
+        });
+    }
+    render() {
+        return html `<slot @slotchange="${this.onSlotChange}" @click="${this.onClick}" @keydown="${this.onKeyDown}"></slot>`;
+    }
+    // 获取和指定菜单项同级的所有菜单项
+    getSiblingsItems(item, onlyEnabled = false) {
+        return $(item)
+            .parent()
+            .children(`mdui-menu-item${onlyEnabled ? ':not([disabled])' : ''}`)
+            .get();
+    }
+    // 更新 menu-item 的可聚焦状态
+    updateFocusable() {
+        // 焦点优先放在之前焦点所在的元素上
+        if (this.lastActiveItem) {
+            this.items.forEach((item) => (item.focusable = item.key === this.lastActiveItem.key));
+            return;
+        }
+        // 没有选中任何一项，焦点放在第一个 menu-item 上
+        if (!this.selectedKeys.length) {
+            this.itemsEnabled.forEach((item, index) => (item.focusable = !index));
+            return;
+        }
+        // 如果是单选，焦点放在当前选中的元素上
+        if (this.isSingle) {
+            this.items.forEach((item) => (item.focusable = this.selectedKeys.includes(item.key)));
+            return;
+        }
+        // 是多选，且原焦点不在 selectedKeys 上，焦点放在第一个选中的 menu-item 上
+        if (this.isMultiple) {
+            const focusableItem = this.items.find((item) => item.focusable);
+            if (!(focusableItem === null || focusableItem === void 0 ? void 0 : focusableItem.key) ||
+                !this.selectedKeys.includes(focusableItem.key)) {
+                this.itemsEnabled
+                    .filter((item) => this.selectedKeys.includes(item.key))
+                    .forEach((item, index) => (item.focusable = !index));
+            }
+        }
+    }
+    updateSelected() {
+        // 选中 menu-item
+        this.items.forEach((item) => (item.selected = this.selectedKeys.includes(item.key)));
+    }
+    // 切换一个菜单项的选中状态
+    selectOne(item) {
+        if (this.isMultiple) {
+            // 直接修改 this.selectedKeys 无法被 watch 监听到，需要先克隆一份 this.selectedKeys
+            const selectedKeys = [...this.selectedKeys];
+            if (selectedKeys.includes(item.key)) {
+                selectedKeys.splice(selectedKeys.indexOf(item.key), 1);
+            }
+            else {
+                selectedKeys.push(item.key);
+            }
+            this.selectedKeys = selectedKeys;
+        }
+        if (this.isSingle) {
+            if (this.selectedKeys.includes(item.key)) {
+                this.selectedKeys = [];
+            }
+            else {
+                this.selectedKeys = [item.key];
+            }
+        }
+        this.updateSelected();
+    }
+    // 使一个 menu-item 可聚焦
+    focusableOne(item) {
+        this.items.forEach((_item) => (_item.focusable = _item.key === item.key));
+    }
+    // 聚焦一个 menu-item
+    async focusOne(item, options) {
+        await delay(); // 等待 focusableMixin 更新完成
+        item.focus(options);
+    }
+    onClick(event) {
+        if (this.isSubmenu) {
+            return;
+        }
+        // event.button 为 0 时，为鼠标左键点击。忽略鼠标中间和右键
+        if (event.button) {
+            return;
+        }
+        const target = event.target;
+        const item = target.closest('mdui-menu-item');
+        if (item === null || item === void 0 ? void 0 : item.disabled) {
+            return;
+        }
+        this.lastActiveItem = item;
+        if (this.isSelectable && item.value) {
+            this.selectOne(item);
+        }
+        this.focusableOne(item);
+        this.focusOne(item);
+    }
+    onKeyDown(event) {
+        if (this.isSubmenu) {
+            return;
+        }
+        const item = event.target;
+        // 按回车键，触发点击
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            item.click();
+        }
+        // 按下空格键时，阻止页面向下滚动，切换选中状态
+        if (event.key === ' ') {
+            event.preventDefault();
+            if (this.isSelectable && item.value) {
+                this.selectOne(item);
+                this.focusableOne(item);
+                this.focusOne(item);
+            }
+        }
+        // 按下方向键时，上下移动焦点；只在和当前 item 同级的 item 直接切换
+        if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
+            const items = this.getSiblingsItems(item, true);
+            const activeItem = items.find((item) => item.focusable);
+            let index = activeItem ? items.indexOf(activeItem) : 0;
+            if (items.length > 0) {
+                event.preventDefault();
+                if (event.key === 'ArrowDown') {
+                    index++;
+                }
+                else if (event.key === 'ArrowUp') {
+                    index--;
+                }
+                else if (event.key === 'Home') {
+                    index = 0;
+                }
+                else if (event.key === 'End') {
+                    index = items.length - 1;
+                }
+                if (index < 0) {
+                    index = items.length - 1;
+                }
+                if (index > items.length - 1) {
+                    index = 0;
+                }
+                this.lastActiveItem = items[index];
+                this.focusableOne(items[index]);
+                this.focusOne(items[index]);
+                return;
+            }
+        }
+    }
+};
+Menu.styles = [componentStyle, menuStyle];
+__decorate([
+    property({ reflect: true })
+    // eslint-disable-next-line prettier/prettier
+], Menu.prototype, "selects", void 0);
+__decorate([
+    property()
+], Menu.prototype, "value", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], Menu.prototype, "dense", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'submenu-trigger' })
+], Menu.prototype, "submenuTrigger", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'submenu-open-delay' })
+], Menu.prototype, "submenuOpenDelay", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'submenu-close-delay' })
+], Menu.prototype, "submenuCloseDelay", void 0);
+__decorate([
+    state()
+], Menu.prototype, "selectedKeys", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true, selector: 'mdui-menu-item' })
+], Menu.prototype, "childrenItems", void 0);
+__decorate([
+    watch('dense'),
+    watch('selects'),
+    watch('submenuTrigger'),
+    watch('submenuOpenDelay'),
+    watch('submenuCloseDelay')
+], Menu.prototype, "onSlotChange", null);
+__decorate([
+    watch('selects')
+], Menu.prototype, "onSelectsChange", null);
+__decorate([
+    watch('selectedKeys', true)
+], Menu.prototype, "onSelectedKeysChange", null);
+__decorate([
+    watch('value')
+], Menu.prototype, "onValueChange", null);
+Menu = __decorate([
+    customElement('mdui-menu')
+], Menu);

package/components/menu-item.d.ts

@@ -0,0 +1 @@
+export * from './menu/menu-item.js';

package/components/menu-item.js

@@ -0,0 +1 @@
+export * from './menu/menu-item.js';

package/components/menu.d.ts

@@ -0,0 +1 @@
+export * from './menu/menu.js';

package/components/menu.js

@@ -0,0 +1 @@
+export * from './menu/menu.js';

package/components/navigation-bar/navigation-bar-item-style.d.ts

@@ -0,0 +1 @@
+export declare const navigationBarItemStyle: import("lit").CSSResult;

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

@@ -0,0 +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;transition:padding var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard);padding-top:.75rem;padding-bottom:.75rem}mdui-ripple{z-index:1;left:50%;transform:translateX(-50%);transition:margin-top var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard);width:4rem;height:2rem;margin-top:.75rem;border-radius:var(--mdui-shape-corner-full)}.indicator{position:relative;display:flex;align-items:center;justify-content:center;background-color:transparent;border-radius:var(--shape-corner-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:2rem;width:2rem}::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;transition:opacity var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);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)}:host([label-visibility=selected]:not([active])) mdui-ripple,:host([label-visibility=unlabeled]) mdui-ripple{margin-top:1.5rem}:host([label-visibility=selected]:not([active])) .container,:host([label-visibility=unlabeled]) .container{padding-top:1.5rem;padding-bottom:0}:host([label-visibility=selected]:not([active])) .label,:host([label-visibility=unlabeled]) .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.d.ts

@@ -0,0 +1,72 @@
+import { LitElement } from 'lit';
+import '../icon.js';
+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 LitElement;
+/**
+ * @summary 底部导航栏项组件。需与 `<mdui-navigation-bar>` 组件配合使用
+ *
+ * ```html
+ * <mdui-navigation-bar>
+ * ..<mdui-navigation-bar-item icon="place">Item 1</mdui-navigation-bar-item>
+ * ..<mdui-navigation-bar-item icon="commute">Item 2</mdui-navigation-bar-item>
+ * ..<mdui-navigation-bar-item icon="people">Item 3</mdui-navigation-bar-item>
+ * </mdui-navigation-bar>
+ * ```
+ *
+ * @slot - 文本
+ * @slot icon - 图标
+ * @slot active-icon - 激活状态的图标元素
+ * @slot badge - 徽标
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ *
+ * @csspart container - 导航项容器
+ * @csspart indicator - 指示器
+ * @csspart badge - 徽标
+ * @csspart icon - 图标
+ * @csspart active-icon - 激活状态的图标
+ * @csspart label - 文本
+ *
+ * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ */
+export declare class NavigationBarItem extends NavigationBarItem_base {
+    static styles: CSSResultGroup;
+    /**
+     * 未激活状态的 Material Icons 图标名。也可以通过 `slot="icon"` 设置
+     */
+    icon?: string;
+    /**
+     * 激活状态的 Material Icons 图标名。也可以通过 `slot="active-icon"` 设置
+     */
+    activeIcon?: string;
+    /**
+     * 该导航项的值
+     */
+    value?: string;
+    /**
+     * 文本的可视状态，由 `navigation-bar` 调用
+     */
+    protected labelVisibility?: 'selected' | 'labeled' | 'unlabeled';
+    /**
+     * 是否为激活状态，由 `navigation-bar` 组件控制该参数
+     */
+    protected active: boolean;
+    private disabled;
+    protected readonly key: number;
+    private readonly rippleRef;
+    private readonly hasSlotController;
+    protected get rippleElement(): Ripple;
+    protected get rippleDisabled(): boolean;
+    protected get focusElement(): HTMLElement | null;
+    protected get focusDisabled(): boolean;
+    protected render(): TemplateResult;
+    private renderInner;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mdui-navigation-bar-item': NavigationBarItem;
+    }
+}
+export {};