@actabldesign/bellhop-core 0.0.3

package/components/bh-logo-box.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BhLogoBox extends Components.BhLogoBox, HTMLElement {}
+export const BhLogoBox: {
+    prototype: BhLogoBox;
+    new (): BhLogoBox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bh-logo-box.js

@@ -0,0 +1,9 @@
+import { B as BhLogoBox$1, d as defineCustomElement$1 } from './p-DfXkVfrE.js';
+
+const BhLogoBox = BhLogoBox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhLogoBox, defineCustomElement };
+//# sourceMappingURL=bh-logo-box.js.map
+
+//# sourceMappingURL=bh-logo-box.js.map

package/components/bh-logo-box.js.map

@@ -0,0 +1 @@
+{"file":"bh-logo-box.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/bh-modal-actions.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BhModalActions extends Components.BhModalActions, HTMLElement {}
+export const BhModalActions: {
+    prototype: BhModalActions;
+    new (): BhModalActions;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bh-modal-actions.js

@@ -0,0 +1,105 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-9a7sQzad.js';
+import { d as defineCustomElement$3 } from './p-DTgHvmlL.js';
+import { d as defineCustomElement$2 } from './p-Bbo_Dwmk.js';
+
+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$1 = /*@__PURE__*/ proxyCustomElement(class BhModalActions extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhPrimaryAction = createEvent(this, "bhPrimaryAction");
+        this.bhSecondaryAction = 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 ? (h("button", { class: "btn-destructive", onClick: this.handlePrimaryAction, type: "button" }, this.primaryLabel)) : (h("bh-button", { hierarchy: "primary", icon: "none", size: "md", label: this.primaryLabel, onBhClick: this.handlePrimaryAction }));
+        const secondaryButton = (h("bh-button", { hierarchy: "secondary", icon: "none", size: "md", label: this.secondaryLabel, onBhClick: this.handleSecondaryAction }));
+        if (isRightAligned) {
+            return (h("div", { class: "modal-actions-content modal-actions-content--right" }, h("div", { class: "actions-left" }, h("slot", { name: "left-content" })), h("div", { class: "actions-right" }, secondaryButton, primaryButton)));
+        }
+        // Full width buttons (stacks vertically on mobile via CSS)
+        return (h("div", { class: "modal-actions-content modal-actions-content--fill" }, secondaryButton, primaryButton));
+    }
+    render() {
+        return (h(Host, { key: '2855fec7b47705090d0524674df5a02ea31b8f97' }, h("div", { key: '08c35a3b9237857e27a070b609074c97d4b9fb36', class: "modal-actions" }, this.divider && h("div", { key: 'c392d58bfa6b31c58e704dedb01e9b331a14f567', class: "divider" }), this.renderButtons())));
+    }
+    static get style() { return bhModalActionsCss; }
+}, [769, "bh-modal-actions", {
+        "type": [1],
+        "destructive": [4],
+        "primaryLabel": [1, "primary-label"],
+        "secondaryLabel": [1, "secondary-label"],
+        "divider": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-modal-actions", "bh-button", "bh-loader-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-modal-actions":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhModalActions$1);
+            }
+            break;
+        case "bh-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-loader-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BhModalActions = BhModalActions$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhModalActions, defineCustomElement };
+//# sourceMappingURL=bh-modal-actions.js.map
+
+//# sourceMappingURL=bh-modal-actions.js.map

package/components/bh-modal-actions.js.map

@@ -0,0 +1 @@
+{"file":"bh-modal-actions.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,slEAAslE;;MCSnmEA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;;;;;;;;;;AACzB;;;;AAIG;IACK,IAAI,GAAqB,MAAM;AAEvC;;AAEG;IACK,WAAW,GAAY,KAAK;AAEpC;;AAEG;IACK,YAAY,GAAW,SAAS;AAExC;;AAEG;IACK,cAAc,GAAW,QAAQ;AAEzC;;AAEG;IACK,OAAO,GAAY,KAAK;AAEhC;;AAEG;AACM,IAAA,eAAe;AAExB;;AAEG;AACM,IAAA,iBAAiB;IAElB,mBAAmB,GAAG,MAAW;AACvC,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;AAC7B,KAAC;IAEO,qBAAqB,GAAG,MAAW;AACzC,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE;AAC/B,KAAC;IAEO,aAAa,GAAA;AACnB,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,KAAK,eAAe;AAEpD,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,IACpC,CACE,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,IAAI,EAAC,QAAQ,EAEZ,EAAA,IAAI,CAAC,YAAY,CACX,KAET,CACE,CAAA,WAAA,EAAA,EAAA,SAAS,EAAC,SAAS,EACnB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,SAAS,EAAE,IAAI,CAAC,mBAAmB,EACnC,CAAA,CACH;AAED,QAAA,MAAM,eAAe,IACnB,CAAA,CAAA,WAAA,EAAA,EACE,SAAS,EAAC,WAAW,EACrB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,cAAc,EAC1B,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAA,CACrC,CACH;QAED,IAAI,cAAc,EAAE;YAClB,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,oDAAoD,EAAA,EAC7D,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,cAAc,EAAA,CAAG,CACxB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACvB,eAAe,EACf,aAAa,CACV,CACF;;;AAKV,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,mDAAmD,EAAA,EAC3D,eAAe,EACf,aAAa,CACV;;IAIV,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACvB,IAAI,CAAC,OAAO,IAAI,4DAAK,KAAK,EAAC,SAAS,EAAG,CAAA,EACvC,IAAI,CAAC,aAAa,EAAE,CACjB,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BhModalActions","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-modal-actions/bh-modal-actions.css?tag=bh-modal-actions&encapsulation=shadow","src/components/bh-modal-actions/bh-modal-actions.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.modal-actions {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--spacing-none, 0px);\n  padding-top: var(--spacing-3xl, 24px);\n  width: 100%;\n}\n\n.divider {\n  height: 1px;\n  width: 100%;\n  flex-shrink: 0;\n  background-color: var(--color-border-secondary, #dcdfea);\n  margin-bottom: var(--spacing-3xl, 24px);\n}\n\n.modal-actions-content {\n  display: flex;\n  gap: var(--spacing-lg, 12px);\n  padding: 0 var(--spacing-3xl, 24px);\n  padding-bottom: var(--spacing-3xl, 24px);\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* Full width buttons layout */\n.modal-actions-content--fill {\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.modal-actions-content--fill bh-button {\n  flex: 1;\n  display: block;\n  width: 100%;\n}\n\n.modal-actions-content--fill bh-button::part(button) {\n  width: 100%;\n}\n\n.modal-actions-content--fill .btn-destructive {\n  flex: 1;\n}\n\n/* Right-aligned layout with optional left content */\n.modal-actions-content--right {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.actions-left {\n  display: flex;\n  gap: var(--spacing-lg, 12px);\n  align-items: center;\n}\n\n.actions-right {\n  display: flex;\n  gap: var(--spacing-lg, 12px);\n  align-items: center;\n  justify-content: flex-end;\n}\n\n/* Mobile responsive: stack buttons vertically */\n@media (max-width: 480px) {\n  .modal-actions-content--fill {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .modal-actions-content--fill bh-button,\n  .modal-actions-content--fill .btn-destructive {\n    flex: none;\n    width: 100%;\n  }\n\n  /* Reverse order on mobile so primary is first */\n  .modal-actions-content--fill {\n    flex-direction: column-reverse;\n  }\n}\n\n/* Destructive button styles */\n.btn-destructive {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--button-content-gap, 4px);\n  height: 40px;\n  padding: 0 var(--button-padding-x, 12px);\n  background-color: var(--color-bg-error, #d6341f);\n  color: var(--color-fg-white, #ffffff);\n  border: none;\n  border-radius: var(--radius-md, 8px);\n  font-family: var(--font-family-body, 'Inter', sans-serif);\n  font-weight: var(--weight-semibold, 600);\n  font-size: var(--button-font-size, 14px);\n  line-height: var(--text-sm-line-height, 20px);\n  letter-spacing: var(--letter-spacing-normal, 0px);\n  cursor: pointer;\n  overflow: hidden;\n  transition: background-color 0.15s ease;\n}\n\n.btn-destructive:hover {\n  background-color: var(--color-bg-error-hover, #b82d1a);\n}\n\n.btn-destructive:focus-visible {\n  outline: 2px solid var(--color-bg-error, #d6341f);\n  outline-offset: 2px;\n}\n\n.btn-destructive:active {\n  background-color: var(--color-bg-error-active, #9a2515);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type ModalActionsType = 'fill' | 'right-aligned';\n\n@Component({\n  tag: 'bh-modal-actions',\n  styleUrl: 'bh-modal-actions.css',\n  shadow: true,\n})\nexport class BhModalActions {\n  /**\n   * Layout type for the actions:\n   * - 'fill': Buttons take full width\n   * - 'right-aligned': Buttons aligned to the right with optional left content slot\n   */\n  @Prop() type: ModalActionsType = 'fill';\n\n  /**\n   * Whether to show destructive styling on primary button\n   */\n  @Prop() destructive: boolean = false;\n\n  /**\n   * Primary/destructive action button label\n   */\n  @Prop() primaryLabel: string = 'Confirm';\n\n  /**\n   * Secondary action button label\n   */\n  @Prop() secondaryLabel: string = 'Cancel';\n\n  /**\n   * Whether to show the divider line above actions\n   */\n  @Prop() divider: boolean = false;\n\n  /**\n   * Emitted when the primary/destructive action button is clicked\n   */\n  @Event() bhPrimaryAction!: EventEmitter<void>;\n\n  /**\n   * Emitted when the secondary action button is clicked\n   */\n  @Event() bhSecondaryAction!: EventEmitter<void>;\n\n  private handlePrimaryAction = (): void => {\n    this.bhPrimaryAction.emit();\n  };\n\n  private handleSecondaryAction = (): void => {\n    this.bhSecondaryAction.emit();\n  };\n\n  private renderButtons() {\n    const isRightAligned = this.type === 'right-aligned';\n\n    const primaryButton = this.destructive ? (\n      <button\n        class=\"btn-destructive\"\n        onClick={this.handlePrimaryAction}\n        type=\"button\"\n      >\n        {this.primaryLabel}\n      </button>\n    ) : (\n      <bh-button\n        hierarchy=\"primary\"\n        icon=\"none\"\n        size=\"md\"\n        label={this.primaryLabel}\n        onBhClick={this.handlePrimaryAction}\n      />\n    );\n\n    const secondaryButton = (\n      <bh-button\n        hierarchy=\"secondary\"\n        icon=\"none\"\n        size=\"md\"\n        label={this.secondaryLabel}\n        onBhClick={this.handleSecondaryAction}\n      />\n    );\n\n    if (isRightAligned) {\n      return (\n        <div class=\"modal-actions-content modal-actions-content--right\">\n          <div class=\"actions-left\">\n            <slot name=\"left-content\" />\n          </div>\n          <div class=\"actions-right\">\n            {secondaryButton}\n            {primaryButton}\n          </div>\n        </div>\n      );\n    }\n\n    // Full width buttons (stacks vertically on mobile via CSS)\n    return (\n      <div class=\"modal-actions-content modal-actions-content--fill\">\n        {secondaryButton}\n        {primaryButton}\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"modal-actions\">\n          {this.divider && <div class=\"divider\" />}\n          {this.renderButtons()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/bh-modal-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BhModalHeader extends Components.BhModalHeader, HTMLElement {}
+export const BhModalHeader: {
+    prototype: BhModalHeader;
+    new (): BhModalHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bh-modal-header.js

@@ -0,0 +1,119 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-9a7sQzad.js';
+import { d as defineCustomElement$3 } from './p-D3OkBDd3.js';
+import { d as defineCustomElement$2 } from './p-D6cM-mvE.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$1 = /*@__PURE__*/ proxyCustomElement(class BhModalHeader extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhClose = 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 (h(Host, { key: 'ad20e958392104052271804fed2db19722ac8282' }, h("div", { key: 'a713c21457f52b822525b8f57d8271f1819aa38d', class: {
+                'modal-header': true,
+                'modal-header--center': isCenter,
+                'modal-header--horizontal': isHorizontal,
+            } }, h("div", { key: '626e7a67264004b50a277f30a097ab4a41b33928', class: {
+                'modal-header-content': true,
+                'modal-header-content--center': isCenter,
+                'modal-header-content--horizontal': isHorizontal,
+            } }, this.showIcon && this.icon && (h("bh-featured-icon", { key: 'edc15a401b9d2bbce19c0dfcb63101468fdb23a6', icon: this.icon, color: this.iconColor, size: "md", iconStyle: "outlined" })), h("div", { key: 'bedf14040ad14da23897c5ac9133f86cda0d65fd', class: {
+                'modal-text-content': true,
+                'modal-text-content--center': isCenter,
+                'modal-text-content--horizontal': isHorizontal,
+            } }, h("h3", { key: 'f75cef1870847f358d1d6ceb66d6f3908b0f253a', class: "modal-title" }, this.modalTitle), this.description && (h("p", { key: '9e2f1c87c13c9b8f2f9900dce153d3b7a59ddbd9', class: "modal-description" }, this.description)))), this.showCloseButton && (h("bh-button-icon", { key: '5c986a9d8d14ae4248231cac4b286f57cf75b5d6', class: "close-button", hierarchy: "quaternary", size: "sm", iconName: "close", ariaLabel: "Close modal", onBhClick: this.handleClose }))), this.paddingBottom && h("div", { key: 'ca8eb070067de8ce6915f449ddfccbdfaa898720', class: "padding-bottom" }), this.divider && h("div", { key: '54ccd33d77239a9a28240c6ef6adfcad0dc10956', class: "divider" })));
+    }
+    static get style() { return bhModalHeaderCss; }
+}, [769, "bh-modal-header", {
+        "modalTitle": [1, "modal-title"],
+        "description": [1],
+        "icon": [1],
+        "iconColor": [1, "icon-color"],
+        "showIcon": [4, "show-icon"],
+        "showCloseButton": [4, "show-close-button"],
+        "type": [1],
+        "paddingBottom": [4, "padding-bottom"],
+        "divider": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-modal-header", "bh-button-icon", "bh-featured-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-modal-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhModalHeader$1);
+            }
+            break;
+        case "bh-button-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-featured-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BhModalHeader = BhModalHeader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhModalHeader, defineCustomElement };
+//# sourceMappingURL=bh-modal-header.js.map
+
+//# sourceMappingURL=bh-modal-header.js.map

