@aithe/aithe-ui 26.2.3 → 26.3.2

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

@@ -3,7 +3,7 @@ import { AitheElement } from '../../core/aithe-element';
  * JSON-driven auto form that renders form items from a configuration array.
  * JSON 驱动的自动表单，根据配置数组自动渲染表单项。
  *
- * @slot - Default slot for custom actions below the auto-generated items. Replaces the built-in submit button when provided. 自动生成项下方的自定义操作区域，传入内容后将替换内置提交按钮。
+ * @slot - Default slot for custom actions (buttons) below the auto-generated items. Use together with `show-submit` to control the built-in submit button. 自动生成项下方的自定义操作区域（按钮），配合 `show-submit` 属性控制内置提交按钮的显隐。
  * ### Events
  * - **aithe-validate** — Emitted after validation, with `{ valid, errors }`. 校验完成后触发。
  * - **aithe-submit** — Emitted on valid form submission, with `{ values }`. 有效表单提交时触发。
@@ -55,9 +55,19 @@ export declare class AitheAutoform extends AitheElement {
     submitText: string;
     /** Whether the form is in a submitting state. 表单是否处于提交中状态。 */
     loading: boolean;
+    /**
+     * Initial values for form fields, as an object or JSON string.
+     * When provided, these values override `dft` for each matching field.
+     * 表单字段初始值，支持对象或 JSON 字符串。提供时覆盖对应字段的 `dft`。
+     */
+    initialValues: Record<string, unknown> | string;
+    private get _initialValues();
     private readonly formItems;
-    private readonly actionNodes;
-    private hasActionSlot;
+    /**
+     * Whether to show the built-in submit button. Set to false when using custom action slot.
+     * 是否显示内置提交按钮。使用自定义操作 slot 时设为 false。
+     */
+    showSubmit: boolean;
     /** Current values of all fields, used for dependency resolution. 所有字段的当前值，用于依赖联动计算。 */
     private fieldValues;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
@@ -67,10 +77,10 @@ export declare class AitheAutoform extends AitheElement {
     getValues(): Record<string, unknown>;
     /** Resets all fields to their default values and clears errors. 重置所有字段为缺省值并清除错误。 */
     reset(): void;
+    /** Triggers form validation and submission programmatically. Emits aithe-submit if valid. 编程触发表单校验和提交，通过后触发 aithe-submit 事件。 */
+    submit(): void;
     /** Handles value change from a child autoform-item, updates fieldValues state and emits aithe-change. 处理子表单项的值变更，更新 fieldValues 状态并触发 aithe-change 事件。 */
     private readonly handleItemChange;
-    /** Syncs the action slot state — hides the built-in submit button when custom action content is provided. 同步 action slot 状态，当提供了自定义操作内容时隐藏内置提交按钮。 */
-    private readonly syncActionSlot;
     /** Handles form submit: validates all fields, emits aithe-submit if valid. 处理表单提交：校验所有字段，通过后触发 aithe-submit 事件。 */
     private readonly handleSubmit;
     /** Parses the fields JSON string into a typed configuration array. Falls back to sanitized JSON on first parse failure. 解析 fields JSON 字符串为类型化配置数组，首次解析失败时尝试清理后重新解析。 */

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

@@ -1 +1 @@
-{"version":3,"file":"autoform.d.ts","sourceRoot":"","sources":["../../../src/components/form/autoform.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAMnD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,aAAc,SAAQ,YAAY;IAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACyB,MAAM,SAAQ;IAE1C,iEAAiE;IACH,gBAAgB,UAAQ;IAEtF,kCAAkC;IACoB,UAAU,SAAM;IAEtE,8DAA8D;IAClB,OAAO,UAAS;IAG5D,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;IAElC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAiB;IAE7D,OAAO,CAAC,aAAa,CAAS;IAEvC,uFAAuF;IAC9E,OAAO,CAAC,WAAW,CAA+B;IAE3D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAqBpB;IAEF,6GAA6G;IAC7G,QAAQ,IAAI,OAAO;IAkBnB,oGAAoG;IACpG,SAAS,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAYpC,oFAAoF;IACpF,KAAK,IAAI,IAAI;IAWb,0JAA0J;IAC1J,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAK/B;IAEF,qJAAqJ;IACrJ,OAAO,CAAC,QAAQ,CAAC,cAAc,CAE7B;IAEF,mHAAmH;IACnH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAO3B;IAEF,wKAAwK;IACxK,OAAO,CAAC,WAAW;IAcnB,+HAA+H;IAC/H,OAAO,CAAC,gBAAgB;IAaxB,+GAA+G;IAC/G,OAAO,CAAC,cAAc;IAWtB,MAAM;CAyDP;AAED,oCAAoC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,4CAA4C;AAC5C,YAAY,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,8CAA8C;AAC9C,YAAY,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"autoform.d.ts","sourceRoot":"","sources":["../../../src/components/form/autoform.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAMnD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,aAAc,SAAQ,YAAY;IAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACyB,MAAM,SAAQ;IAE1C,iEAAiE;IACH,gBAAgB,UAAQ;IAEtF,kCAAkC;IACoB,UAAU,SAAM;IAEtE,8DAA8D;IAClB,OAAO,UAAS;IAE5D;;;;OAIG;IACsD,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAM;IAE9G,OAAO,KAAK,cAAc,GAQzB;IAGD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;IAE3D;;;OAGG;IACoD,UAAU,UAAQ;IAEzE,uFAAuF;IAC9E,OAAO,CAAC,WAAW,CAA+B;IAE3D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAepB;IAEF,6GAA6G;IAC7G,QAAQ,IAAI,OAAO;IAkBnB,oGAAoG;IACpG,SAAS,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAYpC,oFAAoF;IACpF,KAAK,IAAI,IAAI;IAWb,gIAAgI;IAChI,MAAM,IAAI,IAAI;IAId,0JAA0J;IAC1J,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAK/B;IAEF,mHAAmH;IACnH,OAAO,CAAC,QAAQ,CAAC,YAAY,CAO3B;IAEF,wKAAwK;IACxK,OAAO,CAAC,WAAW;IAcnB,+HAA+H;IAC/H,OAAO,CAAC,gBAAgB;IAaxB,+GAA+G;IAC/G,OAAO,CAAC,cAAc;IAWtB,MAAM;CAwDP;AAED,oCAAoC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,4CAA4C;AAC5C,YAAY,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,8CAA8C;AAC9C,YAAY,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/form/autoform.js

@@ -0,0 +1,303 @@
+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;
+};
+/**
+ * @file JSON-driven auto form / JSON 驱动的自动表单
+ * @description 接收 JSON 配置数组，自动渲染所有表单项，支持实时校验和提交校验。
+ *              Accepts a JSON configuration array, automatically renders all form items,
+ *              supports real-time validation and submit-time validation.
+ */
+import { css, html, nothing } from 'lit';
+import { customElement, property, queryAll, state } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+/**
+ * JSON-driven auto form that renders form items from a configuration array.
+ * JSON 驱动的自动表单，根据配置数组自动渲染表单项。
+ *
+ * @slot - Default slot for custom actions (buttons) below the auto-generated items. Use together with `show-submit` to control the built-in submit button. 自动生成项下方的自定义操作区域（按钮），配合 `show-submit` 属性控制内置提交按钮的显隐。
+ * ### Events
+ * - **aithe-validate** — Emitted after validation, with `{ valid, errors }`. 校验完成后触发。
+ * - **aithe-submit** — Emitted on valid form submission, with `{ values }`. 有效表单提交时触发。
+ * - **aithe-change** — Emitted when any field value changes, with `{ name, value }`. 任意字段值变更时触发。
+ * @example
+ * ```html
+ * <aithe-autoform
+ *   fields='[
+ *     {"name":"username","type":"input","label":"Username","icon":"user","required":true,"placeholder":"Enter username"},
+ *     {"name":"role","type":"select","label":"Role","options":"[{\\"label\\":\\"Admin\\",\\"id\\":\\"admin\\"}]"}
+ *   ]'
+ * ></aithe-autoform>
+ * ```
+ */
+let AitheAutoform = class AitheAutoform extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * JSON string of field configuration array.
+         * 字段配置数组的 JSON 字符串。
+         *
+         * Each field object supports:
+         * - name (string, required): Field unique identifier
+         * - type (string): Control type — input|textarea|select|radio|checkbox|switch|number|slider|rate|color-picker|date-picker|time-picker|combobox
+         * - label (string): Label text
+         * - icon (string): Icon name before label
+         * - tooltip (string): Hover tooltip text
+         * - description (string): Description below control
+         * - dft (string): Default value
+         * - placeholder (string): Placeholder text
+         * - disabled (boolean): Whether disabled
+         * - required (boolean): Whether required
+         * - pattern (string): Validation regex pattern
+         * - message (string): Validation failure message
+         * - options (string): JSON string of options for select/radio/checkbox
+         * - inputType (string): HTML input type for type="input"
+         * - min (string): Min value for number/slider
+         * - max (string): Max value for number/slider
+         * - step (string): Step for number/slider/rate
+         * - rows (string): Rows for textarea
+         * - dependencies (string[]): Names of fields this field depends on
+         * - rules (array): Dependency rules — each rule has { type, condition?, options? }
+         *   - type: 'show'|'hide'|'disable'|'enable'|'clear'|'update'
+         *   - condition: Expression like "province !== ''" (optional, defaults to true)
+         *   - options: JSON string of options for 'update' rule
+         */
+        this.fields = '[]';
+        /** Whether to validate on every field change. 是否在每次字段变更时实时校验。 */
+        this.validateOnChange = true;
+        /** Submit button text. 提交按钮文本。 */
+        this.submitText = '';
+        /** Whether the form is in a submitting state. 表单是否处于提交中状态。 */
+        this.loading = false;
+        /**
+         * Initial values for form fields, as an object or JSON string.
+         * When provided, these values override `dft` for each matching field.
+         * 表单字段初始值，支持对象或 JSON 字符串。提供时覆盖对应字段的 `dft`。
+         */
+        this.initialValues = {};
+        /**
+         * Whether to show the built-in submit button. Set to false when using custom action slot.
+         * 是否显示内置提交按钮。使用自定义操作 slot 时设为 false。
+         */
+        this.showSubmit = true;
+        /** Current values of all fields, used for dependency resolution. 所有字段的当前值，用于依赖联动计算。 */
+        this.fieldValues = {};
+        /** Handles value change from a child autoform-item, updates fieldValues state and emits aithe-change. 处理子表单项的值变更，更新 fieldValues 状态并触发 aithe-change 事件。 */
+        this.handleItemChange = (ev) => {
+            ev.stopPropagation();
+            const { name, value } = ev.detail;
+            this.fieldValues = { ...this.fieldValues, [name]: value };
+            this.emit('aithe-change', { name, value });
+        };
+        /** Handles form submit: validates all fields, emits aithe-submit if valid. 处理表单提交：校验所有字段，通过后触发 aithe-submit 事件。 */
+        this.handleSubmit = (ev) => {
+            ev.preventDefault();
+            const valid = this.validate();
+            if (!valid) {
+                return;
+            }
+            this.emit('aithe-submit', { values: this.getValues() });
+        };
+    }
+    get _initialValues() {
+        if (typeof this.initialValues === 'string') {
+            if (this.initialValues) {
+                try {
+                    return JSON.parse(this.initialValues);
+                }
+                catch {
+                    return {};
+                }
+            }
+            return {};
+        }
+        return this.initialValues ?? {};
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      .autoform-container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--aithe-space-5);
+        width: 100%;
+      }
+    `,
+    ]; }
+    /** Validates all form items and emits validate event. Skips hidden fields. 校验所有表单项并触发 validate 事件，跳过隐藏字段。 */
+    validate() {
+        const items = Array.from(this.formItems);
+        const errors = {};
+        let valid = true;
+        for (const item of items) {
+            if (!item.visible)
+                continue;
+            const itemValid = item.validate();
+            if (!itemValid) {
+                valid = false;
+                errors[item.name] = item.getError?.() ?? '';
+            }
+        }
+        this.emit('aithe-validate', { valid, errors });
+        return valid;
+    }
+    /** Collects all field values as a key-value object. Excludes hidden fields. 收集所有字段值为键值对象，排除隐藏字段。 */
+    getValues() {
+        const values = {};
+        const items = Array.from(this.formItems);
+        for (const item of items) {
+            if (!item.visible)
+                continue;
+            values[item.name] = item.getFieldValue();
+        }
+        return values;
+    }
+    /** Resets all fields to their default values and clears errors. 重置所有字段为缺省值并清除错误。 */
+    reset() {
+        const items = Array.from(this.formItems);
+        const newFieldValues = {};
+        for (const item of items) {
+            item.value = item.dft ?? '';
+            item.clearError();
+            newFieldValues[item.name] = item.getFieldValue();
+        }
+        this.fieldValues = newFieldValues;
+    }
+    /** Triggers form validation and submission programmatically. Emits aithe-submit if valid. 编程触发表单校验和提交，通过后触发 aithe-submit 事件。 */
+    submit() {
+        this.handleSubmit(new Event('submit', { cancelable: true }));
+    }
+    /** Parses the fields JSON string into a typed configuration array. Falls back to sanitized JSON on first parse failure. 解析 fields JSON 字符串为类型化配置数组，首次解析失败时尝试清理后重新解析。 */
+    parseFields() {
+        const raw = this.fields || '[]';
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            try {
+                const sanitized = raw.replaceAll(/\\(?!["\\/bfnrtu])/g, '\\\\');
+                return JSON.parse(sanitized);
+            }
+            catch {
+                return [];
+            }
+        }
+    }
+    /** Normalizes options from JSON string or array to a uniform FormItemOption array. 将 JSON 字符串或数组格式的选项统一为 FormItemOption 数组。 */
+    normalizeOptions(raw) {
+        if (Array.isArray(raw))
+            return raw;
+        if (typeof raw === 'string') {
+            try {
+                const parsed = JSON.parse(raw || '[]');
+                return Array.isArray(parsed) ? parsed : [];
+            }
+            catch {
+                return [];
+            }
+        }
+        return [];
+    }
+    /** Normalizes dependency rules, parsing options for 'update' type rules. 规范化依赖联动规则，为 update 类型规则解析 options。 */
+    normalizeRules(rules) {
+        if (!rules)
+            return [];
+        return rules.map((rule) => ({
+            ...rule,
+            options: rule.type === 'update' && rule.options != null
+                ? this.normalizeOptions(rule.options)
+                : rule.options,
+        }));
+    }
+    render() {
+        const fieldConfigs = this.parseFields();
+        const submitLabel = this.submitText || t('form.autoform.submit');
+        const initVals = this._initialValues;
+        return html `
+      <form class="autoform-container" novalidate @submit=${this.handleSubmit}>
+        ${fieldConfigs.map((field) => {
+            const depValues = {};
+            if (field.dependencies) {
+                for (const dep of field.dependencies) {
+                    depValues[dep] = this.fieldValues[dep] ?? '';
+                }
+            }
+            const fieldValue = field.name && field.name in initVals ? initVals[field.name] : (field.dft ?? '');
+            return html `
+            <aithe-autoform-item
+              .name=${field.name ?? ''}
+              .type=${field.type ?? 'input'}
+              .label=${field.label ?? ''}
+              .icon=${field.icon ?? ''}
+              .tooltip=${field.tooltip ?? ''}
+              .description=${field.description ?? ''}
+              .dft=${field.dft ?? ''}
+              .placeholder=${field.placeholder ?? ''}
+              .disabled=${field.disabled ?? false}
+              .required=${field.required ?? false}
+              .pattern=${field.pattern ?? ''}
+              .message=${field.message ?? ''}
+              .options=${this.normalizeOptions(field.options)}
+              .value=${fieldValue}
+              .inputType=${field.inputType ?? 'text'}
+              .min=${field.min ?? ''}
+              .max=${field.max ?? ''}
+              .step=${field.step ?? ''}
+              .rows=${field.rows ?? '3'}
+              .validateOnChange=${this.validateOnChange}
+              .dependencies=${field.dependencies ?? []}
+              .rules=${this.normalizeRules(field.rules)}
+              .dependencyValues=${depValues}
+              @aithe-change=${this.handleItemChange}
+            ></aithe-autoform-item>
+          `;
+        })}
+        <aithe-button-group>
+          <slot></slot>
+          ${this.showSubmit ? html `
+            <aithe-button type="primary" ?loading=${this.loading} @aithe-click=${this.handleSubmit}>
+              ${submitLabel}
+            </aithe-button>
+          ` : nothing}
+        </aithe-button-group>
+      </form>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheAutoform.prototype, "fields", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'validate-on-change' })
+], AitheAutoform.prototype, "validateOnChange", void 0);
+__decorate([
+    property({ type: String, attribute: 'submit-text' })
+], AitheAutoform.prototype, "submitText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheAutoform.prototype, "loading", void 0);
+__decorate([
+    property({ type: Object, attribute: 'initial-values' })
+], AitheAutoform.prototype, "initialValues", void 0);
+__decorate([
+    queryAll('aithe-autoform-item')
+], AitheAutoform.prototype, "formItems", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-submit' })
+], AitheAutoform.prototype, "showSubmit", void 0);
+__decorate([
+    state()
+], AitheAutoform.prototype, "fieldValues", void 0);
+AitheAutoform = __decorate([
+    customElement('aithe-autoform')
+], AitheAutoform);
+export { AitheAutoform };

