@actabldesign/bellhop-core 0.0.3 → 0.0.4

package/dist/components/p-Dm3E-tB8.js

@@ -0,0 +1,154 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-ChfLhYiJ.js';
+
+const bhAutocompleteMenuCss = ".autocomplete-menu{position:absolute;z-index:1000;top:calc(100% + var(--spacing-sm));left:0;right:0;width:100%;min-width:240px;background:var(--color-white);border-radius:var(--radius-md);box-shadow:0px 32px 64px -12px rgba(64, 73, 104, 0.14),\n    0px 0px 1px 1px rgba(64, 73, 104, 0.1);border:1px solid var(--color-neutral-200);overflow:hidden;overflow-y:auto;padding:var(--spacing-xs) 0;box-sizing:border-box;transform:translateZ(0);will-change:opacity, transform}.autocomplete-item{padding:var(--spacing-none) var(--spacing-sm);cursor:pointer}.autocomplete-item.disabled{opacity:0.5;cursor:not-allowed}.item-content{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-md);border-radius:var(--radius-sm);transition:background-color 0.15s ease}.autocomplete-item:hover:not(.disabled) .item-content{background:var(--color-neutral-100)}.autocomplete-item.selected .item-content{background:var(--color-neutral-100)}.item-text{font-family:var(--font-inter);font-weight:var(--weight-medium);font-size:var(--text-sm-size);line-height:var(--text-sm-line);color:var(--color-neutral-700);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.autocomplete-item.selected .item-text{color:var(--color-neutral-700);font-weight:var(--weight-medium)}.autocomplete-item.disabled .item-text{color:var(--color-neutral-400)}.item-text .highlight{font-weight:var(--weight-semibold);color:var(--color-neutral-800)}.check-icon{font-size:var(--text-xl-size);color:var(--color-brand-600);flex-shrink:0;font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24}.autocomplete-menu::-webkit-scrollbar{width:6px}.autocomplete-menu::-webkit-scrollbar-track{background:var(--color-neutral-50);border-radius:var(--radius-xs)}.autocomplete-menu::-webkit-scrollbar-thumb{background:var(--color-neutral-200);border-radius:var(--radius-xs)}.autocomplete-menu::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-300)}.autocomplete-menu{scrollbar-width:thin;scrollbar-color:var(--color-neutral-200) var(--color-neutral-50)}@media (prefers-contrast: high){.autocomplete-menu{border-width:2px}.autocomplete-item.selected{outline:2px solid var(--color-brand-500);outline-offset:-2px}}@media (prefers-reduced-motion: reduce){.autocomplete-menu.animate-dropdown-enter,.autocomplete-menu.animate-dropdown-exit{animation:none}.autocomplete-item{transition:none}}";
+
+const BhAutocompleteMenu = /*@__PURE__*/ proxyCustomElement(class BhAutocompleteMenu extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhItemClick = createEvent(this, "bhItemClick");
+        this.bhItemHover = createEvent(this, "bhItemHover");
+    }
+    /**
+     * Array of menu items
+     */
+    menuItems = [];
+    /**
+     * Whether the menu is visible
+     */
+    visible = false;
+    /**
+     * Currently selected item index
+     */
+    selectedIndex = -1;
+    /**
+     * Maximum height of the menu in pixels
+     */
+    maxHeight = 280;
+    /**
+     * Enable multi-select mode with checkmarks
+     */
+    multiSelect = false;
+    /**
+     * Search query for highlighting text
+     */
+    searchQuery = '';
+    /**
+     * Event emitted when an item is clicked
+     */
+    bhItemClick;
+    /**
+     * Event emitted when an item is hovered
+     */
+    bhItemHover;
+    isAnimating = false;
+    shouldRender = false;
+    items = [];
+    watchVisible(newValue) {
+        if (newValue) {
+            this.shouldRender = true;
+            this.isAnimating = false;
+        }
+        else {
+            this.isAnimating = true;
+            setTimeout(() => {
+                this.shouldRender = false;
+                this.isAnimating = false;
+            }, 150);
+        }
+    }
+    watchMenuItems(newValue) {
+        this.items = [...newValue];
+    }
+    componentWillLoad() {
+        this.shouldRender = this.visible;
+        this.items = [...this.menuItems];
+    }
+    handleItemClick = (item) => {
+        if (!item.disabled) {
+            if (this.multiSelect) {
+                // Toggle selection in multi-select mode
+                this.items = this.items.map(i => i.id === item.id ? { ...i, selected: !i.selected } : i);
+                const updatedItem = this.items.find(i => i.id === item.id);
+                this.bhItemClick.emit(updatedItem);
+            }
+            else {
+                this.bhItemClick.emit(item);
+            }
+        }
+    };
+    handleItemMouseEnter = (index) => {
+        this.bhItemHover.emit(index);
+    };
+    handleMouseDown = (e) => {
+        e.preventDefault();
+    };
+    getMenuClasses = () => {
+        return {
+            'autocomplete-menu': true,
+            'animate-dropdown-exit': this.isAnimating && !this.visible,
+            'animate-dropdown-enter': this.visible && !this.isAnimating,
+        };
+    };
+    getItemClasses = (index, item) => {
+        return {
+            'autocomplete-item': true,
+            'disabled': !!item.disabled,
+            'selected': index === this.selectedIndex,
+        };
+    };
+    getHighlightedText = (text) => {
+        if (!this.searchQuery || this.searchQuery.length < 3) {
+            return text;
+        }
+        const regex = new RegExp(`(${this.searchQuery})`, 'gi');
+        const parts = text.split(regex);
+        return parts.map((part, index) => regex.test(part) ? (h("span", { key: index, class: "highlight" }, part)) : (h("span", { key: index }, part)));
+    };
+    render() {
+        if (!this.shouldRender || this.items.length === 0) {
+            return null;
+        }
+        return (h(Host, null, h("div", { class: this.getMenuClasses(), style: { maxHeight: `${this.maxHeight}px` } }, this.items.map((item, index) => (h("div", { key: item.id, class: this.getItemClasses(index, item), onMouseEnter: () => this.handleItemMouseEnter(index), role: "option", "aria-selected": index === this.selectedIndex ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false' }, h("div", { class: "item-content", onClick: () => this.handleItemClick(item), onMouseDown: this.handleMouseDown }, h("span", { class: "item-text", title: item.label }, this.getHighlightedText(item.label)), this.multiSelect && item.selected && (h("span", { class: "check-icon material-symbols-outlined" }, "check")))))))));
+    }
+    static get watchers() { return {
+        "visible": ["watchVisible"],
+        "menuItems": ["watchMenuItems"]
+    }; }
+    static get style() { return bhAutocompleteMenuCss; }
+}, [769, "bh-autocomplete-menu", {
+        "menuItems": [16],
+        "visible": [4],
+        "selectedIndex": [2, "selected-index"],
+        "maxHeight": [2, "max-height"],
+        "multiSelect": [4, "multi-select"],
+        "searchQuery": [1, "search-query"],
+        "isAnimating": [32],
+        "shouldRender": [32],
+        "items": [32]
+    }, undefined, {
+        "visible": ["watchVisible"],
+        "menuItems": ["watchMenuItems"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-autocomplete-menu"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-autocomplete-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhAutocompleteMenu);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhAutocompleteMenu as B, defineCustomElement as d };
+//# sourceMappingURL=p-Dm3E-tB8.js.map
+
+//# sourceMappingURL=p-Dm3E-tB8.js.map

package/dist/components/p-Dm3E-tB8.js.map

@@ -0,0 +1 @@
+{"file":"p-Dm3E-tB8.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-autocomplete-menu/bh-autocomplete-menu.css?tag=bh-autocomplete-menu&encapsulation=shadow","src/components/bh-autocomplete-menu/bh-autocomplete-menu.tsx"],"sourcesContent":["/* ==========================================================================\n   AUTOCOMPLETE MENU COMPONENT\n   Shared styles for all frameworks\n   ========================================================================== */\n\n.autocomplete-menu {\n  position: absolute;\n  z-index: 1000;\n  top: calc(100% + var(--spacing-sm));\n  left: 0;\n  right: 0;\n  width: 100%;\n  min-width: 240px;\n  background: var(--color-white);\n  border-radius: var(--radius-md);\n  box-shadow: 0px 32px 64px -12px rgba(64, 73, 104, 0.14),\n    0px 0px 1px 1px rgba(64, 73, 104, 0.1);\n  border: 1px solid var(--color-neutral-200);\n  overflow: hidden;\n  overflow-y: auto;\n  /* Add padding like dropdown-menu items container */\n  padding: var(--spacing-xs) 0;\n  /* Optimizations for stable layout */\n  box-sizing: border-box;\n  transform: translateZ(0); /* Hardware acceleration */\n  will-change: opacity, transform;\n}\n\n\n/* Menu Items - Match dropdown-menu styling exactly */\n.autocomplete-item {\n  padding: var(--spacing-none) var(--spacing-sm);\n  cursor: pointer;\n}\n\n.autocomplete-item.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.item-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--spacing-lg);\n  padding: var(--spacing-md) var(--spacing-md);\n  border-radius: var(--radius-sm);\n  transition: background-color 0.15s ease;\n}\n\n.autocomplete-item:hover:not(.disabled) .item-content {\n  background: var(--color-neutral-100);\n}\n\n.autocomplete-item.selected .item-content {\n  background: var(--color-neutral-100);\n}\n\n.item-text {\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-700);\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.autocomplete-item.selected .item-text {\n  color: var(--color-neutral-700);\n  font-weight: var(--weight-medium);\n}\n\n.autocomplete-item.disabled .item-text {\n  color: var(--color-neutral-400);\n}\n\n/* Highlight matching text */\n.item-text .highlight {\n  font-weight: var(--weight-semibold);\n  color: var(--color-neutral-800);\n}\n\n/* Check icon for multi-select */\n.check-icon {\n  font-size: var(--text-xl-size);\n  color: var(--color-brand-600);\n  flex-shrink: 0;\n  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;\n}\n\n/* Custom Scrollbar */\n.autocomplete-menu::-webkit-scrollbar {\n  width: 6px;\n}\n\n.autocomplete-menu::-webkit-scrollbar-track {\n  background: var(--color-neutral-50);\n  border-radius: var(--radius-xs);\n}\n\n.autocomplete-menu::-webkit-scrollbar-thumb {\n  background: var(--color-neutral-200);\n  border-radius: var(--radius-xs);\n}\n\n.autocomplete-menu::-webkit-scrollbar-thumb:hover {\n  background: var(--color-neutral-300);\n}\n\n/* Firefox scrollbar */\n.autocomplete-menu {\n  scrollbar-width: thin;\n  scrollbar-color: var(--color-neutral-200) var(--color-neutral-50);\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n  .autocomplete-menu {\n    border-width: 2px;\n  }\n\n  .autocomplete-item.selected {\n    outline: 2px solid var(--color-brand-500);\n    outline-offset: -2px;\n  }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  .autocomplete-menu.animate-dropdown-enter,\n  .autocomplete-menu.animate-dropdown-exit {\n    animation: none;\n  }\n\n  .autocomplete-item {\n    transition: none;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, State, Watch, h, Host } from '@stencil/core';\n\nexport interface AutocompleteMenuItem {\n  id: string;\n  label: string;\n  disabled?: boolean;\n  selected?: boolean;\n}\n\n@Component({\n  tag: 'bh-autocomplete-menu',\n  styleUrl: 'bh-autocomplete-menu.css',\n  shadow: true,\n})\nexport class BhAutocompleteMenu {\n  /**\n   * Array of menu items\n   */\n  @Prop() menuItems: AutocompleteMenuItem[] = [];\n\n  /**\n   * Whether the menu is visible\n   */\n  @Prop() visible: boolean = false;\n\n  /**\n   * Currently selected item index\n   */\n  @Prop() selectedIndex: number = -1;\n\n  /**\n   * Maximum height of the menu in pixels\n   */\n  @Prop() maxHeight: number = 280;\n\n  /**\n   * Enable multi-select mode with checkmarks\n   */\n  @Prop() multiSelect: boolean = false;\n\n  /**\n   * Search query for highlighting text\n   */\n  @Prop() searchQuery: string = '';\n\n  /**\n   * Event emitted when an item is clicked\n   */\n  @Event() bhItemClick!: EventEmitter<AutocompleteMenuItem>;\n\n  /**\n   * Event emitted when an item is hovered\n   */\n  @Event() bhItemHover!: EventEmitter<number>;\n\n  @State() isAnimating: boolean = false;\n  @State() shouldRender: boolean = false;\n  @State() items: AutocompleteMenuItem[] = [];\n\n  @Watch('visible')\n  watchVisible(newValue: boolean) {\n    if (newValue) {\n      this.shouldRender = true;\n      this.isAnimating = false;\n    } else {\n      this.isAnimating = true;\n      setTimeout(() => {\n        this.shouldRender = false;\n        this.isAnimating = false;\n      }, 150);\n    }\n  }\n\n  @Watch('menuItems')\n  watchMenuItems(newValue: AutocompleteMenuItem[]) {\n    this.items = [...newValue];\n  }\n\n  componentWillLoad() {\n    this.shouldRender = this.visible;\n    this.items = [...this.menuItems];\n  }\n\n  private handleItemClick = (item: AutocompleteMenuItem) => {\n    if (!item.disabled) {\n      if (this.multiSelect) {\n        // Toggle selection in multi-select mode\n        this.items = this.items.map(i =>\n          i.id === item.id ? { ...i, selected: !i.selected } : i\n        );\n        const updatedItem = this.items.find(i => i.id === item.id)!;\n        this.bhItemClick.emit(updatedItem);\n      } else {\n        this.bhItemClick.emit(item);\n      }\n    }\n  };\n\n  private handleItemMouseEnter = (index: number) => {\n    this.bhItemHover.emit(index);\n  };\n\n  private handleMouseDown = (e: MouseEvent) => {\n    e.preventDefault();\n  };\n\n  private getMenuClasses = () => {\n    return {\n      'autocomplete-menu': true,\n      'animate-dropdown-exit': this.isAnimating && !this.visible,\n      'animate-dropdown-enter': this.visible && !this.isAnimating,\n    };\n  };\n\n  private getItemClasses = (index: number, item: AutocompleteMenuItem) => {\n    return {\n      'autocomplete-item': true,\n      'disabled': !!item.disabled,\n      'selected': index === this.selectedIndex,\n    };\n  };\n\n  private getHighlightedText = (text: string) => {\n    if (!this.searchQuery || this.searchQuery.length < 3) {\n      return text;\n    }\n\n    const regex = new RegExp(`(${this.searchQuery})`, 'gi');\n    const parts = text.split(regex);\n\n    return parts.map((part, index) =>\n      regex.test(part) ? (\n        <span key={index} class=\"highlight\">{part}</span>\n      ) : (\n        <span key={index}>{part}</span>\n      )\n    );\n  };\n\n  render() {\n    if (!this.shouldRender || this.items.length === 0) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <div\n          class={this.getMenuClasses()}\n          style={{ maxHeight: `${this.maxHeight}px` }}\n        >\n          {this.items.map((item, index) => (\n            <div\n              key={item.id}\n              class={this.getItemClasses(index, item)}\n              onMouseEnter={() => this.handleItemMouseEnter(index)}\n              role=\"option\"\n              aria-selected={index === this.selectedIndex ? 'true' : 'false'}\n              aria-disabled={item.disabled ? 'true' : 'false'}\n            >\n              <div\n                class=\"item-content\"\n                onClick={() => this.handleItemClick(item)}\n                onMouseDown={this.handleMouseDown}\n              >\n                <span class=\"item-text\" title={item.label}>\n                  {this.getHighlightedText(item.label)}\n                </span>\n                {this.multiSelect && item.selected && (\n                  <span class=\"check-icon material-symbols-outlined\">\n                    check\n                  </span>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-DsCDXclM.js

@@ -0,0 +1,106 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-ChfLhYiJ.js';
+import { d as defineCustomElement$1 } from './p-5LJWVh2v.js';
+
+const bhAvatarAddCss = ":host{display:inline-block;font-family:var(\n    --font-inter,\n    'Inter',\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif\n  )}.avatar-add-container{position:relative;display:inline-flex}.avatar-add{position:relative;display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-white, #ffffff);border:1px dashed var(--color-neutral-300, #d0d5dd);border-radius:50%;cursor:pointer;transition:all 0.2s ease-in-out;padding:0;outline:none}.avatar-add-xs{width:24px;height:24px}.avatar-add-xs .avatar-add-icon{font-size:14px}.avatar-add-sm{width:32px;height:32px}.avatar-add-sm .avatar-add-icon{font-size:16px}.avatar-add-md{width:40px;height:40px}.avatar-add-md .avatar-add-icon{font-size:20px}.avatar-add-lg{width:48px;height:48px}.avatar-add-lg .avatar-add-icon{font-size:24px}.avatar-add-xl{width:56px;height:56px}.avatar-add-xl .avatar-add-icon{font-size:28px}.avatar-add-2xl{width:64px;height:64px}.avatar-add-2xl .avatar-add-icon{font-size:32px}.avatar-add-hover{background-color:var(--color-neutral-50, #f9fafb);border-color:var(--color-brand-500, #7f56d9)}.avatar-add-hover .avatar-add-icon{color:var(--color-brand-500, #7f56d9)}.avatar-add-focus{background-color:var(--color-white, #ffffff);box-shadow:0 0 0 2px var(--color-white, #ffffff),\n    0 0 0 4px var(--color-brand-500, #7f56d9)}.avatar-add-disabled{background-color:var(--color-neutral-50, #f9fafb);cursor:not-allowed;pointer-events:none}.avatar-add-disabled .avatar-add-icon{color:var(--color-neutral-300, #d0d5dd)}.avatar-add-content{display:flex;align-items:center;justify-content:center}.avatar-add-icon{color:var(--color-neutral-500, #667085);line-height:1;transition:color 0.2s ease-in-out}.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 BhAvatarAdd = /*@__PURE__*/ proxyCustomElement(class BhAvatarAdd extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhClick = createEvent(this, "bhClick");
+    }
+    /**
+     * Size of the avatar add button
+     */
+    size = 'md';
+    /**
+     * Whether the button is disabled
+     */
+    disabled = false;
+    /**
+     * Whether to show tooltip on hover
+     */
+    showTooltip = false;
+    /**
+     * Tooltip text
+     */
+    tooltipText = 'Add user';
+    /**
+     * Track hover state
+     */
+    isHovered = false;
+    /**
+     * Track focus state
+     */
+    isFocused = false;
+    /**
+     * Emitted when the button is clicked
+     */
+    bhClick;
+    handleClick = (event) => {
+        if (!this.disabled) {
+            this.bhClick.emit(event);
+        }
+    };
+    handleKeyDown = (event) => {
+        if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {
+            event.preventDefault();
+            this.bhClick.emit(event);
+        }
+    };
+    render() {
+        const buttonClasses = {
+            'avatar-add': true,
+            [`avatar-add-${this.size}`]: true,
+            'avatar-add-hover': this.isHovered && !this.disabled,
+            'avatar-add-focus': this.isFocused && !this.disabled,
+            'avatar-add-disabled': this.disabled,
+        };
+        return (h("div", { key: 'e906187ea6a036fa259715d89e798e884e595c85', class: "avatar-add-container" }, h("button", { key: '777975b9886ba59bb18461354b01a9a628f92fb7', type: "button", class: buttonClasses, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: () => {
+                if (!this.disabled)
+                    this.isHovered = true;
+            }, onMouseLeave: () => {
+                this.isHovered = false;
+            }, onFocus: () => {
+                if (!this.disabled)
+                    this.isFocused = true;
+            }, onBlur: () => {
+                this.isFocused = false;
+            }, "aria-label": this.tooltipText, part: "button" }, h("span", { key: '6ed6ab00fca8e55d2954baa2dca372d07798f22b', class: "avatar-add-content" }, h("span", { key: '06ec0f650d23a82716bd38bedf8e4bebda532a17', class: "material-symbols-outlined avatar-add-icon" }, "add"))), this.showTooltip && (h("bh-tooltip", { key: '365183808234299da29de605122b3b13826172ed', text: this.tooltipText, visible: this.isHovered && !this.disabled, position: "bottom" }))));
+    }
+    static get style() { return bhAvatarAddCss; }
+}, [769, "bh-avatar-add", {
+        "size": [1],
+        "disabled": [4],
+        "showTooltip": [4, "show-tooltip"],
+        "tooltipText": [1, "tooltip-text"],
+        "isHovered": [32],
+        "isFocused": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-avatar-add", "bh-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-avatar-add":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhAvatarAdd);
+            }
+            break;
+        case "bh-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhAvatarAdd as B, defineCustomElement as d };
+//# sourceMappingURL=p-DsCDXclM.js.map
+
+//# sourceMappingURL=p-DsCDXclM.js.map

package/dist/components/p-DsCDXclM.js.map

@@ -0,0 +1 @@
+{"file":"p-DsCDXclM.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-avatar-add/bh-avatar-add.css?tag=bh-avatar-add&encapsulation=shadow","src/components/bh-avatar-add/bh-avatar-add.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  font-family: var(\n    --font-inter,\n    'Inter',\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif\n  );\n}\n\n/* Container */\n.avatar-add-container {\n  position: relative;\n  display: inline-flex;\n}\n\n/* Base Button */\n.avatar-add {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--color-white, #ffffff);\n  border: 1px dashed var(--color-neutral-300, #d0d5dd);\n  border-radius: 50%;\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n  padding: 0;\n  outline: none;\n}\n\n/* Button Sizes */\n.avatar-add-xs {\n  width: 24px;\n  height: 24px;\n}\n\n.avatar-add-xs .avatar-add-icon {\n  font-size: 14px;\n}\n\n.avatar-add-sm {\n  width: 32px;\n  height: 32px;\n}\n\n.avatar-add-sm .avatar-add-icon {\n  font-size: 16px;\n}\n\n.avatar-add-md {\n  width: 40px;\n  height: 40px;\n}\n\n.avatar-add-md .avatar-add-icon {\n  font-size: 20px;\n}\n\n.avatar-add-lg {\n  width: 48px;\n  height: 48px;\n}\n\n.avatar-add-lg .avatar-add-icon {\n  font-size: 24px;\n}\n\n.avatar-add-xl {\n  width: 56px;\n  height: 56px;\n}\n\n.avatar-add-xl .avatar-add-icon {\n  font-size: 28px;\n}\n\n.avatar-add-2xl {\n  width: 64px;\n  height: 64px;\n}\n\n.avatar-add-2xl .avatar-add-icon {\n  font-size: 32px;\n}\n\n/* Hover State */\n.avatar-add-hover {\n  background-color: var(--color-neutral-50, #f9fafb);\n  border-color: var(--color-brand-500, #7f56d9);\n}\n\n.avatar-add-hover .avatar-add-icon {\n  color: var(--color-brand-500, #7f56d9);\n}\n\n/* Focus State */\n.avatar-add-focus {\n  background-color: var(--color-white, #ffffff);\n  box-shadow: 0 0 0 2px var(--color-white, #ffffff),\n    0 0 0 4px var(--color-brand-500, #7f56d9);\n}\n\n/* Disabled State */\n.avatar-add-disabled {\n  background-color: var(--color-neutral-50, #f9fafb);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.avatar-add-disabled .avatar-add-icon {\n  color: var(--color-neutral-300, #d0d5dd);\n}\n\n/* Content Container */\n.avatar-add-content {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Icon */\n.avatar-add-icon {\n  color: var(--color-neutral-500, #667085);\n  line-height: 1;\n  transition: color 0.2s ease-in-out;\n}\n\n/* Material Symbols */\n.material-symbols-outlined {\n  font-family: 'Material Symbols Outlined';\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n}\n","import { Component, Prop, State, Event, EventEmitter, h } from '@stencil/core';\n\nexport type AvatarAddSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n@Component({\n  tag: 'bh-avatar-add',\n  styleUrl: 'bh-avatar-add.css',\n  shadow: true,\n})\nexport class BhAvatarAdd {\n  /**\n   * Size of the avatar add button\n   */\n  @Prop() size: AvatarAddSize = 'md';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether to show tooltip on hover\n   */\n  @Prop() showTooltip: boolean = false;\n\n  /**\n   * Tooltip text\n   */\n  @Prop() tooltipText: string = 'Add user';\n\n  /**\n   * Track hover state\n   */\n  @State() isHovered: boolean = false;\n\n  /**\n   * Track focus state\n   */\n  @State() isFocused: boolean = false;\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) {\n      this.bhClick.emit(event);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {\n      event.preventDefault();\n      this.bhClick.emit(event as unknown as MouseEvent);\n    }\n  };\n\n  render() {\n    const buttonClasses = {\n      'avatar-add': true,\n      [`avatar-add-${this.size}`]: true,\n      'avatar-add-hover': this.isHovered && !this.disabled,\n      'avatar-add-focus': this.isFocused && !this.disabled,\n      'avatar-add-disabled': this.disabled,\n    };\n\n    return (\n      <div class=\"avatar-add-container\">\n        <button\n          type=\"button\"\n          class={buttonClasses}\n          disabled={this.disabled}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={() => {\n            if (!this.disabled) this.isHovered = true;\n          }}\n          onMouseLeave={() => {\n            this.isHovered = false;\n          }}\n          onFocus={() => {\n            if (!this.disabled) this.isFocused = true;\n          }}\n          onBlur={() => {\n            this.isFocused = false;\n          }}\n          aria-label={this.tooltipText}\n          part=\"button\"\n        >\n          <span class=\"avatar-add-content\">\n            <span class=\"material-symbols-outlined avatar-add-icon\">add</span>\n          </span>\n        </button>\n\n        {this.showTooltip && (\n          <bh-tooltip\n            text={this.tooltipText}\n            visible={this.isHovered && !this.disabled}\n            position=\"bottom\"\n          />\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-DtbXB8r4.js

@@ -0,0 +1,72 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-ChfLhYiJ.js';
+
+const bhCardCss = ":host{display:block}.card{display:flex;flex-direction:column;background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-xl);overflow:hidden;font-family:var(--font-inter)}.card-header-slot{display:contents}.card-content{display:flex;flex-direction:column;flex:1 0 auto;padding:var(--spacing-lg) var(--spacing-xl);gap:var(--spacing-none)}.card-footer-slot{display:contents}.card-content-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:var(--spacing-md);padding:var(--spacing-xl);background:var(--color-purple-50, #f5f3ff);border:1px dashed var(--color-purple-500, #7c3aed);border-radius:var(--radius-xl);min-height:100%}.card-placeholder-icon{font-size:32px;color:var(--color-purple-500, #7c3aed)}.card-placeholder-text{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-purple-700, #6d28d9);text-decoration:underline;text-align:center}";
+
+const BhCard = /*@__PURE__*/ proxyCustomElement(class BhCard extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    /**
+     * Whether to show the header section
+     */
+    showHeader = true;
+    /**
+     * Whether to show the footer section
+     */
+    showFooter = true;
+    /**
+     * Minimum height of the content area in pixels
+     */
+    contentMinHeight = 200;
+    /**
+     * Placeholder text shown when no content is provided
+     */
+    placeholderText = 'Card content slot';
+    hasContent = false;
+    componentWillLoad() {
+        this.checkForContent();
+    }
+    checkForContent() {
+        const children = Array.from(this.el.childNodes).filter((node) => (node.nodeType === Node.ELEMENT_NODE &&
+            !node.hasAttribute('slot')) ||
+            (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()));
+        this.hasContent = children.length > 0;
+    }
+    render() {
+        const contentStyle = {
+            minHeight: `${this.contentMinHeight}px`,
+        };
+        return (h(Host, { key: '2f01aa3ee4b9cdeb1d5f0f16a961af880e11d0fb' }, h("div", { key: '4f4542a1f24dc9db216fef1e361efff54cb5f538', class: "card" }, this.showHeader && (h("div", { key: 'c290615fb8b36c965ac6a032963f2b4e78c22a29', class: "card-header-slot" }, h("slot", { key: '35d78f934a0a8486a62ff17897537cc0afd355a7', name: "header" }))), h("div", { key: 'bfd8a8827ea13baad0862ed5d962853ceed4be4e', class: "card-content", style: contentStyle }, h("slot", { key: 'b43aad6dfb675e4fd32f9614ba83f67aac264aa0' }), !this.hasContent && (h("div", { key: 'a9cf30bb2b1a9a0ab4baf6fa9d8514181f1e79c5', class: "card-content-placeholder" }, h("span", { key: '7d46bf5c2246cd8d9bd2d73695d9b55a1ba6112c', class: "card-placeholder-text" }, this.placeholderText)))), this.showFooter && (h("div", { key: '5588ba1dcc017c899909917f31961414dc4ffd9e', class: "card-footer-slot" }, h("slot", { key: 'ff28528d0090a67061fc7cd63f7df68662d908a8', name: "footer" }))))));
+    }
+    static get style() { return bhCardCss; }
+}, [769, "bh-card", {
+        "showHeader": [4, "show-header"],
+        "showFooter": [4, "show-footer"],
+        "contentMinHeight": [2, "content-min-height"],
+        "placeholderText": [1, "placeholder-text"],
+        "hasContent": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-card"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhCard);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhCard as B, defineCustomElement as d };
+//# sourceMappingURL=p-DtbXB8r4.js.map
+
+//# sourceMappingURL=p-DtbXB8r4.js.map

package/dist/components/p-DtbXB8r4.js.map

@@ -0,0 +1 @@
+{"file":"p-DtbXB8r4.js","mappings":";;AAAA,MAAM,SAAS,GAAG,m8BAAm8B;;MCOx8B,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAGjB;;AAEG;IACK,UAAU,GAAY,IAAI;AAElC;;AAEG;IACK,UAAU,GAAY,IAAI;AAElC;;AAEG;IACK,gBAAgB,GAAW,GAAG;AAEtC;;AAEG;IACK,eAAe,GAAW,mBAAmB;IAE5C,UAAU,GAAY,KAAK;IAEpC,iBAAiB,GAAA;QACf,IAAI,CAAC,eAAe,EAAE;;IAGhB,eAAe,GAAA;QACrB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,MAAM,CACpD,CAAC,IAAI,KACH,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;AAClC,YAAA,CAAE,IAAgB,CAAC,YAAY,CAAC,MAAM,CAAC;AACzC,aAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CACjE;QACD,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC;;IAGvC,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAC,gBAAgB,CAAI,EAAA,CAAA;SACxC;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACd,IAAI,CAAC,UAAU,KACd,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,CACP,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,YAAY,EAAA,EAC3C,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACP,CAAC,IAAI,CAAC,UAAU,KACf,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAE,EAAA,IAAI,CAAC,eAAe,CAAQ,CAC7D,CACP,CACG,EACL,IAAI,CAAC,UAAU,KACd,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,CACP,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-card/bh-card.css?tag=bh-card&encapsulation=shadow","src/components/bh-card/bh-card.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.card {\n  display: flex;\n  flex-direction: column;\n  background: var(--color-white);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-xl);\n  overflow: hidden;\n  font-family: var(--font-inter);\n}\n\n.card-header-slot {\n  display: contents;\n}\n\n.card-content {\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 auto;\n  padding: var(--spacing-lg) var(--spacing-xl);\n  gap: var(--spacing-none);\n}\n\n.card-footer-slot {\n  display: contents;\n}\n\n/* Placeholder styles */\n.card-content-placeholder {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  gap: var(--spacing-md);\n  padding: var(--spacing-xl);\n  background: var(--color-purple-50, #f5f3ff);\n  border: 1px dashed var(--color-purple-500, #7c3aed);\n  border-radius: var(--radius-xl);\n  min-height: 100%;\n}\n\n.card-placeholder-icon {\n  font-size: 32px;\n  color: var(--color-purple-500, #7c3aed);\n}\n\n.card-placeholder-text {\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n  color: var(--color-purple-700, #6d28d9);\n  text-decoration: underline;\n  text-align: center;\n}\n","import { Component, Prop, State, Element, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'bh-card',\n  styleUrl: 'bh-card.css',\n  shadow: true,\n})\nexport class BhCard {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Whether to show the header section\n   */\n  @Prop() showHeader: boolean = true;\n\n  /**\n   * Whether to show the footer section\n   */\n  @Prop() showFooter: boolean = true;\n\n  /**\n   * Minimum height of the content area in pixels\n   */\n  @Prop() contentMinHeight: number = 200;\n\n  /**\n   * Placeholder text shown when no content is provided\n   */\n  @Prop() placeholderText: string = 'Card content slot';\n\n  @State() hasContent: boolean = false;\n\n  componentWillLoad() {\n    this.checkForContent();\n  }\n\n  private checkForContent() {\n    const children = Array.from(this.el.childNodes).filter(\n      (node) =>\n        (node.nodeType === Node.ELEMENT_NODE &&\n          !(node as Element).hasAttribute('slot')) ||\n        (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())\n    );\n    this.hasContent = children.length > 0;\n  }\n\n  render() {\n    const contentStyle = {\n      minHeight: `${this.contentMinHeight}px`,\n    };\n\n    return (\n      <Host>\n        <div class=\"card\">\n          {this.showHeader && (\n            <div class=\"card-header-slot\">\n              <slot name=\"header\" />\n            </div>\n          )}\n          <div class=\"card-content\" style={contentStyle}>\n            <slot />\n            {!this.hasContent && (\n              <div class=\"card-content-placeholder\">\n                <span class=\"card-placeholder-text\">{this.placeholderText}</span>\n              </div>\n            )}\n          </div>\n          {this.showFooter && (\n            <div class=\"card-footer-slot\">\n              <slot name=\"footer\" />\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-DufL1yr4.js

@@ -0,0 +1,142 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-ChfLhYiJ.js';
+import { d as defineCustomElement$1 } from './p-5LJWVh2v.js';
+
+const bhLabelCss = ":host{display:block;font-family:var(--font-inter, 'Inter', sans-serif)}.label-container{display:flex;flex-direction:column;gap:var(--spacing-xs, 6px)}.label-container.layout-block{flex-direction:column}.label-container.layout-inline{flex-direction:row;align-items:flex-start;gap:var(--spacing-sm, 8px)}.label-container.layout-inline .label-wrapper{flex-shrink:0}.label-container.layout-inline-start{flex-direction:row;align-items:flex-start;gap:var(--spacing-sm, 8px)}.label-container.layout-inline-start .label-content{flex-shrink:0;width:auto}.label-container.layout-inline-start .label-text-group{display:flex;flex-direction:column;gap:2px}.label-container.layout-inline-start .label-wrapper{gap:var(--spacing-xxs, 4px)}.label-container.layout-inline-start .label-text{font-size:var(--text-md-size, 16px);color:var(--color-neutral-900, #101828);cursor:pointer}.label-container.layout-inline-start .supporting-text{font-size:var(--text-sm-size, 14px);color:var(--color-neutral-500, #667085)}.label-container.layout-inline-space-between{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--spacing-sm, 8px)}.label-container.layout-inline-space-between .label-wrapper{flex-shrink:0}.label-container.layout-inline-space-between .label-content{flex-grow:1;display:flex;justify-content:flex-end}.label-wrapper{display:flex;align-items:center;gap:var(--spacing-xxs, 4px)}.label-text{font-family:inherit;font-weight:500;font-size:var(--text-sm-size, 14px);line-height:1.43;color:var(--color-neutral-700, #344054);margin:0;cursor:default}.label-text.disabled{color:var(--color-neutral-400, #98a2b3)}.asterisk{font-family:inherit;font-weight:400;font-size:var(--text-sm-size, 14px);line-height:1.43;color:var(--color-error-600, #dc2626)}.supporting-text{font-family:inherit;font-weight:400;font-size:var(--text-sm-size, 14px);line-height:1.43;color:var(--color-neutral-500, #667085);margin:0}.supporting-text.disabled{color:var(--color-neutral-400, #98a2b3)}.label-content{width:100%}.icon-with-tooltip{position:relative;display:flex;align-items:center;flex-shrink:0;margin-left:auto}.help-icon{font-size:var(--text-xl-size, 20px);color:var(--color-neutral-400, #98a2b3);cursor:pointer;user-select:none;transition:color 0.2s ease-in-out}.help-icon:hover{color:var(--color-neutral-500, #667085)}.disabled .help-icon{color:var(--color-neutral-300, #d0d5dd);cursor:not-allowed}";
+
+const BhLabel = /*@__PURE__*/ proxyCustomElement(class BhLabel extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhHelpClick = createEvent(this, "bhHelpClick");
+    }
+    get el() { return this; }
+    tooltipTimerRef;
+    /**
+     * The label text to display
+     */
+    label = '';
+    /**
+     * Layout style for the label container
+     * - block: Label above content (default for form fields)
+     * - inline: Label next to content (label first)
+     * - inline-start: Content next to label (content first, for checkboxes/radios)
+     * - inline-space-between: Label and content on opposite ends
+     */
+    layout = 'block';
+    /**
+     * The id of the form element the label is bound to.
+     * Use when the labeled element is not a child of this component.
+     */
+    for = '';
+    /**
+     * Supporting text displayed below the label (second line)
+     * for instructions or additional description
+     */
+    supportingText = '';
+    /**
+     * Whether to show the required asterisk
+     */
+    required = false;
+    /**
+     * Whether to show the help icon
+     */
+    showHelpIcon = false;
+    /**
+     * Tooltip text for the help icon
+     */
+    helpIconTooltip = 'Help';
+    /**
+     * Whether the label is disabled
+     */
+    disabled = false;
+    showHelpTooltip = false;
+    /**
+     * Emitted when the help icon is clicked
+     */
+    bhHelpClick;
+    disconnectedCallback() {
+        if (this.tooltipTimerRef) {
+            clearTimeout(this.tooltipTimerRef);
+        }
+    }
+    handleHelpIconMouseEnter = () => {
+        if (this.tooltipTimerRef) {
+            clearTimeout(this.tooltipTimerRef);
+        }
+        this.tooltipTimerRef = setTimeout(() => {
+            this.showHelpTooltip = true;
+        }, 300);
+    };
+    handleHelpIconMouseLeave = () => {
+        if (this.tooltipTimerRef) {
+            clearTimeout(this.tooltipTimerRef);
+            this.tooltipTimerRef = undefined;
+        }
+        this.showHelpTooltip = false;
+    };
+    handleHelpIconClick = () => {
+        this.bhHelpClick.emit();
+    };
+    render() {
+        const wrapperClasses = {
+            'label-container': true,
+            [`layout-${this.layout}`]: true,
+            'disabled': this.disabled,
+        };
+        const labelClasses = {
+            'label-text': true,
+            'disabled': this.disabled,
+        };
+        const supportingClasses = {
+            'supporting-text': true,
+            'disabled': this.disabled,
+        };
+        const labelWrapper = (h("div", { class: "label-wrapper" }, this.label && (h("label", { class: labelClasses, htmlFor: this.for || undefined }, this.label)), this.required && h("span", { class: "asterisk" }, "*"), this.showHelpIcon && (h("div", { class: "icon-with-tooltip" }, h("span", { class: "help-icon material-symbols-outlined", onClick: this.handleHelpIconClick, onMouseEnter: this.handleHelpIconMouseEnter, onMouseLeave: this.handleHelpIconMouseLeave }, "help"), h("bh-tooltip", { text: this.helpIconTooltip, position: "top", visible: this.showHelpTooltip })))));
+        const supportingTextEl = this.supportingText && (h("p", { class: supportingClasses }, this.supportingText));
+        const contentSlot = (h("div", { class: "label-content" }, h("slot", null)));
+        // For inline-start layout, content comes first (used for checkbox/radio)
+        if (this.layout === 'inline-start') {
+            return (h("div", { class: wrapperClasses }, contentSlot, h("div", { class: "label-text-group" }, labelWrapper, supportingTextEl)));
+        }
+        // Default layout: label wrapper first, then content
+        return (h("div", { class: wrapperClasses }, labelWrapper, supportingTextEl, contentSlot));
+    }
+    static get style() { return bhLabelCss; }
+}, [769, "bh-label", {
+        "label": [1],
+        "layout": [1],
+        "for": [1],
+        "supportingText": [1, "supporting-text"],
+        "required": [4],
+        "showHelpIcon": [4, "show-help-icon"],
+        "helpIconTooltip": [1, "help-icon-tooltip"],
+        "disabled": [4],
+        "showHelpTooltip": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-label", "bh-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-label":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhLabel);
+            }
+            break;
+        case "bh-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhLabel as B, defineCustomElement as d };
+//# sourceMappingURL=p-DufL1yr4.js.map
+
+//# sourceMappingURL=p-DufL1yr4.js.map

package/dist/components/p-DufL1yr4.js.map

@@ -0,0 +1 @@
+{"file":"p-DufL1yr4.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-label/bh-label.css?tag=bh-label&encapsulation=shadow","src/components/bh-label/bh-label.tsx"],"sourcesContent":[":host {\n  display: block;\n  font-family: var(--font-inter, 'Inter', sans-serif);\n}\n\n.label-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs, 6px);\n}\n\n.label-container.layout-block {\n  flex-direction: column;\n}\n\n.label-container.layout-inline {\n  flex-direction: row;\n  align-items: flex-start;\n  gap: var(--spacing-sm, 8px);\n}\n\n.label-container.layout-inline .label-wrapper {\n  flex-shrink: 0;\n}\n\n.label-container.layout-inline-start {\n  flex-direction: row;\n  align-items: flex-start;\n  gap: var(--spacing-sm, 8px);\n}\n\n.label-container.layout-inline-start .label-content {\n  flex-shrink: 0;\n  width: auto;\n}\n\n.label-container.layout-inline-start .label-text-group {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.label-container.layout-inline-start .label-wrapper {\n  gap: var(--spacing-xxs, 4px);\n}\n\n.label-container.layout-inline-start .label-text {\n  font-size: var(--text-md-size, 16px);\n  color: var(--color-neutral-900, #101828);\n  cursor: pointer;\n}\n\n.label-container.layout-inline-start .supporting-text {\n  font-size: var(--text-sm-size, 14px);\n  color: var(--color-neutral-500, #667085);\n}\n\n.label-container.layout-inline-space-between {\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--spacing-sm, 8px);\n}\n\n.label-container.layout-inline-space-between .label-wrapper {\n  flex-shrink: 0;\n}\n\n.label-container.layout-inline-space-between .label-content {\n  flex-grow: 1;\n  display: flex;\n  justify-content: flex-end;\n}\n\n.label-wrapper {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xxs, 4px);\n}\n\n.label-text {\n  font-family: inherit;\n  font-weight: 500;\n  font-size: var(--text-sm-size, 14px);\n  line-height: 1.43;\n  color: var(--color-neutral-700, #344054);\n  margin: 0;\n  cursor: default;\n}\n\n.label-text.disabled {\n  color: var(--color-neutral-400, #98a2b3);\n}\n\n.asterisk {\n  font-family: inherit;\n  font-weight: 400;\n  font-size: var(--text-sm-size, 14px);\n  line-height: 1.43;\n  color: var(--color-error-600, #dc2626);\n}\n\n.supporting-text {\n  font-family: inherit;\n  font-weight: 400;\n  font-size: var(--text-sm-size, 14px);\n  line-height: 1.43;\n  color: var(--color-neutral-500, #667085);\n  margin: 0;\n}\n\n.supporting-text.disabled {\n  color: var(--color-neutral-400, #98a2b3);\n}\n\n.label-content {\n  width: 100%;\n}\n\n.icon-with-tooltip {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-left: auto;\n}\n\n.help-icon {\n  font-size: var(--text-xl-size, 20px);\n  color: var(--color-neutral-400, #98a2b3);\n  cursor: pointer;\n  user-select: none;\n  transition: color 0.2s ease-in-out;\n}\n\n.help-icon:hover {\n  color: var(--color-neutral-500, #667085);\n}\n\n.disabled .help-icon {\n  color: var(--color-neutral-300, #d0d5dd);\n  cursor: not-allowed;\n}\n","import { Component, Prop, h, Element, State, Event, EventEmitter } from '@stencil/core';\n\nexport type LabelLayout = 'block' | 'inline' | 'inline-start' | 'inline-space-between';\n\n@Component({\n  tag: 'bh-label',\n  styleUrl: 'bh-label.css',\n  shadow: true,\n})\nexport class BhLabel {\n  @Element() el!: HTMLElement;\n\n  private tooltipTimerRef?: ReturnType<typeof setTimeout>;\n\n  /**\n   * The label text to display\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Layout style for the label container\n   * - block: Label above content (default for form fields)\n   * - inline: Label next to content (label first)\n   * - inline-start: Content next to label (content first, for checkboxes/radios)\n   * - inline-space-between: Label and content on opposite ends\n   */\n  @Prop() layout: LabelLayout = 'block';\n\n  /**\n   * The id of the form element the label is bound to.\n   * Use when the labeled element is not a child of this component.\n   */\n  @Prop() for: string = '';\n\n  /**\n   * Supporting text displayed below the label (second line)\n   * for instructions or additional description\n   */\n  @Prop() supportingText: string = '';\n\n  /**\n   * Whether to show the required asterisk\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether to show the help icon\n   */\n  @Prop() showHelpIcon: boolean = false;\n\n  /**\n   * Tooltip text for the help icon\n   */\n  @Prop() helpIconTooltip: string = 'Help';\n\n  /**\n   * Whether the label is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  @State() showHelpTooltip: boolean = false;\n\n  /**\n   * Emitted when the help icon is clicked\n   */\n  @Event() bhHelpClick!: EventEmitter<void>;\n\n  disconnectedCallback() {\n    if (this.tooltipTimerRef) {\n      clearTimeout(this.tooltipTimerRef);\n    }\n  }\n\n  private handleHelpIconMouseEnter = () => {\n    if (this.tooltipTimerRef) {\n      clearTimeout(this.tooltipTimerRef);\n    }\n    this.tooltipTimerRef = setTimeout(() => {\n      this.showHelpTooltip = true;\n    }, 300);\n  };\n\n  private handleHelpIconMouseLeave = () => {\n    if (this.tooltipTimerRef) {\n      clearTimeout(this.tooltipTimerRef);\n      this.tooltipTimerRef = undefined;\n    }\n    this.showHelpTooltip = false;\n  };\n\n  private handleHelpIconClick = () => {\n    this.bhHelpClick.emit();\n  };\n\n  render() {\n    const wrapperClasses = {\n      'label-container': true,\n      [`layout-${this.layout}`]: true,\n      'disabled': this.disabled,\n    };\n\n    const labelClasses = {\n      'label-text': true,\n      'disabled': this.disabled,\n    };\n\n    const supportingClasses = {\n      'supporting-text': true,\n      'disabled': this.disabled,\n    };\n\n    const labelWrapper = (\n      <div class=\"label-wrapper\">\n        {this.label && (\n          <label class={labelClasses} htmlFor={this.for || undefined}>\n            {this.label}\n          </label>\n        )}\n        {this.required && <span class=\"asterisk\">*</span>}\n        {this.showHelpIcon && (\n          <div class=\"icon-with-tooltip\">\n            <span\n              class=\"help-icon material-symbols-outlined\"\n              onClick={this.handleHelpIconClick}\n              onMouseEnter={this.handleHelpIconMouseEnter}\n              onMouseLeave={this.handleHelpIconMouseLeave}\n            >\n              help\n            </span>\n            <bh-tooltip\n              text={this.helpIconTooltip}\n              position=\"top\"\n              visible={this.showHelpTooltip}\n            />\n          </div>\n        )}\n      </div>\n    );\n\n    const supportingTextEl = this.supportingText && (\n      <p class={supportingClasses}>{this.supportingText}</p>\n    );\n\n    const contentSlot = (\n      <div class=\"label-content\">\n        <slot></slot>\n      </div>\n    );\n\n    // For inline-start layout, content comes first (used for checkbox/radio)\n    if (this.layout === 'inline-start') {\n      return (\n        <div class={wrapperClasses}>\n          {contentSlot}\n          <div class=\"label-text-group\">\n            {labelWrapper}\n            {supportingTextEl}\n          </div>\n        </div>\n      );\n    }\n\n    // Default layout: label wrapper first, then content\n    return (\n      <div class={wrapperClasses}>\n        {labelWrapper}\n        {supportingTextEl}\n        {contentSlot}\n      </div>\n    );\n  }\n}\n"],"version":3}