@actabldesign/bellhop-core 0.0.3 → 0.0.6

package/dist/components/p-B7e9Vn80.js

@@ -0,0 +1,123 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DLHC5fHk.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-B7e9Vn80.js.map
+
+//# sourceMappingURL=p-B7e9Vn80.js.map

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

@@ -0,0 +1 @@
+{"file":"p-B7e9Vn80.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-BAKX4y5m.js

@@ -0,0 +1,158 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-DLHC5fHk.js';
+import { s as syncCheckableFormValue } from './p-2KjdCYlS.js';
+import { d as defineCustomElement$2 } from './p-CzM_4nyA.js';
+import { d as defineCustomElement$1 } from './p-UG_h-ztP.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-BAKX4y5m.js.map
+
+//# sourceMappingURL=p-BAKX4y5m.js.map

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

@@ -0,0 +1 @@
+{"file":"p-BAKX4y5m.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,s1EAAs1E;;MCWl2E,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;;;;;AACL,IAAA,SAAS;AAC5B;;AAEG;IACK,IAAI,GAAoB,IAAI;AAEpC;;AAEG;IACsB,QAAQ,GAAY,KAAK;AAElD;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,KAAK,GAAW,EAAE;AAE1B;;AAEG;IACK,IAAI,GAAW,EAAE;AAEzB;;AAEG;IACK,KAAK,GAAW,EAAE;AAE1B;;AAEG;IACK,cAAc,GAAW,EAAE;AAEnC;;AAEG;IACM,SAAS,GAAY,KAAK;AAEnC;;AAEG;IACM,SAAS,GAAY,KAAK;AAEnC;;AAEG;AACM,IAAA,QAAQ;IAEjB,gBAAgB,GAAA;AACd,QAAA,sBAAsB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;;IAG9E,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACrB,QAAA,sBAAsB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;;IAGtE,WAAW,GAAG,MAAW;AAC/B,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAAE;AAEpC,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,QAAA,sBAAsB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;QAC5E,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,KAAC;AAEO,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAU;AACrD,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE;YACtB,IAAI,CAAC,WAAW,EAAE;;AAEtB,KAAC;IAEO,WAAW,GAAG,MAAW;AAC/B,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACvB,KAAC;IAEO,UAAU,GAAG,MAAW;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACxB,KAAC;IAEO,gBAAgB,GAAG,MAAW;AACpC,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACvB,KAAC;IAEO,gBAAgB,GAAG,MAAW;AACpC,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACxB,KAAC;AAEO,IAAA,QAAQ,GAAG,CAAY,SAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;IAEnE,kBAAkB,GAAA;AACxB,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,CAAC,SAAS,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC5B,gBAAgB,EAAE,IAAI,CAAC,QAAQ;YAC/B,gBAAgB,EAAE,IAAI,CAAC,QAAQ;YAC/B,eAAe,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ;YACjD,aAAa,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ;SAChD;QAED,QACE,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,IAAI,EAAC,OAAO,EACE,cAAA,EAAA,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,mBACpB,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAA,EAEpC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,YAAY,EAAE,IAAI,EAAC,OAAO,IACnC,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,WAAW,GAAO,CAC3C,CACF;;IAIV,MAAM,GAAA;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,cAAc;AAElD,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,eAAe,EAAE,IAAI;YACrB,0BAA0B,EAAE,CAAC,CAAC,QAAQ;YACtC,wBAAwB,EAAE,IAAI,CAAC,QAAQ;SACxC;;QAGD,IAAI,QAAQ,EAAE;YACZ,QACE,WAAK,KAAK,EAAE,cAAc,EAAE,IAAI,EAAC,SAAS,EAAA,EACxC,CAAA,CAAA,UAAA,EAAA,EACE,MAAM,EAAC,cAAc,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAEjB,EAAA,IAAI,CAAC,kBAAkB,EAAE,CACjB,CACP;;;QAKV,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,cAAc,EAAE,IAAI,EAAC,SAAS,EAAA,EACvC,IAAI,CAAC,kBAAkB,EAAE,CACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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-BE4kximA.js

@@ -0,0 +1,78 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-DLHC5fHk.js';
+
+const bhNavItemCss = ":host{display:inline-block}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative;flex-shrink:0;width:100%;max-width:52px;height:fit-content}.nav-item-button{background-color:var(--color-white);box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:var(--spacing-md);position:relative;border-radius:var(--radius-sm);flex-shrink:0;transition:background-color 0.2s ease;cursor:pointer;border:none;outline:none}.nav-item-button:hover{background-color:var(--color-neutral-50)}.nav-item-button:focus-visible{box-shadow:0 0 0 2px var(--color-brand-100)}.nav-item.active .nav-item-button{background-color:var(--color-brand-50)}.nav-item-button .icon{width:20px;height:20px;display:block;flex-shrink:0;color:var(--color-neutral-500);transition:color 0.2s ease;font-size:20px;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20}.nav-item-button:hover .icon{color:var(--color-neutral-700)}.nav-item.active .nav-item-button .icon{color:var(--color-brand-600);font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20}.nav-item-label{font-family:var(--font-inter);font-weight:var(--weight-medium);height:18px;line-height:18px;font-style:normal;overflow:hidden;text-overflow:ellipsis;position:relative;flex-shrink:0;color:var(--color-neutral-700);font-size:10px;text-align:center;white-space:nowrap;width:100%;max-width:100%;margin:var(--spacing-none);margin-top:var(--spacing-xxs);box-sizing:border-box;direction:ltr}.nav-item.active .nav-item-label{color:var(--color-neutral-700);font-weight:var(--weight-semibold)}.nav-item.disabled .nav-item-button{cursor:not-allowed;opacity:0.5}.nav-item.disabled .nav-item-button:hover{background-color:var(--color-white)}.nav-item.disabled .nav-item-button .icon{color:var(--color-neutral-400)}.nav-item.disabled .nav-item-label{color:var(--color-neutral-400)}";
+
+const BhNavItem = /*@__PURE__*/ proxyCustomElement(class BhNavItem extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhClick = createEvent(this, "bhClick");
+    }
+    /**
+     * Material Symbols icon name
+     */
+    icon = 'home';
+    /**
+     * Label text displayed below the icon
+     */
+    label = 'Home';
+    /**
+     * Whether the nav item is active/selected
+     */
+    isActive = false;
+    /**
+     * Whether the nav item is disabled
+     */
+    disabled = false;
+    /**
+     * Event emitted when the nav item is clicked
+     */
+    bhClick;
+    handleClick = () => {
+        if (!this.disabled) {
+            this.bhClick.emit();
+        }
+    };
+    handleKeyDown = (event) => {
+        if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {
+            event.preventDefault();
+            this.bhClick.emit();
+        }
+    };
+    render() {
+        const navItemClasses = {
+            'nav-item': true,
+            'active': this.isActive,
+            'disabled': this.disabled,
+        };
+        return (h("div", { key: '0d118945925ec1e60f16ef60ca3e913386578fa8', class: navItemClasses }, h("button", { key: '41b8753e8c5048614505e02688b8678993f1c8d1', class: "nav-item-button", "aria-label": this.label, type: "button", onClick: this.handleClick, onKeyDown: this.handleKeyDown, disabled: this.disabled, tabIndex: this.disabled ? -1 : 0 }, h("span", { key: 'bbd4414639535eabedf673412e57d5f3c83e3ddc', class: "material-symbols-outlined icon" }, this.icon)), h("p", { key: 'cb747ba8b73b5201c47bd66de61d2b9bf5bd8a95', class: "nav-item-label" }, this.label)));
+    }
+    static get style() { return bhNavItemCss; }
+}, [769, "bh-nav-item", {
+        "icon": [1],
+        "label": [1],
+        "isActive": [4, "is-active"],
+        "disabled": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-nav-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-nav-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhNavItem);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhNavItem as B, defineCustomElement as d };
+//# sourceMappingURL=p-BE4kximA.js.map
+
+//# sourceMappingURL=p-BE4kximA.js.map

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

@@ -0,0 +1 @@
+{"file":"p-BE4kximA.js","mappings":";;AAAA,MAAM,YAAY,GAAG,w3DAAw3D;;MCOh4D,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;;;;;;;;;AACpB;;AAEG;IACK,IAAI,GAAW,MAAM;AAE7B;;AAEG;IACK,KAAK,GAAW,MAAM;AAE9B;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACM,IAAA,OAAO;IAER,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAClB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;;AAEvB,KAAC;AAEO,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;AAC/C,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClE,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;;AAEvB,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,UAAU,EAAE,IAAI;YAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B;QAED,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,cAAc,EAAA,EACxB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,iBAAiB,gBACX,IAAI,CAAC,KAAK,EACtB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAAA,EAEhC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gCAAgC,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,CACxD,EACT,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAK,CACtC;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-sidebar/bh-nav-item.css?tag=bh-nav-item&encapsulation=shadow","src/components/bh-sidebar/bh-nav-item.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-NAV-ITEM COMPONENT STYLES\n   Navigation item for sidebar navigation\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n.nav-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n  max-width: 52px;\n  height: fit-content;\n}\n\n.nav-item-button {\n  background-color: var(--color-white);\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  padding: var(--spacing-md);\n  position: relative;\n  border-radius: var(--radius-sm);\n  flex-shrink: 0;\n  transition: background-color 0.2s ease;\n  cursor: pointer;\n  border: none;\n  outline: none;\n}\n\n.nav-item-button:hover {\n  background-color: var(--color-neutral-50);\n}\n\n.nav-item-button:focus-visible {\n  box-shadow: 0 0 0 2px var(--color-brand-100);\n}\n\n.nav-item.active .nav-item-button {\n  background-color: var(--color-brand-50);\n}\n\n.nav-item-button .icon {\n  width: 20px;\n  height: 20px;\n  display: block;\n  flex-shrink: 0;\n  color: var(--color-neutral-500);\n  transition: color 0.2s ease;\n  font-size: 20px;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;\n}\n\n.nav-item-button:hover .icon {\n  color: var(--color-neutral-700);\n}\n\n.nav-item.active .nav-item-button .icon {\n  color: var(--color-brand-600);\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;\n}\n\n.nav-item-label {\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  height: 18px;\n  line-height: 18px;\n  font-style: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  position: relative;\n  flex-shrink: 0;\n  color: var(--color-neutral-700);\n  font-size: 10px;\n  text-align: center;\n  white-space: nowrap;\n  width: 100%;\n  max-width: 100%;\n  margin: var(--spacing-none);\n  margin-top: var(--spacing-xxs);\n  box-sizing: border-box;\n  direction: ltr;\n}\n\n.nav-item.active .nav-item-label {\n  color: var(--color-neutral-700);\n  font-weight: var(--weight-semibold);\n}\n\n/* Disabled state */\n.nav-item.disabled .nav-item-button {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.nav-item.disabled .nav-item-button:hover {\n  background-color: var(--color-white);\n}\n\n.nav-item.disabled .nav-item-button .icon {\n  color: var(--color-neutral-400);\n}\n\n.nav-item.disabled .nav-item-label {\n  color: var(--color-neutral-400);\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n@Component({\n  tag: 'bh-nav-item',\n  styleUrl: 'bh-nav-item.css',\n  shadow: true,\n})\nexport class BhNavItem {\n  /**\n   * Material Symbols icon name\n   */\n  @Prop() icon: string = 'home';\n\n  /**\n   * Label text displayed below the icon\n   */\n  @Prop() label: string = 'Home';\n\n  /**\n   * Whether the nav item is active/selected\n   */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * Whether the nav item is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Event emitted when the nav item is clicked\n   */\n  @Event() bhClick!: EventEmitter<void>;\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      this.bhClick.emit();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {\n      event.preventDefault();\n      this.bhClick.emit();\n    }\n  };\n\n  render() {\n    const navItemClasses = {\n      'nav-item': true,\n      'active': this.isActive,\n      'disabled': this.disabled,\n    };\n\n    return (\n      <div class={navItemClasses}>\n        <button\n          class=\"nav-item-button\"\n          aria-label={this.label}\n          type=\"button\"\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          disabled={this.disabled}\n          tabIndex={this.disabled ? -1 : 0}\n        >\n          <span class=\"material-symbols-outlined icon\">{this.icon}</span>\n        </button>\n        <p class=\"nav-item-label\">{this.label}</p>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BM_aWCWB.js

@@ -0,0 +1,92 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-DLHC5fHk.js';
+import { d as defineCustomElement$1 } from './p-D_matRYZ.js';
+
+const bhTagCss = ":host{display:inline-block}.tag{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);font-family:var(--font-inter);font-weight:var(--weight-medium);background-color:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-sm);white-space:nowrap;cursor:default;user-select:none}.tag-dismissible{cursor:pointer}.tag-sm{padding:var(--spacing-xxs) var(--spacing-md);font-size:var(--text-sm-size);line-height:var(--text-sm-line)}.tag-sm.tag-dismissible{padding:var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md)}.tag-md{padding:var(--spacing-xxs) var(--spacing-md);font-size:var(--text-md-size);line-height:var(--text-md-line)}.tag-md.tag-dismissible{padding:var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md)}.tag-lg{padding:var(--spacing-xs) var(--spacing-lg);font-size:var(--text-md-size);line-height:var(--text-md-line)}.tag-lg.tag-dismissible{padding:var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-lg)}.tag-content{display:flex;align-items:center;gap:var(--spacing-xs)}.tag-avatar .tag-content{gap:var(--spacing-sm)}.tag-sm.tag-avatar{padding-left:var(--spacing-xs)}.tag-sm.tag-avatar.tag-dismissible{padding-left:var(--spacing-xs)}.tag-md.tag-avatar{padding-left:var(--spacing-sm)}.tag-md.tag-avatar.tag-dismissible{padding-left:var(--spacing-sm)}.tag-lg.tag-avatar{padding-left:var(--spacing-sm)}.tag-lg.tag-avatar.tag-dismissible{padding-left:var(--spacing-sm)}.tag-label-wrapper{position:relative;display:inline-flex;align-items:center;max-width:100%}.tag-label{color:var(--color-neutral-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tag-dismiss{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:var(--spacing-xxs);border-radius:var(--radius-xs);transition:background-color 0.2s ease;width:var(--spacing-xl);height:var(--spacing-xl);flex-shrink:0}.tag-lg .tag-dismiss{padding:var(--spacing-xs);width:var(--spacing-2xl);height:var(--spacing-2xl)}.tag-dismiss:hover{background-color:var(--color-neutral-100)}.tag-dismiss:disabled{cursor:not-allowed;opacity:0.5}.tag-dismiss-icon{font-size:var(--text-sm-size);color:var(--color-neutral-500);line-height:1;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20}.tag-lg .tag-dismiss-icon{font-size:var(--text-md-size)}.tag-disabled{opacity:0.5;cursor:not-allowed}.tag:hover{border-color:var(--color-neutral-300)}.tag-disabled:hover{border-color:var(--color-neutral-200)}.animate-dismiss{animation:dismiss 0.2s ease-out forwards}@keyframes dismiss{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.8)}}";
+
+const BhTag = /*@__PURE__*/ proxyCustomElement(class BhTag extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhDismiss = createEvent(this, "bhDismiss");
+    }
+    /** Tag variant */
+    variant = 'text-only';
+    /** Tag size */
+    size = 'md';
+    /** Tag label text */
+    label = 'Label';
+    /** Whether the tag is dismissible */
+    dismissible = false;
+    /** Whether the tag is disabled */
+    disabled = false;
+    /** Maximum width for the label (in pixels) */
+    maxWidth = 120;
+    /** Avatar image source (for avatar variant) */
+    avatarSrc = '';
+    /** Internal dismissing state */
+    isDismissing = false;
+    /** Emitted when dismiss button is clicked */
+    bhDismiss;
+    handleDismiss = (event) => {
+        event.stopPropagation();
+        if (this.dismissible && !this.disabled && !this.isDismissing) {
+            this.isDismissing = true;
+            // Simulate animation duration
+            setTimeout(() => {
+                this.bhDismiss.emit();
+                this.isDismissing = false;
+            }, 200);
+        }
+    };
+    render() {
+        const classes = {
+            'tag': true,
+            [`tag-${this.size}`]: true,
+            [`tag-${this.variant}`]: true,
+            'tag-dismissible': this.dismissible,
+            'tag-disabled': this.disabled,
+            'animate-dismiss': this.isDismissing,
+        };
+        const labelStyle = {
+            maxWidth: `${this.maxWidth}px`,
+        };
+        return (h("span", { key: 'ee636fd94895063d5e59160a7d54f9ceb7125d3a', class: classes }, h("div", { key: 'fcc9614abd483f5c0ecdf53b6fe7f2a3f72bdf39', class: "tag-content" }, this.variant === 'avatar' && (h("bh-avatar", { key: 'cdd5f20519b9a89753aa9f1a7cd3c3f776030997', size: "xxs", type: this.avatarSrc ? 'image' : 'placeholder', imageSrc: this.avatarSrc })), h("span", { key: '5b07fd4263d63bec8023257dacb1a417c4cfe973', class: "tag-label-wrapper" }, h("span", { key: 'dd2f1578fcaceb6a229fbf5b10253ae966baebab', class: "tag-label", style: labelStyle }, this.label))), this.dismissible && (h("button", { key: '593d8758e41957cfedc0c62bddb91d77c283996b', class: "tag-dismiss", onClick: this.handleDismiss, disabled: this.disabled, type: "button", "aria-label": "Dismiss" }, h("span", { key: '74916c4bebdf31dbf2d7a1eff6d943b8a801496f', class: "material-symbols-outlined tag-dismiss-icon" }, "close")))));
+    }
+    static get style() { return bhTagCss; }
+}, [769, "bh-tag", {
+        "variant": [1],
+        "size": [1],
+        "label": [1],
+        "dismissible": [4],
+        "disabled": [4],
+        "maxWidth": [2, "max-width"],
+        "avatarSrc": [1, "avatar-src"],
+        "isDismissing": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-tag", "bh-avatar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-tag":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhTag);
+            }
+            break;
+        case "bh-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhTag as B, defineCustomElement as d };
+//# sourceMappingURL=p-BM_aWCWB.js.map
+
+//# sourceMappingURL=p-BM_aWCWB.js.map

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

@@ -0,0 +1 @@
+{"file":"p-BM_aWCWB.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,ynFAAynF;;MCU7nF,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;;;;;;;;;;IAER,OAAO,GAAe,WAAW;;IAGjC,IAAI,GAAY,IAAI;;IAGpB,KAAK,GAAW,OAAO;;IAGvB,WAAW,GAAY,KAAK;;IAG5B,QAAQ,GAAY,KAAK;;IAGzB,QAAQ,GAAW,GAAG;;IAGtB,SAAS,GAAW,EAAE;;IAGrB,YAAY,GAAY,KAAK;;AAG7B,IAAA,SAAS;AAEV,IAAA,aAAa,GAAG,CAAC,KAAiB,KAAI;QAC5C,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AAC5D,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;;YAGxB,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACrB,gBAAA,IAAI,CAAC,YAAY,GAAG,KAAK;aAC1B,EAAE,GAAG,CAAC;;AAEX,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,KAAK,EAAE,IAAI;AACX,YAAA,CAAC,OAAO,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC1B,YAAA,CAAC,OAAO,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;YAC7B,iBAAiB,EAAE,IAAI,CAAC,WAAW;YACnC,cAAc,EAAE,IAAI,CAAC,QAAQ;YAC7B,iBAAiB,EAAE,IAAI,CAAC,YAAY;SACrC;AAED,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,QAAQ,EAAE,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAI,EAAA,CAAA;SAC/B;AAED,QAAA,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,OAAO,EAAA,EAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EAErB,IAAI,CAAC,OAAO,KAAK,QAAQ,KACxB,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,aAAa,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAc,CAC7G,EAGD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC7B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,UAAU,EAAA,EACtC,IAAI,CAAC,KAAK,CACN,CACF,CACH,EAGL,IAAI,CAAC,WAAW,KACf,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,SAAS,EAAA,EAEpB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4CAA4C,EAAA,EAAA,OAAA,CAEjD,CACA,CACV,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-tag/bh-tag.css?tag=bh-tag&encapsulation=shadow","src/components/bh-tag/bh-tag.tsx"],"sourcesContent":["/* Tag Base Styles */\n:host {\n  display: inline-block;\n}\n\n.tag {\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  background-color: var(--color-white);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-sm);\n  white-space: nowrap;\n  cursor: default;\n  user-select: none;\n}\n\n/* Clickable Tags */\n.tag-dismissible {\n  cursor: pointer;\n}\n\n/* Size Variants */\n.tag-sm {\n  padding: var(--spacing-xxs) var(--spacing-md);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n}\n\n.tag-sm.tag-dismissible {\n  padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md);\n}\n\n.tag-md {\n  padding: var(--spacing-xxs) var(--spacing-md);\n  font-size: var(--text-md-size);\n  line-height: var(--text-md-line);\n}\n\n.tag-md.tag-dismissible {\n  padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md);\n}\n\n.tag-lg {\n  padding: var(--spacing-xs) var(--spacing-lg);\n  font-size: var(--text-md-size);\n  line-height: var(--text-md-line);\n}\n\n.tag-lg.tag-dismissible {\n  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-lg);\n}\n\n/* Content Layout */\n.tag-content {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xs);\n}\n\n/* Avatar Variant - specific adjustments */\n.tag-avatar .tag-content {\n  gap: var(--spacing-sm);\n}\n\n.tag-sm.tag-avatar {\n  padding-left: var(--spacing-xs);\n}\n\n.tag-sm.tag-avatar.tag-dismissible {\n  padding-left: var(--spacing-xs);\n}\n\n.tag-md.tag-avatar {\n  padding-left: var(--spacing-sm);\n}\n\n.tag-md.tag-avatar.tag-dismissible {\n  padding-left: var(--spacing-sm);\n}\n\n.tag-lg.tag-avatar {\n  padding-left: var(--spacing-sm);\n}\n\n.tag-lg.tag-avatar.tag-dismissible {\n  padding-left: var(--spacing-sm);\n}\n\n/* Label wrapper for tooltip positioning */\n.tag-label-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n\n/* Label */\n.tag-label {\n  color: var(--color-neutral-700);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Dismiss Button */\n.tag-dismiss {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: var(--spacing-xxs);\n  border-radius: var(--radius-xs);\n  transition: background-color 0.2s ease;\n  width: var(--spacing-xl);\n  height: var(--spacing-xl);\n  flex-shrink: 0;\n}\n\n.tag-lg .tag-dismiss {\n  padding: var(--spacing-xs);\n  width: var(--spacing-2xl);\n  height: var(--spacing-2xl);\n}\n\n.tag-dismiss:hover {\n  background-color: var(--color-neutral-100);\n}\n\n.tag-dismiss:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.tag-dismiss-icon {\n  font-size: var(--text-sm-size);\n  color: var(--color-neutral-500);\n  line-height: 1;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;\n}\n\n.tag-lg .tag-dismiss-icon {\n  font-size: var(--text-md-size);\n}\n\n/* Disabled State */\n.tag-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Hover State for Dismissible Tags */\n.tag:hover {\n  border-color: var(--color-neutral-300);\n}\n\n.tag-disabled:hover {\n  border-color: var(--color-neutral-200);\n}\n\n/* Dismiss animation */\n.animate-dismiss {\n  animation: dismiss 0.2s ease-out forwards;\n}\n\n@keyframes dismiss {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n}\n","import { Component, Prop, State, Event, EventEmitter, h } from '@stencil/core';\n\nexport type TagVariant = 'text-only' | 'avatar';\nexport type TagSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'bh-tag',\n  styleUrl: 'bh-tag.css',\n  shadow: true,\n})\nexport class BhTag {\n  /** Tag variant */\n  @Prop() variant: TagVariant = 'text-only';\n\n  /** Tag size */\n  @Prop() size: TagSize = 'md';\n\n  /** Tag label text */\n  @Prop() label: string = 'Label';\n\n  /** Whether the tag is dismissible */\n  @Prop() dismissible: boolean = false;\n\n  /** Whether the tag is disabled */\n  @Prop() disabled: boolean = false;\n\n  /** Maximum width for the label (in pixels) */\n  @Prop() maxWidth: number = 120;\n\n  /** Avatar image source (for avatar variant) */\n  @Prop() avatarSrc: string = '';\n\n  /** Internal dismissing state */\n  @State() isDismissing: boolean = false;\n\n  /** Emitted when dismiss button is clicked */\n  @Event() bhDismiss!: EventEmitter<void>;\n\n  private handleDismiss = (event: MouseEvent) => {\n    event.stopPropagation();\n\n    if (this.dismissible && !this.disabled && !this.isDismissing) {\n      this.isDismissing = true;\n\n      // Simulate animation duration\n      setTimeout(() => {\n        this.bhDismiss.emit();\n        this.isDismissing = false;\n      }, 200);\n    }\n  };\n\n  render() {\n    const classes = {\n      'tag': true,\n      [`tag-${this.size}`]: true,\n      [`tag-${this.variant}`]: true,\n      'tag-dismissible': this.dismissible,\n      'tag-disabled': this.disabled,\n      'animate-dismiss': this.isDismissing,\n    };\n\n    const labelStyle = {\n      maxWidth: `${this.maxWidth}px`,\n    };\n\n    return (\n      <span class={classes}>\n        <div class=\"tag-content\">\n          {/* Avatar variant */}\n          {this.variant === 'avatar' && (\n            <bh-avatar size=\"xxs\" type={this.avatarSrc ? 'image' : 'placeholder'} imageSrc={this.avatarSrc}></bh-avatar>\n          )}\n\n          {/* Label */}\n          <span class=\"tag-label-wrapper\">\n            <span class=\"tag-label\" style={labelStyle}>\n              {this.label}\n            </span>\n          </span>\n        </div>\n\n        {/* Dismiss button (if dismissible) */}\n        {this.dismissible && (\n          <button\n            class=\"tag-dismiss\"\n            onClick={this.handleDismiss}\n            disabled={this.disabled}\n            type=\"button\"\n            aria-label=\"Dismiss\"\n          >\n            <span class=\"material-symbols-outlined tag-dismiss-icon\">\n              close\n            </span>\n          </button>\n        )}\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BsB67vNb.js

@@ -0,0 +1,100 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-DLHC5fHk.js';
+
+const bhButtonIconCss = ":host{display:inline-block;font-family:var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif)}.button-icon{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--radius-md, 8px);cursor:pointer;transition:all 0.2s ease-in-out;font-family:inherit;outline:none;padding:0}.button-icon:focus-visible{box-shadow:0 0 0 2px var(--color-white, #FFFFFF), 0 0 0 4px var(--color-brand-500, #7F56D9)}.button-icon-xs{width:24px;height:24px}.button-icon-xs .icon{font-size:16px}.button-icon-sm{width:32px;height:32px}.button-icon-sm .icon{font-size:18px}.button-icon-md{width:40px;height:40px}.button-icon-md .icon{font-size:20px}.button-icon-lg{width:48px;height:48px}.button-icon-lg .icon{font-size:24px}.button-icon-primary{background:var(--color-brand-600, #6941C6);color:var(--color-white, #FFFFFF)}.button-icon-primary:hover:not(.button-icon-disabled){background:var(--color-brand-700, #5235A8)}.button-icon-primary:active:not(.button-icon-disabled){background:var(--color-brand-800, #42298F)}.button-icon-secondary{background:var(--color-white, #FFFFFF);color:var(--color-neutral-700, #344054);border:1px solid var(--color-neutral-300, #D0D5DD)}.button-icon-secondary:hover:not(.button-icon-disabled){background:var(--color-neutral-50, #F9FAFB);border-color:var(--color-neutral-400, #98A2B3)}.button-icon-secondary:active:not(.button-icon-disabled){background:var(--color-neutral-100, #F2F4F7)}.button-icon-tertiary{background:transparent;color:var(--color-brand-600, #6941C6)}.button-icon-tertiary:hover:not(.button-icon-disabled){background:var(--color-brand-50, #F9F5FF)}.button-icon-tertiary:active:not(.button-icon-disabled){background:var(--color-brand-100, #F4EBFF)}.button-icon-quaternary{background:transparent;color:var(--color-neutral-500, #667085)}.button-icon-quaternary:hover:not(.button-icon-disabled){background:var(--color-neutral-100, #F2F4F7);color:var(--color-neutral-700, #344054)}.button-icon-quaternary:active:not(.button-icon-disabled){background:var(--color-neutral-200, #EAECF0)}.button-icon-disabled{opacity:0.5;cursor:not-allowed}.button-icon-loading{cursor:wait}.loading-spinner{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin 0.8s linear infinite}.button-icon-sm .loading-spinner{width:14px;height:14px}.button-icon-xs .loading-spinner{width:12px;height:12px}.button-icon-lg .loading-spinner{width:20px;height:20px}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.icon{display:flex;align-items:center;justify-content:center}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;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 BhButtonIcon = /*@__PURE__*/ proxyCustomElement(class BhButtonIcon extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhClick = createEvent(this, "bhClick");
+    }
+    /**
+     * The visual hierarchy of the button
+     */
+    hierarchy = 'primary';
+    /**
+     * The size of the button
+     */
+    size = 'md';
+    /**
+     * The icon name (Material Symbols)
+     */
+    iconName = 'add';
+    /**
+     * Whether the button is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the button is in loading state
+     */
+    loading = false;
+    /**
+     * The type of button for form submission
+     * - 'button': No form submission (default)
+     * - 'submit': Submits the form
+     * - 'reset': Resets the form
+     */
+    type = 'button';
+    /**
+     * Accessible label for the button
+     */
+    ariaLabel = null;
+    /**
+     * Emitted when the button is clicked
+     */
+    bhClick;
+    handleClick = (event) => {
+        if (!this.disabled && !this.loading) {
+            this.bhClick.emit(event);
+        }
+    };
+    handleKeyDown = (event) => {
+        if ((event.key === 'Enter' || event.key === ' ') &&
+            !this.disabled &&
+            !this.loading) {
+            event.preventDefault();
+            this.bhClick.emit(event);
+        }
+    };
+    render() {
+        const buttonClasses = {
+            'button-icon': true,
+            [`button-icon-${this.hierarchy}`]: true,
+            [`button-icon-${this.size}`]: true,
+            'button-icon-disabled': this.disabled,
+            'button-icon-loading': this.loading,
+        };
+        return (h("button", { key: '8c2a2097a2c7bbbb89a541d4fce7bba4c4eac970', type: this.type, class: buttonClasses, disabled: this.disabled, "aria-label": this.ariaLabel || this.iconName, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeyDown, part: "button" }, this.loading ? (h("span", { class: "loading-spinner", part: "spinner" })) : (h("span", { class: "material-symbols-outlined icon", part: "icon" }, this.iconName))));
+    }
+    static get style() { return bhButtonIconCss; }
+}, [769, "bh-button-icon", {
+        "hierarchy": [1],
+        "size": [1],
+        "iconName": [1, "icon-name"],
+        "disabled": [4],
+        "loading": [4],
+        "type": [1],
+        "ariaLabel": [1, "aria-label"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-button-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-button-icon":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhButtonIcon);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhButtonIcon as B, defineCustomElement as d };
+//# sourceMappingURL=p-BsB67vNb.js.map
+
+//# sourceMappingURL=p-BsB67vNb.js.map