@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/form/FormLabel.svelte

@@ -1,46 +1,155 @@
 <!--
   Form.Label — see specs/components/input/Form.spec.md
-  独立标签组件，与 Field 内标签样式一致，可用于自定义布局。
+  独立标签组件，与 Field 内标签样式一致，可用于自定义布局。对齐 Semi label.tsx。
+  DOM 严格镜像 Semi：<label class="cd-form-field-label ..."> > <div class="cd-form-field-label-text">
+  （text + optional）+ 可选兄弟 <div class="cd-form-field-label-extra">。
+  必填星标由 label-text::after 伪元素呈现（对齐 Semi，非独立 DOM）。
 -->
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { useLocale } from '../locale-provider/index.js';
+
   interface Props {
-    /** 标签文本。 */
-    text?: string;
+    /** 标签文本（不传时回退到 children）。 */
+    text?: string | undefined;
+    /** 文本对齐（默认 'left'）。 */
+    align?: 'left' | 'right';
+    className?: string;
+    /** 禁用态样式。 */
+    disabled?: boolean;
+    /** label 元素 id。 */
+    id?: string;
     /** 是否必填（显示 * 星标）。 */
     required?: boolean;
     /** 是否显示「可选」标记（与 required 互斥，required 优先）。 */
     optional?: boolean;
     /** 标签后补充说明文字。 */
-    extra?: string;
-    /** 关联控件的 id（对应 <label for>）。 */
+    extra?: string | Snippet;
+    /** 关联控件的 id（对应 <label for>，对齐 Semi htmlFor={name}）。 */
     htmlFor?: string;
+    /** 标签宽度（number → px）。 */
+    width?: number | string | undefined;
+    /** 透传到 <label> 的内联样式。 */
+    style?: string;
+    children?: Snippet;
   }
 
