@actabldesign/bellhop-core 0.0.3

package/esm/bh-product-switcher.entry.js

@@ -0,0 +1,100 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DtVghh5W.js';
+
+const bhProductSwitcherCss = ".product-switcher-container{position:fixed;z-index:10000;animation:popoverSlideIn 0.3s ease-out;transform-origin:top center}.product-switcher-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:transparent;z-index:9999}.product-switcher-popover{background:rgba(255, 255, 255, 0.9);border:1px solid var(--color-neutral-100);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(3px);box-shadow:0px 24px 48px -12px rgba(64, 73, 104, 0.1);padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md);min-width:250px;position:relative;z-index:10001}@keyframes popoverSlideIn{0%{opacity:0;transform:translateY(-12px)}100%{opacity:1;transform:translateY(0)}}.product-switcher-container.closing{animation:popoverSlideOut 0.2s ease-in forwards}@keyframes popoverSlideOut{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-12px)}}.product-item{display:flex;align-items:center;gap:var(--spacing-lg);width:100%;padding:var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);border-radius:var(--radius-md);cursor:pointer;transition:background-color 0.2s ease}.product-item:hover{background-color:var(--color-neutral-100)}.product-item.current{background-color:var(--color-brand-50)}.product-icon-container{width:36px;height:36px;background:var(--color-white);border:1px solid var(--color-neutral-100);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:var(--spacing-xs)}.product-icon{width:100%;height:100%;object-fit:contain;object-position:center;filter:invert(25%) sepia(190%) saturate(210%) hue-rotate(190deg) brightness(120%) contrast(210%)}.product-icon svg path{fill:var(--color-brand-600)}.product-info{display:flex;flex-direction:column;flex:1}.product-name{font-weight:var(--weight-semibold);font-size:var(--text-md-size);line-height:var(--text-md-line);color:var(--color-neutral-900)}.product-description{font-weight:var(--weight-regular);font-size:var(--text-sm-size);line-height:var(--text-sm-line);color:var(--color-neutral-600)}";
+
+const BhProductSwitcher = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhClose = createEvent(this, "bhClose");
+        this.bhProductSelect = createEvent(this, "bhProductSelect");
+    }
+    /**
+     * Whether the product switcher is open
+     */
+    isOpen = false;
+    /**
+     * Position to anchor the popover
+     */
+    anchorPosition = { top: 0, left: 0 };
+    /**
+     * Array of products to display
+     */
+    products = [
+        {
+            id: 'alice',
+            name: 'Alice',
+            description: 'Housekeeping & Guest Services',
+            logo: './assets/logos/AL.svg',
+        },
+        {
+            id: 'hotel-effectiveness',
+            name: 'Hotel Effectiveness',
+            description: 'Labor planning',
+            logo: './assets/logos/HE.svg',
+        },
+        {
+            id: 'profit-sword',
+            name: 'ProfitSword',
+            description: 'B.I and Finance',
+            logo: './assets/logos/PS.svg',
+        },
+        {
+            id: 'transcendent',
+            name: 'Transcendent',
+            description: 'Asset Management & CapEx',
+            logo: './assets/logos/TR.svg',
+        },
+    ];
+    /**
+     * Event emitted when the switcher should close
+     */
+    bhClose;
+    /**
+     * Event emitted when a product is selected
+     */
+    bhProductSelect;
+    isClosing = false;
+    containerRef;
+    handleDocumentClick(event) {
+        const target = event.target;
+        if (this.isOpen &&
+            this.containerRef &&
+            !this.containerRef.contains(target) &&
+            !target.closest('.logo-active')) {
+            this.handleClose();
+        }
+    }
+    handleClose = () => {
+        this.isClosing = true;
+        setTimeout(() => {
+            this.bhClose.emit();
+            this.isClosing = false;
+        }, 200);
+    };
+    handleProductClick = (product) => {
+        this.bhProductSelect.emit(product);
+        this.handleClose();
+    };
+    render() {
+        if (!this.isOpen)
+            return null;
+        const containerClasses = {
+            'product-switcher-container': true,
+            'closing': this.isClosing,
+        };
+        return (h(Host, null, h("div", { class: "product-switcher-backdrop", onClick: this.handleClose }), h("div", { ref: (el) => this.containerRef = el, class: containerClasses, style: {
+                top: `${this.anchorPosition.top}px`,
+                left: `${this.anchorPosition.left}px`,
+            } }, h("div", { class: "product-switcher-popover" }, this.products.map((product) => {
+            const itemClasses = {
+                'product-item': true,
+                'current': product.current || false,
+            };
+            return (h("div", { key: product.id, class: itemClasses, onClick: () => this.handleProductClick(product) }, h("div", { class: "product-icon-container" }, h("img", { src: product.logo, alt: `${product.name} logo`, class: "product-icon" })), h("div", { class: "product-info" }, h("div", { class: "product-name" }, product.name), h("div", { class: "product-description" }, product.description))));
+        })))));
+    }
+};
+BhProductSwitcher.style = bhProductSwitcherCss;
+
+export { BhProductSwitcher as bh_product_switcher };
+//# sourceMappingURL=bh-product-switcher.entry.js.map

