@actabldesign/bellhop-core 0.0.3

package/components/p-DTgHvmlL.js

@@ -0,0 +1,149 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-9a7sQzad.js';
+import { d as defineCustomElement$1 } from './p-Bbo_Dwmk.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 = /*@__PURE__*/ proxyCustomElement(class BhButton extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        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)))));
+    }
+    static get style() { return bhButtonCss; }
+}, [769, "bh-button", {
+        "hierarchy": [1],
+        "kind": [1],
+        "icon": [1],
+        "size": [1],
+        "label": [1],
+        "iconName": [1, "icon-name"],
+        "disabled": [4],
+        "loading": [4],
+        "type": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-button", "bh-loader-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhButton);
+            }
+            break;
+        case "bh-loader-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhButton as B, defineCustomElement as d };
+//# sourceMappingURL=p-DTgHvmlL.js.map
+
+//# sourceMappingURL=p-DTgHvmlL.js.map

package/components/p-DTgHvmlL.js.map

@@ -0,0 +1 @@
+{"file":"p-DTgHvmlL.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}

package/components/p-DVhHZCku.js

@@ -0,0 +1,220 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-9a7sQzad.js';
+import { d as defineCustomElement$4 } from './p-YJm8-pxX.js';
+import { d as defineCustomElement$3 } from './p-DTgHvmlL.js';
+import { d as defineCustomElement$2 } from './p-ghuDbZwh.js';
+import { d as defineCustomElement$1 } from './p-Bbo_Dwmk.js';
+
+const bhDropdownCss = ":host{display:inline-block;position:relative}.dropdown-container{position:relative;display:inline-block}.dropdown-container bh-dropdown-menu{position:absolute;z-index:1000}.dropdown-container:not(.dropdown-avatar-variant) bh-dropdown-menu{top:100%;right:0;margin-top:var(--spacing-sm)}.dropdown-avatar-variant bh-dropdown-menu{bottom:0;left:calc(100% + var(--spacing-sm))}.dropdown-avatar{cursor:pointer;border-radius:50%;transition:box-shadow 0.2s ease;outline:none;display:inline-block;user-select:none}.dropdown-avatar:hover:not(.dropdown-avatar-disabled){box-shadow:0 0 0 2px var(--color-neutral-200)}.dropdown-avatar:focus:not(.dropdown-avatar-disabled){box-shadow:0 0 0 2px var(--color-brand-500)}.dropdown-avatar-focus{box-shadow:0 0 0 2px var(--color-brand-500)}.dropdown-avatar-disabled{cursor:not-allowed;opacity:0.5}.dropdown-open bh-button{--button-focus-ring:0 0 0 2px var(--color-brand-100)}";
+
+const BhDropdown = /*@__PURE__*/ proxyCustomElement(class BhDropdown extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhItemClick = createEvent(this, "bhItemClick");
+    }
+    get el() { return this; }
+    /**
+     * Size of the dropdown trigger
+     */
+    size = 'md';
+    /**
+     * State of the dropdown
+     */
+    state = 'default';
+    /**
+     * Visual variant of the dropdown trigger
+     */
+    variant = 'outlined';
+    /**
+     * Label for the dropdown button
+     */
+    label = 'Options';
+    /**
+     * Icon name for icon-only variants
+     */
+    iconName = 'more_vert';
+    /**
+     * Whether the dropdown is disabled
+     */
+    disabled = false;
+    /**
+     * Menu items (JSON string or array)
+     */
+    menuItems = [];
+    /**
+     * Header configuration (JSON string or object)
+     */
+    header;
+    /**
+     * Avatar image source for avatar variant
+     */
+    avatarSrc = '';
+    /**
+     * Avatar alt text
+     */
+    avatarAlt = 'Avatar';
+    /**
+     * Avatar size for avatar variant
+     */
+    avatarSize = 'md';
+    /**
+     * Avatar name for header
+     */
+    avatarName;
+    /**
+     * Avatar email for header
+     */
+    avatarEmail;
+    /**
+     * Whether to show icons in menu items
+     */
+    showIcons = true;
+    isOpen = false;
+    /**
+     * Event emitted when a menu item is clicked
+     */
+    bhItemClick;
+    handleClickOutside(event) {
+        if (this.isOpen && !this.el.contains(event.target)) {
+            this.isOpen = false;
+        }
+    }
+    get parsedMenuItems() {
+        if (typeof this.menuItems === 'string') {
+            try {
+                return JSON.parse(this.menuItems);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.menuItems || [];
+    }
+    get parsedHeader() {
+        if (this.variant === 'avatar') {
+            return {
+                avatarGroup: true,
+                avatarSrc: this.avatarSrc,
+                name: this.avatarName,
+                email: this.avatarEmail,
+            };
+        }
+        if (!this.header)
+            return undefined;
+        if (typeof this.header === 'string') {
+            try {
+                return JSON.parse(this.header);
+            }
+            catch {
+                return undefined;
+            }
+        }
+        return this.header;
+    }
+    toggleDropdown = () => {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+    };
+    handleMenuItemClick = (event) => {
+        const item = event.detail;
+        if (!item.disabled) {
+            this.bhItemClick.emit(item);
+            this.isOpen = false;
+        }
+    };
+    get isIconOnly() {
+        return (this.variant === 'icon-only-outlined' ||
+            this.variant === 'icon-only-ghost');
+    }
+    get showAvatar() {
+        return this.variant === 'avatar';
+    }
+    get buttonHierarchy() {
+        return this.variant === 'ghost' || this.variant === 'icon-only-ghost'
+            ? 'tertiary'
+            : 'secondary';
+    }
+    render() {
+        const containerClasses = {
+            'dropdown-container': true,
+            'dropdown-open': this.isOpen,
+            'dropdown-avatar-variant': this.variant === 'avatar',
+        };
+        const avatarClasses = {
+            'dropdown-avatar': true,
+            'dropdown-avatar-focus': this.isOpen,
+            'dropdown-avatar-disabled': this.disabled,
+        };
+        return (h("div", { key: '203d4ee8afd1f081c90d19e3befb59794658bb86', class: containerClasses }, !this.showAvatar && (h("bh-button", { key: '43362ec4952a03d0b26676ac7b7a066e122da142', hierarchy: this.buttonHierarchy, icon: this.isIconOnly ? 'only' : 'trailing', size: this.size, label: this.isIconOnly ? '' : this.label, iconName: this.isIconOnly ? this.iconName : 'expand_more', disabled: this.disabled, onClick: this.toggleDropdown })), this.showAvatar && (h("div", { key: '44221c66ba3b6ed22dd877baf9d382d1408c8878', class: avatarClasses, onClick: (e) => {
+                if (!this.disabled) {
+                    e.stopPropagation();
+                    this.toggleDropdown();
+                }
+            }, role: "button", tabindex: this.disabled ? -1 : 0, onKeyDown: (e) => {
+                if (!this.disabled && (e.key === 'Enter' || e.key === ' ')) {
+                    e.preventDefault();
+                    this.toggleDropdown();
+                }
+            } }, h("bh-avatar", { key: '0eb6fd5ae65d93c996ba703f1ab044227760f78f', type: "image", size: this.avatarSize, imageSrc: this.avatarSrc, alt: this.avatarAlt }))), h("bh-dropdown-menu", { key: '5f5dc22d2983af6ba6f5331e4c2259555ed6d498', visible: this.isOpen, showIcons: this.showIcons, menuItems: JSON.stringify(this.parsedMenuItems), header: this.parsedHeader ? JSON.stringify(this.parsedHeader) : undefined, onBhItemClick: this.handleMenuItemClick })));
+    }
+    static get style() { return bhDropdownCss; }
+}, [769, "bh-dropdown", {
+        "size": [1],
+        "state": [1],
+        "variant": [1],
+        "label": [1],
+        "iconName": [1, "icon-name"],
+        "disabled": [4],
+        "menuItems": [1, "menu-items"],
+        "header": [1],
+        "avatarSrc": [1, "avatar-src"],
+        "avatarAlt": [1, "avatar-alt"],
+        "avatarSize": [1, "avatar-size"],
+        "avatarName": [1, "avatar-name"],
+        "avatarEmail": [1, "avatar-email"],
+        "showIcons": [4, "show-icons"],
+        "isOpen": [32]
+    }, [[4, "click", "handleClickOutside"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-dropdown", "bh-avatar", "bh-button", "bh-dropdown-menu", "bh-loader-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-dropdown":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhDropdown);
+            }
+            break;
+        case "bh-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "bh-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-dropdown-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "bh-loader-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhDropdown as B, defineCustomElement as d };
+//# sourceMappingURL=p-DVhHZCku.js.map
+
+//# sourceMappingURL=p-DVhHZCku.js.map

package/components/p-DVhHZCku.js.map

@@ -0,0 +1 @@
+{"file":"p-DVhHZCku.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-dropdown/bh-dropdown.css?tag=bh-dropdown&encapsulation=shadow","src/components/bh-dropdown/bh-dropdown.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-DROPDOWN COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n  position: relative;\n}\n\n.dropdown-container {\n  position: relative;\n  display: inline-block;\n}\n\n/* Position the dropdown menu */\n.dropdown-container bh-dropdown-menu {\n  position: absolute;\n  z-index: 1000;\n}\n\n/* Default positioning for button variants (below trigger) */\n.dropdown-container:not(.dropdown-avatar-variant) bh-dropdown-menu {\n  top: 100%;\n  right: 0;\n  margin-top: var(--spacing-sm);\n}\n\n/* Avatar variant positioning (to the left of avatar for sidebars) */\n.dropdown-avatar-variant bh-dropdown-menu {\n  bottom: 0;\n  left: calc(100% + var(--spacing-sm));\n}\n\n/* Avatar trigger styles */\n.dropdown-avatar {\n  cursor: pointer;\n  border-radius: 50%;\n  transition: box-shadow 0.2s ease;\n  outline: none;\n  display: inline-block;\n  user-select: none;\n}\n\n.dropdown-avatar:hover:not(.dropdown-avatar-disabled) {\n  box-shadow: 0 0 0 2px var(--color-neutral-200);\n}\n\n.dropdown-avatar:focus:not(.dropdown-avatar-disabled) {\n  box-shadow: 0 0 0 2px var(--color-brand-500);\n}\n\n.dropdown-avatar-focus {\n  box-shadow: 0 0 0 2px var(--color-brand-500);\n}\n\n.dropdown-avatar-disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Button state when dropdown is open */\n.dropdown-open bh-button {\n  --button-focus-ring: 0 0 0 2px var(--color-brand-100);\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  h,\n  Listen,\n} from '@stencil/core';\nimport type {\n  DropdownMenuItem,\n  DropdownMenuHeader,\n} from '../bh-dropdown-menu/bh-dropdown-menu';\n\nexport type DropdownSize = 'sm' | 'md';\nexport type DropdownState = 'default' | 'focus' | 'disabled';\nexport type DropdownVariant =\n  | 'outlined'\n  | 'ghost'\n  | 'icon-only-outlined'\n  | 'icon-only-ghost'\n  | 'avatar';\n\n@Component({\n  tag: 'bh-dropdown',\n  styleUrl: 'bh-dropdown.css',\n  shadow: true,\n})\nexport class BhDropdown {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Size of the dropdown trigger\n   */\n  @Prop() size: DropdownSize = 'md';\n\n  /**\n   * State of the dropdown\n   */\n  @Prop() state: DropdownState = 'default';\n\n  /**\n   * Visual variant of the dropdown trigger\n   */\n  @Prop() variant: DropdownVariant = 'outlined';\n\n  /**\n   * Label for the dropdown button\n   */\n  @Prop() label: string = 'Options';\n\n  /**\n   * Icon name for icon-only variants\n   */\n  @Prop() iconName: string = 'more_vert';\n\n  /**\n   * Whether the dropdown is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Menu items (JSON string or array)\n   */\n  @Prop() menuItems: DropdownMenuItem[] | string = [];\n\n  /**\n   * Header configuration (JSON string or object)\n   */\n  @Prop() header?: DropdownMenuHeader | string;\n\n  /**\n   * Avatar image source for avatar variant\n   */\n  @Prop() avatarSrc: string = '';\n\n  /**\n   * Avatar alt text\n   */\n  @Prop() avatarAlt: string = 'Avatar';\n\n  /**\n   * Avatar size for avatar variant\n   */\n  @Prop() avatarSize: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Avatar name for header\n   */\n  @Prop() avatarName?: string;\n\n  /**\n   * Avatar email for header\n   */\n  @Prop() avatarEmail?: string;\n\n  /**\n   * Whether to show icons in menu items\n   */\n  @Prop() showIcons: boolean = true;\n\n  @State() isOpen: boolean = false;\n\n  /**\n   * Event emitted when a menu item is clicked\n   */\n  @Event() bhItemClick!: EventEmitter<DropdownMenuItem>;\n\n  @Listen('click', { target: 'document' })\n  handleClickOutside(event: MouseEvent) {\n    if (this.isOpen && !this.el.contains(event.target as Node)) {\n      this.isOpen = false;\n    }\n  }\n\n  private get parsedMenuItems(): DropdownMenuItem[] {\n    if (typeof this.menuItems === 'string') {\n      try {\n        return JSON.parse(this.menuItems);\n      } catch {\n        return [];\n      }\n    }\n    return this.menuItems || [];\n  }\n\n  private get parsedHeader(): DropdownMenuHeader | undefined {\n    if (this.variant === 'avatar') {\n      return {\n        avatarGroup: true,\n        avatarSrc: this.avatarSrc,\n        name: this.avatarName,\n        email: this.avatarEmail,\n      };\n    }\n    if (!this.header) return undefined;\n    if (typeof this.header === 'string') {\n      try {\n        return JSON.parse(this.header);\n      } catch {\n        return undefined;\n      }\n    }\n    return this.header;\n  }\n\n  private toggleDropdown = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleMenuItemClick = (event: CustomEvent<DropdownMenuItem>) => {\n    const item = event.detail;\n    if (!item.disabled) {\n      this.bhItemClick.emit(item);\n      this.isOpen = false;\n    }\n  };\n\n  private get isIconOnly(): boolean {\n    return (\n      this.variant === 'icon-only-outlined' ||\n      this.variant === 'icon-only-ghost'\n    );\n  }\n\n  private get showAvatar(): boolean {\n    return this.variant === 'avatar';\n  }\n\n  private get buttonHierarchy(): 'secondary' | 'tertiary' {\n    return this.variant === 'ghost' || this.variant === 'icon-only-ghost'\n      ? 'tertiary'\n      : 'secondary';\n  }\n\n  render() {\n    const containerClasses = {\n      'dropdown-container': true,\n      'dropdown-open': this.isOpen,\n      'dropdown-avatar-variant': this.variant === 'avatar',\n    };\n\n    const avatarClasses = {\n      'dropdown-avatar': true,\n      'dropdown-avatar-focus': this.isOpen,\n      'dropdown-avatar-disabled': this.disabled,\n    };\n\n    return (\n      <div class={containerClasses}>\n        {/* Button variants */}\n        {!this.showAvatar && (\n          <bh-button\n            hierarchy={this.buttonHierarchy}\n            icon={this.isIconOnly ? 'only' : 'trailing'}\n            size={this.size}\n            label={this.isIconOnly ? '' : this.label}\n            iconName={this.isIconOnly ? this.iconName : 'expand_more'}\n            disabled={this.disabled}\n            onClick={this.toggleDropdown}\n          />\n        )}\n\n        {/* Avatar variant */}\n        {this.showAvatar && (\n          <div\n            class={avatarClasses}\n            onClick={(e) => {\n              if (!this.disabled) {\n                e.stopPropagation();\n                this.toggleDropdown();\n              }\n            }}\n            role=\"button\"\n            tabindex={this.disabled ? -1 : 0}\n            onKeyDown={(e: KeyboardEvent) => {\n              if (!this.disabled && (e.key === 'Enter' || e.key === ' ')) {\n                e.preventDefault();\n                this.toggleDropdown();\n              }\n            }}\n          >\n            <bh-avatar\n              type=\"image\"\n              size={this.avatarSize}\n              imageSrc={this.avatarSrc}\n              alt={this.avatarAlt}\n            />\n          </div>\n        )}\n\n        {/* Menu */}\n        <bh-dropdown-menu\n          visible={this.isOpen}\n          showIcons={this.showIcons}\n          menuItems={JSON.stringify(this.parsedMenuItems)}\n          header={\n            this.parsedHeader ? JSON.stringify(this.parsedHeader) : undefined\n          }\n          onBhItemClick={this.handleMenuItemClick}\n        />\n      </div>\n    );\n  }\n}\n"],"version":3}