@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/components/progress/progress-bar.d.ts

@@ -1,10 +1,19 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 /**
- * Linear progress bar.
+ * Linear progress bar with status colors and optional percentage label.
+ * 线性进度条，支持状态颜色和可选百分比标签。
+ *
+ * @example
+ * ```html
+ * <aithe-progress-bar percent="75" status="success" show-info></aithe-progress-bar>
+ * ```
  */
 export declare class AitheProgressBar extends AitheElement {
+    /** Current progress percentage (0–100). 当前进度百分比（0–100）。 */
     percent: number;
+    /** Status color variant. 状态颜色类型。 */
     status: 'default' | 'success' | 'warning' | 'danger';
+    /** Whether to display the percentage text. 是否显示百分比文本。 */
     showInfo: boolean;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/progress/progress-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../src/components/progress/progress-bar.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD;;GAEG;AACH,qBACa,gBAAiB,SAAQ,YAAY;IACpB,OAAO,SAAK;IACZ,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAa;IACxC,QAAQ,UAAQ;IAErE,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAsCpB;IAEF,MAAM;CAQP"}
+{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../src/components/progress/progress-bar.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;GAQG;AACH,qBACa,gBAAiB,SAAQ,YAAY;IAChD,2DAA2D;IAC/B,OAAO,SAAK;IACxC,oCAAoC;IACR,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAa;IAC7F,yDAAyD;IACJ,QAAQ,UAAQ;IAErE,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAsCpB;IAEF,MAAM;CAeP"}

package/dist/components/progress/progress-bar.js

@@ -0,0 +1,97 @@
+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';
+/**
+ * Linear progress bar with status colors and optional percentage label.
+ * 线性进度条，支持状态颜色和可选百分比标签。
+ *
+ * @example
+ * ```html
+ * <aithe-progress-bar percent="75" status="success" show-info></aithe-progress-bar>
+ * ```
+ */
+let AitheProgressBar = class AitheProgressBar extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Current progress percentage (0–100). 当前进度百分比（0–100）。 */
+        this.percent = 0;
+        /** Status color variant. 状态颜色类型。 */
+        this.status = 'default';
+        /** Whether to display the percentage text. 是否显示百分比文本。 */
+        this.showInfo = true;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: grid;
+        gap: var(--aithe-space-2);
+      }
+
+      .track {
+        height: 10px;
+        overflow: hidden;
+        border-radius: var(--aithe-radius-full);
+        background: var(--aithe-neutral-2);
+      }
+
+      .bar {
+        height: 100%;
+        border-radius: inherit;
+        background: linear-gradient(90deg, var(--aithe-primary-5), var(--aithe-primary-7));
+      }
+
+      .bar.success {
+        background: linear-gradient(90deg, var(--aithe-success-5), var(--aithe-success-7));
+      }
+
+      .bar.warning {
+        background: linear-gradient(90deg, var(--aithe-warning-5), var(--aithe-warning-7));
+      }
+
+      .bar.danger {
+        background: linear-gradient(90deg, var(--aithe-danger-5), var(--aithe-danger-7));
+      }
+
+      .info {
+        color: var(--aithe-color-text-muted);
+        font-size: var(--aithe-font-size-sm);
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <div class="track">
+        <div
+          class="bar ${this.status}"
+          style=${`width:${Math.max(0, Math.min(100, this.percent))}%;`}
+        ></div>
+      </div>
+      ${this.showInfo
+            ? html `
+            <span class="info">${this.percent}%</span>
+          `
+            : null}
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], AitheProgressBar.prototype, "percent", void 0);
+__decorate([
+    property({ type: String })
+], AitheProgressBar.prototype, "status", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-info' })
+], AitheProgressBar.prototype, "showInfo", void 0);
+AitheProgressBar = __decorate([
+    customElement('aithe-progress-bar')
+], AitheProgressBar);
+export { AitheProgressBar };

package/dist/components/progress/progress-ring.d.ts

