npm - @actabldesign/bellhop-core - Versions diffs - 0.0.3 → 0.0.6 - Mend

@actabldesign/bellhop-core 0.0.3 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1505) hide show

package/dist/components/p-BsB67vNb.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-BsB67vNb.js","mappings":";;AAAA,MAAM,eAAe,GAAG,+4FAA+4F;;MCe15F,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;;AACvB;;AAEG;IACK,SAAS,GAAwB,SAAS;AAElD;;AAEG;IACK,IAAI,GAAmB,IAAI;AAEnC;;AAEG;IACK,QAAQ,GAAW,KAAK;AAEhC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,OAAO,GAAY,KAAK;AAEhC;;;;;AAKG;IACK,IAAI,GAAmB,QAAQ;AAEvC;;AAEG;IACK,SAAS,GAAkB,IAAI;AAEvC;;AAEG;AACM,IAAA,OAAO;AAER,IAAA,WAAW,GAAG,CAAC,KAAiB,KAAU;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACnC,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;;AAE5B,KAAC;AAEO,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAU;AACrD,QAAA,IACE,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG;YAC3C,CAAC,IAAI,CAAC,QAAQ;AACd,YAAA,CAAC,IAAI,CAAC,OAAO,EACb;YACA,KAAK,CAAC,cAAc,EAAE;AACtB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAA8B,CAAC;;AAErD,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,CAAC,eAAe,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;AACvC,YAAA,CAAC,eAAe,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAClC,sBAAsB,EAAE,IAAI,CAAC,QAAQ;YACrC,qBAAqB,EAAE,IAAI,CAAC,OAAO;SACpC;QAED,QACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,YAAA,EACX,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,EAC5B,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,IAAI,EAAC,QAAQ,EAAA,EAEZ,IAAI,CAAC,OAAO,IACX,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,SAAS,GAAQ,KAEpD,YAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,MAAM,EAAA,EACrD,IAAI,CAAC,QAAQ,CACT,CACR,CACM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-button-icon/bh-button-icon.css?tag=bh-button-icon&encapsulation=shadow","src/components/bh-button-icon/bh-button-icon.tsx"],"sourcesContent":[":host {\n display: inline-block;\n font-family: var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n/* Base Button Icon */\n.button-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--radius-md, 8px);\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n font-family: inherit;\n outline: none;\n padding: 0;\n}\n\n.button-icon:focus-visible {\n box-shadow: 0 0 0 2px var(--color-white, #FFFFFF), 0 0 0 4px var(--color-brand-500, #7F56D9);\n}\n\n/* Sizes */\n.button-icon-xs {\n width: 24px;\n height: 24px;\n}\n\n.button-icon-xs .icon {\n font-size: 16px;\n}\n\n.button-icon-sm {\n width: 32px;\n height: 32px;\n}\n\n.button-icon-sm .icon {\n font-size: 18px;\n}\n\n.button-icon-md {\n width: 40px;\n height: 40px;\n}\n\n.button-icon-md .icon {\n font-size: 20px;\n}\n\n.button-icon-lg {\n width: 48px;\n height: 48px;\n}\n\n.button-icon-lg .icon {\n font-size: 24px;\n}\n\n/* Primary Hierarchy */\n.button-icon-primary {\n background: var(--color-brand-600, #6941C6);\n color: var(--color-white, #FFFFFF);\n}\n\n.button-icon-primary:hover:not(.button-icon-disabled) {\n background: var(--color-brand-700, #5235A8);\n}\n\n.button-icon-primary:active:not(.button-icon-disabled) {\n background: var(--color-brand-800, #42298F);\n}\n\n/* Secondary Hierarchy */\n.button-icon-secondary {\n background: var(--color-white, #FFFFFF);\n color: var(--color-neutral-700, #344054);\n border: 1px solid var(--color-neutral-300, #D0D5DD);\n}\n\n.button-icon-secondary:hover:not(.button-icon-disabled) {\n background: var(--color-neutral-50, #F9FAFB);\n border-color: var(--color-neutral-400, #98A2B3);\n}\n\n.button-icon-secondary:active:not(.button-icon-disabled) {\n background: var(--color-neutral-100, #F2F4F7);\n}\n\n/* Tertiary Hierarchy */\n.button-icon-tertiary {\n background: transparent;\n color: var(--color-brand-600, #6941C6);\n}\n\n.button-icon-tertiary:hover:not(.button-icon-disabled) {\n background: var(--color-brand-50, #F9F5FF);\n}\n\n.button-icon-tertiary:active:not(.button-icon-disabled) {\n background: var(--color-brand-100, #F4EBFF);\n}\n\n/* Quaternary Hierarchy */\n.button-icon-quaternary {\n background: transparent;\n color: var(--color-neutral-500, #667085);\n}\n\n.button-icon-quaternary:hover:not(.button-icon-disabled) {\n background: var(--color-neutral-100, #F2F4F7);\n color: var(--color-neutral-700, #344054);\n}\n\n.button-icon-quaternary:active:not(.button-icon-disabled) {\n background: var(--color-neutral-200, #EAECF0);\n}\n\n/* Disabled State */\n.button-icon-disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Loading State */\n.button-icon-loading {\n cursor: wait;\n}\n\n/* Loading Spinner */\n.loading-spinner {\n width: 16px;\n height: 16px;\n border: 2px solid currentColor;\n border-top-color: transparent;\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n}\n\n.button-icon-sm .loading-spinner {\n width: 14px;\n height: 14px;\n}\n\n.button-icon-xs .loading-spinner {\n width: 12px;\n height: 12px;\n}\n\n.button-icon-lg .loading-spinner {\n width: 20px;\n height: 20px;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/* Icon */\n.icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Material Symbols */\n.material-symbols-outlined {\n font-family: 'Material Symbols Outlined';\n font-weight: normal;\n font-style: normal;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n font-feature-settings: 'liga';\n -webkit-font-smoothing: antialiased;\n font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type ButtonIconHierarchy =\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'quaternary';\nexport type ButtonIconSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type ButtonIconType = 'button' | 'submit' | 'reset';\n\n@Component({\n tag: 'bh-button-icon',\n styleUrl: 'bh-button-icon.css',\n shadow: true,\n})\nexport class BhButtonIcon {\n /**\n * The visual hierarchy of the button\n */\n @Prop() hierarchy: ButtonIconHierarchy = 'primary';\n\n /**\n * The size of the button\n */\n @Prop() size: ButtonIconSize = 'md';\n\n /**\n * The icon name (Material Symbols)\n */\n @Prop() iconName: string = 'add';\n\n /**\n * Whether the button is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether the button is in loading state\n */\n @Prop() loading: boolean = false;\n\n /**\n * The type of button for form submission\n * - 'button': No form submission (default)\n * - 'submit': Submits the form\n * - 'reset': Resets the form\n */\n @Prop() type: ButtonIconType = 'button';\n\n /**\n * Accessible label for the button\n */\n @Prop() ariaLabel: string | null = null;\n\n /**\n * Emitted when the button is clicked\n */\n @Event() bhClick!: EventEmitter<MouseEvent>;\n\n private handleClick = (event: MouseEvent): void => {\n if (!this.disabled && !this.loading) {\n this.bhClick.emit(event);\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n if (\n (event.key === 'Enter' || event.key === ' ') &&\n !this.disabled &&\n !this.loading\n ) {\n event.preventDefault();\n this.bhClick.emit(event as unknown as MouseEvent);\n }\n };\n\n render() {\n const buttonClasses = {\n 'button-icon': true,\n [`button-icon-${this.hierarchy}`]: true,\n [`button-icon-${this.size}`]: true,\n 'button-icon-disabled': this.disabled,\n 'button-icon-loading': this.loading,\n };\n\n return (\n <button\n type={this.type}\n class={buttonClasses}\n disabled={this.disabled}\n aria-label={this.ariaLabel || this.iconName}\n aria-disabled={this.disabled ? 'true' : undefined}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n part=\"button\"\n >\n {this.loading ? (\n <span class=\"loading-spinner\" part=\"spinner\"></span>\n ) : (\n <span class=\"material-symbols-outlined icon\" part=\"icon\">\n {this.iconName}\n </span>\n )}\n </button>\n );\n }\n}\n"],"version":3}

package/dist/components/p-BsgViq32.js ADDED Viewed

@@ -0,0 +1,189 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-DLHC5fHk.js';
+import { s as syncCheckableFormValue, v as validateRequired } from './p-2KjdCYlS.js';
+import { d as defineCustomElement$2 } from './p-CzM_4nyA.js';
+import { d as defineCustomElement$1 } from './p-UG_h-ztP.js';
+const bhCheckboxCss = ":host{display:inline-block;font-family:var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif)}.checkbox-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.checkbox-wrapper{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;user-select:none;position:relative}.checkbox-wrapper-disabled{cursor:not-allowed}.checkbox{display:inline-flex;align-items:center;justify-content:center;outline:none;user-select:none;transition:all 0.2s ease;box-sizing:border-box;background:var(--color-white);border:2px solid var(--color-neutral-300);position:relative;flex-shrink:0;pointer-events:none}.checkbox-sm{width:16px;height:16px;border-radius:var(--radius-xs);margin-top:3px}.checkbox-md{width:20px;height:20px;border-radius:var(--radius-sm);margin-top:2px}.checkbox-wrapper:not(.checkbox-wrapper-with-label) .checkbox-sm,.checkbox-wrapper:not(.checkbox-wrapper-with-label) .checkbox-md{margin-top:0}.checkbox.checkbox-checked{background:var(--color-brand-600);border-color:var(--color-brand-600);color:var(--color-white)}.checkbox.checkbox-hover:not(.checkbox-disabled){background:var(--color-neutral-100);border-color:var(--color-neutral-300)}.checkbox.checkbox-checked.checkbox-hover:not(.checkbox-disabled){background:var(--color-brand-700);border-color:var(--color-brand-700)}.checkbox.checkbox-focused:not(.checkbox-disabled){border-color:var(--color-neutral-300);box-shadow:0px 0px 0px 4px var(--color-brand-100),\n    0px 0px 0px 2px var(--color-white)}.checkbox.checkbox-checked.checkbox-focused:not(.checkbox-disabled){background:var(--color-brand-600);border-color:var(--color-brand-600);box-shadow:0px 0px 0px 4px var(--color-brand-100),\n    0px 0px 0px 2px var(--color-white)}.checkbox.checkbox-disabled{background:var(--color-neutral-50);border-color:var(--color-neutral-300);cursor:not-allowed;opacity:1}.checkbox.checkbox-checked.checkbox-disabled{background:var(--color-neutral-50);border:2px solid var(--color-neutral-300);color:var(--color-neutral-300)}.checkbox-icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);line-height:1;font-variation-settings:'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20}.checkbox .check-icon{color:var(--color-white)}.checkbox-disabled .check-icon{color:var(--color-neutral-300)}.checkbox .minus-icon{color:var(--color-white)}.checkbox-disabled .minus-icon{color:var(--color-neutral-300)}.checkbox-sm .checkbox-icon{font-size:14px}.checkbox-md .checkbox-icon{font-size:18px}.checkbox-control{display:inline-flex;align-items:flex-start;cursor:pointer}.checkbox-wrapper-disabled .checkbox-control{cursor:not-allowed}";
+const BhCheckbox = /*@__PURE__*/ proxyCustomElement(class BhCheckbox extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhChange = createEvent(this, "bhChange");
+        this.internals = this.attachInternals();
+    }
+    get el() { return this; }
+    internals;
+    inputRef;
+    uniqueId = `bh-checkbox-${Math.random().toString(36).substring(2, 9)}`;
+    /** Checkbox size */
+    size = 'md';
+    /** Checked state */
+    checked = false;
+    /** Indeterminate state */
+    indeterminate = false;
+    /** Disabled state */
+    disabled = false;
+    /** Name attribute for form submission */
+    name = '';
+    /** Value attribute for form submission */
+    value = 'on';
+    /** Optional label text - when provided, renders checkbox with label */
+    label = '';
+    /** Optional supporting text below the label */
+    supportingText = '';
+    /** Whether the checkbox is required */
+    required = false;
+    /** Default checked state for form reset */
+    defaultChecked = false;
+    /** Internal hover state */
+    isHovered = false;
+    /** Internal focus state */
+    isFocused = false;
+    /** Emitted when checkbox state changes via user interaction */
+    bhChange;
+    handleCheckedChange(newValue) {
+        if (this.inputRef) {
+            this.inputRef.checked = newValue;
+        }
+    }
+    handleIndeterminateChange(newValue) {
+        if (this.inputRef) {
+            this.inputRef.indeterminate = newValue;
+        }
+    }
+    componentDidLoad() {
+        if (this.inputRef) {
+            this.inputRef.indeterminate = this.indeterminate;
+        }
+        syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
+        validateRequired(this.internals, this.required, this.checked);
+    }
+    formResetCallback() {
+        this.checked = this.defaultChecked;
+        this.indeterminate = false;
+        if (this.inputRef) {
+            this.inputRef.checked = this.defaultChecked;
+            this.inputRef.indeterminate = false;
+        }
+        syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
+        validateRequired(this.internals, this.required, this.checked);
+    }
+    handleChange = (event) => {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        const input = event.target;
+        if (this.indeterminate) {
+            this.indeterminate = false;
+            this.checked = false;
+            if (this.inputRef) {
+                this.inputRef.indeterminate = false;
+                this.inputRef.checked = false;
+            }
+        }
+        else {
+            this.checked = input.checked;
+        }
+        syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
+        validateRequired(this.internals, this.required, this.checked);
+        this.bhChange.emit(this.checked);
+    };
+    handleMouseEnter = () => {
+        this.isHovered = true;
+    };
+    handleMouseLeave = () => {
+        this.isHovered = false;
+    };
+    handleFocus = () => {
+        this.isFocused = true;
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+    };
+    handleControlClick = () => {
+        if (this.disabled)
+            return;
+        this.inputRef?.click();
+    };
+    renderCheckboxControl() {
+        const isCheckedState = this.checked || this.indeterminate;
+        const checkboxClasses = {
+            'checkbox': true,
+            [`checkbox-${this.size}`]: true,
+            'checkbox-checked': isCheckedState,
+            'checkbox-disabled': this.disabled,
+            'checkbox-focused': this.isFocused && !this.disabled,
+            'checkbox-hover': this.isHovered && !this.disabled,
+        };
+        return (h("div", { class: "checkbox-control", onClick: this.handleControlClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("input", { ref: (el) => (this.inputRef = el), type: "checkbox", id: this.uniqueId, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, class: "checkbox-input", onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-describedby": this.supportingText ? `${this.uniqueId}-description` : undefined }), h("div", { class: checkboxClasses, part: "checkbox", "aria-hidden": "true" }, this.checked && !this.indeterminate && (h("span", { class: "material-symbols-outlined checkbox-icon check-icon" }, "check")), this.indeterminate && (h("span", { class: "material-symbols-outlined checkbox-icon minus-icon" }, "remove")))));
+    }
+    render() {
+        const hasLabel = this.label || this.supportingText;
+        const wrapperClasses = {
+            'checkbox-wrapper': true,
+            'checkbox-wrapper-with-label': !!hasLabel,
+            'checkbox-wrapper-disabled': this.disabled,
+        };
+        // Render with bh-label when label/supportingText is provided
+        if (hasLabel) {
+            return (h("div", { class: wrapperClasses, part: "wrapper" }, h("bh-label", { layout: "inline-start", label: this.label, supportingText: this.supportingText, disabled: this.disabled, for: this.uniqueId }, this.renderCheckboxControl())));
+        }
+        // Standalone checkbox without label
+        return (h("div", { class: wrapperClasses, part: "wrapper" }, this.renderCheckboxControl()));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "checked": ["handleCheckedChange"],
+        "indeterminate": ["handleIndeterminateChange"]
+    }; }
+    static get style() { return bhCheckboxCss; }
+}, [833, "bh-checkbox", {
+        "size": [1],
+        "checked": [1540],
+        "indeterminate": [1028],
+        "disabled": [4],
+        "name": [1],
+        "value": [1],
+        "label": [1],
+        "supportingText": [1, "supporting-text"],
+        "required": [4],
+        "defaultChecked": [4, "default-checked"],
+        "isHovered": [32],
+        "isFocused": [32]
+    }, undefined, {
+        "checked": ["handleCheckedChange"],
+        "indeterminate": ["handleIndeterminateChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-checkbox", "bh-label", "bh-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhCheckbox);
+            }
+            break;
+        case "bh-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "bh-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+export { BhCheckbox as B, defineCustomElement as d };
+//# sourceMappingURL=p-BsgViq32.js.map
+//# sourceMappingURL=p-BsgViq32.js.map

package/dist/components/p-BsgViq32.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-BsgViq32.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-checkbox/bh-checkbox.css?tag=bh-checkbox&encapsulation=shadow","src/components/bh-checkbox/bh-checkbox.tsx"],"sourcesContent":["/* ==========================================================================\n CHECKBOX COMPONENT STYLES - StencilJS\n ========================================================================== */\n\n:host {\n display: inline-block;\n font-family: var(--font-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n/* ==========================================================================\n VISUALLY HIDDEN NATIVE INPUT\n ========================================================================== */\n\n.checkbox-input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n/* ==========================================================================\n WRAPPER STYLES\n ========================================================================== */\n\n.checkbox-wrapper {\n display: inline-flex;\n align-items: flex-start;\n gap: 8px;\n cursor: pointer;\n user-select: none;\n position: relative;\n}\n\n.checkbox-wrapper-disabled {\n cursor: not-allowed;\n}\n\n/* ==========================================================================\n CHECKBOX BOX STYLES\n ========================================================================== */\n\n.checkbox {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n outline: none;\n user-select: none;\n transition: all 0.2s ease;\n box-sizing: border-box;\n background: var(--color-white);\n border: 2px solid var(--color-neutral-300);\n position: relative;\n flex-shrink: 0;\n pointer-events: none;\n}\n\n/* Size Variants */\n.checkbox-sm {\n width: 16px;\n height: 16px;\n border-radius: var(--radius-xs);\n margin-top: 3px;\n}\n\n.checkbox-md {\n width: 20px;\n height: 20px;\n border-radius: var(--radius-sm);\n margin-top: 2px;\n}\n\n/* Remove margin when no label */\n.checkbox-wrapper:not(.checkbox-wrapper-with-label) .checkbox-sm,\n.checkbox-wrapper:not(.checkbox-wrapper-with-label) .checkbox-md {\n margin-top: 0;\n}\n\n/* State: Checked */\n.checkbox.checkbox-checked {\n background: var(--color-brand-600);\n border-color: var(--color-brand-600);\n color: var(--color-white);\n}\n\n/* State: Hover */\n.checkbox.checkbox-hover:not(.checkbox-disabled) {\n background: var(--color-neutral-100);\n border-color: var(--color-neutral-300);\n}\n\n.checkbox.checkbox-checked.checkbox-hover:not(.checkbox-disabled) {\n background: var(--color-brand-700);\n border-color: var(--color-brand-700);\n}\n\n/* State: Focused */\n.checkbox.checkbox-focused:not(.checkbox-disabled) {\n border-color: var(--color-neutral-300);\n box-shadow: 0px 0px 0px 4px var(--color-brand-100),\n 0px 0px 0px 2px var(--color-white);\n}\n\n.checkbox.checkbox-checked.checkbox-focused:not(.checkbox-disabled) {\n background: var(--color-brand-600);\n border-color: var(--color-brand-600);\n box-shadow: 0px 0px 0px 4px var(--color-brand-100),\n 0px 0px 0px 2px var(--color-white);\n}\n\n/* State: Disabled */\n.checkbox.checkbox-disabled {\n background: var(--color-neutral-50);\n border-color: var(--color-neutral-300);\n cursor: not-allowed;\n opacity: 1;\n}\n\n.checkbox.checkbox-checked.checkbox-disabled {\n background: var(--color-neutral-50);\n border: 2px solid var(--color-neutral-300);\n color: var(--color-neutral-300);\n}\n\n/* ==========================================================================\n ICONS\n ========================================================================== */\n\n.checkbox-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n line-height: 1;\n font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20;\n}\n\n.checkbox .check-icon {\n color: var(--color-white);\n}\n\n.checkbox-disabled .check-icon {\n color: var(--color-neutral-300);\n}\n\n.checkbox .minus-icon {\n color: var(--color-white);\n}\n\n.checkbox-disabled .minus-icon {\n color: var(--color-neutral-300);\n}\n\n/* Adjust icon sizes for different checkbox sizes */\n.checkbox-sm .checkbox-icon {\n font-size: 14px;\n}\n\n.checkbox-md .checkbox-icon {\n font-size: 18px;\n}\n\n/* ==========================================================================\n CHECKBOX CONTROL WRAPPER\n ========================================================================== */\n\n.checkbox-control {\n display: inline-flex;\n align-items: flex-start;\n cursor: pointer;\n}\n\n.checkbox-wrapper-disabled .checkbox-control {\n cursor: not-allowed;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Element, Watch, AttachInternals } from '@stencil/core';\nimport { syncCheckableFormValue, validateRequired } from '../../utils/form';\n\nexport type CheckboxSize = 'sm' | 'md';\n\n@Component({\n tag: 'bh-checkbox',\n styleUrl: 'bh-checkbox.css',\n shadow: true,\n formAssociated: true,\n})\nexport class BhCheckbox {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n private inputRef?: HTMLInputElement;\n private uniqueId = `bh-checkbox-${Math.random().toString(36).substring(2, 9)}`;\n\n /** Checkbox size */\n @Prop() size: CheckboxSize = 'md';\n\n /** Checked state */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /** Indeterminate state */\n @Prop({ mutable: true }) indeterminate: boolean = false;\n\n /** Disabled state */\n @Prop() disabled: boolean = false;\n\n /** Name attribute for form submission */\n @Prop() name: string = '';\n\n /** Value attribute for form submission */\n @Prop() value: string = 'on';\n\n /** Optional label text - when provided, renders checkbox with label */\n @Prop() label: string = '';\n\n /** Optional supporting text below the label */\n @Prop() supportingText: string = '';\n\n /** Whether the checkbox is required */\n @Prop() required: boolean = false;\n\n /** Default checked state for form reset */\n @Prop() defaultChecked: boolean = false;\n\n /** Internal hover state */\n @State() isHovered: boolean = false;\n\n /** Internal focus state */\n @State() isFocused: boolean = false;\n\n /** Emitted when checkbox state changes via user interaction */\n @Event() bhChange!: EventEmitter<boolean>;\n\n @Watch('checked')\n handleCheckedChange(newValue: boolean) {\n if (this.inputRef) {\n this.inputRef.checked = newValue;\n }\n }\n\n @Watch('indeterminate')\n handleIndeterminateChange(newValue: boolean) {\n if (this.inputRef) {\n this.inputRef.indeterminate = newValue;\n }\n }\n\n componentDidLoad() {\n if (this.inputRef) {\n this.inputRef.indeterminate = this.indeterminate;\n }\n syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n validateRequired(this.internals, this.required, this.checked);\n }\n\n formResetCallback() {\n this.checked = this.defaultChecked;\n this.indeterminate = false;\n if (this.inputRef) {\n this.inputRef.checked = this.defaultChecked;\n this.inputRef.indeterminate = false;\n }\n syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n validateRequired(this.internals, this.required, this.checked);\n }\n\n private handleChange = (event: Event) => {\n event.stopPropagation();\n if (this.disabled) return;\n\n const input = event.target as HTMLInputElement;\n\n if (this.indeterminate) {\n this.indeterminate = false;\n this.checked = false;\n if (this.inputRef) {\n this.inputRef.indeterminate = false;\n this.inputRef.checked = false;\n }\n } else {\n this.checked = input.checked;\n }\n\n syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n validateRequired(this.internals, this.required, this.checked);\n this.bhChange.emit(this.checked);\n };\n\n private handleMouseEnter = () => {\n this.isHovered = true;\n };\n\n private handleMouseLeave = () => {\n this.isHovered = false;\n };\n\n private handleFocus = () => {\n this.isFocused = true;\n };\n\n private handleBlur = () => {\n this.isFocused = false;\n };\n\n private handleControlClick = () => {\n if (this.disabled) return;\n this.inputRef?.click();\n };\n\n private renderCheckboxControl() {\n const isCheckedState = this.checked || this.indeterminate;\n\n const checkboxClasses = {\n 'checkbox': true,\n [`checkbox-${this.size}`]: true,\n 'checkbox-checked': isCheckedState,\n 'checkbox-disabled': this.disabled,\n 'checkbox-focused': this.isFocused && !this.disabled,\n 'checkbox-hover': this.isHovered && !this.disabled,\n };\n\n return (\n <div\n class=\"checkbox-control\"\n onClick={this.handleControlClick}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n <input\n ref={(el) => (this.inputRef = el)}\n type=\"checkbox\"\n id={this.uniqueId}\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n class=\"checkbox-input\"\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n aria-describedby={this.supportingText ? `${this.uniqueId}-description` : undefined}\n />\n <div class={checkboxClasses} part=\"checkbox\" aria-hidden=\"true\">\n {this.checked && !this.indeterminate && (\n <span class=\"material-symbols-outlined checkbox-icon check-icon\">\n check\n </span>\n )}\n {this.indeterminate && (\n <span class=\"material-symbols-outlined checkbox-icon minus-icon\">\n remove\n </span>\n )}\n </div>\n </div>\n );\n }\n\n render() {\n const hasLabel = this.label || this.supportingText;\n\n const wrapperClasses = {\n 'checkbox-wrapper': true,\n 'checkbox-wrapper-with-label': !!hasLabel,\n 'checkbox-wrapper-disabled': this.disabled,\n };\n\n // Render with bh-label when label/supportingText is provided\n if (hasLabel) {\n return (\n <div class={wrapperClasses} part=\"wrapper\">\n <bh-label\n layout=\"inline-start\"\n label={this.label}\n supportingText={this.supportingText}\n disabled={this.disabled}\n for={this.uniqueId}\n >\n {this.renderCheckboxControl()}\n </bh-label>\n </div>\n );\n }\n\n // Standalone checkbox without label\n return (\n <div class={wrapperClasses} part=\"wrapper\">\n {this.renderCheckboxControl()}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/components/p-BuUjUqUh.js ADDED Viewed

@@ -0,0 +1,224 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DLHC5fHk.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: '7b5bd2302804839e5362752f0e1a54dd2698c1b7' }, h("div", { key: 'a71768e29f2c703f6b0ddfd84a392ae084182b9f', class: `month-picker-content animate-slide-up-enter ${this.scrollable ? 'scrollable' : ''}`, style: { height: this.height }, onKeyDown: this.handleKeyDown, onMouseDown: this.handleMouseDown }, h("div", { key: '3754d5452f0d4952e61f6bb0968c712f725466b1', class: "calendar" }, years.map((year, yearIndex) => (h("div", { key: year, class: "year-section", id: `year-${year}` }, h("div", { class: "year-month-container" }, h("div", { class: "year-label" }, year), h("div", { class: "months-row" }, h("div", { class: "month-row" }, this.months.slice(0, 6).map((_, monthIndex) => (h("button", { key: monthIndex, class: this.getMonthButtonClasses(monthIndex, year), disabled: !this.isMonthSelectable(monthIndex, year), onClick: () => this.selectMonth(monthIndex, year) }, this.months[monthIndex])))), h("div", { class: "month-row" }, this.months.slice(6, 12).map((_, idx) => {
+            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-BuUjUqUh.js.map
+//# sourceMappingURL=p-BuUjUqUh.js.map

package/dist/components/p-BuUjUqUh.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-BuUjUqUh.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/dist/components/p-C24VI6pZ.js ADDED Viewed

@@ -0,0 +1,71 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DLHC5fHk.js';
+const bhPageNavigationChildCss = "@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}.page-navigation-child{display:flex;align-items:center;padding:var(--spacing-md) var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:36px;box-sizing:border-box;border-radius:var(--radius-sm);margin:var(--spacing-none) var(--spacing-xs);background-color:transparent;border:1px solid transparent;margin-left:9px}.page-navigation-child:hover:not(.active){background-color:var(--color-neutral-50);position:relative;z-index:1}.page-navigation-child.active{background-color:transparent}.page-navigation-child.active::before{content:'';position:absolute;left:-4.5px;top:50%;transform:translateY(-50%);width:2px;height:24px;background-color:var(--color-brand-600);z-index:3}.page-navigation-child-content{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.page-navigation-child-label{font-family:var(--font-inter);font-size:14px;font-weight:500;line-height:20px;color:var(--color-neutral-600);flex:1;transition:all 0.15s ease}.page-navigation-child.active .page-navigation-child-label{color:var(--color-brand-600);font-weight:600}.page-navigation-child-badge{margin-left:auto;font-family:var(--font-inter);font-size:12px;font-weight:500;color:var(--color-neutral-500)}";
+const BhPageNavigationChild = /*@__PURE__*/ proxyCustomElement(class BhPageNavigationChild extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhItemClick = createEvent(this, "bhItemClick");
+    }
+    /**
+     * Label text for the navigation item
+     */
+    label;
+    /**
+     * Optional badge text/number to display
+     */
+    badge;
+    /**
+     * Whether to show the badge (when badge prop is provided)
+     */
+    showBadge = true;
+    /**
+     * Whether the item is currently active/selected
+     */
+    isActive = false;
+    /**
+     * Event emitted when the navigation item is clicked
+     */
+    bhItemClick;
+    handleClick = () => {
+        this.bhItemClick.emit();
+    };
+    getItemClasses() {
+        return {
+            'page-navigation-child': true,
+            'active': this.isActive,
+        };
+    }
+    render() {
+        return (h(Host, { key: '801f6ce9fa33bff82ae0572ca4233d62101bff5a' }, h("div", { key: 'b485e3a258658dadebda21a9f329bb676a737e6d', class: this.getItemClasses(), onClick: this.handleClick }, h("div", { key: '3cebeec1f7255591c5a2405198d65f7cc637fe02', class: "page-navigation-child-content" }, h("span", { key: '982dbda8defddf8a04cbd4831d68090816bb8228', class: "page-navigation-child-label" }, this.label), this.badge !== undefined && this.showBadge && (h("span", { key: '623a58963bbbbd94d5a2934165a4f5e821ef3a56', class: "page-navigation-child-badge" }, this.badge))))));
+    }
+    static get style() { return bhPageNavigationChildCss; }
+}, [769, "bh-page-navigation-child", {
+        "label": [1],
+        "badge": [8],
+        "showBadge": [4, "show-badge"],
+        "isActive": [4, "is-active"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-page-navigation-child"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-page-navigation-child":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhPageNavigationChild);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+export { BhPageNavigationChild as B, defineCustomElement as d };
+//# sourceMappingURL=p-C24VI6pZ.js.map
+//# sourceMappingURL=p-C24VI6pZ.js.map

package/dist/components/p-C24VI6pZ.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-C24VI6pZ.js","mappings":";;AAAA,MAAM,wBAAwB,GAAG,u2LAAu2L;;MCO33L,qBAAqB,iBAAAA,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAChC;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;IACK,SAAS,GAAY,IAAI;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACM,IAAA,WAAW;IAEZ,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACzB,KAAC;IAEO,cAAc,GAAA;QACpB,OAAO;AACL,YAAA,uBAAuB,EAAE,IAAI;YAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;;IAGH,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAC1D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAA,EACxC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC5D,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,KACzC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAC9D,CACG,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-page-navigation-child/bh-page-navigation-child.css?tag=bh-page-navigation-child&encapsulation=shadow","src/components/bh-page-navigation-child/bh-page-navigation-child.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n display: block;\n}\n\n.page-navigation-child {\n display: flex;\n align-items: center;\n padding: var(--spacing-md) var(--spacing-lg);\n cursor: pointer;\n gap: var(--spacing-md);\n position: relative;\n transition: all 0.15s ease;\n min-height: 36px;\n box-sizing: border-box;\n border-radius: var(--radius-sm);\n margin: var(--spacing-none) var(--spacing-xs);\n background-color: transparent;\n border: 1px solid transparent;\n margin-left: 9px;\n}\n\n/* Hover state for child items */\n.page-navigation-child:hover:not(.active) {\n background-color: var(--color-neutral-50);\n position: relative;\n z-index: 1;\n}\n\n/* Active/Selected state for child items */\n.page-navigation-child.active {\n background-color: transparent;\n}\n\n/* Active line indicator for child items */\n.page-navigation-child.active::before {\n content: '';\n position: absolute;\n left: -4.5px;\n top: 50%;\n transform: translateY(-50%);\n width: 2px;\n height: 24px;\n background-color: var(--color-brand-600);\n z-index: 3;\n}\n\n.page-navigation-child-content {\n display: flex;\n align-items: center;\n gap: var(--spacing-md);\n width: 100%;\n}\n\n.page-navigation-child-label {\n font-family: var(--font-inter);\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n color: var(--color-neutral-600);\n flex: 1;\n transition: all 0.15s ease;\n}\n\n.page-navigation-child.active .page-navigation-child-label {\n color: var(--color-brand-600);\n font-weight: 600;\n}\n\n.page-navigation-child-badge {\n margin-left: auto;\n font-family: var(--font-inter);\n font-size: 12px;\n font-weight: 500;\n color: var(--color-neutral-500);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'bh-page-navigation-child',\n styleUrl: 'bh-page-navigation-child.css',\n shadow: true,\n})\nexport class BhPageNavigationChild {\n /**\n * Label text for the navigation item\n */\n @Prop() label!: string;\n\n /**\n * Optional badge text/number to display\n */\n @Prop() badge?: string | number;\n\n /**\n * Whether to show the badge (when badge prop is provided)\n */\n @Prop() showBadge: boolean = true;\n\n /**\n * Whether the item is currently active/selected\n */\n @Prop() isActive: boolean = false;\n\n /**\n * Event emitted when the navigation item is clicked\n */\n @Event() bhItemClick!: EventEmitter<void>;\n\n private handleClick = () => {\n this.bhItemClick.emit();\n };\n\n private getItemClasses() {\n return {\n 'page-navigation-child': true,\n 'active': this.isActive,\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.getItemClasses()} onClick={this.handleClick}>\n <div class=\"page-navigation-child-content\">\n <span class=\"page-navigation-child-label\">{this.label}</span>\n {this.badge !== undefined && this.showBadge && (\n <span class=\"page-navigation-child-badge\">{this.badge}</span>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}