@affinda/wc 0.6.2 → 0.7.0

package/dist/types/components/af-action-item/af-action-item.d.ts

@@ -0,0 +1,44 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type ActionItemStatus = 'pending' | 'in-progress' | 'done' | 'blocked';
+/**
+ * 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 declare class AfActionItem {
+    /**
+     * Current status of the action item.
+     */
+    status: ActionItemStatus;
+    /**
+     * Optional assignee name.
+     */
+    assignee?: string;
+    /**
+     * Optional due date display text.
+     */
+    dueDate?: string;
+    /**
+     * Whether clicking toggles the status (cycles: pending -> in-progress -> done).
+     */
+    interactive: boolean;
+    /**
+     * Emitted when an interactive item is clicked and status changes.
+     */
+    actionItemToggle: EventEmitter<{
+        status: ActionItemStatus;
+    }>;
+    private handleClick;
+    private renderStatusIcon;
+    render(): any;
+}

package/dist/types/components/af-action-list/af-action-list.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 declare class AfActionList {
+    el: HTMLElement;
+    /**
+     * Show a progress bar indicating completion percentage.
+     */
+    showProgress: boolean;
+    progress: number;
+    total: number;
+    done: number;
+    componentDidLoad(): void;
+    handleItemToggle(): void;
+    private calculateProgress;
+    render(): any;
+}

package/dist/types/components/af-area-chart/af-area-chart.d.ts

@@ -0,0 +1,107 @@
+import type { Theme } from '../../types';
+import { type InteractiveMode, type CurveType } from '../../utils/charts';
+/**
+ * A native SVG area chart component with theme integration.
+ *
+ * Supports stacked areas for multi-series data, linear/smooth curves,
+ * and progressive interactivity.
+ *
+ * @slot - Optional custom content (placed after chart)
+ *
+ * @example Simple area chart
+ * ```html
+ * <af-area-chart
+ *   data='[{"label":"Jan","value":120},{"label":"Feb","value":180}]'
+ *   theme="soft-clay"
+ * ></af-area-chart>
+ * ```
+ *
+ * @example Stacked area chart
+ * ```html
+ * <af-area-chart
+ *   data='{"labels":["Q1","Q2","Q3"],"series":[{"name":"Sales","values":[100,150,200]},{"name":"Costs","values":[80,90,100]}]}'
+ *   stacked
+ *   show-legend
+ * ></af-area-chart>
+ * ```
+ */
+export declare class AfAreaChart {
+    el: HTMLElement;
+    /**
+     * Chart data as JSON string.
+     */
+    data: string;
+    /**
+     * Theme for colors.
+     */
+    theme: Theme;
+    /**
+     * Stack multiple series on top of each other.
+     */
+    stacked: boolean;
+    /**
+     * Curve interpolation.
+     */
+    curve: CurveType;
+    /**
+     * Area fill opacity (0-1).
+     */
+    opacity: number;
+    /**
+     * Show outline stroke on areas.
+     */
+    showStroke: boolean;
+    /**
+     * Interactivity level.
+     */
+    interactive: InteractiveMode;
+    /**
+     * Enable CSS entry animations.
+     */
+    animated: boolean;
+    /**
+     * Show legend below chart.
+     */
+    showLegend: boolean;
+    /**
+     * Show grid lines.
+     */
+    showGrid: boolean;
+    /**
+     * Show axis labels.
+     */
+    showAxis: boolean;
+    /**
+     * Stroke width for area outlines.
+     */
+    strokeWidth: number;
+    /**
+     * Custom accessible label.
+     */
+    chartLabel?: string;
+    /**
+     * Chart width (SVG viewBox).
+     */
+    width: number;
+    /**
+     * Aspect ratio as width/height.
+     */
+    aspectRatio: number;
+    private parsedData;
+    private hoveredSeries;
+    private tooltipData;
+    parseData(): void;
+    componentWillLoad(): void;
+    private get height();
+    private get margins();
+    private get chartBounds();
+    private isMultiSeries;
+    private handleSeriesEnter;
+    private handleSeriesLeave;
+    private renderSingleSeries;
+    private renderMultiSeries;
+    private getStackedPoints;
+    private renderAxes;
+    private renderLegend;
+    render(): any;
+}

