@actabldesign/bellhop-core 0.0.3 → 0.0.4

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

@@ -0,0 +1,128 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.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: 'fcb47a9bab423243efac149251f6afbc313568c3', class: notificationClasses, role: "alert", part: "container" }, index.h("div", { key: 'f6119ec2b3ab549dde69e1817c39bb521c638c5e', class: "notification-content" }, index.h("div", { key: '9bcf5d938af89f34497e1a7d4bf80430dd79f5f3', class: "notification-icon-wrapper" }, index.h("bh-featured-icon", { key: 'ddfd7940aa41cce00a2e3cfc6aec3b85ca8628da', icon: this.getIconName(), color: this.getIconColor(), size: "sm", iconStyle: this.getIconStyle() })), index.h("div", { key: '4d77b106b4aeb8f550400baeed83efdf24c363e5', class: "notification-text" }, index.h("div", { key: '1933de95730dbb964e2bf17d065eb1848f3edb74', class: "notification-text-wrapper" }, this.notificationTitle && (index.h("h3", { key: '6925b30a9fb845344bd8fcb517d2f31b2b5c755e', class: "notification-title" }, this.notificationTitle)), this.description && (index.h("p", { key: '2d38a7733397cd7e596b7794e0c387ff97002ae2', class: "notification-description" }, this.description))), (this.actionText || this.dismissText) && (index.h("div", { key: 'da9933044826eb1e46fbe308ef6bb3feff7d3f40', class: "notification-actions" }, this.dismissText && (index.h("bh-button", { key: '12c2caeb3cba2d40fbd1c095dcc652b3c7bf94cf', hierarchy: "quaternary", size: "sm", label: this.dismissText, icon: "none", onBhClick: this.handleDismiss })), this.actionText && (index.h("bh-button", { key: 'eb72fa328044931470e557f027812ec283b8db24', hierarchy: "quaternary", size: "sm", label: this.actionText, icon: "none", onBhClick: this.handleAction })))))), this.dismissible && (index.h("button", { key: '7bd46d3fec9ea41a24cd2fc975b3b526c38a3934', class: "notification-close", onClick: this.handleClose, "aria-label": "Close notification" }, index.h("span", { key: '6c680f4500026ac18dc3cf7587042ba9edf72ec2', class: "material-symbols-outlined close-icon" }, "close")))));
+    }
+};
+BhNotification.style = bhNotificationCss;
+
+exports.bh_notification = BhNotification;
+//# sourceMappingURL=bh-notification.entry.cjs.js.map

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

