huibo-ui 0.4.0 → 0.6.0

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: 'e85f1040fdaacbf6e5d329f5561cdae25b2d4bc7', class: { 'hb-drawer-wrapper': true, 'hb-drawer-wrapper--visible': this.modelValue } }, this.modal && h("div", { key: '274cc165c21ea6490ca8f08be672b0605abc5d64', class: "hb-drawer__overlay", style: { zIndex: String(this.zIndexState) }, onClick: () => this.closeOnClickModal && this.close() }), h("div", { key: '8be6526f044035cfa31aebc66c5d459dbb2102af', 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: '826172fbe94e295fa146ef451455307fc97c7925', class: "hb-drawer__header" }, h("span", { key: 'a9fc420dea4707d6bd9ae38752c1ef08892ee44b', class: "hb-drawer__title" }, this.title), this.showClose && h("button", { key: 'b10452826b00e8fddc37a895af118c88b6c90ea4', type: "button", class: "hb-drawer__close", "aria-label": "\u5173\u95ED", onClick: this.close }, "\u00D7")), h("div", { key: 'f251c9c87ec21647c9bbc5363c6818b7fba4f7b5', class: "hb-drawer__body" }, h("slot", { key: '48e06fdeac538ec34aded9216c4a6ea98bd262ca' })))));
+        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":";;;;AAAA,MAAM,SAAS,GAAG,81RAA81R,CAAC;AACj3R,uBAAe,SAAS;;MCIX,MAAM;;;;;;;;IACQ,UAAU,GAAY,KAAK,CAAC;IAC7C,KAAK,GAAW,EAAE,CAAC;IACnB,IAAI,GAAW,KAAK,CAAC;IACrB,SAAS,GAAkC,KAAK,CAAC;IACjD,iBAAiB,GAAY,IAAI,CAAC;IAClC,SAAS,GAAY,IAAI,CAAC;IAC1B,KAAK,GAAY,IAAI,CAAC;;IAEtB,kBAAkB,GAAY,IAAI,CAAC;IAC1B,WAAW,GAAW,CAAC,CAAC;IACjC,MAAM,GAAW,CAAC,CAAC;IACnB,QAAQ,CAAe;IACvB,IAAI,CAAa;;IAER,OAAO,GAAY,KAAK,CAAC;IAClC,UAAU,CAAiC;IAE1C,MAAM,CAAqB;IAC3B,OAAO,CAAqB;IAGrC,aAAa,CAAC,GAAY;QACxB,IAAI,GAAG,EAAE;YACP,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBAC9B,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;aAC7B;YACD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,MAAM,GAAG,aAAa,EAAE,CAAC;YAC9B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;YAC/B,IAAI,IAAI,CAAC,KAAK;gBAAE,UAAU,EAAE,CAAC;YAC7B,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACnB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;SAC1D;aAAM;YACL,IAAI,IAAI,CAAC,KAAK;gBAAE,YAAY,EAAE,CAAC;YAC/B,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YACpB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;;YAE5D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,IAAI,CAAC,UAAU;gBAAE,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACnD,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;gBAC3B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;aACtB,EAAE,GAAG,CAAC,CAAC;SACT;KACF;IAED,kBAAkB;QAChB,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC3B,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;gBACd,IAAI,CAAC,IAAI,GAAG,eAAe,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;aAC3D;YACD,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;SACrB;aAAM;YACL,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC;SACzB;KACF;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK;YAAE,YAAY,EAAE,CAAC;QAClD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC5D,IAAI,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,UAAU;YAAE,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACpD;IAEO,aAAa,GAAG,CAAC,CAAgB;QACvC,IAAI,IAAI,CAAC,kBAAkB,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;YACjD,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;KACF,CAAC;IAEM,KAAK,GAAG;QACd,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KACzB,CAAC;IAEF,IAAY,YAAY;QACtB,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,OAAO,CAAC;KACxC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC;QAC3B,MAAM,UAAU,GAAG,GAAG,KAAK,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;QAClD,MAAM,SAAS,GAAG,UAAU,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;QAC5E,MAAM,cAAc,GAAG,cAAc,GAAG,EAAE,CAAC;QAE3C,QACE,4DAAK,KAAK,EAAE,EAAE,mBAAmB,EAAE,IAAI,EAAE,4BAA4B,EAAE,IAAI,CAAC,YAAY,EAAE,IACvF,IAAI,CAAC,KAAK,KACT,4DACE,KAAK,EAAE;gBACL,oBAAoB,EAAE,IAAI;gBAC1B,6BAA6B,EAAE,IAAI,CAAC,OAAO;aAC5C,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,EAC3C,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,KAAK,EAAE,GACrD,CACH,EACD,4DACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAiB,CAAC,EAC9C,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,CAAC,cAAc,GAAG,IAAI;gBACtB,oBAAoB,EAAE,IAAI,CAAC,UAAU;gBACrC,oBAAoB,EAAE,IAAI,CAAC,OAAO;aACnC,EACD,KAAK,EAAE,EAAE,GAAG,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,EAAE,EAC7D,IAAI,EAAC,QAAQ,gBACF,MAAM,gBACL,IAAI,CAAC,KAAK,IAAI,SAAS,iBACtB,IAAI,CAAC,UAAU,GAAG,OAAO,GAAG,MAAM,IAE/C,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,6DAAM,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACjD,IAAI,CAAC,SAAS,KACb,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,kBAAkB,gBAAY,cAAI,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,IAChF,4DAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAe,CAAC,oBAAiB,OAAO,qBAAiB,OAAO,iBAAa,MAAM,IAC3I,6DAAM,CAAC,EAAC,sBAAsB,GAAG,CAC7B,CACC,CACV,CACG,EACN,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,8DAAQ,CACJ,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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,9 +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-cc0aeb50.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--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)}}@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 {
@@ -21,44 +22,54 @@ 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.close(); },
+            onClose: () => {
+                this.close();
+            },
         });
