@actabldesign/bellhop-core 0.0.3 → 0.0.4

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

@@ -0,0 +1,71 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.js');
+
+const bhBadgeCss = ":host{display:inline-block}.badge{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);font-family:var(--font-inter);font-weight:var(--weight-medium);border-radius:var(--radius-full);white-space:nowrap;text-align:center;transition:all 0.2s ease;border:1px solid transparent;user-select:none;cursor:default}.badge-sm{padding:var(--spacing-xxs) var(--spacing-md);font-size:var(--text-sm-size);line-height:var(--text-xs-line)}.badge-md{padding:var(--spacing-xs) var(--spacing-lg);font-size:var(--text-sm-size);line-height:var(--text-sm-line)}.badge-lg{padding:var(--spacing-sm) var(--spacing-xl);font-size:var(--text-md-size);line-height:var(--text-md-line)}.badge-icon-dot{font-size:8px !important;width:8px;height:8px;line-height:1;flex-shrink:0;font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 16}.badge-sm .badge-icon-dot{font-size:6px !important;width:6px;height:6px}.badge-lg .badge-icon-dot{font-size:10px !important;width:10px;height:10px}.badge-icon-custom{font-size:16px !important;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16}.badge-sm .badge-icon-custom{font-size:12px !important}.badge-lg .badge-icon-custom{font-size:20px !important}.badge-label{flex-shrink:0;font-weight:inherit}.badge-dismiss{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;margin-left:var(--spacing-xxs);border-radius:var(--radius-full);transition:all 0.2s ease;width:16px;height:16px}.badge-dismiss-icon{font-size:14px !important;width:14px;height:14px;line-height:1;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14}.badge-sm .badge-dismiss{width:14px;height:14px}.badge-sm .badge-dismiss-icon{font-size:12px !important;width:12px;height:12px}.badge-lg .badge-dismiss{width:18px;height:18px}.badge-lg .badge-dismiss-icon{font-size:16px !important;width:16px;height:16px}.badge-dismiss:hover{background-color:rgba(255, 255, 255, 0.2)}.badge-dismiss:disabled{cursor:not-allowed;opacity:0.5}.badge-high.badge-gray{background-color:var(--color-neutral-200);color:var(--color-neutral-800)}.badge-high.badge-blue{background-color:var(--color-brand-200);color:var(--color-brand-800)}.badge-high.badge-red{background-color:var(--color-error-200);color:var(--color-error-800)}.badge-high.badge-yellow{background-color:var(--color-warning-200);color:var(--color-warning-800)}.badge-high.badge-green{background-color:var(--color-success-200);color:var(--color-success-800)}.badge-high.badge-purple{background-color:hsl(270, 70%, 85%);color:hsl(270, 70%, 35%)}.badge-high.badge-pink{background-color:hsl(330, 70%, 85%);color:hsl(330, 70%, 35%)}.badge-high.badge-orange{background-color:hsl(25, 90%, 85%);color:hsl(25, 90%, 35%)}.badge-high .badge-icon-gray-high,.badge-high .badge-dismiss-icon.badge-icon-gray-high{color:var(--color-neutral-800) !important}.badge-high .badge-icon-blue-high,.badge-high .badge-dismiss-icon.badge-icon-blue-high{color:var(--color-brand-800) !important}.badge-high .badge-icon-red-high,.badge-high .badge-dismiss-icon.badge-icon-red-high{color:var(--color-error-800) !important}.badge-high .badge-icon-yellow-high,.badge-high .badge-dismiss-icon.badge-icon-yellow-high{color:var(--color-warning-800) !important}.badge-high .badge-icon-green-high,.badge-high .badge-dismiss-icon.badge-icon-green-high{color:var(--color-success-800) !important}.badge-high .badge-icon-purple-high,.badge-high .badge-dismiss-icon.badge-icon-purple-high{color:hsl(270, 70%, 35%) !important}.badge-high .badge-icon-pink-high,.badge-high .badge-dismiss-icon.badge-icon-pink-high{color:hsl(330, 70%, 35%) !important}.badge-high .badge-icon-orange-high,.badge-high .badge-dismiss-icon.badge-icon-orange-high{color:hsl(25, 90%, 35%) !important}.badge-medium.badge-gray{background-color:var(--color-neutral-50);color:var(--color-neutral-700);border-color:var(--color-neutral-200)}.badge-medium.badge-blue{background-color:var(--color-brand-50);color:var(--color-brand-700);border-color:var(--color-brand-200)}.badge-medium.badge-red{background-color:var(--color-error-50);color:var(--color-error-700);border-color:var(--color-error-200)}.badge-medium.badge-yellow{background-color:var(--color-warning-50);color:var(--color-warning-700);border-color:var(--color-warning-200)}.badge-medium.badge-green{background-color:var(--color-success-50);color:var(--color-success-700);border-color:var(--color-success-200)}.badge-medium.badge-purple{background-color:hsl(270, 70%, 97%);color:hsl(270, 70%, 40%);border-color:hsl(270, 70%, 85%)}.badge-medium.badge-pink{background-color:hsl(330, 70%, 97%);color:hsl(330, 70%, 40%);border-color:hsl(330, 70%, 85%)}.badge-medium.badge-orange{background-color:hsl(25, 90%, 97%);color:hsl(25, 90%, 40%);border-color:hsl(25, 90%, 85%)}.badge-medium .badge-icon-gray-medium,.badge-medium .badge-dismiss-icon.badge-icon-gray-medium{color:var(--color-neutral-700) !important}.badge-medium .badge-icon-blue-medium,.badge-medium .badge-dismiss-icon.badge-icon-blue-medium{color:var(--color-brand-700) !important}.badge-medium .badge-icon-red-medium,.badge-medium .badge-dismiss-icon.badge-icon-red-medium{color:var(--color-error-700) !important}.badge-medium .badge-icon-yellow-medium,.badge-medium .badge-dismiss-icon.badge-icon-yellow-medium{color:var(--color-warning-700) !important}.badge-medium .badge-icon-green-medium,.badge-medium .badge-dismiss-icon.badge-icon-green-medium{color:var(--color-success-700) !important}.badge-medium .badge-icon-purple-medium,.badge-medium .badge-dismiss-icon.badge-icon-purple-medium{color:hsl(270, 70%, 40%) !important}.badge-medium .badge-icon-pink-medium,.badge-medium .badge-dismiss-icon.badge-icon-pink-medium{color:hsl(330, 70%, 40%) !important}.badge-medium .badge-icon-orange-medium,.badge-medium .badge-dismiss-icon.badge-icon-orange-medium{color:hsl(25, 90%, 40%) !important}.badge-low.badge-gray{background-color:transparent;color:var(--color-neutral-600);border-color:var(--color-neutral-600)}.badge-low.badge-blue{background-color:transparent;color:var(--color-brand-600);border-color:var(--color-brand-600)}.badge-low.badge-red{background-color:transparent;color:var(--color-error-600);border-color:var(--color-error-600)}.badge-low.badge-yellow{background-color:transparent;color:var(--color-warning-600);border-color:var(--color-warning-600)}.badge-low.badge-green{background-color:transparent;color:var(--color-success-600);border-color:var(--color-success-600)}.badge-low.badge-purple{background-color:transparent;color:hsl(270, 70%, 45%);border-color:hsl(270, 70%, 45%)}.badge-low.badge-pink{background-color:transparent;color:hsl(330, 70%, 45%);border-color:hsl(330, 70%, 45%)}.badge-low.badge-orange{background-color:transparent;color:hsl(25, 90%, 45%);border-color:hsl(25, 90%, 45%)}.badge-low .badge-icon-gray-low,.badge-low .badge-dismiss-icon.badge-icon-gray-low{color:var(--color-neutral-600) !important}.badge-low .badge-icon-blue-low,.badge-low .badge-dismiss-icon.badge-icon-blue-low{color:var(--color-brand-600) !important}.badge-low .badge-icon-red-low,.badge-low .badge-dismiss-icon.badge-icon-red-low{color:var(--color-error-600) !important}.badge-low .badge-icon-yellow-low,.badge-low .badge-dismiss-icon.badge-icon-yellow-low{color:var(--color-warning-600) !important}.badge-low .badge-icon-green-low,.badge-low .badge-dismiss-icon.badge-icon-green-low{color:var(--color-success-600) !important}.badge-low .badge-icon-purple-low,.badge-low .badge-dismiss-icon.badge-icon-purple-low{color:hsl(270, 70%, 45%) !important}.badge-low .badge-icon-pink-low,.badge-low .badge-dismiss-icon.badge-icon-pink-low{color:hsl(330, 70%, 45%) !important}.badge-low .badge-icon-orange-low,.badge-low .badge-dismiss-icon.badge-icon-orange-low{color:hsl(25, 90%, 45%) !important}.badge-disabled{opacity:0.5;cursor:not-allowed}";
+
+const BhBadge = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhDismiss = index.createEvent(this, "bhDismiss");
+    }
+    /**
+     * The color variant of the badge
+     */
+    variant = 'gray';
+    /**
+     * The size of the badge
+     */
+    size = 'md';
+    /**
+     * The emphasis level (affects background/border styling)
+     */
+    emphasis = 'high';
+    /**
+     * The text label to display
+     */
+    label = 'Label';
+    /**
+     * Material Symbols icon name, or 'dot' for a dot indicator
+     */
+    icon;
+    /**
+     * Whether the badge can be dismissed
+     */
+    dismissible = false;
+    /**
+     * Whether the badge is disabled
+     */
+    disabled = false;
+    /**
+     * Emitted when the dismiss button is clicked
+     */
+    bhDismiss;
+    handleDismiss = (e) => {
+        e.stopPropagation();
+        if (this.dismissible && !this.disabled) {
+            this.bhDismiss.emit();
+        }
+    };
+    render() {
+        const badgeClasses = {
+            'badge': true,
+            [`badge-${this.variant}`]: true,
+            [`badge-${this.size}`]: true,
+            [`badge-${this.emphasis}`]: true,
+            'badge-disabled': this.disabled,
+        };
+        const iconColorClass = `badge-icon-${this.variant}-${this.emphasis}`;
+        const isDot = this.icon === 'dot';
+        return (index.h("span", { key: '240872b520f525ebf20a8d96fd00bd920ef5db39', class: badgeClasses, part: "badge" }, this.icon && (index.h("span", { key: '0da3d63155c7bed85f4ce51165a0e98e5070f55c', class: {
+                'material-symbols-outlined': true,
+                [iconColorClass]: true,
+                'badge-icon-dot': isDot,
+                'badge-icon-custom': !isDot,
+            } }, isDot ? 'fiber_manual_record' : this.icon)), index.h("span", { key: 'e4556215b4af0bf56dd5058697d2aac9ecb62d75', class: "badge-label" }, this.label), this.dismissible && (index.h("button", { key: 'bd455d4b8b2dca8cc7596ed2dddcbe69ff11b9cf', class: "badge-dismiss", onClick: this.handleDismiss, disabled: this.disabled, type: "button", "aria-label": "Dismiss", part: "dismiss-button" }, index.h("span", { key: 'b4f8e3be6334840ff909cd3c60ec1d7725f09a77', class: `material-symbols-outlined badge-dismiss-icon ${iconColorClass}` }, "close")))));
+    }
+};
+BhBadge.style = bhBadgeCss;
+
+exports.bh_badge = BhBadge;
+//# sourceMappingURL=bh-badge.entry.cjs.js.map

