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

package/dist/components/primitives/ToggleInput.svelte.d.ts

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

package/dist/components/primitives/ToggleRadio.svelte

@@ -8,7 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { ToggleRadioProps } from '../../types.js'
+  import type { DataAttributes, ToggleRadioProps } from '../../types.js'
+  import { getDataAttributes } from '../../utils.js'
 
   let {
     checked = $bindable(false),
@@ -17,20 +18,22 @@
     disabled = false,
     class: className = '',
     onchange,
-  }: ToggleRadioProps = $props()
+    ...restProps
+  }: ToggleRadioProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
     checked = e.currentTarget.checked
     onchange?.(checked)
   }
 </script>
 
-<input
-  {id}
-  {name}
-  type='radio'
-  class={className}
-  {disabled}
-  checked={checked}
-  onchange={handleChange}
+<input {...dataAttributes}
+       {id}
+       {name}
+       type='radio'
+       class={className}
+       {disabled}
+       checked={checked}
+       onchange={handleChange}
 />

package/dist/components/primitives/ToggleRadio.svelte.d.ts

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

package/dist/components/scenes/ai/AiDocumentDownloadMenu.svelte

@@ -1,10 +1,11 @@
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type {
     MarkdownSourceKind,
     MarkdownToolbarDownloadAction,
   } from './document-types.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import {
     downloadAiDocument,
     resolveDocumentDownloadActions,
@@ -62,8 +63,10 @@
     triggerClass = '',
     menuClass = '',
     itemClass = '',
-  }: AiDocumentDownloadMenuProps = $props()
+    ...restProps
+  }: AiDocumentDownloadMenuProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   // menuWrapEl 只负责识别外部点击，以便菜单展开后能自然收起。
   let menuWrapEl: HTMLDivElement | undefined = $state()
   // open 由组件内部维护，左右两侧可以直接复用，不需要额外再托管弹层状态。
@@ -118,9 +121,9 @@
   }
 </script>
 
-<div
-  bind:this={menuWrapEl}
-  class={cn('hai-ai-download-menu', className)}
+<div {...dataAttributes}
+     bind:this={menuWrapEl}
+     class={cn('hai-ai-download-menu', className)}
 >
   <button
     type='button'

package/dist/components/scenes/ai/AiDocumentDownloadMenu.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../../types.js';
 import type { MarkdownSourceKind, MarkdownToolbarDownloadAction } from './document-types.js';
 interface AiDocumentDownloadMenuProps {
     /** 触发下载时导出的原始内容。 */
@@ -33,6 +34,7 @@ interface AiDocumentDownloadMenuProps {
     /** 菜单项自定义类名。 */
     itemClass?: string;
 }
-declare const AiDocumentDownloadMenu: import("svelte").Component<AiDocumentDownloadMenuProps, {}, "">;
+type $$ComponentProps = AiDocumentDownloadMenuProps & DataAttributes;
+declare const AiDocumentDownloadMenu: import("svelte").Component<$$ComponentProps, {}, "">;
 type AiDocumentDownloadMenu = ReturnType<typeof AiDocumentDownloadMenu>;
 export default AiDocumentDownloadMenu;

package/dist/components/scenes/ai/AiDocumentEditor.svelte

@@ -11,6 +11,7 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type {
     AiDocumentEditorProps,
     MarkdownBlockFormatKind,
@@ -27,7 +28,7 @@
   import { tick } from 'svelte'
   import { writeTextToClipboard } from '../../../internal/browser-safety.js'
   import { uiM } from '../../../messages.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import AiDocumentDownloadMenu from './AiDocumentDownloadMenu.svelte'
   import {
     createBuiltInCodePreview,
@@ -319,8 +320,10 @@
     oncopyselection,
     // 选区注释回调。
     onannotation,
-  }: AiDocumentEditorProps = $props()
+    ...restProps
+  }: AiDocumentEditorProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   // outlineCollapsedInitialized 用来把 `initialOutlineCollapsed` 只消费一次，避免用户手动展开后又被 props 回写覆盖。
   let outlineCollapsedInitialized = $state(false)
   // 当前目录是否折叠。
@@ -2340,7 +2343,7 @@
   }
 </script>
 
-<section class={cn('hai-ai-doc-pane', className)}>
+<section {...dataAttributes} class={cn('hai-ai-doc-pane', className)}>
   <div class='hai-ai-doc-shell'>
     {#if showToolbar}
       <header class='hai-ai-doc-topbar'>

package/dist/components/scenes/ai/AiDocumentEditor.svelte.d.ts

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

package/dist/components/scenes/ai/MarkdownRenderer.svelte

@@ -16,9 +16,10 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import type { MarkdownRendererProps } from '../types.js'
   import { writeTextToClipboard } from '../../../internal/browser-safety.js'
-  import { cn } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import { parseMarkdown } from './markdown-parse.js'
 
   const {
@@ -27,8 +28,10 @@
     showCopyButton = true,
     enableHighlight = true,
     breaks = true,
-  }: MarkdownRendererProps = $props()
+    ...restProps
+  }: MarkdownRendererProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   /** 解析后的 HTML */
   const html = $derived(
     parseMarkdown(content, { enableHighlight, showCopyButton, breaks }),
@@ -62,11 +65,9 @@
   }
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  class={cn('hai-markdown', className)}
-  onclick={handleClick}
+<div {...dataAttributes}
+     class={cn('hai-markdown', className)}
+     onclick={handleClick}
 >
   <!-- eslint-disable-next-line svelte/no-at-html-tags -- Markdown HTML 渲染 -->
   {@html html}

