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

package/dist/components/compounds/Modal.svelte

@@ -3,9 +3,9 @@
   模态框组件，支持 backdrop-blur 和 scale-in 动画。
 -->
 <script lang='ts'>
-  import type { ModalProps } from '../../types.js'
+  import type { DataAttributes, ModalProps } from '../../types.js'
   import { uiM } from '../../messages.js'
-  import { cn } from '../../utils.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   let {
     open = $bindable(false),
@@ -24,11 +24,12 @@
     header,
     footer,
     children,
-  }: ModalProps = $props()
+    ...restProps
+  }: ModalProps & DataAttributes = $props()
 
-  // modalElement 持有原生 dialog 引用；
-  // 只有调用 `showModal()` 进入 top-layer 后，弹框才不会被父级布局和 overflow 裁剪。
-  let modalElement: HTMLDialogElement | undefined = $state()
+  const dataAttributes = $derived(getDataAttributes(restProps))
+  // modalElement 持有 overlay 容器引用；不再依赖原生 `<dialog>`，改用 fixed + z-index 叠加。
+  let modalElement: HTMLDivElement | undefined = $state()
 
   // 标题区仅在显式提供标题或自定义 header 时出现；
   // 仅需关闭按钮的场景改为右上角悬浮按钮，避免业务侧额外占一整行头部。
@@ -109,37 +110,17 @@
     }
   }
 
-  function handleDialogCancel(event: Event) {
-    // 原生 dialog 在按下 Escape 时会先触发 cancel；
-    // 这里统一接管关闭逻辑，避免浏览器直接 close 后跳过组件自己的 onclose 回调。
-    event.preventDefault()
-    if (closeOnEscape) {
-      handleClose()
-    }
-  }
-
-  $effect(() => {
-    if (!modalElement) {
-      return
-    }
-
-    if (open) {
-      if (!modalElement.open) {
-        modalElement.showModal()
-      }
-      return
-    }
-
-    if (modalElement.open) {
-      modalElement.close()
-    }
-  })
 </script>
 
-<dialog
-  bind:this={modalElement}
-  class='hai-modal'
-  oncancel={handleDialogCancel}
+<div {...dataAttributes}
+     bind:this={modalElement}
+     class='hai-modal'
+     style:display={open ? '' : 'none'}
+     aria-hidden={open ? undefined : 'true'}
+     onkeydown={(e) => {
+       if (closeOnEscape && e.key === 'Escape')
+         handleClose()
+     }}
 >
   <div
     class='hai-modal__viewport'
@@ -221,11 +202,10 @@
       {/if}
     </div>
   </div>
-</dialog>
+</div>
 
 <style>