package/dist/cjs/bh-bar-chart.cjs.entry.js

@@ -0,0 +1,164 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.js');
+
+const bhBarChartCss = "@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}.vertical-container{display:flex;align-items:flex-end;height:180px;width:100%}.vertical-container.simple{height:180px;width:100%}.bar-column.vertical{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;flex:1;gap:var(--spacing-xxs, 2px);margin:0 2px;border-radius:4px;transition:background-color 0.2s ease}.vertical-container.simple .bar-column.vertical{flex:1;margin:0 2px}.bar-segment.vertical{width:6px;border-radius:2px;min-height:2px;transition:all 0.3s ease;transform-origin:bottom}.horizontal-container{display:flex;flex-direction:column;justify-content:space-between;height:auto;min-height:140px;gap:var(--spacing-lg, 12px)}.horizontal-container.simple{height:auto;min-height:140px;gap:var(--spacing-lg, 12px)}.bar-row.horizontal{display:flex;align-items:center;width:100%;height:6px;min-height:6px;max-height:6px;gap:var(--spacing-xxs, 2px);margin:2px 0;border-radius:4px;transition:background-color 0.2s ease;padding:2px}.horizontal-container.simple .bar-row.horizontal{height:6px;min-height:6px;max-height:6px;margin:2px 0;padding:2px}.bar-segment.horizontal{height:100%;min-height:6px;max-height:6px;border-radius:2px;min-width:2px;transition:all 0.3s ease;transform-origin:left}.horizontal-container.simple .bar-segment.horizontal{min-width:2px;height:6px;min-height:6px;max-height:6px}.bar-column,.bar-row{cursor:pointer}.bar-column:hover{background-color:color-mix(in srgb, var(--color-neutral-100) 50%, transparent)}.bar-row:hover{background-color:color-mix(in srgb, var(--color-neutral-100) 50%, transparent)}.bar-column:hover .bar-segment,.bar-row:hover .bar-segment{opacity:0.9;filter:brightness(1.05)}.bar-chart-animated .bar-segment.vertical{animation:barGrowVertical 0.8s cubic-bezier(0.4, 0, 0.2, 1) both}.bar-chart-animated .bar-segment.horizontal{animation:barGrowHorizontal 0.8s cubic-bezier(0.4, 0, 0.2, 1) both}@keyframes barGrowVertical{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}@keyframes barGrowHorizontal{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}@media (prefers-reduced-motion: reduce){.bar-chart-animated .bar-segment.vertical,.bar-chart-animated .bar-segment.horizontal{animation:none;opacity:1;transform:none}}";
+
+const DEFAULT_COLORS = [
+    'var(--color-brand-600)',
+    'var(--color-orange-500)',
+    'var(--color-success-500)',
+    'var(--color-purple-600)',
+    'var(--color-accent-500)',
+    'var(--color-teal-500)',
+    'var(--color-lime-500)',
+    'var(--color-amber-500)',
+];
+const BhBarChart = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * Chart data
+     */
+    data = {
+        series: [
+            { name: 'Series 1', values: [30, 45, 20, 35, 50, 40, 60, 35, 25, 55, 40], color: '#94a3b8' },
+            { name: 'Series 2', values: [20, 25, 40, 30, 35, 45, 25, 30, 40, 20, 50], color: '#2563eb' },
+            { name: 'Series 3', values: [25, 15, 35, 20, 15, 20, 30, 25, 30, 35, 25], color: '#7c3aed' },
+        ],
+    };
+    /**
+     * Chart type: simple or stacked
+     */
+    type = 'stacked';
+    /**
+     * Chart orientation: vertical or horizontal
+     */
+    orientation = 'vertical';
+    /**
+     * Whether to animate the chart
+     */
+    animated = true;
+    /**
+     * Maximum height for vertical bars
+     */
+    maxHeight = 150;
+    /**
+     * Maximum width for horizontal bars
+     */
+    maxWidth = 200;
+    tooltipVisible = false;
+    tooltipX = 0;
+    tooltipY = 0;
+    tooltipHeader = '';
+    tooltipItems = [];
+    tooltipTotal = '';
+    showTooltipTotal = false;
+    processData() {
+        if (!this.data.series?.length || !this.data.series[0].values.length) {
+            return [];
+        }
+        const bars = [];
+        if (this.type === 'simple') {
+            const values = this.data.series[0].values;
+            const maxValue = Math.max(...values);
+            for (let i = 0; i < values.length; i++) {
+                const value = values[i] || 0;
+                const segments = [];
+                if (value > 0) {
+                    const height = (value / maxValue) * this.maxHeight;
+                    const width = (value / maxValue) * this.maxWidth;
+                    segments.push({
+                        value,
+                        height,
+                        width,
+                        color: DEFAULT_COLORS[i % DEFAULT_COLORS.length],
+                        seriesName: this.data.categories?.[i] || `Bar ${i + 1}`,
+                    });
+                }
+                bars.push({
+                    segments,
+                    totalValue: value,
+                    category: this.data.categories?.[i],
+                });
+            }
+        }
+        else {
+            const numBars = this.data.series[0].values.length;
+            const maxTotal = Math.max(...Array.from({ length: numBars }, (_, i) => this.data.series.reduce((sum, series) => sum + (series.values[i] || 0), 0)));
+            for (let barIndex = 0; barIndex < numBars; barIndex++) {
+                const segments = [];
+                let totalValue = 0;
+                for (const series of this.data.series) {
+                    const value = series.values[barIndex] || 0;
+                    totalValue += value;
+                    if (value > 0) {
+                        const height = (value / maxTotal) * this.maxHeight;
+                        const width = (value / maxTotal) * this.maxWidth;
+                        segments.push({
+                            value,
+                            height,
+                            width,
+                            color: series.color || '#64748b',
+                            seriesName: series.name,
+                        });
+                    }
+                }
+                bars.push({
+                    segments,
+                    totalValue,
+                    category: this.data.categories?.[barIndex],
+                });
+            }
+        }
+        return bars;
+    }
+    handleColumnHover = (event, bar, columnIndex) => {
+        this.tooltipVisible = true;
+        this.tooltipX = event.clientX;
+        this.tooltipY = event.clientY;
+        this.tooltipHeader = bar.category || `Column ${columnIndex + 1}`;
+        const items = [];
+        bar.segments.forEach((segment) => {
+            if (segment.seriesName && segment.value > 0) {
+                items.push({
+                    color: segment.color,
+                    label: segment.seriesName,
+                    value: segment.value.toString(),
+                });
+            }
+        });
+        this.tooltipItems = items;
+        this.tooltipTotal = bar.totalValue.toString();
+        this.showTooltipTotal = items.length > 1;
+    };
+    handleColumnMove = (event) => {
+        if (this.tooltipVisible) {
+            this.tooltipX = event.clientX;
+            this.tooltipY = event.clientY;
+        }
+    };
+    handleColumnLeave = () => {
+        this.tooltipVisible = false;
+    };
+    render() {
+        const processedData = this.processData();
+        return (index.h(index.Host, { key: 'f851ed646c231a9c1c8e6757d0a46e2d9363f942' }, index.h("div", { key: 'c306d4f127c52ec87b0b470286491d928b6b6337', class: {
+                'bar-chart': true,
+                [this.type]: true,
+                [this.orientation]: true,
+                'bar-chart-animated': this.animated,
+            } }, this.orientation === 'vertical' ? (index.h("div", { class: "vertical-container" }, processedData.map((bar, i) => (index.h("div", { key: i, class: "bar-column vertical", onMouseEnter: (e) => this.handleColumnHover(e, bar, i), onMouseMove: this.handleColumnMove, onMouseLeave: this.handleColumnLeave }, bar.segments.map((segment, segIndex) => (index.h("div", { key: segIndex, class: "bar-segment vertical", style: {
+                height: `${segment.height}px`,
+                backgroundColor: segment.color,
+            } })))))))) : (index.h("div", { class: "horizontal-container" }, processedData.map((bar, i) => (index.h("div", { key: i, class: "bar-row horizontal", onMouseEnter: (e) => this.handleColumnHover(e, bar, i), onMouseMove: this.handleColumnMove, onMouseLeave: this.handleColumnLeave }, bar.segments.map((segment, segIndex) => (index.h("div", { key: segIndex, class: "bar-segment horizontal", style: {
+                width: `${(segment.value / bar.totalValue) * 100}%`,
+                backgroundColor: segment.color,
+            } }))))))))), index.h("bh-chart-tooltip", { key: '765ff842c48a11ec414615846f6404b642b29933', visible: this.tooltipVisible, x: this.tooltipX, y: this.tooltipY, header: this.tooltipHeader, items: this.tooltipItems, total: this.tooltipTotal, showTotal: this.showTooltipTotal })));
+    }
+};
+BhBarChart.style = bhBarChartCss;
+
+exports.bh_bar_chart = BhBarChart;
+//# sourceMappingURL=bh-bar-chart.entry.cjs.js.map