package/dist/components/scenes/ai/MarkdownRenderer.svelte.d.ts

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

package/dist/components/scenes/ai/document-types.d.ts

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../../types.js';
 /**
  * Markdown source type, used to distinguish plain markdown, document panel, or code-only rendering.
  */
@@ -126,7 +127,7 @@ export interface MarkdownToolbarDownloadAction {
 type BivariantCallback<Args extends unknown[], Return = void> = {
     bivarianceHack: (...args: Args) => Return;
 }['bivarianceHack'];
-export interface AiDocumentEditorProps {
+export interface AiDocumentEditorProps extends DataAttributes {
     /** Markdown source content. */
     content?: string;
     /** Document title displayed in the header. */

package/dist/components/scenes/ai/table/AiTableEditor.svelte

@@ -12,6 +12,7 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../../types.js'
   import type { MarkdownToolbarDownloadAction } from '../document-types.js'
   import type {
     AiTableColumn,
@@ -23,7 +24,7 @@
   } from './table-types.js'
   import { SvelteSet } from 'svelte/reactivity'
   import { uiM } from '../../../../messages.js'
-  import { cn } from '../../../../utils.js'
+  import { cn, getDataAttributes } from '../../../../utils.js'
   import AiDocumentDownloadMenu from '../AiDocumentDownloadMenu.svelte'
 
   interface ExtractedArrayChunk {
@@ -92,8 +93,10 @@
     oncopytable,
     // 表格下载回调。
     ondownloadtable,
-  }: AiTableEditorProps = $props()
+    ...restProps
+  }: AiTableEditorProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   // 复制反馈只影响右上角复制按钮，不和业务数据混用。
   let copied = $state(false)
   // 连续复制时按最后一次点击重新计时。
@@ -1029,7 +1032,7 @@
   }
 </script>
 
-<section class={tablePaneClass}>
+<section {...dataAttributes} class={tablePaneClass}>
   <header class='hai-ai-table-header'>
     <div class='hai-ai-table-heading'>
       <div class='hai-ai-table-eyebrow'>

package/dist/components/scenes/ai/table/AiTableEditor.svelte.d.ts

@@ -1,5 +1,7 @@
+import type { DataAttributes } from '../../../../types.js';
 import type { AiTableEditorProps } from './table-types.js';
-declare const AiTableEditor: import("svelte").Component<AiTableEditorProps, {
+type $$ComponentProps = AiTableEditorProps & DataAttributes;
+declare const AiTableEditor: import("svelte").Component<$$ComponentProps, {
     flushPendingTableChange: () => void;
 }, "editorScrollHost">;
 type AiTableEditor = ReturnType<typeof AiTableEditor>;

package/dist/components/scenes/ai/table/table-types.d.ts

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../../../types.js';
 /**
  * 表格列支持的数据类型。
  * - `text`: 普通文本输入
@@ -67,7 +68,7 @@ export interface AiTableDownloadPayload {
     /** 推荐文件名（已带 `.csv` 后缀）。 */
     filename: string;
 }
-export interface AiTableEditorProps {
+export interface AiTableEditorProps extends DataAttributes {
     /** 原始表格内容字符串，通常是 JSON 文本，支持流式残缺片段。 */
     content?: string;
     /** 结构化表格数据；有值时优先于 `content`。 */

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

@@ -47,7 +47,9 @@
     }
   }
 
+  import type { DataAttributes } from '../../../types.js'
   import { uiM } from '../../../messages.js'
+  import { getDataAttributes } from '../../../utils.js'
 
   interface Props {
     open?: boolean
@@ -55,8 +57,9 @@
     onsubmit?: (data: FeedbackData) => Promise<void>
   }
 
-  let { open = $bindable(false), labels = {}, onsubmit }: Props = $props()
+  let { open = $bindable(false), labels = {}, onsubmit, ...restProps }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   // 文案优先使用传入的 labels，缺省回退到内置消息 uiM(...)
 
   let feedbackType = $state<FeedbackType>('bug')
@@ -106,7 +109,7 @@
   }
 </script>
 
