@actabldesign/bellhop-core 0.3.0 → 0.3.1

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

@@ -4,8 +4,9 @@ import { c as createFocusStateManager, g as getFocusStateClasses } from './focus
 import { t as timer$Sync } from './timers-Bf0qW3wI.js';
 import { a as isActionKey } from './keyboard-helpers-Dg0_t7Yy.js';
 import { A as ANIMATION_DURATIONS } from './constants-BoVgy_Ao.js';
-import { c as createComponentLogger, r as reportComponentError } from './error-boundary-YLeLKAYJ.js';
+import { c as createComponentLogger } from './logger-CMKOFHIa.js';
 import { m as metrics, M as MetricNames } from './metrics-CSH9RXgl.js';
+import { r as reportComponentError } from './error-boundary-afpK3NgJ.js';
 import './keyboard-constants-zdFuIabL.js';
 
 const bhAccordionItemCss = () => `@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}@layer bh-tokens,bh-base,bh-variants,bh-states,bh-utilities; @layer bh-tokens{:host{display:flex;flex-direction:column;width:100%;--bh-accordion-item-bg:var(--color-bg-primary);--bh-accordion-item-border-color:var(--color-border-secondary);--bh-accordion-item-hover-bg:var(--color-bg-secondary);--bh-accordion-item-focus-ring:var(--color-border-interactive);--bh-accordion-item-title-color:var(--color-text-primary);--bh-accordion-item-icon-color:var(--color-text-tertiary);background-color:var(--bh-accordion-item-bg)}}@layer bh-base{.accordion-header{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-xl);padding:var(--spacing-xl) var(--spacing-2xl);cursor:pointer;background-color:var(--bh-accordion-item-bg);border:none;border-bottom:1px solid var(--bh-accordion-item-border-color);transition:background-color var(--animation-duration-fast) ease}.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(--line-height-normal);color:var(--bh-accordion-item-title-color)}.accordion-icon{display:flex;align-items:center;justify-content:center;width:var(--icon-size-lg);height:var(--icon-size-lg);font-size:var(--icon-size-lg);color:var(--bh-accordion-item-icon-color);transition:transform var(--animation-duration-normal) ease;flex-shrink:0}.accordion-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--animation-duration-normal) ease;overflow:hidden}.accordion-content-inner{min-height:0;overflow:hidden}}@layer bh-states{: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-xl) var(--spacing-2xl) var(--spacing-2xl);border-bottom:1px solid var(--bh-accordion-item-border-color)}: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}.accordion-header:hover{background-color:var(--bh-accordion-item-hover-bg)}.accordion-header:focus{outline:none}.accordion-header:focus-visible{outline:2px solid var(--bh-accordion-item-focus-ring);outline-offset:-2px}}`;
@@ -117,7 +118,7 @@ const BhAccordionItem = class {
             ...(this.disabled ? {} : focusClasses),
         };
         const iconName = this.expanded ? ICON_EXPANDED : ICON_COLLAPSED;