@@ -0,0 +1,48 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.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: '801f6ce9fa33bff82ae0572ca4233d62101bff5a' }, index.h("div", { key: 'b485e3a258658dadebda21a9f329bb676a737e6d', class: this.getItemClasses(), onClick: this.handleClick }, index.h("div", { key: '3cebeec1f7255591c5a2405198d65f7cc637fe02', class: "page-navigation-child-content" }, index.h("span", { key: '982dbda8defddf8a04cbd4831d68090816bb8228', class: "page-navigation-child-label" }, this.label), this.badge !== undefined && this.showBadge && (index.h("span", { key: '623a58963bbbbd94d5a2934165a4f5e821ef3a56', 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/dist/cjs/bh-page-navigation-multi-level_2.cjs.entry.js

@@ -0,0 +1,146 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.js');
+
+const bhPageNavigationMultiLevelCss = "@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-multi-level{margin:var(--spacing-none) var(--spacing-xs)}.page-navigation-multi-level-parent{display:flex;align-items:center;padding:var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:40px;max-height:44px;box-sizing:border-box;border-radius:var(--radius-sm);background-color:transparent;border:1px solid transparent}.page-navigation-multi-level.has-active-child .page-navigation-multi-level-parent{background-color:transparent;border:1px solid transparent}.page-navigation-multi-level-parent:hover{background-color:var(--color-neutral-50) !important}.page-navigation-children{margin-top:var(--spacing-xs);margin-bottom:var(--spacing-xs);position:relative;margin-left:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-xs);max-height:1000px;opacity:1;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)}.page-navigation-children.collapsed{max-height:0;opacity:0;margin-top:0;margin-bottom:0}.page-navigation-children::before{content:'';position:absolute;left:0;top:-2px;height:calc(100% + 4px);width:2px;background-color:var(--color-neutral-200);margin-left:var(--spacing-sm);z-index:2}.page-navigation-children.animate-slide-down-enter{animation:slideDownEnter 0.15s ease-out forwards}.page-navigation-children.animate-slide-down-exit{animation:slideDownExit 0.15s ease-out forwards}@keyframes slideDownEnter{from{opacity:0;max-height:0;transform:translateY(-10px)}to{opacity:1;max-height:1000px;transform:translateY(0)}}@keyframes slideDownExit{from{opacity:1;max-height:1000px;transform:translateY(0)}to{opacity:0;max-height:0;transform:translateY(-10px)}}.page-navigation-item-content{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.page-navigation-item-icon{flex-shrink:0;color:var(--color-neutral-600);font-size:20px;width:20px;height:20px;transition:color 0.15s ease}.page-navigation-animate-smooth{transform-origin:top center;transition:all var(--animation-duration-normal, 0.2s) var(--animation-ease-enter, ease)}.page-navigation-chevron-icon{flex-shrink:0;color:var(--color-neutral-600);font-size:20px;width:20px;height:20px;transition:color 0.15s ease, transform var(--animation-duration-fast, 0.1s) var(--animation-ease-smooth, ease)}.page-navigation-chevron-icon.expanded{transform:rotate(180deg)}.page-navigation-multi-level.has-active-child .page-navigation-item-icon{color:var(--color-neutral-900)}.page-navigation-item-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-multi-level.has-active-child .page-navigation-item-label{color:var(--color-neutral-900);font-weight:600}";
+
+const BhPageNavigationMultiLevel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhToggle = index.createEvent(this, "bhToggle");
+        this.bhChildClick = index.createEvent(this, "bhChildClick");
+        this.bhAddClick = index.createEvent(this, "bhAddClick");
+    }
+    /**
+     * Label text for the navigation item
+     */
+    label;
+    /**
+     * Material icon name
+     */
+    icon = 'radio_button_unchecked';
+    /**
+     * Optional badge text/number to display
+     */
+    badge;
+    /**
+     * Child navigation items
+     */
+    childItems = [];
+    /**
+     * Whether the item is expanded to show children
+     */
+    isExpanded = false;
+    /**
+     * Internal state for hover
+     */
+    isHovered = false;
+    /**
+     * Internal state for animation
+     */
+    isAnimating = false;
+    /**
+     * Animation class
+     */
+    animationClass = '';
+    /**
+     * Event emitted when the parent item is clicked (to toggle expansion)
+     */
+    bhToggle;
+    /**
+     * Event emitted when a child item is clicked
+     */
+    bhChildClick;
+    /**
+     * Event emitted when add button is clicked
+     */
+    bhAddClick;
+    handleExpandedChange(newValue) {
+        if (newValue) {
+            this.isAnimating = true;
+            this.animationClass = 'animate-slide-down-enter';
+        }
+        else if (this.isAnimating) {
+            this.animationClass = 'animate-slide-down-exit';
+            setTimeout(() => {
+                this.isAnimating = false;
+                this.animationClass = '';
+            }, 150);
+        }
+    }
+    get hasActiveChild() {
+        return this.childItems.some(child => child.isActive);
+    }
+    handleParentClick = () => {
+        this.bhToggle.emit();
+    };
+    handleChildClick = (index) => {
+        this.bhChildClick.emit(index);
+    };
+    handleAddClick = (e) => {
+        e.stopPropagation();
+        this.bhAddClick.emit();
+    };
+    getItemClasses() {
+        return {
+            'page-navigation-multi-level': true,
+            'page-navigation-animate-smooth': true,
+            'has-active-child': this.hasActiveChild,
+            'expanded': this.isExpanded,
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: 'db478fe5c9492c19a41acf68577cb78a00ebdc4f' }, index.h("div", { key: 'a968be18bbdac5bc39d45cf59b544e5384f7cdfc', class: this.getItemClasses() }, index.h("div", { key: 'da3f4a3b6246f50b27d2657080488135b85719be', class: "page-navigation-multi-level-parent", onClick: this.handleParentClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, index.h("div", { key: '64933e8c68ae1238581e4c81f3cae937e3199b1f', class: "page-navigation-item-content" }, !this.isHovered && (index.h("span", { key: 'd8369d06118533f5cdb2e228bc72cc0aafc71b79', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon)), this.isHovered && (index.h("span", { key: '852f49d37fa5d47d656aad732c46f23a4438be95', class: {
+                'page-navigation-chevron-icon': true,
+                'material-symbols-outlined': true,
+                'expanded': this.isExpanded,
+            } }, "expand_more")), index.h("span", { key: '5737917e070122fe1b74ff693ed7afceb262ca1d', class: "page-navigation-item-label" }, this.label), index.h("bh-button", { key: 'b3e29f3b6e7b64daa42a6a9a541cf0278b7dc6b5', hierarchy: "tertiary", icon: "only", size: "xs", iconName: "add", onClick: this.handleAddClick }))), (this.isExpanded || this.isAnimating) && (index.h("div", { key: 'e9f386ef6ca8757d6aad84d4e90c776e9ee82be8', class: `page-navigation-children ${this.animationClass}` }, this.childItems.map((child, index$1) => (index.h("bh-page-navigation-child", { key: index$1, label: child.label, badge: child.badge, showBadge: child.showBadge, isActive: child.isActive, onBhItemClick: () => this.handleChildClick(index$1) }))))))));
+    }
+    static get watchers() { return {
+        "isExpanded": ["handleExpandedChange"]
+    }; }
+};
+BhPageNavigationMultiLevel.style = bhPageNavigationMultiLevelCss;
+
+const bhPageNavigationSingleLevelCss = ".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)}.page-navigation-single-level{display:flex;align-items:center;padding:var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:40px;max-height:44px;box-sizing:border-box;border-radius:6px;margin:var(--spacing-none) var(--spacing-xs);background-color:transparent;border:1px solid transparent}.page-navigation-single-level.active{background-color:transparent;border:1px solid transparent}.page-navigation-single-level:hover{background-color:var(--color-neutral-50) !important}.page-navigation-multi-level{margin:var(--spacing-none) var(--spacing-xs)}.page-navigation-multi-level-parent{display:flex;align-items:center;padding:var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:40px;max-height:44px;box-sizing:border-box;border-radius:var(--radius-sm);background-color:transparent;border:1px solid transparent}.page-navigation-multi-level.has-active-child .page-navigation-multi-level-parent{background-color:transparent;border:1px solid transparent}.page-navigation-multi-level-parent:hover{background-color:var(--color-neutral-50) !important}.page-navigation-children{margin-top:var(--spacing-xs);margin-bottom:var(--spacing-xs);position:relative;margin-left:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-xs);max-height:1000px;opacity:1;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)}.page-navigation-children.collapsed{max-height:0;opacity:0;margin-top:0;margin-bottom:0}.page-navigation-children::before{content:'';position:absolute;left:0;top:-2px;height:calc(100% + 4px);width:2px;background-color:var(--color-neutral-200);margin-left:var(--spacing-sm);z-index:2}.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:hover:not(.active)::after{content:'';position:absolute;left:-20px;top:0;bottom:0;width:20px;background-color:var(--color-neutral-100);z-index:1;border-radius:var(--radius-sm)}.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-item-content,.page-navigation-child-content{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.page-navigation-item-icon{flex-shrink:0;color:var(--color-neutral-600);font-size:20px;width:20px;height:20px;transition:color 0.15s ease}.page-navigation-animate-smooth{transform-origin:top center;transition:all var(--animation-duration-normal) var(--animation-ease-enter)}.page-navigation-chevron-icon{flex-shrink:0;color:var(--color-neutral-600);font-size:20px;width:20px;height:20px;transition:color 0.15s ease, transform var(--animation-duration-fast) var(--animation-ease-smooth)}.page-navigation-chevron-icon.expanded{transform:rotate(180deg)}.page-navigation-single-level.active .page-navigation-item-icon,.page-navigation-multi-level.has-active-child .page-navigation-item-icon{color:var(--color-neutral-900)}.page-navigation-item-label,.page-navigation-child-label{font-family:'Inter', sans-serif;font-size:14px;font-weight:500;line-height:20px;color:var(--color-neutral-600);flex:1;transition:all 0.15s ease}.page-navigation-single-level.active .page-navigation-item-label,.page-navigation-multi-level.has-active-child .page-navigation-item-label{color:var(--color-neutral-900);font-weight:600}.page-navigation-child.active .page-navigation-child-label{color:var(--color-brand-600);font-weight:600}.page-navigation-item-badge,.page-navigation-child-badge{margin-left:auto}@media (max-width: 768px){.page-navigation{width:280px;min-width:280px}}";
+
+const BhPageNavigationSingleLevel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhItemClick = index.createEvent(this, "bhItemClick");
+    }
+    /**
+     * Label text for the navigation item
+     */
+    label;
+    /**
+     * Material icon name
+     */
+    icon = 'radio_button_unchecked';
+    /**
+     * 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-single-level': true,
+            'page-navigation-animate-smooth': true,
+            'active': this.isActive,
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: '1f58160e16d18bfe049035d33b48f14b11b676ae' }, index.h("div", { key: 'c5c44e67354359238f67df33c67e81ec2bbaf478', class: this.getItemClasses(), onClick: () => this.handleClick() }, index.h("div", { key: 'c3c3b27eaeb65d8325e5e92c428831af58a48448', class: "page-navigation-item-content" }, index.h("span", { key: 'e0e5315088e7f1c820fad38d2ae095494dc581bb', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon), index.h("span", { key: '37d30adc75791076a84c58f92fd93ad7c16267f0', class: "page-navigation-item-label" }, this.label)))));
+    }
+};
+BhPageNavigationSingleLevel.style = bhPageNavigationSingleLevelCss;
+
+exports.bh_page_navigation_multi_level = BhPageNavigationMultiLevel;
+exports.bh_page_navigation_single_level = BhPageNavigationSingleLevel;
+//# sourceMappingURL=bh-page-navigation-multi-level.bh-page-navigation-single-level.entry.cjs.js.map

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

@@ -0,0 +1,72 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.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 = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhItemClick = index.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 (index.h(index.Host, { key: 'e45e8ce3b4f0357f3e9a388083483a710b1480da' }, index.h("div", { key: 'fd2b83db1152ee0da4a3700c54bc19eb442e9b7b', class: "page-navigation" }, index.h("div", { key: 'f0ad1b96f3f1e04e38d4d9d440d3e5efe0d172a4', class: "page-navigation-header" }, index.h("h2", { key: 'd015280380f4caad460fbb919e82c774d812db98', class: "page-navigation-title" }, this.navTitle)), index.h("nav", { key: 'ac52f5b69c75376db23ce23de1ee76656cc392f3', class: "page-navigation-list" }, this.items.map(item => item.type === 'single' ? (index.h("bh-page-navigation-single-level", { key: item.id, label: item.label, icon: item.icon, isActive: item.isActive || false, onBhItemClick: () => this.handleSingleLevelClick(item.id) })) : (index.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"]
+    }; }
+};
+BhPageNavigation.style = bhPageNavigationCss;
+
+exports.bh_page_navigation = BhPageNavigation;
+//# sourceMappingURL=bh-page-navigation.entry.cjs.js.map

package/dist/cjs/bh-pagination-BJ1azyCc.js

@@ -0,0 +1,152 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.js');
+
+const bhPaginationCss = ":host{display:block;font-family:var(--font-family-body, 'Inter', sans-serif)}.pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4, 1rem);padding:var(--sp-3, 0.75rem) var(--sp-4, 1rem);background-color:var(--color-white, #fff);border-top:1px solid var(--color-neutral-200, #e2e4eb)}.pagination-sm{padding:var(--sp-2, 0.5rem) var(--sp-3, 0.75rem);gap:var(--sp-3, 0.75rem)}.pagination-sm .pagination-info-text,.pagination-sm .pagination-page-size-label{font-size:0.75rem}.pagination-sm .pagination-btn{width:28px;height:28px}.pagination-sm .pagination-btn .material-symbols-outlined{font-size:18px}.pagination-sm .pagination-select{height:28px;font-size:0.75rem;padding:0 var(--sp-5, 1.25rem) 0 var(--sp-2, 0.5rem)}.pagination-md{}.pagination-lg{padding:var(--sp-4, 1rem) var(--sp-5, 1.25rem);gap:var(--sp-5, 1.25rem)}.pagination-lg .pagination-info-text,.pagination-lg .pagination-page-size-label{font-size:0.9375rem}.pagination-lg .pagination-btn{width:40px;height:40px}.pagination-lg .pagination-btn .material-symbols-outlined{font-size:24px}.pagination-lg .pagination-select{height:40px;font-size:0.9375rem}.pagination-disabled{opacity:0.5;pointer-events:none}.pagination-info{display:flex;align-items:center}.pagination-info-text{font-size:0.875rem;color:var(--color-neutral-600, #5c627a);white-space:nowrap}.pagination-controls{display:flex;align-items:center;gap:var(--sp-4, 1rem)}.pagination-page-size{display:flex;align-items:center;gap:var(--sp-2, 0.5rem)}.pagination-page-size-label{font-size:0.875rem;color:var(--color-neutral-600, #5c627a);white-space:nowrap}.pagination-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--color-white, #fff);border:1px solid var(--color-neutral-300, #c0c4d4);border-radius:var(--radius-md, 6px);padding:0 var(--sp-6, 1.5rem) 0 var(--sp-3, 0.75rem);height:32px;font-size:0.875rem;color:var(--color-neutral-900, #141624);cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%235c627a'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 4px center;background-size:16px}.pagination-select:hover:not(:disabled){border-color:var(--color-neutral-400, #939ab4)}.pagination-select:focus{outline:none;border-color:var(--color-brand-500, #6366f1);box-shadow:0 0 0 3px var(--color-brand-100, #e0e1fc)}.pagination-select:disabled{background-color:var(--color-neutral-100, #f0f1f5);cursor:not-allowed}.pagination-nav{display:flex;align-items:center;gap:var(--sp-1, 0.25rem)}.pagination-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:var(--radius-md, 6px);background-color:transparent;color:var(--color-neutral-600, #5c627a);cursor:pointer;transition:background-color 0.15s ease, color 0.15s ease}.pagination-btn .material-symbols-outlined{font-size:20px;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20}.pagination-btn:hover:not(:disabled){background-color:var(--color-neutral-100, #f0f1f5);color:var(--color-neutral-900, #141624)}.pagination-btn:focus{outline:none;box-shadow:0 0 0 2px var(--color-brand-100, #e0e1fc)}.pagination-btn:active:not(:disabled){background-color:var(--color-neutral-200, #e2e4eb)}.pagination-btn:disabled{opacity:0.4;cursor:not-allowed}@media (max-width: 640px){.pagination{flex-direction:column;align-items:stretch;gap:var(--sp-3, 0.75rem)}.pagination-info{justify-content:center}.pagination-controls{justify-content:center;flex-wrap:wrap}.pagination-page-size{width:100%;justify-content:center}.pagination-nav{justify-content:center}}";
+
+const BhPagination = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhPageChange = index.createEvent(this, "bhPageChange");
+        this.bhPageSizeChange = index.createEvent(this, "bhPageSizeChange");
+    }
+    /**
+     * Current page (1-indexed)
+     */
+    page = 1;
+    /**
+     * Total number of items
+     */
+    totalItems = 0;
+    /**
+     * Number of items per page
+     */
+    pageSize = 10;
+    /**
+     * Available page size options
+     */
+    pageSizeOptions = [10, 25, 50, 100];
+    /**
+     * Show page size selector
+     */
+    showPageSizeSelector = true;
+    /**
+     * Show item count info (e.g., "Showing 1 to 10 of 100 results")
+     */
+    showItemCount = true;
+    /**
+     * Show first/last page buttons
+     */
+    showFirstLastButtons = true;
+    /**
+     * Size variant of the pagination
+     */
+    size = 'md';
+    /**
+     * Whether the pagination is disabled
+     */
+    disabled = false;
+    /**
+     * Label for "Rows per page" text (for i18n)
+     */
+    rowsPerPageLabel = 'Rows per page:';
+    /**
+     * Label template for showing results (use {start}, {end}, {total} placeholders)
+     */
+    showingResultsLabel = 'Showing {start} to {end} of {total} results';
+    /**
+     * Label template for page info when total items unknown (use {page}, {totalPages} placeholders)
+     */
+    pageInfoLabel = 'Page {page} of {totalPages}';
+    internalPage = 1;
+    internalPageSize = 10;
+    /**
+     * Emitted when the page changes
+     */
+    bhPageChange;
+    /**
+     * Emitted when page size changes
+     */
+    bhPageSizeChange;
+    componentWillLoad() {
+        this.internalPage = this.page;
+        this.internalPageSize = this.pageSize;
+    }
+    get totalPages() {
+        return Math.max(1, Math.ceil(this.totalItems / this.internalPageSize));
+    }
+    get startItem() {
+        if (this.totalItems === 0)
+            return 0;
+        return (this.internalPage - 1) * this.internalPageSize + 1;
+    }
+    get endItem() {
+        return Math.min(this.internalPage * this.internalPageSize, this.totalItems);
+    }
+    get canGoPrevious() {
+        return this.internalPage > 1 && !this.disabled;
+    }
+    get canGoNext() {
+        return this.internalPage < this.totalPages && !this.disabled;
+    }
+    goToPage(newPage) {
+        if (this.disabled)
+            return;
+        const page = Math.max(1, Math.min(newPage, this.totalPages));
+        if (page !== this.internalPage) {
+            this.internalPage = page;
+            this.page = page;
+            this.bhPageChange.emit({ page, pageSize: this.internalPageSize });
+        }
+    }
+    handlePageSizeChange(event) {
+        if (this.disabled)
+            return;
+        const select = event.target;
+        const newPageSize = parseInt(select.value, 10);
+        if (newPageSize !== this.internalPageSize) {
+            this.internalPageSize = newPageSize;
+            this.pageSize = newPageSize;
+            // Reset to page 1 when page size changes, or adjust if current page is now out of bounds
+            const newTotalPages = Math.max(1, Math.ceil(this.totalItems / newPageSize));
+            const newPage = Math.min(this.internalPage, newTotalPages);
+            if (newPage !== this.internalPage) {
+                this.internalPage = newPage;
+                this.page = newPage;
+            }
+            this.bhPageSizeChange.emit({ page: this.internalPage, pageSize: newPageSize });
+        }
+    }
+    goToFirst = () => this.goToPage(1);
+    goToPrevious = () => this.goToPage(this.internalPage - 1);
+    goToNext = () => this.goToPage(this.internalPage + 1);
+    goToLast = () => this.goToPage(this.totalPages);
+    getInfoText() {
+        if (this.totalItems === 0) {
+            return 'No results';
+        }
+        if (this.showItemCount && this.totalItems > 0) {
+            return this.showingResultsLabel
+                .replace('{start}', String(this.startItem))
+                .replace('{end}', String(this.endItem))
+                .replace('{total}', String(this.totalItems));
+        }
+        return this.pageInfoLabel
+            .replace('{page}', String(this.internalPage))
+            .replace('{totalPages}', String(this.totalPages));
+    }
+    render() {
+        const paginationClasses = {
+            'pagination': true,
+            [`pagination-${this.size}`]: true,
+            'pagination-disabled': this.disabled,
+        };
+        return (index.h("div", { key: '9e9cbcde6a010fdbbbd809a3f576b40fe7f905cc', class: paginationClasses, role: "navigation", "aria-label": "Pagination" }, index.h("div", { key: '212d0b1627b0897ceecd0298e8928a4ec11441d7', class: "pagination-info" }, index.h("span", { key: 'ab37b52387fd66f583b67fd96ce396b6649d31d0', class: "pagination-info-text" }, this.getInfoText())), index.h("div", { key: '46793889c3efa38e28171759ea3fb2b22ddcb03c', class: "pagination-controls" }, this.showPageSizeSelector && (index.h("div", { key: '87eccc7848ef35ad61605d2b9539cf40add8a79c', class: "pagination-page-size" }, index.h("span", { key: 'b3ff61dceff7cc57240c724150fee5b199a17ed8', class: "pagination-page-size-label" }, this.rowsPerPageLabel), index.h("select", { key: 'ab2ddd0f5f2b3501ff06d5717f2ed543a3446651', class: "pagination-select", onChange: (e) => this.handlePageSizeChange(e), disabled: this.disabled, "aria-label": "Select page size" }, this.pageSizeOptions.map((size) => (index.h("option", { key: size, value: String(size), selected: size === this.internalPageSize }, size)))))), index.h("div", { key: 'fddb9153daa2703afbd384f972332040c76efa25', class: "pagination-nav" }, this.showFirstLastButtons && (index.h("button", { key: '5637468db69936eb008bf96d8e77ca8c860fa9e2', type: "button", class: "pagination-btn", onClick: this.goToFirst, disabled: !this.canGoPrevious, "aria-label": "Go to first page" }, index.h("span", { key: '37699a8026bdecf7858d3c5a0aa313f99acd6d28', class: "material-symbols-outlined" }, "first_page"))), index.h("button", { key: '590190edfc67218a19f647eb562b233d598cbbea', type: "button", class: "pagination-btn", onClick: this.goToPrevious, disabled: !this.canGoPrevious, "aria-label": "Go to previous page" }, index.h("span", { key: '45881aefbbc5e51adaa451ba3454a73a684613cb', class: "material-symbols-outlined" }, "chevron_left")), index.h("button", { key: '5d0592a32bba88bbe60f41318d3cd1d03a103f5d', type: "button", class: "pagination-btn", onClick: this.goToNext, disabled: !this.canGoNext, "aria-label": "Go to next page" }, index.h("span", { key: 'ae875c91c0d56757df0a78dcd645958e08e3ebde', class: "material-symbols-outlined" }, "chevron_right")), this.showFirstLastButtons && (index.h("button", { key: 'd97749c9c057100f145546b8a163681eb29b7358', type: "button", class: "pagination-btn", onClick: this.goToLast, disabled: !this.canGoNext, "aria-label": "Go to last page" }, index.h("span", { key: '58adc8bcac84c4af6bc67650e2fef83dfbeaa1e7', class: "material-symbols-outlined" }, "last_page")))))));
+    }
+};
+BhPagination.style = bhPaginationCss;
+
+exports.BhPagination = BhPagination;
+//# sourceMappingURL=bh-pagination-BJ1azyCc.js.map
+
+//# sourceMappingURL=bh-pagination-BJ1azyCc.js.map