@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/components/navigation/menu.js

@@ -0,0 +1,126 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Cross-framework navigation menu with vertical and horizontal modes.
+ * 跨框架导航菜单，支持垂直和水平模式。
+ *
+ * @slot - Default slot for `aithe-menu-item` and `aithe-sub-menu` elements. aithe-menu-item 和 aithe-sub-menu 元素。
+ * @fires aithe-select - Emitted when a menu item is selected. 菜单项选中时触发。
+ * @example
+ * ```html
+ * <aithe-menu mode="vertical" active="home">
+ *   <aithe-menu-item name="home">Home</aithe-menu-item>
+ *   <aithe-sub-menu title="Settings">
+ *     <aithe-menu-item name="profile">Profile</aithe-menu-item>
+ *   </aithe-sub-menu>
+ * </aithe-menu>
+ * ```
+ */
+let AitheMenu = class AitheMenu extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Menu layout mode. 菜单布局模式。 */
+        this.mode = 'vertical';
+        /** Active (selected) menu item key. 当前选中的菜单项键。 */
+        this.active = '';
+        /** Whether the menu is in collapsed state. 菜单是否处于折叠状态。 */
+        this.collapsed = false;
+        /** Whether menu items can be selected. 菜单项是否可选中。 */
+        this.selectable = true;
+        this.syncChildren = () => {
+            const items = Array.from(this.querySelectorAll('aithe-menu-item'));
+            const subMenus = Array.from(this.querySelectorAll('aithe-sub-menu'));
+            for (const item of items) {
+                item.active = item.name === this.active;
+                item.menuMode = this.mode;
+                item.collapsed = this.collapsed;
+            }
+            for (const submenu of subMenus) {
+                submenu.menuMode = this.mode;
+                submenu.collapsed = this.collapsed;
+                submenu.active = Array.from(submenu.querySelectorAll('aithe-menu-item')).some((item) => {
+                    const typedItem = item;
+                    return typedItem.name === this.active;
+                });
+                if (this.mode === 'horizontal' && submenu.active) {
+                    submenu.open = true;
+                }
+            }
+        };
+        this.handleSelect = (event) => {
+            event.stopPropagation();
+            if (!this.selectable) {
+                this.emit('aithe-select', event.detail);
+                return;
+            }
+            this.active = event.detail.name;
+            this.syncChildren();
+            this.emit('aithe-select', { active: this.active });
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        position: relative;
+        display: block;
+      }
+
+      .menu {
+        display: grid;
+        gap: var(--aithe-space-2);
+      }
+
+      .menu.horizontal {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('aithe-menu-select', this.handleSelect);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('aithe-menu-select', this.handleSelect);
+    }
+    updated(changed) {
+        if (changed.has('active') || changed.has('mode') || changed.has('collapsed')) {
+            this.syncChildren();
+        }
+    }
+    render() {
+        return html `
+      <div class=${classMap({ menu: true, [this.mode]: true })}>
+        <slot @slotchange=${this.syncChildren}></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheMenu.prototype, "mode", void 0);
+__decorate([
+    property({ type: String })
+], AitheMenu.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheMenu.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheMenu.prototype, "selectable", void 0);
+AitheMenu = __decorate([
+    customElement('aithe-menu')
+], AitheMenu);
+export { AitheMenu };

package/dist/components/navigation/steps.d.ts

@@ -1,14 +1,31 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 /**
- * Stepper component with JSON-driven items.
+ * Stepper component with JSON-driven items for process flow visualization.
+ * 步骤条组件，支持 JSON 驱动的步骤项，用于流程可视化。
+ *
+ * @example
+ * ```html
+ * <aithe-steps current="1" direction="horizontal" items='["Step 1","Step 2","Step 3"]'></aithe-steps>
+ * <aithe-steps current="2" items='[{"title":"Account","description":"Create account"},{"title":"Profile","description":"Fill info"}]'></aithe-steps>
+ * ```
  */
 export declare class AitheSteps extends AitheElement {
+    /** Current active step index (0-based). 当前活动步骤索引（从 0 开始）。 */
     current: number;
+    /** Step size preset. 步骤尺寸预设。 */
     size: 'sm' | 'md' | 'lg';
+    /** Steps layout direction. 步骤布局方向。 */
     direction: 'horizontal' | 'vertical';
+    /** JSON string or comma-separated list of step items. 步骤项的 JSON 字符串或逗号分隔列表。 */
     items: string;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     private get parsedItems();
+    /**
+     * Get the state of a step item based on its index.
+     * @param index - The index of the step item
+     * @returns The state of the step: 'done', 'active', or 'pending'
+     */
+    private getStepState;
     render(): import("lit-html").TemplateResult<1>;
 }
 //# sourceMappingURL=steps.d.ts.map

package/dist/components/navigation/steps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/steps.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAQxD;;GAEG;AACH,qBACa,UAAW,SAAQ,YAAY;IACd,OAAO,SAAK;IACZ,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,SAAS,EAAE,YAAY,GAAG,UAAU,CAAgB;IACpD,KAAK,SAAQ;IAEzC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA0EpB;IAEF,OAAO,KAAK,WAAW,GAWtB;IAED,MAAM;CAoBP"}
+{"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/steps.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAQnD;;;;;;;;;GASG;AACH,qBACa,UAAW,SAAQ,YAAY;IAC1C,6DAA6D;IACjC,OAAO,SAAK;IACxC,gCAAgC;IACJ,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC5D,sCAAsC;IACV,SAAS,EAAE,YAAY,GAAG,UAAU,CAAgB;IAChF,+EAA+E;IACnD,KAAK,SAAQ;IAEzC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAgFpB;IAEF,OAAO,KAAK,WAAW,GAWtB;IAED;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAUpB,MAAM;CAwBP"}

package/dist/components/navigation/steps.js

@@ -0,0 +1,183 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Stepper component with JSON-driven items for process flow visualization.
+ * 步骤条组件，支持 JSON 驱动的步骤项，用于流程可视化。
+ *
+ * @example
+ * ```html
+ * <aithe-steps current="1" direction="horizontal" items='["Step 1","Step 2","Step 3"]'></aithe-steps>
+ * <aithe-steps current="2" items='[{"title":"Account","description":"Create account"},{"title":"Profile","description":"Fill info"}]'></aithe-steps>
+ * ```
+ */
+let AitheSteps = class AitheSteps extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Current active step index (0-based). 当前活动步骤索引（从 0 开始）。 */
+        this.current = 0;
+        /** Step size preset. 步骤尺寸预设。 */
+        this.size = 'md';
+        /** Steps layout direction. 步骤布局方向。 */
+        this.direction = 'horizontal';
+        /** JSON string or comma-separated list of step items. 步骤项的 JSON 字符串或逗号分隔列表。 */
+        this.items = '[]';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .steps {
+        display: flex;
+        gap: var(--aithe-space-4);
+      }
+
+      .steps.vertical {
+        flex-direction: column;
+      }
+
+      .item {
+        position: relative;
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr);
+        gap: var(--aithe-space-3);
+        align-items: start;
+        flex: 1;
+      }
+
+      .steps.vertical .item {
+        flex: none;
+      }
+
+      .item:not(:last-child)::after {
+        content: '';
+        position: absolute;
+        top: 15px;
+        left: 36px;
+        right: calc(var(--aithe-space-4) * -1);
+        height: 2px;
+        background: var(--aithe-color-border);
+      }
+
+      .steps.vertical .item:not(:last-child)::after {
+        top: 36px;
+        left: 15px;
+        right: auto;
+        width: 2px;
+        height: calc(100% + var(--aithe-space-4));
+      }
+
+      .dot {
+        position: relative;
+        z-index: 1;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        border: 2px solid var(--aithe-color-border);
+        background: var(--aithe-color-surface-elevated);
+        color: var(--aithe-color-text-muted);
+        font-weight: var(--aithe-font-weight-semibold);
+      }
+
+      .dot.done,
+      .dot.active {
+        border-color: var(--aithe-primary-6);
+        background: var(--aithe-primary-6);
+        color: var(--aithe-color-text-on-primary, #ffffff);
+      }
+
+      .title {
+        font-weight: var(--aithe-font-weight-semibold);
+        margin-bottom: var(--aithe-space-1);
+        margin-top: 0;
+      }
+
+      .description {
+        color: var(--aithe-color-text-muted);
+        font-size: var(--aithe-font-size-sm);
+      }
+    `,
+    ]; }
+    get parsedItems() {
+        try {
+            const parsed = JSON.parse(this.items);
+            return parsed.map((item) => (typeof item === 'string' ? { title: item } : item));
+        }
+        catch {
+            return this.items
+                .split(',')
+                .map((item) => item.trim())
+                .filter(Boolean)
+                .map((title) => ({ title }));
+        }
+    }
+    /**
+     * Get the state of a step item based on its index.
+     * @param index - The index of the step item
+     * @returns The state of the step: 'done', 'active', or 'pending'
+     */
+    getStepState(index) {
+        if (index < this.current) {
+            return 'done';
+        }
+        else if (index === this.current) {
+            return 'active';
+        }
+        else {
+            return 'pending';
+        }
+    }
+    render() {
+        const items = this.parsedItems;
+        return html `
+      <div class=${classMap({ steps: true, [this.direction]: true })}>
+        ${items.map((item, index) => {
+            const state = this.getStepState(index);
+            return html `
+            <div class="item">
+              <span class=${classMap({ dot: true, [state]: true })}>${index + 1}</span>
+              <div>
+                <div class="title">${item.title}</div>
+                ${item.description
+                ? html `
+                      <div class="description">${item.description}</div>
+                    `
+                : null}
+              </div>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], AitheSteps.prototype, "current", void 0);
+__decorate([
+    property({ type: String })
+], AitheSteps.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], AitheSteps.prototype, "direction", void 0);
+__decorate([
+    property({ type: String })
+], AitheSteps.prototype, "items", void 0);
+AitheSteps = __decorate([
+    customElement('aithe-steps')
+], AitheSteps);
+export { AitheSteps };

