huibo-ui 0.3.0

package/dist/collection/components/Tabs/Tabs.js

@@ -0,0 +1,221 @@
+import { h } from "@stencil/core";
+import { handleListKeyboard } from "../../utils/a11y";
+/**
+ * Tabs 标签页组件
+ * 选项卡切换组件
+ */
+export class Tabs {
+    el;
+    /** 当前激活的标签 */
+    modelValue = '';
+    /** 标签风格类型 */
+    type = 'line';
+    /** 是否可关闭 */
+    closable = false;
+    activeTab = '';
+    tabs = [];
+    /** 标签切换事件 */
+    hbTabChange;
+    /** 标签关闭事件 */
+    hbTabRemove;
+    componentDidLoad() {
+        this.collectTabs();
+        if (!this.modelValue && this.tabs.length > 0) {
+            this.activeTab = this.tabs[0].key;
+            this.modelValue = this.activeTab;
+        }
+        else {
+            this.activeTab = this.modelValue;
+        }
+        this.updatePaneVisibility();
+    }
+    handleModelValueChange() {
+        this.activeTab = this.modelValue;
+        this.updatePaneVisibility();
+    }
+    collectTabs() {
+        const panes = this.el.querySelectorAll('hb-tab-pane');
+        const tabs = [];
+        panes.forEach((pane) => {
+            tabs.push({
+                key: pane.getAttribute('key') || '',
+                label: pane.getAttribute('label') || '',
+            });
+        });
+        this.tabs = tabs;
+    }
+    updatePaneVisibility() {
+        const panes = this.el.querySelectorAll('hb-tab-pane');
+        panes.forEach((pane) => {
+            const isActive = pane.getAttribute('key') === this.activeTab;
+            pane.setAttribute('active', String(isActive));
+        });
+    }
+    handleTabClick = (key) => {
+        this.activeTab = key;
+        this.modelValue = key;
+        this.hbTabChange.emit(key);
+        this.updatePaneVisibility();
+        this.moveFocusToTab(key);
+    };
+    /** WAI-ARIA tabs：左右（横排）/上下（竖排）箭头在 tab 间切换聚焦的 tab。 */
+    handleTabKeydown = (e, currentIndex) => {
+        // 仅响应方向键 / Home / End；Enter/Space 由浏览器对可聚焦元素原生触发 click。
+        const isArrow = e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown' ||
+            e.key === 'Home' || e.key === 'End';
+        if (!isArrow)
+            return;
+        e.preventDefault();
+        const action = handleListKeyboard(e, {
+            activeIndex: currentIndex,
+            itemCount: this.tabs.length,
+            loop: true,
+        });
+        if (action.type === 'navigate' && this.tabs[action.index]) {
+            this.handleTabClick(this.tabs[action.index].key);
+        }
+    };
+    moveFocusToTab(key) {
+        const idx = this.tabs.findIndex((t) => t.key === key);
+        if (idx < 0)
+            return;
+        const items = this.el.shadowRoot?.querySelectorAll('.hb-tabs__item');
+        items?.[idx]?.focus();
+    }
+    render() {
+        return (h("div", { key: '796e99789e8493219eebb94cc65fcbc2d7215518', class: { 'hb-tabs': true, [`hb-tabs--${this.type}`]: true } }, h("div", { key: 'f291d1e3acc730d0243aef4514018b881748c9ef', class: "hb-tabs__header" }, h("div", { key: 'a3cf56bb33eafea5b36d6f38e616838b9436d58b', class: "hb-tabs__nav", role: "tablist" }, this.tabs.map((tab, index) => {
+            const selected = tab.key === this.activeTab;
+            const tabId = `hb-tabs__tab-${tab.key}`;
+            return (h("div", { class: {
+                    'hb-tabs__item': true,
+                    'hb-tabs__item--active': selected,
+                }, role: "tab", id: tabId, "aria-selected": selected ? 'true' : 'false', tabindex: selected ? 0 : -1, "aria-controls": `hb-tabs__panel-${tab.key}`, onClick: () => this.handleTabClick(tab.key), onKeyDown: (e) => this.handleTabKeydown(e, index) }, h("span", { class: "hb-tabs__item-label" }, tab.label), this.closable && (h("span", { class: "hb-tabs__item-close", role: "button", "aria-label": "\u5173\u95ED\u6807\u7B7E", tabIndex: -1, onClick: (e) => {
+                    e.stopPropagation();
+                    this.hbTabRemove.emit(tab.key);
+                } }, "\u00D7"))));
+        }))), h("div", { key: '45fee79ae1148bc6385bcb161c757d0226b4309c', class: "hb-tabs__content" }, h("slot", { key: 'cb00f1ed24d5a937e378c238097a251b45f323c6' }))));
+    }
+    static get is() { return "hb-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tabs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modelValue": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5F53\u524D\u6FC0\u6D3B\u7684\u6807\u7B7E"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "model-value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'line' | 'card' | 'border-card'",
+                    "resolved": "\"border-card\" | \"card\" | \"line\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6807\u7B7E\u98CE\u683C\u7C7B\u578B"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'line'"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u53EF\u5173\u95ED"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "closable",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeTab": {},
+            "tabs": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbTabChange",
+                "name": "hbTabChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6807\u7B7E\u5207\u6362\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "hbTabRemove",
+                "name": "hbTabRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6807\u7B7E\u5173\u95ED\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "modelValue",
+                "methodName": "handleModelValueChange"
+            }];
+    }
+}
+//# sourceMappingURL=Tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Watch, Event, EventEmitter } from '@stencil/core';\nimport { handleListKeyboard } from '../../utils/a11y';\n\n/**\n * Tabs 标签页组件\n * 选项卡切换组件\n */\n@Component({\n  tag: 'hb-tabs',\n  styleUrl: 'tabs.css',\n  shadow: true,\n})\nexport class Tabs {\n  @Element() el: HTMLElement;\n\n  /** 当前激活的标签 */\n  @Prop({ mutable: true }) modelValue: string = '';\n\n  /** 标签风格类型 */\n  @Prop() type: 'line' | 'card' | 'border-card' = 'line';\n\n  /** 是否可关闭 */\n  @Prop() closable: boolean = false;\n\n  @State() activeTab: string = '';\n  @State() tabs: { key: string; label: string }[] = [];\n\n  /** 标签切换事件 */\n  @Event() hbTabChange: EventEmitter<string>;\n\n  /** 标签关闭事件 */\n  @Event() hbTabRemove: EventEmitter<string>;\n\n  componentDidLoad() {\n    this.collectTabs();\n    if (!this.modelValue && this.tabs.length > 0) {\n      this.activeTab = this.tabs[0].key;\n      this.modelValue = this.activeTab;\n    } else {\n      this.activeTab = this.modelValue;\n    }\n    this.updatePaneVisibility();\n  }\n\n  @Watch('modelValue')\n  handleModelValueChange() {\n    this.activeTab = this.modelValue;\n    this.updatePaneVisibility();\n  }\n\n  private collectTabs() {\n    const panes = this.el.querySelectorAll('hb-tab-pane');\n    const tabs: { key: string; label: string }[] = [];\n    panes.forEach((pane) => {\n      tabs.push({\n        key: pane.getAttribute('key') || '',\n        label: pane.getAttribute('label') || '',\n      });\n    });\n    this.tabs = tabs;\n  }\n\n  private updatePaneVisibility() {\n    const panes = this.el.querySelectorAll('hb-tab-pane');\n    panes.forEach((pane) => {\n      const isActive = pane.getAttribute('key') === this.activeTab;\n      pane.setAttribute('active', String(isActive));\n    });\n  }\n\n  private handleTabClick = (key: string) => {\n    this.activeTab = key;\n    this.modelValue = key;\n    this.hbTabChange.emit(key);\n    this.updatePaneVisibility();\n    this.moveFocusToTab(key);\n  };\n\n  /** WAI-ARIA tabs：左右（横排）/上下（竖排）箭头在 tab 间切换聚焦的 tab。 */\n  private handleTabKeydown = (e: KeyboardEvent, currentIndex: number) => {\n    // 仅响应方向键 / Home / End；Enter/Space 由浏览器对可聚焦元素原生触发 click。\n    const isArrow =\n      e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown' ||\n      e.key === 'Home' || e.key === 'End';\n    if (!isArrow) return;\n    e.preventDefault();\n    const action = handleListKeyboard(e, {\n      activeIndex: currentIndex,\n      itemCount: this.tabs.length,\n      loop: true,\n    });\n    if (action.type === 'navigate' && this.tabs[action.index]) {\n      this.handleTabClick(this.tabs[action.index].key);\n    }\n  };\n\n  private moveFocusToTab(key: string) {\n    const idx = this.tabs.findIndex((t) => t.key === key);\n    if (idx < 0) return;\n    const items = this.el.shadowRoot?.querySelectorAll<HTMLElement>('.hb-tabs__item');\n    items?.[idx]?.focus();\n  }\n\n  render() {\n    return (\n      <div class={{ 'hb-tabs': true, [`hb-tabs--${this.type}`]: true }}>\n        <div class=\"hb-tabs__header\">\n          <div class=\"hb-tabs__nav\" role=\"tablist\">\n            {this.tabs.map((tab, index) => {\n              const selected = tab.key === this.activeTab;\n              const tabId = `hb-tabs__tab-${tab.key}`;\n              return (\n                <div\n                  class={{\n                    'hb-tabs__item': true,\n                    'hb-tabs__item--active': selected,\n                  }}\n                  role=\"tab\"\n                  id={tabId}\n                  aria-selected={selected ? 'true' : 'false'}\n                  tabindex={selected ? 0 : -1}\n                  aria-controls={`hb-tabs__panel-${tab.key}`}\n                  onClick={() => this.handleTabClick(tab.key)}\n                  onKeyDown={(e) => this.handleTabKeydown(e, index)}\n                >\n                  <span class=\"hb-tabs__item-label\">{tab.label}</span>\n                  {this.closable && (\n                    <span\n                      class=\"hb-tabs__item-close\"\n                      role=\"button\"\n                      aria-label=\"关闭标签\"\n                      tabIndex={-1}\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        this.hbTabRemove.emit(tab.key);\n                      }}\n                    >\n                      ×\n                    </span>\n                  )}\n                </div>\n              );\n            })}\n          </div>\n        </div>\n        <div class=\"hb-tabs__content\">\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Tabs/tabs.css

