@actabldesign/bellhop-core 0.0.3

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-badge.entry.cjs.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":["h"],"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,QACEA,mEAAM,KAAK,EAAE,YAAY,EAAE,IAAI,EAAC,OAAO,EAAA,EACpC,IAAI,CAAC,IAAI,KACRA,OAAA,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,EAEDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAQ,EAE5C,IAAI,CAAC,WAAW,KACfA,OACE,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,EAErBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gDAAgD,cAAc,CAAA,CAAE,YAEtE,CACA,CACV,CACI;;;;;;;"}

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

@@ -0,0 +1,164 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.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) {
+        index.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 (index.h(index.Host, { key: 'f851ed646c231a9c1c8e6757d0a46e2d9363f942' }, index.h("div", { key: 'c306d4f127c52ec87b0b470286491d928b6b6337', class: {
+                'bar-chart': true,
+                [this.type]: true,
+                [this.orientation]: true,
+                'bar-chart-animated': this.animated,
+            } }, this.orientation === 'vertical' ? (index.h("div", { class: "vertical-container" }, processedData.map((bar, i) => (index.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) => (index.h("div", { key: segIndex, class: "bar-segment vertical", style: {
+                height: `${segment.height}px`,
+                backgroundColor: segment.color,
+            } })))))))) : (index.h("div", { class: "horizontal-container" }, processedData.map((bar, i) => (index.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) => (index.h("div", { key: segIndex, class: "bar-segment horizontal", style: {
+                width: `${(segment.value / bar.totalValue) * 100}%`,
+                backgroundColor: segment.color,
+            } }))))))))), index.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;
+
+exports.bh_bar_chart = BhBarChart;
+//# sourceMappingURL=bh-bar-chart.entry.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-bar-chart.entry.cjs.js","sources":["src/components/bh-bar-chart/bh-bar-chart.css?tag=bh-bar-chart&encapsulation=shadow","src/components/bh-bar-chart/bh-bar-chart.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n  display: block;\n}\n\n/* Vertical Layout */\n.vertical-container {\n  display: flex;\n  align-items: flex-end;\n  height: 180px;\n  width: 100%;\n}\n\n.vertical-container.simple {\n  height: 180px;\n  width: 100%;\n}\n\n.bar-column.vertical {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  flex: 1;\n  gap: var(--spacing-xxs, 2px);\n  margin: 0 2px;\n  border-radius: 4px;\n  transition: background-color 0.2s ease;\n}\n\n.vertical-container.simple .bar-column.vertical {\n  flex: 1;\n  margin: 0 2px;\n}\n\n.bar-segment.vertical {\n  width: 6px;\n  border-radius: 2px;\n  min-height: 2px;\n  transition: all 0.3s ease;\n  transform-origin: bottom;\n}\n\n/* Horizontal Layout */\n.horizontal-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  height: auto;\n  min-height: 140px;\n  gap: var(--spacing-lg, 12px);\n}\n\n.horizontal-container.simple {\n  height: auto;\n  min-height: 140px;\n  gap: var(--spacing-lg, 12px);\n}\n\n.bar-row.horizontal {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 6px;\n  min-height: 6px;\n  max-height: 6px;\n  gap: var(--spacing-xxs, 2px);\n  margin: 2px 0;\n  border-radius: 4px;\n  transition: background-color 0.2s ease;\n  padding: 2px;\n}\n\n.horizontal-container.simple .bar-row.horizontal {\n  height: 6px;\n  min-height: 6px;\n  max-height: 6px;\n  margin: 2px 0;\n  padding: 2px;\n}\n\n.bar-segment.horizontal {\n  height: 100%;\n  min-height: 6px;\n  max-height: 6px;\n  border-radius: 2px;\n  min-width: 2px;\n  transition: all 0.3s ease;\n  transform-origin: left;\n}\n\n.horizontal-container.simple .bar-segment.horizontal {\n  min-width: 2px;\n  height: 6px;\n  min-height: 6px;\n  max-height: 6px;\n}\n\n/* Hover effects */\n.bar-column,\n.bar-row {\n  cursor: pointer;\n}\n\n.bar-column:hover {\n  background-color: color-mix(in srgb, var(--color-neutral-100) 50%, transparent);\n}\n\n.bar-row:hover {\n  background-color: color-mix(in srgb, var(--color-neutral-100) 50%, transparent);\n}\n\n.bar-column:hover .bar-segment,\n.bar-row:hover .bar-segment {\n  opacity: 0.9;\n  filter: brightness(1.05);\n}\n\n/* Animations */\n.bar-chart-animated .bar-segment.vertical {\n  animation: barGrowVertical 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;\n}\n\n.bar-chart-animated .bar-segment.horizontal {\n  animation: barGrowHorizontal 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;\n}\n\n@keyframes barGrowVertical {\n  from {\n    transform: scaleY(0);\n    opacity: 0;\n  }\n  to {\n    transform: scaleY(1);\n    opacity: 1;\n  }\n}\n\n@keyframes barGrowHorizontal {\n  from {\n    transform: scaleX(0);\n    opacity: 0;\n  }\n  to {\n    transform: scaleX(1);\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bar-chart-animated .bar-segment.vertical,\n  .bar-chart-animated .bar-segment.horizontal {\n    animation: none;\n    opacity: 1;\n    transform: none;\n  }\n}\n","import { Component, Prop, State, h, Host } from '@stencil/core';\nimport type { TooltipItem } from '../bh-chart-tooltip/bh-chart-tooltip';\n\nexport type BarChartType = 'simple' | 'stacked';\nexport type BarChartOrientation = 'vertical' | 'horizontal';\n\nexport interface BarChartSeries {\n  name: string;\n  values: number[];\n  color?: string;\n}\n\nexport interface BarChartData {\n  series: BarChartSeries[];\n  categories?: string[];\n}\n\ninterface BarSegment {\n  value: number;\n  height: number;\n  width: number;\n  color: string;\n  seriesName?: string;\n}\n\ninterface ProcessedBar {\n  segments: BarSegment[];\n  totalValue: number;\n  category?: string;\n}\n\nconst DEFAULT_COLORS = [\n  'var(--color-brand-600)',\n  'var(--color-orange-500)',\n  'var(--color-success-500)',\n  'var(--color-purple-600)',\n  'var(--color-accent-500)',\n  'var(--color-teal-500)',\n  'var(--color-lime-500)',\n  'var(--color-amber-500)',\n];\n\n@Component({\n  tag: 'bh-bar-chart',\n  styleUrl: 'bh-bar-chart.css',\n  shadow: true,\n})\nexport class BhBarChart {\n  /**\n   * Chart data\n   */\n  @Prop() data: BarChartData = {\n    series: [\n      { name: 'Series 1', values: [30, 45, 20, 35, 50, 40, 60, 35, 25, 55, 40], color: '#94a3b8' },\n      { name: 'Series 2', values: [20, 25, 40, 30, 35, 45, 25, 30, 40, 20, 50], color: '#2563eb' },\n      { name: 'Series 3', values: [25, 15, 35, 20, 15, 20, 30, 25, 30, 35, 25], color: '#7c3aed' },\n    ],\n  };\n\n  /**\n   * Chart type: simple or stacked\n   */\n  @Prop() type: BarChartType = 'stacked';\n\n  /**\n   * Chart orientation: vertical or horizontal\n   */\n  @Prop() orientation: BarChartOrientation = 'vertical';\n\n  /**\n   * Whether to animate the chart\n   */\n  @Prop() animated: boolean = true;\n\n  /**\n   * Maximum height for vertical bars\n   */\n  @Prop() maxHeight: number = 150;\n\n  /**\n   * Maximum width for horizontal bars\n   */\n  @Prop() maxWidth: number = 200;\n\n  @State() tooltipVisible: boolean = false;\n  @State() tooltipX: number = 0;\n  @State() tooltipY: number = 0;\n  @State() tooltipHeader: string = '';\n  @State() tooltipItems: TooltipItem[] = [];\n  @State() tooltipTotal: string = '';\n  @State() showTooltipTotal: boolean = false;\n\n  private processData(): ProcessedBar[] {\n    if (!this.data.series?.length || !this.data.series[0].values.length) {\n      return [];\n    }\n\n    const bars: ProcessedBar[] = [];\n\n    if (this.type === 'simple') {\n      const values = this.data.series[0].values;\n      const maxValue = Math.max(...values);\n\n      for (let i = 0; i < values.length; i++) {\n        const value = values[i] || 0;\n        const segments: BarSegment[] = [];\n\n        if (value > 0) {\n          const height = (value / maxValue) * this.maxHeight;\n          const width = (value / maxValue) * this.maxWidth;\n          segments.push({\n            value,\n            height,\n            width,\n            color: DEFAULT_COLORS[i % DEFAULT_COLORS.length],\n            seriesName: this.data.categories?.[i] || `Bar ${i + 1}`,\n          });\n        }\n\n        bars.push({\n          segments,\n          totalValue: value,\n          category: this.data.categories?.[i],\n        });\n      }\n    } else {\n      const numBars = this.data.series[0].values.length;\n      const maxTotal = Math.max(\n        ...Array.from({ length: numBars }, (_, i) =>\n          this.data.series.reduce((sum, series) => sum + (series.values[i] || 0), 0)\n        )\n      );\n\n      for (let barIndex = 0; barIndex < numBars; barIndex++) {\n        const segments: BarSegment[] = [];\n        let totalValue = 0;\n\n        for (const series of this.data.series) {\n          const value = series.values[barIndex] || 0;\n          totalValue += value;\n\n          if (value > 0) {\n            const height = (value / maxTotal) * this.maxHeight;\n            const width = (value / maxTotal) * this.maxWidth;\n            segments.push({\n              value,\n              height,\n              width,\n              color: series.color || '#64748b',\n              seriesName: series.name,\n            });\n          }\n        }\n\n        bars.push({\n          segments,\n          totalValue,\n          category: this.data.categories?.[barIndex],\n        });\n      }\n    }\n\n    return bars;\n  }\n\n  private handleColumnHover = (event: MouseEvent, bar: ProcessedBar, columnIndex: number) => {\n    this.tooltipVisible = true;\n    this.tooltipX = event.clientX;\n    this.tooltipY = event.clientY;\n    this.tooltipHeader = bar.category || `Column ${columnIndex + 1}`;\n\n    const items: TooltipItem[] = [];\n    bar.segments.forEach((segment) => {\n      if (segment.seriesName && segment.value > 0) {\n        items.push({\n          color: segment.color,\n          label: segment.seriesName,\n          value: segment.value.toString(),\n        });\n      }\n    });\n\n    this.tooltipItems = items;\n    this.tooltipTotal = bar.totalValue.toString();\n    this.showTooltipTotal = items.length > 1;\n  };\n\n  private handleColumnMove = (event: MouseEvent) => {\n    if (this.tooltipVisible) {\n      this.tooltipX = event.clientX;\n      this.tooltipY = event.clientY;\n    }\n  };\n\n  private handleColumnLeave = () => {\n    this.tooltipVisible = false;\n  };\n\n  render() {\n    const processedData = this.processData();\n\n    return (\n      <Host>\n        <div\n          class={{\n            'bar-chart': true,\n            [this.type]: true,\n            [this.orientation]: true,\n            'bar-chart-animated': this.animated,\n          }}\n        >\n          {this.orientation === 'vertical' ? (\n            <div class=\"vertical-container\">\n              {processedData.map((bar, i) => (\n                <div\n                  key={i}\n                  class=\"bar-column vertical\"\n                  onMouseEnter={(e) => this.handleColumnHover(e, bar, i)}\n                  onMouseMove={this.handleColumnMove}\n                  onMouseLeave={this.handleColumnLeave}\n                >\n                  {bar.segments.map((segment, segIndex) => (\n                    <div\n                      key={segIndex}\n                      class=\"bar-segment vertical\"\n                      style={{\n                        height: `${segment.height}px`,\n                        backgroundColor: segment.color,\n                      }}\n                    />\n                  ))}\n                </div>\n              ))}\n            </div>\n          ) : (\n            <div class=\"horizontal-container\">\n              {processedData.map((bar, i) => (\n                <div\n                  key={i}\n                  class=\"bar-row horizontal\"\n                  onMouseEnter={(e) => this.handleColumnHover(e, bar, i)}\n                  onMouseMove={this.handleColumnMove}\n                  onMouseLeave={this.handleColumnLeave}\n                >\n                  {bar.segments.map((segment, segIndex) => (\n                    <div\n                      key={segIndex}\n                      class=\"bar-segment horizontal\"\n                      style={{\n                        width: `${(segment.value / bar.totalValue) * 100}%`,\n                        backgroundColor: segment.color,\n                      }}\n                    />\n                  ))}\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n\n        <bh-chart-tooltip\n          visible={this.tooltipVisible}\n          x={this.tooltipX}\n          y={this.tooltipY}\n          header={this.tooltipHeader}\n          items={this.tooltipItems}\n          total={this.tooltipTotal}\n          showTotal={this.showTooltipTotal}\n        />\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

