@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/components/layout/col.d.ts

@@ -1,12 +1,27 @@
 import { AitheElement } from '../../core/aithe-element';
 /**
- * 24-grid column item.
+ * 24-grid column item for use inside `aithe-row`.
+ * 24栅格列元素，用于 aithe-row 内部。
+ *
+ * @slot - Default slot for column content. 列内容。
+ * @example
+ * ```html
+ * <aithe-row gutter="16">
+ *   <aithe-col span="8" offset="4">Content</aithe-col>
+ *   <aithe-col span="12" flex="1 1 auto">Flexible</aithe-col>
+ * </aithe-row>
+ * ```
  */
 export declare class AitheCol extends AitheElement {
+    /** Number of grid columns to occupy (1–24). 占据的栅格数（1–24）。 */
     span: number;
+    /** Number of grid columns to offset from the left. 左侧偏移的栅格数。 */
     offset: number;
+    /** Number of grid columns to push right. 向右推的栅格数。 */
     push: number;
+    /** Number of grid columns to pull left. 向左拉的栅格数。 */
     pull: number;
+    /** Custom flex value (overrides span-based width). 自定义 flex 值（覆盖基于 span 的宽度）。 */
     flex: string;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     connectedCallback(): void;

package/dist/components/layout/col.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"col.d.ts","sourceRoot":"","sources":["../../../src/components/layout/col.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD;;GAEG;AACH,qBACa,QAAS,SAAQ,YAAY;IACZ,IAAI,SAAM;IACV,MAAM,SAAK;IACX,IAAI,SAAK;IACT,IAAI,SAAK;IACT,IAAI,SAAM;IAEtC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAmBpB;IAEO,iBAAiB,IAAI,IAAI;IAKzB,OAAO,IAAI,IAAI;IAIxB,OAAO,CAAC,iBAAiB;IAgBzB,MAAM;CAGP"}
+{"version":3,"file":"col.d.ts","sourceRoot":"","sources":["../../../src/components/layout/col.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;;GAYG;AACH,qBACa,QAAS,SAAQ,YAAY;IACxC,6DAA6D;IACjC,IAAI,SAAM;IACtC,gEAAgE;IACpC,MAAM,SAAK;IACvC,qDAAqD;IACzB,IAAI,SAAK;IACrC,oDAAoD;IACxB,IAAI,SAAK;IACrC,iFAAiF;IACrD,IAAI,SAAM;IAEtC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAmBpB;IAEO,iBAAiB,IAAI,IAAI;IAKzB,OAAO,IAAI,IAAI;IAIxB,OAAO,CAAC,iBAAiB;IAgBzB,MAAM;CAKP"}

package/dist/components/layout/col.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 { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * 24-grid column item for use inside `aithe-row`.
+ * 24栅格列元素，用于 aithe-row 内部。
+ *
+ * @slot - Default slot for column content. 列内容。
+ * @example
+ * ```html
+ * <aithe-row gutter="16">
+ *   <aithe-col span="8" offset="4">Content</aithe-col>
+ *   <aithe-col span="12" flex="1 1 auto">Flexible</aithe-col>
+ * </aithe-row>
+ * ```
+ */
+let AitheCol = class AitheCol extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Number of grid columns to occupy (1–24). 占据的栅格数（1–24）。 */
+        this.span = 24;
+        /** Number of grid columns to offset from the left. 左侧偏移的栅格数。 */
+        this.offset = 0;
+        /** Number of grid columns to push right. 向右推的栅格数。 */
+        this.push = 0;
+        /** Number of grid columns to pull left. 向左拉的栅格数。 */
+        this.pull = 0;
+        /** Custom flex value (overrides span-based width). 自定义 flex 值（覆盖基于 span 的宽度）。 */
+        this.flex = '';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        position: relative;
+        min-width: 0;
+        width: var(--aithe-col-width, 100%);
+        max-width: var(--aithe-col-max-width, 100%);
+        flex: var(--aithe-col-flex, 0 0 100%);
+        margin-inline-start: var(--aithe-col-offset, 0%);
+        inset-inline-start: var(--aithe-col-push, 0%);
+        inset-inline-end: var(--aithe-col-pull, 0%);
+      }
+
+      ::slotted(*) {
+        min-width: 0;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.applyLayoutStyles();
+    }
+    updated() {
+        this.applyLayoutStyles();
+    }
+    applyLayoutStyles() {
+        const width = this.span <= 0 ? '0%' : `${(this.span / 24) * 100}%`;
+        const marginLeft = this.offset <= 0 ? '0%' : `${(this.offset / 24) * 100}%`;
+        const push = this.push <= 0 ? '0%' : `${(this.push / 24) * 100}%`;
+        const pull = this.pull <= 0 ? '0%' : `${(this.pull / 24) * 100}%`;
+        const flexValue = this.flex || `0 0 ${width}`;
+        this.hidden = this.span <= 0;
+        this.style.setProperty('--aithe-col-width', this.flex ? 'auto' : width);
+        this.style.setProperty('--aithe-col-max-width', this.flex ? 'none' : width);
+        this.style.setProperty('--aithe-col-flex', flexValue);
+        this.style.setProperty('--aithe-col-offset', marginLeft);
+        this.style.setProperty('--aithe-col-push', push);
+        this.style.setProperty('--aithe-col-pull', pull);
+    }
+    render() {
+        return html `
+      <slot></slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], AitheCol.prototype, "span", void 0);
+__decorate([
+    property({ type: Number })
+], AitheCol.prototype, "offset", void 0);
+__decorate([
+    property({ type: Number })
+], AitheCol.prototype, "push", void 0);
+__decorate([
+    property({ type: Number })
+], AitheCol.prototype, "pull", void 0);
+__decorate([
+    property({ type: String })
+], AitheCol.prototype, "flex", void 0);
+AitheCol = __decorate([
+    customElement('aithe-col')
+], AitheCol);
+export { AitheCol };

package/dist/components/layout/collapse-item.d.ts

@@ -1,15 +1,31 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 /**
- * Single collapsible panel for `aithe-collapse`.
+ * Single collapsible panel for use inside `aithe-collapse`.
+ * 单个可折叠面板，用于 aithe-collapse 内部。
+ *
+ * @slot - Default slot for panel body content. 面板正文内容。
+ * @fires aithe-collapse-toggle - Emitted when the panel is toggled. 面板切换时触发。
+ * @example
+ * ```html
+ * <aithe-collapse-item title="Details" name="detail-1" icon="info">
+ *   <p>Expanded content here.</p>
+ * </aithe-collapse-item>
+ * ```
  */
 export declare class AitheCollapseItem extends AitheElement {
+    /** Panel header title text. 面板标题文本。 */
     title: string;
+    /** Unique key identifying this panel. 面板唯一标识键。 */
     name: string;
+    /** Icon name to display before the title. 在标题前显示的图标名称。 */
+    icon: string;
+    /** Whether the panel is disabled and cannot be toggled. 是否禁用面板切换。 */
     disabled: boolean;
+    /** Whether the panel is currently expanded. 是否当前展开。 */
     open: boolean;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
-    private toggle;
-    private handleKeydown;
+    private readonly toggle;
+    private readonly handleKeydown;
     render(): import("lit-html").TemplateResult<1>;
 }
 //# sourceMappingURL=collapse-item.d.ts.map

package/dist/components/layout/collapse-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-item.d.ts","sourceRoot":"","sources":["../../../src/components/layout/collapse-item.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD;;GAEG;AACH,qBACa,iBAAkB,SAAQ,YAAY;IACrB,KAAK,SAAM;IACX,IAAI,SAAM;IACM,QAAQ,UAAS;IACjB,IAAI,UAAS;IAEzD,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAqDpB;IAEF,OAAO,CAAC,MAAM,CASZ;IAEF,OAAO,CAAC,aAAa,CAOnB;IAEF,MAAM;CAkBP"}
+{"version":3,"file":"collapse-item.d.ts","sourceRoot":"","sources":["../../../src/components/layout/collapse-item.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;;GAYG;AACH,qBACa,iBAAkB,SAAQ,YAAY;IACjD,uCAAuC;IACX,KAAK,SAAM;IACvC,kDAAkD;IACtB,IAAI,SAAM;IACtC,0DAA0D;IAC9B,IAAI,SAAM;IACtC,qEAAqE;IACzB,QAAQ,UAAS;IAC7D,uDAAuD;IACX,IAAI,UAAS;IAEzD,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAiEpB;IAEF,OAAO,CAAC,QAAQ,CAAC,MAAM,CASrB;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAO5B;IAEF,MAAM;CAyBP"}

package/dist/components/layout/collapse-item.js

@@ -0,0 +1,165 @@
+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';
+/**
+ * Single collapsible panel for use inside `aithe-collapse`.
+ * 单个可折叠面板，用于 aithe-collapse 内部。
+ *
+ * @slot - Default slot for panel body content. 面板正文内容。
+ * @fires aithe-collapse-toggle - Emitted when the panel is toggled. 面板切换时触发。
+ * @example
+ * ```html
+ * <aithe-collapse-item title="Details" name="detail-1" icon="info">
+ *   <p>Expanded content here.</p>
+ * </aithe-collapse-item>
+ * ```
+ */
+let AitheCollapseItem = class AitheCollapseItem extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Panel header title text. 面板标题文本。 */
+        this.title = '';
+        /** Unique key identifying this panel. 面板唯一标识键。 */
+        this.name = '';
+        /** Icon name to display before the title. 在标题前显示的图标名称。 */
+        this.icon = '';
+        /** Whether the panel is disabled and cannot be toggled. 是否禁用面板切换。 */
+        this.disabled = false;
+        /** Whether the panel is currently expanded. 是否当前展开。 */
+        this.open = false;
+        this.toggle = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.emit('aithe-collapse-toggle', {
+                name: this.name,
+                open: !this.open,
+            });
+        };
+        this.handleKeydown = (event) => {
+            if (event.key !== 'Enter' && event.key !== ' ') {
+                return;
+            }
+            event.preventDefault();
+            this.toggle();
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        background: var(--aithe-color-surface-elevated);
+        overflow: hidden;
+      }
+
+      .trigger {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-4);
+        width: 100%;
+        min-height: 52px;
+        padding: var(--aithe-space-4) var(--aithe-space-5);
+        border: none;
+        background: transparent;
+        color: var(--aithe-color-text);
+        text-align: left;
+        cursor: pointer;
+      }
+
+      .trigger.disabled {
+        cursor: not-allowed;
+        opacity: 0.56;
+      }
+
+      .trigger:hover:not(.disabled) {
+        background: var(--aithe-color-surface-muted);
+      }
+
+      .title-group {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        flex: 1;
+        min-width: 0;
+      }
+
+      .title-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .title {
+        font-weight: var(--aithe-font-weight-semibold);
+      }
+
+      .icon {
+        color: var(--aithe-color-text-muted);
+        transition: transform var(--aithe-duration-fast) var(--aithe-ease-standard);
+      }
+
+      .icon.open {
+        transform: rotate(180deg);
+      }
+
+      .content {
+        padding: 0 var(--aithe-space-5) var(--aithe-space-5);
+        color: var(--aithe-color-text-muted);
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <button
+        class=${classMap({ trigger: true, disabled: this.disabled })}
+        type="button"
+        aria-expanded=${String(this.open)}
+        ?disabled=${this.disabled}
+        @click=${this.toggle}
+        @keydown=${this.handleKeydown}
+      >
+        <span class="title-group">
+          ${this.icon
+            ? html `
+                <aithe-icon class="title-icon" name=${this.icon} size="16"></aithe-icon>
+              `
+            : nothing}
+          <span class="title">${this.title}</span>
+        </span>
+        <span class=${classMap({ icon: true, open: this.open })} aria-hidden="true">⌄</span>
+      </button>
+      <div class="content" ?hidden=${!this.open}>
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheCollapseItem.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheCollapseItem.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], AitheCollapseItem.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheCollapseItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheCollapseItem.prototype, "open", void 0);
+AitheCollapseItem = __decorate([
+    customElement('aithe-collapse-item')
+], AitheCollapseItem);
+export { AitheCollapseItem };

package/dist/components/layout/collapse.d.ts

@@ -1,9 +1,22 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 /**
- * Accordion / multi-expand collapse container.
+ * Accordion / multi-expand collapse container for collapsible panels.
+ * 手风琴/多展开折叠容器，用于可折叠面板。
+ *
+ * @slot - Default slot for `aithe-collapse-item` elements. aithe-collapse-item 面板元素。
+ * @fires aithe-change - Emitted when the active panel changes. 活动面板变更时触发。
+ * @example
+ * ```html
+ * <aithe-collapse active-key="panel-1" accordion>
+ *   <aithe-collapse-item title="Section A" name="panel-1">Content A</aithe-collapse-item>
+ *   <aithe-collapse-item title="Section B" name="panel-2">Content B</aithe-collapse-item>
+ * </aithe-collapse>
+ * ```
  */
 export declare class AitheCollapse extends AitheElement {
+    /** Comma-separated keys of active (expanded) panels. 活动（展开）面板的键，逗号分隔。 */
     activeKey: string;
+    /** Whether only one panel can be open at a time (accordion mode). 是否只允许同时打开一个面板（手风琴模式）。 */
     accordion: boolean;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     connectedCallback(): void;
@@ -11,8 +24,8 @@ export declare class AitheCollapse extends AitheElement {
     protected updated(changed: Map<string, unknown>): void;
     private get items();
     private get activeKeys();
-    private syncItems;
-    private handleToggle;
+    private readonly syncItems;
+    private readonly handleToggle;
     render(): import("lit-html").TemplateResult<1>;
 }
 //# sourceMappingURL=collapse.d.ts.map

package/dist/components/layout/collapse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.d.ts","sourceRoot":"","sources":["../../../src/components/layout/collapse.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIxD;;GAEG;AACH,qBACa,aAAc,SAAQ,YAAY;IACQ,SAAS,SAAM;IACvC,SAAS,UAAS;IAE/C,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAQpB;IAEF,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMtD,OAAO,KAAK,KAAK,GAEhB;IAED,OAAO,KAAK,UAAU,GAOrB;IAED,OAAO,CAAC,SAAS,CAQf;IAEF,OAAO,CAAC,YAAY,CAqBlB;IAEF,MAAM;CAGP"}
+{"version":3,"file":"collapse.d.ts","sourceRoot":"","sources":["../../../src/components/layout/collapse.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAInD;;;;;;;;;;;;;GAaG;AACH,qBACa,aAAc,SAAQ,YAAY;IAC7C,yEAAyE;IACpB,SAAS,SAAM;IACpE,2FAA2F;IAC9D,SAAS,UAAS;IAE/C,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAQpB;IAEF,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMtD,OAAO,KAAK,KAAK,GAEhB;IAED,OAAO,KAAK,UAAU,GAOrB;IAED,OAAO,CAAC,QAAQ,CAAC,SAAS,CAOxB;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAqB3B;IAEF,MAAM;CAKP"}

package/dist/components/layout/collapse.js

@@ -0,0 +1,108 @@
+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';
+/**
+ * Accordion / multi-expand collapse container for collapsible panels.
+ * 手风琴/多展开折叠容器，用于可折叠面板。
+ *
+ * @slot - Default slot for `aithe-collapse-item` elements. aithe-collapse-item 面板元素。
+ * @fires aithe-change - Emitted when the active panel changes. 活动面板变更时触发。
+ * @example
+ * ```html
+ * <aithe-collapse active-key="panel-1" accordion>
+ *   <aithe-collapse-item title="Section A" name="panel-1">Content A</aithe-collapse-item>
+ *   <aithe-collapse-item title="Section B" name="panel-2">Content B</aithe-collapse-item>
+ * </aithe-collapse>
+ * ```
+ */
+let AitheCollapse = class AitheCollapse extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Comma-separated keys of active (expanded) panels. 活动（展开）面板的键，逗号分隔。 */
+        this.activeKey = '';
+        /** Whether only one panel can be open at a time (accordion mode). 是否只允许同时打开一个面板（手风琴模式）。 */
+        this.accordion = false;
+        this.syncItems = () => {
+            const activeKeys = this.activeKeys;
+            for (const [index, item] of this.items.entries()) {
+                const name = item.name || `item-${index + 1}`;
+                item.name = name;
+                item.open = activeKeys.has(name);
+            }
+        };
+        this.handleToggle = (event) => {
+            event.stopPropagation();
+            const name = event.detail.name;
+            if (!name) {
+                return;
+            }
+            const activeKeys = this.activeKeys;
+            if (this.accordion) {
+                this.activeKey = activeKeys.has(name) ? '' : name;
+            }
+            else if (activeKeys.has(name)) {
+                activeKeys.delete(name);
+                this.activeKey = Array.from(activeKeys).join(',');
+            }
+            else {
+                activeKeys.add(name);
+                this.activeKey = Array.from(activeKeys).join(',');
+            }
+            this.syncItems();
+            this.emit('aithe-change', { activeKey: this.activeKey });
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: grid;
+        gap: var(--aithe-space-3);
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('aithe-collapse-toggle', this.handleToggle);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('aithe-collapse-toggle', this.handleToggle);
+    }
+    updated(changed) {
+        if (changed.has('activeKey') || changed.has('accordion')) {
+            this.syncItems();
+        }
+    }
+    get items() {
+        return Array.from(this.querySelectorAll('aithe-collapse-item'));
+    }
+    get activeKeys() {
+        return new Set(this.activeKey
+            .split(',')
+            .map((item) => item.trim())
+            .filter(Boolean));
+    }
+    render() {
+        return html `
+      <slot @slotchange=${this.syncItems}></slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'active-key' })
+], AitheCollapse.prototype, "activeKey", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheCollapse.prototype, "accordion", void 0);
+AitheCollapse = __decorate([
+    customElement('aithe-collapse')
+], AitheCollapse);
+export { AitheCollapse };

