@affinda/wc 0.6.1 → 0.7.0

package/dist/esm/af-area-chart.entry.js

@@ -0,0 +1,270 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BjfY9fsk.js';
+import { d as defaultMargins, b as bandScale, g as generateTickMarks, l as linearScale, f as formatAxisValue, c as computeDomain } from './scales-BSPfXvdg.js';
+import { a as areaPath, l as linePath, g as gridLinePaths, s as stackedAreaPaths, b as generateChartDescription, c as generateDataTable, d as getChartAriaAttrs, e as srOnlyStyles } from './a11y-DEGKc9o3.js';
+
+const afAreaChartCss = () => `:host{display:block;position:relative;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif)}.area-chart__svg{display:block;width:100%;height:auto;overflow:visible}.area-chart__grid-line{fill:none;stroke:var(--af-chart-grid, #e8ebeb);stroke-width:1;stroke-dasharray:4 2}.area-chart__area{fill:var(--af-chart-1, #c6d5d1);transition:opacity 0.2s ease}.area-chart__area--series-0{fill:var(--af-chart-1, #c6d5d1)}.area-chart__area--series-1{fill:var(--af-chart-2, #dde6e3)}.area-chart__area--series-2{fill:var(--af-chart-3, #c0ab8d)}.area-chart__area--series-3{fill:var(--af-chart-4, #dfd5c6)}.area-chart__area--series-4{fill:var(--af-chart-5, #14343b)}:host(.area-chart--interactive) .area-chart__series{cursor:pointer}.area-chart__series--hovered .area-chart__area{filter:brightness(1.05)}.area-chart__area--animated{opacity:0;animation:area-reveal 1.2s ease-out forwards}@keyframes area-reveal{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:0.6;clip-path:inset(0 0 0 0)}}.area-chart__stroke{fill:none;stroke:var(--af-chart-line, var(--af-chart-1, #c6d5d1));stroke-linecap:round;stroke-linejoin:round}.area-chart__stroke--series-0{stroke:var(--af-chart-line, var(--af-chart-1, #c6d5d1))}.area-chart__stroke--series-1{stroke:var(--af-chart-2, #dde6e3)}.area-chart__stroke--series-2{stroke:var(--af-chart-3, #c0ab8d)}.area-chart__stroke--series-3{stroke:var(--af-chart-4, #dfd5c6)}.area-chart__stroke--series-4{stroke:var(--af-chart-5, #14343b)}.area-chart__stroke--animated{stroke-dasharray:1000;stroke-dashoffset:1000;animation:stroke-draw 1.5s ease-out 0.5s forwards}@keyframes stroke-draw{to{stroke-dashoffset:0}}.area-chart__axis-line{stroke:var(--af-chart-grid, #e8ebeb);stroke-width:1}.area-chart__tick-label{fill:var(--af-chart-text, #2b484f);font-size:11px;font-family:inherit}.area-chart__tick-label--y{text-anchor:end;dominant-baseline:middle}.area-chart__tick-label--x{text-anchor:middle;dominant-baseline:hanging}.area-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:16px;padding:0 8px}.area-chart__legend-item{display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color 0.15s ease}.area-chart__legend-item:hover,.area-chart__legend-item--hovered{background-color:var(--af-background-level-1, #f4f7f6)}.area-chart__legend-swatch{width:12px;height:12px;border-radius:2px;flex-shrink:0}.area-chart__legend-swatch--series-0{background-color:var(--af-chart-1, #c6d5d1)}.area-chart__legend-swatch--series-1{background-color:var(--af-chart-2, #dde6e3)}.area-chart__legend-swatch--series-2{background-color:var(--af-chart-3, #c0ab8d)}.area-chart__legend-swatch--series-3{background-color:var(--af-chart-4, #dfd5c6)}.area-chart__legend-swatch--series-4{background-color:var(--af-chart-5, #14343b)}.area-chart__legend-label{font-size:13px;color:var(--af-chart-text, #2b484f)}.area-chart--empty{display:flex;align-items:center;justify-content:center;min-height:200px}.area-chart__empty-message{font-size:14px;color:var(--af-chart-text-muted, #6b8085)}`;
+
+const AfAreaChart = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Chart data as JSON string.
+         */
+        this.data = '[]';
+        /**
+         * Theme for colors.
+         */
+        this.theme = 'white';
+        /**
+         * Stack multiple series on top of each other.
+         */
+        this.stacked = false;
+        /**
+         * Curve interpolation.
+         */
+        this.curve = 'smooth';
+        /**
+         * Area fill opacity (0-1).
+         */
+        this.opacity = 0.6;
+        /**
+         * Show outline stroke on areas.
+         */
+        this.showStroke = true;
+        /**
+         * Interactivity level.
+         */
+        this.interactive = 'none';
+        /**
+         * Enable CSS entry animations.
+         */
+        this.animated = false;
+        /**
+         * Show legend below chart.
+         */
+        this.showLegend = false;
+        /**
+         * Show grid lines.
+         */
+        this.showGrid = true;
+        /**
+         * Show axis labels.
+         */
+        this.showAxis = true;
+        /**
+         * Stroke width for area outlines.
+         */
+        this.strokeWidth = 2;
+        /**
+         * Chart width (SVG viewBox).
+         */
+        this.width = 400;
+        /**
+         * Aspect ratio as width/height.
+         */
+        this.aspectRatio = 16 / 9;
+        this.parsedData = null;
+        this.hoveredSeries = null;
+        this.tooltipData = null;
+        this.handleSeriesEnter = (seriesIndex) => {
+            if (this.interactive === 'none')
+                return;
+            this.hoveredSeries = seriesIndex;
+        };
+        this.handleSeriesLeave = () => {
+            this.hoveredSeries = null;
+        };
+    }
+    parseData() {
+        try {
+            const parsed = JSON.parse(this.data);
+            if (Array.isArray(parsed)) {
+                this.parsedData = parsed;
+            }
+            else if (parsed.series && parsed.labels) {
+                this.parsedData = parsed;
+            }
+            else {
+                this.parsedData = null;
+            }
+        }
+        catch {
+            this.parsedData = null;
+        }
+    }
+    componentWillLoad() {
+        this.parseData();
+    }
+    get height() {
+        return this.width / this.aspectRatio;
+    }
+    get margins() {
+        return {
+            ...defaultMargins,
+            left: this.showAxis ? 40 : 8,
+            bottom: this.showAxis ? 40 : 10,
+        };
+    }
+    get chartBounds() {
+        const { width, height, margins } = this;
+        return {
+            x: margins.left,
+            y: margins.top,
+            width: width - margins.left - margins.right,
+            height: height - margins.top - margins.bottom,
+        };
+    }
+    isMultiSeries(data) {
+        return !Array.isArray(data) && 'series' in data;
+    }
+    renderSingleSeries(data) {
+        const { chartBounds, curve, showStroke, showGrid, showAxis, animated, strokeWidth, opacity } = this;
+        const labels = data.map((d) => d.label);
+        const values = data.map((d) => d.value);
+        const domain = computeDomain(values, 0.1, true);
+        const xScale = bandScale(labels, [chartBounds.x, chartBounds.x + chartBounds.width]);
+        const yScale = linearScale(domain, [chartBounds.y + chartBounds.height, chartBounds.y]);
+        const ticks = generateTickMarks(domain, [chartBounds.y + chartBounds.height, chartBounds.y], 5, formatAxisValue);
+        const points = data.map((d) => ({
+            x: xScale.scale(d.label) + xScale.bandwidth / 2,
+            y: yScale(d.value),
+        }));
+        const baseline = chartBounds.y + chartBounds.height;
+        const areaD = areaPath(points, baseline, curve);
+        const lineD = linePath(points, curve);
+        return (h("g", { class: "area-chart__content" }, showGrid && (h("g", { class: "area-chart__grid" }, gridLinePaths(ticks.map((t) => t.position), 'horizontal', chartBounds).map((d, i) => (h("path", { key: i, d: d, class: "area-chart__grid-line" }))))), h("path", { d: areaD, class: {
+                'area-chart__area': true,
+                'area-chart__area--animated': animated,
+            }, style: { opacity: String(opacity) } }), showStroke && (h("path", { d: lineD, class: {
+                'area-chart__stroke': true,
+                'area-chart__stroke--animated': animated,
+            }, style: { strokeWidth: `${strokeWidth}px` } })), showAxis && this.renderAxes(xScale, ticks, labels)));
+    }
+    renderMultiSeries(data) {
+        const { chartBounds, curve, stacked, showStroke, showGrid, showAxis, animated, strokeWidth, opacity} = this;
+        const labels = data.labels;
+        const seriesCount = data.series.length;
+        const xScale = bandScale(labels, [chartBounds.x, chartBounds.x + chartBounds.width]);
+        const baseline = chartBounds.y + chartBounds.height;
+        // Compute domain based on stacking mode
+        let domain;
+        if (stacked) {
+            const stackedTotals = labels.map((_, i) => data.series.reduce((sum, s) => sum + Math.max(0, s.values[i] ?? 0), 0));
+            domain = computeDomain(stackedTotals, 0.1, true);
+        }
+        else {
+            const allValues = data.series.flatMap((s) => s.values);
+            domain = computeDomain(allValues, 0.1, true);
+        }
+        const yScale = linearScale(domain, [chartBounds.y + chartBounds.height, chartBounds.y]);
+        const ticks = generateTickMarks(domain, [chartBounds.y + chartBounds.height, chartBounds.y], 5, formatAxisValue);
+        // Generate points for each series
+        const seriesPoints = data.series.map((series) => labels.map((label, i) => ({
+            x: xScale.scale(label) + xScale.bandwidth / 2,
+            y: yScale(series.values[i] ?? 0),
+        })));
+        // Generate stacked or overlapping areas
+        let areaPaths;
+        if (stacked) {
+            // For stacked, accumulate Y values
+            const stackedSeriesPoints = [];
+            let cumulative = labels.map(() => 0);
+            for (let sIdx = 0; sIdx < seriesCount; sIdx++) {
+                const series = data.series[sIdx];
+                const points = labels.map((label, i) => {
+                    cumulative[i] += Math.max(0, series.values[i] ?? 0);
+                    return {
+                        x: xScale.scale(label) + xScale.bandwidth / 2,
+                        y: yScale(cumulative[i]),
+                    };
+                });
+                stackedSeriesPoints.push(points);
+            }
+            areaPaths = stackedAreaPaths(stackedSeriesPoints, baseline, curve);
+        }
+        else {
+            // Non-stacked: each series gets its own area from baseline
+            areaPaths = seriesPoints.map((points) => areaPath(points, baseline, curve));
+        }
+        return (h("g", { class: "area-chart__content" }, showGrid && (h("g", { class: "area-chart__grid" }, gridLinePaths(ticks.map((t) => t.position), 'horizontal', chartBounds).map((d, i) => (h("path", { key: i, d: d, class: "area-chart__grid-line" }))))), (stacked ? areaPaths : [...areaPaths].reverse()).map((pathD, i) => {
+            const seriesIndex = stacked ? i : seriesCount - 1 - i;
+            const series = data.series[seriesIndex];
+            const isHovered = this.hoveredSeries === seriesIndex;
+            return (h("g", { key: seriesIndex, class: {
+                    'area-chart__series': true,
+                    'area-chart__series--hovered': isHovered,
+                }, onMouseEnter: () => this.handleSeriesEnter(seriesIndex), onMouseLeave: this.handleSeriesLeave }, h("path", { d: pathD, class: {
+                    'area-chart__area': true,
+                    'area-chart__area--animated': animated,
+                    [`area-chart__area--series-${seriesIndex}`]: true,
+                }, style: {
+                    opacity: String(isHovered ? Math.min(opacity + 0.2, 1) : opacity),
+                    ...(series.color ? { fill: series.color } : {}),
+                } }), showStroke && (h("path", { d: linePath(stacked ? this.getStackedPoints(data, seriesIndex, xScale, yScale, labels) : seriesPoints[seriesIndex], curve), class: {
+                    'area-chart__stroke': true,
+                    'area-chart__stroke--animated': animated,
+                    [`area-chart__stroke--series-${seriesIndex}`]: true,
+                }, style: {
+                    strokeWidth: `${strokeWidth}px`,
+                    ...(series.color ? { stroke: series.color } : {}),
+                } }))));
+        }), showAxis && this.renderAxes(xScale, ticks, labels)));
+    }
+    getStackedPoints(data, upToSeriesIndex, xScale, yScale, labels) {
+        return labels.map((label, i) => {
+            let cumulative = 0;
+            for (let sIdx = 0; sIdx <= upToSeriesIndex; sIdx++) {
+                cumulative += Math.max(0, data.series[sIdx].values[i] ?? 0);
+            }
+            return {
+                x: xScale.scale(label) + xScale.bandwidth / 2,
+                y: yScale(cumulative),
+            };
+        });
+    }
+    renderAxes(xScale, yTicks, labels) {
+        const { chartBounds } = this;
+        // Filter out ticks too close to the bottom to avoid overlap with x-axis labels
+        const filteredYTicks = yTicks.filter((tick) => {
+            const distanceFromBottom = (chartBounds.y + chartBounds.height) - tick.position;
+            return distanceFromBottom > 15;
+        });
+        return (h("g", { class: "area-chart__axes" }, h("g", { class: "area-chart__axis area-chart__axis--y" }, h("line", { x1: chartBounds.x, y1: chartBounds.y, x2: chartBounds.x, y2: chartBounds.y + chartBounds.height, class: "area-chart__axis-line" }), filteredYTicks.map((tick, i) => (h("g", { key: i, class: "area-chart__tick" }, h("text", { x: chartBounds.x - 10, y: tick.position, class: "area-chart__tick-label area-chart__tick-label--y" }, tick.label))))), h("g", { class: "area-chart__axis area-chart__axis--x" }, h("line", { x1: chartBounds.x, y1: chartBounds.y + chartBounds.height, x2: chartBounds.x + chartBounds.width, y2: chartBounds.y + chartBounds.height, class: "area-chart__axis-line" }), labels.map((label, i) => {
+            const x = xScale.scale(label) + xScale.bandwidth / 2;
+            return (h("text", { key: i, x: x, y: chartBounds.y + chartBounds.height + 16, class: "area-chart__tick-label area-chart__tick-label--x" }, label));
+        }))));
+    }
+    renderLegend(data) {
+        return (h("div", { class: "area-chart__legend" }, data.series.map((series, i) => (h("div", { key: i, class: {
+                'area-chart__legend-item': true,
+                'area-chart__legend-item--hovered': this.hoveredSeries === i,
+            }, onMouseEnter: () => this.handleSeriesEnter(i), onMouseLeave: this.handleSeriesLeave }, h("span", { class: `area-chart__legend-swatch area-chart__legend-swatch--series-${i}`, style: series.color ? { backgroundColor: series.color } : {} }), h("span", { class: "area-chart__legend-label" }, series.name))))));
+    }
+    render() {
+        const { parsedData, width, height, showLegend, interactive, chartLabel } = this;
+        if (!parsedData) {
+            return (h(Host, { class: "area-chart area-chart--empty" }, h("p", { class: "area-chart__empty-message" }, "No data available")));
+        }
+        const isMulti = this.isMultiSeries(parsedData);
+        const singleData = isMulti ? null : parsedData;
+        const multiData = isMulti ? parsedData : null;
+        const description = chartLabel ||
+            (singleData
+                ? generateChartDescription('area', singleData)
+                : `Area chart with ${multiData.series.length} series`);
+        const chartAriaAttrs = getChartAriaAttrs(description, interactive !== 'none');
+        return (h(Host, { class: {
+                'area-chart': true,
+                'area-chart--interactive': interactive !== 'none',
+            } }, h("style", null, srOnlyStyles), h("svg", { viewBox: `0 0 ${width} ${height}`, class: "area-chart__svg", ...chartAriaAttrs }, singleData && this.renderSingleSeries(singleData), multiData && this.renderMultiSeries(multiData)), singleData && (h("div", { innerHTML: generateDataTable(singleData) })), showLegend && multiData && this.renderLegend(multiData), h("slot", null)));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "data": [{
+                "parseData": 0
+            }]
+    }; }
+};
+AfAreaChart.style = afAreaChartCss();
+
+export { AfAreaChart as af_area_chart };

