huibo-ui 0.3.0

package/dist/esm/hb-timeline.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-timeline.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,gqPAAgqP,CAAC;AACrrP,yBAAe,WAAW;;MCMb,QAAQ;;;;;IAEX,IAAI,GAAmC,MAAM,CAAC;;IAG9C,KAAK,GAAmB,EAAE,CAAC;IAEnC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,gBAAgB,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,EAAE,IACrE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MACtB,WACE,KAAK,EAAE;gBACL,mBAAmB,EAAE,IAAI;gBACzB,0BAA0B,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;gBACpE,yBAAyB,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;aACpE,IAED,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WAAK,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,OAAO,CAAO,EAC1D,IAAI,CAAC,IAAI,IAAI,WAAK,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,IAAI,CAAO,CAC1D,EACN,WAAK,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC,qBAAqB,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,GAAG,IAAI,EAAE,GAAQ,CACjG,CACP,CAAC,CACE,EACN;KACH;;;;;;","names":[],"sources":["src/components/Timeline/timeline.css?tag=hb-timeline&encapsulation=shadow","src/components/Timeline/Timeline.tsx"],"sourcesContent":[":host { display: block; }\n.hb-timeline { position: relative; padding: var(--hb-spacing-sm) 0; }\n\n/* 左右两侧共享的竖线（left/right 模式） */\n.hb-timeline--left { padding-left: 20px; }\n.hb-timeline--right { padding-right: 20px; }\n.hb-timeline--left::before,\n.hb-timeline--right::before {\n  content: '';\n  position: absolute;\n  top: var(--hb-spacing-sm);\n  bottom: var(--hb-spacing-sm);\n  width: 2px;\n  background: var(--hb-color-border-secondary);\n}\n.hb-timeline--left::before { left: 5px; }\n.hb-timeline--right::before { right: 5px; }\n\n/* 交替模式：竖线居中 */\n.hb-timeline--alternate::before {\n  content: '';\n  position: absolute;\n  top: var(--hb-spacing-sm);\n  bottom: var(--hb-spacing-sm);\n  left: 50%;\n  transform: translateX(-50%);\n  width: 2px;\n  background: var(--hb-color-border-secondary);\n}\n\n.hb-timeline__item {\n  position: relative;\n  padding-bottom: var(--hb-spacing-md);\n  display: flex;\n  align-items: flex-start;\n}\n/* left 模式：内容在右 */\n.hb-timeline--left .hb-timeline__item { padding-left: 18px; }\n.hb-timeline--left .hb-timeline__dot { position: absolute; left: -18px; top: 4px; }\n\n/* right 模式：内容在左 */\n.hb-timeline--right .hb-timeline__item { justify-content: flex-end; padding-right: 18px; }\n.hb-timeline--right .hb-timeline__dot { position: absolute; right: -18px; top: 4px; }\n\n/* alternate 模式：左右交替 */\n.hb-timeline--alternate .hb-timeline__item { width: 50%; }\n.hb-timeline--alternate .hb-timeline__item--left { left: 0; padding-right: 24px; text-align: right; }\n.hb-timeline--alternate .hb-timeline__item--right { margin-left: 50%; padding-left: 24px; }\n.hb-timeline--alternate .hb-timeline__dot {\n  position: absolute;\n  top: 4px;\n}\n.hb-timeline--alternate .hb-timeline__item--left .hb-timeline__dot { right: -7px; }\n.hb-timeline--alternate .hb-timeline__item--right .hb-timeline__dot { left: -7px; }\n\n.hb-timeline__content { min-width: 0; }\n.hb-timeline__content-text { font-size: var(--hb-font-size-sm); color: var(--hb-color-text); }\n.hb-timeline__time { font-size: var(--hb-font-size-xs); color: var(--hb-color-text-secondary); margin-top: 2px; }\n\n.hb-timeline__dot {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  border: 2px solid var(--hb-color-bg-container);\n  z-index: 1;\n}\n.hb-timeline__dot--blue { background: var(--hb-color-primary); }\n.hb-timeline__dot--green { background: var(--hb-color-success); }\n.hb-timeline__dot--red { background: var(--hb-color-danger); }\n.hb-timeline__dot--gray { background: var(--hb-color-text-quaternary); }\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Timeline 时间线组件\n * 按竖线渲染每个 item 的圆点 + 内容 + 时间，支持左/右/交替三种模式\n */\n@Component({ tag: 'hb-timeline', styleUrl: 'timeline.css', shadow: true })\nexport class Timeline {\n  /** 时间线模式 */\n  @Prop() mode: 'left' | 'alternate' | 'right' = 'left';\n\n  /** 时间线节点数组 */\n  @Prop() items: TimelineItem[] = [];\n\n  render() {\n    return (\n      <div class={{ 'hb-timeline': true, [`hb-timeline--${this.mode}`]: true }}>\n        {this.items.map((item, i) => (\n          <div\n            class={{\n              'hb-timeline__item': true,\n              'hb-timeline__item--right': this.mode === 'alternate' && i % 2 === 1,\n              'hb-timeline__item--left': this.mode === 'alternate' && i % 2 === 0,\n            }}\n          >\n            <div class=\"hb-timeline__content\">\n              <div class=\"hb-timeline__content-text\">{item.content}</div>\n              {item.time && <div class=\"hb-timeline__time\">{item.time}</div>}\n            </div>\n            <div class={{ 'hb-timeline__dot': true, [`hb-timeline__dot--${item.color || 'blue'}`]: true }}></div>\n          </div>\n        ))}\n      </div>\n    );\n  }\n}\n\nexport interface TimelineItem {\n  content: string;\n  time?: string;\n  color?: 'blue' | 'green' | 'red' | 'gray';\n}\n"],"version":3}

package/dist/esm/hb-tooltip.entry.js

@@ -0,0 +1,70 @@
+import { r as registerInstance, g as getElement, h } from './index-fdf7135e.js';
+import { c as computePosition, g as getNextZIndex } from './popup-manager-128cc685.js';
+
+const tooltipCss = "/*! 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}.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;.hb-tooltip__trigger,:host{display:inline-block}.hb-tooltip__popup{background-color:var(--hb-p-gray-800);border-radius:var(--hb-border-radius-sm);box-shadow:var(--hb-box-shadow);color:#fff;font-size:var(--hb-font-size-sm);pointer-events:auto;word-wrap:break-word;animation:hb-tooltip-fade-in .15s ease-out;line-height:1.4;max-width:300px;padding:6px 12px;position:fixed}.hb-tooltip__arrow{background-color:var(--hb-p-gray-800);height:8px;position:absolute;transform:rotate(45deg);width:8px}.hb-tooltip__content{position:relative;z-index:1}@keyframes hb-tooltip-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@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 HbTooltipStyle0 = tooltipCss;
+
+const Tooltip = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** 提示文字 */
+    content = '';
+    /** 弹出位置 */
+    placement = 'top';
+    /** 触发方式 */
+    trigger = 'hover';
+    /** 是否禁用 */
+    disabled = false;
+    /** 是否显示箭头 */
+    showArrow = true;
+    visible = false;
+    popupStyle = {};
+    triggerRef;
+    popupRef;
+    hideTimer;
+    show = () => {
+        if (this.disabled)
+            return;
+        clearTimeout(this.hideTimer);
+        this.visible = true;
+        requestAnimationFrame(() => this.updatePosition());
+    };
+    hide = () => {
+        this.hideTimer = setTimeout(() => { this.visible = false; }, 100);
+    };
+    toggle = () => {
+        if (this.disabled)
+            return;
+        if (this.visible) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    };
+    updatePosition() {
+        if (!this.triggerRef || !this.popupRef)
+            return;
+        const triggerRect = this.triggerRef.getBoundingClientRect();
+        const { width, height } = this.popupRef.getBoundingClientRect();
+        const pos = computePosition(triggerRect, width, height, this.placement, 8);
+        this.popupStyle = {
+            top: `${pos.top}px`,
+            left: `${pos.left}px`,
+            zIndex: String(getNextZIndex()),
+        };
+    }
+    render() {
+        const triggerEvents = this.trigger === 'hover'
+            ? { onMouseEnter: this.show, onMouseLeave: this.hide }
+            : { onClick: this.toggle };
+        return (h("div", { key: 'e98d79b104fc92f63d77cbd87c490d84e0646c64', class: "hb-tooltip", ...triggerEvents }, h("div", { key: '74088a95833070259d447d57e03a894f20d0e044', ref: (el) => { this.triggerRef = el; }, class: "hb-tooltip__trigger" }, h("slot", { key: 'ce84437a1fedd763630764a5627763a4601d195e' })), this.visible && (h("div", { key: '1b5b74c439a5925c3cf10fc552369bd83354fcf4', ref: (el) => { this.popupRef = el; }, class: "hb-tooltip__popup", style: this.popupStyle, onMouseEnter: () => this.trigger === 'hover' && this.show(), onMouseLeave: () => this.trigger === 'hover' && this.hide() }, this.showArrow && h("div", { key: '73b08948dcc030a487a0d0f11afbb2fb4bcbdc51', class: "hb-tooltip__arrow" }), h("div", { key: '564f396c5eb5e3cb5bffe7dc8ec956c54bfc484d', class: "hb-tooltip__content" }, this.content)))));
+    }
+};
+Tooltip.style = HbTooltipStyle0;
+
+export { Tooltip as hb_tooltip };
+
+//# sourceMappingURL=hb-tooltip.entry.js.map

package/dist/esm/hb-tooltip.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-tooltip.entry.js","mappings":"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","names":[],"sources":["src/components/Tooltip/tooltip.css?tag=hb-tooltip&encapsulation=shadow","src/components/Tooltip/Tooltip.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.hb-tooltip__trigger {\n  display: inline-block;\n}\n\n.hb-tooltip__popup {\n  position: fixed;\n  padding: 6px 12px;\n  border-radius: var(--hb-border-radius-sm);\n  background-color: var(--hb-p-gray-800);\n  color: #fff;\n  font-size: var(--hb-font-size-sm);\n  line-height: 1.4;\n  pointer-events: auto;\n  box-shadow: var(--hb-box-shadow);\n  animation: hb-tooltip-fade-in 0.15s ease-out;\n  max-width: 300px;\n  word-wrap: break-word;\n}\n\n.hb-tooltip__arrow {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  background-color: var(--hb-p-gray-800);\n  transform: rotate(45deg);\n}\n\n.hb-tooltip__content {\n  position: relative;\n  z-index: 1;\n}\n\n@keyframes hb-tooltip-fade-in {\n  from { opacity: 0; transform: scale(0.95); }\n  to   { opacity: 1; transform: scale(1); }\n}\n","import { Component, h, Prop, State, Element } from '@stencil/core';\nimport { computePosition, getNextZIndex, Placement } from '../../utils/popup-manager';\n\n/**\n * Tooltip 文字提示组件\n * 鼠标悬停或点击时显示提示文字\n */\n@Component({\n  tag: 'hb-tooltip',\n  styleUrl: 'tooltip.css',\n  shadow: true,\n})\nexport class Tooltip {\n  @Element() el: HTMLElement;\n\n  /** 提示文字 */\n  @Prop() content: string = '';\n\n  /** 弹出位置 */\n  @Prop() placement: Placement = 'top';\n\n  /** 触发方式 */\n  @Prop() trigger: 'hover' | 'click' = 'hover';\n\n  /** 是否禁用 */\n  @Prop() disabled: boolean = false;\n\n  /** 是否显示箭头 */\n  @Prop() showArrow: boolean = true;\n\n  @State() visible: boolean = false;\n  @State() popupStyle: Record<string, string> = {};\n\n  private triggerRef?: HTMLElement;\n  private popupRef?: HTMLDivElement;\n  private hideTimer?: ReturnType<typeof setTimeout>;\n\n  private show = () => {\n    if (this.disabled) return;\n    clearTimeout(this.hideTimer);\n    this.visible = true;\n    requestAnimationFrame(() => this.updatePosition());\n  };\n\n  private hide = () => {\n    this.hideTimer = setTimeout(() => { this.visible = false; }, 100);\n  };\n\n  private toggle = () => {\n    if (this.disabled) return;\n    if (this.visible) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  };\n\n  private updatePosition() {\n    if (!this.triggerRef || !this.popupRef) return;\n    const triggerRect = this.triggerRef.getBoundingClientRect();\n    const { width, height } = this.popupRef.getBoundingClientRect();\n    const pos = computePosition(triggerRect, width, height, this.placement, 8);\n    this.popupStyle = {\n      top: `${pos.top}px`,\n      left: `${pos.left}px`,\n      zIndex: String(getNextZIndex()),\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 class=\"hb-tooltip\" {...triggerEvents}>\n        <div\n          ref={(el: any) => { this.triggerRef = el; }}\n          class=\"hb-tooltip__trigger\"\n        >\n          <slot />\n        </div>\n        {this.visible && (\n          <div\n            ref={(el: any) => { this.popupRef = el; }}\n            class=\"hb-tooltip__popup\"\n            style={this.popupStyle}\n            onMouseEnter={() => this.trigger === 'hover' && this.show()}\n            onMouseLeave={() => this.trigger === 'hover' && this.hide()}\n          >\n            {this.showArrow && <div class=\"hb-tooltip__arrow\" />}\n            <div class=\"hb-tooltip__content\">{this.content}</div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/hb-tour.entry.js

@@ -0,0 +1,115 @@
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-fdf7135e.js';
+
+const tourCss = "/*! 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-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--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}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.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:block}.hb-tour{inset:0;pointer-events:auto;position:fixed;z-index:var(--hb-z-index-popover)}.hb-tour__mask{background:0 0;cursor:default;inset:0;position:absolute}.hb-tour__card{background-color:var(--hb-color-bg-elevated);border-radius:var(--hb-border-radius-base);box-shadow:var(--hb-box-shadow-lg);color:var(--hb-color-text);font-size:var(--hb-font-size-sm);max-width:calc(100vw - 32px);padding:var(--hb-spacing-lg);position:absolute;width:340px;z-index:1}.hb-tour__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--hb-spacing-sm)}.hb-tour__title{color:var(--hb-color-text-primary);font-size:var(--hb-font-size-lg);font-weight:600}.hb-tour__close{align-items:center;background:0 0;border:none;border-radius:50%;color:var(--hb-color-text-tertiary);cursor:pointer;display:inline-flex;font-size:18px;height:24px;justify-content:center;line-height:1;transition:background-color var(--hb-transition-duration),color var(--hb-transition-duration);width:24px}.hb-tour__close:hover{background-color:var(--hb-color-fill-tertiary);color:var(--hb-color-text-secondary)}.hb-tour__body{color:var(--hb-color-text-secondary);line-height:1.6;margin-bottom:var(--hb-spacing-lg)}.hb-tour__footer{align-items:center;display:flex;justify-content:space-between}.hb-tour__indicator{color:var(--hb-color-text-tertiary);font-size:var(--hb-font-size-xs)}.hb-tour__actions{gap:var(--hb-spacing-xs)}.hb-tour__actions,.hb-tour__btn{align-items:center;display:inline-flex}.hb-tour__btn{background-color:var(--hb-color-bg-elevated);border:1px solid var(--hb-color-border);border-radius:var(--hb-border-radius-base);color:var(--hb-color-text);cursor:pointer;font-size:var(--hb-font-size-sm);height:32px;justify-content:center;padding:0 var(--hb-spacing-lg);transition:all var(--hb-transition-duration)}.hb-tour__btn:hover{border-color:var(--hb-color-primary-border);color:var(--hb-color-primary)}.hb-tour__btn--next{background-color:var(--hb-color-primary);border-color:var(--hb-color-primary);color:var(--hb-color-text-inverse)}.hb-tour__btn--next:hover{background-color:var(--hb-color-primary-hover);border-color:var(--hb-color-primary-hover);color:var(--hb-color-text-inverse)}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@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 HbTourStyle0 = tourCss;
+
+const Tour = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hbChange = createEvent(this, "hbChange", 7);
+        this.hbClose = createEvent(this, "hbClose", 7);
+    }
+    get el() { return getElement(this); }
+    /** 是否显示（受控） */
+    visible = false;
+    /** 步骤列表 */
+    steps = [];
+    /** 当前步骤索引 */
+    current = 0;
+    /** 步骤变化事件，detail 为新 current */
+    hbChange;
+    /** 关闭事件 */
+    hbClose;
+    targetRect = null;
+    get currentStep() {
+        return this.steps[this.current];
+    }
+    get isLast() {
+        return this.current >= this.steps.length - 1;
+    }
+    get isFirst() {
+        return this.current <= 0;
+    }
+    componentDidRender() {
+        this.updateTargetRect();
+    }
+    componentDidUpdate() {
+        this.updateTargetRect();
+    }
+    updateTargetRect() {
+        const step = this.currentStep;
+        if (!step || !this.visible) {
+            this.targetRect = null;
+            return;
+        }
+        const targetEl = document.querySelector(step.target);
+        if (targetEl) {
+            this.targetRect = targetEl.getBoundingClientRect();
+        }
+        else {
+            this.targetRect = null;
+        }
+    }
+    goNext = () => {
+        if (this.isLast) {
+            this.finish();
+            return;
+        }
+        this.current = this.current + 1;
+        this.hbChange.emit(this.current);
+    };
+    goPrev = () => {
+        if (this.isFirst)
+            return;
+        this.current = this.current - 1;
+        this.hbChange.emit(this.current);
+    };
+    finish = () => {
+        this.visible = false;
+        this.hbClose.emit();
+    };
+    cardStyle() {
+        const rect = this.targetRect;
+        // jsdom 下 getBoundingClientRect 返回 0 尺寸，提供兜底位置
+        if (rect && (rect.width > 0 || rect.height > 0)) {
+            return {
+                left: `${rect.right + 12}px`,
+                top: `${rect.top}px`,
+            };
+        }
+        return { left: '50%', top: '50%', transform: 'translate(-50%, -50%)' };
+    }
+    maskStyle() {
+        const rect = this.targetRect;
+        if (rect && (rect.width > 0 || rect.height > 0)) {
+            // 4 段 box-shadow 实现镂空遮罩
+            const top = rect.top;
+            const right = window.innerWidth - rect.right;
+            const bottom = window.innerHeight - rect.bottom;
+            const left = rect.left;
+            return {
+                boxShadow: [
+                    `0 0 0 9999px var(--hb-color-bg-mask)`,
+                    `${left}px ${bottom}px 0 ${right}px transparent`,
+                    `${left}px ${top}px 0 ${right}px transparent`,
+                    `0 ${bottom}px 0 ${right}px transparent`,
+                    `0 ${top}px 0 ${left}px transparent`,
+                ].join(', '),
+            };
+        }
+        return { background: 'var(--hb-color-bg-mask)' };
+    }
+    render() {
+        if (!this.visible || this.steps.length === 0)
+            return null;
+        const step = this.currentStep;
+        if (!step)
+            return null;
+        return (h("div", { class: "hb-tour" }, h("div", { class: "hb-tour__mask", style: this.maskStyle(), onClick: this.finish }), h("div", { class: "hb-tour__card", style: this.cardStyle(), role: "dialog", "aria-modal": "true" }, h("div", { class: "hb-tour__header" }, h("span", { class: "hb-tour__title" }, step.title), h("button", { type: "button", class: "hb-tour__close", onClick: this.finish, "aria-label": "\u5173\u95ED" }, "\u00D7")), h("div", { class: "hb-tour__body" }, step.description), h("div", { class: "hb-tour__footer" }, h("span", { class: "hb-tour__indicator" }, this.current + 1, " / ", this.steps.length), h("div", { class: "hb-tour__actions" }, !this.isFirst && (h("button", { type: "button", class: "hb-tour__btn hb-tour__btn--prev", onClick: this.goPrev }, "\u4E0A\u4E00\u6B65")), h("button", { type: "button", class: "hb-tour__btn hb-tour__btn--next", onClick: this.goNext }, this.isLast ? '完成' : '下一步'))))));
+    }
+};
+Tour.style = HbTourStyle0;
+
+export { Tour as hb_tour };
+
+//# sourceMappingURL=hb-tour.entry.js.map

package/dist/esm/hb-tour.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-tour.entry.js","mappings":"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","names":[],"sources":["src/components/Tour/tour.css?tag=hb-tour&encapsulation=shadow","src/components/Tour/Tour.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hb-tour {\n  position: fixed;\n  inset: 0;\n  z-index: var(--hb-z-index-popover);\n  pointer-events: auto;\n}\n\n/* 镂空遮罩（box-shadow 多段方案；jsdom 下退化为纯色遮罩） */\n.hb-tour__mask {\n  position: absolute;\n  inset: 0;\n  background: transparent;\n  cursor: default;\n}\n\n.hb-tour__card {\n  position: absolute;\n  width: 340px;\n  max-width: calc(100vw - 32px);\n  padding: var(--hb-spacing-lg);\n  background-color: var(--hb-color-bg-elevated);\n  border-radius: var(--hb-border-radius-base);\n  box-shadow: var(--hb-box-shadow-lg);\n  color: var(--hb-color-text);\n  font-size: var(--hb-font-size-sm);\n  z-index: 1;\n}\n\n.hb-tour__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: var(--hb-spacing-sm);\n}\n\n.hb-tour__title {\n  font-size: var(--hb-font-size-lg);\n  font-weight: 600;\n  color: var(--hb-color-text-primary);\n}\n\n.hb-tour__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border: none;\n  background: transparent;\n  color: var(--hb-color-text-tertiary);\n  cursor: pointer;\n  font-size: 18px;\n  line-height: 1;\n  border-radius: 50%;\n  transition: background-color var(--hb-transition-duration), color var(--hb-transition-duration);\n}\n.hb-tour__close:hover {\n  background-color: var(--hb-color-fill-tertiary);\n  color: var(--hb-color-text-secondary);\n}\n\n.hb-tour__body {\n  color: var(--hb-color-text-secondary);\n  line-height: 1.6;\n  margin-bottom: var(--hb-spacing-lg);\n}\n\n.hb-tour__footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.hb-tour__indicator {\n  color: var(--hb-color-text-tertiary);\n  font-size: var(--hb-font-size-xs);\n}\n\n.hb-tour__actions {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--hb-spacing-xs);\n}\n\n.hb-tour__btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 32px;\n  padding: 0 var(--hb-spacing-lg);\n  font-size: var(--hb-font-size-sm);\n  border-radius: var(--hb-border-radius-base);\n  border: 1px solid var(--hb-color-border);\n  background-color: var(--hb-color-bg-elevated);\n  color: var(--hb-color-text);\n  cursor: pointer;\n  transition: all var(--hb-transition-duration);\n}\n.hb-tour__btn:hover {\n  color: var(--hb-color-primary);\n  border-color: var(--hb-color-primary-border);\n}\n\n.hb-tour__btn--next {\n  background-color: var(--hb-color-primary);\n  border-color: var(--hb-color-primary);\n  color: var(--hb-color-text-inverse);\n}\n.hb-tour__btn--next:hover {\n  background-color: var(--hb-color-primary-hover);\n  border-color: var(--hb-color-primary-hover);\n  color: var(--hb-color-text-inverse);\n}\n","import { Component, h, Prop, Event, EventEmitter, State, Element } from '@stencil/core';\n\nexport interface TourStep {\n  /** 目标元素 CSS selector */\n  target: string;\n  /** 步骤标题 */\n  title: string;\n  /** 步骤描述 */\n  description: string;\n}\n\n/**\n * Tour 引导组件\n * 通过遮罩 + 高亮卡片引导用户关注页面元素。\n */\n@Component({\n  tag: 'hb-tour',\n  styleUrl: 'tour.css',\n  shadow: true,\n})\nexport class Tour {\n  @Element() el: HTMLElement;\n\n  /** 是否显示（受控） */\n  @Prop({ mutable: true }) visible: boolean = false;\n\n  /** 步骤列表 */\n  @Prop() steps: TourStep[] = [];\n\n  /** 当前步骤索引 */\n  @Prop({ mutable: true }) current: number = 0;\n\n  /** 步骤变化事件，detail 为新 current */\n  @Event() hbChange: EventEmitter<number>;\n\n  /** 关闭事件 */\n  @Event() hbClose: EventEmitter<void>;\n\n  @State() private targetRect: DOMRect | null = null;\n\n  private get currentStep(): TourStep | undefined {\n    return this.steps[this.current];\n  }\n\n  private get isLast(): boolean {\n    return this.current >= this.steps.length - 1;\n  }\n\n  private get isFirst(): boolean {\n    return this.current <= 0;\n  }\n\n  componentDidRender() {\n    this.updateTargetRect();\n  }\n\n  componentDidUpdate() {\n    this.updateTargetRect();\n  }\n\n  private updateTargetRect() {\n    const step = this.currentStep;\n    if (!step || !this.visible) {\n      this.targetRect = null;\n      return;\n    }\n    const targetEl = document.querySelector(step.target) as HTMLElement | null;\n    if (targetEl) {\n      this.targetRect = targetEl.getBoundingClientRect();\n    } else {\n      this.targetRect = null;\n    }\n  }\n\n  private goNext = () => {\n    if (this.isLast) {\n      this.finish();\n      return;\n    }\n    this.current = this.current + 1;\n    this.hbChange.emit(this.current);\n  };\n\n  private goPrev = () => {\n    if (this.isFirst) return;\n    this.current = this.current - 1;\n    this.hbChange.emit(this.current);\n  };\n\n  private finish = () => {\n    this.visible = false;\n    this.hbClose.emit();\n  };\n\n  private cardStyle(): Record<string, string> {\n    const rect = this.targetRect;\n    // jsdom 下 getBoundingClientRect 返回 0 尺寸，提供兜底位置\n    if (rect && (rect.width > 0 || rect.height > 0)) {\n      return {\n        left: `${rect.right + 12}px`,\n        top: `${rect.top}px`,\n      };\n    }\n    return { left: '50%', top: '50%', transform: 'translate(-50%, -50%)' };\n  }\n\n  private maskStyle(): Record<string, string> {\n    const rect = this.targetRect;\n    if (rect && (rect.width > 0 || rect.height > 0)) {\n      // 4 段 box-shadow 实现镂空遮罩\n      const top = rect.top;\n      const right = window.innerWidth - rect.right;\n      const bottom = window.innerHeight - rect.bottom;\n      const left = rect.left;\n      return {\n        boxShadow: [\n          `0 0 0 9999px var(--hb-color-bg-mask)`,\n          `${left}px ${bottom}px 0 ${right}px transparent`,\n          `${left}px ${top}px 0 ${right}px transparent`,\n          `0 ${bottom}px 0 ${right}px transparent`,\n          `0 ${top}px 0 ${left}px transparent`,\n        ].join(', '),\n      };\n    }\n    return { background: 'var(--hb-color-bg-mask)' };\n  }\n\n  render() {\n    if (!this.visible || this.steps.length === 0) return null;\n\n    const step = this.currentStep;\n    if (!step) return null;\n\n    return (\n      <div class=\"hb-tour\">\n        <div\n          class=\"hb-tour__mask\"\n          style={this.maskStyle()}\n          onClick={this.finish}\n        />\n        <div\n          class=\"hb-tour__card\"\n          style={this.cardStyle()}\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <div class=\"hb-tour__header\">\n            <span class=\"hb-tour__title\">{step.title}</span>\n            <button\n              type=\"button\"\n              class=\"hb-tour__close\"\n              onClick={this.finish}\n              aria-label=\"关闭\"\n            >\n              ×\n            </button>\n          </div>\n          <div class=\"hb-tour__body\">{step.description}</div>\n          <div class=\"hb-tour__footer\">\n            <span class=\"hb-tour__indicator\">\n              {this.current + 1} / {this.steps.length}\n            </span>\n            <div class=\"hb-tour__actions\">\n              {!this.isFirst && (\n                <button type=\"button\" class=\"hb-tour__btn hb-tour__btn--prev\" onClick={this.goPrev}>\n                  上一步\n                </button>\n              )}\n              <button type=\"button\" class=\"hb-tour__btn hb-tour__btn--next\" onClick={this.goNext}>\n                {this.isLast ? '完成' : '下一步'}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/hb-transfer.entry.js

@@ -0,0 +1,169 @@
+import { r as registerInstance, c as createEvent, h } from './index-fdf7135e.js';
+
+const transferCss = "/*! 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:block}.hb-transfer{align-items:stretch;color:var(--hb-color-text-regular,#606266);display:flex;font-size:14px;gap:12px}.hb-transfer--disabled{cursor:not-allowed;opacity:.6}.hb-transfer__panel{background-color:var(--hb-color-white,#fff);border:1px solid var(--hb-border-color,#dcdfe6);border-radius:4px;display:flex;flex-direction:column;max-height:100%;overflow:hidden;width:220px}.hb-transfer__panel--disabled,.hb-transfer__panel-header{background-color:var(--hb-fill-color-light,#f5f7fa)}.hb-transfer__panel-header{align-items:center;border-bottom:1px solid var(--hb-border-color-lighter,#ebeef5);display:flex;justify-content:space-between;padding:8px 12px}.hb-transfer__check-all{align-items:center;cursor:pointer;display:inline-flex;gap:6px;-webkit-user-select:none;user-select:none}.hb-transfer__check-all-input{cursor:pointer;margin:0}.hb-transfer__panel-title{color:var(--hb-color-text-primary,#303133);font-weight:600}.hb-transfer__panel-filter{border-bottom:1px solid var(--hb-border-color-lighter,#ebeef5);padding:8px}.hb-transfer__filter-input{border:1px solid var(--hb-border-color,#dcdfe6);border-radius:4px;box-sizing:border-box;color:var(--hb-color-text-regular,#606266);font-size:13px;outline:none;padding:6px 10px;transition:border-color .2s;width:100%}.hb-transfer__filter-input:focus{border-color:var(--hb-color-primary)}.hb-transfer__filter-input:disabled{background-color:var(--hb-fill-color-light,#f5f7fa);cursor:not-allowed}.hb-transfer__panel-body{flex:1;max-height:246px;min-height:120px;overflow-y:auto;padding:4px 0}.hb-transfer__empty{align-items:center;color:var(--hb-color-text-placeholder,#c0c4cc);display:flex;font-size:13px;height:100%;justify-content:center;min-height:120px}.hb-transfer__item{align-items:center;cursor:pointer;display:flex;gap:8px;padding:6px 12px;transition:background-color .2s;-webkit-user-select:none;user-select:none}.hb-transfer__item:hover:not(.hb-transfer__item--disabled){background-color:var(--hb-fill-color-light,#f5f7fa)}.hb-transfer__item--checked{color:var(--hb-color-primary)}.hb-transfer__item--disabled{color:var(--hb-color-text-placeholder,#c0c4cc);cursor:not-allowed}.hb-transfer__item-input{cursor:pointer;margin:0}.hb-transfer__item-input:disabled{cursor:not-allowed}.hb-transfer__item-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hb-transfer__operations{align-items:center;align-self:center;display:flex;flex-direction:column;gap:8px;justify-content:center}.hb-transfer__operation-btn{align-items:center;background-color:var(--hb-color-white,#fff);border:1px solid var(--hb-border-color,#dcdfe6);border-radius:4px;color:var(--hb-color-text-regular,#606266);cursor:pointer;display:inline-flex;font-size:18px;height:32px;justify-content:center;line-height:1;transition:all .2s;width:36px}.hb-transfer__operation-btn:hover:not(:disabled){border-color:var(--hb-color-primary);color:var(--hb-color-primary)}.hb-transfer__operation-btn:disabled{background-color:var(--hb-fill-color-light,#f5f7fa);color:var(--hb-color-text-placeholder,#c0c4cc);cursor:not-allowed}@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 HbTransferStyle0 = transferCss;
+
+const Transfer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hbChange = createEvent(this, "hbChange", 7);
+    }
+    /**
+     * 数据源
+     */
+    data = [];
+    /**
+     * 右侧（目标列表）的 keys
+     */
+    targetKeys = [];
+    /**
+     * 两侧已勾选的 keys
+     */
+    selectedKeys = [];
+    /**
+     * 标题，[源列表标题, 目标列表标题]
+     * @default ['源列表', '目标列表']
+     */
+    titles = ['源列表', '目标列表'];
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 是否显示搜索框
+     * @default false
+     */
+    filterable = false;
+    /**
+     * 右侧列表变化事件
+     */
+    hbChange;
+    leftFilter = '';
+    rightFilter = '';
+    handleSelectedKeysChange() {
+        /* 触发重渲染 */
+    }
+    /** 左侧列表：key 不在 targetKeys 中 */
+    get leftList() {
+        return this.data.filter((item) => !this.targetKeys.includes(item.key));
+    }
+    /** 右侧列表：key 在 targetKeys 中 */
+    get rightList() {
+        const targetSet = new Set(this.targetKeys);
+        return this.data.filter((item) => targetSet.has(item.key));
+    }
+    /** 当前列表项是否被勾选 */
+    isSelected(key) {
+        return this.selectedKeys.includes(key);
+    }
+    /** 切换某项的勾选状态 */
+    toggleItem = (item) => {
+        if (this.disabled || item.disabled)
+            return;
+        const isSelected = this.isSelected(item.key);
+        this.selectedKeys = isSelected
+            ? this.selectedKeys.filter((k) => k !== item.key)
+            : [...this.selectedKeys, item.key];
+    };
+    /** 获取某侧可勾选（非 disabled）的全部 keys */
+    getSelectableKeys(list) {
+        return list.filter((item) => !item.disabled).map((item) => item.key);
+    }
+    /** 计算某侧全选 checkbox 状态：'all' | 'none' | 'indeterminate' */
+    getCheckAllState(list) {
+        const selectableKeys = this.getSelectableKeys(list);
+        if (selectableKeys.length === 0)
+            return 'none';
+        const selectedCount = selectableKeys.filter((k) => this.isSelected(k)).length;
+        if (selectedCount === 0)
+            return 'none';
+        if (selectedCount === selectableKeys.length)
+            return 'all';
+        return 'indeterminate';
+    }
+    /** 切换某侧全选 */
+    toggleCheckAll = (list) => {
+        if (this.disabled)
+            return;
+        const selectableKeys = this.getSelectableKeys(list);
+        const state = this.getCheckAllState(list);
+        if (state === 'all') {
+            // 取消该侧全部勾选
+            this.selectedKeys = this.selectedKeys.filter((k) => !selectableKeys.includes(k));
+        }
+        else {
+            // 勾选该侧全部（合并去重）
+            const merged = new Set([...this.selectedKeys, ...selectableKeys]);
+            this.selectedKeys = Array.from(merged);
+        }
+    };
+    /** 向右移动：把左侧已勾选的项移到右侧 */
+    moveToRight = () => {
+        if (this.disabled)
+            return;
+        const leftSelected = this.leftList
+            .filter((item) => this.isSelected(item.key) && !item.disabled)
+            .map((item) => item.key);
+        if (leftSelected.length === 0)
+            return;
+        // 合并到 targetKeys（保持 data 中的顺序）
+        const targetSet = new Set([...this.targetKeys, ...leftSelected]);
+        this.targetKeys = this.data
+            .filter((item) => targetSet.has(item.key))
+            .map((item) => item.key);
+        // 清除已移动项的勾选
+        this.selectedKeys = this.selectedKeys.filter((k) => !leftSelected.includes(k));
+        this.hbChange.emit({ targetKeys: this.targetKeys });
+    };
+    /** 向左移动：把右侧已勾选的项移回左侧 */
+    moveToLeft = () => {
+        if (this.disabled)
+            return;
+        const rightSelected = this.rightList
+            .filter((item) => this.isSelected(item.key) && !item.disabled)
+            .map((item) => item.key);
+        if (rightSelected.length === 0)
+            return;
+        const removeSet = new Set(rightSelected);
+        this.targetKeys = this.targetKeys.filter((k) => !removeSet.has(k));
+        // 清除已移动项的勾选
+        this.selectedKeys = this.selectedKeys.filter((k) => !removeSet.has(k));
+        this.hbChange.emit({ targetKeys: this.targetKeys });
+    };
+    /** 列表项过滤 */
+    filterList(list, keyword) {
+        if (!keyword)
+            return list;
+        const lower = keyword.toLowerCase();
+        return list.filter((item) => item.title.toLowerCase().includes(lower));
+    }
+    renderList = (list, title, filterValue, onFilter) => {
+        const filteredList = this.filterList(list, filterValue);
+        const selectableKeys = this.getSelectableKeys(list);
+        const selectedCount = selectableKeys.filter((k) => this.isSelected(k)).length;
+        const checkAllState = this.getCheckAllState(list);
+        return (h("div", { class: { 'hb-transfer__panel': true, 'hb-transfer__panel--disabled': this.disabled } }, h("div", { class: "hb-transfer__panel-header" }, h("label", { class: "hb-transfer__check-all" }, h("input", { type: "checkbox", class: "hb-transfer__check-all-input", checked: checkAllState === 'all', disabled: this.disabled || selectableKeys.length === 0, onChange: () => this.toggleCheckAll(list) }), h("span", null, selectedCount > 0 ? `${selectedCount}/` : '', selectableKeys.length, " \u9879")), h("span", { class: "hb-transfer__panel-title" }, title)), this.filterable && (h("div", { class: "hb-transfer__panel-filter" }, h("input", { type: "text", class: "hb-transfer__filter-input", placeholder: "\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9", value: filterValue, disabled: this.disabled, onInput: onFilter }))), h("div", { class: "hb-transfer__panel-body" }, filteredList.length === 0 ? (h("div", { class: "hb-transfer__empty" }, "\u65E0\u6570\u636E")) : (filteredList.map((item) => (h("label", { class: {
+                'hb-transfer__item': true,
+                'hb-transfer__item--checked': this.isSelected(item.key),
+                'hb-transfer__item--disabled': this.disabled || !!item.disabled,
+            } }, h("input", { type: "checkbox", class: "hb-transfer__item-input", checked: this.isSelected(item.key), disabled: this.disabled || !!item.disabled, onChange: () => this.toggleItem(item) }), h("span", { class: "hb-transfer__item-title" }, item.title))))))));
+    };
+    render() {
+        const leftCheckAllState = this.getCheckAllState(this.leftList);
+        const rightCheckAllState = this.getCheckAllState(this.rightList);
+        return (h("div", { key: 'e8b42f296636c208e67adb4dfd105f72ccd96406', class: { 'hb-transfer': true, 'hb-transfer--disabled': this.disabled } }, this.renderList(this.leftList, this.titles[0], this.leftFilter, (e) => {
+            this.leftFilter = e.target.value;
+        }), h("div", { key: 'fbb9d1ab5a4782e2d7be4e5ba8b6d2378cf5dd4f', class: "hb-transfer__operations" }, h("button", { key: '8c598127a30fc7cc82711ccbc5ae695363f20eeb', type: "button", class: "hb-transfer__operation-btn", disabled: this.disabled || rightCheckAllState === 'none', onClick: this.moveToLeft, "aria-label": "\u5411\u5DE6\u79FB\u52A8" }, "\u2039"), h("button", { key: '95ab5ae8b686fc032a7e88e4d798d0190a7163ed', type: "button", class: "hb-transfer__operation-btn", disabled: this.disabled || leftCheckAllState === 'none', onClick: this.moveToRight, "aria-label": "\u5411\u53F3\u79FB\u52A8" }, "\u203A")), this.renderList(this.rightList, this.titles[1], this.rightFilter, (e) => {
+            this.rightFilter = e.target.value;
+        })));
+    }
+    static get watchers() { return {
+        "selectedKeys": ["handleSelectedKeysChange"]
+    }; }
+};
+Transfer.style = HbTransferStyle0;
+
+export { Transfer as hb_transfer };
+
+//# sourceMappingURL=hb-transfer.entry.js.map