@@ -1,11 +1,21 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 /**
- * Circular progress indicator.
+ * Circular progress ring indicator with status colors and percentage label.
+ * 圆形进度环指示器，支持状态颜色和百分比标签。
+ *
+ * @example
+ * ```html
+ * <aithe-progress-ring percent="60" size="160" stroke-width="12" status="warning"></aithe-progress-ring>
+ * ```
  */
 export declare class AitheProgressRing extends AitheElement {
+    /** Current progress percentage (0–100). 当前进度百分比（0–100）。 */
     percent: number;
+    /** Diameter of the ring in pixels. 环的直径（像素）。 */
     size: string;
+    /** Stroke width of the ring in pixels. 环的描边宽度（像素）。 */
     strokeWidth: number;
+    /** Status color variant. 状态颜色类型。 */
     status: 'default' | 'success' | 'warning' | 'danger';
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     render(): import("lit-html").TemplateResult<2>;

package/dist/components/progress/progress-ring.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress-ring.d.ts","sourceRoot":"","sources":["../../../src/components/progress/progress-ring.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD;;GAEG;AACH,qBACa,iBAAkB,SAAQ,YAAY;IACrB,OAAO,SAAK;IACZ,IAAI,SAAS;IACc,WAAW,SAAM;IAC5C,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAa;IAE7F,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAqCpB;IAEF,MAAM;CA0BP"}
+{"version":3,"file":"progress-ring.d.ts","sourceRoot":"","sources":["../../../src/components/progress/progress-ring.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;GAQG;AACH,qBACa,iBAAkB,SAAQ,YAAY;IACjD,2DAA2D;IAC/B,OAAO,SAAK;IACxC,gDAAgD;IACpB,IAAI,SAAS;IACzC,sDAAsD;IACC,WAAW,SAAM;IACxE,oCAAoC;IACR,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAa;IAE7F,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAqCpB;IAEF,MAAM;CA0BP"}

package/dist/components/progress/progress-ring.js

@@ -0,0 +1,111 @@
+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, svg } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Circular progress ring indicator with status colors and percentage label.
+ * 圆形进度环指示器，支持状态颜色和百分比标签。
+ *
+ * @example
+ * ```html
+ * <aithe-progress-ring percent="60" size="160" stroke-width="12" status="warning"></aithe-progress-ring>
+ * ```
+ */
+let AitheProgressRing = class AitheProgressRing extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Current progress percentage (0–100). 当前进度百分比（0–100）。 */
+        this.percent = 0;
+        /** Diameter of the ring in pixels. 环的直径（像素）。 */
+        this.size = '120';
+        /** Stroke width of the ring in pixels. 环的描边宽度（像素）。 */
+        this.strokeWidth = 10;
+        /** Status color variant. 状态颜色类型。 */
+        this.status = 'default';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+      }
+
+      svg {
+        overflow: visible;
+      }
+
+      .track {
+        stroke: var(--aithe-neutral-2);
+      }
+
+      .bar {
+        stroke: var(--aithe-primary-6);
+        transition: stroke-dashoffset var(--aithe-duration-base) var(--aithe-ease-standard);
+      }
+
+      .bar.success {
+        stroke: var(--aithe-success-6);
+      }
+
+      .bar.warning {
+        stroke: var(--aithe-warning-6);
+      }
+
+      .bar.danger {
+        stroke: var(--aithe-danger-6);
+      }
+
+      .label {
+        font-size: var(--aithe-font-size-sm);
+        fill: var(--aithe-color-text-muted);
+      }
+    `,
+    ]; }
+    render() {
+        const size = Number(this.size) || 120;
+        const radius = Math.max(0, (size - this.strokeWidth) / 2);
+        const circumference = 2 * Math.PI * radius;
+        const offset = circumference - (Math.max(0, Math.min(100, this.percent)) / 100) * circumference;
+        const center = size / 2;
+        return svg `
+      <svg width=${size} height=${size} viewBox=${`0 0 ${size} ${size}`}>
+        <circle class="track" cx=${center} cy=${center} r=${radius} fill="none" stroke-width=${this.strokeWidth}></circle>
+        <circle
+          class=${`bar ${this.status}`}
+          cx=${center}
+          cy=${center}
+          r=${radius}
+          fill="none"
+          stroke-width=${this.strokeWidth}
+          stroke-linecap="round"
+          stroke-dasharray=${circumference}
+          stroke-dashoffset=${offset}
+          transform=${`rotate(-90 ${center} ${center})`}
+        ></circle>
+        <text class="label" x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">${this.percent}%</text>
+      </svg>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], AitheProgressRing.prototype, "percent", void 0);
+__decorate([
+    property({ type: String })
+], AitheProgressRing.prototype, "size", void 0);
+__decorate([
+    property({ type: Number, attribute: 'stroke-width' })
+], AitheProgressRing.prototype, "strokeWidth", void 0);
+__decorate([
+    property({ type: String })
+], AitheProgressRing.prototype, "status", void 0);
+AitheProgressRing = __decorate([
+    customElement('aithe-progress-ring')
+], AitheProgressRing);
+export { AitheProgressRing };

