@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/components/form/date-picker.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 } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * 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>
+ * ```
+ */
+let AitheDatePicker = class AitheDatePicker extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Start date value. 起始日期值。 */
+        this.value = '';
+        /** Display format pattern. 显示格式模式。 */
+        this.format = 'YYYY-MM-DD';
+        /** Whether to enable date range selection. 是否启用日期范围选择。 */
+        this.range = false;
+        /** Whether the date picker is disabled. 是否禁用日期选择器。 */
+        this.disabled = false;
+        /** End date value for range mode. 范围模式的结束日期值。 */
+        this.endValue = '';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+      }
+
+      .wrap {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        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);
+      }
+
+      input {
+        min-width: 0;
+        border: none;
+        outline: none;
+        background: transparent;
+        color: var(--aithe-color-text);
+      }
+
+      .sep {
+        color: var(--aithe-color-text-subtle);
+      }
+    `,
+    ]; }
+    emitChange() {
+        this.emit('aithe-change', {
+            value: this.range ? [this.value, this.endValue] : this.value,
+            format: this.format,
+        });
+    }
+    render() {
+        return html `
+      <div class="wrap">
+        <input
+          type="date"
+          .value=${this.value}
+          ?disabled=${this.disabled}
+          @change=${(event) => {
+            this.value = event.currentTarget.value;
+            this.emitChange();
+        }}
+        />
+        ${this.range
+            ? html `
+              <span class="sep">~</span>
+              <input
+                type="date"
+                .value=${this.endValue}
+                ?disabled=${this.disabled}
+                @change=${(event) => {
+                this.endValue = event.currentTarget.value;
+                this.emitChange();
+            }}
+              />
+            `
+            : null}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheDatePicker.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], AitheDatePicker.prototype, "format", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheDatePicker.prototype, "range", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheDatePicker.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, attribute: 'end-value' })
+], AitheDatePicker.prototype, "endValue", void 0);
+AitheDatePicker = __decorate([
+    customElement('aithe-date-picker')
+], AitheDatePicker);
+export { AitheDatePicker };

package/dist/components/form/form-item.d.ts

@@ -1,14 +1,33 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 /**
  * Labeled form field row with light validation state.
+ * 带标签的表单字段行，支持轻量级校验状态。
+ *
+ * @slot - Default slot for the form control element. 表单控件元素内容。
+ * @example
+ * ```html
+ * <aithe-form-item label="Email" prop="email" required error="Email is required">
+ *   <aithe-input name="email"></aithe-input>
+ * </aithe-form-item>
+ * ```
  */
 export declare class AitheFormItem extends AitheElement {
+    /** Field label text. 字段标签文本。 */
     label: string;
+    /** Display title for the form item (shown as tooltip). 表单项的显示标题（作为工具提示）。 */
+    title: string;
+    /** Icon name to display before the label. 在标签前显示的图标名称。 */
+    icon: string;
+    /** Field property name for validation mapping. 用于校验映射的字段属性名。 */
     prop: string;
+    /** Whether the field is required. 是否为必填字段。 */
     required: boolean;
+    /** Static error message to display. 显示的静态错误消息。 */
     error: string;
+    /** Internal error message from validation. 校验产生的内部错误消息。 */
     private internalError;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /** Validates the child control and sets internal error state. 校验子控件并设置内部错误状态。 */
     validate(): boolean;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/form/form-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-item.d.ts","sourceRoot":"","sources":["../../../src/components/form/form-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD;;GAEG;AACH,qBACa,aAAc,SAAQ,YAAY;IACjB,KAAK,SAAM;IACX,IAAI,SAAM;IACT,QAAQ,UAAS;IAClB,KAAK,SAAM;IAE9B,OAAO,CAAC,aAAa,CAAM;IAEpC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAwBpB;IAEF,QAAQ,IAAI,OAAO;IAcnB,MAAM;CAgBP"}
+{"version":3,"file":"form-item.d.ts","sourceRoot":"","sources":["../../../src/components/form/form-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAInD;;;;;;;;;;;GAWG;AACH,qBACa,aAAc,SAAQ,YAAY;IAC7C,gCAAgC;IACJ,KAAK,SAAM;IACvC,4EAA4E;IAChD,KAAK,SAAM;IACvC,0DAA0D;IAC9B,IAAI,SAAM;IACtC,gEAAgE;IACpC,IAAI,SAAM;IACtC,8CAA8C;IACjB,QAAQ,UAAS;IAC9C,kDAAkD;IACtB,KAAK,SAAM;IAEvC,2DAA2D;IAClD,OAAO,CAAC,aAAa,CAAM;IAEpC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DA6BpB;IAEF,iFAAiF;IACjF,QAAQ,IAAI,OAAO;IAqBnB,MAAM;CAgCP"}

package/dist/components/form/form-item.js

@@ -0,0 +1,141 @@
+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 { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { t } from '../../styles/i18n';
+/**
+ * Labeled form field row with light validation state.
+ * 带标签的表单字段行，支持轻量级校验状态。
+ *
+ * @slot - Default slot for the form control element. 表单控件元素内容。
+ * @example
+ * ```html
+ * <aithe-form-item label="Email" prop="email" required error="Email is required">
+ *   <aithe-input name="email"></aithe-input>
+ * </aithe-form-item>
+ * ```
+ */
+let AitheFormItem = class AitheFormItem extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Field label text. 字段标签文本。 */
+        this.label = '';
+        /** Display title for the form item (shown as tooltip). 表单项的显示标题（作为工具提示）。 */
+        this.title = '';
+        /** Icon name to display before the label. 在标签前显示的图标名称。 */
+        this.icon = '';
+        /** Field property name for validation mapping. 用于校验映射的字段属性名。 */
+        this.prop = '';
+        /** Whether the field is required. 是否为必填字段。 */
+        this.required = false;
+        /** Static error message to display. 显示的静态错误消息。 */
+        this.error = '';
+        /** Internal error message from validation. 校验产生的内部错误消息。 */
+        this.internalError = '';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: grid;
+        gap: var(--aithe-space-2);
+      }
+
+      .label {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        font-weight: var(--aithe-font-weight-medium);
+      }
+
+      .label-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .required {
+        color: var(--aithe-danger-6);
+      }
+
+      .message {
+        color: var(--aithe-danger-6);
+        font-size: var(--aithe-font-size-sm);
+      }
+    `,
+    ]; }
+    /** Validates the child control and sets internal error state. 校验子控件并设置内部错误状态。 */
+    validate() {
+        const control = this.querySelector('aithe-input, aithe-select, aithe-textarea, input, select, textarea');
+        const value = control?.value ?? '';
+        if (this.required && !String(value).trim()) {
+            this.internalError =
+                this.error ||
+                    t('form.formItem.required', '{label} is required', { label: this.label || this.prop || t('form.formItem.requiredField') });
+            return false;
+        }
+        this.internalError = '';
+        return true;
+    }
+    render() {
+        const message = this.error || this.internalError;
+        const labelIcon = this.icon
+            ? html `
+          <aithe-icon class="label-icon" name=${this.icon} size="16"></aithe-icon>
+        `
+            : nothing;
+        const requiredMark = this.required
+            ? html `
+          <span class="required">*</span>
+        `
+            : null;
+        const labelBlock = this.label
+            ? html `
+          <label class="label" title=${this.title}>
+            ${labelIcon}
+            <span>${this.label}</span>
+            ${requiredMark}
+          </label>
+        `
+            : null;
+        return html `
+      ${labelBlock}
+      <slot></slot>
+      ${message
+            ? html `
+            <span class="message">${message}</span>
+          `
+            : null}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheFormItem.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], AitheFormItem.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheFormItem.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], AitheFormItem.prototype, "prop", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheFormItem.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], AitheFormItem.prototype, "error", void 0);
+__decorate([
+    state()
+], AitheFormItem.prototype, "internalError", void 0);
+AitheFormItem = __decorate([
+    customElement('aithe-form-item')
+], AitheFormItem);
+export { AitheFormItem };

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

@@ -1,14 +1,33 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
 /**
  * Form container with lightweight validation and submit events.
+ * 表单容器，支持轻量级校验和提交事件。
+ *
+ * @slot - Default slot for form items and controls. 表单项和控件内容。
+ * @fires aithe-validate - Emitted after validation, with `{ valid }`. 校验完成后触发。
+ * @fires aithe-submit - Emitted on valid form submission, with `{ values }`. 有效表单提交时触发。
+ * @example
+ * ```html
+ * <aithe-form model='{"name":""}' rules='{}'>
+ *   <aithe-form-item label="Name" prop="name" required>
+ *     <aithe-input name="name"></aithe-input>
+ *   </aithe-form-item>
+ * </aithe-form>
+ * ```
  */
-export declare class AitheForm extends AitheElement {
+declare class AitheForm extends AitheElement {
+    /** JSON string of the form model data. 表单模型数据的 JSON 字符串。 */
     model: string;
+    /** JSON string of validation rules. 校验规则的 JSON 字符串。 */
     rules: string;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /** Validates all child form-items and emits validate event. 校验所有子表单项并触发 validate 事件。 */
     validate(): boolean;
+    /** Collects name/value pairs from all form controls. 从所有表单控件收集 name/value 对。 */
     private collectValues;
-    private handleSubmit;
+    /** Handles form submit: validates then emits submit event on success. 处理表单提交：校验成功后触发 submit 事件。 */
+    private readonly handleSubmit;
     render(): import("lit-html").TemplateResult<1>;
 }
+export default AitheForm;
 //# sourceMappingURL=form.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/form/form.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIxD;;GAEG;AACH,qBACa,SAAU,SAAQ,YAAY;IACb,KAAK,SAAQ;IACb,KAAK,SAAQ;IAEzC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAYpB;IAEF,QAAQ,IAAI,OAAO;IAOnB,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,YAAY,CASlB;IAEF,MAAM;CAOP"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/form/form.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAInD;;;;;;;;;;;;;;;GAeG;AACH,cACM,SAAU,SAAQ,YAAY;IAClC,4DAA4D;IAChC,KAAK,SAAQ;IACzC,uDAAuD;IAC3B,KAAK,SAAQ;IAEzC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAYpB;IAEF,wFAAwF;IACxF,QAAQ,IAAI,OAAO;IAOnB,gFAAgF;IAChF,OAAO,CAAC,aAAa;IAuBrB,mGAAmG;IACnG,OAAO,CAAC,QAAQ,CAAC,YAAY,CAS3B;IAEF,MAAM;CAOP;AAED,eAAe,SAAS,CAAA"}

package/dist/components/form/form.js

@@ -0,0 +1,94 @@
+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';
+/**
+ * Form container with lightweight validation and submit events.
+ * 表单容器，支持轻量级校验和提交事件。
+ *
+ * @slot - Default slot for form items and controls. 表单项和控件内容。
+ * @fires aithe-validate - Emitted after validation, with `{ valid }`. 校验完成后触发。
+ * @fires aithe-submit - Emitted on valid form submission, with `{ values }`. 有效表单提交时触发。
+ * @example
+ * ```html
+ * <aithe-form model='{"name":""}' rules='{}'>
+ *   <aithe-form-item label="Name" prop="name" required>
+ *     <aithe-input name="name"></aithe-input>
+ *   </aithe-form-item>
+ * </aithe-form>
+ * ```
+ */
+let AitheForm = class AitheForm extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** JSON string of the form model data. 表单模型数据的 JSON 字符串。 */
+        this.model = '{}';
+        /** JSON string of validation rules. 校验规则的 JSON 字符串。 */
+        this.rules = '{}';
+        /** Handles form submit: validates then emits submit event on success. 处理表单提交：校验成功后触发 submit 事件。 */
+        this.handleSubmit = (event) => {
+            event.preventDefault();
+            const valid = this.validate();
+            if (!valid) {
+                return;
+            }
+            this.emit('aithe-submit', { values: this.collectValues() });
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      form {
+        display: grid;
+        gap: var(--aithe-space-5);
+      }
+    `,
+    ]; }
+    /** Validates all child form-items and emits validate event. 校验所有子表单项并触发 validate 事件。 */
+    validate() {
+        const items = Array.from(this.querySelectorAll('aithe-form-item'));
+        const valid = items.every((item) => item.validate());
+        this.emit('aithe-validate', { valid });
+        return valid;
+    }
+    /** Collects name/value pairs from all form controls. 从所有表单控件收集 name/value 对。 */
+    collectValues() {
+        const values = {};
+        const controls = Array.from(this.querySelectorAll('aithe-input, aithe-select, aithe-textarea, aithe-switch, input, select, textarea'));
+        let index = 0;
+        for (const control of controls) {
+            const typed = control;
+            const key = typed.name || control.getAttribute('name') || `field-${index + 1}`;
+            values[key] = typeof typed.checked === 'boolean' ? typed.checked : typed.value;
+            index++;
+        }
+        return values;
+    }
+    render() {
+        return html `
+      <form novalidate @submit=${this.handleSubmit}>
+        <slot></slot>
+      </form>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheForm.prototype, "model", void 0);
+__decorate([
+    property({ type: String })
+], AitheForm.prototype, "rules", void 0);
+AitheForm = __decorate([
+    customElement('aithe-form')
+], AitheForm);
+export default AitheForm;

package/dist/components/form/radio-group.d.ts

@@ -1,15 +1,35 @@
 import { AitheElement } from '../../core/aithe-element';
+/**
+ * Radio group container that manages the currently selected value.
+ * 单选组容器，管理当前选中的值。
+ *
+ * @slot - Default slot for aithe-radio children. 子单选按钮内容。
+ * @fires aithe-change - Emitted when the group value changes, with `value: string`. 组值变更时触发。
+ * @example
+ * ```html
+ * <aithe-radio-group value="a" name="choice">
+ *   <aithe-radio value="a">Option A</aithe-radio>
+ *   <aithe-radio value="b">Option B</aithe-radio>
+ * </aithe-radio-group>
+ * ```
+ */
 export declare class AitheRadioGroup extends AitheElement {
+    /** Currently selected radio value. 当前选中的单选值。 */
     value: string;
+    /** Whether all child radios are disabled. 是否禁用所有子单选按钮。 */
     disabled: boolean;
+    /** Name attribute propagated to child radios. 传递给子单选按钮的 name 属性。 */
     name: string;
-    private nodes;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected firstUpdated(): void;
     updated(changed: Map<string, unknown>): void;
-    private syncChildren;
-    private handleToggle;
+    private getRadios;
+    /** Syncs checked/disabled/name state to child radios. 将选中/禁用/name 状态同步到子单选按钮。 */
+    private readonly syncChildren;
+    /** Handles child radio toggle and updates group value. 处理子单选按钮切换并更新组值。 */
+    private readonly handleToggle;
     render(): import("lit-html").TemplateResult<1>;
 }
 //# sourceMappingURL=radio-group.d.ts.map

package/dist/components/form/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/form/radio-group.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIxD,qBACa,eAAgB,SAAQ,YAAY;IACnB,KAAK,SAAM;IACV,QAAQ,UAAS;IAClB,IAAI,SAAM;IAEb,OAAO,CAAC,KAAK,CAAa;IAEnD,MAAM,CAAC,QAAQ,CAAC,MAAM,0DASpB;IAEF,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAM5C,OAAO,CAAC,YAAY,CAUlB;IAEF,OAAO,CAAC,YAAY,CASlB;IAEF,MAAM;CAGP"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/form/radio-group.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAInD;;;;;;;;;;;;;GAaG;AACH,qBACa,eAAgB,SAAQ,YAAY;IAC/C,gDAAgD;IACpB,KAAK,SAAM;IACvC,0DAA0D;IAC7B,QAAQ,UAAS;IAC9C,oEAAoE;IACxC,IAAI,SAAM;IAEtC,MAAM,CAAC,QAAQ,CAAC,MAAM,0DASpB;IAEF,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;cAKT,YAAY,IAAI,IAAI;IAIvC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAM5C,OAAO,CAAC,SAAS;IAMjB,iFAAiF;IACjF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAe3B;IAEF,0EAA0E;IAC1E,OAAO,CAAC,QAAQ,CAAC,YAAY,CAW3B;IAEF,MAAM;CAKP"}

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

@@ -0,0 +1,106 @@
+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';
+/**
+ * Radio group container that manages the currently selected value.
+ * 单选组容器，管理当前选中的值。
+ *
+ * @slot - Default slot for aithe-radio children. 子单选按钮内容。
+ * @fires aithe-change - Emitted when the group value changes, with `value: string`. 组值变更时触发。
+ * @example
+ * ```html
+ * <aithe-radio-group value="a" name="choice">
+ *   <aithe-radio value="a">Option A</aithe-radio>
+ *   <aithe-radio value="b">Option B</aithe-radio>
+ * </aithe-radio-group>
+ * ```
+ */
+let AitheRadioGroup = class AitheRadioGroup extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Currently selected radio value. 当前选中的单选值。 */
+        this.value = '';
+        /** Whether all child radios are disabled. 是否禁用所有子单选按钮。 */
+        this.disabled = false;
+        /** Name attribute propagated to child radios. 传递给子单选按钮的 name 属性。 */
+        this.name = '';
+        /** Syncs checked/disabled/name state to child radios. 将选中/禁用/name 状态同步到子单选按钮。 */
+        this.syncChildren = () => {
+            const radios = this.getRadios();
+            for (const radio of radios) {
+                const isChecked = radio.value === this.value;
+                radio.checked = isChecked;
+                radio.groupDisabled = this.disabled;
+                radio.name = this.name || radio.name;
+                const input = radio.renderRoot?.querySelector('input[type="radio"]');
+                if (input) {
+                    input.checked = isChecked;
+                }
+            }
+        };
+        /** Handles child radio toggle and updates group value. 处理子单选按钮切换并更新组值。 */
+        this.handleToggle = (event) => {
+            event.stopPropagation();
+            if (!event.detail.checked) {
+                return;
+            }
+            this.value = event.detail.value;
+            this.syncChildren();
+            this.emit('aithe-change', { value: 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-radio-toggle', this.handleToggle);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('aithe-radio-toggle', this.handleToggle);
+    }
+    firstUpdated() {
+        this.syncChildren();
+    }
+    updated(changed) {
+        if (changed.has('value') || changed.has('disabled') || changed.has('name')) {
+            this.syncChildren();
+        }
+    }
+    getRadios() {
+        return Array.from(this.querySelectorAll('aithe-radio')).filter((el) => el instanceof HTMLElement);
+    }
+    render() {
+        return html `
+      <slot @slotchange=${this.syncChildren}></slot>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheRadioGroup.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheRadioGroup.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], AitheRadioGroup.prototype, "name", void 0);
+AitheRadioGroup = __decorate([
+    customElement('aithe-radio-group')
+], AitheRadioGroup);
+export { AitheRadioGroup };

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