@@ -0,0 +1,66 @@
+:host {
+  display: block;
+}
+
+.hb-tabs__header {
+  border-bottom: 1px solid var(--hb-color-border-secondary);
+  margin-bottom: var(--hb-spacing-md);
+}
+
+.hb-tabs__nav {
+  display: flex;
+  gap: var(--hb-spacing-xs);
+}
+
+.hb-tabs__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: var(--hb-spacing-xs) var(--hb-spacing-md);
+  font-size: var(--hb-font-size-sm);
+  color: var(--hb-color-text-secondary);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all var(--hb-transition-duration) var(--hb-transition-function);
+  user-select: none;
+}
+
+.hb-tabs__item:hover {
+  color: var(--hb-color-primary);
+}
+
+.hb-tabs__item--active {
+  color: var(--hb-color-primary);
+  border-bottom-color: var(--hb-color-primary);
+}
+
+/* ---- card 类型 ---- */
+.hb-tabs--card .hb-tabs__item {
+  border: 1px solid var(--hb-color-border);
+  border-bottom: none;
+  border-radius: var(--hb-border-radius-sm) var(--hb-border-radius-sm) 0 0;
+  background: var(--hb-color-fill-quaternary);
+}
+.hb-tabs--card .hb-tabs__item--active {
+  background: var(--hb-color-bg);
+  border-bottom-color: var(--hb-color-bg);
+  margin-bottom: -1px;
+}
+
+.hb-tabs__item-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  font-size: 11px;
+  transition: background-color var(--hb-transition-duration);
+}
+.hb-tabs__item-close:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.hb-tabs__content {
+  color: var(--hb-color-text);
+}

