@affinda/wc 0.6.1 → 0.7.0

package/dist/collection/utils/charts/generators.js

@@ -0,0 +1,227 @@
+/**
+ * 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
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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);
+    if (innerRadius <= 0) {
+        // Pie slice (no hole)
+        return [
+            `M${cx},${cy}`,
+            `L${outerStartX},${outerStartY}`,
+            `A${outerRadius},${outerRadius} 0 ${largeArc} 1 ${outerEndX},${outerEndY}`,
+            'Z',
+        ].join(' ');
+    }
+    // Donut arc
+    const innerStartX = cx + innerRadius * Math.cos(startAngle);
+    const innerStartY = cy + innerRadius * Math.sin(startAngle);
+    const innerEndX = cx + innerRadius * Math.cos(endAngle);
+    const innerEndY = cy + innerRadius * Math.sin(endAngle);
+    return [
+        `M${outerStartX},${outerStartY}`,
+        `A${outerRadius},${outerRadius} 0 ${largeArc} 1 ${outerEndX},${outerEndY}`,
+        `L${innerEndX},${innerEndY}`,
+        `A${innerRadius},${innerRadius} 0 ${largeArc} 0 ${innerStartX},${innerStartY}`,
+        '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
+ */
+export 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
+ */
+export 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
+ */
+export 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),
+    };
+}

package/dist/collection/utils/charts/index.js

@@ -0,0 +1,10 @@
+/**
+ * Chart utilities for SVG chart components.
+ *
+ * @example
+ * import { linearScale, barPath, generateChartDescription } from '../utils/charts';
+ */
+export * from './types';
+export * from './scales';
+export * from './generators';
+export * from './a11y';

package/dist/collection/utils/charts/scales.js