-        return (h(Host, { key: 'e39eb35f75ced83a5a429f788b5455a4606b51ac', class: hostClasses }, h("div", { key: 'f8c076e3a0c93e4b6eaf97597e41c3e14dc195a4', "aria-controls": `content-${this.value}`, "aria-disabled": this.disabled ? "true" : "false", "aria-expanded": this.expanded ? "true" : "false", class: headerClasses, "data-focus-visible": this.focusState.isKeyboardFocused ? "true" : "false", "data-focused": String(this.focusState.isFocused), "data-hovered": String(this.focusState.isHovered), id: `header-${this.value}`, onBlur: this.handleBlur, onClick: this.handleHeaderClick, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, part: "header", role: "button", tabindex: this.disabled ? -1 : 0 }, h("div", { key: '0a43614cd1e6584193b9b15b64390284fc59b287', class: "accordion-header-content" }, h("span", { key: 'f6e970201bf2f2aba5730e69b27819219d0cfcf1', class: "accordion-title", part: "title" }, this.header)), h("span", { key: '55312fb63f34a69b183556137302e3394cf0d498', class: "accordion-icon material-symbols-outlined", part: "icon" }, iconName)), h("div", { key: 'f4a9acc2db59b440e525c1506492e08a095a32ad', "aria-hidden": this.expanded ? "false" : "true", "aria-labelledby": `header-${this.value}`, class: "accordion-content", id: `content-${this.value}`, part: "content", role: "region" }, h("div", { key: '9f5477ab57f2722d3a42828dbc4c79b0cde52f58', class: "accordion-content-inner" }, h("slot", { key: 'c759c88374f904c2b3e75247c3cfa820ac997bd3' })))));
+        return (h(Host, { key: 'd82a922b41f625b1248368c17a2110d21750fbc5', class: hostClasses }, h("div", { key: '687ee90838c80ca143a8d09ad0fcde037cdf5c82', "aria-controls": `content-${this.value}`, "aria-disabled": this.disabled ? "true" : "false", "aria-expanded": this.expanded ? "true" : "false", class: headerClasses, "data-focus-visible": this.focusState.isKeyboardFocused ? "true" : "false", "data-focused": String(this.focusState.isFocused), "data-hovered": String(this.focusState.isHovered), id: `header-${this.value}`, onBlur: this.handleBlur, onClick: this.handleHeaderClick, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, part: "header", role: "button", tabindex: this.disabled ? -1 : 0 }, h("div", { key: 'd49e9935d195158dc6650174ac026c085d7c89e4', class: "accordion-header-content" }, h("span", { key: 'a001b08616eb0aee016872d245b90a2170ac9648', class: "accordion-title", part: "title" }, this.header)), h("span", { key: '83904edf776736ecff2e9e2f100003ed900a4a25', class: "accordion-icon material-symbols-outlined", part: "icon" }, iconName)), h("div", { key: '320ecef3a9c68f018814e7a452177add0d54b6b3', "aria-hidden": this.expanded ? "false" : "true", "aria-labelledby": `header-${this.value}`, class: "accordion-content", id: `content-${this.value}`, part: "content", role: "region" }, h("div", { key: '64b99758e415308056f49dfc781da4b401161ff5', class: "accordion-content-inner" }, h("slot", { key: 'e7d64ed9ad3d1d3be99e6eaa9b03136b90e63bd0' })))));
     }
     static get watchers() { return {
         "expanded": [{

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

@@ -1,6 +1,7 @@
 import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-CTHvNfIu.js';
-import { c as createComponentLogger, r as reportComponentError } from './error-boundary-YLeLKAYJ.js';
+import { c as createComponentLogger } from './logger-CMKOFHIa.js';
 import { m as metrics, M as MetricNames } from './metrics-CSH9RXgl.js';
+import { r as reportComponentError } from './error-boundary-afpK3NgJ.js';
 
 const bhAccordionCss = () => `@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}@layer bh-tokens,bh-base,bh-variants,bh-states,bh-utilities; @layer bh-tokens{:host{display:block;width:100%;--bh-accordion-bg:var(--color-bg-primary)}}@layer bh-base{.accordion-container{display:flex;flex-direction:column;width:100%;background-color:var(--bh-accordion-bg)}}@layer bh-variants{.accordion-single .accordion-container{}.accordion-multiple .accordion-container{}}`;
 

package/dist/esm/bh-activity-feed_2.entry.js

@@ -0,0 +1,171 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-CTHvNfIu.js';
+import { c as createComponentLogger } from './logger-CMKOFHIa.js';
+import { m as metrics, M as MetricNames } from './metrics-CSH9RXgl.js';
+import { r as reportComponentError } from './error-boundary-afpK3NgJ.js';
+import { B as BellhopI18n, r as resolveI18n } from './i18n-BNVOtH-1.js';
+import { a as isActionKey } from './keyboard-helpers-Dg0_t7Yy.js';
+import './keyboard-constants-zdFuIabL.js';
+
+const bhActivityFeedCss = () => `@charset "UTF-8";@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}@layer bh-tokens,bh-base,bh-variants,bh-states,bh-utilities; @layer bh-tokens{:host{display:block;font-family:var(--font-inter);--bh-activity-feed-bg:var(--color-bg-primary);--bh-activity-feed-border:var(--color-border-secondary);--bh-activity-feed-header-bg:var(--color-bg-primary);--bh-activity-feed-header-border:var(--color-border-secondary);--bh-activity-feed-divider-color:var(--color-border-secondary);--bh-activity-feed-heading-color:var(--color-text-primary);--bh-activity-feed-connector-color:var(--color-border-secondary);--bh-activity-feed-connector-width:2px}}@layer bh-base{.activity-feed{display:flex;flex-direction:column;background:var(--bh-activity-feed-bg);width:100%}.activity-feed-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-xl);border-bottom:1px solid var(--bh-activity-feed-header-border);background:var(--bh-activity-feed-header-bg)}.activity-feed-header-content{display:flex;align-items:center;gap:var(--spacing-md);flex:1;min-width:0}.header-icon{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;font-size:var(--icon-size-md);color:var(--bh-activity-feed-heading-color)}.activity-feed-heading{font-size:var(--text-lg-size);font-weight:var(--weight-semibold);line-height:var(--text-lg-line);color:var(--bh-activity-feed-heading-color);margin:0}.activity-feed-list{display:flex;flex-direction:column;overflow-y:auto;padding:var(--spacing-lg)}}@layer bh-variants{.activity-feed-divider-line .activity-feed-list ::slotted(bh-feed-item:not(:last-child)){border-bottom:1px solid var(--bh-activity-feed-divider-color);padding-bottom:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.activity-feed-flush .activity-feed-list{padding:0}.activity-feed-flush.activity-feed-divider-line .activity-feed-list ::slotted(bh-feed-item:not(:last-child)){padding-bottom:0;margin-bottom:0}.activity-feed-divider-divider .activity-feed-list ::slotted(bh-feed-item:not(:last-child)){border-bottom:1px solid var(--bh-activity-feed-divider-color);padding-bottom:var(--spacing-2xl);margin-bottom:var(--spacing-2xl)}.activity-feed-divider-connector .activity-feed-list ::slotted(bh-feed-item){margin-bottom:0}.activity-feed-divider-none .activity-feed-list ::slotted(bh-feed-item:not(:last-child)){margin-bottom:var(--spacing-xl)}.activity-feed-messages .activity-feed-list ::slotted(bh-feed-item:not(:last-child)){margin-bottom:var(--spacing-2xl)}.activity-feed-with-header{border:1px solid var(--bh-activity-feed-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}}`;
+
+const COMPONENT_NAME$1 = "bh-activity-feed";
+const BhActivityFeed = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhClose = createEvent(this, "bhClose");
+    }
+    logger = createComponentLogger(COMPONENT_NAME$1);
+    i18nUnsubscribe;
+    _i18nVersion = 0;
+    /** Type of feed content: notifications (compact) or messages (chat-style) */
+    type = "notifications";
+    /** Divider style between feed items */
+    divider = "none";
+    /** Whether to show a header with title and close button */
+    showHeader = false;
+    /** Header title text (e.g. "Notifications") */
+    heading = "";
+    /** Material icon name for the header icon */
+    headerIcon = "";
+    /** Maximum height for the scrollable feed area (CSS value, e.g. "400px") */
+    maxHeight = "";
+    /**
+     * Edge-to-edge list: removes the list padding and inter-item margins so
+     * item backgrounds and dividers span the full container width — for
+     * panel-style surfaces like notification centers.
+     */
+    flush = false;
+    /** Accessible label for the close button. Allows i18n. */
+    closeAriaLabel = "Close";
+    /** Emitted when the close button is clicked */
+    bhClose;
+    componentDidCatch(error) {
+        this.logger.error("Component error caught", error instanceof Error ? error : new Error(String(error)));
+        metrics.increment(MetricNames.COMPONENT_ERROR, {
+            component: COMPONENT_NAME$1,
+            error_type: error instanceof Error ? error.name : "unknown",
+        });
+        reportComponentError(COMPONENT_NAME$1, error);
+    }
+    componentWillLoad() {
+        this.i18nUnsubscribe = BellhopI18n.onLocaleChange(() => {
+            this._i18nVersion++;
+        });
+    }
+    disconnectedCallback() {
+        this.i18nUnsubscribe?.();
+    }
+    handleClose = () => {
+        this.bhClose.emit();
+    };
+    renderHeader() {
+        if (!this.showHeader)
+            return null;
+        return (h("div", { class: "activity-feed-header", part: "header" }, h("div", { class: "activity-feed-header-content" }, this.headerIcon && (h("span", { class: "header-icon" }, h("bh-featured-icon", { color: "gray", icon: this.headerIcon, "icon-style": "outlined", size: "md" }))), this.heading && (h("h2", { class: "activity-feed-heading", part: "heading" }, this.heading)), h("slot", { name: "header-actions" })), h("bh-close-button", { ariaLabel: resolveI18n(COMPONENT_NAME$1, "closeAriaLabel", this.closeAriaLabel, "Close"), onClick: this.handleClose })));
+    }
+    render() {
+        const feedStyle = this.maxHeight ? { "max-height": this.maxHeight } : {};
+        return (h(Host, { key: '0a631e358bb25ec3d4a21d8b6cc2d86c91a0dca4' }, h("div", { key: '9e5eddafb5bd043acfdf54af7bd6dbeb4569d961', class: {
+                "activity-feed": true,
+                [`activity-feed-${this.type}`]: true,
+                [`activity-feed-divider-${this.divider}`]: true,
+                "activity-feed-with-header": this.showHeader,
+                "activity-feed-flush": this.flush,
+            }, part: "container" }, this.renderHeader(), h("div", { key: '6647af1dce5d657c05bd8dce423842d690426275', "aria-label": this.heading || "Activity feed", class: "activity-feed-list", part: "list", role: "feed", style: feedStyle }, h("slot", { key: '65cf6330ac0cfb361145d0c28396f2d5cfb739cc' })))));
+    }
+};
+BhActivityFeed.style = bhActivityFeedCss();
+
+const bhFeedItemCss = () => `@layer bh-tokens,bh-base,bh-variants,bh-states,bh-utilities; @layer bh-tokens{:host{display:block;font-family:var(--font-inter);--bh-feed-item-author-color:var(--color-text-primary);--bh-feed-item-timestamp-color:var(--color-text-tertiary);--bh-feed-item-text-color:var(--color-text-secondary);--bh-feed-item-connector-color:var(--color-border-secondary);--bh-feed-item-connector-width:2px;--bh-feed-item-bubble-border:var(--color-border-secondary);--bh-feed-item-bubble-shadow:var(--shadow-xs)}}@layer bh-base{.feed-item{display:flex;align-items:flex-start;gap:var(--spacing-lg);position:relative;width:100%}.feed-item-avatar-col{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);flex-shrink:0}.feed-item-icon-col{display:flex;align-items:flex-start;flex-shrink:0}.feed-item-avatar-col-connector{align-self:stretch;padding-bottom:var(--spacing-xs)}.feed-item-avatar{flex-shrink:0}.feed-item-connector{flex:1;width:var(--bh-feed-item-connector-width);min-height:1px;background:var(--bh-feed-item-connector-color);border-radius:var(--spacing-xxs)}.feed-item-content{display:flex;flex-direction:column;flex:1;min-width:0;min-height:1px;gap:var(--spacing-lg)}.feed-item-content-with-connector{padding-bottom:var(--spacing-4xl)}.feed-item-content-no-supporting{gap:0}.feed-item-header{display:flex;flex-direction:column;gap:0;width:100%}.feed-item-meta{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.feed-item-author{font-size:var(--text-sm-size);font-weight:var(--weight-medium);line-height:var(--line-height-normal);color:var(--bh-feed-item-author-color);flex-shrink:0}.feed-item-timestamp{font-size:var(--text-xs-size);font-weight:var(--weight-regular);line-height:var(--text-xs-line);color:var(--bh-feed-item-timestamp-color);flex-shrink:0}.feed-item-text{font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--line-height-normal);color:var(--bh-feed-item-text-color);width:100%;word-wrap:break-word}.feed-item-supporting{width:100%}.feed-item-dot{flex-shrink:0;display:flex;align-items:flex-start;padding-top:var(--spacing-xs)}}@layer bh-variants{.feed-item-sm .feed-item-avatar ::slotted(*){width:var(--bh-avatar-size-sm);height:var(--bh-avatar-size-sm)}.feed-item-md .feed-item-avatar ::slotted(*){width:var(--bh-avatar-size-md);height:var(--bh-avatar-size-md)}.feed-item-supporting-text ::slotted(*){border:1px solid var(--bh-feed-item-bubble-border);border-radius:0 var(--spacing-md) var(--spacing-md) var(--spacing-md);padding:var(--spacing-lg);box-shadow:var(--bh-feed-item-bubble-shadow);font-size:var(--text-sm-size);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.feed-item-supporting-file ::slotted(*){display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);border:1px solid var(--color-border-secondary);border-radius:var(--radius-md);background:var(--color-bg-primary)}.feed-item-supporting-labels ::slotted(*){display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}}@layer bh-states{.feed-item{cursor:pointer}}`;
+
+const COMPONENT_NAME = "bh-feed-item";
+const BhFeedItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhClick = createEvent(this, "bhClick");
+    }
+    logger = createComponentLogger(COMPONENT_NAME);
+    /** Author name displayed in the feed item */
+    author = "";
+    /** Timestamp text (e.g. "2 mins ago") */
+    timestamp = "";
+    /**
+     * Plain text content fallback. For rich content with inline links
+     * (as shown in Figma), use the default slot instead:
+     * `<bh-feed-item><span>Invited <a href="#">Name</a></span></bh-feed-item>`
+     */
+    content = "";
+    /** Size variant */
+    size = "md";
+    /** Whether to show the vertical connector line */
+    showConnector = false;
+    /** Whether to show the new/unread status dot */
+    showDot = false;
+    /** Whether to show the subtext (timestamp) */
+    showSubtext = true;
+    /** Type of supporting content below the main text */
+    supportingContent = "none";
+    /**
+     * Item flavor: "user" renders the avatar/author column; "system" is a
+     * sender-less message (notifications, audit events) with an optional
+     * icon column instead.
+     */
+    variant = "user";
+    /** Material Symbols icon shown in place of the avatar (system variant) */
+    icon;
+    /**
+     * Bold heading text rendered where the author name sits. When set it
+     * wins over `author` (which still drives the avatar) — e.g. a user
+     * notification titled "New comment" sent by Chris. Required for
+     * system items, which have no author.
+     */
+    itemTitle;
+    /** Emitted when the feed item is clicked */
+    bhClick;
+    componentDidCatch(error) {
+        this.logger.error("Component error caught", error instanceof Error ? error : new Error(String(error)));
+        metrics.increment(MetricNames.COMPONENT_ERROR, {
+            component: COMPONENT_NAME,
+            error_type: error instanceof Error ? error.name : "unknown",
+        });
+        reportComponentError(COMPONENT_NAME, error);
+    }
+    getInitials() {
+        return this.author
+            .split(" ")
+            .map((word) => word.charAt(0))
+            .join("")
+            .toUpperCase()
+            .slice(0, 2);
+    }
+    handleClick = () => {
+        this.bhClick.emit();
+    };
+    handleKeyDown = (event) => {
+        if (isActionKey(event)) {
+            event.preventDefault();
+            this.bhClick.emit();
+        }
+    };
+    render() {
+        const hasSupportingContent = this.supportingContent !== "none";
+        return (h(Host, { key: 'c236a43e36605b1769858667ff7046ca659dbf8a' }, h("div", { key: 'b3bbc51636b33ab2db63bc3ae049ec683d344159', "aria-label": this.variant === "system"
+                ? this.itemTitle || "Notification"
+                : this.author
+                    ? `Feed item from ${this.author}`
+                    : "Feed item", class: {
+                "feed-item": true,
+                [`feed-item-${this.size}`]: true,
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown, part: "container", role: "article", tabindex: 0 }, this.variant === "system" ? (this.icon && (h("div", { class: "feed-item-icon-col", part: "icon-column" }, h("bh-featured-icon", { class: "feed-item-icon", color: "brand", icon: this.icon, part: "icon", size: this.size === "sm" ? "sm" : "md" })))) : (h("div", { class: {
+                "feed-item-avatar-col": true,
+                "feed-item-avatar-col-connector": this.showConnector,
+            }, part: "avatar-column" }, h("div", { class: "feed-item-avatar", part: "avatar" }, h("slot", { name: "avatar" }, this.author && (h("bh-avatar", { size: this.size === "sm" ? "sm" : "md", text: this.getInitials(), variant: "text" })))), this.showConnector && (h("div", { class: "feed-item-connector", part: "connector" })))), h("div", { key: '45bf8238ad5b012d7cb66127e5b519c56a28fbd0', class: {
+                "feed-item-content": true,
+                "feed-item-content-with-connector": this.showConnector && hasSupportingContent,
+                "feed-item-content-no-supporting": !hasSupportingContent,
+            }, part: "content" }, h("div", { key: 'bc295befb3b4c2d1596499c1e4611c4f7d8eb959', class: "feed-item-header", part: "header" }, h("div", { key: '7c2253540cae0b97cb205fe1753c5dbaaa3b5e83', class: "feed-item-meta", part: "meta" }, (this.itemTitle || this.author) && (h("span", { key: '16990d09e3e477031180420c53d56fa9093a4397', class: "feed-item-author", part: "author" }, this.itemTitle || this.author)), this.showSubtext && this.timestamp && (h("span", { key: '7c31c0e8e80d85c12351ec061d88a0e3a5238296', class: "feed-item-timestamp", part: "timestamp" }, this.timestamp))), h("div", { key: '70f12d1eb6c8af4e2a421859e631b7c073d721fd', class: "feed-item-text", part: "text" }, h("slot", { key: '064ca607229d49a25477d9166abc6ecd515d8213' }, this.content))), hasSupportingContent && (h("div", { key: '8c334fcf61af0f2084b85ea3ab960f3d8740246b', class: `feed-item-supporting feed-item-supporting-${this.supportingContent}`, part: "supporting" }, h("slot", { key: 'c2e97890f6b6787c72c522c4c8af4fa88be3715e', name: "supporting" })))), this.showDot && (h("div", { key: 'fc40de69cc7312dd15f103f606e0797bfb1de003', class: "feed-item-dot", part: "dot" }, h("bh-badge-dot", { key: 'e7a4fde08499915ffee1a2b6145fbcf7176168f1', color: "success", size: this.size }))))));
+    }
+};
+BhFeedItem.style = bhFeedItemCss();
+
+export { BhActivityFeed as bh_activity_feed, BhFeedItem as bh_feed_item };

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

@@ -1,7 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-CTHvNfIu.js';
-import { c as createComponentLogger, r as reportComponentError } from './error-boundary-YLeLKAYJ.js';
-import { m as metrics, M as MetricNames } from './metrics-CSH9RXgl.js';
 import { B as BellhopI18n, r as resolveI18n } from './i18n-BNVOtH-1.js';
+import { c as createComponentLogger } from './logger-CMKOFHIa.js';
+import { m as metrics, M as MetricNames } from './metrics-CSH9RXgl.js';
+import { r as reportComponentError } from './error-boundary-afpK3NgJ.js';
 import { i as isEscapeKey } from './keyboard-helpers-Dg0_t7Yy.js';
 import './keyboard-constants-zdFuIabL.js';
 

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

@@ -1,9 +1,10 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-CTHvNfIu.js';
-import { c as createComponentLogger, r as reportComponentError } from './error-boundary-YLeLKAYJ.js';
+import { c as createComponentLogger } from './logger-CMKOFHIa.js';
 import { B as BellhopI18n, r as resolveI18n } from './i18n-BNVOtH-1.js';
 import { m as metrics, M as MetricNames } from './metrics-CSH9RXgl.js';
+import { r as reportComponentError } from './error-boundary-afpK3NgJ.js';
 
-const bhAppbarCss = () => `@keyframes spin {   from {     transform: rotate(0deg);   }   to {     transform: rotate(360deg);   } } @keyframes pulse {   0%, 100% {     opacity: 1;   }   50% {     opacity: 0.5;   } }  :root {      --bh-breakpoint-xs: 0;   --bh-breakpoint-sm: 576px;   --bh-breakpoint-md: 768px;   --bh-breakpoint-lg: 992px;   --bh-breakpoint-xl: 1200px;   --bh-breakpoint-xxl: 1400px;      --bh-container-sm: 540px;   --bh-container-md: 720px;   --bh-container-lg: 960px;   --bh-container-xl: 1140px;   --bh-container-xxl: 1320px; }      @layer bh-tokens, bh-base, bh-variants, bh-states, bh-utilities; @layer bh-tokens {   :host {          --bh-appbar-bg: var(--color-bg-primary);     --bh-appbar-border-color: var(--color-border-secondary);     --bh-appbar-logo-color: var(--color-text-interactive);   } } @layer bh-base {   .appbar {     display: flex;     align-items: center;     justify-content: space-between;     height: var(--bh-avatar-size-xl);     padding: 0 var(--spacing-sm);     background-color: var(--bh-appbar-bg);     border-bottom: 1px solid var(--bh-appbar-border-color);     font-family: var(--font-inter);     position: sticky;     top: 0;     z-index: var(--bh-z-index-fixed);     box-sizing: border-box;     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-5xl);     height: var(--spacing-5xl);     color: var(--bh-appbar-logo-color);   }   .logo-image {     width: var(--icon-size-3xl);     height: var(--icon-size-3xl);     object-fit: contain;   }      .right-section {     display: flex;     align-items: center;     gap: var(--spacing-md);     flex-shrink: 0;   }   ::slotted([slot=actions]) {     display: flex;     align-items: center;     gap: var(--spacing-md);   }   .icon-button-wrapper {     position: relative;   }   .icon-badge-dot {     position: absolute;     top: calc(-1 * var(--spacing-md));     right: var(--spacing-xxs);   } } @layer bh-utilities {      @media (max-width: 768px) {     .appbar {       padding: 0 var(--spacing-xl);     }     .left-section {       gap: var(--spacing-lg);     }   }   @media (max-width: 480px) {     .appbar {       padding: 0 var(--spacing-lg);     }     .right-section {       gap: var(--spacing-xs);     }   } }`;
+const bhAppbarCss = () => `@charset "UTF-8"; @keyframes spin {   from {     transform: rotate(0deg);   }   to {     transform: rotate(360deg);   } } @keyframes pulse {   0%, 100% {     opacity: 1;   }   50% {     opacity: 0.5;   } }  :root {      --bh-breakpoint-xs: 0;   --bh-breakpoint-sm: 576px;   --bh-breakpoint-md: 768px;   --bh-breakpoint-lg: 992px;   --bh-breakpoint-xl: 1200px;   --bh-breakpoint-xxl: 1400px;      --bh-container-sm: 540px;   --bh-container-md: 720px;   --bh-container-lg: 960px;   --bh-container-xl: 1140px;   --bh-container-xxl: 1320px; }      @layer bh-tokens, bh-base, bh-variants, bh-states, bh-utilities; @layer bh-tokens {   :host {          --bh-appbar-bg: var(--color-bg-primary);     --bh-appbar-border-color: var(--color-border-secondary);     --bh-appbar-logo-color: var(--color-text-interactive);   } } @layer bh-base {   .appbar {     display: flex;     align-items: center;     justify-content: space-between;     height: var(--bh-avatar-size-xl);          padding: 0 var(--spacing-xl) 0 var(--spacing-sm);     background-color: var(--bh-appbar-bg);     border-bottom: 1px solid var(--bh-appbar-border-color);     font-family: var(--font-inter);     position: sticky;     top: 0;     z-index: var(--bh-z-index-fixed);     box-sizing: border-box;     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-5xl);     height: var(--spacing-5xl);     color: var(--bh-appbar-logo-color);   }   .logo-image {     width: var(--icon-size-3xl);     height: var(--icon-size-3xl);     object-fit: contain;   }      .right-section {     display: flex;     align-items: center;     gap: var(--spacing-md);     flex-shrink: 0;   }   ::slotted([slot=actions]) {     display: flex;     align-items: center;     gap: var(--spacing-md);   }   .icon-button-wrapper {     position: relative;   }   .icon-badge-dot {     position: absolute;     top: calc(-1 * var(--spacing-md));     right: var(--spacing-xxs);   }      .icon-badge-count {     position: absolute;     top: var(--bh-corner-badge-count-offset, calc(-1.5 * var(--spacing-sm)));     right: var(--bh-corner-badge-count-offset, calc(-1.5 * var(--spacing-sm)));     opacity: 0.8;     pointer-events: none;   }   .icon-badge-count:hover {     opacity: 1;   }      .sr-only {     position: absolute;     width: 1px;     height: 1px;     padding: 0;     margin: -1px;     overflow: hidden;     clip: rect(0, 0, 0, 0);     white-space: nowrap;     border: 0;   } } @layer bh-utilities {      @media (max-width: 768px) {     .appbar {       padding: 0 var(--spacing-xl);     }     .left-section {       gap: var(--spacing-lg);     }   }   @media (max-width: 480px) {     .appbar {       padding: 0 var(--spacing-lg);     }     .right-section {       gap: var(--spacing-xs);     }   } }`;
 
 const BhAppbar = class {
     constructor(hostRef) {
@@ -51,6 +52,42 @@ const BhAppbar = class {
      * Show the home icon in the breadcrumb trail
      */
     showBreadcrumbHome = true;
+    /**
+     * Show the built-in calendar action button
+     */
+    showCalendar = true;
+    /**
+     * Show the built-in settings action button
+     */
+    showSettings = true;
+    /**
+     * Show the built-in notifications action button
+     */
+    showNotifications = true;
+    /**
+     * Unread-notification indicator style: badge dot or count badge
+     */
+    notificationBadge = "dot";
+    /**
+     * Notification data (array or JSON string). When provided, the built-in
+     * bell becomes a full bh-notification-center (popover panel, read state,
+     * mark-read) and `notificationCount` is ignored. Without it, the plain
+     * bell renders and clicking it emits bhAction only.
+     */
+    notifications;
+    /**
+     * Accessible label for the notifications button. Allows i18n.
+     */
+    notificationsAriaLabel = "Notifications";
+    /**
+     * Screen-reader announcement template when notifications exist.
+     * `{{count}}` is replaced with the notification count. Allows i18n.
+     */
+    notificationsAnnouncement = "{{count}} new notifications";
+    /**
+     * Screen-reader announcement when there are no notifications. Allows i18n.
+     */
+    noNotificationsAnnouncement = "No new notifications";
     /**
      * Event emitted when menu toggle is clicked
      */
@@ -88,19 +125,28 @@ const BhAppbar = class {
             this.bhItemClick.emit(item);
         }
     };
-    handleNotificationClick = () => { };
+    handleNotificationClick = () => {
+        this.bhAction.emit({ action: "notifications" });
+    };
     handleCalendarClick = () => {
         this.bhAction.emit({ action: "calendar" });
     };
-    handleSettingsClick = () => { };
+    handleSettingsClick = () => {
+        this.bhAction.emit({ action: "settings" });
+    };
+    notificationAnnouncement() {
+        if (this.notificationCount > 0) {
+            return resolveI18n("bh-appbar", "notificationsAnnouncement", this.notificationsAnnouncement, "{{count}} new notifications").replace("{{count}}", String(this.notificationCount));
+        }
+        return resolveI18n("bh-appbar", "noNotificationsAnnouncement", this.noNotificationsAnnouncement, "No new notifications");
+    }
     render() {
-        return (h(Host, { key: '129e250eeb5361cf8792338de4440fe6982fcbdc' }, h("header", { key: '9ebf5d95d4170a30cb6ec1bfd39e7571b4916e91', class: "appbar", part: "header", role: "banner" }, h("div", { key: '72d6ad7a3ee8b00cc1e96cc9a9f7d904258270ef', class: "left-section", part: "left-section" }, h("bh-button-icon", { key: '8ba7db5071f2df0726b9f7faa83a3f4c307c0f52', ariaLabel: this.isMenuOpen
+        return (h(Host, { key: 'fae737fd6bd652262a50fe772c6d747665320bae' }, h("header", { key: 'ee050d082b31aacfa3cfac28c41194ba542bbb10', class: "appbar", part: "header", role: "banner" }, h("div", { key: 'de0b399c07780c4c3c1a80c3a2e51c5a38139bf9', class: "left-section", part: "left-section" }, h("bh-button-icon", { key: 'e69b1989ac771ae1dfb17f608098be3163433593', ariaLabel: this.isMenuOpen
                 ? resolveI18n("bh-appbar", "closeMenuAriaLabel", this.closeMenuAriaLabel, "Close menu")
-                : resolveI18n("bh-appbar", "openMenuAriaLabel", this.openMenuAriaLabel, "Open menu"), hierarchy: "tertiary", iconName: this.isMenuOpen ? "left_panel_close" : "left_panel_open", onClick: this.handleMenuToggle, size: "sm" }), this.logoSrc && (h("div", { key: '83365a303c79b7514715128750294c14144f404d', class: "logo" }, h("img", { key: '2e30cd3618df5d61f91e9f892c23b2efe059c908', alt: resolveI18n("bh-appbar", "logoAlt", this.logoAlt, "Solstice"), class: "logo-image", src: this.logoSrc }))), h("slot", { key: 'db5d6f272860d9a45188a107fb4e95b15dc35390', name: "property-switcher" }), h("bh-breadcrumbs", { key: 'e559c3f690ff6a029e6015de7ee4fa79bfa0c1b3', items: this.breadcrumbItems, onBhItemClick: (e) => this.handleBreadcrumbClick(e.detail), showHome: this.showBreadcrumbHome })), h("div", { key: '9f270400a3b727988ce8d23416c9939416d7d7a5', class: "right-section", part: "right-section" }, h("slot", { key: 'df4dec79ef5b1655b4da122c0202558b3531be1e', name: "actions" }), h("div", { key: '7e5448f27626c00b9d4981c5d86249c68ff475e8', class: "icon-button-wrapper" }, h("bh-button-icon", { key: '0bb109cecbdd1efb81bf996d272e7fc983f9174f', ariaLabel: "Calendar", hierarchy: "tertiary", iconName: "calendar_today", onClick: this.handleCalendarClick, size: "sm" }), h("bh-badge-dot", { key: 'cbb6dc7208fa02e58cc557d6634def7632fbb2fb', class: "icon-badge-dot", color: "success", outline: true, size: "sm" })), h("div", { key: '8597286d8e35d7798dc24eec41ff561ce5e1ae41', class: "icon-button-wrapper" }, h("bh-button-icon", { key: '98284f1621d628733f1045089af4f5a9f99ab5da', ariaLabel: "Settings", hierarchy: "tertiary", iconName: "settings", onClick: this.handleSettingsClick, size: "sm" }), h("bh-badge-dot", { key: '628812cf1cf5e3b68d2a838fad9e92a4feb11078', class: "icon-badge-dot", color: "blue", outline: true, size: "sm" })), h("div", { key: '47df390313bce50ded59d413ebd4dc4b803cb94d', class: "icon-button-wrapper" }, h("bh-button-icon", { key: 'b11cb886e8b77c5cbee7f10b72d38fe1aed1f2a1', ariaLabel: this.notificationCount > 0
-                ? `Notifications (${this.notificationCount} new)`
-                : "Notifications", hierarchy: "tertiary", iconName: "notifications", onClick: this.handleNotificationClick, size: "sm" }), this.notificationCount > 0 && (h("bh-badge-dot", { key: 'deb97ba1ab11753c4e6fbaf2225f897c584c9ef2', class: "icon-badge-dot", color: "error", outline: true, size: "sm" }))), h("div", { key: 'a05fa745aef53894339be58098729d3c82228314', "aria-atomic": "true", "aria-live": "polite", class: "sr-only", part: "notification-live-region" }, this.notificationCount > 0
-            ? `${this.notificationCount} new notification${this.notificationCount === 1 ? "" : "s"}`
-            : "No new notifications")))));
+                : resolveI18n("bh-appbar", "openMenuAriaLabel", this.openMenuAriaLabel, "Open menu"), hierarchy: "tertiary", iconName: this.isMenuOpen ? "left_panel_close" : "left_panel_open", onClick: this.handleMenuToggle, size: "sm" }), this.logoSrc && (h("div", { key: 'a7128b21be6c890bdff308af74b3c9f5b34d1ac3', class: "logo" }, h("img", { key: '5553c2777fe290ae08c24b34df5833451da95dd1', alt: resolveI18n("bh-appbar", "logoAlt", this.logoAlt, "Solstice"), class: "logo-image", src: this.logoSrc }))), h("slot", { key: '0d5e2b11736ccbe69ccafc1db6cb0db608b00d98', name: "property-switcher" }), h("slot", { key: '035ec16e4dd285cd415b2018048b983178daf104', name: "breadcrumb" }, h("bh-breadcrumbs", { key: '2544b67f1cc428a097ee9bfbcf98d2bdc1135048', items: this.breadcrumbItems, onBhItemClick: (e) => this.handleBreadcrumbClick(e.detail), showHome: this.showBreadcrumbHome }))), h("div", { key: '13f1b1304a2779d82e1913149400ac6910261c39', class: "right-section", part: "right-section" }, h("slot", { key: 'bcd44a315dbf486913727354368bf5896321bab3', name: "actions" }), this.showCalendar && (h("slot", { key: 'd81f877985b0a33b9b0c60f62c9e868b27f48bde', name: "calendar-action" }, h("div", { key: '97fbe4205b82f386458ee0fd6bca33df706e4041', class: "icon-button-wrapper" }, h("bh-button-icon", { key: '20ebeb4cc3dab4830cb09887fe6822279eae906b', ariaLabel: "Calendar", hierarchy: "tertiary", iconName: "calendar_today", onClick: this.handleCalendarClick, size: "sm" }), h("bh-badge-dot", { key: '444fe1c20f8686c9150e749e580ef5ef947924d1', class: "icon-badge-dot", color: "success", outline: true, size: "sm" })))), this.showSettings && (h("slot", { key: '06cacd66349b11b634b6b50a6f234cd3981ce205', name: "settings-action" }, h("div", { key: '31fcabb84e93e329fbd336fa5b29e29d1fa215d8', class: "icon-button-wrapper" }, h("bh-button-icon", { key: '469baf5832cfb5ec12843e02900f527f251009ea', ariaLabel: "Settings", hierarchy: "tertiary", iconName: "settings", onClick: this.handleSettingsClick, size: "sm" }), h("bh-badge-dot", { key: 'df04da757acdf33d55c002034e12305e3a5a23e3', class: "icon-badge-dot", color: "blue", outline: true, size: "sm" })))), this.showNotifications && this.notifications !== undefined && (h("slot", { key: '1661133fd56ca74fdf2b4ae59d0f6e34da93633e', name: "notifications-action" }, h("bh-notification-center", { key: '8159626a0ed74847d263ec66e5257ffc7d39c485', notifications: this.notifications }))), this.showNotifications && this.notifications === undefined && (h("slot", { key: '67a6e116a630d36bec72585c157291f4b80a3359', name: "notifications-action" }, h("div", { key: 'b67fe03724f8325b891fcc057a6d68107cbef300', class: "icon-button-wrapper" }, h("bh-button-icon", { key: '271b3fe7ce69a0b94228428521b2f5f52f33a443', ariaLabel: this.notificationCount > 0
+                ? `${resolveI18n("bh-appbar", "notificationsAriaLabel", this.notificationsAriaLabel, "Notifications")} (${this.notificationCount})`
+                : resolveI18n("bh-appbar", "notificationsAriaLabel", this.notificationsAriaLabel, "Notifications"), hierarchy: "tertiary", iconName: "notifications", onClick: this.handleNotificationClick, size: "sm" }), this.notificationCount > 0 &&
+            (this.notificationBadge === "count" ? (h("bh-badge", { class: "icon-badge-count", emphasis: "high", label: String(this.notificationCount), size: "sm", variant: "error" })) : (h("bh-badge-dot", { class: "icon-badge-dot", color: "error", outline: true, size: "sm" })))))), this.notifications === undefined && (h("div", { key: '3cb9d0a8bd66dddb418daa407a524e741fe79ba0', "aria-atomic": "true", "aria-live": "polite", class: "sr-only", part: "notification-live-region" }, this.notificationAnnouncement()))))));
     }
 };
 BhAppbar.style = bhAppbarCss();

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

@@ -1,8 +1,9 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-CTHvNfIu.js';
-import { c as createComponentLogger, r as reportComponentError } from './error-boundary-YLeLKAYJ.js';
+import { c as createComponentLogger } from './logger-CMKOFHIa.js';
 import { c as createDestroySubjectSync, a as completeSubject } from './lifecycle-CS8F5LFw.js';
 import { g as generateUniqueId } from './id-generator-CLrVoF3x.js';
 import { m as metrics, M as MetricNames } from './metrics-CSH9RXgl.js';
+import { r as reportComponentError } from './error-boundary-afpK3NgJ.js';
 import { t as timer$Sync } from './timers-Bf0qW3wI.js';
 import { B as BellhopI18n, r as resolveI18n } from './i18n-BNVOtH-1.js';
 import { A as ANIMATION_DURATIONS } from './constants-BoVgy_Ao.js';

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

@@ -1,8 +1,9 @@
 import { r as registerInstance, c as createEvent, h } from './index-CTHvNfIu.js';
-import { c as createComponentLogger, r as reportComponentError } from './error-boundary-YLeLKAYJ.js';
+import { c as createComponentLogger } from './logger-CMKOFHIa.js';
 import { c as createFocusStateManager, g as getFocusStateClasses } from './focus-state-manager-YdVz1TeW.js';
 import { B as BellhopI18n, r as resolveI18n } from './i18n-BNVOtH-1.js';
 import { m as metrics, M as MetricNames } from './metrics-CSH9RXgl.js';
+import { r as reportComponentError } from './error-boundary-afpK3NgJ.js';
 import { a as isActionKey } from './keyboard-helpers-Dg0_t7Yy.js';
 import './keyboard-constants-zdFuIabL.js';
 
@@ -95,7 +96,7 @@ const BhAvatarAdd = class {
         };
         const resolvedTooltip = resolveI18n("bh-avatar-add", "tooltipText", this.tooltipText, "Add user");
         const shouldShowTooltip = this.showTooltip && this.focusState.isHovered && !this.disabled;
-        return (h("div", { key: 'd69aef7bc97ff66876380844622d519a517fbb92', "aria-disabled": this.disabled ? "true" : undefined, class: "avatar-add-container", "data-focus-visible": this.focusState.isKeyboardFocused ? "true" : "false", "data-focused": String(this.focusState.isFocused), "data-hovered": String(this.focusState.isHovered), part: "container" }, h("button", { key: 'f1ee4a9bd34c0f74ab11ea54cc85d3a2ffa39808', "aria-label": resolvedTooltip, class: buttonClasses, disabled: this.disabled, onBlur: this.handleBlur, onClick: this.handleClick, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, part: "button", type: "button" }, h("span", { key: 'e16ef8889be348c6130b7cefed0dcc64e9364b82', class: "avatar-add-content", part: "content" }, h("span", { key: '01f740fcc500c05b3dcc0828da9c08f03e644eaa', class: "material-symbols-outlined avatar-add-icon", part: "icon" }, "add"))), this.showTooltip && (h("bh-tooltip", { key: '2d0f6dbd518ce4041f586bbcf78659b8cf18357c', placement: "bottom", text: resolvedTooltip, visible: shouldShowTooltip }))));
+        return (h("div", { key: 'bce336b3645e8d130a24430571bbfee554d33323', "aria-disabled": this.disabled ? "true" : undefined, class: "avatar-add-container", "data-focus-visible": this.focusState.isKeyboardFocused ? "true" : "false", "data-focused": String(this.focusState.isFocused), "data-hovered": String(this.focusState.isHovered), part: "container" }, h("button", { key: '76829e70788fe42c5b7f73b3654c36178b20c12e', "aria-label": resolvedTooltip, class: buttonClasses, disabled: this.disabled, onBlur: this.handleBlur, onClick: this.handleClick, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, part: "button", type: "button" }, h("span", { key: 'e28793543a5908553024a4a828829adbe8a9737c', class: "avatar-add-content", part: "content" }, h("span", { key: '959ac30b33d0e34c447bf03d66a66036e3fb0e99', class: "material-symbols-outlined avatar-add-icon", part: "icon" }, "add"))), this.showTooltip && (h("bh-tooltip", { key: 'd9a5c6a07456c45646c9383dc802c66fcec5cf82', placement: "bottom", text: resolvedTooltip, visible: shouldShowTooltip }))));
     }
 };
 BhAvatarAdd.style = bhAvatarAddCss();

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

