@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/components/form/checkbox.js

@@ -0,0 +1,123 @@
+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, query } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Checkbox input with label slot and indeterminate state.
+ * 复选框输入组件，支持标签插槽和半选状态。
+ *
+ * @slot - Default slot for checkbox label text. 复选框标签文本。
+ * @fires aithe-change - Emitted when checked state changes (standalone). 选中状态变更时触发（独立使用）。
+ * @fires aithe-checkbox-toggle - Emitted inside checkbox-group for group coordination. 在复选框组内触发以协调状态。
+ * @example
+ * ```html
+ * <aithe-checkbox value="opt1" checked>Option 1</aithe-checkbox>
+ * ```
+ */
+let AitheCheckbox = class AitheCheckbox extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the checkbox is checked. 是否选中。 */
+        this.checked = false;
+        /** Whether the checkbox is in indeterminate (partial) state. 是否处于半选（不确定）状态。 */
+        this.indeterminate = false;
+        /** Whether the checkbox is disabled. 是否禁用。 */
+        this.disabled = false;
+        /** Value submitted when checked (used in groups). 选中时提交的值（在组中使用）。 */
+        this.value = '';
+        /** Name attribute for form submission. 表单提交的 name 属性。 */
+        this.name = '';
+        /** Disabled state propagated from parent checkbox-group. 从父级复选框组传递的禁用状态。 */
+        this.groupDisabled = false;
+        /** Handles native change event and emits appropriate custom event. 处理原生变更事件并触发自定义事件。 */
+        this.handleChange = (event) => {
+            const checked = event.currentTarget.checked;
+            if (this.closest('aithe-checkbox-group')) {
+                this.emit('aithe-checkbox-toggle', { checked, value: this.value });
+                return;
+            }
+            this.checked = checked;
+            this.indeterminate = false;
+            this.emit('aithe-change', { checked: this.checked, value: this.value });
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+      }
+
+      label {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-3);
+        cursor: pointer;
+      }
+
+      label.disabled {
+        opacity: 0.56;
+        cursor: not-allowed;
+      }
+
+      input {
+        width: 16px;
+        height: 16px;
+        accent-color: var(--aithe-primary-6);
+      }
+    `,
+    ]; }
+    /** Syncs the native input indeterminate property. 同步原生 input 的 indeterminate 属性。 */
+    updated() {
+        if (this.input) {
+            this.input.indeterminate = this.indeterminate;
+        }
+    }
+    render() {
+        const disabled = this.disabled || this.groupDisabled;
+        return html `
+      <label class=${disabled ? 'disabled' : ''}>
+        <input
+          .indeterminate=${this.indeterminate}
+          ?checked=${this.checked}
+          ?disabled=${disabled}
+          name=${this.name}
+          type="checkbox"
+          @change=${this.handleChange}
+        />
+        <slot></slot>
+      </label>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheCheckbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheCheckbox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], AitheCheckbox.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], AitheCheckbox.prototype, "name", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheCheckbox.prototype, "groupDisabled", void 0);
+__decorate([
+    query('input')
+], AitheCheckbox.prototype, "input", void 0);
+AitheCheckbox = __decorate([
+    customElement('aithe-checkbox')
+], AitheCheckbox);
+export { AitheCheckbox };

package/dist/components/form/color-picker.d.ts

@@ -1,17 +1,32 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 /**
- * Color picker built on native color input.
+ * Color picker built on native color input with optional alpha channel.
+ * 基于原生颜色输入的颜色选择器，支持可选的透明度通道。
+ *
+ * @slot - Default slot (unused; picker is self-contained). 默认插槽（未使用，选择器为自包含组件）。
+ * @fires aithe-change - Emitted when the color or alpha value changes, with `{ value, alpha, format }`. 颜色或透明度变更时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-color-picker value="#4d8dff" format="hex"></aithe-color-picker>
+ * <aithe-color-picker alpha alpha-value="0.8"></aithe-color-picker>
+ * ```
  */
 export declare class AitheColorPicker extends AitheElement {
+    /** Current color value. 当前颜色值。 */
     value: string;
+    /** Output color format. 输出颜色格式。 */
     format: 'hex' | 'rgb';
+    /** Whether to show the alpha (opacity) slider. 是否显示透明度滑块。 */
     alpha: boolean;
+    /** Alpha (opacity) value from 0 to 1. 透明度值，范围 0 到 1。 */
     alphaValue: number;
+    /** Whether the color picker is disabled. 是否禁用颜色选择器。 */
     disabled: boolean;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     private emitChange;
-    private handleColor;
-    private handleAlpha;
+    private readonly handleColor;
+    private readonly handleAlpha;
     render(): import("lit-html").TemplateResult<1>;
 }
 //# sourceMappingURL=color-picker.d.ts.map

