@actabldesign/bellhop-core 0.0.3

package/cjs/bh-input-text.cjs.entry.js

@@ -0,0 +1,192 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+var form = require('./form-9mbajZ3y.js');
+
+const bhInputTextCss = ":host{display:block;font-family:var(\n    --font-inter,\n    'Inter',\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif\n  )}.input-wrapper{display:flex;flex-direction:column;gap:var(--spacing-sm, 8px);width:100%}.input-container{display:flex;align-items:center;gap:var(--spacing-md, 12px);padding:var(--spacing-md, 12px);height:36px;width:100%;background:var(--color-white, #ffffff);border:1px solid var(--color-neutral-300, #d0d5dd);border-radius:var(--spacing-md, 8px);transition:all 0.2s ease-in-out;cursor:text;box-sizing:border-box}.input-container.input-container-with-leading{padding:var(--spacing-md, 12px) var(--spacing-lg, 16px)}.input-container.input-container-hover{border-color:var(--color-brand-500, #7f56d9)}.input-container.input-container-focused{border-color:var(--color-brand-500, #7f56d9);box-shadow:0 0 0 1px var(--color-brand-500, #7f56d9)}.input-container.input-container-disabled{opacity:0.5;cursor:not-allowed;background:var(--color-neutral-50, #f9fafb)}.input-container.input-container-error{border-color:var(--color-error-300, #fda29b)}.input-container.input-container-error.input-container-hover{border-color:var(--color-error-500, #f05250)}.input-container.input-container-error.input-container-focused{border-color:var(--color-brand-600, #6941c6)}.input-content{display:flex;align-items:center;gap:var(--spacing-md, 12px);flex:1;height:100%;min-width:0}.input-element{flex:1;height:100%;border:none;outline:none;background:transparent;font-family:inherit;font-weight:400;font-size:var(--text-sm-size, 14px);line-height:1.43;color:var(--color-neutral-800, #1d2939);min-width:60px;padding:0}.input-element:focus{outline:none;border:none;box-shadow:none}.input-element::placeholder{color:var(--color-neutral-500, #667085)}.input-element:disabled{cursor:not-allowed}.leading-icon,.trailing-icon{font-size:var(--text-xl-size, 20px);color:var(--color-neutral-500, #667085);user-select:none;flex-shrink:0;cursor:default;transition:color 0.2s ease-in-out}.input-container-focused .leading-icon,.input-container-focused .trailing-icon{color:var(--color-brand-600, #6941c6)}.hint-text{font-family:inherit;font-weight:400;font-size:var(--text-sm-size, 14px);line-height:1.43;color:var(--color-neutral-600, #475467)}.hint-text.hint-error{color:var(--color-error-600, #dc2626)}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:20px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}";
+
+const BhInputText = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhInput = index.createEvent(this, "bhInput");
+        this.bhFocus = index.createEvent(this, "bhFocus");
+        this.bhBlur = index.createEvent(this, "bhBlur");
+        this.bhHelpClick = index.createEvent(this, "bhHelpClick");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    internals;
+    inputEl;
+    /**
+     * The label for the input
+     */
+    label = 'Email';
+    /**
+     * Placeholder text
+     */
+    placeholder = 'fujiwara@act-hq.com';
+    /**
+     * Hint text shown below the input
+     */
+    hintText = '';
+    /**
+     * Whether to show the label
+     */
+    showLabel = true;
+    /**
+     * Whether to show hint text
+     */
+    showHintText = true;
+    /**
+     * Whether to show the help icon
+     */
+    showHelpIcon = false;
+    /**
+     * Whether to show a leading icon
+     */
+    showLeadingIcon = false;
+    /**
+     * Whether to show a trailing icon
+     */
+    showTrailingIcon = false;
+    /**
+     * Whether the field has an error
+     */
+    error = false;
+    /**
+     * Whether the input is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the field is required
+     */
+    required = false;
+    /**
+     * Tooltip text for the help icon
+     */
+    helpIconTooltip = 'Help';
+    /**
+     * Leading icon name (Material Symbols)
+     */
+    leadingIcon = 'mail';
+    /**
+     * Trailing icon name (Material Symbols)
+     */
+    trailingIcon = 'search';
+    /**
+     * The input value
+     */
+    value = '';
+    /**
+     * Name attribute for form submission
+     */
+    name = '';
+    /**
+     * Default value for form reset
+     */
+    defaultValue = '';
+    /**
+     * Custom validation message
+     */
+    validationMessage = '';
+    /**
+     * Input type (text, email, tel, url, etc.)
+     */
+    type = 'text';
+    /**
+     * Width of the input (e.g., '100%', '200px')
+     */
+    width = '';
+    /**
+     * Whether the input is read-only
+     */
+    readOnly = false;
+    /**
+     * Visual state of the input (for programmatic control)
+     */
+    state = 'default';
+    /**
+     * Track focus state
+     */
+    isFocused = false;
+    /**
+     * Track hover state
+     */
+    isHovered = false;
+    /**
+     * Emitted when the value changes
+     */
+    bhInput;
+    /**
+     * Emitted when the input gains focus
+     */
+    bhFocus;
+    /**
+     * Emitted when the input loses focus
+     */
+    bhBlur;
+    /**
+     * Emitted when the help icon is clicked
+     */
+    bhHelpClick;
+    handleInput = (event) => {
+        const target = event.target;
+        this.value = target.value;
+        this.bhInput.emit(this.value);
+        form.syncFormValue(this);
+        form.updateValidity(this.internals, this.inputEl, this.validationMessage);
+    };
+    componentDidLoad() {
+        form.syncFormValue(this);
+        form.updateValidity(this.internals, this.inputEl, this.validationMessage);
+    }
+    formResetCallback() {
+        this.value = this.defaultValue;
+        if (this.inputEl) {
+            this.inputEl.value = this.defaultValue;
+        }
+        form.syncFormValue(this);
+        form.updateValidity(this.internals, this.inputEl);
+    }
+    handleFocus = () => {
+        this.isFocused = true;
+        this.bhFocus.emit();
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+        this.bhBlur.emit();
+    };
+    handleMouseEnter = () => {
+        if (!this.isFocused) {
+            this.isHovered = true;
+        }
+    };
+    handleMouseLeave = () => {
+        this.isHovered = false;
+    };
+    handleHelpClick = () => {
+        this.bhHelpClick.emit();
+    };
+    render() {
+        const containerClasses = {
+            'input-container': true,
+            'input-container-focused': this.isFocused,
+            'input-container-hover': this.isHovered && !this.isFocused,
+            'input-container-error': this.error,
+            'input-container-disabled': this.disabled,
+            'input-container-with-leading': this.showLeadingIcon,
+        };
+        const wrapperStyle = this.width ? { width: this.width } : {};
+        return (index.h("div", { key: '8be476e7f8d85ed21706e81315a7fe40588ace3a', class: "input-wrapper", part: "wrapper", style: wrapperStyle }, index.h("bh-label", { key: '55bb3367d150c5db61d74ed25226d69438f66270', label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: this.handleHelpClick }, index.h("div", { key: '2169c7fc04983918bebcf5d5a70a29fe815bd505', class: containerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("div", { key: '3d6d5214a7ed55b056ffdd6a122f7fbdcf07bc6a', class: "input-content" }, this.showLeadingIcon && (index.h("span", { key: 'd965c766b8a9a5161eeee18bbce611743690d083', class: "material-symbols-outlined leading-icon" }, this.leadingIcon)), index.h("input", { key: '8e2f44e90820c1610668cb8b3a358db7ae9064e3', ref: (el) => (this.inputEl = el), type: this.type, class: "input-element", name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readOnly, required: this.required, "aria-label": this.label, "aria-describedby": this.showHintText && this.hintText ? 'hint-text' : undefined, "aria-invalid": String(this.error), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" }), this.showTrailingIcon && (index.h("span", { key: 'b46caa1cbec2f649ee5cb2a098e4f4241ab4eabb', class: "material-symbols-outlined trailing-icon" }, this.trailingIcon))))), this.showHintText && this.hintText && (index.h("div", { key: 'd33e25eda39c460df62e77a07dae8ebf69938f57', class: { 'hint-text': true, 'hint-error': this.error }, id: "hint-text" }, this.hintText))));
+    }
+    static get formAssociated() { return true; }
+};
+BhInputText.style = bhInputTextCss;
+
+exports.bh_input_text = BhInputText;
+//# sourceMappingURL=bh-input-text.entry.cjs.js.map

package/cjs/bh-input-text.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-input-text.entry.cjs.js","sources":["src/components/bh-input-text/bh-input-text.css?tag=bh-input-text&encapsulation=shadow","src/components/bh-input-text/bh-input-text.tsx"],"sourcesContent":[":host {\n  display: block;\n  font-family: var(\n    --font-inter,\n    'Inter',\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif\n  );\n}\n\n/* Input Wrapper */\n.input-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-sm, 8px);\n  width: 100%;\n}\n\n/* Input Container */\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md, 12px);\n  padding: var(--spacing-md, 12px);\n  height: 36px;\n  width: 100%;\n  background: var(--color-white, #ffffff);\n  border: 1px solid var(--color-neutral-300, #d0d5dd);\n  border-radius: var(--spacing-md, 8px);\n  transition: all 0.2s ease-in-out;\n  cursor: text;\n  box-sizing: border-box;\n}\n\n.input-container.input-container-with-leading {\n  padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);\n}\n\n/* Input States */\n.input-container.input-container-hover {\n  border-color: var(--color-brand-500, #7f56d9);\n}\n\n.input-container.input-container-focused {\n  border-color: var(--color-brand-500, #7f56d9);\n  box-shadow: 0 0 0 1px var(--color-brand-500, #7f56d9);\n}\n\n.input-container.input-container-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  background: var(--color-neutral-50, #f9fafb);\n}\n\n.input-container.input-container-error {\n  border-color: var(--color-error-300, #fda29b);\n}\n\n.input-container.input-container-error.input-container-hover {\n  border-color: var(--color-error-500, #f05250);\n}\n\n.input-container.input-container-error.input-container-focused {\n  border-color: var(--color-brand-600, #6941c6);\n}\n\n/* Input Content */\n.input-content {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md, 12px);\n  flex: 1;\n  height: 100%;\n  min-width: 0;\n}\n\n/* Input Element */\n.input-element {\n  flex: 1;\n  height: 100%;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-family: inherit;\n  font-weight: 400;\n  font-size: var(--text-sm-size, 14px);\n  line-height: 1.43;\n  color: var(--color-neutral-800, #1d2939);\n  min-width: 60px;\n  padding: 0;\n}\n\n.input-element:focus {\n  outline: none;\n  border: none;\n  box-shadow: none;\n}\n\n.input-element::placeholder {\n  color: var(--color-neutral-500, #667085);\n}\n\n.input-element:disabled {\n  cursor: not-allowed;\n}\n\n/* Icons */\n.leading-icon,\n.trailing-icon {\n  font-size: var(--text-xl-size, 20px);\n  color: var(--color-neutral-500, #667085);\n  user-select: none;\n  flex-shrink: 0;\n  cursor: default;\n  transition: color 0.2s ease-in-out;\n}\n\n.input-container-focused .leading-icon,\n.input-container-focused .trailing-icon {\n  color: var(--color-brand-600, #6941c6);\n}\n\n/* Hint Text */\n.hint-text {\n  font-family: inherit;\n  font-weight: 400;\n  font-size: var(--text-sm-size, 14px);\n  line-height: 1.43;\n  color: var(--color-neutral-600, #475467);\n}\n\n.hint-text.hint-error {\n  color: var(--color-error-600, #dc2626);\n}\n\n/* Material Symbols */\n.material-symbols-outlined {\n  font-family: 'Material Symbols Outlined';\n  font-weight: normal;\n  font-style: normal;\n  font-size: 20px;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, AttachInternals } from '@stencil/core';\nimport { syncFormValue, updateValidity } from '../../utils/form';\n\n@Component({\n  tag: 'bh-input-text',\n  styleUrl: 'bh-input-text.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class BhInputText {\n  @AttachInternals() internals!: ElementInternals;\n\n  private inputEl?: HTMLInputElement;\n  /**\n   * The label for the input\n   */\n  @Prop() label: string = 'Email';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string = 'fujiwara@act-hq.com';\n\n  /**\n   * Hint text shown below the input\n   */\n  @Prop() hintText: string = '';\n\n  /**\n   * Whether to show the label\n   */\n  @Prop() showLabel: boolean = true;\n\n  /**\n   * Whether to show hint text\n   */\n  @Prop() showHintText: boolean = true;\n\n  /**\n   * Whether to show the help icon\n   */\n  @Prop() showHelpIcon: boolean = false;\n\n  /**\n   * Whether to show a leading icon\n   */\n  @Prop() showLeadingIcon: boolean = false;\n\n  /**\n   * Whether to show a trailing icon\n   */\n  @Prop() showTrailingIcon: boolean = false;\n\n  /**\n   * Whether the field has an error\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   * Tooltip text for the help icon\n   */\n  @Prop() helpIconTooltip: string = 'Help';\n\n  /**\n   * Leading icon name (Material Symbols)\n   */\n  @Prop() leadingIcon: string = 'mail';\n\n  /**\n   * Trailing icon name (Material Symbols)\n   */\n  @Prop() trailingIcon: string = 'search';\n\n  /**\n   * The input value\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Name attribute for form submission\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Default value for form reset\n   */\n  @Prop() defaultValue: string = '';\n\n  /**\n   * Custom validation message\n   */\n  @Prop() validationMessage: string = '';\n\n  /**\n   * Input type (text, email, tel, url, etc.)\n   */\n  @Prop() type: string = 'text';\n\n  /**\n   * Width of the input (e.g., '100%', '200px')\n   */\n  @Prop() width: string = '';\n\n  /**\n   * Whether the input is read-only\n   */\n  @Prop() readOnly: boolean = false;\n\n  /**\n   * Visual state of the input (for programmatic control)\n   */\n  @Prop() state: 'default' | 'error' | 'disabled' | 'focus' | 'filled' | 'hover' = 'default';\n\n  /**\n   * Track focus state\n   */\n  @State() isFocused: boolean = false;\n\n  /**\n   * Track hover state\n   */\n  @State() isHovered: boolean = false;\n\n  /**\n   * Emitted when the value changes\n   */\n  @Event() bhInput!: EventEmitter<string>;\n\n  /**\n   * Emitted when the input gains focus\n   */\n  @Event() bhFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus\n   */\n  @Event() bhBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the help icon is clicked\n   */\n  @Event() bhHelpClick!: EventEmitter<void>;\n\n  private handleInput = (event: Event): void => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.bhInput.emit(this.value);\n    syncFormValue(this);\n    updateValidity(this.internals, this.inputEl, this.validationMessage);\n  };\n\n  componentDidLoad() {\n    syncFormValue(this);\n    updateValidity(this.internals, this.inputEl, this.validationMessage);\n  }\n\n  formResetCallback() {\n    this.value = this.defaultValue;\n    if (this.inputEl) {\n      this.inputEl.value = this.defaultValue;\n    }\n    syncFormValue(this);\n    updateValidity(this.internals, this.inputEl);\n  }\n\n  private handleFocus = (): void => {\n    this.isFocused = true;\n    this.bhFocus.emit();\n  };\n\n  private handleBlur = (): void => {\n    this.isFocused = false;\n    this.bhBlur.emit();\n  };\n\n  private handleMouseEnter = (): void => {\n    if (!this.isFocused) {\n      this.isHovered = true;\n    }\n  };\n\n  private handleMouseLeave = (): void => {\n    this.isHovered = false;\n  };\n\n  private handleHelpClick = (): void => {\n    this.bhHelpClick.emit();\n  };\n\n  render() {\n    const containerClasses = {\n      'input-container': true,\n      'input-container-focused': this.isFocused,\n      'input-container-hover': this.isHovered && !this.isFocused,\n      'input-container-error': this.error,\n      'input-container-disabled': this.disabled,\n      'input-container-with-leading': this.showLeadingIcon,\n    };\n\n    const wrapperStyle = this.width ? { width: this.width } : {};\n\n    return (\n      <div class=\"input-wrapper\" part=\"wrapper\" style={wrapperStyle}>\n        <bh-label\n          label={this.showLabel ? this.label : ''}\n          required={this.required}\n          showHelpIcon={this.showHelpIcon}\n          helpIconTooltip={this.helpIconTooltip}\n          disabled={this.disabled}\n          onBhHelpClick={this.handleHelpClick}\n        >\n          <div\n            class={containerClasses}\n            onMouseEnter={this.handleMouseEnter}\n            onMouseLeave={this.handleMouseLeave}\n          >\n            <div class=\"input-content\">\n              {this.showLeadingIcon && (\n                <span class=\"material-symbols-outlined leading-icon\">\n                  {this.leadingIcon}\n                </span>\n              )}\n              <input\n                ref={(el) => (this.inputEl = el)}\n                type={this.type}\n                class=\"input-element\"\n                name={this.name}\n                value={this.value}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                readOnly={this.readOnly}\n                required={this.required}\n                aria-label={this.label}\n                aria-describedby={\n                  this.showHintText && this.hintText ? 'hint-text' : undefined\n                }\n                aria-invalid={String(this.error)}\n                onInput={this.handleInput}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                part=\"input\"\n              />\n              {this.showTrailingIcon && (\n                <span class=\"material-symbols-outlined trailing-icon\">\n                  {this.trailingIcon}\n                </span>\n              )}\n            </div>\n          </div>\n        </bh-label>\n\n        {this.showHintText && this.hintText && (\n          <div\n            class={{ 'hint-text': true, 'hint-error': this.error }}\n            id=\"hint-text\"\n          >\n            {this.hintText}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"names":["syncFormValue","updateValidity","h"],"mappings":"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"}

package/cjs/bh-input-verification.cjs.entry.js

@@ -0,0 +1,203 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhInputVerificationCss = ":host{display:block}.input-verification-wrapper{display:flex;flex-direction:column;gap:var(--spacing-sm);width:fit-content}.input-verification-container{display:flex;align-items:center;gap:var(--spacing-sm)}.verification-input{width:64px;height:64px;padding:0;border:1px solid var(--color-neutral-300);border-radius:var(--radius-lg);background-color:var(--color-white);font-family:var(--font-inter);font-size:3rem;font-weight:var(--weight-medium);line-height:1;color:var(--color-neutral-900);transition:all 150ms ease;outline:none;box-sizing:border-box}.verification-input.size-sm{width:64px;height:64px;font-size:3rem;border-radius:var(--radius-lg);padding:var(--spacing-xl) var(--spacing-md)}.verification-input.size-md{width:80px;height:80px;font-size:3rem;border-radius:var(--radius-lg);padding:var(--spacing-2xl) var(--spacing-3xl)}.verification-input.size-lg{width:96px;height:96px;font-size:3.75rem;border-radius:var(--radius-lg);padding:var(--spacing-3xl) var(--spacing-4xl)}.verification-input:hover:not(:disabled){border-color:var(--color-neutral-400)}.verification-input:focus{border-color:var(--color-brand-300);box-shadow:0 0 0 4px var(--color-brand-100)}.verification-input.error{border-color:var(--color-error-300)}.verification-input.error:focus{border-color:var(--color-error-300);box-shadow:0 0 0 4px var(--color-error-100)}.verification-input:disabled{background-color:var(--color-neutral-50);border-color:var(--color-neutral-300);color:var(--color-neutral-400);cursor:not-allowed}.separator{font-family:var(--font-inter);font-size:1.5rem;font-weight:var(--weight-medium);color:var(--color-neutral-400);margin:0 var(--spacing-xs);line-height:1}.separator.size-sm{font-size:1.5rem}.separator.size-md{font-size:1.5rem}.separator.size-lg{font-size:1.875rem}.hint-text{font-family:var(--font-inter);font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-600);margin-top:var(--spacing-xs)}.hint-text.error{color:var(--color-error-600)}.verification-input::placeholder{color:var(--color-neutral-400);opacity:1;font-size:inherit;font-weight:var(--weight-regular)}";
+
+const BhInputVerification = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhChange = index.createEvent(this, "bhChange");
+        this.bhComplete = index.createEvent(this, "bhComplete");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Size variant of the input fields
+     */
+    size = 'md';
+    /**
+     * Number of digits (4 or 6)
+     */
+    digits = 4;
+    /**
+     * Label text for the input
+     */
+    label = 'Secure code';
+    /**
+     * Whether to show the label
+     */
+    showLabel = true;
+    /**
+     * Hint text displayed below the inputs
+     */
+    hintText = 'This is a hint text to help user.';
+    /**
+     * Whether to show the hint text
+     */
+    showHintText = true;
+    /**
+     * Whether the input is in an error state
+     */
+    error = false;
+    /**
+     * Whether the input is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the field is required
+     */
+    required = false;
+    /**
+     * Whether to show the separator for 6-digit codes
+     */
+    showSeparator = true;
+    /**
+     * Placeholder character for empty inputs
+     */
+    placeholder = '';
+    /**
+     * Width of the component
+     */
+    width = '';
+    /**
+     * Current value of the verification code
+     */
+    value = '';
+    values = [];
+    inputRefs = [];
+    /**
+     * Event emitted when the value changes
+     */
+    bhChange;
+    /**
+     * Event emitted when all digits are filled
+     */
+    bhComplete;
+    watchValue(newValue) {
+        const newValues = newValue.split('').concat(Array(this.digits).fill('')).slice(0, this.digits);
+        this.values = newValues;
+    }
+    watchDigits() {
+        this.values = Array(this.digits).fill('');
+    }
+    componentWillLoad() {
+        this.values = this.value
+            ? this.value.split('').concat(Array(this.digits).fill('')).slice(0, this.digits)
+            : Array(this.digits).fill('');
+    }
+    componentDidLoad() {
+        // Focus first input on mount if not disabled
+        if (!this.disabled) {
+            const firstInput = this.el.shadowRoot?.querySelector('input');
+            firstInput?.focus();
+        }
+    }
+    updateValues(newValues) {
+        this.values = newValues;
+        const newValue = newValues.join('');
+        this.value = newValue;
+        this.bhChange.emit(newValue);
+        // Check if all fields are filled
+        if (newValues.every(val => val !== '')) {
+            this.bhComplete.emit(newValue);
+        }
+    }
+    handleInputChange(index, event) {
+        const input = event.target;
+        const inputValue = input.value;
+        // Only allow single digits
+        const digit = inputValue.replace(/\D/g, '').slice(-1);
+        const newValues = [...this.values];
+        newValues[index] = digit;
+        this.updateValues(newValues);
+        // Auto-advance to next input if digit entered
+        if (digit && index < this.digits - 1) {
+            const nextInput = this.el.shadowRoot?.querySelectorAll('input')[index + 1];
+            nextInput?.focus();
+        }
+    }
+    handleKeyDown(index, event) {
+        if (event.key === 'Backspace') {
+            event.preventDefault();
+            const newValues = [...this.values];
+            if (this.values[index]) {
+                // Clear current field
+                newValues[index] = '';
+                this.updateValues(newValues);
+            }
+            else if (index > 0) {
+                // Move to previous field and clear it
+                newValues[index - 1] = '';
+                this.updateValues(newValues);
+                const prevInput = this.el.shadowRoot?.querySelectorAll('input')[index - 1];
+                prevInput?.focus();
+            }
+        }
+        else if (event.key === 'ArrowLeft' && index > 0) {
+            event.preventDefault();
+            const prevInput = this.el.shadowRoot?.querySelectorAll('input')[index - 1];
+            prevInput?.focus();
+        }
+        else if (event.key === 'ArrowRight' && index < this.digits - 1) {
+            event.preventDefault();
+            const nextInput = this.el.shadowRoot?.querySelectorAll('input')[index + 1];
+            nextInput?.focus();
+        }
+        else if (event.key >= '0' && event.key <= '9') {
+            event.preventDefault();
+            const newValues = [...this.values];
+            newValues[index] = event.key;
+            this.updateValues(newValues);
+            // Auto-advance to next input
+            if (index < this.digits - 1) {
+                const nextInput = this.el.shadowRoot?.querySelectorAll('input')[index + 1];
+                nextInput?.focus();
+            }
+        }
+    }
+    handlePaste(event) {
+        event.preventDefault();
+        const pastedText = event.clipboardData?.getData('text') || '';
+        const pastedDigits = pastedText.replace(/\D/g, '').slice(0, this.digits);
+        if (pastedDigits) {
+            const newValues = pastedDigits.split('').concat(Array(this.digits).fill('')).slice(0, this.digits);
+            this.updateValues(newValues);
+            // Focus on the next empty input or last input
+            const nextEmptyIndex = newValues.findIndex(val => val === '');
+            const focusIndex = nextEmptyIndex === -1 ? this.digits - 1 : Math.min(nextEmptyIndex, this.digits - 1);
+            const inputToFocus = this.el.shadowRoot?.querySelectorAll('input')[focusIndex];
+            inputToFocus?.focus();
+        }
+    }
+    handleFocus(event) {
+        const input = event.target;
+        input.select();
+    }
+    renderInputs() {
+        const inputs = [];
+        for (let i = 0; i < this.digits; i++) {
+            // Add separator for 6-digit codes
+            if (this.digits === 6 && i === 3 && this.showSeparator) {
+                inputs.push(index.h("span", { key: "separator", class: { 'separator': true, [`size-${this.size}`]: true } }, "-"));
+            }
+            inputs.push(index.h("input", { key: i, type: "text", inputmode: "numeric", pattern: "[0-9]", maxLength: 1, value: this.values[i] || '', placeholder: this.placeholder && i < this.placeholder.length ? this.placeholder[i] : '', disabled: this.disabled, class: {
+                    'verification-input': true,
+                    [`size-${this.size}`]: true,
+                    'error': this.error,
+                }, onInput: (e) => this.handleInputChange(i, e), onKeyDown: (e) => this.handleKeyDown(i, e), onPaste: (e) => this.handlePaste(e), onFocus: (e) => this.handleFocus(e), "aria-label": `Digit ${i + 1} of ${this.digits}` }));
+        }
+        return inputs;
+    }
+    render() {
+        const wrapperStyle = this.width ? { width: this.width } : {};
+        return (index.h("div", { key: 'a7068d5407c0d09021313fc6103b5073ca74f628', class: "input-verification-wrapper", style: wrapperStyle }, index.h("bh-label", { key: '7b62a57a432f3d8f4df7befb87f27a09afeb51fd', label: this.showLabel ? this.label : '', required: this.required, disabled: this.disabled }, index.h("div", { key: '99cb7311f66b69731dc1d286bd96662c4035affb', class: "input-verification-container" }, this.renderInputs())), this.showHintText && this.hintText && (index.h("div", { key: '5fbfc4b1f8c3a251a0d879b2554c390126a391c1', class: { 'hint-text': true, 'error': this.error } }, this.hintText))));
+    }
+    static get watchers() { return {
+        "value": ["watchValue"],
+        "digits": ["watchDigits"]
+    }; }
+};
+BhInputVerification.style = bhInputVerificationCss;
+
+exports.bh_input_verification = BhInputVerification;
+//# sourceMappingURL=bh-input-verification.entry.cjs.js.map

package/cjs/bh-input-verification.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-input-verification.entry.cjs.js","sources":["src/components/bh-input-verification/bh-input-verification.css?tag=bh-input-verification&encapsulation=shadow","src/components/bh-input-verification/bh-input-verification.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.input-verification-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-sm);\n  width: fit-content;\n}\n\n.input-verification-container {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-sm);\n}\n\n.verification-input {\n  width: 64px;\n  height: 64px;\n  padding: 0;\n  border: 1px solid var(--color-neutral-300);\n  border-radius: var(--radius-lg);\n  background-color: var(--color-white);\n  font-family: var(--font-inter);\n  font-size: 3rem;\n  font-weight: var(--weight-medium);\n  line-height: 1;\n  color: var(--color-neutral-900);\n  transition: all 150ms ease;\n  outline: none;\n  box-sizing: border-box;\n}\n\n/* Size variants */\n.verification-input.size-sm {\n  width: 64px;\n  height: 64px;\n  font-size: 3rem;\n  border-radius: var(--radius-lg);\n  padding: var(--spacing-xl) var(--spacing-md);\n}\n\n.verification-input.size-md {\n  width: 80px;\n  height: 80px;\n  font-size: 3rem;\n  border-radius: var(--radius-lg);\n  padding: var(--spacing-2xl) var(--spacing-3xl);\n}\n\n.verification-input.size-lg {\n  width: 96px;\n  height: 96px;\n  font-size: 3.75rem;\n  border-radius: var(--radius-lg);\n  padding: var(--spacing-3xl) var(--spacing-4xl);\n}\n\n/* States */\n.verification-input:hover:not(:disabled) {\n  border-color: var(--color-neutral-400);\n}\n\n.verification-input:focus {\n  border-color: var(--color-brand-300);\n  box-shadow: 0 0 0 4px var(--color-brand-100);\n}\n\n.verification-input.error {\n  border-color: var(--color-error-300);\n}\n\n.verification-input.error:focus {\n  border-color: var(--color-error-300);\n  box-shadow: 0 0 0 4px var(--color-error-100);\n}\n\n.verification-input:disabled {\n  background-color: var(--color-neutral-50);\n  border-color: var(--color-neutral-300);\n  color: var(--color-neutral-400);\n  cursor: not-allowed;\n}\n\n.separator {\n  font-family: var(--font-inter);\n  font-size: 1.5rem;\n  font-weight: var(--weight-medium);\n  color: var(--color-neutral-400);\n  margin: 0 var(--spacing-xs);\n  line-height: 1;\n}\n\n.separator.size-sm {\n  font-size: 1.5rem;\n}\n\n.separator.size-md {\n  font-size: 1.5rem;\n}\n\n.separator.size-lg {\n  font-size: 1.875rem;\n}\n\n.hint-text {\n  font-family: var(--font-inter);\n  font-size: var(--text-sm-size);\n  font-weight: var(--weight-regular);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-600);\n  margin-top: var(--spacing-xs);\n}\n\n.hint-text.error {\n  color: var(--color-error-600);\n}\n\n.verification-input::placeholder {\n  color: var(--color-neutral-400);\n  opacity: 1;\n  font-size: inherit;\n  font-weight: var(--weight-regular);\n}\n","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"],"names":["h"],"mappings":"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"}