package/dist/cjs/bh-button-CKYE8jYL.js

@@ -0,0 +1,117 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.js');
+
+const bhButtonCss = ":host{display:inline-block}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);font-family:var(--font-inter);font-weight:var(--weight-medium);border:1px solid transparent;cursor:pointer;text-align:center;white-space:nowrap;transition:all 0.2s ease-in-out;text-decoration:none;outline:none}.btn-xs{padding:0 var(--spacing-lg);height:24px;border-radius:var(--radius-md);font-size:var(--text-sm-size)}.btn-sm{padding:0 var(--spacing-xl);height:32px;border-radius:var(--radius-md);font-size:var(--text-sm-size)}.btn-md{padding:0 var(--spacing-xl);height:40px;border-radius:var(--radius-md);font-size:var(--text-sm-size)}.btn-lg{padding:0 var(--spacing-xl);height:48px;border-radius:var(--radius-md);gap:var(--spacing-sm);font-size:var(--text-md-size)}.btn-xs.btn-icon-leading{padding-left:var(\n    --icon-compensation-xs-btn,\n    calc(var(--spacing-lg) - var(--spacing-xs))\n  )}.btn-sm.btn-icon-leading{padding-left:var(\n    --icon-compensation-sm-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  )}.btn-md.btn-icon-leading{padding-left:var(\n    --icon-compensation-md-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  )}.btn-lg.btn-icon-leading{padding-left:var(\n    --icon-compensation-lg-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  )}.btn-xs.btn-icon-trailing{padding-right:var(\n    --icon-compensation-xs-btn,\n    calc(var(--spacing-lg) - var(--spacing-xs))\n  )}.btn-sm.btn-icon-trailing{padding-right:var(\n    --icon-compensation-sm-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  )}.btn-md.btn-icon-trailing{padding-right:var(\n    --icon-compensation-md-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  )}.btn-lg.btn-icon-trailing{padding-right:var(\n    --icon-compensation-lg-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  )}.btn-primary.btn-default{background-color:var(--color-brand-600);color:var(--color-white);border-color:var(--color-brand-600)}.btn-secondary.btn-default{background-color:var(--color-white);color:var(--color-neutral-600);border-color:var(--color-neutral-300)}.btn-tertiary.btn-default{background-color:transparent;color:var(--color-neutral-600);border-color:transparent}.btn-quaternary.btn-default{background-color:transparent;color:var(--color-brand-600);border-color:transparent}.btn-primary.btn-destructive{background-color:var(--color-error-600);color:var(--color-white);border-color:var(--color-error-600)}.btn-secondary.btn-destructive{background-color:var(--color-white);color:var(--color-error-600);border-color:var(--color-error-300)}.btn-tertiary.btn-destructive{background-color:transparent;color:var(--color-error-600);border-color:transparent}.btn-quaternary.btn-destructive{background-color:transparent;color:var(--color-error-600);border-color:transparent}.btn-primary.btn-success{background-color:var(--color-success-600);color:var(--color-white);border-color:var(--color-success-600)}.btn-secondary.btn-success{background-color:var(--color-white);color:var(--color-success-600);border-color:var(--color-success-300)}.btn-tertiary.btn-success{background-color:transparent;color:var(--color-success-600);border-color:transparent}.btn-quaternary.btn-success{background-color:transparent;color:var(--color-success-600);border-color:transparent}.btn-primary.btn-default:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-brand-700);border-color:var(--color-brand-700)}.btn-secondary.btn-default:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-neutral-50);color:var(--color-neutral-700);border-color:var(--color-neutral-400)}.btn-tertiary.btn-default:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-neutral-100);color:var(--color-neutral-700)}.btn-quaternary.btn-default:hover:not(:disabled):not(.btn-disabled){color:var(--color-brand-700)}.btn-primary.btn-destructive:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-error-700);border-color:var(--color-error-700)}.btn-secondary.btn-destructive:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-error-50);border-color:var(--color-error-300)}.btn-tertiary.btn-destructive:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-error-50)}.btn-quaternary.btn-destructive:hover:not(:disabled):not(.btn-disabled){color:var(--color-error-700)}.btn-primary.btn-success:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-success-700);border-color:var(--color-success-700)}.btn-secondary.btn-success:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-success-50);border-color:var(--color-success-300)}.btn-tertiary.btn-success:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-success-50)}.btn-quaternary.btn-success:hover:not(:disabled):not(.btn-disabled){color:var(--color-success-700)}.btn-primary.btn-default:active:not(:disabled):not(.btn-disabled){background-color:var(--color-brand-800);border-color:var(--color-brand-800)}.btn-secondary.btn-default:active:not(:disabled):not(.btn-disabled){background-color:var(--color-neutral-100);border-color:var(--color-neutral-500)}.btn-tertiary.btn-default:active:not(:disabled):not(.btn-disabled){background-color:var(--color-neutral-100)}.btn-quaternary.btn-default:active:not(:disabled):not(.btn-disabled){color:var(--color-brand-800)}.btn-primary.btn-destructive:active:not(:disabled):not(.btn-disabled){background-color:var(--color-error-800);border-color:var(--color-error-800)}.btn-secondary.btn-destructive:active:not(:disabled):not(.btn-disabled){background-color:var(--color-error-100);border-color:var(--color-error-400)}.btn-tertiary.btn-destructive:active:not(:disabled):not(.btn-disabled){background-color:var(--color-error-100)}.btn-quaternary.btn-destructive:active:not(:disabled):not(.btn-disabled){color:var(--color-error-800)}.btn-primary.btn-success:active:not(:disabled):not(.btn-disabled){background-color:var(--color-success-800);border-color:var(--color-success-800)}.btn-secondary.btn-success:active:not(:disabled):not(.btn-disabled){background-color:var(--color-success-100);border-color:var(--color-success-400)}.btn-tertiary.btn-success:active:not(:disabled):not(.btn-disabled){background-color:var(--color-success-100)}.btn-quaternary.btn-success:active:not(:disabled):not(.btn-disabled){color:var(--color-success-800)}.btn.btn-default:focus,.btn.btn-default:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:2px}.btn.btn-destructive:focus,.btn.btn-destructive:focus-visible{outline:2px solid var(--color-error-500);outline-offset:2px}.btn.btn-success:focus,.btn.btn-success:focus-visible{outline:2px solid var(--color-success-500);outline-offset:2px}.btn:disabled,.btn-disabled{cursor:not-allowed;pointer-events:none}.btn-primary:disabled,.btn-primary.btn-disabled{background-color:var(--color-neutral-200);color:var(--color-neutral-400);border-color:var(--color-neutral-200)}.btn-secondary:disabled,.btn-secondary.btn-disabled,.btn-tertiary:disabled,.btn-tertiary.btn-disabled,.btn-quaternary:disabled,.btn-quaternary.btn-disabled{opacity:0.5}.btn-loading{cursor:wait;pointer-events:none}.btn-loading .btn-label{opacity:0.7}.btn-label{display:inline-block;line-height:inherit}.btn-quaternary .btn-label{text-decoration:underline}.btn-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.btn-icon-material{line-height:1;vertical-align:middle;color:inherit !important}.btn-xs .btn-icon-material{font-size:var(--text-sm-size)}.btn-sm .btn-icon-material{font-size:var(--text-md-size)}.btn-md .btn-icon-material{font-size:var(--text-lg-size)}.btn-lg .btn-icon-material{font-size:var(--text-lg-size)}.btn-icon-only{padding:0}.btn-icon-only.btn-xs{width:24px;height:24px}.btn-icon-only.btn-sm{width:32px;height:32px}.btn-icon-only.btn-md{width:40px;height:40px}.btn-icon-only.btn-lg{width:48px;height:48px}.btn-icon-only .btn-icon-material{margin:0}.btn-loading-icon{line-height:1;vertical-align:middle;color:inherit;animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.text-sm{font-size:var(--text-sm-size);line-height:var(--text-sm-line)}.text-md{font-size:var(--text-md-size);line-height:var(--text-md-line)}.icon-md{width:20px;height:20px}.icon-lg{width:24px;height:24px}";
+
+const BhButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhClick = index.createEvent(this, "bhClick");
+    }
+    /**
+     * The visual hierarchy of the button
+     */
+    hierarchy = 'primary';
+    /**
+     * The kind/semantic meaning of the button
+     */
+    kind = 'default';
+    /**
+     * Icon position relative to the label
+     */
+    icon = 'none';
+    /**
+     * The size of the button
+     */
+    size = 'md';
+    /**
+     * Fallback text label (used only if no slot content is provided)
+     */
+    label;
+    /**
+     * Material Symbols icon name (e.g., 'add', 'edit', 'delete')
+     */
+    iconName;
+    /**
+     * Whether the button is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the button is in a loading state
+     */
+    loading = false;
+    /**
+     * The type of button for form submission
+     * - 'button': No form submission (default)
+     * - 'submit': Submits the form
+     * - 'reset': Resets the form
+     */
+    type = 'button';
+    /**
+     * Emitted when the button is clicked
+     */
+    bhClick;
+    handleClick = (event) => {
+        if (!this.disabled && !this.loading) {
+            this.bhClick.emit(event);
+        }
+    };
+    getIconSizeClass() {
+        switch (this.size) {
+            case 'sm':
+            case 'md':
+                return 'icon-md';
+            case 'lg':
+                return 'icon-lg';
+            default:
+                return 'icon-md';
+        }
+    }
+    getTextSizeClass() {
+        switch (this.size) {
+            case 'sm':
+            case 'md':
+                return 'text-sm';
+            case 'lg':
+                return 'text-md';
+            default:
+                return 'text-sm';
+        }
+    }
+    getLoaderSize() {
+        switch (this.size) {
+            case 'xs':
+            case 'sm':
+                return 'sm';
+            default:
+                return 'sm';
+        }
+    }
+    getLoaderVariant() {
+        // Primary buttons (all kinds) have dark background, so use white spinner
+        return this.hierarchy === 'primary' ? 'white' : 'default';
+    }
+    render() {
+        const showLabel = this.icon !== 'only';
+        const showLeadingIcon = this.icon === 'leading' && (this.iconName || this.loading);
+        const showTrailingIcon = this.icon === 'trailing' && this.iconName && !this.loading;
+        const showOnlyIcon = this.icon === 'only' && (this.iconName || this.loading);
+        const buttonClasses = {
+            btn: true,
+            [`btn-${this.hierarchy}`]: true,
+            [`btn-${this.kind}`]: true,
+            [`btn-${this.size}`]: true,
+            [`btn-icon-${this.icon}`]: true,
+            'btn-disabled': this.disabled,
+            'btn-loading': this.loading,
+        };
+        return (index.h("button", { key: 'f2f54633cb42a7fea15c38aa8bc24be085320dc9', type: this.type, class: buttonClasses, disabled: this.disabled, onClick: this.handleClick, part: "button" }, showLeadingIcon && (index.h("span", { key: '682a4704e4f874b4f3d051aab4738829cbd47778', class: `btn-icon ${this.getIconSizeClass()}` }, this.loading ? (index.h("bh-loader-spinner", { size: this.getLoaderSize(), variant: this.getLoaderVariant() })) : (index.h("span", { class: "btn-icon-material material-symbols-outlined" }, this.iconName)))), showOnlyIcon && (index.h("span", { key: '767e0ee41843e2ef8b3a45ec82f15602848ad751', class: `btn-icon ${this.getIconSizeClass()}` }, this.loading ? (index.h("bh-loader-spinner", { size: this.getLoaderSize(), variant: this.getLoaderVariant() })) : (index.h("span", { class: "btn-icon-material material-symbols-outlined" }, this.iconName)))), showLabel && (index.h("span", { key: 'bb2ddbcf7eb35dd5af688a6fc6d61d07f67d90ba', class: `btn-label ${this.getTextSizeClass()}` }, index.h("slot", { key: '010690eeab4cea1205d2ebca5cc2e1bfc95048c7' }, this.label))), showTrailingIcon && (index.h("span", { key: '9de8df1ab10e9035affbd766fea95896762e2bca', class: `btn-icon ${this.getIconSizeClass()}` }, index.h("span", { key: 'b50370274c0513a7885eae4bf40235c3e7e245aa', class: "btn-icon-material material-symbols-outlined" }, this.iconName)))));
+    }
+};
+BhButton.style = bhButtonCss;
+
+exports.BhButton = BhButton;
+//# sourceMappingURL=bh-button-CKYE8jYL.js.map
+
+//# sourceMappingURL=bh-button-CKYE8jYL.js.map

