@actabldesign/bellhop-core 0.0.3 → 0.0.4

package/dist/components/bh-month-picker.js

@@ -0,0 +1,233 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-ChfLhYiJ.js';
+import { d as defineCustomElement$8 } from './p-BFhwq3_y.js';
+import { d as defineCustomElement$7 } from './p-Bs2Z3XIQ.js';
+import { d as defineCustomElement$6 } from './p-DufL1yr4.js';
+import { d as defineCustomElement$5 } from './p-DkGh2r0W.js';
+import { d as defineCustomElement$4 } from './p-SkkbcLa0.js';
+import { d as defineCustomElement$3 } from './p-DW54267I.js';
+import { d as defineCustomElement$2 } from './p-5LJWVh2v.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$1 = /*@__PURE__*/ proxyCustomElement(class BhMonthPicker extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhChange = createEvent(this, "bhChange");
+        this.bhMonthYearSelect = 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 (h(Host, { key: '0589ee8d12120966f1e16614bb4240af8cc704ef' }, h("div", { key: '7183af3b3f2ca24a6b9429123b69d642babf5017', class: "month-picker-container" }, this.variant === 'dropdown-outlined' && (h("div", { key: '6d8ff65f93cadf2f9310ead4aad911e6a17aa6e3', class: "month-picker-trigger", onClick: this.handleTriggerClick }, h("bh-button", { key: '9b12957ab1c7aee12ca02c283e207a55d555c40d', hierarchy: "secondary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'dropdown-ghost' && (h("div", { key: '507ef5131209567f9bc715b6a33e6af962408186', class: "month-picker-trigger", onClick: this.handleTriggerClick }, h("bh-button", { key: '02d266b0a9df4acbe87beaf67bfe162fbcf9da62', hierarchy: "tertiary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'input' && (h("div", { key: 'd7d103e871c3324809abc25d60ba4e7bc64342b5', class: "month-picker-trigger input-field-container" }, h("bh-input-text", { key: '5c9ce346d9b29ce131a32a6bc021fe98c48fd690', 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 }), h("div", { key: 'f0808d5ea14a9d6f75bf2656b06878c61196a36a', class: "calendar-icon-overlay", onClick: this.handleTriggerClick }))), h("div", { key: '53973ee2b582a3aa31cc1dad51028dfa69098f27', class: "month-picker-menu-container" }, h("bh-picker-menu", { key: '6fcb615cc650fc6e139634bae3de529ba3ffa481', 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) && (h("div", { key: 'd142281cbda719b7df39015eab43da3d118ceeed', class: "month-picker-backdrop", onClick: this.handleBackdropClick }))));
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+    static get style() { return bhMonthPickerCss; }
+}, [769, "bh-month-picker", {
+        "variant": [1],
+        "minYear": [2, "min-year"],
+        "maxYear": [2, "max-year"],
+        "disabled": [4],
+        "disabledMonths": [16],
+        "label": [1],
+        "placeholder": [1],
+        "inputWidth": [1, "input-width"],
+        "showLabel": [4, "show-label"],
+        "showFooter": [4, "show-footer"],
+        "value": [16],
+        "selectedValue": [32],
+        "tempSelection": [32],
+        "isMenuOpen": [32],
+        "isMenuClosing": [32]
+    }, undefined, {
+        "value": ["handleValueChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-month-picker", "bh-button", "bh-input-text", "bh-label", "bh-loader-spinner", "bh-month-picker-content", "bh-picker-menu", "bh-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-month-picker":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhMonthPicker$1);
+            }
+            break;
+        case "bh-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "bh-input-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "bh-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "bh-loader-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "bh-month-picker-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "bh-picker-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BhMonthPicker = BhMonthPicker$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhMonthPicker, defineCustomElement };
+//# sourceMappingURL=bh-month-picker.js.map
+
+//# sourceMappingURL=bh-month-picker.js.map

package/dist/components/bh-nav-item.js

@@ -0,0 +1,9 @@
+import { B as BhNavItem$1, d as defineCustomElement$1 } from './p-Df5drD7C.js';
+
+const BhNavItem = BhNavItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhNavItem, defineCustomElement };
+//# sourceMappingURL=bh-nav-item.js.map
+
+//# sourceMappingURL=bh-nav-item.js.map

package/dist/components/bh-notification.js

@@ -0,0 +1,175 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-ChfLhYiJ.js';
+import { d as defineCustomElement$4 } from './p-BFhwq3_y.js';
+import { d as defineCustomElement$3 } from './p-DQUicoqi.js';
+import { d as defineCustomElement$2 } from './p-DkGh2r0W.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$1 = /*@__PURE__*/ proxyCustomElement(class BhNotification extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhAction = createEvent(this, "bhAction");
+        this.bhDismiss = createEvent(this, "bhDismiss");
+        this.bhClose = 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 (h("div", { key: 'fcb47a9bab423243efac149251f6afbc313568c3', class: notificationClasses, role: "alert", part: "container" }, h("div", { key: 'f6119ec2b3ab549dde69e1817c39bb521c638c5e', class: "notification-content" }, h("div", { key: '9bcf5d938af89f34497e1a7d4bf80430dd79f5f3', class: "notification-icon-wrapper" }, h("bh-featured-icon", { key: 'ddfd7940aa41cce00a2e3cfc6aec3b85ca8628da', icon: this.getIconName(), color: this.getIconColor(), size: "sm", iconStyle: this.getIconStyle() })), h("div", { key: '4d77b106b4aeb8f550400baeed83efdf24c363e5', class: "notification-text" }, h("div", { key: '1933de95730dbb964e2bf17d065eb1848f3edb74', class: "notification-text-wrapper" }, this.notificationTitle && (h("h3", { key: '6925b30a9fb845344bd8fcb517d2f31b2b5c755e', class: "notification-title" }, this.notificationTitle)), this.description && (h("p", { key: '2d38a7733397cd7e596b7794e0c387ff97002ae2', class: "notification-description" }, this.description))), (this.actionText || this.dismissText) && (h("div", { key: 'da9933044826eb1e46fbe308ef6bb3feff7d3f40', class: "notification-actions" }, this.dismissText && (h("bh-button", { key: '12c2caeb3cba2d40fbd1c095dcc652b3c7bf94cf', hierarchy: "quaternary", size: "sm", label: this.dismissText, icon: "none", onBhClick: this.handleDismiss })), this.actionText && (h("bh-button", { key: 'eb72fa328044931470e557f027812ec283b8db24', hierarchy: "quaternary", size: "sm", label: this.actionText, icon: "none", onBhClick: this.handleAction })))))), this.dismissible && (h("button", { key: '7bd46d3fec9ea41a24cd2fc975b3b526c38a3934', class: "notification-close", onClick: this.handleClose, "aria-label": "Close notification" }, h("span", { key: '6c680f4500026ac18dc3cf7587042ba9edf72ec2', class: "material-symbols-outlined close-icon" }, "close")))));
+    }
+    static get style() { return bhNotificationCss; }
+}, [769, "bh-notification", {
+        "type": [1],
+        "notificationTitle": [1, "notification-title"],
+        "description": [1],
+        "actionText": [1, "action-text"],
+        "dismissText": [1, "dismiss-text"],
+        "dismissible": [4],
+        "icon": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-notification", "bh-button", "bh-featured-icon", "bh-loader-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-notification":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhNotification$1);
+            }
+            break;
+        case "bh-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "bh-featured-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-loader-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BhNotification = BhNotification$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhNotification, defineCustomElement };
+//# sourceMappingURL=bh-notification.js.map
+
+//# sourceMappingURL=bh-notification.js.map

package/dist/components/bh-page-navigation-child.js

@@ -0,0 +1,9 @@
+import { B as BhPageNavigationChild$1, d as defineCustomElement$1 } from './p-B2edfvL2.js';
+
+const BhPageNavigationChild = BhPageNavigationChild$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhPageNavigationChild, defineCustomElement };
+//# sourceMappingURL=bh-page-navigation-child.js.map
+
+//# sourceMappingURL=bh-page-navigation-child.js.map

package/dist/components/bh-page-navigation-multi-level.js

@@ -0,0 +1,9 @@
+import { B as BhPageNavigationMultiLevel$1, d as defineCustomElement$1 } from './p-B8MWhPHT.js';
+
+const BhPageNavigationMultiLevel = BhPageNavigationMultiLevel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhPageNavigationMultiLevel, defineCustomElement };
+//# sourceMappingURL=bh-page-navigation-multi-level.js.map
+
+//# sourceMappingURL=bh-page-navigation-multi-level.js.map

package/dist/components/bh-page-navigation-single-level.js

@@ -0,0 +1,9 @@
+import { B as BhPageNavigationSingleLevel$1, d as defineCustomElement$1 } from './p-D6w8lxZi.js';
+
+const BhPageNavigationSingleLevel = BhPageNavigationSingleLevel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhPageNavigationSingleLevel, defineCustomElement };
+//# sourceMappingURL=bh-page-navigation-single-level.js.map
+
+//# sourceMappingURL=bh-page-navigation-single-level.js.map