package/dist/components/navigation/sub-menu.d.ts

@@ -1,18 +1,42 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 /**
- * Nested branch item for `aithe-menu`.
+ * Nested branch (sub-menu) item for `aithe-menu` with expandable children.
+ * aithe-menu 的嵌套分支（子菜单）项，支持展开子项。
+ *
+ * Supports collapsed mode: when `collapsed` is true, the trigger displays only
+ * the icon and children are shown in a popup panel on click.
+ * 支持折叠模式：当 collapsed 为 true 时，触发器仅显示图标，子菜单以弹出面板形式展示。
+ *
+ * @slot - Default slot for nested `aithe-menu-item` elements. 嵌套的 aithe-menu-item 元素。
+ * @example
+ * ```html
+ * <aithe-sub-menu title="Settings" name="settings" icon="settings">
+ *   <aithe-menu-item name="profile">Profile</aithe-menu-item>
+ *   <aithe-menu-item name="security">Security</aithe-menu-item>
+ * </aithe-sub-menu>
+ * ```
  */
 export declare class AitheSubMenu extends AitheElement {
+    /** Unique key identifying this sub-menu. 子菜单唯一标识键。 */
     name: string;
+    /** Display title for the sub-menu trigger. 子菜单触发器的显示标题。 */
     title: string;
+    /** Icon name to display before the title. 在标题前显示的图标名称。 */
+    icon: string;
+    /** Whether the sub-menu is disabled. 是否禁用子菜单。 */
     disabled: boolean;
+    /** Whether the sub-menu is currently expanded. 是否当前展开。 */
     open: boolean;
+    /** Whether any child item is currently active. 是否有子项当前选中。 */
     active: boolean;
+    /** Inherited menu mode from parent `aithe-menu`. 从父级 aithe-menu 继承的菜单模式。 */
     menuMode: 'horizontal' | 'vertical';
+    /** Inherited collapsed state from parent `aithe-menu`. When true, the trigger shows only the icon and children are displayed in a popup panel. 从父级 aithe-menu 继承的折叠状态。为 true 时触发器仅显示图标，子菜单以弹出面板形式展示。 */
     collapsed: boolean;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    connectedCallback(): void;
     protected updated(changed: Map<string, unknown>): void;
-    private toggle;
+    private readonly toggle;
     render(): import("lit-html").TemplateResult<1>;
 }
 //# sourceMappingURL=sub-menu.d.ts.map