@@ -1,8 +1,9 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-CTHvNfIu.js';
 import { v as validateJSON } from './validators-R-A72b5e.js';
-import { c as createComponentLogger, r as reportComponentError } from './error-boundary-YLeLKAYJ.js';
+import { c as createComponentLogger } from './logger-CMKOFHIa.js';
 import { B as BellhopI18n, r as resolveI18n } from './i18n-BNVOtH-1.js';
 import { m as metrics, M as MetricNames } from './metrics-CSH9RXgl.js';
+import { r as reportComponentError } from './error-boundary-afpK3NgJ.js';
 
 const bhAvatarStackedCss = () => `@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}@layer bh-tokens,bh-base,bh-variants,bh-states,bh-utilities; @layer bh-tokens{:host{display:inline-block;font-family:var(--font-inter, "Inter", -apple-system, BlinkMacSystemFont, sans-serif);--bh-avatar-stacked-border-color:var(--color-bg-primary)}}@layer bh-base{.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(--bh-avatar-stacked-border-color);border-radius:50%}}`;
 
@@ -128,7 +129,7 @@ const BhAvatarStacked = class {
         const getStackedOffsetStyle = (hasItems) => ({
             marginLeft: hasItems ? `-${offset}px` : "0",
         });
-        return (h(Host, { key: '08bb9a49ab66e5b68e47bf6688f0439cca23e190' }, h("div", { key: 'f3acd48e5418056948837dc1c880ff165bacae58', class: `avatar-stacked avatar-stacked-${this.size}`, part: "container" }, visibleAvatars.map((avatar, index) => (h("div", { class: "avatar-item", key: `avatar-${index}`, onMouseEnter: () => this.handleAvatarMouseEnter(index), onMouseLeave: this.handleAvatarMouseLeave, style: getOffsetStyle(index) }, h("bh-avatar", { alt: avatar.text || "Avatar", imageSrc: avatar.imageSrc, size: this.size, text: avatar.text || "?", variant: this.mapAvatarType(avatar.type) }), avatar.tooltipText && (h("bh-tooltip", { placement: "bottom", text: avatar.tooltipText, visible: this.hoveredIndex === index }))))), showCountAvatar && (h("div", { key: 'b6874f94c2a0da629234a0a71bd0c4b71ee8f76b', class: "avatar-item", style: getStackedOffsetStyle(hasVisibleAvatars) }, h("bh-avatar", { key: 'd543dc9697c69532ad992ed088f4f88831df914d', alt: `${remainingCount} more`, size: this.size, text: `+${remainingCount}`, variant: "text" }))), this.showAddButton && (h("div", { key: '2d10dba155c5d0264117c72a2f367fd8a28f53e1', class: "avatar-item", onMouseEnter: this.handleAddButtonMouseEnter, onMouseLeave: this.handleAddButtonMouseLeave, style: getStackedOffsetStyle(hasVisibleAvatars || showCountAvatar) }, h("bh-avatar-add", { key: '8171ba9affdb7e145cd710989b9e02dc8a832cb4', showTooltip: true, size: this.size, tooltipText: resolveI18n("bh-avatar-stacked", "addTooltipText", this.addTooltipText, "Add member") }))))));
+        return (h(Host, { key: '362579a44a7aca27baf18bc48f0a74356f518a53' }, h("div", { key: 'e71ce5bcb57961c1662b6d4c6fd6422ac0d4fa92', class: `avatar-stacked avatar-stacked-${this.size}`, part: "container" }, visibleAvatars.map((avatar, index) => (h("div", { class: "avatar-item", key: `avatar-${index}`, onMouseEnter: () => this.handleAvatarMouseEnter(index), onMouseLeave: this.handleAvatarMouseLeave, style: getOffsetStyle(index) }, h("bh-avatar", { alt: avatar.text || "Avatar", imageSrc: avatar.imageSrc, size: this.size, text: avatar.text || "?", variant: this.mapAvatarType(avatar.type) }), avatar.tooltipText && (h("bh-tooltip", { placement: "bottom", text: avatar.tooltipText, visible: this.hoveredIndex === index }))))), showCountAvatar && (h("div", { key: 'd5d1fea3392c84fa8eba0ef87db9e1da3221ad73', class: "avatar-item", style: getStackedOffsetStyle(hasVisibleAvatars) }, h("bh-avatar", { key: '7df4ff15b80d56e56d504b9c4062d68e83dd1ab3', alt: `${remainingCount} more`, size: this.size, text: `+${remainingCount}`, variant: "text" }))), this.showAddButton && (h("div", { key: '31e64a100a3ff8d86ceda5c3f884033d72d79495', class: "avatar-item", onMouseEnter: this.handleAddButtonMouseEnter, onMouseLeave: this.handleAddButtonMouseLeave, style: getStackedOffsetStyle(hasVisibleAvatars || showCountAvatar) }, h("bh-avatar-add", { key: 'd01d98af39f2f648b10d8f7b61337d325ac9d976', showTooltip: true, size: this.size, tooltipText: resolveI18n("bh-avatar-stacked", "addTooltipText", this.addTooltipText, "Add member") }))))));
     }
 };
 BhAvatarStacked.style = bhAvatarStackedCss();

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

