@h-ai/ui 0.1.0-alpha.28 → 0.1.0-alpha.30

package/dist/components/scenes/crud/CrudDeleteConfirm.svelte

@@ -6,7 +6,9 @@
   使用 compounds 组件：Confirm
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import { uiM } from '../../../messages.js'
+  import { getDataAttributes } from '../../../utils.js'
   import Confirm from '../../compounds/Confirm.svelte'
 
   let {
@@ -16,6 +18,7 @@
     message = '',
     onconfirm,
     oncancel,
+    ...restProps
   }: {
     open?: boolean
     loading?: boolean
@@ -23,17 +26,19 @@
     message?: string
     onconfirm?: () => Promise<void> | void
     oncancel?: () => void
-  } = $props()
+  } & DataAttributes = $props()
+
+  const dataAttributes = $derived(getDataAttributes(restProps))
 </script>
 
-<Confirm
-  bind:open
-  title={title || uiM('crud_delete_title')}
-  message={message || uiM('crud_delete_message')}
-  confirmText={uiM('crud_delete')}
-  cancelText={uiM('crud_cancel')}
-  variant='error'
-  {loading}
-  {onconfirm}
-  {oncancel}
+<Confirm {...dataAttributes}
+         bind:open
+         title={title || uiM('crud_delete_title')}
+         message={message || uiM('crud_delete_message')}
+         confirmText={uiM('crud_delete')}
+         cancelText={uiM('crud_cancel')}
+         variant='error'
+         {loading}
+         {onconfirm}
+         {oncancel}
 />

