@actabldesign/bellhop-core 0.0.3 → 0.0.4

package/dist/cjs/bh-label-DRC8k-B9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-label-DRC8k-B9.js","sources":["src/components/bh-label/bh-label.css?tag=bh-label&encapsulation=shadow","src/components/bh-label/bh-label.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"],"names":["h"],"mappings":"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"}

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

@@ -0,0 +1,48 @@
+'use strict';
+
+var bhLabel = require('./bh-label-DRC8k-B9.js');
+var index = require('./index-BVJ_Kket.js');
+
+const bhTooltipCss = ":host{display:inline-block}.tooltip{position:absolute;z-index:10000;pointer-events:none;opacity:0;transition:opacity 0.2s ease-in-out;white-space:nowrap}.tooltip-visible{opacity:1}.tooltip-content{background-color:var(--color-neutral-900);color:var(--color-white);font-family:var(--font-inter);font-weight:var(--weight-semibold);font-size:12px;line-height:1.5em;padding:8px 12px;border-radius:8px;box-shadow:var(--shadow-popover);position:relative}.tooltip-top{bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px}.tooltip-bottom{top:100%;left:50%;transform:translateX(-50%);margin-top:6px}.tooltip-left{right:100%;top:50%;transform:translateY(-50%);margin-right:6px}.tooltip-right{left:100%;top:50%;transform:translateY(-50%);margin-left:6px}.tooltip.multiline{white-space:normal}.tooltip.multiline .tooltip-content{max-width:240px}.tooltip-icon.tooltip-top{margin-bottom:4px}.tooltip-icon.tooltip-bottom{margin-top:4px}.tooltip-icon.tooltip-left{margin-right:4px}.tooltip-icon.tooltip-right{margin-left:4px}";
+
+const BhTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * The tooltip text content
+     */
+    text = '';
+    /**
+     * Position of the tooltip relative to its target
+     */
+    position = 'top';
+    /**
+     * Variant of the tooltip (default or icon)
+     */
+    variant = 'default';
+    /**
+     * Whether the tooltip is visible
+     */
+    visible = false;
+    /**
+     * Maximum width in pixels (enables multiline if > 240)
+     */
+    maxWidth;
+    render() {
+        const tooltipClasses = {
+            'tooltip': true,
+            [`tooltip-${this.position}`]: true,
+            [`tooltip-${this.variant}`]: true,
+            'tooltip-visible': this.visible,
+            'multiline': this.maxWidth !== undefined && this.maxWidth > 240,
+        };
+        const tooltipStyles = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
+        return (index.h("div", { key: 'a940486923a3a424a3c7e3ffde5251b756800049', class: tooltipClasses, style: tooltipStyles, role: "tooltip", part: "tooltip" }, index.h("div", { key: '78e7c1939da5eaccea4e78a2890982be817b88a9', class: "tooltip-content" }, this.text)));
+    }
+};
+BhTooltip.style = bhTooltipCss;
+
+exports.bh_label = bhLabel.BhLabel;
+exports.bh_tooltip = BhTooltip;
+//# sourceMappingURL=bh-label.bh-tooltip.entry.cjs.js.map

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