@@ -1,13 +1,14 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-CTHvNfIu.js';
-import { c as createComponentLogger, r as reportComponentError } from './error-boundary-YLeLKAYJ.js';
+import { c as createComponentLogger } from './logger-CMKOFHIa.js';
 import { c as createFocusStateManager, g as getFocusStateClasses } from './focus-state-manager-YdVz1TeW.js';
 import { B as BellhopI18n, r as resolveI18n } from './i18n-BNVOtH-1.js';
 import { m as metrics, M as MetricNames } from './metrics-CSH9RXgl.js';
+import { r as reportComponentError } from './error-boundary-afpK3NgJ.js';
 import { a as isActionKey } from './keyboard-helpers-Dg0_t7Yy.js';
 import { m as mergeClasses, b as buildComponentClasses } from './class-builder-Bam7V_bL.js';
 import './keyboard-constants-zdFuIabL.js';
 
-const bhAvatarCss = () => `@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}@layer bh-tokens,bh-base,bh-variants,bh-states,bh-utilities; @layer bh-tokens{:host{display:inline-block;--bh-avatar-bg:var(--color-bg-secondary);--bh-avatar-border-color:var(--color-border-primary);--bh-avatar-text-color:var(--color-text-secondary);--bh-avatar-placeholder-color:var(--color-text-disabled);--bh-avatar-status-online-color:var(--color-text-success);--bh-avatar-status-offline-color:var(--color-text-disabled);--bh-avatar-status-border-color:var(--color-bg-primary)}}@layer bh-base{.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--bh-avatar-bg);flex-shrink:0}.avatar-border{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;pointer-events:none}.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(--bh-avatar-placeholder-color);line-height:1;display:flex;align-items:center;justify-content:center}.avatar-text{color:var(--bh-avatar-text-color);font-family:var(--font-inter);font-weight:var(--weight-semibold);text-align:center;line-height:1}}@layer bh-variants{.avatar-xxs{width:var(--bh-avatar-size-xxs);height:var(--bh-avatar-size-xxs)}.avatar-xs{width:var(--bh-avatar-size-xs);height:var(--bh-avatar-size-xs)}.avatar-sm{width:var(--bh-avatar-size-sm);height:var(--bh-avatar-size-sm)}.avatar-md{width:var(--bh-avatar-size-md);height:var(--bh-avatar-size-md)}.avatar-lg{width:var(--bh-avatar-size-lg);height:var(--bh-avatar-size-lg)}.avatar-xl{width:var(--bh-avatar-size-xl);height:var(--bh-avatar-size-xl)}.avatar-2xl{width:var(--bh-avatar-size-2xl);height:var(--bh-avatar-size-2xl)}.avatar-xs .avatar-border,.avatar-sm .avatar-border{border:0.5px solid var(--bh-avatar-border-color)}.avatar-md .avatar-border,.avatar-lg .avatar-border,.avatar-xl .avatar-border,.avatar-2xl .avatar-border{border:0.75px solid var(--bh-avatar-border-color)}.text-xxs{font-size:var(--bh-avatar-text-xxs);line-height:1.6em}.text-xs{font-size:var(--bh-avatar-text-xs);line-height:1.5em}.text-sm{font-size:var(--text-sm-size);line-height:var(--line-height-normal)}.text-md{font-size:var(--text-md-size);line-height:var(--line-height-normal)}.text-lg{font-size:var(--bh-avatar-text-lg);line-height:1.56em}.text-xl{font-size:var(--bh-avatar-text-xl);line-height:1.5em}.text-2xl{font-size:var(--bh-avatar-text-2xl);line-height:1.33em}.icon-sm{font-size:var(--icon-size-sm)}.icon-md{font-size:var(--icon-size-md)}.icon-lg{font-size:var(--icon-size-lg)}.icon-xl{font-size:var(--icon-size-xl)}.icon-2xl{font-size:var(--icon-size-2xl)}.icon-3xl{font-size:var(--icon-size-3xl)}.icon-4xl{font-size:var(--icon-size-4xl)}}@layer bh-states{.avatar-interactive{cursor:pointer;transition:box-shadow var(--animation-duration-normal) ease, transform 0.1s ease}.avatar-interactive:focus{outline:none}.avatar-interactive:focus-visible{box-shadow:0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-border-interactive)}.avatar-focused{box-shadow:0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-border-interactive)}.avatar-interactive.avatar-hovered:not(.avatar-disabled){transform:scale(1.05)}.avatar-disabled{cursor:not-allowed;opacity:0.5}.avatar-status{position:absolute;border-radius:50%;background-color:var(--bh-avatar-status-online-color);border:1.5px solid var(--bh-avatar-status-border-color);z-index:2}.avatar-status-online{background-color:var(--bh-avatar-status-online-color)}.avatar-status-offline{background-color:var(--bh-avatar-status-offline-color)}.avatar-status-xxs{width:var(--bh-avatar-status-size-xxs);height:var(--bh-avatar-status-size-xxs);bottom:0;right:0}.avatar-status-xs{width:var(--bh-avatar-status-size-xs);height:var(--bh-avatar-status-size-xs);bottom:0;right:0}.avatar-status-sm{width:var(--bh-avatar-status-size-sm);height:var(--bh-avatar-status-size-sm);bottom:0;right:0}.avatar-status-md{width:var(--bh-avatar-status-size-md);height:var(--bh-avatar-status-size-md);bottom:0;right:0}.avatar-status-lg{width:var(--bh-avatar-status-size-lg);height:var(--bh-avatar-status-size-lg);bottom:0;right:0}.avatar-status-xl{width:var(--bh-avatar-status-size-xl);height:var(--bh-avatar-status-size-xl);bottom:0;right:0}.avatar-status-2xl{width:var(--bh-avatar-status-size-2xl);height:var(--bh-avatar-status-size-2xl);bottom:0;right:0}}`;
+const bhAvatarCss = () => `@charset "UTF-8";@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}@layer bh-tokens,bh-base,bh-variants,bh-states,bh-utilities; @layer bh-tokens{:host{display:inline-block;--bh-avatar-bg:var(--color-bg-secondary);--bh-avatar-border-color:var(--color-border-primary);--bh-avatar-text-color:var(--color-text-secondary);--bh-avatar-placeholder-color:var(--color-text-disabled);--bh-avatar-status-online-color:var(--color-text-success);--bh-avatar-status-offline-color:var(--color-text-disabled);--bh-avatar-status-border-color:var(--color-bg-primary)}}@layer bh-base{.avatar{position:relative;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--bh-avatar-bg);flex-shrink:0}.avatar-border{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;pointer-events:none}.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(--bh-avatar-placeholder-color);line-height:1;display:flex;align-items:center;justify-content:center}.avatar-text{color:var(--bh-avatar-text-color);font-family:var(--font-inter);font-weight:var(--weight-semibold);text-align:center;line-height:1}}@layer bh-variants{.avatar-xxs{width:var(--bh-avatar-size-xxs);height:var(--bh-avatar-size-xxs)}.avatar-xs{width:var(--bh-avatar-size-xs);height:var(--bh-avatar-size-xs)}.avatar-sm{width:var(--bh-avatar-size-sm);height:var(--bh-avatar-size-sm)}.avatar-md{width:var(--bh-avatar-size-md);height:var(--bh-avatar-size-md)}.avatar-lg{width:var(--bh-avatar-size-lg);height:var(--bh-avatar-size-lg)}.avatar-xl{width:var(--bh-avatar-size-xl);height:var(--bh-avatar-size-xl)}.avatar-2xl{width:var(--bh-avatar-size-2xl);height:var(--bh-avatar-size-2xl)}.avatar-xs .avatar-border,.avatar-sm .avatar-border{border:0.5px solid var(--bh-avatar-border-color)}.avatar-md .avatar-border,.avatar-lg .avatar-border,.avatar-xl .avatar-border,.avatar-2xl .avatar-border{border:0.75px solid var(--bh-avatar-border-color)}.text-xxs{font-size:var(--bh-avatar-text-xxs);line-height:1.6em}.text-xs{font-size:var(--bh-avatar-text-xs);line-height:1.5em}.text-sm{font-size:var(--text-sm-size);line-height:var(--line-height-normal)}.text-md{font-size:var(--text-md-size);line-height:var(--line-height-normal)}.text-lg{font-size:var(--bh-avatar-text-lg);line-height:1.56em}.text-xl{font-size:var(--bh-avatar-text-xl);line-height:1.5em}.text-2xl{font-size:var(--bh-avatar-text-2xl);line-height:1.33em}.icon-sm{font-size:var(--icon-size-sm)}.icon-md{font-size:var(--icon-size-md)}.icon-lg{font-size:var(--icon-size-lg)}.icon-xl{font-size:var(--icon-size-xl)}.icon-2xl{font-size:var(--icon-size-2xl)}.icon-3xl{font-size:var(--icon-size-3xl)}.icon-4xl{font-size:var(--icon-size-4xl)}}@layer bh-states{.avatar-interactive{cursor:pointer;transition:box-shadow var(--animation-duration-normal) ease, transform 0.1s ease}.avatar-interactive:focus{outline:none}.avatar-interactive:focus-visible{box-shadow:0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-border-interactive)}.avatar-focused{box-shadow:0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-border-interactive)}.avatar-interactive.avatar-hovered:not(.avatar-disabled){transform:scale(1.05)}.avatar-disabled{cursor:not-allowed;opacity:0.5}.avatar-status{position:absolute;border-radius:50%;background-color:var(--bh-avatar-status-online-color);border:1.5px solid var(--bh-avatar-status-border-color);z-index:2}.avatar-status-online{background-color:var(--bh-avatar-status-online-color)}.avatar-status-offline{background-color:var(--bh-avatar-status-offline-color)}.avatar-status-xxs{width:var(--bh-avatar-status-size-xxs);height:var(--bh-avatar-status-size-xxs);bottom:0;right:0}.avatar-status-xs{width:var(--bh-avatar-status-size-xs);height:var(--bh-avatar-status-size-xs);bottom:0;right:0}.avatar-status-sm{width:var(--bh-avatar-status-size-sm);height:var(--bh-avatar-status-size-sm);bottom:0;right:0}.avatar-status-md{width:var(--bh-avatar-status-size-md);height:var(--bh-avatar-status-size-md);bottom:0;right:0}.avatar-status-lg{width:var(--bh-avatar-status-size-lg);height:var(--bh-avatar-status-size-lg);bottom:0;right:0}.avatar-status-xl{width:var(--bh-avatar-status-size-xl);height:var(--bh-avatar-status-size-xl);bottom:0;right:0}.avatar-status-2xl{width:var(--bh-avatar-status-size-2xl);height:var(--bh-avatar-status-size-2xl);bottom:0;right:0}}`;
 
 /** Maps avatar size to text CSS class */
 const TEXT_SIZE_MAP = new Map([
@@ -169,9 +170,9 @@ const BhAvatar = class {
                 offline: this.status === "offline",
             },
         });
