@actabldesign/bellhop-core 0.0.3

package/components/p-DHSWIF-h.js

@@ -0,0 +1,214 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-9a7sQzad.js';
+import { d as defineCustomElement$3 } from './p-DTgHvmlL.js';
+import { d as defineCustomElement$2 } from './p-Bbo_Dwmk.js';
+import { d as defineCustomElement$1 } from './p-CDgBIIbC.js';
+
+const bhPickerMenuCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;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-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:block}.picker-menu{width:fit-content;min-width:320px;background:var(--color-white);border-radius:var(--radius-md);box-shadow:0px 32px 64px -12px rgba(64, 73, 104, 0.14),\n    0px 0px 1px 1px rgba(64, 73, 104, 0.1);border:1px solid var(--color-neutral-200);overflow:hidden;flex-shrink:0;position:relative;box-sizing:border-box}.picker-menu.animate-dropdown-enter{animation:dropdownEnter 0.15s ease-out forwards}.picker-menu.animate-dropdown-exit{animation:dropdownExit 0.15s ease-out forwards}@keyframes dropdownEnter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes dropdownExit{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}.picker-menu.no-footer{padding-bottom:var(--spacing-md)}.picker-menu-footer{border-top:1px solid var(--color-neutral-200);padding:var(--spacing-xl) var(--spacing-xl);background:var(--color-white)}.picker-menu-actions{display:flex;justify-content:flex-end;align-items:center;gap:var(--spacing-lg)}.picker-menu-actions.has-today-button{justify-content:space-between}.picker-menu-main-actions{display:flex;gap:var(--spacing-lg)}";
+
+const BhPickerMenu = /*@__PURE__*/ proxyCustomElement(class BhPickerMenu extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhChange = createEvent(this, "bhChange");
+        this.bhMonthYearSelect = createEvent(this, "bhMonthYearSelect");
+        this.bhCancel = createEvent(this, "bhCancel");
+        this.bhApply = createEvent(this, "bhApply");
+        this.bhToday = createEvent(this, "bhToday");
+    }
+    /**
+     * Minimum year in the picker
+     */
+    minYear = 1998;
+    /**
+     * Maximum year in the picker
+     */
+    maxYear = 2060;
+    /**
+     * Whether the picker is disabled
+     */
+    disabled = false;
+    /**
+     * Array of disabled months
+     */
+    disabledMonths = [];
+    /**
+     * Animation class for the menu
+     */
+    animationClass = 'animate-dropdown-enter';
+    /**
+     * Whether the menu is visible
+     */
+    visible = true;
+    /**
+     * Whether to show the footer with action buttons
+     */
+    showFooter = true;
+    /**
+     * Whether to show the today button
+     */
+    showTodayButton = false;
+    /**
+     * Whether the apply button is disabled
+     */
+    disableApply = false;
+    /**
+     * Current value
+     */
+    value;
+    isClosing = false;
+    shouldRender = true;
+    selectedMonth = null;
+    selectedYear = null;
+    /**
+     * Event emitted when value changes
+     */
+    bhChange;
+    /**
+     * Event emitted when a month/year is selected
+     */
+    bhMonthYearSelect;
+    /**
+     * Event emitted when cancel is clicked
+     */
+    bhCancel;
+    /**
+     * Event emitted when apply is clicked
+     */
+    bhApply;
+    /**
+     * Event emitted when today button is clicked
+     */
+    bhToday;
+    handleVisibleChange(newValue) {
+        if (newValue) {
+            this.shouldRender = true;
+            this.isClosing = false;
+        }
+        else {
+            this.isClosing = true;
+            setTimeout(() => {
+                this.shouldRender = false;
+                this.isClosing = false;
+            }, 150);
+        }
+    }
+    handleValueChange(newValue) {
+        if (newValue) {
+            this.selectedMonth = newValue.month;
+            this.selectedYear = newValue.year;
+        }
+    }
+    componentWillLoad() {
+        this.shouldRender = this.visible;
+        if (this.value) {
+            this.selectedMonth = this.value.month;
+            this.selectedYear = this.value.year;
+        }
+        else {
+            // Initialize with current date
+            const now = new Date();
+            const currentMonth = now.getMonth();
+            const currentYear = now.getFullYear();
+            if (currentYear >= this.minYear && currentYear <= this.maxYear) {
+                this.selectedMonth = currentMonth;
+                this.selectedYear = currentYear;
+            }
+            else if (currentYear < this.minYear) {
+                this.selectedYear = this.minYear;
+                this.selectedMonth = currentMonth;
+            }
+            else {
+                this.selectedYear = this.maxYear;
+                this.selectedMonth = currentMonth;
+            }
+        }
+    }
+    handleMonthYearSelect = (event) => {
+        const selection = event.detail;
+        this.selectedMonth = selection.month;
+        this.selectedYear = selection.year;
+        this.bhChange.emit(selection);
+        this.bhMonthYearSelect.emit(selection);
+    };
+    handleCancel = () => {
+        this.bhCancel.emit();
+    };
+    handleApply = () => {
+        this.bhApply.emit();
+    };
+    handleToday = () => {
+        this.bhToday.emit();
+    };
+    render() {
+        if (!this.shouldRender) {
+            return null;
+        }
+        const menuClasses = {
+            'picker-menu': true,
+            'animate-dropdown-exit': this.isClosing,
+            [this.animationClass]: !this.isClosing,
+            'no-footer': !this.showFooter,
+        };
+        return (h(Host, null, h("div", { class: menuClasses }, h("slot", null, h("bh-month-picker-content", { minYear: this.minYear, maxYear: this.maxYear, disabled: this.disabled, disabledMonths: this.disabledMonths, scrollable: true, selectedMonth: this.selectedMonth ?? undefined, selectedYear: this.selectedYear ?? undefined, onBhChange: this.handleMonthYearSelect })), this.showFooter && (h("div", { class: "picker-menu-footer" }, h("div", { class: `picker-menu-actions ${this.showTodayButton ? 'has-today-button' : ''}` }, this.showTodayButton && (h("bh-button", { hierarchy: "secondary", size: "sm", icon: "only", iconName: "today", onBhClick: this.handleToday })), h("div", { class: "picker-menu-main-actions" }, h("bh-button", { hierarchy: "secondary", size: "sm", label: "Cancel", onBhClick: this.handleCancel }), h("bh-button", { hierarchy: "primary", size: "sm", label: "Apply", disabled: this.disableApply, onBhClick: this.handleApply }))))))));
+    }
+    static get watchers() { return {
+        "visible": ["handleVisibleChange"],
+        "value": ["handleValueChange"]
+    }; }
+    static get style() { return bhPickerMenuCss; }
+}, [769, "bh-picker-menu", {
+        "minYear": [2, "min-year"],
+        "maxYear": [2, "max-year"],
+        "disabled": [4],
+        "disabledMonths": [16],
+        "animationClass": [1, "animation-class"],
+        "visible": [4],
+        "showFooter": [4, "show-footer"],
+        "showTodayButton": [4, "show-today-button"],
+        "disableApply": [4, "disable-apply"],
+        "value": [16],
+        "isClosing": [32],
+        "shouldRender": [32],
+        "selectedMonth": [32],
+        "selectedYear": [32]
+    }, undefined, {
+        "visible": ["handleVisibleChange"],
+        "value": ["handleValueChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-picker-menu", "bh-button", "bh-loader-spinner", "bh-month-picker-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-picker-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhPickerMenu);
+            }
+            break;
+        case "bh-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-loader-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "bh-month-picker-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhPickerMenu as B, defineCustomElement as d };
+//# sourceMappingURL=p-DHSWIF-h.js.map
+
+//# sourceMappingURL=p-DHSWIF-h.js.map

package/components/p-DHSWIF-h.js.map

@@ -0,0 +1 @@
+{"file":"p-DHSWIF-h.js","mappings":";;;;;AAAA,MAAM,eAAe,GAAG,svLAAsvL;;MCQjwL,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;;;;;;AACvB;;AAEG;IACK,OAAO,GAAW,IAAI;AAE9B;;AAEG;IACK,OAAO,GAAW,IAAI;AAE9B;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,cAAc,GAAoB,EAAE;AAE5C;;AAEG;IACK,cAAc,GAAW,wBAAwB;AAEzD;;AAEG;IACK,OAAO,GAAY,IAAI;AAE/B;;AAEG;IACK,UAAU,GAAY,IAAI;AAElC;;AAEG;IACK,eAAe,GAAY,KAAK;AAExC;;AAEG;IACK,YAAY,GAAY,KAAK;AAErC;;AAEG;AACK,IAAA,KAAK;IAEJ,SAAS,GAAY,KAAK;IAC1B,YAAY,GAAY,IAAI;IAC5B,aAAa,GAAkB,IAAI;IACnC,YAAY,GAAkB,IAAI;AAE3C;;AAEG;AACM,IAAA,QAAQ;AAEjB;;AAEG;AACM,IAAA,iBAAiB;AAE1B;;AAEG;AACM,IAAA,QAAQ;AAEjB;;AAEG;AACM,IAAA,OAAO;AAEhB;;AAEG;AACM,IAAA,OAAO;AAGhB,IAAA,mBAAmB,CAAC,QAAiB,EAAA;QACnC,IAAI,QAAQ,EAAE;AACZ,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;;aACjB;AACL,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;YACrB,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,CAAC,YAAY,GAAG,KAAK;AACzB,gBAAA,IAAI,CAAC,SAAS,GAAG,KAAK;aACvB,EAAE,GAAG,CAAC;;;AAKX,IAAA,iBAAiB,CAAC,QAA+B,EAAA;QAC/C,IAAI,QAAQ,EAAE;AACZ,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,KAAK;AACnC,YAAA,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI;;;IAIrC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO;AAEhC,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK;YACrC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI;;aAC9B;;AAEL,YAAA,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE;AACtB,YAAA,MAAM,YAAY,GAAG,GAAG,CAAC,QAAQ,EAAE;AACnC,YAAA,MAAM,WAAW,GAAG,GAAG,CAAC,WAAW,EAAE;AAErC,YAAA,IAAI,WAAW,IAAI,IAAI,CAAC,OAAO,IAAI,WAAW,IAAI,IAAI,CAAC,OAAO,EAAE;AAC9D,gBAAA,IAAI,CAAC,aAAa,GAAG,YAAY;AACjC,gBAAA,IAAI,CAAC,YAAY,GAAG,WAAW;;AAC1B,iBAAA,IAAI,WAAW,GAAG,IAAI,CAAC,OAAO,EAAE;AACrC,gBAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO;AAChC,gBAAA,IAAI,CAAC,aAAa,GAAG,YAAY;;iBAC5B;AACL,gBAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO;AAChC,gBAAA,IAAI,CAAC,aAAa,GAAG,YAAY;;;;AAK/B,IAAA,qBAAqB,GAAG,CAAC,KAA6B,KAAI;AAChE,QAAA,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM;AAC9B,QAAA,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC,KAAK;AACpC,QAAA,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,IAAI;AAClC,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAC7B,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC;AACxC,KAAC;IAEO,YAAY,GAAG,MAAK;AAC1B,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;AACtB,KAAC;IAEO,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,KAAC;IAEO,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,OAAO,IAAI;;AAGb,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,aAAa,EAAE,IAAI;YACnB,uBAAuB,EAAE,IAAI,CAAC,SAAS;YACvC,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,SAAS;AACtC,YAAA,WAAW,EAAE,CAAC,IAAI,CAAC,UAAU;SAC9B;QAED,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,WAAW,EAAA,EAErB,CAAA,CAAA,MAAA,EAAA,IAAA,EACE,CACE,CAAA,yBAAA,EAAA,EAAA,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,UAAU,EAAE,IAAI,EAChB,aAAa,EAAE,IAAI,CAAC,aAAa,IAAI,SAAS,EAC9C,YAAY,EAAE,IAAI,CAAC,YAAY,IAAI,SAAS,EAC5C,UAAU,EAAE,IAAI,CAAC,qBAAqB,EAAA,CACb,CACtB,EAGN,IAAI,CAAC,UAAU,KACd,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAA,oBAAA,EAAuB,IAAI,CAAC,eAAe,GAAG,kBAAkB,GAAG,EAAE,CAAE,CAAA,EAAA,EAEhF,IAAI,CAAC,eAAe,KACnB,CAAA,CAAA,WAAA,EAAA,EACE,SAAS,EAAC,WAAW,EACrB,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,MAAM,EACX,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,IAAI,CAAC,WAAW,EAAA,CAChB,CACd,EAGD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAA,CAAA,WAAA,EAAA,EACE,SAAS,EAAC,WAAW,EACrB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,QAAQ,EACd,SAAS,EAAE,IAAI,CAAC,YAAY,EACjB,CAAA,EACb,CAAA,CAAA,WAAA,EAAA,EACE,SAAS,EAAC,SAAS,EACnB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,OAAO,EACb,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,SAAS,EAAE,IAAI,CAAC,WAAW,EAAA,CAChB,CACT,CACF,CACF,CACP,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-picker-menu/bh-picker-menu.css?tag=bh-picker-menu&encapsulation=shadow","src/components/bh-picker-menu/bh-picker-menu.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n  display: block;\n}\n\n/* Base picker menu styles - matching dropdown menu */\n.picker-menu {\n  width: fit-content;\n  min-width: 320px;\n  background: var(--color-white);\n  border-radius: var(--radius-md);\n  box-shadow: 0px 32px 64px -12px rgba(64, 73, 104, 0.14),\n    0px 0px 1px 1px rgba(64, 73, 104, 0.1);\n  border: 1px solid var(--color-neutral-200);\n  overflow: hidden;\n  flex-shrink: 0;\n  position: relative;\n  box-sizing: border-box;\n}\n\n/* Animation classes */\n.picker-menu.animate-dropdown-enter {\n  animation: dropdownEnter 0.15s ease-out forwards;\n}\n\n.picker-menu.animate-dropdown-exit {\n  animation: dropdownExit 0.15s ease-out forwards;\n}\n\n@keyframes dropdownEnter {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes dropdownExit {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n}\n\n/* No footer variant */\n.picker-menu.no-footer {\n  padding-bottom: var(--spacing-md);\n}\n\n/* Footer - following dropdown menu pattern */\n.picker-menu-footer {\n  border-top: 1px solid var(--color-neutral-200);\n  padding: var(--spacing-xl) var(--spacing-xl);\n  background: var(--color-white);\n}\n\n.picker-menu-actions {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: var(--spacing-lg);\n}\n\n/* When today button is present, use space-between layout */\n.picker-menu-actions.has-today-button {\n  justify-content: space-between;\n}\n\n.picker-menu-main-actions {\n  display: flex;\n  gap: var(--spacing-lg);\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\nimport { MonthYear, DisabledMonth } from '../bh-month-picker-content/bh-month-picker-content';\n\n@Component({\n  tag: 'bh-picker-menu',\n  styleUrl: 'bh-picker-menu.css',\n  shadow: true,\n})\nexport class BhPickerMenu {\n  /**\n   * Minimum year in the picker\n   */\n  @Prop() minYear: number = 1998;\n\n  /**\n   * Maximum year in the picker\n   */\n  @Prop() maxYear: number = 2060;\n\n  /**\n   * Whether the picker is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Array of disabled months\n   */\n  @Prop() disabledMonths: DisabledMonth[] = [];\n\n  /**\n   * Animation class for the menu\n   */\n  @Prop() animationClass: string = 'animate-dropdown-enter';\n\n  /**\n   * Whether the menu is visible\n   */\n  @Prop() visible: boolean = true;\n\n  /**\n   * Whether to show the footer with action buttons\n   */\n  @Prop() showFooter: boolean = true;\n\n  /**\n   * Whether to show the today button\n   */\n  @Prop() showTodayButton: boolean = false;\n\n  /**\n   * Whether the apply button is disabled\n   */\n  @Prop() disableApply: boolean = false;\n\n  /**\n   * Current value\n   */\n  @Prop() value?: MonthYear;\n\n  @State() isClosing: boolean = false;\n  @State() shouldRender: boolean = true;\n  @State() selectedMonth: number | null = null;\n  @State() selectedYear: number | null = null;\n\n  /**\n   * Event emitted when value changes\n   */\n  @Event() bhChange!: EventEmitter<MonthYear | null>;\n\n  /**\n   * Event emitted when a month/year is selected\n   */\n  @Event() bhMonthYearSelect!: EventEmitter<MonthYear>;\n\n  /**\n   * Event emitted when cancel is clicked\n   */\n  @Event() bhCancel!: EventEmitter<void>;\n\n  /**\n   * Event emitted when apply is clicked\n   */\n  @Event() bhApply!: EventEmitter<void>;\n\n  /**\n   * Event emitted when today button is clicked\n   */\n  @Event() bhToday!: EventEmitter<void>;\n\n  @Watch('visible')\n  handleVisibleChange(newValue: boolean) {\n    if (newValue) {\n      this.shouldRender = true;\n      this.isClosing = false;\n    } else {\n      this.isClosing = true;\n      setTimeout(() => {\n        this.shouldRender = false;\n        this.isClosing = false;\n      }, 150);\n    }\n  }\n\n  @Watch('value')\n  handleValueChange(newValue: MonthYear | undefined) {\n    if (newValue) {\n      this.selectedMonth = newValue.month;\n      this.selectedYear = newValue.year;\n    }\n  }\n\n  componentWillLoad() {\n    this.shouldRender = this.visible;\n\n    if (this.value) {\n      this.selectedMonth = this.value.month;\n      this.selectedYear = this.value.year;\n    } else {\n      // Initialize with current date\n      const now = new Date();\n      const currentMonth = now.getMonth();\n      const currentYear = now.getFullYear();\n\n      if (currentYear >= this.minYear && currentYear <= this.maxYear) {\n        this.selectedMonth = currentMonth;\n        this.selectedYear = currentYear;\n      } else if (currentYear < this.minYear) {\n        this.selectedYear = this.minYear;\n        this.selectedMonth = currentMonth;\n      } else {\n        this.selectedYear = this.maxYear;\n        this.selectedMonth = currentMonth;\n      }\n    }\n  }\n\n  private handleMonthYearSelect = (event: CustomEvent<MonthYear>) => {\n    const selection = event.detail;\n    this.selectedMonth = selection.month;\n    this.selectedYear = selection.year;\n    this.bhChange.emit(selection);\n    this.bhMonthYearSelect.emit(selection);\n  };\n\n  private handleCancel = () => {\n    this.bhCancel.emit();\n  };\n\n  private handleApply = () => {\n    this.bhApply.emit();\n  };\n\n  private handleToday = () => {\n    this.bhToday.emit();\n  };\n\n  render() {\n    if (!this.shouldRender) {\n      return null;\n    }\n\n    const menuClasses = {\n      'picker-menu': true,\n      'animate-dropdown-exit': this.isClosing,\n      [this.animationClass]: !this.isClosing,\n      'no-footer': !this.showFooter,\n    };\n\n    return (\n      <Host>\n        <div class={menuClasses}>\n          {/* Main Content Area - render slot if provided, otherwise MonthPickerContent */}\n          <slot>\n            <bh-month-picker-content\n              minYear={this.minYear}\n              maxYear={this.maxYear}\n              disabled={this.disabled}\n              disabledMonths={this.disabledMonths}\n              scrollable={true}\n              selectedMonth={this.selectedMonth ?? undefined}\n              selectedYear={this.selectedYear ?? undefined}\n              onBhChange={this.handleMonthYearSelect}\n            ></bh-month-picker-content>\n          </slot>\n\n          {/* Footer Actions - conditionally rendered */}\n          {this.showFooter && (\n            <div class=\"picker-menu-footer\">\n              <div class={`picker-menu-actions ${this.showTodayButton ? 'has-today-button' : ''}`}>\n                {/* Today button on the left */}\n                {this.showTodayButton && (\n                  <bh-button\n                    hierarchy=\"secondary\"\n                    size=\"sm\"\n                    icon=\"only\"\n                    iconName=\"today\"\n                    onBhClick={this.handleToday}\n                  ></bh-button>\n                )}\n\n                {/* Cancel and Apply buttons always on the right */}\n                <div class=\"picker-menu-main-actions\">\n                  <bh-button\n                    hierarchy=\"secondary\"\n                    size=\"sm\"\n                    label=\"Cancel\"\n                    onBhClick={this.handleCancel}\n                  ></bh-button>\n                  <bh-button\n                    hierarchy=\"primary\"\n                    size=\"sm\"\n                    label=\"Apply\"\n                    disabled={this.disableApply}\n                    onBhClick={this.handleApply}\n                  ></bh-button>\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/components/p-DNhCX5eS.js

@@ -0,0 +1,153 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-9a7sQzad.js';
+import { d as defineCustomElement$3 } from './p-DTgHvmlL.js';
+import { d as defineCustomElement$2 } from './p-Bbo_Dwmk.js';
+import { d as defineCustomElement$1 } from './p-B4TBDBoW.js';
+
+const bhPageNavigationMultiLevelCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;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-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:block}.page-navigation-multi-level{margin:var(--spacing-none) var(--spacing-xs)}.page-navigation-multi-level-parent{display:flex;align-items:center;padding:var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:40px;max-height:44px;box-sizing:border-box;border-radius:var(--radius-sm);background-color:transparent;border:1px solid transparent}.page-navigation-multi-level.has-active-child .page-navigation-multi-level-parent{background-color:transparent;border:1px solid transparent}.page-navigation-multi-level-parent:hover{background-color:var(--color-neutral-50) !important}.page-navigation-children{margin-top:var(--spacing-xs);margin-bottom:var(--spacing-xs);position:relative;margin-left:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-xs);max-height:1000px;opacity:1;transition:max-height 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    opacity 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    margin 0.4s cubic-bezier(0.08, 0.52, 0.52, 1)}.page-navigation-children.collapsed{max-height:0;opacity:0;margin-top:0;margin-bottom:0}.page-navigation-children::before{content:'';position:absolute;left:0;top:-2px;height:calc(100% + 4px);width:2px;background-color:var(--color-neutral-200);margin-left:var(--spacing-sm);z-index:2}.page-navigation-children.animate-slide-down-enter{animation:slideDownEnter 0.15s ease-out forwards}.page-navigation-children.animate-slide-down-exit{animation:slideDownExit 0.15s ease-out forwards}@keyframes slideDownEnter{from{opacity:0;max-height:0;transform:translateY(-10px)}to{opacity:1;max-height:1000px;transform:translateY(0)}}@keyframes slideDownExit{from{opacity:1;max-height:1000px;transform:translateY(0)}to{opacity:0;max-height:0;transform:translateY(-10px)}}.page-navigation-item-content{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.page-navigation-item-icon{flex-shrink:0;color:var(--color-neutral-600);font-size:20px;width:20px;height:20px;transition:color 0.15s ease}.page-navigation-animate-smooth{transform-origin:top center;transition:all var(--animation-duration-normal, 0.2s) var(--animation-ease-enter, ease)}.page-navigation-chevron-icon{flex-shrink:0;color:var(--color-neutral-600);font-size:20px;width:20px;height:20px;transition:color 0.15s ease, transform var(--animation-duration-fast, 0.1s) var(--animation-ease-smooth, ease)}.page-navigation-chevron-icon.expanded{transform:rotate(180deg)}.page-navigation-multi-level.has-active-child .page-navigation-item-icon{color:var(--color-neutral-900)}.page-navigation-item-label{font-family:var(--font-inter);font-size:14px;font-weight:500;line-height:20px;color:var(--color-neutral-600);flex:1;transition:all 0.15s ease}.page-navigation-multi-level.has-active-child .page-navigation-item-label{color:var(--color-neutral-900);font-weight:600}";
+
+const BhPageNavigationMultiLevel = /*@__PURE__*/ proxyCustomElement(class BhPageNavigationMultiLevel extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhToggle = createEvent(this, "bhToggle");
+        this.bhChildClick = createEvent(this, "bhChildClick");
+        this.bhAddClick = createEvent(this, "bhAddClick");
+    }
+    /**
+     * Label text for the navigation item
+     */
+    label;
+    /**
+     * Material icon name
+     */
+    icon = 'radio_button_unchecked';
+    /**
+     * Optional badge text/number to display
+     */
+    badge;
+    /**
+     * Child navigation items
+     */
+    childItems = [];
+    /**
+     * Whether the item is expanded to show children
+     */
+    isExpanded = false;
+    /**
+     * Internal state for hover
+     */
+    isHovered = false;
+    /**
+     * Internal state for animation
+     */
+    isAnimating = false;
+    /**
+     * Animation class
+     */
+    animationClass = '';
+    /**
+     * Event emitted when the parent item is clicked (to toggle expansion)
+     */
+    bhToggle;
+    /**
+     * Event emitted when a child item is clicked
+     */
+    bhChildClick;
+    /**
+     * Event emitted when add button is clicked
+     */
+    bhAddClick;
+    handleExpandedChange(newValue) {
+        if (newValue) {
+            this.isAnimating = true;
+            this.animationClass = 'animate-slide-down-enter';
+        }
+        else if (this.isAnimating) {
+            this.animationClass = 'animate-slide-down-exit';
+            setTimeout(() => {
+                this.isAnimating = false;
+                this.animationClass = '';
+            }, 150);
+        }
+    }
+    get hasActiveChild() {
+        return this.childItems.some(child => child.isActive);
+    }
+    handleParentClick = () => {
+        this.bhToggle.emit();
+    };
+    handleChildClick = (index) => {
+        this.bhChildClick.emit(index);
+    };
+    handleAddClick = (e) => {
+        e.stopPropagation();
+        this.bhAddClick.emit();
+    };
+    getItemClasses() {
+        return {
+            'page-navigation-multi-level': true,
+            'page-navigation-animate-smooth': true,
+            'has-active-child': this.hasActiveChild,
+            'expanded': this.isExpanded,
+        };
+    }
+    render() {
+        return (h(Host, { key: '15c1b2bbe0ddf13eb25d424ce7c60b281547175e' }, h("div", { key: '6a2ab39d69b4dc007c52cc0af63f39b4f8bf4ee8', class: this.getItemClasses() }, h("div", { key: '3796f0b3fad7ef3f0fd29bc8b8e90738b5165bbf', class: "page-navigation-multi-level-parent", onClick: this.handleParentClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, h("div", { key: '5ae04be6a630fcf8f1f25245ee8e8f5bfde6e27e', class: "page-navigation-item-content" }, !this.isHovered && (h("span", { key: 'e3893980a51628c19f2667d4cbd76958d1b67cff', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon)), this.isHovered && (h("span", { key: '4429219610bf3dbeb1de38ef6f4b3734b3f521da', class: {
+                'page-navigation-chevron-icon': true,
+                'material-symbols-outlined': true,
+                'expanded': this.isExpanded,
+            } }, "expand_more")), h("span", { key: '4a81f12b1b2e0ec1e0784858f99845ad4dc3aa62', class: "page-navigation-item-label" }, this.label), h("bh-button", { key: 'bcadba2dff591857aafaaa434d06e97b0727b635', hierarchy: "tertiary", icon: "only", size: "xs", iconName: "add", onClick: this.handleAddClick }))), (this.isExpanded || this.isAnimating) && (h("div", { key: 'd99ed38a4fe97757f660c281b6e34c36f6837d87', class: `page-navigation-children ${this.animationClass}` }, this.childItems.map((child, index) => (h("bh-page-navigation-child", { key: index, label: child.label, badge: child.badge, showBadge: child.showBadge, isActive: child.isActive, onBhItemClick: () => this.handleChildClick(index) }))))))));
+    }
+    static get watchers() { return {
+        "isExpanded": ["handleExpandedChange"]
+    }; }
+    static get style() { return bhPageNavigationMultiLevelCss; }
+}, [769, "bh-page-navigation-multi-level", {
+        "label": [1],
+        "icon": [1],
+        "badge": [8],
+        "childItems": [16],
+        "isExpanded": [1028, "is-expanded"],
+        "isHovered": [32],
+        "isAnimating": [32],
+        "animationClass": [32]
+    }, undefined, {
+        "isExpanded": ["handleExpandedChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-page-navigation-multi-level", "bh-button", "bh-loader-spinner", "bh-page-navigation-child"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-page-navigation-multi-level":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhPageNavigationMultiLevel);
+            }
+            break;
+        case "bh-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-loader-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "bh-page-navigation-child":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhPageNavigationMultiLevel as B, defineCustomElement as d };
+//# sourceMappingURL=p-DNhCX5eS.js.map
+
+//# sourceMappingURL=p-DNhCX5eS.js.map

package/components/p-DNhCX5eS.js.map

@@ -0,0 +1 @@
+{"file":"p-DNhCX5eS.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-page-navigation-multi-level/bh-page-navigation-multi-level.css?tag=bh-page-navigation-multi-level&encapsulation=shadow","src/components/bh-page-navigation-multi-level/bh-page-navigation-multi-level.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n  display: block;\n}\n\n.page-navigation-multi-level {\n  margin: var(--spacing-none) var(--spacing-xs);\n}\n\n.page-navigation-multi-level-parent {\n  display: flex;\n  align-items: center;\n  padding: var(--spacing-lg);\n  cursor: pointer;\n  gap: var(--spacing-md);\n  position: relative;\n  transition: all 0.15s ease;\n  min-height: 40px;\n  max-height: 44px;\n  box-sizing: border-box;\n  border-radius: var(--radius-sm);\n  background-color: transparent;\n  border: 1px solid transparent;\n}\n\n/* Has active child state */\n.page-navigation-multi-level.has-active-child .page-navigation-multi-level-parent {\n  background-color: transparent;\n  border: 1px solid transparent;\n}\n\n/* Hover state for multi level parent */\n.page-navigation-multi-level-parent:hover {\n  background-color: var(--color-neutral-50) !important;\n}\n\n/* Children container with smooth animation */\n.page-navigation-children {\n  margin-top: var(--spacing-xs);\n  margin-bottom: var(--spacing-xs);\n  position: relative;\n  margin-left: var(--spacing-xl);\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n  max-height: 1000px;\n  opacity: 1;\n  transition: max-height 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    opacity 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    margin 0.4s cubic-bezier(0.08, 0.52, 0.52, 1);\n}\n\n.page-navigation-children.collapsed {\n  max-height: 0;\n  opacity: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n/* Vertical line indicator for children */\n.page-navigation-children::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: -2px;\n  height: calc(100% + 4px);\n  width: 2px;\n  background-color: var(--color-neutral-200);\n  margin-left: var(--spacing-sm);\n  z-index: 2;\n}\n\n/* Animation classes */\n.page-navigation-children.animate-slide-down-enter {\n  animation: slideDownEnter 0.15s ease-out forwards;\n}\n\n.page-navigation-children.animate-slide-down-exit {\n  animation: slideDownExit 0.15s ease-out forwards;\n}\n\n@keyframes slideDownEnter {\n  from {\n    opacity: 0;\n    max-height: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    max-height: 1000px;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideDownExit {\n  from {\n    opacity: 1;\n    max-height: 1000px;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    max-height: 0;\n    transform: translateY(-10px);\n  }\n}\n\n/* Item content and common elements */\n.page-navigation-item-content {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md);\n  width: 100%;\n}\n\n/* Icons */\n.page-navigation-item-icon {\n  flex-shrink: 0;\n  color: var(--color-neutral-600);\n  font-size: 20px;\n  width: 20px;\n  height: 20px;\n  transition: color 0.15s ease;\n}\n\n/* Smooth animation class for page navigation items */\n.page-navigation-animate-smooth {\n  transform-origin: top center;\n  transition: all var(--animation-duration-normal, 0.2s) var(--animation-ease-enter, ease);\n}\n\n/* Chevron icon styling */\n.page-navigation-chevron-icon {\n  flex-shrink: 0;\n  color: var(--color-neutral-600);\n  font-size: 20px;\n  width: 20px;\n  height: 20px;\n  transition: color 0.15s ease, transform var(--animation-duration-fast, 0.1s) var(--animation-ease-smooth, ease);\n}\n\n/* Chevron rotation when expanded */\n.page-navigation-chevron-icon.expanded {\n  transform: rotate(180deg);\n}\n\n/* Icon color changes for active states */\n.page-navigation-multi-level.has-active-child .page-navigation-item-icon {\n  color: var(--color-neutral-900);\n}\n\n/* Labels */\n.page-navigation-item-label {\n  font-family: var(--font-inter);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  color: var(--color-neutral-600);\n  flex: 1;\n  transition: all 0.15s ease;\n}\n\n/* Label color and weight changes for active states */\n.page-navigation-multi-level.has-active-child .page-navigation-item-label {\n  color: var(--color-neutral-900);\n  font-weight: 600;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host, Watch } from '@stencil/core';\n\nexport interface ChildItem {\n  label: string;\n  badge?: string | number;\n  showBadge?: boolean;\n  isActive?: boolean;\n}\n\n@Component({\n  tag: 'bh-page-navigation-multi-level',\n  styleUrl: 'bh-page-navigation-multi-level.css',\n  shadow: true,\n})\nexport class BhPageNavigationMultiLevel {\n  /**\n   * Label text for the navigation item\n   */\n  @Prop() label!: string;\n\n  /**\n   * Material icon name\n   */\n  @Prop() icon: string = 'radio_button_unchecked';\n\n  /**\n   * Optional badge text/number to display\n   */\n  @Prop() badge?: string | number;\n\n  /**\n   * Child navigation items\n   */\n  @Prop() childItems: ChildItem[] = [];\n\n  /**\n   * Whether the item is expanded to show children\n   */\n  @Prop({ mutable: true }) isExpanded: boolean = false;\n\n  /**\n   * Internal state for hover\n   */\n  @State() isHovered: boolean = false;\n\n  /**\n   * Internal state for animation\n   */\n  @State() isAnimating: boolean = false;\n\n  /**\n   * Animation class\n   */\n  @State() animationClass: string = '';\n\n  /**\n   * Event emitted when the parent item is clicked (to toggle expansion)\n   */\n  @Event() bhToggle!: EventEmitter<void>;\n\n  /**\n   * Event emitted when a child item is clicked\n   */\n  @Event() bhChildClick!: EventEmitter<number>;\n\n  /**\n   * Event emitted when add button is clicked\n   */\n  @Event() bhAddClick!: EventEmitter<void>;\n\n  @Watch('isExpanded')\n  handleExpandedChange(newValue: boolean) {\n    if (newValue) {\n      this.isAnimating = true;\n      this.animationClass = 'animate-slide-down-enter';\n    } else if (this.isAnimating) {\n      this.animationClass = 'animate-slide-down-exit';\n      setTimeout(() => {\n        this.isAnimating = false;\n        this.animationClass = '';\n      }, 150);\n    }\n  }\n\n  private get hasActiveChild(): boolean {\n    return this.childItems.some(child => child.isActive);\n  }\n\n  private handleParentClick = () => {\n    this.bhToggle.emit();\n  };\n\n  private handleChildClick = (index: number) => {\n    this.bhChildClick.emit(index);\n  };\n\n  private handleAddClick = (e: MouseEvent) => {\n    e.stopPropagation();\n    this.bhAddClick.emit();\n  };\n\n  private getItemClasses() {\n    return {\n      'page-navigation-multi-level': true,\n      'page-navigation-animate-smooth': true,\n      'has-active-child': this.hasActiveChild,\n      'expanded': this.isExpanded,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getItemClasses()}>\n          <div\n            class=\"page-navigation-multi-level-parent\"\n            onClick={this.handleParentClick}\n            onMouseEnter={() => (this.isHovered = true)}\n            onMouseLeave={() => (this.isHovered = false)}\n          >\n            <div class=\"page-navigation-item-content\">\n              {!this.isHovered && (\n                <span class=\"page-navigation-item-icon material-symbols-outlined\">\n                  {this.icon}\n                </span>\n              )}\n              {this.isHovered && (\n                <span\n                  class={{\n                    'page-navigation-chevron-icon': true,\n                    'material-symbols-outlined': true,\n                    'expanded': this.isExpanded,\n                  }}\n                >\n                  expand_more\n                </span>\n              )}\n              <span class=\"page-navigation-item-label\">{this.label}</span>\n              <bh-button\n                hierarchy=\"tertiary\"\n                icon=\"only\"\n                size=\"xs\"\n                iconName=\"add\"\n                onClick={this.handleAddClick}\n              ></bh-button>\n            </div>\n          </div>\n\n          {(this.isExpanded || this.isAnimating) && (\n            <div class={`page-navigation-children ${this.animationClass}`}>\n              {this.childItems.map((child, index) => (\n                <bh-page-navigation-child\n                  key={index}\n                  label={child.label}\n                  badge={child.badge}\n                  showBadge={child.showBadge}\n                  isActive={child.isActive}\n                  onBhItemClick={() => this.handleChildClick(index)}\n                ></bh-page-navigation-child>\n              ))}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/p-DRGkYX1u.js

@@ -0,0 +1,78 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-9a7sQzad.js';
+
+const bhModalCss = ":host{display:block}.modal-wrapper{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;padding:var(--spacing-4xl, 32px);z-index:1000}.modal-overlay{position:absolute;inset:0;background:var(--color-bg-overlay, rgba(64, 73, 104, 0.7));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.modal{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:400px;background:var(--color-bg-primary, #ffffff);border-radius:var(--radius-xl, 12px);box-shadow:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);overflow:hidden;z-index:1}@media (max-width: 480px){.modal-wrapper{padding:var(--spacing-xl, 16px)}.modal{max-width:100%}}@keyframes modalFadeIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes overlayFadeIn{from{opacity:0}to{opacity:1}}.modal{animation:modalFadeIn 0.2s ease-out}.modal-overlay{animation:overlayFadeIn 0.2s ease-out}";
+
+const MODAL_WIDTHS = {
+    sm: '400px',
+    md: '480px',
+    lg: '520px',
+    xl: '640px',
+    xxl: '688px',
+};
+const BhModal = /*@__PURE__*/ proxyCustomElement(class BhModal extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhClose = createEvent(this, "bhClose");
+    }
+    /**
+     * Whether the modal is visible
+     */
+    visible = false;
+    /**
+     * Whether to show the backdrop overlay
+     */
+    overlay = true;
+    /**
+     * Preset width of the modal: sm (400px), md (480px), lg (520px), xl (640px), xxl (688px)
+     */
+    width = 'sm';
+    /**
+     * Emitted when the modal is closed (overlay click or close button)
+     */
+    bhClose;
+    handleClose = () => {
+        this.bhClose.emit();
+    };
+    handleOverlayClick = (event) => {
+        if (event.target === event.currentTarget) {
+            this.handleClose();
+        }
+    };
+    render() {
+        if (!this.visible)
+            return null;
+        const modalClasses = {
+            'modal-wrapper': true,
+            'modal-with-overlay': this.overlay,
+        };
+        return (h(Host, null, h("div", { class: modalClasses, onClick: this.handleOverlayClick }, this.overlay && h("div", { class: "modal-overlay" }), h("div", { class: "modal", style: { maxWidth: MODAL_WIDTHS[this.width] } }, h("slot", { name: "header" }), h("slot", null), h("slot", { name: "actions" })))));
+    }
+    static get style() { return bhModalCss; }
+}, [769, "bh-modal", {
+        "visible": [4],
+        "overlay": [4],
+        "width": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-modal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhModal);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhModal as B, defineCustomElement as d };
+//# sourceMappingURL=p-DRGkYX1u.js.map
+
+//# sourceMappingURL=p-DRGkYX1u.js.map

package/components/p-DRGkYX1u.js.map

@@ -0,0 +1 @@
+{"file":"p-DRGkYX1u.js","mappings":";;AAAA,MAAM,UAAU,GAAG,o+BAAo+B;;ACIv/B,MAAM,YAAY,GAA+B;AAC/C,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,EAAE,EAAE,OAAO;AACX,IAAA,GAAG,EAAE,OAAO;CACb;MAOY,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAClB;;AAEG;IACK,OAAO,GAAY,KAAK;AAEhC;;AAEG;IACK,OAAO,GAAY,IAAI;AAE/B;;AAEG;IACK,KAAK,GAAe,IAAI;AAEhC;;AAEG;AACM,IAAA,OAAO;IAER,WAAW,GAAG,MAAW;AAC/B,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,KAAC;AAEO,IAAA,kBAAkB,GAAG,CAAC,KAAiB,KAAU;QACvD,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa,EAAE;YACxC,IAAI,CAAC,WAAW,EAAE;;AAEtB,KAAC;IAED,MAAM,GAAA;QACJ,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,IAAI;AAE9B,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,eAAe,EAAE,IAAI;YACrB,oBAAoB,EAAE,IAAI,CAAC,OAAO;SACnC;QAED,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAA,EACvD,IAAI,CAAC,OAAO,IAAI,WAAK,KAAK,EAAC,eAAe,EAAG,CAAA,EAE9C,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,EAAA,EAC9D,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EAAG,CAAA,EACtB,CAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,EACR,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-modal/bh-modal.css?tag=bh-modal&encapsulation=shadow","src/components/bh-modal/bh-modal.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-MODAL COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: block;\n}\n\n/* Modal wrapper - fixed positioning for modal dialog */\n.modal-wrapper {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-4xl, 32px);\n  z-index: 1000;\n}\n\n/* Backdrop overlay */\n.modal-overlay {\n  position: absolute;\n  inset: 0;\n  background: var(--color-bg-overlay, rgba(64, 73, 104, 0.7));\n  backdrop-filter: blur(16px);\n  -webkit-backdrop-filter: blur(16px);\n}\n\n/* Modal container */\n.modal {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  max-width: 400px;\n  background: var(--color-bg-primary, #ffffff);\n  border-radius: var(--radius-xl, 12px);\n  box-shadow:\n    0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);\n  overflow: hidden;\n  z-index: 1;\n}\n\n/* Responsive adjustments */\n@media (max-width: 480px) {\n  .modal-wrapper {\n    padding: var(--spacing-xl, 16px);\n  }\n\n  .modal {\n    max-width: 100%;\n  }\n}\n\n/* Animation for modal entry */\n@keyframes modalFadeIn {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes overlayFadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.modal {\n  animation: modalFadeIn 0.2s ease-out;\n}\n\n.modal-overlay {\n  animation: overlayFadeIn 0.2s ease-out;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type ModalWidth = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n\nconst MODAL_WIDTHS: Record<ModalWidth, string> = {\n  sm: '400px',\n  md: '480px',\n  lg: '520px',\n  xl: '640px',\n  xxl: '688px',\n};\n\n@Component({\n  tag: 'bh-modal',\n  styleUrl: 'bh-modal.css',\n  shadow: true,\n})\nexport class BhModal {\n  /**\n   * Whether the modal is visible\n   */\n  @Prop() visible: boolean = false;\n\n  /**\n   * Whether to show the backdrop overlay\n   */\n  @Prop() overlay: boolean = true;\n\n  /**\n   * Preset width of the modal: sm (400px), md (480px), lg (520px), xl (640px), xxl (688px)\n   */\n  @Prop() width: ModalWidth = 'sm';\n\n  /**\n   * Emitted when the modal is closed (overlay click or close button)\n   */\n  @Event() bhClose!: EventEmitter<void>;\n\n  private handleClose = (): void => {\n    this.bhClose.emit();\n  };\n\n  private handleOverlayClick = (event: MouseEvent): void => {\n    if (event.target === event.currentTarget) {\n      this.handleClose();\n    }\n  };\n\n  render() {\n    if (!this.visible) return null;\n\n    const modalClasses = {\n      'modal-wrapper': true,\n      'modal-with-overlay': this.overlay,\n    };\n\n    return (\n      <Host>\n        <div class={modalClasses} onClick={this.handleOverlayClick}>\n          {this.overlay && <div class=\"modal-overlay\" />}\n\n          <div class=\"modal\" style={{ maxWidth: MODAL_WIDTHS[this.width] }}>\n            <slot name=\"header\" />\n            <slot />\n            <slot name=\"actions\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/p-DRJW4zBc.js

@@ -0,0 +1,58 @@
+import { p as proxyCustomElement, H, h } from './p-9a7sQzad.js';
+
+const bhBadgeDotCss = ":host{display:inline-block}.badge-dot{border-radius:9999px;position:relative;display:inline-block;box-sizing:border-box}.badge-dot-sm{width:6px;height:6px}.badge-dot-md{width:8px;height:8px}.badge-dot-lg{width:10px;height:10px}.badge-dot-success{background-color:var(--color-success-500, #17B26A)}.badge-dot-blue{background-color:var(--color-blue-500, #5068DD)}.badge-dot-error{background-color:var(--color-error-500, #F05250)}.badge-dot-warning{background-color:var(--color-warning-500, #F79009)}.badge-dot-outline.badge-dot-sm{outline:3px solid;outline-offset:0}.badge-dot-outline.badge-dot-md{outline:4px solid;outline-offset:0}.badge-dot-outline.badge-dot-lg{outline:5px solid;outline-offset:0}.badge-dot-outline.badge-dot-success{outline-color:var(--color-success-100, #D1FADF)}.badge-dot-outline.badge-dot-blue{outline-color:var(--color-blue-200, #E1EAFE)}.badge-dot-outline.badge-dot-error{outline-color:var(--color-error-200, #FEE4E2)}.badge-dot-outline.badge-dot-warning{outline-color:var(--color-warning-200, #FEF0C7)}";
+
+const BhBadgeDot = /*@__PURE__*/ proxyCustomElement(class BhBadgeDot extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    /**
+     * The size of the badge dot
+     */
+    size = 'md';
+    /**
+     * The color of the badge dot
+     */
+    color = 'error';
+    /**
+     * Whether to show an outline ring around the dot
+     */
+    outline = false;
+    render() {
+        const dotClasses = {
+            'badge-dot': true,
+            [`badge-dot-${this.size}`]: true,
+            [`badge-dot-${this.color}`]: true,
+            'badge-dot-outline': this.outline,
+        };
+        return h("div", { key: 'c5ce0849442e1b1551185936a328987877a888f5', class: dotClasses, part: "dot" });
+    }
+    static get style() { return bhBadgeDotCss; }
+}, [769, "bh-badge-dot", {
+        "size": [1],
+        "color": [1],
+        "outline": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-badge-dot"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-badge-dot":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhBadgeDot);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhBadgeDot as B, defineCustomElement as d };
+//# sourceMappingURL=p-DRJW4zBc.js.map
+
+//# sourceMappingURL=p-DRJW4zBc.js.map

package/components/p-DRJW4zBc.js.map

@@ -0,0 +1 @@
+{"file":"p-DRJW4zBc.js","mappings":";;AAAA,MAAM,aAAa,GAAG,sgCAAsgC;;MCU/gC,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;;;AACrB;;AAEG;IACK,IAAI,GAAiB,IAAI;AAEjC;;AAEG;IACK,KAAK,GAAkB,OAAO;AAEtC;;AAEG;IACK,OAAO,GAAY,KAAK;IAEhC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,WAAW,EAAE,IAAI;AACjB,YAAA,CAAC,aAAa,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAChC,YAAA,CAAC,aAAa,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;YACjC,mBAAmB,EAAE,IAAI,CAAC,OAAO;SAClC;AAED,QAAA,OAAO,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,UAAU,EAAE,IAAI,EAAC,KAAK,EAAA,CAAO;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-badge-dot/bh-badge-dot.css?tag=bh-badge-dot&encapsulation=shadow","src/components/bh-badge-dot/bh-badge-dot.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n/* Base Badge Dot */\n.badge-dot {\n  border-radius: 9999px;\n  position: relative;\n  display: inline-block;\n  box-sizing: border-box;\n}\n\n/* Sizes */\n.badge-dot-sm {\n  width: 6px;\n  height: 6px;\n}\n\n.badge-dot-md {\n  width: 8px;\n  height: 8px;\n}\n\n.badge-dot-lg {\n  width: 10px;\n  height: 10px;\n}\n\n/* Colors */\n.badge-dot-success {\n  background-color: var(--color-success-500, #17B26A);\n}\n\n.badge-dot-blue {\n  background-color: var(--color-blue-500, #5068DD);\n}\n\n.badge-dot-error {\n  background-color: var(--color-error-500, #F05250);\n}\n\n.badge-dot-warning {\n  background-color: var(--color-warning-500, #F79009);\n}\n\n/* Outline versions */\n.badge-dot-outline.badge-dot-sm {\n  outline: 3px solid;\n  outline-offset: 0;\n}\n\n.badge-dot-outline.badge-dot-md {\n  outline: 4px solid;\n  outline-offset: 0;\n}\n\n.badge-dot-outline.badge-dot-lg {\n  outline: 5px solid;\n  outline-offset: 0;\n}\n\n/* Outline colors */\n.badge-dot-outline.badge-dot-success {\n  outline-color: var(--color-success-100, #D1FADF);\n}\n\n.badge-dot-outline.badge-dot-blue {\n  outline-color: var(--color-blue-200, #E1EAFE);\n}\n\n.badge-dot-outline.badge-dot-error {\n  outline-color: var(--color-error-200, #FEE4E2);\n}\n\n.badge-dot-outline.badge-dot-warning {\n  outline-color: var(--color-warning-200, #FEF0C7);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type BadgeDotSize = 'sm' | 'md' | 'lg';\nexport type BadgeDotColor = 'success' | 'blue' | 'error' | 'warning';\n\n@Component({\n  tag: 'bh-badge-dot',\n  styleUrl: 'bh-badge-dot.css',\n  shadow: true,\n})\nexport class BhBadgeDot {\n  /**\n   * The size of the badge dot\n   */\n  @Prop() size: BadgeDotSize = 'md';\n\n  /**\n   * The color of the badge dot\n   */\n  @Prop() color: BadgeDotColor = 'error';\n\n  /**\n   * Whether to show an outline ring around the dot\n   */\n  @Prop() outline: boolean = false;\n\n  render() {\n    const dotClasses = {\n      'badge-dot': true,\n      [`badge-dot-${this.size}`]: true,\n      [`badge-dot-${this.color}`]: true,\n      'badge-dot-outline': this.outline,\n    };\n\n    return <div class={dotClasses} part=\"dot\"></div>;\n  }\n}\n"],"version":3}