@actabldesign/bellhop-core 0.3.0 → 0.3.1

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

@@ -0,0 +1,174 @@
+'use strict';
+
+var index = require('./index-B6sArKsK.js');
+var logger = require('./logger-DZionBgs.js');
+var metrics = require('./metrics-DtkENqew.js');
+var errorBoundary = require('./error-boundary-fNUNT0lE.js');
+var i18n = require('./i18n-Twgo5raQ.js');
+var keyboardHelpers = require('./keyboard-helpers-CiUQBd3w.js');
+require('./keyboard-constants-ByvH1XTM.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) {
+        index.registerInstance(this, hostRef);
+        this.bhClose = index.createEvent(this, "bhClose");
+    }
+    logger = 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.metrics.increment(metrics.MetricNames.COMPONENT_ERROR, {
+            component: COMPONENT_NAME$1,
+            error_type: error instanceof Error ? error.name : "unknown",
+        });
+        errorBoundary.reportComponentError(COMPONENT_NAME$1, error);
+    }
+    componentWillLoad() {
+        this.i18nUnsubscribe = i18n.BellhopI18n.onLocaleChange(() => {
+            this._i18nVersion++;
+        });
+    }
+    disconnectedCallback() {
+        this.i18nUnsubscribe?.();
+    }
+    handleClose = () => {
+        this.bhClose.emit();
+    };
+    renderHeader() {
+        if (!this.showHeader)
+            return null;
+        return (index.h("div", { class: "activity-feed-header", part: "header" }, index.h("div", { class: "activity-feed-header-content" }, this.headerIcon && (index.h("span", { class: "header-icon" }, index.h("bh-featured-icon", { color: "gray", icon: this.headerIcon, "icon-style": "outlined", size: "md" }))), this.heading && (index.h("h2", { class: "activity-feed-heading", part: "heading" }, this.heading)), index.h("slot", { name: "header-actions" })), index.h("bh-close-button", { ariaLabel: i18n.resolveI18n(COMPONENT_NAME$1, "closeAriaLabel", this.closeAriaLabel, "Close"), onClick: this.handleClose })));
+    }
+    render() {
+        const feedStyle = this.maxHeight ? { "max-height": this.maxHeight } : {};
+        return (index.h(index.Host, { key: '0a631e358bb25ec3d4a21d8b6cc2d86c91a0dca4' }, index.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(), index.h("div", { key: '6647af1dce5d657c05bd8dce423842d690426275', "aria-label": this.heading || "Activity feed", class: "activity-feed-list", part: "list", role: "feed", style: feedStyle }, index.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) {
+        index.registerInstance(this, hostRef);
+        this.bhClick = index.createEvent(this, "bhClick");
+    }
+    logger = 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.metrics.increment(metrics.MetricNames.COMPONENT_ERROR, {
+            component: COMPONENT_NAME,
+            error_type: error instanceof Error ? error.name : "unknown",
+        });
+        errorBoundary.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 (keyboardHelpers.isActionKey(event)) {
+            event.preventDefault();
+            this.bhClick.emit();
+        }
+    };
+    render() {
+        const hasSupportingContent = this.supportingContent !== "none";
+        return (index.h(index.Host, { key: 'c236a43e36605b1769858667ff7046ca659dbf8a' }, index.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 && (index.h("div", { class: "feed-item-icon-col", part: "icon-column" }, index.h("bh-featured-icon", { class: "feed-item-icon", color: "brand", icon: this.icon, part: "icon", size: this.size === "sm" ? "sm" : "md" })))) : (index.h("div", { class: {
+                "feed-item-avatar-col": true,
+                "feed-item-avatar-col-connector": this.showConnector,
+            }, part: "avatar-column" }, index.h("div", { class: "feed-item-avatar", part: "avatar" }, index.h("slot", { name: "avatar" }, this.author && (index.h("bh-avatar", { size: this.size === "sm" ? "sm" : "md", text: this.getInitials(), variant: "text" })))), this.showConnector && (index.h("div", { class: "feed-item-connector", part: "connector" })))), index.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" }, index.h("div", { key: 'bc295befb3b4c2d1596499c1e4611c4f7d8eb959', class: "feed-item-header", part: "header" }, index.h("div", { key: '7c2253540cae0b97cb205fe1753c5dbaaa3b5e83', class: "feed-item-meta", part: "meta" }, (this.itemTitle || this.author) && (index.h("span", { key: '16990d09e3e477031180420c53d56fa9093a4397', class: "feed-item-author", part: "author" }, this.itemTitle || this.author)), this.showSubtext && this.timestamp && (index.h("span", { key: '7c31c0e8e80d85c12351ec061d88a0e3a5238296', class: "feed-item-timestamp", part: "timestamp" }, this.timestamp))), index.h("div", { key: '70f12d1eb6c8af4e2a421859e631b7c073d721fd', class: "feed-item-text", part: "text" }, index.h("slot", { key: '064ca607229d49a25477d9166abc6ecd515d8213' }, this.content))), hasSupportingContent && (index.h("div", { key: '8c334fcf61af0f2084b85ea3ab960f3d8740246b', class: `feed-item-supporting feed-item-supporting-${this.supportingContent}`, part: "supporting" }, index.h("slot", { key: 'c2e97890f6b6787c72c522c4c8af4fa88be3715e', name: "supporting" })))), this.showDot && (index.h("div", { key: 'fc40de69cc7312dd15f103f606e0797bfb1de003', class: "feed-item-dot", part: "dot" }, index.h("bh-badge-dot", { key: 'e7a4fde08499915ffee1a2b6145fbcf7176168f1', color: "success", size: this.size }))))));
+    }
+};
+BhFeedItem.style = bhFeedItemCss();
+
+exports.bh_activity_feed = BhActivityFeed;
+exports.bh_feed_item = BhFeedItem;

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

@@ -1,9 +1,10 @@
 'use strict';
 
 var index = require('./index-B6sArKsK.js');
-var errorBoundary = require('./error-boundary-Bf7TcT4U.js');
-var metrics = require('./metrics-DtkENqew.js');
 var i18n = require('./i18n-Twgo5raQ.js');
+var logger = require('./logger-DZionBgs.js');
+var metrics = require('./metrics-DtkENqew.js');
+var errorBoundary = require('./error-boundary-fNUNT0lE.js');
 var keyboardHelpers = require('./keyboard-helpers-CiUQBd3w.js');
 require('./keyboard-constants-ByvH1XTM.js');
 
@@ -49,7 +50,7 @@ const BhAlert = class {
         this.bhAction = index.createEvent(this, "bhAction");
         this.bhClose = index.createEvent(this, "bhClose");
     }
-    logger = errorBoundary.createComponentLogger(COMPONENT_NAME);
+    logger = logger.createComponentLogger(COMPONENT_NAME);
     i18nUnsubscribe;
     _i18nVersion = 0;
     /**

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

@@ -1,11 +1,12 @@
 'use strict';
 
 var index = require('./index-B6sArKsK.js');
-var errorBoundary = require('./error-boundary-Bf7TcT4U.js');
+var logger = require('./logger-DZionBgs.js');
 var i18n = require('./i18n-Twgo5raQ.js');
 var metrics = require('./metrics-DtkENqew.js');
+var errorBoundary = require('./error-boundary-fNUNT0lE.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) {
@@ -14,7 +15,7 @@ const BhAppbar = class {
         this.bhItemClick = index.createEvent(this, "bhItemClick");
         this.bhAction = index.createEvent(this, "bhAction");
     }
-    logger = errorBoundary.createComponentLogger("bh-appbar");
+    logger = logger.createComponentLogger("bh-appbar");
     i18nUnsubscribe;
     _i18nVersion = 0;
     /**
@@ -53,6 +54,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
      */
@@ -90,19 +127,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 i18n.resolveI18n("bh-appbar", "notificationsAnnouncement", this.notificationsAnnouncement, "{{count}} new notifications").replace("{{count}}", String(this.notificationCount));
+        }
+        return i18n.resolveI18n("bh-appbar", "noNotificationsAnnouncement", this.noNotificationsAnnouncement, "No new notifications");
+    }
     render() {
-        return (index.h(index.Host, { key: '129e250eeb5361cf8792338de4440fe6982fcbdc' }, index.h("header", { key: '9ebf5d95d4170a30cb6ec1bfd39e7571b4916e91', class: "appbar", part: "header", role: "banner" }, index.h("div", { key: '72d6ad7a3ee8b00cc1e96cc9a9f7d904258270ef', class: "left-section", part: "left-section" }, index.h("bh-button-icon", { key: '8ba7db5071f2df0726b9f7faa83a3f4c307c0f52', ariaLabel: this.isMenuOpen
+        return (index.h(index.Host, { key: 'fae737fd6bd652262a50fe772c6d747665320bae' }, index.h("header", { key: 'ee050d082b31aacfa3cfac28c41194ba542bbb10', class: "appbar", part: "header", role: "banner" }, index.h("div", { key: 'de0b399c07780c4c3c1a80c3a2e51c5a38139bf9', class: "left-section", part: "left-section" }, index.h("bh-button-icon", { key: 'e69b1989ac771ae1dfb17f608098be3163433593', ariaLabel: this.isMenuOpen
                 ? i18n.resolveI18n("bh-appbar", "closeMenuAriaLabel", this.closeMenuAriaLabel, "Close menu")
-                : i18n.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 && (index.h("div", { key: '83365a303c79b7514715128750294c14144f404d', class: "logo" }, index.h("img", { key: '2e30cd3618df5d61f91e9f892c23b2efe059c908', alt: i18n.resolveI18n("bh-appbar", "logoAlt", this.logoAlt, "Solstice"), class: "logo-image", src: this.logoSrc }))), index.h("slot", { key: 'db5d6f272860d9a45188a107fb4e95b15dc35390', name: "property-switcher" }), index.h("bh-breadcrumbs", { key: 'e559c3f690ff6a029e6015de7ee4fa79bfa0c1b3', items: this.breadcrumbItems, onBhItemClick: (e) => this.handleBreadcrumbClick(e.detail), showHome: this.showBreadcrumbHome })), index.h("div", { key: '9f270400a3b727988ce8d23416c9939416d7d7a5', class: "right-section", part: "right-section" }, index.h("slot", { key: 'df4dec79ef5b1655b4da122c0202558b3531be1e', name: "actions" }), index.h("div", { key: '7e5448f27626c00b9d4981c5d86249c68ff475e8', class: "icon-button-wrapper" }, index.h("bh-button-icon", { key: '0bb109cecbdd1efb81bf996d272e7fc983f9174f', ariaLabel: "Calendar", hierarchy: "tertiary", iconName: "calendar_today", onClick: this.handleCalendarClick, size: "sm" }), index.h("bh-badge-dot", { key: 'cbb6dc7208fa02e58cc557d6634def7632fbb2fb', class: "icon-badge-dot", color: "success", outline: true, size: "sm" })), index.h("div", { key: '8597286d8e35d7798dc24eec41ff561ce5e1ae41', class: "icon-button-wrapper" }, index.h("bh-button-icon", { key: '98284f1621d628733f1045089af4f5a9f99ab5da', ariaLabel: "Settings", hierarchy: "tertiary", iconName: "settings", onClick: this.handleSettingsClick, size: "sm" }), index.h("bh-badge-dot", { key: '628812cf1cf5e3b68d2a838fad9e92a4feb11078', class: "icon-badge-dot", color: "blue", outline: true, size: "sm" })), index.h("div", { key: '47df390313bce50ded59d413ebd4dc4b803cb94d', class: "icon-button-wrapper" }, index.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 && (index.h("bh-badge-dot", { key: 'deb97ba1ab11753c4e6fbaf2225f897c584c9ef2', class: "icon-badge-dot", color: "error", outline: true, size: "sm" }))), index.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")))));
+                : i18n.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 && (index.h("div", { key: 'a7128b21be6c890bdff308af74b3c9f5b34d1ac3', class: "logo" }, index.h("img", { key: '5553c2777fe290ae08c24b34df5833451da95dd1', alt: i18n.resolveI18n("bh-appbar", "logoAlt", this.logoAlt, "Solstice"), class: "logo-image", src: this.logoSrc }))), index.h("slot", { key: '0d5e2b11736ccbe69ccafc1db6cb0db608b00d98', name: "property-switcher" }), index.h("slot", { key: '035ec16e4dd285cd415b2018048b983178daf104', name: "breadcrumb" }, index.h("bh-breadcrumbs", { key: '2544b67f1cc428a097ee9bfbcf98d2bdc1135048', items: this.breadcrumbItems, onBhItemClick: (e) => this.handleBreadcrumbClick(e.detail), showHome: this.showBreadcrumbHome }))), index.h("div", { key: '13f1b1304a2779d82e1913149400ac6910261c39', class: "right-section", part: "right-section" }, index.h("slot", { key: 'bcd44a315dbf486913727354368bf5896321bab3', name: "actions" }), this.showCalendar && (index.h("slot", { key: 'd81f877985b0a33b9b0c60f62c9e868b27f48bde', name: "calendar-action" }, index.h("div", { key: '97fbe4205b82f386458ee0fd6bca33df706e4041', class: "icon-button-wrapper" }, index.h("bh-button-icon", { key: '20ebeb4cc3dab4830cb09887fe6822279eae906b', ariaLabel: "Calendar", hierarchy: "tertiary", iconName: "calendar_today", onClick: this.handleCalendarClick, size: "sm" }), index.h("bh-badge-dot", { key: '444fe1c20f8686c9150e749e580ef5ef947924d1', class: "icon-badge-dot", color: "success", outline: true, size: "sm" })))), this.showSettings && (index.h("slot", { key: '06cacd66349b11b634b6b50a6f234cd3981ce205', name: "settings-action" }, index.h("div", { key: '31fcabb84e93e329fbd336fa5b29e29d1fa215d8', class: "icon-button-wrapper" }, index.h("bh-button-icon", { key: '469baf5832cfb5ec12843e02900f527f251009ea', ariaLabel: "Settings", hierarchy: "tertiary", iconName: "settings", onClick: this.handleSettingsClick, size: "sm" }), index.h("bh-badge-dot", { key: 'df04da757acdf33d55c002034e12305e3a5a23e3', class: "icon-badge-dot", color: "blue", outline: true, size: "sm" })))), this.showNotifications && this.notifications !== undefined && (index.h("slot", { key: '1661133fd56ca74fdf2b4ae59d0f6e34da93633e', name: "notifications-action" }, index.h("bh-notification-center", { key: '8159626a0ed74847d263ec66e5257ffc7d39c485', notifications: this.notifications }))), this.showNotifications && this.notifications === undefined && (index.h("slot", { key: '67a6e116a630d36bec72585c157291f4b80a3359', name: "notifications-action" }, index.h("div", { key: 'b67fe03724f8325b891fcc057a6d68107cbef300', class: "icon-button-wrapper" }, index.h("bh-button-icon", { key: '271b3fe7ce69a0b94228428521b2f5f52f33a443', ariaLabel: this.notificationCount > 0
+                ? `${i18n.resolveI18n("bh-appbar", "notificationsAriaLabel", this.notificationsAriaLabel, "Notifications")} (${this.notificationCount})`
+                : i18n.resolveI18n("bh-appbar", "notificationsAriaLabel", this.notificationsAriaLabel, "Notifications"), hierarchy: "tertiary", iconName: "notifications", onClick: this.handleNotificationClick, size: "sm" }), this.notificationCount > 0 &&
+            (this.notificationBadge === "count" ? (index.h("bh-badge", { class: "icon-badge-count", emphasis: "high", label: String(this.notificationCount), size: "sm", variant: "error" })) : (index.h("bh-badge-dot", { class: "icon-badge-dot", color: "error", outline: true, size: "sm" })))))), this.notifications === undefined && (index.h("div", { key: '3cb9d0a8bd66dddb418daa407a524e741fe79ba0', "aria-atomic": "true", "aria-live": "polite", class: "sr-only", part: "notification-live-region" }, this.notificationAnnouncement()))))));
     }
 };
 BhAppbar.style = bhAppbarCss();

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

@@ -1,10 +1,11 @@
 'use strict';
 
 var index = require('./index-B6sArKsK.js');
-var errorBoundary = require('./error-boundary-Bf7TcT4U.js');
+var logger = require('./logger-DZionBgs.js');
 var lifecycle = require('./lifecycle-CnkLRXH9.js');
 var idGenerator = require('./id-generator-1p5-oe0z.js');
 var metrics = require('./metrics-DtkENqew.js');
+var errorBoundary = require('./error-boundary-fNUNT0lE.js');
 var timers = require('./timers-DP0qMGY7.js');
 var i18n = require('./i18n-Twgo5raQ.js');
 var constants = require('./constants-B93iN3Uz.js');
@@ -18,7 +19,7 @@ const BhAutocompleteMenu = class {
         index.registerInstance(this, hostRef);
         this.bhItemClick = index.createEvent(this, "bhItemClick");
     }
-    logger = errorBoundary.createComponentLogger("bh-autocomplete-menu");
+    logger = logger.createComponentLogger("bh-autocomplete-menu");
     destroy$ = lifecycle.createDestroySubjectSync();
     generatedMenuId = idGenerator.generateUniqueId("bh-autocomplete-menu");
     i18nUnsubscribe;

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

@@ -1,10 +1,11 @@
 'use strict';
 
 var index = require('./index-B6sArKsK.js');
-var errorBoundary = require('./error-boundary-Bf7TcT4U.js');
+var logger = require('./logger-DZionBgs.js');
 var focusStateManager = require('./focus-state-manager-BoEvV-Lq.js');
 var i18n = require('./i18n-Twgo5raQ.js');
 var metrics = require('./metrics-DtkENqew.js');
+var errorBoundary = require('./error-boundary-fNUNT0lE.js');
 var keyboardHelpers = require('./keyboard-helpers-CiUQBd3w.js');
 require('./keyboard-constants-ByvH1XTM.js');
 
@@ -15,7 +16,7 @@ const BhAvatarAdd = class {
         index.registerInstance(this, hostRef);
         this.bhClick = index.createEvent(this, "bhClick");
     }
-    logger = errorBoundary.createComponentLogger("bh-avatar-add");
+    logger = logger.createComponentLogger("bh-avatar-add");
     focusState = focusStateManager.createFocusStateManager();
     i18nUnsubscribe;
     _i18nVersion = 0;
@@ -97,7 +98,7 @@ const BhAvatarAdd = class {
         };
         const resolvedTooltip = i18n.resolveI18n("bh-avatar-add", "tooltipText", this.tooltipText, "Add user");
         const shouldShowTooltip = this.showTooltip && this.focusState.isHovered && !this.disabled;
-        return (index.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" }, index.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" }, index.h("span", { key: 'e16ef8889be348c6130b7cefed0dcc64e9364b82', class: "avatar-add-content", part: "content" }, index.h("span", { key: '01f740fcc500c05b3dcc0828da9c08f03e644eaa', class: "material-symbols-outlined avatar-add-icon", part: "icon" }, "add"))), this.showTooltip && (index.h("bh-tooltip", { key: '2d0f6dbd518ce4041f586bbcf78659b8cf18357c', placement: "bottom", text: resolvedTooltip, visible: shouldShowTooltip }))));
+        return (index.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" }, index.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" }, index.h("span", { key: 'e28793543a5908553024a4a828829adbe8a9737c', class: "avatar-add-content", part: "content" }, index.h("span", { key: '959ac30b33d0e34c447bf03d66a66036e3fb0e99', class: "material-symbols-outlined avatar-add-icon", part: "icon" }, "add"))), this.showTooltip && (index.h("bh-tooltip", { key: 'd9a5c6a07456c45646c9383dc802c66fcec5cf82', placement: "bottom", text: resolvedTooltip, visible: shouldShowTooltip }))));
     }
 };
 BhAvatarAdd.style = bhAvatarAddCss();

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

