@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/form/FormErrorMessage.svelte

@@ -1,44 +1,90 @@
 <!--
   Form.ErrorMessage — see specs/components/input/Form.spec.md
-  独立错误文字展示：带错误图标的错误文字，可独立放置于任意位置。
+  独立错误/提示文字展示：带状态图标的错误文字，可独立放置于任意位置。对齐 Semi errorMessage.tsx。
+  DOM：<div class="cd-form-field-error-message | cd-form-field-help-text">
+       [<icon class="cd-form-field-validate-status-icon"/>] <span id>text</span>
+  warning 与 error 共用 error-message 容器（图标靠 validateStatus 区分）。样式集中在 Field.svelte :global。
 -->
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { IconAlertCircle, IconAlertTriangle } from '@chenzy-design/icons';
+
   interface Props {
-    /** 错误文本（字符串或字符串数组）。 */
-    error?: string | string[];
+    /** 错误文本（字符串、字符串数组或自定义 Snippet 节点）。数组以 ', ' 连接（对齐 Semi）。 */
+    error?: string | string[] | Snippet;
     className?: string;
-    /** 是否显示错误图标（默认 true）。 */
-    showIcon?: boolean;
+    /** 透传到容器的内联样式。 */
+    style?: string;
+    /** 是否显示状态图标（默认 true，对齐 Semi showValidateIcon）。 */
+    showValidateIcon?: boolean;
+    /** 校验状态，决定状态图标（warning=IconAlertTriangle, error=IconAlertCircle）。 */
+    validateStatus?: 'error' | 'warning';
+    /** 提示文案：无 error 时展示（与 error 同块，error 优先）。 */
+    helpText?: string;
+    /** InputGroup 内：图标恒为 IconAlertCircle（对齐 Semi）。 */
+    isInInputGroup?: boolean;
+    /** error 文本的元素 id（a11y 关联）。 */
+    errorMessageId?: string;
+    /** helpText 文本的元素 id（a11y 关联）。 */
+    helpTextId?: string;
   }
 
-  let { error, className, showIcon = true }: Props = $props();
+  let {
+    error,
+    className,
+    style,
+    showValidateIcon = true,
+    validateStatus = 'error',
+    helpText,
+    isInInputGroup = false,
+    errorMessageId,
+    helpTextId,
+  }: Props = $props();
+
+  // error 为 Snippet 时走自定义渲染分支
+  const isSnippet = $derived(typeof error === 'function');
 
