@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/basic/tag.js

@@ -0,0 +1,248 @@
+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';
+/**
+ * Colored tag / label with optional close and select behavior.
+ * 彩色标签，支持关闭和选中交互。
+ *
+ * @slot - Default slot for tag label text. 标签文本内容。
+ * @fires aithe-change - Emitted when selectable tag is toggled. 选中状态变更时触发。
+ * @fires aithe-close - Emitted when the close button is clicked. 关闭按钮点击时触发。
+ * @example
+ * ```html
+ * <aithe-tag variant="primary" closable>Selectable Tag</aithe-tag>
+ * ```
+ */
+let AitheTag = class AitheTag extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Tag color variant. 标签颜色类型。
+         * @deprecated Use `variant` instead. 请使用 `variant` 代替。
+         */
+        this.type = 'success';
+        /** Whether the tag shows a close button. 是否显示关闭按钮。 */
+        this.closable = false;
+        /** Whether the tag can be toggled (selected/unselected). 是否可选中切换。 */
+        this.selectable = false;
+        /** Whether the tag is currently selected. 当前是否选中。 */
+        this.selected = false;
+        /** Border-radius preset. 圆角预设。 */
+        this.rounded = 'full';
+        /** Whether the tag is disabled. 是否禁用。 */
+        this.disabled = false;
+        /** Size scale of the tag. 标签的尺寸规格。 */
+        this.size = 'sm';
+        /** Toggles the selected state and emits change event. 切换选中状态并触发变更事件。 */
+        this.toggleTag = () => {
+            if (!this.selectable || this.disabled) {
+                return;
+            }
+            this.selected = !this.selected;
+            this.emit('aithe-change', { selected: this.selected });
+        };
+        /** Handles close button click: emits event, then removes the tag from DOM. 处理关闭按钮点击：触发事件、然后从 DOM 移除标签。 */
+        this.handleClose = (event) => {
+            event.stopPropagation();
+            if (this.disabled)
+                return;
+            this.emit('aithe-close');
+            this.remove();
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+      }
+
+      .tag {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        padding: 0 var(--aithe-space-3);
+        border: 1px solid transparent;
+        color: var(--aithe-color-text);
+        font-size: var(--aithe-font-size-sm);
+        transition:
+          background var(--aithe-duration-fast) var(--aithe-ease-standard),
+          border-color var(--aithe-duration-fast) var(--aithe-ease-standard),
+          color var(--aithe-duration-fast) var(--aithe-ease-standard),
+          box-shadow var(--aithe-duration-fast) var(--aithe-ease-standard);
+      }
+
+      /* Size variants — use vertical padding to control overall height */
+      .size-sm {
+        font-size: var(--aithe-font-size-xs);
+        padding: 1px var(--aithe-space-2);
+        line-height: 1.4;
+      }
+      .size-md {
+        font-size: var(--aithe-font-size-sm);
+        padding: 3px var(--aithe-space-3);
+        line-height: 1.5;
+      }
+      .size-lg {
+        font-size: var(--aithe-font-size-md);
+        padding: 7px var(--aithe-space-4);
+        line-height: 1.6;
+      }
+
+      .tag.selectable {
+        cursor: pointer;
+      }
+
+      .tag.disabled {
+        opacity: 0.56;
+        cursor: not-allowed;
+      }
+
+      /* Variant styles via :host attribute selector */
+      :host([variant='primary']) .tag {
+        color: var(--aithe-primary-8);
+        background: var(--aithe-primary-1);
+        border-color: var(--aithe-primary-3);
+      }
+      :host([variant='success']) .tag {
+        color: var(--aithe-success-8);
+        background: var(--aithe-success-1);
+        border-color: var(--aithe-success-3);
+      }
+      :host([variant='warning']) .tag {
+        color: var(--aithe-warning-8);
+        background: var(--aithe-warning-1);
+        border-color: var(--aithe-warning-3);
+      }
+      :host([variant='danger']) .tag {
+        color: var(--aithe-danger-8);
+        background: var(--aithe-danger-1);
+        border-color: var(--aithe-danger-3);
+      }
+
+      /* Deprecated type class styles for backward compatibility */
+      .tag.primary {
+        color: var(--aithe-primary-8);
+        background: var(--aithe-primary-1);
+        border-color: var(--aithe-primary-3);
+      }
+      .tag.success {
+        color: var(--aithe-success-8);
+        background: var(--aithe-success-1);
+        border-color: var(--aithe-success-3);
+      }
+      .tag.warning {
+        color: var(--aithe-warning-8);
+        background: var(--aithe-warning-1);
+        border-color: var(--aithe-warning-3);
+      }
+      .tag.danger {
+        color: var(--aithe-danger-8);
+        background: var(--aithe-danger-1);
+        border-color: var(--aithe-danger-3);
+      }
+
+      .selected {
+        box-shadow: 0 0 0 3px var(--aithe-color-focus-ring);
+      }
+
+      .radius-sm {
+        border-radius: var(--aithe-radius-sm);
+      }
+
+      .radius-md {
+        border-radius: var(--aithe-radius-md);
+      }
+
+      .radius-lg {
+        border-radius: var(--aithe-radius-lg);
+      }
+
+      .radius-full {
+        border-radius: var(--aithe-radius-full);
+      }
+
+      .close {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 18px;
+        height: 18px;
+        border: none;
+        border-radius: 50%;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <span
+        class=${classMap({
+            tag: true,
+            [`size-${this.size}`]: true,
+            [`radius-${this.rounded}`]: true,
+            selectable: this.selectable,
+            selected: this.selected,
+            disabled: this.disabled,
+            // Deprecated: keep type class for backward compatibility
+            // eslint-disable-next-line sonarjs/deprecation
+            [this.type]: this.type !== 'default',
+        })}
+        aria-pressed=${this.selectable ? String(this.selected) : 'false'}
+        role=${this.selectable ? 'button' : 'status'}
+        tabindex=${this.selectable && !this.disabled ? 0 : -1}
+        @click=${this.toggleTag}
+        @keydown=${(event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.toggleTag();
+            }
+        }}
+      >
+        <slot></slot>
+        ${this.closable
+            ? html `
+              <button class="close" type="button" tabindex="-1" @click=${this.handleClose}>
+                ×
+              </button>
+            `
+            : null}
+      </span>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheTag.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheTag.prototype, "closable", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheTag.prototype, "selectable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheTag.prototype, "selected", void 0);
+__decorate([
+    property({ type: String })
+], AitheTag.prototype, "rounded", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheTag.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], AitheTag.prototype, "size", void 0);
+AitheTag = __decorate([
+    customElement('aithe-tag')
+], AitheTag);
+export { AitheTag };

