huibo-ui 0.3.0

package/dist/components/hb-steps.js

@@ -0,0 +1,71 @@
+import { p as proxyCustomElement, H, h } from './p-1407a5e8.js';
+
+const stepsCss = "/*! 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-steps{display:flex}.hb-steps--vertical,.hb-steps__item{flex-direction:column}.hb-steps__item{align-items:center;display:flex;flex:1;position:relative}.hb-steps--vertical .hb-steps__item{align-items:flex-start;flex-direction:row;gap:var(--hb-spacing-sm);padding-bottom:var(--hb-spacing-md)}.hb-steps__head{align-items:center;display:flex;width:100%}.hb-steps__icon{align-items:center;background:var(--hb-color-fill);border-radius:50%;color:var(--hb-color-text-secondary);display:flex;flex-shrink:0;font-size:var(--hb-font-size-sm);font-weight:600;height:28px;justify-content:center;transition:all .3s;width:28px}.hb-steps__item--finish .hb-steps__icon,.hb-steps__item--process .hb-steps__icon{background:var(--hb-color-primary);color:#fff}.hb-steps__item--error .hb-steps__icon{background:var(--hb-color-danger);color:#fff}.hb-steps__line{background:var(--hb-color-border-secondary);flex:1;height:2px;margin:0 var(--hb-spacing-xs)}.hb-steps__item--finish .hb-steps__line{background:var(--hb-color-primary)}.hb-steps__main{margin-top:var(--hb-spacing-xs);text-align:center}.hb-steps--vertical .hb-steps__main{text-align:left}.hb-steps:not(.hb-steps--align-center) .hb-steps__item{align-items:flex-start}.hb-steps:not(.hb-steps--align-center) .hb-steps__main{text-align:left}.hb-steps__title{font-size:var(--hb-font-size-sm);font-weight:600}.hb-steps__item--process .hb-steps__title{color:var(--hb-color-primary)}.hb-steps__description{color:var(--hb-color-text-secondary);font-size:var(--hb-font-size-xs);margin-top:2px}@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 HbStepsStyle0 = stepsCss;
+
+const Steps = /*@__PURE__*/ proxyCustomElement(class Steps extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    active = 0;
+    processStatus = 'process';
+    alignCenter = false;
+    direction = 'horizontal';
+    steps = [];
+    componentDidLoad() {
+        const items = this.el.querySelectorAll('hb-step');
+        this.steps = Array.from(items).map((item) => ({
+            title: item.getAttribute('title') || '',
+            description: item.getAttribute('description') || undefined,
+        }));
+    }
+    getStatus(index) {
+        if (index < this.active)
+            return 'finish';
+        if (index === this.active)
+            return this.processStatus;
+        return 'wait';
+    }
+    getIcon(index) {
+        const status = this.getStatus(index);
+        if (status === 'finish')
+            return '✓';
+        if (status === 'error')
+            return '✕';
+        return String(index + 1);
+    }
+    render() {
+        return (h("div", { key: '3bb957ec22b3943e8dccdd609838adcac9aa0766', class: { 'hb-steps': true, [`hb-steps--${this.direction}`]: true, 'hb-steps--align-center': this.alignCenter } }, this.steps.map((step, i) => (h("div", { class: { 'hb-steps__item': true, [`hb-steps__item--${this.getStatus(i)}`]: true } }, h("div", { class: "hb-steps__head" }, h("span", { class: "hb-steps__icon" }, this.getIcon(i)), i < this.steps.length - 1 && h("div", { class: "hb-steps__line" })), h("div", { class: "hb-steps__main" }, h("div", { class: "hb-steps__title" }, step.title), step.description && h("div", { class: "hb-steps__description" }, step.description)))))));
+    }
+    static get style() { return HbStepsStyle0; }
+}, [1, "hb-steps", {
+        "active": [2],
+        "processStatus": [1, "process-status"],
+        "alignCenter": [4, "align-center"],
+        "direction": [1],
+        "steps": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-steps"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-steps":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Steps);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbSteps = Steps;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbSteps, defineCustomElement };
+
+//# sourceMappingURL=hb-steps.js.map

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

