@h-ai/ui 0.1.0-alpha.29 → 0.1.0-alpha.31

package/dist/components/scenes/app/ThemeColorPicker.svelte

@@ -7,9 +7,10 @@
   @prop {function} onchange - 颜色变更回调
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import { uiM } from '../../../messages.js'
   import { DEFAULT_THEME_COLOR, THEME_COLOR_PRESETS } from '../../../theme-config.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
 
   const HEX_COLOR_REGEX = /^#[0-9a-f]{6}$/
   const SHORT_HEX_COLOR_REGEX = /^#[0-9a-f]{3}$/
@@ -37,8 +38,10 @@
     pickerLabel,
     customLabel,
     class: className = '',
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let colorInputRef = $state<HTMLInputElement | null>(null)
 
   const defaultPresets = $derived(
@@ -97,7 +100,7 @@
   }
 </script>
 
-<div class={cn('theme-color-picker', className)}>
+<div {...dataAttributes} class={cn('theme-color-picker', className)}>
   <div class='flex flex-wrap items-center gap-2'>
     {#each normalizedPresets as preset (preset.value)}
       <button

package/dist/components/scenes/app/ThemeColorPicker.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../../types.js';
 interface ThemeColorPreset {
     value: string;
     label: string;
@@ -11,6 +12,7 @@ interface Props {
     customLabel?: string;
     class?: string;
 }
+type $$ComponentProps = Props & DataAttributes;
 /**
  * ThemeColorPicker
  * 主题色选择器，提供预置主题色与原生取色盘能力。
@@ -19,6 +21,6 @@ interface Props {
  * @prop {Array<{ value: string, label: string }>} presets - 预置主题色列表
  * @prop {function} onchange - 颜色变更回调
  */
-declare const ThemeColorPicker: import("svelte").Component<Props, {}, "">;
+declare const ThemeColorPicker: import("svelte").Component<$$ComponentProps, {}, "">;
 type ThemeColorPicker = ReturnType<typeof ThemeColorPicker>;
 export default ThemeColorPicker;

package/dist/components/scenes/app/ThemeSelector.svelte

@@ -17,9 +17,10 @@
 -->
 <script lang='ts'>
   import type { ThemeInfo } from '../../../theme-config.js'
+  import type { DataAttributes } from '../../../types.js'
   import { uiM } from '../../../messages.js'
   import { THEME_GROUPS, THEMES } from '../../../theme-config.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import BareButton from '../../primitives/BareButton.svelte'
 
   interface Props {
@@ -45,8 +46,10 @@
     compact = false,
     grouped = true,
     class: className = '',
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const displaySelectLabel = $derived(selectLabel ?? uiM('theme_selector_label'))
 
   let open = $state(false)
@@ -83,7 +86,7 @@
   })
 </script>
 
-<div bind:this={containerRef} class={cn('dropdown', align === 'end' ? 'dropdown-end' : '', open ? 'dropdown-open' : '', className)}>
+<div {...dataAttributes} bind:this={containerRef} class={cn('dropdown', align === 'end' ? 'dropdown-end' : '', open ? 'dropdown-open' : '', className)}>
   <BareButton
     type='button'
     class='btn btn-ghost {compact ? 'btn-sm btn-square' : 'gap-2'}'

package/dist/components/scenes/app/ThemeSelector.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../../types.js';
 interface Props {
     currentTheme?: string;
     /** 选择主题按钮的 aria-label */
@@ -11,6 +12,7 @@ interface Props {
     grouped?: boolean;
     class?: string;
 }
+type $$ComponentProps = Props & DataAttributes;
 /**
  * ThemeSelector
  * 主题选择器组件，支持内置主题集合的选择和预览。
@@ -28,6 +30,6 @@ interface Props {
  *   grouped
  * />
  */
-declare const ThemeSelector: import("svelte").Component<Props, {}, "">;
+declare const ThemeSelector: import("svelte").Component<$$ComponentProps, {}, "">;
 type ThemeSelector = ReturnType<typeof ThemeSelector>;
 export default ThemeSelector;

package/dist/components/scenes/app/ThemeToggle.svelte

@@ -14,8 +14,10 @@
   />
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import { uiM } from '../../../messages.js'
   import { isDarkTheme } from '../../../theme-config.js'
+  import { getDataAttributes } from '../../../utils.js'
   import IconButton from '../../primitives/IconButton.svelte'
 
   interface Props {
@@ -37,8 +39,10 @@
     darkTheme = 'dark',
     labels = {},
     class: className = '',
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   // labels 优先，缺省回退到内置文案
   const isDark = $derived(isDarkTheme(currentTheme))
 
@@ -48,7 +52,7 @@
   }
 </script>
 
-<div class='tooltip tooltip-bottom {className}' data-tip={isDark ? (labels.switchToLight ?? uiM('theme_switch_to_light')) : (labels.switchToDark ?? uiM('theme_switch_to_dark'))}>
+<div {...dataAttributes} class='tooltip tooltip-bottom {className}' data-tip={isDark ? (labels.switchToLight ?? uiM('theme_switch_to_light')) : (labels.switchToDark ?? uiM('theme_switch_to_dark'))}>
   <IconButton
     variant='ghost'
     size='sm'

package/dist/components/scenes/app/ThemeToggle.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../../types.js';
 interface Props {
     currentTheme?: string;
     onchange?: (theme: string) => void;
@@ -9,6 +10,7 @@ interface Props {
     };
     class?: string;
 }
+type $$ComponentProps = Props & DataAttributes;
 /**
  * ThemeToggle
  * 主题切换按钮组件，支持明/暗主题快速切换。
@@ -24,6 +26,6 @@ interface Props {
  *   onchange={(theme) => themeStore.set(theme)}
  * />
  */
-declare const ThemeToggle: import("svelte").Component<Props, {}, "">;
+declare const ThemeToggle: import("svelte").Component<$$ComponentProps, {}, "">;
 type ThemeToggle = ReturnType<typeof ThemeToggle>;
 export default ThemeToggle;

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;