huibo-ui 0.3.0 → 0.5.0

package/dist/components/hb-image-preview.js.map

@@ -1 +1 @@
-{"file":"hb-image-preview.js","mappings":"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","names":[],"sources":["src/components/ImagePreview/image-preview.css?tag=hb-image-preview&encapsulation=shadow","src/components/ImagePreview/ImagePreview.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.hb-image-preview {\n  position: fixed;\n  inset: 0;\n  z-index: var(--hb-z-index-modal-mask, 2000);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--hb-color-bg-mask, rgba(0, 0, 0, 0.5));\n}\n\n.hb-image-preview__wrapper {\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.hb-image-preview__img {\n  max-width: 90vw;\n  max-height: 90vh;\n  object-fit: contain;\n  user-select: none;\n  transition: transform 0.2s ease;\n  pointer-events: none;\n}\n\n.hb-image-preview__btn {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 44px;\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: 50%;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: var(--hb-color-text-inverse, #ffffff);\n  font-size: 28px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background-color var(--hb-transition-duration, 0.2s) ease;\n}\n\n.hb-image-preview__btn:hover {\n  background-color: rgba(0, 0, 0, 0.6);\n}\n\n.hb-image-preview__btn--prev {\n  left: 24px;\n}\n\n.hb-image-preview__btn--next {\n  right: 24px;\n}\n\n.hb-image-preview__toolbar {\n  position: absolute;\n  bottom: 32px;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 8px 12px;\n  border-radius: var(--hb-border-radius-base, 4px);\n  background-color: rgba(0, 0, 0, 0.5);\n  color: var(--hb-color-text-inverse, #ffffff);\n}\n\n.hb-image-preview__tool {\n  min-width: 32px;\n  height: 32px;\n  padding: 0 8px;\n  border: none;\n  border-radius: var(--hb-border-radius-sm, 2px);\n  background: transparent;\n  color: var(--hb-color-text-inverse, #ffffff);\n  font-size: 16px;\n  cursor: pointer;\n  transition: background-color var(--hb-transition-duration, 0.2s) ease;\n}\n\n.hb-image-preview__tool:hover {\n  background-color: rgba(255, 255, 255, 0.15);\n}\n\n.hb-image-preview__tool-label {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 48px;\n  padding: 0 4px;\n  font-size: 13px;\n  color: var(--hb-color-text-inverse, #ffffff);\n}\n\n.hb-image-preview__close {\n  position: absolute;\n  top: 24px;\n  right: 24px;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: 50%;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: var(--hb-color-text-inverse, #ffffff);\n  font-size: 28px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background-color var(--hb-transition-duration, 0.2s) ease;\n}\n\n.hb-image-preview__close:hover {\n  background-color: rgba(0, 0, 0, 0.6);\n}\n","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\n\nexport interface ImagePreviewChangeDetail {\n  src: string;\n  index: number;\n}\n\n/**\n * ImagePreview 图片预览组件\n * 点击图片后展示大图，支持缩放、旋转、多图切换\n */\n@Component({\n  tag: 'hb-image-preview',\n  styleUrl: 'image-preview.css',\n  shadow: true,\n})\nexport class ImagePreview {\n  @Element() el: HTMLElement;\n\n  /** 是否显示预览（受控，可双向） */\n  @Prop({ mutable: true }) modelValue: boolean = false;\n\n  /** 单图源（srcList 为空时使用） */\n  @Prop() src: string = '';\n\n  /** 多图源列表 */\n  @Prop() srcList: string[] = [];\n\n  /** 多图当前索引 */\n  @Prop({ mutable: true }) current: number = 0;\n\n  /** 单次缩放步长 */\n  @Prop() zoomStep: number = 0.2;\n\n  /** 最小缩放比例 */\n  @Prop() minZoom: number = 0.5;\n\n  /** 最大缩放比例 */\n  @Prop() maxZoom: number = 3;\n\n  /** 关闭事件 */\n  @Event() hbClose: EventEmitter<void>;\n\n  /** 切换事件，detail 为 { src, index } */\n  @Event() hbChange: EventEmitter<ImagePreviewChangeDetail>;\n\n  /** 当前缩放比例 */\n  @State() zoom: number = 1;\n\n  /** 当前旋转角度 */\n  @State() rotate: number = 0;\n\n  private keyDownHandler = (e: KeyboardEvent) => {\n    if (!this.modelValue) return;\n    if (e.key === 'Escape') {\n      this.close();\n    } else if (e.key === 'ArrowLeft') {\n      this.prev();\n    } else if (e.key === 'ArrowRight') {\n      this.next();\n    }\n  };\n\n  @Watch('modelValue')\n  handleVisibleChange(newVal: boolean) {\n    if (newVal) {\n      // 打开时重置缩放与旋转\n      this.zoom = 1;\n      this.rotate = 0;\n      document.addEventListener('keydown', this.keyDownHandler);\n    } else {\n      document.removeEventListener('keydown', this.keyDownHandler);\n    }\n  }\n\n  @Watch('current')\n  handleCurrentChange() {\n    // 切换图片时重置变换\n    this.zoom = 1;\n    this.rotate = 0;\n  }\n\n  componentDidLoad() {\n    if (this.modelValue) {\n      document.addEventListener('keydown', this.keyDownHandler);\n    }\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('keydown', this.keyDownHandler);\n  }\n\n  /** 实际可切换的图片列表 */\n  private get imageList(): string[] {\n    if (this.srcList && this.srcList.length > 0) {\n      return this.srcList;\n    }\n    return this.src ? [this.src] : [];\n  }\n\n  private get currentIndex(): number {\n    const list = this.imageList;\n    if (list.length === 0) return 0;\n    if (this.current < 0) return 0;\n    if (this.current >= list.length) return list.length - 1;\n    return this.current;\n  }\n\n  private get currentSrc(): string {\n    const list = this.imageList;\n    if (list.length === 0) return '';\n    return list[this.currentIndex] || '';\n  }\n\n  private get isMulti(): boolean {\n    return this.imageList.length > 1;\n  }\n\n  private close = () => {\n    this.modelValue = false;\n    this.hbClose.emit();\n  };\n\n  private emitChange() {\n    this.hbChange.emit({ src: this.currentSrc, index: this.currentIndex });\n  }\n\n  private next = () => {\n    const list = this.imageList;\n    if (list.length <= 1) return;\n    this.current = (this.currentIndex + 1) % list.length;\n    this.emitChange();\n  };\n\n  private prev = () => {\n    const list = this.imageList;\n    if (list.length <= 1) return;\n    this.current = (this.currentIndex - 1 + list.length) % list.length;\n    this.emitChange();\n  };\n\n  private zoomIn = () => {\n    const next = Math.min(this.zoom + this.zoomStep, this.maxZoom);\n    this.zoom = Math.round(next * 100) / 100;\n  };\n\n  private zoomOut = () => {\n    const next = Math.max(this.zoom - this.zoomStep, this.minZoom);\n    this.zoom = Math.round(next * 100) / 100;\n  };\n\n  private handleReset = () => {\n    this.zoom = 1;\n    this.rotate = 0;\n  };\n\n  private handleRotateLeft = () => {\n    this.rotate = this.rotate - 90;\n  };\n\n  private handleRotateRight = () => {\n    this.rotate = this.rotate + 90;\n  };\n\n  /** 滚轮缩放 */\n  private handleWheel = (e: WheelEvent) => {\n    // TODO: 平滑缩放 + 图片中心锚点；当前实现为基础步长缩放\n    e.preventDefault();\n    if (e.deltaY < 0) {\n      this.zoomIn();\n    } else {\n      this.zoomOut();\n    }\n  };\n\n  /** 点击遮罩空白处关闭 */\n  private handleOverlayClick = (e: MouseEvent) => {\n    if (e.target === e.currentTarget) {\n      this.close();\n    }\n  };\n\n  private stopAndClose = (e: MouseEvent) => {\n    e.stopPropagation();\n    this.close();\n  };\n\n  render() {\n    if (!this.modelValue) return null;\n\n    const imgStyle = {\n      transform: `scale(${this.zoom}) rotate(${this.rotate}deg)`,\n    };\n\n    return (\n      <div class=\"hb-image-preview\" onClick={this.handleOverlayClick}>\n        <div class=\"hb-image-preview__wrapper\">\n          <img\n            class=\"hb-image-preview__img\"\n            src={this.currentSrc}\n            alt=\"\"\n            style={imgStyle}\n            onWheel={this.handleWheel}\n          />\n        </div>\n\n        {this.isMulti && (\n          <button\n            type=\"button\"\n            class=\"hb-image-preview__btn hb-image-preview__btn--prev\"\n            onClick={this.prev}\n            aria-label=\"上一张\"\n          >\n            ‹\n          </button>\n        )}\n        {this.isMulti && (\n          <button\n            type=\"button\"\n            class=\"hb-image-preview__btn hb-image-preview__btn--next\"\n            onClick={this.next}\n            aria-label=\"下一张\"\n          >\n            ›\n          </button>\n        )}\n\n        <div class=\"hb-image-preview__toolbar\" onClick={(e) => e.stopPropagation()}>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.zoomOut} aria-label=\"缩小\">\n            －\n          </button>\n          <span class=\"hb-image-preview__tool-label\">{Math.round(this.zoom * 100)}%</span>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.zoomIn} aria-label=\"放大\">\n            ＋\n          </button>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.handleRotateLeft} aria-label=\"左旋\">\n            ↺\n          </button>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.handleRotateRight} aria-label=\"右旋\">\n            ↻\n          </button>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.handleReset} aria-label=\"重置\">\n            ⟲\n          </button>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.stopAndClose} aria-label=\"关闭\">\n            ✕\n          </button>\n        </div>\n\n        <button\n          type=\"button\"\n          class=\"hb-image-preview__close\"\n          onClick={this.stopAndClose}\n          aria-label=\"关闭\"\n        >\n          ×\n        </button>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"hb-image-preview.js","mappings":"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","names":[],"sources":["src/components/ImagePreview/image-preview.css?tag=hb-image-preview&encapsulation=shadow","src/components/ImagePreview/ImagePreview.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.hb-image-preview {\n  position: fixed;\n  inset: 0;\n  z-index: var(--hb-z-index-modal-mask, 2000);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--hb-color-bg-mask, rgba(0, 0, 0, 0.5));\n}\n\n.hb-image-preview__wrapper {\n  max-width: 90vw;\n  max-height: 90vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.hb-image-preview__img {\n  max-width: 90vw;\n  max-height: 90vh;\n  object-fit: contain;\n  user-select: none;\n  transition: transform 0.2s ease;\n  pointer-events: none;\n}\n\n.hb-image-preview__btn {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 44px;\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: 50%;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: var(--hb-color-text-inverse, #ffffff);\n  font-size: 28px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background-color var(--hb-transition-duration, 0.2s) ease;\n}\n\n.hb-image-preview__btn:hover {\n  background-color: rgba(0, 0, 0, 0.6);\n}\n\n.hb-image-preview__btn--prev {\n  left: 24px;\n}\n\n.hb-image-preview__btn--next {\n  right: 24px;\n}\n\n.hb-image-preview__toolbar {\n  position: absolute;\n  bottom: 32px;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 8px 12px;\n  border-radius: var(--hb-border-radius-base, 4px);\n  background-color: rgba(0, 0, 0, 0.5);\n  color: var(--hb-color-text-inverse, #ffffff);\n}\n\n.hb-image-preview__tool {\n  min-width: 32px;\n  height: 32px;\n  padding: 0 8px;\n  border: none;\n  border-radius: var(--hb-border-radius-sm, 2px);\n  background: transparent;\n  color: var(--hb-color-text-inverse, #ffffff);\n  font-size: 16px;\n  cursor: pointer;\n  transition: background-color var(--hb-transition-duration, 0.2s) ease;\n}\n\n.hb-image-preview__tool:hover {\n  background-color: rgba(255, 255, 255, 0.15);\n}\n\n.hb-image-preview__tool-label {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 48px;\n  padding: 0 4px;\n  font-size: 13px;\n  color: var(--hb-color-text-inverse, #ffffff);\n}\n\n.hb-image-preview__close {\n  position: absolute;\n  top: 24px;\n  right: 24px;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: 50%;\n  background-color: rgba(0, 0, 0, 0.4);\n  color: var(--hb-color-text-inverse, #ffffff);\n  font-size: 28px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background-color var(--hb-transition-duration, 0.2s) ease;\n}\n\n.hb-image-preview__close:hover {\n  background-color: rgba(0, 0, 0, 0.6);\n}\n","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\n\nexport interface ImagePreviewChangeDetail {\n  src: string;\n  index: number;\n}\n\n/**\n * ImagePreview 图片预览组件\n * 点击图片后展示大图，支持缩放、旋转、多图切换\n */\n@Component({\n  tag: 'hb-image-preview',\n  styleUrl: 'image-preview.css',\n  shadow: true,\n})\nexport class ImagePreview {\n  @Element() el: HTMLElement;\n\n  /** 是否显示预览（受控，可双向） */\n  @Prop({ mutable: true }) modelValue: boolean = false;\n\n  /** 单图源（srcList 为空时使用） */\n  @Prop() src: string = '';\n\n  /** 多图源列表 */\n  @Prop() srcList: string[] = [];\n\n  /** 多图当前索引 */\n  @Prop({ mutable: true }) current: number = 0;\n\n  /** 单次缩放步长 */\n  @Prop() zoomStep: number = 0.2;\n\n  /** 最小缩放比例 */\n  @Prop() minZoom: number = 0.5;\n\n  /** 最大缩放比例 */\n  @Prop() maxZoom: number = 3;\n\n  /** 关闭事件 */\n  @Event() hbClose: EventEmitter<void>;\n\n  /** 切换事件，detail 为 { src, index } */\n  @Event() hbChange: EventEmitter<ImagePreviewChangeDetail>;\n\n  /** 当前缩放比例 */\n  @State() zoom: number = 1;\n\n  /** 当前旋转角度 */\n  @State() rotate: number = 0;\n\n  private keyDownHandler = (e: KeyboardEvent) => {\n    if (!this.modelValue) return;\n    if (e.key === 'Escape') {\n      this.close();\n    } else if (e.key === 'ArrowLeft') {\n      this.prev();\n    } else if (e.key === 'ArrowRight') {\n      this.next();\n    }\n  };\n\n  @Watch('modelValue')\n  handleVisibleChange(newVal: boolean) {\n    if (newVal) {\n      // 打开时重置缩放与旋转\n      this.zoom = 1;\n      this.rotate = 0;\n      document.addEventListener('keydown', this.keyDownHandler);\n    } else {\n      document.removeEventListener('keydown', this.keyDownHandler);\n    }\n  }\n\n  @Watch('current')\n  handleCurrentChange() {\n    // 切换图片时重置变换\n    this.zoom = 1;\n    this.rotate = 0;\n  }\n\n  componentDidLoad() {\n    if (this.modelValue) {\n      document.addEventListener('keydown', this.keyDownHandler);\n    }\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('keydown', this.keyDownHandler);\n  }\n\n  /** 实际可切换的图片列表 */\n  private get imageList(): string[] {\n    if (this.srcList && this.srcList.length > 0) {\n      return this.srcList;\n    }\n    return this.src ? [this.src] : [];\n  }\n\n  private get currentIndex(): number {\n    const list = this.imageList;\n    if (list.length === 0) return 0;\n    if (this.current < 0) return 0;\n    if (this.current >= list.length) return list.length - 1;\n    return this.current;\n  }\n\n  private get currentSrc(): string {\n    const list = this.imageList;\n    if (list.length === 0) return '';\n    return list[this.currentIndex] || '';\n  }\n\n  private get isMulti(): boolean {\n    return this.imageList.length > 1;\n  }\n\n  private close = () => {\n    this.modelValue = false;\n    this.hbClose.emit();\n  };\n\n  private emitChange() {\n    this.hbChange.emit({ src: this.currentSrc, index: this.currentIndex });\n  }\n\n  private next = () => {\n    const list = this.imageList;\n    if (list.length <= 1) return;\n    this.current = (this.currentIndex + 1) % list.length;\n    this.emitChange();\n  };\n\n  private prev = () => {\n    const list = this.imageList;\n    if (list.length <= 1) return;\n    this.current = (this.currentIndex - 1 + list.length) % list.length;\n    this.emitChange();\n  };\n\n  private zoomIn = () => {\n    const next = Math.min(this.zoom + this.zoomStep, this.maxZoom);\n    this.zoom = Math.round(next * 100) / 100;\n  };\n\n  private zoomOut = () => {\n    const next = Math.max(this.zoom - this.zoomStep, this.minZoom);\n    this.zoom = Math.round(next * 100) / 100;\n  };\n\n  private handleReset = () => {\n    this.zoom = 1;\n    this.rotate = 0;\n  };\n\n  private handleRotateLeft = () => {\n    this.rotate = this.rotate - 90;\n  };\n\n  private handleRotateRight = () => {\n    this.rotate = this.rotate + 90;\n  };\n\n  /**\n   * 滚轮缩放（平滑 + 像素级响应）：\n   * 按 deltaY 的绝对值映射缩放因子（小滚幅小步、大滚幅大步），\n   * 并夹取到 [minZoom, maxZoom]，避免抖动与越界。\n   */\n  private handleWheel = (e: WheelEvent) => {\n    e.preventDefault();\n    // 把 deltaY 映射成指数缩放系数：wheel 越快缩放越激进，但单次不超 zoomStep*2\n    const dir = e.deltaY < 0 ? 1 : -1;\n    const intensity = Math.min(Math.abs(e.deltaY) / 100, 2); // 0~2\n    const factor = 1 + dir * this.zoomStep * Math.max(1, intensity);\n    const next = Math.max(this.minZoom, Math.min(this.zoom * factor, this.maxZoom));\n    // 平滑：小数位保留两位，避免浮点累积误差\n    this.zoom = Math.round(next * 100) / 100;\n  };\n\n  /** 点击遮罩空白处关闭 */\n  private handleOverlayClick = (e: MouseEvent) => {\n    if (e.target === e.currentTarget) {\n      this.close();\n    }\n  };\n\n  private stopAndClose = (e: MouseEvent) => {\n    e.stopPropagation();\n    this.close();\n  };\n\n  render() {\n    if (!this.modelValue) return null;\n\n    const imgStyle = {\n      transform: `scale(${this.zoom}) rotate(${this.rotate}deg)`,\n    };\n\n    return (\n      <div class=\"hb-image-preview\" onClick={this.handleOverlayClick}>\n        <div class=\"hb-image-preview__wrapper\">\n          <img class=\"hb-image-preview__img\" src={this.currentSrc} alt=\"\" style={imgStyle} onWheel={this.handleWheel} />\n        </div>\n\n        {this.isMulti && (\n          <button type=\"button\" class=\"hb-image-preview__btn hb-image-preview__btn--prev\" onClick={this.prev} aria-label=\"上一张\">\n            ‹\n          </button>\n        )}\n        {this.isMulti && (\n          <button type=\"button\" class=\"hb-image-preview__btn hb-image-preview__btn--next\" onClick={this.next} aria-label=\"下一张\">\n            ›\n          </button>\n        )}\n\n        <div class=\"hb-image-preview__toolbar\" onClick={e => e.stopPropagation()}>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.zoomOut} aria-label=\"缩小\">\n            －\n          </button>\n          <span class=\"hb-image-preview__tool-label\">{Math.round(this.zoom * 100)}%</span>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.zoomIn} aria-label=\"放大\">\n            ＋\n          </button>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.handleRotateLeft} aria-label=\"左旋\">\n            ↺\n          </button>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.handleRotateRight} aria-label=\"右旋\">\n            ↻\n          </button>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.handleReset} aria-label=\"重置\">\n            ⟲\n          </button>\n          <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.stopAndClose} aria-label=\"关闭\">\n            ✕\n          </button>\n        </div>\n\n        <button type=\"button\" class=\"hb-image-preview__close\" onClick={this.stopAndClose} aria-label=\"关闭\">\n          ×\n        </button>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/hb-image.js

@@ -20,11 +20,29 @@ const Image = /*@__PURE__*/ proxyCustomElement(class Image extends H {
     loaded = false;
     error = false;
     previewVisible = false;
-    handleLoad = () => { this.loaded = true; };
-    handleError = () => { this.error = true; };
+    /**
+     * 换 src 时重置 loaded/error。
+     * 修复 B5——修复前换 src 不清状态：坏图换好图卡在错误占位（error 不清零），
+     * 好图换坏图 loaded 仍 true 造成短暂状态错乱。
+     */
+    handleSrcChange() {
+        this.loaded = false;
+        this.error = false;
+    }
+    handleLoad = () => {
+        this.loaded = true;
+    };
+    handleError = () => {
+        this.error = true;
+    };
     render() {
-        return (h("div", { key: 'c6ededfba4d6a1d4b9356c1b18dc7b19aa8c8631', class: "hb-image", style: { width: this.width, height: this.height, borderRadius: this.radius } }, !this.error ? (h("img", { src: this.src, alt: this.alt, class: { 'hb-image__inner': true, 'hb-image__inner--loaded': this.loaded }, style: { objectFit: this.fit }, loading: this.lazy ? 'lazy' : undefined, onLoad: this.handleLoad, onError: this.handleError, onClick: () => this.preview && (this.previewVisible = true) })) : (h("div", { class: "hb-image__error" }, "\u56FE\u7247\u52A0\u8F7D\u5931\u8D25")), this.previewVisible && (h("div", { key: 'b32748bc6a54360e9cfab47ee06671f4568bae8c', class: "hb-image__preview", onClick: () => { this.previewVisible = false; } }, h("img", { key: '7bcc5a1f9b34756827fb8566a953296f808febea', src: this.src, alt: this.alt, class: "hb-image__preview-img" })))));
+        return (h("div", { key: 'c9bbb745e78918ca3659138a91e7472911ac4c09', class: "hb-image", style: { width: this.width, height: this.height, borderRadius: this.radius } }, !this.error ? (h("img", { src: this.src, alt: this.alt, class: { 'hb-image__inner': true, 'hb-image__inner--loaded': this.loaded }, style: { objectFit: this.fit }, loading: this.lazy ? 'lazy' : undefined, onLoad: this.handleLoad, onError: this.handleError, onClick: () => this.preview && (this.previewVisible = true) })) : (h("div", { class: "hb-image__error" }, "\u56FE\u7247\u52A0\u8F7D\u5931\u8D25")), this.previewVisible && (h("div", { key: '7d3b00d09c919169eab62ab6f525b2ef2f038a4c', class: "hb-image__preview", onClick: () => {
+                this.previewVisible = false;
+            } }, h("img", { key: '7c05ea33e51493d3a297f0e1c7d3511efae46a6c', src: this.src, alt: this.alt, class: "hb-image__preview-img" })))));
     }
+    static get watchers() { return {
+        "src": ["handleSrcChange"]
+    }; }
     static get style() { return HbImageStyle0; }
 }, [1, "hb-image", {
         "src": [1],
@@ -38,6 +56,8 @@ const Image = /*@__PURE__*/ proxyCustomElement(class Image extends H {
         "loaded": [32],
         "error": [32],
         "previewVisible": [32]
+    }, undefined, {
+        "src": ["handleSrcChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

@@ -1 +1 @@
-{"file":"hb-image.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,usMAAusM,CAAC;AACztM,sBAAe,QAAQ;;MCEV,KAAK;;;;;;IACR,GAAG,GAAW,EAAE,CAAC;IACjB,GAAG,GAAW,EAAE,CAAC;IACjB,KAAK,CAAU;IACf,MAAM,CAAU;IAChB,GAAG,GAAyD,MAAM,CAAC;IACnE,IAAI,GAAY,KAAK,CAAC;IACtB,OAAO,GAAY,KAAK,CAAC;IACzB,MAAM,CAAU;IAEf,MAAM,GAAY,KAAK,CAAC;IACxB,KAAK,GAAY,KAAK,CAAC;IACvB,cAAc,GAAY,KAAK,CAAC;IAEjC,UAAU,GAAG,QAAQ,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAC3C,WAAW,GAAG,QAAQ,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC;IAEnD,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,CAAC,MAAM,EAAE,IAC/F,CAAC,IAAI,CAAC,KAAK,IACV,WACE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAC5B,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,yBAAyB,EAAE,IAAI,CAAC,MAAM,EAAE,EAC1E,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAC9B,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,SAAS,EACvC,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,GAC3D,KAEF,WAAK,KAAK,EAAC,iBAAiB,2CAAa,CAC1C,EACA,IAAI,CAAC,cAAc,KAClB,4DAAK,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,QAAQ,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,EAAE,IAC5E,4DAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,uBAAuB,GAAG,CAC/D,CACP,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Image/image.css?tag=hb-image&encapsulation=shadow","src/components/Image/Image.tsx"],"sourcesContent":[":host { display: inline-block; }\n.hb-image { position: relative; display: inline-flex; overflow: hidden; background: var(--hb-color-fill-quaternary); }\n.hb-image__inner { width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s; }\n.hb-image__inner--loaded { opacity: 1; }\n.hb-image__error { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: var(--hb-font-size-sm); color: var(--hb-color-text-secondary); }\n.hb-image__preview { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 2000; cursor: zoom-out; }\n.hb-image__preview-img { max-width: 90%; max-height: 90%; object-fit: contain; }\n","import { Component, h, Prop, State } from '@stencil/core';\n\n@Component({ tag: 'hb-image', styleUrl: 'image.css', shadow: true })\nexport class Image {\n  @Prop() src: string = '';\n  @Prop() alt: string = '';\n  @Prop() width?: string;\n  @Prop() height?: string;\n  @Prop() fit: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' = 'fill';\n  @Prop() lazy: boolean = false;\n  @Prop() preview: boolean = false;\n  @Prop() radius?: string;\n\n  @State() loaded: boolean = false;\n  @State() error: boolean = false;\n  @State() previewVisible: boolean = false;\n\n  private handleLoad = () => { this.loaded = true; };\n  private handleError = () => { this.error = true; };\n\n  render() {\n    return (\n      <div class=\"hb-image\" style={{ width: this.width, height: this.height, borderRadius: this.radius }}>\n        {!this.error ? (\n          <img\n            src={this.src} alt={this.alt}\n            class={{ 'hb-image__inner': true, 'hb-image__inner--loaded': this.loaded }}\n            style={{ objectFit: this.fit }}\n            loading={this.lazy ? 'lazy' : undefined}\n            onLoad={this.handleLoad}\n            onError={this.handleError}\n            onClick={() => this.preview && (this.previewVisible = true)}\n          />\n        ) : (\n          <div class=\"hb-image__error\">图片加载失败</div>\n        )}\n        {this.previewVisible && (\n          <div class=\"hb-image__preview\" onClick={() => { this.previewVisible = false; }}>\n            <img src={this.src} alt={this.alt} class=\"hb-image__preview-img\" />\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"hb-image.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,usMAAusM,CAAC;AACztM,sBAAe,QAAQ;;MCEV,KAAK;;;;;;IACR,GAAG,GAAW,EAAE,CAAC;IACjB,GAAG,GAAW,EAAE,CAAC;IACjB,KAAK,CAAU;IACf,MAAM,CAAU;IAChB,GAAG,GAAyD,MAAM,CAAC;IACnE,IAAI,GAAY,KAAK,CAAC;IACtB,OAAO,GAAY,KAAK,CAAC;IACzB,MAAM,CAAU;IAEf,MAAM,GAAY,KAAK,CAAC;IACxB,KAAK,GAAY,KAAK,CAAC;IACvB,cAAc,GAAY,KAAK,CAAC;;;;;;IAQzC,eAAe;QACb,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;KACpB;IAEO,UAAU,GAAG;QACnB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB,CAAC;IACM,WAAW,GAAG;QACpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;KACnB,CAAC;IAEF,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,CAAC,MAAM,EAAE,IAC/F,CAAC,IAAI,CAAC,KAAK,IACV,WACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,yBAAyB,EAAE,IAAI,CAAC,MAAM,EAAE,EAC1E,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAC9B,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,SAAS,EACvC,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,GAC3D,KAEF,WAAK,KAAK,EAAC,iBAAiB,2CAAa,CAC1C,EACA,IAAI,CAAC,cAAc,KAClB,4DACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE;gBACP,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B,IAED,4DAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,uBAAuB,GAAG,CAC/D,CACP,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Image/image.css?tag=hb-image&encapsulation=shadow","src/components/Image/Image.tsx"],"sourcesContent":[":host { display: inline-block; }\n.hb-image { position: relative; display: inline-flex; overflow: hidden; background: var(--hb-color-fill-quaternary); }\n.hb-image__inner { width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s; }\n.hb-image__inner--loaded { opacity: 1; }\n.hb-image__error { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: var(--hb-font-size-sm); color: var(--hb-color-text-secondary); }\n.hb-image__preview { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 2000; cursor: zoom-out; }\n.hb-image__preview-img { max-width: 90%; max-height: 90%; object-fit: contain; }\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({ tag: 'hb-image', styleUrl: 'image.css', shadow: true })\nexport class Image {\n  @Prop() src: string = '';\n  @Prop() alt: string = '';\n  @Prop() width?: string;\n  @Prop() height?: string;\n  @Prop() fit: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' = 'fill';\n  @Prop() lazy: boolean = false;\n  @Prop() preview: boolean = false;\n  @Prop() radius?: string;\n\n  @State() loaded: boolean = false;\n  @State() error: boolean = false;\n  @State() previewVisible: boolean = false;\n\n  /**\n   * 换 src 时重置 loaded/error。\n   * 修复 B5——修复前换 src 不清状态：坏图换好图卡在错误占位（error 不清零），\n   * 好图换坏图 loaded 仍 true 造成短暂状态错乱。\n   */\n  @Watch('src')\n  handleSrcChange() {\n    this.loaded = false;\n    this.error = false;\n  }\n\n  private handleLoad = () => {\n    this.loaded = true;\n  };\n  private handleError = () => {\n    this.error = true;\n  };\n\n  render() {\n    return (\n      <div class=\"hb-image\" style={{ width: this.width, height: this.height, borderRadius: this.radius }}>\n        {!this.error ? (\n          <img\n            src={this.src}\n            alt={this.alt}\n            class={{ 'hb-image__inner': true, 'hb-image__inner--loaded': this.loaded }}\n            style={{ objectFit: this.fit }}\n            loading={this.lazy ? 'lazy' : undefined}\n            onLoad={this.handleLoad}\n            onError={this.handleError}\n            onClick={() => this.preview && (this.previewVisible = true)}\n          />\n        ) : (\n          <div class=\"hb-image__error\">图片加载失败</div>\n        )}\n        {this.previewVisible && (\n          <div\n            class=\"hb-image__preview\"\n            onClick={() => {\n              this.previewVisible = false;\n            }}\n          >\n            <img src={this.src} alt={this.alt} class=\"hb-image__preview-img\" />\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/hb-input-number.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-1407a5e8.js';
 
-const inputNumberCss = "/*! 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{--hb-input-number-font-size:14px;--hb-input-number-height:32px;--hb-input-number-border-color:var(--hb-border-color,#dcdfe6);--hb-input-number-border-color-hover:var(--hb-color-primary);--hb-input-number-bg-color:var(--hb-color-white,#fff);display:inline-block;position:relative}.hb-input-number{display:inline-block;position:relative;width:180px}.hb-input-number,.hb-input-number__inner{line-height:var(--hb-input-number-height)}.hb-input-number__inner{-webkit-appearance:none;background-color:var(--hb-input-number-bg-color);border:1px solid var(--hb-input-number-border-color);border-radius:4px;box-sizing:border-box;color:var(--hb-color-text-regular,#606266);display:block;font-size:inherit;height:var(--hb-input-number-height);outline:none;padding:0 50px 0 15px;text-align:left;transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.hb-input-number--without-controls .hb-input-number__inner{padding:0 15px}.hb-input-number--controls-right .hb-input-number__inner{padding:0 15px 0 50px}.hb-input-number__inner:focus,.hb-input-number__inner:hover:not(:disabled){border-color:var(--hb-input-number-border-color-hover)}.hb-input-number__inner:disabled{background-color:var(--hb-fill-color-light,#f5f7fa);border-color:var(--hb-input-number-border-color);color:var(--hb-color-text-disabled,#c0c4cc);cursor:not-allowed}.hb-input-number__decrease,.hb-input-number__increase{align-items:center;background:var(--hb-fill-color-light,#f5f7fa);color:var(--hb-color-text-regular,#606266);cursor:pointer;display:flex;font-size:13px;height:calc(100% - 2px);justify-content:center;position:absolute;text-align:center;top:1px;transition:all .2s;-webkit-user-select:none;user-select:none;width:35px;z-index:1}.hb-input-number__decrease:hover:not(.hb-input-number__decrease--disabled),.hb-input-number__increase:hover:not(.hb-input-number__increase--disabled){color:var(--hb-color-primary)}.hb-input-number__decrease--disabled,.hb-input-number__increase--disabled{color:var(--hb-color-text-disabled,#c0c4cc);cursor:not-allowed}.hb-input-number__increase{border-radius:0 4px 4px 0;right:1px}.hb-input-number__decrease,.hb-input-number__increase{border-left:1px solid var(--hb-input-number-border-color)}.hb-input-number__decrease{border-radius:0;right:36px}.hb-input-number--controls-right .hb-input-number__increase{border-radius:0 4px 4px 0;right:1px}.hb-input-number--controls-right .hb-input-number__decrease{border-radius:0;right:36px}.hb-input-number__controls{background:var(--hb-fill-color-light,#f5f7fa);border-left:1px solid var(--hb-input-number-border-color);border-radius:0 4px 4px 0;height:calc(100% - 2px);position:absolute;right:1px;top:1px;width:35px}.hb-input-number--controls-right .hb-input-number__controls{border-left:none;border-radius:4px 0 0 4px;border-right:1px solid var(--hb-input-number-border-color);left:1px;right:auto}.hb-input-number--controls-right .hb-input-number__controls .hb-input-number__increase{border:none;border-bottom:1px solid var(--hb-input-number-border-color);border-radius:0;position:static}.hb-input-number--controls-right .hb-input-number__controls .hb-input-number__decrease{border:none;border-radius:0 0 0 4px;position:static}.hb-input-number--small{width:150px}.hb-input-number--small .hb-input-number__inner{font-size:12px;height:24px;line-height:24px;padding:0 40px 0 12px}.hb-input-number--large{width:200px}.hb-input-number--large .hb-input-number__inner{font-size:16px;height:40px;line-height:40px;padding:0 55px 0 18px}.hb-input-number--disabled{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 inputNumberCss = "/*! 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{--hb-input-number-font-size:14px;--hb-input-number-height:32px;--hb-input-number-border-color:var(--hb-border-color,#dcdfe6);--hb-input-number-border-color-hover:var(--hb-color-primary);--hb-input-number-bg-color:var(--hb-color-white,#fff);display:inline-block;position:relative}.hb-input-number{display:inline-block;position:relative;width:180px}.hb-input-number,.hb-input-number__inner{line-height:var(--hb-input-number-height)}.hb-input-number__inner{-webkit-appearance:none;background-color:var(--hb-input-number-bg-color);border:1px solid var(--hb-input-number-border-color);border-radius:4px;box-sizing:border-box;color:var(--hb-color-text-regular,#606266);display:block;font-size:inherit;height:var(--hb-input-number-height);outline:none;padding:0 50px 0 15px;text-align:left;transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.hb-input-number--without-controls .hb-input-number__inner{padding:0 15px}.hb-input-number--controls-right .hb-input-number__inner{padding:0 15px 0 50px}.hb-input-number__inner:focus,.hb-input-number__inner:hover:not(:disabled){border-color:var(--hb-input-number-border-color-hover)}.hb-input-number__inner:disabled{background-color:var(--hb-fill-color-light,#f5f7fa);border-color:var(--hb-input-number-border-color);color:var(--hb-color-text-disabled,#c0c4cc);cursor:not-allowed}.hb-input-number__decrease,.hb-input-number__increase{align-items:center;background:var(--hb-fill-color-light,#f5f7fa);border:none;color:var(--hb-color-text-regular,#606266);cursor:pointer;display:flex;font-family:inherit;font-size:13px;height:calc(100% - 2px);justify-content:center;line-height:1;padding:0;position:absolute;text-align:center;top:1px;transition:all .2s;-webkit-user-select:none;user-select:none;width:35px;z-index:1}.hb-input-number__decrease:focus-visible,.hb-input-number__increase:focus-visible{outline:2px solid var(--hb-color-primary,#409eff);outline-offset:-2px}.hb-input-number__decrease:hover:not(.hb-input-number__decrease--disabled),.hb-input-number__increase:hover:not(.hb-input-number__increase--disabled){color:var(--hb-color-primary)}.hb-input-number__decrease--disabled,.hb-input-number__increase--disabled{color:var(--hb-color-text-disabled,#c0c4cc);cursor:not-allowed}.hb-input-number__increase{border-radius:0 4px 4px 0;right:1px}.hb-input-number__decrease,.hb-input-number__increase{border-left:1px solid var(--hb-input-number-border-color)}.hb-input-number__decrease{border-radius:0;right:36px}.hb-input-number--controls-right .hb-input-number__increase{border-radius:0 4px 4px 0;right:1px}.hb-input-number--controls-right .hb-input-number__decrease{border-radius:0;right:36px}.hb-input-number__controls{background:var(--hb-fill-color-light,#f5f7fa);border-left:1px solid var(--hb-input-number-border-color);border-radius:0 4px 4px 0;height:calc(100% - 2px);position:absolute;right:1px;top:1px;width:35px}.hb-input-number--controls-right .hb-input-number__controls{border-left:none;border-radius:4px 0 0 4px;border-right:1px solid var(--hb-input-number-border-color);left:1px;right:auto}.hb-input-number--controls-right .hb-input-number__controls .hb-input-number__increase{border:none;border-bottom:1px solid var(--hb-input-number-border-color);border-radius:0;position:static}.hb-input-number--controls-right .hb-input-number__controls .hb-input-number__decrease{border:none;border-radius:0 0 0 4px;position:static}.hb-input-number--small{width:150px}.hb-input-number--small .hb-input-number__inner{font-size:12px;height:24px;line-height:24px;padding:0 40px 0 12px}.hb-input-number--large{width:200px}.hb-input-number--large .hb-input-number__inner{font-size:16px;height:40px;line-height:40px;padding:0 55px 0 18px}.hb-input-number--disabled{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 HbInputNumberStyle0 = inputNumberCss;
 
 const InputNumber = /*@__PURE__*/ proxyCustomElement(class InputNumber extends H {
@@ -136,25 +136,25 @@ const InputNumber = /*@__PURE__*/ proxyCustomElement(class InputNumber extends H
         this.hbChange.emit(newValue);
     };
     render() {
-        return (h("div", { key: '490fe763a00f34486cbbe6502204433071a863eb', class: {
+        return (h("div", { key: 'cf809c8e0c9c722a4be473a3455626f58aab40d9', class: {
                 'hb-input-number': true,
                 [`hb-input-number--${this.size}`]: true,
                 'hb-input-number--disabled': this.disabled,
                 'hb-input-number--controls-right': this.controlsPosition === 'right',
                 'hb-input-number--without-controls': !this.controls,
-            } }, this.controls && this.controlsPosition !== 'right' && (h("span", { key: 'a43a038a8914dbff0c8b9759c04c74fa791f2e6c', class: {
+            } }, this.controls && this.controlsPosition !== 'right' && (h("button", { key: 'b97e5a774d7747fa61ee59650517ab0f64167dda', type: "button", class: {
                 'hb-input-number__decrease': true,
                 'hb-input-number__decrease--disabled': this.currentValue <= this.min,
-            }, onClick: this.decrease }, "\u2212")), h("input", { key: '83a7bb1d73a709e92f31044396fdb73daed77ea9', type: "number", id: this.inputId, name: this.name, class: "hb-input-number__inner", value: this.currentValue, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, onInput: this.handleInput, onChange: this.handleChange }), this.controls && this.controlsPosition === 'right' && (h("span", { key: 'e202c7b06c991550eb9a5cae441ead7d82231b0f', class: "hb-input-number__controls" }, h("span", { key: '876db137bb4539e93a1f7ccb08a2fb754722a7bf', class: {
+            }, "aria-label": "\u51CF\u5C11", "aria-disabled": this.currentValue <= this.min || this.disabled, disabled: this.currentValue <= this.min || this.disabled, onClick: this.decrease }, "\u2212")), h("input", { key: '3b5357639f8b3676bb4de27dd67297288020a97f', type: "number", id: this.inputId, name: this.name, class: "hb-input-number__inner", value: this.currentValue, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, onInput: this.handleInput, onChange: this.handleChange }), this.controls && this.controlsPosition === 'right' && (h("span", { key: '00f8a845f5226999d02914ba6e62a29d24f1a26f', class: "hb-input-number__controls" }, h("button", { key: '886db946083adb10bdf8312dc985194b872000c4', type: "button", class: {
                 'hb-input-number__increase': true,
                 'hb-input-number__increase--disabled': this.currentValue >= this.max,
-            }, onClick: this.increase }, "+"), h("span", { key: '98acd918f10a7f8d3c399aa60677eac231be503b', class: {
+            }, "aria-label": "\u589E\u52A0", "aria-disabled": this.currentValue >= this.max || this.disabled, disabled: this.currentValue >= this.max || this.disabled, onClick: this.increase }, "+"), h("button", { key: '9c9b8d9fa6871e354a38bd5691d0a01b0b87cf9a', type: "button", class: {
                 'hb-input-number__decrease': true,
                 'hb-input-number__decrease--disabled': this.currentValue <= this.min,
-            }, onClick: this.decrease }, "\u2212"))), this.controls && this.controlsPosition !== 'right' && (h("span", { key: '4befdfc2a0d7ac3af63027f0947f27d866fbe158', class: {
+            }, "aria-label": "\u51CF\u5C11", "aria-disabled": this.currentValue <= this.min || this.disabled, disabled: this.currentValue <= this.min || this.disabled, onClick: this.decrease }, "\u2212"))), this.controls && this.controlsPosition !== 'right' && (h("button", { key: 'c32d05810f4c0d9cd660483f45aac0f0f7ac48a5', type: "button", class: {
                 'hb-input-number__increase': true,
                 'hb-input-number__increase--disabled': this.currentValue >= this.max,
-            }, onClick: this.increase }, "+"))));
+            }, "aria-label": "\u589E\u52A0", "aria-disabled": this.currentValue >= this.max || this.disabled, disabled: this.currentValue >= this.max || this.disabled, onClick: this.increase }, "+"))));
     }
     static get watchers() { return {
         "modelValue": ["handleModelValueChange"]

package/dist/components/hb-input-number.js.map

@@ -1 +1 @@
-{"file":"hb-input-number.js","mappings":"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","names":[],"sources":["src/components/InputNumber/input-number.css?tag=hb-input-number&encapsulation=shadow","src/components/InputNumber/InputNumber.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n  --hb-input-number-font-size: 14px;\n  --hb-input-number-height: 32px;\n  --hb-input-number-border-color: var(--hb-border-color, #dcdfe6);\n  --hb-input-number-border-color-hover: var(--hb-color-primary);\n  --hb-input-number-bg-color: var(--hb-color-white, #ffffff);\n}\n\n.hb-input-number {\n  position: relative;\n  display: inline-block;\n  width: 180px;\n  line-height: var(--hb-input-number-height);\n}\n\n.hb-input-number__inner {\n  -webkit-appearance: none;\n  background-color: var(--hb-input-number-bg-color);\n  border: 1px solid var(--hb-input-number-border-color);\n  border-radius: 4px;\n  box-sizing: border-box;\n  color: var(--hb-color-text-regular, #606266);\n  display: block;\n  font-size: inherit;\n  height: var(--hb-input-number-height);\n  line-height: var(--hb-input-number-height);\n  outline: none;\n  padding: 0 50px 0 15px;\n  text-align: left;\n  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  width: 100%;\n}\n\n.hb-input-number--without-controls .hb-input-number__inner {\n  padding: 0 15px;\n}\n\n.hb-input-number--controls-right .hb-input-number__inner {\n  padding: 0 15px 0 50px;\n}\n\n.hb-input-number__inner:hover:not(:disabled) {\n  border-color: var(--hb-input-number-border-color-hover);\n}\n\n.hb-input-number__inner:focus {\n  border-color: var(--hb-input-number-border-color-hover);\n}\n\n.hb-input-number__inner:disabled {\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n  border-color: var(--hb-input-number-border-color);\n  color: var(--hb-color-text-disabled, #c0c4cc);\n  cursor: not-allowed;\n}\n\n.hb-input-number__increase,\n.hb-input-number__decrease {\n  position: absolute;\n  z-index: 1;\n  top: 1px;\n  width: 35px;\n  height: calc(100% - 2px);\n  text-align: center;\n  background: var(--hb-fill-color-light, #f5f7fa);\n  color: var(--hb-color-text-regular, #606266);\n  cursor: pointer;\n  font-size: 13px;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s;\n}\n\n.hb-input-number__increase:hover:not(.hb-input-number__increase--disabled),\n.hb-input-number__decrease:hover:not(.hb-input-number__decrease--disabled) {\n  color: var(--hb-color-primary);\n}\n\n.hb-input-number__increase--disabled,\n.hb-input-number__decrease--disabled {\n  color: var(--hb-color-text-disabled, #c0c4cc);\n  cursor: not-allowed;\n}\n\n.hb-input-number__increase {\n  right: 1px;\n  border-radius: 0 4px 4px 0;\n  border-left: 1px solid var(--hb-input-number-border-color);\n}\n\n.hb-input-number__decrease {\n  right: 36px;\n  border-radius: 0;\n  border-left: 1px solid var(--hb-input-number-border-color);\n}\n\n.hb-input-number--controls-right .hb-input-number__increase {\n  right: 1px;\n  border-radius: 0 4px 4px 0;\n}\n\n.hb-input-number--controls-right .hb-input-number__decrease {\n  right: 36px;\n  border-radius: 0;\n}\n\n.hb-input-number__controls {\n  position: absolute;\n  right: 1px;\n  top: 1px;\n  width: 35px;\n  height: calc(100% - 2px);\n  border-left: 1px solid var(--hb-input-number-border-color);\n  border-radius: 0 4px 4px 0;\n  background: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-input-number--controls-right .hb-input-number__controls {\n  left: 1px;\n  right: auto;\n  border-left: none;\n  border-right: 1px solid var(--hb-input-number-border-color);\n  border-radius: 4px 0 0 4px;\n}\n\n.hb-input-number--controls-right .hb-input-number__controls .hb-input-number__increase {\n  position: static;\n  border: none;\n  border-bottom: 1px solid var(--hb-input-number-border-color);\n  border-radius: 0;\n}\n\n.hb-input-number--controls-right .hb-input-number__controls .hb-input-number__decrease {\n  position: static;\n  border: none;\n  border-radius: 0 0 0 4px;\n}\n\n.hb-input-number--small {\n  width: 150px;\n}\n\n.hb-input-number--small .hb-input-number__inner {\n  height: 24px;\n  line-height: 24px;\n  font-size: 12px;\n  padding: 0 40px 0 12px;\n}\n\n.hb-input-number--large {\n  width: 200px;\n}\n\n.hb-input-number--large .hb-input-number__inner {\n  height: 40px;\n  line-height: 40px;\n  font-size: 16px;\n  padding: 0 55px 0 18px;\n}\n\n.hb-input-number--disabled {\n  cursor: not-allowed;\n}\n\n","import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n/**\n * InputNumber 数字输入框组件\n * 仅允许输入标准的数字值，可定义范围\n */\n@Component({\n  tag: 'hb-input-number',\n  styleUrl: 'input-number.css',\n  shadow: true,\n})\nexport class InputNumber {\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: number = 0;\n\n  /**\n   * 计数器尺寸\n   */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否只读\n   * @default false\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * 最小值\n   * @default -Infinity\n   */\n  @Prop() min: number = -Infinity;\n\n  /**\n   * 最大值\n   * @default Infinity\n   */\n  @Prop() max: number = Infinity;\n\n  /**\n   * 计数器步长\n   * @default 1\n   */\n  @Prop() step: number = 1;\n\n  /**\n   * 精度\n   */\n  @Prop() precision?: number;\n\n  /**\n   * 是否只能输入 step 的倍数\n   * @default false\n   */\n  @Prop() stepStrictly: boolean = false;\n\n  /**\n   * 是否使用控制按钮\n   * @default true\n   */\n  @Prop() controls: boolean = true;\n\n  /**\n   * 控制按钮位置\n   */\n  @Prop() controlsPosition: '' | 'right' = '';\n\n  /**\n   * 原生 name 属性\n   */\n  @Prop() name?: string;\n\n  /**\n   * 原生 id 属性\n   */\n  @Prop() inputId?: string;\n\n  /**\n   * 原生 placeholder 属性\n   */\n  @Prop() placeholder?: string;\n\n  @State() currentValue: number = 0;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<number>;\n\n  /**\n   * 输入事件\n   */\n  @Event() hbInput: EventEmitter<number>;\n\n  componentDidLoad() {\n    this.currentValue = this.modelValue;\n  }\n\n  /** 受控模式：外部修改 modelValue 时同步内部 currentValue，保证 UI 与值一致 */\n  @Watch('modelValue')\n  handleModelValueChange() {\n    this.currentValue = this.modelValue;\n  }\n\n  private formatValue(value: number): number {\n    if (this.precision !== undefined) {\n      return Number(value.toFixed(this.precision));\n    }\n    return value;\n  }\n\n  private clampValue(value: number): number {\n    let clamped = Math.max(this.min, Math.min(this.max, value));\n    \n    if (this.stepStrictly) {\n      const step = this.step;\n      clamped = Math.round(clamped / step) * step;\n    }\n    \n    return this.formatValue(clamped);\n  }\n\n  private handleInput = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    const value = parseFloat(target.value);\n    \n    if (isNaN(value)) {\n      this.currentValue = this.min;\n    } else {\n      this.currentValue = this.clampValue(value);\n    }\n    \n    this.modelValue = this.currentValue;\n    this.hbInput.emit(this.currentValue);\n  };\n\n  private handleChange = () => {\n    this.hbChange.emit(this.currentValue);\n  };\n\n  private increase = () => {\n    if (this.disabled || this.readonly) return;\n    const newValue = this.clampValue(this.currentValue + this.step);\n    this.currentValue = newValue;\n    this.modelValue = newValue;\n    this.hbChange.emit(newValue);\n  };\n\n  private decrease = () => {\n    if (this.disabled || this.readonly) return;\n    const newValue = this.clampValue(this.currentValue - this.step);\n    this.currentValue = newValue;\n    this.modelValue = newValue;\n    this.hbChange.emit(newValue);\n  };\n\n  render() {\n    return (\n      <div\n        class={{\n          'hb-input-number': true,\n          [`hb-input-number--${this.size}`]: true,\n          'hb-input-number--disabled': this.disabled,\n          'hb-input-number--controls-right': this.controlsPosition === 'right',\n          'hb-input-number--without-controls': !this.controls,\n        }}\n      >\n        {this.controls && this.controlsPosition !== 'right' && (\n          <span\n            class={{\n              'hb-input-number__decrease': true,\n              'hb-input-number__decrease--disabled': this.currentValue <= this.min,\n            }}\n            onClick={this.decrease}\n          >\n            −\n          </span>\n        )}\n        <input\n          type=\"number\"\n          id={this.inputId}\n          name={this.name}\n          class=\"hb-input-number__inner\"\n          value={this.currentValue}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          placeholder={this.placeholder}\n          min={this.min}\n          max={this.max}\n          step={this.step}\n          onInput={this.handleInput}\n          onChange={this.handleChange}\n        />\n        {this.controls && this.controlsPosition === 'right' && (\n          <span class=\"hb-input-number__controls\">\n            <span\n              class={{\n                'hb-input-number__increase': true,\n                'hb-input-number__increase--disabled': this.currentValue >= this.max,\n              }}\n              onClick={this.increase}\n            >\n              +\n            </span>\n            <span\n              class={{\n                'hb-input-number__decrease': true,\n                'hb-input-number__decrease--disabled': this.currentValue <= this.min,\n              }}\n              onClick={this.decrease}\n            >\n              −\n            </span>\n          </span>\n        )}\n        {this.controls && this.controlsPosition !== 'right' && (\n          <span\n            class={{\n              'hb-input-number__increase': true,\n              'hb-input-number__increase--disabled': this.currentValue >= this.max,\n            }}\n            onClick={this.increase}\n          >\n            +\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"hb-input-number.js","mappings":"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","names":[],"sources":["src/components/InputNumber/input-number.css?tag=hb-input-number&encapsulation=shadow","src/components/InputNumber/InputNumber.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n  --hb-input-number-font-size: 14px;\n  --hb-input-number-height: 32px;\n  --hb-input-number-border-color: var(--hb-border-color, #dcdfe6);\n  --hb-input-number-border-color-hover: var(--hb-color-primary);\n  --hb-input-number-bg-color: var(--hb-color-white, #ffffff);\n}\n\n.hb-input-number {\n  position: relative;\n  display: inline-block;\n  width: 180px;\n  line-height: var(--hb-input-number-height);\n}\n\n.hb-input-number__inner {\n  -webkit-appearance: none;\n  background-color: var(--hb-input-number-bg-color);\n  border: 1px solid var(--hb-input-number-border-color);\n  border-radius: 4px;\n  box-sizing: border-box;\n  color: var(--hb-color-text-regular, #606266);\n  display: block;\n  font-size: inherit;\n  height: var(--hb-input-number-height);\n  line-height: var(--hb-input-number-height);\n  outline: none;\n  padding: 0 50px 0 15px;\n  text-align: left;\n  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  width: 100%;\n}\n\n.hb-input-number--without-controls .hb-input-number__inner {\n  padding: 0 15px;\n}\n\n.hb-input-number--controls-right .hb-input-number__inner {\n  padding: 0 15px 0 50px;\n}\n\n.hb-input-number__inner:hover:not(:disabled) {\n  border-color: var(--hb-input-number-border-color-hover);\n}\n\n.hb-input-number__inner:focus {\n  border-color: var(--hb-input-number-border-color-hover);\n}\n\n.hb-input-number__inner:disabled {\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n  border-color: var(--hb-input-number-border-color);\n  color: var(--hb-color-text-disabled, #c0c4cc);\n  cursor: not-allowed;\n}\n\n.hb-input-number__increase,\n.hb-input-number__decrease {\n  position: absolute;\n  z-index: 1;\n  top: 1px;\n  width: 35px;\n  height: calc(100% - 2px);\n  text-align: center;\n  background: var(--hb-fill-color-light, #f5f7fa);\n  color: var(--hb-color-text-regular, #606266);\n  cursor: pointer;\n  font-size: 13px;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s;\n  /* button 默认样式重置（A1：从 span 改为 button 后需要） */\n  padding: 0;\n  border: none;\n  font-family: inherit;\n  line-height: 1;\n}\n\n.hb-input-number__increase:focus-visible,\n.hb-input-number__decrease:focus-visible {\n  outline: 2px solid var(--hb-color-primary, #409eff);\n  outline-offset: -2px;\n}\n\n.hb-input-number__increase:hover:not(.hb-input-number__increase--disabled),\n.hb-input-number__decrease:hover:not(.hb-input-number__decrease--disabled) {\n  color: var(--hb-color-primary);\n}\n\n.hb-input-number__increase--disabled,\n.hb-input-number__decrease--disabled {\n  color: var(--hb-color-text-disabled, #c0c4cc);\n  cursor: not-allowed;\n}\n\n.hb-input-number__increase {\n  right: 1px;\n  border-radius: 0 4px 4px 0;\n  border-left: 1px solid var(--hb-input-number-border-color);\n}\n\n.hb-input-number__decrease {\n  right: 36px;\n  border-radius: 0;\n  border-left: 1px solid var(--hb-input-number-border-color);\n}\n\n.hb-input-number--controls-right .hb-input-number__increase {\n  right: 1px;\n  border-radius: 0 4px 4px 0;\n}\n\n.hb-input-number--controls-right .hb-input-number__decrease {\n  right: 36px;\n  border-radius: 0;\n}\n\n.hb-input-number__controls {\n  position: absolute;\n  right: 1px;\n  top: 1px;\n  width: 35px;\n  height: calc(100% - 2px);\n  border-left: 1px solid var(--hb-input-number-border-color);\n  border-radius: 0 4px 4px 0;\n  background: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-input-number--controls-right .hb-input-number__controls {\n  left: 1px;\n  right: auto;\n  border-left: none;\n  border-right: 1px solid var(--hb-input-number-border-color);\n  border-radius: 4px 0 0 4px;\n}\n\n.hb-input-number--controls-right .hb-input-number__controls .hb-input-number__increase {\n  position: static;\n  border: none;\n  border-bottom: 1px solid var(--hb-input-number-border-color);\n  border-radius: 0;\n}\n\n.hb-input-number--controls-right .hb-input-number__controls .hb-input-number__decrease {\n  position: static;\n  border: none;\n  border-radius: 0 0 0 4px;\n}\n\n.hb-input-number--small {\n  width: 150px;\n}\n\n.hb-input-number--small .hb-input-number__inner {\n  height: 24px;\n  line-height: 24px;\n  font-size: 12px;\n  padding: 0 40px 0 12px;\n}\n\n.hb-input-number--large {\n  width: 200px;\n}\n\n.hb-input-number--large .hb-input-number__inner {\n  height: 40px;\n  line-height: 40px;\n  font-size: 16px;\n  padding: 0 55px 0 18px;\n}\n\n.hb-input-number--disabled {\n  cursor: not-allowed;\n}\n","import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n/**\n * InputNumber 数字输入框组件\n * 仅允许输入标准的数字值，可定义范围\n */\n@Component({\n  tag: 'hb-input-number',\n  styleUrl: 'input-number.css',\n  shadow: true,\n})\nexport class InputNumber {\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: number = 0;\n\n  /**\n   * 计数器尺寸\n   */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否只读\n   * @default false\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * 最小值\n   * @default -Infinity\n   */\n  @Prop() min: number = -Infinity;\n\n  /**\n   * 最大值\n   * @default Infinity\n   */\n  @Prop() max: number = Infinity;\n\n  /**\n   * 计数器步长\n   * @default 1\n   */\n  @Prop() step: number = 1;\n\n  /**\n   * 精度\n   */\n  @Prop() precision?: number;\n\n  /**\n   * 是否只能输入 step 的倍数\n   * @default false\n   */\n  @Prop() stepStrictly: boolean = false;\n\n  /**\n   * 是否使用控制按钮\n   * @default true\n   */\n  @Prop() controls: boolean = true;\n\n  /**\n   * 控制按钮位置\n   */\n  @Prop() controlsPosition: '' | 'right' = '';\n\n  /**\n   * 原生 name 属性\n   */\n  @Prop() name?: string;\n\n  /**\n   * 原生 id 属性\n   */\n  @Prop() inputId?: string;\n\n  /**\n   * 原生 placeholder 属性\n   */\n  @Prop() placeholder?: string;\n\n  @State() currentValue: number = 0;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<number>;\n\n  /**\n   * 输入事件\n   */\n  @Event() hbInput: EventEmitter<number>;\n\n  componentDidLoad() {\n    this.currentValue = this.modelValue;\n  }\n\n  /** 受控模式：外部修改 modelValue 时同步内部 currentValue，保证 UI 与值一致 */\n  @Watch('modelValue')\n  handleModelValueChange() {\n    this.currentValue = this.modelValue;\n  }\n\n  private formatValue(value: number): number {\n    if (this.precision !== undefined) {\n      return Number(value.toFixed(this.precision));\n    }\n    return value;\n  }\n\n  private clampValue(value: number): number {\n    let clamped = Math.max(this.min, Math.min(this.max, value));\n\n    if (this.stepStrictly) {\n      const step = this.step;\n      clamped = Math.round(clamped / step) * step;\n    }\n\n    return this.formatValue(clamped);\n  }\n\n  private handleInput = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    const value = parseFloat(target.value);\n\n    if (isNaN(value)) {\n      this.currentValue = this.min;\n    } else {\n      this.currentValue = this.clampValue(value);\n    }\n\n    this.modelValue = this.currentValue;\n    this.hbInput.emit(this.currentValue);\n  };\n\n  private handleChange = () => {\n    this.hbChange.emit(this.currentValue);\n  };\n\n  private increase = () => {\n    if (this.disabled || this.readonly) return;\n    const newValue = this.clampValue(this.currentValue + this.step);\n    this.currentValue = newValue;\n    this.modelValue = newValue;\n    this.hbChange.emit(newValue);\n  };\n\n  private decrease = () => {\n    if (this.disabled || this.readonly) return;\n    const newValue = this.clampValue(this.currentValue - this.step);\n    this.currentValue = newValue;\n    this.modelValue = newValue;\n    this.hbChange.emit(newValue);\n  };\n\n  render() {\n    return (\n      <div\n        class={{\n          'hb-input-number': true,\n          [`hb-input-number--${this.size}`]: true,\n          'hb-input-number--disabled': this.disabled,\n          'hb-input-number--controls-right': this.controlsPosition === 'right',\n          'hb-input-number--without-controls': !this.controls,\n        }}\n      >\n        {this.controls && this.controlsPosition !== 'right' && (\n          <button\n            type=\"button\"\n            class={{\n              'hb-input-number__decrease': true,\n              'hb-input-number__decrease--disabled': this.currentValue <= this.min,\n            }}\n            aria-label=\"减少\"\n            aria-disabled={this.currentValue <= this.min || this.disabled}\n            disabled={this.currentValue <= this.min || this.disabled}\n            onClick={this.decrease}\n          >\n            −\n          </button>\n        )}\n        <input\n          type=\"number\"\n          id={this.inputId}\n          name={this.name}\n          class=\"hb-input-number__inner\"\n          value={this.currentValue}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          placeholder={this.placeholder}\n          min={this.min}\n          max={this.max}\n          step={this.step}\n          onInput={this.handleInput}\n          onChange={this.handleChange}\n        />\n        {this.controls && this.controlsPosition === 'right' && (\n          <span class=\"hb-input-number__controls\">\n            <button\n              type=\"button\"\n              class={{\n                'hb-input-number__increase': true,\n                'hb-input-number__increase--disabled': this.currentValue >= this.max,\n              }}\n              aria-label=\"增加\"\n              aria-disabled={this.currentValue >= this.max || this.disabled}\n              disabled={this.currentValue >= this.max || this.disabled}\n              onClick={this.increase}\n            >\n              +\n            </button>\n            <button\n              type=\"button\"\n              class={{\n                'hb-input-number__decrease': true,\n                'hb-input-number__decrease--disabled': this.currentValue <= this.min,\n              }}\n              aria-label=\"减少\"\n              aria-disabled={this.currentValue <= this.min || this.disabled}\n              disabled={this.currentValue <= this.min || this.disabled}\n              onClick={this.decrease}\n            >\n              −\n            </button>\n          </span>\n        )}\n        {this.controls && this.controlsPosition !== 'right' && (\n          <button\n            type=\"button\"\n            class={{\n              'hb-input-number__increase': true,\n              'hb-input-number__increase--disabled': this.currentValue >= this.max,\n            }}\n            aria-label=\"增加\"\n            aria-disabled={this.currentValue >= this.max || this.disabled}\n            disabled={this.currentValue >= this.max || this.disabled}\n            onClick={this.increase}\n          >\n            +\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/hb-input-tag.js

@@ -125,7 +125,7 @@ const InputTag = /*@__PURE__*/ proxyCustomElement(class InputTag extends H {
         this.hbChange.emit([]);
     };
     render() {
-        return (h("div", { key: '8623f46b1c4b3a6fbc2f3e1238695d34f08eac16', class: {
+        return (h("div", { key: 'eb9c7afe898b95d3b08c068921f50b4848d78ada', class: {
                 'hb-input-tag': true,
                 [`hb-input-tag--${this.size}`]: true,
                 'hb-input-tag--disabled': this.disabled,
@@ -133,7 +133,7 @@ const InputTag = /*@__PURE__*/ proxyCustomElement(class InputTag extends H {
             }, style: this.width ? { width: this.width } : undefined }, this.modelValue.map((tag) => (h("span", { class: {
                 'hb-input-tag__tag': true,
                 [`hb-input-tag__tag--${this.type}`]: !!this.type,
-            } }, h("span", { class: "hb-input-tag__tag-text" }, tag), this.closable && (h("span", { class: "hb-input-tag__tag-close", onClick: () => this.removeTag(tag) }, "\u00D7"))))), this.inputVisible && (!this.max || this.modelValue.length < this.max) && (h("input", { key: '16c0936153b04ffb0ad4949f66c7994470b7fb91', ref: (el) => (this.inputRef = el), type: "text", class: "hb-input-tag__input", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, maxlength: this.maxlength, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur })), this.clearable && this.modelValue.length > 0 && !this.disabled && (h("span", { key: '9995f3650302013f402f8bd3878c5ce974dfbc00', class: "hb-input-tag__clear", onClick: this.handleClearAll }, "\u00D7"))));
+            } }, h("span", { class: "hb-input-tag__tag-text" }, tag), this.closable && (h("span", { class: "hb-input-tag__tag-close", onClick: () => this.removeTag(tag) }, "\u00D7"))))), this.inputVisible && (!this.max || this.modelValue.length < this.max) && (h("input", { key: '4f26ff131300b6afbb6278a8066e33c16197990f', ref: (el) => (this.inputRef = el), type: "text", class: "hb-input-tag__input", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, maxlength: this.maxlength, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur })), this.clearable && this.modelValue.length > 0 && !this.disabled && (h("span", { key: '2d0156cd68a9d9a11e1e8b78160edfa271bcb188', class: "hb-input-tag__clear", onClick: this.handleClearAll }, "\u00D7"))));
     }
     static get style() { return HbInputTagStyle0; }
 }, [1, "hb-input-tag", {

package/dist/components/hb-input.js

@@ -1,4 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-1407a5e8.js';
+import { a as activationClickHandler } from './p-00aa34c8.js';
 
 /**
  * 表单输入组件共享基础
@@ -48,7 +49,7 @@ function sizeClassMap(base, size) {
     return { [base]: true, [buildSizeClass(base, size)]: true };
 }
 
-const inputCss = "/*! 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{.resize{resize:both}.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{--hb-input-font-size:14px;--hb-input-font-size-large:16px;--hb-input-font-size-small:12px;--hb-input-height:32px;--hb-input-height-large:40px;--hb-input-height-small:24px;--hb-input-border-color:var(--hb-border-color,#dcdfe6);--hb-input-border-color-hover:var(--hb-color-primary);--hb-input-bg-color:var(--hb-color-white,#fff);--hb-input-text-color:var(--hb-color-text-regular,#606266);--hb-input-placeholder-color:var(--hb-color-text-placeholder,#c0c4cc);--hb-input-disabled-color:var(--hb-color-text-disabled,#c0c4cc);--hb-input-disabled-bg-color:var(--hb-fill-color-light,#f5f7fa);display:inline-block;position:relative}.hb-input{font-size:var(--hb-input-font-size);position:relative}.hb-input,.hb-input__inner{display:inline-block;width:100%}.hb-input__inner{-webkit-appearance:none;background-color:var(--hb-input-bg-color);background-image:none;border:1px solid var(--hb-input-border-color);border-radius:4px;box-sizing:border-box;color:var(--hb-input-text-color);font-size:inherit;height:var(--hb-input-height);line-height:var(--hb-input-height);outline:none;padding:0 15px;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.hb-input__inner::placeholder{color:var(--hb-input-placeholder-color)}.hb-input__inner:focus,.hb-input__inner:hover:not(:disabled){border-color:var(--hb-input-border-color-hover)}.hb-input__inner:disabled{background-color:var(--hb-input-disabled-bg-color);border-color:var(--hb-input-border-color);color:var(--hb-input-disabled-color);cursor:not-allowed}.hb-input__inner[readonly]{background-color:var(--hb-input-disabled-bg-color);cursor:default}.hb-input--small .hb-input__inner{font-size:var(--hb-input-font-size-small);height:var(--hb-input-height-small);line-height:var(--hb-input-height-small);padding:0 12px}.hb-input--large .hb-input__inner{font-size:var(--hb-input-font-size-large);height:var(--hb-input-height-large);line-height:var(--hb-input-height-large);padding:0 18px}.hb-input__prefix,.hb-input__suffix{align-items:center;color:var(--hb-input-placeholder-color);display:flex;height:100%;position:absolute;text-align:center;top:0;transition:all .3s}.hb-input__prefix{left:5px}.hb-input__suffix{right:5px}.hb-input__suffix-inner{align-items:center;cursor:pointer;display:flex;-webkit-user-select:none;user-select:none}.hb-input__clear{color:var(--hb-input-placeholder-color);font-size:16px;transition:color .2s}.hb-input__clear:hover{color:var(--hb-input-text-color)}.hb-input__password{cursor:pointer;font-size:16px}.hb-input__inner[type=textarea]{line-height:1.5;min-height:60px;padding:5px 15px;resize:vertical;vertical-align:bottom}.hb-input__count{bottom:5px;color:var(--hb-input-placeholder-color);font-size:12px;position:absolute;right:10px}.hb-input__count-inner{background-color:var(--hb-input-bg-color);padding:0 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 inputCss = "/*! 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{.hidden{display:none}.resize{resize:both}.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{--hb-input-font-size:14px;--hb-input-font-size-large:16px;--hb-input-font-size-small:12px;--hb-input-height:32px;--hb-input-height-large:40px;--hb-input-height-small:24px;--hb-input-border-color:var(--hb-border-color,#dcdfe6);--hb-input-border-color-hover:var(--hb-color-primary);--hb-input-bg-color:var(--hb-color-white,#fff);--hb-input-text-color:var(--hb-color-text-regular,#606266);--hb-input-placeholder-color:var(--hb-color-text-placeholder,#c0c4cc);--hb-input-disabled-color:var(--hb-color-text-disabled,#c0c4cc);--hb-input-disabled-bg-color:var(--hb-fill-color-light,#f5f7fa);display:inline-block;position:relative}.hb-input{font-size:var(--hb-input-font-size);position:relative}.hb-input,.hb-input__inner{display:inline-block;width:100%}.hb-input__inner{-webkit-appearance:none;background-color:var(--hb-input-bg-color);background-image:none;border:1px solid var(--hb-input-border-color);border-radius:4px;box-sizing:border-box;color:var(--hb-input-text-color);font-size:inherit;height:var(--hb-input-height);line-height:var(--hb-input-height);outline:none;padding:0 15px;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.hb-input__inner::placeholder{color:var(--hb-input-placeholder-color)}.hb-input__inner:focus,.hb-input__inner:hover:not(:disabled){border-color:var(--hb-input-border-color-hover)}.hb-input__inner:disabled{background-color:var(--hb-input-disabled-bg-color);border-color:var(--hb-input-border-color);color:var(--hb-input-disabled-color);cursor:not-allowed}.hb-input__inner[readonly]{background-color:var(--hb-input-disabled-bg-color);cursor:default}.hb-input--small .hb-input__inner{font-size:var(--hb-input-font-size-small);height:var(--hb-input-height-small);line-height:var(--hb-input-height-small);padding:0 12px}.hb-input--large .hb-input__inner{font-size:var(--hb-input-font-size-large);height:var(--hb-input-height-large);line-height:var(--hb-input-height-large);padding:0 18px}.hb-input__prefix,.hb-input__suffix{align-items:center;color:var(--hb-input-placeholder-color);display:flex;height:100%;position:absolute;text-align:center;top:0;transition:all .3s}.hb-input__prefix{left:5px}.hb-input__suffix{right:5px}.hb-input__suffix-inner{align-items:center;cursor:pointer;display:flex;-webkit-user-select:none;user-select:none}.hb-input__clear{align-items:center;color:var(--hb-input-placeholder-color);display:inline-flex;height:16px;justify-content:center;transition:color .2s;width:16px}.hb-input__clear svg{height:100%;width:100%}.hb-input__clear:hover,.hb-input__password{color:var(--hb-input-text-color)}.hb-input__password{align-items:center;cursor:pointer;display:inline-flex;height:16px;justify-content:center;width:16px}.hb-input__password svg{height:100%;width:100%}.hb-input__inner[type=textarea]{line-height:1.5;min-height:60px;padding:5px 15px;resize:vertical;vertical-align:bottom}.hb-input__count{bottom:5px;color:var(--hb-input-placeholder-color);font-size:12px;position:absolute;right:10px}.hb-input__count-inner{background-color:var(--hb-input-bg-color);padding:0 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 HbInputStyle0 = inputCss;
 
 const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
@@ -176,10 +177,13 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
     handleValueChange() {
         this.inputValue = this.modelValue;
         this.updateClearVisible();
+        // textarea autosize：外部改值也要重算高度
+        this.resizeTextarea();
     }
     componentDidLoad() {
         this.inputValue = this.modelValue;
         this.updateClearVisible();
+        this.resizeTextarea();
     }
     updateClearVisible() {
         this.showClear = isClearVisible({
@@ -189,12 +193,45 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
             hasValue: hasInputValue(this.inputValue),
         });
     }
+    /**
+     * textarea 自适应高度（autosize）。
+     * - autosize=false 或非 textarea：跳过。
+     * - autosize=true：按内容自适应。
+     * - autosize={minRows,maxRows}：在最小/最大行数间夹取。
+     * 算法：先把 height 置 auto 让浏览器按内容重排，再读 scrollHeight，
+     *      减去 padding 后按行高换算成行数，最后按 min/max 夹取并写回 height。
+     */
+    resizeTextarea() {
+        if (this.type !== 'textarea' || !this.autosize)
+            return;
+        const ta = this.inputRef;
+        if (!ta)
+            return;
+        // 行高：优先取计算样式，兜底 22px
+        const computed = typeof window !== 'undefined' ? window.getComputedStyle(ta) : null;
+        const lineHeight = computed && parseFloat(computed.lineHeight) ? parseFloat(computed.lineHeight) : 22;
+        const paddingTop = computed ? parseFloat(computed.paddingTop) || 0 : 0;
+        const paddingBottom = computed ? parseFloat(computed.paddingBottom) || 0 : 0;
+        const opts = typeof this.autosize === 'object' ? this.autosize : {};
+        const minRows = opts.minRows ?? 1;
+        const maxRows = opts.maxRows ?? Infinity;
+        const minH = minRows * lineHeight + paddingTop + paddingBottom;
+        const maxH = maxRows === Infinity ? Infinity : maxRows * lineHeight + paddingTop + paddingBottom;
+        // 先 reset 高度以读取真实内容高度
+        ta.style.height = 'auto';
+        const scrollH = ta.scrollHeight;
+        const clamped = Math.max(minH, Math.min(scrollH, maxH === Infinity ? scrollH : maxH));
+        ta.style.height = `${clamped}px`;
+        // overflow：能滚动时才显示滚动条
+        ta.style.overflowY = scrollH > clamped ? 'auto' : 'hidden';
+    }
     handleInput = (e) => {
         const target = e.target;
         this.inputValue = target.value;
         this.modelValue = target.value;
         this.updateClearVisible();
         this.hbInput.emit(target.value);
+        this.resizeTextarea();
     };
     handleChange = (e) => {
         const target = e.target;
@@ -233,11 +270,11 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends H {
     render() {
         const isTextarea = this.type === 'textarea';
         const InputTag = isTextarea ? 'textarea' : 'input';
-        return (h("div", { key: '22b51bd1c9e0c3086ed167eea57f3b5818685785', class: {
+        return (h("div", { key: '541681cbcc3f5bc9f0d6ed4e8b5d5d41e498f2a1', class: {
                 ...sizeClassMap('hb-input', this.size),
                 'hb-input--disabled': this.disabled,
                 'hb-input--focused': this.isFocused,
-            } }, this.prefixIcon && (h("span", { key: 'ef3b02d947c45ac282814a0e2e4909f8473469eb', class: "hb-input__prefix" }, h("i", { key: '88f95312bf9aa489d5d27a1f701b2eadc794d7cf', class: this.prefixIcon }))), h(InputTag, { key: 'fe5de1f3dcf5441aebb5bcc943c64d59221211d7', ref: (el) => (this.inputRef = el), type: isTextarea ? undefined : this.getInputType(), id: this.inputId, name: this.name, class: "hb-input__inner", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: this.readonly, autocomplete: this.autocomplete, autofocus: this.autofocus, maxlength: this.maxlength, minlength: this.minlength, rows: isTextarea ? this.rows : undefined, style: isTextarea && this.resize ? { resize: this.resize } : undefined, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }), (this.showClear || this.suffixIcon || (this.type === 'password' && this.showPassword)) && (h("span", { key: 'db106e66989483c48171aad758cd5a443ef7670a', class: "hb-input__suffix" }, this.showClear && (h("span", { key: '3fa676f9860aa3018247c9d61bad432afdea4345', class: "hb-input__suffix-inner hb-input__clear", onClick: this.handleClear }, "\u00D7")), this.type === 'password' && this.showPassword && (h("span", { key: '8911301b65aa3435f7f3b933b9b8de1b055c266e', class: "hb-input__suffix-inner hb-input__password", onClick: this.togglePasswordVisible }, this.passwordVisible ? '👁️' : '👁️‍🗨️')), this.suffixIcon && (h("span", { key: '14fa885ec429419525ea5cd550fc7d9cec9f3ee4', class: "hb-input__suffix-inner" }, h("i", { key: '36995c1f4e5d2c258170e7ad8a012e586d905e62', class: this.suffixIcon }))))), this.showWordLimit && this.maxlength && (h("span", { key: '383d7d25fbbb77dad3df3ebbbf4e0b1fc504a4b4', class: "hb-input__count" }, h("span", { key: '564d4a6ac0feae0be61378f52aae3b22872566fb', class: "hb-input__count-inner" }, this.inputValue.length, " / ", this.maxlength)))));
+            } }, this.prefixIcon && (h("span", { key: '5dc6ad6f39d472528e900654de37e13e42e7ea19', class: "hb-input__prefix" }, h("i", { key: '2f28864c2a8d60281eacbfe7c8d65b72e75744f9', class: this.prefixIcon }))), h(InputTag, { key: '2945de32bd65b0eb22849338aa0f4f966ccd0ad5', ref: el => (this.inputRef = el), type: isTextarea ? undefined : this.getInputType(), id: this.inputId, name: this.name, class: "hb-input__inner", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: this.readonly, autocomplete: this.autocomplete, autofocus: this.autofocus, maxlength: this.maxlength, minlength: this.minlength, rows: isTextarea ? this.rows : undefined, style: isTextarea ? { resize: this.autosize ? 'none' : this.resize || 'none' } : undefined, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }), (this.showClear || this.suffixIcon || (this.type === 'password' && this.showPassword)) && (h("span", { key: '0b416f3f55c1b195bcfc7584eb96de3a47373b49', class: "hb-input__suffix" }, this.showClear && (h("span", { key: '4bd40fa20686602e0049f46bfe3a4ba1eedd704c', class: "hb-input__suffix-inner hb-input__clear", role: "button", "aria-label": "\u6E05\u7A7A", tabIndex: 0, onClick: this.handleClear, onKeyDown: activationClickHandler }, h("svg", { key: 'b4494db539d933d0686fad6744589955669ec402', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: '02fde0709695629e71d90104f58d2926ae77ce8b', d: "M6 6l12 12M18 6L6 18" })))), this.type === 'password' && this.showPassword && (h("span", { key: 'fed9e94f2f0491d97a06b2ca4faeb86d4d0b4d79', class: "hb-input__suffix-inner hb-input__password", role: "button", "aria-label": this.passwordVisible ? '隐藏密码' : '显示密码', tabIndex: 0, onClick: this.togglePasswordVisible, onKeyDown: activationClickHandler }, this.passwordVisible ? (h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" }), h("circle", { cx: "12", cy: "12", r: "3" }))) : (h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 3l18 18M10.6 10.6a3 3 0 0 0 4.2 4.2M9.9 5.1A10.6 10.6 0 0 1 12 5c6.5 0 10 7 10 7a17.8 17.8 0 0 1-2.2 3.2M6.1 6.1A17.7 17.7 0 0 0 2 12s3.5 7 10 7a10.5 10.5 0 0 0 4-.8" }))))), this.suffixIcon && (h("span", { key: 'b7c39885d1c3528746855cd852fed3274d055b0f', class: "hb-input__suffix-inner" }, h("i", { key: 'e6952c4362150d3140feffaa51d9c0ac7f00a4b8', class: this.suffixIcon }))))), this.showWordLimit && this.maxlength && (h("span", { key: 'a6d207cc284a30911e3d17cd44bac5e061c20fac', class: "hb-input__count" }, h("span", { key: '52fa6d789528a8079d34fc4082b0532f52ce43ef', class: "hb-input__count-inner" }, this.inputValue.length, " / ", this.maxlength)))));
     }
     static get watchers() { return {
         "modelValue": ["handleValueChange"]

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

@@ -1 +1 @@
-{"file":"hb-input.js","mappings":"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","names":[],"sources":["src/utils/form-input-base.ts","src/components/Input/input.css?tag=hb-input&encapsulation=shadow","src/components/Input/Input.tsx"],"sourcesContent":["/**\n * 表单输入组件共享基础\n * 统一 size / disabled / clearable / modelValue 这一组在 Input / Select / Cascader /\n * DatePicker / InputNumber / TimePicker 等组件中重复出现的包装模式。\n *\n * 设计原则：纯函数 + 类型导出，不引入基类继承，避免 Stencil 装饰器在继承链上的隐式行为。\n * 组件按需 import 对应工具，渲染时调用即可。\n */\n\n/** 组件尺寸（与 Ant Design 对齐，便于迁移） */\nexport type ComponentSize = 'large' | 'default' | 'small';\n\n/** 全部合法尺寸，用于运行期校验 */\nexport const COMPONENT_SIZES: readonly ComponentSize[] = ['large', 'default', 'small'] as const;\n\n/**\n * 表单输入组件共享的 prop 契约。\n * 跨框架消费方（React / Vue / 原生）可据此推断任一表单输入组件的通用能力，\n * 各组件在此基础上扩展自身特有 prop。\n */\nexport interface FormInputProps {\n  /** 绑定值（双向，配合 hbChange 事件） */\n  modelValue: unknown;\n  /** 尺寸 */\n  size?: ComponentSize;\n  /** 是否禁用 */\n  disabled?: boolean;\n  /** 是否只读 */\n  readonly?: boolean;\n  /** 是否可清空 */\n  clearable?: boolean;\n  /** 占位文本 */\n  placeholder?: string;\n}\n\n/**\n * 生成尺寸 class 名：buildSizeClass('hb-input', 'large') -> 'hb-input--large'\n * 用于替代各组件 render 中重复的 `[`hb-input--${this.size}`]: true` 模板字面量。\n */\nexport function buildSizeClass(base: string, size: ComponentSize | undefined): string {\n  const normalized = size && COMPONENT_SIZES.includes(size) ? size : 'default';\n  return `${base}--${normalized}`;\n}\n\n/** 清空按钮可见性判定参数 */\nexport interface ClearVisibleOptions {\n  /** 是否声明了 clearable */\n  clearable: boolean;\n  /** 是否禁用（禁用时不显示） */\n  disabled?: boolean;\n  /** 是否只读（只读时不显示） */\n  readonly?: boolean;\n  /** 当前是否有值（无值时不显示） */\n  hasValue: boolean;\n}\n\n/**\n * 判定清空按钮是否应显示。\n * 抽取自 Input/Select/Cascader 中重复的 `clearable && !disabled && !readonly && hasValue`。\n */\nexport function isClearVisible(options: ClearVisibleOptions): boolean {\n  return Boolean(options.clearable && !options.disabled && !options.readonly && options.hasValue);\n}\n\n/**\n * 判定一个值是否「非空」（用于清空按钮显隐）。\n * 兼容字符串、数字、数组（多选）。\n */\nexport function hasInputValue(value: unknown): boolean {\n  if (value === null || value === undefined) return false;\n  if (typeof value === 'string') return value.length > 0;\n  if (typeof value === 'number') return !Number.isNaN(value);\n  if (Array.isArray(value)) return value.length > 0;\n  return true;\n}\n\n/**\n * 尺寸 class 集合生成器：返回包含 base 与 size class 的对象，可直接展开进 JSX class 绑定。\n * 例：sizeClassMap('hb-input', 'large', this.size) -> { 'hb-input': true, 'hb-input--large': true }\n */\nexport function sizeClassMap(base: string, size: ComponentSize | undefined): Record<string, boolean> {\n  return { [base]: true, [buildSizeClass(base, size)]: true };\n}\n",":host {\n  display: inline-block;\n  position: relative;\n  --hb-input-font-size: 14px;\n  --hb-input-font-size-large: 16px;\n  --hb-input-font-size-small: 12px;\n  --hb-input-height: 32px;\n  --hb-input-height-large: 40px;\n  --hb-input-height-small: 24px;\n  --hb-input-border-color: var(--hb-border-color, #dcdfe6);\n  --hb-input-border-color-hover: var(--hb-color-primary);\n  --hb-input-bg-color: var(--hb-color-white, #ffffff);\n  --hb-input-text-color: var(--hb-color-text-regular, #606266);\n  --hb-input-placeholder-color: var(--hb-color-text-placeholder, #c0c4cc);\n  --hb-input-disabled-color: var(--hb-color-text-disabled, #c0c4cc);\n  --hb-input-disabled-bg-color: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-input {\n  position: relative;\n  font-size: var(--hb-input-font-size);\n  display: inline-block;\n  width: 100%;\n}\n\n.hb-input__inner {\n  -webkit-appearance: none;\n  background-color: var(--hb-input-bg-color);\n  background-image: none;\n  border-radius: 4px;\n  border: 1px solid var(--hb-input-border-color);\n  box-sizing: border-box;\n  color: var(--hb-input-text-color);\n  display: inline-block;\n  font-size: inherit;\n  height: var(--hb-input-height);\n  line-height: var(--hb-input-height);\n  outline: none;\n  padding: 0 15px;\n  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  width: 100%;\n}\n\n.hb-input__inner::placeholder {\n  color: var(--hb-input-placeholder-color);\n}\n\n.hb-input__inner:hover:not(:disabled) {\n  border-color: var(--hb-input-border-color-hover);\n}\n\n.hb-input__inner:focus {\n  border-color: var(--hb-input-border-color-hover);\n}\n\n.hb-input__inner:disabled {\n  background-color: var(--hb-input-disabled-bg-color);\n  border-color: var(--hb-input-border-color);\n  color: var(--hb-input-disabled-color);\n  cursor: not-allowed;\n}\n\n.hb-input__inner[readonly] {\n  background-color: var(--hb-input-disabled-bg-color);\n  cursor: default;\n}\n\n.hb-input--small .hb-input__inner {\n  height: var(--hb-input-height-small);\n  line-height: var(--hb-input-height-small);\n  font-size: var(--hb-input-font-size-small);\n  padding: 0 12px;\n}\n\n.hb-input--large .hb-input__inner {\n  height: var(--hb-input-height-large);\n  line-height: var(--hb-input-height-large);\n  font-size: var(--hb-input-font-size-large);\n  padding: 0 18px;\n}\n\n.hb-input__prefix,\n.hb-input__suffix {\n  position: absolute;\n  top: 0;\n  height: 100%;\n  text-align: center;\n  color: var(--hb-input-placeholder-color);\n  transition: all 0.3s;\n  display: flex;\n  align-items: center;\n}\n\n.hb-input__prefix {\n  left: 5px;\n}\n\n.hb-input__suffix {\n  right: 5px;\n}\n\n.hb-input__suffix-inner {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n}\n\n.hb-input__clear {\n  font-size: 16px;\n  color: var(--hb-input-placeholder-color);\n  transition: color 0.2s;\n}\n\n.hb-input__clear:hover {\n  color: var(--hb-input-text-color);\n}\n\n.hb-input__password {\n  font-size: 16px;\n  cursor: pointer;\n}\n\n.hb-input__inner[type=\"textarea\"] {\n  min-height: 60px;\n  padding: 5px 15px;\n  line-height: 1.5;\n  vertical-align: bottom;\n  resize: vertical;\n}\n\n.hb-input__count {\n  position: absolute;\n  bottom: 5px;\n  right: 10px;\n  font-size: 12px;\n  color: var(--hb-input-placeholder-color);\n}\n\n.hb-input__count-inner {\n  background-color: var(--hb-input-bg-color);\n  padding: 0 4px;\n}\n\n","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\nimport { ComponentSize, hasInputValue, isClearVisible, sizeClassMap } from '../../utils/form-input-base';\n\n/**\n * Input 输入框组件\n * 通过鼠标或键盘输入字符\n */\n@Component({\n  tag: 'hb-input',\n  styleUrl: 'input.css',\n  shadow: true,\n})\nexport class Input {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: string = '';\n\n  /**\n   * 输入框类型\n   */\n  @Prop() type: string = 'text';\n\n  /**\n   * 输入框尺寸\n   */\n  @Prop() size: ComponentSize = 'default';\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否只读\n   * @default false\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * 输入框占位文本\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * 是否可清空\n   * @default false\n   */\n  @Prop() clearable: boolean = false;\n\n  /**\n   * 是否显示密码可见性切换\n   * @default false\n   */\n  @Prop() showPassword: boolean = false;\n\n  /**\n   * 是否显示字数统计\n   * @default false\n   */\n  @Prop() showWordLimit: boolean = false;\n\n  /**\n   * 最大输入长度\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * 最小输入长度\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * 原生 name 属性\n   */\n  @Prop() name?: string;\n\n  /**\n   * 原生 id 属性\n   */\n  @Prop() inputId?: string;\n\n  /**\n   * 原生 autocomplete 属性\n   */\n  @Prop() autocomplete?: string;\n\n  /**\n   * 原生 autofocus 属性\n   */\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * 输入框头部图标\n   */\n  @Prop() prefixIcon?: string;\n\n  /**\n   * 输入框尾部图标\n   */\n  @Prop() suffixIcon?: string;\n\n  /**\n   * 输入框行数，仅 type 为 'textarea' 时有效\n   */\n  @Prop() rows: number = 2;\n\n  /**\n   * 是否自适应内容高度，仅 type 为 'textarea' 时有效\n   */\n  @Prop() autosize: boolean | { minRows?: number; maxRows?: number } = false;\n\n  /**\n   * 是否调整 textarea 大小\n   */\n  @Prop() resize?: 'none' | 'both' | 'horizontal' | 'vertical';\n\n  @State() isFocused: boolean = false;\n  @State() showClear: boolean = false;\n  @State() passwordVisible: boolean = false;\n  @State() inputValue: string = '';\n\n  private inputRef?: HTMLInputElement | HTMLTextAreaElement;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<string>;\n\n  /**\n   * 输入事件\n   */\n  @Event() hbInput: EventEmitter<string>;\n\n  /**\n   * 聚焦事件\n   */\n  @Event() hbFocus: EventEmitter<FocusEvent>;\n\n  /**\n   * 失焦事件\n   */\n  @Event() hbBlur: EventEmitter<FocusEvent>;\n\n  /**\n   * 清空事件\n   */\n  @Event() hbClear: EventEmitter<void>;\n\n  @Watch('modelValue')\n  handleValueChange() {\n    this.inputValue = this.modelValue;\n    this.updateClearVisible();\n  }\n\n  componentDidLoad() {\n    this.inputValue = this.modelValue;\n    this.updateClearVisible();\n  }\n\n  private updateClearVisible() {\n    this.showClear = isClearVisible({\n      clearable: this.clearable,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      hasValue: hasInputValue(this.inputValue),\n    });\n  }\n\n  private handleInput = (e: Event) => {\n    const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n    this.inputValue = target.value;\n    this.modelValue = target.value;\n    this.updateClearVisible();\n    this.hbInput.emit(target.value);\n  };\n\n  private handleChange = (e: Event) => {\n    const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n    this.hbChange.emit(target.value);\n  };\n\n  private handleFocus = (e: FocusEvent) => {\n    this.isFocused = true;\n    this.updateClearVisible();\n    this.hbFocus.emit(e);\n  };\n\n  private handleBlur = (e: FocusEvent) => {\n    this.isFocused = false;\n    this.updateClearVisible();\n    this.hbBlur.emit(e);\n  };\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation();\n    this.inputValue = '';\n    this.modelValue = '';\n    this.updateClearVisible();\n    this.hbClear.emit();\n    this.hbChange.emit('');\n    if (this.inputRef) {\n      this.inputRef.focus();\n    }\n  };\n\n  private togglePasswordVisible = () => {\n    this.passwordVisible = !this.passwordVisible;\n  };\n\n  private getInputType(): string {\n    if (this.type === 'password' && this.showPassword) {\n      return this.passwordVisible ? 'text' : 'password';\n    }\n    return this.type;\n  }\n\n  render() {\n    const isTextarea = this.type === 'textarea';\n    const InputTag = isTextarea ? 'textarea' : 'input';\n\n    return (\n      <div\n        class={{\n          ...sizeClassMap('hb-input', this.size),\n          'hb-input--disabled': this.disabled,\n          'hb-input--focused': this.isFocused,\n        }}\n      >\n        {this.prefixIcon && (\n          <span class=\"hb-input__prefix\">\n            <i class={this.prefixIcon}></i>\n          </span>\n        )}\n        <InputTag\n          ref={(el) => (this.inputRef = el)}\n          type={isTextarea ? undefined : this.getInputType()}\n          id={this.inputId}\n          name={this.name}\n          class=\"hb-input__inner\"\n          placeholder={this.placeholder}\n          value={this.inputValue}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          autocomplete={this.autocomplete}\n          autofocus={this.autofocus}\n          maxlength={this.maxlength}\n          minlength={this.minlength}\n          rows={isTextarea ? this.rows : undefined}\n          style={isTextarea && this.resize ? { resize: this.resize } : undefined}\n          onInput={this.handleInput}\n          onChange={this.handleChange}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        />\n        {(this.showClear || this.suffixIcon || (this.type === 'password' && this.showPassword)) && (\n          <span class=\"hb-input__suffix\">\n            {this.showClear && (\n              <span class=\"hb-input__suffix-inner hb-input__clear\" onClick={this.handleClear}>\n                ×\n              </span>\n            )}\n            {this.type === 'password' && this.showPassword && (\n              <span class=\"hb-input__suffix-inner hb-input__password\" onClick={this.togglePasswordVisible}>\n                {this.passwordVisible ? '👁️' : '👁️‍🗨️'}\n              </span>\n            )}\n            {this.suffixIcon && (\n              <span class=\"hb-input__suffix-inner\">\n                <i class={this.suffixIcon}></i>\n              </span>\n            )}\n          </span>\n        )}\n        {this.showWordLimit && this.maxlength && (\n          <span class=\"hb-input__count\">\n            <span class=\"hb-input__count-inner\">\n              {this.inputValue.length} / {this.maxlength}\n            </span>\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"hb-input.js","mappings":";;;AAAA;;;;;;;;AAYA;AACO,MAAM,eAAe,GAA6B,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAU,CAAC;AAsBhG;;;;SAIgB,cAAc,CAAC,IAAY,EAAE,IAA+B;IAC1E,MAAM,UAAU,GAAG,IAAI,IAAI,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAC7E,OAAO,GAAG,IAAI,KAAK,UAAU,EAAE,CAAC;AAClC,CAAC;AAcD;;;;SAIgB,cAAc,CAAC,OAA4B;IACzD,OAAO,OAAO,CAAC,OAAO,CAAC,SAAS,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,QAAQ,CAAC,CAAC;AAClG,CAAC;AAED;;;;SAIgB,aAAa,CAAC,KAAc;IAC1C,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,KAAK,CAAC;IACxD,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IACvD,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC3D,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAClD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;SAIgB,YAAY,CAAC,IAAY,EAAE,IAA+B;IACxE,OAAO,EAAE,CAAC,IAAI,GAAG,IAAI,EAAE,CAAC,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC;AAC9D;;AClFA,MAAM,QAAQ,GAAG,onRAAonR,CAAC;AACtoR,sBAAe,QAAQ;;MCYV,KAAK;;;;;;;;;;;;;;;IAMS,UAAU,GAAW,EAAE,CAAC;;;;IAKzC,IAAI,GAAW,MAAM,CAAC;;;;IAKtB,IAAI,GAAkB,SAAS,CAAC;;;;;IAMhC,QAAQ,GAAY,KAAK,CAAC;;;;;IAM1B,QAAQ,GAAY,KAAK,CAAC;;;;IAK1B,WAAW,CAAU;;;;;IAMrB,SAAS,GAAY,KAAK,CAAC;;;;;IAM3B,YAAY,GAAY,KAAK,CAAC;;;;;IAM9B,aAAa,GAAY,KAAK,CAAC;;;;IAK/B,SAAS,CAAU;;;;IAKnB,SAAS,CAAU;;;;IAKnB,IAAI,CAAU;;;;IAKd,OAAO,CAAU;;;;IAKjB,YAAY,CAAU;;;;IAKtB,SAAS,GAAY,KAAK,CAAC;;;;IAK3B,UAAU,CAAU;;;;IAKpB,UAAU,CAAU;;;;IAKpB,IAAI,GAAW,CAAC,CAAC;;;;IAKjB,QAAQ,GAAqD,KAAK,CAAC;;;;IAKnE,MAAM,CAA+C;IAEpD,SAAS,GAAY,KAAK,CAAC;IAC3B,SAAS,GAAY,KAAK,CAAC;IAC3B,eAAe,GAAY,KAAK,CAAC;IACjC,UAAU,GAAW,EAAE,CAAC;IAEzB,QAAQ,CAA0C;;;;IAKjD,QAAQ,CAAuB;;;;IAK/B,OAAO,CAAuB;;;;IAK9B,OAAO,CAA2B;;;;IAKlC,MAAM,CAA2B;;;;IAKjC,OAAO,CAAqB;IAGrC,iBAAiB;QACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QAClC,IAAI,CAAC,kBAAkB,EAAE,CAAC;;QAE1B,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAED,gBAAgB;QACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QAClC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAEO,kBAAkB;QACxB,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC;YAC9B,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC;SACzC,CAAC,CAAC;KACJ;;;;;;;;;IAUO,cAAc;QACpB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QACvD,MAAM,EAAE,GAAG,IAAI,CAAC,QAA2C,CAAC;QAC5D,IAAI,CAAC,EAAE;YAAE,OAAO;;QAGhB,MAAM,QAAQ,GAAG,OAAO,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;QACpF,MAAM,UAAU,GAAG,QAAQ,IAAI,UAAU,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC;QACtG,MAAM,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACvE,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE7E,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,QAAQ,KAAK,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;QACpE,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC;QAClC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,QAAQ,CAAC;QAEzC,MAAM,IAAI,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,aAAa,CAAC;QAC/D,MAAM,IAAI,GAAG,OAAO,KAAK,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,aAAa,CAAC;;QAGjG,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QACzB,MAAM,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC;QAChC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,KAAK,QAAQ,GAAG,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC;QACtF,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,OAAO,IAAI,CAAC;;QAEjC,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;KAC5D;IAEO,WAAW,GAAG,CAAC,CAAQ;QAC7B,MAAM,MAAM,GAAG,CAAC,CAAC,MAAgD,CAAC;QAClE,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC;QAC/B,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC;QAC/B,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAChC,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB,CAAC;IAEM,YAAY,GAAG,CAAC,CAAQ;QAC9B,MAAM,MAAM,GAAG,CAAC,CAAC,MAAgD,CAAC;QAClE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KAClC,CAAC;IAEM,WAAW,GAAG,CAAC,CAAa;QAClC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;KACtB,CAAC;IAEM,UAAU,GAAG,CAAC,CAAa;QACjC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;KACrB,CAAC;IAEM,WAAW,GAAG,CAAC,CAAQ;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACvB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;SACvB;KACF,CAAC;IAEM,qBAAqB,GAAG;QAC9B,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;KAC9C,CAAC;IAEM,YAAY;QAClB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,YAAY,EAAE;YACjD,OAAO,IAAI,CAAC,eAAe,GAAG,MAAM,GAAG,UAAU,CAAC;SACnD;QACD,OAAO,IAAI,CAAC,IAAI,CAAC;KAClB;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC;QAC5C,MAAM,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;QAEnD,QACE,4DACE,KAAK,EAAE;gBACL,GAAG,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC;gBACtC,oBAAoB,EAAE,IAAI,CAAC,QAAQ;gBACnC,mBAAmB,EAAE,IAAI,CAAC,SAAS;aACpC,IAEA,IAAI,CAAC,UAAU,KACd,6DAAM,KAAK,EAAC,kBAAkB,IAC5B,0DAAG,KAAK,EAAE,IAAI,CAAC,UAAU,GAAM,CAC1B,CACR,EACD,EAAC,QAAQ,qDACP,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAE,UAAU,GAAG,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,EAClD,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,iBAAiB,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EACxC,KAAK,EAAE,UAAU,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,MAAM,EAAE,GAAG,SAAS,EAC1F,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,GACvB,EACD,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,MACpF,6DAAM,KAAK,EAAC,kBAAkB,IAC3B,IAAI,CAAC,SAAS,KACb,6DAAM,KAAK,EAAC,wCAAwC,EAAC,IAAI,EAAC,QAAQ,gBAAY,cAAI,EAAC,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,EAAE,sBAAsB,IAC1J,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,CACD,CACR,EACA,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,YAAY,KAC5C,6DACE,KAAK,EAAC,2CAA2C,EACjD,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,eAAe,GAAG,MAAM,GAAG,MAAM,EAClD,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,IAAI,CAAC,qBAAqB,EACnC,SAAS,EAAE,sBAAsB,IAEhC,IAAI,CAAC,eAAe,IACnB,WAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAe,CAAC,oBAAiB,OAAO,qBAAiB,OAAO,iBAAa,MAAM,IAC3I,YAAM,CAAC,EAAC,kDAAkD,GAAG,EAC7D,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,GAAG,CAC5B,KAEN,WAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAe,CAAC,oBAAiB,OAAO,qBAAiB,OAAO,iBAAa,MAAM,IAC3I,YAAM,CAAC,EAAC,0KAA0K,GAAG,CACjL,CACP,CACI,CACR,EACA,IAAI,CAAC,UAAU,KACd,6DAAM,KAAK,EAAC,wBAAwB,IAClC,0DAAG,KAAK,EAAE,IAAI,CAAC,UAAU,GAAM,CAC1B,CACR,CACI,CACR,EACA,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,SAAS,KACnC,6DAAM,KAAK,EAAC,iBAAiB,IAC3B,6DAAM,KAAK,EAAC,uBAAuB,IAChC,IAAI,CAAC,UAAU,CAAC,MAAM,SAAK,IAAI,CAAC,SAAS,CACrC,CACF,CACR,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/utils/form-input-base.ts","src/components/Input/input.css?tag=hb-input&encapsulation=shadow","src/components/Input/Input.tsx"],"sourcesContent":["/**\n * 表单输入组件共享基础\n * 统一 size / disabled / clearable / modelValue 这一组在 Input / Select / Cascader /\n * DatePicker / InputNumber / TimePicker 等组件中重复出现的包装模式。\n *\n * 设计原则：纯函数 + 类型导出，不引入基类继承，避免 Stencil 装饰器在继承链上的隐式行为。\n * 组件按需 import 对应工具，渲染时调用即可。\n */\n\n/** 组件尺寸（与 Ant Design 对齐，便于迁移） */\nexport type ComponentSize = 'large' | 'default' | 'small';\n\n/** 全部合法尺寸，用于运行期校验 */\nexport const COMPONENT_SIZES: readonly ComponentSize[] = ['large', 'default', 'small'] as const;\n\n/**\n * 表单输入组件共享的 prop 契约。\n * 跨框架消费方（React / Vue / 原生）可据此推断任一表单输入组件的通用能力，\n * 各组件在此基础上扩展自身特有 prop。\n */\nexport interface FormInputProps {\n  /** 绑定值（双向，配合 hbChange 事件） */\n  modelValue: unknown;\n  /** 尺寸 */\n  size?: ComponentSize;\n  /** 是否禁用 */\n  disabled?: boolean;\n  /** 是否只读 */\n  readonly?: boolean;\n  /** 是否可清空 */\n  clearable?: boolean;\n  /** 占位文本 */\n  placeholder?: string;\n}\n\n/**\n * 生成尺寸 class 名：buildSizeClass('hb-input', 'large') -> 'hb-input--large'\n * 用于替代各组件 render 中重复的 `[`hb-input--${this.size}`]: true` 模板字面量。\n */\nexport function buildSizeClass(base: string, size: ComponentSize | undefined): string {\n  const normalized = size && COMPONENT_SIZES.includes(size) ? size : 'default';\n  return `${base}--${normalized}`;\n}\n\n/** 清空按钮可见性判定参数 */\nexport interface ClearVisibleOptions {\n  /** 是否声明了 clearable */\n  clearable: boolean;\n  /** 是否禁用（禁用时不显示） */\n  disabled?: boolean;\n  /** 是否只读（只读时不显示） */\n  readonly?: boolean;\n  /** 当前是否有值（无值时不显示） */\n  hasValue: boolean;\n}\n\n/**\n * 判定清空按钮是否应显示。\n * 抽取自 Input/Select/Cascader 中重复的 `clearable && !disabled && !readonly && hasValue`。\n */\nexport function isClearVisible(options: ClearVisibleOptions): boolean {\n  return Boolean(options.clearable && !options.disabled && !options.readonly && options.hasValue);\n}\n\n/**\n * 判定一个值是否「非空」（用于清空按钮显隐）。\n * 兼容字符串、数字、数组（多选）。\n */\nexport function hasInputValue(value: unknown): boolean {\n  if (value === null || value === undefined) return false;\n  if (typeof value === 'string') return value.length > 0;\n  if (typeof value === 'number') return !Number.isNaN(value);\n  if (Array.isArray(value)) return value.length > 0;\n  return true;\n}\n\n/**\n * 尺寸 class 集合生成器：返回包含 base 与 size class 的对象，可直接展开进 JSX class 绑定。\n * 例：sizeClassMap('hb-input', 'large', this.size) -> { 'hb-input': true, 'hb-input--large': true }\n */\nexport function sizeClassMap(base: string, size: ComponentSize | undefined): Record<string, boolean> {\n  return { [base]: true, [buildSizeClass(base, size)]: true };\n}\n",":host {\n  display: inline-block;\n  position: relative;\n  --hb-input-font-size: 14px;\n  --hb-input-font-size-large: 16px;\n  --hb-input-font-size-small: 12px;\n  --hb-input-height: 32px;\n  --hb-input-height-large: 40px;\n  --hb-input-height-small: 24px;\n  --hb-input-border-color: var(--hb-border-color, #dcdfe6);\n  --hb-input-border-color-hover: var(--hb-color-primary);\n  --hb-input-bg-color: var(--hb-color-white, #ffffff);\n  --hb-input-text-color: var(--hb-color-text-regular, #606266);\n  --hb-input-placeholder-color: var(--hb-color-text-placeholder, #c0c4cc);\n  --hb-input-disabled-color: var(--hb-color-text-disabled, #c0c4cc);\n  --hb-input-disabled-bg-color: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-input {\n  position: relative;\n  font-size: var(--hb-input-font-size);\n  display: inline-block;\n  width: 100%;\n}\n\n.hb-input__inner {\n  -webkit-appearance: none;\n  background-color: var(--hb-input-bg-color);\n  background-image: none;\n  border-radius: 4px;\n  border: 1px solid var(--hb-input-border-color);\n  box-sizing: border-box;\n  color: var(--hb-input-text-color);\n  display: inline-block;\n  font-size: inherit;\n  height: var(--hb-input-height);\n  line-height: var(--hb-input-height);\n  outline: none;\n  padding: 0 15px;\n  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  width: 100%;\n}\n\n.hb-input__inner::placeholder {\n  color: var(--hb-input-placeholder-color);\n}\n\n.hb-input__inner:hover:not(:disabled) {\n  border-color: var(--hb-input-border-color-hover);\n}\n\n.hb-input__inner:focus {\n  border-color: var(--hb-input-border-color-hover);\n}\n\n.hb-input__inner:disabled {\n  background-color: var(--hb-input-disabled-bg-color);\n  border-color: var(--hb-input-border-color);\n  color: var(--hb-input-disabled-color);\n  cursor: not-allowed;\n}\n\n.hb-input__inner[readonly] {\n  background-color: var(--hb-input-disabled-bg-color);\n  cursor: default;\n}\n\n.hb-input--small .hb-input__inner {\n  height: var(--hb-input-height-small);\n  line-height: var(--hb-input-height-small);\n  font-size: var(--hb-input-font-size-small);\n  padding: 0 12px;\n}\n\n.hb-input--large .hb-input__inner {\n  height: var(--hb-input-height-large);\n  line-height: var(--hb-input-height-large);\n  font-size: var(--hb-input-font-size-large);\n  padding: 0 18px;\n}\n\n.hb-input__prefix,\n.hb-input__suffix {\n  position: absolute;\n  top: 0;\n  height: 100%;\n  text-align: center;\n  color: var(--hb-input-placeholder-color);\n  transition: all 0.3s;\n  display: flex;\n  align-items: center;\n}\n\n.hb-input__prefix {\n  left: 5px;\n}\n\n.hb-input__suffix {\n  right: 5px;\n}\n\n.hb-input__suffix-inner {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n}\n\n.hb-input__clear {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  color: var(--hb-input-placeholder-color);\n  transition: color 0.2s;\n}\n\n.hb-input__clear svg {\n  width: 100%;\n  height: 100%;\n}\n\n.hb-input__clear:hover {\n  color: var(--hb-input-text-color);\n}\n\n.hb-input__password {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  color: var(--hb-input-text-color);\n  cursor: pointer;\n}\n\n.hb-input__password svg {\n  width: 100%;\n  height: 100%;\n}\n\n.hb-input__inner[type='textarea'] {\n  min-height: 60px;\n  padding: 5px 15px;\n  line-height: 1.5;\n  vertical-align: bottom;\n  resize: vertical;\n}\n\n.hb-input__count {\n  position: absolute;\n  bottom: 5px;\n  right: 10px;\n  font-size: 12px;\n  color: var(--hb-input-placeholder-color);\n}\n\n.hb-input__count-inner {\n  background-color: var(--hb-input-bg-color);\n  padding: 0 4px;\n}\n","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\nimport { ComponentSize, hasInputValue, isClearVisible, sizeClassMap } from '../../utils/form-input-base';\nimport { activationClickHandler } from '../../utils/a11y';\n\n/**\n * Input 输入框组件\n * 通过鼠标或键盘输入字符\n */\n@Component({\n  tag: 'hb-input',\n  styleUrl: 'input.css',\n  shadow: true,\n})\nexport class Input {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: string = '';\n\n  /**\n   * 输入框类型\n   */\n  @Prop() type: string = 'text';\n\n  /**\n   * 输入框尺寸\n   */\n  @Prop() size: ComponentSize = 'default';\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否只读\n   * @default false\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * 输入框占位文本\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * 是否可清空\n   * @default false\n   */\n  @Prop() clearable: boolean = false;\n\n  /**\n   * 是否显示密码可见性切换\n   * @default false\n   */\n  @Prop() showPassword: boolean = false;\n\n  /**\n   * 是否显示字数统计\n   * @default false\n   */\n  @Prop() showWordLimit: boolean = false;\n\n  /**\n   * 最大输入长度\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * 最小输入长度\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * 原生 name 属性\n   */\n  @Prop() name?: string;\n\n  /**\n   * 原生 id 属性\n   */\n  @Prop() inputId?: string;\n\n  /**\n   * 原生 autocomplete 属性\n   */\n  @Prop() autocomplete?: string;\n\n  /**\n   * 原生 autofocus 属性\n   */\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * 输入框头部图标\n   */\n  @Prop() prefixIcon?: string;\n\n  /**\n   * 输入框尾部图标\n   */\n  @Prop() suffixIcon?: string;\n\n  /**\n   * 输入框行数，仅 type 为 'textarea' 时有效\n   */\n  @Prop() rows: number = 2;\n\n  /**\n   * 是否自适应内容高度，仅 type 为 'textarea' 时有效\n   */\n  @Prop() autosize: boolean | { minRows?: number; maxRows?: number } = false;\n\n  /**\n   * 是否调整 textarea 大小\n   */\n  @Prop() resize?: 'none' | 'both' | 'horizontal' | 'vertical';\n\n  @State() isFocused: boolean = false;\n  @State() showClear: boolean = false;\n  @State() passwordVisible: boolean = false;\n  @State() inputValue: string = '';\n\n  private inputRef?: HTMLInputElement | HTMLTextAreaElement;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<string>;\n\n  /**\n   * 输入事件\n   */\n  @Event() hbInput: EventEmitter<string>;\n\n  /**\n   * 聚焦事件\n   */\n  @Event() hbFocus: EventEmitter<FocusEvent>;\n\n  /**\n   * 失焦事件\n   */\n  @Event() hbBlur: EventEmitter<FocusEvent>;\n\n  /**\n   * 清空事件\n   */\n  @Event() hbClear: EventEmitter<void>;\n\n  @Watch('modelValue')\n  handleValueChange() {\n    this.inputValue = this.modelValue;\n    this.updateClearVisible();\n    // textarea autosize：外部改值也要重算高度\n    this.resizeTextarea();\n  }\n\n  componentDidLoad() {\n    this.inputValue = this.modelValue;\n    this.updateClearVisible();\n    this.resizeTextarea();\n  }\n\n  private updateClearVisible() {\n    this.showClear = isClearVisible({\n      clearable: this.clearable,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      hasValue: hasInputValue(this.inputValue),\n    });\n  }\n\n  /**\n   * textarea 自适应高度（autosize）。\n   * - autosize=false 或非 textarea：跳过。\n   * - autosize=true：按内容自适应。\n   * - autosize={minRows,maxRows}：在最小/最大行数间夹取。\n   * 算法：先把 height 置 auto 让浏览器按内容重排，再读 scrollHeight，\n   *      减去 padding 后按行高换算成行数，最后按 min/max 夹取并写回 height。\n   */\n  private resizeTextarea() {\n    if (this.type !== 'textarea' || !this.autosize) return;\n    const ta = this.inputRef as HTMLTextAreaElement | undefined;\n    if (!ta) return;\n\n    // 行高：优先取计算样式，兜底 22px\n    const computed = typeof window !== 'undefined' ? window.getComputedStyle(ta) : null;\n    const lineHeight = computed && parseFloat(computed.lineHeight) ? parseFloat(computed.lineHeight) : 22;\n    const paddingTop = computed ? parseFloat(computed.paddingTop) || 0 : 0;\n    const paddingBottom = computed ? parseFloat(computed.paddingBottom) || 0 : 0;\n\n    const opts = typeof this.autosize === 'object' ? this.autosize : {};\n    const minRows = opts.minRows ?? 1;\n    const maxRows = opts.maxRows ?? Infinity;\n\n    const minH = minRows * lineHeight + paddingTop + paddingBottom;\n    const maxH = maxRows === Infinity ? Infinity : maxRows * lineHeight + paddingTop + paddingBottom;\n\n    // 先 reset 高度以读取真实内容高度\n    ta.style.height = 'auto';\n    const scrollH = ta.scrollHeight;\n    const clamped = Math.max(minH, Math.min(scrollH, maxH === Infinity ? scrollH : maxH));\n    ta.style.height = `${clamped}px`;\n    // overflow：能滚动时才显示滚动条\n    ta.style.overflowY = scrollH > clamped ? 'auto' : 'hidden';\n  }\n\n  private handleInput = (e: Event) => {\n    const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n    this.inputValue = target.value;\n    this.modelValue = target.value;\n    this.updateClearVisible();\n    this.hbInput.emit(target.value);\n    this.resizeTextarea();\n  };\n\n  private handleChange = (e: Event) => {\n    const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n    this.hbChange.emit(target.value);\n  };\n\n  private handleFocus = (e: FocusEvent) => {\n    this.isFocused = true;\n    this.updateClearVisible();\n    this.hbFocus.emit(e);\n  };\n\n  private handleBlur = (e: FocusEvent) => {\n    this.isFocused = false;\n    this.updateClearVisible();\n    this.hbBlur.emit(e);\n  };\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation();\n    this.inputValue = '';\n    this.modelValue = '';\n    this.updateClearVisible();\n    this.hbClear.emit();\n    this.hbChange.emit('');\n    if (this.inputRef) {\n      this.inputRef.focus();\n    }\n  };\n\n  private togglePasswordVisible = () => {\n    this.passwordVisible = !this.passwordVisible;\n  };\n\n  private getInputType(): string {\n    if (this.type === 'password' && this.showPassword) {\n      return this.passwordVisible ? 'text' : 'password';\n    }\n    return this.type;\n  }\n\n  render() {\n    const isTextarea = this.type === 'textarea';\n    const InputTag = isTextarea ? 'textarea' : 'input';\n\n    return (\n      <div\n        class={{\n          ...sizeClassMap('hb-input', this.size),\n          'hb-input--disabled': this.disabled,\n          'hb-input--focused': this.isFocused,\n        }}\n      >\n        {this.prefixIcon && (\n          <span class=\"hb-input__prefix\">\n            <i class={this.prefixIcon}></i>\n          </span>\n        )}\n        <InputTag\n          ref={el => (this.inputRef = el)}\n          type={isTextarea ? undefined : this.getInputType()}\n          id={this.inputId}\n          name={this.name}\n          class=\"hb-input__inner\"\n          placeholder={this.placeholder}\n          value={this.inputValue}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          autocomplete={this.autocomplete}\n          autofocus={this.autofocus}\n          maxlength={this.maxlength}\n          minlength={this.minlength}\n          rows={isTextarea ? this.rows : undefined}\n          style={isTextarea ? { resize: this.autosize ? 'none' : this.resize || 'none' } : undefined}\n          onInput={this.handleInput}\n          onChange={this.handleChange}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        />\n        {(this.showClear || this.suffixIcon || (this.type === 'password' && this.showPassword)) && (\n          <span class=\"hb-input__suffix\">\n            {this.showClear && (\n              <span class=\"hb-input__suffix-inner hb-input__clear\" role=\"button\" aria-label=\"清空\" tabIndex={0} onClick={this.handleClear} onKeyDown={activationClickHandler}>\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              </span>\n            )}\n            {this.type === 'password' && this.showPassword && (\n              <span\n                class=\"hb-input__suffix-inner hb-input__password\"\n                role=\"button\"\n                aria-label={this.passwordVisible ? '隐藏密码' : '显示密码'}\n                tabIndex={0}\n                onClick={this.togglePasswordVisible}\n                onKeyDown={activationClickHandler}\n              >\n                {this.passwordVisible ? (\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=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z\" />\n                    <circle cx=\"12\" cy=\"12\" r=\"3\" />\n                  </svg>\n                ) : (\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=\"M3 3l18 18M10.6 10.6a3 3 0 0 0 4.2 4.2M9.9 5.1A10.6 10.6 0 0 1 12 5c6.5 0 10 7 10 7a17.8 17.8 0 0 1-2.2 3.2M6.1 6.1A17.7 17.7 0 0 0 2 12s3.5 7 10 7a10.5 10.5 0 0 0 4-.8\" />\n                  </svg>\n                )}\n              </span>\n            )}\n            {this.suffixIcon && (\n              <span class=\"hb-input__suffix-inner\">\n                <i class={this.suffixIcon}></i>\n              </span>\n            )}\n          </span>\n        )}\n        {this.showWordLimit && this.maxlength && (\n          <span class=\"hb-input__count\">\n            <span class=\"hb-input__count-inner\">\n              {this.inputValue.length} / {this.maxlength}\n            </span>\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}