@sekiui/elements 0.0.65 → 0.0.70

package/dist/collection/components/calendar/seki-calendar.js

@@ -225,7 +225,7 @@ export class SekiCalendar {
                     "references": {
                         "CalendarMode": {
                             "location": "local",
-                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/calendar/seki-calendar.tsx",
+                            "path": "/home/rockia/seki-actions-runner/_work/seki-ui/seki-ui/src/components/calendar/seki-calendar.tsx",
                             "id": "src/components/calendar/seki-calendar.tsx::CalendarMode"
                         }
                     }
@@ -530,7 +530,7 @@ export class SekiCalendar {
                     "references": {
                         "DateRange": {
                             "location": "local",
-                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/calendar/seki-calendar.tsx",
+                            "path": "/home/rockia/seki-actions-runner/_work/seki-ui/seki-ui/src/components/calendar/seki-calendar.tsx",
                             "id": "src/components/calendar/seki-calendar.tsx::DateRange"
                         }
                     }

package/dist/collection/components/card/seki-card-action.js

@@ -10,7 +10,7 @@ import { h } from "@stencil/core";
  */
 export class CardAction {
     render() {
-        return (h("div", { key: '01343b8deb203ec5172610a73f29e9fe4d20ceb2', class: `card-action ${this.class || ''}`, role: "toolbar" }, h("slot", { key: '6f5728fa2ff08aefd1d3634dead19c33848fbd0e' })));
+        return (h("div", { key: '0d986ea3971eaaecb9efe887ac087a8743f3d472', class: `card-action ${this.class || ''}`, role: "toolbar" }, h("slot", { key: 'd1c2633a17f262627fa9983b9e4cf50dc8efdbf9' })));
     }
     static get is() { return "seki-card-action"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/seki-card-content.js

@@ -11,7 +11,7 @@ import { h } from "@stencil/core";
  */
 export class CardContent {
     render() {
-        return (h("div", { key: '1d152f71dc2cf23e615ca3d10a81ffa69f214652', class: `card-content ${this.class || ''}` }, h("slot", { key: '75e7cbf018c82809d23ad4095546af2cd5a01823' })));
+        return (h("div", { key: 'fbe3655998d768ba076b14cc5295fcb02565736e', class: `card-content ${this.class || ''}` }, h("slot", { key: 'f03a437d4e24d8f0e8a7df37f125977226e36c38' })));
     }
     static get is() { return "seki-card-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/seki-card-description.js

@@ -8,7 +8,7 @@ import { h } from "@stencil/core";
  */
 export class CardDescription {
     render() {
-        return (h("p", { key: 'ee8b90fa83c09c1170e8e983f94ddbb249c0cefa', class: `card-description ${this.class || ''}` }, h("slot", { key: 'b67b1c43b769b70b23ea883d7b839f9935ed58ab' })));
+        return (h("p", { key: 'da5e20791e3ff7f8472482988fb33d622a4c96b1', class: `card-description ${this.class || ''}` }, h("slot", { key: '4369629e345d8cc5bb17166d6877dba421522e4d' })));
     }
     static get is() { return "seki-card-description"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/seki-card-footer.js

@@ -18,7 +18,7 @@ export class CardFooter {
         this.alignment = 'flex-start';
     }
     render() {
-        return (h("footer", { key: '6b19ac36822ab00c916557f798683526518eb009', class: `card-footer ${this.class || ''}`, style: { justifyContent: this.alignment } }, h("slot", { key: '10e4ad24216317524cfae114fb1e9c05f90842c3' })));
+        return (h("footer", { key: 'd23aa5f3f2e5b924ad2c91b6ba8c61adcff9535e', class: `card-footer ${this.class || ''}`, style: { justifyContent: this.alignment } }, h("slot", { key: 'fc9ea2a694839af39757aeb059b289db3e50ea8c' })));
     }
     static get is() { return "seki-card-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/seki-card-header.js

@@ -14,7 +14,7 @@ import { h } from "@stencil/core";
  */
 export class CardHeader {
     render() {
-        return (h("header", { key: 'e617d4bd27f67bc41edb9c2705c956e314048874', class: `card-header ${this.class || ''}` }, h("slot", { key: '986906e925a6d1b735971fdb07c718693504ae65' })));
+        return (h("header", { key: '65aa324de8feee180e8c1606207a7fab830baa66', class: `card-header ${this.class || ''}` }, h("slot", { key: '54cf81a25ac43193eab8faee377de9a2855ef403' })));
     }
     static get is() { return "seki-card-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/seki-card.js

@@ -13,7 +13,7 @@ import { h } from "@stencil/core";
  */
 export class Card {
     render() {
-        return (h("section", { key: 'fb7f38217354b898038ef588476e8163f378f4c1', class: this.class }, h("slot", { key: 'a875303ebc48eaa0f8bc5bc21d92aa32ef3a589f' })));
+        return (h("section", { key: '9a7d21c871a9ba7b4fe00e8a5fa1d3aa27368352', class: this.class }, h("slot", { key: 'cd2b315f1be88b8c22062178f975bbd443514735' })));
     }
     static get is() { return "seki-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/carousel/seki-carousel-content.js

@@ -7,7 +7,7 @@ import { h, Host } from "@stencil/core";
  */
 export class SekiCarouselContent {
     render() {
-        return (h(Host, { key: 'e8ba3c9a4ef861336d66954dbc13a0250520c590', class: "carousel-content-host" }, h("div", { key: '2e0520a2e279509d3f5ae38745cc41df4cf5b02f', class: "carousel-content" }, h("slot", { key: 'a43f5a1ea69ce53f4a9cc18ac9f0a7dbc1268399' }))));
+        return (h(Host, { key: '858ff1adcebe01d43ddeea8de7e7213caeebfc79', class: "carousel-content-host" }, h("div", { key: '98971216ed4496a92dd8e712f989d692f52f1b42', class: "carousel-content" }, h("slot", { key: 'c24e17ae54bb609ed8969d3ad3d3fd8ffc37a4b4' }))));
     }
     static get is() { return "seki-carousel-content"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/carousel/seki-carousel-dots.js

@@ -83,7 +83,7 @@ export class SekiCarouselDots {
     }
     render() {
         const dots = Array.from({ length: this.scrollSnapCount }, (_, i) => i);
-        return (h(Host, { key: '94362738e93936733be8af0e087772cfeea490f1', class: "carousel-dots" }, h("div", { key: '0b69b089634ee151104b1586bd5ed50b4b56b981', class: "carousel-dots__container", role: "tablist", "aria-label": "Carousel pagination" }, dots.map((index) => (h("button", { key: index, type: "button", class: {
+        return (h(Host, { key: 'ad29bcb018e0c950fba88fa069089dbedf68f415', class: "carousel-dots" }, h("div", { key: 'e8bea3f10c6f1ac3e4d8c66aba3772775511a654', class: "carousel-dots__container", role: "tablist", "aria-label": "Carousel pagination" }, dots.map((index) => (h("button", { key: index, type: "button", class: {
                 'carousel-dots__dot': true,
                 'carousel-dots__dot--active': index === this.selectedIndex,
             }, role: "tab", "aria-selected": index === this.selectedIndex ? 'true' : 'false', "aria-label": `Go to slide ${index + 1}`, tabindex: index === this.selectedIndex ? '0' : '-1', onClick: () => this.handleDotClick(index), onKeyDown: (e) => this.handleKeyDown(e, index) }, h("span", { class: "carousel-dots__dot-inner" })))))));

package/dist/collection/components/carousel/seki-carousel-item.js

@@ -13,7 +13,7 @@ export class SekiCarouselItem {
         this.basis = '100%';
     }
     render() {
-        return (h(Host, { key: '54a39ec4d98934294fe9351d1f7ff5a05fe6cd13', class: "carousel-item", style: { flexBasis: this.basis }, role: "group", "aria-roledescription": "slide" }, h("slot", { key: 'f3bad935c7602fd9f6e5fb1180dd4a72751402f4' })));
+        return (h(Host, { key: '03bfc0370e5f2d306c6d6cdc38b414686cd791f1', class: "carousel-item", style: { flexBasis: this.basis }, role: "group", "aria-roledescription": "slide" }, h("slot", { key: '2a5b0bc4bbe830a098e3cd33065865a7fe0ecf6a' })));
     }
     static get is() { return "seki-carousel-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/carousel/seki-carousel-next.js

@@ -49,7 +49,7 @@ export class SekiCarouselNext {
         this.disabled = !context.canScrollNext;
     }
     render() {
-        return (h(Host, { key: 'ba14cb410b0c92db37ba22aac1cd06b9c2988170', class: { 'carousel-nav': true, 'carousel-nav--next': true } }, h("button", { key: '7bd007f22cb950d918f96736d70f94eb7a6fc1de', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Next slide", onClick: this.handleClick }, h("svg", { key: '2e3b6fff2abff1f2533c4bb048c79bbeb89e5b3d', class: "carousel-nav__icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'fabd3f3fa329abe2f3dd8b3b3c30a2766ade7870', points: "9 18 15 12 9 6" })))));
+        return (h(Host, { key: '27b6f6bdd8902959fb1a1d4906466cbf783a959c', class: { 'carousel-nav': true, 'carousel-nav--next': true } }, h("button", { key: 'b81fc359c344f394eb00b38a5228d28d8dfebd83', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Next slide", onClick: this.handleClick }, h("svg", { key: '2c9f62c7860663e64c9cc2afcfb39b7be1d1f01d', class: "carousel-nav__icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '0fce24db47046b22678bf0432c0843772e82e837', points: "9 18 15 12 9 6" })))));
     }
     static get is() { return "seki-carousel-next"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/carousel/seki-carousel-previous.js

@@ -49,7 +49,7 @@ export class SekiCarouselPrevious {
         this.disabled = !context.canScrollPrev;
     }
     render() {
-        return (h(Host, { key: 'f06ada05f7248ea39e14b693d0cde6ba45321521', class: { 'carousel-nav': true, 'carousel-nav--prev': true } }, h("button", { key: '0f47c32406ca271f3cf2dfaa6ebe36877dfcb6dd', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Previous slide", onClick: this.handleClick }, h("svg", { key: '521f8ae84fbeb7ad17968ed0c8f444c9ec911c95', class: "carousel-nav__icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'fe8503accd343f182270b1e823722763eaf5fa13', points: "15 18 9 12 15 6" })))));
+        return (h(Host, { key: 'da4b0ea3b667d7d5b69b780346babf9f13825e8e', class: { 'carousel-nav': true, 'carousel-nav--prev': true } }, h("button", { key: 'f231ba294276e8428e8a68ebd8ab6784f0bee91b', type: "button", class: "carousel-nav__button", disabled: this.disabled, "aria-label": "Previous slide", onClick: this.handleClick }, h("svg", { key: 'bdca569fa954522d34dafed7010866167b6d6563', class: "carousel-nav__icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '109cbaaa76454002037637ab0a041e626650ee73', points: "15 18 9 12 15 6" })))));
     }
     static get is() { return "seki-carousel-previous"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/carousel/seki-carousel.js

@@ -541,7 +541,7 @@ export class SekiCarousel {
                         },
                         "CarouselContext": {
                             "location": "local",
-                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/carousel/seki-carousel.tsx",
+                            "path": "/home/rockia/seki-actions-runner/_work/seki-ui/seki-ui/src/components/carousel/seki-carousel.tsx",
                             "id": "src/components/carousel/seki-carousel.tsx::CarouselContext"
                         }
                     },

package/dist/collection/components/chart/chart-config.js

@@ -0,0 +1,77 @@
+export function getDefaultOptions(type, gridColor, textColor, backgroundColor) {
+    const baseOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: true,
+                position: 'top',
+                labels: {
+                    color: textColor,
+                    font: {
+                        family: 'var(--seki-font-sans, system-ui)',
+                        size: 12,
+                    },
+                    usePointStyle: true,
+                    padding: 16,
+                },
+            },
+            tooltip: {
+                enabled: true,
+                backgroundColor: backgroundColor,
+                titleColor: textColor,
+                bodyColor: textColor,
+                borderColor: gridColor,
+                borderWidth: 1,
+                padding: 12,
+                cornerRadius: 8,
+            },
+        },
+    };
+    // Add scales for line and bar charts
+    if (type === 'line' || type === 'bar' || type === 'area') {
+        return Object.assign(Object.assign({}, baseOptions), { scales: {
+                x: {
+                    grid: {
+                        color: gridColor,
+                    },
+                    ticks: {
+                        color: textColor,
+                    },
+                },
+                y: {
+                    grid: {
+                        color: gridColor,
+                    },
+                    ticks: {
+                        color: textColor,
+                    },
+                },
+            } });
+    }
+    return baseOptions;
+}
+export function deepMerge(target, source) {
+    const output = Object.assign({}, target);
+    if (isObject(target) && isObject(source)) {
+        Object.keys(source).forEach((key) => {
+            const sourceValue = source[key];
+            const targetValue = target[key];
+            if (isObject(sourceValue)) {
+                if (!(key in target)) {
+                    output[key] = sourceValue;
+                }
+                else {
+                    output[key] = deepMerge(targetValue, sourceValue);
+                }
+            }
+            else {
+                output[key] = sourceValue;
+            }
+        });
+    }
+    return output;
+}
+function isObject(item) {
+    return item !== null && typeof item === 'object' && !Array.isArray(item);
+}

package/dist/collection/components/chart/chart-theme.js

@@ -0,0 +1,31 @@
+export function getChartColors(element) {
+    const computedStyle = getComputedStyle(element);
+    return [
+        computedStyle.getPropertyValue('--seki-chart-color-1').trim() || '#3b82f6',
+        computedStyle.getPropertyValue('--seki-chart-color-2').trim() || '#8b5cf6',
+        computedStyle.getPropertyValue('--seki-chart-color-3').trim() || '#10b981',
+        computedStyle.getPropertyValue('--seki-chart-color-4').trim() || '#f59e0b',
+        computedStyle.getPropertyValue('--seki-chart-color-5').trim() || '#ef4444',
+    ];
+}
+export function getGridColor(element) {
+    const computedStyle = getComputedStyle(element);
+    return computedStyle.getPropertyValue('--seki-chart-grid-color').trim() || '#e5e7eb';
+}
+export function getTextColor(element) {
+    const computedStyle = getComputedStyle(element);
+    return computedStyle.getPropertyValue('--seki-chart-text-color').trim() || '#0f172a';
+}
+export function getBackgroundColor(element) {
+    const computedStyle = getComputedStyle(element);
+    return computedStyle.getPropertyValue('--seki-chart-background').trim() || '#ffffff';
+}
+export function hexToRgba(hex, alpha) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (!result)
+        return hex;
+    const r = parseInt(result[1], 16);
+    const g = parseInt(result[2], 16);
+    const b = parseInt(result[3], 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}

package/dist/collection/components/chart/chart-types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/chart/seki-chart.css

@@ -0,0 +1,64 @@
+:host {
+  display: block;
+  width: 100%;
+
+  /* Chart color palette - maps to SekiUI tokens */
+  --seki-chart-color-1: var(--seki-color-primary, #3b82f6);
+  --seki-chart-color-2: var(--seki-color-secondary, #8b5cf6);
+  --seki-chart-color-3: var(--seki-color-accent, #10b981);
+  --seki-chart-color-4: var(--seki-color-warning, #f59e0b);
+  --seki-chart-color-5: var(--seki-color-destructive, #ef4444);
+
+  /* Grid & text colors */
+  --seki-chart-grid-color: var(--seki-color-border, #e5e7eb);
+  --seki-chart-text-color: var(--seki-color-text, #0f172a);
+  --seki-chart-background: var(--seki-color-background, #ffffff);
+}
+
+[data-theme='dark'] :host {
+  --seki-chart-grid-color: var(--seki-color-border, #374151);
+  --seki-chart-text-color: var(--seki-color-text, #f8fafc);
+  --seki-chart-background: var(--seki-color-background, #0f172a);
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--seki-radius-md, 8px);
+  background: var(--seki-chart-background);
+}
+
+.chart-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--seki-color-muted-foreground, #64748b);
+  text-align: center;
+  padding: 2rem;
+}
+
+.chart-error p {
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.error-hint {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+}
+
+.error-hint code {
+  font-family: var(--seki-font-mono, monospace);
+  background: var(--seki-color-muted, #f1f5f9);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+}
+
+canvas {
+  max-width: 100%;
+  height: 100%;
+}

package/dist/collection/components/chart/seki-chart.js

@@ -0,0 +1,316 @@
+import { Host, h } from "@stencil/core";
+import { Chart, registerables, } from "chart.js";
+import { getChartColors, getGridColor, getTextColor, getBackgroundColor, hexToRgba } from "./chart-theme";
+import { getDefaultOptions, deepMerge } from "./chart-config";
+// Register Chart.js components
+Chart.register(...registerables);
+export class SekiChart {
+    constructor() {
+        // Props
+        this.type = 'line';
+        this.height = '300px';
+    }
+    render() {
+        const containerStyle = {
+            width: '100%',
+            height: this.height,
+            position: 'relative',
+        };
+        return (h(Host, { key: '55d6b7df566448cc744c3cf0cfb1fb4f87c81142' }, h("div", { key: '7181e6f56e42cf8f6a2d3acad1133396f5507bbd', class: "chart-container", style: containerStyle, role: "img", "aria-label": this.getAriaLabel() }, h("canvas", { key: '718d6b5986c60c92266505cd045411eab4646e97', ref: (el) => (this.canvasRef = el) }), this.renderErrorState())));
+    }
+    getAriaLabel() {
+        var _a, _b;
+        const chartData = this.data || this.parseDataJson(this.dataJson);
+        if (!chartData)
+            return 'Chart';
+        const datasetCount = ((_a = chartData.datasets) === null || _a === void 0 ? void 0 : _a.length) || 0;
+        const labelCount = ((_b = chartData.labels) === null || _b === void 0 ? void 0 : _b.length) || 0;
+        return `${this.type} chart with ${datasetCount} dataset${datasetCount !== 1 ? 's' : ''} and ${labelCount} data point${labelCount !== 1 ? 's' : ''}`;
+    }
+    renderErrorState() {
+        if (this.data || this.dataJson)
+            return null;
+        return (h("div", { class: "chart-error" }, h("p", null, "No data provided"), h("p", { class: "error-hint" }, "Set the ", h("code", null, "data"), " property or ", h("code", null, "data-json"), " attribute")));
+    }
+    parseDataJson(jsonString) {
+        if (!jsonString)
+            return undefined;
+        try {
+            return JSON.parse(jsonString);
+        }
+        catch (e) {
+            console.error('seki-chart: Failed to parse data JSON', e);
+            return undefined;
+        }
+    }
+    parseOptionsJson(jsonString) {
+        if (!jsonString)
+            return undefined;
+        try {
+            return JSON.parse(jsonString);
+        }
+        catch (e) {
+            console.error('seki-chart: Failed to parse options JSON', e);
+            return undefined;
+        }
+    }
+    componentDidLoad() {
+        this.renderChart();
+    }
+    disconnectedCallback() {
+        if (this.chartInstance) {
+            this.chartInstance.destroy();
+            this.chartInstance = undefined;
+        }
+        if (this.updateTimeout) {
+            clearTimeout(this.updateTimeout);
+        }
+    }
+    handlePropsChange() {
+        // Debounce rapid updates
+        if (this.updateTimeout) {
+            clearTimeout(this.updateTimeout);
+        }
+        this.updateTimeout = window.setTimeout(() => {
+            this.renderChart();
+        }, 100);
+    }
+    renderChart() {
+        if (!this.canvasRef)
+            return;
+        // Parse data from JSON attributes if properties not set
+        const chartData = this.data || this.parseDataJson(this.dataJson);
+        const chartOptions = this.options || this.parseOptionsJson(this.optionsJson);
+        if (!chartData) {
+            console.warn('seki-chart: No data provided');
+            return;
+        }
+        // Destroy existing chart instance
+        if (this.chartInstance) {
+            this.chartInstance.destroy();
+        }
+        // Get theme colors
+        const colors = this.getColors();
+        const gridColor = getGridColor(this.el);
+        const textColor = getTextColor(this.el);
+        const backgroundColor = getBackgroundColor(this.el);
+        // Apply theme colors to datasets
+        const themedData = this.applyThemeColors(chartData, colors);
+        // Merge default options with user options
+        const defaultOptions = getDefaultOptions(this.type, gridColor, textColor, backgroundColor);
+        const mergedOptions = chartOptions ? deepMerge(defaultOptions, chartOptions) : defaultOptions;
+        // Create new Chart.js instance
+        const chartType = this.type === 'area' ? 'line' : this.type;
+        this.chartInstance = new Chart(this.canvasRef, {
+            type: chartType,
+            data: themedData,
+            options: mergedOptions,
+        });
+    }
+    getColors() {
+        var _a;
+        // 1. User-provided colors override
+        if ((_a = this.colors) === null || _a === void 0 ? void 0 : _a.length)
+            return this.colors;
+        // 2. Read CSS variables from component
+        return getChartColors(this.el);
+    }
+    applyThemeColors(data, colors) {
+        const datasets = data.datasets.map((dataset, index) => {
+            const color = colors[index % colors.length];
+            const isArea = this.type === 'area';
+            return Object.assign(Object.assign({}, dataset), { backgroundColor: isArea ? hexToRgba(color, 0.2) : (dataset.backgroundColor || color), borderColor: dataset.borderColor || color, fill: isArea ? true : dataset.fill });
+        });
+        return Object.assign(Object.assign({}, data), { datasets });
+    }
+    static get is() { return "seki-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChartType",
+                    "resolved": "\"area\" | \"bar\" | \"doughnut\" | \"line\"",
+                    "references": {
+                        "ChartType": {
+                            "location": "import",
+                            "path": "./chart-types",
+                            "id": "src/components/chart/chart-types.ts::ChartType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'line'"
+            },
+            "data": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "ChartData",
+                    "resolved": "ChartData<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown> | undefined",
+                    "references": {
+                        "ChartData": {
+                            "location": "import",
+                            "path": "./chart-types",
+                            "id": "src/components/chart/chart-types.ts::ChartData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "ChartOptions",
+                    "resolved": "undefined | ({ datasets?: _DeepPartialObject<{ line: LineControllerDatasetOptions & FillerControllerDatasetOptions; bar: BarControllerDatasetOptions; doughnut: DoughnutControllerDatasetOptions; scatter: LineControllerDatasetOptions; bubble: BubbleControllerDatasetOptions; pie: DoughnutControllerDatasetOptions; polarArea: PolarAreaControllerDatasetOptions; radar: RadarControllerDatasetOptions & FillerControllerDatasetOptions; }> | undefined; indexAxis?: \"x\" | \"y\" | undefined; clip?: number | false | _DeepPartialObject<ChartArea> | undefined; color?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; backgroundColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; hoverBackgroundColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; borderColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; hoverBorderColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | readonly (string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | undefined)[] | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color | undefined) | undefined; font?: _DeepPartialObject<Partial<FontSpec>> | undefined; responsive?: boolean | undefined; maintainAspectRatio?: boolean | undefined; resizeDelay?: number | undefined; aspectRatio?: number | undefined; locale?: string | undefined; onResize?: ((chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>, size: { width: number; height: number; }) => void) | undefined; devicePixelRatio?: number | undefined; interaction?: _DeepPartialObject<CoreInteractionOptions> | undefined; hover?: _DeepPartialObject<CoreInteractionOptions> | undefined; events?: _DeepPartialArray<keyof HTMLElementEventMap> | undefined; onHover?: ((event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>) => void) | undefined; onClick?: ((event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>) => void) | undefined; layout?: _DeepPartialObject<Partial<{ autoPadding: boolean; padding: Scriptable<Padding, ScriptableContext<keyof ChartTypeRegistry>>; }>> | undefined; parsing?: false | _DeepPartialObject<{ [key: string]: string; }> | undefined; normalized?: boolean | undefined; animation?: false | _DeepPartialObject<AnimationSpec<keyof ChartTypeRegistry> & { onProgress?: ((this: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint | null)[], unknown>, event: AnimationEvent) => void) | undefined; }> | undefined; animations?: _DeepPartialObject<AnimationsSpec<keyof ChartTypeRegistry>> | undefined; transitions?: _DeepPartialObject<TransitionsSpec<keyof ChartTypeRegistry>> | undefined; elements?: _DeepPartialObject<ElementOptionsByType<keyof ChartTypeRegistry>> | undefined; plugins?: _DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>> | undefined; line?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions & FillerControllerDatasetOptions; }> | undefined; bar?: _DeepPartialObject<{ datasets: BarControllerDatasetOptions; }> | undefined; doughnut?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }> | undefined; scatter?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions; }> | undefined; bubble?: _DeepPartialObject<{ datasets: BubbleControllerDatasetOptions; }> | undefined; pie?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }> | undefined; polarArea?: _DeepPartialObject<{ datasets: PolarAreaControllerDatasetOptions; }> | undefined; radar?: _DeepPartialObject<{ datasets: RadarControllerDatasetOptions & FillerControllerDatasetOptions; }> | undefined; scales?: _DeepPartialObject<{ [key: string]: ScaleOptionsByType<\"radialLinear\" | keyof CartesianScaleTypeRegistry>; }> | undefined; })",
+                    "references": {
+                        "ChartOptions": {
+                            "location": "import",
+                            "path": "./chart-types",
+                            "id": "src/components/chart/chart-types.ts::ChartOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "colors": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'300px'"
+            },
+            "dataJson": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data-json"
+            },
+            "optionsJson": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options-json"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "chartInstance": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "dataJson",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "options",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "optionsJson",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "type",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "colors",
+                "methodName": "handlePropsChange"
+            }];
+    }
+}