package/dist/components/scenes/crud/CrudDeleteConfirm.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../../types.js';
 type $$ComponentProps = {
     open?: boolean;
     loading?: boolean;
@@ -5,7 +6,7 @@ type $$ComponentProps = {
     message?: string;
     onconfirm?: () => Promise<void> | void;
     oncancel?: () => void;
-};
+} & DataAttributes;
 /**
  * CrudDeleteConfirm
  * CRUD 删除确认对话框

package/dist/components/scenes/crud/CrudDetailDrawer.svelte

@@ -7,9 +7,10 @@
 -->
 <script lang='ts'>
   import type { Snippet } from 'svelte'
-  import type { Size } from '../../../types.js'
+  import type { DataAttributes, Size } from '../../../types.js'
   import type { CrudFormVariant } from './crud-types.js'
   import { uiM } from '../../../messages.js'
+  import { getDataAttributes } from '../../../utils.js'
   import Drawer from '../../compounds/Drawer.svelte'
   import Modal from '../../compounds/Modal.svelte'
   import Badge from '../../primitives/Badge.svelte'
@@ -40,6 +41,7 @@
     onedit,
     onclose,
     detailExtra,
+    ...restProps
   }: {
     open?: boolean
     item?: Record<string, unknown> | null
@@ -55,8 +57,9 @@
     onedit?: () => void
     onclose?: () => void
     detailExtra?: Snippet<[Record<string, unknown>]>
-  } = $props()
+  } & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   function resolveText(text: string | (() => string)): string {
     return typeof text === 'function' ? text() : text
   }
@@ -121,7 +124,7 @@
 
 {#snippet detailBody()}
   {#if item}
-    <div class='space-y-4'>
+    <div {...dataAttributes} class='space-y-4'>
       {#each detailFields as field (field.id)}
         {@const value = item[field.id]}
         <div>

package/dist/components/scenes/crud/CrudDetailDrawer.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { Size } from '../../../types.js';
+import type { DataAttributes, Size } from '../../../types.js';
 import type { CrudFormVariant } from './crud-types.js';
 type FieldDef = {
     id: string;
@@ -31,7 +31,7 @@ type $$ComponentProps = {
     onedit?: () => void;
     onclose?: () => void;
     detailExtra?: Snippet<[Record<string, unknown>]>;
-};
+} & DataAttributes;
 /**
  * CrudDetailDrawer
  * CRUD 详情组件（只读展示），支持抽屉（drawer）与弹窗（modal）两种展示形式

package/dist/components/scenes/crud/CrudDetailPanel.svelte

@@ -7,9 +7,10 @@
 -->
 <script lang='ts'>
   import type { Snippet } from 'svelte'
-  import type { Size } from '../../../types.js'
+  import type { DataAttributes, Size } from '../../../types.js'
   import type { CrudDensity, CrudFormVariant } from './crud-types.js'
   import { uiM } from '../../../messages.js'
+  import { getDataAttributes } from '../../../utils.js'
   import Drawer from '../../compounds/Drawer.svelte'
   import Modal from '../../compounds/Modal.svelte'
   import Badge from '../../primitives/Badge.svelte'
@@ -41,6 +42,7 @@
     onedit,
     onclose,
     detailExtra,
+    ...restProps
   }: {
     open?: boolean
     item?: Record<string, unknown> | null
@@ -57,8 +59,9 @@
     onedit?: () => void
     onclose?: () => void
     detailExtra?: Snippet<[Record<string, unknown>]>
-  } = $props()
+  } & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   function resolveText(text: string | (() => string)): string {
     return typeof text === 'function' ? text() : text
   }
@@ -129,7 +132,7 @@
 
 {#snippet detailBody()}
   {#if item}
-    <div class={contentClass}>
+    <div {...dataAttributes} class={contentClass}>
       {#each detailFields as field (field.id)}
         {@const value = item[field.id]}
         <div>

package/dist/components/scenes/crud/CrudDetailPanel.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { Size } from '../../../types.js';
+import type { DataAttributes, Size } from '../../../types.js';
 import type { CrudDensity, CrudFormVariant } from './crud-types.js';
 type FieldDef = {
     id: string;
@@ -32,7 +32,7 @@ type $$ComponentProps = {
     onedit?: () => void;
     onclose?: () => void;
     detailExtra?: Snippet<[Record<string, unknown>]>;
-};
+} & DataAttributes;
 /**
  * CrudDetailPanel
  * CRUD 详情组件（只读展示），支持抽屉（drawer）与弹窗（modal）两种展示形式

package/dist/components/scenes/crud/CrudEditPanel.svelte

@@ -7,9 +7,10 @@
 -->
 <script lang='ts'>
   import type { Snippet } from 'svelte'
-  import type { Size } from '../../../types.js'
+  import type { DataAttributes, Size } from '../../../types.js'
   import type { CrudDensity, CrudFormVariant } from './crud-types.js'
   import { uiM } from '../../../messages.js'
+  import { getDataAttributes } from '../../../utils.js'
   import Drawer from '../../compounds/Drawer.svelte'
   import FormField from '../../compounds/FormField.svelte'
   import Modal from '../../compounds/Modal.svelte'
@@ -49,6 +50,7 @@
     onclose,
     editFormExtra,
     editingItem = null,
+    ...restProps
   }: {
     open?: boolean
     mode?: 'create' | 'edit'
@@ -68,8 +70,9 @@
     onclose?: () => void
     editFormExtra?: Snippet<[Record<string, unknown> | null, 'create' | 'edit']>
     editingItem?: Record<string, unknown> | null
-  } = $props()
+  } & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   function resolveText(text: string | (() => string)): string {
     return typeof text === 'function' ? text() : text
   }
@@ -135,7 +138,7 @@
 
 {#snippet formFields()}
   {#if error}
-    <div class='p-3 bg-error/10 border border-error/20 rounded-lg text-sm text-error flex items-center gap-2'>
+    <div {...dataAttributes} class='p-3 bg-error/10 border border-error/20 rounded-lg text-sm text-error flex items-center gap-2'>
       <span class='icon-[tabler--alert-circle] size-4 shrink-0'></span>
       <span>{error}</span>
     </div>

package/dist/components/scenes/crud/CrudEditPanel.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { Size } from '../../../types.js';
+import type { DataAttributes, Size } from '../../../types.js';
 import type { CrudDensity, CrudFormVariant } from './crud-types.js';
 type FieldDef = {
     id: string;
@@ -42,7 +42,7 @@ type $$ComponentProps = {
     onclose?: () => void;
     editFormExtra?: Snippet<[Record<string, unknown> | null, 'create' | 'edit']>;
     editingItem?: Record<string, unknown> | null;
-};
+} & DataAttributes;
 /**
  * CrudEditPanel
  * CRUD 编辑/新建表单组件，支持抽屉（drawer）与弹窗（modal）两种展示形式

package/dist/components/scenes/crud/CrudFilterBar.svelte

@@ -5,7 +5,9 @@
   使用 Svelte 5 Runes ($props, $state)
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import { uiM } from '../../../messages.js'
+  import { getDataAttributes } from '../../../utils.js'
   import BareButton from '../../primitives/BareButton.svelte'
   import Input from '../../primitives/Input.svelte'
   import Select from '../../primitives/Select.svelte'
@@ -32,6 +34,7 @@
     onsearch,
     onfilterchange,
     onreset,
+    ...restProps
   }: {
     searchable?: boolean
     searchPlaceholder?: string
@@ -41,8 +44,9 @@
     onsearch?: (search: string) => void
     onfilterchange?: (filters: Record<string, unknown>) => void
     onreset?: () => void
-  } = $props()
+  } & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let searchTimer: ReturnType<typeof setTimeout> | undefined
 
   // 是否存在已激活的搜索/过滤条件（用于显示重置按钮）
@@ -116,7 +120,7 @@
   }
 </script>
 
-<div class='flex flex-wrap items-center gap-2 [&_.fieldset]:m-0 [&_.fieldset]:min-w-0'>
+<div {...dataAttributes} class='flex flex-wrap items-center gap-2 [&_.fieldset]:m-0 [&_.fieldset]:min-w-0'>
   {#if searchable}
     <div class='relative w-full sm:w-64 md:w-72'>
       <span class='icon-[tabler--search] pointer-events-none absolute left-3 top-1/2 z-10 size-4 -translate-y-1/2 text-base-content/35'></span>

package/dist/components/scenes/crud/CrudFilterBar.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../../types.js';
 type FilterFieldDef = {
     id: string;
     label: string | (() => string);
@@ -25,7 +26,7 @@ type $$ComponentProps = {
     onsearch?: (search: string) => void;
     onfilterchange?: (filters: Record<string, unknown>) => void;
     onreset?: () => void;
-};
+} & DataAttributes;
 /**
  * CrudFilterBar
  * CRUD 搜索 + 过滤栏组件

package/dist/components/scenes/crud/CrudPage.svelte

@@ -12,10 +12,12 @@
 -->
 <script lang='ts'>
   import type { Snippet } from 'svelte'
+  import type { DataAttributes } from '../../../types.js'
   import type { CrudDensity, CrudFormConfig, CrudPaginationConfig } from './crud-types.js'
   import type { NavAdapter } from './nav-adapter.js'
   import { SvelteURLSearchParams } from 'svelte/reactivity'
   import { uiM } from '../../../messages.js'
+  import { getDataAttributes } from '../../../utils.js'
   import Card from '../../compounds/Card.svelte'
   import DataTable from '../../compounds/DataTable.svelte'
   import PageHeader from '../../compounds/PageHeader.svelte'
@@ -102,6 +104,7 @@
     basePath = '',
     nav = createBrowserNavAdapter(),
     class: className = '',
+    ...restProps
   }: {
     crud: CrudDef
     data: { items: Record<string, unknown>[], total: number, page: number, pageSize: number, filters?: Record<string, unknown> }
@@ -127,8 +130,9 @@
      */
     nav?: NavAdapter
     class?: string
