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

package/README.md

@@ -94,6 +94,18 @@ export default defineConfig({
 
 > 除 `toast`、类型导入与 `Range`（会和 DOM `Range` 构造器冲突）外，其余公开 Svelte 组件都可通过 `@h-ai/ui/auto-import` 自动注入。
 
+### data-* 属性透传
+
+公开 Svelte 组件支持把调用方传入的 `data-*` 属性透传到组件根节点或主交互节点，便于测试选择器、埋点和自动化标记。普通未知属性不会被透传。
+
+```svelte
+<Button data-testid='save-button' data-analytics-id='settings.save'>保存</Button>
+<Input data-testid='username-input' bind:value={username} />
+<Modal data-testid='confirm-modal' bind:open={open}>...</Modal>
+```
+
+无需再为了 `data-testid` 单独封装按钮、输入框或弹层组件。
+
 ## 组件架构
 
 组件按三层划分（primitives → compounds → scenes）：

package/dist/components/compounds/Accordion.svelte

@@ -11,8 +11,9 @@
 
 <script lang='ts'>
   import type { Snippet } from 'svelte'
+  import type { DataAttributes } from '../../types.js'
   import type { AccordionItem } from './accordion-types.js'
-  import { cn } from '../../utils.js'
+  import { cn, getDataAttributes } from '../../utils.js'
   import ToggleCheckbox from '../primitives/ToggleCheckbox.svelte'
   import ToggleRadio from '../primitives/ToggleRadio.svelte'
 
@@ -47,8 +48,10 @@
     onchange,
     class: className = '',
     children,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const groupName = `accordion-${Math.random().toString(36).slice(2, 9)}`
 
   function isExpanded(itemId: string): boolean {
@@ -103,7 +106,7 @@
   }
 </script>
 
-<div class={containerClass}>
+<div {...dataAttributes} class={containerClass}>
   {#each items as item (item.id)}
     <div class={getItemClass(item)}>
       {#if multiple}

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { DataAttributes } from '../../types.js';
 import type { AccordionItem } from './accordion-types.js';
 interface Props {
     /** 折叠项数据 */
@@ -20,6 +21,7 @@ interface Props {
     /** 自定义内容渲染 */
     children?: Snippet<[AccordionItem]>;
 }
-declare const Accordion: import("svelte").Component<Props, {}, "value">;
+type $$ComponentProps = Props & DataAttributes;
+declare const Accordion: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Accordion = ReturnType<typeof Accordion>;
 export default Accordion;

package/dist/components/compounds/ActionSheet.svelte

@@ -13,8 +13,9 @@
   />
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../types.js'
   import type { ActionSheetItem } from './action-sheet-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 { ActionSheetItem }
@@ -44,8 +45,10 @@
     onselect,
     onclose,
     class: className,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   function handleSelect(id: string) {
     onselect?.(id)
     onclose?.()
@@ -54,12 +57,12 @@
 
 {#if open}
   <!-- 遮罩层 -->
-  <div
-    class='fixed inset-0 bg-black/50 z-50 transition-opacity'
-    role='button'
-    tabindex='-1'
-    onclick={onclose}
-    onkeydown={e => e.key === 'Escape' && onclose?.()}
+  <div {...dataAttributes}
+       class='fixed inset-0 bg-black/50 z-50 transition-opacity'
+       role='button'
+       tabindex='-1'
+       onclick={onclose}
+       onkeydown={e => e.key === 'Escape' && onclose?.()}
   ></div>
 
   <!-- 操作面板 -->

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

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../types.js';
 import type { ActionSheetItem } from './action-sheet-types.js';
 interface Props {
     /** 是否显示 */
@@ -15,7 +16,8 @@ interface Props {
     /** 额外 CSS 类 */
     class?: string;
 }
-declare const ActionSheet: import("svelte").Component<Props, {
+type $$ComponentProps = Props & DataAttributes;
+declare const ActionSheet: import("svelte").Component<$$ComponentProps, {
     ActionSheetItem: typeof ActionSheetItem;
 }, "">;
 type ActionSheet = ReturnType<typeof ActionSheet>;

package/dist/components/compounds/Alert.svelte

@@ -3,9 +3,9 @@
   警告框组件，使用 tabler icon 替代 emoji，更精致。
 -->
 <script lang='ts'>
-  import type { AlertProps } from '../../types.js'
+  import type { AlertProps, DataAttributes } from '../../types.js'
   import { uiM } from '../../messages.js'
-  import { cn, getAlertVariantClass } from '../../utils.js'
+  import { cn, getAlertVariantClass, getDataAttributes } from '../../utils.js'
   import IconButton from '../primitives/IconButton.svelte'
 
   const {
@@ -15,8 +15,10 @@
     class: className = '',
     onclose,
     children,
-  }: AlertProps = $props()
+    ...restProps
+  }: AlertProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let visible = $state(true)
 
   const alertClass = $derived(
@@ -42,7 +44,7 @@
 </script>
 
 {#if visible}
-  <div class={alertClass} role='alert'>
+  <div {...dataAttributes} class={alertClass} role='alert'>
     <span class='{iconMap[variant] ?? iconMap.info} size-5 shrink-0'></span>
 
     <div>

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

@@ -1,8 +1,9 @@
-import type { AlertProps } from '../../types.js';
+import type { AlertProps, DataAttributes } from '../../types.js';
+type $$ComponentProps = AlertProps & DataAttributes;
 /**
  * Alert
  * 警告框组件，使用 tabler icon 替代 emoji，更精致。
  */
-declare const Alert: import("svelte").Component<AlertProps, {}, "">;
+declare const Alert: import("svelte").Component<$$ComponentProps, {}, "">;
 type Alert = ReturnType<typeof Alert>;
 export default Alert;

package/dist/components/compounds/AppBar.svelte

@@ -9,7 +9,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 {
     /** 标题文本 */
@@ -36,16 +37,19 @@
     leading,
     trailing,
     children,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
+
+  const dataAttributes = $derived(getDataAttributes(restProps))
 </script>
 
-<header
-  class={cn(
-    'flex items-center h-14 px-4 bg-base-100 border-b border-base-200',
-    safeArea && 'hai-safe-top',
-    fixed && 'fixed top-0 left-0 right-0 z-40',
-    className,
-  )}
+<header {...dataAttributes}
+        class={cn(
+          'flex items-center h-14 px-4 bg-base-100 border-b border-base-200',
+          safeArea && 'hai-safe-top',
+          fixed && 'fixed top-0 left-0 right-0 z-40',
+          className,
+        )}
 >
   <!-- 左侧 -->
   <div class='flex items-center min-w-[48px]'>

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { DataAttributes } from '../../types.js';
 interface Props {
     /** 标题文本 */
     title?: string;
@@ -15,6 +16,7 @@ interface Props {
     /** 自定义标题区域 */
     children?: Snippet;
 }
-declare const AppBar: import("svelte").Component<Props, {}, "">;
+type $$ComponentProps = Props & DataAttributes;
+declare const AppBar: import("svelte").Component<$$ComponentProps, {}, "">;
 type AppBar = ReturnType<typeof AppBar>;
 export default AppBar;

package/dist/components/compounds/BottomNav.svelte

@@ -5,8 +5,9 @@
   <BottomNav items={navItems} active="home" onchange={(id) => goto(`/${id}`)} />
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../types.js'
   import type { BottomNavItem } from './bottom-nav-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 { BottomNavItem }
@@ -46,19 +47,21 @@
     centered = false,
     maxWidth = 'none',
     class: className,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const constrained = $derived(centered && maxWidth !== 'none')
 </script>
 
-<nav
-  class={cn(
-    'fixed bottom-0 bg-base-100 border-t border-base-200 z-40',
-    constrained ? 'left-1/2 right-auto w-full -translate-x-1/2' : 'left-0 right-0',
-    constrained && MAX_WIDTH_CLASS[maxWidth],
-    safeArea && 'hai-safe-bottom',
-    className,
-  )}
+<nav {...dataAttributes}
+     class={cn(
+       'fixed bottom-0 bg-base-100 border-t border-base-200 z-40',
+       constrained ? 'left-1/2 right-auto w-full -translate-x-1/2' : 'left-0 right-0',
+       constrained && MAX_WIDTH_CLASS[maxWidth],
+       safeArea && 'hai-safe-bottom',
+       className,
+     )}
 >
   <div class='flex items-center justify-around h-14'>
     {#each items as item (item.id)}

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

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../types.js';
 import type { BottomNavItem } from './bottom-nav-types.js';
 type BottomNavMaxWidth = 'sm' | 'md' | 'lg' | 'xl' | 'none';
 interface Props {
@@ -16,7 +17,8 @@ interface Props {
     /** 额外 CSS 类 */
     class?: string;
 }
-declare const BottomNav: import("svelte").Component<Props, {
+type $$ComponentProps = Props & DataAttributes;
+declare const BottomNav: import("svelte").Component<$$ComponentProps, {
     BottomNavItem: typeof BottomNavItem;
 }, "">;
 type BottomNav = ReturnType<typeof BottomNav>;

package/dist/components/compounds/Breadcrumb.svelte

@@ -8,14 +8,16 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { BreadcrumbProps } from '../../types.js'
-  import { cn } from '../../utils.js'
+  import type { BreadcrumbProps, DataAttributes } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   const {
     items,
     class: className = '',
-  }: BreadcrumbProps = $props()
+    ...restProps
+  }: BreadcrumbProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const breadcrumbClass = $derived(
     cn(
       'breadcrumbs text-sm',
@@ -24,7 +26,7 @@
   )
 </script>
 
-<div class={breadcrumbClass}>
+<div {...dataAttributes} class={breadcrumbClass}>
   <ul>
     {#each items as item, index (item.href ?? `${item.label}:${index}`)}
       <li>

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

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

package/dist/components/compounds/Calendar.svelte

@@ -21,7 +21,9 @@
 -->
 <script lang='ts'>
   import type { DateValue } from '@internationalized/date'
+  import type { DataAttributes } from '../../types.js'
   import { Calendar as BitsCalendar } from 'bits-ui'
+  import { getDataAttributes } from '../../utils.js'
 
   interface Props {
     /** 选中日期（双向绑定） */
@@ -57,10 +59,13 @@
     readonly: isReadonly = false,
     class: className = '',
     onchange,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
+
+  const dataAttributes = $derived(getDataAttributes(restProps))
 </script>
 
-<div class={className}>
+<div {...dataAttributes} class={className}>
   <BitsCalendar.Root
     type='single'
     bind:value

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

@@ -1,4 +1,5 @@
 import type { DateValue } from '@internationalized/date';
+import type { DataAttributes } from '../../types.js';
 interface Props {
     /** 选中日期（双向绑定） */
     value?: DateValue;
@@ -21,6 +22,7 @@ interface Props {
     /** 日期变更回调 */
     onchange?: (value: DateValue | undefined) => void;
 }
+type $$ComponentProps = Props & DataAttributes;
 /**
  * Calendar
  * 日历组件，基于 Bits UI headless + DaisyUI 样式。
@@ -42,6 +44,6 @@ interface Props {
  * <Calendar bind:value={date} />
  * ```
  */
-declare const Calendar: import("svelte").Component<Props, {}, "value" | "placeholder">;
+declare const Calendar: import("svelte").Component<$$ComponentProps, {}, "value" | "placeholder">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

package/dist/components/compounds/Card.svelte

@@ -3,8 +3,8 @@
   卡片组件，默认使用 border 而非 shadow，更现代克制。
 -->
 <script lang='ts'>
-  import type { CardProps } from '../../types.js'
-  import { cn } from '../../utils.js'
+  import type { CardProps, DataAttributes } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   const {
     title = '',
@@ -15,8 +15,10 @@
     header,
     footer,
     children,
-  }: CardProps = $props()
+    ...restProps
+  }: CardProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const paddingMap = {
     'none': 'p-0',
     'xs': 'p-2',
@@ -54,7 +56,7 @@
   )
 </script>
 
-<div class={cardClass}>
+<div {...dataAttributes} class={cardClass}>
   <div class={bodyClass}>
     {#if header}
       <div class='card-title text-sm font-semibold'>

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

@@ -1,8 +1,9 @@
-import type { CardProps } from '../../types.js';
+import type { CardProps, DataAttributes } from '../../types.js';
+type $$ComponentProps = CardProps & DataAttributes;
 /**
  * Card
  * 卡片组件，默认使用 border 而非 shadow，更现代克制。
  */
-declare const Card: import("svelte").Component<CardProps, {}, "">;
+declare const Card: import("svelte").Component<$$ComponentProps, {}, "">;
 type Card = ReturnType<typeof Card>;
 export default Card;

package/dist/components/compounds/Combobox.svelte

@@ -33,8 +33,10 @@
   />
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../types.js'
   import { Combobox } from 'bits-ui'
   import { uiM } from '../../messages.js'
+  import { getDataAttributes } from '../../utils.js'
   import BareButton from '../primitives/BareButton.svelte'
 
   /** 选项定义 */
@@ -80,8 +82,10 @@
     label: fieldLabel,
     class: className = '',
     onchange,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   // 为未提供 value 时设置初始默认值（仅在初始化时执行一次）
   // 统一以空字符串初始化，避免在初始化阶段捕获 multiple 的初始值。
   // 多选模式会通过 multiVal 派生为 [] 传给 Combobox.Root。
@@ -159,7 +163,7 @@
   }
 </script>
 
-<div class='fieldset w-full {className}'>
+<div {...dataAttributes} class='fieldset w-full {className}'>
   {#if fieldLabel}
     <legend class='fieldset-legend font-medium'>{fieldLabel}</legend>
   {/if}

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

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../types.js';
 import { Combobox } from 'bits-ui';
 /** 选项定义 */
 interface Option {
@@ -30,6 +31,7 @@ interface Props {
     /** 值变更回调 */
     onchange?: (value: string | string[]) => void;
 }
+type $$ComponentProps = Props & DataAttributes;
 /**
  * Combobox
  * 可搜索下拉选择组件，基于 Bits UI headless + DaisyUI 样式。
@@ -64,6 +66,6 @@ interface Props {
  *   placeholder="搜索技能..."
  * />
  */
-declare const Combobox: import("svelte").Component<Props, {}, "value">;
+declare const Combobox: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Combobox = ReturnType<typeof Combobox>;
 export default Combobox;

package/dist/components/compounds/Confirm.svelte

@@ -9,9 +9,9 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { ConfirmProps } from '../../types.js'
+  import type { ConfirmProps, DataAttributes } 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'
 
   let {
@@ -25,8 +25,10 @@
     class: className = '',
     onconfirm,
     oncancel,
-  }: ConfirmProps = $props()
+    ...restProps
+  }: ConfirmProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   /** 响应式 i18n 显示值 */
   const displayTitle = $derived(title ?? uiM('confirm_title'))
   const displayMessage = $derived(message ?? uiM('confirm_message'))
@@ -61,10 +63,10 @@
   }
 </script>
 
-<dialog
-  bind:this={modalElement}
-  class={cn('modal', className)}
-  onclick={handleBackdropClick}
+<dialog {...dataAttributes}
+        bind:this={modalElement}
+        class={cn('modal', className)}
+        onclick={handleBackdropClick}
 >
   <div class='modal-box'>
     <h3 class='font-bold text-lg'>{displayTitle}</h3>

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

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

package/dist/components/compounds/DataTable.svelte

@@ -29,7 +29,9 @@
 -->
 <script lang='ts' generics='T'>
   import type { Snippet } from 'svelte'
+  import type { DataAttributes } from '../../types.js'
   import { uiM } from '../../messages.js'
+  import { getDataAttributes } from '../../utils.js'
 
   const {
     data,
@@ -45,6 +47,7 @@
     sortDir,
     onsort,
     class: className = '',
+    ...restProps
   }: {
     data: T[]
     columns: { key: keyof T | string, label: string, width?: string, align?: 'left' | 'center' | 'right', sortable?: boolean, render?: (item: T) => string }[]
@@ -62,8 +65,9 @@
     /** 排序回调；提供时为受控模式（不再对 data 做本地排序），否则组件内部对当前数据做客户端排序 */
     onsort?: (key: string, dir: 'asc' | 'desc') => void
     class?: string
-  } = $props()
+  } & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   type Column = { key: keyof T | string, label: string, width?: string, align?: 'left' | 'center' | 'right', sortable?: boolean, render?: (item: T) => string }
 
   // ─── 排序状态 ───
@@ -162,7 +166,7 @@
   }
 </script>
 
-<div class='overflow-x-auto {className}'>
+<div {...dataAttributes} class='overflow-x-auto {className}'>
   <table class={tableClass} class:table-zebra={striped}>
     <thead>
       <tr class={headerRowClass}>

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { DataAttributes } from '../../types.js';
 declare function $$render<T>(): {
     props: {
         data: T[];
@@ -24,7 +25,7 @@ declare function $$render<T>(): {
         /** 排序回调；提供时为受控模式（不再对 data 做本地排序），否则组件内部对当前数据做客户端排序 */
         onsort?: (key: string, dir: "asc" | "desc") => void;
         class?: string;
-    };
+    } & DataAttributes;
     exports: {};
     bindings: "";
     slots: {};

package/dist/components/compounds/DatePicker.svelte

@@ -22,7 +22,9 @@
 -->
 <script lang='ts'>
   import type { DateValue } from '@internationalized/date'
+  import type { DataAttributes } from '../../types.js'
   import { DatePicker as BitsDatePicker } from 'bits-ui'
+  import { getDataAttributes } from '../../utils.js'
 
   interface Props {
     /** 选中日期（双向绑定） */
@@ -55,10 +57,13 @@
     error,
     class: className = '',
     onchange,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
+
+  const dataAttributes = $derived(getDataAttributes(restProps))
 </script>
 
-<div class='fieldset w-full {className}'>
+<div {...dataAttributes} class='fieldset w-full {className}'>
   <BitsDatePicker.Root
     bind:value
     {minValue}

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

@@ -1,4 +1,5 @@
 import type { DateValue } from '@internationalized/date';
+import type { DataAttributes } from '../../types.js';
 interface Props {
     /** 选中日期（双向绑定） */
     value?: DateValue;
@@ -19,6 +20,7 @@ interface Props {
     /** 日期变更回调 */
     onchange?: (value: DateValue | undefined) => void;
 }
+type $$ComponentProps = Props & DataAttributes;
 /**
  * DatePicker
  * 日期选择器组件，基于 Bits UI headless + DaisyUI 样式。
@@ -41,6 +43,6 @@ interface Props {
  * <DatePicker bind:value={date} />
  * ```
  */
-declare const DatePicker: import("svelte").Component<Props, {}, "value">;
+declare const DatePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
 type DatePicker = ReturnType<typeof DatePicker>;
 export default DatePicker;

package/dist/components/compounds/Drawer.svelte

@@ -9,9 +9,9 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { DrawerProps } from '../../types.js'
+  import type { DataAttributes, DrawerProps } from '../../types.js'
   import { uiM } from '../../messages.js'
-  import { cn, generateId } from '../../utils.js'
+  import { cn, generateId, getDataAttributes } from '../../utils.js'
   import IconButton from '../primitives/IconButton.svelte'
   import ToggleCheckbox from '../primitives/ToggleCheckbox.svelte'
 
@@ -26,8 +26,10 @@
     class: className = '',
     onclose,
     children,
-  }: DrawerProps = $props()
+    ...restProps
+  }: DrawerProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const id = generateId('drawer')
 
   const sizeMap = {
@@ -78,7 +80,7 @@
   }
 </script>
 
-<div class={drawerClass}>
+<div {...dataAttributes} class={drawerClass}>
   <ToggleCheckbox {id} class='drawer-toggle' bind:checked={open} />
 
   <div class={sideClass}>