huibo-ui 0.3.0

package/dist/cjs/hb-segmented.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-segmented.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,i2NAAi2N,CAAC;AACv3N,0BAAe,YAAY;;MCMd,SAAS;;;;;;IAEK,UAAU,GAAW,EAAE,CAAC;;IAGzC,KAAK,GAAY,KAAK,CAAC;;IAGvB,IAAI,GAAkC,SAAS,CAAC;;IAGhD,OAAO,GAAsB,EAAE,CAAC;;IAG/B,QAAQ,CAAuB;IAEhC,YAAY,GAAG,CAAC,MAAuB;QAC7C,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;KAClC,CAAC;IAEF,MAAM;QACJ,QACEA,kEAAK,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,iBAAiB,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,KAAK,EAAE,IAC3GA,kEAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MACvBA,oBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;gBACL,oBAAoB,EAAE,IAAI;gBAC1B,4BAA4B,EAAE,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,UAAU;gBAC9D,8BAA8B,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ;aAClD,EACD,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,QAAQ,EAC3B,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAExCA,kBAAM,KAAK,EAAC,0BAA0B,IAAE,MAAM,CAAC,KAAK,CAAQ,CACrD,CACV,CAAC,CACE,CACF,EACN;KACH;;;;;;","names":["h"],"sources":["src/components/Segmented/segmented.css?tag=hb-segmented&encapsulation=shadow","src/components/Segmented/Segmented.tsx"],"sourcesContent":[":host { display: block; }\n.hb-segmented {\n  display: inline-flex;\n  padding: 2px;\n  background: var(--hb-color-fill);\n  border-radius: var(--hb-border-radius-base);\n  box-sizing: border-box;\n}\n.hb-segmented--block { display: flex; width: 100%; }\n.hb-segmented__items { display: inline-flex; gap: 2px; width: 100%; }\n\n/* 尺寸 */\n.hb-segmented--large .hb-segmented__item { padding: 6px 18px; font-size: var(--hb-font-size-base); }\n.hb-segmented--default .hb-segmented__item { padding: 4px 14px; font-size: var(--hb-font-size-sm); }\n.hb-segmented--small .hb-segmented__item { padding: 2px 10px; font-size: var(--hb-font-size-xs); }\n\n.hb-segmented__item {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: transparent;\n  color: var(--hb-color-text);\n  cursor: pointer;\n  border-radius: var(--hb-border-radius-sm);\n  transition: background 0.2s, color 0.2s;\n  white-space: nowrap;\n  flex: 1;\n  line-height: 1.5;\n  font-family: inherit;\n}\n.hb-segmented__item:hover:not(.hb-segmented__item--active):not(.hb-segmented__item--disabled) {\n  background: var(--hb-color-fill-secondary);\n}\n/* 高亮滑块背景 */\n.hb-segmented__item--active {\n  background: var(--hb-color-bg-container);\n  color: var(--hb-color-primary);\n  font-weight: 500;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n.hb-segmented__item--disabled {\n  color: var(--hb-color-text-disabled);\n  cursor: not-allowed;\n}\n.hb-segmented__item-label { pointer-events: none; }\n","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}

package/dist/cjs/hb-select.cjs.entry.js