-        return (h(Host, { key: 'd2236acc392bf414f5ae7223dcb3c763f40ac500' }, h("div", { key: '811e3ac5bd62a9ddf8aa0e3859e574af641f088c', "aria-disabled": this.interactive && this.disabled ? "true" : undefined, "aria-expanded": this.interactive && this.hasPopup
+        return (h(Host, { key: 'bce13fcc8525b9f59594fb42bee6f558e3136c6e' }, h("div", { key: '8ef438c16d8d4ad9eb891520c3eb9d789ef12292', "aria-disabled": this.interactive && this.disabled ? "true" : undefined, "aria-expanded": this.interactive && this.hasPopup
                 ? String(this.expanded)
-                : undefined, "aria-haspopup": this.interactive && this.hasPopup ? "true" : undefined, "aria-label": resolvedAlt, class: avatarClasses, "data-focus-visible": this.focusState.isKeyboardFocused ? "true" : "false", "data-focused": String(this.focusState.isFocused), "data-hovered": String(this.focusState.isHovered), onBlur: this.handleBlur, onClick: this.handleClick, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, part: "avatar", role: this.interactive ? "button" : "img", tabIndex: this.interactive && !this.disabled ? 0 : undefined }, h("div", { key: 'c22735a49156598682bdde66fd65eccfb781c4d9', class: "avatar-border", part: "border" }), h("div", { key: 'e118a4f512f3972eedda87d3dffe0140523a8e31', class: "avatar-content", part: "content" }, this.variant === "image" && (h("img", { key: '8dd1cf65cd859f1d82c1e7a3197c7d5f98833586', alt: resolvedAlt, class: "avatar-image", part: "image", src: this.imageSrc })), this.variant === "placeholder" && (h("span", { key: 'dbabf72e3e8c8b2e10a12a6ba9a2e45591aa2512', class: `material-symbols-outlined avatar-placeholder-icon ${this.getIconSizeClass()}`, part: "placeholder-icon" }, "person")), this.variant === "text" && (h("span", { key: '213d4f99c92e13a06fe7862b3c2dc5124b59c459', class: `avatar-text ${this.getTextSizeClass()}`, part: "text" }, this.text))), hasStatus && h("div", { key: '8d3855ba4719a11e078b758f9d1c64a268381fb2', class: statusClasses, part: "status" }))));
+                : undefined, "aria-haspopup": this.interactive && this.hasPopup ? "true" : undefined, "aria-label": resolvedAlt, class: avatarClasses, "data-focus-visible": this.focusState.isKeyboardFocused ? "true" : "false", "data-focused": String(this.focusState.isFocused), "data-hovered": String(this.focusState.isHovered), onBlur: this.handleBlur, onClick: this.handleClick, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, part: "avatar", role: this.interactive ? "button" : "img", tabIndex: this.interactive && !this.disabled ? 0 : undefined }, h("div", { key: '4728b822f9a8cefa8472bbc9b783437790a48500', class: "avatar-border", part: "border" }), h("div", { key: '397d4e222f3a3926c074b12a13c865b33ce69390', class: "avatar-content", part: "content" }, this.variant === "image" && (h("img", { key: '74da499c751fc5d80aba3f0c1a9f00153e57456e', alt: resolvedAlt, class: "avatar-image", part: "image", src: this.imageSrc })), this.variant === "placeholder" && (h("span", { key: 'debf868bb69baa20abf28304038422c22c5730e4', class: `material-symbols-outlined avatar-placeholder-icon ${this.getIconSizeClass()}`, part: "placeholder-icon" }, "person")), this.variant === "text" && (h("span", { key: '6380c21f54fba6c8c87ed240c4e30f8720a7c2a3', class: `avatar-text ${this.getTextSizeClass()}`, part: "text" }, this.text))), hasStatus && h("div", { key: '47767ec350de25983eecac327195a365a2ad57ff', class: statusClasses, part: "status" }))));
     }
 };
 BhAvatar.style = bhAvatarCss();

