@affinda/wc 0.6.2 → 0.7.0

package/dist/cjs/a11y-D7P8rpD_.js

@@ -0,0 +1,359 @@
+'use strict';
+
+/**
+ * SVG path and shape generators for chart elements.
+ */
+/**
+ * Generates a rounded rectangle path for bar charts.
+ *
+ * @param x - X position (left edge)
+ * @param y - Y position (top edge)
+ * @param width - Rectangle width
+ * @param height - Rectangle height
+ * @param radius - Corner radius (applied to top corners for vertical bars)
+ * @param orientation - 'vertical' rounds top, 'horizontal' rounds right
+ * @returns SVG path d attribute string
+ */
+function barPath(x, y, width, height, radius = 0, orientation = 'vertical') {
+    const r = Math.min(radius, width / 2, height / 2);
+    if (r <= 0) {
+        return `M${x},${y} h${width} v${height} h${-width} Z`;
+    }
+    if (orientation === 'vertical') {
+        // Round top corners only
+        return [
+            `M${x},${y + r}`,
+            `Q${x},${y} ${x + r},${y}`,
+            `L${x + width - r},${y}`,
+            `Q${x + width},${y} ${x + width},${y + r}`,
+            `L${x + width},${y + height}`,
+            `L${x},${y + height}`,
+            'Z',
+        ].join(' ');
+    }
+    // Round right corners only (horizontal bars)
+    return [
+        `M${x},${y}`,
+        `L${x + width - r},${y}`,
+        `Q${x + width},${y} ${x + width},${y + r}`,
+        `L${x + width},${y + height - r}`,
+        `Q${x + width},${y + height} ${x + width - r},${y + height}`,
+        `L${x},${y + height}`,
+        'Z',
+    ].join(' ');
+}
+/**
+ * Generates a line path from an array of points.
+ *
+ * @param points - Array of {x, y} coordinates
+ * @param curve - Interpolation type ('linear' or 'smooth')
+ * @returns SVG path d attribute string
+ */
+function linePath(points, curve = 'linear') {
+    if (points.length === 0)
+        return '';
+    if (points.length === 1)
+        return `M${points[0].x},${points[0].y}`;
+    if (curve === 'linear') {
+        const [first, ...rest] = points;
+        return `M${first.x},${first.y} ${rest.map((p) => `L${p.x},${p.y}`).join(' ')}`;
+    }
+    // Smooth curve using cubic bezier with Catmull-Rom-like control points
+    return smoothLinePath(points);
+}
+/**
+ * Generates a smooth curve path using cubic bezier segments.
+ * Uses Catmull-Rom-like control point calculation for natural curves.
+ */
+function smoothLinePath(points) {
+    if (points.length < 2)
+        return '';
+    const tension = 0.3; // Controls curve tightness (0 = sharp, 1 = very smooth)
+    const segments = [`M${points[0].x},${points[0].y}`];
+    for (let i = 0; i < points.length - 1; i++) {
+        const p0 = points[Math.max(0, i - 1)];
+        const p1 = points[i];
+        const p2 = points[i + 1];
+        const p3 = points[Math.min(points.length - 1, i + 2)];
+        // Calculate control points
+        const cp1x = p1.x + (p2.x - p0.x) * tension;
+        const cp1y = p1.y + (p2.y - p0.y) * tension;
+        const cp2x = p2.x - (p3.x - p1.x) * tension;
+        const cp2y = p2.y - (p3.y - p1.y) * tension;
+        segments.push(`C${cp1x},${cp1y} ${cp2x},${cp2y} ${p2.x},${p2.y}`);
+    }
+    return segments.join(' ');
+}
+/**
+ * Generates an area path (filled region under a line).
+ *
+ * @param points - Array of {x, y} coordinates for the top edge
+ * @param baseline - Y position of the bottom edge
+ * @param curve - Interpolation type
+ * @returns SVG path d attribute string
+ */
+function areaPath(points, baseline, curve = 'linear') {
+    if (points.length === 0)
+        return '';
+    const topPath = linePath(points, curve);
+    const firstPoint = points[0];
+    const lastPoint = points[points.length - 1];
+    // Close the path along the baseline
+    return `${topPath} L${lastPoint.x},${baseline} L${firstPoint.x},${baseline} Z`;
+}
+/**
+ * Generates stacked area paths where each series sits on top of the previous.
+ *
+ * @param seriesPoints - Array of point arrays, one per series
+ * @param baseline - Y position of the initial baseline
+ * @param curve - Interpolation type
+ * @returns Array of path strings, one per series
+ */
+function stackedAreaPaths(seriesPoints, baseline, curve = 'linear') {
+    if (seriesPoints.length === 0)
+        return [];
+    const paths = [];
+    let previousBottom = seriesPoints[0].map((p) => ({ x: p.x, y: baseline }));
+    for (const topPoints of seriesPoints) {
+        // Build path: top line, then bottom line in reverse
+        const topPath = linePath(topPoints, curve);
+        const bottomPath = linePath([...previousBottom].reverse(), curve).replace('M', 'L');
+        paths.push(`${topPath} ${bottomPath} Z`);
+        // This series top becomes next series bottom
+        previousBottom = topPoints;
+    }
+    return paths;
+}
+/**
+ * Generates an arc path for pie/donut chart segments.
+ *
+ * @param cx - Center X
+ * @param cy - Center Y
+ * @param outerRadius - Outer radius
+ * @param innerRadius - Inner radius (0 for pie, >0 for donut)
+ * @param startAngle - Start angle in radians
+ * @param endAngle - End angle in radians
+ * @returns SVG path d attribute string
+ */
+function arcPath(cx, cy, outerRadius, innerRadius, startAngle, endAngle) {
+    const largeArc = endAngle - startAngle > Math.PI ? 1 : 0;
+    // Outer arc points
+    const outerStartX = cx + outerRadius * Math.cos(startAngle);
+    const outerStartY = cy + outerRadius * Math.sin(startAngle);
+    const outerEndX = cx + outerRadius * Math.cos(endAngle);
+    const outerEndY = cy + outerRadius * Math.sin(endAngle);
+    {
+        // Pie slice (no hole)
+        return [
+            `M${cx},${cy}`,
+            `L${outerStartX},${outerStartY}`,
+            `A${outerRadius},${outerRadius} 0 ${largeArc} 1 ${outerEndX},${outerEndY}`,
+            'Z',
+        ].join(' ');
+    }
+}
+/**
+ * Computes arc segments for pie/donut chart data.
+ *
+ * @param values - Array of numeric values
+ * @param startAngle - Starting angle in radians (default: -π/2 = 12 o'clock)
+ * @returns Array of {startAngle, endAngle, value, percentage} for each segment
+ */
+function computeArcs(values, startAngle = -Math.PI / 2) {
+    const total = values.reduce((sum, v) => sum + Math.max(0, v), 0);
+    if (total === 0) {
+        return values.map(() => ({
+            startAngle: 0,
+            endAngle: 0,
+            value: 0,
+            percentage: 0,
+        }));
+    }
+    const arcs = [];
+    let currentAngle = startAngle;
+    for (const value of values) {
+        const percentage = Math.max(0, value) / total;
+        const sweep = percentage * 2 * Math.PI;
+        arcs.push({
+            startAngle: currentAngle,
+            endAngle: currentAngle + sweep,
+            value,
+            percentage,
+        });
+        currentAngle += sweep;
+    }
+    return arcs;
+}
+/**
+ * Generates grid line paths for the chart background.
+ *
+ * @param ticks - Array of tick positions
+ * @param orientation - 'horizontal' for y-axis ticks, 'vertical' for x-axis
+ * @param bounds - Chart bounds {x, y, width, height}
+ * @returns Array of path strings for each grid line
+ */
+function gridLinePaths(ticks, orientation, bounds) {
+    if (orientation === 'horizontal') {
+        return ticks.map((y) => `M${bounds.x},${y} L${bounds.x + bounds.width},${y}`);
+    }
+    return ticks.map((x) => `M${x},${bounds.y} L${x},${bounds.y + bounds.height}`);
+}
+/**
+ * Computes the centroid of an arc (for label positioning).
+ *
+ * @param cx - Center X
+ * @param cy - Center Y
+ * @param radius - Radius at which to place the centroid
+ * @param startAngle - Start angle in radians
+ * @param endAngle - End angle in radians
+ * @returns {x, y} coordinates of the centroid
+ */
+function arcCentroid(cx, cy, radius, startAngle, endAngle) {
+    const midAngle = (startAngle + endAngle) / 2;
+    return {
+        x: cx + radius * Math.cos(midAngle),
+        y: cy + radius * Math.sin(midAngle),
+    };
+}
+
+/**
+ * Accessibility utilities for chart components.
+ * Generates ARIA attributes, screen reader descriptions, and hidden data tables.
+ */
+/**
+ * Generates an accessible description for a chart based on its type and data.
+ *
+ * @param type - Chart type (bar, line, pie, area)
+ * @param data - Chart data points
+ * @param title - Optional chart title
+ * @returns Descriptive text for screen readers
+ */
+function generateChartDescription(type, data, title) {
+    const chartName = `${capitalizeFirst(type)} chart`;
+    if (data.length === 0) {
+        return `${chartName} with no data.`;
+    }
+    const values = data.map((d) => d.value);
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const sum = values.reduce((a, b) => a + b, 0);
+    const avg = sum / values.length;
+    const minItem = data.find((d) => d.value === min);
+    const maxItem = data.find((d) => d.value === max);
+    const parts = [
+        `${chartName} showing ${data.length} data points.`,
+    ];
+    if (type === 'pie' || type === 'donut') {
+        parts.push(`Total value: ${formatNumber(sum)}.`);
+        parts.push(`Largest segment: ${maxItem?.label} at ${formatPercent(max / sum)}.`);
+        parts.push(`Smallest segment: ${minItem?.label} at ${formatPercent(min / sum)}.`);
+    }
+    else {
+        parts.push(`Range: ${formatNumber(min)} to ${formatNumber(max)}.`);
+        parts.push(`Average: ${formatNumber(avg)}.`);
+        if (maxItem) {
+            parts.push(`Highest: ${maxItem.label} at ${formatNumber(max)}.`);
+        }
+        if (minItem && minItem !== maxItem) {
+            parts.push(`Lowest: ${minItem.label} at ${formatNumber(min)}.`);
+        }
+    }
+    return parts.join(' ');
+}
+/**
+ * Generates a hidden HTML table for screen reader access to chart data.
+ * Should be rendered inside the chart component but visually hidden.
+ *
+ * @param data - Chart data points
+ * @param valueLabel - Column header for values (e.g., "Amount", "Count")
+ * @returns HTML string for a data table
+ */
+function generateDataTable(data, valueLabel = 'Value') {
+    if (data.length === 0) {
+        return '<p>No data available.</p>';
+    }
+    const rows = data
+        .map((d) => `<tr><td>${escapeHtml(d.label)}</td><td>${formatNumber(d.value)}</td></tr>`)
+        .join('');
+    return `
+<table class="sr-only">
+  <caption>Chart data</caption>
+  <thead>
+    <tr>
+      <th scope="col">Category</th>
+      <th scope="col">${escapeHtml(valueLabel)}</th>
+    </tr>
+  </thead>
+  <tbody>
+    ${rows}
+  </tbody>
+</table>`.trim();
+}
+/**
+ * Generates ARIA attributes for the chart container.
+ */
+function getChartAriaAttrs(description, hasInteraction = false) {
+    const attrs = {
+        role: 'img',
+        'aria-label': description,
+    };
+    if (hasInteraction) {
+        attrs.role = 'application';
+        attrs['aria-roledescription'] = 'interactive chart';
+    }
+    return attrs;
+}
+/**
+ * CSS for visually hidden but screen-reader accessible elements.
+ */
+const srOnlyStyles = `
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+`.trim();
+// ============================================================================
+// Helper functions
+// ============================================================================
+function capitalizeFirst(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+function formatNumber(value) {
+    return new Intl.NumberFormat('en-US', {
+        maximumFractionDigits: 2,
+    }).format(value);
+}
+function formatPercent(value) {
+    return new Intl.NumberFormat('en-US', {
+        style: 'percent',
+        maximumFractionDigits: 1,
+    }).format(value);
+}
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+
+exports.arcCentroid = arcCentroid;
+exports.arcPath = arcPath;
+exports.areaPath = areaPath;
+exports.barPath = barPath;
+exports.computeArcs = computeArcs;
+exports.generateChartDescription = generateChartDescription;
+exports.generateDataTable = generateDataTable;
+exports.getChartAriaAttrs = getChartAriaAttrs;
+exports.gridLinePaths = gridLinePaths;
+exports.linePath = linePath;
+exports.srOnlyStyles = srOnlyStyles;
+exports.stackedAreaPaths = stackedAreaPaths;

package/dist/cjs/af-accordion-item.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afAccordionItemCss = ":host{display:block;width:100%}.accordion-item{width:100%}.trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 0;background:transparent;border:none;border-bottom:1px solid var(--af-background-border-subtle, #e8eeed);cursor:pointer;font:inherit;text-align:left;color:var(--af-typography-body-dark, #14343b);transition:background-color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1))}.trigger:hover:not(:disabled){background-color:var(--af-background-base-hover, rgba(20, 52, 59, 0.02))}.trigger:focus-visible{outline:2px solid var(--af-background-border-active, #8a7049);outline-offset:-2px}.trigger:disabled{cursor:not-allowed;opacity:0.5}.trigger-content{flex:1;min-width:0}.chevron{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-typography-body-dark, #14343b);transition:transform var(--motion-duration-slow, 300ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1))}.chevron.is-open{transform:rotate(180deg)}.content-wrapper{overflow:hidden;transition:max-height var(--motion-duration-slow, 300ms) var(--motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1))}@media (prefers-reduced-motion: reduce){.trigger,.chevron,.content-wrapper{transition-duration:0.01ms}}.content{padding:0}:host(.is-disabled) .trigger{cursor:not-allowed;opacity:0.5}:host(.is-disabled) .trigger:hover{background-color:transparent}:host(.is-open) .trigger{border-bottom-color:transparent}";
+const afAccordionItemCss = () => `:host{display:block;width:100%}.accordion-item{width:100%}.trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 0;background:transparent;border:none;border-bottom:1px solid var(--af-background-border-subtle, #e8eeed);cursor:pointer;font:inherit;text-align:left;color:var(--af-typography-body-dark, #14343b);transition:background-color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1))}.trigger:hover:not(:disabled){background-color:var(--af-background-base-hover, rgba(20, 52, 59, 0.02))}.trigger:focus-visible{outline:2px solid var(--af-background-border-active, #8a7049);outline-offset:-2px}.trigger:disabled{cursor:not-allowed;opacity:0.5}.trigger-content{flex:1;min-width:0}.chevron{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-typography-body-dark, #14343b);transition:transform var(--motion-duration-slow, 300ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1))}.chevron.is-open{transform:rotate(180deg)}.content-wrapper{overflow:hidden;transition:max-height var(--motion-duration-slow, 300ms) var(--motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1))}@media (prefers-reduced-motion: reduce){.trigger,.chevron,.content-wrapper{transition-duration:0.01ms}}.content{padding:0}:host(.is-disabled) .trigger{cursor:not-allowed;opacity:0.5}:host(.is-disabled) .trigger:hover{background-color:transparent}:host(.is-open) .trigger{border-bottom-color:transparent}`;
 
 const AfAccordionItem = class {
     constructor(hostRef) {
@@ -70,10 +70,11 @@ const AfAccordionItem = class {
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "open": ["handleOpenChange"]
+        "open": [{
+                "handleOpenChange": 0
+            }]
     }; }
 };
-AfAccordionItem.style = afAccordionItemCss;
+AfAccordionItem.style = afAccordionItemCss();
 
 exports.af_accordion_item = AfAccordionItem;
-//# sourceMappingURL=af-accordion-item.entry.cjs.js.map

package/dist/cjs/af-accordion.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BuJz1C1M.js');
+var index = require('./index-BcMwIg4j.js');
 
-const afAccordionCss = ".sc-af-accordion-h{display:block;width:100%}.accordion.sc-af-accordion{display:flex;flex-direction:column;width:100%}.sc-af-accordion-s>af-accordion-item{display:block}.sc-af-accordion-s>af-accordion-item:last-child{--accordion-item-border:transparent}";
+const afAccordionCss = () => `.sc-af-accordion-h{display:block;width:100%}.accordion.sc-af-accordion{display:flex;flex-direction:column;width:100%}.sc-af-accordion-s>af-accordion-item{display:block}.sc-af-accordion-s>af-accordion-item:last-child{--accordion-item-border:transparent}`;
 
 const AfAccordion = class {
     constructor(hostRef) {
@@ -93,10 +93,11 @@ const AfAccordion = class {
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "value": ["handleValueChange"]
+        "value": [{
+                "handleValueChange": 0
+            }]
     }; }
 };
-AfAccordion.style = afAccordionCss;
+AfAccordion.style = afAccordionCss();
 
 exports.af_accordion = AfAccordion;
-//# sourceMappingURL=af-accordion.entry.cjs.js.map

package/dist/cjs/af-action-item.cjs.entry.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var index = require('./index-BcMwIg4j.js');
+
+const afActionItemCss = () => `.sc-af-action-item-h{display:block}.action-item__button.sc-af-action-item{display:flex;align-items:flex-start;gap:var(--space-3, 12px);width:100%;padding:var(--space-3, 12px) var(--space-4, 16px);border:none;background:transparent;text-align:left;cursor:default;border-radius:var(--radius-sm, 6px);transition:background-color var(--motion-duration-fast, 150ms) var(--motion-easing-standard);font-family:var(--typography-primaryfont, 'NeuSans', sans-serif)}.action-item--interactive.sc-af-action-item .action-item__button.sc-af-action-item{cursor:pointer}.action-item--interactive.sc-af-action-item .action-item__button.sc-af-action-item:hover{background-color:var(--af-background-level-1, #e8eeed)}.action-item--interactive.sc-af-action-item .action-item__button.sc-af-action-item:focus-visible{outline:2px solid var(--colour-brand-ice, #a6fffb);outline-offset:-2px}.action-item--blocked.sc-af-action-item .action-item__button.sc-af-action-item{cursor:not-allowed;opacity:0.7}.action-item__status.sc-af-action-item{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;margin-top:2px}.action-item__status-empty.sc-af-action-item{width:20px;height:20px;border:2px solid var(--colour-inkwell-200, #a1aeb1);border-radius:50%}.action-item__status-progress.sc-af-action-item{width:20px;height:20px;border:2px solid var(--colour-brand-mist-green, #c6d5d1);border-radius:50%;position:relative}.action-item__status-progress.sc-af-action-item::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:8px;height:8px;background-color:var(--colour-brand-mist-green, #c6d5d1);border-radius:50%}.action-item--done.sc-af-action-item .action-item__status.sc-af-action-item{color:var(--status-ok, #3e8f6e)}.action-item--blocked.sc-af-action-item .action-item__status.sc-af-action-item{color:var(--status-issue, #b94a3b)}.action-item__content.sc-af-action-item{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.action-item__title.sc-af-action-item{font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-typography-body-default, #2b484f)}.action-item--done.sc-af-action-item .action-item__title.sc-af-action-item{text-decoration:line-through;color:var(--af-typography-body-subtle, #60767b)}.action-item__meta.sc-af-action-item{font-size:14px;line-height:20px;color:var(--af-typography-body-subtle, #60767b)}.action-item__meta.sc-af-action-item:empty{display:none}.action-item__info.sc-af-action-item{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}.action-item__assignee.sc-af-action-item{font-size:14px;line-height:20px;color:var(--af-typography-body-default, #2b484f)}.action-item__due-date.sc-af-action-item{font-size:13px;line-height:18px;color:var(--af-typography-body-subtle, #60767b)}.sc-af-action-item-h+-shadowcsshost{border-top:1px solid var(--af-background-border-subtle, #e8eeed)}@media (max-width: 480px){.action-item__button.sc-af-action-item{padding:var(--space-3, 12px);gap:var(--space-3, 12px)}.action-item__title.sc-af-action-item{font-size:15px}.action-item__info.sc-af-action-item{align-items:flex-end;gap:2px}.action-item__assignee.sc-af-action-item,.action-item__due-date.sc-af-action-item{font-size:13px;line-height:18px}}`;
+
+const AfActionItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.actionItemToggle = index.createEvent(this, "af-action-item-toggle");
+        /**
+         * 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 index.h("af-icon", { name: "check-circle", size: 20 });
+            case 'in-progress':
+                return index.h("div", { class: "action-item__status-progress" });
+            case 'blocked':
+                return index.h("af-icon", { name: "close", size: 16 });
+            default:
+                return index.h("div", { class: "action-item__status-empty" });
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: 'e9b741bbdee7c4fa48f09005d6cc4214e73ddb2f', class: {
+                'action-item': true,
+                [`action-item--${this.status}`]: true,
+                'action-item--interactive': this.interactive,
+            }, role: "listitem" }, index.h("button", { key: '13fe8d6b8f8ea72a38320bf55c94c688604bd2f9', type: "button", class: "action-item__button", onClick: this.handleClick, disabled: !this.interactive || this.status === 'blocked', "aria-pressed": this.status === 'done' }, index.h("div", { key: '9e1cfc819e9e32d0dbbcb2d875d0116e126aef22', class: "action-item__status" }, this.renderStatusIcon()), index.h("div", { key: '59cabab93785b56b7540231384d0b729811f91f5', class: "action-item__content" }, index.h("div", { key: 'f6947c82c23feac7d786c089a050189fe5cf1b48', class: "action-item__title" }, index.h("slot", { key: '887c551106365435b52ca260582ccd450c4cb330' })), index.h("div", { key: '431ddbe13c22f54a9045859676cad6651c90fbb4', class: "action-item__meta" }, index.h("slot", { key: 'be29c8715008c4e9ed5a369e07dd865f9e90a10c', name: "meta" }))), (this.assignee || this.dueDate) && (index.h("div", { key: '7cb13d2d6a50f1ad5a9aca676b26f5f2120cef30', class: "action-item__info" }, this.assignee && (index.h("span", { key: 'a73f3880dbe016591f99dda0bd41a78d6f3fbe2e', class: "action-item__assignee" }, this.assignee)), this.dueDate && (index.h("span", { key: 'a178963ffe3d50d7e0dd4bba22ca84a39190780a', class: "action-item__due-date" }, this.dueDate)))))));
+    }
+};
+AfActionItem.style = afActionItemCss();
+
+exports.af_action_item = AfActionItem;

package/dist/cjs/af-action-list.cjs.entry.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var index = require('./index-BcMwIg4j.js');
+
+const afActionListCss = () => `.sc-af-action-list-h{display:block;width:100%}.action-list__header.sc-af-action-list{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4, 16px);margin-bottom:var(--space-3, 12px)}.action-list__header.sc-af-action-list:empty{display:none}.action-list__heading.sc-af-action-list{flex:1;min-width:0}.action-list__heading.sc-af-action-list:empty{display:none}.action-list__heading.sc-af-action-list-s>*,.action-list__heading .sc-af-action-list-s>*{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}.action-list__progress-info.sc-af-action-list{flex-shrink:0}.action-list__progress-count.sc-af-action-list{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)}.action-list__progress-bar.sc-af-action-list{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.sc-af-action-list{height:100%;background-color:var(--af-background-contrast, #c6d5d1);border-radius:2px;transition:width var(--motion-duration-base, 200ms) var(--motion-easing-standard)}.action-list__items.sc-af-action-list{display:flex;flex-direction:column;gap:0}@media (max-width: 480px){.action-list__header.sc-af-action-list{flex-direction:column;align-items:flex-start;gap:var(--space-2, 8px)}.action-list__progress-bar.sc-af-action-list{height:6px;border-radius:3px}}`;
+
+const AfActionList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * 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 (index.h(index.Host, { key: '1cbb14a9500a69b20876c263dc60687e6b6d8d68', class: "action-list" }, index.h("div", { key: '923234c9a5e8277ad875a41d4da4fd0609317273', class: "action-list__header" }, index.h("div", { key: '88707036867846e5285d1346ee9180139fb2cc38', class: "action-list__heading" }, index.h("slot", { key: '5b48fc6fa26c8c57867b4aef0e022904667a1f36', name: "heading" })), this.showProgress && this.total > 0 && (index.h("div", { key: '1adcd6469d9902adcaadf62a45281dfdd11e182e', class: "action-list__progress-info" }, index.h("span", { key: '6c0d5436f5f8e08bd20d8cc2ab45639f35ea5ec2', class: "action-list__progress-count" }, this.done, " / ", this.total)))), this.showProgress && this.total > 0 && (index.h("div", { key: 'e7aeb1785c7c5b08f544bc5f99c259a669870b55', class: "action-list__progress-bar" }, index.h("div", { key: '3886d6ae9dc5e1808f8927de6c99eb61dcf8835f', class: "action-list__progress-fill", style: { width: `${this.progress}%` } }))), index.h("div", { key: '3ad9adf79c2e75f923db5dabe454e382cfc04f81', class: "action-list__items", role: "list" }, index.h("slot", { key: '451de70ab0056acadd5de5c4b096d233cf612672' }))));
+    }
+    get el() { return index.getElement(this); }
+};
+AfActionList.style = afActionListCss();
+
+exports.af_action_list = AfActionList;