@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-property-switcher/bh-property-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-property-switcher.js","sourceRoot":"","sources":["../../../src/components/bh-property-switcher/bh-property-switcher.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/collection/components/bh-radio-button/bh-radio-button.css

@@ -0,0 +1,159 @@
+/* ==========================================================================
+   BH-RADIO-BUTTON COMPONENT STYLES
+   ========================================================================== */
+
+:host {
+  display: inline-block;
+  font-family: var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
+}
+
+/* ==========================================================================
+   RADIO BUTTON STYLES
+   ========================================================================== */
+
+.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),
+    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;
+}
+
+/* Size Variants */
+.radio-sm {
+  width: 16px;
+  height: 16px;
+}
+
+.radio-md {
+  width: 20px;
+  height: 20px;
+}
+
+/* State: Selected */
+.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);
+}
+
+/* State: Hover */
+.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);
+}
+
+/* State: Focused */
+.radio.radio-focused:not(.radio-disabled) {
+  border-color: var(--color-neutral-300);
+  box-shadow: 0px 0px 0px 4px var(--color-brand-100),
+    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),
+    0px 0px 0px 2px var(--color-white);
+}
+
+/* State: Disabled */
+.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 (inner circle) */
+.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 Dot for small size */
+.radio-sm .radio-dot {
+  width: 4px;
+  height: 4px;
+}
+
+/* Disabled radio dot */
+.radio-disabled .radio-dot {
+  background: var(--color-neutral-300);
+}
+
+/* Focus outline for accessibility */
+.radio:focus {
+  outline: none;
+}
+
+.radio:focus:not(.radio-disabled) {
+  box-shadow: 0px 0px 0px 4px var(--color-brand-100),
+    0px 0px 0px 2px var(--color-white);
+}
+
+/* Animation for fill effect */
+@keyframes fillExpand {
+  0% {
+    transform: scale(0.95);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* ==========================================================================
+   RADIO CONTROL AND WRAPPER STYLES
+   ========================================================================== */
+
+.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;
+}
+
+/* Adjust radio position when with label */
+.radio-wrapper-with-label .radio-sm {
+  margin-top: 3px;
+}
+
+.radio-wrapper-with-label .radio-md {
+  margin-top: 2px;
+}

package/collection/components/bh-radio-button/bh-radio-button.js

@@ -0,0 +1,292 @@
+import { h } from "@stencil/core";
+import { syncCheckableFormValue } from "../../utils/form";
+export class BhRadioButton {
+    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 is() { return "bh-radio-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-radio-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-radio-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RadioButtonSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "RadioButtonSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-radio-button/bh-radio-button.tsx",
+                            "id": "src/components/bh-radio-button/bh-radio-button.tsx::RadioButtonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the radio button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the radio button is selected"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the radio button is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value associated with this radio button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the radio group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional label text - when provided, renders radio with label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "supportingText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional supporting text below the label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "supporting-text",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFocused": {},
+            "isHovered": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhChange",
+                "name": "bhChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the radio button selection changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=bh-radio-button.js.map

package/collection/components/bh-radio-button/bh-radio-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-radio-button.js","sourceRoot":"","sources":["../../../src/components/bh-radio-button/bh-radio-button.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/collection/components/bh-sidebar/bh-nav-item.css

@@ -0,0 +1,114 @@
+/* ==========================================================================
+   BH-NAV-ITEM COMPONENT STYLES
+   Navigation item for sidebar navigation
+   ========================================================================== */
+
+:host {
+  display: inline-block;
+}
+
+.nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  flex-shrink: 0;
+  width: 100%;
+  max-width: 52px;
+  height: fit-content;
+}
+
+.nav-item-button {
+  background-color: var(--color-white);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: var(--spacing-md);
+  position: relative;
+  border-radius: var(--radius-sm);
+  flex-shrink: 0;
+  transition: background-color 0.2s ease;
+  cursor: pointer;
+  border: none;
+  outline: none;
+}
+
+.nav-item-button:hover {
+  background-color: var(--color-neutral-50);
+}
+
+.nav-item-button:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-brand-100);
+}
+
+.nav-item.active .nav-item-button {
+  background-color: var(--color-brand-50);
+}
+
+.nav-item-button .icon {
+  width: 20px;
+  height: 20px;
+  display: block;
+  flex-shrink: 0;
+  color: var(--color-neutral-500);
+  transition: color 0.2s ease;
+  font-size: 20px;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
+}
+
+.nav-item-button:hover .icon {
+  color: var(--color-neutral-700);
+}
+
+.nav-item.active .nav-item-button .icon {
+  color: var(--color-brand-600);
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
+}
+
+.nav-item-label {
+  font-family: var(--font-inter);
+  font-weight: var(--weight-medium);
+  height: 18px;
+  line-height: 18px;
+  font-style: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: relative;
+  flex-shrink: 0;
+  color: var(--color-neutral-700);
+  font-size: 10px;
+  text-align: center;
+  white-space: nowrap;
+  width: 100%;
+  max-width: 100%;
+  margin: var(--spacing-none);
+  margin-top: var(--spacing-xxs);
+  box-sizing: border-box;
+  direction: ltr;
+}
+
+.nav-item.active .nav-item-label {
+  color: var(--color-neutral-700);
+  font-weight: var(--weight-semibold);
+}
+
+/* Disabled state */
+.nav-item.disabled .nav-item-button {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.nav-item.disabled .nav-item-button:hover {
+  background-color: var(--color-white);
+}
+
+.nav-item.disabled .nav-item-button .icon {
+  color: var(--color-neutral-400);
+}
+
+.nav-item.disabled .nav-item-label {
+  color: var(--color-neutral-400);
+}