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

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;

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

@@ -9,9 +9,10 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { ForgotPasswordFormData, ForgotPasswordFormProps } 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 Input from '../../primitives/Input.svelte'
@@ -30,8 +31,10 @@
     onsubmit,
     header,
     footer,
-  }: ForgotPasswordFormProps = $props()
+    ...restProps
+  }: ForgotPasswordFormProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let email = $state('')
   let phone = $state('')
 
@@ -65,7 +68,7 @@
   }
 </script>
 
-<form class={formClass} onsubmit={handleSubmit}>
+<form {...dataAttributes} class={formClass} onsubmit={handleSubmit}>
   <!-- 标题 -->
   {#if showTitle}
     <h2 class='text-2xl font-semibold text-center mb-4'>{uiM('forgot_password_title')}</h2>

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

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

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

@@ -3,9 +3,10 @@
   用户登录表单组件，搭配 primitives/compounds 使用。
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { LoginFormData, LoginFormProps } 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 BareButton from '../../primitives/BareButton.svelte'
   import Button from '../../primitives/Button.svelte'
@@ -30,8 +31,10 @@
     onforgotpassword,
     header,
     footer,
-  }: LoginFormProps = $props()
+    ...restProps
+  }: LoginFormProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const hasAgreements = $derived(
     !!(agreements?.userAgreementUrl || agreements?.privacyPolicyUrl),
   )
@@ -66,7 +69,7 @@
   }
 </script>
 
-<form class={formClass} onsubmit={handleSubmit}>
+<form {...dataAttributes} class={formClass} onsubmit={handleSubmit}>
   <!-- 标题 -->
   {#if showTitle}
     <h2 class='text-xl font-semibold text-center mb-5'>{uiM('login_title')}</h2>

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

@@ -1,8 +1,10 @@
+import type { DataAttributes } from '../../../types.js';
 import type { LoginFormProps } from '../types.js';
+type $$ComponentProps = LoginFormProps & DataAttributes;
 /**
  * LoginForm
  * 用户登录表单组件，搭配 primitives/compounds 使用。
  */
-declare const LoginForm: import("svelte").Component<LoginFormProps, {}, "">;
+declare const LoginForm: import("svelte").Component<$$ComponentProps, {}, "">;
 type LoginForm = ReturnType<typeof LoginForm>;
 export default LoginForm;

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

@@ -4,9 +4,9 @@
   内置多语言支持，自动跟随全局 locale。
 -->
 <script lang='ts'>
-  import type { Size } from '../../../types.js'
+  import type { DataAttributes, Size } from '../../../types.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import BareButton from '../../primitives/BareButton.svelte'
   import BareInput from '../../primitives/BareInput.svelte'
   import Progress from '../../primitives/Progress.svelte'
@@ -71,8 +71,10 @@
     oninput,
     onchange,
     oninvalid,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let showPassword = $state(false)
 
   // 容器高度（与 Input 组件一致）
@@ -146,7 +148,7 @@
   }
 </script>
 
-<div class='fieldset w-full'>
+<div {...dataAttributes} class='fieldset w-full'>
   <!-- 输入框容器 -->
   <div class={cn(
     'flex items-center w-full rounded-lg border bg-base-100',

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

@@ -1,4 +1,4 @@
-import type { Size } from '../../../types.js';
+import type { DataAttributes, Size } from '../../../types.js';
 interface Props {
     /** 元素 ID */
     id?: string;
@@ -41,11 +41,12 @@ interface Props {
         currentTarget: HTMLInputElement;
     }) => void;
 }
+type $$ComponentProps = Props & DataAttributes;
 /**
  * PasswordInput
  * 密码输入框组件，支持显示/隐藏切换和密码强度指示。
  * 内置多语言支持，自动跟随全局 locale。
  */
-declare const PasswordInput: import("svelte").Component<Props, {}, "value" | "inputRef">;
+declare const PasswordInput: import("svelte").Component<$$ComponentProps, {}, "value" | "inputRef">;
 type PasswordInput = ReturnType<typeof PasswordInput>;
 export default PasswordInput;

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

@@ -3,10 +3,10 @@
   用户注册表单组件，搭配 primitives/compounds 使用。
 -->
 <script lang='ts'>
-  import type { InputProps } from '../../../types.js'
+  import type { DataAttributes, InputProps } from '../../../types.js'
   import type { RegisterField, RegisterFormData, RegisterFormProps } 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 Input from '../../primitives/Input.svelte'
@@ -29,8 +29,10 @@
     onsubmit,
     header,
     footer,
-  }: RegisterFormProps = $props()
+    ...restProps
+  }: RegisterFormProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const hasAgreements = $derived(
     !!(agreements?.userAgreementUrl || agreements?.privacyPolicyUrl),
   )