package/dist/components/navigation/sub-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sub-menu.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/sub-menu.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD;;GAEG;AACH,qBACa,YAAa,SAAQ,YAAY;IAChB,IAAI,SAAM;IACV,KAAK,SAAM;IACK,QAAQ,UAAS;IACjB,IAAI,UAAS;IACzB,MAAM,UAAS;IACf,QAAQ,EAAE,YAAY,GAAG,UAAU,CAAc;IACjD,SAAS,UAAS;IAElD,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA+DpB;IAEF,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMtD,OAAO,CAAC,MAAM,CAMZ;IAEF,MAAM;CAoBP"}
+{"version":3,"file":"sub-menu.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/sub-menu.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,YAAa,SAAQ,YAAY;IAC5C,sDAAsD;IAC1B,IAAI,SAAM;IACtC,2DAA2D;IAC/B,KAAK,SAAM;IACvC,0DAA0D;IAC9B,IAAI,SAAM;IACtC,iDAAiD;IACL,QAAQ,UAAS;IAC7D,0DAA0D;IACd,IAAI,UAAS;IACzD,6DAA6D;IAC7B,MAAM,UAAS;IAC/C,4EAA4E;IAC5C,QAAQ,EAAE,YAAY,GAAG,UAAU,CAAc;IACjF,wMAAwM;IACxK,SAAS,UAAS;IAElD,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA4FpB;IAEF,iBAAiB,IAAI,IAAI;IAIzB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAuBtD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAMrB;IAEF,MAAM;CAqDP"}

