@affinda/wc 0.6.1 → 0.7.0

package/dist/types/components.d.ts

@@ -5,20 +5,36 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { ActionItemStatus } from "./components/af-action-item/af-action-item";
 import { Gap, HeadingSize, Padding, Theme } from "./types";
+import { CurveType, InteractiveMode, Orientation } from "./utils/charts";
+import { CalloutVariant } from "./components/af-callout/af-callout";
+import { IconName } from "../../icons/dist/index.d";
+import { LegendItem } from "./components/af-chart-legend/af-chart-legend";
+import { TooltipContent } from "./components/af-chart-tooltip/af-chart-tooltip";
 import { HeroTopPad, HeroVariant } from "./components/af-hero/af-hero";
-import { IconName } from "@affinda/icons";
+import { CaptionPosition, ImageShape } from "./components/af-image/af-image";
 import { NumberBadgeNumber, NumberBadgeVariant } from "./components/af-number-badge/af-number-badge";
 import { TabShape } from "./components/af-tab/af-tab";
 import { TabBarBreakpoint, TabBarShape } from "./components/af-tab-bar/af-tab-bar";
 import { TagSize, TagVariant } from "./components/af-tag/af-tag";
+import { TimelineUnit } from "./components/af-timeline/af-timeline";
+import { TimelineItemStatus } from "./components/af-timeline-item/af-timeline-item";
+export { ActionItemStatus } from "./components/af-action-item/af-action-item";
 export { Gap, HeadingSize, Padding, Theme } from "./types";
+export { CurveType, InteractiveMode, Orientation } from "./utils/charts";
+export { CalloutVariant } from "./components/af-callout/af-callout";
+export { IconName } from "../../icons/dist/index.d";
+export { LegendItem } from "./components/af-chart-legend/af-chart-legend";
+export { TooltipContent } from "./components/af-chart-tooltip/af-chart-tooltip";
 export { HeroTopPad, HeroVariant } from "./components/af-hero/af-hero";
-export { IconName } from "@affinda/icons";
+export { CaptionPosition, ImageShape } from "./components/af-image/af-image";
 export { NumberBadgeNumber, NumberBadgeVariant } from "./components/af-number-badge/af-number-badge";
 export { TabShape } from "./components/af-tab/af-tab";
 export { TabBarBreakpoint, TabBarShape } from "./components/af-tab-bar/af-tab-bar";
 export { TagSize, TagVariant } from "./components/af-tag/af-tag";
+export { TimelineUnit } from "./components/af-timeline/af-timeline";
+export { TimelineItemStatus } from "./components/af-timeline-item/af-timeline-item";
 export namespace Components {
     /**
      * Accordion container that manages multiple accordion items.
@@ -63,6 +79,151 @@ export namespace Components {
          */
         "toggle": () => Promise<void>;
     }
+    /**
+     * Individual action item within an af-action-list container.
+     * Displays a task with status indicator, optional assignee, and due date.
+     * @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>
+     * ```
+     */
+    interface AfActionItem {
+        /**
+          * Optional assignee name.
+         */
+        "assignee"?: string;
+        /**
+          * Optional due date display text.
+         */
+        "dueDate"?: string;
+        /**
+          * Whether clicking toggles the status (cycles: pending -> in-progress -> done).
+          * @default false
+         */
+        "interactive": boolean;
+        /**
+          * Current status of the action item.
+          * @default 'pending'
+         */
+        "status": ActionItemStatus;
+    }
+    /**
+     * Container for a list of action items or tasks with status tracking.
+     * Renders children `af-action-item` elements with optional progress bar.
+     * @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>
+     * ```
+     */
+    interface AfActionList {
+        /**
+          * Show a progress bar indicating completion percentage.
+          * @default false
+         */
+        "showProgress": boolean;
+    }
+    /**
+     * A native SVG area chart component with theme integration.
+     * Supports stacked areas for multi-series data, linear/smooth curves,
+     * and progressive interactivity.
+     * @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>
+     * ```
+     */
+    interface AfAreaChart {
+        /**
+          * Enable CSS entry animations.
+          * @default false
+         */
+        "animated": boolean;
+        /**
+          * Aspect ratio as width/height.
+          * @default 16 / 9
+         */
+        "aspectRatio": number;
+        /**
+          * Custom accessible label.
+         */
+        "chartLabel"?: string;
+        /**
+          * Curve interpolation.
+          * @default 'smooth'
+         */
+        "curve": CurveType;
+        /**
+          * Chart data as JSON string.
+          * @default '[]'
+         */
+        "data": string;
+        /**
+          * Interactivity level.
+          * @default 'none'
+         */
+        "interactive": InteractiveMode;
+        /**
+          * Area fill opacity (0-1).
+          * @default 0.6
+         */
+        "opacity": number;
+        /**
+          * Show axis labels.
+          * @default true
+         */
+        "showAxis": boolean;
+        /**
+          * Show grid lines.
+          * @default true
+         */
+        "showGrid": boolean;
+        /**
+          * Show legend below chart.
+          * @default false
+         */
+        "showLegend": boolean;
+        /**
+          * Show outline stroke on areas.
+          * @default true
+         */
+        "showStroke": boolean;
+        /**
+          * Stack multiple series on top of each other.
+          * @default false
+         */
+        "stacked": boolean;
+        /**
+          * Stroke width for area outlines.
+          * @default 2
+         */
+        "strokeWidth": number;
+        /**
+          * Theme for colors.
+          * @default 'white'
+         */
+        "theme": Theme;
+        /**
+          * Chart width (SVG viewBox).
+          * @default 400
+         */
+        "width": number;
+    }
     /**
      * A container component that maintains a fixed aspect ratio for its content.
      * Useful for images, videos, or any content that needs to maintain specific proportions.
@@ -75,6 +236,92 @@ export namespace Components {
          */
         "ratio": string;
     }
+    /**
+     * A native SVG bar chart component with theme integration.
+     * Supports vertical/horizontal orientation, stacked bars, and progressive
+     * interactivity (none, hover, tooltip).
+     * @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>
+     * ```
+     */
+    interface AfBarChart {
+        /**
+          * Enable CSS entry animations.
+          * @default false
+         */
+        "animated": boolean;
+        /**
+          * Aspect ratio as width/height (e.g., 16/9 = 1.78).
+          * @default 16 / 9
+         */
+        "aspectRatio": number;
+        /**
+          * Corner radius for bars.
+          * @default 4
+         */
+        "barRadius": number;
+        /**
+          * Custom accessible label. Auto-generated if not provided.
+         */
+        "chartLabel"?: string;
+        /**
+          * Chart data as JSON string. Single series: `[{"label":"Jan","value":100}, ...]` Multi-series: `{"labels":["Jan","Feb"],"series":[{"name":"A","values":[100,200]}]}`
+          * @default '[]'
+         */
+        "data": string;
+        /**
+          * Interactivity level. - `none`: Static SVG, optimal for SSR - `hover`: CSS hover states with native tooltips - `tooltip`: JS-powered rich tooltips
+          * @default 'none'
+         */
+        "interactive": InteractiveMode;
+        /**
+          * Bar orientation.
+          * @default 'vertical'
+         */
+        "orientation": Orientation;
+        /**
+          * Show axis labels.
+          * @default true
+         */
+        "showAxis": boolean;
+        /**
+          * Show grid lines.
+          * @default true
+         */
+        "showGrid": boolean;
+        /**
+          * Show legend below chart.
+          * @default false
+         */
+        "showLegend": boolean;
+        /**
+          * Stack multiple series on top of each other.
+          * @default false
+         */
+        "stacked": boolean;
+        /**
+          * Theme for colors. Inherits from parent af-chart-section if nested.
+          * @default 'white'
+         */
+        "theme": Theme;
+        /**
+          * Chart width (SVG viewBox). Height is calculated from aspect ratio.
+          * @default 400
+         */
+        "width": number;
+    }
     /**
      * Button component that inherits colors from theme context.
      * Colors are determined by the parent theme (af-section, af-card, etc.)
@@ -118,6 +365,37 @@ export namespace Components {
          */
         "gap": string;
     }
+    /**
+     * 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)
+     * @example ```html
+     * <af-callout variant="warning">
+     *   Important Notice
+     *   <span slot="description">Please review the following information.</span>
+     * </af-callout>
+     * ```
+     */
+    interface AfCallout {
+        /**
+          * Whether the callout can be dismissed by the user.
+          * @default false
+         */
+        "dismissible": boolean;
+        /**
+          * Icon to display. Set to 'auto' to pick based on variant, or 'none' to hide.
+          * @default 'auto'
+         */
+        "icon": IconName | 'auto' | 'none';
+        /**
+          * Visual variant of the callout. - Semantic: `info`, `warning`, `success`, `error` (status colors) - Themed: `inkwell`, `mist-green`, `soft-clay`, `ice` (brand colors)
+          * @default 'info'
+         */
+        "variant": CalloutVariant;
+    }
     /**
      * Card atom component - a themed container with consistent styling.
      * Provides theme context to children via CSS custom properties.
@@ -161,6 +439,150 @@ export namespace Components {
          */
         "minHeight"?: string;
     }
+    /**
+     * A standalone chart legend component.
+     * Can be used alongside any chart component or custom SVG charts.
+     * Supports interactive highlighting and toggle behavior.
+     * @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>
+     * ```
+     */
+    interface AfChartLegend {
+        /**
+          * Alignment.
+          * @default 'center'
+         */
+        "align": 'start' | 'center' | 'end';
+        /**
+          * Layout direction.
+          * @default 'horizontal'
+         */
+        "direction": 'horizontal' | 'vertical';
+        /**
+          * Enable interactive hover/click behavior.
+          * @default false
+         */
+        "interactive": boolean;
+        /**
+          * Legend items as JSON string.
+          * @default '[]'
+         */
+        "items": string;
+        /**
+          * Swatch shape.
+          * @default 'square'
+         */
+        "swatchShape": 'square' | 'circle' | 'line';
+        /**
+          * Theme for colors.
+          * @default 'white'
+         */
+        "theme": Theme;
+    }
+    /**
+     * 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.
+     * @example ```html
+     * <af-chart-section theme="inkwell" caption="Monthly Revenue">
+     *   <canvas id="revenue-chart"></canvas>
+     * </af-chart-section>
+     * ```
+     */
+    interface AfChartSection {
+        /**
+          * Aspect ratio for the chart container (CSS aspect-ratio syntax).
+          * @default '16/9'
+         */
+        "aspectRatio": string;
+        /**
+          * Optional caption text displayed below the chart.
+         */
+        "caption"?: string;
+        /**
+          * Vertical padding variant.
+          * @default 'default'
+         */
+        "padding": Padding;
+        /**
+          * Theme for the section background and chart color tokens.
+          * @default 'white'
+         */
+        "theme": Theme;
+    }
+    /**
+     * 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.
+     * @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>
+     * ```
+     */
+    interface AfChartTooltip {
+        /**
+          * Hide the tooltip.
+         */
+        "hide": () => Promise<void>;
+        /**
+          * Offset from anchor point in pixels.
+          * @default 8
+         */
+        "offset": number;
+        /**
+          * Tooltip placement relative to the anchor point.
+          * @default 'top'
+         */
+        "placement": 'top' | 'bottom' | 'left' | 'right';
+        /**
+          * 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>;
+        /**
+          * Theme for colors.
+          * @default 'white'
+         */
+        "theme": Theme;
+        /**
+          * Update the tooltip position without changing content.
+         */
+        "updatePosition": (x: number, y: number) => Promise<void>;
+    }
     /**
      * Checkbox component for selecting multiple options.
      * Supports checked, unchecked, and indeterminate states.
@@ -306,6 +728,11 @@ export namespace Components {
           * @default 6000
          */
         "cycleInterval": number;
+        /**
+          * Optional section description shown below the heading
+          * @default ''
+         */
+        "description": string;
         /**
           * Section heading
           * @default 'Give AI agents your paperwork'
@@ -769,8 +1196,13 @@ export namespace Components {
         "theme"?: Theme;
     }
     /**
-     * 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.
+     * @example ```html
+     * <af-image src="/photo.jpg" alt="Description" shape="pill">
+     *   <span slot="caption">Photo caption text</span>
+     * </af-image>
+     * ```
      */
     interface AfImage {
         /**
@@ -778,10 +1210,15 @@ export namespace Components {
          */
         "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.
+          * 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.
+          * @default 'below'
+         */
+        "captionPosition": CaptionPosition;
+        /**
+          * 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.
           * @default 'rounded'
          */
-        "shape": 'rounded' | 'rounded-left' | 'rounded-right' | 'square';
+        "shape": ImageShape;
         /**
           * The image source URL
          */
@@ -985,71 +1422,190 @@ export namespace Components {
         "value": string;
     }
     /**
-     * Affinda logo component
-     */
-    interface AfLogo {
-    }
-    /**
-     * A rounded container for displaying client logos
-     */
-    interface AfLogoWell {
-    }
-    /**
-     * Navigation-styled accordion for mobile menu patterns.
-     * A wrapper around af-accordion with navigation-specific styling.
+     * A native SVG line chart component with theme integration.
+     * Supports linear/smooth curves, data points, area fill, and progressive
+     * interactivity (none, hover, tooltip).
+     * @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>
+     * ```
      */
-    interface AfNavAccordion {
+    interface AfLineChart {
         /**
-          * Breakpoint for styling - `desktop`: Desktop-specific styles - `mobile`: Mobile-specific styles (default for nav menus)
-          * @default 'mobile'
+          * Enable CSS entry animations.
+          * @default false
          */
-        "breakpoint": 'desktop' | 'mobile';
+        "animated": boolean;
         /**
-          * Behavior mode for the accordion. - `independent`: Multiple items can be open simultaneously - `exclusive`: Only one item can be open at a time (typical for mobile nav)
-          * @default 'exclusive'
+          * Aspect ratio as width/height.
+          * @default 16 / 9
          */
-        "mode": 'independent' | 'exclusive';
+        "aspectRatio": number;
         /**
-          * Currently open item ID(s)
+          * Custom accessible label.
          */
-        "value"?: string | string[];
-    }
-    /**
-     * Navigation accordion item with NavItem-styled trigger.
-     * Combines navigation item styling with accordion collapse behavior.
-     */
-    interface AfNavAccordionItem {
+        "chartLabel"?: string;
         /**
-          * Breakpoint for styling
-          * @default 'mobile'
+          * Line curve interpolation.
+          * @default 'linear'
          */
-        "breakpoint": 'desktop' | 'mobile';
+        "curve": CurveType;
         /**
-          * Whether this item is disabled
-          * @default false
+          * Chart data as JSON string. Single series: `[{"label":"Jan","value":100}, ...]` Multi-series: `{"labels":["Jan","Feb"],"series":[{"name":"A","values":[100,200]}]}`
+          * @default '[]'
          */
-        "disabled": boolean;
+        "data": string;
         /**
-          * Optional href - if provided, clicking navigates instead of expanding (chevron area would still toggle expansion if both behaviors needed)
+          * Interactivity level.
+          * @default 'none'
          */
-        "href"?: string;
+        "interactive": InteractiveMode;
         /**
-          * Unique identifier for this accordion item
+          * Data point radius.
+          * @default 4
          */
-        "itemId": string;
+        "pointRadius": number;
         /**
-          * Label text for the navigation item trigger
+          * Fill area under line.
+          * @default false
          */
-        "label"?: string;
+        "showArea": boolean;
         /**
-          * Whether this item is currently expanded
-          * @default false
+          * Show axis labels.
+          * @default true
          */
-        "open": boolean;
+        "showAxis": boolean;
         /**
-          * Programmatically toggle the accordion item
+          * Show grid lines.
+          * @default true
          */
-        "toggle": () => Promise<void>;
+        "showGrid": boolean;
+        /**
+          * Show legend below chart.
+          * @default false
+         */
+        "showLegend": boolean;
+        /**
+          * Show data point markers.
+          * @default false
+         */
+        "showPoints": boolean;
+        /**
+          * Line stroke width.
+          * @default 2
+         */
+        "strokeWidth": number;
+        /**
+          * Theme for colors.
+          * @default 'white'
+         */
+        "theme": Theme;
+        /**
+          * Chart width (SVG viewBox).
+          * @default 400
+         */
+        "width": number;
+    }
+    /**
+     * Affinda logo component
+     */
+    interface AfLogo {
+    }
+    /**
+     * 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>
+     * ```
+     */
+    interface AfLogoMark {
+        /**
+          * SVG height — accepts any CSS length or unitless number (pixels). Defaults to the intrinsic viewBox height.
+          * @default '39'
+         */
+        "height": string;
+        /**
+          * SVG width — accepts any CSS length or unitless number (pixels). Defaults to the intrinsic viewBox width.
+          * @default '61'
+         */
+        "width": string;
+    }
+    /**
+     * A rounded container for displaying client logos
+     */
+    interface AfLogoWell {
+    }
+    /**
+     * Navigation-styled accordion for mobile menu patterns.
+     * A wrapper around af-accordion with navigation-specific styling.
+     */
+    interface AfNavAccordion {
+        /**
+          * Breakpoint for styling - `desktop`: Desktop-specific styles - `mobile`: Mobile-specific styles (default for nav menus)
+          * @default 'mobile'
+         */
+        "breakpoint": 'desktop' | 'mobile';
+        /**
+          * Behavior mode for the accordion. - `independent`: Multiple items can be open simultaneously - `exclusive`: Only one item can be open at a time (typical for mobile nav)
+          * @default 'exclusive'
+         */
+        "mode": 'independent' | 'exclusive';
+        /**
+          * Currently open item ID(s)
+         */
+        "value"?: string | string[];
+    }
+    /**
+     * Navigation accordion item with NavItem-styled trigger.
+     * Combines navigation item styling with accordion collapse behavior.
+     */
+    interface AfNavAccordionItem {
+        /**
+          * Breakpoint for styling
+          * @default 'mobile'
+         */
+        "breakpoint": 'desktop' | 'mobile';
+        /**
+          * Whether this item is disabled
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Optional href - if provided, clicking navigates instead of expanding (chevron area would still toggle expansion if both behaviors needed)
+         */
+        "href"?: string;
+        /**
+          * Unique identifier for this accordion item
+         */
+        "itemId": string;
+        /**
+          * Label text for the navigation item trigger
+         */
+        "label"?: string;
+        /**
+          * Whether this item is currently expanded
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * Programmatically toggle the accordion item
+         */
+        "toggle": () => Promise<void>;
     }
     /**
      * A navigation card component for featured article content in mega-menu dropdowns.
@@ -1166,7 +1722,7 @@ export namespace Components {
         "breakpoint": 'desktop' | 'mobile';
         /**
           * Whether to show the heavier border on the last column (before sidebar). Set to `true` when sidebar has content, `false` when no sidebar. When `false`, the last column has no border.
-          * @default true
+          * @default false
          */
         "showSidebarBorder": boolean;
         /**
@@ -1209,6 +1765,57 @@ export namespace Components {
          */
         "theme"?: Theme;
     }
+    /**
+     * Individual item within an af-next-steps container.
+     * Renders with an icon or number badge and optional description.
+     * @example ```html
+     * <af-next-step-item icon="check">
+     *   Complete the form
+     *   <span slot="description">Fill in all required fields.</span>
+     * </af-next-step-item>
+     * ```
+     */
+    interface AfNextStepItem {
+        /**
+          * Icon to display in the badge. Ignored when parent has `numbered` set.
+          * @default 'arrow-right'
+         */
+        "icon": IconName;
+        /**
+          * Step number. Auto-assigned by parent `af-next-steps` when `numbered`.
+          * @default 0
+         */
+        "index": number;
+        /**
+          * Whether to show number instead of icon. Set by parent `af-next-steps`.
+          * @default false
+         */
+        "numbered": boolean;
+    }
+    /**
+     * 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.
+     * @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>
+     * ```
+     */
+    interface AfNextSteps {
+        /**
+          * Show step numbers instead of icons.
+          * @default false
+         */
+        "numbered": boolean;
+    }
     /**
      * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.
      * Perfect for numbered lists, step indicators, or ordered content.
@@ -1324,6 +1931,71 @@ export namespace Components {
          */
         "width": string;
     }
+    /**
+     * A native SVG pie chart component with theme integration.
+     * Supports progressive interactivity and optional labels.
+     * @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>
+     * ```
+     */
+    interface AfPieChart {
+        /**
+          * Enable CSS entry animations.
+          * @default false
+         */
+        "animated": boolean;
+        /**
+          * Custom accessible label.
+         */
+        "chartLabel"?: string;
+        /**
+          * Chart data as JSON string. Format: `[{"label":"Category","value":100}, ...]`
+          * @default '[]'
+         */
+        "data": string;
+        /**
+          * Interactivity level.
+          * @default 'none'
+         */
+        "interactive": InteractiveMode;
+        /**
+          * Show percentage labels on segments.
+          * @default false
+         */
+        "showLabels": boolean;
+        /**
+          * Show legend beside/below chart.
+          * @default true
+         */
+        "showLegend": boolean;
+        /**
+          * Chart size (width and height, square).
+          * @default 180
+         */
+        "size": number;
+        /**
+          * Start angle in degrees (0 = 3 o'clock, -90 = 12 o'clock).
+          * @default -90
+         */
+        "startAngle": number;
+        /**
+          * Theme for colors.
+          * @default 'white'
+         */
+        "theme": Theme;
+    }
     /**
      * Progress Line atom component for displaying scroll or completion progress.
      * Shows a horizontal bar with a filled portion indicating progress.
@@ -1341,6 +2013,84 @@ export namespace Components {
          */
         "progress": number;
     }