@@ -0,0 +1,262 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5aa5c817.js');
+const clickOutside = require('./click-outside-3fcc00dd.js');
+const a11y = require('./a11y-802de67a.js');
+
+const selectCss = "/*! 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-select-font-size:14px;--hb-select-height:32px;--hb-select-border-color:var(--hb-border-color,#dcdfe6);--hb-select-border-color-hover:var(--hb-color-primary);--hb-select-bg-color:var(--hb-color-white,#fff);--hb-select-text-color:var(--hb-color-text-regular,#606266);--hb-select-placeholder-color:var(--hb-color-text-placeholder,#c0c4cc);display:inline-block;position:relative}.hb-select{display:inline-block;position:relative;width:240px}.hb-select__input-wrapper{position:relative}.hb-select__input,.hb-select__input-wrapper{cursor:pointer;display:inline-block;width:100%}.hb-select__input{background-color:var(--hb-select-bg-color);border:1px solid var(--hb-select-border-color);border-radius:4px;box-sizing:border-box;color:var(--hb-select-text-color);font-size:var(--hb-select-font-size);height:var(--hb-select-height);line-height:var(--hb-select-height);outline:none;padding:0 30px 0 15px;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.hb-select__input::placeholder{color:var(--hb-select-placeholder-color)}.hb-select__input:focus,.hb-select__input:hover:not(:disabled){border-color:var(--hb-select-border-color-hover)}.hb-select__tags{align-items:center;background-color:var(--hb-select-bg-color);border:1px solid var(--hb-select-border-color);border-radius:4px;display:flex;flex-wrap:wrap;min-height:var(--hb-select-height);padding:0 30px 0 5px}.hb-select__tag{align-items:center;background-color:var(--hb-fill-color-light,#f0f2f5);border:1px solid var(--hb-border-color-lighter,#e4e7ed);border-radius:4px;color:var(--hb-color-text-regular,#606266);display:inline-flex;font-size:12px;height:24px;margin:2px 0 2px 6px;padding:0 8px}.hb-select__tag-text{margin-right:4px}.hb-select__tag-close{color:var(--hb-color-text-placeholder,#c0c4cc);cursor:pointer;font-size:14px;transition:color .2s}.hb-select__tag-close:hover{color:var(--hb-color-text-regular,#606266)}.hb-select__suffix{align-items:center;color:var(--hb-select-text-color);display:flex;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.hb-select__clear{color:var(--hb-select-placeholder-color);cursor:pointer;font-size:16px;margin-right:8px;transition:color .2s}.hb-select__clear:hover{color:var(--hb-select-text-color)}.hb-select__arrow{font-size:12px;transition:transform .3s}.hb-select--open .hb-select__arrow{transform:rotate(180deg)}.hb-select__dropdown{background-color:var(--hb-select-bg-color);border:1px solid var(--hb-select-border-color);border-radius:4px;box-shadow:0 2px 12px #0000001a;left:0;margin-top:4px;max-height:300px;min-width:100%;overflow-y:auto;position:absolute;top:100%;z-index:1000}.hb-select__menu{list-style:none;margin:0;padding:6px 0}.hb-select__menu-item{align-items:center;color:var(--hb-select-text-color);cursor:pointer;display:flex;font-size:var(--hb-select-font-size);padding:8px 20px;transition:background-color .2s}.hb-select__menu-item:hover:not(.hb-select__menu-item--disabled):not(.hb-select__menu-item--divided){background-color:var(--hb-fill-color-light,#f5f7fa)}.hb-select__menu-item--selected{color:var(--hb-color-primary);font-weight:600}.hb-select__menu-item--disabled{color:var(--hb-color-text-disabled,#c0c4cc);cursor:not-allowed}.hb-select__menu-item--divided{border-top:1px solid var(--hb-border-color-lighter,#e4e7ed);margin-top:6px;padding-top:6px}.hb-select__menu-item--empty{color:var(--hb-select-placeholder-color);cursor:default}.hb-select__menu-item-checkbox{margin-right:8px;text-align:center;width:14px}.hb-select__menu-item-label{flex:1}.hb-select--small{font-size:12px}.hb-select--small .hb-select__input{font-size:12px;height:24px;line-height:24px;padding:0 25px 0 12px}.hb-select--large{font-size:16px}.hb-select--large .hb-select__input{font-size:16px;height:40px;line-height:40px;padding:0 35px 0 18px}.hb-select--disabled{cursor:not-allowed}.hb-select--disabled .hb-select__input{background-color:var(--hb-fill-color-light,#f5f7fa);border-color:var(--hb-select-border-color);color:var(--hb-color-text-disabled,#c0c4cc);cursor:not-allowed}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
+const HbSelectStyle0 = selectCss;
+
+const Select = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.hbChange = index.createEvent(this, "hbChange", 7);
+        this.hbVisibleChange = index.createEvent(this, "hbVisibleChange", 7);
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * 绑定值
+     */
+    modelValue;
+    /**
+     * 可选项数据源
+     */
+    options = [];
+    /**
+     * 输入框占位文本
+     */
+    placeholder = '请选择';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 输入框尺寸
+     */
+    size = 'default';
+    /**
+     * 是否可清空
+     * @default false
+     */
+    clearable = false;
+    /**
+     * 是否多选
+     * @default false
+     */
+    multiple = false;
+    /**
+     * 是否可搜索
+     * @default false
+     */
+    filterable = false;
+    /**
+     * 自定义过滤方法
+     */
+    filterMethod;
+    /**
+     * 是否默认展开
+     * @default false
+     */
+    defaultFirstOption = false;
+    /**
+     * 是否允许创建新条目
+     * @default false
+     */
+    allowCreate = false;
+    /**
+     * 多选时是否将选中值按文字的形式展示
+     * @default false
+     */
+    collapseTags = false;
+    /**
+     * 多选时最多显示多少个tag
+     */
+    maxCollapseTags;
+    isOpen = false;
+    inputValue = '';
+    searchValue = '';
+    filteredOptions = [];
+    /** 键盘高亮的选项索引（-1 表示无） */
+    activeOptionIndex = -1;
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    /**
+     * 下拉框出现/隐藏时触发
+     */
+    hbVisibleChange;
+    clickOutside = clickOutside.createClickOutsideHandler({
+        host: null,
+        isOpen: () => this.isOpen,
+        onClose: () => { this.isOpen = false; this.hbVisibleChange.emit(false); },
+    });
+    componentDidLoad() {
+        this.clickOutside = clickOutside.createClickOutsideHandler({
+            host: this.el,
+            isOpen: () => this.isOpen,
+            onClose: () => { this.isOpen = false; this.hbVisibleChange.emit(false); },
+        });
+        this.clickOutside.connect();
+        this.updateInputValue();
+        if (this.filterable) {
+            this.filteredOptions = this.options;
+        }
+    }
+    disconnectedCallback() {
+        this.clickOutside.disconnect();
+    }
+    handleValueChange() {
+        this.updateInputValue();
+    }
+    handleOptionsChange() {
+        if (this.filterable) {
+            this.filteredOptions = this.options;
+        }
+    }
+    updateInputValue() {
+        if (!this.modelValue) {
+            this.inputValue = '';
+            return;
+        }
+        if (this.multiple && Array.isArray(this.modelValue)) {
+            const labels = this.modelValue.map(val => {
+                const option = this.options.find(opt => opt.value === val);
+                return option ? option.label : String(val);
+            });
+            this.inputValue = labels.join(', ');
+        }
+        else {
+            const option = this.options.find(opt => opt.value === this.modelValue);
+            this.inputValue = option ? option.label : String(this.modelValue);
+        }
+    }
+    handleInputClick = () => {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+        if (this.isOpen)
+            this.activeOptionIndex = -1;
+        this.hbVisibleChange.emit(this.isOpen);
+    };
+    handleWrapperKeydown = (e) => {
+        if (this.disabled)
+            return;
+        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') {
+                e.preventDefault();
+                this.isOpen = true;
+                this.activeOptionIndex = -1;
+                this.hbVisibleChange.emit(true);
+            }
+            return;
+        }
+        const action = a11y.handleListKeyboard(e, {
+            activeIndex: this.activeOptionIndex,
+            itemCount: displayOptions.length,
+            loop: true,
+        });
+        switch (action.type) {
+            case 'navigate':
+                e.preventDefault();
+                this.activeOptionIndex = action.index;
+                break;
+            case 'select': {
+                e.preventDefault();
+                const opt = displayOptions[action.index];
+                if (opt && !opt.disabled)
+                    this.handleSelect(opt);
+                break;
+            }
+            case 'close':
+                e.preventDefault();
+                this.isOpen = false;
+                this.hbVisibleChange.emit(false);
+                break;
+        }
+    };
+    handleSelect = (option) => {
+        if (option.disabled)
+            return;
+        if (this.multiple) {
+            const currentValue = this.modelValue || [];
+            const index = currentValue.indexOf(option.value);
+            if (index > -1) {
+                currentValue.splice(index, 1);
+            }
+            else {
+                currentValue.push(option.value);
+            }
+            this.modelValue = [...currentValue];
+        }
+        else {
+            this.modelValue = option.value;
+            this.isOpen = false;
+            this.hbVisibleChange.emit(false);
+        }
+        this.updateInputValue();
+        this.hbChange.emit(this.modelValue);
+    };
+    handleClear = (e) => {
+        e.stopPropagation();
+        this.modelValue = this.multiple ? [] : undefined;
+        this.inputValue = '';
+        this.isOpen = false;
+        this.hbChange.emit(this.modelValue);
+        this.hbVisibleChange.emit(false);
+    };
+    handleSearch = (e) => {
+        const target = e.target;
+        this.searchValue = target.value;
+        if (this.filterMethod) {
+            this.filterMethod(target.value);
+        }
+        else {
+            this.filteredOptions = this.options.filter(opt => opt.label.toLowerCase().includes(target.value.toLowerCase()));
+        }
+    };
+    isSelected(option) {
+        if (this.multiple && Array.isArray(this.modelValue)) {
+            return this.modelValue.includes(option.value);
+        }
+        return this.modelValue === option.value;
+    }
+    render() {
+        const displayOptions = this.filterable ? this.filteredOptions : this.options;
+        const showClear = this.clearable && this.modelValue !== undefined &&
+            (this.multiple ? this.modelValue.length > 0 : true);
+        return (index.h("div", { key: '74d4a02c34f152b6795a11a54a276a2325e28fc8', 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' }, index.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 ? (index.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 (index.h("span", { class: "hb-select__tag" }, index.h("span", { class: "hb-select__tag-text" }, option ? option.label : val), index.h("span", { class: "hb-select__tag-close", role: "button", "aria-label": "\u79FB\u9664\u6807\u7B7E", onClick: (e) => {
+                    e.stopPropagation();
+                    this.handleSelect(option || { value: val, label: String(val) });
+                } }, "\u00D7")));
+        }), this.collapseTags && this.maxCollapseTags && this.modelValue.length > this.maxCollapseTags && (index.h("span", { class: "hb-select__tag" }, index.h("span", { class: "hb-select__tag-text" }, "+", this.modelValue.length - this.maxCollapseTags))))) : (index.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" })), index.h("span", { key: 'af18dc75d5ae183d953ff4c1ae9a1c437f5cb4f9', class: "hb-select__suffix" }, showClear && (index.h("span", { key: '23d6891fa82878f78de89dea464c1a1787be6695', class: "hb-select__clear", role: "button", "aria-label": "\u6E05\u7A7A", onClick: this.handleClear }, "\u00D7")), index.h("span", { key: '45bef57ec15707fe4f9c9b5fa4699eb8082b27d4', class: "hb-select__arrow" }, "\u25BC"))), this.isOpen && (index.h("div", { key: 'a359fae561a9a25f85a72437f88f6ab11abcd90a', class: "hb-select__dropdown" }, index.h("ul", { key: 'f599eb59c8ff2f7e3effe395253a11c7934b41b8', class: "hb-select__menu", role: "listbox" }, displayOptions.length === 0 ? (index.h("li", { class: "hb-select__menu-item hb-select__menu-item--empty", "aria-disabled": "true" }, "\u65E0\u6570\u636E")) : (displayOptions.map((option, index$1) => (index.h("li", { 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$1 === this.activeOptionIndex,
+            }, role: "option", "aria-selected": this.isSelected(option) ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : undefined, onClick: () => this.handleSelect(option) }, this.multiple && (index.h("span", { class: "hb-select__menu-item-checkbox" }, this.isSelected(option) ? '✓' : '')), index.h("span", { class: "hb-select__menu-item-label" }, option.label))))))))));
+    }
+    static get watchers() { return {
+        "modelValue": ["handleValueChange"],
+        "options": ["handleOptionsChange"]
+    }; }
+};
+Select.style = HbSelectStyle0;
+
+exports.hb_select = Select;
+
+//# sourceMappingURL=hb-select.cjs.entry.js.map

