@actabldesign/bellhop-core 0.3.0 → 0.3.1

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

@@ -1,69 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-CTHvNfIu.js';
-import { B as BellhopI18n, r as resolveI18n } from './i18n-BNVOtH-1.js';
-import { c as createComponentLogger, r as reportComponentError } from './error-boundary-YLeLKAYJ.js';
-import { m as metrics, M as MetricNames } from './metrics-CSH9RXgl.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-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 = "bh-activity-feed";
-const BhActivityFeed = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.bhClose = createEvent(this, "bhClose");
-    }
-    logger = createComponentLogger(COMPONENT_NAME);
-    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 = "";
-    /** Accessible label for the close button. Allows i18n. */
-    closeAriaLabel = "Close";
-    /** Emitted when the close button is clicked */
-    bhClose;
-    componentDidCatch(error) {
-        this.logger.error("Component error caught", error instanceof Error ? error : new Error(String(error)));
-        metrics.increment(MetricNames.COMPONENT_ERROR, {
-            component: COMPONENT_NAME,
-            error_type: error instanceof Error ? error.name : "unknown",
-        });
-        reportComponentError(COMPONENT_NAME, error);
-    }
-    componentWillLoad() {
-        this.i18nUnsubscribe = BellhopI18n.onLocaleChange(() => {
-            this._i18nVersion++;
-        });
-    }
-    disconnectedCallback() {
-        this.i18nUnsubscribe?.();
-    }
-    handleClose = () => {
-        this.bhClose.emit();
-    };
-    renderHeader() {
-        if (!this.showHeader)
-            return null;
-        return (h("div", { class: "activity-feed-header", part: "header" }, h("div", { class: "activity-feed-header-content" }, this.headerIcon && (h("span", { class: "header-icon" }, h("bh-featured-icon", { color: "gray", icon: this.headerIcon, "icon-style": "outlined", size: "md" }))), this.heading && (h("h2", { class: "activity-feed-heading", part: "heading" }, this.heading)), h("slot", { name: "header-actions" })), h("bh-close-button", { ariaLabel: resolveI18n(COMPONENT_NAME, "closeAriaLabel", this.closeAriaLabel, "Close"), onClick: this.handleClose })));
-    }
-    render() {
-        const feedStyle = this.maxHeight ? { "max-height": this.maxHeight } : {};
-        return (h(Host, { key: '846268b616eeeda0ffafaa8e6c16f72eb682f114' }, h("div", { key: 'ac571040a2529dd7d744355cbfbdb86a73c3f5d4', class: {
-                "activity-feed": true,
-                [`activity-feed-${this.type}`]: true,
-                [`activity-feed-divider-${this.divider}`]: true,
-                "activity-feed-with-header": this.showHeader,
-            }, part: "container" }, this.renderHeader(), h("div", { key: 'a7e833554cd220e19e8d6591e772fa5ecd25997d', "aria-label": this.heading || "Activity feed", class: "activity-feed-list", part: "list", role: "feed", style: feedStyle }, h("slot", { key: '336a53cb4a65e3ea330aa60fbf527991a458410d' })))));
-    }
-};
-BhActivityFeed.style = bhActivityFeedCss();
-
-export { BhActivityFeed as bh_activity_feed };

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