-  } = $props()
+  } & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   // ─── 状态 ───
 
   const keyField = $derived(crud.resource.keyField ?? 'id')
@@ -409,7 +413,7 @@
   )
 </script>
 
-<div class='{pageGapClass} {className}'>
+<div {...dataAttributes} class='{pageGapClass} {className}'>
   <!-- 页面标题 -->
   <PageHeader title={resourceLabel}>
     {#snippet actions()}

package/dist/components/scenes/crud/CrudPage.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { DataAttributes } from '../../../types.js';
 import type { CrudDensity, CrudFormConfig, CrudPaginationConfig } from './crud-types.js';
 import type { NavAdapter } from './nav-adapter.js';
 type FieldDef = {
@@ -105,7 +106,7 @@ type $$ComponentProps = {
      */
     nav?: NavAdapter;
     class?: string;
-};
+} & DataAttributes;
 /**
  * CrudPage
  * 通用 CRUD 页面组件

package/dist/components/scenes/crud/crud-types.d.ts

@@ -5,7 +5,7 @@
  * @module crud-types
  */
 import type { Snippet } from 'svelte';
-import type { Size } from '../../../types.js';
+import type { DataAttributes, Size } from '../../../types.js';
 /** CrudPage 权限控制 */
 export interface CrudPermissions {
     /** 允许新建 */
@@ -54,7 +54,7 @@ export interface CrudPageData<T = Record<string, unknown>> {
     filters?: Record<string, unknown>;
 }
 /** CrudPage 组件 Props */
-export interface CrudPageProps<T = Record<string, unknown>> {
+export interface CrudPageProps<T = Record<string, unknown>> extends DataAttributes {
     /** CRUD 操作定义（来自 kit.crud.define） */
     crud: {
         resource: {

package/dist/components/scenes/crypto/EncryptedInput.svelte

@@ -9,9 +9,10 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { Size } from '../../../types.js'
+  import type { DataAttributes, Size } from '../../../types.js'
   import { writeTextToClipboard } from '../../../internal/browser-safety.js'
   import { uiM } from '../../../messages.js'
+  import { getDataAttributes } from '../../../utils.js'
   import { BareButton, IconButton, Input } from '../../primitives/index.js'
 
   interface Props {
@@ -51,8 +52,10 @@
     onencrypt,
     oninput,
     onchange,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let showValue = $state(false)
 
   // 模拟加密（实际应该调用 crypto 服务）
@@ -93,7 +96,7 @@
   }
 </script>
 
-<div class='encrypted-input space-y-2 {className}'>
+<div {...dataAttributes} class='encrypted-input space-y-2 {className}'>
   <!-- 输入框 -->
   <div class='relative'>
     <Input

package/dist/components/scenes/crypto/EncryptedInput.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Size } from '../../../types.js';
+import type { DataAttributes, Size } from '../../../types.js';
 interface Props {
     /** 原始值 */
     value?: string;
@@ -27,6 +27,7 @@ interface Props {
         currentTarget: HTMLInputElement;
     }) => void;
 }
-declare const EncryptedInput: import("svelte").Component<Props, {}, "value" | "encryptedValue">;
+type $$ComponentProps = Props & DataAttributes;
+declare const EncryptedInput: import("svelte").Component<$$ComponentProps, {}, "value" | "encryptedValue">;
 type EncryptedInput = ReturnType<typeof EncryptedInput>;
 export default EncryptedInput;

package/dist/components/scenes/crypto/HashDisplay.svelte

@@ -9,10 +9,11 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { HashDisplayProps } from '../types.js'
   import { writeTextToClipboard } from '../../../internal/browser-safety.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import { Badge, IconButton } from '../../primitives/index.js'
 
   const {
@@ -24,8 +25,10 @@
     truncateLength = 16,
     labels = {},
     class: className = '',
-  }: HashDisplayProps = $props()
+    ...restProps
+  }: HashDisplayProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let copied = $state(false)
 
   const containerClass = $derived(
@@ -54,7 +57,7 @@
   }
 </script>
 
-<div class={containerClass}>
+<div {...dataAttributes} class={containerClass}>
   {#if label}
     <div class='text-xs text-base-content/60 mb-1'>
       {label}

package/dist/components/scenes/crypto/HashDisplay.svelte.d.ts

@@ -1,4 +1,6 @@
+import type { DataAttributes } from '../../../types.js';
 import type { HashDisplayProps } from '../types.js';
-declare const HashDisplay: import("svelte").Component<HashDisplayProps, {}, "">;
+type $$ComponentProps = HashDisplayProps & DataAttributes;
+declare const HashDisplay: import("svelte").Component<$$ComponentProps, {}, "">;
 type HashDisplay = ReturnType<typeof HashDisplay>;
 export default HashDisplay;

package/dist/components/scenes/crypto/SignatureDisplay.svelte

@@ -9,10 +9,11 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { SignatureDisplayProps } from '../types.js'
   import { writeTextToClipboard } from '../../../internal/browser-safety.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import { Badge, IconButton } from '../../primitives/index.js'
 
   const {
@@ -24,8 +25,10 @@
     copyable = true,
     labels = {},
     class: className = '',
-  }: SignatureDisplayProps = $props()
+    ...restProps
+  }: SignatureDisplayProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let copiedSig = $state(false)
   let copiedKey = $state(false)
 
@@ -67,7 +70,7 @@
   }
 </script>
 
-<div class={containerClass}>
+<div {...dataAttributes} class={containerClass}>
   <!-- 签名状态 -->
   <div class='flex items-center gap-2'>
     <span class='text-sm font-medium'>{labels.signature ?? uiM('signature_label')} ({algorithm})</span>

package/dist/components/scenes/crypto/SignatureDisplay.svelte.d.ts

@@ -1,4 +1,6 @@
+import type { DataAttributes } from '../../../types.js';
 import type { SignatureDisplayProps } from '../types.js';
-declare const SignatureDisplay: import("svelte").Component<SignatureDisplayProps, {}, "">;
+type $$ComponentProps = SignatureDisplayProps & DataAttributes;
+declare const SignatureDisplay: import("svelte").Component<$$ComponentProps, {}, "">;
 type SignatureDisplay = ReturnType<typeof SignatureDisplay>;
 export default SignatureDisplay;

package/dist/components/scenes/error/ErrorPage.svelte

@@ -12,9 +12,10 @@
 -->
 <script lang='ts'>
   import type { Snippet } from 'svelte'
+  import type { DataAttributes } from '../../../types.js'
   import type { ErrorPreset } from './error-presets.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import Button from '../../primitives/Button.svelte'
   import { ERROR_PRESETS, resolveErrorPreset } from './error-presets.js'
 
@@ -31,6 +32,7 @@
     icon,
     actions,
     class: className = '',
+    ...restProps
   }: {
     /** HTTP 状态码或预设标识；未命中预设时回退到最接近的预设 */
     status?: number | string | ErrorPreset
@@ -55,8 +57,9 @@
     /** 自定义操作区插槽（提供时覆盖默认按钮） */
     actions?: Snippet
     class?: string
-  } = $props()
+  } & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const preset = $derived(ERROR_PRESETS[resolveErrorPreset(status)])
   const displayCode = $derived(code ?? preset.code)
   const displayTitle = $derived(title ?? uiM(preset.titleKey))