@@ -0,0 +1,66 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.js');
+
+const bhModalActionsCss = ":host{display:block;width:100%}.modal-actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-none, 0px);padding-top:var(--spacing-3xl, 24px);width:100%}.divider{height:1px;width:100%;flex-shrink:0;background-color:var(--color-border-secondary, #dcdfea);margin-bottom:var(--spacing-3xl, 24px)}.modal-actions-content{display:flex;gap:var(--spacing-lg, 12px);padding:0 var(--spacing-3xl, 24px);padding-bottom:var(--spacing-3xl, 24px);width:100%;box-sizing:border-box}.modal-actions-content--fill{flex-direction:row;align-items:stretch}.modal-actions-content--fill bh-button{flex:1;display:block;width:100%}.modal-actions-content--fill bh-button::part(button){width:100%}.modal-actions-content--fill .btn-destructive{flex:1}.modal-actions-content--right{flex-direction:row;align-items:center;justify-content:space-between}.actions-left{display:flex;gap:var(--spacing-lg, 12px);align-items:center}.actions-right{display:flex;gap:var(--spacing-lg, 12px);align-items:center;justify-content:flex-end}@media (max-width: 480px){.modal-actions-content--fill{flex-direction:column;align-items:stretch}.modal-actions-content--fill bh-button,.modal-actions-content--fill .btn-destructive{flex:none;width:100%}.modal-actions-content--fill{flex-direction:column-reverse}}.btn-destructive{display:flex;align-items:center;justify-content:center;gap:var(--button-content-gap, 4px);height:40px;padding:0 var(--button-padding-x, 12px);background-color:var(--color-bg-error, #d6341f);color:var(--color-fg-white, #ffffff);border:none;border-radius:var(--radius-md, 8px);font-family:var(--font-family-body, 'Inter', sans-serif);font-weight:var(--weight-semibold, 600);font-size:var(--button-font-size, 14px);line-height:var(--text-sm-line-height, 20px);letter-spacing:var(--letter-spacing-normal, 0px);cursor:pointer;overflow:hidden;transition:background-color 0.15s ease}.btn-destructive:hover{background-color:var(--color-bg-error-hover, #b82d1a)}.btn-destructive:focus-visible{outline:2px solid var(--color-bg-error, #d6341f);outline-offset:2px}.btn-destructive:active{background-color:var(--color-bg-error-active, #9a2515)}";
+
+const BhModalActions = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhPrimaryAction = index.createEvent(this, "bhPrimaryAction");
+        this.bhSecondaryAction = index.createEvent(this, "bhSecondaryAction");
+    }
+    /**
+     * Layout type for the actions:
+     * - 'fill': Buttons take full width
+     * - 'right-aligned': Buttons aligned to the right with optional left content slot
+     */
+    type = 'fill';
+    /**
+     * Whether to show destructive styling on primary button
+     */
+    destructive = false;
+    /**
+     * Primary/destructive action button label
+     */
+    primaryLabel = 'Confirm';
+    /**
+     * Secondary action button label
+     */
+    secondaryLabel = 'Cancel';
+    /**
+     * Whether to show the divider line above actions
+     */
+    divider = false;
+    /**
+     * Emitted when the primary/destructive action button is clicked
+     */
+    bhPrimaryAction;
+    /**
+     * Emitted when the secondary action button is clicked
+     */
+    bhSecondaryAction;
+    handlePrimaryAction = () => {
+        this.bhPrimaryAction.emit();
+    };
+    handleSecondaryAction = () => {
+        this.bhSecondaryAction.emit();
+    };
+    renderButtons() {
+        const isRightAligned = this.type === 'right-aligned';
+        const primaryButton = this.destructive ? (index.h("button", { class: "btn-destructive", onClick: this.handlePrimaryAction, type: "button" }, this.primaryLabel)) : (index.h("bh-button", { hierarchy: "primary", icon: "none", size: "md", label: this.primaryLabel, onBhClick: this.handlePrimaryAction }));
+        const secondaryButton = (index.h("bh-button", { hierarchy: "secondary", icon: "none", size: "md", label: this.secondaryLabel, onBhClick: this.handleSecondaryAction }));
+        if (isRightAligned) {
+            return (index.h("div", { class: "modal-actions-content modal-actions-content--right" }, index.h("div", { class: "actions-left" }, index.h("slot", { name: "left-content" })), index.h("div", { class: "actions-right" }, secondaryButton, primaryButton)));
+        }
+        // Full width buttons (stacks vertically on mobile via CSS)
+        return (index.h("div", { class: "modal-actions-content modal-actions-content--fill" }, secondaryButton, primaryButton));
+    }
+    render() {
+        return (index.h(index.Host, { key: 'fa07c24fee15053743650dfe99ee671eecdbf8e3' }, index.h("div", { key: 'e3d48c9e12aad9b55c745b23b641a6e96db662c4', class: "modal-actions" }, this.divider && index.h("div", { key: '89997127609e3a888b25be6a39654b264db8d785', class: "divider" }), this.renderButtons())));
+    }
+};
+BhModalActions.style = bhModalActionsCss;
+
+exports.bh_modal_actions = BhModalActions;
+//# sourceMappingURL=bh-modal-actions.entry.cjs.js.map

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

