@affinda/wc 0.6.2 → 0.7.0

package/dist/collection/components/af-pie-chart/af-pie-chart.css

@@ -0,0 +1,234 @@
+/**
+ * af-pie-chart styles
+ */
+
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 0;
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+}
+
+/* ==========================================================================
+   Container Layout
+   ========================================================================== */
+
+.pie-chart__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 16px;
+  width: 100%;
+}
+
+:host(.pie-chart--with-legend) .pie-chart__container {
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+}
+
+@media (max-width: 480px) {
+  :host(.pie-chart--with-legend) .pie-chart__container {
+    flex-direction: column;
+  }
+
+  .pie-chart__chart-wrapper {
+    width: 160px;
+    height: 160px;
+  }
+}
+
+/* ==========================================================================
+   Chart Wrapper
+   ========================================================================== */
+
+.pie-chart__chart-wrapper {
+  position: relative;
+  flex-shrink: 0;
+  width: 180px;
+  height: 180px;
+}
+
+.pie-chart__svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* ==========================================================================
+   Segments
+   ========================================================================== */
+
+.pie-chart__segment {
+  transition: transform 0.15s ease, filter 0.15s ease;
+  transform-origin: center;
+}
+
+/* Color palette */
+.pie-chart__segment--0 { fill: var(--af-chart-1, #c6d5d1); }
+.pie-chart__segment--1 { fill: var(--af-chart-2, #dde6e3); }
+.pie-chart__segment--2 { fill: var(--af-chart-3, #c0ab8d); }
+.pie-chart__segment--3 { fill: var(--af-chart-4, #dfd5c6); }
+.pie-chart__segment--4 { fill: var(--af-chart-5, #14343b); }
+.pie-chart__segment--5 { fill: var(--af-chart-1, #c6d5d1); opacity: 0.7; }
+.pie-chart__segment--6 { fill: var(--af-chart-2, #dde6e3); opacity: 0.7; }
+.pie-chart__segment--7 { fill: var(--af-chart-3, #c0ab8d); opacity: 0.7; }
+
+/* Highlighted segment */
+.pie-chart__segment-group--highlighted .pie-chart__segment {
+  fill: var(--af-chart-highlight, #a6fff8);
+}
+
+/* Hover state */
+:host(.pie-chart--interactive) .pie-chart__segment-group {
+  cursor: pointer;
+  transition: transform 0.15s ease;
+}
+
+.pie-chart__segment-group--hovered .pie-chart__segment {
+  filter: brightness(1.1);
+}
+
+/* Segment animation */
+.pie-chart__segment--animated {
+  opacity: 0;
+  transform: scale(0.8);
+  animation: segment-reveal 0.8s ease-out forwards;
+}
+
+@keyframes segment-reveal {
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ==========================================================================
+   Labels
+   ========================================================================== */
+
+.pie-chart__label {
+  fill: var(--af-chart-text, #2b484f);
+  font-size: 11px;
+  font-weight: 600;
+  text-anchor: middle;
+  dominant-baseline: middle;
+  pointer-events: none;
+}
+
+.pie-chart__segment--animated + .pie-chart__label {
+  opacity: 0;
+  animation: label-fade 0.5s ease-out forwards;
+}
+
+@keyframes label-fade {
+  to {
+    opacity: 1;
+  }
+}
+
+/* ==========================================================================
+   Legend
+   ========================================================================== */
+
+.pie-chart__legend {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 120px;
+}
+
+.pie-chart__legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
+}
+
+:host(.pie-chart--interactive) .pie-chart__legend-item {
+  cursor: pointer;
+}
+
+.pie-chart__legend-item:hover,
+.pie-chart__legend-item--hovered {
+  background-color: var(--af-background-level-1, #f4f7f6);
+}
+
+.pie-chart__legend-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.pie-chart__legend-swatch--0 { background-color: var(--af-chart-1, #c6d5d1); }
+.pie-chart__legend-swatch--1 { background-color: var(--af-chart-2, #dde6e3); }
+.pie-chart__legend-swatch--2 { background-color: var(--af-chart-3, #c0ab8d); }
+.pie-chart__legend-swatch--3 { background-color: var(--af-chart-4, #dfd5c6); }
+.pie-chart__legend-swatch--4 { background-color: var(--af-chart-5, #14343b); }
+.pie-chart__legend-swatch--5 { background-color: var(--af-chart-1, #c6d5d1); opacity: 0.7; }
+.pie-chart__legend-swatch--6 { background-color: var(--af-chart-2, #dde6e3); opacity: 0.7; }
+.pie-chart__legend-swatch--7 { background-color: var(--af-chart-3, #c0ab8d); opacity: 0.7; }
+
+.pie-chart__legend-label {
+  flex: 1;
+  font-size: 13px;
+  color: var(--af-chart-text, #2b484f);
+}
+
+.pie-chart__legend-value {
+  font-size: 12px;
+  color: var(--af-chart-text-muted, #6b8085);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ==========================================================================
+   Tooltip
+   ========================================================================== */
+
+.pie-chart__tooltip {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  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;
+}
+
+.pie-chart__tooltip-label {
+  font-size: 12px;
+  color: var(--af-chart-text-muted, #6b8085);
+  margin-bottom: 2px;
+}
+
+.pie-chart__tooltip-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--af-chart-tooltip-text, #2b484f);
+}
+
+/* ==========================================================================
+   Empty State
+   ========================================================================== */
+
+.pie-chart--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+}
+
+.pie-chart__empty-message {
+  font-size: 14px;
+  color: var(--af-chart-text-muted, #6b8085);
+}

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

@@ -0,0 +1,385 @@
+import { h, Host } from "@stencil/core";
+import { arcPath, computeArcs, arcCentroid, generateChartDescription, generateDataTable, getChartAriaAttrs, srOnlyStyles, } from "../../utils/charts";
+/**
+ * A native SVG pie chart component with theme integration.
+ *
+ * Supports progressive interactivity and optional labels.
+ *
+ * @slot - Optional custom content (placed after chart)
+ *
+ * @example Simple pie chart
+ * ```html
+ * <af-pie-chart
+ *   data='[{"label":"Resumes","value":35},{"label":"Invoices","value":25}]'
+ *   theme="mist-green"
+ * ></af-pie-chart>
+ * ```
+ *
+ * @example Pie chart with labels and hover
+ * ```html
+ * <af-pie-chart
+ *   data='[{"label":"A","value":40},{"label":"B","value":30},{"label":"C","value":30}]'
+ *   show-labels
+ *   interactive="hover"
+ * ></af-pie-chart>
+ * ```
+ */
+export class AfPieChart {
+    constructor() {
+        /**
+         * Chart data as JSON string.
+         * Format: `[{"label":"Category","value":100}, ...]`
+         */
+        this.data = '[]';
+        /**
+         * Theme for colors.
+         */
+        this.theme = 'white';
+        /**
+         * Start angle in degrees (0 = 3 o'clock, -90 = 12 o'clock).
+         */
+        this.startAngle = -90;
+        /**
+         * Show percentage labels on segments.
+         */
+        this.showLabels = false;
+        /**
+         * Show legend beside/below chart.
+         */
+        this.showLegend = true;
+        /**
+         * Interactivity level.
+         */
+        this.interactive = 'none';
+        /**
+         * Enable CSS entry animations.
+         */
+        this.animated = false;
+        /**
+         * Chart size (width and height, square).
+         */
+        this.size = 180;
+        this.parsedData = null;
+        this.hoveredIndex = null;
+        this.tooltipData = null;
+        this.handleSegmentEnter = (index, x, y, label, value, percentage) => {
+            if (this.interactive === 'none')
+                return;
+            this.hoveredIndex = index;
+            if (this.interactive === 'tooltip') {
+                this.tooltipData = { x, y, label, value, percentage };
+            }
+        };
+        this.handleSegmentLeave = () => {
+            this.hoveredIndex = null;
+            this.tooltipData = null;
+        };
+    }
+    parseData() {
+        try {
+            const parsed = JSON.parse(this.data);
+            if (Array.isArray(parsed)) {
+                this.parsedData = parsed;
+            }
+            else {
+                this.parsedData = null;
+            }
+        }
+        catch {
+            this.parsedData = null;
+        }
+    }
+    componentWillLoad() {
+        this.parseData();
+    }
+    renderChart(data) {
+        const { size, startAngle, showLabels, animated, interactive } = this;
+        const cx = size / 2;
+        const cy = size / 2;
+        const outerRadius = (size / 2) - 10; // Leave padding
+        const labelRadius = outerRadius * 0.65; // Labels positioned inside pie
+        const startAngleRad = (startAngle * Math.PI) / 180;
+        const arcs = computeArcs(data.map((d) => d.value), startAngleRad);
+        return (h("g", { class: "pie-chart__content" }, arcs.map((arc, i) => {
+            const point = data[i];
+            const isHovered = this.hoveredIndex === i;
+            const path = arcPath(cx, cy, outerRadius, 0, arc.startAngle, arc.endAngle);
+            const centroid = arcCentroid(cx, cy, labelRadius, arc.startAngle, arc.endAngle);
+            // Hover offset direction
+            const midAngle = (arc.startAngle + arc.endAngle) / 2;
+            const hoverOffset = isHovered ? 5 : 0;
+            const offsetX = Math.cos(midAngle) * hoverOffset;
+            const offsetY = Math.sin(midAngle) * hoverOffset;
+            return (h("g", { key: i, class: {
+                    'pie-chart__segment-group': true,
+                    'pie-chart__segment-group--hovered': isHovered,
+                }, style: { transform: `translate(${offsetX}px, ${offsetY}px)` }, onMouseEnter: () => this.handleSegmentEnter(i, centroid.x, centroid.y, point.label, point.value, arc.percentage), onMouseLeave: this.handleSegmentLeave }, h("path", { d: path, class: {
+                    'pie-chart__segment': true,
+                    'pie-chart__segment--animated': animated,
+                    [`pie-chart__segment--${i}`]: true,
+                }, style: {
+                    ...(point.color ? { fill: point.color } : {}),
+                    animationDelay: `${i * 80}ms`,
+                } }), showLabels && arc.percentage > 0.05 && (h("text", { x: centroid.x, y: centroid.y, class: "pie-chart__label", style: { animationDelay: `${i * 80 + 400}ms` } }, (arc.percentage * 100).toFixed(0), "%"))));
+        })));
+    }
+    renderLegend(data) {
+        const arcs = computeArcs(data.map((d) => d.value));
+        return (h("div", { class: "pie-chart__legend" }, data.map((point, i) => (h("div", { key: i, class: {
+                'pie-chart__legend-item': true,
+                'pie-chart__legend-item--hovered': this.hoveredIndex === i,
+            }, onMouseEnter: () => {
+                if (this.interactive !== 'none') {
+                    this.hoveredIndex = i;
+                }
+            }, onMouseLeave: this.handleSegmentLeave }, h("span", { class: `pie-chart__legend-swatch pie-chart__legend-swatch--${i}`, style: point.color ? { backgroundColor: point.color } : {} }), h("span", { class: "pie-chart__legend-label" }, point.label), h("span", { class: "pie-chart__legend-value" }, (arcs[i].percentage * 100).toFixed(1), "%"))))));
+    }
+    renderTooltip() {
+        const { tooltipData, size } = this;
+        if (!tooltipData)
+            return null;
+        // Convert SVG coordinates to percentage for positioning
+        const leftPct = (tooltipData.x / size) * 100;
+        const topPct = (tooltipData.y / size) * 100;
+        return (h("div", { class: "pie-chart__tooltip", style: {
+                left: `${leftPct}%`,
+                top: `${topPct}%`,
+            } }, h("div", { class: "pie-chart__tooltip-label" }, tooltipData.label), h("div", { class: "pie-chart__tooltip-value" }, tooltipData.value, " (", (tooltipData.percentage * 100).toFixed(1), "%)")));
+    }
+    render() {
+        const { parsedData, size, theme, showLegend, interactive, chartLabel } = this;
+        if (!parsedData || parsedData.length === 0) {
+            return (h(Host, { class: "pie-chart pie-chart--empty" }, h("p", { class: "pie-chart__empty-message" }, "No data available")));
+        }
+        const description = chartLabel || generateChartDescription('pie', parsedData);
+        const chartAriaAttrs = getChartAriaAttrs(description, interactive !== 'none');
+        return (h(Host, { class: {
+                'pie-chart': true,
+                'pie-chart--interactive': interactive !== 'none',
+                'pie-chart--with-legend': showLegend,
+            } }, h("style", null, srOnlyStyles), h("div", { class: "pie-chart__container" }, h("div", { class: "pie-chart__chart-wrapper" }, h("svg", { viewBox: `0 0 ${size} ${size}`, class: "pie-chart__svg", ...chartAriaAttrs }, this.renderChart(parsedData)), interactive === 'tooltip' && this.renderTooltip()), showLegend && this.renderLegend(parsedData)), h("div", { innerHTML: generateDataTable(parsedData) }), h("slot", null)));
+    }
+    static get is() { return "af-pie-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-pie-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-pie-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.\nFormat: `[{\"label\":\"Category\",\"value\":100}, ...]`"
+                },
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'white'"
+            },
+            "startAngle": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Start angle in degrees (0 = 3 o'clock, -90 = 12 o'clock)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-angle",
+                "defaultValue": "-90"
+            },
+            "showLabels": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show percentage labels on segments."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-labels",
+                "defaultValue": "false"
+            },
+            "showLegend": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show legend beside/below chart."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-legend",
+                "defaultValue": "true"
+            },
+            "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."
+                },
+                "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"
+            },
+            "chartLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom accessible label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chart-label"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Chart size (width and height, square)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "180"
+            }
+        };
+    }
+    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-progress-line/af-progress-line.js

@@ -21,10 +21,10 @@ export class AfProgressLine {
         // Clamp progress between 0 and 1
         const clampedProgress = Math.max(0, Math.min(1, this.progress));
         const progressPercent = clampedProgress * 100;
-        return (h(Host, { key: 'f56ae490d0d9e374f540ccb88b0af53430796b42' }, h("div", { key: '20832426b290b5ee44d0507848f1cd4f06973202', class: {
+        return (h(Host, { key: '81c709625e9a575961d2fb997114aba42ecda729' }, h("div", { key: '9cacaa007c9d4b187f8a680f138a169674dad1fc', class: {
                 'progress-line': true,
                 [`progress-line--${this.orientation}`]: true,
-            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: '19623163676a5fd71c7b5ba91b33f53d188647c9', class: "progress-line__background" }), h("div", { key: '0bd6ccd0748930edd43a384bf8ddad55f8c9d07b', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
+            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: 'bbc88bea36895db2f44b2fb7b10d18ca07102ff0', class: "progress-line__background" }), h("div", { key: '51bc76e5af2178407fd77e9263434caa124f457d', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
     }
     static get is() { return "af-progress-line"; }
     static get encapsulation() { return "scoped"; }
@@ -83,4 +83,3 @@ export class AfProgressLine {
         };
     }
 }
-//# sourceMappingURL=af-progress-line.js.map

package/dist/collection/components/af-proposal-footer/af-proposal-footer.css

@@ -0,0 +1,27 @@
+.proposal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px 48px;
+  background-color: var(--colour-brand-inkwell, #14343b);
+}
+
+@media (max-width: 768px) {
+  .proposal-footer {
+    padding: 20px 24px;
+    gap: 12px;
+  }
+}
+
+.proposal-footer__logo {
+  flex-shrink: 0;
+  color: var(--colour-brand-white, #ffffff);
+}
+
+.proposal-footer__text {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--colour-inkwell-200, #9eb3b7);
+  text-align: right;
+}