@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/components/data/tabs.d.ts

@@ -1,15 +1,93 @@
 import { AitheElement } from '../../core/aithe-element';
+/**
+ * Tab navigation container that manages tab-pane children.
+ * 标签页导航容器，管理 tab-pane 子组件。
+ *
+ * @slot - Default slot for `aithe-tab-pane` children. 默认插槽，用于 `aithe-tab-pane` 子组件。
+ * @slot extra - Slot for extra content rendered at the end of the tab bar (e.g. action buttons). 额外内容插槽，渲染在标签栏末尾（如操作按钮）。
+ *
+ * @fires aithe-change    - Emitted when the active tab changes with `{ activeKey }`. 活动标签页变更时发出 `{ activeKey }`。
+ * @fires aithe-tab-remove - Emitted when a closable tab is removed with `{ key }`. 可关闭标签页被移除时发出 `{ key }`。
+ * @fires aithe-tab-add   - Emitted when the add button is clicked. 添加按钮被点击时发出。
+ *
+ * @csspart nav - The tab navigation bar container. 标签导航栏容器。
+ * @csspart panel - The tab content panel area. 标签内容面板区域。
+ * @csspart tab - Individual tab button. 单个标签按钮。
+ * @csspart tab-active - Active tab button. 活动标签按钮。
+ * @csspart tab-disabled - Disabled tab button. 禁用标签按钮。
+ * @csspart remove-btn - Close button on closable tabs. 可关闭标签上的关闭按钮。
+ * @csspart add-btn - Add tab button. 添加标签按钮。
+ * @csspart overflow-select - Overflow dropdown select. 溢出下拉选择器。
+ * @csspart nav-extra - Extra content slot container. 额外内容插槽容器。
+ *
+ * @cssprop --aithe-tabs-nav-gap - Gap between tab items in the nav bar. 标签栏中标签项之间的间距。Default: `var(--aithe-space-2)`.
+ * @cssprop --aithe-tabs-nav-border-color - Bottom border color of the nav bar. 标签栏底部边框颜色。Default: `var(--aithe-color-border)`.
+ * @cssprop --aithe-tabs-tab-padding - Padding inside each tab button. 标签按钮内边距。Default: `0 var(--aithe-space-4)`.
+ * @cssprop --aithe-tabs-tab-min-height - Minimum height of each tab button. 标签按钮最小高度。Default: `38px`.
+ * @cssprop --aithe-tabs-tab-radius - Border radius of tab buttons. 标签按钮圆角。Default: `var(--aithe-radius-md)`.
+ * @cssprop --aithe-tabs-tab-color - Text color of inactive tabs. 非活动标签文字颜色。Default: `var(--aithe-color-text-muted)`.
+ * @cssprop --aithe-tabs-tab-active-color - Text color of active tabs (line type). 活动标签文字颜色（line 类型）。Default: `var(--aithe-primary-7)`.
+ * @cssprop --aithe-tabs-tab-active-border-color - Active indicator border color (line type). 活动标签指示器边框颜色（line 类型）。Default: `var(--aithe-primary-6)`.
+ * @cssprop --aithe-tabs-tab-active-bg - Background of active tabs (card/button type). 活动标签背景色（card/button 类型）。Default: `var(--aithe-color-surface-elevated)` / gradient.
+ * @cssprop --aithe-tabs-tab-disabled-opacity - Opacity of disabled tabs. 禁用标签的不透明度。Default: `0.48`.
+ *
+ * @example
+ * ```html
+ * <aithe-tabs type="card" active-key="a">
+ *   <aithe-tab-pane tab-id="a" label="Tab A">Content A</aithe-tab-pane>
+ *   <aithe-tab-pane tab-id="b" label="Tab B">Content B</aithe-tab-pane>
+ * </aithe-tabs>
+ * ```
+ */
 export declare class AitheTabs extends AitheElement {
+    /**
+     * Visual style of the tab navigation.
+     * 标签页导航的视觉样式。
+     *
+     * @values 'line' - Underline indicator style (default). 下划线指示器样式（默认）。
+     * @values 'card' - Card-style tabs with elevated active state. 卡片式标签，活动状态有阴影。
+     * @values 'button' - Button-style tabs with gradient fill. 按钮式标签，渐变色填充。
+     */
     type: 'line' | 'card' | 'button';
+    /**
+     * Key of the currently active tab pane.
+     * 当前活动标签页的键。
+     *
+     * When empty, the first non-disabled pane is automatically activated.
+     * 为空时自动激活第一个非禁用的面板。
+     */
     activeKey: string;
+    /**
+     * Whether to show an add button ("+") in the tab bar.
+     * 是否在标签栏中显示添加按钮（"+"）。
+     *
+     * Clicking the add button emits the `aithe-tab-add` event.
+     * 点击添加按钮会触发 `aithe-tab-add` 事件。
+     */
     addable: boolean;
-    private slotNodes;
+    /**
+     * Maximum number of visible tabs before overflowing into a dropdown menu.
+     * `0` means no limit (all tabs are shown).
+     * 最大可见标签页数量，超出部分折叠到下拉菜单中。`0` 表示不限制。
+     *
+     * When the number of tabs exceeds this value, extra tabs are hidden behind a
+     * "more" dropdown selector. The active tab is prioritized to stay visible.
+     * 当标签页数量超过此值时，多余的标签会折叠到"更多"下拉选择器中。活动标签会优先保持可见。
+     */
+    maxVisibleTabs: number;
+    private readonly slotNodes;
     private panes;
+    private visiblePanes;
+    private overflowPanes;
+    private get overflowOptions();
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
-    private syncPanes;
+    private readonly handleOverflowChange;
+    private renderTab;
+    private readonly syncPanes;
+    private splitPanes;
     private activate;
     private removePane;
-    private handleKeydown;
+    private readonly handleKeydown;
     render(): import("lit-html").TemplateResult<1>;
 }
 export declare class AitheTabGroup extends AitheTabs {

package/dist/components/data/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/data/tabs.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIxD,qBACa,SAAU,SAAQ,YAAY;IACb,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAU;IACjB,SAAS,SAAM;IACvC,OAAO,UAAS;IAEpB,OAAO,CAAC,SAAS,CAAa;IAC9C,OAAO,CAAC,KAAK,CAAsB;IAE5C,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAyFpB;IAEF,OAAO,CAAC,SAAS,CAaf;IAEF,OAAO,CAAC,QAAQ;IAWhB,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,aAAa,CAmBnB;IAEF,MAAM;CAkDP;AAED,qBACa,aAAc,SAAQ,SAAS;CAAG"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/data/tabs.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAMnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,qBACa,SAAU,SAAQ,YAAY;IACzC;;;;;;;OAOG;IACyB,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAU;IACtE;;;;;;OAMG;IACkD,SAAS,SAAM;IACpE;;;;;;OAMG;IAC0B,OAAO,UAAS;IAC7C;;;;;;;;OAQG;IACwD,cAAc,SAAK;IAErD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAa;IACvD,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,CAAC,aAAa,CAAsB;IAEpD,OAAO,KAAK,eAAe,GAO1B;IAED,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAuHpB;IAEF,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAKnC;IAEF,OAAO,CAAC,SAAS;IAuCjB,OAAO,CAAC,QAAQ,CAAC,SAAS,CAoBxB;IAEF,OAAO,CAAC,UAAU;IAmBlB,OAAO,CAAC,QAAQ;IAWhB,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAmB5B;IAEF,MAAM;CA2CP;AAED,qBACa,aAAc,SAAQ,SAAS;CAAG"}