package/dist/cjs/hb-select.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-select.entry.cjs.js","mappings":"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","names":["createClickOutsideHandler","handleListKeyboard","h","index"],"sources":["src/components/Select/select.css?tag=hb-select&encapsulation=shadow","src/components/Select/Select.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n  --hb-select-font-size: 14px;\n  --hb-select-height: 32px;\n  --hb-select-border-color: var(--hb-border-color, #dcdfe6);\n  --hb-select-border-color-hover: var(--hb-color-primary);\n  --hb-select-bg-color: var(--hb-color-white, #ffffff);\n  --hb-select-text-color: var(--hb-color-text-regular, #606266);\n  --hb-select-placeholder-color: var(--hb-color-text-placeholder, #c0c4cc);\n}\n\n.hb-select {\n  display: inline-block;\n  position: relative;\n  width: 240px;\n}\n\n.hb-select__input-wrapper {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  cursor: pointer;\n}\n\n.hb-select__input {\n  display: inline-block;\n  width: 100%;\n  height: var(--hb-select-height);\n  line-height: var(--hb-select-height);\n  padding: 0 30px 0 15px;\n  font-size: var(--hb-select-font-size);\n  color: var(--hb-select-text-color);\n  background-color: var(--hb-select-bg-color);\n  border: 1px solid var(--hb-select-border-color);\n  border-radius: 4px;\n  box-sizing: border-box;\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n}\n\n.hb-select__input::placeholder {\n  color: var(--hb-select-placeholder-color);\n}\n\n.hb-select__input:hover:not(:disabled) {\n  border-color: var(--hb-select-border-color-hover);\n}\n\n.hb-select__input:focus {\n  border-color: var(--hb-select-border-color-hover);\n}\n\n.hb-select__tags {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  padding: 0 30px 0 5px;\n  min-height: var(--hb-select-height);\n  border: 1px solid var(--hb-select-border-color);\n  border-radius: 4px;\n  background-color: var(--hb-select-bg-color);\n}\n\n.hb-select__tag {\n  display: inline-flex;\n  align-items: center;\n  height: 24px;\n  padding: 0 8px;\n  margin: 2px 0 2px 6px;\n  background-color: var(--hb-fill-color-light, #f0f2f5);\n  border: 1px solid var(--hb-border-color-lighter, #e4e7ed);\n  border-radius: 4px;\n  font-size: 12px;\n  color: var(--hb-color-text-regular, #606266);\n}\n\n.hb-select__tag-text {\n  margin-right: 4px;\n}\n\n.hb-select__tag-close {\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--hb-color-text-placeholder, #c0c4cc);\n  transition: color 0.2s;\n}\n\n.hb-select__tag-close:hover {\n  color: var(--hb-color-text-regular, #606266);\n}\n\n.hb-select__suffix {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  color: var(--hb-select-text-color);\n}\n\n.hb-select__clear {\n  margin-right: 8px;\n  cursor: pointer;\n  font-size: 16px;\n  color: var(--hb-select-placeholder-color);\n  transition: color 0.2s;\n}\n\n.hb-select__clear:hover {\n  color: var(--hb-select-text-color);\n}\n\n.hb-select__arrow {\n  font-size: 12px;\n  transition: transform 0.3s;\n}\n\n.hb-select--open .hb-select__arrow {\n  transform: rotate(180deg);\n}\n\n.hb-select__dropdown {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  margin-top: 4px;\n  background-color: var(--hb-select-bg-color);\n  border: 1px solid var(--hb-select-border-color);\n  border-radius: 4px;\n  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  min-width: 100%;\n  max-height: 300px;\n  overflow-y: auto;\n}\n\n.hb-select__menu {\n  margin: 0;\n  padding: 6px 0;\n  list-style: none;\n}\n\n.hb-select__menu-item {\n  display: flex;\n  align-items: center;\n  padding: 8px 20px;\n  font-size: var(--hb-select-font-size);\n  color: var(--hb-select-text-color);\n  cursor: pointer;\n  transition: background-color 0.2s;\n}\n\n.hb-select__menu-item:hover:not(.hb-select__menu-item--disabled):not(.hb-select__menu-item--divided) {\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-select__menu-item--selected {\n  color: var(--hb-color-primary);\n  font-weight: 600;\n}\n\n.hb-select__menu-item--disabled {\n  color: var(--hb-color-text-disabled, #c0c4cc);\n  cursor: not-allowed;\n}\n\n.hb-select__menu-item--divided {\n  border-top: 1px solid var(--hb-border-color-lighter, #e4e7ed);\n  margin-top: 6px;\n  padding-top: 6px;\n}\n\n.hb-select__menu-item--empty {\n  color: var(--hb-select-placeholder-color);\n  cursor: default;\n}\n\n.hb-select__menu-item-checkbox {\n  margin-right: 8px;\n  width: 14px;\n  text-align: center;\n}\n\n.hb-select__menu-item-label {\n  flex: 1;\n}\n\n.hb-select--small {\n  font-size: 12px;\n}\n\n.hb-select--small .hb-select__input {\n  height: 24px;\n  line-height: 24px;\n  font-size: 12px;\n  padding: 0 25px 0 12px;\n}\n\n.hb-select--large {\n  font-size: 16px;\n}\n\n.hb-select--large .hb-select__input {\n  height: 40px;\n  line-height: 40px;\n  font-size: 16px;\n  padding: 0 35px 0 18px;\n}\n\n.hb-select--disabled {\n  cursor: not-allowed;\n}\n\n.hb-select--disabled .hb-select__input {\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n  border-color: var(--hb-select-border-color);\n  color: var(--hb-color-text-disabled, #c0c4cc);\n  cursor: not-allowed;\n}\n\n","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}

package/dist/cjs/hb-skeleton.cjs.entry.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5aa5c817.js');
+
+const skeletonCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{display:block}.hb-skeleton{display:flex;width:100%}.hb-skeleton__header{padding-right:var(--hb-spacing-md)}.hb-skeleton__content{flex:1}.hb-skeleton__avatar{border-radius:var(--hb-border-radius-round);display:inline-block;height:32px;line-height:32px;vertical-align:top;width:32px}.hb-skeleton__avatar,.hb-skeleton__title{background:var(--hb-color-fill-secondary)}.hb-skeleton__title{border-radius:var(--hb-border-radius-sm);height:16px;margin-top:var(--hb-spacing-md);width:28%}.hb-skeleton__paragraph{list-style:none;margin:var(--hb-spacing-md)0 0 0;padding:0}.hb-skeleton__row{background:var(--hb-color-fill-secondary);border-radius:var(--hb-border-radius-sm);height:16px;list-style:none;margin-bottom:var(--hb-spacing-md);width:100%}.hb-skeleton__row:last-child{margin-bottom:0}.hb-skeleton__row--short{width:61%}.hb-skeleton--active .hb-skeleton__avatar,.hb-skeleton--active .hb-skeleton__row,.hb-skeleton--active .hb-skeleton__title{animation:hb-skeleton-loading 1.4s infinite;background:linear-gradient(90deg,var(--hb-color-fill-secondary)25%,var(--hb-color-fill)37%,var(--hb-color-fill-secondary)63%);background-size:400% 100%}@keyframes hb-skeleton-loading{0%{background-position:100%}to{background-position:0}}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
+const HbSkeletonStyle0 = skeletonCss;
+
+const Skeleton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** 是否展示动画效果 */
+    active = false;
+    /** 占位段落行数 */
+    rows = 3;
+    /** 为 true 时显示骨架，为 false 时直接渲染子内容 */
+    loading = true;
+    /** 是否显示头像占位图 */
+    avatar = false;
+    /** 是否显示标题占位图 */
+    showTitle = true;
+    /** 是否显示段落占位图 */
+    paragraph = true;
+    renderAvatar() {
+        return index.h("div", { class: "hb-skeleton__avatar" });
+    }
+    renderTitle() {
+        return index.h("div", { class: "hb-skeleton__title" });
+    }
+    renderParagraph() {
+        const count = Math.max(1, this.rows);
+        const rowsArr = Array.from({ length: count }, (_, i) => i);
+        return (index.h("ul", { class: "hb-skeleton__paragraph" }, rowsArr.map((i) => {
+            // 最后一行宽度收窄，更贴近真实段落排版
+            const isLast = i === count - 1;
+            return index.h("li", { class: { 'hb-skeleton__row': true, 'hb-skeleton__row--short': isLast } });
+        })));
+    }
+    render() {
+        // loading=false 时直接透传子内容
+        if (!this.loading) {
+            return (index.h("div", { class: "hb-skeleton" }, index.h("slot", null)));
+        }
+        return (index.h("div", { class: { 'hb-skeleton': true, 'hb-skeleton--active': this.active } }, this.avatar && index.h("div", { class: "hb-skeleton__header" }, this.renderAvatar()), index.h("div", { class: "hb-skeleton__content" }, this.showTitle && this.renderTitle(), this.paragraph && this.renderParagraph())));
+    }
+};
+Skeleton.style = HbSkeletonStyle0;
+
+exports.hb_skeleton = Skeleton;
+
+//# sourceMappingURL=hb-skeleton.cjs.entry.js.map