+    /**
+     * 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>
+     * ```
+     */
+    interface AfProposalFooter {
+        /**
+          * Client name displayed in the footer text.
+          * @default ''
+         */
+        "clientName": string;
+        /**
+          * Whether to show "Confidential" suffix.
+          * @default true
+         */
+        "confidential": boolean;
+        /**
+          * Date string (e.g. "May 2026").
+          * @default ''
+         */
+        "date": string;
+    }
+    /**
+     * 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>
+     * ```
+     */
+    interface AfProposalHeader {
+        /**
+          * Client name displayed in the title as "{clientName} × Affinda".
+          * @default ''
+         */
+        "clientName": string;
+        /**
+          * Date string (e.g. "May 2026").
+          * @default ''
+         */
+        "date": string;
+        /**
+          * Author attribution (defaults to Affinda Value Creation team).
+          * @default 'Affinda, Value Creation & AI Solutions'
+         */
+        "preparedBy": string;
+        /**
+          * Who the proposal is prepared for (e.g. "Land Services SA executive team").
+          * @default ''
+         */
+        "preparedFor": string;
+        /**
+          * Supporting description or tagline below the title.
+          * @default ''
+         */
+        "subtitle": string;
+        /**
+          * Team or division name shown beside the logo (e.g. "Value Creation").
+          * @default 'Value Creation'
+         */
+        "team": string;
+    }
     /**
      * Radio component for selecting a single option from a group.
      * Radios with the same `name` prop are mutually exclusive.
@@ -1513,6 +2263,11 @@ export namespace Components {
      * `af-heading` and `af-text` already consume — no theme prop needed here.
      */
     interface AfStat {
+        /**
+          * Whether to show the left accent border.
+          * @default false
+         */
+        "accentBorder": boolean;
         /**
           * Description / caption rendered beneath the value.
          */
@@ -1666,6 +2421,54 @@ export namespace Components {
          */
         "shape": TabBarShape;
     }
+    /**
+     * A styled table wrapper that applies design system tokens to native table elements.
+     * Uses descendant selectors to style `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`.
+     * @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>
+     * ```
+     */
+    interface AfTable {
+        /**
+          * Show cell borders.
+          * @default true
+         */
+        "bordered": boolean;
+        /**
+          * Use reduced padding for dense data tables.
+          * @default false
+         */
+        "compact": boolean;
+        /**
+          * Maximum height of the table (enables vertical scrolling). Can be any valid CSS value (e.g., "400px", "50vh").
+         */
+        "maxHeight"?: string;
+        /**
+          * Make the table header sticky when scrolling.
+          * @default false
+         */
+        "stickyHeader": boolean;
+        /**
+          * Apply alternating row backgrounds for better readability.
+          * @default false
+         */
+        "striped": boolean;
+    }
     /**
      * Tag displays a label in a styled container.
      * Perfect for categorization, topics, or metadata display.
@@ -1703,6 +2506,14 @@ export namespace Components {
           * Background image URL for the testimonial card
          */
         "backgroundImage"?: string;
+        /**
+          * Intrinsic background image height in pixels.
+         */
+        "backgroundImageHeight"?: number;
+        /**
+          * Intrinsic background image width in pixels.
+         */
+        "backgroundImageWidth"?: number;
         /**
           * Whether the next button is enabled
           * @default false
@@ -1717,6 +2528,14 @@ export namespace Components {
           * Company logo URL
          */
         "logoImage"?: string;
+        /**
+          * Intrinsic logo image height in pixels.
+         */
+        "logoImageHeight"?: number;
+        /**
+          * Intrinsic logo image width in pixels.
+         */
+        "logoImageWidth"?: number;
         /**
           * Testimonial quote text. Falls back to the `quote-body` slot if that slot has content.
          */
@@ -1911,54 +2730,148 @@ export namespace Components {
         "theme": Theme;
     }
     /**
-     * Marketing-style composition of heading + description + buttons with
-     * consistent spacing and alignment driven by the `headingSize` prop.
-     * **Semantic vs visual:** `headingSize` controls ONLY the visual scale
-     * (the lockup sets font-size via a `heading-{1..5|card}` class). The semantic
-     * level (h1-h6) is whatever the consumer slots in as default content.
-     * Keep them aligned by convention so assistive tech and search engines
-     * see the right hierarchy:
-     *   headingSize=1 ↔ <h1>   (or <h2> on non-top-of-page sections)
-     *   headingSize=2 ↔ <h2>
-     *   headingSize=3 ↔ <h3>
-     *   headingSize=4 ↔ <h4>
-     *   headingSize=5 ↔ <h5>
-     *   headingSize="card" ↔ <h3> (card-title scale: 22/20px)
-     * When a design asks for a visually small H1 or a visually large H3,
-     * pass the two independently — just do it deliberately, not by
-     * accident. A console warning fires in dev mode if the slotted tag is
-     * more than one level away from the prop.
-     * The `card` variant renders slightly larger than `5` (22/20px vs 20/18px)
-     * and targets card titles in dense grids (diff-card h3, NumberedStepper
-     * title, expert-insights related-card h3 on the marketing site). It sits
-     * between `4` and `5` in the type ladder.
+     * Horizontal Gantt-style timeline for displaying project phases and milestones.
+     * Items are positioned based on their date ranges relative to the timeline bounds.
+     * @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>
+     * ```
      */
-    interface AfTypographyLockup {
+    interface AfTimeline {
         /**
-          * The breakpoint for responsive typography
-          * @default 'desktop'
+          * Timeline end date (ISO format YYYY-MM-DD or label).
          */
-        "breakpoint": 'desktop' | 'mobile';
+        "endDate": string;
         /**
-          * Button layout direction (horizontal or vertical stacking)
-          * @default 'vertical'
+          * Display time axis labels at top.
+          * @default true
          */
-        "buttonLayout": 'horizontal' | 'vertical';
+        "showAxis": boolean;
         /**
-          * Buttons position alignment. Falls back to textAlignment if not specified.
+          * Highlight current date with a marker.
+          * @default true
          */
-        "buttonsAlignment"?: TextAlign;
+        "showToday": boolean;
         /**
-          * Description text alignment. Falls back to textAlignment if not specified.
+          * Timeline start date (ISO format YYYY-MM-DD or label).
          */
-        "descriptionAlignment"?: TextAlign;
+        "startDate": string;
         /**
-          * Description colour variant. Same pattern as `headingColor`; useful for hero-style lockups where the description is rendered in the accent colour. - `default` (default) - uses `--af-typography-body-default` - `secondary` - uses `--af-typography-heading-secondary`
-          * @default 'default'
+          * Highlight a specific target/goal date.
          */
-        "descriptionColor": 'default' | 'secondary';
+        "targetDate"?: string;
         /**
-          * Heading text alignment. Falls back to textAlignment if not specified.
+          * Time axis granularity.
+          * @default 'month'
+         */
+        "unit": TimelineUnit;
+    }
+    /**
+     * Individual item within an af-timeline container.
+     * Renders as a horizontal bar in Gantt view or a list item on mobile.
+     * @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>
+     * ```
+     */
+    interface AfTimelineItem {
+        /**
+          * Internal: start position percentage (set by parent).
+          * @default 0
+         */
+        "_startPosition": number;
+        /**
+          * Internal: width percentage (set by parent).
+          * @default 10
+         */
+        "_width": number;
+        /**
+          * Item end date (ISO format YYYY-MM-DD). Omit for milestone marker.
+         */
+        "endDate"?: string;
+        /**
+          * Display label for the item.
+         */
+        "label"?: string;
+        /**
+          * 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.
+          * @default true
+         */
+        "showTooltip": boolean;
+        /**
+          * Item start date (ISO format YYYY-MM-DD).
+         */
+        "startDate": string;
+        /**
+          * Visual status of the item.
+          * @default 'planned'
+         */
+        "status": TimelineItemStatus;
+    }
+    /**
+     * Marketing-style composition of heading + description + buttons with
+     * consistent spacing and alignment driven by the `headingSize` prop.
+     * **Semantic vs visual:** `headingSize` controls ONLY the visual scale
+     * (the lockup sets font-size via a `heading-{1..5|card}` class). The semantic
+     * level (h1-h6) is whatever the consumer slots in as default content.
+     * Keep them aligned by convention so assistive tech and search engines
+     * see the right hierarchy:
+     *   headingSize=1 ↔ <h1>   (or <h2> on non-top-of-page sections)
+     *   headingSize=2 ↔ <h2>
+     *   headingSize=3 ↔ <h3>
+     *   headingSize=4 ↔ <h4>
+     *   headingSize=5 ↔ <h5>
+     *   headingSize="card" ↔ <h3> (card-title scale: 22/20px)
+     * When a design asks for a visually small H1 or a visually large H3,
+     * pass the two independently — just do it deliberately, not by
+     * accident. A console warning fires in dev mode if the slotted tag is
+     * more than one level away from the prop.
+     * The `card` variant renders slightly larger than `5` (22/20px vs 20/18px)
+     * and targets card titles in dense grids (diff-card h3, NumberedStepper
+     * title, expert-insights related-card h3 on the marketing site). It sits
+     * between `4` and `5` in the type ladder.
+     */
+    interface AfTypographyLockup {
+        /**
+          * The breakpoint for responsive typography
+          * @default 'desktop'
+         */
+        "breakpoint": 'desktop' | 'mobile';
+        /**
+          * Button layout direction (horizontal or vertical stacking)
+          * @default 'vertical'
+         */
+        "buttonLayout": 'horizontal' | 'vertical';
+        /**
+          * Buttons position alignment. Falls back to textAlignment if not specified.
+         */
+        "buttonsAlignment"?: TextAlign;
+        /**
+          * Description text alignment. Falls back to textAlignment if not specified.
+         */
+        "descriptionAlignment"?: TextAlign;
+        /**
+          * Description colour variant. Same pattern as `headingColor`; useful for hero-style lockups where the description is rendered in the accent colour. - `default` (default) - uses `--af-typography-body-default` - `secondary` - uses `--af-typography-heading-secondary`
+          * @default 'default'
+         */
+        "descriptionColor": 'default' | 'secondary';
+        /**
+          * Heading text alignment. Falls back to textAlignment if not specified.
          */
         "headingAlignment"?: TextAlign;
         /**
@@ -2036,6 +2949,18 @@ export interface AfAccordionItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLAfAccordionItemElement;
 }
+export interface AfActionItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAfActionItemElement;
+}
+export interface AfCalloutCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAfCalloutElement;
+}
+export interface AfChartLegendCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAfChartLegendElement;
+}
 export interface AfCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLAfCheckboxElement;
@@ -2119,6 +3044,77 @@ declare global {
         prototype: HTMLAfAccordionItemElement;
         new (): HTMLAfAccordionItemElement;
     };
+    interface HTMLAfActionItemElementEventMap {
+        "af-action-item-toggle": { status: ActionItemStatus };
+    }
+    /**
+     * Individual action item within an af-action-list container.
+     * Displays a task with status indicator, optional assignee, and due date.
+     * @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>
+     * ```
+     */
+    interface HTMLAfActionItemElement extends Components.AfActionItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAfActionItemElementEventMap>(type: K, listener: (this: HTMLAfActionItemElement, ev: AfActionItemCustomEvent<HTMLAfActionItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLAfActionItemElementEventMap>(type: K, listener: (this: HTMLAfActionItemElement, ev: AfActionItemCustomEvent<HTMLAfActionItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLAfActionItemElement: {
+        prototype: HTMLAfActionItemElement;
+        new (): HTMLAfActionItemElement;
+    };
+    /**
+     * Container for a list of action items or tasks with status tracking.
+     * Renders children `af-action-item` elements with optional progress bar.
+     * @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>
+     * ```
+     */
+    interface HTMLAfActionListElement extends Components.AfActionList, HTMLStencilElement {
+    }
+    var HTMLAfActionListElement: {
+        prototype: HTMLAfActionListElement;
+        new (): HTMLAfActionListElement;
+    };
+    /**
+     * A native SVG area chart component with theme integration.
+     * Supports stacked areas for multi-series data, linear/smooth curves,
+     * and progressive interactivity.
+     * @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>
+     * ```
+     */
+    interface HTMLAfAreaChartElement extends Components.AfAreaChart, HTMLStencilElement {
+    }
+    var HTMLAfAreaChartElement: {
+        prototype: HTMLAfAreaChartElement;
+        new (): HTMLAfAreaChartElement;
+    };
     /**
      * A container component that maintains a fixed aspect ratio for its content.
      * Useful for images, videos, or any content that needs to maintain specific proportions.
@@ -2129,6 +3125,32 @@ declare global {
         prototype: HTMLAfAspectRatioElement;
         new (): HTMLAfAspectRatioElement;
     };
+    /**
+     * A native SVG bar chart component with theme integration.
+     * Supports vertical/horizontal orientation, stacked bars, and progressive
+     * interactivity (none, hover, tooltip).
+     * @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>
+     * ```
+     */
+    interface HTMLAfBarChartElement extends Components.AfBarChart, HTMLStencilElement {
+    }
+    var HTMLAfBarChartElement: {
+        prototype: HTMLAfBarChartElement;
+        new (): HTMLAfBarChartElement;
+    };
     /**
      * Button component that inherits colors from theme context.
      * Colors are determined by the parent theme (af-section, af-card, etc.)
@@ -2146,6 +3168,37 @@ declare global {
         prototype: HTMLAfButtonGroupElement;
         new (): HTMLAfButtonGroupElement;
     };
+    interface HTMLAfCalloutElementEventMap {
+        "af-callout-dismiss": void;
+    }
+    /**
+     * 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)
+     * @example ```html
+     * <af-callout variant="warning">
+     *   Important Notice
+     *   <span slot="description">Please review the following information.</span>
+     * </af-callout>
+     * ```
+     */
+    interface HTMLAfCalloutElement extends Components.AfCallout, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAfCalloutElementEventMap>(type: K, listener: (this: HTMLAfCalloutElement, ev: AfCalloutCustomEvent<HTMLAfCalloutElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLAfCalloutElementEventMap>(type: K, listener: (this: HTMLAfCalloutElement, ev: AfCalloutCustomEvent<HTMLAfCalloutElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLAfCalloutElement: {
+        prototype: HTMLAfCalloutElement;
+        new (): HTMLAfCalloutElement;
+    };
     /**
      * Card atom component - a themed container with consistent styling.
      * Provides theme context to children via CSS custom properties.
@@ -2168,6 +3221,95 @@ declare global {
         prototype: HTMLAfCenterElement;
         new (): HTMLAfCenterElement;
     };
+    interface HTMLAfChartLegendElementEventMap {
+        "legendItemClick": { index: number; item: LegendItem };
+        "legendItemHover": { index: number | null; item: LegendItem | null };
+    }
+    /**
+     * A standalone chart legend component.
+     * Can be used alongside any chart component or custom SVG charts.
+     * Supports interactive highlighting and toggle behavior.
+     * @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>
+     * ```
+     */
+    interface HTMLAfChartLegendElement extends Components.AfChartLegend, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAfChartLegendElementEventMap>(type: K, listener: (this: HTMLAfChartLegendElement, ev: AfChartLegendCustomEvent<HTMLAfChartLegendElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLAfChartLegendElementEventMap>(type: K, listener: (this: HTMLAfChartLegendElement, ev: AfChartLegendCustomEvent<HTMLAfChartLegendElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLAfChartLegendElement: {
+        prototype: HTMLAfChartLegendElement;
+        new (): HTMLAfChartLegendElement;
+    };
+    /**
+     * 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.
+     * @example ```html
+     * <af-chart-section theme="inkwell" caption="Monthly Revenue">
+     *   <canvas id="revenue-chart"></canvas>
+     * </af-chart-section>
+     * ```
+     */
+    interface HTMLAfChartSectionElement extends Components.AfChartSection, HTMLStencilElement {
+    }
+    var HTMLAfChartSectionElement: {
+        prototype: HTMLAfChartSectionElement;
+        new (): HTMLAfChartSectionElement;
+    };
+    /**
+     * 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.
+     * @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>
+     * ```
+     */
+    interface HTMLAfChartTooltipElement extends Components.AfChartTooltip, HTMLStencilElement {
+    }
+    var HTMLAfChartTooltipElement: {
+        prototype: HTMLAfChartTooltipElement;
+        new (): HTMLAfChartTooltipElement;
+    };
     interface HTMLAfCheckboxElementEventMap {
         "afChange": { checked: boolean };
     }
@@ -2506,8 +3648,13 @@ declare global {
         new (): HTMLAfIllustratedCardElement;
     };
     /**
-     * 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.
+     * @example ```html
+     * <af-image src="/photo.jpg" alt="Description" shape="pill">
+     *   <span slot="caption">Photo caption text</span>
+     * </af-image>
+     * ```
      */
     interface HTMLAfImageElement extends Components.AfImage, HTMLStencilElement {
     }
@@ -2582,6 +3729,34 @@ declare global {
         prototype: HTMLAfInputElement;
         new (): HTMLAfInputElement;
     };
+    /**
+     * A native SVG line chart component with theme integration.
+     * Supports linear/smooth curves, data points, area fill, and progressive
+     * interactivity (none, hover, tooltip).
+     * @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>
+     * ```
+     */
+    interface HTMLAfLineChartElement extends Components.AfLineChart, HTMLStencilElement {
+    }
+    var HTMLAfLineChartElement: {
+        prototype: HTMLAfLineChartElement;
+        new (): HTMLAfLineChartElement;
+    };
     /**
      * Affinda logo component
      */
@@ -2591,6 +3766,21 @@ declare global {
         prototype: HTMLAfLogoElement;
         new (): HTMLAfLogoElement;
     };
+    /**
+     * 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>
+     * ```
+     */
+    interface HTMLAfLogoMarkElement extends Components.AfLogoMark, HTMLStencilElement {
+    }
+    var HTMLAfLogoMarkElement: {
+        prototype: HTMLAfLogoMarkElement;
+        new (): HTMLAfLogoMarkElement;
+    };
     /**
      * A rounded container for displaying client logos
      */
@@ -2731,6 +3921,45 @@ declare global {
         prototype: HTMLAfNavbarElement;
         new (): HTMLAfNavbarElement;
     };
+    /**
+     * Individual item within an af-next-steps container.
+     * Renders with an icon or number badge and optional description.
+     * @example ```html
+     * <af-next-step-item icon="check">
+     *   Complete the form
+     *   <span slot="description">Fill in all required fields.</span>
+     * </af-next-step-item>
+     * ```
+     */
+    interface HTMLAfNextStepItemElement extends Components.AfNextStepItem, HTMLStencilElement {
+    }
+    var HTMLAfNextStepItemElement: {
+        prototype: HTMLAfNextStepItemElement;
+        new (): HTMLAfNextStepItemElement;
+    };
+    /**
+     * 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.
+     * @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>
+     * ```
+     */
+    interface HTMLAfNextStepsElement extends Components.AfNextSteps, HTMLStencilElement {
+    }
+    var HTMLAfNextStepsElement: {
+        prototype: HTMLAfNextStepsElement;
+        new (): HTMLAfNextStepsElement;
+    };
     /**
      * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.
      * Perfect for numbered lists, step indicators, or ordered content.
@@ -2817,6 +4046,31 @@ declare global {
         prototype: HTMLAfPaperclipDecorationElement;
         new (): HTMLAfPaperclipDecorationElement;
     };
+    /**
+     * A native SVG pie chart component with theme integration.
+     * Supports progressive interactivity and optional labels.
+     * @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>
+     * ```
+     */
+    interface HTMLAfPieChartElement extends Components.AfPieChart, HTMLStencilElement {
+    }
+    var HTMLAfPieChartElement: {
+        prototype: HTMLAfPieChartElement;
+        new (): HTMLAfPieChartElement;
+    };
     /**
      * Progress Line atom component for displaying scroll or completion progress.
      * Shows a horizontal bar with a filled portion indicating progress.
@@ -2828,6 +4082,47 @@ declare global {
         prototype: HTMLAfProgressLineElement;
         new (): HTMLAfProgressLineElement;
     };
+    /**
+     * 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>
+     * ```
+     */
+    interface HTMLAfProposalFooterElement extends Components.AfProposalFooter, HTMLStencilElement {
+    }
+    var HTMLAfProposalFooterElement: {
+        prototype: HTMLAfProposalFooterElement;
+        new (): HTMLAfProposalFooterElement;
+    };
+    /**
+     * 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>
+     * ```
+     */
+    interface HTMLAfProposalHeaderElement extends Components.AfProposalHeader, HTMLStencilElement {
+    }
+    var HTMLAfProposalHeaderElement: {
+        prototype: HTMLAfProposalHeaderElement;
+        new (): HTMLAfProposalHeaderElement;
+    };
     interface HTMLAfRadioElementEventMap {
         "afChange": { checked: boolean; value?: string; name?: string };
     }
@@ -3047,6 +4342,34 @@ declare global {
         prototype: HTMLAfTabBarElement;
         new (): HTMLAfTabBarElement;
     };
+    /**
+     * A styled table wrapper that applies design system tokens to native table elements.
+     * Uses descendant selectors to style `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`.
+     * @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>
+     * ```
+     */
+    interface HTMLAfTableElement extends Components.AfTable, HTMLStencilElement {
+    }
+    var HTMLAfTableElement: {
+        prototype: HTMLAfTableElement;
+        new (): HTMLAfTableElement;
+    };
     /**
      * Tag displays a label in a styled container.
      * Perfect for categorization, topics, or metadata display.
@@ -3180,6 +4503,45 @@ declare global {
         prototype: HTMLAfThemeOverrideElement;
         new (): HTMLAfThemeOverrideElement;
     };
+    /**
+     * Horizontal Gantt-style timeline for displaying project phases and milestones.
+     * Items are positioned based on their date ranges relative to the timeline bounds.
+     * @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>
+     * ```
+     */
+    interface HTMLAfTimelineElement extends Components.AfTimeline, HTMLStencilElement {
+    }
+    var HTMLAfTimelineElement: {
+        prototype: HTMLAfTimelineElement;
+        new (): HTMLAfTimelineElement;
+    };
+    /**
+     * Individual item within an af-timeline container.
+     * Renders as a horizontal bar in Gantt view or a list item on mobile.
+     * @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>
+     * ```
+     */
+    interface HTMLAfTimelineItemElement extends Components.AfTimelineItem, HTMLStencilElement {
+    }
+    var HTMLAfTimelineItemElement: {
+        prototype: HTMLAfTimelineItemElement;
+        new (): HTMLAfTimelineItemElement;
+    };
     /**
      * Marketing-style composition of heading + description + buttons with
      * consistent spacing and alignment driven by the `headingSize` prop.
@@ -3257,11 +4619,19 @@ declare global {
     interface HTMLElementTagNameMap {
         "af-accordion": HTMLAfAccordionElement;
         "af-accordion-item": HTMLAfAccordionItemElement;
+        "af-action-item": HTMLAfActionItemElement;
+        "af-action-list": HTMLAfActionListElement;
+        "af-area-chart": HTMLAfAreaChartElement;
         "af-aspect-ratio": HTMLAfAspectRatioElement;
+        "af-bar-chart": HTMLAfBarChartElement;
         "af-button": HTMLAfButtonElement;
         "af-button-group": HTMLAfButtonGroupElement;
+        "af-callout": HTMLAfCalloutElement;
         "af-card": HTMLAfCardElement;
         "af-center": HTMLAfCenterElement;
+        "af-chart-legend": HTMLAfChartLegendElement;
+        "af-chart-section": HTMLAfChartSectionElement;
+        "af-chart-tooltip": HTMLAfChartTooltipElement;
         "af-checkbox": HTMLAfCheckboxElement;
         "af-client-carousel": HTMLAfClientCarouselElement;
         "af-color-swatch": HTMLAfColorSwatchElement;
@@ -3288,7 +4658,9 @@ declare global {
         "af-in-page-banner": HTMLAfInPageBannerElement;
         "af-inline": HTMLAfInlineElement;
         "af-input": HTMLAfInputElement;
+        "af-line-chart": HTMLAfLineChartElement;
         "af-logo": HTMLAfLogoElement;
+        "af-logo-mark": HTMLAfLogoMarkElement;
         "af-logo-well": HTMLAfLogoWellElement;
         "af-nav-accordion": HTMLAfNavAccordionElement;
         "af-nav-accordion-item": HTMLAfNavAccordionItemElement;
@@ -3297,11 +4669,16 @@ declare global {
         "af-nav-menu": HTMLAfNavMenuElement;
         "af-nav-menu-nest": HTMLAfNavMenuNestElement;
         "af-navbar": HTMLAfNavbarElement;
+        "af-next-step-item": HTMLAfNextStepItemElement;
+        "af-next-steps": HTMLAfNextStepsElement;
         "af-number-badge": HTMLAfNumberBadgeElement;
         "af-numbered-stepper": HTMLAfNumberedStepperElement;
         "af-numbered-stepper-item": HTMLAfNumberedStepperItemElement;
         "af-paperclip-decoration": HTMLAfPaperclipDecorationElement;
+        "af-pie-chart": HTMLAfPieChartElement;
         "af-progress-line": HTMLAfProgressLineElement;
+        "af-proposal-footer": HTMLAfProposalFooterElement;
+        "af-proposal-header": HTMLAfProposalHeaderElement;
         "af-radio": HTMLAfRadioElement;
         "af-section": HTMLAfSectionElement;
         "af-show": HTMLAfShowElement;
@@ -3316,6 +4693,7 @@ declare global {
         "af-switch": HTMLAfSwitchElement;
         "af-tab": HTMLAfTabElement;
         "af-tab-bar": HTMLAfTabBarElement;
+        "af-table": HTMLAfTableElement;
         "af-tag": HTMLAfTagElement;
         "af-testimonial": HTMLAfTestimonialElement;
         "af-testimonial-carousel": HTMLAfTestimonialCarouselElement;
@@ -3325,12 +4703,16 @@ declare global {
         "af-text-image-nest": HTMLAfTextImageNestElement;
         "af-textarea": HTMLAfTextareaElement;
         "af-theme-override": HTMLAfThemeOverrideElement;
+        "af-timeline": HTMLAfTimelineElement;
+        "af-timeline-item": HTMLAfTimelineItemElement;
         "af-typography-lockup": HTMLAfTypographyLockupElement;
         "af-video-container": HTMLAfVideoContainerElement;
         "af-visually-hidden": HTMLAfVisuallyHiddenElement;
     }
 }
 declare namespace LocalJSX {
+    type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never };
+
     /**
      * Accordion container that manages multiple accordion items.
      * Controls which items are open based on mode (independent or exclusive).
@@ -3379,45 +4761,280 @@ declare namespace LocalJSX {
         "open"?: boolean;
     }
     /**
-     * A container component that maintains a fixed aspect ratio for its content.
-     * Useful for images, videos, or any content that needs to maintain specific proportions.
+     * Individual action item within an af-action-list container.
+     * Displays a task with status indicator, optional assignee, and due date.
+     * @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>
+     * ```
      */
-    interface AfAspectRatio {
+    interface AfActionItem {
         /**
-          * The aspect ratio to maintain. Can be: - A predefined ratio: '1:1', '16:9', '4:3', 'golden-portrait', 'golden-landscape', 'a4-portrait', 'a4-landscape', 'letter-portrait', 'letter-landscape', etc. - A custom ratio in format 'width / height': '16 / 9', '4 / 3', '1.618 / 1', etc.
-          * @example <af-aspect-ratio ratio="16:9">Content</af-aspect-ratio> <af-aspect-ratio ratio="1.618 / 1">Content</af-aspect-ratio>
-          * @default '1:1'
+          * Optional assignee name.
          */
-        "ratio"?: string;
-    }
-    /**
-     * Button component that inherits colors from theme context.
-     * Colors are determined by the parent theme (af-section, af-card, etc.)
-     * via CSS custom properties.
-     */
-    interface AfButton {
+        "assignee"?: string;
         /**
-          * Whether the button is disabled
-          * @default false
+          * Optional due date display text.
          */
-        "disabled"?: boolean;
+        "dueDate"?: string;
         /**
-          * Optional href to render as a link instead of a button
+          * Whether clicking toggles the status (cycles: pending -> in-progress -> done).
+          * @default false
          */
-        "href"?: string;
+        "interactive"?: boolean;
         /**
-          * The size of the button. - `default` - Standard size for primary CTAs (12/24px padding) - `thin` - Compact inline/secondary size (8/16px padding)
-          * @default 'default'
+          * Emitted when an interactive item is clicked and status changes.
          */
-        "size"?: 'default' | 'thin';
+        "onAf-action-item-toggle"?: (event: AfActionItemCustomEvent<{ status: ActionItemStatus }>) => void;
         /**
-          * Button type (when not using href)
-          * @default 'button'
+          * Current status of the action item.
+          * @default 'pending'
          */
-        "type"?: 'button' | 'submit' | 'reset';
-        /**
-          * The visual variant of the button. - `primary` - Main CTA with filled background (use sparingly, 1-2 per view) - `secondary` - Supporting action with outlined style - `ghost` - Link-style with themed underline on the label; commonly paired   with a right-pointing icon. Matches Webflow's "button ghost" variant.
-          * @default 'primary'
+        "status"?: ActionItemStatus;
+    }
+    /**
+     * Container for a list of action items or tasks with status tracking.
+     * Renders children `af-action-item` elements with optional progress bar.
+     * @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>
+     * ```
+     */
+    interface AfActionList {
+        /**
+          * Show a progress bar indicating completion percentage.
+          * @default false
+         */
+        "showProgress"?: boolean;
+    }
+    /**
+     * A native SVG area chart component with theme integration.
+     * Supports stacked areas for multi-series data, linear/smooth curves,
+     * and progressive interactivity.
+     * @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>
+     * ```
+     */
+    interface AfAreaChart {
+        /**
+          * Enable CSS entry animations.
+          * @default false
+         */
+        "animated"?: boolean;
+        /**
+          * Aspect ratio as width/height.
+          * @default 16 / 9
+         */
+        "aspectRatio"?: number;
+        /**
+          * Custom accessible label.
+         */
+        "chartLabel"?: string;
+        /**
+          * Curve interpolation.
+          * @default 'smooth'
+         */
+        "curve"?: CurveType;
+        /**
+          * Chart data as JSON string.
+          * @default '[]'
+         */
+        "data"?: string;
+        /**
+          * Interactivity level.
+          * @default 'none'
+         */
+        "interactive"?: InteractiveMode;
+        /**
+          * Area fill opacity (0-1).
+          * @default 0.6
+         */
+        "opacity"?: number;
+        /**
+          * Show axis labels.
+          * @default true
+         */
+        "showAxis"?: boolean;
+        /**
+          * Show grid lines.
+          * @default true
+         */
+        "showGrid"?: boolean;
+        /**
+          * Show legend below chart.
+          * @default false
+         */
+        "showLegend"?: boolean;
+        /**
+          * Show outline stroke on areas.
+          * @default true
+         */
+        "showStroke"?: boolean;
+        /**
+          * Stack multiple series on top of each other.
+          * @default false
+         */
+        "stacked"?: boolean;
+        /**
+          * Stroke width for area outlines.
+          * @default 2
+         */
+        "strokeWidth"?: number;
+        /**
+          * Theme for colors.
+          * @default 'white'
+         */
+        "theme"?: Theme;
+        /**
+          * Chart width (SVG viewBox).
+          * @default 400
+         */
+        "width"?: number;
+    }
+    /**
+     * A container component that maintains a fixed aspect ratio for its content.
+     * Useful for images, videos, or any content that needs to maintain specific proportions.
+     */
+    interface AfAspectRatio {
+        /**
+          * The aspect ratio to maintain. Can be: - A predefined ratio: '1:1', '16:9', '4:3', 'golden-portrait', 'golden-landscape', 'a4-portrait', 'a4-landscape', 'letter-portrait', 'letter-landscape', etc. - A custom ratio in format 'width / height': '16 / 9', '4 / 3', '1.618 / 1', etc.
+          * @example <af-aspect-ratio ratio="16:9">Content</af-aspect-ratio> <af-aspect-ratio ratio="1.618 / 1">Content</af-aspect-ratio>
+          * @default '1:1'
+         */
+        "ratio"?: string;
+    }
+    /**
+     * A native SVG bar chart component with theme integration.
+     * Supports vertical/horizontal orientation, stacked bars, and progressive
+     * interactivity (none, hover, tooltip).
+     * @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>
+     * ```
+     */
+    interface AfBarChart {
+        /**
+          * Enable CSS entry animations.
+          * @default false
+         */
+        "animated"?: boolean;
+        /**
+          * Aspect ratio as width/height (e.g., 16/9 = 1.78).
+          * @default 16 / 9
+         */
+        "aspectRatio"?: number;
+        /**
+          * Corner radius for bars.
+          * @default 4
+         */
+        "barRadius"?: number;
+        /**
+          * Custom accessible label. Auto-generated if not provided.
+         */
+        "chartLabel"?: string;
+        /**
+          * Chart data as JSON string. Single series: `[{"label":"Jan","value":100}, ...]` Multi-series: `{"labels":["Jan","Feb"],"series":[{"name":"A","values":[100,200]}]}`
+          * @default '[]'
+         */
+        "data"?: string;
+        /**
+          * Interactivity level. - `none`: Static SVG, optimal for SSR - `hover`: CSS hover states with native tooltips - `tooltip`: JS-powered rich tooltips
+          * @default 'none'
+         */
+        "interactive"?: InteractiveMode;
+        /**
+          * Bar orientation.
+          * @default 'vertical'
+         */
+        "orientation"?: Orientation;
+        /**
+          * Show axis labels.
+          * @default true
+         */
+        "showAxis"?: boolean;
+        /**
+          * Show grid lines.
+          * @default true
+         */
+        "showGrid"?: boolean;
+        /**
+          * Show legend below chart.
+          * @default false
+         */
+        "showLegend"?: boolean;
+        /**
+          * Stack multiple series on top of each other.
+          * @default false
+         */
+        "stacked"?: boolean;
+        /**
+          * Theme for colors. Inherits from parent af-chart-section if nested.
+          * @default 'white'
+         */
+        "theme"?: Theme;
+        /**
+          * Chart width (SVG viewBox). Height is calculated from aspect ratio.
+          * @default 400
+         */
+        "width"?: number;
+    }
+    /**
+     * Button component that inherits colors from theme context.
+     * Colors are determined by the parent theme (af-section, af-card, etc.)
+     * via CSS custom properties.
+     */
+    interface AfButton {
+        /**
+          * Whether the button is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Optional href to render as a link instead of a button
+         */
+        "href"?: string;
+        /**
+          * The size of the button. - `default` - Standard size for primary CTAs (12/24px padding) - `thin` - Compact inline/secondary size (8/16px padding)
+          * @default 'default'
+         */
+        "size"?: 'default' | 'thin';
+        /**
+          * Button type (when not using href)
+          * @default 'button'
+         */
+        "type"?: 'button' | 'submit' | 'reset';
+        /**
+          * The visual variant of the button. - `primary` - Main CTA with filled background (use sparingly, 1-2 per view) - `secondary` - Supporting action with outlined style - `ghost` - Link-style with themed underline on the label; commonly paired   with a right-pointing icon. Matches Webflow's "button ghost" variant.
+          * @default 'primary'
          */
         "variant"?: 'primary' | 'secondary' | 'ghost';
     }
@@ -3433,6 +5050,41 @@ declare namespace LocalJSX {
          */
         "gap"?: string;
     }
+    /**
+     * 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)
+     * @example ```html
+     * <af-callout variant="warning">
+     *   Important Notice
+     *   <span slot="description">Please review the following information.</span>
+     * </af-callout>
+     * ```
+     */
+    interface AfCallout {
+        /**
+          * Whether the callout can be dismissed by the user.
+          * @default false
+         */
+        "dismissible"?: boolean;
+        /**
+          * Icon to display. Set to 'auto' to pick based on variant, or 'none' to hide.
+          * @default 'auto'
+         */
+        "icon"?: IconName | 'auto' | 'none';
+        /**
+          * Emitted when the dismiss button is clicked.
+         */
+        "onAf-callout-dismiss"?: (event: AfCalloutCustomEvent<void>) => void;
+        /**
+          * Visual variant of the callout. - Semantic: `info`, `warning`, `success`, `error` (status colors) - Themed: `inkwell`, `mist-green`, `soft-clay`, `ice` (brand colors)
+          * @default 'info'
+         */
+        "variant"?: CalloutVariant;
+    }
     /**
      * Card atom component - a themed container with consistent styling.
      * Provides theme context to children via CSS custom properties.
@@ -3476,6 +5128,143 @@ declare namespace LocalJSX {
          */
         "minHeight"?: string;
     }
+    /**
+     * A standalone chart legend component.
+     * Can be used alongside any chart component or custom SVG charts.
+     * Supports interactive highlighting and toggle behavior.
+     * @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>
+     * ```
+     */
+    interface AfChartLegend {
+        /**
+          * Alignment.
+          * @default 'center'
+         */
+        "align"?: 'start' | 'center' | 'end';
+        /**
+          * Layout direction.
+          * @default 'horizontal'
+         */
+        "direction"?: 'horizontal' | 'vertical';
+        /**
+          * Enable interactive hover/click behavior.
+          * @default false
+         */
+        "interactive"?: boolean;
+        /**
+          * Legend items as JSON string.
+          * @default '[]'
+         */
+        "items"?: string;
+        /**
+          * Emitted when a legend item is clicked (interactive mode).
+         */
+        "onLegendItemClick"?: (event: AfChartLegendCustomEvent<{ index: number; item: LegendItem }>) => void;
+        /**
+          * Emitted when a legend item is hovered (interactive mode).
+         */
+        "onLegendItemHover"?: (event: AfChartLegendCustomEvent<{ index: number | null; item: LegendItem | null }>) => void;
+        /**
+          * Swatch shape.
+          * @default 'square'
+         */
+        "swatchShape"?: 'square' | 'circle' | 'line';
+        /**
+          * Theme for colors.
+          * @default 'white'
+         */
+        "theme"?: Theme;
+    }
+    /**
+     * 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.
+     * @example ```html
+     * <af-chart-section theme="inkwell" caption="Monthly Revenue">
+     *   <canvas id="revenue-chart"></canvas>
+     * </af-chart-section>
+     * ```
+     */
+    interface AfChartSection {
+        /**
+          * Aspect ratio for the chart container (CSS aspect-ratio syntax).
+          * @default '16/9'
+         */
+        "aspectRatio"?: string;
+        /**
+          * Optional caption text displayed below the chart.
+         */
+        "caption"?: string;
+        /**
+          * Vertical padding variant.
+          * @default 'default'
+         */
+        "padding"?: Padding;
+        /**
+          * Theme for the section background and chart color tokens.
+          * @default 'white'
+         */
+        "theme"?: Theme;
+    }
+    /**
+     * 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.
+     * @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>
+     * ```
+     */
+    interface AfChartTooltip {
+        /**
+          * Offset from anchor point in pixels.
+          * @default 8
+         */
+        "offset"?: number;
+        /**
+          * Tooltip placement relative to the anchor point.
+          * @default 'top'
+         */
+        "placement"?: 'top' | 'bottom' | 'left' | 'right';
+        /**
+          * Theme for colors.
+          * @default 'white'
+         */
+        "theme"?: Theme;
+    }
     /**
      * Checkbox component for selecting multiple options.
      * Supports checked, unchecked, and indeterminate states.
@@ -3625,6 +5414,11 @@ declare namespace LocalJSX {
           * @default 6000
          */
         "cycleInterval"?: number;
+        /**
+          * Optional section description shown below the heading
+          * @default ''
+         */
+        "description"?: string;
         /**
           * Section heading
           * @default 'Give AI agents your paperwork'
@@ -4088,8 +5882,13 @@ declare namespace LocalJSX {
         "theme"?: Theme;
     }
     /**
-     * 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.
+     * @example ```html
+     * <af-image src="/photo.jpg" alt="Description" shape="pill">
+     *   <span slot="caption">Photo caption text</span>
+     * </af-image>
+     * ```
      */
     interface AfImage {
         /**
@@ -4097,10 +5896,15 @@ declare namespace LocalJSX {
          */
         "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.
+          * 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.
+          * @default 'below'
+         */
+        "captionPosition"?: CaptionPosition;
+        /**
+          * 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.
           * @default 'rounded'
          */
-        "shape"?: 'rounded' | 'rounded-left' | 'rounded-right' | 'square';
+        "shape"?: ImageShape;
         /**
           * The image source URL
          */
@@ -4324,38 +6128,157 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     /**
-     * Affinda logo component
-     */
-    interface AfLogo {
-    }
-    /**
-     * A rounded container for displaying client logos
-     */
-    interface AfLogoWell {
-    }
-    /**
-     * Navigation-styled accordion for mobile menu patterns.
-     * A wrapper around af-accordion with navigation-specific styling.
+     * A native SVG line chart component with theme integration.
+     * Supports linear/smooth curves, data points, area fill, and progressive
+     * interactivity (none, hover, tooltip).
+     * @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>
+     * ```
      */
-    interface AfNavAccordion {
+    interface AfLineChart {
         /**
-          * Breakpoint for styling - `desktop`: Desktop-specific styles - `mobile`: Mobile-specific styles (default for nav menus)
-          * @default 'mobile'
+          * Enable CSS entry animations.
+          * @default false
          */
-        "breakpoint"?: 'desktop' | 'mobile';
+        "animated"?: boolean;
         /**
-          * Behavior mode for the accordion. - `independent`: Multiple items can be open simultaneously - `exclusive`: Only one item can be open at a time (typical for mobile nav)
-          * @default 'exclusive'
+          * Aspect ratio as width/height.
+          * @default 16 / 9
          */
-        "mode"?: 'independent' | 'exclusive';
+        "aspectRatio"?: number;
         /**
-          * Emitted when the open state of items changes
+          * Custom accessible label.
          */
-        "onAf-nav-accordion-change"?: (event: AfNavAccordionCustomEvent<{ value: string | string[] | null }>) => void;
+        "chartLabel"?: string;
         /**
-          * Currently open item ID(s)
+          * Line curve interpolation.
+          * @default 'linear'
          */
-        "value"?: string | string[];
+        "curve"?: CurveType;
+        /**
+          * Chart data as JSON string. Single series: `[{"label":"Jan","value":100}, ...]` Multi-series: `{"labels":["Jan","Feb"],"series":[{"name":"A","values":[100,200]}]}`
+          * @default '[]'
+         */
+        "data"?: string;
+        /**
+          * Interactivity level.
+          * @default 'none'
+         */
+        "interactive"?: InteractiveMode;
+        /**
+          * Data point radius.
+          * @default 4
+         */
+        "pointRadius"?: number;
+        /**
+          * Fill area under line.
+          * @default false
+         */
+        "showArea"?: boolean;
+        /**
+          * Show axis labels.
+          * @default true
+         */
+        "showAxis"?: boolean;
+        /**
+          * Show grid lines.
+          * @default true
+         */
+        "showGrid"?: boolean;
+        /**
+          * Show legend below chart.
+          * @default false
+         */
+        "showLegend"?: boolean;
+        /**
+          * Show data point markers.
+          * @default false
+         */
+        "showPoints"?: boolean;
+        /**
+          * Line stroke width.
+          * @default 2
+         */
+        "strokeWidth"?: number;
+        /**
+          * Theme for colors.
+          * @default 'white'
+         */
+        "theme"?: Theme;
+        /**
+          * Chart width (SVG viewBox).
+          * @default 400
+         */
+        "width"?: number;
+    }
+    /**
+     * Affinda logo component
+     */
+    interface AfLogo {
+    }
+    /**
+     * 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>
+     * ```
+     */
+    interface AfLogoMark {
+        /**
+          * SVG height — accepts any CSS length or unitless number (pixels). Defaults to the intrinsic viewBox height.
+          * @default '39'
+         */
+        "height"?: string;
+        /**
+          * SVG width — accepts any CSS length or unitless number (pixels). Defaults to the intrinsic viewBox width.
+          * @default '61'
+         */
+        "width"?: string;
+    }
+    /**
+     * A rounded container for displaying client logos
+     */
+    interface AfLogoWell {
+    }
+    /**
+     * Navigation-styled accordion for mobile menu patterns.
+     * A wrapper around af-accordion with navigation-specific styling.
+     */
+    interface AfNavAccordion {
+        /**
+          * Breakpoint for styling - `desktop`: Desktop-specific styles - `mobile`: Mobile-specific styles (default for nav menus)
+          * @default 'mobile'
+         */
+        "breakpoint"?: 'desktop' | 'mobile';
+        /**
+          * Behavior mode for the accordion. - `independent`: Multiple items can be open simultaneously - `exclusive`: Only one item can be open at a time (typical for mobile nav)
+          * @default 'exclusive'
+         */
+        "mode"?: 'independent' | 'exclusive';
+        /**
+          * Emitted when the open state of items changes
+         */
+        "onAf-nav-accordion-change"?: (event: AfNavAccordionCustomEvent<{ value: string | string[] | null }>) => void;
+        /**
+          * Currently open item ID(s)
+         */
+        "value"?: string | string[];
     }
     /**
      * Navigation accordion item with NavItem-styled trigger.
@@ -4509,7 +6432,7 @@ declare namespace LocalJSX {
         "breakpoint"?: 'desktop' | 'mobile';
         /**
           * Whether to show the heavier border on the last column (before sidebar). Set to `true` when sidebar has content, `false` when no sidebar. When `false`, the last column has no border.
-          * @default true
+          * @default false
          */
         "showSidebarBorder"?: boolean;
         /**
@@ -4552,6 +6475,57 @@ declare namespace LocalJSX {
          */
         "theme"?: Theme;
     }
+    /**
+     * Individual item within an af-next-steps container.
+     * Renders with an icon or number badge and optional description.
+     * @example ```html
+     * <af-next-step-item icon="check">
+     *   Complete the form
+     *   <span slot="description">Fill in all required fields.</span>
+     * </af-next-step-item>
+     * ```
+     */
+    interface AfNextStepItem {
+        /**
+          * Icon to display in the badge. Ignored when parent has `numbered` set.
+          * @default 'arrow-right'
+         */
+        "icon"?: IconName;
+        /**
+          * Step number. Auto-assigned by parent `af-next-steps` when `numbered`.
+          * @default 0
+         */
+        "index"?: number;
+        /**
+          * Whether to show number instead of icon. Set by parent `af-next-steps`.
+          * @default false
+         */
+        "numbered"?: boolean;
+    }
+    /**
+     * 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.
+     * @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>
+     * ```
+     */
+    interface AfNextSteps {
+        /**
+          * Show step numbers instead of icons.
+          * @default false
+         */
+        "numbered"?: boolean;
+    }
     /**
      * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.
      * Perfect for numbered lists, step indicators, or ordered content.
@@ -4667,6 +6641,71 @@ declare namespace LocalJSX {
          */
         "width"?: string;
     }
+    /**
+     * A native SVG pie chart component with theme integration.
+     * Supports progressive interactivity and optional labels.
+     * @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>
+     * ```
+     */
+    interface AfPieChart {
+        /**
+          * Enable CSS entry animations.
+          * @default false
+         */
+        "animated"?: boolean;
+        /**
+          * Custom accessible label.
+         */
+        "chartLabel"?: string;
+        /**
+          * Chart data as JSON string. Format: `[{"label":"Category","value":100}, ...]`
+          * @default '[]'
+         */
+        "data"?: string;
+        /**
+          * Interactivity level.
+          * @default 'none'
+         */
+        "interactive"?: InteractiveMode;
+        /**
+          * Show percentage labels on segments.
+          * @default false
+         */
+        "showLabels"?: boolean;
+        /**
+          * Show legend beside/below chart.
+          * @default true
+         */
+        "showLegend"?: boolean;
+        /**
+          * Chart size (width and height, square).
+          * @default 180
+         */
+        "size"?: number;
+        /**
+          * Start angle in degrees (0 = 3 o'clock, -90 = 12 o'clock).
+          * @default -90
+         */
+        "startAngle"?: number;
+        /**
+          * Theme for colors.
+          * @default 'white'
+         */
+        "theme"?: Theme;
+    }
     /**
      * Progress Line atom component for displaying scroll or completion progress.
      * Shows a horizontal bar with a filled portion indicating progress.
@@ -4684,6 +6723,84 @@ declare namespace LocalJSX {
          */
         "progress"?: number;
     }
+    /**
+     * 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>
+     * ```
+     */
+    interface AfProposalFooter {
+        /**
+          * Client name displayed in the footer text.
+          * @default ''
+         */
+        "clientName"?: string;
+        /**
+          * Whether to show "Confidential" suffix.
+          * @default true
+         */
+        "confidential"?: boolean;
+        /**
+          * Date string (e.g. "May 2026").
+          * @default ''
+         */
+        "date"?: string;
+    }
+    /**
+     * 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>
+     * ```
+     */
+    interface AfProposalHeader {
+        /**
+          * Client name displayed in the title as "{clientName} × Affinda".
+          * @default ''
+         */
+        "clientName"?: string;
+        /**
+          * Date string (e.g. "May 2026").
+          * @default ''
+         */
+        "date"?: string;
+        /**
+          * Author attribution (defaults to Affinda Value Creation team).
+          * @default 'Affinda, Value Creation & AI Solutions'
+         */
+        "preparedBy"?: string;
+        /**
+          * Who the proposal is prepared for (e.g. "Land Services SA executive team").
+          * @default ''
+         */
+        "preparedFor"?: string;
+        /**
+          * Supporting description or tagline below the title.
+          * @default ''
+         */
+        "subtitle"?: string;
+        /**
+          * Team or division name shown beside the logo (e.g. "Value Creation").
+          * @default 'Value Creation'
+         */
+        "team"?: string;
+    }
     /**
      * Radio component for selecting a single option from a group.
      * Radios with the same `name` prop are mutually exclusive.
@@ -4860,6 +6977,11 @@ declare namespace LocalJSX {
      * `af-heading` and `af-text` already consume — no theme prop needed here.
      */
     interface AfStat {
+        /**
+          * Whether to show the left accent border.
+          * @default false
+         */
+        "accentBorder"?: boolean;
         /**
           * Description / caption rendered beneath the value.
          */
@@ -5021,6 +7143,54 @@ declare namespace LocalJSX {
          */
         "shape"?: TabBarShape;
     }
+    /**
+     * A styled table wrapper that applies design system tokens to native table elements.
+     * Uses descendant selectors to style `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`.
+     * @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>
+     * ```
+     */
+    interface AfTable {
+        /**
+          * Show cell borders.
+          * @default true
+         */
+        "bordered"?: boolean;
+        /**
+          * Use reduced padding for dense data tables.
+          * @default false
+         */
+        "compact"?: boolean;
+        /**
+          * Maximum height of the table (enables vertical scrolling). Can be any valid CSS value (e.g., "400px", "50vh").
+         */
+        "maxHeight"?: string;
+        /**
+          * Make the table header sticky when scrolling.
+          * @default false
+         */
+        "stickyHeader"?: boolean;
+        /**
+          * Apply alternating row backgrounds for better readability.
+          * @default false
+         */
+        "striped"?: boolean;
+    }
     /**
      * Tag displays a label in a styled container.
      * Perfect for categorization, topics, or metadata display.
@@ -5058,6 +7228,14 @@ declare namespace LocalJSX {
           * Background image URL for the testimonial card
          */
         "backgroundImage"?: string;
+        /**
+          * Intrinsic background image height in pixels.
+         */
+        "backgroundImageHeight"?: number;
+        /**
+          * Intrinsic background image width in pixels.
+         */
+        "backgroundImageWidth"?: number;
         /**
           * Whether the next button is enabled
           * @default false
@@ -5072,6 +7250,14 @@ declare namespace LocalJSX {
           * Company logo URL
          */
         "logoImage"?: string;
+        /**
+          * Intrinsic logo image height in pixels.
+         */
+        "logoImageHeight"?: number;
+        /**
+          * Intrinsic logo image width in pixels.
+         */
+        "logoImageWidth"?: number;
         /**
           * Emitted when the next button is clicked
          */
@@ -5289,6 +7475,100 @@ declare namespace LocalJSX {
          */
         "theme"?: Theme;
     }
+    /**
+     * Horizontal Gantt-style timeline for displaying project phases and milestones.
+     * Items are positioned based on their date ranges relative to the timeline bounds.
+     * @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>
+     * ```
+     */
+    interface AfTimeline {
+        /**
+          * Timeline end date (ISO format YYYY-MM-DD or label).
+         */
+        "endDate": string;
+        /**
+          * Display time axis labels at top.
+          * @default true
+         */
+        "showAxis"?: boolean;
+        /**
+          * Highlight current date with a marker.
+          * @default true
+         */
+        "showToday"?: boolean;
+        /**
+          * Timeline start date (ISO format YYYY-MM-DD or label).
+         */
+        "startDate": string;
+        /**
+          * Highlight a specific target/goal date.
+         */
+        "targetDate"?: string;
+        /**
+          * Time axis granularity.
+          * @default 'month'
+         */
+        "unit"?: TimelineUnit;
+    }
+    /**
+     * Individual item within an af-timeline container.
+     * Renders as a horizontal bar in Gantt view or a list item on mobile.
+     * @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>
+     * ```
+     */
+    interface AfTimelineItem {
+        /**
+          * Internal: start position percentage (set by parent).
+          * @default 0
+         */
+        "_startPosition"?: number;
+        /**
+          * Internal: width percentage (set by parent).
+          * @default 10
+         */
+        "_width"?: number;
+        /**
+          * Item end date (ISO format YYYY-MM-DD). Omit for milestone marker.
+         */
+        "endDate"?: string;
+        /**
+          * Display label for the item.
+         */
+        "label"?: string;
+        /**
+          * 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.
+          * @default true
+         */
+        "showTooltip"?: boolean;
+        /**
+          * Item start date (ISO format YYYY-MM-DD).
+         */
+        "startDate": string;
+        /**
+          * Visual status of the item.
+          * @default 'planned'
+         */
+        "status"?: TimelineItemStatus;
+    }
     /**
      * Marketing-style composition of heading + description + buttons with
      * consistent spacing and alignment driven by the `headingSize` prop.
@@ -5410,125 +7690,841 @@ declare namespace LocalJSX {
          */
         "focusable"?: boolean;
     }
-    interface IntrinsicElements {
-        "af-accordion": AfAccordion;
-        "af-accordion-item": AfAccordionItem;
-        "af-aspect-ratio": AfAspectRatio;
-        "af-button": AfButton;
-        "af-button-group": AfButtonGroup;
-        "af-card": AfCard;
-        "af-center": AfCenter;
-        "af-checkbox": AfCheckbox;
-        "af-client-carousel": AfClientCarousel;
-        "af-color-swatch": AfColorSwatch;
-        "af-contact-item": AfContactItem;
-        "af-container": AfContainer;
-        "af-divider": AfDivider;
-        "af-feature-accordion": AfFeatureAccordion;
-        "af-feature-card": AfFeatureCard;
-        "af-feature-grid": AfFeatureGrid;
-        "af-fieldset": AfFieldset;
-        "af-footer": AfFooter;
-        "af-footer-column": AfFooterColumn;
-        "af-footer-link": AfFooterLink;
-        "af-grid": AfGrid;
-        "af-grid-callout": AfGridCallout;
-        "af-heading": AfHeading;
-        "af-hero": AfHero;
-        "af-icon": AfIcon;
-        "af-icon-box": AfIconBox;
-        "af-icon-button": AfIconButton;
-        "af-icon-text": AfIconText;
-        "af-illustrated-card": AfIllustratedCard;
-        "af-image": AfImage;
-        "af-in-page-banner": AfInPageBanner;
-        "af-inline": AfInline;
-        "af-input": AfInput;
-        "af-logo": AfLogo;
-        "af-logo-well": AfLogoWell;
-        "af-nav-accordion": AfNavAccordion;
-        "af-nav-accordion-item": AfNavAccordionItem;
-        "af-nav-card": AfNavCard;
-        "af-nav-item": AfNavItem;
-        "af-nav-menu": AfNavMenu;
-        "af-nav-menu-nest": AfNavMenuNest;
-        "af-navbar": AfNavbar;
-        "af-number-badge": AfNumberBadge;
-        "af-numbered-stepper": AfNumberedStepper;
-        "af-numbered-stepper-item": AfNumberedStepperItem;
-        "af-paperclip-decoration": AfPaperclipDecoration;
-        "af-progress-line": AfProgressLine;
-        "af-radio": AfRadio;
-        "af-section": AfSection;
-        "af-show": AfShow;
-        "af-social-link": AfSocialLink;
-        "af-spacer": AfSpacer;
-        "af-split-section": AfSplitSection;
-        "af-stack": AfStack;
-        "af-stat": AfStat;
-        "af-stats-row": AfStatsRow;
-        "af-stepper": AfStepper;
-        "af-stepper-step": AfStepperStep;
-        "af-switch": AfSwitch;
-        "af-tab": AfTab;
-        "af-tab-bar": AfTabBar;
-        "af-tag": AfTag;
-        "af-testimonial": AfTestimonial;
-        "af-testimonial-carousel": AfTestimonialCarousel;
-        "af-testimonial-stat": AfTestimonialStat;
-        "af-text": AfText;
-        "af-text-image": AfTextImage;
-        "af-text-image-nest": AfTextImageNest;
-        "af-textarea": AfTextarea;
-        "af-theme-override": AfThemeOverride;
-        "af-typography-lockup": AfTypographyLockup;
-        "af-video-container": AfVideoContainer;
-        "af-visually-hidden": AfVisuallyHidden;
+
+    interface AfAccordionAttributes {
+        "mode": 'independent' | 'exclusive';
+        "value": string | string[];
+        "defaultValue": string | string[];
     }
-}
-export { LocalJSX as JSX };
-declare module "@stencil/core" {
-    export namespace JSX {
-        interface IntrinsicElements {
-            /**
-             * Accordion container that manages multiple accordion items.
-             * Controls which items are open based on mode (independent or exclusive).
+    interface AfAccordionItemAttributes {
+        "itemId": string;
+        "open": boolean;
+        "disabled": boolean;
+    }
+    interface AfActionItemAttributes {
+        "status": ActionItemStatus;
+        "assignee": string;
+        "dueDate": string;
+        "interactive": boolean;
+    }
+    interface AfActionListAttributes {
+        "showProgress": boolean;
+    }
+    interface AfAreaChartAttributes {
+        "data": string;
+        "theme": Theme;
+        "stacked": boolean;
+        "curve": CurveType;
+        "opacity": number;
+        "showStroke": boolean;
+        "interactive": InteractiveMode;
+        "animated": boolean;
+        "showLegend": boolean;
+        "showGrid": boolean;
+        "showAxis": boolean;
+        "strokeWidth": number;
+        "chartLabel": string;
+        "width": number;
+        "aspectRatio": number;
+    }
+    interface AfAspectRatioAttributes {
+        "ratio": string;
+    }
+    interface AfBarChartAttributes {
+        "data": string;
+        "theme": Theme;
+        "orientation": Orientation;
+        "stacked": boolean;
+        "interactive": InteractiveMode;
+        "animated": boolean;
+        "showLegend": boolean;
+        "showGrid": boolean;
+        "showAxis": boolean;
+        "barRadius": number;
+        "chartLabel": string;
+        "width": number;
+        "aspectRatio": number;
+    }
+    interface AfButtonAttributes {
+        "variant": 'primary' | 'secondary' | 'ghost';
+        "size": 'default' | 'thin';
+        "disabled": boolean;
+        "type": 'button' | 'submit' | 'reset';
+        "href": string;
+    }
+    interface AfButtonGroupAttributes {
+        "direction": 'horizontal' | 'vertical';
+        "gap": string;
+    }
+    interface AfCalloutAttributes {
+        "variant": CalloutVariant;
+        "icon": IconName | 'auto' | 'none';
+        "dismissible": boolean;
+    }
+    interface AfCardAttributes {
+        "theme": Theme;
+        "stretch": boolean;
+        "interactive": boolean;
+    }
+    interface AfCenterAttributes {
+        "axis": Axis;
+        "inline": boolean;
+        "minHeight": string;
+    }
+    interface AfChartLegendAttributes {
+        "items": string;
+        "theme": Theme;
+        "direction": 'horizontal' | 'vertical';
+        "interactive": boolean;
+        "swatchShape": 'square' | 'circle' | 'line';
+        "align": 'start' | 'center' | 'end';
+    }
+    interface AfChartSectionAttributes {
+        "theme": Theme;
+        "padding": Padding;
+        "aspectRatio": string;
+        "caption": string;
+    }
+    interface AfChartTooltipAttributes {
+        "theme": Theme;
+        "placement": 'top' | 'bottom' | 'left' | 'right';
+        "offset": number;
+    }
+    interface AfCheckboxAttributes {
+        "checked": boolean;
+        "indeterminate": boolean;
+        "disabled": boolean;
+        "name": string;
+        "value": string;
+    }
+    interface AfClientCarouselAttributes {
+        "theme": Theme;
+        "rows": 1 | 2;
+        "mode": Mode;
+    }
+    interface AfColorSwatchAttributes {
+        "color": string;
+        "name": string;
+        "size": 'default' | 'large';
+    }
+    interface AfContactItemAttributes {
+        "label": string;
+        "value": string;
+    }
+    interface AfContainerAttributes {
+        "maxWidth": 'xlarge' | 'large' | 'medium' | 'fluid';
+    }
+    interface AfDividerAttributes {
+        "orientation": Orientation;
+        "spacing": Spacing;
+    }
+    interface AfFeatureAccordionAttributes {
+        "heading": string;
+        "description": string;
+        "items": string;
+        "cycleInterval": number;
+        "autoCycle": boolean;
+    }
+    interface AfFeatureCardAttributes {
+        "theme": Theme;
+        "layout": 'standard' | 'full-bleed';
+        "cardSize": 'default' | 'large' | 'flexible';
+        "headingSize": 1 | 2 | 3 | 4 | 5;
+        "imageSrc": string;
+        "imageAlt": string;
+    }
+    interface AfFeatureGridAttributes {
+        "columns": 1 | 2 | 3 | 4;
+        "mobileLayout": 'list' | 'scroll' | 'grid';
+    }
+    interface AfFieldsetAttributes {
+        "legend": string;
+        "orientation": 'vertical' | 'horizontal';
+        "disabled": boolean;
+    }
+    interface AfFooterAttributes {
+        "copyrightText": string;
+        "statusText": string;
+        "statusUrl": string;
+        "systemsOperational": boolean;
+        "showStatus": boolean;
+    }
+    interface AfFooterColumnAttributes {
+        "heading": string;
+    }
+    interface AfFooterLinkAttributes {
+        "href": string;
+        "external": boolean;
+    }
+    interface AfGridAttributes {
+        "columns": Columns;
+        "columnsLg": Columns;
+        "columnsMd": Columns;
+        "columnsSm": Columns;
+        "gap": Gap;
+        "align": Align;
+    }
+    interface AfGridCalloutAttributes {
+        "imageSrc": string;
+        "imageAlt": string;
+        "imagePosition": 'left' | 'right';
+        "columns": 2 | 3 | 4;
+        "headingSize": 1 | 2 | 3 | 4 | 5;
+    }
+    interface AfHeadingAttributes {
+        "level": 'xl' | '1' | '2' | '3' | '4' | '5';
+        "align": 'inherit' | 'left' | 'center' | 'right';
+    }
+    interface AfHeroAttributes {
+        "variant": HeroVariant;
+        "heading": string;
+        "description": string;
+        "floatNavbar": boolean;
+        "topPad": HeroTopPad;
+        "maxWidth": number;
+        "maskImage": boolean;
+    }
+    interface AfIconAttributes {
+        "name": IconName;
+        "size": number;
+        "label": string;
+    }
+    interface AfIconBoxAttributes {
+        "icon": IconName;
+        "size": 'small' | 'default' | 'large';
+    }
+    interface AfIconButtonAttributes {
+        "variant": 'primary' | 'secondary' | 'tertiary';
+        "size": 'large' | 'medium' | 'small';
+        "disabled": boolean;
+        "href": string;
+        "type": 'button' | 'submit' | 'reset';
+        "ariaLabel": string;
+    }
+    interface AfIconTextAttributes {
+        "icon": IconName;
+        "headingSize": 1 | 2 | 3 | 4 | 5;
+        "orientation": 'vertical' | 'horizontal';
+        "iconSize": 'small' | 'default' | 'large';
+    }
+    interface AfIllustratedCardAttributes {
+        "theme": Theme;
+        "breakpoint": 'desktop' | 'mobile';
+        "cardSize": 'default' | 'large';
+    }
+    interface AfImageAttributes {
+        "src": string;
+        "alt": string;
+        "shape": ImageShape;
+        "captionPosition": CaptionPosition;
+    }
+    interface AfInPageBannerAttributes {
+        "theme": Theme;
+        "heading": string;
+        "description": string;
+        "primaryButtonText": string;
+        "primaryButtonUrl": string;
+        "secondaryButtonText": string;
+        "secondaryButtonUrl": string;
+        "illustrationUrl": string;
+        "showWaveDecoration": boolean;
+    }
+    interface AfInlineAttributes {
+        "gap": Gap;
+        "align": Align;
+        "justify": Justify;
+        "wrap": boolean;
+    }
+    interface AfInputAttributes {
+        "label": string;
+        "description": string;
+        "placeholder": string;
+        "value": string;
+        "type": 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+        "name": string;
+        "disabled": boolean;
+        "required": boolean;
+        "readonly": boolean;
+        "error": string;
+        "showInfoIcon": boolean;
+        "showSearchIcon": boolean;
+        "clearable": boolean;
+        "autocomplete": string;
+        "maxlength": number;
+        "minlength": number;
+        "pattern": string;
+        "multiline": boolean;
+        "rows": number;
+        "resize": 'none' | 'vertical' | 'horizontal' | 'both';
+    }
+    interface AfLineChartAttributes {
+        "data": string;
+        "theme": Theme;
+        "curve": CurveType;
+        "showPoints": boolean;
+        "showArea": boolean;
+        "interactive": InteractiveMode;
+        "animated": boolean;
+        "showLegend": boolean;
+        "showGrid": boolean;
+        "showAxis": boolean;
+        "strokeWidth": number;
+        "pointRadius": number;
+        "chartLabel": string;
+        "width": number;
+        "aspectRatio": number;
+    }
+    interface AfLogoMarkAttributes {
+        "width": string;
+        "height": string;
+    }
+    interface AfNavAccordionAttributes {
+        "mode": 'independent' | 'exclusive';
+        "breakpoint": 'desktop' | 'mobile';
+        "value": string | string[];
+    }
+    interface AfNavAccordionItemAttributes {
+        "itemId": string;
+        "label": string;
+        "open": boolean;
+        "disabled": boolean;
+        "href": string;
+        "breakpoint": 'desktop' | 'mobile';
+    }
+    interface AfNavCardAttributes {
+        "heading": string;
+        "href": string;
+        "imageSrc": string;
+        "imageAlt": string;
+    }
+    interface AfNavItemAttributes {
+        "hierarchy": 'primary' | 'secondary';
+        "variant": '01' | '02';
+        "breakpoint": 'desktop' | 'mobile';
+        "href": string;
+        "active": boolean;
+    }
+    interface AfNavMenuAttributes {
+        "heading": string;
+        "breakpoint": 'desktop' | 'mobile';
+        "showBorder": boolean;
+        "cardStyle": boolean;
+    }
+    interface AfNavMenuNestAttributes {
+        "type": 'solutions' | 'solutions-alt' | 'resources' | 'pricing';
+        "breakpoint": 'desktop' | 'mobile';
+        "showSidebarBorder": boolean;
+    }
+    interface AfNavbarAttributes {
+        "showDefaultLogo": boolean;
+        "theme": Theme;
+        "forceMobile": boolean;
+    }
+    interface AfNextStepItemAttributes {
+        "icon": IconName;
+        "index": number;
+        "numbered": boolean;
+    }
+    interface AfNextStepsAttributes {
+        "numbered": boolean;
+    }
+    interface AfNumberBadgeAttributes {
+        "number": NumberBadgeNumber;
+        "variant": NumberBadgeVariant;
+        "size": number;
+    }
+    interface AfNumberedStepperAttributes {
+        "orientation": 'horizontal' | 'vertical';
+    }
+    interface AfNumberedStepperItemAttributes {
+        "index": number;
+    }
+    interface AfPaperclipDecorationAttributes {
+        "width": string;
+        "height": string;
+        "opacity": number;
+        "fill": string;
+    }
+    interface AfPieChartAttributes {
+        "data": string;
+        "theme": Theme;
+        "startAngle": number;
+        "showLabels": boolean;
+        "showLegend": boolean;
+        "interactive": InteractiveMode;
+        "animated": boolean;
+        "chartLabel": string;
+        "size": number;
+    }
+    interface AfProgressLineAttributes {
+        "progress": number;
+        "orientation": 'horizontal';
+    }
+    interface AfProposalFooterAttributes {
+        "clientName": string;
+        "date": string;
+        "confidential": boolean;
+    }
+    interface AfProposalHeaderAttributes {
+        "team": string;
+        "clientName": string;
+        "subtitle": string;
+        "preparedFor": string;
+        "preparedBy": string;
+        "date": string;
+    }
+    interface AfRadioAttributes {
+        "checked": boolean;
+        "disabled": boolean;
+        "name": string;
+        "value": string;
+    }
+    interface AfSectionAttributes {
+        "padding": Padding;
+        "theme": Theme;
+        "container": boolean;
+    }
+    interface AfShowAttributes {
+        "above": Breakpoint;
+        "below": Breakpoint;
+    }
+    interface AfSocialLinkAttributes {
+        "href": string;
+        "label": string;
+        "icon": 'linkedin' | 'youtube' | 'github' | 'twitter' | 'facebook' | 'custom';
+    }
+    interface AfSpacerAttributes {
+        "size": Size;
+        "flex": boolean;
+        "axis": 'horizontal' | 'vertical' | 'both';
+    }
+    interface AfSplitSectionAttributes {
+        "topTheme": Theme;
+        "bottomTheme": Theme;
+        "padding": Padding;
+        "container": boolean;
+    }
+    interface AfStackAttributes {
+        "direction": Direction;
+        "gap": Gap;
+        "align": Align;
+        "justify": Justify;
+        "wrap": boolean;
+    }
+    interface AfStatAttributes {
+        "value": string;
+        "label": string;
+        "accentBorder": boolean;
+    }
+    interface AfStepperAttributes {
+        "orientation": 'horizontal' | 'vertical';
+    }
+    interface AfStepperStepAttributes {
+        "index": number;
+    }
+    interface AfSwitchAttributes {
+        "active": boolean;
+        "disabled": boolean;
+        "name": string;
+        "value": string;
+    }
+    interface AfTabAttributes {
+        "label": string;
+        "active": boolean;
+        "disabled": boolean;
+        "shape": TabShape;
+        "displayIcon": boolean;
+        "displayNumber": boolean;
+        "value": string;
+    }
+    interface AfTabBarAttributes {
+        "shape": TabBarShape;
+        "breakpoint": TabBarBreakpoint;
+    }
+    interface AfTableAttributes {
+        "striped": boolean;
+        "bordered": boolean;
+        "compact": boolean;
+        "stickyHeader": boolean;
+        "maxHeight": string;
+    }
+    interface AfTagAttributes {
+        "size": TagSize;
+        "variant": TagVariant;
+        "href": string;
+    }
+    interface AfTestimonialAttributes {
+        "backgroundImage": string;
+        "backgroundImageWidth": number;
+        "backgroundImageHeight": number;
+        "logoImage": string;
+        "logoImageWidth": number;
+        "logoImageHeight": number;
+        "quote": string;
+        "attribution": string;
+        "readMoreLink": string;
+        "showNavigation": boolean;
+        "hasPrev": boolean;
+        "hasNext": boolean;
+    }
+    interface AfTestimonialStatAttributes {
+        "value": string;
+        "description": string;
+        "accentBorder": boolean;
+    }
+    interface AfTextAttributes {
+        "variant": 'xlarge' | 'large' | 'medium' | 'small';
+        "align": 'left' | 'center' | 'right';
+        "as": 'p' | 'span' | 'div' | 'label';
+    }
+    interface AfTextImageAttributes {
+        "imagePosition": 'left' | 'right';
+        "imageProportion": '1/2' | '1/3' | '1/4' | '100%';
+        "src": string;
+        "alt": string;
+        "showSecondLockup": boolean;
+    }
+    interface AfTextImageNestAttributes {
+        "layout": 'single' | 'grid-2' | 'grid-3' | 'grid-4' | 'stacked';
+    }
+    interface AfTextareaAttributes {
+        "label": string;
+        "description": string;
+        "placeholder": string;
+        "value": string;
+        "name": string;
+        "disabled": boolean;
+        "required": boolean;
+        "readonly": boolean;
+        "error": string;
+        "showInfoIcon": boolean;
+        "rows": number;
+        "maxlength": number;
+        "minlength": number;
+        "resize": 'none' | 'vertical' | 'horizontal' | 'both';
+    }
+    interface AfThemeOverrideAttributes {
+        "theme": Theme;
+    }
+    interface AfTimelineAttributes {
+        "startDate": string;
+        "endDate": string;
+        "unit": TimelineUnit;
+        "showAxis": boolean;
+        "showToday": boolean;
+        "targetDate": string;
+    }
+    interface AfTimelineItemAttributes {
+        "startDate": string;
+        "endDate": string;
+        "label": string;
+        "status": TimelineItemStatus;
+        "row": number;
+        "showTooltip": boolean;
+        "_startPosition": number;
+        "_width": number;
+    }
+    interface AfTypographyLockupAttributes {
+        "headingSize": string;
+        "breakpoint": 'desktop' | 'mobile';
+        "textAlignment": TextAlign;
+        "headingAlignment": TextAlign;
+        "descriptionAlignment": TextAlign;
+        "buttonLayout": 'horizontal' | 'vertical';
+        "buttonsAlignment": TextAlign;
+        "maxWidth": number;
+        "headingColor": 'primary' | 'secondary';
+        "descriptionColor": 'default' | 'secondary';
+    }
+    interface AfVideoContainerAttributes {
+        "videoThumbnailUrl": string;
+        "videoAlt": string;
+        "videoUrl": string;
+    }
+    interface AfVisuallyHiddenAttributes {
+        "focusable": boolean;
+    }
+
+    interface IntrinsicElements {
+        "af-accordion": Omit<AfAccordion, keyof AfAccordionAttributes> & { [K in keyof AfAccordion & keyof AfAccordionAttributes]?: AfAccordion[K] } & { [K in keyof AfAccordion & keyof AfAccordionAttributes as `attr:${K}`]?: AfAccordionAttributes[K] } & { [K in keyof AfAccordion & keyof AfAccordionAttributes as `prop:${K}`]?: AfAccordion[K] };
+        "af-accordion-item": Omit<AfAccordionItem, keyof AfAccordionItemAttributes> & { [K in keyof AfAccordionItem & keyof AfAccordionItemAttributes]?: AfAccordionItem[K] } & { [K in keyof AfAccordionItem & keyof AfAccordionItemAttributes as `attr:${K}`]?: AfAccordionItemAttributes[K] } & { [K in keyof AfAccordionItem & keyof AfAccordionItemAttributes as `prop:${K}`]?: AfAccordionItem[K] } & OneOf<"itemId", AfAccordionItem["itemId"], AfAccordionItemAttributes["itemId"]>;
+        "af-action-item": Omit<AfActionItem, keyof AfActionItemAttributes> & { [K in keyof AfActionItem & keyof AfActionItemAttributes]?: AfActionItem[K] } & { [K in keyof AfActionItem & keyof AfActionItemAttributes as `attr:${K}`]?: AfActionItemAttributes[K] } & { [K in keyof AfActionItem & keyof AfActionItemAttributes as `prop:${K}`]?: AfActionItem[K] };
+        "af-action-list": Omit<AfActionList, keyof AfActionListAttributes> & { [K in keyof AfActionList & keyof AfActionListAttributes]?: AfActionList[K] } & { [K in keyof AfActionList & keyof AfActionListAttributes as `attr:${K}`]?: AfActionListAttributes[K] } & { [K in keyof AfActionList & keyof AfActionListAttributes as `prop:${K}`]?: AfActionList[K] };
+        "af-area-chart": Omit<AfAreaChart, keyof AfAreaChartAttributes> & { [K in keyof AfAreaChart & keyof AfAreaChartAttributes]?: AfAreaChart[K] } & { [K in keyof AfAreaChart & keyof AfAreaChartAttributes as `attr:${K}`]?: AfAreaChartAttributes[K] } & { [K in keyof AfAreaChart & keyof AfAreaChartAttributes as `prop:${K}`]?: AfAreaChart[K] };
+        "af-aspect-ratio": Omit<AfAspectRatio, keyof AfAspectRatioAttributes> & { [K in keyof AfAspectRatio & keyof AfAspectRatioAttributes]?: AfAspectRatio[K] } & { [K in keyof AfAspectRatio & keyof AfAspectRatioAttributes as `attr:${K}`]?: AfAspectRatioAttributes[K] } & { [K in keyof AfAspectRatio & keyof AfAspectRatioAttributes as `prop:${K}`]?: AfAspectRatio[K] };
+        "af-bar-chart": Omit<AfBarChart, keyof AfBarChartAttributes> & { [K in keyof AfBarChart & keyof AfBarChartAttributes]?: AfBarChart[K] } & { [K in keyof AfBarChart & keyof AfBarChartAttributes as `attr:${K}`]?: AfBarChartAttributes[K] } & { [K in keyof AfBarChart & keyof AfBarChartAttributes as `prop:${K}`]?: AfBarChart[K] };
+        "af-button": Omit<AfButton, keyof AfButtonAttributes> & { [K in keyof AfButton & keyof AfButtonAttributes]?: AfButton[K] } & { [K in keyof AfButton & keyof AfButtonAttributes as `attr:${K}`]?: AfButtonAttributes[K] } & { [K in keyof AfButton & keyof AfButtonAttributes as `prop:${K}`]?: AfButton[K] };
+        "af-button-group": Omit<AfButtonGroup, keyof AfButtonGroupAttributes> & { [K in keyof AfButtonGroup & keyof AfButtonGroupAttributes]?: AfButtonGroup[K] } & { [K in keyof AfButtonGroup & keyof AfButtonGroupAttributes as `attr:${K}`]?: AfButtonGroupAttributes[K] } & { [K in keyof AfButtonGroup & keyof AfButtonGroupAttributes as `prop:${K}`]?: AfButtonGroup[K] };
+        "af-callout": Omit<AfCallout, keyof AfCalloutAttributes> & { [K in keyof AfCallout & keyof AfCalloutAttributes]?: AfCallout[K] } & { [K in keyof AfCallout & keyof AfCalloutAttributes as `attr:${K}`]?: AfCalloutAttributes[K] } & { [K in keyof AfCallout & keyof AfCalloutAttributes as `prop:${K}`]?: AfCallout[K] };
+        "af-card": Omit<AfCard, keyof AfCardAttributes> & { [K in keyof AfCard & keyof AfCardAttributes]?: AfCard[K] } & { [K in keyof AfCard & keyof AfCardAttributes as `attr:${K}`]?: AfCardAttributes[K] } & { [K in keyof AfCard & keyof AfCardAttributes as `prop:${K}`]?: AfCard[K] };
+        "af-center": Omit<AfCenter, keyof AfCenterAttributes> & { [K in keyof AfCenter & keyof AfCenterAttributes]?: AfCenter[K] } & { [K in keyof AfCenter & keyof AfCenterAttributes as `attr:${K}`]?: AfCenterAttributes[K] } & { [K in keyof AfCenter & keyof AfCenterAttributes as `prop:${K}`]?: AfCenter[K] };
+        "af-chart-legend": Omit<AfChartLegend, keyof AfChartLegendAttributes> & { [K in keyof AfChartLegend & keyof AfChartLegendAttributes]?: AfChartLegend[K] } & { [K in keyof AfChartLegend & keyof AfChartLegendAttributes as `attr:${K}`]?: AfChartLegendAttributes[K] } & { [K in keyof AfChartLegend & keyof AfChartLegendAttributes as `prop:${K}`]?: AfChartLegend[K] };
+        "af-chart-section": Omit<AfChartSection, keyof AfChartSectionAttributes> & { [K in keyof AfChartSection & keyof AfChartSectionAttributes]?: AfChartSection[K] } & { [K in keyof AfChartSection & keyof AfChartSectionAttributes as `attr:${K}`]?: AfChartSectionAttributes[K] } & { [K in keyof AfChartSection & keyof AfChartSectionAttributes as `prop:${K}`]?: AfChartSection[K] };
+        "af-chart-tooltip": Omit<AfChartTooltip, keyof AfChartTooltipAttributes> & { [K in keyof AfChartTooltip & keyof AfChartTooltipAttributes]?: AfChartTooltip[K] } & { [K in keyof AfChartTooltip & keyof AfChartTooltipAttributes as `attr:${K}`]?: AfChartTooltipAttributes[K] } & { [K in keyof AfChartTooltip & keyof AfChartTooltipAttributes as `prop:${K}`]?: AfChartTooltip[K] };
+        "af-checkbox": Omit<AfCheckbox, keyof AfCheckboxAttributes> & { [K in keyof AfCheckbox & keyof AfCheckboxAttributes]?: AfCheckbox[K] } & { [K in keyof AfCheckbox & keyof AfCheckboxAttributes as `attr:${K}`]?: AfCheckboxAttributes[K] } & { [K in keyof AfCheckbox & keyof AfCheckboxAttributes as `prop:${K}`]?: AfCheckbox[K] };
+        "af-client-carousel": Omit<AfClientCarousel, keyof AfClientCarouselAttributes> & { [K in keyof AfClientCarousel & keyof AfClientCarouselAttributes]?: AfClientCarousel[K] } & { [K in keyof AfClientCarousel & keyof AfClientCarouselAttributes as `attr:${K}`]?: AfClientCarouselAttributes[K] } & { [K in keyof AfClientCarousel & keyof AfClientCarouselAttributes as `prop:${K}`]?: AfClientCarousel[K] };
+        "af-color-swatch": Omit<AfColorSwatch, keyof AfColorSwatchAttributes> & { [K in keyof AfColorSwatch & keyof AfColorSwatchAttributes]?: AfColorSwatch[K] } & { [K in keyof AfColorSwatch & keyof AfColorSwatchAttributes as `attr:${K}`]?: AfColorSwatchAttributes[K] } & { [K in keyof AfColorSwatch & keyof AfColorSwatchAttributes as `prop:${K}`]?: AfColorSwatch[K] } & OneOf<"color", AfColorSwatch["color"], AfColorSwatchAttributes["color"]> & OneOf<"name", AfColorSwatch["name"], AfColorSwatchAttributes["name"]>;
+        "af-contact-item": Omit<AfContactItem, keyof AfContactItemAttributes> & { [K in keyof AfContactItem & keyof AfContactItemAttributes]?: AfContactItem[K] } & { [K in keyof AfContactItem & keyof AfContactItemAttributes as `attr:${K}`]?: AfContactItemAttributes[K] } & { [K in keyof AfContactItem & keyof AfContactItemAttributes as `prop:${K}`]?: AfContactItem[K] };
+        "af-container": Omit<AfContainer, keyof AfContainerAttributes> & { [K in keyof AfContainer & keyof AfContainerAttributes]?: AfContainer[K] } & { [K in keyof AfContainer & keyof AfContainerAttributes as `attr:${K}`]?: AfContainerAttributes[K] } & { [K in keyof AfContainer & keyof AfContainerAttributes as `prop:${K}`]?: AfContainer[K] };
+        "af-divider": Omit<AfDivider, keyof AfDividerAttributes> & { [K in keyof AfDivider & keyof AfDividerAttributes]?: AfDivider[K] } & { [K in keyof AfDivider & keyof AfDividerAttributes as `attr:${K}`]?: AfDividerAttributes[K] } & { [K in keyof AfDivider & keyof AfDividerAttributes as `prop:${K}`]?: AfDivider[K] };
+        "af-feature-accordion": Omit<AfFeatureAccordion, keyof AfFeatureAccordionAttributes> & { [K in keyof AfFeatureAccordion & keyof AfFeatureAccordionAttributes]?: AfFeatureAccordion[K] } & { [K in keyof AfFeatureAccordion & keyof AfFeatureAccordionAttributes as `attr:${K}`]?: AfFeatureAccordionAttributes[K] } & { [K in keyof AfFeatureAccordion & keyof AfFeatureAccordionAttributes as `prop:${K}`]?: AfFeatureAccordion[K] };
+        "af-feature-card": Omit<AfFeatureCard, keyof AfFeatureCardAttributes> & { [K in keyof AfFeatureCard & keyof AfFeatureCardAttributes]?: AfFeatureCard[K] } & { [K in keyof AfFeatureCard & keyof AfFeatureCardAttributes as `attr:${K}`]?: AfFeatureCardAttributes[K] } & { [K in keyof AfFeatureCard & keyof AfFeatureCardAttributes as `prop:${K}`]?: AfFeatureCard[K] };
+        "af-feature-grid": Omit<AfFeatureGrid, keyof AfFeatureGridAttributes> & { [K in keyof AfFeatureGrid & keyof AfFeatureGridAttributes]?: AfFeatureGrid[K] } & { [K in keyof AfFeatureGrid & keyof AfFeatureGridAttributes as `attr:${K}`]?: AfFeatureGridAttributes[K] } & { [K in keyof AfFeatureGrid & keyof AfFeatureGridAttributes as `prop:${K}`]?: AfFeatureGrid[K] };
+        "af-fieldset": Omit<AfFieldset, keyof AfFieldsetAttributes> & { [K in keyof AfFieldset & keyof AfFieldsetAttributes]?: AfFieldset[K] } & { [K in keyof AfFieldset & keyof AfFieldsetAttributes as `attr:${K}`]?: AfFieldsetAttributes[K] } & { [K in keyof AfFieldset & keyof AfFieldsetAttributes as `prop:${K}`]?: AfFieldset[K] };
+        "af-footer": Omit<AfFooter, keyof AfFooterAttributes> & { [K in keyof AfFooter & keyof AfFooterAttributes]?: AfFooter[K] } & { [K in keyof AfFooter & keyof AfFooterAttributes as `attr:${K}`]?: AfFooterAttributes[K] } & { [K in keyof AfFooter & keyof AfFooterAttributes as `prop:${K}`]?: AfFooter[K] };
+        "af-footer-column": Omit<AfFooterColumn, keyof AfFooterColumnAttributes> & { [K in keyof AfFooterColumn & keyof AfFooterColumnAttributes]?: AfFooterColumn[K] } & { [K in keyof AfFooterColumn & keyof AfFooterColumnAttributes as `attr:${K}`]?: AfFooterColumnAttributes[K] } & { [K in keyof AfFooterColumn & keyof AfFooterColumnAttributes as `prop:${K}`]?: AfFooterColumn[K] };
+        "af-footer-link": Omit<AfFooterLink, keyof AfFooterLinkAttributes> & { [K in keyof AfFooterLink & keyof AfFooterLinkAttributes]?: AfFooterLink[K] } & { [K in keyof AfFooterLink & keyof AfFooterLinkAttributes as `attr:${K}`]?: AfFooterLinkAttributes[K] } & { [K in keyof AfFooterLink & keyof AfFooterLinkAttributes as `prop:${K}`]?: AfFooterLink[K] };
+        "af-grid": Omit<AfGrid, keyof AfGridAttributes> & { [K in keyof AfGrid & keyof AfGridAttributes]?: AfGrid[K] } & { [K in keyof AfGrid & keyof AfGridAttributes as `attr:${K}`]?: AfGridAttributes[K] } & { [K in keyof AfGrid & keyof AfGridAttributes as `prop:${K}`]?: AfGrid[K] };
+        "af-grid-callout": Omit<AfGridCallout, keyof AfGridCalloutAttributes> & { [K in keyof AfGridCallout & keyof AfGridCalloutAttributes]?: AfGridCallout[K] } & { [K in keyof AfGridCallout & keyof AfGridCalloutAttributes as `attr:${K}`]?: AfGridCalloutAttributes[K] } & { [K in keyof AfGridCallout & keyof AfGridCalloutAttributes as `prop:${K}`]?: AfGridCallout[K] };
+        "af-heading": Omit<AfHeading, keyof AfHeadingAttributes> & { [K in keyof AfHeading & keyof AfHeadingAttributes]?: AfHeading[K] } & { [K in keyof AfHeading & keyof AfHeadingAttributes as `attr:${K}`]?: AfHeadingAttributes[K] } & { [K in keyof AfHeading & keyof AfHeadingAttributes as `prop:${K}`]?: AfHeading[K] };
+        "af-hero": Omit<AfHero, keyof AfHeroAttributes> & { [K in keyof AfHero & keyof AfHeroAttributes]?: AfHero[K] } & { [K in keyof AfHero & keyof AfHeroAttributes as `attr:${K}`]?: AfHeroAttributes[K] } & { [K in keyof AfHero & keyof AfHeroAttributes as `prop:${K}`]?: AfHero[K] };
+        "af-icon": Omit<AfIcon, keyof AfIconAttributes> & { [K in keyof AfIcon & keyof AfIconAttributes]?: AfIcon[K] } & { [K in keyof AfIcon & keyof AfIconAttributes as `attr:${K}`]?: AfIconAttributes[K] } & { [K in keyof AfIcon & keyof AfIconAttributes as `prop:${K}`]?: AfIcon[K] } & OneOf<"name", AfIcon["name"], AfIconAttributes["name"]>;
+        "af-icon-box": Omit<AfIconBox, keyof AfIconBoxAttributes> & { [K in keyof AfIconBox & keyof AfIconBoxAttributes]?: AfIconBox[K] } & { [K in keyof AfIconBox & keyof AfIconBoxAttributes as `attr:${K}`]?: AfIconBoxAttributes[K] } & { [K in keyof AfIconBox & keyof AfIconBoxAttributes as `prop:${K}`]?: AfIconBox[K] } & OneOf<"icon", AfIconBox["icon"], AfIconBoxAttributes["icon"]>;
+        "af-icon-button": Omit<AfIconButton, keyof AfIconButtonAttributes> & { [K in keyof AfIconButton & keyof AfIconButtonAttributes]?: AfIconButton[K] } & { [K in keyof AfIconButton & keyof AfIconButtonAttributes as `attr:${K}`]?: AfIconButtonAttributes[K] } & { [K in keyof AfIconButton & keyof AfIconButtonAttributes as `prop:${K}`]?: AfIconButton[K] } & OneOf<"ariaLabel", AfIconButton["ariaLabel"], AfIconButtonAttributes["ariaLabel"]>;
+        "af-icon-text": Omit<AfIconText, keyof AfIconTextAttributes> & { [K in keyof AfIconText & keyof AfIconTextAttributes]?: AfIconText[K] } & { [K in keyof AfIconText & keyof AfIconTextAttributes as `attr:${K}`]?: AfIconTextAttributes[K] } & { [K in keyof AfIconText & keyof AfIconTextAttributes as `prop:${K}`]?: AfIconText[K] } & OneOf<"icon", AfIconText["icon"], AfIconTextAttributes["icon"]>;
+        "af-illustrated-card": Omit<AfIllustratedCard, keyof AfIllustratedCardAttributes> & { [K in keyof AfIllustratedCard & keyof AfIllustratedCardAttributes]?: AfIllustratedCard[K] } & { [K in keyof AfIllustratedCard & keyof AfIllustratedCardAttributes as `attr:${K}`]?: AfIllustratedCardAttributes[K] } & { [K in keyof AfIllustratedCard & keyof AfIllustratedCardAttributes as `prop:${K}`]?: AfIllustratedCard[K] };
+        "af-image": Omit<AfImage, keyof AfImageAttributes> & { [K in keyof AfImage & keyof AfImageAttributes]?: AfImage[K] } & { [K in keyof AfImage & keyof AfImageAttributes as `attr:${K}`]?: AfImageAttributes[K] } & { [K in keyof AfImage & keyof AfImageAttributes as `prop:${K}`]?: AfImage[K] } & OneOf<"src", AfImage["src"], AfImageAttributes["src"]> & OneOf<"alt", AfImage["alt"], AfImageAttributes["alt"]>;
+        "af-in-page-banner": Omit<AfInPageBanner, keyof AfInPageBannerAttributes> & { [K in keyof AfInPageBanner & keyof AfInPageBannerAttributes]?: AfInPageBanner[K] } & { [K in keyof AfInPageBanner & keyof AfInPageBannerAttributes as `attr:${K}`]?: AfInPageBannerAttributes[K] } & { [K in keyof AfInPageBanner & keyof AfInPageBannerAttributes as `prop:${K}`]?: AfInPageBanner[K] };
+        "af-inline": Omit<AfInline, keyof AfInlineAttributes> & { [K in keyof AfInline & keyof AfInlineAttributes]?: AfInline[K] } & { [K in keyof AfInline & keyof AfInlineAttributes as `attr:${K}`]?: AfInlineAttributes[K] } & { [K in keyof AfInline & keyof AfInlineAttributes as `prop:${K}`]?: AfInline[K] };
+        "af-input": Omit<AfInput, keyof AfInputAttributes> & { [K in keyof AfInput & keyof AfInputAttributes]?: AfInput[K] } & { [K in keyof AfInput & keyof AfInputAttributes as `attr:${K}`]?: AfInputAttributes[K] } & { [K in keyof AfInput & keyof AfInputAttributes as `prop:${K}`]?: AfInput[K] };
+        "af-line-chart": Omit<AfLineChart, keyof AfLineChartAttributes> & { [K in keyof AfLineChart & keyof AfLineChartAttributes]?: AfLineChart[K] } & { [K in keyof AfLineChart & keyof AfLineChartAttributes as `attr:${K}`]?: AfLineChartAttributes[K] } & { [K in keyof AfLineChart & keyof AfLineChartAttributes as `prop:${K}`]?: AfLineChart[K] };
+        "af-logo": AfLogo;
+        "af-logo-mark": Omit<AfLogoMark, keyof AfLogoMarkAttributes> & { [K in keyof AfLogoMark & keyof AfLogoMarkAttributes]?: AfLogoMark[K] } & { [K in keyof AfLogoMark & keyof AfLogoMarkAttributes as `attr:${K}`]?: AfLogoMarkAttributes[K] } & { [K in keyof AfLogoMark & keyof AfLogoMarkAttributes as `prop:${K}`]?: AfLogoMark[K] };
+        "af-logo-well": AfLogoWell;
+        "af-nav-accordion": Omit<AfNavAccordion, keyof AfNavAccordionAttributes> & { [K in keyof AfNavAccordion & keyof AfNavAccordionAttributes]?: AfNavAccordion[K] } & { [K in keyof AfNavAccordion & keyof AfNavAccordionAttributes as `attr:${K}`]?: AfNavAccordionAttributes[K] } & { [K in keyof AfNavAccordion & keyof AfNavAccordionAttributes as `prop:${K}`]?: AfNavAccordion[K] };
+        "af-nav-accordion-item": Omit<AfNavAccordionItem, keyof AfNavAccordionItemAttributes> & { [K in keyof AfNavAccordionItem & keyof AfNavAccordionItemAttributes]?: AfNavAccordionItem[K] } & { [K in keyof AfNavAccordionItem & keyof AfNavAccordionItemAttributes as `attr:${K}`]?: AfNavAccordionItemAttributes[K] } & { [K in keyof AfNavAccordionItem & keyof AfNavAccordionItemAttributes as `prop:${K}`]?: AfNavAccordionItem[K] } & OneOf<"itemId", AfNavAccordionItem["itemId"], AfNavAccordionItemAttributes["itemId"]>;
+        "af-nav-card": Omit<AfNavCard, keyof AfNavCardAttributes> & { [K in keyof AfNavCard & keyof AfNavCardAttributes]?: AfNavCard[K] } & { [K in keyof AfNavCard & keyof AfNavCardAttributes as `attr:${K}`]?: AfNavCardAttributes[K] } & { [K in keyof AfNavCard & keyof AfNavCardAttributes as `prop:${K}`]?: AfNavCard[K] };
+        "af-nav-item": Omit<AfNavItem, keyof AfNavItemAttributes> & { [K in keyof AfNavItem & keyof AfNavItemAttributes]?: AfNavItem[K] } & { [K in keyof AfNavItem & keyof AfNavItemAttributes as `attr:${K}`]?: AfNavItemAttributes[K] } & { [K in keyof AfNavItem & keyof AfNavItemAttributes as `prop:${K}`]?: AfNavItem[K] };
+        "af-nav-menu": Omit<AfNavMenu, keyof AfNavMenuAttributes> & { [K in keyof AfNavMenu & keyof AfNavMenuAttributes]?: AfNavMenu[K] } & { [K in keyof AfNavMenu & keyof AfNavMenuAttributes as `attr:${K}`]?: AfNavMenuAttributes[K] } & { [K in keyof AfNavMenu & keyof AfNavMenuAttributes as `prop:${K}`]?: AfNavMenu[K] };
+        "af-nav-menu-nest": Omit<AfNavMenuNest, keyof AfNavMenuNestAttributes> & { [K in keyof AfNavMenuNest & keyof AfNavMenuNestAttributes]?: AfNavMenuNest[K] } & { [K in keyof AfNavMenuNest & keyof AfNavMenuNestAttributes as `attr:${K}`]?: AfNavMenuNestAttributes[K] } & { [K in keyof AfNavMenuNest & keyof AfNavMenuNestAttributes as `prop:${K}`]?: AfNavMenuNest[K] };
+        "af-navbar": Omit<AfNavbar, keyof AfNavbarAttributes> & { [K in keyof AfNavbar & keyof AfNavbarAttributes]?: AfNavbar[K] } & { [K in keyof AfNavbar & keyof AfNavbarAttributes as `attr:${K}`]?: AfNavbarAttributes[K] } & { [K in keyof AfNavbar & keyof AfNavbarAttributes as `prop:${K}`]?: AfNavbar[K] };
+        "af-next-step-item": Omit<AfNextStepItem, keyof AfNextStepItemAttributes> & { [K in keyof AfNextStepItem & keyof AfNextStepItemAttributes]?: AfNextStepItem[K] } & { [K in keyof AfNextStepItem & keyof AfNextStepItemAttributes as `attr:${K}`]?: AfNextStepItemAttributes[K] } & { [K in keyof AfNextStepItem & keyof AfNextStepItemAttributes as `prop:${K}`]?: AfNextStepItem[K] };
+        "af-next-steps": Omit<AfNextSteps, keyof AfNextStepsAttributes> & { [K in keyof AfNextSteps & keyof AfNextStepsAttributes]?: AfNextSteps[K] } & { [K in keyof AfNextSteps & keyof AfNextStepsAttributes as `attr:${K}`]?: AfNextStepsAttributes[K] } & { [K in keyof AfNextSteps & keyof AfNextStepsAttributes as `prop:${K}`]?: AfNextSteps[K] };
+        "af-number-badge": Omit<AfNumberBadge, keyof AfNumberBadgeAttributes> & { [K in keyof AfNumberBadge & keyof AfNumberBadgeAttributes]?: AfNumberBadge[K] } & { [K in keyof AfNumberBadge & keyof AfNumberBadgeAttributes as `attr:${K}`]?: AfNumberBadgeAttributes[K] } & { [K in keyof AfNumberBadge & keyof AfNumberBadgeAttributes as `prop:${K}`]?: AfNumberBadge[K] };
+        "af-numbered-stepper": Omit<AfNumberedStepper, keyof AfNumberedStepperAttributes> & { [K in keyof AfNumberedStepper & keyof AfNumberedStepperAttributes]?: AfNumberedStepper[K] } & { [K in keyof AfNumberedStepper & keyof AfNumberedStepperAttributes as `attr:${K}`]?: AfNumberedStepperAttributes[K] } & { [K in keyof AfNumberedStepper & keyof AfNumberedStepperAttributes as `prop:${K}`]?: AfNumberedStepper[K] };
+        "af-numbered-stepper-item": Omit<AfNumberedStepperItem, keyof AfNumberedStepperItemAttributes> & { [K in keyof AfNumberedStepperItem & keyof AfNumberedStepperItemAttributes]?: AfNumberedStepperItem[K] } & { [K in keyof AfNumberedStepperItem & keyof AfNumberedStepperItemAttributes as `attr:${K}`]?: AfNumberedStepperItemAttributes[K] } & { [K in keyof AfNumberedStepperItem & keyof AfNumberedStepperItemAttributes as `prop:${K}`]?: AfNumberedStepperItem[K] };
+        "af-paperclip-decoration": Omit<AfPaperclipDecoration, keyof AfPaperclipDecorationAttributes> & { [K in keyof AfPaperclipDecoration & keyof AfPaperclipDecorationAttributes]?: AfPaperclipDecoration[K] } & { [K in keyof AfPaperclipDecoration & keyof AfPaperclipDecorationAttributes as `attr:${K}`]?: AfPaperclipDecorationAttributes[K] } & { [K in keyof AfPaperclipDecoration & keyof AfPaperclipDecorationAttributes as `prop:${K}`]?: AfPaperclipDecoration[K] };
+        "af-pie-chart": Omit<AfPieChart, keyof AfPieChartAttributes> & { [K in keyof AfPieChart & keyof AfPieChartAttributes]?: AfPieChart[K] } & { [K in keyof AfPieChart & keyof AfPieChartAttributes as `attr:${K}`]?: AfPieChartAttributes[K] } & { [K in keyof AfPieChart & keyof AfPieChartAttributes as `prop:${K}`]?: AfPieChart[K] };
+        "af-progress-line": Omit<AfProgressLine, keyof AfProgressLineAttributes> & { [K in keyof AfProgressLine & keyof AfProgressLineAttributes]?: AfProgressLine[K] } & { [K in keyof AfProgressLine & keyof AfProgressLineAttributes as `attr:${K}`]?: AfProgressLineAttributes[K] } & { [K in keyof AfProgressLine & keyof AfProgressLineAttributes as `prop:${K}`]?: AfProgressLine[K] };
+        "af-proposal-footer": Omit<AfProposalFooter, keyof AfProposalFooterAttributes> & { [K in keyof AfProposalFooter & keyof AfProposalFooterAttributes]?: AfProposalFooter[K] } & { [K in keyof AfProposalFooter & keyof AfProposalFooterAttributes as `attr:${K}`]?: AfProposalFooterAttributes[K] } & { [K in keyof AfProposalFooter & keyof AfProposalFooterAttributes as `prop:${K}`]?: AfProposalFooter[K] };
+        "af-proposal-header": Omit<AfProposalHeader, keyof AfProposalHeaderAttributes> & { [K in keyof AfProposalHeader & keyof AfProposalHeaderAttributes]?: AfProposalHeader[K] } & { [K in keyof AfProposalHeader & keyof AfProposalHeaderAttributes as `attr:${K}`]?: AfProposalHeaderAttributes[K] } & { [K in keyof AfProposalHeader & keyof AfProposalHeaderAttributes as `prop:${K}`]?: AfProposalHeader[K] };
+        "af-radio": Omit<AfRadio, keyof AfRadioAttributes> & { [K in keyof AfRadio & keyof AfRadioAttributes]?: AfRadio[K] } & { [K in keyof AfRadio & keyof AfRadioAttributes as `attr:${K}`]?: AfRadioAttributes[K] } & { [K in keyof AfRadio & keyof AfRadioAttributes as `prop:${K}`]?: AfRadio[K] };
+        "af-section": Omit<AfSection, keyof AfSectionAttributes> & { [K in keyof AfSection & keyof AfSectionAttributes]?: AfSection[K] } & { [K in keyof AfSection & keyof AfSectionAttributes as `attr:${K}`]?: AfSectionAttributes[K] } & { [K in keyof AfSection & keyof AfSectionAttributes as `prop:${K}`]?: AfSection[K] };
+        "af-show": Omit<AfShow, keyof AfShowAttributes> & { [K in keyof AfShow & keyof AfShowAttributes]?: AfShow[K] } & { [K in keyof AfShow & keyof AfShowAttributes as `attr:${K}`]?: AfShowAttributes[K] } & { [K in keyof AfShow & keyof AfShowAttributes as `prop:${K}`]?: AfShow[K] };
+        "af-social-link": Omit<AfSocialLink, keyof AfSocialLinkAttributes> & { [K in keyof AfSocialLink & keyof AfSocialLinkAttributes]?: AfSocialLink[K] } & { [K in keyof AfSocialLink & keyof AfSocialLinkAttributes as `attr:${K}`]?: AfSocialLinkAttributes[K] } & { [K in keyof AfSocialLink & keyof AfSocialLinkAttributes as `prop:${K}`]?: AfSocialLink[K] };
+        "af-spacer": Omit<AfSpacer, keyof AfSpacerAttributes> & { [K in keyof AfSpacer & keyof AfSpacerAttributes]?: AfSpacer[K] } & { [K in keyof AfSpacer & keyof AfSpacerAttributes as `attr:${K}`]?: AfSpacerAttributes[K] } & { [K in keyof AfSpacer & keyof AfSpacerAttributes as `prop:${K}`]?: AfSpacer[K] };
+        "af-split-section": Omit<AfSplitSection, keyof AfSplitSectionAttributes> & { [K in keyof AfSplitSection & keyof AfSplitSectionAttributes]?: AfSplitSection[K] } & { [K in keyof AfSplitSection & keyof AfSplitSectionAttributes as `attr:${K}`]?: AfSplitSectionAttributes[K] } & { [K in keyof AfSplitSection & keyof AfSplitSectionAttributes as `prop:${K}`]?: AfSplitSection[K] };
+        "af-stack": Omit<AfStack, keyof AfStackAttributes> & { [K in keyof AfStack & keyof AfStackAttributes]?: AfStack[K] } & { [K in keyof AfStack & keyof AfStackAttributes as `attr:${K}`]?: AfStackAttributes[K] } & { [K in keyof AfStack & keyof AfStackAttributes as `prop:${K}`]?: AfStack[K] };
+        "af-stat": Omit<AfStat, keyof AfStatAttributes> & { [K in keyof AfStat & keyof AfStatAttributes]?: AfStat[K] } & { [K in keyof AfStat & keyof AfStatAttributes as `attr:${K}`]?: AfStatAttributes[K] } & { [K in keyof AfStat & keyof AfStatAttributes as `prop:${K}`]?: AfStat[K] } & OneOf<"value", AfStat["value"], AfStatAttributes["value"]> & OneOf<"label", AfStat["label"], AfStatAttributes["label"]>;
+        "af-stats-row": AfStatsRow;
+        "af-stepper": Omit<AfStepper, keyof AfStepperAttributes> & { [K in keyof AfStepper & keyof AfStepperAttributes]?: AfStepper[K] } & { [K in keyof AfStepper & keyof AfStepperAttributes as `attr:${K}`]?: AfStepperAttributes[K] } & { [K in keyof AfStepper & keyof AfStepperAttributes as `prop:${K}`]?: AfStepper[K] };
+        "af-stepper-step": Omit<AfStepperStep, keyof AfStepperStepAttributes> & { [K in keyof AfStepperStep & keyof AfStepperStepAttributes]?: AfStepperStep[K] } & { [K in keyof AfStepperStep & keyof AfStepperStepAttributes as `attr:${K}`]?: AfStepperStepAttributes[K] } & { [K in keyof AfStepperStep & keyof AfStepperStepAttributes as `prop:${K}`]?: AfStepperStep[K] };
+        "af-switch": Omit<AfSwitch, keyof AfSwitchAttributes> & { [K in keyof AfSwitch & keyof AfSwitchAttributes]?: AfSwitch[K] } & { [K in keyof AfSwitch & keyof AfSwitchAttributes as `attr:${K}`]?: AfSwitchAttributes[K] } & { [K in keyof AfSwitch & keyof AfSwitchAttributes as `prop:${K}`]?: AfSwitch[K] };
+        "af-tab": Omit<AfTab, keyof AfTabAttributes> & { [K in keyof AfTab & keyof AfTabAttributes]?: AfTab[K] } & { [K in keyof AfTab & keyof AfTabAttributes as `attr:${K}`]?: AfTabAttributes[K] } & { [K in keyof AfTab & keyof AfTabAttributes as `prop:${K}`]?: AfTab[K] };
+        "af-tab-bar": Omit<AfTabBar, keyof AfTabBarAttributes> & { [K in keyof AfTabBar & keyof AfTabBarAttributes]?: AfTabBar[K] } & { [K in keyof AfTabBar & keyof AfTabBarAttributes as `attr:${K}`]?: AfTabBarAttributes[K] } & { [K in keyof AfTabBar & keyof AfTabBarAttributes as `prop:${K}`]?: AfTabBar[K] };
+        "af-table": Omit<AfTable, keyof AfTableAttributes> & { [K in keyof AfTable & keyof AfTableAttributes]?: AfTable[K] } & { [K in keyof AfTable & keyof AfTableAttributes as `attr:${K}`]?: AfTableAttributes[K] } & { [K in keyof AfTable & keyof AfTableAttributes as `prop:${K}`]?: AfTable[K] };
+        "af-tag": Omit<AfTag, keyof AfTagAttributes> & { [K in keyof AfTag & keyof AfTagAttributes]?: AfTag[K] } & { [K in keyof AfTag & keyof AfTagAttributes as `attr:${K}`]?: AfTagAttributes[K] } & { [K in keyof AfTag & keyof AfTagAttributes as `prop:${K}`]?: AfTag[K] };
+        "af-testimonial": Omit<AfTestimonial, keyof AfTestimonialAttributes> & { [K in keyof AfTestimonial & keyof AfTestimonialAttributes]?: AfTestimonial[K] } & { [K in keyof AfTestimonial & keyof AfTestimonialAttributes as `attr:${K}`]?: AfTestimonialAttributes[K] } & { [K in keyof AfTestimonial & keyof AfTestimonialAttributes as `prop:${K}`]?: AfTestimonial[K] } & OneOf<"attribution", AfTestimonial["attribution"], AfTestimonialAttributes["attribution"]>;
+        "af-testimonial-carousel": AfTestimonialCarousel;
+        "af-testimonial-stat": Omit<AfTestimonialStat, keyof AfTestimonialStatAttributes> & { [K in keyof AfTestimonialStat & keyof AfTestimonialStatAttributes]?: AfTestimonialStat[K] } & { [K in keyof AfTestimonialStat & keyof AfTestimonialStatAttributes as `attr:${K}`]?: AfTestimonialStatAttributes[K] } & { [K in keyof AfTestimonialStat & keyof AfTestimonialStatAttributes as `prop:${K}`]?: AfTestimonialStat[K] } & OneOf<"value", AfTestimonialStat["value"], AfTestimonialStatAttributes["value"]> & OneOf<"description", AfTestimonialStat["description"], AfTestimonialStatAttributes["description"]>;
+        "af-text": Omit<AfText, keyof AfTextAttributes> & { [K in keyof AfText & keyof AfTextAttributes]?: AfText[K] } & { [K in keyof AfText & keyof AfTextAttributes as `attr:${K}`]?: AfTextAttributes[K] } & { [K in keyof AfText & keyof AfTextAttributes as `prop:${K}`]?: AfText[K] };
+        "af-text-image": Omit<AfTextImage, keyof AfTextImageAttributes> & { [K in keyof AfTextImage & keyof AfTextImageAttributes]?: AfTextImage[K] } & { [K in keyof AfTextImage & keyof AfTextImageAttributes as `attr:${K}`]?: AfTextImageAttributes[K] } & { [K in keyof AfTextImage & keyof AfTextImageAttributes as `prop:${K}`]?: AfTextImage[K] };
+        "af-text-image-nest": Omit<AfTextImageNest, keyof AfTextImageNestAttributes> & { [K in keyof AfTextImageNest & keyof AfTextImageNestAttributes]?: AfTextImageNest[K] } & { [K in keyof AfTextImageNest & keyof AfTextImageNestAttributes as `attr:${K}`]?: AfTextImageNestAttributes[K] } & { [K in keyof AfTextImageNest & keyof AfTextImageNestAttributes as `prop:${K}`]?: AfTextImageNest[K] };
+        "af-textarea": Omit<AfTextarea, keyof AfTextareaAttributes> & { [K in keyof AfTextarea & keyof AfTextareaAttributes]?: AfTextarea[K] } & { [K in keyof AfTextarea & keyof AfTextareaAttributes as `attr:${K}`]?: AfTextareaAttributes[K] } & { [K in keyof AfTextarea & keyof AfTextareaAttributes as `prop:${K}`]?: AfTextarea[K] };
+        "af-theme-override": Omit<AfThemeOverride, keyof AfThemeOverrideAttributes> & { [K in keyof AfThemeOverride & keyof AfThemeOverrideAttributes]?: AfThemeOverride[K] } & { [K in keyof AfThemeOverride & keyof AfThemeOverrideAttributes as `attr:${K}`]?: AfThemeOverrideAttributes[K] } & { [K in keyof AfThemeOverride & keyof AfThemeOverrideAttributes as `prop:${K}`]?: AfThemeOverride[K] };
+        "af-timeline": Omit<AfTimeline, keyof AfTimelineAttributes> & { [K in keyof AfTimeline & keyof AfTimelineAttributes]?: AfTimeline[K] } & { [K in keyof AfTimeline & keyof AfTimelineAttributes as `attr:${K}`]?: AfTimelineAttributes[K] } & { [K in keyof AfTimeline & keyof AfTimelineAttributes as `prop:${K}`]?: AfTimeline[K] } & OneOf<"startDate", AfTimeline["startDate"], AfTimelineAttributes["startDate"]> & OneOf<"endDate", AfTimeline["endDate"], AfTimelineAttributes["endDate"]>;
+        "af-timeline-item": Omit<AfTimelineItem, keyof AfTimelineItemAttributes> & { [K in keyof AfTimelineItem & keyof AfTimelineItemAttributes]?: AfTimelineItem[K] } & { [K in keyof AfTimelineItem & keyof AfTimelineItemAttributes as `attr:${K}`]?: AfTimelineItemAttributes[K] } & { [K in keyof AfTimelineItem & keyof AfTimelineItemAttributes as `prop:${K}`]?: AfTimelineItem[K] } & OneOf<"startDate", AfTimelineItem["startDate"], AfTimelineItemAttributes["startDate"]>;
+        "af-typography-lockup": Omit<AfTypographyLockup, keyof AfTypographyLockupAttributes> & { [K in keyof AfTypographyLockup & keyof AfTypographyLockupAttributes]?: AfTypographyLockup[K] } & { [K in keyof AfTypographyLockup & keyof AfTypographyLockupAttributes as `attr:${K}`]?: AfTypographyLockupAttributes[K] } & { [K in keyof AfTypographyLockup & keyof AfTypographyLockupAttributes as `prop:${K}`]?: AfTypographyLockup[K] };
+        "af-video-container": Omit<AfVideoContainer, keyof AfVideoContainerAttributes> & { [K in keyof AfVideoContainer & keyof AfVideoContainerAttributes]?: AfVideoContainer[K] } & { [K in keyof AfVideoContainer & keyof AfVideoContainerAttributes as `attr:${K}`]?: AfVideoContainerAttributes[K] } & { [K in keyof AfVideoContainer & keyof AfVideoContainerAttributes as `prop:${K}`]?: AfVideoContainer[K] };
+        "af-visually-hidden": Omit<AfVisuallyHidden, keyof AfVisuallyHiddenAttributes> & { [K in keyof AfVisuallyHidden & keyof AfVisuallyHiddenAttributes]?: AfVisuallyHidden[K] } & { [K in keyof AfVisuallyHidden & keyof AfVisuallyHiddenAttributes as `attr:${K}`]?: AfVisuallyHiddenAttributes[K] } & { [K in keyof AfVisuallyHidden & keyof AfVisuallyHiddenAttributes as `prop:${K}`]?: AfVisuallyHidden[K] };
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * Accordion container that manages multiple accordion items.
+             * Controls which items are open based on mode (independent or exclusive).
              */
-            "af-accordion": LocalJSX.AfAccordion & JSXBase.HTMLAttributes<HTMLAfAccordionElement>;
+            "af-accordion": LocalJSX.IntrinsicElements["af-accordion"] & JSXBase.HTMLAttributes<HTMLAfAccordionElement>;
             /**
              * A single collapsible accordion item with header and content.
              * Can be used standalone or within an af-accordion container.
              */
-            "af-accordion-item": LocalJSX.AfAccordionItem & JSXBase.HTMLAttributes<HTMLAfAccordionItemElement>;
+            "af-accordion-item": LocalJSX.IntrinsicElements["af-accordion-item"] & JSXBase.HTMLAttributes<HTMLAfAccordionItemElement>;
+            /**
+             * Individual action item within an af-action-list container.
+             * Displays a task with status indicator, optional assignee, and due date.
+             * @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>
+             * ```
+             */
+            "af-action-item": LocalJSX.IntrinsicElements["af-action-item"] & JSXBase.HTMLAttributes<HTMLAfActionItemElement>;
+            /**
+             * Container for a list of action items or tasks with status tracking.
+             * Renders children `af-action-item` elements with optional progress bar.
+             * @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>
+             * ```
+             */
+            "af-action-list": LocalJSX.IntrinsicElements["af-action-list"] & JSXBase.HTMLAttributes<HTMLAfActionListElement>;
+            /**
+             * A native SVG area chart component with theme integration.
+             * Supports stacked areas for multi-series data, linear/smooth curves,
+             * and progressive interactivity.
+             * @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>
+             * ```
+             */
+            "af-area-chart": LocalJSX.IntrinsicElements["af-area-chart"] & JSXBase.HTMLAttributes<HTMLAfAreaChartElement>;
             /**
              * A container component that maintains a fixed aspect ratio for its content.
              * Useful for images, videos, or any content that needs to maintain specific proportions.
              */
-            "af-aspect-ratio": LocalJSX.AfAspectRatio & JSXBase.HTMLAttributes<HTMLAfAspectRatioElement>;
+            "af-aspect-ratio": LocalJSX.IntrinsicElements["af-aspect-ratio"] & JSXBase.HTMLAttributes<HTMLAfAspectRatioElement>;
+            /**
+             * A native SVG bar chart component with theme integration.
+             * Supports vertical/horizontal orientation, stacked bars, and progressive
+             * interactivity (none, hover, tooltip).
+             * @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>
+             * ```
+             */
+            "af-bar-chart": LocalJSX.IntrinsicElements["af-bar-chart"] & JSXBase.HTMLAttributes<HTMLAfBarChartElement>;
             /**
              * Button component that inherits colors from theme context.
              * Colors are determined by the parent theme (af-section, af-card, etc.)
              * via CSS custom properties.
              */
-            "af-button": LocalJSX.AfButton & JSXBase.HTMLAttributes<HTMLAfButtonElement>;
-            "af-button-group": LocalJSX.AfButtonGroup & JSXBase.HTMLAttributes<HTMLAfButtonGroupElement>;
+            "af-button": LocalJSX.IntrinsicElements["af-button"] & JSXBase.HTMLAttributes<HTMLAfButtonElement>;
+            "af-button-group": LocalJSX.IntrinsicElements["af-button-group"] & JSXBase.HTMLAttributes<HTMLAfButtonGroupElement>;
+            /**
+             * 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)
+             * @example ```html
+             * <af-callout variant="warning">
+             *   Important Notice
+             *   <span slot="description">Please review the following information.</span>
+             * </af-callout>
+             * ```
+             */
+            "af-callout": LocalJSX.IntrinsicElements["af-callout"] & JSXBase.HTMLAttributes<HTMLAfCalloutElement>;
             /**
              * Card atom component - a themed container with consistent styling.
              * Provides theme context to children via CSS custom properties.
              * This is a base building block used by molecule components like
              * af-feature-card and af-illustrated-card.
              */
-            "af-card": LocalJSX.AfCard & JSXBase.HTMLAttributes<HTMLAfCardElement>;
+            "af-card": LocalJSX.IntrinsicElements["af-card"] & JSXBase.HTMLAttributes<HTMLAfCardElement>;
             /**
              * Center layout component for quickly centering content.
              * Supports horizontal, vertical, or both axes.
              */
-            "af-center": LocalJSX.AfCenter & JSXBase.HTMLAttributes<HTMLAfCenterElement>;
+            "af-center": LocalJSX.IntrinsicElements["af-center"] & JSXBase.HTMLAttributes<HTMLAfCenterElement>;
+            /**
+             * A standalone chart legend component.
+             * Can be used alongside any chart component or custom SVG charts.
+             * Supports interactive highlighting and toggle behavior.
+             * @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>
+             * ```
+             */
+            "af-chart-legend": LocalJSX.IntrinsicElements["af-chart-legend"] & JSXBase.HTMLAttributes<HTMLAfChartLegendElement>;
+            /**
+             * 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.
+             * @example ```html
+             * <af-chart-section theme="inkwell" caption="Monthly Revenue">
+             *   <canvas id="revenue-chart"></canvas>
+             * </af-chart-section>
+             * ```
+             */
+            "af-chart-section": LocalJSX.IntrinsicElements["af-chart-section"] & JSXBase.HTMLAttributes<HTMLAfChartSectionElement>;
+            /**
+             * 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.
+             * @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>
+             * ```
+             */
+            "af-chart-tooltip": LocalJSX.IntrinsicElements["af-chart-tooltip"] & JSXBase.HTMLAttributes<HTMLAfChartTooltipElement>;
             /**
              * Checkbox component for selecting multiple options.
              * Supports checked, unchecked, and indeterminate states.
              */
-            "af-checkbox": LocalJSX.AfCheckbox & JSXBase.HTMLAttributes<HTMLAfCheckboxElement>;
+            "af-checkbox": LocalJSX.IntrinsicElements["af-checkbox"] & JSXBase.HTMLAttributes<HTMLAfCheckboxElement>;
             /**
              * Full-width row of client logos, either infinite-scrolling (default)
              * or a centred static row.
@@ -5547,23 +8543,23 @@ declare module "@stencil/core" {
              * Static mode skips the clone — nothing is animating, so duplicating
              * the logos would just render them twice.
              */
-            "af-client-carousel": LocalJSX.AfClientCarousel & JSXBase.HTMLAttributes<HTMLAfClientCarouselElement>;
-            "af-color-swatch": LocalJSX.AfColorSwatch & JSXBase.HTMLAttributes<HTMLAfColorSwatchElement>;
+            "af-client-carousel": LocalJSX.IntrinsicElements["af-client-carousel"] & JSXBase.HTMLAttributes<HTMLAfClientCarouselElement>;
+            "af-color-swatch": LocalJSX.IntrinsicElements["af-color-swatch"] & JSXBase.HTMLAttributes<HTMLAfColorSwatchElement>;
             /**
              * Contact item component for footer
              * Displays a label and value pair (e.g., "Sales enquiries" / "contact@example.com")
              */
-            "af-contact-item": LocalJSX.AfContactItem & JSXBase.HTMLAttributes<HTMLAfContactItemElement>;
+            "af-contact-item": LocalJSX.IntrinsicElements["af-contact-item"] & JSXBase.HTMLAttributes<HTMLAfContactItemElement>;
             /**
              * A responsive container component that provides consistent margins and max-width
              * constraints based on the Affinda grid system.
              */
-            "af-container": LocalJSX.AfContainer & JSXBase.HTMLAttributes<HTMLAfContainerElement>;
+            "af-container": LocalJSX.IntrinsicElements["af-container"] & JSXBase.HTMLAttributes<HTMLAfContainerElement>;
             /**
              * Divider component for visual separation between content.
              * Supports horizontal and vertical orientations with theme-aware styling.
              */
-            "af-divider": LocalJSX.AfDivider & JSXBase.HTMLAttributes<HTMLAfDividerElement>;
+            "af-divider": LocalJSX.IntrinsicElements["af-divider"] & JSXBase.HTMLAttributes<HTMLAfDividerElement>;
             /**
              * Feature accordion component with expandable items and accompanying image.
              * Used for showcasing product features with visual examples.
@@ -5576,7 +8572,7 @@ declare module "@stencil/core" {
              * </Section>
              * ```
              */
-            "af-feature-accordion": LocalJSX.AfFeatureAccordion & JSXBase.HTMLAttributes<HTMLAfFeatureAccordionElement>;
+            "af-feature-accordion": LocalJSX.IntrinsicElements["af-feature-accordion"] & JSXBase.HTMLAttributes<HTMLAfFeatureAccordionElement>;
             /**
              * Feature Card molecule component that combines a card with an image.
              * Two layout modes:
@@ -5585,39 +8581,39 @@ declare module "@stencil/core" {
              * Responsive: Automatically adapts to mobile viewport (≤768px).
              * Uses af-card atom internally and af-typography-lockup for text hierarchy.
              */
-            "af-feature-card": LocalJSX.AfFeatureCard & JSXBase.HTMLAttributes<HTMLAfFeatureCardElement>;
+            "af-feature-card": LocalJSX.IntrinsicElements["af-feature-card"] & JSXBase.HTMLAttributes<HTMLAfFeatureCardElement>;
             /**
              * Feature Grid component - CSS Grid container for feature cards.
              * Desktop: Configurable columns (1-4)
              * Mobile: List (stacked), horizontal scroll, or 2-column grid
              */
-            "af-feature-grid": LocalJSX.AfFeatureGrid & JSXBase.HTMLAttributes<HTMLAfFeatureGridElement>;
+            "af-feature-grid": LocalJSX.IntrinsicElements["af-feature-grid"] & JSXBase.HTMLAttributes<HTMLAfFeatureGridElement>;
             /**
              * Fieldset component for grouping related form controls.
              * Supports vertical and horizontal layouts with an optional legend/heading.
              */
-            "af-fieldset": LocalJSX.AfFieldset & JSXBase.HTMLAttributes<HTMLAfFieldsetElement>;
+            "af-fieldset": LocalJSX.IntrinsicElements["af-fieldset"] & JSXBase.HTMLAttributes<HTMLAfFieldsetElement>;
             /**
              * Footer component for marketing pages
              * Provides a flexible, slot-based layout for footer content
              * All content is passed via slots - no hardcoded links or content
              */
-            "af-footer": LocalJSX.AfFooter & JSXBase.HTMLAttributes<HTMLAfFooterElement>;
+            "af-footer": LocalJSX.IntrinsicElements["af-footer"] & JSXBase.HTMLAttributes<HTMLAfFooterElement>;
             /**
              * Footer navigation column component
              * Used within af-footer to create navigation link groups
              */
-            "af-footer-column": LocalJSX.AfFooterColumn & JSXBase.HTMLAttributes<HTMLAfFooterColumnElement>;
+            "af-footer-column": LocalJSX.IntrinsicElements["af-footer-column"] & JSXBase.HTMLAttributes<HTMLAfFooterColumnElement>;
             /**
              * Footer link component
              * Styled link for use in footer navigation columns
              */
-            "af-footer-link": LocalJSX.AfFooterLink & JSXBase.HTMLAttributes<HTMLAfFooterLinkElement>;
+            "af-footer-link": LocalJSX.IntrinsicElements["af-footer-link"] & JSXBase.HTMLAttributes<HTMLAfFooterLinkElement>;
             /**
              * Generic CSS Grid component for flexible column layouts.
              * Supports responsive column counts at different breakpoints.
              */
-            "af-grid": LocalJSX.AfGrid & JSXBase.HTMLAttributes<HTMLAfGridElement>;
+            "af-grid": LocalJSX.IntrinsicElements["af-grid"] & JSXBase.HTMLAttributes<HTMLAfGridElement>;
             /**
              * GridCallout organism - a marketing section combining an optional pill-shaped image 
              * with a grid of IconText feature items.
@@ -5643,13 +8639,13 @@ declare module "@stencil/core" {
              * </af-section>
              * ```
              */
-            "af-grid-callout": LocalJSX.AfGridCallout & JSXBase.HTMLAttributes<HTMLAfGridCalloutElement>;
+            "af-grid-callout": LocalJSX.IntrinsicElements["af-grid-callout"] & JSXBase.HTMLAttributes<HTMLAfGridCalloutElement>;
             /**
              * Heading component that inherits color from theme context.
              * Color is determined by the parent theme (af-section, af-card, etc.)
              * via CSS custom properties.
              */
-            "af-heading": LocalJSX.AfHeading & JSXBase.HTMLAttributes<HTMLAfHeadingElement>;
+            "af-heading": LocalJSX.IntrinsicElements["af-heading"] & JSXBase.HTMLAttributes<HTMLAfHeadingElement>;
             /**
              * Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations
              * the Affinda marketing site (and sibling apps) currently ship. Covers five
@@ -5695,7 +8691,7 @@ declare module "@stencil/core" {
              * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by
              * setting `--af-hero-image-lift` on the `<af-hero>` element.
              */
-            "af-hero": LocalJSX.AfHero & JSXBase.HTMLAttributes<HTMLAfHeroElement>;
+            "af-hero": LocalJSX.IntrinsicElements["af-hero"] & JSXBase.HTMLAttributes<HTMLAfHeroElement>;
             /**
              * Icon component that displays SVG icons from the Affinda icon library.
              * Icons inherit color from their parent via currentColor.
@@ -5705,7 +8701,7 @@ declare module "@stencil/core" {
              * <af-icon name="arrow-right" size="24"></af-icon>
              * ```
              */
-            "af-icon": LocalJSX.AfIcon & JSXBase.HTMLAttributes<HTMLAfIconElement>;
+            "af-icon": LocalJSX.IntrinsicElements["af-icon"] & JSXBase.HTMLAttributes<HTMLAfIconElement>;
             /**
              * IconBox atom - a themed container for displaying an icon with a rounded background.
              * Inherits theme colors from parent Section via CSS custom properties:
@@ -5715,8 +8711,8 @@ declare module "@stencil/core" {
              * <af-icon-box icon="settings" size="default"></af-icon-box>
              * ```
              */
-            "af-icon-box": LocalJSX.AfIconBox & JSXBase.HTMLAttributes<HTMLAfIconBoxElement>;
-            "af-icon-button": LocalJSX.AfIconButton & JSXBase.HTMLAttributes<HTMLAfIconButtonElement>;
+            "af-icon-box": LocalJSX.IntrinsicElements["af-icon-box"] & JSXBase.HTMLAttributes<HTMLAfIconBoxElement>;
+            "af-icon-button": LocalJSX.IntrinsicElements["af-icon-button"] & JSXBase.HTMLAttributes<HTMLAfIconButtonElement>;
             /**
              * IconText molecule - combines an IconBox with a TypographyLockup for feature items.
              * Composes:
@@ -5731,7 +8727,7 @@ declare module "@stencil/core" {
              * </af-icon-text>
              * ```
              */
-            "af-icon-text": LocalJSX.AfIconText & JSXBase.HTMLAttributes<HTMLAfIconTextElement>;
+            "af-icon-text": LocalJSX.IntrinsicElements["af-icon-text"] & JSXBase.HTMLAttributes<HTMLAfIconTextElement>;
             /**
              * Illustrated Card molecule component that combines a card with an illustration.
              * Uses a theme background with text at top, a button row in the middle, and
@@ -5739,12 +8735,17 @@ declare module "@stencil/core" {
              * @affinda /illustrations at the bottom.
              * Uses af-card atom internally and af-typography-lockup for text hierarchy.
              */
-            "af-illustrated-card": LocalJSX.AfIllustratedCard & JSXBase.HTMLAttributes<HTMLAfIllustratedCardElement>;
+            "af-illustrated-card": LocalJSX.IntrinsicElements["af-illustrated-card"] & JSXBase.HTMLAttributes<HTMLAfIllustratedCardElement>;
             /**
-             * 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.
+             * @example ```html
+             * <af-image src="/photo.jpg" alt="Description" shape="pill">
+             *   <span slot="caption">Photo caption text</span>
+             * </af-image>
+             * ```
              */
-            "af-image": LocalJSX.AfImage & JSXBase.HTMLAttributes<HTMLAfImageElement>;
+            "af-image": LocalJSX.IntrinsicElements["af-image"] & JSXBase.HTMLAttributes<HTMLAfImageElement>;
             /**
              * In-page banner component for call-to-action content.
              * A banner card with illustration, heading, description, and action buttons.
@@ -5771,35 +8772,68 @@ declare module "@stencil/core" {
              * - `illustration` — custom illustration markup.
              * The string props remain supported for simple cases.
              */
-            "af-in-page-banner": LocalJSX.AfInPageBanner & JSXBase.HTMLAttributes<HTMLAfInPageBannerElement>;
+            "af-in-page-banner": LocalJSX.IntrinsicElements["af-in-page-banner"] & JSXBase.HTMLAttributes<HTMLAfInPageBannerElement>;
             /**
              * Inline layout component for horizontal inline-flex layouts with gap and optional wrapping.
              * Ideal for button groups, tags, pills, and other inline elements.
              */
-            "af-inline": LocalJSX.AfInline & JSXBase.HTMLAttributes<HTMLAfInlineElement>;
+            "af-inline": LocalJSX.IntrinsicElements["af-inline"] & JSXBase.HTMLAttributes<HTMLAfInlineElement>;
             /**
              * Input field component with label, description, and error states.
              * Supports single-line and multi-line (textarea) modes via the `multiline` prop.
              */
-            "af-input": LocalJSX.AfInput & JSXBase.HTMLAttributes<HTMLAfInputElement>;
+            "af-input": LocalJSX.IntrinsicElements["af-input"] & JSXBase.HTMLAttributes<HTMLAfInputElement>;
+            /**
+             * A native SVG line chart component with theme integration.
+             * Supports linear/smooth curves, data points, area fill, and progressive
+             * interactivity (none, hover, tooltip).
+             * @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>
+             * ```
+             */
+            "af-line-chart": LocalJSX.IntrinsicElements["af-line-chart"] & JSXBase.HTMLAttributes<HTMLAfLineChartElement>;
             /**
              * Affinda logo component
              */
-            "af-logo": LocalJSX.AfLogo & JSXBase.HTMLAttributes<HTMLAfLogoElement>;
+            "af-logo": LocalJSX.IntrinsicElements["af-logo"] & JSXBase.HTMLAttributes<HTMLAfLogoElement>;
+            /**
+             * 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>
+             * ```
+             */
+            "af-logo-mark": LocalJSX.IntrinsicElements["af-logo-mark"] & JSXBase.HTMLAttributes<HTMLAfLogoMarkElement>;
             /**
              * A rounded container for displaying client logos
              */
-            "af-logo-well": LocalJSX.AfLogoWell & JSXBase.HTMLAttributes<HTMLAfLogoWellElement>;
+            "af-logo-well": LocalJSX.IntrinsicElements["af-logo-well"] & JSXBase.HTMLAttributes<HTMLAfLogoWellElement>;
             /**
              * Navigation-styled accordion for mobile menu patterns.
              * A wrapper around af-accordion with navigation-specific styling.
              */
-            "af-nav-accordion": LocalJSX.AfNavAccordion & JSXBase.HTMLAttributes<HTMLAfNavAccordionElement>;
+            "af-nav-accordion": LocalJSX.IntrinsicElements["af-nav-accordion"] & JSXBase.HTMLAttributes<HTMLAfNavAccordionElement>;
             /**
              * Navigation accordion item with NavItem-styled trigger.
              * Combines navigation item styling with accordion collapse behavior.
              */
-            "af-nav-accordion-item": LocalJSX.AfNavAccordionItem & JSXBase.HTMLAttributes<HTMLAfNavAccordionItemElement>;
+            "af-nav-accordion-item": LocalJSX.IntrinsicElements["af-nav-accordion-item"] & JSXBase.HTMLAttributes<HTMLAfNavAccordionItemElement>;
             /**
              * A navigation card component for featured article content in mega-menu dropdowns.
              * Displays an image with a gradient overlay and headline text.
@@ -5810,7 +8844,7 @@ declare module "@stencil/core" {
              * - Slight scale effect (1.02)
              * - Headline underline
              */
-            "af-nav-card": LocalJSX.AfNavCard & JSXBase.HTMLAttributes<HTMLAfNavCardElement>;
+            "af-nav-card": LocalJSX.IntrinsicElements["af-nav-card"] & JSXBase.HTMLAttributes<HTMLAfNavCardElement>;
             /**
              * A generic navigation item component that can be used in navigation bars, menus, and sidebars.
              * Supports multiple hierarchy levels, variants, and states (active, hover).
@@ -5821,12 +8855,12 @@ declare module "@stencil/core" {
              * pointer click. The companion `af-navbar` keeps `aria-expanded` on the
              * host in sync with the active dropdown.
              */
-            "af-nav-item": LocalJSX.AfNavItem & JSXBase.HTMLAttributes<HTMLAfNavItemElement>;
+            "af-nav-item": LocalJSX.IntrinsicElements["af-nav-item"] & JSXBase.HTMLAttributes<HTMLAfNavItemElement>;
             /**
              * A grouped navigation menu component with a heading.
              * Used in mega-menu dropdowns to group related navigation items.
              */
-            "af-nav-menu": LocalJSX.AfNavMenu & JSXBase.HTMLAttributes<HTMLAfNavMenuElement>;
+            "af-nav-menu": LocalJSX.IntrinsicElements["af-nav-menu"] & JSXBase.HTMLAttributes<HTMLAfNavMenuElement>;
             /**
              * A mega-menu dropdown panel component.
              * Acts as a container for NavMenu columns and optionally a sidebar.
@@ -5844,7 +8878,7 @@ declare module "@stencil/core" {
              * </af-nav-menu-nest>
              * ```
              */
-            "af-nav-menu-nest": LocalJSX.AfNavMenuNest & JSXBase.HTMLAttributes<HTMLAfNavMenuNestElement>;
+            "af-nav-menu-nest": LocalJSX.IntrinsicElements["af-nav-menu-nest"] & JSXBase.HTMLAttributes<HTMLAfNavMenuNestElement>;
             /**
              * A full-width navigation bar component that provides the main site navigation.
              * Features a pill-shaped container with logo, navigation links, and action buttons.
@@ -5863,7 +8897,36 @@ declare module "@stencil/core" {
              * - `mobile-menu` - Mobile menu content (use af-nav-accordion for accordion menus)
              * - `mobile-button` - CTA button for mobile menu (appears at top)
              */
-            "af-navbar": LocalJSX.AfNavbar & JSXBase.HTMLAttributes<HTMLAfNavbarElement>;
+            "af-navbar": LocalJSX.IntrinsicElements["af-navbar"] & JSXBase.HTMLAttributes<HTMLAfNavbarElement>;
+            /**
+             * Individual item within an af-next-steps container.
+             * Renders with an icon or number badge and optional description.
+             * @example ```html
+             * <af-next-step-item icon="check">
+             *   Complete the form
+             *   <span slot="description">Fill in all required fields.</span>
+             * </af-next-step-item>
+             * ```
+             */
+            "af-next-step-item": LocalJSX.IntrinsicElements["af-next-step-item"] & JSXBase.HTMLAttributes<HTMLAfNextStepItemElement>;
+            /**
+             * 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.
+             * @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>
+             * ```
+             */
+            "af-next-steps": LocalJSX.IntrinsicElements["af-next-steps"] & JSXBase.HTMLAttributes<HTMLAfNextStepsElement>;
             /**
              * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.
              * Perfect for numbered lists, step indicators, or ordered content.
@@ -5872,7 +8935,7 @@ declare module "@stencil/core" {
              * <af-number-badge number="5" variant="outlined" size="32"></af-number-badge>
              * ```
              */
-            "af-number-badge": LocalJSX.AfNumberBadge & JSXBase.HTMLAttributes<HTMLAfNumberBadgeElement>;
+            "af-number-badge": LocalJSX.IntrinsicElements["af-number-badge"] & JSXBase.HTMLAttributes<HTMLAfNumberBadgeElement>;
             /**
              * Numbered stepper — filled soft-clay circle badges (1/2/3) paired with a
              * heading + body description per step. Sibling to `af-stepper` (which uses
@@ -5896,7 +8959,7 @@ declare module "@stencil/core" {
              * </af-numbered-stepper>
              * ```
              */
-            "af-numbered-stepper": LocalJSX.AfNumberedStepper & JSXBase.HTMLAttributes<HTMLAfNumberedStepperElement>;
+            "af-numbered-stepper": LocalJSX.IntrinsicElements["af-numbered-stepper"] & JSXBase.HTMLAttributes<HTMLAfNumberedStepperElement>;
             /**
              * A single step within an `af-numbered-stepper`. Renders a filled soft-clay
              * circle badge (via `af-number-badge`) alongside a heading + body lockup.
@@ -5906,7 +8969,7 @@ declare module "@stencil/core" {
              * (22/20px) — the same ladder step used by diff-card, related-card, and
              * other card-title uses across the design system.
              */
-            "af-numbered-stepper-item": LocalJSX.AfNumberedStepperItem & JSXBase.HTMLAttributes<HTMLAfNumberedStepperItemElement>;
+            "af-numbered-stepper-item": LocalJSX.IntrinsicElements["af-numbered-stepper-item"] & JSXBase.HTMLAttributes<HTMLAfNumberedStepperItemElement>;
             /**
              * Decorative paperclip vector graphic. Renders the left-half paperclip
              * silhouette (viewBox `0 0 655 754`) that the marketing site bleeds off
@@ -5929,23 +8992,74 @@ declare module "@stencil/core" {
              * </af-section>
              * ```
              */
-            "af-paperclip-decoration": LocalJSX.AfPaperclipDecoration & JSXBase.HTMLAttributes<HTMLAfPaperclipDecorationElement>;
+            "af-paperclip-decoration": LocalJSX.IntrinsicElements["af-paperclip-decoration"] & JSXBase.HTMLAttributes<HTMLAfPaperclipDecorationElement>;
+            /**
+             * A native SVG pie chart component with theme integration.
+             * Supports progressive interactivity and optional labels.
+             * @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>
+             * ```
+             */
+            "af-pie-chart": LocalJSX.IntrinsicElements["af-pie-chart"] & JSXBase.HTMLAttributes<HTMLAfPieChartElement>;
             /**
              * Progress Line atom component for displaying scroll or completion progress.
              * Shows a horizontal bar with a filled portion indicating progress.
              * Used primarily for carousel scroll indicators.
              */
-            "af-progress-line": LocalJSX.AfProgressLine & JSXBase.HTMLAttributes<HTMLAfProgressLineElement>;
+            "af-progress-line": LocalJSX.IntrinsicElements["af-progress-line"] & JSXBase.HTMLAttributes<HTMLAfProgressLineElement>;
+            /**
+             * 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>
+             * ```
+             */
+            "af-proposal-footer": LocalJSX.IntrinsicElements["af-proposal-footer"] & JSXBase.HTMLAttributes<HTMLAfProposalFooterElement>;
+            /**
+             * 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>
+             * ```
+             */
+            "af-proposal-header": LocalJSX.IntrinsicElements["af-proposal-header"] & JSXBase.HTMLAttributes<HTMLAfProposalHeaderElement>;
             /**
              * Radio component for selecting a single option from a group.
              * Radios with the same `name` prop are mutually exclusive.
              */
-            "af-radio": LocalJSX.AfRadio & JSXBase.HTMLAttributes<HTMLAfRadioElement>;
+            "af-radio": LocalJSX.IntrinsicElements["af-radio"] & JSXBase.HTMLAttributes<HTMLAfRadioElement>;
             /**
              * Section layout component for consistent spacing and backgrounds.
              * Sets theme context for all child components via CSS custom properties.
              */
-            "af-section": LocalJSX.AfSection & JSXBase.HTMLAttributes<HTMLAfSectionElement>;
+            "af-section": LocalJSX.IntrinsicElements["af-section"] & JSXBase.HTMLAttributes<HTMLAfSectionElement>;
             /**
              * Show component for responsive visibility control.
              * Show or hide content based on viewport breakpoints.
@@ -5955,29 +9069,29 @@ declare module "@stencil/core" {
              * - lg: 1024px
              * - xl: 1440px
              */
-            "af-show": LocalJSX.AfShow & JSXBase.HTMLAttributes<HTMLAfShowElement>;
+            "af-show": LocalJSX.IntrinsicElements["af-show"] & JSXBase.HTMLAttributes<HTMLAfShowElement>;
             /**
              * Social media link component
              * Circular bordered icon link for social media profiles
              */
-            "af-social-link": LocalJSX.AfSocialLink & JSXBase.HTMLAttributes<HTMLAfSocialLinkElement>;
+            "af-social-link": LocalJSX.IntrinsicElements["af-social-link"] & JSXBase.HTMLAttributes<HTMLAfSocialLinkElement>;
             /**
              * Spacer component for adding fixed or flexible space between elements.
              * Use within flex or grid layouts.
              */
-            "af-spacer": LocalJSX.AfSpacer & JSXBase.HTMLAttributes<HTMLAfSpacerElement>;
+            "af-spacer": LocalJSX.IntrinsicElements["af-spacer"] & JSXBase.HTMLAttributes<HTMLAfSpacerElement>;
             /**
              * Split Section component for layouts with two-tone backgrounds.
              * Creates a vertical split with different themes for top and bottom halves.
              * Useful for content that visually spans across two themed areas.
              * Uses a CSS linear-gradient for the split background effect.
              */
-            "af-split-section": LocalJSX.AfSplitSection & JSXBase.HTMLAttributes<HTMLAfSplitSectionElement>;
+            "af-split-section": LocalJSX.IntrinsicElements["af-split-section"] & JSXBase.HTMLAttributes<HTMLAfSplitSectionElement>;
             /**
              * Stack layout component for vertical or horizontal flex layouts with consistent gap spacing.
              * Uses design tokens for gap values.
              */
-            "af-stack": LocalJSX.AfStack & JSXBase.HTMLAttributes<HTMLAfStackElement>;
+            "af-stack": LocalJSX.IntrinsicElements["af-stack"] & JSXBase.HTMLAttributes<HTMLAfStackElement>;
             /**
              * Individual stat — a large value (e.g. "1B+") paired with a descriptive label.
              * Intended as a slotted child of `af-stats-row`, but renders standalone too.
@@ -5985,7 +9099,7 @@ declare module "@stencil/core" {
              * `af-card` / `af-theme-override`) via the `--af-typography-*` tokens that
              * `af-heading` and `af-text` already consume — no theme prop needed here.
              */
-            "af-stat": LocalJSX.AfStat & JSXBase.HTMLAttributes<HTMLAfStatElement>;
+            "af-stat": LocalJSX.IntrinsicElements["af-stat"] & JSXBase.HTMLAttributes<HTMLAfStatElement>;
             /**
              * Layout container for a horizontal row of `af-stat` children.
              * Flex row that wraps to a grid on narrow viewports. Uses `scoped: true`
@@ -5996,7 +9110,7 @@ declare module "@stencil/core" {
              * ancestor. If you need a different background for the row, wrap it in
              * its own `af-section` or `af-theme-override`.
              */
-            "af-stats-row": LocalJSX.AfStatsRow & JSXBase.HTMLAttributes<HTMLAfStatsRowElement>;
+            "af-stats-row": LocalJSX.IntrinsicElements["af-stats-row"] & JSXBase.HTMLAttributes<HTMLAfStatsRowElement>;
             /**
              * Stepper composite for "Sign up / Upload / See results"-style marketing
              * flows. Renders children `af-stepper-step` elements in a horizontal row
@@ -6014,18 +9128,18 @@ declare module "@stencil/core" {
              * </af-stepper>
              * ```
              */
-            "af-stepper": LocalJSX.AfStepper & JSXBase.HTMLAttributes<HTMLAfStepperElement>;
+            "af-stepper": LocalJSX.IntrinsicElements["af-stepper"] & JSXBase.HTMLAttributes<HTMLAfStepperElement>;
             /**
              * A single step within an af-stepper. Renders a numbered circular badge
              * followed by slotted heading + body content.
              * The parent af-stepper auto-assigns the `index` attribute based on DOM
              * order, so consumers don't need to hand-number the steps.
              */
-            "af-stepper-step": LocalJSX.AfStepperStep & JSXBase.HTMLAttributes<HTMLAfStepperStepElement>;
+            "af-stepper-step": LocalJSX.IntrinsicElements["af-stepper-step"] & JSXBase.HTMLAttributes<HTMLAfStepperStepElement>;
             /**
              * Switch component for toggling between on and off states.
              */
-            "af-switch": LocalJSX.AfSwitch & JSXBase.HTMLAttributes<HTMLAfSwitchElement>;
+            "af-switch": LocalJSX.IntrinsicElements["af-switch"] & JSXBase.HTMLAttributes<HTMLAfSwitchElement>;
             /**
              * Tab component for use within a TabBar.
              * Represents an individual selectable tab with support for icons and number badges.
@@ -6039,7 +9153,7 @@ declare module "@stencil/core" {
              * </af-tab>
              * ```
              */
-            "af-tab": LocalJSX.AfTab & JSXBase.HTMLAttributes<HTMLAfTabElement>;
+            "af-tab": LocalJSX.IntrinsicElements["af-tab"] & JSXBase.HTMLAttributes<HTMLAfTabElement>;
             /**
              * TabBar component that contains and manages a group of tabs.
              * Provides horizontal layout, keyboard navigation, and consistent styling.
@@ -6051,7 +9165,30 @@ declare module "@stencil/core" {
              * </af-tab-bar>
              * ```
              */
-            "af-tab-bar": LocalJSX.AfTabBar & JSXBase.HTMLAttributes<HTMLAfTabBarElement>;
+            "af-tab-bar": LocalJSX.IntrinsicElements["af-tab-bar"] & JSXBase.HTMLAttributes<HTMLAfTabBarElement>;
+            /**
+             * A styled table wrapper that applies design system tokens to native table elements.
+             * Uses descendant selectors to style `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`.
+             * @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>
+             * ```
+             */
+            "af-table": LocalJSX.IntrinsicElements["af-table"] & JSXBase.HTMLAttributes<HTMLAfTableElement>;
             /**
              * Tag displays a label in a styled container.
              * Perfect for categorization, topics, or metadata display.
@@ -6064,26 +9201,26 @@ declare module "@stencil/core" {
              * <af-tag size="large" variant="white">Document Processing</af-tag>
              * ```
              */
-            "af-tag": LocalJSX.AfTag & JSXBase.HTMLAttributes<HTMLAfTagElement>;
-            "af-testimonial": LocalJSX.AfTestimonial & JSXBase.HTMLAttributes<HTMLAfTestimonialElement>;
+            "af-tag": LocalJSX.IntrinsicElements["af-tag"] & JSXBase.HTMLAttributes<HTMLAfTagElement>;
+            "af-testimonial": LocalJSX.IntrinsicElements["af-testimonial"] & JSXBase.HTMLAttributes<HTMLAfTestimonialElement>;
             /**
              * TestimonialCarousel - Carousel for displaying multiple customer testimonials.
              * Handles navigation between testimonials with progress indicator.
              * Wrap in Section/Container for proper page layout and theming.
              */
-            "af-testimonial-carousel": LocalJSX.AfTestimonialCarousel & JSXBase.HTMLAttributes<HTMLAfTestimonialCarouselElement>;
-            "af-testimonial-stat": LocalJSX.AfTestimonialStat & JSXBase.HTMLAttributes<HTMLAfTestimonialStatElement>;
+            "af-testimonial-carousel": LocalJSX.IntrinsicElements["af-testimonial-carousel"] & JSXBase.HTMLAttributes<HTMLAfTestimonialCarouselElement>;
+            "af-testimonial-stat": LocalJSX.IntrinsicElements["af-testimonial-stat"] & JSXBase.HTMLAttributes<HTMLAfTestimonialStatElement>;
             /**
              * Text/body component that inherits color from theme context.
              * Color is determined by the parent theme (af-section, af-card, etc.)
              * via CSS custom properties.
              */
-            "af-text": LocalJSX.AfText & JSXBase.HTMLAttributes<HTMLAfTextElement>;
+            "af-text": LocalJSX.IntrinsicElements["af-text"] & JSXBase.HTMLAttributes<HTMLAfTextElement>;
             /**
              * TextImage composite component that combines typography content with an image.
              * Supports various layout configurations with image position and proportion options.
              */
-            "af-text-image": LocalJSX.AfTextImage & JSXBase.HTMLAttributes<HTMLAfTextImageElement>;
+            "af-text-image": LocalJSX.IntrinsicElements["af-text-image"] & JSXBase.HTMLAttributes<HTMLAfTextImageElement>;
             /**
              * TextImageNest is a layout component that arranges multiple text-image content pieces
              * in various grid layouts with optional footer buttons.
@@ -6096,7 +9233,7 @@ declare module "@stencil/core" {
              * - `grid-4`: 4-column grid with stacked items
              * - `stacked`: Alternating rows of side-by-side content
              */
-            "af-text-image-nest": LocalJSX.AfTextImageNest & JSXBase.HTMLAttributes<HTMLAfTextImageNestElement>;
+            "af-text-image-nest": LocalJSX.IntrinsicElements["af-text-image-nest"] & JSXBase.HTMLAttributes<HTMLAfTextImageNestElement>;
             /**
              * @deprecated Use `<af-input multiline>` instead. `af-textarea` is a deprecated
              * alias kept for one minor cycle for backward compatibility and will be removed
@@ -6105,7 +9242,7 @@ declare module "@stencil/core" {
              * surface are identical.
              * Textarea component for multi-line text input with label, description, and error states.
              */
-            "af-textarea": LocalJSX.AfTextarea & JSXBase.HTMLAttributes<HTMLAfTextareaElement>;
+            "af-textarea": LocalJSX.IntrinsicElements["af-textarea"] & JSXBase.HTMLAttributes<HTMLAfTextareaElement>;
             /**
              * Theme Override utility component.
              * Wraps content and applies an explicit theme, overriding any inherited theme
@@ -6113,7 +9250,36 @@ declare module "@stencil/core" {
              * Unlike AfSection, this component does NOT apply a background color - 
              * it only sets the CSS custom properties that child components consume.
              */
-            "af-theme-override": LocalJSX.AfThemeOverride & JSXBase.HTMLAttributes<HTMLAfThemeOverrideElement>;
+            "af-theme-override": LocalJSX.IntrinsicElements["af-theme-override"] & JSXBase.HTMLAttributes<HTMLAfThemeOverrideElement>;
+            /**
+             * Horizontal Gantt-style timeline for displaying project phases and milestones.
+             * Items are positioned based on their date ranges relative to the timeline bounds.
+             * @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>
+             * ```
+             */
+            "af-timeline": LocalJSX.IntrinsicElements["af-timeline"] & JSXBase.HTMLAttributes<HTMLAfTimelineElement>;
+            /**
+             * Individual item within an af-timeline container.
+             * Renders as a horizontal bar in Gantt view or a list item on mobile.
+             * @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>
+             * ```
+             */
+            "af-timeline-item": LocalJSX.IntrinsicElements["af-timeline-item"] & JSXBase.HTMLAttributes<HTMLAfTimelineItemElement>;
             /**
              * Marketing-style composition of heading + description + buttons with
              * consistent spacing and alignment driven by the `headingSize` prop.
@@ -6137,7 +9303,7 @@ declare module "@stencil/core" {
              * title, expert-insights related-card h3 on the marketing site). It sits
              * between `4` and `5` in the type ladder.
              */
-            "af-typography-lockup": LocalJSX.AfTypographyLockup & JSXBase.HTMLAttributes<HTMLAfTypographyLockupElement>;
+            "af-typography-lockup": LocalJSX.IntrinsicElements["af-typography-lockup"] & JSXBase.HTMLAttributes<HTMLAfTypographyLockupElement>;
             /**
              * Video Container molecule component for showcasing video content.
              * Uses slots for typography lockups above and below the video.
@@ -6155,13 +9321,13 @@ declare module "@stencil/core" {
              * </af-split-section>
              * ```
              */
-            "af-video-container": LocalJSX.AfVideoContainer & JSXBase.HTMLAttributes<HTMLAfVideoContainerElement>;
+            "af-video-container": LocalJSX.IntrinsicElements["af-video-container"] & JSXBase.HTMLAttributes<HTMLAfVideoContainerElement>;
             /**
              * Visually Hidden component for accessible content.
              * Hides content visually while keeping it accessible to screen readers.
              * Essential for accessibility - use for skip links, form labels, etc.
              */
-            "af-visually-hidden": LocalJSX.AfVisuallyHidden & JSXBase.HTMLAttributes<HTMLAfVisuallyHiddenElement>;
+            "af-visually-hidden": LocalJSX.IntrinsicElements["af-visually-hidden"] & JSXBase.HTMLAttributes<HTMLAfVisuallyHiddenElement>;
         }
     }
 }