@actabldesign/bellhop-core 0.3.0 → 0.3.1

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 @keyframes spin {
   from {
     transform: rotate(0deg);
@@ -73,7 +74,9 @@
     align-items: center;
     justify-content: space-between;
     height: var(--bh-avatar-size-xl);
-    padding: 0 var(--spacing-sm);
+    /* Extra right inset so corner-anchored badges (count/dot) never
+       touch the viewport edge */
+    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);
@@ -123,6 +126,30 @@
     top: calc(-1 * var(--spacing-md));
     right: var(--spacing-xxs);
   }
+  /* Corner count badge — same offset property as bh-notification-center's
+     bell so the two bells can never drift apart */
+  .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;
+  }
+  /* Visually hidden, available to screen readers */
+  .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 {
   /* Responsive Design */

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

@@ -40,6 +40,42 @@ export class BhAppbar {
      * 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
      */
@@ -77,19 +113,28 @@ export class BhAppbar {
             this.bhItemClick.emit(item);
         }
     };
-    handleNotificationClick = () => { };
+    handleNotificationClick = () => {
+        this.bhAction.emit({ action: "notifications" });
+    };
     handleCalendarClick = () => {
         this.bhAction.emit({ action: "calendar" });
     };
-    handleSettingsClick = () => { };
+    handleSettingsClick = () => {
+        this.bhAction.emit({ action: "settings" });
+    };
+    notificationAnnouncement() {
+        if (this.notificationCount > 0) {
+            return resolveI18n("bh-appbar", "notificationsAnnouncement", this.notificationsAnnouncement, "{{count}} new notifications").replace("{{count}}", String(this.notificationCount));
+        }
+        return resolveI18n("bh-appbar", "noNotificationsAnnouncement", this.noNotificationsAnnouncement, "No new notifications");
+    }
     render() {
-        return (h(Host, { key: '129e250eeb5361cf8792338de4440fe6982fcbdc' }, h("header", { key: '9ebf5d95d4170a30cb6ec1bfd39e7571b4916e91', class: "appbar", part: "header", role: "banner" }, h("div", { key: '72d6ad7a3ee8b00cc1e96cc9a9f7d904258270ef', class: "left-section", part: "left-section" }, h("bh-button-icon", { key: '8ba7db5071f2df0726b9f7faa83a3f4c307c0f52', ariaLabel: this.isMenuOpen
+        return (h(Host, { key: 'fae737fd6bd652262a50fe772c6d747665320bae' }, h("header", { key: 'ee050d082b31aacfa3cfac28c41194ba542bbb10', class: "appbar", part: "header", role: "banner" }, h("div", { key: 'de0b399c07780c4c3c1a80c3a2e51c5a38139bf9', class: "left-section", part: "left-section" }, h("bh-button-icon", { key: 'e69b1989ac771ae1dfb17f608098be3163433593', ariaLabel: this.isMenuOpen
                 ? resolveI18n("bh-appbar", "closeMenuAriaLabel", this.closeMenuAriaLabel, "Close menu")
-                : resolveI18n("bh-appbar", "openMenuAriaLabel", this.openMenuAriaLabel, "Open menu"), hierarchy: "tertiary", iconName: this.isMenuOpen ? "left_panel_close" : "left_panel_open", onClick: this.handleMenuToggle, size: "sm" }), this.logoSrc && (h("div", { key: '83365a303c79b7514715128750294c14144f404d', class: "logo" }, h("img", { key: '2e30cd3618df5d61f91e9f892c23b2efe059c908', alt: resolveI18n("bh-appbar", "logoAlt", this.logoAlt, "Solstice"), class: "logo-image", src: this.logoSrc }))), h("slot", { key: 'db5d6f272860d9a45188a107fb4e95b15dc35390', name: "property-switcher" }), h("bh-breadcrumbs", { key: 'e559c3f690ff6a029e6015de7ee4fa79bfa0c1b3', items: this.breadcrumbItems, onBhItemClick: (e) => this.handleBreadcrumbClick(e.detail), showHome: this.showBreadcrumbHome })), h("div", { key: '9f270400a3b727988ce8d23416c9939416d7d7a5', class: "right-section", part: "right-section" }, h("slot", { key: 'df4dec79ef5b1655b4da122c0202558b3531be1e', name: "actions" }), h("div", { key: '7e5448f27626c00b9d4981c5d86249c68ff475e8', class: "icon-button-wrapper" }, h("bh-button-icon", { key: '0bb109cecbdd1efb81bf996d272e7fc983f9174f', ariaLabel: "Calendar", hierarchy: "tertiary", iconName: "calendar_today", onClick: this.handleCalendarClick, size: "sm" }), h("bh-badge-dot", { key: 'cbb6dc7208fa02e58cc557d6634def7632fbb2fb', class: "icon-badge-dot", color: "success", outline: true, size: "sm" })), h("div", { key: '8597286d8e35d7798dc24eec41ff561ce5e1ae41', class: "icon-button-wrapper" }, h("bh-button-icon", { key: '98284f1621d628733f1045089af4f5a9f99ab5da', ariaLabel: "Settings", hierarchy: "tertiary", iconName: "settings", onClick: this.handleSettingsClick, size: "sm" }), h("bh-badge-dot", { key: '628812cf1cf5e3b68d2a838fad9e92a4feb11078', class: "icon-badge-dot", color: "blue", outline: true, size: "sm" })), h("div", { key: '47df390313bce50ded59d413ebd4dc4b803cb94d', class: "icon-button-wrapper" }, h("bh-button-icon", { key: 'b11cb886e8b77c5cbee7f10b72d38fe1aed1f2a1', ariaLabel: this.notificationCount > 0
-                ? `Notifications (${this.notificationCount} new)`
-                : "Notifications", hierarchy: "tertiary", iconName: "notifications", onClick: this.handleNotificationClick, size: "sm" }), this.notificationCount > 0 && (h("bh-badge-dot", { key: 'deb97ba1ab11753c4e6fbaf2225f897c584c9ef2', class: "icon-badge-dot", color: "error", outline: true, size: "sm" }))), h("div", { key: 'a05fa745aef53894339be58098729d3c82228314', "aria-atomic": "true", "aria-live": "polite", class: "sr-only", part: "notification-live-region" }, this.notificationCount > 0
-            ? `${this.notificationCount} new notification${this.notificationCount === 1 ? "" : "s"}`
-            : "No new notifications")))));
+                : resolveI18n("bh-appbar", "openMenuAriaLabel", this.openMenuAriaLabel, "Open menu"), hierarchy: "tertiary", iconName: this.isMenuOpen ? "left_panel_close" : "left_panel_open", onClick: this.handleMenuToggle, size: "sm" }), this.logoSrc && (h("div", { key: 'a7128b21be6c890bdff308af74b3c9f5b34d1ac3', class: "logo" }, h("img", { key: '5553c2777fe290ae08c24b34df5833451da95dd1', alt: resolveI18n("bh-appbar", "logoAlt", this.logoAlt, "Solstice"), class: "logo-image", src: this.logoSrc }))), h("slot", { key: '0d5e2b11736ccbe69ccafc1db6cb0db608b00d98', name: "property-switcher" }), h("slot", { key: '035ec16e4dd285cd415b2018048b983178daf104', name: "breadcrumb" }, h("bh-breadcrumbs", { key: '2544b67f1cc428a097ee9bfbcf98d2bdc1135048', items: this.breadcrumbItems, onBhItemClick: (e) => this.handleBreadcrumbClick(e.detail), showHome: this.showBreadcrumbHome }))), h("div", { key: '13f1b1304a2779d82e1913149400ac6910261c39', class: "right-section", part: "right-section" }, h("slot", { key: 'bcd44a315dbf486913727354368bf5896321bab3', name: "actions" }), this.showCalendar && (h("slot", { key: 'd81f877985b0a33b9b0c60f62c9e868b27f48bde', name: "calendar-action" }, h("div", { key: '97fbe4205b82f386458ee0fd6bca33df706e4041', class: "icon-button-wrapper" }, h("bh-button-icon", { key: '20ebeb4cc3dab4830cb09887fe6822279eae906b', ariaLabel: "Calendar", hierarchy: "tertiary", iconName: "calendar_today", onClick: this.handleCalendarClick, size: "sm" }), h("bh-badge-dot", { key: '444fe1c20f8686c9150e749e580ef5ef947924d1', class: "icon-badge-dot", color: "success", outline: true, size: "sm" })))), this.showSettings && (h("slot", { key: '06cacd66349b11b634b6b50a6f234cd3981ce205', name: "settings-action" }, h("div", { key: '31fcabb84e93e329fbd336fa5b29e29d1fa215d8', class: "icon-button-wrapper" }, h("bh-button-icon", { key: '469baf5832cfb5ec12843e02900f527f251009ea', ariaLabel: "Settings", hierarchy: "tertiary", iconName: "settings", onClick: this.handleSettingsClick, size: "sm" }), h("bh-badge-dot", { key: 'df04da757acdf33d55c002034e12305e3a5a23e3', class: "icon-badge-dot", color: "blue", outline: true, size: "sm" })))), this.showNotifications && this.notifications !== undefined && (h("slot", { key: '1661133fd56ca74fdf2b4ae59d0f6e34da93633e', name: "notifications-action" }, h("bh-notification-center", { key: '8159626a0ed74847d263ec66e5257ffc7d39c485', notifications: this.notifications }))), this.showNotifications && this.notifications === undefined && (h("slot", { key: '67a6e116a630d36bec72585c157291f4b80a3359', name: "notifications-action" }, h("div", { key: 'b67fe03724f8325b891fcc057a6d68107cbef300', class: "icon-button-wrapper" }, h("bh-button-icon", { key: '271b3fe7ce69a0b94228428521b2f5f52f33a443', ariaLabel: this.notificationCount > 0
+                ? `${resolveI18n("bh-appbar", "notificationsAriaLabel", this.notificationsAriaLabel, "Notifications")} (${this.notificationCount})`
+                : resolveI18n("bh-appbar", "notificationsAriaLabel", this.notificationsAriaLabel, "Notifications"), hierarchy: "tertiary", iconName: "notifications", onClick: this.handleNotificationClick, size: "sm" }), this.notificationCount > 0 &&
+            (this.notificationBadge === "count" ? (h("bh-badge", { class: "icon-badge-count", emphasis: "high", label: String(this.notificationCount), size: "sm", variant: "error" })) : (h("bh-badge-dot", { class: "icon-badge-dot", color: "error", outline: true, size: "sm" })))))), this.notifications === undefined && (h("div", { key: '3cb9d0a8bd66dddb418daa407a524e741fe79ba0', "aria-atomic": "true", "aria-live": "polite", class: "sr-only", part: "notification-live-region" }, this.notificationAnnouncement()))))));
     }
     static get is() { return "bh-appbar"; }
     static get encapsulation() { return "shadow"; }
@@ -268,6 +313,172 @@ export class BhAppbar {
                 "reflect": false,
                 "attribute": "show-breadcrumb-home",
                 "defaultValue": "true"
+            },
+            "showCalendar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the built-in calendar action button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-calendar",
+                "defaultValue": "true"
+            },
+            "showSettings": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the built-in settings action button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-settings",
+                "defaultValue": "true"
+            },
+            "showNotifications": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the built-in notifications action button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-notifications",
+                "defaultValue": "true"
+            },
+            "notificationBadge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"dot\" | \"count\"",
+                    "resolved": "\"count\" | \"dot\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unread-notification indicator style: badge dot or count badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "notification-badge",
+                "defaultValue": "\"dot\""
+            },
+            "notifications": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BhNotification[] | string",
+                    "resolved": "BhNotification[] | string | undefined",
+                    "references": {
+                        "BhNotification": {
+                            "location": "import",
+                            "path": "./bh-notification-center/bh-notification-center",
+                            "id": "src/components/bh-appbar/bh-notification-center/bh-notification-center.tsx::BhNotification",
+                            "referenceLocation": "BhNotification"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Notification data (array or JSON string). When provided, the built-in\nbell becomes a full bh-notification-center (popover panel, read state,\nmark-read) and `notificationCount` is ignored. Without it, the plain\nbell renders and clicking it emits bhAction only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "notifications"
+            },
+            "notificationsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the notifications button. Allows i18n."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "notifications-aria-label",
+                "defaultValue": "\"Notifications\""
+            },
+            "notificationsAnnouncement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Screen-reader announcement template when notifications exist.\n`{{count}}` is replaced with the notification count. Allows i18n."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "notifications-announcement",
+                "defaultValue": "\"{{count}} new notifications\""
+            },
+            "noNotificationsAnnouncement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Screen-reader announcement when there are no notifications. Allows i18n."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-notifications-announcement",
+                "defaultValue": "\"No new notifications\""
             }
         };
     }