package/cjs/bh-button-BKVcf-nK.js

@@ -0,0 +1,117 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhButtonCss = ":host{display:inline-block}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);font-family:var(--font-inter);font-weight:var(--weight-medium);border:1px solid transparent;cursor:pointer;text-align:center;white-space:nowrap;transition:all 0.2s ease-in-out;text-decoration:none;outline:none}.btn-xs{padding:0 var(--spacing-lg);height:24px;border-radius:var(--radius-md);font-size:var(--text-sm-size)}.btn-sm{padding:0 var(--spacing-xl);height:32px;border-radius:var(--radius-md);font-size:var(--text-sm-size)}.btn-md{padding:0 var(--spacing-xl);height:40px;border-radius:var(--radius-md);font-size:var(--text-sm-size)}.btn-lg{padding:0 var(--spacing-xl);height:48px;border-radius:var(--radius-md);gap:var(--spacing-sm);font-size:var(--text-md-size)}.btn-xs.btn-icon-leading{padding-left:var(\n    --icon-compensation-xs-btn,\n    calc(var(--spacing-lg) - var(--spacing-xs))\n  )}.btn-sm.btn-icon-leading{padding-left:var(\n    --icon-compensation-sm-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  )}.btn-md.btn-icon-leading{padding-left:var(\n    --icon-compensation-md-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  )}.btn-lg.btn-icon-leading{padding-left:var(\n    --icon-compensation-lg-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  )}.btn-xs.btn-icon-trailing{padding-right:var(\n    --icon-compensation-xs-btn,\n    calc(var(--spacing-lg) - var(--spacing-xs))\n  )}.btn-sm.btn-icon-trailing{padding-right:var(\n    --icon-compensation-sm-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  )}.btn-md.btn-icon-trailing{padding-right:var(\n    --icon-compensation-md-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  )}.btn-lg.btn-icon-trailing{padding-right:var(\n    --icon-compensation-lg-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  )}.btn-primary.btn-default{background-color:var(--color-brand-600);color:var(--color-white);border-color:var(--color-brand-600)}.btn-secondary.btn-default{background-color:var(--color-white);color:var(--color-neutral-600);border-color:var(--color-neutral-300)}.btn-tertiary.btn-default{background-color:transparent;color:var(--color-neutral-600);border-color:transparent}.btn-quaternary.btn-default{background-color:transparent;color:var(--color-brand-600);border-color:transparent}.btn-primary.btn-destructive{background-color:var(--color-error-600);color:var(--color-white);border-color:var(--color-error-600)}.btn-secondary.btn-destructive{background-color:var(--color-white);color:var(--color-error-600);border-color:var(--color-error-300)}.btn-tertiary.btn-destructive{background-color:transparent;color:var(--color-error-600);border-color:transparent}.btn-quaternary.btn-destructive{background-color:transparent;color:var(--color-error-600);border-color:transparent}.btn-primary.btn-success{background-color:var(--color-success-600);color:var(--color-white);border-color:var(--color-success-600)}.btn-secondary.btn-success{background-color:var(--color-white);color:var(--color-success-600);border-color:var(--color-success-300)}.btn-tertiary.btn-success{background-color:transparent;color:var(--color-success-600);border-color:transparent}.btn-quaternary.btn-success{background-color:transparent;color:var(--color-success-600);border-color:transparent}.btn-primary.btn-default:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-brand-700);border-color:var(--color-brand-700)}.btn-secondary.btn-default:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-neutral-50);color:var(--color-neutral-700);border-color:var(--color-neutral-400)}.btn-tertiary.btn-default:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-neutral-100);color:var(--color-neutral-700)}.btn-quaternary.btn-default:hover:not(:disabled):not(.btn-disabled){color:var(--color-brand-700)}.btn-primary.btn-destructive:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-error-700);border-color:var(--color-error-700)}.btn-secondary.btn-destructive:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-error-50);border-color:var(--color-error-300)}.btn-tertiary.btn-destructive:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-error-50)}.btn-quaternary.btn-destructive:hover:not(:disabled):not(.btn-disabled){color:var(--color-error-700)}.btn-primary.btn-success:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-success-700);border-color:var(--color-success-700)}.btn-secondary.btn-success:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-success-50);border-color:var(--color-success-300)}.btn-tertiary.btn-success:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-success-50)}.btn-quaternary.btn-success:hover:not(:disabled):not(.btn-disabled){color:var(--color-success-700)}.btn-primary.btn-default:active:not(:disabled):not(.btn-disabled){background-color:var(--color-brand-800);border-color:var(--color-brand-800)}.btn-secondary.btn-default:active:not(:disabled):not(.btn-disabled){background-color:var(--color-neutral-100);border-color:var(--color-neutral-500)}.btn-tertiary.btn-default:active:not(:disabled):not(.btn-disabled){background-color:var(--color-neutral-100)}.btn-quaternary.btn-default:active:not(:disabled):not(.btn-disabled){color:var(--color-brand-800)}.btn-primary.btn-destructive:active:not(:disabled):not(.btn-disabled){background-color:var(--color-error-800);border-color:var(--color-error-800)}.btn-secondary.btn-destructive:active:not(:disabled):not(.btn-disabled){background-color:var(--color-error-100);border-color:var(--color-error-400)}.btn-tertiary.btn-destructive:active:not(:disabled):not(.btn-disabled){background-color:var(--color-error-100)}.btn-quaternary.btn-destructive:active:not(:disabled):not(.btn-disabled){color:var(--color-error-800)}.btn-primary.btn-success:active:not(:disabled):not(.btn-disabled){background-color:var(--color-success-800);border-color:var(--color-success-800)}.btn-secondary.btn-success:active:not(:disabled):not(.btn-disabled){background-color:var(--color-success-100);border-color:var(--color-success-400)}.btn-tertiary.btn-success:active:not(:disabled):not(.btn-disabled){background-color:var(--color-success-100)}.btn-quaternary.btn-success:active:not(:disabled):not(.btn-disabled){color:var(--color-success-800)}.btn.btn-default:focus,.btn.btn-default:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:2px}.btn.btn-destructive:focus,.btn.btn-destructive:focus-visible{outline:2px solid var(--color-error-500);outline-offset:2px}.btn.btn-success:focus,.btn.btn-success:focus-visible{outline:2px solid var(--color-success-500);outline-offset:2px}.btn:disabled,.btn-disabled{cursor:not-allowed;pointer-events:none}.btn-primary:disabled,.btn-primary.btn-disabled{background-color:var(--color-neutral-200);color:var(--color-neutral-400);border-color:var(--color-neutral-200)}.btn-secondary:disabled,.btn-secondary.btn-disabled,.btn-tertiary:disabled,.btn-tertiary.btn-disabled,.btn-quaternary:disabled,.btn-quaternary.btn-disabled{opacity:0.5}.btn-loading{cursor:wait;pointer-events:none}.btn-loading .btn-label{opacity:0.7}.btn-label{display:inline-block;line-height:inherit}.btn-quaternary .btn-label{text-decoration:underline}.btn-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.btn-icon-material{line-height:1;vertical-align:middle;color:inherit !important}.btn-xs .btn-icon-material{font-size:var(--text-sm-size)}.btn-sm .btn-icon-material{font-size:var(--text-md-size)}.btn-md .btn-icon-material{font-size:var(--text-lg-size)}.btn-lg .btn-icon-material{font-size:var(--text-lg-size)}.btn-icon-only{padding:0}.btn-icon-only.btn-xs{width:24px;height:24px}.btn-icon-only.btn-sm{width:32px;height:32px}.btn-icon-only.btn-md{width:40px;height:40px}.btn-icon-only.btn-lg{width:48px;height:48px}.btn-icon-only .btn-icon-material{margin:0}.btn-loading-icon{line-height:1;vertical-align:middle;color:inherit;animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.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)}.icon-md{width:20px;height:20px}.icon-lg{width:24px;height:24px}";
+
+const BhButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhClick = index.createEvent(this, "bhClick");
+    }
+    /**
+     * The visual hierarchy of the button
+     */
+    hierarchy = 'primary';
+    /**
+     * The kind/semantic meaning of the button
+     */
+    kind = 'default';
+    /**
+     * Icon position relative to the label
+     */
+    icon = 'none';
+    /**
+     * The size of the button
+     */
+    size = 'md';
+    /**
+     * Fallback text label (used only if no slot content is provided)
+     */
+    label;
+    /**
+     * Material Symbols icon name (e.g., 'add', 'edit', 'delete')
+     */
+    iconName;
+    /**
+     * Whether the button is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the button is in a loading state
+     */
+    loading = false;
+    /**
+     * The type of button for form submission
+     * - 'button': No form submission (default)
+     * - 'submit': Submits the form
+     * - 'reset': Resets the form
+     */
+    type = 'button';
+    /**
+     * Emitted when the button is clicked
+     */
+    bhClick;
+    handleClick = (event) => {
+        if (!this.disabled && !this.loading) {
+            this.bhClick.emit(event);
+        }
+    };
+    getIconSizeClass() {
+        switch (this.size) {
+            case 'sm':
+            case 'md':
+                return 'icon-md';
+            case 'lg':
+                return 'icon-lg';
+            default:
+                return 'icon-md';
+        }
+    }
+    getTextSizeClass() {
+        switch (this.size) {
+            case 'sm':
+            case 'md':
+                return 'text-sm';
+            case 'lg':
+                return 'text-md';
+            default:
+                return 'text-sm';
+        }
+    }
+    getLoaderSize() {
+        switch (this.size) {
+            case 'xs':
+            case 'sm':
+                return 'sm';
+            default:
+                return 'sm';
+        }
+    }
+    getLoaderVariant() {
+        // Primary buttons (all kinds) have dark background, so use white spinner
+        return this.hierarchy === 'primary' ? 'white' : 'default';
+    }
+    render() {
+        const showLabel = this.icon !== 'only';
+        const showLeadingIcon = this.icon === 'leading' && (this.iconName || this.loading);
+        const showTrailingIcon = this.icon === 'trailing' && this.iconName && !this.loading;
+        const showOnlyIcon = this.icon === 'only' && (this.iconName || this.loading);
+        const buttonClasses = {
+            btn: true,
+            [`btn-${this.hierarchy}`]: true,
+            [`btn-${this.kind}`]: true,
+            [`btn-${this.size}`]: true,
+            [`btn-icon-${this.icon}`]: true,
+            'btn-disabled': this.disabled,
+            'btn-loading': this.loading,
+        };
+        return (index.h("button", { key: 'f2f54633cb42a7fea15c38aa8bc24be085320dc9', type: this.type, class: buttonClasses, disabled: this.disabled, onClick: this.handleClick, part: "button" }, showLeadingIcon && (index.h("span", { key: '682a4704e4f874b4f3d051aab4738829cbd47778', class: `btn-icon ${this.getIconSizeClass()}` }, this.loading ? (index.h("bh-loader-spinner", { size: this.getLoaderSize(), variant: this.getLoaderVariant() })) : (index.h("span", { class: "btn-icon-material material-symbols-outlined" }, this.iconName)))), showOnlyIcon && (index.h("span", { key: '767e0ee41843e2ef8b3a45ec82f15602848ad751', class: `btn-icon ${this.getIconSizeClass()}` }, this.loading ? (index.h("bh-loader-spinner", { size: this.getLoaderSize(), variant: this.getLoaderVariant() })) : (index.h("span", { class: "btn-icon-material material-symbols-outlined" }, this.iconName)))), showLabel && (index.h("span", { key: 'bb2ddbcf7eb35dd5af688a6fc6d61d07f67d90ba', class: `btn-label ${this.getTextSizeClass()}` }, index.h("slot", { key: '010690eeab4cea1205d2ebca5cc2e1bfc95048c7' }, this.label))), showTrailingIcon && (index.h("span", { key: '9de8df1ab10e9035affbd766fea95896762e2bca', class: `btn-icon ${this.getIconSizeClass()}` }, index.h("span", { key: 'b50370274c0513a7885eae4bf40235c3e7e245aa', class: "btn-icon-material material-symbols-outlined" }, this.iconName)))));
+    }
+};
+BhButton.style = bhButtonCss;
+
+exports.BhButton = BhButton;
+//# sourceMappingURL=bh-button-BKVcf-nK.js.map
+
+//# sourceMappingURL=bh-button-BKVcf-nK.js.map

