@greypan/web-ui 8.1.0 → 9.1.0

package/dist/components/dialog/style.js

@@ -1,5 +1,5 @@
 //#region src/components/dialog/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{display:contents}dialog{transform:scale(var(--wui-dialog-scale-enter,1.1));box-sizing:border-box;width:min(90vw, var(--wui-dialog-width,360px));max-height:min(90vh,90dvh);color:var(--wui-color-text,#1b1b1b);transition:transform var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1));background:0 0;border:none;padding:0;font-family:inherit;position:fixed;overflow:visible}dialog::backdrop{opacity:0;background:var(--wui-dialog-overlay-bg,var(--wui-color-backdrop,#0000001f));transition:opacity var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1))}dialog:focus,dialog:focus-visible{outline:none}dialog[open].is-visible{transform:scale(1)}dialog[open].is-closing{pointer-events:none;transition-duration:var(--wui-duration-dialog-exit,.26s)}dialog.is-closing::backdrop{transition-duration:var(--wui-duration-dialog-exit,.26s)}dialog[open].is-visible::backdrop{opacity:1}@media (prefers-reduced-motion:reduce){dialog,dialog[open].is-visible{transition-duration:var(--wui-duration-feedback,.1s);transform:none}}.wui-dialog-body{--wui-internal-glass-shadow:var(--wui-shadow-overlay,2px 16px 40px #0006);--wui-glass-corner-radius:var(--wui-radius-overlay,28px);padding:var(--wui-dialog-padding,20px 24px 24px);border-radius:var(--wui-radius-overlay,28px);opacity:0;background-color:var(--wui-dialog-bg,var(--wui-color-surface-overlay,#f6f6f6d1));-webkit-backdrop-filter:blur(0) saturate(160%) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(0) saturate(160%) brightness(var(--wui-glass-brightness,1.06));transition:opacity var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1)), -webkit-backdrop-filter var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1)), backdrop-filter var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1))}dialog.is-closing .wui-dialog-body{transition-duration:var(--wui-duration-dialog-exit,.26s)}dialog[open].is-visible .wui-dialog-body{opacity:1;-webkit-backdrop-filter:blur(4px) saturate(160%) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(4px) saturate(160%) brightness(var(--wui-glass-brightness,1.06))}@media (prefers-reduced-motion:reduce){dialog.is-closing .wui-dialog-body,dialog[open].is-visible .wui-dialog-body{transition-duration:var(--wui-duration-feedback,.1s)}}.title{margin:0 0 var(--wui-dialog-title-gap,16px);color:var(--wui-color-text,#1b1b1b);padding:0;font-size:18px;font-weight:600;line-height:1.2}.desc{margin:0 0 var(--wui-dialog-desc-gap,24px);color:var(--wui-color-text,#1b1b1b);padding:0;font-size:14px;line-height:1.5}.wui-dialog-footer{gap:var(--wui-dialog-footer-gap,10px);justify-content:var(--wui-dialog-footer-justify,flex-end);flex-direction:column;display:flex}.wui-dialog-footer ::slotted(web-ui-button){width:100%;display:flex}:host([horizontal]) .wui-dialog-footer{gap:12px;justify-content:var(--wui-dialog-footer-justify,center);flex-direction:row}:host([horizontal]) .wui-dialog-footer ::slotted(web-ui-button:not([full])){width:auto}:host([horizontal]) .wui-dialog-footer ::slotted(web-ui-button[full]){flex:1;min-width:0}";
+var e = "*,:before,:after{box-sizing:border-box}:host{display:contents}dialog{transform:scale(var(--wui-dialog-scale-enter,1.1));box-sizing:border-box;width:min(90vw, var(--wui-dialog-width,360px));max-height:100vh;color:var(--wui-color-text,#1b1b1b);transition:transform var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1));background:0 0;border:none;padding:0;font-family:inherit;position:fixed;overflow:visible}dialog::backdrop{opacity:0;background:var(--wui-dialog-overlay-bg,var(--wui-color-backdrop,#0000001f));transition:opacity var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1))}@supports (height:100dvh){dialog{max-height:100dvh}}dialog:has(.desc){flex-direction:column;display:flex}dialog[open].is-visible{transform:scale(1)}dialog[open].is-closing{pointer-events:none;transition-duration:var(--wui-duration-dialog-exit,.26s)}dialog.is-closing::backdrop{transition-duration:var(--wui-duration-dialog-exit,.26s)}dialog[open].is-visible::backdrop{opacity:1}@media (prefers-reduced-motion:reduce){dialog,dialog[open].is-visible{transition-duration:var(--wui-duration-feedback,.1s);transform:none}}.wui-dialog-body{--wui-internal-dialog-close-top:var(--wui-dialog-close-top,20px);--wui-internal-dialog-close-right:var(--wui-dialog-close-right,20px);--wui-internal-glass-shadow:var(--wui-shadow-overlay,2px 16px 40px #0006);--wui-glass-corner-radius:var(--wui-radius-overlay,28px);padding:var(--wui-dialog-padding,var(--wui-space-5,20px) var(--wui-space-6,24px) var(--wui-space-6,24px));border-radius:var(--wui-radius-overlay,28px);opacity:0;background-color:var(--wui-dialog-bg,var(--wui-color-surface-overlay,#f8f8f8eb));-webkit-backdrop-filter:blur(0) saturate(160%) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(0) saturate(160%) brightness(var(--wui-glass-brightness,1.06));transition:opacity var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1)), -webkit-backdrop-filter var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1)), backdrop-filter var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1))}.wui-dialog-body:has(.desc){grid-template-rows:auto minmax(0,1fr) auto;min-height:0;display:grid}.wui-dialog-body:has(>.wui-dialog-content){grid-template-rows:minmax(0,1fr);max-height:100vh;padding:0;display:grid;overflow:hidden}@supports (height:100dvh){.wui-dialog-body:has(>.wui-dialog-content){max-height:100dvh}}.wui-dialog-content{min-height:0;padding:var(--wui-dialog-padding,var(--wui-space-5,20px) var(--wui-space-6,24px) var(--wui-space-6,24px));overflow-y:auto}dialog.is-closing .wui-dialog-body{transition-duration:var(--wui-duration-dialog-exit,.26s)}:host([closable]) .wui-dialog-body{position:relative}dialog[open].is-visible .wui-dialog-body{opacity:1;-webkit-backdrop-filter:blur(4px) saturate(160%) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(4px) saturate(160%) brightness(var(--wui-glass-brightness,1.06))}.wui-dialog-close{z-index:3;top:var(--wui-internal-dialog-close-top);right:var(--wui-internal-dialog-close-right);position:absolute}.title-row{gap:var(--wui-space-3,12px);justify-content:space-between;align-items:flex-start;display:flex}@media (prefers-reduced-motion:reduce){dialog.is-closing .wui-dialog-body,dialog[open].is-visible .wui-dialog-body{transition-duration:var(--wui-duration-feedback,.1s)}}.title{margin:0 0 var(--wui-dialog-title-gap,var(--wui-space-4,16px));font-size:var(--wui-font-size-title,18px);font-weight:var(--wui-font-weight-semibold,600);line-height:var(--wui-line-height-tight,1.2);color:var(--wui-color-text,#1b1b1b);padding:0}:host([closable]) .title{padding-inline-end:calc(var(--wui-internal-dialog-close-right) + 26px + var(--wui-space-3,12px))}.desc{min-height:0;max-height:calc(var(--wui-dialog-max-height,90vh) + var(--wui-dialog-desc-focus-padding,6px) * 2);margin-top:calc(-1 * var(--wui-dialog-desc-focus-padding,6px));margin-bottom:max(0px, calc(var(--wui-dialog-desc-gap,var(--wui-space-6,24px)) - var(--wui-dialog-desc-focus-padding,6px)));margin-inline:calc(-1 * var(--wui-dialog-desc-focus-padding,6px));padding-block:var(--wui-dialog-desc-focus-padding,6px);padding-inline:var(--wui-dialog-desc-focus-padding,6px);font-size:var(--wui-font-size,14px);line-height:var(--wui-line-height-normal,1.5);color:var(--wui-color-text,#1b1b1b);overflow:clip auto}@supports (height:100dvh){.desc{max-height:calc(var(--wui-dialog-max-height,min(90vh, 90dvh)) + var(--wui-dialog-desc-focus-padding,6px) * 2)}}.wui-dialog-footer{gap:var(--wui-dialog-footer-gap,10px);justify-content:var(--wui-dialog-footer-justify,flex-end);flex-direction:column;display:flex}.wui-dialog-footer ::slotted(web-ui-button){width:100%;display:flex}:host([horizontal]) .wui-dialog-footer{gap:var(--wui-space-3,12px);justify-content:var(--wui-dialog-footer-justify,center);flex-direction:row}:host([horizontal]) .wui-dialog-footer ::slotted(web-ui-button:not([full])){width:auto}:host([horizontal]) .wui-dialog-footer ::slotted(web-ui-button[full]){flex:1;min-width:0}";
 //#endregion
 export { e as default };
 