package/dist/components/form/color-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../src/components/form/color-picker.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD;;GAEG;AACH,qBACa,gBAAiB,SAAQ,YAAY;IACpB,KAAK,SAAa;IAClB,MAAM,EAAE,KAAK,GAAG,KAAK,CAAS;IAC7B,KAAK,UAAS;IACW,UAAU,SAAK;IACzB,QAAQ,UAAS;IAE7D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA4CpB;IAEF,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,WAAW,CAGjB;IAEF,OAAO,CAAC,WAAW,CAGjB;IAEF,MAAM;CA2BP"}
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../src/components/form/color-picker.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;;GAYG;AACH,qBACa,gBAAiB,SAAQ,YAAY;IAChD,kCAAkC;IACN,KAAK,SAAa;IAC9C,mCAAmC;IACP,MAAM,EAAE,KAAK,GAAG,KAAK,CAAS;IAC1D,6DAA6D;IAChC,KAAK,UAAS;IAC3C,wDAAwD;IACF,UAAU,SAAK;IACrE,uDAAuD;IACX,QAAQ,UAAS;IAE7D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA4CpB;IAEF,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAEF,MAAM;CAgCP"}

package/dist/components/form/color-picker.js

@@ -0,0 +1,148 @@
+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';
+/**
+ * Color picker built on native color input with optional alpha channel.
+ * 基于原生颜色输入的颜色选择器，支持可选的透明度通道。
+ *
+ * @slot - Default slot (unused; picker is self-contained). 默认插槽（未使用，选择器为自包含组件）。
+ * @fires aithe-change - Emitted when the color or alpha value changes, with `{ value, alpha, format }`. 颜色或透明度变更时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-color-picker value="#4d8dff" format="hex"></aithe-color-picker>
+ * <aithe-color-picker alpha alpha-value="0.8"></aithe-color-picker>
+ * ```
+ */
+let AitheColorPicker = class AitheColorPicker extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Current color value. 当前颜色值。 */
+        this.value = '#4d8dff';
+        /** Output color format. 输出颜色格式。 */
+        this.format = 'hex';
+        /** Whether to show the alpha (opacity) slider. 是否显示透明度滑块。 */
+        this.alpha = false;
+        /** Alpha (opacity) value from 0 to 1. 透明度值，范围 0 到 1。 */
+        this.alphaValue = 1;
+        /** Whether the color picker is disabled. 是否禁用颜色选择器。 */
+        this.disabled = false;
+        this.handleColor = (event) => {
+            this.value = event.currentTarget.value;
+            this.emitChange();
+        };
+        this.handleAlpha = (event) => {
+            this.alphaValue = Number(event.currentTarget.value);
+            this.emitChange();
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+      }
+
+      .picker {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-3);
+        min-height: var(--aithe-control-height-md);
+        padding: 0 var(--aithe-space-3);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-md);
+        background: var(--aithe-color-surface-elevated);
+      }
+
+      .swatch {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        border: 1px solid var(--aithe-color-border);
+        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
+      }
+
+      input[type='color'] {
+        width: 40px;
+        height: 28px;
+        padding: 0;
+        border: none;
+        background: transparent;
+      }
+
+      input[type='range'] {
+        width: 80px;
+      }
+
+      .value {
+        color: var(--aithe-color-text-muted);
+        font-family: var(--aithe-font-family-mono);
+        font-size: var(--aithe-font-size-sm);
+      }
+    `,
+    ]; }
+    emitChange() {
+        this.emit('aithe-change', {
+            value: this.value,
+            alpha: this.alphaValue,
+            format: this.format,
+        });
+    }
+    render() {
+        const alphaHex = Math.round(this.alphaValue * 255)
+            .toString(16)
+            .padStart(2, '0');
+        const displayValue = this.alpha ? `${this.value}${alphaHex}` : this.value;
+        return html `
+      <div class="picker">
+        <span class="swatch" style=${`background:${this.value};opacity:${this.alphaValue};`}></span>
+        <input
+          type="color"
+          .value=${this.value}
+          ?disabled=${this.disabled}
+          @input=${this.handleColor}
+        />
+        ${this.alpha
+            ? html `
+              <input
+                type="range"
+                min="0"
+                max="1"
+                step="0.01"
+                .value=${String(this.alphaValue)}
+                ?disabled=${this.disabled}
+                @input=${this.handleAlpha}
+              />
+            `
+            : null}
+        <span class="value">${displayValue}</span>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheColorPicker.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], AitheColorPicker.prototype, "format", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheColorPicker.prototype, "alpha", void 0);
+__decorate([
+    property({ type: Number, attribute: 'alpha-value' })
+], AitheColorPicker.prototype, "alphaValue", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheColorPicker.prototype, "disabled", void 0);
+AitheColorPicker = __decorate([
+    customElement('aithe-color-picker')
+], AitheColorPicker);
+export { AitheColorPicker };