package/dist/components/data/tabs.js

@@ -0,0 +1,416 @@
+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 { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+/**
+ * Tab navigation container that manages tab-pane children.
+ * 标签页导航容器，管理 tab-pane 子组件。
+ *
+ * @slot - Default slot for `aithe-tab-pane` children. 默认插槽，用于 `aithe-tab-pane` 子组件。
+ * @slot extra - Slot for extra content rendered at the end of the tab bar (e.g. action buttons). 额外内容插槽，渲染在标签栏末尾（如操作按钮）。
+ *
+ * @fires aithe-change    - Emitted when the active tab changes with `{ activeKey }`. 活动标签页变更时发出 `{ activeKey }`。
+ * @fires aithe-tab-remove - Emitted when a closable tab is removed with `{ key }`. 可关闭标签页被移除时发出 `{ key }`。
+ * @fires aithe-tab-add   - Emitted when the add button is clicked. 添加按钮被点击时发出。
+ *
+ * @csspart nav - The tab navigation bar container. 标签导航栏容器。
+ * @csspart panel - The tab content panel area. 标签内容面板区域。
+ * @csspart tab - Individual tab button. 单个标签按钮。
+ * @csspart tab-active - Active tab button. 活动标签按钮。
+ * @csspart tab-disabled - Disabled tab button. 禁用标签按钮。
+ * @csspart remove-btn - Close button on closable tabs. 可关闭标签上的关闭按钮。
+ * @csspart add-btn - Add tab button. 添加标签按钮。
+ * @csspart overflow-select - Overflow dropdown select. 溢出下拉选择器。
+ * @csspart nav-extra - Extra content slot container. 额外内容插槽容器。
+ *
+ * @cssprop --aithe-tabs-nav-gap - Gap between tab items in the nav bar. 标签栏中标签项之间的间距。Default: `var(--aithe-space-2)`.
+ * @cssprop --aithe-tabs-nav-border-color - Bottom border color of the nav bar. 标签栏底部边框颜色。Default: `var(--aithe-color-border)`.
+ * @cssprop --aithe-tabs-tab-padding - Padding inside each tab button. 标签按钮内边距。Default: `0 var(--aithe-space-4)`.
+ * @cssprop --aithe-tabs-tab-min-height - Minimum height of each tab button. 标签按钮最小高度。Default: `38px`.
+ * @cssprop --aithe-tabs-tab-radius - Border radius of tab buttons. 标签按钮圆角。Default: `var(--aithe-radius-md)`.
+ * @cssprop --aithe-tabs-tab-color - Text color of inactive tabs. 非活动标签文字颜色。Default: `var(--aithe-color-text-muted)`.
+ * @cssprop --aithe-tabs-tab-active-color - Text color of active tabs (line type). 活动标签文字颜色（line 类型）。Default: `var(--aithe-primary-7)`.
+ * @cssprop --aithe-tabs-tab-active-border-color - Active indicator border color (line type). 活动标签指示器边框颜色（line 类型）。Default: `var(--aithe-primary-6)`.
+ * @cssprop --aithe-tabs-tab-active-bg - Background of active tabs (card/button type). 活动标签背景色（card/button 类型）。Default: `var(--aithe-color-surface-elevated)` / gradient.
+ * @cssprop --aithe-tabs-tab-disabled-opacity - Opacity of disabled tabs. 禁用标签的不透明度。Default: `0.48`.
+ *
+ * @example
+ * ```html
+ * <aithe-tabs type="card" active-key="a">
+ *   <aithe-tab-pane tab-id="a" label="Tab A">Content A</aithe-tab-pane>
+ *   <aithe-tab-pane tab-id="b" label="Tab B">Content B</aithe-tab-pane>
+ * </aithe-tabs>
+ * ```
+ */
+let AitheTabs = class AitheTabs extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Visual style of the tab navigation.
+         * 标签页导航的视觉样式。
+         *
+         * @values 'line' - Underline indicator style (default). 下划线指示器样式（默认）。
+         * @values 'card' - Card-style tabs with elevated active state. 卡片式标签，活动状态有阴影。
+         * @values 'button' - Button-style tabs with gradient fill. 按钮式标签，渐变色填充。
+         */
+        this.type = 'line';
+        /**
+         * Key of the currently active tab pane.
+         * 当前活动标签页的键。
+         *
+         * When empty, the first non-disabled pane is automatically activated.
+         * 为空时自动激活第一个非禁用的面板。
+         */
+        this.activeKey = '';
+        /**
+         * Whether to show an add button ("+") in the tab bar.
+         * 是否在标签栏中显示添加按钮（"+"）。
+         *
+         * Clicking the add button emits the `aithe-tab-add` event.
+         * 点击添加按钮会触发 `aithe-tab-add` 事件。
+         */
+        this.addable = false;
+        /**
+         * Maximum number of visible tabs before overflowing into a dropdown menu.
+         * `0` means no limit (all tabs are shown).
+         * 最大可见标签页数量，超出部分折叠到下拉菜单中。`0` 表示不限制。
+         *
+         * When the number of tabs exceeds this value, extra tabs are hidden behind a
+         * "more" dropdown selector. The active tab is prioritized to stay visible.
+         * 当标签页数量超过此值时，多余的标签会折叠到"更多"下拉选择器中。活动标签会优先保持可见。
+         */
+        this.maxVisibleTabs = 0;
+        this.panes = [];
+        this.visiblePanes = [];
+        this.overflowPanes = [];
+        this.handleOverflowChange = (event) => {
+            const key = event.detail.value;
+            if (key) {
+                this.activate(key);
+            }
+        };
+        this.syncPanes = () => {
+            this.panes = this.slotNodes.filter((node) => node instanceof HTMLElement && node.tagName.toLowerCase() === 'aithe-tab-pane');
+            if (!this.activeKey) {
+                const firstEnabled = this.panes.find((pane) => !pane.disabled);
+                this.activeKey = firstEnabled?.tabId ?? firstEnabled?.label ?? '';
+            }
+            let index = 0;
+            for (const pane of this.panes) {
+                const key = pane.tabId || pane.label || `${index}`;
+                pane.tabId = key;
+                pane.active = key === this.activeKey;
+                index++;
+            }
+            this.splitPanes();
+        };
+        this.handleKeydown = (event) => {
+            const enabled = this.panes.filter((pane) => !pane.disabled);
+            const currentIndex = enabled.findIndex((pane) => pane.tabId === this.activeKey);
+            if (event.key === 'ArrowRight') {
+                event.preventDefault();
+                const next = enabled[(currentIndex + 1) % enabled.length];
+                if (next) {
+                    this.activate(next.tabId);
+                }
+            }
+            if (event.key === 'ArrowLeft') {
+                event.preventDefault();
+                const next = enabled[(currentIndex - 1 + enabled.length) % enabled.length];
+                if (next) {
+                    this.activate(next.tabId);
+                }
+            }
+        };
+    }
+    get overflowOptions() {
+        return this.overflowPanes.map((pane) => ({
+            id: pane.tabId,
+            label: pane.label,
+            icon: pane.icon,
+            disabled: pane.disabled,
+        }));
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .tabs {
+        display: grid;
+        gap: var(--aithe-space-lg);
+      }
+
+      .tabs.line {
+        gap: 0;
+      }
+
+      .nav {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        flex-wrap: wrap;
+        border-bottom: 1px solid var(--aithe-color-border);
+        padding-bottom: var(--aithe-space-3);
+      }
+
+      .nav.card,
+      .nav.button {
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+
+      .nav.line {
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+
+      .tab {
+        display: inline-flex;
+        align-items: center;
+        min-height: 38px;
+        padding: 0 var(--aithe-space-4);
+        border: 1px solid transparent;
+        border-radius: var(--aithe-radius-md);
+        background: transparent;
+        color: var(--aithe-color-text-muted);
+        cursor: pointer;
+        transition:
+          background var(--aithe-duration-fast) var(--aithe-ease-standard),
+          color var(--aithe-duration-fast) var(--aithe-ease-standard),
+          border-color var(--aithe-duration-fast) var(--aithe-ease-standard);
+      }
+
+      .tab-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .nav-item {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-1);
+      }
+
+      .tab.active.line {
+        color: var(--aithe-primary-7);
+        border-bottom-color: var(--aithe-primary-6);
+      }
+
+      .tab.active.card {
+        border-color: var(--aithe-color-border);
+        background: var(--aithe-color-surface-elevated);
+        box-shadow: var(--aithe-shadow-1);
+        color: var(--aithe-color-text);
+      }
+
+      .tab.active.button {
+        background: linear-gradient(180deg, var(--aithe-primary-6), var(--aithe-primary-7));
+        color: var(--aithe-color-text-on-primary, #ffffff);
+      }
+
+      .tab.active.button .tab-icon {
+        color: var(--aithe-color-text-on-primary, #ffffff);
+      }
+
+      .tab.disabled {
+        opacity: 0.48;
+        cursor: not-allowed;
+      }
+
+      .remove,
+      .add {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border: none;
+        border-radius: 50%;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+      }
+
+      .panel {
+        min-width: 0;
+      }
+
+      .overflow-select {
+        width: auto;
+        min-width: 80px;
+      }
+
+      .nav-extra {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        margin-left: auto;
+      }
+    `,
+    ]; }
+    renderTab(pane) {
+        return html `
+      <span class="nav-item">
+        <button
+          class=${classMap({
+            tab: true,
+            [this.type]: true,
+            active: pane.tabId === this.activeKey,
+            disabled: pane.disabled,
+        })}
+          aria-selected=${String(pane.tabId === this.activeKey)}
+          role="tab"
+          type="button"
+          @click=${() => this.activate(pane.tabId)}
+        >
+          <span style="display:inline-flex;align-items:center;gap:var(--aithe-space-2);">
+            ${pane.icon
+            ? html `
+                  <aithe-icon class="tab-icon" name=${pane.icon} size="14"></aithe-icon>
+                `
+            : nothing}${pane.label}
+          </span>
+        </button>
+        ${pane.closable
+            ? html `
+              <button
+                class="remove"
+                type="button"
+                aria-label=${t('data.tabs.removeTabAriaLabel')}
+                @click=${(event) => this.removePane(event, pane)}
+              >
+                ×
+              </button>
+            `
+            : null}
+      </span>
+    `;
+    }
+    splitPanes() {
+        const max = this.maxVisibleTabs;
+        if (max <= 0 || max >= this.panes.length) {
+            this.visiblePanes = [...this.panes];
+            this.overflowPanes = [];
+            return;
+        }
+        const activeIndex = this.panes.findIndex((p) => p.tabId === this.activeKey);
+        if (activeIndex >= 0 && activeIndex < max - 1) {
+            this.visiblePanes = this.panes.slice(0, max - 1);
+            this.overflowPanes = this.panes.slice(max - 1);
+        }
+        else {
+            const before = max - 1;
+            this.visiblePanes = this.panes.slice(0, before);
+            this.overflowPanes = this.panes.slice(before);
+        }
+    }
+    activate(key) {
+        const pane = this.panes.find((item) => item.tabId === key);
+        if (!pane || pane.disabled) {
+            return;
+        }
+        this.activeKey = key;
+        this.syncPanes();
+        this.emit('aithe-change', { activeKey: key });
+    }
+    removePane(event, pane) {
+        event.stopPropagation();
+        const currentIndex = this.panes.indexOf(pane);
+        pane.remove();
+        this.syncPanes();
+        if (pane.tabId === this.activeKey) {
+            const fallback = this.panes[currentIndex] ?? this.panes[currentIndex - 1];
+            this.activeKey = fallback?.tabId ?? '';
+            this.syncPanes();
+        }
+        this.emit('aithe-tab-remove', { key: pane.tabId });
+    }
+    render() {
+        return html `
+      <div class="tabs">
+        <div
+          class=${classMap({ nav: true, [this.type]: true })}
+          role="tablist"
+          @keydown=${this.handleKeydown}
+        >
+          ${this.visiblePanes.map((pane) => this.renderTab(pane))}
+          ${this.overflowPanes.length > 0
+            ? html `
+                <aithe-select
+                  class="overflow-select"
+                  icon="more"
+                  .options=${this.overflowOptions}
+                  value=${this.overflowPanes.find((p) => p.tabId === this.activeKey)?.tabId ?? ''}
+                  placement="bottom-start"
+                  @aithe-change=${this.handleOverflowChange}
+                ></aithe-select>
+              `
+            : nothing}
+          ${this.addable
+            ? html `
+                <button
+                  class="add"
+                  type="button"
+                  aria-label=${t('data.tabs.addTabAriaLabel')}
+                  @click=${() => this.emit('aithe-tab-add')}
+                >
+                  +
+                </button>
+              `
+            : null}
+          <span class="nav-extra">
+            <slot name="extra"></slot>
+          </span>
+        </div>
+        <div class="panel">
+          <slot @slotchange=${this.syncPanes}></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheTabs.prototype, "type", void 0);
+__decorate([
+    property({ type: String, attribute: 'active-key' })
+], AitheTabs.prototype, "activeKey", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheTabs.prototype, "addable", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-visible-tabs' })
+], AitheTabs.prototype, "maxVisibleTabs", void 0);
+__decorate([
+    queryAssignedElements()
+], AitheTabs.prototype, "slotNodes", void 0);
+__decorate([
+    state()
+], AitheTabs.prototype, "panes", void 0);
+__decorate([
+    state()
+], AitheTabs.prototype, "visiblePanes", void 0);
+__decorate([
+    state()
+], AitheTabs.prototype, "overflowPanes", void 0);
+AitheTabs = __decorate([
+    customElement('aithe-tabs')
+], AitheTabs);
+export { AitheTabs };
+let AitheTabGroup = class AitheTabGroup extends AitheTabs {
+};
+AitheTabGroup = __decorate([
+    customElement('aithe-tab-group')
+], AitheTabGroup);
+export { AitheTabGroup };

package/dist/components/data/timeline-item.d.ts

@@ -0,0 +1,24 @@
+import { AitheElement } from '../../core/aithe-element';
+/**
+ * Single node inside `aithe-timeline` with timestamp and color variant.
+ * 时间线节点，用于 aithe-timeline 内部，包含时间戳和颜色类型。
+ *
+ * @slot - Default slot for timeline item content. 时间线节点内容。
+ * @example
+ * ```html
+ * <aithe-timeline-item timestamp="2024-03-15" type="success" dot="✓">
+ *   Task completed successfully
+ * </aithe-timeline-item>
+ * ```
+ */
+export declare class AitheTimelineItem extends AitheElement {
+    /** Timestamp label text. 时间戳标签文本。 */
+    timestamp: string;
+    /** Color variant for the dot indicator. 圆点指示器的颜色类型。 */
+    type: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+    /** Custom dot content (overrides default circle). 自定义圆点内容（覆盖默认圆圈）。 */
+    dot: string;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=timeline-item.d.ts.map

package/dist/components/data/timeline-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-item.d.ts","sourceRoot":"","sources":["../../../src/components/data/timeline-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;GAWG;AACH,qBACa,iBAAkB,SAAQ,YAAY;IACjD,qCAAqC;IACT,SAAS,SAAM;IAC3C,uDAAuD;IAC3B,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAC9E;IACZ,sEAAsE;IAC1C,GAAG,SAAM;IAErC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAmEpB;IAEF,MAAM;CAaP"}

package/dist/components/data/timeline-item.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';
+/**
+ * Single node inside `aithe-timeline` with timestamp and color variant.
+ * 时间线节点，用于 aithe-timeline 内部，包含时间戳和颜色类型。
+ *
+ * @slot - Default slot for timeline item content. 时间线节点内容。
+ * @example
+ * ```html
+ * <aithe-timeline-item timestamp="2024-03-15" type="success" dot="✓">
+ *   Task completed successfully
+ * </aithe-timeline-item>
+ * ```
+ */
+let AitheTimelineItem = class AitheTimelineItem extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Timestamp label text. 时间戳标签文本。 */
+        this.timestamp = '';
+        /** Color variant for the dot indicator. 圆点指示器的颜色类型。 */
+        this.type = 'default';
+        /** Custom dot content (overrides default circle). 自定义圆点内容（覆盖默认圆圈）。 */
+        this.dot = '';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        position: relative;
+        display: grid;
+        grid-template-columns: 20px minmax(0, 1fr);
+        gap: var(--aithe-space-4);
+      }
+
+      :host(:not(:last-child))::after {
+        content: '';
+        position: absolute;
+        top: 18px;
+        left: 9px;
+        bottom: -18px;
+        width: 2px;
+        background: var(--aithe-color-border);
+      }
+
+      .dot {
+        position: relative;
+        z-index: 1;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: var(--aithe-color-surface-elevated);
+        border: 2px solid var(--aithe-color-border-strong);
+        color: var(--aithe-color-text-muted);
+        font-size: 10px;
+        box-shadow: 0 0 0 4px var(--aithe-color-bg);
+      }
+
+      .dot.primary {
+        border-color: var(--aithe-primary-6);
+        color: var(--aithe-primary-6);
+      }
+
+      .dot.success {
+        border-color: var(--aithe-success-6);
+        color: var(--aithe-success-6);
+      }
+
+      .dot.warning {
+        border-color: var(--aithe-warning-6);
+        color: var(--aithe-warning-6);
+      }
+
+      .dot.danger {
+        border-color: var(--aithe-danger-6);
+        color: var(--aithe-danger-6);
+      }
+
+      .content {
+        display: grid;
+        gap: var(--aithe-space-2);
+        padding-bottom: var(--aithe-space-6);
+      }
+
+      .timestamp {
+        color: var(--aithe-color-text-subtle);
+        font-size: var(--aithe-font-size-sm);
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <span class="dot ${this.type}">${this.dot || ''}</span>
+      <div class="content">
+        <slot></slot>
+        ${this.timestamp
+            ? html `
+              <span class="timestamp">${this.timestamp}</span>
+            `
+            : null}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheTimelineItem.prototype, "timestamp", void 0);
+__decorate([
+    property({ type: String })
+], AitheTimelineItem.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], AitheTimelineItem.prototype, "dot", void 0);
+AitheTimelineItem = __decorate([
+    customElement('aithe-timeline-item')
+], AitheTimelineItem);
+export { AitheTimelineItem };