npm - @actabldesign/bellhop-core - Versions diffs - 0.0.3 → 0.0.6 - Mend

@actabldesign/bellhop-core 0.0.3 → 0.0.6

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

Files changed (1505) hide show

package/dist/esm/bh-badge-dot_2.entry.js ADDED Viewed

@@ -0,0 +1,131 @@
+import { r as registerInstance, h, c as createEvent, F as Fragment } from './index-DXAL-jSE.js';
+const bhBadgeDotCss = ":host{display:inline-block}.badge-dot{border-radius:9999px;position:relative;display:inline-block;box-sizing:border-box}.badge-dot-sm{width:6px;height:6px}.badge-dot-md{width:8px;height:8px}.badge-dot-lg{width:10px;height:10px}.badge-dot-success{background-color:var(--color-success-500, #17B26A)}.badge-dot-blue{background-color:var(--color-blue-500, #5068DD)}.badge-dot-error{background-color:var(--color-error-500, #F05250)}.badge-dot-warning{background-color:var(--color-warning-500, #F79009)}.badge-dot-outline.badge-dot-sm{outline:3px solid;outline-offset:0}.badge-dot-outline.badge-dot-md{outline:4px solid;outline-offset:0}.badge-dot-outline.badge-dot-lg{outline:5px solid;outline-offset:0}.badge-dot-outline.badge-dot-success{outline-color:var(--color-success-100, #D1FADF)}.badge-dot-outline.badge-dot-blue{outline-color:var(--color-blue-200, #E1EAFE)}.badge-dot-outline.badge-dot-error{outline-color:var(--color-error-200, #FEE4E2)}.badge-dot-outline.badge-dot-warning{outline-color:var(--color-warning-200, #FEF0C7)}";
+const BhBadgeDot = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * The size of the badge dot
+     */
+    size = 'md';
+    /**
+     * The color of the badge dot
+     */
+    color = 'error';
+    /**
+     * Whether to show an outline ring around the dot
+     */
+    outline = false;
+    render() {
+        const dotClasses = {
+            'badge-dot': true,
+            [`badge-dot-${this.size}`]: true,
+            [`badge-dot-${this.color}`]: true,
+            'badge-dot-outline': this.outline,
+        };
+        return h("div", { key: 'c5ce0849442e1b1551185936a328987877a888f5', class: dotClasses, part: "dot" });
+    }
+};
+BhBadgeDot.style = bhBadgeDotCss;
+const bhBreadcrumbsCss = ":host{display:block}.breadcrumbs{font-family:var(--font-inter);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.breadcrumbs-container{display:flex;align-items:center;gap:var(--spacing-xs);flex-wrap:wrap}.breadcrumb-item{display:flex;align-items:center}.breadcrumb-button{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xs) var(--spacing-sm);border:none;background:transparent;border-radius:6px;cursor:pointer;transition:all 0.15s ease;color:var(--color-neutral-600);text-decoration:none;font-family:var(--font-inter);font-size:var(--text-sm-size);font-weight:500;line-height:1.4285714285714286em;min-height:24px;box-sizing:border-box}.breadcrumb-button:hover{background-color:var(--color-neutral-50);color:var(--color-neutral-900)}.breadcrumb-button:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:2px}.breadcrumb-home{padding:var(--spacing-xs);min-width:24px;min-height:24px}.breadcrumb-current{background-color:var(--color-neutral-50);color:var(--color-neutral-800);font-weight:500;cursor:default}.breadcrumb-current:hover{background-color:var(--color-neutral-50);color:var(--color-neutral-800)}.breadcrumb-ellipsis{color:var(--color-neutral-600);font-weight:500}.breadcrumb-ellipsis:hover{background-color:var(--color-neutral-50);color:var(--color-neutral-900)}.breadcrumb-text{white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}.breadcrumb-icon{flex-shrink:0;font-size:20px;width:20px;height:20px;color:var(--color-neutral-600)}.breadcrumb-home .breadcrumb-icon{font-size:20px;width:20px;height:20px}.breadcrumb-separator{display:flex;align-items:center;color:var(--color-neutral-300);font-size:20px;flex-shrink:0}.breadcrumb-separator .material-symbols-outlined{font-size:20px;width:20px;height:20px}.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;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}@media (max-width: 640px){.breadcrumb-text{max-width:120px}.breadcrumbs-container{gap:var(--spacing-xxs)}.breadcrumb-button{padding:var(--spacing-xxs) var(--spacing-xs);font-size:12px}}";
+const BhBreadcrumbs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhItemClick = createEvent(this, "bhItemClick");
+        this.bhNavigate = createEvent(this, "bhNavigate");
+    }
+    /**
+     * Array of breadcrumb items
+     */
+    items = [];
+    /**
+     * Separator icon name (Material Symbols)
+     */
+    separator = 'chevron_right';
+    /**
+     * Whether to show the home button
+     */
+    showHome = true;
+    /**
+     * Maximum number of visible items before collapsing
+     */
+    maxVisibleItems = 4;
+    /**
+     * Event emitted when a breadcrumb item is clicked
+     */
+    bhItemClick;
+    /**
+     * Event emitted when navigating to a path
+     */
+    bhNavigate;
+    get parsedItems() {
+        if (typeof this.items === 'string') {
+            try {
+                return JSON.parse(this.items);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.items || [];
+    }
+    get displayData() {
+        const items = this.parsedItems;
+        if (!items || items.length <= this.maxVisibleItems) {
+            return {
+                displayItems: items ? [...items] : [],
+                showEllipsis: false,
+                collapsedItems: [],
+            };
+        }
+        else {
+            const lastItems = items.slice(-(this.maxVisibleItems - 2));
+            return {
+                displayItems: [items[0], ...lastItems],
+                showEllipsis: true,
+                collapsedItems: items.slice(1, -(this.maxVisibleItems - 2)),
+            };
+        }
+    }
+    handleItemClick(item) {
+        if (!item.isActive && item.path) {
+            this.bhItemClick.emit(item);
+            this.bhNavigate.emit(item.path);
+        }
+    }
+    handleHomeClick = () => {
+        const homeItem = {
+            label: 'Home',
+            path: '/',
+        };
+        this.bhItemClick.emit(homeItem);
+        this.bhNavigate.emit('/');
+    };
+    handleEllipsisClick = () => {
+        const { collapsedItems } = this.displayData;
+        if (collapsedItems.length > 0) {
+            this.handleItemClick(collapsedItems[0]);
+        }
+    };
+    renderBreadcrumbItem(item, index) {
+        if (item.isActive || !item.path) {
+            return (h("div", { key: index, class: "breadcrumb-button breadcrumb-current", "aria-current": "page" }, h("span", { class: "breadcrumb-text" }, item.label)));
+        }
+        return (h("button", { key: index, type: "button", class: "breadcrumb-button", onClick: () => this.handleItemClick(item) }, h("span", { class: "breadcrumb-text" }, item.label)));
+    }
+    renderSeparator() {
+        return (h("div", { class: "breadcrumb-separator" }, h("span", { class: "material-symbols-outlined" }, this.separator)));
+    }
+    render() {
+        const { displayItems, showEllipsis, collapsedItems } = this.displayData;
+        return (h("nav", { key: 'f8fa78dc80f7e0a6d7c2161396348a892f4c9d0b', class: "breadcrumbs", "aria-label": "Breadcrumb" }, h("div", { key: 'b7a5ae9c8206992802c6be37687c41033d452d7b', class: "breadcrumbs-container" }, this.showHome && (h("div", { key: '0e5312f7c42a90f2f979be515a856d60d2ffd733', class: "breadcrumb-item" }, h("bh-button-icon", { key: 'b95e5c59a7a5800c670c0c2b05ffc482d25f084c', hierarchy: "quaternary", size: "xs", iconName: "cottage", onClick: this.handleHomeClick, "aria-label": "Home" }))), this.showHome && (displayItems.length > 0 || showEllipsis) && this.renderSeparator(), showEllipsis && displayItems.length > 0 && (h(Fragment, { key: '510adc7a0db807a4232c2d23bbdbf55de28cc0b0' }, h("div", { key: 'dafefca139a16b4ae71c6577f8885d055e7643dc', class: "breadcrumb-item" }, this.renderBreadcrumbItem(displayItems[0], 0)), this.renderSeparator(), h("div", { key: '0ea0b6c5093c551e9f927b08e3caddd2c85d64d7', class: "breadcrumb-item" }, h("button", { key: 'b14a815428f58d34a753e8b1ae841a6c7a815b15', type: "button", class: "breadcrumb-button breadcrumb-ellipsis", onClick: this.handleEllipsisClick, title: `Show ${collapsedItems.length} hidden items` }, h("span", { key: 'f22204e923c5bb60be5b578861be47c0bb8aacf0', class: "breadcrumb-text" }, "..."))), this.renderSeparator(), displayItems.slice(1).map((item, index) => (h(Fragment, null, h("div", { class: "breadcrumb-item", key: `item-${index + 1}` }, this.renderBreadcrumbItem(item, index + 1)), index < displayItems.slice(1).length - 1 && this.renderSeparator()))))), !showEllipsis && displayItems.map((item, index) => (h(Fragment, null, h("div", { class: "breadcrumb-item", key: `item-${index}` }, this.renderBreadcrumbItem(item, index)), index < displayItems.length - 1 && this.renderSeparator()))))));
+    }
+};
+BhBreadcrumbs.style = bhBreadcrumbsCss;
+export { BhBadgeDot as bh_badge_dot, BhBreadcrumbs as bh_breadcrumbs };
+//# sourceMappingURL=bh-badge-dot.bh-breadcrumbs.entry.js.map

package/dist/esm/bh-badge.entry.js ADDED Viewed

@@ -0,0 +1,69 @@
+import { r as registerInstance, c as createEvent, h } from './index-DXAL-jSE.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) {
+        registerInstance(this, hostRef);
+        this.bhDismiss = 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 (h("span", { key: '240872b520f525ebf20a8d96fd00bd920ef5db39', class: badgeClasses, part: "badge" }, this.icon && (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)), h("span", { key: 'e4556215b4af0bf56dd5058697d2aac9ecb62d75', class: "badge-label" }, this.label), this.dismissible && (h("button", { key: 'bd455d4b8b2dca8cc7596ed2dddcbe69ff11b9cf', class: "badge-dismiss", onClick: this.handleDismiss, disabled: this.disabled, type: "button", "aria-label": "Dismiss", part: "dismiss-button" }, h("span", { key: 'b4f8e3be6334840ff909cd3c60ec1d7725f09a77', class: `material-symbols-outlined badge-dismiss-icon ${iconColorClass}` }, "close")))));
+    }
+};
+BhBadge.style = bhBadgeCss;
+export { BhBadge as bh_badge };
+//# sourceMappingURL=bh-badge.entry.js.map

