@actabldesign/bellhop-core 0.0.3 → 0.0.6

package/dist/esm/bh-accordion.entry.js

@@ -0,0 +1,117 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DXAL-jSE.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) {
+        registerInstance(this, hostRef);
+        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"]
+    }; }
+};
+BhAccordion.style = bhAccordionCss;
+
+export { BhAccordion as bh_accordion };
+//# sourceMappingURL=bh-accordion.entry.js.map

package/dist/esm/bh-appbar.entry.js

@@ -0,0 +1,81 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DXAL-jSE.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) {
+        registerInstance(this, hostRef);
+        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" })))))));
+    }
+};
+BhAppbar.style = bhAppbarCss;
+
+export { BhAppbar as bh_appbar };
+//# sourceMappingURL=bh-appbar.entry.js.map

package/dist/esm/bh-autocomplete-menu_2.entry.js

@@ -0,0 +1,174 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DXAL-jSE.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) {
+        registerInstance(this, hostRef);
+        this.bhItemClick = createEvent(this, "bhItemClick");
+        this.bhItemHover = 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) => regex.test(part) ? (h("span", { key: index, class: "highlight" }, part)) : (h("span", { key: index }, part)));
+    };
+    render() {
+        if (!this.shouldRender || this.items.length === 0) {
+            return null;
+        }
+        return (h(Host, null, h("div", { class: this.getMenuClasses(), style: { maxHeight: `${this.maxHeight}px` } }, this.items.map((item, index) => (h("div", { key: item.id, class: this.getItemClasses(index, item), onMouseEnter: () => this.handleItemMouseEnter(index), role: "option", "aria-selected": index === this.selectedIndex ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false' }, h("div", { class: "item-content", onClick: () => this.handleItemClick(item), onMouseDown: this.handleMouseDown }, h("span", { class: "item-text", title: item.label }, this.getHighlightedText(item.label)), this.multiSelect && item.selected && (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) {
+        registerInstance(this, hostRef);
+        this.bhDismiss = 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 (h("span", { key: 'ee636fd94895063d5e59160a7d54f9ceb7125d3a', class: classes }, h("div", { key: 'fcc9614abd483f5c0ecdf53b6fe7f2a3f72bdf39', class: "tag-content" }, this.variant === 'avatar' && (h("bh-avatar", { key: 'cdd5f20519b9a89753aa9f1a7cd3c3f776030997', size: "xxs", type: this.avatarSrc ? 'image' : 'placeholder', imageSrc: this.avatarSrc })), h("span", { key: '5b07fd4263d63bec8023257dacb1a417c4cfe973', class: "tag-label-wrapper" }, h("span", { key: 'dd2f1578fcaceb6a229fbf5b10253ae966baebab', class: "tag-label", style: labelStyle }, this.label))), this.dismissible && (h("button", { key: '593d8758e41957cfedc0c62bddb91d77c283996b', class: "tag-dismiss", onClick: this.handleDismiss, disabled: this.disabled, type: "button", "aria-label": "Dismiss" }, h("span", { key: '74916c4bebdf31dbf2d7a1eff6d943b8a801496f', class: "material-symbols-outlined tag-dismiss-icon" }, "close")))));
+    }
+};
+BhTag.style = bhTagCss;
+
+export { BhAutocompleteMenu as bh_autocomplete_menu, BhTag as bh_tag };
+//# sourceMappingURL=bh-autocomplete-menu.bh-tag.entry.js.map

package/dist/esm/bh-avatar-add.entry.js

@@ -0,0 +1,73 @@
+import { r as registerInstance, c as createEvent, h } from './index-DXAL-jSE.js';
+
+const bhAvatarAddCss = ":host{display:inline-block;font-family:var(\n    --font-inter,\n    'Inter',\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif\n  )}.avatar-add-container{position:relative;display:inline-flex}.avatar-add{position:relative;display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-white, #ffffff);border:1px dashed var(--color-neutral-300, #d0d5dd);border-radius:50%;cursor:pointer;transition:all 0.2s ease-in-out;padding:0;outline:none}.avatar-add-xs{width:24px;height:24px}.avatar-add-xs .avatar-add-icon{font-size:14px}.avatar-add-sm{width:32px;height:32px}.avatar-add-sm .avatar-add-icon{font-size:16px}.avatar-add-md{width:40px;height:40px}.avatar-add-md .avatar-add-icon{font-size:20px}.avatar-add-lg{width:48px;height:48px}.avatar-add-lg .avatar-add-icon{font-size:24px}.avatar-add-xl{width:56px;height:56px}.avatar-add-xl .avatar-add-icon{font-size:28px}.avatar-add-2xl{width:64px;height:64px}.avatar-add-2xl .avatar-add-icon{font-size:32px}.avatar-add-hover{background-color:var(--color-neutral-50, #f9fafb);border-color:var(--color-brand-500, #7f56d9)}.avatar-add-hover .avatar-add-icon{color:var(--color-brand-500, #7f56d9)}.avatar-add-focus{background-color:var(--color-white, #ffffff);box-shadow:0 0 0 2px var(--color-white, #ffffff),\n    0 0 0 4px var(--color-brand-500, #7f56d9)}.avatar-add-disabled{background-color:var(--color-neutral-50, #f9fafb);cursor:not-allowed;pointer-events:none}.avatar-add-disabled .avatar-add-icon{color:var(--color-neutral-300, #d0d5dd)}.avatar-add-content{display:flex;align-items:center;justify-content:center}.avatar-add-icon{color:var(--color-neutral-500, #667085);line-height:1;transition:color 0.2s ease-in-out}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}";
+
+const BhAvatarAdd = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhClick = createEvent(this, "bhClick");
+    }
+    /**
+     * Size of the avatar add button
+     */
+    size = 'md';
+    /**
+     * Whether the button is disabled
+     */
+    disabled = false;
+    /**
+     * Whether to show tooltip on hover
+     */
+    showTooltip = false;
+    /**
+     * Tooltip text
+     */
+    tooltipText = 'Add user';
+    /**
+     * Track hover state
+     */
+    isHovered = false;
+    /**
+     * Track focus state
+     */
+    isFocused = false;
+    /**
+     * Emitted when the button is clicked
+     */
+    bhClick;
+    handleClick = (event) => {
+        if (!this.disabled) {
+            this.bhClick.emit(event);
+        }
+    };
+    handleKeyDown = (event) => {
+        if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {
+            event.preventDefault();
+            this.bhClick.emit(event);
+        }
+    };
+    render() {
+        const buttonClasses = {
+            'avatar-add': true,
+            [`avatar-add-${this.size}`]: true,
+            'avatar-add-hover': this.isHovered && !this.disabled,
+            'avatar-add-focus': this.isFocused && !this.disabled,
+            'avatar-add-disabled': this.disabled,
+        };
+        return (h("div", { key: 'e906187ea6a036fa259715d89e798e884e595c85', class: "avatar-add-container" }, h("button", { key: '777975b9886ba59bb18461354b01a9a628f92fb7', type: "button", class: buttonClasses, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: () => {
+                if (!this.disabled)
+                    this.isHovered = true;
+            }, onMouseLeave: () => {
+                this.isHovered = false;
+            }, onFocus: () => {
+                if (!this.disabled)
+                    this.isFocused = true;
+            }, onBlur: () => {
+                this.isFocused = false;
+            }, "aria-label": this.tooltipText, part: "button" }, h("span", { key: '6ed6ab00fca8e55d2954baa2dca372d07798f22b', class: "avatar-add-content" }, h("span", { key: '06ec0f650d23a82716bd38bedf8e4bebda532a17', class: "material-symbols-outlined avatar-add-icon" }, "add"))), this.showTooltip && (h("bh-tooltip", { key: '365183808234299da29de605122b3b13826172ed', text: this.tooltipText, visible: this.isHovered && !this.disabled, position: "bottom" }))));
+    }
+};
+BhAvatarAdd.style = bhAvatarAddCss;
+
+export { BhAvatarAdd as bh_avatar_add };
+//# sourceMappingURL=bh-avatar-add.entry.js.map

package/dist/esm/bh-avatar-stacked.entry.js

@@ -0,0 +1,92 @@
+import { r as registerInstance, h } from './index-DXAL-jSE.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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * 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 })))));
+    }
+};
+BhAvatarStacked.style = bhAvatarStackedCss;
+
+export { BhAvatarStacked as bh_avatar_stacked };
+//# sourceMappingURL=bh-avatar-stacked.entry.js.map

package/dist/esm/bh-avatar.entry.js

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