package/dist/types/components/af-bar-chart/af-bar-chart.d.ts

@@ -0,0 +1,105 @@
+import type { Theme } from '../../types';
+import { type InteractiveMode, type Orientation } from '../../utils/charts';
+/**
+ * A native SVG bar chart component with theme integration.
+ *
+ * Supports vertical/horizontal orientation, stacked bars, and progressive
+ * interactivity (none, hover, tooltip).
+ *
+ * @slot - Optional custom content (placed after chart)
+ *
+ * @example Simple bar chart
+ * ```html
+ * <af-bar-chart
+ *   data='[{"label":"Jan","value":120},{"label":"Feb","value":180}]'
+ *   theme="inkwell"
+ * ></af-bar-chart>
+ * ```
+ *
+ * @example Horizontal with hover
+ * ```html
+ * <af-bar-chart
+ *   data='[{"label":"Sales","value":1200},{"label":"Marketing","value":800}]'
+ *   orientation="horizontal"
+ *   interactive="hover"
+ * ></af-bar-chart>
+ * ```
+ */
+export declare class AfBarChart {
+    el: HTMLElement;
+    /**
+     * Chart data as JSON string.
+     * Single series: `[{"label":"Jan","value":100}, ...]`
+     * Multi-series: `{"labels":["Jan","Feb"],"series":[{"name":"A","values":[100,200]}]}`
+     */
+    data: string;
+    /**
+     * Theme for colors. Inherits from parent af-chart-section if nested.
+     */
+    theme: Theme;
+    /**
+     * Bar orientation.
+     */
+    orientation: Orientation;
+    /**
+     * Stack multiple series on top of each other.
+     */
+    stacked: boolean;
+    /**
+     * Interactivity level.
+     * - `none`: Static SVG, optimal for SSR
+     * - `hover`: CSS hover states with native tooltips
+     * - `tooltip`: JS-powered rich tooltips
+     */
+    interactive: InteractiveMode;
+    /**
+     * Enable CSS entry animations.
+     */
+    animated: boolean;
+    /**
+     * Show legend below chart.
+     */
+    showLegend: boolean;
+    /**
+     * Show grid lines.
+     */
+    showGrid: boolean;
+    /**
+     * Show axis labels.
+     */
+    showAxis: boolean;
+    /**
+     * Corner radius for bars.
+     */
+    barRadius: number;
+    /**
+     * Custom accessible label. Auto-generated if not provided.
+     */
+    chartLabel?: string;
+    /**
+     * Chart width (SVG viewBox). Height is calculated from aspect ratio.
+     */
+    width: number;
+    /**
+     * Aspect ratio as width/height (e.g., 16/9 = 1.78).
+     */
+    aspectRatio: number;
+    private parsedData;
+    private hoveredIndex;
+    private tooltipData;
+    parseData(): void;
+    componentWillLoad(): void;
+    private get height();
+    private get margins();
+    private get chartBounds();
+    private isMultiSeries;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private renderSingleSeries;
+    private renderStackedSeries;
+    private renderGroupedSeries;
+    private renderAxes;
+    private renderLegend;
+    private renderTooltip;
+    render(): any;
+}

package/dist/types/components/af-callout/af-callout.d.ts

