@affinda/wc 0.6.1 → 0.7.0

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

@@ -0,0 +1,111 @@
+import type { Theme } from '../../types';
+import { type InteractiveMode, type CurveType } from '../../utils/charts';
+/**
+ * A native SVG line chart component with theme integration.
+ *
+ * Supports linear/smooth curves, data points, area fill, and progressive
+ * interactivity (none, hover, tooltip).
+ *
+ * @slot - Optional custom content (placed after chart)
+ *
+ * @example Simple line chart
+ * ```html
+ * <af-line-chart
+ *   data='[{"label":"Jan","value":120},{"label":"Feb","value":180}]'
+ *   theme="mist-green"
+ *   curve="smooth"
+ * ></af-line-chart>
+ * ```
+ *
+ * @example With area fill and points
+ * ```html
+ * <af-line-chart
+ *   data='[{"label":"Q1","value":100},{"label":"Q2","value":150}]'
+ *   show-area
+ *   show-points
+ *   interactive="hover"
+ * ></af-line-chart>
+ * ```
+ */
+export declare class AfLineChart {
+    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.
+     */
+    theme: Theme;
+    /**
+     * Line curve interpolation.
+     */
+    curve: CurveType;
+    /**
+     * Show data point markers.
+     */
+    showPoints: boolean;
+    /**
+     * Fill area under line.
+     */
+    showArea: 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;
+    /**
+     * Line stroke width.
+     */
+    strokeWidth: number;
+    /**
+     * Data point radius.
+     */
+    pointRadius: number;
+    /**
+     * Custom accessible label.
+     */
+    chartLabel?: string;
+    /**
+     * Chart width (SVG viewBox).
+     */
+    width: number;
+    /**
+     * Aspect ratio as width/height.
+     */
+    aspectRatio: number;
+    private parsedData;
+    private hoveredIndex;
+    private tooltipData;
+    parseData(): void;
+    componentWillLoad(): void;
+    private get height();
+    private get margins();
+    private get chartBounds();
+    private isMultiSeries;
+    private handlePointEnter;
+    private handlePointLeave;
+    private renderSingleSeries;
+    private renderMultiSeries;
+    private renderAxes;
+    private renderLegend;
+    private renderTooltip;
+    render(): any;
+}

package/dist/types/components/af-logo-mark/af-logo-mark.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Compact Affinda logo mark (paperclip icon only).
+ *
+ * Use this in footers, tight spaces, or anywhere the full wordmark
+ * (`af-logo`) would be too large. The mark uses `currentColor` for
+ * the fill, so it inherits text colour from its context.
+ *
+ * @example
+ * ```html
+ * <af-logo-mark width="40" height="26"></af-logo-mark>
+ * ```
+ */
+export declare class AfLogoMark {
+    /**
+     * SVG width — accepts any CSS length or unitless number (pixels).
+     * Defaults to the intrinsic viewBox width.
+     */
+    width: string;
+    /**
+     * SVG height — accepts any CSS length or unitless number (pixels).
+     * Defaults to the intrinsic viewBox height.
+     */
+    height: string;
+    render(): any;
+}

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