package/dist/components/layout/container.d.ts

@@ -1,13 +1,28 @@
 import { AitheElement } from '../../core/aithe-element';
 /**
- * Top-level page layout container.
+ * Top-level page layout container with configurable width, padding, and direction.
+ * 顶层页面布局容器，支持配置宽度、内边距和方向。
+ *
+ * @slot - Default slot for container content. 容器内容。
+ * @example
+ * ```html
+ * <aithe-container max-width="960px" padding="var(--aithe-space-lg)" direction="column">
+ *   <p>Centered content</p>
+ * </aithe-container>
+ * ```
  */
 export declare class AitheContainer extends AitheElement {
+    /** Maximum width of the container (CSS value). 容器最大宽度（CSS 值）。 */
     maxWidth: string;
+    /** Horizontal padding of the container (CSS value). 容器水平内边距（CSS 值）。 */
     padding: string;
+    /** Gap between child elements (CSS value). 子元素间距（CSS 值）。 */
     gap: string;
+    /** Whether the container fills the full width without max-width constraint. 是否填满全宽，不受最大宽度限制。 */
     fluid: boolean;
+    /** Whether the container fills the full viewport height. 是否填满整个视口高度。 */
     full: boolean;
+    /** Flex direction for child layout. 子元素排列方向。 */
     direction: 'row' | 'column';
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/layout/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/components/layout/container.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIxD;;GAEG;AACH,qBACa,cAAe,SAAQ,YAAY;IAClB,QAAQ,SAAY;IACpB,OAAO,SAA2B;IAClC,GAAG,SAAO;IACM,KAAK,UAAS;IAC7B,IAAI,UAAS;IACd,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAY;IAEnE,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAQpB;IAEF,MAAM;CAqBP"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/components/layout/container.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAInD;;;;;;;;;;;GAWG;AACH,qBACa,cAAe,SAAQ,YAAY;IAC9C,iEAAiE;IACrC,QAAQ,SAAY;IAChD,uEAAuE;IAC3C,OAAO,SAA2B;IAC9D,4DAA4D;IAChC,GAAG,SAAO;IACtC,gGAAgG;IACpD,KAAK,UAAS;IAC1D,wEAAwE;IAC3C,IAAI,UAAS;IAC1C,gDAAgD;IACpB,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAY;IAEnE,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAQpB;IAEF,MAAM;CAqBP"}