@@ -159,7 +161,7 @@
   }
 </script>
 
-<form class={formClass} onsubmit={handleSubmit}>
+<form {...dataAttributes} class={formClass} onsubmit={handleSubmit}>
   <!-- 标题 -->
   {#if showTitle}
     <h2 class='text-xl font-semibold text-center mb-5'>{uiM('register_title')}</h2>

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

@@ -1,8 +1,10 @@
+import type { DataAttributes } from '../../../types.js';
 import type { RegisterFormProps } from '../types.js';
+type $$ComponentProps = RegisterFormProps & DataAttributes;
 /**
  * RegisterForm
  * 用户注册表单组件，搭配 primitives/compounds 使用。
  */
-declare const RegisterForm: import("svelte").Component<RegisterFormProps, {}, "">;
+declare const RegisterForm: import("svelte").Component<$$ComponentProps, {}, "">;
 type RegisterForm = ReturnType<typeof RegisterForm>;
 export default RegisterForm;

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

@@ -3,9 +3,10 @@
   重置密码表单组件（配合验证码/链接使用）。
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { ResetPasswordFormData, ResetPasswordFormProps } 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 Input from '../../primitives/Input.svelte'
@@ -26,8 +27,10 @@
     class: className = '',
     errors = {},
     onsubmit,
-  }: ResetPasswordFormProps = $props()
+    ...restProps
+  }: ResetPasswordFormProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let code = $state('')
   let newPassword = $state('')
   let confirmPassword = $state('')
@@ -65,7 +68,7 @@
   }
 </script>
 
-<form class={formClass} onsubmit={handleSubmit}>
+<form {...dataAttributes} class={formClass} onsubmit={handleSubmit}>
   <!-- 标题 -->
   {#if showTitle}
     <h2 class='text-xl font-semibold text-center mb-4'>{uiM('reset_password_title')}</h2>

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

@@ -1,8 +1,10 @@
+import type { DataAttributes } from '../../../types.js';
 import type { ResetPasswordFormProps } from '../types.js';
+type $$ComponentProps = ResetPasswordFormProps & DataAttributes;
 /**
  * ResetPasswordForm
  * 重置密码表单组件（配合验证码/链接使用）。
  */
-declare const ResetPasswordForm: import("svelte").Component<ResetPasswordFormProps, {}, "">;
+declare const ResetPasswordForm: import("svelte").Component<$$ComponentProps, {}, "">;
 type ResetPasswordForm = ReturnType<typeof ResetPasswordForm>;
 export default ResetPasswordForm;

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

@@ -9,9 +9,10 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { UserProfileField, UserProfileProps, UserProfileSubmitData } 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 Avatar from '../../primitives/Avatar.svelte'
   import BareInput from '../../primitives/BareInput.svelte'
@@ -29,8 +30,10 @@
     errors = {},
     onsubmit,
     onavatarchange,
-  }: UserProfileProps = $props()
+    ...restProps
+  }: UserProfileProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let editMode = $state(false)
   let formData = $state<UserProfileSubmitData>({
     username: '',
@@ -149,7 +152,7 @@
   }
 </script>
 
-<div class={containerClass}>
+<div {...dataAttributes} class={containerClass}>
   <form onsubmit={handleSubmit}>
     <div class='space-y-6'>
       {#each fields as field (field)}

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

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

package/dist/components/scenes/storage/AvatarUpload.svelte

@@ -8,9 +8,10 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { AvatarUploadProps } from '../types.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import BareInput from '../../primitives/BareInput.svelte'
 
   const SAFE_HTTP_URL_REGEX = /^https?:\/\//i
@@ -29,8 +30,10 @@
     class: className = '',
     onchange,
     onerror,
-  }: AvatarUploadProps = $props()
+    ...restProps
+  }: AvatarUploadProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let loading = $state(false)
   let inputElement = $state<HTMLInputElement | undefined>(undefined)
   let localPreviewUrl: string | null = $state(null)
