@actabldesign/bellhop-core 0.0.3

package/cjs/bh-accordion-item.cjs.entry.js

@@ -0,0 +1,82 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhAccordionItemCss = ":host{display:flex;flex-direction:column;width:100%;background-color:var(--color-white)}.accordion-header{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg);padding:var(--spacing-lg) var(--spacing-2xl);cursor:pointer;background-color:var(--color-white);border:none;border-bottom:1px solid var(--color-neutral-100);transition:background-color 0.15s ease}.accordion-header:hover{background-color:var(--color-neutral-25)}.accordion-header:focus{outline:none}.accordion-header:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:-2px}.accordion-header-content{display:flex;flex-direction:column;gap:var(--spacing-xxs);flex:1;min-width:0}.accordion-title{font-family:var(--font-family-body);font-size:var(--font-size-text-md);font-weight:var(--font-weight-semibold);line-height:var(--line-height-text-md);color:var(--color-neutral-900)}.accordion-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:24px;color:var(--color-neutral-500);transition:transform 0.2s ease;flex-shrink:0}.accordion-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.2s ease;overflow:hidden}.accordion-content-inner{min-height:0;overflow:hidden}:host(.accordion-item-expanded) .accordion-header{border-bottom-color:transparent}:host(.accordion-item-expanded) .accordion-content{grid-template-rows:1fr}:host(.accordion-item-expanded) .accordion-content-inner{padding:var(--spacing-lg) var(--spacing-2xl) var(--spacing-2xl);border-bottom:1px solid var(--color-neutral-100)}:host(.accordion-item-disabled){opacity:0.5;pointer-events:none}:host(.accordion-item-disabled) .accordion-header{cursor:not-allowed}:host(.accordion-item-animating) .accordion-content-inner{overflow:hidden}";
+
+const BhAccordionItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhAccordionToggle = index.createEvent(this, "bhAccordionToggle");
+        this.bhAccordionClick = index.createEvent(this, "bhAccordionClick");
+    }
+    /**
+     * Unique identifier for this accordion item
+     */
+    value;
+    /**
+     * The header/title text for the accordion item
+     */
+    header;
+    /**
+     * Whether this accordion item is currently expanded
+     */
+    expanded = false;
+    /**
+     * Whether this accordion item is disabled
+     */
+    disabled = false;
+    /**
+     * Internal state for animation
+     */
+    isAnimating = false;
+    /**
+     * Emitted when the accordion item is toggled
+     */
+    bhAccordionToggle;
+    /**
+     * Emitted when the accordion header is clicked
+     */
+    bhAccordionClick;
+    handleExpandedChange() {
+        this.isAnimating = true;
+        setTimeout(() => {
+            this.isAnimating = false;
+        }, 200);
+    }
+    handleHeaderClick = () => {
+        if (this.disabled)
+            return;
+        this.expanded = !this.expanded;
+        this.bhAccordionClick.emit(this.value);
+        this.bhAccordionToggle.emit({
+            value: this.value,
+            expanded: this.expanded,
+        });
+    };
+    handleKeyDown = (event) => {
+        if (this.disabled)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleHeaderClick();
+        }
+    };
+    render() {
+        const hostClasses = {
+            'accordion-item': true,
+            'accordion-item-expanded': this.expanded,
+            'accordion-item-disabled': this.disabled,
+            'accordion-item-animating': this.isAnimating,
+        };
+        const iconName = this.expanded ? 'expand_less' : 'expand_more';
+        return (index.h(index.Host, { key: 'b2670121b2a9706343aa29a5cf1ac1d033ece042', class: hostClasses }, index.h("div", { key: 'e18a7443b248bbba0706a39f5a65e0c804e5bae5', class: "accordion-header", part: "header", role: "button", tabindex: this.disabled ? -1 : 0, "aria-expanded": this.expanded ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-controls": `content-${this.value}`, onClick: this.handleHeaderClick, onKeyDown: this.handleKeyDown }, index.h("div", { key: 'a5a3be10f39bd63eb31d7b6a90b40f0714866ae5', class: "accordion-header-content" }, index.h("span", { key: '5d3ff7b6e69fab0e3658873dec49793972f2c0d5', class: "accordion-title", part: "title" }, this.header)), index.h("span", { key: 'e18cfab4d73e6d41d40c275888a584b1bb117d23', class: "accordion-icon material-symbols-outlined", part: "icon" }, iconName)), index.h("div", { key: 'd96ba43717314f6787f513f664b282391c4f8cf0', id: `content-${this.value}`, class: "accordion-content", part: "content", role: "region", "aria-labelledby": `header-${this.value}`, "aria-hidden": !this.expanded ? 'true' : 'false' }, index.h("div", { key: 'eac3f014aeccccd20ddd4f2c3b7ee98636a85a4d', class: "accordion-content-inner" }, index.h("slot", { key: '29ac3e0932ee7854678637121e395b2be48949a0' })))));
+    }
+    static get watchers() { return {
+        "expanded": ["handleExpandedChange"]
+    }; }
+};
+BhAccordionItem.style = bhAccordionItemCss;
+
+exports.bh_accordion_item = BhAccordionItem;
+//# sourceMappingURL=bh-accordion-item.entry.cjs.js.map

package/cjs/bh-accordion-item.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-accordion-item.entry.cjs.js","sources":["src/components/bh-accordion-item/bh-accordion-item.css?tag=bh-accordion-item&encapsulation=shadow","src/components/bh-accordion-item/bh-accordion-item.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-ACCORDION-ITEM COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-color: var(--color-white);\n}\n\n/* Header */\n.accordion-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--spacing-lg);\n  padding: var(--spacing-lg) var(--spacing-2xl);\n  cursor: pointer;\n  background-color: var(--color-white);\n  border: none;\n  border-bottom: 1px solid var(--color-neutral-100);\n  transition: background-color 0.15s ease;\n}\n\n.accordion-header:hover {\n  background-color: var(--color-neutral-25);\n}\n\n.accordion-header:focus {\n  outline: none;\n}\n\n.accordion-header:focus-visible {\n  outline: 2px solid var(--color-brand-500);\n  outline-offset: -2px;\n}\n\n/* Header Content */\n.accordion-header-content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xxs);\n  flex: 1;\n  min-width: 0;\n}\n\n/* Title */\n.accordion-title {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-text-md);\n  font-weight: var(--font-weight-semibold);\n  line-height: var(--line-height-text-md);\n  color: var(--color-neutral-900);\n}\n\n/* Icon */\n.accordion-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  font-size: 24px;\n  color: var(--color-neutral-500);\n  transition: transform 0.2s ease;\n  flex-shrink: 0;\n}\n\n/* Content */\n.accordion-content {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 0.2s ease;\n  overflow: hidden;\n}\n\n.accordion-content-inner {\n  min-height: 0;\n  overflow: hidden;\n}\n\n/* ==========================================================================\n   EXPANDED STATE\n   ========================================================================== */\n\n:host(.accordion-item-expanded) .accordion-header {\n  border-bottom-color: transparent;\n}\n\n:host(.accordion-item-expanded) .accordion-content {\n  grid-template-rows: 1fr;\n}\n\n:host(.accordion-item-expanded) .accordion-content-inner {\n  padding: var(--spacing-lg) var(--spacing-2xl) var(--spacing-2xl);\n  border-bottom: 1px solid var(--color-neutral-100);\n}\n\n/* ==========================================================================\n   DISABLED STATE\n   ========================================================================== */\n\n:host(.accordion-item-disabled) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n:host(.accordion-item-disabled) .accordion-header {\n  cursor: not-allowed;\n}\n\n/* ==========================================================================\n   ANIMATION STATE\n   ========================================================================== */\n\n:host(.accordion-item-animating) .accordion-content-inner {\n  overflow: hidden;\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Watch,\n} from '@stencil/core';\n\n/**\n * @slot - Content displayed when the accordion item is expanded\n */\n@Component({\n  tag: 'bh-accordion-item',\n  styleUrl: 'bh-accordion-item.css',\n  shadow: true,\n})\nexport class BhAccordionItem {\n  /**\n   * Unique identifier for this accordion item\n   */\n  @Prop() value!: string;\n\n  /**\n   * The header/title text for the accordion item\n   */\n  @Prop() header!: string;\n\n  /**\n   * Whether this accordion item is currently expanded\n   */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /**\n   * Whether this accordion item is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Internal state for animation\n   */\n  @State() isAnimating: boolean = false;\n\n  /**\n   * Emitted when the accordion item is toggled\n   */\n  @Event({ bubbles: true, composed: true })\n  bhAccordionToggle!: EventEmitter<{ value: string; expanded: boolean }>;\n\n  /**\n   * Emitted when the accordion header is clicked\n   */\n  @Event({ bubbles: true, composed: true })\n  bhAccordionClick!: EventEmitter<string>;\n\n  @Watch('expanded')\n  handleExpandedChange(): void {\n    this.isAnimating = true;\n    setTimeout(() => {\n      this.isAnimating = false;\n    }, 200);\n  }\n\n  private handleHeaderClick = (): void => {\n    if (this.disabled) return;\n\n    this.expanded = !this.expanded;\n    this.bhAccordionClick.emit(this.value);\n    this.bhAccordionToggle.emit({\n      value: this.value,\n      expanded: this.expanded,\n    });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (this.disabled) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handleHeaderClick();\n    }\n  };\n\n  render() {\n    const hostClasses = {\n      'accordion-item': true,\n      'accordion-item-expanded': this.expanded,\n      'accordion-item-disabled': this.disabled,\n      'accordion-item-animating': this.isAnimating,\n    };\n\n    const iconName = this.expanded ? 'expand_less' : 'expand_more';\n\n    return (\n      <Host class={hostClasses}>\n        <div\n          class=\"accordion-header\"\n          part=\"header\"\n          role=\"button\"\n          tabindex={this.disabled ? -1 : 0}\n          aria-expanded={this.expanded ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-controls={`content-${this.value}`}\n          onClick={this.handleHeaderClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class=\"accordion-header-content\">\n            <span class=\"accordion-title\" part=\"title\">\n              {this.header}\n            </span>\n          </div>\n          <span class=\"accordion-icon material-symbols-outlined\" part=\"icon\">\n            {iconName}\n          </span>\n        </div>\n        <div\n          id={`content-${this.value}`}\n          class=\"accordion-content\"\n          part=\"content\"\n          role=\"region\"\n          aria-labelledby={`header-${this.value}`}\n          aria-hidden={!this.expanded ? 'true' : 'false'}\n        >\n          <div class=\"accordion-content-inner\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

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

@@ -0,0 +1,119 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhAccordionCss = ":host{display:block;width:100%}.accordion-container{display:flex;flex-direction:column;width:100%;background-color:var(--color-white)}.accordion-single .accordion-container{}.accordion-multiple .accordion-container{}";
+
+const BhAccordion = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhAccordionChange = index.createEvent(this, "bhAccordionChange");
+    }
+    /**
+     * The mode of the accordion:
+     * - 'single': Only one item can be expanded at a time
+     * - 'multiple': Multiple items can be expanded simultaneously
+     */
+    mode = 'single';
+    /**
+     * The value(s) of the currently expanded item(s).
+     * For single mode: a string value
+     * For multiple mode: an array of string values (comma-separated string)
+     */
+    value = '';
+    /**
+     * Whether to collapse other items when one is expanded (only applies in single mode)
+     */
+    collapsible = true;
+    /**
+     * Internal state to track expanded items
+     */
+    expandedItems = new Set();
+    /**
+     * Emitted when the expanded state changes
+     */
+    bhAccordionChange;
+    componentWillLoad() {
+        this.parseValue();
+    }
+    handleValueChange() {
+        this.parseValue();
+        this.updateChildItems();
+    }
+    parseValue() {
+        if (!this.value) {
+            this.expandedItems = new Set();
+            return;
+        }
+        if (this.mode === 'multiple') {
+            this.expandedItems = new Set(this.value.split(',').filter(Boolean));
+        }
+        else {
+            this.expandedItems = new Set([this.value]);
+        }
+    }
+    updateChildItems() {
+        const slot = this.getSlot();
+        if (!slot)
+            return;
+        const items = slot.assignedElements();
+        items.forEach((item) => {
+            if (item.tagName.toLowerCase() === 'bh-accordion-item') {
+                item.expanded = this.expandedItems.has(item.value);
+            }
+        });
+    }
+    getSlot() {
+        const host = document.querySelector('bh-accordion');
+        if (!host?.shadowRoot)
+            return null;
+        return host.shadowRoot.querySelector('slot');
+    }
+    handleAccordionToggle(event) {
+        const { value, expanded } = event.detail;
+        if (this.mode === 'single') {
+            if (expanded) {
+                this.expandedItems = new Set([value]);
+            }
+            else if (this.collapsible) {
+                this.expandedItems = new Set();
+            }
+        }
+        else {
+            if (expanded) {
+                this.expandedItems.add(value);
+            }
+            else {
+                this.expandedItems.delete(value);
+            }
+            this.expandedItems = new Set(this.expandedItems);
+        }
+        this.updateValue();
+        this.updateChildItems();
+    }
+    updateValue() {
+        const items = Array.from(this.expandedItems);
+        if (this.mode === 'multiple') {
+            this.value = items.join(',');
+            this.bhAccordionChange.emit(items);
+        }
+        else {
+            this.value = items[0] || '';
+            this.bhAccordionChange.emit(this.value);
+        }
+    }
+    render() {
+        const hostClasses = {
+            accordion: true,
+            [`accordion-${this.mode}`]: true,
+        };
+        return (index.h(index.Host, { key: '081f1b04508692b1b6d826278ce6ef9ba2a79b1c', class: hostClasses }, index.h("div", { key: '17db8434d1f5cddfb1e24ccfa4fb6e2e31210903', class: "accordion-container", part: "container", role: "presentation" }, index.h("slot", { key: 'f5cb9dd421af2fe4d1f930c542bba2ba0e1e8132' }))));
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+BhAccordion.style = bhAccordionCss;
+
+exports.bh_accordion = BhAccordion;
+//# sourceMappingURL=bh-accordion.entry.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-accordion.entry.cjs.js","sources":["src/components/bh-accordion/bh-accordion.css?tag=bh-accordion&encapsulation=shadow","src/components/bh-accordion/bh-accordion.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-ACCORDION COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n/* Container */\n.accordion-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-color: var(--color-white);\n}\n\n/* ==========================================================================\n   MODE VARIATIONS\n   ========================================================================== */\n\n/* Single mode - no specific styles needed */\n.accordion-single .accordion-container {\n  /* Default behavior */\n}\n\n/* Multiple mode - no specific styles needed */\n.accordion-multiple .accordion-container {\n  /* Default behavior */\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  State,\n  Watch,\n} from '@stencil/core';\n\nexport type AccordionMode = 'single' | 'multiple';\n\n/**\n * @slot - Accordion items (bh-accordion-item components)\n */\n@Component({\n  tag: 'bh-accordion',\n  styleUrl: 'bh-accordion.css',\n  shadow: true,\n})\nexport class BhAccordion {\n  /**\n   * The mode of the accordion:\n   * - 'single': Only one item can be expanded at a time\n   * - 'multiple': Multiple items can be expanded simultaneously\n   */\n  @Prop() mode: AccordionMode = 'single';\n\n  /**\n   * The value(s) of the currently expanded item(s).\n   * For single mode: a string value\n   * For multiple mode: an array of string values (comma-separated string)\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Whether to collapse other items when one is expanded (only applies in single mode)\n   */\n  @Prop() collapsible: boolean = true;\n\n  /**\n   * Internal state to track expanded items\n   */\n  @State() expandedItems: Set<string> = new Set();\n\n  /**\n   * Emitted when the expanded state changes\n   */\n  @Event({ bubbles: true, composed: true })\n  bhAccordionChange!: EventEmitter<string | string[]>;\n\n  componentWillLoad(): void {\n    this.parseValue();\n  }\n\n  @Watch('value')\n  handleValueChange(): void {\n    this.parseValue();\n    this.updateChildItems();\n  }\n\n  private parseValue(): void {\n    if (!this.value) {\n      this.expandedItems = new Set();\n      return;\n    }\n\n    if (this.mode === 'multiple') {\n      this.expandedItems = new Set(this.value.split(',').filter(Boolean));\n    } else {\n      this.expandedItems = new Set([this.value]);\n    }\n  }\n\n  private updateChildItems(): void {\n    const slot = this.getSlot();\n    if (!slot) return;\n\n    const items = slot.assignedElements() as HTMLBhAccordionItemElement[];\n    items.forEach((item) => {\n      if (item.tagName.toLowerCase() === 'bh-accordion-item') {\n        item.expanded = this.expandedItems.has(item.value);\n      }\n    });\n  }\n\n  private getSlot(): HTMLSlotElement | null {\n    const host = document.querySelector('bh-accordion');\n    if (!host?.shadowRoot) return null;\n    return host.shadowRoot.querySelector('slot');\n  }\n\n  @Listen('bhAccordionToggle')\n  handleAccordionToggle(\n    event: CustomEvent<{ value: string; expanded: boolean }>\n  ): void {\n    const { value, expanded } = event.detail;\n\n    if (this.mode === 'single') {\n      if (expanded) {\n        this.expandedItems = new Set([value]);\n      } else if (this.collapsible) {\n        this.expandedItems = new Set();\n      }\n    } else {\n      if (expanded) {\n        this.expandedItems.add(value);\n      } else {\n        this.expandedItems.delete(value);\n      }\n      this.expandedItems = new Set(this.expandedItems);\n    }\n\n    this.updateValue();\n    this.updateChildItems();\n  }\n\n  private updateValue(): void {\n    const items = Array.from(this.expandedItems);\n\n    if (this.mode === 'multiple') {\n      this.value = items.join(',');\n      this.bhAccordionChange.emit(items);\n    } else {\n      this.value = items[0] || '';\n      this.bhAccordionChange.emit(this.value);\n    }\n  }\n\n  render() {\n    const hostClasses = {\n      accordion: true,\n      [`accordion-${this.mode}`]: true,\n    };\n\n    return (\n      <Host class={hostClasses}>\n        <div class=\"accordion-container\" part=\"container\" role=\"presentation\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n\ninterface HTMLBhAccordionItemElement extends HTMLElement {\n  value: string;\n  expanded: boolean;\n}\n"],"names":["h","Host"],"mappings":"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"}

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

@@ -0,0 +1,83 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhAppbarCss = ".appbar{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 var(--spacing-sm);background-color:var(--color-white);border-bottom:1px solid var(--color-neutral-200);font-family:var(--font-inter);position:sticky;top:0;z-index:1000;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.left-section{display:flex;align-items:center;gap:var(--spacing-xl);flex-shrink:0}.logo{display:flex;align-items:center;justify-content:center;width:var(--spacing-4xl);height:var(--spacing-4xl);color:var(--color-brand-500)}.logo-image{width:36px;height:36px;object-fit:contain}.right-section{display:flex;align-items:center;gap:var(--spacing-md);flex-shrink:0}.icon-button-wrapper{position:relative}.icon-badge-dot{position:absolute;top:-8px;right:2px}@media (max-width: 768px){.appbar{padding:0 16px}.left-section{gap:12px}}@media (max-width: 480px){.appbar{padding:0 12px}.right-section{gap:4px}}";
+
+const BhAppbar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhMenuToggle = index.createEvent(this, "bhMenuToggle");
+        this.bhBreadcrumbClick = index.createEvent(this, "bhBreadcrumbClick");
+        this.bhNotificationClick = index.createEvent(this, "bhNotificationClick");
+        this.bhCalendarClick = index.createEvent(this, "bhCalendarClick");
+        this.bhSettingsClick = index.createEvent(this, "bhSettingsClick");
+    }
+    /**
+     * Whether the menu is open
+     */
+    isMenuOpen = false;
+    /**
+     * Logo source URL
+     */
+    logoSrc;
+    /**
+     * Logo alt text
+     */
+    logoAlt = 'Solstice';
+    /**
+     * Breadcrumb items
+     */
+    breadcrumbItems = [
+        { label: 'Dashboard', path: '/dashboard' },
+        { label: 'Dashboards', isActive: true },
+    ];
+    /**
+     * Notification count
+     */
+    notificationCount = 0;
+    /**
+     * Event emitted when menu toggle is clicked
+     */
+    bhMenuToggle;
+    /**
+     * Event emitted when a breadcrumb is clicked
+     */
+    bhBreadcrumbClick;
+    /**
+     * Event emitted when notification icon is clicked
+     */
+    bhNotificationClick;
+    /**
+     * Event emitted when calendar icon is clicked
+     */
+    bhCalendarClick;
+    /**
+     * Event emitted when settings icon is clicked
+     */
+    bhSettingsClick;
+    handleMenuToggle = () => {
+        this.bhMenuToggle.emit();
+    };
+    handleBreadcrumbClick = (item) => {
+        if (item.path && !item.isActive) {
+            this.bhBreadcrumbClick.emit(item);
+        }
+    };
+    handleNotificationClick = () => {
+        this.bhNotificationClick.emit();
+    };
+    handleCalendarClick = () => {
+        this.bhCalendarClick.emit();
+    };
+    handleSettingsClick = () => {
+        this.bhSettingsClick.emit();
+    };
+    render() {
+        return (index.h(index.Host, { key: 'ae8a4a515b6384418dc4a73297d049d052b311f2' }, index.h("header", { key: '999bad1f106bf9a4fe8107894a55b3b1f683dd84', class: "appbar" }, index.h("div", { key: 'a5ff9a5e8d90adbf67ad2782eaf5e6ca43702bd4', class: "left-section" }, index.h("bh-button-icon", { key: '7c25230ad01e084e3ffa43bb3ce037fe9d90724b', hierarchy: "quaternary", size: "sm", iconName: this.isMenuOpen ? 'menu_open' : 'last_page', onClick: this.handleMenuToggle }), this.logoSrc && (index.h("div", { key: 'dd1630e2a2ff83874a9989fec6c5966d74f6a374', class: "logo" }, index.h("img", { key: '0971c0630bf69f35db53b36af4c5fc5c38518f56', src: this.logoSrc, alt: this.logoAlt, class: "logo-image" }))), index.h("slot", { key: '6b42819c05444a2a32522983a18a4526d6ad5753', name: "property-switcher" }), index.h("bh-breadcrumbs", { key: 'b63deedb1242f22179056f539baff4c118c43ca7', items: this.breadcrumbItems, showHome: true, onBhItemClick: (e) => this.handleBreadcrumbClick(e.detail) })), index.h("div", { key: '792c8be8095c8a41fbbd57e939bc7a3c8e00dee5', class: "right-section" }, index.h("div", { key: '3e30fbfaf6989ddea20e90e6e225462bbd5f341d', class: "icon-button-wrapper" }, index.h("bh-button-icon", { key: '4c91cff44cafe0595adb1dd482e3e6deb62176d0', hierarchy: "quaternary", size: "sm", iconName: "calendar_today", onClick: this.handleCalendarClick }), index.h("bh-badge-dot", { key: 'a6a0d51fdc1306b3a0006a0dd59a4f8c44445c7d', size: "sm", color: "success", outline: true, class: "icon-badge-dot" })), index.h("div", { key: 'f6ea9f12906da34315ad1d075fad964473b1bf0b', class: "icon-button-wrapper" }, index.h("bh-button-icon", { key: 'f35e426048468766bf5c1f314b713b710b095a53', hierarchy: "quaternary", size: "sm", iconName: "settings", onClick: this.handleSettingsClick }), index.h("bh-badge-dot", { key: 'f94d20164a8a8b21ac09456e824d83b2667efb66', size: "sm", color: "blue", outline: true, class: "icon-badge-dot" })), index.h("div", { key: 'b92beef52a5fb8d9a20ddf0d65e1de350af7cf14', class: "icon-button-wrapper" }, index.h("bh-button-icon", { key: '55f3c7485ac9c8aa5ba83fb699c1716cca91e7ae', hierarchy: "quaternary", size: "sm", iconName: "notifications", onClick: this.handleNotificationClick }), this.notificationCount > 0 && (index.h("bh-badge-dot", { key: 'a7fd28338df24721fd1bf2b6b045631cf86093f0', size: "sm", color: "error", outline: true, class: "icon-badge-dot" })))))));
+    }
+};
+BhAppbar.style = bhAppbarCss;
+
+exports.bh_appbar = BhAppbar;
+//# sourceMappingURL=bh-appbar.entry.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-appbar.entry.cjs.js","sources":["src/components/bh-appbar/bh-appbar.css?tag=bh-appbar&encapsulation=shadow","src/components/bh-appbar/bh-appbar.tsx"],"sourcesContent":[".appbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 56px;\n  padding: 0 var(--spacing-sm);\n  background-color: var(--color-white);\n  border-bottom: 1px solid var(--color-neutral-200);\n  font-family: var(--font-inter);\n  position: sticky;\n  top: 0;\n  z-index: 1000;\n  box-sizing: border-box;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n}\n\n/* Left Section */\n.left-section {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xl);\n  flex-shrink: 0;\n}\n\n.logo {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--spacing-4xl);\n  height: var(--spacing-4xl);\n  color: var(--color-brand-500);\n}\n\n.logo-image {\n  width: 36px;\n  height: 36px;\n  object-fit: contain;\n}\n\n/* Right Section */\n.right-section {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md);\n  flex-shrink: 0;\n}\n\n.icon-button-wrapper {\n  position: relative;\n}\n\n.icon-badge-dot {\n  position: absolute;\n  top: -8px;\n  right: 2px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .appbar {\n    padding: 0 16px;\n  }\n\n  .left-section {\n    gap: 12px;\n  }\n}\n\n@media (max-width: 480px) {\n  .appbar {\n    padding: 0 12px;\n  }\n\n  .right-section {\n    gap: 4px;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport interface BreadcrumbItem {\n  label: string;\n  path?: string;\n  isActive?: boolean;\n}\n\n@Component({\n  tag: 'bh-appbar',\n  styleUrl: 'bh-appbar.css',\n  shadow: true,\n})\nexport class BhAppbar {\n  /**\n   * Whether the menu is open\n   */\n  @Prop() isMenuOpen: boolean = false;\n\n  /**\n   * Logo source URL\n   */\n  @Prop() logoSrc?: string;\n\n  /**\n   * Logo alt text\n   */\n  @Prop() logoAlt: string = 'Solstice';\n\n  /**\n   * Breadcrumb items\n   */\n  @Prop() breadcrumbItems: BreadcrumbItem[] = [\n    { label: 'Dashboard', path: '/dashboard' },\n    { label: 'Dashboards', isActive: true },\n  ];\n\n  /**\n   * Notification count\n   */\n  @Prop() notificationCount: number = 0;\n\n  /**\n   * Event emitted when menu toggle is clicked\n   */\n  @Event() bhMenuToggle!: EventEmitter<void>;\n\n  /**\n   * Event emitted when a breadcrumb is clicked\n   */\n  @Event() bhBreadcrumbClick!: EventEmitter<BreadcrumbItem>;\n\n  /**\n   * Event emitted when notification icon is clicked\n   */\n  @Event() bhNotificationClick!: EventEmitter<void>;\n\n  /**\n   * Event emitted when calendar icon is clicked\n   */\n  @Event() bhCalendarClick!: EventEmitter<void>;\n\n  /**\n   * Event emitted when settings icon is clicked\n   */\n  @Event() bhSettingsClick!: EventEmitter<void>;\n\n  private handleMenuToggle = () => {\n    this.bhMenuToggle.emit();\n  };\n\n  private handleBreadcrumbClick = (item: BreadcrumbItem) => {\n    if (item.path && !item.isActive) {\n      this.bhBreadcrumbClick.emit(item);\n    }\n  };\n\n  private handleNotificationClick = () => {\n    this.bhNotificationClick.emit();\n  };\n\n  private handleCalendarClick = () => {\n    this.bhCalendarClick.emit();\n  };\n\n  private handleSettingsClick = () => {\n    this.bhSettingsClick.emit();\n  };\n\n  render() {\n    return (\n      <Host>\n        <header class=\"appbar\">\n          {/* Left Section */}\n          <div class=\"left-section\">\n            {/* Menu Toggle */}\n            <bh-button-icon\n              hierarchy=\"quaternary\"\n              size=\"sm\"\n              iconName={this.isMenuOpen ? 'menu_open' : 'last_page'}\n              onClick={this.handleMenuToggle}\n            ></bh-button-icon>\n\n            {/* Logo */}\n            {this.logoSrc && (\n              <div class=\"logo\">\n                <img src={this.logoSrc} alt={this.logoAlt} class=\"logo-image\" />\n              </div>\n            )}\n\n            {/* Property Switcher Slot */}\n            <slot name=\"property-switcher\"></slot>\n\n            {/* Breadcrumbs */}\n            <bh-breadcrumbs\n              items={this.breadcrumbItems}\n              showHome={true}\n              onBhItemClick={(e) => this.handleBreadcrumbClick(e.detail)}\n            ></bh-breadcrumbs>\n          </div>\n\n          {/* Right Section */}\n          <div class=\"right-section\">\n            {/* Calendar Icon */}\n            <div class=\"icon-button-wrapper\">\n              <bh-button-icon\n                hierarchy=\"quaternary\"\n                size=\"sm\"\n                iconName=\"calendar_today\"\n                onClick={this.handleCalendarClick}\n              ></bh-button-icon>\n              <bh-badge-dot\n                size=\"sm\"\n                color=\"success\"\n                outline={true}\n                class=\"icon-badge-dot\"\n              ></bh-badge-dot>\n            </div>\n\n            {/* Settings Icon */}\n            <div class=\"icon-button-wrapper\">\n              <bh-button-icon\n                hierarchy=\"quaternary\"\n                size=\"sm\"\n                iconName=\"settings\"\n                onClick={this.handleSettingsClick}\n              ></bh-button-icon>\n              <bh-badge-dot\n                size=\"sm\"\n                color=\"blue\"\n                outline={true}\n                class=\"icon-badge-dot\"\n              ></bh-badge-dot>\n            </div>\n\n            {/* Notifications */}\n            <div class=\"icon-button-wrapper\">\n              <bh-button-icon\n                hierarchy=\"quaternary\"\n                size=\"sm\"\n                iconName=\"notifications\"\n                onClick={this.handleNotificationClick}\n              ></bh-button-icon>\n              {this.notificationCount > 0 && (\n                <bh-badge-dot\n                  size=\"sm\"\n                  color=\"error\"\n                  outline={true}\n                  class=\"icon-badge-dot\"\n                ></bh-badge-dot>\n              )}\n            </div>\n          </div>\n        </header>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,u8BAAu8B;;MCa98B,QAAQ,GAAA,MAAA;;;;;;;;;AACnB;;AAEG;IACK,UAAU,GAAY,KAAK;AAEnC;;AAEG;AACK,IAAA,OAAO;AAEf;;AAEG;IACK,OAAO,GAAW,UAAU;AAEpC;;AAEG;AACK,IAAA,eAAe,GAAqB;AAC1C,QAAA,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE;AAC1C,QAAA,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE;KACxC;AAED;;AAEG;IACK,iBAAiB,GAAW,CAAC;AAErC;;AAEG;AACM,IAAA,YAAY;AAErB;;AAEG;AACM,IAAA,iBAAiB;AAE1B;;AAEG;AACM,IAAA,mBAAmB;AAE5B;;AAEG;AACM,IAAA,eAAe;AAExB;;AAEG;AACM,IAAA,eAAe;IAEhB,gBAAgB,GAAG,MAAK;AAC9B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;AAC1B,KAAC;AAEO,IAAA,qBAAqB,GAAG,CAAC,IAAoB,KAAI;QACvD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC/B,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;;AAErC,KAAC;IAEO,uBAAuB,GAAG,MAAK;AACrC,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE;AACjC,KAAC;IAEO,mBAAmB,GAAG,MAAK;AACjC,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;AAC7B,KAAC;IAEO,mBAAmB,GAAG,MAAK;AACjC,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;AAC7B,KAAC;IAED,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EAAA,EAEpBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EAEvBA,OACE,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,UAAU,GAAG,WAAW,GAAG,WAAW,EACrD,OAAO,EAAE,IAAI,CAAC,gBAAgB,EACd,CAAA,EAGjB,IAAI,CAAC,OAAO,KACXA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACfA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,YAAY,EAAA,CAAG,CAC5D,CACP,EAGDA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,mBAAmB,EAAQ,CAAA,EAGtCA,OACE,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,eAAe,EAC3B,QAAQ,EAAE,IAAI,EACd,aAAa,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAC,EAAA,CAC1C,CACd,EAGNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EAExBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9BA,OAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,gBAAgB,EACzB,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjB,CAAA,EAClBA,OAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,IAAI,EACb,KAAK,EAAC,gBAAgB,GACR,CACZ,EAGNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9BA,OAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjB,CAAA,EAClBA,OAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,IAAI,EACb,KAAK,EAAC,gBAAgB,GACR,CACZ,EAGNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9BA,OAAA,CAAA,gBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,IAAI,CAAC,uBAAuB,EACrB,CAAA,EACjB,IAAI,CAAC,iBAAiB,GAAG,CAAC,KACzBA,OACE,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,EACb,KAAK,EAAC,gBAAgB,EACR,CAAA,CACjB,CACG,CACF,CACC,CACJ;;;;;;;"}

