huibo-ui 0.3.0 → 0.5.0

package/dist/collection/components/Segmented/Segmented.js

@@ -1,9 +1,16 @@
 import { h } from "@stencil/core";
+import { handleListKeyboard } from "../../utils/a11y";
 /**
  * Segmented 分段控制器组件
- * 类似 iOS 分段控件，选中项有高亮滑块背景
+ * 类似 iOS 分段控件，选中项有高亮滑块背景。
+ *
+ * 无障碍（对齐 WAI-ARIA radiogroup / antd Segmented）：
+ * - 容器 role=radiogroup
+ * - 选项 role=radio + aria-checked + tabindex（仅选中项 tabindex=0，roving）
+ * - 键盘：←→ 在选项间移动并选中、Home/End 跳首尾
  */
 export class Segmented {
+    el;
     /** 当前选中值 */
     modelValue = '';
     /** 是否撑满宽度 */
@@ -12,20 +19,60 @@ export class Segmented {
     size = 'default';
     /** 选项数组 */
     options = [];
+    activeIndex = -1;
     /** 选中值变化事件 */
     hbChange;
+    componentWillLoad() {
+        this.syncActiveIndex();
+    }
+    /**
+     * 受控同步：父组件后续修改 modelValue 时，重新计算 activeIndex。
+     * 修复 B3——修复前 activeIndex 仅在 componentWillLoad 算一次，
+     * 导致受控用法下 roving tabindex 与键盘导航依赖的 activeIndex 失同步。
+     */
+    handleModelValueChange() {
+        this.syncActiveIndex();
+    }
+    syncActiveIndex() {
+        this.activeIndex = this.options.findIndex(o => o.value === this.modelValue);
+    }
     handleSelect = (option) => {
         if (option.disabled || option.value === this.modelValue)
             return;
         this.modelValue = option.value;
+        this.syncActiveIndex();
         this.hbChange.emit(option.value);
     };
+    /** 键盘导航：radiogroup 模式，←→/Home/End 移动并选中（跳过禁用项） */
+    handleKeydown = (e) => {
+        const enabled = this.options.map((o, i) => ({ o, i })).filter(x => !x.o.disabled);
+        if (enabled.length === 0)
+            return;
+        const enabledIndices = enabled.map(x => x.i);
+        // 在启用项索引空间内做导航
+        const action = handleListKeyboard(e, {
+            activeIndex: enabledIndices.indexOf(this.activeIndex),
+            itemCount: enabled.length,
+            loop: true,
+        });
+        if (action.type === 'navigate') {
+            e.preventDefault();
+            const targetIdx = enabledIndices[action.index];
+            this.handleSelect(this.options[targetIdx]);
+        }
+    };
     render() {
-        return (h("div", { key: '1e3f2004fd85fbce0d29721006dcf9f415827ec5', class: { 'hb-segmented': true, [`hb-segmented--${this.size}`]: true, 'hb-segmented--block': this.block } }, h("div", { key: '81859de225297f531f53825d792a965356daf685', class: "hb-segmented__items" }, this.options.map((option) => (h("button", { type: "button", class: {
-                'hb-segmented__item': true,
-                'hb-segmented__item--active': option.value === this.modelValue,
-                'hb-segmented__item--disabled': !!option.disabled,
-            }, disabled: !!option.disabled, onClick: () => this.handleSelect(option) }, h("span", { class: "hb-segmented__item-label" }, option.label)))))));
+        return (h("div", { key: '9622d7e18536e3ad05523ee71c39370f731643c6', class: { 'hb-segmented': true, [`hb-segmented--${this.size}`]: true, 'hb-segmented--block': this.block }, role: "radiogroup", onKeyDown: this.handleKeydown }, h("div", { key: '9305a866572f038282c9bbf12ba38bf3561d2b86', class: "hb-segmented__items" }, this.options.map((option, index) => {
+            const checked = option.value === this.modelValue;
+            // roving tabindex：仅选中项（或未选中时首个启用项）可达 Tab
+            const isFirstEnabled = this.options.findIndex(o => !o.disabled) === index;
+            const tabindex = checked || (this.activeIndex < 0 && isFirstEnabled) ? 0 : -1;
+            return (h("button", { type: "button", class: {
+                    'hb-segmented__item': true,
+                    'hb-segmented__item--active': checked,
+                    'hb-segmented__item--disabled': !!option.disabled,
+                }, disabled: !!option.disabled, role: "radio", "aria-checked": checked ? 'true' : 'false', tabindex: option.disabled ? -1 : tabindex, onClick: () => this.handleSelect(option) }, h("span", { class: "hb-segmented__item-label" }, option.label)));
+        }))));
     }
     static get is() { return "hb-segmented"; }
     static get encapsulation() { return "shadow"; }
@@ -127,6 +174,11 @@ export class Segmented {
             }
         };
     }
+    static get states() {
+        return {
+            "activeIndex": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "hbChange",
@@ -145,5 +197,12 @@ export class Segmented {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "modelValue",
+                "methodName": "handleModelValueChange"
+            }];
+    }
 }
 //# sourceMappingURL=Segmented.js.map

package/dist/collection/components/Segmented/Segmented.js.map