package/dist/esm/bh-bar-chart.entry.js ADDED Viewed

@@ -0,0 +1,162 @@
+import { r as registerInstance, h, H as Host } from './index-DXAL-jSE.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) {
+        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 (h(Host, { key: 'f851ed646c231a9c1c8e6757d0a46e2d9363f942' }, h("div", { key: 'c306d4f127c52ec87b0b470286491d928b6b6337', class: {
+                'bar-chart': true,
+                [this.type]: true,
+                [this.orientation]: true,
+                'bar-chart-animated': this.animated,
+            } }, this.orientation === 'vertical' ? (h("div", { class: "vertical-container" }, processedData.map((bar, i) => (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) => (h("div", { key: segIndex, class: "bar-segment vertical", style: {
+                height: `${segment.height}px`,
+                backgroundColor: segment.color,
+            } })))))))) : (h("div", { class: "horizontal-container" }, processedData.map((bar, i) => (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) => (h("div", { key: segIndex, class: "bar-segment horizontal", style: {
+                width: `${(segment.value / bar.totalValue) * 100}%`,
+                backgroundColor: segment.color,
+            } }))))))))), 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;
+export { BhBarChart as bh_bar_chart };
+//# sourceMappingURL=bh-bar-chart.entry.js.map

package/dist/esm/bh-button-icon.entry.js ADDED Viewed

