@actabldesign/bellhop-core 0.3.0 → 0.3.1

package/dist/collection/components/bh-appbar/bh-notification-center/bh-notification-center.js

@@ -0,0 +1,513 @@
+import { Host, h, } from "@stencil/core";
+import { BellhopI18n, createComponentLogger, createDismissalManager, resolveI18n, } from "../../../utils";
+export class BhNotificationCenter {
+    logger = createComponentLogger("bh-notification-center");
+    dismissalManager;
+    i18nUnsubscribe;
+    _i18nVersion = 0;
+    el;
+    /**
+     * Notifications to display (array or JSON string). Read/unread state is
+     * held internally after load; re-assigning the prop re-syncs it.
+     */
+    notifications = [];
+    /**
+     * Whether the panel is open. Reflects so consumers can read/drive it.
+     * Ignored in inline display, where the panel always renders in place.
+     */
+    open = false;
+    /**
+     * Presentation: "popover" renders the bell trigger with a floating,
+     * dismissable panel; "inline" renders the panel in place (no bell,
+     * no dismissal) for pages and side panels.
+     */
+    display = "popover";
+    /**
+     * Panel header title. Allows i18n.
+     */
+    headerTitle = "Notifications";
+    /**
+     * Mark-all-read button label. Allows i18n.
+     */
+    markAllLabel = "Mark all as read";
+    /**
+     * Empty-state message. Allows i18n.
+     */
+    emptyMessage = "You're all caught up";
+    /**
+     * "All" filter tab label. Allows i18n.
+     */
+    filterAllLabel = "All";
+    /**
+     * "Unread" filter tab label. Allows i18n.
+     */
+    filterUnreadLabel = "Unread";
+    /**
+     * Accessible label for the bell trigger. Allows i18n.
+     */
+    bellAriaLabel = "Notifications";
+    items = [];
+    filter = "all";
+    /**
+     * Emitted when the panel opens.
+     */
+    bhOpen;
+    /**
+     * Emitted when the panel closes.
+     */
+    bhClose;
+    /**
+     * Emitted when read state changes. Detail carries the ids marked read in
+     * this change and the remaining unread count.
+     */
+    bhChange;
+    /**
+     * Emitted when a notification is clicked.
+     */
+    bhItemClick;
+    syncFromProp() {
+        this.items = this.parseNotifications();
+    }
+    handleOpenChange(isOpen) {
+        if (isOpen) {
+            this.dismissalManager?.enable();
+        }
+        else {
+            this.dismissalManager?.disable();
+        }
+    }
+    componentWillLoad() {
+        this.items = this.parseNotifications();
+        this.i18nUnsubscribe = BellhopI18n.onLocaleChange(() => {
+            this._i18nVersion++;
+        });
+    }
+    componentDidLoad() {
+        if (this.display === "inline") {
+            return;
+        }
+        this.dismissalManager = createDismissalManager(this.el, {
+            onDismiss: () => this.setOpen(false),
+            escapeKey: true,
+            clickOutside: true,
+            focusLoss: false,
+        });
+        if (this.open) {
+            this.dismissalManager.enable();
+        }
+    }
+    disconnectedCallback() {
+        this.dismissalManager?.destroy();
+        this.i18nUnsubscribe?.();
+    }
+    /**
+     * Mark a single notification as read.
+     */
+    async markRead(id) {
+        this.applyRead(this.items.filter((n) => n.id === id && !n.read));
+    }
+    /**
+     * Mark every notification as read.
+     */
+    async markAllRead() {
+        this.applyRead(this.items.filter((n) => !n.read));
+    }
+    parseNotifications() {
+        if (typeof this.notifications !== "string") {
+            return this.notifications.map((n) => ({ ...n }));
+        }
+        if (this.notifications.trim() === "") {
+            return [];
+        }
+        try {
+            return JSON.parse(this.notifications);
+        }
+        catch (error) {
+            this.logger.error("Invalid notifications JSON", error instanceof Error ? error : new Error(String(error)));
+            return [];
+        }
+    }
+    applyRead(toMark) {
+        if (toMark.length === 0) {
+            return;
+        }
+        const readIds = toMark.map((n) => n.id);
+        this.items = this.items.map((n) => readIds.includes(n.id) ? { ...n, read: true } : n);
+        this.bhChange.emit({ readIds, unreadCount: this.unreadCount() });
+    }
+    unreadCount() {
+        return this.items.filter((n) => !n.read).length;
+    }
+    visibleItems() {
+        return this.filter === "unread"
+            ? this.items.filter((n) => !n.read)
+            : this.items;
+    }
+    setOpen(isOpen) {
+        if (this.open === isOpen) {
+            return;
+        }
+        this.open = isOpen;
+        if (isOpen) {
+            this.bhOpen.emit();
+        }
+        else {
+            this.bhClose.emit();
+        }
+    }
+    handleBellClick = () => {
+        this.setOpen(!this.open);
+    };
+    handleItemClick = (notification) => {
+        this.bhItemClick.emit(notification);
+        this.applyRead(this.items.filter((n) => n.id === notification.id && !n.read));
+    };
+    t(key, propValue, fallback) {
+        return resolveI18n("bh-notification-center", key, propValue, fallback);
+    }
+    renderTrigger(unread) {
+        const bellLabel = this.t("bellAriaLabel", this.bellAriaLabel, "Notifications");
+        return (h("div", { class: "trigger", part: "trigger" }, h("bh-button-icon", { ariaLabel: unread > 0 ? `${bellLabel} (${unread})` : bellLabel, hierarchy: "tertiary", iconName: "notifications", onClick: this.handleBellClick, size: "sm" }), unread > 0 && (h("bh-badge", { class: "icon-badge-count", emphasis: "high", label: String(unread), size: "sm", variant: "error" }))));
+    }
+    render() {
+        const unread = this.unreadCount();
+        const visible = this.visibleItems();
+        const isInline = this.display === "inline";
+        const showPanel = isInline || this.open;
+        return (h(Host, { key: '1cec4c416a7dc25a5eb5f6ba1596315d86c50271' }, !isInline && this.renderTrigger(unread), showPanel && (h("div", { key: 'eae2068a2a56f938c04bd5be6eac8885de8db987', "aria-label": this.t("headerTitle", this.headerTitle, "Notifications"), class: { panel: true, "panel-inline": isInline }, part: "panel", role: isInline ? "region" : "dialog" }, h("div", { key: '2990d636c1ea32f28df29e84d60da4ddc8325960', class: "panel-header", part: "header" }, h("span", { key: 'c0b9291e8dbb52ebde5f62e95eedb646569f075d', class: "panel-title" }, this.t("headerTitle", this.headerTitle, "Notifications")), unread > 0 && (h("bh-button", { key: '76217c3ca371df29bf782af9c04a6113ecdda805', hierarchy: "tertiary", label: this.t("markAllLabel", this.markAllLabel, "Mark all as read"), onClick: () => this.markAllRead(), size: "sm" }))), h("div", { key: '696ebb7f1ba24de12b98a32f519abc71fd7dcd54', class: "filters", part: "filters", role: "tablist" }, ["all", "unread"].map((f) => (h("button", { "aria-selected": this.filter === f ? "true" : "false", class: { filter: true, active: this.filter === f }, "data-filter": f, onClick: () => {
+                this.filter = f;
+            }, role: "tab", type: "button" }, f === "all"
+            ? this.t("filterAllLabel", this.filterAllLabel, "All")
+            : this.t("filterUnreadLabel", this.filterUnreadLabel, "Unread"))))), visible.length === 0 ? (h("div", { class: "empty", part: "empty" }, this.t("emptyMessage", this.emptyMessage, "You're all caught up"))) : (h("bh-activity-feed", { class: "feed", divider: "line", flush: true, part: "list", type: "notifications" }, visible.map((n) => (h("bh-feed-item", { author: n.author ?? "", class: { unread: !n.read }, content: n.body ?? "", "data-id": n.id, icon: n.author ? undefined : n.icon, itemTitle: n.title, key: n.id, onBhClick: () => this.handleItemClick(n), showDot: !n.read, size: "sm", timestamp: n.timestamp ?? "", variant: n.author ? "user" : "system" })))))))));
+    }
+    static get is() { return "bh-notification-center"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-notification-center.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-notification-center.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "notifications": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BhNotification[] | string",
+                    "resolved": "BhNotification[] | string",
+                    "references": {
+                        "BhNotification": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhop/bellhop/packages/bellhop-core/src/components/bh-appbar/bh-notification-center/bh-notification-center.tsx",
+                            "id": "src/components/bh-appbar/bh-notification-center/bh-notification-center.tsx::BhNotification"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Notifications to display (array or JSON string). Read/unread state is\nheld internally after load; re-assigning the prop re-syncs it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "notifications",
+                "defaultValue": "[]"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the panel is open. Reflects so consumers can read/drive it.\nIgnored in inline display, where the panel always renders in place."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "display": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"popover\" | \"inline\"",
+                    "resolved": "\"inline\" | \"popover\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Presentation: \"popover\" renders the bell trigger with a floating,\ndismissable panel; \"inline\" renders the panel in place (no bell,\nno dismissal) for pages and side panels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "display",
+                "defaultValue": "\"popover\""
+            },
+            "headerTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Panel header title. Allows i18n."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header-title",
+                "defaultValue": "\"Notifications\""
+            },
+            "markAllLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mark-all-read button label. Allows i18n."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mark-all-label",
+                "defaultValue": "\"Mark all as read\""
+            },
+            "emptyMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Empty-state message. Allows i18n."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-message",
+                "defaultValue": "\"You're all caught up\""
+            },
+            "filterAllLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\"All\" filter tab label. Allows i18n."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filter-all-label",
+                "defaultValue": "\"All\""
+            },
+            "filterUnreadLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\"Unread\" filter tab label. Allows i18n."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filter-unread-label",
+                "defaultValue": "\"Unread\""
+            },
+            "bellAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the bell trigger. Allows i18n."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bell-aria-label",
+                "defaultValue": "\"Notifications\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_i18nVersion": {},
+            "items": {},
+            "filter": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhOpen",
+                "name": "bhOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the panel opens."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bhClose",
+                "name": "bhClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the panel closes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bhChange",
+                "name": "bhChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when read state changes. Detail carries the ids marked read in\nthis change and the remaining unread count."
+                },
+                "complexType": {
+                    "original": "{ readIds: string[]; unreadCount: number }",
+                    "resolved": "{ readIds: string[]; unreadCount: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "bhItemClick",
+                "name": "bhItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a notification is clicked."
+                },
+                "complexType": {
+                    "original": "BhNotification",
+                    "resolved": "{ id: string; title: string; body?: string | undefined; timestamp?: string | undefined; read?: boolean | undefined; icon?: string | undefined; author?: string | undefined; }",
+                    "references": {
+                        "BhNotification": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhop/bellhop/packages/bellhop-core/src/components/bh-appbar/bh-notification-center/bh-notification-center.tsx",
+                            "id": "src/components/bh-appbar/bh-notification-center/bh-notification-center.tsx::BhNotification"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "markRead": {
+                "complexType": {
+                    "signature": "(id: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Mark a single notification as read.",
+                    "tags": []
+                }
+            },
+            "markAllRead": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Mark every notification as read.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "notifications",
+                "methodName": "syncFromProp"
+            }, {
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
+}

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

@@ -85,7 +85,7 @@ export class BhAvatarAdd {
         };
         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 }))));
     }
     static get is() { return "bh-avatar-add"; }
     static get encapsulation() { return "shadow"; }

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

