@actabldesign/bellhop-core 0.0.3 → 0.0.6

package/dist/components/bh-accordion-item.js

@@ -0,0 +1,111 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DLHC5fHk.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-inter);font-size:var(--text-md-size);font-weight:var(--weight-semibold);line-height:var(--text-md-line);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$1 = /*@__PURE__*/ proxyCustomElement(class BhAccordionItem extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhAccordionToggle = createEvent(this, "bhAccordionToggle");
+        this.bhAccordionClick = 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 (h(Host, { key: '0c2f1ecc9d3eb6f6826811e6d3a5597cb024f76b', class: hostClasses }, h("div", { key: '07eac8349ec20a34b56fa216eb0111ccc9b29cb1', 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 }, h("div", { key: 'bba216c5755b48a8f6e41aa7eea3d9a8deb11015', class: "accordion-header-content" }, h("span", { key: '8e6bdb61f7c1f29ed59ef6febca2834ef19c4036', class: "accordion-title", part: "title" }, this.header)), h("span", { key: '41d856e6da6cd64634c67de168f548f4307964e3', class: "accordion-icon material-symbols-outlined", part: "icon" }, iconName)), h("div", { key: 'cd9767f9ab78dd18d2c2e8a93b757a287e02c2d2', id: `content-${this.value}`, class: "accordion-content", part: "content", role: "region", "aria-labelledby": `header-${this.value}`, "aria-hidden": !this.expanded ? 'true' : 'false' }, h("div", { key: '32dbf5b959a5ebd0484344e1070af8e9dbab98ed', class: "accordion-content-inner" }, h("slot", { key: 'cf338a1116f4c2926eba447ca40ae0308f91529e' })))));
+    }
+    static get watchers() { return {
+        "expanded": ["handleExpandedChange"]
+    }; }
+    static get style() { return bhAccordionItemCss; }
+}, [769, "bh-accordion-item", {
+        "value": [1],
+        "header": [1],
+        "expanded": [1540],
+        "disabled": [4],
+        "isAnimating": [32]
+    }, undefined, {
+        "expanded": ["handleExpandedChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-accordion-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-accordion-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhAccordionItem$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BhAccordionItem = BhAccordionItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhAccordionItem, defineCustomElement };
+//# sourceMappingURL=bh-accordion-item.js.map
+
+//# sourceMappingURL=bh-accordion-item.js.map

package/dist/components/bh-accordion-item.js.map

@@ -0,0 +1 @@
+{"file":"bh-accordion-item.js","mappings":"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","names":["BhAccordionItem","__stencil_proxyCustomElement","HTMLElement"],"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-inter);\n  font-size: var(--text-md-size);\n  font-weight: var(--weight-semibold);\n  line-height: var(--text-md-line);\n  color: var(--color-neutral-900);\n}\n\n/* 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"],"version":3}

package/dist/components/bh-accordion.js

@@ -0,0 +1,147 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DLHC5fHk.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$1 = /*@__PURE__*/ proxyCustomElement(class BhAccordion extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhAccordionChange = 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 (h(Host, { key: '081f1b04508692b1b6d826278ce6ef9ba2a79b1c', class: hostClasses }, h("div", { key: '17db8434d1f5cddfb1e24ccfa4fb6e2e31210903', class: "accordion-container", part: "container", role: "presentation" }, h("slot", { key: 'f5cb9dd421af2fe4d1f930c542bba2ba0e1e8132' }))));
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+    static get style() { return bhAccordionCss; }
+}, [769, "bh-accordion", {
+        "mode": [1],
+        "value": [1025],
+        "collapsible": [4],
+        "expandedItems": [32]
+    }, [[0, "bhAccordionToggle", "handleAccordionToggle"]], {
+        "value": ["handleValueChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-accordion"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-accordion":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhAccordion$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BhAccordion = BhAccordion$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhAccordion, defineCustomElement };
+//# sourceMappingURL=bh-accordion.js.map
+
+//# sourceMappingURL=bh-accordion.js.map

package/dist/components/bh-appbar.js

@@ -0,0 +1,128 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DLHC5fHk.js';
+import { d as defineCustomElement$4 } from './p-G4wC-s5k.js';
+import { d as defineCustomElement$3 } from './p-FVbfBpwz.js';
+import { d as defineCustomElement$2 } from './p-BsB67vNb.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$1 = /*@__PURE__*/ proxyCustomElement(class BhAppbar extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhMenuToggle = createEvent(this, "bhMenuToggle");
+        this.bhBreadcrumbClick = createEvent(this, "bhBreadcrumbClick");
+        this.bhNotificationClick = createEvent(this, "bhNotificationClick");
+        this.bhCalendarClick = createEvent(this, "bhCalendarClick");
+        this.bhSettingsClick = 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 (h(Host, { key: 'ae8a4a515b6384418dc4a73297d049d052b311f2' }, h("header", { key: '999bad1f106bf9a4fe8107894a55b3b1f683dd84', class: "appbar" }, h("div", { key: 'a5ff9a5e8d90adbf67ad2782eaf5e6ca43702bd4', class: "left-section" }, h("bh-button-icon", { key: '7c25230ad01e084e3ffa43bb3ce037fe9d90724b', hierarchy: "quaternary", size: "sm", iconName: this.isMenuOpen ? 'menu_open' : 'last_page', onClick: this.handleMenuToggle }), this.logoSrc && (h("div", { key: 'dd1630e2a2ff83874a9989fec6c5966d74f6a374', class: "logo" }, h("img", { key: '0971c0630bf69f35db53b36af4c5fc5c38518f56', src: this.logoSrc, alt: this.logoAlt, class: "logo-image" }))), h("slot", { key: '6b42819c05444a2a32522983a18a4526d6ad5753', name: "property-switcher" }), h("bh-breadcrumbs", { key: 'b63deedb1242f22179056f539baff4c118c43ca7', items: this.breadcrumbItems, showHome: true, onBhItemClick: (e) => this.handleBreadcrumbClick(e.detail) })), h("div", { key: '792c8be8095c8a41fbbd57e939bc7a3c8e00dee5', class: "right-section" }, h("div", { key: '3e30fbfaf6989ddea20e90e6e225462bbd5f341d', class: "icon-button-wrapper" }, h("bh-button-icon", { key: '4c91cff44cafe0595adb1dd482e3e6deb62176d0', hierarchy: "quaternary", size: "sm", iconName: "calendar_today", onClick: this.handleCalendarClick }), h("bh-badge-dot", { key: 'a6a0d51fdc1306b3a0006a0dd59a4f8c44445c7d', size: "sm", color: "success", outline: true, class: "icon-badge-dot" })), h("div", { key: 'f6ea9f12906da34315ad1d075fad964473b1bf0b', class: "icon-button-wrapper" }, h("bh-button-icon", { key: 'f35e426048468766bf5c1f314b713b710b095a53', hierarchy: "quaternary", size: "sm", iconName: "settings", onClick: this.handleSettingsClick }), h("bh-badge-dot", { key: 'f94d20164a8a8b21ac09456e824d83b2667efb66', size: "sm", color: "blue", outline: true, class: "icon-badge-dot" })), h("div", { key: 'b92beef52a5fb8d9a20ddf0d65e1de350af7cf14', class: "icon-button-wrapper" }, h("bh-button-icon", { key: '55f3c7485ac9c8aa5ba83fb699c1716cca91e7ae', hierarchy: "quaternary", size: "sm", iconName: "notifications", onClick: this.handleNotificationClick }), this.notificationCount > 0 && (h("bh-badge-dot", { key: 'a7fd28338df24721fd1bf2b6b045631cf86093f0', size: "sm", color: "error", outline: true, class: "icon-badge-dot" })))))));
+    }
+    static get style() { return bhAppbarCss; }
+}, [769, "bh-appbar", {
+        "isMenuOpen": [4, "is-menu-open"],
+        "logoSrc": [1, "logo-src"],
+        "logoAlt": [1, "logo-alt"],
+        "breadcrumbItems": [16],
+        "notificationCount": [2, "notification-count"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-appbar", "bh-badge-dot", "bh-breadcrumbs", "bh-button-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-appbar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhAppbar$1);
+            }
+            break;
+        case "bh-badge-dot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "bh-breadcrumbs":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-button-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BhAppbar = BhAppbar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhAppbar, defineCustomElement };
+//# sourceMappingURL=bh-appbar.js.map
+
+//# sourceMappingURL=bh-appbar.js.map

package/dist/components/bh-autocomplete-menu.js

@@ -0,0 +1,9 @@
+import { B as BhAutocompleteMenu$1, d as defineCustomElement$1 } from './p-qS3vvZaC.js';
+
+const BhAutocompleteMenu = BhAutocompleteMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhAutocompleteMenu, defineCustomElement };
+//# sourceMappingURL=bh-autocomplete-menu.js.map
+
+//# sourceMappingURL=bh-autocomplete-menu.js.map

package/dist/components/bh-avatar-add.js

@@ -0,0 +1,9 @@
+import { B as BhAvatarAdd$1, d as defineCustomElement$1 } from './p-DLql1qMx.js';
+
+const BhAvatarAdd = BhAvatarAdd$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhAvatarAdd, defineCustomElement };
+//# sourceMappingURL=bh-avatar-add.js.map
+
+//# sourceMappingURL=bh-avatar-add.js.map

package/dist/components/bh-avatar-stacked.js

@@ -0,0 +1,141 @@
+import { p as proxyCustomElement, H, h } from './p-DLHC5fHk.js';
+import { d as defineCustomElement$4 } from './p-D_matRYZ.js';
+import { d as defineCustomElement$3 } from './p-DLql1qMx.js';
+import { d as defineCustomElement$2 } from './p-UG_h-ztP.js';
+
+const bhAvatarStackedCss = ":host{display:inline-block;font-family:var(\n    --font-inter,\n    'Inter',\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif\n  )}.avatar-stacked{display:flex;align-items:center}.avatar-item{position:relative;display:inline-flex}.avatar-item bh-avatar,.avatar-item bh-avatar-add{box-shadow:0 0 0 2px var(--color-white, #ffffff);border-radius:50%}";
+
+const BhAvatarStacked$1 = /*@__PURE__*/ proxyCustomElement(class BhAvatarStacked extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    /**
+     * The size of the avatars in the stack
+     */
+    size = 'md';
+    /**
+     * JSON array of avatar data
+     */
+    avatars = '[]';
+    /**
+     * Maximum number of visible avatars before showing count
+     */
+    maxVisible = 10;
+    /**
+     * Whether to show the add button
+     */
+    showAddButton = true;
+    /**
+     * Tooltip text for the add button
+     */
+    addTooltipText = 'Add member';
+    /**
+     * Track hovered avatar index for tooltips
+     */
+    hoveredIndex = -1;
+    /**
+     * Track add button hover state
+     */
+    addButtonHovered = false;
+    getParsedAvatars() {
+        try {
+            return JSON.parse(this.avatars);
+        }
+        catch {
+            return [];
+        }
+    }
+    getAvatarSize() {
+        const sizeMap = {
+            xs: 24,
+            sm: 32,
+            md: 40,
+            lg: 48,
+            xl: 56,
+            '2xl': 64,
+        };
+        return sizeMap[this.size] || 40;
+    }
+    getOffset() {
+        const avatarSize = this.getAvatarSize();
+        return Math.floor(avatarSize * 0.3);
+    }
+    mapAvatarType(type) {
+        if (type === 'icon') {
+            return 'placeholder';
+        }
+        return type;
+    }
+    render() {
+        const parsedAvatars = this.getParsedAvatars();
+        const visibleAvatars = parsedAvatars.slice(0, this.maxVisible - 1);
+        const remainingCount = parsedAvatars.length - (this.maxVisible - 1);
+        const showCountAvatar = remainingCount > 0;
+        const offset = this.getOffset();
+        return (h("div", { key: 'ec073586cb5f8bc0f0b8a19c1fd38fb3103c22d9', class: `avatar-stacked avatar-stacked-${this.size}`, part: "container" }, visibleAvatars.map((avatar, index) => (h("div", { class: "avatar-item", style: { marginLeft: index > 0 ? `-${offset}px` : '0' }, onMouseEnter: () => {
+                this.hoveredIndex = index;
+            }, onMouseLeave: () => {
+                this.hoveredIndex = -1;
+            } }, h("bh-avatar", { type: this.mapAvatarType(avatar.type), size: this.size, imageSrc: avatar.imageSrc, text: avatar.text || '?', alt: avatar.text || 'Avatar' }), avatar.tooltipText && (h("bh-tooltip", { text: avatar.tooltipText, visible: this.hoveredIndex === index, position: "bottom" }))))), showCountAvatar && (h("div", { key: 'c1421d02eb8cc02c9294a654e3d735a8e0513d8a', class: "avatar-item", style: {
+                marginLeft: visibleAvatars.length > 0 ? `-${offset}px` : '0',
+            } }, h("bh-avatar", { key: '7ea83fff361629de7f68bd7a830531657d454566', type: "text", size: this.size, text: `+${remainingCount}`, alt: `${remainingCount} more` }))), this.showAddButton && (h("div", { key: 'd14845e1ea91c131af6e2ae2c658f7c267cb2281', class: "avatar-item", style: {
+                marginLeft: visibleAvatars.length > 0 || showCountAvatar
+                    ? `-${offset}px`
+                    : '0',
+            }, onMouseEnter: () => {
+                this.addButtonHovered = true;
+            }, onMouseLeave: () => {
+                this.addButtonHovered = false;
+            } }, h("bh-avatar-add", { key: '719740919ab99129f93963775976fb5a2f0c4523', size: this.size, showTooltip: true, tooltipText: this.addTooltipText })))));
+    }
+    static get style() { return bhAvatarStackedCss; }
+}, [769, "bh-avatar-stacked", {
+        "size": [1],
+        "avatars": [1],
+        "maxVisible": [2, "max-visible"],
+        "showAddButton": [4, "show-add-button"],
+        "addTooltipText": [1, "add-tooltip-text"],
+        "hoveredIndex": [32],
+        "addButtonHovered": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-avatar-stacked", "bh-avatar", "bh-avatar-add", "bh-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-avatar-stacked":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhAvatarStacked$1);
+            }
+            break;
+        case "bh-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "bh-avatar-add":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BhAvatarStacked = BhAvatarStacked$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhAvatarStacked, defineCustomElement };
+//# sourceMappingURL=bh-avatar-stacked.js.map
+
+//# sourceMappingURL=bh-avatar-stacked.js.map

package/dist/components/bh-avatar.js

@@ -0,0 +1,9 @@
+import { B as BhAvatar$1, d as defineCustomElement$1 } from './p-D_matRYZ.js';
+
+const BhAvatar = BhAvatar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhAvatar, defineCustomElement };
+//# sourceMappingURL=bh-avatar.js.map
+
+//# sourceMappingURL=bh-avatar.js.map

package/dist/components/bh-badge-dot.js

@@ -0,0 +1,9 @@
+import { B as BhBadgeDot$1, d as defineCustomElement$1 } from './p-G4wC-s5k.js';
+
+const BhBadgeDot = BhBadgeDot$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhBadgeDot, defineCustomElement };
+//# sourceMappingURL=bh-badge-dot.js.map
+
+//# sourceMappingURL=bh-badge-dot.js.map

package/dist/components/bh-badge.js

@@ -0,0 +1,9 @@
+import { B as BhBadge$1, d as defineCustomElement$1 } from './p-CKiB8Aa8.js';
+
+const BhBadge = BhBadge$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhBadge, defineCustomElement };
+//# sourceMappingURL=bh-badge.js.map
+
+//# sourceMappingURL=bh-badge.js.map