@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/display/mini-box.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @file AitheMiniBox — compact record display base class / AitheMiniBox — 紧凑记录展示基类
+ * @description AitheMiniBox is the base class for the Box component family (MiniBox, BriefBox, DetailBox).
+ *              Provides selectable/selected properties and shared layout utilities.
+ *              AitheMiniBox 是 Box 组件族（MiniBox、BriefBox、DetailBox）的基类。
+ *              提供 selectable/selected 属性和共享布局工具。
+ *
+ * @slot name - Primary label / title region. 主标签/标题区域。
+ * @slot status - Status indicator region. 状态指示器区域。
+ *
+ * @fires aithe-box-click - Fired when the box is clicked. 点击 box 时触发。
+ * @fires aithe-selected-change - Fired when selected changes via checkbox. selected 变化时触发。
+ */
+import { type TemplateResult } from 'lit';
+import { AitheElement } from '../../core/aithe-element';
+import type { AitheSelectableType } from '../../core/types';
+export declare class AitheMiniBox extends AitheElement {
+    selected: boolean;
+    selectable: AitheSelectableType;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    protected handleSelectChange(e: Event): void;
+    protected renderCheckbox(): TemplateResult;
+    protected handleBoxClick(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'aithe-mini-box': AitheMiniBox;
+    }
+}
+//# sourceMappingURL=mini-box.d.ts.map

package/dist/components/display/mini-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mini-box.d.ts","sourceRoot":"","sources":["../../../src/components/display/mini-box.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIrD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAEvD,qBACa,YAAa,SAAQ,YAAY;IACA,QAAQ,UAAS;IAEjC,UAAU,EAAE,mBAAmB,CAAU;IAErE,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA6DpB;IAEF,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAM5C,SAAS,CAAC,cAAc,IAAI,cAAc;IAc1C,SAAS,CAAC,cAAc,IAAI,IAAI;IAIvB,MAAM,IAAI,cAAc;CAalC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/components/display/mini-box.js

@@ -0,0 +1,137 @@
+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;
+};
+/**
+ * @file AitheMiniBox — compact record display base class / AitheMiniBox — 紧凑记录展示基类
+ * @description AitheMiniBox is the base class for the Box component family (MiniBox, BriefBox, DetailBox).
+ *              Provides selectable/selected properties and shared layout utilities.
+ *              AitheMiniBox 是 Box 组件族（MiniBox、BriefBox、DetailBox）的基类。
+ *              提供 selectable/selected 属性和共享布局工具。
+ *
+ * @slot name - Primary label / title region. 主标签/标题区域。
+ * @slot status - Status indicator region. 状态指示器区域。
+ *
+ * @fires aithe-box-click - Fired when the box is clicked. 点击 box 时触发。
+ * @fires aithe-selected-change - Fired when selected changes via checkbox. selected 变化时触发。
+ */
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { aitheBaseStyles } from '../../core/styles';
+import { AitheElement } from '../../core/aithe-element';
+let AitheMiniBox = class AitheMiniBox extends AitheElement {
+    constructor() {
+        super(...arguments);
+        this.selected = false;
+        this.selectable = 'none';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        box-sizing: border-box;
+        font-family: var(--aithe-font-family);
+        color: var(--aithe-color-text);
+        background: var(--aithe-color-surface);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        transition:
+          border-color var(--aithe-duration-fast) var(--aithe-ease-standard),
+          box-shadow var(--aithe-duration-fast) var(--aithe-ease-standard);
+      }
+
+      :host(:hover) {
+        border-color: var(--aithe-primary-5);
+        background: var(--aithe-color-surface-hover, rgba(0,0,0,0.02));
+      }
+
+      :host([selected]) {
+        border-color: var(--aithe-primary-6);
+        box-shadow: 0 0 0 1px var(--aithe-primary-6);
+      }
+
+      .box-inner {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--aithe-space-2, 8px);
+        padding: var(--aithe-space-3, 12px);
+      }
+
+      .box-check {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+      }
+
+      .box-check input {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+        accent-color: var(--aithe-primary-6);
+      }
+
+      .box-body {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--aithe-space-2, 8px);
+      }
+
+      .box-status {
+        margin-left: auto;
+        flex-shrink: 0;
+      }
+    `,
+    ]; }
+    handleSelectChange(e) {
+        const checkbox = e.target;
+        this.selected = checkbox.checked;
+        this.emit('selected-change', { selected: this.selected });
+    }
+    renderCheckbox() {
+        if (this.selectable === 'none')
+            return html ``;
+        return html `
+      <div class="box-check" part="select">
+        <input
+          type="checkbox"
+          .checked=${this.selected}
+          @change=${this.handleSelectChange}
+          @click=${(e) => e.stopPropagation()}
+        />
+      </div>
+    `;
+    }
+    handleBoxClick() {
+        this.emit('aithe-box-click', { selected: this.selected });
+    }
+    render() {
+        return html `
+      <div class="box-inner" @click=${this.handleBoxClick}>
+        ${this.renderCheckbox()}
+        <div class="box-body">
+          <slot name="name"></slot>
+          <div class="box-status" part="status">
+            <slot name="status"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheMiniBox.prototype, "selected", void 0);
+__decorate([
+    property({ type: String })
+], AitheMiniBox.prototype, "selectable", void 0);
+AitheMiniBox = __decorate([
+    customElement('aithe-mini-box')
+], AitheMiniBox);
+export { AitheMiniBox };