@@ -118,7 +118,7 @@ export class BhAvatarStacked {
         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") }))))));
     }
     static get is() { return "bh-avatar-stacked"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bh-avatar/bh-avatar.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 @keyframes spin {
   from {
     transform: rotate(0deg);
@@ -35,10 +36,15 @@
   }
 }
 @layer bh-base {
-  /* Base Avatar */
+  /* Base Avatar.
+     display: flex (not inline-flex) — an inline-level circle sits on the
+     host's text baseline, and with a replaced <img> inside that baseline
+     is the image bottom, adding descender space below (48px avatar
+     measured 54.5px tall in the image variant only). The host is
+     inline-block, so inline placement is unaffected. */
   .avatar {
     position: relative;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;

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

@@ -157,9 +157,9 @@ export class BhAvatar {
                 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" }))));
     }
     static get is() { return "bh-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,7 +29,7 @@ export class BhBadgeDot {
             [`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" })));
     }
     static get is() { return "bh-badge-dot"; }
     static get encapsulation() { return "shadow"; }

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

@@ -119,12 +119,12 @@ export class BhBadge {
         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"))))));
     }
     static get is() { return "bh-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bh-banner/bh-banner.js

@@ -54,11 +54,11 @@ export class BhBanner {
     }
     render() {
         const hasMedia = !!this.imageSrc;
-        return (h(Host, { key: '79fb5793d1b15cf28cb253d76a32e1b0c1901b43' }, h("div", { key: '68317880f36540113c041b4a7988a0a1ba4bb905', "aria-label": this.heading || "Banner", class: {
+        return (h(Host, { key: 'f61560c82138e3fccc2a3a9236f5235ecb1847b2' }, h("div", { key: '8a8f37d7a59cbdb6e04f7a3d60d53a108ed63a79', "aria-label": this.heading || "Banner", class: {
                 banner: true,
                 [`banner-${this.variant}`]: true,
                 "banner-with-media": hasMedia,
-            }, part: "container", role: "region" }, hasMedia && this.renderMedia(), h("div", { key: 'dcccc9223215d053378f386e9792090241df829a', class: "banner-content", part: "content" }, h("div", { key: 'c359f940df031ceb027199b9078c2ec88c2e90be', class: "banner-body", part: "body" }, h("div", { key: 'eadb47b277801f7f3d05d6d71bb90a4a99020ae7', class: "banner-text", part: "text" }, this.heading && (h("h3", { key: '56b86b6844878d151ed69164b4c2ddc39ad6ec61', class: "banner-heading", part: "heading" }, this.heading)), this.description && (h("p", { key: '274436012fbdb0f0b9ecf2f7e289b428f22e0309', class: "banner-description", part: "description" }, this.description))), h("slot", { key: '7b619e0cfbf1326abd19ce703946ee192983b432' })), h("div", { key: '19f6c33e74e8f380d3840974479a838b123f78fa', class: "banner-actions", onClick: this.handleActionClick, part: "actions" }, h("slot", { key: 'c1f363a7f526006d21ed0d26dd134d623eb1583a', name: "actions" }))), this.showDismiss && (h("bh-close-button", { key: '01736b1296b1938af470f5198a72a29a009b2c94', ariaLabel: resolveI18n("bh-banner", "dismissAriaLabel", this.dismissAriaLabel, "Dismiss banner"), onClick: this.handleDismiss })))));
+            }, part: "container", role: "region" }, hasMedia && this.renderMedia(), h("div", { key: 'a5378ca0755d8fa23b940a4c8893590b139005db', class: "banner-content", part: "content" }, h("div", { key: '943dfa074273d6de8ef68706c1c6305878fac47b', class: "banner-body", part: "body" }, h("div", { key: 'c40d87d74a11df3b512e37476f968334cf733081', class: "banner-text", part: "text" }, this.heading && (h("h3", { key: 'f251f4f656b2e75bd8ccfc13f707f73e40c60bd9', class: "banner-heading", part: "heading" }, this.heading)), this.description && (h("p", { key: '322110ba3ab9c0c02bfbc4fcd4bae618c3cbbecb', class: "banner-description", part: "description" }, this.description))), h("slot", { key: 'cfd8adc5a3a8f299cb95381910282ae111fcfba9' })), h("div", { key: 'e62fd391857817eae156462efd7e07a4883944d6', class: "banner-actions", onClick: this.handleActionClick, part: "actions" }, h("slot", { key: '48372d95fc2273890c42e80c9cf16489ca0727ad', name: "actions" }))), this.showDismiss && (h("bh-close-button", { key: 'fa47fbe26e433dadc2d1d7523a1667686c93c41c', ariaLabel: resolveI18n("bh-banner", "dismissAriaLabel", this.dismissAriaLabel, "Dismiss banner"), onClick: this.handleDismiss })))));
     }
     static get is() { return "bh-banner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bh-breadcrumbs/bh-breadcrumbs.css

@@ -84,7 +84,9 @@
     gap: var(--spacing-xs);
     flex-wrap: wrap;
   }
-  .breadcrumb-item {
+  .breadcrumb-item,
+  .breadcrumb-start,
+  .breadcrumb-slot-item {
     display: flex;
     align-items: center;
   }