@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-input-verification/bh-input-verification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-input-verification.js","sourceRoot":"","sources":["../../../src/components/bh-input-verification/bh-input-verification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, Element, h, Watch } from '@stencil/core';\n\nexport type InputVerificationSize = 'sm' | 'md' | 'lg';\nexport type InputVerificationDigits = 4 | 6;\n\n@Component({\n  tag: 'bh-input-verification',\n  styleUrl: 'bh-input-verification.css',\n  shadow: true,\n})\nexport class BhInputVerification {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Size variant of the input fields\n   */\n  @Prop() size: InputVerificationSize = 'md';\n\n  /**\n   * Number of digits (4 or 6)\n   */\n  @Prop() digits: InputVerificationDigits = 4;\n\n  /**\n   * Label text for the input\n   */\n  @Prop() label: string = 'Secure code';\n\n  /**\n   * Whether to show the label\n   */\n  @Prop() showLabel: boolean = true;\n\n  /**\n   * Hint text displayed below the inputs\n   */\n  @Prop() hintText: string = 'This is a hint text to help user.';\n\n  /**\n   * Whether to show the hint text\n   */\n  @Prop() showHintText: boolean = true;\n\n  /**\n   * Whether the input is in an error state\n   */\n  @Prop() error: boolean = false;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the field is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether to show the separator for 6-digit codes\n   */\n  @Prop() showSeparator: boolean = true;\n\n  /**\n   * Placeholder character for empty inputs\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * Width of the component\n   */\n  @Prop() width: string = '';\n\n  /**\n   * Current value of the verification code\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  @State() values: string[] = [];\n  @State() inputRefs: HTMLInputElement[] = [];\n\n  /**\n   * Event emitted when the value changes\n   */\n  @Event() bhChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when all digits are filled\n   */\n  @Event() bhComplete!: EventEmitter<string>;\n\n  @Watch('value')\n  watchValue(newValue: string) {\n    const newValues = newValue.split('').concat(Array(this.digits).fill('')).slice(0, this.digits);\n    this.values = newValues;\n  }\n\n  @Watch('digits')\n  watchDigits() {\n    this.values = Array(this.digits).fill('');\n  }\n\n  componentWillLoad() {\n    this.values = this.value\n      ? this.value.split('').concat(Array(this.digits).fill('')).slice(0, this.digits)\n      : Array(this.digits).fill('');\n  }\n\n  componentDidLoad() {\n    // Focus first input on mount if not disabled\n    if (!this.disabled) {\n      const firstInput = this.el.shadowRoot?.querySelector('input');\n      firstInput?.focus();\n    }\n  }\n\n  private updateValues(newValues: string[]) {\n    this.values = newValues;\n    const newValue = newValues.join('');\n    this.value = newValue;\n    this.bhChange.emit(newValue);\n\n    // Check if all fields are filled\n    if (newValues.every(val => val !== '')) {\n      this.bhComplete.emit(newValue);\n    }\n  }\n\n  private handleInputChange(index: number, event: Event) {\n    const input = event.target as HTMLInputElement;\n    const inputValue = input.value;\n\n    // Only allow single digits\n    const digit = inputValue.replace(/\\D/g, '').slice(-1);\n\n    const newValues = [...this.values];\n    newValues[index] = digit;\n    this.updateValues(newValues);\n\n    // Auto-advance to next input if digit entered\n    if (digit && index < this.digits - 1) {\n      const nextInput = this.el.shadowRoot?.querySelectorAll('input')[index + 1];\n      nextInput?.focus();\n    }\n  }\n\n  private handleKeyDown(index: number, event: KeyboardEvent) {\n    if (event.key === 'Backspace') {\n      event.preventDefault();\n      const newValues = [...this.values];\n\n      if (this.values[index]) {\n        // Clear current field\n        newValues[index] = '';\n        this.updateValues(newValues);\n      } else if (index > 0) {\n        // Move to previous field and clear it\n        newValues[index - 1] = '';\n        this.updateValues(newValues);\n        const prevInput = this.el.shadowRoot?.querySelectorAll('input')[index - 1];\n        prevInput?.focus();\n      }\n    } else if (event.key === 'ArrowLeft' && index > 0) {\n      event.preventDefault();\n      const prevInput = this.el.shadowRoot?.querySelectorAll('input')[index - 1];\n      prevInput?.focus();\n    } else if (event.key === 'ArrowRight' && index < this.digits - 1) {\n      event.preventDefault();\n      const nextInput = this.el.shadowRoot?.querySelectorAll('input')[index + 1];\n      nextInput?.focus();\n    } else if (event.key >= '0' && event.key <= '9') {\n      event.preventDefault();\n      const newValues = [...this.values];\n      newValues[index] = event.key;\n      this.updateValues(newValues);\n\n      // Auto-advance to next input\n      if (index < this.digits - 1) {\n        const nextInput = this.el.shadowRoot?.querySelectorAll('input')[index + 1];\n        nextInput?.focus();\n      }\n    }\n  }\n\n  private handlePaste(event: ClipboardEvent) {\n    event.preventDefault();\n\n    const pastedText = event.clipboardData?.getData('text') || '';\n    const pastedDigits = pastedText.replace(/\\D/g, '').slice(0, this.digits);\n\n    if (pastedDigits) {\n      const newValues = pastedDigits.split('').concat(Array(this.digits).fill('')).slice(0, this.digits);\n      this.updateValues(newValues);\n\n      // Focus on the next empty input or last input\n      const nextEmptyIndex = newValues.findIndex(val => val === '');\n      const focusIndex = nextEmptyIndex === -1 ? this.digits - 1 : Math.min(nextEmptyIndex, this.digits - 1);\n      const inputToFocus = this.el.shadowRoot?.querySelectorAll('input')[focusIndex];\n      inputToFocus?.focus();\n    }\n  }\n\n  private handleFocus(event: Event) {\n    const input = event.target as HTMLInputElement;\n    input.select();\n  }\n\n  private renderInputs() {\n    const inputs = [];\n\n    for (let i = 0; i < this.digits; i++) {\n      // Add separator for 6-digit codes\n      if (this.digits === 6 && i === 3 && this.showSeparator) {\n        inputs.push(\n          <span key=\"separator\" class={{ 'separator': true, [`size-${this.size}`]: true }}>\n            -\n          </span>\n        );\n      }\n\n      inputs.push(\n        <input\n          key={i}\n          type=\"text\"\n          inputmode=\"numeric\"\n          pattern=\"[0-9]\"\n          maxLength={1}\n          value={this.values[i] || ''}\n          placeholder={this.placeholder && i < this.placeholder.length ? this.placeholder[i] : ''}\n          disabled={this.disabled}\n          class={{\n            'verification-input': true,\n            [`size-${this.size}`]: true,\n            'error': this.error,\n          }}\n          onInput={(e) => this.handleInputChange(i, e)}\n          onKeyDown={(e) => this.handleKeyDown(i, e)}\n          onPaste={(e) => this.handlePaste(e)}\n          onFocus={(e) => this.handleFocus(e)}\n          aria-label={`Digit ${i + 1} of ${this.digits}`}\n        />\n      );\n    }\n\n    return inputs;\n  }\n\n  render() {\n    const wrapperStyle = this.width ? { width: this.width } : {};\n\n    return (\n      <div class=\"input-verification-wrapper\" style={wrapperStyle}>\n        <bh-label\n          label={this.showLabel ? this.label : ''}\n          required={this.required}\n          disabled={this.disabled}\n        >\n          <div class=\"input-verification-container\">\n            {this.renderInputs()}\n          </div>\n        </bh-label>\n\n        {this.showHintText && this.hintText && (\n          <div class={{ 'hint-text': true, 'error': this.error }}>\n            {this.hintText}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/collection/components/bh-label/bh-label.css

@@ -0,0 +1,143 @@
+:host {
+  display: block;
+  font-family: var(--font-inter, 'Inter', sans-serif);
+}
+
+.label-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs, 6px);
+}
+
+.label-container.layout-block {
+  flex-direction: column;
+}
+
+.label-container.layout-inline {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--spacing-sm, 8px);
+}
+
+.label-container.layout-inline .label-wrapper {
+  flex-shrink: 0;
+}
+
+.label-container.layout-inline-start {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--spacing-sm, 8px);
+}
+
+.label-container.layout-inline-start .label-content {
+  flex-shrink: 0;
+  width: auto;
+}
+
+.label-container.layout-inline-start .label-text-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.label-container.layout-inline-start .label-wrapper {
+  gap: var(--spacing-xxs, 4px);
+}
+
+.label-container.layout-inline-start .label-text {
+  font-size: var(--text-md-size, 16px);
+  color: var(--color-neutral-900, #101828);
+  cursor: pointer;
+}
+
+.label-container.layout-inline-start .supporting-text {
+  font-size: var(--text-sm-size, 14px);
+  color: var(--color-neutral-500, #667085);
+}
+
+.label-container.layout-inline-space-between {
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-sm, 8px);
+}
+
+.label-container.layout-inline-space-between .label-wrapper {
+  flex-shrink: 0;
+}
+
+.label-container.layout-inline-space-between .label-content {
+  flex-grow: 1;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.label-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs, 4px);
+}
+
+.label-text {
+  font-family: inherit;
+  font-weight: 500;
+  font-size: var(--text-sm-size, 14px);
+  line-height: 1.43;
+  color: var(--color-neutral-700, #344054);
+  margin: 0;
+  cursor: default;
+}
+
+.label-text.disabled {
+  color: var(--color-neutral-400, #98a2b3);
+}
+
+.asterisk {
+  font-family: inherit;
+  font-weight: 400;
+  font-size: var(--text-sm-size, 14px);
+  line-height: 1.43;
+  color: var(--color-error-600, #dc2626);
+}
+
+.supporting-text {
+  font-family: inherit;
+  font-weight: 400;
+  font-size: var(--text-sm-size, 14px);
+  line-height: 1.43;
+  color: var(--color-neutral-500, #667085);
+  margin: 0;
+}
+
+.supporting-text.disabled {
+  color: var(--color-neutral-400, #98a2b3);
+}
+
+.label-content {
+  width: 100%;
+}
+
+.icon-with-tooltip {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.help-icon {
+  font-size: var(--text-xl-size, 20px);
+  color: var(--color-neutral-400, #98a2b3);
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.2s ease-in-out;
+}
+
+.help-icon:hover {
+  color: var(--color-neutral-500, #667085);
+}
+
+.disabled .help-icon {
+  color: var(--color-neutral-300, #d0d5dd);
+  cursor: not-allowed;
+}

package/collection/components/bh-label/bh-label.js

@@ -0,0 +1,302 @@
+import { h } from "@stencil/core";
+export class BhLabel {
+    el;
+    tooltipTimerRef;
+    /**
+     * The label text to display
+     */
+    label = '';
+    /**
+     * Layout style for the label container
+     * - block: Label above content (default for form fields)
+     * - inline: Label next to content (label first)
+     * - inline-start: Content next to label (content first, for checkboxes/radios)
+     * - inline-space-between: Label and content on opposite ends
+     */
+    layout = 'block';
+    /**
+     * The id of the form element the label is bound to.
+     * Use when the labeled element is not a child of this component.
+     */
+    for = '';
+    /**
+     * Supporting text displayed below the label (second line)
+     * for instructions or additional description
+     */
+    supportingText = '';
+    /**
+     * Whether to show the required asterisk
+     */
+    required = false;
+    /**
+     * Whether to show the help icon
+     */
+    showHelpIcon = false;
+    /**
+     * Tooltip text for the help icon
+     */
+    helpIconTooltip = 'Help';
+    /**
+     * Whether the label is disabled
+     */
+    disabled = false;
+    showHelpTooltip = false;
+    /**
+     * Emitted when the help icon is clicked
+     */
+    bhHelpClick;
+    disconnectedCallback() {
+        if (this.tooltipTimerRef) {
+            clearTimeout(this.tooltipTimerRef);
+        }
+    }
+    handleHelpIconMouseEnter = () => {
+        if (this.tooltipTimerRef) {
+            clearTimeout(this.tooltipTimerRef);
+        }
+        this.tooltipTimerRef = setTimeout(() => {
+            this.showHelpTooltip = true;
+        }, 300);
+    };
+    handleHelpIconMouseLeave = () => {
+        if (this.tooltipTimerRef) {
+            clearTimeout(this.tooltipTimerRef);
+            this.tooltipTimerRef = undefined;
+        }
+        this.showHelpTooltip = false;
+    };
+    handleHelpIconClick = () => {
+        this.bhHelpClick.emit();
+    };
+    render() {
+        const wrapperClasses = {
+            'label-container': true,
+            [`layout-${this.layout}`]: true,
+            'disabled': this.disabled,
+        };
+        const labelClasses = {
+            'label-text': true,
+            'disabled': this.disabled,
+        };
+        const supportingClasses = {
+            'supporting-text': true,
+            'disabled': this.disabled,
+        };
+        const labelWrapper = (h("div", { class: "label-wrapper" }, this.label && (h("label", { class: labelClasses, htmlFor: this.for || undefined }, this.label)), this.required && h("span", { class: "asterisk" }, "*"), this.showHelpIcon && (h("div", { class: "icon-with-tooltip" }, h("span", { class: "help-icon material-symbols-outlined", onClick: this.handleHelpIconClick, onMouseEnter: this.handleHelpIconMouseEnter, onMouseLeave: this.handleHelpIconMouseLeave }, "help"), h("bh-tooltip", { text: this.helpIconTooltip, position: "top", visible: this.showHelpTooltip })))));
+        const supportingTextEl = this.supportingText && (h("p", { class: supportingClasses }, this.supportingText));
+        const contentSlot = (h("div", { class: "label-content" }, h("slot", null)));
+        // For inline-start layout, content comes first (used for checkbox/radio)
+        if (this.layout === 'inline-start') {
+            return (h("div", { class: wrapperClasses }, contentSlot, h("div", { class: "label-text-group" }, labelWrapper, supportingTextEl)));
+        }
+        // Default layout: label wrapper first, then content
+        return (h("div", { class: wrapperClasses }, labelWrapper, supportingTextEl, contentSlot));
+    }
+    static get is() { return "bh-label"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-label.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-label.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text to display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LabelLayout",
+                    "resolved": "\"block\" | \"inline\" | \"inline-space-between\" | \"inline-start\"",
+                    "references": {
+                        "LabelLayout": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-label/bh-label.tsx",
+                            "id": "src/components/bh-label/bh-label.tsx::LabelLayout"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout style for the label container\n- block: Label above content (default for form fields)\n- inline: Label next to content (label first)\n- inline-start: Content next to label (content first, for checkboxes/radios)\n- inline-space-between: Label and content on opposite ends"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "'block'"
+            },
+            "for": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The id of the form element the label is bound to.\nUse when the labeled element is not a child of this component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "for",
+                "defaultValue": "''"
+            },
+            "supportingText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Supporting text displayed below the label (second line)\nfor instructions or additional description"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "supporting-text",
+                "defaultValue": "''"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the required asterisk"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "showHelpIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the help icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-help-icon",
+                "defaultValue": "false"
+            },
+            "helpIconTooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text for the help icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "help-icon-tooltip",
+                "defaultValue": "'Help'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the label is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showHelpTooltip": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhHelpClick",
+                "name": "bhHelpClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the help icon is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=bh-label.js.map

package/collection/components/bh-label/bh-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-label.js","sourceRoot":"","sources":["../../../src/components/bh-label/bh-label.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, State, Event, EventEmitter } from '@stencil/core';\n\nexport type LabelLayout = 'block' | 'inline' | 'inline-start' | 'inline-space-between';\n\n@Component({\n  tag: 'bh-label',\n  styleUrl: 'bh-label.css',\n  shadow: true,\n})\nexport class BhLabel {\n  @Element() el!: HTMLElement;\n\n  private tooltipTimerRef?: ReturnType<typeof setTimeout>;\n\n  /**\n   * The label text to display\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Layout style for the label container\n   * - block: Label above content (default for form fields)\n   * - inline: Label next to content (label first)\n   * - inline-start: Content next to label (content first, for checkboxes/radios)\n   * - inline-space-between: Label and content on opposite ends\n   */\n  @Prop() layout: LabelLayout = 'block';\n\n  /**\n   * The id of the form element the label is bound to.\n   * Use when the labeled element is not a child of this component.\n   */\n  @Prop() for: string = '';\n\n  /**\n   * Supporting text displayed below the label (second line)\n   * for instructions or additional description\n   */\n  @Prop() supportingText: string = '';\n\n  /**\n   * Whether to show the required asterisk\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether to show the help icon\n   */\n  @Prop() showHelpIcon: boolean = false;\n\n  /**\n   * Tooltip text for the help icon\n   */\n  @Prop() helpIconTooltip: string = 'Help';\n\n  /**\n   * Whether the label is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  @State() showHelpTooltip: boolean = false;\n\n  /**\n   * Emitted when the help icon is clicked\n   */\n  @Event() bhHelpClick!: EventEmitter<void>;\n\n  disconnectedCallback() {\n    if (this.tooltipTimerRef) {\n      clearTimeout(this.tooltipTimerRef);\n    }\n  }\n\n  private handleHelpIconMouseEnter = () => {\n    if (this.tooltipTimerRef) {\n      clearTimeout(this.tooltipTimerRef);\n    }\n    this.tooltipTimerRef = setTimeout(() => {\n      this.showHelpTooltip = true;\n    }, 300);\n  };\n\n  private handleHelpIconMouseLeave = () => {\n    if (this.tooltipTimerRef) {\n      clearTimeout(this.tooltipTimerRef);\n      this.tooltipTimerRef = undefined;\n    }\n    this.showHelpTooltip = false;\n  };\n\n  private handleHelpIconClick = () => {\n    this.bhHelpClick.emit();\n  };\n\n  render() {\n    const wrapperClasses = {\n      'label-container': true,\n      [`layout-${this.layout}`]: true,\n      'disabled': this.disabled,\n    };\n\n    const labelClasses = {\n      'label-text': true,\n      'disabled': this.disabled,\n    };\n\n    const supportingClasses = {\n      'supporting-text': true,\n      'disabled': this.disabled,\n    };\n\n    const labelWrapper = (\n      <div class=\"label-wrapper\">\n        {this.label && (\n          <label class={labelClasses} htmlFor={this.for || undefined}>\n            {this.label}\n          </label>\n        )}\n        {this.required && <span class=\"asterisk\">*</span>}\n        {this.showHelpIcon && (\n          <div class=\"icon-with-tooltip\">\n            <span\n              class=\"help-icon material-symbols-outlined\"\n              onClick={this.handleHelpIconClick}\n              onMouseEnter={this.handleHelpIconMouseEnter}\n              onMouseLeave={this.handleHelpIconMouseLeave}\n            >\n              help\n            </span>\n            <bh-tooltip\n              text={this.helpIconTooltip}\n              position=\"top\"\n              visible={this.showHelpTooltip}\n            />\n          </div>\n        )}\n      </div>\n    );\n\n    const supportingTextEl = this.supportingText && (\n      <p class={supportingClasses}>{this.supportingText}</p>\n    );\n\n    const contentSlot = (\n      <div class=\"label-content\">\n        <slot></slot>\n      </div>\n    );\n\n    // For inline-start layout, content comes first (used for checkbox/radio)\n    if (this.layout === 'inline-start') {\n      return (\n        <div class={wrapperClasses}>\n          {contentSlot}\n          <div class=\"label-text-group\">\n            {labelWrapper}\n            {supportingTextEl}\n          </div>\n        </div>\n      );\n    }\n\n    // Default layout: label wrapper first, then content\n    return (\n      <div class={wrapperClasses}>\n        {labelWrapper}\n        {supportingTextEl}\n        {contentSlot}\n      </div>\n    );\n  }\n}\n"]}

package/collection/components/bh-loader-spinner/bh-loader-spinner.css

@@ -0,0 +1,153 @@
+/* ==========================================================================
+   LOADER SPINNER COMPONENT - StencilJS
+   ========================================================================== */
+
+:host {
+  display: inline-block;
+}
+
+/* Overlay styles */
+.loader-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.loader-overlay-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+
+/* Container styles */
+.loader-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.loader-spinner {
+  position: relative;
+  display: inline-block;
+}
+
+/* Message styles */
+.loader-message {
+  color: var(--color-neutral-700);
+  font-size: var(--text-sm-size);
+  line-height: var(--text-sm-line);
+  font-weight: var(--weight-medium);
+  text-align: center;
+  margin-top: var(--spacing-xs);
+}
+
+.loader-overlay .loader-message {
+  color: var(--color-white);
+}
+
+/* =========================
+   GRADIENT VARIANT - BellhopOS Sidebar Style
+   ========================= */
+.spinner-gradient {
+  animation: gradient-rotate 2s linear infinite;
+  will-change: transform;
+}
+
+.gradient-svg {
+  display: block;
+  transform-origin: 50% 50%;
+}
+
+.gradient-path {
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
+  animation: gradient-dash 1.5s ease-in-out infinite;
+  transform-origin: 50% 50%;
+}
+
+/* Size variations for gradient */
+.size-sm .gradient-svg {
+  width: 20px;
+  height: 20px;
+}
+
+.size-sm .gradient-path {
+  stroke-width: 5;
+}
+
+.size-md .gradient-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.size-md .gradient-path {
+  stroke-width: 5;
+}
+
+.size-lg .gradient-svg {
+  width: 40px;
+  height: 40px;
+}
+
+.size-lg .gradient-path {
+  stroke-width: 5;
+}
+
+.size-xl .gradient-svg {
+  width: 60px;
+  height: 60px;
+}
+
+.size-xl .gradient-path {
+  stroke-width: 6;
+}
+
+@keyframes gradient-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes gradient-dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+/* Hover effects - Ultra smooth acceleration */
+.loader-container:hover .spinner-gradient {
+  animation-duration: 1s;
+}
+
+.loader-container:hover .gradient-path {
+  animation-duration: 0.6s;
+}
+
+/* Performance optimizations */
+.spinner-gradient {
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+.gradient-svg {
+  transform: translateZ(0);
+}