sodialog 0.1.13 → 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
@@ -143,6 +155,35 @@ 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
@@ -152,6 +193,17 @@ 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、发布流程总览

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-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)}}@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,157 +1,157 @@
-function O(t, e) {
+function W(n, e) {
   if (typeof e == "string") {
-    t.innerHTML = e;
+    n.innerHTML = e;
     return;
   }
-  t.append(e);
+  n.append(e);
 }
-function F(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 k(t, e) {
-  return t.action ? t.action : t.role === "confirm" ? e : t.role === "cancel" ? "hide" : "none";
+function $(n, e) {
+  return n.action ? n.action : n.role === "confirm" ? e : n.role === "cancel" ? "hide" : "none";
 }
-function D(t) {
-  return t === "danger" ? "sod-btn-danger" : t === "success" ? "sod-btn-success" : t === "ghost" ? "sod-btn-ghost" : t === "link" ? "sod-btn-link" : t === "outline" ? "sod-btn-outline" : "sod-btn-primary";
+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 N(t, e) {
-  const c = Array.isArray(e) ? e.length > 0 ? e : ["header"] : [e ?? "header"], n = [], h = (d) => {
-    d && (n.includes(d) || n.push(d));
+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 d of c) {
-    if (d === "panel") {
-      h(t);
+  for (const o of t) {
+    if (o === "panel") {
+      i(n);
       continue;
     }
-    if (d === "header") {
-      h(t.querySelector(".sod-header"));
+    if (o === "header") {
+      i(n.querySelector(".sod-header"));
       continue;
     }
-    if (d === "title") {
-      h(t.querySelector(".sod-title"));
+    if (o === "title") {
+      i(n.querySelector(".sod-title"));
       continue;
     }
-    if (d === "body") {
-      h(t.querySelector(".sod-body"));
+    if (o === "body") {
+      i(n.querySelector(".sod-body"));
       continue;
     }
-    t.querySelectorAll(d).forEach((l) => {
-      h(l);
+    n.querySelectorAll(o).forEach((r) => {
+      i(r);
     });
   }
-  return n.length === 0 && h(t.querySelector(".sod-header")), n;
+  return s.length === 0 && i(n.querySelector(".sod-header")), s;
 }
-function P(t, e) {
-  const c = N(t, e);
-  if (c.length === 0)
+function k(n, e) {
+  const t = F(n, e);
+  if (t.length === 0)
     return;
-  t.classList.add("sod-modal-draggable"), c.forEach((a) => {
-    a.classList.add("sod-drag-handle");
+  n.classList.add("sod-modal-draggable"), t.forEach((m) => {
+    m.classList.add("sod-drag-handle");
   });
-  let n = !1, h = 0, d = 0, l = null, M = null, b = 0, o = 0, L = 0;
-  const f = document.body.style.userSelect, g = (a, r) => {
-    const w = t.getBoundingClientRect(), m = Math.max(0, window.innerWidth - w.width), A = Math.max(0, window.innerHeight - w.height), C = Math.min(0, window.innerWidth - w.width), x = Math.min(0, window.innerHeight - w.height);
+  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(C, a)),
-      top: Math.min(A, Math.max(x, r))
+      left: Math.min(p, Math.max(A, m)),
+      top: Math.min(S, Math.max(b, u))
     };
-  }, H = (a) => {
-    if (!n)
+  }, R = (m) => {
+    if (!s)
       return;
-    const r = g(a.clientX - h, a.clientY - d);
-    o = r.left, L = r.top, b === 0 && (b = window.requestAnimationFrame(() => {
-      b = 0, t.style.inset = "auto", t.style.left = `${o}px`, t.style.top = `${L}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";
     }));
-  }, y = () => {
-    n = !1, c.forEach((a) => {
-      a.classList.remove("is-dragging");
-    }), t.classList.remove("sod-is-dragging"), t.style.willChange = "", document.body.style.userSelect = f, b !== 0 && (window.cancelAnimationFrame(b), b = 0), l !== null && M !== null && M.hasPointerCapture && M.hasPointerCapture(l) && M.releasePointerCapture(l), l = null, M = null, window.removeEventListener("pointermove", H), window.removeEventListener("pointerup", y), window.removeEventListener("pointercancel", y);
+  }, 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);
   };
-  c.forEach((a) => {
-    a.addEventListener("pointerdown", (r) => {
-      if (r.button !== 0 || r.target?.closest("button, input, select, textarea, a"))
+  t.forEach((m) => {
+    m.addEventListener("pointerdown", (u) => {
+      if (u.button !== 0 || u.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 m = t.getBoundingClientRect();
-      h = r.clientX - m.left, d = r.clientY - m.top, n = !0, l = r.pointerId, M = a, a.setPointerCapture(r.pointerId), t.style.position = "fixed", t.style.left = `${m.left}px`, t.style.top = `${m.top}px`, t.style.width = `${Math.round(m.width)}px`, t.style.height = `${Math.round(m.height)}px`, t.style.inset = "auto", t.style.right = "auto", t.style.bottom = "auto", t.style.margin = "0", t.style.willChange = "left, top", a.classList.add("is-dragging"), document.body.style.userSelect = "none", window.addEventListener("pointermove", H), window.addEventListener("pointerup", y), window.addEventListener("pointercancel", y);
+      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, c, n, h, d) {
-  const M = Math.max(1, d?.hybridSwitchRatio ?? 1.35), b = d?.refitOnContentChange ?? !0, o = Math.max(120, d?.autoFitMinWidth ?? 280), L = Math.max(100, d?.autoFitMinHeight ?? 160), f = d?.scrollMode ? d.scrollMode : d?.autoFitUseScrollbar === !1 ? "viewport" : "body";
-  let g = 0;
-  const H = (x, E, p) => Math.min(p, Math.max(E, x)), y = () => {
-    if (g = 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 x = Math.max(o, window.innerWidth - 32), E = Math.max(L, window.innerHeight - 32);
-    e.style.width = "auto", e.style.height = "auto", e.style.maxHeight = "none", n.style.maxHeight = "none", n.style.overflowY = "visible", n.style.overflowX = "visible";
-    const p = Math.ceil(e.scrollWidth), s = Math.ceil(e.scrollHeight), i = p > x, u = s > E;
-    if (f === "body") {
-      const v = H(p, o, x), $ = H(s, L, E);
-      e.style.width = `${v}px`, e.style.maxWidth = `${x}px`, e.style.height = `${$}px`, e.style.maxHeight = `${E}px`;
-      const I = c.offsetHeight, W = h.offsetHeight, R = Math.max(64, $ - I - W);
-      u ? (n.style.maxHeight = `${R}px`, n.style.overflowY = "auto") : (n.style.maxHeight = "none", n.style.overflowY = "hidden"), n.style.overflowX = i ? "auto" : "hidden", t.classList.remove("sod-modal-viewport-scroll");
-    } else if (f === "hybrid")
-      if (s > E * M) {
-        const $ = Math.max(p, o), I = Math.max(s, L);
-        e.style.width = `${$}px`, e.style.maxWidth = "none", e.style.height = `${I}px`, e.style.maxHeight = "none", n.style.maxHeight = "none", n.style.overflowY = "visible", n.style.overflowX = "visible", t.classList.add("sod-modal-viewport-scroll");
+    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), 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 $ = H(p, o, x), I = H(s, L, E);
-        e.style.width = `${$}px`, e.style.maxWidth = `${x}px`, e.style.height = `${I}px`, e.style.maxHeight = `${E}px`;
-        const W = c.offsetHeight, R = h.offsetHeight, S = Math.max(64, I - W - R);
-        u ? (n.style.maxHeight = `${S}px`, n.style.overflowY = "auto") : (n.style.maxHeight = "none", n.style.overflowY = "hidden"), n.style.overflowX = i ? "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 (f === "viewport") {
-      const v = Math.max(p, o), $ = Math.max(s, L);
-      e.style.width = `${v}px`, e.style.maxWidth = "none", e.style.height = `${$}px`, e.style.maxHeight = "none", n.style.maxHeight = "none", n.style.overflowY = "visible", n.style.overflowX = "visible", $ > E ? 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 v = i ? Math.max(p, o) : H(p, o, x);
-      if (i || u) {
-        const $ = Math.max(s, L);
-        e.style.width = `${v}px`, e.style.maxWidth = "none", e.style.height = `${$}px`, e.style.maxHeight = "none", n.style.maxHeight = "none", n.style.overflowY = "visible", n.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 = `${v}px`, e.style.maxWidth = `${x}px`, e.style.height = "auto", e.style.maxHeight = "none", n.style.maxHeight = "none", n.style.overflowY = "visible", n.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");
     }
-  }, a = () => {
-    g === 0 && (g = window.requestAnimationFrame(y));
-  }, r = new ResizeObserver(() => {
-    a();
-  }), w = new MutationObserver(() => {
-    a();
-  }), m = () => {
-    a();
-  }, A = () => {
-    a();
+  }, m = () => {
+    E === 0 && (E = window.requestAnimationFrame(x));
+  }, u = new ResizeObserver(() => {
+    m();
+  }), y = new MutationObserver(() => {
+    m();
+  }), p = () => {
+    m();
+  }, S = () => {
+    m();
   };
-  t.addEventListener("sod:refit", A), r.observe(n), r.observe(c), r.observe(h), b && (w.observe(n, {
+  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
-  }), n.addEventListener("load", m, !0), n.addEventListener("error", m, !0));
-  const C = () => {
-    a();
+  }), s.addEventListener("load", p, !0), s.addEventListener("error", p, !0));
+  const A = () => {
+    m();
   };
-  return window.addEventListener("resize", C), a(), () => {
-    g !== 0 && (window.cancelAnimationFrame(g), g = 0), r.disconnect(), w.disconnect(), window.removeEventListener("resize", C), t.removeEventListener("sod:refit", A), n.removeEventListener("load", m, !0), n.removeEventListener("error", m, !0), t.classList.remove("sod-modal-viewport-scroll"), n.style.maxHeight = "", n.style.overflowY = "", n.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 B {
+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, c) {
+  static revealExisting(e, t) {
     if (!e.isConnected)
       return {
         dialog: e,
-        close: () => F(e),
+        close: () => B(e),
         refit: () => e.dispatchEvent(new Event("sod:refit")),
         setFooterButtons: () => {
         },
@@ -160,12 +160,12 @@ class B {
         },
         id: e.dataset.sodId
       };
-    const n = e.querySelector(".sod-panel");
-    n?.classList.remove("is-closing"), document.body.append(e), e.open || (c ? e.showModal() : e.show()), e.dispatchEvent(new Event("sod:refit")), n?.focus();
-    const h = this.handleRegistry.get(e);
-    return h ? h() : {
+    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: () => F(e),
+      close: () => B(e),
       refit: () => e.dispatchEvent(new Event("sod:refit")),
       setFooterButtons: () => {
       },
@@ -176,51 +176,51 @@ class B {
     };
   }
   static open(e) {
-    const c = e.kind ?? "modal", n = "useModal" in e ? e.useModal ?? !0 : !0, h = c === "modal" ? e : void 0, d = c === "modal" && ("autoFitSize" in e ? e.autoFitSize !== !1 : !0);
-    let l, M = !1, b = e.confirmAction ?? "hide";
-    if (c === "modal") {
-      const s = "id" in e && e.id?.trim() ? e.id.trim() : void 0;
-      if (M = !!s, l = s ?? this.createAutoModalId(), e.confirmAction === void 0 && M && (b = "destroy"), s) {
-        const i = this.modalRegistry.get(l);
-        if (i && i.isConnected) {
-          const u = this.revealExisting(i, n);
+    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 v = u.onAction(e.onAction);
-            i.addEventListener("close", v, { once: !0 });
+            const w = g.onAction(e.onAction);
+            c.addEventListener("close", w, { once: !0 });
           }
-          return "onReused" in e && e.onReused?.(u), u;
+          return "onReused" in e && e.onReused?.(g), g;
         }
       }
-      this.modalRegistry.delete(l);
+      this.modalRegistry.delete(r);
     }
-    const o = document.createElement("dialog");
-    o.className = `sod-dialog sod-${c}`;
-    const L = [];
-    l && (o.dataset.sodId = l, M && (o.dataset.sodPersistent = "true"));
-    const f = document.createElement("section");
-    if (f.className = "sod-panel", f.tabIndex = -1, c === "offcanvas") {
-      const s = "placement" in e ? e.placement ?? "end" : "end", i = "animation" in e ? e.animation ?? "slide" : "slide";
-      f.classList.add(`sod-placement-${s}`), f.classList.add(`sod-anim-${i}`);
+    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 s = "position" in e ? e.position ?? "center" : "center", i = "animation" in e ? e.animation ?? "fade" : "fade";
-      f.classList.add(`sod-modal-pos-${s}`), f.classList.add(`sod-modal-anim-${i}`), d && f.classList.add("sod-modal-autofit");
+      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 g = document.createElement("header");
-    g.className = "sod-header";
-    const H = document.createElement("h2");
-    H.className = "sod-title", H.textContent = e.title;
-    const y = document.createElement("button");
-    y.type = "button", y.className = "sod-close", y.setAttribute("aria-label", "Close"), y.textContent = "×", y.addEventListener("click", () => F(o)), g.append(H, y);
-    const a = document.createElement("div");
-    a.className = "sod-body", O(a, e.content);
-    const r = document.createElement("footer");
-    r.className = "sod-footer", r.dataset.align = e.footerAlign ?? "end";
-    const w = /* @__PURE__ */ new Set();
-    e.onAction && w.add(e.onAction);
-    const m = (s) => (w.add(s), () => {
-      w.delete(s);
+    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", 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);
     });
-    let A = e.footerButtons ? [...e.footerButtons] : [
+    let S = e.footerButtons ? [...e.footerButtons] : [
       {
         id: "cancel",
         label: e.cancelText ?? "取消",
@@ -234,66 +234,66 @@ class B {
         variant: "primary"
       }
     ];
-    const C = () => ({
-      dialog: o,
-      close: () => F(o),
-      refit: () => o.dispatchEvent(new Event("sod:refit")),
-      setFooterButtons: (s) => {
-        A = [...s], E(), o.dispatchEvent(new Event("sod:refit"));
+    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: (s, i) => {
-        const u = A.findIndex((v) => v.id === s);
-        return u < 0 ? !1 : (A[u] = { ...A[u], ...i }, E(), o.dispatchEvent(new Event("sod:refit")), !0);
+      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: (s) => m(s),
-      id: l
-    }), x = (s, i) => {
-      if (typeof i == "string") {
-        s.textContent = i;
+      onAction: (l) => p(l),
+      id: r
+    }), b = (l, c) => {
+      if (typeof c == "string") {
+        l.textContent = c;
         return;
       }
-      s.append(i);
-    }, E = () => {
-      if (r.replaceChildren(), e.hideFooter || A.length === 0) {
-        r.hidden = !0;
+      l.append(c);
+    }, M = () => {
+      if (u.replaceChildren(), e.hideFooter || S.length === 0) {
+        u.hidden = !0;
         return;
       }
-      r.hidden = !1;
-      for (const s of A) {
-        const i = document.createElement("button");
-        i.type = "button", i.className = `sod-btn ${D(s.variant)}`, s.className?.trim() && (i.className = `${i.className} ${s.className.trim()}`), s.id?.trim() && (i.dataset.action = s.id.trim()), s.disabled && (i.disabled = !0), s.attrs && Object.entries(s.attrs).forEach(([u, v]) => {
-          i.setAttribute(u, v);
-        }), x(i, s.label), i.addEventListener("click", (u) => {
+      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 v = C(), I = {
-              action: s.id ?? s.role ?? "custom",
-              button: s,
-              buttonElement: i,
-              dialog: o,
-              event: u,
-              handle: v
+            const w = A(), H = {
+              action: l.id ?? l.role ?? "custom",
+              button: l,
+              buttonElement: c,
+              dialog: a,
+              event: g,
+              handle: w
             };
-            if (await s.onClick?.(I) === !1)
+            if (await l.onClick?.(H) === !1)
               return;
-            s.role === "cancel" && e.onCancel?.(), s.role === "confirm" && e.onConfirm?.(), w.forEach((S) => {
-              S(I);
+            l.role === "cancel" && e.onCancel?.(), l.role === "confirm" && e.onConfirm?.(), y.forEach((C) => {
+              C(H);
             });
-            const R = k(s, b);
-            R === "hide" && F(o, "hide"), R === "destroy" && F(o, "destroy");
+            const I = $(l, h);
+            I === "hide" && B(a, "hide"), I === "destroy" && B(a, "destroy");
           })();
-        }), r.append(i);
+        }), u.append(c);
       }
     };
-    E(), f.append(g, a, r), d && L.push(Y(o, f, g, a, r, h)), c === "modal" && "draggable" in e && e.draggable && P(f, e.dragHandle), o.append(f), (e.closeOnBackdrop ?? !0) && o.addEventListener("click", (s) => {
-      s.target === o && F(o);
-    }), (e.closeOnEsc ?? !0) || o.addEventListener("cancel", (s) => {
-      s.preventDefault();
-    }), o.addEventListener("close", () => {
-      const s = o.dataset.sodPersistent === "true", i = o.dataset.sodDestroy === "true";
-      (!s || i) && (L.forEach((u) => u()), w.clear(), o.remove(), l && this.modalRegistry.delete(l), this.handleRegistry.delete(o), delete o.dataset.sodDestroy);
-    }), document.body.append(o), n ? o.showModal() : o.show(), o.dispatchEvent(new Event("sod:refit")), l && this.modalRegistry.set(l, o), this.handleRegistry.set(o, C);
-    const p = C();
-    return c === "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" });
@@ -302,14 +302,334 @@ class B {
     return this.open({ ...e, kind: "offcanvas" });
   }
 }
-function T(t) {
-  return B.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 X(t) {
-  return B.openOffcanvas(t);
+function Y(n) {
+  return V.show(n);
 }
 export {
-  B as SoDialog,
-  T as openModal,
-  X 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(C,W){typeof exports=="object"&&typeof module<"u"?W(exports):typeof define=="function"&&define.amd?define(["exports"],W):(C=typeof globalThis<"u"?globalThis:C||self,W(C.SoDialog={}))})(this,(function(C){"use strict";function W(t,e){if(typeof e=="string"){t.innerHTML=e;return}t.append(e)}function F(t,e="hide"){if(e==="destroy"){t.dataset.sodDestroy="true",t.open&&t.close(),t.remove();return}t.open&&t.close()}function k(t,e){return t.action?t.action:t.role==="confirm"?e:t.role==="cancel"?"hide":"none"}function N(t){return t==="danger"?"sod-btn-danger":t==="success"?"sod-btn-success":t==="ghost"?"sod-btn-ghost":t==="link"?"sod-btn-link":t==="outline"?"sod-btn-outline":"sod-btn-primary"}function P(t,e){const c=Array.isArray(e)?e.length>0?e:["header"]:[e??"header"],s=[],f=d=>{d&&(s.includes(d)||s.push(d))};for(const d of c){if(d==="panel"){f(t);continue}if(d==="header"){f(t.querySelector(".sod-header"));continue}if(d==="title"){f(t.querySelector(".sod-title"));continue}if(d==="body"){f(t.querySelector(".sod-body"));continue}t.querySelectorAll(d).forEach(l=>{f(l)})}return s.length===0&&f(t.querySelector(".sod-header")),s}function T(t,e){const c=P(t,e);if(c.length===0)return;t.classList.add("sod-modal-draggable"),c.forEach(a=>{a.classList.add("sod-drag-handle")});let s=!1,f=0,d=0,l=null,M=null,$=0,o=0,L=0;const u=document.body.style.userSelect,y=(a,r)=>{const g=t.getBoundingClientRect(),m=Math.max(0,window.innerWidth-g.width),A=Math.max(0,window.innerHeight-g.height),S=Math.min(0,window.innerWidth-g.width),x=Math.min(0,window.innerHeight-g.height);return{left:Math.min(m,Math.max(S,a)),top:Math.min(A,Math.max(x,r))}},p=a=>{if(!s)return;const r=y(a.clientX-f,a.clientY-d);o=r.left,L=r.top,$===0&&($=window.requestAnimationFrame(()=>{$=0,t.style.inset="auto",t.style.left=`${o}px`,t.style.top=`${L}px`,t.style.right="auto",t.style.bottom="auto",t.style.margin="0",t.style.transform="none"}))},w=()=>{s=!1,c.forEach(a=>{a.classList.remove("is-dragging")}),t.classList.remove("sod-is-dragging"),t.style.willChange="",document.body.style.userSelect=u,$!==0&&(window.cancelAnimationFrame($),$=0),l!==null&&M!==null&&M.hasPointerCapture&&M.hasPointerCapture(l)&&M.releasePointerCapture(l),l=null,M=null,window.removeEventListener("pointermove",p),window.removeEventListener("pointerup",w),window.removeEventListener("pointercancel",w)};c.forEach(a=>{a.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 m=t.getBoundingClientRect();f=r.clientX-m.left,d=r.clientY-m.top,s=!0,l=r.pointerId,M=a,a.setPointerCapture(r.pointerId),t.style.position="fixed",t.style.left=`${m.left}px`,t.style.top=`${m.top}px`,t.style.width=`${Math.round(m.width)}px`,t.style.height=`${Math.round(m.height)}px`,t.style.inset="auto",t.style.right="auto",t.style.bottom="auto",t.style.margin="0",t.style.willChange="left, top",a.classList.add("is-dragging"),document.body.style.userSelect="none",window.addEventListener("pointermove",p),window.addEventListener("pointerup",w),window.addEventListener("pointercancel",w)})})}function Y(t,e,c,s,f,d){const M=Math.max(1,d?.hybridSwitchRatio??1.35),$=d?.refitOnContentChange??!0,o=Math.max(120,d?.autoFitMinWidth??280),L=Math.max(100,d?.autoFitMinHeight??160),u=d?.scrollMode?d.scrollMode:d?.autoFitUseScrollbar===!1?"viewport":"body";let y=0;const p=(x,E,H)=>Math.min(H,Math.max(E,x)),w=()=>{if(y=0,!t.isConnected||!t.open)return;const x=Math.max(o,window.innerWidth-32),E=Math.max(L,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 H=Math.ceil(e.scrollWidth),n=Math.ceil(e.scrollHeight),i=H>x,h=n>E;if(u==="body"){const v=p(H,o,x),b=p(n,L,E);e.style.width=`${v}px`,e.style.maxWidth=`${x}px`,e.style.height=`${b}px`,e.style.maxHeight=`${E}px`;const I=c.offsetHeight,O=f.offsetHeight,R=Math.max(64,b-I-O);h?(s.style.maxHeight=`${R}px`,s.style.overflowY="auto"):(s.style.maxHeight="none",s.style.overflowY="hidden"),s.style.overflowX=i?"auto":"hidden",t.classList.remove("sod-modal-viewport-scroll")}else if(u==="hybrid")if(n>E*M){const b=Math.max(H,o),I=Math.max(n,L);e.style.width=`${b}px`,e.style.maxWidth="none",e.style.height=`${I}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 b=p(H,o,x),I=p(n,L,E);e.style.width=`${b}px`,e.style.maxWidth=`${x}px`,e.style.height=`${I}px`,e.style.maxHeight=`${E}px`;const O=c.offsetHeight,R=f.offsetHeight,B=Math.max(64,I-O-R);h?(s.style.maxHeight=`${B}px`,s.style.overflowY="auto"):(s.style.maxHeight="none",s.style.overflowY="hidden"),s.style.overflowX=i?"auto":"hidden",t.classList.remove("sod-modal-viewport-scroll")}else if(u==="viewport"){const v=Math.max(H,o),b=Math.max(n,L);e.style.width=`${v}px`,e.style.maxWidth="none",e.style.height=`${b}px`,e.style.maxHeight="none",s.style.maxHeight="none",s.style.overflowY="visible",s.style.overflowX="visible",b>E?t.classList.add("sod-modal-viewport-scroll"):t.classList.remove("sod-modal-viewport-scroll")}else{const v=i?Math.max(H,o):p(H,o,x);if(i||h){const b=Math.max(n,L);e.style.width=`${v}px`,e.style.maxWidth="none",e.style.height=`${b}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=`${v}px`,e.style.maxWidth=`${x}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")}},a=()=>{y===0&&(y=window.requestAnimationFrame(w))},r=new ResizeObserver(()=>{a()}),g=new MutationObserver(()=>{a()}),m=()=>{a()},A=()=>{a()};t.addEventListener("sod:refit",A),r.observe(s),r.observe(c),r.observe(f),$&&(g.observe(s,{subtree:!0,childList:!0,characterData:!0,attributes:!0}),s.addEventListener("load",m,!0),s.addEventListener("error",m,!0));const S=()=>{a()};return window.addEventListener("resize",S),a(),()=>{y!==0&&(window.cancelAnimationFrame(y),y=0),r.disconnect(),g.disconnect(),window.removeEventListener("resize",S),t.removeEventListener("sod:refit",A),s.removeEventListener("load",m,!0),s.removeEventListener("error",m,!0),t.classList.remove("sod-modal-viewport-scroll"),s.style.maxHeight="",s.style.overflowY="",s.style.overflowX=""}}class D{static modalRegistry=new Map;static handleRegistry=new WeakMap;static modalIdSeed=0;static createAutoModalId(){return this.modalIdSeed+=1,`sod-modal-${this.modalIdSeed}`}static revealExisting(e,c){if(!e.isConnected)return{dialog:e,close:()=>F(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||(c?e.showModal():e.show()),e.dispatchEvent(new Event("sod:refit")),s?.focus();const f=this.handleRegistry.get(e);return f?f():{dialog:e,close:()=>F(e),refit:()=>e.dispatchEvent(new Event("sod:refit")),setFooterButtons:()=>{},updateFooterButton:()=>!1,onAction:()=>()=>{},id:e.dataset.sodId}}static open(e){const c=e.kind??"modal",s="useModal"in e?e.useModal??!0:!0,f=c==="modal"?e:void 0,d=c==="modal"&&("autoFitSize"in e?e.autoFitSize!==!1:!0);let l,M=!1,$=e.confirmAction??"hide";if(c==="modal"){const n="id"in e&&e.id?.trim()?e.id.trim():void 0;if(M=!!n,l=n??this.createAutoModalId(),e.confirmAction===void 0&&M&&($="destroy"),n){const i=this.modalRegistry.get(l);if(i&&i.isConnected){const h=this.revealExisting(i,s);if(e.onAction){const v=h.onAction(e.onAction);i.addEventListener("close",v,{once:!0})}return"onReused"in e&&e.onReused?.(h),h}}this.modalRegistry.delete(l)}const o=document.createElement("dialog");o.className=`sod-dialog sod-${c}`;const L=[];l&&(o.dataset.sodId=l,M&&(o.dataset.sodPersistent="true"));const u=document.createElement("section");if(u.className="sod-panel",u.tabIndex=-1,c==="offcanvas"){const n="placement"in e?e.placement??"end":"end",i="animation"in e?e.animation??"slide":"slide";u.classList.add(`sod-placement-${n}`),u.classList.add(`sod-anim-${i}`)}else{const n="position"in e?e.position??"center":"center",i="animation"in e?e.animation??"fade":"fade";u.classList.add(`sod-modal-pos-${n}`),u.classList.add(`sod-modal-anim-${i}`),d&&u.classList.add("sod-modal-autofit")}const y=document.createElement("header");y.className="sod-header";const p=document.createElement("h2");p.className="sod-title",p.textContent=e.title;const w=document.createElement("button");w.type="button",w.className="sod-close",w.setAttribute("aria-label","Close"),w.textContent="×",w.addEventListener("click",()=>F(o)),y.append(p,w);const a=document.createElement("div");a.className="sod-body",W(a,e.content);const r=document.createElement("footer");r.className="sod-footer",r.dataset.align=e.footerAlign??"end";const g=new Set;e.onAction&&g.add(e.onAction);const m=n=>(g.add(n),()=>{g.delete(n)});let A=e.footerButtons?[...e.footerButtons]:[{id:"cancel",label:e.cancelText??"取消",role:"cancel",variant:"outline"},{id:"confirm",label:e.confirmText??"确认",role:"confirm",variant:"primary"}];const S=()=>({dialog:o,close:()=>F(o),refit:()=>o.dispatchEvent(new Event("sod:refit")),setFooterButtons:n=>{A=[...n],E(),o.dispatchEvent(new Event("sod:refit"))},updateFooterButton:(n,i)=>{const h=A.findIndex(v=>v.id===n);return h<0?!1:(A[h]={...A[h],...i},E(),o.dispatchEvent(new Event("sod:refit")),!0)},onAction:n=>m(n),id:l}),x=(n,i)=>{if(typeof i=="string"){n.textContent=i;return}n.append(i)},E=()=>{if(r.replaceChildren(),e.hideFooter||A.length===0){r.hidden=!0;return}r.hidden=!1;for(const n of A){const i=document.createElement("button");i.type="button",i.className=`sod-btn ${N(n.variant)}`,n.className?.trim()&&(i.className=`${i.className} ${n.className.trim()}`),n.id?.trim()&&(i.dataset.action=n.id.trim()),n.disabled&&(i.disabled=!0),n.attrs&&Object.entries(n.attrs).forEach(([h,v])=>{i.setAttribute(h,v)}),x(i,n.label),i.addEventListener("click",h=>{(async()=>{const v=S(),I={action:n.id??n.role??"custom",button:n,buttonElement:i,dialog:o,event:h,handle:v};if(await n.onClick?.(I)===!1)return;n.role==="cancel"&&e.onCancel?.(),n.role==="confirm"&&e.onConfirm?.(),g.forEach(B=>{B(I)});const R=k(n,$);R==="hide"&&F(o,"hide"),R==="destroy"&&F(o,"destroy")})()}),r.append(i)}};E(),u.append(y,a,r),d&&L.push(Y(o,u,y,a,r,f)),c==="modal"&&"draggable"in e&&e.draggable&&T(u,e.dragHandle),o.append(u),(e.closeOnBackdrop??!0)&&o.addEventListener("click",n=>{n.target===o&&F(o)}),(e.closeOnEsc??!0)||o.addEventListener("cancel",n=>{n.preventDefault()}),o.addEventListener("close",()=>{const n=o.dataset.sodPersistent==="true",i=o.dataset.sodDestroy==="true";(!n||i)&&(L.forEach(h=>h()),g.clear(),o.remove(),l&&this.modalRegistry.delete(l),this.handleRegistry.delete(o),delete o.dataset.sodDestroy)}),document.body.append(o),s?o.showModal():o.show(),o.dispatchEvent(new Event("sod:refit")),l&&this.modalRegistry.set(l,o),this.handleRegistry.set(o,S);const H=S();return c==="modal"&&"onCreated"in e&&e.onCreated?.(H),H}static openModal(e){return this.open({...e,kind:"modal"})}static openOffcanvas(e){return this.open({...e,kind:"offcanvas"})}}function X(t){return D.openModal(t)}function q(t){return D.openOffcanvas(t)}C.SoDialog=D,C.openModal=X,C.openOffcanvas=q,Object.defineProperty(C,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

@@ -10,6 +10,10 @@ 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;
@@ -78,6 +82,33 @@ export interface SoDialogFooterActionContext {
     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;
@@ -88,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.13",
+  "version": "0.1.14",
   "description": "A reusable HTML5 dialog-based modal and offcanvas library.",
   "keywords": [
     "dialog",