@@ -304,7 +515,7 @@ export class BhAppbar {
                 },
                 "complexType": {
                     "original": "BreadcrumbItem",
-                    "resolved": "{ label: string; path?: string | undefined; isActive?: boolean | undefined; dropdown?: BreadcrumbDropdownOption[] | undefined; dropdownSearchable?: boolean | undefined; }",
+                    "resolved": "{ label: string; path?: string | undefined; isActive?: boolean | undefined; dropdown?: BreadcrumbDropdownOption[] | undefined; dropdownSearchable?: boolean | undefined; slotName?: string | undefined; }",
                     "references": {
                         "BreadcrumbItem": {
                             "location": "import",

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

@@ -0,0 +1,118 @@
+@charset "UTF-8";
+:host {
+  position: relative;
+  display: inline-block;
+}
+
+.trigger {
+  position: relative;
+  display: inline-flex;
+}
+
+/* Corner count badge — offsets shared with bh-appbar's built-in bell
+   via the --bh-corner-badge-count-offset custom property */
+.icon-badge-count {
+  position: absolute;
+  top: var(--bh-corner-badge-count-offset, calc(-1.5 * var(--spacing-sm, 8px)));
+  right: var(--bh-corner-badge-count-offset, calc(-1.5 * var(--spacing-sm, 8px)));
+  opacity: 0.8;
+  pointer-events: none;
+}
+
+.icon-badge-count:hover {
+  opacity: 1;
+}
+
+.panel {
+  position: absolute;
+  top: calc(100% + var(--spacing-sm, 8px));
+  right: 0;
+  z-index: var(--bh-notification-center-z-index, 1000);
+  width: var(--bh-notification-center-width, 360px);
+  max-height: var(--bh-notification-center-max-height, 480px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--color-bg-primary, #fff);
+  border-radius: var(--radius-lg, 12px);
+  box-shadow: var(--shadow-popup, 0 4px 12px rgba(0, 0, 0, 0.15));
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm, 8px);
+  padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
+  /* Reserve the mark-all button's height so the header doesn't shrink
+     when everything is read and the button disappears */
+  min-height: calc(var(--bh-button-height-sm, 32px) + 2 * var(--spacing-md, 12px));
+}
+
+.panel-title {
+  font-family: var(--font-inter, inherit);
+  font-size: var(--text-md-size, 1rem);
+  font-weight: var(--weight-semibold, 600);
+  color: var(--color-text-primary, #101828);
+}
+
+.filters {
+  display: flex;
+  gap: var(--spacing-xs, 4px);
+  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
+  border-bottom: 1px solid var(--color-border-tertiary, #eaecf0);
+}
+
+.filter {
+  padding: var(--spacing-xs, 4px) var(--spacing-md, 12px);
+  font-family: var(--font-inter, inherit);
+  font-size: var(--text-sm-size, 0.875rem);
+  color: var(--color-text-secondary, #475467);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-md, 8px);
+  cursor: pointer;
+}
+.filter:hover {
+  background: var(--color-bg-secondary, #f9fafb);
+}
+.filter.active {
+  color: var(--color-text-primary, #101828);
+  font-weight: var(--weight-semibold, 600);
+  background: var(--color-bg-tertiary, #f2f4f7);
+}
+
+.feed {
+  overflow-y: auto;
+}
+
+.feed bh-feed-item {
+  display: block;
+  padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
+  cursor: pointer;
+}
+.feed bh-feed-item:hover {
+  background: var(--color-bg-secondary, #f9fafb);
+}
+.feed bh-feed-item.unread {
+  background: var(--color-brand-25, hsl(220, 82%, 98%));
+}
+.feed bh-feed-item.unread:hover {
+  background: var(--color-bg-secondary, #f9fafb);
+}
+
+.panel-inline {
+  position: static;
+  width: 100%;
+  max-height: none;
+  border: 1px solid var(--color-border-primary, #e4e7ec);
+  box-shadow: none;
+}
+
+.empty {
+  padding: var(--spacing-2xl, 32px) var(--spacing-lg, 16px);
+  font-family: var(--font-inter, inherit);
+  font-size: var(--text-sm-size, 0.875rem);
+  color: var(--color-text-secondary, #475467);
+  text-align: center;
+}