@actabldesign/bellhop-core 0.0.3

package/cjs/bh-card-footer.cjs.entry.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhCardFooterCss = ":host{display:block}.card-footer{display:flex;flex-direction:column;gap:var(--spacing-xs);background:var(--color-white)}.card-footer-divider{height:1px;background:var(--color-neutral-200)}.card-footer-content{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg) var(--spacing-xl)}.card-footer-align-left{justify-content:flex-start}.card-footer-align-right{justify-content:flex-end}.card-footer-align-space-between{justify-content:space-between}.card-footer-primary-actions{display:flex;flex:1 0 0;align-items:center;gap:var(--spacing-none);min-width:0}.card-footer-secondary-actions{display:flex;align-items:center;gap:var(--spacing-md)}.card-footer-primary-actions:empty,.card-footer-secondary-actions:empty{display:none}";
+
+const BhCardFooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * Whether to show the divider above the footer
+     */
+    showDivider = true;
+    /**
+     * Alignment of the footer content
+     */
+    alignment = 'space-between';
+    render() {
+        const footerContentClasses = {
+            'card-footer-content': true,
+            [`card-footer-align-${this.alignment}`]: true,
+        };
+        return (index.h(index.Host, { key: '27230a36e6bafcbb61bdac3bc0bcebbd550e70c8' }, index.h("div", { key: '1f0088fbe2a962080e5db856eb534029ed94d8e2', class: "card-footer" }, this.showDivider && index.h("div", { key: 'f320e028a9c4675b151547f6e368f67910e87d85', class: "card-footer-divider" }), index.h("div", { key: '9f35426a461e248e09de3c5e9eca23e7d63d9f08', class: footerContentClasses }, index.h("div", { key: 'd1d17256b3aa704bb898f711519c96405a7927af', class: "card-footer-primary-actions" }, index.h("slot", { key: '5f18da8ec38e3a2e2237a3bd4d1269686514047d', name: "primary-actions" })), index.h("div", { key: '0754da91faf75928a1070a01960f41395f0387dc', class: "card-footer-secondary-actions" }, index.h("slot", { key: '2ffc5290e3499d62e72fd1398b44811d0f0970ba', name: "secondary-actions" }))))));
+    }
+};
+BhCardFooter.style = bhCardFooterCss;
+
+exports.bh_card_footer = BhCardFooter;
+//# sourceMappingURL=bh-card-footer.entry.cjs.js.map