-        // click 触发才需要外部点击关闭；hover 触发由 mouseenter/leave 控制
         if (this.trigger === 'click') {
             this.clickOutside.connect();
         }
     }
     disconnectedCallback() {
         this.clickOutside.disconnect();
+        this.leave.dispose();
     }
     open = () => {
         if (this.disabled)
             return;
+        this.leave.cancel(); // 中途又打开：取消挂起的离场
         this.isOpen = true;
-        // 打开时默认高亮首个可选（非禁用）项，便于 Enter 直接选
         this.activeIndex = this.items.findIndex(i => !i.disabled);
     };
     close = () => {
+        if (!this.isOpen && !this.leaving)
+            return;
         this.isOpen = false;
         this.activeIndex = -1;
+        this.leave.start();
     };
     show = () => {
         if (this.disabled)
             return;
-        this.isOpen = true;
+        this.open();
     };
     hide = () => {
         this.close();
@@ -77,18 +88,16 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
         this.close();
         this.hbCommand.emit(item.key);
     };
-    /** 触发器键盘：Enter/Space/↓ 打开 */
     handleTriggerKeydown = (e) => {
         if (this.disabled)
             return;
         if (this.trigger === 'hover')
-            return; // hover 触发不需要键盘打开（focus 会展开见下）
+            return;
         if (isActivationKey(e.key) || e.key === 'ArrowDown') {
             e.preventDefault();
             this.open();
         }
     };
