@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/components/basic/card.js

@@ -0,0 +1,186 @@
+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, queryAssignedElements, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Card container with header, body, and footer sections.
+ * 卡片容器，包含标题、正文和底部区域。
+ *
+ * @slot - Default slot for card body content. 卡片正文内容。
+ * @slot header - Custom header content (overrides title). 自定义头部内容。
+ * @slot footer - Footer action area. 底部操作区域。
+ * @example
+ * ```html
+ * <aithe-card title="Settings" icon="settings" shadow="2">
+ *   <p>Card body content here.</p>
+ *   <slot name="footer"><button>Save</button></slot>
+ * </aithe-card>
+ * ```
+ */
+let AitheCard = class AitheCard extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Card title text. 卡片标题文本。 */
+        this.title = '';
+        /** Icon name to display before the title. 在标题前显示的图标名称。 */
+        this.icon = '';
+        /** Shadow elevation level (0–4). 阴影层级（0–4）。 */
+        this.shadow = 2;
+        /** Padding for the card body section. 卡片正文区域内边距。 */
+        this.bodyPadding = 'var(--aithe-space-lg)';
+        /** Whether to show a border around the card. 是否显示卡片边框。 */
+        this.bordered = true;
+        /** Divider style between sections: 'border' | 'none'. 区域间分割线样式：'border' | 'none'。 */
+        this.divider = 'border';
+        this.hasHeaderSlot = false;
+        this.hasFooterSlot = false;
+        this.syncSlots = () => {
+            this.hasHeaderSlot = this.headerSlotNodes.length > 0;
+            this.hasFooterSlot = this.footerSlotNodes.length > 0;
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        min-width: 0;
+      }
+
+      .card {
+        width: 100%;
+        min-width: 0;
+        overflow: hidden;
+        border-radius: var(--aithe-container-radius-xl);
+        background: var(--aithe-color-surface-elevated);
+        backdrop-filter: blur(16px);
+      }
+
+      .header {
+        display: flex;
+        flex-direction: column;
+        gap: var(--aithe-space-1);
+        min-width: 0;
+        padding: var(--aithe-space-lg) var(--aithe-space-lg) 0;
+      }
+
+      .header-divider {
+        border-bottom: 1px solid var(--aithe-color-border);
+        margin: var(--aithe-space-sm) var(--aithe-space-lg) 0;
+      }
+
+      .title {
+        margin: 0;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        font-size: var(--aithe-font-size-lg);
+        font-weight: var(--aithe-font-weight-semibold);
+      }
+
+      .title-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .body {
+        min-width: 0;
+      }
+
+      .footer-divider {
+        border-top: 1px solid var(--aithe-color-border);
+        margin: 0 var(--aithe-space-lg);
+      }
+
+      .footer {
+        min-width: 0;
+        padding: var(--aithe-space-sm) var(--aithe-space-lg) var(--aithe-space-lg);
+        color: var(--aithe-color-text-muted);
+      }
+    `,
+    ]; }
+    render() {
+        const showHeader = this.title || this.hasHeaderSlot;
+        const showDivider = this.divider !== 'none';
+        const titleIcon = this.icon
+            ? html `
+          <aithe-icon class="title-icon" name=${this.icon} size="18"></aithe-icon>
+        `
+            : nothing;
+        return html `
+      <article
+        class="card"
+        style=${styleMap({
+            border: this.bordered ? '1px solid var(--aithe-color-border)' : 'none',
+            boxShadow: this.shadow > 0 ? `var(--aithe-shadow-${this.shadow})` : 'none',
+        })}
+      >
+        <header class="header" ?hidden=${!showHeader}>
+          <slot name="header" @slotchange=${this.syncSlots}></slot>
+          ${this.title
+            ? html `
+                <div class="title">${titleIcon}${this.title}</div>
+              `
+            : null}
+        </header>
+        ${showHeader && showDivider
+            ? html `
+              <div class="header-divider"></div>
+            `
+            : nothing}
+        <section class="body" style=${styleMap({ padding: this.bodyPadding })}>
+          <slot></slot>
+        </section>
+        ${this.hasFooterSlot && showDivider
+            ? html `
+              <div class="footer-divider"></div>
+            `
+            : nothing}
+        <footer class="footer" ?hidden=${!this.hasFooterSlot}>
+          <slot name="footer" @slotchange=${this.syncSlots}></slot>
+        </footer>
+      </article>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheCard.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheCard.prototype, "icon", void 0);
+__decorate([
+    property({ type: Number })
+], AitheCard.prototype, "shadow", void 0);
+__decorate([
+    property({ type: String, attribute: 'body-padding' })
+], AitheCard.prototype, "bodyPadding", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheCard.prototype, "bordered", void 0);
+__decorate([
+    property({ type: String })
+], AitheCard.prototype, "divider", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'header' })
+], AitheCard.prototype, "headerSlotNodes", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'footer' })
+], AitheCard.prototype, "footerSlotNodes", void 0);
+__decorate([
+    state()
+], AitheCard.prototype, "hasHeaderSlot", void 0);
+__decorate([
+    state()
+], AitheCard.prototype, "hasFooterSlot", void 0);
+AitheCard = __decorate([
+    customElement('aithe-card')
+], AitheCard);
+export { AitheCard };

package/dist/components/basic/chip.d.ts

@@ -1,13 +1,26 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 /**
- * Compact selectable chip.
+ * Compact selectable chip with optional close button.
+ * 紧凑的可选中芯片，支持可选关闭按钮。
+ *
+ * @slot - Default slot for chip label content. 芯片标签内容。
+ * @fires aithe-select - Emitted when chip selection state changes. 选中状态变更时触发。
+ * @fires aithe-close - Emitted when the close button is clicked. 关闭按钮点击时触发。
+ * @example
+ * ```html
+ * <aithe-chip closable>Filter Tag</aithe-chip>
+ * ```
  */
 export declare class AitheChip extends AitheElement {
+    /** Whether the chip is selected. 是否选中。 */
     selected: boolean;
+    /** Whether the chip shows a close button. 是否显示关闭按钮。 */
     closable: boolean;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
-    private toggleSelect;
-    private handleClose;
+    /** Toggles the selected state and emits select event. 切换选中状态并触发 select 事件。 */
+    private readonly toggleSelect;
+    /** Handles close button click: emits event, then removes the chip from DOM. 处理关闭按钮点击：触发事件、然后从 DOM 移除芯片。 */
+    private readonly handleClose;
     render(): import("lit-html").TemplateResult<1>;
 }
 //# sourceMappingURL=chip.d.ts.map

package/dist/components/basic/chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/components/basic/chip.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD;;GAEG;AACH,qBACa,SAAU,SAAQ,YAAY;IACG,QAAQ,UAAS;IAChC,QAAQ,UAAS;IAE9C,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAiCpB;IAEF,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,WAAW,CAGjB;IAEF,MAAM;CAQP"}
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/components/basic/chip.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;GAWG;AACH,qBACa,SAAU,SAAQ,YAAY;IACzC,0CAA0C;IACE,QAAQ,UAAS;IAC7D,uDAAuD;IAC1B,QAAQ,UAAS;IAE9C,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAiCpB;IAEF,8EAA8E;IAC9E,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,2GAA2G;IAC3G,OAAO,CAAC,QAAQ,CAAC,WAAW,CAI1B;IAEF,MAAM;CAgBP"}

package/dist/components/basic/chip.js

@@ -0,0 +1,103 @@
+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';
+/**
+ * Compact selectable chip with optional close button.
+ * 紧凑的可选中芯片，支持可选关闭按钮。
+ *
+ * @slot - Default slot for chip label content. 芯片标签内容。
+ * @fires aithe-select - Emitted when chip selection state changes. 选中状态变更时触发。
+ * @fires aithe-close - Emitted when the close button is clicked. 关闭按钮点击时触发。
+ * @example
+ * ```html
+ * <aithe-chip closable>Filter Tag</aithe-chip>
+ * ```
+ */
+let AitheChip = class AitheChip extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the chip is selected. 是否选中。 */
+        this.selected = false;
+        /** Whether the chip shows a close button. 是否显示关闭按钮。 */
+        this.closable = false;
+        /** Toggles the selected state and emits select event. 切换选中状态并触发 select 事件。 */
+        this.toggleSelect = () => {
+            this.selected = !this.selected;
+            this.emit('aithe-select', { selected: this.selected });
+        };
+        /** Handles close button click: emits event, then removes the chip from DOM. 处理关闭按钮点击：触发事件、然后从 DOM 移除芯片。 */
+        this.handleClose = (event) => {
+            event.stopPropagation();
+            this.emit('aithe-close');
+            this.remove();
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+      }
+
+      button {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        min-height: 28px;
+        padding: 0 var(--aithe-space-3);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-full);
+        background: var(--aithe-color-surface-elevated);
+        color: var(--aithe-color-text);
+        cursor: pointer;
+      }
+
+      button.selected {
+        border-color: var(--aithe-primary-5);
+        background: var(--aithe-primary-1);
+        color: var(--aithe-primary-8);
+      }
+
+      .close {
+        border: none;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <button
+        class=${classMap({ selected: this.selected })}
+        type="button"
+        @click=${this.toggleSelect}
+      >
+        <slot></slot>
+        ${this.closable
+            ? html `
+              <span class="close" role="button" @click=${this.handleClose}>×</span>
+            `
+            : null}
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheChip.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheChip.prototype, "closable", void 0);
+AitheChip = __decorate([
+    customElement('aithe-chip')
+], AitheChip);
+export { AitheChip };