package/cjs/bh-label-DBqucnaO.js

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

package/cjs/bh-label-DBqucnaO.js.map

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

package/cjs/bh-label.bh-tooltip.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-label.bh-tooltip.entry.cjs.js","sources":["src/components/bh-tooltip/bh-tooltip.css?tag=bh-tooltip&encapsulation=shadow","src/components/bh-tooltip/bh-tooltip.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-TOOLTIP COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n.tooltip {\n  position: absolute;\n  z-index: 10000;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n  white-space: nowrap;\n}\n\n.tooltip-visible {\n  opacity: 1;\n}\n\n.tooltip-content {\n  background-color: var(--color-neutral-900);\n  color: var(--color-white);\n  font-family: var(--font-inter);\n  font-weight: var(--weight-semibold);\n  font-size: 12px;\n  line-height: 1.5em;\n  padding: 8px 12px;\n  border-radius: 8px;\n  box-shadow: var(--shadow-popover);\n  position: relative;\n}\n\n/* Position variants */\n.tooltip-top {\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-bottom: 6px;\n}\n\n.tooltip-bottom {\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-top: 6px;\n}\n\n.tooltip-left {\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-right: 6px;\n}\n\n.tooltip-right {\n  left: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-left: 6px;\n}\n\n/* Multiline support */\n.tooltip.multiline {\n  white-space: normal;\n}\n\n.tooltip.multiline .tooltip-content {\n  max-width: 240px;\n}\n\n/* Icon variant - positioning adjustments for tooltips on icons */\n.tooltip-icon.tooltip-top {\n  margin-bottom: 4px;\n}\n\n.tooltip-icon.tooltip-bottom {\n  margin-top: 4px;\n}\n\n.tooltip-icon.tooltip-left {\n  margin-right: 4px;\n}\n\n.tooltip-icon.tooltip-right {\n  margin-left: 4px;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipVariant = 'default' | 'icon';\n\n@Component({\n  tag: 'bh-tooltip',\n  styleUrl: 'bh-tooltip.css',\n  shadow: true,\n})\nexport class BhTooltip {\n  /**\n   * The tooltip text content\n   */\n  @Prop() text: string = '';\n\n  /**\n   * Position of the tooltip relative to its target\n   */\n  @Prop() position: TooltipPosition = 'top';\n\n  /**\n   * Variant of the tooltip (default or icon)\n   */\n  @Prop() variant: TooltipVariant = 'default';\n\n  /**\n   * Whether the tooltip is visible\n   */\n  @Prop() visible: boolean = false;\n\n  /**\n   * Maximum width in pixels (enables multiline if > 240)\n   */\n  @Prop() maxWidth?: number;\n\n  render() {\n    const tooltipClasses = {\n      'tooltip': true,\n      [`tooltip-${this.position}`]: true,\n      [`tooltip-${this.variant}`]: true,\n      'tooltip-visible': this.visible,\n      'multiline': this.maxWidth !== undefined && this.maxWidth > 240,\n    };\n\n    const tooltipStyles = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n    return (\n      <div class={tooltipClasses} style={tooltipStyles} role=\"tooltip\" part=\"tooltip\">\n        <div class=\"tooltip-content\">{this.text}</div>\n      </div>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;;AAAA,MAAM,YAAY,GAAG,ggCAAggC;;MCUxgC,SAAS,GAAA,MAAA;;;;AACpB;;AAEG;IACK,IAAI,GAAW,EAAE;AAEzB;;AAEG;IACK,QAAQ,GAAoB,KAAK;AAEzC;;AAEG;IACK,OAAO,GAAmB,SAAS;AAE3C;;AAEG;IACK,OAAO,GAAY,KAAK;AAEhC;;AAEG;AACK,IAAA,QAAQ;IAEhB,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,CAAC,WAAW,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;AAClC,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;YACjC,iBAAiB,EAAE,IAAI,CAAC,OAAO;YAC/B,WAAW,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,GAAG,GAAG;SAChE;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,EAAE,QAAQ,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAA,EAAA,CAAI,EAAE,GAAG,EAAE;QAE7E,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EAC7EA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAE,EAAA,IAAI,CAAC,IAAI,CAAO,CAC1C;;;;;;;;"}