@actabldesign/bellhop-core 0.0.3

package/components/p-CDPKBnfQ.js

@@ -0,0 +1,92 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-9a7sQzad.js';
+import { d as defineCustomElement$1 } from './p-YJm8-pxX.js';
+
+const bhTagCss = ":host{display:inline-block}.tag{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);font-family:var(--font-inter);font-weight:var(--weight-medium);background-color:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-sm);white-space:nowrap;cursor:default;user-select:none}.tag-dismissible{cursor:pointer}.tag-sm{padding:var(--spacing-xxs) var(--spacing-md);font-size:var(--text-sm-size);line-height:var(--text-sm-line)}.tag-sm.tag-dismissible{padding:var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md)}.tag-md{padding:var(--spacing-xxs) var(--spacing-md);font-size:var(--text-md-size);line-height:var(--text-md-line)}.tag-md.tag-dismissible{padding:var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md)}.tag-lg{padding:var(--spacing-xs) var(--spacing-lg);font-size:var(--text-md-size);line-height:var(--text-md-line)}.tag-lg.tag-dismissible{padding:var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-lg)}.tag-content{display:flex;align-items:center;gap:var(--spacing-xs)}.tag-avatar .tag-content{gap:var(--spacing-sm)}.tag-sm.tag-avatar{padding-left:var(--spacing-xs)}.tag-sm.tag-avatar.tag-dismissible{padding-left:var(--spacing-xs)}.tag-md.tag-avatar{padding-left:var(--spacing-sm)}.tag-md.tag-avatar.tag-dismissible{padding-left:var(--spacing-sm)}.tag-lg.tag-avatar{padding-left:var(--spacing-sm)}.tag-lg.tag-avatar.tag-dismissible{padding-left:var(--spacing-sm)}.tag-label-wrapper{position:relative;display:inline-flex;align-items:center;max-width:100%}.tag-label{color:var(--color-neutral-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tag-dismiss{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:var(--spacing-xxs);border-radius:var(--radius-xs);transition:background-color 0.2s ease;width:var(--spacing-xl);height:var(--spacing-xl);flex-shrink:0}.tag-lg .tag-dismiss{padding:var(--spacing-xs);width:var(--spacing-2xl);height:var(--spacing-2xl)}.tag-dismiss:hover{background-color:var(--color-neutral-100)}.tag-dismiss:disabled{cursor:not-allowed;opacity:0.5}.tag-dismiss-icon{font-size:var(--text-sm-size);color:var(--color-neutral-500);line-height:1;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20}.tag-lg .tag-dismiss-icon{font-size:var(--text-md-size)}.tag-disabled{opacity:0.5;cursor:not-allowed}.tag:hover{border-color:var(--color-neutral-300)}.tag-disabled:hover{border-color:var(--color-neutral-200)}.animate-dismiss{animation:dismiss 0.2s ease-out forwards}@keyframes dismiss{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.8)}}";
+
+const BhTag = /*@__PURE__*/ proxyCustomElement(class BhTag extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhDismiss = createEvent(this, "bhDismiss");
+    }
+    /** Tag variant */
+    variant = 'text-only';
+    /** Tag size */
+    size = 'md';
+    /** Tag label text */
+    label = 'Label';
+    /** Whether the tag is dismissible */
+    dismissible = false;
+    /** Whether the tag is disabled */
+    disabled = false;
+    /** Maximum width for the label (in pixels) */
+    maxWidth = 120;
+    /** Avatar image source (for avatar variant) */
+    avatarSrc = '';
+    /** Internal dismissing state */
+    isDismissing = false;
+    /** Emitted when dismiss button is clicked */
+    bhDismiss;
+    handleDismiss = (event) => {
+        event.stopPropagation();
+        if (this.dismissible && !this.disabled && !this.isDismissing) {
+            this.isDismissing = true;
+            // Simulate animation duration
+            setTimeout(() => {
+                this.bhDismiss.emit();
+                this.isDismissing = false;
+            }, 200);
+        }
+    };
+    render() {
+        const classes = {
+            'tag': true,
+            [`tag-${this.size}`]: true,
+            [`tag-${this.variant}`]: true,
+            'tag-dismissible': this.dismissible,
+            'tag-disabled': this.disabled,
+            'animate-dismiss': this.isDismissing,
+        };
+        const labelStyle = {
+            maxWidth: `${this.maxWidth}px`,
+        };
+        return (h("span", { key: '1ca1b5c6087d2ab438975c186b35bba2e6efa577', class: classes }, h("div", { key: '154d89498369ad08173f16fd04a29dd58b65aba0', class: "tag-content" }, this.variant === 'avatar' && (h("bh-avatar", { key: '85475fb7ed5ec15a68951c1048ce050c43044671', size: "xxs", type: this.avatarSrc ? 'image' : 'placeholder', imageSrc: this.avatarSrc })), h("span", { key: '5acc3f84536abd3b2603fe2f9c015fcb676375e7', class: "tag-label-wrapper" }, h("span", { key: '6314f8db254195d2f412467f349e2a372c9c379f', class: "tag-label", style: labelStyle }, this.label))), this.dismissible && (h("button", { key: '77377b1400258cf418da5391b54229d9e76c715f', class: "tag-dismiss", onClick: this.handleDismiss, disabled: this.disabled, type: "button", "aria-label": "Dismiss" }, h("span", { key: 'd6d6f39c326413da4f155974359960bd121dcbdb', class: "material-symbols-outlined tag-dismiss-icon" }, "close")))));
+    }
+    static get style() { return bhTagCss; }
+}, [769, "bh-tag", {
+        "variant": [1],
+        "size": [1],
+        "label": [1],
+        "dismissible": [4],
+        "disabled": [4],
+        "maxWidth": [2, "max-width"],
+        "avatarSrc": [1, "avatar-src"],
+        "isDismissing": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-tag", "bh-avatar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-tag":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhTag);
+            }
+            break;
+        case "bh-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhTag as B, defineCustomElement as d };
+//# sourceMappingURL=p-CDPKBnfQ.js.map
+
+//# sourceMappingURL=p-CDPKBnfQ.js.map

package/components/p-CDPKBnfQ.js.map

@@ -0,0 +1 @@
+{"file":"p-CDPKBnfQ.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,ynFAAynF;;MCU7nF,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;;;;;;;;;;IAER,OAAO,GAAe,WAAW;;IAGjC,IAAI,GAAY,IAAI;;IAGpB,KAAK,GAAW,OAAO;;IAGvB,WAAW,GAAY,KAAK;;IAG5B,QAAQ,GAAY,KAAK;;IAGzB,QAAQ,GAAW,GAAG;;IAGtB,SAAS,GAAW,EAAE;;IAGrB,YAAY,GAAY,KAAK;;AAG7B,IAAA,SAAS;AAEV,IAAA,aAAa,GAAG,CAAC,KAAiB,KAAI;QAC5C,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AAC5D,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;;YAGxB,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACrB,gBAAA,IAAI,CAAC,YAAY,GAAG,KAAK;aAC1B,EAAE,GAAG,CAAC;;AAEX,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,KAAK,EAAE,IAAI;AACX,YAAA,CAAC,OAAO,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC1B,YAAA,CAAC,OAAO,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;YAC7B,iBAAiB,EAAE,IAAI,CAAC,WAAW;YACnC,cAAc,EAAE,IAAI,CAAC,QAAQ;YAC7B,iBAAiB,EAAE,IAAI,CAAC,YAAY;SACrC;AAED,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,QAAQ,EAAE,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAI,EAAA,CAAA;SAC/B;AAED,QAAA,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,OAAO,EAAA,EAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EAErB,IAAI,CAAC,OAAO,KAAK,QAAQ,KACxB,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,aAAa,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAc,CAC7G,EAGD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC7B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,UAAU,EAAA,EACtC,IAAI,CAAC,KAAK,CACN,CACF,CACH,EAGL,IAAI,CAAC,WAAW,KACf,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,SAAS,EAAA,EAEpB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4CAA4C,EAAA,EAAA,OAAA,CAEjD,CACA,CACV,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-tag/bh-tag.css?tag=bh-tag&encapsulation=shadow","src/components/bh-tag/bh-tag.tsx"],"sourcesContent":["/* Tag Base Styles */\n:host {\n  display: inline-block;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-sm);\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  background-color: var(--color-white);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-sm);\n  white-space: nowrap;\n  cursor: default;\n  user-select: none;\n}\n\n/* Clickable Tags */\n.tag-dismissible {\n  cursor: pointer;\n}\n\n/* Size Variants */\n.tag-sm {\n  padding: var(--spacing-xxs) var(--spacing-md);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n}\n\n.tag-sm.tag-dismissible {\n  padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md);\n}\n\n.tag-md {\n  padding: var(--spacing-xxs) var(--spacing-md);\n  font-size: var(--text-md-size);\n  line-height: var(--text-md-line);\n}\n\n.tag-md.tag-dismissible {\n  padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md);\n}\n\n.tag-lg {\n  padding: var(--spacing-xs) var(--spacing-lg);\n  font-size: var(--text-md-size);\n  line-height: var(--text-md-line);\n}\n\n.tag-lg.tag-dismissible {\n  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-lg);\n}\n\n/* Content Layout */\n.tag-content {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xs);\n}\n\n/* Avatar Variant - specific adjustments */\n.tag-avatar .tag-content {\n  gap: var(--spacing-sm);\n}\n\n.tag-sm.tag-avatar {\n  padding-left: var(--spacing-xs);\n}\n\n.tag-sm.tag-avatar.tag-dismissible {\n  padding-left: var(--spacing-xs);\n}\n\n.tag-md.tag-avatar {\n  padding-left: var(--spacing-sm);\n}\n\n.tag-md.tag-avatar.tag-dismissible {\n  padding-left: var(--spacing-sm);\n}\n\n.tag-lg.tag-avatar {\n  padding-left: var(--spacing-sm);\n}\n\n.tag-lg.tag-avatar.tag-dismissible {\n  padding-left: var(--spacing-sm);\n}\n\n/* Label wrapper for tooltip positioning */\n.tag-label-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n\n/* Label */\n.tag-label {\n  color: var(--color-neutral-700);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Dismiss Button */\n.tag-dismiss {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: var(--spacing-xxs);\n  border-radius: var(--radius-xs);\n  transition: background-color 0.2s ease;\n  width: var(--spacing-xl);\n  height: var(--spacing-xl);\n  flex-shrink: 0;\n}\n\n.tag-lg .tag-dismiss {\n  padding: var(--spacing-xs);\n  width: var(--spacing-2xl);\n  height: var(--spacing-2xl);\n}\n\n.tag-dismiss:hover {\n  background-color: var(--color-neutral-100);\n}\n\n.tag-dismiss:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.tag-dismiss-icon {\n  font-size: var(--text-sm-size);\n  color: var(--color-neutral-500);\n  line-height: 1;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;\n}\n\n.tag-lg .tag-dismiss-icon {\n  font-size: var(--text-md-size);\n}\n\n/* Disabled State */\n.tag-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Hover State for Dismissible Tags */\n.tag:hover {\n  border-color: var(--color-neutral-300);\n}\n\n.tag-disabled:hover {\n  border-color: var(--color-neutral-200);\n}\n\n/* Dismiss animation */\n.animate-dismiss {\n  animation: dismiss 0.2s ease-out forwards;\n}\n\n@keyframes dismiss {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n}\n","import { Component, Prop, State, Event, EventEmitter, h } from '@stencil/core';\n\nexport type TagVariant = 'text-only' | 'avatar';\nexport type TagSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'bh-tag',\n  styleUrl: 'bh-tag.css',\n  shadow: true,\n})\nexport class BhTag {\n  /** Tag variant */\n  @Prop() variant: TagVariant = 'text-only';\n\n  /** Tag size */\n  @Prop() size: TagSize = 'md';\n\n  /** Tag label text */\n  @Prop() label: string = 'Label';\n\n  /** Whether the tag is dismissible */\n  @Prop() dismissible: boolean = false;\n\n  /** Whether the tag is disabled */\n  @Prop() disabled: boolean = false;\n\n  /** Maximum width for the label (in pixels) */\n  @Prop() maxWidth: number = 120;\n\n  /** Avatar image source (for avatar variant) */\n  @Prop() avatarSrc: string = '';\n\n  /** Internal dismissing state */\n  @State() isDismissing: boolean = false;\n\n  /** Emitted when dismiss button is clicked */\n  @Event() bhDismiss!: EventEmitter<void>;\n\n  private handleDismiss = (event: MouseEvent) => {\n    event.stopPropagation();\n\n    if (this.dismissible && !this.disabled && !this.isDismissing) {\n      this.isDismissing = true;\n\n      // Simulate animation duration\n      setTimeout(() => {\n        this.bhDismiss.emit();\n        this.isDismissing = false;\n      }, 200);\n    }\n  };\n\n  render() {\n    const classes = {\n      'tag': true,\n      [`tag-${this.size}`]: true,\n      [`tag-${this.variant}`]: true,\n      'tag-dismissible': this.dismissible,\n      'tag-disabled': this.disabled,\n      'animate-dismiss': this.isDismissing,\n    };\n\n    const labelStyle = {\n      maxWidth: `${this.maxWidth}px`,\n    };\n\n    return (\n      <span class={classes}>\n        <div class=\"tag-content\">\n          {/* Avatar variant */}\n          {this.variant === 'avatar' && (\n            <bh-avatar size=\"xxs\" type={this.avatarSrc ? 'image' : 'placeholder'} imageSrc={this.avatarSrc}></bh-avatar>\n          )}\n\n          {/* Label */}\n          <span class=\"tag-label-wrapper\">\n            <span class=\"tag-label\" style={labelStyle}>\n              {this.label}\n            </span>\n          </span>\n        </div>\n\n        {/* Dismiss button (if dismissible) */}\n        {this.dismissible && (\n          <button\n            class=\"tag-dismiss\"\n            onClick={this.handleDismiss}\n            disabled={this.disabled}\n            type=\"button\"\n            aria-label=\"Dismiss\"\n          >\n            <span class=\"material-symbols-outlined tag-dismiss-icon\">\n              close\n            </span>\n          </button>\n        )}\n      </span>\n    );\n  }\n}\n"],"version":3}