package/cjs/bh-button-BKVcf-nK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-button-BKVcf-nK.js","sources":["src/components/bh-button/bh-button.css?tag=bh-button&encapsulation=shadow","src/components/bh-button/bh-button.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-BUTTON COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n/* Base Button */\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-xs);\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  border: 1px solid transparent;\n  cursor: pointer;\n  text-align: center;\n  white-space: nowrap;\n  transition: all 0.2s ease-in-out;\n  text-decoration: none;\n  outline: none;\n}\n\n/* Button Sizes */\n.btn-xs {\n  padding: 0 var(--spacing-lg);\n  height: 24px;\n  border-radius: var(--radius-md);\n  font-size: var(--text-sm-size);\n}\n\n.btn-sm {\n  padding: 0 var(--spacing-xl);\n  height: 32px;\n  border-radius: var(--radius-md);\n  font-size: var(--text-sm-size);\n}\n\n.btn-md {\n  padding: 0 var(--spacing-xl);\n  height: 40px;\n  border-radius: var(--radius-md);\n  font-size: var(--text-sm-size);\n}\n\n.btn-lg {\n  padding: 0 var(--spacing-xl);\n  height: 48px;\n  border-radius: var(--radius-md);\n  gap: var(--spacing-sm);\n  font-size: var(--text-md-size);\n}\n\n/* Icon Padding Compensation */\n.btn-xs.btn-icon-leading {\n  padding-left: var(\n    --icon-compensation-xs-btn,\n    calc(var(--spacing-lg) - var(--spacing-xs))\n  );\n}\n\n.btn-sm.btn-icon-leading {\n  padding-left: var(\n    --icon-compensation-sm-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  );\n}\n\n.btn-md.btn-icon-leading {\n  padding-left: var(\n    --icon-compensation-md-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  );\n}\n\n.btn-lg.btn-icon-leading {\n  padding-left: var(\n    --icon-compensation-lg-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  );\n}\n\n.btn-xs.btn-icon-trailing {\n  padding-right: var(\n    --icon-compensation-xs-btn,\n    calc(var(--spacing-lg) - var(--spacing-xs))\n  );\n}\n\n.btn-sm.btn-icon-trailing {\n  padding-right: var(\n    --icon-compensation-sm-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  );\n}\n\n.btn-md.btn-icon-trailing {\n  padding-right: var(\n    --icon-compensation-md-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  );\n}\n\n.btn-lg.btn-icon-trailing {\n  padding-right: var(\n    --icon-compensation-lg-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  );\n}\n\n/* Button Hierarchies - Default Kind */\n.btn-primary.btn-default {\n  background-color: var(--color-brand-600);\n  color: var(--color-white);\n  border-color: var(--color-brand-600);\n}\n\n.btn-secondary.btn-default {\n  background-color: var(--color-white);\n  color: var(--color-neutral-600);\n  border-color: var(--color-neutral-300);\n}\n\n.btn-tertiary.btn-default {\n  background-color: transparent;\n  color: var(--color-neutral-600);\n  border-color: transparent;\n}\n\n.btn-quaternary.btn-default {\n  background-color: transparent;\n  color: var(--color-brand-600);\n  border-color: transparent;\n}\n\n/* Button Hierarchies - Destructive Kind */\n.btn-primary.btn-destructive {\n  background-color: var(--color-error-600);\n  color: var(--color-white);\n  border-color: var(--color-error-600);\n}\n\n.btn-secondary.btn-destructive {\n  background-color: var(--color-white);\n  color: var(--color-error-600);\n  border-color: var(--color-error-300);\n}\n\n.btn-tertiary.btn-destructive {\n  background-color: transparent;\n  color: var(--color-error-600);\n  border-color: transparent;\n}\n\n.btn-quaternary.btn-destructive {\n  background-color: transparent;\n  color: var(--color-error-600);\n  border-color: transparent;\n}\n\n/* Button Hierarchies - Success Kind */\n.btn-primary.btn-success {\n  background-color: var(--color-success-600);\n  color: var(--color-white);\n  border-color: var(--color-success-600);\n}\n\n.btn-secondary.btn-success {\n  background-color: var(--color-white);\n  color: var(--color-success-600);\n  border-color: var(--color-success-300);\n}\n\n.btn-tertiary.btn-success {\n  background-color: transparent;\n  color: var(--color-success-600);\n  border-color: transparent;\n}\n\n.btn-quaternary.btn-success {\n  background-color: transparent;\n  color: var(--color-success-600);\n  border-color: transparent;\n}\n\n/* Hover States - Default Kind */\n.btn-primary.btn-default:hover:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-brand-700);\n  border-color: var(--color-brand-700);\n}\n\n.btn-secondary.btn-default:hover:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-neutral-50);\n  color: var(--color-neutral-700);\n  border-color: var(--color-neutral-400);\n}\n\n.btn-tertiary.btn-default:hover:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-neutral-100);\n  color: var(--color-neutral-700);\n}\n\n.btn-quaternary.btn-default:hover:not(:disabled):not(.btn-disabled) {\n  color: var(--color-brand-700);\n}\n\n/* Hover States - Destructive Kind */\n.btn-primary.btn-destructive:hover:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-error-700);\n  border-color: var(--color-error-700);\n}\n\n.btn-secondary.btn-destructive:hover:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-error-50);\n  border-color: var(--color-error-300);\n}\n\n.btn-tertiary.btn-destructive:hover:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-error-50);\n}\n\n.btn-quaternary.btn-destructive:hover:not(:disabled):not(.btn-disabled) {\n  color: var(--color-error-700);\n}\n\n/* Hover States - Success Kind */\n.btn-primary.btn-success:hover:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-success-700);\n  border-color: var(--color-success-700);\n}\n\n.btn-secondary.btn-success:hover:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-success-50);\n  border-color: var(--color-success-300);\n}\n\n.btn-tertiary.btn-success:hover:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-success-50);\n}\n\n.btn-quaternary.btn-success:hover:not(:disabled):not(.btn-disabled) {\n  color: var(--color-success-700);\n}\n\n/* Active States - Default Kind */\n.btn-primary.btn-default:active:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-brand-800);\n  border-color: var(--color-brand-800);\n}\n\n.btn-secondary.btn-default:active:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-neutral-100);\n  border-color: var(--color-neutral-500);\n}\n\n.btn-tertiary.btn-default:active:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-neutral-100);\n}\n\n.btn-quaternary.btn-default:active:not(:disabled):not(.btn-disabled) {\n  color: var(--color-brand-800);\n}\n\n/* Active States - Destructive Kind */\n.btn-primary.btn-destructive:active:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-error-800);\n  border-color: var(--color-error-800);\n}\n\n.btn-secondary.btn-destructive:active:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-error-100);\n  border-color: var(--color-error-400);\n}\n\n.btn-tertiary.btn-destructive:active:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-error-100);\n}\n\n.btn-quaternary.btn-destructive:active:not(:disabled):not(.btn-disabled) {\n  color: var(--color-error-800);\n}\n\n/* Active States - Success Kind */\n.btn-primary.btn-success:active:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-success-800);\n  border-color: var(--color-success-800);\n}\n\n.btn-secondary.btn-success:active:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-success-100);\n  border-color: var(--color-success-400);\n}\n\n.btn-tertiary.btn-success:active:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-success-100);\n}\n\n.btn-quaternary.btn-success:active:not(:disabled):not(.btn-disabled) {\n  color: var(--color-success-800);\n}\n\n/* Focus State - Default Kind */\n.btn.btn-default:focus,\n.btn.btn-default:focus-visible {\n  outline: 2px solid var(--color-brand-500);\n  outline-offset: 2px;\n}\n\n/* Focus State - Destructive Kind */\n.btn.btn-destructive:focus,\n.btn.btn-destructive:focus-visible {\n  outline: 2px solid var(--color-error-500);\n  outline-offset: 2px;\n}\n\n/* Focus State - Success Kind */\n.btn.btn-success:focus,\n.btn.btn-success:focus-visible {\n  outline: 2px solid var(--color-success-500);\n  outline-offset: 2px;\n}\n\n/* Disabled States */\n.btn:disabled,\n.btn-disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.btn-primary:disabled,\n.btn-primary.btn-disabled {\n  background-color: var(--color-neutral-200);\n  color: var(--color-neutral-400);\n  border-color: var(--color-neutral-200);\n}\n\n.btn-secondary:disabled,\n.btn-secondary.btn-disabled,\n.btn-tertiary:disabled,\n.btn-tertiary.btn-disabled,\n.btn-quaternary:disabled,\n.btn-quaternary.btn-disabled {\n  opacity: 0.5;\n}\n\n/* Loading State */\n.btn-loading {\n  cursor: wait;\n  pointer-events: none;\n}\n\n.btn-loading .btn-label {\n  opacity: 0.7;\n}\n\n/* ==========================================================================\n   BUTTON CONTENT ELEMENTS\n   ========================================================================== */\n\n.btn-label {\n  display: inline-block;\n  line-height: inherit;\n}\n\n.btn-quaternary .btn-label {\n  text-decoration: underline;\n}\n\n/* Icons */\n.btn-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.btn-icon-material {\n  line-height: 1;\n  vertical-align: middle;\n  color: inherit !important;\n}\n\n.btn-xs .btn-icon-material {\n  font-size: var(--text-sm-size);\n}\n\n.btn-sm .btn-icon-material {\n  font-size: var(--text-md-size);\n}\n\n.btn-md .btn-icon-material {\n  font-size: var(--text-lg-size);\n}\n\n.btn-lg .btn-icon-material {\n  font-size: var(--text-lg-size);\n}\n\n/* Icon-Only Buttons */\n.btn-icon-only {\n  padding: 0;\n}\n\n.btn-icon-only.btn-xs {\n  width: 24px;\n  height: 24px;\n}\n\n.btn-icon-only.btn-sm {\n  width: 32px;\n  height: 32px;\n}\n\n.btn-icon-only.btn-md {\n  width: 40px;\n  height: 40px;\n}\n\n.btn-icon-only.btn-lg {\n  width: 48px;\n  height: 48px;\n}\n\n.btn-icon-only .btn-icon-material {\n  margin: 0;\n}\n\n/* Loading Spinner */\n.btn-loading-icon {\n  line-height: 1;\n  vertical-align: middle;\n  color: inherit;\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Text size utilities */\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/* Icon size utilities */\n.icon-md {\n  width: 20px;\n  height: 20px;\n}\n\n.icon-lg {\n  width: 24px;\n  height: 24px;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type ButtonHierarchy =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary';\nexport type ButtonIconPosition = 'none' | 'leading' | 'trailing' | 'only';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type ButtonKind = 'default' | 'destructive' | 'success';\nexport type ButtonType = 'button' | 'submit' | 'reset';\n\n@Component({\n  tag: 'bh-button',\n  styleUrl: 'bh-button.css',\n  shadow: true,\n})\nexport class BhButton {\n  /**\n   * The visual hierarchy of the button\n   */\n  @Prop() hierarchy: ButtonHierarchy = 'primary';\n\n  /**\n   * The kind/semantic meaning of the button\n   */\n  @Prop() kind: ButtonKind = 'default';\n\n  /**\n   * Icon position relative to the label\n   */\n  @Prop() icon: ButtonIconPosition = 'none';\n\n  /**\n   * The size of the button\n   */\n  @Prop() size: ButtonSize = 'md';\n\n  /**\n   * Fallback text label (used only if no slot content is provided)\n   */\n  @Prop() label?: string;\n\n  /**\n   * Material Symbols icon name (e.g., 'add', 'edit', 'delete')\n   */\n  @Prop() iconName?: string;\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the button is in a loading state\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * The type of button for form submission\n   * - 'button': No form submission (default)\n   * - 'submit': Submits the form\n   * - 'reset': Resets the form\n   */\n  @Prop() type: ButtonType = 'button';\n\n  /**\n   * Emitted when the button is clicked\n   */\n  @Event() bhClick!: EventEmitter<MouseEvent>;\n\n  private handleClick = (event: MouseEvent): void => {\n    if (!this.disabled && !this.loading) {\n      this.bhClick.emit(event);\n    }\n  };\n\n  private getIconSizeClass(): string {\n    switch (this.size) {\n      case 'sm':\n      case 'md':\n        return 'icon-md';\n      case 'lg':\n        return 'icon-lg';\n      default:\n        return 'icon-md';\n    }\n  }\n\n  private getTextSizeClass(): string {\n    switch (this.size) {\n      case 'sm':\n      case 'md':\n        return 'text-sm';\n      case 'lg':\n        return 'text-md';\n      default:\n        return 'text-sm';\n    }\n  }\n\n  private getLoaderSize(): 'sm' | 'md' {\n    switch (this.size) {\n      case 'xs':\n      case 'sm':\n        return 'sm';\n      default:\n        return 'sm';\n    }\n  }\n\n  private getLoaderVariant(): 'default' | 'white' {\n    // Primary buttons (all kinds) have dark background, so use white spinner\n    return this.hierarchy === 'primary' ? 'white' : 'default';\n  }\n\n  render() {\n    const showLabel = this.icon !== 'only';\n    const showLeadingIcon =\n      this.icon === 'leading' && (this.iconName || this.loading);\n    const showTrailingIcon =\n      this.icon === 'trailing' && this.iconName && !this.loading;\n    const showOnlyIcon =\n      this.icon === 'only' && (this.iconName || this.loading);\n\n    const buttonClasses = {\n      btn: true,\n      [`btn-${this.hierarchy}`]: true,\n      [`btn-${this.kind}`]: true,\n      [`btn-${this.size}`]: true,\n      [`btn-icon-${this.icon}`]: true,\n      'btn-disabled': this.disabled,\n      'btn-loading': this.loading,\n    };\n\n    return (\n      <button\n        type={this.type}\n        class={buttonClasses}\n        disabled={this.disabled}\n        onClick={this.handleClick}\n        part=\"button\"\n      >\n        {showLeadingIcon && (\n          <span class={`btn-icon ${this.getIconSizeClass()}`}>\n            {this.loading ? (\n              <bh-loader-spinner\n                size={this.getLoaderSize()}\n                variant={this.getLoaderVariant()}\n              ></bh-loader-spinner>\n            ) : (\n              <span class=\"btn-icon-material material-symbols-outlined\">\n                {this.iconName}\n              </span>\n            )}\n          </span>\n        )}\n\n        {showOnlyIcon && (\n          <span class={`btn-icon ${this.getIconSizeClass()}`}>\n            {this.loading ? (\n              <bh-loader-spinner\n                size={this.getLoaderSize()}\n                variant={this.getLoaderVariant()}\n              ></bh-loader-spinner>\n            ) : (\n              <span class=\"btn-icon-material material-symbols-outlined\">\n                {this.iconName}\n              </span>\n            )}\n          </span>\n        )}\n\n        {showLabel && (\n          <span class={`btn-label ${this.getTextSizeClass()}`}>\n            <slot>{this.label}</slot>\n          </span>\n        )}\n\n        {showTrailingIcon && (\n          <span class={`btn-icon ${this.getIconSizeClass()}`}>\n            <span class=\"btn-icon-material material-symbols-outlined\">\n              {this.iconName}\n            </span>\n          </span>\n        )}\n      </button>\n    );\n  }\n}\n"],"names":["h"],"mappings":"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"}

package/cjs/bh-button-icon.cjs.entry.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhButtonIconCss = ":host{display:inline-block;font-family:var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif)}.button-icon{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--radius-md, 8px);cursor:pointer;transition:all 0.2s ease-in-out;font-family:inherit;outline:none;padding:0}.button-icon:focus-visible{box-shadow:0 0 0 2px var(--color-white, #FFFFFF), 0 0 0 4px var(--color-brand-500, #7F56D9)}.button-icon-xs{width:24px;height:24px}.button-icon-xs .icon{font-size:16px}.button-icon-sm{width:32px;height:32px}.button-icon-sm .icon{font-size:18px}.button-icon-md{width:40px;height:40px}.button-icon-md .icon{font-size:20px}.button-icon-lg{width:48px;height:48px}.button-icon-lg .icon{font-size:24px}.button-icon-primary{background:var(--color-brand-600, #6941C6);color:var(--color-white, #FFFFFF)}.button-icon-primary:hover:not(.button-icon-disabled){background:var(--color-brand-700, #5235A8)}.button-icon-primary:active:not(.button-icon-disabled){background:var(--color-brand-800, #42298F)}.button-icon-secondary{background:var(--color-white, #FFFFFF);color:var(--color-neutral-700, #344054);border:1px solid var(--color-neutral-300, #D0D5DD)}.button-icon-secondary:hover:not(.button-icon-disabled){background:var(--color-neutral-50, #F9FAFB);border-color:var(--color-neutral-400, #98A2B3)}.button-icon-secondary:active:not(.button-icon-disabled){background:var(--color-neutral-100, #F2F4F7)}.button-icon-tertiary{background:transparent;color:var(--color-brand-600, #6941C6)}.button-icon-tertiary:hover:not(.button-icon-disabled){background:var(--color-brand-50, #F9F5FF)}.button-icon-tertiary:active:not(.button-icon-disabled){background:var(--color-brand-100, #F4EBFF)}.button-icon-quaternary{background:transparent;color:var(--color-neutral-500, #667085)}.button-icon-quaternary:hover:not(.button-icon-disabled){background:var(--color-neutral-100, #F2F4F7);color:var(--color-neutral-700, #344054)}.button-icon-quaternary:active:not(.button-icon-disabled){background:var(--color-neutral-200, #EAECF0)}.button-icon-disabled{opacity:0.5;cursor:not-allowed}.button-icon-loading{cursor:wait}.loading-spinner{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin 0.8s linear infinite}.button-icon-sm .loading-spinner{width:14px;height:14px}.button-icon-xs .loading-spinner{width:12px;height:12px}.button-icon-lg .loading-spinner{width:20px;height:20px}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.icon{display:flex;align-items:center;justify-content:center}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;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-smoothing:antialiased;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}";
+
+const BhButtonIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhClick = index.createEvent(this, "bhClick");
+    }
+    /**
+     * The visual hierarchy of the button
+     */
+    hierarchy = 'primary';
+    /**
+     * The size of the button
+     */
+    size = 'md';
+    /**
+     * The icon name (Material Symbols)
+     */
+    iconName = 'add';
+    /**
+     * Whether the button is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the button is in loading state
+     */
+    loading = false;
+    /**
+     * The type of button for form submission
+     * - 'button': No form submission (default)
+     * - 'submit': Submits the form
+     * - 'reset': Resets the form
+     */
+    type = 'button';
+    /**
+     * Accessible label for the button
+     */
+    ariaLabel = null;
+    /**
+     * Emitted when the button is clicked
+     */
+    bhClick;
+    handleClick = (event) => {
+        if (!this.disabled && !this.loading) {
+            this.bhClick.emit(event);
+        }
+    };
+    handleKeyDown = (event) => {
+        if ((event.key === 'Enter' || event.key === ' ') &&
+            !this.disabled &&
+            !this.loading) {
+            event.preventDefault();
+            this.bhClick.emit(event);
+        }
+    };
+    render() {
+        const buttonClasses = {
+            'button-icon': true,
+            [`button-icon-${this.hierarchy}`]: true,
+            [`button-icon-${this.size}`]: true,
+            'button-icon-disabled': this.disabled,
+            'button-icon-loading': this.loading,
+        };
+        return (index.h("button", { key: '8c2a2097a2c7bbbb89a541d4fce7bba4c4eac970', type: this.type, class: buttonClasses, disabled: this.disabled, "aria-label": this.ariaLabel || this.iconName, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeyDown, part: "button" }, this.loading ? (index.h("span", { class: "loading-spinner", part: "spinner" })) : (index.h("span", { class: "material-symbols-outlined icon", part: "icon" }, this.iconName))));
+    }
+};
+BhButtonIcon.style = bhButtonIconCss;
+
+exports.bh_button_icon = BhButtonIcon;
+//# sourceMappingURL=bh-button-icon.entry.cjs.js.map