package/dist/components/layout/container.js

@@ -0,0 +1,92 @@
+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 { styleMap } from 'lit/directives/style-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { normalizeCssUnit } from '../../utils';
+/**
+ * Top-level page layout container with configurable width, padding, and direction.
+ * 顶层页面布局容器，支持配置宽度、内边距和方向。
+ *
+ * @slot - Default slot for container content. 容器内容。
+ * @example
+ * ```html
+ * <aithe-container max-width="960px" padding="var(--aithe-space-lg)" direction="column">
+ *   <p>Centered content</p>
+ * </aithe-container>
+ * ```
+ */
+let AitheContainer = class AitheContainer extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Maximum width of the container (CSS value). 容器最大宽度（CSS 值）。 */
+        this.maxWidth = '1280px';
+        /** Horizontal padding of the container (CSS value). 容器水平内边距（CSS 值）。 */
+        this.padding = 'var(--aithe-space-lg)';
+        /** Gap between child elements (CSS value). 子元素间距（CSS 值）。 */
+        this.gap = '0';
+        /** Whether the container fills the full width without max-width constraint. 是否填满全宽，不受最大宽度限制。 */
+        this.fluid = false;
+        /** Whether the container fills the full viewport height. 是否填满整个视口高度。 */
+        this.full = false;
+        /** Flex direction for child layout. 子元素排列方向。 */
+        this.direction = 'column';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        width: 100%;
+      }
+    `,
+    ]; }
+    render() {
+        const gap = normalizeCssUnit(this.gap, '0');
+        const padding = normalizeCssUnit(this.padding, 'var(--aithe-space-lg)');
+        return html `
+      <div
+        style=${styleMap({
+            display: 'flex',
+            flexDirection: this.direction,
+            gap,
+            marginInline: 'auto',
+            maxWidth: this.full || this.fluid ? '100%' : this.maxWidth,
+            minHeight: this.full ? '100vh' : undefined,
+            paddingInline: padding,
+            width: '100%',
+        })}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheContainer.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: String })
+], AitheContainer.prototype, "padding", void 0);
+__decorate([
+    property({ type: String })
+], AitheContainer.prototype, "gap", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheContainer.prototype, "fluid", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheContainer.prototype, "full", void 0);
+__decorate([
+    property({ type: String })
+], AitheContainer.prototype, "direction", void 0);
+AitheContainer = __decorate([
+    customElement('aithe-container')
+], AitheContainer);
+export { AitheContainer };