@@ -0,0 +1,48 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { IconName } from "../../../../icons/dist/index";
+export type CalloutVariant = 'info' | 'warning' | 'success' | 'error' | 'inkwell' | 'mist-green' | 'soft-clay' | 'ice';
+/**
+ * Callout component for displaying notices, alerts, and informational messages.
+ * A muted version of af-in-page-banner — same rounded card aesthetic but smaller,
+ * simpler, icon-driven instead of illustration-driven, no action buttons.
+ *
+ * Supports two categories of variants:
+ * - Semantic: info, warning, success, error (uses status colors)
+ * - Themed: inkwell, mist-green, soft-clay, ice (uses brand tints)
+ *
+ * @slot - Heading/title content
+ * @slot description - Body text
+ *
+ * @example
+ * ```html
+ * <af-callout variant="warning">
+ *   Important Notice
+ *   <span slot="description">Please review the following information.</span>
+ * </af-callout>
+ * ```
+ */
+export declare class AfCallout {
+    /**
+     * Visual variant of the callout.
+     * - Semantic: `info`, `warning`, `success`, `error` (status colors)
+     * - Themed: `inkwell`, `mist-green`, `soft-clay`, `ice` (brand colors)
+     */
+    variant: CalloutVariant;
+    /**
+     * Icon to display. Set to 'auto' to pick based on variant, or 'none' to hide.
+     */
+    icon: IconName | 'auto' | 'none';
+    /**
+     * Whether the callout can be dismissed by the user.
+     */
+    dismissible: boolean;
+    /**
+     * Emitted when the dismiss button is clicked.
+     */
+    calloutDismiss: EventEmitter<void>;
+    dismissed: boolean;
+    private handleDismiss;
+    private get resolvedIcon();
+    private get isSemantic();
+    render(): any;
+}

package/dist/types/components/af-chart-legend/af-chart-legend.d.ts

@@ -0,0 +1,84 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { Theme } from '../../types';
+/**
+ * Legend item data structure.
+ */
+export interface LegendItem {
+    label: string;
+    color?: string;
+    value?: number | string;
+    active?: boolean;
+}
+/**
+ * A standalone chart legend component.
+ *
+ * Can be used alongside any chart component or custom SVG charts.
+ * Supports interactive highlighting and toggle behavior.
+ *
+ * @slot - Optional custom content
+ *
+ * @example Horizontal legend
+ * ```html
+ * <af-chart-legend
+ *   items='[{"label":"Sales","color":"#c6d5d1"},{"label":"Costs","color":"#c0ab8d"}]'
+ *   direction="horizontal"
+ * ></af-chart-legend>
+ * ```
+ *
+ * @example Interactive legend with values
+ * ```html
+ * <af-chart-legend
+ *   items='[{"label":"Q1","value":"$12K"},{"label":"Q2","value":"$15K"}]'
+ *   interactive
+ * ></af-chart-legend>
+ * ```
+ */
+export declare class AfChartLegend {
+    /**
+     * Legend items as JSON string.
+     */
+    items: string;
+    /**
+     * Theme for colors.
+     */
+    theme: Theme;
+    /**
+     * Layout direction.
+     */
+    direction: 'horizontal' | 'vertical';
+    /**
+     * Enable interactive hover/click behavior.
+     */
+    interactive: boolean;
+    /**
+     * Swatch shape.
+     */
+    swatchShape: 'square' | 'circle' | 'line';
+    /**
+     * Alignment.
+     */
+    align: 'start' | 'center' | 'end';
+    private parsedItems;
+    private hoveredIndex;
+    private activeIndices;
+    /**
+     * Emitted when a legend item is clicked (interactive mode).
+     */
+    legendItemClick: EventEmitter<{
+        index: number;
+        item: LegendItem;
+    }>;
+    /**
+     * Emitted when a legend item is hovered (interactive mode).
+     */
+    legendItemHover: EventEmitter<{
+        index: number | null;
+        item: LegendItem | null;
+    }>;
+    parseItems(): void;
+    componentWillLoad(): void;
+    private handleItemClick;
+    private handleItemEnter;
+    private handleItemLeave;
+    render(): any;
+}

package/dist/types/components/af-chart-section/af-chart-section.d.ts

