@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-trend-chart/bh-trend-chart.js

@@ -0,0 +1,256 @@
+import { h, Host } from "@stencil/core";
+export class BhTrendChart {
+    /**
+     * The trend direction (affects color)
+     */
+    trend = 'positive';
+    /**
+     * Data points for the chart
+     */
+    data = [20, 45, 30, 60, 35, 70, 40];
+    /**
+     * Whether to animate the chart
+     */
+    animated = true;
+    /**
+     * Chart variant: line-only, fill-only, or line-fill
+     */
+    variant = 'line-only';
+    /**
+     * Width of the chart in pixels
+     */
+    width = 112;
+    /**
+     * Height of the chart in pixels
+     */
+    height = 56;
+    normalizeData() {
+        const maxValue = Math.max(...this.data);
+        const minValue = Math.min(...this.data);
+        const range = maxValue - minValue || 1;
+        return this.data.map((value, index) => ({
+            x: (index / (this.data.length - 1)) * this.width,
+            y: this.height - ((value - minValue) / range) * (this.height - 20) - 10,
+        }));
+    }
+    generatePath(points) {
+        if (points.length < 2)
+            return '';
+        let path = `M ${points[0].x} ${points[0].y}`;
+        for (let i = 1; i < points.length; i++) {
+            const prev = points[i - 1];
+            const curr = points[i];
+            const tension = 0.5;
+            const cp1x = prev.x + (curr.x - prev.x) * tension;
+            const cp1y = prev.y;
+            const cp2x = curr.x - (curr.x - prev.x) * tension;
+            const cp2y = curr.y;
+            path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${curr.x} ${curr.y}`;
+        }
+        return path;
+    }
+    generateBackgroundPath(points) {
+        if (points.length < 2)
+            return '';
+        let path = `M ${points[0].x} ${this.height}`;
+        path += ` L ${points[0].x} ${points[0].y}`;
+        for (let i = 1; i < points.length; i++) {
+            const prev = points[i - 1];
+            const curr = points[i];
+            const tension = 0.5;
+            const cp1x = prev.x + (curr.x - prev.x) * tension;
+            const cp1y = prev.y;
+            const cp2x = curr.x - (curr.x - prev.x) * tension;
+            const cp2y = curr.y;
+            path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${curr.x} ${curr.y}`;
+        }
+        path += ` L ${points[points.length - 1].x} ${this.height}`;
+        path += ' Z';
+        return path;
+    }
+    getStrokeColor() {
+        switch (this.trend) {
+            case 'positive':
+                return 'var(--color-success-500)';
+            case 'negative':
+                return 'var(--color-error-500)';
+            case 'neutral':
+                return 'var(--color-neutral-500)';
+            default:
+                return 'var(--color-neutral-500)';
+        }
+    }
+    getFillColor() {
+        switch (this.trend) {
+            case 'positive':
+                return 'var(--color-success-600)';
+            case 'negative':
+                return 'var(--color-error-600)';
+            case 'neutral':
+                return 'var(--color-neutral-600)';
+            default:
+                return 'var(--color-neutral-600)';
+        }
+    }
+    render() {
+        const points = this.normalizeData();
+        const pathData = this.generatePath(points);
+        const backgroundPath = this.variant !== 'line-only' ? this.generateBackgroundPath(points) : '';
+        const strokeColor = this.getStrokeColor();
+        const fillColor = this.getFillColor();
+        const gradientId = `gradient-${this.trend}`;
+        return (h(Host, { key: '0ce9235d0b67696eb5e5eb13bdfc80633e2f5a09' }, h("div", { key: 'f8142d9b08c84c330afc375c7dd870be7d561116', class: {
+                'trend-chart': true,
+                [`trend-chart-${this.trend}`]: true,
+                [`trend-chart-${this.variant}`]: true,
+                'trend-chart-animated': this.animated,
+            } }, h("svg", { key: '80ecc5b120ab8adeea6ad0f66c82d43bff7510ae', width: this.width, height: this.height, viewBox: `0 0 ${this.width} ${this.height}`, class: "chart-svg" }, h("defs", { key: 'e662d21fc9813679530c7ae4c533bcf79985fc32' }, h("linearGradient", { key: '4c5f68791672c1cc639db2fe1eff407ecdbc3019', id: gradientId, x1: "0%", y1: "0%", x2: "0%", y2: "100%" }, h("stop", { key: '15f6c5706518d1adf8e84f3c9736d9f37d1b0c3e', offset: "0%", "stop-color": fillColor, "stop-opacity": this.variant === 'fill-only' ? 0.4 : 0.2 }), h("stop", { key: '9b90e1919b241be8a5d6a160ce250cb205967d49', offset: "100%", "stop-color": fillColor, "stop-opacity": this.variant === 'fill-only' ? 0.1 : 0.05 }))), backgroundPath && this.variant !== 'line-only' && (h("path", { key: 'c27880c30f92abb5240c401b35e1af3b62039318', class: "chart-background", d: backgroundPath, fill: `url(#${gradientId})` })), pathData && this.variant !== 'fill-only' && (h("path", { key: '2f64a03e170a7a1f792fe835d2a870dd64905fd9', class: "chart-line", d: pathData, stroke: strokeColor, "stroke-width": "2", fill: "none" }))))));
+    }
+    static get is() { return "bh-trend-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-trend-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-trend-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "trend": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TrendDirection",
+                    "resolved": "\"negative\" | \"neutral\" | \"positive\"",
+                    "references": {
+                        "TrendDirection": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-trend-chart/bh-trend-chart.tsx",
+                            "id": "src/components/bh-trend-chart/bh-trend-chart.tsx::TrendDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The trend direction (affects color)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trend",
+                "defaultValue": "'positive'"
+            },
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Data points for the chart"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[20, 45, 30, 60, 35, 70, 40]"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to animate the chart"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animated",
+                "defaultValue": "true"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TrendVariant",
+                    "resolved": "\"fill-only\" | \"line-fill\" | \"line-only\"",
+                    "references": {
+                        "TrendVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-trend-chart/bh-trend-chart.tsx",
+                            "id": "src/components/bh-trend-chart/bh-trend-chart.tsx::TrendVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chart variant: line-only, fill-only, or line-fill"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'line-only'"
+            },
+            "width": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the chart in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "112"
+            },
+            "height": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the chart in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "56"
+            }
+        };
+    }
+}
+//# sourceMappingURL=bh-trend-chart.js.map