package/dist/components/dialog/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/dialog/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: contents;\n}\n\ndialog {\n  /* 必须显式 position: fixed：UA 的 dialog:modal 默认就是 fixed，但作者样式若出现\n     position: relative（本轮单层重构曾引入）会把它覆盖回文档流——top layer 里的\n     modal dialog 变成按文档流定位：渲染在页面顶部（用户看到的“残影”）且跟随页面\n     滚动（“没有固定居中”）。显式写死 fixed 防御未来任何作者类再覆盖。 */\n  position: fixed;\n\n  /* 本元素不参与 opacity 过渡：opacity < 1 会让 dialog 成为 backdrop root，后代\n     backdrop-filter 在该过渡期间被整体禁用。玻璃卡片（.wui-dialog-body）自身\n     opacity + backdrop-filter 插值过渡（own opacity 不禁用自身 blur，见下）。 */\n\n  /* 进场由大到小收缩（1.1 → 1），退场反向。取消 .is-visible 后回落到本条起点值，\n     enter/exit 共用同一 token。方向与浮动面板的 --wui-scale-enter 相反，故单独成 token。 */\n  transform: scale(var(--wui-dialog-scale-enter, 1.1));\n\n  overflow: visible;\n\n  box-sizing: border-box;\n  width: min(90vw, var(--wui-dialog-width, 360px));\n  max-height: 90vh;\n  max-height: min(90vh, 90dvh);\n  padding: 0;\n  border: none;\n\n  font-family: inherit;\n  color: var(--wui-color-text, #1b1b1b);\n\n  background: transparent;\n\n  transition: transform var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n\n  &::backdrop {\n    opacity: 0;\n    background: var(--wui-dialog-overlay-bg, var(--wui-color-backdrop, rgb(0 0 0 / 0.12)));\n\n    /* 与卡片共用同一条 dialog 缓动：用内置 ease 会让遮罩在卡片落位后才走完大半透明度。 */\n    transition: opacity var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n  }\n}\n\n/* 面板本身是模态表面，不作为可聚焦控件；Safari showModal() 会把焦点放到 dialog，不应画 UA ring。内部控件保留 focus ring。 */\ndialog:focus,\ndialog:focus-visible {\n  outline: none;\n}\n\ndialog[open].is-visible {\n  transform: scale(1);\n}\n\ndialog[open].is-closing {\n  pointer-events: none;\n  transition-duration: var(--wui-duration-dialog-exit, 260ms);\n}\n\ndialog.is-closing::backdrop {\n  transition-duration: var(--wui-duration-dialog-exit, 260ms);\n}\n\ndialog[open].is-visible::backdrop {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  dialog,\n  dialog[open].is-visible {\n    transform: none;\n    transition-duration: var(--wui-duration-feedback, 100ms);\n  }\n}\n\n/* ===== 玻璃卡片主体（样式由 glass.css 提供） ===== */\n\n/* 单层玻璃：卡片自身承担背景/阴影/backdrop-filter。blur(0px) ↔ blur(4px) 平滑插值\n   （none↔blur 不可插值才是当年生硬跳变的根因），own opacity 过渡不禁用自身 blur，\n   因此卡片直接 opacity + backdrop-filter 同步过渡即可，无需双层。 */\n.wui-dialog-body {\n  --wui-internal-glass-shadow: var(--wui-shadow-overlay, 2px 16px 40px rgb(0 0 0 / 0.4));\n  --wui-glass-corner-radius: var(--wui-radius-overlay, 28px);\n  padding: var(--wui-dialog-padding, 20px 24px 24px);\n  border-radius: var(--wui-radius-overlay, 28px);\n\n  opacity: 0;\n  background-color: var(--wui-dialog-bg, var(--wui-color-surface-overlay, rgb(246 246 246 / 0.82)));\n  backdrop-filter: blur(0) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n\n  /* transition 列表需手写 -webkit-backdrop-filter：lightningcss 不会在 transition\n   的 value 内追加 -webkit 项，而 iOS 16.4 上 blur 过渡依赖它（属性前缀会自动生成）。 */\n  transition:\n    opacity var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1)),\n    -webkit-backdrop-filter var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1)),\n    backdrop-filter var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n}\n\ndialog.is-closing .wui-dialog-body {\n  transition-duration: var(--wui-duration-dialog-exit, 260ms);\n}\n\ndialog[open].is-visible .wui-dialog-body {\n  opacity: 1;\n  backdrop-filter: blur(4px) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  dialog.is-closing .wui-dialog-body,\n  dialog[open].is-visible .wui-dialog-body {\n    transition-duration: var(--wui-duration-feedback, 100ms);\n  }\n}\n\n.title {\n  margin: 0 0 var(--wui-dialog-title-gap, 16px);\n  padding: 0;\n\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.2;\n  color: var(--wui-color-text, #1b1b1b);\n}\n\n.desc {\n  margin: 0 0 var(--wui-dialog-desc-gap, 24px);\n  padding: 0;\n\n  font-size: 14px;\n  line-height: 1.5;\n  color: var(--wui-color-text, #1b1b1b);\n}\n\n.wui-dialog-footer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wui-dialog-footer-gap, 10px);\n  justify-content: var(--wui-dialog-footer-justify, flex-end);\n\n  & ::slotted(web-ui-button) {\n    display: flex;\n    width: 100%;\n  }\n}\n\n:host([horizontal]) .wui-dialog-footer {\n  flex-direction: row;\n  gap: 12px;\n  justify-content: var(--wui-dialog-footer-justify, center);\n\n  & ::slotted(web-ui-button:not([full])) {\n    width: auto;\n  }\n\n  & ::slotted(web-ui-button[full]) {\n    flex: 1;\n    min-width: 0;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/dialog/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: contents;\n}\n\ndialog {\n  /* 必须显式 position: fixed：UA 的 dialog:modal 默认就是 fixed，但作者样式若出现\n     position: relative（本轮单层重构曾引入）会把它覆盖回文档流——top layer 里的\n     modal dialog 变成按文档流定位：渲染在页面顶部（用户看到的“残影”）且跟随页面\n     滚动（“没有固定居中”）。显式写死 fixed 防御未来任何作者类再覆盖。 */\n  position: fixed;\n\n  /* 本元素不参与 opacity 过渡：opacity < 1 会让 dialog 成为 backdrop root，后代\n     backdrop-filter 在该过渡期间被整体禁用。玻璃卡片（.wui-dialog-body）自身\n     opacity + backdrop-filter 插值过渡（own opacity 不禁用自身 blur，见下）。 */\n\n  /* 进场由大到小收缩（1.1 → 1），退场反向。取消 .is-visible 后回落到本条起点值，\n     enter/exit 共用同一 token。方向与浮动面板的 --wui-scale-enter 相反，故单独成 token。 */\n  transform: scale(var(--wui-dialog-scale-enter, 1.1));\n\n  overflow: visible;\n\n  box-sizing: border-box;\n  width: min(90vw, var(--wui-dialog-width, 360px));\n\n  /* 整卡兜底：防卡片高过视口。真正的内容区上限在 .desc（见下），这里只接住\n     「视口本身很矮、chrome + 内容区上限也放不下」的情况。字面量而非 token，\n     免得与 .desc 抢同一个数值——共用时外层必然先触发（它是整卡约束），\n     .desc 的 max-height 就成了永远轮不到的死约束。dvh 增强见文件末尾。 */\n  max-height: 100vh;\n  padding: 0;\n  border: none;\n\n  font-family: inherit;\n  color: var(--wui-color-text, #1b1b1b);\n\n  background: transparent;\n\n  transition: transform var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n\n  &::backdrop {\n    opacity: 0;\n    background: var(--wui-dialog-overlay-bg, var(--wui-color-backdrop, rgb(0 0 0 / 0.12)));\n\n    /* 与卡片共用同一条 dialog 缓动：用内置 ease 会让遮罩在卡片落位后才走完大半透明度。 */\n    transition: opacity var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n  }\n}\n\n/* 动态视口高度兜底：移动端工具栏收放时不让 dialog 超出可见区域。\n   放在 @supports 内而非与上一条并列，是因为 var() 的回退值要到计算值阶段才替换；\n   不支持 dvh 的引擎会在该阶段拿到非法值，使整条声明变成 invalid-at-computed-value-time\n   而丢失 max-height。并列两条普通声明则由解析期丢弃，行为不同。dialog 这条是字面量，\n   并列也不会丢，但统一放在 @supports 内，免得两条规则看起来像两种不同的兜底策略。\n\n   `.desc` 的 dvh 增强不在这里：它必须排在文件后面那条 `.desc` 规则之后才生效，\n   同特异度下靠后者胜。放在这里会被后面那条的 `90vh` 回退静默覆盖。 */\n@supports (height: 100dvh) {\n  dialog {\n    max-height: 100dvh;\n  }\n}\n\n/* ===== 高度约束下移到内容区（chrome 由内容撑开） =====\n\n   宿主过去必须复述一个会变的 chrome 高度：AddDialog / RestoreDialog 都写\n   `height: min(calc(82vh - 108px), calc(var(--wui-dialog-max-height, 560px) - 108px))`\n   （改动前的写法，见 base b6b7eb34；这两处宿主已按新语义转换），\n   而那 108 里的 footer 一项就是 --wui-control-size——触摸端\n   `@media (pointer: coarse)` 把它从 36px 抬到 40px，chrome 随之长高，宿主的常数立刻腐坏。\n\n   现在 header / footer 完全由内容撑开，上限只落在 .desc。修掉的是「宿主必须知道 chrome\n   才能让内容区滚起来」：改动前 .desc 既没有上限也没有 overflow，内容超高时直接把卡片\n   顶出 dialog 盒子，唯一能滚的地方是宿主自己用 `min(calc(82vh - 108px), …)` 之类的\n   内层 height 撑出来的那一块。现在上限与滚动都归 .desc，宿主不必再为「让它滚」而算。\n\n   但「宿主不再需要知道 chrome 多高」并不成立，改成这样写会误导后人。--wui-dialog-max-height\n   的语义是**内容区**上限：宿主若要给整卡定上限，仍然得自己量出 chrome 再从 token 里减掉\n   （AddDialog / RestoreDialog 减 142，SettingsDialog 减 106，三处不能互相照抄）。把整卡\n   上限原样写进 token，卡片会比预期高出一个 chrome。\n\n   实测（Chromium + WebKit，见 __tests__/dialog-content-height.browser.spec.ts）：本组 CSS\n   只对 **title 模式**生效——body 模式（走 slot=\"body\"、没有 .desc）的**卡片尺寸**不变。\n   但位置不保证：`dialog` 的整卡兜底从 min(90vh, 90dvh) 收紧到字面量 100vh，modal dialog\n   按自身盒子在视口里居中、卡片从盒子顶部起画，盒子更高 → 卡片在视口内上移。内容接近视口\n   高度时位移可观测（reviewer 实测 52px / 102px / 25.16px），只有内容远矮于视口时位移为 0\n   （两个 demo 正是落在这一档，巧合而非保证）。 */\n\n/* dialog 不是 flex 容器时 .desc 的 height:100% 拿不到确定高度（:host 是 display:contents，\n   dialog 自身默认 block），宿主的内层 grid 因此撑不满、两栏不等高。 */\ndialog:has(.desc) {\n  display: flex;\n  flex-direction: column;\n}\n\n/* 模态表面的焦点环抑制（<dialog> 壳 + 面板滚动区）集中在 assets/modal-surface.css，见组件 index.ts 的 static styles。 */\n\ndialog[open].is-visible {\n  transform: scale(1);\n}\n\ndialog[open].is-closing {\n  pointer-events: none;\n  transition-duration: var(--wui-duration-dialog-exit, 260ms);\n}\n\ndialog.is-closing::backdrop {\n  transition-duration: var(--wui-duration-dialog-exit, 260ms);\n}\n\ndialog[open].is-visible::backdrop {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  dialog,\n  dialog[open].is-visible {\n    transform: none;\n    transition-duration: var(--wui-duration-feedback, 100ms);\n  }\n}\n\n/* ===== 玻璃卡片主体（样式由 glass.css 提供） ===== */\n\n/* 单层玻璃：卡片自身承担背景/阴影/backdrop-filter。blur(0px) ↔ blur(4px) 平滑插值\n   （none↔blur 不可插值才是当年生硬跳变的根因），own opacity 过渡不禁用自身 blur，\n   因此卡片直接 opacity + backdrop-filter 同步过渡即可，无需双层。 */\n.wui-dialog-body {\n  --wui-internal-dialog-close-top: var(--wui-dialog-close-top, 20px);\n  --wui-internal-dialog-close-right: var(--wui-dialog-close-right, 20px);\n  --wui-internal-glass-shadow: var(--wui-shadow-overlay, 2px 16px 40px rgb(0 0 0 / 0.4));\n  --wui-glass-corner-radius: var(--wui-radius-overlay, 28px);\n  padding: var(--wui-dialog-padding, var(--wui-space-5, 20px) var(--wui-space-6, 24px) var(--wui-space-6, 24px));\n  border-radius: var(--wui-radius-overlay, 28px);\n\n  opacity: 0;\n  background-color: var(--wui-dialog-bg, var(--wui-color-surface-overlay, rgb(248 248 248 / 0.92)));\n  backdrop-filter: blur(0) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n\n  /* transition 列表需手写 -webkit-backdrop-filter：lightningcss 不会在 transition\n   的 value 内追加 -webkit 项，而 iOS 16.4 上 blur 过渡依赖它（属性前缀会自动生成）。 */\n  transition:\n    opacity var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1)),\n    -webkit-backdrop-filter var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1)),\n    backdrop-filter var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/* 卡片改 grid 容器：title 与 footer 走 auto（内容撑开），.desc 走 minmax(0,1fr)。\n   minmax 的 0 是 .desc 能收缩的前提；配合 .desc 的 min-height:0 与 overflow-y:auto，\n   内容超高时滚动发生在内容区内部，而不是把卡片顶出 dialog 盒子。\n\n   单列而非与基础 .wui-dialog-body 合并：`:has()` 的特异度高于类选择器，合并会让\n   「仅 title 模式变 grid」变成「所有模式都变 grid」，那会改掉 body 模式的几何\n   （实测高内容 body 的卡片会从 3044 被夹到 896）。位置也受 stylelint\n   no-descending-specificity 约束：须排在基础规则之后、dialog.is-closing 之前。 */\n.wui-dialog-body:has(.desc) {\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr) auto;\n\n  /* 这条 min-height: 0 是承重的（`.desc` 那条不是）：卡片是 `dialog` 这个 column flex\n     容器的 flex 项，`min-height: auto` 会把它垫到内容高度，视口的 100dvh 兜底就再也\n     夹不住。删掉后 token=5000px 时卡片实测 3154、dialog 896。 */\n  min-height: 0;\n}\n\n/* ===== body 模式：内容区是卡片内部的滚动层 =====\n\n   body 模式没有 title / footer，卡片就是内容区，所以这里要同时守住两件事：\n   内容不高时卡片贴合内容（与基础规则一致），内容高过视口时把上限交给视口、把溢出交给\n   滚动。少了后半件，卡片会一路长到内容高度并溢出 dialog 盒子；dialog 是 overflow:\n   visible（阴影与关闭按钮不能由同尺寸的原生 dialog 裁），溢出的那截落在视口之下，\n   既看不到也够不着。\n\n   上限取与整卡兜底相同的字面量，而不是 `--wui-dialog-max-height`：后者的公开语义是\n   `.desc` 的高度（README 有记录），body 模式根本没有 `.desc`，套上去会凭空改掉\n   这档的既有尺寸语义。\n\n   滚动单独成层而不是让卡片自己滚：关闭按钮是卡片的绝对定位直接子元素，卡片一旦自己\n   滚动，按钮会跟着内容一起滚走。padding 也跟着挪进内层，让内容与滚动容器的裁剪边\n   （padding 外沿）留出余量——贴边的控件焦点环才不会被裁成残条；内层没有滚动条槽的\n   引擎里，这圈余量与卡片直接持 padding 时逐像素相同。 */\n.wui-dialog-body:has(> .wui-dialog-content) {\n  overflow: hidden;\n  display: grid;\n  grid-template-rows: minmax(0, 1fr);\n\n  max-height: 100vh;\n  padding: 0;\n}\n\n@supports (height: 100dvh) {\n  .wui-dialog-body:has(> .wui-dialog-content) {\n    max-height: 100dvh;\n  }\n}\n\n.wui-dialog-content {\n  overflow-y: auto;\n  min-height: 0;\n  padding: var(--wui-dialog-padding, var(--wui-space-5, 20px) var(--wui-space-6, 24px) var(--wui-space-6, 24px));\n}\n\ndialog.is-closing .wui-dialog-body {\n  transition-duration: var(--wui-duration-dialog-exit, 260ms);\n}\n\n:host([closable]) .wui-dialog-body {\n  /*\n   * body 模式的关闭按钮浮在卡片右上角，需要一个定位参照，所以显式重述一次\n   * position: relative。\n   *\n   * 实际提供这个上下文的是卡片自带的 .wui-glass（glass.css 的 .wui-glass 已有\n   * position: relative），所以这条声明目前是冗余的，写在这里是为了不依赖\n   * glass.css 的内部实现——若哪天 glass 改成非定位元素，这条仍然兜得住。\n   * 它不是本轮为 closable 建立的包含块边界：body 上的 wui-glass class 与\n   * static styles 里的 glass 都早于本轮存在。\n   */\n  position: relative;\n}\n\ndialog[open].is-visible .wui-dialog-body {\n  opacity: 1;\n  backdrop-filter: blur(4px) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n}\n\n/* ===== 关闭按钮（绝对定位，两种内容模式同一套规则）=====\n\n   偏移由公开 token --wui-dialog-close-top / --wui-dialog-close-right 控制，默认都是字面量\n   20px。默认值不再经过 --wui-space-*：这两个 token 的参照系是卡片边缘，而不是相邻元素\n   之间的间距节奏，消费方调整主题间距时不应意外移动关闭按钮。dialog 本轮也不再与 drawer\n   的 16/16 对齐；--wui-drawer-close-* 保持不变。\n\n   两个公开 token 先在正文容器上解析成同一份内部变量，按钮定位和标题避让都读这份结果，\n   避免只改一个兜底字面量后按钮与标题各自按不同默认值计算。\n\n   标题模式此前是 .title-row 里的 flex 子项（flex: none），偏移由卡片 padding 决定——默认\n   上 20 / 右 24，二者不等，正是「设置」对话框里按钮离上沿近、离右沿远的来源。改成绝对\n   定位后两种模式同源，几何只由本条规则决定。\n\n   绝对定位的包含块是 .wui-dialog-body（:host([closable]) 给了它 position: relative），\n   不是 .title-row：后者是 static，按钮只是它名义上的孩子；top/right 因此量到卡片 padding\n   box 的右上角。 */\n.wui-dialog-close {\n  position: absolute;\n  z-index: 3;\n  top: var(--wui-internal-dialog-close-top);\n  right: var(--wui-internal-dialog-close-right);\n}\n\n/*\n * 标题行只在 closable 时出现，因此 .title 自身的 margin-bottom 语义不变：\n * 它仍由 .title-row 的行高承担，行高 = 标题外高（含 16px 下边距）。\n * 关闭按钮已是绝对定位、不再是这一行的占位项（见上），所以这里的 flex/gap 只剩排版作用。\n */\n.title-row {\n  display: flex;\n  gap: var(--wui-space-3, 12px);\n  align-items: flex-start;\n  justify-content: space-between;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  dialog.is-closing .wui-dialog-body,\n  dialog[open].is-visible .wui-dialog-body {\n    transition-duration: var(--wui-duration-feedback, 100ms);\n  }\n}\n\n.title {\n  margin: 0 0 var(--wui-dialog-title-gap, var(--wui-space-4, 16px));\n  padding: 0;\n\n  font-size: var(--wui-font-size-title, 18px);\n  font-weight: var(--wui-font-weight-semibold, 600);\n  line-height: var(--wui-line-height-tight, 1.2);\n  color: var(--wui-color-text, #1b1b1b);\n}\n\n/* 标题避让：关闭按钮绝对定位后不再占 .title-row 的位，长标题会一直排到按钮下面。\n   预留量取「按钮右偏移 + 按钮宽 + 呼吸间距」，而不是只减掉卡片 padding——这样即便消费者把\n   --wui-dialog-padding 的 inline 分量调到 0，标题文字右缘也不会越过按钮左缘；跟随\n   --wui-dialog-close-right 变化；这里复用正文容器上已解析的内部右侧偏移，与按钮定位同源。\n   26px 对应 index.ts 里按钮的 size=\"26\"，改按钮尺寸时一并改这里。\n   只在 closable 时生效：没有按钮就不必留白。 */\n:host([closable]) .title {\n  padding-inline-end: calc(var(--wui-internal-dialog-close-right) + 26px + var(--wui-space-3, 12px));\n}\n\n.desc {\n  /* 横向显式 clip 而非留默认的 visible：一旦本轴成为滚动容器，另一轴的 visible 会被\n     计算成 auto，宿主内容横向溢出时就会多出一条不该出现的横向滚动条。\n     Chromium / WebKit 实测：clip 与本规则下面的 auto 配对时计算值会降级成 hidden\n     （仍可被脚本滚动）。Firefox ≥128 不做这个降级、保持 clip，但仓库的 browser-mode\n     项目只跑 chromium，这句未经本仓 CI 证实。两个引擎都不画横向滚动条，所以这里\n     只需要「不是 auto」；断言写成 not.toBe('auto') 而非 toBe('clip')，否则会在\n     降级的引擎上误报。 */\n  overflow-x: clip;\n  overflow-y: auto;\n\n  /* 承重的是上面那条 `overflow-y: auto`：按 CSS Sizing 3，溢出轴不为 visible 的\n     grid 项其自动最小尺寸就是 0，`.desc` 无需再显式归零（实测删掉本条测试仍全绿，\n     改成 `auto auto auto` 也一样）。这里保留是防御性的：哪天 `overflow-y` 被改回\n     visible，显式归零仍在，minmax(0,1fr) 才不会被顶破。 */\n  min-height: 0;\n\n  /* 内容区上限 = token + ring 余量：token 语义是内容区高度，ring 不该从它里面扣。\n     token 只挂在这里，不与 dialog 的 max-height 共用——共用时外层（整卡）必然先触发。 */\n  max-height: calc(var(--wui-dialog-max-height, 90vh) + var(--wui-dialog-desc-focus-padding, 6px) * 2);\n\n  /* ===== focus-ring 余量：四个轴一视同仁，成对负 margin 原样扣回 =====\n\n     .desc 既是滚动容器又是裁剪盒（clip），贴在内容区任一沿的控件，其 ring\n     （offset 2 + width 3 = 5px）会被 padding box 裁掉；留 6px 余 1px。少补任何一条轴，\n     那一侧的 ring 就会退化成 1px 残条——只补 `padding-block` 的那版，全宽控件的左右环\n     就是这样被裁掉的（改动前 `.desc` 没有 overflow，最近裁剪祖先是 NONE，所以这是本轮\n     新引入的裁剪，不是既有限制）。\n\n     四条 padding 各配一条等量负 margin，把这 12px×2 从外部间距里扣回去，border box\n     回到改动前的样子，content box 的宽/高也不变（负 margin 让盒子外扩，padding 原样\n     吃回去）。所以 title→内容、内容→footer、内容与卡片左右沿的视觉间距与改动前逐像素\n     相同，宿主内层 grid 的可用尺寸也不变——后者是横向余量最该守住的不变量，否则\n     AddDialog 那种两栏 grid 的 drop zone 会换行（实测见\n     __tests__/dialog-content-height.browser.spec.ts 的「focus-ring 余量覆盖四条轴」）。\n\n     取舍，是取舍不是疏漏：负 margin 让 `.desc` 的 border box 溢出滚动内容区，所以\n     底部那圈 ring 余量不随内容滚动——滚到最底时 footer 那一侧仍留得住 padding，而\n     内容末端到 `.desc` 下沿的 desc-gap 恒定，不跟着内容走。 */\n  margin-top: calc(-1 * var(--wui-dialog-desc-focus-padding, 6px));\n\n  /* margin-bottom 是「desc-gap 减去那对 padding-block」，两个都是公开 token：宿主把\n     desc-gap 调到 focus-padding 以下就会算出负 margin（24/8 安全，4/2/0 会算出\n     -2/-4/-6）。max() 兜住下界 0——那条路径下内容末端与 footer 会贴在一起，但盒模型\n     与 grid 行分配不进负值区间。\n\n     横向不需要同样的兜底：margin-inline 恒为 -focus-padding，没有第二个公开 token 参与\n     减法。它与卡片 inline padding（默认 24px）的关系是「focus-padding 不应超过该\n     padding，否则 .desc 会横向溢出卡片」，由上面那段注释交代。 */\n  margin-bottom: max(\n    0px,\n    calc(var(--wui-dialog-desc-gap, var(--wui-space-6, 24px)) - var(--wui-dialog-desc-focus-padding, 6px))\n  );\n  margin-inline: calc(-1 * var(--wui-dialog-desc-focus-padding, 6px));\n  padding-block: var(--wui-dialog-desc-focus-padding, 6px);\n  padding-inline: var(--wui-dialog-desc-focus-padding, 6px);\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: var(--wui-line-height-normal, 1.5);\n  color: var(--wui-color-text, #1b1b1b);\n}\n\n/* `--wui-dialog-max-height` 是公开 token（README 有记录），语义是**内容区**高度。\n   默认值与整卡兜底同族（90vh / dvh），使未覆写的 dialog 视觉高度与改动前一致：\n   移动端 90vh 可能大于 90dvh（vh 取大视口高），少了 min() 内容区会探到工具栏下面。\n\n   必须紧跟在 `.desc` 之后而非文件开头的 @supports 块里：两者特异度相同（0,1,0），\n   靠后者胜。实测把本条挪到前面后，`.desc` 的计算值会退回 90vh。 */\n@supports (height: 100dvh) {\n  .desc {\n    max-height: calc(var(--wui-dialog-max-height, min(90vh, 90dvh)) + var(--wui-dialog-desc-focus-padding, 6px) * 2);\n  }\n}\n\n.wui-dialog-footer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wui-dialog-footer-gap, 10px);\n  justify-content: var(--wui-dialog-footer-justify, flex-end);\n\n  & ::slotted(web-ui-button) {\n    display: flex;\n    width: 100%;\n  }\n}\n\n:host([horizontal]) .wui-dialog-footer {\n  flex-direction: row;\n  gap: var(--wui-space-3, 12px);\n  justify-content: var(--wui-dialog-footer-justify, center);\n\n  & ::slotted(web-ui-button:not([full])) {\n    width: auto;\n  }\n\n  & ::slotted(web-ui-button[full]) {\n    flex: 1;\n    min-width: 0;\n  }\n}\n"],"mappings":""}

package/dist/components/drawer/index.d.ts

@@ -37,6 +37,9 @@ export declare class WebUiDrawer extends LitElement {
     private _hasHeaderSlot;
     private _hasFooterSlot;
     private readonly _userOpenChange;
+    private readonly _headerHeight;
+    private readonly _footerHeight;
+    private _setAvoidance;
     private readonly _scrollLock;
     private readonly _presence;
     private readonly _nestedLayers;
@@ -63,6 +66,29 @@ export declare class WebUiDrawer extends LitElement {
     private _isDragging;
     private _syncDragInert;
     private _cancelDragAwait;
+    /**
+     * 上下 placement 的 header / footer 自己接拖拽手势。
+     *
+     * 为什么不是「把热区铺到 header 上」：那样 header 里的控件会被透明命中层吞掉，
+     * 正是 A6 修掉的那条缺陷。这里改成事件层让开——控件照常收自己的事件，拖拽只在
+     * 「落点不是可点控件」时起手。
+     *
+     * 三道闸门任一不成立就不接管：
+     * 1. placement 必须是上下。左右 placement 的拖拽轴是 x，端头在竖边上，header
+     *    既不在可抓边缘上也不该起手（R4 的行为侧）。
+     * 2. 下层嵌套抽屉整套拖拽提示一起退场。热区与热边靠 CSS 的 pointer-events 退场，
+     *    事件层必须自己判同一条，否则 header 会成为唯一一条漏网的入口。
+     * 3. 落点路径里有可点控件就让开——控件优先于「这一块可拖」。
+     */
+    private _handleSectionDragPointerDown;
+    /**
+     * 按下路径上是否出现可点控件。
+     *
+     * 走 composedPath 而不是 event.target：消费侧 slotted 控件与组件库自绘控件都各有
+     * shadow root，target 只给出最内层那个节点，沿 parentElement 上行会在 shadow 边界
+     * 断掉，控件自己那层反而看不见。
+     */
+    private _isInteractivePath;
     private _handleDragPointerDown;
     private _trackSwipeCancel;
     private _cancelActiveDrag;
@@ -81,6 +107,25 @@ export declare class WebUiDrawer extends LitElement {
     disconnectedCallback(): void;
     /** 「重挂载恢复」的调用方一半：模块刻意不观察 DOM 连接状态。 */
     private _reclaimIfOpen;
+    /**
+     * 对账 header / footer slot 的有无，**只在真的变了时排一次更新**。
+     *
+     * 排更新是这条对账不可省的一半：`showHeader` 与 footer 的 `?hidden` 只在 render 里求值，
+     * 而 Lit 的 `connectedCallback` 只做 `enableUpdating(true)` 与 `setConnected(true)`，本身不排
+     * 更新。两条 slotchange 处理器也接不住这条路径——slotchange 只在**分配集合**变化时派发，
+     * 断连期间清空槽位内容时宿主节点本身没动，事件不触发（Chromium 实测）。
+     *
+     * 漏掉这一半的后果：断连前有 footer、重连时已清空的抽屉留下一节空的 footer。它在 style.css
+     * 的 padding 下仍有真实高度（实测 32px），于是底部一条点不动的死带，拖拽热区的让位量也照
+     * 它算而不归零。
+     *
+     * 判据取 light DOM 子节点而非 `slot.assignedNodes()`：首次连接时 shadow 尚未渲染，slot 元素
+     * 还不存在，那一侧会直接跳过（首次连接的 presence 由 `firstUpdated()` 与 slotchange 兜底）；
+     * 这里要的正是重连对账——shadow root 跨断连保留，两侧都可用，但只有子节点扫描不依赖渲染
+     * 时序。「只在真变了才排」与两条 slotchange 处理器同一纪律，避免每次重连都多一次空渲染。
+     */
+    private _resyncSlotPresence;
+    private _hasSlottedChild;
     private _checkSlotContent;
     private handleHeaderSlotChange;
     private handleFooterSlotChange;

package/dist/components/drawer/index.js

@@ -9,20 +9,48 @@ import { defineOpenOverlay as a } from "../../shared/overlay/open-overlay.js";
 import { defineScrollLockLease as o } from "../../shared/scroll-lock/scroll-lock.js";
 import { prefersReducedMotion as s } from "../../shared/theme/reduced-motion.js";
 import { UserChangeController as c } from "../../shared/events/user-change.js";
-import { defineNativeDialogPresence as l } from "../../shared/overlay/native-dialog-presence.js";
-import { attachDragGesture as u } from "../../shared/gesture/drag-gesture.js";
-import { dampOverscroll as d } from "../../shared/gesture/physics.js";
-import { defineNestedDrawerLayers as f } from "../../shared/overlay/nested-drawer-layers.js";
-import p from "./style.js";
-import { LitElement as m, html as h, nothing as g, unsafeCSS as _ } from "lit";
-import { customElement as v, property as y } from "lit/decorators.js";
+import l from "../../assets/modal-surface.js";
+import { defineNativeDialogPresence as u } from "../../shared/overlay/native-dialog-presence.js";
+import { ElementHeightController as d } from "../../shared/element-height/index.js";
+import { attachDragGesture as f } from "../../shared/gesture/drag-gesture.js";
+import { dampOverscroll as p } from "../../shared/gesture/physics.js";
+import { defineNestedDrawerLayers as m } from "../../shared/overlay/nested-drawer-layers.js";
+import h from "./style.js";
+import { LitElement as g, html as _, nothing as v, unsafeCSS as y } from "lit";
+import { customElement as b, property as x } from "lit/decorators.js";
 //#region src/components/drawer/index.ts
-var b = [
+var S = [
 	"right",
 	"left",
 	"top",
 	"bottom"
-], x = .5, S = 10, C = 500, w = 50, T = 10, E = 120, D = 10, O = 180, k = 420, A = "cubic-bezier(0.32, 0.72, 0, 1)", j = "cubic-bezier(0.22, 1.3, 0.36, 1)", M = 1, N = 80;
+], C = .5, w = 10, T = 500, E = 50, D = 10, O = 120, k = 10, A = [
+	"button",
+	"input",
+	"select",
+	"textarea",
+	"label",
+	"summary",
+	"a[href]",
+	"audio[controls]",
+	"video[controls]",
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	"[tabindex]:not([tabindex=\"-1\"])",
+	"[role=\"button\"]",
+	"[role=\"link\"]",
+	"[role=\"checkbox\"]",
+	"[role=\"switch\"]",
+	"[role=\"radio\"]",
+	"[role=\"tab\"]",
+	"[role=\"menuitem\"]",
+	"[role=\"menuitemcheckbox\"]",
+	"[role=\"menuitemradio\"]",
+	"[role=\"option\"]",
+	"[role=\"textbox\"]",
+	"[role=\"combobox\"]",
+	"[role=\"slider\"]",
+	"[role=\"spinbutton\"]"
+].join(","), j = 180, M = 420, N = "cubic-bezier(0.32, 0.72, 0, 1)", P = "cubic-bezier(0.22, 1.3, 0.36, 1)", F = 1, I = 80;
 if (typeof CSS < "u" && "registerProperty" in CSS) {
 	try {
 		CSS.registerProperty({
@@ -40,6 +68,14 @@ if (typeof CSS < "u" && "registerProperty" in CSS) {
 			initialValue: "8px"
 		});
 	} catch {}
+	try {
+		CSS.registerProperty({
+			name: "--wui-drawer-nested-peek-base",
+			syntax: "<length>",
+			inherits: !0,
+			initialValue: "43.2px"
+		});
+	} catch {}
 	try {
 		CSS.registerProperty({
 			name: "--wui-internal-settle-duration",
@@ -49,13 +85,13 @@ if (typeof CSS < "u" && "registerProperty" in CSS) {
 		});
 	} catch {}
 }
-var P = class extends m {
+var L = class extends g {
 	constructor(...e) {
-		super(...e), this.open = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this.controlled = !1, this._placement = "right", this.heading = "", this.closable = !1, this.headless = !1, this.dialogLabel = "", this.draggable = !1, this._hasHeaderSlot = !1, this._hasFooterSlot = !1, this._userOpenChange = new c(), this._scrollLock = o().make(), this._presence = l().make({
+		super(...e), this.open = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this.controlled = !1, this._placement = "right", this.heading = "", this.closable = !1, this.headless = !1, this.dialogLabel = "", this.draggable = !1, this._hasHeaderSlot = !1, this._hasFooterSlot = !1, this._userOpenChange = new c(), this._headerHeight = new d(this, ".wui-drawer-header", (e) => this._setAvoidance("--wui-internal-drawer-header-inset", e)), this._footerHeight = new d(this, ".wui-drawer-footer", (e) => this._setAvoidance("--wui-internal-drawer-footer-inset", e)), this._scrollLock = o().make(), this._presence = u().make({
 			getDialog: () => this.dialog,
 			isConnected: () => this.isConnected,
 			isOpen: () => this.open
-		}), this._nestedLayers = f().make({
+		}), this._nestedLayers = m().make({
 			getDialog: () => this.dialog,
 			getPlacement: () => this._placement
 		}), this._overlay = a().make({
@@ -80,18 +116,25 @@ var P = class extends m {
 		}, this._backdropPress = null;
 	}
 	static {
-		this.styles = [_(t), _(p)];
+		this.styles = [
+			y(t),
+			y(l),
+			y(h)
+		];
 	}
 	get placement() {
 		return this._placement;
 	}
 	set placement(e) {
 		let t = this._placement;
-		this._placement = r(e, b, "right"), this.requestUpdate("placement", t);
+		this._placement = r(e, S, "right"), this.requestUpdate("placement", t);
 	}
 	get dialog() {
 		return this.shadowRoot?.querySelector("dialog") ?? null;
 	}
+	_setAvoidance(e, t) {
+		this.style.setProperty(e, t > 0 ? `calc(${t}px + var(--wui-drawer-drag-zone-inset, var(--wui-space-1, 4px)))` : "0px");
+	}
 	get _dragAxis() {
 		return this._placement === "left" || this._placement === "right" ? "x" : "y";
 	}
@@ -108,7 +151,7 @@ var P = class extends m {
 		return e ? this._dragAxis === "x" ? e.offsetWidth : e.offsetHeight : 0;
 	}
 	_dragCloseThreshold(e) {
-		return Math.max(e * x, S);
+		return Math.max(e * C, w);
 	}
 	_readDrawerInset(e) {
 		let t = getComputedStyle(e).getPropertyValue("--wui-internal-drawer-inset"), n = Number.parseFloat(t);
@@ -126,6 +169,16 @@ var P = class extends m {
 	_cancelDragAwait() {
 		this._dragRequestTimer !== void 0 && (clearTimeout(this._dragRequestTimer), this._dragRequestTimer = void 0), this._dragAwaitWriteback = !1;
 	}
+	_handleSectionDragPointerDown(e) {
+		if (this._placement !== "top" && this._placement !== "bottom") return;
+		let t = (e.currentTarget?.closest(".wui-drawer-header, .wui-drawer-footer"))?.classList.contains("wui-drawer-header") ?? !1;
+		(this._placement !== "bottom" || t) && (this._placement === "top" && t || this.dialog?.classList.contains("is-nested-lower") || this._isInteractivePath(e) || this._handleDragPointerDown(e));
+	}
+	_isInteractivePath(e) {
+		let t = typeof e.composedPath == "function" ? e.composedPath() : [e.target];
+		for (let e of t) if (e instanceof Element && e.matches(A)) return !0;
+		return !1;
+	}
 	_handleDragPointerDown(e) {
 		if (!this.open || !this.draggable || this._isDragging() || e.isPrimary === !1) return;
 		let t = this.dialog;
@@ -133,18 +186,18 @@ var P = class extends m {
 		let n = getComputedStyle(t).transform, r = n && n !== "none" && typeof DOMMatrixReadOnly == "function" ? new DOMMatrixReadOnly(n)[this._dragAxis === "x" ? "m41" : "m42"] : 0;
 		this._abortSettle(), this._cancelDragAwait(), this._dragInitialOffset = r * this._dragCloseSign, this._dragOffset = this._dragInitialOffset;
 		let i = this._dragAxis === "x" ? e.clientX : e.clientY;
-		this._cancelBaseline = i, this._lastAxisPos = i, this._swipeIntentDisp = -1, this._swipeCancelled = !1, t.classList.add("is-dragging"), this._applyDragOffset(t, this._dragOffset), this._dragGesture = u(e, {
+		this._cancelBaseline = i, this._lastAxisPos = i, this._swipeIntentDisp = -1, this._swipeCancelled = !1, t.classList.add("is-dragging"), this._applyDragOffset(t, this._dragOffset), this._dragGesture = f(e, {
 			axis: this._dragAxis,
 			calibrateOnFirstMove: !0,
 			onMove: (e) => {
 				let n = (this._dragAxis === "x" ? e.deltaX : e.deltaY) * this._dragCloseSign;
-				this._dragOffset = this._dragInitialOffset + d(n), this._trackSwipeCancel(this._dragAxis === "x" ? e.clientX : e.clientY, n);
+				this._dragOffset = this._dragInitialOffset + p(n), this._trackSwipeCancel(this._dragAxis === "x" ? e.clientX : e.clientY, n);
 				let r = this._measureDragSize(), i = this._dragOffset - this._dragInitialOffset;
 				t.classList.toggle("is-drag-close", i > this._dragCloseThreshold(r)), this._applyDragOffset(t, this._dragOffset);
 			},
 			onEnd: (e) => {
 				this._dragGesture = null, this._syncDragInert(), t.classList.remove("is-dragging", "is-drag-close");
-				let n = this._measureDragSize(), r = (this._dragAxis === "x" ? e.velocityX : e.velocityY) * this._dragCloseSign, i = this._dragOffset - this._dragInitialOffset, a = e.duration > 0 ? i / Math.max(e.duration, w) * 1e3 : 0, o = i > 0 && a >= C && !this._swipeCancelled;
+				let n = this._measureDragSize(), r = (this._dragAxis === "x" ? e.velocityX : e.velocityY) * this._dragCloseSign, i = this._dragOffset - this._dragInitialOffset, a = e.duration > 0 ? i / Math.max(e.duration, E) * 1e3 : 0, o = i > 0 && a >= T && !this._swipeCancelled;
 				i > this._dragCloseThreshold(n) || o ? this._settleToClose(t, r) : this._settleRebound(t, r, this._dragOffset);
 			},
 			onCancel: () => {
@@ -159,7 +212,7 @@ var P = class extends m {
 			return;
 		}
 		let r = (e - this._cancelBaseline) * this._dragCloseSign;
-		r > this._dragCloseThreshold(this._measureDragSize()) ? this._swipeCancelled = !1 : this._swipeIntentDisp - r >= T && (this._swipeCancelled = !0);
+		r > this._dragCloseThreshold(this._measureDragSize()) ? this._swipeCancelled = !1 : this._swipeIntentDisp - r >= D && (this._swipeCancelled = !0);
 	}
 	_cancelActiveDrag() {
 		if (!this._isDragging()) return;
@@ -186,7 +239,7 @@ var P = class extends m {
 			e.classList.remove("is-dragging"), i();
 			return;
 		}
-		this._startSettle(e, r, 0, this._settleDuration(Math.abs(r - n), t), A, i);
+		this._startSettle(e, r, 0, this._settleDuration(Math.abs(r - n), t), N, i);
 	}
 	_settleRebound(e, t, n) {
 		this._dragOffset = 0;
@@ -197,16 +250,16 @@ var P = class extends m {
 			e.classList.remove("is-dragging"), r();
 			return;
 		}
-		this._startSettle(e, 0, 1, this._settleDuration(Math.abs(n), t), j, r);
+		this._startSettle(e, 0, 1, this._settleDuration(Math.abs(n), t), P, r);
 	}
 	_settleDuration(e, t) {
-		let n = e / Math.max(Math.abs(t), M) * 1e3;
-		return Math.min(k, Math.max(O, n));
+		let n = e / Math.max(Math.abs(t), F) * 1e3;
+		return Math.min(M, Math.max(j, n));
 	}
 	_startSettle(e, t, n, r, i, a) {
 		this._abortSettle();
 		let o = this._dragCloseSign;
-		e.style.setProperty("--wui-internal-settle-duration", `${r}ms`), e.style.setProperty("--wui-internal-settle-easing", i), e.style.transform = this._dragAxis === "x" ? `translateX(${t * o}px)` : `translateY(${t * o}px)`, e.style.setProperty("--wui-internal-drag-backdrop-opacity", String(n)), e.classList.add("is-settling"), e.classList.remove("is-dragging"), this._settleFinish = a, this._settleTimer = setTimeout(() => this._finishSettle(), r + N);
+		e.style.setProperty("--wui-internal-settle-duration", `${r}ms`), e.style.setProperty("--wui-internal-settle-easing", i), e.style.transform = this._dragAxis === "x" ? `translateX(${t * o}px)` : `translateY(${t * o}px)`, e.style.setProperty("--wui-internal-drag-backdrop-opacity", String(n)), e.classList.add("is-settling"), e.classList.remove("is-dragging"), this._settleFinish = a, this._settleTimer = setTimeout(() => this._finishSettle(), r + I);
 	}
 	_finishSettle() {
 		let e = this._settleFinish;
@@ -218,10 +271,10 @@ var P = class extends m {
 		e && (e.classList.remove("is-settling"), e.style.removeProperty("--wui-internal-settle-duration"), e.style.removeProperty("--wui-internal-settle-easing"));
 	}
 	_closeFromDrag() {
-		this._closeFromUser(), this.controlled && (this._dragAwaitWriteback = !0, this._dragRequestTimer = setTimeout(this._handleDragWritebackTimeout, E));
+		this._closeFromUser(), this.controlled && (this._dragAwaitWriteback = !0, this._dragRequestTimer = setTimeout(this._handleDragWritebackTimeout, O));
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._hasHeaderSlot = Array.from(this.children).some((e) => e.getAttribute?.("slot") === "header"), this._hasFooterSlot = Array.from(this.children).some((e) => e.getAttribute?.("slot") === "footer"), this._presence.reconcile(), this.open && this._nestedLayers.register(), this._syncScrollLock(), this._reclaimIfOpen();
+		super.connectedCallback(), this._resyncSlotPresence(), this._presence.reconcile(), this.open && this._nestedLayers.register(), this._syncScrollLock(), this._reclaimIfOpen();
 	}
 	firstUpdated() {
 		this._checkSlotContent("footer");
@@ -234,6 +287,13 @@ var P = class extends m {
 		let e = this.dialog;
 		e && (this._handle = this._overlay.claim(e, { ancestryFrom: this }), this._syncDragInert());
 	}
+	_resyncSlotPresence() {
+		let e = this._hasSlottedChild("header"), t = this._hasSlottedChild("footer");
+		(e !== this._hasHeaderSlot || t !== this._hasFooterSlot) && (this._hasHeaderSlot = e, this._hasFooterSlot = t, this.requestUpdate());
+	}
+	_hasSlottedChild(e) {
+		return Array.from(this.children).some((t) => t.getAttribute("slot") === e);
+	}
 	_checkSlotContent(e) {
 		let t = this.shadowRoot?.querySelector(`slot[name="${e}"]`);
 		if (!t) return;
@@ -262,7 +322,7 @@ var P = class extends m {
 					e && this._clearDragStyles(e);
 				}
 				if (this._presence.sync(this.open), this.open) {
-					this._nestedLayers.register();
+					window.getSelection()?.removeAllRanges(), this._nestedLayers.register();
 					let e = this.dialog;
 					e && (this._handle?.release(), this._handle = this._overlay.claim(e, { ancestryFrom: this }), this._syncDragInert());
 				} else this._nestedLayers.unregister(), this._handle?.release(), this._handle = null;
@@ -320,7 +380,7 @@ var P = class extends m {
 	handleBackdropClick(e) {
 		if (e.target !== e.currentTarget || this.noBackdropClose || this._isDragging() || e.detail === 0) return;
 		let t = this._backdropPress;
-		this._backdropPress = null, t && t.onMask && (Math.hypot(e.clientX - t.x, e.clientY - t.y) > D || this._closeFromUser());
+		this._backdropPress = null, t && t.onMask && (Math.hypot(e.clientX - t.x, e.clientY - t.y) > k || this._closeFromUser());
 	}
 	emitOpenChange(e = this.open) {
 		i(this, e);
@@ -329,14 +389,14 @@ var P = class extends m {
 		this._scrollLock.sync(e && !this.noScrollLock);
 	}
 	render() {
-		let e = this._hasHeaderSlot || !!this.heading, t = this.dialogLabel.trim(), r = !t && !this.headless && e ? "wui-drawer-heading" : g, i = this.draggable ? h`
-          <div class="wui-drawer-drag-zone" @pointerdown=${this._handleDragPointerDown}>
-            <div class="wui-drawer-drag-bar"></div>
-          </div>
-        ` : g;
-		return h`
+		let e = this._hasHeaderSlot || !!this.heading, t = this.dialogLabel.trim(), r = !t && !this.headless && e ? "wui-drawer-heading" : v, i = this.placement === "top" || this.placement === "bottom", a = this.draggable ? _`
+          ${i ? _`<div class="wui-drawer-drag-edge" @pointerdown=${this._handleDragPointerDown}></div>` : v}
+          <div class="wui-drawer-drag-zone" @pointerdown=${this._handleDragPointerDown}></div>
+          <div class="wui-drawer-drag-bar"></div>
+        ` : v;
+		return _`
       <dialog
-        aria-label=${t || g}
+        aria-label=${t || v}
         aria-labelledby=${r}
         @cancel=${this.handleCancel}
         @close=${this.handleNativeClose}
@@ -345,21 +405,30 @@ var P = class extends m {
         @keydown=${this.handleKeydown}
         @transitionend=${this.handleTransitionEnd}
       >
-        ${this.headless ? h`<slot></slot>${i}` : h`
+        ${this.headless ? _`<slot></slot>${a}` : _`
                 <div class="wui-drawer-body wui-glass">
-                  <div class="wui-drawer-header" id="wui-drawer-heading" ?hidden=${!e}>
+                  <div
+                    class="wui-drawer-header"
+                    id="wui-drawer-heading"
+                    ?hidden=${!e}
+                    @pointerdown=${this._handleSectionDragPointerDown}
+                  >
                     <slot name="header" @slotchange=${this.handleHeaderSlotChange}>
-                      ${this.heading ? h`<span class="wui-drawer-heading">${this.heading}</span>` : g}
+                      ${this.heading ? _`<span class="wui-drawer-heading">${this.heading}</span>` : v}
                     </slot>
                   </div>
                   <div class="wui-drawer-content">
                     <slot></slot>
                   </div>
-                  <div class="wui-drawer-footer" ?hidden=${!this._hasFooterSlot}>
+                  <div
+                    class="wui-drawer-footer"
+                    ?hidden=${!this._hasFooterSlot}
+                    @pointerdown=${this._handleSectionDragPointerDown}
+                  >
                     <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
                   </div>
                 </div>
-                ${this.closable ? h`
+                ${this.closable ? _`
                         <web-ui-button
                           class="wui-drawer-close"
                           @click=${this._closeFromUser}
@@ -370,44 +439,44 @@ var P = class extends m {
                         >
                           <web-ui-icon size="14" .icon=${n}></web-ui-icon>
                         </web-ui-button>
-                      ` : g}
-                ${i}
+                      ` : v}
+                ${a}
               `}
       </dialog>
     `;
 	}
 };
-e([y({
+e([x({
 	type: Boolean,
 	reflect: !0
-})], P.prototype, "open", void 0), e([y({
+})], L.prototype, "open", void 0), e([x({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-scroll-lock"
-})], P.prototype, "noScrollLock", void 0), e([y({
+})], L.prototype, "noScrollLock", void 0), e([x({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-backdrop-close"
-})], P.prototype, "noBackdropClose", void 0), e([y({
+})], L.prototype, "noBackdropClose", void 0), e([x({
 	type: Boolean,
 	reflect: !0
-})], P.prototype, "controlled", void 0), e([y({
+})], L.prototype, "controlled", void 0), e([x({
 	type: String,
 	reflect: !0
-})], P.prototype, "placement", null), e([y({ type: String })], P.prototype, "heading", void 0), e([y({
+})], L.prototype, "placement", null), e([x({ type: String })], L.prototype, "heading", void 0), e([x({
 	type: Boolean,
 	reflect: !0
-})], P.prototype, "closable", void 0), e([y({
+})], L.prototype, "closable", void 0), e([x({
 	type: Boolean,
 	reflect: !0
-})], P.prototype, "headless", void 0), e([y({
+})], L.prototype, "headless", void 0), e([x({
 	type: String,
 	attribute: "dialog-label"
-})], P.prototype, "dialogLabel", void 0), e([y({
+})], L.prototype, "dialogLabel", void 0), e([x({
 	type: Boolean,
 	reflect: !0
-})], P.prototype, "draggable", void 0), P = e([v("web-ui-drawer")], P);
+})], L.prototype, "draggable", void 0), L = e([b("web-ui-drawer")], L);
 //#endregion
-export { P as WebUiDrawer };
+export { L as WebUiDrawer };
 
 //# sourceMappingURL=index.js.map