-  let { text, required = false, optional = false, extra, htmlFor }: Props = $props();
+  let {
+    text,
+    align = 'left',
+    className,
+    disabled = false,
+    id,
+    required = false,
+    optional = false,
+    extra,
+    htmlFor,
+    width,
+    style,
+    children,
+  }: Props = $props();
+
+  const loc = useLocale();
+
+  const hasExtra = $derived(extra !== undefined);
+  const extraSnippet = $derived(typeof extra === 'function' ? (extra as Snippet) : undefined);
+  const extraText = $derived(typeof extra === 'string' ? extra : undefined);
+
+  // class 扁平命名严格对齐 Semi label.tsx（-left/-right/-required/-disabled/-with-extra）。
+  const cls = $derived(
+    [
+      'cd-form-field-label',
+      align === 'left' && 'cd-form-field-label-left',
+      align === 'right' && 'cd-form-field-label-right',
+      required && 'cd-form-field-label-required',
+      disabled && 'cd-form-field-label-disabled',
+      hasExtra && 'cd-form-field-label-with-extra',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
+
+  const labelStyle = $derived(
+    [
+      width !== undefined
+        ? `width:${typeof width === 'number' ? `${width}px` : width}`
+        : undefined,
+      style,
+    ]
+      .filter(Boolean)
+      .join(';') || undefined,
+  );
 </script>
 
-<label class="cd-form-field__label" for={htmlFor}>
-  {#if required}
-    <span aria-hidden="true" class="cd-form-field__required">*</span>
-  {/if}
-  {#if text !== undefined}
-    <span class="cd-form-field__label-text">{text}</span>
-  {/if}
-  {#if !required && optional}
-    <span class="cd-form-field__label-optional" aria-hidden="true">（可选）</span>
-  {/if}
-  {#if extra !== undefined}
-    <span class="cd-form-field__label-extra">{extra}</span>
+<label class={cls} for={htmlFor} {id} style={labelStyle}>
+  <div class="cd-form-field-label-text">
+    {#if text !== undefined}
+      {text}
+    {:else}
+      {@render children?.()}
+    {/if}
+    {#if !required && optional}
+      <span class="cd-form-field-label-optional-text">{loc().t('Form.optional')}</span>
+    {/if}
+  </div>
+  {#if hasExtra}
+    <div class="cd-form-field-label-extra">
+      {#if extraSnippet}{@render extraSnippet()}{:else}{extraText}{/if}
+    </div>
   {/if}
 </label>
 
 <style>
-  .cd-form-field__label-optional {
-    color: var(--cd-form-optional-color, var(--cd-color-text-3));
-    font-size: var(--cd-font-size-small, 0.75rem);
+  /*
+    label 样式用 :global 声明，保证无论由 FormLabel 独立渲染，还是被 Field / InputGroup / Slot
+    复用渲染，同一套 cd-form-field-label-* 规则都生效（单一样式来源）。严格镜像 Semi form.scss。
+  */
+  :global(.cd-form-field-label) {
+    box-sizing: border-box;
+    font-weight: var(--cd-font-form-label-fontweight);
+    color: var(--cd-color-form-label-text-default);
+    margin-block-end: var(--cd-spacing-form-label-marginbottom);
+    margin-block-start: var(--cd-spacing-form-label-margintop);
+    padding-inline-end: var(--cd-spacing-form-label-paddingright);
+    display: inline-block;
+    vertical-align: middle;
+    font-size: var(--cd-font-size-regular);
+    flex-shrink: 0;
+  }
+  :global(.cd-form-field-label-disabled) {
+    color: var(--cd-color-form-label-disabled-text-default);
+  }
+  :global(.cd-form-field-label-with-extra) {
+    display: flex;
+    align-items: center;
+  }
+  :global(.cd-form-field-label-with-extra .cd-form-field-label-text) {
+    display: inline-block;
+  }
+  :global(.cd-form-field-label-with-extra .cd-form-field-label-extra) {
+    display: flex;
+    align-items: center;
+    margin-inline-start: var(--cd-spacing-form-label-extra-marginleft);
+    color: var(--cd-color-form-label-extra-text-default);
+  }
+  /* 必填星标：label-text::after 伪元素（对齐 Semi，非独立 DOM）。 */
+  :global(.cd-form-field-label-required .cd-form-field-label-text::after) {
+    content: '*';
+    margin-inline-start: var(--cd-spacing-form-label-required-marginleft);
+    color: var(--cd-color-form-requiredmark-text-default);
+    font-weight: var(--cd-font-form-requiredmark-fontweight);
+  }
+  :global(.cd-form-field-label-required.cd-form-field-label-disabled .cd-form-field-label-text::after) {
+    color: var(--cd-color-form-requiredmark-disabled-text-default);
+  }
+  :global(.cd-form-field-label-optional-text) {
+    color: var(--cd-color-form-label-optional-text-default);
+  }
+  :global(.cd-form-field-label-left) {
+    text-align: left;
   }
-  .cd-form-field__label-extra {
-    color: var(--cd-form-extra-color, var(--cd-color-text-3));
-    font-size: var(--cd-font-size-small, 0.75rem);
+  :global(.cd-form-field-label-right) {
+    text-align: right;
   }
 </style>

package/dist/form/FormLabel.svelte.d.ts

@@ -1,14 +1,27 @@
+import type { Snippet } from 'svelte';
 interface Props {
-    /** 标签文本。 */
-    text?: string;
+    /** 标签文本（不传时回退到 children）。 */
+    text?: string | undefined;
+    /** 文本对齐（默认 'left'）。 */
+    align?: 'left' | 'right';
+    className?: string;
+    /** 禁用态样式。 */
+    disabled?: boolean;
+    /** label 元素 id。 */
+    id?: string;
     /** 是否必填（显示 * 星标）。 */
     required?: boolean;
     /** 是否显示「可选」标记（与 required 互斥，required 优先）。 */
     optional?: boolean;
     /** 标签后补充说明文字。 */
-    extra?: string;
-    /** 关联控件的 id（对应 <label for>）。 */
+    extra?: string | Snippet;
+    /** 关联控件的 id（对应 <label for>，对齐 Semi htmlFor={name}）。 */
     htmlFor?: string;
+    /** 标签宽度（number → px）。 */
+    width?: number | string | undefined;
+    /** 透传到 <label> 的内联样式。 */
+    style?: string;
+    children?: Snippet;
 }
 declare const FormLabel: import("svelte").Component<Props, {}, "">;
 type FormLabel = ReturnType<typeof FormLabel>;

package/dist/form/FormLabel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormLabel.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,YAAY;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AA2BH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FormLabel.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormLabel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACpC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6EH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/form/FormPinCode.svelte

@@ -0,0 +1,52 @@
+<!--
+  Form.PinCode — convenience wrapper: <Form.Field> + <PinCode> bound to a field.
+  onChange 首参即值（string 整串），直传。可选透传 onComplete。
+  field-level props 经 FieldPassthroughProps 透传给 Field。
+-->
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import Field from './Field.svelte';
+  import PinCode from '../pincode/PinCode.svelte';
+  import { splitFieldProps, type FieldPassthroughProps } from './field-props.js';
+
+  type PinCodeProps = ComponentProps<typeof PinCode>;
+
+  interface Props extends FieldPassthroughProps {
+    count?: PinCodeProps['count'];
+    format?: PinCodeProps['format'];
+    size?: PinCodeProps['size'];
+    disabled?: boolean;
+    autoFocus?: PinCodeProps['autoFocus'];
+    onComplete?: PinCodeProps['onComplete'];
+  }
+
+  const props: Props = $props();
+  const controlKeys = ['count', 'format', 'size', 'disabled', 'autoFocus', 'onComplete'] as const;
+  const split = $derived(splitFieldProps(props));
+  const fieldProps = $derived(split.fieldProps);
+  const control = $derived(
+    Object.fromEntries(controlKeys.filter((k) => props[k] !== undefined).map((k) => [k, props[k]])),
+  );
+  const labelForAria = $derived(typeof props.label === 'string' ? props.label : props.label?.text);
+</script>
+
+<Field {...fieldProps}>
+  {#snippet children({ value, onChange, status, disabled: fieldDisabled, id, describedBy, errorMessageId, labelledById, required })}
+    <PinCode
+      value={value === undefined ? '' : String(value)}
+      status={status === 'error' ? 'error' : 'default'}
+      disabled={(control.disabled as boolean | undefined) ?? fieldDisabled}
+      {id}
+      {...(control.count !== undefined ? { count: control.count as NonNullable<PinCodeProps['count']> } : {})}
+      {...(control.format !== undefined ? { format: control.format as NonNullable<PinCodeProps['format']> } : {})}
+      {...(control.size !== undefined ? { size: control.size as NonNullable<PinCodeProps['size']> } : {})}
+      {...(control.autoFocus !== undefined ? { autoFocus: control.autoFocus as NonNullable<PinCodeProps['autoFocus']> } : {})}
+      {...(labelledById !== undefined ? { ariaLabelledby: labelledById } : labelForAria !== undefined ? { ariaLabel: labelForAria } : {})}
+      {...(describedBy !== undefined ? { ariaDescribedby: describedBy } : {})}
+      {...(errorMessageId !== undefined ? { ariaErrormessage: errorMessageId } : {})}
+      {...(required ? { ariaRequired: true } : {})}
+      onChange={(v) => onChange(v)}
+      {...(control.onComplete !== undefined ? { onComplete: control.onComplete as NonNullable<PinCodeProps['onComplete']> } : {})}
+    />
+  {/snippet}
+</Field>

package/dist/form/FormPinCode.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps } from 'svelte';
+import PinCode from '../pincode/PinCode.svelte';
+import { type FieldPassthroughProps } from './field-props.js';
+type PinCodeProps = ComponentProps<typeof PinCode>;
+interface Props extends FieldPassthroughProps {
+    count?: PinCodeProps['count'];
+    format?: PinCodeProps['format'];
+    size?: PinCodeProps['size'];
+    disabled?: boolean;
+    autoFocus?: PinCodeProps['autoFocus'];
+    onComplete?: PinCodeProps['onComplete'];
+}
+declare const FormPinCode: import("svelte").Component<Props, {}, "">;
+type FormPinCode = ReturnType<typeof FormPinCode>;
+export default FormPinCode;
+//# sourceMappingURL=FormPinCode.svelte.d.ts.map

package/dist/form/FormPinCode.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormPinCode.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormPinCode.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,OAAO,MAAM,2BAA2B,CAAC;AAChD,OAAO,EAAmB,KAAK,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAG7E,KAAK,YAAY,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC;AAEnD,UAAU,KAAM,SAAQ,qBAAqB;IAC3C,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;CACzC;AA4BH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/form/FormRadio.svelte

@@ -1,81 +1,49 @@
 <!--
   Form.Radio — convenience wrapper: <Form.Field> + <Radio> bound to a field.
-  Uses valuePropName='checked' since Radio is a boolean/selected control.
+  Uses valuePropName='checked' since Radio is a boolean/selected control（valuePropName 属
+  field-level prop，经 FieldPassthroughProps + splitFieldProps 归到 fieldProps）。
 -->
 <script lang="ts">
-  import type { Rule, ValidateTrigger } from '@chenzy-design/core';
   import type { ComponentProps, Snippet } from 'svelte';
   import Field from './Field.svelte';
   import Radio from '../radio/Radio.svelte';
+  import { splitFieldProps, type FieldPassthroughProps } from './field-props.js';
 
   type RadioProps = ComponentProps<typeof Radio>;
 
-  interface Props {
-    field: string;
-    label?: string;
-    rules?: Rule[];
-    initValue?: unknown;
-    required?: boolean;
-    validateStatus?: 'default' | 'warning' | 'error';
-    extraText?: string;
-    span?: number;
-    transform?: (value: unknown, values: Record<string, unknown>) => unknown;
-    dependencies?: string[];
-    trigger?: ValidateTrigger | ValidateTrigger[];
-    // Radio-specific props
+  interface Props extends FieldPassthroughProps {
     /** Radio 自身的业务值（用于 RadioGroup；作为独立 Field 时通常不需要）。 */
     value?: RadioProps['value'];
     disabled?: boolean;
-    size?: RadioProps['size'];
     type?: RadioProps['type'];
     children?: Snippet;
   }
 
-  let {
-    field,
-    label,
-    rules = [],
-    initValue,
-    required = false,
-    validateStatus,
-    extraText,
-    span,
-    transform,
-    dependencies,
-    trigger,
-    value: radioValue = '' as RadioProps['value'],
-    disabled,
-    size,
-    type,
-    children: slotChildren,
-  }: Props = $props();
-
-  const fieldProps = $derived<ComponentProps<typeof Field>>({
-    field,
-    rules,
-    required,
-    valuePropName: 'checked',
-    ...(label !== undefined ? { label } : {}),
-    ...(initValue !== undefined ? { initValue } : {}),
-    ...(validateStatus !== undefined ? { validateStatus } : {}),
-    ...(extraText !== undefined ? { extraText } : {}),
-    ...(span !== undefined ? { span } : {}),
-    ...(transform !== undefined ? { transform } : {}),
-    ...(dependencies !== undefined ? { dependencies } : {}),
-    ...(trigger !== undefined ? { trigger } : {}),
-  });
+  const props: Props = $props();
+  const controlKeys = ['value', 'disabled', 'type', 'children'] as const;
+  const split = $derived(splitFieldProps(props));
+  // Radio 是布尔/选中控件，valuePropName 固定 'checked'（未显式传时补默认）。
+  const fieldProps = $derived<FieldPassthroughProps>({ valuePropName: 'checked', ...split.fieldProps });
+  const control = $derived(
+    Object.fromEntries(controlKeys.filter((k) => props[k] !== undefined).map((k) => [k, props[k]])),
+  );
+  const radioValue = $derived((control.value ?? '') as NonNullable<RadioProps['value']>);
+  const slotChildren = $derived(props.children);
+  // 独立 Form.Radio（非 Group 内）的无障碍名：label 文本优先，回退 field 名。
+  const labelForAria = $derived(
+    (typeof props.label === 'string' ? props.label : props.label?.text) ?? props.field,
+  );
 </script>
 
 <Field {...fieldProps}>
-  {#snippet children({ value, onChange, status, disabled: fieldDisabled })}
+  {#snippet children({ value, onChange, disabled: fieldDisabled })}
     <Radio
       value={radioValue}
       {...(typeof value === 'boolean' ? { checked: value } : {})}
-      disabled={disabled ?? fieldDisabled}
-      {...(size !== undefined ? { size } : {})}
-      {...(type !== undefined ? { type } : {})}
-      status={status === 'error' ? 'error' : 'default'}
-      onChange={(checked) => onChange(checked)}
+      disabled={(control.disabled as boolean | undefined) ?? fieldDisabled}
+      {...(control.type !== undefined ? { type: control.type as NonNullable<RadioProps['type']> } : {})}
+      {...(labelForAria !== undefined ? { ariaLabel: labelForAria } : {})}
+      onChange={(e) => onChange(e.target.checked)}
     >
       {@render slotChildren?.()}
     </Radio>

package/dist/form/FormRadio.svelte.d.ts

@@ -1,23 +1,11 @@
-import type { Rule, ValidateTrigger } from '@chenzy-design/core';
 import type { ComponentProps, Snippet } from 'svelte';
 import Radio from '../radio/Radio.svelte';
+import { type FieldPassthroughProps } from './field-props.js';
 type RadioProps = ComponentProps<typeof Radio>;
-interface Props {
-    field: string;
-    label?: string;
-    rules?: Rule[];
-    initValue?: unknown;
-    required?: boolean;
-    validateStatus?: 'default' | 'warning' | 'error';
-    extraText?: string;
-    span?: number;
-    transform?: (value: unknown, values: Record<string, unknown>) => unknown;
-    dependencies?: string[];
-    trigger?: ValidateTrigger | ValidateTrigger[];
+interface Props extends FieldPassthroughProps {
     /** Radio 自身的业务值（用于 RadioGroup；作为独立 Field 时通常不需要）。 */
     value?: RadioProps['value'];
     disabled?: boolean;
-    size?: RadioProps['size'];
     type?: RadioProps['type'];
     children?: Snippet;
 }

package/dist/form/FormRadio.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormRadio.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormRadio.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtD,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAGxC,KAAK,UAAU,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC;AAE/C,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC;IACzE,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;IAE9C,qDAAqD;IACrD,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuDH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FormRadio.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormRadio.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtD,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAC1C,OAAO,EAAmB,KAAK,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAG7E,KAAK,UAAU,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC;AAE/C,UAAU,KAAM,SAAQ,qBAAqB;IAC3C,qDAAqD;IACrD,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoCH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/form/FormRadioGroup.svelte

@@ -0,0 +1,54 @@
+<!--
+  Form.RadioGroup — convenience wrapper: <Form.Field> + <RadioGroup> bound to a field.
+  值是选中项 value；RadioGroup onChange 收 RadioChangeEvent，取 e.target.value（非裸值！）。
+  对齐 Semi valuePath='target.value'。field-level props 经 FieldPassthroughProps 透传给 Field。
+-->
+<script lang="ts">
+  import type { ComponentProps, Snippet } from 'svelte';
+  import Field from './Field.svelte';
+  import RadioGroup from '../radio/RadioGroup.svelte';
+  import { splitFieldProps, type FieldPassthroughProps } from './field-props.js';
+
+  type RadioGroupProps = ComponentProps<typeof RadioGroup>;
+
+  interface Props extends FieldPassthroughProps {
+    options?: RadioGroupProps['options'];
+    disabled?: boolean;
+    type?: RadioGroupProps['type'];
+    buttonSize?: RadioGroupProps['buttonSize'];
+    direction?: RadioGroupProps['direction'];
+    children?: Snippet;
+  }
+
+  const props: Props = $props();
+  const controlKeys = ['options', 'disabled', 'type', 'buttonSize', 'direction', 'children'] as const;
+  const split = $derived(splitFieldProps(props));
+  const fieldProps = $derived(split.fieldProps);
+  const control = $derived(
+    Object.fromEntries(controlKeys.filter((k) => props[k] !== undefined).map((k) => [k, props[k]])),
+  );
+  const labelForAria = $derived(typeof props.label === 'string' ? props.label : props.label?.text);
+  const slotChildren = $derived(props.children);
+</script>
+
+<Field {...fieldProps}>
+  {#snippet children({ value, onChange, status, disabled: fieldDisabled, id, describedBy, errorMessageId, labelledById, required })}
+    <RadioGroup
+      {...(value !== undefined ? { value: value as NonNullable<RadioGroupProps['value']> } : {})}
+      {...(control.options !== undefined ? { options: control.options as NonNullable<RadioGroupProps['options']> } : {})}
+      disabled={(control.disabled as boolean | undefined) ?? fieldDisabled}
+      {...(control.type !== undefined ? { type: control.type as NonNullable<RadioGroupProps['type']> } : {})}
+      {...(control.buttonSize !== undefined ? { buttonSize: control.buttonSize as NonNullable<RadioGroupProps['buttonSize']> } : {})}
+      {...(control.direction !== undefined ? { direction: control.direction as NonNullable<RadioGroupProps['direction']> } : {})}
+      {id}
+      {...(labelledById !== undefined ? { ariaLabelledby: labelledById } : labelForAria !== undefined ? { ariaLabel: labelForAria } : {})}
+      {...(describedBy !== undefined ? { ariaDescribedby: describedBy } : {})}
+      {...(errorMessageId !== undefined ? { ariaErrormessage: errorMessageId } : {})}
+      {...(required ? { ariaRequired: true } : {})}
+      {...(status === 'error' ? { ariaInvalid: true } : {})}
+      onChange={(e) => onChange(e.target.value)}
+    >
+      {@render slotChildren?.()}
+    </RadioGroup>
+  {/snippet}
+</Field>

package/dist/form/FormRadioGroup.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps, Snippet } from 'svelte';
+import RadioGroup from '../radio/RadioGroup.svelte';
+import { type FieldPassthroughProps } from './field-props.js';
+type RadioGroupProps = ComponentProps<typeof RadioGroup>;
+interface Props extends FieldPassthroughProps {
+    options?: RadioGroupProps['options'];
+    disabled?: boolean;
+    type?: RadioGroupProps['type'];
+    buttonSize?: RadioGroupProps['buttonSize'];
+    direction?: RadioGroupProps['direction'];
+    children?: Snippet;
+}
+declare const FormRadioGroup: import("svelte").Component<Props, {}, "">;
+type FormRadioGroup = ReturnType<typeof FormRadioGroup>;
+export default FormRadioGroup;
+//# sourceMappingURL=FormRadioGroup.svelte.d.ts.map

package/dist/form/FormRadioGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormRadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormRadioGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtD,OAAO,UAAU,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAmB,KAAK,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAG7E,KAAK,eAAe,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzD,UAAU,KAAM,SAAQ,qBAAqB;IAC3C,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA+BH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/form/FormRating.svelte

@@ -1,84 +1,50 @@
 <!--
   Form.Rating — convenience wrapper: <Form.Field> + <Rating> bound to a field.
+  field-level props 经 FieldPassthroughProps 透传给 Field；控件专属给 Rating。
 -->
 <script lang="ts">
-  import type { Rule, ValidateTrigger } from '@chenzy-design/core';
   import type { ComponentProps } from 'svelte';
   import Field from './Field.svelte';
   import Rating from '../rating/Rating.svelte';
+  import { splitFieldProps, type FieldPassthroughProps } from './field-props.js';
 
   type RatingProps = ComponentProps<typeof Rating>;
 
-  interface Props {
-    field: string;
-    label?: string;
-    rules?: Rule[];
-    initValue?: unknown;
-    required?: boolean;
-    validateStatus?: 'default' | 'warning' | 'error';
-    extraText?: string;
-    span?: number;
-    transform?: (value: unknown, values: Record<string, unknown>) => unknown;
-    dependencies?: string[];
-    trigger?: ValidateTrigger | ValidateTrigger[];
-    // Rating-specific props
+  interface Props extends FieldPassthroughProps {
+    // Rating-specific props（对齐 Semi Rating：无 readonly/status，只读用 disabled）
     count?: RatingProps['count'];
     allowHalf?: RatingProps['allowHalf'];
     allowClear?: RatingProps['allowClear'];
     disabled?: boolean;
-    readonly?: RatingProps['readonly'];
     size?: RatingProps['size'];
     tooltips?: RatingProps['tooltips'];
   }
 
-  let {
-    field,
-    label,
-    rules = [],
-    initValue,
-    required = false,
-    validateStatus,
-    extraText,
-    span,
-    transform,
-    dependencies,
-    trigger,
-    count,
-    allowHalf,
-    allowClear,
-    disabled,
-    readonly,
-    size,
-    tooltips,
-  }: Props = $props();
-
-  const fieldProps = $derived<ComponentProps<typeof Field>>({
-    field,
-    rules,
-    required,
-    ...(label !== undefined ? { label } : {}),
-    ...(initValue !== undefined ? { initValue } : {}),
-    ...(validateStatus !== undefined ? { validateStatus } : {}),
-    ...(extraText !== undefined ? { extraText } : {}),
-    ...(span !== undefined ? { span } : {}),
-    ...(transform !== undefined ? { transform } : {}),
-    ...(dependencies !== undefined ? { dependencies } : {}),
-    ...(trigger !== undefined ? { trigger } : {}),
-  });
+  const props: Props = $props();
+  const controlKeys = ['count', 'allowHalf', 'allowClear', 'disabled', 'size', 'tooltips'] as const;
+  const split = $derived(splitFieldProps(props));
+  const fieldProps = $derived(split.fieldProps);
+  const control = $derived(
+    Object.fromEntries(controlKeys.filter((k) => props[k] !== undefined).map((k) => [k, props[k]])),
+  );
+  const labelForAria = $derived(typeof props.label === 'string' ? props.label : props.label?.text);
 </script>
 
 <Field {...fieldProps}>
-  {#snippet children({ value, onChange, status, disabled: fieldDisabled })}
+  {#snippet children({ value, onChange, status, disabled: fieldDisabled, describedBy, errorMessageId, labelledById, required })}
     <Rating
       {...(typeof value === 'number' ? { value } : {})}
-      {...(count !== undefined ? { count } : {})}
-      {...(allowHalf !== undefined ? { allowHalf } : {})}
-      {...(allowClear !== undefined ? { allowClear } : {})}
-      disabled={disabled ?? fieldDisabled}
-      {...(readonly !== undefined ? { readonly } : {})}
-      {...(size !== undefined ? { size } : {})}
-      {...(tooltips !== undefined ? { tooltips } : {})}
-      status={status === 'error' ? 'error' : 'default'}
+      {...(control.count !== undefined ? { count: control.count as NonNullable<RatingProps['count']> } : {})}
+      {...(control.allowHalf !== undefined ? { allowHalf: control.allowHalf as NonNullable<RatingProps['allowHalf']> } : {})}
+      {...(control.allowClear !== undefined ? { allowClear: control.allowClear as NonNullable<RatingProps['allowClear']> } : {})}
+      disabled={(control.disabled as boolean | undefined) ?? fieldDisabled}
+      {...(control.size !== undefined ? { size: control.size as NonNullable<RatingProps['size']> } : {})}
+      {...(control.tooltips !== undefined ? { tooltips: control.tooltips as NonNullable<RatingProps['tooltips']> } : {})}
+      {...(labelledById !== undefined ? { 'aria-labelledby': labelledById } : labelForAria !== undefined ? { 'aria-label': labelForAria } : {})}
+      {...(describedBy !== undefined ? { 'aria-describedby': describedBy } : {})}
+      {...(errorMessageId !== undefined ? { 'aria-errormessage': errorMessageId } : {})}
+      {...(required ? { 'aria-required': true } : {})}
+      {...(status === 'error' ? { 'aria-invalid': true } : {})}
       onChange={(v) => onChange(v)}
     />
   {/snippet}

package/dist/form/FormRating.svelte.d.ts

@@ -1,24 +1,12 @@
-import type { Rule, ValidateTrigger } from '@chenzy-design/core';
 import type { ComponentProps } from 'svelte';
 import Rating from '../rating/Rating.svelte';
+import { type FieldPassthroughProps } from './field-props.js';
 type RatingProps = ComponentProps<typeof Rating>;
-interface Props {
-    field: string;
-    label?: string;
-    rules?: Rule[];
-    initValue?: unknown;
-    required?: boolean;
-    validateStatus?: 'default' | 'warning' | 'error';
-    extraText?: string;
-    span?: number;
-    transform?: (value: unknown, values: Record<string, unknown>) => unknown;
-    dependencies?: string[];
-    trigger?: ValidateTrigger | ValidateTrigger[];
+interface Props extends FieldPassthroughProps {
     count?: RatingProps['count'];
     allowHalf?: RatingProps['allowHalf'];
     allowClear?: RatingProps['allowClear'];
     disabled?: boolean;
-    readonly?: RatingProps['readonly'];
     size?: RatingProps['size'];
     tooltips?: RatingProps['tooltips'];
 }