@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/data/metrics.js

@@ -0,0 +1,309 @@
+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 Metrics display component / 业务指标展示组件
+ * @description Displays a business metric with label, value, and an optional slot for custom content.
+ *              Supports variant-based color styling for the value, an optional divider,
+ *              and data-driven mode via the inherited `params` and `data` properties from AitheWidget.
+ *              `params` takes precedence over `data` for overlapping fields.
+ *              展示业务指标，含标签、数值和可选的自定义内容插槽。数值支持基于 variant 的颜色样式，
+ *              支持可选分割线。通过 AitheWidget 继承的 `params` 和 `data` 属性支持数据驱动模式，
+ *              `params` 中同名字段优先级高于 `data`。
+ */
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { aitheBaseStyles } from '../../core/styles';
+import { AitheWidget } from '../../core/aithe-widget';
+import { filterFactory } from '../../core/filter';
+/**
+ * A business metrics display component. Renders a value with optional slot content
+ * on top and a label below, suitable for dashboard panels and statistic cards.
+ *
+ * Inherits from AitheWidget, using `params` for layout configuration (align, scale, showDivider)
+ * and `data` for content (label, value, variant). `params` only overrides layout fields
+ * (align, scale, showDivider); content fields (label, value, variant) are always read from
+ * `data` first, falling back to the component's own properties. `data` accepts both a single
+ * MetricsData object and an array; when an array is provided, only the first item is used.
+ *
+ * 业务指标展示组件。上方渲染数值和可选的插槽内容，下方渲染标签，适用于仪表盘面板和统计卡片。
+ *
+ * 继承自 AitheWidget，`params` 用于布局配置（align, scale, showDivider），
+ * `data` 用于内容数据（label, value, variant）。`params` 仅覆盖布局字段
+ * （align, scale, showDivider）；内容字段（label, value, variant）始终优先从 `data` 读取，
+ * 再回退到组件自身属性。`data` 支持单个 MetricsData 对象或数组，传入数组时仅取第一个元素。
+ *
+ * @slot - Custom content displayed next to the value. 显示在数值旁边的自定义内容。
+ *
+ * @csspart value - The metric value element. 指标数值元素。
+ * @csspart label - The metric label element. 指标标签元素。
+ * @csspart divider - The divider element (shown when showDivider is true). 分割线元素。
+ *
+ * @example
+ * ```html
+ * <!-- Attribute mode -->
+ * <aithe-metrics label="Active Users" value="1,024" variant="primary"></aithe-metrics>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Data-driven mode with slot content -->
+ * <aithe-metrics label="Revenue" value="$42.5K" variant="success">
+ *   <aithe-icon name="arrowUp" size="16"></aithe-icon>
+ * </aithe-metrics>
+ * ```
+ *
+ * @example
+ * ```js
+ * // Programmatic mode with params and data
+ * const el = document.querySelector('aithe-metrics');
+ * el.params = { align: 'center', scale: 'large', showDivider: true };
+ * el.data = { label: 'Users', value: '1,024', variant: 'primary' };
+ * ```
+ */
+let AitheMetrics = class AitheMetrics extends AitheWidget {
+    constructor() {
+        super(...arguments);
+        /** Metric label text displayed below the value. 显示在数值下方的标签文本。 */
+        this.label = '';
+        /** Metric value text displayed prominently. 突出显示的数值文本。 */
+        this.value = '';
+        /**
+         * Whether to show a divider on the left side.
+         * 是否在左侧显示分割线。由 params / data 驱动，仅用于 CSS 反射。
+         *
+         * @internal
+         */
+        this.showDivider = false;
+        /**
+         * Text alignment of the metric content. Reflected for CSS selectors.
+         * 指标内容的对齐方式。由 params / data 驱动，仅用于 CSS 反射。
+         *
+         * @internal
+         */
+        this.align = 'center';
+        /**
+         * Size scale of the metric. Reflected for CSS selectors.
+         * 指标的尺寸规格。由 params / data 驱动，仅用于 CSS 反射。
+         *
+         * @internal
+         */
+        this.scale = 'small';
+        /**
+         * Generic configuration object. Fields with the same name as MetricsData
+         * take precedence over `data` when both are set.
+         * 通用配置对象。与 MetricsData 同名的字段优先级高于 `data`。
+         */
+        this.params = {};
+        /**
+         * Generic data object. Fields with the same name in `params` take precedence.
+         * 通用数据对象。同名时 `params` 中的值优先。
+         */
+        this.data = null;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        flex-direction: column;
+        gap: var(--aithe-space-1, 4px);
+      }
+
+      :host([align="center"]) {
+        align-items: center;
+        text-align: center;
+      }
+
+      :host([align="right"]) {
+        align-items: flex-end;
+        text-align: right;
+      }
+
+      :host([align="left"]) {
+        align-items: flex-start;
+        text-align: left;
+      }
+
+      /* Scale: small */
+      :host([scale="small"]) .metrics-value {
+        font-size: var(--aithe-font-size-3xl, 32px);
+      }
+
+      :host([scale="small"]) .metrics-label {
+        font-size: var(--aithe-font-size-md, 16px);
+      }
+
+      :host([scale="small"]) {
+        gap: var(--aithe-space-1, 4px);
+      }
+
+      /* Scale: normal (default) */
+      :host([scale="normal"]) .metrics-value {
+        font-size: var(--aithe-font-size-4xl, 48px);
+      }
+
+      :host([scale="normal"]) .metrics-label {
+        font-size: var(--aithe-font-size-lg, 18px);
+      }
+
+      /* Scale: large */
+      :host([scale="large"]) .metrics-value {
+        font-size: var(--aithe-font-size-5xl, 64px);
+      }
+
+      :host([scale="large"]) .metrics-label {
+        font-size: var(--aithe-font-size-xl, 20px);
+      }
+
+      :host([scale="large"]) {
+        gap: var(--aithe-space-3, 16px);
+      }
+
+      .metrics-top {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-2, 8px);
+      }
+
+      .metrics-value {
+        font-weight: var(--aithe-font-weight-bold, 700);
+        line-height: 1.2;
+        color: var(--aithe-color-text, #1a1a1a);
+        transition: color var(--aithe-duration-fast, 0.15s) var(--aithe-ease-standard, ease);
+      }
+
+      .metrics-slot {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+      }
+
+      .metrics-label {
+        color: var(--aithe-color-text-muted, #6b7280);
+        line-height: 1.4;
+      }
+
+      /* Variant styles — applied to .metrics-value */
+      .default {
+        color: var(--aithe-color-text, #1a1a1a);
+      }
+
+      .primary {
+        color: var(--aithe-primary-8);
+      }
+
+      .success {
+        color: var(--aithe-success-8);
+      }
+
+      .warning {
+        color: var(--aithe-warning-8);
+      }
+
+      .danger {
+        color: var(--aithe-danger-8);
+      }
+
+      .neutral {
+        color: var(--aithe-color-text-muted, #6b7280);
+      }
+
+      /* Divider */
+      .divider {
+        flex-shrink: 0;
+        background: var(--aithe-primary-8);
+      }
+
+      :host([show-divider]) .divider {
+        display: block;
+      }
+
+      :host(:not([show-divider])) .divider {
+        display: none;
+      }
+
+      :host([show-divider]) {
+        padding-left: 12px;
+        position: relative;
+      }
+
+      :host([show-divider]) .divider {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 2px;
+        height: 100%;
+        border-radius: 1px;
+      }
+    `,
+    ]; }
+    render() {
+        const raw = this.data;
+        const data = Array.isArray(raw) ? raw[0] : raw;
+        const resolvedLabel = data?.label ?? this.label;
+        const resolvedValue = data?.value ?? this.value;
+        const resolvedVariant = data?.variant ?? this.variant;
+        const resolvedFilter = data?.filter ?? this.params.filter;
+        const resolvedShowDivider = this.params.showDivider ?? data?.showDivider ?? this.showDivider;
+        const resolvedAlign = this.params.align ?? data?.align ?? this.align;
+        const resolvedScale = this.params.scale ?? data?.scale ?? this.scale;
+        if (resolvedAlign !== this.align) {
+            this.align = resolvedAlign;
+        }
+        if (resolvedScale !== this.scale) {
+            this.scale = resolvedScale;
+        }
+        if (resolvedShowDivider !== this.showDivider) {
+            this.showDivider = resolvedShowDivider;
+        }
+        const displayValue = resolvedFilter && resolvedValue != null
+            ? filterFactory.format(resolvedValue, resolvedFilter)
+            : resolvedValue;
+        const valueClasses = classMap({
+            'metrics-value': true,
+            [resolvedVariant]: true,
+        });
+        return html `
+      <span class="divider" part="divider" ?hidden=${!resolvedShowDivider}></span>
+      <div class="metrics-top">
+        <span class=${valueClasses} part="value">${displayValue}</span>
+        <span class="metrics-slot">
+          <slot></slot>
+        </span>
+      </div>
+      ${resolvedLabel
+            ? html ` <span class="metrics-label" part="label">${resolvedLabel}</span> `
+            : ''}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheMetrics.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], AitheMetrics.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-divider', reflect: true })
+], AitheMetrics.prototype, "showDivider", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], AitheMetrics.prototype, "align", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], AitheMetrics.prototype, "scale", void 0);
+__decorate([
+    property({ type: Object })
+], AitheMetrics.prototype, "params", void 0);
+__decorate([
+    property({ type: Object })
+], AitheMetrics.prototype, "data", void 0);
+AitheMetrics = __decorate([
+    customElement('aithe-metrics')
+], AitheMetrics);
+export { AitheMetrics };

