sodialog 0.1.11 → 0.1.14

package/README.md

@@ -34,6 +34,18 @@ openOffcanvas({
   animation: 'slide',
   content: '<p>这是 Offcanvas</p>',
 })
+
+// Toast
+import { toast } from 'sodialog'
+
+toast({
+  title: '保存成功',
+  content: '配置已更新',
+  placement: 'top-end',
+  variant: 'success',
+  duration: 2500,
+  maxVisible: 3,
+})
 ```
 
 ## API
@@ -50,7 +62,7 @@ openOffcanvas({
 - `animation?: 'slide' | 'fade' | 'zoom'` (默认 `fade`)
 - `useModal?: boolean` (默认 `true`，`true` 使用 `showModal()`，`false` 使用 `show()`)
 - `draggable?: boolean` (默认 `false`)
-- `dragHandle?: 'header' | 'title' | 'body' | 'panel' | string` (默认 `header`，也可传 CSS 选择器)
+- `dragHandle?: ('header' | 'title' | 'body' | 'panel' | string) | Array<'header' | 'title' | 'body' | 'panel' | string>` (默认 `header`，支持传数组开启多拖动区域，也可传 CSS 选择器)
 - `autoFitSize?: boolean` (默认 `true`，会根据 body 内容变化自动扩/缩尺寸，例如图片加载完成后)
 - `scrollMode?: 'body' | 'hybrid' | 'viewport' | 'none'` (默认 `body`)
 - `hybridSwitchRatio?: number` (默认 `1.35`，仅 `scrollMode: 'hybrid'` 时生效，最小值 `1`)
@@ -60,11 +72,30 @@ openOffcanvas({
 - `autoFitMinHeight?: number` (默认 `160`)
 - `confirmText?: string`
 - `cancelText?: string`
+- `footerButtons?: SoDialogFooterButton[]`（自定义底部按钮。未传时默认“取消 + 确认”）
+- `hideFooter?: boolean`（默认 `false`，可隐藏底部按钮区）
+- `footerAlign?: 'start' | 'center' | 'end' | 'between'`（默认 `end`）
 - `confirmAction?: 'hide' | 'destroy'`（默认 `hide`；显式传入 `id` 时默认 `destroy`）
 - `closeOnBackdrop?: boolean` (默认 `true`)
 - `closeOnEsc?: boolean` (默认 `true`)
 - `onConfirm?: () => void`
 - `onCancel?: () => void`
+- `onAction?: (context) => void`（监听所有 footer 按钮动作）
+- `handle.setFooterButtons(buttons): void`（运行时整体替换 footer 按钮）
+- `handle.updateFooterButton(id, updates): boolean`（按 id 更新某个 footer 按钮）
+- `handle.onAction(listener): () => void`（追加动作监听，返回取消监听函数）
+
+`SoDialogFooterButton` 字段：
+
+- `id?: string`（动作标识，推荐传）
+- `label: string | Node`
+- `role?: 'confirm' | 'cancel' | 'custom'`
+- `variant?: 'primary' | 'outline' | 'danger' | 'success' | 'ghost' | 'link'`
+- `action?: 'none' | 'hide' | 'destroy'`
+- `className?: string`
+- `disabled?: boolean`
+- `attrs?: Record<string, string>`
+- `onClick?: (context) => void | boolean | Promise<void | boolean>`（返回 `false` 可阻止后续默认动作）
 
 说明：
 
@@ -72,6 +103,38 @@ openOffcanvas({
 - `取消/关闭` 语义是 `dialog.close()`（隐藏）
 - `confirmAction: 'destroy'` 语义是 `dialog.remove()`（销毁）
 
+示例（自定义 footer 按钮、动作监听、运行时更新）：
+
+```ts
+const handle = openModal({
+  title: '订单操作',
+  content: '<p>请选择一个动作</p>',
+  footerAlign: 'between',
+  footerButtons: [
+    { id: 'help', label: '帮助', variant: 'link', action: 'none' },
+    { id: 'cancel', label: '取消', role: 'cancel', variant: 'outline' },
+    { id: 'delete', label: '删除', variant: 'danger', action: 'destroy' },
+  ],
+  onAction: ({ action }) => {
+    console.log('global action:', action)
+  },
+})
+
+const off = handle.onAction(({ action, dialog }) => {
+  if (action === 'help') {
+    dialog.querySelector('.sod-body')?.insertAdjacentHTML('beforeend', '<p>帮助信息已展开</p>')
+  }
+})
+
+handle.updateFooterButton('delete', { label: '确认删除', disabled: false })
+handle.setFooterButtons([
+  { id: 'close', label: '关闭', role: 'cancel', variant: 'ghost' },
+  { id: 'confirm', label: '提交', role: 'confirm', variant: 'primary' },
+])
+
+off()
+```
+
 ### `openOffcanvas(options)`
 
 在 `openModal` 参数基础上新增：
@@ -92,17 +155,71 @@ openOffcanvas({ title: 'Bottom', placement: 'bottom', animation: 'zoom', content
 
 通用入口，`options.kind` 可为 `modal` 或 `offcanvas`。
 
+### `toast(options)` / `SoToast.show(options)`
+
+- `content: string | Node`
+- `title?: string`
+- `placement?: 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end'`（默认 `top-end`）
+- `variant?: 'default' | 'info' | 'success' | 'warning' | 'danger'`（默认 `default`）
+- `duration?: number | false`（默认 `3000`，`false` 表示不自动消失）
+- `showProgress?: boolean`（默认 `true`，显示自动消失倒计时进度条）
+- `maxVisible?: number`（默认 `3`，按同位置队列生效）
+- `closable?: boolean`（默认 `true`）
+- `pauseOnHover?: boolean`（默认 `true`）
+- `pauseOnWindowBlur?: boolean`（默认 `false`，切换窗口时暂停倒计时）
+- `duplicateStrategy?: 'update' | 'ignore' | 'restart-timer' | 'stack'`（默认 `update`）
+- `onShown?: (handle) => void`
+- `onClose?: (reason, handle) => void`
+
+队列与控制：
+
+- 超过 `maxVisible` 的消息会进入队列，前面的 toast 关闭后自动补位
+- 相同 `id` 再次调用会按 `duplicateStrategy` 处理
+- `update`: 更新内容与配置；若 `placement` 改变会迁移到新位置
+- `ignore`: 保留已有 toast，忽略本次重复调用
+- `restart-timer`: 更新并强制重启倒计时
+- `stack`: 自动生成新 id，保留已有 toast 并叠加新 toast
+- 返回 `handle`，支持 `close / update / pause / resume`
+- 可用 `SoToast.clear(placement?)` 清空指定位置或全部 toast
+- 可用 `SoToast.closeAll()` 清空全部 toast
+- 便捷方法：`SoToast.success/error/info/warning`
+
 ## 开发
 
 ```bash
 npm run dev
 npm run lint
 npm run build
+npm run docs:changelog
 ```
 
+## GitHub Pages 首页
+
+本仓库已将文档主页入口放在 `index.html + src/main.ts`，用于展示开发文档与使用说明。
+
+- 本地构建主页：`npm run build:demo`
+- 产物目录：`dist-pages/`
+- 线上部署：`.github/workflows/pages.yml`（推送到 `master` 自动部署）
+- 仓库设置：`Settings -> Pages -> Source` 选择 `GitHub Actions`
+
+默认线上地址：`https://sohophp.github.io/sodialog/`
+
+## 文档体系
+
+- `README.md`：使用方式、API、发布流程总览
+- `CHANGELOG.md`：版本变更记录（按 git tag 自动生成）
+- `RELEASE_CHECKLIST.md`：发布前人工检查清单
+
+### 文档自动更新
+
+- 本地可执行：`npm run docs:changelog`
+- 仓库内置工作流：`.github/workflows/docs-changelog.yml`
+- 当推送版本 tag（`v*.*.*`）时，工作流会自动重建 `CHANGELOG.md` 并回推到 `master`
+
 Demo 中已包含：
 
 - 预设默认值：`center`、`zoom`、`medium`、`showModal`、不可拖动、自动适配
+- 拖动区域支持多选（`header/title/body/panel` 可组合）
 - `Modal ID` 留空自动生成，输入后可复用唤醒同 ID
 - Modal 内切换不同尺寸图片，验证 `autoFitSize` 自动扩缩
 - 包含超大图（`xlarge`）、超长单词、超宽表格的溢出测试
@@ -110,6 +227,10 @@ Demo 中已包含：
 - 子窗口包含多种表单元素（input/select/checkbox/textarea）演示
 - 新增 Markdown 编辑器子窗口（工具栏插入、实时预览）
 - 编辑器支持“仅编辑 / 编辑 + 预览”模式切换
+- Modal 新增“启用自定义 Footer API”开关（可切换默认按钮与自定义按钮）
+- Footer 按钮支持样式变体演示（`link / outline / danger / success / ghost`）
+- Footer 动作统一监听（`onAction`）与事件日志输出
+- 运行时按钮更新演示（`handle.updateFooterButton` / `handle.setFooterButtons`）
 
 ## 发布到 NPM
 
@@ -129,16 +250,22 @@ Demo 中已包含：
 
 1. 在 npm 包页面启用 Trusted Publishing，并绑定 GitHub 仓库与该工作流
 2. 确保工作流权限包含 `id-token: write`（本仓库已配置）
+3. 本地先做版本校验（tag 必须和 `package.json` 一致）
+
+```bash
+npm run release:check -- vX.Y.Z
+```
 
 说明：当前工作流优先使用 `NPM_AUTOMATION_TOKEN` 发布；未配置时回退到 Trusted Publishing（OIDC）。
 