@@ -0,0 +1 @@
+{"file":"hb-steps.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,mnOAAmnO,CAAC;AACroO,sBAAe,QAAQ;;MCEV,KAAK;;;;;;;IAER,MAAM,GAAW,CAAC,CAAC;IACnB,aAAa,GAA4C,SAAS,CAAC;IACnE,WAAW,GAAY,KAAK,CAAC;IAC7B,SAAS,GAA8B,YAAY,CAAC;IAEnD,KAAK,GAA8C,EAAE,CAAC;IAE/D,gBAAgB;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAClD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,MAAM;YAC5C,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE;YACvC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,SAAS;SAC3D,CAAC,CAAC,CAAC;KACL;IAEO,SAAS,CAAC,KAAa;QAC7B,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM;YAAE,OAAO,QAAQ,CAAC;QACzC,IAAI,KAAK,KAAK,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC,aAAa,CAAC;QACrD,OAAO,MAAM,CAAC;KACf;IAEO,OAAO,CAAC,KAAa;QAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,MAAM,KAAK,QAAQ;YAAE,OAAO,GAAG,CAAC;QACpC,IAAI,MAAM,KAAK,OAAO;YAAE,OAAO,GAAG,CAAC;QACnC,OAAO,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;KAC1B;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,aAAa,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,EAAE,wBAAwB,EAAE,IAAI,CAAC,WAAW,EAAE,IAChH,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MACtB,WAAK,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,mBAAmB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,IACpF,WAAK,KAAK,EAAC,gBAAgB,IACzB,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAQ,EACpD,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,WAAK,KAAK,EAAC,gBAAgB,GAAO,CAC5D,EACN,WAAK,KAAK,EAAC,gBAAgB,IACzB,WAAK,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAO,EAC9C,IAAI,CAAC,WAAW,IAAI,WAAK,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,WAAW,CAAO,CAC5E,CACF,CACP,CAAC,CACE,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Steps/steps.css?tag=hb-steps&encapsulation=shadow","src/components/Steps/Steps.tsx"],"sourcesContent":[":host { display: block; }\n.hb-steps { display: flex; }\n.hb-steps--vertical { flex-direction: column; }\n.hb-steps__item { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }\n.hb-steps--vertical .hb-steps__item { flex-direction: row; align-items: flex-start; gap: var(--hb-spacing-sm); padding-bottom: var(--hb-spacing-md); }\n.hb-steps__head { display: flex; align-items: center; width: 100%; }\n.hb-steps__icon {\n  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;\n  font-size: var(--hb-font-size-sm); font-weight: 600; flex-shrink: 0;\n  background: var(--hb-color-fill); color: var(--hb-color-text-secondary); transition: all 0.3s;\n}\n.hb-steps__item--process .hb-steps__icon { background: var(--hb-color-primary); color: #fff; }\n.hb-steps__item--finish .hb-steps__icon { background: var(--hb-color-primary); color: #fff; }\n.hb-steps__item--error .hb-steps__icon { background: var(--hb-color-danger); color: #fff; }\n.hb-steps__line { flex: 1; height: 2px; background: var(--hb-color-border-secondary); margin: 0 var(--hb-spacing-xs); }\n.hb-steps__item--finish .hb-steps__line { background: var(--hb-color-primary); }\n.hb-steps__main { text-align: center; margin-top: var(--hb-spacing-xs); }\n.hb-steps--vertical .hb-steps__main { text-align: left; }\n\n/* 对齐方式（alignCenter prop）：默认 false 时图标与文字左对齐，true 时居中 */\n.hb-steps:not(.hb-steps--align-center) .hb-steps__item { align-items: flex-start; }\n.hb-steps:not(.hb-steps--align-center) .hb-steps__main { text-align: left; }\n.hb-steps__title { font-size: var(--hb-font-size-sm); font-weight: 600; }\n.hb-steps__item--process .hb-steps__title { color: var(--hb-color-primary); }\n.hb-steps__description { font-size: var(--hb-font-size-xs); color: var(--hb-color-text-secondary); margin-top: 2px; }\n","import { Component, h, Prop, State, Element } from '@stencil/core';\n\n@Component({ tag: 'hb-steps', styleUrl: 'steps.css', shadow: true })\nexport class Steps {\n  @Element() el: HTMLElement;\n  @Prop() active: number = 0;\n  @Prop() processStatus: 'wait' | 'process' | 'finish' | 'error' = 'process';\n  @Prop() alignCenter: boolean = false;\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  @State() steps: { title: string; description?: string }[] = [];\n\n  componentDidLoad() {\n    const items = this.el.querySelectorAll('hb-step');\n    this.steps = Array.from(items).map((item) => ({\n      title: item.getAttribute('title') || '',\n      description: item.getAttribute('description') || undefined,\n    }));\n  }\n\n  private getStatus(index: number): string {\n    if (index < this.active) return 'finish';\n    if (index === this.active) return this.processStatus;\n    return 'wait';\n  }\n\n  private getIcon(index: number): string {\n    const status = this.getStatus(index);\n    if (status === 'finish') return '✓';\n    if (status === 'error') return '✕';\n    return String(index + 1);\n  }\n\n  render() {\n    return (\n      <div class={{ 'hb-steps': true, [`hb-steps--${this.direction}`]: true, 'hb-steps--align-center': this.alignCenter }}>\n        {this.steps.map((step, i) => (\n          <div class={{ 'hb-steps__item': true, [`hb-steps__item--${this.getStatus(i)}`]: true }}>\n            <div class=\"hb-steps__head\">\n              <span class=\"hb-steps__icon\">{this.getIcon(i)}</span>\n              {i < this.steps.length - 1 && <div class=\"hb-steps__line\"></div>}\n            </div>\n            <div class=\"hb-steps__main\">\n              <div class=\"hb-steps__title\">{step.title}</div>\n              {step.description && <div class=\"hb-steps__description\">{step.description}</div>}\n            </div>\n          </div>\n        ))}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1,91 @@
+import { p as proxyCustomElement, H, h } from './p-1407a5e8.js';
+import { i as isActivationKey } from './p-cc0aeb50.js';
+
+const SubMenu = /*@__PURE__*/ proxyCustomElement(class SubMenu extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    /** 标题 */
+    label = '';
+    /** 图标 */
+    icon;
+    /**
+     * 是否处于折叠态（由父 hb-menu 在 collapsed=true 时透传）。
+     * 折叠态下不再就地展开，而是悬停弹出浮层。
+     */
+    collapsed = false;
+    isOpen = false;
+    isHover = false;
+    toggle = () => {
+        // 折叠态不就地切换展开（改由 hover 浮层承载子菜单）
+        if (this.collapsed)
+            return;
+        this.isOpen = !this.isOpen;
+    };
+    handleTitleKeydown = (e) => {
+        if (isActivationKey(e.key)) {
+            e.preventDefault();
+            this.toggle();
+        }
+    };
+    handleMouseEnter = () => {
+        if (!this.collapsed)
+            return;
+        this.isHover = true;
+    };
+    handleMouseLeave = () => {
+        if (!this.collapsed)
+            return;
+        this.isHover = false;
+    };
+    /** 折叠态浮层内点击子项后，收起浮层 */
+    handleChildrenClick = () => {
+        if (!this.collapsed)
+            return;
+        this.isHover = false;
+    };
+    render() {
+        // 折叠态：浮层是否显示由 hover 决定；非折叠态：就地展开由 isOpen 决定
+        const showChildren = this.collapsed ? this.isHover : this.isOpen;
+        return (h("li", { key: '2158b7ce59919c89c5f86a1218e1f2c16fb7cc11', class: {
+                'hb-sub-menu': true,
+                'hb-sub-menu--open': this.isOpen,
+                'hb-sub-menu--collapsed': this.collapsed,
+            }, role: "menuitem", "aria-haspopup": "menu", "aria-expanded": showChildren ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'ed1b49c0417a21673d8eac14dfb15e31db722917', class: "hb-sub-menu__title", role: "button", tabindex: 0, "aria-expanded": showChildren ? 'true' : 'false',
+            // 折叠态用原生 title 提供文字提示（图标条场景）
+            title: this.collapsed ? this.label : undefined, onClick: this.toggle, onKeyDown: this.handleTitleKeydown }, this.icon && h("span", { key: '488430d18a0a4c2fd81f38d621988b3a06ef874a', class: "hb-sub-menu__icon" }, this.icon), h("span", { key: 'ba16d8aaddeba6ec00a9b19ac4069802a1cc503b', class: "hb-sub-menu__label" }, this.label), h("span", { key: 'cf3b32672f9f36d4ffbe570f7dbad1e2755afe3c', class: { 'hb-sub-menu__arrow': true, 'hb-sub-menu__arrow--open': showChildren } }, "\u25B6")), showChildren && (h("ul", { key: '6f0404f6e5b89ae0c59b47630f8d17620800b46f', class: {
+                'hb-sub-menu__children': true,
+                'hb-sub-menu__children--popover': this.collapsed,
+            }, role: "menu", onClick: this.handleChildrenClick }, h("slot", { key: '795f95cc807e590339faff8745eb6c36c326f9f2' })))));
+    }
+}, [1, "hb-sub-menu", {
+        "label": [1],
+        "icon": [1],
+        "collapsed": [4],
+        "isOpen": [32],
+        "isHover": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-sub-menu"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-sub-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SubMenu);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbSubMenu = SubMenu;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbSubMenu, defineCustomElement };
+
+//# sourceMappingURL=hb-sub-menu.js.map

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

@@ -0,0 +1 @@
+{"file":"hb-sub-menu.js","mappings":";;;MAgBa,OAAO;;;;;;;;IAIV,KAAK,GAAW,EAAE,CAAC;;IAGnB,IAAI,CAAU;;;;;IAMd,SAAS,GAAY,KAAK,CAAC;IAE1B,MAAM,GAAY,KAAK,CAAC;IACxB,OAAO,GAAY,KAAK,CAAC;IAE1B,MAAM,GAAG;;QAEf,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO;QAC3B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B,CAAC;IAEM,kBAAkB,GAAG,CAAC,CAAgB;QAC5C,IAAI,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;YAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,EAAE,CAAC;SACf;KACF,CAAC;IAEM,gBAAgB,GAAG;QACzB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB,CAAC;IAEM,gBAAgB,GAAG;QACzB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAC5B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB,CAAC;;IAGM,mBAAmB,GAAG;QAC5B,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAC5B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB,CAAC;IAEF,MAAM;;QAEJ,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC;QAEjE,QACE,2DACE,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,mBAAmB,EAAE,IAAI,CAAC,MAAM;gBAChC,wBAAwB,EAAE,IAAI,CAAC,SAAS;aACzC,EACD,IAAI,EAAC,UAAU,mBACD,MAAM,mBACL,YAAY,GAAG,MAAM,GAAG,OAAO,EAC9C,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,IAEnC,4DACE,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,mBACI,YAAY,GAAG,MAAM,GAAG,OAAO;;YAE9C,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,GAAG,SAAS,EAC9C,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,SAAS,EAAE,IAAI,CAAC,kBAAkB,IAEjC,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,IAAI,CAAQ,EAChE,6DAAM,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACpD,6DAAM,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,0BAA0B,EAAE,YAAY,EAAE,aAAU,CAC3F,EACL,YAAY,KACX,2DACE,KAAK,EAAE;gBACL,uBAAuB,EAAE,IAAI;gBAC7B,gCAAgC,EAAE,IAAI,CAAC,SAAS;aACjD,EACD,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,IAAI,CAAC,mBAAmB,IAEjC,8DAAQ,CACL,CACN,CACE,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Menu/SubMenu.tsx"],"sourcesContent":["import { Component, h, Prop, State, Element } from '@stencil/core';\nimport { isActivationKey } from '../../utils/a11y';\n\n/**\n * SubMenu 子菜单\n *\n * 设计要点：\n * - 不拦截 hbMenuItemSelect：MenuItem 点击派发的内部事件会冒泡穿过 SubMenu 到达 Menu，\n *   由 Menu 的 @Listen('hbMenuItemSelect') 统一处理（避免无限递归的设计见 MenuItem.handleClick）。\n * - 折叠模式（collapsed=true，由父 Menu 通过 prop 传入）：不再就地展开，\n *   改为标题悬停时弹出二级浮层（popover）；标题节点带 title 属性提供原生文字提示。\n */\n@Component({\n  tag: 'hb-sub-menu',\n  shadow: true,\n})\nexport class SubMenu {\n  @Element() el: HTMLElement;\n\n  /** 标题 */\n  @Prop() label: string = '';\n\n  /** 图标 */\n  @Prop() icon?: string;\n\n  /**\n   * 是否处于折叠态（由父 hb-menu 在 collapsed=true 时透传）。\n   * 折叠态下不再就地展开，而是悬停弹出浮层。\n   */\n  @Prop() collapsed: boolean = false;\n\n  @State() isOpen: boolean = false;\n  @State() isHover: boolean = false;\n\n  private toggle = () => {\n    // 折叠态不就地切换展开（改由 hover 浮层承载子菜单）\n    if (this.collapsed) return;\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleTitleKeydown = (e: KeyboardEvent) => {\n    if (isActivationKey(e.key)) {\n      e.preventDefault();\n      this.toggle();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    if (!this.collapsed) return;\n    this.isHover = true;\n  };\n\n  private handleMouseLeave = () => {\n    if (!this.collapsed) return;\n    this.isHover = false;\n  };\n\n  /** 折叠态浮层内点击子项后，收起浮层 */\n  private handleChildrenClick = () => {\n    if (!this.collapsed) return;\n    this.isHover = false;\n  };\n\n  render() {\n    // 折叠态：浮层是否显示由 hover 决定；非折叠态：就地展开由 isOpen 决定\n    const showChildren = this.collapsed ? this.isHover : this.isOpen;\n\n    return (\n      <li\n        class={{\n          'hb-sub-menu': true,\n          'hb-sub-menu--open': this.isOpen,\n          'hb-sub-menu--collapsed': this.collapsed,\n        }}\n        role=\"menuitem\"\n        aria-haspopup=\"menu\"\n        aria-expanded={showChildren ? 'true' : 'false'}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <div\n          class=\"hb-sub-menu__title\"\n          role=\"button\"\n          tabindex={0}\n          aria-expanded={showChildren ? 'true' : 'false'}\n          // 折叠态用原生 title 提供文字提示（图标条场景）\n          title={this.collapsed ? this.label : undefined}\n          onClick={this.toggle}\n          onKeyDown={this.handleTitleKeydown}\n        >\n          {this.icon && <span class=\"hb-sub-menu__icon\">{this.icon}</span>}\n          <span class=\"hb-sub-menu__label\">{this.label}</span>\n          <span class={{ 'hb-sub-menu__arrow': true, 'hb-sub-menu__arrow--open': showChildren }}>▶</span>\n        </div>\n        {showChildren && (\n          <ul\n            class={{\n              'hb-sub-menu__children': true,\n              'hb-sub-menu__children--popover': this.collapsed,\n            }}\n            role=\"menu\"\n            onClick={this.handleChildrenClick}\n          >\n            <slot />\n          </ul>\n        )}\n      </li>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/hb-switch.js

@@ -0,0 +1,118 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-1407a5e8.js';
+
+const switchCss = "/*! 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-switch-width:40px;--hb-switch-active-color:var(--hb-color-primary);--hb-switch-inactive-color:var(--hb-color-text-placeholder,#c0c4cc);display:inline-block}.hb-switch{align-items:center;cursor:pointer;display:inline-flex;font-size:14px;height:20px;line-height:20px;position:relative;vertical-align:middle}.hb-switch__original{height:0;margin:0;opacity:0;position:absolute;width:0}.hb-switch__core{background:var(--hb-switch-inactive-color);border:1px solid var(--hb-switch-inactive-color);border-radius:10px;box-sizing:border-box;cursor:pointer;display:inline-block;height:20px;margin:0;outline:none;position:relative;transition:border-color .3s,background-color .3s;vertical-align:middle;width:var(--hb-switch-width)}.hb-switch__core:after{background-color:var(--hb-color-white,#fff);border-radius:100%;content:\"\";height:16px;left:1px;position:absolute;top:1px;transition:all .3s;width:16px}.hb-switch--checked .hb-switch__core{background-color:var(--hb-switch-active-color);border-color:var(--hb-switch-active-color)}.hb-switch--checked .hb-switch__core:after{left:100%;margin-left:-17px}.hb-switch__inner{color:var(--hb-color-white,#fff);font-size:12px;left:23px;position:absolute;transition:all .3s}.hb-switch--checked .hb-switch__inner{left:5px}.hb-switch--disabled{cursor:not-allowed;opacity:.6}.hb-switch--disabled .hb-switch__core{cursor:not-allowed}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
+const HbSwitchStyle0 = switchCss;
+
+const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.hbChange = createEvent(this, "hbChange", 7);
+    }
+    /**
+     * 绑定值
+     */
+    modelValue = false;
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 是否显示文字描述
+     * @default false
+     */
+    activeText;
+    /**
+     * 关闭时的文字描述
+     */
+    inactiveText;
+    /**
+     * 打开时的背景色
+     */
+    activeColor;
+    /**
+     * 关闭时的背景色
+     */
+    inactiveColor;
+    /**
+     * 打开时的值
+     * @default true
+     */
+    activeValue = true;
+    /**
+     * 关闭时的值
+     * @default false
+     */
+    inactiveValue = false;
+    /**
+     * 宽度
+     */
+    width;
+    /**
+     * 是否内联提示
+     * @default false
+     */
+    inlinePrompt = false;
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    handleChange = (e) => {
+        if (this.disabled) {
+            e.preventDefault();
+            return;
+        }
+        const checked = e.target.checked;
+        const value = checked ? this.activeValue : this.inactiveValue;
+        this.modelValue = checked;
+        this.hbChange.emit(value);
+    };
+    render() {
+        const isChecked = this.modelValue === this.activeValue;
+        const width = this.width || (this.activeText || this.inactiveText ? 60 : 40);
+        return (h("label", { key: '1604fb9d4cee4a550e4d17cfde2804795c975b49', class: {
+                'hb-switch': true,
+                'hb-switch--checked': isChecked,
+                'hb-switch--disabled': this.disabled,
+            }, style: {
+                '--hb-switch-width': `${width}px`,
+                '--hb-switch-active-color': this.activeColor || 'var(--hb-color-primary)',
+                '--hb-switch-inactive-color': this.inactiveColor || 'var(--hb-color-text-placeholder, #c0c4cc)',
+            } }, h("input", { key: 'bcf5f240a911b79fe93a06c03d4defc9da535007', type: "checkbox", class: "hb-switch__original", role: "switch", "aria-checked": isChecked ? 'true' : 'false', checked: isChecked, disabled: this.disabled, onChange: this.handleChange, "aria-label": this.activeText || this.inactiveText || undefined }), h("span", { key: 'c021d1bda42d0a888b5620182e9839bdcda2acfd', class: "hb-switch__core" }, this.activeText || this.inactiveText ? (h("span", { class: "hb-switch__inner" }, isChecked ? this.activeText : this.inactiveText)) : null)));
+    }
+    static get style() { return HbSwitchStyle0; }
+}, [1, "hb-switch", {
+        "modelValue": [1028, "model-value"],
+        "disabled": [4],
+        "activeText": [1, "active-text"],
+        "inactiveText": [1, "inactive-text"],
+        "activeColor": [1, "active-color"],
+        "inactiveColor": [1, "inactive-color"],
+        "activeValue": [8, "active-value"],
+        "inactiveValue": [8, "inactive-value"],
+        "width": [2],
+        "inlinePrompt": [4, "inline-prompt"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-switch"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-switch":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Switch);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbSwitch = Switch;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbSwitch, defineCustomElement };
+
+//# sourceMappingURL=hb-switch.js.map

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

@@ -0,0 +1 @@
+{"file":"hb-switch.js","mappings":";;AAAA,MAAM,SAAS,GAAG,w8NAAw8N,CAAC;AAC39N,uBAAe,SAAS;;MCUX,MAAM;;;;;;;;;;IAIQ,UAAU,GAAY,KAAK,CAAC;;;;;IAM7C,QAAQ,GAAY,KAAK,CAAC;;;;;IAM1B,UAAU,CAAU;;;;IAKpB,YAAY,CAAU;;;;IAKtB,WAAW,CAAU;;;;IAKrB,aAAa,CAAU;;;;;IAMvB,WAAW,GAA8B,IAAI,CAAC;;;;;IAM9C,aAAa,GAA8B,KAAK,CAAC;;;;IAKjD,KAAK,CAAU;;;;;IAMf,YAAY,GAAY,KAAK,CAAC;;;;IAK7B,QAAQ,CAA0C;IAEnD,YAAY,GAAG,CAAC,CAAQ;QAC9B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO;SACR;QAED,MAAM,OAAO,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAC;QACvD,MAAM,KAAK,GAAG,OAAO,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC;QAE9D,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;QAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3B,CAAC;IAEF,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,WAAW,CAAC;QACvD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAE7E,QACE,8DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,oBAAoB,EAAE,SAAS;gBAC/B,qBAAqB,EAAE,IAAI,CAAC,QAAQ;aACrC,EACD,KAAK,EAAE;gBACL,mBAAmB,EAAE,GAAG,KAAK,IAAI;gBACjC,0BAA0B,EAAE,IAAI,CAAC,WAAW,IAAI,yBAAyB;gBACzE,4BAA4B,EAAE,IAAI,CAAC,aAAa,IAAI,2CAA2C;aAChG,IAED,8DACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,QAAQ,kBACC,SAAS,GAAG,MAAM,GAAG,OAAO,EAC1C,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,YAAY,gBACf,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,IAAI,SAAS,GAC7D,EACF,6DAAM,KAAK,EAAC,iBAAiB,IAC1B,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,IACnC,YAAM,KAAK,EAAC,kBAAkB,IAC3B,SAAS,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,YAAY,CAC3C,IACL,IAAI,CACH,CACD,EACR;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Switch/switch.css?tag=hb-switch&encapsulation=shadow","src/components/Switch/Switch.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  --hb-switch-width: 40px;\n  --hb-switch-active-color: var(--hb-color-primary);\n  --hb-switch-inactive-color: var(--hb-color-text-placeholder, #c0c4cc);\n}\n\n.hb-switch {\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  font-size: 14px;\n  line-height: 20px;\n  height: 20px;\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.hb-switch__original {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  margin: 0;\n  position: absolute;\n}\n\n.hb-switch__core {\n  margin: 0;\n  display: inline-block;\n  position: relative;\n  width: var(--hb-switch-width);\n  height: 20px;\n  border: 1px solid var(--hb-switch-inactive-color);\n  outline: none;\n  border-radius: 10px;\n  box-sizing: border-box;\n  background: var(--hb-switch-inactive-color);\n  cursor: pointer;\n  transition: border-color 0.3s, background-color 0.3s;\n  vertical-align: middle;\n}\n\n.hb-switch__core::after {\n  content: '';\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  border-radius: 100%;\n  transition: all 0.3s;\n  width: 16px;\n  height: 16px;\n  background-color: var(--hb-color-white, #ffffff);\n}\n\n.hb-switch--checked .hb-switch__core {\n  border-color: var(--hb-switch-active-color);\n  background-color: var(--hb-switch-active-color);\n}\n\n.hb-switch--checked .hb-switch__core::after {\n  left: 100%;\n  margin-left: -17px;\n}\n\n.hb-switch__inner {\n  position: absolute;\n  left: 23px;\n  font-size: 12px;\n  color: var(--hb-color-white, #ffffff);\n  transition: all 0.3s;\n}\n\n.hb-switch--checked .hb-switch__inner {\n  left: 5px;\n}\n\n.hb-switch--disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.hb-switch--disabled .hb-switch__core {\n  cursor: not-allowed;\n}\n\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Switch 开关组件\n * 表示两种相互对立的状态间的切换，多用于触发「开/关」\n */\n@Component({\n  tag: 'hb-switch',\n  styleUrl: 'switch.css',\n  shadow: true,\n})\nexport class Switch {\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: boolean = false;\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否显示文字描述\n   * @default false\n   */\n  @Prop() activeText?: string;\n\n  /**\n   * 关闭时的文字描述\n   */\n  @Prop() inactiveText?: string;\n\n  /**\n   * 打开时的背景色\n   */\n  @Prop() activeColor?: string;\n\n  /**\n   * 关闭时的背景色\n   */\n  @Prop() inactiveColor?: string;\n\n  /**\n   * 打开时的值\n   * @default true\n   */\n  @Prop() activeValue: boolean | string | number = true;\n\n  /**\n   * 关闭时的值\n   * @default false\n   */\n  @Prop() inactiveValue: boolean | string | number = false;\n\n  /**\n   * 宽度\n   */\n  @Prop() width?: number;\n\n  /**\n   * 是否内联提示\n   * @default false\n   */\n  @Prop() inlinePrompt: boolean = false;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<boolean | string | number>;\n\n  private handleChange = (e: Event) => {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    const checked = (e.target as HTMLInputElement).checked;\n    const value = checked ? this.activeValue : this.inactiveValue;\n    \n    this.modelValue = checked;\n    this.hbChange.emit(value);\n  };\n\n  render() {\n    const isChecked = this.modelValue === this.activeValue;\n    const width = this.width || (this.activeText || this.inactiveText ? 60 : 40);\n\n    return (\n      <label\n        class={{\n          'hb-switch': true,\n          'hb-switch--checked': isChecked,\n          'hb-switch--disabled': this.disabled,\n        }}\n        style={{\n          '--hb-switch-width': `${width}px`,\n          '--hb-switch-active-color': this.activeColor || 'var(--hb-color-primary)',\n          '--hb-switch-inactive-color': this.inactiveColor || 'var(--hb-color-text-placeholder, #c0c4cc)',\n        }}\n      >\n        <input\n          type=\"checkbox\"\n          class=\"hb-switch__original\"\n          role=\"switch\"\n          aria-checked={isChecked ? 'true' : 'false'}\n          checked={isChecked}\n          disabled={this.disabled}\n          onChange={this.handleChange}\n          aria-label={this.activeText || this.inactiveText || undefined}\n        />\n        <span class=\"hb-switch__core\">\n          {this.activeText || this.inactiveText ? (\n            <span class=\"hb-switch__inner\">\n              {isChecked ? this.activeText : this.inactiveText}\n            </span>\n          ) : null}\n        </span>\n      </label>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/hb-tab-pane.d.ts

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

package/dist/components/hb-tab-pane.js

@@ -0,0 +1,43 @@
+import { p as proxyCustomElement, H, h } from './p-1407a5e8.js';
+
+const TabPane = /*@__PURE__*/ proxyCustomElement(class TabPane extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    /** 面板标识 */
+    key = '';
+    /** 标签标题 */
+    label = '';
+    /** 是否激活 */
+    active = false;
+    render() {
+        return (h("div", { key: 'fa98d25d4ff9e4150b91b25db175af36aaba295f', class: { 'hb-tab-pane': true, 'hb-tab-pane--hidden': !this.active }, role: "tabpanel", id: `hb-tabs__panel-${this.key}`, "aria-labelledby": this.key ? `hb-tabs__tab-${this.key}` : undefined, tabindex: this.active ? 0 : undefined }, h("slot", { key: 'a13d4ae22b4e093d4d5ba4994468fc22be3cecc3' })));
+    }
+}, [1, "hb-tab-pane", {
+        "key": [1],
+        "label": [1],
+        "active": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hb-tab-pane"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hb-tab-pane":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TabPane);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const HbTabPane = TabPane;
+const defineCustomElement = defineCustomElement$1;
+
+export { HbTabPane, defineCustomElement };
+
+//# sourceMappingURL=hb-tab-pane.js.map

package/dist/components/hb-tab-pane.js.map

@@ -0,0 +1 @@
+{"file":"hb-tab-pane.js","mappings":";;MASa,OAAO;;;;;;;IAEV,GAAG,GAAW,EAAE,CAAC;;IAGjB,KAAK,GAAW,EAAE,CAAC;;IAGnB,MAAM,GAAY,KAAK,CAAC;IAEhC,MAAM;QACJ,QACE,4DACE,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,qBAAqB,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EACnE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,kBAAkB,IAAI,CAAC,GAAG,EAAE,qBACf,IAAI,CAAC,GAAG,GAAG,gBAAgB,IAAI,CAAC,GAAG,EAAE,GAAG,SAAS,EAClE,QAAQ,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,SAAS,IAErC,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/Tabs/TabPane.tsx"],"sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * TabPane 标签页面板\n */\n@Component({\n  tag: 'hb-tab-pane',\n  shadow: true,\n})\nexport class TabPane {\n  /** 面板标识 */\n  @Prop() key: string = '';\n\n  /** 标签标题 */\n  @Prop() label: string = '';\n\n  /** 是否激活 */\n  @Prop() active: boolean = false;\n\n  render() {\n    return (\n      <div\n        class={{ 'hb-tab-pane': true, 'hb-tab-pane--hidden': !this.active }}\n        role=\"tabpanel\"\n        id={`hb-tabs__panel-${this.key}`}\n        aria-labelledby={this.key ? `hb-tabs__tab-${this.key}` : undefined}\n        tabindex={this.active ? 0 : undefined}\n      >\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

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

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