@@ -216,12 +219,12 @@
   }
 </script>
 
-<div
-  class={containerClass}
-  role='button'
-  tabindex='0'
-  onclick={handleClick}
-  onkeydown={e => e.key === 'Enter' && handleClick()}
+<div {...dataAttributes}
+     class={containerClass}
+     role='button'
+     tabindex='0'
+     onclick={handleClick}
+     onkeydown={e => e.key === 'Enter' && handleClick()}
 >
   <BareInput
     type='file'

package/dist/components/scenes/storage/AvatarUpload.svelte.d.ts

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

package/dist/components/scenes/storage/FileList.svelte

@@ -8,9 +8,10 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { FileItem, FileListProps } from '../types.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import Button from '../../primitives/Button.svelte'
   import IconButton from '../../primitives/IconButton.svelte'
 
@@ -27,8 +28,10 @@
     ondownload,
     ondelete,
     onpreview,
-  }: FileListProps = $props()
+    ...restProps
+  }: FileListProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let previewFile = $state<FileItem | null>(null)
 
   const containerClass = $derived(
@@ -109,7 +112,7 @@
 </script>
 
 {#if loading}
-  <div class='flex justify-center py-8'>
+  <div {...dataAttributes} class='flex justify-center py-8'>
     <span class='loading loading-spinner loading-lg'></span>
   </div>
 {:else if files.length === 0}

package/dist/components/scenes/storage/FileList.svelte.d.ts

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

package/dist/components/scenes/storage/FileUpload.svelte

@@ -9,10 +9,11 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { FileUploadProps, UploadFile } from '../types.js'
   import { SvelteMap } from 'svelte/reactivity'
   import { uiM } from '../../../messages.js'
-  import { cn, generateId } from '../../../utils.js'
+  import { cn, generateId, getDataAttributes } from '../../../utils.js'
   import BareInput from '../../primitives/BareInput.svelte'
   import IconButton from '../../primitives/IconButton.svelte'
   import Progress from '../../primitives/Progress.svelte'
@@ -37,8 +38,10 @@
     onupload,
     onerror,
     onremove,
-  }: FileUploadProps = $props()
+    ...restProps
+  }: FileUploadProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let files = $state<UploadFile[]>([])
   let isDragging = $state(false)
   let inputElement = $state<HTMLInputElement | undefined>(undefined)
@@ -361,7 +364,7 @@
   }
 </script>
 
-<div class={containerClass}>
+<div {...dataAttributes} class={containerClass}>
   <!-- 上传区域 -->
   <div
     class={dropzoneClass}

package/dist/components/scenes/storage/FileUpload.svelte.d.ts

@@ -1,5 +1,7 @@
+import type { DataAttributes } from '../../../types.js';
 import type { FileUploadProps } from '../types.js';
-declare const FileUpload: import("svelte").Component<FileUploadProps, {
+type $$ComponentProps = FileUploadProps & DataAttributes;
+declare const FileUpload: import("svelte").Component<$$ComponentProps, {
     upload: () => Promise<void>;
     clear: () => void;
 }, "">;

package/dist/components/scenes/storage/ImageUpload.svelte

@@ -9,9 +9,10 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { ImageUploadProps } from '../types.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import BareInput from '../../primitives/BareInput.svelte'
   import IconButton from '../../primitives/IconButton.svelte'
   import Spinner from '../../primitives/Spinner.svelte'
@@ -33,8 +34,10 @@
     class: className = '',
     onchange,
     onerror,
-  }: ImageUploadProps = $props()
+    ...restProps
+  }: ImageUploadProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let loading = $state(false)
   let inputElement = $state<HTMLInputElement | undefined>(undefined)
   let previewUrl = $derived(value)
@@ -205,13 +208,13 @@
   }
 </script>
 
-<div
-  class={containerClass}
-  style={containerStyle}
-  role='button'
-  tabindex='0'
-  onclick={handleClick}
-  onkeydown={e => e.key === 'Enter' && handleClick()}
+<div {...dataAttributes}
+     class={containerClass}
+     style={containerStyle}
+     role='button'
+     tabindex='0'
+     onclick={handleClick}
+     onkeydown={e => e.key === 'Enter' && handleClick()}
 >
   <BareInput
     type='file'

package/dist/components/scenes/storage/ImageUpload.svelte.d.ts

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