package/dist/components/basic/textarea.d.ts

@@ -27,7 +27,6 @@ export declare class AitheTextarea extends AitheElement {
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     /** Handles input events and emits value. 处理输入事件并触发 input 事件。 */
     private readonly handleInput;
-    /** Handles change events and emits value. 处理变更事件并触发 change 事件。 */
     private readonly handleChange;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/basic/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/basic/textarea.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;GAWG;AACH,qBACa,aAAc,SAAQ,YAAY;IAC7C,2CAA2C;IACf,IAAI,SAAK;IACrC,oDAAoD;IACxB,WAAW,SAAM;IAC7C,4DAA4D;IAChC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAc;IAC7F,qCAAqC;IACT,KAAK,SAAM;IACvC,sEAAsE;IAC1C,SAAS,SAAM;IAC3C,8CAA8C;IACF,QAAQ,UAAS;IAE7D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAuCpB;IAEF,gEAAgE;IAChE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAEF,kEAAkE;IAClE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,MAAM;CAgBP"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/basic/textarea.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;GAWG;AACH,qBACa,aAAc,SAAQ,YAAY;IAC7C,2CAA2C;IACf,IAAI,SAAK;IACrC,oDAAoD;IACxB,WAAW,SAAM;IAC7C,4DAA4D;IAChC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,CAAc;IAC7F,qCAAqC;IACT,KAAK,SAAM;IACvC,sEAAsE;IAC1C,SAAS,SAAM;IAC3C,8CAA8C;IACF,QAAQ,UAAS;IAE7D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAuCpB;IAEF,gEAAgE;IAChE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAI1B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAI3B;IAEF,MAAM;CAgBP"}