package/dist/components/progress/skeleton.d.ts

@@ -1,11 +1,26 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 /**
- * Skeleton placeholder.
+ * Skeleton placeholder for content loading states with line, circle, and rect shapes.
+ * 骨架屏占位组件，用于内容加载状态，支持线条、圆形和矩形形状。
+ *
+ * @slot - Default slot shown when `active` is false. `active` 为 false 时显示的默认插槽。
+ *
+ * @example
+ * ```html
+ * <aithe-skeleton rows="4" shape="line" animated active></aithe-skeleton>
+ * <aithe-skeleton shape="circle" :active="loading">
+ *   <aithe-avatar src="user.jpg"></aithe-avatar>
+ * </aithe-skeleton>
+ * ```
  */
 export declare class AitheSkeleton extends AitheElement {
+    /** Number of placeholder rows. 占位行数。 */
     rows: number;
+    /** Whether rows have a shimmer animation. 行是否具有闪烁动画。 */
     animated: boolean;
+    /** Shape of each placeholder row. 每行占位的形状。 */
     shape: 'line' | 'circle' | 'rect';
+    /** Whether the skeleton is active (true = show placeholder, false = show slot content). 骨架屏是否激活（true = 显示占位，false = 显示插槽内容）。 */
     active: boolean;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/progress/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/progress/skeleton.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD;;GAEG;AACH,qBACa,aAAc,SAAQ,YAAY;IACjB,IAAI,SAAK;IACR,QAAQ,UAAQ;IACjB,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAU;IAC1C,MAAM,UAAQ;IAE3C,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAyCpB;IAEF,MAAM;CAWP"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/progress/skeleton.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;;;GAaG;AACH,qBACa,aAAc,SAAQ,YAAY;IAC7C,wCAAwC;IACZ,IAAI,SAAK;IACrC,wDAAwD;IAC3B,QAAQ,UAAQ;IAC7C,8CAA8C;IAClB,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAU;IACvE,gIAAgI;IACnG,MAAM,UAAQ;IAE3C,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAyCpB;IAEF,MAAM;CAgBP"}

package/dist/components/progress/skeleton.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 { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Skeleton placeholder for content loading states with line, circle, and rect shapes.
+ * 骨架屏占位组件，用于内容加载状态，支持线条、圆形和矩形形状。
+ *
+ * @slot - Default slot shown when `active` is false. `active` 为 false 时显示的默认插槽。
+ *
+ * @example
+ * ```html
+ * <aithe-skeleton rows="4" shape="line" animated active></aithe-skeleton>
+ * <aithe-skeleton shape="circle" :active="loading">
+ *   <aithe-avatar src="user.jpg"></aithe-avatar>
+ * </aithe-skeleton>
+ * ```
+ */
+let AitheSkeleton = class AitheSkeleton extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Number of placeholder rows. 占位行数。 */
+        this.rows = 3;
+        /** Whether rows have a shimmer animation. 行是否具有闪烁动画。 */
+        this.animated = true;
+        /** Shape of each placeholder row. 每行占位的形状。 */
+        this.shape = 'line';
+        /** Whether the skeleton is active (true = show placeholder, false = show slot content). 骨架屏是否激活（true = 显示占位，false = 显示插槽内容）。 */
+        this.active = true;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: grid;
+        gap: var(--aithe-space-3);
+      }
+
+      .row {
+        height: 14px;
+        border-radius: var(--aithe-container-radius-full);
+        background: linear-gradient(
+          90deg,
+          var(--aithe-neutral-2) 0%,
+          var(--aithe-neutral-1) 50%,
+          var(--aithe-neutral-2) 100%
+        );
+        background-size: 200% 100%;
+      }
+
+      .row.circle {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+      }
+
+      .row.rect {
+        height: 120px;
+        border-radius: var(--aithe-container-radius-lg);
+      }
+
+      .row.animated {
+        animation: aithe-skeleton 1.2s linear infinite;
+      }
+
+      @keyframes aithe-skeleton {
+        to {
+          background-position: -200% 0;
+        }
+      }
+    `,
+    ]; }
+    render() {
+        if (!this.active) {
+            return html `
+        <slot></slot>
+      `;
+        }
+        return html `
+      ${Array.from({ length: this.rows }, () => html `
+          <div class=${classMap({ row: true, [this.shape]: true, animated: this.animated })}></div>
+        `)}
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], AitheSkeleton.prototype, "rows", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheSkeleton.prototype, "animated", void 0);
+__decorate([
+    property({ type: String })
+], AitheSkeleton.prototype, "shape", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheSkeleton.prototype, "active", void 0);
+AitheSkeleton = __decorate([
+    customElement('aithe-skeleton')
+], AitheSkeleton);
+export { AitheSkeleton };

