@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/navigation/sub-menu.js

@@ -0,0 +1,252 @@
+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';
+/**
+ * Nested branch (sub-menu) item for `aithe-menu` with expandable children.
+ * aithe-menu 的嵌套分支（子菜单）项，支持展开子项。
+ *
+ * Supports collapsed mode: when `collapsed` is true, the trigger displays only
+ * the icon and children are shown in a popup panel on click.
+ * 支持折叠模式：当 collapsed 为 true 时，触发器仅显示图标，子菜单以弹出面板形式展示。
+ *
+ * @slot - Default slot for nested `aithe-menu-item` elements. 嵌套的 aithe-menu-item 元素。
+ * @example
+ * ```html
+ * <aithe-sub-menu title="Settings" name="settings" icon="settings">
+ *   <aithe-menu-item name="profile">Profile</aithe-menu-item>
+ *   <aithe-menu-item name="security">Security</aithe-menu-item>
+ * </aithe-sub-menu>
+ * ```
+ */
+let AitheSubMenu = class AitheSubMenu extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Unique key identifying this sub-menu. 子菜单唯一标识键。 */
+        this.name = '';
+        /** Display title for the sub-menu trigger. 子菜单触发器的显示标题。 */
+        this.title = '';
+        /** Icon name to display before the title. 在标题前显示的图标名称。 */
+        this.icon = '';
+        /** Whether the sub-menu is disabled. 是否禁用子菜单。 */
+        this.disabled = false;
+        /** Whether the sub-menu is currently expanded. 是否当前展开。 */
+        this.open = false;
+        /** Whether any child item is currently active. 是否有子项当前选中。 */
+        this.active = false;
+        /** Inherited menu mode from parent `aithe-menu`. 从父级 aithe-menu 继承的菜单模式。 */
+        this.menuMode = 'vertical';
+        /** Inherited collapsed state from parent `aithe-menu`. When true, the trigger shows only the icon and children are displayed in a popup panel. 从父级 aithe-menu 继承的折叠状态。为 true 时触发器仅显示图标，子菜单以弹出面板形式展示。 */
+        this.collapsed = false;
+        this.toggle = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.open = !this.open;
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      .toggle {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-3);
+        width: 100%;
+        min-height: 42px;
+        padding: 0 var(--aithe-space-4);
+        border: none;
+        border-radius: var(--aithe-radius-md);
+        background: transparent;
+        color: var(--aithe-color-text-muted);
+        text-align: left;
+        cursor: pointer;
+      }
+
+      .toggle.collapsed {
+        justify-content: center;
+        padding: 0;
+        gap: 0;
+      }
+
+      .toggle-label {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        flex: 1;
+        min-width: 0;
+      }
+
+      .toggle-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .toggle.active {
+        color: var(--aithe-color-text);
+      }
+
+      .toggle.active .toggle-icon {
+        color: var(--aithe-color-text);
+      }
+
+      .toggle:hover:not(:disabled) {
+        background: var(--aithe-color-surface-muted);
+      }
+
+      .toggle:disabled {
+        opacity: 0.48;
+        cursor: not-allowed;
+      }
+
+      .children {
+        display: grid;
+        gap: var(--aithe-space-2);
+        padding-top: var(--aithe-space-2);
+        padding-left: var(--aithe-space-4);
+      }
+
+      :host([open][data-mode='horizontal']) .children {
+        position: absolute;
+        z-index: var(--aithe-z-dropdown);
+        min-width: 220px;
+        padding: var(--aithe-space-3);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        background: var(--aithe-color-surface-elevated);
+        box-shadow: var(--aithe-shadow-3);
+      }
+
+      .arrow {
+        transition: transform var(--aithe-duration-fast) var(--aithe-ease-standard);
+      }
+
+      .arrow.open {
+        transform: rotate(180deg);
+      }
+
+      .collapsed-children {
+        display: grid;
+        gap: var(--aithe-space-2);
+        padding-top: var(--aithe-space-2);
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    updated(changed) {
+        if (changed.has('menuMode')) {
+            this.dataset.mode = this.menuMode;
+        }
+        if (changed.has('collapsed')) {
+            if (this.collapsed) {
+                this.open = false;
+            }
+        }
+        if (changed.has('open') && this.collapsed && this.open) {
+            requestAnimationFrame(() => {
+                const items = this.querySelectorAll('aithe-menu-item');
+                for (const item of items) {
+                    item.collapsed = false;
+                }
+                const subMenus = this.querySelectorAll('aithe-sub-menu');
+                for (const sm of subMenus) {
+                    sm.collapsed = false;
+                }
+            });
+        }
+    }
+    render() {
+        if (this.collapsed) {
+            return html `
+        <button
+          class=${classMap({
+                toggle: true,
+                active: this.active,
+                collapsed: true,
+            })}
+          type="button"
+          title=${this.title || this.name}
+          ?disabled=${this.disabled}
+          aria-expanded=${String(this.open)}
+          @click=${this.toggle}
+        >
+          ${this.icon
+                ? html `
+                <aithe-icon class="toggle-icon" name=${this.icon} size="16"></aithe-icon>
+              `
+                : nothing}
+        </button>
+        <div class="collapsed-children" ?hidden=${!this.open}>
+          <slot></slot>
+        </div>
+      `;
+        }
+        return html `
+      <button
+        class=${classMap({
+            toggle: true,
+            active: this.active,
+        })}
+        type="button"
+        ?disabled=${this.disabled}
+        aria-expanded=${String(this.open)}
+        @click=${this.toggle}
+      >
+        <span class="toggle-label">
+          ${this.icon
+            ? html `
+                <aithe-icon class="toggle-icon" name=${this.icon} size="16"></aithe-icon>
+              `
+            : nothing}
+          <span>${this.title || this.name}</span>
+        </span>
+        <span class=${classMap({ arrow: true, open: this.open })}>⌄</span>
+      </button>
+      <div class="children" ?hidden=${!this.open}>
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheSubMenu.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], AitheSubMenu.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheSubMenu.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheSubMenu.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheSubMenu.prototype, "open", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheSubMenu.prototype, "active", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheSubMenu.prototype, "menuMode", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheSubMenu.prototype, "collapsed", void 0);
+AitheSubMenu = __decorate([
+    customElement('aithe-sub-menu')
+], AitheSubMenu);
+export { AitheSubMenu };

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.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.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.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 };