@affinda/wc 0.6.2 → 0.7.0

package/dist/collection/components/af-action-item/af-action-item.js

@@ -0,0 +1,183 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Individual action item within an af-action-list container.
+ * Displays a task with status indicator, optional assignee, and due date.
+ *
+ * @slot - Task title content
+ * @slot meta - Additional metadata
+ *
+ * @example
+ * ```html
+ * <af-action-item status="in-progress" assignee="John" due-date="May 25">
+ *   Review pull request
+ *   <span slot="meta">PR #123</span>
+ * </af-action-item>
+ * ```
+ */
+export class AfActionItem {
+    constructor() {
+        /**
+         * Current status of the action item.
+         */
+        this.status = 'pending';
+        /**
+         * Whether clicking toggles the status (cycles: pending -> in-progress -> done).
+         */
+        this.interactive = false;
+        this.handleClick = () => {
+            if (!this.interactive || this.status === 'blocked')
+                return;
+            const nextStatus = {
+                pending: 'in-progress',
+                'in-progress': 'done',
+                done: 'pending',
+                blocked: 'blocked',
+            };
+            this.status = nextStatus[this.status];
+            this.actionItemToggle.emit({ status: this.status });
+        };
+    }
+    renderStatusIcon() {
+        switch (this.status) {
+            case 'done':
+                return h("af-icon", { name: "check-circle", size: 20 });
+            case 'in-progress':
+                return h("div", { class: "action-item__status-progress" });
+            case 'blocked':
+                return h("af-icon", { name: "close", size: 16 });
+            default:
+                return h("div", { class: "action-item__status-empty" });
+        }
+    }
+    render() {
+        return (h(Host, { key: 'e9b741bbdee7c4fa48f09005d6cc4214e73ddb2f', class: {
+                'action-item': true,
+                [`action-item--${this.status}`]: true,
+                'action-item--interactive': this.interactive,
+            }, role: "listitem" }, h("button", { key: '13fe8d6b8f8ea72a38320bf55c94c688604bd2f9', type: "button", class: "action-item__button", onClick: this.handleClick, disabled: !this.interactive || this.status === 'blocked', "aria-pressed": this.status === 'done' }, h("div", { key: '9e1cfc819e9e32d0dbbcb2d875d0116e126aef22', class: "action-item__status" }, this.renderStatusIcon()), h("div", { key: '59cabab93785b56b7540231384d0b729811f91f5', class: "action-item__content" }, h("div", { key: 'f6947c82c23feac7d786c089a050189fe5cf1b48', class: "action-item__title" }, h("slot", { key: '887c551106365435b52ca260582ccd450c4cb330' })), h("div", { key: '431ddbe13c22f54a9045859676cad6651c90fbb4', class: "action-item__meta" }, h("slot", { key: 'be29c8715008c4e9ed5a369e07dd865f9e90a10c', name: "meta" }))), (this.assignee || this.dueDate) && (h("div", { key: '7cb13d2d6a50f1ad5a9aca676b26f5f2120cef30', class: "action-item__info" }, this.assignee && (h("span", { key: 'a73f3880dbe016591f99dda0bd41a78d6f3fbe2e', class: "action-item__assignee" }, this.assignee)), this.dueDate && (h("span", { key: 'a178963ffe3d50d7e0dd4bba22ca84a39190780a', class: "action-item__due-date" }, this.dueDate)))))));
+    }
+    static get is() { return "af-action-item"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-action-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-action-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "status": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "ActionItemStatus",
+                    "resolved": "\"blocked\" | \"done\" | \"in-progress\" | \"pending\"",
+                    "references": {
+                        "ActionItemStatus": {
+                            "location": "local",
+                            "path": "/home/runner/work/affinda-website-npm-publish/affinda-website-npm-publish/packages/wc/src/components/af-action-item/af-action-item.tsx",
+                            "id": "src/components/af-action-item/af-action-item.tsx::ActionItemStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current status of the action item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "status",
+                "defaultValue": "'pending'"
+            },
+            "assignee": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional assignee name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "assignee"
+            },
+            "dueDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional due date display text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "due-date"
+            },
+            "interactive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether clicking toggles the status (cycles: pending -> in-progress -> done)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interactive",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "actionItemToggle",
+                "name": "af-action-item-toggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an interactive item is clicked and status changes."
+                },
+                "complexType": {
+                    "original": "{ status: ActionItemStatus }",
+                    "resolved": "{ status: ActionItemStatus; }",
+                    "references": {
+                        "ActionItemStatus": {
+                            "location": "local",
+                            "path": "/home/runner/work/affinda-website-npm-publish/affinda-website-npm-publish/packages/wc/src/components/af-action-item/af-action-item.tsx",
+                            "id": "src/components/af-action-item/af-action-item.tsx::ActionItemStatus"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/af-action-list/af-action-list.css

@@ -0,0 +1,100 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* ==========================================================================
+   Header
+   ========================================================================== */
+
+.action-list__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4, 16px);
+  margin-bottom: var(--space-3, 12px);
+}
+
+.action-list__header:empty {
+  display: none;
+}
+
+.action-list__heading {
+  flex: 1;
+  min-width: 0;
+}
+
+.action-list__heading:empty {
+  display: none;
+}
+
+.action-list__heading ::slotted(*) {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-book, 500);
+  font-size: 18px;
+  line-height: 24px;
+  color: var(--af-typography-heading-primary, #14343b);
+  margin: 0;
+}
+
+/* ==========================================================================
+   Progress Info
+   ========================================================================== */
+
+.action-list__progress-info {
+  flex-shrink: 0;
+}
+
+.action-list__progress-count {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-regular, 400);
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--af-typography-body-subtle, #60767b);
+}
+
+/* ==========================================================================
+   Progress Bar
+   ========================================================================== */
+
+.action-list__progress-bar {
+  height: 4px;
+  background-color: var(--af-background-level-1, #e8eeed);
+  border-radius: 2px;
+  overflow: hidden;
+  margin-bottom: var(--space-4, 16px);
+}
+
+.action-list__progress-fill {
+  height: 100%;
+  background-color: var(--af-background-contrast, #c6d5d1);
+  border-radius: 2px;
+  transition: width var(--motion-duration-base, 200ms) var(--motion-easing-standard);
+}
+
+/* ==========================================================================
+   Items Container
+   ========================================================================== */
+
+.action-list__items {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+/* ==========================================================================
+   Mobile Responsive
+   ========================================================================== */
+
+@media (max-width: 480px) {
+  .action-list__header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-2, 8px);
+  }
+
+  .action-list__progress-bar {
+    height: 6px;
+    border-radius: 3px;
+  }
+}

package/dist/collection/components/af-action-list/af-action-list.js

@@ -0,0 +1,97 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Container for a list of action items or tasks with status tracking.
+ * Renders children `af-action-item` elements with optional progress bar.
+ *
+ * @slot heading - Optional list heading
+ * @slot - `af-action-item` children
+ *
+ * @example
+ * ```html
+ * <af-action-list show-progress>
+ *   <span slot="heading">Tasks</span>
+ *   <af-action-item status="done">Complete documentation</af-action-item>
+ *   <af-action-item status="in-progress">Review PR</af-action-item>
+ *   <af-action-item status="pending">Deploy to staging</af-action-item>
+ * </af-action-list>
+ * ```
+ */
+export class AfActionList {
+    constructor() {
+        /**
+         * Show a progress bar indicating completion percentage.
+         */
+        this.showProgress = false;
+        this.progress = 0;
+        this.total = 0;
+        this.done = 0;
+    }
+    componentDidLoad() {
+        this.calculateProgress();
+    }
+    handleItemToggle() {
+        this.calculateProgress();
+    }
+    calculateProgress() {
+        const items = this.el.querySelectorAll('af-action-item');
+        this.total = items.length;
+        this.done = Array.from(items).filter((item) => item.status === 'done').length;
+        this.progress = this.total > 0 ? (this.done / this.total) * 100 : 0;
+    }
+    render() {
+        return (h(Host, { key: '1cbb14a9500a69b20876c263dc60687e6b6d8d68', class: "action-list" }, h("div", { key: '923234c9a5e8277ad875a41d4da4fd0609317273', class: "action-list__header" }, h("div", { key: '88707036867846e5285d1346ee9180139fb2cc38', class: "action-list__heading" }, h("slot", { key: '5b48fc6fa26c8c57867b4aef0e022904667a1f36', name: "heading" })), this.showProgress && this.total > 0 && (h("div", { key: '1adcd6469d9902adcaadf62a45281dfdd11e182e', class: "action-list__progress-info" }, h("span", { key: '6c0d5436f5f8e08bd20d8cc2ab45639f35ea5ec2', class: "action-list__progress-count" }, this.done, " / ", this.total)))), this.showProgress && this.total > 0 && (h("div", { key: 'e7aeb1785c7c5b08f544bc5f99c259a669870b55', class: "action-list__progress-bar" }, h("div", { key: '3886d6ae9dc5e1808f8927de6c99eb61dcf8835f', class: "action-list__progress-fill", style: { width: `${this.progress}%` } }))), h("div", { key: '3ad9adf79c2e75f923db5dabe454e382cfc04f81', class: "action-list__items", role: "list" }, h("slot", { key: '451de70ab0056acadd5de5c4b096d233cf612672' }))));
+    }
+    static get is() { return "af-action-list"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-action-list.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-action-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "showProgress": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a progress bar indicating completion percentage."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-progress",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "progress": {},
+            "total": {},
+            "done": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "af-action-item-toggle",
+                "method": "handleItemToggle",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,191 @@
+/**
+ * af-area-chart styles
+ */
+
+:host {
+  display: block;
+  position: relative;
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+}
+
+/* ==========================================================================
+   SVG Container
+   ========================================================================== */
+
+.area-chart__svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  overflow: visible;
+}
+
+/* ==========================================================================
+   Grid Lines
+   ========================================================================== */
+
+.area-chart__grid-line {
+  fill: none;
+  stroke: var(--af-chart-grid, #e8ebeb);
+  stroke-width: 1;
+  stroke-dasharray: 4 2;
+}
+
+/* ==========================================================================
+   Area Fill
+   ========================================================================== */
+
+.area-chart__area {
+  fill: var(--af-chart-1, #c6d5d1);
+  transition: opacity 0.2s ease;
+}
+
+/* Series color variants */
+.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); }
+
+/* Series hover */
+:host(.area-chart--interactive) .area-chart__series {
+  cursor: pointer;
+}
+
+.area-chart__series--hovered .area-chart__area {
+  filter: brightness(1.05);
+}
+
+/* Area animation */
+.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);
+  }
+}
+
+/* ==========================================================================
+   Stroke
+   ========================================================================== */
+
+.area-chart__stroke {
+  fill: none;
+  stroke: var(--af-chart-line, var(--af-chart-1, #c6d5d1));
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Series color variants - use line token for primary, palette for additional series */
+.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); }
+
+/* Stroke animation */
+.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;
+  }
+}
+
+/* ==========================================================================
+   Axes
+   ========================================================================== */
+
+.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;
+}
+
+/* ==========================================================================
+   Legend
+   ========================================================================== */
+
+.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);
+}
+
+/* ==========================================================================
+   Empty State
+   ========================================================================== */
+
+.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);
+}