package/dist/components/navigation/sub-menu.js

@@ -0,0 +1,253 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Nested branch (sub-menu) item for `aithe-menu` with expandable children.
+ * aithe-menu 的嵌套分支（子菜单）项，支持展开子项。
+ *
+ * Supports collapsed mode: when `collapsed` is true, the trigger displays only
+ * the icon and children are shown in a popup panel on click.
+ * 支持折叠模式：当 collapsed 为 true 时，触发器仅显示图标，子菜单以弹出面板形式展示。
+ *
+ * @slot - Default slot for nested `aithe-menu-item` elements. 嵌套的 aithe-menu-item 元素。
+ * @example
+ * ```html
+ * <aithe-sub-menu title="Settings" name="settings" icon="settings">
+ *   <aithe-menu-item name="profile">Profile</aithe-menu-item>
+ *   <aithe-menu-item name="security">Security</aithe-menu-item>
+ * </aithe-sub-menu>
+ * ```
+ */
+let AitheSubMenu = class AitheSubMenu extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Unique key identifying this sub-menu. 子菜单唯一标识键。 */
+        this.name = '';
+        /** Display title for the sub-menu trigger. 子菜单触发器的显示标题。 */
+        this.title = '';
+        /** Icon name to display before the title. 在标题前显示的图标名称。 */
+        this.icon = '';
+        /** Whether the sub-menu is disabled. 是否禁用子菜单。 */
+        this.disabled = false;
+        /** Whether the sub-menu is currently expanded. 是否当前展开。 */
+        this.open = false;
+        /** Whether any child item is currently active. 是否有子项当前选中。 */
+        this.active = false;
+        /** Inherited menu mode from parent `aithe-menu`. 从父级 aithe-menu 继承的菜单模式。 */
+        this.menuMode = 'vertical';
+        /** Inherited collapsed state from parent `aithe-menu`. When true, the trigger shows only the icon and children are displayed in a popup panel. 从父级 aithe-menu 继承的折叠状态。为 true 时触发器仅显示图标，子菜单以弹出面板形式展示。 */
+        this.collapsed = false;
+        this.toggle = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.open = !this.open;
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      .toggle {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-3);
+        width: 100%;
+        min-height: 42px;
+        padding: 0 var(--aithe-space-4);
+        border: none;
+        border-radius: var(--aithe-radius-md);
+        background: transparent;
+        color: var(--aithe-color-text-muted);
+        text-align: left;
+        cursor: pointer;
+      }
+
+      .toggle.collapsed {
+        justify-content: center;
+        padding: 0;
+        gap: 0;
+      }
+
+      .toggle-label {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        flex: 1;
+        min-width: 0;
+      }
+
+      .toggle-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .toggle.active {
+        color: var(--aithe-color-text);
+        background: var(--aithe-color-surface-muted);
+      }
+
+      .toggle.active .toggle-icon {
+        color: var(--aithe-color-text);
+      }
+
+      .toggle:hover:not(:disabled) {
+        background: var(--aithe-color-surface-muted);
+      }
+
+      .toggle:disabled {
+        opacity: 0.48;
+        cursor: not-allowed;
+      }
+
+      .children {
+        display: grid;
+        gap: var(--aithe-space-2);
+        padding-top: var(--aithe-space-2);
+        padding-left: var(--aithe-space-4);
+      }
+
+      :host([open][data-mode='horizontal']) .children {
+        position: absolute;
+        z-index: var(--aithe-z-dropdown);
+        min-width: 220px;
+        padding: var(--aithe-space-3);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        background: var(--aithe-color-surface-elevated);
+        box-shadow: var(--aithe-shadow-3);
+      }
+
+      .arrow {
+        transition: transform var(--aithe-duration-fast) var(--aithe-ease-standard);
+      }
+
+      .arrow.open {
+        transform: rotate(180deg);
+      }
+
+      .collapsed-children {
+        display: grid;
+        gap: var(--aithe-space-2);
+        padding-top: var(--aithe-space-2);
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    updated(changed) {
+        if (changed.has('menuMode')) {
+            this.dataset.mode = this.menuMode;
+        }
+        if (changed.has('collapsed')) {
+            if (this.collapsed) {
+                this.open = false;
+            }
+        }
+        if (changed.has('open') && this.collapsed && this.open) {
+            requestAnimationFrame(() => {
+                const items = this.querySelectorAll('aithe-menu-item');
+                for (const item of items) {
+                    item.collapsed = false;
+                }
+                const subMenus = this.querySelectorAll('aithe-sub-menu');
+                for (const sm of subMenus) {
+                    sm.collapsed = false;
+                }
+            });
+        }
+    }
+    render() {
+        if (this.collapsed) {
+            return html `
+        <button
+          class=${classMap({
+                toggle: true,
+                active: this.active,
+                collapsed: true,
+            })}
+          type="button"
+          title=${this.title || this.name}
+          ?disabled=${this.disabled}
+          aria-expanded=${String(this.open)}
+          @click=${this.toggle}
+        >
+          ${this.icon
+                ? html `
+                <aithe-icon class="toggle-icon" name=${this.icon} size="16"></aithe-icon>
+              `
+                : nothing}
+        </button>
+        <div class="collapsed-children" ?hidden=${!this.open}>
+          <slot></slot>
+        </div>
+      `;
+        }
+        return html `
+      <button
+        class=${classMap({
+            toggle: true,
+            active: this.active,
+        })}
+        type="button"
+        ?disabled=${this.disabled}
+        aria-expanded=${String(this.open)}
+        @click=${this.toggle}
+      >
+        <span class="toggle-label">
+          ${this.icon
+            ? html `
+                <aithe-icon class="toggle-icon" name=${this.icon} size="16"></aithe-icon>
+              `
+            : nothing}
+          <span>${this.title || this.name}</span>
+        </span>
+        <span class=${classMap({ arrow: true, open: this.open })}>⌄</span>
+      </button>
+      <div class="children" ?hidden=${!this.open}>
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheSubMenu.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], AitheSubMenu.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheSubMenu.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheSubMenu.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheSubMenu.prototype, "open", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheSubMenu.prototype, "active", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheSubMenu.prototype, "menuMode", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheSubMenu.prototype, "collapsed", void 0);
+AitheSubMenu = __decorate([
+    customElement('aithe-sub-menu')
+], AitheSubMenu);
+export { AitheSubMenu };

package/dist/components/progress/AGENTS.md

@@ -0,0 +1,24 @@
+# src/components/progress/ — 进度组件（4个）
+
+## 组件列表
+
+| 组件               | 标签                    | 说明           |
+| ------------------ | ----------------------- | -------------- |
+| `progress-bar.ts`  | `<aithe-progress-bar>`  | 线性进度条     |
+| `progress-ring.ts` | `<aithe-progress-ring>` | 环形进度指示器 |
+| `spinner.ts`       | `<aithe-spinner>`       | 通用加载旋转器 |
+| `skeleton.ts`      | `<aithe-skeleton>`      | 骨架屏占位     |
+
+## 编码规范
+
+- 继承 `AitheElement`，使用 `@customElement` 装饰器
+- 进度组件通过 `percent` / `value` 属性控制进度值
+- 导入使用 `@components/progress/xxx` 路径别名
+- 中英文双语 JSDoc 注释
+
+## 关键约定
+
+- `aithe-progress-bar` 支持 `striped`（条纹）和 `animated`（动画）属性
+- `aithe-progress-ring` 通过 `size` 和 `stroke-width` 控制尺寸
+- `aithe-skeleton` 通过 `variant` 控制骨架形状（text/card/avatar 等）
+- 新增组件需同步更新 `src/index.ts` 和 `docs/api/progress/`