@actabldesign/bellhop-core 0.0.8 → 0.0.12

package/dist/esm/bh-input-text_2.entry.js

@@ -180,13 +180,13 @@ const BhInputText = class {
             'input-container-with-leading': this.showLeadingIcon,
         };
         const wrapperStyle = this.width ? { width: this.width } : {};
-        return (h("div", { key: 'f518e4c3140c3407e3f0ec864ddbe5e923ec6fdb', class: "input-wrapper", part: "wrapper", style: wrapperStyle }, h("bh-label", { key: 'b5d5afff678974697a617fe4753e445a37957a53', label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: this.handleHelpClick }, h("div", { key: '4254972b8386826b614928c210399d6e113b3d43', class: containerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '7ed52780a55645b81eef2334914903045c3680cc', class: "input-content" }, this.showLeadingIcon && (h("span", { key: '6e870c8c4677d9d9f900298e8205f072f9024348', class: "material-symbols-outlined leading-icon" }, this.leadingIcon)), h("input", { key: '23579144195274ac413d24a5811d44e3ce072047', ref: (el) => (this.inputEl = el), type: this.type, class: "input-element", name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readOnly, required: this.required, "aria-label": this.label, "aria-describedby": this.showHintText && this.hintText ? 'hint-text' : undefined, "aria-invalid": String(this.error), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" }), this.showTrailingIcon && (h("span", { key: '840dad44c2f5bc9060e5a09ff86e9aebfdb8d950', class: "material-symbols-outlined trailing-icon" }, this.trailingIcon))))), this.showHintText && this.hintText && (h("div", { key: '69dfc89a179b2672c0776e0bb75ceb957b9cb1e0', class: { 'hint-text': true, 'hint-error': this.error }, id: "hint-text" }, this.hintText))));
+        return (h("div", { key: '414891a51bcbc7e4268d5a94e77f1f152f8505bc', class: "input-wrapper", part: "wrapper", style: wrapperStyle }, h("bh-label", { key: '785e693c0d4e5a26872ebc61916960a0ecf3d127', label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: this.handleHelpClick }, h("div", { key: '4958741bc4ff6fc7f48b14436e779b5e150838fc', class: containerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: '7d35106f2f121d8733964728b2afecd869e91115', class: "input-content" }, this.showLeadingIcon && (h("span", { key: '24e852d80131a1e670e92fbd647832458933d7f2', class: "material-symbols-outlined leading-icon" }, this.leadingIcon)), h("input", { key: 'dceb924d316ec5baf9531c81cffed128419ba58d', ref: (el) => (this.inputEl = el), type: this.type, class: "input-element", name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readOnly, required: this.required, "aria-label": this.label, "aria-describedby": this.showHintText && this.hintText ? 'hint-text' : undefined, "aria-invalid": String(this.error), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "input" }), this.showTrailingIcon && (h("span", { key: '2a61f35771f605283a07ae94ab549d407ecb1e76', class: "material-symbols-outlined trailing-icon" }, this.trailingIcon))))), this.showHintText && this.hintText && (h("div", { key: '93181aa846e9cbd059ed15ad4c124726a3806b26', class: { 'hint-text': true, 'hint-error': this.error }, id: "hint-text" }, this.hintText))));
     }
     static get formAssociated() { return true; }
 };
 BhInputText.style = bhInputTextCss;
 
-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 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:var(--shadow-lg);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 = class {
     constructor(hostRef) {

package/dist/esm/bh-input-verification.entry.js

@@ -188,7 +188,7 @@ const BhInputVerification = class {
     }
     render() {
         const wrapperStyle = this.width ? { width: this.width } : {};
-        return (h("div", { key: '7690b5bc54608825372174583aee015632f1f30f', class: "input-verification-wrapper", style: wrapperStyle }, h("bh-label", { key: '8cde1454d3162ae8750abfbb222b51301a40bbcc', label: this.showLabel ? this.label : '', required: this.required, disabled: this.disabled }, h("div", { key: 'f6692a5af965eb6bf96a58b1144405e78a63b618', class: "input-verification-container" }, this.renderInputs())), this.showHintText && this.hintText && (h("div", { key: '37a9dfb6a9f441e40fdd336a677cbce8ee1ce877', class: { 'hint-text': true, 'error': this.error } }, this.hintText))));
+        return (h("div", { key: '580a1b39ccde16a2d8aaffa1ca86c31d6ea55a6f', class: "input-verification-wrapper", style: wrapperStyle }, h("bh-label", { key: '7fbfbc9eb3309ce680f40198f07af68b1b2ed47f', label: this.showLabel ? this.label : '', required: this.required, disabled: this.disabled }, h("div", { key: '0eb5e7105b3c34f6cce4aeed02f080bf92288811', class: "input-verification-container" }, this.renderInputs())), this.showHintText && this.hintText && (h("div", { key: '45d3f28c1ffa87ebca45cd2ca3b7e20ce7660077', class: { 'hint-text': true, 'error': this.error } }, this.hintText))));
     }
     static get watchers() { return {
         "value": ["watchValue"],

package/dist/esm/bh-label.bh-tooltip.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"bh-label.bh-tooltip.entry.js","sources":["src/components/bh-tooltip/bh-tooltip.css?tag=bh-tooltip&encapsulation=shadow","src/components/bh-tooltip/bh-tooltip.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-TOOLTIP COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n.tooltip {\n  position: absolute;\n  z-index: 10000;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n  white-space: nowrap;\n}\n\n.tooltip-visible {\n  opacity: 1;\n}\n\n.tooltip-content {\n  background-color: var(--color-neutral-900);\n  color: var(--color-white);\n  font-family: var(--font-inter);\n  font-weight: var(--weight-semibold);\n  font-size: 12px;\n  line-height: 1.5em;\n  padding: 8px 12px;\n  border-radius: 8px;\n  box-shadow: var(--shadow-popover);\n  position: relative;\n}\n\n/* Position variants */\n.tooltip-top {\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-bottom: 6px;\n}\n\n.tooltip-bottom {\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-top: 6px;\n}\n\n.tooltip-left {\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-right: 6px;\n}\n\n.tooltip-right {\n  left: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-left: 6px;\n}\n\n/* Multiline support */\n.tooltip.multiline {\n  white-space: normal;\n}\n\n.tooltip.multiline .tooltip-content {\n  max-width: 240px;\n}\n\n/* Icon variant - positioning adjustments for tooltips on icons */\n.tooltip-icon.tooltip-top {\n  margin-bottom: 4px;\n}\n\n.tooltip-icon.tooltip-bottom {\n  margin-top: 4px;\n}\n\n.tooltip-icon.tooltip-left {\n  margin-right: 4px;\n}\n\n.tooltip-icon.tooltip-right {\n  margin-left: 4px;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipVariant = 'default' | 'icon';\n\n@Component({\n  tag: 'bh-tooltip',\n  styleUrl: 'bh-tooltip.css',\n  shadow: true,\n})\nexport class BhTooltip {\n  /**\n   * The tooltip text content\n   */\n  @Prop() text: string = '';\n\n  /**\n   * Position of the tooltip relative to its target\n   */\n  @Prop() position: TooltipPosition = 'top';\n\n  /**\n   * Variant of the tooltip (default or icon)\n   */\n  @Prop() variant: TooltipVariant = 'default';\n\n  /**\n   * Whether the tooltip is visible\n   */\n  @Prop() visible: boolean = false;\n\n  /**\n   * Maximum width in pixels (enables multiline if > 240)\n   */\n  @Prop() maxWidth?: number;\n\n  render() {\n    const tooltipClasses = {\n      'tooltip': true,\n      [`tooltip-${this.position}`]: true,\n      [`tooltip-${this.variant}`]: true,\n      'tooltip-visible': this.visible,\n      'multiline': this.maxWidth !== undefined && this.maxWidth > 240,\n    };\n\n    const tooltipStyles = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n    return (\n      <div class={tooltipClasses} style={tooltipStyles} role=\"tooltip\" part=\"tooltip\">\n        <div class=\"tooltip-content\">{this.text}</div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,YAAY,GAAG,ggCAAggC;;MCUxgC,SAAS,GAAA,MAAA;;;;AACpB;;AAEG;IACK,IAAI,GAAW,EAAE;AAEzB;;AAEG;IACK,QAAQ,GAAoB,KAAK;AAEzC;;AAEG;IACK,OAAO,GAAmB,SAAS;AAE3C;;AAEG;IACK,OAAO,GAAY,KAAK;AAEhC;;AAEG;AACK,IAAA,QAAQ;IAEhB,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,CAAC,WAAW,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;AAClC,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;YACjC,iBAAiB,EAAE,IAAI,CAAC,OAAO;YAC/B,WAAW,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,GAAG,GAAG;SAChE;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,EAAE,QAAQ,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAA,EAAA,CAAI,EAAE,GAAG,EAAE;QAE7E,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;;;;;;;"}
+{"version":3,"file":"bh-label.bh-tooltip.entry.js","sources":["src/components/bh-label/bh-label.css?tag=bh-label&encapsulation=shadow","src/components/bh-label/bh-label.tsx","src/components/bh-tooltip/bh-tooltip.css?tag=bh-tooltip&encapsulation=shadow","src/components/bh-tooltip/bh-tooltip.tsx"],"sourcesContent":[":host {\n  display: block;\n  font-family: var(--font-inter, 'Inter', sans-serif);\n}\n\n.label-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs, 6px);\n}\n\n.label-container.layout-block {\n  flex-direction: column;\n}\n\n.label-container.layout-inline {\n  flex-direction: row;\n  align-items: flex-start;\n  gap: var(--spacing-sm, 8px);\n}\n\n.label-container.layout-inline .label-wrapper {\n  flex-shrink: 0;\n}\n\n.label-container.layout-inline-start {\n  flex-direction: row;\n  align-items: flex-start;\n  gap: var(--spacing-sm, 8px);\n}\n\n.label-container.layout-inline-start .label-content {\n  flex-shrink: 0;\n  width: auto;\n}\n\n.label-container.layout-inline-start .label-text-group {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.label-container.layout-inline-start .label-wrapper {\n  gap: var(--spacing-xxs, 4px);\n}\n\n.label-container.layout-inline-start .label-text {\n  font-size: var(--text-md-size, 16px);\n  color: var(--color-neutral-900, #101828);\n  cursor: pointer;\n}\n\n.label-container.layout-inline-start .supporting-text {\n  font-size: var(--text-sm-size, 14px);\n  color: var(--color-neutral-500, #667085);\n}\n\n.label-container.layout-inline-space-between {\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--spacing-sm, 8px);\n}\n\n.label-container.layout-inline-space-between .label-wrapper {\n  flex-shrink: 0;\n}\n\n.label-container.layout-inline-space-between .label-content {\n  flex-grow: 1;\n  display: flex;\n  justify-content: flex-end;\n}\n\n.label-wrapper {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xxs, 4px);\n}\n\n.label-text {\n  font-family: inherit;\n  font-weight: 500;\n  font-size: var(--text-sm-size, 14px);\n  line-height: 1.43;\n  color: var(--color-neutral-700, #344054);\n  margin: 0;\n  cursor: default;\n}\n\n.label-text.disabled {\n  color: var(--color-neutral-400, #98a2b3);\n}\n\n.asterisk {\n  font-family: inherit;\n  font-weight: 400;\n  font-size: var(--text-sm-size, 14px);\n  line-height: 1.43;\n  color: var(--color-error-600, #dc2626);\n}\n\n.supporting-text {\n  font-family: inherit;\n  font-weight: 400;\n  font-size: var(--text-sm-size, 14px);\n  line-height: 1.43;\n  color: var(--color-neutral-500, #667085);\n  margin: 0;\n}\n\n.supporting-text.disabled {\n  color: var(--color-neutral-400, #98a2b3);\n}\n\n.label-content {\n  width: 100%;\n}\n\n.icon-with-tooltip {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-left: auto;\n}\n\n.help-icon {\n  font-size: var(--text-xl-size, 20px);\n  color: var(--color-neutral-400, #98a2b3);\n  cursor: pointer;\n  user-select: none;\n  transition: color 0.2s ease-in-out;\n}\n\n.help-icon:hover {\n  color: var(--color-neutral-500, #667085);\n}\n\n.disabled .help-icon {\n  color: var(--color-neutral-300, #d0d5dd);\n  cursor: not-allowed;\n}\n","import { Component, Prop, h, Element, State, Event, EventEmitter } from '@stencil/core';\n\nexport type LabelLayout = 'block' | 'inline' | 'inline-start' | 'inline-space-between';\n\n@Component({\n  tag: 'bh-label',\n  styleUrl: 'bh-label.css',\n  shadow: true,\n})\nexport class BhLabel {\n  @Element() el!: HTMLElement;\n\n  private tooltipTimerRef?: ReturnType<typeof setTimeout>;\n\n  /**\n   * The label text to display\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Layout style for the label container\n   * - block: Label above content (default for form fields)\n   * - inline: Label next to content (label first)\n   * - inline-start: Content next to label (content first, for checkboxes/radios)\n   * - inline-space-between: Label and content on opposite ends\n   */\n  @Prop() layout: LabelLayout = 'block';\n\n  /**\n   * The id of the form element the label is bound to.\n   * Use when the labeled element is not a child of this component.\n   */\n  @Prop() for: string = '';\n\n  /**\n   * Supporting text displayed below the label (second line)\n   * for instructions or additional description\n   */\n  @Prop() supportingText: string = '';\n\n  /**\n   * Whether to show the required asterisk\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether to show the help icon\n   */\n  @Prop() showHelpIcon: boolean = false;\n\n  /**\n   * Tooltip text for the help icon\n   */\n  @Prop() helpIconTooltip: string = 'Help';\n\n  /**\n   * Whether the label is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  @State() showHelpTooltip: boolean = false;\n\n  /**\n   * Emitted when the help icon is clicked\n   */\n  @Event() bhHelpClick!: EventEmitter<void>;\n\n  disconnectedCallback() {\n    if (this.tooltipTimerRef) {\n      clearTimeout(this.tooltipTimerRef);\n    }\n  }\n\n  private handleHelpIconMouseEnter = () => {\n    if (this.tooltipTimerRef) {\n      clearTimeout(this.tooltipTimerRef);\n    }\n    this.tooltipTimerRef = setTimeout(() => {\n      this.showHelpTooltip = true;\n    }, 300);\n  };\n\n  private handleHelpIconMouseLeave = () => {\n    if (this.tooltipTimerRef) {\n      clearTimeout(this.tooltipTimerRef);\n      this.tooltipTimerRef = undefined;\n    }\n    this.showHelpTooltip = false;\n  };\n\n  private handleHelpIconClick = () => {\n    this.bhHelpClick.emit();\n  };\n\n  render() {\n    const wrapperClasses = {\n      'label-container': true,\n      [`layout-${this.layout}`]: true,\n      'disabled': this.disabled,\n    };\n\n    const labelClasses = {\n      'label-text': true,\n      'disabled': this.disabled,\n    };\n\n    const supportingClasses = {\n      'supporting-text': true,\n      'disabled': this.disabled,\n    };\n\n    const labelWrapper = (\n      <div class=\"label-wrapper\">\n        {this.label && (\n          <label class={labelClasses} htmlFor={this.for || undefined}>\n            {this.label}\n          </label>\n        )}\n        {this.required && <span class=\"asterisk\">*</span>}\n        {this.showHelpIcon && (\n          <div class=\"icon-with-tooltip\">\n            <span\n              class=\"help-icon material-symbols-outlined\"\n              onClick={this.handleHelpIconClick}\n              onMouseEnter={this.handleHelpIconMouseEnter}\n              onMouseLeave={this.handleHelpIconMouseLeave}\n            >\n              help\n            </span>\n            <bh-tooltip\n              text={this.helpIconTooltip}\n              position=\"top\"\n              visible={this.showHelpTooltip}\n            />\n          </div>\n        )}\n      </div>\n    );\n\n    const supportingTextEl = this.supportingText && (\n      <p class={supportingClasses}>{this.supportingText}</p>\n    );\n\n    const contentSlot = (\n      <div class=\"label-content\">\n        <slot></slot>\n      </div>\n    );\n\n    // For inline-start layout, content comes first (used for checkbox/radio)\n    if (this.layout === 'inline-start') {\n      return (\n        <div class={wrapperClasses}>\n          {contentSlot}\n          <div class=\"label-text-group\">\n            {labelWrapper}\n            {supportingTextEl}\n          </div>\n        </div>\n      );\n    }\n\n    // Default layout: label wrapper first, then content\n    return (\n      <div class={wrapperClasses}>\n        {labelWrapper}\n        {supportingTextEl}\n        {contentSlot}\n      </div>\n    );\n  }\n}\n","/* ==========================================================================\n   BH-TOOLTIP COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n.tooltip {\n  position: absolute;\n  z-index: 10000;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n  white-space: nowrap;\n}\n\n.tooltip-visible {\n  opacity: 1;\n}\n\n.tooltip-content {\n  background-color: var(--color-neutral-900);\n  color: var(--color-white);\n  font-family: var(--font-inter);\n  font-weight: var(--weight-semibold);\n  font-size: 12px;\n  line-height: 1.5em;\n  padding: 8px 12px;\n  border-radius: 8px;\n  box-shadow: var(--shadow-popover);\n  position: relative;\n}\n\n/* Position variants */\n.tooltip-top {\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-bottom: 6px;\n}\n\n.tooltip-bottom {\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-top: 6px;\n}\n\n.tooltip-left {\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-right: 6px;\n}\n\n.tooltip-right {\n  left: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-left: 6px;\n}\n\n/* Multiline support */\n.tooltip.multiline {\n  white-space: normal;\n}\n\n.tooltip.multiline .tooltip-content {\n  max-width: 240px;\n}\n\n/* Icon variant - positioning adjustments for tooltips on icons */\n.tooltip-icon.tooltip-top {\n  margin-bottom: 4px;\n}\n\n.tooltip-icon.tooltip-bottom {\n  margin-top: 4px;\n}\n\n.tooltip-icon.tooltip-left {\n  margin-right: 4px;\n}\n\n.tooltip-icon.tooltip-right {\n  margin-left: 4px;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipVariant = 'default' | 'icon';\n\n@Component({\n  tag: 'bh-tooltip',\n  styleUrl: 'bh-tooltip.css',\n  shadow: true,\n})\nexport class BhTooltip {\n  /**\n   * The tooltip text content\n   */\n  @Prop() text: string = '';\n\n  /**\n   * Position of the tooltip relative to its target\n   */\n  @Prop() position: TooltipPosition = 'top';\n\n  /**\n   * Variant of the tooltip (default or icon)\n   */\n  @Prop() variant: TooltipVariant = 'default';\n\n  /**\n   * Whether the tooltip is visible\n   */\n  @Prop() visible: boolean = false;\n\n  /**\n   * Maximum width in pixels (enables multiline if > 240)\n   */\n  @Prop() maxWidth?: number;\n\n  render() {\n    const tooltipClasses = {\n      'tooltip': true,\n      [`tooltip-${this.position}`]: true,\n      [`tooltip-${this.variant}`]: true,\n      'tooltip-visible': this.visible,\n      'multiline': this.maxWidth !== undefined && this.maxWidth > 240,\n    };\n\n    const tooltipStyles = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n    return (\n      <div class={tooltipClasses} style={tooltipStyles} role=\"tooltip\" part=\"tooltip\">\n        <div class=\"tooltip-content\">{this.text}</div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/bh-label_2.entry.js

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

package/dist/esm/bh-modal-actions.entry.js

@@ -55,7 +55,7 @@ const BhModalActions = class {
         return (h("div", { class: "modal-actions-content modal-actions-content--fill" }, secondaryButton, primaryButton));
     }
     render() {
-        return (h(Host, { key: 'fa07c24fee15053743650dfe99ee671eecdbf8e3' }, h("div", { key: 'e3d48c9e12aad9b55c745b23b641a6e96db662c4', class: "modal-actions" }, this.divider && h("div", { key: '89997127609e3a888b25be6a39654b264db8d785', class: "divider" }), this.renderButtons())));
+        return (h(Host, { key: 'a2ebe2ef19c22b54f9cf012be1afd5d5f518501e' }, h("div", { key: '949126f8d1f5c5c2e465976c9e7185358a78ed8f', class: "modal-actions" }, this.divider && h("div", { key: '8d679073738a0bd139533e228da7ab41f4817783', class: "divider" }), this.renderButtons())));
     }
 };
 BhModalActions.style = bhModalActionsCss;

package/dist/esm/bh-modal-header.entry.js

@@ -53,19 +53,19 @@ const BhModalHeader = class {
     render() {
         const isHorizontal = this.type === 'horizontal-left-aligned';
         const isCenter = this.type === 'center-aligned';
-        return (h(Host, { key: 'ecc564b2fdb20b724b57417e19c011298070acc3' }, h("div", { key: 'bc83df6dd5b206ecc9d9407021c0a82a6a3c0163', class: {
+        return (h(Host, { key: '0cd587f790ac57e2f1223290f165befb670c5f69' }, h("div", { key: '05b3d29fab868c0df0f4c78627f4a73881e6be78', class: {
                 'modal-header': true,
                 'modal-header--center': isCenter,
                 'modal-header--horizontal': isHorizontal,
-            } }, h("div", { key: 'c6c4a092a205ec1838fc25bec1169e335cad5dad', class: {
+            } }, h("div", { key: '5df36c324cc53882cf6f5bdd1751e1a5c6dcfb74', class: {
                 'modal-header-content': true,
                 'modal-header-content--center': isCenter,
                 'modal-header-content--horizontal': isHorizontal,
-            } }, this.showIcon && this.icon && (h("bh-featured-icon", { key: '3c6bfc2f3038d841861f19816ba13ab3ff4d9830', icon: this.icon, color: this.iconColor, size: "md", iconStyle: "outlined" })), h("div", { key: '968463ccc835da635c4ffbea04c47764d38b0ce6', class: {
+            } }, this.showIcon && this.icon && (h("bh-featured-icon", { key: '0b266b4ec69566e86d50d8e92a59cb65c5325d2f', icon: this.icon, color: this.iconColor, size: "md", iconStyle: "outlined" })), h("div", { key: '49f156f8da0a2490864e7bfed47f86c47186019a', class: {
                 'modal-text-content': true,
                 'modal-text-content--center': isCenter,
                 'modal-text-content--horizontal': isHorizontal,
-            } }, h("h3", { key: '97b45faf3f93ed63d16eefcd84af7d973e1eeac1', class: "modal-title" }, this.modalTitle), this.description && (h("p", { key: 'd7a3cbdfef4b55d93faa424aa2fc88d4e242defd', class: "modal-description" }, this.description)))), this.showCloseButton && (h("bh-button-icon", { key: '03b325d8aaa2e977b1ee5b03ee6d6eea71bb9981', class: "close-button", hierarchy: "quaternary", size: "sm", iconName: "close", ariaLabel: "Close modal", onBhClick: this.handleClose }))), this.paddingBottom && h("div", { key: 'b06b66e5691dbaffcf703dac3cf520dda60e283c', class: "padding-bottom" }), this.divider && h("div", { key: 'dc852a2142f9fb9cd8895123845a206bdd75b1e6', class: "divider" })));
+            } }, h("h3", { key: '9a1ec5d615a2bc4235436df1dca06f491cd35060', class: "modal-title" }, this.modalTitle), this.description && (h("p", { key: '3192bfb2c7c22a38c6b659f22a1888cdff06d8cc', class: "modal-description" }, this.description)))), this.showCloseButton && (h("bh-button-icon", { key: '9cf4075c307cf9fac21d09ad5f24ae79f008e856', class: "close-button", hierarchy: "quaternary", size: "sm", iconName: "close", ariaLabel: "Close modal", onBhClick: this.handleClose }))), this.paddingBottom && h("div", { key: '7540d61acc791bf7990250152c7de58d86c76349', class: "padding-bottom" }), this.divider && h("div", { key: '59fef37c5b48aa865eb4df6d3fbc26d83b2bc083', class: "divider" })));
     }
 };
 BhModalHeader.style = bhModalHeaderCss;

package/dist/esm/bh-month-picker-content.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-nAAobRRQ.js';
 
-const bhMonthPickerContentCss = "@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}.month-picker-content{width:100%;overflow-x:hidden;font-family:var(--font-inter)}.month-picker-content.animate-slide-up-enter{animation-duration:var(--animation-duration-slow, 0.3s)}.month-picker-content.scrollable{max-height:340px;overflow-y:auto;overflow-y:overlay;position:relative}.month-picker-content.scrollable::-webkit-scrollbar{width:var(--spacing-xs)}.month-picker-content.scrollable::-webkit-scrollbar-track{background:transparent;border-radius:var(--radius-xs)}.month-picker-content.scrollable::-webkit-scrollbar-thumb{background:transparent;border-radius:var(--radius-xs);transition:background 0.2s ease}.month-picker-content.scrollable:hover::-webkit-scrollbar-track{background:var(--color-neutral-50)}.month-picker-content.scrollable:hover::-webkit-scrollbar-thumb{background:var(--color-neutral-200)}.month-picker-content.scrollable:hover::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-300)}.month-picker-content.scrollable{scrollbar-width:thin;scrollbar-color:transparent transparent}.month-picker-content.scrollable:hover{scrollbar-color:var(--color-neutral-200) transparent}.calendar{display:flex;flex-direction:column;width:100%;padding:var(--spacing-lg) 0 var(--spacing-lg) var(--spacing-lg)}.year-section{display:flex;flex-direction:column;width:100%}.year-month-container{display:flex;flex-direction:row;width:100%;align-items:flex-start}.year-label{width:auto;height:auto;display:flex;align-items:flex-start;justify-content:flex-start;font-family:var(--font-inter);font-weight:var(--weight-bold);font-size:var(--text-sm-size);line-height:var(--text-md-line);color:var(--color-neutral-700);flex-shrink:0;min-width:50px;padding:var(--spacing-md) 0}.months-row{display:flex;flex-direction:column;}.month-button{width:40px;height:40px;border-radius:var(--radius-full);border:2px solid transparent;background:transparent;display:flex;align-items:center;justify-content:center;font-family:var(--font-inter);font-weight:var(--weight-medium);font-size:var(--text-sm-size);line-height:var(--leading-sm);color:var(--color-neutral-500);cursor:pointer;transition:all var(--animation-duration-fast, 0.1s) var(--animation-easing-ease, ease);flex-shrink:0;text-align:center;overflow:hidden}.month-row{display:flex;gap:var(--spacing-sm);justify-content:flex-start}.month-button:hover:not(.inactive):not(.selected):not(:disabled):not(.today){background:var(--color-neutral-50);color:var(--color-neutral-800)}.month-button.selected{background:var(--color-brand-600);color:var(--color-white);font-weight:var(--weight-semibold)}.month-button.today:not(.selected){border-color:var(--color-brand-600)}.month-button.today:not(.selected):hover{background:var(--color-brand-100);color:var(--color-brand-600)}.month-button.inactive,.month-button:disabled{opacity:0.4;cursor:not-allowed;color:var(--color-neutral-400)}.month-button:disabled:hover{background:transparent}.section-divider{width:100%;margin:var(--spacing-xl) 0}.divider-container{width:100%;display:flex;justify-content:center}.divider-line{width:100%;height:1px;background:var(--color-neutral-200)}.month-button:focus{outline:none}.month-button.keyboard-focused{outline:var(--border-width-md, 2px) solid var(--color-brand-500);outline-offset:var(--spacing-xs)}";
+const bhMonthPickerContentCss = ":host{display:block}.month-picker-content{width:100%;overflow-x:hidden;font-family:var(--font-inter)}.month-picker-content.animate-slide-up-enter{animation-duration:var(--animation-duration-slow, 0.3s)}.month-picker-content.scrollable{max-height:340px;overflow-y:auto;overflow-y:overlay;position:relative}.month-picker-content.scrollable::-webkit-scrollbar{width:var(--spacing-xs)}.month-picker-content.scrollable::-webkit-scrollbar-track{background:transparent;border-radius:var(--radius-xs)}.month-picker-content.scrollable::-webkit-scrollbar-thumb{background:transparent;border-radius:var(--radius-xs);transition:background 0.2s ease}.month-picker-content.scrollable:hover::-webkit-scrollbar-track{background:var(--color-neutral-50)}.month-picker-content.scrollable:hover::-webkit-scrollbar-thumb{background:var(--color-neutral-200)}.month-picker-content.scrollable:hover::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-300)}.month-picker-content.scrollable{scrollbar-width:thin;scrollbar-color:transparent transparent}.month-picker-content.scrollable:hover{scrollbar-color:var(--color-neutral-200) transparent}.calendar{display:flex;flex-direction:column;width:100%;padding:var(--spacing-lg) 0 var(--spacing-lg) var(--spacing-lg)}.year-section{display:flex;flex-direction:column;width:100%}.year-month-container{display:flex;flex-direction:row;width:100%;align-items:flex-start}.year-label{width:auto;height:auto;display:flex;align-items:flex-start;justify-content:flex-start;font-family:var(--font-inter);font-weight:var(--weight-bold);font-size:var(--text-sm-size);line-height:var(--text-md-line);color:var(--color-neutral-700);flex-shrink:0;min-width:50px;padding:var(--spacing-md) 0}.months-row{display:flex;flex-direction:column;}.month-button{width:40px;height:40px;border-radius:var(--radius-full);border:2px solid transparent;background:transparent;display:flex;align-items:center;justify-content:center;font-family:var(--font-inter);font-weight:var(--weight-medium);font-size:var(--text-sm-size);line-height:var(--leading-sm);color:var(--color-neutral-500);cursor:pointer;transition:all var(--animation-duration-fast, 0.1s) var(--animation-easing-ease, ease);flex-shrink:0;text-align:center;overflow:hidden}.month-row{display:flex;gap:var(--spacing-sm);justify-content:flex-start}.month-button:hover:not(.inactive):not(.selected):not(:disabled):not(.today){background:var(--color-neutral-50);color:var(--color-neutral-800)}.month-button.selected{background:var(--color-brand-600);color:var(--color-white);font-weight:var(--weight-semibold)}.month-button.today:not(.selected){border-color:var(--color-brand-600)}.month-button.today:not(.selected):hover{background:var(--color-brand-100);color:var(--color-brand-600)}.month-button.inactive,.month-button:disabled{opacity:0.4;cursor:not-allowed;color:var(--color-neutral-400)}.month-button:disabled:hover{background:transparent}.section-divider{width:100%;margin:var(--spacing-xl) 0}.divider-container{width:100%;display:flex;justify-content:center}.divider-line{width:100%;height:1px;background:var(--color-neutral-200)}.month-button:focus{outline:none}.month-button.keyboard-focused{outline:var(--border-width-md, 2px) solid var(--color-brand-500);outline-offset:var(--spacing-xs)}";
 
 const BhMonthPickerContent = class {
     constructor(hostRef) {
@@ -170,7 +170,7 @@ const BhMonthPickerContent = class {
     }
     render() {
         const years = this.getYears();
-        return (h(Host, { key: '7b5bd2302804839e5362752f0e1a54dd2698c1b7' }, h("div", { key: 'a71768e29f2c703f6b0ddfd84a392ae084182b9f', class: `month-picker-content animate-slide-up-enter ${this.scrollable ? 'scrollable' : ''}`, style: { height: this.height }, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("div", { key: '3754d5452f0d4952e61f6bb0968c712f725466b1', class: "calendar" }, years.map((year, yearIndex) => (h("div", { key: year, class: "year-section", id: `year-${year}` }, h("div", { class: "year-month-container" }, h("div", { class: "year-label" }, year), h("div", { class: "months-row" }, h("div", { class: "month-row" }, this.months.slice(0, 6).map((_, monthIndex) => (h("button", { key: monthIndex, class: this.getMonthButtonClasses(monthIndex, year), disabled: !this.isMonthSelectable(monthIndex, year), onClick: () => this.selectMonth(monthIndex, year) }, this.months[monthIndex])))), h("div", { class: "month-row" }, this.months.slice(6, 12).map((_, idx) => {
+        return (h(Host, { key: 'a75e03f25c6d6637fe34d0c254f9546d527fb8cd' }, h("div", { key: '2b1583d74114af9e35bab621308cc2faa12cc2ca', class: `month-picker-content animate-slide-up-enter ${this.scrollable ? 'scrollable' : ''}`, style: { height: this.height }, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("div", { key: '709506a2453d8da663391d84d4ee2f77e72acc43', class: "calendar" }, years.map((year, yearIndex) => (h("div", { key: year, class: "year-section", id: `year-${year}` }, h("div", { class: "year-month-container" }, h("div", { class: "year-label" }, year), h("div", { class: "months-row" }, h("div", { class: "month-row" }, this.months.slice(0, 6).map((_, monthIndex) => (h("button", { key: monthIndex, class: this.getMonthButtonClasses(monthIndex, year), disabled: !this.isMonthSelectable(monthIndex, year), onClick: () => this.selectMonth(monthIndex, year) }, this.months[monthIndex])))), h("div", { class: "month-row" }, this.months.slice(6, 12).map((_, idx) => {
             const monthIndex = idx + 6;
             return (h("button", { key: monthIndex, class: this.getMonthButtonClasses(monthIndex, year), disabled: !this.isMonthSelectable(monthIndex, year), onClick: () => this.selectMonth(monthIndex, year) }, this.months[monthIndex]));
         })))), yearIndex < years.length - 1 && (h("div", { class: "section-divider" }, h("div", { class: "divider-container" }, h("div", { class: "divider-line" })))))))))));

package/dist/esm/bh-month-picker-content.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"bh-month-picker-content.entry.js","sources":["src/components/bh-month-picker-content/bh-month-picker-content.css?tag=bh-month-picker-content&encapsulation=shadow","src/components/bh-month-picker-content/bh-month-picker-content.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n  display: block;\n}\n\n/* Content area - can be scrollable or not based on parent needs */\n.month-picker-content {\n  width: 100%;\n  overflow-x: hidden;\n  font-family: var(--font-inter);\n}\n\n/* Extend animation duration for smoother effect */\n.month-picker-content.animate-slide-up-enter {\n  animation-duration: var(--animation-duration-slow, 0.3s);\n}\n\n.month-picker-content.scrollable {\n  max-height: 340px;\n  overflow-y: auto;\n  overflow-y: overlay; /* Overlay scrollbar - doesn't take space from content */\n  position: relative;\n}\n\n/* Custom scrollbar styling - hidden by default, visible on hover */\n.month-picker-content.scrollable::-webkit-scrollbar {\n  width: var(--spacing-xs);\n}\n\n.month-picker-content.scrollable::-webkit-scrollbar-track {\n  background: transparent;\n  border-radius: var(--radius-xs);\n}\n\n.month-picker-content.scrollable::-webkit-scrollbar-thumb {\n  background: transparent;\n  border-radius: var(--radius-xs);\n  transition: background 0.2s ease;\n}\n\n/* Show scrollbar on hover */\n.month-picker-content.scrollable:hover::-webkit-scrollbar-track {\n  background: var(--color-neutral-50);\n}\n\n.month-picker-content.scrollable:hover::-webkit-scrollbar-thumb {\n  background: var(--color-neutral-200);\n}\n\n.month-picker-content.scrollable:hover::-webkit-scrollbar-thumb:hover {\n  background: var(--color-neutral-300);\n}\n\n/* Firefox scrollbar - hidden by default */\n.month-picker-content.scrollable {\n  scrollbar-width: thin;\n  scrollbar-color: transparent transparent;\n}\n\n/* Firefox - show scrollbar on hover */\n.month-picker-content.scrollable:hover {\n  scrollbar-color: var(--color-neutral-200) transparent;\n}\n\n/* Calendar container */\n.calendar {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: var(--spacing-lg) 0 var(--spacing-lg) var(--spacing-lg);\n}\n\n/* Year Section - Contains year button + months row */\n.year-section {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.year-month-container {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  align-items: flex-start;\n}\n\n/* Year Label - positioned on left */\n.year-label {\n  width: auto;\n  height: auto;\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  font-family: var(--font-inter);\n  font-weight: var(--weight-bold);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-md-line);\n  color: var(--color-neutral-700);\n  flex-shrink: 0;\n  min-width: 50px;\n  padding: var(--spacing-md) 0;\n}\n\n/* Months Grid - 2 rows of 6 months each */\n.months-row {\n  display: flex;\n  flex-direction: column;\n  /* flex: 1;\n  width: 100%; */\n}\n\n/* Month Button - 40x40px circular */\n.month-button {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--radius-full);\n  border: 2px solid transparent;\n  background: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  font-size: var(--text-sm-size);\n  line-height: var(--leading-sm);\n  color: var(--color-neutral-500);\n  cursor: pointer;\n  transition: all var(--animation-duration-fast, 0.1s) var(--animation-easing-ease, ease);\n  flex-shrink: 0;\n  text-align: center;\n  overflow: hidden;\n}\n\n.month-row {\n  display: flex;\n  gap: var(--spacing-sm);\n  justify-content: flex-start;\n}\n\n.month-button:hover:not(.inactive):not(.selected):not(:disabled):not(.today) {\n  background: var(--color-neutral-50);\n  color: var(--color-neutral-800);\n}\n\n/* Selected state - blue background */\n.month-button.selected {\n  background: var(--color-brand-600);\n  color: var(--color-white);\n  font-weight: var(--weight-semibold);\n}\n\n/* Today's date state - blue border to match date picker */\n.month-button.today:not(.selected) {\n  border-color: var(--color-brand-600);\n}\n\n.month-button.today:not(.selected):hover {\n  background: var(--color-brand-100);\n  color: var(--color-brand-600);\n}\n\n/* Inactive/disabled state */\n.month-button.inactive,\n.month-button:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  color: var(--color-neutral-400);\n}\n\n.month-button:disabled:hover {\n  background: transparent;\n}\n\n/* Section Divider - Between year sections */\n.section-divider {\n  width: 100%;\n  margin: var(--spacing-xl) 0;\n}\n\n.divider-container {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n.divider-line {\n  width: 100%;\n  height: 1px;\n  background: var(--color-neutral-200);\n}\n\n/* Focus states for accessibility - completely disable outline */\n.month-button:focus {\n  outline: none;\n}\n\n/* Keyboard navigation state - will be added via JavaScript */\n.month-button.keyboard-focused {\n  outline: var(--border-width-md, 2px) solid var(--color-brand-500);\n  outline-offset: var(--spacing-xs);\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\n\nexport interface MonthYear {\n  month: number; // 0-11 (January = 0, December = 11)\n  year: number;\n}\n\nexport interface DisabledMonth {\n  month: number;\n  year: number;\n}\n\n@Component({\n  tag: 'bh-month-picker-content',\n  styleUrl: 'bh-month-picker-content.css',\n  shadow: true,\n})\nexport class BhMonthPickerContent {\n  @Element() el!: HTMLElement;\n\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   * Whether the content is scrollable\n   */\n  @Prop() scrollable: boolean = true;\n\n  /**\n   * Currently selected month (0-11)\n   */\n  @Prop() selectedMonth?: number;\n\n  /**\n   * Currently selected year\n   */\n  @Prop() selectedYear?: number;\n\n  /**\n   * Height of the content area\n   */\n  @Prop() height: string = '375px';\n\n  /**\n   * Value object with month and year\n   */\n  @Prop() value?: MonthYear;\n\n  @State() internalSelectedMonth: number | null = null;\n  @State() internalSelectedYear: number | null = null;\n  @State() isUsingKeyboard: boolean = false;\n\n  /**\n   * Event emitted when a month is selected\n   */\n  @Event() bhChange!: EventEmitter<MonthYear>;\n\n  /**\n   * Event emitted when a month/year is selected\n   */\n  @Event() bhMonthYearSelect!: EventEmitter<MonthYear>;\n\n  private months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n  private currentDate = new Date();\n  private currentMonth = this.currentDate.getMonth();\n  private currentYear = this.currentDate.getFullYear();\n\n  @Watch('value')\n  handleValueChange(newValue: MonthYear | undefined) {\n    if (newValue) {\n      this.internalSelectedMonth = newValue.month;\n      this.internalSelectedYear = newValue.year;\n    }\n  }\n\n  @Watch('selectedMonth')\n  handleSelectedMonthChange(newValue: number | undefined) {\n    if (newValue !== undefined) {\n      this.internalSelectedMonth = newValue;\n    }\n  }\n\n  @Watch('selectedYear')\n  handleSelectedYearChange(newValue: number | undefined) {\n    if (newValue !== undefined) {\n      this.internalSelectedYear = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    // Initialize with props or current date\n    if (this.value) {\n      this.internalSelectedMonth = this.value.month;\n      this.internalSelectedYear = this.value.year;\n    } else if (this.selectedMonth !== undefined || this.selectedYear !== undefined) {\n      this.internalSelectedMonth = this.selectedMonth ?? this.currentMonth;\n      this.internalSelectedYear = this.selectedYear ?? this.currentYear;\n    } else {\n      // Initialize with current date if within range\n      if (this.currentYear >= this.minYear && this.currentYear <= this.maxYear) {\n        this.internalSelectedMonth = this.currentMonth;\n        this.internalSelectedYear = this.currentYear;\n      } else {\n        this.internalSelectedMonth = this.currentMonth;\n        this.internalSelectedYear = this.currentYear < this.minYear ? this.minYear : this.maxYear;\n      }\n    }\n  }\n\n  componentDidLoad() {\n    if (this.scrollable) {\n      setTimeout(() => this.scrollToSelectedYear(), 0);\n    }\n  }\n\n  private scrollToSelectedYear() {\n    if (this.internalSelectedYear === null) return;\n\n    const container = this.el.shadowRoot?.querySelector('.month-picker-content') as HTMLElement;\n    const yearElement = this.el.shadowRoot?.querySelector(`#year-${this.internalSelectedYear}`) as HTMLElement;\n\n    if (!container || !yearElement) return;\n\n    const containerHeight = container.clientHeight;\n    const yearElementTop = yearElement.offsetTop;\n    const yearElementHeight = yearElement.offsetHeight;\n\n    const isFirstYear = this.internalSelectedYear === this.minYear;\n    const isLastYear = this.internalSelectedYear === this.maxYear;\n\n    if (!isFirstYear && !isLastYear) {\n      const scrollOffset = 50;\n      const scrollTop = yearElementTop - containerHeight / 2 + yearElementHeight / 2 + scrollOffset;\n      container.scrollTop = Math.max(0, scrollTop);\n    } else if (isFirstYear) {\n      container.scrollTop = 0;\n    } else {\n      container.scrollTop = container.scrollHeight;\n    }\n  }\n\n  private getYears(): number[] {\n    return Array.from({ length: this.maxYear - this.minYear + 1 }, (_, i) => this.minYear + i);\n  }\n\n  private isCurrentMonth(monthIndex: number, year: number): boolean {\n    return this.currentMonth === monthIndex && this.currentYear === year;\n  }\n\n  private isMonthSelectable(monthIndex: number, year: number): boolean {\n    if (year < this.minYear || year > this.maxYear) {\n      return false;\n    }\n\n    return !this.disabledMonths.some(\n      disabled => disabled.month === monthIndex && disabled.year === year\n    );\n  }\n\n  private selectMonth(monthIndex: number, year: number) {\n    if (this.disabled || !this.isMonthSelectable(monthIndex, year)) {\n      return;\n    }\n\n    this.internalSelectedMonth = monthIndex;\n    this.internalSelectedYear = year;\n\n    const selection: MonthYear = { month: monthIndex, year };\n    this.bhChange.emit(selection);\n    this.bhMonthYearSelect.emit(selection);\n  }\n\n  private handleKeyDown = () => {\n    this.isUsingKeyboard = true;\n  };\n\n  private handleMouseDown = () => {\n    this.isUsingKeyboard = false;\n  };\n\n  private getMonthButtonClasses(monthIndex: number, year: number): string {\n    const classes = ['month-button'];\n\n    if (!this.isMonthSelectable(monthIndex, year)) {\n      classes.push('inactive');\n    }\n    if (this.internalSelectedMonth === monthIndex && this.internalSelectedYear === year) {\n      classes.push('selected');\n    }\n    if (this.isCurrentMonth(monthIndex, year)) {\n      classes.push('today');\n    }\n\n    return classes.join(' ');\n  }\n\n  render() {\n    const years = this.getYears();\n\n    return (\n      <Host>\n        <div\n          class={`month-picker-content animate-slide-up-enter ${this.scrollable ? 'scrollable' : ''}`}\n          style={{ height: this.height }}\n          onKeyDown={this.handleKeyDown}\n          onMouseDown={this.handleMouseDown}\n        >\n          <div class=\"calendar\">\n            {years.map((year, yearIndex) => (\n              <div key={year} class=\"year-section\" id={`year-${year}`}>\n                <div class=\"year-month-container\">\n                  <div class=\"year-label\">{year}</div>\n\n                  <div class=\"months-row\">\n                    {/* First row: Jan-Jun */}\n                    <div class=\"month-row\">\n                      {this.months.slice(0, 6).map((_, monthIndex) => (\n                        <button\n                          key={monthIndex}\n                          class={this.getMonthButtonClasses(monthIndex, year)}\n                          disabled={!this.isMonthSelectable(monthIndex, year)}\n                          onClick={() => this.selectMonth(monthIndex, year)}\n                        >\n                          {this.months[monthIndex]}\n                        </button>\n                      ))}\n                    </div>\n\n                    {/* Second row: Jul-Dec */}\n                    <div class=\"month-row\">\n                      {this.months.slice(6, 12).map((_, idx) => {\n                        const monthIndex = idx + 6;\n                        return (\n                          <button\n                            key={monthIndex}\n                            class={this.getMonthButtonClasses(monthIndex, year)}\n                            disabled={!this.isMonthSelectable(monthIndex, year)}\n                            onClick={() => this.selectMonth(monthIndex, year)}\n                          >\n                            {this.months[monthIndex]}\n                          </button>\n                        );\n                      })}\n                    </div>\n                  </div>\n                </div>\n\n                {/* Section Divider (not for last year) */}\n                {yearIndex < years.length - 1 && (\n                  <div class=\"section-divider\">\n                    <div class=\"divider-container\">\n                      <div class=\"divider-line\"></div>\n                    </div>\n                  </div>\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bh-month-picker-content.entry.js","sources":["src/components/bh-month-picker-content/bh-month-picker-content.css?tag=bh-month-picker-content&encapsulation=shadow","src/components/bh-month-picker-content/bh-month-picker-content.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n/* Content area - can be scrollable or not based on parent needs */\n.month-picker-content {\n  width: 100%;\n  overflow-x: hidden;\n  font-family: var(--font-inter);\n}\n\n/* Extend animation duration for smoother effect */\n.month-picker-content.animate-slide-up-enter {\n  animation-duration: var(--animation-duration-slow, 0.3s);\n}\n\n.month-picker-content.scrollable {\n  max-height: 340px;\n  overflow-y: auto;\n  overflow-y: overlay; /* Overlay scrollbar - doesn't take space from content */\n  position: relative;\n}\n\n/* Custom scrollbar styling - hidden by default, visible on hover */\n.month-picker-content.scrollable::-webkit-scrollbar {\n  width: var(--spacing-xs);\n}\n\n.month-picker-content.scrollable::-webkit-scrollbar-track {\n  background: transparent;\n  border-radius: var(--radius-xs);\n}\n\n.month-picker-content.scrollable::-webkit-scrollbar-thumb {\n  background: transparent;\n  border-radius: var(--radius-xs);\n  transition: background 0.2s ease;\n}\n\n/* Show scrollbar on hover */\n.month-picker-content.scrollable:hover::-webkit-scrollbar-track {\n  background: var(--color-neutral-50);\n}\n\n.month-picker-content.scrollable:hover::-webkit-scrollbar-thumb {\n  background: var(--color-neutral-200);\n}\n\n.month-picker-content.scrollable:hover::-webkit-scrollbar-thumb:hover {\n  background: var(--color-neutral-300);\n}\n\n/* Firefox scrollbar - hidden by default */\n.month-picker-content.scrollable {\n  scrollbar-width: thin;\n  scrollbar-color: transparent transparent;\n}\n\n/* Firefox - show scrollbar on hover */\n.month-picker-content.scrollable:hover {\n  scrollbar-color: var(--color-neutral-200) transparent;\n}\n\n/* Calendar container */\n.calendar {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: var(--spacing-lg) 0 var(--spacing-lg) var(--spacing-lg);\n}\n\n/* Year Section - Contains year button + months row */\n.year-section {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.year-month-container {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  align-items: flex-start;\n}\n\n/* Year Label - positioned on left */\n.year-label {\n  width: auto;\n  height: auto;\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  font-family: var(--font-inter);\n  font-weight: var(--weight-bold);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-md-line);\n  color: var(--color-neutral-700);\n  flex-shrink: 0;\n  min-width: 50px;\n  padding: var(--spacing-md) 0;\n}\n\n/* Months Grid - 2 rows of 6 months each */\n.months-row {\n  display: flex;\n  flex-direction: column;\n  /* flex: 1;\n  width: 100%; */\n}\n\n/* Month Button - 40x40px circular */\n.month-button {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--radius-full);\n  border: 2px solid transparent;\n  background: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  font-size: var(--text-sm-size);\n  line-height: var(--leading-sm);\n  color: var(--color-neutral-500);\n  cursor: pointer;\n  transition: all var(--animation-duration-fast, 0.1s) var(--animation-easing-ease, ease);\n  flex-shrink: 0;\n  text-align: center;\n  overflow: hidden;\n}\n\n.month-row {\n  display: flex;\n  gap: var(--spacing-sm);\n  justify-content: flex-start;\n}\n\n.month-button:hover:not(.inactive):not(.selected):not(:disabled):not(.today) {\n  background: var(--color-neutral-50);\n  color: var(--color-neutral-800);\n}\n\n/* Selected state - blue background */\n.month-button.selected {\n  background: var(--color-brand-600);\n  color: var(--color-white);\n  font-weight: var(--weight-semibold);\n}\n\n/* Today's date state - blue border to match date picker */\n.month-button.today:not(.selected) {\n  border-color: var(--color-brand-600);\n}\n\n.month-button.today:not(.selected):hover {\n  background: var(--color-brand-100);\n  color: var(--color-brand-600);\n}\n\n/* Inactive/disabled state */\n.month-button.inactive,\n.month-button:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  color: var(--color-neutral-400);\n}\n\n.month-button:disabled:hover {\n  background: transparent;\n}\n\n/* Section Divider - Between year sections */\n.section-divider {\n  width: 100%;\n  margin: var(--spacing-xl) 0;\n}\n\n.divider-container {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n.divider-line {\n  width: 100%;\n  height: 1px;\n  background: var(--color-neutral-200);\n}\n\n/* Focus states for accessibility - completely disable outline */\n.month-button:focus {\n  outline: none;\n}\n\n/* Keyboard navigation state - will be added via JavaScript */\n.month-button.keyboard-focused {\n  outline: var(--border-width-md, 2px) solid var(--color-brand-500);\n  outline-offset: var(--spacing-xs);\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\n\nexport interface MonthYear {\n  month: number; // 0-11 (January = 0, December = 11)\n  year: number;\n}\n\nexport interface DisabledMonth {\n  month: number;\n  year: number;\n}\n\n@Component({\n  tag: 'bh-month-picker-content',\n  styleUrl: 'bh-month-picker-content.css',\n  shadow: true,\n})\nexport class BhMonthPickerContent {\n  @Element() el!: HTMLElement;\n\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   * Whether the content is scrollable\n   */\n  @Prop() scrollable: boolean = true;\n\n  /**\n   * Currently selected month (0-11)\n   */\n  @Prop() selectedMonth?: number;\n\n  /**\n   * Currently selected year\n   */\n  @Prop() selectedYear?: number;\n\n  /**\n   * Height of the content area\n   */\n  @Prop() height: string = '375px';\n\n  /**\n   * Value object with month and year\n   */\n  @Prop() value?: MonthYear;\n\n  @State() internalSelectedMonth: number | null = null;\n  @State() internalSelectedYear: number | null = null;\n  @State() isUsingKeyboard: boolean = false;\n\n  /**\n   * Event emitted when a month is selected\n   */\n  @Event() bhChange!: EventEmitter<MonthYear>;\n\n  /**\n   * Event emitted when a month/year is selected\n   */\n  @Event() bhMonthYearSelect!: EventEmitter<MonthYear>;\n\n  private months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n  private currentDate = new Date();\n  private currentMonth = this.currentDate.getMonth();\n  private currentYear = this.currentDate.getFullYear();\n\n  @Watch('value')\n  handleValueChange(newValue: MonthYear | undefined) {\n    if (newValue) {\n      this.internalSelectedMonth = newValue.month;\n      this.internalSelectedYear = newValue.year;\n    }\n  }\n\n  @Watch('selectedMonth')\n  handleSelectedMonthChange(newValue: number | undefined) {\n    if (newValue !== undefined) {\n      this.internalSelectedMonth = newValue;\n    }\n  }\n\n  @Watch('selectedYear')\n  handleSelectedYearChange(newValue: number | undefined) {\n    if (newValue !== undefined) {\n      this.internalSelectedYear = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    // Initialize with props or current date\n    if (this.value) {\n      this.internalSelectedMonth = this.value.month;\n      this.internalSelectedYear = this.value.year;\n    } else if (this.selectedMonth !== undefined || this.selectedYear !== undefined) {\n      this.internalSelectedMonth = this.selectedMonth ?? this.currentMonth;\n      this.internalSelectedYear = this.selectedYear ?? this.currentYear;\n    } else {\n      // Initialize with current date if within range\n      if (this.currentYear >= this.minYear && this.currentYear <= this.maxYear) {\n        this.internalSelectedMonth = this.currentMonth;\n        this.internalSelectedYear = this.currentYear;\n      } else {\n        this.internalSelectedMonth = this.currentMonth;\n        this.internalSelectedYear = this.currentYear < this.minYear ? this.minYear : this.maxYear;\n      }\n    }\n  }\n\n  componentDidLoad() {\n    if (this.scrollable) {\n      setTimeout(() => this.scrollToSelectedYear(), 0);\n    }\n  }\n\n  private scrollToSelectedYear() {\n    if (this.internalSelectedYear === null) return;\n\n    const container = this.el.shadowRoot?.querySelector('.month-picker-content') as HTMLElement;\n    const yearElement = this.el.shadowRoot?.querySelector(`#year-${this.internalSelectedYear}`) as HTMLElement;\n\n    if (!container || !yearElement) return;\n\n    const containerHeight = container.clientHeight;\n    const yearElementTop = yearElement.offsetTop;\n    const yearElementHeight = yearElement.offsetHeight;\n\n    const isFirstYear = this.internalSelectedYear === this.minYear;\n    const isLastYear = this.internalSelectedYear === this.maxYear;\n\n    if (!isFirstYear && !isLastYear) {\n      const scrollOffset = 50;\n      const scrollTop = yearElementTop - containerHeight / 2 + yearElementHeight / 2 + scrollOffset;\n      container.scrollTop = Math.max(0, scrollTop);\n    } else if (isFirstYear) {\n      container.scrollTop = 0;\n    } else {\n      container.scrollTop = container.scrollHeight;\n    }\n  }\n\n  private getYears(): number[] {\n    return Array.from({ length: this.maxYear - this.minYear + 1 }, (_, i) => this.minYear + i);\n  }\n\n  private isCurrentMonth(monthIndex: number, year: number): boolean {\n    return this.currentMonth === monthIndex && this.currentYear === year;\n  }\n\n  private isMonthSelectable(monthIndex: number, year: number): boolean {\n    if (year < this.minYear || year > this.maxYear) {\n      return false;\n    }\n\n    return !this.disabledMonths.some(\n      disabled => disabled.month === monthIndex && disabled.year === year\n    );\n  }\n\n  private selectMonth(monthIndex: number, year: number) {\n    if (this.disabled || !this.isMonthSelectable(monthIndex, year)) {\n      return;\n    }\n\n    this.internalSelectedMonth = monthIndex;\n    this.internalSelectedYear = year;\n\n    const selection: MonthYear = { month: monthIndex, year };\n    this.bhChange.emit(selection);\n    this.bhMonthYearSelect.emit(selection);\n  }\n\n  private handleKeyDown = () => {\n    this.isUsingKeyboard = true;\n  };\n\n  private handleMouseDown = () => {\n    this.isUsingKeyboard = false;\n  };\n\n  private getMonthButtonClasses(monthIndex: number, year: number): string {\n    const classes = ['month-button'];\n\n    if (!this.isMonthSelectable(monthIndex, year)) {\n      classes.push('inactive');\n    }\n    if (this.internalSelectedMonth === monthIndex && this.internalSelectedYear === year) {\n      classes.push('selected');\n    }\n    if (this.isCurrentMonth(monthIndex, year)) {\n      classes.push('today');\n    }\n\n    return classes.join(' ');\n  }\n\n  render() {\n    const years = this.getYears();\n\n    return (\n      <Host>\n        <div\n          class={`month-picker-content animate-slide-up-enter ${this.scrollable ? 'scrollable' : ''}`}\n          style={{ height: this.height }}\n          onKeyDown={this.handleKeyDown}\n          onMouseDown={this.handleMouseDown}\n        >\n          <div class=\"calendar\">\n            {years.map((year, yearIndex) => (\n              <div key={year} class=\"year-section\" id={`year-${year}`}>\n                <div class=\"year-month-container\">\n                  <div class=\"year-label\">{year}</div>\n\n                  <div class=\"months-row\">\n                    {/* First row: Jan-Jun */}\n                    <div class=\"month-row\">\n                      {this.months.slice(0, 6).map((_, monthIndex) => (\n                        <button\n                          key={monthIndex}\n                          class={this.getMonthButtonClasses(monthIndex, year)}\n                          disabled={!this.isMonthSelectable(monthIndex, year)}\n                          onClick={() => this.selectMonth(monthIndex, year)}\n                        >\n                          {this.months[monthIndex]}\n                        </button>\n                      ))}\n                    </div>\n\n                    {/* Second row: Jul-Dec */}\n                    <div class=\"month-row\">\n                      {this.months.slice(6, 12).map((_, idx) => {\n                        const monthIndex = idx + 6;\n                        return (\n                          <button\n                            key={monthIndex}\n                            class={this.getMonthButtonClasses(monthIndex, year)}\n                            disabled={!this.isMonthSelectable(monthIndex, year)}\n                            onClick={() => this.selectMonth(monthIndex, year)}\n                          >\n                            {this.months[monthIndex]}\n                          </button>\n                        );\n                      })}\n                    </div>\n                  </div>\n                </div>\n\n                {/* Section Divider (not for last year) */}\n                {yearIndex < years.length - 1 && (\n                  <div class=\"section-divider\">\n                    <div class=\"divider-container\">\n                      <div class=\"divider-line\"></div>\n                    </div>\n                  </div>\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/bh-month-picker.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-nAAobRRQ.js';
 
-const bhMonthPickerCss = "@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:inline-block;position:relative}.month-picker-container{position:relative;display:inline-block}.month-picker-trigger{cursor:pointer}.month-picker-trigger.input-field-container{position:relative}.calendar-icon-overlay{position:absolute;top:0;right:0;width:40px;height:100%;cursor:pointer;z-index:1}.month-picker-menu-container{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--spacing-xs)}.month-picker-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;background:transparent}";
+const bhMonthPickerCss = ":host{display:inline-block;position:relative}.month-picker-container{position:relative;display:inline-block}.month-picker-trigger{cursor:pointer}.month-picker-trigger.input-field-container{position:relative}.calendar-icon-overlay{position:absolute;top:0;right:0;width:40px;height:100%;cursor:pointer;z-index:1}.month-picker-menu-container{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--spacing-xs)}.month-picker-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;background:transparent}";
 
 const BhMonthPicker = class {
     constructor(hostRef) {
@@ -138,7 +138,7 @@ const BhMonthPicker = class {
         this.handleMenuCancel();
     };
     render() {
-        return (h(Host, { key: '0589ee8d12120966f1e16614bb4240af8cc704ef' }, h("div", { key: '7183af3b3f2ca24a6b9429123b69d642babf5017', class: "month-picker-container" }, this.variant === 'dropdown-outlined' && (h("div", { key: '6d8ff65f93cadf2f9310ead4aad911e6a17aa6e3', class: "month-picker-trigger", onClick: this.handleTriggerClick }, h("bh-button", { key: '9b12957ab1c7aee12ca02c283e207a55d555c40d', hierarchy: "secondary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'dropdown-ghost' && (h("div", { key: '507ef5131209567f9bc715b6a33e6af962408186', class: "month-picker-trigger", onClick: this.handleTriggerClick }, h("bh-button", { key: '02d266b0a9df4acbe87beaf67bfe162fbcf9da62', hierarchy: "tertiary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'input' && (h("div", { key: 'd7d103e871c3324809abc25d60ba4e7bc64342b5', class: "month-picker-trigger input-field-container" }, h("bh-input-text", { key: '5c9ce346d9b29ce131a32a6bc021fe98c48fd690', label: this.label, placeholder: this.placeholder, value: this.getDisplayValue(), disabled: this.disabled, showTrailingIcon: true, trailingIcon: "calendar_month", showHelpIcon: false, showHintText: false, showLabel: this.showLabel, width: this.inputWidth, onBhFocus: this.handleInputFocus }), h("div", { key: 'f0808d5ea14a9d6f75bf2656b06878c61196a36a', class: "calendar-icon-overlay", onClick: this.handleTriggerClick }))), h("div", { key: '53973ee2b582a3aa31cc1dad51028dfa69098f27', class: "month-picker-menu-container" }, h("bh-picker-menu", { key: '6fcb615cc650fc6e139634bae3de529ba3ffa481', visible: this.isMenuOpen, minYear: this.minYear, maxYear: this.maxYear, disabled: this.disabled, disabledMonths: this.disabledMonths, showFooter: this.showFooter, value: this.tempSelection || this.selectedValue || undefined, onBhChange: this.handleMonthYearSelect, onBhMonthYearSelect: this.handleMonthYearSelect, onBhCancel: this.handleMenuCancel, onBhApply: this.handleMenuApply }))), (this.isMenuOpen || this.isMenuClosing) && (h("div", { key: 'd142281cbda719b7df39015eab43da3d118ceeed', class: "month-picker-backdrop", onClick: this.handleBackdropClick }))));
+        return (h(Host, { key: '5b72723d083d321a76f50fc04c191f8e64ef7401' }, h("div", { key: '0f8b024ea7d80d7bfbb7b9ab2fbce4fceb4d33a5', class: "month-picker-container" }, this.variant === 'dropdown-outlined' && (h("div", { key: '7c69c561c8e9e1c4f65a4021985ba88bb9d7848f', class: "month-picker-trigger", onClick: this.handleTriggerClick }, h("bh-button", { key: '4b14cce01f5fa83bccc8045223cd4ba3f111b049', hierarchy: "secondary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'dropdown-ghost' && (h("div", { key: 'cc845860105690b11a954f1e3b8ea4d06976f097', class: "month-picker-trigger", onClick: this.handleTriggerClick }, h("bh-button", { key: '0c0bc4886457509969c725e76ddbaedc3adcff88', hierarchy: "tertiary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'input' && (h("div", { key: '7847aaa686ddeca915994d07cdb8bfb99f0a87f7', class: "month-picker-trigger input-field-container" }, h("bh-input-text", { key: '31f5a2d39301b34abf4ab253107190e1ccd3c5e3', label: this.label, placeholder: this.placeholder, value: this.getDisplayValue(), disabled: this.disabled, showTrailingIcon: true, trailingIcon: "calendar_month", showHelpIcon: false, showHintText: false, showLabel: this.showLabel, width: this.inputWidth, onBhFocus: this.handleInputFocus }), h("div", { key: 'bb84f723548e70f1557ff4516aa2de9abfd7aca5', class: "calendar-icon-overlay", onClick: this.handleTriggerClick }))), h("div", { key: '1cf1cb70a374da2d136b882fd8c058725ed979a1', class: "month-picker-menu-container" }, h("bh-picker-menu", { key: '2e39f11a1f122f55640be121fb1379d681133442', visible: this.isMenuOpen, minYear: this.minYear, maxYear: this.maxYear, disabled: this.disabled, disabledMonths: this.disabledMonths, showFooter: this.showFooter, value: this.tempSelection || this.selectedValue || undefined, onBhChange: this.handleMonthYearSelect, onBhMonthYearSelect: this.handleMonthYearSelect, onBhCancel: this.handleMenuCancel, onBhApply: this.handleMenuApply }))), (this.isMenuOpen || this.isMenuClosing) && (h("div", { key: '0b76f799e8a917aa49f317b056d1d27ff1023197', class: "month-picker-backdrop", onClick: this.handleBackdropClick }))));
     }
     static get watchers() { return {
         "value": ["handleValueChange"]

package/dist/esm/bh-month-picker.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"bh-month-picker.entry.js","sources":["src/components/bh-month-picker/bh-month-picker.css?tag=bh-month-picker&encapsulation=shadow","src/components/bh-month-picker/bh-month-picker.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n  display: inline-block;\n  position: relative;\n}\n\n.month-picker-container {\n  position: relative;\n  display: inline-block;\n}\n\n.month-picker-trigger {\n  cursor: pointer;\n}\n\n.month-picker-trigger.input-field-container {\n  position: relative;\n}\n\n.calendar-icon-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 40px;\n  height: 100%;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.month-picker-menu-container {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  margin-top: var(--spacing-xs);\n}\n\n.month-picker-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 999;\n  background: transparent;\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\nexport type MonthPickerVariant = 'dropdown-outlined' | 'dropdown-ghost' | 'input';\n\n@Component({\n  tag: 'bh-month-picker',\n  styleUrl: 'bh-month-picker.css',\n  shadow: true,\n})\nexport class BhMonthPicker {\n  /**\n   * Variant of the month picker trigger\n   */\n  @Prop() variant: MonthPickerVariant = 'dropdown-outlined';\n\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   * Label for input variant\n   */\n  @Prop() label: string = 'Select Month';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string = 'Choose month and year';\n\n  /**\n   * Width for input variant\n   */\n  @Prop() inputWidth: string = '200px';\n\n  /**\n   * Whether to show the label\n   */\n  @Prop() showLabel: boolean = true;\n\n  /**\n   * Whether to show the footer\n   */\n  @Prop() showFooter: boolean = true;\n\n  /**\n   * Currently selected value\n   */\n  @Prop() value?: MonthYear;\n\n  @State() selectedValue: MonthYear | null = null;\n  @State() tempSelection: MonthYear | null = null;\n  @State() isMenuOpen: boolean = false;\n  @State() isMenuClosing: boolean = false;\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  @Watch('value')\n  handleValueChange(newValue: MonthYear | undefined) {\n    if (newValue !== undefined) {\n      this.selectedValue = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      this.selectedValue = this.value;\n    }\n  }\n\n  private getDisplayValue(): string {\n    if (!this.selectedValue) return '';\n    // US convention: MM/YYYY (01/2025)\n    const month = (this.selectedValue.month + 1).toString().padStart(2, '0');\n    return `${month}/${this.selectedValue.year}`;\n  }\n\n  private getButtonLabel(): string {\n    return this.getDisplayValue() || this.placeholder;\n  }\n\n  private handleTriggerClick = () => {\n    if (this.disabled) return;\n    if (!this.isMenuOpen && this.showFooter) {\n      this.tempSelection = this.selectedValue;\n    }\n    this.isMenuOpen = !this.isMenuOpen;\n  };\n\n  private handleInputFocus = () => {\n    if (this.disabled) return;\n    if (!this.isMenuOpen && this.showFooter) {\n      this.tempSelection = this.selectedValue;\n    }\n    this.isMenuOpen = true;\n  };\n\n  private handleMonthYearSelect = (event: CustomEvent<MonthYear | null>) => {\n    const monthYear = event.detail;\n    if (!monthYear) return;\n    if (this.showFooter) {\n      this.tempSelection = monthYear;\n    } else {\n      this.selectedValue = monthYear;\n      this.bhChange.emit(monthYear);\n      this.bhMonthYearSelect.emit(monthYear);\n      this.closeMenu();\n    }\n  };\n\n  private handleMenuCancel = () => {\n    this.tempSelection = null;\n    this.closeMenu();\n  };\n\n  private handleMenuApply = () => {\n    if (this.tempSelection) {\n      this.selectedValue = this.tempSelection;\n      this.bhChange.emit(this.tempSelection);\n      this.bhMonthYearSelect.emit(this.tempSelection);\n      this.tempSelection = null;\n    }\n    this.closeMenu();\n  };\n\n  private closeMenu() {\n    this.isMenuClosing = true;\n    setTimeout(() => {\n      this.isMenuOpen = false;\n      this.isMenuClosing = false;\n    }, 150);\n  }\n\n  private handleBackdropClick = () => {\n    this.handleMenuCancel();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"month-picker-container\">\n          {/* Dropdown Outlined Variant */}\n          {this.variant === 'dropdown-outlined' && (\n            <div class=\"month-picker-trigger\" onClick={this.handleTriggerClick}>\n              <bh-button\n                hierarchy=\"secondary\"\n                \n                size=\"sm\"\n                icon=\"trailing\"\n                label={this.getButtonLabel()}\n                iconName=\"expand_more\"\n                disabled={this.disabled}\n              ></bh-button>\n            </div>\n          )}\n\n          {/* Dropdown Ghost Variant */}\n          {this.variant === 'dropdown-ghost' && (\n            <div class=\"month-picker-trigger\" onClick={this.handleTriggerClick}>\n              <bh-button\n                hierarchy=\"tertiary\"\n                \n                size=\"sm\"\n                icon=\"trailing\"\n                label={this.getButtonLabel()}\n                iconName=\"expand_more\"\n                disabled={this.disabled}\n              ></bh-button>\n            </div>\n          )}\n\n          {/* Input Variant */}\n          {this.variant === 'input' && (\n            <div class=\"month-picker-trigger input-field-container\">\n              <bh-input-text\n                label={this.label}\n                placeholder={this.placeholder}\n                value={this.getDisplayValue()}\n                disabled={this.disabled}\n                showTrailingIcon={true}\n                trailingIcon=\"calendar_month\"\n                showHelpIcon={false}\n                showHintText={false}\n                showLabel={this.showLabel}\n                width={this.inputWidth}\n                onBhFocus={this.handleInputFocus}\n              ></bh-input-text>\n              <div class=\"calendar-icon-overlay\" onClick={this.handleTriggerClick}></div>\n            </div>\n          )}\n\n          {/* Month Picker Menu */}\n          <div class=\"month-picker-menu-container\">\n            <bh-picker-menu\n              visible={this.isMenuOpen}\n              minYear={this.minYear}\n              maxYear={this.maxYear}\n              disabled={this.disabled}\n              disabledMonths={this.disabledMonths}\n              showFooter={this.showFooter}\n              value={this.tempSelection || this.selectedValue || undefined}\n              onBhChange={this.handleMonthYearSelect}\n              onBhMonthYearSelect={this.handleMonthYearSelect}\n              onBhCancel={this.handleMenuCancel}\n              onBhApply={this.handleMenuApply}\n            ></bh-picker-menu>\n          </div>\n        </div>\n\n        {/* Backdrop */}\n        {(this.isMenuOpen || this.isMenuClosing) && (\n          <div class=\"month-picker-backdrop\" onClick={this.handleBackdropClick}></div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bh-month-picker.entry.js","sources":["src/components/bh-month-picker/bh-month-picker.css?tag=bh-month-picker&encapsulation=shadow","src/components/bh-month-picker/bh-month-picker.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n}\n\n.month-picker-container {\n  position: relative;\n  display: inline-block;\n}\n\n.month-picker-trigger {\n  cursor: pointer;\n}\n\n.month-picker-trigger.input-field-container {\n  position: relative;\n}\n\n.calendar-icon-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 40px;\n  height: 100%;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.month-picker-menu-container {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  margin-top: var(--spacing-xs);\n}\n\n.month-picker-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 999;\n  background: transparent;\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\nexport type MonthPickerVariant = 'dropdown-outlined' | 'dropdown-ghost' | 'input';\n\n@Component({\n  tag: 'bh-month-picker',\n  styleUrl: 'bh-month-picker.css',\n  shadow: true,\n})\nexport class BhMonthPicker {\n  /**\n   * Variant of the month picker trigger\n   */\n  @Prop() variant: MonthPickerVariant = 'dropdown-outlined';\n\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   * Label for input variant\n   */\n  @Prop() label: string = 'Select Month';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string = 'Choose month and year';\n\n  /**\n   * Width for input variant\n   */\n  @Prop() inputWidth: string = '200px';\n\n  /**\n   * Whether to show the label\n   */\n  @Prop() showLabel: boolean = true;\n\n  /**\n   * Whether to show the footer\n   */\n  @Prop() showFooter: boolean = true;\n\n  /**\n   * Currently selected value\n   */\n  @Prop() value?: MonthYear;\n\n  @State() selectedValue: MonthYear | null = null;\n  @State() tempSelection: MonthYear | null = null;\n  @State() isMenuOpen: boolean = false;\n  @State() isMenuClosing: boolean = false;\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  @Watch('value')\n  handleValueChange(newValue: MonthYear | undefined) {\n    if (newValue !== undefined) {\n      this.selectedValue = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      this.selectedValue = this.value;\n    }\n  }\n\n  private getDisplayValue(): string {\n    if (!this.selectedValue) return '';\n    // US convention: MM/YYYY (01/2025)\n    const month = (this.selectedValue.month + 1).toString().padStart(2, '0');\n    return `${month}/${this.selectedValue.year}`;\n  }\n\n  private getButtonLabel(): string {\n    return this.getDisplayValue() || this.placeholder;\n  }\n\n  private handleTriggerClick = () => {\n    if (this.disabled) return;\n    if (!this.isMenuOpen && this.showFooter) {\n      this.tempSelection = this.selectedValue;\n    }\n    this.isMenuOpen = !this.isMenuOpen;\n  };\n\n  private handleInputFocus = () => {\n    if (this.disabled) return;\n    if (!this.isMenuOpen && this.showFooter) {\n      this.tempSelection = this.selectedValue;\n    }\n    this.isMenuOpen = true;\n  };\n\n  private handleMonthYearSelect = (event: CustomEvent<MonthYear | null>) => {\n    const monthYear = event.detail;\n    if (!monthYear) return;\n    if (this.showFooter) {\n      this.tempSelection = monthYear;\n    } else {\n      this.selectedValue = monthYear;\n      this.bhChange.emit(monthYear);\n      this.bhMonthYearSelect.emit(monthYear);\n      this.closeMenu();\n    }\n  };\n\n  private handleMenuCancel = () => {\n    this.tempSelection = null;\n    this.closeMenu();\n  };\n\n  private handleMenuApply = () => {\n    if (this.tempSelection) {\n      this.selectedValue = this.tempSelection;\n      this.bhChange.emit(this.tempSelection);\n      this.bhMonthYearSelect.emit(this.tempSelection);\n      this.tempSelection = null;\n    }\n    this.closeMenu();\n  };\n\n  private closeMenu() {\n    this.isMenuClosing = true;\n    setTimeout(() => {\n      this.isMenuOpen = false;\n      this.isMenuClosing = false;\n    }, 150);\n  }\n\n  private handleBackdropClick = () => {\n    this.handleMenuCancel();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"month-picker-container\">\n          {/* Dropdown Outlined Variant */}\n          {this.variant === 'dropdown-outlined' && (\n            <div class=\"month-picker-trigger\" onClick={this.handleTriggerClick}>\n              <bh-button\n                hierarchy=\"secondary\"\n                \n                size=\"sm\"\n                icon=\"trailing\"\n                label={this.getButtonLabel()}\n                iconName=\"expand_more\"\n                disabled={this.disabled}\n              ></bh-button>\n            </div>\n          )}\n\n          {/* Dropdown Ghost Variant */}\n          {this.variant === 'dropdown-ghost' && (\n            <div class=\"month-picker-trigger\" onClick={this.handleTriggerClick}>\n              <bh-button\n                hierarchy=\"tertiary\"\n                \n                size=\"sm\"\n                icon=\"trailing\"\n                label={this.getButtonLabel()}\n                iconName=\"expand_more\"\n                disabled={this.disabled}\n              ></bh-button>\n            </div>\n          )}\n\n          {/* Input Variant */}\n          {this.variant === 'input' && (\n            <div class=\"month-picker-trigger input-field-container\">\n              <bh-input-text\n                label={this.label}\n                placeholder={this.placeholder}\n                value={this.getDisplayValue()}\n                disabled={this.disabled}\n                showTrailingIcon={true}\n                trailingIcon=\"calendar_month\"\n                showHelpIcon={false}\n                showHintText={false}\n                showLabel={this.showLabel}\n                width={this.inputWidth}\n                onBhFocus={this.handleInputFocus}\n              ></bh-input-text>\n              <div class=\"calendar-icon-overlay\" onClick={this.handleTriggerClick}></div>\n            </div>\n          )}\n\n          {/* Month Picker Menu */}\n          <div class=\"month-picker-menu-container\">\n            <bh-picker-menu\n              visible={this.isMenuOpen}\n              minYear={this.minYear}\n              maxYear={this.maxYear}\n              disabled={this.disabled}\n              disabledMonths={this.disabledMonths}\n              showFooter={this.showFooter}\n              value={this.tempSelection || this.selectedValue || undefined}\n              onBhChange={this.handleMonthYearSelect}\n              onBhMonthYearSelect={this.handleMonthYearSelect}\n              onBhCancel={this.handleMenuCancel}\n              onBhApply={this.handleMenuApply}\n            ></bh-picker-menu>\n          </div>\n        </div>\n\n        {/* Backdrop */}\n        {(this.isMenuOpen || this.isMenuClosing) && (\n          <div class=\"month-picker-backdrop\" onClick={this.handleBackdropClick}></div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/bh-notification.entry.js

@@ -117,7 +117,7 @@ const BhNotification = class {
             notification: true,
             [`notification-${this.type}`]: true,
         };
-        return (h("div", { key: 'fcb47a9bab423243efac149251f6afbc313568c3', class: notificationClasses, role: "alert", part: "container" }, h("div", { key: 'f6119ec2b3ab549dde69e1817c39bb521c638c5e', class: "notification-content" }, h("div", { key: '9bcf5d938af89f34497e1a7d4bf80430dd79f5f3', class: "notification-icon-wrapper" }, h("bh-featured-icon", { key: 'ddfd7940aa41cce00a2e3cfc6aec3b85ca8628da', icon: this.getIconName(), color: this.getIconColor(), size: "sm", iconStyle: this.getIconStyle() })), h("div", { key: '4d77b106b4aeb8f550400baeed83efdf24c363e5', class: "notification-text" }, h("div", { key: '1933de95730dbb964e2bf17d065eb1848f3edb74', class: "notification-text-wrapper" }, this.notificationTitle && (h("h3", { key: '6925b30a9fb845344bd8fcb517d2f31b2b5c755e', class: "notification-title" }, this.notificationTitle)), this.description && (h("p", { key: '2d38a7733397cd7e596b7794e0c387ff97002ae2', class: "notification-description" }, this.description))), (this.actionText || this.dismissText) && (h("div", { key: 'da9933044826eb1e46fbe308ef6bb3feff7d3f40', class: "notification-actions" }, this.dismissText && (h("bh-button", { key: '12c2caeb3cba2d40fbd1c095dcc652b3c7bf94cf', hierarchy: "quaternary", size: "sm", label: this.dismissText, icon: "none", onBhClick: this.handleDismiss })), this.actionText && (h("bh-button", { key: 'eb72fa328044931470e557f027812ec283b8db24', hierarchy: "quaternary", size: "sm", label: this.actionText, icon: "none", onBhClick: this.handleAction })))))), this.dismissible && (h("button", { key: '7bd46d3fec9ea41a24cd2fc975b3b526c38a3934', class: "notification-close", onClick: this.handleClose, "aria-label": "Close notification" }, h("span", { key: '6c680f4500026ac18dc3cf7587042ba9edf72ec2', class: "material-symbols-outlined close-icon" }, "close")))));
+        return (h("div", { key: '3dca532858cd5fda3ce430da47acdcc89a59679f', class: notificationClasses, role: "alert", part: "container" }, h("div", { key: '88b4f31ec0d5b2aba6767d8fc616c8544cb8b773', class: "notification-content" }, h("div", { key: 'a66e70043c3c89b7b8a0498f958781056dd2b965', class: "notification-icon-wrapper" }, h("bh-featured-icon", { key: 'f8d9468175bcec7b8b080c23020ac27888cd93c7', icon: this.getIconName(), color: this.getIconColor(), size: "sm", iconStyle: this.getIconStyle() })), h("div", { key: 'e0e6e3be7de7cd45c042eb7c9c5139beaf927e14', class: "notification-text" }, h("div", { key: '4e855b80ea1eed53a4dee705cca87c527fd3d92d', class: "notification-text-wrapper" }, this.notificationTitle && (h("h3", { key: 'b75f8445ec14d53ba2dcd01769cc54fdbb2357b8', class: "notification-title" }, this.notificationTitle)), this.description && (h("p", { key: '1ad69b5841b0398aa7d0696734792027cc5359e9', class: "notification-description" }, this.description))), (this.actionText || this.dismissText) && (h("div", { key: 'd904d8b16edb41fa584015e899ea26b81d087d3c', class: "notification-actions" }, this.dismissText && (h("bh-button", { key: 'becb63bc964462c0b0eef1fc6f17b001fed09ef2', hierarchy: "quaternary", size: "sm", label: this.dismissText, icon: "none", onBhClick: this.handleDismiss })), this.actionText && (h("bh-button", { key: '6bfe290c58f160f06f1df3bc4fdcbfea753d9553', hierarchy: "quaternary", size: "sm", label: this.actionText, icon: "none", onBhClick: this.handleAction })))))), this.dismissible && (h("button", { key: 'b3e8fec95246c23eb7bd4165f5c66725ec231811', class: "notification-close", onClick: this.handleClose, "aria-label": "Close notification" }, h("span", { key: 'b041ba68bc67e969327408f40ff3cd92c8a52a73', class: "material-symbols-outlined close-icon" }, "close")))));
     }
 };
 BhNotification.style = bhNotificationCss;

package/dist/esm/bh-page-navigation-child.entry.js

@@ -37,7 +37,7 @@ const BhPageNavigationChild = class {
         };
     }
     render() {
-        return (h(Host, { key: '801f6ce9fa33bff82ae0572ca4233d62101bff5a' }, h("div", { key: 'b485e3a258658dadebda21a9f329bb676a737e6d', class: this.getItemClasses(), onClick: this.handleClick }, h("div", { key: '3cebeec1f7255591c5a2405198d65f7cc637fe02', class: "page-navigation-child-content" }, h("span", { key: '982dbda8defddf8a04cbd4831d68090816bb8228', class: "page-navigation-child-label" }, this.label), this.badge !== undefined && this.showBadge && (h("span", { key: '623a58963bbbbd94d5a2934165a4f5e821ef3a56', class: "page-navigation-child-badge" }, this.badge))))));
+        return (h(Host, { key: '7b51730980d4a8e466d5cca640339572f6ad2062' }, h("div", { key: '8ed4a9c84c92b7786a3986748575eaf336ef86a6', class: this.getItemClasses(), onClick: this.handleClick }, h("div", { key: '387bc1a2264c8a9474f294ea7104d6296ca0bbf3', class: "page-navigation-child-content" }, h("span", { key: '9b3961e48932f09887c519b56721994478dfca77', class: "page-navigation-child-label" }, this.label), this.badge !== undefined && this.showBadge && (h("span", { key: '430e176454b97486a2e4d08fc21283c03ac11b24', class: "page-navigation-child-badge" }, this.badge))))));
     }
 };
 BhPageNavigationChild.style = bhPageNavigationChildCss;

package/dist/esm/bh-page-navigation-multi-level_2.entry.js

@@ -88,11 +88,11 @@ const BhPageNavigationMultiLevel = class {
         };
     }
     render() {
-        return (h(Host, { key: 'db478fe5c9492c19a41acf68577cb78a00ebdc4f' }, h("div", { key: 'a968be18bbdac5bc39d45cf59b544e5384f7cdfc', class: this.getItemClasses() }, h("div", { key: 'da3f4a3b6246f50b27d2657080488135b85719be', class: "page-navigation-multi-level-parent", onClick: this.handleParentClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, h("div", { key: '64933e8c68ae1238581e4c81f3cae937e3199b1f', class: "page-navigation-item-content" }, !this.isHovered && (h("span", { key: 'd8369d06118533f5cdb2e228bc72cc0aafc71b79', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon)), this.isHovered && (h("span", { key: '852f49d37fa5d47d656aad732c46f23a4438be95', class: {
+        return (h(Host, { key: 'a87bd5e1926673b22bbac28ae94f0694269f3f07' }, h("div", { key: '8feec4d248ee32f4d2085e728990db1f9f2d14b2', class: this.getItemClasses() }, h("div", { key: 'aeaeae5646262b697dc151ee4996930db392234a', class: "page-navigation-multi-level-parent", onClick: this.handleParentClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, h("div", { key: '72c0fb3fe1f681c484a0a5e17551d09dd068f03a', class: "page-navigation-item-content" }, !this.isHovered && (h("span", { key: '622878b142a39d2b5b8fa69865b55ecce0b85f47', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon)), this.isHovered && (h("span", { key: '4844c5fe0c69a225804ecebdef091887237d4667', class: {
                 'page-navigation-chevron-icon': true,
                 'material-symbols-outlined': true,
                 'expanded': this.isExpanded,
-            } }, "expand_more")), h("span", { key: '5737917e070122fe1b74ff693ed7afceb262ca1d', class: "page-navigation-item-label" }, this.label), h("bh-button", { key: 'b3e29f3b6e7b64daa42a6a9a541cf0278b7dc6b5', hierarchy: "tertiary", icon: "only", size: "xs", iconName: "add", onClick: this.handleAddClick }))), (this.isExpanded || this.isAnimating) && (h("div", { key: 'e9f386ef6ca8757d6aad84d4e90c776e9ee82be8', 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) }))))))));
+            } }, "expand_more")), h("span", { key: '347a59718d412ab1f930ea565fb33c4f6a8be0f0', class: "page-navigation-item-label" }, this.label), h("bh-button", { key: '117a5ee32f65dbd9afdf499d4cc4438c9ab6a3c9', hierarchy: "tertiary", icon: "only", size: "xs", iconName: "add", onClick: this.handleAddClick }))), (this.isExpanded || this.isAnimating) && (h("div", { key: '56cbc14fbc61c335dfbd3a22c20a11b928ce04bd', 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"]
@@ -134,7 +134,7 @@ const BhPageNavigationSingleLevel = class {
         };
     }
     render() {
-        return (h(Host, { key: '1f58160e16d18bfe049035d33b48f14b11b676ae' }, h("div", { key: 'c5c44e67354359238f67df33c67e81ec2bbaf478', class: this.getItemClasses(), onClick: () => this.handleClick() }, h("div", { key: 'c3c3b27eaeb65d8325e5e92c428831af58a48448', class: "page-navigation-item-content" }, h("span", { key: 'e0e5315088e7f1c820fad38d2ae095494dc581bb', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon), h("span", { key: '37d30adc75791076a84c58f92fd93ad7c16267f0', class: "page-navigation-item-label" }, this.label)))));
+        return (h(Host, { key: '5b3997d17859a74a8b564e348b8c81a440cb7776' }, h("div", { key: 'c34fa8060ff6baf90361a39615b344352d34ce59', class: this.getItemClasses(), onClick: () => this.handleClick() }, h("div", { key: 'e6dd19e247dda5dd1f957610453539cf8143440c', class: "page-navigation-item-content" }, h("span", { key: '3df9dacf7dc53e3afd443984e0953cb3843793c7', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon), h("span", { key: '857b837aaa75cbcb678f7b9eb21b35be873085d1', class: "page-navigation-item-label" }, this.label)))));
     }
 };
 BhPageNavigationSingleLevel.style = bhPageNavigationSingleLevelCss;