-- 若使用 token 路径，`NPM_AUTOMATION_TOKEN` 必须是 npm Automation Token。
+- 若使用 token 路径，`NPM_AUTOMATION_TOKEN` 请使用 npm Granular access token（Write 权限），并启用 `Bypass 2FA`，否则 CI 发布会报 `EOTP`。
 - 若使用 Trusted Publishing 路径，需先在 npm 包设置里完成仓库和 workflow 绑定，否则发布阶段可能出现 `E404`。
 
 推荐发布命令：
 
 ```bash
 npm version patch --no-git-tag-version
+npm run release:check -- vX.Y.Z
 git add -A
 git commit -m "release: vX.Y.Z"
 git tag -a vX.Y.Z -m "vX.Y.Z"

package/dist/sodialog.css

@@ -1 +1 @@
-.sod-dialog{border:0;padding:0;margin:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.sod-dialog::backdrop{background:#0000007f}.sod-panel{box-sizing:border-box;background:#fff;color:#212529;border-radius:.5rem;box-shadow:0 .5rem 1rem #00000040;min-width:min(520px,calc(100vw - 2rem));max-width:min(520px,calc(100vw - 2rem))}.sod-modal .sod-panel{position:relative;margin:0}.sod-modal[open]{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.sod-modal[open].sod-modal-viewport-scroll{align-items:flex-start;overflow:auto;padding:1rem 0}.sod-modal .sod-panel.sod-modal-pos-center{align-self:center}.sod-modal .sod-panel.sod-modal-pos-top{align-self:flex-start;margin-top:1rem}.sod-modal .sod-panel.sod-modal-pos-bottom{align-self:flex-end;margin-bottom:1rem}.sod-modal .sod-panel.sod-modal-autofit{min-width:0;width:auto;height:auto;max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem);display:flex;flex-direction:column}.sod-modal .sod-panel.sod-modal-draggable{touch-action:none}.sod-modal .sod-panel.sod-is-dragging{animation:none!important;transition:none!important}.sod-modal .sod-panel .sod-drag-handle{cursor:move;-webkit-user-select:none;user-select:none}.sod-modal .sod-panel .sod-drag-handle.is-dragging{cursor:grabbing}.sod-modal .sod-panel.sod-modal-anim-fade{animation:sod-fade-in .18s ease-out}.sod-modal .sod-panel.sod-modal-anim-fade.is-closing{animation:sod-fade-out .18s ease-in forwards}.sod-modal .sod-panel.sod-modal-anim-zoom{animation:sod-modal-zoom-in .18s ease-out}.sod-modal .sod-panel.sod-modal-anim-zoom.is-closing{animation:sod-modal-zoom-out .18s ease-in forwards}.sod-modal .sod-panel.sod-modal-anim-slide{animation:sod-modal-slide-in .18s ease-out}.sod-modal .sod-panel.sod-modal-anim-slide.is-closing{animation:sod-modal-slide-out .18s ease-in forwards}.sod-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem .75rem;border-bottom:1px solid #dee2e6}.sod-title{margin:0;font-size:1.1rem}.sod-close{border:0;background:transparent;color:#6c757d;font-size:1.5rem;line-height:1;cursor:pointer}.sod-body{box-sizing:border-box;padding:1rem;overflow-wrap:anywhere;word-break:break-word}.sod-body>*{max-width:100%}.sod-body input,.sod-body select,.sod-body textarea,.sod-body button{max-width:100%;box-sizing:border-box}.sod-body img,.sod-body video,.sod-body canvas,.sod-body iframe,.sod-body table{max-width:100%}.sod-modal .sod-panel.sod-modal-autofit .sod-body{flex:1 1 auto;min-height:0}.sod-body p{margin:0 0 .5rem}.sod-body ul{margin:.5rem 0 0;padding-left:1.2rem}.sod-footer{padding:.75rem 1rem 1rem;border-top:1px solid #dee2e6;display:flex;justify-content:flex-end;gap:.5rem}.sod-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:.375rem;border:1px solid transparent;padding:.5rem 1rem;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .15s ease-in-out}.sod-btn:focus-visible{outline:2px solid #86b7fe;outline-offset:1px}.sod-btn-primary{background:#0d6efd;color:#fff;border-color:#0d6efd}.sod-btn-primary:hover{background:#0b5ed7;border-color:#0a58ca}.sod-btn-outline{background:transparent;color:#6c757d;border-color:#6c757d}.sod-btn-outline:hover{color:#fff;background:#6c757d}.sod-offcanvas[open]{width:100vw;height:100vh}.sod-offcanvas .sod-panel{position:fixed;margin:0;min-width:0;max-width:none;border-radius:0;width:min(360px,90vw);height:100vh}.sod-offcanvas .sod-panel.sod-placement-start{left:0;top:0}.sod-offcanvas .sod-panel.sod-placement-end{right:0;top:0}.sod-offcanvas .sod-panel.sod-placement-top{top:0;left:0;width:100vw;height:300px}.sod-offcanvas .sod-panel.sod-placement-bottom{bottom:0;left:0;width:100vw;height:300px}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-start{animation:sod-slide-in-start .18s ease-out}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-start.is-closing{animation:sod-slide-out-start .18s ease-in forwards}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-end{animation:sod-slide-in-end .18s ease-out}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-end.is-closing{animation:sod-slide-out-end .18s ease-in forwards}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-top{animation:sod-slide-in-top .18s ease-out}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-top.is-closing{animation:sod-slide-out-top .18s ease-in forwards}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-bottom{animation:sod-slide-in-bottom .18s ease-out}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-bottom.is-closing{animation:sod-slide-out-bottom .18s ease-in forwards}.sod-offcanvas .sod-panel.sod-anim-fade{animation:sod-fade-in .18s ease-out}.sod-offcanvas .sod-panel.sod-anim-fade.is-closing{animation:sod-fade-out .18s ease-in forwards}.sod-offcanvas .sod-panel.sod-anim-zoom{animation:sod-zoom-in .18s ease-out}.sod-offcanvas .sod-panel.sod-anim-zoom.is-closing{animation:sod-zoom-out .18s ease-in forwards}@keyframes sod-modal-zoom-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes sod-modal-zoom-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.96)}}@keyframes sod-modal-slide-in{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes sod-modal-slide-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-12px)}}@keyframes sod-slide-in-start{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes sod-slide-out-start{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes sod-slide-in-end{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes sod-slide-out-end{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes sod-slide-in-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes sod-slide-out-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes sod-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sod-slide-out-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes sod-fade-in{0%{opacity:0}to{opacity:1}}@keyframes sod-fade-out{0%{opacity:1}to{opacity:0}}@keyframes sod-zoom-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes sod-zoom-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.96)}}
+.sod-dialog{border:0;padding:0;margin:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.sod-dialog::backdrop{background:#0000007f}.sod-panel{box-sizing:border-box;background:#fff;color:#212529;border-radius:.5rem;box-shadow:0 .5rem 1rem #00000040;min-width:min(520px,calc(100vw - 2rem));max-width:min(520px,calc(100vw - 2rem))}.sod-modal .sod-panel{position:relative;margin:0}.sod-modal[open]{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.sod-modal[open].sod-modal-viewport-scroll{align-items:flex-start;overflow:auto;padding:1rem 0}.sod-modal .sod-panel.sod-modal-pos-center{align-self:center}.sod-modal .sod-panel.sod-modal-pos-top{align-self:flex-start;margin-top:1rem}.sod-modal .sod-panel.sod-modal-pos-bottom{align-self:flex-end;margin-bottom:1rem}.sod-modal .sod-panel.sod-modal-autofit{min-width:0;width:auto;height:auto;max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem);display:flex;flex-direction:column}.sod-modal .sod-panel.sod-modal-draggable{touch-action:none}.sod-modal .sod-panel.sod-is-dragging{animation:none!important;transition:none!important}.sod-modal .sod-panel .sod-drag-handle{cursor:move;-webkit-user-select:none;user-select:none}.sod-modal .sod-panel .sod-drag-handle.is-dragging{cursor:grabbing}.sod-modal .sod-panel.sod-modal-anim-fade{animation:sod-fade-in .18s ease-out}.sod-modal .sod-panel.sod-modal-anim-fade.is-closing{animation:sod-fade-out .18s ease-in forwards}.sod-modal .sod-panel.sod-modal-anim-zoom{animation:sod-modal-zoom-in .18s ease-out}.sod-modal .sod-panel.sod-modal-anim-zoom.is-closing{animation:sod-modal-zoom-out .18s ease-in forwards}.sod-modal .sod-panel.sod-modal-anim-slide{animation:sod-modal-slide-in .18s ease-out}.sod-modal .sod-panel.sod-modal-anim-slide.is-closing{animation:sod-modal-slide-out .18s ease-in forwards}.sod-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem .75rem;border-bottom:1px solid #dee2e6}.sod-title{margin:0;font-size:1.1rem}.sod-close{border:0;background:transparent;color:#6c757d;font-size:1.5rem;line-height:1;cursor:pointer}.sod-body{box-sizing:border-box;padding:1rem;overflow-wrap:anywhere;word-break:break-word}.sod-body>*{max-width:100%}.sod-body input,.sod-body select,.sod-body textarea,.sod-body button{max-width:100%;box-sizing:border-box}.sod-body img,.sod-body video,.sod-body canvas,.sod-body iframe,.sod-body table{max-width:100%}.sod-modal .sod-panel.sod-modal-autofit .sod-body{flex:1 1 auto;min-height:0}.sod-body p{margin:0 0 .5rem}.sod-body ul{margin:.5rem 0 0;padding-left:1.2rem}.sod-footer{padding:.75rem 1rem 1rem;border-top:1px solid #dee2e6;display:flex;justify-content:flex-end;gap:.5rem}.sod-footer[data-align=start]{justify-content:flex-start}.sod-footer[data-align=center]{justify-content:center}.sod-footer[data-align=between]{justify-content:space-between}.sod-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:.375rem;border:1px solid transparent;padding:.5rem 1rem;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .15s ease-in-out}.sod-btn:focus-visible{outline:2px solid #86b7fe;outline-offset:1px}.sod-btn-primary{background:#0d6efd;color:#fff;border-color:#0d6efd}.sod-btn-primary:hover{background:#0b5ed7;border-color:#0a58ca}.sod-btn-outline{background:transparent;color:#6c757d;border-color:#6c757d}.sod-btn-outline:hover{color:#fff;background:#6c757d}.sod-btn-danger{background:#dc3545;color:#fff;border-color:#dc3545}.sod-btn-danger:hover{background:#bb2d3b;border-color:#b02a37}.sod-btn-success{background:#198754;color:#fff;border-color:#198754}.sod-btn-success:hover{background:#157347;border-color:#146c43}.sod-btn-ghost{background:transparent;color:#495057;border-color:transparent}.sod-btn-ghost:hover{background:#e9ecef}.sod-btn-link{background:transparent;color:#0d6efd;border-color:transparent;text-decoration:underline;text-underline-offset:2px}.sod-btn-link:hover{color:#0a58ca}.sod-offcanvas[open]{width:100vw;height:100vh}.sod-offcanvas .sod-panel{position:fixed;margin:0;min-width:0;max-width:none;border-radius:0;width:min(360px,90vw);height:100vh}.sod-offcanvas .sod-panel.sod-placement-start{left:0;top:0}.sod-offcanvas .sod-panel.sod-placement-end{right:0;top:0}.sod-offcanvas .sod-panel.sod-placement-top{top:0;left:0;width:100vw;height:300px}.sod-offcanvas .sod-panel.sod-placement-bottom{bottom:0;left:0;width:100vw;height:300px}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-start{animation:sod-slide-in-start .18s ease-out}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-start.is-closing{animation:sod-slide-out-start .18s ease-in forwards}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-end{animation:sod-slide-in-end .18s ease-out}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-end.is-closing{animation:sod-slide-out-end .18s ease-in forwards}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-top{animation:sod-slide-in-top .18s ease-out}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-top.is-closing{animation:sod-slide-out-top .18s ease-in forwards}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-bottom{animation:sod-slide-in-bottom .18s ease-out}.sod-offcanvas .sod-panel.sod-anim-slide.sod-placement-bottom.is-closing{animation:sod-slide-out-bottom .18s ease-in forwards}.sod-offcanvas .sod-panel.sod-anim-fade{animation:sod-fade-in .18s ease-out}.sod-offcanvas .sod-panel.sod-anim-fade.is-closing{animation:sod-fade-out .18s ease-in forwards}.sod-offcanvas .sod-panel.sod-anim-zoom{animation:sod-zoom-in .18s ease-out}.sod-offcanvas .sod-panel.sod-anim-zoom.is-closing{animation:sod-zoom-out .18s ease-in forwards}@keyframes sod-modal-zoom-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes sod-modal-zoom-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.96)}}@keyframes sod-modal-slide-in{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes sod-modal-slide-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-12px)}}@keyframes sod-slide-in-start{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes sod-slide-out-start{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes sod-slide-in-end{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes sod-slide-out-end{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes sod-slide-in-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes sod-slide-out-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes sod-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes sod-slide-out-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes sod-fade-in{0%{opacity:0}to{opacity:1}}@keyframes sod-fade-out{0%{opacity:1}to{opacity:0}}@keyframes sod-zoom-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.sod-toast-layer{position:fixed;z-index:1200;display:flex;flex-direction:column;gap:.5rem;width:min(360px,calc(100vw - 1.5rem));pointer-events:none}.sod-toast-layer-top-start{top:.75rem;left:.75rem;align-items:flex-start}.sod-toast-layer-top-center{top:.75rem;left:50%;transform:translate(-50%);align-items:center}.sod-toast-layer-top-end{top:.75rem;right:.75rem;align-items:flex-end}.sod-toast-layer-bottom-start{bottom:.75rem;left:.75rem;align-items:flex-start}.sod-toast-layer-bottom-center{bottom:.75rem;left:50%;transform:translate(-50%);align-items:center}.sod-toast-layer-bottom-end{bottom:.75rem;right:.75rem;align-items:flex-end}.sod-toast{--sod-toast-accent: #6c757d;pointer-events:auto;width:100%;box-sizing:border-box;border-radius:.5rem;border:1px solid #dee2e6;background:#fff;color:#212529;box-shadow:0 .5rem 1rem #0000002e;overflow:hidden;animation:sod-toast-enter .18s ease-out}.sod-toast.is-closing{animation:sod-toast-exit .18s ease-in forwards}.sod-toast-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .75rem 0}.sod-toast-title{font-size:.92rem;font-weight:700}.sod-toast-close{border:0;background:transparent;color:#6c757d;font-size:1.15rem;line-height:1;cursor:pointer;padding:0}.sod-toast-body{padding:.55rem .75rem .75rem;font-size:.92rem;line-height:1.45;overflow-wrap:anywhere;word-break:break-word}.sod-toast-progress{width:100%;height:3px;background:var(--sod-toast-accent);opacity:.9;transform-origin:left center;animation:sod-toast-progress-countdown 3s linear forwards}.sod-toast-default{--sod-toast-accent: #6c757d;border-left:4px solid #6c757d}.sod-toast-info{--sod-toast-accent: #0dcaf0;border-left:4px solid #0dcaf0}.sod-toast-success{--sod-toast-accent: #198754;border-left:4px solid #198754}.sod-toast-warning{--sod-toast-accent: #ffc107;border-left:4px solid #ffc107}.sod-toast-danger{--sod-toast-accent: #dc3545;border-left:4px solid #dc3545}@keyframes sod-toast-enter{0%{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes sod-toast-exit{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.96)}}@keyframes sod-toast-progress-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes sod-zoom-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.96)}}

package/dist/sodialog.es.js

@@ -1,186 +1,299 @@
-function A(t, e) {
+function W(n, e) {
   if (typeof e == "string") {
-    t.innerHTML = e;
+    n.innerHTML = e;
     return;
   }
-  t.append(e);
+  n.append(e);
 }
-function I(t, e = "hide") {
+function B(n, e = "hide") {
   if (e === "destroy") {
-    t.dataset.sodDestroy = "true", t.open && t.close(), t.remove();
+    n.dataset.sodDestroy = "true", n.open && n.close(), n.remove();
     return;
   }
-  t.open && t.close();
+  n.open && n.close();
 }
-function N(t, e) {
-  const i = e ?? "header";
-  return i === "panel" ? t : i === "header" ? t.querySelector(".sod-header") : i === "title" ? t.querySelector(".sod-title") : i === "body" ? t.querySelector(".sod-body") : t.querySelector(i) ?? t.querySelector(".sod-header");
+function $(n, e) {
+  return n.action ? n.action : n.role === "confirm" ? e : n.role === "cancel" ? "hide" : "none";
 }
-function F(t, e) {
-  const i = N(t, e);
-  if (!i)
+function N(n) {
+  return n === "danger" ? "sod-btn-danger" : n === "success" ? "sod-btn-success" : n === "ghost" ? "sod-btn-ghost" : n === "link" ? "sod-btn-link" : n === "outline" ? "sod-btn-outline" : "sod-btn-primary";
+}
+function F(n, e) {
+  const t = Array.isArray(e) ? e.length > 0 ? e : ["header"] : [e ?? "header"], s = [], i = (o) => {
+    o && (s.includes(o) || s.push(o));
+  };
+  for (const o of t) {
+    if (o === "panel") {
+      i(n);
+      continue;
+    }
+    if (o === "header") {
+      i(n.querySelector(".sod-header"));
+      continue;
+    }
+    if (o === "title") {
+      i(n.querySelector(".sod-title"));
+      continue;
+    }
+    if (o === "body") {
+      i(n.querySelector(".sod-body"));
+      continue;
+    }
+    n.querySelectorAll(o).forEach((r) => {
+      i(r);
+    });
+  }
+  return s.length === 0 && i(n.querySelector(".sod-header")), s;
+}
+function k(n, e) {
+  const t = F(n, e);
+  if (t.length === 0)
     return;
-  t.classList.add("sod-modal-draggable"), i.classList.add("sod-drag-handle");
-  let s = !1, H = 0, v = 0, d = null, g = 0, L = 0, o = 0;
-  const x = document.body.style.userSelect, c = (r, m) => {
-    const a = t.getBoundingClientRect(), M = Math.max(0, window.innerWidth - a.width), w = Math.max(0, window.innerHeight - a.height), p = Math.min(0, window.innerWidth - a.width), l = Math.min(0, window.innerHeight - a.height);
+  n.classList.add("sod-modal-draggable"), t.forEach((m) => {
+    m.classList.add("sod-drag-handle");
+  });
+  let s = !1, i = 0, o = 0, r = null, d = null, h = 0, a = 0, f = 0;
+  const v = document.body.style.userSelect, E = (m, u) => {
+    const y = n.getBoundingClientRect(), p = Math.max(0, window.innerWidth - y.width), S = Math.max(0, window.innerHeight - y.height), A = Math.min(0, window.innerWidth - y.width), b = Math.min(0, window.innerHeight - y.height);
     return {
-      left: Math.min(M, Math.max(p, r)),
-      top: Math.min(w, Math.max(l, m))
+      left: Math.min(p, Math.max(A, m)),
+      top: Math.min(S, Math.max(b, u))
     };
-  }, h = (r) => {
+  }, R = (m) => {
     if (!s)
       return;
-    const m = c(r.clientX - H, r.clientY - v);
-    L = m.left, o = m.top, g === 0 && (g = window.requestAnimationFrame(() => {
-      g = 0, t.style.inset = "auto", t.style.left = `${L}px`, t.style.top = `${o}px`, t.style.right = "auto", t.style.bottom = "auto", t.style.margin = "0", t.style.transform = "none";
+    const u = E(m.clientX - i, m.clientY - o);
+    a = u.left, f = u.top, h === 0 && (h = window.requestAnimationFrame(() => {
+      h = 0, n.style.inset = "auto", n.style.left = `${a}px`, n.style.top = `${f}px`, n.style.right = "auto", n.style.bottom = "auto", n.style.margin = "0", n.style.transform = "none";
     }));
-  }, u = () => {
-    s = !1, i.classList.remove("is-dragging"), t.classList.remove("sod-is-dragging"), t.style.willChange = "", document.body.style.userSelect = x, g !== 0 && (window.cancelAnimationFrame(g), g = 0), d !== null && i.hasPointerCapture && i.hasPointerCapture(d) && i.releasePointerCapture(d), d = null, window.removeEventListener("pointermove", h), window.removeEventListener("pointerup", u), window.removeEventListener("pointercancel", u);
+  }, x = () => {
+    s = !1, t.forEach((m) => {
+      m.classList.remove("is-dragging");
+    }), n.classList.remove("sod-is-dragging"), n.style.willChange = "", document.body.style.userSelect = v, h !== 0 && (window.cancelAnimationFrame(h), h = 0), r !== null && d !== null && d.hasPointerCapture && d.hasPointerCapture(r) && d.releasePointerCapture(r), r = null, d = null, window.removeEventListener("pointermove", R), window.removeEventListener("pointerup", x), window.removeEventListener("pointercancel", x);
   };
-  i.addEventListener("pointerdown", (r) => {
-    if (r.button !== 0 || r.target?.closest("button, input, select, textarea, a"))
-      return;
-    r.preventDefault(), t.classList.add("sod-is-dragging"), t.style.animation = "none", t.style.transition = "none", t.style.transform = "none";
-    const a = t.getBoundingClientRect();
-    H = r.clientX - a.left, v = r.clientY - a.top, s = !0, d = r.pointerId, i.setPointerCapture(r.pointerId), t.style.position = "fixed", t.style.left = `${a.left}px`, t.style.top = `${a.top}px`, t.style.width = `${Math.round(a.width)}px`, t.style.height = `${Math.round(a.height)}px`, t.style.inset = "auto", t.style.right = "auto", t.style.bottom = "auto", t.style.margin = "0", t.style.willChange = "left, top", i.classList.add("is-dragging"), document.body.style.userSelect = "none", window.addEventListener("pointermove", h), window.addEventListener("pointerup", u), window.addEventListener("pointercancel", u);
+  t.forEach((m) => {
+    m.addEventListener("pointerdown", (u) => {
+      if (u.button !== 0 || u.target?.closest("button, input, select, textarea, a"))
+        return;
+      u.preventDefault(), n.classList.add("sod-is-dragging"), n.style.animation = "none", n.style.transition = "none", n.style.transform = "none";
+      const p = n.getBoundingClientRect();
+      i = u.clientX - p.left, o = u.clientY - p.top, s = !0, r = u.pointerId, d = m, m.setPointerCapture(u.pointerId), n.style.position = "fixed", n.style.left = `${p.left}px`, n.style.top = `${p.top}px`, n.style.width = `${Math.round(p.width)}px`, n.style.height = `${Math.round(p.height)}px`, n.style.inset = "auto", n.style.right = "auto", n.style.bottom = "auto", n.style.margin = "0", n.style.willChange = "left, top", m.classList.add("is-dragging"), document.body.style.userSelect = "none", window.addEventListener("pointermove", R), window.addEventListener("pointerup", x), window.addEventListener("pointercancel", x);
+    });
   });
 }
-function Y(t, e, i, s, H, v) {
-  const g = Math.max(1, v?.hybridSwitchRatio ?? 1.35), L = v?.refitOnContentChange ?? !0, o = Math.max(120, v?.autoFitMinWidth ?? 280), x = Math.max(100, v?.autoFitMinHeight ?? 160), c = v?.scrollMode ? v.scrollMode : v?.autoFitUseScrollbar === !1 ? "viewport" : "body";
-  let h = 0;
-  const u = (n, f, E) => Math.min(E, Math.max(f, n)), r = () => {
-    if (h = 0, !t.isConnected || !t.open)
+function D(n, e, t, s, i, o) {
+  const d = Math.max(1, o?.hybridSwitchRatio ?? 1.35), h = o?.refitOnContentChange ?? !0, a = Math.max(120, o?.autoFitMinWidth ?? 280), f = Math.max(100, o?.autoFitMinHeight ?? 160), v = o?.scrollMode ? o.scrollMode : o?.autoFitUseScrollbar === !1 ? "viewport" : "body";
+  let E = 0;
+  const R = (b, M, L) => Math.min(L, Math.max(M, b)), x = () => {
+    if (E = 0, !n.isConnected || !n.open)
       return;
-    const n = Math.max(o, window.innerWidth - 32), f = Math.max(x, window.innerHeight - 32);
+    const b = Math.max(a, window.innerWidth - 32), M = Math.max(f, window.innerHeight - 32);
     e.style.width = "auto", e.style.height = "auto", e.style.maxHeight = "none", s.style.maxHeight = "none", s.style.overflowY = "visible", s.style.overflowX = "visible";
-    const E = Math.ceil(e.scrollWidth), $ = Math.ceil(e.scrollHeight), W = E > n, S = $ > f;
-    if (c === "body") {
-      const b = u(E, o, n), y = u($, x, f);
-      e.style.width = `${b}px`, e.style.maxWidth = `${n}px`, e.style.height = `${y}px`, e.style.maxHeight = `${f}px`;
-      const C = i.offsetHeight, R = H.offsetHeight, D = Math.max(64, y - C - R);
-      S ? (s.style.maxHeight = `${D}px`, s.style.overflowY = "auto") : (s.style.maxHeight = "none", s.style.overflowY = "hidden"), s.style.overflowX = W ? "auto" : "hidden", t.classList.remove("sod-modal-viewport-scroll");
-    } else if (c === "hybrid")
-      if ($ > f * g) {
-        const y = Math.max(E, o), C = Math.max($, x);
-        e.style.width = `${y}px`, e.style.maxWidth = "none", e.style.height = `${C}px`, e.style.maxHeight = "none", s.style.maxHeight = "none", s.style.overflowY = "visible", s.style.overflowX = "visible", t.classList.add("sod-modal-viewport-scroll");
+    const L = Math.ceil(e.scrollWidth), l = Math.ceil(e.scrollHeight), c = L > b, g = l > M;
+    if (v === "body") {
+      const w = R(L, a, b), O = R(l, f, M);
+      e.style.width = `${w}px`, e.style.maxWidth = `${b}px`, e.style.height = `${O}px`, e.style.maxHeight = `${M}px`;
+      const H = t.offsetHeight, T = i.offsetHeight, I = Math.max(64, O - H - T);
+      g ? (s.style.maxHeight = `${I}px`, s.style.overflowY = "auto") : (s.style.maxHeight = "none", s.style.overflowY = "hidden"), s.style.overflowX = c ? "auto" : "hidden", n.classList.remove("sod-modal-viewport-scroll");
+    } else if (v === "hybrid")
+      if (l > M * d) {
+        const O = Math.max(L, a), H = Math.max(l, f);
+        e.style.width = `${O}px`, e.style.maxWidth = "none", e.style.height = `${H}px`, e.style.maxHeight = "none", s.style.maxHeight = "none", s.style.overflowY = "visible", s.style.overflowX = "visible", n.classList.add("sod-modal-viewport-scroll");
       } else {
-        const y = u(E, o, n), C = u($, x, f);
-        e.style.width = `${y}px`, e.style.maxWidth = `${n}px`, e.style.height = `${C}px`, e.style.maxHeight = `${f}px`;
-        const R = i.offsetHeight, D = H.offsetHeight, P = Math.max(64, C - R - D);
-        S ? (s.style.maxHeight = `${P}px`, s.style.overflowY = "auto") : (s.style.maxHeight = "none", s.style.overflowY = "hidden"), s.style.overflowX = W ? "auto" : "hidden", t.classList.remove("sod-modal-viewport-scroll");
+        const O = R(L, a, b), H = R(l, f, M);
+        e.style.width = `${O}px`, e.style.maxWidth = `${b}px`, e.style.height = `${H}px`, e.style.maxHeight = `${M}px`;
+        const T = t.offsetHeight, I = i.offsetHeight, C = Math.max(64, H - T - I);
+        g ? (s.style.maxHeight = `${C}px`, s.style.overflowY = "auto") : (s.style.maxHeight = "none", s.style.overflowY = "hidden"), s.style.overflowX = c ? "auto" : "hidden", n.classList.remove("sod-modal-viewport-scroll");
       }
-    else if (c === "viewport") {
-      const b = Math.max(E, o), y = Math.max($, x);
-      e.style.width = `${b}px`, e.style.maxWidth = "none", e.style.height = `${y}px`, e.style.maxHeight = "none", s.style.maxHeight = "none", s.style.overflowY = "visible", s.style.overflowX = "visible", y > f ? t.classList.add("sod-modal-viewport-scroll") : t.classList.remove("sod-modal-viewport-scroll");
+    else if (v === "viewport") {
+      const w = Math.max(L, a), O = Math.max(l, f);
+      e.style.width = `${w}px`, e.style.maxWidth = "none", e.style.height = `${O}px`, e.style.maxHeight = "none", s.style.maxHeight = "none", s.style.overflowY = "visible", s.style.overflowX = "visible", O > M ? n.classList.add("sod-modal-viewport-scroll") : n.classList.remove("sod-modal-viewport-scroll");
     } else {
-      const b = W ? Math.max(E, o) : u(E, o, n);
-      if (W || S) {
-        const y = Math.max($, x);
-        e.style.width = `${b}px`, e.style.maxWidth = "none", e.style.height = `${y}px`, e.style.maxHeight = "none", s.style.maxHeight = "none", s.style.overflowY = "visible", s.style.overflowX = "visible", t.classList.add("sod-modal-viewport-scroll");
+      const w = c ? Math.max(L, a) : R(L, a, b);
+      if (c || g) {
+        const O = Math.max(l, f);
+        e.style.width = `${w}px`, e.style.maxWidth = "none", e.style.height = `${O}px`, e.style.maxHeight = "none", s.style.maxHeight = "none", s.style.overflowY = "visible", s.style.overflowX = "visible", n.classList.add("sod-modal-viewport-scroll");
       } else
-        e.style.width = `${b}px`, e.style.maxWidth = `${n}px`, e.style.height = "auto", e.style.maxHeight = "none", s.style.maxHeight = "none", s.style.overflowY = "visible", s.style.overflowX = "visible", t.classList.remove("sod-modal-viewport-scroll");
+        e.style.width = `${w}px`, e.style.maxWidth = `${b}px`, e.style.height = "auto", e.style.maxHeight = "none", s.style.maxHeight = "none", s.style.overflowY = "visible", s.style.overflowX = "visible", n.classList.remove("sod-modal-viewport-scroll");
     }
   }, m = () => {
-    h === 0 && (h = window.requestAnimationFrame(r));
-  }, a = new ResizeObserver(() => {
+    E === 0 && (E = window.requestAnimationFrame(x));
+  }, u = new ResizeObserver(() => {
     m();
-  }), M = new MutationObserver(() => {
+  }), y = new MutationObserver(() => {
     m();
-  }), w = () => {
+  }), p = () => {
     m();
-  }, p = () => {
+  }, S = () => {
     m();
   };
-  t.addEventListener("sod:refit", p), a.observe(s), a.observe(i), a.observe(H), L && (M.observe(s, {
+  n.addEventListener("sod:refit", S), u.observe(s), u.observe(t), u.observe(i), h && (y.observe(s, {
     subtree: !0,
     childList: !0,
     characterData: !0,
     attributes: !0
-  }), s.addEventListener("load", w, !0), s.addEventListener("error", w, !0));
-  const l = () => {
+  }), s.addEventListener("load", p, !0), s.addEventListener("error", p, !0));
+  const A = () => {
     m();
   };
-  return window.addEventListener("resize", l), m(), () => {
-    h !== 0 && (window.cancelAnimationFrame(h), h = 0), a.disconnect(), M.disconnect(), window.removeEventListener("resize", l), t.removeEventListener("sod:refit", p), s.removeEventListener("load", w, !0), s.removeEventListener("error", w, !0), t.classList.remove("sod-modal-viewport-scroll"), s.style.maxHeight = "", s.style.overflowY = "", s.style.overflowX = "";
+  return window.addEventListener("resize", A), m(), () => {
+    E !== 0 && (window.cancelAnimationFrame(E), E = 0), u.disconnect(), y.disconnect(), window.removeEventListener("resize", A), n.removeEventListener("sod:refit", S), s.removeEventListener("load", p, !0), s.removeEventListener("error", p, !0), n.classList.remove("sod-modal-viewport-scroll"), s.style.maxHeight = "", s.style.overflowY = "", s.style.overflowX = "";
   };
 }
-class O {
+class P {
   static modalRegistry = /* @__PURE__ */ new Map();
+  static handleRegistry = /* @__PURE__ */ new WeakMap();
   static modalIdSeed = 0;
   static createAutoModalId() {
     return this.modalIdSeed += 1, `sod-modal-${this.modalIdSeed}`;
   }
-  static revealExisting(e, i) {
+  static revealExisting(e, t) {
     if (!e.isConnected)
-      return;
+      return {
+        dialog: e,
+        close: () => B(e),
+        refit: () => e.dispatchEvent(new Event("sod:refit")),
+        setFooterButtons: () => {
+        },
+        updateFooterButton: () => !1,
+        onAction: () => () => {
+        },
+        id: e.dataset.sodId
+      };
     const s = e.querySelector(".sod-panel");
-    s?.classList.remove("is-closing"), document.body.append(e), e.open || (i ? e.showModal() : e.show()), e.dispatchEvent(new Event("sod:refit")), s?.focus();
+    s?.classList.remove("is-closing"), document.body.append(e), e.open || (t ? e.showModal() : e.show()), e.dispatchEvent(new Event("sod:refit")), s?.focus();
+    const i = this.handleRegistry.get(e);
+    return i ? i() : {
+      dialog: e,
+      close: () => B(e),
+      refit: () => e.dispatchEvent(new Event("sod:refit")),
+      setFooterButtons: () => {
+      },
+      updateFooterButton: () => !1,
+      onAction: () => () => {
+      },
+      id: e.dataset.sodId
+    };
   }
   static open(e) {
-    const i = e.kind ?? "modal", s = "useModal" in e ? e.useModal ?? !0 : !0, H = i === "modal" ? e : void 0, v = i === "modal" && ("autoFitSize" in e ? e.autoFitSize !== !1 : !0);
-    let d, g = !1, L = e.confirmAction ?? "hide";
-    if (i === "modal") {
+    const t = e.kind ?? "modal", s = "useModal" in e ? e.useModal ?? !0 : !0, i = t === "modal" ? e : void 0, o = t === "modal" && ("autoFitSize" in e ? e.autoFitSize !== !1 : !0);
+    let r, d = !1, h = e.confirmAction ?? "hide";
+    if (t === "modal") {
       const l = "id" in e && e.id?.trim() ? e.id.trim() : void 0;
-      if (g = !!l, d = l ?? this.createAutoModalId(), e.confirmAction === void 0 && g && (L = "destroy"), l) {
-        const n = this.modalRegistry.get(d);
-        if (n && n.isConnected) {
-          this.revealExisting(n, s);
-          const f = {
-            dialog: n,
-            close: () => I(n),
-            refit: () => n.dispatchEvent(new Event("sod:refit")),
-            id: d
-          };
-          return "onReused" in e && e.onReused?.(f), f;
+      if (d = !!l, r = l ?? this.createAutoModalId(), e.confirmAction === void 0 && d && (h = "destroy"), l) {
+        const c = this.modalRegistry.get(r);
+        if (c && c.isConnected) {
+          const g = this.revealExisting(c, s);
+          if (e.onAction) {
+            const w = g.onAction(e.onAction);
+            c.addEventListener("close", w, { once: !0 });
+          }
+          return "onReused" in e && e.onReused?.(g), g;
         }
       }
-      this.modalRegistry.delete(d);
-    }
-    const o = document.createElement("dialog");
-    o.className = `sod-dialog sod-${i}`;
-    const x = [];
-    d && (o.dataset.sodId = d, g && (o.dataset.sodPersistent = "true"));
-    const c = document.createElement("section");
-    if (c.className = "sod-panel", c.tabIndex = -1, i === "offcanvas") {
-      const l = "placement" in e ? e.placement ?? "end" : "end", n = "animation" in e ? e.animation ?? "slide" : "slide";
-      c.classList.add(`sod-placement-${l}`), c.classList.add(`sod-anim-${n}`);
+      this.modalRegistry.delete(r);
+    }
+    const a = document.createElement("dialog");
+    a.className = `sod-dialog sod-${t}`;
+    const f = [];
+    r && (a.dataset.sodId = r, d && (a.dataset.sodPersistent = "true"));
+    const v = document.createElement("section");
+    if (v.className = "sod-panel", v.tabIndex = -1, t === "offcanvas") {
+      const l = "placement" in e ? e.placement ?? "end" : "end", c = "animation" in e ? e.animation ?? "slide" : "slide";
+      v.classList.add(`sod-placement-${l}`), v.classList.add(`sod-anim-${c}`);
     } else {
-      const l = "position" in e ? e.position ?? "center" : "center", n = "animation" in e ? e.animation ?? "fade" : "fade";
-      c.classList.add(`sod-modal-pos-${l}`), c.classList.add(`sod-modal-anim-${n}`), v && c.classList.add("sod-modal-autofit");
-    }
-    const h = document.createElement("header");
-    h.className = "sod-header";
-    const u = document.createElement("h2");
-    u.className = "sod-title", u.textContent = e.title;
-    const r = document.createElement("button");
-    r.type = "button", r.className = "sod-close", r.setAttribute("aria-label", "Close"), r.textContent = "×", r.addEventListener("click", () => I(o)), h.append(u, r);
+      const l = "position" in e ? e.position ?? "center" : "center", c = "animation" in e ? e.animation ?? "fade" : "fade";
+      v.classList.add(`sod-modal-pos-${l}`), v.classList.add(`sod-modal-anim-${c}`), o && v.classList.add("sod-modal-autofit");
+    }
+    const E = document.createElement("header");
+    E.className = "sod-header";
+    const R = document.createElement("h2");
+    R.className = "sod-title", R.textContent = e.title;
+    const x = document.createElement("button");
+    x.type = "button", x.className = "sod-close", x.setAttribute("aria-label", "Close"), x.textContent = "×", x.addEventListener("click", () => B(a)), E.append(R, x);
     const m = document.createElement("div");
-    m.className = "sod-body", A(m, e.content);
-    const a = document.createElement("footer");
-    a.className = "sod-footer";
-    const M = document.createElement("button");
-    M.type = "button", M.className = "sod-btn sod-btn-outline", M.textContent = e.cancelText ?? "取消", M.addEventListener("click", () => {
-      e.onCancel?.(), I(o);
+    m.className = "sod-body", W(m, e.content);
+    const u = document.createElement("footer");
+    u.className = "sod-footer", u.dataset.align = e.footerAlign ?? "end";
+    const y = /* @__PURE__ */ new Set();
+    e.onAction && y.add(e.onAction);
+    const p = (l) => (y.add(l), () => {
+      y.delete(l);
     });
-    const w = document.createElement("button");
-    w.type = "button", w.className = "sod-btn sod-btn-primary", w.textContent = e.confirmText ?? "确认", w.addEventListener("click", () => {
-      e.onConfirm?.(), I(o, L);
-    }), a.append(M, w), c.append(h, m, a), v && x.push(Y(o, c, h, m, a, H)), i === "modal" && "draggable" in e && e.draggable && F(c, e.dragHandle), o.append(c), (e.closeOnBackdrop ?? !0) && o.addEventListener("click", (l) => {
-      l.target === o && I(o);
-    }), (e.closeOnEsc ?? !0) || o.addEventListener("cancel", (l) => {
-      l.preventDefault();
-    }), o.addEventListener("close", () => {
-      const l = o.dataset.sodPersistent === "true", n = o.dataset.sodDestroy === "true";
-      (!l || n) && (x.forEach((f) => f()), o.remove(), d && this.modalRegistry.delete(d), delete o.dataset.sodDestroy);
-    }), document.body.append(o), s ? o.showModal() : o.show(), o.dispatchEvent(new Event("sod:refit")), d && this.modalRegistry.set(d, o);
-    const p = {
-      dialog: o,
-      close: () => I(o),
-      refit: () => o.dispatchEvent(new Event("sod:refit")),
-      id: d
+    let S = e.footerButtons ? [...e.footerButtons] : [
+      {
+        id: "cancel",
+        label: e.cancelText ?? "取消",
+        role: "cancel",
+        variant: "outline"
+      },
+      {
+        id: "confirm",
+        label: e.confirmText ?? "确认",
+        role: "confirm",
+        variant: "primary"
+      }
+    ];
+    const A = () => ({
+      dialog: a,
+      close: () => B(a),
+      refit: () => a.dispatchEvent(new Event("sod:refit")),
+      setFooterButtons: (l) => {
+        S = [...l], M(), a.dispatchEvent(new Event("sod:refit"));
+      },
+      updateFooterButton: (l, c) => {
+        const g = S.findIndex((w) => w.id === l);
+        return g < 0 ? !1 : (S[g] = { ...S[g], ...c }, M(), a.dispatchEvent(new Event("sod:refit")), !0);
+      },
+      onAction: (l) => p(l),
+      id: r
+    }), b = (l, c) => {
+      if (typeof c == "string") {
+        l.textContent = c;
+        return;
+      }
+      l.append(c);
+    }, M = () => {
+      if (u.replaceChildren(), e.hideFooter || S.length === 0) {
+        u.hidden = !0;
+        return;
+      }
+      u.hidden = !1;
+      for (const l of S) {
+        const c = document.createElement("button");
+        c.type = "button", c.className = `sod-btn ${N(l.variant)}`, l.className?.trim() && (c.className = `${c.className} ${l.className.trim()}`), l.id?.trim() && (c.dataset.action = l.id.trim()), l.disabled && (c.disabled = !0), l.attrs && Object.entries(l.attrs).forEach(([g, w]) => {
+          c.setAttribute(g, w);
+        }), b(c, l.label), c.addEventListener("click", (g) => {
+          (async () => {
+            const w = A(), H = {
+              action: l.id ?? l.role ?? "custom",
+              button: l,
+              buttonElement: c,
+              dialog: a,
+              event: g,
+              handle: w
+            };
+            if (await l.onClick?.(H) === !1)
+              return;
+            l.role === "cancel" && e.onCancel?.(), l.role === "confirm" && e.onConfirm?.(), y.forEach((C) => {
+              C(H);
+            });
+            const I = $(l, h);
+            I === "hide" && B(a, "hide"), I === "destroy" && B(a, "destroy");
+          })();
+        }), u.append(c);
+      }
     };
-    return i === "modal" && "onCreated" in e && e.onCreated?.(p), p;
+    M(), v.append(E, m, u), o && f.push(D(a, v, E, m, u, i)), t === "modal" && "draggable" in e && e.draggable && k(v, e.dragHandle), a.append(v), (e.closeOnBackdrop ?? !0) && a.addEventListener("click", (l) => {
+      l.target === a && B(a);
+    }), (e.closeOnEsc ?? !0) || a.addEventListener("cancel", (l) => {
+      l.preventDefault();
+    }), a.addEventListener("close", () => {
+      const l = a.dataset.sodPersistent === "true", c = a.dataset.sodDestroy === "true";
+      (!l || c) && (f.forEach((g) => g()), y.clear(), a.remove(), r && this.modalRegistry.delete(r), this.handleRegistry.delete(a), delete a.dataset.sodDestroy);
+    }), document.body.append(a), s ? a.showModal() : a.show(), a.dispatchEvent(new Event("sod:refit")), r && this.modalRegistry.set(r, a), this.handleRegistry.set(a, A);
+    const L = A();
+    return t === "modal" && "onCreated" in e && e.onCreated?.(L), L;
   }
   static openModal(e) {
     return this.open({ ...e, kind: "modal" });
@@ -189,14 +302,334 @@ class O {
     return this.open({ ...e, kind: "offcanvas" });
   }
 }
-function k(t) {
-  return O.openModal(t);
+class V {
+  static placementState = /* @__PURE__ */ new Map();
+  static recordById = /* @__PURE__ */ new Map();
+  static idSeed = 0;
+  static defaults = {
+    placement: "top-end",
+    variant: "default",
+    duration: 3e3,
+    showProgress: !0,
+    closable: !0,
+    pauseOnHover: !0,
+    pauseOnWindowBlur: !1,
+    duplicateStrategy: "update",
+    newestOnTop: !0,
+    maxVisible: 3
+  };
+  static normalizeOptions(e) {
+    const t = e.duration === !1 ? !1 : Math.max(0, e.duration ?? this.defaults.duration);
+    return {
+      placement: e.placement ?? this.defaults.placement,
+      variant: e.variant ?? this.defaults.variant,
+      duration: t,
+      showProgress: e.showProgress ?? this.defaults.showProgress,
+      closable: e.closable ?? this.defaults.closable,
+      pauseOnHover: e.pauseOnHover ?? this.defaults.pauseOnHover,
+      pauseOnWindowBlur: e.pauseOnWindowBlur ?? this.defaults.pauseOnWindowBlur,
+      duplicateStrategy: e.duplicateStrategy ?? this.defaults.duplicateStrategy,
+      newestOnTop: e.newestOnTop ?? this.defaults.newestOnTop,
+      maxVisible: Math.max(1, e.maxVisible ?? this.defaults.maxVisible),
+      title: e.title,
+      content: e.content,
+      className: e.className,
+      attrs: e.attrs,
+      onShown: e.onShown,
+      onClose: e.onClose
+    };
+  }
+  static createAutoToastId() {
+    return this.idSeed += 1, `sot-toast-${this.idSeed}`;
+  }
+  static createStackedToastId(e) {
+    let t = 1, s = `${e}-${t}`;
+    for (; this.recordById.has(s); )
+      t += 1, s = `${e}-${t}`;
+    return s;
+  }
+  static resolveRole(e) {
+    return e === "danger" ? "alert" : "status";
+  }
+  static getPlacementState(e) {
+    const t = this.placementState.get(e);
+    if (t)
+      return t;
+    const s = document.createElement("div");
+    s.className = `sod-toast-layer sod-toast-layer-${e}`, s.setAttribute("aria-live", "polite"), s.setAttribute("aria-atomic", "false"), document.body.append(s);
+    const i = {
+      container: s,
+      active: [],
+      pending: []
+    };
+    return this.placementState.set(e, i), i;
+  }
+  static createToastElement(e) {
+    const { options: t } = e, s = document.createElement("article");
+    s.className = `sod-toast sod-toast-${t.variant}`, t.className?.trim() && (s.className = `${s.className} ${t.className.trim()}`), s.dataset.toastId = e.id, s.setAttribute("role", this.resolveRole(t.variant)), t.attrs && Object.entries(t.attrs).forEach(([a, f]) => {
+      s.setAttribute(a, f);
+    });
+    const i = document.createElement("header");
+    i.className = "sod-toast-header";
+    let o = null;
+    t.title?.trim() && (o = document.createElement("strong"), o.className = "sod-toast-title", o.textContent = t.title, i.append(o));
+    let r = null;
+    t.closable && (r = document.createElement("button"), r.type = "button", r.className = "sod-toast-close", r.setAttribute("aria-label", "Close"), r.textContent = "×", r.addEventListener("click", () => {
+      this.closeRecord(e, "close-button");
+    }), i.append(r)), i.childElementCount > 0 && s.append(i);
+    const d = document.createElement("div");
+    d.className = "sod-toast-body", W(d, t.content), s.append(d);
+    let h = null;
+    if (t.showProgress && (h = document.createElement("div"), h.className = "sod-toast-progress", s.append(h)), t.pauseOnHover) {
+      const a = () => this.pauseRecord(e), f = () => this.resumeRecord(e);
+      s.addEventListener("mouseenter", a), s.addEventListener("mouseleave", f), e.cleanupListeners.push(() => {
+        s.removeEventListener("mouseenter", a), s.removeEventListener("mouseleave", f);
+      });
+    }
+    if (t.pauseOnWindowBlur) {
+      const a = () => {
+        e.paused || e.status !== "active" || (e.pausedByWindowBlur = !0, this.pauseRecord(e));
+      }, f = () => {
+        e.pausedByWindowBlur && (e.pausedByWindowBlur = !1, this.resumeRecord(e));
+      };
+      window.addEventListener("blur", a), window.addEventListener("focus", f), e.cleanupListeners.push(() => {
+        window.removeEventListener("blur", a), window.removeEventListener("focus", f);
+      });
+    }
+    e.element = s, e.bodyElement = d, e.titleElement = o, e.closeButton = r, e.progressElement = h;
+  }
+  static resetProgressAnimation(e, t) {
+    !e.progressElement || !e.options.showProgress || (e.progressElement.style.display = "block", e.progressElement.style.animation = "none", e.progressElement.style.animationPlayState = "running", e.progressElement.offsetWidth, e.progressElement.style.animation = `sod-toast-progress-countdown ${Math.max(1, t)}ms linear forwards`);
+  }
+  static hideProgress(e) {
+    e.progressElement && (e.progressElement.style.display = "none", e.progressElement.style.animation = "none");
+  }
+  static isRecordActive(e, t) {
+    return e.active.includes(t);
+  }
+  static isRecordPending(e, t) {
+    return e.pending.includes(t);
+  }
+  static mountRecord(e, t) {
+    t.status = "active", t.options.newestOnTop ? e.container.prepend(t.element) : e.container.append(t.element), e.active.push(t), this.startRecordTimer(t), t.options.onShown?.(t.handle);
+  }
+  static queueRecord(e, t) {
+    t.status = "pending", e.pending.push(t);
+  }
+  static startRecordTimer(e) {
+    if (this.clearRecordTimer(e), e.options.duration === !1) {
+      e.remainingMs = !1, e.startedAt = null, this.hideProgress(e);
+      return;
+    }
+    const t = Math.max(0, e.remainingMs === !1 ? e.options.duration : e.remainingMs);
+    if (t === 0) {
+      this.closeRecord(e, "timeout");
+      return;
+    }
+    e.startedAt = Date.now(), e.remainingMs = t, this.resetProgressAnimation(e, t), e.timerId = window.setTimeout(() => {
+      e.timerId = null, this.closeRecord(e, "timeout");
+    }, t);
+  }
+  static clearRecordTimer(e) {
+    e.timerId !== null && (window.clearTimeout(e.timerId), e.timerId = null);
+  }
+  static pauseRecord(e) {
+    if (e.paused || e.status !== "active" || e.options.duration === !1)
+      return;
+    const t = e.startedAt ?? Date.now(), s = Math.max(0, Date.now() - t), i = e.remainingMs === !1 ? e.options.duration : e.remainingMs;
+    e.remainingMs = Math.max(0, i - s), e.startedAt = null, e.paused = !0, e.progressElement && (e.progressElement.style.animationPlayState = "paused"), this.clearRecordTimer(e);
+  }
+  static resumeRecord(e) {
+    !e.paused || e.status !== "active" || (e.paused = !1, e.progressElement && (e.progressElement.style.animationPlayState = "running"), this.startRecordTimer(e));
+  }
+  static rebuildRecordElement(e) {
+    const t = e.element, s = t.parentElement;
+    e.cleanupListeners.forEach((i) => i()), e.cleanupListeners = [], t.remove(), this.createToastElement(e), s && e.status === "active" && (e.options.newestOnTop ? s.prepend(e.element) : s.append(e.element), this.startRecordTimer(e));
+  }
+  static moveRecordToPlacement(e, t) {
+    const s = e.options.placement;
+    if (s === t)
+      return;
+    const i = this.placementState.get(s), o = this.getPlacementState(t), r = !!(i && this.removeFromArray(i.active, e)), d = !!(i && this.removeFromArray(i.pending, e));
+    if (e.options.placement = t, this.clearRecordTimer(e), d && !r) {
+      this.queueRecord(o, e), this.drainQueue(o, t), i && this.drainQueue(i, s);
+      return;
+    }
+    o.active.length < e.options.maxVisible ? this.mountRecord(o, e) : this.queueRecord(o, e), i && this.drainQueue(i, s);
+  }
+  static updateRecord(e, t) {
+    if (t.title !== void 0) {
+      const i = t.title.trim();
+      if (e.options.title = i.length > 0 ? i : void 0, e.options.title)
+        if (e.titleElement)
+          e.titleElement.textContent = e.options.title;
+        else {
+          const o = e.element.querySelector(".sod-toast-header");
+          if (o) {
+            const r = document.createElement("strong");
+            r.className = "sod-toast-title", r.textContent = e.options.title, o.prepend(r), e.titleElement = r;
+          }
+        }
+      else e.titleElement && (e.titleElement.remove(), e.titleElement = null);
+    }
+    t.content !== void 0 && (e.options.content = t.content, e.bodyElement.replaceChildren(), W(e.bodyElement, t.content)), t.variant !== void 0 && (e.options.variant = t.variant, e.element.classList.remove("sod-toast-default", "sod-toast-info", "sod-toast-success", "sod-toast-warning", "sod-toast-danger"), e.element.classList.add(`sod-toast-${t.variant}`), e.element.setAttribute("role", this.resolveRole(t.variant))), t.duration !== void 0 && (e.options.duration = t.duration === !1 ? !1 : Math.max(0, t.duration), e.remainingMs = e.options.duration === !1 ? !1 : e.options.duration, e.paused = !1, e.status === "active" && this.startRecordTimer(e)), t.maxVisible !== void 0 && (e.options.maxVisible = Math.max(1, t.maxVisible)), t.newestOnTop !== void 0 && (e.options.newestOnTop = t.newestOnTop);
+    let s = !1;
+    t.closable !== void 0 && t.closable !== e.options.closable && (e.options.closable = t.closable, s = !0), t.pauseOnHover !== void 0 && t.pauseOnHover !== e.options.pauseOnHover && (e.options.pauseOnHover = t.pauseOnHover, s = !0), t.pauseOnWindowBlur !== void 0 && t.pauseOnWindowBlur !== e.options.pauseOnWindowBlur && (e.options.pauseOnWindowBlur = t.pauseOnWindowBlur, s = !0), t.duplicateStrategy !== void 0 && (e.options.duplicateStrategy = t.duplicateStrategy), t.showProgress !== void 0 && t.showProgress !== e.options.showProgress && (e.options.showProgress = t.showProgress, s = !0), t.className !== void 0 && (e.options.className = t.className, s = !0), t.attrs !== void 0 && (e.options.attrs = t.attrs, s = !0), s && this.rebuildRecordElement(e), t.placement && t.placement !== e.options.placement && this.moveRecordToPlacement(e, t.placement);
+  }
+  static removeStateContainerIfEmpty(e) {
+    const t = this.placementState.get(e);
+    t && (t.active.length > 0 || t.pending.length > 0 || (t.container.remove(), this.placementState.delete(e)));
+  }
+  static drainQueue(e, t) {
+    let s = !0;
+    for (; s && e.pending.length > 0; ) {
+      const i = e.pending[0];
+      if (e.active.length >= i.options.maxVisible) {
+        s = !1;
+        continue;
+      }
+      e.pending.shift(), this.mountRecord(e, i);
+    }
+    this.removeStateContainerIfEmpty(t);
+  }
+  static removeFromArray(e, t) {
+    const s = e.indexOf(t);
+    return s < 0 ? !1 : (e.splice(s, 1), !0);
+  }
+  static finalizeClose(e, t) {
+    if (e.status === "closed")
+      return;
+    const s = e.options.placement, i = this.placementState.get(s);
+    this.clearRecordTimer(e), e.cleanupListeners.forEach((o) => o()), e.cleanupListeners = [], e.element.remove(), e.status = "closed", i && (this.removeFromArray(i.active, e), this.removeFromArray(i.pending, e)), this.recordById.delete(e.id), e.options.onClose?.(t, e.handle), i ? this.drainQueue(i, s) : this.removeStateContainerIfEmpty(s);
+  }
+  static closeRecord(e, t) {
+    if (e.status === "closed" || e.status === "closing")
+      return;
+    const s = e.options.placement, i = this.placementState.get(s);
+    if (!!(i && this.isRecordPending(i, e) && !this.isRecordActive(i, e))) {
+      this.finalizeClose(e, t);
+      return;
+    }
+    e.status = "closing", this.clearRecordTimer(e), e.element.classList.add("is-closing");
+    let r = !1;
+    const d = () => {
+      r || (r = !0, this.finalizeClose(e, t));
+    }, h = (a) => {
+      a.target === e.element && (e.element.removeEventListener("animationend", h), d());
+    };
+    e.element.addEventListener("animationend", h), window.setTimeout(() => {
+      e.element.removeEventListener("animationend", h), d();
+    }, 220);
+  }
+  static createHandle(e) {
+    return {
+      id: e.id,
+      get element() {
+        return e.element;
+      },
+      close: (t = "programmatic") => {
+        this.closeRecord(e, t);
+      },
+      update: (t) => {
+        this.updateRecord(e, t);
+      },
+      pause: () => {
+        this.pauseRecord(e);
+      },
+      resume: () => {
+        this.resumeRecord(e);
+      }
+    };
+  }
+  static show(e) {
+    const s = e.id?.trim() || this.createAutoToastId(), i = this.normalizeOptions(e), o = this.recordById.get(s);
+    if (o) {
+      const a = i.duplicateStrategy;
+      if (a === "ignore")
+        return o.handle;
+      if (a === "stack") {
+        const f = this.createStackedToastId(s);
+        return this.show({ ...e, id: f, duplicateStrategy: "update" });
+      }
+      return this.updateRecord(o, {
+        title: e.title,
+        content: e.content,
+        variant: e.variant,
+        duration: a === "restart-timer" ? e.duration === void 0 ? o.options.duration : i.duration : e.duration === void 0 ? void 0 : i.duration,
+        placement: e.placement,
+        closable: e.closable,
+        pauseOnHover: e.pauseOnHover,
+        pauseOnWindowBlur: e.pauseOnWindowBlur,
+        duplicateStrategy: e.duplicateStrategy,
+        newestOnTop: e.newestOnTop,
+        maxVisible: e.maxVisible,
+        showProgress: e.showProgress,
+        className: e.className,
+        attrs: e.attrs
+      }), o.options.onClose = i.onClose, o.options.onShown = i.onShown, o.handle;
+    }
+    const d = {
+      id: s,
+      options: i,
+      element: document.createElement("article"),
+      status: "pending",
+      timerId: null,
+      remainingMs: i.duration,
+      startedAt: null,
+      paused: !1,
+      pausedByWindowBlur: !1,
+      closeButton: null,
+      progressElement: null,
+      bodyElement: document.createElement("div"),
+      titleElement: null,
+      cleanupListeners: [],
+      handle: void 0
+    };
+    d.handle = this.createHandle(d), this.createToastElement(d), this.recordById.set(s, d);
+    const h = this.getPlacementState(i.placement);
+    return h.active.length < i.maxVisible ? this.mountRecord(h, d) : this.queueRecord(h, d), d.handle;
+  }
+  static clear(e) {
+    (e ? [e] : Array.from(this.placementState.keys())).forEach((s) => {
+      const i = this.placementState.get(s);
+      if (!i)
+        return;
+      const o = [...i.active];
+      [...i.pending].forEach((d) => this.closeRecord(d, "container-clear")), o.forEach((d) => this.closeRecord(d, "container-clear"));
+    });
+  }
+  static configure(e) {
+    e.placement && (this.defaults.placement = e.placement), e.variant && (this.defaults.variant = e.variant), e.duration !== void 0 && (this.defaults.duration = e.duration === !1 ? 3e3 : Math.max(0, e.duration)), e.showProgress !== void 0 && (this.defaults.showProgress = e.showProgress), e.closable !== void 0 && (this.defaults.closable = e.closable), e.pauseOnHover !== void 0 && (this.defaults.pauseOnHover = e.pauseOnHover), e.pauseOnWindowBlur !== void 0 && (this.defaults.pauseOnWindowBlur = e.pauseOnWindowBlur), e.duplicateStrategy !== void 0 && (this.defaults.duplicateStrategy = e.duplicateStrategy), e.newestOnTop !== void 0 && (this.defaults.newestOnTop = e.newestOnTop), e.maxVisible !== void 0 && (this.defaults.maxVisible = Math.max(1, e.maxVisible));
+  }
+  static success(e, t = {}) {
+    return this.show({ ...t, content: e, variant: "success" });
+  }
+  static error(e, t = {}) {
+    return this.show({ ...t, content: e, variant: "danger" });
+  }
+  static info(e, t = {}) {
+    return this.show({ ...t, content: e, variant: "info" });
+  }
+  static warning(e, t = {}) {
+    return this.show({ ...t, content: e, variant: "warning" });
+  }
+  static closeAll() {
+    this.clear();
+  }
+}
+function q(n) {
+  return P.openModal(n);
+}
+function z(n) {
+  return P.openOffcanvas(n);
 }
-function T(t) {
-  return O.openOffcanvas(t);
+function Y(n) {
+  return V.show(n);
 }
 export {
-  O as SoDialog,
-  k as openModal,
-  T as openOffcanvas
+  P as SoDialog,
+  V as SoToast,
+  q as openModal,
+  z as openOffcanvas,
+  Y as toast
 };

package/dist/sodialog.umd.js

@@ -1 +1 @@
-(function(H,W){typeof exports=="object"&&typeof module<"u"?W(exports):typeof define=="function"&&define.amd?define(["exports"],W):(H=typeof globalThis<"u"?globalThis:H||self,W(H.SoDialog={}))})(this,(function(H){"use strict";function W(t,e){if(typeof e=="string"){t.innerHTML=e;return}t.append(e)}function I(t,e="hide"){if(e==="destroy"){t.dataset.sodDestroy="true",t.open&&t.close(),t.remove();return}t.open&&t.close()}function N(t,e){const i=e??"header";return i==="panel"?t:i==="header"?t.querySelector(".sod-header"):i==="title"?t.querySelector(".sod-title"):i==="body"?t.querySelector(".sod-body"):t.querySelector(i)??t.querySelector(".sod-header")}function T(t,e){const i=N(t,e);if(!i)return;t.classList.add("sod-modal-draggable"),i.classList.add("sod-drag-handle");let s=!1,L=0,v=0,d=null,g=0,p=0,o=0;const y=document.body.style.userSelect,c=(r,m)=>{const a=t.getBoundingClientRect(),M=Math.max(0,window.innerWidth-a.width),w=Math.max(0,window.innerHeight-a.height),$=Math.min(0,window.innerWidth-a.width),l=Math.min(0,window.innerHeight-a.height);return{left:Math.min(M,Math.max($,r)),top:Math.min(w,Math.max(l,m))}},h=r=>{if(!s)return;const m=c(r.clientX-L,r.clientY-v);p=m.left,o=m.top,g===0&&(g=window.requestAnimationFrame(()=>{g=0,t.style.inset="auto",t.style.left=`${p}px`,t.style.top=`${o}px`,t.style.right="auto",t.style.bottom="auto",t.style.margin="0",t.style.transform="none"}))},f=()=>{s=!1,i.classList.remove("is-dragging"),t.classList.remove("sod-is-dragging"),t.style.willChange="",document.body.style.userSelect=y,g!==0&&(window.cancelAnimationFrame(g),g=0),d!==null&&i.hasPointerCapture&&i.hasPointerCapture(d)&&i.releasePointerCapture(d),d=null,window.removeEventListener("pointermove",h),window.removeEventListener("pointerup",f),window.removeEventListener("pointercancel",f)};i.addEventListener("pointerdown",r=>{if(r.button!==0||r.target?.closest("button, input, select, textarea, a"))return;r.preventDefault(),t.classList.add("sod-is-dragging"),t.style.animation="none",t.style.transition="none",t.style.transform="none";const a=t.getBoundingClientRect();L=r.clientX-a.left,v=r.clientY-a.top,s=!0,d=r.pointerId,i.setPointerCapture(r.pointerId),t.style.position="fixed",t.style.left=`${a.left}px`,t.style.top=`${a.top}px`,t.style.width=`${Math.round(a.width)}px`,t.style.height=`${Math.round(a.height)}px`,t.style.inset="auto",t.style.right="auto",t.style.bottom="auto",t.style.margin="0",t.style.willChange="left, top",i.classList.add("is-dragging"),document.body.style.userSelect="none",window.addEventListener("pointermove",h),window.addEventListener("pointerup",f),window.addEventListener("pointercancel",f)})}function F(t,e,i,s,L,v){const g=Math.max(1,v?.hybridSwitchRatio??1.35),p=v?.refitOnContentChange??!0,o=Math.max(120,v?.autoFitMinWidth??280),y=Math.max(100,v?.autoFitMinHeight??160),c=v?.scrollMode?v.scrollMode:v?.autoFitUseScrollbar===!1?"viewport":"body";let h=0;const f=(n,u,E)=>Math.min(E,Math.max(u,n)),r=()=>{if(h=0,!t.isConnected||!t.open)return;const n=Math.max(o,window.innerWidth-32),u=Math.max(y,window.innerHeight-32);e.style.width="auto",e.style.height="auto",e.style.maxHeight="none",s.style.maxHeight="none",s.style.overflowY="visible",s.style.overflowX="visible";const E=Math.ceil(e.scrollWidth),b=Math.ceil(e.scrollHeight),D=E>n,R=b>u;if(c==="body"){const C=f(E,o,n),x=f(b,y,u);e.style.width=`${C}px`,e.style.maxWidth=`${n}px`,e.style.height=`${x}px`,e.style.maxHeight=`${u}px`;const S=i.offsetHeight,P=L.offsetHeight,A=Math.max(64,x-S-P);R?(s.style.maxHeight=`${A}px`,s.style.overflowY="auto"):(s.style.maxHeight="none",s.style.overflowY="hidden"),s.style.overflowX=D?"auto":"hidden",t.classList.remove("sod-modal-viewport-scroll")}else if(c==="hybrid")if(b>u*g){const x=Math.max(E,o),S=Math.max(b,y);e.style.width=`${x}px`,e.style.maxWidth="none",e.style.height=`${S}px`,e.style.maxHeight="none",s.style.maxHeight="none",s.style.overflowY="visible",s.style.overflowX="visible",t.classList.add("sod-modal-viewport-scroll")}else{const x=f(E,o,n),S=f(b,y,u);e.style.width=`${x}px`,e.style.maxWidth=`${n}px`,e.style.height=`${S}px`,e.style.maxHeight=`${u}px`;const P=i.offsetHeight,A=L.offsetHeight,X=Math.max(64,S-P-A);R?(s.style.maxHeight=`${X}px`,s.style.overflowY="auto"):(s.style.maxHeight="none",s.style.overflowY="hidden"),s.style.overflowX=D?"auto":"hidden",t.classList.remove("sod-modal-viewport-scroll")}else if(c==="viewport"){const C=Math.max(E,o),x=Math.max(b,y);e.style.width=`${C}px`,e.style.maxWidth="none",e.style.height=`${x}px`,e.style.maxHeight="none",s.style.maxHeight="none",s.style.overflowY="visible",s.style.overflowX="visible",x>u?t.classList.add("sod-modal-viewport-scroll"):t.classList.remove("sod-modal-viewport-scroll")}else{const C=D?Math.max(E,o):f(E,o,n);if(D||R){const x=Math.max(b,y);e.style.width=`${C}px`,e.style.maxWidth="none",e.style.height=`${x}px`,e.style.maxHeight="none",s.style.maxHeight="none",s.style.overflowY="visible",s.style.overflowX="visible",t.classList.add("sod-modal-viewport-scroll")}else e.style.width=`${C}px`,e.style.maxWidth=`${n}px`,e.style.height="auto",e.style.maxHeight="none",s.style.maxHeight="none",s.style.overflowY="visible",s.style.overflowX="visible",t.classList.remove("sod-modal-viewport-scroll")}},m=()=>{h===0&&(h=window.requestAnimationFrame(r))},a=new ResizeObserver(()=>{m()}),M=new MutationObserver(()=>{m()}),w=()=>{m()},$=()=>{m()};t.addEventListener("sod:refit",$),a.observe(s),a.observe(i),a.observe(L),p&&(M.observe(s,{subtree:!0,childList:!0,characterData:!0,attributes:!0}),s.addEventListener("load",w,!0),s.addEventListener("error",w,!0));const l=()=>{m()};return window.addEventListener("resize",l),m(),()=>{h!==0&&(window.cancelAnimationFrame(h),h=0),a.disconnect(),M.disconnect(),window.removeEventListener("resize",l),t.removeEventListener("sod:refit",$),s.removeEventListener("load",w,!0),s.removeEventListener("error",w,!0),t.classList.remove("sod-modal-viewport-scroll"),s.style.maxHeight="",s.style.overflowY="",s.style.overflowX=""}}class O{static modalRegistry=new Map;static modalIdSeed=0;static createAutoModalId(){return this.modalIdSeed+=1,`sod-modal-${this.modalIdSeed}`}static revealExisting(e,i){if(!e.isConnected)return;const s=e.querySelector(".sod-panel");s?.classList.remove("is-closing"),document.body.append(e),e.open||(i?e.showModal():e.show()),e.dispatchEvent(new Event("sod:refit")),s?.focus()}static open(e){const i=e.kind??"modal",s="useModal"in e?e.useModal??!0:!0,L=i==="modal"?e:void 0,v=i==="modal"&&("autoFitSize"in e?e.autoFitSize!==!1:!0);let d,g=!1,p=e.confirmAction??"hide";if(i==="modal"){const l="id"in e&&e.id?.trim()?e.id.trim():void 0;if(g=!!l,d=l??this.createAutoModalId(),e.confirmAction===void 0&&g&&(p="destroy"),l){const n=this.modalRegistry.get(d);if(n&&n.isConnected){this.revealExisting(n,s);const u={dialog:n,close:()=>I(n),refit:()=>n.dispatchEvent(new Event("sod:refit")),id:d};return"onReused"in e&&e.onReused?.(u),u}}this.modalRegistry.delete(d)}const o=document.createElement("dialog");o.className=`sod-dialog sod-${i}`;const y=[];d&&(o.dataset.sodId=d,g&&(o.dataset.sodPersistent="true"));const c=document.createElement("section");if(c.className="sod-panel",c.tabIndex=-1,i==="offcanvas"){const l="placement"in e?e.placement??"end":"end",n="animation"in e?e.animation??"slide":"slide";c.classList.add(`sod-placement-${l}`),c.classList.add(`sod-anim-${n}`)}else{const l="position"in e?e.position??"center":"center",n="animation"in e?e.animation??"fade":"fade";c.classList.add(`sod-modal-pos-${l}`),c.classList.add(`sod-modal-anim-${n}`),v&&c.classList.add("sod-modal-autofit")}const h=document.createElement("header");h.className="sod-header";const f=document.createElement("h2");f.className="sod-title",f.textContent=e.title;const r=document.createElement("button");r.type="button",r.className="sod-close",r.setAttribute("aria-label","Close"),r.textContent="×",r.addEventListener("click",()=>I(o)),h.append(f,r);const m=document.createElement("div");m.className="sod-body",W(m,e.content);const a=document.createElement("footer");a.className="sod-footer";const M=document.createElement("button");M.type="button",M.className="sod-btn sod-btn-outline",M.textContent=e.cancelText??"取消",M.addEventListener("click",()=>{e.onCancel?.(),I(o)});const w=document.createElement("button");w.type="button",w.className="sod-btn sod-btn-primary",w.textContent=e.confirmText??"确认",w.addEventListener("click",()=>{e.onConfirm?.(),I(o,p)}),a.append(M,w),c.append(h,m,a),v&&y.push(F(o,c,h,m,a,L)),i==="modal"&&"draggable"in e&&e.draggable&&T(c,e.dragHandle),o.append(c),(e.closeOnBackdrop??!0)&&o.addEventListener("click",l=>{l.target===o&&I(o)}),(e.closeOnEsc??!0)||o.addEventListener("cancel",l=>{l.preventDefault()}),o.addEventListener("close",()=>{const l=o.dataset.sodPersistent==="true",n=o.dataset.sodDestroy==="true";(!l||n)&&(y.forEach(u=>u()),o.remove(),d&&this.modalRegistry.delete(d),delete o.dataset.sodDestroy)}),document.body.append(o),s?o.showModal():o.show(),o.dispatchEvent(new Event("sod:refit")),d&&this.modalRegistry.set(d,o);const $={dialog:o,close:()=>I(o),refit:()=>o.dispatchEvent(new Event("sod:refit")),id:d};return i==="modal"&&"onCreated"in e&&e.onCreated?.($),$}static openModal(e){return this.open({...e,kind:"modal"})}static openOffcanvas(e){return this.open({...e,kind:"offcanvas"})}}function Y(t){return O.openModal(t)}function k(t){return O.openOffcanvas(t)}H.SoDialog=O,H.openModal=Y,H.openOffcanvas=k,Object.defineProperty(H,Symbol.toStringTag,{value:"Module"})}));
+(function(H,B){typeof exports=="object"&&typeof module<"u"?B(exports):typeof define=="function"&&define.amd?define(["exports"],B):(H=typeof globalThis<"u"?globalThis:H||self,B(H.SoDialog={}))})(this,(function(H){"use strict";function B(n,e){if(typeof e=="string"){n.innerHTML=e;return}n.append(e)}function I(n,e="hide"){if(e==="destroy"){n.dataset.sodDestroy="true",n.open&&n.close(),n.remove();return}n.open&&n.close()}function F(n,e){return n.action?n.action:n.role==="confirm"?e:n.role==="cancel"?"hide":"none"}function k(n){return n==="danger"?"sod-btn-danger":n==="success"?"sod-btn-success":n==="ghost"?"sod-btn-ghost":n==="link"?"sod-btn-link":n==="outline"?"sod-btn-outline":"sod-btn-primary"}function D(n,e){const t=Array.isArray(e)?e.length>0?e:["header"]:[e??"header"],s=[],i=o=>{o&&(s.includes(o)||s.push(o))};for(const o of t){if(o==="panel"){i(n);continue}if(o==="header"){i(n.querySelector(".sod-header"));continue}if(o==="title"){i(n.querySelector(".sod-title"));continue}if(o==="body"){i(n.querySelector(".sod-body"));continue}n.querySelectorAll(o).forEach(r=>{i(r)})}return s.length===0&&i(n.querySelector(".sod-header")),s}function V(n,e){const t=D(n,e);if(t.length===0)return;n.classList.add("sod-modal-draggable"),t.forEach(m=>{m.classList.add("sod-drag-handle")});let s=!1,i=0,o=0,r=null,d=null,h=0,a=0,f=0;const v=document.body.style.userSelect,E=(m,u)=>{const y=n.getBoundingClientRect(),p=Math.max(0,window.innerWidth-y.width),O=Math.max(0,window.innerHeight-y.height),T=Math.min(0,window.innerWidth-y.width),b=Math.min(0,window.innerHeight-y.height);return{left:Math.min(p,Math.max(T,m)),top:Math.min(O,Math.max(b,u))}},R=m=>{if(!s)return;const u=E(m.clientX-i,m.clientY-o);a=u.left,f=u.top,h===0&&(h=window.requestAnimationFrame(()=>{h=0,n.style.inset="auto",n.style.left=`${a}px`,n.style.top=`${f}px`,n.style.right="auto",n.style.bottom="auto",n.style.margin="0",n.style.transform="none"}))},x=()=>{s=!1,t.forEach(m=>{m.classList.remove("is-dragging")}),n.classList.remove("sod-is-dragging"),n.style.willChange="",document.body.style.userSelect=v,h!==0&&(window.cancelAnimationFrame(h),h=0),r!==null&&d!==null&&d.hasPointerCapture&&d.hasPointerCapture(r)&&d.releasePointerCapture(r),r=null,d=null,window.removeEventListener("pointermove",R),window.removeEventListener("pointerup",x),window.removeEventListener("pointercancel",x)};t.forEach(m=>{m.addEventListener("pointerdown",u=>{if(u.button!==0||u.target?.closest("button, input, select, textarea, a"))return;u.preventDefault(),n.classList.add("sod-is-dragging"),n.style.animation="none",n.style.transition="none",n.style.transform="none";const p=n.getBoundingClientRect();i=u.clientX-p.left,o=u.clientY-p.top,s=!0,r=u.pointerId,d=m,m.setPointerCapture(u.pointerId),n.style.position="fixed",n.style.left=`${p.left}px`,n.style.top=`${p.top}px`,n.style.width=`${Math.round(p.width)}px`,n.style.height=`${Math.round(p.height)}px`,n.style.inset="auto",n.style.right="auto",n.style.bottom="auto",n.style.margin="0",n.style.willChange="left, top",m.classList.add("is-dragging"),document.body.style.userSelect="none",window.addEventListener("pointermove",R),window.addEventListener("pointerup",x),window.addEventListener("pointercancel",x)})})}function q(n,e,t,s,i,o){const d=Math.max(1,o?.hybridSwitchRatio??1.35),h=o?.refitOnContentChange??!0,a=Math.max(120,o?.autoFitMinWidth??280),f=Math.max(100,o?.autoFitMinHeight??160),v=o?.scrollMode?o.scrollMode:o?.autoFitUseScrollbar===!1?"viewport":"body";let E=0;const R=(b,M,L)=>Math.min(L,Math.max(M,b)),x=()=>{if(E=0,!n.isConnected||!n.open)return;const b=Math.max(a,window.innerWidth-32),M=Math.max(f,window.innerHeight-32);e.style.width="auto",e.style.height="auto",e.style.maxHeight="none",s.style.maxHeight="none",s.style.overflowY="visible",s.style.overflowX="visible";const L=Math.ceil(e.scrollWidth),l=Math.ceil(e.scrollHeight),c=L>b,g=l>M;if(v==="body"){const w=R(L,a,b),S=R(l,f,M);e.style.width=`${w}px`,e.style.maxWidth=`${b}px`,e.style.height=`${S}px`,e.style.maxHeight=`${M}px`;const A=t.offsetHeight,P=i.offsetHeight,C=Math.max(64,S-A-P);g?(s.style.maxHeight=`${C}px`,s.style.overflowY="auto"):(s.style.maxHeight="none",s.style.overflowY="hidden"),s.style.overflowX=c?"auto":"hidden",n.classList.remove("sod-modal-viewport-scroll")}else if(v==="hybrid")if(l>M*d){const S=Math.max(L,a),A=Math.max(l,f);e.style.width=`${S}px`,e.style.maxWidth="none",e.style.height=`${A}px`,e.style.maxHeight="none",s.style.maxHeight="none",s.style.overflowY="visible",s.style.overflowX="visible",n.classList.add("sod-modal-viewport-scroll")}else{const S=R(L,a,b),A=R(l,f,M);e.style.width=`${S}px`,e.style.maxWidth=`${b}px`,e.style.height=`${A}px`,e.style.maxHeight=`${M}px`;const P=t.offsetHeight,C=i.offsetHeight,$=Math.max(64,A-P-C);g?(s.style.maxHeight=`${$}px`,s.style.overflowY="auto"):(s.style.maxHeight="none",s.style.overflowY="hidden"),s.style.overflowX=c?"auto":"hidden",n.classList.remove("sod-modal-viewport-scroll")}else if(v==="viewport"){const w=Math.max(L,a),S=Math.max(l,f);e.style.width=`${w}px`,e.style.maxWidth="none",e.style.height=`${S}px`,e.style.maxHeight="none",s.style.maxHeight="none",s.style.overflowY="visible",s.style.overflowX="visible",S>M?n.classList.add("sod-modal-viewport-scroll"):n.classList.remove("sod-modal-viewport-scroll")}else{const w=c?Math.max(L,a):R(L,a,b);if(c||g){const S=Math.max(l,f);e.style.width=`${w}px`,e.style.maxWidth="none",e.style.height=`${S}px`,e.style.maxHeight="none",s.style.maxHeight="none",s.style.overflowY="visible",s.style.overflowX="visible",n.classList.add("sod-modal-viewport-scroll")}else e.style.width=`${w}px`,e.style.maxWidth=`${b}px`,e.style.height="auto",e.style.maxHeight="none",s.style.maxHeight="none",s.style.overflowY="visible",s.style.overflowX="visible",n.classList.remove("sod-modal-viewport-scroll")}},m=()=>{E===0&&(E=window.requestAnimationFrame(x))},u=new ResizeObserver(()=>{m()}),y=new MutationObserver(()=>{m()}),p=()=>{m()},O=()=>{m()};n.addEventListener("sod:refit",O),u.observe(s),u.observe(t),u.observe(i),h&&(y.observe(s,{subtree:!0,childList:!0,characterData:!0,attributes:!0}),s.addEventListener("load",p,!0),s.addEventListener("error",p,!0));const T=()=>{m()};return window.addEventListener("resize",T),m(),()=>{E!==0&&(window.cancelAnimationFrame(E),E=0),u.disconnect(),y.disconnect(),window.removeEventListener("resize",T),n.removeEventListener("sod:refit",O),s.removeEventListener("load",p,!0),s.removeEventListener("error",p,!0),n.classList.remove("sod-modal-viewport-scroll"),s.style.maxHeight="",s.style.overflowY="",s.style.overflowX=""}}class W{static modalRegistry=new Map;static handleRegistry=new WeakMap;static modalIdSeed=0;static createAutoModalId(){return this.modalIdSeed+=1,`sod-modal-${this.modalIdSeed}`}static revealExisting(e,t){if(!e.isConnected)return{dialog:e,close:()=>I(e),refit:()=>e.dispatchEvent(new Event("sod:refit")),setFooterButtons:()=>{},updateFooterButton:()=>!1,onAction:()=>()=>{},id:e.dataset.sodId};const s=e.querySelector(".sod-panel");s?.classList.remove("is-closing"),document.body.append(e),e.open||(t?e.showModal():e.show()),e.dispatchEvent(new Event("sod:refit")),s?.focus();const i=this.handleRegistry.get(e);return i?i():{dialog:e,close:()=>I(e),refit:()=>e.dispatchEvent(new Event("sod:refit")),setFooterButtons:()=>{},updateFooterButton:()=>!1,onAction:()=>()=>{},id:e.dataset.sodId}}static open(e){const t=e.kind??"modal",s="useModal"in e?e.useModal??!0:!0,i=t==="modal"?e:void 0,o=t==="modal"&&("autoFitSize"in e?e.autoFitSize!==!1:!0);let r,d=!1,h=e.confirmAction??"hide";if(t==="modal"){const l="id"in e&&e.id?.trim()?e.id.trim():void 0;if(d=!!l,r=l??this.createAutoModalId(),e.confirmAction===void 0&&d&&(h="destroy"),l){const c=this.modalRegistry.get(r);if(c&&c.isConnected){const g=this.revealExisting(c,s);if(e.onAction){const w=g.onAction(e.onAction);c.addEventListener("close",w,{once:!0})}return"onReused"in e&&e.onReused?.(g),g}}this.modalRegistry.delete(r)}const a=document.createElement("dialog");a.className=`sod-dialog sod-${t}`;const f=[];r&&(a.dataset.sodId=r,d&&(a.dataset.sodPersistent="true"));const v=document.createElement("section");if(v.className="sod-panel",v.tabIndex=-1,t==="offcanvas"){const l="placement"in e?e.placement??"end":"end",c="animation"in e?e.animation??"slide":"slide";v.classList.add(`sod-placement-${l}`),v.classList.add(`sod-anim-${c}`)}else{const l="position"in e?e.position??"center":"center",c="animation"in e?e.animation??"fade":"fade";v.classList.add(`sod-modal-pos-${l}`),v.classList.add(`sod-modal-anim-${c}`),o&&v.classList.add("sod-modal-autofit")}const E=document.createElement("header");E.className="sod-header";const R=document.createElement("h2");R.className="sod-title",R.textContent=e.title;const x=document.createElement("button");x.type="button",x.className="sod-close",x.setAttribute("aria-label","Close"),x.textContent="×",x.addEventListener("click",()=>I(a)),E.append(R,x);const m=document.createElement("div");m.className="sod-body",B(m,e.content);const u=document.createElement("footer");u.className="sod-footer",u.dataset.align=e.footerAlign??"end";const y=new Set;e.onAction&&y.add(e.onAction);const p=l=>(y.add(l),()=>{y.delete(l)});let O=e.footerButtons?[...e.footerButtons]:[{id:"cancel",label:e.cancelText??"取消",role:"cancel",variant:"outline"},{id:"confirm",label:e.confirmText??"确认",role:"confirm",variant:"primary"}];const T=()=>({dialog:a,close:()=>I(a),refit:()=>a.dispatchEvent(new Event("sod:refit")),setFooterButtons:l=>{O=[...l],M(),a.dispatchEvent(new Event("sod:refit"))},updateFooterButton:(l,c)=>{const g=O.findIndex(w=>w.id===l);return g<0?!1:(O[g]={...O[g],...c},M(),a.dispatchEvent(new Event("sod:refit")),!0)},onAction:l=>p(l),id:r}),b=(l,c)=>{if(typeof c=="string"){l.textContent=c;return}l.append(c)},M=()=>{if(u.replaceChildren(),e.hideFooter||O.length===0){u.hidden=!0;return}u.hidden=!1;for(const l of O){const c=document.createElement("button");c.type="button",c.className=`sod-btn ${k(l.variant)}`,l.className?.trim()&&(c.className=`${c.className} ${l.className.trim()}`),l.id?.trim()&&(c.dataset.action=l.id.trim()),l.disabled&&(c.disabled=!0),l.attrs&&Object.entries(l.attrs).forEach(([g,w])=>{c.setAttribute(g,w)}),b(c,l.label),c.addEventListener("click",g=>{(async()=>{const w=T(),A={action:l.id??l.role??"custom",button:l,buttonElement:c,dialog:a,event:g,handle:w};if(await l.onClick?.(A)===!1)return;l.role==="cancel"&&e.onCancel?.(),l.role==="confirm"&&e.onConfirm?.(),y.forEach($=>{$(A)});const C=F(l,h);C==="hide"&&I(a,"hide"),C==="destroy"&&I(a,"destroy")})()}),u.append(c)}};M(),v.append(E,m,u),o&&f.push(q(a,v,E,m,u,i)),t==="modal"&&"draggable"in e&&e.draggable&&V(v,e.dragHandle),a.append(v),(e.closeOnBackdrop??!0)&&a.addEventListener("click",l=>{l.target===a&&I(a)}),(e.closeOnEsc??!0)||a.addEventListener("cancel",l=>{l.preventDefault()}),a.addEventListener("close",()=>{const l=a.dataset.sodPersistent==="true",c=a.dataset.sodDestroy==="true";(!l||c)&&(f.forEach(g=>g()),y.clear(),a.remove(),r&&this.modalRegistry.delete(r),this.handleRegistry.delete(a),delete a.dataset.sodDestroy)}),document.body.append(a),s?a.showModal():a.show(),a.dispatchEvent(new Event("sod:refit")),r&&this.modalRegistry.set(r,a),this.handleRegistry.set(a,T);const L=T();return t==="modal"&&"onCreated"in e&&e.onCreated?.(L),L}static openModal(e){return this.open({...e,kind:"modal"})}static openOffcanvas(e){return this.open({...e,kind:"offcanvas"})}}class N{static placementState=new Map;static recordById=new Map;static idSeed=0;static defaults={placement:"top-end",variant:"default",duration:3e3,showProgress:!0,closable:!0,pauseOnHover:!0,pauseOnWindowBlur:!1,duplicateStrategy:"update",newestOnTop:!0,maxVisible:3};static normalizeOptions(e){const t=e.duration===!1?!1:Math.max(0,e.duration??this.defaults.duration);return{placement:e.placement??this.defaults.placement,variant:e.variant??this.defaults.variant,duration:t,showProgress:e.showProgress??this.defaults.showProgress,closable:e.closable??this.defaults.closable,pauseOnHover:e.pauseOnHover??this.defaults.pauseOnHover,pauseOnWindowBlur:e.pauseOnWindowBlur??this.defaults.pauseOnWindowBlur,duplicateStrategy:e.duplicateStrategy??this.defaults.duplicateStrategy,newestOnTop:e.newestOnTop??this.defaults.newestOnTop,maxVisible:Math.max(1,e.maxVisible??this.defaults.maxVisible),title:e.title,content:e.content,className:e.className,attrs:e.attrs,onShown:e.onShown,onClose:e.onClose}}static createAutoToastId(){return this.idSeed+=1,`sot-toast-${this.idSeed}`}static createStackedToastId(e){let t=1,s=`${e}-${t}`;for(;this.recordById.has(s);)t+=1,s=`${e}-${t}`;return s}static resolveRole(e){return e==="danger"?"alert":"status"}static getPlacementState(e){const t=this.placementState.get(e);if(t)return t;const s=document.createElement("div");s.className=`sod-toast-layer sod-toast-layer-${e}`,s.setAttribute("aria-live","polite"),s.setAttribute("aria-atomic","false"),document.body.append(s);const i={container:s,active:[],pending:[]};return this.placementState.set(e,i),i}static createToastElement(e){const{options:t}=e,s=document.createElement("article");s.className=`sod-toast sod-toast-${t.variant}`,t.className?.trim()&&(s.className=`${s.className} ${t.className.trim()}`),s.dataset.toastId=e.id,s.setAttribute("role",this.resolveRole(t.variant)),t.attrs&&Object.entries(t.attrs).forEach(([a,f])=>{s.setAttribute(a,f)});const i=document.createElement("header");i.className="sod-toast-header";let o=null;t.title?.trim()&&(o=document.createElement("strong"),o.className="sod-toast-title",o.textContent=t.title,i.append(o));let r=null;t.closable&&(r=document.createElement("button"),r.type="button",r.className="sod-toast-close",r.setAttribute("aria-label","Close"),r.textContent="×",r.addEventListener("click",()=>{this.closeRecord(e,"close-button")}),i.append(r)),i.childElementCount>0&&s.append(i);const d=document.createElement("div");d.className="sod-toast-body",B(d,t.content),s.append(d);let h=null;if(t.showProgress&&(h=document.createElement("div"),h.className="sod-toast-progress",s.append(h)),t.pauseOnHover){const a=()=>this.pauseRecord(e),f=()=>this.resumeRecord(e);s.addEventListener("mouseenter",a),s.addEventListener("mouseleave",f),e.cleanupListeners.push(()=>{s.removeEventListener("mouseenter",a),s.removeEventListener("mouseleave",f)})}if(t.pauseOnWindowBlur){const a=()=>{e.paused||e.status!=="active"||(e.pausedByWindowBlur=!0,this.pauseRecord(e))},f=()=>{e.pausedByWindowBlur&&(e.pausedByWindowBlur=!1,this.resumeRecord(e))};window.addEventListener("blur",a),window.addEventListener("focus",f),e.cleanupListeners.push(()=>{window.removeEventListener("blur",a),window.removeEventListener("focus",f)})}e.element=s,e.bodyElement=d,e.titleElement=o,e.closeButton=r,e.progressElement=h}static resetProgressAnimation(e,t){!e.progressElement||!e.options.showProgress||(e.progressElement.style.display="block",e.progressElement.style.animation="none",e.progressElement.style.animationPlayState="running",e.progressElement.offsetWidth,e.progressElement.style.animation=`sod-toast-progress-countdown ${Math.max(1,t)}ms linear forwards`)}static hideProgress(e){e.progressElement&&(e.progressElement.style.display="none",e.progressElement.style.animation="none")}static isRecordActive(e,t){return e.active.includes(t)}static isRecordPending(e,t){return e.pending.includes(t)}static mountRecord(e,t){t.status="active",t.options.newestOnTop?e.container.prepend(t.element):e.container.append(t.element),e.active.push(t),this.startRecordTimer(t),t.options.onShown?.(t.handle)}static queueRecord(e,t){t.status="pending",e.pending.push(t)}static startRecordTimer(e){if(this.clearRecordTimer(e),e.options.duration===!1){e.remainingMs=!1,e.startedAt=null,this.hideProgress(e);return}const t=Math.max(0,e.remainingMs===!1?e.options.duration:e.remainingMs);if(t===0){this.closeRecord(e,"timeout");return}e.startedAt=Date.now(),e.remainingMs=t,this.resetProgressAnimation(e,t),e.timerId=window.setTimeout(()=>{e.timerId=null,this.closeRecord(e,"timeout")},t)}static clearRecordTimer(e){e.timerId!==null&&(window.clearTimeout(e.timerId),e.timerId=null)}static pauseRecord(e){if(e.paused||e.status!=="active"||e.options.duration===!1)return;const t=e.startedAt??Date.now(),s=Math.max(0,Date.now()-t),i=e.remainingMs===!1?e.options.duration:e.remainingMs;e.remainingMs=Math.max(0,i-s),e.startedAt=null,e.paused=!0,e.progressElement&&(e.progressElement.style.animationPlayState="paused"),this.clearRecordTimer(e)}static resumeRecord(e){!e.paused||e.status!=="active"||(e.paused=!1,e.progressElement&&(e.progressElement.style.animationPlayState="running"),this.startRecordTimer(e))}static rebuildRecordElement(e){const t=e.element,s=t.parentElement;e.cleanupListeners.forEach(i=>i()),e.cleanupListeners=[],t.remove(),this.createToastElement(e),s&&e.status==="active"&&(e.options.newestOnTop?s.prepend(e.element):s.append(e.element),this.startRecordTimer(e))}static moveRecordToPlacement(e,t){const s=e.options.placement;if(s===t)return;const i=this.placementState.get(s),o=this.getPlacementState(t),r=!!(i&&this.removeFromArray(i.active,e)),d=!!(i&&this.removeFromArray(i.pending,e));if(e.options.placement=t,this.clearRecordTimer(e),d&&!r){this.queueRecord(o,e),this.drainQueue(o,t),i&&this.drainQueue(i,s);return}o.active.length<e.options.maxVisible?this.mountRecord(o,e):this.queueRecord(o,e),i&&this.drainQueue(i,s)}static updateRecord(e,t){if(t.title!==void 0){const i=t.title.trim();if(e.options.title=i.length>0?i:void 0,e.options.title)if(e.titleElement)e.titleElement.textContent=e.options.title;else{const o=e.element.querySelector(".sod-toast-header");if(o){const r=document.createElement("strong");r.className="sod-toast-title",r.textContent=e.options.title,o.prepend(r),e.titleElement=r}}else e.titleElement&&(e.titleElement.remove(),e.titleElement=null)}t.content!==void 0&&(e.options.content=t.content,e.bodyElement.replaceChildren(),B(e.bodyElement,t.content)),t.variant!==void 0&&(e.options.variant=t.variant,e.element.classList.remove("sod-toast-default","sod-toast-info","sod-toast-success","sod-toast-warning","sod-toast-danger"),e.element.classList.add(`sod-toast-${t.variant}`),e.element.setAttribute("role",this.resolveRole(t.variant))),t.duration!==void 0&&(e.options.duration=t.duration===!1?!1:Math.max(0,t.duration),e.remainingMs=e.options.duration===!1?!1:e.options.duration,e.paused=!1,e.status==="active"&&this.startRecordTimer(e)),t.maxVisible!==void 0&&(e.options.maxVisible=Math.max(1,t.maxVisible)),t.newestOnTop!==void 0&&(e.options.newestOnTop=t.newestOnTop);let s=!1;t.closable!==void 0&&t.closable!==e.options.closable&&(e.options.closable=t.closable,s=!0),t.pauseOnHover!==void 0&&t.pauseOnHover!==e.options.pauseOnHover&&(e.options.pauseOnHover=t.pauseOnHover,s=!0),t.pauseOnWindowBlur!==void 0&&t.pauseOnWindowBlur!==e.options.pauseOnWindowBlur&&(e.options.pauseOnWindowBlur=t.pauseOnWindowBlur,s=!0),t.duplicateStrategy!==void 0&&(e.options.duplicateStrategy=t.duplicateStrategy),t.showProgress!==void 0&&t.showProgress!==e.options.showProgress&&(e.options.showProgress=t.showProgress,s=!0),t.className!==void 0&&(e.options.className=t.className,s=!0),t.attrs!==void 0&&(e.options.attrs=t.attrs,s=!0),s&&this.rebuildRecordElement(e),t.placement&&t.placement!==e.options.placement&&this.moveRecordToPlacement(e,t.placement)}static removeStateContainerIfEmpty(e){const t=this.placementState.get(e);t&&(t.active.length>0||t.pending.length>0||(t.container.remove(),this.placementState.delete(e)))}static drainQueue(e,t){let s=!0;for(;s&&e.pending.length>0;){const i=e.pending[0];if(e.active.length>=i.options.maxVisible){s=!1;continue}e.pending.shift(),this.mountRecord(e,i)}this.removeStateContainerIfEmpty(t)}static removeFromArray(e,t){const s=e.indexOf(t);return s<0?!1:(e.splice(s,1),!0)}static finalizeClose(e,t){if(e.status==="closed")return;const s=e.options.placement,i=this.placementState.get(s);this.clearRecordTimer(e),e.cleanupListeners.forEach(o=>o()),e.cleanupListeners=[],e.element.remove(),e.status="closed",i&&(this.removeFromArray(i.active,e),this.removeFromArray(i.pending,e)),this.recordById.delete(e.id),e.options.onClose?.(t,e.handle),i?this.drainQueue(i,s):this.removeStateContainerIfEmpty(s)}static closeRecord(e,t){if(e.status==="closed"||e.status==="closing")return;const s=e.options.placement,i=this.placementState.get(s);if(!!(i&&this.isRecordPending(i,e)&&!this.isRecordActive(i,e))){this.finalizeClose(e,t);return}e.status="closing",this.clearRecordTimer(e),e.element.classList.add("is-closing");let r=!1;const d=()=>{r||(r=!0,this.finalizeClose(e,t))},h=a=>{a.target===e.element&&(e.element.removeEventListener("animationend",h),d())};e.element.addEventListener("animationend",h),window.setTimeout(()=>{e.element.removeEventListener("animationend",h),d()},220)}static createHandle(e){return{id:e.id,get element(){return e.element},close:(t="programmatic")=>{this.closeRecord(e,t)},update:t=>{this.updateRecord(e,t)},pause:()=>{this.pauseRecord(e)},resume:()=>{this.resumeRecord(e)}}}static show(e){const s=e.id?.trim()||this.createAutoToastId(),i=this.normalizeOptions(e),o=this.recordById.get(s);if(o){const a=i.duplicateStrategy;if(a==="ignore")return o.handle;if(a==="stack"){const f=this.createStackedToastId(s);return this.show({...e,id:f,duplicateStrategy:"update"})}return this.updateRecord(o,{title:e.title,content:e.content,variant:e.variant,duration:a==="restart-timer"?e.duration===void 0?o.options.duration:i.duration:e.duration===void 0?void 0:i.duration,placement:e.placement,closable:e.closable,pauseOnHover:e.pauseOnHover,pauseOnWindowBlur:e.pauseOnWindowBlur,duplicateStrategy:e.duplicateStrategy,newestOnTop:e.newestOnTop,maxVisible:e.maxVisible,showProgress:e.showProgress,className:e.className,attrs:e.attrs}),o.options.onClose=i.onClose,o.options.onShown=i.onShown,o.handle}const d={id:s,options:i,element:document.createElement("article"),status:"pending",timerId:null,remainingMs:i.duration,startedAt:null,paused:!1,pausedByWindowBlur:!1,closeButton:null,progressElement:null,bodyElement:document.createElement("div"),titleElement:null,cleanupListeners:[],handle:void 0};d.handle=this.createHandle(d),this.createToastElement(d),this.recordById.set(s,d);const h=this.getPlacementState(i.placement);return h.active.length<i.maxVisible?this.mountRecord(h,d):this.queueRecord(h,d),d.handle}static clear(e){(e?[e]:Array.from(this.placementState.keys())).forEach(s=>{const i=this.placementState.get(s);if(!i)return;const o=[...i.active];[...i.pending].forEach(d=>this.closeRecord(d,"container-clear")),o.forEach(d=>this.closeRecord(d,"container-clear"))})}static configure(e){e.placement&&(this.defaults.placement=e.placement),e.variant&&(this.defaults.variant=e.variant),e.duration!==void 0&&(this.defaults.duration=e.duration===!1?3e3:Math.max(0,e.duration)),e.showProgress!==void 0&&(this.defaults.showProgress=e.showProgress),e.closable!==void 0&&(this.defaults.closable=e.closable),e.pauseOnHover!==void 0&&(this.defaults.pauseOnHover=e.pauseOnHover),e.pauseOnWindowBlur!==void 0&&(this.defaults.pauseOnWindowBlur=e.pauseOnWindowBlur),e.duplicateStrategy!==void 0&&(this.defaults.duplicateStrategy=e.duplicateStrategy),e.newestOnTop!==void 0&&(this.defaults.newestOnTop=e.newestOnTop),e.maxVisible!==void 0&&(this.defaults.maxVisible=Math.max(1,e.maxVisible))}static success(e,t={}){return this.show({...t,content:e,variant:"success"})}static error(e,t={}){return this.show({...t,content:e,variant:"danger"})}static info(e,t={}){return this.show({...t,content:e,variant:"info"})}static warning(e,t={}){return this.show({...t,content:e,variant:"warning"})}static closeAll(){this.clear()}}function z(n){return W.openModal(n)}function Y(n){return W.openOffcanvas(n)}function X(n){return N.show(n)}H.SoDialog=W,H.SoToast=N,H.openModal=z,H.openOffcanvas=Y,H.toast=X,Object.defineProperty(H,Symbol.toStringTag,{value:"Module"})}));

package/dist/types/lib.d.ts

@@ -4,8 +4,27 @@ export type SoOffcanvasPlacement = 'start' | 'end' | 'top' | 'bottom';
 export type SoOffcanvasAnimation = 'slide' | 'fade' | 'zoom';
 export type SoModalPosition = 'center' | 'top' | 'bottom';
 export type SoModalAnimation = 'slide' | 'fade' | 'zoom';
-export type SoModalDragHandle = 'header' | 'title' | 'body' | 'panel' | string;
+export type SoModalDragHandleTarget = 'header' | 'title' | 'body' | 'panel' | string;
+export type SoModalDragHandle = SoModalDragHandleTarget | SoModalDragHandleTarget[];
 export type SoModalScrollMode = 'body' | 'viewport' | 'none' | 'hybrid';
+export type SoFooterButtonVariant = 'primary' | 'outline' | 'danger' | 'success' | 'ghost' | 'link';
+export type SoFooterAlign = 'start' | 'center' | 'end' | 'between';
+export type SoFooterButtonAction = 'none' | 'hide' | 'destroy';
+export type SoToastPlacement = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
+export type SoToastVariant = 'default' | 'info' | 'success' | 'warning' | 'danger';
+export type SoToastCloseReason = 'timeout' | 'manual' | 'close-button' | 'container-clear' | 'programmatic';
+export type SoToastDuplicateStrategy = 'update' | 'ignore' | 'restart-timer' | 'stack';
+export interface SoDialogFooterButton {
+    id?: string;
+    label: string | Node;
+    role?: 'confirm' | 'cancel' | 'custom';
+    variant?: SoFooterButtonVariant;
+    className?: string;
+    action?: SoFooterButtonAction;
+    disabled?: boolean;
+    attrs?: Record<string, string>;
+    onClick?: (context: SoDialogFooterActionContext) => void | boolean | Promise<void | boolean>;
+}
 export interface SoDialogBaseOptions {
     title: string;
     content: string | Node;
@@ -16,6 +35,10 @@ export interface SoDialogBaseOptions {
     closeOnEsc?: boolean;
     onConfirm?: () => void;
     onCancel?: () => void;
+    footerButtons?: SoDialogFooterButton[];
+    hideFooter?: boolean;
+    footerAlign?: SoFooterAlign;
+    onAction?: SoDialogActionListener;
 }
 export interface SoDialogModalOptions extends SoDialogBaseOptions {
     id?: string;
@@ -45,10 +68,50 @@ export interface SoDialogHandle {
     dialog: HTMLDialogElement;
     close: () => void;
     refit: () => void;
+    setFooterButtons: (buttons: SoDialogFooterButton[]) => void;
+    updateFooterButton: (id: string, updates: Partial<SoDialogFooterButton>) => boolean;
+    onAction: (listener: SoDialogActionListener) => () => void;
     id?: string;
 }
+export interface SoDialogFooterActionContext {
+    action: string;
+    button: SoDialogFooterButton;
+    buttonElement: HTMLButtonElement;
+    dialog: HTMLDialogElement;
+    event: MouseEvent;
+    handle: SoDialogHandle;
+}
+export type SoDialogActionListener = (context: SoDialogFooterActionContext) => void;
+export interface SoToastOptions {
+    id?: string;
+    title?: string;
+    content: string | Node;
+    placement?: SoToastPlacement;
+    variant?: SoToastVariant;
+    duration?: number | false;
+    showProgress?: boolean;
+    closable?: boolean;
+    pauseOnHover?: boolean;
+    pauseOnWindowBlur?: boolean;
+    duplicateStrategy?: SoToastDuplicateStrategy;
+    newestOnTop?: boolean;
+    maxVisible?: number;
+    className?: string;
+    attrs?: Record<string, string>;
+    onShown?: (handle: SoToastHandle) => void;
+    onClose?: (reason: SoToastCloseReason, handle: SoToastHandle) => void;
+}
+export interface SoToastHandle {
+    id: string;
+    element: HTMLElement;
+    close: (reason?: Exclude<SoToastCloseReason, 'timeout' | 'close-button'>) => void;
+    update: (patch: Partial<Pick<SoToastOptions, 'title' | 'content' | 'variant' | 'duration'>>) => void;
+    pause: () => void;
+    resume: () => void;
+}
 export declare class SoDialog {
     private static modalRegistry;
+    private static handleRegistry;
     private static modalIdSeed;
     private static createAutoModalId;
     private static revealExisting;
@@ -56,5 +119,45 @@ export declare class SoDialog {
     static openModal(options: SoDialogModalOptions): SoDialogHandle;
     static openOffcanvas(options: Omit<SoDialogOffcanvasOptions, 'kind'>): SoDialogHandle;
 }
+export declare class SoToast {
+    private static placementState;
+    private static recordById;
+    private static idSeed;
+    private static defaults;
+    private static normalizeOptions;
+    private static createAutoToastId;
+    private static createStackedToastId;
+    private static resolveRole;
+    private static getPlacementState;
+    private static createToastElement;
+    private static resetProgressAnimation;
+    private static hideProgress;
+    private static isRecordActive;
+    private static isRecordPending;
+    private static mountRecord;
+    private static queueRecord;
+    private static startRecordTimer;
+    private static clearRecordTimer;
+    private static pauseRecord;
+    private static resumeRecord;
+    private static rebuildRecordElement;
+    private static moveRecordToPlacement;
+    private static updateRecord;
+    private static removeStateContainerIfEmpty;
+    private static drainQueue;
+    private static removeFromArray;
+    private static finalizeClose;
+    private static closeRecord;
+    private static createHandle;
+    static show(options: SoToastOptions): SoToastHandle;
+    static clear(placement?: SoToastPlacement): void;
+    static configure(defaults: Partial<SoToastOptions>): void;
+    static success(content: string | Node, options?: Omit<SoToastOptions, 'content' | 'variant'>): SoToastHandle;
+    static error(content: string | Node, options?: Omit<SoToastOptions, 'content' | 'variant'>): SoToastHandle;
+    static info(content: string | Node, options?: Omit<SoToastOptions, 'content' | 'variant'>): SoToastHandle;
+    static warning(content: string | Node, options?: Omit<SoToastOptions, 'content' | 'variant'>): SoToastHandle;
+    static closeAll(): void;
+}
 export declare function openModal(options: SoDialogModalOptions): SoDialogHandle;
 export declare function openOffcanvas(options: Omit<SoDialogOffcanvasOptions, 'kind'>): SoDialogHandle;
+export declare function toast(options: SoToastOptions): SoToastHandle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sodialog",
-  "version": "0.1.11",
+  "version": "0.1.14",
   "description": "A reusable HTML5 dialog-based modal and offcanvas library.",
   "keywords": [
     "dialog",
@@ -38,6 +38,8 @@
     "build": "vite build && npm run build:types",
     "build:types": "tsc -p tsconfig.build.json",
     "build:demo": "vite build --mode demo",
+    "release:check": "node scripts/check-release-version.mjs",
+    "docs:changelog": "node scripts/generate-changelog.mjs",
     "preview": "vite preview",
     "lint": "eslint .",
     "prepublishOnly": "npm run lint && npm run build"