@actabldesign/bellhop-core 0.0.3

package/esm/bh-label_2.entry.js

@@ -0,0 +1,45 @@
+export { B as bh_label } from './bh-label-DqsVrCg_.js';
+import { r as registerInstance, h } from './index-DtVghh5W.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) {
+        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 (h("div", { key: '1306877d710884c4fee82aec1abb4ff8b8cddc9b', class: tooltipClasses, style: tooltipStyles, role: "tooltip", part: "tooltip" }, h("div", { key: 'e0163acbd31726d37b1c3fa249640a9f3af447ca', class: "tooltip-content" }, this.text)));
+    }
+};
+BhTooltip.style = bhTooltipCss;
+
+export { BhTooltip as bh_tooltip };
+//# sourceMappingURL=bh-label.bh-tooltip.entry.js.map

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

@@ -0,0 +1,64 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DtVghh5W.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) {
+        registerInstance(this, hostRef);
+        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())));
+    }
+};
+BhModalActions.style = bhModalActionsCss;
+
+export { BhModalActions as bh_modal_actions };
+//# sourceMappingURL=bh-modal-actions.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-modal-actions.entry.js","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"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,slEAAslE;;MCSnmE,cAAc,GAAA,MAAA;;;;;;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;;;;;;;"}

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

@@ -0,0 +1,74 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DtVghh5W.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) {
+        registerInstance(this, hostRef);
+        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" })));
+    }
+};
+BhModalHeader.style = bhModalHeaderCss;
+
+export { BhModalHeader as bh_modal_header };
+//# sourceMappingURL=bh-modal-header.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-modal-header.entry.js","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"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,kvDAAkvD;;MCO9vD,aAAa,GAAA,MAAA;;;;;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;;;;;;;"}

package/esm/bh-modal.entry.js

@@ -0,0 +1,54 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DtVghh5W.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) {
+        registerInstance(this, hostRef);
+        this.bhClose = createEvent(this, "bhClose");
+    }
+    /**
+     * Whether the modal is visible
+     */
+    visible = false;
+    /**
+     * Whether to show the backdrop overlay
+     */
+    overlay = true;
+    /**
+     * Preset width of the modal: sm (400px), md (480px), lg (520px), xl (640px), xxl (688px)
+     */
+    width = 'sm';
+    /**
+     * Emitted when the modal is closed (overlay click or close button)
+     */
+    bhClose;
+    handleClose = () => {
+        this.bhClose.emit();
+    };
+    handleOverlayClick = (event) => {
+        if (event.target === event.currentTarget) {
+            this.handleClose();
+        }
+    };
+    render() {
+        if (!this.visible)
+            return null;
+        const modalClasses = {
+            'modal-wrapper': true,
+            'modal-with-overlay': this.overlay,
+        };
+        return (h(Host, null, h("div", { class: modalClasses, onClick: this.handleOverlayClick }, this.overlay && h("div", { class: "modal-overlay" }), h("div", { class: "modal", style: { maxWidth: MODAL_WIDTHS[this.width] } }, h("slot", { name: "header" }), h("slot", null), h("slot", { name: "actions" })))));
+    }
+};
+BhModal.style = bhModalCss;
+
+export { BhModal as bh_modal };
+//# sourceMappingURL=bh-modal.entry.js.map

package/esm/bh-modal.entry.js.map

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

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