-  dialog.hai-modal,
-  dialog.hai-modal:modal {
+  .hai-modal {
     margin: 0;
     padding: 0;
     border: 0;
@@ -235,17 +215,23 @@
     box-sizing: border-box;
   }
 
+  .hai-modal {
+    position: fixed;
+    inset: 0;
+    z-index: var(--hai-z-modal, 1100);
+    display: block;
+    pointer-events: none;
+  }
+
   .hai-modal__viewport {
     position: fixed;
     inset: 0;
     display: grid;
     place-items: center;
     padding: clamp(1rem, 2.6vw, 2rem);
-  }
-
-  dialog.hai-modal::backdrop {
+    pointer-events: auto;
     background: rgb(15 23 42 / 0.26);
-    background: color-mix(in srgb, var(--color-base-content) 22%, transparent);
+    background: color-mix(in srgb, var(--color-base-content) 15%, transparent);
     backdrop-filter: blur(2px);
   }
 
@@ -371,7 +357,7 @@
   }
 
   @media (max-width: 768px) {
-    dialog.hai-modal {
+    .hai-modal {
       padding: 0.85rem;
     }
 

package/dist/components/compounds/Modal.svelte.d.ts

@@ -1,8 +1,9 @@
-import type { ModalProps } from '../../types.js';
+import type { DataAttributes, ModalProps } from '../../types.js';
+type $$ComponentProps = ModalProps & DataAttributes;
 /**
  * Modal
  * 模态框组件，支持 backdrop-blur 和 scale-in 动画。
  */
-declare const Modal: import("svelte").Component<ModalProps, {}, "open">;
+declare const Modal: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/dist/components/compounds/PageHeader.svelte

@@ -18,6 +18,8 @@
 -->
 <script lang='ts'>
   import type { Snippet } from 'svelte'
+  import type { DataAttributes } from '../../types.js'
+  import { getDataAttributes } from '../../utils.js'
 
   interface Props {
     title: string
@@ -26,10 +28,12 @@
     class?: string
   }
 
-  const { title, description, actions, class: className = '' }: Props = $props()
+  const { title, description, actions, class: className = '', ...restProps }: Props & DataAttributes = $props()
+
+  const dataAttributes = $derived(getDataAttributes(restProps))
 </script>
 
-<div class='flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-5 {className}'>
+<div {...dataAttributes} class='flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-5 {className}'>
   <div>
     <h1 class='text-xl font-semibold tracking-tight'>{title}</h1>
     {#if description}

package/dist/components/compounds/PageHeader.svelte.d.ts

@@ -1,10 +1,12 @@
 import type { Snippet } from 'svelte';
+import type { DataAttributes } from '../../types.js';
 interface Props {
     title: string;
     description?: string;
     actions?: Snippet;
     class?: string;
 }
+type $$ComponentProps = Props & DataAttributes;
 /**
  * PageHeader
  * 页面头部组件，包含标题、描述和操作按钮区域。
@@ -23,6 +25,6 @@ interface Props {
  *   {/snippet}
  * </PageHeader>
  */
-declare const PageHeader: import("svelte").Component<Props, {}, "">;
+declare const PageHeader: import("svelte").Component<$$ComponentProps, {}, "">;
 type PageHeader = ReturnType<typeof PageHeader>;
 export default PageHeader;

package/dist/components/compounds/Pagination.svelte

@@ -8,9 +8,9 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { PaginationProps } from '../../types.js'
+  import type { DataAttributes, PaginationProps } 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 Input from '../primitives/Input.svelte'
@@ -29,8 +29,10 @@
     class: className = '',
     onchange,
     onpagesizechange,
-  }: PaginationProps = $props()
+    ...restProps
+  }: PaginationProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   // labels 优先，缺省回退到内置消息 uiM(...)
 
   // 计算总页数（至少 1 页，保证分页栏在空数据时仍可渲染）
@@ -86,7 +88,7 @@
   )
 </script>
 
-<div class={cn('flex flex-wrap items-center justify-between gap-4', className)}>
+<div {...dataAttributes} class={cn('flex flex-wrap items-center justify-between gap-4', className)}>
   {#if showTotal}
     <span class={tableTextClass}>
       {(labels.total ?? uiM('pagination_total')).replace('{count}', String(total))}

package/dist/components/compounds/Pagination.svelte.d.ts

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

package/dist/components/compounds/Popover.svelte

@@ -8,8 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { PopoverProps } from '../../types.js'
-  import { cn } from '../../utils.js'
+  import type { DataAttributes, PopoverProps } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   let {
     open = $bindable(false),
@@ -21,8 +21,10 @@
     onclose,
     triggerContent,
     children,
-  }: PopoverProps = $props()
+    ...restProps
+  }: PopoverProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let triggerElement = $state<HTMLDivElement | null>(null)
   let popoverElement = $state<HTMLDivElement | null>(null)
 
@@ -95,11 +97,11 @@
   })
 </script>
 
-<div
-  class={cn('relative inline-block', className)}
-  role='group'
-  onmouseenter={handleMouseEnter}
-  onmouseleave={handleMouseLeave}
+<div {...dataAttributes}
+     class={cn('relative inline-block', className)}
+     role='group'
+     onmouseenter={handleMouseEnter}
+     onmouseleave={handleMouseLeave}
 >
   <!-- 触发器 -->
   <div

package/dist/components/compounds/Popover.svelte.d.ts

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

package/dist/components/compounds/PullRefresh.svelte

@@ -8,7 +8,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'
 
   interface Props {
     /** 刷新回调（需返回 Promise） */
@@ -29,8 +30,10 @@
     disabled = false,
     class: className,
     children,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let pulling = $state(false)
   let refreshing = $state(false)
   let pullDistance = $state(0)
@@ -71,12 +74,12 @@
   }
 </script>
 
-<div
-  class={cn('relative overflow-hidden', className)}
-  ontouchstart={handleTouchStart}
-  ontouchmove={handleTouchMove}
-  ontouchend={handleTouchEnd}
-  role='region'
+<div {...dataAttributes}
+     class={cn('relative overflow-hidden', className)}
+     ontouchstart={handleTouchStart}
+     ontouchmove={handleTouchMove}
+     ontouchend={handleTouchEnd}
+     role='region'
 >
   <!-- 刷新指示器 -->
   <div