package/dist/components/form/combobox.d.ts

@@ -1,12 +1,34 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 /**
  * Filterable input + option list combobox.
+ * 可过滤的输入框 + 选项列表组合框。
+ *
+ * @slot - Default slot (unused; combobox is self-contained). 默认插槽（未使用，组合框为自包含组件）。
+ * @fires aithe-change - Emitted when an option is selected, with `{ value, option }`. 选中选项时触发。
+ * @fires aithe-input - Emitted on every keystroke, with `{ value }`. 每次按键时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-combobox
+ *   options='[{"label":"Apple","id":"apple"},{"label":"Banana","id":"banana"}]'
+ *   filterable
+ * ></aithe-combobox>
+ * ```
  */
 export declare class AitheCombobox extends AitheElement {
+    /** Current input value. 当前输入值。 */
     value: string;
+    /** Display title for the combobox (shown as tooltip). 组合框的显示标题（作为工具提示）。 */
+    title: string;
+    /** Icon name to display before the input. 在输入框前显示的图标名称。 */
+    icon: string;
+    /** JSON string of combobox options. 组合框选项的 JSON 字符串。 */
     options: string;
+    /** Whether the input supports filtering options. 是否支持过滤选项。 */
     filterable: boolean;
+    /** Whether the combobox is disabled. 是否禁用组合框。 */
     disabled: boolean;
+    /** Placeholder text for the input. 输入框的占位文本。 */
     placeholder: string;
     private open;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
@@ -14,9 +36,10 @@ export declare class AitheCombobox extends AitheElement {
     disconnectedCallback(): void;
     private get parsedOptions();
     private get filteredOptions();
-    private handleDocumentPointer;
-    private handleInput;
+    private readonly handleDocumentPointer;
+    private readonly handleInput;
     private selectOption;
     render(): import("lit-html").TemplateResult<1>;
+    private renderOptionList;
 }
 //# sourceMappingURL=combobox.d.ts.map

package/dist/components/form/combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/components/form/combobox.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAQxD;;GAEG;AACH,qBACa,aAAc,SAAQ,YAAY;IACjB,KAAK,SAAM;IACX,OAAO,SAAQ;IACd,UAAU,UAAQ;IACH,QAAQ,UAAS;IACjC,WAAW,SAAsB;IAEpD,OAAO,CAAC,IAAI,CAAS;IAE9B,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAsEpB;IAEF,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,KAAK,aAAa,GAOxB;IAED,OAAO,KAAK,eAAe,GAQ1B;IAED,OAAO,CAAC,qBAAqB,CAI3B;IAEF,OAAO,CAAC,WAAW,CAIjB;IAEF,OAAO,CAAC,YAAY;IAMpB,MAAM;CA8BP"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/components/form/combobox.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAYnD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,aAAc,SAAQ,YAAY;IAC7C,kCAAkC;IACN,KAAK,SAAM;IACvC,2EAA2E;IAC/C,KAAK,SAAM;IACvC,2DAA2D;IAC/B,IAAI,SAAM;IACtC,wDAAwD;IAC5B,OAAO,SAAQ;IAC3C,8DAA8D;IACjC,UAAU,UAAQ;IAC/C,iDAAiD;IACL,QAAQ,UAAS;IAC7D,gDAAgD;IACpB,WAAW,SAAM;IAEpC,OAAO,CAAC,IAAI,CAAS;IAE9B,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAoHpB;IAEF,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,KAAK,aAAa,GAOxB;IAED,OAAO,KAAK,eAAe,GAQ1B;IAED,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAIpC;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAK1B;IAEF,OAAO,CAAC,YAAY;IAMpB,MAAM;IA0BN,OAAO,CAAC,gBAAgB;CAwBzB"}