@@ -1 +1 @@
-{"version":3,"file":"Segmented.js","sourceRoot":"","sources":["../../../src/components/Segmented/Segmented.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAExE;;;GAGG;AAEH,MAAM,OAAO,SAAS;IACpB,YAAY;IACa,UAAU,GAAW,EAAE,CAAC;IAEjD,aAAa;IACL,KAAK,GAAY,KAAK,CAAC;IAE/B,SAAS;IACD,IAAI,GAAkC,SAAS,CAAC;IAExD,WAAW;IACH,OAAO,GAAsB,EAAE,CAAC;IAExC,cAAc;IACL,QAAQ,CAAuB;IAEhC,YAAY,GAAG,CAAC,MAAuB,EAAE,EAAE;QACjD,IAAI,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,UAAU;YAAE,OAAO;QAChE,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC;QAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,iBAAiB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,KAAK,EAAE;YAC3G,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC5B,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;oBACL,oBAAoB,EAAE,IAAI;oBAC1B,4BAA4B,EAAE,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,UAAU;oBAC9D,8BAA8B,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ;iBAClD,EACD,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;gBAExC,YAAM,KAAK,EAAC,0BAA0B,IAAE,MAAM,CAAC,KAAK,CAAQ,CACrD,CACV,CAAC,CACE,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Segmented 分段控制器组件\n * 类似 iOS 分段控件，选中项有高亮滑块背景\n */\n@Component({ tag: 'hb-segmented', styleUrl: 'segmented.css', shadow: true })\nexport class Segmented {\n  /** 当前选中值 */\n  @Prop({ mutable: true }) modelValue: string = '';\n\n  /** 是否撑满宽度 */\n  @Prop() block: boolean = false;\n\n  /** 尺寸 */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /** 选项数组 */\n  @Prop() options: SegmentedOption[] = [];\n\n  /** 选中值变化事件 */\n  @Event() hbChange: EventEmitter<string>;\n\n  private handleSelect = (option: SegmentedOption) => {\n    if (option.disabled || option.value === this.modelValue) return;\n    this.modelValue = option.value;\n    this.hbChange.emit(option.value);\n  };\n\n  render() {\n    return (\n      <div class={{ 'hb-segmented': true, [`hb-segmented--${this.size}`]: true, 'hb-segmented--block': this.block }}>\n        <div class=\"hb-segmented__items\">\n          {this.options.map((option) => (\n            <button\n              type=\"button\"\n              class={{\n                'hb-segmented__item': true,\n                'hb-segmented__item--active': option.value === this.modelValue,\n                'hb-segmented__item--disabled': !!option.disabled,\n              }}\n              disabled={!!option.disabled}\n              onClick={() => this.handleSelect(option)}\n            >\n              <span class=\"hb-segmented__item-label\">{option.label}</span>\n            </button>\n          ))}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport interface SegmentedOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n"]}
+{"version":3,"file":"Segmented.js","sourceRoot":"","sources":["../../../src/components/Segmented/Segmented.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Element, Watch } from '@stencil/core';\nimport { handleListKeyboard } from '../../utils/a11y';\n\n/**\n * Segmented 分段控制器组件\n * 类似 iOS 分段控件，选中项有高亮滑块背景。\n *\n * 无障碍（对齐 WAI-ARIA radiogroup / antd Segmented）：\n * - 容器 role=radiogroup\n * - 选项 role=radio + aria-checked + tabindex（仅选中项 tabindex=0，roving）\n * - 键盘：←→ 在选项间移动并选中、Home/End 跳首尾\n */\n@Component({ tag: 'hb-segmented', styleUrl: 'segmented.css', shadow: true })\nexport class Segmented {\n  @Element() el: HTMLElement;\n\n  /** 当前选中值 */\n  @Prop({ mutable: true }) modelValue: string = '';\n\n  /** 是否撑满宽度 */\n  @Prop() block: boolean = false;\n\n  /** 尺寸 */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /** 选项数组 */\n  @Prop() options: SegmentedOption[] = [];\n\n  @State() activeIndex: number = -1;\n\n  /** 选中值变化事件 */\n  @Event() hbChange: EventEmitter<string>;\n\n  componentWillLoad() {\n    this.syncActiveIndex();\n  }\n\n  /**\n   * 受控同步：父组件后续修改 modelValue 时，重新计算 activeIndex。\n   * 修复 B3——修复前 activeIndex 仅在 componentWillLoad 算一次，\n   * 导致受控用法下 roving tabindex 与键盘导航依赖的 activeIndex 失同步。\n   */\n  @Watch('modelValue')\n  handleModelValueChange() {\n    this.syncActiveIndex();\n  }\n\n  private syncActiveIndex() {\n    this.activeIndex = this.options.findIndex(o => o.value === this.modelValue);\n  }\n\n  private handleSelect = (option: SegmentedOption) => {\n    if (option.disabled || option.value === this.modelValue) return;\n    this.modelValue = option.value;\n    this.syncActiveIndex();\n    this.hbChange.emit(option.value);\n  };\n\n  /** 键盘导航：radiogroup 模式，←→/Home/End 移动并选中（跳过禁用项） */\n  private handleKeydown = (e: KeyboardEvent) => {\n    const enabled = this.options.map((o, i) => ({ o, i })).filter(x => !x.o.disabled);\n    if (enabled.length === 0) return;\n    const enabledIndices = enabled.map(x => x.i);\n    // 在启用项索引空间内做导航\n    const action = handleListKeyboard(e, {\n      activeIndex: enabledIndices.indexOf(this.activeIndex),\n      itemCount: enabled.length,\n      loop: true,\n    });\n    if (action.type === 'navigate') {\n      e.preventDefault();\n      const targetIdx = enabledIndices[action.index];\n      this.handleSelect(this.options[targetIdx]);\n    }\n  };\n\n  render() {\n    return (\n      <div class={{ 'hb-segmented': true, [`hb-segmented--${this.size}`]: true, 'hb-segmented--block': this.block }} role=\"radiogroup\" onKeyDown={this.handleKeydown}>\n        <div class=\"hb-segmented__items\">\n          {this.options.map((option, index) => {\n            const checked = option.value === this.modelValue;\n            // roving tabindex：仅选中项（或未选中时首个启用项）可达 Tab\n            const isFirstEnabled = this.options.findIndex(o => !o.disabled) === index;\n            const tabindex = checked || (this.activeIndex < 0 && isFirstEnabled) ? 0 : -1;\n            return (\n              <button\n                type=\"button\"\n                class={{\n                  'hb-segmented__item': true,\n                  'hb-segmented__item--active': checked,\n                  'hb-segmented__item--disabled': !!option.disabled,\n                }}\n                disabled={!!option.disabled}\n                role=\"radio\"\n                aria-checked={checked ? 'true' : 'false'}\n                tabindex={option.disabled ? -1 : tabindex}\n                onClick={() => this.handleSelect(option)}\n              >\n                <span class=\"hb-segmented__item-label\">{option.label}</span>\n              </button>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n}\n\nexport interface SegmentedOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n"]}

package/dist/collection/components/Select/Select.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { createClickOutsideHandler } from "../../utils/click-outside";
-import { handleListKeyboard } from "../../utils/a11y";
+import { handleListKeyboard, activationClickHandler } from "../../utils/a11y";
 /**
  * Select 选择器组件
  * 当选项过多时，使用下拉菜单展示并选择内容
@@ -72,6 +72,11 @@ export class Select {
     filteredOptions = [];
     /** 键盘高亮的选项索引（-1 表示无） */
     activeOptionIndex = -1;