package/dist/esm/bh-badge-dot_2.entry.js

@@ -1,11 +1,12 @@
 import { r as registerInstance, h, H as Host, c as createEvent } from './index-CTHvNfIu.js';
-import { c as createComponentLogger, r as reportComponentError } from './error-boundary-YLeLKAYJ.js';
+import { c as createComponentLogger } from './logger-CMKOFHIa.js';
 import { m as metrics, M as MetricNames } from './metrics-CSH9RXgl.js';
+import { r as reportComponentError } from './error-boundary-afpK3NgJ.js';
+import { m as mergeClasses, b as buildComponentClasses } from './class-builder-Bam7V_bL.js';
 import { c as createDestroySubjectSync, a as completeSubject } from './lifecycle-CS8F5LFw.js';
 import { c as createFocusStateManager, g as getFocusStateClasses } from './focus-state-manager-YdVz1TeW.js';
 import { t as timer$Sync } from './timers-Bf0qW3wI.js';
 import { a as isActionKey } from './keyboard-helpers-Dg0_t7Yy.js';
-import { m as mergeClasses, b as buildComponentClasses } from './class-builder-Bam7V_bL.js';
 import { A as ANIMATION_DURATIONS } from './constants-BoVgy_Ao.js';
 import './keyboard-constants-zdFuIabL.js';
 