package/dist/components/form/checkbox-group.js

@@ -0,0 +1,118 @@
+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, queryAssignedElements } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Checkbox group container that manages collective checked values.
+ * 复选框组容器，管理所有子复选框的选中值集合。
+ *
+ * @slot - Default slot for aithe-checkbox children. 子复选框内容。
+ * @fires aithe-change - Emitted when the group value changes, with `value: string[]`. 组值变更时触发。
+ * @example
+ * ```html
+ * <aithe-checkbox-group value='["a","b"]' name="options">
+ *   <aithe-checkbox value="a">Option A</aithe-checkbox>
+ *   <aithe-checkbox value="b">Option B</aithe-checkbox>
+ * </aithe-checkbox-group>
+ * ```
+ */
+let AitheCheckboxGroup = class AitheCheckboxGroup extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** JSON string of the current checked values. 当前选中值的 JSON 字符串。 */
+        this.valueJson = '';
+        /** Array of currently checked values. 当前选中值数组。 */
+        this.value = [];
+        /** Whether all child checkboxes are disabled. 是否禁用所有子复选框。 */
+        this.disabled = false;
+        /** Name attribute propagated to child checkboxes. 传递给子复选框的 name 属性。 */
+        this.name = '';
+        /** Syncs checked/disabled/name state to child checkboxes. 将选中/禁用/name 状态同步到子复选框。 */
+        this.syncChildren = () => {
+            const checkboxes = this.nodes.filter((node) => node instanceof HTMLElement && node.tagName.toLowerCase() === 'aithe-checkbox');
+            for (const checkbox of checkboxes) {
+                checkbox.checked = this.value.includes(checkbox.value);
+                checkbox.groupDisabled = this.disabled;
+                checkbox.name = this.name || checkbox.name;
+            }
+        };
+        /** Handles child checkbox toggle and updates group value. 处理子复选框切换并更新组值。 */
+        this.handleToggle = (event) => {
+            event.stopPropagation();
+            const next = new Set(this.value);
+            if (event.detail.checked) {
+                next.add(event.detail.value);
+            }
+            else {
+                next.delete(event.detail.value);
+            }
+            this.value = Array.from(next);
+            this.syncChildren();
+            this.emit('aithe-change', { value: this.value });
+        };
+    }
+    /** Parses valueJson into the value array on property change. 属性变更时将 valueJson 解析为 value 数组。 */
+    willUpdate(changed) {
+        if (changed.has('valueJson') && this.valueJson) {
+            try {
+                this.value = JSON.parse(this.valueJson);
+            }
+            catch {
+                this.value = [];
+            }
+        }
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        flex-wrap: wrap;
+        gap: var(--aithe-space-4);
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('aithe-checkbox-toggle', this.handleToggle);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('aithe-checkbox-toggle', this.handleToggle);
+    }
+    updated(changed) {
+        if (changed.has('value') || changed.has('disabled') || changed.has('name')) {
+            this.syncChildren();
+        }
+    }
+    render() {
+        return html `
+      <slot @slotchange=${this.syncChildren}></slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'value' })
+], AitheCheckboxGroup.prototype, "valueJson", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheCheckboxGroup.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheCheckboxGroup.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], AitheCheckboxGroup.prototype, "name", void 0);
+__decorate([
+    queryAssignedElements()
+], AitheCheckboxGroup.prototype, "nodes", void 0);
+AitheCheckboxGroup = __decorate([
+    customElement('aithe-checkbox-group')
+], AitheCheckboxGroup);
+export { AitheCheckboxGroup };

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