package/dist/components/basic/textarea.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 { styleMap } from 'lit/directives/style-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles, aitheControlFocusStyleBlock, aitheControlStyleBlock } from '../../core/styles';
+/**
+ * Multi-line text input component with auto-grow support.
+ * 多行文本输入组件，支持自动增长。
+ *
+ * @slot - Default slot (unused; content controlled by value property). 默认插槽（未使用，内容由 value 属性控制）。
+ * @fires aithe-input - Emitted on each keystroke with current value. 每次输入时触发。
+ * @fires aithe-change - Emitted when the value is committed. 值提交时触发。
+ * @example
+ * ```html
+ * <aithe-textarea rows="4" placeholder="Enter text..." maxlength="200"></aithe-textarea>
+ * ```
+ */
+let AitheTextarea = class AitheTextarea extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Number of visible text rows. 可见文本行数。 */
+        this.rows = 4;
+        /** Placeholder text shown when empty. 空内容时的占位文本。 */
+        this.placeholder = '';
+        /** Resize direction allowed for the textarea. 允许的调整大小方向。 */
+        this.resize = 'vertical';
+        /** Current textarea value. 当前文本值。 */
+        this.value = '';
+        /** Maximum character length (-1 means unlimited). 最大字符长度（-1 表示不限）。 */
+        this.maxlength = -1;
+        /** Whether the textarea is disabled. 是否禁用。 */
+        this.disabled = false;
+        /** Handles input events and emits value. 处理输入事件并触发 input 事件。 */
+        this.handleInput = (event) => {
+            event.stopPropagation();
+            this.value = event.currentTarget.value;
+            this.emit('aithe-input', { value: this.value });
+        };
+        this.handleChange = (event) => {
+            event.stopPropagation();
+            this.value = event.currentTarget.value;
+            this.emit('aithe-change', { value: this.value });
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        width: 100%;
+      }
+
+      .field {
+        display: flex;
+        flex-direction: column;
+        ${aitheControlStyleBlock}
+        width: 100%;
+        padding: var(--aithe-space-3) var(--aithe-space-3);
+      }
+
+      .field:focus-within {
+        ${aitheControlFocusStyleBlock}
+      }
+
+      .field.disabled {
+        opacity: 0.56;
+        cursor: not-allowed;
+      }
+
+      textarea {
+        width: 100%;
+        min-height: 100%;
+        border: none !important;
+        outline: none;
+        background: transparent;
+        color: inherit;
+      }
+
+      textarea:focus {
+        border: none !important;
+        outline: none;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <label class=${classMap({ field: true, disabled: this.disabled })}>
+        <textarea
+          .value=${this.value}
+          ?disabled=${this.disabled}
+          maxlength=${this.maxlength > -1 ? String(this.maxlength) : ''}
+          placeholder=${this.placeholder}
+          rows=${String(this.rows)}
+          style=${styleMap({ resize: this.resize })}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+        ></textarea>
+      </label>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], AitheTextarea.prototype, "rows", void 0);
+__decorate([
+    property({ type: String })
+], AitheTextarea.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], AitheTextarea.prototype, "resize", void 0);
+__decorate([
+    property({ type: String })
+], AitheTextarea.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], AitheTextarea.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheTextarea.prototype, "disabled", void 0);
+AitheTextarea = __decorate([
+    customElement('aithe-textarea')
+], AitheTextarea);
+export { AitheTextarea };

