npm - @actabldesign/bellhop-core - Versions diffs - 0.0.8 → 0.1.0 - Mend

@actabldesign/bellhop-core 0.0.8 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (515) hide show

package/README.md CHANGED Viewed

@@ -1,15 +1,11 @@
 # @actabldesign/bellhop-core
-Bellhop Web Components Library built with StencilJS.
-## Overview
-This package provides framework-agnostic web components that can be used in any frontend application, including vanilla JavaScript, React, Angular, and Vue.
+Bellhop Web Components Library built with StencilJS. Framework-agnostic web components that can be used in any frontend application.
 ## Installation
 ```bash
-npm install @actabldesign/bellhop-core
+npm install @actabldesign/bellhop-core @actabldesign/bellhop-styles
 ```
 ## Usage
@@ -19,12 +15,19 @@ npm install @actabldesign/bellhop-core
 ```html
 <!DOCTYPE html>
 <html>
-<head>
-  <script type="module" src="node_modules/@actabldesign/bellhop-core/dist/bellhop-core/bellhop-core.esm.js"></script>
-</head>
-<body>
-  <bh-button label="Click Me" hierarchy="primary"></bh-button>
-</body>
+  <head>
+    <link
+      rel="stylesheet"
+      href="node_modules/@actabldesign/bellhop-styles/index.css"
+    />
+    <script
+      type="module"
+      src="node_modules/@actabldesign/bellhop-core/dist/bellhop-core/bellhop-core.esm.js"
+    ></script>
+  </head>
+  <body>
+    <bh-button label="Click Me" hierarchy="primary"></bh-button>
+  </body>
 </html>
 ```