package/cjs/bh-button-icon.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-button-icon.entry.cjs.js","sources":["src/components/bh-button-icon/bh-button-icon.css?tag=bh-button-icon&encapsulation=shadow","src/components/bh-button-icon/bh-button-icon.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  font-family: var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n/* Base Button Icon */\n.button-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: var(--radius-md, 8px);\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n  font-family: inherit;\n  outline: none;\n  padding: 0;\n}\n\n.button-icon:focus-visible {\n  box-shadow: 0 0 0 2px var(--color-white, #FFFFFF), 0 0 0 4px var(--color-brand-500, #7F56D9);\n}\n\n/* Sizes */\n.button-icon-xs {\n  width: 24px;\n  height: 24px;\n}\n\n.button-icon-xs .icon {\n  font-size: 16px;\n}\n\n.button-icon-sm {\n  width: 32px;\n  height: 32px;\n}\n\n.button-icon-sm .icon {\n  font-size: 18px;\n}\n\n.button-icon-md {\n  width: 40px;\n  height: 40px;\n}\n\n.button-icon-md .icon {\n  font-size: 20px;\n}\n\n.button-icon-lg {\n  width: 48px;\n  height: 48px;\n}\n\n.button-icon-lg .icon {\n  font-size: 24px;\n}\n\n/* Primary Hierarchy */\n.button-icon-primary {\n  background: var(--color-brand-600, #6941C6);\n  color: var(--color-white, #FFFFFF);\n}\n\n.button-icon-primary:hover:not(.button-icon-disabled) {\n  background: var(--color-brand-700, #5235A8);\n}\n\n.button-icon-primary:active:not(.button-icon-disabled) {\n  background: var(--color-brand-800, #42298F);\n}\n\n/* Secondary Hierarchy */\n.button-icon-secondary {\n  background: var(--color-white, #FFFFFF);\n  color: var(--color-neutral-700, #344054);\n  border: 1px solid var(--color-neutral-300, #D0D5DD);\n}\n\n.button-icon-secondary:hover:not(.button-icon-disabled) {\n  background: var(--color-neutral-50, #F9FAFB);\n  border-color: var(--color-neutral-400, #98A2B3);\n}\n\n.button-icon-secondary:active:not(.button-icon-disabled) {\n  background: var(--color-neutral-100, #F2F4F7);\n}\n\n/* Tertiary Hierarchy */\n.button-icon-tertiary {\n  background: transparent;\n  color: var(--color-brand-600, #6941C6);\n}\n\n.button-icon-tertiary:hover:not(.button-icon-disabled) {\n  background: var(--color-brand-50, #F9F5FF);\n}\n\n.button-icon-tertiary:active:not(.button-icon-disabled) {\n  background: var(--color-brand-100, #F4EBFF);\n}\n\n/* Quaternary Hierarchy */\n.button-icon-quaternary {\n  background: transparent;\n  color: var(--color-neutral-500, #667085);\n}\n\n.button-icon-quaternary:hover:not(.button-icon-disabled) {\n  background: var(--color-neutral-100, #F2F4F7);\n  color: var(--color-neutral-700, #344054);\n}\n\n.button-icon-quaternary:active:not(.button-icon-disabled) {\n  background: var(--color-neutral-200, #EAECF0);\n}\n\n/* Disabled State */\n.button-icon-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Loading State */\n.button-icon-loading {\n  cursor: wait;\n}\n\n/* Loading Spinner */\n.loading-spinner {\n  width: 16px;\n  height: 16px;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: 50%;\n  animation: spin 0.8s linear infinite;\n}\n\n.button-icon-sm .loading-spinner {\n  width: 14px;\n  height: 14px;\n}\n\n.button-icon-xs .loading-spinner {\n  width: 12px;\n  height: 12px;\n}\n\n.button-icon-lg .loading-spinner {\n  width: 20px;\n  height: 20px;\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Icon */\n.icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Material Symbols */\n.material-symbols-outlined {\n  font-family: 'Material Symbols Outlined';\n  font-weight: normal;\n  font-style: normal;\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  font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type ButtonIconHierarchy =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary';\nexport type ButtonIconSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type ButtonIconType = 'button' | 'submit' | 'reset';\n\n@Component({\n  tag: 'bh-button-icon',\n  styleUrl: 'bh-button-icon.css',\n  shadow: true,\n})\nexport class BhButtonIcon {\n  /**\n   * The visual hierarchy of the button\n   */\n  @Prop() hierarchy: ButtonIconHierarchy = 'primary';\n\n  /**\n   * The size of the button\n   */\n  @Prop() size: ButtonIconSize = 'md';\n\n  /**\n   * The icon name (Material Symbols)\n   */\n  @Prop() iconName: string = 'add';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the button is in loading state\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * The type of button for form submission\n   * - 'button': No form submission (default)\n   * - 'submit': Submits the form\n   * - 'reset': Resets the form\n   */\n  @Prop() type: ButtonIconType = 'button';\n\n  /**\n   * Accessible label for the button\n   */\n  @Prop() ariaLabel: string | null = null;\n\n  /**\n   * Emitted when the button is clicked\n   */\n  @Event() bhClick!: EventEmitter<MouseEvent>;\n\n  private handleClick = (event: MouseEvent): void => {\n    if (!this.disabled && !this.loading) {\n      this.bhClick.emit(event);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (\n      (event.key === 'Enter' || event.key === ' ') &&\n      !this.disabled &&\n      !this.loading\n    ) {\n      event.preventDefault();\n      this.bhClick.emit(event as unknown as MouseEvent);\n    }\n  };\n\n  render() {\n    const buttonClasses = {\n      'button-icon': true,\n      [`button-icon-${this.hierarchy}`]: true,\n      [`button-icon-${this.size}`]: true,\n      'button-icon-disabled': this.disabled,\n      'button-icon-loading': this.loading,\n    };\n\n    return (\n      <button\n        type={this.type}\n        class={buttonClasses}\n        disabled={this.disabled}\n        aria-label={this.ariaLabel || this.iconName}\n        aria-disabled={this.disabled ? 'true' : undefined}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n        part=\"button\"\n      >\n        {this.loading ? (\n          <span class=\"loading-spinner\" part=\"spinner\"></span>\n        ) : (\n          <span class=\"material-symbols-outlined icon\" part=\"icon\">\n            {this.iconName}\n          </span>\n        )}\n      </button>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,+4FAA+4F;;MCe15F,YAAY,GAAA,MAAA;;;;;AACvB;;AAEG;IACK,SAAS,GAAwB,SAAS;AAElD;;AAEG;IACK,IAAI,GAAmB,IAAI;AAEnC;;AAEG;IACK,QAAQ,GAAW,KAAK;AAEhC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,OAAO,GAAY,KAAK;AAEhC;;;;;AAKG;IACK,IAAI,GAAmB,QAAQ;AAEvC;;AAEG;IACK,SAAS,GAAkB,IAAI;AAEvC;;AAEG;AACM,IAAA,OAAO;AAER,IAAA,WAAW,GAAG,CAAC,KAAiB,KAAU;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACnC,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;;AAE5B,KAAC;AAEO,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAU;AACrD,QAAA,IACE,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG;YAC3C,CAAC,IAAI,CAAC,QAAQ;AACd,YAAA,CAAC,IAAI,CAAC,OAAO,EACb;YACA,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAA8B,CAAC;;AAErD,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,CAAC,eAAe,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;AACvC,YAAA,CAAC,eAAe,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAClC,sBAAsB,EAAE,IAAI,CAAC,QAAQ;YACrC,qBAAqB,EAAE,IAAI,CAAC,OAAO;SACpC;QAED,QACEA,OACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,YAAA,EACX,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,EAC5B,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,IAAI,EAAC,QAAQ,EAAA,EAEZ,IAAI,CAAC,OAAO,IACXA,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,SAAS,GAAQ,KAEpDA,kBAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,MAAM,EAAA,EACrD,IAAI,CAAC,QAAQ,CACT,CACR,CACM;;;;;;;"}

package/cjs/bh-button.bh-loader-spinner.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-button.bh-loader-spinner.entry.cjs.js","sources":["src/components/bh-loader-spinner/bh-loader-spinner.css?tag=bh-loader-spinner&encapsulation=shadow","src/components/bh-loader-spinner/bh-loader-spinner.tsx"],"sourcesContent":["/* ==========================================================================\n   LOADER SPINNER COMPONENT - StencilJS\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n/* Overlay styles */\n.loader-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.3);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n}\n\n.loader-overlay-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--spacing-md);\n}\n\n/* Container styles */\n.loader-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--spacing-sm);\n}\n\n.loader-spinner {\n  position: relative;\n  display: inline-block;\n}\n\n/* Message styles */\n.loader-message {\n  color: var(--color-neutral-700);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n  font-weight: var(--weight-medium);\n  text-align: center;\n  margin-top: var(--spacing-xs);\n}\n\n.loader-overlay .loader-message {\n  color: var(--color-white);\n}\n\n/* =========================\n   GRADIENT VARIANT - BellhopOS Sidebar Style\n   ========================= */\n.spinner-gradient {\n  animation: gradient-rotate 2s linear infinite;\n  will-change: transform;\n}\n\n.gradient-svg {\n  display: block;\n  transform-origin: 50% 50%;\n}\n\n.gradient-path {\n  stroke-dasharray: 90, 150;\n  stroke-dashoffset: 0;\n  animation: gradient-dash 1.5s ease-in-out infinite;\n  transform-origin: 50% 50%;\n}\n\n/* Size variations for gradient */\n.size-sm .gradient-svg {\n  width: 20px;\n  height: 20px;\n}\n\n.size-sm .gradient-path {\n  stroke-width: 5;\n}\n\n.size-md .gradient-svg {\n  width: 30px;\n  height: 30px;\n}\n\n.size-md .gradient-path {\n  stroke-width: 5;\n}\n\n.size-lg .gradient-svg {\n  width: 40px;\n  height: 40px;\n}\n\n.size-lg .gradient-path {\n  stroke-width: 5;\n}\n\n.size-xl .gradient-svg {\n  width: 60px;\n  height: 60px;\n}\n\n.size-xl .gradient-path {\n  stroke-width: 6;\n}\n\n@keyframes gradient-rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes gradient-dash {\n  0% {\n    stroke-dasharray: 1, 150;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -35;\n  }\n  100% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -124;\n  }\n}\n\n/* Hover effects - Ultra smooth acceleration */\n.loader-container:hover .spinner-gradient {\n  animation-duration: 1s;\n}\n\n.loader-container:hover .gradient-path {\n  animation-duration: 0.6s;\n}\n\n/* Performance optimizations */\n.spinner-gradient {\n  backface-visibility: hidden;\n  perspective: 1000px;\n}\n\n.gradient-svg {\n  transform: translateZ(0);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type LoaderSize = 'sm' | 'md' | 'lg' | 'xl';\nexport type LoaderVariant = 'default' | 'white';\n\n@Component({\n  tag: 'bh-loader-spinner',\n  styleUrl: 'bh-loader-spinner.css',\n  shadow: true,\n})\nexport class BhLoaderSpinner {\n  /** Loader size */\n  @Prop() size: LoaderSize = 'md';\n\n  /** Loader color variant - use 'white' for dark surfaces like buttons */\n  @Prop() variant: LoaderVariant = 'default';\n\n  /** Whether to show as overlay */\n  @Prop() overlay: boolean = false;\n\n  /** Message to show in overlay mode */\n  @Prop() overlayMessage: string = '';\n\n  /** Whether to show message */\n  @Prop() showMessage: boolean = false;\n\n  /** Message text */\n  @Prop() message: string = 'Loading...';\n\n  private renderSpinner() {\n    const gradientId = this.variant === 'white' ? 'bellhop-gradient-white' : 'bellhop-gradient';\n\n    return (\n      <div class={`loader-spinner variant-${this.variant}`}>\n        <div class=\"spinner-gradient\">\n          <svg class=\"gradient-svg\" viewBox=\"0 0 50 50\">\n            <defs>\n              {this.variant === 'white' ? (\n                <linearGradient\n                  id=\"bellhop-gradient-white\"\n                  x1=\"0%\"\n                  y1=\"0%\"\n                  x2=\"0%\"\n                  y2=\"100%\"\n                >\n                  <stop offset=\"0%\" style={{ stopColor: 'rgba(255, 255, 255, 1)' }} />\n                  <stop offset=\"50%\" style={{ stopColor: 'rgba(255, 255, 255, 0.8)' }} />\n                  <stop offset=\"100%\" style={{ stopColor: 'rgba(255, 255, 255, 0.5)' }} />\n                </linearGradient>\n              ) : (\n                <linearGradient\n                  id=\"bellhop-gradient\"\n                  x1=\"0%\"\n                  y1=\"0%\"\n                  x2=\"0%\"\n                  y2=\"100%\"\n                >\n                  <stop offset=\"0%\" style={{ stopColor: 'var(--color-accent-300)' }} />\n                  <stop offset=\"51%\" style={{ stopColor: 'var(--color-brand-400)' }} />\n                  <stop offset=\"100%\" style={{ stopColor: 'var(--color-brand-600)' }} />\n                </linearGradient>\n              )}\n            </defs>\n            <circle\n              class=\"gradient-path\"\n              cx=\"25\"\n              cy=\"25\"\n              r=\"20\"\n              fill=\"none\"\n              stroke={`url(#${gradientId})`}\n              stroke-width=\"4\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMessage(isOverlay: boolean) {\n    const shouldShowMessage = isOverlay\n      ? (this.showMessage || this.overlayMessage)\n      : this.showMessage;\n\n    if (!shouldShowMessage) return null;\n\n    return (\n      <div class=\"loader-message\">\n        {isOverlay ? (this.overlayMessage || this.message) : this.message}\n      </div>\n    );\n  }\n\n  render() {\n    if (this.overlay) {\n      return (\n        <div class=\"loader-overlay\">\n          <div class=\"loader-overlay-content\">\n            <div class={`loader-container size-${this.size}`}>\n              {this.renderSpinner()}\n            </div>\n            {this.renderMessage(true)}\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div class={`loader-container size-${this.size}`}>\n        {this.renderSpinner()}\n        {this.renderMessage(false)}\n      </div>\n    );\n  }\n}\n"],"names":["h"],"mappings":"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"}

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

@@ -0,0 +1,47 @@
+'use strict';
+
+var bhButton = require('./bh-button-BKVcf-nK.js');
+var index = require('./index-tZqSQc8E.js');
+
+const bhLoaderSpinnerCss = ":host{display:inline-block}.loader-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.3);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999}.loader-overlay-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.loader-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.loader-spinner{position:relative;display:inline-block}.loader-message{color:var(--color-neutral-700);font-size:var(--text-sm-size);line-height:var(--text-sm-line);font-weight:var(--weight-medium);text-align:center;margin-top:var(--spacing-xs)}.loader-overlay .loader-message{color:var(--color-white)}.spinner-gradient{animation:gradient-rotate 2s linear infinite;will-change:transform}.gradient-svg{display:block;transform-origin:50% 50%}.gradient-path{stroke-dasharray:90, 150;stroke-dashoffset:0;animation:gradient-dash 1.5s ease-in-out infinite;transform-origin:50% 50%}.size-sm .gradient-svg{width:20px;height:20px}.size-sm .gradient-path{stroke-width:5}.size-md .gradient-svg{width:30px;height:30px}.size-md .gradient-path{stroke-width:5}.size-lg .gradient-svg{width:40px;height:40px}.size-lg .gradient-path{stroke-width:5}.size-xl .gradient-svg{width:60px;height:60px}.size-xl .gradient-path{stroke-width:6}@keyframes gradient-rotate{100%{transform:rotate(360deg)}}@keyframes gradient-dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}.loader-container:hover .spinner-gradient{animation-duration:1s}.loader-container:hover .gradient-path{animation-duration:0.6s}.spinner-gradient{backface-visibility:hidden;perspective:1000px}.gradient-svg{transform:translateZ(0)}";
+
+const BhLoaderSpinner = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Loader size */
+    size = 'md';
+    /** Loader color variant - use 'white' for dark surfaces like buttons */
+    variant = 'default';
+    /** Whether to show as overlay */
+    overlay = false;
+    /** Message to show in overlay mode */
+    overlayMessage = '';
+    /** Whether to show message */
+    showMessage = false;
+    /** Message text */
+    message = 'Loading...';
+    renderSpinner() {
+        const gradientId = this.variant === 'white' ? 'bellhop-gradient-white' : 'bellhop-gradient';
+        return (index.h("div", { class: `loader-spinner variant-${this.variant}` }, index.h("div", { class: "spinner-gradient" }, index.h("svg", { class: "gradient-svg", viewBox: "0 0 50 50" }, index.h("defs", null, this.variant === 'white' ? (index.h("linearGradient", { id: "bellhop-gradient-white", x1: "0%", y1: "0%", x2: "0%", y2: "100%" }, index.h("stop", { offset: "0%", style: { stopColor: 'rgba(255, 255, 255, 1)' } }), index.h("stop", { offset: "50%", style: { stopColor: 'rgba(255, 255, 255, 0.8)' } }), index.h("stop", { offset: "100%", style: { stopColor: 'rgba(255, 255, 255, 0.5)' } }))) : (index.h("linearGradient", { id: "bellhop-gradient", x1: "0%", y1: "0%", x2: "0%", y2: "100%" }, index.h("stop", { offset: "0%", style: { stopColor: 'var(--color-accent-300)' } }), index.h("stop", { offset: "51%", style: { stopColor: 'var(--color-brand-400)' } }), index.h("stop", { offset: "100%", style: { stopColor: 'var(--color-brand-600)' } })))), index.h("circle", { class: "gradient-path", cx: "25", cy: "25", r: "20", fill: "none", stroke: `url(#${gradientId})`, "stroke-width": "4", "stroke-linecap": "round" })))));
+    }
+    renderMessage(isOverlay) {
+        const shouldShowMessage = isOverlay
+            ? (this.showMessage || this.overlayMessage)
+            : this.showMessage;
+        if (!shouldShowMessage)
+            return null;
+        return (index.h("div", { class: "loader-message" }, isOverlay ? (this.overlayMessage || this.message) : this.message));
+    }
+    render() {
+        if (this.overlay) {
+            return (index.h("div", { class: "loader-overlay" }, index.h("div", { class: "loader-overlay-content" }, index.h("div", { class: `loader-container size-${this.size}` }, this.renderSpinner()), this.renderMessage(true))));
+        }
+        return (index.h("div", { class: `loader-container size-${this.size}` }, this.renderSpinner(), this.renderMessage(false)));
+    }
+};
+BhLoaderSpinner.style = bhLoaderSpinnerCss;
+
+exports.bh_button = bhButton.BhButton;
+exports.bh_loader_spinner = BhLoaderSpinner;
+//# sourceMappingURL=bh-button.bh-loader-spinner.entry.cjs.js.map