package/dist/components/form/combobox.js

@@ -0,0 +1,282 @@
+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, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+/**
+ * Filterable input + option list combobox.
+ * 可过滤的输入框 + 选项列表组合框。
+ *
+ * @slot - Default slot (unused; combobox is self-contained). 默认插槽（未使用，组合框为自包含组件）。
+ * @fires aithe-change - Emitted when an option is selected, with `{ value, option }`. 选中选项时触发。
+ * @fires aithe-input - Emitted on every keystroke, with `{ value }`. 每次按键时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-combobox
+ *   options='[{"label":"Apple","id":"apple"},{"label":"Banana","id":"banana"}]'
+ *   filterable
+ * ></aithe-combobox>
+ * ```
+ */
+let AitheCombobox = class AitheCombobox extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Current input value. 当前输入值。 */
+        this.value = '';
+        /** Display title for the combobox (shown as tooltip). 组合框的显示标题（作为工具提示）。 */
+        this.title = '';
+        /** Icon name to display before the input. 在输入框前显示的图标名称。 */
+        this.icon = '';
+        /** JSON string of combobox options. 组合框选项的 JSON 字符串。 */
+        this.options = '[]';
+        /** Whether the input supports filtering options. 是否支持过滤选项。 */
+        this.filterable = true;
+        /** Whether the combobox is disabled. 是否禁用组合框。 */
+        this.disabled = false;
+        /** Placeholder text for the input. 输入框的占位文本。 */
+        this.placeholder = '';
+        this.open = false;
+        this.handleDocumentPointer = (event) => {
+            if (!event.composedPath().includes(this)) {
+                this.open = false;
+            }
+        };
+        this.handleInput = (event) => {
+            event.stopPropagation();
+            this.value = event.currentTarget.value;
+            this.open = true;
+            this.emit('aithe-input', { value: this.value });
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        position: relative;
+        display: inline-flex;
+        width: 100%;
+      }
+
+      .control {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        width: 100%;
+        min-height: var(--aithe-control-height-md);
+        padding: 6px 12px;
+        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);
+      }
+
+      .control:focus-within {
+        border-color: var(--aithe-primary-5);
+        box-shadow: 0 0 0 4px var(--aithe-color-focus-ring);
+      }
+
+      .control.disabled {
+        opacity: 0.58;
+        cursor: not-allowed;
+        background: var(--aithe-color-surface-muted);
+      }
+
+      .value-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      input {
+        width: 100%;
+        min-width: 0;
+        margin: 0;
+        padding: 0;
+        border: none !important;
+        outline: none !important;
+        background: transparent;
+        color: var(--aithe-color-text);
+        line-height: inherit;
+      }
+
+      input::placeholder {
+        color: var(--aithe-color-text-subtle);
+      }
+
+      input:focus {
+        outline: none !important;
+        border: none !important;
+      }
+
+      .panel {
+        position: absolute;
+        top: calc(100% + var(--aithe-space-2));
+        left: 0;
+        right: 0;
+        z-index: var(--aithe-z-dropdown);
+        display: grid;
+        gap: var(--aithe-space-1);
+        max-height: 260px;
+        padding: var(--aithe-space-2);
+        overflow: auto;
+        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);
+      }
+
+      .item {
+        min-height: 36px;
+        padding: 0 var(--aithe-space-3);
+        border: none;
+        border-radius: var(--aithe-radius-md);
+        background: transparent;
+        color: var(--aithe-color-text);
+        text-align: left;
+        cursor: pointer;
+      }
+
+      .item:hover {
+        background: var(--aithe-color-surface-muted);
+      }
+
+      .item.primary {
+        color: var(--aithe-primary-7);
+      }
+      .item.success {
+        color: var(--aithe-success-7);
+      }
+      .item.warning {
+        color: var(--aithe-warning-7);
+      }
+      .item.danger {
+        color: var(--aithe-danger-7);
+      }
+
+      .option-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .empty {
+        padding: var(--aithe-space-3);
+        color: var(--aithe-color-text-subtle);
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('mousedown', this.handleDocumentPointer);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('mousedown', this.handleDocumentPointer);
+    }
+    get parsedOptions() {
+        try {
+            const parsed = JSON.parse(this.options);
+            return parsed.map((item) => (typeof item === 'string' ? { label: item, id: item } : item));
+        }
+        catch {
+            return [];
+        }
+    }
+    get filteredOptions() {
+        const options = this.parsedOptions;
+        if (!this.filterable || !this.value) {
+            return options;
+        }
+        const keyword = this.value.toLowerCase();
+        return options.filter((item) => item.label.toLowerCase().includes(keyword));
+    }
+    selectOption(option) {
+        this.value = option.id;
+        this.open = false;
+        this.emit('aithe-change', { value: this.value, option });
+    }
+    render() {
+        const options = this.filteredOptions;
+        return html `
+      <label class=${classMap({ control: true, disabled: this.disabled })} title=${this.title}>
+        ${this.icon
+            ? html `
+              <aithe-icon class="value-icon" name=${this.icon} size="16"></aithe-icon>
+            `
+            : nothing}
+        <input
+          .value=${this.value}
+          placeholder=${this.placeholder || t('form.combobox.placeholder')}
+          ?disabled=${this.disabled}
+          @focus=${() => (this.open = true)}
+          @input=${this.handleInput}
+        />
+      </label>
+      ${this.open
+            ? html `
+            <div class="panel">${this.renderOptionList(options)}</div>
+          `
+            : null}
+    `;
+    }
+    renderOptionList(options) {
+        if (!options.length) {
+            return [
+                html `
+          <div class="empty">${t('form.combobox.emptyText')}</div>
+        `,
+            ];
+        }
+        return options.map((option) => {
+            const intentClass = option.variant && option.variant !== 'default' ? option.variant : '';
+            const optionIcon = option.icon
+                ? html `
+            <aithe-icon class="option-icon" name=${option.icon} size="16"></aithe-icon>
+          `
+                : nothing;
+            return html `
+        <button class="item ${intentClass}" type="button" @click=${() => this.selectOption(option)}>
+          <span style="display:inline-flex;align-items:center;gap:var(--aithe-space-2);">
+            ${optionIcon}${option.label}
+          </span>
+        </button>
+      `;
+        });
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheCombobox.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], AitheCombobox.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheCombobox.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], AitheCombobox.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheCombobox.prototype, "filterable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheCombobox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], AitheCombobox.prototype, "placeholder", void 0);
+__decorate([
+    state()
+], AitheCombobox.prototype, "open", void 0);
+AitheCombobox = __decorate([
+    customElement('aithe-combobox')
+], AitheCombobox);
+export { AitheCombobox };

