@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/feedback/dialog.js

@@ -0,0 +1,228 @@
+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, aithePanelStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+/**
+ * Lightweight confirm dialog with cancel/confirm actions.
+ * 轻量级确认对话框，支持取消/确认操作。
+ *
+ * @slot - Default slot for dialog body content. 对话框正文内容。
+ * @fires aithe-confirm - Emitted when the confirm button is clicked. 确认按钮点击时触发。
+ * @fires aithe-cancel - Emitted when the cancel button or close button is clicked. 取消或关闭按钮点击时触发。
+ * @example
+ * ```html
+ * <aithe-dialog title="Delete item?" visible confirm-text="Delete" cancel-text="Cancel">
+ *   This action cannot be undone.
+ * </aithe-dialog>
+ * ```
+ */
+let AitheDialog = class AitheDialog extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Dialog title text. 对话框标题文本。 */
+        this.title = 'Confirm';
+        /** Icon name to display before the title. 在标题前显示的图标名称。 */
+        this.icon = '';
+        /** Whether the dialog is visible. 是否显示对话框。 */
+        this.visible = false;
+        /** Whether the dialog can be closed via close button or Escape. 是否可通过关闭按钮或 Escape 关闭。 */
+        this.closeable = true;
+        /** Whether a backdrop mask is shown. 是否显示背景遮罩。 */
+        this.mask = true;
+        /** Confirm button label text. 确认按钮文本。 */
+        this.confirmText = '';
+        /** Cancel button label text. 取消按钮文本。 */
+        this.cancelText = '';
+        /** Closes dialog on Escape key press. 按 Escape 键关闭对话框。 */
+        this.handleKeydown = (event) => {
+            if (event.key === 'Escape' && this.visible) {
+                this.cancel();
+            }
+        };
+        /** Hides dialog and emits cancel event. 隐藏对话框并触发取消事件。 */
+        this.cancel = () => {
+            this.visible = false;
+            this.emit('aithe-cancel');
+        };
+        /** Hides dialog and emits confirm event. 隐藏对话框并触发确认事件。 */
+        this.confirm = () => {
+            this.visible = false;
+            this.emit('aithe-confirm');
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        aithePanelStyles('.panel'),
+        css `
+      :host {
+        display: contents;
+      }
+
+      .overlay {
+        position: fixed;
+        inset: 0;
+        z-index: var(--aithe-z-modal);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--aithe-space-lg);
+        background: var(--aithe-color-overlay);
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity var(--aithe-duration-base) var(--aithe-ease-standard);
+      }
+
+      .overlay.visible {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .panel {
+        width: min(100%, 420px);
+        display: grid;
+        gap: var(--aithe-space-4);
+        padding: var(--aithe-space-lg);
+      }
+
+      .head,
+      .foot {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--aithe-space-3);
+      }
+
+      .title {
+        margin: 0;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        font-size: var(--aithe-font-size-lg);
+        font-weight: var(--aithe-font-weight-semibold);
+      }
+
+      .title-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .content {
+        color: var(--aithe-color-text-muted);
+      }
+
+      .actions {
+        display: inline-flex;
+        gap: var(--aithe-space-2);
+      }
+
+      button {
+        min-height: 38px;
+        padding: 0 var(--aithe-space-4);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-md);
+        background: var(--aithe-color-surface);
+        color: var(--aithe-color-text);
+        cursor: pointer;
+      }
+
+      .primary {
+        border-color: transparent;
+        background: linear-gradient(180deg, var(--aithe-primary-6), var(--aithe-primary-7));
+        color: var(--aithe-color-text-on-primary, #ffffff);
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('keydown', this.handleKeydown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this.handleKeydown);
+    }
+    render() {
+        const confirmLabel = this.confirmText || t('form.dialog.confirmText');
+        const cancelLabel = this.cancelText || t('form.dialog.cancelText');
+        return html `
+      <div
+        class=${classMap({ overlay: true, visible: this.visible })}
+        @click=${(event) => {
+            if (this.mask && event.target === event.currentTarget) {
+                this.cancel();
+            }
+        }}
+      >
+        <div
+          class="panel"
+          role="dialog"
+          aria-modal="true"
+          @click=${(event) => event.stopPropagation()}
+        >
+          <div class="head">
+            <h3 class="title">
+              ${this.icon
+            ? html `
+                    <aithe-icon class="title-icon" name=${this.icon} size="18"></aithe-icon>
+                  `
+            : nothing}${this.title}
+            </h3>
+            ${this.closeable
+            ? html `
+                  <button
+                    type="button"
+                    aria-label=${t('form.dialog.closeAriaLabel')}
+                    @click=${this.cancel}
+                  >
+                    ×
+                  </button>
+                `
+            : null}
+          </div>
+          <div class="content">
+            <slot></slot>
+          </div>
+          <div class="foot">
+            <span></span>
+            <div class="actions">
+              <button type="button" @click=${this.cancel}>${cancelLabel}</button>
+              <button class="primary" type="button" @click=${this.confirm}>${confirmLabel}</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheDialog.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheDialog.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheDialog.prototype, "visible", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheDialog.prototype, "closeable", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheDialog.prototype, "mask", void 0);
+__decorate([
+    property({ type: String, attribute: 'confirm-text' })
+], AitheDialog.prototype, "confirmText", void 0);
+__decorate([
+    property({ type: String, attribute: 'cancel-text' })
+], AitheDialog.prototype, "cancelText", void 0);
+AitheDialog = __decorate([
+    customElement('aithe-dialog')
+], AitheDialog);
+export { AitheDialog };