package/dist/components/basic/divider.d.ts

@@ -1,7 +1,21 @@
 import { AitheElement } from '../../core/aithe-element';
+/**
+ * Horizontal or vertical divider line with optional label.
+ * 水平或垂直分割线，支持可选标签。
+ *
+ * @slot - Default slot for divider label text (horizontal mode). 分割线标签文本（水平模式）。
+ * @example
+ * ```html
+ * <aithe-divider label="Section"></aithe-divider>
+ * <aithe-divider vertical dashed></aithe-divider>
+ * ```
+ */
 export declare class AitheDivider extends AitheElement {
+    /** Whether the divider renders vertically. 是否垂直渲染分割线。 */
     vertical: boolean;
+    /** Whether the line style is dashed. 是否使用虚线样式。 */
     dashed: boolean;
+    /** Center label text for horizontal divider. 水平分割线的居中标签文本。 */
     label: string;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/basic/divider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../src/components/basic/divider.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD,qBACa,YAAa,SAAQ,YAAY;IACA,QAAQ,UAAS;IAChC,MAAM,UAAS;IAChB,KAAK,SAAM;IAEvC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAoDpB;IAEF,MAAM;CAiBP"}
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../src/components/basic/divider.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;GAUG;AACH,qBACa,YAAa,SAAQ,YAAY;IAC5C,yDAAyD;IACb,QAAQ,UAAS;IAC7D,kDAAkD;IACrB,MAAM,UAAS;IAC5C,8DAA8D;IAClC,KAAK,SAAM;IAEvC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAoDpB;IAEF,MAAM;CA+BP"}

package/dist/components/basic/divider.js

@@ -0,0 +1,127 @@
+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 { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Horizontal or vertical divider line with optional label.
+ * 水平或垂直分割线，支持可选标签。
+ *
+ * @slot - Default slot for divider label text (horizontal mode). 分割线标签文本（水平模式）。
+ * @example
+ * ```html
+ * <aithe-divider label="Section"></aithe-divider>
+ * <aithe-divider vertical dashed></aithe-divider>
+ * ```
+ */
+let AitheDivider = class AitheDivider extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the divider renders vertically. 是否垂直渲染分割线。 */
+        this.vertical = false;
+        /** Whether the line style is dashed. 是否使用虚线样式。 */
+        this.dashed = false;
+        /** Center label text for horizontal divider. 水平分割线的居中标签文本。 */
+        this.label = '';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      :host([vertical]) {
+        display: inline-flex;
+        width: auto;
+        height: 100%;
+      }
+
+      .divider {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        color: var(--aithe-color-text-subtle);
+        font-size: var(--aithe-font-size-sm);
+      }
+
+      .vertical {
+        width: auto;
+        height: 100%;
+      }
+
+      .line {
+        flex: 1;
+        border-top: 1px solid var(--aithe-color-border);
+      }
+
+      .line.dashed {
+        border-top-style: dashed;
+      }
+
+      .vertical .line {
+        width: 1px;
+        height: 100%;
+        border-top: none;
+        border-left: 1px solid var(--aithe-color-border);
+      }
+
+      .vertical .line.dashed {
+        border-left-style: dashed;
+      }
+
+      .label {
+        padding-inline: var(--aithe-space-3);
+        white-space: nowrap;
+      }
+    `,
+    ]; }
+    render() {
+        if (this.vertical) {
+            return html `
+        <span class="divider vertical" aria-orientation="vertical" role="separator">
+          <span class="line ${this.dashed ? 'dashed' : ''}"></span>
+        </span>
+      `;
+        }
+        const hasContent = this.label || this.textContent?.trim();
+        const dashedClass = this.dashed ? 'dashed' : '';
+        const contentSlot = this.label
+            ? html `
+          <span class="label">${this.label}</span>
+        `
+            : html `
+          <slot></slot>
+        `;
+        const trailingLine = hasContent
+            ? html `
+          <span class="line ${dashedClass}"></span>
+        `
+            : null;
+        return html `
+      <div class="divider" aria-orientation="horizontal" role="separator">
+        <span class="line ${dashedClass}"></span>
+        ${contentSlot} ${trailingLine}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheDivider.prototype, "vertical", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheDivider.prototype, "dashed", void 0);
+__decorate([
+    property({ type: String })
+], AitheDivider.prototype, "label", void 0);
+AitheDivider = __decorate([
+    customElement('aithe-divider')
+], AitheDivider);
+export { AitheDivider };

package/dist/components/basic/empty.d.ts

@@ -1,10 +1,19 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 import './icon';
 /**
- * Empty state placeholder.
+ * Empty state placeholder with icon and text.
+ * 空状态占位组件，显示图标和提示文本。
+ *
+ * @slot - Default slot for custom empty content (overrides icon + text). 自定义空状态内容。
+ * @example
+ * ```html
+ * <aithe-empty text="No results found" icon="sparkles"></aithe-empty>
+ * ```
  */
 export declare class AitheEmpty extends AitheElement {
+    /** Placeholder text. 占位提示文本。 */
     text: string;
+    /** Built-in icon name to display. 显示的内置图标名称。 */
     icon: string;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/basic/empty.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../../src/components/basic/empty.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,QAAQ,CAAC;AAEhB;;GAEG;AACH,qBACa,UAAW,SAAQ,YAAY;IACd,IAAI,SAAU;IACd,IAAI,SAAc;IAE9C,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAoBpB;IAEF,MAAM;CAUP"}
+{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../../src/components/basic/empty.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,QAAQ,CAAC;AAEhB;;;;;;;;;GASG;AACH,qBACa,UAAW,SAAQ,YAAY;IAC1C,gCAAgC;IACJ,IAAI,SAAM;IACtC,gDAAgD;IACpB,IAAI,SAAc;IAE9C,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAoBpB;IAEF,MAAM;CAUP"}

package/dist/components/basic/empty.js

@@ -0,0 +1,72 @@
+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 { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+import './icon';
+/**
+ * Empty state placeholder with icon and text.
+ * 空状态占位组件，显示图标和提示文本。
+ *
+ * @slot - Default slot for custom empty content (overrides icon + text). 自定义空状态内容。
+ * @example
+ * ```html
+ * <aithe-empty text="No results found" icon="sparkles"></aithe-empty>
+ * ```
+ */
+let AitheEmpty = class AitheEmpty extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Placeholder text. 占位提示文本。 */
+        this.text = '';
+        /** Built-in icon name to display. 显示的内置图标名称。 */
+        this.icon = 'sparkles';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .empty {
+        display: grid;
+        justify-items: center;
+        gap: var(--aithe-space-3);
+        padding: var(--aithe-space-7);
+        color: var(--aithe-color-text-muted);
+        text-align: center;
+      }
+
+      aithe-icon {
+        color: var(--aithe-primary-6);
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <div class="empty">
+        <slot>
+          <aithe-icon name=${this.icon} size="lg"></aithe-icon>
+          <div>${this.text || t('basic.empty.defaultText')}</div>
+        </slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheEmpty.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], AitheEmpty.prototype, "icon", void 0);
+AitheEmpty = __decorate([
+    customElement('aithe-empty')
+], AitheEmpty);
+export { AitheEmpty };

package/dist/components/basic/icon.d.ts

@@ -1,12 +1,91 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 /**
  * Vector icon entry for the Aithe UI icon system.
+ * 矢量图标组件，用于 Aithe UI 图标系统。
+ *
+ * Renders an SVG glyph from the built-in icon map based on the `name` property.
+ * Supports extended icon format: `(type)value` where type can be:
+ *   - `class` — built-in icon name (default, e.g. `(class)sparkles` or just `sparkles`)
+ *   - `auto` — auto-generate from first character of text (e.g. `(auto)User Name`)
+ *   - `url` | `share` | `remote` — load from URL (e.g. `(url)https://example.com/icon.svg`)
+ *     Supports `URL|AltText` format — shows alt first character on load failure.
+ *     支持 `URL|AltText` 格式，加载失败时显示 alt 首字符。
+ * All icons use a 24×24 viewBox, stroke-based rendering with `stroke-width: 1.8`,
+ * and inherit color via `currentColor`.
+ * 根据 `name` 属性从内置图标映射中渲染 SVG 图形。
+ * 所有图标使用 24×24 视口，基于描边渲染（stroke-width: 1.8），颜色继承 currentColor。
+ *
+ * For `auto` and `url` types, rendering is delegated to {@link IconUtil.render}.
+ * `auto` 和 `url` 类型委托给 {@link IconUtil.render} 渲染。
+ *
+ * Built-in icon names (60+ glyphs):
+ * 内置图标名称（60+ 图形）：
+ *
+ * **General / 通用**: sparkles, close, check, info, warning, image, search, plus, minus,
+ * menu, more, settings, home, star, heart, copy, download, upload, share, link,
+ * external, refresh, edit, trash, filter, sort, lock, unlock, eye, eyeOff, clock,
+ * calendar, pin, flag, bookmark, paperclip, tag, thumbUp, thumbDown
+ *
+ * **Arrows / 箭头**: arrowUp, arrowDown, arrowLeft, arrowRight, chevronUp, chevronDown,
+ * chevronLeft, chevronRight, expand, collapse
+ *
+ * **Status / 状态**: success, error, question
+ *
+ * **Media / 媒体**: play, pause, volume, mute, camera, video, music
+ *
+ * **Communication / 交流**: mail, bell, chat, phone
+ *
+ * **Data / 数据**: barChart, pieChart, database, code, terminal, file, folder
+ *
+ * **Layout / 布局**: grid, list, sidebar, maximize, minimize
+ *
+ * **User / 用户**: user, users
+ *
+ * **Weather / 天气**: sun, moon, cloud
+ *
+ * @slot - Default slot for custom SVG content (overrides built-in glyph).
+ *        默认插槽，用于自定义 SVG 内容（覆盖内置图形）。
+ *
+ * @cssproperty --aithe-icon-size - Controls the SVG width/height. Set dynamically from `size` property.
+ * @cssproperty --aithe-icon-color - Controls the host `color` which cascades to `stroke: currentColor`.
+ *
+ * @example
+ * ```html
+ * <!-- Built-in icon / 内置图标 -->
+ * <aithe-icon name="sparkles" size="lg" color="#4d8dff"></aithe-icon>
+ * <aithe-icon name="check" size="sm"></aithe-icon>
+ * <aithe-icon name="heart" color="var(--aithe-danger-6)"></aithe-icon>
+ *
+ * <!-- Size presets / 尺寸预设: xs sm md lg xl 2xl 3xl 4xl 5xl 6xl -->
+ * <aithe-icon name="search" size="xs"></aithe-icon>
+ * <aithe-icon name="search" size="xl"></aithe-icon>
+ * <aithe-icon name="search" size="6xl"></aithe-icon>
+ *
+ * <!-- Auto-generated text / 文本首字母 -->
+ * <aithe-icon name="(auto)User Name" size="md"></aithe-icon>
+ *
+ * <!-- Remote image with alt fallback / 远程图片带 alt 占位 -->
+ * <aithe-icon name="(url)https://example.com/icon.svg|User" size="md"></aithe-icon>
+ * ```
  */
 export declare class AitheIcon extends AitheElement {
+    /** Icon glyph name from the built-in map. 内置图标名称。 */
     name: string;
+    /** Custom stroke/fill color. 自定义颜色。 */
     color: string;
+    /** Icon size preset or explicit CSS value. 图标尺寸预设或显式 CSS 值。
+     *
+     * Resolved via {@link IconUtil.resolveSize} against {@link ICON_SIZE_MAP}.
+     * 通过 {@link IconUtil.resolveSize} 结合 {@link ICON_SIZE_MAP} 解析。
+     *
+     * Presets / 预设:
+     *   `xs`(12px), `sm`(16px), `md`(20px), `lg`(24px),
+     *   `xl`(28px), `2xl`(32px), `3xl`(48px), `4xl`(64px), `5xl`(96px), `6xl`(128px)
+     *
+     * Any valid CSS dimension also works (e.g. `"32px"`, `"2rem"`, `"24"` → `24px`).
+     * 也支持任意合法 CSS 尺寸值。 */
     size: string;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult | typeof import("lit-html").nothing;
 }
 //# sourceMappingURL=icon.d.ts.map