package/dist/cjs/bh-button-CKYE8jYL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-button-CKYE8jYL.js","sources":["src/components/bh-button/bh-button.css?tag=bh-button&encapsulation=shadow","src/components/bh-button/bh-button.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-BUTTON COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n/* Base Button */\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-xs);\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  border: 1px solid transparent;\n  cursor: pointer;\n  text-align: center;\n  white-space: nowrap;\n  transition: all 0.2s ease-in-out;\n  text-decoration: none;\n  outline: none;\n}\n\n/* Button Sizes */\n.btn-xs {\n  padding: 0 var(--spacing-lg);\n  height: 24px;\n  border-radius: var(--radius-md);\n  font-size: var(--text-sm-size);\n}\n\n.btn-sm {\n  padding: 0 var(--spacing-xl);\n  height: 32px;\n  border-radius: var(--radius-md);\n  font-size: var(--text-sm-size);\n}\n\n.btn-md {\n  padding: 0 var(--spacing-xl);\n  height: 40px;\n  border-radius: var(--radius-md);\n  font-size: var(--text-sm-size);\n}\n\n.btn-lg {\n  padding: 0 var(--spacing-xl);\n  height: 48px;\n  border-radius: var(--radius-md);\n  gap: var(--spacing-sm);\n  font-size: var(--text-md-size);\n}\n\n/* Icon Padding Compensation */\n.btn-xs.btn-icon-leading {\n  padding-left: var(\n    --icon-compensation-xs-btn,\n    calc(var(--spacing-lg) - var(--spacing-xs))\n  );\n}\n\n.btn-sm.btn-icon-leading {\n  padding-left: var(\n    --icon-compensation-sm-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  );\n}\n\n.btn-md.btn-icon-leading {\n  padding-left: var(\n    --icon-compensation-md-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  );\n}\n\n.btn-lg.btn-icon-leading {\n  padding-left: var(\n    --icon-compensation-lg-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  );\n}\n\n.btn-xs.btn-icon-trailing {\n  padding-right: var(\n    --icon-compensation-xs-btn,\n    calc(var(--spacing-lg) - var(--spacing-xs))\n  );\n}\n\n.btn-sm.btn-icon-trailing {\n  padding-right: var(\n    --icon-compensation-sm-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  );\n}\n\n.btn-md.btn-icon-trailing {\n  padding-right: var(\n    --icon-compensation-md-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  );\n}\n\n.btn-lg.btn-icon-trailing {\n  padding-right: var(\n    --icon-compensation-lg-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  );\n}\n\n/* Button Hierarchies - Default Kind */\n.btn-primary.btn-default {\n  background-color: var(--color-brand-600);\n  color: var(--color-white);\n  border-color: var(--color-brand-600);\n}\n\n.btn-secondary.btn-default {\n  background-color: var(--color-white);\n  color: var(--color-neutral-600);\n  border-color: var(--color-neutral-300);\n}\n\n.btn-tertiary.btn-default {\n  background-color: transparent;\n  color: var(--color-neutral-600);\n  border-color: transparent;\n}\n\n.btn-quaternary.btn-default {\n  background-color: transparent;\n  color: var(--color-brand-600);\n  border-color: transparent;\n}\n\n/* Button Hierarchies - Destructive Kind */\n.btn-primary.btn-destructive {\n  background-color: var(--color-error-600);\n  color: var(--color-white);\n  border-color: var(--color-error-600);\n}\n\n.btn-secondary.btn-destructive {\n  background-color: var(--color-white);\n  color: var(--color-error-600);\n  border-color: var(--color-error-300);\n}\n\n.btn-tertiary.btn-destructive {\n  background-color: transparent;\n  color: var(--color-error-600);\n  border-color: transparent;\n}\n\n.btn-quaternary.btn-destructive {\n  background-color: transparent;\n  color: var(--color-error-600);\n  border-color: transparent;\n}\n\n/* Button Hierarchies - Success Kind */\n.btn-primary.btn-success {\n  background-color: var(--color-success-600);\n  color: var(--color-white);\n  border-color: var(--color-success-600);\n}\n\n.btn-secondary.btn-success {\n  background-color: var(--color-white);\n  color: var(--color-success-600);\n  border-color: var(--color-success-300);\n}\n\n.btn-tertiary.btn-success {\n  background-color: transparent;\n  color: var(--color-success-600);\n  border-color: transparent;\n}\n\n.btn-quaternary.btn-success {\n  background-color: transparent;\n  color: var(--color-success-600);\n  border-color: transparent;\n}\n\n/* Hover States - Default Kind */\n.btn-primary.btn-default:hover:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-brand-700);\n  border-color: var(--color-brand-700);\n}\n\n.btn-secondary.btn-default:hover:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-neutral-50);\n  color: var(--color-neutral-700);\n  border-color: var(--color-neutral-400);\n}\n\n.btn-tertiary.btn-default:hover:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-neutral-100);\n  color: var(--color-neutral-700);\n}\n\n.btn-quaternary.btn-default:hover:not(:disabled):not(.btn-disabled) {\n  color: var(--color-brand-700);\n}\n\n/* Hover States - Destructive Kind */\n.btn-primary.btn-destructive:hover:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-error-700);\n  border-color: var(--color-error-700);\n}\n\n.btn-secondary.btn-destructive:hover:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-error-50);\n  border-color: var(--color-error-300);\n}\n\n.btn-tertiary.btn-destructive:hover:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-error-50);\n}\n\n.btn-quaternary.btn-destructive:hover:not(:disabled):not(.btn-disabled) {\n  color: var(--color-error-700);\n}\n\n/* Hover States - Success Kind */\n.btn-primary.btn-success:hover:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-success-700);\n  border-color: var(--color-success-700);\n}\n\n.btn-secondary.btn-success:hover:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-success-50);\n  border-color: var(--color-success-300);\n}\n\n.btn-tertiary.btn-success:hover:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-success-50);\n}\n\n.btn-quaternary.btn-success:hover:not(:disabled):not(.btn-disabled) {\n  color: var(--color-success-700);\n}\n\n/* Active States - Default Kind */\n.btn-primary.btn-default:active:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-brand-800);\n  border-color: var(--color-brand-800);\n}\n\n.btn-secondary.btn-default:active:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-neutral-100);\n  border-color: var(--color-neutral-500);\n}\n\n.btn-tertiary.btn-default:active:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-neutral-100);\n}\n\n.btn-quaternary.btn-default:active:not(:disabled):not(.btn-disabled) {\n  color: var(--color-brand-800);\n}\n\n/* Active States - Destructive Kind */\n.btn-primary.btn-destructive:active:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-error-800);\n  border-color: var(--color-error-800);\n}\n\n.btn-secondary.btn-destructive:active:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-error-100);\n  border-color: var(--color-error-400);\n}\n\n.btn-tertiary.btn-destructive:active:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-error-100);\n}\n\n.btn-quaternary.btn-destructive:active:not(:disabled):not(.btn-disabled) {\n  color: var(--color-error-800);\n}\n\n/* Active States - Success Kind */\n.btn-primary.btn-success:active:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-success-800);\n  border-color: var(--color-success-800);\n}\n\n.btn-secondary.btn-success:active:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-success-100);\n  border-color: var(--color-success-400);\n}\n\n.btn-tertiary.btn-success:active:not(:disabled):not(.btn-disabled) {\n  background-color: var(--color-success-100);\n}\n\n.btn-quaternary.btn-success:active:not(:disabled):not(.btn-disabled) {\n  color: var(--color-success-800);\n}\n\n/* Focus State - Default Kind */\n.btn.btn-default:focus,\n.btn.btn-default:focus-visible {\n  outline: 2px solid var(--color-brand-500);\n  outline-offset: 2px;\n}\n\n/* Focus State - Destructive Kind */\n.btn.btn-destructive:focus,\n.btn.btn-destructive:focus-visible {\n  outline: 2px solid var(--color-error-500);\n  outline-offset: 2px;\n}\n\n/* Focus State - Success Kind */\n.btn.btn-success:focus,\n.btn.btn-success:focus-visible {\n  outline: 2px solid var(--color-success-500);\n  outline-offset: 2px;\n}\n\n/* Disabled States */\n.btn:disabled,\n.btn-disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.btn-primary:disabled,\n.btn-primary.btn-disabled {\n  background-color: var(--color-neutral-200);\n  color: var(--color-neutral-400);\n  border-color: var(--color-neutral-200);\n}\n\n.btn-secondary:disabled,\n.btn-secondary.btn-disabled,\n.btn-tertiary:disabled,\n.btn-tertiary.btn-disabled,\n.btn-quaternary:disabled,\n.btn-quaternary.btn-disabled {\n  opacity: 0.5;\n}\n\n/* Loading State */\n.btn-loading {\n  cursor: wait;\n  pointer-events: none;\n}\n\n.btn-loading .btn-label {\n  opacity: 0.7;\n}\n\n/* ==========================================================================\n   BUTTON CONTENT ELEMENTS\n   ========================================================================== */\n\n.btn-label {\n  display: inline-block;\n  line-height: inherit;\n}\n\n.btn-quaternary .btn-label {\n  text-decoration: underline;\n}\n\n/* Icons */\n.btn-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.btn-icon-material {\n  line-height: 1;\n  vertical-align: middle;\n  color: inherit !important;\n}\n\n.btn-xs .btn-icon-material {\n  font-size: var(--text-sm-size);\n}\n\n.btn-sm .btn-icon-material {\n  font-size: var(--text-md-size);\n}\n\n.btn-md .btn-icon-material {\n  font-size: var(--text-lg-size);\n}\n\n.btn-lg .btn-icon-material {\n  font-size: var(--text-lg-size);\n}\n\n/* Icon-Only Buttons */\n.btn-icon-only {\n  padding: 0;\n}\n\n.btn-icon-only.btn-xs {\n  width: 24px;\n  height: 24px;\n}\n\n.btn-icon-only.btn-sm {\n  width: 32px;\n  height: 32px;\n}\n\n.btn-icon-only.btn-md {\n  width: 40px;\n  height: 40px;\n}\n\n.btn-icon-only.btn-lg {\n  width: 48px;\n  height: 48px;\n}\n\n.btn-icon-only .btn-icon-material {\n  margin: 0;\n}\n\n/* Loading Spinner */\n.btn-loading-icon {\n  line-height: 1;\n  vertical-align: middle;\n  color: inherit;\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Text size utilities */\n.text-sm {\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n}\n\n.text-md {\n  font-size: var(--text-md-size);\n  line-height: var(--text-md-line);\n}\n\n/* Icon size utilities */\n.icon-md {\n  width: 20px;\n  height: 20px;\n}\n\n.icon-lg {\n  width: 24px;\n  height: 24px;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type ButtonHierarchy =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary';\nexport type ButtonIconPosition = 'none' | 'leading' | 'trailing' | 'only';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type ButtonKind = 'default' | 'destructive' | 'success';\nexport type ButtonType = 'button' | 'submit' | 'reset';\n\n@Component({\n  tag: 'bh-button',\n  styleUrl: 'bh-button.css',\n  shadow: true,\n})\nexport class BhButton {\n  /**\n   * The visual hierarchy of the button\n   */\n  @Prop() hierarchy: ButtonHierarchy = 'primary';\n\n  /**\n   * The kind/semantic meaning of the button\n   */\n  @Prop() kind: ButtonKind = 'default';\n\n  /**\n   * Icon position relative to the label\n   */\n  @Prop() icon: ButtonIconPosition = 'none';\n\n  /**\n   * The size of the button\n   */\n  @Prop() size: ButtonSize = 'md';\n\n  /**\n   * Fallback text label (used only if no slot content is provided)\n   */\n  @Prop() label?: string;\n\n  /**\n   * Material Symbols icon name (e.g., 'add', 'edit', 'delete')\n   */\n  @Prop() iconName?: string;\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the button is in a loading state\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * The type of button for form submission\n   * - 'button': No form submission (default)\n   * - 'submit': Submits the form\n   * - 'reset': Resets the form\n   */\n  @Prop() type: ButtonType = 'button';\n\n  /**\n   * Emitted when the button is clicked\n   */\n  @Event() bhClick!: EventEmitter<MouseEvent>;\n\n  private handleClick = (event: MouseEvent): void => {\n    if (!this.disabled && !this.loading) {\n      this.bhClick.emit(event);\n    }\n  };\n\n  private getIconSizeClass(): string {\n    switch (this.size) {\n      case 'sm':\n      case 'md':\n        return 'icon-md';\n      case 'lg':\n        return 'icon-lg';\n      default:\n        return 'icon-md';\n    }\n  }\n\n  private getTextSizeClass(): string {\n    switch (this.size) {\n      case 'sm':\n      case 'md':\n        return 'text-sm';\n      case 'lg':\n        return 'text-md';\n      default:\n        return 'text-sm';\n    }\n  }\n\n  private getLoaderSize(): 'sm' | 'md' {\n    switch (this.size) {\n      case 'xs':\n      case 'sm':\n        return 'sm';\n      default:\n        return 'sm';\n    }\n  }\n\n  private getLoaderVariant(): 'default' | 'white' {\n    // Primary buttons (all kinds) have dark background, so use white spinner\n    return this.hierarchy === 'primary' ? 'white' : 'default';\n  }\n\n  render() {\n    const showLabel = this.icon !== 'only';\n    const showLeadingIcon =\n      this.icon === 'leading' && (this.iconName || this.loading);\n    const showTrailingIcon =\n      this.icon === 'trailing' && this.iconName && !this.loading;\n    const showOnlyIcon =\n      this.icon === 'only' && (this.iconName || this.loading);\n\n    const buttonClasses = {\n      btn: true,\n      [`btn-${this.hierarchy}`]: true,\n      [`btn-${this.kind}`]: true,\n      [`btn-${this.size}`]: true,\n      [`btn-icon-${this.icon}`]: true,\n      'btn-disabled': this.disabled,\n      'btn-loading': this.loading,\n    };\n\n    return (\n      <button\n        type={this.type}\n        class={buttonClasses}\n        disabled={this.disabled}\n        onClick={this.handleClick}\n        part=\"button\"\n      >\n        {showLeadingIcon && (\n          <span class={`btn-icon ${this.getIconSizeClass()}`}>\n            {this.loading ? (\n              <bh-loader-spinner\n                size={this.getLoaderSize()}\n                variant={this.getLoaderVariant()}\n              ></bh-loader-spinner>\n            ) : (\n              <span class=\"btn-icon-material material-symbols-outlined\">\n                {this.iconName}\n              </span>\n            )}\n          </span>\n        )}\n\n        {showOnlyIcon && (\n          <span class={`btn-icon ${this.getIconSizeClass()}`}>\n            {this.loading ? (\n              <bh-loader-spinner\n                size={this.getLoaderSize()}\n                variant={this.getLoaderVariant()}\n              ></bh-loader-spinner>\n            ) : (\n              <span class=\"btn-icon-material material-symbols-outlined\">\n                {this.iconName}\n              </span>\n            )}\n          </span>\n        )}\n\n        {showLabel && (\n          <span class={`btn-label ${this.getTextSizeClass()}`}>\n            <slot>{this.label}</slot>\n          </span>\n        )}\n\n        {showTrailingIcon && (\n          <span class={`btn-icon ${this.getIconSizeClass()}`}>\n            <span class=\"btn-icon-material material-symbols-outlined\">\n              {this.iconName}\n            </span>\n          </span>\n        )}\n      </button>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,ymQAAymQ;;MCiBhnQ,QAAQ,GAAA,MAAA;;;;;AACnB;;AAEG;IACK,SAAS,GAAoB,SAAS;AAE9C;;AAEG;IACK,IAAI,GAAe,SAAS;AAEpC;;AAEG;IACK,IAAI,GAAuB,MAAM;AAEzC;;AAEG;IACK,IAAI,GAAe,IAAI;AAE/B;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,QAAQ;AAEhB;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,OAAO,GAAY,KAAK;AAEhC;;;;;AAKG;IACK,IAAI,GAAe,QAAQ;AAEnC;;AAEG;AACM,IAAA,OAAO;AAER,IAAA,WAAW,GAAG,CAAC,KAAiB,KAAU;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACnC,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;;AAE5B,KAAC;IAEO,gBAAgB,GAAA;AACtB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,IAAI;AACT,YAAA,KAAK,IAAI;AACP,gBAAA,OAAO,SAAS;AAClB,YAAA,KAAK,IAAI;AACP,gBAAA,OAAO,SAAS;AAClB,YAAA;AACE,gBAAA,OAAO,SAAS;;;IAId,gBAAgB,GAAA;AACtB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,IAAI;AACT,YAAA,KAAK,IAAI;AACP,gBAAA,OAAO,SAAS;AAClB,YAAA,KAAK,IAAI;AACP,gBAAA,OAAO,SAAS;AAClB,YAAA;AACE,gBAAA,OAAO,SAAS;;;IAId,aAAa,GAAA;AACnB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,IAAI;AACT,YAAA,KAAK,IAAI;AACP,gBAAA,OAAO,IAAI;AACb,YAAA;AACE,gBAAA,OAAO,IAAI;;;IAIT,gBAAgB,GAAA;;AAEtB,QAAA,OAAO,IAAI,CAAC,SAAS,KAAK,SAAS,GAAG,OAAO,GAAG,SAAS;;IAG3D,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM;AACtC,QAAA,MAAM,eAAe,GACnB,IAAI,CAAC,IAAI,KAAK,SAAS,KAAK,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC;AAC5D,QAAA,MAAM,gBAAgB,GACpB,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO;AAC5D,QAAA,MAAM,YAAY,GAChB,IAAI,CAAC,IAAI,KAAK,MAAM,KAAK,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC;AAEzD,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,GAAG,EAAE,IAAI;AACT,YAAA,CAAC,OAAO,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;AAC/B,YAAA,CAAC,OAAO,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC1B,YAAA,CAAC,OAAO,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC1B,YAAA,CAAC,YAAY,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC/B,cAAc,EAAE,IAAI,CAAC,QAAQ;YAC7B,aAAa,EAAE,IAAI,CAAC,OAAO;SAC5B;AAED,QAAA,QACEA,OACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,EAAA,EAEZ,eAAe,KACdA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,SAAA,EAAY,IAAI,CAAC,gBAAgB,EAAE,CAAE,CAAA,IAC/C,IAAI,CAAC,OAAO,IACXA,OACE,CAAA,mBAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,EAC1B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAAA,CACb,KAErBA,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,6CAA6C,EACtD,EAAA,IAAI,CAAC,QAAQ,CACT,CACR,CACI,CACR,EAEA,YAAY,KACXA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAY,SAAA,EAAA,IAAI,CAAC,gBAAgB,EAAE,CAAA,CAAE,IAC/C,IAAI,CAAC,OAAO,IACXA,OACE,CAAA,mBAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,EAC1B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAAA,CACb,KAErBA,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,6CAA6C,EACtD,EAAA,IAAI,CAAC,QAAQ,CACT,CACR,CACI,CACR,EAEA,SAAS,KACRA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,gBAAgB,EAAE,CAAA,CAAE,EAAA,EACjDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CACpB,CACR,EAEA,gBAAgB,KACfA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAY,SAAA,EAAA,IAAI,CAAC,gBAAgB,EAAE,CAAA,CAAE,EAAA,EAChDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,6CAA6C,EAAA,EACtD,IAAI,CAAC,QAAQ,CACT,CACF,CACR,CACM;;;;;;;"}

package/dist/cjs/bh-button-icon.cjs.entry.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.js');
+
+const bhButtonIconCss = ":host{display:inline-block;font-family:var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif)}.button-icon{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--radius-md, 8px);cursor:pointer;transition:all 0.2s ease-in-out;font-family:inherit;outline:none;padding:0}.button-icon:focus-visible{box-shadow:0 0 0 2px var(--color-white, #FFFFFF), 0 0 0 4px var(--color-brand-500, #7F56D9)}.button-icon-xs{width:24px;height:24px}.button-icon-xs .icon{font-size:16px}.button-icon-sm{width:32px;height:32px}.button-icon-sm .icon{font-size:18px}.button-icon-md{width:40px;height:40px}.button-icon-md .icon{font-size:20px}.button-icon-lg{width:48px;height:48px}.button-icon-lg .icon{font-size:24px}.button-icon-primary{background:var(--color-brand-600, #6941C6);color:var(--color-white, #FFFFFF)}.button-icon-primary:hover:not(.button-icon-disabled){background:var(--color-brand-700, #5235A8)}.button-icon-primary:active:not(.button-icon-disabled){background:var(--color-brand-800, #42298F)}.button-icon-secondary{background:var(--color-white, #FFFFFF);color:var(--color-neutral-700, #344054);border:1px solid var(--color-neutral-300, #D0D5DD)}.button-icon-secondary:hover:not(.button-icon-disabled){background:var(--color-neutral-50, #F9FAFB);border-color:var(--color-neutral-400, #98A2B3)}.button-icon-secondary:active:not(.button-icon-disabled){background:var(--color-neutral-100, #F2F4F7)}.button-icon-tertiary{background:transparent;color:var(--color-brand-600, #6941C6)}.button-icon-tertiary:hover:not(.button-icon-disabled){background:var(--color-brand-50, #F9F5FF)}.button-icon-tertiary:active:not(.button-icon-disabled){background:var(--color-brand-100, #F4EBFF)}.button-icon-quaternary{background:transparent;color:var(--color-neutral-500, #667085)}.button-icon-quaternary:hover:not(.button-icon-disabled){background:var(--color-neutral-100, #F2F4F7);color:var(--color-neutral-700, #344054)}.button-icon-quaternary:active:not(.button-icon-disabled){background:var(--color-neutral-200, #EAECF0)}.button-icon-disabled{opacity:0.5;cursor:not-allowed}.button-icon-loading{cursor:wait}.loading-spinner{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin 0.8s linear infinite}.button-icon-sm .loading-spinner{width:14px;height:14px}.button-icon-xs .loading-spinner{width:12px;height:12px}.button-icon-lg .loading-spinner{width:20px;height:20px}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.icon{display:flex;align-items:center;justify-content:center}.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 BhButtonIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhClick = index.createEvent(this, "bhClick");
+    }
+    /**
+     * The visual hierarchy of the button
+     */
+    hierarchy = 'primary';
+    /**
+     * The size of the button
+     */
+    size = 'md';
+    /**
+     * The icon name (Material Symbols)
+     */
+    iconName = 'add';
+    /**
+     * Whether the button is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the button is in loading state
+     */
+    loading = false;
+    /**
+     * The type of button for form submission
+     * - 'button': No form submission (default)
+     * - 'submit': Submits the form
+     * - 'reset': Resets the form
+     */
+    type = 'button';
+    /**
+     * Accessible label for the button
+     */
+    ariaLabel = null;
+    /**
+     * Emitted when the button is clicked
+     */
+    bhClick;
+    handleClick = (event) => {
+        if (!this.disabled && !this.loading) {
+            this.bhClick.emit(event);
+        }
+    };
+    handleKeyDown = (event) => {
+        if ((event.key === 'Enter' || event.key === ' ') &&
+            !this.disabled &&
+            !this.loading) {
+            event.preventDefault();
+            this.bhClick.emit(event);
+        }
+    };
+    render() {
+        const buttonClasses = {
+            'button-icon': true,
+            [`button-icon-${this.hierarchy}`]: true,
+            [`button-icon-${this.size}`]: true,
+            'button-icon-disabled': this.disabled,
+            'button-icon-loading': this.loading,
+        };
+        return (index.h("button", { key: '8c2a2097a2c7bbbb89a541d4fce7bba4c4eac970', type: this.type, class: buttonClasses, disabled: this.disabled, "aria-label": this.ariaLabel || this.iconName, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeyDown, part: "button" }, this.loading ? (index.h("span", { class: "loading-spinner", part: "spinner" })) : (index.h("span", { class: "material-symbols-outlined icon", part: "icon" }, this.iconName))));
+    }
+};
+BhButtonIcon.style = bhButtonIconCss;
+
+exports.bh_button_icon = BhButtonIcon;
+//# sourceMappingURL=bh-button-icon.entry.cjs.js.map

