huibo-ui 0.3.0

package/dist/components/hb-loading.js

@@ -0,0 +1,51 @@
+import { p as proxyCustomElement, H, h } from './p-1407a5e8.js';
+
+const loadingCss = "/*! 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-loading{align-items:center;display:flex;justify-content:center;padding:var(--hb-spacing-lg)}.hb-loading--fullscreen{background-color:var(--hb-color-bg-mask);inset:0;position:fixed;z-index:var(--hb-z-index-modal)}.hb-loading__spinner{align-items:center;display:flex;flex-direction:column;gap:var(--hb-spacing-sm)}.hb-loading__circle{animation:hb-spin .8s linear infinite;border:3px solid var(--hb-color-border-secondary);border-radius:50%;border-top-color:var(--hb-color-primary);height:32px;width:32px}.hb-loading--small .hb-loading__circle{border-width:2px;height:20px;width:20px}.hb-loading--large .hb-loading__circle{border-width:4px;height:44px;width:44px}.hb-loading__text{color:var(--hb-color-primary);font-size:var(--hb-font-size-sm)}@keyframes hb-spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@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 HbLoadingStyle0 = loadingCss;
+
+const Loading = /*@__PURE__*/ proxyCustomElement(class Loading extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    /** 加载指示器尺寸 */
+    size = 'default';
+    /** 加载文案 */
+    text;
+    /** 是否全屏显示 */
+    fullscreen = false;
+    render() {
+        return (h("div", { key: 'a29b2a7301ecd1ea3d4cc775b3eb842f591be4c3', class: {
+                'hb-loading': true,
+                'hb-loading--fullscreen': this.fullscreen,
+                [`hb-loading--${this.size}`]: true,
+            } }, h("div", { key: 'c429099b5e4c3d5ac229cd2d4befb58f9baff269', class: "hb-loading__spinner" }, h("div", { key: '36e30057b133e3d1f0874da7d2be3d933292fc26', class: "hb-loading__circle" }), this.text && h("div", { key: 'a13830edf63e082e26f14d9d120763cf3e7a8003', class: "hb-loading__text" }, this.text))));
+    }
+    static get style() { return HbLoadingStyle0; }
+}, [1, "hb-loading", {
+        "size": [1],
+        "text": [1],
+        "fullscreen": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-loading"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-loading":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Loading);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbLoading = Loading;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbLoading, defineCustomElement };
+
+//# sourceMappingURL=hb-loading.js.map

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

@@ -0,0 +1 @@
+{"file":"hb-loading.js","mappings":";;AAAA,MAAM,UAAU,GAAG,g7MAAg7M,CAAC;AACp8M,wBAAe,UAAU;;MCUZ,OAAO;;;;;;;IAEV,IAAI,GAAkC,SAAS,CAAC;;IAGhD,IAAI,CAAU;;IAGd,UAAU,GAAY,KAAK,CAAC;IAEpC,MAAM;QACJ,QACE,4DACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,wBAAwB,EAAE,IAAI,CAAC,UAAU;gBACzC,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;aACnC,IAED,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,4DAAK,KAAK,EAAC,oBAAoB,GAAO,EACrC,IAAI,CAAC,IAAI,IAAI,4DAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,IAAI,CAAO,CACzD,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Loading/loading.css?tag=hb-loading&encapsulation=shadow","src/components/Loading/Loading.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hb-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--hb-spacing-lg);\n}\n\n.hb-loading--fullscreen {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: var(--hb-color-bg-mask);\n  z-index: var(--hb-z-index-modal);\n}\n\n.hb-loading__spinner {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--hb-spacing-sm);\n}\n\n.hb-loading__circle {\n  width: 32px;\n  height: 32px;\n  border: 3px solid var(--hb-color-border-secondary);\n  border-top-color: var(--hb-color-primary);\n  border-radius: 50%;\n  animation: hb-spin 0.8s linear infinite;\n}\n\n/* 尺寸变体（size prop） */\n.hb-loading--small .hb-loading__circle {\n  width: 20px;\n  height: 20px;\n  border-width: 2px;\n}\n.hb-loading--large .hb-loading__circle {\n  width: 44px;\n  height: 44px;\n  border-width: 4px;\n}\n\n.hb-loading__text {\n  font-size: var(--hb-font-size-sm);\n  color: var(--hb-color-primary);\n}\n\n@keyframes hb-spin {\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Loading 加载组件\n * 用于页面和区块的加载中状态\n */\n@Component({\n  tag: 'hb-loading',\n  styleUrl: 'loading.css',\n  shadow: true,\n})\nexport class Loading {\n  /** 加载指示器尺寸 */\n  @Prop() size: 'small' | 'default' | 'large' = 'default';\n\n  /** 加载文案 */\n  @Prop() text?: string;\n\n  /** 是否全屏显示 */\n  @Prop() fullscreen: boolean = false;\n\n  render() {\n    return (\n      <div\n        class={{\n          'hb-loading': true,\n          'hb-loading--fullscreen': this.fullscreen,\n          [`hb-loading--${this.size}`]: true,\n        }}\n      >\n        <div class=\"hb-loading__spinner\">\n          <div class=\"hb-loading__circle\"></div>\n          {this.text && <div class=\"hb-loading__text\">{this.text}</div>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/hb-main.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HbMain extends Components.HbMain, HTMLElement {}
+export const HbMain: {
+    prototype: HbMain;
+    new (): HbMain;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/hb-main.js

@@ -0,0 +1,37 @@
+import { p as proxyCustomElement, H, h } from './p-1407a5e8.js';
+
+const mainCss = "/*! 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-main-padding:20px;--hb-main-bg-color:var(--hb-color-white,#fff);display:block}.hb-main{background-color:var(--hb-main-bg-color);box-sizing:border-box;flex:1;overflow:auto;padding:var(--hb-main-padding)}@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 HbMainStyle0 = mainCss;
+
+const Main = /*@__PURE__*/ proxyCustomElement(class Main extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h("main", { key: 'd326db7b0e9de0ff411ca3af99f2399a5e760557', class: "hb-main" }, h("slot", { key: 'cea61788b327d41f6307be518c368eca41a254b2' })));
+    }
+    static get style() { return HbMainStyle0; }
+}, [1, "hb-main"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-main"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-main":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Main);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbMain = Main;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbMain, defineCustomElement };
+
+//# sourceMappingURL=hb-main.js.map

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