package/dist/esm/hb-transfer.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-transfer.entry.js","mappings":"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","names":[],"sources":["src/components/Transfer/transfer.css?tag=hb-transfer&encapsulation=shadow","src/components/Transfer/Transfer.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hb-transfer {\n  display: flex;\n  align-items: stretch;\n  gap: 12px;\n  font-size: 14px;\n  color: var(--hb-color-text-regular, #606266);\n}\n\n.hb-transfer--disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n/* 单栏 */\n.hb-transfer__panel {\n  display: flex;\n  flex-direction: column;\n  width: 220px;\n  max-height: 100%;\n  border: 1px solid var(--hb-border-color, #dcdfe6);\n  border-radius: 4px;\n  background-color: var(--hb-color-white, #ffffff);\n  overflow: hidden;\n}\n\n.hb-transfer__panel--disabled {\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n}\n\n/* 头部：全选 + 标题 */\n.hb-transfer__panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--hb-border-color-lighter, #ebeef5);\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-transfer__check-all {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.hb-transfer__check-all-input {\n  margin: 0;\n  cursor: pointer;\n}\n\n.hb-transfer__panel-title {\n  font-weight: 600;\n  color: var(--hb-color-text-primary, #303133);\n}\n\n/* 搜索框 */\n.hb-transfer__panel-filter {\n  padding: 8px;\n  border-bottom: 1px solid var(--hb-border-color-lighter, #ebeef5);\n}\n\n.hb-transfer__filter-input {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 6px 10px;\n  font-size: 13px;\n  color: var(--hb-color-text-regular, #606266);\n  border: 1px solid var(--hb-border-color, #dcdfe6);\n  border-radius: 4px;\n  outline: none;\n  transition: border-color 0.2s;\n}\n\n.hb-transfer__filter-input:focus {\n  border-color: var(--hb-color-primary);\n}\n\n.hb-transfer__filter-input:disabled {\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n  cursor: not-allowed;\n}\n\n/* 列表主体 */\n.hb-transfer__panel-body {\n  flex: 1;\n  min-height: 120px;\n  max-height: 246px;\n  overflow-y: auto;\n  padding: 4px 0;\n}\n\n.hb-transfer__empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 120px;\n  color: var(--hb-color-text-placeholder, #c0c4cc);\n  font-size: 13px;\n}\n\n/* 列表项 */\n.hb-transfer__item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n  cursor: pointer;\n  transition: background-color 0.2s;\n  user-select: none;\n}\n\n.hb-transfer__item:hover:not(.hb-transfer__item--disabled) {\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-transfer__item--checked {\n  color: var(--hb-color-primary);\n}\n\n.hb-transfer__item--disabled {\n  cursor: not-allowed;\n  color: var(--hb-color-text-placeholder, #c0c4cc);\n}\n\n.hb-transfer__item-input {\n  margin: 0;\n  cursor: pointer;\n}\n\n.hb-transfer__item-input:disabled {\n  cursor: not-allowed;\n}\n\n.hb-transfer__item-title {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* 中间操作按钮区 */\n.hb-transfer__operations {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  align-self: center;\n}\n\n.hb-transfer__operation-btn {\n  width: 36px;\n  height: 32px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  line-height: 1;\n  color: var(--hb-color-text-regular, #606266);\n  background-color: var(--hb-color-white, #ffffff);\n  border: 1px solid var(--hb-border-color, #dcdfe6);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.hb-transfer__operation-btn:hover:not(:disabled) {\n  color: var(--hb-color-primary);\n  border-color: var(--hb-color-primary);\n}\n\n.hb-transfer__operation-btn:disabled {\n  color: var(--hb-color-text-placeholder, #c0c4cc);\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n  cursor: not-allowed;\n}\n","import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n/**\n * Transfer 数据项\n */\nexport interface TransferDataItem {\n  key: string;\n  title: string;\n  disabled?: boolean;\n}\n\n/**\n * Transfer 穿梭框组件\n * 双栏列表选择，勾选项后通过中间按钮在两栏间移动\n */\n@Component({\n  tag: 'hb-transfer',\n  styleUrl: 'transfer.css',\n  shadow: true,\n})\nexport class Transfer {\n  /**\n   * 数据源\n   */\n  @Prop() data: TransferDataItem[] = [];\n\n  /**\n   * 右侧（目标列表）的 keys\n   */\n  @Prop({ mutable: true }) targetKeys: string[] = [];\n\n  /**\n   * 两侧已勾选的 keys\n   */\n  @Prop({ mutable: true }) selectedKeys: string[] = [];\n\n  /**\n   * 标题，[源列表标题, 目标列表标题]\n   * @default ['源列表', '目标列表']\n   */\n  @Prop() titles: [string, string] = ['源列表', '目标列表'];\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否显示搜索框\n   * @default false\n   */\n  @Prop() filterable: boolean = false;\n\n  /**\n   * 右侧列表变化事件\n   */\n  @Event() hbChange: EventEmitter<{ targetKeys: string[] }>;\n\n  @State() leftFilter: string = '';\n  @State() rightFilter: string = '';\n\n  @Watch('selectedKeys')\n  handleSelectedKeysChange() {\n    /* 触发重渲染 */\n  }\n\n  /** 左侧列表：key 不在 targetKeys 中 */\n  private get leftList(): TransferDataItem[] {\n    return this.data.filter((item) => !this.targetKeys.includes(item.key));\n  }\n\n  /** 右侧列表：key 在 targetKeys 中 */\n  private get rightList(): TransferDataItem[] {\n    const targetSet = new Set(this.targetKeys);\n    return this.data.filter((item) => targetSet.has(item.key));\n  }\n\n  /** 当前列表项是否被勾选 */\n  private isSelected(key: string): boolean {\n    return this.selectedKeys.includes(key);\n  }\n\n  /** 切换某项的勾选状态 */\n  private toggleItem = (item: TransferDataItem) => {\n    if (this.disabled || item.disabled) return;\n    const isSelected = this.isSelected(item.key);\n    this.selectedKeys = isSelected\n      ? this.selectedKeys.filter((k) => k !== item.key)\n      : [...this.selectedKeys, item.key];\n  };\n\n  /** 获取某侧可勾选（非 disabled）的全部 keys */\n  private getSelectableKeys(list: TransferDataItem[]): string[] {\n    return list.filter((item) => !item.disabled).map((item) => item.key);\n  }\n\n  /** 计算某侧全选 checkbox 状态：'all' | 'none' | 'indeterminate' */\n  private getCheckAllState(list: TransferDataItem[]): 'all' | 'none' | 'indeterminate' {\n    const selectableKeys = this.getSelectableKeys(list);\n    if (selectableKeys.length === 0) return 'none';\n    const selectedCount = selectableKeys.filter((k) => this.isSelected(k)).length;\n    if (selectedCount === 0) return 'none';\n    if (selectedCount === selectableKeys.length) return 'all';\n    return 'indeterminate';\n  }\n\n  /** 切换某侧全选 */\n  private toggleCheckAll = (list: TransferDataItem[]) => {\n    if (this.disabled) return;\n    const selectableKeys = this.getSelectableKeys(list);\n    const state = this.getCheckAllState(list);\n    if (state === 'all') {\n      // 取消该侧全部勾选\n      this.selectedKeys = this.selectedKeys.filter((k) => !selectableKeys.includes(k));\n    } else {\n      // 勾选该侧全部（合并去重）\n      const merged = new Set([...this.selectedKeys, ...selectableKeys]);\n      this.selectedKeys = Array.from(merged);\n    }\n  };\n\n  /** 向右移动：把左侧已勾选的项移到右侧 */\n  private moveToRight = () => {\n    if (this.disabled) return;\n    const leftSelected = this.leftList\n      .filter((item) => this.isSelected(item.key) && !item.disabled)\n      .map((item) => item.key);\n    if (leftSelected.length === 0) return;\n    // 合并到 targetKeys（保持 data 中的顺序）\n    const targetSet = new Set([...this.targetKeys, ...leftSelected]);\n    this.targetKeys = this.data\n      .filter((item) => targetSet.has(item.key))\n      .map((item) => item.key);\n    // 清除已移动项的勾选\n    this.selectedKeys = this.selectedKeys.filter((k) => !leftSelected.includes(k));\n    this.hbChange.emit({ targetKeys: this.targetKeys });\n  };\n\n  /** 向左移动：把右侧已勾选的项移回左侧 */\n  private moveToLeft = () => {\n    if (this.disabled) return;\n    const rightSelected = this.rightList\n      .filter((item) => this.isSelected(item.key) && !item.disabled)\n      .map((item) => item.key);\n    if (rightSelected.length === 0) return;\n    const removeSet = new Set(rightSelected);\n    this.targetKeys = this.targetKeys.filter((k) => !removeSet.has(k));\n    // 清除已移动项的勾选\n    this.selectedKeys = this.selectedKeys.filter((k) => !removeSet.has(k));\n    this.hbChange.emit({ targetKeys: this.targetKeys });\n  };\n\n  /** 列表项过滤 */\n  private filterList(list: TransferDataItem[], keyword: string): TransferDataItem[] {\n    if (!keyword) return list;\n    const lower = keyword.toLowerCase();\n    return list.filter((item) => item.title.toLowerCase().includes(lower));\n  }\n\n  private renderList = (\n    list: TransferDataItem[],\n    title: string,\n    filterValue: string,\n    onFilter: (e: Event) => void,\n  ) => {\n    const filteredList = this.filterList(list, filterValue);\n    const selectableKeys = this.getSelectableKeys(list);\n    const selectedCount = selectableKeys.filter((k) => this.isSelected(k)).length;\n    const checkAllState = this.getCheckAllState(list);\n\n    return (\n      <div class={{ 'hb-transfer__panel': true, 'hb-transfer__panel--disabled': this.disabled }}>\n        <div class=\"hb-transfer__panel-header\">\n          <label class=\"hb-transfer__check-all\">\n            <input\n              type=\"checkbox\"\n              class=\"hb-transfer__check-all-input\"\n              checked={checkAllState === 'all'}\n              disabled={this.disabled || selectableKeys.length === 0}\n              onChange={() => this.toggleCheckAll(list)}\n            />\n            <span>{selectedCount > 0 ? `${selectedCount}/` : ''}{selectableKeys.length} 项</span>\n          </label>\n          <span class=\"hb-transfer__panel-title\">{title}</span>\n        </div>\n\n        {this.filterable && (\n          <div class=\"hb-transfer__panel-filter\">\n            <input\n              type=\"text\"\n              class=\"hb-transfer__filter-input\"\n              placeholder=\"请输入搜索内容\"\n              value={filterValue}\n              disabled={this.disabled}\n              onInput={onFilter}\n            />\n          </div>\n        )}\n\n        <div class=\"hb-transfer__panel-body\">\n          {filteredList.length === 0 ? (\n            <div class=\"hb-transfer__empty\">无数据</div>\n          ) : (\n            filteredList.map((item) => (\n              <label\n                class={{\n                  'hb-transfer__item': true,\n                  'hb-transfer__item--checked': this.isSelected(item.key),\n                  'hb-transfer__item--disabled': this.disabled || !!item.disabled,\n                }}\n              >\n                <input\n                  type=\"checkbox\"\n                  class=\"hb-transfer__item-input\"\n                  checked={this.isSelected(item.key)}\n                  disabled={this.disabled || !!item.disabled}\n                  onChange={() => this.toggleItem(item)}\n                />\n                <span class=\"hb-transfer__item-title\">{item.title}</span>\n              </label>\n            ))\n          )}\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    const leftCheckAllState = this.getCheckAllState(this.leftList);\n    const rightCheckAllState = this.getCheckAllState(this.rightList);\n\n    return (\n      <div class={{ 'hb-transfer': true, 'hb-transfer--disabled': this.disabled }}>\n        {this.renderList(\n          this.leftList,\n          this.titles[0],\n          this.leftFilter,\n          (e) => {\n            this.leftFilter = (e.target as HTMLInputElement).value;\n          },\n        )}\n\n        <div class=\"hb-transfer__operations\">\n          <button\n            type=\"button\"\n            class=\"hb-transfer__operation-btn\"\n            disabled={this.disabled || rightCheckAllState === 'none'}\n            onClick={this.moveToLeft}\n            aria-label=\"向左移动\"\n          >\n            ‹\n          </button>\n          <button\n            type=\"button\"\n            class=\"hb-transfer__operation-btn\"\n            disabled={this.disabled || leftCheckAllState === 'none'}\n            onClick={this.moveToRight}\n            aria-label=\"向右移动\"\n          >\n            ›\n          </button>\n        </div>\n\n        {this.renderList(\n          this.rightList,\n          this.titles[1],\n          this.rightFilter,\n          (e) => {\n            this.rightFilter = (e.target as HTMLInputElement).value;\n          },\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}