-  const messages = $derived(
-    error === undefined
-      ? []
+  // 归一化为可渲染文本：数组 join(', ')、字符串原样（对齐 Semi generatorText）。
+  const errorText = $derived(
+    error === undefined || isSnippet
+      ? undefined
       : Array.isArray(error)
-        ? error
-        : [error],
+        ? error.filter(Boolean).join(', ')
+        : error,
+  );
+
+  const hasError = $derived(isSnippet || (errorText !== undefined && errorText !== ''));
+  // 无 error 时展示 helpText。
+  const showHelp = $derived(!hasError && helpText !== undefined && helpText !== '');
+  const textId = $derived(hasError ? errorMessageId : helpTextId);
+  // InputGroup 内图标恒为 error 图标；否则按 validateStatus 决定。
+  const iconIsWarning = $derived(!isInInputGroup && validateStatus === 'warning');
+
+  const cls = $derived(
+    [
+      hasError ? 'cd-form-field-error-message' : 'cd-form-field-help-text',
+      // warning 态容器补修饰类，图标着警告色（对齐 Semi .semi-icon-alert_triangle 着色）。
+      hasError && iconIsWarning && 'cd-form-field-error-message-warning',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' '),
   );
 </script>
 
-{#each messages as msg (msg)}
-  <div class={['cd-form-field__error', className].filter(Boolean).join(' ')} role="alert">
-    {#if showIcon}
-      <svg
-        class="cd-form-field__status-icon"
-        viewBox="0 0 16 16"
-        width="14"
-        height="14"
-        aria-hidden="true"
-        focusable="false"
-      >
-        <path
-          fill="currentColor"
-          d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm-.75 3.5h1.5v5h-1.5v-5ZM8 12.25a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
-        />
-      </svg>
+{#if hasError || showHelp}
+  <div class={cls} role={hasError ? 'alert' : undefined} {style}>
+    {#if showValidateIcon && hasError}
+      {#if iconIsWarning}
+        <IconAlertTriangle class="cd-form-field-validate-status-icon" size="small" aria-hidden="true" />
+      {:else}
+        <IconAlertCircle class="cd-form-field-validate-status-icon" size="small" aria-hidden="true" />
+      {/if}
+    {/if}
+    {#if isSnippet}
+      {@render (error as Snippet)()}
+    {:else}
+      <span id={textId}>{hasError ? errorText : helpText}</span>
     {/if}
-    <span>{msg}</span>
   </div>
-{/each}
+{/if}

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

@@ -1,9 +1,22 @@
+import type { Snippet } from 'svelte';
 interface Props {
-    /** 错误文本（字符串或字符串数组）。 */
-    error?: string | string[];
+    /** 错误文本（字符串、字符串数组或自定义 Snippet 节点）。数组以 ', ' 连接（对齐 Semi）。 */
+    error?: string | string[] | Snippet;
     className?: string;
-    /** 是否显示错误图标（默认 true）。 */
-    showIcon?: boolean;
+    /** 透传到容器的内联样式。 */
+    style?: string;
+    /** 是否显示状态图标（默认 true，对齐 Semi showValidateIcon）。 */
+    showValidateIcon?: boolean;
+    /** 校验状态，决定状态图标（warning=IconAlertTriangle, error=IconAlertCircle）。 */
+    validateStatus?: 'error' | 'warning';
+    /** 提示文案：无 error 时展示（与 error 同块，error 优先）。 */
+    helpText?: string;
+    /** InputGroup 内：图标恒为 IconAlertCircle（对齐 Semi）。 */
+    isInInputGroup?: boolean;
+    /** error 文本的元素 id（a11y 关联）。 */
+    errorMessageId?: string;
+    /** helpText 文本的元素 id（a11y 关联）。 */
+    helpTextId?: string;
 }
 declare const FormErrorMessage: import("svelte").Component<Props, {}, "">;
 type FormErrorMessage = ReturnType<typeof FormErrorMessage>;

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

@@ -1 +1 @@
-{"version":3,"file":"FormErrorMessage.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormErrorMessage.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6BH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"FormErrorMessage.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormErrorMessage.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,+BAA+B;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAqEH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/form/FormInput.svelte

@@ -1,92 +1,53 @@
 <!--
-  FormInput — see specs/components/input/Form.spec.md
-  Convenience wrapper: <Form.Field> + <Input> bound to a field.
+  FormInput — Convenience wrapper: <Form.Field> + <Input> bound to a field.
+  对齐 Semi withField：field-level props（label/labelPosition/noLabel/helpText/rules/...）
+  经 FieldPassthroughProps 透传给 Field，控件专属 props（placeholder/type/...）给 Input。
 -->
 <script lang="ts">
-  import type { Rule, ValidateTrigger } from '@chenzy-design/core';
-  import type { ComponentProps } from 'svelte';
   import Field from './Field.svelte';
   import Input from '../input/Input.svelte';
+  import { splitFieldProps, type FieldPassthroughProps } from './field-props.js';
 
-  interface Props {
-    field: string;
-    label?: string;
-    rules?: Rule[];
-    /** field-level initial value (spec §4.2 L79). */
-    initValue?: unknown;
-    required?: boolean;
-    /** externally forced validate status — controlled display (spec §4.2 L81). */
-    validateStatus?: 'default' | 'warning' | 'error';
-    extraText?: string;
-    /** column span inside a grid parent / Form.Section (spec §4.2 L86). */
-    span?: number;
-    /** pure value transform at collect/submit time (spec §4.2 L88). */
-    transform?: (value: unknown, values: Record<string, unknown>) => unknown;
+  interface Props extends FieldPassthroughProps {
     placeholder?: string;
     type?: 'text' | 'password';
-    clearable?: boolean;
+    showClear?: boolean;
     maxLength?: number;
-    dependencies?: string[];
-    /** field-level override of the form's validateTrigger (spec §4 L84). */
-    trigger?: ValidateTrigger | ValidateTrigger[];
+    /** 最小长度（对齐 Semi minLength），下发原生 minlength 触发校验。 */
+    minLength?: number;
+    /** 自定义字符计数（对齐 Semi getValueLength），配合 max/minLength 按可见长度校验。 */
+    getValueLength?: (value: string) => number;
   }
 
-  let {
-    field,
-    label,
-    rules = [],
-    initValue,
-    required = false,
-    validateStatus,
-    extraText,
-    span,
-    transform,
-    placeholder,
-    type = 'text',
-    clearable = false,
-    maxLength,
-    dependencies,
-    trigger,
-  }: Props = $props();
-
-  // Build props with conditional keys so we never pass an explicit `undefined`
-  // to an optional prop (exactOptionalPropertyTypes).
-  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();
+  // 控件专属 props(非 field-level)在这里显式取，其余经 splitFieldProps 分离。
+  const controlKeys = ['placeholder', 'type', 'showClear', 'maxLength', 'minLength', 'getValueLength'] 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, onBlur, status, disabled, id, describedBy, required })}
-    <!--
-      `id` is wired to the native <input> so Field's visible <label for={id}>
-      precisely targets the control (WAI-ARIA preferred association): clicking the
-      label focuses the input and screen readers pair them by name. `ariaLabel`
-      remains as a redundant accessible name (and the only one when no `label`).
-      `describedBy` links the error/warning/extra text to the control.
-      blur-time validation is still deferred until Input gains an `onBlur` hook.
-    -->
+  {#snippet children({ value, onChange, onBlur, status, disabled, id, describedBy, errorMessageId, labelledById, required, insetLabel, insetLabelId })}
     <Input
       value={value === undefined ? '' : String(value)}
-      status={status === 'error' ? 'error' : 'default'}
+      validateStatus={status === 'error' ? 'error' : 'default'}
       {disabled}
       {id}
-      {type}
-      {clearable}
-      {...(placeholder !== undefined ? { placeholder } : {})}
-      {...(maxLength !== undefined ? { maxLength } : {})}
-      {...(label !== undefined ? { ariaLabel: label } : {})}
+      {...(control.type === 'password' ? { mode: 'password' as const } : {})}
+      showClear={Boolean(control.showClear)}
+      {...(control.placeholder !== undefined ? { placeholder: control.placeholder as string } : {})}
+      {...(control.maxLength !== undefined ? { maxLength: control.maxLength as number } : {})}
+      {...(control.minLength !== undefined ? { minLength: control.minLength as number } : {})}
+      {...(control.getValueLength !== undefined ? { getValueLength: control.getValueLength as (value: string) => number } : {})}
+      {...(insetLabel !== undefined ? { insetLabel } : {})}
+      {...(insetLabelId !== undefined ? { insetLabelId } : {})}
+      {...(labelledById !== undefined ? { ariaLabelledby: labelledById } : labelForAria !== undefined ? { ariaLabel: labelForAria } : {})}
       {...(describedBy !== undefined ? { ariaDescribedby: describedBy } : {})}
+      {...(errorMessageId !== undefined ? { ariaErrormessage: errorMessageId } : {})}
       {...(required ? { ariaRequired: true } : {})}
       onChange={(v) => onChange(v)}
       onBlur={() => onBlur()}

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

@@ -1,25 +1,13 @@
-import type { Rule, ValidateTrigger } from '@chenzy-design/core';
-interface Props {
-    field: string;
-    label?: string;
-    rules?: Rule[];
-    /** field-level initial value (spec §4.2 L79). */
-    initValue?: unknown;
-    required?: boolean;
-    /** externally forced validate status — controlled display (spec §4.2 L81). */
-    validateStatus?: 'default' | 'warning' | 'error';
-    extraText?: string;
-    /** column span inside a grid parent / Form.Section (spec §4.2 L86). */
-    span?: number;
-    /** pure value transform at collect/submit time (spec §4.2 L88). */
-    transform?: (value: unknown, values: Record<string, unknown>) => unknown;
+import { type FieldPassthroughProps } from './field-props.js';
+interface Props extends FieldPassthroughProps {
     placeholder?: string;
     type?: 'text' | 'password';
-    clearable?: boolean;
+    showClear?: boolean;
     maxLength?: number;
-    dependencies?: string[];
-    /** field-level override of the form's validateTrigger (spec §4 L84). */
-    trigger?: ValidateTrigger | ValidateTrigger[];
+    /** 最小长度（对齐 Semi minLength），下发原生 minlength 触发校验。 */
+    minLength?: number;
+    /** 自定义字符计数（对齐 Semi getValueLength），配合 max/minLength 按可见长度校验。 */
+    getValueLength?: (value: string) => number;
 }
 declare const FormInput: import("svelte").Component<Props, {}, "">;
 type FormInput = ReturnType<typeof FormInput>;

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

@@ -1 +1 @@
-{"version":3,"file":"FormInput.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormInput.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAM/D,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,iDAAiD;IACjD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,wEAAwE;IACxE,OAAO,CAAC,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;CAC/C;AAqDH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FormInput.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormInput.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAmB,KAAK,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAG7E,UAAU,KAAM,SAAQ,qBAAqB;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC5C;AA2BH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/form/FormInputGroup.svelte

@@ -0,0 +1,146 @@
+<!--
+  Form.InputGroup — 对齐 Semi form/group.tsx。
+  容器：把内部多个 <Form.Field> 的 Label / ErrorMessage 上提到 group 级统一渲染，
+  内部字段经 context 自动进入 isInInputGroup 模式（不各自插 Label/Error）。GroupError
+  聚合组内所有字段的错误。视觉上用 InputGroup 把控件无缝拼接为一组。
+  支持 label / labelPosition / extraText / extraTextPosition（对齐 Semi InputGroupProps）。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { SvelteSet } from 'svelte/reactivity';
+  import { getFormContext } from './context.js';
+  import { setFormInputGroupContext } from './input-group-context.js';
+  import FormLabel from './FormLabel.svelte';
+  import FormErrorMessage from './FormErrorMessage.svelte';
+  import InputGroup from '../input/InputGroup.svelte';
+
+  /** 组标签（对齐 Semi LabelProps 子集）。 */
+  interface GroupLabelProps {
+    text?: string;
+    align?: 'left' | 'right';
+    width?: number | string;
+    required?: boolean;
+    extra?: string;
+    optional?: boolean;
+  }
+
+  interface Props {
+    /** 组级标签：字符串或对象形态（对齐 Semi label: LabelProps）。 */
+    label?: string | GroupLabelProps;
+    /** 组标签位置：'top' | 'left'（不传继承 Form context）。 */
+    labelPosition?: 'top' | 'left';
+    /** 额外说明文本（对齐 Semi extraText）。 */
+    extraText?: string;
+    /** 额外说明位置：'bottom'（控件下方，默认）| 'middle'（label 与控件之间）。 */
+    extraTextPosition?: 'bottom' | 'middle';
+    /** 整组尺寸，透传给 InputGroup（回退给组内控件）。 */
+    size?: 'small' | 'default' | 'large';
+    /** 根节点自定义类名。 */
+    class?: string;
+    /** 根节点自定义内联样式。 */
+    style?: string;
+    /** 组内字段（<Form.Field> / Form.Input 等）。 */
+    children?: Snippet;
+  }
+
+  let {
+    label,
+    labelPosition: labelPositionProp,
+    extraText,
+    extraTextPosition = 'bottom',
+    size,
+    class: className,
+    style,
+    children,
+  }: Props = $props();
+
+  const ctx = getFormContext();
+  if (!ctx) throw new Error('<Form.InputGroup> must be used inside <Form>');
+  const { getFormState } = ctx;
+
+  // label 归一化（字符串 / 对象）。
+  const labelObj = $derived(
+    typeof label === 'object' && label !== null ? label : undefined,
+  );
+  const labelText = $derived(typeof label === 'string' ? label : labelObj?.text);
+  const hasLabel = $derived(labelText !== undefined && labelText !== '');
+
+  // group label 位置：prop 优先，否则继承 Form；只支持 top/left（inset 回退 top）。
+  const formLabelPos = $derived(ctx.getLabelPosition());
+  const labelPosition = $derived(
+    labelPositionProp ?? (formLabelPos === 'left' ? 'left' : 'top'),
+  );
+  const labelWidth = $derived(labelObj?.width ?? ctx.getLabelWidth());
+  const labelAlign = $derived(labelObj?.align ?? ctx.getLabelAlign());
+  const showValidateIcon = $derived(ctx.getShowValidateIcon());
+  const disabled = $derived(ctx.getDisabled());
+
+  // 收集组内字段名（Field 经 context 注册）；SvelteSet 保证 add/delete 触发响应式
+  // （MEMORY: 普通 Set mutation 非响应式）。
+  const fieldSet = new SvelteSet<string>();
+  setFormInputGroupContext({
+    register(field: string) {
+      fieldSet.add(field);
+      return () => fieldSet.delete(field);
+    },
+  });
+
+  // GroupError：聚合组内所有字段的错误（对齐 Semi GroupError = fieldSet.map(get errors)）。
+  const groupErrors = $derived(
+    [...fieldSet]
+      .map((f) => getFormState().errors[f])
+      .filter((e): e is string => typeof e === 'string' && e !== ''),
+  );
+
+  // x-label-pos 镜像 Semi group 供样式与 DOM 定位；经 attrs 对象展开，让 svelte-check 接受非标准属性名。
+  const rootAttrs = $derived({ 'x-label-pos': labelPosition });
+  // size 仅在显式传入时透传（exactOptionalPropertyTypes：不能传 undefined 给必填 union）。
+  const groupSize = $derived(size !== undefined ? { size } : {});
+  // label 的 extra/width 仅在显式存在时透传（同 exactOptionalPropertyTypes 约束）。
+  const labelExtra = $derived(labelObj?.extra !== undefined ? { extra: labelObj.extra } : {});
+  const labelWidthAttr = $derived(labelWidth !== undefined ? { width: labelWidth } : {});
+</script>
+
+<!--
+  DOM 对齐 Semi group.tsx：<div class="cd-form-field-group" x-label-pos><Label/>
+  <div>{extra middle}<InputGroup>{fields}</InputGroup>{extra bottom}<GroupError/></div></div>。
+-->
+<div class={['cd-form-field-group', className].filter(Boolean).join(' ')} {...rootAttrs} {style}>
+  {#if hasLabel}
+    <FormLabel
+      text={labelText}
+      align={labelAlign}
+      {...labelWidthAttr}
+      required={labelObj?.required ?? false}
+      optional={labelObj?.optional ?? false}
+      {...labelExtra}
+    />
+  {/if}
+  <div class="cd-form-field-group-body">
+    {#if extraText && extraTextPosition === 'middle'}
+      <div class="cd-form-field-extra cd-form-field-extra-string cd-form-field-extra-middle">{extraText}</div>
+    {/if}
+    <InputGroup {...groupSize} {disabled}>
+      {@render children?.()}
+    </InputGroup>
+    {#if extraText && extraTextPosition === 'bottom'}
+      <div class="cd-form-field-extra cd-form-field-extra-string cd-form-field-extra-bottom">{extraText}</div>
+    {/if}
+    <FormErrorMessage error={groupErrors} {showValidateIcon} isInInputGroup />
+  </div>
+</div>
+
+<style>
+  /* group：top 时 label 块级在上、body 在下；left 时 label 与 body 横排（对齐 Semi group scss）。 */
+  .cd-form-field-group[x-label-pos='top'] {
+    display: block;
+  }
+  .cd-form-field-group[x-label-pos='left'] {
+    display: flex;
+    align-items: flex-start;
+  }
+  .cd-form-field-group[x-label-pos='left'] .cd-form-field-group-body {
+    flex: 1;
+    min-inline-size: 0;
+  }
+</style>

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

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+/** 组标签（对齐 Semi LabelProps 子集）。 */
+interface GroupLabelProps {
+    text?: string;
+    align?: 'left' | 'right';
+    width?: number | string;
+    required?: boolean;
+    extra?: string;
+    optional?: boolean;
+}
+interface Props {
+    /** 组级标签：字符串或对象形态（对齐 Semi label: LabelProps）。 */
+    label?: string | GroupLabelProps;
+    /** 组标签位置：'top' | 'left'（不传继承 Form context）。 */
+    labelPosition?: 'top' | 'left';
+    /** 额外说明文本（对齐 Semi extraText）。 */
+    extraText?: string;
+    /** 额外说明位置：'bottom'（控件下方，默认）| 'middle'（label 与控件之间）。 */
+    extraTextPosition?: 'bottom' | 'middle';
+    /** 整组尺寸，透传给 InputGroup（回退给组内控件）。 */
+    size?: 'small' | 'default' | 'large';
+    /** 根节点自定义类名。 */
+    class?: string;
+    /** 根节点自定义内联样式。 */
+    style?: string;
+    /** 组内字段（<Form.Field> / Form.Input 等）。 */
+    children?: Snippet;
+}
+declare const FormInputGroup: import("svelte").Component<Props, {}, "">;
+type FormInputGroup = ReturnType<typeof FormInputGroup>;
+export default FormInputGroup;
+//# sourceMappingURL=FormInputGroup.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormInputGroup.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormInputGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AASpC,kCAAkC;AAClC,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,KAAK;IACb,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC;IACjC,+CAA+C;IAC/C,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC/B,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACxC,oCAAoC;IACpC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACrC,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8FH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/form/FormInputNumber.svelte

@@ -0,0 +1,74 @@
+<!--
+  Form.InputNumber — convenience wrapper: <Form.Field> + <InputNumber> bound to a field.
+  field-level props 经 FieldPassthroughProps 透传给 Field；控件专属给 InputNumber。
+  onChange 首参即值（number | string | null），直传。
+-->
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import Field from './Field.svelte';
+  import InputNumber from '../input-number/InputNumber.svelte';
+  import { splitFieldProps, type FieldPassthroughProps } from './field-props.js';
+
+  type InputNumberProps = ComponentProps<typeof InputNumber>;
+
+  interface Props extends FieldPassthroughProps {
+    placeholder?: InputNumberProps['placeholder'];
+    disabled?: boolean;
+    size?: InputNumberProps['size'];
+    min?: InputNumberProps['min'];
+    max?: InputNumberProps['max'];
+    step?: InputNumberProps['step'];
+    precision?: InputNumberProps['precision'];
+    showClear?: InputNumberProps['showClear'];
+    innerButtons?: InputNumberProps['innerButtons'];
+    hideButtons?: InputNumberProps['hideButtons'];
+  }
+
+  const props: Props = $props();
+  const controlKeys = [
+    'placeholder',
+    'disabled',
+    'size',
+    'min',
+    'max',
+    'step',
+    'precision',
+    'showClear',
+    'innerButtons',
+    'hideButtons',
+  ] 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, onBlur, status, disabled: fieldDisabled, id, describedBy, errorMessageId, labelledById, required, insetLabel, insetLabelId })}
+    <InputNumber
+      {...(typeof value === 'number' ? { value } : { value: null })}
+      validateStatus={status === 'error' ? 'error' : 'default'}
+      disabled={(control.disabled as boolean | undefined) ?? fieldDisabled}
+      {id}
+      {...(insetLabel !== undefined ? { insetLabel } : {})}
+      {...(insetLabelId !== undefined ? { insetLabelId } : {})}
+      {...(control.placeholder !== undefined ? { placeholder: control.placeholder as NonNullable<InputNumberProps['placeholder']> } : {})}
+      {...(control.size !== undefined ? { size: control.size as NonNullable<InputNumberProps['size']> } : {})}
+      {...(control.min !== undefined ? { min: control.min as NonNullable<InputNumberProps['min']> } : {})}
+      {...(control.max !== undefined ? { max: control.max as NonNullable<InputNumberProps['max']> } : {})}
+      {...(control.step !== undefined ? { step: control.step as NonNullable<InputNumberProps['step']> } : {})}
+      {...(control.precision !== undefined ? { precision: control.precision as NonNullable<InputNumberProps['precision']> } : {})}
+      {...(control.showClear !== undefined ? { showClear: control.showClear as NonNullable<InputNumberProps['showClear']> } : {})}
+      {...(control.innerButtons !== undefined ? { innerButtons: control.innerButtons as NonNullable<InputNumberProps['innerButtons']> } : {})}
+      {...(control.hideButtons !== undefined ? { hideButtons: control.hideButtons as NonNullable<InputNumberProps['hideButtons']> } : {})}
+      {...(labelledById !== undefined ? { ariaLabelledby: labelledById } : labelForAria !== undefined ? { ariaLabel: labelForAria } : {})}
+      {...(describedBy !== undefined ? { ariaDescribedby: describedBy } : {})}
+      {...(errorMessageId !== undefined ? { ariaErrormessage: errorMessageId } : {})}
+      {...(required ? { ariaRequired: true } : {})}
+      onChange={(v) => onChange(v)}
+      onBlur={() => onBlur()}
+    />
+  {/snippet}
+</Field>

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

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'svelte';
+import InputNumber from '../input-number/InputNumber.svelte';
+import { type FieldPassthroughProps } from './field-props.js';
+type InputNumberProps = ComponentProps<typeof InputNumber>;
+interface Props extends FieldPassthroughProps {
+    placeholder?: InputNumberProps['placeholder'];
+    disabled?: boolean;
+    size?: InputNumberProps['size'];
+    min?: InputNumberProps['min'];
+    max?: InputNumberProps['max'];
+    step?: InputNumberProps['step'];
+    precision?: InputNumberProps['precision'];
+    showClear?: InputNumberProps['showClear'];
+    innerButtons?: InputNumberProps['innerButtons'];
+    hideButtons?: InputNumberProps['hideButtons'];
+}
+declare const FormInputNumber: import("svelte").Component<Props, {}, "">;
+type FormInputNumber = ReturnType<typeof FormInputNumber>;
+export default FormInputNumber;
+//# sourceMappingURL=FormInputNumber.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormInputNumber.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormInputNumber.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAC7D,OAAO,EAAmB,KAAK,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAG7E,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC;AAE3D,UAAU,KAAM,SAAQ,qBAAqB;IAC3C,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,GAAG,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC9B,GAAG,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IAC1C,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;CAC/C;AAuCH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}