package/cjs/bh-card-footer.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-card-footer.entry.cjs.js","sources":["src/components/bh-card-footer/bh-card-footer.css?tag=bh-card-footer&encapsulation=shadow","src/components/bh-card-footer/bh-card-footer.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.card-footer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n  background: var(--color-white);\n}\n\n.card-footer-divider {\n  height: 1px;\n  background: var(--color-neutral-200);\n}\n\n.card-footer-content {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md);\n  padding: var(--spacing-lg) var(--spacing-xl);\n}\n\n.card-footer-align-left {\n  justify-content: flex-start;\n}\n\n.card-footer-align-right {\n  justify-content: flex-end;\n}\n\n.card-footer-align-space-between {\n  justify-content: space-between;\n}\n\n.card-footer-primary-actions {\n  display: flex;\n  flex: 1 0 0;\n  align-items: center;\n  gap: var(--spacing-none);\n  min-width: 0;\n}\n\n.card-footer-secondary-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md);\n}\n\n/* Hide empty slots */\n.card-footer-primary-actions:empty,\n.card-footer-secondary-actions:empty {\n  display: none;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type CardFooterAlignment = 'left' | 'right' | 'space-between';\n\n@Component({\n  tag: 'bh-card-footer',\n  styleUrl: 'bh-card-footer.css',\n  shadow: true,\n})\nexport class BhCardFooter {\n  /**\n   * Whether to show the divider above the footer\n   */\n  @Prop() showDivider: boolean = true;\n\n  /**\n   * Alignment of the footer content\n   */\n  @Prop() alignment: CardFooterAlignment = 'space-between';\n\n  render() {\n    const footerContentClasses = {\n      'card-footer-content': true,\n      [`card-footer-align-${this.alignment}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class=\"card-footer\">\n          {this.showDivider && <div class=\"card-footer-divider\" />}\n          <div class={footerContentClasses}>\n            <div class=\"card-footer-primary-actions\">\n              <slot name=\"primary-actions\" />\n            </div>\n            <div class=\"card-footer-secondary-actions\">\n              <slot name=\"secondary-actions\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,+uBAA+uB;;MCS1vB,YAAY,GAAA,MAAA;;;;AACvB;;AAEG;IACK,WAAW,GAAY,IAAI;AAEnC;;AAEG;IACK,SAAS,GAAwB,eAAe;IAExD,MAAM,GAAA;AACJ,QAAA,MAAM,oBAAoB,GAAG;AAC3B,YAAA,qBAAqB,EAAE,IAAI;AAC3B,YAAA,CAAC,qBAAqB,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;SAC9C;QAED,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACrB,IAAI,CAAC,WAAW,IAAIA,kEAAK,KAAK,EAAC,qBAAqB,EAAG,CAAA,EACxDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,oBAAoB,EAAA,EAC9BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EACtCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,iBAAiB,EAAA,CAAG,CAC3B,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAA,EACxCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,mBAAmB,EAAA,CAAG,CAC7B,CACF,CACF,CACD;;;;;;;"}

package/cjs/bh-card-header.cjs.entry.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhCardHeaderCss = ":host{display:block}.card-header{display:flex;flex-direction:column;gap:var(--spacing-lg);background:var(--color-white)}.card-header-content{display:flex;gap:var(--spacing-md);align-items:flex-start;padding:var(--spacing-lg) var(--spacing-xl) 0 var(--spacing-xl)}.card-header-text-container{display:flex;flex-direction:column;flex:1 0 0;gap:var(--spacing-xxs);min-width:0}.card-header-title-row{display:flex;align-items:center;gap:var(--spacing-lg)}.card-header-title{font-family:var(--font-inter);font-size:var(--text-md-size);font-weight:var(--weight-semibold);line-height:var(--text-md-line);color:var(--color-neutral-900)}.card-header-supporting-row{display:flex;align-items:center;gap:var(--spacing-lg);width:100%}.card-header-spacer{width:32px;flex-shrink:0}.card-header-supporting-text{flex:1 0 0;font-family:var(--font-inter);font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-header-divider{height:1px;background:var(--color-neutral-200)}";
+
+const BhCardHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhDropdownClick = index.createEvent(this, "bhDropdownClick");
+    }
+    /**
+     * Whether to show the featured icon
+     */
+    showFeaturedIcon = true;
+    /**
+     * The Material Symbol icon name for the featured icon
+     */
+    featuredIcon = 'star';
+    /**
+     * The style of the featured icon
+     */
+    featuredIconStyle = 'outlined';
+    /**
+     * The color of the featured icon
+     */
+    featuredIconColor = 'gray';
+    /**
+     * Whether to show the title
+     */
+    showTitle = true;
+    /**
+     * The title text
+     */
+    headerTitle = 'Card title';
+    /**
+     * Whether to show the badge
+     */
+    showBadge = false;
+    /**
+     * The badge text
+     */
+    badgeText = '';
+    /**
+     * Whether to show the supporting text
+     */
+    showSupportingText = true;
+    /**
+     * The supporting text (description)
+     */
+    supportingText = 'Card description';
+    /**
+     * Whether to show the dropdown menu button
+     */
+    showDropdown = true;
+    /**
+     * Whether to show the divider
+     */
+    showDivider = true;
+    /**
+     * Emitted when the dropdown button is clicked
+     */
+    bhDropdownClick;
+    handleDropdownClick = () => {
+        this.bhDropdownClick.emit();
+    };
+    render() {
+        return (index.h(index.Host, { key: '58db2d5c1ca47600da5c07ea2750ecb1c2f2a4a7' }, index.h("div", { key: '70cbc0d9779b1f5e75a774f40715001c904f2670', class: "card-header" }, index.h("div", { key: 'fb602ff3a92aa06d51df870ea4e5b3a6f11e9309', class: "card-header-content" }, index.h("div", { key: '00a315a07bc10dc72c36cbc79e0d24c9570dcdc7', class: "card-header-text-container" }, index.h("div", { key: '42d15bc872bf00216be3fcff6bee772bcab7b14e', class: "card-header-title-row" }, this.showFeaturedIcon && (index.h("bh-featured-icon", { key: 'd9294c5035425329806b0b575cf4799defed83f9', size: "sm", icon: this.featuredIcon, iconStyle: this.featuredIconStyle, color: this.featuredIconColor })), this.showTitle && (index.h("span", { key: '96399bb209d70a9694fab80e0e0c4ece3025ade5', class: "card-header-title" }, this.headerTitle)), this.showBadge && this.badgeText && (index.h("bh-badge", { key: 'e030d01179a3e0cc3dbbc972a7251dd49a661533', variant: "blue", size: "sm", emphasis: "medium", label: this.badgeText }))), this.showSupportingText && (index.h("div", { key: 'e4a1253d649a77d9d6a5f12313f279e18b509304', class: "card-header-supporting-row" }, this.showFeaturedIcon && index.h("div", { key: 'bf5f6482b25ad7c35f6f42f18001064f1a5f8be9', class: "card-header-spacer" }), index.h("span", { key: '256fa43537b957a80190ce8683484cbaef0ade56', class: "card-header-supporting-text" }, this.supportingText)))), this.showDropdown && (index.h("bh-button-icon", { key: 'ab3df5c4b4fd8dbeb56c1860d2b38334ed6fa29e', hierarchy: "quaternary", size: "sm", iconName: "more_vert", ariaLabel: "More options", onBhClick: this.handleDropdownClick }))), index.h("slot", { key: '836d525ba14a3f7020fecdcf3660e2e50353a9de', name: "tabs" }), this.showDivider && index.h("div", { key: '9b96114d09fb987fe710de8a6438141c380c07e3', class: "card-header-divider" }))));
+    }
+};
+BhCardHeader.style = bhCardHeaderCss;
+
+exports.bh_card_header = BhCardHeader;
+//# sourceMappingURL=bh-card-header.entry.cjs.js.map

package/cjs/bh-card-header.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-card-header.entry.cjs.js","sources":["src/components/bh-card-header/bh-card-header.css?tag=bh-card-header&encapsulation=shadow","src/components/bh-card-header/bh-card-header.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.card-header {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-lg);\n  background: var(--color-white);\n}\n\n.card-header-content {\n  display: flex;\n  gap: var(--spacing-md);\n  align-items: flex-start;\n  padding: var(--spacing-lg) var(--spacing-xl) 0 var(--spacing-xl);\n}\n\n.card-header-text-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 0;\n  gap: var(--spacing-xxs);\n  min-width: 0;\n}\n\n.card-header-title-row {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-lg);\n}\n\n.card-header-title {\n  font-family: var(--font-inter);\n  font-size: var(--text-md-size);\n  font-weight: var(--weight-semibold);\n  line-height: var(--text-md-line);\n  color: var(--color-neutral-900);\n}\n\n.card-header-supporting-row {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-lg);\n  width: 100%;\n}\n\n.card-header-spacer {\n  width: 32px;\n  flex-shrink: 0;\n}\n\n.card-header-supporting-text {\n  flex: 1 0 0;\n  font-family: var(--font-inter);\n  font-size: var(--text-sm-size);\n  font-weight: var(--weight-regular);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-500);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.card-header-divider {\n  height: 1px;\n  background: var(--color-neutral-200);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type CardHeaderFeaturedIconStyle = 'outlined' | 'filled';\nexport type CardHeaderFeaturedIconColor = 'brand' | 'gray' | 'error' | 'warning' | 'success' | 'highlight';\n\n@Component({\n  tag: 'bh-card-header',\n  styleUrl: 'bh-card-header.css',\n  shadow: true,\n})\nexport class BhCardHeader {\n  /**\n   * Whether to show the featured icon\n   */\n  @Prop() showFeaturedIcon: boolean = true;\n\n  /**\n   * The Material Symbol icon name for the featured icon\n   */\n  @Prop() featuredIcon: string = 'star';\n\n  /**\n   * The style of the featured icon\n   */\n  @Prop() featuredIconStyle: CardHeaderFeaturedIconStyle = 'outlined';\n\n  /**\n   * The color of the featured icon\n   */\n  @Prop() featuredIconColor: CardHeaderFeaturedIconColor = 'gray';\n\n  /**\n   * Whether to show the title\n   */\n  @Prop() showTitle: boolean = true;\n\n  /**\n   * The title text\n   */\n  @Prop() headerTitle: string = 'Card title';\n\n  /**\n   * Whether to show the badge\n   */\n  @Prop() showBadge: boolean = false;\n\n  /**\n   * The badge text\n   */\n  @Prop() badgeText: string = '';\n\n  /**\n   * Whether to show the supporting text\n   */\n  @Prop() showSupportingText: boolean = true;\n\n  /**\n   * The supporting text (description)\n   */\n  @Prop() supportingText: string = 'Card description';\n\n  /**\n   * Whether to show the dropdown menu button\n   */\n  @Prop() showDropdown: boolean = true;\n\n  /**\n   * Whether to show the divider\n   */\n  @Prop() showDivider: boolean = true;\n\n  /**\n   * Emitted when the dropdown button is clicked\n   */\n  @Event() bhDropdownClick!: EventEmitter<void>;\n\n  private handleDropdownClick = () => {\n    this.bhDropdownClick.emit();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"card-header\">\n          <div class=\"card-header-content\">\n            <div class=\"card-header-text-container\">\n              <div class=\"card-header-title-row\">\n                {this.showFeaturedIcon && (\n                  <bh-featured-icon\n                    size=\"sm\"\n                    icon={this.featuredIcon}\n                    iconStyle={this.featuredIconStyle}\n                    color={this.featuredIconColor}\n                  />\n                )}\n                {this.showTitle && (\n                  <span class=\"card-header-title\">{this.headerTitle}</span>\n                )}\n                {this.showBadge && this.badgeText && (\n                  <bh-badge\n                    variant=\"blue\"\n                    size=\"sm\"\n                    emphasis=\"medium\"\n                    label={this.badgeText}\n                  />\n                )}\n              </div>\n              {this.showSupportingText && (\n                <div class=\"card-header-supporting-row\">\n                  {this.showFeaturedIcon && <div class=\"card-header-spacer\" />}\n                  <span class=\"card-header-supporting-text\">{this.supportingText}</span>\n                </div>\n              )}\n            </div>\n            {this.showDropdown && (\n              <bh-button-icon\n                hierarchy=\"quaternary\"\n                size=\"sm\"\n                iconName=\"more_vert\"\n                ariaLabel=\"More options\"\n                onBhClick={this.handleDropdownClick}\n              />\n            )}\n          </div>\n          <slot name=\"tabs\" />\n          {this.showDivider && <div class=\"card-header-divider\" />}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,ikCAAikC;;MCU5kC,YAAY,GAAA,MAAA;;;;;AACvB;;AAEG;IACK,gBAAgB,GAAY,IAAI;AAExC;;AAEG;IACK,YAAY,GAAW,MAAM;AAErC;;AAEG;IACK,iBAAiB,GAAgC,UAAU;AAEnE;;AAEG;IACK,iBAAiB,GAAgC,MAAM;AAE/D;;AAEG;IACK,SAAS,GAAY,IAAI;AAEjC;;AAEG;IACK,WAAW,GAAW,YAAY;AAE1C;;AAEG;IACK,SAAS,GAAY,KAAK;AAElC;;AAEG;IACK,SAAS,GAAW,EAAE;AAE9B;;AAEG;IACK,kBAAkB,GAAY,IAAI;AAE1C;;AAEG;IACK,cAAc,GAAW,kBAAkB;AAEnD;;AAEG;IACK,YAAY,GAAY,IAAI;AAEpC;;AAEG;IACK,WAAW,GAAY,IAAI;AAEnC;;AAEG;AACM,IAAA,eAAe;IAEhB,mBAAmB,GAAG,MAAK;AACjC,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;AAC7B,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4BAA4B,EAAA,EACrCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAC/B,IAAI,CAAC,gBAAgB,KACpBA,OAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,SAAS,EAAE,IAAI,CAAC,iBAAiB,EACjC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAA,CAC7B,CACH,EACA,IAAI,CAAC,SAAS,KACbA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAE,EAAA,IAAI,CAAC,WAAW,CAAQ,CAC1D,EACA,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,KAC/BA,OACE,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,CAAA,CACH,CACG,EACL,IAAI,CAAC,kBAAkB,KACtBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4BAA4B,EAAA,EACpC,IAAI,CAAC,gBAAgB,IAAIA,kEAAK,KAAK,EAAC,oBAAoB,EAAG,CAAA,EAC5DA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6BAA6B,EAAE,EAAA,IAAI,CAAC,cAAc,CAAQ,CAClE,CACP,CACG,EACL,IAAI,CAAC,YAAY,KAChBA,OACE,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,WAAW,EACpB,SAAS,EAAC,cAAc,EACxB,SAAS,EAAE,IAAI,CAAC,mBAAmB,EACnC,CAAA,CACH,CACG,EACNA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAG,CAAA,EACnB,IAAI,CAAC,WAAW,IAAIA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAG,CAAA,CACpD,CACD;;;;;;;"}

package/cjs/bh-card.cjs.entry.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhCardCss = ":host{display:block}.card{display:flex;flex-direction:column;background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-xl);overflow:hidden;font-family:var(--font-inter)}.card-header-slot{display:contents}.card-content{display:flex;flex-direction:column;flex:1 0 auto;padding:var(--spacing-lg) var(--spacing-xl);gap:var(--spacing-none)}.card-footer-slot{display:contents}.card-content-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:var(--spacing-md);padding:var(--spacing-xl);background:var(--color-purple-50, #f5f3ff);border:1px dashed var(--color-purple-500, #7c3aed);border-radius:var(--radius-xl);min-height:100%}.card-placeholder-icon{font-size:32px;color:var(--color-purple-500, #7c3aed)}.card-placeholder-text{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-purple-700, #6d28d9);text-decoration:underline;text-align:center}";
+
+const BhCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Whether to show the header section
+     */
+    showHeader = true;
+    /**
+     * Whether to show the footer section
+     */
+    showFooter = true;
+    /**
+     * Minimum height of the content area in pixels
+     */
+    contentMinHeight = 200;
+    /**
+     * Placeholder text shown when no content is provided
+     */
+    placeholderText = 'Card content slot';
+    hasContent = false;
+    componentWillLoad() {
+        this.checkForContent();
+    }
+    checkForContent() {
+        const children = Array.from(this.el.childNodes).filter((node) => (node.nodeType === Node.ELEMENT_NODE &&
+            !node.hasAttribute('slot')) ||
+            (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()));
+        this.hasContent = children.length > 0;
+    }
+    render() {
+        const contentStyle = {
+            minHeight: `${this.contentMinHeight}px`,
+        };
+        return (index.h(index.Host, { key: '5bbe75e2d4ace932edc5a8d32fb450e27e67cdbe' }, index.h("div", { key: 'ddb19c134e32a35bc2b8a4b57ed9862faf47a53b', class: "card" }, this.showHeader && (index.h("div", { key: '315478a2c488b5e933c49966bccaccf8313e58b5', class: "card-header-slot" }, index.h("slot", { key: 'f3de383b3818feb9883c25ff150c52f0e347de86', name: "header" }))), index.h("div", { key: '4c6b62db9ffa61f2e0133c2af7a29a090d9c54a5', class: "card-content", style: contentStyle }, index.h("slot", { key: '969443dcc57fe724cbb3f1d6e1c35c8cc0312794' }), !this.hasContent && (index.h("div", { key: '0c5e02cf39bec9c7c1ce2ef223b1b4b0df74a372', class: "card-content-placeholder" }, index.h("span", { key: '0a89b768f29453dc251c3c3402ea8029bd13aaeb', class: "card-placeholder-text" }, this.placeholderText)))), this.showFooter && (index.h("div", { key: 'f4a2bb6df865bd1abb8f5da2d686906bddcc4c08', class: "card-footer-slot" }, index.h("slot", { key: '8e643371cbbbf56fb3fb87ccda3b5897f8f914bd', name: "footer" }))))));
+    }
+};
+BhCard.style = bhCardCss;
+
+exports.bh_card = BhCard;
+//# sourceMappingURL=bh-card.entry.cjs.js.map

package/cjs/bh-card.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-card.entry.cjs.js","sources":["src/components/bh-card/bh-card.css?tag=bh-card&encapsulation=shadow","src/components/bh-card/bh-card.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.card {\n  display: flex;\n  flex-direction: column;\n  background: var(--color-white);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-xl);\n  overflow: hidden;\n  font-family: var(--font-inter);\n}\n\n.card-header-slot {\n  display: contents;\n}\n\n.card-content {\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 auto;\n  padding: var(--spacing-lg) var(--spacing-xl);\n  gap: var(--spacing-none);\n}\n\n.card-footer-slot {\n  display: contents;\n}\n\n/* Placeholder styles */\n.card-content-placeholder {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  gap: var(--spacing-md);\n  padding: var(--spacing-xl);\n  background: var(--color-purple-50, #f5f3ff);\n  border: 1px dashed var(--color-purple-500, #7c3aed);\n  border-radius: var(--radius-xl);\n  min-height: 100%;\n}\n\n.card-placeholder-icon {\n  font-size: 32px;\n  color: var(--color-purple-500, #7c3aed);\n}\n\n.card-placeholder-text {\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n  color: var(--color-purple-700, #6d28d9);\n  text-decoration: underline;\n  text-align: center;\n}\n","import { Component, Prop, State, Element, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'bh-card',\n  styleUrl: 'bh-card.css',\n  shadow: true,\n})\nexport class BhCard {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Whether to show the header section\n   */\n  @Prop() showHeader: boolean = true;\n\n  /**\n   * Whether to show the footer section\n   */\n  @Prop() showFooter: boolean = true;\n\n  /**\n   * Minimum height of the content area in pixels\n   */\n  @Prop() contentMinHeight: number = 200;\n\n  /**\n   * Placeholder text shown when no content is provided\n   */\n  @Prop() placeholderText: string = 'Card content slot';\n\n  @State() hasContent: boolean = false;\n\n  componentWillLoad() {\n    this.checkForContent();\n  }\n\n  private checkForContent() {\n    const children = Array.from(this.el.childNodes).filter(\n      (node) =>\n        (node.nodeType === Node.ELEMENT_NODE &&\n          !(node as Element).hasAttribute('slot')) ||\n        (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())\n    );\n    this.hasContent = children.length > 0;\n  }\n\n  render() {\n    const contentStyle = {\n      minHeight: `${this.contentMinHeight}px`,\n    };\n\n    return (\n      <Host>\n        <div class=\"card\">\n          {this.showHeader && (\n            <div class=\"card-header-slot\">\n              <slot name=\"header\" />\n            </div>\n          )}\n          <div class=\"card-content\" style={contentStyle}>\n            <slot />\n            {!this.hasContent && (\n              <div class=\"card-content-placeholder\">\n                <span class=\"card-placeholder-text\">{this.placeholderText}</span>\n              </div>\n            )}\n          </div>\n          {this.showFooter && (\n            <div class=\"card-footer-slot\">\n              <slot name=\"footer\" />\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,m8BAAm8B;;MCOx8B,MAAM,GAAA,MAAA;;;;;AAGjB;;AAEG;IACK,UAAU,GAAY,IAAI;AAElC;;AAEG;IACK,UAAU,GAAY,IAAI;AAElC;;AAEG;IACK,gBAAgB,GAAW,GAAG;AAEtC;;AAEG;IACK,eAAe,GAAW,mBAAmB;IAE5C,UAAU,GAAY,KAAK;IAEpC,iBAAiB,GAAA;QACf,IAAI,CAAC,eAAe,EAAE;;IAGhB,eAAe,GAAA;QACrB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,MAAM,CACpD,CAAC,IAAI,KACH,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;AAClC,YAAA,CAAE,IAAgB,CAAC,YAAY,CAAC,MAAM,CAAC;AACzC,aAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CACjE;QACD,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC;;IAGvC,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAC,gBAAgB,CAAI,EAAA,CAAA;SACxC;AAED,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACd,IAAI,CAAC,UAAU,KACdA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,CACP,EACDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,YAAY,EAAA,EAC3CA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACP,CAAC,IAAI,CAAC,UAAU,KACfA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAE,EAAA,IAAI,CAAC,eAAe,CAAQ,CAC7D,CACP,CACG,EACL,IAAI,CAAC,UAAU,KACdA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3BA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,CACP,CACG,CACD;;;;;;;"}

package/cjs/bh-chart-tooltip.cjs.entry.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhChartTooltipCss = "@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}.chart-tooltip{position:fixed;z-index:10000;pointer-events:none;opacity:0;transition:opacity 0.15s ease;transform:translate(-50%, -100%);margin-top:var(--spacing-sm);width:max-content;min-width:120px;max-width:240px}.chart-tooltip.storybook-mode{position:absolute;transform:translate(-50%, -100%);margin-top:-10px}.chart-tooltip.visible{opacity:1}.tooltip-content{background:var(--color-white);color:var(--color-neutral-900);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-family:var(--font-inter);font-size:var(--text-xs-size);line-height:var(--text-xs-line);box-shadow:0 2px 8px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08);border:1px solid rgba(0, 0, 0, 0.05)}.tooltip-header{font-weight:var(--weight-semibold);margin-bottom:var(--spacing-xs);padding-bottom:var(--spacing-xs);border-bottom:1px solid var(--color-neutral-100)}.tooltip-items{display:flex;flex-direction:column;gap:var(--spacing-xs)}.tooltip-item{display:flex;align-items:center;gap:var(--spacing-sm);white-space:nowrap}.tooltip-dot{width:var(--spacing-sm);height:var(--spacing-sm);border-radius:50%;flex-shrink:0}.tooltip-label{color:var(--color-neutral-600);font-weight:var(--weight-regular);flex-shrink:0}.tooltip-value{color:var(--color-neutral-900);font-weight:var(--weight-medium)}.tooltip-total{margin-top:var(--spacing-xs);padding-top:var(--spacing-xs);border-top:1px solid var(--color-neutral-100);display:flex;justify-content:space-between;gap:var(--spacing-md)}.total-label{color:var(--color-neutral-600);font-weight:var(--weight-medium)}.total-value{color:var(--color-neutral-900);font-weight:var(--weight-semibold)}";
+
+const BhChartTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * Whether the tooltip is visible
+     */
+    visible = false;
+    /**
+     * X position of the tooltip (in pixels)
+     */
+    x = 0;
+    /**
+     * Y position of the tooltip (in pixels)
+     */
+    y = 0;
+    /**
+     * Header text for the tooltip
+     */
+    header = '';
+    /**
+     * Items to display in the tooltip
+     */
+    items = [];
+    /**
+     * Total value to display
+     */
+    total = '';
+    /**
+     * Whether to show the total
+     */
+    showTotal = false;
+    /**
+     * Whether in storybook mode (for static positioning)
+     */
+    storybookMode = false;
+    render() {
+        return (index.h(index.Host, { key: '57397b8dd557ccf795a68896c7f1913fb0bc9b9e' }, index.h("div", { key: 'ff10c37825a1b62a08b168248b7d05b49fca5a79', class: {
+                'chart-tooltip': true,
+                visible: this.visible,
+                'storybook-mode': this.storybookMode,
+            }, style: {
+                left: `${this.x}px`,
+                top: `${this.y}px`,
+            } }, index.h("div", { key: '1eec265888955e2d073b85c4e2a5cde44b816233', class: "tooltip-content" }, this.header && index.h("div", { key: 'b287d571062079c274941e20863562898e1de7de', class: "tooltip-header" }, this.header), index.h("div", { key: 'f4db62e0a0bc52422546fff47e0fb11abffdf744', class: "tooltip-items" }, this.items.map((item, index$1) => (index.h("div", { key: index$1, class: "tooltip-item" }, item.color && (index.h("span", { class: "tooltip-dot", style: { backgroundColor: item.color } })), item.label && (index.h("span", { class: "tooltip-label" }, item.label, ":")), index.h("span", { class: "tooltip-value" }, item.value))))), this.showTotal && this.total && (index.h("div", { key: '46ade21e6d662ae224d6e2d019609b270b8e1989', class: "tooltip-total" }, index.h("span", { key: '8ad8d17c70c5b9a4a6fd98b54db5da98e9025875', class: "total-label" }, "Total:"), index.h("span", { key: '57e0ee054526971a7e4b8b8e43b2e0c1b685b9e4', class: "total-value" }, this.total)))))));
+    }
+};
+BhChartTooltip.style = bhChartTooltipCss;
+
+exports.bh_chart_tooltip = BhChartTooltip;
+//# sourceMappingURL=bh-chart-tooltip.entry.cjs.js.map

package/cjs/bh-chart-tooltip.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-chart-tooltip.entry.cjs.js","sources":["src/components/bh-chart-tooltip/bh-chart-tooltip.css?tag=bh-chart-tooltip&encapsulation=shadow","src/components/bh-chart-tooltip/bh-chart-tooltip.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n  display: block;\n}\n\n.chart-tooltip {\n  position: fixed;\n  z-index: 10000;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n  transform: translate(-50%, -100%);\n  margin-top: var(--spacing-sm);\n  width: max-content;\n  min-width: 120px;\n  max-width: 240px;\n}\n\n.chart-tooltip.storybook-mode {\n  position: absolute;\n  transform: translate(-50%, -100%);\n  margin-top: -10px;\n}\n\n.chart-tooltip.visible {\n  opacity: 1;\n}\n\n.tooltip-content {\n  background: var(--color-white);\n  color: var(--color-neutral-900);\n  padding: var(--spacing-sm) var(--spacing-md);\n  border-radius: var(--radius-md);\n  font-family: var(--font-inter);\n  font-size: var(--text-xs-size);\n  line-height: var(--text-xs-line);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08);\n  border: 1px solid rgba(0, 0, 0, 0.05);\n}\n\n.tooltip-header {\n  font-weight: var(--weight-semibold);\n  margin-bottom: var(--spacing-xs);\n  padding-bottom: var(--spacing-xs);\n  border-bottom: 1px solid var(--color-neutral-100);\n}\n\n.tooltip-items {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n}\n\n.tooltip-item {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-sm);\n  white-space: nowrap;\n}\n\n.tooltip-dot {\n  width: var(--spacing-sm);\n  height: var(--spacing-sm);\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.tooltip-label {\n  color: var(--color-neutral-600);\n  font-weight: var(--weight-regular);\n  flex-shrink: 0;\n}\n\n.tooltip-value {\n  color: var(--color-neutral-900);\n  font-weight: var(--weight-medium);\n}\n\n.tooltip-total {\n  margin-top: var(--spacing-xs);\n  padding-top: var(--spacing-xs);\n  border-top: 1px solid var(--color-neutral-100);\n  display: flex;\n  justify-content: space-between;\n  gap: var(--spacing-md);\n}\n\n.total-label {\n  color: var(--color-neutral-600);\n  font-weight: var(--weight-medium);\n}\n\n.total-value {\n  color: var(--color-neutral-900);\n  font-weight: var(--weight-semibold);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport interface TooltipItem {\n  color?: string;\n  label?: string;\n  value: string;\n}\n\n@Component({\n  tag: 'bh-chart-tooltip',\n  styleUrl: 'bh-chart-tooltip.css',\n  shadow: true,\n})\nexport class BhChartTooltip {\n  /**\n   * Whether the tooltip is visible\n   */\n  @Prop() visible: boolean = false;\n\n  /**\n   * X position of the tooltip (in pixels)\n   */\n  @Prop() x: number = 0;\n\n  /**\n   * Y position of the tooltip (in pixels)\n   */\n  @Prop() y: number = 0;\n\n  /**\n   * Header text for the tooltip\n   */\n  @Prop() header: string = '';\n\n  /**\n   * Items to display in the tooltip\n   */\n  @Prop() items: TooltipItem[] = [];\n\n  /**\n   * Total value to display\n   */\n  @Prop() total: string = '';\n\n  /**\n   * Whether to show the total\n   */\n  @Prop() showTotal: boolean = false;\n\n  /**\n   * Whether in storybook mode (for static positioning)\n   */\n  @Prop() storybookMode: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'chart-tooltip': true,\n            visible: this.visible,\n            'storybook-mode': this.storybookMode,\n          }}\n          style={{\n            left: `${this.x}px`,\n            top: `${this.y}px`,\n          }}\n        >\n          <div class=\"tooltip-content\">\n            {this.header && <div class=\"tooltip-header\">{this.header}</div>}\n            <div class=\"tooltip-items\">\n              {this.items.map((item, index) => (\n                <div key={index} class=\"tooltip-item\">\n                  {item.color && (\n                    <span\n                      class=\"tooltip-dot\"\n                      style={{ backgroundColor: item.color }}\n                    />\n                  )}\n                  {item.label && (\n                    <span class=\"tooltip-label\">{item.label}:</span>\n                  )}\n                  <span class=\"tooltip-value\">{item.value}</span>\n                </div>\n              ))}\n            </div>\n            {this.showTotal && this.total && (\n              <div class=\"tooltip-total\">\n                <span class=\"total-label\">Total:</span>\n                <span class=\"total-value\">{this.total}</span>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","index"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,qvMAAqvM;;MCalwM,cAAc,GAAA,MAAA;;;;AACzB;;AAEG;IACK,OAAO,GAAY,KAAK;AAEhC;;AAEG;IACK,CAAC,GAAW,CAAC;AAErB;;AAEG;IACK,CAAC,GAAW,CAAC;AAErB;;AAEG;IACK,MAAM,GAAW,EAAE;AAE3B;;AAEG;IACK,KAAK,GAAkB,EAAE;AAEjC;;AAEG;IACK,KAAK,GAAW,EAAE;AAE1B;;AAEG;IACK,SAAS,GAAY,KAAK;AAElC;;AAEG;IACK,aAAa,GAAY,KAAK;IAEtC,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,eAAe,EAAE,IAAI;gBACrB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,gBAAgB,EAAE,IAAI,CAAC,aAAa;AACrC,aAAA,EACD,KAAK,EAAE;AACL,gBAAA,IAAI,EAAE,CAAA,EAAG,IAAI,CAAC,CAAC,CAAI,EAAA,CAAA;AACnB,gBAAA,GAAG,EAAE,CAAA,EAAG,IAAI,CAAC,CAAC,CAAI,EAAA,CAAA;aACnB,EAAA,EAEDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EACzB,IAAI,CAAC,MAAM,IAAIA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAE,EAAA,IAAI,CAAC,MAAM,CAAO,EAC/DA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EACvB,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEE,OAAK,MAC1BF,OAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAEE,OAAK,EAAE,KAAK,EAAC,cAAc,EAAA,EAClC,IAAI,CAAC,KAAK,KACTF,OACE,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,EAAE,GACtC,CACH,EACA,IAAI,CAAC,KAAK,KACTA,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EAAE,IAAI,CAAC,KAAK,MAAS,CACjD,EACDA,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAC3C,CACP,CAAC,CACE,EACL,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,KAC3BA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAc,EAAA,QAAA,CAAA,EACvCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CACzC,CACP,CACG,CACF,CACD;;;;;;;"}

package/cjs/bh-checkbox-group-item.cjs.entry.js

@@ -0,0 +1,142 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhCheckboxGroupItemCss = ":host{display:block}.checkbox-group-item{display:flex;align-items:flex-start;background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-xl);cursor:pointer;transition:all 0.2s ease;box-sizing:border-box;font-family:var(--font-inter);outline:none}.checkbox-group-item-sm{padding:var(--spacing-xl);gap:var(--spacing-md)}.checkbox-group-item-md{padding:var(--spacing-xl) var(--spacing-2xl);gap:var(--spacing-lg)}.checkbox-group-item-icon-simple{gap:var(--spacing-lg)}.checkbox-group-item-active{border-color:var(--color-brand-600);box-shadow:inset 0 0 0 1px var(--color-brand-600);background:var(--color-brand-50)}.checkbox-group-item-hovered:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active){background:var(--color-neutral-50);border-color:var(--color-neutral-300)}.checkbox-group-item-focused:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active){box-shadow:0px 0px 0px 4px var(--color-brand-100)}.checkbox-group-item-focused.checkbox-group-item-active:not(.checkbox-group-item-disabled){box-shadow:inset 0 0 0 1px var(--color-brand-600),\n    0px 0px 0px 4px var(--color-brand-100)}.checkbox-group-item-disabled{background:var(--color-neutral-100);border-color:var(--color-neutral-200);cursor:not-allowed;opacity:0.6}.item-content{display:flex;flex-direction:column;flex:1;gap:var(--spacing-xs);min-width:0}.item-text-row{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap}.item-title{font-size:var(--text-sm-size);font-weight:var(--weight-semibold);line-height:var(--text-sm-line);color:var(--color-neutral-900)}.item-subtitle{font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-600)}.item-description{font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-600);margin:0}.checkbox-group-item-disabled .item-title,.checkbox-group-item-disabled .item-subtitle,.checkbox-group-item-disabled .item-description{color:var(--color-neutral-400)}.checkbox-group-item bh-checkbox,.checkbox-group-item bh-radio-button{pointer-events:none}";
+
+const BhCheckboxGroupItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhItemChange = index.createEvent(this, "bhItemChange");
+    }
+    /**
+     * The type of input control
+     */
+    type = 'checkbox';
+    /**
+     * The size variant
+     */
+    size = 'sm';
+    /**
+     * Unique value identifier for this item
+     */
+    value = '';
+    /**
+     * Whether the item is checked (for checkbox type)
+     */
+    checked = false;
+    /**
+     * Whether the item is selected (for radio type)
+     */
+    selected = false;
+    /**
+     * Whether the item is disabled
+     */
+    disabled = false;
+    /**
+     * Material Symbol icon name (for icon-simple type)
+     */
+    icon = '';
+    /**
+     * Title text
+     */
+    itemTitle = '';
+    /**
+     * Subtitle text (inline with title)
+     */
+    subtitle = '';
+    /**
+     * Description text
+     */
+    description = '';
+    /**
+     * Radio group name (for radio type)
+     */
+    name = '';
+    isHovered = false;
+    isFocused = false;
+    /**
+     * Emitted when the item state changes
+     */
+    bhItemChange;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        if (this.type === 'radio' || this.type === 'icon-simple') {
+            if (!this.selected) {
+                this.selected = true;
+                this.bhItemChange.emit({ value: this.value, checked: true });
+            }
+        }
+        else {
+            this.checked = !this.checked;
+            this.bhItemChange.emit({ value: this.value, checked: this.checked });
+        }
+    };
+    handleKeyDown = (event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.handleClick();
+        }
+    };
+    handleMouseEnter = () => {
+        if (!this.disabled)
+            this.isHovered = true;
+    };
+    handleMouseLeave = () => {
+        this.isHovered = false;
+    };
+    handleFocus = () => {
+        if (!this.disabled)
+            this.isFocused = true;
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+    };
+    handleCheckboxChange = (event) => {
+        event.stopPropagation();
+        this.checked = event.detail;
+        this.bhItemChange.emit({ value: this.value, checked: this.checked });
+    };
+    handleRadioChange = (event) => {
+        event.stopPropagation();
+        this.selected = true;
+        this.bhItemChange.emit({ value: this.value, checked: true });
+    };
+    render() {
+        const isActive = (this.type === 'radio' || this.type === 'icon-simple') ? this.selected : this.checked;
+        const containerClasses = {
+            'checkbox-group-item': true,
+            [`checkbox-group-item-${this.size}`]: true,
+            [`checkbox-group-item-${this.type}`]: true,
+            'checkbox-group-item-active': isActive,
+            'checkbox-group-item-disabled': this.disabled,
+            'checkbox-group-item-hovered': this.isHovered,
+            'checkbox-group-item-focused': this.isFocused,
+        };
+        const renderInput = () => {
+            if (this.type === 'radio') {
+                return (index.h("bh-radio-button", { size: this.size, selected: this.selected, disabled: this.disabled, value: this.value, name: this.name, onBhChange: this.handleRadioChange }));
+            }
+            // For icon-simple, use `selected` state; for checkbox, use `checked` state
+            const isChecked = this.type === 'icon-simple' ? this.selected : this.checked;
+            return (index.h("bh-checkbox", { size: this.size, checked: isChecked, disabled: this.disabled, onBhChange: this.handleCheckboxChange }));
+        };
+        const renderIcon = () => {
+            if (this.type === 'icon-simple' && this.icon) {
+                return (index.h("bh-featured-icon", { size: "sm", icon: this.icon, color: "gray", iconStyle: "outlined" }));
+            }
+            return null;
+        };
+        const renderContent = () => (index.h("div", { class: "item-content" }, index.h("div", { class: "item-text-row" }, this.itemTitle && index.h("span", { class: "item-title" }, this.itemTitle), this.subtitle && index.h("span", { class: "item-subtitle" }, this.subtitle)), this.description && index.h("p", { class: "item-description" }, this.description)));
+        return (index.h(index.Host, null, index.h("div", { class: containerClasses, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: this.disabled ? -1 : 0, role: this.type === 'radio' ? 'radio' : 'checkbox', "aria-checked": String(isActive), "aria-disabled": this.disabled ? 'true' : null }, this.type === 'icon-simple' ? (
+        // Icon Simple: icon + content | input
+        [renderIcon(), renderContent(), renderInput()]) : (
+        // Checkbox/Radio: input | content
+        [renderInput(), renderContent()]))));
+    }
+};
+BhCheckboxGroupItem.style = bhCheckboxGroupItemCss;
+
+exports.bh_checkbox_group_item = BhCheckboxGroupItem;
+//# sourceMappingURL=bh-checkbox-group-item.entry.cjs.js.map

package/cjs/bh-checkbox-group-item.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-checkbox-group-item.entry.cjs.js","sources":["src/components/bh-checkbox-group-item/bh-checkbox-group-item.css?tag=bh-checkbox-group-item&encapsulation=shadow","src/components/bh-checkbox-group-item/bh-checkbox-group-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.checkbox-group-item {\n  display: flex;\n  align-items: flex-start;\n  background: var(--color-white);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-xl);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-sizing: border-box;\n  font-family: var(--font-inter);\n  outline: none;\n}\n\n/* Size variants */\n.checkbox-group-item-sm {\n  padding: var(--spacing-xl);\n  gap: var(--spacing-md);\n}\n\n.checkbox-group-item-md {\n  padding: var(--spacing-xl) var(--spacing-2xl);\n  gap: var(--spacing-lg);\n}\n\n/* Icon simple type has more gap */\n.checkbox-group-item-icon-simple {\n  gap: var(--spacing-lg);\n}\n\n/* Active/Selected state */\n.checkbox-group-item-active {\n  border-color: var(--color-brand-600);\n  box-shadow: inset 0 0 0 1px var(--color-brand-600);\n  background: var(--color-brand-50);\n}\n\n/* Hover state */\n.checkbox-group-item-hovered:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active) {\n  background: var(--color-neutral-50);\n  border-color: var(--color-neutral-300);\n}\n\n/* Focus state */\n.checkbox-group-item-focused:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active) {\n  box-shadow: 0px 0px 0px 4px var(--color-brand-100);\n}\n\n.checkbox-group-item-focused.checkbox-group-item-active:not(.checkbox-group-item-disabled) {\n  box-shadow: inset 0 0 0 1px var(--color-brand-600),\n    0px 0px 0px 4px var(--color-brand-100);\n}\n\n/* Disabled state */\n.checkbox-group-item-disabled {\n  background: var(--color-neutral-100);\n  border-color: var(--color-neutral-200);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Content container */\n.item-content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  gap: var(--spacing-xs);\n  min-width: 0;\n}\n\n/* Title row with title and subtitle */\n.item-text-row {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-sm);\n  flex-wrap: wrap;\n}\n\n/* Title */\n.item-title {\n  font-size: var(--text-sm-size);\n  font-weight: var(--weight-semibold);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-900);\n}\n\n/* Subtitle (inline with title) */\n.item-subtitle {\n  font-size: var(--text-sm-size);\n  font-weight: var(--weight-regular);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-600);\n}\n\n/* Description */\n.item-description {\n  font-size: var(--text-sm-size);\n  font-weight: var(--weight-regular);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-600);\n  margin: 0;\n}\n\n/* Disabled text styles */\n.checkbox-group-item-disabled .item-title,\n.checkbox-group-item-disabled .item-subtitle,\n.checkbox-group-item-disabled .item-description {\n  color: var(--color-neutral-400);\n}\n\n/* Prevent inner checkbox/radio from capturing clicks - let the card handle it */\n.checkbox-group-item bh-checkbox,\n.checkbox-group-item bh-radio-button {\n  pointer-events: none;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type CheckboxGroupItemType = 'checkbox' | 'radio' | 'icon-simple';\nexport type CheckboxGroupItemSize = 'sm' | 'md';\n\n@Component({\n  tag: 'bh-checkbox-group-item',\n  styleUrl: 'bh-checkbox-group-item.css',\n  shadow: true,\n})\nexport class BhCheckboxGroupItem {\n  /**\n   * The type of input control\n   */\n  @Prop() type: CheckboxGroupItemType = 'checkbox';\n\n  /**\n   * The size variant\n   */\n  @Prop() size: CheckboxGroupItemSize = 'sm';\n\n  /**\n   * Unique value identifier for this item\n   */\n  @Prop() value: string = '';\n\n  /**\n   * Whether the item is checked (for checkbox type)\n   */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  /**\n   * Whether the item is selected (for radio type)\n   */\n  @Prop({ mutable: true }) selected: boolean = false;\n\n  /**\n   * Whether the item is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Material Symbol icon name (for icon-simple type)\n   */\n  @Prop() icon: string = '';\n\n\n  /**\n   * Title text\n   */\n  @Prop() itemTitle: string = '';\n\n  /**\n   * Subtitle text (inline with title)\n   */\n  @Prop() subtitle: string = '';\n\n  /**\n   * Description text\n   */\n  @Prop() description: string = '';\n\n  /**\n   * Radio group name (for radio type)\n   */\n  @Prop() name: string = '';\n\n  @State() isHovered: boolean = false;\n  @State() isFocused: boolean = false;\n\n  /**\n   * Emitted when the item state changes\n   */\n  @Event() bhItemChange!: EventEmitter<{ value: string; checked: boolean }>;\n\n  private handleClick = () => {\n    if (this.disabled) return;\n\n    if (this.type === 'radio' || this.type === 'icon-simple') {\n      if (!this.selected) {\n        this.selected = true;\n        this.bhItemChange.emit({ value: this.value, checked: true });\n      }\n    } else {\n      this.checked = !this.checked;\n      this.bhItemChange.emit({ value: this.value, checked: this.checked });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    if (!this.disabled) this.isHovered = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovered = false;\n  };\n\n  private handleFocus = () => {\n    if (!this.disabled) this.isFocused = true;\n  };\n\n  private handleBlur = () => {\n    this.isFocused = false;\n  };\n\n  private handleCheckboxChange = (event: CustomEvent<boolean>) => {\n    event.stopPropagation();\n    this.checked = event.detail;\n    this.bhItemChange.emit({ value: this.value, checked: this.checked });\n  };\n\n  private handleRadioChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.selected = true;\n    this.bhItemChange.emit({ value: this.value, checked: true });\n  };\n\n  render() {\n    const isActive = (this.type === 'radio' || this.type === 'icon-simple') ? this.selected : this.checked;\n\n    const containerClasses = {\n      'checkbox-group-item': true,\n      [`checkbox-group-item-${this.size}`]: true,\n      [`checkbox-group-item-${this.type}`]: true,\n      'checkbox-group-item-active': isActive,\n      'checkbox-group-item-disabled': this.disabled,\n      'checkbox-group-item-hovered': this.isHovered,\n      'checkbox-group-item-focused': this.isFocused,\n    };\n\n    const renderInput = () => {\n      if (this.type === 'radio') {\n        return (\n          <bh-radio-button\n            size={this.size}\n            selected={this.selected}\n            disabled={this.disabled}\n            value={this.value}\n            name={this.name}\n            onBhChange={this.handleRadioChange}\n          />\n        );\n      }\n      // For icon-simple, use `selected` state; for checkbox, use `checked` state\n      const isChecked = this.type === 'icon-simple' ? this.selected : this.checked;\n      return (\n        <bh-checkbox\n          size={this.size}\n          checked={isChecked}\n          disabled={this.disabled}\n          onBhChange={this.handleCheckboxChange}\n        />\n      );\n    };\n\n    const renderIcon = () => {\n      if (this.type === 'icon-simple' && this.icon) {\n        return (\n          <bh-featured-icon\n            size=\"sm\"\n            icon={this.icon}\n            color=\"gray\"\n            iconStyle=\"outlined\"\n          />\n        );\n      }\n      return null;\n    };\n\n    const renderContent = () => (\n      <div class=\"item-content\">\n        <div class=\"item-text-row\">\n          {this.itemTitle && <span class=\"item-title\">{this.itemTitle}</span>}\n          {this.subtitle && <span class=\"item-subtitle\">{this.subtitle}</span>}\n        </div>\n        {this.description && <p class=\"item-description\">{this.description}</p>}\n      </div>\n    );\n\n    return (\n      <Host>\n        <div\n          class={containerClasses}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          tabIndex={this.disabled ? -1 : 0}\n          role={this.type === 'radio' ? 'radio' : 'checkbox'}\n          aria-checked={String(isActive)}\n          aria-disabled={this.disabled ? 'true' : null}\n        >\n          {this.type === 'icon-simple' ? (\n            // Icon Simple: icon + content | input\n            [renderIcon(), renderContent(), renderInput()]\n          ) : (\n            // Checkbox/Radio: input | content\n            [renderInput(), renderContent()]\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

package/cjs/bh-checkbox-group.cjs.entry.js

@@ -0,0 +1,100 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhCheckboxGroupCss = ":host{display:block}.checkbox-group{display:flex;flex-direction:column;gap:var(--spacing-lg);width:100%}";
+
+const BhCheckboxGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhChange = index.createEvent(this, "bhChange");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * The type of input controls in the group
+     */
+    type = 'checkbox';
+    /**
+     * The name for radio group (required for radio type)
+     */
+    name = '';
+    /**
+     * Current selected value(s)
+     * For checkbox: array of values
+     * For radio: single value string
+     */
+    value = [];
+    /**
+     * Whether all items in the group are disabled
+     */
+    disabled = false;
+    /**
+     * Emitted when selection changes
+     */
+    bhChange;
+    handleItemChange(event) {
+        event.stopPropagation();
+        const { value: itemValue, checked } = event.detail;
+        if (this.type === 'radio' || this.type === 'icon-simple') {
+            // Radio behavior: only one can be selected
+            if (checked) {
+                this.value = itemValue;
+                this.updateChildItems();
+                this.bhChange.emit(this.value);
+            }
+        }
+        else {
+            // Checkbox behavior: multiple can be selected
+            const currentValues = Array.isArray(this.value) ? [...this.value] : [];
+            if (checked) {
+                if (!currentValues.includes(itemValue)) {
+                    currentValues.push(itemValue);
+                }
+            }
+            else {
+                const index = currentValues.indexOf(itemValue);
+                if (index > -1) {
+                    currentValues.splice(index, 1);
+                }
+            }
+            this.value = currentValues;
+            this.bhChange.emit(this.value);
+        }
+    }
+    componentDidLoad() {
+        this.updateChildItems();
+    }
+    updateChildItems() {
+        const items = this.el.querySelectorAll('bh-checkbox-group-item');
+        items.forEach((item) => {
+            // Set type from group
+            item.type = this.type;
+            // Set name for radio groups
+            if (this.type === 'radio' || this.type === 'icon-simple') {
+                item.name = this.name;
+            }
+            // Set disabled state
+            if (this.disabled) {
+                item.disabled = true;
+            }
+            // Update selection state
+            if (this.type === 'radio' || this.type === 'icon-simple') {
+                item.selected = item.value === this.value;
+                item.checked = false;
+            }
+            else {
+                const values = Array.isArray(this.value) ? this.value : [];
+                item.checked = values.includes(item.value);
+                item.selected = false;
+            }
+        });
+    }
+    render() {
+        const role = this.type === 'radio' || this.type === 'icon-simple' ? 'radiogroup' : 'group';
+        return (index.h(index.Host, { key: '14f895b1d0b5d6ba32a67ce3651c327d29d0770c' }, index.h("div", { key: '13b9e0179910941c223643945735fb66b699c6eb', class: "checkbox-group", role: role, "aria-disabled": this.disabled ? 'true' : null }, index.h("slot", { key: '6b28955878dca08ac7549e31130eb69a0880f2ae' }))));
+    }
+};
+BhCheckboxGroup.style = bhCheckboxGroupCss;
+
+exports.bh_checkbox_group = BhCheckboxGroup;
+//# sourceMappingURL=bh-checkbox-group.entry.cjs.js.map

package/cjs/bh-checkbox-group.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-checkbox-group.entry.cjs.js","sources":["src/components/bh-checkbox-group/bh-checkbox-group.css?tag=bh-checkbox-group&encapsulation=shadow","src/components/bh-checkbox-group/bh-checkbox-group.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.checkbox-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-lg);\n  width: 100%;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host, Listen, Element } from '@stencil/core';\n\nexport type CheckboxGroupType = 'checkbox' | 'radio' | 'icon-simple';\n\n@Component({\n  tag: 'bh-checkbox-group',\n  styleUrl: 'bh-checkbox-group.css',\n  shadow: true,\n})\nexport class BhCheckboxGroup {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The type of input controls in the group\n   */\n  @Prop() type: CheckboxGroupType = 'checkbox';\n\n  /**\n   * The name for radio group (required for radio type)\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Current selected value(s)\n   * For checkbox: array of values\n   * For radio: single value string\n   */\n  @Prop({ mutable: true }) value: string | string[] = [];\n\n  /**\n   * Whether all items in the group are disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Emitted when selection changes\n   */\n  @Event() bhChange!: EventEmitter<string | string[]>;\n\n  @Listen('bhItemChange')\n  handleItemChange(event: CustomEvent<{ value: string; checked: boolean }>) {\n    event.stopPropagation();\n    const { value: itemValue, checked } = event.detail;\n\n    if (this.type === 'radio' || this.type === 'icon-simple') {\n      // Radio behavior: only one can be selected\n      if (checked) {\n        this.value = itemValue;\n        this.updateChildItems();\n        this.bhChange.emit(this.value);\n      }\n    } else {\n      // Checkbox behavior: multiple can be selected\n      const currentValues = Array.isArray(this.value) ? [...this.value] : [];\n\n      if (checked) {\n        if (!currentValues.includes(itemValue)) {\n          currentValues.push(itemValue);\n        }\n      } else {\n        const index = currentValues.indexOf(itemValue);\n        if (index > -1) {\n          currentValues.splice(index, 1);\n        }\n      }\n\n      this.value = currentValues;\n      this.bhChange.emit(this.value);\n    }\n  }\n\n  componentDidLoad() {\n    this.updateChildItems();\n  }\n\n  private updateChildItems() {\n    const items = this.el.querySelectorAll('bh-checkbox-group-item');\n\n    items.forEach((item: HTMLBhCheckboxGroupItemElement) => {\n      // Set type from group\n      item.type = this.type;\n\n      // Set name for radio groups\n      if (this.type === 'radio' || this.type === 'icon-simple') {\n        item.name = this.name;\n      }\n\n      // Set disabled state\n      if (this.disabled) {\n        item.disabled = true;\n      }\n\n      // Update selection state\n      if (this.type === 'radio' || this.type === 'icon-simple') {\n        item.selected = item.value === this.value;\n        item.checked = false;\n      } else {\n        const values = Array.isArray(this.value) ? this.value : [];\n        item.checked = values.includes(item.value);\n        item.selected = false;\n      }\n    });\n  }\n\n  render() {\n    const role = this.type === 'radio' || this.type === 'icon-simple' ? 'radiogroup' : 'group';\n\n    return (\n      <Host>\n        <div\n          class=\"checkbox-group\"\n          role={role}\n          aria-disabled={this.disabled ? 'true' : null}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}