package/dist/components/feedback/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAInD;;;;;;;;;;;;;;GAcG;AACH,qBACa,WAAY,SAAQ,YAAY;IAC3C,0CAA0C;IACE,IAAI,UAAS;IACzD,iCAAiC;IACL,KAAK,SAAM;IACvC,0DAA0D;IAC9B,IAAI,SAAM;IACtC,uDAAuD;IAC3B,SAAS,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAW;IACrF,iFAAiF;IACrD,IAAI,SAAW;IAC3C,uFAAuF;IAC3D,KAAK,SAAM;IACvC,wEAAwE;IACf,WAAW,UAAQ;IAC5E,kEAAkE;IACV,UAAU,UAAQ;IAEzD,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAc;IACX,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAiB;IAC7C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAiB;IAE/E,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,aAAa,CAAS;IAEvC,OAAO,CAAC,WAAW,CAA4B;IAE/C,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA2HpB;IAEF,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAqBtD,wEAAwE;IACxE,OAAO,CAAC,gBAAgB;IAWxB,4DAA4D;IAC5D,OAAO,CAAC,QAAQ,CAAC,SAAS,CAGxB;IAEF,2DAA2D;IAC3D,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAIpC;IAEF,0DAA0D;IAC1D,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAMlC;IAEF,8BAA8B;IAC9B,IAAI,QAAO,IAAI,CAEb;IAEF,+BAA+B;IAC/B,IAAI,QAAO,IAAI,CAEb;IAEF,MAAM;CAyDP"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAInD;;;;;;;;;;;;;;GAcG;AACH,qBACa,WAAY,SAAQ,YAAY;IAC3C,0CAA0C;IACE,IAAI,UAAS;IACzD,iCAAiC;IACL,KAAK,SAAM;IACvC,0DAA0D;IAC9B,IAAI,SAAM;IACtC,uDAAuD;IAC3B,SAAS,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAW;IACrF,iFAAiF;IACrD,IAAI,SAAW;IAC3C,uFAAuF;IAC3D,KAAK,SAAM;IACvC,wEAAwE;IACf,WAAW,UAAQ;IAC5E,kEAAkE;IACV,UAAU,UAAQ;IAEzD,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAc;IACX,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAiB;IAC7C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAiB;IAE/E,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,aAAa,CAAS;IAEvC,OAAO,CAAC,WAAW,CAA4B;IAE/C,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA6HpB;IAEF,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAqBtD,wEAAwE;IACxE,OAAO,CAAC,gBAAgB;IAWxB,4DAA4D;IAC5D,OAAO,CAAC,QAAQ,CAAC,SAAS,CAGxB;IAEF,2DAA2D;IAC3D,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAIpC;IAEF,0DAA0D;IAC1D,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAMlC;IAEF,8BAA8B;IAC9B,IAAI,QAAO,IAAI,CAEb;IAEF,+BAA+B;IAC/B,IAAI,QAAO,IAAI,CAEb;IAEF,MAAM;CAwDP"}