package/dist/components/progress/spinner.d.ts

@@ -1,10 +1,19 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 /**
- * Generic loading spinner.
+ * Generic loading spinner with ring and dots variants.
+ * 通用加载旋转器，支持环形和圆点两种变体。
+ *
+ * @example
+ * ```html
+ * <aithe-spinner size="lg" variant="dots" color="var(--aithe-danger-6)"></aithe-spinner>
+ * ```
  */
 export declare class AitheSpinner extends AitheElement {
+    /** Size scale of the spinner. 旋转器的尺寸规格。 */
     size: 'sm' | 'md' | 'lg';
+    /** Custom color for the spinner (CSS value). 旋转器的自定义颜色（CSS 值）。 */
     color: string;
+    /** Visual variant of the spinner. 旋转器的视觉变体。 */
     variant: 'ring' | 'dots';
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/progress/spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/progress/spinner.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD;;GAEG;AACH,qBACa,YAAa,SAAQ,YAAY;IAChB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,KAAK,SAA4B;IACjC,OAAO,EAAE,MAAM,GAAG,MAAM,CAAU;IAE9D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAqEpB;IAEF,MAAM;CAWP"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/progress/spinner.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;GAQG;AACH,qBACa,YAAa,SAAQ,YAAY;IAC5C,2CAA2C;IACf,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC5D,kEAAkE;IACtC,KAAK,SAA4B;IAC7D,+CAA+C;IACnB,OAAO,EAAE,MAAM,GAAG,MAAM,CAAU;IAE9D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAqEpB;IAEF,MAAM;CAgBP"}

package/dist/components/progress/spinner.js

