@actabldesign/bellhop-core 0.0.3 → 0.0.4

package/dist/components/p-C97e5uAI.js.map

@@ -0,0 +1 @@
+{"file":"p-C97e5uAI.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,m1EAAm1E;;MCa/1E,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;;;;;AACxB;;AAEG;IACK,KAAK,GAA8B,EAAE;AAE7C;;AAEG;IACK,SAAS,GAAW,eAAe;AAE3C;;AAEG;IACK,QAAQ,GAAY,IAAI;AAEhC;;AAEG;IACK,eAAe,GAAW,CAAC;AAEnC;;AAEG;AACM,IAAA,WAAW;AAEpB;;AAEG;AACM,IAAA,UAAU;AAEnB,IAAA,IAAY,WAAW,GAAA;AACrB,QAAA,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;AAClC,YAAA,IAAI;gBACF,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;;AAC7B,YAAA,MAAM;AACN,gBAAA,OAAO,EAAE;;;AAGb,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE;;AAGzB,IAAA,IAAY,WAAW,GAAA;AACrB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW;QAC9B,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,eAAe,EAAE;YAClD,OAAO;AACL,gBAAA,YAAY,EAAE,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE;AACrC,gBAAA,YAAY,EAAE,KAAK;AACnB,gBAAA,cAAc,EAAE,EAAE;aACnB;;aACI;AACL,YAAA,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC;YAC1D,OAAO;gBACL,YAAY,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC;AACtC,gBAAA,YAAY,EAAE,IAAI;AAClB,gBAAA,cAAc,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC;aAC5D;;;AAIG,IAAA,eAAe,CAAC,IAAoB,EAAA;QAC1C,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE;AAC/B,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;YAC3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;;;IAI3B,eAAe,GAAG,MAAK;AAC7B,QAAA,MAAM,QAAQ,GAAmB;AAC/B,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,IAAI,EAAE,GAAG;SACV;AACD,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC/B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;AAC3B,KAAC;IAEO,mBAAmB,GAAG,MAAK;AACjC,QAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,WAAW;AAC3C,QAAA,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE;YAC7B,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;;AAE3C,KAAC;IAEO,oBAAoB,CAAC,IAAoB,EAAE,KAAa,EAAA;QAC9D,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AAC/B,YAAA,QACE,CACE,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,KAAK,EACV,KAAK,EAAC,sCAAsC,EAAA,cAAA,EAC/B,MAAM,EAAA,EAEnB,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAC7C;;QAIV,QACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAA,EAEzC,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAC1C;;IAIL,eAAe,GAAA;QACrB,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,2BAA2B,EAAE,EAAA,IAAI,CAAC,SAAS,CAAQ,CAC3D;;IAIV,MAAM,GAAA;QACJ,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,WAAW;AAEvE,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,gBAAY,YAAY,EAAA,EAC9C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAE/B,IAAI,CAAC,QAAQ,KACZ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CACE,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,SAAS,EAClB,OAAO,EAAE,IAAI,CAAC,eAAe,EAClB,YAAA,EAAA,MAAM,EACjB,CAAA,CACE,CACP,EAGA,IAAI,CAAC,QAAQ,KAAK,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,IAAI,CAAC,eAAe,EAAE,EAGpF,YAAY,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,KACtC,CAAA,CAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EACzB,IAAI,CAAC,oBAAoB,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAC1C,EAEL,IAAI,CAAC,eAAe,EAAE,EAGvB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,uCAAuC,EAC7C,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,KAAK,EAAE,CAAQ,KAAA,EAAA,cAAc,CAAC,MAAM,CAAA,aAAA,CAAe,EAAA,EAEnD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,iBAAiB,EAAA,EAAA,KAAA,CAAW,CACjC,CACL,EAEL,IAAI,CAAC,eAAe,EAAE,EAGtB,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MACrC,EAAC,QAAQ,EAAA,IAAA,EACP,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,CAAA,KAAA,EAAQ,KAAK,GAAG,CAAC,EAAE,IAClD,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC,CACvC,EAEL,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,eAAe,EAAE,CAC1D,CACZ,CAAC,CACO,CACZ,EAGA,CAAC,YAAY,IAAI,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC7C,EAAC,QAAQ,EAAA,IAAA,EACP,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,CAAQ,KAAA,EAAA,KAAK,EAAE,EAC9C,EAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,KAAK,CAAC,CACnC,EAEL,KAAK,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,eAAe,EAAE,CACjD,CACZ,CAAC,CACE,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-breadcrumbs/bh-breadcrumbs.css?tag=bh-breadcrumbs&encapsulation=shadow","src/components/bh-breadcrumbs/bh-breadcrumbs.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n/* Breadcrumbs Navigation - Matching Figma Design */\n.breadcrumbs {\n  font-family: var(--font-inter);\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n}\n\n.breadcrumbs-container {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xs);\n  flex-wrap: wrap;\n}\n\n.breadcrumb-item {\n  display: flex;\n  align-items: center;\n}\n\n/* Breadcrumb Buttons - Matching Figma Design */\n.breadcrumb-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-xs) var(--spacing-sm);\n  border: none;\n  background: transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  color: var(--color-neutral-600);\n  text-decoration: none;\n  font-family: var(--font-inter);\n  font-size: var(--text-sm-size);\n  font-weight: 500;\n  line-height: 1.4285714285714286em;\n  min-height: 24px;\n  box-sizing: border-box;\n}\n\n.breadcrumb-button:hover {\n  background-color: var(--color-neutral-50);\n  color: var(--color-neutral-900);\n}\n\n.breadcrumb-button:focus-visible {\n  outline: 2px solid var(--color-brand-500);\n  outline-offset: 2px;\n}\n\n/* Home button styling */\n.breadcrumb-home {\n  padding: var(--spacing-xs);\n  min-width: 24px;\n  min-height: 24px;\n}\n\n/* Current/Active breadcrumb item - Matching Figma highlighted state */\n.breadcrumb-current {\n  background-color: var(--color-neutral-50);\n  color: var(--color-neutral-800);\n  font-weight: 500;\n  cursor: default;\n}\n\n.breadcrumb-current:hover {\n  background-color: var(--color-neutral-50);\n  color: var(--color-neutral-800);\n}\n\n/* Ellipsis button */\n.breadcrumb-ellipsis {\n  color: var(--color-neutral-600);\n  font-weight: 500;\n}\n\n.breadcrumb-ellipsis:hover {\n  background-color: var(--color-neutral-50);\n  color: var(--color-neutral-900);\n}\n\n/* Breadcrumb text */\n.breadcrumb-text {\n  white-space: nowrap;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Breadcrumb icons */\n.breadcrumb-icon {\n  flex-shrink: 0;\n  font-size: 20px;\n  width: 20px;\n  height: 20px;\n  color: var(--color-neutral-600);\n}\n\n.breadcrumb-home .breadcrumb-icon {\n  font-size: 20px;\n  width: 20px;\n  height: 20px;\n}\n\n/* Separators - Matching Figma chevron color */\n.breadcrumb-separator {\n  display: flex;\n  align-items: center;\n  color: var(--color-neutral-300);\n  font-size: 20px;\n  flex-shrink: 0;\n}\n\n.breadcrumb-separator .material-symbols-outlined {\n  font-size: 20px;\n  width: 20px;\n  height: 20px;\n}\n\n/* Material Symbols Support */\n.material-symbols-outlined {\n  font-family: 'Material Symbols Outlined';\n  font-weight: normal;\n  font-style: normal;\n  font-size: 24px;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  -webkit-font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n}\n\n/* Responsive behavior */\n@media (max-width: 640px) {\n  .breadcrumb-text {\n    max-width: 120px;\n  }\n\n  .breadcrumbs-container {\n    gap: var(--spacing-xxs);\n  }\n\n  .breadcrumb-button {\n    padding: var(--spacing-xxs) var(--spacing-xs);\n    font-size: 12px;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, h, Fragment } from '@stencil/core';\n\nexport interface BreadcrumbItem {\n  label: string;\n  path?: string;\n  isActive?: boolean;\n}\n\n@Component({\n  tag: 'bh-breadcrumbs',\n  styleUrl: 'bh-breadcrumbs.css',\n  shadow: true,\n})\nexport class BhBreadcrumbs {\n  /**\n   * Array of breadcrumb items\n   */\n  @Prop() items: BreadcrumbItem[] | string = [];\n\n  /**\n   * Separator icon name (Material Symbols)\n   */\n  @Prop() separator: string = 'chevron_right';\n\n  /**\n   * Whether to show the home button\n   */\n  @Prop() showHome: boolean = true;\n\n  /**\n   * Maximum number of visible items before collapsing\n   */\n  @Prop() maxVisibleItems: number = 4;\n\n  /**\n   * Event emitted when a breadcrumb item is clicked\n   */\n  @Event() bhItemClick!: EventEmitter<BreadcrumbItem>;\n\n  /**\n   * Event emitted when navigating to a path\n   */\n  @Event() bhNavigate!: EventEmitter<string>;\n\n  private get parsedItems(): BreadcrumbItem[] {\n    if (typeof this.items === 'string') {\n      try {\n        return JSON.parse(this.items);\n      } catch {\n        return [];\n      }\n    }\n    return this.items || [];\n  }\n\n  private get displayData() {\n    const items = this.parsedItems;\n    if (!items || items.length <= this.maxVisibleItems) {\n      return {\n        displayItems: items ? [...items] : [],\n        showEllipsis: false,\n        collapsedItems: [],\n      };\n    } else {\n      const lastItems = items.slice(-(this.maxVisibleItems - 2));\n      return {\n        displayItems: [items[0], ...lastItems],\n        showEllipsis: true,\n        collapsedItems: items.slice(1, -(this.maxVisibleItems - 2)),\n      };\n    }\n  }\n\n  private handleItemClick(item: BreadcrumbItem) {\n    if (!item.isActive && item.path) {\n      this.bhItemClick.emit(item);\n      this.bhNavigate.emit(item.path);\n    }\n  }\n\n  private handleHomeClick = () => {\n    const homeItem: BreadcrumbItem = {\n      label: 'Home',\n      path: '/',\n    };\n    this.bhItemClick.emit(homeItem);\n    this.bhNavigate.emit('/');\n  };\n\n  private handleEllipsisClick = () => {\n    const { collapsedItems } = this.displayData;\n    if (collapsedItems.length > 0) {\n      this.handleItemClick(collapsedItems[0]);\n    }\n  };\n\n  private renderBreadcrumbItem(item: BreadcrumbItem, index: number) {\n    if (item.isActive || !item.path) {\n      return (\n        <div\n          key={index}\n          class=\"breadcrumb-button breadcrumb-current\"\n          aria-current=\"page\"\n        >\n          <span class=\"breadcrumb-text\">{item.label}</span>\n        </div>\n      );\n    }\n\n    return (\n      <button\n        key={index}\n        type=\"button\"\n        class=\"breadcrumb-button\"\n        onClick={() => this.handleItemClick(item)}\n      >\n        <span class=\"breadcrumb-text\">{item.label}</span>\n      </button>\n    );\n  }\n\n  private renderSeparator() {\n    return (\n      <div class=\"breadcrumb-separator\">\n        <span class=\"material-symbols-outlined\">{this.separator}</span>\n      </div>\n    );\n  }\n\n  render() {\n    const { displayItems, showEllipsis, collapsedItems } = this.displayData;\n\n    return (\n      <nav class=\"breadcrumbs\" aria-label=\"Breadcrumb\">\n        <div class=\"breadcrumbs-container\">\n          {/* Home button */}\n          {this.showHome && (\n            <div class=\"breadcrumb-item\">\n              <bh-button-icon\n                hierarchy=\"quaternary\"\n                size=\"xs\"\n                iconName=\"cottage\"\n                onClick={this.handleHomeClick}\n                aria-label=\"Home\"\n              />\n            </div>\n          )}\n\n          {/* Separator after home */}\n          {this.showHome && (displayItems.length > 0 || showEllipsis) && this.renderSeparator()}\n\n          {/* With ellipsis */}\n          {showEllipsis && displayItems.length > 0 && (\n            <Fragment>\n              <div class=\"breadcrumb-item\">\n                {this.renderBreadcrumbItem(displayItems[0], 0)}\n              </div>\n\n              {this.renderSeparator()}\n\n              {/* Ellipsis button */}\n              <div class=\"breadcrumb-item\">\n                <button\n                  type=\"button\"\n                  class=\"breadcrumb-button breadcrumb-ellipsis\"\n                  onClick={this.handleEllipsisClick}\n                  title={`Show ${collapsedItems.length} hidden items`}\n                >\n                  <span class=\"breadcrumb-text\">...</span>\n                </button>\n              </div>\n\n              {this.renderSeparator()}\n\n              {/* Remaining items */}\n              {displayItems.slice(1).map((item, index) => (\n                <Fragment>\n                  <div class=\"breadcrumb-item\" key={`item-${index + 1}`}>\n                    {this.renderBreadcrumbItem(item, index + 1)}\n                  </div>\n\n                  {index < displayItems.slice(1).length - 1 && this.renderSeparator()}\n                </Fragment>\n              ))}\n            </Fragment>\n          )}\n\n          {/* Without ellipsis */}\n          {!showEllipsis && displayItems.map((item, index) => (\n            <Fragment>\n              <div class=\"breadcrumb-item\" key={`item-${index}`}>\n                {this.renderBreadcrumbItem(item, index)}\n              </div>\n\n              {index < displayItems.length - 1 && this.renderSeparator()}\n            </Fragment>\n          ))}\n        </div>\n      </nav>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-CK89kJIU.js

@@ -0,0 +1,125 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-ChfLhYiJ.js';
+
+const bhProductSwitcherCss = ".product-switcher-container{position:fixed;z-index:10000;animation:popoverSlideIn 0.3s ease-out;transform-origin:top center}.product-switcher-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:transparent;z-index:9999}.product-switcher-popover{background:rgba(255, 255, 255, 0.9);border:1px solid var(--color-neutral-100);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(3px);box-shadow:0px 24px 48px -12px rgba(64, 73, 104, 0.1);padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md);min-width:250px;position:relative;z-index:10001}@keyframes popoverSlideIn{0%{opacity:0;transform:translateY(-12px)}100%{opacity:1;transform:translateY(0)}}.product-switcher-container.closing{animation:popoverSlideOut 0.2s ease-in forwards}@keyframes popoverSlideOut{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-12px)}}.product-item{display:flex;align-items:center;gap:var(--spacing-lg);width:100%;padding:var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);border-radius:var(--radius-md);cursor:pointer;transition:background-color 0.2s ease}.product-item:hover{background-color:var(--color-neutral-100)}.product-item.current{background-color:var(--color-brand-50)}.product-icon-container{width:36px;height:36px;background:var(--color-white);border:1px solid var(--color-neutral-100);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:var(--spacing-xs)}.product-icon{width:100%;height:100%;object-fit:contain;object-position:center;filter:invert(25%) sepia(190%) saturate(210%) hue-rotate(190deg) brightness(120%) contrast(210%)}.product-icon svg path{fill:var(--color-brand-600)}.product-info{display:flex;flex-direction:column;flex:1}.product-name{font-weight:var(--weight-semibold);font-size:var(--text-md-size);line-height:var(--text-md-line);color:var(--color-neutral-900)}.product-description{font-weight:var(--weight-regular);font-size:var(--text-sm-size);line-height:var(--text-sm-line);color:var(--color-neutral-600)}";
+
+const BhProductSwitcher = /*@__PURE__*/ proxyCustomElement(class BhProductSwitcher extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhClose = createEvent(this, "bhClose");
+        this.bhProductSelect = createEvent(this, "bhProductSelect");
+    }
+    /**
+     * Whether the product switcher is open
+     */
+    isOpen = false;
+    /**
+     * Position to anchor the popover
+     */
+    anchorPosition = { top: 0, left: 0 };
+    /**
+     * Array of products to display
+     */
+    products = [
+        {
+            id: 'alice',
+            name: 'Alice',
+            description: 'Housekeeping & Guest Services',
+            logo: './assets/logos/AL.svg',
+        },
+        {
+            id: 'hotel-effectiveness',
+            name: 'Hotel Effectiveness',
+            description: 'Labor planning',
+            logo: './assets/logos/HE.svg',
+        },
+        {
+            id: 'profit-sword',
+            name: 'ProfitSword',
+            description: 'B.I and Finance',
+            logo: './assets/logos/PS.svg',
+        },
+        {
+            id: 'transcendent',
+            name: 'Transcendent',
+            description: 'Asset Management & CapEx',
+            logo: './assets/logos/TR.svg',
+        },
+    ];
+    /**
+     * Event emitted when the switcher should close
+     */
+    bhClose;
+    /**
+     * Event emitted when a product is selected
+     */
+    bhProductSelect;
+    isClosing = false;
+    containerRef;
+    handleDocumentClick(event) {
+        const target = event.target;
+        if (this.isOpen &&
+            this.containerRef &&
+            !this.containerRef.contains(target) &&
+            !target.closest('.logo-active')) {
+            this.handleClose();
+        }
+    }
+    handleClose = () => {
+        this.isClosing = true;
+        setTimeout(() => {
+            this.bhClose.emit();
+            this.isClosing = false;
+        }, 200);
+    };
+    handleProductClick = (product) => {
+        this.bhProductSelect.emit(product);
+        this.handleClose();
+    };
+    render() {
+        if (!this.isOpen)
+            return null;
+        const containerClasses = {
+            'product-switcher-container': true,
+            'closing': this.isClosing,
+        };
+        return (h(Host, null, h("div", { class: "product-switcher-backdrop", onClick: this.handleClose }), h("div", { ref: (el) => this.containerRef = el, class: containerClasses, style: {
+                top: `${this.anchorPosition.top}px`,
+                left: `${this.anchorPosition.left}px`,
+            } }, h("div", { class: "product-switcher-popover" }, this.products.map((product) => {
+            const itemClasses = {
+                'product-item': true,
+                'current': product.current || false,
+            };
+            return (h("div", { key: product.id, class: itemClasses, onClick: () => this.handleProductClick(product) }, h("div", { class: "product-icon-container" }, h("img", { src: product.logo, alt: `${product.name} logo`, class: "product-icon" })), h("div", { class: "product-info" }, h("div", { class: "product-name" }, product.name), h("div", { class: "product-description" }, product.description))));
+        })))));
+    }
+    static get style() { return bhProductSwitcherCss; }
+}, [769, "bh-product-switcher", {
+        "isOpen": [4, "is-open"],
+        "anchorPosition": [16],
+        "products": [16],
+        "isClosing": [32]
+    }, [[4, "click", "handleDocumentClick"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-product-switcher"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-product-switcher":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhProductSwitcher);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhProductSwitcher as B, defineCustomElement as d };
+//# sourceMappingURL=p-CK89kJIU.js.map
+
+//# sourceMappingURL=p-CK89kJIU.js.map

package/dist/components/p-CK89kJIU.js.map

@@ -0,0 +1 @@
+{"file":"p-CK89kJIU.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-product-switcher/bh-product-switcher.css?tag=bh-product-switcher&encapsulation=shadow","src/components/bh-product-switcher/bh-product-switcher.tsx"],"sourcesContent":["/* Container wrapper */\n.product-switcher-container {\n  position: fixed;\n  z-index: 10000;\n  animation: popoverSlideIn 0.3s ease-out;\n  transform-origin: top center;\n}\n\n/* Backdrop */\n.product-switcher-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: transparent;\n  z-index: 9999;\n}\n\n/* Product Switcher Popover */\n.product-switcher-popover {\n  background: rgba(255, 255, 255, 0.9);\n  border: 1px solid var(--color-neutral-100);\n  border-radius: var(--radius-lg);\n  -webkit-backdrop-filter: blur(8px);\n  backdrop-filter: blur(3px);\n  box-shadow: 0px 24px 48px -12px rgba(64, 73, 104, 0.1);\n  padding: var(--spacing-lg);\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-md);\n  min-width: 250px;\n  position: relative;\n  z-index: 10001;\n}\n\n@keyframes popoverSlideIn {\n  0% {\n    opacity: 0;\n    transform: translateY(-12px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.product-switcher-container.closing {\n  animation: popoverSlideOut 0.2s ease-in forwards;\n}\n\n@keyframes popoverSlideOut {\n  0% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(-12px);\n  }\n}\n\n/* Product Item */\n.product-item {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-lg);\n  width: 100%;\n  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);\n  border-radius: var(--radius-md);\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n\n.product-item:hover {\n  background-color: var(--color-neutral-100);\n}\n\n.product-item.current {\n  background-color: var(--color-brand-50);\n}\n\n/* Product Icon Container */\n.product-icon-container {\n  width: 36px;\n  height: 36px;\n  background: var(--color-white);\n  border: 1px solid var(--color-neutral-100);\n  border-radius: var(--radius-md);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: var(--spacing-xs);\n}\n\n.product-icon {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  object-position: center;\n  filter: invert(25%) sepia(190%) saturate(210%) hue-rotate(190deg) brightness(120%) contrast(210%);\n}\n\n.product-icon svg path {\n  fill: var(--color-brand-600);\n}\n\n/* Product Info */\n.product-info {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n}\n\n.product-name {\n  font-weight: var(--weight-semibold);\n  font-size: var(--text-md-size);\n  line-height: var(--text-md-line);\n  color: var(--color-neutral-900);\n}\n\n.product-description {\n  font-weight: var(--weight-regular);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-600);\n}","import { Component, Prop, Event, EventEmitter, State, h, Host, Listen } from '@stencil/core';\n\nexport interface BhProduct {\n  id: string;\n  name: string;\n  description: string;\n  logo: string;\n  current?: boolean;\n}\n\nexport interface AnchorPosition {\n  top: number;\n  left: number;\n}\n\n@Component({\n  tag: 'bh-product-switcher',\n  styleUrl: 'bh-product-switcher.css',\n  shadow: true,\n})\nexport class BhProductSwitcher {\n  /**\n   * Whether the product switcher is open\n   */\n  @Prop() isOpen: boolean = false;\n\n  /**\n   * Position to anchor the popover\n   */\n  @Prop() anchorPosition: AnchorPosition = { top: 0, left: 0 };\n\n  /**\n   * Array of products to display\n   */\n  @Prop() products: BhProduct[] = [\n    {\n      id: 'alice',\n      name: 'Alice',\n      description: 'Housekeeping & Guest Services',\n      logo: './assets/logos/AL.svg',\n    },\n    {\n      id: 'hotel-effectiveness',\n      name: 'Hotel Effectiveness',\n      description: 'Labor planning',\n      logo: './assets/logos/HE.svg',\n    },\n    {\n      id: 'profit-sword',\n      name: 'ProfitSword',\n      description: 'B.I and Finance',\n      logo: './assets/logos/PS.svg',\n    },\n    {\n      id: 'transcendent',\n      name: 'Transcendent',\n      description: 'Asset Management & CapEx',\n      logo: './assets/logos/TR.svg',\n    },\n  ];\n\n  /**\n   * Event emitted when the switcher should close\n   */\n  @Event() bhClose!: EventEmitter<void>;\n\n  /**\n   * Event emitted when a product is selected\n   */\n  @Event() bhProductSelect!: EventEmitter<BhProduct>;\n\n  @State() isClosing: boolean = false;\n\n  private containerRef?: HTMLDivElement;\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    if (\n      this.isOpen &&\n      this.containerRef &&\n      !this.containerRef.contains(target) &&\n      !target.closest('.logo-active')\n    ) {\n      this.handleClose();\n    }\n  }\n\n  private handleClose = () => {\n    this.isClosing = true;\n    setTimeout(() => {\n      this.bhClose.emit();\n      this.isClosing = false;\n    }, 200);\n  };\n\n  private handleProductClick = (product: BhProduct) => {\n    this.bhProductSelect.emit(product);\n    this.handleClose();\n  };\n\n  render() {\n    if (!this.isOpen) return null;\n\n    const containerClasses = {\n      'product-switcher-container': true,\n      'closing': this.isClosing,\n    };\n\n    return (\n      <Host>\n        {/* Backdrop */}\n        <div class=\"product-switcher-backdrop\" onClick={this.handleClose}></div>\n\n        {/* Product Switcher Container */}\n        <div\n          ref={(el) => this.containerRef = el}\n          class={containerClasses}\n          style={{\n            top: `${this.anchorPosition.top}px`,\n            left: `${this.anchorPosition.left}px`,\n          }}\n        >\n          <div class=\"product-switcher-popover\">\n            {this.products.map((product) => {\n              const itemClasses = {\n                'product-item': true,\n                'current': product.current || false,\n              };\n\n              return (\n                <div\n                  key={product.id}\n                  class={itemClasses}\n                  onClick={() => this.handleProductClick(product)}\n                >\n                  <div class=\"product-icon-container\">\n                    <img\n                      src={product.logo}\n                      alt={`${product.name} logo`}\n                      class=\"product-icon\"\n                    />\n                  </div>\n\n                  <div class=\"product-info\">\n                    <div class=\"product-name\">{product.name}</div>\n                    <div class=\"product-description\">{product.description}</div>\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-CMomxDPL.js

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

package/dist/components/p-CMomxDPL.js.map

@@ -0,0 +1 @@
+{"file":"p-CMomxDPL.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-avatar/bh-avatar.css?tag=bh-avatar&encapsulation=shadow","src/components/bh-avatar/bh-avatar.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-AVATAR COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n/* Base Avatar */\n.avatar {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  background-color: var(--color-neutral-100);\n  flex-shrink: 0;\n}\n\n/* Avatar Sizes */\n.avatar-xxs {\n  width: 16px;\n  height: 16px;\n}\n\n.avatar-xs {\n  width: 24px;\n  height: 24px;\n}\n\n.avatar-sm {\n  width: 32px;\n  height: 32px;\n}\n\n.avatar-md {\n  width: 40px;\n  height: 40px;\n}\n\n.avatar-lg {\n  width: 48px;\n  height: 48px;\n}\n\n.avatar-xl {\n  width: 56px;\n  height: 56px;\n}\n\n.avatar-2xl {\n  width: 64px;\n  height: 64px;\n}\n\n/* ==========================================================================\n   AVATAR CONTENT ELEMENTS\n   ========================================================================== */\n\n/* Avatar Border */\n.avatar-border {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 50%;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.avatar-xs .avatar-border,\n.avatar-sm .avatar-border {\n  border: 0.5px solid var(--color-neutral-400);\n}\n\n.avatar-md .avatar-border,\n.avatar-lg .avatar-border,\n.avatar-xl .avatar-border,\n.avatar-2xl .avatar-border {\n  border: 0.75px solid var(--color-neutral-400);\n}\n\n/* Avatar Content Container */\n.avatar-content {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  overflow: hidden;\n  z-index: 0;\n}\n\n/* Avatar Image */\n.avatar-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n}\n\n/* Avatar Placeholder Icon */\n.avatar-placeholder-icon {\n  color: var(--color-neutral-500);\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Avatar Text (for text-type avatars) */\n.avatar-text {\n  color: var(--color-neutral-500);\n  font-family: var(--font-inter);\n  font-weight: var(--weight-semibold);\n  text-align: center;\n  line-height: 1;\n}\n\n/* Text Size Classes */\n.text-xxs {\n  font-size: 10px;\n  line-height: 1.6em;\n}\n\n.text-xs {\n  font-size: 12px;\n  line-height: 1.5em;\n}\n\n.text-sm {\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n}\n\n.text-md {\n  font-size: var(--text-md-size);\n  line-height: var(--text-md-line);\n}\n\n.text-lg {\n  font-size: 18px;\n  line-height: 1.56em;\n}\n\n.text-xl {\n  font-size: 20px;\n  line-height: 1.5em;\n}\n\n.text-2xl {\n  font-size: 24px;\n  line-height: 1.33em;\n}\n\n/* Icon Size Classes */\n.icon-sm {\n  font-size: 16px;\n}\n\n.icon-md {\n  font-size: 20px;\n}\n\n.icon-lg {\n  font-size: 24px;\n}\n\n.icon-xl {\n  font-size: 28px;\n}\n\n.icon-2xl {\n  font-size: 32px;\n}\n\n.icon-3xl {\n  font-size: 36px;\n}\n\n.icon-4xl {\n  font-size: 40px;\n}\n\n/* ==========================================================================\n   STATUS INDICATOR\n   ========================================================================== */\n\n.avatar-status {\n  position: absolute;\n  border-radius: 50%;\n  background-color: var(--color-success-500);\n  border: 1.5px solid var(--color-white);\n  z-index: 2;\n}\n\n.avatar-status-online {\n  background-color: var(--color-success-500);\n}\n\n.avatar-status-offline {\n  background-color: var(--color-neutral-400);\n}\n\n/* Status Indicator Sizes */\n.avatar-status-xxs {\n  width: 4px;\n  height: 4px;\n  bottom: 0;\n  right: 0;\n}\n\n.avatar-status-xs {\n  width: 6px;\n  height: 6px;\n  bottom: 0;\n  right: 0;\n}\n\n.avatar-status-sm {\n  width: 8px;\n  height: 8px;\n  bottom: 0;\n  right: 0;\n}\n\n.avatar-status-md {\n  width: 10px;\n  height: 10px;\n  bottom: 0;\n  right: 0;\n}\n\n.avatar-status-lg {\n  width: 12px;\n  height: 12px;\n  bottom: 0;\n  right: 0;\n}\n\n.avatar-status-xl {\n  width: 14px;\n  height: 14px;\n  bottom: 0;\n  right: 0;\n}\n\n.avatar-status-2xl {\n  width: 16px;\n  height: 16px;\n  bottom: 0;\n  right: 0;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type AvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\nexport type AvatarType = 'image' | 'placeholder' | 'text';\nexport type AvatarStatus = 'online' | 'offline' | 'none';\n\n@Component({\n  tag: 'bh-avatar',\n  styleUrl: 'bh-avatar.css',\n  shadow: true,\n})\nexport class BhAvatar {\n  /**\n   * The size of the avatar\n   */\n  @Prop() size: AvatarSize = 'md';\n\n  /**\n   * The type of avatar content\n   */\n  @Prop() type: AvatarType = 'image';\n\n  /**\n   * The status indicator (online, offline, or none)\n   */\n  @Prop() status: AvatarStatus = 'none';\n\n  /**\n   * Text to display for text-type avatars (initials)\n   */\n  @Prop() text: string = 'RD';\n\n  /**\n   * Image source URL for image-type avatars\n   */\n  @Prop() imageSrc?: string;\n\n  /**\n   * Alt text for the avatar image\n   */\n  @Prop() alt: string = 'Avatar';\n\n  /**\n   * Emitted when the avatar is hovered\n   */\n  @Event() bhMouseEnter!: EventEmitter<void>;\n\n  /**\n   * Emitted when the mouse leaves the avatar\n   */\n  @Event() bhMouseLeave!: EventEmitter<void>;\n\n  private handleMouseEnter = (): void => {\n    this.bhMouseEnter.emit();\n  };\n\n  private handleMouseLeave = (): void => {\n    this.bhMouseLeave.emit();\n  };\n\n  private getTextSizeClass(): string {\n    const sizeMap: Record<AvatarSize, string> = {\n      'xxs': 'text-xxs',\n      'xs': 'text-xs',\n      'sm': 'text-sm',\n      'md': 'text-md',\n      'lg': 'text-lg',\n      'xl': 'text-xl',\n      '2xl': 'text-2xl',\n    };\n    return sizeMap[this.size] || 'text-md';\n  }\n\n  private getIconSizeClass(): string {\n    const sizeMap: Record<AvatarSize, string> = {\n      'xxs': 'icon-sm',\n      'xs': 'icon-md',\n      'sm': 'icon-lg',\n      'md': 'icon-xl',\n      'lg': 'icon-2xl',\n      'xl': 'icon-3xl',\n      '2xl': 'icon-4xl',\n    };\n    return sizeMap[this.size] || 'icon-xl';\n  }\n\n  render() {\n    const avatarClasses = {\n      'avatar': true,\n      [`avatar-${this.size}`]: true,\n      'avatar-with-status': this.status !== 'none',\n    };\n\n    const statusClasses = {\n      'avatar-status': true,\n      [`avatar-status-${this.size}`]: true,\n      'avatar-status-online': this.status === 'online',\n      'avatar-status-offline': this.status === 'offline',\n    };\n\n    return (\n      <div\n        class={avatarClasses}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        part=\"avatar\"\n      >\n        <div class=\"avatar-border\"></div>\n\n        <div class=\"avatar-content\">\n          {this.type === 'image' && (\n            <img\n              src={this.imageSrc}\n              alt={this.alt}\n              class=\"avatar-image\"\n            />\n          )}\n\n          {this.type === 'placeholder' && (\n            <span class={`material-symbols-outlined avatar-placeholder-icon ${this.getIconSizeClass()}`}>\n              person\n            </span>\n          )}\n\n          {this.type === 'text' && (\n            <span class={`avatar-text ${this.getTextSizeClass()}`}>\n              {this.text}\n            </span>\n          )}\n        </div>\n\n        {this.status !== 'none' && (\n          <div class={statusClasses}></div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-CWGpUs1b.js

@@ -0,0 +1,84 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-ChfLhYiJ.js';
+
+const bhChartTooltipCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:block}.chart-tooltip{position:fixed;z-index:10000;pointer-events:none;opacity:0;transition:opacity 0.15s ease;transform:translate(-50%, -100%);margin-top:var(--spacing-sm);width:max-content;min-width:120px;max-width:240px}.chart-tooltip.storybook-mode{position:absolute;transform:translate(-50%, -100%);margin-top:-10px}.chart-tooltip.visible{opacity:1}.tooltip-content{background:var(--color-white);color:var(--color-neutral-900);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-family:var(--font-inter);font-size:var(--text-xs-size);line-height:var(--text-xs-line);box-shadow:0 2px 8px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08);border:1px solid rgba(0, 0, 0, 0.05)}.tooltip-header{font-weight:var(--weight-semibold);margin-bottom:var(--spacing-xs);padding-bottom:var(--spacing-xs);border-bottom:1px solid var(--color-neutral-100)}.tooltip-items{display:flex;flex-direction:column;gap:var(--spacing-xs)}.tooltip-item{display:flex;align-items:center;gap:var(--spacing-sm);white-space:nowrap}.tooltip-dot{width:var(--spacing-sm);height:var(--spacing-sm);border-radius:50%;flex-shrink:0}.tooltip-label{color:var(--color-neutral-600);font-weight:var(--weight-regular);flex-shrink:0}.tooltip-value{color:var(--color-neutral-900);font-weight:var(--weight-medium)}.tooltip-total{margin-top:var(--spacing-xs);padding-top:var(--spacing-xs);border-top:1px solid var(--color-neutral-100);display:flex;justify-content:space-between;gap:var(--spacing-md)}.total-label{color:var(--color-neutral-600);font-weight:var(--weight-medium)}.total-value{color:var(--color-neutral-900);font-weight:var(--weight-semibold)}";
+
+const BhChartTooltip = /*@__PURE__*/ proxyCustomElement(class BhChartTooltip extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    /**
+     * Whether the tooltip is visible
+     */
+    visible = false;
+    /**
+     * X position of the tooltip (in pixels)
+     */
+    x = 0;
+    /**
+     * Y position of the tooltip (in pixels)
+     */
+    y = 0;
+    /**
+     * Header text for the tooltip
+     */
+    header = '';
+    /**
+     * Items to display in the tooltip
+     */
+    items = [];
+    /**
+     * Total value to display
+     */
+    total = '';
+    /**
+     * Whether to show the total
+     */
+    showTotal = false;
+    /**
+     * Whether in storybook mode (for static positioning)
+     */
+    storybookMode = false;
+    render() {
+        return (h(Host, { key: '57397b8dd557ccf795a68896c7f1913fb0bc9b9e' }, h("div", { key: 'ff10c37825a1b62a08b168248b7d05b49fca5a79', class: {
+                'chart-tooltip': true,
+                visible: this.visible,
+                'storybook-mode': this.storybookMode,
+            }, style: {
+                left: `${this.x}px`,
+                top: `${this.y}px`,
+            } }, h("div", { key: '1eec265888955e2d073b85c4e2a5cde44b816233', class: "tooltip-content" }, this.header && h("div", { key: 'b287d571062079c274941e20863562898e1de7de', class: "tooltip-header" }, this.header), h("div", { key: 'f4db62e0a0bc52422546fff47e0fb11abffdf744', class: "tooltip-items" }, this.items.map((item, index) => (h("div", { key: index, class: "tooltip-item" }, item.color && (h("span", { class: "tooltip-dot", style: { backgroundColor: item.color } })), item.label && (h("span", { class: "tooltip-label" }, item.label, ":")), h("span", { class: "tooltip-value" }, item.value))))), this.showTotal && this.total && (h("div", { key: '46ade21e6d662ae224d6e2d019609b270b8e1989', class: "tooltip-total" }, h("span", { key: '8ad8d17c70c5b9a4a6fd98b54db5da98e9025875', class: "total-label" }, "Total:"), h("span", { key: '57e0ee054526971a7e4b8b8e43b2e0c1b685b9e4', class: "total-value" }, this.total)))))));
+    }
+    static get style() { return bhChartTooltipCss; }
+}, [769, "bh-chart-tooltip", {
+        "visible": [4],
+        "x": [2],
+        "y": [2],
+        "header": [1],
+        "items": [16],
+        "total": [1],
+        "showTotal": [4, "show-total"],
+        "storybookMode": [4, "storybook-mode"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-chart-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-chart-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhChartTooltip);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhChartTooltip as B, defineCustomElement as d };
+//# sourceMappingURL=p-CWGpUs1b.js.map
+
+//# sourceMappingURL=p-CWGpUs1b.js.map

package/dist/components/p-CWGpUs1b.js.map

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

package/dist/components/p-CbeeTFys.js

@@ -0,0 +1,183 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-ChfLhYiJ.js';
+
+const bhPaginationCss = ":host{display:block;font-family:var(--font-family-body, 'Inter', sans-serif)}.pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4, 1rem);padding:var(--sp-3, 0.75rem) var(--sp-4, 1rem);background-color:var(--color-white, #fff);border-top:1px solid var(--color-neutral-200, #e2e4eb)}.pagination-sm{padding:var(--sp-2, 0.5rem) var(--sp-3, 0.75rem);gap:var(--sp-3, 0.75rem)}.pagination-sm .pagination-info-text,.pagination-sm .pagination-page-size-label{font-size:0.75rem}.pagination-sm .pagination-btn{width:28px;height:28px}.pagination-sm .pagination-btn .material-symbols-outlined{font-size:18px}.pagination-sm .pagination-select{height:28px;font-size:0.75rem;padding:0 var(--sp-5, 1.25rem) 0 var(--sp-2, 0.5rem)}.pagination-md{}.pagination-lg{padding:var(--sp-4, 1rem) var(--sp-5, 1.25rem);gap:var(--sp-5, 1.25rem)}.pagination-lg .pagination-info-text,.pagination-lg .pagination-page-size-label{font-size:0.9375rem}.pagination-lg .pagination-btn{width:40px;height:40px}.pagination-lg .pagination-btn .material-symbols-outlined{font-size:24px}.pagination-lg .pagination-select{height:40px;font-size:0.9375rem}.pagination-disabled{opacity:0.5;pointer-events:none}.pagination-info{display:flex;align-items:center}.pagination-info-text{font-size:0.875rem;color:var(--color-neutral-600, #5c627a);white-space:nowrap}.pagination-controls{display:flex;align-items:center;gap:var(--sp-4, 1rem)}.pagination-page-size{display:flex;align-items:center;gap:var(--sp-2, 0.5rem)}.pagination-page-size-label{font-size:0.875rem;color:var(--color-neutral-600, #5c627a);white-space:nowrap}.pagination-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--color-white, #fff);border:1px solid var(--color-neutral-300, #c0c4d4);border-radius:var(--radius-md, 6px);padding:0 var(--sp-6, 1.5rem) 0 var(--sp-3, 0.75rem);height:32px;font-size:0.875rem;color:var(--color-neutral-900, #141624);cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%235c627a'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 4px center;background-size:16px}.pagination-select:hover:not(:disabled){border-color:var(--color-neutral-400, #939ab4)}.pagination-select:focus{outline:none;border-color:var(--color-brand-500, #6366f1);box-shadow:0 0 0 3px var(--color-brand-100, #e0e1fc)}.pagination-select:disabled{background-color:var(--color-neutral-100, #f0f1f5);cursor:not-allowed}.pagination-nav{display:flex;align-items:center;gap:var(--sp-1, 0.25rem)}.pagination-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--radius-md, 6px);background-color:transparent;color:var(--color-neutral-600, #5c627a);cursor:pointer;transition:background-color 0.15s ease, color 0.15s ease}.pagination-btn .material-symbols-outlined{font-size:20px;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20}.pagination-btn:hover:not(:disabled){background-color:var(--color-neutral-100, #f0f1f5);color:var(--color-neutral-900, #141624)}.pagination-btn:focus{outline:none;box-shadow:0 0 0 2px var(--color-brand-100, #e0e1fc)}.pagination-btn:active:not(:disabled){background-color:var(--color-neutral-200, #e2e4eb)}.pagination-btn:disabled{opacity:0.4;cursor:not-allowed}@media (max-width: 640px){.pagination{flex-direction:column;align-items:stretch;gap:var(--sp-3, 0.75rem)}.pagination-info{justify-content:center}.pagination-controls{justify-content:center;flex-wrap:wrap}.pagination-page-size{width:100%;justify-content:center}.pagination-nav{justify-content:center}}";
+
+const BhPagination = /*@__PURE__*/ proxyCustomElement(class BhPagination extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhPageChange = createEvent(this, "bhPageChange");
+        this.bhPageSizeChange = createEvent(this, "bhPageSizeChange");
+    }
+    /**
+     * Current page (1-indexed)
+     */
+    page = 1;
+    /**
+     * Total number of items
+     */
+    totalItems = 0;
+    /**
+     * Number of items per page
+     */
+    pageSize = 10;
+    /**
+     * Available page size options
+     */
+    pageSizeOptions = [10, 25, 50, 100];
+    /**
+     * Show page size selector
+     */
+    showPageSizeSelector = true;
+    /**
+     * Show item count info (e.g., "Showing 1 to 10 of 100 results")
+     */
+    showItemCount = true;
+    /**
+     * Show first/last page buttons
+     */
+    showFirstLastButtons = true;
+    /**
+     * Size variant of the pagination
+     */
+    size = 'md';
+    /**
+     * Whether the pagination is disabled
+     */
+    disabled = false;
+    /**
+     * Label for "Rows per page" text (for i18n)
+     */
+    rowsPerPageLabel = 'Rows per page:';
+    /**
+     * Label template for showing results (use {start}, {end}, {total} placeholders)
+     */
+    showingResultsLabel = 'Showing {start} to {end} of {total} results';
+    /**
+     * Label template for page info when total items unknown (use {page}, {totalPages} placeholders)
+     */
+    pageInfoLabel = 'Page {page} of {totalPages}';
+    internalPage = 1;
+    internalPageSize = 10;
+    /**
+     * Emitted when the page changes
+     */
+    bhPageChange;
+    /**
+     * Emitted when page size changes
+     */
+    bhPageSizeChange;
+    componentWillLoad() {
+        this.internalPage = this.page;
+        this.internalPageSize = this.pageSize;
+    }
+    get totalPages() {
+        return Math.max(1, Math.ceil(this.totalItems / this.internalPageSize));
+    }
+    get startItem() {
+        if (this.totalItems === 0)
+            return 0;
+        return (this.internalPage - 1) * this.internalPageSize + 1;
+    }
+    get endItem() {
+        return Math.min(this.internalPage * this.internalPageSize, this.totalItems);
+    }
+    get canGoPrevious() {
+        return this.internalPage > 1 && !this.disabled;
+    }
+    get canGoNext() {
+        return this.internalPage < this.totalPages && !this.disabled;
+    }
+    goToPage(newPage) {
+        if (this.disabled)
+            return;
+        const page = Math.max(1, Math.min(newPage, this.totalPages));
+        if (page !== this.internalPage) {
+            this.internalPage = page;
+            this.page = page;
+            this.bhPageChange.emit({ page, pageSize: this.internalPageSize });
+        }
+    }
+    handlePageSizeChange(event) {
+        if (this.disabled)
+            return;
+        const select = event.target;
+        const newPageSize = parseInt(select.value, 10);
+        if (newPageSize !== this.internalPageSize) {
+            this.internalPageSize = newPageSize;
+            this.pageSize = newPageSize;
+            // Reset to page 1 when page size changes, or adjust if current page is now out of bounds
+            const newTotalPages = Math.max(1, Math.ceil(this.totalItems / newPageSize));
+            const newPage = Math.min(this.internalPage, newTotalPages);
+            if (newPage !== this.internalPage) {
+                this.internalPage = newPage;
+                this.page = newPage;
+            }
+            this.bhPageSizeChange.emit({ page: this.internalPage, pageSize: newPageSize });
+        }
+    }
+    goToFirst = () => this.goToPage(1);
+    goToPrevious = () => this.goToPage(this.internalPage - 1);
+    goToNext = () => this.goToPage(this.internalPage + 1);
+    goToLast = () => this.goToPage(this.totalPages);
+    getInfoText() {
+        if (this.totalItems === 0) {
+            return 'No results';
+        }
+        if (this.showItemCount && this.totalItems > 0) {
+            return this.showingResultsLabel
+                .replace('{start}', String(this.startItem))
+                .replace('{end}', String(this.endItem))
+                .replace('{total}', String(this.totalItems));
+        }
+        return this.pageInfoLabel
+            .replace('{page}', String(this.internalPage))
+            .replace('{totalPages}', String(this.totalPages));
+    }
+    render() {
+        const paginationClasses = {
+            'pagination': true,
+            [`pagination-${this.size}`]: true,
+            'pagination-disabled': this.disabled,
+        };
+        return (h("div", { key: '9e9cbcde6a010fdbbbd809a3f576b40fe7f905cc', class: paginationClasses, role: "navigation", "aria-label": "Pagination" }, h("div", { key: '212d0b1627b0897ceecd0298e8928a4ec11441d7', class: "pagination-info" }, h("span", { key: 'ab37b52387fd66f583b67fd96ce396b6649d31d0', class: "pagination-info-text" }, this.getInfoText())), h("div", { key: '46793889c3efa38e28171759ea3fb2b22ddcb03c', class: "pagination-controls" }, this.showPageSizeSelector && (h("div", { key: '87eccc7848ef35ad61605d2b9539cf40add8a79c', class: "pagination-page-size" }, h("span", { key: 'b3ff61dceff7cc57240c724150fee5b199a17ed8', class: "pagination-page-size-label" }, this.rowsPerPageLabel), h("select", { key: 'ab2ddd0f5f2b3501ff06d5717f2ed543a3446651', class: "pagination-select", onChange: (e) => this.handlePageSizeChange(e), disabled: this.disabled, "aria-label": "Select page size" }, this.pageSizeOptions.map((size) => (h("option", { key: size, value: String(size), selected: size === this.internalPageSize }, size)))))), h("div", { key: 'fddb9153daa2703afbd384f972332040c76efa25', class: "pagination-nav" }, this.showFirstLastButtons && (h("button", { key: '5637468db69936eb008bf96d8e77ca8c860fa9e2', type: "button", class: "pagination-btn", onClick: this.goToFirst, disabled: !this.canGoPrevious, "aria-label": "Go to first page" }, h("span", { key: '37699a8026bdecf7858d3c5a0aa313f99acd6d28', class: "material-symbols-outlined" }, "first_page"))), h("button", { key: '590190edfc67218a19f647eb562b233d598cbbea', type: "button", class: "pagination-btn", onClick: this.goToPrevious, disabled: !this.canGoPrevious, "aria-label": "Go to previous page" }, h("span", { key: '45881aefbbc5e51adaa451ba3454a73a684613cb', class: "material-symbols-outlined" }, "chevron_left")), h("button", { key: '5d0592a32bba88bbe60f41318d3cd1d03a103f5d', type: "button", class: "pagination-btn", onClick: this.goToNext, disabled: !this.canGoNext, "aria-label": "Go to next page" }, h("span", { key: 'ae875c91c0d56757df0a78dcd645958e08e3ebde', class: "material-symbols-outlined" }, "chevron_right")), this.showFirstLastButtons && (h("button", { key: 'd97749c9c057100f145546b8a163681eb29b7358', type: "button", class: "pagination-btn", onClick: this.goToLast, disabled: !this.canGoNext, "aria-label": "Go to last page" }, h("span", { key: '58adc8bcac84c4af6bc67650e2fef83dfbeaa1e7', class: "material-symbols-outlined" }, "last_page")))))));
+    }
+    static get style() { return bhPaginationCss; }
+}, [769, "bh-pagination", {
+        "page": [1026],
+        "totalItems": [2, "total-items"],
+        "pageSize": [1026, "page-size"],
+        "pageSizeOptions": [16],
+        "showPageSizeSelector": [4, "show-page-size-selector"],
+        "showItemCount": [4, "show-item-count"],
+        "showFirstLastButtons": [4, "show-first-last-buttons"],
+        "size": [1],
+        "disabled": [4],
+        "rowsPerPageLabel": [1, "rows-per-page-label"],
+        "showingResultsLabel": [1, "showing-results-label"],
+        "pageInfoLabel": [1, "page-info-label"],
+        "internalPage": [32],
+        "internalPageSize": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-pagination"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-pagination":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhPagination);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhPagination as B, defineCustomElement as d };
+//# sourceMappingURL=p-CbeeTFys.js.map
+
+//# sourceMappingURL=p-CbeeTFys.js.map