package/dist/collection/components/Tag/Tag.js

@@ -0,0 +1,167 @@
+import { h } from "@stencil/core";
+/**
+ * Tag 标签组件
+ * 用于标记和选择
+ */
+export class Tag {
+    /** 标签类型 */
+    type = 'default';
+    /** 是否可关闭 */
+    closable = false;
+    /** 主题效果 */
+    effect = 'light';
+    /** 是否圆角 */
+    round = false;
+    /** 标签尺寸 */
+    size = 'default';
+    /** 关闭事件 */
+    hbClose;
+    handleClose = (e) => {
+        e.stopPropagation();
+        this.hbClose.emit();
+    };
+    render() {
+        return (h("span", { key: 'e8663d8679aafe8d0838e5bc247ce0023fd64234', class: {
+                'hb-tag': true,
+                [`hb-tag--${this.type}`]: true,
+                [`hb-tag--${this.effect}`]: true,
+                'hb-tag--round': this.round,
+                [`hb-tag--${this.size}`]: true,
+            } }, h("span", { key: 'fb6d35fb1a76eac78bee548c74d0fb4aff560c28', class: "hb-tag__content" }, h("slot", { key: '450089e1e654bc339d6f99b8d763491277fc2b0e' })), this.closable && (h("span", { key: '8c115976d98f2242543f208d054cd2493b94373a', class: "hb-tag__close", role: "button", "aria-label": "\u79FB\u9664\u6807\u7B7E", tabIndex: 0, onClick: this.handleClose }, "\u00D7"))));
+    }
+    static get is() { return "hb-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tag.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'",
+                    "resolved": "\"danger\" | \"default\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6807\u7B7E\u7C7B\u578B"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u53EF\u5173\u95ED"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "closable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "effect": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dark' | 'light' | 'plain'",
+                    "resolved": "\"dark\" | \"light\" | \"plain\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u4E3B\u9898\u6548\u679C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "effect",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
+            "round": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u5706\u89D2"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "round",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'default' | 'large'",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6807\u7B7E\u5C3A\u5BF8"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbClose",
+                "name": "hbClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5173\u95ED\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=Tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAExE;;;GAGG;AAMH,MAAM,OAAO,GAAG;IACd,WAAW;IACH,IAAI,GAAsE,SAAS,CAAC;IAE5F,YAAY;IACJ,QAAQ,GAAY,KAAK,CAAC;IAElC,WAAW;IACH,MAAM,GAA+B,OAAO,CAAC;IAErD,WAAW;IACH,KAAK,GAAY,KAAK,CAAC;IAE/B,WAAW;IACH,IAAI,GAAkC,SAAS,CAAC;IAExD,WAAW;IACF,OAAO,CAAqB;IAE7B,WAAW,GAAG,CAAC,CAAQ,EAAE,EAAE;QACjC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,6DACE,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBAC9B,CAAC,WAAW,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI;gBAChC,eAAe,EAAE,IAAI,CAAC,KAAK;gBAC3B,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;aAC/B;YAED,6DAAM,KAAK,EAAC,iBAAiB;gBAC3B,8DAAQ,CACH;YACN,IAAI,CAAC,QAAQ,IAAI,CAChB,6DAAM,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,gBAAY,0BAAM,EAAC,QAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,aAE3F,CACR,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Tag 标签组件\n * 用于标记和选择\n */\n@Component({\n  tag: 'hb-tag',\n  styleUrl: 'tag.css',\n  shadow: true,\n})\nexport class Tag {\n  /** 标签类型 */\n  @Prop() type: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default' = 'default';\n\n  /** 是否可关闭 */\n  @Prop() closable: boolean = false;\n\n  /** 主题效果 */\n  @Prop() effect: 'dark' | 'light' | 'plain' = 'light';\n\n  /** 是否圆角 */\n  @Prop() round: boolean = false;\n\n  /** 标签尺寸 */\n  @Prop() size: 'small' | 'default' | 'large' = 'default';\n\n  /** 关闭事件 */\n  @Event() hbClose: EventEmitter<void>;\n\n  private handleClose = (e: Event) => {\n    e.stopPropagation();\n    this.hbClose.emit();\n  };\n\n  render() {\n    return (\n      <span\n        class={{\n          'hb-tag': true,\n          [`hb-tag--${this.type}`]: true,\n          [`hb-tag--${this.effect}`]: true,\n          'hb-tag--round': this.round,\n          [`hb-tag--${this.size}`]: true,\n        }}\n      >\n        <span class=\"hb-tag__content\">\n          <slot />\n        </span>\n        {this.closable && (\n          <span class=\"hb-tag__close\" role=\"button\" aria-label=\"移除标签\" tabIndex={0} onClick={this.handleClose}>\n            ×\n          </span>\n        )}\n      </span>\n    );\n  }\n}\n"]}