@@ -0,0 +1,76 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.js');
+
+const bhModalHeaderCss = ":host{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-none, 0px);width:100%}.modal-header{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-none, 0px);width:100%;position:relative}.modal-header--center{align-items:center}.modal-header--horizontal{flex-direction:row;align-items:flex-start}.modal-header-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-xl, 16px);padding:var(--spacing-3xl, 24px);padding-bottom:var(--spacing-none, 0px);width:100%}.modal-header-content--center{align-items:center}.modal-header-content--horizontal{flex-direction:row;align-items:flex-start}.modal-text-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-xs, 4px);width:100%;flex:1;min-width:0}.modal-text-content--center{align-items:center;text-align:center}.modal-text-content--horizontal{flex:1;min-width:1px;min-height:1px}.modal-title{margin:0;font-family:var(--font-family-body, 'Inter', sans-serif);font-weight:var(--weight-semibold, 600);font-size:var(--text-lg-size, 18px);line-height:var(--text-lg-line-height, 28px);letter-spacing:var(--letter-spacing-normal, 0px);color:var(--color-text-primary, #111322);width:100%}.modal-description{margin:0;font-family:var(--font-family-body, 'Inter', sans-serif);font-weight:var(--weight-regular, 400);font-size:var(--text-sm-size, 14px);line-height:var(--text-sm-line-height, 20px);letter-spacing:var(--letter-spacing-normal, 0px);color:var(--color-text-tertiary, #4a5578);width:100%}.close-button{position:absolute;top:var(--spacing-lg, 12px);right:var(--spacing-lg, 12px)}.padding-bottom{height:20px;width:100%;flex-shrink:0}.divider{height:1px;width:100%;flex-shrink:0;background-color:var(--color-border-secondary, #dcdfea)}";
+
+const BhModalHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhClose = index.createEvent(this, "bhClose");
+    }
+    /**
+     * Modal title (required)
+     */
+    modalTitle;
+    /**
+     * Modal description/supporting text
+     */
+    description;
+    /**
+     * Icon name for the featured icon (Material Symbols)
+     */
+    icon;
+    /**
+     * Color theme for the featured icon
+     */
+    iconColor = 'success';
+    /**
+     * Whether to show the featured icon
+     */
+    showIcon = true;
+    /**
+     * Whether to show the close button
+     */
+    showCloseButton = true;
+    /**
+     * Header alignment type
+     */
+    type = 'left-aligned';
+    /**
+     * Whether to show padding at the bottom
+     */
+    paddingBottom = true;
+    /**
+     * Whether to show the divider line
+     */
+    divider = false;
+    /**
+     * Emitted when the close button is clicked
+     */
+    bhClose;
+    handleClose = () => {
+        this.bhClose.emit();
+    };
+    render() {
+        const isHorizontal = this.type === 'horizontal-left-aligned';
+        const isCenter = this.type === 'center-aligned';
+        return (index.h(index.Host, { key: 'ecc564b2fdb20b724b57417e19c011298070acc3' }, index.h("div", { key: 'bc83df6dd5b206ecc9d9407021c0a82a6a3c0163', class: {
+                'modal-header': true,
+                'modal-header--center': isCenter,
+                'modal-header--horizontal': isHorizontal,
+            } }, index.h("div", { key: 'c6c4a092a205ec1838fc25bec1169e335cad5dad', class: {
+                'modal-header-content': true,
+                'modal-header-content--center': isCenter,
+                'modal-header-content--horizontal': isHorizontal,
+            } }, this.showIcon && this.icon && (index.h("bh-featured-icon", { key: '3c6bfc2f3038d841861f19816ba13ab3ff4d9830', icon: this.icon, color: this.iconColor, size: "md", iconStyle: "outlined" })), index.h("div", { key: '968463ccc835da635c4ffbea04c47764d38b0ce6', class: {
+                'modal-text-content': true,
+                'modal-text-content--center': isCenter,
+                'modal-text-content--horizontal': isHorizontal,
+            } }, index.h("h3", { key: '97b45faf3f93ed63d16eefcd84af7d973e1eeac1', class: "modal-title" }, this.modalTitle), this.description && (index.h("p", { key: 'd7a3cbdfef4b55d93faa424aa2fc88d4e242defd', class: "modal-description" }, this.description)))), this.showCloseButton && (index.h("bh-button-icon", { key: '03b325d8aaa2e977b1ee5b03ee6d6eea71bb9981', class: "close-button", hierarchy: "quaternary", size: "sm", iconName: "close", ariaLabel: "Close modal", onBhClick: this.handleClose }))), this.paddingBottom && index.h("div", { key: 'b06b66e5691dbaffcf703dac3cf520dda60e283c', class: "padding-bottom" }), this.divider && index.h("div", { key: 'dc852a2142f9fb9cd8895123845a206bdd75b1e6', class: "divider" })));
+    }
+};
+BhModalHeader.style = bhModalHeaderCss;
+
+exports.bh_modal_header = BhModalHeader;
+//# sourceMappingURL=bh-modal-header.entry.cjs.js.map