@@ -58,7 +58,9 @@ export declare class AfNavbar {
     handleTriggerClick(event: MouseEvent): void;
     /**
      * Open the dropdown matching a `[data-dropdown]` trigger on hover.
-     * Uses mouseover (which bubbles) and checks for the trigger ancestor.
+     * When hovering over the dropdown panel itself, keep it open.
+     * Anywhere else in the navbar, schedule a debounced close so the
+     * mouse has a brief grace period to cross gaps.
      */
     handleHover(event: MouseEvent): void;
     /**

package/dist/types/components/af-next-step-item/af-next-step-item.d.ts

@@ -0,0 +1,31 @@
+import type { IconName } from "../../../../icons/dist/index";
+/**
+ * Individual item within an af-next-steps container.
+ * Renders with an icon or number badge and optional description.
+ *
+ * @slot - Step title content
+ * @slot description - Optional detail text
+ *
+ * @example
+ * ```html
+ * <af-next-step-item icon="check">
+ *   Complete the form
+ *   <span slot="description">Fill in all required fields.</span>
+ * </af-next-step-item>
+ * ```
+ */
+export declare class AfNextStepItem {
+    /**
+     * Icon to display in the badge. Ignored when parent has `numbered` set.
+     */
+    icon: IconName;
+    /**
+     * Step number. Auto-assigned by parent `af-next-steps` when `numbered`.
+     */
+    index: number;
+    /**
+     * Whether to show number instead of icon. Set by parent `af-next-steps`.
+     */
+    numbered: boolean;
+    render(): any;
+}

package/dist/types/components/af-next-steps/af-next-steps.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Container for a list of next steps or upcoming actions.
+ * Renders children `af-next-step-item` elements in a vertical stack with
+ * connector lines between items, similar to stepper components.
+ *
+ * @slot heading - Optional section heading above the steps
+ * @slot - `af-next-step-item` children
+ *
+ * @example
+ * ```html
+ * <af-next-steps numbered>
+ *   <span slot="heading">What's Next</span>
+ *   <af-next-step-item>
+ *     Review the proposal
+ *     <span slot="description">Check all sections are complete.</span>
+ *   </af-next-step-item>
+ *   <af-next-step-item>
+ *     Submit for approval
+ *   </af-next-step-item>
+ * </af-next-steps>
+ * ```
+ */
+export declare class AfNextSteps {
+    el: HTMLElement;
+    /**
+     * Show step numbers instead of icons.
+     */
+    numbered: boolean;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    private assignIndices;
+    render(): any;
+}

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

@@ -0,0 +1,77 @@
+import type { Theme } from '../../types';
+import { type InteractiveMode } from '../../utils/charts';
+/**
+ * A native SVG pie chart component with theme integration.
+ *
+ * Supports progressive interactivity and optional labels.
+ *
+ * @slot - Optional custom content (placed after chart)
+ *
+ * @example Simple pie chart
+ * ```html
+ * <af-pie-chart
+ *   data='[{"label":"Resumes","value":35},{"label":"Invoices","value":25}]'
+ *   theme="mist-green"
+ * ></af-pie-chart>
+ * ```
+ *
+ * @example Pie chart with labels and hover
+ * ```html
+ * <af-pie-chart
+ *   data='[{"label":"A","value":40},{"label":"B","value":30},{"label":"C","value":30}]'
+ *   show-labels
+ *   interactive="hover"
+ * ></af-pie-chart>
+ * ```
+ */
+export declare class AfPieChart {
+    el: HTMLElement;
+    /**
+     * Chart data as JSON string.
+     * Format: `[{"label":"Category","value":100}, ...]`
+     */
+    data: string;
+    /**
+     * Theme for colors.
+     */
+    theme: Theme;
+    /**
+     * Start angle in degrees (0 = 3 o'clock, -90 = 12 o'clock).
+     */
+    startAngle: number;
+    /**
+     * Show percentage labels on segments.
+     */
+    showLabels: boolean;
+    /**
+     * Show legend beside/below chart.
+     */
+    showLegend: boolean;
+    /**
+     * Interactivity level.
+     */
+    interactive: InteractiveMode;
+    /**
+     * Enable CSS entry animations.
+     */
+    animated: boolean;
+    /**
+     * Custom accessible label.
+     */
+    chartLabel?: string;
+    /**
+     * Chart size (width and height, square).
+     */
+    size: number;
+    private parsedData;
+    private hoveredIndex;
+    private tooltipData;
+    parseData(): void;
+    componentWillLoad(): void;
+    private handleSegmentEnter;
+    private handleSegmentLeave;
+    private renderChart;
+    private renderLegend;
+    private renderTooltip;
+    render(): any;
+}

package/dist/types/components/af-proposal-footer/af-proposal-footer.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Minimal footer for client proposal documents.
+ *
+ * Displays the Affinda logo mark alongside proposal metadata text.
+ * Designed for standalone HTML documents and print-friendly layouts.
+ *
+ * @example
+ * ```html
+ * <af-proposal-footer
+ *   client-name="Land Services SA"
+ *   date="May 2026"
+ *   confidential
+ * ></af-proposal-footer>
+ * ```
+ */
+export declare class AfProposalFooter {
+    /** Client name displayed in the footer text. */
+    clientName: string;
+    /** Date string (e.g. "May 2026"). */
+    date: string;
+    /** Whether to show "Confidential" suffix. */
+    confidential: boolean;
+    private buildFooterText;
+    render(): any;
+}

package/dist/types/components/af-proposal-header/af-proposal-header.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Full-width hero header for client proposal documents.
+ *
+ * Renders an inkwell-themed header with the Affinda brandmark, client title,
+ * subtitle, and meta information (prepared for/by, date). Includes a decorative
+ * paperclip watermark in the background.
+ *
+ * Designed to work in standalone HTML documents outside the Astro marketing site.
+ *
+ * @example
+ * ```html
+ * <af-proposal-header
+ *   team="Value Creation"
+ *   client-name="Land Services SA"
+ *   subtitle="Three ways we can work together to grow margin..."
+ *   prepared-for="Land Services SA executive team"
+ *   prepared-by="Affinda, Value Creation & AI Solutions"
+ *   date="May 2026"
+ * ></af-proposal-header>
+ * ```
+ */
+export declare class AfProposalHeader {
+    /** Team or division name shown beside the logo (e.g. "Value Creation"). */
+    team: string;
+    /** Client name displayed in the title as "{clientName} × Affinda". */
+    clientName: string;
+    /** Supporting description or tagline below the title. */
+    subtitle: string;
+    /** Who the proposal is prepared for (e.g. "Land Services SA executive team"). */
+    preparedFor: string;
+    /** Author attribution (defaults to Affinda Value Creation team). */
+    preparedBy: string;
+    /** Date string (e.g. "May 2026"). */
+    date: string;
+    render(): any;
+}

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

@@ -11,5 +11,7 @@ export declare class AfStat {
     value: string;
     /** Description / caption rendered beneath the value. */
     label: string;
+    /** Whether to show the left accent border. */
+    accentBorder: boolean;
     render(): any;
 }

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

@@ -0,0 +1,77 @@
+interface ScrollState {
+    horizontal: {
+        progress: number;
+        thumbSize: number;
+        show: boolean;
+    };
+    vertical: {
+        progress: number;
+        thumbSize: number;
+        show: boolean;
+    };
+}
+/**
+ * A styled table wrapper that applies design system tokens to native table elements.
+ * Uses descendant selectors to style `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`.
+ *
+ * @slot - Native table elements (`<table>`, `<thead>`, `<tbody>`, etc.)
+ *
+ * @example
+ * ```html
+ * <af-table striped>
+ *   <table>
+ *     <thead>
+ *       <tr>
+ *         <th>Name</th>
+ *         <th>Status</th>
+ *       </tr>
+ *     </thead>
+ *     <tbody>
+ *       <tr>
+ *         <td>Item 1</td>
+ *         <td>Active</td>
+ *       </tr>
+ *     </tbody>
+ *   </table>
+ * </af-table>
+ * ```
+ */
+export declare class AfTable {
+    private scrollEl;
+    private draggingAxis;
+    private resizeObserver;
+    /**
+     * Apply alternating row backgrounds for better readability.
+     */
+    striped: boolean;
+    /**
+     * Show cell borders.
+     */
+    bordered: boolean;
+    /**
+     * Use reduced padding for dense data tables.
+     */
+    compact: boolean;
+    /**
+     * Make the table header sticky when scrolling.
+     */
+    stickyHeader: boolean;
+    /**
+     * Maximum height of the table (enables vertical scrolling).
+     * Can be any valid CSS value (e.g., "400px", "50vh").
+     */
+    maxHeight?: string;
+    scrollState: ScrollState;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private updateScrollState;
+    private handleScroll;
+    private handleScrollbarPointerDown;
+    private handleScrollbarPointerMove;
+    private handleScrollbarPointerUp;
+    private scrollToPointerPosition;
+    private getHorizontalThumbStyle;
+    private getVerticalThumbStyle;
+    render(): any;
+}
+export {};

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

@@ -12,10 +12,18 @@ export declare class AfTestimonial {
      * Background image URL for the testimonial card
      */
     backgroundImage?: string;
+    /** Intrinsic background image width in pixels. */
+    backgroundImageWidth?: number;
+    /** Intrinsic background image height in pixels. */
+    backgroundImageHeight?: number;
     /**
      * Company logo URL
      */
     logoImage?: string;
+    /** Intrinsic logo image width in pixels. */
+    logoImageWidth?: number;
+    /** Intrinsic logo image height in pixels. */
+    logoImageHeight?: number;
     /**
      * Testimonial quote text. Falls back to the `quote-body` slot if that
      * slot has content.

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

@@ -13,6 +13,7 @@ export declare class AfTestimonialCarousel {
     testimonialCount: number;
     private testimonials;
     private observer;
+    private draggingProgress;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     /**
@@ -24,9 +25,17 @@ export declare class AfTestimonialCarousel {
     private updateVisibleTestimonial;
     private goToPrevious;
     private goToNext;
+    private goToIndex;
     /**
-     * Calculate progress value (0 to 1) based on current position
+     * Fixed-width scrollbar thumb: width is the visible fraction, left
+     * moves with the current slide. This matches the live site's native
+     * scrollbar-like progress treatment better than a fill-from-zero bar.
      */
-    private getProgress;
+    private getThumbStyle;
+    private indexFromProgressEvent;
+    private handleProgressPointerDown;
+    private handleProgressPointerMove;
+    private handleProgressPointerUp;
+    private handleProgressKeyDown;
     render(): any;
 }

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

@@ -0,0 +1,86 @@
+export type TimelineUnit = 'day' | 'week' | 'month' | 'quarter';
+interface TimelineContext {
+    startDate: Date;
+    endDate: Date;
+    totalDays: number;
+    unit: TimelineUnit;
+}
+interface ScrollState {
+    progress: number;
+    thumbWidth: number;
+    showScrollbar: boolean;
+}
+/**
+ * Horizontal Gantt-style timeline for displaying project phases and milestones.
+ * Items are positioned based on their date ranges relative to the timeline bounds.
+ *
+ * @slot heading - Optional timeline title
+ * @slot - `af-timeline-item` children
+ *
+ * @example
+ * ```html
+ * <af-timeline start-date="2024-01-01" end-date="2024-06-30" unit="month">
+ *   <span slot="heading">Project Timeline</span>
+ *   <af-timeline-item start-date="2024-01-01" end-date="2024-02-28" label="Phase 1" status="complete">
+ *   </af-timeline-item>
+ *   <af-timeline-item start-date="2024-03-01" end-date="2024-04-30" label="Phase 2" status="active">
+ *   </af-timeline-item>
+ * </af-timeline>
+ * ```
+ */
+export declare class AfTimeline {
+    el: HTMLElement;
+    /**
+     * Timeline start date (ISO format YYYY-MM-DD or label).
+     */
+    startDate: string;
+    /**
+     * Timeline end date (ISO format YYYY-MM-DD or label).
+     */
+    endDate: string;
+    /**
+     * Time axis granularity.
+     */
+    unit: TimelineUnit;
+    /**
+     * Display time axis labels at top.
+     */
+    showAxis: boolean;
+    /**
+     * Highlight current date with a marker.
+     */
+    showToday: boolean;
+    /**
+     * Highlight a specific target/goal date.
+     */
+    targetDate?: string;
+    context: TimelineContext | null;
+    axisLabels: {
+        label: string;
+        position: number;
+    }[];
+    todayPosition: number | null;
+    targetPosition: number | null;
+    scrollState: ScrollState;
+    private ganttEl;
+    private draggingScrollbar;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    handleDateChange(): void;
+    private parseDate;
+    private updateContext;
+    private calculateAxisLabels;
+    private calculateTodayPosition;
+    private calculateTargetPosition;
+    private getPositionForDate;
+    private syncItemPositions;
+    private updateScrollState;
+    private handleGanttScroll;
+    private handleScrollbarPointerDown;
+    private handleScrollbarPointerMove;
+    private handleScrollbarPointerUp;
+    private scrollToPointerPosition;
+    private getThumbStyle;
+    render(): any;
+}
+export {};

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

@@ -0,0 +1,59 @@
+export type TimelineItemStatus = 'planned' | 'active' | 'complete';
+/**
+ * Individual item within an af-timeline container.
+ * Renders as a horizontal bar in Gantt view or a list item on mobile.
+ *
+ * @slot - Item content/tooltip
+ *
+ * @example
+ * ```html
+ * <af-timeline-item
+ *   start-date="2024-01-01"
+ *   end-date="2024-02-28"
+ *   label="Phase 1"
+ *   status="complete"
+ * >
+ *   Phase 1: Initial research and planning
+ * </af-timeline-item>
+ * ```
+ */
+export declare class AfTimelineItem {
+    /**
+     * Item start date (ISO format YYYY-MM-DD).
+     */
+    startDate: string;
+    /**
+     * Item end date (ISO format YYYY-MM-DD). Omit for milestone marker.
+     */
+    endDate?: string;
+    /**
+     * Display label for the item.
+     */
+    label?: string;
+    /**
+     * Visual status of the item.
+     */
+    status: TimelineItemStatus;
+    /**
+     * Vertical row/lane for the item (auto-assigned by parent if not set).
+     */
+    row?: number;
+    /**
+     * Show tooltip on hover. Set to false to disable tooltips.
+     */
+    showTooltip: boolean;
+    /**
+     * Internal: start position percentage (set by parent).
+     */
+    _startPosition: number;
+    /**
+     * Internal: width percentage (set by parent).
+     */
+    _width: number;
+    isMilestone: boolean;
+    componentWillLoad(): void;
+    handleEndDateChange(): void;
+    private checkMilestone;
+    private formatDateRange;
+    render(): any;
+}