package/collection/components/bh-trend-chart/bh-trend-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-trend-chart.js","sourceRoot":"","sources":["../../../src/components/bh-trend-chart/bh-trend-chart.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type TrendDirection = 'positive' | 'negative' | 'neutral';\nexport type TrendVariant = 'line-only' | 'fill-only' | 'line-fill';\n\n@Component({\n  tag: 'bh-trend-chart',\n  styleUrl: 'bh-trend-chart.css',\n  shadow: true,\n})\nexport class BhTrendChart {\n  /**\n   * The trend direction (affects color)\n   */\n  @Prop() trend: TrendDirection = 'positive';\n\n  /**\n   * Data points for the chart\n   */\n  @Prop() data: number[] = [20, 45, 30, 60, 35, 70, 40];\n\n  /**\n   * Whether to animate the chart\n   */\n  @Prop() animated: boolean = true;\n\n  /**\n   * Chart variant: line-only, fill-only, or line-fill\n   */\n  @Prop() variant: TrendVariant = 'line-only';\n\n  /**\n   * Width of the chart in pixels\n   */\n  @Prop() width: number = 112;\n\n  /**\n   * Height of the chart in pixels\n   */\n  @Prop() height: number = 56;\n\n  private normalizeData(): Array<{ x: number; y: number }> {\n    const maxValue = Math.max(...this.data);\n    const minValue = Math.min(...this.data);\n    const range = maxValue - minValue || 1;\n\n    return this.data.map((value, index) => ({\n      x: (index / (this.data.length - 1)) * this.width,\n      y: this.height - ((value - minValue) / range) * (this.height - 20) - 10,\n    }));\n  }\n\n  private generatePath(points: Array<{ x: number; y: number }>): string {\n    if (points.length < 2) return '';\n\n    let path = `M ${points[0].x} ${points[0].y}`;\n\n    for (let i = 1; i < points.length; i++) {\n      const prev = points[i - 1];\n      const curr = points[i];\n      const tension = 0.5;\n\n      const cp1x = prev.x + (curr.x - prev.x) * tension;\n      const cp1y = prev.y;\n      const cp2x = curr.x - (curr.x - prev.x) * tension;\n      const cp2y = curr.y;\n\n      path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${curr.x} ${curr.y}`;\n    }\n\n    return path;\n  }\n\n  private generateBackgroundPath(points: Array<{ x: number; y: number }>): string {\n    if (points.length < 2) return '';\n\n    let path = `M ${points[0].x} ${this.height}`;\n    path += ` L ${points[0].x} ${points[0].y}`;\n\n    for (let i = 1; i < points.length; i++) {\n      const prev = points[i - 1];\n      const curr = points[i];\n      const tension = 0.5;\n\n      const cp1x = prev.x + (curr.x - prev.x) * tension;\n      const cp1y = prev.y;\n      const cp2x = curr.x - (curr.x - prev.x) * tension;\n      const cp2y = curr.y;\n      path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${curr.x} ${curr.y}`;\n    }\n\n    path += ` L ${points[points.length - 1].x} ${this.height}`;\n    path += ' Z';\n\n    return path;\n  }\n\n  private getStrokeColor(): string {\n    switch (this.trend) {\n      case 'positive':\n        return 'var(--color-success-500)';\n      case 'negative':\n        return 'var(--color-error-500)';\n      case 'neutral':\n        return 'var(--color-neutral-500)';\n      default:\n        return 'var(--color-neutral-500)';\n    }\n  }\n\n  private getFillColor(): string {\n    switch (this.trend) {\n      case 'positive':\n        return 'var(--color-success-600)';\n      case 'negative':\n        return 'var(--color-error-600)';\n      case 'neutral':\n        return 'var(--color-neutral-600)';\n      default:\n        return 'var(--color-neutral-600)';\n    }\n  }\n\n  render() {\n    const points = this.normalizeData();\n    const pathData = this.generatePath(points);\n    const backgroundPath = this.variant !== 'line-only' ? this.generateBackgroundPath(points) : '';\n    const strokeColor = this.getStrokeColor();\n    const fillColor = this.getFillColor();\n    const gradientId = `gradient-${this.trend}`;\n\n    return (\n      <Host>\n        <div\n          class={{\n            'trend-chart': true,\n            [`trend-chart-${this.trend}`]: true,\n            [`trend-chart-${this.variant}`]: true,\n            'trend-chart-animated': this.animated,\n          }}\n        >\n          <svg\n            width={this.width}\n            height={this.height}\n            viewBox={`0 0 ${this.width} ${this.height}`}\n            class=\"chart-svg\"\n          >\n            <defs>\n              <linearGradient id={gradientId} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n                <stop\n                  offset=\"0%\"\n                  stop-color={fillColor}\n                  stop-opacity={this.variant === 'fill-only' ? 0.4 : 0.2}\n                />\n                <stop\n                  offset=\"100%\"\n                  stop-color={fillColor}\n                  stop-opacity={this.variant === 'fill-only' ? 0.1 : 0.05}\n                />\n              </linearGradient>\n            </defs>\n\n            {/* Background fill (for fill-only and line-fill variants) */}\n            {backgroundPath && this.variant !== 'line-only' && (\n              <path\n                class=\"chart-background\"\n                d={backgroundPath}\n                fill={`url(#${gradientId})`}\n              />\n            )}\n\n            {/* Stroke line (for line-only and line-fill variants) */}\n            {pathData && this.variant !== 'fill-only' && (\n              <path\n                class=\"chart-line\"\n                d={pathData}\n                stroke={strokeColor}\n                stroke-width=\"2\"\n                fill=\"none\"\n              />\n            )}\n          </svg>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/collection/index.js

@@ -0,0 +1,22 @@
+// Button
+export * from './components/bh-button/bh-button';
+// Badge
+export * from './components/bh-badge/bh-badge';
+// Label
+export * from './components/bh-label/bh-label';
+// Modal
+export * from './components/bh-modal/bh-modal';
+// Avatar
+export * from './components/bh-avatar/bh-avatar';
+// Toggle
+export * from './components/bh-toggle/bh-toggle';
+// Card
+export * from './components/bh-card/bh-card';
+export * from './components/bh-card-header/bh-card-header';
+export * from './components/bh-card-footer/bh-card-footer';
+// Checkbox Group
+export * from './components/bh-checkbox-group/bh-checkbox-group';
+export * from './components/bh-checkbox-group-item/bh-checkbox-group-item';
+// Data Grid
+export * from './components/bh-data-grid/bh-data-grid';
+//# sourceMappingURL=index.js.map

package/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,cAAc,kCAAkC,CAAC;AAEjD,QAAQ;AACR,cAAc,gCAAgC,CAAC;AAE/C,QAAQ;AACR,cAAc,gCAAgC,CAAC;AAE/C,QAAQ;AACR,cAAc,gCAAgC,CAAC;AAE/C,SAAS;AACT,cAAc,kCAAkC,CAAC;AAEjD,SAAS;AACT,cAAc,kCAAkC,CAAC;AAEjD,OAAO;AACP,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,4CAA4C,CAAC;AAE3D,iBAAiB;AACjB,cAAc,kDAAkD,CAAC;AACjE,cAAc,4DAA4D,CAAC;AAE3E,YAAY;AACZ,cAAc,wCAAwC,CAAC","sourcesContent":["// Button\nexport * from './components/bh-button/bh-button';\n\n// Badge\nexport * from './components/bh-badge/bh-badge';\n\n// Label\nexport * from './components/bh-label/bh-label';\n\n// Modal\nexport * from './components/bh-modal/bh-modal';\n\n// Avatar\nexport * from './components/bh-avatar/bh-avatar';\n\n// Toggle\nexport * from './components/bh-toggle/bh-toggle';\n\n// Card\nexport * from './components/bh-card/bh-card';\nexport * from './components/bh-card-header/bh-card-header';\nexport * from './components/bh-card-footer/bh-card-footer';\n\n// Checkbox Group\nexport * from './components/bh-checkbox-group/bh-checkbox-group';\nexport * from './components/bh-checkbox-group-item/bh-checkbox-group-item';\n\n// Data Grid\nexport * from './components/bh-data-grid/bh-data-grid';\n"]}

package/collection/utils/form.js

@@ -0,0 +1,68 @@
+/**
+ * Form utilities for form-associated custom elements
+ *
+ * These utilities help Stencil components participate in native HTML forms
+ * using the ElementInternals API (formAssociated: true).
+ */
+/**
+ * Sync a text/number value to the form
+ * Call this in handleInput and componentDidLoad
+ */
+export function syncFormValue(component) {
+    if (!component.internals?.setFormValue || !component.name)
+        return;
+    const value = component.value;
+    if (value === null || value === undefined || value === '') {
+        component.internals.setFormValue(null);
+    }
+    else {
+        component.internals.setFormValue(String(value));
+    }
+}
+/**
+ * Sync a checkable component's value to the form
+ * For checkbox, toggle, radio - value is only submitted when checked
+ */
+export function syncCheckableFormValue(internals, name, checked, value = 'on') {
+    if (!internals?.setFormValue || !name)
+        return;
+    internals.setFormValue(checked ? value : null);
+}
+/**
+ * Update validity state based on a native input element
+ * This delegates to the browser's built-in validation
+ */
+export function updateValidity(internals, inputEl, customMessage) {
+    if (!internals?.setValidity)
+        return;
+    if (inputEl) {
+        internals.setValidity(inputEl.validity, customMessage || inputEl.validationMessage, inputEl);
+    }
+}
+/**
+ * Set custom validity for components without native inputs
+ */
+export function setCustomValidity(internals, isValid, message = '') {
+    if (!internals?.setValidity)
+        return;
+    if (isValid) {
+        internals.setValidity({});
+    }
+    else {
+        internals.setValidity({ customError: true }, message);
+    }
+}
+/**
+ * Validate required state for checkable components (checkbox, toggle)
+ */
+export function validateRequired(internals, required, checked, message = 'Please check this box if you want to proceed.') {
+    if (!internals?.setValidity)
+        return;
+    if (required && !checked) {
+        internals.setValidity({ valueMissing: true }, message);
+    }
+    else {
+        internals.setValidity({});
+    }
+}
+//# sourceMappingURL=form.js.map

package/collection/utils/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../src/utils/form.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAaH;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,SAAwB;IACpD,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,YAAY,IAAI,CAAC,SAAS,CAAC,IAAI;QAAE,OAAO;IAElE,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC;IAC9B,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;QAC1D,SAAS,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC;SAAM,CAAC;QACN,SAAS,CAAC,SAAS,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAClD,CAAC;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,sBAAsB,CACpC,SAAuC,EACvC,IAAY,EACZ,OAAgB,EAChB,QAAgB,IAAI;IAEpB,IAAI,CAAC,SAAS,EAAE,YAAY,IAAI,CAAC,IAAI;QAAE,OAAO;IAC9C,SAAS,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;AACjD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,cAAc,CAC5B,SAAuC,EACvC,OAAkE,EAClE,aAAsB;IAEtB,IAAI,CAAC,SAAS,EAAE,WAAW;QAAE,OAAO;IAEpC,IAAI,OAAO,EAAE,CAAC;QACZ,SAAS,CAAC,WAAW,CACnB,OAAO,CAAC,QAAQ,EAChB,aAAa,IAAI,OAAO,CAAC,iBAAiB,EAC1C,OAAO,CACR,CAAC;IACJ,CAAC;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAC/B,SAAuC,EACvC,OAAgB,EAChB,UAAkB,EAAE;IAEpB,IAAI,CAAC,SAAS,EAAE,WAAW;QAAE,OAAO;IAEpC,IAAI,OAAO,EAAE,CAAC;QACZ,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAC5B,CAAC;SAAM,CAAC;QACN,SAAS,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,OAAO,CAAC,CAAC;IACxD,CAAC;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAC9B,SAAuC,EACvC,QAAiB,EACjB,OAAgB,EAChB,UAAkB,+CAA+C;IAEjE,IAAI,CAAC,SAAS,EAAE,WAAW;QAAE,OAAO;IAEpC,IAAI,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;QACzB,SAAS,CAAC,WAAW,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,OAAO,CAAC,CAAC;IACzD,CAAC;SAAM,CAAC;QACN,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAC5B,CAAC;AACH,CAAC","sourcesContent":["/**\n * Form utilities for form-associated custom elements\n *\n * These utilities help Stencil components participate in native HTML forms\n * using the ElementInternals API (formAssociated: true).\n */\n\n/**\n * Interface for text-based form components (input, textarea)\n */\nexport interface FormComponent {\n  internals: ElementInternals;\n  name: string;\n  value: string | number | null;\n  disabled: boolean;\n  required?: boolean;\n}\n\n/**\n * Sync a text/number value to the form\n * Call this in handleInput and componentDidLoad\n */\nexport function syncFormValue(component: FormComponent): void {\n  if (!component.internals?.setFormValue || !component.name) return;\n\n  const value = component.value;\n  if (value === null || value === undefined || value === '') {\n    component.internals.setFormValue(null);\n  } else {\n    component.internals.setFormValue(String(value));\n  }\n}\n\n/**\n * Sync a checkable component's value to the form\n * For checkbox, toggle, radio - value is only submitted when checked\n */\nexport function syncCheckableFormValue(\n  internals: ElementInternals | undefined,\n  name: string,\n  checked: boolean,\n  value: string = 'on'\n): void {\n  if (!internals?.setFormValue || !name) return;\n  internals.setFormValue(checked ? value : null);\n}\n\n/**\n * Update validity state based on a native input element\n * This delegates to the browser's built-in validation\n */\nexport function updateValidity(\n  internals: ElementInternals | undefined,\n  inputEl: HTMLInputElement | HTMLTextAreaElement | null | undefined,\n  customMessage?: string\n): void {\n  if (!internals?.setValidity) return;\n\n  if (inputEl) {\n    internals.setValidity(\n      inputEl.validity,\n      customMessage || inputEl.validationMessage,\n      inputEl\n    );\n  }\n}\n\n/**\n * Set custom validity for components without native inputs\n */\nexport function setCustomValidity(\n  internals: ElementInternals | undefined,\n  isValid: boolean,\n  message: string = ''\n): void {\n  if (!internals?.setValidity) return;\n\n  if (isValid) {\n    internals.setValidity({});\n  } else {\n    internals.setValidity({ customError: true }, message);\n  }\n}\n\n/**\n * Validate required state for checkable components (checkbox, toggle)\n */\nexport function validateRequired(\n  internals: ElementInternals | undefined,\n  required: boolean,\n  checked: boolean,\n  message: string = 'Please check this box if you want to proceed.'\n): void {\n  if (!internals?.setValidity) return;\n\n  if (required && !checked) {\n    internals.setValidity({ valueMissing: true }, message);\n  } else {\n    internals.setValidity({});\n  }\n}\n"]}

package/components/bh-accordion-item.d.ts

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

package/components/bh-accordion-item.js

@@ -0,0 +1,111 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-9a7sQzad.js';
+
+const bhAccordionItemCss = ":host{display:flex;flex-direction:column;width:100%;background-color:var(--color-white)}.accordion-header{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg);padding:var(--spacing-lg) var(--spacing-2xl);cursor:pointer;background-color:var(--color-white);border:none;border-bottom:1px solid var(--color-neutral-100);transition:background-color 0.15s ease}.accordion-header:hover{background-color:var(--color-neutral-25)}.accordion-header:focus{outline:none}.accordion-header:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:-2px}.accordion-header-content{display:flex;flex-direction:column;gap:var(--spacing-xxs);flex:1;min-width:0}.accordion-title{font-family:var(--font-family-body);font-size:var(--font-size-text-md);font-weight:var(--font-weight-semibold);line-height:var(--line-height-text-md);color:var(--color-neutral-900)}.accordion-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:24px;color:var(--color-neutral-500);transition:transform 0.2s ease;flex-shrink:0}.accordion-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.2s ease;overflow:hidden}.accordion-content-inner{min-height:0;overflow:hidden}:host(.accordion-item-expanded) .accordion-header{border-bottom-color:transparent}:host(.accordion-item-expanded) .accordion-content{grid-template-rows:1fr}:host(.accordion-item-expanded) .accordion-content-inner{padding:var(--spacing-lg) var(--spacing-2xl) var(--spacing-2xl);border-bottom:1px solid var(--color-neutral-100)}:host(.accordion-item-disabled){opacity:0.5;pointer-events:none}:host(.accordion-item-disabled) .accordion-header{cursor:not-allowed}:host(.accordion-item-animating) .accordion-content-inner{overflow:hidden}";
+
+const BhAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class BhAccordionItem extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhAccordionToggle = createEvent(this, "bhAccordionToggle");
+        this.bhAccordionClick = createEvent(this, "bhAccordionClick");
+    }
+    /**
+     * Unique identifier for this accordion item
+     */
+    value;
+    /**
+     * The header/title text for the accordion item
+     */
+    header;
+    /**
+     * Whether this accordion item is currently expanded
+     */
+    expanded = false;
+    /**
+     * Whether this accordion item is disabled
+     */
+    disabled = false;
+    /**
+     * Internal state for animation
+     */
+    isAnimating = false;
+    /**
+     * Emitted when the accordion item is toggled
+     */
+    bhAccordionToggle;
+    /**
+     * Emitted when the accordion header is clicked
+     */
+    bhAccordionClick;
+    handleExpandedChange() {
+        this.isAnimating = true;
+        setTimeout(() => {
+            this.isAnimating = false;
+        }, 200);
+    }
+    handleHeaderClick = () => {
+        if (this.disabled)
+            return;
+        this.expanded = !this.expanded;
+        this.bhAccordionClick.emit(this.value);
+        this.bhAccordionToggle.emit({
+            value: this.value,
+            expanded: this.expanded,
+        });
+    };
+    handleKeyDown = (event) => {
+        if (this.disabled)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleHeaderClick();
+        }
+    };
+    render() {
+        const hostClasses = {
+            'accordion-item': true,
+            'accordion-item-expanded': this.expanded,
+            'accordion-item-disabled': this.disabled,
+            'accordion-item-animating': this.isAnimating,
+        };
+        const iconName = this.expanded ? 'expand_less' : 'expand_more';
+        return (h(Host, { key: 'b2670121b2a9706343aa29a5cf1ac1d033ece042', class: hostClasses }, h("div", { key: 'e18a7443b248bbba0706a39f5a65e0c804e5bae5', class: "accordion-header", part: "header", role: "button", tabindex: this.disabled ? -1 : 0, "aria-expanded": this.expanded ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-controls": `content-${this.value}`, onClick: this.handleHeaderClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'a5a3be10f39bd63eb31d7b6a90b40f0714866ae5', class: "accordion-header-content" }, h("span", { key: '5d3ff7b6e69fab0e3658873dec49793972f2c0d5', class: "accordion-title", part: "title" }, this.header)), h("span", { key: 'e18cfab4d73e6d41d40c275888a584b1bb117d23', class: "accordion-icon material-symbols-outlined", part: "icon" }, iconName)), h("div", { key: 'd96ba43717314f6787f513f664b282391c4f8cf0', id: `content-${this.value}`, class: "accordion-content", part: "content", role: "region", "aria-labelledby": `header-${this.value}`, "aria-hidden": !this.expanded ? 'true' : 'false' }, h("div", { key: 'eac3f014aeccccd20ddd4f2c3b7ee98636a85a4d', class: "accordion-content-inner" }, h("slot", { key: '29ac3e0932ee7854678637121e395b2be48949a0' })))));
+    }
+    static get watchers() { return {
+        "expanded": ["handleExpandedChange"]
+    }; }
+    static get style() { return bhAccordionItemCss; }
+}, [769, "bh-accordion-item", {
+        "value": [1],
+        "header": [1],
+        "expanded": [1540],
+        "disabled": [4],
+        "isAnimating": [32]
+    }, undefined, {
+        "expanded": ["handleExpandedChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-accordion-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-accordion-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhAccordionItem$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BhAccordionItem = BhAccordionItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BhAccordionItem, defineCustomElement };
+//# sourceMappingURL=bh-accordion-item.js.map
+
+//# sourceMappingURL=bh-accordion-item.js.map

package/components/bh-accordion-item.js.map

@@ -0,0 +1 @@
+{"file":"bh-accordion-item.js","mappings":"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","names":["BhAccordionItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-accordion-item/bh-accordion-item.css?tag=bh-accordion-item&encapsulation=shadow","src/components/bh-accordion-item/bh-accordion-item.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-ACCORDION-ITEM COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  background-color: var(--color-white);\n}\n\n/* Header */\n.accordion-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--spacing-lg);\n  padding: var(--spacing-lg) var(--spacing-2xl);\n  cursor: pointer;\n  background-color: var(--color-white);\n  border: none;\n  border-bottom: 1px solid var(--color-neutral-100);\n  transition: background-color 0.15s ease;\n}\n\n.accordion-header:hover {\n  background-color: var(--color-neutral-25);\n}\n\n.accordion-header:focus {\n  outline: none;\n}\n\n.accordion-header:focus-visible {\n  outline: 2px solid var(--color-brand-500);\n  outline-offset: -2px;\n}\n\n/* Header Content */\n.accordion-header-content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xxs);\n  flex: 1;\n  min-width: 0;\n}\n\n/* Title */\n.accordion-title {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-text-md);\n  font-weight: var(--font-weight-semibold);\n  line-height: var(--line-height-text-md);\n  color: var(--color-neutral-900);\n}\n\n/* Icon */\n.accordion-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  font-size: 24px;\n  color: var(--color-neutral-500);\n  transition: transform 0.2s ease;\n  flex-shrink: 0;\n}\n\n/* Content */\n.accordion-content {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 0.2s ease;\n  overflow: hidden;\n}\n\n.accordion-content-inner {\n  min-height: 0;\n  overflow: hidden;\n}\n\n/* ==========================================================================\n   EXPANDED STATE\n   ========================================================================== */\n\n:host(.accordion-item-expanded) .accordion-header {\n  border-bottom-color: transparent;\n}\n\n:host(.accordion-item-expanded) .accordion-content {\n  grid-template-rows: 1fr;\n}\n\n:host(.accordion-item-expanded) .accordion-content-inner {\n  padding: var(--spacing-lg) var(--spacing-2xl) var(--spacing-2xl);\n  border-bottom: 1px solid var(--color-neutral-100);\n}\n\n/* ==========================================================================\n   DISABLED STATE\n   ========================================================================== */\n\n:host(.accordion-item-disabled) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n:host(.accordion-item-disabled) .accordion-header {\n  cursor: not-allowed;\n}\n\n/* ==========================================================================\n   ANIMATION STATE\n   ========================================================================== */\n\n:host(.accordion-item-animating) .accordion-content-inner {\n  overflow: hidden;\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Watch,\n} from '@stencil/core';\n\n/**\n * @slot - Content displayed when the accordion item is expanded\n */\n@Component({\n  tag: 'bh-accordion-item',\n  styleUrl: 'bh-accordion-item.css',\n  shadow: true,\n})\nexport class BhAccordionItem {\n  /**\n   * Unique identifier for this accordion item\n   */\n  @Prop() value!: string;\n\n  /**\n   * The header/title text for the accordion item\n   */\n  @Prop() header!: string;\n\n  /**\n   * Whether this accordion item is currently expanded\n   */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  /**\n   * Whether this accordion item is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Internal state for animation\n   */\n  @State() isAnimating: boolean = false;\n\n  /**\n   * Emitted when the accordion item is toggled\n   */\n  @Event({ bubbles: true, composed: true })\n  bhAccordionToggle!: EventEmitter<{ value: string; expanded: boolean }>;\n\n  /**\n   * Emitted when the accordion header is clicked\n   */\n  @Event({ bubbles: true, composed: true })\n  bhAccordionClick!: EventEmitter<string>;\n\n  @Watch('expanded')\n  handleExpandedChange(): void {\n    this.isAnimating = true;\n    setTimeout(() => {\n      this.isAnimating = false;\n    }, 200);\n  }\n\n  private handleHeaderClick = (): void => {\n    if (this.disabled) return;\n\n    this.expanded = !this.expanded;\n    this.bhAccordionClick.emit(this.value);\n    this.bhAccordionToggle.emit({\n      value: this.value,\n      expanded: this.expanded,\n    });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (this.disabled) return;\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.handleHeaderClick();\n    }\n  };\n\n  render() {\n    const hostClasses = {\n      'accordion-item': true,\n      'accordion-item-expanded': this.expanded,\n      'accordion-item-disabled': this.disabled,\n      'accordion-item-animating': this.isAnimating,\n    };\n\n    const iconName = this.expanded ? 'expand_less' : 'expand_more';\n\n    return (\n      <Host class={hostClasses}>\n        <div\n          class=\"accordion-header\"\n          part=\"header\"\n          role=\"button\"\n          tabindex={this.disabled ? -1 : 0}\n          aria-expanded={this.expanded ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-controls={`content-${this.value}`}\n          onClick={this.handleHeaderClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class=\"accordion-header-content\">\n            <span class=\"accordion-title\" part=\"title\">\n              {this.header}\n            </span>\n          </div>\n          <span class=\"accordion-icon material-symbols-outlined\" part=\"icon\">\n            {iconName}\n          </span>\n        </div>\n        <div\n          id={`content-${this.value}`}\n          class=\"accordion-content\"\n          part=\"content\"\n          role=\"region\"\n          aria-labelledby={`header-${this.value}`}\n          aria-hidden={!this.expanded ? 'true' : 'false'}\n        >\n          <div class=\"accordion-content-inner\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/bh-accordion.d.ts

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