@actabldesign/bellhop-core 0.0.3 → 0.0.6

package/components/p-CsRNKalM.js

@@ -1,166 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-9a7sQzad.js';
-import { s as syncCheckableFormValue, v as validateRequired } from './p-2KjdCYlS.js';
-
-const bhToggleCss = ":host{display:inline-block}.toggle-wrapper{display:flex;align-items:center;gap:0}.toggle-with-text.toggle-size-sm{gap:var(--spacing-md)}.toggle-with-text.toggle-size-md{gap:var(--spacing-lg)}.toggle-switch{position:relative;display:inline-block;border-radius:var(--radius-full);cursor:pointer;transition:background-color 0.2s ease;outline:none;border:1px solid transparent;background:transparent;overflow:visible;padding:0}.toggle-switch:focus{outline:none}.toggle-switch.toggle-disabled{cursor:not-allowed;opacity:0.38}.toggle-switch.toggle-sm{width:36px;height:20px}.toggle-switch.toggle-md{width:40px;height:24px}.toggle-switch.toggle-unpressed{background-color:var(--color-neutral-300);border-color:transparent}.toggle-switch.toggle-unpressed.toggle-hover{background-color:var(--color-neutral-400);border-color:transparent}.toggle-switch.toggle-unpressed.toggle-focus{background-color:var(--color-neutral-200);border-color:transparent}.toggle-switch.toggle-unpressed.toggle-focus .toggle-button::after{content:'';position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border-radius:var(--radius-full);background:var(--color-neutral-600);opacity:0.12;pointer-events:none}.toggle-switch.toggle-unpressed.toggle-disabled{background-color:var(--color-neutral-100);border-color:transparent}.toggle-switch.toggle-pressed{background-color:var(--color-brand-600);border-color:var(--color-brand-600)}.toggle-switch.toggle-pressed.toggle-hover{background-color:var(--color-brand-700);border-color:var(--color-brand-700)}.toggle-switch.toggle-pressed.toggle-focus{background-color:var(--color-brand-600);border-color:var(--color-brand-600)}.toggle-switch.toggle-pressed.toggle-focus .toggle-button::after{content:'';position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border-radius:var(--radius-full);background:var(--color-brand-100);opacity:0.24;pointer-events:none}.toggle-switch.toggle-pressed.toggle-disabled{background-color:var(--color-neutral-200);border-color:var(--color-neutral-200)}.toggle-switch.toggle-pressed.toggle-disabled .toggle-button{background-color:var(--color-neutral-100)}.toggle-button{position:absolute;top:50%;transform:translateY(-50%);border-radius:var(--radius-full);background-color:var(--color-neutral-600);transition:all 0.2s ease}.toggle-switch.toggle-unpressed .toggle-button{background-color:var(--color-white)}.toggle-switch.toggle-sm.toggle-unpressed .toggle-button{width:16px;height:16px;left:1px}.toggle-switch.toggle-md.toggle-unpressed .toggle-button{width:20px;height:20px;left:1px}.toggle-switch.toggle-unpressed.toggle-hover .toggle-button{background-color:var(--color-white);box-shadow:var(--shadow-sm)}.toggle-switch.toggle-pressed .toggle-button{background-color:var(--color-white)}.toggle-switch.toggle-sm.toggle-pressed .toggle-button{width:16px;height:16px;left:calc(100% - 17px)}.toggle-switch.toggle-md.toggle-pressed .toggle-button{width:20px;height:20px;left:calc(100% - 21px)}.toggle-switch.toggle-pressed.toggle-hover .toggle-button{background-color:var(--color-white)}.toggle-switch.toggle-disabled .toggle-button{background-color:var(--color-neutral-400);box-shadow:none}.toggle-switch.toggle-sm.toggle-unpressed.toggle-disabled .toggle-button{width:16px;height:16px;left:2px;background-color:var(--color-neutral-400)}.toggle-switch.toggle-md.toggle-unpressed.toggle-disabled .toggle-button{width:16px;height:16px;left:4px;background-color:var(--color-neutral-400)}.toggle-switch.toggle-sm.toggle-pressed.toggle-disabled .toggle-button{width:16px;height:16px;left:calc(100% - 17px);background-color:var(--color-neutral-400)}.toggle-switch.toggle-md.toggle-pressed.toggle-disabled .toggle-button{width:20px;height:20px;left:calc(100% - 21px);background-color:var(--color-white)}.toggle-text{display:flex;flex-direction:column;flex:1}.toggle-label{color:var(--color-neutral-700);font-family:var(--font-inter);font-weight:var(--weight-medium);text-align:left;margin:0;line-height:1.5}.toggle-label.toggle-label-sm{font-size:var(--text-sm-size);line-height:var(--text-sm-line)}.toggle-label.toggle-label-md{font-size:var(--text-md-size);line-height:var(--text-md-line)}.toggle-supporting-text{color:var(--color-neutral-600);font-family:var(--font-inter);font-weight:var(--weight-regular);font-size:var(--text-sm-size);line-height:var(--text-sm-line);text-align:left;margin:0;margin-top:var(--spacing-xxs)}@media (prefers-reduced-motion: reduce){.toggle-switch,.toggle-button{transition:none}}@media (prefers-contrast: high){.toggle-switch.toggle-unpressed{border:2px solid currentColor}.toggle-switch.toggle-pressed{border:2px solid currentColor}}.toggle-switch:focus-visible .toggle-button::after{content:'';position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border-radius:var(--radius-full);background:currentColor;opacity:0.24;pointer-events:none}";
-
-const BhToggle = /*@__PURE__*/ proxyCustomElement(class BhToggle 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 toggle
-     */
-    size = 'md';
-    /**
-     * Whether to show the label and supporting text
-     */
-    showText = false;
-    /**
-     * The label text
-     */
-    label = '';
-    /**
-     * Supporting text below the label
-     */
-    supportingText = '';
-    /**
-     * Whether the toggle is disabled
-     */
-    disabled = false;
-    /**
-     * Whether the toggle is checked (controlled mode)
-     */
-    checked = false;
-    /**
-     * Name attribute for form submission
-     */
-    name = '';
-    /**
-     * Value when checked (default: 'on')
-     */
-    value = 'on';
-    /**
-     * Whether the toggle is required
-     */
-    required = false;
-    /**
-     * Default checked state for form reset
-     */
-    defaultChecked = false;
-    /**
-     * Internal focus state
-     */
-    isFocused = false;
-    /**
-     * Internal hover state
-     */
-    isHovered = false;
-    /**
-     * Emitted when the toggle state changes
-     */
-    bhChange;
-    componentDidLoad() {
-        syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
-        validateRequired(this.internals, this.required, this.checked);
-    }
-    formResetCallback() {
-        this.checked = this.defaultChecked;
-        syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
-        validateRequired(this.internals, this.required, this.checked);
-    }
-    handleToggle = () => {
-        if (this.disabled)
-            return;
-        this.checked = !this.checked;
-        syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
-        validateRequired(this.internals, this.required, this.checked);
-        this.bhChange.emit(this.checked);
-    };
-    handleKeyDown = (event) => {
-        if (event.key === ' ' || event.key === 'Enter') {
-            event.preventDefault();
-            this.handleToggle();
-        }
-    };
-    handleMouseEnter = () => {
-        this.isHovered = true;
-    };
-    handleMouseLeave = () => {
-        this.isHovered = false;
-    };
-    handleFocus = () => {
-        this.isFocused = true;
-    };
-    handleBlur = () => {
-        this.isFocused = false;
-    };
-    render() {
-        const wrapperClasses = {
-            'toggle-wrapper': true,
-            'toggle-with-text': this.showText,
-            [`toggle-size-${this.size}`]: true,
-        };
-        const switchClasses = {
-            'toggle-switch': true,
-            'toggle-pressed': this.checked,
-            'toggle-unpressed': !this.checked,
-            [`toggle-${this.size}`]: true,
-            'toggle-disabled': this.disabled,
-            'toggle-focus': this.isFocused && !this.disabled,
-            'toggle-hover': this.isHovered && !this.disabled,
-        };
-        const buttonClasses = {
-            'toggle-button': true,
-            'toggle-button-pressed': this.checked,
-            'toggle-button-unpressed': !this.checked,
-            [`toggle-button-${this.size}`]: true,
-            'toggle-button-disabled': this.disabled,
-        };
-        const labelClasses = {
-            'toggle-label': true,
-            [`toggle-label-${this.size}`]: true,
-        };
-        return (h("div", { key: '59ea31ccba3b8a5d19d991728abfa832af696c22', class: wrapperClasses, part: "wrapper" }, h("div", { key: '6a379c430ad0132a7bea6d72e8eaf48eb3444a7e', class: switchClasses, onClick: this.handleToggle, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label || undefined, part: "switch" }, h("div", { key: '3e9914d0096f303fd19aa44881f8463b5846b1ed', class: buttonClasses, part: "button" })), this.showText && (this.label || this.supportingText) && (h("div", { key: '9e46745a9ed60dc29c4da37e503576b40ece91c6', class: "toggle-text" }, this.label && (h("span", { key: 'f53a5c4d6fe6a3c2904fd05bc54603128995099c', class: labelClasses }, this.label)), this.supportingText && (h("div", { key: '1e4d3e0d5ccdb230306e74692309ae837b0d5ec4', class: "toggle-supporting-text" }, this.supportingText))))));
-    }
-    static get formAssociated() { return true; }
-    static get style() { return bhToggleCss; }
-}, [833, "bh-toggle", {
-        "size": [1],
-        "showText": [4, "show-text"],
-        "label": [1],
-        "supportingText": [1, "supporting-text"],
-        "disabled": [4],
-        "checked": [1028],
-        "name": [1],
-        "value": [1],
-        "required": [4],
-        "defaultChecked": [4, "default-checked"],
-        "isFocused": [32],
-        "isHovered": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bh-toggle"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bh-toggle":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, BhToggle);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { BhToggle as B, defineCustomElement as d };
-//# sourceMappingURL=p-CsRNKalM.js.map
-
-//# sourceMappingURL=p-CsRNKalM.js.map

package/components/p-CsRNKalM.js.map

@@ -1 +0,0 @@
-{"file":"p-CsRNKalM.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,utJAAutJ;;MCW9tJ,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;;;;;;;;;;AACA,IAAA,SAAS;AAC5B;;AAEG;IACK,IAAI,GAAe,IAAI;AAE/B;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,KAAK,GAAW,EAAE;AAE1B;;AAEG;IACK,cAAc,GAAW,EAAE;AAEnC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACsB,OAAO,GAAY,KAAK;AAEjD;;AAEG;IACK,IAAI,GAAW,EAAE;AAEzB;;AAEG;IACK,KAAK,GAAW,IAAI;AAE5B;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,cAAc,GAAY,KAAK;AAEvC;;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,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;AAC3E,QAAA,gBAAgB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC;;IAG/D,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc;AAClC,QAAA,sBAAsB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;AAC3E,QAAA,gBAAgB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC;;IAGvD,YAAY,GAAG,MAAW;QAChC,IAAI,IAAI,CAAC,QAAQ;YAAE;AAEnB,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;AAC5B,QAAA,sBAAsB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;AAC3E,QAAA,gBAAgB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC;QAC7D,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;AAClC,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,YAAY,EAAE;;AAEvB,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;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;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,gBAAgB,EAAE,IAAI;YACtB,kBAAkB,EAAE,IAAI,CAAC,QAAQ;AACjC,YAAA,CAAC,eAAe,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;SACnC;AAED,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,eAAe,EAAE,IAAI;YACrB,gBAAgB,EAAE,IAAI,CAAC,OAAO;AAC9B,YAAA,kBAAkB,EAAE,CAAC,IAAI,CAAC,OAAO;AACjC,YAAA,CAAC,UAAU,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC7B,iBAAiB,EAAE,IAAI,CAAC,QAAQ;YAChC,cAAc,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ;YAChD,cAAc,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ;SACjD;AAED,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,eAAe,EAAE,IAAI;YACrB,uBAAuB,EAAE,IAAI,CAAC,OAAO;AACrC,YAAA,yBAAyB,EAAE,CAAC,IAAI,CAAC,OAAO;AACxC,YAAA,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YACpC,wBAAwB,EAAE,IAAI,CAAC,QAAQ;SACxC;AAED,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,cAAc,EAAE,IAAI;AACpB,YAAA,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;SACpC;QAED,QACE,4DAAK,KAAK,EAAE,cAAc,EAAE,IAAI,EAAC,SAAS,EAAA,EACxC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,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,QAAQ,EACC,cAAA,EAAA,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC9B,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EACnC,YAAA,EAAA,IAAI,CAAC,KAAK,IAAI,SAAS,EACnC,IAAI,EAAC,QAAQ,EAAA,EAEb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,aAAa,EAAE,IAAI,EAAC,QAAQ,GAAO,CAC3C,EAEL,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,cAAc,CAAC,KACnD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACrB,IAAI,CAAC,KAAK,KACT,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAG,EAAA,IAAI,CAAC,KAAK,CAAQ,CAC/C,EACA,IAAI,CAAC,cAAc,KAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EAAE,IAAI,CAAC,cAAc,CAAO,CAChE,CACG,CACP,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-toggle/bh-toggle.css?tag=bh-toggle&encapsulation=shadow","src/components/bh-toggle/bh-toggle.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-TOGGLE COMPONENT STYLES - Material You Design\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n/* Toggle Wrapper */\n.toggle-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0;\n}\n\n.toggle-with-text.toggle-size-sm {\n  gap: var(--spacing-md);\n}\n\n.toggle-with-text.toggle-size-md {\n  gap: var(--spacing-lg);\n}\n\n/* Toggle Switch Base */\n.toggle-switch {\n  position: relative;\n  display: inline-block;\n  border-radius: var(--radius-full);\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  outline: none;\n  border: 1px solid transparent;\n  background: transparent;\n  overflow: visible;\n  padding: 0;\n}\n\n.toggle-switch:focus {\n  outline: none;\n}\n\n.toggle-switch.toggle-disabled {\n  cursor: not-allowed;\n  opacity: 0.38;\n}\n\n/* Toggle Switch Sizes */\n.toggle-switch.toggle-sm {\n  width: 36px;\n  height: 20px;\n}\n\n.toggle-switch.toggle-md {\n  width: 40px;\n  height: 24px;\n}\n\n/* Toggle Switch States - Unpressed (False) */\n.toggle-switch.toggle-unpressed {\n  background-color: var(--color-neutral-300);\n  border-color: transparent;\n}\n\n.toggle-switch.toggle-unpressed.toggle-hover {\n  background-color: var(--color-neutral-400);\n  border-color: transparent;\n}\n\n.toggle-switch.toggle-unpressed.toggle-focus {\n  background-color: var(--color-neutral-200);\n  border-color: transparent;\n}\n\n/* Focus ring for unpressed state */\n.toggle-switch.toggle-unpressed.toggle-focus .toggle-button::after {\n  content: '';\n  position: absolute;\n  top: -6px;\n  left: -6px;\n  right: -6px;\n  bottom: -6px;\n  border-radius: var(--radius-full);\n  background: var(--color-neutral-600);\n  opacity: 0.12;\n  pointer-events: none;\n}\n\n.toggle-switch.toggle-unpressed.toggle-disabled {\n  background-color: var(--color-neutral-100);\n  border-color: transparent;\n}\n\n/* Toggle Switch States - Pressed (True) */\n.toggle-switch.toggle-pressed {\n  background-color: var(--color-brand-600);\n  border-color: var(--color-brand-600);\n}\n\n.toggle-switch.toggle-pressed.toggle-hover {\n  background-color: var(--color-brand-700);\n  border-color: var(--color-brand-700);\n}\n\n.toggle-switch.toggle-pressed.toggle-focus {\n  background-color: var(--color-brand-600);\n  border-color: var(--color-brand-600);\n}\n\n/* Focus ring for pressed state */\n.toggle-switch.toggle-pressed.toggle-focus .toggle-button::after {\n  content: '';\n  position: absolute;\n  top: -6px;\n  left: -6px;\n  right: -6px;\n  bottom: -6px;\n  border-radius: var(--radius-full);\n  background: var(--color-brand-100);\n  opacity: 0.24;\n  pointer-events: none;\n}\n\n.toggle-switch.toggle-pressed.toggle-disabled {\n  background-color: var(--color-neutral-200);\n  border-color: var(--color-neutral-200);\n}\n\n.toggle-switch.toggle-pressed.toggle-disabled .toggle-button {\n  background-color: var(--color-neutral-100);\n}\n\n/* Toggle Button (Handle) */\n.toggle-button {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  border-radius: var(--radius-full);\n  background-color: var(--color-neutral-600);\n  transition: all 0.2s ease;\n}\n\n/* Toggle Button States - Unpressed */\n.toggle-switch.toggle-unpressed .toggle-button {\n  background-color: var(--color-white);\n}\n\n.toggle-switch.toggle-sm.toggle-unpressed .toggle-button {\n  width: 16px;\n  height: 16px;\n  left: 1px;\n}\n\n.toggle-switch.toggle-md.toggle-unpressed .toggle-button {\n  width: 20px;\n  height: 20px;\n  left: 1px;\n}\n\n.toggle-switch.toggle-unpressed.toggle-hover .toggle-button {\n  background-color: var(--color-white);\n  box-shadow: var(--shadow-sm);\n}\n\n/* Toggle Button States - Pressed */\n.toggle-switch.toggle-pressed .toggle-button {\n  background-color: var(--color-white);\n}\n\n.toggle-switch.toggle-sm.toggle-pressed .toggle-button {\n  width: 16px;\n  height: 16px;\n  left: calc(100% - 17px);\n}\n\n.toggle-switch.toggle-md.toggle-pressed .toggle-button {\n  width: 20px;\n  height: 20px; \n  left: calc(100% - 21px);\n}\n\n.toggle-switch.toggle-pressed.toggle-hover .toggle-button {\n  background-color: var(--color-white);\n}\n\n/* Toggle Button Disabled State */\n.toggle-switch.toggle-disabled .toggle-button {\n  background-color: var(--color-neutral-400);\n  box-shadow: none;\n}\n\n.toggle-switch.toggle-sm.toggle-unpressed.toggle-disabled .toggle-button {\n  width: 16px;\n  height: 16px;\n  left: 2px;\n  background-color: var(--color-neutral-400);\n}\n\n.toggle-switch.toggle-md.toggle-unpressed.toggle-disabled .toggle-button {\n  width: 16px;\n  height: 16px;\n  left: 4px;\n  background-color: var(--color-neutral-400);\n}\n\n.toggle-switch.toggle-sm.toggle-pressed.toggle-disabled .toggle-button {\n  width: 16px;\n  height: 16px;\n  left: calc(100% - 17px);\n  background-color: var(--color-neutral-400);\n}\n\n.toggle-switch.toggle-md.toggle-pressed.toggle-disabled .toggle-button {\n  width: 20px;\n  height: 20px;\n  left: calc(100% - 21px);\n  background-color: var(--color-white);\n}\n\n/* Toggle Text Container */\n.toggle-text {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n}\n\n/* Toggle Label */\n.toggle-label {\n  color: var(--color-neutral-700);\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  text-align: left;\n  margin: 0;\n  line-height: 1.5;\n}\n\n.toggle-label.toggle-label-sm {\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n}\n\n.toggle-label.toggle-label-md {\n  font-size: var(--text-md-size);\n  line-height: var(--text-md-line);\n}\n\n/* Toggle Supporting Text */\n.toggle-supporting-text {\n  color: var(--color-neutral-600);\n  font-family: var(--font-inter);\n  font-weight: var(--weight-regular);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n  text-align: left;\n  margin: 0;\n  margin-top: var(--spacing-xxs);\n}\n\n/* ==========================================================================\n   ACCESSIBILITY\n   ========================================================================== */\n\n@media (prefers-reduced-motion: reduce) {\n  .toggle-switch,\n  .toggle-button {\n    transition: none;\n  }\n}\n\n@media (prefers-contrast: high) {\n  .toggle-switch.toggle-unpressed {\n    border: 2px solid currentColor;\n  }\n\n  .toggle-switch.toggle-pressed {\n    border: 2px solid currentColor;\n  }\n}\n\n.toggle-switch:focus-visible .toggle-button::after {\n  content: '';\n  position: absolute;\n  top: -6px;\n  left: -6px;\n  right: -6px;\n  bottom: -6px;\n  border-radius: var(--radius-full);\n  background: currentColor;\n  opacity: 0.24;\n  pointer-events: none;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, AttachInternals } from '@stencil/core';\nimport { syncCheckableFormValue, validateRequired } from '../../utils/form';\n\nexport type ToggleSize = 'sm' | 'md';\n\n@Component({\n  tag: 'bh-toggle',\n  styleUrl: 'bh-toggle.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class BhToggle {\n  @AttachInternals() internals!: ElementInternals;\n  /**\n   * The size of the toggle\n   */\n  @Prop() size: ToggleSize = 'md';\n\n  /**\n   * Whether to show the label and supporting text\n   */\n  @Prop() showText: boolean = false;\n\n  /**\n   * The label text\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Supporting text below the label\n   */\n  @Prop() supportingText: string = '';\n\n  /**\n   * Whether the toggle is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the toggle is checked (controlled mode)\n   */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  /**\n   * Name attribute for form submission\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Value when checked (default: 'on')\n   */\n  @Prop() value: string = 'on';\n\n  /**\n   * Whether the toggle is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Default checked state for form reset\n   */\n  @Prop() defaultChecked: boolean = false;\n\n  /**\n   * Internal focus state\n   */\n  @State() isFocused: boolean = false;\n\n  /**\n   * Internal hover state\n   */\n  @State() isHovered: boolean = false;\n\n  /**\n   * Emitted when the toggle state changes\n   */\n  @Event() bhChange!: EventEmitter<boolean>;\n\n  componentDidLoad() {\n    syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n    validateRequired(this.internals, this.required, this.checked);\n  }\n\n  formResetCallback() {\n    this.checked = this.defaultChecked;\n    syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n    validateRequired(this.internals, this.required, this.checked);\n  }\n\n  private handleToggle = (): void => {\n    if (this.disabled) return;\n\n    this.checked = !this.checked;\n    syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n    validateRequired(this.internals, this.required, this.checked);\n    this.bhChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.handleToggle();\n    }\n  };\n\n  private handleMouseEnter = (): void => {\n    this.isHovered = true;\n  };\n\n  private handleMouseLeave = (): void => {\n    this.isHovered = false;\n  };\n\n  private handleFocus = (): void => {\n    this.isFocused = true;\n  };\n\n  private handleBlur = (): void => {\n    this.isFocused = false;\n  };\n\n  render() {\n    const wrapperClasses = {\n      'toggle-wrapper': true,\n      'toggle-with-text': this.showText,\n      [`toggle-size-${this.size}`]: true,\n    };\n\n    const switchClasses = {\n      'toggle-switch': true,\n      'toggle-pressed': this.checked,\n      'toggle-unpressed': !this.checked,\n      [`toggle-${this.size}`]: true,\n      'toggle-disabled': this.disabled,\n      'toggle-focus': this.isFocused && !this.disabled,\n      'toggle-hover': this.isHovered && !this.disabled,\n    };\n\n    const buttonClasses = {\n      'toggle-button': true,\n      'toggle-button-pressed': this.checked,\n      'toggle-button-unpressed': !this.checked,\n      [`toggle-button-${this.size}`]: true,\n      'toggle-button-disabled': this.disabled,\n    };\n\n    const labelClasses = {\n      'toggle-label': true,\n      [`toggle-label-${this.size}`]: true,\n    };\n\n    return (\n      <div class={wrapperClasses} part=\"wrapper\">\n        <div\n          class={switchClasses}\n          onClick={this.handleToggle}\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=\"switch\"\n          aria-checked={this.checked ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-label={this.label || undefined}\n          part=\"switch\"\n        >\n          <div class={buttonClasses} part=\"button\"></div>\n        </div>\n\n        {this.showText && (this.label || this.supportingText) && (\n          <div class=\"toggle-text\">\n            {this.label && (\n              <span class={labelClasses}>{this.label}</span>\n            )}\n            {this.supportingText && (\n              <div class=\"toggle-supporting-text\">{this.supportingText}</div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/components/p-CuVsQ9St.js

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

package/components/p-CuVsQ9St.js.map

@@ -1 +0,0 @@
-{"file":"p-CuVsQ9St.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/components/p-D3OkBDd3.js

@@ -1,100 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-9a7sQzad.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-D3OkBDd3.js.map
-
-//# sourceMappingURL=p-D3OkBDd3.js.map

package/components/p-D3OkBDd3.js.map

@@ -1 +0,0 @@
-{"file":"p-D3OkBDd3.js","mappings":";;AAAA,MAAM,eAAe,GAAG,+4FAA+4F;;MCe15F,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;;AACvB;;AAEG;IACK,SAAS,GAAwB,SAAS;AAElD;;AAEG;IACK,IAAI,GAAmB,IAAI;AAEnC;;AAEG;IACK,QAAQ,GAAW,KAAK;AAEhC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,OAAO,GAAY,KAAK;AAEhC;;;;;AAKG;IACK,IAAI,GAAmB,QAAQ;AAEvC;;AAEG;IACK,SAAS,GAAkB,IAAI;AAEvC;;AAEG;AACM,IAAA,OAAO;AAER,IAAA,WAAW,GAAG,CAAC,KAAiB,KAAU;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACnC,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;;AAE5B,KAAC;AAEO,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAU;AACrD,QAAA,IACE,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG;YAC3C,CAAC,IAAI,CAAC,QAAQ;AACd,YAAA,CAAC,IAAI,CAAC,OAAO,EACb;YACA,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAA8B,CAAC;;AAErD,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,CAAC,eAAe,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;AACvC,YAAA,CAAC,eAAe,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAClC,sBAAsB,EAAE,IAAI,CAAC,QAAQ;YACrC,qBAAqB,EAAE,IAAI,CAAC,OAAO;SACpC;QAED,QACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,YAAA,EACX,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,EAC5B,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,IAAI,EAAC,QAAQ,EAAA,EAEZ,IAAI,CAAC,OAAO,IACX,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,SAAS,GAAQ,KAEpD,YAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,MAAM,EAAA,EACrD,IAAI,CAAC,QAAQ,CACT,CACR,CACM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-button-icon/bh-button-icon.css?tag=bh-button-icon&encapsulation=shadow","src/components/bh-button-icon/bh-button-icon.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  font-family: var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n/* Base Button Icon */\n.button-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: var(--radius-md, 8px);\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n  font-family: inherit;\n  outline: none;\n  padding: 0;\n}\n\n.button-icon:focus-visible {\n  box-shadow: 0 0 0 2px var(--color-white, #FFFFFF), 0 0 0 4px var(--color-brand-500, #7F56D9);\n}\n\n/* Sizes */\n.button-icon-xs {\n  width: 24px;\n  height: 24px;\n}\n\n.button-icon-xs .icon {\n  font-size: 16px;\n}\n\n.button-icon-sm {\n  width: 32px;\n  height: 32px;\n}\n\n.button-icon-sm .icon {\n  font-size: 18px;\n}\n\n.button-icon-md {\n  width: 40px;\n  height: 40px;\n}\n\n.button-icon-md .icon {\n  font-size: 20px;\n}\n\n.button-icon-lg {\n  width: 48px;\n  height: 48px;\n}\n\n.button-icon-lg .icon {\n  font-size: 24px;\n}\n\n/* Primary Hierarchy */\n.button-icon-primary {\n  background: var(--color-brand-600, #6941C6);\n  color: var(--color-white, #FFFFFF);\n}\n\n.button-icon-primary:hover:not(.button-icon-disabled) {\n  background: var(--color-brand-700, #5235A8);\n}\n\n.button-icon-primary:active:not(.button-icon-disabled) {\n  background: var(--color-brand-800, #42298F);\n}\n\n/* Secondary Hierarchy */\n.button-icon-secondary {\n  background: var(--color-white, #FFFFFF);\n  color: var(--color-neutral-700, #344054);\n  border: 1px solid var(--color-neutral-300, #D0D5DD);\n}\n\n.button-icon-secondary:hover:not(.button-icon-disabled) {\n  background: var(--color-neutral-50, #F9FAFB);\n  border-color: var(--color-neutral-400, #98A2B3);\n}\n\n.button-icon-secondary:active:not(.button-icon-disabled) {\n  background: var(--color-neutral-100, #F2F4F7);\n}\n\n/* Tertiary Hierarchy */\n.button-icon-tertiary {\n  background: transparent;\n  color: var(--color-brand-600, #6941C6);\n}\n\n.button-icon-tertiary:hover:not(.button-icon-disabled) {\n  background: var(--color-brand-50, #F9F5FF);\n}\n\n.button-icon-tertiary:active:not(.button-icon-disabled) {\n  background: var(--color-brand-100, #F4EBFF);\n}\n\n/* Quaternary Hierarchy */\n.button-icon-quaternary {\n  background: transparent;\n  color: var(--color-neutral-500, #667085);\n}\n\n.button-icon-quaternary:hover:not(.button-icon-disabled) {\n  background: var(--color-neutral-100, #F2F4F7);\n  color: var(--color-neutral-700, #344054);\n}\n\n.button-icon-quaternary:active:not(.button-icon-disabled) {\n  background: var(--color-neutral-200, #EAECF0);\n}\n\n/* Disabled State */\n.button-icon-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Loading State */\n.button-icon-loading {\n  cursor: wait;\n}\n\n/* Loading Spinner */\n.loading-spinner {\n  width: 16px;\n  height: 16px;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: 50%;\n  animation: spin 0.8s linear infinite;\n}\n\n.button-icon-sm .loading-spinner {\n  width: 14px;\n  height: 14px;\n}\n\n.button-icon-xs .loading-spinner {\n  width: 12px;\n  height: 12px;\n}\n\n.button-icon-lg .loading-spinner {\n  width: 20px;\n  height: 20px;\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Icon */\n.icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Material Symbols */\n.material-symbols-outlined {\n  font-family: 'Material Symbols Outlined';\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type ButtonIconHierarchy =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'quaternary';\nexport type ButtonIconSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type ButtonIconType = 'button' | 'submit' | 'reset';\n\n@Component({\n  tag: 'bh-button-icon',\n  styleUrl: 'bh-button-icon.css',\n  shadow: true,\n})\nexport class BhButtonIcon {\n  /**\n   * The visual hierarchy of the button\n   */\n  @Prop() hierarchy: ButtonIconHierarchy = 'primary';\n\n  /**\n   * The size of the button\n   */\n  @Prop() size: ButtonIconSize = 'md';\n\n  /**\n   * The icon name (Material Symbols)\n   */\n  @Prop() iconName: string = 'add';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the button is in loading state\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * The type of button for form submission\n   * - 'button': No form submission (default)\n   * - 'submit': Submits the form\n   * - 'reset': Resets the form\n   */\n  @Prop() type: ButtonIconType = 'button';\n\n  /**\n   * Accessible label for the button\n   */\n  @Prop() ariaLabel: string | null = null;\n\n  /**\n   * Emitted when the button is clicked\n   */\n  @Event() bhClick!: EventEmitter<MouseEvent>;\n\n  private handleClick = (event: MouseEvent): void => {\n    if (!this.disabled && !this.loading) {\n      this.bhClick.emit(event);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (\n      (event.key === 'Enter' || event.key === ' ') &&\n      !this.disabled &&\n      !this.loading\n    ) {\n      event.preventDefault();\n      this.bhClick.emit(event as unknown as MouseEvent);\n    }\n  };\n\n  render() {\n    const buttonClasses = {\n      'button-icon': true,\n      [`button-icon-${this.hierarchy}`]: true,\n      [`button-icon-${this.size}`]: true,\n      'button-icon-disabled': this.disabled,\n      'button-icon-loading': this.loading,\n    };\n\n    return (\n      <button\n        type={this.type}\n        class={buttonClasses}\n        disabled={this.disabled}\n        aria-label={this.ariaLabel || this.iconName}\n        aria-disabled={this.disabled ? 'true' : undefined}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n        part=\"button\"\n      >\n        {this.loading ? (\n          <span class=\"loading-spinner\" part=\"spinner\"></span>\n        ) : (\n          <span class=\"material-symbols-outlined icon\" part=\"icon\">\n            {this.iconName}\n          </span>\n        )}\n      </button>\n    );\n  }\n}\n"],"version":3}

package/components/p-D6cM-mvE.js

@@ -1,64 +0,0 @@
-import { p as proxyCustomElement, H, h } from './p-9a7sQzad.js';
-
-const bhFeaturedIconCss = ":host{display:inline-block}.featured-icon{display:inline-flex;align-items:center;justify-content:center;transition:all 0.2s ease}.featured-icon-sm{width:32px;height:32px;border-radius:6px}.featured-icon-md{width:40px;height:40px;border-radius:8px}.featured-icon-lg{width:48px;height:48px;border-radius:10px}.featured-icon-xl{width:56px;height:56px;border-radius:12px}.icon-sm{font-size:var(--icon-size-xs);width:var(--icon-size-xs);height:var(--icon-size-xs);line-height:1}.icon-md{font-size:var(--icon-size-md);width:var(--icon-size-md);height:var(--icon-size-md);line-height:1}.icon-lg{font-size:var(--icon-size-lg);width:var(--icon-size-lg);height:var(--icon-size-lg);line-height:1}.icon-xl{font-size:var(--icon-size-2xl);width:var(--icon-size-2xl);height:var(--icon-size-2xl);line-height:1}.featured-icon-brand.featured-icon-outlined{background-color:transparent;border:1px solid var(--color-neutral-200)}.featured-icon-brand.featured-icon-outlined .material-symbols-outlined{color:var(--color-brand-600)}.featured-icon-gray.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-gray.featured-icon-outlined .material-symbols-outlined{color:var(--color-neutral-600)}.featured-icon-error.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-error.featured-icon-outlined .material-symbols-outlined{color:var(--color-error-600)}.featured-icon-warning.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-warning.featured-icon-outlined .material-symbols-outlined{color:var(--color-warning-600)}.featured-icon-success.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-success.featured-icon-outlined .material-symbols-outlined{color:var(--color-success-600)}.featured-icon-highlight.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-highlight.featured-icon-outlined .material-symbols-outlined{color:var(--color-purple-600)}.featured-icon-brand.featured-icon-filled{background-color:var(--color-brand-100);border:none}.featured-icon-brand.featured-icon-filled .material-symbols-outlined{color:var(--color-brand-600)}.featured-icon-gray.featured-icon-filled{background-color:var(--color-neutral-100);border:none}.featured-icon-gray.featured-icon-filled .material-symbols-outlined{color:var(--color-neutral-600)}.featured-icon-error.featured-icon-filled{background-color:var(--color-error-100);border:none}.featured-icon-error.featured-icon-filled .material-symbols-outlined{color:var(--color-error-600)}.featured-icon-warning.featured-icon-filled{background-color:var(--color-warning-200);border:none}.featured-icon-warning.featured-icon-filled .material-symbols-outlined{color:var(--color-warning-600)}.featured-icon-success.featured-icon-filled{background-color:var(--color-success-100);border:none}.featured-icon-success.featured-icon-filled .material-symbols-outlined{color:var(--color-success-600)}.featured-icon-highlight.featured-icon-filled{background-color:var(--color-purple-200);border:none}.featured-icon-highlight.featured-icon-filled .material-symbols-outlined{color:var(--color-purple-600)}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;user-select:none}";
-
-const BhFeaturedIcon = /*@__PURE__*/ proxyCustomElement(class BhFeaturedIcon extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-    }
-    /**
-     * The size of the featured icon
-     */
-    size = 'md';
-    /**
-     * The color theme of the featured icon
-     */
-    color = 'gray';
-    /**
-     * The style variant (outlined or filled)
-     */
-    iconStyle = 'outlined';
-    /**
-     * The Material Symbol icon name
-     */
-    icon = 'star';
-    render() {
-        const containerClasses = {
-            'featured-icon': true,
-            [`featured-icon-${this.size}`]: true,
-            [`featured-icon-${this.color}`]: true,
-            [`featured-icon-${this.iconStyle}`]: true,
-        };
-        const iconClasses = `material-symbols-outlined icon-${this.size}`;
-        return (h("div", { key: 'f28b347b9594d65de9d253da980bd43da0d02055', class: containerClasses, part: "container" }, h("span", { key: '9986022247eb8e6f3cde419b22d5f277796386f3', class: iconClasses }, this.icon)));
-    }
-    static get style() { return bhFeaturedIconCss; }
-}, [769, "bh-featured-icon", {
-        "size": [1],
-        "color": [1],
-        "iconStyle": [1, "icon-style"],
-        "icon": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bh-featured-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bh-featured-icon":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, BhFeaturedIcon);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { BhFeaturedIcon as B, defineCustomElement as d };
-//# sourceMappingURL=p-D6cM-mvE.js.map
-
-//# sourceMappingURL=p-D6cM-mvE.js.map

package/components/p-D6cM-mvE.js.map

@@ -1 +0,0 @@
-{"file":"p-D6cM-mvE.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,4tGAA4tG;;MCWzuG,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;;;AACzB;;AAEG;IACK,IAAI,GAAqB,IAAI;AAErC;;AAEG;IACK,KAAK,GAAsB,MAAM;AAEzC;;AAEG;IACK,SAAS,GAAsB,UAAU;AAEjD;;AAEG;IACK,IAAI,GAAW,MAAM;IAE7B,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AACpC,YAAA,CAAC,iBAAiB,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,iBAAiB,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;SAC1C;AAED,QAAA,MAAM,WAAW,GAAG,CAAA,+BAAA,EAAkC,IAAI,CAAC,IAAI,EAAE;AAEjE,QAAA,QACE,4DAAK,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAC,WAAW,EAAA,EAC5C,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,WAAW,EAAG,EAAA,IAAI,CAAC,IAAI,CAAQ,CACxC;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-featured-icon/bh-featured-icon.css?tag=bh-featured-icon&encapsulation=shadow","src/components/bh-featured-icon/bh-featured-icon.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-FEATURED-ICON COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n.featured-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n}\n\n/* Size variations */\n.featured-icon-sm {\n  width: 32px;\n  height: 32px;\n  border-radius: 6px;\n}\n\n.featured-icon-md {\n  width: 40px;\n  height: 40px;\n  border-radius: 8px;\n}\n\n.featured-icon-lg {\n  width: 48px;\n  height: 48px;\n  border-radius: 10px;\n}\n\n.featured-icon-xl {\n  width: 56px;\n  height: 56px;\n  border-radius: 12px;\n}\n\n/* Icon sizes - matching Figma specs */\n.icon-sm {\n  font-size: var(--icon-size-xs);\n  width: var(--icon-size-xs);\n  height: var(--icon-size-xs);\n  line-height: 1;\n}\n\n.icon-md {\n  font-size: var(--icon-size-md);\n  width: var(--icon-size-md);\n  height: var(--icon-size-md);\n  line-height: 1;\n}\n\n.icon-lg {\n  font-size: var(--icon-size-lg);\n  width: var(--icon-size-lg);\n  height: var(--icon-size-lg);\n  line-height: 1;\n}\n\n.icon-xl {\n  font-size: var(--icon-size-2xl);\n  width: var(--icon-size-2xl);\n  height: var(--icon-size-2xl);\n  line-height: 1;\n}\n\n/* ============================================\n   OUTLINED STYLES\n   ============================================ */\n\n/* Brand color - Outlined */\n.featured-icon-brand.featured-icon-outlined {\n  background-color: transparent;\n  border: 1px solid var(--color-neutral-200);\n}\n\n.featured-icon-brand.featured-icon-outlined .material-symbols-outlined {\n  color: var(--color-brand-600);\n}\n\n/* Gray color - Outlined */\n.featured-icon-gray.featured-icon-outlined {\n  border: 1px solid var(--color-neutral-200);\n}\n\n.featured-icon-gray.featured-icon-outlined .material-symbols-outlined {\n  color: var(--color-neutral-600);\n}\n\n/* Error color - Outlined */\n.featured-icon-error.featured-icon-outlined {\n  border: 1px solid var(--color-neutral-200);\n}\n\n.featured-icon-error.featured-icon-outlined .material-symbols-outlined {\n  color: var(--color-error-600);\n}\n\n/* Warning color - Outlined */\n.featured-icon-warning.featured-icon-outlined {\n  border: 1px solid var(--color-neutral-200);\n}\n\n.featured-icon-warning.featured-icon-outlined .material-symbols-outlined {\n  color: var(--color-warning-600);\n}\n\n/* Success color - Outlined */\n.featured-icon-success.featured-icon-outlined {\n  border: 1px solid var(--color-neutral-200);\n}\n\n.featured-icon-success.featured-icon-outlined .material-symbols-outlined {\n  color: var(--color-success-600);\n}\n\n/* Highlight color - Outlined */\n.featured-icon-highlight.featured-icon-outlined {\n  border: 1px solid var(--color-neutral-200);\n}\n\n.featured-icon-highlight.featured-icon-outlined .material-symbols-outlined {\n  color: var(--color-purple-600);\n}\n\n/* ============================================\n   FILLED STYLES\n   ============================================ */\n\n/* Brand color - Filled */\n.featured-icon-brand.featured-icon-filled {\n  background-color: var(--color-brand-100);\n  border: none;\n}\n\n.featured-icon-brand.featured-icon-filled .material-symbols-outlined {\n  color: var(--color-brand-600);\n}\n\n/* Gray color - Filled */\n.featured-icon-gray.featured-icon-filled {\n  background-color: var(--color-neutral-100);\n  border: none;\n}\n\n.featured-icon-gray.featured-icon-filled .material-symbols-outlined {\n  color: var(--color-neutral-600);\n}\n\n/* Error color - Filled */\n.featured-icon-error.featured-icon-filled {\n  background-color: var(--color-error-100);\n  border: none;\n}\n\n.featured-icon-error.featured-icon-filled .material-symbols-outlined {\n  color: var(--color-error-600);\n}\n\n/* Warning color - Filled */\n.featured-icon-warning.featured-icon-filled {\n  background-color: var(--color-warning-200);\n  border: none;\n}\n\n.featured-icon-warning.featured-icon-filled .material-symbols-outlined {\n  color: var(--color-warning-600);\n}\n\n/* Success color - Filled */\n.featured-icon-success.featured-icon-filled {\n  background-color: var(--color-success-100);\n  border: none;\n}\n\n.featured-icon-success.featured-icon-filled .material-symbols-outlined {\n  color: var(--color-success-600);\n}\n\n/* Highlight color - Filled */\n.featured-icon-highlight.featured-icon-filled {\n  background-color: var(--color-purple-200);\n  border: none;\n}\n\n.featured-icon-highlight.featured-icon-filled .material-symbols-outlined {\n  color: var(--color-purple-600);\n}\n\n/* Material Symbols base styles */\n.material-symbols-outlined {\n  font-family: 'Material Symbols Outlined';\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n  user-select: none;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type FeaturedIconSize = 'sm' | 'md' | 'lg' | 'xl';\nexport type FeaturedIconColor = 'brand' | 'gray' | 'error' | 'warning' | 'success' | 'highlight';\nexport type FeaturedIconStyle = 'outlined' | 'filled';\n\n@Component({\n  tag: 'bh-featured-icon',\n  styleUrl: 'bh-featured-icon.css',\n  shadow: true,\n})\nexport class BhFeaturedIcon {\n  /**\n   * The size of the featured icon\n   */\n  @Prop() size: FeaturedIconSize = 'md';\n\n  /**\n   * The color theme of the featured icon\n   */\n  @Prop() color: FeaturedIconColor = 'gray';\n\n  /**\n   * The style variant (outlined or filled)\n   */\n  @Prop() iconStyle: FeaturedIconStyle = 'outlined';\n\n  /**\n   * The Material Symbol icon name\n   */\n  @Prop() icon: string = 'star';\n\n  render() {\n    const containerClasses = {\n      'featured-icon': true,\n      [`featured-icon-${this.size}`]: true,\n      [`featured-icon-${this.color}`]: true,\n      [`featured-icon-${this.iconStyle}`]: true,\n    };\n\n    const iconClasses = `material-symbols-outlined icon-${this.size}`;\n\n    return (\n      <div class={containerClasses} part=\"container\">\n        <span class={iconClasses}>{this.icon}</span>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/components/p-D6kh9oF2.js

@@ -1,70 +0,0 @@
-import { p as proxyCustomElement, H, h } from './p-9a7sQzad.js';
-
-const bhTooltipCss = ":host{display:inline-block}.tooltip{position:absolute;z-index:10000;pointer-events:none;opacity:0;transition:opacity 0.2s ease-in-out;white-space:nowrap}.tooltip-visible{opacity:1}.tooltip-content{background-color:var(--color-neutral-900);color:var(--color-white);font-family:var(--font-inter);font-weight:var(--weight-semibold);font-size:12px;line-height:1.5em;padding:8px 12px;border-radius:8px;box-shadow:var(--shadow-popover);position:relative}.tooltip-top{bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px}.tooltip-bottom{top:100%;left:50%;transform:translateX(-50%);margin-top:6px}.tooltip-left{right:100%;top:50%;transform:translateY(-50%);margin-right:6px}.tooltip-right{left:100%;top:50%;transform:translateY(-50%);margin-left:6px}.tooltip.multiline{white-space:normal}.tooltip.multiline .tooltip-content{max-width:240px}.tooltip-icon.tooltip-top{margin-bottom:4px}.tooltip-icon.tooltip-bottom{margin-top:4px}.tooltip-icon.tooltip-left{margin-right:4px}.tooltip-icon.tooltip-right{margin-left:4px}";
-
-const BhTooltip = /*@__PURE__*/ proxyCustomElement(class BhTooltip extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-    }
-    /**
-     * The tooltip text content
-     */
-    text = '';
-    /**
-     * Position of the tooltip relative to its target
-     */
-    position = 'top';
-    /**
-     * Variant of the tooltip (default or icon)
-     */
-    variant = 'default';
-    /**
-     * Whether the tooltip is visible
-     */
-    visible = false;
-    /**
-     * Maximum width in pixels (enables multiline if > 240)
-     */
-    maxWidth;
-    render() {
-        const tooltipClasses = {
-            'tooltip': true,
-            [`tooltip-${this.position}`]: true,
-            [`tooltip-${this.variant}`]: true,
-            'tooltip-visible': this.visible,
-            'multiline': this.maxWidth !== undefined && this.maxWidth > 240,
-        };
-        const tooltipStyles = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
-        return (h("div", { key: '1306877d710884c4fee82aec1abb4ff8b8cddc9b', class: tooltipClasses, style: tooltipStyles, role: "tooltip", part: "tooltip" }, h("div", { key: 'e0163acbd31726d37b1c3fa249640a9f3af447ca', class: "tooltip-content" }, this.text)));
-    }
-    static get style() { return bhTooltipCss; }
-}, [769, "bh-tooltip", {
-        "text": [1],
-        "position": [1],
-        "variant": [1],
-        "visible": [4],
-        "maxWidth": [2, "max-width"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bh-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bh-tooltip":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, BhTooltip);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { BhTooltip as B, defineCustomElement as d };
-//# sourceMappingURL=p-D6kh9oF2.js.map
-
-//# sourceMappingURL=p-D6kh9oF2.js.map

package/components/p-D6kh9oF2.js.map

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