package/dist/esm/af-aspect-ratio.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-CYq0zyKH.js';
+import { r as registerInstance, h } from './index-BjfY9fsk.js';
 
-const afAspectRatioCss = ":host{display:block;width:100%}.aspect-ratio-container{width:100%;position:relative;overflow:hidden}.aspect-ratio-container ::slotted(*){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}";
+const afAspectRatioCss = () => `:host{display:block;width:100%}.aspect-ratio-container{width:100%;position:relative;overflow:hidden}.aspect-ratio-container ::slotted(*){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}`;
 
 const AfAspectRatio = class {
     constructor(hostRef) {
@@ -75,7 +75,6 @@ const AfAspectRatio = class {
         return (h("div", { key: '02bfa5463911ecd25903521e90a0570bb3bca0ad', class: "aspect-ratio-container", style: { aspectRatio: ratioValue } }, h("slot", { key: '9575c859052e8f1b1b362d9395fdfdf43d46b0b4' })));
     }
 };
-AfAspectRatio.style = afAspectRatioCss;
+AfAspectRatio.style = afAspectRatioCss();
 
 export { AfAspectRatio as af_aspect_ratio };
-//# sourceMappingURL=af-aspect-ratio.entry.js.map

package/dist/esm/af-bar-chart.entry.js

@@ -0,0 +1,343 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BjfY9fsk.js';
+import { d as defaultMargins, b as bandScale, g as generateTickMarks, l as linearScale, f as formatAxisValue, c as computeDomain } from './scales-BSPfXvdg.js';
+import { f as barPath, g as gridLinePaths, b as generateChartDescription, c as generateDataTable, d as getChartAriaAttrs, e as srOnlyStyles } from './a11y-DEGKc9o3.js';
+
+const afBarChartCss = () => `:host{display:block;position:relative;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif)}.bar-chart__chart-wrapper{position:relative}.bar-chart__svg{display:block;width:100%;height:auto;overflow:visible}.bar-chart__grid-line{fill:none;stroke:var(--af-chart-grid, #e8ebeb);stroke-width:1;stroke-dasharray:4 2}.bar-chart__bar{fill:var(--af-chart-1, #c6d5d1);transition:opacity 0.15s ease, transform 0.15s ease}.bar-chart__bar--series-0{fill:var(--af-chart-1, #c6d5d1)}.bar-chart__bar--series-1{fill:var(--af-chart-2, #dde6e3)}.bar-chart__bar--series-2{fill:var(--af-chart-3, #c0ab8d)}.bar-chart__bar--series-3{fill:var(--af-chart-4, #dfd5c6)}.bar-chart__bar--series-4{fill:var(--af-chart-5, #14343b)}.bar-chart__bar-group--highlighted .bar-chart__bar{fill:var(--af-chart-highlight, #a6fff8)}:host(.bar-chart--interactive) .bar-chart__bar-group{cursor:pointer}:host(.bar-chart--interactive) .bar-chart__bar-group:hover .bar-chart__bar,.bar-chart__bar-group--hovered .bar-chart__bar{opacity:0.85;filter:brightness(1.05)}.bar-chart__bar--animated{animation:bar-grow 1s ease-out backwards}:host(.bar-chart--vertical) .bar-chart__bar--animated{transform-origin:center bottom}:host(.bar-chart--horizontal) .bar-chart__bar--animated{transform-origin:left center}@keyframes bar-grow{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}:host(.bar-chart--horizontal) .bar-chart__bar--animated{animation-name:bar-grow-horizontal}@keyframes bar-grow-horizontal{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}.bar-chart__bar-group:nth-child(1) .bar-chart__bar--animated{animation-delay:0ms}.bar-chart__bar-group:nth-child(2) .bar-chart__bar--animated{animation-delay:80ms}.bar-chart__bar-group:nth-child(3) .bar-chart__bar--animated{animation-delay:160ms}.bar-chart__bar-group:nth-child(4) .bar-chart__bar--animated{animation-delay:240ms}.bar-chart__bar-group:nth-child(5) .bar-chart__bar--animated{animation-delay:320ms}.bar-chart__bar-group:nth-child(6) .bar-chart__bar--animated{animation-delay:400ms}.bar-chart__bar-group:nth-child(7) .bar-chart__bar--animated{animation-delay:480ms}.bar-chart__bar-group:nth-child(8) .bar-chart__bar--animated{animation-delay:560ms}.bar-chart__bar-group:nth-child(9) .bar-chart__bar--animated{animation-delay:640ms}.bar-chart__bar-group:nth-child(10) .bar-chart__bar--animated{animation-delay:720ms}.bar-chart__bar-group:nth-child(11) .bar-chart__bar--animated{animation-delay:800ms}.bar-chart__bar-group:nth-child(12) .bar-chart__bar--animated{animation-delay:880ms}.bar-chart__axis-line{stroke:var(--af-chart-grid, #e8ebeb);stroke-width:1}.bar-chart__tick-label{fill:var(--af-chart-text, #2b484f);font-size:11px;font-family:inherit}.bar-chart__tick-label--value{text-anchor:end;dominant-baseline:middle}.bar-chart__tick-label--category{text-anchor:middle;dominant-baseline:hanging}:host(.bar-chart--horizontal) .bar-chart__tick-label--value{text-anchor:middle;dominant-baseline:hanging}:host(.bar-chart--horizontal) .bar-chart__tick-label--category{text-anchor:end;dominant-baseline:middle}.bar-chart__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:16px;padding:0 8px}.bar-chart__legend-item{display:flex;align-items:center;gap:6px}.bar-chart__legend-swatch{width:12px;height:12px;border-radius:2px;flex-shrink:0}.bar-chart__legend-swatch--series-0{background-color:var(--af-chart-1, #c6d5d1)}.bar-chart__legend-swatch--series-1{background-color:var(--af-chart-2, #dde6e3)}.bar-chart__legend-swatch--series-2{background-color:var(--af-chart-3, #c0ab8d)}.bar-chart__legend-swatch--series-3{background-color:var(--af-chart-4, #dfd5c6)}.bar-chart__legend-swatch--series-4{background-color:var(--af-chart-5, #14343b)}.bar-chart__legend-label{font-size:13px;color:var(--af-chart-text, #2b484f)}.bar-chart__tooltip{position:absolute;transform:translate(-50%, -100%);margin-top:-8px;padding:8px 12px;background:var(--af-chart-tooltip-bg, #ffffff);border:1px solid var(--af-chart-tooltip-border, #e8ebeb);border-radius:6px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.1);pointer-events:none;z-index:10;white-space:nowrap}.bar-chart__tooltip-label{font-size:12px;color:var(--af-chart-text-muted, #6b8085);margin-bottom:2px}.bar-chart__tooltip-value{font-size:14px;font-weight:600;color:var(--af-chart-tooltip-text, #2b484f)}.bar-chart--empty{display:flex;align-items:center;justify-content:center;min-height:200px}.bar-chart__empty-message{font-size:14px;color:var(--af-chart-text-muted, #6b8085)}`;
+
+const AfBarChart = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Chart data as JSON string.
+         * Single series: `[{"label":"Jan","value":100}, ...]`
+         * Multi-series: `{"labels":["Jan","Feb"],"series":[{"name":"A","values":[100,200]}]}`
+         */
+        this.data = '[]';
+        /**
+         * Theme for colors. Inherits from parent af-chart-section if nested.
+         */
+        this.theme = 'white';
+        /**
+         * Bar orientation.
+         */
+        this.orientation = 'vertical';
+        /**
+         * Stack multiple series on top of each other.
+         */
+        this.stacked = false;
+        /**
+         * Interactivity level.
+         * - `none`: Static SVG, optimal for SSR
+         * - `hover`: CSS hover states with native tooltips
+         * - `tooltip`: JS-powered rich tooltips
+         */
+        this.interactive = 'none';
+        /**
+         * Enable CSS entry animations.
+         */
+        this.animated = false;
+        /**
+         * Show legend below chart.
+         */
+        this.showLegend = false;
+        /**
+         * Show grid lines.
+         */
+        this.showGrid = true;
+        /**
+         * Show axis labels.
+         */
+        this.showAxis = true;
+        /**
+         * Corner radius for bars.
+         */
+        this.barRadius = 4;
+        /**
+         * Chart width (SVG viewBox). Height is calculated from aspect ratio.
+         */
+        this.width = 400;
+        /**
+         * Aspect ratio as width/height (e.g., 16/9 = 1.78).
+         */
+        this.aspectRatio = 16 / 9;
+        this.parsedData = null;
+        this.hoveredIndex = null;
+        this.tooltipData = null;
+        this.handleMouseEnter = (index, x, y, label, value) => {
+            if (this.interactive === 'none')
+                return;
+            this.hoveredIndex = index;
+            if (this.interactive === 'tooltip') {
+                this.tooltipData = { x, y, label, value };
+            }
+        };
+        this.handleMouseLeave = () => {
+            this.hoveredIndex = null;
+            this.tooltipData = null;
+        };
+    }
+    parseData() {
+        try {
+            const parsed = JSON.parse(this.data);
+            if (Array.isArray(parsed)) {
+                this.parsedData = parsed;
+            }
+            else if (parsed.series && parsed.labels) {
+                this.parsedData = parsed;
+            }
+            else {
+                this.parsedData = null;
+            }
+        }
+        catch {
+            this.parsedData = null;
+        }
+    }
+    componentWillLoad() {
+        this.parseData();
+    }
+    get height() {
+        return this.width / this.aspectRatio;
+    }
+    get margins() {
+        return {
+            ...defaultMargins,
+            left: this.showAxis ? 40 : 8,
+            bottom: this.showAxis ? 40 : 10,
+        };
+    }
+    get chartBounds() {
+        const { width, height, margins } = this;
+        return {
+            x: margins.left,
+            y: margins.top,
+            width: width - margins.left - margins.right,
+            height: height - margins.top - margins.bottom,
+        };
+    }
+    isMultiSeries(data) {
+        return !Array.isArray(data) && 'series' in data;
+    }
+    renderSingleSeries(data) {
+        const { chartBounds, orientation, barRadius, showGrid, showAxis, animated} = this;
+        const isVertical = orientation === 'vertical';
+        const labels = data.map((d) => d.label);
+        const values = data.map((d) => d.value);
+        const domain = computeDomain(values, 0.05);
+        const categoryScale = isVertical
+            ? bandScale(labels, [chartBounds.x, chartBounds.x + chartBounds.width])
+            : bandScale(labels, [chartBounds.y, chartBounds.y + chartBounds.height]);
+        const valueScale = isVertical
+            ? linearScale(domain, [chartBounds.y + chartBounds.height, chartBounds.y])
+            : linearScale(domain, [chartBounds.x, chartBounds.x + chartBounds.width]);
+        const ticks = generateTickMarks(domain, isVertical
+            ? [chartBounds.y + chartBounds.height, chartBounds.y]
+            : [chartBounds.x, chartBounds.x + chartBounds.width], 5, formatAxisValue);
+        const zeroPos = valueScale(0);
+        return (h("g", { class: "bar-chart__content" }, showGrid && (h("g", { class: "bar-chart__grid" }, gridLinePaths(ticks.map((t) => t.position), isVertical ? 'horizontal' : 'vertical', chartBounds).map((d, i) => (h("path", { key: i, d: d, class: "bar-chart__grid-line" }))))), h("g", { class: "bar-chart__bars" }, data.map((point, i) => {
+            const categoryPos = categoryScale.scale(point.label);
+            const valuePos = valueScale(point.value);
+            const isPositive = point.value >= 0;
+            let x, y, width, height;
+            if (isVertical) {
+                x = categoryPos;
+                width = categoryScale.bandwidth;
+                y = isPositive ? valuePos : zeroPos;
+                height = Math.abs(valuePos - zeroPos);
+            }
+            else {
+                y = categoryPos;
+                height = categoryScale.bandwidth;
+                x = isPositive ? zeroPos : valuePos;
+                width = Math.abs(valuePos - zeroPos);
+            }
+            const isHovered = this.hoveredIndex === i;
+            const path = barPath(x, y, width, height, barRadius, orientation);
+            return (h("g", { key: i, class: {
+                    'bar-chart__bar-group': true,
+                    'bar-chart__bar-group--hovered': isHovered,
+                    'bar-chart__bar-group--highlighted': point.highlight ?? false,
+                }, onMouseEnter: () => this.handleMouseEnter(i, x + width / 2, y, point.label, point.value), onMouseLeave: this.handleMouseLeave }, h("path", { d: path, class: {
+                    'bar-chart__bar': true,
+                    'bar-chart__bar--animated': animated,
+                }, style: point.color ? { fill: point.color } : {}, "data-index": i })));
+        })), showAxis && this.renderAxes(categoryScale, ticks, isVertical, zeroPos)));
+    }
+    renderStackedSeries(data) {
+        const { chartBounds, orientation, barRadius, showGrid, showAxis, animated} = this;
+        const isVertical = orientation === 'vertical';
+        const labels = data.labels;
+        const seriesCount = data.series.length;
+        // Compute stacked totals for domain
+        const stackedTotals = labels.map((_, i) => data.series.reduce((sum, s) => sum + Math.max(0, s.values[i] ?? 0), 0));
+        const domain = computeDomain(stackedTotals, 0.05);
+        const categoryScale = isVertical
+            ? bandScale(labels, [chartBounds.x, chartBounds.x + chartBounds.width])
+            : bandScale(labels, [chartBounds.y, chartBounds.y + chartBounds.height]);
+        const valueScale = isVertical
+            ? linearScale(domain, [chartBounds.y + chartBounds.height, chartBounds.y])
+            : linearScale(domain, [chartBounds.x, chartBounds.x + chartBounds.width]);
+        const ticks = generateTickMarks(domain, isVertical
+            ? [chartBounds.y + chartBounds.height, chartBounds.y]
+            : [chartBounds.x, chartBounds.x + chartBounds.width], 5, formatAxisValue);
+        const zeroPos = valueScale(0);
+        // Build stacked bar segments
+        const stackedBars = labels.map((label, labelIndex) => {
+            let cumulative = 0;
+            const categoryPos = categoryScale.scale(label);
+            return data.series.map((series, seriesIndex) => {
+                const value = series.values[labelIndex] ?? 0;
+                const startValue = cumulative;
+                cumulative += Math.max(0, value);
+                const startPos = valueScale(startValue);
+                const endPos = valueScale(cumulative);
+                let x, y, width, height;
+                if (isVertical) {
+                    x = categoryPos;
+                    width = categoryScale.bandwidth;
+                    y = endPos;
+                    height = Math.abs(startPos - endPos);
+                }
+                else {
+                    y = categoryPos;
+                    height = categoryScale.bandwidth;
+                    x = startPos;
+                    width = Math.abs(endPos - startPos);
+                }
+                // Only round the top segment
+                const isTopSegment = seriesIndex === seriesCount - 1;
+                const radius = isTopSegment ? barRadius : 0;
+                return {
+                    x,
+                    y,
+                    width,
+                    height,
+                    value,
+                    label,
+                    seriesName: series.name,
+                    seriesIndex,
+                    labelIndex,
+                    color: series.color,
+                    path: barPath(x, y, width, height, radius, orientation),
+                };
+            });
+        });
+        return (h("g", { class: "bar-chart__content" }, showGrid && (h("g", { class: "bar-chart__grid" }, gridLinePaths(ticks.map((t) => t.position), isVertical ? 'horizontal' : 'vertical', chartBounds).map((d, i) => (h("path", { key: i, d: d, class: "bar-chart__grid-line" }))))), h("g", { class: "bar-chart__bars" }, stackedBars.flat().map((bar, i) => (h("g", { key: i, class: "bar-chart__bar-group", onMouseEnter: () => this.handleMouseEnter(i, bar.x + bar.width / 2, bar.y, `${bar.label} - ${bar.seriesName}`, bar.value), onMouseLeave: this.handleMouseLeave }, h("path", { d: bar.path, class: {
+                'bar-chart__bar': true,
+                'bar-chart__bar--animated': animated,
+                [`bar-chart__bar--series-${bar.seriesIndex}`]: true,
+            }, style: bar.color ? { fill: bar.color } : {} }))))), showAxis && this.renderAxes(categoryScale, ticks, isVertical, zeroPos)));
+    }
+    renderGroupedSeries(data) {
+        const { chartBounds, orientation, barRadius, showGrid, showAxis, animated} = this;
+        const isVertical = orientation === 'vertical';
+        const labels = data.labels;
+        const seriesCount = data.series.length;
+        // Compute domain from all values
+        const allValues = data.series.flatMap((s) => s.values);
+        const domain = computeDomain(allValues, 0.05);
+        const categoryScale = isVertical
+            ? bandScale(labels, [chartBounds.x, chartBounds.x + chartBounds.width], 0.2)
+            : bandScale(labels, [chartBounds.y, chartBounds.y + chartBounds.height], 0.2);
+        const valueScale = isVertical
+            ? linearScale(domain, [chartBounds.y + chartBounds.height, chartBounds.y])
+            : linearScale(domain, [chartBounds.x, chartBounds.x + chartBounds.width]);
+        const ticks = generateTickMarks(domain, isVertical
+            ? [chartBounds.y + chartBounds.height, chartBounds.y]
+            : [chartBounds.x, chartBounds.x + chartBounds.width], 5, formatAxisValue);
+        const zeroPos = valueScale(0);
+        const groupWidth = categoryScale.bandwidth;
+        const barWidth = groupWidth / seriesCount;
+        return (h("g", { class: "bar-chart__content" }, showGrid && (h("g", { class: "bar-chart__grid" }, gridLinePaths(ticks.map((t) => t.position), isVertical ? 'horizontal' : 'vertical', chartBounds).map((d, i) => (h("path", { key: i, d: d, class: "bar-chart__grid-line" }))))), h("g", { class: "bar-chart__bars" }, labels.map((label, labelIndex) => {
+            const categoryPos = categoryScale.scale(label);
+            return data.series.map((series, seriesIndex) => {
+                const value = series.values[labelIndex] ?? 0;
+                const valuePos = valueScale(value);
+                const isPositive = value >= 0;
+                let x, y, width, height;
+                if (isVertical) {
+                    x = categoryPos + seriesIndex * barWidth;
+                    width = barWidth * 0.9;
+                    y = isPositive ? valuePos : zeroPos;
+                    height = Math.abs(valuePos - zeroPos);
+                }
+                else {
+                    y = categoryPos + seriesIndex * barWidth;
+                    height = barWidth * 0.9;
+                    x = isPositive ? zeroPos : valuePos;
+                    width = Math.abs(valuePos - zeroPos);
+                }
+                const path = barPath(x, y, width, height, barRadius, orientation);
+                return (h("g", { key: `${labelIndex}-${seriesIndex}`, class: "bar-chart__bar-group", onMouseEnter: () => this.handleMouseEnter(labelIndex * seriesCount + seriesIndex, x + width / 2, y, `${label} - ${series.name}`, value), onMouseLeave: this.handleMouseLeave }, h("path", { d: path, class: {
+                        'bar-chart__bar': true,
+                        'bar-chart__bar--animated': animated,
+                        [`bar-chart__bar--series-${seriesIndex}`]: true,
+                    }, style: series.color ? { fill: series.color } : {} })));
+            });
+        })), showAxis && this.renderAxes(categoryScale, ticks, isVertical, zeroPos)));
+    }
+    renderAxes(categoryScale, valueTicks, isVertical, zeroPos) {
+        const { chartBounds, parsedData } = this;
+        const labels = this.isMultiSeries(parsedData)
+            ? parsedData.labels
+            : parsedData.map((d) => d.label);
+        // Filter out ticks that would overlap with category axis labels
+        const filteredValueTicks = valueTicks.filter((tick) => {
+            if (isVertical) {
+                // Skip tick if it's too close to the bottom (where x-axis labels are)
+                const distanceFromBottom = (chartBounds.y + chartBounds.height) - tick.position;
+                return distanceFromBottom > 15;
+            }
+            // For horizontal, skip tick if too close to left edge
+            const distanceFromLeft = tick.position - chartBounds.x;
+            return distanceFromLeft > 15;
+        });
+        return (h("g", { class: "bar-chart__axes" }, h("g", { class: "bar-chart__axis bar-chart__axis--value" }, h("line", { x1: isVertical ? chartBounds.x : zeroPos, y1: isVertical ? chartBounds.y : chartBounds.y, x2: isVertical ? chartBounds.x : zeroPos, y2: isVertical ? chartBounds.y + chartBounds.height : chartBounds.y + chartBounds.height, class: "bar-chart__axis-line" }), filteredValueTicks.map((tick, i) => (h("g", { key: i, class: "bar-chart__tick" }, isVertical ? (h("text", { x: chartBounds.x - 10, y: tick.position, class: "bar-chart__tick-label bar-chart__tick-label--value" }, tick.label)) : (h("text", { x: tick.position, y: chartBounds.y + chartBounds.height + 24, class: "bar-chart__tick-label bar-chart__tick-label--value" }, tick.label)))))), h("g", { class: "bar-chart__axis bar-chart__axis--category" }, h("line", { x1: isVertical ? chartBounds.x : chartBounds.x, y1: isVertical ? chartBounds.y + chartBounds.height : chartBounds.y, x2: isVertical ? chartBounds.x + chartBounds.width : chartBounds.x, y2: isVertical ? chartBounds.y + chartBounds.height : chartBounds.y + chartBounds.height, class: "bar-chart__axis-line" }), labels.map((label, i) => {
+            const pos = categoryScale.scale(label) + categoryScale.bandwidth / 2;
+            return (h("text", { key: i, x: isVertical ? pos : chartBounds.x - 10, y: isVertical ? chartBounds.y + chartBounds.height + 16 : pos, class: "bar-chart__tick-label bar-chart__tick-label--category" }, label));
+        }))));
+    }
+    renderLegend(data) {
+        return (h("div", { class: "bar-chart__legend" }, data.series.map((series, i) => (h("div", { key: i, class: "bar-chart__legend-item" }, h("span", { class: `bar-chart__legend-swatch bar-chart__legend-swatch--series-${i}`, style: series.color ? { backgroundColor: series.color } : {} }), h("span", { class: "bar-chart__legend-label" }, series.name))))));
+    }
+    renderTooltip() {
+        const { tooltipData, width, height } = this;
+        if (!tooltipData)
+            return null;
+        // Convert SVG coordinates to percentages for proper positioning
+        const leftPct = (tooltipData.x / width) * 100;
+        const topPct = (tooltipData.y / height) * 100;
+        return (h("div", { class: "bar-chart__tooltip", style: {
+                left: `${leftPct}%`,
+                top: `${topPct}%`,
+            } }, h("div", { class: "bar-chart__tooltip-label" }, tooltipData.label), h("div", { class: "bar-chart__tooltip-value" }, tooltipData.value)));
+    }
+    render() {
+        const { parsedData, width, height, showLegend, interactive, chartLabel } = this;
+        if (!parsedData) {
+            return (h(Host, { class: "bar-chart bar-chart--empty" }, h("p", { class: "bar-chart__empty-message" }, "No data available")));
+        }
+        const isMulti = this.isMultiSeries(parsedData);
+        const singleData = isMulti ? null : parsedData;
+        const multiData = isMulti ? parsedData : null;
+        const description = chartLabel ||
+            (singleData
+                ? generateChartDescription('bar', singleData)
+                : `Bar chart with ${multiData.series.length} series`);
+        const chartAriaAttrs = getChartAriaAttrs(description, interactive !== 'none');
+        return (h(Host, { class: {
+                'bar-chart': true,
+                [`bar-chart--${this.orientation}`]: true,
+                'bar-chart--interactive': interactive !== 'none',
+            } }, h("style", null, srOnlyStyles), h("div", { class: "bar-chart__chart-wrapper" }, h("svg", { viewBox: `0 0 ${width} ${height}`, class: "bar-chart__svg", ...chartAriaAttrs }, singleData && this.renderSingleSeries(singleData), multiData && this.stacked && this.renderStackedSeries(multiData), multiData && !this.stacked && this.renderGroupedSeries(multiData)), interactive === 'tooltip' && this.renderTooltip()), singleData && (h("div", { innerHTML: generateDataTable(singleData) })), showLegend && multiData && this.renderLegend(multiData), h("slot", null)));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "data": [{
+                "parseData": 0
+            }]
+    }; }
+};
+AfBarChart.style = afBarChartCss();
+
+export { AfBarChart as af_bar_chart };