package/dist/components/bh-page-navigation.js

@@ -0,0 +1,129 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-ChfLhYiJ.js';
+import { d as defineCustomElement$6 } from './p-BFhwq3_y.js';
+import { d as defineCustomElement$5 } from './p-DkGh2r0W.js';
+import { d as defineCustomElement$4 } from './p-B2edfvL2.js';
+import { d as defineCustomElement$3 } from './p-B8MWhPHT.js';
+import { d as defineCustomElement$2 } from './p-D6w8lxZi.js';
+
+const bhPageNavigationCss = "@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{width:320px;min-width:280px;background-color:var(--color-white);padding:var(--spacing-xl) var(--spacing-md);font-family:var(--font-inter);height:100vh;overflow-y:auto;border-right:1px solid var(--color-neutral-200);box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.page-navigation-header{margin-bottom:var(--spacing-3xl)}.page-navigation-title{font-size:var(--text-xl-size);font-weight:var(--weight-semibold);line-height:var(--text-xl-line);color:var(--color-neutral-900);padding:var(--spacing-none) var(--spacing-xl);margin:0}.page-navigation-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}@media (max-width: 768px){.page-navigation{width:280px;min-width:280px}}";
+
+const BhPageNavigation$1 = /*@__PURE__*/ proxyCustomElement(class BhPageNavigation extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhItemClick = createEvent(this, "bhItemClick");
+    }
+    /**
+     * Title displayed at the top of the navigation
+     */
+    navTitle = 'Navigation';
+    /**
+     * Array of navigation items
+     */
+    navigationItems = [];
+    /**
+     * Internal state to track navigation items
+     */
+    items = [];
+    /**
+     * Event emitted when a navigation item is clicked
+     */
+    bhItemClick;
+    handleNavigationItemsChange(newValue) {
+        this.items = [...newValue];
+    }
+    componentWillLoad() {
+        this.items = [...this.navigationItems];
+    }
+    clearAllSelections() {
+        this.items = this.items.map(item => ({
+            ...item,
+            isActive: false,
+            children: item.children?.map(child => ({ ...child, isActive: false })),
+        }));
+    }
+    handleSingleLevelClick = (itemId) => {
+        this.clearAllSelections();
+        this.items = this.items.map(item => item.id === itemId ? { ...item, isActive: true } : item);
+        this.bhItemClick.emit({ itemId });
+    };
+    handleMultiLevelToggle = (itemId) => {
+        this.items = this.items.map(item => item.id === itemId ? { ...item, isExpanded: !item.isExpanded } : item);
+    };
+    handleMultiLevelChildClick = (itemId, childIndex) => {
+        this.clearAllSelections();
+        this.items = this.items.map(item => item.id === itemId && item.children
+            ? {
+                ...item,
+                children: item.children.map((child, index) => ({
+                    ...child,
+                    isActive: index === childIndex,
+                })),
+            }
+            : item);
+        this.bhItemClick.emit({ itemId, childIndex });
+    };
+    render() {
+        return (h(Host, { key: 'e45e8ce3b4f0357f3e9a388083483a710b1480da' }, h("div", { key: 'fd2b83db1152ee0da4a3700c54bc19eb442e9b7b', class: "page-navigation" }, h("div", { key: 'f0ad1b96f3f1e04e38d4d9d440d3e5efe0d172a4', class: "page-navigation-header" }, h("h2", { key: 'd015280380f4caad460fbb919e82c774d812db98', class: "page-navigation-title" }, this.navTitle)), h("nav", { key: 'ac52f5b69c75376db23ce23de1ee76656cc392f3', class: "page-navigation-list" }, this.items.map(item => item.type === 'single' ? (h("bh-page-navigation-single-level", { key: item.id, label: item.label, icon: item.icon, isActive: item.isActive || false, onBhItemClick: () => this.handleSingleLevelClick(item.id) })) : (h("bh-page-navigation-multi-level", { key: item.id, label: item.label, icon: item.icon, childItems: item.children || [], isExpanded: item.isExpanded || false, onBhToggle: () => this.handleMultiLevelToggle(item.id), onBhChildClick: (e) => this.handleMultiLevelChildClick(item.id, e.detail) })))))));
+    }
+    static get watchers() { return {
+        "navigationItems": ["handleNavigationItemsChange"]
+    }; }
+    static get style() { return bhPageNavigationCss; }
+}, [769, "bh-page-navigation", {
+        "navTitle": [1, "nav-title"],
+        "navigationItems": [16],
+        "items": [32]
+    }, undefined, {
+        "navigationItems": ["handleNavigationItemsChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-page-navigation", "bh-button", "bh-loader-spinner", "bh-page-navigation-child", "bh-page-navigation-multi-level", "bh-page-navigation-single-level"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-page-navigation":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhPageNavigation$1);
+            }
+            break;
+        case "bh-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "bh-loader-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "bh-page-navigation-child":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "bh-page-navigation-multi-level":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-page-navigation-single-level":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BhPageNavigation = BhPageNavigation$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhPageNavigation, defineCustomElement };
+//# sourceMappingURL=bh-page-navigation.js.map
+
+//# sourceMappingURL=bh-page-navigation.js.map

package/dist/components/bh-pagination.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BhPagination extends Components.BhPagination, HTMLElement {}
+export const BhPagination: {
+    prototype: BhPagination;
+    new (): BhPagination;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/bh-pagination.js

@@ -0,0 +1,9 @@
+import { B as BhPagination$1, d as defineCustomElement$1 } from './p-CbeeTFys.js';
+
+const BhPagination = BhPagination$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhPagination, defineCustomElement };
+//# sourceMappingURL=bh-pagination.js.map
+
+//# sourceMappingURL=bh-pagination.js.map

package/dist/components/bh-pagination.js.map

@@ -0,0 +1 @@
+{"file":"bh-pagination.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/bh-picker-menu.js

@@ -0,0 +1,9 @@
+import { B as BhPickerMenu$1, d as defineCustomElement$1 } from './p-DW54267I.js';
+
+const BhPickerMenu = BhPickerMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhPickerMenu, defineCustomElement };
+//# sourceMappingURL=bh-picker-menu.js.map
+
+//# sourceMappingURL=bh-picker-menu.js.map