@@ -60,13 +63,13 @@ import { defineCustomElements } from '@actabldesign/bellhop-core/loader';
 defineCustomElements();
 ```
-Add `CUSTOM_ELEMENTS_SCHEMA` to your module:
+Add `CUSTOM_ELEMENTS_SCHEMA` to your module or component:
 ```typescript
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 @NgModule({
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class AppModule {}
 ```
@@ -74,14 +77,192 @@ export class AppModule {}
 Use in templates:
 ```html
-<bh-button label="Click Me" hierarchy="primary" (bhClick)="handleClick($event)"></bh-button>
+<bh-button
+  label="Click Me"
+  hierarchy="primary"
+  (bhClick)="handleClick($event)"
+></bh-button>
 ```
 ## Available Components
-| Component | Tag | Description |
-|-----------|-----|-------------|
-| Button | `<bh-button>` | Versatile button with multiple variants |
+### Layout & Navigation
+| Component       | Tag                    | Description                    |
+| --------------- | ---------------------- | ------------------------------ |
+| Appbar          | `<bh-appbar>`          | Application header bar         |
+| Sidebar         | `<bh-sidebar>`         | Side navigation panel          |
+| Card            | `<bh-card>`            | Content container card         |
+| Card Header     | `<bh-card-header>`     | Card header section            |
+| Card Footer     | `<bh-card-footer>`     | Card footer section            |
+| Modal           | `<bh-modal>`           | Modal dialog                   |
+| Modal Header    | `<bh-modal-header>`    | Modal header section           |
+| Modal Actions   | `<bh-modal-actions>`   | Modal action buttons container |
+| Accordion       | `<bh-accordion>`       | Collapsible content sections   |
+| Accordion Item  | `<bh-accordion-item>`  | Individual accordion section   |
+| Tabs            | `<bh-tabs>`            | Tab navigation                 |
+| Tab Item        | `<bh-tab-item>`        | Individual tab                 |
+| Breadcrumbs     | `<bh-breadcrumbs>`     | Navigation breadcrumbs         |
+| Page Navigation | `<bh-page-navigation>` | In-page navigation             |
+| Pagination      | `<bh-pagination>`      | Page pagination controls       |
+### Form Inputs
+| Component          | Tag                       | Description                           |
+| ------------------ | ------------------------- | ------------------------------------- |
+| Button             | `<bh-button>`             | Primary button component              |
+| Button Icon        | `<bh-button-icon>`        | Icon-only button                      |
+| Input Text         | `<bh-input-text>`         | Text input field                      |
+| Input Password     | `<bh-input-password>`     | Password input with visibility toggle |
+| Input Number       | `<bh-input-number>`       | Numeric input field                   |
+| Input Autocomplete | `<bh-input-autocomplete>` | Autocomplete text input               |
+| Input Verification | `<bh-input-verification>` | Verification code input               |
+| Textarea           | `<bh-textarea>`           | Multi-line text input                 |
+| Checkbox           | `<bh-checkbox>`           | Checkbox input                        |
+| Checkbox Group     | `<bh-checkbox-group>`     | Group of checkboxes                   |
+| Radio Button       | `<bh-radio-button>`       | Radio button input                    |
+| Toggle             | `<bh-toggle>`             | Toggle switch                         |
+| Dropdown           | `<bh-dropdown>`           | Dropdown select                       |
+| Label              | `<bh-label>`              | Form field label                      |
+### Date & Time
+| Component         | Tag                      | Description           |
+| ----------------- | ------------------------ | --------------------- |
+| Date Picker       | `<bh-date-picker>`       | Single date selection |
+| Date Range Picker | `<bh-date-range-picker>` | Date range selection  |
+| Month Picker      | `<bh-month-picker>`      | Month selection       |
+### Data Display
+| Component      | Tag                   | Description                       |
+| -------------- | --------------------- | --------------------------------- |
+| Data Grid      | `<bh-data-grid>`      | Data table with sorting/filtering |
+| Badge          | `<bh-badge>`          | Status badge                      |
+| Badge Dot      | `<bh-badge-dot>`      | Dot indicator badge               |
+| Tag            | `<bh-tag>`            | Label tag                         |
+| Avatar         | `<bh-avatar>`         | User avatar                       |
+| Avatar Add     | `<bh-avatar-add>`     | Add avatar button                 |
+| Avatar Stacked | `<bh-avatar-stacked>` | Stacked avatar group              |
+| Tooltip        | `<bh-tooltip>`        | Tooltip on hover                  |
+| Popover        | `<bh-popover>`        | Popover content                   |
+### Charts
+| Component     | Tag                  | Description             |
+| ------------- | -------------------- | ----------------------- |
+| Bar Chart     | `<bh-bar-chart>`     | Bar chart visualization |
+| Pie Chart     | `<bh-pie-chart>`     | Pie chart visualization |
+| Trend Chart   | `<bh-trend-chart>`   | Trend line chart        |
+| Chart Tooltip | `<bh-chart-tooltip>` | Chart tooltip           |
+### Feedback & Status
+| Component       | Tag                    | Description              |
+| --------------- | ---------------------- | ------------------------ |
+| Notification    | `<bh-notification>`    | Toast notification       |
+| Loader Spinner  | `<bh-loader-spinner>`  | Loading spinner          |
+| Empty State     | `<bh-empty-state>`     | Empty state placeholder  |
+| Skeleton Loader | `<bh-skeleton-loader>` | Content loading skeleton |
+### Branding & Media
+| Component         | Tag                      | Description                 |
+| ----------------- | ------------------------ | --------------------------- |
+| Featured Icon     | `<bh-featured-icon>`     | Highlighted icon display    |
+| Logo Box          | `<bh-logo-box>`          | Logo container              |
+| Illustrations     | `<bh-illustrations>`     | SVG illustration display    |
+| Product Switcher  | `<bh-product-switcher>`  | Product navigation switcher |
+| Property Switcher | `<bh-property-switcher>` | Property selection          |
+## Component Naming Convention
+All components use the `bh-` prefix to avoid conflicts with other libraries.
+## Styling
+Components require the `@actabldesign/bellhop-styles` package for proper styling:
+```css
+@import '@actabldesign/bellhop-styles';
+```
+### Shadow DOM Styling
+Bellhop components use Shadow DOM for style encapsulation. To customize component styles:
+1. **CSS Custom Properties** - Override design tokens that pierce the shadow boundary:
+   ```css
+   :root {
+     --color-primary-500: #4f46e5;
+   }
+   ```
+2. **::part() Selector** - Style exposed internal elements:
+   ```css
+   bh-button::part(button) {
+     border-radius: 9999px;
+   }
+   ```
+3. **Component Props** - Use props like `hierarchy`, `size`, `variant` for standard variations.
+See the Storybook documentation for a complete guide on Shadow DOM styling and available CSS parts.
+## TypeScript Support
+### React Projects (with React Wrappers)
+If you use `@actabldesign/bellhop-react`, TypeScript support is built in — all wrapper components have typed props and events. No additional setup needed.
+### React Projects (with Raw Web Components)
+If you use raw `<bh-*>` web component tags directly in React JSX, add the type declarations to get TypeScript support:
+**Option 1 — tsconfig.json (recommended):**
+```json
+{
+  "compilerOptions": {
+    "types": ["@actabldesign/bellhop-core/react"]
+  }
+}
+```
+**Option 2 — Triple-slash directive** in a `.d.ts` file:
+```ts
+/// <reference types="@actabldesign/bellhop-core/react" />
+```
+This augments `JSX.IntrinsicElements` with typed attributes for all `<bh-*>` elements, including `bh-button`, `bh-data-grid`, `bh-sidebar`, and others.
+### Component Type Definitions
+The auto-generated `components.d.ts` provides full type definitions for all component elements, props, and events. These are included in the package and available for import:
+```ts
+import type { Components, Events } from '@actabldesign/bellhop-core';
+```
+## Data Grid Custom Cells
+The `bh-data-grid` component uses TanStack Table. Custom cell rendering requires Stencil's `h()` function, not HTML strings:
+```tsx
+import { h } from '@stencil/core';
+const columns = [
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: (info) => h('bh-badge', {
+      label: info.getValue(),
+      variant: info.getValue() === 'Active' ? 'success' : 'neutral'
+    })
+  }
+];
+```
+See the Storybook documentation for more cell rendering patterns.
 ## Development
@@ -94,23 +275,18 @@ npm run test
 # Start dev server
 npm run start
-```
-## Component Naming Convention
+# Generate new component
+npm run generate
+```
-All components use the `bh-` prefix to avoid conflicts with other libraries:
-- `<bh-button>` - Button component
-- `<bh-input-text>` - Text input (coming soon)
-- `<bh-badge>` - Badge component (coming soon)
+## Related Packages
-## Design Tokens
+- `@actabldesign/bellhop-react` - React component wrappers
+- `@actabldesign/bellhop-angular` - Angular component wrappers
+- `@actabldesign/bellhop-styles` - CSS styles and design tokens
+- `@actabldesign/bellhop-assets` - SVG icons, illustrations, logos
-The components use CSS custom properties for theming. Import the global styles or define your own variables:
+## License
-```css
-:root {
-  --color-brand-600: #4338ca;
-  --color-neutral-600: #475569;
-  /* ... other tokens */
-}
-```
+MIT

package/components/bh-accordion-item.js CHANGED Viewed

@@ -72,7 +72,7 @@ const BhAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class BhAccordionItem
             'accordion-item-animating': this.isAnimating,
         };
         const iconName = this.expanded ? 'expand_less' : 'expand_more';
-        return (h(Host, { key: '0c2f1ecc9d3eb6f6826811e6d3a5597cb024f76b', class: hostClasses }, h("div", { key: '07eac8349ec20a34b56fa216eb0111ccc9b29cb1', class: "accordion-header", part: "header", role: "button", tabindex: this.disabled ? -1 : 0, "aria-expanded": this.expanded ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-controls": `content-${this.value}`, onClick: this.handleHeaderClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'bba216c5755b48a8f6e41aa7eea3d9a8deb11015', class: "accordion-header-content" }, h("span", { key: '8e6bdb61f7c1f29ed59ef6febca2834ef19c4036', class: "accordion-title", part: "title" }, this.header)), h("span", { key: '41d856e6da6cd64634c67de168f548f4307964e3', class: "accordion-icon material-symbols-outlined", part: "icon" }, iconName)), h("div", { key: 'cd9767f9ab78dd18d2c2e8a93b757a287e02c2d2', id: `content-${this.value}`, class: "accordion-content", part: "content", role: "region", "aria-labelledby": `header-${this.value}`, "aria-hidden": !this.expanded ? 'true' : 'false' }, h("div", { key: '32dbf5b959a5ebd0484344e1070af8e9dbab98ed', class: "accordion-content-inner" }, h("slot", { key: 'cf338a1116f4c2926eba447ca40ae0308f91529e' })))));
+        return (h(Host, { key: 'f842ac74a60bbaebc9c6d8a1c847b8a5dc2611de', class: hostClasses }, h("div", { key: '92262b9e3fec2035888b1bc761f1b0df08a50714', class: "accordion-header", part: "header", role: "button", tabindex: this.disabled ? -1 : 0, "aria-expanded": this.expanded ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-controls": `content-${this.value}`, onClick: this.handleHeaderClick, onKeyDown: this.handleKeyDown }, h("div", { key: '2f2a94ab802a808f74201feb321e2cd3ea509ea7', class: "accordion-header-content" }, h("span", { key: '7af3dc170f4249ac8d968482c9cb66bab5d9a68e', class: "accordion-title", part: "title" }, this.header)), h("span", { key: '75be6a39b8fa1a64316e3853ddfbc0dd6030a4b0', class: "accordion-icon material-symbols-outlined", part: "icon" }, iconName)), h("div", { key: '7449ddf43d5921bddf50e4798934002003e8a3d7', id: `content-${this.value}`, class: "accordion-content", part: "content", role: "region", "aria-labelledby": `header-${this.value}`, "aria-hidden": !this.expanded ? 'true' : 'false' }, h("div", { key: 'd5451eea049596360358354bbe3df957e40c1df4', class: "accordion-content-inner" }, h("slot", { key: 'a09a01d6f299fb52ff7c2c28bf72fcf286b31a97' })))));
     }
     static get watchers() { return {
         "expanded": ["handleExpandedChange"]

package/components/bh-appbar.js CHANGED Viewed

@@ -23,7 +23,11 @@ const BhAppbar$1 = /*@__PURE__*/ proxyCustomElement(class BhAppbar extends H {
      */
     isMenuOpen = false;
     /**
-     * Logo source URL
+     * Logo image source URL
+     */
+    logoImageSrc;
+    /**
+     * @deprecated Use `logoImageSrc` instead. Will be removed in next major version.
      */
     logoSrc;
     /**
@@ -61,6 +65,14 @@ const BhAppbar$1 = /*@__PURE__*/ proxyCustomElement(class BhAppbar extends H {
      * Event emitted when settings icon is clicked
      */
     bhSettingsClick;
+    componentWillLoad() {
+        if (this.logoSrc !== undefined && this.logoImageSrc === undefined) {
+            console.warn('[bh-appbar] The "logoSrc" prop is deprecated. Use "logoImageSrc" instead.');
+        }
+    }
+    getLogoImageSrc() {
+        return this.logoImageSrc ?? this.logoSrc;
+    }
     handleMenuToggle = () => {
         this.bhMenuToggle.emit();
     };
@@ -79,11 +91,12 @@ const BhAppbar$1 = /*@__PURE__*/ proxyCustomElement(class BhAppbar extends H {
         this.bhSettingsClick.emit();
     };
     render() {
-        return (h(Host, { key: 'ae8a4a515b6384418dc4a73297d049d052b311f2' }, h("header", { key: '999bad1f106bf9a4fe8107894a55b3b1f683dd84', class: "appbar" }, h("div", { key: 'a5ff9a5e8d90adbf67ad2782eaf5e6ca43702bd4', class: "left-section" }, h("bh-button-icon", { key: '7c25230ad01e084e3ffa43bb3ce037fe9d90724b', hierarchy: "quaternary", size: "sm", iconName: this.isMenuOpen ? 'menu_open' : 'last_page', onClick: this.handleMenuToggle }), this.logoSrc && (h("div", { key: 'dd1630e2a2ff83874a9989fec6c5966d74f6a374', class: "logo" }, h("img", { key: '0971c0630bf69f35db53b36af4c5fc5c38518f56', src: this.logoSrc, alt: this.logoAlt, class: "logo-image" }))), h("slot", { key: '6b42819c05444a2a32522983a18a4526d6ad5753', name: "property-switcher" }), h("bh-breadcrumbs", { key: 'b63deedb1242f22179056f539baff4c118c43ca7', items: this.breadcrumbItems, showHome: true, onBhItemClick: (e) => this.handleBreadcrumbClick(e.detail) })), h("div", { key: '792c8be8095c8a41fbbd57e939bc7a3c8e00dee5', class: "right-section" }, h("div", { key: '3e30fbfaf6989ddea20e90e6e225462bbd5f341d', class: "icon-button-wrapper" }, h("bh-button-icon", { key: '4c91cff44cafe0595adb1dd482e3e6deb62176d0', hierarchy: "quaternary", size: "sm", iconName: "calendar_today", onClick: this.handleCalendarClick }), h("bh-badge-dot", { key: 'a6a0d51fdc1306b3a0006a0dd59a4f8c44445c7d', size: "sm", color: "success", outline: true, class: "icon-badge-dot" })), h("div", { key: 'f6ea9f12906da34315ad1d075fad964473b1bf0b', class: "icon-button-wrapper" }, h("bh-button-icon", { key: 'f35e426048468766bf5c1f314b713b710b095a53', hierarchy: "quaternary", size: "sm", iconName: "settings", onClick: this.handleSettingsClick }), h("bh-badge-dot", { key: 'f94d20164a8a8b21ac09456e824d83b2667efb66', size: "sm", color: "blue", outline: true, class: "icon-badge-dot" })), h("div", { key: 'b92beef52a5fb8d9a20ddf0d65e1de350af7cf14', class: "icon-button-wrapper" }, h("bh-button-icon", { key: '55f3c7485ac9c8aa5ba83fb699c1716cca91e7ae', hierarchy: "quaternary", size: "sm", iconName: "notifications", onClick: this.handleNotificationClick }), this.notificationCount > 0 && (h("bh-badge-dot", { key: 'a7fd28338df24721fd1bf2b6b045631cf86093f0', size: "sm", color: "error", outline: true, class: "icon-badge-dot" })))))));
+        return (h(Host, { key: '59c2e43b32db31d329452c9ae6592cfb43558a63' }, h("header", { key: 'd552d22a42f9a8edd5efd68bed9561fd9b920cbc', class: "appbar" }, h("div", { key: '64e2fa2d702bba943f65952e16eb89cbbfb11d29', class: "left-section" }, h("bh-button-icon", { key: '9bd7662e44d268f7e6c41007a51d4871042815a9', hierarchy: "quaternary", size: "sm", iconName: this.isMenuOpen ? 'menu_open' : 'last_page', onClick: this.handleMenuToggle }), this.getLogoImageSrc() && (h("div", { key: 'a892e7ba34522afad173f9bdd805617efec2d370', class: "logo" }, h("img", { key: '5cad324dacd7fde6afccb96ac994b7295a33f1e3', src: this.getLogoImageSrc(), alt: this.logoAlt, class: "logo-image" }))), h("slot", { key: '0ce18ceb001609dcc979ef382e3a296a70fa7301', name: "property-switcher" }), h("bh-breadcrumbs", { key: '4e9b649ca7f9a72aa7833b6cf3a3b526ead6eee7', items: this.breadcrumbItems, showHome: true, onBhItemClick: (e) => this.handleBreadcrumbClick(e.detail) })), h("div", { key: '744dc5067f63b6a611b5835fa575dc74b24f81a8', class: "right-section" }, h("div", { key: 'e4c09aa97f3228111fbf580b40bf8460fb3a7e99', class: "icon-button-wrapper" }, h("bh-button-icon", { key: 'fc6e551f860cbcc77e829fa05a79b064944f99f7', hierarchy: "quaternary", size: "sm", iconName: "calendar_today", onClick: this.handleCalendarClick }), h("bh-badge-dot", { key: 'b256e00e5d045520b5a3c5dad573e2507a3d2e82', size: "sm", color: "success", outline: true, class: "icon-badge-dot" })), h("div", { key: 'f97a0d90b55fbb1b1e90631b8a686e8b8e6f0c83', class: "icon-button-wrapper" }, h("bh-button-icon", { key: '980fda158489e760617a3ca0ee914f2f9c58501a', hierarchy: "quaternary", size: "sm", iconName: "settings", onClick: this.handleSettingsClick }), h("bh-badge-dot", { key: '165e94ed6f9797dfcab4b6109cc45b952721dc04', size: "sm", color: "blue", outline: true, class: "icon-badge-dot" })), h("div", { key: 'a0e72c4de2ee75ea7325aa89f69b95b94c883d1f', class: "icon-button-wrapper" }, h("bh-button-icon", { key: '8318913dd634e5ca09620de93ac1511a60a9b832', hierarchy: "quaternary", size: "sm", iconName: "notifications", onClick: this.handleNotificationClick }), this.notificationCount > 0 && (h("bh-badge-dot", { key: '72e7ca20522ae687f9140fbf17a9ff6beaa77a4d', size: "sm", color: "error", outline: true, class: "icon-badge-dot" })))))));
     }
     static get style() { return bhAppbarCss; }
 }, [769, "bh-appbar", {
         "isMenuOpen": [4, "is-menu-open"],
+        "logoImageSrc": [1, "logo-image-src"],
         "logoSrc": [1, "logo-src"],
         "logoAlt": [1, "logo-alt"],
         "breadcrumbItems": [16],

package/components/bh-appbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bh-appbar.js","mappings":"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","names":["BhAppbar","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-appbar/bh-appbar.css?tag=bh-appbar&encapsulation=shadow","src/components/bh-appbar/bh-appbar.tsx"],"sourcesContent":[".appbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 56px;\n padding: 0 var(--spacing-sm);\n background-color: var(--color-white);\n border-bottom: 1px solid var(--color-neutral-200);\n font-family: var(--font-inter);\n position: sticky;\n top: 0;\n z-index: 1000;\n box-sizing: border-box;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n}\n\n/* Left Section /\n.left-section {\n display: flex;\n align-items: center;\n gap: var(--spacing-xl);\n flex-shrink: 0;\n}\n\n.logo {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--spacing-4xl);\n height: var(--spacing-4xl);\n color: var(--color-brand-500);\n}\n\n.logo-image {\n width: 36px;\n height: 36px;\n object-fit: contain;\n}\n\n/ Right Section /\n.right-section {\n display: flex;\n align-items: center;\n gap: var(--spacing-md);\n flex-shrink: 0;\n}\n\n.icon-button-wrapper {\n position: relative;\n}\n\n.icon-badge-dot {\n position: absolute;\n top: -8px;\n right: 2px;\n}\n\n/ Responsive Design /\n@media (max-width: 768px) {\n .appbar {\n padding: 0 16px;\n }\n\n .left-section {\n gap: 12px;\n }\n}\n\n@media (max-width: 480px) {\n .appbar {\n padding: 0 12px;\n }\n\n .right-section {\n gap: 4px;\n }\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport interface BreadcrumbItem {\n label: string;\n path?: string;\n isActive?: boolean;\n}\n\n@Component({\n tag: 'bh-appbar',\n styleUrl: 'bh-appbar.css',\n shadow: true,\n})\nexport class BhAppbar {\n /\n Whether the menu is open\n /\n @Prop() isMenuOpen: boolean = false;\n\n /\n Logo source URL\n /\n @Prop() logoSrc?: string;\n\n /\n Logo alt text\n /\n @Prop() logoAlt: string = 'Solstice';\n\n /\n Breadcrumb items\n /\n @Prop() breadcrumbItems: BreadcrumbItem[] = [\n { label: 'Dashboard', path: '/dashboard' },\n { label: 'Dashboards', isActive: true },\n ];\n\n /\n Notification count\n /\n @Prop() notificationCount: number = 0;\n\n /\n Event emitted when menu toggle is clicked\n /\n @Event() bhMenuToggle!: EventEmitter<void>;\n\n /\n Event emitted when a breadcrumb is clicked\n /\n @Event() bhBreadcrumbClick!: EventEmitter<BreadcrumbItem>;\n\n /\n Event emitted when notification icon is clicked\n /\n @Event() bhNotificationClick!: EventEmitter<void>;\n\n /\n Event emitted when calendar icon is clicked\n /\n @Event() bhCalendarClick!: EventEmitter<void>;\n\n /\n Event emitted when settings icon is clicked\n /\n @Event() bhSettingsClick!: EventEmitter<void>;\n\n private handleMenuToggle = () => {\n this.bhMenuToggle.emit();\n };\n\n private handleBreadcrumbClick = (item: BreadcrumbItem) => {\n if (item.path && !item.isActive) {\n this.bhBreadcrumbClick.emit(item);\n }\n };\n\n private handleNotificationClick = () => {\n this.bhNotificationClick.emit();\n };\n\n private handleCalendarClick = () => {\n this.bhCalendarClick.emit();\n };\n\n private handleSettingsClick = () => {\n this.bhSettingsClick.emit();\n };\n\n render() {\n return (\n <Host>\n <header class=\"appbar\">\n {/ Left Section /}\n <div class=\"left-section\">\n {/ Menu Toggle /}\n <bh-button-icon\n hierarchy=\"quaternary\"\n size=\"sm\"\n iconName={this.isMenuOpen ? 'menu_open' : 'last_page'}\n onClick={this.handleMenuToggle}\n ></bh-button-icon>\n\n {/ Logo /}\n {this.logoSrc && (\n <div class=\"logo\">\n <img src={this.logoSrc} alt={this.logoAlt} class=\"logo-image\" />\n </div>\n )}\n\n {/ Property Switcher Slot /}\n <slot name=\"property-switcher\"></slot>\n\n {/ Breadcrumbs /}\n <bh-breadcrumbs\n items={this.breadcrumbItems}\n showHome={true}\n onBhItemClick={(e) => this.handleBreadcrumbClick(e.detail)}\n ></bh-breadcrumbs>\n </div>\n\n {/ Right Section /}\n <div class=\"right-section\">\n {/ Calendar Icon /}\n <div class=\"icon-button-wrapper\">\n <bh-button-icon\n hierarchy=\"quaternary\"\n size=\"sm\"\n iconName=\"calendar_today\"\n onClick={this.handleCalendarClick}\n ></bh-button-icon>\n <bh-badge-dot\n size=\"sm\"\n color=\"success\"\n outline={true}\n class=\"icon-badge-dot\"\n ></bh-badge-dot>\n </div>\n\n {/ Settings Icon /}\n <div class=\"icon-button-wrapper\">\n <bh-button-icon\n hierarchy=\"quaternary\"\n size=\"sm\"\n iconName=\"settings\"\n onClick={this.handleSettingsClick}\n ></bh-button-icon>\n <bh-badge-dot\n size=\"sm\"\n color=\"blue\"\n outline={true}\n class=\"icon-badge-dot\"\n ></bh-badge-dot>\n </div>\n\n {/ Notifications */}\n <div class=\"icon-button-wrapper\">\n <bh-button-icon\n hierarchy=\"quaternary\"\n size=\"sm\"\n iconName=\"notifications\"\n onClick={this.handleNotificationClick}\n ></bh-button-icon>\n {this.notificationCount > 0 && (\n <bh-badge-dot\n size=\"sm\"\n color=\"error\"\n outline={true}\n class=\"icon-badge-dot\"\n ></bh-badge-dot>\n )}\n </div>\n </div>\n </header>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bh-appbar.js","mappings":"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","names":["BhAppbar","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-appbar/bh-appbar.css?tag=bh-appbar&encapsulation=shadow","src/components/bh-appbar/bh-appbar.tsx"],"sourcesContent":[".appbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 56px;\n padding: 0 var(--spacing-sm);\n background-color: var(--color-white);\n border-bottom: 1px solid var(--color-neutral-200);\n font-family: var(--font-inter);\n position: sticky;\n top: 0;\n z-index: 1000;\n box-sizing: border-box;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n}\n\n/* Left Section /\n.left-section {\n display: flex;\n align-items: center;\n gap: var(--spacing-xl);\n flex-shrink: 0;\n}\n\n.logo {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--spacing-4xl);\n height: var(--spacing-4xl);\n color: var(--color-brand-500);\n}\n\n.logo-image {\n width: 36px;\n height: 36px;\n object-fit: contain;\n}\n\n/ Right Section /\n.right-section {\n display: flex;\n align-items: center;\n gap: var(--spacing-md);\n flex-shrink: 0;\n}\n\n.icon-button-wrapper {\n position: relative;\n}\n\n.icon-badge-dot {\n position: absolute;\n top: -8px;\n right: 2px;\n}\n\n/ Responsive Design /\n@media (max-width: 768px) {\n .appbar {\n padding: 0 16px;\n }\n\n .left-section {\n gap: 12px;\n }\n}\n\n@media (max-width: 480px) {\n .appbar {\n padding: 0 12px;\n }\n\n .right-section {\n gap: 4px;\n }\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport interface BreadcrumbItem {\n label: string;\n path?: string;\n isActive?: boolean;\n}\n\n@Component({\n tag: 'bh-appbar',\n styleUrl: 'bh-appbar.css',\n shadow: true,\n})\nexport class BhAppbar {\n /\n Whether the menu is open\n /\n @Prop() isMenuOpen: boolean = false;\n\n /\n Logo image source URL\n /\n @Prop() logoImageSrc?: string;\n\n /\n @deprecated Use `logoImageSrc` instead. Will be removed in next major version.\n /\n @Prop() logoSrc?: string;\n\n /\n Logo alt text\n /\n @Prop() logoAlt: string = 'Solstice';\n\n /\n Breadcrumb items\n /\n @Prop() breadcrumbItems: BreadcrumbItem[] = [\n { label: 'Dashboard', path: '/dashboard' },\n { label: 'Dashboards', isActive: true },\n ];\n\n /\n Notification count\n /\n @Prop() notificationCount: number = 0;\n\n /\n Event emitted when menu toggle is clicked\n /\n @Event() bhMenuToggle!: EventEmitter<void>;\n\n /\n Event emitted when a breadcrumb is clicked\n /\n @Event() bhBreadcrumbClick!: EventEmitter<BreadcrumbItem>;\n\n /\n Event emitted when notification icon is clicked\n /\n @Event() bhNotificationClick!: EventEmitter<void>;\n\n /\n Event emitted when calendar icon is clicked\n /\n @Event() bhCalendarClick!: EventEmitter<void>;\n\n /\n Event emitted when settings icon is clicked\n /\n @Event() bhSettingsClick!: EventEmitter<void>;\n\n componentWillLoad() {\n if (this.logoSrc !== undefined && this.logoImageSrc === undefined) {\n console.warn(\n '[bh-appbar] The \"logoSrc\" prop is deprecated. Use \"logoImageSrc\" instead.'\n );\n }\n }\n\n private getLogoImageSrc(): string \| undefined {\n return this.logoImageSrc ?? this.logoSrc;\n }\n\n private handleMenuToggle = () => {\n this.bhMenuToggle.emit();\n };\n\n private handleBreadcrumbClick = (item: BreadcrumbItem) => {\n if (item.path && !item.isActive) {\n this.bhBreadcrumbClick.emit(item);\n }\n };\n\n private handleNotificationClick = () => {\n this.bhNotificationClick.emit();\n };\n\n private handleCalendarClick = () => {\n this.bhCalendarClick.emit();\n };\n\n private handleSettingsClick = () => {\n this.bhSettingsClick.emit();\n };\n\n render() {\n return (\n <Host>\n <header class=\"appbar\">\n {/ Left Section /}\n <div class=\"left-section\">\n {/ Menu Toggle /}\n <bh-button-icon\n hierarchy=\"quaternary\"\n size=\"sm\"\n iconName={this.isMenuOpen ? 'menu_open' : 'last_page'}\n onClick={this.handleMenuToggle}\n ></bh-button-icon>\n\n {/ Logo /}\n {this.getLogoImageSrc() && (\n <div class=\"logo\">\n <img\n src={this.getLogoImageSrc()}\n alt={this.logoAlt}\n class=\"logo-image\"\n />\n </div>\n )}\n\n {/ Property Switcher Slot /}\n <slot name=\"property-switcher\"></slot>\n\n {/ Breadcrumbs /}\n <bh-breadcrumbs\n items={this.breadcrumbItems}\n showHome={true}\n onBhItemClick={(e) => this.handleBreadcrumbClick(e.detail)}\n ></bh-breadcrumbs>\n </div>\n\n {/ Right Section /}\n <div class=\"right-section\">\n {/ Calendar Icon /}\n <div class=\"icon-button-wrapper\">\n <bh-button-icon\n hierarchy=\"quaternary\"\n size=\"sm\"\n iconName=\"calendar_today\"\n onClick={this.handleCalendarClick}\n ></bh-button-icon>\n <bh-badge-dot\n size=\"sm\"\n color=\"success\"\n outline={true}\n class=\"icon-badge-dot\"\n ></bh-badge-dot>\n </div>\n\n {/ Settings Icon /}\n <div class=\"icon-button-wrapper\">\n <bh-button-icon\n hierarchy=\"quaternary\"\n size=\"sm\"\n iconName=\"settings\"\n onClick={this.handleSettingsClick}\n ></bh-button-icon>\n <bh-badge-dot\n size=\"sm\"\n color=\"blue\"\n outline={true}\n class=\"icon-badge-dot\"\n ></bh-badge-dot>\n </div>\n\n {/ Notifications */}\n <div class=\"icon-button-wrapper\">\n <bh-button-icon\n hierarchy=\"quaternary\"\n size=\"sm\"\n iconName=\"notifications\"\n onClick={this.handleNotificationClick}\n ></bh-button-icon>\n {this.notificationCount > 0 && (\n <bh-badge-dot\n size=\"sm\"\n color=\"error\"\n outline={true}\n class=\"icon-badge-dot\"\n ></bh-badge-dot>\n )}\n </div>\n </div>\n </header>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/bh-avatar-add.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { B as BhAvatarAdd$1, d as defineCustomElement$1 } from './p-B0vRPcr5.js';
+import { B as BhAvatarAdd$1, d as defineCustomElement$1 } from './p-D8L5XpBP.js';
 const BhAvatarAdd = BhAvatarAdd$1;
 const defineCustomElement = defineCustomElement$1;

package/components/bh-avatar-stacked.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h } from './p-BsHlTsAN.js';
-import { d as defineCustomElement$4 } from './p-CMoGgYqw.js';
-import { d as defineCustomElement$3 } from './p-B0vRPcr5.js';
-import { d as defineCustomElement$2 } from './p-BSok41i-.js';
+import { d as defineCustomElement$4 } from './p-DmELCHDa.js';
+import { d as defineCustomElement$3 } from './p-D8L5XpBP.js';
+import { d as defineCustomElement$2 } from './p-oyeucMe6.js';
 const bhAvatarStackedCss = ":host{display:inline-block;font-family:var(\n    --font-inter,\n    'Inter',\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif\n  )}.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(--color-white, #ffffff);border-radius:50%}";

package/components/bh-avatar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { B as BhAvatar$1, d as defineCustomElement$1 } from './p-CMoGgYqw.js';
+import { B as BhAvatar$1, d as defineCustomElement$1 } from './p-DmELCHDa.js';
 const BhAvatar = BhAvatar$1;
 const defineCustomElement = defineCustomElement$1;

package/components/bh-button.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { B as BhButton$1, d as defineCustomElement$1 } from './p-B02xFf1P.js';
+import { B as BhButton$1, d as defineCustomElement$1 } from './p-CiEBtN9j.js';
 const BhButton = BhButton$1;
 const defineCustomElement = defineCustomElement$1;

package/components/bh-card-header.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BsHlTsAN.js';
 import { d as defineCustomElement$4 } from './p-DO_g_QMm.js';
 import { d as defineCustomElement$3 } from './p-BajBGXic.js';
-import { d as defineCustomElement$2 } from './p-h6juyPoa.js';
+import { d as defineCustomElement$2 } from './p-D95hFU89.js';
 const bhCardHeaderCss = ":host{display:block}.card-header{display:flex;flex-direction:column;gap:var(--spacing-lg);background:var(--color-white)}.card-header-content{display:flex;gap:var(--spacing-md);align-items:flex-start;padding:var(--spacing-lg) var(--spacing-xl) 0 var(--spacing-xl)}.card-header-text-container{display:flex;flex-direction:column;flex:1 0 0;gap:var(--spacing-xxs);min-width:0}.card-header-title-row{display:flex;align-items:center;gap:var(--spacing-lg)}.card-header-title{font-family:var(--font-inter);font-size:var(--text-md-size);font-weight:var(--weight-semibold);line-height:var(--text-md-line);color:var(--color-neutral-900)}.card-header-supporting-row{display:flex;align-items:center;gap:var(--spacing-lg);width:100%}.card-header-spacer{width:32px;flex-shrink:0}.card-header-supporting-text{flex:1 0 0;font-family:var(--font-inter);font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-header-divider{height:1px;background:var(--color-neutral-200)}";

package/components/bh-card.js CHANGED Viewed

@@ -41,7 +41,7 @@ const BhCard$1 = /*@__PURE__*/ proxyCustomElement(class BhCard extends H {
         const contentStyle = {
             minHeight: `${this.contentMinHeight}px`,
         };
-        return (h(Host, { key: '2f01aa3ee4b9cdeb1d5f0f16a961af880e11d0fb' }, h("div", { key: '4f4542a1f24dc9db216fef1e361efff54cb5f538', class: "card" }, this.showHeader && (h("div", { key: 'c290615fb8b36c965ac6a032963f2b4e78c22a29', class: "card-header-slot" }, h("slot", { key: '35d78f934a0a8486a62ff17897537cc0afd355a7', name: "header" }))), h("div", { key: 'bfd8a8827ea13baad0862ed5d962853ceed4be4e', class: "card-content", style: contentStyle }, h("slot", { key: 'b43aad6dfb675e4fd32f9614ba83f67aac264aa0' }), !this.hasContent && (h("div", { key: 'a9cf30bb2b1a9a0ab4baf6fa9d8514181f1e79c5', class: "card-content-placeholder" }, h("span", { key: '7d46bf5c2246cd8d9bd2d73695d9b55a1ba6112c', class: "card-placeholder-text" }, this.placeholderText)))), this.showFooter && (h("div", { key: '5588ba1dcc017c899909917f31961414dc4ffd9e', class: "card-footer-slot" }, h("slot", { key: 'ff28528d0090a67061fc7cd63f7df68662d908a8', name: "footer" }))))));
+        return (h(Host, { key: '31c722ab510a95909c875f389116ff547f3fb119' }, h("div", { key: 'b5390ca668bd29974154f7b0b831a4ce98b45394', class: "card" }, this.showHeader && (h("div", { key: 'df7f16b333cb5b8f651175c6c8299b35b90e16f2', class: "card-header-slot" }, h("slot", { key: '978b518b1ae6087bcb96846aa5c802524748bd14', name: "header" }))), h("div", { key: '7a1b7437e801d9b547d7bcd45639baf0774c34d7', class: "card-content", style: contentStyle }, h("slot", { key: '6c22feff58b21f0aec25c6f547d1443bf1f88f9d' }), !this.hasContent && (h("div", { key: '4b42011a00526f859a967a07fefd028cf9903f41', class: "card-content-placeholder" }, h("span", { key: '25fc157be159aae504164dd4dcb0faa9df632756', class: "card-placeholder-text" }, this.placeholderText)))), this.showFooter && (h("div", { key: '115e111772a1446b874e6f02f025fde54becd0a3', class: "card-footer-slot" }, h("slot", { key: '2cd029465310d2db438a684a3f6009e234b14c1b', name: "footer" }))))));
     }
     static get style() { return bhCardCss; }
 }, [769, "bh-card", {

package/components/bh-checkbox-group-item.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BsHlTsAN.js';
-import { d as defineCustomElement$6 } from './p-D0Ba0gOA.js';
-import { d as defineCustomElement$5 } from './p-h6juyPoa.js';
-import { d as defineCustomElement$4 } from './p-Df8KgHhe.js';
-import { d as defineCustomElement$3 } from './p-Cmo_S3fO.js';
-import { d as defineCustomElement$2 } from './p-BSok41i-.js';
+import { d as defineCustomElement$6 } from './p-BqYBdZ7I.js';
+import { d as defineCustomElement$5 } from './p-D95hFU89.js';
+import { d as defineCustomElement$4 } from './p-BrIid8rr.js';
+import { d as defineCustomElement$3 } from './p-CiZSLZTA.js';
+import { d as defineCustomElement$2 } from './p-oyeucMe6.js';
 const bhCheckboxGroupItemCss = ":host{display:block}.checkbox-group-item{display:flex;align-items:flex-start;background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-xl);cursor:pointer;transition:all 0.2s ease;box-sizing:border-box;font-family:var(--font-inter);outline:none}.checkbox-group-item-sm{padding:var(--spacing-xl);gap:var(--spacing-md)}.checkbox-group-item-md{padding:var(--spacing-xl) var(--spacing-2xl);gap:var(--spacing-lg)}.checkbox-group-item-icon-simple{gap:var(--spacing-lg)}.checkbox-group-item-active{border-color:var(--color-brand-600);box-shadow:inset 0 0 0 1px var(--color-brand-600);background:var(--color-brand-50)}.checkbox-group-item-hovered:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active){background:var(--color-neutral-50);border-color:var(--color-neutral-300)}.checkbox-group-item-focused:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active){box-shadow:0px 0px 0px 4px var(--color-brand-100)}.checkbox-group-item-focused.checkbox-group-item-active:not(.checkbox-group-item-disabled){box-shadow:inset 0 0 0 1px var(--color-brand-600),\n    0px 0px 0px 4px var(--color-brand-100)}.checkbox-group-item-disabled{background:var(--color-neutral-100);border-color:var(--color-neutral-200);cursor:not-allowed;opacity:0.6}.item-content{display:flex;flex-direction:column;flex:1;gap:var(--spacing-xs);min-width:0}.item-text-row{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap}.item-title{font-size:var(--text-sm-size);font-weight:var(--weight-semibold);line-height:var(--text-sm-line);color:var(--color-neutral-900)}.item-subtitle{font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-600)}.item-description{font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-600);margin:0}.checkbox-group-item-disabled .item-title,.checkbox-group-item-disabled .item-subtitle,.checkbox-group-item-disabled .item-description{color:var(--color-neutral-400)}.checkbox-group-item bh-checkbox,.checkbox-group-item bh-radio-button{pointer-events:none}";

package/components/bh-checkbox.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { B as BhCheckbox$1, d as defineCustomElement$1 } from './p-D0Ba0gOA.js';
+import { B as BhCheckbox$1, d as defineCustomElement$1 } from './p-BqYBdZ7I.js';
 const BhCheckbox = BhCheckbox$1;
 const defineCustomElement = defineCustomElement$1;