package/dist/components/layout/flex.d.ts

@@ -1,13 +1,29 @@
 import { AitheElement } from '../../core/aithe-element';
 /**
- * Quick flex layout helper.
+ * Quick flex layout helper with declarative properties.
+ * 快速弹性布局辅助组件，支持声明式属性配置。
+ *
+ * @slot - Default slot for flex child elements. 弹性子元素内容。
+ * @example
+ * ```html
+ * <aithe-flex justify="center" align="middle" gap="var(--aithe-space-md)" direction="row">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </aithe-flex>
+ * ```
  */
 export declare class AitheFlex extends AitheElement {
+    /** Flex justify-content value. flex justify-content 值。 */
     justify: string;
+    /** Flex align-items value. flex align-items 值。 */
     align: string;
+    /** Flex direction. flex 方向。 */
     direction: 'row' | 'column';
+    /** Gap between flex items (CSS value). flex 子元素间距（CSS 值）。 */
     gap: string;
+    /** Flex wrap behavior. flex 换行方式。 */
     wrap: 'nowrap' | 'wrap';
+    /** Whether the flex container is inline. 是否为内联弹性容器。 */
     inline: boolean;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/layout/flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../../src/components/layout/flex.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIxD;;GAEG;AACH,qBACa,SAAU,SAAQ,YAAY;IACb,OAAO,SAAgB;IACvB,KAAK,SAAa;IAClB,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAS;IACpC,GAAG,SAA2B;IAC9B,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAY;IACnB,MAAM,UAAS;IAE3D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAiBpB;IAEF,MAAM;CAmBP"}
+{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../../src/components/layout/flex.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAInD;;;;;;;;;;;;GAYG;AACH,qBACa,SAAU,SAAQ,YAAY;IACzC,0DAA0D;IAC9B,OAAO,SAAgB;IACnD,kDAAkD;IACtB,KAAK,SAAa;IAC9C,+BAA+B;IACH,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAS;IAChE,6DAA6D;IACjC,GAAG,SAA2B;IAC1D,qCAAqC;IACT,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAY;IAC/D,uDAAuD;IACX,MAAM,UAAS;IAE3D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAiBpB;IAEF,MAAM;CAmBP"}