package/dist/cjs/bh-modal.cjs.entry.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.js');
+
+const bhModalCss = ":host{display:block}.modal-wrapper{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;padding:var(--spacing-4xl, 32px);z-index:1000}.modal-overlay{position:absolute;inset:0;background:var(--color-bg-overlay, rgba(64, 73, 104, 0.7));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.modal{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:400px;background:var(--color-bg-primary, #ffffff);border-radius:var(--radius-xl, 12px);box-shadow:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);overflow:hidden;z-index:1}@media (max-width: 480px){.modal-wrapper{padding:var(--spacing-xl, 16px)}.modal{max-width:100%}}@keyframes modalFadeIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}@keyframes overlayFadeIn{from{opacity:0}to{opacity:1}}.modal{animation:modalFadeIn 0.2s ease-out}.modal-overlay{animation:overlayFadeIn 0.2s ease-out}";
+
+const MODAL_WIDTHS = {
+    sm: '400px',
+    md: '480px',
+    lg: '520px',
+    xl: '640px',
+    xxl: '688px',
+};
+const BhModal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhClose = index.createEvent(this, "bhClose");
+    }
+    /**
+     * Whether the modal is visible
+     */
+    visible = false;
+    /**
+     * Whether to show the backdrop overlay
+     */
+    overlay = true;
+    /**
+     * Preset width of the modal: sm (400px), md (480px), lg (520px), xl (640px), xxl (688px)
+     */
+    width = 'sm';
+    /**
+     * Emitted when the modal is closed (overlay click or close button)
+     */
+    bhClose;
+    handleClose = () => {
+        this.bhClose.emit();
+    };
+    handleOverlayClick = (event) => {
+        if (event.target === event.currentTarget) {
+            this.handleClose();
+        }
+    };
+    render() {
+        if (!this.visible)
+            return null;
+        const modalClasses = {
+            'modal-wrapper': true,
+            'modal-with-overlay': this.overlay,
+        };
+        return (index.h(index.Host, null, index.h("div", { class: modalClasses, onClick: this.handleOverlayClick }, this.overlay && index.h("div", { class: "modal-overlay" }), index.h("div", { class: "modal", style: { maxWidth: MODAL_WIDTHS[this.width] } }, index.h("slot", { name: "header" }), index.h("slot", null), index.h("slot", { name: "actions" })))));
+    }
+};
+BhModal.style = bhModalCss;
+
+exports.bh_modal = BhModal;
+//# sourceMappingURL=bh-modal.entry.cjs.js.map

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