@@ -0,0 +1 @@
+{"file":"hb-main.js","mappings":";;AAAA,MAAM,OAAO,GAAG,k0LAAk0L,CAAC;AACn1L,qBAAe,OAAO;;MCUT,IAAI;;;;;;IACf,MAAM;QACJ,QACE,6DAAM,KAAK,EAAC,SAAS,IACnB,8DAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Container/main.css?tag=hb-main&encapsulation=shadow","src/components/Container/Main.tsx"],"sourcesContent":[":host {\n  display: block;\n  --hb-main-padding: 20px;\n  --hb-main-bg-color: var(--hb-color-white, #ffffff);\n}\n\n.hb-main {\n  flex: 1;\n  padding: var(--hb-main-padding);\n  box-sizing: border-box;\n  overflow: auto;\n  background-color: var(--hb-main-bg-color);\n}\n\n","import { Component, h } from '@stencil/core';\n\n/**\n * Container Main 组件\n * 主要区域容器\n */\n@Component({\n  tag: 'hb-main',\n  styleUrl: 'main.css',\n  shadow: true,\n})\nexport class Main {\n  render() {\n    return (\n      <main class=\"hb-main\">\n        <slot></slot>\n      </main>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/hb-menu-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HbMenuItem extends Components.HbMenuItem, HTMLElement {}
+export const HbMenuItem: {
+    prototype: HbMenuItem;
+    new (): HbMenuItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/hb-menu-item.js

@@ -0,0 +1,70 @@
+import { p as proxyCustomElement, H, h } from './p-1407a5e8.js';
+import { i as isActivationKey } from './p-cc0aeb50.js';
+
+const MenuItem = /*@__PURE__*/ proxyCustomElement(class MenuItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    /** 唯一标识 */
+    key = '';
+    /** 是否禁用 */
+    disabled = false;
+    /** 图标 */
+    icon;
+    /** 是否激活（由父级 Menu 设置） */
+    active = false;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        const menu = this.el.closest('hb-menu');
+        if (menu) {
+            // 使用内部事件名 hbMenuItemSelect，与 Menu 向外发射的公开事件 hbSelect 区分，
+            // 否则 Menu 的 @Listen('hbSelect') 会被自身 emit 的事件再次触发，导致无限递归。
+            menu.dispatchEvent(new CustomEvent('hbMenuItemSelect', { detail: this.key, bubbles: true }));
+        }
+    };
+    handleKeydown = (e) => {
+        if (this.disabled)
+            return;
+        if (isActivationKey(e.key)) {
+            e.preventDefault();
+            this.handleClick();
+        }
+    };
+    render() {
+        return (h("li", { key: '34b8ae3ee2a580757cd0c01261772e6de97bf332', class: {
+                'hb-menu-item': true,
+                'hb-menu-item--active': this.active,
+                'hb-menu-item--disabled': this.disabled,
+            }, role: "menuitem", tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.active ? 'page' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown }, this.icon && h("span", { key: 'a0b70a81ce4f8ed1cef7bd37c5b194a02554bc22', class: "hb-menu-item__icon" }, this.icon), h("span", { key: '8ef65eda6376d1e16ed614fa30e7cef532abc2ad', class: "hb-menu-item__text" }, h("slot", { key: '716cf4bc2cd4cd6d992010759d55f2924662cd9a' }))));
+    }
+}, [1, "hb-menu-item", {
+        "key": [1],
+        "disabled": [4],
+        "icon": [1],
+        "active": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-menu-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-menu-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MenuItem);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbMenuItem = MenuItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbMenuItem, defineCustomElement };
+
+//# sourceMappingURL=hb-menu-item.js.map

package/dist/components/hb-menu-item.js.map

@@ -0,0 +1 @@
+{"file":"hb-menu-item.js","mappings":";;;MAUa,QAAQ;;;;;;;;IAIX,GAAG,GAAW,EAAE,CAAC;;IAGjB,QAAQ,GAAY,KAAK,CAAC;;IAG1B,IAAI,CAAU;;IAGd,MAAM,GAAY,KAAK,CAAC;IAExB,WAAW,GAAG;QACpB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QACxC,IAAI,IAAI,EAAE;;;YAGR,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;SAC9F;KACF,CAAC;IAEM,aAAa,GAAG,CAAC,CAAgB;QACvC,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;YAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF,CAAC;IAEF,MAAM;QACJ,QACE,2DACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,sBAAsB,EAAE,IAAI,CAAC,MAAM;gBACnC,wBAAwB,EAAE,IAAI,CAAC,QAAQ;aACxC,EACD,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,mBACjB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,kBACnC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,EAC9C,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,IAE5B,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,IAAI,CAAQ,EACjE,6DAAM,KAAK,EAAC,oBAAoB,IAAC,8DAAQ,CAAO,CAC7C,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Menu/MenuItem.tsx"],"sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\nimport { isActivationKey } from '../../utils/a11y';\n\n/**\n * MenuItem 菜单项\n */\n@Component({\n  tag: 'hb-menu-item',\n  shadow: true,\n})\nexport class MenuItem {\n  @Element() el: HTMLElement;\n\n  /** 唯一标识 */\n  @Prop() key: string = '';\n\n  /** 是否禁用 */\n  @Prop() disabled: boolean = false;\n\n  /** 图标 */\n  @Prop() icon?: string;\n\n  /** 是否激活（由父级 Menu 设置） */\n  @Prop() active: boolean = false;\n\n  private handleClick = () => {\n    if (this.disabled) return;\n    const menu = this.el.closest('hb-menu');\n    if (menu) {\n      // 使用内部事件名 hbMenuItemSelect，与 Menu 向外发射的公开事件 hbSelect 区分，\n      // 否则 Menu 的 @Listen('hbSelect') 会被自身 emit 的事件再次触发，导致无限递归。\n      menu.dispatchEvent(new CustomEvent('hbMenuItemSelect', { detail: this.key, bubbles: true }));\n    }\n  };\n\n  private handleKeydown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (isActivationKey(e.key)) {\n      e.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  render() {\n    return (\n      <li\n        class={{\n          'hb-menu-item': true,\n          'hb-menu-item--active': this.active,\n          'hb-menu-item--disabled': this.disabled,\n        }}\n        role=\"menuitem\"\n        tabindex={this.disabled ? -1 : 0}\n        aria-disabled={this.disabled ? 'true' : undefined}\n        aria-current={this.active ? 'page' : undefined}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeydown}\n      >\n        {this.icon && <span class=\"hb-menu-item__icon\">{this.icon}</span>}\n        <span class=\"hb-menu-item__text\"><slot /></span>\n      </li>\n    );\n  }\n}\n"],"version":3}

