@ticatec/topside-elements 1.0.0

package/docs/components/date-picker/README.md

@@ -0,0 +1,136 @@
+# DatePicker
+
+表单组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+选择单个日期的表单控件。
+
+## 适用场景
+
+- 生日、计划日期和业务发生日期
+- 需要格式化输入与日历选择
+
+## 导入
+
+```ts
+import DatePicker from '@ticatec/topside-elements/DatePicker';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 主题样式名称，用于切换组件外观主题 |
+| `tooltip` | 否 | `string` | 否 | `undefined` | 否 | 悬停提示信息，鼠标悬浮在字段上时显示 |
+| `error` | 否 | `string` | 否 | `undefined` | 否 | 错误信息，用于在字段下方展示校验错误提示 |
+| `disabled` | 是 | `boolean` | 否 | `false` | 否 | 是否禁用该字段，禁用后字段不可编辑且不响应交互 |
+| `readonly` | 是 | `boolean` | 否 | `false` | 否 | 是否只读，只读状态下字段不可编辑但可聚焦和复制 |
+| `compact` | 否 | `boolean` | 否 | `false` | 否 | 是否启用紧凑模式，紧凑模式下字段内部间距更小 |
+| `variant` | 是 | `EditorVariant` | 否 | `undefined` | 否 | 编辑器外观样式变体 |
+| `placeholder` | 是 | `string` | 否 | `undefined` | 否 | 占位提示文本，字段值为空时在输入区域内展示 |
+| `style` | 否 | `string` | 否 | `undefined` | 否 | 自定义内联样式，会应用到字段根容器上 |
+| `onfocus` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段获得焦点时触发的回调 |
+| `onblur` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段失去焦点时触发的回调 |
+| `onchange` | 是 | `(value?: any) => void` | 否 | `undefined` | 否 | 字段值发生变化时触发的回调 |
+| `clearable` | 否 | `boolean` | 否 | `undefined` | 否 | 是否允许清空（显示清空按钮），默认 true |
+| `onkeydown` | 否 | `(event: KeyboardEvent) => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `onkeyup` | 否 | `(event: KeyboardEvent) => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `onkeypress` | 否 | `(event: KeyboardEvent) => void` | 否 | `undefined` | 否 | 事件或行为回调；参数与返回值以类型签名为准。 |
+| `value` | 是 | `UniDate` | 否 | `$bindable<UniDate>()` | 是 | 组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。 |
+| `min` | 否 | `UniDate` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `max` | 否 | `UniDate` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `disabled`
+
+是否禁用该字段，禁用后字段不可编辑且不响应交互
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`disabled={false}`
+
+### `readonly`
+
+是否只读，只读状态下字段不可编辑但可聚焦和复制
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`readonly={false}`
+
+### `variant`
+
+编辑器外观样式变体
+
+- 类型：`EditorVariant`
+- 默认值：`undefined`
+- 示例写法：`variant="plain"`
+
+### `placeholder`
+
+占位提示文本，字段值为空时在输入区域内展示
+
+- 类型：`string`
+- 默认值：`undefined`
+- 示例写法：`placeholder="请输入或选择"`
+
+### `onchange`
+
+字段值发生变化时触发的回调
+
+- 类型：`(value?: any) => void`
+- 默认值：`undefined`
+- 示例写法：`onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}`
+
+### `value`
+
+组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。
+
+- 类型：`UniDate`
+- 默认值：`$bindable<UniDate>()`
+- 推荐写法：`bind:value`
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `EditorVariant`
+
+```ts
+export type EditorVariant = '' | 'plain' | 'outlined' | 'filled';
+```
+
+### `UniDate`
+
+```ts
+export type UniDate = dayjs.Dayjs | Date | string | undefined;
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import DatePicker from '@ticatec/topside-elements/DatePicker';
+  let value = $state<any>('2026-08-22');
+</script>
+
+<DatePicker
+  bind:value
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  variant="plain"
+  placeholder="请输入或选择"
+  disabled={false}
+  readonly={false}
+  compact={true}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>
+```
+
+## 源码
+
+- `src/lib/form/date_picker/DatePicker.svelte`

package/docs/components/date-picker/example.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import DatePicker from '@ticatec/topside-elements/DatePicker';
+  let value = $state<any>('2026-08-22');
+</script>
+
+<DatePicker
+  bind:value
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  variant="plain"
+  placeholder="请输入或选择"
+  disabled={false}
+  readonly={false}
+  compact={true}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>

package/docs/components/date-range/README.md

@@ -0,0 +1,122 @@
+# DateRange
+
+表单组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+同时编辑开始日期与结束日期的范围控件。
+
+## 适用场景
+
+- 报表周期、订单时间和日志筛选
+- 需要校验起止日期关系的查询条件
+
+## 导入
+
+```ts
+import DateRange from '@ticatec/topside-elements/DateRange';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `variant` | 是 | `EditorVariant` | 否 | `undefined` | 否 | 视觉样式变体，可选值：`""`(默认)、`plain`、`outlined`、`filled`；具体含义见组件说明。 |
+| `compact` | 否 | `boolean` | 否 | `false` | 否 | 启用紧凑尺寸，减少组件高度和内边距。 |
+| `disabled` | 是 | `boolean` | 否 | `false` | 否 | 禁用交互。禁用后通常不可聚焦、不可修改，也不会触发变更操作。 |
+| `readonly` | 是 | `boolean` | 否 | `false` | 否 | 只读状态。保留内容展示，但阻止用户修改。 |
+| `error` | 否 | `string` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `tooltip` | 否 | `string` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 组件主题标识，通常通过 `data-theme` 选择对应 CSS 变量。 |
+| `class` | 否 | `string` | 否 | `''` | 否 | 附加到组件根元素的 CSS class。 |
+| `style` | 否 | `string` | 否 | `''` | 否 | 附加到组件根元素的内联样式。 |
+| `fromValue` | 是 | `UniDate` | 否 | `$bindable<UniDate>()` | 是 | 范围起始值，推荐使用 `bind:fromValue`；变化时会与 `toValue` 一起校验先后关系。 |
+| `toValue` | 是 | `UniDate` | 否 | `$bindable<UniDate>()` | 是 | 范围结束值，推荐使用 `bind:toValue`；变化时会与 `fromValue` 一起校验先后关系。 |
+| `format` | 否 | `string` | 否 | `"YYYY-MM-DD"` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `min` | 否 | `string \| Date \| undefined` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `max` | 否 | `string \| Date \| undefined` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `variant`
+
+视觉样式变体，可选值：`""`(默认)、`plain`、`outlined`、`filled`；具体含义见组件说明。
+
+- 类型：`EditorVariant`
+- 默认值：`undefined`
+- 示例写法：`variant="plain"`
+
+### `disabled`
+
+禁用交互。禁用后通常不可聚焦、不可修改，也不会触发变更操作。
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`disabled={false}`
+
+### `readonly`
+
+只读状态。保留内容展示，但阻止用户修改。
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`readonly={false}`
+
+### `fromValue`
+
+范围起始值，推荐使用 `bind:fromValue`；变化时会与 `toValue` 一起校验先后关系。
+
+- 类型：`UniDate`
+- 默认值：`$bindable<UniDate>()`
+- 推荐写法：`bind:fromValue`
+
+### `toValue`
+
+范围结束值，推荐使用 `bind:toValue`；变化时会与 `fromValue` 一起校验先后关系。
+
+- 类型：`UniDate`
+- 默认值：`$bindable<UniDate>()`
+- 推荐写法：`bind:toValue`
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `EditorVariant`
+
+```ts
+export type EditorVariant = '' | 'plain' | 'outlined' | 'filled';
+```
+
+### `UniDate`
+
+```ts
+export type UniDate = dayjs.Dayjs | Date | string | undefined;
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import DateRange from '@ticatec/topside-elements/DateRange';
+  let fromValue = $state<any>();
+  let toValue = $state<any>();
+</script>
+
+<DateRange
+  bind:fromValue
+  bind:toValue
+  variant="plain"
+  compact={true}
+  disabled={false}
+  readonly={false}
+/>
+<p>当前状态：{JSON.stringify({fromValue, toValue})}</p>
+```
+
+## 源码
+
+- `src/lib/form/date_range/DateRangeEditor.svelte`

