huibo-ui 0.3.0 → 0.5.0

package/dist/components/hb-dialog.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-1407a5e8.js';
 import { g as getNextZIndex, l as lockScroll, u as unlockScroll } from './p-ecce2b5e.js';
-import { c as createFocusTrap } from './p-cc0aeb50.js';
+import { c as createFocusTrap } from './p-00aa34c8.js';
 
-const dialogCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.container{width:100%}.hidden{display:none}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{display:contents}.hb-dialog-wrapper{inset:0;pointer-events:none;position:fixed}.hb-dialog-wrapper--hidden{display:none}.hb-dialog__overlay{background-color:var(--hb-color-bg-mask);inset:0;transition:opacity .3s}.hb-dialog,.hb-dialog__overlay{pointer-events:auto;position:fixed}.hb-dialog{background-color:var(--hb-dialog-bg);border-radius:var(--hb-dialog-radius);box-shadow:var(--hb-dialog-shadow);display:flex;flex-direction:column;left:50%;max-height:90vh;opacity:0;overflow:hidden;top:50%;transform:translate(-50%,-50%)scale(.9);transition:opacity .3s,transform .3s}.hb-dialog--visible{opacity:1;transform:translate(-50%,-50%)scale(1)}.hb-dialog--fullscreen{border-radius:0;height:100vh;left:0;max-height:100vh;top:0;transform:none;width:100%!important}.hb-dialog--fullscreen.hb-dialog--visible{transform:none}.hb-dialog__header{align-items:center;border-bottom:1px solid var(--hb-color-border-secondary);display:flex;justify-content:space-between;padding:var(--hb-spacing-md)var(--hb-spacing-lg)}.hb-dialog__title{color:var(--hb-color-text-primary);font-size:var(--hb-font-size-lg);font-weight:600}.hb-dialog__close{align-items:center;background:0 0;border:none;border-radius:var(--hb-border-radius-sm);color:var(--hb-color-text-secondary);cursor:pointer;display:inline-flex;font-size:18px;height:28px;justify-content:center;transition:all var(--hb-transition-duration);width:28px}.hb-dialog__close:hover{background-color:var(--hb-color-fill-tertiary);color:var(--hb-color-text-primary)}.hb-dialog__body{color:var(--hb-color-text);flex:1;font-size:var(--hb-font-size-base);overflow-y:auto;padding:var(--hb-spacing-lg)}.hb-dialog__footer{align-items:center;border-top:1px solid var(--hb-color-border-secondary);display:flex;gap:var(--hb-spacing-xs);justify-content:flex-end;padding:var(--hb-spacing-sm)var(--hb-spacing-lg)}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}";
+const dialogCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.container{width:100%}.hidden{display:none}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{display:contents}.hb-dialog-wrapper{inset:0;pointer-events:none;position:fixed}.hb-dialog-wrapper--hidden{display:none}.hb-dialog__overlay{animation:hb-dialog-overlay-in .3s both;background-color:var(--hb-color-bg-mask);inset:0;pointer-events:auto;position:fixed}.hb-dialog__overlay--leaving{animation:hb-dialog-overlay-out .3s both}@keyframes hb-dialog-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes hb-dialog-overlay-out{0%{opacity:1}to{opacity:0}}.hb-dialog{animation:hb-dialog-in .3s cubic-bezier(.16,1,.3,1) both;background-color:var(--hb-dialog-bg);border-radius:var(--hb-dialog-radius);box-shadow:var(--hb-dialog-shadow);display:flex;flex-direction:column;left:50%;max-height:90vh;overflow:hidden;pointer-events:auto;position:fixed;top:50%}.hb-dialog--leaving{animation:hb-dialog-out .3s cubic-bezier(.5,0,.75,0) both}@keyframes hb-dialog-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.9)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes hb-dialog-out{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(.95)}}.hb-dialog--fullscreen{border-radius:0;height:100vh;left:0;max-height:100vh;top:0;width:100%!important}.hb-dialog--fullscreen,.hb-dialog--fullscreen.hb-dialog--leaving{animation:none}.hb-dialog__header{align-items:center;border-bottom:1px solid var(--hb-color-border-secondary);display:flex;justify-content:space-between;padding:var(--hb-spacing-md)var(--hb-spacing-lg)}.hb-dialog__title{color:var(--hb-color-text-primary);font-size:var(--hb-font-size-lg);font-weight:600}.hb-dialog__close{align-items:center;background:0 0;border:none;border-radius:var(--hb-border-radius-sm);color:var(--hb-color-text-secondary);cursor:pointer;display:inline-flex;height:28px;justify-content:center;padding:0;transition:all var(--hb-transition-duration);width:28px}.hb-dialog__close svg{height:16px;width:16px}.hb-dialog__close:hover{background-color:var(--hb-color-fill-tertiary);color:var(--hb-color-text-primary)}.hb-dialog__body{color:var(--hb-color-text);flex:1;font-size:var(--hb-font-size-base);overflow-y:auto;padding:var(--hb-spacing-lg)}.hb-dialog__footer{align-items:center;border-top:1px solid var(--hb-color-border-secondary);display:flex;gap:var(--hb-spacing-xs);justify-content:flex-end;padding:var(--hb-spacing-sm)var(--hb-spacing-lg)}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}";
 const HbDialogStyle0 = dialogCss;
 
 const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends H {
@@ -42,18 +42,28 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends H {
     zIndex = 0;
     panelRef;
     trap;
-    handleVisibleChange(newVal) {
+    /** 离场动画期间保留渲染（避免 display:none 打断 transition） */
+    leaving = false;
+    leaveTimer;
+    handleVisibleChange(newVal, oldVal) {
         if (newVal) {
+            // 打开：清掉可能残留的离场定时器，重置 leaving
+            if (this.leaveTimer) {
+                clearTimeout(this.leaveTimer);
+                this.leaveTimer = undefined;
+            }
+            this.leaving = false;
             this.zIndex = getNextZIndex();
             if (this.modal)
                 lockScroll();
             this.hbOpen.emit();
             document.addEventListener('keydown', this.handleKeyDown);
         }
-        else {
-            if (this.modal)
-                unlockScroll();
-            document.removeEventListener('keydown', this.handleKeyDown);
+        else if (oldVal) {
+            // 关闭（受控或内部触发统一走这里）：进入离场动画期，
+            // 动画结束（300ms）后才 emit closed + 真正卸载。
+            // 仅在「从打开→关闭」时执行，避免已关闭时重复 emit。
+            this.startLeave();
         }
     }
     disconnectedCallback() {
@@ -61,6 +71,8 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends H {
             unlockScroll();
         document.removeEventListener('keydown', this.handleKeyDown);
         this.trap?.disconnect();
+        if (this.leaveTimer)
+            clearTimeout(this.leaveTimer);
     }
     componentDidRender() {
         if (!this.panelRef)
@@ -82,24 +94,51 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends H {
     };
     close = () => {
         this.modelValue = false;
-        this.hbClose.emit();
-        setTimeout(() => this.hbClosed.emit(), 300);
+        this.startLeave();
     };
+    /**
+     * 进入离场动画期：解锁滚动、移除监听、保留 DOM 播放动画，
+     * 结束（300ms）后重置 leaving 并 emit hbClosed。
+     * 受控关闭（父组件直接设 modelValue=false 经 @Watch）与内部关闭（ESC/遮罩/关闭按钮）
+     * 统一走这里，保证两者行为一致（都有动画 + 都 emit hbClose/hbClosed）。
+     */
+    startLeave() {
+        if (this.modal)
+            unlockScroll();
+        document.removeEventListener('keydown', this.handleKeyDown);
+        this.hbClose.emit();
+        this.leaving = true;
+        if (this.leaveTimer)
+            clearTimeout(this.leaveTimer);
+        this.leaveTimer = setTimeout(() => {
+            this.leaving = false;
+            this.hbClosed.emit();
+        }, 300);
+    }
     handleOverlayClick = () => {
         if (this.closeOnClickModal)
             this.close();
     };
+    /** 是否应渲染弹层 DOM：打开中 或 离场动画期内 */
+    get shouldRender() {
+        return this.modelValue || this.leaving;
+    }
     render() {
-        if (this.destroyOnClose && !this.modelValue)
+        if (this.destroyOnClose && !this.shouldRender)
             return null;
-        return (h("div", { class: { 'hb-dialog-wrapper': true, 'hb-dialog-wrapper--hidden': !this.modelValue } }, this.modal && (h("div", { class: "hb-dialog__overlay", style: { zIndex: String(this.zIndex) }, onClick: this.handleOverlayClick })), h("div", { ref: (el) => (this.panelRef = el), class: {
+        return (h("div", { class: { 'hb-dialog-wrapper': true, 'hb-dialog-wrapper--hidden': !this.shouldRender } }, this.modal && (h("div", { class: {
+                'hb-dialog__overlay': true,
+                'hb-dialog__overlay--visible': this.modelValue,
+                'hb-dialog__overlay--leaving': this.leaving,
+            }, style: { zIndex: String(this.zIndex) }, onClick: this.handleOverlayClick })), h("div", { ref: el => (this.panelRef = el), class: {
                 'hb-dialog': true,
                 'hb-dialog--fullscreen': this.fullscreen,
                 'hb-dialog--visible': this.modelValue,
+                'hb-dialog--leaving': this.leaving,
             }, style: {
                 zIndex: String(this.zIndex + 1),
                 width: this.fullscreen ? '100%' : this.width,
-            }, role: "dialog", "aria-modal": "true" }, h("div", { class: "hb-dialog__header" }, h("span", { class: "hb-dialog__title" }, this.title), this.showClose && (h("button", { type: "button", class: "hb-dialog__close", "aria-label": "\u5173\u95ED", onClick: this.close }, "\u00D7"))), h("div", { class: "hb-dialog__body" }, h("slot", null)), h("div", { class: "hb-dialog__footer" }, h("slot", { name: "footer" })))));
+            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.modelValue ? 'false' : 'true' }, h("div", { class: "hb-dialog__header" }, h("span", { class: "hb-dialog__title" }, this.title), this.showClose && (h("button", { type: "button", class: "hb-dialog__close", "aria-label": "\u5173\u95ED", onClick: this.close }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M6 6l12 12M18 6L6 18" }))))), h("div", { class: "hb-dialog__body" }, h("slot", null)), h("div", { class: "hb-dialog__footer" }, h("slot", { name: "footer" })))));
     }
     static get watchers() { return {
         "modelValue": ["handleVisibleChange"]
@@ -114,7 +153,8 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends H {
         "closeOnClickModal": [4, "close-on-click-modal"],
         "closeOnPressEscape": [4, "close-on-press-escape"],
         "showClose": [4, "show-close"],
-        "destroyOnClose": [4, "destroy-on-close"]
+        "destroyOnClose": [4, "destroy-on-close"],
+        "leaving": [32]
     }, undefined, {
         "modelValue": ["handleVisibleChange"]
     }]);

package/dist/components/hb-dialog.js.map

@@ -1 +1 @@
-{"file":"hb-dialog.js","mappings":"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","names":[],"sources":["src/components/Dialog/dialog.css?tag=hb-dialog&encapsulation=shadow","src/components/Dialog/Dialog.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.hb-dialog-wrapper {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n}\n\n.hb-dialog-wrapper--hidden {\n  display: none;\n}\n\n.hb-dialog__overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: var(--hb-color-bg-mask);\n  transition: opacity 0.3s;\n  pointer-events: auto;\n}\n\n.hb-dialog {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(0.9);\n  background-color: var(--hb-dialog-bg);\n  border-radius: var(--hb-dialog-radius);\n  box-shadow: var(--hb-dialog-shadow);\n  pointer-events: auto;\n  opacity: 0;\n  transition: opacity 0.3s, transform 0.3s;\n  display: flex;\n  flex-direction: column;\n  max-height: 90vh;\n  overflow: hidden;\n}\n\n.hb-dialog--visible {\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1);\n}\n\n.hb-dialog--fullscreen {\n  width: 100% !important;\n  height: 100vh;\n  top: 0;\n  left: 0;\n  transform: none;\n  border-radius: 0;\n  max-height: 100vh;\n}\n.hb-dialog--fullscreen.hb-dialog--visible {\n  transform: none;\n}\n\n.hb-dialog__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--hb-spacing-md) var(--hb-spacing-lg);\n  border-bottom: 1px solid var(--hb-color-border-secondary);\n}\n\n.hb-dialog__title {\n  font-size: var(--hb-font-size-lg);\n  font-weight: 600;\n  color: var(--hb-color-text-primary);\n}\n\n.hb-dialog__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: none;\n  font-size: 18px;\n  color: var(--hb-color-text-secondary);\n  cursor: pointer;\n  border-radius: var(--hb-border-radius-sm);\n  transition: all var(--hb-transition-duration);\n}\n\n.hb-dialog__close:hover {\n  background-color: var(--hb-color-fill-tertiary);\n  color: var(--hb-color-text-primary);\n}\n\n.hb-dialog__body {\n  flex: 1;\n  padding: var(--hb-spacing-lg);\n  overflow-y: auto;\n  color: var(--hb-color-text);\n  font-size: var(--hb-font-size-base);\n}\n\n.hb-dialog__footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--hb-spacing-xs);\n  padding: var(--hb-spacing-sm) var(--hb-spacing-lg);\n  border-top: 1px solid var(--hb-color-border-secondary);\n}\n","import { Component, h, Prop, Event, EventEmitter, Watch, Element } from '@stencil/core';\nimport { lockScroll, unlockScroll, getNextZIndex } from '../../utils/popup-manager';\nimport { createFocusTrap, FocusTrap } from '../../utils/a11y';\n\n/**\n * Dialog 对话框组件\n * 在保留当前页面状态的情况下，告知用户并承载相关操作\n */\n@Component({\n  tag: 'hb-dialog',\n  styleUrl: 'dialog.css',\n  shadow: true,\n})\nexport class Dialog {\n  @Element() el: HTMLElement;\n\n  /** 是否显示 */\n  @Prop({ mutable: true }) modelValue: boolean = false;\n\n  /** 标题 */\n  @Prop() title: string = '';\n\n  /** 宽度 */\n  @Prop() width: string = '50%';\n\n  /** 是否全屏 */\n  @Prop() fullscreen: boolean = false;\n\n  /** 是否显示遮罩 */\n  @Prop() modal: boolean = true;\n\n  /** 是否点击遮罩关闭 */\n  @Prop() closeOnClickModal: boolean = true;\n\n  /** 是否按 ESC 关闭 */\n  @Prop() closeOnPressEscape: boolean = true;\n\n  /** 是否显示关闭按钮 */\n  @Prop() showClose: boolean = true;\n\n  /** 关闭时销毁 */\n  @Prop() destroyOnClose: boolean = false;\n\n  /** 打开事件 */\n  @Event() hbOpen: EventEmitter<void>;\n\n  /** 关闭事件 */\n  @Event() hbClose: EventEmitter<void>;\n\n  /** 已关闭动画结束事件 */\n  @Event() hbClosed: EventEmitter<void>;\n\n  private zIndex: number = 0;\n  private panelRef?: HTMLElement;\n  private trap?: FocusTrap;\n\n  @Watch('modelValue')\n  handleVisibleChange(newVal: boolean) {\n    if (newVal) {\n      this.zIndex = getNextZIndex();\n      if (this.modal) lockScroll();\n      this.hbOpen.emit();\n      document.addEventListener('keydown', this.handleKeyDown);\n    } else {\n      if (this.modal) unlockScroll();\n      document.removeEventListener('keydown', this.handleKeyDown);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.modelValue && this.modal) unlockScroll();\n    document.removeEventListener('keydown', this.handleKeyDown);\n    this.trap?.disconnect();\n  }\n\n  componentDidRender() {\n    if (!this.panelRef) return;\n    if (this.modelValue) {\n      if (!this.trap) {\n        this.trap = createFocusTrap({ container: this.panelRef });\n      }\n      this.trap.connect();\n    } else {\n      this.trap?.disconnect();\n    }\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.closeOnPressEscape && e.key === 'Escape') {\n      this.close();\n    }\n  };\n\n  private close = () => {\n    this.modelValue = false;\n    this.hbClose.emit();\n    setTimeout(() => this.hbClosed.emit(), 300);\n  };\n\n  private handleOverlayClick = () => {\n    if (this.closeOnClickModal) this.close();\n  };\n\n  render() {\n    if (this.destroyOnClose && !this.modelValue) return null;\n\n    return (\n      <div class={{ 'hb-dialog-wrapper': true, 'hb-dialog-wrapper--hidden': !this.modelValue }}>\n        {this.modal && (\n          <div\n            class=\"hb-dialog__overlay\"\n            style={{ zIndex: String(this.zIndex) }}\n            onClick={this.handleOverlayClick}\n          />\n        )}\n        <div\n          ref={(el) => (this.panelRef = el as HTMLElement)}\n          class={{\n            'hb-dialog': true,\n            'hb-dialog--fullscreen': this.fullscreen,\n            'hb-dialog--visible': this.modelValue,\n          }}\n          style={{\n            zIndex: String(this.zIndex + 1),\n            width: this.fullscreen ? '100%' : this.width,\n          }}\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <div class=\"hb-dialog__header\">\n            <span class=\"hb-dialog__title\">{this.title}</span>\n            {this.showClose && (\n              <button type=\"button\" class=\"hb-dialog__close\" aria-label=\"关闭\" onClick={this.close}>×</button>\n            )}\n          </div>\n          <div class=\"hb-dialog__body\">\n            <slot />\n          </div>\n          <div class=\"hb-dialog__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"hb-dialog.js","mappings":"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","names":[],"sources":["src/components/Dialog/dialog.css?tag=hb-dialog&encapsulation=shadow","src/components/Dialog/Dialog.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.hb-dialog-wrapper {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n}\n\n.hb-dialog-wrapper--hidden {\n  display: none;\n}\n\n.hb-dialog__overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: var(--hb-color-bg-mask);\n  pointer-events: auto;\n  /* 进场：opacity 0 → 1；离场由 --leaving class 反向播放 */\n  animation: hb-dialog-overlay-in 0.3s ease both;\n}\n\n.hb-dialog__overlay--leaving {\n  animation: hb-dialog-overlay-out 0.3s ease both;\n}\n\n@keyframes hb-dialog-overlay-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes hb-dialog-overlay-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n.hb-dialog {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  background-color: var(--hb-dialog-bg);\n  border-radius: var(--hb-dialog-radius);\n  box-shadow: var(--hb-dialog-shadow);\n  pointer-events: auto;\n  display: flex;\n  flex-direction: column;\n  max-height: 90vh;\n  overflow: hidden;\n  /* 进场：opacity + scale（对齐 antd Modal 的 fade+zoom） */\n  animation: hb-dialog-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n\n.hb-dialog--leaving {\n  animation: hb-dialog-out 0.3s cubic-bezier(0.5, 0, 0.75, 0) both;\n}\n\n@keyframes hb-dialog-in {\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.9);\n  }\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n@keyframes hb-dialog-out {\n  from {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.95);\n  }\n}\n\n.hb-dialog--fullscreen {\n  width: 100% !important;\n  height: 100vh;\n  top: 0;\n  left: 0;\n  border-radius: 0;\n  max-height: 100vh;\n}\n.hb-dialog--fullscreen,\n.hb-dialog--fullscreen.hb-dialog--leaving {\n  animation: none;\n}\n\n.hb-dialog__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--hb-spacing-md) var(--hb-spacing-lg);\n  border-bottom: 1px solid var(--hb-color-border-secondary);\n}\n\n.hb-dialog__title {\n  font-size: var(--hb-font-size-lg);\n  font-weight: 600;\n  color: var(--hb-color-text-primary);\n}\n\n.hb-dialog__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: none;\n  color: var(--hb-color-text-secondary);\n  cursor: pointer;\n  border-radius: var(--hb-border-radius-sm);\n  transition: all var(--hb-transition-duration);\n  padding: 0;\n}\n\n.hb-dialog__close svg {\n  width: 16px;\n  height: 16px;\n}\n\n.hb-dialog__close:hover {\n  background-color: var(--hb-color-fill-tertiary);\n  color: var(--hb-color-text-primary);\n}\n\n.hb-dialog__body {\n  flex: 1;\n  padding: var(--hb-spacing-lg);\n  overflow-y: auto;\n  color: var(--hb-color-text);\n  font-size: var(--hb-font-size-base);\n}\n\n.hb-dialog__footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--hb-spacing-xs);\n  padding: var(--hb-spacing-sm) var(--hb-spacing-lg);\n  border-top: 1px solid var(--hb-color-border-secondary);\n}\n","import { Component, h, Prop, Event, EventEmitter, Watch, Element, State } from '@stencil/core';\nimport { lockScroll, unlockScroll, getNextZIndex } from '../../utils/popup-manager';\nimport { createFocusTrap, FocusTrap } from '../../utils/a11y';\n\n/**\n * Dialog 对话框组件\n * 在保留当前页面状态的情况下，告知用户并承载相关操作\n */\n@Component({\n  tag: 'hb-dialog',\n  styleUrl: 'dialog.css',\n  shadow: true,\n})\nexport class Dialog {\n  @Element() el: HTMLElement;\n\n  /** 是否显示 */\n  @Prop({ mutable: true }) modelValue: boolean = false;\n\n  /** 标题 */\n  @Prop() title: string = '';\n\n  /** 宽度 */\n  @Prop() width: string = '50%';\n\n  /** 是否全屏 */\n  @Prop() fullscreen: boolean = false;\n\n  /** 是否显示遮罩 */\n  @Prop() modal: boolean = true;\n\n  /** 是否点击遮罩关闭 */\n  @Prop() closeOnClickModal: boolean = true;\n\n  /** 是否按 ESC 关闭 */\n  @Prop() closeOnPressEscape: boolean = true;\n\n  /** 是否显示关闭按钮 */\n  @Prop() showClose: boolean = true;\n\n  /** 关闭时销毁 */\n  @Prop() destroyOnClose: boolean = false;\n\n  /** 打开事件 */\n  @Event() hbOpen: EventEmitter<void>;\n\n  /** 关闭事件 */\n  @Event() hbClose: EventEmitter<void>;\n\n  /** 已关闭动画结束事件 */\n  @Event() hbClosed: EventEmitter<void>;\n\n  private zIndex: number = 0;\n  private panelRef?: HTMLElement;\n  private trap?: FocusTrap;\n  /** 离场动画期间保留渲染（避免 display:none 打断 transition） */\n  @State() leaving: boolean = false;\n  private leaveTimer?: ReturnType<typeof setTimeout>;\n\n  @Watch('modelValue')\n  handleVisibleChange(newVal: boolean, oldVal: boolean) {\n    if (newVal) {\n      // 打开：清掉可能残留的离场定时器，重置 leaving\n      if (this.leaveTimer) {\n        clearTimeout(this.leaveTimer);\n        this.leaveTimer = undefined;\n      }\n      this.leaving = false;\n      this.zIndex = getNextZIndex();\n      if (this.modal) lockScroll();\n      this.hbOpen.emit();\n      document.addEventListener('keydown', this.handleKeyDown);\n    } else if (oldVal) {\n      // 关闭（受控或内部触发统一走这里）：进入离场动画期，\n      // 动画结束（300ms）后才 emit closed + 真正卸载。\n      // 仅在「从打开→关闭」时执行，避免已关闭时重复 emit。\n      this.startLeave();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.modelValue && this.modal) unlockScroll();\n    document.removeEventListener('keydown', this.handleKeyDown);\n    this.trap?.disconnect();\n    if (this.leaveTimer) clearTimeout(this.leaveTimer);\n  }\n\n  componentDidRender() {\n    if (!this.panelRef) return;\n    if (this.modelValue) {\n      if (!this.trap) {\n        this.trap = createFocusTrap({ container: this.panelRef });\n      }\n      this.trap.connect();\n    } else {\n      this.trap?.disconnect();\n    }\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.closeOnPressEscape && e.key === 'Escape') {\n      this.close();\n    }\n  };\n\n  private close = () => {\n    this.modelValue = false;\n    this.startLeave();\n  };\n\n  /**\n   * 进入离场动画期：解锁滚动、移除监听、保留 DOM 播放动画，\n   * 结束（300ms）后重置 leaving 并 emit hbClosed。\n   * 受控关闭（父组件直接设 modelValue=false 经 @Watch）与内部关闭（ESC/遮罩/关闭按钮）\n   * 统一走这里，保证两者行为一致（都有动画 + 都 emit hbClose/hbClosed）。\n   */\n  private startLeave() {\n    if (this.modal) unlockScroll();\n    document.removeEventListener('keydown', this.handleKeyDown);\n    this.hbClose.emit();\n    this.leaving = true;\n    if (this.leaveTimer) clearTimeout(this.leaveTimer);\n    this.leaveTimer = setTimeout(() => {\n      this.leaving = false;\n      this.hbClosed.emit();\n    }, 300);\n  }\n\n  private handleOverlayClick = () => {\n    if (this.closeOnClickModal) this.close();\n  };\n\n  /** 是否应渲染弹层 DOM：打开中 或 离场动画期内 */\n  private get shouldRender(): boolean {\n    return this.modelValue || this.leaving;\n  }\n\n  render() {\n    if (this.destroyOnClose && !this.shouldRender) return null;\n\n    return (\n      <div class={{ 'hb-dialog-wrapper': true, 'hb-dialog-wrapper--hidden': !this.shouldRender }}>\n        {this.modal && (\n          <div\n            class={{\n              'hb-dialog__overlay': true,\n              'hb-dialog__overlay--visible': this.modelValue,\n              'hb-dialog__overlay--leaving': this.leaving,\n            }}\n            style={{ zIndex: String(this.zIndex) }}\n            onClick={this.handleOverlayClick}\n          />\n        )}\n        <div\n          ref={el => (this.panelRef = el as HTMLElement)}\n          class={{\n            'hb-dialog': true,\n            'hb-dialog--fullscreen': this.fullscreen,\n            'hb-dialog--visible': this.modelValue,\n            'hb-dialog--leaving': this.leaving,\n          }}\n          style={{\n            zIndex: String(this.zIndex + 1),\n            width: this.fullscreen ? '100%' : this.width,\n          }}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.modelValue ? 'false' : 'true'}\n        >\n          <div class=\"hb-dialog__header\">\n            <span class=\"hb-dialog__title\">{this.title}</span>\n            {this.showClose && (\n              <button type=\"button\" class=\"hb-dialog__close\" aria-label=\"关闭\" onClick={this.close}>\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <path d=\"M6 6l12 12M18 6L6 18\" />\n                </svg>\n              </button>\n            )}\n          </div>\n          <div class=\"hb-dialog__body\">\n            <slot />\n          </div>\n          <div class=\"hb-dialog__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/hb-divider.js

@@ -18,13 +18,13 @@ const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends H {
     dashed = false;
     render() {
         const hasContent = this.el.childNodes.length > 0;
-        return (h("div", { key: '9c92e52f27cf63f9eb08f76204c0380df1f70762', class: {
+        return (h("div", { key: '72f2e4f0e52b38799b0c292e99565c683a2b455c', class: {
                 'hb-divider': true,
                 [`hb-divider--${this.direction}`]: true,
                 'hb-divider--dashed': this.dashed,
                 'hb-divider--with-text': hasContent,
                 [`hb-divider--with-text-${this.contentPosition}`]: hasContent,
-            } }, h("div", { key: 'be7ed538cb7c11ecd5228456c70064b7a1134c22', class: "hb-divider__line hb-divider__line--before" }), h("div", { key: '381b60a6d74c9d595d23ba931f4de73a1479d45c', class: "hb-divider__text" }, h("slot", { key: '0bd08b0d41a9d2d4dad651e0c37a7e7fc10eab4c' })), h("div", { key: 'dd0774049f2b68b47f21c7171532f830d766c276', class: "hb-divider__line hb-divider__line--after" })));
+            } }, h("div", { key: 'afe16a81dee380655eaa42090dd1b760e9403e8c', class: "hb-divider__line hb-divider__line--before" }), h("div", { key: '9b64b270790df8794ae9bbbe13783fc1b77367f1', class: "hb-divider__text" }, h("slot", { key: '9e9a5a024fa6212026cca8e9e8d76e84af6523cb' })), h("div", { key: '6277539ebf37f4e295e8b9d9a8ce912de15efa71', class: "hb-divider__line hb-divider__line--after" })));
     }
     static get style() { return HbDividerStyle0; }
 }, [1, "hb-divider", {

package/dist/components/hb-drawer.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-1407a5e8.js';
 import { g as getNextZIndex, l as lockScroll, u as unlockScroll } from './p-ecce2b5e.js';
-import { c as createFocusTrap } from './p-cc0aeb50.js';
+import { c as createFocusTrap } from './p-00aa34c8.js';
 
-const drawerCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.container{width:100%}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{display:contents}.hb-drawer-wrapper{inset:0;pointer-events:none;position:fixed;z-index:1000}.hb-drawer__overlay{background:var(--hb-color-bg-mask);inset:0;transition:opacity .3s}.hb-drawer,.hb-drawer__overlay{pointer-events:auto;position:fixed}.hb-drawer{background:var(--hb-color-bg-elevated);box-shadow:var(--hb-box-shadow-lg);display:flex;flex-direction:column;transition:transform .3s}.hb-drawer--rtl{bottom:0;right:0;top:0;transform:translate(100%)}.hb-drawer--ltr{bottom:0;left:0;top:0;transform:translate(-100%)}.hb-drawer--ttb{left:0;right:0;top:0;transform:translateY(-100%)}.hb-drawer--btt{bottom:0;left:0;right:0;transform:translateY(100%)}.hb-drawer--visible.hb-drawer--ltr,.hb-drawer--visible.hb-drawer--rtl{transform:translate(0)}.hb-drawer--visible.hb-drawer--btt,.hb-drawer--visible.hb-drawer--ttb{transform:translateY(0)}.hb-drawer__header{align-items:center;border-bottom:1px solid var(--hb-color-border-secondary);display:flex;justify-content:space-between;padding:var(--hb-spacing-md)var(--hb-spacing-lg)}.hb-drawer__title{font-size:var(--hb-font-size-lg);font-weight:600}.hb-drawer__close{align-items:center;background:0 0;border:none;border-radius:var(--hb-border-radius-sm);color:var(--hb-color-text-secondary);cursor:pointer;display:flex;font-size:18px;height:28px;justify-content:center;width:28px}.hb-drawer__close:hover{background:var(--hb-color-fill-tertiary)}.hb-drawer__body{flex:1;overflow-y:auto;padding:var(--hb-spacing-lg)}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}";
+const drawerCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.container{width:100%}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{display:contents}.hb-drawer-wrapper{inset:0;pointer-events:none;position:fixed;z-index:1000}.hb-drawer-wrapper:not(.hb-drawer-wrapper--visible){display:none}.hb-drawer__overlay{animation:hb-drawer-overlay-in .3s both;background:var(--hb-color-bg-mask);inset:0;pointer-events:auto;position:fixed}.hb-drawer__overlay--leaving{animation:hb-drawer-overlay-out .3s both}@keyframes hb-drawer-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes hb-drawer-overlay-out{0%{opacity:1}to{opacity:0}}.hb-drawer{background:var(--hb-color-bg-elevated);box-shadow:var(--hb-box-shadow-lg);display:flex;flex-direction:column;pointer-events:auto;position:fixed}.hb-drawer--rtl{bottom:0;right:0;top:0}.hb-drawer--ltr{bottom:0;left:0;top:0}.hb-drawer--ttb{left:0;right:0;top:0}.hb-drawer--btt{bottom:0;left:0;right:0}.hb-drawer--visible.hb-drawer--rtl{animation:hb-drawer-in-rtl .3s cubic-bezier(.16,1,.3,1) both}.hb-drawer--visible.hb-drawer--ltr{animation:hb-drawer-in-ltr .3s cubic-bezier(.16,1,.3,1) both}.hb-drawer--visible.hb-drawer--ttb{animation:hb-drawer-in-ttb .3s cubic-bezier(.16,1,.3,1) both}.hb-drawer--visible.hb-drawer--btt{animation:hb-drawer-in-btt .3s cubic-bezier(.16,1,.3,1) both}.hb-drawer--leaving.hb-drawer--rtl{animation:hb-drawer-out-rtl .3s cubic-bezier(.5,0,.75,0) both}.hb-drawer--leaving.hb-drawer--ltr{animation:hb-drawer-out-ltr .3s cubic-bezier(.5,0,.75,0) both}.hb-drawer--leaving.hb-drawer--ttb{animation:hb-drawer-out-ttb .3s cubic-bezier(.5,0,.75,0) both}.hb-drawer--leaving.hb-drawer--btt{animation:hb-drawer-out-btt .3s cubic-bezier(.5,0,.75,0) both}@keyframes hb-drawer-in-rtl{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes hb-drawer-out-rtl{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes hb-drawer-in-ltr{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes hb-drawer-out-ltr{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes hb-drawer-in-ttb{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes hb-drawer-out-ttb{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes hb-drawer-in-btt{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes hb-drawer-out-btt{0%{transform:translateY(0)}to{transform:translateY(100%)}}.hb-drawer__header{align-items:center;border-bottom:1px solid var(--hb-color-border-secondary);display:flex;justify-content:space-between;padding:var(--hb-spacing-md)var(--hb-spacing-lg)}.hb-drawer__title{font-size:var(--hb-font-size-lg);font-weight:600}.hb-drawer__close{align-items:center;background:0 0;border:none;border-radius:var(--hb-border-radius-sm);color:var(--hb-color-text-secondary);cursor:pointer;display:flex;height:28px;justify-content:center;padding:0;transition:all var(--hb-transition-duration);width:28px}.hb-drawer__close svg{height:16px;width:16px}.hb-drawer__close:hover{background:var(--hb-color-fill-tertiary);color:var(--hb-color-text-primary)}.hb-drawer__body{flex:1;overflow-y:auto;padding:var(--hb-spacing-lg)}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}";
 const HbDrawerStyle0 = drawerCss;
 
 const Drawer = /*@__PURE__*/ proxyCustomElement(class Drawer extends H {
@@ -26,10 +26,18 @@ const Drawer = /*@__PURE__*/ proxyCustomElement(class Drawer extends H {
     zIndex = 0;
     panelRef;
     trap;
+    /** 离场动画期内保留渲染 */
+    leaving = false;
+    leaveTimer;
     hbOpen;
     hbClose;
     handleVisible(val) {
         if (val) {
+            if (this.leaveTimer) {
+                clearTimeout(this.leaveTimer);
+                this.leaveTimer = undefined;
+            }
+            this.leaving = false;
             this.zIndex = getNextZIndex();
             this.zIndexState = this.zIndex;
             if (this.modal)
@@ -42,6 +50,13 @@ const Drawer = /*@__PURE__*/ proxyCustomElement(class Drawer extends H {
                 unlockScroll();
             this.hbClose.emit();
             document.removeEventListener('keydown', this.handleKeyDown);
+            // 进入离场动画期，结束后真正卸载
+            this.leaving = true;
+            if (this.leaveTimer)
+                clearTimeout(this.leaveTimer);
+            this.leaveTimer = setTimeout(() => {
+                this.leaving = false;
+            }, 300);
         }
     }
     componentDidRender() {
@@ -62,19 +77,34 @@ const Drawer = /*@__PURE__*/ proxyCustomElement(class Drawer extends H {
             unlockScroll();
         document.removeEventListener('keydown', this.handleKeyDown);
         this.trap?.disconnect();
+        if (this.leaveTimer)
+            clearTimeout(this.leaveTimer);
     }
     handleKeyDown = (e) => {
         if (this.closeOnPressEscape && e.key === 'Escape') {
             this.close();
         }
     };
-    close = () => { this.modelValue = false; };
+    close = () => {
+        this.modelValue = false;
+    };
+    get shouldRender() {
+        return this.modelValue || this.leaving;
+    }
     render() {
         const dir = this.direction;
         const isVertical = dir === 'ttb' || dir === 'btt';
         const sizeStyle = isVertical ? { height: this.size } : { width: this.size };
         const translateClass = `hb-drawer--${dir}`;
-        return (h("div", { key: 'fdcae509a34a2de7ba9405106b217fda8ce765fa', class: { 'hb-drawer-wrapper': true, 'hb-drawer-wrapper--visible': this.modelValue } }, this.modal && h("div", { key: '439a2a35c0936bc0e347e7826f801dbf87d1047b', class: "hb-drawer__overlay", style: { zIndex: String(this.zIndexState) }, onClick: () => this.closeOnClickModal && this.close() }), h("div", { key: '924fc27dc43f9d7b466b81a7b70cbfb1a6ba199e', ref: (el) => (this.panelRef = el), class: { 'hb-drawer': true, [translateClass]: true, 'hb-drawer--visible': this.modelValue }, style: { ...sizeStyle, zIndex: String(this.zIndexState + 1) }, role: "dialog", "aria-modal": "true", "aria-label": this.title || undefined }, h("div", { key: '6c0c1e6e4938ad96c51add0e4be93de8ef72a056', class: "hb-drawer__header" }, h("span", { key: 'bc061a418b7358364b19190cc6b042fb5a049c95', class: "hb-drawer__title" }, this.title), this.showClose && h("button", { key: '52ceeac26c55f0e89c8c4410959c25b13ab2e28b', type: "button", class: "hb-drawer__close", "aria-label": "\u5173\u95ED", onClick: this.close }, "\u00D7")), h("div", { key: 'ca916f681e9c7e4fb33d1d0b7cee03a20f42f7eb', class: "hb-drawer__body" }, h("slot", { key: 'f8a3fb1d251d5c16c98257bb8896c081623f321e' })))));
+        return (h("div", { key: '1b19a23690272c043ad80a8f4ad01470ef1f6627', class: { 'hb-drawer-wrapper': true, 'hb-drawer-wrapper--visible': this.shouldRender } }, this.modal && (h("div", { key: '6f1492a485eeb634e59a50300be5ad8af6ebfdcb', class: {
+                'hb-drawer__overlay': true,
+                'hb-drawer__overlay--leaving': this.leaving,
+            }, style: { zIndex: String(this.zIndexState) }, onClick: () => this.closeOnClickModal && this.close() })), h("div", { key: '4276468b6d5c2bc8628ccefeafc0de7acf372931', ref: el => (this.panelRef = el), class: {
+                'hb-drawer': true,
+                [translateClass]: true,
+                'hb-drawer--visible': this.modelValue,
+                'hb-drawer--leaving': this.leaving,
+            }, style: { ...sizeStyle, zIndex: String(this.zIndexState + 1) }, role: "dialog", "aria-modal": "true", "aria-label": this.title || undefined, "aria-hidden": this.modelValue ? 'false' : 'true' }, h("div", { key: '66c7aa0843425292845c3a3c5841abaca233efd4', class: "hb-drawer__header" }, h("span", { key: '07226dc7437adb12e0d08ccf2259c6e470d4eea3', class: "hb-drawer__title" }, this.title), this.showClose && (h("button", { key: '2658edb09e334c02fa0218b414c354b4cbb20220', type: "button", class: "hb-drawer__close", "aria-label": "\u5173\u95ED", onClick: this.close }, h("svg", { key: '8ad5e5558c02fdb0271fa93d6fa279dee949d9f0', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: 'ff3585922cdeb73e68dbf1755092ade914579506', d: "M6 6l12 12M18 6L6 18" }))))), h("div", { key: 'b64ddf86b2f5a0344b80e7fb729c19a2d6d6fe5c', class: "hb-drawer__body" }, h("slot", { key: '3e3904d5d149a765130eb5f59ac1d268d48c39f6' })))));
     }
     static get watchers() { return {
         "modelValue": ["handleVisible"]
@@ -89,7 +119,8 @@ const Drawer = /*@__PURE__*/ proxyCustomElement(class Drawer extends H {
         "showClose": [4, "show-close"],
         "modal": [4],
         "closeOnPressEscape": [4, "close-on-press-escape"],
-        "zIndexState": [32]
+        "zIndexState": [32],
+        "leaving": [32]
     }, undefined, {
         "modelValue": ["handleVisible"]
     }]);

package/dist/components/hb-drawer.js.map

@@ -1 +1 @@
-{"file":"hb-drawer.js","mappings":"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","names":[],"sources":["src/components/Drawer/drawer.css?tag=hb-drawer&encapsulation=shadow","src/components/Drawer/Drawer.tsx"],"sourcesContent":[":host { display: contents; }\n.hb-drawer-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1000; }\n.hb-drawer__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--hb-color-bg-mask); pointer-events: auto; transition: opacity 0.3s; }\n.hb-drawer {\n  position: fixed; background: var(--hb-color-bg-elevated); box-shadow: var(--hb-box-shadow-lg);\n  display: flex; flex-direction: column; pointer-events: auto; transition: transform 0.3s ease;\n}\n.hb-drawer--rtl { top: 0; right: 0; bottom: 0; transform: translateX(100%); }\n.hb-drawer--ltr { top: 0; left: 0; bottom: 0; transform: translateX(-100%); }\n.hb-drawer--ttb { left: 0; right: 0; top: 0; transform: translateY(-100%); }\n.hb-drawer--btt { left: 0; right: 0; bottom: 0; transform: translateY(100%); }\n.hb-drawer--visible.hb-drawer--rtl, .hb-drawer--visible.hb-drawer--ltr { transform: translateX(0); }\n.hb-drawer--visible.hb-drawer--ttb, .hb-drawer--visible.hb-drawer--btt { transform: translateY(0); }\n.hb-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: var(--hb-spacing-md) var(--hb-spacing-lg); border-bottom: 1px solid var(--hb-color-border-secondary); }\n.hb-drawer__title { font-size: var(--hb-font-size-lg); font-weight: 600; }\n.hb-drawer__close { border: none; background: none; font-size: 18px; cursor: pointer; color: var(--hb-color-text-secondary); width: 28px; height: 28px; border-radius: var(--hb-border-radius-sm); display: flex; align-items: center; justify-content: center; }\n.hb-drawer__close:hover { background: var(--hb-color-fill-tertiary); }\n.hb-drawer__body { flex: 1; padding: var(--hb-spacing-lg); overflow-y: auto; }\n","import { Component, h, Prop, Event, EventEmitter, Watch, State } from '@stencil/core';\nimport { lockScroll, unlockScroll, getNextZIndex } from '../../utils/popup-manager';\nimport { createFocusTrap, FocusTrap } from '../../utils/a11y';\n\n@Component({ tag: 'hb-drawer', styleUrl: 'drawer.css', shadow: true })\nexport class Drawer {\n  @Prop({ mutable: true }) modelValue: boolean = false;\n  @Prop() title: string = '';\n  @Prop() size: string = '30%';\n  @Prop() direction: 'ltr' | 'rtl' | 'ttb' | 'btt' = 'rtl';\n  @Prop() closeOnClickModal: boolean = true;\n  @Prop() showClose: boolean = true;\n  @Prop() modal: boolean = true;\n  /** 是否按 ESC 关闭 */\n  @Prop() closeOnPressEscape: boolean = true;\n  @State() private zIndexState: number = 0;\n  private zIndex: number = 0;\n  private panelRef?: HTMLElement;\n  private trap?: FocusTrap;\n\n  @Event() hbOpen: EventEmitter<void>;\n  @Event() hbClose: EventEmitter<void>;\n\n  @Watch('modelValue')\n  handleVisible(val: boolean) {\n    if (val) {\n      this.zIndex = getNextZIndex();\n      this.zIndexState = this.zIndex;\n      if (this.modal) lockScroll();\n      this.hbOpen.emit();\n      document.addEventListener('keydown', this.handleKeyDown);\n    } else {\n      if (this.modal) unlockScroll();\n      this.hbClose.emit();\n      document.removeEventListener('keydown', this.handleKeyDown);\n    }\n  }\n\n  componentDidRender() {\n    if (!this.panelRef) return;\n    if (this.modelValue) {\n      if (!this.trap) {\n        this.trap = createFocusTrap({ container: this.panelRef });\n      }\n      this.trap.connect();\n    } else {\n      this.trap?.disconnect();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.modelValue && this.modal) unlockScroll();\n    document.removeEventListener('keydown', this.handleKeyDown);\n    this.trap?.disconnect();\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.closeOnPressEscape && e.key === 'Escape') {\n      this.close();\n    }\n  };\n\n  private close = () => { this.modelValue = false; };\n\n  render() {\n    const dir = this.direction;\n    const isVertical = dir === 'ttb' || dir === 'btt';\n    const sizeStyle = isVertical ? { height: this.size } : { width: this.size };\n    const translateClass = `hb-drawer--${dir}`;\n\n    return (\n      <div class={{ 'hb-drawer-wrapper': true, 'hb-drawer-wrapper--visible': this.modelValue }}>\n        {this.modal && <div class=\"hb-drawer__overlay\" style={{ zIndex: String(this.zIndexState) }} onClick={() => this.closeOnClickModal && this.close()} />}\n        <div\n          ref={(el) => (this.panelRef = el as HTMLElement)}\n          class={{ 'hb-drawer': true, [translateClass]: true, 'hb-drawer--visible': this.modelValue }}\n          style={{ ...sizeStyle, zIndex: String(this.zIndexState + 1) }}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={this.title || undefined}\n        >\n          <div class=\"hb-drawer__header\">\n            <span class=\"hb-drawer__title\">{this.title}</span>\n            {this.showClose && <button type=\"button\" class=\"hb-drawer__close\" aria-label=\"关闭\" onClick={this.close}>×</button>}\n          </div>\n          <div class=\"hb-drawer__body\"><slot /></div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"hb-drawer.js","mappings":"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","names":[],"sources":["src/components/Drawer/drawer.css?tag=hb-drawer&encapsulation=shadow","src/components/Drawer/Drawer.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n.hb-drawer-wrapper {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  z-index: 1000;\n}\n\n/* wrapper 默认不显示（modelValue=false 且离场结束时）；打开/离场期都可见 */\n.hb-drawer-wrapper:not(.hb-drawer-wrapper--visible) {\n  display: none;\n}\n\n.hb-drawer__overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--hb-color-bg-mask);\n  pointer-events: auto;\n  animation: hb-drawer-overlay-in 0.3s ease both;\n}\n.hb-drawer__overlay--leaving {\n  animation: hb-drawer-overlay-out 0.3s ease both;\n}\n@keyframes hb-drawer-overlay-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes hb-drawer-overlay-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n.hb-drawer {\n  position: fixed;\n  background: var(--hb-color-bg-elevated);\n  box-shadow: var(--hb-box-shadow-lg);\n  display: flex;\n  flex-direction: column;\n  pointer-events: auto;\n}\n\n/* 四方向进场动画（从屏外滑入）。visible 时播放 in；leaving 时播放 out */\n.hb-drawer--rtl {\n  top: 0;\n  right: 0;\n  bottom: 0;\n}\n.hb-drawer--ltr {\n  top: 0;\n  left: 0;\n  bottom: 0;\n}\n.hb-drawer--ttb {\n  left: 0;\n  right: 0;\n  top: 0;\n}\n.hb-drawer--btt {\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n\n.hb-drawer--visible.hb-drawer--rtl {\n  animation: hb-drawer-in-rtl 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n.hb-drawer--visible.hb-drawer--ltr {\n  animation: hb-drawer-in-ltr 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n.hb-drawer--visible.hb-drawer--ttb {\n  animation: hb-drawer-in-ttb 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n.hb-drawer--visible.hb-drawer--btt {\n  animation: hb-drawer-in-btt 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n\n.hb-drawer--leaving.hb-drawer--rtl {\n  animation: hb-drawer-out-rtl 0.3s cubic-bezier(0.5, 0, 0.75, 0) both;\n}\n.hb-drawer--leaving.hb-drawer--ltr {\n  animation: hb-drawer-out-ltr 0.3s cubic-bezier(0.5, 0, 0.75, 0) both;\n}\n.hb-drawer--leaving.hb-drawer--ttb {\n  animation: hb-drawer-out-ttb 0.3s cubic-bezier(0.5, 0, 0.75, 0) both;\n}\n.hb-drawer--leaving.hb-drawer--btt {\n  animation: hb-drawer-out-btt 0.3s cubic-bezier(0.5, 0, 0.75, 0) both;\n}\n\n@keyframes hb-drawer-in-rtl {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@keyframes hb-drawer-out-rtl {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n@keyframes hb-drawer-in-ltr {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@keyframes hb-drawer-out-ltr {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-100%);\n  }\n}\n@keyframes hb-drawer-in-ttb {\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n@keyframes hb-drawer-out-ttb {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(-100%);\n  }\n}\n@keyframes hb-drawer-in-btt {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n@keyframes hb-drawer-out-btt {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(100%);\n  }\n}\n\n.hb-drawer__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--hb-spacing-md) var(--hb-spacing-lg);\n  border-bottom: 1px solid var(--hb-color-border-secondary);\n}\n.hb-drawer__title {\n  font-size: var(--hb-font-size-lg);\n  font-weight: 600;\n}\n.hb-drawer__close {\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--hb-color-text-secondary);\n  width: 28px;\n  height: 28px;\n  border-radius: var(--hb-border-radius-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  transition: all var(--hb-transition-duration);\n}\n.hb-drawer__close svg {\n  width: 16px;\n  height: 16px;\n}\n.hb-drawer__close:hover {\n  background: var(--hb-color-fill-tertiary);\n  color: var(--hb-color-text-primary);\n}\n.hb-drawer__body {\n  flex: 1;\n  padding: var(--hb-spacing-lg);\n  overflow-y: auto;\n}\n","import { Component, h, Prop, Event, EventEmitter, Watch, State } from '@stencil/core';\nimport { lockScroll, unlockScroll, getNextZIndex } from '../../utils/popup-manager';\nimport { createFocusTrap, FocusTrap } from '../../utils/a11y';\n\n@Component({ tag: 'hb-drawer', styleUrl: 'drawer.css', shadow: true })\nexport class Drawer {\n  @Prop({ mutable: true }) modelValue: boolean = false;\n  @Prop() title: string = '';\n  @Prop() size: string = '30%';\n  @Prop() direction: 'ltr' | 'rtl' | 'ttb' | 'btt' = 'rtl';\n  @Prop() closeOnClickModal: boolean = true;\n  @Prop() showClose: boolean = true;\n  @Prop() modal: boolean = true;\n  /** 是否按 ESC 关闭 */\n  @Prop() closeOnPressEscape: boolean = true;\n  @State() private zIndexState: number = 0;\n  private zIndex: number = 0;\n  private panelRef?: HTMLElement;\n  private trap?: FocusTrap;\n  /** 离场动画期内保留渲染 */\n  @State() private leaving: boolean = false;\n  private leaveTimer?: ReturnType<typeof setTimeout>;\n\n  @Event() hbOpen: EventEmitter<void>;\n  @Event() hbClose: EventEmitter<void>;\n\n  @Watch('modelValue')\n  handleVisible(val: boolean) {\n    if (val) {\n      if (this.leaveTimer) {\n        clearTimeout(this.leaveTimer);\n        this.leaveTimer = undefined;\n      }\n      this.leaving = false;\n      this.zIndex = getNextZIndex();\n      this.zIndexState = this.zIndex;\n      if (this.modal) lockScroll();\n      this.hbOpen.emit();\n      document.addEventListener('keydown', this.handleKeyDown);\n    } else {\n      if (this.modal) unlockScroll();\n      this.hbClose.emit();\n      document.removeEventListener('keydown', this.handleKeyDown);\n      // 进入离场动画期，结束后真正卸载\n      this.leaving = true;\n      if (this.leaveTimer) clearTimeout(this.leaveTimer);\n      this.leaveTimer = setTimeout(() => {\n        this.leaving = false;\n      }, 300);\n    }\n  }\n\n  componentDidRender() {\n    if (!this.panelRef) return;\n    if (this.modelValue) {\n      if (!this.trap) {\n        this.trap = createFocusTrap({ container: this.panelRef });\n      }\n      this.trap.connect();\n    } else {\n      this.trap?.disconnect();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.modelValue && this.modal) unlockScroll();\n    document.removeEventListener('keydown', this.handleKeyDown);\n    this.trap?.disconnect();\n    if (this.leaveTimer) clearTimeout(this.leaveTimer);\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.closeOnPressEscape && e.key === 'Escape') {\n      this.close();\n    }\n  };\n\n  private close = () => {\n    this.modelValue = false;\n  };\n\n  private get shouldRender(): boolean {\n    return this.modelValue || this.leaving;\n  }\n\n  render() {\n    const dir = this.direction;\n    const isVertical = dir === 'ttb' || dir === 'btt';\n    const sizeStyle = isVertical ? { height: this.size } : { width: this.size };\n    const translateClass = `hb-drawer--${dir}`;\n\n    return (\n      <div class={{ 'hb-drawer-wrapper': true, 'hb-drawer-wrapper--visible': this.shouldRender }}>\n        {this.modal && (\n          <div\n            class={{\n              'hb-drawer__overlay': true,\n              'hb-drawer__overlay--leaving': this.leaving,\n            }}\n            style={{ zIndex: String(this.zIndexState) }}\n            onClick={() => this.closeOnClickModal && this.close()}\n          />\n        )}\n        <div\n          ref={el => (this.panelRef = el as HTMLElement)}\n          class={{\n            'hb-drawer': true,\n            [translateClass]: true,\n            'hb-drawer--visible': this.modelValue,\n            'hb-drawer--leaving': this.leaving,\n          }}\n          style={{ ...sizeStyle, zIndex: String(this.zIndexState + 1) }}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={this.title || undefined}\n          aria-hidden={this.modelValue ? 'false' : 'true'}\n        >\n          <div class=\"hb-drawer__header\">\n            <span class=\"hb-drawer__title\">{this.title}</span>\n            {this.showClose && (\n              <button type=\"button\" class=\"hb-drawer__close\" aria-label=\"关闭\" onClick={this.close}>\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <path d=\"M6 6l12 12M18 6L6 18\" />\n                </svg>\n              </button>\n            )}\n          </div>\n          <div class=\"hb-drawer__body\">\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/hb-dropdown.js

@@ -1,8 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-1407a5e8.js';
 import { c as createClickOutsideHandler } from './p-4ef5a884.js';
 import { g as getNextZIndex } from './p-ecce2b5e.js';
+import { i as isActivationKey, h as handleListKeyboard } from './p-00aa34c8.js';
+import { c as createLeaveScheduler } from './p-fad66d69.js';
 
-const dropdownCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{display:inline-block;position:relative}.hb-dropdown__trigger{cursor:pointer;display:inline-block}.hb-dropdown__menu{animation:hb-dropdown-fade-in .15s ease-out;background-color:var(--hb-color-bg-elevated);border-radius:var(--hb-border-radius-base);box-shadow:var(--hb-box-shadow);left:0;margin-top:4px;min-width:120px;padding:4px 0;position:absolute;top:100%}.hb-dropdown__item{align-items:center;color:var(--hb-color-text);cursor:pointer;display:flex;font-size:var(--hb-font-size-sm);padding:6px 16px;transition:background-color var(--hb-transition-duration);white-space:nowrap}.hb-dropdown__item:hover:not(.hb-dropdown__item--disabled){background-color:var(--hb-color-fill-tertiary);color:var(--hb-color-primary)}.hb-dropdown__item--disabled{color:var(--hb-color-text-disabled);cursor:not-allowed}.hb-dropdown__item--divided{border-top:1px solid var(--hb-color-border-secondary);margin-top:4px;padding-top:8px}.hb-dropdown__item--danger{color:var(--hb-color-danger)}.hb-dropdown__item--danger:hover:not(.hb-dropdown__item--disabled){background-color:var(--hb-color-danger-bg);color:var(--hb-color-danger)}@keyframes hb-dropdown-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
+const dropdownCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{display:inline-block;position:relative}.hb-dropdown__trigger{cursor:pointer;display:inline-block}.hb-dropdown__menu{animation:hb-dropdown-fade-in .15s ease-out;background-color:var(--hb-color-bg-elevated);border-radius:var(--hb-border-radius-base);box-shadow:var(--hb-box-shadow);left:0;margin-top:4px;min-width:120px;padding:4px 0;position:absolute;top:100%}.hb-dropdown__item{align-items:center;color:var(--hb-color-text);cursor:pointer;display:flex;font-size:var(--hb-font-size-sm);padding:6px 16px;transition:background-color var(--hb-transition-duration);white-space:nowrap}.hb-dropdown__item--active:not(.hb-dropdown__item--disabled),.hb-dropdown__item:hover:not(.hb-dropdown__item--disabled){background-color:var(--hb-color-fill-tertiary);color:var(--hb-color-primary)}.hb-dropdown__item--disabled{color:var(--hb-color-text-disabled);cursor:not-allowed}.hb-dropdown__item--divided{border-top:1px solid var(--hb-color-border-secondary);margin-top:4px;padding-top:8px}.hb-dropdown__item--danger{color:var(--hb-color-danger)}.hb-dropdown__item--danger:hover:not(.hb-dropdown__item--disabled){background-color:var(--hb-color-danger-bg);color:var(--hb-color-danger)}@keyframes hb-dropdown-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.hb-dropdown__menu--leaving{animation:hb-dropdown-fade-out .15s ease-in forwards}@keyframes hb-dropdown-fade-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
 const HbDropdownStyle0 = dropdownCss;
 
 const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
@@ -20,18 +22,27 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
     /** 是否禁用 */
     disabled = false;
     isOpen = false;
+    /** 离场动画期（保留 DOM 让 fade-out 播完） */
+    leaving = false;
+    /** 键盘高亮项索引（-1 表示无） */
+    activeIndex = -1;
     /** 命令事件 */
     hbCommand;
+    leave = createLeaveScheduler(() => this.leaving, v => (this.leaving = v), 150);
     clickOutside = createClickOutsideHandler({
         host: null,
         isOpen: () => this.isOpen,
-        onClose: () => { this.isOpen = false; },
+        onClose: () => {
+            this.close();
+        },
     });
     componentDidLoad() {
         this.clickOutside = createClickOutsideHandler({
             host: this.el,
             isOpen: () => this.isOpen,
-            onClose: () => { this.isOpen = false; },
+            onClose: () => {
+                this.close();
+            },
         });
         if (this.trigger === 'click') {
             this.clickOutside.connect();
@@ -39,35 +50,104 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
     }
     disconnectedCallback() {
         this.clickOutside.disconnect();
+        this.leave.dispose();
     }
-    show = () => {
+    open = () => {
         if (this.disabled)
             return;
+        this.leave.cancel(); // 中途又打开：取消挂起的离场
         this.isOpen = true;
+        this.activeIndex = this.items.findIndex(i => !i.disabled);
     };
-    hide = () => {
+    close = () => {
+        if (!this.isOpen && !this.leaving)
+            return;
         this.isOpen = false;
+        this.activeIndex = -1;
+        this.leave.start();
+    };
+    show = () => {
+        if (this.disabled)
+            return;
+        this.open();
+    };
+    hide = () => {
+        this.close();
     };
     toggle = () => {
         if (this.disabled)
             return;
-        this.isOpen = !this.isOpen;
+        if (this.isOpen)
+            this.close();
+        else
+            this.open();
     };
     handleSelect = (item) => {
         if (item.disabled)
             return;
-        this.isOpen = false;
+        this.close();
         this.hbCommand.emit(item.key);
     };
+    handleTriggerKeydown = (e) => {
+        if (this.disabled)
+            return;
+        if (this.trigger === 'hover')
+            return;
+        if (isActivationKey(e.key) || e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.open();
+        }
+    };
+    handleMenuKeydown = (e) => {
+        const enabledCount = this.items.length;
+        const action = handleListKeyboard(e, {
+            activeIndex: this.activeIndex,
+            itemCount: enabledCount,
+            loop: true,
+        });
+        switch (action.type) {
+            case 'navigate':
+                e.preventDefault();
+                {
+                    let idx = action.index;
+                    for (let i = 0; i < enabledCount; i++) {
+                        if (!this.items[idx]?.disabled)
+                            break;
+                        idx = (idx + 1) % enabledCount;
+                    }
+                    this.activeIndex = idx;
+                }
+                break;
+            case 'select': {
+                e.preventDefault();
+                const item = this.items[action.index];
+                if (item && !item.disabled)
+                    this.handleSelect(item);
+                break;
+            }
+            case 'close':
+                e.preventDefault();
+                this.close();
+                break;
+        }
+    };
+    get shouldRender() {
+        return this.isOpen || this.leaving;
+    }
     render() {
-        const triggerEvents = this.trigger === 'hover'
-            ? { onMouseEnter: this.show, onMouseLeave: this.hide }
-            : { onClick: this.toggle };
-        return (h("div", { key: '65db176398a94c702f6c3fcdc4128ed0e6afc376', class: "hb-dropdown", ...triggerEvents }, h("div", { key: '2c96f9af4f69d1a1c52195546b5b777e5a2d54b8', class: "hb-dropdown__trigger" }, h("slot", { key: 'cd007dcd7d357cc1d041472a72faa0a3a025bda2' })), this.isOpen && (h("div", { key: 'a3bdebbc0a701e01df36b701bc13de130c4e8d24', class: "hb-dropdown__menu", style: { zIndex: String(getNextZIndex()) } }, this.items.map(item => (h("div", { class: {
+        const triggerEvents = this.trigger === 'hover' ? { onMouseEnter: this.show, onMouseLeave: this.hide } : { onClick: this.toggle };
+        return (h("div", { key: '8855aa67978f0180ee22fa57d47d8a8530fcff59', class: "hb-dropdown", ...triggerEvents, onKeyDown: this.handleTriggerKeydown }, h("div", { key: 'f07514869b6c2fed33be57a882afbe3aad221f79', class: "hb-dropdown__trigger", role: "button", tabindex: this.disabled ? -1 : 0, "aria-haspopup": "menu", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '077a8fdd63295eaeadda3124764dd51090a7019d' })), this.shouldRender && (h("div", { key: 'f17eba6ead1c841fdc97db4fc88c62937e6b7344', class: {
+                'hb-dropdown__menu': true,
+                'hb-dropdown__menu--leaving': this.leaving,
+            }, style: { zIndex: String(getNextZIndex()) }, role: "menu", onKeyDown: this.handleMenuKeydown }, this.items.map((item, index) => (h("div", { class: {
                 'hb-dropdown__item': true,
                 'hb-dropdown__item--disabled': item.disabled,
                 'hb-dropdown__item--divided': item.divided,
                 'hb-dropdown__item--danger': item.danger,
+                'hb-dropdown__item--active': index === this.activeIndex,
+            }, role: "menuitem", tabindex: -1, "aria-disabled": item.disabled ? 'true' : undefined, onMouseEnter: () => {
+                if (!item.disabled)
+                    this.activeIndex = index;
             }, onClick: () => this.handleSelect(item) }, item.label)))))));
     }
     static get style() { return HbDropdownStyle0; }
@@ -75,7 +155,9 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
         "items": [16],
         "trigger": [1],
         "disabled": [4],
-        "isOpen": [32]
+        "isOpen": [32],
+        "leaving": [32],
+        "activeIndex": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {