@actabldesign/bellhop-core 0.0.3

package/esm/bh-avatar.entry.js

@@ -0,0 +1,91 @@
+import { r as registerInstance, c as createEvent, h } from './index-DtVghh5W.js';
+
+const bhAvatarCss = ":host{display:inline-block}.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--color-neutral-100);flex-shrink:0}.avatar-xxs{width:16px;height:16px}.avatar-xs{width:24px;height:24px}.avatar-sm{width:32px;height:32px}.avatar-md{width:40px;height:40px}.avatar-lg{width:48px;height:48px}.avatar-xl{width:56px;height:56px}.avatar-2xl{width:64px;height:64px}.avatar-border{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;pointer-events:none;z-index:1}.avatar-xs .avatar-border,.avatar-sm .avatar-border{border:0.5px solid var(--color-neutral-400)}.avatar-md .avatar-border,.avatar-lg .avatar-border,.avatar-xl .avatar-border,.avatar-2xl .avatar-border{border:0.75px solid var(--color-neutral-400)}.avatar-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;z-index:0}.avatar-image{width:100%;height:100%;object-fit:cover;border-radius:50%;aspect-ratio:1 / 1}.avatar-placeholder-icon{color:var(--color-neutral-500);line-height:1;display:flex;align-items:center;justify-content:center}.avatar-text{color:var(--color-neutral-500);font-family:var(--font-inter);font-weight:var(--weight-semibold);text-align:center;line-height:1}.text-xxs{font-size:10px;line-height:1.6em}.text-xs{font-size:12px;line-height:1.5em}.text-sm{font-size:var(--text-sm-size);line-height:var(--text-sm-line)}.text-md{font-size:var(--text-md-size);line-height:var(--text-md-line)}.text-lg{font-size:18px;line-height:1.56em}.text-xl{font-size:20px;line-height:1.5em}.text-2xl{font-size:24px;line-height:1.33em}.icon-sm{font-size:16px}.icon-md{font-size:20px}.icon-lg{font-size:24px}.icon-xl{font-size:28px}.icon-2xl{font-size:32px}.icon-3xl{font-size:36px}.icon-4xl{font-size:40px}.avatar-status{position:absolute;border-radius:50%;background-color:var(--color-success-500);border:1.5px solid var(--color-white);z-index:2}.avatar-status-online{background-color:var(--color-success-500)}.avatar-status-offline{background-color:var(--color-neutral-400)}.avatar-status-xxs{width:4px;height:4px;bottom:0;right:0}.avatar-status-xs{width:6px;height:6px;bottom:0;right:0}.avatar-status-sm{width:8px;height:8px;bottom:0;right:0}.avatar-status-md{width:10px;height:10px;bottom:0;right:0}.avatar-status-lg{width:12px;height:12px;bottom:0;right:0}.avatar-status-xl{width:14px;height:14px;bottom:0;right:0}.avatar-status-2xl{width:16px;height:16px;bottom:0;right:0}";
+
+const BhAvatar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhMouseEnter = createEvent(this, "bhMouseEnter");
+        this.bhMouseLeave = createEvent(this, "bhMouseLeave");
+    }
+    /**
+     * The size of the avatar
+     */
+    size = 'md';
+    /**
+     * The type of avatar content
+     */
+    type = 'image';
+    /**
+     * The status indicator (online, offline, or none)
+     */
+    status = 'none';
+    /**
+     * Text to display for text-type avatars (initials)
+     */
+    text = 'RD';
+    /**
+     * Image source URL for image-type avatars
+     */
+    imageSrc;
+    /**
+     * Alt text for the avatar image
+     */
+    alt = 'Avatar';
+    /**
+     * Emitted when the avatar is hovered
+     */
+    bhMouseEnter;
+    /**
+     * Emitted when the mouse leaves the avatar
+     */
+    bhMouseLeave;
+    handleMouseEnter = () => {
+        this.bhMouseEnter.emit();
+    };
+    handleMouseLeave = () => {
+        this.bhMouseLeave.emit();
+    };
+    getTextSizeClass() {
+        const sizeMap = {
+            'xxs': 'text-xxs',
+            'xs': 'text-xs',
+            'sm': 'text-sm',
+            'md': 'text-md',
+            'lg': 'text-lg',
+            'xl': 'text-xl',
+            '2xl': 'text-2xl',
+        };
+        return sizeMap[this.size] || 'text-md';
+    }
+    getIconSizeClass() {
+        const sizeMap = {
+            'xxs': 'icon-sm',
+            'xs': 'icon-md',
+            'sm': 'icon-lg',
+            'md': 'icon-xl',
+            'lg': 'icon-2xl',
+            'xl': 'icon-3xl',
+            '2xl': 'icon-4xl',
+        };
+        return sizeMap[this.size] || 'icon-xl';
+    }
+    render() {
+        const avatarClasses = {
+            'avatar': true,
+            [`avatar-${this.size}`]: true,
+            'avatar-with-status': this.status !== 'none',
+        };
+        const statusClasses = {
+            'avatar-status': true,
+            [`avatar-status-${this.size}`]: true,
+            'avatar-status-online': this.status === 'online',
+            'avatar-status-offline': this.status === 'offline',
+        };
+        return (h("div", { key: '914106f6936e5c7ce0e174e0b909b1500b5c2ed4', class: avatarClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, part: "avatar" }, h("div", { key: 'b243bdaf78378f12268f9c016ff01278dd160f87', class: "avatar-border" }), h("div", { key: '6945f4a099f930d192f183a9fb7d2eeb3dc90eed', class: "avatar-content" }, this.type === 'image' && (h("img", { key: '97972f391c8f16e2ccdcabbc722bb93b292b8750', src: this.imageSrc, alt: this.alt, class: "avatar-image" })), this.type === 'placeholder' && (h("span", { key: 'acc758d9bb1bb39b4e767b502babb4abd9d8108e', class: `material-symbols-outlined avatar-placeholder-icon ${this.getIconSizeClass()}` }, "person")), this.type === 'text' && (h("span", { key: 'd7cd84351467868b6cb7506ba32a7e42da5090e2', class: `avatar-text ${this.getTextSizeClass()}` }, this.text))), this.status !== 'none' && (h("div", { key: 'f87333ba06a55bfa5345d1ad245453d2a756ad72', class: statusClasses }))));
+    }
+};
+BhAvatar.style = bhAvatarCss;
+
+export { BhAvatar as bh_avatar };
+//# sourceMappingURL=bh-avatar.entry.js.map

package/esm/bh-avatar.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-avatar.entry.js","sources":["src/components/bh-avatar/bh-avatar.css?tag=bh-avatar&encapsulation=shadow","src/components/bh-avatar/bh-avatar.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-AVATAR COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n/* Base Avatar */\n.avatar {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  background-color: var(--color-neutral-100);\n  flex-shrink: 0;\n}\n\n/* Avatar Sizes */\n.avatar-xxs {\n  width: 16px;\n  height: 16px;\n}\n\n.avatar-xs {\n  width: 24px;\n  height: 24px;\n}\n\n.avatar-sm {\n  width: 32px;\n  height: 32px;\n}\n\n.avatar-md {\n  width: 40px;\n  height: 40px;\n}\n\n.avatar-lg {\n  width: 48px;\n  height: 48px;\n}\n\n.avatar-xl {\n  width: 56px;\n  height: 56px;\n}\n\n.avatar-2xl {\n  width: 64px;\n  height: 64px;\n}\n\n/* ==========================================================================\n   AVATAR CONTENT ELEMENTS\n   ========================================================================== */\n\n/* Avatar Border */\n.avatar-border {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 50%;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.avatar-xs .avatar-border,\n.avatar-sm .avatar-border {\n  border: 0.5px solid var(--color-neutral-400);\n}\n\n.avatar-md .avatar-border,\n.avatar-lg .avatar-border,\n.avatar-xl .avatar-border,\n.avatar-2xl .avatar-border {\n  border: 0.75px solid var(--color-neutral-400);\n}\n\n/* Avatar Content Container */\n.avatar-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  overflow: hidden;\n  z-index: 0;\n}\n\n/* Avatar Image */\n.avatar-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n}\n\n/* Avatar Placeholder Icon */\n.avatar-placeholder-icon {\n  color: var(--color-neutral-500);\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Avatar Text (for text-type avatars) */\n.avatar-text {\n  color: var(--color-neutral-500);\n  font-family: var(--font-inter);\n  font-weight: var(--weight-semibold);\n  text-align: center;\n  line-height: 1;\n}\n\n/* Text Size Classes */\n.text-xxs {\n  font-size: 10px;\n  line-height: 1.6em;\n}\n\n.text-xs {\n  font-size: 12px;\n  line-height: 1.5em;\n}\n\n.text-sm {\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n}\n\n.text-md {\n  font-size: var(--text-md-size);\n  line-height: var(--text-md-line);\n}\n\n.text-lg {\n  font-size: 18px;\n  line-height: 1.56em;\n}\n\n.text-xl {\n  font-size: 20px;\n  line-height: 1.5em;\n}\n\n.text-2xl {\n  font-size: 24px;\n  line-height: 1.33em;\n}\n\n/* Icon Size Classes */\n.icon-sm {\n  font-size: 16px;\n}\n\n.icon-md {\n  font-size: 20px;\n}\n\n.icon-lg {\n  font-size: 24px;\n}\n\n.icon-xl {\n  font-size: 28px;\n}\n\n.icon-2xl {\n  font-size: 32px;\n}\n\n.icon-3xl {\n  font-size: 36px;\n}\n\n.icon-4xl {\n  font-size: 40px;\n}\n\n/* ==========================================================================\n   STATUS INDICATOR\n   ========================================================================== */\n\n.avatar-status {\n  position: absolute;\n  border-radius: 50%;\n  background-color: var(--color-success-500);\n  border: 1.5px solid var(--color-white);\n  z-index: 2;\n}\n\n.avatar-status-online {\n  background-color: var(--color-success-500);\n}\n\n.avatar-status-offline {\n  background-color: var(--color-neutral-400);\n}\n\n/* Status Indicator Sizes */\n.avatar-status-xxs {\n  width: 4px;\n  height: 4px;\n  bottom: 0;\n  right: 0;\n}\n\n.avatar-status-xs {\n  width: 6px;\n  height: 6px;\n  bottom: 0;\n  right: 0;\n}\n\n.avatar-status-sm {\n  width: 8px;\n  height: 8px;\n  bottom: 0;\n  right: 0;\n}\n\n.avatar-status-md {\n  width: 10px;\n  height: 10px;\n  bottom: 0;\n  right: 0;\n}\n\n.avatar-status-lg {\n  width: 12px;\n  height: 12px;\n  bottom: 0;\n  right: 0;\n}\n\n.avatar-status-xl {\n  width: 14px;\n  height: 14px;\n  bottom: 0;\n  right: 0;\n}\n\n.avatar-status-2xl {\n  width: 16px;\n  height: 16px;\n  bottom: 0;\n  right: 0;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type AvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\nexport type AvatarType = 'image' | 'placeholder' | 'text';\nexport type AvatarStatus = 'online' | 'offline' | 'none';\n\n@Component({\n  tag: 'bh-avatar',\n  styleUrl: 'bh-avatar.css',\n  shadow: true,\n})\nexport class BhAvatar {\n  /**\n   * The size of the avatar\n   */\n  @Prop() size: AvatarSize = 'md';\n\n  /**\n   * The type of avatar content\n   */\n  @Prop() type: AvatarType = 'image';\n\n  /**\n   * The status indicator (online, offline, or none)\n   */\n  @Prop() status: AvatarStatus = 'none';\n\n  /**\n   * Text to display for text-type avatars (initials)\n   */\n  @Prop() text: string = 'RD';\n\n  /**\n   * Image source URL for image-type avatars\n   */\n  @Prop() imageSrc?: string;\n\n  /**\n   * Alt text for the avatar image\n   */\n  @Prop() alt: string = 'Avatar';\n\n  /**\n   * Emitted when the avatar is hovered\n   */\n  @Event() bhMouseEnter!: EventEmitter<void>;\n\n  /**\n   * Emitted when the mouse leaves the avatar\n   */\n  @Event() bhMouseLeave!: EventEmitter<void>;\n\n  private handleMouseEnter = (): void => {\n    this.bhMouseEnter.emit();\n  };\n\n  private handleMouseLeave = (): void => {\n    this.bhMouseLeave.emit();\n  };\n\n  private getTextSizeClass(): string {\n    const sizeMap: Record<AvatarSize, string> = {\n      'xxs': 'text-xxs',\n      'xs': 'text-xs',\n      'sm': 'text-sm',\n      'md': 'text-md',\n      'lg': 'text-lg',\n      'xl': 'text-xl',\n      '2xl': 'text-2xl',\n    };\n    return sizeMap[this.size] || 'text-md';\n  }\n\n  private getIconSizeClass(): string {\n    const sizeMap: Record<AvatarSize, string> = {\n      'xxs': 'icon-sm',\n      'xs': 'icon-md',\n      'sm': 'icon-lg',\n      'md': 'icon-xl',\n      'lg': 'icon-2xl',\n      'xl': 'icon-3xl',\n      '2xl': 'icon-4xl',\n    };\n    return sizeMap[this.size] || 'icon-xl';\n  }\n\n  render() {\n    const avatarClasses = {\n      'avatar': true,\n      [`avatar-${this.size}`]: true,\n      'avatar-with-status': this.status !== 'none',\n    };\n\n    const statusClasses = {\n      'avatar-status': true,\n      [`avatar-status-${this.size}`]: true,\n      'avatar-status-online': this.status === 'online',\n      'avatar-status-offline': this.status === 'offline',\n    };\n\n    return (\n      <div\n        class={avatarClasses}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        part=\"avatar\"\n      >\n        <div class=\"avatar-border\"></div>\n\n        <div class=\"avatar-content\">\n          {this.type === 'image' && (\n            <img\n              src={this.imageSrc}\n              alt={this.alt}\n              class=\"avatar-image\"\n            />\n          )}\n\n          {this.type === 'placeholder' && (\n            <span class={`material-symbols-outlined avatar-placeholder-icon ${this.getIconSizeClass()}`}>\n              person\n            </span>\n          )}\n\n          {this.type === 'text' && (\n            <span class={`avatar-text ${this.getTextSizeClass()}`}>\n              {this.text}\n            </span>\n          )}\n        </div>\n\n        {this.status !== 'none' && (\n          <div class={statusClasses}></div>\n        )}\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,o8EAAo8E;;MCW38E,QAAQ,GAAA,MAAA;;;;;;AACnB;;AAEG;IACK,IAAI,GAAe,IAAI;AAE/B;;AAEG;IACK,IAAI,GAAe,OAAO;AAElC;;AAEG;IACK,MAAM,GAAiB,MAAM;AAErC;;AAEG;IACK,IAAI,GAAW,IAAI;AAE3B;;AAEG;AACK,IAAA,QAAQ;AAEhB;;AAEG;IACK,GAAG,GAAW,QAAQ;AAE9B;;AAEG;AACM,IAAA,YAAY;AAErB;;AAEG;AACM,IAAA,YAAY;IAEb,gBAAgB,GAAG,MAAW;AACpC,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC1B,KAAC;IAEO,gBAAgB,GAAG,MAAW;AACpC,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC1B,KAAC;IAEO,gBAAgB,GAAA;AACtB,QAAA,MAAM,OAAO,GAA+B;AAC1C,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,KAAK,EAAE,UAAU;SAClB;QACD,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,SAAS;;IAGhC,gBAAgB,GAAA;AACtB,QAAA,MAAM,OAAO,GAA+B;AAC1C,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,IAAI,EAAE,UAAU;AAChB,YAAA,IAAI,EAAE,UAAU;AAChB,YAAA,KAAK,EAAE,UAAU;SAClB;QACD,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,SAAS;;IAGxC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,CAAC,UAAU,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC7B,YAAA,oBAAoB,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;SAC7C;AAED,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AACpC,YAAA,sBAAsB,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ;AAChD,YAAA,uBAAuB,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;SACnD;AAED,QAAA,QACE,4DACE,KAAK,EAAE,aAAa,EACpB,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,IAAI,EAAC,QAAQ,EAAA,EAEb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAO,CAAA,EAEjC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACxB,IAAI,CAAC,IAAI,KAAK,OAAO,KACpB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAC,cAAc,EAAA,CACpB,CACH,EAEA,IAAI,CAAC,IAAI,KAAK,aAAa,KAC1B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,kDAAA,EAAqD,IAAI,CAAC,gBAAgB,EAAE,CAAA,CAAE,aAEpF,CACR,EAEA,IAAI,CAAC,IAAI,KAAK,MAAM,KACnB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAe,YAAA,EAAA,IAAI,CAAC,gBAAgB,EAAE,EAAE,EAAA,EAClD,IAAI,CAAC,IAAI,CACL,CACR,CACG,EAEL,IAAI,CAAC,MAAM,KAAK,MAAM,KACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,aAAa,EAAA,CAAQ,CAClC,CACG;;;;;;;"}

package/esm/bh-badge-dot.bh-breadcrumbs.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-badge-dot.bh-breadcrumbs.entry.js","sources":["src/components/bh-badge-dot/bh-badge-dot.css?tag=bh-badge-dot&encapsulation=shadow","src/components/bh-badge-dot/bh-badge-dot.tsx","src/components/bh-breadcrumbs/bh-breadcrumbs.css?tag=bh-breadcrumbs&encapsulation=shadow","src/components/bh-breadcrumbs/bh-breadcrumbs.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n/* Base Badge Dot */\n.badge-dot {\n  border-radius: 9999px;\n  position: relative;\n  display: inline-block;\n  box-sizing: border-box;\n}\n\n/* Sizes */\n.badge-dot-sm {\n  width: 6px;\n  height: 6px;\n}\n\n.badge-dot-md {\n  width: 8px;\n  height: 8px;\n}\n\n.badge-dot-lg {\n  width: 10px;\n  height: 10px;\n}\n\n/* Colors */\n.badge-dot-success {\n  background-color: var(--color-success-500, #17B26A);\n}\n\n.badge-dot-blue {\n  background-color: var(--color-blue-500, #5068DD);\n}\n\n.badge-dot-error {\n  background-color: var(--color-error-500, #F05250);\n}\n\n.badge-dot-warning {\n  background-color: var(--color-warning-500, #F79009);\n}\n\n/* Outline versions */\n.badge-dot-outline.badge-dot-sm {\n  outline: 3px solid;\n  outline-offset: 0;\n}\n\n.badge-dot-outline.badge-dot-md {\n  outline: 4px solid;\n  outline-offset: 0;\n}\n\n.badge-dot-outline.badge-dot-lg {\n  outline: 5px solid;\n  outline-offset: 0;\n}\n\n/* Outline colors */\n.badge-dot-outline.badge-dot-success {\n  outline-color: var(--color-success-100, #D1FADF);\n}\n\n.badge-dot-outline.badge-dot-blue {\n  outline-color: var(--color-blue-200, #E1EAFE);\n}\n\n.badge-dot-outline.badge-dot-error {\n  outline-color: var(--color-error-200, #FEE4E2);\n}\n\n.badge-dot-outline.badge-dot-warning {\n  outline-color: var(--color-warning-200, #FEF0C7);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type BadgeDotSize = 'sm' | 'md' | 'lg';\nexport type BadgeDotColor = 'success' | 'blue' | 'error' | 'warning';\n\n@Component({\n  tag: 'bh-badge-dot',\n  styleUrl: 'bh-badge-dot.css',\n  shadow: true,\n})\nexport class BhBadgeDot {\n  /**\n   * The size of the badge dot\n   */\n  @Prop() size: BadgeDotSize = 'md';\n\n  /**\n   * The color of the badge dot\n   */\n  @Prop() color: BadgeDotColor = 'error';\n\n  /**\n   * Whether to show an outline ring around the dot\n   */\n  @Prop() outline: boolean = false;\n\n  render() {\n    const dotClasses = {\n      'badge-dot': true,\n      [`badge-dot-${this.size}`]: true,\n      [`badge-dot-${this.color}`]: true,\n      'badge-dot-outline': this.outline,\n    };\n\n    return <div class={dotClasses} part=\"dot\"></div>;\n  }\n}\n",":host {\n  display: block;\n}\n\n/* Breadcrumbs Navigation - Matching Figma Design */\n.breadcrumbs {\n  font-family: var(--font-inter);\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n}\n\n.breadcrumbs-container {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xs);\n  flex-wrap: wrap;\n}\n\n.breadcrumb-item {\n  display: flex;\n  align-items: center;\n}\n\n/* Breadcrumb Buttons - Matching Figma Design */\n.breadcrumb-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-xs) var(--spacing-sm);\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  color: var(--color-neutral-600);\n  text-decoration: none;\n  font-family: var(--font-inter);\n  font-size: var(--text-sm-size);\n  font-weight: 500;\n  line-height: 1.4285714285714286em;\n  min-height: 24px;\n  box-sizing: border-box;\n}\n\n.breadcrumb-button:hover {\n  background-color: var(--color-neutral-50);\n  color: var(--color-neutral-900);\n}\n\n.breadcrumb-button:focus-visible {\n  outline: 2px solid var(--color-brand-500);\n  outline-offset: 2px;\n}\n\n/* Home button styling */\n.breadcrumb-home {\n  padding: var(--spacing-xs);\n  min-width: 24px;\n  min-height: 24px;\n}\n\n/* Current/Active breadcrumb item - Matching Figma highlighted state */\n.breadcrumb-current {\n  background-color: var(--color-neutral-50);\n  color: var(--color-neutral-800);\n  font-weight: 500;\n  cursor: default;\n}\n\n.breadcrumb-current:hover {\n  background-color: var(--color-neutral-50);\n  color: var(--color-neutral-800);\n}\n\n/* Ellipsis button */\n.breadcrumb-ellipsis {\n  color: var(--color-neutral-600);\n  font-weight: 500;\n}\n\n.breadcrumb-ellipsis:hover {\n  background-color: var(--color-neutral-50);\n  color: var(--color-neutral-900);\n}\n\n/* Breadcrumb text */\n.breadcrumb-text {\n  white-space: nowrap;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Breadcrumb icons */\n.breadcrumb-icon {\n  flex-shrink: 0;\n  font-size: 20px;\n  width: 20px;\n  height: 20px;\n  color: var(--color-neutral-600);\n}\n\n.breadcrumb-home .breadcrumb-icon {\n  font-size: 20px;\n  width: 20px;\n  height: 20px;\n}\n\n/* Separators - Matching Figma chevron color */\n.breadcrumb-separator {\n  display: flex;\n  align-items: center;\n  color: var(--color-neutral-300);\n  font-size: 20px;\n  flex-shrink: 0;\n}\n\n.breadcrumb-separator .material-symbols-outlined {\n  font-size: 20px;\n  width: 20px;\n  height: 20px;\n}\n\n/* Material Symbols Support */\n.material-symbols-outlined {\n  font-family: 'Material Symbols Outlined';\n  font-weight: normal;\n  font-style: normal;\n  font-size: 24px;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  -webkit-font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n}\n\n/* Responsive behavior */\n@media (max-width: 640px) {\n  .breadcrumb-text {\n    max-width: 120px;\n  }\n\n  .breadcrumbs-container {\n    gap: var(--spacing-xxs);\n  }\n\n  .breadcrumb-button {\n    padding: var(--spacing-xxs) var(--spacing-xs);\n    font-size: 12px;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, h, Fragment } from '@stencil/core';\n\nexport interface BreadcrumbItem {\n  label: string;\n  path?: string;\n  isActive?: boolean;\n}\n\n@Component({\n  tag: 'bh-breadcrumbs',\n  styleUrl: 'bh-breadcrumbs.css',\n  shadow: true,\n})\nexport class BhBreadcrumbs {\n  /**\n   * Array of breadcrumb items\n   */\n  @Prop() items: BreadcrumbItem[] | string = [];\n\n  /**\n   * Separator icon name (Material Symbols)\n   */\n  @Prop() separator: string = 'chevron_right';\n\n  /**\n   * Whether to show the home button\n   */\n  @Prop() showHome: boolean = true;\n\n  /**\n   * Maximum number of visible items before collapsing\n   */\n  @Prop() maxVisibleItems: number = 4;\n\n  /**\n   * Event emitted when a breadcrumb item is clicked\n   */\n  @Event() bhItemClick!: EventEmitter<BreadcrumbItem>;\n\n  /**\n   * Event emitted when navigating to a path\n   */\n  @Event() bhNavigate!: EventEmitter<string>;\n\n  private get parsedItems(): BreadcrumbItem[] {\n    if (typeof this.items === 'string') {\n      try {\n        return JSON.parse(this.items);\n      } catch {\n        return [];\n      }\n    }\n    return this.items || [];\n  }\n\n  private get displayData() {\n    const items = this.parsedItems;\n    if (!items || items.length <= this.maxVisibleItems) {\n      return {\n        displayItems: items ? [...items] : [],\n        showEllipsis: false,\n        collapsedItems: [],\n      };\n    } else {\n      const lastItems = items.slice(-(this.maxVisibleItems - 2));\n      return {\n        displayItems: [items[0], ...lastItems],\n        showEllipsis: true,\n        collapsedItems: items.slice(1, -(this.maxVisibleItems - 2)),\n      };\n    }\n  }\n\n  private handleItemClick(item: BreadcrumbItem) {\n    if (!item.isActive && item.path) {\n      this.bhItemClick.emit(item);\n      this.bhNavigate.emit(item.path);\n    }\n  }\n\n  private handleHomeClick = () => {\n    const homeItem: BreadcrumbItem = {\n      label: 'Home',\n      path: '/',\n    };\n    this.bhItemClick.emit(homeItem);\n    this.bhNavigate.emit('/');\n  };\n\n  private handleEllipsisClick = () => {\n    const { collapsedItems } = this.displayData;\n    if (collapsedItems.length > 0) {\n      this.handleItemClick(collapsedItems[0]);\n    }\n  };\n\n  private renderBreadcrumbItem(item: BreadcrumbItem, index: number) {\n    if (item.isActive || !item.path) {\n      return (\n        <div\n          key={index}\n          class=\"breadcrumb-button breadcrumb-current\"\n          aria-current=\"page\"\n        >\n          <span class=\"breadcrumb-text\">{item.label}</span>\n        </div>\n      );\n    }\n\n    return (\n      <button\n        key={index}\n        type=\"button\"\n        class=\"breadcrumb-button\"\n        onClick={() => this.handleItemClick(item)}\n      >\n        <span class=\"breadcrumb-text\">{item.label}</span>\n      </button>\n    );\n  }\n\n  private renderSeparator() {\n    return (\n      <div class=\"breadcrumb-separator\">\n        <span class=\"material-symbols-outlined\">{this.separator}</span>\n      </div>\n    );\n  }\n\n  render() {\n    const { displayItems, showEllipsis, collapsedItems } = this.displayData;\n\n    return (\n      <nav class=\"breadcrumbs\" aria-label=\"Breadcrumb\">\n        <div class=\"breadcrumbs-container\">\n          {/* Home button */}\n          {this.showHome && (\n            <div class=\"breadcrumb-item\">\n              <bh-button-icon\n                hierarchy=\"quaternary\"\n                size=\"xs\"\n                iconName=\"cottage\"\n                onClick={this.handleHomeClick}\n                aria-label=\"Home\"\n              />\n            </div>\n          )}\n\n          {/* Separator after home */}\n          {this.showHome && (displayItems.length > 0 || showEllipsis) && this.renderSeparator()}\n\n          {/* With ellipsis */}\n          {showEllipsis && displayItems.length > 0 && (\n            <Fragment>\n              <div class=\"breadcrumb-item\">\n                {this.renderBreadcrumbItem(displayItems[0], 0)}\n              </div>\n\n              {this.renderSeparator()}\n\n              {/* Ellipsis button */}\n              <div class=\"breadcrumb-item\">\n                <button\n                  type=\"button\"\n                  class=\"breadcrumb-button breadcrumb-ellipsis\"\n                  onClick={this.handleEllipsisClick}\n                  title={`Show ${collapsedItems.length} hidden items`}\n                >\n                  <span class=\"breadcrumb-text\">...</span>\n                </button>\n              </div>\n\n              {this.renderSeparator()}\n\n              {/* Remaining items */}\n              {displayItems.slice(1).map((item, index) => (\n                <Fragment>\n                  <div class=\"breadcrumb-item\" key={`item-${index + 1}`}>\n                    {this.renderBreadcrumbItem(item, index + 1)}\n                  </div>\n\n                  {index < displayItems.slice(1).length - 1 && this.renderSeparator()}\n                </Fragment>\n              ))}\n            </Fragment>\n          )}\n\n          {/* Without ellipsis */}\n          {!showEllipsis && displayItems.map((item, index) => (\n            <Fragment>\n              <div class=\"breadcrumb-item\" key={`item-${index}`}>\n                {this.renderBreadcrumbItem(item, index)}\n              </div>\n\n              {index < displayItems.length - 1 && this.renderSeparator()}\n            </Fragment>\n          ))}\n        </div>\n      </nav>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/esm/bh-badge-dot_2.entry.js

@@ -0,0 +1,131 @@
+import { r as registerInstance, h, c as createEvent, F as Fragment } from './index-DtVghh5W.js';
+
+const bhBadgeDotCss = ":host{display:inline-block}.badge-dot{border-radius:9999px;position:relative;display:inline-block;box-sizing:border-box}.badge-dot-sm{width:6px;height:6px}.badge-dot-md{width:8px;height:8px}.badge-dot-lg{width:10px;height:10px}.badge-dot-success{background-color:var(--color-success-500, #17B26A)}.badge-dot-blue{background-color:var(--color-blue-500, #5068DD)}.badge-dot-error{background-color:var(--color-error-500, #F05250)}.badge-dot-warning{background-color:var(--color-warning-500, #F79009)}.badge-dot-outline.badge-dot-sm{outline:3px solid;outline-offset:0}.badge-dot-outline.badge-dot-md{outline:4px solid;outline-offset:0}.badge-dot-outline.badge-dot-lg{outline:5px solid;outline-offset:0}.badge-dot-outline.badge-dot-success{outline-color:var(--color-success-100, #D1FADF)}.badge-dot-outline.badge-dot-blue{outline-color:var(--color-blue-200, #E1EAFE)}.badge-dot-outline.badge-dot-error{outline-color:var(--color-error-200, #FEE4E2)}.badge-dot-outline.badge-dot-warning{outline-color:var(--color-warning-200, #FEF0C7)}";
+
+const BhBadgeDot = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * The size of the badge dot
+     */
+    size = 'md';
+    /**
+     * The color of the badge dot
+     */
+    color = 'error';
+    /**
+     * Whether to show an outline ring around the dot
+     */
+    outline = false;
+    render() {
+        const dotClasses = {
+            'badge-dot': true,
+            [`badge-dot-${this.size}`]: true,
+            [`badge-dot-${this.color}`]: true,
+            'badge-dot-outline': this.outline,
+        };
+        return h("div", { key: 'c5ce0849442e1b1551185936a328987877a888f5', class: dotClasses, part: "dot" });
+    }
+};
+BhBadgeDot.style = bhBadgeDotCss;
+
+const bhBreadcrumbsCss = ":host{display:block}.breadcrumbs{font-family:var(--font-inter);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.breadcrumbs-container{display:flex;align-items:center;gap:var(--spacing-xs);flex-wrap:wrap}.breadcrumb-item{display:flex;align-items:center}.breadcrumb-button{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xs) var(--spacing-sm);border:none;background:transparent;border-radius:6px;cursor:pointer;transition:all 0.15s ease;color:var(--color-neutral-600);text-decoration:none;font-family:var(--font-inter);font-size:var(--text-sm-size);font-weight:500;line-height:1.4285714285714286em;min-height:24px;box-sizing:border-box}.breadcrumb-button:hover{background-color:var(--color-neutral-50);color:var(--color-neutral-900)}.breadcrumb-button:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:2px}.breadcrumb-home{padding:var(--spacing-xs);min-width:24px;min-height:24px}.breadcrumb-current{background-color:var(--color-neutral-50);color:var(--color-neutral-800);font-weight:500;cursor:default}.breadcrumb-current:hover{background-color:var(--color-neutral-50);color:var(--color-neutral-800)}.breadcrumb-ellipsis{color:var(--color-neutral-600);font-weight:500}.breadcrumb-ellipsis:hover{background-color:var(--color-neutral-50);color:var(--color-neutral-900)}.breadcrumb-text{white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}.breadcrumb-icon{flex-shrink:0;font-size:20px;width:20px;height:20px;color:var(--color-neutral-600)}.breadcrumb-home .breadcrumb-icon{font-size:20px;width:20px;height:20px}.breadcrumb-separator{display:flex;align-items:center;color:var(--color-neutral-300);font-size:20px;flex-shrink:0}.breadcrumb-separator .material-symbols-outlined{font-size:20px;width:20px;height:20px}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}@media (max-width: 640px){.breadcrumb-text{max-width:120px}.breadcrumbs-container{gap:var(--spacing-xxs)}.breadcrumb-button{padding:var(--spacing-xxs) var(--spacing-xs);font-size:12px}}";
+
+const BhBreadcrumbs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhItemClick = createEvent(this, "bhItemClick");
+        this.bhNavigate = createEvent(this, "bhNavigate");
+    }
+    /**
+     * Array of breadcrumb items
+     */
+    items = [];
+    /**
+     * Separator icon name (Material Symbols)
+     */
+    separator = 'chevron_right';
+    /**
+     * Whether to show the home button
+     */
+    showHome = true;
+    /**
+     * Maximum number of visible items before collapsing
+     */
+    maxVisibleItems = 4;
+    /**
+     * Event emitted when a breadcrumb item is clicked
+     */
+    bhItemClick;
+    /**
+     * Event emitted when navigating to a path
+     */
+    bhNavigate;
+    get parsedItems() {
+        if (typeof this.items === 'string') {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.items || [];
+    }
+    get displayData() {
+        const items = this.parsedItems;
+        if (!items || items.length <= this.maxVisibleItems) {
+            return {
+                displayItems: items ? [...items] : [],
+                showEllipsis: false,
+                collapsedItems: [],
+            };
+        }
+        else {
+            const lastItems = items.slice(-(this.maxVisibleItems - 2));
+            return {
+                displayItems: [items[0], ...lastItems],
+                showEllipsis: true,
+                collapsedItems: items.slice(1, -(this.maxVisibleItems - 2)),
+            };
+        }
+    }
+    handleItemClick(item) {
+        if (!item.isActive && item.path) {
+            this.bhItemClick.emit(item);
+            this.bhNavigate.emit(item.path);
+        }
+    }
+    handleHomeClick = () => {
+        const homeItem = {
+            label: 'Home',
+            path: '/',
+        };
+        this.bhItemClick.emit(homeItem);
+        this.bhNavigate.emit('/');
+    };
+    handleEllipsisClick = () => {
+        const { collapsedItems } = this.displayData;
+        if (collapsedItems.length > 0) {
+            this.handleItemClick(collapsedItems[0]);
+        }
+    };
+    renderBreadcrumbItem(item, index) {
+        if (item.isActive || !item.path) {
+            return (h("div", { key: index, class: "breadcrumb-button breadcrumb-current", "aria-current": "page" }, h("span", { class: "breadcrumb-text" }, item.label)));
+        }
+        return (h("button", { key: index, type: "button", class: "breadcrumb-button", onClick: () => this.handleItemClick(item) }, h("span", { class: "breadcrumb-text" }, item.label)));
+    }
+    renderSeparator() {
+        return (h("div", { class: "breadcrumb-separator" }, h("span", { class: "material-symbols-outlined" }, this.separator)));
+    }
+    render() {
+        const { displayItems, showEllipsis, collapsedItems } = this.displayData;
+        return (h("nav", { key: 'f8fa78dc80f7e0a6d7c2161396348a892f4c9d0b', class: "breadcrumbs", "aria-label": "Breadcrumb" }, h("div", { key: 'b7a5ae9c8206992802c6be37687c41033d452d7b', class: "breadcrumbs-container" }, this.showHome && (h("div", { key: '0e5312f7c42a90f2f979be515a856d60d2ffd733', class: "breadcrumb-item" }, h("bh-button-icon", { key: 'b95e5c59a7a5800c670c0c2b05ffc482d25f084c', hierarchy: "quaternary", size: "xs", iconName: "cottage", onClick: this.handleHomeClick, "aria-label": "Home" }))), this.showHome && (displayItems.length > 0 || showEllipsis) && this.renderSeparator(), showEllipsis && displayItems.length > 0 && (h(Fragment, { key: '510adc7a0db807a4232c2d23bbdbf55de28cc0b0' }, h("div", { key: 'dafefca139a16b4ae71c6577f8885d055e7643dc', class: "breadcrumb-item" }, this.renderBreadcrumbItem(displayItems[0], 0)), this.renderSeparator(), h("div", { key: '0ea0b6c5093c551e9f927b08e3caddd2c85d64d7', class: "breadcrumb-item" }, h("button", { key: 'b14a815428f58d34a753e8b1ae841a6c7a815b15', type: "button", class: "breadcrumb-button breadcrumb-ellipsis", onClick: this.handleEllipsisClick, title: `Show ${collapsedItems.length} hidden items` }, h("span", { key: 'f22204e923c5bb60be5b578861be47c0bb8aacf0', class: "breadcrumb-text" }, "..."))), this.renderSeparator(), displayItems.slice(1).map((item, index) => (h(Fragment, null, h("div", { class: "breadcrumb-item", key: `item-${index + 1}` }, this.renderBreadcrumbItem(item, index + 1)), index < displayItems.slice(1).length - 1 && this.renderSeparator()))))), !showEllipsis && displayItems.map((item, index) => (h(Fragment, null, h("div", { class: "breadcrumb-item", key: `item-${index}` }, this.renderBreadcrumbItem(item, index)), index < displayItems.length - 1 && this.renderSeparator()))))));
+    }
+};
+BhBreadcrumbs.style = bhBreadcrumbsCss;
+
+export { BhBadgeDot as bh_badge_dot, BhBreadcrumbs as bh_breadcrumbs };
+//# sourceMappingURL=bh-badge-dot.bh-breadcrumbs.entry.js.map

package/esm/bh-badge.entry.js

@@ -0,0 +1,69 @@
+import { r as registerInstance, c as createEvent, h } from './index-DtVghh5W.js';
+
+const bhBadgeCss = ":host{display:inline-block}.badge{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);font-family:var(--font-inter);font-weight:var(--weight-medium);border-radius:var(--radius-full);white-space:nowrap;text-align:center;transition:all 0.2s ease;border:1px solid transparent;user-select:none;cursor:default}.badge-sm{padding:var(--spacing-xxs) var(--spacing-md);font-size:var(--text-sm-size);line-height:var(--text-xs-line)}.badge-md{padding:var(--spacing-xs) var(--spacing-lg);font-size:var(--text-sm-size);line-height:var(--text-sm-line)}.badge-lg{padding:var(--spacing-sm) var(--spacing-xl);font-size:var(--text-md-size);line-height:var(--text-md-line)}.badge-icon-dot{font-size:8px !important;width:8px;height:8px;line-height:1;flex-shrink:0;font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 16}.badge-sm .badge-icon-dot{font-size:6px !important;width:6px;height:6px}.badge-lg .badge-icon-dot{font-size:10px !important;width:10px;height:10px}.badge-icon-custom{font-size:16px !important;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16}.badge-sm .badge-icon-custom{font-size:12px !important}.badge-lg .badge-icon-custom{font-size:20px !important}.badge-label{flex-shrink:0;font-weight:inherit}.badge-dismiss{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;margin-left:var(--spacing-xxs);border-radius:var(--radius-full);transition:all 0.2s ease;width:16px;height:16px}.badge-dismiss-icon{font-size:14px !important;width:14px;height:14px;line-height:1;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14}.badge-sm .badge-dismiss{width:14px;height:14px}.badge-sm .badge-dismiss-icon{font-size:12px !important;width:12px;height:12px}.badge-lg .badge-dismiss{width:18px;height:18px}.badge-lg .badge-dismiss-icon{font-size:16px !important;width:16px;height:16px}.badge-dismiss:hover{background-color:rgba(255, 255, 255, 0.2)}.badge-dismiss:disabled{cursor:not-allowed;opacity:0.5}.badge-high.badge-gray{background-color:var(--color-neutral-200);color:var(--color-neutral-800)}.badge-high.badge-blue{background-color:var(--color-brand-200);color:var(--color-brand-800)}.badge-high.badge-red{background-color:var(--color-error-200);color:var(--color-error-800)}.badge-high.badge-yellow{background-color:var(--color-warning-200);color:var(--color-warning-800)}.badge-high.badge-green{background-color:var(--color-success-200);color:var(--color-success-800)}.badge-high.badge-purple{background-color:hsl(270, 70%, 85%);color:hsl(270, 70%, 35%)}.badge-high.badge-pink{background-color:hsl(330, 70%, 85%);color:hsl(330, 70%, 35%)}.badge-high.badge-orange{background-color:hsl(25, 90%, 85%);color:hsl(25, 90%, 35%)}.badge-high .badge-icon-gray-high,.badge-high .badge-dismiss-icon.badge-icon-gray-high{color:var(--color-neutral-800) !important}.badge-high .badge-icon-blue-high,.badge-high .badge-dismiss-icon.badge-icon-blue-high{color:var(--color-brand-800) !important}.badge-high .badge-icon-red-high,.badge-high .badge-dismiss-icon.badge-icon-red-high{color:var(--color-error-800) !important}.badge-high .badge-icon-yellow-high,.badge-high .badge-dismiss-icon.badge-icon-yellow-high{color:var(--color-warning-800) !important}.badge-high .badge-icon-green-high,.badge-high .badge-dismiss-icon.badge-icon-green-high{color:var(--color-success-800) !important}.badge-high .badge-icon-purple-high,.badge-high .badge-dismiss-icon.badge-icon-purple-high{color:hsl(270, 70%, 35%) !important}.badge-high .badge-icon-pink-high,.badge-high .badge-dismiss-icon.badge-icon-pink-high{color:hsl(330, 70%, 35%) !important}.badge-high .badge-icon-orange-high,.badge-high .badge-dismiss-icon.badge-icon-orange-high{color:hsl(25, 90%, 35%) !important}.badge-medium.badge-gray{background-color:var(--color-neutral-50);color:var(--color-neutral-700);border-color:var(--color-neutral-200)}.badge-medium.badge-blue{background-color:var(--color-brand-50);color:var(--color-brand-700);border-color:var(--color-brand-200)}.badge-medium.badge-red{background-color:var(--color-error-50);color:var(--color-error-700);border-color:var(--color-error-200)}.badge-medium.badge-yellow{background-color:var(--color-warning-50);color:var(--color-warning-700);border-color:var(--color-warning-200)}.badge-medium.badge-green{background-color:var(--color-success-50);color:var(--color-success-700);border-color:var(--color-success-200)}.badge-medium.badge-purple{background-color:hsl(270, 70%, 97%);color:hsl(270, 70%, 40%);border-color:hsl(270, 70%, 85%)}.badge-medium.badge-pink{background-color:hsl(330, 70%, 97%);color:hsl(330, 70%, 40%);border-color:hsl(330, 70%, 85%)}.badge-medium.badge-orange{background-color:hsl(25, 90%, 97%);color:hsl(25, 90%, 40%);border-color:hsl(25, 90%, 85%)}.badge-medium .badge-icon-gray-medium,.badge-medium .badge-dismiss-icon.badge-icon-gray-medium{color:var(--color-neutral-700) !important}.badge-medium .badge-icon-blue-medium,.badge-medium .badge-dismiss-icon.badge-icon-blue-medium{color:var(--color-brand-700) !important}.badge-medium .badge-icon-red-medium,.badge-medium .badge-dismiss-icon.badge-icon-red-medium{color:var(--color-error-700) !important}.badge-medium .badge-icon-yellow-medium,.badge-medium .badge-dismiss-icon.badge-icon-yellow-medium{color:var(--color-warning-700) !important}.badge-medium .badge-icon-green-medium,.badge-medium .badge-dismiss-icon.badge-icon-green-medium{color:var(--color-success-700) !important}.badge-medium .badge-icon-purple-medium,.badge-medium .badge-dismiss-icon.badge-icon-purple-medium{color:hsl(270, 70%, 40%) !important}.badge-medium .badge-icon-pink-medium,.badge-medium .badge-dismiss-icon.badge-icon-pink-medium{color:hsl(330, 70%, 40%) !important}.badge-medium .badge-icon-orange-medium,.badge-medium .badge-dismiss-icon.badge-icon-orange-medium{color:hsl(25, 90%, 40%) !important}.badge-low.badge-gray{background-color:transparent;color:var(--color-neutral-600);border-color:var(--color-neutral-600)}.badge-low.badge-blue{background-color:transparent;color:var(--color-brand-600);border-color:var(--color-brand-600)}.badge-low.badge-red{background-color:transparent;color:var(--color-error-600);border-color:var(--color-error-600)}.badge-low.badge-yellow{background-color:transparent;color:var(--color-warning-600);border-color:var(--color-warning-600)}.badge-low.badge-green{background-color:transparent;color:var(--color-success-600);border-color:var(--color-success-600)}.badge-low.badge-purple{background-color:transparent;color:hsl(270, 70%, 45%);border-color:hsl(270, 70%, 45%)}.badge-low.badge-pink{background-color:transparent;color:hsl(330, 70%, 45%);border-color:hsl(330, 70%, 45%)}.badge-low.badge-orange{background-color:transparent;color:hsl(25, 90%, 45%);border-color:hsl(25, 90%, 45%)}.badge-low .badge-icon-gray-low,.badge-low .badge-dismiss-icon.badge-icon-gray-low{color:var(--color-neutral-600) !important}.badge-low .badge-icon-blue-low,.badge-low .badge-dismiss-icon.badge-icon-blue-low{color:var(--color-brand-600) !important}.badge-low .badge-icon-red-low,.badge-low .badge-dismiss-icon.badge-icon-red-low{color:var(--color-error-600) !important}.badge-low .badge-icon-yellow-low,.badge-low .badge-dismiss-icon.badge-icon-yellow-low{color:var(--color-warning-600) !important}.badge-low .badge-icon-green-low,.badge-low .badge-dismiss-icon.badge-icon-green-low{color:var(--color-success-600) !important}.badge-low .badge-icon-purple-low,.badge-low .badge-dismiss-icon.badge-icon-purple-low{color:hsl(270, 70%, 45%) !important}.badge-low .badge-icon-pink-low,.badge-low .badge-dismiss-icon.badge-icon-pink-low{color:hsl(330, 70%, 45%) !important}.badge-low .badge-icon-orange-low,.badge-low .badge-dismiss-icon.badge-icon-orange-low{color:hsl(25, 90%, 45%) !important}.badge-disabled{opacity:0.5;cursor:not-allowed}";
+
+const BhBadge = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhDismiss = createEvent(this, "bhDismiss");
+    }
+    /**
+     * The color variant of the badge
+     */
+    variant = 'gray';
+    /**
+     * The size of the badge
+     */
+    size = 'md';
+    /**
+     * The emphasis level (affects background/border styling)
+     */
+    emphasis = 'high';
+    /**
+     * The text label to display
+     */
+    label = 'Label';
+    /**
+     * Material Symbols icon name, or 'dot' for a dot indicator
+     */
+    icon;
+    /**
+     * Whether the badge can be dismissed
+     */
+    dismissible = false;
+    /**
+     * Whether the badge is disabled
+     */
+    disabled = false;
+    /**
+     * Emitted when the dismiss button is clicked
+     */
+    bhDismiss;
+    handleDismiss = (e) => {
+        e.stopPropagation();
+        if (this.dismissible && !this.disabled) {
+            this.bhDismiss.emit();
+        }
+    };
+    render() {
+        const badgeClasses = {
+            'badge': true,
+            [`badge-${this.variant}`]: true,
+            [`badge-${this.size}`]: true,
+            [`badge-${this.emphasis}`]: true,
+            'badge-disabled': this.disabled,
+        };
+        const iconColorClass = `badge-icon-${this.variant}-${this.emphasis}`;
+        const isDot = this.icon === 'dot';
+        return (h("span", { key: '240872b520f525ebf20a8d96fd00bd920ef5db39', class: badgeClasses, part: "badge" }, this.icon && (h("span", { key: '0da3d63155c7bed85f4ce51165a0e98e5070f55c', class: {
+                'material-symbols-outlined': true,
+                [iconColorClass]: true,
+                'badge-icon-dot': isDot,
+                'badge-icon-custom': !isDot,
+            } }, isDot ? 'fiber_manual_record' : this.icon)), h("span", { key: 'e4556215b4af0bf56dd5058697d2aac9ecb62d75', class: "badge-label" }, this.label), this.dismissible && (h("button", { key: 'bd455d4b8b2dca8cc7596ed2dddcbe69ff11b9cf', class: "badge-dismiss", onClick: this.handleDismiss, disabled: this.disabled, type: "button", "aria-label": "Dismiss", part: "dismiss-button" }, h("span", { key: 'b4f8e3be6334840ff909cd3c60ec1d7725f09a77', class: `material-symbols-outlined badge-dismiss-icon ${iconColorClass}` }, "close")))));
+    }
+};
+BhBadge.style = bhBadgeCss;
+
+export { BhBadge as bh_badge };
+//# sourceMappingURL=bh-badge.entry.js.map

package/esm/bh-badge.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-badge.entry.js","sources":["src/components/bh-badge/bh-badge.css?tag=bh-badge&encapsulation=shadow","src/components/bh-badge/bh-badge.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-BADGE COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n/* Base Badge Styles */\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-sm);\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  border-radius: var(--radius-full);\n  white-space: nowrap;\n  text-align: center;\n  transition: all 0.2s ease;\n  border: 1px solid transparent;\n  user-select: none;\n  cursor: default;\n}\n\n/* Size Variants */\n.badge-sm {\n  padding: var(--spacing-xxs) var(--spacing-md);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-xs-line);\n}\n\n.badge-md {\n  padding: var(--spacing-xs) var(--spacing-lg);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n}\n\n.badge-lg {\n  padding: var(--spacing-sm) var(--spacing-xl);\n  font-size: var(--text-md-size);\n  line-height: var(--text-md-line);\n}\n\n/* Badge Icon - Dot */\n.badge-icon-dot {\n  font-size: 8px !important;\n  width: 8px;\n  height: 8px;\n  line-height: 1;\n  flex-shrink: 0;\n  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 16;\n}\n\n.badge-sm .badge-icon-dot {\n  font-size: 6px !important;\n  width: 6px;\n  height: 6px;\n}\n\n.badge-lg .badge-icon-dot {\n  font-size: 10px !important;\n  width: 10px;\n  height: 10px;\n}\n\n/* Custom icon styling */\n.badge-icon-custom {\n  font-size: 16px !important;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;\n}\n\n.badge-sm .badge-icon-custom {\n  font-size: 12px !important;\n}\n\n.badge-lg .badge-icon-custom {\n  font-size: 20px !important;\n}\n\n/* Badge Label */\n.badge-label {\n  flex-shrink: 0;\n  font-weight: inherit;\n}\n\n/* Dismiss Button */\n.badge-dismiss {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  margin-left: var(--spacing-xxs);\n  border-radius: var(--radius-full);\n  transition: all 0.2s ease;\n  width: 16px;\n  height: 16px;\n}\n\n.badge-dismiss-icon {\n  font-size: 14px !important;\n  width: 14px;\n  height: 14px;\n  line-height: 1;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;\n}\n\n.badge-sm .badge-dismiss {\n  width: 14px;\n  height: 14px;\n}\n\n.badge-sm .badge-dismiss-icon {\n  font-size: 12px !important;\n  width: 12px;\n  height: 12px;\n}\n\n.badge-lg .badge-dismiss {\n  width: 18px;\n  height: 18px;\n}\n\n.badge-lg .badge-dismiss-icon {\n  font-size: 16px !important;\n  width: 16px;\n  height: 16px;\n}\n\n.badge-dismiss:hover {\n  background-color: rgba(255, 255, 255, 0.2);\n}\n\n.badge-dismiss:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* ==========================================================================\n   HIGH EMPHASIS VARIANTS\n   ========================================================================== */\n\n.badge-high.badge-gray {\n  background-color: var(--color-neutral-200);\n  color: var(--color-neutral-800);\n}\n\n.badge-high.badge-blue {\n  background-color: var(--color-brand-200);\n  color: var(--color-brand-800);\n}\n\n.badge-high.badge-red {\n  background-color: var(--color-error-200);\n  color: var(--color-error-800);\n}\n\n.badge-high.badge-yellow {\n  background-color: var(--color-warning-200);\n  color: var(--color-warning-800);\n}\n\n.badge-high.badge-green {\n  background-color: var(--color-success-200);\n  color: var(--color-success-800);\n}\n\n.badge-high.badge-purple {\n  background-color: hsl(270, 70%, 85%);\n  color: hsl(270, 70%, 35%);\n}\n\n.badge-high.badge-pink {\n  background-color: hsl(330, 70%, 85%);\n  color: hsl(330, 70%, 35%);\n}\n\n.badge-high.badge-orange {\n  background-color: hsl(25, 90%, 85%);\n  color: hsl(25, 90%, 35%);\n}\n\n/* Icon colors for high emphasis */\n.badge-high .badge-icon-gray-high,\n.badge-high .badge-dismiss-icon.badge-icon-gray-high { color: var(--color-neutral-800) !important; }\n.badge-high .badge-icon-blue-high,\n.badge-high .badge-dismiss-icon.badge-icon-blue-high { color: var(--color-brand-800) !important; }\n.badge-high .badge-icon-red-high,\n.badge-high .badge-dismiss-icon.badge-icon-red-high { color: var(--color-error-800) !important; }\n.badge-high .badge-icon-yellow-high,\n.badge-high .badge-dismiss-icon.badge-icon-yellow-high { color: var(--color-warning-800) !important; }\n.badge-high .badge-icon-green-high,\n.badge-high .badge-dismiss-icon.badge-icon-green-high { color: var(--color-success-800) !important; }\n.badge-high .badge-icon-purple-high,\n.badge-high .badge-dismiss-icon.badge-icon-purple-high { color: hsl(270, 70%, 35%) !important; }\n.badge-high .badge-icon-pink-high,\n.badge-high .badge-dismiss-icon.badge-icon-pink-high { color: hsl(330, 70%, 35%) !important; }\n.badge-high .badge-icon-orange-high,\n.badge-high .badge-dismiss-icon.badge-icon-orange-high { color: hsl(25, 90%, 35%) !important; }\n\n/* ==========================================================================\n   MEDIUM EMPHASIS VARIANTS\n   ========================================================================== */\n\n.badge-medium.badge-gray {\n  background-color: var(--color-neutral-50);\n  color: var(--color-neutral-700);\n  border-color: var(--color-neutral-200);\n}\n\n.badge-medium.badge-blue {\n  background-color: var(--color-brand-50);\n  color: var(--color-brand-700);\n  border-color: var(--color-brand-200);\n}\n\n.badge-medium.badge-red {\n  background-color: var(--color-error-50);\n  color: var(--color-error-700);\n  border-color: var(--color-error-200);\n}\n\n.badge-medium.badge-yellow {\n  background-color: var(--color-warning-50);\n  color: var(--color-warning-700);\n  border-color: var(--color-warning-200);\n}\n\n.badge-medium.badge-green {\n  background-color: var(--color-success-50);\n  color: var(--color-success-700);\n  border-color: var(--color-success-200);\n}\n\n.badge-medium.badge-purple {\n  background-color: hsl(270, 70%, 97%);\n  color: hsl(270, 70%, 40%);\n  border-color: hsl(270, 70%, 85%);\n}\n\n.badge-medium.badge-pink {\n  background-color: hsl(330, 70%, 97%);\n  color: hsl(330, 70%, 40%);\n  border-color: hsl(330, 70%, 85%);\n}\n\n.badge-medium.badge-orange {\n  background-color: hsl(25, 90%, 97%);\n  color: hsl(25, 90%, 40%);\n  border-color: hsl(25, 90%, 85%);\n}\n\n/* Icon colors for medium emphasis */\n.badge-medium .badge-icon-gray-medium,\n.badge-medium .badge-dismiss-icon.badge-icon-gray-medium { color: var(--color-neutral-700) !important; }\n.badge-medium .badge-icon-blue-medium,\n.badge-medium .badge-dismiss-icon.badge-icon-blue-medium { color: var(--color-brand-700) !important; }\n.badge-medium .badge-icon-red-medium,\n.badge-medium .badge-dismiss-icon.badge-icon-red-medium { color: var(--color-error-700) !important; }\n.badge-medium .badge-icon-yellow-medium,\n.badge-medium .badge-dismiss-icon.badge-icon-yellow-medium { color: var(--color-warning-700) !important; }\n.badge-medium .badge-icon-green-medium,\n.badge-medium .badge-dismiss-icon.badge-icon-green-medium { color: var(--color-success-700) !important; }\n.badge-medium .badge-icon-purple-medium,\n.badge-medium .badge-dismiss-icon.badge-icon-purple-medium { color: hsl(270, 70%, 40%) !important; }\n.badge-medium .badge-icon-pink-medium,\n.badge-medium .badge-dismiss-icon.badge-icon-pink-medium { color: hsl(330, 70%, 40%) !important; }\n.badge-medium .badge-icon-orange-medium,\n.badge-medium .badge-dismiss-icon.badge-icon-orange-medium { color: hsl(25, 90%, 40%) !important; }\n\n/* ==========================================================================\n   LOW EMPHASIS VARIANTS\n   ========================================================================== */\n\n.badge-low.badge-gray {\n  background-color: transparent;\n  color: var(--color-neutral-600);\n  border-color: var(--color-neutral-600);\n}\n\n.badge-low.badge-blue {\n  background-color: transparent;\n  color: var(--color-brand-600);\n  border-color: var(--color-brand-600);\n}\n\n.badge-low.badge-red {\n  background-color: transparent;\n  color: var(--color-error-600);\n  border-color: var(--color-error-600);\n}\n\n.badge-low.badge-yellow {\n  background-color: transparent;\n  color: var(--color-warning-600);\n  border-color: var(--color-warning-600);\n}\n\n.badge-low.badge-green {\n  background-color: transparent;\n  color: var(--color-success-600);\n  border-color: var(--color-success-600);\n}\n\n.badge-low.badge-purple {\n  background-color: transparent;\n  color: hsl(270, 70%, 45%);\n  border-color: hsl(270, 70%, 45%);\n}\n\n.badge-low.badge-pink {\n  background-color: transparent;\n  color: hsl(330, 70%, 45%);\n  border-color: hsl(330, 70%, 45%);\n}\n\n.badge-low.badge-orange {\n  background-color: transparent;\n  color: hsl(25, 90%, 45%);\n  border-color: hsl(25, 90%, 45%);\n}\n\n/* Icon colors for low emphasis */\n.badge-low .badge-icon-gray-low,\n.badge-low .badge-dismiss-icon.badge-icon-gray-low { color: var(--color-neutral-600) !important; }\n.badge-low .badge-icon-blue-low,\n.badge-low .badge-dismiss-icon.badge-icon-blue-low { color: var(--color-brand-600) !important; }\n.badge-low .badge-icon-red-low,\n.badge-low .badge-dismiss-icon.badge-icon-red-low { color: var(--color-error-600) !important; }\n.badge-low .badge-icon-yellow-low,\n.badge-low .badge-dismiss-icon.badge-icon-yellow-low { color: var(--color-warning-600) !important; }\n.badge-low .badge-icon-green-low,\n.badge-low .badge-dismiss-icon.badge-icon-green-low { color: var(--color-success-600) !important; }\n.badge-low .badge-icon-purple-low,\n.badge-low .badge-dismiss-icon.badge-icon-purple-low { color: hsl(270, 70%, 45%) !important; }\n.badge-low .badge-icon-pink-low,\n.badge-low .badge-dismiss-icon.badge-icon-pink-low { color: hsl(330, 70%, 45%) !important; }\n.badge-low .badge-icon-orange-low,\n.badge-low .badge-dismiss-icon.badge-icon-orange-low { color: hsl(25, 90%, 45%) !important; }\n\n/* Disabled State */\n.badge-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type BadgeVariant = 'gray' | 'blue' | 'red' | 'yellow' | 'green' | 'purple' | 'pink' | 'orange';\nexport type BadgeSize = 'sm' | 'md' | 'lg';\nexport type BadgeEmphasis = 'high' | 'medium' | 'low';\n\n@Component({\n  tag: 'bh-badge',\n  styleUrl: 'bh-badge.css',\n  shadow: true,\n})\nexport class BhBadge {\n  /**\n   * The color variant of the badge\n   */\n  @Prop() variant: BadgeVariant = 'gray';\n\n  /**\n   * The size of the badge\n   */\n  @Prop() size: BadgeSize = 'md';\n\n  /**\n   * The emphasis level (affects background/border styling)\n   */\n  @Prop() emphasis: BadgeEmphasis = 'high';\n\n  /**\n   * The text label to display\n   */\n  @Prop() label: string = 'Label';\n\n  /**\n   * Material Symbols icon name, or 'dot' for a dot indicator\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the badge can be dismissed\n   */\n  @Prop() dismissible: boolean = false;\n\n  /**\n   * Whether the badge is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Emitted when the dismiss button is clicked\n   */\n  @Event() bhDismiss!: EventEmitter<void>;\n\n  private handleDismiss = (e: MouseEvent): void => {\n    e.stopPropagation();\n    if (this.dismissible && !this.disabled) {\n      this.bhDismiss.emit();\n    }\n  };\n\n  render() {\n    const badgeClasses = {\n      'badge': true,\n      [`badge-${this.variant}`]: true,\n      [`badge-${this.size}`]: true,\n      [`badge-${this.emphasis}`]: true,\n      'badge-disabled': this.disabled,\n    };\n\n    const iconColorClass = `badge-icon-${this.variant}-${this.emphasis}`;\n    const isDot = this.icon === 'dot';\n\n    return (\n      <span class={badgeClasses} part=\"badge\">\n        {this.icon && (\n          <span\n            class={{\n              'material-symbols-outlined': true,\n              [iconColorClass]: true,\n              'badge-icon-dot': isDot,\n              'badge-icon-custom': !isDot,\n            }}\n          >\n            {isDot ? 'fiber_manual_record' : this.icon}\n          </span>\n        )}\n\n        <span class=\"badge-label\">{this.label}</span>\n\n        {this.dismissible && (\n          <button\n            class=\"badge-dismiss\"\n            onClick={this.handleDismiss}\n            disabled={this.disabled}\n            type=\"button\"\n            aria-label=\"Dismiss\"\n            part=\"dismiss-button\"\n          >\n            <span class={`material-symbols-outlined badge-dismiss-icon ${iconColorClass}`}>\n              close\n            </span>\n          </button>\n        )}\n      </span>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,ipPAAipP;;MCWvpP,OAAO,GAAA,MAAA;;;;;AAClB;;AAEG;IACK,OAAO,GAAiB,MAAM;AAEtC;;AAEG;IACK,IAAI,GAAc,IAAI;AAE9B;;AAEG;IACK,QAAQ,GAAkB,MAAM;AAExC;;AAEG;IACK,KAAK,GAAW,OAAO;AAE/B;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;IACK,WAAW,GAAY,KAAK;AAEpC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACM,IAAA,SAAS;AAEV,IAAA,aAAa,GAAG,CAAC,CAAa,KAAU;QAC9C,CAAC,CAAC,eAAe,EAAE;QACnB,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACtC,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;;AAEzB,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,CAAC,SAAS,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AAC/B,YAAA,CAAC,SAAS,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC5B,YAAA,CAAC,SAAS,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;YAChC,gBAAgB,EAAE,IAAI,CAAC,QAAQ;SAChC;QAED,MAAM,cAAc,GAAG,CAAA,WAAA,EAAc,IAAI,CAAC,OAAO,CAAA,CAAA,EAAI,IAAI,CAAC,QAAQ,CAAA,CAAE;AACpE,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,KAAK,KAAK;AAEjC,QAAA,QACE,6DAAM,KAAK,EAAE,YAAY,EAAE,IAAI,EAAC,OAAO,EAAA,EACpC,IAAI,CAAC,IAAI,KACR,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,2BAA2B,EAAE,IAAI;gBACjC,CAAC,cAAc,GAAG,IAAI;AACtB,gBAAA,gBAAgB,EAAE,KAAK;gBACvB,mBAAmB,EAAE,CAAC,KAAK;aAC5B,EAAA,EAEA,KAAK,GAAG,qBAAqB,GAAG,IAAI,CAAC,IAAI,CACrC,CACR,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAQ,EAE5C,IAAI,CAAC,WAAW,KACf,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EACF,YAAA,EAAA,SAAS,EACpB,IAAI,EAAC,gBAAgB,EAAA,EAErB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gDAAgD,cAAc,CAAA,CAAE,YAEtE,CACA,CACV,CACI;;;;;;;"}

package/esm/bh-bar-chart.entry.js

@@ -0,0 +1,162 @@
+import { r as registerInstance, h, H as Host } from './index-DtVghh5W.js';
+
+const bhBarChartCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:block}.vertical-container{display:flex;align-items:flex-end;height:180px;width:100%}.vertical-container.simple{height:180px;width:100%}.bar-column.vertical{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;flex:1;gap:var(--spacing-xxs, 2px);margin:0 2px;border-radius:4px;transition:background-color 0.2s ease}.vertical-container.simple .bar-column.vertical{flex:1;margin:0 2px}.bar-segment.vertical{width:6px;border-radius:2px;min-height:2px;transition:all 0.3s ease;transform-origin:bottom}.horizontal-container{display:flex;flex-direction:column;justify-content:space-between;height:auto;min-height:140px;gap:var(--spacing-lg, 12px)}.horizontal-container.simple{height:auto;min-height:140px;gap:var(--spacing-lg, 12px)}.bar-row.horizontal{display:flex;align-items:center;width:100%;height:6px;min-height:6px;max-height:6px;gap:var(--spacing-xxs, 2px);margin:2px 0;border-radius:4px;transition:background-color 0.2s ease;padding:2px}.horizontal-container.simple .bar-row.horizontal{height:6px;min-height:6px;max-height:6px;margin:2px 0;padding:2px}.bar-segment.horizontal{height:100%;min-height:6px;max-height:6px;border-radius:2px;min-width:2px;transition:all 0.3s ease;transform-origin:left}.horizontal-container.simple .bar-segment.horizontal{min-width:2px;height:6px;min-height:6px;max-height:6px}.bar-column,.bar-row{cursor:pointer}.bar-column:hover{background-color:color-mix(in srgb, var(--color-neutral-100) 50%, transparent)}.bar-row:hover{background-color:color-mix(in srgb, var(--color-neutral-100) 50%, transparent)}.bar-column:hover .bar-segment,.bar-row:hover .bar-segment{opacity:0.9;filter:brightness(1.05)}.bar-chart-animated .bar-segment.vertical{animation:barGrowVertical 0.8s cubic-bezier(0.4, 0, 0.2, 1) both}.bar-chart-animated .bar-segment.horizontal{animation:barGrowHorizontal 0.8s cubic-bezier(0.4, 0, 0.2, 1) both}@keyframes barGrowVertical{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}@keyframes barGrowHorizontal{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}@media (prefers-reduced-motion: reduce){.bar-chart-animated .bar-segment.vertical,.bar-chart-animated .bar-segment.horizontal{animation:none;opacity:1;transform:none}}";
+
+const DEFAULT_COLORS = [
+    'var(--color-brand-600)',
+    'var(--color-orange-500)',
+    'var(--color-success-500)',
+    'var(--color-purple-600)',
+    'var(--color-accent-500)',
+    'var(--color-teal-500)',
+    'var(--color-lime-500)',
+    'var(--color-amber-500)',
+];
+const BhBarChart = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Chart data
+     */
+    data = {
+        series: [
+            { name: 'Series 1', values: [30, 45, 20, 35, 50, 40, 60, 35, 25, 55, 40], color: '#94a3b8' },
+            { name: 'Series 2', values: [20, 25, 40, 30, 35, 45, 25, 30, 40, 20, 50], color: '#2563eb' },
+            { name: 'Series 3', values: [25, 15, 35, 20, 15, 20, 30, 25, 30, 35, 25], color: '#7c3aed' },
+        ],
+    };
+    /**
+     * Chart type: simple or stacked
+     */
+    type = 'stacked';
+    /**
+     * Chart orientation: vertical or horizontal
+     */
+    orientation = 'vertical';
+    /**
+     * Whether to animate the chart
+     */
+    animated = true;
+    /**
+     * Maximum height for vertical bars
+     */
+    maxHeight = 150;
+    /**
+     * Maximum width for horizontal bars
+     */
+    maxWidth = 200;
+    tooltipVisible = false;
+    tooltipX = 0;
+    tooltipY = 0;
+    tooltipHeader = '';
+    tooltipItems = [];
+    tooltipTotal = '';
+    showTooltipTotal = false;
+    processData() {
+        if (!this.data.series?.length || !this.data.series[0].values.length) {
+            return [];
+        }
+        const bars = [];
+        if (this.type === 'simple') {
+            const values = this.data.series[0].values;
+            const maxValue = Math.max(...values);
+            for (let i = 0; i < values.length; i++) {
+                const value = values[i] || 0;
+                const segments = [];
+                if (value > 0) {
+                    const height = (value / maxValue) * this.maxHeight;
+                    const width = (value / maxValue) * this.maxWidth;
+                    segments.push({
+                        value,
+                        height,
+                        width,
+                        color: DEFAULT_COLORS[i % DEFAULT_COLORS.length],
+                        seriesName: this.data.categories?.[i] || `Bar ${i + 1}`,
+                    });
+                }
+                bars.push({
+                    segments,
+                    totalValue: value,
+                    category: this.data.categories?.[i],
+                });
+            }
+        }
+        else {
+            const numBars = this.data.series[0].values.length;
+            const maxTotal = Math.max(...Array.from({ length: numBars }, (_, i) => this.data.series.reduce((sum, series) => sum + (series.values[i] || 0), 0)));
+            for (let barIndex = 0; barIndex < numBars; barIndex++) {
+                const segments = [];
+                let totalValue = 0;
+                for (const series of this.data.series) {
+                    const value = series.values[barIndex] || 0;
+                    totalValue += value;
+                    if (value > 0) {
+                        const height = (value / maxTotal) * this.maxHeight;
+                        const width = (value / maxTotal) * this.maxWidth;
+                        segments.push({
+                            value,
+                            height,
+                            width,
+                            color: series.color || '#64748b',
+                            seriesName: series.name,
+                        });
+                    }
+                }
+                bars.push({
+                    segments,
+                    totalValue,
+                    category: this.data.categories?.[barIndex],
+                });
+            }
+        }
+        return bars;
+    }
+    handleColumnHover = (event, bar, columnIndex) => {
+        this.tooltipVisible = true;
+        this.tooltipX = event.clientX;
+        this.tooltipY = event.clientY;
+        this.tooltipHeader = bar.category || `Column ${columnIndex + 1}`;
+        const items = [];
+        bar.segments.forEach((segment) => {
+            if (segment.seriesName && segment.value > 0) {
+                items.push({
+                    color: segment.color,
+                    label: segment.seriesName,
+                    value: segment.value.toString(),
+                });
+            }
+        });
+        this.tooltipItems = items;
+        this.tooltipTotal = bar.totalValue.toString();
+        this.showTooltipTotal = items.length > 1;
+    };
+    handleColumnMove = (event) => {
+        if (this.tooltipVisible) {
+            this.tooltipX = event.clientX;
+            this.tooltipY = event.clientY;
+        }
+    };
+    handleColumnLeave = () => {
+        this.tooltipVisible = false;
+    };
+    render() {
+        const processedData = this.processData();
+        return (h(Host, { key: 'f851ed646c231a9c1c8e6757d0a46e2d9363f942' }, h("div", { key: 'c306d4f127c52ec87b0b470286491d928b6b6337', class: {
+                'bar-chart': true,
+                [this.type]: true,
+                [this.orientation]: true,
+                'bar-chart-animated': this.animated,
+            } }, this.orientation === 'vertical' ? (h("div", { class: "vertical-container" }, processedData.map((bar, i) => (h("div", { key: i, class: "bar-column vertical", onMouseEnter: (e) => this.handleColumnHover(e, bar, i), onMouseMove: this.handleColumnMove, onMouseLeave: this.handleColumnLeave }, bar.segments.map((segment, segIndex) => (h("div", { key: segIndex, class: "bar-segment vertical", style: {
+                height: `${segment.height}px`,
+                backgroundColor: segment.color,
+            } })))))))) : (h("div", { class: "horizontal-container" }, processedData.map((bar, i) => (h("div", { key: i, class: "bar-row horizontal", onMouseEnter: (e) => this.handleColumnHover(e, bar, i), onMouseMove: this.handleColumnMove, onMouseLeave: this.handleColumnLeave }, bar.segments.map((segment, segIndex) => (h("div", { key: segIndex, class: "bar-segment horizontal", style: {
+                width: `${(segment.value / bar.totalValue) * 100}%`,
+                backgroundColor: segment.color,
+            } }))))))))), h("bh-chart-tooltip", { key: '765ff842c48a11ec414615846f6404b642b29933', visible: this.tooltipVisible, x: this.tooltipX, y: this.tooltipY, header: this.tooltipHeader, items: this.tooltipItems, total: this.tooltipTotal, showTotal: this.showTooltipTotal })));
+    }
+};
+BhBarChart.style = bhBarChartCss;
+
+export { BhBarChart as bh_bar_chart };
+//# sourceMappingURL=bh-bar-chart.entry.js.map