package/cjs/bh-autocomplete-menu.bh-tag.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-autocomplete-menu.bh-tag.entry.cjs.js","sources":["src/components/bh-autocomplete-menu/bh-autocomplete-menu.css?tag=bh-autocomplete-menu&encapsulation=shadow","src/components/bh-autocomplete-menu/bh-autocomplete-menu.tsx","src/components/bh-tag/bh-tag.css?tag=bh-tag&encapsulation=shadow","src/components/bh-tag/bh-tag.tsx"],"sourcesContent":["/* ==========================================================================\n   AUTOCOMPLETE MENU COMPONENT\n   Shared styles for all frameworks\n   ========================================================================== */\n\n.autocomplete-menu {\n  position: absolute;\n  z-index: 1000;\n  top: calc(100% + var(--spacing-sm));\n  left: 0;\n  right: 0;\n  width: 100%;\n  min-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  border: 1px solid var(--color-neutral-200);\n  overflow: hidden;\n  overflow-y: auto;\n  /* Add padding like dropdown-menu items container */\n  padding: var(--spacing-xs) 0;\n  /* Optimizations for stable layout */\n  box-sizing: border-box;\n  transform: translateZ(0); /* Hardware acceleration */\n  will-change: opacity, transform;\n}\n\n\n/* Menu Items - Match dropdown-menu styling exactly */\n.autocomplete-item {\n  padding: var(--spacing-none) var(--spacing-sm);\n  cursor: pointer;\n}\n\n.autocomplete-item.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.item-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\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.autocomplete-item:hover:not(.disabled) .item-content {\n  background: var(--color-neutral-100);\n}\n\n.autocomplete-item.selected .item-content {\n  background: var(--color-neutral-100);\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.autocomplete-item.selected .item-text {\n  color: var(--color-neutral-700);\n  font-weight: var(--weight-medium);\n}\n\n.autocomplete-item.disabled .item-text {\n  color: var(--color-neutral-400);\n}\n\n/* Highlight matching text */\n.item-text .highlight {\n  font-weight: var(--weight-semibold);\n  color: var(--color-neutral-800);\n}\n\n/* Check icon for multi-select */\n.check-icon {\n  font-size: var(--text-xl-size);\n  color: var(--color-brand-600);\n  flex-shrink: 0;\n  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;\n}\n\n/* Custom Scrollbar */\n.autocomplete-menu::-webkit-scrollbar {\n  width: 6px;\n}\n\n.autocomplete-menu::-webkit-scrollbar-track {\n  background: var(--color-neutral-50);\n  border-radius: var(--radius-xs);\n}\n\n.autocomplete-menu::-webkit-scrollbar-thumb {\n  background: var(--color-neutral-200);\n  border-radius: var(--radius-xs);\n}\n\n.autocomplete-menu::-webkit-scrollbar-thumb:hover {\n  background: var(--color-neutral-300);\n}\n\n/* Firefox scrollbar */\n.autocomplete-menu {\n  scrollbar-width: thin;\n  scrollbar-color: var(--color-neutral-200) var(--color-neutral-50);\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n  .autocomplete-menu {\n    border-width: 2px;\n  }\n\n  .autocomplete-item.selected {\n    outline: 2px solid var(--color-brand-500);\n    outline-offset: -2px;\n  }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  .autocomplete-menu.animate-dropdown-enter,\n  .autocomplete-menu.animate-dropdown-exit {\n    animation: none;\n  }\n\n  .autocomplete-item {\n    transition: none;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, State, Watch, h, Host } from '@stencil/core';\n\nexport interface AutocompleteMenuItem {\n  id: string;\n  label: string;\n  disabled?: boolean;\n  selected?: boolean;\n}\n\n@Component({\n  tag: 'bh-autocomplete-menu',\n  styleUrl: 'bh-autocomplete-menu.css',\n  shadow: true,\n})\nexport class BhAutocompleteMenu {\n  /**\n   * Array of menu items\n   */\n  @Prop() menuItems: AutocompleteMenuItem[] = [];\n\n  /**\n   * Whether the menu is visible\n   */\n  @Prop() visible: boolean = false;\n\n  /**\n   * Currently selected item index\n   */\n  @Prop() selectedIndex: number = -1;\n\n  /**\n   * Maximum height of the menu in pixels\n   */\n  @Prop() maxHeight: number = 280;\n\n  /**\n   * Enable multi-select mode with checkmarks\n   */\n  @Prop() multiSelect: boolean = false;\n\n  /**\n   * Search query for highlighting text\n   */\n  @Prop() searchQuery: string = '';\n\n  /**\n   * Event emitted when an item is clicked\n   */\n  @Event() bhItemClick!: EventEmitter<AutocompleteMenuItem>;\n\n  /**\n   * Event emitted when an item is hovered\n   */\n  @Event() bhItemHover!: EventEmitter<number>;\n\n  @State() isAnimating: boolean = false;\n  @State() shouldRender: boolean = false;\n  @State() items: AutocompleteMenuItem[] = [];\n\n  @Watch('visible')\n  watchVisible(newValue: boolean) {\n    if (newValue) {\n      this.shouldRender = true;\n      this.isAnimating = false;\n    } else {\n      this.isAnimating = true;\n      setTimeout(() => {\n        this.shouldRender = false;\n        this.isAnimating = false;\n      }, 150);\n    }\n  }\n\n  @Watch('menuItems')\n  watchMenuItems(newValue: AutocompleteMenuItem[]) {\n    this.items = [...newValue];\n  }\n\n  componentWillLoad() {\n    this.shouldRender = this.visible;\n    this.items = [...this.menuItems];\n  }\n\n  private handleItemClick = (item: AutocompleteMenuItem) => {\n    if (!item.disabled) {\n      if (this.multiSelect) {\n        // Toggle selection in multi-select mode\n        this.items = this.items.map(i =>\n          i.id === item.id ? { ...i, selected: !i.selected } : i\n        );\n        const updatedItem = this.items.find(i => i.id === item.id)!;\n        this.bhItemClick.emit(updatedItem);\n      } else {\n        this.bhItemClick.emit(item);\n      }\n    }\n  };\n\n  private handleItemMouseEnter = (index: number) => {\n    this.bhItemHover.emit(index);\n  };\n\n  private handleMouseDown = (e: MouseEvent) => {\n    e.preventDefault();\n  };\n\n  private getMenuClasses = () => {\n    return {\n      'autocomplete-menu': true,\n      'animate-dropdown-exit': this.isAnimating && !this.visible,\n      'animate-dropdown-enter': this.visible && !this.isAnimating,\n    };\n  };\n\n  private getItemClasses = (index: number, item: AutocompleteMenuItem) => {\n    return {\n      'autocomplete-item': true,\n      'disabled': !!item.disabled,\n      'selected': index === this.selectedIndex,\n    };\n  };\n\n  private getHighlightedText = (text: string) => {\n    if (!this.searchQuery || this.searchQuery.length < 3) {\n      return text;\n    }\n\n    const regex = new RegExp(`(${this.searchQuery})`, 'gi');\n    const parts = text.split(regex);\n\n    return parts.map((part, index) =>\n      regex.test(part) ? (\n        <span key={index} class=\"highlight\">{part}</span>\n      ) : (\n        <span key={index}>{part}</span>\n      )\n    );\n  };\n\n  render() {\n    if (!this.shouldRender || this.items.length === 0) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <div\n          class={this.getMenuClasses()}\n          style={{ maxHeight: `${this.maxHeight}px` }}\n        >\n          {this.items.map((item, index) => (\n            <div\n              key={item.id}\n              class={this.getItemClasses(index, item)}\n              onMouseEnter={() => this.handleItemMouseEnter(index)}\n              role=\"option\"\n              aria-selected={index === this.selectedIndex ? 'true' : 'false'}\n              aria-disabled={item.disabled ? 'true' : 'false'}\n            >\n              <div\n                class=\"item-content\"\n                onClick={() => this.handleItemClick(item)}\n                onMouseDown={this.handleMouseDown}\n              >\n                <span class=\"item-text\" title={item.label}>\n                  {this.getHighlightedText(item.label)}\n                </span>\n                {this.multiSelect && item.selected && (\n                  <span class=\"check-icon material-symbols-outlined\">\n                    check\n                  </span>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n","/* Tag Base Styles */\n:host {\n  display: inline-block;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-sm);\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  background-color: var(--color-white);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-sm);\n  white-space: nowrap;\n  cursor: default;\n  user-select: none;\n}\n\n/* Clickable Tags */\n.tag-dismissible {\n  cursor: pointer;\n}\n\n/* Size Variants */\n.tag-sm {\n  padding: var(--spacing-xxs) var(--spacing-md);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n}\n\n.tag-sm.tag-dismissible {\n  padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md);\n}\n\n.tag-md {\n  padding: var(--spacing-xxs) var(--spacing-md);\n  font-size: var(--text-md-size);\n  line-height: var(--text-md-line);\n}\n\n.tag-md.tag-dismissible {\n  padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md);\n}\n\n.tag-lg {\n  padding: var(--spacing-xs) var(--spacing-lg);\n  font-size: var(--text-md-size);\n  line-height: var(--text-md-line);\n}\n\n.tag-lg.tag-dismissible {\n  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-lg);\n}\n\n/* Content Layout */\n.tag-content {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xs);\n}\n\n/* Avatar Variant - specific adjustments */\n.tag-avatar .tag-content {\n  gap: var(--spacing-sm);\n}\n\n.tag-sm.tag-avatar {\n  padding-left: var(--spacing-xs);\n}\n\n.tag-sm.tag-avatar.tag-dismissible {\n  padding-left: var(--spacing-xs);\n}\n\n.tag-md.tag-avatar {\n  padding-left: var(--spacing-sm);\n}\n\n.tag-md.tag-avatar.tag-dismissible {\n  padding-left: var(--spacing-sm);\n}\n\n.tag-lg.tag-avatar {\n  padding-left: var(--spacing-sm);\n}\n\n.tag-lg.tag-avatar.tag-dismissible {\n  padding-left: var(--spacing-sm);\n}\n\n/* Label wrapper for tooltip positioning */\n.tag-label-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n\n/* Label */\n.tag-label {\n  color: var(--color-neutral-700);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Dismiss Button */\n.tag-dismiss {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: var(--spacing-xxs);\n  border-radius: var(--radius-xs);\n  transition: background-color 0.2s ease;\n  width: var(--spacing-xl);\n  height: var(--spacing-xl);\n  flex-shrink: 0;\n}\n\n.tag-lg .tag-dismiss {\n  padding: var(--spacing-xs);\n  width: var(--spacing-2xl);\n  height: var(--spacing-2xl);\n}\n\n.tag-dismiss:hover {\n  background-color: var(--color-neutral-100);\n}\n\n.tag-dismiss:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.tag-dismiss-icon {\n  font-size: var(--text-sm-size);\n  color: var(--color-neutral-500);\n  line-height: 1;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;\n}\n\n.tag-lg .tag-dismiss-icon {\n  font-size: var(--text-md-size);\n}\n\n/* Disabled State */\n.tag-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Hover State for Dismissible Tags */\n.tag:hover {\n  border-color: var(--color-neutral-300);\n}\n\n.tag-disabled:hover {\n  border-color: var(--color-neutral-200);\n}\n\n/* Dismiss animation */\n.animate-dismiss {\n  animation: dismiss 0.2s ease-out forwards;\n}\n\n@keyframes dismiss {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n}\n","import { Component, Prop, State, Event, EventEmitter, h } from '@stencil/core';\n\nexport type TagVariant = 'text-only' | 'avatar';\nexport type TagSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'bh-tag',\n  styleUrl: 'bh-tag.css',\n  shadow: true,\n})\nexport class BhTag {\n  /** Tag variant */\n  @Prop() variant: TagVariant = 'text-only';\n\n  /** Tag size */\n  @Prop() size: TagSize = 'md';\n\n  /** Tag label text */\n  @Prop() label: string = 'Label';\n\n  /** Whether the tag is dismissible */\n  @Prop() dismissible: boolean = false;\n\n  /** Whether the tag is disabled */\n  @Prop() disabled: boolean = false;\n\n  /** Maximum width for the label (in pixels) */\n  @Prop() maxWidth: number = 120;\n\n  /** Avatar image source (for avatar variant) */\n  @Prop() avatarSrc: string = '';\n\n  /** Internal dismissing state */\n  @State() isDismissing: boolean = false;\n\n  /** Emitted when dismiss button is clicked */\n  @Event() bhDismiss!: EventEmitter<void>;\n\n  private handleDismiss = (event: MouseEvent) => {\n    event.stopPropagation();\n\n    if (this.dismissible && !this.disabled && !this.isDismissing) {\n      this.isDismissing = true;\n\n      // Simulate animation duration\n      setTimeout(() => {\n        this.bhDismiss.emit();\n        this.isDismissing = false;\n      }, 200);\n    }\n  };\n\n  render() {\n    const classes = {\n      'tag': true,\n      [`tag-${this.size}`]: true,\n      [`tag-${this.variant}`]: true,\n      'tag-dismissible': this.dismissible,\n      'tag-disabled': this.disabled,\n      'animate-dismiss': this.isDismissing,\n    };\n\n    const labelStyle = {\n      maxWidth: `${this.maxWidth}px`,\n    };\n\n    return (\n      <span class={classes}>\n        <div class=\"tag-content\">\n          {/* Avatar variant */}\n          {this.variant === 'avatar' && (\n            <bh-avatar size=\"xxs\" type={this.avatarSrc ? 'image' : 'placeholder'} imageSrc={this.avatarSrc}></bh-avatar>\n          )}\n\n          {/* Label */}\n          <span class=\"tag-label-wrapper\">\n            <span class=\"tag-label\" style={labelStyle}>\n              {this.label}\n            </span>\n          </span>\n        </div>\n\n        {/* Dismiss button (if dismissible) */}\n        {this.dismissible && (\n          <button\n            class=\"tag-dismiss\"\n            onClick={this.handleDismiss}\n            disabled={this.disabled}\n            type=\"button\"\n            aria-label=\"Dismiss\"\n          >\n            <span class=\"material-symbols-outlined tag-dismiss-icon\">\n              close\n            </span>\n          </button>\n        )}\n      </span>\n    );\n  }\n}\n"],"names":["index","h","Host"],"mappings":"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"}

package/cjs/bh-autocomplete-menu_2.cjs.entry.js

@@ -0,0 +1,177 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhAutocompleteMenuCss = ".autocomplete-menu{position:absolute;z-index:1000;top:calc(100% + var(--spacing-sm));left:0;right:0;width:100%;min-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);border:1px solid var(--color-neutral-200);overflow:hidden;overflow-y:auto;padding:var(--spacing-xs) 0;box-sizing:border-box;transform:translateZ(0);will-change:opacity, transform}.autocomplete-item{padding:var(--spacing-none) var(--spacing-sm);cursor:pointer}.autocomplete-item.disabled{opacity:0.5;cursor:not-allowed}.item-content{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-md);border-radius:var(--radius-sm);transition:background-color 0.15s ease}.autocomplete-item:hover:not(.disabled) .item-content{background:var(--color-neutral-100)}.autocomplete-item.selected .item-content{background:var(--color-neutral-100)}.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}.autocomplete-item.selected .item-text{color:var(--color-neutral-700);font-weight:var(--weight-medium)}.autocomplete-item.disabled .item-text{color:var(--color-neutral-400)}.item-text .highlight{font-weight:var(--weight-semibold);color:var(--color-neutral-800)}.check-icon{font-size:var(--text-xl-size);color:var(--color-brand-600);flex-shrink:0;font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24}.autocomplete-menu::-webkit-scrollbar{width:6px}.autocomplete-menu::-webkit-scrollbar-track{background:var(--color-neutral-50);border-radius:var(--radius-xs)}.autocomplete-menu::-webkit-scrollbar-thumb{background:var(--color-neutral-200);border-radius:var(--radius-xs)}.autocomplete-menu::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-300)}.autocomplete-menu{scrollbar-width:thin;scrollbar-color:var(--color-neutral-200) var(--color-neutral-50)}@media (prefers-contrast: high){.autocomplete-menu{border-width:2px}.autocomplete-item.selected{outline:2px solid var(--color-brand-500);outline-offset:-2px}}@media (prefers-reduced-motion: reduce){.autocomplete-menu.animate-dropdown-enter,.autocomplete-menu.animate-dropdown-exit{animation:none}.autocomplete-item{transition:none}}";
+
+const BhAutocompleteMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhItemClick = index.createEvent(this, "bhItemClick");
+        this.bhItemHover = index.createEvent(this, "bhItemHover");
+    }
+    /**
+     * Array of menu items
+     */
+    menuItems = [];
+    /**
+     * Whether the menu is visible
+     */
+    visible = false;
+    /**
+     * Currently selected item index
+     */
+    selectedIndex = -1;
+    /**
+     * Maximum height of the menu in pixels
+     */
+    maxHeight = 280;
+    /**
+     * Enable multi-select mode with checkmarks
+     */
+    multiSelect = false;
+    /**
+     * Search query for highlighting text
+     */
+    searchQuery = '';
+    /**
+     * Event emitted when an item is clicked
+     */
+    bhItemClick;
+    /**
+     * Event emitted when an item is hovered
+     */
+    bhItemHover;
+    isAnimating = false;
+    shouldRender = false;
+    items = [];
+    watchVisible(newValue) {
+        if (newValue) {
+            this.shouldRender = true;
+            this.isAnimating = false;
+        }
+        else {
+            this.isAnimating = true;
+            setTimeout(() => {
+                this.shouldRender = false;
+                this.isAnimating = false;
+            }, 150);
+        }
+    }
+    watchMenuItems(newValue) {
+        this.items = [...newValue];
+    }
+    componentWillLoad() {
+        this.shouldRender = this.visible;
+        this.items = [...this.menuItems];
+    }
+    handleItemClick = (item) => {
+        if (!item.disabled) {
+            if (this.multiSelect) {
+                // Toggle selection in multi-select mode
+                this.items = this.items.map(i => i.id === item.id ? { ...i, selected: !i.selected } : i);
+                const updatedItem = this.items.find(i => i.id === item.id);
+                this.bhItemClick.emit(updatedItem);
+            }
+            else {
+                this.bhItemClick.emit(item);
+            }
+        }
+    };
+    handleItemMouseEnter = (index) => {
+        this.bhItemHover.emit(index);
+    };
+    handleMouseDown = (e) => {
+        e.preventDefault();
+    };
+    getMenuClasses = () => {
+        return {
+            'autocomplete-menu': true,
+            'animate-dropdown-exit': this.isAnimating && !this.visible,
+            'animate-dropdown-enter': this.visible && !this.isAnimating,
+        };
+    };
+    getItemClasses = (index, item) => {
+        return {
+            'autocomplete-item': true,
+            'disabled': !!item.disabled,
+            'selected': index === this.selectedIndex,
+        };
+    };
+    getHighlightedText = (text) => {
+        if (!this.searchQuery || this.searchQuery.length < 3) {
+            return text;
+        }
+        const regex = new RegExp(`(${this.searchQuery})`, 'gi');
+        const parts = text.split(regex);
+        return parts.map((part, index$1) => regex.test(part) ? (index.h("span", { key: index$1, class: "highlight" }, part)) : (index.h("span", { key: index$1 }, part)));
+    };
+    render() {
+        if (!this.shouldRender || this.items.length === 0) {
+            return null;
+        }
+        return (index.h(index.Host, null, index.h("div", { class: this.getMenuClasses(), style: { maxHeight: `${this.maxHeight}px` } }, this.items.map((item, index$1) => (index.h("div", { key: item.id, class: this.getItemClasses(index$1, item), onMouseEnter: () => this.handleItemMouseEnter(index$1), role: "option", "aria-selected": index$1 === this.selectedIndex ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false' }, index.h("div", { class: "item-content", onClick: () => this.handleItemClick(item), onMouseDown: this.handleMouseDown }, index.h("span", { class: "item-text", title: item.label }, this.getHighlightedText(item.label)), this.multiSelect && item.selected && (index.h("span", { class: "check-icon material-symbols-outlined" }, "check")))))))));
+    }
+    static get watchers() { return {
+        "visible": ["watchVisible"],
+        "menuItems": ["watchMenuItems"]
+    }; }
+};
+BhAutocompleteMenu.style = bhAutocompleteMenuCss;
+
+const bhTagCss = ":host{display:inline-block}.tag{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);font-family:var(--font-inter);font-weight:var(--weight-medium);background-color:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-sm);white-space:nowrap;cursor:default;user-select:none}.tag-dismissible{cursor:pointer}.tag-sm{padding:var(--spacing-xxs) var(--spacing-md);font-size:var(--text-sm-size);line-height:var(--text-sm-line)}.tag-sm.tag-dismissible{padding:var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md)}.tag-md{padding:var(--spacing-xxs) var(--spacing-md);font-size:var(--text-md-size);line-height:var(--text-md-line)}.tag-md.tag-dismissible{padding:var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md)}.tag-lg{padding:var(--spacing-xs) var(--spacing-lg);font-size:var(--text-md-size);line-height:var(--text-md-line)}.tag-lg.tag-dismissible{padding:var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-lg)}.tag-content{display:flex;align-items:center;gap:var(--spacing-xs)}.tag-avatar .tag-content{gap:var(--spacing-sm)}.tag-sm.tag-avatar{padding-left:var(--spacing-xs)}.tag-sm.tag-avatar.tag-dismissible{padding-left:var(--spacing-xs)}.tag-md.tag-avatar{padding-left:var(--spacing-sm)}.tag-md.tag-avatar.tag-dismissible{padding-left:var(--spacing-sm)}.tag-lg.tag-avatar{padding-left:var(--spacing-sm)}.tag-lg.tag-avatar.tag-dismissible{padding-left:var(--spacing-sm)}.tag-label-wrapper{position:relative;display:inline-flex;align-items:center;max-width:100%}.tag-label{color:var(--color-neutral-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tag-dismiss{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:var(--spacing-xxs);border-radius:var(--radius-xs);transition:background-color 0.2s ease;width:var(--spacing-xl);height:var(--spacing-xl);flex-shrink:0}.tag-lg .tag-dismiss{padding:var(--spacing-xs);width:var(--spacing-2xl);height:var(--spacing-2xl)}.tag-dismiss:hover{background-color:var(--color-neutral-100)}.tag-dismiss:disabled{cursor:not-allowed;opacity:0.5}.tag-dismiss-icon{font-size:var(--text-sm-size);color:var(--color-neutral-500);line-height:1;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20}.tag-lg .tag-dismiss-icon{font-size:var(--text-md-size)}.tag-disabled{opacity:0.5;cursor:not-allowed}.tag:hover{border-color:var(--color-neutral-300)}.tag-disabled:hover{border-color:var(--color-neutral-200)}.animate-dismiss{animation:dismiss 0.2s ease-out forwards}@keyframes dismiss{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.8)}}";
+
+const BhTag = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhDismiss = index.createEvent(this, "bhDismiss");
+    }
+    /** Tag variant */
+    variant = 'text-only';
+    /** Tag size */
+    size = 'md';
+    /** Tag label text */
+    label = 'Label';
+    /** Whether the tag is dismissible */
+    dismissible = false;
+    /** Whether the tag is disabled */
+    disabled = false;
+    /** Maximum width for the label (in pixels) */
+    maxWidth = 120;
+    /** Avatar image source (for avatar variant) */
+    avatarSrc = '';
+    /** Internal dismissing state */
+    isDismissing = false;
+    /** Emitted when dismiss button is clicked */
+    bhDismiss;
+    handleDismiss = (event) => {
+        event.stopPropagation();
+        if (this.dismissible && !this.disabled && !this.isDismissing) {
+            this.isDismissing = true;
+            // Simulate animation duration
+            setTimeout(() => {
+                this.bhDismiss.emit();
+                this.isDismissing = false;
+            }, 200);
+        }
+    };
+    render() {
+        const classes = {
+            'tag': true,
+            [`tag-${this.size}`]: true,
+            [`tag-${this.variant}`]: true,
+            'tag-dismissible': this.dismissible,
+            'tag-disabled': this.disabled,
+            'animate-dismiss': this.isDismissing,
+        };
+        const labelStyle = {
+            maxWidth: `${this.maxWidth}px`,
+        };
+        return (index.h("span", { key: '1ca1b5c6087d2ab438975c186b35bba2e6efa577', class: classes }, index.h("div", { key: '154d89498369ad08173f16fd04a29dd58b65aba0', class: "tag-content" }, this.variant === 'avatar' && (index.h("bh-avatar", { key: '85475fb7ed5ec15a68951c1048ce050c43044671', size: "xxs", type: this.avatarSrc ? 'image' : 'placeholder', imageSrc: this.avatarSrc })), index.h("span", { key: '5acc3f84536abd3b2603fe2f9c015fcb676375e7', class: "tag-label-wrapper" }, index.h("span", { key: '6314f8db254195d2f412467f349e2a372c9c379f', class: "tag-label", style: labelStyle }, this.label))), this.dismissible && (index.h("button", { key: '77377b1400258cf418da5391b54229d9e76c715f', class: "tag-dismiss", onClick: this.handleDismiss, disabled: this.disabled, type: "button", "aria-label": "Dismiss" }, index.h("span", { key: 'd6d6f39c326413da4f155974359960bd121dcbdb', class: "material-symbols-outlined tag-dismiss-icon" }, "close")))));
+    }
+};
+BhTag.style = bhTagCss;
+
+exports.bh_autocomplete_menu = BhAutocompleteMenu;
+exports.bh_tag = BhTag;
+//# sourceMappingURL=bh-autocomplete-menu.bh-tag.entry.cjs.js.map