package/dist/components/container/callout.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, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Highlighted callout block with colored left border and optional title.
+ * 高亮提示块，带彩色左边框和可选标题。
+ *
+ * @slot - Default slot for callout body content. 提示块正文内容的默认插槽。
+ *
+ * @example
+ * ```html
+ * <aithe-callout type="warning" title="Caution">Check before proceeding.</aithe-callout>
+ * ```
+ */
+let AitheCallout = class AitheCallout extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Color variant of the callout. 提示块的颜色类型。 */
+        this.type = 'default';
+        /** Optional title displayed above the body. 正文上方显示的可选标题。 */
+        this.title = '';
+        /** Icon name to display before the title. 在标题前显示的图标名称。 */
+        this.icon = '';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .callout {
+        display: grid;
+        gap: var(--aithe-space-2);
+        padding: var(--aithe-space-5);
+        border: 1px solid var(--aithe-color-border);
+        border-left-width: 4px;
+        border-radius: var(--aithe-container-radius-xl);
+        background: var(--aithe-color-surface-elevated);
+      }
+
+      .callout.success {
+        border-left-color: var(--aithe-success-6);
+      }
+
+      .callout.warning {
+        border-left-color: var(--aithe-warning-6);
+      }
+
+      .callout.danger {
+        border-left-color: var(--aithe-danger-6);
+      }
+
+      .callout.default {
+        border-left-color: var(--aithe-primary-6);
+      }
+
+      .title {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        font-weight: var(--aithe-font-weight-semibold);
+      }
+
+      .title-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+    `,
+    ]; }
+    render() {
+        const titleIcon = this.icon
+            ? html `
+          <aithe-icon class="title-icon" name=${this.icon} size="16"></aithe-icon>
+        `
+            : nothing;
+        return html `
+      <div class=${`callout ${this.type}`}>
+        ${this.title
+            ? html `
+              <div class="title">${titleIcon}${this.title}</div>
+            `
+            : null}
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheCallout.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], AitheCallout.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheCallout.prototype, "icon", void 0);
+AitheCallout = __decorate([
+    customElement('aithe-callout')
+], AitheCallout);
+export { AitheCallout };

package/dist/components/container/details.js

@@ -0,0 +1,117 @@
+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 } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+/**
+ * Themed details disclosure with expand/collapse toggle.
+ * 带展开/收起切换的主题化详情折叠组件。
+ *
+ * @slot - Default slot for the disclosure body content. 折叠正文内容的默认插槽。
+ *
+ * @fires aithe-toggle - Emitted when the disclosure is toggled with `{ open }`. 折叠切换时发出 `{ open }`。
+ *
+ * @example
+ * ```html
+ * <aithe-details open summary="More info">Hidden content here.</aithe-details>
+ * ```
+ */
+let AitheDetails = class AitheDetails extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the disclosure is initially open. 折叠是否初始展开。 */
+        this.open = false;
+        /** Summary text shown as the toggle label. 作为切换标签显示的摘要文本。 */
+        this.summary = '';
+        /** Icon name to display before the summary text. 在摘要文本前显示的图标名称。 */
+        this.icon = '';
+        /** Display title for the details (shown as tooltip). 详情折叠的显示标题（作为工具提示）。 */
+        this.title = '';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      details {
+        padding: var(--aithe-space-4);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        background: var(--aithe-color-surface-elevated);
+      }
+
+      .summary-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      summary {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        cursor: pointer;
+        font-weight: var(--aithe-font-weight-semibold);
+      }
+
+      .body {
+        margin-top: var(--aithe-space-4);
+        color: var(--aithe-color-text-muted);
+      }
+    `,
+    ]; }
+    updated(changed) {
+        if (changed.has('open') && this.detailsElement) {
+            this.detailsElement.open = this.open;
+        }
+    }
+    render() {
+        return html `
+      <details
+        ?open=${this.open}
+        title=${this.title}
+        @toggle=${() => {
+            this.open = Boolean(this.detailsElement?.open);
+            this.emit('aithe-toggle', { open: this.open });
+        }}
+      >
+        <summary>
+          ${this.icon
+            ? html `
+                <aithe-icon class="summary-icon" name=${this.icon} size="16"></aithe-icon>
+              `
+            : nothing}${this.summary || t('container.details.defaultSummary')}
+        </summary>
+        <div class="body">
+          <slot></slot>
+        </div>
+      </details>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheDetails.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], AitheDetails.prototype, "summary", void 0);
+__decorate([
+    property({ type: String })
+], AitheDetails.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], AitheDetails.prototype, "title", void 0);
+__decorate([
+    query('details')
+], AitheDetails.prototype, "detailsElement", void 0);
+AitheDetails = __decorate([
+    customElement('aithe-details')
+], AitheDetails);
+export { AitheDetails };