package/dist/cjs/bh-button.bh-loader-spinner.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-button.bh-loader-spinner.entry.cjs.js","sources":["src/components/bh-loader-spinner/bh-loader-spinner.css?tag=bh-loader-spinner&encapsulation=shadow","src/components/bh-loader-spinner/bh-loader-spinner.tsx"],"sourcesContent":["/* ==========================================================================\n   LOADER SPINNER COMPONENT - StencilJS\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n/* Overlay styles */\n.loader-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.3);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n}\n\n.loader-overlay-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--spacing-md);\n}\n\n/* Container styles */\n.loader-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--spacing-sm);\n}\n\n.loader-spinner {\n  position: relative;\n  display: inline-block;\n}\n\n/* Message styles */\n.loader-message {\n  color: var(--color-neutral-700);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n  font-weight: var(--weight-medium);\n  text-align: center;\n  margin-top: var(--spacing-xs);\n}\n\n.loader-overlay .loader-message {\n  color: var(--color-white);\n}\n\n/* =========================\n   GRADIENT VARIANT - Bellhop Sidebar Style\n   ========================= */\n.spinner-gradient {\n  animation: gradient-rotate 2s linear infinite;\n  will-change: transform;\n}\n\n.gradient-svg {\n  display: block;\n  transform-origin: 50% 50%;\n}\n\n.gradient-path {\n  stroke-dasharray: 90, 150;\n  stroke-dashoffset: 0;\n  animation: gradient-dash 1.5s ease-in-out infinite;\n  transform-origin: 50% 50%;\n}\n\n/* Size variations for gradient */\n.size-sm .gradient-svg {\n  width: 20px;\n  height: 20px;\n}\n\n.size-sm .gradient-path {\n  stroke-width: 5;\n}\n\n.size-md .gradient-svg {\n  width: 30px;\n  height: 30px;\n}\n\n.size-md .gradient-path {\n  stroke-width: 5;\n}\n\n.size-lg .gradient-svg {\n  width: 40px;\n  height: 40px;\n}\n\n.size-lg .gradient-path {\n  stroke-width: 5;\n}\n\n.size-xl .gradient-svg {\n  width: 60px;\n  height: 60px;\n}\n\n.size-xl .gradient-path {\n  stroke-width: 6;\n}\n\n@keyframes gradient-rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes gradient-dash {\n  0% {\n    stroke-dasharray: 1, 150;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -35;\n  }\n  100% {\n    stroke-dasharray: 90, 150;\n    stroke-dashoffset: -124;\n  }\n}\n\n/* Hover effects - Ultra smooth acceleration */\n.loader-container:hover .spinner-gradient {\n  animation-duration: 1s;\n}\n\n.loader-container:hover .gradient-path {\n  animation-duration: 0.6s;\n}\n\n/* Performance optimizations */\n.spinner-gradient {\n  backface-visibility: hidden;\n  perspective: 1000px;\n}\n\n.gradient-svg {\n  transform: translateZ(0);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type LoaderSize = 'sm' | 'md' | 'lg' | 'xl';\nexport type LoaderVariant = 'default' | 'white';\n\n@Component({\n  tag: 'bh-loader-spinner',\n  styleUrl: 'bh-loader-spinner.css',\n  shadow: true,\n})\nexport class BhLoaderSpinner {\n  /** Loader size */\n  @Prop() size: LoaderSize = 'md';\n\n  /** Loader color variant - use 'white' for dark surfaces like buttons */\n  @Prop() variant: LoaderVariant = 'default';\n\n  /** Whether to show as overlay */\n  @Prop() overlay: boolean = false;\n\n  /** Message to show in overlay mode */\n  @Prop() overlayMessage: string = '';\n\n  /** Whether to show message */\n  @Prop() showMessage: boolean = false;\n\n  /** Message text */\n  @Prop() message: string = 'Loading...';\n\n  private renderSpinner() {\n    const gradientId = this.variant === 'white' ? 'bellhop-gradient-white' : 'bellhop-gradient';\n\n    return (\n      <div class={`loader-spinner variant-${this.variant}`}>\n        <div class=\"spinner-gradient\">\n          <svg class=\"gradient-svg\" viewBox=\"0 0 50 50\">\n            <defs>\n              {this.variant === 'white' ? (\n                <linearGradient\n                  id=\"bellhop-gradient-white\"\n                  x1=\"0%\"\n                  y1=\"0%\"\n                  x2=\"0%\"\n                  y2=\"100%\"\n                >\n                  <stop offset=\"0%\" style={{ stopColor: 'rgba(255, 255, 255, 1)' }} />\n                  <stop offset=\"50%\" style={{ stopColor: 'rgba(255, 255, 255, 0.8)' }} />\n                  <stop offset=\"100%\" style={{ stopColor: 'rgba(255, 255, 255, 0.5)' }} />\n                </linearGradient>\n              ) : (\n                <linearGradient\n                  id=\"bellhop-gradient\"\n                  x1=\"0%\"\n                  y1=\"0%\"\n                  x2=\"0%\"\n                  y2=\"100%\"\n                >\n                  <stop offset=\"0%\" style={{ stopColor: 'var(--color-accent-300)' }} />\n                  <stop offset=\"51%\" style={{ stopColor: 'var(--color-brand-400)' }} />\n                  <stop offset=\"100%\" style={{ stopColor: 'var(--color-brand-600)' }} />\n                </linearGradient>\n              )}\n            </defs>\n            <circle\n              class=\"gradient-path\"\n              cx=\"25\"\n              cy=\"25\"\n              r=\"20\"\n              fill=\"none\"\n              stroke={`url(#${gradientId})`}\n              stroke-width=\"4\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMessage(isOverlay: boolean) {\n    const shouldShowMessage = isOverlay\n      ? (this.showMessage || this.overlayMessage)\n      : this.showMessage;\n\n    if (!shouldShowMessage) return null;\n\n    return (\n      <div class=\"loader-message\">\n        {isOverlay ? (this.overlayMessage || this.message) : this.message}\n      </div>\n    );\n  }\n\n  render() {\n    if (this.overlay) {\n      return (\n        <div class=\"loader-overlay\">\n          <div class=\"loader-overlay-content\">\n            <div class={`loader-container size-${this.size}`}>\n              {this.renderSpinner()}\n            </div>\n            {this.renderMessage(true)}\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div class={`loader-container size-${this.size}`}>\n        {this.renderSpinner()}\n        {this.renderMessage(false)}\n      </div>\n    );\n  }\n}\n"],"names":["h"],"mappings":"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"}

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

@@ -0,0 +1,47 @@
+'use strict';
+
+var bhButton = require('./bh-button-CKYE8jYL.js');
+var index = require('./index-BVJ_Kket.js');
+
+const bhLoaderSpinnerCss = ":host{display:inline-block}.loader-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.3);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999}.loader-overlay-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.loader-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.loader-spinner{position:relative;display:inline-block}.loader-message{color:var(--color-neutral-700);font-size:var(--text-sm-size);line-height:var(--text-sm-line);font-weight:var(--weight-medium);text-align:center;margin-top:var(--spacing-xs)}.loader-overlay .loader-message{color:var(--color-white)}.spinner-gradient{animation:gradient-rotate 2s linear infinite;will-change:transform}.gradient-svg{display:block;transform-origin:50% 50%}.gradient-path{stroke-dasharray:90, 150;stroke-dashoffset:0;animation:gradient-dash 1.5s ease-in-out infinite;transform-origin:50% 50%}.size-sm .gradient-svg{width:20px;height:20px}.size-sm .gradient-path{stroke-width:5}.size-md .gradient-svg{width:30px;height:30px}.size-md .gradient-path{stroke-width:5}.size-lg .gradient-svg{width:40px;height:40px}.size-lg .gradient-path{stroke-width:5}.size-xl .gradient-svg{width:60px;height:60px}.size-xl .gradient-path{stroke-width:6}@keyframes gradient-rotate{100%{transform:rotate(360deg)}}@keyframes gradient-dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}.loader-container:hover .spinner-gradient{animation-duration:1s}.loader-container:hover .gradient-path{animation-duration:0.6s}.spinner-gradient{backface-visibility:hidden;perspective:1000px}.gradient-svg{transform:translateZ(0)}";
+
+const BhLoaderSpinner = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Loader size */
+    size = 'md';
+    /** Loader color variant - use 'white' for dark surfaces like buttons */
+    variant = 'default';
+    /** Whether to show as overlay */
+    overlay = false;
+    /** Message to show in overlay mode */
+    overlayMessage = '';
+    /** Whether to show message */
+    showMessage = false;
+    /** Message text */
+    message = 'Loading...';
+    renderSpinner() {
+        const gradientId = this.variant === 'white' ? 'bellhop-gradient-white' : 'bellhop-gradient';
+        return (index.h("div", { class: `loader-spinner variant-${this.variant}` }, index.h("div", { class: "spinner-gradient" }, index.h("svg", { class: "gradient-svg", viewBox: "0 0 50 50" }, index.h("defs", null, this.variant === 'white' ? (index.h("linearGradient", { id: "bellhop-gradient-white", x1: "0%", y1: "0%", x2: "0%", y2: "100%" }, index.h("stop", { offset: "0%", style: { stopColor: 'rgba(255, 255, 255, 1)' } }), index.h("stop", { offset: "50%", style: { stopColor: 'rgba(255, 255, 255, 0.8)' } }), index.h("stop", { offset: "100%", style: { stopColor: 'rgba(255, 255, 255, 0.5)' } }))) : (index.h("linearGradient", { id: "bellhop-gradient", x1: "0%", y1: "0%", x2: "0%", y2: "100%" }, index.h("stop", { offset: "0%", style: { stopColor: 'var(--color-accent-300)' } }), index.h("stop", { offset: "51%", style: { stopColor: 'var(--color-brand-400)' } }), index.h("stop", { offset: "100%", style: { stopColor: 'var(--color-brand-600)' } })))), index.h("circle", { class: "gradient-path", cx: "25", cy: "25", r: "20", fill: "none", stroke: `url(#${gradientId})`, "stroke-width": "4", "stroke-linecap": "round" })))));
+    }
+    renderMessage(isOverlay) {
+        const shouldShowMessage = isOverlay
+            ? (this.showMessage || this.overlayMessage)
+            : this.showMessage;
+        if (!shouldShowMessage)
+            return null;
+        return (index.h("div", { class: "loader-message" }, isOverlay ? (this.overlayMessage || this.message) : this.message));
+    }
+    render() {
+        if (this.overlay) {
+            return (index.h("div", { class: "loader-overlay" }, index.h("div", { class: "loader-overlay-content" }, index.h("div", { class: `loader-container size-${this.size}` }, this.renderSpinner()), this.renderMessage(true))));
+        }
+        return (index.h("div", { class: `loader-container size-${this.size}` }, this.renderSpinner(), this.renderMessage(false)));
+    }
+};
+BhLoaderSpinner.style = bhLoaderSpinnerCss;
+
+exports.bh_button = bhButton.BhButton;
+exports.bh_loader_spinner = BhLoaderSpinner;
+//# sourceMappingURL=bh-button.bh-loader-spinner.entry.cjs.js.map

package/dist/cjs/bh-card-footer.cjs.entry.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.js');
+
+const bhCardFooterCss = ":host{display:block}.card-footer{display:flex;flex-direction:column;gap:var(--spacing-xs);background:var(--color-white)}.card-footer-divider{height:1px;background:var(--color-neutral-200)}.card-footer-content{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg) var(--spacing-xl)}.card-footer-align-left{justify-content:flex-start}.card-footer-align-right{justify-content:flex-end}.card-footer-align-space-between{justify-content:space-between}.card-footer-primary-actions{display:flex;flex:1 0 0;align-items:center;gap:var(--spacing-none);min-width:0}.card-footer-secondary-actions{display:flex;align-items:center;gap:var(--spacing-md)}.card-footer-primary-actions:empty,.card-footer-secondary-actions:empty{display:none}";
+
+const BhCardFooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * Whether to show the divider above the footer
+     */
+    showDivider = true;
+    /**
+     * Alignment of the footer content
+     */
+    alignment = 'space-between';
+    render() {
+        const footerContentClasses = {
+            'card-footer-content': true,
+            [`card-footer-align-${this.alignment}`]: true,
+        };
+        return (index.h(index.Host, { key: '27230a36e6bafcbb61bdac3bc0bcebbd550e70c8' }, index.h("div", { key: '1f0088fbe2a962080e5db856eb534029ed94d8e2', class: "card-footer" }, this.showDivider && index.h("div", { key: 'f320e028a9c4675b151547f6e368f67910e87d85', class: "card-footer-divider" }), index.h("div", { key: '9f35426a461e248e09de3c5e9eca23e7d63d9f08', class: footerContentClasses }, index.h("div", { key: 'd1d17256b3aa704bb898f711519c96405a7927af', class: "card-footer-primary-actions" }, index.h("slot", { key: '5f18da8ec38e3a2e2237a3bd4d1269686514047d', name: "primary-actions" })), index.h("div", { key: '0754da91faf75928a1070a01960f41395f0387dc', class: "card-footer-secondary-actions" }, index.h("slot", { key: '2ffc5290e3499d62e72fd1398b44811d0f0970ba', name: "secondary-actions" }))))));
+    }
+};
+BhCardFooter.style = bhCardFooterCss;
+
+exports.bh_card_footer = BhCardFooter;
+//# sourceMappingURL=bh-card-footer.entry.cjs.js.map