package/dist/components/data/pagination.js

@@ -0,0 +1,119 @@
+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';
+/**
+ * Pagination controller for navigating through paged data.
+ * 分页控制器，用于浏览分页数据。
+ *
+ * @fires aithe-page-change - Emitted when the current page changes with `{ currentPage, pageSize }`. 当前页变更时发出 `{ currentPage, pageSize }`。
+ *
+ * @example
+ * ```html
+ * <aithe-pagination total="100" page-size="10" current-page="1"></aithe-pagination>
+ * ```
+ */
+let AithePagination = class AithePagination extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Total number of data items. 数据项总数。 */
+        this.total = 0;
+        /** Number of items per page. 每页的数据项数。 */
+        this.pageSize = 10;
+        /** Currently active page number. 当前活动页码。 */
+        this.currentPage = 1;
+        /** Size scale of the pagination buttons. 分页按钮的尺寸规格。 */
+        this.size = 'md';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+      }
+
+      .pager {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        flex-wrap: wrap;
+      }
+
+      button {
+        min-width: 36px;
+        min-height: 36px;
+        padding: 0 var(--aithe-space-3);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-md);
+        background: var(--aithe-color-surface-elevated);
+        color: var(--aithe-color-text);
+        cursor: pointer;
+      }
+
+      button.active {
+        border-color: transparent;
+        background: linear-gradient(180deg, var(--aithe-primary-6), var(--aithe-primary-7));
+        color: var(--aithe-color-text-on-primary, #ffffff);
+      }
+    `,
+    ]; }
+    get pageCount() {
+        return Math.max(1, Math.ceil(this.total / Math.max(1, this.pageSize)));
+    }
+    change(page) {
+        this.currentPage = Math.min(Math.max(1, page), this.pageCount);
+        this.emit('aithe-page-change', { currentPage: this.currentPage, pageSize: this.pageSize });
+    }
+    render() {
+        return html `
+      <div class="pager">
+        <button
+          type="button"
+          ?disabled=${this.currentPage <= 1}
+          @click=${() => this.change(this.currentPage - 1)}
+        >
+          ‹
+        </button>
+        ${Array.from({ length: this.pageCount }, (_, index) => index + 1).map((page) => html `
+            <button
+              class=${classMap({ active: page === this.currentPage })}
+              type="button"
+              @click=${() => this.change(page)}
+            >
+              ${page}
+            </button>
+          `)}
+        <button
+          type="button"
+          ?disabled=${this.currentPage >= this.pageCount}
+          @click=${() => this.change(this.currentPage + 1)}
+        >
+          ›
+        </button>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], AithePagination.prototype, "total", void 0);
+__decorate([
+    property({ type: Number, attribute: 'page-size' })
+], AithePagination.prototype, "pageSize", void 0);
+__decorate([
+    property({ type: Number, attribute: 'current-page' })
+], AithePagination.prototype, "currentPage", void 0);
+__decorate([
+    property({ type: String })
+], AithePagination.prototype, "size", void 0);
+AithePagination = __decorate([
+    customElement('aithe-pagination')
+], AithePagination);
+export { AithePagination };