@@ -0,0 +1,189 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.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 BhMonthPickerContent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhChange = index.createEvent(this, "bhChange");
+        this.bhMonthYearSelect = index.createEvent(this, "bhMonthYearSelect");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Minimum year in the picker
+     */
+    minYear = 1998;
+    /**
+     * Maximum year in the picker
+     */
+    maxYear = 2060;
+    /**
+     * Whether the picker is disabled
+     */
+    disabled = false;
+    /**
+     * Array of disabled months
+     */
+    disabledMonths = [];
+    /**
+     * Whether the content is scrollable
+     */
+    scrollable = true;
+    /**
+     * Currently selected month (0-11)
+     */
+    selectedMonth;
+    /**
+     * Currently selected year
+     */
+    selectedYear;
+    /**
+     * Height of the content area
+     */
+    height = '375px';
+    /**
+     * Value object with month and year
+     */
+    value;
+    internalSelectedMonth = null;
+    internalSelectedYear = null;
+    isUsingKeyboard = false;
+    /**
+     * Event emitted when a month is selected
+     */
+    bhChange;
+    /**
+     * Event emitted when a month/year is selected
+     */
+    bhMonthYearSelect;
+    months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    currentDate = new Date();
+    currentMonth = this.currentDate.getMonth();
+    currentYear = this.currentDate.getFullYear();
+    handleValueChange(newValue) {
+        if (newValue) {
+            this.internalSelectedMonth = newValue.month;
+            this.internalSelectedYear = newValue.year;
+        }
+    }
+    handleSelectedMonthChange(newValue) {
+        if (newValue !== undefined) {
+            this.internalSelectedMonth = newValue;
+        }
+    }
+    handleSelectedYearChange(newValue) {
+        if (newValue !== undefined) {
+            this.internalSelectedYear = newValue;
+        }
+    }
+    componentWillLoad() {
+        // Initialize with props or current date
+        if (this.value) {
+            this.internalSelectedMonth = this.value.month;
+            this.internalSelectedYear = this.value.year;
+        }
+        else if (this.selectedMonth !== undefined || this.selectedYear !== undefined) {
+            this.internalSelectedMonth = this.selectedMonth ?? this.currentMonth;
+            this.internalSelectedYear = this.selectedYear ?? this.currentYear;
+        }
+        else {
+            // Initialize with current date if within range
+            if (this.currentYear >= this.minYear && this.currentYear <= this.maxYear) {
+                this.internalSelectedMonth = this.currentMonth;
+                this.internalSelectedYear = this.currentYear;
+            }
+            else {
+                this.internalSelectedMonth = this.currentMonth;
+                this.internalSelectedYear = this.currentYear < this.minYear ? this.minYear : this.maxYear;
+            }
+        }
+    }
+    componentDidLoad() {
+        if (this.scrollable) {
+            setTimeout(() => this.scrollToSelectedYear(), 0);
+        }
+    }
+    scrollToSelectedYear() {
+        if (this.internalSelectedYear === null)
+            return;
+        const container = this.el.shadowRoot?.querySelector('.month-picker-content');
+        const yearElement = this.el.shadowRoot?.querySelector(`#year-${this.internalSelectedYear}`);
+        if (!container || !yearElement)
+            return;
+        const containerHeight = container.clientHeight;
+        const yearElementTop = yearElement.offsetTop;
+        const yearElementHeight = yearElement.offsetHeight;
+        const isFirstYear = this.internalSelectedYear === this.minYear;
+        const isLastYear = this.internalSelectedYear === this.maxYear;
+        if (!isFirstYear && !isLastYear) {
+            const scrollOffset = 50;
+            const scrollTop = yearElementTop - containerHeight / 2 + yearElementHeight / 2 + scrollOffset;
+            container.scrollTop = Math.max(0, scrollTop);
+        }
+        else if (isFirstYear) {
+            container.scrollTop = 0;
+        }
+        else {
+            container.scrollTop = container.scrollHeight;
+        }
+    }
+    getYears() {
+        return Array.from({ length: this.maxYear - this.minYear + 1 }, (_, i) => this.minYear + i);
+    }
+    isCurrentMonth(monthIndex, year) {
+        return this.currentMonth === monthIndex && this.currentYear === year;
+    }
+    isMonthSelectable(monthIndex, year) {
+        if (year < this.minYear || year > this.maxYear) {
+            return false;
+        }
+        return !this.disabledMonths.some(disabled => disabled.month === monthIndex && disabled.year === year);
+    }
+    selectMonth(monthIndex, year) {
+        if (this.disabled || !this.isMonthSelectable(monthIndex, year)) {
+            return;
+        }
+        this.internalSelectedMonth = monthIndex;
+        this.internalSelectedYear = year;
+        const selection = { month: monthIndex, year };
+        this.bhChange.emit(selection);
+        this.bhMonthYearSelect.emit(selection);
+    }
+    handleKeyDown = () => {
+        this.isUsingKeyboard = true;
+    };
+    handleMouseDown = () => {
+        this.isUsingKeyboard = false;
+    };
+    getMonthButtonClasses(monthIndex, year) {
+        const classes = ['month-button'];
+        if (!this.isMonthSelectable(monthIndex, year)) {
+            classes.push('inactive');
+        }
+        if (this.internalSelectedMonth === monthIndex && this.internalSelectedYear === year) {
+            classes.push('selected');
+        }
+        if (this.isCurrentMonth(monthIndex, year)) {
+            classes.push('today');
+        }
+        return classes.join(' ');
+    }
+    render() {
+        const years = this.getYears();
+        return (index.h(index.Host, { key: '7b5bd2302804839e5362752f0e1a54dd2698c1b7' }, index.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 }, index.h("div", { key: '3754d5452f0d4952e61f6bb0968c712f725466b1', class: "calendar" }, years.map((year, yearIndex) => (index.h("div", { key: year, class: "year-section", id: `year-${year}` }, index.h("div", { class: "year-month-container" }, index.h("div", { class: "year-label" }, year), index.h("div", { class: "months-row" }, index.h("div", { class: "month-row" }, this.months.slice(0, 6).map((_, monthIndex) => (index.h("button", { key: monthIndex, class: this.getMonthButtonClasses(monthIndex, year), disabled: !this.isMonthSelectable(monthIndex, year), onClick: () => this.selectMonth(monthIndex, year) }, this.months[monthIndex])))), index.h("div", { class: "month-row" }, this.months.slice(6, 12).map((_, idx) => {
+            const monthIndex = idx + 6;
+            return (index.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 && (index.h("div", { class: "section-divider" }, index.h("div", { class: "divider-container" }, index.h("div", { class: "divider-line" })))))))))));
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"],
+        "selectedMonth": ["handleSelectedMonthChange"],
+        "selectedYear": ["handleSelectedYearChange"]
+    }; }
+};
+BhMonthPickerContent.style = bhMonthPickerContentCss;
+
+exports.bh_month_picker_content = BhMonthPickerContent;
+//# sourceMappingURL=bh-month-picker-content.entry.cjs.js.map

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

@@ -0,0 +1,152 @@
+'use strict';
+
+var index = require('./index-BVJ_Kket.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 BhMonthPicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhChange = index.createEvent(this, "bhChange");
+        this.bhMonthYearSelect = index.createEvent(this, "bhMonthYearSelect");
+    }
+    /**
+     * Variant of the month picker trigger
+     */
+    variant = 'dropdown-outlined';
+    /**
+     * Minimum year in the picker
+     */
+    minYear = 1998;
+    /**
+     * Maximum year in the picker
+     */
+    maxYear = 2060;
+    /**
+     * Whether the picker is disabled
+     */
+    disabled = false;
+    /**
+     * Array of disabled months
+     */
+    disabledMonths = [];
+    /**
+     * Label for input variant
+     */
+    label = 'Select Month';
+    /**
+     * Placeholder text
+     */
+    placeholder = 'Choose month and year';
+    /**
+     * Width for input variant
+     */
+    inputWidth = '200px';
+    /**
+     * Whether to show the label
+     */
+    showLabel = true;
+    /**
+     * Whether to show the footer
+     */
+    showFooter = true;
+    /**
+     * Currently selected value
+     */
+    value;
+    selectedValue = null;
+    tempSelection = null;
+    isMenuOpen = false;
+    isMenuClosing = false;
+    /**
+     * Event emitted when value changes
+     */
+    bhChange;
+    /**
+     * Event emitted when a month/year is selected
+     */
+    bhMonthYearSelect;
+    handleValueChange(newValue) {
+        if (newValue !== undefined) {
+            this.selectedValue = newValue;
+        }
+    }
+    componentWillLoad() {
+        if (this.value) {
+            this.selectedValue = this.value;
+        }
+    }
+    getDisplayValue() {
+        if (!this.selectedValue)
+            return '';
+        // US convention: MM/YYYY (01/2025)
+        const month = (this.selectedValue.month + 1).toString().padStart(2, '0');
+        return `${month}/${this.selectedValue.year}`;
+    }
+    getButtonLabel() {
+        return this.getDisplayValue() || this.placeholder;
+    }
+    handleTriggerClick = () => {
+        if (this.disabled)
+            return;
+        if (!this.isMenuOpen && this.showFooter) {
+            this.tempSelection = this.selectedValue;
+        }
+        this.isMenuOpen = !this.isMenuOpen;
+    };
+    handleInputFocus = () => {
+        if (this.disabled)
+            return;
+        if (!this.isMenuOpen && this.showFooter) {
+            this.tempSelection = this.selectedValue;
+        }
+        this.isMenuOpen = true;
+    };
+    handleMonthYearSelect = (event) => {
+        const monthYear = event.detail;
+        if (!monthYear)
+            return;
+        if (this.showFooter) {
+            this.tempSelection = monthYear;
+        }
+        else {
+            this.selectedValue = monthYear;
+            this.bhChange.emit(monthYear);
+            this.bhMonthYearSelect.emit(monthYear);
+            this.closeMenu();
+        }
+    };
+    handleMenuCancel = () => {
+        this.tempSelection = null;
+        this.closeMenu();
+    };
+    handleMenuApply = () => {
+        if (this.tempSelection) {
+            this.selectedValue = this.tempSelection;
+            this.bhChange.emit(this.tempSelection);
+            this.bhMonthYearSelect.emit(this.tempSelection);
+            this.tempSelection = null;
+        }
+        this.closeMenu();
+    };
+    closeMenu() {
+        this.isMenuClosing = true;
+        setTimeout(() => {
+            this.isMenuOpen = false;
+            this.isMenuClosing = false;
+        }, 150);
+    }
+    handleBackdropClick = () => {
+        this.handleMenuCancel();
+    };
+    render() {
+        return (index.h(index.Host, { key: '0589ee8d12120966f1e16614bb4240af8cc704ef' }, index.h("div", { key: '7183af3b3f2ca24a6b9429123b69d642babf5017', class: "month-picker-container" }, this.variant === 'dropdown-outlined' && (index.h("div", { key: '6d8ff65f93cadf2f9310ead4aad911e6a17aa6e3', class: "month-picker-trigger", onClick: this.handleTriggerClick }, index.h("bh-button", { key: '9b12957ab1c7aee12ca02c283e207a55d555c40d', hierarchy: "secondary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'dropdown-ghost' && (index.h("div", { key: '507ef5131209567f9bc715b6a33e6af962408186', class: "month-picker-trigger", onClick: this.handleTriggerClick }, index.h("bh-button", { key: '02d266b0a9df4acbe87beaf67bfe162fbcf9da62', hierarchy: "tertiary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'input' && (index.h("div", { key: 'd7d103e871c3324809abc25d60ba4e7bc64342b5', class: "month-picker-trigger input-field-container" }, index.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 }), index.h("div", { key: 'f0808d5ea14a9d6f75bf2656b06878c61196a36a', class: "calendar-icon-overlay", onClick: this.handleTriggerClick }))), index.h("div", { key: '53973ee2b582a3aa31cc1dad51028dfa69098f27', class: "month-picker-menu-container" }, index.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) && (index.h("div", { key: 'd142281cbda719b7df39015eab43da3d118ceeed', class: "month-picker-backdrop", onClick: this.handleBackdropClick }))));
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+BhMonthPicker.style = bhMonthPickerCss;
+
+exports.bh_month_picker = BhMonthPicker;
+//# sourceMappingURL=bh-month-picker.entry.cjs.js.map