package/dist/components/compounds/PullRefresh.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { DataAttributes } from '../../types.js';
 interface Props {
     /** 刷新回调（需返回 Promise） */
     onrefresh?: () => Promise<void>;
@@ -11,6 +12,7 @@ interface Props {
     /** 内容 */
     children: Snippet;
 }
-declare const PullRefresh: import("svelte").Component<Props, {}, "">;
+type $$ComponentProps = Props & DataAttributes;
+declare const PullRefresh: import("svelte").Component<$$ComponentProps, {}, "">;
 type PullRefresh = ReturnType<typeof PullRefresh>;
 export default PullRefresh;

package/dist/components/compounds/Result.svelte

@@ -8,8 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { ResultProps } from '../../types.js'
-  import { cn } from '../../utils.js'
+  import type { DataAttributes, ResultProps } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   const {
     status = 'info',
@@ -19,8 +19,10 @@
     icon,
     actions,
     children,
-  }: ResultProps = $props()
+    ...restProps
+  }: ResultProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const containerClass = $derived(
     cn(
       'flex flex-col items-center justify-center py-12 text-center',
@@ -36,7 +38,7 @@
   }[status])
 </script>
 
-<div class={containerClass}>
+<div {...dataAttributes} class={containerClass}>
   <!-- 图标区域 -->
   <div class='w-20 h-20 mb-6 {iconColor}'>
     {#if icon}

package/dist/components/compounds/Result.svelte.d.ts

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

package/dist/components/compounds/SafeArea.svelte

@@ -8,7 +8,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'
 
   interface Props {
     /** 安全区域位置 */
@@ -23,8 +24,10 @@
     position = 'all',
     class: className,
     children,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const positionClasses = $derived({
     top: 'hai-safe-top',
     bottom: 'hai-safe-bottom',
@@ -32,6 +35,6 @@
   }[position])
 </script>
 
-<div class={cn(positionClasses, className)}>
+<div {...dataAttributes} class={cn(positionClasses, className)}>
   {@render children()}
 </div>

package/dist/components/compounds/SafeArea.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { DataAttributes } from '../../types.js';
 interface Props {
     /** 安全区域位置 */
     position?: 'top' | 'bottom' | 'all';
@@ -7,6 +8,7 @@ interface Props {
     /** 内容 */
     children: Snippet;
 }
-declare const SafeArea: import("svelte").Component<Props, {}, "">;
+type $$ComponentProps = Props & DataAttributes;
+declare const SafeArea: import("svelte").Component<$$ComponentProps, {}, "">;
 type SafeArea = ReturnType<typeof SafeArea>;
 export default SafeArea;

package/dist/components/compounds/Skeleton.svelte

@@ -3,8 +3,8 @@
   骨架屏占位组件，用于加载状态展示。
 -->
 <script lang='ts'>
-  import type { SkeletonProps } from '../../types.js'
-  import { cn } from '../../utils.js'
+  import type { DataAttributes, SkeletonProps } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   const {
     variant = 'text',
@@ -14,8 +14,10 @@
     animation = true,
     count = 1,
     class: className = '',
-  }: SkeletonProps = $props()
+    ...restProps
+  }: SkeletonProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const baseClass = $derived(
     cn(
       'skeleton',
@@ -40,7 +42,7 @@
 </script>
 
 {#if count > 1}
-  <div class='space-y-2'>
+  <div {...dataAttributes} class='space-y-2'>
     {#each Array.from({ length: count }) as _, i (i)}
       <div class={baseClass} {style}></div>
     {/each}

package/dist/components/compounds/Skeleton.svelte.d.ts

@@ -1,8 +1,9 @@
-import type { SkeletonProps } from '../../types.js';
+import type { DataAttributes, SkeletonProps } from '../../types.js';
+type $$ComponentProps = SkeletonProps & DataAttributes;
 /**
  * Skeleton
  * 骨架屏占位组件，用于加载状态展示。
  */
-declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "">;
+declare const Skeleton: import("svelte").Component<$$ComponentProps, {}, "">;
 type Skeleton = ReturnType<typeof Skeleton>;
 export default Skeleton;

package/dist/components/compounds/Steps.svelte

@@ -8,8 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { StepsProps } from '../../types.js'
-  import { cn } from '../../utils.js'
+  import type { DataAttributes, StepsProps } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   const {
     items = [],
@@ -19,8 +19,10 @@
     clickable = false,
     class: className = '',
     onchange,
-  }: StepsProps = $props()
+    ...restProps
+  }: StepsProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const containerClass = $derived(
     cn(
       'steps',
@@ -62,7 +64,7 @@
   }
 </script>
 
-<ul class={containerClass}>
+<ul {...dataAttributes} class={containerClass}>
   {#each items as item, index (index)}
     {#if clickable}
       <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->

package/dist/components/compounds/Steps.svelte.d.ts

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

package/dist/components/compounds/SwipeCell.svelte

@@ -13,8 +13,9 @@
 -->
 <script lang='ts'>
   import type { Snippet } from 'svelte'
+  import type { DataAttributes } from '../../types.js'
   import type { SwipeCellAction } from './swipe-cell-types.js'
-  import { cn } from '../../utils.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   // eslint-disable-next-line no-import-assign -- type re-export
   export type { SwipeCellAction }
@@ -38,8 +39,10 @@
     disabled = false,
     class: className,
     children,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let offsetX = $state(0)
   let startX = 0
   let swiping = false
@@ -82,7 +85,7 @@
   }
 </script>
 
-<div class={cn('relative overflow-hidden', className)}>
+<div {...dataAttributes} class={cn('relative overflow-hidden', className)}>
   <!-- 内容层 -->
   <div
     class='relative transition-transform'

package/dist/components/compounds/SwipeCell.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { DataAttributes } from '../../types.js';
 import type { SwipeCellAction } from './swipe-cell-types.js';
 interface Props {
     /** 右侧操作列表 */
@@ -12,7 +13,8 @@ interface Props {
     /** 内容 */
     children: Snippet;
 }
-declare const SwipeCell: import("svelte").Component<Props, {
+type $$ComponentProps = Props & DataAttributes;
+declare const SwipeCell: import("svelte").Component<$$ComponentProps, {
     SwipeCellAction: typeof SwipeCellAction;
 }, "">;
 type SwipeCell = ReturnType<typeof SwipeCell>;

package/dist/components/compounds/Tabs.svelte

@@ -3,8 +3,8 @@
   标签页组件，支持 line/card/pills 三种样式。
 -->
 <script lang='ts'>
-  import type { TabsProps } from '../../types.js'
-  import { cn } from '../../utils.js'
+  import type { DataAttributes, TabsProps } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
   import BareButton from '../primitives/BareButton.svelte'
 
   let {
@@ -15,8 +15,10 @@
     class: className = '',
     onchange,
     children,
-  }: TabsProps = $props()
+    ...restProps
+  }: TabsProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   // 默认选中第一个
   $effect(() => {
     if (!active && items.length > 0) {
@@ -56,7 +58,7 @@
   }
 </script>
 
-<div role='tablist' class={tabsClass}>
+<div {...dataAttributes} role='tablist' class={tabsClass}>
   {#each items as item (item.key)}
     <BareButton
       role='tab'

package/dist/components/compounds/Tabs.svelte.d.ts

@@ -1,8 +1,9 @@
-import type { TabsProps } from '../../types.js';
+import type { DataAttributes, TabsProps } from '../../types.js';
+type $$ComponentProps = TabsProps & DataAttributes;
 /**
  * Tabs
  * 标签页组件，支持 line/card/pills 三种样式。
  */
-declare const Tabs: import("svelte").Component<TabsProps, {}, "active">;
+declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "active">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/dist/components/compounds/TagInput.svelte

@@ -8,9 +8,9 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { TagInputProps } from '../../types.js'
+  import type { DataAttributes, TagInputProps } from '../../types.js'
   import { uiM } from '../../messages.js'
-  import { cn, getInputSizeClass } from '../../utils.js'
+  import { cn, getDataAttributes, getInputSizeClass } from '../../utils.js'
   import BareInput from '../primitives/BareInput.svelte'
   import Tag from '../primitives/Tag.svelte'
 
@@ -23,8 +23,10 @@
     size = 'md',
     class: className = '',
     onchange,
-  }: TagInputProps = $props()
+    ...restProps
+  }: TagInputProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let inputValue = $state('')
   let inputElement = $state<HTMLInputElement | undefined>(undefined)
 
@@ -77,12 +79,12 @@
   }
 </script>
 
-<div
-  class={containerClass}
-  onclick={() => inputElement?.focus()}
-  onkeydown={e => e.key === 'Enter' && inputElement?.focus()}
-  role='textbox'
-  tabindex='-1'
+<div {...dataAttributes}
+     class={containerClass}
+     onclick={() => inputElement?.focus()}
+     onkeydown={e => e.key === 'Enter' && inputElement?.focus()}
+     role='textbox'
+     tabindex='-1'
 >
   {#each tags as tag, index (index)}
     <Tag

package/dist/components/compounds/TagInput.svelte.d.ts

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