package/dist/components/form/date-picker.d.ts

@@ -1,12 +1,27 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 /**
  * Date input wrapper with optional range mode.
+ * 日期输入包装器，支持可选的范围模式。
+ *
+ * @slot - Default slot (unused; picker is self-contained). 默认插槽（未使用，选择器为自包含组件）。
+ * @fires aithe-change - Emitted when a date value changes, with `{ value, format }`. 日期值变更时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-date-picker value="2025-01-01" format="YYYY-MM-DD"></aithe-date-picker>
+ * <aithe-date-picker range value="2025-01-01" end-value="2025-01-31"></aithe-date-picker>
+ * ```
  */
 export declare class AitheDatePicker extends AitheElement {
+    /** Start date value. 起始日期值。 */
     value: string;
+    /** Display format pattern. 显示格式模式。 */
     format: string;
+    /** Whether to enable date range selection. 是否启用日期范围选择。 */
     range: boolean;
+    /** Whether the date picker is disabled. 是否禁用日期选择器。 */
     disabled: boolean;
+    /** End date value for range mode. 范围模式的结束日期值。 */
     endValue: string;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     private emitChange;

package/dist/components/form/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/form/date-picker.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD;;GAEG;AACH,qBACa,eAAgB,SAAQ,YAAY;IACnB,KAAK,SAAM;IACX,MAAM,SAAgB;IACrB,KAAK,UAAS;IACC,QAAQ,UAAS;IACT,QAAQ,SAAM;IAElE,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA8BpB;IAEF,OAAO,CAAC,UAAU;IAOlB,MAAM;CAmBP"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/form/date-picker.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;;GAYG;AACH,qBACa,eAAgB,SAAQ,YAAY;IAC/C,+BAA+B;IACH,KAAK,SAAM;IACvC,sCAAsC;IACV,MAAM,SAAgB;IAClD,0DAA0D;IAC7B,KAAK,UAAS;IAC3C,sDAAsD;IACV,QAAQ,UAAS;IAC7D,iDAAiD;IACG,QAAQ,SAAM;IAElE,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA8BpB;IAEF,OAAO,CAAC,UAAU;IAOlB,MAAM;CA6BP"}