package/dist/components/hb-menu.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HbMenu extends Components.HbMenu, HTMLElement {}
+export const HbMenu: {
+    prototype: HbMenu;
+    new (): HbMenu;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/hb-menu.js

@@ -0,0 +1,113 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-1407a5e8.js';
+
+const menuCss = "/*! 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-menu{background-color:var(--hb-menu-bg,var(--hb-color-bg-container));border-right:1px solid var(--hb-color-border-secondary);box-sizing:border-box;color:var(--hb-menu-color,var(--hb-color-text));font-size:var(--hb-font-size-sm);list-style:none;margin:0;padding:4px 0}.hb-menu--horizontal{border-bottom:1px solid var(--hb-color-border-secondary);border-right:none;display:flex}.hb-menu--collapsed{width:64px}.hb-menu--collapsed .hb-menu-item__text,.hb-menu--collapsed .hb-sub-menu__arrow,.hb-menu--collapsed .hb-sub-menu__label{display:none}.hb-sub-menu--collapsed{position:relative}.hb-sub-menu--collapsed .hb-sub-menu__title{justify-content:center;padding:0}.hb-sub-menu__children--popover{background-color:var(--hb-menu-bg,var(--hb-color-bg-container));border:1px solid var(--hb-color-border-secondary);border-radius:var(--hb-radius-sm,4px);box-shadow:0 2px 8px #0000001f;left:100%;margin-left:4px;min-width:160px;padding:4px 0;position:absolute;top:0;white-space:nowrap;z-index:1000}.hb-sub-menu__children--popover .hb-menu-item{padding-left:var(--hb-spacing-md)}::slotted(hb-menu-item){display:block}.hb-menu-item{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;gap:var(--hb-spacing-xs);height:var(--hb-size-default);line-height:var(--hb-size-default);list-style:none;padding:0 var(--hb-spacing-md);transition:all var(--hb-transition-duration)var(--hb-transition-function);white-space:nowrap}.hb-menu-item:hover:not(.hb-menu-item--disabled){background-color:var(--hb-menu-item-hover-bg,var(--hb-color-fill-tertiary))}.hb-menu-item--active{background-color:var(--hb-menu-item-active-bg,var(--hb-color-primary-bg));color:var(--hb-menu-active-color,var(--hb-color-primary))}.hb-menu-item--disabled{cursor:not-allowed;opacity:.5}.hb-menu-item__icon{display:inline-flex;width:16px}.hb-sub-menu{list-style:none}.hb-sub-menu__title{align-items:center;cursor:pointer;display:flex;gap:var(--hb-spacing-xs);height:var(--hb-size-default);line-height:var(--hb-size-default);padding:0 var(--hb-spacing-md);transition:all var(--hb-transition-duration)}.hb-sub-menu__title:hover{background-color:var(--hb-menu-item-hover-bg,var(--hb-color-fill-tertiary))}.hb-sub-menu__label{flex:1}.hb-sub-menu__arrow{font-size:10px;transition:transform var(--hb-transition-duration)}.hb-sub-menu__arrow--open{transform:rotate(90deg)}.hb-sub-menu__children{background-color:var(--hb-menu-bg,var(--hb-color-bg-container));list-style:none;margin:0;padding:0}.hb-sub-menu__children .hb-menu-item{padding-left:calc(var(--hb-spacing-md) + var(--hb-spacing-lg))}@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 HbMenuStyle0 = menuCss;
+
+const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.hbSelect = createEvent(this, "hbSelect", 7);
+    }
+    get el() { return this; }
+    /** 模式 */
+    mode = 'vertical';
+    /** 当前激活菜单项 */
+    defaultActive = '';
+    /** 是否折叠（仅垂直模式） */
+    collapsed = false;
+    /** 背景色 */
+    backgroundColor;
+    /** 文字颜色 */
+    textColor;
+    /** 激活项文字颜色 */
+    activeTextColor;
+    activeItem = '';
+    /** 选中事件 */
+    hbSelect;
+    componentDidLoad() {
+        this.activeItem = this.defaultActive;
+        // 折叠态透传给子 hb-sub-menu（子组件无法继承 prop，需在 host 属性层面同步）
+        this.syncCollapsedToChildren();
+    }
+    handleDefaultActiveChange() {
+        this.activeItem = this.defaultActive;
+    }
+    handleCollapsedChange() {
+        this.syncCollapsedToChildren();
+    }
+    /**
+     * 把 collapsed 状态同步到所有直连与嵌套的 hb-sub-menu 子节点。
+     * querySelectorAll 递归匹配，因此 hb-sub-menu > hb-sub-menu（多级）也会被覆盖。
+     */
+    syncCollapsedToChildren() {
+        if (!this.el)
+            return;
+        this.el.querySelectorAll('hb-sub-menu').forEach((sub) => {
+            sub.setAttribute('collapsed', this.collapsed ? 'true' : 'false');
+        });
+    }
+    /** 监听子 hb-menu-item 派发的内部选中事件，更新激活态并向外发射公开的 hbSelect */
+    handleSelect(event) {
+        const key = event.detail;
+        this.activeItem = key;
+        this.defaultActive = key;
+        this.hbSelect.emit(key);
+        // 通知子组件（含嵌套在 hb-sub-menu 内的 hb-menu-item）
+        this.el.querySelectorAll('hb-menu-item').forEach((item) => {
+            item.setAttribute('active', item.getAttribute('key') === key ? 'true' : 'false');
+        });
+    }
+    render() {
+        const style = {};
+        if (this.backgroundColor)
+            style['--hb-menu-bg'] = this.backgroundColor;
+        if (this.textColor)
+            style['--hb-menu-color'] = this.textColor;
+        if (this.activeTextColor)
+            style['--hb-menu-active-color'] = this.activeTextColor;
+        return (h("ul", { key: '0352bda3d62d4a280681612a7bf301f16459bcc0', class: {
+                'hb-menu': true,
+                [`hb-menu--${this.mode}`]: true,
+                'hb-menu--collapsed': this.collapsed,
+            }, style: style, role: "menu" }, h("slot", { key: '142fea193616a6e311b854f6bd893e0646950b29' })));
+    }
+    static get watchers() { return {
+        "defaultActive": ["handleDefaultActiveChange"],
+        "collapsed": ["handleCollapsedChange"]
+    }; }
+    static get style() { return HbMenuStyle0; }
+}, [1, "hb-menu", {
+        "mode": [1],
+        "defaultActive": [1025, "default-active"],
+        "collapsed": [4],
+        "backgroundColor": [1, "background-color"],
+        "textColor": [1, "text-color"],
+        "activeTextColor": [1, "active-text-color"],
+        "activeItem": [32]
+    }, [[0, "hbMenuItemSelect", "handleSelect"]], {
+        "defaultActive": ["handleDefaultActiveChange"],
+        "collapsed": ["handleCollapsedChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-menu"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Menu);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbMenu = Menu;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbMenu, defineCustomElement };
+
+//# sourceMappingURL=hb-menu.js.map

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

@@ -0,0 +1 @@
+{"file":"hb-menu.js","mappings":";;AAAA,MAAM,OAAO,GAAG,2nQAA2nQ,CAAC;AAC5oQ,qBAAe,OAAO;;MCUT,IAAI;;;;;;;;;IAIP,IAAI,GAA8B,UAAU,CAAC;;IAG5B,aAAa,GAAW,EAAE,CAAC;;IAG5C,SAAS,GAAY,KAAK,CAAC;;IAG3B,eAAe,CAAU;;IAGzB,SAAS,CAAU;;IAGnB,eAAe,CAAU;IAExB,UAAU,GAAW,EAAE,CAAC;;IAGxB,QAAQ,CAAuB;IAExC,gBAAgB;QACd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC;;QAErC,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC;IAGD,yBAAyB;QACvB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC;KACtC;IAGD,qBAAqB;QACnB,IAAI,CAAC,uBAAuB,EAAE,CAAC;KAChC;;;;;IAMO,uBAAuB;QAC7B,IAAI,CAAC,IAAI,CAAC,EAAE;YAAE,OAAO;QACrB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG;YAClD,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;SAClE,CAAC,CAAC;KACJ;;IAID,YAAY,CAAC,KAA0B;QACrC,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC;QACzB,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC;QACtB,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC;QACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;;QAExB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;YACpD,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;SAClF,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,MAAM,KAAK,GAA2B,EAAE,CAAC;QACzC,IAAI,IAAI,CAAC,eAAe;YAAE,KAAK,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC;QACvE,IAAI,IAAI,CAAC,SAAS;YAAE,KAAK,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;QAC9D,IAAI,IAAI,CAAC,eAAe;YAAE,KAAK,CAAC,wBAAwB,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC;QAEjF,QACE,2DACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,CAAC,YAAY,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;gBAC/B,oBAAoB,EAAE,IAAI,CAAC,SAAS;aACrC,EACD,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,IAEX,8DAAQ,CACL,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Menu/menu.css?tag=hb-menu&encapsulation=shadow","src/components/Menu/Menu.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hb-menu {\n  list-style: none;\n  margin: 0;\n  padding: 4px 0;\n  background-color: var(--hb-menu-bg, var(--hb-color-bg-container));\n  color: var(--hb-menu-color, var(--hb-color-text));\n  font-size: var(--hb-font-size-sm);\n  border-right: 1px solid var(--hb-color-border-secondary);\n  box-sizing: border-box;\n}\n\n/* ---- 水平模式 ---- */\n.hb-menu--horizontal {\n  display: flex;\n  border-right: none;\n  border-bottom: 1px solid var(--hb-color-border-secondary);\n}\n\n/* ---- 折叠 ---- */\n.hb-menu--collapsed {\n  width: 64px;\n}\n.hb-menu--collapsed .hb-menu-item__text,\n.hb-menu--collapsed .hb-sub-menu__label,\n.hb-menu--collapsed .hb-sub-menu__arrow {\n  display: none;\n}\n\n/* 折叠态 SubMenu：图标条布局（仅显示 icon），不再就地展开 */\n.hb-sub-menu--collapsed {\n  position: relative;\n}\n.hb-sub-menu--collapsed .hb-sub-menu__title {\n  justify-content: center;\n  padding: 0;\n}\n\n/* 折叠态浮层：绝对定位弹出在右侧 */\n.hb-sub-menu__children--popover {\n  position: absolute;\n  left: 100%;\n  top: 0;\n  margin-left: 4px;\n  min-width: 160px;\n  padding: 4px 0;\n  background-color: var(--hb-menu-bg, var(--hb-color-bg-container));\n  border: 1px solid var(--hb-color-border-secondary);\n  border-radius: var(--hb-radius-sm, 4px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n  z-index: 1000;\n  white-space: nowrap;\n}\n\n/* 折叠态浮层内的 MenuItem 取消就地展开时的缩进 */\n.hb-sub-menu__children--popover .hb-menu-item {\n  padding-left: var(--hb-spacing-md);\n}\n\n/* ---- MenuItem ---- */\n::slotted(hb-menu-item) {\n  display: block;\n}\n\n.hb-menu-item {\n  display: flex;\n  align-items: center;\n  gap: var(--hb-spacing-xs);\n  padding: 0 var(--hb-spacing-md);\n  height: var(--hb-size-default);\n  line-height: var(--hb-size-default);\n  cursor: pointer;\n  transition: all var(--hb-transition-duration) var(--hb-transition-function);\n  white-space: nowrap;\n  list-style: none;\n  box-sizing: border-box;\n}\n\n.hb-menu-item:hover:not(.hb-menu-item--disabled) {\n  background-color: var(--hb-menu-item-hover-bg, var(--hb-color-fill-tertiary));\n}\n\n.hb-menu-item--active {\n  color: var(--hb-menu-active-color, var(--hb-color-primary));\n  background-color: var(--hb-menu-item-active-bg, var(--hb-color-primary-bg));\n}\n\n.hb-menu-item--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.hb-menu-item__icon {\n  display: inline-flex;\n  width: 16px;\n}\n\n/* ---- SubMenu ---- */\n.hb-sub-menu {\n  list-style: none;\n}\n\n.hb-sub-menu__title {\n  display: flex;\n  align-items: center;\n  gap: var(--hb-spacing-xs);\n  padding: 0 var(--hb-spacing-md);\n  height: var(--hb-size-default);\n  line-height: var(--hb-size-default);\n  cursor: pointer;\n  transition: all var(--hb-transition-duration);\n}\n\n.hb-sub-menu__title:hover {\n  background-color: var(--hb-menu-item-hover-bg, var(--hb-color-fill-tertiary));\n}\n\n.hb-sub-menu__label {\n  flex: 1;\n}\n\n.hb-sub-menu__arrow {\n  font-size: 10px;\n  transition: transform var(--hb-transition-duration);\n}\n\n.hb-sub-menu__arrow--open {\n  transform: rotate(90deg);\n}\n\n.hb-sub-menu__children {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  background-color: var(--hb-menu-bg, var(--hb-color-bg-container));\n}\n\n.hb-sub-menu__children .hb-menu-item {\n  padding-left: calc(var(--hb-spacing-md) + var(--hb-spacing-lg));\n}\n","import { Component, h, Prop, State, Element, Watch, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * Menu 导航菜单组件\n * 为页面和功能提供导航的菜单\n */\n@Component({\n  tag: 'hb-menu',\n  styleUrl: 'menu.css',\n  shadow: true,\n})\nexport class Menu {\n  @Element() el: HTMLElement;\n\n  /** 模式 */\n  @Prop() mode: 'horizontal' | 'vertical' = 'vertical';\n\n  /** 当前激活菜单项 */\n  @Prop({ mutable: true }) defaultActive: string = '';\n\n  /** 是否折叠（仅垂直模式） */\n  @Prop() collapsed: boolean = false;\n\n  /** 背景色 */\n  @Prop() backgroundColor?: string;\n\n  /** 文字颜色 */\n  @Prop() textColor?: string;\n\n  /** 激活项文字颜色 */\n  @Prop() activeTextColor?: string;\n\n  @State() activeItem: string = '';\n\n  /** 选中事件 */\n  @Event() hbSelect: EventEmitter<string>;\n\n  componentDidLoad() {\n    this.activeItem = this.defaultActive;\n    // 折叠态透传给子 hb-sub-menu（子组件无法继承 prop，需在 host 属性层面同步）\n    this.syncCollapsedToChildren();\n  }\n\n  @Watch('defaultActive')\n  handleDefaultActiveChange() {\n    this.activeItem = this.defaultActive;\n  }\n\n  @Watch('collapsed')\n  handleCollapsedChange() {\n    this.syncCollapsedToChildren();\n  }\n\n  /**\n   * 把 collapsed 状态同步到所有直连与嵌套的 hb-sub-menu 子节点。\n   * querySelectorAll 递归匹配，因此 hb-sub-menu > hb-sub-menu（多级）也会被覆盖。\n   */\n  private syncCollapsedToChildren() {\n    if (!this.el) return;\n    this.el.querySelectorAll('hb-sub-menu').forEach((sub) => {\n      sub.setAttribute('collapsed', this.collapsed ? 'true' : 'false');\n    });\n  }\n\n  /** 监听子 hb-menu-item 派发的内部选中事件，更新激活态并向外发射公开的 hbSelect */\n  @Listen('hbMenuItemSelect')\n  handleSelect(event: CustomEvent<string>) {\n    const key = event.detail;\n    this.activeItem = key;\n    this.defaultActive = key;\n    this.hbSelect.emit(key);\n    // 通知子组件（含嵌套在 hb-sub-menu 内的 hb-menu-item）\n    this.el.querySelectorAll('hb-menu-item').forEach((item) => {\n      item.setAttribute('active', item.getAttribute('key') === key ? 'true' : 'false');\n    });\n  }\n\n  render() {\n    const style: Record<string, string> = {};\n    if (this.backgroundColor) style['--hb-menu-bg'] = this.backgroundColor;\n    if (this.textColor) style['--hb-menu-color'] = this.textColor;\n    if (this.activeTextColor) style['--hb-menu-active-color'] = this.activeTextColor;\n\n    return (\n      <ul\n        class={{\n          'hb-menu': true,\n          [`hb-menu--${this.mode}`]: true,\n          'hb-menu--collapsed': this.collapsed,\n        }}\n        style={style}\n        role=\"menu\"\n      >\n        <slot />\n      </ul>\n    );\n  }\n}\n"],"version":3}