package/dist/components/feedback/drawer.js

@@ -0,0 +1,338 @@
+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, query, queryAssignedElements, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles, aithePanelStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+/**
+ * Side drawer panel that slides in from any edge of the viewport.
+ * 侧边抽屉面板，从视口任意边缘滑入。
+ *
+ * @slot - Default slot for drawer body content. 抽屉正文内容。
+ * @slot header - Custom header content (overrides title property). 自定义头部内容。
+ * @slot footer - Footer action area. 底部操作区域。
+ * @fires aithe-open-change - Emitted when open state changes, with `{ open }`. 开关状态变更时触发。
+ * @example
+ * ```html
+ * <aithe-drawer title="Details" placement="right" size="420px">
+ *   <p>Drawer content here.</p>
+ * </aithe-drawer>
+ * ```
+ */
+let AitheDrawer = class AitheDrawer extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the drawer is open. 是否打开抽屉。 */
+        this.open = false;
+        /** Drawer title text. 抽屉标题文本。 */
+        this.title = '';
+        /** Icon name to display before the title. 在标题前显示的图标名称。 */
+        this.icon = '';
+        /** Edge from which the drawer slides in. 抽屉滑入的边缘方向。 */
+        this.placement = 'right';
+        /** Drawer width (for left/right) or height (for top/bottom). 抽屉宽度（左右）或高度（上下）。 */
+        this.size = '420px';
+        /** CSS selector for a mount target element (teleports the drawer). 挂载目标元素的 CSS 选择器。 */
+        this.mount = '';
+        /** Whether clicking the backdrop mask closes the drawer. 点击遮罩是否关闭抽屉。 */
+        this.closeOnMask = true;
+        /** Whether pressing Escape closes the drawer. 按 Escape 是否关闭抽屉。 */
+        this.closeOnEsc = true;
+        this.hasHeaderSlot = false;
+        this.hasFooterSlot = false;
+        this.lastFocused = null;
+        /** Syncs header/footer slot presence state. 同步头部/底部插槽状态。 */
+        this.syncSlots = () => {
+            this.hasHeaderSlot = this.headerNodes.length > 0;
+            this.hasFooterSlot = this.footerNodes.length > 0;
+        };
+        /** Handles Escape key to close drawer. 处理 Escape 键关闭抽屉。 */
+        this.handleDocumentKeydown = (event) => {
+            if (event.key === 'Escape' && this.closeOnEsc && this.open) {
+                this.hide();
+            }
+        };
+        /** Handles backdrop click to close drawer. 处理遮罩点击关闭抽屉。 */
+        this.handleBackdropClick = (event) => {
+            if (!this.closeOnMask || event.target !== event.currentTarget) {
+                return;
+            }
+            this.hide();
+        };
+        /** Opens the drawer. 打开抽屉。 */
+        this.show = () => {
+            this.open = true;
+        };
+        /** Closes the drawer. 关闭抽屉。 */
+        this.hide = () => {
+            this.open = false;
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        aithePanelStyles('.panel'),
+        css `
+      :host {
+        display: contents;
+      }
+
+      .overlay {
+        position: fixed;
+        inset: 0;
+        z-index: var(--aithe-z-drawer);
+        display: flex;
+        background: var(--aithe-color-overlay);
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity var(--aithe-duration-base) var(--aithe-ease-standard);
+      }
+
+      .overlay.open {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .top {
+        align-items: flex-start;
+        justify-content: center;
+      }
+
+      .right {
+        align-items: stretch;
+        justify-content: flex-end;
+      }
+
+      .bottom {
+        align-items: flex-end;
+        justify-content: center;
+      }
+
+      .left {
+        align-items: stretch;
+        justify-content: flex-start;
+      }
+
+      .panel {
+        display: flex;
+        flex-direction: column;
+        max-width: 100vw;
+        max-height: 100vh;
+      }
+
+      .panel-inner {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        transition: transform var(--aithe-duration-base) var(--aithe-ease-standard);
+      }
+
+      .panel-inner.top {
+        transform: translateY(-100%);
+      }
+
+      .panel-inner.right {
+        transform: translateX(100%);
+      }
+
+      .panel-inner.bottom {
+        transform: translateY(100%);
+      }
+
+      .panel-inner.left {
+        transform: translateX(-100%);
+      }
+
+      .overlay.open .panel-inner {
+        transform: translate(0, 0);
+      }
+
+      .header,
+      .footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--aithe-space-4);
+        padding: var(--aithe-space-lg);
+      }
+
+      .header {
+        border-bottom: 1px solid var(--aithe-color-border);
+      }
+
+      .footer {
+        border-top: 1px solid var(--aithe-color-border);
+      }
+
+      .title {
+        margin: 0;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        font-size: var(--aithe-font-size-lg);
+        font-weight: var(--aithe-font-weight-semibold);
+      }
+
+      .title-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .body {
+        flex: 1;
+        overflow: auto;
+        padding: var(--aithe-space-lg);
+      }
+
+      .close {
+        width: 36px;
+        height: 36px;
+        border: none;
+        border-radius: 50%;
+        background: transparent;
+        color: var(--aithe-color-text-muted);
+        cursor: pointer;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.applyMountTarget();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this.handleDocumentKeydown);
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('mount')) {
+            this.applyMountTarget();
+        }
+        if (changed.has('open')) {
+            this.emit('aithe-open-change', { open: this.open });
+            if (this.open) {
+                this.lastFocused = document.activeElement;
+                document.addEventListener('keydown', this.handleDocumentKeydown);
+                queueMicrotask(() => this.focusFirst(this.panel ?? this.renderRoot));
+            }
+            else {
+                document.removeEventListener('keydown', this.handleDocumentKeydown);
+                this.lastFocused?.focus?.();
+            }
+        }
+    }
+    /** Teleports the drawer into the mount target element. 将抽屉传送至挂载目标元素。 */
+    applyMountTarget() {
+        if (!this.mount || typeof document === 'undefined') {
+            return;
+        }
+        const target = document.querySelector(this.mount);
+        if (target instanceof HTMLElement && this.parentElement !== target) {
+            target.appendChild(this);
+        }
+    }
+    render() {
+        const isVertical = this.placement === 'left' || this.placement === 'right';
+        const showHeader = true;
+        const drawerIcon = this.icon
+            ? html `
+          <aithe-icon class="title-icon" name=${this.icon} size="18"></aithe-icon>
+        `
+            : nothing;
+        return html `
+      <div
+        class=${classMap({
+            overlay: true,
+            open: this.open,
+            [this.placement]: true,
+        })}
+        @click=${this.handleBackdropClick}
+      >
+        <aside
+          class="panel"
+          aria-modal="true"
+          role="dialog"
+          style=${styleMap(isVertical ? { width: this.size } : { height: this.size })}
+          tabindex="-1"
+          @click=${(event) => event.stopPropagation()}
+          @keydown=${(event) => this.trapFocus(event, this.panel ?? this.renderRoot)}
+        >
+          <div class=${classMap({ 'panel-inner': true, [this.placement]: true })}>
+          <header class="header" ?hidden=${!showHeader}>
+            <slot name="header" @slotchange=${this.syncSlots}>
+              ${this.title
+            ? html `
+                    <h2 class="title">${drawerIcon}${this.title}</h2>
+                  `
+            : null}
+            </slot>
+            <button
+              class="close"
+              type="button"
+              aria-label=${t('feedback.drawer.closeAriaLabel')}
+              @click=${this.hide}
+            >
+              ×
+            </button>
+          </header>
+          <div class="body">
+            <slot></slot>
+          </div>
+          <footer class="footer" ?hidden=${!this.hasFooterSlot}>
+            <slot name="footer" @slotchange=${this.syncSlots}></slot>
+          </footer>
+          </div>
+        </aside>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheDrawer.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], AitheDrawer.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheDrawer.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], AitheDrawer.prototype, "placement", void 0);
+__decorate([
+    property({ type: String })
+], AitheDrawer.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], AitheDrawer.prototype, "mount", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'close-on-mask' })
+], AitheDrawer.prototype, "closeOnMask", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'close-on-esc' })
+], AitheDrawer.prototype, "closeOnEsc", void 0);
+__decorate([
+    query('.panel')
+], AitheDrawer.prototype, "panel", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'header' })
+], AitheDrawer.prototype, "headerNodes", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'footer' })
+], AitheDrawer.prototype, "footerNodes", void 0);
+__decorate([
+    state()
+], AitheDrawer.prototype, "hasHeaderSlot", void 0);
+__decorate([
+    state()
+], AitheDrawer.prototype, "hasFooterSlot", void 0);
+AitheDrawer = __decorate([
+    customElement('aithe-drawer')
+], AitheDrawer);
+export { AitheDrawer };