package/dist/components/data/tab-pane.d.ts

@@ -1,31 +1,77 @@
 import { AitheElement } from '../../core/aithe-element';
 /**
- * Single tab pane used inside `aithe-tabs`.
- * 单个标签面板，用于 `aithe-tabs` 内部。
+ * Single tab pane used inside `aithe-tabs` or `aithe-tab-group`.
+ * 单个标签面板，用于 `aithe-tabs` 或 `aithe-tab-group` 内部。
  *
  * @slot - Default slot for tab pane content. 默认插槽，用于标签面板内容。
  *
+ * @csspart host - The host element. 宿主元素。
+ *
  * @example
  * ```html
- * <aithe-tab-pane tab-id="settings" label="Settings" closable>
- *   Settings content here
- * </aithe-tab-pane>
+ * <aithe-tabs type="card" active-key="settings">
+ *   <aithe-tab-pane tab-id="settings" label="Settings" icon="settings" closable>
+ *     Settings content here
+ *   </aithe-tab-pane>
+ *   <aithe-tab-pane tab-id="profile" label="Profile" disabled>
+ *     Profile content here
+ *   </aithe-tab-pane>
+ * </aithe-tabs>
  * ```
  */
 export declare class AitheTabPane extends AitheElement {
-    /** Unique identifier for this pane within the tabs. 标签页内标识此面板的唯一标识。 */
+    /**
+     * Unique identifier for this pane within the tabs.
+     * 标签页内标识此面板的唯一标识。
+     *
+     * Used to match `active-key` on the parent `aithe-tabs`.
+     * 用于匹配父级 `aithe-tabs` 的 `active-key`。
+     */
     tabId: string;
-    /** Display label shown on the tab button. 标签按钮上显示的文本。 */
+    /**
+     * Display label shown on the tab button.
+     * 标签按钮上显示的文本。
+     *
+     * If `tab-id` is not set, the label is also used as the fallback identifier.
+     * 如果未设置 `tab-id`，标签也会作为备用标识符。
+     */
     label: string;
-    /** Icon name to display before the tab label. 在标签文本前显示的图标名称。 */
+    /**
+     * Icon name to display before the tab label.
+     * 在标签文本前显示的图标名称。
+     *
+     * Uses the `aithe-icon` component internally. Refer to the icon library for available names.
+     * 内部使用 `aithe-icon` 组件。可用的图标名称请参考图标库。
+     */
     icon: string;
-    /** Display title for the tab pane (shown as tooltip). 标签面板的显示标题（作为工具提示）。 */
+    /**
+     * Display title for the tab pane (shown as tooltip on hover).
+     * 标签面板的显示标题（悬停时作为工具提示）。
+     */
     title: string;
-    /** Whether this tab pane is disabled (cannot be activated). 此标签面板是否禁用（无法激活）。 */
+    /**
+     * Whether this tab pane is disabled (cannot be activated by clicking or keyboard).
+     * 此标签面板是否禁用（无法通过点击或键盘激活）。
+     *
+     * Disabled tabs are skipped when navigating with arrow keys.
+     * 使用方向键导航时会跳过禁用的标签。
+     */
     disabled: boolean;
-    /** Whether this tab pane shows a close button. 此标签面板是否显示关闭按钮。 */
+    /**
+     * Whether this tab pane shows a close (remove) button.
+     * 此标签面板是否显示关闭按钮。
+     *
+     * When clicked, the `aithe-tab-remove` event is emitted on the parent `aithe-tabs`.
+     * 点击时，父级 `aithe-tabs` 会触发 `aithe-tab-remove` 事件。
+     */
     closable: boolean;
-    /** Whether this tab pane is currently active (managed by parent `aithe-tabs`). 此标签面板是否当前活动（由父级 `aithe-tabs` 管理）。 */
+    /**
+     * Whether this tab pane is currently active (managed by parent `aithe-tabs`).
+     * 此标签面板是否当前活动（由父级 `aithe-tabs` 管理）。
+     *
+     * This is automatically set by the parent `aithe-tabs` component. Do not set manually.
+     * 由父级 `aithe-tabs` 组件自动设置，请勿手动设置。
+     */
     active: boolean;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/data/tab-pane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-pane.d.ts","sourceRoot":"","sources":["../../../src/components/data/tab-pane.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;;GAYG;AACH,qBACa,YAAa,SAAQ,YAAY;IAC5C,uEAAuE;IACtB,KAAK,SAAM;IAC5D,yDAAyD;IAC7B,KAAK,SAAM;IACvC,gEAAgE;IACpC,IAAI,SAAM;IACtC,4EAA4E;IAChD,KAAK,SAAM;IACvC,gFAAgF;IACpC,QAAQ,UAAS;IAC7D,iEAAiE;IACrB,QAAQ,UAAS;IAC7D,oHAAoH;IACxE,MAAM,UAAS;IAE3D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAWpB;IAEF,MAAM;CAKP"}
+{"version":3,"file":"tab-pane.d.ts","sourceRoot":"","sources":["../../../src/components/data/tab-pane.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,YAAa,SAAQ,YAAY;IAC5C;;;;;;OAMG;IAC8C,KAAK,SAAM;IAC5D;;;;;;OAMG;IACyB,KAAK,SAAM;IACvC;;;;;;OAMG;IACyB,IAAI,SAAM;IACtC;;;OAGG;IACyB,KAAK,SAAM;IACvC;;;;;;OAMG;IACyC,QAAQ,UAAS;IAC7D;;;;;;OAMG;IACyC,QAAQ,UAAS;IAC7D;;;;;;OAMG;IACyC,MAAM,UAAS;IAE3D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAWpB;IAEF,MAAM;CAKP"}

package/dist/components/data/tab-pane.js

@@ -0,0 +1,130 @@
+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 tab pane used inside `aithe-tabs` or `aithe-tab-group`.
+ * 单个标签面板，用于 `aithe-tabs` 或 `aithe-tab-group` 内部。
+ *
+ * @slot - Default slot for tab pane content. 默认插槽，用于标签面板内容。
+ *
+ * @csspart host - The host element. 宿主元素。
+ *
+ * @example
+ * ```html
+ * <aithe-tabs type="card" active-key="settings">
+ *   <aithe-tab-pane tab-id="settings" label="Settings" icon="settings" closable>
+ *     Settings content here
+ *   </aithe-tab-pane>
+ *   <aithe-tab-pane tab-id="profile" label="Profile" disabled>
+ *     Profile content here
+ *   </aithe-tab-pane>
+ * </aithe-tabs>
+ * ```
+ */
+let AitheTabPane = class AitheTabPane extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Unique identifier for this pane within the tabs.
+         * 标签页内标识此面板的唯一标识。
+         *
+         * Used to match `active-key` on the parent `aithe-tabs`.
+         * 用于匹配父级 `aithe-tabs` 的 `active-key`。
+         */
+        this.tabId = '';
+        /**
+         * Display label shown on the tab button.
+         * 标签按钮上显示的文本。
+         *
+         * If `tab-id` is not set, the label is also used as the fallback identifier.
+         * 如果未设置 `tab-id`，标签也会作为备用标识符。
+         */
+        this.label = '';
+        /**
+         * Icon name to display before the tab label.
+         * 在标签文本前显示的图标名称。
+         *
+         * Uses the `aithe-icon` component internally. Refer to the icon library for available names.
+         * 内部使用 `aithe-icon` 组件。可用的图标名称请参考图标库。
+         */
+        this.icon = '';
+        /**
+         * Display title for the tab pane (shown as tooltip on hover).
+         * 标签面板的显示标题（悬停时作为工具提示）。
+         */
+        this.title = '';
+        /**
+         * Whether this tab pane is disabled (cannot be activated by clicking or keyboard).
+         * 此标签面板是否禁用（无法通过点击或键盘激活）。
+         *
+         * Disabled tabs are skipped when navigating with arrow keys.
+         * 使用方向键导航时会跳过禁用的标签。
+         */
+        this.disabled = false;
+        /**
+         * Whether this tab pane shows a close (remove) button.
+         * 此标签面板是否显示关闭按钮。
+         *
+         * When clicked, the `aithe-tab-remove` event is emitted on the parent `aithe-tabs`.
+         * 点击时，父级 `aithe-tabs` 会触发 `aithe-tab-remove` 事件。
+         */
+        this.closable = false;
+        /**
+         * Whether this tab pane is currently active (managed by parent `aithe-tabs`).
+         * 此标签面板是否当前活动（由父级 `aithe-tabs` 管理）。
+         *
+         * This is automatically set by the parent `aithe-tabs` component. Do not set manually.
+         * 由父级 `aithe-tabs` 组件自动设置，请勿手动设置。
+         */
+        this.active = false;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: none;
+      }
+
+      :host([active]) {
+        display: block;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <slot></slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'tab-id' })
+], AitheTabPane.prototype, "tabId", void 0);
+__decorate([
+    property({ type: String })
+], AitheTabPane.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], AitheTabPane.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], AitheTabPane.prototype, "title", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheTabPane.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheTabPane.prototype, "closable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheTabPane.prototype, "active", void 0);
+AitheTabPane = __decorate([
+    customElement('aithe-tab-pane')
+], AitheTabPane);
+export { AitheTabPane };