@@ -2,9 +2,10 @@
 
 var index = require('./index-B6sArKsK.js');
 var validators = require('./validators-DfzKUg-b.js');
-var errorBoundary = require('./error-boundary-Bf7TcT4U.js');
+var logger = require('./logger-DZionBgs.js');
 var i18n = require('./i18n-Twgo5raQ.js');
 var metrics = require('./metrics-DtkENqew.js');
+var errorBoundary = require('./error-boundary-fNUNT0lE.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%}}`;
 
@@ -28,7 +29,7 @@ const BhAvatarStacked = class {
         index.registerInstance(this, hostRef);
         this.bhError = index.createEvent(this, "bhError");
     }
-    logger = errorBoundary.createComponentLogger("bh-avatar-stacked");
+    logger = logger.createComponentLogger("bh-avatar-stacked");
     i18nUnsubscribe;
     _i18nVersion = 0;
     /**
@@ -130,7 +131,7 @@ const BhAvatarStacked = class {
         const getStackedOffsetStyle = (hasItems) => ({
             marginLeft: hasItems ? `-${offset}px` : "0",
         });
-        return (index.h(index.Host, { key: '08bb9a49ab66e5b68e47bf6688f0439cca23e190' }, index.h("div", { key: 'f3acd48e5418056948837dc1c880ff165bacae58', class: `avatar-stacked avatar-stacked-${this.size}`, part: "container" }, visibleAvatars.map((avatar, index$1) => (index.h("div", { class: "avatar-item", key: `avatar-${index$1}`, onMouseEnter: () => this.handleAvatarMouseEnter(index$1), onMouseLeave: this.handleAvatarMouseLeave, style: getOffsetStyle(index$1) }, index.h("bh-avatar", { alt: avatar.text || "Avatar", imageSrc: avatar.imageSrc, size: this.size, text: avatar.text || "?", variant: this.mapAvatarType(avatar.type) }), avatar.tooltipText && (index.h("bh-tooltip", { placement: "bottom", text: avatar.tooltipText, visible: this.hoveredIndex === index$1 }))))), showCountAvatar && (index.h("div", { key: 'b6874f94c2a0da629234a0a71bd0c4b71ee8f76b', class: "avatar-item", style: getStackedOffsetStyle(hasVisibleAvatars) }, index.h("bh-avatar", { key: 'd543dc9697c69532ad992ed088f4f88831df914d', alt: `${remainingCount} more`, size: this.size, text: `+${remainingCount}`, variant: "text" }))), this.showAddButton && (index.h("div", { key: '2d10dba155c5d0264117c72a2f367fd8a28f53e1', class: "avatar-item", onMouseEnter: this.handleAddButtonMouseEnter, onMouseLeave: this.handleAddButtonMouseLeave, style: getStackedOffsetStyle(hasVisibleAvatars || showCountAvatar) }, index.h("bh-avatar-add", { key: '8171ba9affdb7e145cd710989b9e02dc8a832cb4', showTooltip: true, size: this.size, tooltipText: i18n.resolveI18n("bh-avatar-stacked", "addTooltipText", this.addTooltipText, "Add member") }))))));
+        return (index.h(index.Host, { key: '362579a44a7aca27baf18bc48f0a74356f518a53' }, index.h("div", { key: 'e71ce5bcb57961c1662b6d4c6fd6422ac0d4fa92', class: `avatar-stacked avatar-stacked-${this.size}`, part: "container" }, visibleAvatars.map((avatar, index$1) => (index.h("div", { class: "avatar-item", key: `avatar-${index$1}`, onMouseEnter: () => this.handleAvatarMouseEnter(index$1), onMouseLeave: this.handleAvatarMouseLeave, style: getOffsetStyle(index$1) }, index.h("bh-avatar", { alt: avatar.text || "Avatar", imageSrc: avatar.imageSrc, size: this.size, text: avatar.text || "?", variant: this.mapAvatarType(avatar.type) }), avatar.tooltipText && (index.h("bh-tooltip", { placement: "bottom", text: avatar.tooltipText, visible: this.hoveredIndex === index$1 }))))), showCountAvatar && (index.h("div", { key: 'd5d1fea3392c84fa8eba0ef87db9e1da3221ad73', class: "avatar-item", style: getStackedOffsetStyle(hasVisibleAvatars) }, index.h("bh-avatar", { key: '7df4ff15b80d56e56d504b9c4062d68e83dd1ab3', alt: `${remainingCount} more`, size: this.size, text: `+${remainingCount}`, variant: "text" }))), this.showAddButton && (index.h("div", { key: '31e64a100a3ff8d86ceda5c3f884033d72d79495', class: "avatar-item", onMouseEnter: this.handleAddButtonMouseEnter, onMouseLeave: this.handleAddButtonMouseLeave, style: getStackedOffsetStyle(hasVisibleAvatars || showCountAvatar) }, index.h("bh-avatar-add", { key: 'd01d98af39f2f648b10d8f7b61337d325ac9d976', showTooltip: true, size: this.size, tooltipText: i18n.resolveI18n("bh-avatar-stacked", "addTooltipText", this.addTooltipText, "Add member") }))))));
     }
 };
 BhAvatarStacked.style = bhAvatarStackedCss();

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

@@ -1,15 +1,16 @@
 'use strict';
 
 var index = require('./index-B6sArKsK.js');
-var errorBoundary = require('./error-boundary-Bf7TcT4U.js');
+var logger = require('./logger-DZionBgs.js');
 var focusStateManager = require('./focus-state-manager-BoEvV-Lq.js');
 var i18n = require('./i18n-Twgo5raQ.js');
 var metrics = require('./metrics-DtkENqew.js');
+var errorBoundary = require('./error-boundary-fNUNT0lE.js');
 var keyboardHelpers = require('./keyboard-helpers-CiUQBd3w.js');
 var classBuilder = require('./class-builder-DFgnSWOY.js');
 require('./keyboard-constants-ByvH1XTM.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([
@@ -41,7 +42,7 @@ const BhAvatar = class {
         this.bhClick = index.createEvent(this, "bhClick");
         this.bhError = index.createEvent(this, "bhError");
     }
-    logger = errorBoundary.createComponentLogger("bh-avatar");
+    logger = logger.createComponentLogger("bh-avatar");
     focusState = focusStateManager.createFocusStateManager();
     i18nUnsubscribe;
     /**
@@ -171,9 +172,9 @@ const BhAvatar = class {
                 offline: this.status === "offline",
             },
         });
-        return (index.h(index.Host, { key: 'd2236acc392bf414f5ae7223dcb3c763f40ac500' }, index.h("div", { key: '811e3ac5bd62a9ddf8aa0e3859e574af641f088c', "aria-disabled": this.interactive && this.disabled ? "true" : undefined, "aria-expanded": this.interactive && this.hasPopup
+        return (index.h(index.Host, { key: 'bce13fcc8525b9f59594fb42bee6f558e3136c6e' }, index.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 }, index.h("div", { key: 'c22735a49156598682bdde66fd65eccfb781c4d9', class: "avatar-border", part: "border" }), index.h("div", { key: 'e118a4f512f3972eedda87d3dffe0140523a8e31', class: "avatar-content", part: "content" }, this.variant === "image" && (index.h("img", { key: '8dd1cf65cd859f1d82c1e7a3197c7d5f98833586', alt: resolvedAlt, class: "avatar-image", part: "image", src: this.imageSrc })), this.variant === "placeholder" && (index.h("span", { key: 'dbabf72e3e8c8b2e10a12a6ba9a2e45591aa2512', class: `material-symbols-outlined avatar-placeholder-icon ${this.getIconSizeClass()}`, part: "placeholder-icon" }, "person")), this.variant === "text" && (index.h("span", { key: '213d4f99c92e13a06fe7862b3c2dc5124b59c459', class: `avatar-text ${this.getTextSizeClass()}`, part: "text" }, this.text))), hasStatus && index.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 }, index.h("div", { key: '4728b822f9a8cefa8472bbc9b783437790a48500', class: "avatar-border", part: "border" }), index.h("div", { key: '397d4e222f3a3926c074b12a13c865b33ce69390', class: "avatar-content", part: "content" }, this.variant === "image" && (index.h("img", { key: '74da499c751fc5d80aba3f0c1a9f00153e57456e', alt: resolvedAlt, class: "avatar-image", part: "image", src: this.imageSrc })), this.variant === "placeholder" && (index.h("span", { key: 'debf868bb69baa20abf28304038422c22c5730e4', class: `material-symbols-outlined avatar-placeholder-icon ${this.getIconSizeClass()}`, part: "placeholder-icon" }, "person")), this.variant === "text" && (index.h("span", { key: '6380c21f54fba6c8c87ed240c4e30f8720a7c2a3', class: `avatar-text ${this.getTextSizeClass()}`, part: "text" }, this.text))), hasStatus && index.h("div", { key: '47767ec350de25983eecac327195a365a2ad57ff', class: statusClasses, part: "status" }))));
     }
 };
 BhAvatar.style = bhAvatarCss();

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

@@ -1,13 +1,14 @@
 'use strict';
 
 var index = require('./index-B6sArKsK.js');
-var errorBoundary = require('./error-boundary-Bf7TcT4U.js');
+var logger = require('./logger-DZionBgs.js');
 var metrics = require('./metrics-DtkENqew.js');
+var errorBoundary = require('./error-boundary-fNUNT0lE.js');
+var classBuilder = require('./class-builder-DFgnSWOY.js');
 var lifecycle = require('./lifecycle-CnkLRXH9.js');
 var focusStateManager = require('./focus-state-manager-BoEvV-Lq.js');
 var timers = require('./timers-DP0qMGY7.js');
 var keyboardHelpers = require('./keyboard-helpers-CiUQBd3w.js');
-var classBuilder = require('./class-builder-DFgnSWOY.js');
 var constants = require('./constants-B93iN3Uz.js');
 require('./keyboard-constants-ByvH1XTM.js');
 
@@ -17,7 +18,7 @@ const BhBadgeDot = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
-    logger = errorBoundary.createComponentLogger("bh-badge-dot");
+    logger = logger.createComponentLogger("bh-badge-dot");
     /**
      * The size of the badge dot
      */
@@ -45,7 +46,7 @@ const BhBadgeDot = class {
             [`badge-dot-${this.color}`]: true,
             "badge-dot-outline": this.outline,
         };
-        return (index.h(index.Host, { key: 'bc580fcf315d744555e9317fe23f8c989c2aaa56' }, index.h("div", { key: '54a6330eb4ea0482613b2caac1356912f807809e', "aria-hidden": "true", class: dotClasses, part: "dot", role: "presentation" })));
+        return (index.h(index.Host, { key: '358a84d2c1db399a89eac842afeb9de7f410a054' }, index.h("div", { key: '07df236d30ee7e4ec222e8c009856a83147fe798', "aria-hidden": "true", class: dotClasses, part: "dot", role: "presentation" })));
     }
 };
 BhBadgeDot.style = bhBadgeDotCss();