package/dist/components/hb-message.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HbMessage extends Components.HbMessage, HTMLElement {}
+export const HbMessage: {
+    prototype: HbMessage;
+    new (): HbMessage;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/hb-message.js

@@ -0,0 +1,69 @@
+import { p as proxyCustomElement, H, h } from './p-1407a5e8.js';
+
+const ICON_MAP = {
+    success: '✓',
+    warning: '⚠',
+    info: 'ℹ',
+    error: '✕',
+    loading: '⏳',
+};
+const Message = /*@__PURE__*/ proxyCustomElement(class Message extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    /** 消息文字 */
+    message = '';
+    /** 消息类型 */
+    type = 'info';
+    /** 是否显示关闭按钮 */
+    closable = false;
+    /** 显示时间（毫秒），0 为不自动关闭 */
+    duration = 3000;
+    visible = true;
+    componentDidLoad() {
+        if (this.duration > 0) {
+            setTimeout(() => this.close(), this.duration);
+        }
+    }
+    close = () => {
+        this.visible = false;
+        setTimeout(() => this.el.remove(), 300);
+    };
+    render() {
+        return (h("div", { key: '51069b8f2a5079fcfd64bb24168907bbcfbfd869', class: {
+                'hb-message': true,
+                [`hb-message--${this.type}`]: true,
+                'hb-message--visible': this.visible,
+            }, role: "alert" }, h("span", { key: 'ad3123ae0c4eb9b8010c446bf0016d54af7b8a3a', class: "hb-message__icon" }, ICON_MAP[this.type]), h("span", { key: '557ea0f92544ab58079a498b8f90dc774746c0a2', class: "hb-message__text" }, this.message), this.closable && (h("span", { key: 'e90e3380ba2b9a473d5f839983b959584948fd2a', class: "hb-message__close", onClick: this.close }, "\u00D7"))));
+    }
+}, [1, "hb-message", {
+        "message": [1],
+        "type": [1],
+        "closable": [4],
+        "duration": [2],
+        "visible": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-message"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-message":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Message);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbMessage = Message;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbMessage, defineCustomElement };
+
+//# sourceMappingURL=hb-message.js.map

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

@@ -0,0 +1 @@
+{"file":"hb-message.js","mappings":";;AAIA,MAAM,QAAQ,GAAgC;IAC5C,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,GAAG;IACZ,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,GAAG;CACb,CAAC;MAUW,OAAO;;;;;;;;IAIV,OAAO,GAAW,EAAE,CAAC;;IAGrB,IAAI,GAAgB,MAAM,CAAC;;IAG3B,QAAQ,GAAY,KAAK,CAAC;;IAG1B,QAAQ,GAAW,IAAI,CAAC;IAEvB,OAAO,GAAY,IAAI,CAAC;IAEjC,gBAAgB;QACd,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,EAAE;YACrB,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC/C;KACF;IAEO,KAAK,GAAG;QACd,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,UAAU,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,EAAE,GAAG,CAAC,CAAC;KACzC,CAAC;IAEF,MAAM;QACJ,QACE,4DACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,CAAC,eAAe,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;gBAClC,qBAAqB,EAAE,IAAI,CAAC,OAAO;aACpC,EACD,IAAI,EAAC,OAAO,IAEZ,6DAAM,KAAK,EAAC,kBAAkB,IAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ,EAC3D,6DAAM,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,OAAO,CAAQ,EACnD,IAAI,CAAC,QAAQ,KACZ,6DAAM,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,aAAU,CAC9D,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Message/Message.tsx"],"sourcesContent":["import { Component, h, Prop, State, Element } from '@stencil/core';\n\nexport type MessageType = 'success' | 'warning' | 'info' | 'error' | 'loading';\n\nconst ICON_MAP: Record<MessageType, string> = {\n  success: '✓',\n  warning: '⚠',\n  info: 'ℹ',\n  error: '✕',\n  loading: '⏳',\n};\n\n/**\n * Message 消息提示组件\n * 常用于主动操作后的反馈提示\n */\n@Component({\n  tag: 'hb-message',\n  shadow: true,\n})\nexport class Message {\n  @Element() el: HTMLElement;\n\n  /** 消息文字 */\n  @Prop() message: string = '';\n\n  /** 消息类型 */\n  @Prop() type: MessageType = 'info';\n\n  /** 是否显示关闭按钮 */\n  @Prop() closable: boolean = false;\n\n  /** 显示时间（毫秒），0 为不自动关闭 */\n  @Prop() duration: number = 3000;\n\n  @State() visible: boolean = true;\n\n  componentDidLoad() {\n    if (this.duration > 0) {\n      setTimeout(() => this.close(), this.duration);\n    }\n  }\n\n  private close = () => {\n    this.visible = false;\n    setTimeout(() => this.el.remove(), 300);\n  };\n\n  render() {\n    return (\n      <div\n        class={{\n          'hb-message': true,\n          [`hb-message--${this.type}`]: true,\n          'hb-message--visible': this.visible,\n        }}\n        role=\"alert\"\n      >\n        <span class=\"hb-message__icon\">{ICON_MAP[this.type]}</span>\n        <span class=\"hb-message__text\">{this.message}</span>\n        {this.closable && (\n          <span class=\"hb-message__close\" onClick={this.close}>×</span>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/hb-notification.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HbNotification extends Components.HbNotification, HTMLElement {}
+export const HbNotification: {
+    prototype: HbNotification;
+    new (): HbNotification;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/hb-notification.js

@@ -0,0 +1,91 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-1407a5e8.js';
+
+const notificationCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.container{width:100%}.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-notification{align-items:flex-start;background-color:var(--hb-color-bg-elevated);border-left:4px solid var(--hb-color-primary);border-radius:var(--hb-border-radius-base);box-shadow:var(--hb-box-shadow-lg);color:var(--hb-color-text);display:flex;font-size:var(--hb-font-size-sm);gap:var(--hb-spacing-sm);max-width:calc(100vw - 32px);opacity:0;padding:var(--hb-spacing-md)var(--hb-spacing-lg);pointer-events:auto;transform:translate(0);transition:opacity .3s,transform .3s;width:320px}.hb-notification--visible{opacity:1}.hb-notification--bottom-right,.hb-notification--top-right{transform:translate(24px)}.hb-notification--bottom-right.hb-notification--visible,.hb-notification--top-right.hb-notification--visible{transform:translate(0)}.hb-notification--bottom-left,.hb-notification--top-left{transform:translate(-24px)}.hb-notification--bottom-left.hb-notification--visible,.hb-notification--top-left.hb-notification--visible{transform:translate(0)}.hb-notification--success{border-left-color:var(--hb-color-success)}.hb-notification--warning{border-left-color:var(--hb-color-warning)}.hb-notification--error{border-left-color:var(--hb-color-danger)}.hb-notification--info{border-left-color:var(--hb-color-primary)}.hb-notification__icon{align-items:center;display:inline-flex;flex-shrink:0;height:18px;justify-content:center;margin-top:2px;width:18px}.hb-notification__icon-sign{border-radius:50%;display:inline-block;height:18px;position:relative;width:18px}.hb-notification__icon-sign:after{content:\"\";inset:0;position:absolute}.hb-notification__icon-sign--success{background-color:var(--hb-color-success)}.hb-notification__icon-sign--success:after{color:#fff;content:\"\u2713\";font-size:12px;inset:auto 0 0;line-height:18px;text-align:center}.hb-notification__icon-sign--warning{background-color:var(--hb-color-warning)}.hb-notification__icon-sign--warning:after{color:#fff;content:\"!\";font-size:12px;inset:auto 0 0;line-height:18px;text-align:center}.hb-notification__icon-sign--error{background-color:var(--hb-color-danger)}.hb-notification__icon-sign--error:after{color:#fff;content:\"\u2715\";font-size:10px;inset:auto 0 0;line-height:18px;text-align:center}.hb-notification__icon-sign--info{background-color:var(--hb-color-primary)}.hb-notification__icon-sign--info:after{color:#fff;content:\"i\";font-size:12px;font-style:italic;font-weight:700;inset:auto 0 0;line-height:18px;text-align:center}.hb-notification__content{flex:1;min-width:0}.hb-notification__title{color:var(--hb-color-text-primary);font-size:var(--hb-font-size-base);font-weight:600;line-height:1.4;margin-bottom:var(--hb-spacing-xxs)}.hb-notification__message{color:var(--hb-color-text-secondary);line-height:1.5;word-break:break-word}.hb-notification__close{align-items:center;background:0 0;border:none;border-radius:50%;color:var(--hb-color-text-tertiary);cursor:pointer;display:inline-flex;flex-shrink:0;font-size:16px;height:20px;justify-content:center;margin-left:var(--hb-spacing-xs);transition:background-color var(--hb-transition-duration),color var(--hb-transition-duration);width:20px}.hb-notification__close:hover{background-color:var(--hb-color-fill-tertiary);color:var(--hb-color-text-secondary)}@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}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}";
+const HbNotificationStyle0 = notificationCss;
+
+const Notification = /*@__PURE__*/ proxyCustomElement(class Notification extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.hbClose = createEvent(this, "hbClose", 7);
+    }
+    get el() { return this; }
+    /** 唯一标识 */
+    id = '';
+    /** 通知类型 */
+    type = 'info';
+    /** 标题 */
+    title = '';
+    /** 描述文字 */
+    message = '';
+    /** 显示时间（毫秒），0 为不自动关闭 */
+    duration = 4500;
+    /** 出现位置 */
+    position = 'top-right';
+    /** 是否显示关闭按钮 */
+    showClose = true;
+    /** 是否显示（受控） */
+    visible = true;
+    /** 关闭事件 */
+    hbClose;
+    timer = null;
+    componentDidLoad() {
+        if (this.visible && this.duration > 0) {
+            this.timer = setTimeout(() => this.close(), this.duration);
+        }
+    }
+    disconnectedCallback() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
+    }
+    close = () => {
+        if (this.timer) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
+        this.visible = false;
+        this.hbClose.emit(this.id);
+    };
+    render() {
+        return (h("div", { key: '9848b6a924f89df2fa9996742f06986ad8c33da5', class: {
+                'hb-notification': true,
+                [`hb-notification--${this.type}`]: true,
+                [`hb-notification--${this.position}`]: true,
+                'hb-notification--visible': this.visible,
+            }, role: "alert" }, h("div", { key: 'a15adaf1401116e0dd462fa2a9abf56595052069', class: "hb-notification__icon", "aria-hidden": "true" }, h("span", { key: '7d56d7ce4760963f1bd7c214c5d19c9003e302ee', class: `hb-notification__icon-sign hb-notification__icon-sign--${this.type}` })), h("div", { key: '881c23e049f6870a4f2a4db347fdfaedc331708e', class: "hb-notification__content" }, this.title && h("div", { key: '034c55a3d5b0b4bbb27657db8f2f35bf917caf91', class: "hb-notification__title" }, this.title), this.message && h("div", { key: '0d49cebbf4e1db0baa953691c7519a2a8469563d', class: "hb-notification__message" }, this.message)), this.showClose && (h("button", { key: '180dc1d07aa4993a25ef97e92eb8ab4700e6c120', type: "button", class: "hb-notification__close", onClick: this.close, "aria-label": "\u5173\u95ED" }, "\u00D7"))));
+    }
+    static get style() { return HbNotificationStyle0; }
+}, [1, "hb-notification", {
+        "id": [1],
+        "type": [1],
+        "title": [1],
+        "message": [1],
+        "duration": [2],
+        "position": [1],
+        "showClose": [4, "show-close"],
+        "visible": [1028]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-notification"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-notification":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Notification);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbNotification = Notification;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbNotification, defineCustomElement };
+
+//# sourceMappingURL=hb-notification.js.map

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

@@ -0,0 +1 @@
+{"file":"hb-notification.js","mappings":";;AAAA,MAAM,eAAe,GAAG,0jSAA0jS,CAAC;AACnlS,6BAAe,eAAe;;MCajB,YAAY;;;;;;;;;IAIf,EAAE,GAAW,EAAE,CAAC;;IAGhB,IAAI,GAAqB,MAAM,CAAC;;IAGhC,KAAK,GAAW,EAAE,CAAC;;IAGnB,OAAO,GAAW,EAAE,CAAC;;IAGrB,QAAQ,GAAW,IAAI,CAAC;;IAGxB,QAAQ,GAAyB,WAAW,CAAC;;IAG7C,SAAS,GAAY,IAAI,CAAC;;IAGT,OAAO,GAAY,IAAI,CAAC;;IAGxC,OAAO,CAAuB;IAE/B,KAAK,GAAyC,IAAI,CAAC;IAE3D,gBAAgB;QACd,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,EAAE;YACrC,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC5D;KACF;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACzB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;SACnB;KACF;IAEO,KAAK,GAAG;QACd,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACzB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;SACnB;QACD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC5B,CAAC;IAEF,MAAM;QACJ,QACE,4DACE,KAAK,EAAE;gBACL,iBAAiB,EAAE,IAAI;gBACvB,CAAC,oBAAoB,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;gBACvC,CAAC,oBAAoB,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI;gBAC3C,0BAA0B,EAAE,IAAI,CAAC,OAAO;aACzC,EACD,IAAI,EAAC,OAAO,IAEZ,4DAAK,KAAK,EAAC,uBAAuB,iBAAa,MAAM,IACnD,6DAAM,KAAK,EAAE,0DAA0D,IAAI,CAAC,IAAI,EAAE,GAAI,CAClF,EACN,4DAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,KAAK,CAAO,EACpE,IAAI,CAAC,OAAO,IAAI,4DAAK,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,OAAO,CAAO,CACvE,EACL,IAAI,CAAC,SAAS,KACb,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,wBAAwB,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,gBAAa,cAAI,aAEhF,CACV,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Notification/notification.css?tag=hb-notification&encapsulation=shadow","src/components/Notification/Notification.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hb-notification {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--hb-spacing-sm);\n  width: 320px;\n  max-width: calc(100vw - 32px);\n  padding: var(--hb-spacing-md) var(--hb-spacing-lg);\n  background-color: var(--hb-color-bg-elevated);\n  border-radius: var(--hb-border-radius-base);\n  box-shadow: var(--hb-box-shadow-lg);\n  border-left: 4px solid var(--hb-color-primary);\n  font-size: var(--hb-font-size-sm);\n  color: var(--hb-color-text);\n  pointer-events: auto;\n  opacity: 0;\n  transform: translateX(0);\n  transition: opacity 0.3s, transform 0.3s;\n}\n\n.hb-notification--visible {\n  opacity: 1;\n}\n\n.hb-notification--top-right,\n.hb-notification--bottom-right {\n  transform: translateX(24px);\n}\n.hb-notification--top-right.hb-notification--visible,\n.hb-notification--bottom-right.hb-notification--visible {\n  transform: translateX(0);\n}\n\n.hb-notification--top-left,\n.hb-notification--bottom-left {\n  transform: translateX(-24px);\n}\n.hb-notification--top-left.hb-notification--visible,\n.hb-notification--bottom-left.hb-notification--visible {\n  transform: translateX(0);\n}\n\n/* 类型边框色 */\n.hb-notification--success { border-left-color: var(--hb-color-success); }\n.hb-notification--warning { border-left-color: var(--hb-color-warning); }\n.hb-notification--error   { border-left-color: var(--hb-color-danger); }\n.hb-notification--info    { border-left-color: var(--hb-color-primary); }\n\n.hb-notification__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  margin-top: 2px;\n}\n\n/* 用纯 CSS 形态表示图标，避免依赖 hb-icon */\n.hb-notification__icon-sign {\n  display: inline-block;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  position: relative;\n}\n.hb-notification__icon-sign::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n}\n.hb-notification__icon-sign--success {\n  background-color: var(--hb-color-success);\n}\n.hb-notification__icon-sign--success::after {\n  content: '✓';\n  color: #fff;\n  font-size: 12px;\n  line-height: 18px;\n  text-align: center;\n  inset: auto 0 0 0;\n}\n.hb-notification__icon-sign--warning {\n  background-color: var(--hb-color-warning);\n}\n.hb-notification__icon-sign--warning::after {\n  content: '!';\n  color: #fff;\n  font-size: 12px;\n  line-height: 18px;\n  text-align: center;\n  inset: auto 0 0 0;\n}\n.hb-notification__icon-sign--error {\n  background-color: var(--hb-color-danger);\n}\n.hb-notification__icon-sign--error::after {\n  content: '✕';\n  color: #fff;\n  font-size: 10px;\n  line-height: 18px;\n  text-align: center;\n  inset: auto 0 0 0;\n}\n.hb-notification__icon-sign--info {\n  background-color: var(--hb-color-primary);\n}\n.hb-notification__icon-sign--info::after {\n  content: 'i';\n  color: #fff;\n  font-size: 12px;\n  line-height: 18px;\n  text-align: center;\n  font-style: italic;\n  font-weight: bold;\n  inset: auto 0 0 0;\n}\n\n.hb-notification__content {\n  flex: 1;\n  min-width: 0;\n}\n\n.hb-notification__title {\n  font-size: var(--hb-font-size-base);\n  font-weight: 600;\n  color: var(--hb-color-text-primary);\n  margin-bottom: var(--hb-spacing-xxs);\n  line-height: 1.4;\n}\n\n.hb-notification__message {\n  color: var(--hb-color-text-secondary);\n  line-height: 1.5;\n  word-break: break-word;\n}\n\n.hb-notification__close {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  margin-left: var(--hb-spacing-xs);\n  cursor: pointer;\n  font-size: 16px;\n  color: var(--hb-color-text-tertiary);\n  border: none;\n  background: transparent;\n  border-radius: 50%;\n  transition: background-color var(--hb-transition-duration), color var(--hb-transition-duration);\n}\n.hb-notification__close:hover {\n  background-color: var(--hb-color-fill-tertiary);\n  color: var(--hb-color-text-secondary);\n}\n","import { Component, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\n\nexport type NotificationType = 'success' | 'warning' | 'info' | 'error';\nexport type NotificationPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';\n\n/**\n * Notification 通知提醒组件\n * 悬浮出现在页面角落，用于系统中较复杂的反馈。\n */\n@Component({\n  tag: 'hb-notification',\n  styleUrl: 'notification.css',\n  shadow: true,\n})\nexport class Notification {\n  @Element() el: HTMLElement;\n\n  /** 唯一标识 */\n  @Prop() id: string = '';\n\n  /** 通知类型 */\n  @Prop() type: NotificationType = 'info';\n\n  /** 标题 */\n  @Prop() title: string = '';\n\n  /** 描述文字 */\n  @Prop() message: string = '';\n\n  /** 显示时间（毫秒），0 为不自动关闭 */\n  @Prop() duration: number = 4500;\n\n  /** 出现位置 */\n  @Prop() position: NotificationPosition = 'top-right';\n\n  /** 是否显示关闭按钮 */\n  @Prop() showClose: boolean = true;\n\n  /** 是否显示（受控） */\n  @Prop({ mutable: true }) visible: boolean = true;\n\n  /** 关闭事件 */\n  @Event() hbClose: EventEmitter<string>;\n\n  private timer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    if (this.visible && this.duration > 0) {\n      this.timer = setTimeout(() => this.close(), this.duration);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n  }\n\n  private close = () => {\n    if (this.timer) {\n      clearTimeout(this.timer);\n      this.timer = null;\n    }\n    this.visible = false;\n    this.hbClose.emit(this.id);\n  };\n\n  render() {\n    return (\n      <div\n        class={{\n          'hb-notification': true,\n          [`hb-notification--${this.type}`]: true,\n          [`hb-notification--${this.position}`]: true,\n          'hb-notification--visible': this.visible,\n        }}\n        role=\"alert\"\n      >\n        <div class=\"hb-notification__icon\" aria-hidden=\"true\">\n          <span class={`hb-notification__icon-sign hb-notification__icon-sign--${this.type}`} />\n        </div>\n        <div class=\"hb-notification__content\">\n          {this.title && <div class=\"hb-notification__title\">{this.title}</div>}\n          {this.message && <div class=\"hb-notification__message\">{this.message}</div>}\n        </div>\n        {this.showClose && (\n          <button type=\"button\" class=\"hb-notification__close\" onClick={this.close} aria-label=\"关闭\">\n            ×\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}