@@ -1,80 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-CTHvNfIu.js';
-import { a as isActionKey } from './keyboard-helpers-Dg0_t7Yy.js';
-import { c as createComponentLogger, r as reportComponentError } from './error-boundary-YLeLKAYJ.js';
-import { m as metrics, M as MetricNames } from './metrics-CSH9RXgl.js';
-import './keyboard-constants-zdFuIabL.js';
-
-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-secondary);--bh-feed-item-timestamp-color:var(--color-text-tertiary);--bh-feed-item-text-color:var(--color-text-tertiary);--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-avatar-col-connector{align-self:stretch;padding-bottom:var(--spacing-xs)}.feed-item-avatar{flex-shrink:0}.feed-item-connector{flex:1;width:var(--bh-feed-item-connector-width);min-height:1px;background:var(--bh-feed-item-connector-color);border-radius:var(--spacing-xxs)}.feed-item-content{display:flex;flex-direction:column;flex:1;min-width:0;min-height:1px;gap:var(--spacing-lg)}.feed-item-content-with-connector{padding-bottom:var(--spacing-4xl)}.feed-item-content-no-supporting{gap:0}.feed-item-header{display:flex;flex-direction:column;gap:0;width:100%}.feed-item-meta{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.feed-item-author{font-size:var(--text-sm-size);font-weight:var(--weight-medium);line-height:var(--line-height-normal);color:var(--bh-feed-item-author-color);flex-shrink:0}.feed-item-timestamp{font-size:var(--text-xs-size);font-weight:var(--weight-regular);line-height:var(--text-xs-line);color:var(--bh-feed-item-timestamp-color);flex-shrink:0}.feed-item-text{font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--line-height-normal);color:var(--bh-feed-item-text-color);width:100%;word-wrap:break-word}.feed-item-supporting{width:100%}.feed-item-dot{flex-shrink:0;display:flex;align-items:flex-start;padding-top:var(--spacing-xs)}}@layer bh-variants{.feed-item-sm .feed-item-avatar ::slotted(*){width:var(--bh-avatar-size-sm);height:var(--bh-avatar-size-sm)}.feed-item-md .feed-item-avatar ::slotted(*){width:var(--bh-avatar-size-md);height:var(--bh-avatar-size-md)}.feed-item-supporting-text ::slotted(*){border:1px solid var(--bh-feed-item-bubble-border);border-radius:0 var(--spacing-md) var(--spacing-md) var(--spacing-md);padding:var(--spacing-lg);box-shadow:var(--bh-feed-item-bubble-shadow);font-size:var(--text-sm-size);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.feed-item-supporting-file ::slotted(*){display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);border:1px solid var(--color-border-secondary);border-radius:var(--radius-md);background:var(--color-bg-primary)}.feed-item-supporting-labels ::slotted(*){display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}}@layer bh-states{.feed-item{cursor:pointer}}`;
-
-const COMPONENT_NAME = "bh-feed-item";
-const BhFeedItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.bhClick = createEvent(this, "bhClick");
-    }
-    logger = createComponentLogger(COMPONENT_NAME);
-    /** Author name displayed in the feed item */
-    author = "";
-    /** Timestamp text (e.g. "2 mins ago") */
-    timestamp = "";
-    /**
-     * Plain text content fallback. For rich content with inline links
-     * (as shown in Figma), use the default slot instead:
-     * `<bh-feed-item><span>Invited <a href="#">Name</a></span></bh-feed-item>`
-     */
-    content = "";
-    /** Size variant */
-    size = "md";
-    /** Whether to show the vertical connector line */
-    showConnector = false;
-    /** Whether to show the new/unread status dot */
-    showDot = false;
-    /** Whether to show the subtext (timestamp) */
-    showSubtext = true;
-    /** Type of supporting content below the main text */
-    supportingContent = "none";
-    /** Emitted when the feed item is clicked */
-    bhClick;
-    componentDidCatch(error) {
-        this.logger.error("Component error caught", error instanceof Error ? error : new Error(String(error)));
-        metrics.increment(MetricNames.COMPONENT_ERROR, {
-            component: COMPONENT_NAME,
-            error_type: error instanceof Error ? error.name : "unknown",
-        });
-        reportComponentError(COMPONENT_NAME, error);
-    }
-    getInitials() {
-        return this.author
-            .split(" ")
-            .map((word) => word.charAt(0))
-            .join("")
-            .toUpperCase()
-            .slice(0, 2);
-    }
-    handleClick = () => {
-        this.bhClick.emit();
-    };
-    handleKeyDown = (event) => {
-        if (isActionKey(event)) {
-            event.preventDefault();
-            this.bhClick.emit();
-        }
-    };
-    render() {
-        const hasSupportingContent = this.supportingContent !== "none";
-        return (h(Host, { key: 'b90caf4c75fef1ab615bda094016c1fd5ba29812' }, h("div", { key: 'a535bafddd713398036ac9da7716ac6107dbe108', "aria-label": 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 }, h("div", { key: '1976f6ace3606b2ff37e0c9cdd929e4da5d70e50', class: {
-                "feed-item-avatar-col": true,
-                "feed-item-avatar-col-connector": this.showConnector,
-            }, part: "avatar-column" }, h("div", { key: '9c2f426c1e013160b469c39cf56fd1ee6db764dc', class: "feed-item-avatar", part: "avatar" }, h("slot", { key: '2f7ebfb7a3bc6a0a7610d3fd5cb83b98d36e6f03', name: "avatar" }, this.author && (h("bh-avatar", { key: '1770b66c67b2bad16d123ad11d2dc27266467e98', size: this.size === "sm" ? "sm" : "md", text: this.getInitials(), variant: "text" })))), this.showConnector && (h("div", { key: '812785ca1fb16f8ee63a75b0c75e72844a70180c', class: "feed-item-connector", part: "connector" }))), h("div", { key: '443b65ef58166c54bc89be79ae2bb30781c3b60b', class: {
-                "feed-item-content": true,
-                "feed-item-content-with-connector": this.showConnector && hasSupportingContent,
-                "feed-item-content-no-supporting": !hasSupportingContent,
-            }, part: "content" }, h("div", { key: '9e2e11e476998b8f719282a4b2caef8a55c26d58', class: "feed-item-header", part: "header" }, h("div", { key: '4736041fbc695e7bad409a845dbfb9477a0f4e30', class: "feed-item-meta", part: "meta" }, this.author && (h("span", { key: 'e1c05f59089e587acf500565080d5e5cc4f196d8', class: "feed-item-author", part: "author" }, this.author)), this.showSubtext && this.timestamp && (h("span", { key: '0fca6bc4d89e9db4591d4b16bcb525a95f7bbe48', class: "feed-item-timestamp", part: "timestamp" }, this.timestamp))), h("div", { key: '10ea3a4cc6e75c3c858b5b5b038f77aa0ead9449', class: "feed-item-text", part: "text" }, h("slot", { key: '9edc74ad9faa11e688c7be833641233b890aa390' }, this.content))), hasSupportingContent && (h("div", { key: '4cbec6bb4b7c90f0b96a256976c4369f15ef2221', class: `feed-item-supporting feed-item-supporting-${this.supportingContent}`, part: "supporting" }, h("slot", { key: 'cf86277a6fcf15912ea70caf7911b9b904504d87', name: "supporting" })))), this.showDot && (h("div", { key: '4bfe5337e93e2d169b8386f402a242ad84b1d8f2', class: "feed-item-dot", part: "dot" }, h("bh-badge-dot", { key: '1e475fc106766b70cb1cf83ec763fe16a10ba7d0', color: "success", size: this.size }))))));
-    }
-};
-BhFeedItem.style = bhFeedItemCss();
-
-export { BhFeedItem as bh_feed_item };