@actabldesign/bellhop-core 0.0.3 → 0.0.4

package/dist/components/p-BOk69MBi.js

@@ -0,0 +1,123 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-ChfLhYiJ.js';
+
+const bhCheckboxGroupCss = ":host{display:block}.checkbox-group{display:flex;flex-direction:column;gap:var(--spacing-lg);width:100%}";
+
+const BhCheckboxGroup = /*@__PURE__*/ proxyCustomElement(class BhCheckboxGroup extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhChange = createEvent(this, "bhChange");
+    }
+    get el() { return this; }
+    /**
+     * The type of input controls in the group
+     */
+    type = 'checkbox';
+    /**
+     * The name for radio group (required for radio type)
+     */
+    name = '';
+    /**
+     * Current selected value(s)
+     * For checkbox: array of values
+     * For radio: single value string
+     */
+    value = [];
+    /**
+     * Whether all items in the group are disabled
+     */
+    disabled = false;
+    /**
+     * Emitted when selection changes
+     */
+    bhChange;
+    handleItemChange(event) {
+        event.stopPropagation();
+        const { value: itemValue, checked } = event.detail;
+        if (this.type === 'radio' || this.type === 'icon-simple') {
+            // Radio behavior: only one can be selected
+            if (checked) {
+                this.value = itemValue;
+                this.updateChildItems();
+                this.bhChange.emit(this.value);
+            }
+        }
+        else {
+            // Checkbox behavior: multiple can be selected
+            const currentValues = Array.isArray(this.value) ? [...this.value] : [];
+            if (checked) {
+                if (!currentValues.includes(itemValue)) {
+                    currentValues.push(itemValue);
+                }
+            }
+            else {
+                const index = currentValues.indexOf(itemValue);
+                if (index > -1) {
+                    currentValues.splice(index, 1);
+                }
+            }
+            this.value = currentValues;
+            this.bhChange.emit(this.value);
+        }
+    }
+    componentDidLoad() {
+        this.updateChildItems();
+    }
+    updateChildItems() {
+        const items = this.el.querySelectorAll('bh-checkbox-group-item');
+        items.forEach((item) => {
+            // Set type from group
+            item.type = this.type;
+            // Set name for radio groups
+            if (this.type === 'radio' || this.type === 'icon-simple') {
+                item.name = this.name;
+            }
+            // Set disabled state
+            if (this.disabled) {
+                item.disabled = true;
+            }
+            // Update selection state
+            if (this.type === 'radio' || this.type === 'icon-simple') {
+                item.selected = item.value === this.value;
+                item.checked = false;
+            }
+            else {
+                const values = Array.isArray(this.value) ? this.value : [];
+                item.checked = values.includes(item.value);
+                item.selected = false;
+            }
+        });
+    }
+    render() {
+        const role = this.type === 'radio' || this.type === 'icon-simple' ? 'radiogroup' : 'group';
+        return (h(Host, { key: '14f895b1d0b5d6ba32a67ce3651c327d29d0770c' }, h("div", { key: '13b9e0179910941c223643945735fb66b699c6eb', class: "checkbox-group", role: role, "aria-disabled": this.disabled ? 'true' : null }, h("slot", { key: '6b28955878dca08ac7549e31130eb69a0880f2ae' }))));
+    }
+    static get style() { return bhCheckboxGroupCss; }
+}, [769, "bh-checkbox-group", {
+        "type": [1],
+        "name": [1],
+        "value": [1025],
+        "disabled": [4]
+    }, [[0, "bhItemChange", "handleItemChange"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-checkbox-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-checkbox-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhCheckboxGroup);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhCheckboxGroup as B, defineCustomElement as d };
+//# sourceMappingURL=p-BOk69MBi.js.map
+
+//# sourceMappingURL=p-BOk69MBi.js.map

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

@@ -0,0 +1 @@
+{"file":"p-BOk69MBi.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-checkbox-group/bh-checkbox-group.css?tag=bh-checkbox-group&encapsulation=shadow","src/components/bh-checkbox-group/bh-checkbox-group.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.checkbox-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-lg);\n  width: 100%;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host, Listen, Element } from '@stencil/core';\n\nexport type CheckboxGroupType = 'checkbox' | 'radio' | 'icon-simple';\n\n@Component({\n  tag: 'bh-checkbox-group',\n  styleUrl: 'bh-checkbox-group.css',\n  shadow: true,\n})\nexport class BhCheckboxGroup {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The type of input controls in the group\n   */\n  @Prop() type: CheckboxGroupType = 'checkbox';\n\n  /**\n   * The name for radio group (required for radio type)\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Current selected value(s)\n   * For checkbox: array of values\n   * For radio: single value string\n   */\n  @Prop({ mutable: true }) value: string | string[] = [];\n\n  /**\n   * Whether all items in the group are disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Emitted when selection changes\n   */\n  @Event() bhChange!: EventEmitter<string | string[]>;\n\n  @Listen('bhItemChange')\n  handleItemChange(event: CustomEvent<{ value: string; checked: boolean }>) {\n    event.stopPropagation();\n    const { value: itemValue, checked } = event.detail;\n\n    if (this.type === 'radio' || this.type === 'icon-simple') {\n      // Radio behavior: only one can be selected\n      if (checked) {\n        this.value = itemValue;\n        this.updateChildItems();\n        this.bhChange.emit(this.value);\n      }\n    } else {\n      // Checkbox behavior: multiple can be selected\n      const currentValues = Array.isArray(this.value) ? [...this.value] : [];\n\n      if (checked) {\n        if (!currentValues.includes(itemValue)) {\n          currentValues.push(itemValue);\n        }\n      } else {\n        const index = currentValues.indexOf(itemValue);\n        if (index > -1) {\n          currentValues.splice(index, 1);\n        }\n      }\n\n      this.value = currentValues;\n      this.bhChange.emit(this.value);\n    }\n  }\n\n  componentDidLoad() {\n    this.updateChildItems();\n  }\n\n  private updateChildItems() {\n    const items = this.el.querySelectorAll('bh-checkbox-group-item');\n\n    items.forEach((item: HTMLBhCheckboxGroupItemElement) => {\n      // Set type from group\n      item.type = this.type;\n\n      // Set name for radio groups\n      if (this.type === 'radio' || this.type === 'icon-simple') {\n        item.name = this.name;\n      }\n\n      // Set disabled state\n      if (this.disabled) {\n        item.disabled = true;\n      }\n\n      // Update selection state\n      if (this.type === 'radio' || this.type === 'icon-simple') {\n        item.selected = item.value === this.value;\n        item.checked = false;\n      } else {\n        const values = Array.isArray(this.value) ? this.value : [];\n        item.checked = values.includes(item.value);\n        item.selected = false;\n      }\n    });\n  }\n\n  render() {\n    const role = this.type === 'radio' || this.type === 'icon-simple' ? 'radiogroup' : 'group';\n\n    return (\n      <Host>\n        <div\n          class=\"checkbox-group\"\n          role={role}\n          aria-disabled={this.disabled ? 'true' : null}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BZELvMID.js

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

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

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

package/dist/components/p-BaLh9-zk.js

@@ -0,0 +1,56 @@
+import { p as proxyCustomElement, H, h } from './p-ChfLhYiJ.js';
+
+const bhSkeletonLoaderCss = ":host{display:inline-block}.skeleton{display:inline-block;background:linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.06) 25%,\n    rgba(0, 0, 0, 0.03) 50%,\n    rgba(0, 0, 0, 0.06) 75%\n  );background-size:400% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-sm);line-height:1}.skeleton-circle{border-radius:50%}.skeleton::before{content:'\\00a0'}@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}";
+
+const BhSkeletonLoader = /*@__PURE__*/ proxyCustomElement(class BhSkeletonLoader extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    /**
+     * Width of the skeleton (CSS value)
+     */
+    width = '100%';
+    /**
+     * Height of the skeleton (CSS value)
+     */
+    height = '1em';
+    /**
+     * Whether the skeleton should be circular
+     */
+    circle = false;
+    render() {
+        const skeletonClasses = {
+            'skeleton': true,
+            'skeleton-circle': this.circle,
+        };
+        return (h("span", { key: 'db0a5cf09470b6bd54d8e8aa8f9a19e35bc0f949', class: skeletonClasses, style: { width: this.width, height: this.height }, role: "status", "aria-live": "polite", "aria-busy": "true", part: "skeleton" }, h("span", { key: '2e21ff7d34283aaef05044985e05a565df7f06d7', class: "visually-hidden" }, "Loading...")));
+    }
+    static get style() { return bhSkeletonLoaderCss; }
+}, [769, "bh-skeleton-loader", {
+        "width": [1],
+        "height": [1],
+        "circle": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-skeleton-loader"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-skeleton-loader":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhSkeletonLoader);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhSkeletonLoader as B, defineCustomElement as d };
+//# sourceMappingURL=p-BaLh9-zk.js.map
+
+//# sourceMappingURL=p-BaLh9-zk.js.map

package/dist/components/p-BaLh9-zk.js.map

@@ -0,0 +1 @@
+{"file":"p-BaLh9-zk.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,8lBAA8lB;;MCO7mB,gBAAgB,iBAAAA,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;;;;;;;;AAC3B;;AAEG;IACK,KAAK,GAAW,MAAM;AAE9B;;AAEG;IACK,MAAM,GAAW,KAAK;AAE9B;;AAEG;IACK,MAAM,GAAY,KAAK;IAE/B,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG;AACtB,YAAA,UAAU,EAAE,IAAI;YAChB,iBAAiB,EAAE,IAAI,CAAC,MAAM;SAC/B;AAED,QAAA,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,eAAe,EACtB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EACjD,IAAI,EAAC,QAAQ,EACH,WAAA,EAAA,QAAQ,EACR,WAAA,EAAA,MAAM,EAChB,IAAI,EAAC,UAAU,EAAA,EAEf,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,iBAAiB,EAAkB,EAAA,YAAA,CAAA,CAC1C;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-skeleton-loader/bh-skeleton-loader.css?tag=bh-skeleton-loader&encapsulation=shadow","src/components/bh-skeleton-loader/bh-skeleton-loader.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-SKELETON-LOADER COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n.skeleton {\n  display: inline-block;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.06) 25%,\n    rgba(0, 0, 0, 0.03) 50%,\n    rgba(0, 0, 0, 0.06) 75%\n  );\n  background-size: 400% 100%;\n  animation: shimmer 1.5s ease-in-out infinite;\n  border-radius: var(--radius-sm);\n  line-height: 1;\n}\n\n.skeleton-circle {\n  border-radius: 50%;\n}\n\n.skeleton::before {\n  content: '\\00a0';\n}\n\n@keyframes shimmer {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0 50%;\n  }\n}\n\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'bh-skeleton-loader',\n  styleUrl: 'bh-skeleton-loader.css',\n  shadow: true,\n})\nexport class BhSkeletonLoader {\n  /**\n   * Width of the skeleton (CSS value)\n   */\n  @Prop() width: string = '100%';\n\n  /**\n   * Height of the skeleton (CSS value)\n   */\n  @Prop() height: string = '1em';\n\n  /**\n   * Whether the skeleton should be circular\n   */\n  @Prop() circle: boolean = false;\n\n  render() {\n    const skeletonClasses = {\n      'skeleton': true,\n      'skeleton-circle': this.circle,\n    };\n\n    return (\n      <span\n        class={skeletonClasses}\n        style={{ width: this.width, height: this.height }}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-busy=\"true\"\n        part=\"skeleton\"\n      >\n        <span class=\"visually-hidden\">Loading...</span>\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BpXkE6y8.js

@@ -0,0 +1,97 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-ChfLhYiJ.js';
+
+const bhBadgeCss = ":host{display:inline-block}.badge{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);font-family:var(--font-inter);font-weight:var(--weight-medium);border-radius:var(--radius-full);white-space:nowrap;text-align:center;transition:all 0.2s ease;border:1px solid transparent;user-select:none;cursor:default}.badge-sm{padding:var(--spacing-xxs) var(--spacing-md);font-size:var(--text-sm-size);line-height:var(--text-xs-line)}.badge-md{padding:var(--spacing-xs) var(--spacing-lg);font-size:var(--text-sm-size);line-height:var(--text-sm-line)}.badge-lg{padding:var(--spacing-sm) var(--spacing-xl);font-size:var(--text-md-size);line-height:var(--text-md-line)}.badge-icon-dot{font-size:8px !important;width:8px;height:8px;line-height:1;flex-shrink:0;font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 16}.badge-sm .badge-icon-dot{font-size:6px !important;width:6px;height:6px}.badge-lg .badge-icon-dot{font-size:10px !important;width:10px;height:10px}.badge-icon-custom{font-size:16px !important;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16}.badge-sm .badge-icon-custom{font-size:12px !important}.badge-lg .badge-icon-custom{font-size:20px !important}.badge-label{flex-shrink:0;font-weight:inherit}.badge-dismiss{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;margin-left:var(--spacing-xxs);border-radius:var(--radius-full);transition:all 0.2s ease;width:16px;height:16px}.badge-dismiss-icon{font-size:14px !important;width:14px;height:14px;line-height:1;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14}.badge-sm .badge-dismiss{width:14px;height:14px}.badge-sm .badge-dismiss-icon{font-size:12px !important;width:12px;height:12px}.badge-lg .badge-dismiss{width:18px;height:18px}.badge-lg .badge-dismiss-icon{font-size:16px !important;width:16px;height:16px}.badge-dismiss:hover{background-color:rgba(255, 255, 255, 0.2)}.badge-dismiss:disabled{cursor:not-allowed;opacity:0.5}.badge-high.badge-gray{background-color:var(--color-neutral-200);color:var(--color-neutral-800)}.badge-high.badge-blue{background-color:var(--color-brand-200);color:var(--color-brand-800)}.badge-high.badge-red{background-color:var(--color-error-200);color:var(--color-error-800)}.badge-high.badge-yellow{background-color:var(--color-warning-200);color:var(--color-warning-800)}.badge-high.badge-green{background-color:var(--color-success-200);color:var(--color-success-800)}.badge-high.badge-purple{background-color:hsl(270, 70%, 85%);color:hsl(270, 70%, 35%)}.badge-high.badge-pink{background-color:hsl(330, 70%, 85%);color:hsl(330, 70%, 35%)}.badge-high.badge-orange{background-color:hsl(25, 90%, 85%);color:hsl(25, 90%, 35%)}.badge-high .badge-icon-gray-high,.badge-high .badge-dismiss-icon.badge-icon-gray-high{color:var(--color-neutral-800) !important}.badge-high .badge-icon-blue-high,.badge-high .badge-dismiss-icon.badge-icon-blue-high{color:var(--color-brand-800) !important}.badge-high .badge-icon-red-high,.badge-high .badge-dismiss-icon.badge-icon-red-high{color:var(--color-error-800) !important}.badge-high .badge-icon-yellow-high,.badge-high .badge-dismiss-icon.badge-icon-yellow-high{color:var(--color-warning-800) !important}.badge-high .badge-icon-green-high,.badge-high .badge-dismiss-icon.badge-icon-green-high{color:var(--color-success-800) !important}.badge-high .badge-icon-purple-high,.badge-high .badge-dismiss-icon.badge-icon-purple-high{color:hsl(270, 70%, 35%) !important}.badge-high .badge-icon-pink-high,.badge-high .badge-dismiss-icon.badge-icon-pink-high{color:hsl(330, 70%, 35%) !important}.badge-high .badge-icon-orange-high,.badge-high .badge-dismiss-icon.badge-icon-orange-high{color:hsl(25, 90%, 35%) !important}.badge-medium.badge-gray{background-color:var(--color-neutral-50);color:var(--color-neutral-700);border-color:var(--color-neutral-200)}.badge-medium.badge-blue{background-color:var(--color-brand-50);color:var(--color-brand-700);border-color:var(--color-brand-200)}.badge-medium.badge-red{background-color:var(--color-error-50);color:var(--color-error-700);border-color:var(--color-error-200)}.badge-medium.badge-yellow{background-color:var(--color-warning-50);color:var(--color-warning-700);border-color:var(--color-warning-200)}.badge-medium.badge-green{background-color:var(--color-success-50);color:var(--color-success-700);border-color:var(--color-success-200)}.badge-medium.badge-purple{background-color:hsl(270, 70%, 97%);color:hsl(270, 70%, 40%);border-color:hsl(270, 70%, 85%)}.badge-medium.badge-pink{background-color:hsl(330, 70%, 97%);color:hsl(330, 70%, 40%);border-color:hsl(330, 70%, 85%)}.badge-medium.badge-orange{background-color:hsl(25, 90%, 97%);color:hsl(25, 90%, 40%);border-color:hsl(25, 90%, 85%)}.badge-medium .badge-icon-gray-medium,.badge-medium .badge-dismiss-icon.badge-icon-gray-medium{color:var(--color-neutral-700) !important}.badge-medium .badge-icon-blue-medium,.badge-medium .badge-dismiss-icon.badge-icon-blue-medium{color:var(--color-brand-700) !important}.badge-medium .badge-icon-red-medium,.badge-medium .badge-dismiss-icon.badge-icon-red-medium{color:var(--color-error-700) !important}.badge-medium .badge-icon-yellow-medium,.badge-medium .badge-dismiss-icon.badge-icon-yellow-medium{color:var(--color-warning-700) !important}.badge-medium .badge-icon-green-medium,.badge-medium .badge-dismiss-icon.badge-icon-green-medium{color:var(--color-success-700) !important}.badge-medium .badge-icon-purple-medium,.badge-medium .badge-dismiss-icon.badge-icon-purple-medium{color:hsl(270, 70%, 40%) !important}.badge-medium .badge-icon-pink-medium,.badge-medium .badge-dismiss-icon.badge-icon-pink-medium{color:hsl(330, 70%, 40%) !important}.badge-medium .badge-icon-orange-medium,.badge-medium .badge-dismiss-icon.badge-icon-orange-medium{color:hsl(25, 90%, 40%) !important}.badge-low.badge-gray{background-color:transparent;color:var(--color-neutral-600);border-color:var(--color-neutral-600)}.badge-low.badge-blue{background-color:transparent;color:var(--color-brand-600);border-color:var(--color-brand-600)}.badge-low.badge-red{background-color:transparent;color:var(--color-error-600);border-color:var(--color-error-600)}.badge-low.badge-yellow{background-color:transparent;color:var(--color-warning-600);border-color:var(--color-warning-600)}.badge-low.badge-green{background-color:transparent;color:var(--color-success-600);border-color:var(--color-success-600)}.badge-low.badge-purple{background-color:transparent;color:hsl(270, 70%, 45%);border-color:hsl(270, 70%, 45%)}.badge-low.badge-pink{background-color:transparent;color:hsl(330, 70%, 45%);border-color:hsl(330, 70%, 45%)}.badge-low.badge-orange{background-color:transparent;color:hsl(25, 90%, 45%);border-color:hsl(25, 90%, 45%)}.badge-low .badge-icon-gray-low,.badge-low .badge-dismiss-icon.badge-icon-gray-low{color:var(--color-neutral-600) !important}.badge-low .badge-icon-blue-low,.badge-low .badge-dismiss-icon.badge-icon-blue-low{color:var(--color-brand-600) !important}.badge-low .badge-icon-red-low,.badge-low .badge-dismiss-icon.badge-icon-red-low{color:var(--color-error-600) !important}.badge-low .badge-icon-yellow-low,.badge-low .badge-dismiss-icon.badge-icon-yellow-low{color:var(--color-warning-600) !important}.badge-low .badge-icon-green-low,.badge-low .badge-dismiss-icon.badge-icon-green-low{color:var(--color-success-600) !important}.badge-low .badge-icon-purple-low,.badge-low .badge-dismiss-icon.badge-icon-purple-low{color:hsl(270, 70%, 45%) !important}.badge-low .badge-icon-pink-low,.badge-low .badge-dismiss-icon.badge-icon-pink-low{color:hsl(330, 70%, 45%) !important}.badge-low .badge-icon-orange-low,.badge-low .badge-dismiss-icon.badge-icon-orange-low{color:hsl(25, 90%, 45%) !important}.badge-disabled{opacity:0.5;cursor:not-allowed}";
+
+const BhBadge = /*@__PURE__*/ proxyCustomElement(class BhBadge extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhDismiss = createEvent(this, "bhDismiss");
+    }
+    /**
+     * The color variant of the badge
+     */
+    variant = 'gray';
+    /**
+     * The size of the badge
+     */
+    size = 'md';
+    /**
+     * The emphasis level (affects background/border styling)
+     */
+    emphasis = 'high';
+    /**
+     * The text label to display
+     */
+    label = 'Label';
+    /**
+     * Material Symbols icon name, or 'dot' for a dot indicator
+     */
+    icon;
+    /**
+     * Whether the badge can be dismissed
+     */
+    dismissible = false;
+    /**
+     * Whether the badge is disabled
+     */
+    disabled = false;
+    /**
+     * Emitted when the dismiss button is clicked
+     */
+    bhDismiss;
+    handleDismiss = (e) => {
+        e.stopPropagation();
+        if (this.dismissible && !this.disabled) {
+            this.bhDismiss.emit();
+        }
+    };
+    render() {
+        const badgeClasses = {
+            'badge': true,
+            [`badge-${this.variant}`]: true,
+            [`badge-${this.size}`]: true,
+            [`badge-${this.emphasis}`]: true,
+            'badge-disabled': this.disabled,
+        };
+        const iconColorClass = `badge-icon-${this.variant}-${this.emphasis}`;
+        const isDot = this.icon === 'dot';
+        return (h("span", { key: '240872b520f525ebf20a8d96fd00bd920ef5db39', class: badgeClasses, part: "badge" }, this.icon && (h("span", { key: '0da3d63155c7bed85f4ce51165a0e98e5070f55c', class: {
+                'material-symbols-outlined': true,
+                [iconColorClass]: true,
+                'badge-icon-dot': isDot,
+                'badge-icon-custom': !isDot,
+            } }, isDot ? 'fiber_manual_record' : this.icon)), h("span", { key: 'e4556215b4af0bf56dd5058697d2aac9ecb62d75', class: "badge-label" }, this.label), this.dismissible && (h("button", { key: 'bd455d4b8b2dca8cc7596ed2dddcbe69ff11b9cf', class: "badge-dismiss", onClick: this.handleDismiss, disabled: this.disabled, type: "button", "aria-label": "Dismiss", part: "dismiss-button" }, h("span", { key: 'b4f8e3be6334840ff909cd3c60ec1d7725f09a77', class: `material-symbols-outlined badge-dismiss-icon ${iconColorClass}` }, "close")))));
+    }
+    static get style() { return bhBadgeCss; }
+}, [769, "bh-badge", {
+        "variant": [1],
+        "size": [1],
+        "emphasis": [1],
+        "label": [1],
+        "icon": [1],
+        "dismissible": [4],
+        "disabled": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-badge"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-badge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhBadge);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhBadge as B, defineCustomElement as d };
+//# sourceMappingURL=p-BpXkE6y8.js.map
+
+//# sourceMappingURL=p-BpXkE6y8.js.map

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

@@ -0,0 +1 @@
+{"file":"p-BpXkE6y8.js","mappings":";;AAAA,MAAM,UAAU,GAAG,ipPAAipP;;MCWvpP,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAClB;;AAEG;IACK,OAAO,GAAiB,MAAM;AAEtC;;AAEG;IACK,IAAI,GAAc,IAAI;AAE9B;;AAEG;IACK,QAAQ,GAAkB,MAAM;AAExC;;AAEG;IACK,KAAK,GAAW,OAAO;AAE/B;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;IACK,WAAW,GAAY,KAAK;AAEpC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACM,IAAA,SAAS;AAEV,IAAA,aAAa,GAAG,CAAC,CAAa,KAAU;QAC9C,CAAC,CAAC,eAAe,EAAE;QACnB,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACtC,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;;AAEzB,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,CAAC,SAAS,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AAC/B,YAAA,CAAC,SAAS,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC5B,YAAA,CAAC,SAAS,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;YAChC,gBAAgB,EAAE,IAAI,CAAC,QAAQ;SAChC;QAED,MAAM,cAAc,GAAG,CAAA,WAAA,EAAc,IAAI,CAAC,OAAO,CAAA,CAAA,EAAI,IAAI,CAAC,QAAQ,CAAA,CAAE;AACpE,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,KAAK,KAAK;AAEjC,QAAA,QACE,6DAAM,KAAK,EAAE,YAAY,EAAE,IAAI,EAAC,OAAO,EAAA,EACpC,IAAI,CAAC,IAAI,KACR,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,2BAA2B,EAAE,IAAI;gBACjC,CAAC,cAAc,GAAG,IAAI;AACtB,gBAAA,gBAAgB,EAAE,KAAK;gBACvB,mBAAmB,EAAE,CAAC,KAAK;aAC5B,EAAA,EAEA,KAAK,GAAG,qBAAqB,GAAG,IAAI,CAAC,IAAI,CACrC,CACR,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAQ,EAE5C,IAAI,CAAC,WAAW,KACf,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EACF,YAAA,EAAA,SAAS,EACpB,IAAI,EAAC,gBAAgB,EAAA,EAErB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gDAAgD,cAAc,CAAA,CAAE,YAEtE,CACA,CACV,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-badge/bh-badge.css?tag=bh-badge&encapsulation=shadow","src/components/bh-badge/bh-badge.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-BADGE COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n/* Base Badge Styles */\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-sm);\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  border-radius: var(--radius-full);\n  white-space: nowrap;\n  text-align: center;\n  transition: all 0.2s ease;\n  border: 1px solid transparent;\n  user-select: none;\n  cursor: default;\n}\n\n/* Size Variants */\n.badge-sm {\n  padding: var(--spacing-xxs) var(--spacing-md);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-xs-line);\n}\n\n.badge-md {\n  padding: var(--spacing-xs) var(--spacing-lg);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n}\n\n.badge-lg {\n  padding: var(--spacing-sm) var(--spacing-xl);\n  font-size: var(--text-md-size);\n  line-height: var(--text-md-line);\n}\n\n/* Badge Icon - Dot */\n.badge-icon-dot {\n  font-size: 8px !important;\n  width: 8px;\n  height: 8px;\n  line-height: 1;\n  flex-shrink: 0;\n  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 16;\n}\n\n.badge-sm .badge-icon-dot {\n  font-size: 6px !important;\n  width: 6px;\n  height: 6px;\n}\n\n.badge-lg .badge-icon-dot {\n  font-size: 10px !important;\n  width: 10px;\n  height: 10px;\n}\n\n/* Custom icon styling */\n.badge-icon-custom {\n  font-size: 16px !important;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;\n}\n\n.badge-sm .badge-icon-custom {\n  font-size: 12px !important;\n}\n\n.badge-lg .badge-icon-custom {\n  font-size: 20px !important;\n}\n\n/* Badge Label */\n.badge-label {\n  flex-shrink: 0;\n  font-weight: inherit;\n}\n\n/* Dismiss Button */\n.badge-dismiss {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  margin-left: var(--spacing-xxs);\n  border-radius: var(--radius-full);\n  transition: all 0.2s ease;\n  width: 16px;\n  height: 16px;\n}\n\n.badge-dismiss-icon {\n  font-size: 14px !important;\n  width: 14px;\n  height: 14px;\n  line-height: 1;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;\n}\n\n.badge-sm .badge-dismiss {\n  width: 14px;\n  height: 14px;\n}\n\n.badge-sm .badge-dismiss-icon {\n  font-size: 12px !important;\n  width: 12px;\n  height: 12px;\n}\n\n.badge-lg .badge-dismiss {\n  width: 18px;\n  height: 18px;\n}\n\n.badge-lg .badge-dismiss-icon {\n  font-size: 16px !important;\n  width: 16px;\n  height: 16px;\n}\n\n.badge-dismiss:hover {\n  background-color: rgba(255, 255, 255, 0.2);\n}\n\n.badge-dismiss:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* ==========================================================================\n   HIGH EMPHASIS VARIANTS\n   ========================================================================== */\n\n.badge-high.badge-gray {\n  background-color: var(--color-neutral-200);\n  color: var(--color-neutral-800);\n}\n\n.badge-high.badge-blue {\n  background-color: var(--color-brand-200);\n  color: var(--color-brand-800);\n}\n\n.badge-high.badge-red {\n  background-color: var(--color-error-200);\n  color: var(--color-error-800);\n}\n\n.badge-high.badge-yellow {\n  background-color: var(--color-warning-200);\n  color: var(--color-warning-800);\n}\n\n.badge-high.badge-green {\n  background-color: var(--color-success-200);\n  color: var(--color-success-800);\n}\n\n.badge-high.badge-purple {\n  background-color: hsl(270, 70%, 85%);\n  color: hsl(270, 70%, 35%);\n}\n\n.badge-high.badge-pink {\n  background-color: hsl(330, 70%, 85%);\n  color: hsl(330, 70%, 35%);\n}\n\n.badge-high.badge-orange {\n  background-color: hsl(25, 90%, 85%);\n  color: hsl(25, 90%, 35%);\n}\n\n/* Icon colors for high emphasis */\n.badge-high .badge-icon-gray-high,\n.badge-high .badge-dismiss-icon.badge-icon-gray-high { color: var(--color-neutral-800) !important; }\n.badge-high .badge-icon-blue-high,\n.badge-high .badge-dismiss-icon.badge-icon-blue-high { color: var(--color-brand-800) !important; }\n.badge-high .badge-icon-red-high,\n.badge-high .badge-dismiss-icon.badge-icon-red-high { color: var(--color-error-800) !important; }\n.badge-high .badge-icon-yellow-high,\n.badge-high .badge-dismiss-icon.badge-icon-yellow-high { color: var(--color-warning-800) !important; }\n.badge-high .badge-icon-green-high,\n.badge-high .badge-dismiss-icon.badge-icon-green-high { color: var(--color-success-800) !important; }\n.badge-high .badge-icon-purple-high,\n.badge-high .badge-dismiss-icon.badge-icon-purple-high { color: hsl(270, 70%, 35%) !important; }\n.badge-high .badge-icon-pink-high,\n.badge-high .badge-dismiss-icon.badge-icon-pink-high { color: hsl(330, 70%, 35%) !important; }\n.badge-high .badge-icon-orange-high,\n.badge-high .badge-dismiss-icon.badge-icon-orange-high { color: hsl(25, 90%, 35%) !important; }\n\n/* ==========================================================================\n   MEDIUM EMPHASIS VARIANTS\n   ========================================================================== */\n\n.badge-medium.badge-gray {\n  background-color: var(--color-neutral-50);\n  color: var(--color-neutral-700);\n  border-color: var(--color-neutral-200);\n}\n\n.badge-medium.badge-blue {\n  background-color: var(--color-brand-50);\n  color: var(--color-brand-700);\n  border-color: var(--color-brand-200);\n}\n\n.badge-medium.badge-red {\n  background-color: var(--color-error-50);\n  color: var(--color-error-700);\n  border-color: var(--color-error-200);\n}\n\n.badge-medium.badge-yellow {\n  background-color: var(--color-warning-50);\n  color: var(--color-warning-700);\n  border-color: var(--color-warning-200);\n}\n\n.badge-medium.badge-green {\n  background-color: var(--color-success-50);\n  color: var(--color-success-700);\n  border-color: var(--color-success-200);\n}\n\n.badge-medium.badge-purple {\n  background-color: hsl(270, 70%, 97%);\n  color: hsl(270, 70%, 40%);\n  border-color: hsl(270, 70%, 85%);\n}\n\n.badge-medium.badge-pink {\n  background-color: hsl(330, 70%, 97%);\n  color: hsl(330, 70%, 40%);\n  border-color: hsl(330, 70%, 85%);\n}\n\n.badge-medium.badge-orange {\n  background-color: hsl(25, 90%, 97%);\n  color: hsl(25, 90%, 40%);\n  border-color: hsl(25, 90%, 85%);\n}\n\n/* Icon colors for medium emphasis */\n.badge-medium .badge-icon-gray-medium,\n.badge-medium .badge-dismiss-icon.badge-icon-gray-medium { color: var(--color-neutral-700) !important; }\n.badge-medium .badge-icon-blue-medium,\n.badge-medium .badge-dismiss-icon.badge-icon-blue-medium { color: var(--color-brand-700) !important; }\n.badge-medium .badge-icon-red-medium,\n.badge-medium .badge-dismiss-icon.badge-icon-red-medium { color: var(--color-error-700) !important; }\n.badge-medium .badge-icon-yellow-medium,\n.badge-medium .badge-dismiss-icon.badge-icon-yellow-medium { color: var(--color-warning-700) !important; }\n.badge-medium .badge-icon-green-medium,\n.badge-medium .badge-dismiss-icon.badge-icon-green-medium { color: var(--color-success-700) !important; }\n.badge-medium .badge-icon-purple-medium,\n.badge-medium .badge-dismiss-icon.badge-icon-purple-medium { color: hsl(270, 70%, 40%) !important; }\n.badge-medium .badge-icon-pink-medium,\n.badge-medium .badge-dismiss-icon.badge-icon-pink-medium { color: hsl(330, 70%, 40%) !important; }\n.badge-medium .badge-icon-orange-medium,\n.badge-medium .badge-dismiss-icon.badge-icon-orange-medium { color: hsl(25, 90%, 40%) !important; }\n\n/* ==========================================================================\n   LOW EMPHASIS VARIANTS\n   ========================================================================== */\n\n.badge-low.badge-gray {\n  background-color: transparent;\n  color: var(--color-neutral-600);\n  border-color: var(--color-neutral-600);\n}\n\n.badge-low.badge-blue {\n  background-color: transparent;\n  color: var(--color-brand-600);\n  border-color: var(--color-brand-600);\n}\n\n.badge-low.badge-red {\n  background-color: transparent;\n  color: var(--color-error-600);\n  border-color: var(--color-error-600);\n}\n\n.badge-low.badge-yellow {\n  background-color: transparent;\n  color: var(--color-warning-600);\n  border-color: var(--color-warning-600);\n}\n\n.badge-low.badge-green {\n  background-color: transparent;\n  color: var(--color-success-600);\n  border-color: var(--color-success-600);\n}\n\n.badge-low.badge-purple {\n  background-color: transparent;\n  color: hsl(270, 70%, 45%);\n  border-color: hsl(270, 70%, 45%);\n}\n\n.badge-low.badge-pink {\n  background-color: transparent;\n  color: hsl(330, 70%, 45%);\n  border-color: hsl(330, 70%, 45%);\n}\n\n.badge-low.badge-orange {\n  background-color: transparent;\n  color: hsl(25, 90%, 45%);\n  border-color: hsl(25, 90%, 45%);\n}\n\n/* Icon colors for low emphasis */\n.badge-low .badge-icon-gray-low,\n.badge-low .badge-dismiss-icon.badge-icon-gray-low { color: var(--color-neutral-600) !important; }\n.badge-low .badge-icon-blue-low,\n.badge-low .badge-dismiss-icon.badge-icon-blue-low { color: var(--color-brand-600) !important; }\n.badge-low .badge-icon-red-low,\n.badge-low .badge-dismiss-icon.badge-icon-red-low { color: var(--color-error-600) !important; }\n.badge-low .badge-icon-yellow-low,\n.badge-low .badge-dismiss-icon.badge-icon-yellow-low { color: var(--color-warning-600) !important; }\n.badge-low .badge-icon-green-low,\n.badge-low .badge-dismiss-icon.badge-icon-green-low { color: var(--color-success-600) !important; }\n.badge-low .badge-icon-purple-low,\n.badge-low .badge-dismiss-icon.badge-icon-purple-low { color: hsl(270, 70%, 45%) !important; }\n.badge-low .badge-icon-pink-low,\n.badge-low .badge-dismiss-icon.badge-icon-pink-low { color: hsl(330, 70%, 45%) !important; }\n.badge-low .badge-icon-orange-low,\n.badge-low .badge-dismiss-icon.badge-icon-orange-low { color: hsl(25, 90%, 45%) !important; }\n\n/* Disabled State */\n.badge-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type BadgeVariant = 'gray' | 'blue' | 'red' | 'yellow' | 'green' | 'purple' | 'pink' | 'orange';\nexport type BadgeSize = 'sm' | 'md' | 'lg';\nexport type BadgeEmphasis = 'high' | 'medium' | 'low';\n\n@Component({\n  tag: 'bh-badge',\n  styleUrl: 'bh-badge.css',\n  shadow: true,\n})\nexport class BhBadge {\n  /**\n   * The color variant of the badge\n   */\n  @Prop() variant: BadgeVariant = 'gray';\n\n  /**\n   * The size of the badge\n   */\n  @Prop() size: BadgeSize = 'md';\n\n  /**\n   * The emphasis level (affects background/border styling)\n   */\n  @Prop() emphasis: BadgeEmphasis = 'high';\n\n  /**\n   * The text label to display\n   */\n  @Prop() label: string = 'Label';\n\n  /**\n   * Material Symbols icon name, or 'dot' for a dot indicator\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the badge can be dismissed\n   */\n  @Prop() dismissible: boolean = false;\n\n  /**\n   * Whether the badge is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Emitted when the dismiss button is clicked\n   */\n  @Event() bhDismiss!: EventEmitter<void>;\n\n  private handleDismiss = (e: MouseEvent): void => {\n    e.stopPropagation();\n    if (this.dismissible && !this.disabled) {\n      this.bhDismiss.emit();\n    }\n  };\n\n  render() {\n    const badgeClasses = {\n      'badge': true,\n      [`badge-${this.variant}`]: true,\n      [`badge-${this.size}`]: true,\n      [`badge-${this.emphasis}`]: true,\n      'badge-disabled': this.disabled,\n    };\n\n    const iconColorClass = `badge-icon-${this.variant}-${this.emphasis}`;\n    const isDot = this.icon === 'dot';\n\n    return (\n      <span class={badgeClasses} part=\"badge\">\n        {this.icon && (\n          <span\n            class={{\n              'material-symbols-outlined': true,\n              [iconColorClass]: true,\n              'badge-icon-dot': isDot,\n              'badge-icon-custom': !isDot,\n            }}\n          >\n            {isDot ? 'fiber_manual_record' : this.icon}\n          </span>\n        )}\n\n        <span class=\"badge-label\">{this.label}</span>\n\n        {this.dismissible && (\n          <button\n            class=\"badge-dismiss\"\n            onClick={this.handleDismiss}\n            disabled={this.disabled}\n            type=\"button\"\n            aria-label=\"Dismiss\"\n            part=\"dismiss-button\"\n          >\n            <span class={`material-symbols-outlined badge-dismiss-icon ${iconColorClass}`}>\n              close\n            </span>\n          </button>\n        )}\n      </span>\n    );\n  }\n}\n"],"version":3}