@@ -0,0 +1,187 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-DtVghh5W.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) {
+        registerInstance(this, hostRef);
+        this.bhChange = createEvent(this, "bhChange");
+        this.bhMonthYearSelect = createEvent(this, "bhMonthYearSelect");
+    }
+    get el() { return 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 (h(Host, { key: 'aa0bf635ddc8fffb3d21e705595e87ce4a60acea' }, h("div", { key: '0df1d3fed84f43c412e3c66becc237cdc5b8def0', class: `month-picker-content animate-slide-up-enter ${this.scrollable ? 'scrollable' : ''}`, style: { height: this.height }, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("div", { key: '9745606dcf1196dd106f982beacd24ee6f16edaf', class: "calendar" }, years.map((year, yearIndex) => (h("div", { key: year, class: "year-section", id: `year-${year}` }, h("div", { class: "year-month-container" }, h("div", { class: "year-label" }, year), h("div", { class: "months-row" }, h("div", { class: "month-row" }, this.months.slice(0, 6).map((_, monthIndex) => (h("button", { key: monthIndex, class: this.getMonthButtonClasses(monthIndex, year), disabled: !this.isMonthSelectable(monthIndex, year), onClick: () => this.selectMonth(monthIndex, year) }, this.months[monthIndex])))), h("div", { class: "month-row" }, this.months.slice(6, 12).map((_, idx) => {
+            const monthIndex = idx + 6;
+            return (h("button", { key: monthIndex, class: this.getMonthButtonClasses(monthIndex, year), disabled: !this.isMonthSelectable(monthIndex, year), onClick: () => this.selectMonth(monthIndex, year) }, this.months[monthIndex]));
+        })))), yearIndex < years.length - 1 && (h("div", { class: "section-divider" }, h("div", { class: "divider-container" }, h("div", { class: "divider-line" })))))))))));
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"],
+        "selectedMonth": ["handleSelectedMonthChange"],
+        "selectedYear": ["handleSelectedYearChange"]
+    }; }
+};
+BhMonthPickerContent.style = bhMonthPickerContentCss;
+
+export { BhMonthPickerContent as bh_month_picker_content };
+//# sourceMappingURL=bh-month-picker-content.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-month-picker-content.entry.js","sources":["src/components/bh-month-picker-content/bh-month-picker-content.css?tag=bh-month-picker-content&encapsulation=shadow","src/components/bh-month-picker-content/bh-month-picker-content.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n  display: block;\n}\n\n/* Content area - can be scrollable or not based on parent needs */\n.month-picker-content {\n  width: 100%;\n  overflow-x: hidden;\n  font-family: var(--font-inter);\n}\n\n/* Extend animation duration for smoother effect */\n.month-picker-content.animate-slide-up-enter {\n  animation-duration: var(--animation-duration-slow, 0.3s);\n}\n\n.month-picker-content.scrollable {\n  max-height: 340px;\n  overflow-y: auto;\n  overflow-y: overlay; /* Overlay scrollbar - doesn't take space from content */\n  position: relative;\n}\n\n/* Custom scrollbar styling - hidden by default, visible on hover */\n.month-picker-content.scrollable::-webkit-scrollbar {\n  width: var(--spacing-xs);\n}\n\n.month-picker-content.scrollable::-webkit-scrollbar-track {\n  background: transparent;\n  border-radius: var(--radius-xs);\n}\n\n.month-picker-content.scrollable::-webkit-scrollbar-thumb {\n  background: transparent;\n  border-radius: var(--radius-xs);\n  transition: background 0.2s ease;\n}\n\n/* Show scrollbar on hover */\n.month-picker-content.scrollable:hover::-webkit-scrollbar-track {\n  background: var(--color-neutral-50);\n}\n\n.month-picker-content.scrollable:hover::-webkit-scrollbar-thumb {\n  background: var(--color-neutral-200);\n}\n\n.month-picker-content.scrollable:hover::-webkit-scrollbar-thumb:hover {\n  background: var(--color-neutral-300);\n}\n\n/* Firefox scrollbar - hidden by default */\n.month-picker-content.scrollable {\n  scrollbar-width: thin;\n  scrollbar-color: transparent transparent;\n}\n\n/* Firefox - show scrollbar on hover */\n.month-picker-content.scrollable:hover {\n  scrollbar-color: var(--color-neutral-200) transparent;\n}\n\n/* Calendar container */\n.calendar {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: var(--spacing-lg) 0 var(--spacing-lg) var(--spacing-lg);\n}\n\n/* Year Section - Contains year button + months row */\n.year-section {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n.year-month-container {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  align-items: flex-start;\n}\n\n/* Year Label - positioned on left */\n.year-label {\n  width: auto;\n  height: auto;\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  font-family: var(--font-inter);\n  font-weight: var(--weight-bold);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-md-line);\n  color: var(--color-neutral-700);\n  flex-shrink: 0;\n  min-width: 50px;\n  padding: var(--spacing-md) 0;\n}\n\n/* Months Grid - 2 rows of 6 months each */\n.months-row {\n  display: flex;\n  flex-direction: column;\n  /* flex: 1;\n  width: 100%; */\n}\n\n/* Month Button - 40x40px circular */\n.month-button {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--radius-full);\n  border: 2px solid transparent;\n  background: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  font-size: var(--text-sm-size);\n  line-height: var(--leading-sm);\n  color: var(--color-neutral-500);\n  cursor: pointer;\n  transition: all var(--animation-duration-fast, 0.1s) var(--animation-easing-ease, ease);\n  flex-shrink: 0;\n  text-align: center;\n  overflow: hidden;\n}\n\n.month-row {\n  display: flex;\n  gap: var(--spacing-sm);\n  justify-content: flex-start;\n}\n\n.month-button:hover:not(.inactive):not(.selected):not(:disabled):not(.today) {\n  background: var(--color-neutral-50);\n  color: var(--color-neutral-800);\n}\n\n/* Selected state - blue background */\n.month-button.selected {\n  background: var(--color-brand-600);\n  color: var(--color-white);\n  font-weight: var(--weight-semibold);\n}\n\n/* Today's date state - blue border to match date picker */\n.month-button.today:not(.selected) {\n  border-color: var(--color-brand-600);\n}\n\n.month-button.today:not(.selected):hover {\n  background: var(--color-brand-100);\n  color: var(--color-brand-600);\n}\n\n/* Inactive/disabled state */\n.month-button.inactive,\n.month-button:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  color: var(--color-neutral-400);\n}\n\n.month-button:disabled:hover {\n  background: transparent;\n}\n\n/* Section Divider - Between year sections */\n.section-divider {\n  width: 100%;\n  margin: var(--spacing-xl) 0;\n}\n\n.divider-container {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n.divider-line {\n  width: 100%;\n  height: 1px;\n  background: var(--color-neutral-200);\n}\n\n/* Focus states for accessibility - completely disable outline */\n.month-button:focus {\n  outline: none;\n}\n\n/* Keyboard navigation state - will be added via JavaScript */\n.month-button.keyboard-focused {\n  outline: var(--border-width-md, 2px) solid var(--color-brand-500);\n  outline-offset: var(--spacing-xs);\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\n\nexport interface MonthYear {\n  month: number; // 0-11 (January = 0, December = 11)\n  year: number;\n}\n\nexport interface DisabledMonth {\n  month: number;\n  year: number;\n}\n\n@Component({\n  tag: 'bh-month-picker-content',\n  styleUrl: 'bh-month-picker-content.css',\n  shadow: true,\n})\nexport class BhMonthPickerContent {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Minimum year in the picker\n   */\n  @Prop() minYear: number = 1998;\n\n  /**\n   * Maximum year in the picker\n   */\n  @Prop() maxYear: number = 2060;\n\n  /**\n   * Whether the picker is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Array of disabled months\n   */\n  @Prop() disabledMonths: DisabledMonth[] = [];\n\n  /**\n   * Whether the content is scrollable\n   */\n  @Prop() scrollable: boolean = true;\n\n  /**\n   * Currently selected month (0-11)\n   */\n  @Prop() selectedMonth?: number;\n\n  /**\n   * Currently selected year\n   */\n  @Prop() selectedYear?: number;\n\n  /**\n   * Height of the content area\n   */\n  @Prop() height: string = '375px';\n\n  /**\n   * Value object with month and year\n   */\n  @Prop() value?: MonthYear;\n\n  @State() internalSelectedMonth: number | null = null;\n  @State() internalSelectedYear: number | null = null;\n  @State() isUsingKeyboard: boolean = false;\n\n  /**\n   * Event emitted when a month is selected\n   */\n  @Event() bhChange!: EventEmitter<MonthYear>;\n\n  /**\n   * Event emitted when a month/year is selected\n   */\n  @Event() bhMonthYearSelect!: EventEmitter<MonthYear>;\n\n  private months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n  private currentDate = new Date();\n  private currentMonth = this.currentDate.getMonth();\n  private currentYear = this.currentDate.getFullYear();\n\n  @Watch('value')\n  handleValueChange(newValue: MonthYear | undefined) {\n    if (newValue) {\n      this.internalSelectedMonth = newValue.month;\n      this.internalSelectedYear = newValue.year;\n    }\n  }\n\n  @Watch('selectedMonth')\n  handleSelectedMonthChange(newValue: number | undefined) {\n    if (newValue !== undefined) {\n      this.internalSelectedMonth = newValue;\n    }\n  }\n\n  @Watch('selectedYear')\n  handleSelectedYearChange(newValue: number | undefined) {\n    if (newValue !== undefined) {\n      this.internalSelectedYear = newValue;\n    }\n  }\n\n  componentWillLoad() {\n    // Initialize with props or current date\n    if (this.value) {\n      this.internalSelectedMonth = this.value.month;\n      this.internalSelectedYear = this.value.year;\n    } else if (this.selectedMonth !== undefined || this.selectedYear !== undefined) {\n      this.internalSelectedMonth = this.selectedMonth ?? this.currentMonth;\n      this.internalSelectedYear = this.selectedYear ?? this.currentYear;\n    } else {\n      // Initialize with current date if within range\n      if (this.currentYear >= this.minYear && this.currentYear <= this.maxYear) {\n        this.internalSelectedMonth = this.currentMonth;\n        this.internalSelectedYear = this.currentYear;\n      } else {\n        this.internalSelectedMonth = this.currentMonth;\n        this.internalSelectedYear = this.currentYear < this.minYear ? this.minYear : this.maxYear;\n      }\n    }\n  }\n\n  componentDidLoad() {\n    if (this.scrollable) {\n      setTimeout(() => this.scrollToSelectedYear(), 0);\n    }\n  }\n\n  private scrollToSelectedYear() {\n    if (this.internalSelectedYear === null) return;\n\n    const container = this.el.shadowRoot?.querySelector('.month-picker-content') as HTMLElement;\n    const yearElement = this.el.shadowRoot?.querySelector(`#year-${this.internalSelectedYear}`) as HTMLElement;\n\n    if (!container || !yearElement) return;\n\n    const containerHeight = container.clientHeight;\n    const yearElementTop = yearElement.offsetTop;\n    const yearElementHeight = yearElement.offsetHeight;\n\n    const isFirstYear = this.internalSelectedYear === this.minYear;\n    const isLastYear = this.internalSelectedYear === this.maxYear;\n\n    if (!isFirstYear && !isLastYear) {\n      const scrollOffset = 50;\n      const scrollTop = yearElementTop - containerHeight / 2 + yearElementHeight / 2 + scrollOffset;\n      container.scrollTop = Math.max(0, scrollTop);\n    } else if (isFirstYear) {\n      container.scrollTop = 0;\n    } else {\n      container.scrollTop = container.scrollHeight;\n    }\n  }\n\n  private getYears(): number[] {\n    return Array.from({ length: this.maxYear - this.minYear + 1 }, (_, i) => this.minYear + i);\n  }\n\n  private isCurrentMonth(monthIndex: number, year: number): boolean {\n    return this.currentMonth === monthIndex && this.currentYear === year;\n  }\n\n  private isMonthSelectable(monthIndex: number, year: number): boolean {\n    if (year < this.minYear || year > this.maxYear) {\n      return false;\n    }\n\n    return !this.disabledMonths.some(\n      disabled => disabled.month === monthIndex && disabled.year === year\n    );\n  }\n\n  private selectMonth(monthIndex: number, year: number) {\n    if (this.disabled || !this.isMonthSelectable(monthIndex, year)) {\n      return;\n    }\n\n    this.internalSelectedMonth = monthIndex;\n    this.internalSelectedYear = year;\n\n    const selection: MonthYear = { month: monthIndex, year };\n    this.bhChange.emit(selection);\n    this.bhMonthYearSelect.emit(selection);\n  }\n\n  private handleKeyDown = () => {\n    this.isUsingKeyboard = true;\n  };\n\n  private handleMouseDown = () => {\n    this.isUsingKeyboard = false;\n  };\n\n  private getMonthButtonClasses(monthIndex: number, year: number): string {\n    const classes = ['month-button'];\n\n    if (!this.isMonthSelectable(monthIndex, year)) {\n      classes.push('inactive');\n    }\n    if (this.internalSelectedMonth === monthIndex && this.internalSelectedYear === year) {\n      classes.push('selected');\n    }\n    if (this.isCurrentMonth(monthIndex, year)) {\n      classes.push('today');\n    }\n\n    return classes.join(' ');\n  }\n\n  render() {\n    const years = this.getYears();\n\n    return (\n      <Host>\n        <div\n          class={`month-picker-content animate-slide-up-enter ${this.scrollable ? 'scrollable' : ''}`}\n          style={{ height: this.height }}\n          onKeyDown={this.handleKeyDown}\n          onMouseDown={this.handleMouseDown}\n        >\n          <div class=\"calendar\">\n            {years.map((year, yearIndex) => (\n              <div key={year} class=\"year-section\" id={`year-${year}`}>\n                <div class=\"year-month-container\">\n                  <div class=\"year-label\">{year}</div>\n\n                  <div class=\"months-row\">\n                    {/* First row: Jan-Jun */}\n                    <div class=\"month-row\">\n                      {this.months.slice(0, 6).map((_, monthIndex) => (\n                        <button\n                          key={monthIndex}\n                          class={this.getMonthButtonClasses(monthIndex, year)}\n                          disabled={!this.isMonthSelectable(monthIndex, year)}\n                          onClick={() => this.selectMonth(monthIndex, year)}\n                        >\n                          {this.months[monthIndex]}\n                        </button>\n                      ))}\n                    </div>\n\n                    {/* Second row: Jul-Dec */}\n                    <div class=\"month-row\">\n                      {this.months.slice(6, 12).map((_, idx) => {\n                        const monthIndex = idx + 6;\n                        return (\n                          <button\n                            key={monthIndex}\n                            class={this.getMonthButtonClasses(monthIndex, year)}\n                            disabled={!this.isMonthSelectable(monthIndex, year)}\n                            onClick={() => this.selectMonth(monthIndex, year)}\n                          >\n                            {this.months[monthIndex]}\n                          </button>\n                        );\n                      })}\n                    </div>\n                  </div>\n                </div>\n\n                {/* Section Divider (not for last year) */}\n                {yearIndex < years.length - 1 && (\n                  <div class=\"section-divider\">\n                    <div class=\"divider-container\">\n                      <div class=\"divider-line\"></div>\n                    </div>\n                  </div>\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,uBAAuB,GAAG,2zPAA2zP;;MCiB90P,oBAAoB,GAAA,MAAA;;;;;;;AAG/B;;AAEG;IACK,OAAO,GAAW,IAAI;AAE9B;;AAEG;IACK,OAAO,GAAW,IAAI;AAE9B;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,cAAc,GAAoB,EAAE;AAE5C;;AAEG;IACK,UAAU,GAAY,IAAI;AAElC;;AAEG;AACK,IAAA,aAAa;AAErB;;AAEG;AACK,IAAA,YAAY;AAEpB;;AAEG;IACK,MAAM,GAAW,OAAO;AAEhC;;AAEG;AACK,IAAA,KAAK;IAEJ,qBAAqB,GAAkB,IAAI;IAC3C,oBAAoB,GAAkB,IAAI;IAC1C,eAAe,GAAY,KAAK;AAEzC;;AAEG;AACM,IAAA,QAAQ;AAEjB;;AAEG;AACM,IAAA,iBAAiB;IAElB,MAAM,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;AAC7F,IAAA,WAAW,GAAG,IAAI,IAAI,EAAE;AACxB,IAAA,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;AAC1C,IAAA,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE;AAGpD,IAAA,iBAAiB,CAAC,QAA+B,EAAA;QAC/C,IAAI,QAAQ,EAAE;AACZ,YAAA,IAAI,CAAC,qBAAqB,GAAG,QAAQ,CAAC,KAAK;AAC3C,YAAA,IAAI,CAAC,oBAAoB,GAAG,QAAQ,CAAC,IAAI;;;AAK7C,IAAA,yBAAyB,CAAC,QAA4B,EAAA;AACpD,QAAA,IAAI,QAAQ,KAAK,SAAS,EAAE;AAC1B,YAAA,IAAI,CAAC,qBAAqB,GAAG,QAAQ;;;AAKzC,IAAA,wBAAwB,CAAC,QAA4B,EAAA;AACnD,QAAA,IAAI,QAAQ,KAAK,SAAS,EAAE;AAC1B,YAAA,IAAI,CAAC,oBAAoB,GAAG,QAAQ;;;IAIxC,iBAAiB,GAAA;;AAEf,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK;YAC7C,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI;;AACtC,aAAA,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE;YAC9E,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,YAAY;YACpE,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,WAAW;;aAC5D;;AAEL,YAAA,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO,EAAE;AACxE,gBAAA,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,YAAY;AAC9C,gBAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,WAAW;;iBACvC;AACL,gBAAA,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,YAAY;gBAC9C,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO;;;;IAK/F,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,UAAU,CAAC,MAAM,IAAI,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;;;IAI5C,oBAAoB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,oBAAoB,KAAK,IAAI;YAAE;AAExC,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,uBAAuB,CAAgB;AAC3F,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,SAAS,IAAI,CAAC,oBAAoB,CAAA,CAAE,CAAgB;AAE1G,QAAA,IAAI,CAAC,SAAS,IAAI,CAAC,WAAW;YAAE;AAEhC,QAAA,MAAM,eAAe,GAAG,SAAS,CAAC,YAAY;AAC9C,QAAA,MAAM,cAAc,GAAG,WAAW,CAAC,SAAS;AAC5C,QAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,YAAY;QAElD,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,KAAK,IAAI,CAAC,OAAO;QAC9D,MAAM,UAAU,GAAG,IAAI,CAAC,oBAAoB,KAAK,IAAI,CAAC,OAAO;AAE7D,QAAA,IAAI,CAAC,WAAW,IAAI,CAAC,UAAU,EAAE;YAC/B,MAAM,YAAY,GAAG,EAAE;AACvB,YAAA,MAAM,SAAS,GAAG,cAAc,GAAG,eAAe,GAAG,CAAC,GAAG,iBAAiB,GAAG,CAAC,GAAG,YAAY;YAC7F,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC;;aACvC,IAAI,WAAW,EAAE;AACtB,YAAA,SAAS,CAAC,SAAS,GAAG,CAAC;;aAClB;AACL,YAAA,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,YAAY;;;IAIxC,QAAQ,GAAA;AACd,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;;IAGpF,cAAc,CAAC,UAAkB,EAAE,IAAY,EAAA;QACrD,OAAO,IAAI,CAAC,YAAY,KAAK,UAAU,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI;;IAG9D,iBAAiB,CAAC,UAAkB,EAAE,IAAY,EAAA;AACxD,QAAA,IAAI,IAAI,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE;AAC9C,YAAA,OAAO,KAAK;;QAGd,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAC9B,QAAQ,IAAI,QAAQ,CAAC,KAAK,KAAK,UAAU,IAAI,QAAQ,CAAC,IAAI,KAAK,IAAI,CACpE;;IAGK,WAAW,CAAC,UAAkB,EAAE,IAAY,EAAA;AAClD,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,IAAI,CAAC,EAAE;YAC9D;;AAGF,QAAA,IAAI,CAAC,qBAAqB,GAAG,UAAU;AACvC,QAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI;QAEhC,MAAM,SAAS,GAAc,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE;AACxD,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAC7B,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC;;IAGhC,aAAa,GAAG,MAAK;AAC3B,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI;AAC7B,KAAC;IAEO,eAAe,GAAG,MAAK;AAC7B,QAAA,IAAI,CAAC,eAAe,GAAG,KAAK;AAC9B,KAAC;IAEO,qBAAqB,CAAC,UAAkB,EAAE,IAAY,EAAA;AAC5D,QAAA,MAAM,OAAO,GAAG,CAAC,cAAc,CAAC;QAEhC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,IAAI,CAAC,EAAE;AAC7C,YAAA,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;;AAE1B,QAAA,IAAI,IAAI,CAAC,qBAAqB,KAAK,UAAU,IAAI,IAAI,CAAC,oBAAoB,KAAK,IAAI,EAAE;AACnF,YAAA,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;;QAE1B,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,IAAI,CAAC,EAAE;AACzC,YAAA,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;;AAGvB,QAAA,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;;IAG1B,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;AAE7B,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAA+C,4CAAA,EAAA,IAAI,CAAC,UAAU,GAAG,YAAY,GAAG,EAAE,CAAE,CAAA,EAC3F,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAC9B,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,WAAW,EAAE,IAAI,CAAC,eAAe,EAAA,EAEjC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EAClB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,MACzB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,IAAI,EAAE,KAAK,EAAC,cAAc,EAAC,EAAE,EAAE,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA,EAAA,EACrD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAO,EAEpC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EAErB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,WAAW,EACnB,EAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,UAAU,MACzC,cACE,GAAG,EAAE,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,qBAAqB,CAAC,UAAU,EAAE,IAAI,CAAC,EACnD,QAAQ,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,IAAI,CAAC,EACnD,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,IAAI,CAAC,EAEhD,EAAA,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CACjB,CACV,CAAC,CACE,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACnB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,KAAI;AACvC,YAAA,MAAM,UAAU,GAAG,GAAG,GAAG,CAAC;YAC1B,QACE,cACE,GAAG,EAAE,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,qBAAqB,CAAC,UAAU,EAAE,IAAI,CAAC,EACnD,QAAQ,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,IAAI,CAAC,EACnD,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,IAAI,CAAC,EAEhD,EAAA,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CACjB;SAEZ,CAAC,CACE,CACF,CACF,EAGL,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,KAC3B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,cAAc,EAAA,CAAO,CAC5B,CACF,CACP,CACG,CACP,CAAC,CACE,CACF,CACD;;;;;;;;;;;;"}