@actabldesign/bellhop-core 0.0.3

package/cjs/bh-month-picker.cjs.entry.js

@@ -0,0 +1,152 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhMonthPickerCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;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-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:inline-block;position:relative}.month-picker-container{position:relative;display:inline-block}.month-picker-trigger{cursor:pointer}.month-picker-trigger.input-field-container{position:relative}.calendar-icon-overlay{position:absolute;top:0;right:0;width:40px;height:100%;cursor:pointer;z-index:1}.month-picker-menu-container{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--spacing-xs)}.month-picker-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;background:transparent}";
+
+const BhMonthPicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhChange = index.createEvent(this, "bhChange");
+        this.bhMonthYearSelect = index.createEvent(this, "bhMonthYearSelect");
+    }
+    /**
+     * Variant of the month picker trigger
+     */
+    variant = 'dropdown-outlined';
+    /**
+     * Minimum year in the picker
+     */
+    minYear = 1998;
+    /**
+     * Maximum year in the picker
+     */
+    maxYear = 2060;
+    /**
+     * Whether the picker is disabled
+     */
+    disabled = false;
+    /**
+     * Array of disabled months
+     */
+    disabledMonths = [];
+    /**
+     * Label for input variant
+     */
+    label = 'Select Month';
+    /**
+     * Placeholder text
+     */
+    placeholder = 'Choose month and year';
+    /**
+     * Width for input variant
+     */
+    inputWidth = '200px';
+    /**
+     * Whether to show the label
+     */
+    showLabel = true;
+    /**
+     * Whether to show the footer
+     */
+    showFooter = true;
+    /**
+     * Currently selected value
+     */
+    value;
+    selectedValue = null;
+    tempSelection = null;
+    isMenuOpen = false;
+    isMenuClosing = false;
+    /**
+     * Event emitted when value changes
+     */
+    bhChange;
+    /**
+     * Event emitted when a month/year is selected
+     */
+    bhMonthYearSelect;
+    handleValueChange(newValue) {
+        if (newValue !== undefined) {
+            this.selectedValue = newValue;
+        }
+    }
+    componentWillLoad() {
+        if (this.value) {
+            this.selectedValue = this.value;
+        }
+    }
+    getDisplayValue() {
+        if (!this.selectedValue)
+            return '';
+        // US convention: MM/YYYY (01/2025)
+        const month = (this.selectedValue.month + 1).toString().padStart(2, '0');
+        return `${month}/${this.selectedValue.year}`;
+    }
+    getButtonLabel() {
+        return this.getDisplayValue() || this.placeholder;
+    }
+    handleTriggerClick = () => {
+        if (this.disabled)
+            return;
+        if (!this.isMenuOpen && this.showFooter) {
+            this.tempSelection = this.selectedValue;
+        }
+        this.isMenuOpen = !this.isMenuOpen;
+    };
+    handleInputFocus = () => {
+        if (this.disabled)
+            return;
+        if (!this.isMenuOpen && this.showFooter) {
+            this.tempSelection = this.selectedValue;
+        }
+        this.isMenuOpen = true;
+    };
+    handleMonthYearSelect = (event) => {
+        const monthYear = event.detail;
+        if (!monthYear)
+            return;
+        if (this.showFooter) {
+            this.tempSelection = monthYear;
+        }
+        else {
+            this.selectedValue = monthYear;
+            this.bhChange.emit(monthYear);
+            this.bhMonthYearSelect.emit(monthYear);
+            this.closeMenu();
+        }
+    };
+    handleMenuCancel = () => {
+        this.tempSelection = null;
+        this.closeMenu();
+    };
+    handleMenuApply = () => {
+        if (this.tempSelection) {
+            this.selectedValue = this.tempSelection;
+            this.bhChange.emit(this.tempSelection);
+            this.bhMonthYearSelect.emit(this.tempSelection);
+            this.tempSelection = null;
+        }
+        this.closeMenu();
+    };
+    closeMenu() {
+        this.isMenuClosing = true;
+        setTimeout(() => {
+            this.isMenuOpen = false;
+            this.isMenuClosing = false;
+        }, 150);
+    }
+    handleBackdropClick = () => {
+        this.handleMenuCancel();
+    };
+    render() {
+        return (index.h(index.Host, { key: '77c20fea8e71861d26593fcb3afd64f876e931d5' }, index.h("div", { key: 'ece0e373ba2cea3d047ee4477ac42b84f1bab9ef', class: "month-picker-container" }, this.variant === 'dropdown-outlined' && (index.h("div", { key: '132c98c10fce8bfa4039270311773b1f0d5926ed', class: "month-picker-trigger", onClick: this.handleTriggerClick }, index.h("bh-button", { key: 'd72bc5ff61db88e5cfdcb969e168f184e625f152', hierarchy: "secondary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'dropdown-ghost' && (index.h("div", { key: '985eec13541d0c8732ef79abe78caef7cb50b01f', class: "month-picker-trigger", onClick: this.handleTriggerClick }, index.h("bh-button", { key: '6b7542db3a2ee4c929598551355ab837d1cd11c4', hierarchy: "tertiary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'input' && (index.h("div", { key: '2a1af2defcfef007180a574a6a6be7528a602c0e', class: "month-picker-trigger input-field-container" }, index.h("bh-input-text", { key: '1dd3b9000e3822f29523d955f7b68ea1d591c6ef', label: this.label, placeholder: this.placeholder, value: this.getDisplayValue(), disabled: this.disabled, showTrailingIcon: true, trailingIcon: "calendar_month", showHelpIcon: false, showHintText: false, showLabel: this.showLabel, width: this.inputWidth, onBhFocus: this.handleInputFocus }), index.h("div", { key: 'de8c1be2dc221533ea2007565245074c0385c245', class: "calendar-icon-overlay", onClick: this.handleTriggerClick }))), index.h("div", { key: '8cf969bf9396944146d9b46fbe33e501b281c008', class: "month-picker-menu-container" }, index.h("bh-picker-menu", { key: '11f469f151d40a80f9f958ab149059605af15396', visible: this.isMenuOpen, minYear: this.minYear, maxYear: this.maxYear, disabled: this.disabled, disabledMonths: this.disabledMonths, showFooter: this.showFooter, value: this.tempSelection || this.selectedValue || undefined, onBhChange: this.handleMonthYearSelect, onBhMonthYearSelect: this.handleMonthYearSelect, onBhCancel: this.handleMenuCancel, onBhApply: this.handleMenuApply }))), (this.isMenuOpen || this.isMenuClosing) && (index.h("div", { key: '6ebc7ff0588eea979419d80883b5e5f83317fac7', class: "month-picker-backdrop", onClick: this.handleBackdropClick }))));
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+BhMonthPicker.style = bhMonthPickerCss;
+
+exports.bh_month_picker = BhMonthPicker;
+//# sourceMappingURL=bh-month-picker.entry.cjs.js.map

package/cjs/bh-month-picker.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-month-picker.entry.cjs.js","sources":["src/components/bh-month-picker/bh-month-picker.css?tag=bh-month-picker&encapsulation=shadow","src/components/bh-month-picker/bh-month-picker.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n  display: inline-block;\n  position: relative;\n}\n\n.month-picker-container {\n  position: relative;\n  display: inline-block;\n}\n\n.month-picker-trigger {\n  cursor: pointer;\n}\n\n.month-picker-trigger.input-field-container {\n  position: relative;\n}\n\n.calendar-icon-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 40px;\n  height: 100%;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.month-picker-menu-container {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  margin-top: var(--spacing-xs);\n}\n\n.month-picker-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 999;\n  background: transparent;\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\nimport { MonthYear, DisabledMonth } from '../bh-month-picker-content/bh-month-picker-content';\n\nexport type MonthPickerVariant = 'dropdown-outlined' | 'dropdown-ghost' | 'input';\n\n@Component({\n  tag: 'bh-month-picker',\n  styleUrl: 'bh-month-picker.css',\n  shadow: true,\n})\nexport class BhMonthPicker {\n  /**\n   * Variant of the month picker trigger\n   */\n  @Prop() variant: MonthPickerVariant = 'dropdown-outlined';\n\n  /**\n   * Minimum year in the picker\n   */\n  @Prop() minYear: number = 1998;\n\n  /**\n   * Maximum year in the picker\n   */\n  @Prop() maxYear: number = 2060;\n\n  /**\n   * Whether the picker is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Array of disabled months\n   */\n  @Prop() disabledMonths: DisabledMonth[] = [];\n\n  /**\n   * Label for input variant\n   */\n  @Prop() label: string = 'Select Month';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string = 'Choose month and year';\n\n  /**\n   * Width for input variant\n   */\n  @Prop() inputWidth: string = '200px';\n\n  /**\n   * Whether to show the label\n   */\n  @Prop() showLabel: boolean = true;\n\n  /**\n   * Whether to show the footer\n   */\n  @Prop() showFooter: boolean = true;\n\n  /**\n   * Currently selected value\n   */\n  @Prop() value?: MonthYear;\n\n  @State() selectedValue: MonthYear | null = null;\n  @State() tempSelection: MonthYear | null = null;\n  @State() isMenuOpen: boolean = false;\n  @State() isMenuClosing: boolean = false;\n\n  /**\n   * Event emitted when value changes\n   */\n  @Event() bhChange!: EventEmitter<MonthYear | null>;\n\n  /**\n   * Event emitted when a month/year is selected\n   */\n  @Event() bhMonthYearSelect!: EventEmitter<MonthYear>;\n\n  @Watch('value')\n  handleValueChange(newValue: MonthYear | undefined) {\n    if (newValue !== undefined) {\n      this.selectedValue = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      this.selectedValue = this.value;\n    }\n  }\n\n  private getDisplayValue(): string {\n    if (!this.selectedValue) return '';\n    // US convention: MM/YYYY (01/2025)\n    const month = (this.selectedValue.month + 1).toString().padStart(2, '0');\n    return `${month}/${this.selectedValue.year}`;\n  }\n\n  private getButtonLabel(): string {\n    return this.getDisplayValue() || this.placeholder;\n  }\n\n  private handleTriggerClick = () => {\n    if (this.disabled) return;\n    if (!this.isMenuOpen && this.showFooter) {\n      this.tempSelection = this.selectedValue;\n    }\n    this.isMenuOpen = !this.isMenuOpen;\n  };\n\n  private handleInputFocus = () => {\n    if (this.disabled) return;\n    if (!this.isMenuOpen && this.showFooter) {\n      this.tempSelection = this.selectedValue;\n    }\n    this.isMenuOpen = true;\n  };\n\n  private handleMonthYearSelect = (event: CustomEvent<MonthYear | null>) => {\n    const monthYear = event.detail;\n    if (!monthYear) return;\n    if (this.showFooter) {\n      this.tempSelection = monthYear;\n    } else {\n      this.selectedValue = monthYear;\n      this.bhChange.emit(monthYear);\n      this.bhMonthYearSelect.emit(monthYear);\n      this.closeMenu();\n    }\n  };\n\n  private handleMenuCancel = () => {\n    this.tempSelection = null;\n    this.closeMenu();\n  };\n\n  private handleMenuApply = () => {\n    if (this.tempSelection) {\n      this.selectedValue = this.tempSelection;\n      this.bhChange.emit(this.tempSelection);\n      this.bhMonthYearSelect.emit(this.tempSelection);\n      this.tempSelection = null;\n    }\n    this.closeMenu();\n  };\n\n  private closeMenu() {\n    this.isMenuClosing = true;\n    setTimeout(() => {\n      this.isMenuOpen = false;\n      this.isMenuClosing = false;\n    }, 150);\n  }\n\n  private handleBackdropClick = () => {\n    this.handleMenuCancel();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"month-picker-container\">\n          {/* Dropdown Outlined Variant */}\n          {this.variant === 'dropdown-outlined' && (\n            <div class=\"month-picker-trigger\" onClick={this.handleTriggerClick}>\n              <bh-button\n                hierarchy=\"secondary\"\n                \n                size=\"sm\"\n                icon=\"trailing\"\n                label={this.getButtonLabel()}\n                iconName=\"expand_more\"\n                disabled={this.disabled}\n              ></bh-button>\n            </div>\n          )}\n\n          {/* Dropdown Ghost Variant */}\n          {this.variant === 'dropdown-ghost' && (\n            <div class=\"month-picker-trigger\" onClick={this.handleTriggerClick}>\n              <bh-button\n                hierarchy=\"tertiary\"\n                \n                size=\"sm\"\n                icon=\"trailing\"\n                label={this.getButtonLabel()}\n                iconName=\"expand_more\"\n                disabled={this.disabled}\n              ></bh-button>\n            </div>\n          )}\n\n          {/* Input Variant */}\n          {this.variant === 'input' && (\n            <div class=\"month-picker-trigger input-field-container\">\n              <bh-input-text\n                label={this.label}\n                placeholder={this.placeholder}\n                value={this.getDisplayValue()}\n                disabled={this.disabled}\n                showTrailingIcon={true}\n                trailingIcon=\"calendar_month\"\n                showHelpIcon={false}\n                showHintText={false}\n                showLabel={this.showLabel}\n                width={this.inputWidth}\n                onBhFocus={this.handleInputFocus}\n              ></bh-input-text>\n              <div class=\"calendar-icon-overlay\" onClick={this.handleTriggerClick}></div>\n            </div>\n          )}\n\n          {/* Month Picker Menu */}\n          <div class=\"month-picker-menu-container\">\n            <bh-picker-menu\n              visible={this.isMenuOpen}\n              minYear={this.minYear}\n              maxYear={this.maxYear}\n              disabled={this.disabled}\n              disabledMonths={this.disabledMonths}\n              showFooter={this.showFooter}\n              value={this.tempSelection || this.selectedValue || undefined}\n              onBhChange={this.handleMonthYearSelect}\n              onBhMonthYearSelect={this.handleMonthYearSelect}\n              onBhCancel={this.handleMenuCancel}\n              onBhApply={this.handleMenuApply}\n            ></bh-picker-menu>\n          </div>\n        </div>\n\n        {/* Backdrop */}\n        {(this.isMenuOpen || this.isMenuClosing) && (\n          <div class=\"month-picker-backdrop\" onClick={this.handleBackdropClick}></div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

package/cjs/bh-notification.cjs.entry.js

@@ -0,0 +1,128 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhNotificationCss = ":host{display:block;font-family:var(\n    --font-inter,\n    'Inter',\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif\n  )}.notification{display:flex;align-items:flex-start;gap:16px;padding:16px;background:var(--color-white, #ffffff);border:1px solid var(--color-neutral-200, #eaecf0);border-radius:12px;box-shadow:0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);position:relative}.notification-content{display:flex;gap:12px;flex:1;min-width:0}.notification-icon-wrapper{flex-shrink:0}.notification-text{display:flex;flex-direction:column;gap:12px;flex:1;min-width:0}.notification-text-wrapper{display:flex;flex-direction:column;gap:4px}.notification-title{font-size:var(--text-sm-size, 14px);font-weight:600;color:var(--color-neutral-900, #101828);margin:0;line-height:1.43}.notification-description{font-size:var(--text-sm-size, 14px);font-weight:400;color:var(--color-neutral-600, #475467);margin:0;line-height:1.43}.notification-actions{display:flex;gap:12px}.notification-close{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;cursor:pointer;border-radius:4px;transition:background 0.2s ease-in-out}.notification-close:hover{background:var(--color-neutral-100, #f2f4f7)}.close-icon{font-size:16px;color:var(--color-neutral-400, #98a2b3)}.material-symbols-outlined{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}";
+
+const BhNotification = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhAction = index.createEvent(this, "bhAction");
+        this.bhDismiss = index.createEvent(this, "bhDismiss");
+        this.bhClose = index.createEvent(this, "bhClose");
+    }
+    /**
+     * Type of notification (determines color and icon)
+     */
+    type = 'default';
+    /**
+     * Notification title
+     */
+    notificationTitle = '';
+    /**
+     * Notification description
+     */
+    description = '';
+    /**
+     * Text for the action button
+     */
+    actionText = '';
+    /**
+     * Text for the dismiss button
+     */
+    dismissText = '';
+    /**
+     * Whether to show the close button
+     */
+    dismissible = true;
+    /**
+     * Custom icon name (overrides type-based icon)
+     */
+    icon = '';
+    /**
+     * Emitted when action button is clicked
+     */
+    bhAction;
+    /**
+     * Emitted when dismiss button is clicked
+     */
+    bhDismiss;
+    /**
+     * Emitted when close button is clicked
+     */
+    bhClose;
+    getIconName() {
+        if (this.icon)
+            return this.icon;
+        switch (this.type) {
+            case 'primary':
+                return 'new_releases';
+            case 'success':
+                return 'check_circle';
+            case 'error':
+                return 'error';
+            case 'warning':
+                return 'warning';
+            case 'feature':
+                return 'rocket_launch';
+            case 'default':
+                return 'info';
+            default:
+                return 'info';
+        }
+    }
+    getIconColor() {
+        switch (this.type) {
+            case 'primary':
+                return 'brand';
+            case 'success':
+                return 'success';
+            case 'error':
+                return 'error';
+            case 'warning':
+                return 'warning';
+            case 'feature':
+                return 'highlight';
+            case 'default':
+            default:
+                return 'gray';
+        }
+    }
+    getIconStyle() {
+        switch (this.type) {
+            case 'primary':
+                return 'outlined';
+            case 'success':
+                return 'filled';
+            case 'error':
+                return 'filled';
+            case 'warning':
+                return 'filled';
+            case 'feature':
+                return 'outlined';
+            case 'default':
+            default:
+                return 'outlined';
+        }
+    }
+    handleAction = () => {
+        this.bhAction.emit();
+    };
+    handleDismiss = () => {
+        this.bhDismiss.emit();
+    };
+    handleClose = () => {
+        this.bhClose.emit();
+    };
+    render() {
+        const notificationClasses = {
+            notification: true,
+            [`notification-${this.type}`]: true,
+        };
+        return (index.h("div", { key: '515c579b7f77846984dcb59b12c51714cd522c90', class: notificationClasses, role: "alert", part: "container" }, index.h("div", { key: '6fa7a5ff931a4a5c798364e20c3cc295fd974617', class: "notification-content" }, index.h("div", { key: '3720231fd305c2c93e8b4baef2fc93403fed8748', class: "notification-icon-wrapper" }, index.h("bh-featured-icon", { key: 'eafe7f9f29cc2dfaca9cfc116a033e1a62583af0', icon: this.getIconName(), color: this.getIconColor(), size: "sm", iconStyle: this.getIconStyle() })), index.h("div", { key: 'fc7ae04d183ba374eabd77b103351da1eb2bb0f0', class: "notification-text" }, index.h("div", { key: 'e3377410aa9c6463e468195c18311b3498a6cb7c', class: "notification-text-wrapper" }, this.notificationTitle && (index.h("h3", { key: 'f277e1461742af2a03484a7e1f326f1616c5e341', class: "notification-title" }, this.notificationTitle)), this.description && (index.h("p", { key: '76bbc3b8ae19325a3304abf2fec2a43459b75e4d', class: "notification-description" }, this.description))), (this.actionText || this.dismissText) && (index.h("div", { key: 'ea940be7065dc17a70c9783e65383b0b820f1064', class: "notification-actions" }, this.dismissText && (index.h("bh-button", { key: 'b5ec730be6f688456c5105475240b695d7805e4f', hierarchy: "quaternary", size: "sm", label: this.dismissText, icon: "none", onBhClick: this.handleDismiss })), this.actionText && (index.h("bh-button", { key: '22f5a5ffb96d978c884678047ec73252baca3338', hierarchy: "quaternary", size: "sm", label: this.actionText, icon: "none", onBhClick: this.handleAction })))))), this.dismissible && (index.h("button", { key: '65bf8f837739ce1216375d42d2cf00166f524135', class: "notification-close", onClick: this.handleClose, "aria-label": "Close notification" }, index.h("span", { key: '4e4040982feb853b3e2c20af1c948edd49e8c6fe', class: "material-symbols-outlined close-icon" }, "close")))));
+    }
+};
+BhNotification.style = bhNotificationCss;
+
+exports.bh_notification = BhNotification;
+//# sourceMappingURL=bh-notification.entry.cjs.js.map

package/cjs/bh-notification.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-notification.entry.cjs.js","sources":["src/components/bh-notification/bh-notification.css?tag=bh-notification&encapsulation=shadow","src/components/bh-notification/bh-notification.tsx"],"sourcesContent":[":host {\n  display: block;\n  font-family: var(\n    --font-inter,\n    'Inter',\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif\n  );\n}\n\n/* Base Notification */\n.notification {\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 16px;\n  background: var(--color-white, #ffffff);\n  border: 1px solid var(--color-neutral-200, #eaecf0);\n  border-radius: 12px;\n  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);\n  position: relative;\n}\n\n/* Content Area */\n.notification-content {\n  display: flex;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Icon Wrapper */\n.notification-icon-wrapper {\n  flex-shrink: 0;\n}\n\n/* Text Content */\n.notification-text {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.notification-text-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.notification-title {\n  font-size: var(--text-sm-size, 14px);\n  font-weight: 600;\n  color: var(--color-neutral-900, #101828);\n  margin: 0;\n  line-height: 1.43;\n}\n\n.notification-description {\n  font-size: var(--text-sm-size, 14px);\n  font-weight: 400;\n  color: var(--color-neutral-600, #475467);\n  margin: 0;\n  line-height: 1.43;\n}\n\n/* Actions */\n.notification-actions {\n  display: flex;\n  gap: 12px;\n}\n\n/* Close Button */\n.notification-close {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-radius: 4px;\n  transition: background 0.2s ease-in-out;\n}\n\n.notification-close:hover {\n  background: var(--color-neutral-100, #f2f4f7);\n}\n\n.close-icon {\n  font-size: 16px;\n  color: var(--color-neutral-400, #98a2b3);\n}\n\n/* Material Symbols */\n.material-symbols-outlined {\n  font-family: 'Material Symbols Outlined';\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type NotificationType =\n  | 'primary'\n  | 'default'\n  | 'success'\n  | 'error'\n  | 'warning'\n  | 'feature';\n\n@Component({\n  tag: 'bh-notification',\n  styleUrl: 'bh-notification.css',\n  shadow: true,\n})\nexport class BhNotification {\n  /**\n   * Type of notification (determines color and icon)\n   */\n  @Prop() type: NotificationType = 'default';\n\n  /**\n   * Notification title\n   */\n  @Prop() notificationTitle: string = '';\n\n  /**\n   * Notification description\n   */\n  @Prop() description: string = '';\n\n  /**\n   * Text for the action button\n   */\n  @Prop() actionText: string = '';\n\n  /**\n   * Text for the dismiss button\n   */\n  @Prop() dismissText: string = '';\n\n  /**\n   * Whether to show the close button\n   */\n  @Prop() dismissible: boolean = true;\n\n  /**\n   * Custom icon name (overrides type-based icon)\n   */\n  @Prop() icon: string = '';\n\n  /**\n   * Emitted when action button is clicked\n   */\n  @Event() bhAction!: EventEmitter<void>;\n\n  /**\n   * Emitted when dismiss button is clicked\n   */\n  @Event() bhDismiss!: EventEmitter<void>;\n\n  /**\n   * Emitted when close button is clicked\n   */\n  @Event() bhClose!: EventEmitter<void>;\n\n  private getIconName(): string {\n    if (this.icon) return this.icon;\n\n    switch (this.type) {\n      case 'primary':\n        return 'new_releases';\n      case 'success':\n        return 'check_circle';\n      case 'error':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      case 'feature':\n        return 'rocket_launch';\n      case 'default':\n        return 'info';\n      default:\n        return 'info';\n    }\n  }\n\n  private getIconColor(): 'brand' | 'gray' | 'error' | 'warning' | 'success' | 'highlight' {\n    switch (this.type) {\n      case 'primary':\n        return 'brand';\n      case 'success':\n        return 'success';\n      case 'error':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      case 'feature':\n        return 'highlight';\n      case 'default':\n      default:\n        return 'gray';\n    }\n  }\n\n  private getIconStyle(): 'outlined' | 'filled' {\n    switch (this.type) {\n      case 'primary':\n        return 'outlined';\n      case 'success':\n        return 'filled';\n      case 'error':\n        return 'filled';\n      case 'warning':\n        return 'filled';\n      case 'feature':\n        return 'outlined';\n      case 'default':\n      default:\n        return 'outlined';\n    }\n  }\n\n  private handleAction = (): void => {\n    this.bhAction.emit();\n  };\n\n  private handleDismiss = (): void => {\n    this.bhDismiss.emit();\n  };\n\n  private handleClose = (): void => {\n    this.bhClose.emit();\n  };\n\n  render() {\n    const notificationClasses = {\n      notification: true,\n      [`notification-${this.type}`]: true,\n    };\n\n    return (\n      <div class={notificationClasses} role=\"alert\" part=\"container\">\n        <div class=\"notification-content\">\n          {/* Icon */}\n          <div class=\"notification-icon-wrapper\">\n            <bh-featured-icon\n              icon={this.getIconName()}\n              color={this.getIconColor()}\n              size=\"sm\"\n              iconStyle={this.getIconStyle()}\n            />\n          </div>\n\n          {/* Text Content */}\n          <div class=\"notification-text\">\n            <div class=\"notification-text-wrapper\">\n              {this.notificationTitle && (\n                <h3 class=\"notification-title\">{this.notificationTitle}</h3>\n              )}\n              {this.description && (\n                <p class=\"notification-description\">{this.description}</p>\n              )}\n            </div>\n\n            {/* Actions */}\n            {(this.actionText || this.dismissText) && (\n              <div class=\"notification-actions\">\n                {this.dismissText && (\n                  <bh-button\n                    hierarchy=\"quaternary\"\n                    size=\"sm\"\n                    label={this.dismissText}\n                    icon=\"none\"\n                    onBhClick={this.handleDismiss}\n                  />\n                )}\n                {this.actionText && (\n                  <bh-button\n                    hierarchy=\"quaternary\"\n                    size=\"sm\"\n                    label={this.actionText}\n                    icon=\"none\"\n                    onBhClick={this.handleAction}\n                  />\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n\n        {/* Close Button */}\n        {this.dismissible && (\n          <button\n            class=\"notification-close\"\n            onClick={this.handleClose}\n            aria-label=\"Close notification\"\n          >\n            <span class=\"material-symbols-outlined close-icon\">close</span>\n          </button>\n        )}\n      </div>\n    );\n  }\n}"],"names":["h"],"mappings":"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"}

package/cjs/bh-page-navigation-child.cjs.entry.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhPageNavigationChildCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;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-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:block}.page-navigation-child{display:flex;align-items:center;padding:var(--spacing-md) var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:36px;box-sizing:border-box;border-radius:var(--radius-sm);margin:var(--spacing-none) var(--spacing-xs);background-color:transparent;border:1px solid transparent;margin-left:9px}.page-navigation-child:hover:not(.active){background-color:var(--color-neutral-50);position:relative;z-index:1}.page-navigation-child.active{background-color:transparent}.page-navigation-child.active::before{content:'';position:absolute;left:-4.5px;top:50%;transform:translateY(-50%);width:2px;height:24px;background-color:var(--color-brand-600);z-index:3}.page-navigation-child-content{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.page-navigation-child-label{font-family:var(--font-inter);font-size:14px;font-weight:500;line-height:20px;color:var(--color-neutral-600);flex:1;transition:all 0.15s ease}.page-navigation-child.active .page-navigation-child-label{color:var(--color-brand-600);font-weight:600}.page-navigation-child-badge{margin-left:auto;font-family:var(--font-inter);font-size:12px;font-weight:500;color:var(--color-neutral-500)}";
+
+const BhPageNavigationChild = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhItemClick = index.createEvent(this, "bhItemClick");
+    }
+    /**
+     * Label text for the navigation item
+     */
+    label;
+    /**
+     * Optional badge text/number to display
+     */
+    badge;
+    /**
+     * Whether to show the badge (when badge prop is provided)
+     */
+    showBadge = true;
+    /**
+     * Whether the item is currently active/selected
+     */
+    isActive = false;
+    /**
+     * Event emitted when the navigation item is clicked
+     */
+    bhItemClick;
+    handleClick = () => {
+        this.bhItemClick.emit();
+    };
+    getItemClasses() {
+        return {
+            'page-navigation-child': true,
+            'active': this.isActive,
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: 'c3e5a383d775f9d2d9d144a7e30b296ebb04d337' }, index.h("div", { key: 'a1affbc17cc2b0e3ffde0cdc0e1852ea6102264c', class: this.getItemClasses(), onClick: this.handleClick }, index.h("div", { key: '87ab5dca93ebf96c8635543e428f5f2ef826d98b', class: "page-navigation-child-content" }, index.h("span", { key: 'f9decd8f300be9d88f4f030ca6f626f915fba2e6', class: "page-navigation-child-label" }, this.label), this.badge !== undefined && this.showBadge && (index.h("span", { key: '5c4d1291f158e07a5f8a4aa90563f2db4b03ccf2', class: "page-navigation-child-badge" }, this.badge))))));
+    }
+};
+BhPageNavigationChild.style = bhPageNavigationChildCss;
+
+exports.bh_page_navigation_child = BhPageNavigationChild;
+//# sourceMappingURL=bh-page-navigation-child.entry.cjs.js.map

package/cjs/bh-page-navigation-child.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-page-navigation-child.entry.cjs.js","sources":["src/components/bh-page-navigation-child/bh-page-navigation-child.css?tag=bh-page-navigation-child&encapsulation=shadow","src/components/bh-page-navigation-child/bh-page-navigation-child.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n  display: block;\n}\n\n.page-navigation-child {\n  display: flex;\n  align-items: center;\n  padding: var(--spacing-md) var(--spacing-lg);\n  cursor: pointer;\n  gap: var(--spacing-md);\n  position: relative;\n  transition: all 0.15s ease;\n  min-height: 36px;\n  box-sizing: border-box;\n  border-radius: var(--radius-sm);\n  margin: var(--spacing-none) var(--spacing-xs);\n  background-color: transparent;\n  border: 1px solid transparent;\n  margin-left: 9px;\n}\n\n/* Hover state for child items */\n.page-navigation-child:hover:not(.active) {\n  background-color: var(--color-neutral-50);\n  position: relative;\n  z-index: 1;\n}\n\n/* Active/Selected state for child items */\n.page-navigation-child.active {\n  background-color: transparent;\n}\n\n/* Active line indicator for child items */\n.page-navigation-child.active::before {\n  content: '';\n  position: absolute;\n  left: -4.5px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 2px;\n  height: 24px;\n  background-color: var(--color-brand-600);\n  z-index: 3;\n}\n\n.page-navigation-child-content {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md);\n  width: 100%;\n}\n\n.page-navigation-child-label {\n  font-family: var(--font-inter);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  color: var(--color-neutral-600);\n  flex: 1;\n  transition: all 0.15s ease;\n}\n\n.page-navigation-child.active .page-navigation-child-label {\n  color: var(--color-brand-600);\n  font-weight: 600;\n}\n\n.page-navigation-child-badge {\n  margin-left: auto;\n  font-family: var(--font-inter);\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--color-neutral-500);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'bh-page-navigation-child',\n  styleUrl: 'bh-page-navigation-child.css',\n  shadow: true,\n})\nexport class BhPageNavigationChild {\n  /**\n   * Label text for the navigation item\n   */\n  @Prop() label!: string;\n\n  /**\n   * Optional badge text/number to display\n   */\n  @Prop() badge?: string | number;\n\n  /**\n   * Whether to show the badge (when badge prop is provided)\n   */\n  @Prop() showBadge: boolean = true;\n\n  /**\n   * Whether the item is currently active/selected\n   */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * Event emitted when the navigation item is clicked\n   */\n  @Event() bhItemClick!: EventEmitter<void>;\n\n  private handleClick = () => {\n    this.bhItemClick.emit();\n  };\n\n  private getItemClasses() {\n    return {\n      'page-navigation-child': true,\n      'active': this.isActive,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getItemClasses()} onClick={this.handleClick}>\n          <div class=\"page-navigation-child-content\">\n            <span class=\"page-navigation-child-label\">{this.label}</span>\n            {this.badge !== undefined && this.showBadge && (\n              <span class=\"page-navigation-child-badge\">{this.badge}</span>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,wBAAwB,GAAG,u2LAAu2L;;MCO33L,qBAAqB,GAAA,MAAA;;;;;AAChC;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;IACK,SAAS,GAAY,IAAI;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACM,IAAA,WAAW;IAEZ,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACzB,KAAC;IAEO,cAAc,GAAA;QACpB,OAAO;AACL,YAAA,uBAAuB,EAAE,IAAI;YAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;;IAGH,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAC1DA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAA,EACxCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC5D,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,KACzCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAC9D,CACG,CACF,CACD;;;;;;;"}

package/cjs/bh-page-navigation-multi-level.bh-page-navigation-single-level.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-page-navigation-multi-level.bh-page-navigation-single-level.entry.cjs.js","sources":["src/components/bh-page-navigation-multi-level/bh-page-navigation-multi-level.css?tag=bh-page-navigation-multi-level&encapsulation=shadow","src/components/bh-page-navigation-multi-level/bh-page-navigation-multi-level.tsx","src/components/bh-page-navigation-single-level/bh-page-navigation-single-level.css?tag=bh-page-navigation-single-level&encapsulation=shadow","src/components/bh-page-navigation-single-level/bh-page-navigation-single-level.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n  display: block;\n}\n\n.page-navigation-multi-level {\n  margin: var(--spacing-none) var(--spacing-xs);\n}\n\n.page-navigation-multi-level-parent {\n  display: flex;\n  align-items: center;\n  padding: var(--spacing-lg);\n  cursor: pointer;\n  gap: var(--spacing-md);\n  position: relative;\n  transition: all 0.15s ease;\n  min-height: 40px;\n  max-height: 44px;\n  box-sizing: border-box;\n  border-radius: var(--radius-sm);\n  background-color: transparent;\n  border: 1px solid transparent;\n}\n\n/* Has active child state */\n.page-navigation-multi-level.has-active-child .page-navigation-multi-level-parent {\n  background-color: transparent;\n  border: 1px solid transparent;\n}\n\n/* Hover state for multi level parent */\n.page-navigation-multi-level-parent:hover {\n  background-color: var(--color-neutral-50) !important;\n}\n\n/* Children container with smooth animation */\n.page-navigation-children {\n  margin-top: var(--spacing-xs);\n  margin-bottom: var(--spacing-xs);\n  position: relative;\n  margin-left: var(--spacing-xl);\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n  max-height: 1000px;\n  opacity: 1;\n  transition: max-height 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    opacity 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    margin 0.4s cubic-bezier(0.08, 0.52, 0.52, 1);\n}\n\n.page-navigation-children.collapsed {\n  max-height: 0;\n  opacity: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n/* Vertical line indicator for children */\n.page-navigation-children::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: -2px;\n  height: calc(100% + 4px);\n  width: 2px;\n  background-color: var(--color-neutral-200);\n  margin-left: var(--spacing-sm);\n  z-index: 2;\n}\n\n/* Animation classes */\n.page-navigation-children.animate-slide-down-enter {\n  animation: slideDownEnter 0.15s ease-out forwards;\n}\n\n.page-navigation-children.animate-slide-down-exit {\n  animation: slideDownExit 0.15s ease-out forwards;\n}\n\n@keyframes slideDownEnter {\n  from {\n    opacity: 0;\n    max-height: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    max-height: 1000px;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideDownExit {\n  from {\n    opacity: 1;\n    max-height: 1000px;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    max-height: 0;\n    transform: translateY(-10px);\n  }\n}\n\n/* Item content and common elements */\n.page-navigation-item-content {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md);\n  width: 100%;\n}\n\n/* Icons */\n.page-navigation-item-icon {\n  flex-shrink: 0;\n  color: var(--color-neutral-600);\n  font-size: 20px;\n  width: 20px;\n  height: 20px;\n  transition: color 0.15s ease;\n}\n\n/* Smooth animation class for page navigation items */\n.page-navigation-animate-smooth {\n  transform-origin: top center;\n  transition: all var(--animation-duration-normal, 0.2s) var(--animation-ease-enter, ease);\n}\n\n/* Chevron icon styling */\n.page-navigation-chevron-icon {\n  flex-shrink: 0;\n  color: var(--color-neutral-600);\n  font-size: 20px;\n  width: 20px;\n  height: 20px;\n  transition: color 0.15s ease, transform var(--animation-duration-fast, 0.1s) var(--animation-ease-smooth, ease);\n}\n\n/* Chevron rotation when expanded */\n.page-navigation-chevron-icon.expanded {\n  transform: rotate(180deg);\n}\n\n/* Icon color changes for active states */\n.page-navigation-multi-level.has-active-child .page-navigation-item-icon {\n  color: var(--color-neutral-900);\n}\n\n/* Labels */\n.page-navigation-item-label {\n  font-family: var(--font-inter);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  color: var(--color-neutral-600);\n  flex: 1;\n  transition: all 0.15s ease;\n}\n\n/* Label color and weight changes for active states */\n.page-navigation-multi-level.has-active-child .page-navigation-item-label {\n  color: var(--color-neutral-900);\n  font-weight: 600;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host, Watch } from '@stencil/core';\n\nexport interface ChildItem {\n  label: string;\n  badge?: string | number;\n  showBadge?: boolean;\n  isActive?: boolean;\n}\n\n@Component({\n  tag: 'bh-page-navigation-multi-level',\n  styleUrl: 'bh-page-navigation-multi-level.css',\n  shadow: true,\n})\nexport class BhPageNavigationMultiLevel {\n  /**\n   * Label text for the navigation item\n   */\n  @Prop() label!: string;\n\n  /**\n   * Material icon name\n   */\n  @Prop() icon: string = 'radio_button_unchecked';\n\n  /**\n   * Optional badge text/number to display\n   */\n  @Prop() badge?: string | number;\n\n  /**\n   * Child navigation items\n   */\n  @Prop() childItems: ChildItem[] = [];\n\n  /**\n   * Whether the item is expanded to show children\n   */\n  @Prop({ mutable: true }) isExpanded: boolean = false;\n\n  /**\n   * Internal state for hover\n   */\n  @State() isHovered: boolean = false;\n\n  /**\n   * Internal state for animation\n   */\n  @State() isAnimating: boolean = false;\n\n  /**\n   * Animation class\n   */\n  @State() animationClass: string = '';\n\n  /**\n   * Event emitted when the parent item is clicked (to toggle expansion)\n   */\n  @Event() bhToggle!: EventEmitter<void>;\n\n  /**\n   * Event emitted when a child item is clicked\n   */\n  @Event() bhChildClick!: EventEmitter<number>;\n\n  /**\n   * Event emitted when add button is clicked\n   */\n  @Event() bhAddClick!: EventEmitter<void>;\n\n  @Watch('isExpanded')\n  handleExpandedChange(newValue: boolean) {\n    if (newValue) {\n      this.isAnimating = true;\n      this.animationClass = 'animate-slide-down-enter';\n    } else if (this.isAnimating) {\n      this.animationClass = 'animate-slide-down-exit';\n      setTimeout(() => {\n        this.isAnimating = false;\n        this.animationClass = '';\n      }, 150);\n    }\n  }\n\n  private get hasActiveChild(): boolean {\n    return this.childItems.some(child => child.isActive);\n  }\n\n  private handleParentClick = () => {\n    this.bhToggle.emit();\n  };\n\n  private handleChildClick = (index: number) => {\n    this.bhChildClick.emit(index);\n  };\n\n  private handleAddClick = (e: MouseEvent) => {\n    e.stopPropagation();\n    this.bhAddClick.emit();\n  };\n\n  private getItemClasses() {\n    return {\n      'page-navigation-multi-level': true,\n      'page-navigation-animate-smooth': true,\n      'has-active-child': this.hasActiveChild,\n      'expanded': this.isExpanded,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getItemClasses()}>\n          <div\n            class=\"page-navigation-multi-level-parent\"\n            onClick={this.handleParentClick}\n            onMouseEnter={() => (this.isHovered = true)}\n            onMouseLeave={() => (this.isHovered = false)}\n          >\n            <div class=\"page-navigation-item-content\">\n              {!this.isHovered && (\n                <span class=\"page-navigation-item-icon material-symbols-outlined\">\n                  {this.icon}\n                </span>\n              )}\n              {this.isHovered && (\n                <span\n                  class={{\n                    'page-navigation-chevron-icon': true,\n                    'material-symbols-outlined': true,\n                    'expanded': this.isExpanded,\n                  }}\n                >\n                  expand_more\n                </span>\n              )}\n              <span class=\"page-navigation-item-label\">{this.label}</span>\n              <bh-button\n                hierarchy=\"tertiary\"\n                icon=\"only\"\n                size=\"xs\"\n                iconName=\"add\"\n                onClick={this.handleAddClick}\n              ></bh-button>\n            </div>\n          </div>\n\n          {(this.isExpanded || this.isAnimating) && (\n            <div class={`page-navigation-children ${this.animationClass}`}>\n              {this.childItems.map((child, index) => (\n                <bh-page-navigation-child\n                  key={index}\n                  label={child.label}\n                  badge={child.badge}\n                  showBadge={child.showBadge}\n                  isActive={child.isActive}\n                  onBhItemClick={() => this.handleChildClick(index)}\n                ></bh-page-navigation-child>\n              ))}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","/* ==========================================================================\n   PAGE NAVIGATION COMPONENT - REACT IMPLEMENTATION\n   Unified styles for page navigation matching Angular functionality\n   ========================================================================== */\n\n/* Main Page Navigation Container */\n.page-navigation {\n  width: 320px;\n  min-width: 280px;\n  background-color: var(--color-white);\n  padding: var(--spacing-xl) var(--spacing-md);\n  font-family: var(--font-inter);\n  height: 100vh;\n  overflow-y: auto;\n  border-right: 1px solid var(--color-neutral-200);\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.page-navigation-header {\n  margin-bottom: var(--spacing-3xl);\n}\n\n.page-navigation-title {\n  font-size: var(--text-xl-size);\n  font-weight: var(--weight-semibold);\n  line-height: var(--text-xl-line);\n  color: var(--color-neutral-900);\n  padding: var(--spacing-none) var(--spacing-xl);\n  margin: 0;\n}\n\n.page-navigation-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-sm);\n}\n\n/* ==========================================================================\n   SINGLE LEVEL NAVIGATION ITEMS\n   ========================================================================== */\n\n.page-navigation-single-level {\n  display: flex;\n  align-items: center;\n  padding: var(--spacing-lg);\n  cursor: pointer;\n  gap: var(--spacing-md);\n  position: relative;\n  transition: all 0.15s ease;\n  min-height: 40px;\n  max-height: 44px;\n  box-sizing: border-box;\n  border-radius: 6px;\n  margin: var(--spacing-none) var(--spacing-xs);\n  background-color: transparent;\n  border: 1px solid transparent;\n}\n\n/* Active/Selected state for single level */\n.page-navigation-single-level.active {\n  background-color: transparent;\n  border: 1px solid transparent;\n}\n\n/* Hover state for single level */\n.page-navigation-single-level:hover {\n  background-color: var(--color-neutral-50) !important;\n}\n\n/* ==========================================================================\n   MULTI LEVEL NAVIGATION ITEMS\n   ========================================================================== */\n\n.page-navigation-multi-level {\n  margin: var(--spacing-none) var(--spacing-xs);\n}\n\n.page-navigation-multi-level-parent {\n  display: flex;\n  align-items: center;\n  padding: var(--spacing-lg);\n  cursor: pointer;\n  gap: var(--spacing-md);\n  position: relative;\n  transition: all 0.15s ease;\n  min-height: 40px;\n  max-height: 44px;\n  box-sizing: border-box;\n  border-radius: var(--radius-sm);\n  background-color: transparent;\n  border: 1px solid transparent;\n}\n\n/* Has active child state */\n.page-navigation-multi-level.has-active-child .page-navigation-multi-level-parent {\n  background-color: transparent;\n  border: 1px solid transparent;\n}\n\n/* Hover state for multi level parent */\n.page-navigation-multi-level-parent:hover {\n  background-color: var(--color-neutral-50) !important;\n}\n\n/* Children container with smooth animation */\n.page-navigation-children {\n  margin-top: var(--spacing-xs);\n  margin-bottom: var(--spacing-xs);\n  position: relative;\n  margin-left: var(--spacing-xl);\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n  /*overflow: hidden;*/\n  max-height: 1000px;\n  opacity: 1;\n  transition: max-height 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    opacity 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    margin 0.4s cubic-bezier(0.08, 0.52, 0.52, 1);\n}\n\n.page-navigation-children.collapsed {\n  max-height: 0;\n  opacity: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n/* Vertical line indicator for children */\n.page-navigation-children::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: -2px;\n  height: calc(100% + 4px);\n  width: 2px;\n  background-color: var(--color-neutral-200);\n  margin-left: var(--spacing-sm);\n  z-index: 2;\n}\n\n/* ==========================================================================\n   CHILD NAVIGATION ITEMS\n   ========================================================================== */\n\n.page-navigation-child {\n  display: flex;\n  align-items: center;\n  padding: var(--spacing-md) var(--spacing-lg);\n  cursor: pointer;\n  gap: var(--spacing-md);\n  position: relative;\n  transition: all 0.15s ease;\n  min-height: 36px;\n  box-sizing: border-box;\n  border-radius: var(--radius-sm);\n  margin: var(--spacing-none) var(--spacing-xs);\n  background-color: transparent;\n  border: 1px solid transparent;\n  margin-left: 9px;\n}\n\n/* Hover state for child items */\n.page-navigation-child:hover:not(.active) {\n  background-color: var(--color-neutral-50);\n  position: relative;\n  z-index: 1;\n}\n\n/* Hover overlay to cover the vertical line */\n.page-navigation-child:hover:not(.active)::after {\n  content: '';\n  position: absolute;\n  left: -20px;\n  top: 0;\n  bottom: 0;\n  width: 20px;\n  background-color: var(--color-neutral-100);\n  z-index: 1;\n  border-radius: var(--radius-sm);\n}\n\n/* Active/Selected state for child items */\n.page-navigation-child.active {\n  background-color: transparent;\n}\n\n/* Active line indicator for child items */\n.page-navigation-child.active::before {\n  content: '';\n  position: absolute;\n  left: -4.5px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 2px;\n  height: 24px;\n  background-color: var(--color-brand-600);\n  z-index: 3;\n}\n\n/* ==========================================================================\n   ITEM CONTENT AND COMMON ELEMENTS\n   ========================================================================== */\n\n.page-navigation-item-content,\n.page-navigation-child-content {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md);\n  width: 100%;\n}\n\n/* Icons */\n.page-navigation-item-icon {\n  flex-shrink: 0;\n  color: var(--color-neutral-600);\n  font-size: 20px;\n  width: 20px;\n  height: 20px;\n  transition: color 0.15s ease;\n}\n\n/* Smooth animation class for page navigation items */\n.page-navigation-animate-smooth {\n  transform-origin: top center;\n  transition: all var(--animation-duration-normal) var(--animation-ease-enter);\n}\n\n/* Chevron icon styling - separate from main icons */\n.page-navigation-chevron-icon {\n  flex-shrink: 0;\n  color: var(--color-neutral-600);\n  font-size: 20px;\n  width: 20px;\n  height: 20px;\n  transition: color 0.15s ease, transform var(--animation-duration-fast) var(--animation-ease-smooth);\n}\n\n/* Chevron rotation when expanded */\n.page-navigation-chevron-icon.expanded {\n  transform: rotate(180deg);\n}\n\n/* Icon color changes for active states */\n.page-navigation-single-level.active .page-navigation-item-icon,\n.page-navigation-multi-level.has-active-child .page-navigation-item-icon {\n  color: var(--color-neutral-900);\n}\n\n/* Labels */\n.page-navigation-item-label,\n.page-navigation-child-label {\n  font-family: 'Inter', sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  color: var(--color-neutral-600);\n  flex: 1;\n  transition: all 0.15s ease;\n}\n\n\n/* Label color and weight changes for active states */\n.page-navigation-single-level.active .page-navigation-item-label,\n.page-navigation-multi-level.has-active-child .page-navigation-item-label {\n  color: var(--color-neutral-900);\n  font-weight: 600;\n}\n\n.page-navigation-child.active .page-navigation-child-label {\n  color: var(--color-brand-600);\n  font-weight: 600;\n}\n\n/* Badges */\n.page-navigation-item-badge,\n.page-navigation-child-badge {\n  margin-left: auto;\n}\n\n/* ==========================================================================\n   RESPONSIVE DESIGN\n   ========================================================================== */\n\n@media (max-width: 768px) {\n  .page-navigation {\n    width: 280px;\n    min-width: 280px;\n  }\n}","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'bh-page-navigation-single-level',\n  styleUrl: 'bh-page-navigation-single-level.css',\n  shadow: true,\n})\nexport class BhPageNavigationSingleLevel {\n  /**\n   * Label text for the navigation item\n   */\n  @Prop() label!: string;\n\n  /**\n   * Material icon name\n   */\n  @Prop() icon: string = 'radio_button_unchecked';\n\n  /**\n   * Whether the item is currently active/selected\n   */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * Event emitted when the navigation item is clicked\n   */\n  @Event() bhItemClick!: EventEmitter<void>;\n\n  private handleClick = () => {\n    this.bhItemClick.emit();\n  };\n\n  private getItemClasses() {\n    return {\n      'page-navigation-single-level': true,\n      'page-navigation-animate-smooth': true,\n      'active': this.isActive,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getItemClasses()} onClick={() => this.handleClick()}>\n          <div class=\"page-navigation-item-content\">\n            <span class=\"page-navigation-item-icon material-symbols-outlined\">\n              {this.icon}\n            </span>\n            <span class=\"page-navigation-item-label\">{this.label}</span>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","index"],"mappings":"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"}