@@ -43,7 +44,7 @@ const BhBadgeDot = class {
             [`badge-dot-${this.color}`]: true,
             "badge-dot-outline": this.outline,
         };
-        return (h(Host, { key: 'bc580fcf315d744555e9317fe23f8c989c2aaa56' }, h("div", { key: '54a6330eb4ea0482613b2caac1356912f807809e', "aria-hidden": "true", class: dotClasses, part: "dot", role: "presentation" })));
+        return (h(Host, { key: '358a84d2c1db399a89eac842afeb9de7f410a054' }, h("div", { key: '07df236d30ee7e4ec222e8c009856a83147fe798', "aria-hidden": "true", class: dotClasses, part: "dot", role: "presentation" })));
     }
 };
 BhBadgeDot.style = bhBadgeDotCss();
@@ -205,10 +206,10 @@ const BhTag = class {
             width: CHECKBOX_SIZE_MAP[this.size],
             height: CHECKBOX_SIZE_MAP[this.size],
         };
-        return (h(Host, { key: 'df4a7ab29214ab50ec40e02ab6df4302127009e7' }, h("span", { key: '436ef379eb539126982c8392eba0ecbc82e8ab81', "aria-disabled": this.disabled ? "true" : undefined, class: classes, "data-focus-visible": this.focusState.isKeyboardFocused ? "true" : "false", "data-focused": String(this.focusState.isFocused), "data-hovered": String(this.focusState.isHovered), onBlur: this.handleBlur, onClick: this.handleClick, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, part: "tag", role: "status", tabIndex: isInteractive && !this.disabled ? 0 : -1 }, h("div", { key: 'a4c5012432a32add852301b4bfea39dfdfa20e88', class: "tag-content" }, this.isCheckboxMode && (h("div", { key: 'a092b921845d4d729d3d36d52ec384de586ea6db', "aria-hidden": "true", class: {
+        return (h(Host, { key: '4d29753431e9e6e060207d62eee48abed885cda9' }, h("span", { key: 'a5b87c658722d637947af883ce2305c906f53dbd', "aria-disabled": this.disabled ? "true" : undefined, class: classes, "data-focus-visible": this.focusState.isKeyboardFocused ? "true" : "false", "data-focused": String(this.focusState.isFocused), "data-hovered": String(this.focusState.isHovered), onBlur: this.handleBlur, onClick: this.handleClick, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, part: "tag", role: "status", tabIndex: isInteractive && !this.disabled ? 0 : -1 }, h("div", { key: 'cc80dd525464a72f1114d68e8172004251503bf3', class: "tag-content" }, this.isCheckboxMode && (h("div", { key: '290ad9389b202f4e21c37c1447c685ace4382af4', "aria-hidden": "true", class: {
                 "tag-checkbox": true,
                 "tag-checkbox-checked": this.checked === true,
-            }, style: checkboxStyle }, this.checked && (h("span", { key: 'c02ea2f5a54bc8a86ebd1551440379c73d50655b', class: "material-symbols-outlined tag-checkbox-icon" }, "check")))), this.variant === "dot" && (h("bh-badge-dot", { key: 'd70af3e4653edc3aecb587c97eed3a49ff84a81b', color: this.dotColor, size: DOT_SIZE_MAP[this.size] })), this.variant === "avatar" && (h("bh-avatar", { key: '88ee6b6693dbcd0c5d7174e388fe7da3d09509de', imageSrc: this.avatarSrc, size: "xxs", variant: this.avatarSrc ? "image" : "placeholder" })), h("span", { key: '0d1bbe969070fdfea8e52b5de1b83c4dfe5ca341', class: "tag-label-wrapper" }, h("span", { key: '33d3caefb72244c4817b5655ec2603e577142675', class: "tag-label", part: "label", style: labelStyle }, this.label))), this.showCount && (h("span", { key: '3eb4ea7b8d79d2e327822c6269097e98f40d4002', class: "tag-count", part: "count" }, this.count)), this.showDismiss && (h("bh-button-icon", { key: '8f19e82016c45c83583a03ae040ccdb5a260b5a7', ariaLabel: `Remove ${this.label}`, class: "tag-dismiss", disabled: this.disabled, hierarchy: "tertiary", iconName: "close", onClick: this.handleDismiss, part: "dismiss-button", size: "xs" })))));
+            }, style: checkboxStyle }, this.checked && (h("span", { key: '2b33240f231f44c0806b3507498a867c99a6a897', class: "material-symbols-outlined tag-checkbox-icon" }, "check")))), this.variant === "dot" && (h("bh-badge-dot", { key: '443267726ac2e0a0985fb2f72b0ca399b4c0ebc0', color: this.dotColor, size: DOT_SIZE_MAP[this.size] })), this.variant === "avatar" && (h("bh-avatar", { key: '984c31beb18196be69cb8c6317958a6e691f48ff', imageSrc: this.avatarSrc, size: "xxs", variant: this.avatarSrc ? "image" : "placeholder" })), h("span", { key: '2f322d1088b3693f5f19cb08e06c8b1c60913b6b', class: "tag-label-wrapper" }, h("span", { key: 'bed69f25fc9ee9a91d01767265f0538bd4b4818a', class: "tag-label", part: "label", style: labelStyle }, this.label))), this.showCount && (h("span", { key: 'b8ae69d629f8985b3fb72fc868187b20aba74116', class: "tag-count", part: "count" }, this.count)), this.showDismiss && (h("bh-button-icon", { key: '1f9309576c7b7f748c0a32a9ba62ecf2be2437ab', ariaLabel: `Remove ${this.label}`, class: "tag-dismiss", disabled: this.disabled, hierarchy: "tertiary", iconName: "close", onClick: this.handleDismiss, part: "dismiss-button", size: "xs" })))));
     }
 };
 BhTag.style = bhTagCss();

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

@@ -1,10 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-CTHvNfIu.js';
-import { m as mergeClasses, b as buildComponentClasses } from './class-builder-Bam7V_bL.js';
-import { c as createComponentLogger, r as reportComponentError } from './error-boundary-YLeLKAYJ.js';
+import { c as createComponentLogger } from './logger-CMKOFHIa.js';
 import { c as createFocusStateManager, g as getFocusStateClasses } from './focus-state-manager-YdVz1TeW.js';
 import { B as BellhopI18n, r as resolveI18n } from './i18n-BNVOtH-1.js';
 import { m as metrics, M as MetricNames } from './metrics-CSH9RXgl.js';
+import { r as reportComponentError } from './error-boundary-afpK3NgJ.js';
 import { a as isActionKey } from './keyboard-helpers-Dg0_t7Yy.js';