package/dist/collection/components/Tag/tag.css

@@ -0,0 +1,71 @@
+:host {
+  display: inline-block;
+}
+
+.hb-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--hb-spacing-xxs);
+  padding: 0 var(--hb-spacing-xs);
+  height: 22px;
+  font-size: var(--hb-font-size-xs);
+  line-height: 1;
+  border-radius: var(--hb-tag-radius);
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.hb-tag__content {
+  display: inline-flex;
+  align-items: center;
+}
+
+.hb-tag__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  transition: background-color var(--hb-transition-duration);
+}
+
+.hb-tag__close:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+/* ---- 尺寸 ---- */
+.hb-tag--small { height: 18px; font-size: 11px; padding: 0 6px; }
+.hb-tag--large { height: 28px; font-size: var(--hb-font-size-sm); padding: 0 var(--hb-spacing-sm); }
+
+/* ---- 圆角 ---- */
+.hb-tag--round { border-radius: 999px; }
+
+/* ---- 类型：light（默认） ---- */
+.hb-tag--default.hb-tag--light { background: var(--hb-tag-default-bg); color: var(--hb-tag-default-color); }
+.hb-tag--primary.hb-tag--light { background: var(--hb-tag-primary-bg); color: var(--hb-tag-primary-color); }
+.hb-tag--success.hb-tag--light { background: var(--hb-tag-success-bg); color: var(--hb-tag-success-color); }
+.hb-tag--warning.hb-tag--light { background: var(--hb-tag-warning-bg); color: var(--hb-tag-warning-color); }
+.hb-tag--danger.hb-tag--light  { background: var(--hb-tag-danger-bg); color: var(--hb-tag-danger-color); }
+.hb-tag--info.hb-tag--light    { background: var(--hb-tag-primary-bg); color: var(--hb-tag-primary-color); }
+
+/* ---- 类型：dark ---- */
+.hb-tag--default.hb-tag--dark { background: var(--hb-color-text-quaternary); color: #fff; }
+.hb-tag--primary.hb-tag--dark { background: var(--hb-color-primary); color: #fff; }
+.hb-tag--success.hb-tag--dark { background: var(--hb-color-success); color: #fff; }
+.hb-tag--warning.hb-tag--dark { background: var(--hb-color-warning); color: #fff; }
+.hb-tag--danger.hb-tag--dark  { background: var(--hb-color-danger); color: #fff; }
+.hb-tag--info.hb-tag--dark    { background: var(--hb-color-info); color: #fff; }
+
+/* ---- 类型：plain ---- */
+.hb-tag--default.hb-tag--plain { background: #fff; color: var(--hb-color-text); border-color: var(--hb-color-border); }
+.hb-tag--primary.hb-tag--plain { background: #fff; color: var(--hb-color-primary); border-color: var(--hb-color-primary-border); }
+.hb-tag--success.hb-tag--plain { background: #fff; color: var(--hb-color-success); border-color: var(--hb-color-success-border); }
+.hb-tag--warning.hb-tag--plain { background: #fff; color: var(--hb-color-warning); border-color: var(--hb-color-warning-border); }
+.hb-tag--danger.hb-tag--plain  { background: #fff; color: var(--hb-color-danger); border-color: var(--hb-color-danger-border); }
+.hb-tag--info.hb-tag--plain    { background: #fff; color: var(--hb-color-primary); border-color: var(--hb-color-primary-border); }