package/dist/cjs/hb-skeleton.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-skeleton.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,uzNAAuzN,CAAC;AAC50N,yBAAe,WAAW;;MCUb,QAAQ;;;;;IAEX,MAAM,GAAY,KAAK,CAAC;;IAGxB,IAAI,GAAW,CAAC,CAAC;;IAGjB,OAAO,GAAY,IAAI,CAAC;;IAGxB,MAAM,GAAY,KAAK,CAAC;;IAGxB,SAAS,GAAY,IAAI,CAAC;;IAG1B,SAAS,GAAY,IAAI,CAAC;IAE1B,YAAY;QAClB,OAAOA,iBAAK,KAAK,EAAC,qBAAqB,GAAO,CAAC;KAChD;IAEO,WAAW;QACjB,OAAOA,iBAAK,KAAK,EAAC,oBAAoB,GAAO,CAAC;KAC/C;IAEO,eAAe;QACrB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QACrC,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;QAC3D,QACEA,gBAAI,KAAK,EAAC,wBAAwB,IAC/B,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;;YAEb,MAAM,MAAM,GAAG,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC;YAC/B,OAAOA,gBAAI,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,yBAAyB,EAAE,MAAM,EAAE,GAAO,CAAC;SAC1F,CAAC,CACC,EACL;KACH;IAED,MAAM;;QAEJ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,QACEA,iBAAK,KAAK,EAAC,aAAa,IACtBA,qBAAQ,CACJ,EACN;SACH;QAED,QACEA,iBAAK,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,qBAAqB,EAAE,IAAI,CAAC,MAAM,EAAE,IACpE,IAAI,CAAC,MAAM,IAAIA,iBAAK,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,YAAY,EAAE,CAAO,EAC5EA,iBAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,EAAE,EACpC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,eAAe,EAAE,CACrC,CACF,EACN;KACH;;;;;;","names":["h"],"sources":["src/components/Skeleton/skeleton.css?tag=hb-skeleton&encapsulation=shadow","src/components/Skeleton/Skeleton.tsx"],"sourcesContent":[":host { display: block; }\n\n.hb-skeleton { display: flex; width: 100%; }\n\n.hb-skeleton__header { padding-right: var(--hb-spacing-md); }\n\n.hb-skeleton__content { flex: 1; }\n\n/* 头像占位 */\n.hb-skeleton__avatar {\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  line-height: 32px;\n  background: var(--hb-color-fill-secondary);\n  border-radius: var(--hb-border-radius-round);\n  vertical-align: top;\n}\n\n/* 标题占位 */\n.hb-skeleton__title {\n  width: 28%;\n  height: 16px;\n  margin-top: var(--hb-spacing-md);\n  background: var(--hb-color-fill-secondary);\n  border-radius: var(--hb-border-radius-sm);\n}\n\n/* 段落占位 */\n.hb-skeleton__paragraph { padding: 0; margin: var(--hb-spacing-md) 0 0 0; list-style: none; }\n.hb-skeleton__row {\n  width: 100%;\n  height: 16px;\n  margin-bottom: var(--hb-spacing-md);\n  background: var(--hb-color-fill-secondary);\n  border-radius: var(--hb-border-radius-sm);\n  list-style: none;\n}\n.hb-skeleton__row:last-child { margin-bottom: 0; }\n.hb-skeleton__row--short { width: 61%; }\n\n/* 动画状态：对每个占位块应用 shimmer */\n.hb-skeleton--active .hb-skeleton__avatar,\n.hb-skeleton--active .hb-skeleton__title,\n.hb-skeleton--active .hb-skeleton__row {\n  background: linear-gradient(\n    90deg,\n    var(--hb-color-fill-secondary) 25%,\n    var(--hb-color-fill) 37%,\n    var(--hb-color-fill-secondary) 63%\n  );\n  background-size: 400% 100%;\n  animation: hb-skeleton-loading 1.4s ease infinite;\n}\n\n@keyframes hb-skeleton-loading {\n  0% { background-position: 100% 50%; }\n  100% { background-position: 0 50%; }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Skeleton 骨架屏组件\n * 在需要等待加载数据的内容位置提供一个占位图形组合\n */\n@Component({\n  tag: 'hb-skeleton',\n  styleUrl: 'skeleton.css',\n  shadow: true,\n})\nexport class Skeleton {\n  /** 是否展示动画效果 */\n  @Prop() active: boolean = false;\n\n  /** 占位段落行数 */\n  @Prop() rows: number = 3;\n\n  /** 为 true 时显示骨架，为 false 时直接渲染子内容 */\n  @Prop() loading: boolean = true;\n\n  /** 是否显示头像占位图 */\n  @Prop() avatar: boolean = false;\n\n  /** 是否显示标题占位图 */\n  @Prop() showTitle: boolean = true;\n\n  /** 是否显示段落占位图 */\n  @Prop() paragraph: boolean = true;\n\n  private renderAvatar() {\n    return <div class=\"hb-skeleton__avatar\"></div>;\n  }\n\n  private renderTitle() {\n    return <div class=\"hb-skeleton__title\"></div>;\n  }\n\n  private renderParagraph() {\n    const count = Math.max(1, this.rows);\n    const rowsArr = Array.from({ length: count }, (_, i) => i);\n    return (\n      <ul class=\"hb-skeleton__paragraph\">\n        {rowsArr.map((i) => {\n          // 最后一行宽度收窄，更贴近真实段落排版\n          const isLast = i === count - 1;\n          return <li class={{ 'hb-skeleton__row': true, 'hb-skeleton__row--short': isLast }}></li>;\n        })}\n      </ul>\n    );\n  }\n\n  render() {\n    // loading=false 时直接透传子内容\n    if (!this.loading) {\n      return (\n        <div class=\"hb-skeleton\">\n          <slot />\n        </div>\n      );\n    }\n\n    return (\n      <div class={{ 'hb-skeleton': true, 'hb-skeleton--active': this.active }}>\n        {this.avatar && <div class=\"hb-skeleton__header\">{this.renderAvatar()}</div>}\n        <div class=\"hb-skeleton__content\">\n          {this.showTitle && this.renderTitle()}\n          {this.paragraph && this.renderParagraph()}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/hb-slider.cjs.entry.js

@@ -0,0 +1,172 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5aa5c817.js');
+
+const sliderCss = "/*! 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-slider-main-bg-color:var(--hb-color-primary);--hb-slider-runway-bg-color:var(--hb-fill-color-light,#e4e7ed);--hb-slider-stop-bg-color:var(--hb-color-white,#fff);--hb-slider-button-size:20px;display:inline-block}.hb-slider{align-items:center;display:flex;height:40px;position:relative;width:100%}.hb-slider--vertical{flex-direction:column;height:100%;width:40px}.hb-slider__runway{background-color:var(--hb-slider-runway-bg-color);border-radius:3px;cursor:pointer;height:6px;margin:16px 0;position:relative;vertical-align:middle;width:100%}.hb-slider--vertical .hb-slider__runway{height:100%;margin:0 16px;width:6px}.hb-slider__bar{background-color:var(--hb-slider-main-bg-color);border-bottom-left-radius:3px;border-top-left-radius:3px;height:6px;left:0;position:absolute;top:0}.hb-slider--vertical .hb-slider__bar{border-bottom-left-radius:0;border-top-left-radius:3px;border-top-right-radius:3px;bottom:0;height:auto;top:auto;width:6px}.hb-slider__button-wrapper{background-color:#0000;margin-left:calc(var(--hb-slider-button-size)/-2);outline:none;position:absolute;text-align:center;top:50%;transform:translateY(-50%);-webkit-user-select:none;user-select:none;z-index:1001}.hb-slider--vertical .hb-slider__button-wrapper{bottom:0;left:50%;margin-bottom:calc(var(--hb-slider-button-size)/-2);margin-left:0;top:auto;transform:translate(-50%)}.hb-slider__button{background-color:var(--hb-color-white,#fff);border:2px solid var(--hb-slider-main-bg-color);border-radius:50%;cursor:grab;height:var(--hb-slider-button-size);transition:all .2s;-webkit-user-select:none;user-select:none;width:var(--hb-slider-button-size)}.hb-slider__button:active{cursor:grabbing}.hb-slider__button-wrapper--hover .hb-slider__button,.hb-slider__button-wrapper:hover .hb-slider__button{transform:scale(1.2)}.hb-slider__tooltip{background-color:#000000bf;border-radius:4px;bottom:calc(100% + 12px);color:var(--hb-color-white,#fff);font-size:12px;padding:6px 8px;white-space:nowrap}.hb-slider__tooltip,.hb-slider__tooltip:after{left:50%;position:absolute;transform:translate(-50%)}.hb-slider__tooltip:after{border:4px solid #0000;border-top-color:#000000bf;content:\"\";top:100%}.hb-slider--disabled{cursor:not-allowed}.hb-slider--disabled .hb-slider__runway{background-color:var(--hb-fill-color-light,#e4e7ed);cursor:not-allowed}.hb-slider--disabled .hb-slider__bar{background-color:var(--hb-color-text-disabled,#c0c4cc)}.hb-slider--disabled .hb-slider__button{border-color:var(--hb-color-text-disabled,#c0c4cc);cursor:not-allowed}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
+const HbSliderStyle0 = sliderCss;
+
+const Slider = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.hbChange = index.createEvent(this, "hbChange", 7);
+        this.hbInput = index.createEvent(this, "hbInput", 7);
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * 绑定值
+     */
+    modelValue = 0;
+    /**
+     * 最小值
+     * @default 0
+     */
+    min = 0;
+    /**
+     * 最大值
+     * @default 100
+     */
+    max = 100;
+    /**
+     * 步长
+     * @default 1
+     */
+    step = 1;
+    /**
+     * 是否显示工具提示
+     * @default true
+     */
+    showTooltip = true;
+    /**
+     * 格式化 tooltip message
+     */
+    formatTooltip;
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 是否为范围选择
+     * @default false
+     */
+    range = false;
+    /**
+     * 是否竖向模式
+     * @default false
+     */
+    vertical = false;
+    /**
+     * 高度，竖向模式时必填
+     */
+    height;
+    dragging = false;
+    currentValue = 0;
+    tooltipVisible = false;
+    tooltipValue = 0;
+    sliderRef;
+    isDragging = false;
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    /**
+     * 值改变事件（拖拽时实时触发）
+     */
+    hbInput;
+    componentDidLoad() {
+        this.currentValue = this.modelValue;
+        this.addEventListeners();
+    }
+    disconnectedCallback() {
+        this.removeEventListeners();
+    }
+    addEventListeners() {
+        document.addEventListener('mousemove', this.handleMouseMove);
+        document.addEventListener('mouseup', this.handleMouseUp);
+    }
+    removeEventListeners() {
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+    }
+    getPercentage(value) {
+        return ((value - this.min) / (this.max - this.min)) * 100;
+    }
+    getValueFromPercentage(percentage) {
+        const value = this.min + (percentage / 100) * (this.max - this.min);
+        return Math.round(value / this.step) * this.step;
+    }
+    handleMouseDown = (e) => {
+        if (this.disabled)
+            return;
+        e.preventDefault();
+        this.isDragging = true;
+        this.dragging = true;
+        this.handleDrag(e);
+    };
+    handleMouseMove = (e) => {
+        if (!this.isDragging)
+            return;
+        this.handleDrag(e);
+    };
+    handleMouseUp = () => {
+        if (!this.isDragging)
+            return;
+        this.isDragging = false;
+        this.dragging = false;
+        this.tooltipVisible = false;
+        this.hbChange.emit(this.currentValue);
+    };
+    handleDrag(e) {
+        if (!this.sliderRef)
+            return;
+        const rect = this.sliderRef.getBoundingClientRect();
+        const percentage = this.vertical
+            ? 1 - (e.clientY - rect.top) / rect.height
+            : (e.clientX - rect.left) / rect.width;
+        const clampedPercentage = Math.max(0, Math.min(100, percentage * 100));
+        const value = this.getValueFromPercentage(clampedPercentage);
+        if (this.range) {
+            const values = this.currentValue;
+            // 简化处理：更新第一个值
+            this.currentValue = [value, values[1] || this.max];
+        }
+        else {
+            this.currentValue = value;
+            this.tooltipValue = value;
+            this.tooltipVisible = true;
+        }
+        this.modelValue = this.currentValue;
+        this.hbInput.emit(this.currentValue);
+    }
+    formatValue(value) {
+        if (this.formatTooltip) {
+            return this.formatTooltip(value);
+        }
+        return String(value);
+    }
+    render() {
+        const percentage = this.range
+            ? this.getPercentage(this.currentValue[0])
+            : this.getPercentage(this.currentValue);
+        return (index.h("div", { key: 'b8ee15c3375f6786c252e6755ff6dd5d4ab0023f', class: {
+                'hb-slider': true,
+                'hb-slider--vertical': this.vertical,
+                'hb-slider--disabled': this.disabled,
+            }, style: this.vertical && this.height ? { height: this.height } : undefined }, index.h("div", { key: 'c75f1194e3a8a630d4ffa0cb82579fddc42e2461', class: "hb-slider__runway", ref: (el) => (this.sliderRef = el), onMouseDown: this.handleMouseDown }, index.h("div", { key: '5dcf4d4807e85cd4a96fd919d4b9d999f0d837d7', class: "hb-slider__bar", style: {
+                [this.vertical ? 'height' : 'width']: `${percentage}%`,
+                [this.vertical ? 'bottom' : 'left']: '0',
+            } }), index.h("div", { key: 'e10dc431c839183de585debfd9991a2d75922cc9', class: {
+                'hb-slider__button-wrapper': true,
+                'hb-slider__button-wrapper--hover': this.tooltipVisible,
+            }, style: {
+                [this.vertical ? 'bottom' : 'left']: `${percentage}%`,
+            } }, this.showTooltip && this.tooltipVisible && (index.h("div", { key: '270c0d8dd46b03fac7b4b8e62265a14158de18b7', class: "hb-slider__tooltip" }, this.formatValue(this.tooltipValue))), index.h("div", { key: '20772f2a08bed8c009c119b1c148ff0448c9a288', class: "hb-slider__button" })))));
+    }
+};
+Slider.style = HbSliderStyle0;
+
+exports.hb_slider = Slider;
+
+//# sourceMappingURL=hb-slider.cjs.entry.js.map