@@ -0,0 +1,72 @@
+import { r as registerInstance, c as createEvent, h } from './index-DXAL-jSE.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) {
+        registerInstance(this, hostRef);
+        this.bhClick = 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 (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 ? (h("span", { class: "loading-spinner", part: "spinner" })) : (h("span", { class: "material-symbols-outlined icon", part: "icon" }, this.iconName))));
+    }
+};
+BhButtonIcon.style = bhButtonIconCss;
+export { BhButtonIcon as bh_button_icon };
+//# sourceMappingURL=bh-button-icon.entry.js.map

package/dist/esm/bh-button-n5gkWRSP.js ADDED Viewed

@@ -0,0 +1,115 @@
+import { r as registerInstance, c as createEvent, h } from './index-DXAL-jSE.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) {
+        registerInstance(this, hostRef);
+        this.bhClick = 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 (h("button", { key: 'f2f54633cb42a7fea15c38aa8bc24be085320dc9', type: this.type, class: buttonClasses, disabled: this.disabled, onClick: this.handleClick, part: "button" }, showLeadingIcon && (h("span", { key: '682a4704e4f874b4f3d051aab4738829cbd47778', class: `btn-icon ${this.getIconSizeClass()}` }, this.loading ? (h("bh-loader-spinner", { size: this.getLoaderSize(), variant: this.getLoaderVariant() })) : (h("span", { class: "btn-icon-material material-symbols-outlined" }, this.iconName)))), showOnlyIcon && (h("span", { key: '767e0ee41843e2ef8b3a45ec82f15602848ad751', class: `btn-icon ${this.getIconSizeClass()}` }, this.loading ? (h("bh-loader-spinner", { size: this.getLoaderSize(), variant: this.getLoaderVariant() })) : (h("span", { class: "btn-icon-material material-symbols-outlined" }, this.iconName)))), showLabel && (h("span", { key: 'bb2ddbcf7eb35dd5af688a6fc6d61d07f67d90ba', class: `btn-label ${this.getTextSizeClass()}` }, h("slot", { key: '010690eeab4cea1205d2ebca5cc2e1bfc95048c7' }, this.label))), showTrailingIcon && (h("span", { key: '9de8df1ab10e9035affbd766fea95896762e2bca', class: `btn-icon ${this.getIconSizeClass()}` }, h("span", { key: 'b50370274c0513a7885eae4bf40235c3e7e245aa', class: "btn-icon-material material-symbols-outlined" }, this.iconName)))));
+    }
+};
+BhButton.style = bhButtonCss;
+export { BhButton as B };
+//# sourceMappingURL=bh-button-n5gkWRSP.js.map
+//# sourceMappingURL=bh-button-n5gkWRSP.js.map

package/dist/esm/bh-button-n5gkWRSP.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"bh-button-n5gkWRSP.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 \n {this.loading ? (\n <bh-loader-spinner\n size={this.getLoaderSize()}\n variant={this.getLoaderVariant()}\n ></bh-loader-spinner>\n ) : (\n \n {this.iconName}\n \n )}\n \n )}\n\n {showOnlyIcon && (\n \n {this.loading ? (\n <bh-loader-spinner\n size={this.getLoaderSize()}\n variant={this.getLoaderVariant()}\n ></bh-loader-spinner>\n ) : (\n \n {this.iconName}\n \n )}\n \n )}\n\n {showLabel && (\n \n <slot>{this.label}</slot>\n \n )}\n\n {showTrailingIcon && (\n \n \n {this.iconName}\n \n \n )}\n </button>\n );\n }\n}\n"],"names":[],"mappings":"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"}