+    /**
+     * O4：实例级稳定 id，用于 combobox 的 aria-controls / aria-activedescendant 关联，
+     * 让读屏在键盘导航时播报当前高亮项。
+     */
+    listboxId = `hb-select-listbox-${Math.random().toString(36).slice(2, 11)}`;
     /**
      * 值改变事件
      */
@@ -83,13 +88,19 @@ export class Select {
     clickOutside = createClickOutsideHandler({
         host: null,
         isOpen: () => this.isOpen,
-        onClose: () => { this.isOpen = false; this.hbVisibleChange.emit(false); },
+        onClose: () => {
+            this.isOpen = false;
+            this.hbVisibleChange.emit(false);
+        },
     });
     componentDidLoad() {
         this.clickOutside = createClickOutsideHandler({
             host: this.el,
             isOpen: () => this.isOpen,
-            onClose: () => { this.isOpen = false; this.hbVisibleChange.emit(false); },
+            onClose: () => {
+                this.isOpen = false;
+                this.hbVisibleChange.emit(false);
+            },
         });
         this.clickOutside.connect();
         this.updateInputValue();
@@ -129,8 +140,12 @@ export class Select {
         if (this.disabled)
             return;
         this.isOpen = !this.isOpen;
-        if (this.isOpen)
-            this.activeOptionIndex = -1;
+        if (this.isOpen) {
+            // defaultFirstOption=true：打开时自动高亮第一个可选（非禁用）项
+            this.activeOptionIndex = this.defaultFirstOption
+                ? Math.max(-1, this.options.findIndex(o => !o.disabled))
+                : -1;
+        }
         this.hbVisibleChange.emit(this.isOpen);
     };
     handleWrapperKeydown = (e) => {
@@ -139,8 +154,7 @@ export class Select {
         const displayOptions = this.filterable ? this.filteredOptions : this.options;
         if (!this.isOpen) {
             // 关闭态：Enter / Space / 方向键 展开
-            if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar' ||
-                e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar' || e.key === 'ArrowDown' || e.key === 'ArrowUp') {
                 e.preventDefault();
                 this.isOpen = true;
                 this.activeOptionIndex = -1;
@@ -220,28 +234,62 @@ export class Select {
         }
         return this.modelValue === option.value;
     }
+    /**
+     * allowCreate + filterable：当用户输入的文本在已有选项中不存在时，
+     * 渲染一个"创建 xxx"项。返回待创建的文本（已 trim）；无需创建返回 null。
+     */
+    get createOption() {
+        if (!this.allowCreate || !this.filterable || !this.isOpen)
+            return null;
+        const q = this.searchValue.trim();
+        if (!q)
+            return null;
+        const exists = this.options.some(o => String(o.label).toLowerCase() === q.toLowerCase() || String(o.value).toLowerCase() === q.toLowerCase());
+        if (exists)
+            return null;
+        return { value: q, label: q };
+    }
+    handleCreate = () => {
+        const opt = this.createOption;
+        if (!opt)
+            return;
+        if (this.multiple) {
+            const arr = (this.modelValue || []).slice();
+            if (!arr.includes(opt.value))
+                arr.push(opt.value);
+            this.modelValue = arr;
+        }
+        else {
+            this.modelValue = opt.value;
+            this.isOpen = false;
+            this.hbVisibleChange.emit(false);
+        }
+        this.searchValue = '';
+        this.filteredOptions = this.options;
+        this.updateInputValue();
+        this.hbChange.emit(this.modelValue);
+    };
     render() {
         const displayOptions = this.filterable ? this.filteredOptions : this.options;
-        const showClear = this.clearable && this.modelValue !== undefined &&
-            (this.multiple ? this.modelValue.length > 0 : true);
-        return (h("div", { key: '74d4a02c34f152b6795a11a54a276a2325e28fc8', class: {
+        const showClear = this.clearable && this.modelValue !== undefined && (this.multiple ? this.modelValue.length > 0 : true);
+        return (h("div", { key: 'b4a502d0791ec418009f85cb7f56e28dd883a29d', class: {
                 'hb-select': true,
                 'hb-select--open': this.isOpen,
                 'hb-select--disabled': this.disabled,
                 [`hb-select--${this.size}`]: true,
-            }, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false' }, h("div", { key: 'acc60d9dd0cafa2264fae4bb2e468f9921eaf210', class: "hb-select__input-wrapper", onClick: this.handleInputClick, onKeyDown: this.handleWrapperKeydown }, this.multiple && Array.isArray(this.modelValue) && this.modelValue.length > 0 ? (h("div", { class: "hb-select__tags" }, this.modelValue.slice(0, this.collapseTags && this.maxCollapseTags ? this.maxCollapseTags : undefined).map((val) => {
+            }, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-controls": this.isOpen ? this.listboxId : undefined, "aria-activedescendant": this.isOpen && this.activeOptionIndex >= 0 ? `${this.listboxId}-opt-${this.activeOptionIndex}` : undefined }, h("div", { key: '1d94bc1d92b716386d6f791e5cb0b4aa5f4e7c6b', class: "hb-select__input-wrapper", onClick: this.handleInputClick, onKeyDown: this.handleWrapperKeydown }, this.multiple && Array.isArray(this.modelValue) && this.modelValue.length > 0 ? (h("div", { class: "hb-select__tags" }, this.modelValue.slice(0, this.collapseTags && this.maxCollapseTags ? this.maxCollapseTags : undefined).map(val => {
             const option = this.options.find(opt => opt.value === val);
-            return (h("span", { class: "hb-select__tag" }, h("span", { class: "hb-select__tag-text" }, option ? option.label : val), h("span", { class: "hb-select__tag-close", role: "button", "aria-label": "\u79FB\u9664\u6807\u7B7E", onClick: (e) => {
+            return (h("span", { class: "hb-select__tag" }, h("span", { class: "hb-select__tag-text" }, option ? option.label : val), h("span", { class: "hb-select__tag-close", role: "button", "aria-label": "\u79FB\u9664\u6807\u7B7E", tabIndex: 0, onClick: e => {
                     e.stopPropagation();
                     this.handleSelect(option || { value: val, label: String(val) });
-                } }, "\u00D7")));
-        }), this.collapseTags && this.maxCollapseTags && this.modelValue.length > this.maxCollapseTags && (h("span", { class: "hb-select__tag" }, h("span", { class: "hb-select__tag-text" }, "+", this.modelValue.length - this.maxCollapseTags))))) : (h("input", { type: "text", class: "hb-select__input", placeholder: this.placeholder, value: this.filterable && this.isOpen ? this.searchValue : this.inputValue, disabled: this.disabled, readonly: !this.filterable || !this.isOpen, onInput: this.handleSearch, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', role: "combobox" })), h("span", { key: 'af18dc75d5ae183d953ff4c1ae9a1c437f5cb4f9', class: "hb-select__suffix" }, showClear && (h("span", { key: '23d6891fa82878f78de89dea464c1a1787be6695', class: "hb-select__clear", role: "button", "aria-label": "\u6E05\u7A7A", onClick: this.handleClear }, "\u00D7")), h("span", { key: '45bef57ec15707fe4f9c9b5fa4699eb8082b27d4', class: "hb-select__arrow" }, "\u25BC"))), this.isOpen && (h("div", { key: 'a359fae561a9a25f85a72437f88f6ab11abcd90a', class: "hb-select__dropdown" }, h("ul", { key: 'f599eb59c8ff2f7e3effe395253a11c7934b41b8', class: "hb-select__menu", role: "listbox" }, displayOptions.length === 0 ? (h("li", { class: "hb-select__menu-item hb-select__menu-item--empty", "aria-disabled": "true" }, "\u65E0\u6570\u636E")) : (displayOptions.map((option, index) => (h("li", { class: {
+                }, onKeyDown: activationClickHandler }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M6 6l12 12M18 6L6 18" })))));
+        }), this.collapseTags && this.maxCollapseTags && this.modelValue.length > this.maxCollapseTags && (h("span", { class: "hb-select__tag" }, h("span", { class: "hb-select__tag-text" }, "+", this.modelValue.length - this.maxCollapseTags))))) : (h("input", { type: "text", class: "hb-select__input", placeholder: this.placeholder, value: this.filterable && this.isOpen ? this.searchValue : this.inputValue, disabled: this.disabled, readonly: !this.filterable || !this.isOpen, onInput: this.handleSearch, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', role: "combobox" })), h("span", { key: 'a3baeacc8cdbf27eba98f6598691bda8d2eb05a1', class: "hb-select__suffix" }, showClear && (h("span", { key: 'a6949d1ab21d12029532dc74d8211075d2eef3cc', class: "hb-select__clear", role: "button", "aria-label": "\u6E05\u7A7A", tabIndex: 0, onClick: this.handleClear, onKeyDown: activationClickHandler }, h("svg", { key: 'e9c4b5432f7880392485135eeab6ea704a6b8276', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: '2a8a040a65bb299cad10023d22f4875c46dfb532', d: "M6 6l12 12M18 6L6 18" })))), h("span", { key: '5b7c7a3cf6adfc64b7310e5564b447256cf317cb', class: "hb-select__arrow", "aria-hidden": "true" }, h("svg", { key: '72d1d5fe5ec09baf891abc60c0c08e1803c82979', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { key: '136724fc7a387c0831a703f5561e40b9681f7c08', d: "M6 9l6 6 6-6" }))))), this.isOpen && (h("div", { key: '25f7454d0e3bbcaacc1032d97fbcb3a7bd40300b', class: "hb-select__dropdown" }, h("ul", { key: '41037c823d64c4c5b4fc7dac74c7ae39a8557867', class: "hb-select__menu", role: "listbox", id: this.listboxId }, this.createOption && (h("li", { key: '25337a9a9f1ee67957aacad3c106edbc57284029', class: { 'hb-select__menu-item': true, 'hb-select__menu-item--create': true }, role: "option", "aria-selected": "false", onClick: this.handleCreate }, h("span", { key: '43b94deb1f4d4ab2fac5d248a8fb538dd476e7de', class: "hb-select__menu-item-label" }, "\u521B\u5EFA\u300C", this.createOption.label, "\u300D"))), displayOptions.length === 0 && !this.createOption ? (h("li", { class: "hb-select__menu-item hb-select__menu-item--empty", "aria-disabled": "true" }, "\u65E0\u6570\u636E")) : (displayOptions.map((option, index) => (h("li", { id: `${this.listboxId}-opt-${index}`, class: {
                 'hb-select__menu-item': true,
                 'hb-select__menu-item--selected': this.isSelected(option),
                 'hb-select__menu-item--disabled': option.disabled,
                 'hb-select__menu-item--divided': option.divided,
                 'hb-select__menu-item--active': index === this.activeOptionIndex,
-            }, role: "option", "aria-selected": this.isSelected(option) ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : undefined, onClick: () => this.handleSelect(option) }, this.multiple && (h("span", { class: "hb-select__menu-item-checkbox" }, this.isSelected(option) ? '✓' : '')), h("span", { class: "hb-select__menu-item-label" }, option.label))))))))));
+            }, role: "option", "aria-selected": this.isSelected(option) ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : undefined, onClick: () => this.handleSelect(option) }, this.multiple && (h("span", { class: "hb-select__menu-item-checkbox", "aria-hidden": "true" }, this.isSelected(option) ? (h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 3, "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M5 12l5 5L20 7" }))) : null)), h("span", { class: "hb-select__menu-item-label" }, option.label))))))))));
     }
     static get is() { return "hb-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Element, Watch } from '@stencil/core';\nimport { createClickOutsideHandler } from '../../utils/click-outside';\nimport { handleListKeyboard } from '../../utils/a11y';\n\nexport interface SelectOption {\n  value: string | number;\n  label: string;\n  disabled?: boolean;\n  divided?: boolean;\n}\n\n/**\n * Select 选择器组件\n * 当选项过多时，使用下拉菜单展示并选择内容\n */\n@Component({\n  tag: 'hb-select',\n  styleUrl: 'select.css',\n  shadow: true,\n})\nexport class Select {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue?: string | number | (string | number)[];\n\n  /**\n   * 可选项数据源\n   */\n  @Prop() options: SelectOption[] = [];\n\n  /**\n   * 输入框占位文本\n   */\n  @Prop() placeholder: string = '请选择';\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 输入框尺寸\n   */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /**\n   * 是否可清空\n   * @default false\n   */\n  @Prop() clearable: boolean = false;\n\n  /**\n   * 是否多选\n   * @default false\n   */\n  @Prop() multiple: boolean = false;\n\n  /**\n   * 是否可搜索\n   * @default false\n   */\n  @Prop() filterable: boolean = false;\n\n  /**\n   * 自定义过滤方法\n   */\n  @Prop() filterMethod?: (query: string) => void;\n\n  /**\n   * 是否默认展开\n   * @default false\n   */\n  @Prop() defaultFirstOption: boolean = false;\n\n  /**\n   * 是否允许创建新条目\n   * @default false\n   */\n  @Prop() allowCreate: boolean = false;\n\n  /**\n   * 多选时是否将选中值按文字的形式展示\n   * @default false\n   */\n  @Prop() collapseTags: boolean = false;\n\n  /**\n   * 多选时最多显示多少个tag\n   */\n  @Prop() maxCollapseTags?: number;\n\n  @State() isOpen: boolean = false;\n  @State() inputValue: string = '';\n  @State() searchValue: string = '';\n  @State() filteredOptions: SelectOption[] = [];\n  /** 键盘高亮的选项索引（-1 表示无） */\n  @State() activeOptionIndex: number = -1;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<string | number | (string | number)[]>;\n\n  /**\n   * 下拉框出现/隐藏时触发\n   */\n  @Event() hbVisibleChange: EventEmitter<boolean>;\n\n  private clickOutside = createClickOutsideHandler({\n    host: null as any,\n    isOpen: () => this.isOpen,\n    onClose: () => { this.isOpen = false; this.hbVisibleChange.emit(false); },\n  });\n\n  componentDidLoad() {\n    this.clickOutside = createClickOutsideHandler({\n      host: this.el,\n      isOpen: () => this.isOpen,\n      onClose: () => { this.isOpen = false; this.hbVisibleChange.emit(false); },\n    });\n    this.clickOutside.connect();\n    this.updateInputValue();\n    if (this.filterable) {\n      this.filteredOptions = this.options;\n    }\n  }\n\n  disconnectedCallback() {\n    this.clickOutside.disconnect();\n  }\n\n  @Watch('modelValue')\n  handleValueChange() {\n    this.updateInputValue();\n  }\n\n  @Watch('options')\n  handleOptionsChange() {\n    if (this.filterable) {\n      this.filteredOptions = this.options;\n    }\n  }\n\n  private updateInputValue() {\n    if (!this.modelValue) {\n      this.inputValue = '';\n      return;\n    }\n\n    if (this.multiple && Array.isArray(this.modelValue)) {\n      const labels = this.modelValue.map(val => {\n        const option = this.options.find(opt => opt.value === val);\n        return option ? option.label : String(val);\n      });\n      this.inputValue = labels.join(', ');\n    } else {\n      const option = this.options.find(opt => opt.value === this.modelValue);\n      this.inputValue = option ? option.label : String(this.modelValue);\n    }\n  }\n\n  private handleInputClick = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) this.activeOptionIndex = -1;\n    this.hbVisibleChange.emit(this.isOpen);\n  };\n\n  private handleWrapperKeydown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n    const displayOptions = this.filterable ? this.filteredOptions : this.options;\n\n    if (!this.isOpen) {\n      // 关闭态：Enter / Space / 方向键 展开\n      if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar' ||\n        e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n        e.preventDefault();\n        this.isOpen = true;\n        this.activeOptionIndex = -1;\n        this.hbVisibleChange.emit(true);\n      }\n      return;\n    }\n\n    const action = handleListKeyboard(e, {\n      activeIndex: this.activeOptionIndex,\n      itemCount: displayOptions.length,\n      loop: true,\n    });\n    switch (action.type) {\n      case 'navigate':\n        e.preventDefault();\n        this.activeOptionIndex = action.index;\n        break;\n      case 'select': {\n        e.preventDefault();\n        const opt = displayOptions[action.index];\n        if (opt && !opt.disabled) this.handleSelect(opt);\n        break;\n      }\n      case 'close':\n        e.preventDefault();\n        this.isOpen = false;\n        this.hbVisibleChange.emit(false);\n        break;\n      default:\n        break;\n    }\n  };\n\n  private handleSelect = (option: SelectOption) => {\n    if (option.disabled) return;\n\n    if (this.multiple) {\n      const currentValue = (this.modelValue as (string | number)[]) || [];\n      const index = currentValue.indexOf(option.value);\n      \n      if (index > -1) {\n        currentValue.splice(index, 1);\n      } else {\n        currentValue.push(option.value);\n      }\n      \n      this.modelValue = [...currentValue];\n    } else {\n      this.modelValue = option.value;\n      this.isOpen = false;\n      this.hbVisibleChange.emit(false);\n    }\n    \n    this.updateInputValue();\n    this.hbChange.emit(this.modelValue);\n  };\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation();\n    this.modelValue = this.multiple ? [] : undefined;\n    this.inputValue = '';\n    this.isOpen = false;\n    this.hbChange.emit(this.modelValue);\n    this.hbVisibleChange.emit(false);\n  };\n\n  private handleSearch = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.searchValue = target.value;\n    \n    if (this.filterMethod) {\n      this.filterMethod(target.value);\n    } else {\n      this.filteredOptions = this.options.filter(opt =>\n        opt.label.toLowerCase().includes(target.value.toLowerCase())\n      );\n    }\n  };\n\n  private isSelected(option: SelectOption): boolean {\n    if (this.multiple && Array.isArray(this.modelValue)) {\n      return this.modelValue.includes(option.value);\n    }\n    return this.modelValue === option.value;\n  }\n\n  render() {\n    const displayOptions = this.filterable ? this.filteredOptions : this.options;\n    const showClear = this.clearable && this.modelValue !== undefined &&\n      (this.multiple ? (this.modelValue as any[]).length > 0 : true);\n\n    return (\n      <div\n        class={{\n          'hb-select': true,\n          'hb-select--open': this.isOpen,\n          'hb-select--disabled': this.disabled,\n          [`hb-select--${this.size}`]: true,\n        }}\n        aria-haspopup=\"listbox\"\n        aria-expanded={this.isOpen ? 'true' : 'false'}\n      >\n        <div class=\"hb-select__input-wrapper\" onClick={this.handleInputClick} onKeyDown={this.handleWrapperKeydown}>\n          {this.multiple && Array.isArray(this.modelValue) && this.modelValue.length > 0 ? (\n            <div class=\"hb-select__tags\">\n              {this.modelValue.slice(0, this.collapseTags && this.maxCollapseTags ? this.maxCollapseTags : undefined).map((val) => {\n                const option = this.options.find(opt => opt.value === val);\n                return (\n                  <span class=\"hb-select__tag\">\n                    <span class=\"hb-select__tag-text\">{option ? option.label : val}</span>\n                    <span class=\"hb-select__tag-close\" role=\"button\" aria-label=\"移除标签\" onClick={(e) => {\n                      e.stopPropagation();\n                      this.handleSelect(option || { value: val, label: String(val) });\n                    }}>×</span>\n                  </span>\n                );\n              })}\n              {this.collapseTags && this.maxCollapseTags && this.modelValue.length > this.maxCollapseTags && (\n                <span class=\"hb-select__tag\">\n                  <span class=\"hb-select__tag-text\">+{this.modelValue.length - this.maxCollapseTags}</span>\n                </span>\n              )}\n            </div>\n          ) : (\n            <input\n              type=\"text\"\n              class=\"hb-select__input\"\n              placeholder={this.placeholder}\n              value={this.filterable && this.isOpen ? this.searchValue : this.inputValue}\n              disabled={this.disabled}\n              readonly={!this.filterable || !this.isOpen}\n              onInput={this.handleSearch}\n              aria-haspopup=\"listbox\"\n              aria-expanded={this.isOpen ? 'true' : 'false'}\n              role=\"combobox\"\n            />\n          )}\n          <span class=\"hb-select__suffix\">\n            {showClear && (\n              <span class=\"hb-select__clear\" role=\"button\" aria-label=\"清空\" onClick={this.handleClear}>\n                ×\n              </span>\n            )}\n            <span class=\"hb-select__arrow\">▼</span>\n          </span>\n        </div>\n        {this.isOpen && (\n          <div class=\"hb-select__dropdown\">\n            <ul class=\"hb-select__menu\" role=\"listbox\">\n              {displayOptions.length === 0 ? (\n                <li class=\"hb-select__menu-item hb-select__menu-item--empty\" aria-disabled=\"true\">无数据</li>\n              ) : (\n                displayOptions.map((option, index) => (\n                  <li\n                    class={{\n                      'hb-select__menu-item': true,\n                      'hb-select__menu-item--selected': this.isSelected(option),\n                      'hb-select__menu-item--disabled': option.disabled,\n                      'hb-select__menu-item--divided': option.divided,\n                      'hb-select__menu-item--active': index === this.activeOptionIndex,\n                    }}\n                    role=\"option\"\n                    aria-selected={this.isSelected(option) ? 'true' : 'false'}\n                    aria-disabled={option.disabled ? 'true' : undefined}\n                    onClick={() => this.handleSelect(option)}\n                  >\n                    {this.multiple && (\n                      <span class=\"hb-select__menu-item-checkbox\">\n                        {this.isSelected(option) ? '✓' : ''}\n                      </span>\n                    )}\n                    <span class=\"hb-select__menu-item-label\">{option.label}</span>\n                  </li>\n                ))\n              )}\n            </ul>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Element, Watch } from '@stencil/core';\nimport { createClickOutsideHandler } from '../../utils/click-outside';\nimport { handleListKeyboard, activationClickHandler } from '../../utils/a11y';\n\nexport interface SelectOption {\n  value: string | number;\n  label: string;\n  disabled?: boolean;\n  divided?: boolean;\n}\n\n/**\n * Select 选择器组件\n * 当选项过多时，使用下拉菜单展示并选择内容\n */\n@Component({\n  tag: 'hb-select',\n  styleUrl: 'select.css',\n  shadow: true,\n})\nexport class Select {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue?: string | number | (string | number)[];\n\n  /**\n   * 可选项数据源\n   */\n  @Prop() options: SelectOption[] = [];\n\n  /**\n   * 输入框占位文本\n   */\n  @Prop() placeholder: string = '请选择';\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 输入框尺寸\n   */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /**\n   * 是否可清空\n   * @default false\n   */\n  @Prop() clearable: boolean = false;\n\n  /**\n   * 是否多选\n   * @default false\n   */\n  @Prop() multiple: boolean = false;\n\n  /**\n   * 是否可搜索\n   * @default false\n   */\n  @Prop() filterable: boolean = false;\n\n  /**\n   * 自定义过滤方法\n   */\n  @Prop() filterMethod?: (query: string) => void;\n\n  /**\n   * 是否默认展开\n   * @default false\n   */\n  @Prop() defaultFirstOption: boolean = false;\n\n  /**\n   * 是否允许创建新条目\n   * @default false\n   */\n  @Prop() allowCreate: boolean = false;\n\n  /**\n   * 多选时是否将选中值按文字的形式展示\n   * @default false\n   */\n  @Prop() collapseTags: boolean = false;\n\n  /**\n   * 多选时最多显示多少个tag\n   */\n  @Prop() maxCollapseTags?: number;\n\n  @State() isOpen: boolean = false;\n  @State() inputValue: string = '';\n  @State() searchValue: string = '';\n  @State() filteredOptions: SelectOption[] = [];\n  /** 键盘高亮的选项索引（-1 表示无） */\n  @State() activeOptionIndex: number = -1;\n\n  /**\n   * O4：实例级稳定 id，用于 combobox 的 aria-controls / aria-activedescendant 关联，\n   * 让读屏在键盘导航时播报当前高亮项。\n   */\n  private listboxId = `hb-select-listbox-${Math.random().toString(36).slice(2, 11)}`;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<string | number | (string | number)[]>;\n\n  /**\n   * 下拉框出现/隐藏时触发\n   */\n  @Event() hbVisibleChange: EventEmitter<boolean>;\n\n  private clickOutside = createClickOutsideHandler({\n    host: null as any,\n    isOpen: () => this.isOpen,\n    onClose: () => {\n      this.isOpen = false;\n      this.hbVisibleChange.emit(false);\n    },\n  });\n\n  componentDidLoad() {\n    this.clickOutside = createClickOutsideHandler({\n      host: this.el,\n      isOpen: () => this.isOpen,\n      onClose: () => {\n        this.isOpen = false;\n        this.hbVisibleChange.emit(false);\n      },\n    });\n    this.clickOutside.connect();\n    this.updateInputValue();\n    if (this.filterable) {\n      this.filteredOptions = this.options;\n    }\n  }\n\n  disconnectedCallback() {\n    this.clickOutside.disconnect();\n  }\n\n  @Watch('modelValue')\n  handleValueChange() {\n    this.updateInputValue();\n  }\n\n  @Watch('options')\n  handleOptionsChange() {\n    if (this.filterable) {\n      this.filteredOptions = this.options;\n    }\n  }\n\n  private updateInputValue() {\n    if (!this.modelValue) {\n      this.inputValue = '';\n      return;\n    }\n\n    if (this.multiple && Array.isArray(this.modelValue)) {\n      const labels = this.modelValue.map(val => {\n        const option = this.options.find(opt => opt.value === val);\n        return option ? option.label : String(val);\n      });\n      this.inputValue = labels.join(', ');\n    } else {\n      const option = this.options.find(opt => opt.value === this.modelValue);\n      this.inputValue = option ? option.label : String(this.modelValue);\n    }\n  }\n\n  private handleInputClick = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) {\n      // defaultFirstOption=true：打开时自动高亮第一个可选（非禁用）项\n      this.activeOptionIndex = this.defaultFirstOption\n        ? Math.max(\n            -1,\n            this.options.findIndex(o => !o.disabled),\n          )\n        : -1;\n    }\n    this.hbVisibleChange.emit(this.isOpen);\n  };\n\n  private handleWrapperKeydown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n    const displayOptions = this.filterable ? this.filteredOptions : this.options;\n\n    if (!this.isOpen) {\n      // 关闭态：Enter / Space / 方向键 展开\n      if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar' || e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n        e.preventDefault();\n        this.isOpen = true;\n        this.activeOptionIndex = -1;\n        this.hbVisibleChange.emit(true);\n      }\n      return;\n    }\n\n    const action = handleListKeyboard(e, {\n      activeIndex: this.activeOptionIndex,\n      itemCount: displayOptions.length,\n      loop: true,\n    });\n    switch (action.type) {\n      case 'navigate':\n        e.preventDefault();\n        this.activeOptionIndex = action.index;\n        break;\n      case 'select': {\n        e.preventDefault();\n        const opt = displayOptions[action.index];\n        if (opt && !opt.disabled) this.handleSelect(opt);\n        break;\n      }\n      case 'close':\n        e.preventDefault();\n        this.isOpen = false;\n        this.hbVisibleChange.emit(false);\n        break;\n      default:\n        break;\n    }\n  };\n\n  private handleSelect = (option: SelectOption) => {\n    if (option.disabled) return;\n\n    if (this.multiple) {\n      const currentValue = (this.modelValue as (string | number)[]) || [];\n      const index = currentValue.indexOf(option.value);\n\n      if (index > -1) {\n        currentValue.splice(index, 1);\n      } else {\n        currentValue.push(option.value);\n      }\n\n      this.modelValue = [...currentValue];\n    } else {\n      this.modelValue = option.value;\n      this.isOpen = false;\n      this.hbVisibleChange.emit(false);\n    }\n\n    this.updateInputValue();\n    this.hbChange.emit(this.modelValue);\n  };\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation();\n    this.modelValue = this.multiple ? [] : undefined;\n    this.inputValue = '';\n    this.isOpen = false;\n    this.hbChange.emit(this.modelValue);\n    this.hbVisibleChange.emit(false);\n  };\n\n  private handleSearch = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.searchValue = target.value;\n\n    if (this.filterMethod) {\n      this.filterMethod(target.value);\n    } else {\n      this.filteredOptions = this.options.filter(opt => opt.label.toLowerCase().includes(target.value.toLowerCase()));\n    }\n  };\n\n  private isSelected(option: SelectOption): boolean {\n    if (this.multiple && Array.isArray(this.modelValue)) {\n      return this.modelValue.includes(option.value);\n    }\n    return this.modelValue === option.value;\n  }\n\n  /**\n   * allowCreate + filterable：当用户输入的文本在已有选项中不存在时，\n   * 渲染一个\"创建 xxx\"项。返回待创建的文本（已 trim）；无需创建返回 null。\n   */\n  private get createOption(): SelectOption | null {\n    if (!this.allowCreate || !this.filterable || !this.isOpen) return null;\n    const q = this.searchValue.trim();\n    if (!q) return null;\n    const exists = this.options.some(o => String(o.label).toLowerCase() === q.toLowerCase() || String(o.value).toLowerCase() === q.toLowerCase());\n    if (exists) return null;\n    return { value: q, label: q };\n  }\n\n  private handleCreate = () => {\n    const opt = this.createOption;\n    if (!opt) return;\n    if (this.multiple) {\n      const arr = ((this.modelValue as (string | number)[]) || []).slice();\n      if (!arr.includes(opt.value)) arr.push(opt.value);\n      this.modelValue = arr;\n    } else {\n      this.modelValue = opt.value;\n      this.isOpen = false;\n      this.hbVisibleChange.emit(false);\n    }\n    this.searchValue = '';\n    this.filteredOptions = this.options;\n    this.updateInputValue();\n    this.hbChange.emit(this.modelValue);\n  };\n\n  render() {\n    const displayOptions = this.filterable ? this.filteredOptions : this.options;\n    const showClear = this.clearable && this.modelValue !== undefined && (this.multiple ? (this.modelValue as any[]).length > 0 : true);\n\n    return (\n      <div\n        class={{\n          'hb-select': true,\n          'hb-select--open': this.isOpen,\n          'hb-select--disabled': this.disabled,\n          [`hb-select--${this.size}`]: true,\n        }}\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={this.isOpen ? 'true' : 'false'}\n        aria-controls={this.isOpen ? this.listboxId : undefined}\n        aria-activedescendant={this.isOpen && this.activeOptionIndex >= 0 ? `${this.listboxId}-opt-${this.activeOptionIndex}` : undefined}\n      >\n        <div class=\"hb-select__input-wrapper\" onClick={this.handleInputClick} onKeyDown={this.handleWrapperKeydown}>\n          {this.multiple && Array.isArray(this.modelValue) && this.modelValue.length > 0 ? (\n            <div class=\"hb-select__tags\">\n              {this.modelValue.slice(0, this.collapseTags && this.maxCollapseTags ? this.maxCollapseTags : undefined).map(val => {\n                const option = this.options.find(opt => opt.value === val);\n                return (\n                  <span class=\"hb-select__tag\">\n                    <span class=\"hb-select__tag-text\">{option ? option.label : val}</span>\n                    <span\n                      class=\"hb-select__tag-close\"\n                      role=\"button\"\n                      aria-label=\"移除标签\"\n                      tabIndex={0}\n                      onClick={e => {\n                        e.stopPropagation();\n                        this.handleSelect(option || { value: val, label: String(val) });\n                      }}\n                      onKeyDown={activationClickHandler}\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=\"M6 6l12 12M18 6L6 18\" />\n                      </svg>\n                    </span>\n                  </span>\n                );\n              })}\n              {this.collapseTags && this.maxCollapseTags && this.modelValue.length > this.maxCollapseTags && (\n                <span class=\"hb-select__tag\">\n                  <span class=\"hb-select__tag-text\">+{this.modelValue.length - this.maxCollapseTags}</span>\n                </span>\n              )}\n            </div>\n          ) : (\n            <input\n              type=\"text\"\n              class=\"hb-select__input\"\n              placeholder={this.placeholder}\n              value={this.filterable && this.isOpen ? this.searchValue : this.inputValue}\n              disabled={this.disabled}\n              readonly={!this.filterable || !this.isOpen}\n              onInput={this.handleSearch}\n              aria-haspopup=\"listbox\"\n              aria-expanded={this.isOpen ? 'true' : 'false'}\n              role=\"combobox\"\n            />\n          )}\n          <span class=\"hb-select__suffix\">\n            {showClear && (\n              <span class=\"hb-select__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            <span class=\"hb-select__arrow\" aria-hidden=\"true\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M6 9l6 6 6-6\" />\n              </svg>\n            </span>\n          </span>\n        </div>\n        {this.isOpen && (\n          <div class=\"hb-select__dropdown\">\n            <ul class=\"hb-select__menu\" role=\"listbox\" id={this.listboxId}>\n              {/* allowCreate：用户输入文本不存在时，渲染创建项（置顶） */}\n              {this.createOption && (\n                <li class={{ 'hb-select__menu-item': true, 'hb-select__menu-item--create': true }} role=\"option\" aria-selected=\"false\" onClick={this.handleCreate}>\n                  <span class=\"hb-select__menu-item-label\">创建「{this.createOption.label}」</span>\n                </li>\n              )}\n              {displayOptions.length === 0 && !this.createOption ? (\n                <li class=\"hb-select__menu-item hb-select__menu-item--empty\" aria-disabled=\"true\">\n                  无数据\n                </li>\n              ) : (\n                displayOptions.map((option, index) => (\n                  <li\n                    id={`${this.listboxId}-opt-${index}`}\n                    class={{\n                      'hb-select__menu-item': true,\n                      'hb-select__menu-item--selected': this.isSelected(option),\n                      'hb-select__menu-item--disabled': option.disabled,\n                      'hb-select__menu-item--divided': option.divided,\n                      'hb-select__menu-item--active': index === this.activeOptionIndex,\n                    }}\n                    role=\"option\"\n                    aria-selected={this.isSelected(option) ? 'true' : 'false'}\n                    aria-disabled={option.disabled ? 'true' : undefined}\n                    onClick={() => this.handleSelect(option)}\n                  >\n                    {this.multiple && (\n                      <span class=\"hb-select__menu-item-checkbox\" aria-hidden=\"true\">\n                        {this.isSelected(option) ? (\n                          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={3} stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                            <path d=\"M5 12l5 5L20 7\" />\n                          </svg>\n                        ) : null}\n                      </span>\n                    )}\n                    <span class=\"hb-select__menu-item-label\">{option.label}</span>\n                  </li>\n                ))\n              )}\n            </ul>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Select/select.css

@@ -81,12 +81,21 @@
 }
 
 .hb-select__tag-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
   cursor: pointer;