@@ -0,0 +1,129 @@
+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';
+/**
+ * Generic loading spinner with ring and dots variants.
+ * 通用加载旋转器，支持环形和圆点两种变体。
+ *
+ * @example
+ * ```html
+ * <aithe-spinner size="lg" variant="dots" color="var(--aithe-danger-6)"></aithe-spinner>
+ * ```
+ */
+let AitheSpinner = class AitheSpinner extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Size scale of the spinner. 旋转器的尺寸规格。 */
+        this.size = 'md';
+        /** Custom color for the spinner (CSS value). 旋转器的自定义颜色（CSS 值）。 */
+        this.color = 'var(--aithe-primary-6)';
+        /** Visual variant of the spinner. 旋转器的视觉变体。 */
+        this.variant = 'ring';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+      }
+
+      .ring {
+        border: 3px solid rgba(77, 141, 255, 0.18);
+        border-right-color: transparent;
+        border-radius: 50%;
+        animation: aithe-spin 0.85s linear infinite;
+      }
+
+      .ring.sm {
+        width: 18px;
+        height: 18px;
+      }
+
+      .ring.md {
+        width: 26px;
+        height: 26px;
+      }
+
+      .ring.lg {
+        width: 38px;
+        height: 38px;
+      }
+
+      .dots {
+        display: inline-flex;
+        gap: 4px;
+      }
+
+      .dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--aithe-spinner-color, var(--aithe-primary-6));
+        animation: aithe-bounce 0.9s infinite ease-in-out both;
+      }
+
+      .dot:nth-child(2) {
+        animation-delay: 0.12s;
+      }
+
+      .dot:nth-child(3) {
+        animation-delay: 0.24s;
+      }
+
+      @keyframes aithe-spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      @keyframes aithe-bounce {
+        0%,
+        80%,
+        100% {
+          transform: scale(0.5);
+          opacity: 0.5;
+        }
+        40% {
+          transform: scale(1);
+          opacity: 1;
+        }
+      }
+    `,
+    ]; }
+    render() {
+        return this.variant === 'dots'
+            ? html `
+          <span class="dots" style=${`--aithe-spinner-color:${this.color};`}>
+            <span class="dot"></span>
+            <span class="dot"></span>
+            <span class="dot"></span>
+          </span>
+        `
+            : html `
+          <span
+            class=${`ring ${this.size}`}
+            style=${`border-top-color:${this.color};border-left-color:${this.color};border-bottom-color:${this.color};`}
+          ></span>
+        `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheSpinner.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], AitheSpinner.prototype, "color", void 0);
+__decorate([
+    property({ type: String })
+], AitheSpinner.prototype, "variant", void 0);
+AitheSpinner = __decorate([
+    customElement('aithe-spinner')
+], AitheSpinner);
+export { AitheSpinner };

package/dist/components/theme/AGENTS.md

@@ -0,0 +1,27 @@
+# src/components/theme/ — 主题与外观组件（7个）
+
+## 组件列表
+
+| 组件               | 标签                    | 说明                                                       |
+| ------------------ | ----------------------- | ---------------------------------------------------------- |
+| `theme-switch.ts`  | `<aithe-theme-switch>`  | 统一外观切换器，整合主题/阴影/形状/排版在单个下拉菜单中    |
+| `theme-picker.ts`  | `<aithe-theme-picker>`  | 主题选择器，Light/Dark 分组带色点预览                      |
+| `theme-preview.ts` | `<aithe-theme-preview>` | 主题预览面板，局部预览并确认应用                           |
+| `locale-switch.ts` | `<aithe-locale-switch>` | 语言切换下拉                                               |
+| `shape-picker.ts`  | `<aithe-shape-picker>`  | 形状选择器，带预览缩略图                                   |
+| `shadow-picker.ts` | `<aithe-shadow-picker>` | 阴影选择器，带预览缩略图                                   |
+| `typo-picker.ts`   | `<aithe-typo-picker>`   | 排版选择器，带预览图标                                     |
+
+## 编码规范
+
+- 继承 `AitheElement`，使用 `@customElement` 装饰器
+- 这些组件直接调用 `aitheUI` 全局单例的 API（`setTheme/setShape/setShadow/setTypo/setLocale`）
+- 导入使用 `@components/theme/xxx` 路径别名
+- 中英文双语 JSDoc 注释
+
+## 关键约定
+
+- Picker 组件通常用于设置页面或用户偏好配置
+- `aithe-theme-preview` 提供"预览 → 确认应用"的交互模式
+- 所有 Picker 组件通过 `aithe-change` 事件通知变更
+- 新增组件需同步更新 `src/index.ts` 和 `docs/api/theme/`

package/dist/components/theme/locale-switch.d.ts

@@ -0,0 +1,37 @@
+import { AitheElement } from '../../core/aithe-element';
+import { type AithePlacement } from '../../core/floating';
+export declare class AitheLocaleSwitch extends AitheElement {
+    placement: AithePlacement;
+    /** Whether to show only the icon and arrow without the label text. 是否仅显示图标和箭头，不显示标签文字。 */
+    iconOnly: boolean;
+    /**
+     * JSON string of locale identifiers to show in the dropdown.
+     * When empty or unset, all registered locales are displayed.
+     * 下拉菜单中显示的语言标识 JSON 字符串。为空时显示所有已注册语言。
+     *
+     * @example
+     * ```html
+     * <aithe-locale-switch locales='["en-US","zh-CN","ja-JP"]'></aithe-locale-switch>
+     * ```
+     */
+    locales: string;
+    private open;
+    private currentLocale;
+    private readonly triggerEl?;
+    private readonly overlayEl?;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    private readonly handleViewportChange;
+    private unsubscribe?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private bindViewport;
+    private unbindViewport;
+    private updatePosition;
+    private readonly handleOutsideClick;
+    private readonly toggleOpen;
+    private readonly handleTreeSelect;
+    private getFilteredMenu;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=locale-switch.d.ts.map

package/dist/components/theme/locale-switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"locale-switch.d.ts","sourceRoot":"","sources":["../../../src/components/theme/locale-switch.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,KAAK,cAAc,EAA2B,MAAM,gBAAgB,CAAC;AAK9E,qBACa,iBAAkB,SAAQ,YAAY;IACrB,SAAS,EAAE,cAAc,CAAgB;IAErE,0FAA0F;IACrC,QAAQ,UAAS;IAEtE;;;;;;;;;OASG;IACyB,OAAO,SAAM;IAEhC,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,aAAa,CAAoC;IAE/C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAc;IACzC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAc;IAE5D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAyEpB;IAEF,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAA+B;IAEpE,OAAO,CAAC,WAAW,CAAC,CAAa;IAEjC,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAO5B,SAAS,CAAC,OAAO,IAAI,IAAI;IAMzB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAKjC;IAEF,OAAO,CAAC,QAAQ,CAAC,UAAU,CAOzB;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAU/B;IAEF,OAAO,CAAC,eAAe;IAMvB,MAAM;CAsBP"}