-<Modal bind:open title={labels.title ?? uiM('feedback_title')}>
+<Modal {...dataAttributes} bind:open title={labels.title ?? uiM('feedback_title')}>
   <p class='text-base-content/70 mb-4'>{labels.description ?? uiM('feedback_description')}</p>
 
   {#if error}

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

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../../types.js';
 type FeedbackType = 'bug' | 'feature' | 'question' | 'other';
 interface FeedbackData {
     type: FeedbackType;
@@ -29,6 +30,7 @@ interface Props {
     labels?: FeedbackLabels;
     onsubmit?: (data: FeedbackData) => Promise<void>;
 }
+type $$ComponentProps = Props & DataAttributes;
 /**
  * FeedbackModal
  * 用户反馈模态框，支持 Bug 报告、功能建议等多种反馈类型。
@@ -42,6 +44,6 @@ interface Props {
  *   onsubmit={async (data) => { await submitFeedback(data) }}
  * />
  */
-declare const FeedbackModal: import("svelte").Component<Props, {}, "open">;
+declare const FeedbackModal: import("svelte").Component<$$ComponentProps, {}, "open">;
 type FeedbackModal = ReturnType<typeof FeedbackModal>;
 export default FeedbackModal;

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

@@ -29,7 +29,9 @@
   ```
 -->
 <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'
 
   interface Language {
@@ -63,8 +65,10 @@
     align = 'end',
     compact = false,
     class: className = '',
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let open = $state(false)
   let containerRef = $state<HTMLDivElement | null>(null)
 
@@ -94,7 +98,7 @@
   })
 </script>
 
-<div bind:this={containerRef} class='dropdown {align === 'end' ? 'dropdown-end' : ''} {open ? 'dropdown-open' : ''} {className}'>
+<div {...dataAttributes} bind:this={containerRef} class='dropdown {align === 'end' ? 'dropdown-end' : ''} {open ? 'dropdown-open' : ''} {className}'>
   <BareButton
     type='button'
     class='btn btn-ghost {compact ? 'btn-sm btn-square' : 'btn-sm gap-2 min-w-fit'}'

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

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../../types.js';
 interface Language {
     value: string;
     label: string;
@@ -17,6 +18,7 @@ interface Props {
     /** 自定义类名 */
     class?: string;
 }
+type $$ComponentProps = Props & DataAttributes;
 /**
  * LanguageSwitch
  * 语言切换下拉组件，支持多语言切换。
@@ -47,6 +49,6 @@ interface Props {
  * />
  * ```
  */
-declare const LanguageSwitch: import("svelte").Component<Props, {}, "">;
+declare const LanguageSwitch: import("svelte").Component<$$ComponentProps, {}, "">;
 type LanguageSwitch = ReturnType<typeof LanguageSwitch>;
 export default LanguageSwitch;

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

@@ -20,7 +20,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'
   import BareButton from '../../primitives/BareButton.svelte'
 
   type SettingsSection = {
@@ -40,6 +41,7 @@
     children,
     headerActions,
     class: className = '',
+    ...restProps
   }: {
     title?: string
     description?: string
@@ -49,8 +51,9 @@
     children?: Snippet
     headerActions?: Snippet
     class?: string
-  } = $props()
+  } & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   function navItemClass(id: string): string {
     return cn(
       'flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
@@ -61,7 +64,7 @@
   }
 </script>
 
-<div class={cn('space-y-5', className)}>
+<div {...dataAttributes} class={cn('space-y-5', className)}>
   <!-- 标题区 -->
   {#if title || description || headerActions}
     <div class='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { DataAttributes } from '../../../types.js';
 type SettingsSection = {
     id: string;
     label: string;
@@ -15,7 +16,7 @@ type $$ComponentProps = {
     children?: Snippet;
     headerActions?: Snippet;
     class?: string;
-};
+} & DataAttributes;
 /**
  * SettingsLayout
  * 设置页布局场景组件

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

@@ -10,7 +10,9 @@
   @prop {function} onthemechange - 主题变更回调
 -->
 <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 IconButton from '../../primitives/IconButton.svelte'
 
@@ -43,8 +45,10 @@
     onlanguagechange,
     onthemechange,
     onclose,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   function handleClose() {
     open = false
     onclose?.()
@@ -66,9 +70,8 @@
 <svelte:window onkeydown={handleKeydown} />
 
 {#if open}
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
+    {...dataAttributes}
     class='fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-opacity'
     onclick={handleBackdropClick}
   >

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

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../../types.js';
 interface Props {
     open?: boolean;
     currentLanguage?: string;
@@ -15,6 +16,7 @@ interface Props {
     onthemechange?: (theme: string) => void;
     onclose?: () => void;
 }
+type $$ComponentProps = Props & DataAttributes;
 /**
  * SettingsModal
  * 应用设置模态框，包含语言和主题切换功能。
@@ -26,6 +28,6 @@ interface Props {
  * @prop {function} onlanguagechange - 语言变更回调
  * @prop {function} onthemechange - 主题变更回调
  */
-declare const SettingsModal: import("svelte").Component<Props, {}, "open">;
+declare const SettingsModal: import("svelte").Component<$$ComponentProps, {}, "open">;
 type SettingsModal = ReturnType<typeof SettingsModal>;
 export default SettingsModal;

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;