@affinda/wc 0.6.1 → 0.7.0

package/dist/collection/components/af-bar-chart/af-bar-chart.js

@@ -0,0 +1,664 @@
+import { h, Host } from "@stencil/core";
+import { defaultMargins, linearScale, bandScale, computeDomain, generateTickMarks, formatAxisValue, barPath, gridLinePaths, generateChartDescription, generateDataTable, getChartAriaAttrs, srOnlyStyles, } from "../../utils/charts";
+/**
+ * A native SVG bar chart component with theme integration.
+ *
+ * Supports vertical/horizontal orientation, stacked bars, and progressive
+ * interactivity (none, hover, tooltip).
+ *
+ * @slot - Optional custom content (placed after chart)
+ *
+ * @example Simple bar chart
+ * ```html
+ * <af-bar-chart
+ *   data='[{"label":"Jan","value":120},{"label":"Feb","value":180}]'
+ *   theme="inkwell"
+ * ></af-bar-chart>
+ * ```
+ *
+ * @example Horizontal with hover
+ * ```html
+ * <af-bar-chart
+ *   data='[{"label":"Sales","value":1200},{"label":"Marketing","value":800}]'
+ *   orientation="horizontal"
+ *   interactive="hover"
+ * ></af-bar-chart>
+ * ```
+ */
+export class AfBarChart {
+    constructor() {
+        /**
+         * 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, interactive } = 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, interactive } = 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, interactive } = 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, theme, 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)));
+    }
+    static get is() { return "af-bar-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-bar-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-bar-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chart data as JSON string.\nSingle series: `[{\"label\":\"Jan\",\"value\":100}, ...]`\nMulti-series: `{\"labels\":[\"Jan\",\"Feb\"],\"series\":[{\"name\":\"A\",\"values\":[100,200]}]}`"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "data",
+                "defaultValue": "'[]'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | \"white-ivory\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Theme",
+                            "referenceLocation": "Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme for colors. Inherits from parent af-chart-section if nested."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'white'"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../utils/charts",
+                            "id": "src/utils/charts/index.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Bar orientation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'vertical'"
+            },
+            "stacked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stack multiple series on top of each other."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stacked",
+                "defaultValue": "false"
+            },
+            "interactive": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InteractiveMode",
+                    "resolved": "\"none\" | \"tooltip\"",
+                    "references": {
+                        "InteractiveMode": {
+                            "location": "import",
+                            "path": "../../utils/charts",
+                            "id": "src/utils/charts/index.ts::InteractiveMode",
+                            "referenceLocation": "InteractiveMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Interactivity level.\n- `none`: Static SVG, optimal for SSR\n- `hover`: CSS hover states with native tooltips\n- `tooltip`: JS-powered rich tooltips"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interactive",
+                "defaultValue": "'none'"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable CSS entry animations."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animated",
+                "defaultValue": "false"
+            },
+            "showLegend": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show legend below chart."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-legend",
+                "defaultValue": "false"
+            },
+            "showGrid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show grid lines."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-grid",
+                "defaultValue": "true"
+            },
+            "showAxis": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show axis labels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-axis",
+                "defaultValue": "true"
+            },
+            "barRadius": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Corner radius for bars."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bar-radius",
+                "defaultValue": "4"
+            },
+            "chartLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom accessible label. Auto-generated if not provided."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chart-label"
+            },
+            "width": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chart width (SVG viewBox). Height is calculated from aspect ratio."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "400"
+            },
+            "aspectRatio": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aspect ratio as width/height (e.g., 16/9 = 1.78)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aspect-ratio",
+                "defaultValue": "16 / 9"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedData": {},
+            "hoveredIndex": {},
+            "tooltipData": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "parseData"
+            }];
+    }
+}

package/dist/collection/components/af-button/af-button.js

@@ -52,10 +52,11 @@ export class AfButton {
             [`size-${this.size}`]: true,
             'disabled': this.disabled
         };
+        const showDefaultRightIcon = this.variant === 'ghost';
         const content = [
             h("span", { class: { 'icon-left': true, 'has-content': this.hasIconLeft } }, h("slot", { name: "icon-left", onSlotchange: this.handleSlotChange('icon-left') })),
             h("span", { class: "label" }, h("slot", null)),
-            h("span", { class: { 'icon-right': true, 'has-content': this.hasIconRight } }, h("slot", { name: "icon-right", onSlotchange: this.handleSlotChange('icon-right') }))
+            h("span", { class: { 'icon-right': true, 'has-content': this.hasIconRight || showDefaultRightIcon } }, h("slot", { name: "icon-right", onSlotchange: this.handleSlotChange('icon-right') }, showDefaultRightIcon ? h("af-icon", { name: "arrow-right", size: 18 }) : null))
         ];
         // Render as anchor if href is provided (and not disabled)
         if (this.href && !this.disabled) {
@@ -185,4 +186,3 @@ export class AfButton {
         };
     }
 }
-//# sourceMappingURL=af-button.js.map