@sekiui/elements 0.1.5 → 0.1.6

package/dist/cdn/seki-chart.js

@@ -1,760 +0,0 @@
-import { p as proxyCustomElement, H, h, e as Host } from './p-jMliCqbB.js';
-
-/**
- * Chart.js paints through a canvas, which cannot parse `light-dark()` or
- * `var()`. The `--seki-chart-*` custom properties resolve to `light-dark(...)`
- * pairs, and `getPropertyValue` returns such a declared value verbatim (a custom
- * property is substituted, never evaluated). To get a concrete color we consume
- * the property on a throwaway probe element inside the chart's shadow root and
- * read the computed `color`, which the browser always serialises as rgb()/rgba().
- */
-const PALETTE_FALLBACKS = ['#3b82f6', '#8b5cf6', '#10b981', '#f59e0b', '#ef4444'];
-/** Resolve a CSS value (usually `var(--token)`) to a concrete computed color. */
-function resolveColor(element, cssValue, fallback) {
-    var _a;
-    const root = (_a = element.shadowRoot) !== null && _a !== void 0 ? _a : element;
-    const probe = document.createElement('span');
-    probe.setAttribute('aria-hidden', 'true');
-    // transition:none so a color transition on an ancestor can never delay the read.
-    probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;transition:none;';
-    probe.style.color = cssValue;
-    root.appendChild(probe);
-    try {
-        // An invalid value leaves the inline color unset, so the probe would inherit.
-        if (!probe.style.color && !cssValue.startsWith('var('))
-            return fallback;
-        return getComputedStyle(probe).color || fallback;
-    }
-    finally {
-        probe.remove();
-    }
-}
-function getChartColors(element) {
-    return PALETTE_FALLBACKS.map((fallback, i) => resolveColor(element, `var(--seki-chart-color-${i + 1})`, fallback));
-}
-function getGridColor(element) {
-    return resolveColor(element, 'var(--seki-chart-grid-color)', '#e5e7eb');
-}
-function getTextColor(element) {
-    return resolveColor(element, 'var(--seki-chart-text-color)', '#0f172a');
-}
-function getBackgroundColor(element) {
-    return resolveColor(element, 'var(--seki-chart-background)', '#ffffff');
-}
-function getThemeColors(element) {
-    return {
-        palette: getChartColors(element),
-        grid: getGridColor(element),
-        text: getTextColor(element),
-        background: getBackgroundColor(element),
-    };
-}
-/** Stable key for comparing two resolved themes. */
-function themeSignature(theme) {
-    return [...theme.palette, theme.grid, theme.text, theme.background].join('|');
-}
-/**
- * Apply an alpha to a hex, rgb() or rgba() color. Unparseable input is returned
- * unchanged.
- */
-function hexToRgba(color, alpha) {
-    const hex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
-    if (hex) {
-        return `rgba(${parseInt(hex[1], 16)}, ${parseInt(hex[2], 16)}, ${parseInt(hex[3], 16)}, ${alpha})`;
-    }
-    const short = /^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(color);
-    if (short) {
-        return `rgba(${parseInt(short[1] + short[1], 16)}, ${parseInt(short[2] + short[2], 16)}, ${parseInt(short[3] + short[3], 16)}, ${alpha})`;
-    }
-    // rgb(r, g, b) / rgba(r, g, b, a) / rgb(r g b / a)
-    const rgb = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*(?:[,/]\s*[\d.%]+\s*)?\)$/i.exec(color.trim());
-    if (rgb) {
-        return `rgba(${rgb[1]}, ${rgb[2]}, ${rgb[3]}, ${alpha})`;
-    }
-    return color;
-}
-
-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,
-                    },
-                },
-            } });
-    }
-    // Scatter charts need numeric x/y scales
-    if (type === 'scatter') {
-        return Object.assign(Object.assign({}, baseOptions), { scales: {
-                x: {
-                    type: 'linear',
-                    position: 'bottom',
-                    grid: {
-                        color: gridColor,
-                    },
-                    ticks: {
-                        color: textColor,
-                    },
-                },
-                y: {
-                    grid: {
-                        color: gridColor,
-                    },
-                    ticks: {
-                        color: textColor,
-                    },
-                },
-            } });
-    }
-    // Radar charts use a radial axis
-    if (type === 'radar') {
-        return Object.assign(Object.assign({}, baseOptions), { scales: {
-                r: {
-                    grid: {
-                        color: gridColor,
-                    },
-                    angleLines: {
-                        color: gridColor,
-                    },
-                    pointLabels: {
-                        color: textColor,
-                    },
-                    ticks: {
-                        color: textColor,
-                        backdropColor: 'transparent',
-                    },
-                },
-            } });
-    }
-    // Pie, polarArea, and doughnut don't need x/y scales
-    return baseOptions;
-}
-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);
-}
-
-/**
- * Creates a Chart.js external tooltip handler that renders a styled tooltip
- * inside the component's Shadow DOM.
- *
- * Uses SekiUI design tokens for consistent styling with the rest of the library.
- * The tooltip displays the category label, dataset name, colored indicator dot,
- * and formatted value.
- *
- * @param shadowRoot - The Shadow DOM root where the tooltip element will be created
- * @returns A function matching Chart.js's `tooltip.external` callback signature
- */
-function createExternalTooltipHandler(shadowRoot) {
-    let tooltipEl = null;
-    return function (context) {
-        const { chart, tooltip } = context;
-        // Create tooltip element on first use
-        if (!tooltipEl) {
-            tooltipEl = document.createElement('div');
-            tooltipEl.classList.add('chart-tooltip');
-            shadowRoot.appendChild(tooltipEl);
-        }
-        // Hide if no tooltip should be shown
-        if (tooltip.opacity === 0) {
-            tooltipEl.style.opacity = '0';
-            tooltipEl.style.pointerEvents = 'none';
-            return;
-        }
-        // Build tooltip content
-        tooltipEl.innerHTML = '';
-        // Title (category label)
-        if (tooltip.title && tooltip.title.length > 0) {
-            const titleEl = document.createElement('div');
-            titleEl.classList.add('chart-tooltip-title');
-            titleEl.textContent = tooltip.title.join(', ');
-            tooltipEl.appendChild(titleEl);
-        }
-        // Body items (dataset values)
-        const bodyLines = tooltip.body || [];
-        bodyLines.forEach((bodyItem, i) => {
-            const colors = tooltip.labelColors[i];
-            const itemEl = document.createElement('div');
-            itemEl.classList.add('chart-tooltip-item');
-            // Colored dot indicator
-            const indicatorEl = document.createElement('span');
-            indicatorEl.classList.add('chart-tooltip-indicator');
-            indicatorEl.style.backgroundColor = colors.backgroundColor || '';
-            indicatorEl.style.borderColor = colors.borderColor || '';
-            itemEl.appendChild(indicatorEl);
-            // Dataset label
-            const labelEl = document.createElement('span');
-            labelEl.classList.add('chart-tooltip-label');
-            // Extract label and value from the body line
-            const text = bodyItem.lines.join(', ');
-            const colonIndex = text.indexOf(':');
-            if (colonIndex > -1) {
-                labelEl.textContent = text.substring(0, colonIndex).trim();
-                itemEl.appendChild(labelEl);
-                const valueEl = document.createElement('span');
-                valueEl.classList.add('chart-tooltip-value');
-                valueEl.textContent = text.substring(colonIndex + 1).trim();
-                itemEl.appendChild(valueEl);
-            }
-            else {
-                labelEl.textContent = text;
-                itemEl.appendChild(labelEl);
-            }
-            tooltipEl.appendChild(itemEl);
-        });
-        // Position the tooltip
-        const chartRect = chart.canvas.getBoundingClientRect();
-        const canvasOffsetLeft = chart.canvas.offsetLeft;
-        const canvasOffsetTop = chart.canvas.offsetTop;
-        // Calculate position relative to the canvas within the shadow DOM
-        const left = canvasOffsetLeft + tooltip.caretX;
-        const top = canvasOffsetTop + tooltip.caretY;
-        tooltipEl.style.opacity = '1';
-        tooltipEl.style.pointerEvents = 'none';
-        tooltipEl.style.left = `${left}px`;
-        tooltipEl.style.top = `${top}px`;
-        // Adjust if tooltip goes beyond chart boundaries
-        const tooltipWidth = tooltipEl.offsetWidth;
-        const tooltipHeight = tooltipEl.offsetHeight;
-        const chartWidth = chartRect.width;
-        // Flip horizontally if overflowing right edge
-        if (left + tooltipWidth / 2 > canvasOffsetLeft + chartWidth) {
-            tooltipEl.style.left = `${left - tooltipWidth - 8}px`;
-            tooltipEl.style.transform = 'translateY(-50%)';
-        }
-        else if (left - tooltipWidth / 2 < canvasOffsetLeft) {
-            tooltipEl.style.left = `${left + 8}px`;
-            tooltipEl.style.transform = 'translateY(-50%)';
-        }
-        else {
-            tooltipEl.style.transform = 'translate(-50%, -100%)';
-            tooltipEl.style.left = `${left}px`;
-            tooltipEl.style.top = `${top - 8}px`;
-        }
-        // Flip vertically if overflowing top
-        if (top - tooltipHeight - 8 < canvasOffsetTop) {
-            tooltipEl.style.transform = 'translate(-50%, 8px)';
-            tooltipEl.style.top = `${top}px`;
-        }
-    };
-}
-
-const sekiChartCss = ":host{display:block;width:100%;--seki-chart-color-1:var(--seki-primary, #3b82f6);--seki-chart-color-2:var(--seki-secondary, #8b5cf6);--seki-chart-color-3:var(--seki-accent, #10b981);--seki-chart-color-4:var(--seki-warning, #f59e0b);--seki-chart-color-5:var(--seki-destructive, #ef4444);--seki-chart-grid-color:var(--seki-border, #e5e7eb);--seki-chart-text-color:var(--seki-foreground, #0f172a);--seki-chart-background:var(--seki-background, #ffffff)}.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-muted-foreground, #64748b);text-align:center;padding:2rem}.chart-error p{margin:0;font-size:var(--seki-font-size-sm, 0.875rem)}.error-hint{margin-top:0.5rem;font-size:var(--seki-font-size-xs, 0.75rem)}.error-hint code{font-family:var(--seki-font-mono, monospace);background:var(--seki-muted, #f1f5f9);padding:0.125rem 0.375rem;border-radius:0.25rem;font-size:var(--seki-font-size-xs, 0.75rem)}canvas{max-width:100%;height:100%}.chart-tooltip{position:absolute;z-index:10;opacity:0;pointer-events:none;min-width:8rem;max-width:20rem;padding:var(--seki-spacing-2, 0.5rem) var(--seki-spacing-3, 0.75rem);background:var(--seki-chart-background);border:1px solid var(--seki-chart-grid-color);border-radius:var(--seki-radius-md, 0.375rem);box-shadow:var(--seki-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1));font-family:var(--seki-font-sans, system-ui, -apple-system, sans-serif);font-size:var(--seki-font-size-xs, 0.75rem);line-height:var(--seki-line-height-normal, 1.5);color:var(--seki-chart-text-color);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),\n              transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.chart-tooltip-title{font-weight:var(--seki-font-weight-medium, 500);font-size:var(--seki-font-size-xs, 0.75rem);color:var(--seki-chart-text-color);margin-bottom:var(--seki-spacing-1, 0.25rem);padding-bottom:var(--seki-spacing-1, 0.25rem);border-bottom:1px solid var(--seki-chart-grid-color)}.chart-tooltip-item{display:flex;align-items:center;gap:var(--seki-spacing-2, 0.5rem);padding:1px 0;font-size:var(--seki-font-size-xs, 0.75rem)}.chart-tooltip-indicator{display:inline-block;flex-shrink:0;width:0.5rem;height:0.5rem;border-radius:var(--seki-radius-full, 9999px);border:1px solid transparent}.chart-tooltip-label{flex:1;color:var(--seki-muted-foreground, #64748b);font-weight:var(--seki-font-weight-normal, 400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chart-tooltip-value{font-weight:var(--seki-font-weight-semibold, 600);font-variant-numeric:tabular-nums;color:var(--seki-chart-text-color);margin-left:auto;padding-left:var(--seki-spacing-2, 0.5rem)}@media (prefers-reduced-motion: reduce){.chart-tooltip{transition:none}}";
-
-// Lazily loaded so chart.js (an optional peer dependency, see #263) isn't
-// pulled into any bundle unless a <seki-chart> actually renders. Module-scope
-// cache shared across every seki-chart instance on the page; the register
-// call must run exactly once regardless of how many instances load.
-let chartJsModule = null;
-let chartJsRegistered = false;
-async function loadChartJs() {
-    if (!chartJsModule) {
-        chartJsModule = await import('./p-pu7bJBaN.js');
-    }
-    if (!chartJsRegistered) {
-        chartJsModule.Chart.register(...chartJsModule.registerables);
-        chartJsRegistered = true;
-    }
-    return chartJsModule;
-}
-const SekiChart$1 = /*@__PURE__*/ proxyCustomElement(class SekiChart extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        // Props
-        this.type = 'line';
-        this.height = '300px';
-        // Variant props
-        /** Stack datasets on top of each other (bar/line/area charts) */
-        this.stacked = false;
-        /** Display bar charts horizontally (sets indexAxis to 'y') */
-        this.horizontal = false;
-        /** Apply a gradient fill to line/area chart datasets */
-        this.gradient = false;
-        /** Display pie/doughnut charts with a cutout (donut style) */
-        this.donut = false;
-        /** Hide grid lines on x and y axes */
-        this.hideGrid = false;
-        /** Hide tick labels on x and y axes */
-        this.hideAxes = false;
-        /** Hide the chart legend */
-        this.hideLegend = false;
-        /** Hide tooltips on hover */
-        this.hideTooltip = false;
-        this.handleColorSchemeChange = () => this.scheduleThemeCheck();
-    }
-    render() {
-        const containerStyle = {
-            width: '100%',
-            height: this.height,
-            position: 'relative',
-        };
-        return (h(Host, { key: '4985b8b7ad50c574a44003f6d01ca3ecc2254a9c' }, h("div", { key: 'ba45b7faba0ea63f0024dd0928bd92021897222f', class: "chart-container", style: containerStyle, role: "img", "aria-label": this.getAriaLabel() }, h("canvas", { key: '62064edc687d5f27c9734a94a105b7a070a0709f', 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;
-        }
-    }
-    connectedCallback() {
-        this.observeTheme();
-    }
-    componentDidLoad() {
-        this.renderChart();
-    }
-    disconnectedCallback() {
-        this.unobserveTheme();
-        if (this.chartInstance) {
-            this.chartInstance.destroy();
-            this.chartInstance = undefined;
-        }
-        if (this.updateTimeout) {
-            clearTimeout(this.updateTimeout);
-        }
-    }
-    /**
-     * The effective color scheme can change via `data-theme` on <html> or any
-     * ancestor (attribute, class or inline style) or via the OS preference, so
-     * watch all of them and redraw only when the resolved colors really differ.
-     */
-    observeTheme() {
-        var _a, _b;
-        this.unobserveTheme();
-        if (typeof MutationObserver !== 'undefined') {
-            // `data-theme` can sit on any ancestor, so react to it anywhere. `class` and
-            // `style` churn constantly in app code, so only the root elements count.
-            this.themeObserver = new MutationObserver((records) => {
-                const relevant = records.some((r) => r.attributeName === 'data-theme' ||
-                    r.target === document.documentElement ||
-                    r.target === document.body);
-                if (relevant)
-                    this.scheduleThemeCheck();
-            });
-            this.themeObserver.observe(document.documentElement, {
-                attributes: true,
-                subtree: true,
-                attributeFilter: ['data-theme', 'class', 'style'],
-            });
-        }
-        if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
-            this.colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
-            (_b = (_a = this.colorSchemeQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'change', this.handleColorSchemeChange);
-        }
-    }
-    unobserveTheme() {
-        var _a, _b, _c;
-        (_a = this.themeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.themeObserver = undefined;
-        (_c = (_b = this.colorSchemeQuery) === null || _b === void 0 ? void 0 : _b.removeEventListener) === null || _c === void 0 ? void 0 : _c.call(_b, 'change', this.handleColorSchemeChange);
-        this.colorSchemeQuery = undefined;
-        if (this.themeFrame !== undefined) {
-            cancelAnimationFrame(this.themeFrame);
-            this.themeFrame = undefined;
-        }
-    }
-    // Coalesce bursts and read on the next frame so the new color-scheme has been
-    // applied (and any token transition on the host cannot hold back the value).
-    scheduleThemeCheck() {
-        if (this.themeFrame !== undefined)
-            return;
-        this.themeFrame = requestAnimationFrame(() => {
-            this.themeFrame = undefined;
-            if (!this.chartInstance || !this.canvasRef || !this.el.isConnected)
-                return;
-            if (themeSignature(getThemeColors(this.el)) !== this.drawnThemeSignature) {
-                this.renderChart();
-            }
-        });
-    }
-    handlePropsChange() {
-        // Debounce rapid updates
-        if (this.updateTimeout) {
-            clearTimeout(this.updateTimeout);
-        }
-        this.updateTimeout = window.setTimeout(() => {
-            this.renderChart();
-        }, 100);
-    }
-    async renderChart() {
-        if (!this.canvasRef)
-            return;
-        let loadedChartJs;
-        try {
-            loadedChartJs = await loadChartJs();
-        }
-        catch (error) {
-            console.error('seki-chart: Failed to load chart.js. Make sure it is installed: npm install chart.js', error);
-            return;
-        }
-        const { Chart } = loadedChartJs;
-        // Component may have disconnected while chart.js was loading.
-        if (!this.canvasRef || !this.el.isConnected)
-            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 theme = getThemeColors(this.el);
-        this.drawnThemeSignature = themeSignature(theme);
-        const colors = this.getColors(theme.palette);
-        const { grid: gridColor, text: textColor, background: backgroundColor } = theme;
-        // 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;
-        // Apply variant props to merged options
-        this.applyVariantOptions(mergedOptions);
-        // Wire up the custom external tooltip (unless tooltips are hidden)
-        if (!this.hideTooltip) {
-            const shadowRoot = this.el.shadowRoot;
-            if (shadowRoot) {
-                if (!mergedOptions.plugins) {
-                    mergedOptions.plugins = {};
-                }
-                if (!mergedOptions.plugins.tooltip) {
-                    mergedOptions.plugins.tooltip = {};
-                }
-                mergedOptions.plugins.tooltip.enabled = false;
-                mergedOptions.plugins.tooltip.external =
-                    createExternalTooltipHandler(shadowRoot);
-            }
-        }
-        // Map chart types to Chart.js types
-        let chartType = this.type;
-        if (this.type === 'area') {
-            chartType = 'line';
-        }
-        // pie, radar, polarArea, scatter map directly to Chart.js types
-        // Apply gradient fill after chart options are ready but before creating the chart
-        if (this.gradient && (this.type === 'area' || this.type === 'line')) {
-            this.applyGradientFill(themedData, colors);
-        }
-        this.chartInstance = new Chart(this.canvasRef, {
-            type: chartType,
-            data: themedData,
-            options: mergedOptions,
-        });
-    }
-    applyVariantOptions(options) {
-        // Stacked: stack datasets on x and y axes
-        if (this.stacked) {
-            if (!options.scales) {
-                options.scales = {};
-            }
-            if (!options.scales['x']) {
-                options.scales['x'] = {};
-            }
-            if (!options.scales['y']) {
-                options.scales['y'] = {};
-            }
-            options.scales['x'].stacked = true;
-            options.scales['y'].stacked = true;
-        }
-        // Horizontal: set indexAxis to 'y' for bar charts
-        if (this.horizontal && this.type === 'bar') {
-            options.indexAxis = 'y';
-        }
-        // Donut: set cutout for pie/doughnut types
-        if (this.donut && (this.type === 'pie' || this.type === 'doughnut')) {
-            if (!options.cutout) {
-                options.cutout = '60%';
-            }
-        }
-        // HideGrid: hide grid lines on x and y axes
-        if (this.hideGrid) {
-            if (options.scales) {
-                if (options.scales['x']) {
-                    if (!options.scales['x'].grid) {
-                        options.scales['x'].grid = {};
-                    }
-                    options.scales['x'].grid.display = false;
-                }
-                if (options.scales['y']) {
-                    if (!options.scales['y'].grid) {
-                        options.scales['y'].grid = {};
-                    }
-                    options.scales['y'].grid.display = false;
-                }
-                // Also handle radar's radial grid
-                if (options.scales['r']) {
-                    if (!options.scales['r'].grid) {
-                        options.scales['r'].grid = {};
-                    }
-                    options.scales['r'].grid.display = false;
-                }
-            }
-        }
-        // HideAxes: hide tick labels on x and y axes
-        if (this.hideAxes) {
-            if (options.scales) {
-                if (options.scales['x']) {
-                    if (!options.scales['x'].ticks) {
-                        options.scales['x'].ticks = {};
-                    }
-                    options.scales['x'].ticks.display = false;
-                }
-                if (options.scales['y']) {
-                    if (!options.scales['y'].ticks) {
-                        options.scales['y'].ticks = {};
-                    }
-                    options.scales['y'].ticks.display = false;
-                }
-                // Also handle radar's radial ticks
-                if (options.scales['r']) {
-                    if (!options.scales['r'].ticks) {
-                        options.scales['r'].ticks = {};
-                    }
-                    options.scales['r'].ticks.display = false;
-                    // Hide point labels on radar as well
-                    if (!options.scales['r'].pointLabels) {
-                        options.scales['r'].pointLabels = {};
-                    }
-                    options.scales['r'].pointLabels.display = false;
-                }
-            }
-        }
-        // HideLegend: hide the chart legend
-        if (this.hideLegend) {
-            if (!options.plugins) {
-                options.plugins = {};
-            }
-            if (!options.plugins.legend) {
-                options.plugins.legend = {};
-            }
-            options.plugins.legend.display = false;
-        }
-        // HideTooltip: disable tooltips
-        if (this.hideTooltip) {
-            if (!options.plugins) {
-                options.plugins = {};
-            }
-            if (!options.plugins.tooltip) {
-                options.plugins.tooltip = {};
-            }
-            options.plugins.tooltip.enabled = false;
-        }
-    }
-    applyGradientFill(data, colors) {
-        var _a, _b;
-        const ctx = (_a = this.canvasRef) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-        if (!ctx)
-            return;
-        const chartHeight = ((_b = this.canvasRef.parentElement) === null || _b === void 0 ? void 0 : _b.clientHeight) || 300;
-        data.datasets.forEach((dataset, index) => {
-            const color = colors[index % colors.length];
-            const gradient = ctx.createLinearGradient(0, 0, 0, chartHeight);
-            gradient.addColorStop(0, hexToRgba(color, 0.4));
-            gradient.addColorStop(1, hexToRgba(color, 0.0));
-            dataset.backgroundColor = gradient;
-            dataset.fill = true;
-        });
-    }
-    getColors(themePalette) {
-        var _a;
-        // 1. User-provided colors override
-        if ((_a = this.colors) === null || _a === void 0 ? void 0 : _a.length)
-            return this.colors;
-        // 2. Colors resolved from the CSS variables
-        return themePalette !== null && themePalette !== void 0 ? themePalette : getChartColors(this.el);
-    }
-    applyThemeColors(data, colors) {
-        const isMultiColorType = this.type === 'pie' || this.type === 'polarArea' || this.type === 'doughnut';
-        const isRadar = this.type === 'radar';
-        const isArea = this.type === 'area';
-        const datasets = data.datasets.map((dataset, index) => {
-            const color = colors[index % colors.length];
-            // For pie, polarArea, and doughnut: assign an array of colors (one per data point)
-            if (isMultiColorType) {
-                const dataLength = Array.isArray(dataset.data) ? dataset.data.length : 0;
-                const bgColors = Array.from({ length: dataLength }, (_, i) => colors[i % colors.length]);
-                const borderColors = Array.from({ length: dataLength }, () => 'rgba(255, 255, 255, 0.8)');
-                return Object.assign(Object.assign({}, dataset), { backgroundColor: dataset.backgroundColor || bgColors, borderColor: dataset.borderColor || borderColors });
-            }
-            // For radar: set backgroundColor with alpha and borderColor
-            if (isRadar) {
-                return Object.assign(Object.assign({}, dataset), { backgroundColor: dataset.backgroundColor || hexToRgba(color, 0.2), borderColor: dataset.borderColor || color, fill: dataset.fill !== undefined ? dataset.fill : true });
-            }
-            // For area: transparent fill with solid border
-            if (isArea) {
-                return Object.assign(Object.assign({}, dataset), { backgroundColor: hexToRgba(color, 0.2), borderColor: dataset.borderColor || color, fill: true });
-            }
-            // Default: line, bar, scatter
-            return Object.assign(Object.assign({}, dataset), { backgroundColor: dataset.backgroundColor || color, borderColor: dataset.borderColor || color, fill: dataset.fill });
-        });
-        return Object.assign(Object.assign({}, data), { datasets });
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "data": ["handlePropsChange"],
-        "dataJson": ["handlePropsChange"],
-        "options": ["handlePropsChange"],
-        "optionsJson": ["handlePropsChange"],
-        "type": ["handlePropsChange"],
-        "colors": ["handlePropsChange"],
-        "stacked": ["handlePropsChange"],
-        "horizontal": ["handlePropsChange"],
-        "gradient": ["handlePropsChange"],
-        "donut": ["handlePropsChange"],
-        "hideGrid": ["handlePropsChange"],
-        "hideAxes": ["handlePropsChange"],
-        "hideLegend": ["handlePropsChange"],
-        "hideTooltip": ["handlePropsChange"]
-    }; }
-    static get style() { return sekiChartCss; }
-}, [257, "seki-chart", {
-        "type": [1],
-        "data": [1040],
-        "options": [1040],
-        "colors": [16],
-        "height": [1],
-        "dataJson": [1, "data-json"],
-        "optionsJson": [1, "options-json"],
-        "stacked": [4],
-        "horizontal": [4],
-        "gradient": [4],
-        "donut": [4],
-        "hideGrid": [4, "hide-grid"],
-        "hideAxes": [4, "hide-axes"],
-        "hideLegend": [4, "hide-legend"],
-        "hideTooltip": [4, "hide-tooltip"],
-        "chartInstance": [32]
-    }, undefined, {
-        "data": ["handlePropsChange"],
-        "dataJson": ["handlePropsChange"],
-        "options": ["handlePropsChange"],
-        "optionsJson": ["handlePropsChange"],
-        "type": ["handlePropsChange"],
-        "colors": ["handlePropsChange"],
-        "stacked": ["handlePropsChange"],
-        "horizontal": ["handlePropsChange"],
-        "gradient": ["handlePropsChange"],
-        "donut": ["handlePropsChange"],
-        "hideGrid": ["handlePropsChange"],
-        "hideAxes": ["handlePropsChange"],
-        "hideLegend": ["handlePropsChange"],
-        "hideTooltip": ["handlePropsChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["seki-chart"];
-    components.forEach(tagName => { switch (tagName) {
-        case "seki-chart":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SekiChart$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const SekiChart = SekiChart$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SekiChart, defineCustomElement };