@@ -0,0 +1,37 @@
+import type { Theme, Padding } from '../../types';
+/**
+ * A themed section container optimized for Chart.js or similar charting libraries.
+ * Extends af-section visually with chart-specific features like aspect ratio
+ * and caption support.
+ *
+ * Use with the `getChartConfig(theme)` helper from `@affinda/tokens` to apply
+ * brand-consistent colors to Chart.js charts.
+ *
+ * @slot - Chart canvas or container element
+ *
+ * @example
+ * ```html
+ * <af-chart-section theme="inkwell" caption="Monthly Revenue">
+ *   <canvas id="revenue-chart"></canvas>
+ * </af-chart-section>
+ * ```
+ */
+export declare class AfChartSection {
+    /**
+     * Theme for the section background and chart color tokens.
+     */
+    theme: Theme;
+    /**
+     * Vertical padding variant.
+     */
+    padding: Padding;
+    /**
+     * Aspect ratio for the chart container (CSS aspect-ratio syntax).
+     */
+    aspectRatio: string;
+    /**
+     * Optional caption text displayed below the chart.
+     */
+    caption?: string;
+    render(): any;
+}

package/dist/types/components/af-chart-tooltip/af-chart-tooltip.d.ts

@@ -0,0 +1,87 @@
+import type { Theme } from '../../types';
+/**
+ * Tooltip content structure.
+ */
+export interface TooltipContent {
+    title?: string;
+    label: string;
+    value: string | number;
+    color?: string;
+    /** Additional rows for multi-value tooltips */
+    rows?: Array<{
+        label: string;
+        value: string | number;
+        color?: string;
+    }>;
+}
+/**
+ * A floating tooltip component for chart interactivity.
+ *
+ * Designed to be positioned programmatically by chart components.
+ * Supports single and multi-row content with optional color swatches.
+ *
+ * @slot - Custom tooltip content (overrides default rendering)
+ *
+ * @example Basic usage
+ * ```html
+ * <af-chart-tooltip id="my-tooltip"></af-chart-tooltip>
+ *
+ * <script>
+ *   const tooltip = document.getElementById('my-tooltip');
+ *   tooltip.show({ label: 'January', value: 1200 }, 100, 50);
+ * </script>
+ * ```
+ *
+ * @example Multi-row tooltip
+ * ```html
+ * <af-chart-tooltip id="multi-tooltip"></af-chart-tooltip>
+ *
+ * <script>
+ *   tooltip.show({
+ *     title: 'Q1 2024',
+ *     label: 'Revenue',
+ *     value: '$120K',
+ *     rows: [
+ *       { label: 'Sales', value: '$80K', color: '#c6d5d1' },
+ *       { label: 'Services', value: '$40K', color: '#c0ab8d' },
+ *     ]
+ *   }, 150, 80);
+ * </script>
+ * ```
+ */
+export declare class AfChartTooltip {
+    el: HTMLElement;
+    /**
+     * Theme for colors.
+     */
+    theme: Theme;
+    /**
+     * Tooltip placement relative to the anchor point.
+     */
+    placement: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Offset from anchor point in pixels.
+     */
+    offset: number;
+    private visible;
+    private content;
+    private position;
+    /**
+     * Show the tooltip at the specified position with content.
+     *
+     * @param content - Tooltip content
+     * @param x - X position (relative to parent container)
+     * @param y - Y position (relative to parent container)
+     */
+    show(content: TooltipContent, x: number, y: number): Promise<void>;
+    /**
+     * Hide the tooltip.
+     */
+    hide(): Promise<void>;
+    /**
+     * Update the tooltip position without changing content.
+     */
+    updatePosition(x: number, y: number): Promise<void>;
+    private getTransform;
+    render(): any;
+}

package/dist/types/components/af-client-carousel/af-client-carousel.d.ts