package/dist/esm/af-button-group.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-CYq0zyKH.js';
+import { r as registerInstance, h, H as Host } from './index-BjfY9fsk.js';
 
-const afButtonGroupCss = ":host{display:inline-block}.button-group{display:inline-flex;align-items:center;box-sizing:border-box}.direction-horizontal{flex-direction:row}.direction-vertical{flex-direction:column}::slotted(*){flex-shrink:0}";
+const afButtonGroupCss = () => `:host{display:inline-block}:host(.stack-mobile){max-width:100%}.button-group{display:inline-flex;align-items:center;box-sizing:border-box}.direction-horizontal{flex-direction:row}.direction-vertical{flex-direction:column}::slotted(*){flex-shrink:0}@media (max-width: 767px){:host(.stack-mobile){display:block;width:min(100%, 342px)}:host(.stack-mobile) .button-group{display:flex;flex-direction:column;width:100%;gap:var(--af-button-group-mobile-gap, 12px) !important}:host(.stack-mobile) ::slotted(af-button){width:100%;--af-button-width:100%}}`;
 
 const AfButtonGroup = class {
     constructor(hostRef) {
@@ -22,7 +22,6 @@ const AfButtonGroup = class {
         return (h(Host, { key: '28faa5610144730bd66361b304167a0fb64be5d5' }, h("div", { key: 'a4bcc27d77f421dff083f5cccfe261be34a9b8f1', class: classes, style: { gap: this.gap } }, h("slot", { key: '365862ea727b18cfa0a96f0b99d9fb338c0be91a' }))));
     }
 };
-AfButtonGroup.style = afButtonGroupCss;
+AfButtonGroup.style = afButtonGroupCss();
 
 export { AfButtonGroup as af_button_group };
-//# sourceMappingURL=af-button-group.entry.js.map