-  font-size: 14px;
   color: var(--hb-color-text-placeholder, #c0c4cc);
   transition: color 0.2s;
 }
 
+.hb-select__tag-close svg {
+  width: 100%;
+  height: 100%;
+}
+
 .hb-select__tag-close:hover {
   color: var(--hb-color-text-regular, #606266);
 }
@@ -103,21 +112,40 @@
 
 .hb-select__clear {
   margin-right: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
   cursor: pointer;
-  font-size: 16px;
   color: var(--hb-select-placeholder-color);
   transition: color 0.2s;
 }
 
+.hb-select__clear svg {
+  width: 100%;
+  height: 100%;
+}
+
 .hb-select__clear:hover {
   color: var(--hb-select-text-color);
 }
 
 .hb-select__arrow {
-  font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  color: var(--hb-select-placeholder-color);
   transition: transform 0.3s;
 }
 
+.hb-select__arrow svg {
+  width: 100%;
+  height: 100%;
+}
+
 .hb-select--open .hb-select__arrow {
   transform: rotate(180deg);
 }
@@ -181,7 +209,25 @@
 .hb-select__menu-item-checkbox {
   margin-right: 8px;
   width: 14px;
-  text-align: center;
+  height: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--hb-color-primary, #1677ff);
+}
+
+.hb-select__menu-item-checkbox svg {
+  width: 100%;
+  height: 100%;
+}
+
+.hb-select__menu-item--create {
+  color: var(--hb-color-primary, #1677ff);
+  font-weight: 500;
+}
+
+.hb-select__menu-item--create:hover {
+  background-color: var(--hb-color-primary-bg, #e6f4ff);
 }
 
 .hb-select__menu-item-label {
@@ -220,4 +266,3 @@
   color: var(--hb-color-text-disabled, #c0c4cc);
   cursor: not-allowed;
 }
-