+import { m as mergeClasses, b as buildComponentClasses } from './class-builder-Bam7V_bL.js';
 import './keyboard-constants-zdFuIabL.js';
 
 const bhBadgeCss = () => `@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}@layer bh-tokens,bh-base,bh-variants,bh-states,bh-utilities; @layer bh-tokens{:host{display:inline-block;--bh-badge-border-radius:var(--radius-full);--bh-badge-font-family:var(--font-inter);--bh-badge-font-weight:var(--weight-medium);--bh-badge-gap-sm:var(--spacing-sm);--bh-badge-gap-xxs:var(--spacing-xxs);--bh-badge-padding-xs:var(--spacing-xxs);--bh-badge-padding-sm:var(--spacing-sm);--bh-badge-padding-md:var(--spacing-md);--bh-badge-padding-lg:var(--spacing-lg);--bh-badge-padding-xl:var(--spacing-xl);--bh-badge-text-xs:var(--text-xs-size);--bh-badge-text-sm:var(--text-sm-size);--bh-badge-text-md:var(--text-md-size);--bh-badge-line-height-xs:var(--line-height-tight);--bh-badge-line-height-sm:var(--line-height-normal);--bh-badge-line-height-md:var(--line-height-normal)}}@layer bh-base{.badge{display:inline-flex;align-items:center;justify-content:center;gap:var(--bh-badge-gap-sm);font-family:var(--bh-badge-font-family);font-weight:var(--bh-badge-font-weight);border-radius:var(--bh-badge-border-radius);white-space:nowrap;text-align:center;transition:background-color var(--animation-duration-normal) ease, color var(--animation-duration-normal) ease, border-color var(--animation-duration-normal) ease;border:1px solid transparent;user-select:none;cursor:default}.badge-icon-only{aspect-ratio:1;padding:0;justify-content:center;box-sizing:border-box}.badge-icon-only.badge-sm{width:var(--bh-badge-height-sm);height:var(--bh-badge-height-sm);padding:0}.badge-icon-only.badge-md{width:var(--bh-badge-height-md);height:var(--bh-badge-height-md);padding:0}.badge-icon-only.badge-lg{width:var(--bh-badge-height-lg);height:var(--bh-badge-height-lg);padding:0}.badge-icon-only .badge-icon-custom{font-size:var(--bh-badge-icon-custom-size-md) !important;line-height:1}.badge-icon-dot{font-size:var(--bh-badge-dot-sm) !important;width:var(--bh-badge-dot-sm);height:var(--bh-badge-dot-sm);line-height:1;flex-shrink:0;font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 16}.badge-icon-custom{font-size:var(--bh-badge-icon-md) !important;font-variation-settings:"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 16}.badge-label{flex-shrink:0;font-weight:inherit}.badge-dismiss{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;margin-left:var(--bh-badge-gap-xxs);border-radius:var(--radius-full);transition:background-color var(--animation-duration-normal) ease, opacity var(--animation-duration-normal) ease;width:var(--bh-badge-icon-md);height:var(--bh-badge-icon-md)}.badge-dismiss-icon{font-size:var(--bh-badge-icon-sm) !important;width:var(--bh-badge-icon-sm);height:var(--bh-badge-icon-sm);line-height:1;font-variation-settings:"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14}}@layer bh-variants{.badge-sm{height:var(--bh-badge-height-sm);box-sizing:border-box;padding:0 var(--bh-badge-padding-sm);font-size:var(--bh-badge-font-size-sm);line-height:var(--bh-badge-line-height-xs)}.badge-sm .badge-icon-dot{font-size:var(--bh-badge-dot-xs) !important;width:var(--bh-badge-dot-xs);height:var(--bh-badge-dot-xs)}.badge-sm .badge-icon-custom{font-size:var(--bh-badge-icon-xs) !important}.badge-sm .badge-dismiss{width:var(--bh-badge-icon-sm);height:var(--bh-badge-icon-sm)}.badge-sm .badge-dismiss-icon{font-size:var(--bh-badge-icon-xs) !important;width:var(--bh-badge-icon-xs);height:var(--bh-badge-icon-xs)}.badge-md{height:var(--bh-badge-height-md);box-sizing:border-box;padding:0 var(--bh-badge-padding-md);font-size:var(--bh-badge-font-size-md);line-height:var(--bh-badge-line-height-sm)}.badge-lg{height:var(--bh-badge-height-lg);box-sizing:border-box;padding:0 var(--bh-badge-padding-lg);font-size:var(--bh-badge-font-size-md);line-height:var(--bh-badge-line-height-md)}.badge-lg .badge-icon-dot{font-size:var(--bh-badge-dot-md) !important;width:var(--bh-badge-dot-md);height:var(--bh-badge-dot-md)}.badge-lg .badge-icon-custom{font-size:var(--bh-badge-icon-xl) !important}.badge-lg .badge-dismiss{width:var(--bh-badge-icon-lg);height:var(--bh-badge-icon-lg)}.badge-lg .badge-dismiss-icon{font-size:var(--bh-badge-icon-md) !important;width:var(--bh-badge-icon-md);height:var(--bh-badge-icon-md)}.badge-high.badge-gray{background-color:var(--color-neutral-200);color:var(--color-neutral-700)}.badge-high .badge-icon-gray-high,.badge-high .badge-dismiss-icon.badge-icon-gray-high{color:var(--color-neutral-700) !important}.badge-high.badge-brand{background-color:var(--color-brand-200);color:var(--color-brand-800)}.badge-high .badge-icon-brand-high,.badge-high .badge-dismiss-icon.badge-icon-brand-high{color:var(--color-brand-800) !important}.badge-high.badge-blue{background-color:var(--color-blue-200);color:var(--color-blue-900)}.badge-high .badge-icon-blue-high,.badge-high .badge-dismiss-icon.badge-icon-blue-high{color:var(--color-blue-900) !important}.badge-high.badge-error{background-color:var(--color-error-200);color:var(--color-error-900)}.badge-high .badge-icon-error-high,.badge-high .badge-dismiss-icon.badge-icon-error-high{color:var(--color-error-900) !important}.badge-high.badge-warning{background-color:var(--color-warning-200);color:var(--color-warning-900)}.badge-high .badge-icon-warning-high,.badge-high .badge-dismiss-icon.badge-icon-warning-high{color:var(--color-warning-900) !important}.badge-high.badge-success{background-color:var(--color-success-200);color:var(--color-success-900)}.badge-high .badge-icon-success-high,.badge-high .badge-dismiss-icon.badge-icon-success-high{color:var(--color-success-900) !important}.badge-high.badge-purple{background-color:var(--color-purple-200);color:var(--color-purple-800)}.badge-high .badge-icon-purple-high,.badge-high .badge-dismiss-icon.badge-icon-purple-high{color:var(--color-purple-800) !important}.badge-high.badge-pink{background-color:var(--color-pink-200);color:var(--color-pink-800)}.badge-high .badge-icon-pink-high,.badge-high .badge-dismiss-icon.badge-icon-pink-high{color:var(--color-pink-800) !important}.badge-high.badge-orange{background-color:var(--color-orange-200);color:var(--color-orange-800)}.badge-high .badge-icon-orange-high,.badge-high .badge-dismiss-icon.badge-icon-orange-high{color:var(--color-orange-800) !important}.badge-medium.badge-gray{background-color:var(--color-neutral-50);color:var(--color-neutral-700);border-color:var(--color-neutral-200)}.badge-medium .badge-icon-gray-medium,.badge-medium .badge-dismiss-icon.badge-icon-gray-medium{color:var(--color-neutral-700) !important}.badge-medium.badge-brand{background-color:var(--color-brand-50);color:var(--color-brand-700);border-color:var(--color-brand-200)}.badge-medium .badge-icon-brand-medium,.badge-medium .badge-dismiss-icon.badge-icon-brand-medium{color:var(--color-brand-700) !important}.badge-medium.badge-blue{background-color:var(--color-blue-50);color:var(--color-blue-700);border-color:var(--color-blue-200)}.badge-medium .badge-icon-blue-medium,.badge-medium .badge-dismiss-icon.badge-icon-blue-medium{color:var(--color-blue-700) !important}.badge-medium.badge-error{background-color:var(--color-error-50);color:var(--color-error-700);border-color:var(--color-error-200)}.badge-medium .badge-icon-error-medium,.badge-medium .badge-dismiss-icon.badge-icon-error-medium{color:var(--color-error-700) !important}.badge-medium.badge-warning{background-color:var(--color-warning-50);color:var(--color-warning-700);border-color:var(--color-warning-200)}.badge-medium .badge-icon-warning-medium,.badge-medium .badge-dismiss-icon.badge-icon-warning-medium{color:var(--color-warning-700) !important}.badge-medium.badge-success{background-color:var(--color-success-50);color:var(--color-success-700);border-color:var(--color-success-200)}.badge-medium .badge-icon-success-medium,.badge-medium .badge-dismiss-icon.badge-icon-success-medium{color:var(--color-success-700) !important}.badge-medium.badge-purple{background-color:var(--color-purple-50);color:var(--color-purple-700);border-color:var(--color-purple-200)}.badge-medium .badge-icon-purple-medium,.badge-medium .badge-dismiss-icon.badge-icon-purple-medium{color:var(--color-purple-700) !important}.badge-medium.badge-pink{background-color:var(--color-pink-50);color:var(--color-pink-800);border-color:var(--color-pink-200)}.badge-medium .badge-icon-pink-medium,.badge-medium .badge-dismiss-icon.badge-icon-pink-medium{color:var(--color-pink-800) !important}.badge-medium.badge-orange{background-color:var(--color-orange-50);color:var(--color-orange-800);border-color:var(--color-orange-200)}.badge-medium .badge-icon-orange-medium,.badge-medium .badge-dismiss-icon.badge-icon-orange-medium{color:var(--color-orange-800) !important}.badge-low.badge-gray{background-color:transparent;color:var(--color-neutral-600);border-color:var(--color-neutral-200)}.badge-low .badge-icon-gray-low,.badge-low .badge-dismiss-icon.badge-icon-gray-low{color:var(--color-neutral-600) !important}.badge-low.badge-brand{background-color:transparent;color:var(--color-brand-600);border-color:var(--color-brand-200)}.badge-low .badge-icon-brand-low,.badge-low .badge-dismiss-icon.badge-icon-brand-low{color:var(--color-brand-600) !important}.badge-low.badge-blue{background-color:transparent;color:var(--color-blue-700);border-color:var(--color-blue-200)}.badge-low .badge-icon-blue-low,.badge-low .badge-dismiss-icon.badge-icon-blue-low{color:var(--color-blue-700) !important}.badge-low.badge-error{background-color:transparent;color:var(--color-error-600);border-color:var(--color-error-200)}.badge-low .badge-icon-error-low,.badge-low .badge-dismiss-icon.badge-icon-error-low{color:var(--color-error-600) !important}.badge-low.badge-warning{background-color:transparent;color:var(--color-warning-700);border-color:var(--color-warning-200)}.badge-low .badge-icon-warning-low,.badge-low .badge-dismiss-icon.badge-icon-warning-low{color:var(--color-warning-700) !important}.badge-low.badge-success{background-color:transparent;color:var(--color-success-700);border-color:var(--color-success-200)}.badge-low .badge-icon-success-low,.badge-low .badge-dismiss-icon.badge-icon-success-low{color:var(--color-success-700) !important}.badge-low.badge-purple{background-color:transparent;color:var(--color-purple-600);border-color:var(--color-purple-200)}.badge-low .badge-icon-purple-low,.badge-low .badge-dismiss-icon.badge-icon-purple-low{color:var(--color-purple-600) !important}.badge-low.badge-pink{background-color:transparent;color:var(--color-pink-600);border-color:var(--color-pink-200)}.badge-low .badge-icon-pink-low,.badge-low .badge-dismiss-icon.badge-icon-pink-low{color:var(--color-pink-600) !important}.badge-low.badge-orange{background-color:transparent;color:var(--color-orange-700);border-color:var(--color-orange-200)}.badge-low .badge-icon-orange-low,.badge-low .badge-dismiss-icon.badge-icon-orange-low{color:var(--color-orange-700) !important}.badge-disabled{opacity:0.5;cursor:not-allowed}}`;
@@ -131,12 +132,12 @@ const BhBadge = class {
         const iconColorClass = `badge-icon-${activeColor}-${this.emphasis}`;
         const isDot = this.icon === DOT_ICON_NAME;
         const hasIcon = Boolean(this.icon);
-        return (h(Host, { key: '4816465d007d781d018920aad184dafc0822aae9' }, h("span", { key: '1225a9ef5e63b37c1824dcff1d5f3d868ddb943d', "aria-disabled": this.disabled ? "true" : undefined, class: badgeClasses, "data-focus-visible": this.focusState.isKeyboardFocused ? "true" : "false", "data-focused": String(this.focusState.isFocused), "data-hovered": String(this.focusState.isHovered), onBlur: this.handleBlur, onClick: this.handleClick, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, part: "badge", role: "status", tabIndex: this.dismissible && !this.disabled ? 0 : -1 }, hasIcon && (h("span", { key: 'b1a42b78154a97efed271fca43ac23b291d3899e', class: {
+        return (h(Host, { key: '6110746e6cc85b6e623abd53dbeb1b1360485329' }, h("span", { key: '1adae843f5065e81285130644690a76140501004', "aria-disabled": this.disabled ? "true" : undefined, class: badgeClasses, "data-focus-visible": this.focusState.isKeyboardFocused ? "true" : "false", "data-focused": String(this.focusState.isFocused), "data-hovered": String(this.focusState.isHovered), onBlur: this.handleBlur, onClick: this.handleClick, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, part: "badge", role: "status", tabIndex: this.dismissible && !this.disabled ? 0 : -1 }, hasIcon && (h("span", { key: '71f8499d7b4a14d8dcbfe204243deb9ac5079238', class: {
                 "material-symbols-outlined": true,
                 [iconColorClass]: true,
                 "badge-icon-dot": isDot,
                 "badge-icon-custom": !isDot,
-            } }, isDot ? DOT_MATERIAL_SYMBOL : this.icon)), this.label && h("span", { key: '0c78085ea38a7d5b9d17ae0990a741d0ac56bba3', class: "badge-label" }, this.label), this.dismissible && (h("button", { key: '81a243d88637f1ed0d1f44afe75f426efe4fef13', "aria-label": resolveI18n("bh-badge", "dismissAriaLabel", undefined, "Dismiss"), class: "badge-dismiss", disabled: this.disabled, onClick: this.handleDismiss, part: "dismiss-button", type: "button" }, h("span", { key: 'a1772ab6e505a24764f591207ff4a76c93c3fe9c', class: `material-symbols-outlined badge-dismiss-icon ${iconColorClass}` }, "close"))))));
+            } }, isDot ? DOT_MATERIAL_SYMBOL : this.icon)), this.label && h("span", { key: '9a1cc6cf8d657aff65b0f08bc9e4c9a6e515a8dd', class: "badge-label" }, this.label), this.dismissible && (h("button", { key: '4f6d182fa10dc21f862757c43bf3e39cafd5bbe7', "aria-label": resolveI18n("bh-badge", "dismissAriaLabel", undefined, "Dismiss"), class: "badge-dismiss", disabled: this.disabled, onClick: this.handleDismiss, part: "dismiss-button", type: "button" }, h("span", { key: '5065a67791d6190446f4f55a0ab6f29f35bbccbc', class: `material-symbols-outlined badge-dismiss-icon ${iconColorClass}` }, "close"))))));
     }
 };
 BhBadge.style = bhBadgeCss();