package/components/bh-modal-header.js.map

@@ -0,0 +1 @@
+{"file":"bh-modal-header.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,kvDAAkvD;;MCO9vDA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;;;;AACxB;;AAEG;AACK,IAAA,UAAU;AAElB;;AAEG;AACK,IAAA,WAAW;AAEnB;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;IACK,SAAS,GAMC,SAAS;AAE3B;;AAEG;IACK,QAAQ,GAAY,IAAI;AAEhC;;AAEG;IACK,eAAe,GAAY,IAAI;AAEvC;;AAEG;IACK,IAAI,GACV,cAAc;AAEhB;;AAEG;IACK,aAAa,GAAY,IAAI;AAErC;;AAEG;IACK,OAAO,GAAY,KAAK;AAEhC;;AAEG;AACM,IAAA,OAAO;IAER,WAAW,GAAG,MAAW;AAC/B,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,KAAK,yBAAyB;AAC5D,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,gBAAgB;QAE/C,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,sBAAsB,EAAE,QAAQ;AAChC,gBAAA,0BAA0B,EAAE,YAAY;aACzC,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,sBAAsB,EAAE,IAAI;AAC5B,gBAAA,8BAA8B,EAAE,QAAQ;AACxC,gBAAA,kCAAkC,EAAE,YAAY;aACjD,EAAA,EAEA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KACzB,CACE,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,UAAU,GACpB,CACH,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,oBAAoB,EAAE,IAAI;AAC1B,gBAAA,4BAA4B,EAAE,QAAQ;AACtC,gBAAA,gCAAgC,EAAE,YAAY;AAC/C,aAAA,EAAA,EAED,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,UAAU,CAAM,EAC7C,IAAI,CAAC,WAAW,KACf,0DAAG,KAAK,EAAC,mBAAmB,EAAA,EAAE,IAAI,CAAC,WAAW,CAAK,CACpD,CACG,CACF,EAEL,IAAI,CAAC,eAAe,KACnB,uEACE,KAAK,EAAC,cAAc,EACpB,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAC,aAAa,EACvB,SAAS,EAAE,IAAI,CAAC,WAAW,EAAA,CAC3B,CACH,CACG,EAEL,IAAI,CAAC,aAAa,IAAI,4DAAK,KAAK,EAAC,gBAAgB,EAAG,CAAA,EAEpD,IAAI,CAAC,OAAO,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,CAAG,CACnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BhModalHeader","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-modal-header/bh-modal-header.css?tag=bh-modal-header&encapsulation=shadow","src/components/bh-modal-header/bh-modal-header.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--spacing-none, 0px);\n  width: 100%;\n}\n\n.modal-header {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--spacing-none, 0px);\n  width: 100%;\n  position: relative;\n}\n\n.modal-header--center {\n  align-items: center;\n}\n\n.modal-header--horizontal {\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n.modal-header-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--spacing-xl, 16px);\n  padding: var(--spacing-3xl, 24px);\n  padding-bottom: var(--spacing-none, 0px);\n  width: 100%;\n}\n\n.modal-header-content--center {\n  align-items: center;\n}\n\n.modal-header-content--horizontal {\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n.modal-text-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--spacing-xs, 4px);\n  width: 100%;\n  flex: 1;\n  min-width: 0;\n}\n\n.modal-text-content--center {\n  align-items: center;\n  text-align: center;\n}\n\n.modal-text-content--horizontal {\n  flex: 1;\n  min-width: 1px;\n  min-height: 1px;\n}\n\n.modal-title {\n  margin: 0;\n  font-family: var(--font-family-body, 'Inter', sans-serif);\n  font-weight: var(--weight-semibold, 600);\n  font-size: var(--text-lg-size, 18px);\n  line-height: var(--text-lg-line-height, 28px);\n  letter-spacing: var(--letter-spacing-normal, 0px);\n  color: var(--color-text-primary, #111322);\n  width: 100%;\n}\n\n.modal-description {\n  margin: 0;\n  font-family: var(--font-family-body, 'Inter', sans-serif);\n  font-weight: var(--weight-regular, 400);\n  font-size: var(--text-sm-size, 14px);\n  line-height: var(--text-sm-line-height, 20px);\n  letter-spacing: var(--letter-spacing-normal, 0px);\n  color: var(--color-text-tertiary, #4a5578);\n  width: 100%;\n}\n\n.close-button {\n  position: absolute;\n  top: var(--spacing-lg, 12px);\n  right: var(--spacing-lg, 12px);\n}\n\n.padding-bottom {\n  height: 20px;\n  width: 100%;\n  flex-shrink: 0;\n}\n\n.divider {\n  height: 1px;\n  width: 100%;\n  flex-shrink: 0;\n  background-color: var(--color-border-secondary, #dcdfea);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'bh-modal-header',\n  styleUrl: 'bh-modal-header.css',\n  shadow: true,\n})\nexport class BhModalHeader {\n  /**\n   * Modal title (required)\n   */\n  @Prop() modalTitle!: string;\n\n  /**\n   * Modal description/supporting text\n   */\n  @Prop() description?: string;\n\n  /**\n   * Icon name for the featured icon (Material Symbols)\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Color theme for the featured icon\n   */\n  @Prop() iconColor:\n    | 'brand'\n    | 'gray'\n    | 'error'\n    | 'warning'\n    | 'success'\n    | 'highlight' = 'success';\n\n  /**\n   * Whether to show the featured icon\n   */\n  @Prop() showIcon: boolean = true;\n\n  /**\n   * Whether to show the close button\n   */\n  @Prop() showCloseButton: boolean = true;\n\n  /**\n   * Header alignment type\n   */\n  @Prop() type: 'left-aligned' | 'center-aligned' | 'horizontal-left-aligned' =\n    'left-aligned';\n\n  /**\n   * Whether to show padding at the bottom\n   */\n  @Prop() paddingBottom: boolean = true;\n\n  /**\n   * Whether to show the divider line\n   */\n  @Prop() divider: boolean = false;\n\n  /**\n   * Emitted when the close button is clicked\n   */\n  @Event() bhClose!: EventEmitter<void>;\n\n  private handleClose = (): void => {\n    this.bhClose.emit();\n  };\n\n  render() {\n    const isHorizontal = this.type === 'horizontal-left-aligned';\n    const isCenter = this.type === 'center-aligned';\n\n    return (\n      <Host>\n        <div\n          class={{\n            'modal-header': true,\n            'modal-header--center': isCenter,\n            'modal-header--horizontal': isHorizontal,\n          }}\n        >\n          <div\n            class={{\n              'modal-header-content': true,\n              'modal-header-content--center': isCenter,\n              'modal-header-content--horizontal': isHorizontal,\n            }}\n          >\n            {this.showIcon && this.icon && (\n              <bh-featured-icon\n                icon={this.icon}\n                color={this.iconColor}\n                size=\"md\"\n                iconStyle=\"outlined\"\n              />\n            )}\n\n            <div\n              class={{\n                'modal-text-content': true,\n                'modal-text-content--center': isCenter,\n                'modal-text-content--horizontal': isHorizontal,\n              }}\n            >\n              <h3 class=\"modal-title\">{this.modalTitle}</h3>\n              {this.description && (\n                <p class=\"modal-description\">{this.description}</p>\n              )}\n            </div>\n          </div>\n\n          {this.showCloseButton && (\n            <bh-button-icon\n              class=\"close-button\"\n              hierarchy=\"quaternary\"\n              size=\"sm\"\n              iconName=\"close\"\n              ariaLabel=\"Close modal\"\n              onBhClick={this.handleClose}\n            />\n          )}\n        </div>\n\n        {this.paddingBottom && <div class=\"padding-bottom\" />}\n\n        {this.divider && <div class=\"divider\" />}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/bh-modal.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BhModal extends Components.BhModal, HTMLElement {}
+export const BhModal: {
+    prototype: BhModal;
+    new (): BhModal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bh-modal.js

@@ -0,0 +1,9 @@
+import { B as BhModal$1, d as defineCustomElement$1 } from './p-DRGkYX1u.js';
+
+const BhModal = BhModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhModal, defineCustomElement };
+//# sourceMappingURL=bh-modal.js.map
+
+//# sourceMappingURL=bh-modal.js.map

package/components/bh-modal.js.map

@@ -0,0 +1 @@
+{"file":"bh-modal.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/bh-month-picker-content.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BhMonthPickerContent extends Components.BhMonthPickerContent, HTMLElement {}
+export const BhMonthPickerContent: {
+    prototype: BhMonthPickerContent;
+    new (): BhMonthPickerContent;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bh-month-picker-content.js

@@ -0,0 +1,9 @@
+import { B as BhMonthPickerContent$1, d as defineCustomElement$1 } from './p-CDgBIIbC.js';
+
+const BhMonthPickerContent = BhMonthPickerContent$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhMonthPickerContent, defineCustomElement };
+//# sourceMappingURL=bh-month-picker-content.js.map
+
+//# sourceMappingURL=bh-month-picker-content.js.map

package/components/bh-month-picker-content.js.map

@@ -0,0 +1 @@
+{"file":"bh-month-picker-content.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/bh-month-picker.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BhMonthPicker extends Components.BhMonthPicker, HTMLElement {}
+export const BhMonthPicker: {
+    prototype: BhMonthPicker;
+    new (): BhMonthPicker;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bh-month-picker.js

@@ -0,0 +1,233 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-9a7sQzad.js';
+import { d as defineCustomElement$8 } from './p-DTgHvmlL.js';
+import { d as defineCustomElement$7 } from './p-Dbl0HXBJ.js';
+import { d as defineCustomElement$6 } from './p-MIbEYjCv.js';
+import { d as defineCustomElement$5 } from './p-Bbo_Dwmk.js';
+import { d as defineCustomElement$4 } from './p-CDgBIIbC.js';
+import { d as defineCustomElement$3 } from './p-DHSWIF-h.js';
+import { d as defineCustomElement$2 } from './p-D6kh9oF2.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$1 = /*@__PURE__*/ proxyCustomElement(class BhMonthPicker extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhChange = createEvent(this, "bhChange");
+        this.bhMonthYearSelect = 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 (h(Host, { key: '77c20fea8e71861d26593fcb3afd64f876e931d5' }, h("div", { key: 'ece0e373ba2cea3d047ee4477ac42b84f1bab9ef', class: "month-picker-container" }, this.variant === 'dropdown-outlined' && (h("div", { key: '132c98c10fce8bfa4039270311773b1f0d5926ed', class: "month-picker-trigger", onClick: this.handleTriggerClick }, h("bh-button", { key: 'd72bc5ff61db88e5cfdcb969e168f184e625f152', hierarchy: "secondary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'dropdown-ghost' && (h("div", { key: '985eec13541d0c8732ef79abe78caef7cb50b01f', class: "month-picker-trigger", onClick: this.handleTriggerClick }, h("bh-button", { key: '6b7542db3a2ee4c929598551355ab837d1cd11c4', hierarchy: "tertiary", size: "sm", icon: "trailing", label: this.getButtonLabel(), iconName: "expand_more", disabled: this.disabled }))), this.variant === 'input' && (h("div", { key: '2a1af2defcfef007180a574a6a6be7528a602c0e', class: "month-picker-trigger input-field-container" }, h("bh-input-text", { key: '1dd3b9000e3822f29523d955f7b68ea1d591c6ef', 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: 'de8c1be2dc221533ea2007565245074c0385c245', class: "calendar-icon-overlay", onClick: this.handleTriggerClick }))), h("div", { key: '8cf969bf9396944146d9b46fbe33e501b281c008', class: "month-picker-menu-container" }, h("bh-picker-menu", { key: '11f469f151d40a80f9f958ab149059605af15396', 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: '6ebc7ff0588eea979419d80883b5e5f83317fac7', class: "month-picker-backdrop", onClick: this.handleBackdropClick }))));
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+    static get style() { return bhMonthPickerCss; }
+}, [769, "bh-month-picker", {
+        "variant": [1],
+        "minYear": [2, "min-year"],
+        "maxYear": [2, "max-year"],
+        "disabled": [4],
+        "disabledMonths": [16],
+        "label": [1],
+        "placeholder": [1],
+        "inputWidth": [1, "input-width"],
+        "showLabel": [4, "show-label"],
+        "showFooter": [4, "show-footer"],
+        "value": [16],
+        "selectedValue": [32],
+        "tempSelection": [32],
+        "isMenuOpen": [32],
+        "isMenuClosing": [32]
+    }, undefined, {
+        "value": ["handleValueChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-month-picker", "bh-button", "bh-input-text", "bh-label", "bh-loader-spinner", "bh-month-picker-content", "bh-picker-menu", "bh-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-month-picker":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhMonthPicker$1);
+            }
+            break;
+        case "bh-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "bh-input-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "bh-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "bh-loader-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "bh-month-picker-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "bh-picker-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BhMonthPicker = BhMonthPicker$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhMonthPicker, defineCustomElement };
+//# sourceMappingURL=bh-month-picker.js.map
+
+//# sourceMappingURL=bh-month-picker.js.map