@actabldesign/bellhop-core 0.0.3

package/cjs/bh-date-range-picker.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-date-range-picker.entry.cjs.js","sources":["src/components/bh-date-range-picker/bh-date-range-picker.css?tag=bh-date-range-picker&encapsulation=shadow","src/components/bh-date-range-picker/bh-date-range-picker.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n  display: inline-block;\n  position: relative;\n}\n\n.date-range-picker-container {\n  position: relative;\n  display: inline-block;\n}\n\n.date-range-picker-trigger {\n  cursor: pointer;\n}\n\n.date-range-inputs {\n  display: flex;\n  gap: var(--spacing-md);\n}\n\n.date-range-picker-menu-container {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  margin-top: var(--spacing-xs);\n}\n\n/* Override picker-menu width for date range */\n.date-range-picker-menu-container bh-picker-menu::part(menu) {\n  width: auto;\n}\n\n.date-range-picker-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 999;\n  background: transparent;\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, Listen, h, Host } from '@stencil/core';\nimport { SelectedDate, DisabledDate } from '../bh-date-picker-content/bh-date-picker-content';\nimport { SelectedDateRange } from '../bh-date-range-picker-content/bh-date-range-picker-content';\n\nexport type DateRangePickerVariant = 'dropdown-outlined' | 'dropdown-ghost' | 'input';\n\n@Component({\n  tag: 'bh-date-range-picker',\n  styleUrl: 'bh-date-range-picker.css',\n  shadow: true,\n})\nexport class BhDateRangePicker {\n  /**\n   * Variant of the date range picker trigger\n   */\n  @Prop() variant: DateRangePickerVariant = 'input';\n\n  /**\n   * Minimum year in the picker\n   */\n  @Prop() minYear: number = 1998;\n\n  /**\n   * Maximum year in the picker\n   */\n  @Prop() maxYear: number = 2060;\n\n  /**\n   * Whether the picker is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Array of disabled dates\n   */\n  @Prop() disabledDates: DisabledDate[] = [];\n\n  /**\n   * Label for start date input\n   */\n  @Prop() startLabel: string = 'Start Date';\n\n  /**\n   * Label for end date input\n   */\n  @Prop() endLabel: string = 'End Date';\n\n  /**\n   * Placeholder for start date\n   */\n  @Prop() startPlaceholder: string = 'Choose start date';\n\n  /**\n   * Placeholder for end date\n   */\n  @Prop() endPlaceholder: string = 'Choose end date';\n\n  /**\n   * Width for input variant\n   */\n  @Prop() inputWidth: string = '200px';\n\n  /**\n   * Whether to show the label\n   */\n  @Prop() showLabel: boolean = true;\n\n  /**\n   * Whether to show the footer\n   */\n  @Prop() showFooter: boolean = true;\n\n  /**\n   * Whether to show days from other months\n   */\n  @Prop() showOtherMonthDays: boolean = false;\n\n  /**\n   * Currently selected value\n   */\n  @Prop() value?: SelectedDateRange;\n\n  @State() selectedValue: SelectedDateRange | null = null;\n  @State() tempSelection: SelectedDateRange | null = null;\n  @State() isMenuOpen: boolean = false;\n  @State() isMenuClosing: boolean = false;\n\n  /**\n   * Event emitted when value changes\n   */\n  @Event() bhChange!: EventEmitter<SelectedDateRange | null>;\n\n  /**\n   * Event emitted when a date range is selected\n   */\n  @Event() bhDateRangeSelect!: EventEmitter<SelectedDateRange | null>;\n\n  @Watch('value')\n  handleValueChange(newValue: SelectedDateRange | undefined) {\n    if (newValue !== undefined) {\n      this.selectedValue = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      this.selectedValue = this.value;\n    }\n  }\n\n  private formatDate(date: SelectedDate | null): string {\n    if (!date) return '';\n    const month = (date.month + 1).toString().padStart(2, '0');\n    const day = date.day.toString().padStart(2, '0');\n    return `${month}/${day}/${date.year}`;\n  }\n\n  private getButtonLabel(): string {\n    if (!this.selectedValue || !this.selectedValue.startDate) return 'Select date range';\n\n    const startStr = this.formatDate(this.selectedValue.startDate);\n    const endStr = this.selectedValue.endDate ? this.formatDate(this.selectedValue.endDate) : '';\n\n    if (endStr) {\n      return `${startStr} - ${endStr}`;\n    }\n    return startStr;\n  }\n\n  private handleTriggerClick = () => {\n    if (this.disabled) return;\n    if (!this.isMenuOpen && this.showFooter) {\n      this.tempSelection = this.selectedValue;\n    }\n    this.isMenuOpen = !this.isMenuOpen;\n  };\n\n  @Listen('bhDateRangeSelect')\n  handleDateRangeSelectEvent(event: CustomEvent<SelectedDateRange | null>) {\n    // Stop propagation to prevent the event from bubbling further\n    event.stopPropagation();\n\n    const range = event.detail;\n    if (this.showFooter) {\n      // With footer: update temp selection, user clicks Apply to confirm\n      this.tempSelection = range;\n    } else {\n      // Without footer: update value immediately, close only when range is complete\n      this.selectedValue = range;\n      if (range?.startDate && range?.endDate) {\n        this.bhChange.emit(range);\n        this.bhDateRangeSelect.emit(range);\n        this.closeMenu();\n      }\n    }\n  }\n\n  private handleMenuCancel = () => {\n    this.tempSelection = null;\n    this.closeMenu();\n  };\n\n  private handleMenuApply = () => {\n    if (this.tempSelection) {\n      this.selectedValue = this.tempSelection;\n      this.bhChange.emit(this.tempSelection);\n      this.bhDateRangeSelect.emit(this.tempSelection);\n      this.tempSelection = null;\n    }\n    this.closeMenu();\n  };\n\n  private closeMenu() {\n    this.isMenuClosing = true;\n    setTimeout(() => {\n      this.isMenuOpen = false;\n      this.isMenuClosing = false;\n    }, 150);\n  }\n\n  private handleBackdropClick = () => {\n    this.handleMenuCancel();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"date-range-picker-container\">\n          {/* Dropdown Outlined Variant */}\n          {this.variant === 'dropdown-outlined' && (\n            <div class=\"date-range-picker-trigger\" onClick={this.handleTriggerClick}>\n              <bh-button\n                hierarchy=\"secondary\"\n                \n                size=\"sm\"\n                icon=\"trailing\"\n                label={this.getButtonLabel()}\n                iconName=\"expand_more\"\n                disabled={this.disabled}\n              ></bh-button>\n            </div>\n          )}\n\n          {/* Dropdown Ghost Variant */}\n          {this.variant === 'dropdown-ghost' && (\n            <div class=\"date-range-picker-trigger\" onClick={this.handleTriggerClick}>\n              <bh-button\n                hierarchy=\"tertiary\"\n                \n                size=\"sm\"\n                icon=\"trailing\"\n                label={this.getButtonLabel()}\n                iconName=\"expand_more\"\n                disabled={this.disabled}\n              ></bh-button>\n            </div>\n          )}\n\n          {/* Input Variant */}\n          {this.variant === 'input' && (\n            <div class=\"date-range-picker-trigger\">\n              <div class=\"date-range-inputs\" onClick={this.handleTriggerClick}>\n                <bh-input-text\n                  label={this.startLabel}\n                  placeholder={this.startPlaceholder}\n                  value={this.formatDate(this.selectedValue?.startDate || null)}\n                  disabled={this.disabled}\n                  showTrailingIcon={true}\n                  trailingIcon=\"calendar_today\"\n                  showHelpIcon={false}\n                  showHintText={false}\n                  showLabel={this.showLabel}\n                  width={this.inputWidth}\n                  readOnly={true}\n                ></bh-input-text>\n                <bh-input-text\n                  label={this.endLabel}\n                  placeholder={this.endPlaceholder}\n                  value={this.formatDate(this.selectedValue?.endDate || null)}\n                  disabled={this.disabled}\n                  showTrailingIcon={true}\n                  trailingIcon=\"calendar_today\"\n                  showHelpIcon={false}\n                  showHintText={false}\n                  showLabel={this.showLabel}\n                  width={this.inputWidth}\n                  readOnly={true}\n                ></bh-input-text>\n              </div>\n            </div>\n          )}\n\n          {/* Date Range Picker Menu */}\n          <div class=\"date-range-picker-menu-container\">\n            <bh-picker-menu\n              visible={this.isMenuOpen}\n              showFooter={this.showFooter}\n              disableApply={this.showFooter && (!this.tempSelection?.startDate || !this.tempSelection?.endDate)}\n              onBhCancel={this.handleMenuCancel}\n              onBhApply={this.handleMenuApply}\n            >\n              <bh-date-range-picker-content\n                minYear={this.minYear}\n                maxYear={this.maxYear}\n                disabled={this.disabled}\n                disabledDates={this.disabledDates}\n                showOtherMonthDays={this.showOtherMonthDays}\n                value={this.tempSelection ?? this.selectedValue ?? undefined}\n              ></bh-date-range-picker-content>\n            </bh-picker-menu>\n          </div>\n        </div>\n\n        {/* Backdrop */}\n        {(this.isMenuOpen || this.isMenuClosing) && (\n          <div class=\"date-range-picker-backdrop\" onClick={this.handleBackdropClick}></div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

package/cjs/bh-dropdown-menu.cjs.entry.js

@@ -0,0 +1,114 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhDropdownMenuCss = ":host{display:block}.dropdown-menu{width:240px;background:var(--color-white);border-radius:var(--radius-md);box-shadow:0px 32px 64px -12px rgba(64, 73, 104, 0.14),\n    0px 0px 1px 1px rgba(64, 73, 104, 0.1);overflow:hidden;flex-shrink:0;position:relative;box-sizing:border-box}.animate-dropdown-enter{animation:dropdownEnter 0.15s ease-out forwards}.animate-dropdown-exit{animation:dropdownExit 0.15s ease-in forwards}@keyframes dropdownEnter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes dropdownExit{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}.dropdown-header{padding:var(--spacing-lg) var(--spacing-xl);border-bottom:1px solid var(--color-neutral-200)}.dropdown-header-avatar{padding:var(--spacing-lg) var(--spacing-xl)}.avatar-group{display:flex;align-items:center;gap:var(--spacing-lg);width:100%}.avatar-text{display:flex;flex-direction:column;flex:1;min-width:0}.avatar-name{font-family:var(--font-inter);font-weight:var(--weight-semibold);font-size:var(--text-sm-size);text-align:left;line-height:1.43;color:var(--color-neutral-800);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.avatar-email{font-family:var(--font-inter);font-weight:var(--weight-regular);font-size:var(--text-sm-size);line-height:1.43;color:var(--color-neutral-600);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-title{font-family:var(--font-inter);font-weight:var(--weight-semibold);font-size:var(--text-sm-size);line-height:1.43;color:var(--color-neutral-800);margin:0}.menu-items{padding:var(--spacing-xs) 0}.dropdown-item{padding:var(--spacing-none) var(--spacing-sm);cursor:pointer}.dropdown-item-disabled{opacity:0.5;cursor:not-allowed}.item-content{display:flex;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-md);border-radius:var(--radius-sm);transition:background-color 0.15s ease}.dropdown-item:hover:not(.dropdown-item-disabled) .item-content{background:var(--color-neutral-100)}.item-main{display:flex;align-items:center;gap:var(--spacing-md);flex:1;min-width:0}.item-icon{font-size:var(--icon-size-md, 20px);color:var(--color-neutral-600);flex-shrink:0;display:flex;align-items:center;justify-content:center}.item-text{font-family:var(--font-inter);font-weight:var(--weight-medium);font-size:var(--text-sm-size);line-height:var(--text-sm-line);color:var(--color-neutral-700);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.item-shortcut{font-family:var(--font-inter);font-weight:var(--weight-regular);font-size:var(--text-xs-size);line-height:1.5;color:var(--color-neutral-500);flex-shrink:0}.menu-divider{height:1px;background:var(--color-neutral-200);margin:var(--spacing-xs) 0}.dropdown-menu-scrollable .menu-items{max-height:280px;overflow-y:auto;overflow-x:hidden}.dropdown-menu-scrollable .menu-items::-webkit-scrollbar{width:6px}.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-track{background:var(--color-neutral-50);border-radius:var(--radius-xs)}.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-thumb{background:var(--color-neutral-200);border-radius:var(--radius-xs)}.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-300)}.dropdown-menu-scrollable .menu-items{scrollbar-width:thin;scrollbar-color:var(--color-neutral-200) var(--color-neutral-50)}";
+
+const BhDropdownMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhItemClick = index.createEvent(this, "bhItemClick");
+    }
+    /**
+     * Header configuration (JSON string or object)
+     */
+    header;
+    /**
+     * Menu items array (JSON string or array)
+     */
+    menuItems = [];
+    /**
+     * Whether the menu is visible
+     */
+    visible = true;
+    /**
+     * Whether to show icons in menu items
+     */
+    showIcons = true;
+    /**
+     * Whether the menu should be scrollable
+     */
+    scrollable = false;
+    isClosing = false;
+    shouldRender = true;
+    /**
+     * Event emitted when a menu item is clicked
+     */
+    bhItemClick;
+    get parsedHeader() {
+        if (!this.header)
+            return undefined;
+        if (typeof this.header === 'string') {
+            try {
+                return JSON.parse(this.header);
+            }
+            catch {
+                return undefined;
+            }
+        }
+        return this.header;
+    }
+    get parsedMenuItems() {
+        if (typeof this.menuItems === 'string') {
+            try {
+                return JSON.parse(this.menuItems);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.menuItems || [];
+    }
+    watchVisible(newValue) {
+        if (newValue) {
+            this.shouldRender = true;
+            this.isClosing = false;
+        }
+        else {
+            this.isClosing = true;
+            setTimeout(() => {
+                this.shouldRender = false;
+                this.isClosing = false;
+            }, 150);
+        }
+    }
+    componentWillLoad() {
+        this.shouldRender = this.visible;
+    }
+    handleItemClick(item) {
+        if (!item.disabled && !item.divider) {
+            this.bhItemClick.emit(item);
+        }
+    }
+    getMenuItemClasses(item) {
+        return {
+            'dropdown-item': true,
+            'dropdown-item-disabled': !!item.disabled,
+        };
+    }
+    render() {
+        if (!this.visible) {
+            return null;
+        }
+        const header = this.parsedHeader;
+        const items = this.parsedMenuItems;
+        const dropdownClasses = {
+            'dropdown-menu': true,
+            'dropdown-menu-scrollable': this.scrollable,
+            'animate-dropdown-enter': true,
+            'animate-dropdown-exit': false,
+        };
+        const headerClasses = {
+            'dropdown-header': true,
+            'dropdown-header-avatar': !!header?.avatarGroup,
+        };
+        return (index.h("div", { class: dropdownClasses }, header && (index.h("div", { class: headerClasses }, header.avatarGroup && (index.h("div", { class: "avatar-group" }, index.h("bh-avatar", { size: "md", type: "image", status: "online", imageSrc: header.avatarSrc || '', alt: header.name || 'Avatar' }), index.h("div", { class: "avatar-text" }, index.h("div", { class: "avatar-name" }, header.name), index.h("div", { class: "avatar-email" }, header.email)))), !header.avatarGroup && header.title && (index.h("div", { class: "header-title" }, header.title)))), index.h("div", { class: "menu-items" }, items.map((item) => (index.h("div", { key: item.id }, item.divider && index.h("div", { class: "menu-divider" }), !item.divider && (index.h("div", { class: this.getMenuItemClasses(item), onClick: () => this.handleItemClick(item) }, index.h("div", { class: "item-content" }, index.h("div", { class: "item-main" }, item.icon && this.showIcons && (index.h("span", { class: "material-symbols-outlined item-icon" }, item.icon)), index.h("span", { class: "item-text", title: item.label }, item.label)), item.shortcut && (index.h("span", { class: "item-shortcut" }, item.shortcut)))))))))));
+    }
+    static get watchers() { return {
+        "visible": ["watchVisible"]
+    }; }
+};
+BhDropdownMenu.style = bhDropdownMenuCss;
+
+exports.bh_dropdown_menu = BhDropdownMenu;
+//# sourceMappingURL=bh-dropdown-menu.entry.cjs.js.map

package/cjs/bh-dropdown-menu.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-dropdown-menu.entry.cjs.js","sources":["src/components/bh-dropdown-menu/bh-dropdown-menu.css?tag=bh-dropdown-menu&encapsulation=shadow","src/components/bh-dropdown-menu/bh-dropdown-menu.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-DROPDOWN-MENU COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: block;\n}\n\n/* Base dropdown menu styles */\n.dropdown-menu {\n  width: 240px;\n  background: var(--color-white);\n  border-radius: var(--radius-md);\n  box-shadow: 0px 32px 64px -12px rgba(64, 73, 104, 0.14),\n    0px 0px 1px 1px rgba(64, 73, 104, 0.1);\n  overflow: hidden;\n  flex-shrink: 0;\n  position: relative;\n  box-sizing: border-box;\n}\n\n/* Animation classes */\n.animate-dropdown-enter {\n  animation: dropdownEnter 0.15s ease-out forwards;\n}\n\n.animate-dropdown-exit {\n  animation: dropdownExit 0.15s ease-in forwards;\n}\n\n@keyframes dropdownEnter {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes dropdownExit {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n}\n\n/* ==========================================================================\n   HEADER SECTION\n   ========================================================================== */\n\n.dropdown-header {\n  padding: var(--spacing-lg) var(--spacing-xl);\n  border-bottom: 1px solid var(--color-neutral-200);\n}\n\n.dropdown-header-avatar {\n  padding: var(--spacing-lg) var(--spacing-xl);\n}\n\n.avatar-group {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-lg);\n  width: 100%;\n}\n\n.avatar-text {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n}\n\n.avatar-name {\n  font-family: var(--font-inter);\n  font-weight: var(--weight-semibold);\n  font-size: var(--text-sm-size);\n  text-align: left;\n  line-height: 1.43;\n  color: var(--color-neutral-800);\n  margin: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.avatar-email {\n  font-family: var(--font-inter);\n  font-weight: var(--weight-regular);\n  font-size: var(--text-sm-size);\n  line-height: 1.43;\n  color: var(--color-neutral-600);\n  margin: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.header-title {\n  font-family: var(--font-inter);\n  font-weight: var(--weight-semibold);\n  font-size: var(--text-sm-size);\n  line-height: 1.43;\n  color: var(--color-neutral-800);\n  margin: 0;\n}\n\n/* ==========================================================================\n   MENU ITEMS SECTION\n   ========================================================================== */\n\n.menu-items {\n  padding: var(--spacing-xs) 0;\n}\n\n.dropdown-item {\n  padding: var(--spacing-none) var(--spacing-sm);\n  cursor: pointer;\n}\n\n.dropdown-item-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.item-content {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-lg);\n  padding: var(--spacing-md) var(--spacing-md);\n  border-radius: var(--radius-sm);\n  transition: background-color 0.15s ease;\n}\n\n.dropdown-item:hover:not(.dropdown-item-disabled) .item-content {\n  background: var(--color-neutral-100);\n}\n\n.item-main {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md);\n  flex: 1;\n  min-width: 0;\n}\n\n.item-icon {\n  font-size: var(--icon-size-md, 20px);\n  color: var(--color-neutral-600);\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.item-text {\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-700);\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.item-shortcut {\n  font-family: var(--font-inter);\n  font-weight: var(--weight-regular);\n  font-size: var(--text-xs-size);\n  line-height: 1.5;\n  color: var(--color-neutral-500);\n  flex-shrink: 0;\n}\n\n/* ==========================================================================\n   DIVIDER\n   ========================================================================== */\n\n.menu-divider {\n  height: 1px;\n  background: var(--color-neutral-200);\n  margin: var(--spacing-xs) 0;\n}\n\n/* ==========================================================================\n   SCROLLABLE VARIANT\n   ========================================================================== */\n\n.dropdown-menu-scrollable .menu-items {\n  max-height: 280px;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* Custom scrollbar styling */\n.dropdown-menu-scrollable .menu-items::-webkit-scrollbar {\n  width: 6px;\n}\n\n.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-track {\n  background: var(--color-neutral-50);\n  border-radius: var(--radius-xs);\n}\n\n.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-thumb {\n  background: var(--color-neutral-200);\n  border-radius: var(--radius-xs);\n}\n\n.dropdown-menu-scrollable .menu-items::-webkit-scrollbar-thumb:hover {\n  background: var(--color-neutral-300);\n}\n\n/* Firefox scrollbar */\n.dropdown-menu-scrollable .menu-items {\n  scrollbar-width: thin;\n  scrollbar-color: var(--color-neutral-200) var(--color-neutral-50);\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\nexport interface DropdownMenuItem {\n  id: string;\n  label?: string;\n  icon?: string;\n  shortcut?: string;\n  disabled?: boolean;\n  divider?: boolean;\n}\n\nexport interface DropdownMenuHeader {\n  title?: string;\n  avatarGroup?: boolean;\n  avatarSrc?: string;\n  name?: string;\n  email?: string;\n}\n\n@Component({\n  tag: 'bh-dropdown-menu',\n  styleUrl: 'bh-dropdown-menu.css',\n  shadow: true,\n})\nexport class BhDropdownMenu {\n  /**\n   * Header configuration (JSON string or object)\n   */\n  @Prop() header?: DropdownMenuHeader | string;\n\n  /**\n   * Menu items array (JSON string or array)\n   */\n  @Prop() menuItems: DropdownMenuItem[] | string = [];\n\n  /**\n   * Whether the menu is visible\n   */\n  @Prop() visible: boolean = true;\n\n  /**\n   * Whether to show icons in menu items\n   */\n  @Prop() showIcons: boolean = true;\n\n  /**\n   * Whether the menu should be scrollable\n   */\n  @Prop() scrollable: boolean = false;\n\n  @State() isClosing: boolean = false;\n  @State() shouldRender: boolean = true;\n\n  /**\n   * Event emitted when a menu item is clicked\n   */\n  @Event() bhItemClick!: EventEmitter<DropdownMenuItem>;\n\n  private get parsedHeader(): DropdownMenuHeader | undefined {\n    if (!this.header) return undefined;\n    if (typeof this.header === 'string') {\n      try {\n        return JSON.parse(this.header);\n      } catch {\n        return undefined;\n      }\n    }\n    return this.header;\n  }\n\n  private get parsedMenuItems(): DropdownMenuItem[] {\n    if (typeof this.menuItems === 'string') {\n      try {\n        return JSON.parse(this.menuItems);\n      } catch {\n        return [];\n      }\n    }\n    return this.menuItems || [];\n  }\n\n  @Watch('visible')\n  watchVisible(newValue: boolean) {\n    if (newValue) {\n      this.shouldRender = true;\n      this.isClosing = false;\n    } else {\n      this.isClosing = true;\n      setTimeout(() => {\n        this.shouldRender = false;\n        this.isClosing = false;\n      }, 150);\n    }\n  }\n\n  componentWillLoad() {\n    this.shouldRender = this.visible;\n  }\n\n  private handleItemClick(item: DropdownMenuItem) {\n    if (!item.disabled && !item.divider) {\n      this.bhItemClick.emit(item);\n    }\n  }\n\n  private getMenuItemClasses(item: DropdownMenuItem) {\n    return {\n      'dropdown-item': true,\n      'dropdown-item-disabled': !!item.disabled,\n    };\n  }\n\n  render() {\n    if (!this.visible) {\n      return null;\n    }\n\n    const header = this.parsedHeader;\n    const items = this.parsedMenuItems;\n\n    const dropdownClasses = {\n      'dropdown-menu': true,\n      'dropdown-menu-scrollable': this.scrollable,\n      'animate-dropdown-enter': true,\n      'animate-dropdown-exit': false,\n    };\n\n    const headerClasses = {\n      'dropdown-header': true,\n      'dropdown-header-avatar': !!header?.avatarGroup,\n    };\n\n    return (\n      <div class={dropdownClasses}>\n        {/* Header Section */}\n        {header && (\n          <div class={headerClasses}>\n            {/* Avatar Group Header */}\n            {header.avatarGroup && (\n              <div class=\"avatar-group\">\n                <bh-avatar\n                  size=\"md\"\n                  type=\"image\"\n                  status=\"online\"\n                  imageSrc={header.avatarSrc || ''}\n                  alt={header.name || 'Avatar'}\n                />\n                <div class=\"avatar-text\">\n                  <div class=\"avatar-name\">{header.name}</div>\n                  <div class=\"avatar-email\">{header.email}</div>\n                </div>\n              </div>\n            )}\n            {/* Simple Text Header */}\n            {!header.avatarGroup && header.title && (\n              <div class=\"header-title\">{header.title}</div>\n            )}\n          </div>\n        )}\n\n        {/* Menu Items Section */}\n        <div class=\"menu-items\">\n          {items.map((item) => (\n            <div key={item.id}>\n              {/* Divider */}\n              {item.divider && <div class=\"menu-divider\" />}\n\n              {/* Menu Item */}\n              {!item.divider && (\n                <div\n                  class={this.getMenuItemClasses(item)}\n                  onClick={() => this.handleItemClick(item)}\n                >\n                  <div class=\"item-content\">\n                    <div class=\"item-main\">\n                      {item.icon && this.showIcons && (\n                        <span class=\"material-symbols-outlined item-icon\">\n                          {item.icon}\n                        </span>\n                      )}\n                      <span class=\"item-text\" title={item.label}>\n                        {item.label}\n                      </span>\n                    </div>\n                    {item.shortcut && (\n                      <span class=\"item-shortcut\">{item.shortcut}</span>\n                    )}\n                  </div>\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":["h"],"mappings":"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"}

package/cjs/bh-dropdown.bh-logo-box.bh-nav-item.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-dropdown.bh-logo-box.bh-nav-item.entry.cjs.js","sources":["src/components/bh-dropdown/bh-dropdown.css?tag=bh-dropdown&encapsulation=shadow","src/components/bh-dropdown/bh-dropdown.tsx","src/components/bh-logo-box/bh-logo-box.css?tag=bh-logo-box&encapsulation=shadow","src/components/bh-logo-box/bh-logo-box.tsx","src/components/bh-sidebar/bh-nav-item.css?tag=bh-nav-item&encapsulation=shadow","src/components/bh-sidebar/bh-nav-item.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-DROPDOWN COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n  position: relative;\n}\n\n.dropdown-container {\n  position: relative;\n  display: inline-block;\n}\n\n/* Position the dropdown menu */\n.dropdown-container bh-dropdown-menu {\n  position: absolute;\n  z-index: 1000;\n}\n\n/* Default positioning for button variants (below trigger) */\n.dropdown-container:not(.dropdown-avatar-variant) bh-dropdown-menu {\n  top: 100%;\n  right: 0;\n  margin-top: var(--spacing-sm);\n}\n\n/* Avatar variant positioning (to the left of avatar for sidebars) */\n.dropdown-avatar-variant bh-dropdown-menu {\n  bottom: 0;\n  left: calc(100% + var(--spacing-sm));\n}\n\n/* Avatar trigger styles */\n.dropdown-avatar {\n  cursor: pointer;\n  border-radius: 50%;\n  transition: box-shadow 0.2s ease;\n  outline: none;\n  display: inline-block;\n  user-select: none;\n}\n\n.dropdown-avatar:hover:not(.dropdown-avatar-disabled) {\n  box-shadow: 0 0 0 2px var(--color-neutral-200);\n}\n\n.dropdown-avatar:focus:not(.dropdown-avatar-disabled) {\n  box-shadow: 0 0 0 2px var(--color-brand-500);\n}\n\n.dropdown-avatar-focus {\n  box-shadow: 0 0 0 2px var(--color-brand-500);\n}\n\n.dropdown-avatar-disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Button state when dropdown is open */\n.dropdown-open bh-button {\n  --button-focus-ring: 0 0 0 2px var(--color-brand-100);\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  h,\n  Listen,\n} from '@stencil/core';\nimport type {\n  DropdownMenuItem,\n  DropdownMenuHeader,\n} from '../bh-dropdown-menu/bh-dropdown-menu';\n\nexport type DropdownSize = 'sm' | 'md';\nexport type DropdownState = 'default' | 'focus' | 'disabled';\nexport type DropdownVariant =\n  | 'outlined'\n  | 'ghost'\n  | 'icon-only-outlined'\n  | 'icon-only-ghost'\n  | 'avatar';\n\n@Component({\n  tag: 'bh-dropdown',\n  styleUrl: 'bh-dropdown.css',\n  shadow: true,\n})\nexport class BhDropdown {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Size of the dropdown trigger\n   */\n  @Prop() size: DropdownSize = 'md';\n\n  /**\n   * State of the dropdown\n   */\n  @Prop() state: DropdownState = 'default';\n\n  /**\n   * Visual variant of the dropdown trigger\n   */\n  @Prop() variant: DropdownVariant = 'outlined';\n\n  /**\n   * Label for the dropdown button\n   */\n  @Prop() label: string = 'Options';\n\n  /**\n   * Icon name for icon-only variants\n   */\n  @Prop() iconName: string = 'more_vert';\n\n  /**\n   * Whether the dropdown is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Menu items (JSON string or array)\n   */\n  @Prop() menuItems: DropdownMenuItem[] | string = [];\n\n  /**\n   * Header configuration (JSON string or object)\n   */\n  @Prop() header?: DropdownMenuHeader | string;\n\n  /**\n   * Avatar image source for avatar variant\n   */\n  @Prop() avatarSrc: string = '';\n\n  /**\n   * Avatar alt text\n   */\n  @Prop() avatarAlt: string = 'Avatar';\n\n  /**\n   * Avatar size for avatar variant\n   */\n  @Prop() avatarSize: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Avatar name for header\n   */\n  @Prop() avatarName?: string;\n\n  /**\n   * Avatar email for header\n   */\n  @Prop() avatarEmail?: string;\n\n  /**\n   * Whether to show icons in menu items\n   */\n  @Prop() showIcons: boolean = true;\n\n  @State() isOpen: boolean = false;\n\n  /**\n   * Event emitted when a menu item is clicked\n   */\n  @Event() bhItemClick!: EventEmitter<DropdownMenuItem>;\n\n  @Listen('click', { target: 'document' })\n  handleClickOutside(event: MouseEvent) {\n    if (this.isOpen && !this.el.contains(event.target as Node)) {\n      this.isOpen = false;\n    }\n  }\n\n  private get parsedMenuItems(): DropdownMenuItem[] {\n    if (typeof this.menuItems === 'string') {\n      try {\n        return JSON.parse(this.menuItems);\n      } catch {\n        return [];\n      }\n    }\n    return this.menuItems || [];\n  }\n\n  private get parsedHeader(): DropdownMenuHeader | undefined {\n    if (this.variant === 'avatar') {\n      return {\n        avatarGroup: true,\n        avatarSrc: this.avatarSrc,\n        name: this.avatarName,\n        email: this.avatarEmail,\n      };\n    }\n    if (!this.header) return undefined;\n    if (typeof this.header === 'string') {\n      try {\n        return JSON.parse(this.header);\n      } catch {\n        return undefined;\n      }\n    }\n    return this.header;\n  }\n\n  private toggleDropdown = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleMenuItemClick = (event: CustomEvent<DropdownMenuItem>) => {\n    const item = event.detail;\n    if (!item.disabled) {\n      this.bhItemClick.emit(item);\n      this.isOpen = false;\n    }\n  };\n\n  private get isIconOnly(): boolean {\n    return (\n      this.variant === 'icon-only-outlined' ||\n      this.variant === 'icon-only-ghost'\n    );\n  }\n\n  private get showAvatar(): boolean {\n    return this.variant === 'avatar';\n  }\n\n  private get buttonHierarchy(): 'secondary' | 'tertiary' {\n    return this.variant === 'ghost' || this.variant === 'icon-only-ghost'\n      ? 'tertiary'\n      : 'secondary';\n  }\n\n  render() {\n    const containerClasses = {\n      'dropdown-container': true,\n      'dropdown-open': this.isOpen,\n      'dropdown-avatar-variant': this.variant === 'avatar',\n    };\n\n    const avatarClasses = {\n      'dropdown-avatar': true,\n      'dropdown-avatar-focus': this.isOpen,\n      'dropdown-avatar-disabled': this.disabled,\n    };\n\n    return (\n      <div class={containerClasses}>\n        {/* Button variants */}\n        {!this.showAvatar && (\n          <bh-button\n            hierarchy={this.buttonHierarchy}\n            icon={this.isIconOnly ? 'only' : 'trailing'}\n            size={this.size}\n            label={this.isIconOnly ? '' : this.label}\n            iconName={this.isIconOnly ? this.iconName : 'expand_more'}\n            disabled={this.disabled}\n            onClick={this.toggleDropdown}\n          />\n        )}\n\n        {/* Avatar variant */}\n        {this.showAvatar && (\n          <div\n            class={avatarClasses}\n            onClick={(e) => {\n              if (!this.disabled) {\n                e.stopPropagation();\n                this.toggleDropdown();\n              }\n            }}\n            role=\"button\"\n            tabindex={this.disabled ? -1 : 0}\n            onKeyDown={(e: KeyboardEvent) => {\n              if (!this.disabled && (e.key === 'Enter' || e.key === ' ')) {\n                e.preventDefault();\n                this.toggleDropdown();\n              }\n            }}\n          >\n            <bh-avatar\n              type=\"image\"\n              size={this.avatarSize}\n              imageSrc={this.avatarSrc}\n              alt={this.avatarAlt}\n            />\n          </div>\n        )}\n\n        {/* Menu */}\n        <bh-dropdown-menu\n          visible={this.isOpen}\n          showIcons={this.showIcons}\n          menuItems={JSON.stringify(this.parsedMenuItems)}\n          header={\n            this.parsedHeader ? JSON.stringify(this.parsedHeader) : undefined\n          }\n          onBhItemClick={this.handleMenuItemClick}\n        />\n      </div>\n    );\n  }\n}\n",".logo-box {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n  width: 40px;\n  flex-shrink: 0;\n  isolation: isolate;\n}\n\n.logo-active {\n  background-color: var(--color-brand-600);\n  box-sizing: border-box;\n  display: flex;\n  gap: var(--spacing-lg);\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-sm);\n  position: relative;\n  border-radius: var(--radius-md);\n  flex-shrink: 0;\n  width: 40px;\n  height: 40px;\n  z-index: 2;\n  transition: background-color 0.3s ease;\n  cursor: pointer;\n}\n\n/* Hover effect for logo-active */\n.logo-box:hover .logo-active,\n.logo-box.dropdown-open .logo-active {\n  background-color: var(--color-brand-700);\n}\n\n.logo {\n  overflow: hidden;\n  position: relative;\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  transition: background-image 0.4s cubic-bezier(0.08, 0.52, 0.52, 1);\n}\n\n/* Logo variations - Background images must be configured by the consuming application */\n.logo-actabl {\n  /* background-image should be set by consuming application */\n}\n\n.logo-al {\n  /* background-image should be set by consuming application */\n}\n\n.logo-he {\n  /* background-image should be set by consuming application */\n}\n\n.logo-ps {\n  /* background-image should be set by consuming application */\n}\n\n.logo-tr {\n  /* background-image should be set by consuming application */\n}\n\n.logo-more-products {\n  position: absolute;\n  background-color: var(--color-brand-200);\n  right: 2px;\n  bottom: -4px;\n  border-radius: 5px;\n  width: 36px;\n  height: 35px;\n  z-index: 1;\n  transition: transform 0.3s ease;\n}\n\n/* Slide-up animation for logo-more-products */\n.logo-box:hover .logo-more-products,\n.logo-box.dropdown-open .logo-more-products {\n  transform: translateY(-4px);\n}\n","import { Component, Prop, Event, EventEmitter, State, h, Host } from '@stencil/core';\nimport { BhProduct } from '../bh-product-switcher/bh-product-switcher';\n\nexport type LogoType = 'actabl' | 'al' | 'he' | 'ps' | 'tr';\n\n@Component({\n  tag: 'bh-logo-box',\n  styleUrl: 'bh-logo-box.css',\n  shadow: true,\n})\nexport class BhLogoBox {\n  /**\n   * Type of logo to display\n   */\n  @Prop() logoType: LogoType = 'actabl';\n\n  /**\n   * Array of products to display in the switcher\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 a product is selected\n   */\n  @Event() bhProductSelect!: EventEmitter<BhProduct>;\n\n  @State() isOpen: boolean = false;\n  @State() anchorPosition = { top: 0, left: 0 };\n\n  private logoActiveRef?: HTMLDivElement;\n\n  private handleLogoClick = () => {\n    if (this.logoActiveRef) {\n      const rect = this.logoActiveRef.getBoundingClientRect();\n      this.anchorPosition = {\n        top: rect.bottom + 8,\n        left: rect.left,\n      };\n      this.isOpen = !this.isOpen;\n    }\n  };\n\n  private handleClose = () => {\n    this.isOpen = false;\n  };\n\n  private handleProductSelect = (event: CustomEvent<BhProduct>) => {\n    this.bhProductSelect.emit(event.detail);\n    this.isOpen = false;\n  };\n\n  private getLogoSrc = () => {\n    switch (this.logoType) {\n      case 'actabl':\n        return './assets/logos/actabl.svg';\n      case 'al':\n        return './assets/logos/AL.svg';\n      case 'he':\n        return './assets/logos/HE.svg';\n      case 'ps':\n        return './assets/logos/PS.svg';\n      case 'tr':\n        return './assets/logos/TR.svg';\n      default:\n        return './assets/logos/actabl.svg';\n    }\n  };\n\n  render() {\n    const logoBoxClasses = {\n      'logo-box': true,\n      'dropdown-open': this.isOpen,\n    };\n\n    const logoClasses = {\n      'logo': true,\n      [`logo-${this.logoType}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={logoBoxClasses}>\n          <div\n            ref={(el) => (this.logoActiveRef = el)}\n            class=\"logo-active\"\n            onClick={this.handleLogoClick}\n          >\n            <img\n              src={this.getLogoSrc()}\n              alt={`${this.logoType} logo`}\n              class={logoClasses}\n            />\n          </div>\n          <div class=\"logo-more-products\"></div>\n        </div>\n\n        <bh-product-switcher\n          isOpen={this.isOpen}\n          anchorPosition={this.anchorPosition}\n          products={this.products}\n          onBhClose={this.handleClose}\n          onBhProductSelect={this.handleProductSelect}\n        ></bh-product-switcher>\n      </Host>\n    );\n  }\n}\n","/* ==========================================================================\n   BH-NAV-ITEM COMPONENT STYLES\n   Navigation item for sidebar navigation\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n.nav-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n  max-width: 52px;\n  height: fit-content;\n}\n\n.nav-item-button {\n  background-color: var(--color-white);\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  padding: var(--spacing-md);\n  position: relative;\n  border-radius: var(--radius-sm);\n  flex-shrink: 0;\n  transition: background-color 0.2s ease;\n  cursor: pointer;\n  border: none;\n  outline: none;\n}\n\n.nav-item-button:hover {\n  background-color: var(--color-neutral-50);\n}\n\n.nav-item-button:focus-visible {\n  box-shadow: 0 0 0 2px var(--color-brand-100);\n}\n\n.nav-item.active .nav-item-button {\n  background-color: var(--color-brand-50);\n}\n\n.nav-item-button .icon {\n  width: 20px;\n  height: 20px;\n  display: block;\n  flex-shrink: 0;\n  color: var(--color-neutral-500);\n  transition: color 0.2s ease;\n  font-size: 20px;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;\n}\n\n.nav-item-button:hover .icon {\n  color: var(--color-neutral-700);\n}\n\n.nav-item.active .nav-item-button .icon {\n  color: var(--color-brand-600);\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;\n}\n\n.nav-item-label {\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  height: 18px;\n  line-height: 18px;\n  font-style: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  position: relative;\n  flex-shrink: 0;\n  color: var(--color-neutral-700);\n  font-size: 10px;\n  text-align: center;\n  white-space: nowrap;\n  width: 100%;\n  max-width: 100%;\n  margin: var(--spacing-none);\n  margin-top: var(--spacing-xxs);\n  box-sizing: border-box;\n  direction: ltr;\n}\n\n.nav-item.active .nav-item-label {\n  color: var(--color-neutral-700);\n  font-weight: var(--weight-semibold);\n}\n\n/* Disabled state */\n.nav-item.disabled .nav-item-button {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.nav-item.disabled .nav-item-button:hover {\n  background-color: var(--color-white);\n}\n\n.nav-item.disabled .nav-item-button .icon {\n  color: var(--color-neutral-400);\n}\n\n.nav-item.disabled .nav-item-label {\n  color: var(--color-neutral-400);\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n@Component({\n  tag: 'bh-nav-item',\n  styleUrl: 'bh-nav-item.css',\n  shadow: true,\n})\nexport class BhNavItem {\n  /**\n   * Material Symbols icon name\n   */\n  @Prop() icon: string = 'home';\n\n  /**\n   * Label text displayed below the icon\n   */\n  @Prop() label: string = 'Home';\n\n  /**\n   * Whether the nav item is active/selected\n   */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * Whether the nav item is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Event emitted when the nav item is clicked\n   */\n  @Event() bhClick!: EventEmitter<void>;\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      this.bhClick.emit();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {\n      event.preventDefault();\n      this.bhClick.emit();\n    }\n  };\n\n  render() {\n    const navItemClasses = {\n      'nav-item': true,\n      'active': this.isActive,\n      'disabled': this.disabled,\n    };\n\n    return (\n      <div class={navItemClasses}>\n        <button\n          class=\"nav-item-button\"\n          aria-label={this.label}\n          type=\"button\"\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          disabled={this.disabled}\n          tabIndex={this.disabled ? -1 : 0}\n        >\n          <span class=\"material-symbols-outlined icon\">{this.icon}</span>\n        </button>\n        <p class=\"nav-item-label\">{this.label}</p>\n      </div>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

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

@@ -0,0 +1,307 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhDropdownCss = ":host{display:inline-block;position:relative}.dropdown-container{position:relative;display:inline-block}.dropdown-container bh-dropdown-menu{position:absolute;z-index:1000}.dropdown-container:not(.dropdown-avatar-variant) bh-dropdown-menu{top:100%;right:0;margin-top:var(--spacing-sm)}.dropdown-avatar-variant bh-dropdown-menu{bottom:0;left:calc(100% + var(--spacing-sm))}.dropdown-avatar{cursor:pointer;border-radius:50%;transition:box-shadow 0.2s ease;outline:none;display:inline-block;user-select:none}.dropdown-avatar:hover:not(.dropdown-avatar-disabled){box-shadow:0 0 0 2px var(--color-neutral-200)}.dropdown-avatar:focus:not(.dropdown-avatar-disabled){box-shadow:0 0 0 2px var(--color-brand-500)}.dropdown-avatar-focus{box-shadow:0 0 0 2px var(--color-brand-500)}.dropdown-avatar-disabled{cursor:not-allowed;opacity:0.5}.dropdown-open bh-button{--button-focus-ring:0 0 0 2px var(--color-brand-100)}";
+
+const BhDropdown = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhItemClick = index.createEvent(this, "bhItemClick");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Size of the dropdown trigger
+     */
+    size = 'md';
+    /**
+     * State of the dropdown
+     */
+    state = 'default';
+    /**
+     * Visual variant of the dropdown trigger
+     */
+    variant = 'outlined';
+    /**
+     * Label for the dropdown button
+     */
+    label = 'Options';
+    /**
+     * Icon name for icon-only variants
+     */
+    iconName = 'more_vert';
+    /**
+     * Whether the dropdown is disabled
+     */
+    disabled = false;
+    /**
+     * Menu items (JSON string or array)
+     */
+    menuItems = [];
+    /**
+     * Header configuration (JSON string or object)
+     */
+    header;
+    /**
+     * Avatar image source for avatar variant
+     */
+    avatarSrc = '';
+    /**
+     * Avatar alt text
+     */
+    avatarAlt = 'Avatar';
+    /**
+     * Avatar size for avatar variant
+     */
+    avatarSize = 'md';
+    /**
+     * Avatar name for header
+     */
+    avatarName;
+    /**
+     * Avatar email for header
+     */
+    avatarEmail;
+    /**
+     * Whether to show icons in menu items
+     */
+    showIcons = true;
+    isOpen = false;
+    /**
+     * Event emitted when a menu item is clicked
+     */
+    bhItemClick;
+    handleClickOutside(event) {
+        if (this.isOpen && !this.el.contains(event.target)) {
+            this.isOpen = false;
+        }
+    }
+    get parsedMenuItems() {
+        if (typeof this.menuItems === 'string') {
+            try {
+                return JSON.parse(this.menuItems);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.menuItems || [];
+    }
+    get parsedHeader() {
+        if (this.variant === 'avatar') {
+            return {
+                avatarGroup: true,
+                avatarSrc: this.avatarSrc,
+                name: this.avatarName,
+                email: this.avatarEmail,
+            };
+        }
+        if (!this.header)
+            return undefined;
+        if (typeof this.header === 'string') {
+            try {
+                return JSON.parse(this.header);
+            }
+            catch {
+                return undefined;
+            }
+        }
+        return this.header;
+    }
+    toggleDropdown = () => {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+    };
+    handleMenuItemClick = (event) => {
+        const item = event.detail;
+        if (!item.disabled) {
+            this.bhItemClick.emit(item);
+            this.isOpen = false;
+        }
+    };
+    get isIconOnly() {
+        return (this.variant === 'icon-only-outlined' ||
+            this.variant === 'icon-only-ghost');
+    }
+    get showAvatar() {
+        return this.variant === 'avatar';
+    }
+    get buttonHierarchy() {
+        return this.variant === 'ghost' || this.variant === 'icon-only-ghost'
+            ? 'tertiary'
+            : 'secondary';
+    }
+    render() {
+        const containerClasses = {
+            'dropdown-container': true,
+            'dropdown-open': this.isOpen,
+            'dropdown-avatar-variant': this.variant === 'avatar',
+        };
+        const avatarClasses = {
+            'dropdown-avatar': true,
+            'dropdown-avatar-focus': this.isOpen,
+            'dropdown-avatar-disabled': this.disabled,
+        };
+        return (index.h("div", { key: '203d4ee8afd1f081c90d19e3befb59794658bb86', class: containerClasses }, !this.showAvatar && (index.h("bh-button", { key: '43362ec4952a03d0b26676ac7b7a066e122da142', hierarchy: this.buttonHierarchy, icon: this.isIconOnly ? 'only' : 'trailing', size: this.size, label: this.isIconOnly ? '' : this.label, iconName: this.isIconOnly ? this.iconName : 'expand_more', disabled: this.disabled, onClick: this.toggleDropdown })), this.showAvatar && (index.h("div", { key: '44221c66ba3b6ed22dd877baf9d382d1408c8878', class: avatarClasses, onClick: (e) => {
+                if (!this.disabled) {
+                    e.stopPropagation();
+                    this.toggleDropdown();
+                }
+            }, role: "button", tabindex: this.disabled ? -1 : 0, onKeyDown: (e) => {
+                if (!this.disabled && (e.key === 'Enter' || e.key === ' ')) {
+                    e.preventDefault();
+                    this.toggleDropdown();
+                }
+            } }, index.h("bh-avatar", { key: '0eb6fd5ae65d93c996ba703f1ab044227760f78f', type: "image", size: this.avatarSize, imageSrc: this.avatarSrc, alt: this.avatarAlt }))), index.h("bh-dropdown-menu", { key: '5f5dc22d2983af6ba6f5331e4c2259555ed6d498', visible: this.isOpen, showIcons: this.showIcons, menuItems: JSON.stringify(this.parsedMenuItems), header: this.parsedHeader ? JSON.stringify(this.parsedHeader) : undefined, onBhItemClick: this.handleMenuItemClick })));
+    }
+};
+BhDropdown.style = bhDropdownCss;
+
+const bhLogoBoxCss = ".logo-box{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative;width:40px;flex-shrink:0;isolation:isolate}.logo-active{background-color:var(--color-brand-600);box-sizing:border-box;display:flex;gap:var(--spacing-lg);align-items:center;justify-content:center;padding:var(--spacing-sm);position:relative;border-radius:var(--radius-md);flex-shrink:0;width:40px;height:40px;z-index:2;transition:background-color 0.3s ease;cursor:pointer}.logo-box:hover .logo-active,.logo-box.dropdown-open .logo-active{background-color:var(--color-brand-700)}.logo{overflow:hidden;position:relative;flex-shrink:0;width:32px;height:32px;background-size:contain;background-repeat:no-repeat;background-position:center;transition:background-image 0.4s cubic-bezier(0.08, 0.52, 0.52, 1)}.logo-actabl{}.logo-al{}.logo-he{}.logo-ps{}.logo-tr{}.logo-more-products{position:absolute;background-color:var(--color-brand-200);right:2px;bottom:-4px;border-radius:5px;width:36px;height:35px;z-index:1;transition:transform 0.3s ease}.logo-box:hover .logo-more-products,.logo-box.dropdown-open .logo-more-products{transform:translateY(-4px)}";
+
+const BhLogoBox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhProductSelect = index.createEvent(this, "bhProductSelect");
+    }
+    /**
+     * Type of logo to display
+     */
+    logoType = 'actabl';
+    /**
+     * Array of products to display in the switcher
+     */
+    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 a product is selected
+     */
+    bhProductSelect;
+    isOpen = false;
+    anchorPosition = { top: 0, left: 0 };
+    logoActiveRef;
+    handleLogoClick = () => {
+        if (this.logoActiveRef) {
+            const rect = this.logoActiveRef.getBoundingClientRect();
+            this.anchorPosition = {
+                top: rect.bottom + 8,
+                left: rect.left,
+            };
+            this.isOpen = !this.isOpen;
+        }
+    };
+    handleClose = () => {
+        this.isOpen = false;
+    };
+    handleProductSelect = (event) => {
+        this.bhProductSelect.emit(event.detail);
+        this.isOpen = false;
+    };
+    getLogoSrc = () => {
+        switch (this.logoType) {
+            case 'actabl':
+                return './assets/logos/actabl.svg';
+            case 'al':
+                return './assets/logos/AL.svg';
+            case 'he':
+                return './assets/logos/HE.svg';
+            case 'ps':
+                return './assets/logos/PS.svg';
+            case 'tr':
+                return './assets/logos/TR.svg';
+            default:
+                return './assets/logos/actabl.svg';
+        }
+    };
+    render() {
+        const logoBoxClasses = {
+            'logo-box': true,
+            'dropdown-open': this.isOpen,
+        };
+        const logoClasses = {
+            'logo': true,
+            [`logo-${this.logoType}`]: true,
+        };
+        return (index.h(index.Host, { key: '7701200e2297867a3188f74663d5dcfc3c1bddbe' }, index.h("div", { key: 'c625d8d74cd94e2e2abfa283f45a79a6928e3868', class: logoBoxClasses }, index.h("div", { key: 'bcc3c1e4dfd02e590264ac1075632af0c0626edb', ref: (el) => (this.logoActiveRef = el), class: "logo-active", onClick: this.handleLogoClick }, index.h("img", { key: '592a65fe63945bcb878a0065c4427f19e1bac041', src: this.getLogoSrc(), alt: `${this.logoType} logo`, class: logoClasses })), index.h("div", { key: '552fbdbb59627349a60f86724677cbec7403ddf8', class: "logo-more-products" })), index.h("bh-product-switcher", { key: '588e16d9ad19f15c2c46509562ca78bd0aa5f7ae', isOpen: this.isOpen, anchorPosition: this.anchorPosition, products: this.products, onBhClose: this.handleClose, onBhProductSelect: this.handleProductSelect })));
+    }
+};
+BhLogoBox.style = bhLogoBoxCss;
+
+const bhNavItemCss = ":host{display:inline-block}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative;flex-shrink:0;width:100%;max-width:52px;height:fit-content}.nav-item-button{background-color:var(--color-white);box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:var(--spacing-md);position:relative;border-radius:var(--radius-sm);flex-shrink:0;transition:background-color 0.2s ease;cursor:pointer;border:none;outline:none}.nav-item-button:hover{background-color:var(--color-neutral-50)}.nav-item-button:focus-visible{box-shadow:0 0 0 2px var(--color-brand-100)}.nav-item.active .nav-item-button{background-color:var(--color-brand-50)}.nav-item-button .icon{width:20px;height:20px;display:block;flex-shrink:0;color:var(--color-neutral-500);transition:color 0.2s ease;font-size:20px;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20}.nav-item-button:hover .icon{color:var(--color-neutral-700)}.nav-item.active .nav-item-button .icon{color:var(--color-brand-600);font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20}.nav-item-label{font-family:var(--font-inter);font-weight:var(--weight-medium);height:18px;line-height:18px;font-style:normal;overflow:hidden;text-overflow:ellipsis;position:relative;flex-shrink:0;color:var(--color-neutral-700);font-size:10px;text-align:center;white-space:nowrap;width:100%;max-width:100%;margin:var(--spacing-none);margin-top:var(--spacing-xxs);box-sizing:border-box;direction:ltr}.nav-item.active .nav-item-label{color:var(--color-neutral-700);font-weight:var(--weight-semibold)}.nav-item.disabled .nav-item-button{cursor:not-allowed;opacity:0.5}.nav-item.disabled .nav-item-button:hover{background-color:var(--color-white)}.nav-item.disabled .nav-item-button .icon{color:var(--color-neutral-400)}.nav-item.disabled .nav-item-label{color:var(--color-neutral-400)}";
+
+const BhNavItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhClick = index.createEvent(this, "bhClick");
+    }
+    /**
+     * Material Symbols icon name
+     */
+    icon = 'home';
+    /**
+     * Label text displayed below the icon
+     */
+    label = 'Home';
+    /**
+     * Whether the nav item is active/selected
+     */
+    isActive = false;
+    /**
+     * Whether the nav item is disabled
+     */
+    disabled = false;
+    /**
+     * Event emitted when the nav item is clicked
+     */
+    bhClick;
+    handleClick = () => {
+        if (!this.disabled) {
+            this.bhClick.emit();
+        }
+    };
+    handleKeyDown = (event) => {
+        if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {
+            event.preventDefault();
+            this.bhClick.emit();
+        }
+    };
+    render() {
+        const navItemClasses = {
+            'nav-item': true,
+            'active': this.isActive,
+            'disabled': this.disabled,
+        };
+        return (index.h("div", { key: 'eff7adc93f70b788035ee175f06b84dfaa3eafaa', class: navItemClasses }, index.h("button", { key: '37cf2ec326fd00b03c71967e5395a9a64fabac2d', class: "nav-item-button", "aria-label": this.label, type: "button", onClick: this.handleClick, onKeyDown: this.handleKeyDown, disabled: this.disabled, tabIndex: this.disabled ? -1 : 0 }, index.h("span", { key: '098fb47a65ed3b3e2409273ae7932c820870484d', class: "material-symbols-outlined icon" }, this.icon)), index.h("p", { key: '112cc6fae3e4f5e9c44e2ffab69e86908b35c629', class: "nav-item-label" }, this.label)));
+    }
+};
+BhNavItem.style = bhNavItemCss;
+
+exports.bh_dropdown = BhDropdown;
+exports.bh_logo_box = BhLogoBox;
+exports.bh_nav_item = BhNavItem;
+//# sourceMappingURL=bh-dropdown.bh-logo-box.bh-nav-item.entry.cjs.js.map

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

@@ -0,0 +1,41 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhFeaturedIconCss = ":host{display:inline-block}.featured-icon{display:inline-flex;align-items:center;justify-content:center;transition:all 0.2s ease}.featured-icon-sm{width:32px;height:32px;border-radius:6px}.featured-icon-md{width:40px;height:40px;border-radius:8px}.featured-icon-lg{width:48px;height:48px;border-radius:10px}.featured-icon-xl{width:56px;height:56px;border-radius:12px}.icon-sm{font-size:var(--icon-size-xs);width:var(--icon-size-xs);height:var(--icon-size-xs);line-height:1}.icon-md{font-size:var(--icon-size-md);width:var(--icon-size-md);height:var(--icon-size-md);line-height:1}.icon-lg{font-size:var(--icon-size-lg);width:var(--icon-size-lg);height:var(--icon-size-lg);line-height:1}.icon-xl{font-size:var(--icon-size-2xl);width:var(--icon-size-2xl);height:var(--icon-size-2xl);line-height:1}.featured-icon-brand.featured-icon-outlined{background-color:transparent;border:1px solid var(--color-neutral-200)}.featured-icon-brand.featured-icon-outlined .material-symbols-outlined{color:var(--color-brand-600)}.featured-icon-gray.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-gray.featured-icon-outlined .material-symbols-outlined{color:var(--color-neutral-600)}.featured-icon-error.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-error.featured-icon-outlined .material-symbols-outlined{color:var(--color-error-600)}.featured-icon-warning.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-warning.featured-icon-outlined .material-symbols-outlined{color:var(--color-warning-600)}.featured-icon-success.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-success.featured-icon-outlined .material-symbols-outlined{color:var(--color-success-600)}.featured-icon-highlight.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-highlight.featured-icon-outlined .material-symbols-outlined{color:var(--color-purple-600)}.featured-icon-brand.featured-icon-filled{background-color:var(--color-brand-100);border:none}.featured-icon-brand.featured-icon-filled .material-symbols-outlined{color:var(--color-brand-600)}.featured-icon-gray.featured-icon-filled{background-color:var(--color-neutral-100);border:none}.featured-icon-gray.featured-icon-filled .material-symbols-outlined{color:var(--color-neutral-600)}.featured-icon-error.featured-icon-filled{background-color:var(--color-error-100);border:none}.featured-icon-error.featured-icon-filled .material-symbols-outlined{color:var(--color-error-600)}.featured-icon-warning.featured-icon-filled{background-color:var(--color-warning-200);border:none}.featured-icon-warning.featured-icon-filled .material-symbols-outlined{color:var(--color-warning-600)}.featured-icon-success.featured-icon-filled{background-color:var(--color-success-100);border:none}.featured-icon-success.featured-icon-filled .material-symbols-outlined{color:var(--color-success-600)}.featured-icon-highlight.featured-icon-filled{background-color:var(--color-purple-200);border:none}.featured-icon-highlight.featured-icon-filled .material-symbols-outlined{color:var(--color-purple-600)}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;user-select:none}";
+
+const BhFeaturedIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * The size of the featured icon
+     */
+    size = 'md';
+    /**
+     * The color theme of the featured icon
+     */
+    color = 'gray';
+    /**
+     * The style variant (outlined or filled)
+     */
+    iconStyle = 'outlined';
+    /**
+     * The Material Symbol icon name
+     */
+    icon = 'star';
+    render() {
+        const containerClasses = {
+            'featured-icon': true,
+            [`featured-icon-${this.size}`]: true,
+            [`featured-icon-${this.color}`]: true,
+            [`featured-icon-${this.iconStyle}`]: true,
+        };
+        const iconClasses = `material-symbols-outlined icon-${this.size}`;
+        return (index.h("div", { key: 'f28b347b9594d65de9d253da980bd43da0d02055', class: containerClasses, part: "container" }, index.h("span", { key: '9986022247eb8e6f3cde419b22d5f277796386f3', class: iconClasses }, this.icon)));
+    }
+};
+BhFeaturedIcon.style = bhFeaturedIconCss;
+
+exports.bh_featured_icon = BhFeaturedIcon;
+//# sourceMappingURL=bh-featured-icon.entry.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-featured-icon.entry.cjs.js","sources":["src/components/bh-featured-icon/bh-featured-icon.css?tag=bh-featured-icon&encapsulation=shadow","src/components/bh-featured-icon/bh-featured-icon.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-FEATURED-ICON COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n.featured-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n}\n\n/* Size variations */\n.featured-icon-sm {\n  width: 32px;\n  height: 32px;\n  border-radius: 6px;\n}\n\n.featured-icon-md {\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n}\n\n.featured-icon-lg {\n  width: 48px;\n  height: 48px;\n  border-radius: 10px;\n}\n\n.featured-icon-xl {\n  width: 56px;\n  height: 56px;\n  border-radius: 12px;\n}\n\n/* Icon sizes - matching Figma specs */\n.icon-sm {\n  font-size: var(--icon-size-xs);\n  width: var(--icon-size-xs);\n  height: var(--icon-size-xs);\n  line-height: 1;\n}\n\n.icon-md {\n  font-size: var(--icon-size-md);\n  width: var(--icon-size-md);\n  height: var(--icon-size-md);\n  line-height: 1;\n}\n\n.icon-lg {\n  font-size: var(--icon-size-lg);\n  width: var(--icon-size-lg);\n  height: var(--icon-size-lg);\n  line-height: 1;\n}\n\n.icon-xl {\n  font-size: var(--icon-size-2xl);\n  width: var(--icon-size-2xl);\n  height: var(--icon-size-2xl);\n  line-height: 1;\n}\n\n/* ============================================\n   OUTLINED STYLES\n   ============================================ */\n\n/* Brand color - Outlined */\n.featured-icon-brand.featured-icon-outlined {\n  background-color: transparent;\n  border: 1px solid var(--color-neutral-200);\n}\n\n.featured-icon-brand.featured-icon-outlined .material-symbols-outlined {\n  color: var(--color-brand-600);\n}\n\n/* Gray color - Outlined */\n.featured-icon-gray.featured-icon-outlined {\n  border: 1px solid var(--color-neutral-200);\n}\n\n.featured-icon-gray.featured-icon-outlined .material-symbols-outlined {\n  color: var(--color-neutral-600);\n}\n\n/* Error color - Outlined */\n.featured-icon-error.featured-icon-outlined {\n  border: 1px solid var(--color-neutral-200);\n}\n\n.featured-icon-error.featured-icon-outlined .material-symbols-outlined {\n  color: var(--color-error-600);\n}\n\n/* Warning color - Outlined */\n.featured-icon-warning.featured-icon-outlined {\n  border: 1px solid var(--color-neutral-200);\n}\n\n.featured-icon-warning.featured-icon-outlined .material-symbols-outlined {\n  color: var(--color-warning-600);\n}\n\n/* Success color - Outlined */\n.featured-icon-success.featured-icon-outlined {\n  border: 1px solid var(--color-neutral-200);\n}\n\n.featured-icon-success.featured-icon-outlined .material-symbols-outlined {\n  color: var(--color-success-600);\n}\n\n/* Highlight color - Outlined */\n.featured-icon-highlight.featured-icon-outlined {\n  border: 1px solid var(--color-neutral-200);\n}\n\n.featured-icon-highlight.featured-icon-outlined .material-symbols-outlined {\n  color: var(--color-purple-600);\n}\n\n/* ============================================\n   FILLED STYLES\n   ============================================ */\n\n/* Brand color - Filled */\n.featured-icon-brand.featured-icon-filled {\n  background-color: var(--color-brand-100);\n  border: none;\n}\n\n.featured-icon-brand.featured-icon-filled .material-symbols-outlined {\n  color: var(--color-brand-600);\n}\n\n/* Gray color - Filled */\n.featured-icon-gray.featured-icon-filled {\n  background-color: var(--color-neutral-100);\n  border: none;\n}\n\n.featured-icon-gray.featured-icon-filled .material-symbols-outlined {\n  color: var(--color-neutral-600);\n}\n\n/* Error color - Filled */\n.featured-icon-error.featured-icon-filled {\n  background-color: var(--color-error-100);\n  border: none;\n}\n\n.featured-icon-error.featured-icon-filled .material-symbols-outlined {\n  color: var(--color-error-600);\n}\n\n/* Warning color - Filled */\n.featured-icon-warning.featured-icon-filled {\n  background-color: var(--color-warning-200);\n  border: none;\n}\n\n.featured-icon-warning.featured-icon-filled .material-symbols-outlined {\n  color: var(--color-warning-600);\n}\n\n/* Success color - Filled */\n.featured-icon-success.featured-icon-filled {\n  background-color: var(--color-success-100);\n  border: none;\n}\n\n.featured-icon-success.featured-icon-filled .material-symbols-outlined {\n  color: var(--color-success-600);\n}\n\n/* Highlight color - Filled */\n.featured-icon-highlight.featured-icon-filled {\n  background-color: var(--color-purple-200);\n  border: none;\n}\n\n.featured-icon-highlight.featured-icon-filled .material-symbols-outlined {\n  color: var(--color-purple-600);\n}\n\n/* Material Symbols base styles */\n.material-symbols-outlined {\n  font-family: 'Material Symbols Outlined';\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n  user-select: none;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type FeaturedIconSize = 'sm' | 'md' | 'lg' | 'xl';\nexport type FeaturedIconColor = 'brand' | 'gray' | 'error' | 'warning' | 'success' | 'highlight';\nexport type FeaturedIconStyle = 'outlined' | 'filled';\n\n@Component({\n  tag: 'bh-featured-icon',\n  styleUrl: 'bh-featured-icon.css',\n  shadow: true,\n})\nexport class BhFeaturedIcon {\n  /**\n   * The size of the featured icon\n   */\n  @Prop() size: FeaturedIconSize = 'md';\n\n  /**\n   * The color theme of the featured icon\n   */\n  @Prop() color: FeaturedIconColor = 'gray';\n\n  /**\n   * The style variant (outlined or filled)\n   */\n  @Prop() iconStyle: FeaturedIconStyle = 'outlined';\n\n  /**\n   * The Material Symbol icon name\n   */\n  @Prop() icon: string = 'star';\n\n  render() {\n    const containerClasses = {\n      'featured-icon': true,\n      [`featured-icon-${this.size}`]: true,\n      [`featured-icon-${this.color}`]: true,\n      [`featured-icon-${this.iconStyle}`]: true,\n    };\n\n    const iconClasses = `material-symbols-outlined icon-${this.size}`;\n\n    return (\n      <div class={containerClasses} part=\"container\">\n        <span class={iconClasses}>{this.icon}</span>\n      </div>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,4tGAA4tG;;MCWzuG,cAAc,GAAA,MAAA;;;;AACzB;;AAEG;IACK,IAAI,GAAqB,IAAI;AAErC;;AAEG;IACK,KAAK,GAAsB,MAAM;AAEzC;;AAEG;IACK,SAAS,GAAsB,UAAU;AAEjD;;AAEG;IACK,IAAI,GAAW,MAAM;IAE7B,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AACpC,YAAA,CAAC,iBAAiB,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,iBAAiB,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;SAC1C;AAED,QAAA,MAAM,WAAW,GAAG,CAAA,+BAAA,EAAkC,IAAI,CAAC,IAAI,EAAE;AAEjE,QAAA,QACEA,kEAAK,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAC,WAAW,EAAA,EAC5CA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,WAAW,EAAG,EAAA,IAAI,CAAC,IAAI,CAAQ,CACxC;;;;;;;"}