@@ -44,7 +44,12 @@ export declare class AfClientCarousel {
     mode: Mode;
     private row1TrackRef?;
     private row2TrackRef?;
+    private resizeFrame?;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleWindowResize(): void;
+    private scheduleTrackPreparation;
+    private prepareTracks;
     /**
      * Append clones of every existing track child into the track so the
      * -50% translate animation loops seamlessly. Marks clones with

package/dist/types/components/af-feature-accordion/af-feature-accordion.d.ts

@@ -3,6 +3,8 @@ export interface FeatureAccordionItem {
     description: string;
     imageUrl?: string;
     imageAlt?: string;
+    imageWidth?: number;
+    imageHeight?: number;
 }
 /**
  * Feature accordion component with expandable items and accompanying image.
@@ -23,6 +25,8 @@ export declare class AfFeatureAccordion {
     el: HTMLElement;
     /** Section heading */
     heading: string;
+    /** Optional section description shown below the heading */
+    description: string;
     /** JSON string of accordion items */
     items: string;
     /** Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) */
@@ -33,14 +37,20 @@ export declare class AfFeatureAccordion {
     expandedIndex: number;
     /** Progress of current timer (0-100) */
     timerProgress: number;
+    /** Whether auto-cycling is temporarily paused by the user */
+    isPaused: boolean;
     private progressTimer;
     private progressStartTime;
+    private pausedRemaining;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     handleAutoCycleChange(newValue: boolean): void;
     private getItems;
     private startCycling;
     private stopCycling;
+    private pauseCycling;
+    private resumeCycling;
+    private togglePause;
     private moveToNextItem;
     private handleItemClick;
     render(): any;

package/dist/types/components/af-icon/af-icon.d.ts

@@ -1,4 +1,4 @@
-import type { IconName } from '@affinda/icons';
+import type { IconName } from "../../../../icons/dist/index";
 /**
  * Icon component that displays SVG icons from the Affinda icon library.
  * Icons inherit color from their parent via currentColor.

package/dist/types/components/af-icon-box/af-icon-box.d.ts

@@ -1,4 +1,4 @@
-import type { IconName } from '@affinda/icons';
+import type { IconName } from "../../../../icons/dist/index";
 /**
  * IconBox atom - a themed container for displaying an icon with a rounded background.
  *

package/dist/types/components/af-icon-text/af-icon-text.d.ts

@@ -1,4 +1,4 @@
-import type { IconName } from '@affinda/icons';
+import type { IconName } from "../../../../icons/dist/index";
 /**
  * IconText molecule - combines an IconBox with a TypographyLockup for feature items.
  *

package/dist/types/components/af-image/af-image.d.ts

@@ -1,8 +1,20 @@
+export type ImageShape = 'rounded' | 'pill' | 'd-left' | 'd-right' | 'square';
+export type CaptionPosition = 'below' | 'overlay';
 /**
- * A styled image container with rounded corners and a subtle inset border.
+ * A styled image container with configurable shape variants and optional caption.
  * Provides consistent image styling across the design system.
+ *
+ * @slot caption - Optional caption content displayed below or overlaid on the image
+ *
+ * @example
+ * ```html
+ * <af-image src="/photo.jpg" alt="Description" shape="pill">
+ *   <span slot="caption">Photo caption text</span>
+ * </af-image>
+ * ```
  */
 export declare class AfImage {
+    el: HTMLElement;
     /**
      * The image source URL
      */
@@ -12,14 +24,21 @@ export declare class AfImage {
      */
     alt: string;
     /**
-     * Shape / corner rounding variant. Matches Webflow's `.image-fill.rounded-*`
-     * patterns where only one edge is rounded so the image bleeds into a
-     * neighbouring section.
-     * - `rounded` (default) — symmetric rounded corners on all four sides.
-     * - `rounded-left` — rounded only on the left edge (top-left + bottom-left).
-     * - `rounded-right` — rounded only on the right edge.
-     * - `square` — no corner rounding.
+     * Shape / corner rounding variant.
+     * - `rounded` (default) — symmetric `--radius-md` (12px) corners on all sides.
+     * - `pill` — fully rounded ends (`border-radius: 9999px`), stadium shape.
+     * - `d-left` — flat right edge, rounded left edge (half-capsule pointing left).
+     * - `d-right` — flat left edge, rounded right edge (half-capsule pointing right).
+     * - `square` — no corner rounding, explicitly opt-out of default rounded corners.
      */
-    shape: 'rounded' | 'rounded-left' | 'rounded-right' | 'square';
+    shape: ImageShape;
+    /**
+     * Caption placement when caption slot is used.
+     * - `below` (default) — caption sits beneath the image with spacing.
+     * - `overlay` — caption overlays the bottom of the image with a gradient.
+     */
+    captionPosition: CaptionPosition;
+    private hasCaption;
+    componentWillLoad(): void;
     render(): any;
 }