package/dist/components/display/profile.d.ts

@@ -0,0 +1,18 @@
+import { AitheElement } from '../../core/aithe-element';
+export declare class AitheProfile extends AitheElement {
+    icon: string;
+    iconSize: string;
+    iconShape: 'circle' | 'square' | 'none';
+    title: string;
+    desc: string;
+    titleEllipsis: boolean;
+    descEllipsis: boolean;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'aithe-profile': AitheProfile;
+    }
+}
+//# sourceMappingURL=profile.d.ts.map

package/dist/components/display/profile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile.d.ts","sourceRoot":"","sources":["../../../src/components/display/profile.ts"],"names":[],"mappings":"AA2BA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,qBACa,YAAa,SAAQ,YAAY;IAChB,IAAI,SAAM;IAEc,QAAQ,SAAQ;IAEf,SAAS,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAU;IAE1E,KAAK,SAAM;IAEX,IAAI,SAAM;IAEoB,aAAa,UAAQ;IAEtB,YAAY,UAAQ;IAE7E,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA4CpB;IAEO,MAAM;CAmDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/components/display/profile.js

@@ -0,0 +1,164 @@
+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;
+};
+/**
+ * @file AitheProfile — profile display component / AitheProfile — 档案展示组件
+ * @description AitheProfile renders a fixed left-right layout: icon/avatar on the left,
+ *              title and description on the right. Designed as the standard name region
+ *              component for the Box component family.
+ *              Icon supports `(class)xxx` format for class-based icons, or auto-generates
+ *              from the first character of title when icon is empty.
+ *              AitheProfile 渲染固定左右布局：左侧图标/头像，右侧标题和描述。
+ *              作为 Box 组件族的标准 name 区域组件。
+ *              Icon 支持 `(class)xxx` 格式使用 class 图标，icon 为空时自动用 title 首字符生成。
+ *
+ * @slot icon - Custom icon/avatar region. 自定义图标/头像区域。
+ * @slot title - Custom title region. 自定义标题区域。
+ * @slot desc - Custom description region. 自定义描述区域。
+ *
+ * @csspart title - The title region container. 标题区域容器。
+ * @csspart desc - The description region container. 描述区域容器。
+ *
+ * @example
+ * ```html
+ * <aithe-profile title="Project Alpha" desc="Frontend application" icon="app"></aithe-profile>
+ * ```
+ */
+import { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { aitheBaseStyles } from '../../core/styles';
+import { AitheElement } from '../../core/aithe-element';
+let AitheProfile = class AitheProfile extends AitheElement {
+    constructor() {
+        super(...arguments);
+        this.icon = '';
+        this.iconSize = 'lg';
+        this.iconShape = 'none';
+        this.title = '';
+        this.desc = '';
+        this.titleEllipsis = true;
+        this.descEllipsis = true;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-3, 12px);
+        font-family: var(--aithe-font-family);
+        color: var(--aithe-color-text);
+      }
+
+      .profile-body {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--aithe-space-1, 4px);
+      }
+
+      .profile-title {
+        font-size: var(--aithe-font-size-sm);
+        font-weight: var(--aithe-font-weight-medium, 500);
+        color: var(--aithe-color-text);
+        line-height: 1.4;
+      }
+
+      .profile-title.ellipsis {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .profile-desc {
+        font-size: var(--aithe-font-size-xs);
+        color: var(--aithe-color-text-secondary);
+        line-height: 1.4;
+      }
+
+      .profile-desc.ellipsis {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    `,
+    ]; }
+    render() {
+        const hasIconSlot = this.querySelector('[slot="icon"]') != null;
+        const hasTitleSlot = this.querySelector('[slot="title"]') != null;
+        const hasDescSlot = this.querySelector('[slot="desc"]') != null;
+        const showAvatar = hasIconSlot || this.icon || this.title;
+        let iconContent;
+        if (hasIconSlot) {
+            iconContent = html `
+        <slot name="icon"></slot>
+      `;
+        }
+        else if (this.iconShape === 'none') {
+            iconContent = html `
+        <aithe-icon name=${this.icon || this.title} size=${this.iconSize}></aithe-icon>
+      `;
+        }
+        else {
+            iconContent = html `
+        <aithe-avatar
+          text=${this.icon || this.title}
+          size=${this.iconSize}
+          shape=${this.iconShape}
+        ></aithe-avatar>
+      `;
+        }
+        const titleClass = this.titleEllipsis ? 'profile-title ellipsis' : 'profile-title';
+        const descClass = this.descEllipsis ? 'profile-desc ellipsis' : 'profile-desc';
+        const titleAttr = this.titleEllipsis ? this.title : nothing;
+        const descAttr = this.descEllipsis ? this.desc : nothing;
+        return html `
+      ${showAvatar ? iconContent : nothing}
+      <div class="profile-body">
+        ${hasTitleSlot || this.title
+            ? html `
+              <div class="${titleClass}" part="title" title=${titleAttr}>
+                <slot name="title">${this.title}</slot>
+              </div>
+            `
+            : nothing}
+        ${hasDescSlot || this.desc
+            ? html `
+              <div class="${descClass}" part="desc" title=${descAttr}>
+                <slot name="desc">${this.desc}</slot>
+              </div>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheProfile.prototype, "icon", void 0);
+__decorate([
+    property({ type: String, attribute: 'icon-size' })
+], AitheProfile.prototype, "iconSize", void 0);
+__decorate([
+    property({ type: String, attribute: 'icon-shape' })
+], AitheProfile.prototype, "iconShape", void 0);
+__decorate([
+    property({ type: String })
+], AitheProfile.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheProfile.prototype, "desc", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'title-ellipsis' })
+], AitheProfile.prototype, "titleEllipsis", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'desc-ellipsis' })
+], AitheProfile.prototype, "descEllipsis", void 0);
+AitheProfile = __decorate([
+    customElement('aithe-profile')
+], AitheProfile);
+export { AitheProfile };

package/dist/components/feedback/AGENTS.md

@@ -27,4 +27,5 @@
 - `aithe-tooltip` 通过 `content` 属性设置提示内容
 - `aithe-toast` 和 `aithe-notification` 支持编程式调用
 - `aithe-drawer` 通过 `placement` 控制从哪侧滑出（left/right/top/bottom）
+- 浮层类组件统一使用 `aithe-dropdown-change` 事件名（替代已废弃的 `aithe-open-change`）通知开关状态变更
 - 新增组件需同步更新 `src/index.ts` 和 `docs/api/feedback/`

package/dist/components/feedback/alert.js

@@ -0,0 +1,150 @@
+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';
+/**
+ * Inline banner / alert strip with optional close button.
+ * 内联横幅/警告条，支持可选关闭按钮。
+ *
+ * @slot - Default slot for alert body content. 警告正文内容。
+ * @fires aithe-close - Emitted when the alert is closed. 关闭时触发。
+ * @example
+ * ```html
+ * <aithe-alert type="warning" title="Warning" closable>
+ *   Please review before proceeding.
+ * </aithe-alert>
+ * ```
+ */
+let AitheAlert = class AitheAlert extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Alert color variant. 警告颜色类型。 */
+        this.type = 'default';
+        /** Alert title text. 警告标题文本。 */
+        this.title = '';
+        /** Icon name to display before the title. 在标题前显示的图标名称。 */
+        this.icon = '';
+        /** Whether the alert shows a close button. 是否显示关闭按钮。 */
+        this.closable = false;
+        /** Whether the alert renders as a full-width banner. 是否以全宽横幅样式渲染。 */
+        this.banner = false;
+        /** Whether the alert is visible (open). 是否可见（打开）。 */
+        this.open = true;
+        this.close = () => {
+            this.open = false;
+            this.emit('aithe-close');
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .alert {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: var(--aithe-space-4);
+        padding: var(--aithe-space-4);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        background: var(--aithe-color-surface-elevated);
+      }
+
+      .alert.banner {
+        border-radius: var(--aithe-container-radius-md);
+      }
+
+      .title {
+        margin: 0 0 var(--aithe-space-1);
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        font-weight: var(--aithe-font-weight-semibold);
+      }
+
+      .title-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .success {
+        border-color: rgba(53, 166, 111, 0.24);
+      }
+
+      .warning {
+        border-color: rgba(209, 143, 41, 0.24);
+      }
+
+      .danger {
+        border-color: rgba(223, 82, 107, 0.24);
+      }
+
+      button {
+        border: none;
+        background: transparent;
+        color: var(--aithe-color-text-subtle);
+        cursor: pointer;
+      }
+    `,
+    ]; }
+    render() {
+        if (!this.open)
+            return html ``;
+        const titleIcon = this.icon
+            ? html `
+          <aithe-icon class="title-icon" name=${this.icon} size="16"></aithe-icon>
+        `
+            : nothing;
+        const titleBlock = this.title
+            ? html `
+          <div class="title">${titleIcon}${this.title}</div>
+        `
+            : null;
+        const closeBtn = this.closable
+            ? html `
+          <button type="button" @click=${this.close}>×</button>
+        `
+            : null;
+        return html `
+      <div class=${classMap({ alert: true, banner: this.banner, [this.type]: true })}>
+        <div>
+          ${titleBlock}
+          <slot></slot>
+        </div>
+        ${closeBtn}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheAlert.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], AitheAlert.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheAlert.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheAlert.prototype, "closable", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheAlert.prototype, "banner", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheAlert.prototype, "open", void 0);
+AitheAlert = __decorate([
+    customElement('aithe-alert')
+], AitheAlert);
+export { AitheAlert };