package/dist/components/feedback/loading.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 { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Inline or fullscreen loading overlay with spinner and optional tip text.
+ * 内联或全屏加载遮罩层，带旋转器和可选提示文本。
+ *
+ * @slot - Default slot for content to be covered by the loading overlay. 被加载遮罩层覆盖的内容。
+ * @example
+ * ```html
+ * <aithe-loading spinning tip="Loading..." size="md">
+ *   <div>Content behind the overlay</div>
+ * </aithe-loading>
+ * <aithe-loading fullscreen tip="Please wait..."></aithe-loading>
+ * ```
+ */
+let AitheLoading = class AitheLoading extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the loading spinner is active. 是否显示加载旋转器。 */
+        this.spinning = true;
+        /** Spinner size scale. 旋转器尺寸规格。 */
+        this.size = 'md';
+        /** Tip text displayed below the spinner. 旋转器下方显示的提示文本。 */
+        this.tip = '';
+        /** Whether the loading overlay covers the entire viewport. 加载遮罩是否覆盖整个视口。 */
+        this.fullscreen = false;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        position: relative;
+        display: block;
+      }
+
+      .overlay {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--aithe-space-3);
+        background: rgba(255, 255, 255, 0.48);
+        backdrop-filter: blur(6px);
+      }
+
+      .overlay.fullscreen {
+        position: fixed;
+        z-index: var(--aithe-z-modal);
+        background: var(--aithe-color-overlay);
+      }
+
+      .spinner {
+        border: 3px solid rgba(77, 141, 255, 0.18);
+        border-top-color: var(--aithe-primary-6);
+        border-radius: 50%;
+        animation: aithe-spin 0.85s linear infinite;
+      }
+
+      .spinner.sm {
+        width: 20px;
+        height: 20px;
+      }
+
+      .spinner.md {
+        width: 28px;
+        height: 28px;
+      }
+
+      .spinner.lg {
+        width: 40px;
+        height: 40px;
+      }
+
+      .tip {
+        color: var(--aithe-color-text-muted);
+      }
+
+      @keyframes aithe-spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    `,
+    ]; }
+    render() {
+        const tipContent = this.tip
+            ? html `
+          <span class="tip">${this.tip}</span>
+        `
+            : null;
+        return html `
+      <slot></slot>
+      ${this.spinning
+            ? html `
+            <div class=${classMap({ overlay: true, fullscreen: this.fullscreen })}>
+              <span class=${classMap({ spinner: true, [this.size]: true })}></span>
+              ${tipContent}
+            </div>
+          `
+            : null}
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], AitheLoading.prototype, "spinning", void 0);
+__decorate([
+    property({ type: String })
+], AitheLoading.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], AitheLoading.prototype, "tip", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheLoading.prototype, "fullscreen", void 0);
+AitheLoading = __decorate([
+    customElement('aithe-loading')
+], AitheLoading);
+export { AitheLoading };