@@ -77,7 +80,7 @@
   }
 </script>
 
-<div class={cn('flex min-h-[60vh] w-full flex-col items-center justify-center px-6 py-12 text-center', className)}>
+<div {...dataAttributes} class={cn('flex min-h-[60vh] w-full flex-col items-center justify-center px-6 py-12 text-center', className)}>
   <!-- 图标 -->
   <div class='mb-6 flex size-16 items-center justify-center rounded-2xl bg-base-content/5 text-base-content/40'>
     {#if icon}

package/dist/components/scenes/error/ErrorPage.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { DataAttributes } from '../../../types.js';
 import type { ErrorPreset } from './error-presets.js';
 type $$ComponentProps = {
     /** HTTP 状态码或预设标识；未命中预设时回退到最接近的预设 */
@@ -24,7 +25,7 @@ type $$ComponentProps = {
     /** 自定义操作区插槽（提供时覆盖默认按钮） */
     actions?: Snippet;
     class?: string;
-};
+} & DataAttributes;
 /**
  * ErrorPage
  * 通用错误页场景组件

package/dist/components/scenes/iam/AuthShell.svelte

@@ -14,7 +14,8 @@
 -->
 <script lang='ts'>
   import type { Snippet } from 'svelte'
-  import { cn } from '../../../utils.js'
+  import type { DataAttributes } from '../../../types.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
 
   const {
     variant = 'card',
@@ -30,6 +31,7 @@
     footer,
     children,
     class: className = '',
+    ...restProps
   }: {
     /** 布局形态：'card'（居中卡片，默认）或 'split'（左右分栏） */
     variant?: 'card' | 'split'
@@ -56,15 +58,16 @@
     /** 表单内容 */
     children?: Snippet
     class?: string
-  } = $props()
+  } & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const isSplit = $derived(variant === 'split')
   // split 模式下品牌区已展示 Logo，表单区仅在小屏展示，避免桌面端重复
   const logoWrapClass = $derived(isSplit ? 'mb-6 flex justify-center lg:hidden' : 'mb-6 flex justify-center')
 </script>
 
 {#snippet formPanel()}
-  <div class='flex w-full max-w-sm flex-col'>
+  <div {...dataAttributes} class='flex w-full max-w-sm flex-col'>
     {#if logo}
       <div class={logoWrapClass}>{@render logo()}</div>
     {/if}

package/dist/components/scenes/iam/AuthShell.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { DataAttributes } from '../../../types.js';
 type $$ComponentProps = {
     /** 布局形态：'card'（居中卡片，默认）或 'split'（左右分栏） */
     variant?: 'card' | 'split';
@@ -25,7 +26,7 @@ type $$ComponentProps = {
     /** 表单内容 */
     children?: Snippet;
     class?: string;
-};
+} & DataAttributes;
 /**
  * AuthShell
  * 认证页布局场景组件

package/dist/components/scenes/iam/ChangePasswordForm.svelte

@@ -3,9 +3,10 @@
   修改密码表单组件。
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { ChangePasswordFormData, ChangePasswordFormProps } from '../types.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import Alert from '../../compounds/Alert.svelte'
   import Button from '../../primitives/Button.svelte'
   import { arePasswordsEqual } from './password-utils.js'
@@ -21,8 +22,10 @@
     class: className = '',
     errors = {},
     onsubmit,
-  }: ChangePasswordFormProps = $props()
+    ...restProps
+  }: ChangePasswordFormProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let oldPassword = $state('')
   let newPassword = $state('')
   let confirmPassword = $state('')
@@ -66,7 +69,7 @@
   }
 </script>
 
-<form class={formClass} onsubmit={handleSubmit}>
+<form {...dataAttributes} class={formClass} onsubmit={handleSubmit}>
   {#if requireOldPassword}
     <div class='space-y-1.5'>
       <label class='text-sm font-medium text-base-content/70' for='old-password'>

package/dist/components/scenes/iam/ChangePasswordForm.svelte.d.ts

@@ -1,8 +1,10 @@
+import type { DataAttributes } from '../../../types.js';
 import type { ChangePasswordFormProps } from '../types.js';
+type $$ComponentProps = ChangePasswordFormProps & DataAttributes;
 /**
  * ChangePasswordForm
  * 修改密码表单组件。
  */
-declare const ChangePasswordForm: import("svelte").Component<ChangePasswordFormProps, {}, "">;
+declare const ChangePasswordForm: import("svelte").Component<$$ComponentProps, {}, "">;
 type ChangePasswordForm = ReturnType<typeof ChangePasswordForm>;
 export default ChangePasswordForm;