package/esm/bh-product-switcher.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-product-switcher.entry.js","sources":["src/components/bh-product-switcher/bh-product-switcher.css?tag=bh-product-switcher&encapsulation=shadow","src/components/bh-product-switcher/bh-product-switcher.tsx"],"sourcesContent":["/* Container wrapper */\n.product-switcher-container {\n  position: fixed;\n  z-index: 10000;\n  animation: popoverSlideIn 0.3s ease-out;\n  transform-origin: top center;\n}\n\n/* Backdrop */\n.product-switcher-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: transparent;\n  z-index: 9999;\n}\n\n/* Product Switcher Popover */\n.product-switcher-popover {\n  background: rgba(255, 255, 255, 0.9);\n  border: 1px solid var(--color-neutral-100);\n  border-radius: var(--radius-lg);\n  -webkit-backdrop-filter: blur(8px);\n  backdrop-filter: blur(3px);\n  box-shadow: 0px 24px 48px -12px rgba(64, 73, 104, 0.1);\n  padding: var(--spacing-lg);\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-md);\n  min-width: 250px;\n  position: relative;\n  z-index: 10001;\n}\n\n@keyframes popoverSlideIn {\n  0% {\n    opacity: 0;\n    transform: translateY(-12px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.product-switcher-container.closing {\n  animation: popoverSlideOut 0.2s ease-in forwards;\n}\n\n@keyframes popoverSlideOut {\n  0% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(-12px);\n  }\n}\n\n/* Product Item */\n.product-item {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-lg);\n  width: 100%;\n  padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);\n  border-radius: var(--radius-md);\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n\n.product-item:hover {\n  background-color: var(--color-neutral-100);\n}\n\n.product-item.current {\n  background-color: var(--color-brand-50);\n}\n\n/* Product Icon Container */\n.product-icon-container {\n  width: 36px;\n  height: 36px;\n  background: var(--color-white);\n  border: 1px solid var(--color-neutral-100);\n  border-radius: var(--radius-md);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: var(--spacing-xs);\n}\n\n.product-icon {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  object-position: center;\n  filter: invert(25%) sepia(190%) saturate(210%) hue-rotate(190deg) brightness(120%) contrast(210%);\n}\n\n.product-icon svg path {\n  fill: var(--color-brand-600);\n}\n\n/* Product Info */\n.product-info {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n}\n\n.product-name {\n  font-weight: var(--weight-semibold);\n  font-size: var(--text-md-size);\n  line-height: var(--text-md-line);\n  color: var(--color-neutral-900);\n}\n\n.product-description {\n  font-weight: var(--weight-regular);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-600);\n}","import { Component, Prop, Event, EventEmitter, State, h, Host, Listen } from '@stencil/core';\n\nexport interface BhProduct {\n  id: string;\n  name: string;\n  description: string;\n  logo: string;\n  current?: boolean;\n}\n\nexport interface AnchorPosition {\n  top: number;\n  left: number;\n}\n\n@Component({\n  tag: 'bh-product-switcher',\n  styleUrl: 'bh-product-switcher.css',\n  shadow: true,\n})\nexport class BhProductSwitcher {\n  /**\n   * Whether the product switcher is open\n   */\n  @Prop() isOpen: boolean = false;\n\n  /**\n   * Position to anchor the popover\n   */\n  @Prop() anchorPosition: AnchorPosition = { top: 0, left: 0 };\n\n  /**\n   * Array of products to display\n   */\n  @Prop() products: BhProduct[] = [\n    {\n      id: 'alice',\n      name: 'Alice',\n      description: 'Housekeeping & Guest Services',\n      logo: './assets/logos/AL.svg',\n    },\n    {\n      id: 'hotel-effectiveness',\n      name: 'Hotel Effectiveness',\n      description: 'Labor planning',\n      logo: './assets/logos/HE.svg',\n    },\n    {\n      id: 'profit-sword',\n      name: 'ProfitSword',\n      description: 'B.I and Finance',\n      logo: './assets/logos/PS.svg',\n    },\n    {\n      id: 'transcendent',\n      name: 'Transcendent',\n      description: 'Asset Management & CapEx',\n      logo: './assets/logos/TR.svg',\n    },\n  ];\n\n  /**\n   * Event emitted when the switcher should close\n   */\n  @Event() bhClose!: EventEmitter<void>;\n\n  /**\n   * Event emitted when a product is selected\n   */\n  @Event() bhProductSelect!: EventEmitter<BhProduct>;\n\n  @State() isClosing: boolean = false;\n\n  private containerRef?: HTMLDivElement;\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    if (\n      this.isOpen &&\n      this.containerRef &&\n      !this.containerRef.contains(target) &&\n      !target.closest('.logo-active')\n    ) {\n      this.handleClose();\n    }\n  }\n\n  private handleClose = () => {\n    this.isClosing = true;\n    setTimeout(() => {\n      this.bhClose.emit();\n      this.isClosing = false;\n    }, 200);\n  };\n\n  private handleProductClick = (product: BhProduct) => {\n    this.bhProductSelect.emit(product);\n    this.handleClose();\n  };\n\n  render() {\n    if (!this.isOpen) return null;\n\n    const containerClasses = {\n      'product-switcher-container': true,\n      'closing': this.isClosing,\n    };\n\n    return (\n      <Host>\n        {/* Backdrop */}\n        <div class=\"product-switcher-backdrop\" onClick={this.handleClose}></div>\n\n        {/* Product Switcher Container */}\n        <div\n          ref={(el) => this.containerRef = el}\n          class={containerClasses}\n          style={{\n            top: `${this.anchorPosition.top}px`,\n            left: `${this.anchorPosition.left}px`,\n          }}\n        >\n          <div class=\"product-switcher-popover\">\n            {this.products.map((product) => {\n              const itemClasses = {\n                'product-item': true,\n                'current': product.current || false,\n              };\n\n              return (\n                <div\n                  key={product.id}\n                  class={itemClasses}\n                  onClick={() => this.handleProductClick(product)}\n                >\n                  <div class=\"product-icon-container\">\n                    <img\n                      src={product.logo}\n                      alt={`${product.name} logo`}\n                      class=\"product-icon\"\n                    />\n                  </div>\n\n                  <div class=\"product-info\">\n                    <div class=\"product-name\">{product.name}</div>\n                    <div class=\"product-description\">{product.description}</div>\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/esm/bh-property-switcher.entry.js

@@ -0,0 +1,229 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DtVghh5W.js';
+
+const bhPropertySwitcherCss = ".property-switcher{position:relative;display:inline-block;width:220px}.property-selector{display:flex;align-items:center;justify-content:flex-start;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm);transition:background-color 0.2s ease;width:100%;height:36px;min-width:0}.property-selector:hover{background-color:var(--color-neutral-100)}.selector-icon{font-size:18px;color:var(--color-neutral-500);flex-shrink:0}.property-name{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);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;flex-grow:1;min-width:0;text-align:left}.expand-icon{font-size:18px;flex-shrink:0;color:var(--color-neutral-400);transition:color 0.2s ease}.dropdown-panel{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--spacing-xs);background-color:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-lg);box-shadow:0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);min-width:280px;max-width:360px;animation:dropdownSlideIn 0.15s ease-out;overflow:hidden}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:translateY(0)}}.search-container{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm);background-color:var(--color-white);border-bottom:1px solid var(--color-neutral-200)}.search-icon{font-size:20px;color:var(--color-neutral-500);flex-shrink:0}.search-input{flex:1;border:none;outline:none;font-family:var(--font-inter);font-size:var(--text-sm-size);line-height:var(--text-sm-line);color:var(--color-neutral-900);background:transparent;min-width:0}.search-input::placeholder{color:var(--color-neutral-400)}.clear-search{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm);color:var(--color-neutral-400);transition:color 0.15s ease, background-color 0.15s ease}.clear-search:hover{color:var(--color-neutral-600);background-color:var(--color-neutral-200)}.clear-search .material-symbols-outlined{font-size:18px}.dropdown-content{max-height:360px;overflow-y:auto}.flat-list-container{padding:var(--spacing-xs) 0}.groups-container{padding:var(--spacing-xs) 0}.property-group{border-bottom:1px solid var(--color-neutral-100)}.property-group:last-child{border-bottom:none}.group-header{display:flex;align-items:center;gap:var(--spacing-xs);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:var(--color-neutral-50);cursor:pointer;font-family:var(--font-inter);font-size:var(--text-xs-size);font-weight:var(--weight-semibold);color:var(--color-neutral-600);text-transform:uppercase;letter-spacing:0.5px;transition:background-color 0.15s ease}.group-header:hover{background-color:var(--color-neutral-200)}.group-expand-icon{font-size:18px;color:var(--color-neutral-500);transition:transform 0.15s ease}.group-name{flex:1;text-align:left}.group-count{font-size:11px;font-weight:var(--weight-semibold);color:var(--color-neutral-500);background-color:var(--color-neutral-200);padding:2px 8px;border-radius:var(--radius-full);min-width:20px;text-align:center}.group-properties{padding:var(--spacing-xs) 0}.property-item{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);padding-left:calc(var(--spacing-md) + 26px);border:none;background:transparent;cursor:pointer;font-family:var(--font-inter);font-size:var(--text-sm-size);line-height:var(--text-sm-line);color:var(--color-neutral-700);text-align:left;transition:background-color 0.15s ease}.flat-list-container .property-item{padding-left:var(--spacing-md)}.property-item:hover{background-color:var(--color-neutral-100)}.property-item.selected{background-color:var(--color-brand-50);color:var(--color-brand-700)}.property-item.selected .property-icon{color:var(--color-brand-600)}.property-icon{font-size:20px;color:var(--color-neutral-400);flex-shrink:0}.property-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--weight-regular)}.property-item.selected .property-item-name{font-weight:var(--weight-medium)}.check-icon{font-size:18px;color:var(--color-brand-600);flex-shrink:0}.menu-divider{height:1px;background-color:var(--color-neutral-150);margin:var(--spacing-xs) var(--spacing-md)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-2xl) var(--spacing-lg);gap:var(--spacing-sm)}.empty-icon{font-size:40px;color:var(--color-neutral-300)}.empty-text{font-family:var(--font-inter);font-size:var(--text-sm-size);color:var(--color-neutral-500)}.dropdown-menu-container{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--spacing-xs);max-height:320px}.popover-container{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--spacing-xs);animation:popoverSlideIn 0.3s ease-out;transform-origin:top center}@keyframes popoverSlideIn{0%{opacity:0;transform:translateY(calc(-1 * var(--spacing-lg)))}100%{opacity:1;transform:translateY(0)}}.popover-container.closing{animation:popoverSlideOut 0.2s ease-in forwards}@keyframes popoverSlideOut{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(calc(-1 * var(--spacing-lg)))}}";
+
+const BhPropertySwitcher = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhPropertyChange = createEvent(this, "bhPropertyChange");
+    }
+    /**
+     * Selected property name to display (initial value)
+     */
+    selectedProperty = 'Select a property';
+    /**
+     * Array of property options
+     */
+    properties = [];
+    /**
+     * Whether to group properties by their group field
+     */
+    grouped = false;
+    /**
+     * Placeholder text for search input
+     */
+    searchPlaceholder = 'Search properties...';
+    /**
+     * Event emitted when a property is selected
+     */
+    bhPropertyChange;
+    isExpanded = false;
+    searchQuery = '';
+    expandedGroups = new Set();
+    internalSelectedProperty = '';
+    switcherRef;
+    searchInputRef;
+    componentWillLoad() {
+        this.internalSelectedProperty = this.selectedProperty;
+    }
+    handleDocumentClick(event) {
+        if (!this.isExpanded) {
+            return;
+        }
+        // Check if click is on this component or inside it using composedPath for Shadow DOM
+        const clickedInside = event.composedPath().includes(this.switcherRef);
+        if (!clickedInside) {
+            this.isExpanded = false;
+        }
+    }
+    handleToggle = () => {
+        this.isExpanded = !this.isExpanded;
+        if (this.isExpanded) {
+            this.searchQuery = '';
+            // Initialize all groups as expanded when opening
+            if (this.grouped) {
+                const groups = this.getPropertyGroups();
+                this.expandedGroups = new Set(groups.map(g => g.id));
+            }
+            // Focus search input when opening
+            setTimeout(() => {
+                if (this.searchInputRef) {
+                    this.searchInputRef.focus();
+                }
+            }, 50);
+        }
+    };
+    handleSearchInput = (event) => {
+        const target = event.target;
+        this.searchQuery = target.value;
+    };
+    handleGroupToggle = (groupId) => {
+        const newSet = new Set(this.expandedGroups);
+        if (newSet.has(groupId)) {
+            newSet.delete(groupId);
+        }
+        else {
+            newSet.add(groupId);
+        }
+        this.expandedGroups = newSet;
+    };
+    handlePropertySelect = (property) => {
+        this.internalSelectedProperty = property.name;
+        this.bhPropertyChange.emit(property);
+        this.isExpanded = false;
+        this.searchQuery = '';
+    };
+    getPropertyGroups = () => {
+        const groupMap = new Map();
+        const ungrouped = [];
+        this.properties.forEach((property) => {
+            if (property.group) {
+                const existing = groupMap.get(property.group) || [];
+                existing.push(property);
+                groupMap.set(property.group, existing);
+            }
+            else {
+                ungrouped.push(property);
+            }
+        });
+        const groups = [];
+        groupMap.forEach((properties, name) => {
+            groups.push({
+                id: name.toLowerCase().replace(/\s+/g, '-'),
+                name,
+                properties,
+            });
+        });
+        // Add ungrouped properties as a special group if any exist
+        if (ungrouped.length > 0) {
+            groups.push({
+                id: 'ungrouped',
+                name: 'Other',
+                properties: ungrouped,
+            });
+        }
+        return groups;
+    };
+    filterProperties = (properties) => {
+        if (!this.searchQuery.trim()) {
+            return properties;
+        }
+        const query = this.searchQuery.toLowerCase();
+        return properties.filter((p) => p.name.toLowerCase().includes(query));
+    };
+    filterGroups = (groups) => {
+        if (!this.searchQuery.trim()) {
+            return groups;
+        }
+        const query = this.searchQuery.toLowerCase();
+        return groups
+            .map((group) => {
+            // Check if group name matches
+            const groupMatches = group.name.toLowerCase().includes(query);
+            // Filter properties within the group
+            const filteredProperties = group.properties.filter((p) => p.name.toLowerCase().includes(query));
+            // Include group if group name matches (show all properties) or if any properties match
+            if (groupMatches) {
+                return { ...group }; // Return group with all properties
+            }
+            else if (filteredProperties.length > 0) {
+                return { ...group, properties: filteredProperties };
+            }
+            return null;
+        })
+            .filter((g) => g !== null);
+    };
+    getPropertyIcon = (type) => {
+        switch (type) {
+            case 'portfolio':
+                return 'business';
+            case 'region':
+                return 'public';
+            case 'property':
+            default:
+                return 'location_on';
+        }
+    };
+    renderSearchInput() {
+        return (h("div", { class: "search-container" }, h("span", { class: "material-symbols-outlined search-icon" }, "search"), h("input", { ref: (el) => (this.searchInputRef = el), type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, onInput: this.handleSearchInput, onClick: (e) => e.stopPropagation() }), this.searchQuery && (h("button", { class: "clear-search", onClick: (e) => {
+                e.stopPropagation();
+                this.searchQuery = '';
+                this.searchInputRef?.focus();
+            }, "aria-label": "Clear search" }, h("span", { class: "material-symbols-outlined" }, "close")))));
+    }
+    renderPropertyItem(property) {
+        const isSelected = property.name === this.internalSelectedProperty;
+        return (h("button", { class: {
+                'property-item': true,
+                'selected': isSelected,
+            }, onClick: () => this.handlePropertySelect(property) }, h("span", { class: "material-symbols-outlined property-icon" }, this.getPropertyIcon(property.type)), h("span", { class: "property-item-name", title: property.name }, property.name), isSelected && (h("span", { class: "material-symbols-outlined check-icon" }, "check"))));
+    }
+    renderGroupedView() {
+        const groups = this.getPropertyGroups();
+        const filteredGroups = this.filterGroups(groups);
+        if (filteredGroups.length === 0) {
+            return this.renderEmptyState();
+        }
+        return (h("div", { class: "groups-container" }, filteredGroups.map((group) => {
+            const isExpanded = this.expandedGroups.has(group.id);
+            return (h("div", { class: "property-group", key: group.id }, h("button", { class: {
+                    'group-header': true,
+                    'expanded': isExpanded,
+                }, onClick: () => this.handleGroupToggle(group.id), "aria-expanded": isExpanded ? 'true' : 'false' }, h("span", { class: "material-symbols-outlined group-expand-icon" }, isExpanded ? 'expand_more' : 'chevron_right'), h("span", { class: "group-name" }, group.name), h("span", { class: "group-count" }, group.properties.length)), isExpanded && (h("div", { class: "group-properties" }, group.properties.map((property) => (h("div", { key: property.id }, this.renderPropertyItem(property))))))));
+        })));
+    }
+    renderFlatView() {
+        const filteredProperties = this.filterProperties(this.properties);
+        if (filteredProperties.length === 0) {
+            return this.renderEmptyState();
+        }
+        // Legacy behavior: render portfolios with dividers, skip regions
+        const items = [];
+        filteredProperties.forEach((property) => {
+            if (property.type === 'portfolio') {
+                items.push(property);
+                items.push({ divider: true });
+            }
+            else if (property.type === 'property') {
+                items.push(property);
+            }
+        });
+        return (h("div", { class: "flat-list-container" }, items.map((item, index) => {
+            if ('divider' in item) {
+                return h("div", { class: "menu-divider", key: `divider-${index}` });
+            }
+            return (h("div", { key: item.id }, this.renderPropertyItem(item)));
+        })));
+    }
+    renderEmptyState() {
+        return (h("div", { class: "empty-state" }, h("span", { class: "material-symbols-outlined empty-icon" }, "search_off"), h("span", { class: "empty-text" }, "No properties found")));
+    }
+    getSelectedProperty() {
+        return this.properties.find(p => p.name === this.internalSelectedProperty);
+    }
+    render() {
+        const containerClasses = {
+            'property-switcher': true,
+            'expanded': this.isExpanded,
+        };
+        const selectedProp = this.getSelectedProperty();
+        const displayName = this.internalSelectedProperty || this.selectedProperty;
+        return (h(Host, { key: 'acbc21dd3af3bfe9fef74a34e89c212cd74751c5' }, h("div", { key: '39b5a9e97a2858534f11a37dc0f3a5ba92159337', ref: (el) => (this.switcherRef = el), class: containerClasses }, h("button", { key: 'c145f14ca4171755e1487a4aa4c411fd6b871d55', class: "property-selector", onClick: () => this.handleToggle(), "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-label": `Property selector: ${displayName}` }, selectedProp && (h("span", { key: '028e958900c9091f67df8e2262fc0e62f8b76f1f', class: "material-symbols-outlined selector-icon" }, this.getPropertyIcon(selectedProp.type))), h("span", { key: 'd6838a7ec2abdb24b31dd720e6c6ed3eff80213a', class: "property-name" }, displayName), h("span", { key: '17de4b63b32f9309008897a25e81a4c5c5126fa7', class: "material-symbols-outlined expand-icon", "aria-label": this.isExpanded ? 'Collapse Options' : 'Expand Options' }, this.isExpanded ? 'unfold_less' : 'unfold_more')), this.isExpanded && (h("div", { key: 'e53dc331066b4999dcc132b8ace1f24fc48b79b8', class: "dropdown-panel" }, this.renderSearchInput(), h("div", { key: 'b6b591d56b4bd04452298d145029e4bc150c1537', class: "dropdown-content" }, this.grouped
+            ? this.renderGroupedView()
+            : this.renderFlatView()))))));
+    }
+};
+BhPropertySwitcher.style = bhPropertySwitcherCss;
+
+export { BhPropertySwitcher as bh_property_switcher };
+//# sourceMappingURL=bh-property-switcher.entry.js.map