package/components/p-CDgBIIbC.js

@@ -0,0 +1,224 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-9a7sQzad.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 = /*@__PURE__*/ proxyCustomElement(class BhMonthPickerContent extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhChange = createEvent(this, "bhChange");
+        this.bhMonthYearSelect = createEvent(this, "bhMonthYearSelect");
+    }
+    get el() { return 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"]
+    }; }
+    static get style() { return bhMonthPickerContentCss; }
+}, [769, "bh-month-picker-content", {
+        "minYear": [2, "min-year"],
+        "maxYear": [2, "max-year"],
+        "disabled": [4],
+        "disabledMonths": [16],
+        "scrollable": [4],
+        "selectedMonth": [2, "selected-month"],
+        "selectedYear": [2, "selected-year"],
+        "height": [1],
+        "value": [16],
+        "internalSelectedMonth": [32],
+        "internalSelectedYear": [32],
+        "isUsingKeyboard": [32]
+    }, undefined, {
+        "value": ["handleValueChange"],
+        "selectedMonth": ["handleSelectedMonthChange"],
+        "selectedYear": ["handleSelectedYearChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-month-picker-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-month-picker-content":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhMonthPickerContent);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhMonthPickerContent as B, defineCustomElement as d };
+//# sourceMappingURL=p-CDgBIIbC.js.map
+
+//# sourceMappingURL=p-CDgBIIbC.js.map

package/components/p-CDgBIIbC.js.map

@@ -0,0 +1 @@
+{"file":"p-CDgBIIbC.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}

package/components/p-CErNA5c8.js

@@ -0,0 +1,204 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-9a7sQzad.js';
+import { d as defineCustomElement$5 } from './p-BBenNW93.js';
+import { d as defineCustomElement$4 } from './p-D6cM-mvE.js';
+import { d as defineCustomElement$3 } from './p-MIbEYjCv.js';
+import { d as defineCustomElement$2 } from './p-B3doeS-4.js';
+import { d as defineCustomElement$1 } from './p-D6kh9oF2.js';
+
+const bhCheckboxGroupItemCss = ":host{display:block}.checkbox-group-item{display:flex;align-items:flex-start;background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-xl);cursor:pointer;transition:all 0.2s ease;box-sizing:border-box;font-family:var(--font-inter);outline:none}.checkbox-group-item-sm{padding:var(--spacing-xl);gap:var(--spacing-md)}.checkbox-group-item-md{padding:var(--spacing-xl) var(--spacing-2xl);gap:var(--spacing-lg)}.checkbox-group-item-icon-simple{gap:var(--spacing-lg)}.checkbox-group-item-active{border-color:var(--color-brand-600);box-shadow:inset 0 0 0 1px var(--color-brand-600);background:var(--color-brand-50)}.checkbox-group-item-hovered:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active){background:var(--color-neutral-50);border-color:var(--color-neutral-300)}.checkbox-group-item-focused:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active){box-shadow:0px 0px 0px 4px var(--color-brand-100)}.checkbox-group-item-focused.checkbox-group-item-active:not(.checkbox-group-item-disabled){box-shadow:inset 0 0 0 1px var(--color-brand-600),\n    0px 0px 0px 4px var(--color-brand-100)}.checkbox-group-item-disabled{background:var(--color-neutral-100);border-color:var(--color-neutral-200);cursor:not-allowed;opacity:0.6}.item-content{display:flex;flex-direction:column;flex:1;gap:var(--spacing-xs);min-width:0}.item-text-row{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap}.item-title{font-size:var(--text-sm-size);font-weight:var(--weight-semibold);line-height:var(--text-sm-line);color:var(--color-neutral-900)}.item-subtitle{font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-600)}.item-description{font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-600);margin:0}.checkbox-group-item-disabled .item-title,.checkbox-group-item-disabled .item-subtitle,.checkbox-group-item-disabled .item-description{color:var(--color-neutral-400)}.checkbox-group-item bh-checkbox,.checkbox-group-item bh-radio-button{pointer-events:none}";
+
+const BhCheckboxGroupItem = /*@__PURE__*/ proxyCustomElement(class BhCheckboxGroupItem extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhItemChange = createEvent(this, "bhItemChange");
+    }
+    /**
+     * The type of input control
+     */
+    type = 'checkbox';
+    /**
+     * The size variant
+     */
+    size = 'sm';
+    /**
+     * Unique value identifier for this item
+     */
+    value = '';
+    /**
+     * Whether the item is checked (for checkbox type)
+     */
+    checked = false;
+    /**
+     * Whether the item is selected (for radio type)
+     */
+    selected = false;
+    /**
+     * Whether the item is disabled
+     */
+    disabled = false;
+    /**
+     * Material Symbol icon name (for icon-simple type)
+     */
+    icon = '';
+    /**
+     * Title text
+     */
+    itemTitle = '';
+    /**
+     * Subtitle text (inline with title)
+     */
+    subtitle = '';
+    /**
+     * Description text
+     */
+    description = '';
+    /**
+     * Radio group name (for radio type)
+     */
+    name = '';
+    isHovered = false;
+    isFocused = false;
+    /**
+     * Emitted when the item state changes
+     */
+    bhItemChange;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        if (this.type === 'radio' || this.type === 'icon-simple') {
+            if (!this.selected) {
+                this.selected = true;
+                this.bhItemChange.emit({ value: this.value, checked: true });
+            }
+        }
+        else {
+            this.checked = !this.checked;
+            this.bhItemChange.emit({ value: this.value, checked: this.checked });
+        }
+    };
+    handleKeyDown = (event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.handleClick();
+        }
+    };
+    handleMouseEnter = () => {
+        if (!this.disabled)
+            this.isHovered = true;
+    };
+    handleMouseLeave = () => {
+        this.isHovered = false;
+    };
+    handleFocus = () => {
+        if (!this.disabled)
+            this.isFocused = true;
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+    };
+    handleCheckboxChange = (event) => {
+        event.stopPropagation();
+        this.checked = event.detail;
+        this.bhItemChange.emit({ value: this.value, checked: this.checked });
+    };
+    handleRadioChange = (event) => {
+        event.stopPropagation();
+        this.selected = true;
+        this.bhItemChange.emit({ value: this.value, checked: true });
+    };
+    render() {
+        const isActive = (this.type === 'radio' || this.type === 'icon-simple') ? this.selected : this.checked;
+        const containerClasses = {
+            'checkbox-group-item': true,
+            [`checkbox-group-item-${this.size}`]: true,
+            [`checkbox-group-item-${this.type}`]: true,
+            'checkbox-group-item-active': isActive,
+            'checkbox-group-item-disabled': this.disabled,
+            'checkbox-group-item-hovered': this.isHovered,
+            'checkbox-group-item-focused': this.isFocused,
+        };
+        const renderInput = () => {
+            if (this.type === 'radio') {
+                return (h("bh-radio-button", { size: this.size, selected: this.selected, disabled: this.disabled, value: this.value, name: this.name, onBhChange: this.handleRadioChange }));
+            }
+            // For icon-simple, use `selected` state; for checkbox, use `checked` state
+            const isChecked = this.type === 'icon-simple' ? this.selected : this.checked;
+            return (h("bh-checkbox", { size: this.size, checked: isChecked, disabled: this.disabled, onBhChange: this.handleCheckboxChange }));
+        };
+        const renderIcon = () => {
+            if (this.type === 'icon-simple' && this.icon) {
+                return (h("bh-featured-icon", { size: "sm", icon: this.icon, color: "gray", iconStyle: "outlined" }));
+            }
+            return null;
+        };
+        const renderContent = () => (h("div", { class: "item-content" }, h("div", { class: "item-text-row" }, this.itemTitle && h("span", { class: "item-title" }, this.itemTitle), this.subtitle && h("span", { class: "item-subtitle" }, this.subtitle)), this.description && h("p", { class: "item-description" }, this.description)));
+        return (h(Host, null, h("div", { class: containerClasses, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: this.disabled ? -1 : 0, role: this.type === 'radio' ? 'radio' : 'checkbox', "aria-checked": String(isActive), "aria-disabled": this.disabled ? 'true' : null }, this.type === 'icon-simple' ? (
+        // Icon Simple: icon + content | input
+        [renderIcon(), renderContent(), renderInput()]) : (
+        // Checkbox/Radio: input | content
+        [renderInput(), renderContent()]))));
+    }
+    static get style() { return bhCheckboxGroupItemCss; }
+}, [769, "bh-checkbox-group-item", {
+        "type": [1],
+        "size": [1],
+        "value": [1],
+        "checked": [1028],
+        "selected": [1028],
+        "disabled": [4],
+        "icon": [1],
+        "itemTitle": [1, "item-title"],
+        "subtitle": [1],
+        "description": [1],
+        "name": [1],
+        "isHovered": [32],
+        "isFocused": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-checkbox-group-item", "bh-checkbox", "bh-featured-icon", "bh-label", "bh-radio-button", "bh-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-checkbox-group-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhCheckboxGroupItem);
+            }
+            break;
+        case "bh-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "bh-featured-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "bh-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-radio-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "bh-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhCheckboxGroupItem as B, defineCustomElement as d };
+//# sourceMappingURL=p-CErNA5c8.js.map
+
+//# sourceMappingURL=p-CErNA5c8.js.map

