@chenzy-design/svelte 0.3.0 → 0.4.1

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

@@ -1 +1 @@
-{"version":3,"file":"FormRating.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormRating.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAG3C,KAAK,WAAW,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAEjD,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,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;CACpC;AAsDH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FormRating.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormRating.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAmB,KAAK,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAG7E,KAAK,WAAW,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAEjD,UAAU,KAAM,SAAQ,qBAAqB;IAE3C,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;CACpC;AA4BH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/form/FormSection.svelte

@@ -1,45 +1,55 @@
 <!--
   Form.Section — see specs/components/input/Form.spec.md
-  分组容器：<fieldset> 包裹，legend 显示分组标题。
+  分组容器：镜像 Semi section.tsx —— <section class="cd-form-section"><h5 class="cd-form-section-text">。
+  仅影响布局，不影响数据结构。样式严格对齐 Semi form.scss（border-bottom + header-5 + bold + margin）。
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
 
   interface Props {
-    /** 分组标题：字符串或 Snippet。 */
+    /** 分组标题：字符串或 Snippet（Snippet 为本库超集，Semi 只支持 node）。 */
     text?: string | Snippet;
     className?: string;
+    /** 透传到 <section> 的内联样式。 */
+    style?: string;
     children?: Snippet;
   }
 
-  let { text, className, children }: Props = $props();
+  let { text, className, style, children }: Props = $props();
 </script>
 
-<fieldset class={['cd-form__section', className].filter(Boolean).join(' ')}>
-  {#if text !== undefined}
-    <legend class="cd-form__section-legend">
-      {#if typeof text === 'string'}
-        {text}
-      {:else}
-        {@render text()}
-      {/if}
-    </legend>
-  {/if}
+<section class={['cd-form-section', className].filter(Boolean).join(' ')} {style}>
+  <h5 class="cd-form-section-text">
+    {#if typeof text === 'string'}
+      {text}
+    {:else if text}
+      {@render text()}
+    {/if}
+  </h5>
   {@render children?.()}
-</fieldset>
+</section>
 
 <style>
-  .cd-form__section {
-    display: contents;
-    border: none;
-    padding: 0;
-    margin: 0;
+  .cd-form-section {
+    width: 100%;
+    margin-block-start: var(--cd-spacing-form-section-margintop);
   }
-  .cd-form__section-legend {
-    color: var(--cd-form-label-color, var(--cd-color-text-1));
-    font-weight: var(--cd-font-weight-medium, 500);
-    font-size: var(--cd-font-size-regular, 0.875rem);
-    padding: 0;
-    margin-block-end: var(--cd-spacing-tight);
+  /* 首个 section 去掉顶部外边距（对齐 Semi :nth-of-type(1)）。 */
+  .cd-form-section:first-of-type {
+    margin-block-start: 0;
+  }
+  .cd-form-section-text {
+    /* @include font-size-header-5（font-size + line-height:24px），对齐 Semi。 */
+    font-size: var(--cd-font-size-header-5);
+    line-height: 24px;
+    font-weight: var(--cd-font-weight-bold);
+    width: 100%;
+    color: var(--cd-color-form-section-text-default);
+    border-block-end: var(--cd-width-form-section-border) solid
+      var(--cd-color-form-section-border-default);
+    padding-block-start: var(--cd-spacing-form-section-text-paddingtop);
+    padding-block-end: var(--cd-spacing-form-section-text-paddingbottom);
+    margin-block-start: var(--cd-spacing-form-section-text-margintop);
+    margin-block-end: var(--cd-spacing-form-section-text-marginbottom);
   }
 </style>

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

@@ -1,8 +1,10 @@
 import type { Snippet } from 'svelte';
 interface Props {
-    /** 分组标题：字符串或 Snippet。 */
+    /** 分组标题：字符串或 Snippet（Snippet 为本库超集，Semi 只支持 node）。 */
     text?: string | Snippet;
     className?: string;
+    /** 透传到 <section> 的内联样式。 */
+    style?: string;
     children?: Snippet;
 }
 declare const FormSection: import("svelte").Component<Props, {}, "">;

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

@@ -1 +1 @@
-{"version":3,"file":"FormSection.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormSection.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0BH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FormSection.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormSection.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAwBH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/form/FormSelect.svelte

@@ -1,95 +1,71 @@
 <!--
   Form.Select — convenience wrapper: <Form.Field> + <Select> bound to a field.
+  field-level props 经 FieldPassthroughProps 透传给 Field；控件专属给 Select。
 -->
 <script lang="ts">
-  import type { Rule, ValidateTrigger } from '@chenzy-design/core';
   import type { ComponentProps } from 'svelte';
   import Field from './Field.svelte';
   import Select from '../select/Select.svelte';
+  import { splitFieldProps, type FieldPassthroughProps } from './field-props.js';
 
   type SelectProps = ComponentProps<typeof Select>;
 
-  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[];
-    // Select-specific props
-    options?: SelectProps['options'];
+  interface Props extends FieldPassthroughProps {
+    optionList?: SelectProps['optionList'];
     multiple?: SelectProps['multiple'];
     filter?: SelectProps['filter'];
     placeholder?: SelectProps['placeholder'];
     disabled?: boolean;
-    clearable?: SelectProps['clearable'];
+    showClear?: SelectProps['showClear'];
     size?: SelectProps['size'];
     maxTagCount?: SelectProps['maxTagCount'];
     allowCreate?: SelectProps['allowCreate'];
-    virtualized?: SelectProps['virtualized'];
+    virtualize?: SelectProps['virtualize'];
   }
 
-  let {
-    field,
-    label,
-    rules = [],
-    initValue,
-    required = false,
-    validateStatus,
-    extraText,
-    span,
-    transform,
-    dependencies,
-    trigger,
-    options,
-    multiple,
-    filter,
-    placeholder,
-    disabled,
-    clearable,
-    size,
-    maxTagCount,
-    allowCreate,
-    virtualized,
-  }: 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 = [
+    'optionList',
+    'multiple',
+    'filter',
+    'placeholder',
+    'disabled',
+    'showClear',
+    'size',
+    'maxTagCount',
+    'allowCreate',
+    'virtualize',
+  ] 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 })}
+  {#snippet children({ value, onChange, status, disabled: fieldDisabled, id, describedBy, errorMessageId, labelledById, required, insetLabel, insetLabelId })}
     <Select
       {...(value !== undefined ? { value: value as NonNullable<SelectProps['value']> } : {})}
-      {...(options !== undefined ? { options } : {})}
-      {...(multiple !== undefined ? { multiple } : {})}
-      {...(filter !== undefined ? { filter } : {})}
-      {...(placeholder !== undefined ? { placeholder } : {})}
-      disabled={disabled ?? fieldDisabled}
-      {...(clearable !== undefined ? { clearable } : {})}
-      {...(size !== undefined ? { size } : {})}
-      {...(maxTagCount !== undefined ? { maxTagCount } : {})}
-      {...(allowCreate !== undefined ? { allowCreate } : {})}
-      {...(virtualized !== undefined ? { virtualized } : {})}
-      status={status === 'error' ? 'error' : 'default'}
-      {...(label !== undefined ? {} : { ariaLabelledby: id })}
-      {...(describedBy !== undefined ? { ariaLabel: describedBy } : {})}
+      {...(control.optionList !== undefined ? { optionList: control.optionList as NonNullable<SelectProps['optionList']> } : {})}
+      {...(control.multiple !== undefined ? { multiple: control.multiple as NonNullable<SelectProps['multiple']> } : {})}
+      {...(control.filter !== undefined ? { filter: control.filter as NonNullable<SelectProps['filter']> } : {})}
+      {...(control.placeholder !== undefined ? { placeholder: control.placeholder as NonNullable<SelectProps['placeholder']> } : {})}
+      disabled={(control.disabled as boolean | undefined) ?? fieldDisabled}
+      {...(control.showClear !== undefined ? { showClear: control.showClear as NonNullable<SelectProps['showClear']> } : {})}
+      {...(control.size !== undefined ? { size: control.size as NonNullable<SelectProps['size']> } : {})}
+      {...(control.maxTagCount !== undefined ? { maxTagCount: control.maxTagCount as NonNullable<SelectProps['maxTagCount']> } : {})}
+      {...(control.allowCreate !== undefined ? { allowCreate: control.allowCreate as NonNullable<SelectProps['allowCreate']> } : {})}
+      {...(control.virtualize !== undefined ? { virtualize: control.virtualize as NonNullable<SelectProps['virtualize']> } : {})}
+      validateStatus={status === 'error' ? 'error' : 'default'}
+      {id}
+      {...(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)}
     />
   {/snippet}

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

@@ -1,29 +1,18 @@
-import type { Rule, ValidateTrigger } from '@chenzy-design/core';
 import type { ComponentProps } from 'svelte';
 import Select from '../select/Select.svelte';
+import { type FieldPassthroughProps } from './field-props.js';
 type SelectProps = ComponentProps<typeof Select>;
-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[];
-    options?: SelectProps['options'];
+interface Props extends FieldPassthroughProps {
+    optionList?: SelectProps['optionList'];
     multiple?: SelectProps['multiple'];
     filter?: SelectProps['filter'];
     placeholder?: SelectProps['placeholder'];
     disabled?: boolean;
-    clearable?: SelectProps['clearable'];
+    showClear?: SelectProps['showClear'];
     size?: SelectProps['size'];
     maxTagCount?: SelectProps['maxTagCount'];
     allowCreate?: SelectProps['allowCreate'];
-    virtualized?: SelectProps['virtualized'];
+    virtualize?: SelectProps['virtualize'];
 }
 declare const FormSelect: import("svelte").Component<Props, {}, "">;
 type FormSelect = ReturnType<typeof FormSelect>;

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

@@ -1 +1 @@
-{"version":3,"file":"FormSelect.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormSelect.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAG3C,KAAK,WAAW,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAEjD,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,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;CAC1C;AAyDH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FormSelect.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormSelect.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAmB,KAAK,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAG7E,KAAK,WAAW,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAEjD,UAAU,KAAM,SAAQ,qBAAqB;IAC3C,UAAU,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,WAAW,CAAC,YAAY,CAAC,CAAC;CACxC;AAuCH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/form/FormSlider.svelte

@@ -1,27 +1,16 @@
 <!--
   Form.Slider — convenience wrapper: <Form.Field> + <Slider> bound to a field.
+  field-level props 经 FieldPassthroughProps 透传给 Field；控件专属给 Slider。
 -->
 <script lang="ts">
-  import type { Rule, ValidateTrigger } from '@chenzy-design/core';
   import type { ComponentProps } from 'svelte';
   import Field from './Field.svelte';
   import Slider from '../slider/Slider.svelte';
+  import { splitFieldProps, type FieldPassthroughProps } from './field-props.js';
 
   type SliderProps = ComponentProps<typeof Slider>;
 
-  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[];
-    // Slider-specific props
+  interface Props extends FieldPassthroughProps {
     min?: SliderProps['min'];
     max?: SliderProps['max'];
     step?: SliderProps['step'];
@@ -29,67 +18,46 @@
     marks?: SliderProps['marks'];
     disabled?: boolean;
     vertical?: SliderProps['vertical'];
-    size?: SliderProps['size'];
     tooltipVisible?: SliderProps['tooltipVisible'];
     tipFormatter?: SliderProps['tipFormatter'];
   }
 
-  let {
-    field,
-    label,
-    rules = [],
-    initValue,
-    required = false,
-    validateStatus,
-    extraText,
-    span,
-    transform,
-    dependencies,
-    trigger,
-    min,
-    max,
-    step,
-    range,
-    marks,
-    disabled,
-    vertical,
-    size,
-    tooltipVisible,
-    tipFormatter,
-  }: 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 = [
+    'min',
+    'max',
+    'step',
+    'range',
+    'marks',
+    'disabled',
+    'vertical',
+    'tooltipVisible',
+    'tipFormatter',
+  ] 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 })}
+  {#snippet children({ value, onChange, disabled: fieldDisabled, describedBy, labelledById })}
     <Slider
       {...(value !== undefined ? { value: value as NonNullable<SliderProps['value']> } : {})}
-      {...(min !== undefined ? { min } : {})}
-      {...(max !== undefined ? { max } : {})}
-      {...(step !== undefined ? { step } : {})}
-      {...(range !== undefined ? { range } : {})}
-      {...(marks !== undefined ? { marks } : {})}
-      disabled={disabled ?? fieldDisabled}
-      {...(vertical !== undefined ? { vertical } : {})}
-      {...(size !== undefined ? { size } : {})}
-      {...(tooltipVisible !== undefined ? { tooltipVisible } : {})}
-      {...(tipFormatter !== undefined ? { tipFormatter } : {})}
-      status={status === 'error' ? 'error' : 'default'}
+      {...(control.min !== undefined ? { min: control.min as NonNullable<SliderProps['min']> } : {})}
+      {...(control.max !== undefined ? { max: control.max as NonNullable<SliderProps['max']> } : {})}
+      {...(control.step !== undefined ? { step: control.step as NonNullable<SliderProps['step']> } : {})}
+      {...(control.range !== undefined ? { range: control.range as NonNullable<SliderProps['range']> } : {})}
+      {...(control.marks !== undefined ? { marks: control.marks as NonNullable<SliderProps['marks']> } : {})}
+      disabled={(control.disabled as boolean | undefined) ?? fieldDisabled}
+      {...(control.vertical !== undefined ? { vertical: control.vertical as NonNullable<SliderProps['vertical']> } : {})}
+      {...(control.tooltipVisible !== undefined ? { tooltipVisible: control.tooltipVisible as NonNullable<SliderProps['tooltipVisible']> } : {})}
+      {...(control.tipFormatter !== undefined ? { tipFormatter: control.tipFormatter as NonNullable<SliderProps['tipFormatter']> } : {})}
+      {...(labelledById !== undefined ? { ariaLabelledby: labelledById } : labelForAria !== undefined ? { ariaLabel: labelForAria } : {})}
+      {...(describedBy !== undefined ? { ariaDescribedby: describedBy } : {})}
       onChange={(v) => onChange(v)}
-      onBlur={() => onBlur()}
     />
   {/snippet}
 </Field>

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

@@ -1,19 +1,8 @@
-import type { Rule, ValidateTrigger } from '@chenzy-design/core';
 import type { ComponentProps } from 'svelte';
 import Slider from '../slider/Slider.svelte';
+import { type FieldPassthroughProps } from './field-props.js';
 type SliderProps = ComponentProps<typeof Slider>;
-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 {
     min?: SliderProps['min'];
     max?: SliderProps['max'];
     step?: SliderProps['step'];
@@ -21,7 +10,6 @@ interface Props {
     marks?: SliderProps['marks'];
     disabled?: boolean;
     vertical?: SliderProps['vertical'];
-    size?: SliderProps['size'];
     tooltipVisible?: SliderProps['tooltipVisible'];
     tipFormatter?: SliderProps['tipFormatter'];
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FormSlider.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormSlider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAG3C,KAAK,WAAW,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAEjD,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,GAAG,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACzB,GAAG,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,cAAc,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;IAC/C,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;CAC5C;AAyDH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FormSlider.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormSlider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAmB,KAAK,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAG7E,KAAK,WAAW,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAEjD,UAAU,KAAM,SAAQ,qBAAqB;IAC3C,GAAG,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACzB,GAAG,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,cAAc,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;IAC/C,YAAY,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,CAAC;CAC5C;AAsCH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/form/FormSlot.svelte

@@ -1,51 +1,92 @@
 <!--
   Form.Slot — see specs/components/input/Form.spec.md
   布局占位容器：与普通 Field 相同的布局，但不接管 value/onChange，纯布局占位。
+  对齐 Semi slot.tsx：<div class="cd-form-field cd-form-slot" x-label-pos><Label/>
+  <div class="cd-form-field-main cd-form-slot-main">{children}{error}</div></div>。
+  Form 上的 labelWidth/labelAlign 自动作用于 Slot；label 支持对象形态（{text,align,width}）。
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { getFormContext, type FormLabelPosition, type FormLabelAlign } from './context.js';
+  import FormLabel from './FormLabel.svelte';
+  import FormErrorMessage from './FormErrorMessage.svelte';
+
+  /** Slot label 对象形态（对齐 Semi LabelProps 子集）。 */
+  interface SlotLabelProps {
+    text?: string;
+    align?: FormLabelAlign;
+    width?: number | string;
+    required?: boolean;
+    optional?: boolean;
+    extra?: string;
+  }
 
   interface Props {
-    /** 标签文本。 */
-    label?: string;
+    /** 标签：字符串或对象形态（对齐 Semi label: LabelProps）。 */
+    label?: string | SlotLabelProps;
     /** 标签位置覆盖（不传则继承 Form 配置）。 */
     labelPosition?: FormLabelPosition;
     /** 标签对齐覆盖（不传则继承 Form 配置）。 */
     labelAlign?: FormLabelAlign;
     /** 隐藏标签区域（仍保留布局对齐占位）。 */
     noLabel?: boolean;
+    /** 直接渲染错误信息（字符串、字符串数组或 Snippet）。 */
+    error?: string | string[] | Snippet;
+    className?: string;
+    /** 透传到容器的内联样式。 */
+    style?: string;
     children?: Snippet;
   }
 
-  let { label, labelPosition, labelAlign, noLabel = false, children }: Props = $props();
+  let {
+    label,
+    labelPosition,
+    labelAlign,
+    noLabel = false,
+    error,
+    className,
+    style,
+    children,
+  }: Props = $props();
 
   const ctx = getFormContext();
 
+  // label 归一化（字符串 / 对象）。
+  const labelObj = $derived(
+    typeof label === 'object' && label !== null ? label : undefined,
+  );
+  const labelText = $derived(typeof label === 'string' ? label : labelObj?.text);
+  const hasLabel = $derived(!noLabel && labelText !== undefined);
+
   const resolvedLabelPosition = $derived(labelPosition ?? ctx?.getLabelPosition() ?? 'top');
-  const resolvedLabelAlign = $derived(labelAlign ?? ctx?.getLabelAlign() ?? 'left');
+  // 对齐优先级：label 对象 → prop → Form context（对齐 Semi mergeLabelProps）。
+  const resolvedLabelAlign = $derived(
+    labelObj?.align ?? labelAlign ?? ctx?.getLabelAlign() ?? 'left',
+  );
+  const resolvedLabelWidth = $derived(labelObj?.width ?? ctx?.getLabelWidth());
 
   const cls = $derived(
-    [
-      'cd-form-field',
-      `cd-form-field--label-${resolvedLabelPosition}`,
-    ]
-      .filter(Boolean)
-      .join(' '),
+    ['cd-form-field', 'cd-form-slot', className].filter(Boolean).join(' '),
   );
+  // x-label-pos 镜像 Semi 供样式定位；经 attrs 对象展开，让 svelte-check 接受非标准属性名。
+  const domAttrs = $derived({ 'x-label-pos': resolvedLabelPosition });
 </script>
 
-<div class={cls}>
-  {#if !noLabel}
-    <div
-      class="cd-form-field__label cd-form-field__label--align-{resolvedLabelAlign}"
-    >
-      {#if label !== undefined}
-        <span class="cd-form-field__label-text">{label}</span>
-      {/if}
-    </div>
+<div class={cls} {...domAttrs} {style}>
+  {#if hasLabel}
+    <FormLabel
+      text={labelText}
+      align={resolvedLabelAlign}
+      {...resolvedLabelWidth !== undefined ? { width: resolvedLabelWidth } : {}}
+      required={labelObj?.required ?? false}
+      optional={labelObj?.optional ?? false}
+      {...labelObj?.extra !== undefined ? { extra: labelObj.extra } : {}}
+    />
   {/if}
-  <div class="cd-form-field__control">
+  <div class="cd-form-field-main cd-form-slot-main">
     {@render children?.()}
+    {#if error !== undefined}
+      <FormErrorMessage {error} />
+    {/if}
   </div>
 </div>

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

@@ -1,14 +1,28 @@
 import type { Snippet } from 'svelte';
 import { type FormLabelPosition, type FormLabelAlign } from './context.js';
+/** Slot label 对象形态（对齐 Semi LabelProps 子集）。 */
+interface SlotLabelProps {
+    text?: string;
+    align?: FormLabelAlign;
+    width?: number | string;
+    required?: boolean;
+    optional?: boolean;
+    extra?: string;
+}
 interface Props {
-    /** 标签文本。 */
-    label?: string;
+    /** 标签：字符串或对象形态（对齐 Semi label: LabelProps）。 */
+    label?: string | SlotLabelProps;
     /** 标签位置覆盖（不传则继承 Form 配置）。 */
     labelPosition?: FormLabelPosition;
     /** 标签对齐覆盖（不传则继承 Form 配置）。 */
     labelAlign?: FormLabelAlign;
     /** 隐藏标签区域（仍保留布局对齐占位）。 */
     noLabel?: boolean;
+    /** 直接渲染错误信息（字符串、字符串数组或 Snippet）。 */
+    error?: string | string[] | Snippet;
+    className?: string;
+    /** 透传到容器的内联样式。 */
+    style?: string;
     children?: Snippet;
 }
 declare const FormSlot: import("svelte").Component<Props, {}, "">;

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

@@ -1 +1 @@
-{"version":3,"file":"FormSlot.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormSlot.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAkB,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAGzF,UAAU,KAAK;IACb,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,6BAA6B;IAC7B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuCH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"FormSlot.svelte.d.ts","sourceRoot":"","sources":["../../src/form/FormSlot.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAkB,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAKzF,8CAA8C;AAC9C,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,KAAK;IACb,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;IAChC,6BAA6B;IAC7B,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,6BAA6B;IAC7B,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,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,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0DH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}