package/docs/components/date-range/example.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import DateRange from '@ticatec/topside-elements/DateRange';
+  let fromValue = $state<any>();
+  let toValue = $state<any>();
+</script>
+
+<DateRange
+  bind:fromValue
+  bind:toValue
+  variant="plain"
+  compact={true}
+  disabled={false}
+  readonly={false}
+/>
+<p>当前状态：{JSON.stringify({fromValue, toValue})}</p>

package/docs/components/date-time-picker/README.md

@@ -0,0 +1,142 @@
+# DateTimePicker
+
+表单组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+同时选择日期和具体时间的控件。
+
+## 适用场景
+
+- 预约、定时发布和任务执行时间
+- 精确到时分秒的时间点输入
+
+## 导入
+
+```ts
+import DateTimePicker from '@ticatec/topside-elements/DateTimePicker';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `theme` | 否 | `string` | 否 | `undefined` | 否 | 主题样式名称，用于切换组件外观主题 |
+| `tooltip` | 否 | `string` | 否 | `undefined` | 否 | 悬停提示信息，鼠标悬浮在字段上时显示 |
+| `error` | 否 | `string` | 否 | `undefined` | 否 | 错误信息，用于在字段下方展示校验错误提示 |
+| `disabled` | 是 | `boolean` | 否 | `false` | 否 | 是否禁用该字段，禁用后字段不可编辑且不响应交互 |
+| `readonly` | 是 | `boolean` | 否 | `false` | 否 | 是否只读，只读状态下字段不可编辑但可聚焦和复制 |
+| `compact` | 否 | `boolean` | 否 | `false` | 否 | 是否启用紧凑模式，紧凑模式下字段内部间距更小 |
+| `variant` | 是 | `EditorVariant` | 否 | `undefined` | 否 | 编辑器外观样式变体 |
+| `placeholder` | 是 | `string` | 否 | `undefined` | 否 | 占位提示文本，字段值为空时在输入区域内展示 |
+| `style` | 否 | `string` | 否 | `undefined` | 否 | 自定义内联样式，会应用到字段根容器上 |
+| `onfocus` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段获得焦点时触发的回调 |
+| `onblur` | 否 | `(event: FocusEvent) => void` | 否 | `undefined` | 否 | 字段失去焦点时触发的回调 |
+| `onchange` | 是 | `(value?: any) => void` | 否 | `undefined` | 否 | 字段值发生变化时触发的回调 |
+| `clearable` | 否 | `boolean` | 否 | `undefined` | 否 | 是否允许清空（显示清空按钮），默认 true |
+| `value` | 是 | `UniDate` | 否 | `$bindable<UniDate>()` | 是 | 组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。 |
+| `min` | 否 | `UniDate` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `max` | 否 | `UniDate` | 否 | `undefined` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `precision` | 否 | `Precision` | 否 | `"M"` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `disabled`
+
+是否禁用该字段，禁用后字段不可编辑且不响应交互
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`disabled={false}`
+
+### `readonly`
+
+是否只读，只读状态下字段不可编辑但可聚焦和复制
+
+- 类型：`boolean`
+- 默认值：`false`
+- 示例写法：`readonly={false}`
+
+### `variant`
+
+编辑器外观样式变体
+
+- 类型：`EditorVariant`
+- 默认值：`undefined`
+- 示例写法：`variant="plain"`
+
+### `placeholder`
+
+占位提示文本，字段值为空时在输入区域内展示
+
+- 类型：`string`
+- 默认值：`undefined`
+- 示例写法：`placeholder="请输入或选择"`
+
+### `onchange`
+
+字段值发生变化时触发的回调
+
+- 类型：`(value?: any) => void`
+- 默认值：`undefined`
+- 示例写法：`onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}`
+
+### `value`
+
+组件的核心值。支持绑定时建议使用 `bind:value`，外部修改会同步到组件。
+
+- 类型：`UniDate`
+- 默认值：`$bindable<UniDate>()`
+- 推荐写法：`bind:value`
+
+## 组件实例方法
+
+通过 `bind:this` 获取组件实例后调用。
+
+| 方法 | 类型 | 说明 |
+| --- | --- | --- |
+| `focus()` | `() => void` | 组件实例方法。 |
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `EditorVariant`
+
+```ts
+export type EditorVariant = '' | 'plain' | 'outlined' | 'filled';
+```
+
+### `UniDate`
+
+```ts
+export type UniDate = dayjs.Dayjs | Date | string | undefined;
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import DateTimePicker from '@ticatec/topside-elements/DateTimePicker';
+  let value = $state<any>('2026-08-22 09:30:00');
+</script>
+
+<DateTimePicker
+  bind:value
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  variant="plain"
+  placeholder="请输入或选择"
+  disabled={false}
+  readonly={false}
+  compact={true}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>
+```
+
+## 源码
+
+- `src/lib/form/date_picker/DateTimePicker.svelte`

package/docs/components/date-time-picker/example.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import DateTimePicker from '@ticatec/topside-elements/DateTimePicker';
+  let value = $state<any>('2026-08-22 09:30:00');
+</script>
+
+<DateTimePicker
+  bind:value
+  onchange={async (...args: any[]) => { console.log('onchange', ...args); return true; }}
+  onfocus={async (...args: any[]) => { console.log('onfocus', ...args); return true; }}
+  variant="plain"
+  placeholder="请输入或选择"
+  disabled={false}
+  readonly={false}
+  compact={true}
+/>
+<p>当前状态：{JSON.stringify({value})}</p>

package/docs/components/dialog/README.md

@@ -0,0 +1,181 @@
+# Dialog
+
+浮层与弹窗组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+可堆叠、可等待返回结果的业务对话框。
+
+## 适用场景
+
+- 编辑对象、选择数据和复杂确认流程
+- 需要 Promise 返回值或多个弹窗叠加
+
+## 导入
+
+```ts
+import Dialog from '@ticatec/topside-elements/Dialog';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| `title` | 是 | `string` | 是 | `—` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `width` | 否 | `string` | 否 | `'unset'` | 否 | 宽度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `height` | 否 | `string` | 否 | `'unset'` | 否 | 高度配置；字符串可以使用 px、rem、% 等 CSS 单位。 |
+| `actions` | 否 | `ButtonActions \| null` | 否 | `null` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `beforeClose` | 是 | `BeforeClose \| null` | 否 | `null` | 否 | 关闭前的否决钩子：结果为 MR_CANCEL / MR_CLOSE 时调用，返回 false 阻止关闭 |
+| `content$style` | 否 | `string` | 否 | `''` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `closable` | 否 | `boolean` | 否 | `true` | 否 | 是否允许用户不经过显式动作直接关闭：控制标题栏 X、Escape 键和自动追加的"关闭"动作。 为 false 时用户必须点击 actions 中的某个动作。 |
+| `closeText` | 否 | `string` | 否 | `i18nRes.common.btnClose()` | 否 | 自动追加的"关闭"动作的文字 |
+| `onclose` | 是 | `OnClose \| null` | 否 | `null` | 否 | 关闭后的通知回调，参数为 ModalResult |
+| `dialog$style` | 否 | `string` | 否 | `""` | 否 | 可选配置，具体取值范围和数据结构见类型列。 |
+| `children` | 是 | `Snippet` | 否 | `undefined` | 否 | Svelte Snippet 子内容，用于自定义组件主体。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 重要属性说明
+
+### `title`
+
+可选配置，具体取值范围和数据结构见类型列。
+
+- 类型：`string`
+- 默认值：`—`
+- 示例写法：`title="示例标题"`
+
+### `beforeClose`
+
+关闭前的否决钩子：结果为 MR_CANCEL / MR_CLOSE 时调用，返回 false 阻止关闭
+
+- 类型：`BeforeClose | null`
+- 默认值：`null`
+- 示例写法：参见下方完整示例中的类型化实现。
+
+### `onclose`
+
+关闭后的通知回调，参数为 ModalResult
+
+- 类型：`OnClose | null`
+- 默认值：`null`
+- 示例写法：`onclose={async (...args: any[]) => { console.log('onclose', ...args); return true; }}`
+
+### `children`
+
+Svelte Snippet 子内容，用于自定义组件主体。
+
+- 类型：`Snippet`
+- 默认值：`undefined`
+- 示例写法：`children={children}`
+
+## 组件实例方法
+
+通过 `bind:this` 获取组件实例后调用。
+
+| 方法 | 类型 | 说明 |
+| --- | --- | --- |
+| `close()` | `(result: ModalResult) => void` | 组件实例方法。 |
+
+## 相关类型定义
+
+以下定义帮助理解复杂属性的数据结构；其中部分辅助类型属于内部实现，不一定是独立导出入口。
+
+### `ButtonActions`
+
+```ts
+export type ButtonActions = Array<ButtonAction | null>;
+```
+
+### `BeforeClose`
+
+```ts
+export type BeforeClose = () => boolean | void | Promise<boolean | void>;
+```
+
+### `OnClose`
+
+```ts
+export type OnClose = (result: ModalResult) => void;
+```
+
+### `ButtonAction`
+
+```ts
+export interface ButtonAction {
+    /**
+     * 按钮的文字
+     */
+    label: string;
+
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+
+    /**
+     * 帮助信息
+     */
+    tooltip?: string;
+
+    /**
+     * 前缀图标
+     */
+    icon?: string;
+
+    /**
+     * 按钮的类型
+     */
+    type?: ButtonType;
+
+    /**
+     * click处理函数
+     */
+    handler?: OnClick;
+}
+```
+
+### `ModalResult`
+
+```ts
+export enum ModalResult {
+    MR_OK = 1,
+    MR_CANCEL = 2,
+    MR_CLOSE = 3
+}
+```
+
+### `ButtonType`
+
+```ts
+export type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
+```
+
+### `OnClick`
+
+```ts
+export type OnClick = (event: MouseEvent) => void;
+```
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import Dialog from '@ticatec/topside-elements/Dialog';
+</script>
+
+<Dialog
+  title="示例标题"
+  onclose={async (...args: any[]) => { console.log('onclose', ...args); return true; }}
+  closable={true}
+  width="240px"
+  height="48px"
+>
+  <div>在这里放置子内容</div>
+</Dialog>
+```
+
+## 源码
+
+- `src/lib/overlay/dialog/Dialog.svelte`

package/docs/components/dialog/example.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import Dialog from '@ticatec/topside-elements/Dialog';
+</script>
+
+<Dialog
+  title="示例标题"
+  onclose={async (...args: any[]) => { console.log('onclose', ...args); return true; }}
+  closable={true}
+  width="240px"
+  height="48px"
+>
+  <div>在这里放置子内容</div>
+</Dialog>

package/docs/components/dialog-board/README.md

@@ -0,0 +1,41 @@
+# DialogBoard
+
+浮层与弹窗组件。本文档由源码自动生成，类型以当前版本为准。
+
+## 简介
+
+承载全局 Dialog 堆栈的基础渲染节点。
+
+## 适用场景
+
+- 需要手动控制全局对话框挂载位置
+- 应用根部集中渲染对话框；多数项目无需直接使用
+
+## 导入
+
+```ts
+import DialogBoard from '@ticatec/topside-elements/DialogBoard';
+```
+
+## 属性
+
+| 属性 | 重要 | 类型 | 必填 | 默认值 | 可绑定/响应式 | 说明 |
+| --- | --- | --- | --- | --- | --- | --- |
+| — | — | — | — | — | — | 该入口不接受组件属性。 |
+
+> 组件的“可绑定”表示源码使用了 Svelte 5 的 `$bindable`；服务的“响应式”表示成员使用了 `$state`。复杂类型请同时参考 TypeScript 自动补全。
+
+## 示例
+
+完整示例见 [example.svelte](./example.svelte)。
+```svelte
+<script lang="ts">
+  import DialogBoard from '@ticatec/topside-elements/DialogBoard';
+</script>
+
+<DialogBoard/>
+```
+
+## 源码
+
+- `src/lib/overlay/dialog/DialogBoard.svelte`

package/docs/components/dialog-board/example.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import DialogBoard from '@ticatec/topside-elements/DialogBoard';
+</script>
+
+<DialogBoard/>