@@ -0,0 +1,189 @@
+/**
+ * Scale functions for mapping data values to SVG coordinates.
+ * These are lightweight, dependency-free implementations inspired by D3 scales.
+ */
+/**
+ * Creates a linear scale that maps a continuous domain to a continuous range.
+ *
+ * @param domain - [min, max] values in data space
+ * @param range - [min, max] values in pixel space
+ * @returns Scale function that maps domain values to range values
+ *
+ * @example
+ * const yScale = linearScale([0, 100], [200, 0]); // Note: SVG y is inverted
+ * yScale(50); // => 100
+ */
+export function linearScale(domain, range) {
+    const [d0, d1] = domain;
+    const [r0, r1] = range;
+    const domainSpan = d1 - d0;
+    const rangeSpan = r1 - r0;
+    if (domainSpan === 0) {
+        return () => r0 + rangeSpan / 2;
+    }
+    return (value) => {
+        const normalized = (value - d0) / domainSpan;
+        return r0 + normalized * rangeSpan;
+    };
+}
+/**
+ * Inverts a linear scale, mapping from range back to domain.
+ */
+export function linearScaleInvert(domain, range) {
+    const [d0, d1] = domain;
+    const [r0, r1] = range;
+    const domainSpan = d1 - d0;
+    const rangeSpan = r1 - r0;
+    if (rangeSpan === 0) {
+        return () => d0 + domainSpan / 2;
+    }
+    return (pixel) => {
+        const normalized = (pixel - r0) / rangeSpan;
+        return d0 + normalized * domainSpan;
+    };
+}
+/**
+ * Creates a band scale for categorical data (e.g., bar chart x-axis).
+ *
+ * @param domain - Array of category labels
+ * @param range - [start, end] pixel positions
+ * @param padding - Padding ratio between bands (0-1), default 0.1
+ * @returns Object with scale function, bandwidth, and step
+ *
+ * @example
+ * const xScale = bandScale(['Jan', 'Feb', 'Mar'], [0, 300], 0.2);
+ * xScale.scale('Feb'); // => position of 'Feb' band
+ * xScale.bandwidth; // => width of each bar
+ */
+export function bandScale(domain, range, padding = 0.1) {
+    const [r0, r1] = range;
+    const rangeSpan = r1 - r0;
+    const n = domain.length;
+    if (n === 0) {
+        return {
+            scale: () => r0,
+            bandwidth: 0,
+            step: 0,
+            paddingPixels: 0,
+        };
+    }
+    // step = bandwidth + innerPadding
+    // totalPadding = (n - 1) * innerPadding + 2 * outerPadding
+    // For simplicity, use same padding ratio for inner and outer
+    const step = rangeSpan / (n + padding);
+    const bandwidth = step * (1 - padding);
+    const paddingPixels = step * padding;
+    const offset = paddingPixels / 2;
+    const labelToIndex = new Map(domain.map((label, i) => [label, i]));
+    return {
+        scale: (label) => {
+            const index = labelToIndex.get(label) ?? 0;
+            return r0 + offset + index * step;
+        },
+        bandwidth,
+        step,
+        paddingPixels,
+    };
+}
+/**
+ * Generates nice tick values for an axis.
+ *
+ * @param domain - [min, max] domain values
+ * @param count - Approximate number of ticks desired
+ * @returns Array of tick values
+ */
+export function generateTicks(domain, count = 5) {
+    const [min, max] = domain;
+    const range = max - min;
+    if (range === 0) {
+        return [min];
+    }
+    // Find a nice step size
+    const roughStep = range / count;
+    const magnitude = Math.pow(10, Math.floor(Math.log10(roughStep)));
+    const normalizedStep = roughStep / magnitude;
+    let niceStep;
+    if (normalizedStep <= 1)
+        niceStep = 1;
+    else if (normalizedStep <= 2)
+        niceStep = 2;
+    else if (normalizedStep <= 5)
+        niceStep = 5;
+    else
+        niceStep = 10;
+    niceStep *= magnitude;
+    // Generate ticks
+    const start = Math.ceil(min / niceStep) * niceStep;
+    const ticks = [];
+    for (let tick = start; tick <= max; tick += niceStep) {
+        ticks.push(Math.round(tick * 1e10) / 1e10); // Avoid floating point issues
+    }
+    // Ensure we have at least the endpoints if ticks are empty or sparse
+    if (ticks.length === 0 || ticks[0] > min) {
+        ticks.unshift(min);
+    }
+    if (ticks[ticks.length - 1] < max) {
+        ticks.push(max);
+    }
+    return ticks;
+}
+/**
+ * Generates tick marks with positions for rendering.
+ *
+ * @param domain - [min, max] domain values
+ * @param range - [start, end] pixel positions
+ * @param count - Approximate number of ticks
+ * @param formatFn - Optional formatter for tick labels
+ * @returns Array of Tick objects
+ */
+export function generateTickMarks(domain, range, count = 5, formatFn) {
+    const scale = linearScale(domain, range);
+    const ticks = generateTicks(domain, count);
+    const format = formatFn ?? ((v) => String(v));
+    return ticks.map((value) => ({
+        value,
+        position: scale(value),
+        label: format(value),
+    }));
+}
+/**
+ * Computes the domain extent from data values with optional padding.
+ *
+ * @param values - Array of numbers
+ * @param padding - Ratio to extend domain beyond data (0 = tight fit)
+ * @param includeZero - Whether to always include zero in the domain
+ * @returns [min, max] domain tuple
+ */
+export function computeDomain(values, padding = 0, includeZero = true) {
+    if (values.length === 0) {
+        return [0, 1];
+    }
+    let min = Math.min(...values);
+    let max = Math.max(...values);
+    if (includeZero) {
+        if (min > 0)
+            min = 0;
+        if (max < 0)
+            max = 0;
+    }
+    const span = max - min || 1;
+    const paddingAmount = span * padding;
+    return [min - paddingAmount, max + paddingAmount];
+}
+/**
+ * Formats a number for display on chart axes.
+ * Uses compact notation for large numbers.
+ */
+export function formatAxisValue(value) {
+    const abs = Math.abs(value);
+    if (abs >= 1000000) {
+        return (value / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+    }
+    if (abs >= 1000) {
+        return (value / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+    }
+    if (abs < 1 && abs > 0) {
+        return value.toFixed(2);
+    }
+    return String(Math.round(value));
+}

package/dist/collection/utils/charts/types.js

@@ -0,0 +1,12 @@
+/**
+ * Shared types for chart components and utilities.
+ */
+/**
+ * Default margins for different chart orientations.
+ */
+export const defaultMargins = {
+    top: 16,
+    right: 16,
+    bottom: 32,
+    left: 40,
+};

package/dist/components/af-accordion-item.js

@@ -1,107 +1 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-Btpdr0Bi.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 AfAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class AfAccordionItem extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.accordionToggle = createEvent(this, "af-accordion-toggle");
-        /**
-         * Whether this item is currently expanded
-         */
-        this.open = false;
-        /**
-         * Whether this item is disabled (cannot be toggled)
-         */
-        this.disabled = false;
-        this.contentHeight = 0;
-        this.handleTriggerClick = () => {
-            if (!this.disabled) {
-                this.toggle();
-            }
-        };
-    }
-    handleOpenChange(newValue) {
-        if (newValue) {
-            this.measureContent();
-        }
-    }
-    componentDidLoad() {
-        if (this.open) {
-            this.measureContent();
-        }
-        this.resizeObserver = new ResizeObserver(() => {
-            if (this.open && this.contentRef) {
-                this.contentHeight = this.contentRef.scrollHeight;
-            }
-        });
-        if (this.contentRef) {
-            this.resizeObserver.observe(this.contentRef);
-        }
-    }
-    disconnectedCallback() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-    }
-    /**
-     * Programmatically toggle the accordion item
-     */
-    async toggle() {
-        if (!this.disabled) {
-            this.open = !this.open;
-            this.accordionToggle.emit({ itemId: this.itemId, open: this.open });
-        }
-    }
-    measureContent() {
-        requestAnimationFrame(() => {
-            if (this.contentRef) {
-                this.contentHeight = this.contentRef.scrollHeight;
-            }
-        });
-    }
-    render() {
-        const contentStyle = {
-            maxHeight: this.open ? `${this.contentHeight}px` : '0px'
-        };
-        return (h(Host, { key: 'd30690d684a945ec9215d3c3d469370d61c85514', class: { 'is-open': this.open, 'is-disabled': this.disabled } }, h("div", { key: 'c2643ec1eebc84a2fd76eff1c8e3e6c814dfd897', class: "accordion-item" }, h("button", { key: '9a36c7b2aeeed919ee02e1ed405966055bf4bed8', class: "trigger", onClick: this.handleTriggerClick, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { key: '81d8a18ccc1b4a1b62b58f55ed0ffbd897b6c5a2', class: "trigger-content" }, h("slot", { key: '740345a52afa1e1d2e37f256b2d3236ba3ea159a', name: "trigger" })), h("div", { key: '0b52647eb7c81d606bac7757828923e2bbf9e166', class: { 'chevron': true, 'is-open': this.open } }, h("svg", { key: 'a6a53635a309fb072dc238dacd1969fbbcd47afb', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { key: '283405c12c608bec9b4c7b01bf132ee1db703893', d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '7792fd00fbe5167d3bd1881fce95454429284046', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: 'e0122e95976db46c0b42036033cca1db2c1b2b2d', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: 'c99f7dcc539909ef037cc87de2786caad2a44ec5' }))))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "open": ["handleOpenChange"]
-    }; }
-    static get style() { return afAccordionItemCss; }
-}, [257, "af-accordion-item", {
-        "itemId": [513, "item-id"],
-        "open": [1540],
-        "disabled": [516],
-        "contentHeight": [32],
-        "toggle": [64]
-    }, undefined, {
-        "open": ["handleOpenChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-accordion-item"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-accordion-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfAccordionItem$1);
-            }
-            break;
-    } });
-}
-
-const AfAccordionItem = AfAccordionItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { AfAccordionItem, defineCustomElement };
-//# sourceMappingURL=af-accordion-item.js.map
-
-//# sourceMappingURL=af-accordion-item.js.map
+import{p as e,H as t,d as i,h as o,c as r,t as s}from"./p-D1moXdEA.js";const a=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.accordionToggle=i(this,"af-accordion-toggle"),this.open=!1,this.disabled=!1,this.contentHeight=0,this.handleTriggerClick=()=>{this.disabled||this.toggle()}}handleOpenChange(e){e&&this.measureContent()}componentDidLoad(){this.open&&this.measureContent(),this.resizeObserver=new ResizeObserver((()=>{this.open&&this.contentRef&&(this.contentHeight=this.contentRef.scrollHeight)})),this.contentRef&&this.resizeObserver.observe(this.contentRef)}disconnectedCallback(){this.resizeObserver&&this.resizeObserver.disconnect()}async toggle(){this.disabled||(this.open=!this.open,this.accordionToggle.emit({itemId:this.itemId,open:this.open}))}measureContent(){requestAnimationFrame((()=>{this.contentRef&&(this.contentHeight=this.contentRef.scrollHeight)}))}render(){const e={maxHeight:this.open?this.contentHeight+"px":"0px"};return o(r,{key:"d30690d684a945ec9215d3c3d469370d61c85514",class:{"is-open":this.open,"is-disabled":this.disabled}},o("div",{key:"c2643ec1eebc84a2fd76eff1c8e3e6c814dfd897",class:"accordion-item"},o("button",{key:"9a36c7b2aeeed919ee02e1ed405966055bf4bed8",class:"trigger",onClick:this.handleTriggerClick,"aria-expanded":this.open?"true":"false","aria-controls":"content-"+this.itemId,disabled:this.disabled,type:"button"},o("div",{key:"81d8a18ccc1b4a1b62b58f55ed0ffbd897b6c5a2",class:"trigger-content"},o("slot",{key:"740345a52afa1e1d2e37f256b2d3236ba3ea159a",name:"trigger"})),o("div",{key:"0b52647eb7c81d606bac7757828923e2bbf9e166",class:{chevron:!0,"is-open":this.open}},o("svg",{key:"a6a53635a309fb072dc238dacd1969fbbcd47afb",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor"},o("path",{key:"283405c12c608bec9b4c7b01bf132ee1db703893",d:"M6 9l6 6 6-6","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})))),o("div",{key:"7792fd00fbe5167d3bd1881fce95454429284046",id:"content-"+this.itemId,class:"content-wrapper",style:e,"aria-hidden":this.open?"false":"true"},o("div",{key:"e0122e95976db46c0b42036033cca1db2c1b2b2d",class:"content",ref:e=>this.contentRef=e},o("slot",{key:"c99f7dcc539909ef037cc87de2786caad2a44ec5"})))))}get el(){return this}static get watchers(){return{open:[{handleOpenChange:0}]}}static get style(){return":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}"}},[257,"af-accordion-item",{itemId:[513,"item-id"],open:[1540],disabled:[516],contentHeight:[32],toggle:[64]},void 0,{open:[{handleOpenChange:0}]}]),n=a,d=function(){"undefined"!=typeof customElements&&["af-accordion-item"].forEach((e=>{"af-accordion-item"===e&&(customElements.get(s(e))||customElements.define(s(e),a))}))};export{n as AfAccordionItem,d as defineCustomElement}