package/components/p-CErNA5c8.js.map

@@ -0,0 +1 @@
+{"file":"p-CErNA5c8.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-checkbox-group-item/bh-checkbox-group-item.css?tag=bh-checkbox-group-item&encapsulation=shadow","src/components/bh-checkbox-group-item/bh-checkbox-group-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.checkbox-group-item {\n  display: flex;\n  align-items: flex-start;\n  background: var(--color-white);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-xl);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-sizing: border-box;\n  font-family: var(--font-inter);\n  outline: none;\n}\n\n/* Size variants */\n.checkbox-group-item-sm {\n  padding: var(--spacing-xl);\n  gap: var(--spacing-md);\n}\n\n.checkbox-group-item-md {\n  padding: var(--spacing-xl) var(--spacing-2xl);\n  gap: var(--spacing-lg);\n}\n\n/* Icon simple type has more gap */\n.checkbox-group-item-icon-simple {\n  gap: var(--spacing-lg);\n}\n\n/* Active/Selected state */\n.checkbox-group-item-active {\n  border-color: var(--color-brand-600);\n  box-shadow: inset 0 0 0 1px var(--color-brand-600);\n  background: var(--color-brand-50);\n}\n\n/* Hover state */\n.checkbox-group-item-hovered:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active) {\n  background: var(--color-neutral-50);\n  border-color: var(--color-neutral-300);\n}\n\n/* Focus state */\n.checkbox-group-item-focused:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active) {\n  box-shadow: 0px 0px 0px 4px var(--color-brand-100);\n}\n\n.checkbox-group-item-focused.checkbox-group-item-active:not(.checkbox-group-item-disabled) {\n  box-shadow: inset 0 0 0 1px var(--color-brand-600),\n    0px 0px 0px 4px var(--color-brand-100);\n}\n\n/* Disabled state */\n.checkbox-group-item-disabled {\n  background: var(--color-neutral-100);\n  border-color: var(--color-neutral-200);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Content container */\n.item-content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  gap: var(--spacing-xs);\n  min-width: 0;\n}\n\n/* Title row with title and subtitle */\n.item-text-row {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-sm);\n  flex-wrap: wrap;\n}\n\n/* Title */\n.item-title {\n  font-size: var(--text-sm-size);\n  font-weight: var(--weight-semibold);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-900);\n}\n\n/* Subtitle (inline with title) */\n.item-subtitle {\n  font-size: var(--text-sm-size);\n  font-weight: var(--weight-regular);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-600);\n}\n\n/* Description */\n.item-description {\n  font-size: var(--text-sm-size);\n  font-weight: var(--weight-regular);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-600);\n  margin: 0;\n}\n\n/* Disabled text styles */\n.checkbox-group-item-disabled .item-title,\n.checkbox-group-item-disabled .item-subtitle,\n.checkbox-group-item-disabled .item-description {\n  color: var(--color-neutral-400);\n}\n\n/* Prevent inner checkbox/radio from capturing clicks - let the card handle it */\n.checkbox-group-item bh-checkbox,\n.checkbox-group-item bh-radio-button {\n  pointer-events: none;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type CheckboxGroupItemType = 'checkbox' | 'radio' | 'icon-simple';\nexport type CheckboxGroupItemSize = 'sm' | 'md';\n\n@Component({\n  tag: 'bh-checkbox-group-item',\n  styleUrl: 'bh-checkbox-group-item.css',\n  shadow: true,\n})\nexport class BhCheckboxGroupItem {\n  /**\n   * The type of input control\n   */\n  @Prop() type: CheckboxGroupItemType = 'checkbox';\n\n  /**\n   * The size variant\n   */\n  @Prop() size: CheckboxGroupItemSize = 'sm';\n\n  /**\n   * Unique value identifier for this item\n   */\n  @Prop() value: string = '';\n\n  /**\n   * Whether the item is checked (for checkbox type)\n   */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  /**\n   * Whether the item is selected (for radio type)\n   */\n  @Prop({ mutable: true }) selected: boolean = false;\n\n  /**\n   * Whether the item is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Material Symbol icon name (for icon-simple type)\n   */\n  @Prop() icon: string = '';\n\n\n  /**\n   * Title text\n   */\n  @Prop() itemTitle: string = '';\n\n  /**\n   * Subtitle text (inline with title)\n   */\n  @Prop() subtitle: string = '';\n\n  /**\n   * Description text\n   */\n  @Prop() description: string = '';\n\n  /**\n   * Radio group name (for radio type)\n   */\n  @Prop() name: string = '';\n\n  @State() isHovered: boolean = false;\n  @State() isFocused: boolean = false;\n\n  /**\n   * Emitted when the item state changes\n   */\n  @Event() bhItemChange!: EventEmitter<{ value: string; checked: boolean }>;\n\n  private handleClick = () => {\n    if (this.disabled) return;\n\n    if (this.type === 'radio' || this.type === 'icon-simple') {\n      if (!this.selected) {\n        this.selected = true;\n        this.bhItemChange.emit({ value: this.value, checked: true });\n      }\n    } else {\n      this.checked = !this.checked;\n      this.bhItemChange.emit({ value: this.value, checked: this.checked });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    if (!this.disabled) this.isHovered = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovered = false;\n  };\n\n  private handleFocus = () => {\n    if (!this.disabled) this.isFocused = true;\n  };\n\n  private handleBlur = () => {\n    this.isFocused = false;\n  };\n\n  private handleCheckboxChange = (event: CustomEvent<boolean>) => {\n    event.stopPropagation();\n    this.checked = event.detail;\n    this.bhItemChange.emit({ value: this.value, checked: this.checked });\n  };\n\n  private handleRadioChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.selected = true;\n    this.bhItemChange.emit({ value: this.value, checked: true });\n  };\n\n  render() {\n    const isActive = (this.type === 'radio' || this.type === 'icon-simple') ? this.selected : this.checked;\n\n    const containerClasses = {\n      'checkbox-group-item': true,\n      [`checkbox-group-item-${this.size}`]: true,\n      [`checkbox-group-item-${this.type}`]: true,\n      'checkbox-group-item-active': isActive,\n      'checkbox-group-item-disabled': this.disabled,\n      'checkbox-group-item-hovered': this.isHovered,\n      'checkbox-group-item-focused': this.isFocused,\n    };\n\n    const renderInput = () => {\n      if (this.type === 'radio') {\n        return (\n          <bh-radio-button\n            size={this.size}\n            selected={this.selected}\n            disabled={this.disabled}\n            value={this.value}\n            name={this.name}\n            onBhChange={this.handleRadioChange}\n          />\n        );\n      }\n      // For icon-simple, use `selected` state; for checkbox, use `checked` state\n      const isChecked = this.type === 'icon-simple' ? this.selected : this.checked;\n      return (\n        <bh-checkbox\n          size={this.size}\n          checked={isChecked}\n          disabled={this.disabled}\n          onBhChange={this.handleCheckboxChange}\n        />\n      );\n    };\n\n    const renderIcon = () => {\n      if (this.type === 'icon-simple' && this.icon) {\n        return (\n          <bh-featured-icon\n            size=\"sm\"\n            icon={this.icon}\n            color=\"gray\"\n            iconStyle=\"outlined\"\n          />\n        );\n      }\n      return null;\n    };\n\n    const renderContent = () => (\n      <div class=\"item-content\">\n        <div class=\"item-text-row\">\n          {this.itemTitle && <span class=\"item-title\">{this.itemTitle}</span>}\n          {this.subtitle && <span class=\"item-subtitle\">{this.subtitle}</span>}\n        </div>\n        {this.description && <p class=\"item-description\">{this.description}</p>}\n      </div>\n    );\n\n    return (\n      <Host>\n        <div\n          class={containerClasses}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          tabIndex={this.disabled ? -1 : 0}\n          role={this.type === 'radio' ? 'radio' : 'checkbox'}\n          aria-checked={String(isActive)}\n          aria-disabled={this.disabled ? 'true' : null}\n        >\n          {this.type === 'icon-simple' ? (\n            // Icon Simple: icon + content | input\n            [renderIcon(), renderContent(), renderInput()]\n          ) : (\n            // Checkbox/Radio: input | content\n            [renderInput(), renderContent()]\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}