-    /** 菜单键盘：↑↓ 导航、Enter/Space 选中、Esc 关闭、Home/End 跳首尾 */
     handleMenuKeydown = (e) => {
         const enabledCount = this.items.length;
         const action = handleListKeyboard(e, {
@@ -99,7 +108,6 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
         switch (action.type) {
             case 'navigate':
                 e.preventDefault();
-                // 跳过禁用项：最多扫一圈
                 {
                     let idx = action.index;
                     for (let i = 0; i < enabledCount; i++) {
@@ -123,11 +131,15 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
                 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: '59f46f0179081fb6c094e21e1f0cd8008ce5e71d', class: "hb-dropdown", ...triggerEvents, onKeyDown: this.handleTriggerKeydown }, h("div", { key: '346a5bfca387e19aa85d420516c542d0c0a01b50', 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: '260f2627159a9bcbcaa374b1c6e8a473ed76e876' })), this.isOpen && (h("div", { key: '478f230e909c1ad13dc32dabcd1d2b543bde0c6c', class: "hb-dropdown__menu", style: { zIndex: String(getNextZIndex()) }, role: "menu", onKeyDown: this.handleMenuKeydown }, this.items.map((item, index) => (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,
@@ -144,6 +156,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends H {
         "trigger": [1],
         "disabled": [4],
         "isOpen": [32],
+        "leaving": [32],
         "activeIndex": [32]
     }]);
 function defineCustomElement$1() {

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

@@ -1 +1 @@
-{"file":"hb-dropdown.js","mappings":"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","names":[],"sources":["src/components/Dropdown/dropdown.css?tag=hb-dropdown&encapsulation=shadow","src/components/Dropdown/Dropdown.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n}\n\n.hb-dropdown__trigger {\n  display: inline-block;\n  cursor: pointer;\n}\n\n.hb-dropdown__menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  min-width: 120px;\n  margin-top: 4px;\n  padding: 4px 0;\n  background-color: var(--hb-color-bg-elevated);\n  border-radius: var(--hb-border-radius-base);\n  box-shadow: var(--hb-box-shadow);\n  animation: hb-dropdown-fade-in 0.15s ease-out;\n}\n\n.hb-dropdown__item {\n  display: flex;\n  align-items: center;\n  padding: 6px 16px;\n  font-size: var(--hb-font-size-sm);\n  color: var(--hb-color-text);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: background-color var(--hb-transition-duration);\n}\n\n.hb-dropdown__item:hover:not(.hb-dropdown__item--disabled),\n.hb-dropdown__item--active:not(.hb-dropdown__item--disabled) {\n  background-color: var(--hb-color-fill-tertiary);\n  color: var(--hb-color-primary);\n}\n\n.hb-dropdown__item--disabled {\n  color: var(--hb-color-text-disabled);\n  cursor: not-allowed;\n}\n\n.hb-dropdown__item--divided {\n  margin-top: 4px;\n  padding-top: 8px;\n  border-top: 1px solid var(--hb-color-border-secondary);\n}\n\n.hb-dropdown__item--danger {\n  color: var(--hb-color-danger);\n}\n.hb-dropdown__item--danger:hover:not(.hb-dropdown__item--disabled) {\n  background-color: var(--hb-color-danger-bg);\n  color: var(--hb-color-danger);\n}\n\n@keyframes hb-dropdown-fade-in {\n  from { opacity: 0; transform: translateY(-4px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n","import { Component, h, Prop, State, Element, Event, EventEmitter } from '@stencil/core';\nimport { createClickOutsideHandler } from '../../utils/click-outside';\nimport { getNextZIndex } from '../../utils/popup-manager';\nimport { handleListKeyboard, isActivationKey } from '../../utils/a11y';\n\nexport interface DropdownItem {\n  key: string;\n  label: string;\n  disabled?: boolean;\n  divided?: boolean;\n  danger?: boolean;\n}\n\n/**\n * Dropdown 下拉菜单组件\n * 将动作或菜单折叠到下拉菜单中。\n *\n * 无障碍（对齐 WAI-ARIA menu / antd）：\n * - 触发器 role=button + aria-haspopup=menu + aria-expanded\n * - 菜单 role=menu，菜单项 role=menuitem + aria-disabled\n * - 键盘：trigger 上 Enter/Space/↓ 打开；菜单内 ↑↓ 导航、Enter/Space 选中、Esc 关闭\n */\n@Component({\n  tag: 'hb-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown {\n  @Element() el: HTMLElement;\n\n  /** 菜单项 */\n  @Prop() items: DropdownItem[] = [];\n\n  /** 触发方式 */\n  @Prop() trigger: 'hover' | 'click' = 'hover';\n\n  /** 是否禁用 */\n  @Prop() disabled: boolean = false;\n\n  @State() isOpen: boolean = false;\n  /** 键盘高亮项索引（-1 表示无） */\n  @State() activeIndex: number = -1;\n\n  /** 命令事件 */\n  @Event() hbCommand: EventEmitter<string>;\n\n  private clickOutside = createClickOutsideHandler({\n    host: null as any,\n    isOpen: () => this.isOpen,\n    onClose: () => { this.isOpen = false; },\n  });\n\n  componentDidLoad() {\n    this.clickOutside = createClickOutsideHandler({\n      host: this.el,\n      isOpen: () => this.isOpen,\n      onClose: () => { this.close(); },\n    });\n    // click 触发才需要外部点击关闭；hover 触发由 mouseenter/leave 控制\n    if (this.trigger === 'click') {\n      this.clickOutside.connect();\n    }\n  }\n\n  disconnectedCallback() {\n    this.clickOutside.disconnect();\n  }\n\n  private open = () => {\n    if (this.disabled) return;\n    this.isOpen = true;\n    // 打开时默认高亮首个可选（非禁用）项，便于 Enter 直接选\n    this.activeIndex = this.items.findIndex(i => !i.disabled);\n  };\n\n  private close = () => {\n    this.isOpen = false;\n    this.activeIndex = -1;\n  };\n\n  private show = () => {\n    if (this.disabled) return;\n    this.isOpen = true;\n  };\n\n  private hide = () => {\n    this.close();\n  };\n\n  private toggle = () => {\n    if (this.disabled) return;\n    if (this.isOpen) this.close();\n    else this.open();\n  };\n\n  private handleSelect = (item: DropdownItem) => {\n    if (item.disabled) return;\n    this.close();\n    this.hbCommand.emit(item.key);\n  };\n\n  /** 触发器键盘：Enter/Space/↓ 打开 */\n  private handleTriggerKeydown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (this.trigger === 'hover') return; // hover 触发不需要键盘打开（focus 会展开见下）\n    if (isActivationKey(e.key) || e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.open();\n    }\n  };\n\n  /** 菜单键盘：↑↓ 导航、Enter/Space 选中、Esc 关闭、Home/End 跳首尾 */\n  private handleMenuKeydown = (e: KeyboardEvent) => {\n    const enabledCount = this.items.length;\n    const action = handleListKeyboard(e, {\n      activeIndex: this.activeIndex,\n      itemCount: enabledCount,\n      loop: true,\n    });\n    switch (action.type) {\n      case 'navigate':\n        e.preventDefault();\n        // 跳过禁用项：最多扫一圈\n        {\n          let idx = action.index;\n          for (let i = 0; i < enabledCount; i++) {\n            if (!this.items[idx]?.disabled) break;\n            idx = (idx + 1) % enabledCount;\n          }\n          this.activeIndex = idx;\n        }\n        break;\n      case 'select': {\n        e.preventDefault();\n        const item = this.items[action.index];\n        if (item && !item.disabled) this.handleSelect(item);\n        break;\n      }\n      case 'close':\n        e.preventDefault();\n        this.close();\n        break;\n      default:\n        break;\n    }\n  };\n\n  render() {\n    const triggerEvents = this.trigger === 'hover'\n      ? { onMouseEnter: this.show, onMouseLeave: this.hide }\n      : { onClick: this.toggle };\n\n    return (\n      <div\n        class=\"hb-dropdown\"\n        {...triggerEvents}\n        onKeyDown={this.handleTriggerKeydown}\n      >\n        <div\n          class=\"hb-dropdown__trigger\"\n          role=\"button\"\n          tabindex={this.disabled ? -1 : 0}\n          aria-haspopup=\"menu\"\n          aria-expanded={this.isOpen ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n        >\n          <slot />\n        </div>\n        {this.isOpen && (\n          <div\n            class=\"hb-dropdown__menu\"\n            style={{ zIndex: String(getNextZIndex()) }}\n            role=\"menu\"\n            onKeyDown={this.handleMenuKeydown}\n          >\n            {this.items.map((item, index) => (\n              <div\n                class={{\n                  'hb-dropdown__item': true,\n                  'hb-dropdown__item--disabled': item.disabled,\n                  'hb-dropdown__item--divided': item.divided,\n                  'hb-dropdown__item--danger': item.danger,\n                  'hb-dropdown__item--active': index === this.activeIndex,\n                }}\n                role=\"menuitem\"\n                tabindex={-1}\n                aria-disabled={item.disabled ? 'true' : undefined}\n                onMouseEnter={() => { if (!item.disabled) this.activeIndex = index; }}\n                onClick={() => this.handleSelect(item)}\n              >\n                {item.label}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"hb-dropdown.js","mappings":"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","names":[],"sources":["src/components/Dropdown/dropdown.css?tag=hb-dropdown&encapsulation=shadow","src/components/Dropdown/Dropdown.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n}\n\n.hb-dropdown__trigger {\n  display: inline-block;\n  cursor: pointer;\n}\n\n.hb-dropdown__menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  min-width: 120px;\n  margin-top: 4px;\n  padding: 4px 0;\n  background-color: var(--hb-color-bg-elevated);\n  border-radius: var(--hb-border-radius-base);\n  box-shadow: var(--hb-box-shadow);\n  animation: hb-dropdown-fade-in 0.15s ease-out;\n}\n\n.hb-dropdown__item {\n  display: flex;\n  align-items: center;\n  padding: 6px 16px;\n  font-size: var(--hb-font-size-sm);\n  color: var(--hb-color-text);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: background-color var(--hb-transition-duration);\n}\n\n.hb-dropdown__item:hover:not(.hb-dropdown__item--disabled),\n.hb-dropdown__item--active:not(.hb-dropdown__item--disabled) {\n  background-color: var(--hb-color-fill-tertiary);\n  color: var(--hb-color-primary);\n}\n\n.hb-dropdown__item--disabled {\n  color: var(--hb-color-text-disabled);\n  cursor: not-allowed;\n}\n\n.hb-dropdown__item--divided {\n  margin-top: 4px;\n  padding-top: 8px;\n  border-top: 1px solid var(--hb-color-border-secondary);\n}\n\n.hb-dropdown__item--danger {\n  color: var(--hb-color-danger);\n}\n.hb-dropdown__item--danger:hover:not(.hb-dropdown__item--disabled) {\n  background-color: var(--hb-color-danger-bg);\n  color: var(--hb-color-danger);\n}\n\n@keyframes hb-dropdown-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* 离场动画 */\n.hb-dropdown__menu--leaving {\n  animation: hb-dropdown-fade-out 0.15s ease-in forwards;\n}\n\n@keyframes hb-dropdown-fade-out {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n","import { Component, h, Prop, State, Element, Event, EventEmitter } from '@stencil/core';\nimport { createClickOutsideHandler } from '../../utils/click-outside';\nimport { getNextZIndex } from '../../utils/popup-manager';\nimport { handleListKeyboard, isActivationKey } from '../../utils/a11y';\nimport { createLeaveScheduler } from '../../utils/transition';\n\nexport interface DropdownItem {\n  key: string;\n  label: string;\n  disabled?: boolean;\n  divided?: boolean;\n  danger?: boolean;\n}\n\n/**\n * Dropdown 下拉菜单组件\n * 将动作或菜单折叠到下拉菜单中。\n *\n * 无障碍（对齐 WAI-ARIA menu / antd）：\n * - 触发器 role=button + aria-haspopup=menu + aria-expanded\n * - 菜单 role=menu，菜单项 role=menuitem + aria-disabled\n * - 键盘：trigger 上 Enter/Space/↓ 打开；菜单内 ↑↓ 导航、Enter/Space 选中、Esc 关闭\n *\n * 进出场动画：用 leaving state 延迟卸载，让 fade-out 有机会播放。\n */\n@Component({\n  tag: 'hb-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown {\n  @Element() el: HTMLElement;\n\n  /** 菜单项 */\n  @Prop() items: DropdownItem[] = [];\n\n  /** 触发方式 */\n  @Prop() trigger: 'hover' | 'click' = 'hover';\n\n  /** 是否禁用 */\n  @Prop() disabled: boolean = false;\n\n  @State() isOpen: boolean = false;\n  /** 离场动画期（保留 DOM 让 fade-out 播完） */\n  @State() leaving: boolean = false;\n  /** 键盘高亮项索引（-1 表示无） */\n  @State() activeIndex: number = -1;\n\n  /** 命令事件 */\n  @Event() hbCommand: EventEmitter<string>;\n\n  private leave = createLeaveScheduler(\n    () => this.leaving,\n    v => (this.leaving = v),\n    150,\n  );\n\n  private clickOutside = createClickOutsideHandler({\n    host: null as any,\n    isOpen: () => this.isOpen,\n    onClose: () => {\n      this.close();\n    },\n  });\n\n  componentDidLoad() {\n    this.clickOutside = createClickOutsideHandler({\n      host: this.el,\n      isOpen: () => this.isOpen,\n      onClose: () => {\n        this.close();\n      },\n    });\n    if (this.trigger === 'click') {\n      this.clickOutside.connect();\n    }\n  }\n\n  disconnectedCallback() {\n    this.clickOutside.disconnect();\n    this.leave.dispose();\n  }\n\n  private open = () => {\n    if (this.disabled) return;\n    this.leave.cancel(); // 中途又打开：取消挂起的离场\n    this.isOpen = true;\n    this.activeIndex = this.items.findIndex(i => !i.disabled);\n  };\n\n  private close = () => {\n    if (!this.isOpen && !this.leaving) return;\n    this.isOpen = false;\n    this.activeIndex = -1;\n    this.leave.start();\n  };\n\n  private show = () => {\n    if (this.disabled) return;\n    this.open();\n  };\n\n  private hide = () => {\n    this.close();\n  };\n\n  private toggle = () => {\n    if (this.disabled) return;\n    if (this.isOpen) this.close();\n    else this.open();\n  };\n\n  private handleSelect = (item: DropdownItem) => {\n    if (item.disabled) return;\n    this.close();\n    this.hbCommand.emit(item.key);\n  };\n\n  private handleTriggerKeydown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (this.trigger === 'hover') return;\n    if (isActivationKey(e.key) || e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.open();\n    }\n  };\n\n  private handleMenuKeydown = (e: KeyboardEvent) => {\n    const enabledCount = this.items.length;\n    const action = handleListKeyboard(e, {\n      activeIndex: this.activeIndex,\n      itemCount: enabledCount,\n      loop: true,\n    });\n    switch (action.type) {\n      case 'navigate':\n        e.preventDefault();\n        {\n          let idx = action.index;\n          for (let i = 0; i < enabledCount; i++) {\n            if (!this.items[idx]?.disabled) break;\n            idx = (idx + 1) % enabledCount;\n          }\n          this.activeIndex = idx;\n        }\n        break;\n      case 'select': {\n        e.preventDefault();\n        const item = this.items[action.index];\n        if (item && !item.disabled) this.handleSelect(item);\n        break;\n      }\n      case 'close':\n        e.preventDefault();\n        this.close();\n        break;\n      default:\n        break;\n    }\n  };\n\n  private get shouldRender(): boolean {\n    return this.isOpen || this.leaving;\n  }\n\n  render() {\n    const triggerEvents = this.trigger === 'hover' ? { onMouseEnter: this.show, onMouseLeave: this.hide } : { onClick: this.toggle };\n\n    return (\n      <div class=\"hb-dropdown\" {...triggerEvents} onKeyDown={this.handleTriggerKeydown}>\n        <div\n          class=\"hb-dropdown__trigger\"\n          role=\"button\"\n          tabindex={this.disabled ? -1 : 0}\n          aria-haspopup=\"menu\"\n          aria-expanded={this.isOpen ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n        >\n          <slot />\n        </div>\n        {this.shouldRender && (\n          <div\n            class={{\n              'hb-dropdown__menu': true,\n              'hb-dropdown__menu--leaving': this.leaving,\n            }}\n            style={{ zIndex: String(getNextZIndex()) }}\n            role=\"menu\"\n            onKeyDown={this.handleMenuKeydown}\n          >\n            {this.items.map((item, index) => (\n              <div\n                class={{\n                  'hb-dropdown__item': true,\n                  'hb-dropdown__item--disabled': item.disabled,\n                  'hb-dropdown__item--divided': item.divided,\n                  'hb-dropdown__item--danger': item.danger,\n                  'hb-dropdown__item--active': index === this.activeIndex,\n                }}\n                role=\"menuitem\"\n                tabindex={-1}\n                aria-disabled={item.disabled ? 'true' : undefined}\n                onMouseEnter={() => {\n                  if (!item.disabled) this.activeIndex = index;\n                }}\n                onClick={() => this.handleSelect(item)}\n              >\n                {item.label}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/hb-empty.js

@@ -12,7 +12,7 @@ const Empty = /*@__PURE__*/ proxyCustomElement(class Empty extends H {
     description = '暂无数据';
     image;
     render() {
-        return (h("div", { key: 'c5d0bd8a84173bfd5dfa42255288ea2a712c5d7d', class: "hb-empty" }, h("div", { key: '286d98932465bb79a74a3db494fee2cbd89e06fc', class: "hb-empty__image" }, this.image ? h("img", { src: this.image, alt: this.description }) : h("span", { class: "hb-empty__icon" }, "\uD83D\uDCED")), h("div", { key: 'f8c1af87ab0308ebd0703aaaaffd5c3af3317235', class: "hb-empty__description" }, this.description), h("div", { key: '3bbed3cb38933b0ed47ff34409b7f18c7a14044a', class: "hb-empty__footer" }, h("slot", { key: '2ffb28e71fe2558c601597265e55bca599617997' }))));
+        return (h("div", { key: '716385f61e4692d30d9ef0dab2671b4ee4a8381a', class: "hb-empty" }, h("div", { key: '39162ccfefa991ae63a59f585e7a91179b64523a', class: "hb-empty__image" }, this.image ? h("img", { src: this.image, alt: this.description }) : h("span", { class: "hb-empty__icon" }, "\uD83D\uDCED")), h("div", { key: '2ada1cc904ba094aaaf863d82ead88b81576590e', class: "hb-empty__description" }, this.description), h("div", { key: 'cb573d62ea4d81a66815a27be96617e0a3c3e470', class: "hb-empty__footer" }, h("slot", { key: '424ec328528ea66240ae4216e178bfc7f5ba2acd' }))));
     }
     static get style() { return HbEmptyStyle0; }
 }, [1, "hb-empty", {

package/dist/components/hb-float-button.js

@@ -41,11 +41,11 @@ const FloatButton = /*@__PURE__*/ proxyCustomElement(class FloatButton extends H
             right: `${this.right}px`,
             bottom: `${this.bottom}px`,
         };
-        return (h("button", { key: '40601144541971a0bedf09c9228ab0de219620e8', type: "button", class: {
+        return (h("button", { key: '1c3836a10620e871fd54fdcacab8ed447329203f', type: "button", class: {
                 'hb-float-button': true,
                 [`hb-float-button--${this.type}`]: true,
                 [`hb-float-button--${this.shape}`]: true,
-            }, style: style, onClick: this.handleClick }, this.icon && h("span", { key: 'bcdf2cc93de5b5c56db5967dde89f499efa3c5a5', class: "hb-float-button__icon" }, this.icon), this.description && h("span", { key: 'cc735e9dbc892b6b054b10af00b8e3b0805aea26', class: "hb-float-button__description" }, this.description), this.renderBadge()));
+            }, style: style, onClick: this.handleClick }, this.icon && h("span", { key: 'f0eaa8a4e40805f1442a55ec6830e2ed7aa54299', class: "hb-float-button__icon" }, this.icon), this.description && h("span", { key: '8f276ce89d0ace7f26ad65bb0d41dc0a4e262a45', class: "hb-float-button__description" }, this.description), this.renderBadge()));
     }
     static get style() { return HbFloatButtonStyle0; }
 }, [1, "hb-float-button", {

package/dist/components/hb-form-item.js

@@ -22,6 +22,18 @@ const FormItem = /*@__PURE__*/ proxyCustomElement(class FormItem extends H {
     rules = [];
     /** 表单尺寸 */
     size = 'default';
+    /**
+     * F6：手动校验态（'success' | 'warning' | 'error' | 'validating' | ''）。
+     * 设置后覆盖内部校验结果驱动的错误显示（对齐 antd validateStatus）。
+     */
+    validateStatus;
+    /** F6：手动错误/帮助文案（配合 validateStatus='error' 显示自定义提示） */
+    help;
+    /**
+     * F7：标签栅格占比（1-24）。未设置时用 labelWidth。
+     * 对齐 antd labelCol（简化为纯数字栅格，labelCol.span）。
+     */
+    labelCol;
     errors = [];
     isvalidating = false;
     /** hb-form 在 componentWillLoad 注册的事件监听；FormItem 在 componentDidLoad 派发，
@@ -68,6 +80,24 @@ const FormItem = /*@__PURE__*/ proxyCustomElement(class FormItem extends H {
         const form = this.el.closest('hb-form');
         return (form && form.labelPosition) || 'right';
     }
+    /**
+     * F4：继承父 hb-form 的 validateMessages（校验提示模板）。
+     * 支持占位符 {label}。仅对 rule 未显式指定 message 的规则生效。
+     */
+    get resolvedValidateMessages() {
+        const form = this.el.closest('hb-form');
+        return form && form.validateMessages;
+    }
+    /** 用模板生成错误文案（{label} 替换为字段标签），优先级：rule.message > 模板 > 内置默认 */
+    msg(rule, key, fallback) {
+        if (rule.message)
+            return rule.message;
+        const tmpl = this.resolvedValidateMessages;
+        const label = this.label || this.prop;
+        if (tmpl && tmpl[key])
+            return tmpl[key].replace('{label}', label);
+        return fallback.replace('{label}', label);
+    }
     /**
      * 验证此字段
      */
@@ -82,38 +112,33 @@ const FormItem = /*@__PURE__*/ proxyCustomElement(class FormItem extends H {
         const errors = [];
         for (const rule of rules) {
             // 必填校验：空字符串 / null / undefined / 空数组均视为"未填"
-            const isEmpty = value === undefined ||
-                value === null ||
-                value === '' ||
-                (Array.isArray(value) && value.length === 0);
+            const isEmpty = value === undefined || value === null || value === '' || (Array.isArray(value) && value.length === 0);
             if (rule.required && isEmpty) {
-                errors.push(rule.message || `${this.label || this.prop}不能为空`);
+                errors.push(this.msg(rule, 'required', `${this.label || this.prop}不能为空`));
                 continue;
             }
             // 非必填且为空时，跳过后续格式校验（与 antd 行为一致）
             if (isEmpty)
                 continue;
             if (rule.pattern) {
-                const ok = typeof rule.pattern === 'string'
-                    ? new RegExp(rule.pattern).test(String(value))
-                    : rule.pattern.test(String(value));
+                const ok = typeof rule.pattern === 'string' ? new RegExp(rule.pattern).test(String(value)) : rule.pattern.test(String(value));
                 if (!ok) {
-                    errors.push(rule.message || `${this.label || this.prop}格式不正确`);
+                    errors.push(this.msg(rule, 'pattern', `${this.label || this.prop}格式不正确`));
                     continue;
                 }
             }
             if (rule.type === 'email') {
                 if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(value))) {
-                    errors.push(rule.message || `${this.label || this.prop}格式不正确`);
+                    errors.push(this.msg(rule, 'email', `${this.label || this.prop}格式不正确`));
                     continue;
                 }
             }
             if (rule.min !== undefined && typeof value === 'string' && value.length < rule.min) {
-                errors.push(rule.message || `${this.label || this.prop}最少${rule.min}个字符`);
+                errors.push(this.msg(rule, 'min', `${this.label || this.prop}最少${rule.min}个字符`));
                 continue;
             }
             if (rule.max !== undefined && typeof value === 'string' && value.length > rule.max) {
-                errors.push(rule.message || `${this.label || this.prop}最多${rule.max}个字符`);
+                errors.push(this.msg(rule, 'max', `${this.label || this.prop}最多${rule.max}个字符`));
                 continue;
             }
             if (rule.validator) {
@@ -142,16 +167,42 @@ const FormItem = /*@__PURE__*/ proxyCustomElement(class FormItem extends H {
         }
         return undefined;
     };
+    /** F6：实际显示的错误文案。手动 help 优先；否则取内部 errors[0] */
+    get displayError() {
+        if (this.help !== undefined)
+            return this.help;
+        return this.errors[0] || '';
+    }
+    /** F6：实际是否显示错误（手动 validateStatus='error' 或内部有错） */
+    get showError() {
+        if (this.validateStatus === 'error')
+            return true;
+        if (this.validateStatus === 'success' || this.validateStatus === 'validating')
+            return false;
+        return this.errors.length > 0;
+    }
     render() {
         const labelTop = this.resolvedLabelPosition === 'top';
-        return (h("div", { key: '5819f09264a5823f5130f1ce3ff34915da8c7e41', class: {
+        const hasError = this.showError;
+        // A4：label 与内容关联。子控件是 slot（id 未知），无法用 label.for；
+        // 改用 content 容器 role=group + aria-labelledby 指向 label id，
+        // 把 label 语义绑到整组；并用 aria-required / aria-invalid 暴露必填与校验态（读屏可感知，
+        // 不再仅靠红色 + 隐藏星号）。
+        const labelId = this.label ? `hb-form-item__label-${this.prop || 'x'}` : undefined;
+        // F7：labelCol 栅格占比（1-24），未设置时回退 labelWidth
+        const labelStyle = this.labelCol
+            ? { width: `${(this.labelCol / 24) * 100}%` }
+            : this.labelWidth
+                ? { width: this.labelWidth }
+                : undefined;
+        return (h("div", { key: '8c6bd451a2c673a66d3a98b08fdf30ac74f2fb2e', class: {
                 'hb-form-item': true,
-                'hb-form-item--error': this.errors.length > 0,
-                'hb-form-item--validating': this.isvalidating,
+                'hb-form-item--error': hasError,
+                'hb-form-item--validating': this.isvalidating || this.validateStatus === 'validating',
                 'hb-form-item--required': this.isRequired,
                 'hb-form-item--label-top': labelTop,
                 'hb-form-item--label-left': this.resolvedLabelPosition === 'left',
-            } }, this.label && (h("label", { key: '0a1881ea32b5a7a403e9fdfbcc886bdbc682abfa', class: "hb-form-item__label", style: this.labelWidth ? { width: this.labelWidth } : undefined, title: this.label }, this.isRequired && (h("span", { key: '46543df749b05021d867904d968dc60bf062ee41', class: "hb-form-item__required", "aria-hidden": "true" }, "*")), this.label)), h("div", { key: '5ce3712dc8ebcb70cb3688a4546f0dd1ee3e5cd4', class: "hb-form-item__content" }, h("slot", { key: '26e5c4a39560aca1796545b2f3679b042ef7d771' }), this.errors.length > 0 && (h("div", { key: '79e79d4bc52fe02c0735333cfbbb9b912a206c77', class: "hb-form-item__error", role: "alert" }, this.errors[0])))));
+            } }, this.label && (h("label", { key: '98db5eae626555e4ae442b116bff048189209b5d', id: labelId, class: "hb-form-item__label", style: labelStyle, title: this.label }, this.isRequired && (h("span", { key: '05f771e79623e3eeac28fb8b3d100501c5c94f6b', class: "hb-form-item__required", "aria-hidden": "true" }, "*")), this.label)), h("div", { key: '3dc24c2eb1f33ed16f14cca93a644ece209d6c13', class: "hb-form-item__content", role: "group", "aria-labelledby": labelId, "aria-required": this.isRequired ? 'true' : undefined, "aria-invalid": hasError ? 'true' : undefined }, h("slot", { key: '3a143de305f27a70c5e775a0c24c16da77f7fe3a' }), hasError && (h("div", { key: '9d5708648cb0ec43b9c8a274145221ec0edec86e', class: "hb-form-item__error", role: "alert" }, this.displayError)))));
     }
     static get style() { return HbFormItemStyle0; }
 }, [1, "hb-form-item", {
@@ -161,6 +212,9 @@ const FormItem = /*@__PURE__*/ proxyCustomElement(class FormItem extends H {
         "required": [4],
         "rules": [16],
         "size": [1],
+        "validateStatus": [1, "validate-status"],
+        "help": [1],
+        "labelCol": [2, "label-col"],
         "validate": [16],
         "resetValue": [16],
         "getValue": [16],