@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/basic/divider.js

@@ -0,0 +1,127 @@
+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';
+/**
+ * Horizontal or vertical divider line with optional label.
+ * 水平或垂直分割线，支持可选标签。
+ *
+ * @slot - Default slot for divider label text (horizontal mode). 分割线标签文本（水平模式）。
+ * @example
+ * ```html
+ * <aithe-divider label="Section"></aithe-divider>
+ * <aithe-divider vertical dashed></aithe-divider>
+ * ```
+ */
+let AitheDivider = class AitheDivider extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the divider renders vertically. 是否垂直渲染分割线。 */
+        this.vertical = false;
+        /** Whether the line style is dashed. 是否使用虚线样式。 */
+        this.dashed = false;
+        /** Center label text for horizontal divider. 水平分割线的居中标签文本。 */
+        this.label = '';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      :host([vertical]) {
+        display: inline-flex;
+        width: auto;
+        height: 100%;
+      }
+
+      .divider {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        color: var(--aithe-color-text-subtle);
+        font-size: var(--aithe-font-size-sm);
+      }
+
+      .vertical {
+        width: auto;
+        height: 100%;
+      }
+
+      .line {
+        flex: 1;
+        border-top: 1px solid var(--aithe-color-border);
+      }
+
+      .line.dashed {
+        border-top-style: dashed;
+      }
+
+      .vertical .line {
+        width: 1px;
+        height: 100%;
+        border-top: none;
+        border-left: 1px solid var(--aithe-color-border);
+      }
+
+      .vertical .line.dashed {
+        border-left-style: dashed;
+      }
+
+      .label {
+        padding-inline: var(--aithe-space-3);
+        white-space: nowrap;
+      }
+    `,
+    ]; }
+    render() {
+        if (this.vertical) {
+            return html `
+        <span class="divider vertical" aria-orientation="vertical" role="separator">
+          <span class="line ${this.dashed ? 'dashed' : ''}"></span>
+        </span>
+      `;
+        }
+        const hasContent = this.label || this.textContent?.trim();
+        const dashedClass = this.dashed ? 'dashed' : '';
+        const contentSlot = this.label
+            ? html `
+          <span class="label">${this.label}</span>
+        `
+            : html `
+          <slot></slot>
+        `;
+        const trailingLine = hasContent
+            ? html `
+          <span class="line ${dashedClass}"></span>
+        `
+            : null;
+        return html `
+      <div class="divider" aria-orientation="horizontal" role="separator">
+        <span class="line ${dashedClass}"></span>
+        ${contentSlot} ${trailingLine}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheDivider.prototype, "vertical", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheDivider.prototype, "dashed", void 0);
+__decorate([
+    property({ type: String })
+], AitheDivider.prototype, "label", void 0);
+AitheDivider = __decorate([
+    customElement('aithe-divider')
+], AitheDivider);
+export { AitheDivider };

package/dist/components/basic/empty.js

@@ -0,0 +1,72 @@
+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';
+import { t } from '../../styles/i18n';
+import './icon';
+/**
+ * Empty state placeholder with icon and text.
+ * 空状态占位组件，显示图标和提示文本。
+ *
+ * @slot - Default slot for custom empty content (overrides icon + text). 自定义空状态内容。
+ * @example
+ * ```html
+ * <aithe-empty text="No results found" icon="sparkles"></aithe-empty>
+ * ```
+ */
+let AitheEmpty = class AitheEmpty extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Placeholder text. 占位提示文本。 */
+        this.text = '';
+        /** Built-in icon name to display. 显示的内置图标名称。 */
+        this.icon = 'sparkles';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      .empty {
+        display: grid;
+        justify-items: center;
+        gap: var(--aithe-space-3);
+        padding: var(--aithe-space-7);
+        color: var(--aithe-color-text-muted);
+        text-align: center;
+      }
+
+      aithe-icon {
+        color: var(--aithe-primary-6);
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <div class="empty">
+        <slot>
+          <aithe-icon name=${this.icon} size="lg"></aithe-icon>
+          <div>${this.text || t('basic.empty.defaultText')}</div>
+        </slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheEmpty.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], AitheEmpty.prototype, "icon", void 0);
+AitheEmpty = __decorate([
+    customElement('aithe-empty')
+], AitheEmpty);
+export { AitheEmpty };

package/dist/components/basic/icon.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 } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { IconUtil } from '../../utils';
+/**
+ * Vector icon entry for the Aithe UI icon system.
+ * 矢量图标组件，用于 Aithe UI 图标系统。
+ *
+ * Renders an SVG glyph from the built-in icon map based on the `name` property.
+ * Supports extended icon format: `(type)value` where type can be:
+ *   - `class` — built-in icon name (default, e.g. `(class)sparkles` or just `sparkles`)
+ *   - `auto` — auto-generate from first character of text (e.g. `(auto)User Name`)
+ *   - `url` | `share` | `remote` — load from URL (e.g. `(url)https://example.com/icon.svg`)
+ *     Supports `URL|AltText` format — shows alt first character on load failure.
+ *     支持 `URL|AltText` 格式，加载失败时显示 alt 首字符。
+ * All icons use a 24×24 viewBox, stroke-based rendering with `stroke-width: 1.8`,
+ * and inherit color via `currentColor`.
+ * 根据 `name` 属性从内置图标映射中渲染 SVG 图形。
+ * 所有图标使用 24×24 视口，基于描边渲染（stroke-width: 1.8），颜色继承 currentColor。
+ *
+ * For `auto` and `url` types, rendering is delegated to {@link IconUtil.render}.
+ * `auto` 和 `url` 类型委托给 {@link IconUtil.render} 渲染。
+ *
+ * Built-in icon names (60+ glyphs):
+ * 内置图标名称（60+ 图形）：
+ *
+ * **General / 通用**: sparkles, close, check, info, warning, image, search, plus, minus,
+ * menu, more, settings, home, star, heart, copy, download, upload, share, link,
+ * external, refresh, edit, trash, filter, sort, lock, unlock, eye, eyeOff, clock,
+ * calendar, pin, flag, bookmark, paperclip, tag, thumbUp, thumbDown
+ *
+ * **Arrows / 箭头**: arrowUp, arrowDown, arrowLeft, arrowRight, chevronUp, chevronDown,
+ * chevronLeft, chevronRight, expand, collapse
+ *
+ * **Status / 状态**: success, error, question
+ *
+ * **Media / 媒体**: play, pause, volume, mute, camera, video, music
+ *
+ * **Communication / 交流**: mail, bell, chat, phone
+ *
+ * **Data / 数据**: barChart, pieChart, database, code, terminal, file, folder
+ *
+ * **Layout / 布局**: grid, list, sidebar, maximize, minimize
+ *
+ * **User / 用户**: user, users
+ *
+ * **Weather / 天气**: sun, moon, cloud
+ *
+ * @slot - Default slot for custom SVG content (overrides built-in glyph).
+ *        默认插槽，用于自定义 SVG 内容（覆盖内置图形）。
+ *
+ * @cssproperty --aithe-icon-size - Controls the SVG width/height. Set dynamically from `size` property.
+ * @cssproperty --aithe-icon-color - Controls the host `color` which cascades to `stroke: currentColor`.
+ *
+ * @example
+ * ```html
+ * <!-- Built-in icon / 内置图标 -->
+ * <aithe-icon name="sparkles" size="lg" color="#4d8dff"></aithe-icon>
+ * <aithe-icon name="check" size="sm"></aithe-icon>
+ * <aithe-icon name="heart" color="var(--aithe-danger-6)"></aithe-icon>
+ *
+ * <!-- Size presets / 尺寸预设: xs sm md lg xl 2xl 3xl 4xl 5xl 6xl -->
+ * <aithe-icon name="search" size="xs"></aithe-icon>
+ * <aithe-icon name="search" size="xl"></aithe-icon>
+ * <aithe-icon name="search" size="6xl"></aithe-icon>
+ *
+ * <!-- Auto-generated text / 文本首字母 -->
+ * <aithe-icon name="(auto)User Name" size="md"></aithe-icon>
+ *
+ * <!-- Remote image with alt fallback / 远程图片带 alt 占位 -->
+ * <aithe-icon name="(url)https://example.com/icon.svg|User" size="md"></aithe-icon>
+ * ```
+ */
+let AitheIcon = class AitheIcon extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Icon glyph name from the built-in map. 内置图标名称。 */
+        this.name = 'sparkles';
+        /** Custom stroke/fill color. 自定义颜色。 */
+        this.color = '';
+        /** Icon size preset or explicit CSS value. 图标尺寸预设或显式 CSS 值。
+         *
+         * Resolved via {@link IconUtil.resolveSize} against {@link ICON_SIZE_MAP}.
+         * 通过 {@link IconUtil.resolveSize} 结合 {@link ICON_SIZE_MAP} 解析。
+         *
+         * Presets / 预设:
+         *   `xs`(12px), `sm`(16px), `md`(20px), `lg`(24px),
+         *   `xl`(28px), `2xl`(32px), `3xl`(48px), `4xl`(64px), `5xl`(96px), `6xl`(128px)
+         *
+         * Any valid CSS dimension also works (e.g. `"32px"`, `"2rem"`, `"24"` → `24px`).
+         * 也支持任意合法 CSS 尺寸值。 */
+        this.size = 'md';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+    `,
+    ]; }
+    render() {
+        const normalizedSize = IconUtil.resolveSize(this.size, '20px');
+        const iconStyle = this.color ? `color:${this.color};` : '';
+        return IconUtil.render(this.name, normalizedSize, '', iconStyle);
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheIcon.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], AitheIcon.prototype, "color", void 0);
+__decorate([
+    property({ type: String })
+], AitheIcon.prototype, "size", void 0);
+AitheIcon = __decorate([
+    customElement('aithe-icon')
+], AitheIcon);
+export { AitheIcon };

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/basic/input.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAMnD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,UAAW,SAAQ,YAAY;IAC1C,kDAAkD;IACtB,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAU;IAC5F,yCAAyC;IACb,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC5D,4CAA4C;IAChB,MAAM,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAY;IAC9E,2CAA2C;IACf,KAAK,SAAM;IACvC,+BAA+B;IACH,WAAW,SAAM;IAC7C,8CAA8C;IACF,QAAQ,UAAS;IAC7D,+CAA+C;IAClB,QAAQ,UAAS;IAC9C,iFAAiF;IACpD,SAAS,UAAS;IAC/C,6CAA6C;IACjB,IAAI,SAAM;IACtC,6DAA6D;IACjC,YAAY,SAAS;IACjD,2GAA2G;IAC/E,KAAK,SAAM;IAEvB,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAmB;IACtB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAiB;IAC7C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAiB;IAE/E,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,SAAS,CAAS;IAEnC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAgHpB;IAEF,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAM5C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAGxB;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAI1B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAI3B;IAEF,OAAO,CAAC,QAAQ,CAAC,UAAU,CAUzB;IAEF,MAAM;CAsDP"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/basic/input.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAMnD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,UAAW,SAAQ,YAAY;IAC1C,kDAAkD;IACtB,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAU;IAC5F,yCAAyC;IACb,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC5D,4CAA4C;IAChB,MAAM,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAY;IAC9E,2CAA2C;IACf,KAAK,SAAM;IACvC,+BAA+B;IACH,WAAW,SAAM;IAC7C,8CAA8C;IACF,QAAQ,UAAS;IAC7D,+CAA+C;IAClB,QAAQ,UAAS;IAC9C,iFAAiF;IACpD,SAAS,UAAS;IAC/C,6CAA6C;IACjB,IAAI,SAAM;IACtC,6DAA6D;IACjC,YAAY,SAAS;IACjD,2GAA2G;IAC/E,KAAK,SAAM;IAEvB,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAmB;IACtB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAiB;IAC7C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAiB;IAE/E,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,SAAS,CAAS;IAEnC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAgHpB;IAEF,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAM5C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAGxB;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAK1B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK3B;IAEF,OAAO,CAAC,QAAQ,CAAC,UAAU,CAUzB;IAEF,MAAM;CAsDP"}

package/dist/components/basic/input.js

@@ -0,0 +1,314 @@
+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 { ifDefined } from 'lit/directives/if-defined.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+const INPUT_EVENT = 'aithe-input';
+/**
+ * Single-line text input field with prefix/suffix slots, status states, and clearable support.
+ * 单行文本输入框，支持前缀/后缀插槽、状态标记和可清除功能。
+ *
+ * @slot        - Default slot (unused). 默认插槽（未使用）。
+ * @slot prefix - Content before the input (icon, label, etc.). 输入框前的内容（图标、标签等）。
+ * @slot suffix - Content after the input (icon, unit, etc.). 输入框后的内容（图标、单位等）。
+ *
+ * @fires aithe-input  - Emitted on every keystroke with `{ value }`. 每次按键时发出 `{ value }`。
+ * @fires aithe-change - Emitted when the value is committed with `{ value }`. 值提交时发出 `{ value }`。
+ * @fires aithe-clear  - Emitted when the clear button is clicked. 清除按钮被点击时发出。
+ *
+ * @example
+ * ```html
+ * <aithe-input placeholder="Search..." clearable></aithe-input>
+ * <aithe-input status="error" label="Email">invalid@</aithe-input>
+ * ```
+ */
+let AitheInput = class AitheInput extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** HTML input type attribute. HTML input 类型属性。 */
+        this.type = 'text';
+        /** Size scale of the input. 输入框的尺寸规格。 */
+        this.size = 'md';
+        /** Validation status indicator. 验证状态指示器。 */
+        this.status = 'normal';
+        /** Current value of the input. 输入框的当前值。 */
+        this.value = '';
+        /** Placeholder text. 占位符文本。 */
+        this.placeholder = '';
+        /** Whether the input is disabled. 输入框是否禁用。 */
+        this.disabled = false;
+        /** Whether the input is read-only. 输入框是否只读。 */
+        this.readonly = false;
+        /** Whether to show a clear button when the input has a value. 输入框有值时是否显示清除按钮。 */
+        this.clearable = false;
+        /** HTML `name` attribute. HTML `name` 属性。 */
+        this.name = '';
+        /** HTML `autocomplete` attribute. HTML `autocomplete` 属性。 */
+        this.autocomplete = 'off';
+        /** Accessible label (used as `aria-label` when no visible label exists). 无障碍标签（当无可见标签时用作 `aria-label`）。 */
+        this.label = '';
+        this.hasPrefix = false;
+        this.hasSuffix = false;
+        this.syncSlots = () => {
+            this.hasPrefix = this.prefixNodes.length > 0;
+            this.hasSuffix = this.suffixNodes.length > 0;
+        };
+        this.handleInput = (event) => {
+            event.stopPropagation();
+            const input = event.currentTarget;
+            this.value = input.value;
+            this.emit(INPUT_EVENT, { value: this.value });
+        };
+        this.handleChange = (event) => {
+            event.stopPropagation();
+            const input = event.currentTarget;
+            this.value = input.value;
+            this.emit('aithe-change', { value: this.value });
+        };
+        this.clearValue = () => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.value = '';
+            this.inputElement?.focus();
+            this.emit('aithe-clear');
+            this.emit(INPUT_EVENT, { value: this.value });
+            this.emit('aithe-change', { value: this.value });
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        width: 100%;
+      }
+
+      .field {
+        display: inline-flex;
+        align-items: stretch;
+        min-width: 0;
+        width: 100%;
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-md);
+        background: var(--aithe-color-surface-elevated);
+        transition:
+          border-color var(--aithe-duration-fast) var(--aithe-ease-standard),
+          box-shadow var(--aithe-duration-fast) var(--aithe-ease-standard),
+          background var(--aithe-duration-fast) var(--aithe-ease-standard);
+      }
+
+      .field:focus-within {
+        border-color: var(--aithe-primary-5);
+        box-shadow: 0 0 0 4px var(--aithe-color-focus-ring);
+      }
+
+      .field.error {
+        border-color: var(--aithe-danger-5);
+      }
+
+      .field.success {
+        border-color: var(--aithe-success-5);
+      }
+
+      .field.disabled {
+        opacity: 0.58;
+        cursor: not-allowed;
+        background: var(--aithe-color-surface-muted);
+      }
+
+      .field.sm {
+        min-height: var(--aithe-control-height-sm);
+        padding: 4px 8px;
+      }
+
+      .field.md {
+        min-height: var(--aithe-control-height-md);
+        padding: 6px 12px;
+      }
+
+      .field.lg {
+        min-height: var(--aithe-control-height-lg);
+        padding: 8px 16px;
+      }
+
+      .prefix,
+      .suffix {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .prefix {
+        margin-inline-end: 2px;
+      }
+
+      .suffix {
+        margin-inline-start: 2px;
+        gap: 2px;
+      }
+
+      input {
+        width: 100%;
+        min-width: 0;
+        margin: 0;
+        padding: 0px;
+        border: none;
+        outline: none;
+        background: transparent;
+        color: inherit;
+        line-height: inherit;
+      }
+
+      input::placeholder {
+        color: var(--aithe-color-text-subtle);
+      }
+
+      input:focus {
+        outline: none;
+        border: none;
+      }
+
+      .clear {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        border: none;
+        border-radius: 50%;
+        background: transparent;
+        color: var(--aithe-color-text-subtle);
+        cursor: pointer;
+      }
+
+      .clear:hover {
+        background: var(--aithe-neutral-2);
+        color: var(--aithe-color-text);
+      }
+    `,
+    ]; }
+    focus(options) {
+        this.inputElement?.focus(options);
+    }
+    updated(changed) {
+        if (changed.has('value') && this.inputElement && this.inputElement.value !== this.value) {
+            this.inputElement.value = this.value;
+        }
+    }
+    render() {
+        const clearTabindex = this.disabled ? -1 : 0;
+        return html `
+      <label
+        class=${classMap({
+            field: true,
+            [this.size]: true,
+            [this.status]: this.status !== 'normal',
+            disabled: this.disabled,
+        })}
+      >
+        ${this.hasPrefix
+            ? html `
+              <span class="prefix"><slot name="prefix" @slotchange=${this.syncSlots}></slot></span>
+            `
+            : html `
+              <slot name="prefix" hidden @slotchange=${this.syncSlots}></slot>
+            `}
+        <input
+          .value=${this.value}
+          aria-invalid=${String(this.status === 'error')}
+          aria-label=${this.label || this.placeholder || t('basic.input.ariaLabel')}
+          autocomplete=${this.autocomplete}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          name=${this.name}
+          placeholder=${this.placeholder}
+          type=${this.type}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+        />
+        <span class="suffix">
+          ${this.clearable && this.value
+            ? html `
+                <button
+                  class="clear"
+                  type="button"
+                  tabindex=${clearTabindex}
+                  @click=${this.clearValue}
+                >
+                  ×
+                </button>
+              `
+            : nothing}
+          <slot name="suffix" @slotchange=${this.syncSlots}></slot>
+        </span>
+        ${this.hasSuffix || (this.clearable && this.value)
+            ? null
+            : html `
+              <span hidden>${ifDefined(undefined)}</span>
+            `}
+      </label>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheInput.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], AitheInput.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], AitheInput.prototype, "status", void 0);
+__decorate([
+    property({ type: String })
+], AitheInput.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], AitheInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheInput.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheInput.prototype, "clearable", void 0);
+__decorate([
+    property({ type: String })
+], AitheInput.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], AitheInput.prototype, "autocomplete", void 0);
+__decorate([
+    property({ type: String })
+], AitheInput.prototype, "label", void 0);
+__decorate([
+    query('input')
+], AitheInput.prototype, "inputElement", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'prefix' })
+], AitheInput.prototype, "prefixNodes", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'suffix' })
+], AitheInput.prototype, "suffixNodes", void 0);
+__decorate([
+    state()
+], AitheInput.prototype, "hasPrefix", void 0);
+__decorate([
+    state()
+], AitheInput.prototype, "hasSuffix", void 0);
+AitheInput = __decorate([
+    customElement('aithe-input')
+], AitheInput);
+export { AitheInput };

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

@@ -8,11 +8,14 @@ import { AitheElement } from '../../core/aithe-element';
  * @fires aithe-close - Emitted when the close button is clicked. 关闭按钮点击时触发。
  * @example
  * ```html
- * <aithe-tag type="primary" closable>Selectable Tag</aithe-tag>
+ * <aithe-tag variant="primary" closable>Selectable Tag</aithe-tag>
  * ```
  */
 export declare class AitheTag extends AitheElement {
-    /** Tag color variant. 标签颜色类型。 */
+    /**
+     * Tag color variant. 标签颜色类型。
+     * @deprecated Use `variant` instead. 请使用 `variant` 代替。
+     */
     type: 'primary' | 'success' | 'warning' | 'danger' | 'default';
     /** Whether the tag shows a close button. 是否显示关闭按钮。 */
     closable: boolean;
@@ -24,6 +27,8 @@ export declare class AitheTag extends AitheElement {
     rounded: 'sm' | 'md' | 'lg' | 'full';
     /** Whether the tag is disabled. 是否禁用。 */
     disabled: boolean;
+    /** Size scale of the tag. 标签的尺寸规格。 */
+    size: 'sm' | 'md' | 'lg';
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     /** Toggles the selected state and emits change event. 切换选中状态并触发变更事件。 */
     private readonly toggleTag;

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

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/basic/tag.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;GAWG;AACH,qBACa,QAAS,SAAQ,YAAY;IACxC,iCAAiC;IACL,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAC9E;IACZ,sDAAsD;IACzB,QAAQ,UAAS;IAC9C,qEAAqE;IACxC,UAAU,UAAS;IAChD,qDAAqD;IACT,QAAQ,UAAS;IAC7D,kCAAkC;IACN,OAAO,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAU;IAC1E,yCAAyC;IACG,QAAQ,UAAS;IAE7D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA8FpB;IAEF,wEAAwE;IACxE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAOxB;IAEF,0GAA0G;IAC1G,OAAO,CAAC,QAAQ,CAAC,WAAW,CAM1B;IAEF,MAAM;CAiCP"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/basic/tag.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;GAWG;AACH,qBACa,QAAS,SAAQ,YAAY;IACxC;;;OAGG;IAEH,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAa;IAC3E,sDAAsD;IACzB,QAAQ,UAAS;IAC9C,qEAAqE;IACxC,UAAU,UAAS;IAChD,qDAAqD;IACT,QAAQ,UAAS;IAC7D,kCAAkC;IACN,OAAO,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAU;IAC1E,yCAAyC;IACG,QAAQ,UAAS;IAC7D,sCAAsC;IACV,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE5D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA6HpB;IAEF,wEAAwE;IACxE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAOxB;IAEF,0GAA0G;IAC1G,OAAO,CAAC,QAAQ,CAAC,WAAW,CAM1B;IAEF,MAAM;CAoCP"}