package/esm/bh-property-switcher.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-property-switcher.entry.js","sources":["src/components/bh-property-switcher/bh-property-switcher.css?tag=bh-property-switcher&encapsulation=shadow","src/components/bh-property-switcher/bh-property-switcher.tsx"],"sourcesContent":[".property-switcher {\n  position: relative;\n  display: inline-block;\n  width: 220px;\n}\n\n.property-selector {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--spacing-xs);\n  padding: var(--spacing-xs) var(--spacing-sm);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-radius: var(--radius-sm);\n  transition: background-color 0.2s ease;\n  width: 100%;\n  height: 36px;\n  min-width: 0;\n}\n\n.property-selector:hover {\n  background-color: var(--color-neutral-100);\n}\n\n.selector-icon {\n  font-size: 18px;\n  color: var(--color-neutral-500);\n  flex-shrink: 0;\n}\n\n.property-name {\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  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  flex-grow: 1;\n  min-width: 0;\n  text-align: left;\n}\n\n.expand-icon {\n  font-size: 18px;\n  flex-shrink: 0;\n  color: var(--color-neutral-400);\n  transition: color 0.2s ease;\n}\n\n/* Dropdown Panel */\n.dropdown-panel {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  margin-top: var(--spacing-xs);\n  background-color: var(--color-white);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-lg);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);\n  min-width: 280px;\n  max-width: 360px;\n  animation: dropdownSlideIn 0.15s ease-out;\n  overflow: hidden;\n}\n\n@keyframes dropdownSlideIn {\n  0% {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Search Container */\n.search-container {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xs);\n  padding: var(--spacing-sm);\n  background-color: var(--color-white);\n  border-bottom: 1px solid var(--color-neutral-200);\n}\n\n.search-icon {\n  font-size: 20px;\n  color: var(--color-neutral-500);\n  flex-shrink: 0;\n}\n\n.search-input {\n  flex: 1;\n  border: none;\n  outline: none;\n  font-family: var(--font-inter);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-900);\n  background: transparent;\n  min-width: 0;\n}\n\n.search-input::placeholder {\n  color: var(--color-neutral-400);\n}\n\n.clear-search {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-radius: var(--radius-sm);\n  color: var(--color-neutral-400);\n  transition: color 0.15s ease, background-color 0.15s ease;\n}\n\n.clear-search:hover {\n  color: var(--color-neutral-600);\n  background-color: var(--color-neutral-200);\n}\n\n.clear-search .material-symbols-outlined {\n  font-size: 18px;\n}\n\n/* Dropdown Content */\n.dropdown-content {\n  max-height: 360px;\n  overflow-y: auto;\n}\n\n/* Flat List Container */\n.flat-list-container {\n  padding: var(--spacing-xs) 0;\n}\n\n/* Groups Container */\n.groups-container {\n  padding: var(--spacing-xs) 0;\n}\n\n/* Property Group */\n.property-group {\n  border-bottom: 1px solid var(--color-neutral-100);\n}\n\n.property-group:last-child {\n  border-bottom: none;\n}\n\n/* Group Header */\n.group-header {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xs);\n  width: 100%;\n  padding: var(--spacing-sm) var(--spacing-md);\n  border: none;\n  background: var(--color-neutral-50);\n  cursor: pointer;\n  font-family: var(--font-inter);\n  font-size: var(--text-xs-size);\n  font-weight: var(--weight-semibold);\n  color: var(--color-neutral-600);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  transition: background-color 0.15s ease;\n}\n\n.group-header:hover {\n  background-color: var(--color-neutral-200);\n}\n\n.group-expand-icon {\n  font-size: 18px;\n  color: var(--color-neutral-500);\n  transition: transform 0.15s ease;\n}\n\n.group-name {\n  flex: 1;\n  text-align: left;\n}\n\n.group-count {\n  font-size: 11px;\n  font-weight: var(--weight-semibold);\n  color: var(--color-neutral-500);\n  background-color: var(--color-neutral-200);\n  padding: 2px 8px;\n  border-radius: var(--radius-full);\n  min-width: 20px;\n  text-align: center;\n}\n\n/* Group Properties */\n.group-properties {\n  padding: var(--spacing-xs) 0;\n}\n\n/* Property Item */\n.property-item {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-sm);\n  width: 100%;\n  padding: var(--spacing-sm) var(--spacing-md);\n  padding-left: calc(var(--spacing-md) + 26px);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-family: var(--font-inter);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-700);\n  text-align: left;\n  transition: background-color 0.15s ease;\n}\n\n.flat-list-container .property-item {\n  padding-left: var(--spacing-md);\n}\n\n.property-item:hover {\n  background-color: var(--color-neutral-100);\n}\n\n.property-item.selected {\n  background-color: var(--color-brand-50);\n  color: var(--color-brand-700);\n}\n\n.property-item.selected .property-icon {\n  color: var(--color-brand-600);\n}\n\n.property-icon {\n  font-size: 20px;\n  color: var(--color-neutral-400);\n  flex-shrink: 0;\n}\n\n.property-item-name {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: var(--weight-regular);\n}\n\n.property-item.selected .property-item-name {\n  font-weight: var(--weight-medium);\n}\n\n.check-icon {\n  font-size: 18px;\n  color: var(--color-brand-600);\n  flex-shrink: 0;\n}\n\n/* Menu Divider */\n.menu-divider {\n  height: 1px;\n  background-color: var(--color-neutral-150);\n  margin: var(--spacing-xs) var(--spacing-md);\n}\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-2xl) var(--spacing-lg);\n  gap: var(--spacing-sm);\n}\n\n.empty-icon {\n  font-size: 40px;\n  color: var(--color-neutral-300);\n}\n\n.empty-text {\n  font-family: var(--font-inter);\n  font-size: var(--text-sm-size);\n  color: var(--color-neutral-500);\n}\n\n/* Legacy dropdown menu container (for backwards compatibility) */\n.dropdown-menu-container {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  margin-top: var(--spacing-xs);\n  max-height: 320px;\n}\n\n/* Legacy popover animations */\n.popover-container {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  margin-top: var(--spacing-xs);\n  animation: popoverSlideIn 0.3s ease-out;\n  transform-origin: top center;\n}\n\n@keyframes popoverSlideIn {\n  0% {\n    opacity: 0;\n    transform: translateY(calc(-1 * var(--spacing-lg)));\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.popover-container.closing {\n  animation: popoverSlideOut 0.2s ease-in forwards;\n}\n\n@keyframes popoverSlideOut {\n  0% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(calc(-1 * var(--spacing-lg)));\n  }\n}\n","import { Component, Prop, Event, EventEmitter, State, h, Host, Listen } from '@stencil/core';\n\nexport interface PropertyOption {\n  id: string;\n  name: string;\n  type: 'portfolio' | 'region' | 'property';\n  group?: string;\n}\n\nexport interface PropertyGroup {\n  id: string;\n  name: string;\n  properties: PropertyOption[];\n}\n\nexport interface DropdownMenuItem {\n  id: string;\n  label?: string;\n  icon?: string;\n  divider?: boolean;\n}\n\n@Component({\n  tag: 'bh-property-switcher',\n  styleUrl: 'bh-property-switcher.css',\n  shadow: true,\n})\nexport class BhPropertySwitcher {\n  /**\n   * Selected property name to display (initial value)\n   */\n  @Prop() selectedProperty: string = 'Select a property';\n\n  /**\n   * Array of property options\n   */\n  @Prop() properties: PropertyOption[] = [];\n\n  /**\n   * Whether to group properties by their group field\n   */\n  @Prop() grouped: boolean = false;\n\n  /**\n   * Placeholder text for search input\n   */\n  @Prop() searchPlaceholder: string = 'Search properties...';\n\n  /**\n   * Event emitted when a property is selected\n   */\n  @Event() bhPropertyChange!: EventEmitter<PropertyOption>;\n\n  @State() isExpanded: boolean = false;\n  @State() searchQuery: string = '';\n  @State() expandedGroups: Set<string> = new Set();\n  @State() internalSelectedProperty: string = '';\n\n  private switcherRef?: HTMLDivElement;\n  private searchInputRef?: HTMLInputElement;\n\n  componentWillLoad() {\n    this.internalSelectedProperty = this.selectedProperty;\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    if (!this.isExpanded) {\n      return;\n    }\n\n    // Check if click is on this component or inside it using composedPath for Shadow DOM\n    const clickedInside = event.composedPath().includes(this.switcherRef as any);\n\n    if (!clickedInside) {\n      this.isExpanded = false;\n    }\n  }\n\n  private handleToggle = () => {\n    this.isExpanded = !this.isExpanded;\n    if (this.isExpanded) {\n      this.searchQuery = '';\n      // Initialize all groups as expanded when opening\n      if (this.grouped) {\n        const groups = this.getPropertyGroups();\n        this.expandedGroups = new Set(groups.map(g => g.id));\n      }\n      // Focus search input when opening\n      setTimeout(() => {\n        if (this.searchInputRef) {\n          this.searchInputRef.focus();\n        }\n      }, 50);\n    }\n  }\n\n  private handleSearchInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.searchQuery = target.value;\n  }\n\n  private handleGroupToggle = (groupId: string) => {\n    const newSet = new Set(this.expandedGroups);\n    if (newSet.has(groupId)) {\n      newSet.delete(groupId);\n    } else {\n      newSet.add(groupId);\n    }\n    this.expandedGroups = newSet;\n  }\n\n  private handlePropertySelect = (property: PropertyOption) => {\n    this.internalSelectedProperty = property.name;\n    this.bhPropertyChange.emit(property);\n    this.isExpanded = false;\n    this.searchQuery = '';\n  }\n\n  private getPropertyGroups = (): PropertyGroup[] => {\n    const groupMap = new Map<string, PropertyOption[]>();\n    const ungrouped: PropertyOption[] = [];\n\n    this.properties.forEach((property) => {\n      if (property.group) {\n        const existing = groupMap.get(property.group) || [];\n        existing.push(property);\n        groupMap.set(property.group, existing);\n      } else {\n        ungrouped.push(property);\n      }\n    });\n\n    const groups: PropertyGroup[] = [];\n\n    groupMap.forEach((properties, name) => {\n      groups.push({\n        id: name.toLowerCase().replace(/\\s+/g, '-'),\n        name,\n        properties,\n      });\n    });\n\n    // Add ungrouped properties as a special group if any exist\n    if (ungrouped.length > 0) {\n      groups.push({\n        id: 'ungrouped',\n        name: 'Other',\n        properties: ungrouped,\n      });\n    }\n\n    return groups;\n  }\n\n  private filterProperties = (properties: PropertyOption[]): PropertyOption[] => {\n    if (!this.searchQuery.trim()) {\n      return properties;\n    }\n    const query = this.searchQuery.toLowerCase();\n    return properties.filter((p) =>\n      p.name.toLowerCase().includes(query)\n    );\n  }\n\n  private filterGroups = (groups: PropertyGroup[]): PropertyGroup[] => {\n    if (!this.searchQuery.trim()) {\n      return groups;\n    }\n    const query = this.searchQuery.toLowerCase();\n\n    return groups\n      .map((group) => {\n        // Check if group name matches\n        const groupMatches = group.name.toLowerCase().includes(query);\n        // Filter properties within the group\n        const filteredProperties = group.properties.filter((p) =>\n          p.name.toLowerCase().includes(query)\n        );\n\n        // Include group if group name matches (show all properties) or if any properties match\n        if (groupMatches) {\n          return { ...group }; // Return group with all properties\n        } else if (filteredProperties.length > 0) {\n          return { ...group, properties: filteredProperties };\n        }\n        return null;\n      })\n      .filter((g): g is PropertyGroup => g !== null);\n  }\n\n  private getPropertyIcon = (type: PropertyOption['type']): string => {\n    switch (type) {\n      case 'portfolio':\n        return 'business';\n      case 'region':\n        return 'public';\n      case 'property':\n      default:\n        return 'location_on';\n    }\n  }\n\n  private renderSearchInput() {\n    return (\n      <div class=\"search-container\">\n        <span class=\"material-symbols-outlined search-icon\">search</span>\n        <input\n          ref={(el) => (this.searchInputRef = el)}\n          type=\"text\"\n          class=\"search-input\"\n          placeholder={this.searchPlaceholder}\n          value={this.searchQuery}\n          onInput={this.handleSearchInput}\n          onClick={(e) => e.stopPropagation()}\n        />\n        {this.searchQuery && (\n          <button\n            class=\"clear-search\"\n            onClick={(e) => {\n              e.stopPropagation();\n              this.searchQuery = '';\n              this.searchInputRef?.focus();\n            }}\n            aria-label=\"Clear search\"\n          >\n            <span class=\"material-symbols-outlined\">close</span>\n          </button>\n        )}\n      </div>\n    );\n  }\n\n  private renderPropertyItem(property: PropertyOption) {\n    const isSelected = property.name === this.internalSelectedProperty;\n    return (\n      <button\n        class={{\n          'property-item': true,\n          'selected': isSelected,\n        }}\n        onClick={() => this.handlePropertySelect(property)}\n      >\n        <span class=\"material-symbols-outlined property-icon\">\n          {this.getPropertyIcon(property.type)}\n        </span>\n        <span class=\"property-item-name\" title={property.name}>\n          {property.name}\n        </span>\n        {isSelected && (\n          <span class=\"material-symbols-outlined check-icon\">check</span>\n        )}\n      </button>\n    );\n  }\n\n  private renderGroupedView() {\n    const groups = this.getPropertyGroups();\n    const filteredGroups = this.filterGroups(groups);\n\n    if (filteredGroups.length === 0) {\n      return this.renderEmptyState();\n    }\n\n    return (\n      <div class=\"groups-container\">\n        {filteredGroups.map((group) => {\n          const isExpanded = this.expandedGroups.has(group.id);\n          return (\n            <div class=\"property-group\" key={group.id}>\n              <button\n                class={{\n                  'group-header': true,\n                  'expanded': isExpanded,\n                }}\n                onClick={() => this.handleGroupToggle(group.id)}\n                aria-expanded={isExpanded ? 'true' : 'false'}\n              >\n                <span class=\"material-symbols-outlined group-expand-icon\">\n                  {isExpanded ? 'expand_more' : 'chevron_right'}\n                </span>\n                <span class=\"group-name\">{group.name}</span>\n                <span class=\"group-count\">{group.properties.length}</span>\n              </button>\n              {isExpanded && (\n                <div class=\"group-properties\">\n                  {group.properties.map((property) => (\n                    <div key={property.id}>\n                      {this.renderPropertyItem(property)}\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n\n  private renderFlatView() {\n    const filteredProperties = this.filterProperties(this.properties);\n\n    if (filteredProperties.length === 0) {\n      return this.renderEmptyState();\n    }\n\n    // Legacy behavior: render portfolios with dividers, skip regions\n    const items: (PropertyOption | { divider: true })[] = [];\n\n    filteredProperties.forEach((property) => {\n      if (property.type === 'portfolio') {\n        items.push(property);\n        items.push({ divider: true });\n      } else if (property.type === 'property') {\n        items.push(property);\n      }\n    });\n\n    return (\n      <div class=\"flat-list-container\">\n        {items.map((item, index) => {\n          if ('divider' in item) {\n            return <div class=\"menu-divider\" key={`divider-${index}`} />;\n          }\n          return (\n            <div key={item.id}>\n              {this.renderPropertyItem(item)}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n\n  private renderEmptyState() {\n    return (\n      <div class=\"empty-state\">\n        <span class=\"material-symbols-outlined empty-icon\">search_off</span>\n        <span class=\"empty-text\">No properties found</span>\n      </div>\n    );\n  }\n\n  private getSelectedProperty(): PropertyOption | undefined {\n    return this.properties.find(p => p.name === this.internalSelectedProperty);\n  }\n\n  render() {\n    const containerClasses = {\n      'property-switcher': true,\n      'expanded': this.isExpanded,\n    };\n\n    const selectedProp = this.getSelectedProperty();\n    const displayName = this.internalSelectedProperty || this.selectedProperty;\n\n    return (\n      <Host>\n        <div\n          ref={(el) => (this.switcherRef = el)}\n          class={containerClasses}\n        >\n          <button\n            class=\"property-selector\"\n            onClick={() => this.handleToggle()}\n            aria-expanded={this.isExpanded ? 'true' : 'false'}\n            aria-label={`Property selector: ${displayName}`}\n          >\n            {selectedProp && (\n              <span class=\"material-symbols-outlined selector-icon\">\n                {this.getPropertyIcon(selectedProp.type)}\n              </span>\n            )}\n            <span class=\"property-name\">{displayName}</span>\n            <span\n              class=\"material-symbols-outlined expand-icon\"\n              aria-label={this.isExpanded ? 'Collapse Options' : 'Expand Options'}\n            >\n              {this.isExpanded ? 'unfold_less' : 'unfold_more'}\n            </span>\n          </button>\n\n          {this.isExpanded && (\n            <div class=\"dropdown-panel\">\n              {this.renderSearchInput()}\n              <div class=\"dropdown-content\">\n                {this.grouped\n                  ? this.renderGroupedView()\n                  : this.renderFlatView()\n                }\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/esm/bh-radio-button.entry.js

@@ -0,0 +1,122 @@
+import { r as registerInstance, c as createEvent, h } from './index-DtVghh5W.js';
+import { a as syncCheckableFormValue } from './form-CPgx0iFq.js';
+
+const bhRadioButtonCss = ":host{display:inline-block;font-family:var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif)}.radio{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;outline:none;user-select:none;transition:background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;box-sizing:border-box;background:var(--color-white);border:2px solid var(--color-neutral-300);border-radius:var(--radius-full);position:relative;flex-shrink:0}.radio-sm{width:16px;height:16px}.radio-md{width:20px;height:20px}.radio.radio-selected{background:var(--color-brand-600);border-color:var(--color-brand-600);animation:fillExpand 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.radio:hover:not(.radio-disabled){background:var(--color-neutral-100);border-color:var(--color-neutral-300)}.radio.radio-selected:hover:not(.radio-disabled){background:var(--color-brand-600);border-color:var(--color-brand-600)}.radio.radio-focused:not(.radio-disabled){border-color:var(--color-neutral-300);box-shadow:0px 0px 0px 4px var(--color-brand-100),\n    0px 0px 0px 2px var(--color-white)}.radio.radio-selected.radio-focused:not(.radio-disabled){background:var(--color-brand-600);border-color:var(--color-brand-600);box-shadow:0px 0px 0px 4px var(--color-brand-100),\n    0px 0px 0px 2px var(--color-white)}.radio.radio-disabled{background:var(--color-neutral-50);border-color:var(--color-neutral-300);cursor:not-allowed;opacity:1}.radio.radio-selected.radio-disabled{background:var(--color-neutral-50);border:2px solid var(--color-neutral-300)}.radio-dot{width:6px;height:6px;border-radius:var(--radius-full);background:var(--color-white);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.radio-sm .radio-dot{width:4px;height:4px}.radio-disabled .radio-dot{background:var(--color-neutral-300)}.radio:focus{outline:none}.radio:focus:not(.radio-disabled){box-shadow:0px 0px 0px 4px var(--color-brand-100),\n    0px 0px 0px 2px var(--color-white)}@keyframes fillExpand{0%{transform:scale(0.95)}50%{transform:scale(1.05)}100%{transform:scale(1)}}.radio-wrapper{display:inline-block}.radio-control{display:inline-flex;align-items:flex-start;cursor:pointer;outline:none}.radio-wrapper-disabled .radio-control{cursor:not-allowed}.radio-wrapper-with-label .radio-sm{margin-top:3px}.radio-wrapper-with-label .radio-md{margin-top:2px}";
+
+const BhRadioButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhChange = createEvent(this, "bhChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    internals;
+    /**
+     * The size of the radio button
+     */
+    size = 'md';
+    /**
+     * Whether the radio button is selected
+     */
+    selected = false;
+    /**
+     * Whether the radio button is disabled
+     */
+    disabled = false;
+    /**
+     * The value associated with this radio button
+     */
+    value = '';
+    /**
+     * The name of the radio group
+     */
+    name = '';
+    /**
+     * Optional label text - when provided, renders radio with label
+     */
+    label = '';
+    /**
+     * Optional supporting text below the label
+     */
+    supportingText = '';
+    /**
+     * Track focus state internally
+     */
+    isFocused = false;
+    /**
+     * Track hover state internally
+     */
+    isHovered = false;
+    /**
+     * Emitted when the radio button selection changes
+     */
+    bhChange;
+    componentDidLoad() {
+        syncCheckableFormValue(this.internals, this.name, this.selected, this.value);
+    }
+    formResetCallback() {
+        this.selected = false;
+        syncCheckableFormValue(this.internals, this.name, this.selected, this.value);
+    }
+    handleClick = () => {
+        if (this.disabled || this.selected)
+            return;
+        this.selected = true;
+        syncCheckableFormValue(this.internals, this.name, this.selected, this.value);
+        this.bhChange.emit(this.value);
+    };
+    handleKeyDown = (event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.handleClick();
+        }
+    };
+    handleFocus = () => {
+        this.isFocused = true;
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+    };
+    handleMouseEnter = () => {
+        this.isHovered = true;
+    };
+    handleMouseLeave = () => {
+        this.isHovered = false;
+    };
+    uniqueId = `bh-radio-${Math.random().toString(36).substring(2, 9)}`;
+    renderRadioControl() {
+        const radioClasses = {
+            'radio': true,
+            [`radio-${this.size}`]: true,
+            'radio-selected': this.selected,
+            'radio-disabled': this.disabled,
+            'radio-focused': this.isFocused && !this.disabled,
+            'radio-hover': this.isHovered && !this.disabled,
+        };
+        return (h("div", { class: "radio-control", onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: this.disabled ? -1 : 0, role: "radio", "aria-checked": String(this.selected), "aria-disabled": String(this.disabled) }, h("div", { class: radioClasses, part: "radio" }, this.selected && h("div", { class: "radio-dot" }))));
+    }
+    render() {
+        const hasLabel = this.label || this.supportingText;
+        const wrapperClasses = {
+            'radio-wrapper': true,
+            'radio-wrapper-with-label': !!hasLabel,
+            'radio-wrapper-disabled': this.disabled,
+        };
+        // Render with bh-label when label/supportingText is provided
+        if (hasLabel) {
+            return (h("div", { class: wrapperClasses, part: "wrapper" }, h("bh-label", { layout: "inline-start", label: this.label, supportingText: this.supportingText, disabled: this.disabled, for: this.uniqueId }, this.renderRadioControl())));
+        }
+        // Standalone radio button without label
+        return (h("div", { class: wrapperClasses, part: "wrapper" }, this.renderRadioControl()));
+    }
+    static get formAssociated() { return true; }
+};
+BhRadioButton.style = bhRadioButtonCss;
+
+export { BhRadioButton as bh_radio_button };
+//# sourceMappingURL=bh-radio-button.entry.js.map

package/esm/bh-radio-button.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-radio-button.entry.js","sources":["src/components/bh-radio-button/bh-radio-button.css?tag=bh-radio-button&encapsulation=shadow","src/components/bh-radio-button/bh-radio-button.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-RADIO-BUTTON COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n  font-family: var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n/* ==========================================================================\n   RADIO BUTTON STYLES\n   ========================================================================== */\n\n.radio {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),\n    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;\n  box-sizing: border-box;\n  background: var(--color-white);\n  border: 2px solid var(--color-neutral-300);\n  border-radius: var(--radius-full);\n  position: relative;\n  flex-shrink: 0;\n}\n\n/* Size Variants */\n.radio-sm {\n  width: 16px;\n  height: 16px;\n}\n\n.radio-md {\n  width: 20px;\n  height: 20px;\n}\n\n/* State: Selected */\n.radio.radio-selected {\n  background: var(--color-brand-600);\n  border-color: var(--color-brand-600);\n  animation: fillExpand 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* State: Hover */\n.radio:hover:not(.radio-disabled) {\n  background: var(--color-neutral-100);\n  border-color: var(--color-neutral-300);\n}\n\n.radio.radio-selected:hover:not(.radio-disabled) {\n  background: var(--color-brand-600);\n  border-color: var(--color-brand-600);\n}\n\n/* State: Focused */\n.radio.radio-focused:not(.radio-disabled) {\n  border-color: var(--color-neutral-300);\n  box-shadow: 0px 0px 0px 4px var(--color-brand-100),\n    0px 0px 0px 2px var(--color-white);\n}\n\n.radio.radio-selected.radio-focused:not(.radio-disabled) {\n  background: var(--color-brand-600);\n  border-color: var(--color-brand-600);\n  box-shadow: 0px 0px 0px 4px var(--color-brand-100),\n    0px 0px 0px 2px var(--color-white);\n}\n\n/* State: Disabled */\n.radio.radio-disabled {\n  background: var(--color-neutral-50);\n  border-color: var(--color-neutral-300);\n  cursor: not-allowed;\n  opacity: 1;\n}\n\n.radio.radio-selected.radio-disabled {\n  background: var(--color-neutral-50);\n  border: 2px solid var(--color-neutral-300);\n}\n\n/* Radio Dot (inner circle) */\n.radio-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: var(--radius-full);\n  background: var(--color-white);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n/* Radio Dot for small size */\n.radio-sm .radio-dot {\n  width: 4px;\n  height: 4px;\n}\n\n/* Disabled radio dot */\n.radio-disabled .radio-dot {\n  background: var(--color-neutral-300);\n}\n\n/* Focus outline for accessibility */\n.radio:focus {\n  outline: none;\n}\n\n.radio:focus:not(.radio-disabled) {\n  box-shadow: 0px 0px 0px 4px var(--color-brand-100),\n    0px 0px 0px 2px var(--color-white);\n}\n\n/* Animation for fill effect */\n@keyframes fillExpand {\n  0% {\n    transform: scale(0.95);\n  }\n  50% {\n    transform: scale(1.05);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n/* ==========================================================================\n   RADIO CONTROL AND WRAPPER STYLES\n   ========================================================================== */\n\n.radio-wrapper {\n  display: inline-block;\n}\n\n.radio-control {\n  display: inline-flex;\n  align-items: flex-start;\n  cursor: pointer;\n  outline: none;\n}\n\n.radio-wrapper-disabled .radio-control {\n  cursor: not-allowed;\n}\n\n/* Adjust radio position when with label */\n.radio-wrapper-with-label .radio-sm {\n  margin-top: 3px;\n}\n\n.radio-wrapper-with-label .radio-md {\n  margin-top: 2px;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, AttachInternals } from '@stencil/core';\nimport { syncCheckableFormValue } from '../../utils/form';\n\nexport type RadioButtonSize = 'sm' | 'md';\n\n@Component({\n  tag: 'bh-radio-button',\n  styleUrl: 'bh-radio-button.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class BhRadioButton {\n  @AttachInternals() internals!: ElementInternals;\n  /**\n   * The size of the radio button\n   */\n  @Prop() size: RadioButtonSize = 'md';\n\n  /**\n   * Whether the radio button is selected\n   */\n  @Prop({ mutable: true }) selected: boolean = false;\n\n  /**\n   * Whether the radio button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The value associated with this radio button\n   */\n  @Prop() value: string = '';\n\n  /**\n   * The name of the radio group\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Optional label text - when provided, renders radio with label\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Optional supporting text below the label\n   */\n  @Prop() supportingText: string = '';\n\n  /**\n   * Track focus state internally\n   */\n  @State() isFocused: boolean = false;\n\n  /**\n   * Track hover state internally\n   */\n  @State() isHovered: boolean = false;\n\n  /**\n   * Emitted when the radio button selection changes\n   */\n  @Event() bhChange!: EventEmitter<string>;\n\n  componentDidLoad() {\n    syncCheckableFormValue(this.internals, this.name, this.selected, this.value);\n  }\n\n  formResetCallback() {\n    this.selected = false;\n    syncCheckableFormValue(this.internals, this.name, this.selected, this.value);\n  }\n\n  private handleClick = (): void => {\n    if (this.disabled || this.selected) return;\n\n    this.selected = true;\n    syncCheckableFormValue(this.internals, this.name, this.selected, this.value);\n    this.bhChange.emit(this.value);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  private handleFocus = (): void => {\n    this.isFocused = true;\n  };\n\n  private handleBlur = (): void => {\n    this.isFocused = false;\n  };\n\n  private handleMouseEnter = (): void => {\n    this.isHovered = true;\n  };\n\n  private handleMouseLeave = (): void => {\n    this.isHovered = false;\n  };\n\n  private uniqueId = `bh-radio-${Math.random().toString(36).substring(2, 9)}`;\n\n  private renderRadioControl() {\n    const radioClasses = {\n      'radio': true,\n      [`radio-${this.size}`]: true,\n      'radio-selected': this.selected,\n      'radio-disabled': this.disabled,\n      'radio-focused': this.isFocused && !this.disabled,\n      'radio-hover': this.isHovered && !this.disabled,\n    };\n\n    return (\n      <div\n        class=\"radio-control\"\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        tabIndex={this.disabled ? -1 : 0}\n        role=\"radio\"\n        aria-checked={String(this.selected)}\n        aria-disabled={String(this.disabled)}\n      >\n        <div class={radioClasses} part=\"radio\">\n          {this.selected && <div class=\"radio-dot\"></div>}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const hasLabel = this.label || this.supportingText;\n\n    const wrapperClasses = {\n      'radio-wrapper': true,\n      'radio-wrapper-with-label': !!hasLabel,\n      'radio-wrapper-disabled': this.disabled,\n    };\n\n    // Render with bh-label when label/supportingText is provided\n    if (hasLabel) {\n      return (\n        <div class={wrapperClasses} part=\"wrapper\">\n          <bh-label\n            layout=\"inline-start\"\n            label={this.label}\n            supportingText={this.supportingText}\n            disabled={this.disabled}\n            for={this.uniqueId}\n          >\n            {this.renderRadioControl()}\n          </bh-label>\n        </div>\n      );\n    }\n\n    // Standalone radio button without label\n    return (\n      <div class={wrapperClasses} part=\"wrapper\">\n        {this.renderRadioControl()}\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}