@@ -72,7 +73,7 @@ const BhTag = class {
         this.bhClose = index.createEvent(this, "bhClose");
         this.bhChange = index.createEvent(this, "bhChange");
     }
-    logger = errorBoundary.createComponentLogger("bh-tag");
+    logger = logger.createComponentLogger("bh-tag");
     destroy$ = lifecycle.createDestroySubjectSync();
     focusState = focusStateManager.createFocusStateManager();
     /** Tag variant */
@@ -207,10 +208,10 @@ const BhTag = class {
             width: CHECKBOX_SIZE_MAP[this.size],
             height: CHECKBOX_SIZE_MAP[this.size],
         };
-        return (index.h(index.Host, { key: 'df4a7ab29214ab50ec40e02ab6df4302127009e7' }, index.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 }, index.h("div", { key: 'a4c5012432a32add852301b4bfea39dfdfa20e88', class: "tag-content" }, this.isCheckboxMode && (index.h("div", { key: 'a092b921845d4d729d3d36d52ec384de586ea6db', "aria-hidden": "true", class: {
+        return (index.h(index.Host, { key: '4d29753431e9e6e060207d62eee48abed885cda9' }, index.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 }, index.h("div", { key: 'cc80dd525464a72f1114d68e8172004251503bf3', class: "tag-content" }, this.isCheckboxMode && (index.h("div", { key: '290ad9389b202f4e21c37c1447c685ace4382af4', "aria-hidden": "true", class: {
                 "tag-checkbox": true,
                 "tag-checkbox-checked": this.checked === true,
-            }, style: checkboxStyle }, this.checked && (index.h("span", { key: 'c02ea2f5a54bc8a86ebd1551440379c73d50655b', class: "material-symbols-outlined tag-checkbox-icon" }, "check")))), this.variant === "dot" && (index.h("bh-badge-dot", { key: 'd70af3e4653edc3aecb587c97eed3a49ff84a81b', color: this.dotColor, size: DOT_SIZE_MAP[this.size] })), this.variant === "avatar" && (index.h("bh-avatar", { key: '88ee6b6693dbcd0c5d7174e388fe7da3d09509de', imageSrc: this.avatarSrc, size: "xxs", variant: this.avatarSrc ? "image" : "placeholder" })), index.h("span", { key: '0d1bbe969070fdfea8e52b5de1b83c4dfe5ca341', class: "tag-label-wrapper" }, index.h("span", { key: '33d3caefb72244c4817b5655ec2603e577142675', class: "tag-label", part: "label", style: labelStyle }, this.label))), this.showCount && (index.h("span", { key: '3eb4ea7b8d79d2e327822c6269097e98f40d4002', class: "tag-count", part: "count" }, this.count)), this.showDismiss && (index.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 && (index.h("span", { key: '2b33240f231f44c0806b3507498a867c99a6a897', class: "material-symbols-outlined tag-checkbox-icon" }, "check")))), this.variant === "dot" && (index.h("bh-badge-dot", { key: '443267726ac2e0a0985fb2f72b0ca399b4c0ebc0', color: this.dotColor, size: DOT_SIZE_MAP[this.size] })), this.variant === "avatar" && (index.h("bh-avatar", { key: '984c31beb18196be69cb8c6317958a6e691f48ff', imageSrc: this.avatarSrc, size: "xxs", variant: this.avatarSrc ? "image" : "placeholder" })), index.h("span", { key: '2f322d1088b3693f5f19cb08e06c8b1c60913b6b', class: "tag-label-wrapper" }, index.h("span", { key: 'bed69f25fc9ee9a91d01767265f0538bd4b4818a', class: "tag-label", part: "label", style: labelStyle }, this.label))), this.showCount && (index.h("span", { key: 'b8ae69d629f8985b3fb72fc868187b20aba74116', class: "tag-count", part: "count" }, this.count)), this.showDismiss && (index.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();