@@ -1,12 +1,30 @@
 import { AitheElement } from '../../core/aithe-element';
+/**
+ * Radio button input with label slot.
+ * 单选按钮输入组件，支持标签插槽。
+ *
+ * @slot - Default slot for radio label text. 单选按钮标签文本。
+ * @fires aithe-change - Emitted when checked state changes (standalone). 选中状态变更时触发（独立使用）。
+ * @fires aithe-radio-toggle - Emitted inside radio-group for group coordination. 在单选组内触发以协调状态。
+ * @example
+ * ```html
+ * <aithe-radio value="a" name="choice">Option A</aithe-radio>
+ * ```
+ */
 export declare class AitheRadio extends AitheElement {
+    /** Whether the radio is checked. 是否选中。 */
     checked: boolean;
+    /** Whether the radio is disabled. 是否禁用。 */
     disabled: boolean;
+    /** Value submitted when selected (used in groups). 选中时提交的值（在组中使用）。 */
     value: string;
+    /** Name attribute for form submission. 表单提交的 name 属性。 */
     name: string;
+    /** Disabled state propagated from parent radio-group. 从父级单选组传递的禁用状态。 */
     groupDisabled: boolean;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
-    private handleChange;
+    /** Handles native change event and emits appropriate custom event. 处理原生变更事件并触发自定义事件。 */
+    private readonly handleChange;
     render(): import("lit-html").TemplateResult<1>;
 }
 //# sourceMappingURL=radio.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/components/form/radio.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD,qBACa,UAAW,SAAQ,YAAY;IACE,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjC,KAAK,SAAM;IACX,IAAI,SAAM;IACN,aAAa,UAAS;IAEtD,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAyBpB;IAEF,OAAO,CAAC,YAAY,CAUlB;IAEF,MAAM;CAiBP"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/components/form/radio.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD;;;;;;;;;;;GAWG;AACH,qBACa,UAAW,SAAQ,YAAY;IAC1C,0CAA0C;IACE,OAAO,UAAS;IAC5D,2CAA2C;IACC,QAAQ,UAAS;IAC7D,sEAAsE;IAC1C,KAAK,SAAM;IACvC,yDAAyD;IAC7B,IAAI,SAAM;IACtC,wEAAwE;IACxC,aAAa,UAAS;IAEtD,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAyBpB;IAEF,wFAAwF;IACxF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAY3B;IAEF,MAAM;CAiBP"}