@affinda/wc 0.0.15 → 0.0.17

package/dist/types/components.d.ts

@@ -5,6 +5,16 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { IconName } from "@affinda/icons";
+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";
+export { IconName } from "@affinda/icons";
+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 namespace Components {
     /**
      * A container component that maintains a fixed aspect ratio for its content.
@@ -18,23 +28,23 @@ export namespace Components {
          */
         "ratio": string;
     }
+    /**
+     * Button component that inherits colors from theme context.
+     * Colors are determined by the parent theme (af-section, af-hero-section, etc.)
+     * via CSS custom properties.
+     */
     interface AfButton {
-        /**
-          * Use on dark backgrounds for better contrast
-          * @default false
-         */
-        "darkBackground": boolean;
         /**
           * Whether the button is disabled
           * @default false
          */
         "disabled": boolean;
         /**
-          * Optional href to render as a link
+          * Optional href to render as a link instead of a button
          */
         "href"?: string;
         /**
-          * The size of the button
+          * The size of the button. - `default` - Standard size for primary CTAs - `small` - Compact size for inline or secondary contexts
           * @default 'default'
          */
         "size": 'default' | 'small';
@@ -44,10 +54,10 @@ export namespace Components {
          */
         "type": 'button' | 'submit' | 'reset';
         /**
-          * The visual variant of the button
+          * The visual variant of the button. - `primary` - Main CTA with filled background (use sparingly, 1-2 per view) - `secondary` - Supporting action with outlined style - `tertiary` - Subtle text-link style with underline
           * @default 'primary'
          */
-        "variant": 'primary' | 'secondary' | 'outline' | 'ghost';
+        "variant": 'primary' | 'secondary' | 'tertiary';
     }
     interface AfButtonGroup {
         /**
@@ -61,35 +71,65 @@ export namespace Components {
          */
         "gap": string;
     }
+    /**
+     * 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.
+     */
     interface AfCard {
         /**
-          * Background color for the card (CSS color value)
+          * When true, the card stretches to fill its container height. Use this when the card is in a flex/grid container and needs to participate in equal-height layouts. The card's content will use flexbox to distribute space between children.
+          * @default false
          */
-        "backgroundColor"?: string;
+        "stretch": boolean;
         /**
-          * Background image URL for the card
+          * Theme - sets background color and provides theme context to children. Defaults to 'mist-green' if not specified.
+          * @default 'mist-green'
          */
-        "backgroundImage"?: string;
+        "theme"?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
+    }
+    /**
+     * Checkbox component for selecting multiple options.
+     * Supports checked, unchecked, and indeterminate states.
+     */
+    interface AfCheckbox {
+        /**
+          * Whether the checkbox is checked
+          * @default false
+         */
+        "checked": boolean;
+        /**
+          * Whether the checkbox is disabled
+          * @default false
+         */
+        "disabled": boolean;
         /**
-          * Whether to apply a dark gradient overlay (for cards with background images)
+          * Whether the checkbox is in an indeterminate state
           * @default false
          */
-        "darkOverlay": boolean;
+        "indeterminate": boolean;
+        /**
+          * The name of the checkbox for form submission
+         */
+        "name"?: string;
+        /**
+          * The value of the checkbox for form submission
+         */
+        "value"?: string;
     }
     /**
-     * Infinite scrolling carousel for client logos
+     * Infinite scrolling carousel for client logos.
+     * This is a section-level component that spans full width.
+     * It supports theming via the `theme` prop.
+     * For headlines, use a separate TypographyLockup or Heading component above this carousel.
      */
     interface AfClientCarousel {
         /**
-          * Headline text
-          * @default "Trusted by some of the world's leading organisations"
-         */
-        "headlineText": string;
-        /**
-          * Show headline above carousel
-          * @default false
+          * Theme - sets background color and provides theme context to children
+          * @default 'inkwell'
          */
-        "showHeadline": boolean;
+        "theme": Theme;
     }
     interface AfColorSwatch {
         /**
@@ -134,77 +174,114 @@ export namespace Components {
         "maxWidth": 'xlarge' | 'large' | 'medium' | 'fluid';
     }
     /**
-     * Call-to-action section component with illustration and decorative background
-     * A flexible CTA section with customizable content, buttons, and optional illustration
+     * Feature accordion component with expandable items and accompanying image.
+     * Used for showcasing product features with visual examples.
+     * Features auto-cycling through items with a progress timer.
+     * **Must be wrapped in a Section component** to inherit theme styling.
+     * The component automatically adapts colors based on the parent Section's theme.
+     * @example ```tsx
+     * <Section theme="inkwell">
+     *   <FeatureAccordion heading="Features" items={...} />
+     * </Section>
+     * ```
      */
-    interface AfCtaSection {
+    interface AfFeatureAccordion {
         /**
-          * Section description
-          * @default ''
+          * Whether auto-cycling is enabled
+          * @default true
          */
-        "description": string;
+        "autoCycle": boolean;
+        /**
+          * Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds)
+          * @default 6000
+         */
+        "cycleInterval": number;
         /**
           * Section heading
-          * @default ''
+          * @default 'Give AI agents your paperwork'
          */
         "heading": string;
         /**
-          * Illustration URL - if provided, displays this image
-          * @default ''
+          * JSON string of accordion items
+          * @default '[]'
          */
-        "illustrationUrl": string;
+        "items": string;
+    }
+    /**
+     * Feature Card molecule component that combines a card with an image.
+     * Two layout modes:
+     * - `standard`: Theme background with text at top and image at bottom
+     * - `full-bleed`: Image covers entire card with text overlay at bottom
+     * Responsive: Automatically adapts to mobile viewport (≤768px).
+     * Uses af-card atom internally and af-typography-lockup for text hierarchy.
+     */
+    interface AfFeatureCard {
         /**
-          * Primary button text
-          * @default ''
+          * Card size variant. - 'default': Fixed 544px × 420px - 'large': Fixed 777px × 480px   - 'flexible': Fills container (for grid layouts)
+          * @default 'default'
          */
-        "primaryButtonText": string;
+        "cardSize": 'default' | 'large' | 'flexible';
         /**
-          * Primary button URL
-          * @default '#'
+          * Heading size for typography lockup (1-5, where 1 is largest).
+          * @default 3
          */
-        "primaryButtonUrl": string;
+        "headingSize": 1 | 2 | 3 | 4 | 5;
         /**
-          * Secondary button text (optional - if empty, button won't show)
+          * Image alt text for accessibility. Provide meaningful alt text for feature images. Only use empty string for purely decorative images.
           * @default ''
          */
-        "secondaryButtonText": string;
+        "imageAlt": string;
         /**
-          * Secondary button URL
-          * @default '#'
+          * Background/feature image URL.
          */
-        "secondaryButtonUrl": string;
+        "imageSrc"?: string;
         /**
-          * Whether to show the decorative wave background
-          * @default true
+          * Layout mode for the card. - 'standard': Theme background with text at top and image at bottom - 'full-bleed': Image covers entire card with text overlay at bottom
+          * @default 'standard'
          */
-        "showWaveDecoration": boolean;
+        "layout": 'standard' | 'full-bleed';
+        /**
+          * Theme variant - sets background color and provides theme context. Only applies to 'standard' layout mode. Defaults to 'mist-green'.
+          * @default 'mist-green'
+         */
+        "theme"?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
     }
     /**
-     * Feature accordion component with expandable items and accompanying image
-     * Used for showcasing product features with visual examples
-     * Features auto-cycling through items with a progress timer
+     * Feature Grid component - CSS Grid container for feature cards.
+     * Desktop: Configurable columns (1-4)
+     * Mobile: List (stacked), horizontal scroll, or 2-column grid
      */
-    interface AfFeatureAccordion {
+    interface AfFeatureGrid {
         /**
-          * Whether auto-cycling is enabled
-          * @default true
+          * Number of columns on desktop (1-4).
+          * @default 4
          */
-        "autoCycle": boolean;
+        "columns": 1 | 2 | 3 | 4;
         /**
-          * Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds)
-          * @default 6000
+          * Mobile layout behavior. - 'list': Vertical stack (1 column) - 'scroll': Horizontal scroll with progress indicator - 'grid': Maintain 2-column grid on mobile
+          * @default 'list'
          */
-        "cycleInterval": number;
+        "mobileLayout": 'list' | 'scroll' | 'grid';
+    }
+    /**
+     * Fieldset component for grouping related form controls.
+     * Supports vertical and horizontal layouts with an optional legend/heading.
+     */
+    interface AfFieldset {
         /**
-          * Section heading
-          * @default 'Give AI agents your paperwork'
+          * Whether the fieldset is disabled (disables all child controls)
+          * @default false
          */
-        "heading": string;
+        "disabled": boolean;
         /**
-          * JSON string of accordion items
-          * @default '[]'
+          * The legend/heading text for the fieldset
          */
-        "items": string;
+        "legend"?: string;
+        /**
+          * The layout orientation of the fieldset items - `vertical` - Items stack vertically (default) - `horizontal` - Items are laid out horizontally
+          * @default 'vertical'
+         */
+        "orientation": 'vertical' | 'horizontal';
     }
     /**
      * Footer component for marketing pages
@@ -265,6 +342,62 @@ export namespace Components {
          */
         "href": string;
     }
+    /**
+     * GridCallout organism - a marketing section combining an optional pill-shaped image 
+     * with a grid of IconText feature items.
+     * Composes:
+     * - Pill-shaped image container (optional)
+     * - Heading via af-typography-lockup
+     * - Grid of af-icon-text items
+     * - Optional CTA button
+     * Inherits theme colors from parent af-section via CSS custom properties.
+     * @example ```html
+     * <af-section theme="mist-green">
+     *   <af-grid-callout image-src="/team.jpg" image-alt="Team photo">
+     *     Affinda blends AI and engineering
+     *     <span slot="description">Optional description text.</span>
+     *     
+     *     <af-icon-text slot="items" icon="settings">
+     *       Feature One
+     *       <span slot="description">Feature description.</span>
+     *     </af-icon-text>
+     *     
+     *     <af-button slot="cta" variant="primary">Learn more</af-button>
+     *   </af-grid-callout>
+     * </af-section>
+     * ```
+     */
+    interface AfGridCallout {
+        /**
+          * Number of columns for the IconText grid on desktop
+          * @default 2
+         */
+        "columns": 2 | 3 | 4;
+        /**
+          * Heading size for the main title
+          * @default 2
+         */
+        "headingSize": 1 | 2 | 3 | 4 | 5;
+        /**
+          * Alt text for the image (required for accessibility when imageSrc is provided)
+          * @default ''
+         */
+        "imageAlt": string;
+        /**
+          * Position of the image relative to the content
+          * @default 'left'
+         */
+        "imagePosition": 'left' | 'right';
+        /**
+          * Image source URL for the pill-shaped image
+         */
+        "imageSrc"?: string;
+    }
+    /**
+     * Heading component that inherits color from theme context.
+     * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+     * via CSS custom properties.
+     */
     interface AfHeading {
         /**
           * Visual alignment
@@ -276,32 +409,93 @@ export namespace Components {
           * @default '1'
          */
         "level": 'xl' | '1' | '2' | '3' | '4' | '5';
-        /**
-          * Theme for dark backgrounds
-          * @default 'light'
-         */
-        "theme": 'light' | 'dark';
     }
     /**
-     * Hero section component for marketing pages
+     * Hero section component for marketing pages.
+     * Uses TypographyLockup internally to handle heading, description, and button layout.
+     * Sets theme context for all child components via CSS custom properties.
      */
     interface AfHeroSection {
+        /**
+          * Button alignment - horizontal places buttons inline, vertical stacks them
+          * @default 'horizontal'
+         */
+        "buttonAlignment": 'horizontal' | 'vertical';
+        /**
+          * Heading size for the typography lockup (1-5, where 1 is largest)
+          * @default 1
+         */
+        "headingSize": 1 | 2 | 3 | 4 | 5;
+        /**
+          * Maximum width for the copy section (in pixels)
+         */
+        "maxWidth"?: number;
         /**
           * Minimum height
           * @default '60vh'
          */
         "minHeight": string;
         /**
-          * Hero variant
-          * @default 'dark'
+          * Text alignment for the typography lockup
+          * @default 'center'
+         */
+        "textAlignment": 'left' | 'center';
+        /**
+          * Theme - sets background color and provides theme context to children
+          * @default 'inkwell'
          */
-        "variant": 'light' | 'dark';
+        "theme": 'white' | 'inkwell' | 'mist-green' | 'soft-clay';
         /**
           * Show decorative paperclip
           * @default false
          */
         "withDecoration": boolean;
     }
+    /**
+     * Icon component that displays SVG icons from the Affinda icon library.
+     * Icons inherit color from their parent via currentColor.
+     * Icons are bundled inline, so no runtime fetching is required.
+     * This ensures icons work reliably in all bundler contexts.
+     * @example ```html
+     * <af-icon name="arrow-right" size="24"></af-icon>
+     * ```
+     */
+    interface AfIcon {
+        /**
+          * Accessible label for the icon (for screen readers)
+         */
+        "label"?: string;
+        /**
+          * The name of the icon to display
+         */
+        "name": IconName;
+        /**
+          * Size of the icon in pixels
+          * @default 24
+         */
+        "size": number;
+    }
+    /**
+     * IconBox atom - a themed container for displaying an icon with a rounded background.
+     * Inherits theme colors from parent Section via CSS custom properties:
+     * - Background uses `--af-background-contrast`
+     * - Icon color uses `--af-background-icon-default`
+     * @example ```html
+     * <af-icon-box icon="settings" size="default"></af-icon-box>
+     * ```
+     */
+    interface AfIconBox {
+        /**
+          * The name of the icon to display (from
+          * @affinda /icons)
+         */
+        "icon": IconName;
+        /**
+          * Size variant of the icon box - 'small': 48px container, 20px icon - 'default': 64px container, 40px icon - 'large': 80px container, 48px icon
+          * @default 'default'
+         */
+        "size": 'small' | 'default' | 'large';
+    }
     interface AfIconButton {
         /**
           * Accessible label for screen readers
@@ -327,883 +521,2895 @@ export namespace Components {
          */
         "type": 'button' | 'submit' | 'reset';
         /**
-          * The visual variant of the button
+          * The visual variant of the button. - `primary` - Main CTA with filled ice background - `secondary` - Supporting action with white background - `tertiary` - Minimal style with transparent background
           * @default 'primary'
          */
-        "variant": 'primary' | 'secondary' | 'outline' | 'ghost';
+        "variant": 'primary' | 'secondary' | 'tertiary';
     }
     /**
-     * Logo component with default Affinda branding
-     * Can be customized with a custom logo URL or by using the slot
+     * IconText molecule - combines an IconBox with a TypographyLockup for feature items.
+     * Composes:
+     * - af-icon-box: Themed icon container
+     * - af-typography-lockup: Heading, description, and button slots
+     * Inherits theme colors from parent Section via CSS custom properties.
+     * @example ```html
+     * <af-icon-text icon="settings" heading-size="4">
+     *   Feature Heading
+     *   <span slot="description">Feature description text.</span>
+     *   <af-button slot="buttons" variant="tertiary">Learn more</af-button>
+     * </af-icon-text>
+     * ```
      */
-    interface AfLogo {
+    interface AfIconText {
         /**
-          * Alt text for the logo
-          * @default 'Affinda'
+          * Heading size for the typography lockup (1-5, where 1 is largest)
+          * @default 4
          */
-        "alt": string;
+        "headingSize": 1 | 2 | 3 | 4 | 5;
         /**
-          * Custom logo image URL. If provided, displays this instead of the default Affinda logo
+          * The icon name to display in the IconBox
          */
-        "src"?: string;
-    }
-    /**
-     * A rounded container for displaying client logos
-     */
-    interface AfLogoWell {
+        "icon": IconName;
+        /**
+          * Size of the icon box
+          * @default 'default'
+         */
+        "iconSize": 'small' | 'default' | 'large';
+        /**
+          * Layout orientation - 'vertical': Icon above text (default, used in grid layouts) - 'horizontal': Icon beside text (used in compact layouts)
+          * @default 'vertical'
+         */
+        "orientation": 'vertical' | 'horizontal';
     }
     /**
-     * A generic navigation item component that can be used in navigation bars, menus, and sidebars.
-     * Supports multiple hierarchy levels, variants, and states (active, hover).
+     * Illustrated Card molecule component that combines a card with an illustration.
+     * Uses a theme background with text at top and an illustration from
+     * @affinda /illustrations at the bottom.
+     * Uses af-card atom internally and af-typography-lockup for text hierarchy.
      */
-    interface AfNavItem {
+    interface AfIllustratedCard {
         /**
-          * Whether this nav item is currently active/selected
-          * @default false
-         */
-        "active": boolean;
-        /**
-          * Visual hierarchy level of the navigation item - 'primary': Bold, main navigation (larger text, prominent styling) - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)
-          * @default 'primary'
+          * Responsive breakpoint for typography sizing.
+          * @default 'desktop'
          */
-        "hierarchy": 'primary' | 'secondary';
+        "breakpoint": 'desktop' | 'mobile';
         /**
-          * URL to navigate to when clicked
+          * Card size variant (applies to desktop only).
+          * @default 'default'
          */
-        "href"?: string;
+        "cardSize": 'default' | 'large';
         /**
-          * Visual variant within the hierarchy level - '01': Darker/more prominent styling - '02': Lighter/more subtle styling
-          * @default '01'
+          * Theme variant - sets background color and provides theme context. Defaults to 'mist-green'.
+          * @default 'mist-green'
          */
-        "variant": '01' | '02';
+        "theme"?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
     }
     /**
-     * A full-width navigation bar component that provides the main site navigation.
-     * Features a pill-shaped container with logo, navigation links, and action buttons.
-     * Includes mobile hamburger menu.
-     * The logo slot can be used to provide a custom logo. If no logo is provided,
-     * the default Affinda logo will be displayed.
+     * A styled image container with rounded corners and a subtle inset border.
+     * Provides consistent image styling across the design system.
      */
-    interface AfNavbar {
+    interface AfImage {
         /**
-          * Whether to show the default Affinda logo when no logo slot content is provided
-          * @default true
+          * Alternative text for the image (required for accessibility)
          */
-        "showDefaultLogo": boolean;
+        "alt": string;
+        /**
+          * The image source URL
+         */
+        "src": string;
     }
     /**
-     * Section layout component for consistent spacing and backgrounds
+     * In-page banner component for call-to-action content.
+     * A banner card with illustration, heading, description, and action buttons.
+     * Typically placed inside a neutral (white) Section to show off its themed background.
+     * The component has its own theme prop to control its background color and styling.
+     * **Illustration Usage:**
+     * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,
+     * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:
+     * ```tsx
+     * import { getIllustrationUrlByScene } from '@affinda/illustrations';
+     * <InPageBanner
+     *   theme="inkwell"
+     *   illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}
+     *   ...
+     * />
+     * ```
+     * Alternatively, use the `illustration` slot for completely custom content.
      */
-    interface AfSection {
+    interface AfInPageBanner {
         /**
-          * Background color
-          * @default 'white'
+          * Banner description
+          * @default ''
          */
-        "background": 'white' | 'level1' | 'dark' | 'inkwell';
+        "description": string;
         /**
-          * Whether to include a Container wrapper
-          * @default true
+          * Banner heading
+          * @default ''
          */
-        "container": boolean;
+        "heading": string;
         /**
-          * Padding variant
-          * @default 'default'
+          * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene()  from
+          * @affinda /illustrations in your app code.
+          * @default ''
          */
-        "padding": 'tight' | 'default' | 'loose';
-    }
-    /**
-     * Social media link component
-     * Circular bordered icon link for social media profiles
-     */
-    interface AfSocialLink {
+        "illustrationUrl": string;
         /**
-          * Link URL
-          * @default '#'
+          * Primary button text
+          * @default ''
          */
-        "href": string;
+        "primaryButtonText": string;
         /**
-          * Icon type: 'linkedin', 'youtube', 'github', 'twitter', 'facebook', or 'custom'
-          * @default 'custom'
+          * Primary button URL
+          * @default '#'
          */
-        "icon": 'linkedin' | 'youtube' | 'github' | 'twitter' | 'facebook' | 'custom';
+        "primaryButtonUrl": string;
         /**
-          * Accessible label for the link
+          * Secondary button text (optional - if empty, button won't show)
           * @default ''
          */
-        "label": string;
-    }
-    interface AfTestimonial {
+        "secondaryButtonText": string;
         /**
-          * Attribution text (e.g., "– Nathaniel Barrs, CTO, PSC Insurance")
+          * Secondary button URL
+          * @default '#'
          */
-        "attribution": string;
+        "secondaryButtonUrl": string;
         /**
-          * Background image URL for the testimonial card
+          * Whether to show the decorative wave overlay
+          * @default true
          */
-        "backgroundImage"?: string;
+        "showWaveDecoration": boolean;
         /**
-          * Company logo URL
+          * Theme - sets the banner background color and typography colors
+          * @default 'mist-green'
          */
-        "logoImage"?: string;
+        "theme": BannerTheme;
+    }
+    /**
+     * Input field component with label, description, and error states.
+     * Supports various input types and validation states.
+     */
+    interface AfInput {
         /**
-          * Testimonial quote text
+          * Autocomplete attribute for the input
          */
-        "quote": string;
+        "autocomplete"?: string;
         /**
-          * Link to full case study
+          * Whether to show a clear button when input has value
+          * @default false
          */
-        "readMoreLink"?: string;
-    }
-    interface AfTestimonialCarousel {
-    }
-    interface AfTestimonialStat {
+        "clearable": boolean;
         /**
-          * Whether to show left accent border
+          * Description text displayed below the label
+         */
+        "description"?: string;
+        /**
+          * Whether the input is disabled
           * @default false
          */
-        "accentBorder": boolean;
+        "disabled": boolean;
         /**
-          * Description text for the statistic
+          * Error message to display (also sets error state)
          */
-        "description": string;
+        "error"?: string;
         /**
-          * The statistic value (e.g., "95%", "10×", "120,000")
+          * The label text for the input field
          */
-        "value": string;
-    }
-    interface AfText {
+        "label"?: string;
         /**
-          * Visual alignment
-          * @default 'left'
+          * Maximum length of input value
          */
-        "align": 'left' | 'center' | 'right';
+        "maxlength"?: number;
         /**
-          * Semantic element to render
-          * @default 'p'
+          * Minimum length of input value
          */
-        "as": 'p' | 'span' | 'div' | 'label';
+        "minlength"?: number;
         /**
-          * Theme for dark backgrounds
-          * @default 'light'
+          * The name of the input for form submission
          */
-        "theme": 'light' | 'dark';
+        "name"?: string;
         /**
-          * Text variant
-          * @default 'medium'
+          * Pattern for input validation (regex)
          */
-        "variant": 'xlarge' | 'large' | 'medium' | 'small' | 'label-button' | 'label-tag';
-    }
-    interface AfTypographyLockup {
+        "pattern"?: string;
         /**
-          * The breakpoint for responsive typography
-          * @default 'desktop'
+          * Placeholder text for the input
          */
-        "breakpoint": 'desktop' | 'mobile';
+        "placeholder"?: string;
         /**
-          * Button alignment (horizontal or vertical stacking)
-          * @default 'vertical'
+          * Whether the input is read-only
+          * @default false
          */
-        "buttonAlignment": 'horizontal' | 'vertical';
+        "readonly": boolean;
         /**
-          * The heading size (1-5, where 1 is largest)
-          * @default 2
+          * Whether the input is required
+          * @default false
          */
-        "headingSize": 1 | 2 | 3 | 4 | 5;
+        "required": boolean;
         /**
-          * Maximum width for the copy section (in pixels)
+          * Whether to show the info icon next to the label
+          * @default false
          */
-        "maxWidth"?: number;
+        "showInfoIcon": boolean;
         /**
-          * Text alignment
-          * @default 'left'
+          * Whether to show a search icon in the input
+          * @default false
          */
-        "textAlignment": 'left' | 'center';
+        "showSearchIcon": boolean;
+        /**
+          * The input type (text, email, password, number, tel, url, search)
+          * @default 'text'
+         */
+        "type": 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+        /**
+          * The current value of the input
+          * @default ''
+         */
+        "value": string;
     }
-}
-declare global {
     /**
-     * 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.
+     * Affinda logo component
      */
-    interface HTMLAfAspectRatioElement extends Components.AfAspectRatio, HTMLStencilElement {
-    }
-    var HTMLAfAspectRatioElement: {
-        prototype: HTMLAfAspectRatioElement;
-        new (): HTMLAfAspectRatioElement;
-    };
-    interface HTMLAfButtonElement extends Components.AfButton, HTMLStencilElement {
-    }
-    var HTMLAfButtonElement: {
-        prototype: HTMLAfButtonElement;
-        new (): HTMLAfButtonElement;
-    };
-    interface HTMLAfButtonGroupElement extends Components.AfButtonGroup, HTMLStencilElement {
-    }
-    var HTMLAfButtonGroupElement: {
-        prototype: HTMLAfButtonGroupElement;
-        new (): HTMLAfButtonGroupElement;
-    };
-    interface HTMLAfCardElement extends Components.AfCard, HTMLStencilElement {
+    interface AfLogo {
     }
-    var HTMLAfCardElement: {
-        prototype: HTMLAfCardElement;
-        new (): HTMLAfCardElement;
-    };
     /**
-     * Infinite scrolling carousel for client logos
+     * A rounded container for displaying client logos
      */
-    interface HTMLAfClientCarouselElement extends Components.AfClientCarousel, HTMLStencilElement {
-    }
-    var HTMLAfClientCarouselElement: {
-        prototype: HTMLAfClientCarouselElement;
-        new (): HTMLAfClientCarouselElement;
-    };
-    interface HTMLAfColorSwatchElement extends Components.AfColorSwatch, HTMLStencilElement {
+    interface AfLogoWell {
     }
-    var HTMLAfColorSwatchElement: {
-        prototype: HTMLAfColorSwatchElement;
-        new (): HTMLAfColorSwatchElement;
-    };
     /**
-     * Contact item component for footer
-     * Displays a label and value pair (e.g., "Sales enquiries" / "contact@example.com")
+     * A navigation card component for featured article content in mega-menu dropdowns.
+     * Displays an image with a gradient overlay and headline text.
+     * **Usage:**
+     * - Place in the `sidebar` slot of NavMenuNest
+     * - Provide imageSrc, heading, and href props
+     * **Hover behavior:**
+     * - Slight scale effect (1.02)
+     * - Headline underline
      */
-    interface HTMLAfContactItemElement extends Components.AfContactItem, HTMLStencilElement {
+    interface AfNavCard {
+        /**
+          * The headline text displayed over the image
+         */
+        "heading"?: string;
+        /**
+          * URL to navigate to when clicked
+         */
+        "href"?: string;
+        /**
+          * Alternative text for the image
+          * @default ''
+         */
+        "imageAlt": string;
+        /**
+          * Image source URL for the background
+         */
+        "imageSrc"?: string;
     }
-    var HTMLAfContactItemElement: {
-        prototype: HTMLAfContactItemElement;
-        new (): HTMLAfContactItemElement;
-    };
     /**
-     * A responsive container component that provides consistent margins and max-width
-     * constraints based on the Affinda grid system.
+     * A generic navigation item component that can be used in navigation bars, menus, and sidebars.
+     * Supports multiple hierarchy levels, variants, and states (active, hover).
      */
-    interface HTMLAfContainerElement extends Components.AfContainer, HTMLStencilElement {
+    interface AfNavItem {
+        /**
+          * Whether this nav item is currently active/selected
+          * @default false
+         */
+        "active": boolean;
+        /**
+          * Breakpoint variant for responsive styling - 'desktop': Desktop-specific styles - 'mobile': Mobile-specific styles (larger text, different spacing)
+          * @default 'desktop'
+         */
+        "breakpoint": 'desktop' | 'mobile';
+        /**
+          * Visual hierarchy level of the navigation item - 'primary': Bold, main navigation (larger text, prominent styling) - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)
+          * @default 'primary'
+         */
+        "hierarchy": 'primary' | 'secondary';
+        /**
+          * URL to navigate to when clicked
+         */
+        "href"?: string;
+        /**
+          * Visual variant within the hierarchy level - '01': Darker/more prominent styling - '02': Lighter/more subtle styling
+          * @default '01'
+         */
+        "variant": '01' | '02';
     }
-    var HTMLAfContainerElement: {
-        prototype: HTMLAfContainerElement;
-        new (): HTMLAfContainerElement;
-    };
     /**
-     * Call-to-action section component with illustration and decorative background
-     * A flexible CTA section with customizable content, buttons, and optional illustration
+     * A grouped navigation menu component with a heading.
+     * Used in mega-menu dropdowns to group related navigation items.
      */
-    interface HTMLAfCtaSectionElement extends Components.AfCtaSection, HTMLStencilElement {
+    interface AfNavMenu {
+        /**
+          * Breakpoint variant for responsive styling - 'desktop': Desktop-specific styles (right border, horizontal padding) - 'mobile': Mobile-specific styles (bottom border, vertical layout)
+          * @default 'desktop'
+         */
+        "breakpoint": 'desktop' | 'mobile';
+        /**
+          * Whether to display as a card with background color and rounded corners. Used for highlighted sidebar menus (e.g., solutions-alt variant).
+          * @default false
+         */
+        "cardStyle": boolean;
+        /**
+          * The heading text displayed above the navigation items
+         */
+        "heading"?: string;
+        /**
+          * Whether to show the right border separator. When used inside NavMenuNest, borders are controlled by the parent. Set to true only when using NavMenu standalone.
+          * @default false
+         */
+        "showBorder": boolean;
     }
-    var HTMLAfCtaSectionElement: {
-        prototype: HTMLAfCtaSectionElement;
-        new (): HTMLAfCtaSectionElement;
-    };
     /**
-     * Feature accordion component with expandable items and accompanying image
-     * Used for showcasing product features with visual examples
-     * Features auto-cycling through items with a progress timer
+     * A mega-menu dropdown panel component.
+     * Acts as a container for NavMenu columns and optionally a sidebar.
+     * Used as the dropdown content for navbar items.
+     * **Slots:**
+     * - default: Place NavMenu components here - they will be displayed as columns
+     * - sidebar: Optional sidebar content (NavMenu, NavCard, or any content)
+     * **Example:**
+     * ```html
+     * <af-nav-menu-nest type="solutions" breakpoint="desktop">
+     *   <af-nav-menu heading="Industries">...</af-nav-menu>
+     *   <af-nav-menu heading="Use Cases">...</af-nav-menu>
+     *   <af-nav-menu heading="Documents">...</af-nav-menu>
+     *   <af-nav-menu slot="sidebar" heading="Resume Parser">...</af-nav-menu>
+     * </af-nav-menu-nest>
+     * ```
      */
-    interface HTMLAfFeatureAccordionElement extends Components.AfFeatureAccordion, HTMLStencilElement {
+    interface AfNavMenuNest {
+        /**
+          * Breakpoint variant for responsive styling - 'desktop': Horizontal multi-column layout - 'mobile': Vertical stacked layout
+          * @default 'desktop'
+         */
+        "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
+         */
+        "showSidebarBorder": boolean;
+        /**
+          * The type/variant of the mega-menu - 'solutions': Multi-column layout (3 columns + sidebar) - 'solutions-alt': Alternative solutions layout - 'resources': Multi-column layout with optional featured card - 'pricing': Simpler layout without sidebar
+          * @default 'solutions'
+         */
+        "type": 'solutions' | 'solutions-alt' | 'resources' | 'pricing';
     }
-    var HTMLAfFeatureAccordionElement: {
-        prototype: HTMLAfFeatureAccordionElement;
-        new (): HTMLAfFeatureAccordionElement;
-    };
     /**
-     * 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
+     * A full-width navigation bar component that provides the main site navigation.
+     * Features a pill-shaped container with logo, navigation links, and action buttons.
+     * Includes mobile hamburger menu and support for mega-menu dropdowns.
+     * The logo slot can be used to provide a custom logo. If no logo is provided,
+     * the default Affinda logo will be displayed.
      */
-    interface HTMLAfFooterElement extends Components.AfFooter, HTMLStencilElement {
+    interface AfNavbar {
+        /**
+          * Whether to show the default Affinda logo when no logo slot content is provided
+          * @default true
+         */
+        "showDefaultLogo": boolean;
+        /**
+          * Theme for the spacer background - should match the section below the navbar
+         */
+        "theme"?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay';
     }
-    var HTMLAfFooterElement: {
-        prototype: HTMLAfFooterElement;
-        new (): HTMLAfFooterElement;
-    };
     /**
-     * Footer navigation column component
-     * Used within af-footer to create navigation link groups
+     * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.
+     * Perfect for numbered lists, step indicators, or ordered content.
+     * @example ```html
+     * <af-number-badge number="1" variant="inCircle" size="48"></af-number-badge>
+     * <af-number-badge number="5" variant="outlined" size="32"></af-number-badge>
+     * ```
      */
-    interface HTMLAfFooterColumnElement extends Components.AfFooterColumn, HTMLStencilElement {
+    interface AfNumberBadge {
+        /**
+          * The number to display (1-10)
+          * @default 1
+         */
+        "number": NumberBadgeNumber;
+        /**
+          * Size of the badge in pixels
+          * @default 48
+         */
+        "size": number;
+        /**
+          * Visual variant of the badge - `inCircle` - Number in filled soft-clay circle - `outlined` - Number text only in mist-green
+          * @default 'inCircle'
+         */
+        "variant": NumberBadgeVariant;
     }
-    var HTMLAfFooterColumnElement: {
-        prototype: HTMLAfFooterColumnElement;
-        new (): HTMLAfFooterColumnElement;
-    };
     /**
-     * Footer link component
-     * Styled link for use in footer navigation columns
+     * 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.
      */
-    interface HTMLAfFooterLinkElement extends Components.AfFooterLink, HTMLStencilElement {
-    }
-    var HTMLAfFooterLinkElement: {
-        prototype: HTMLAfFooterLinkElement;
-        new (): HTMLAfFooterLinkElement;
-    };
-    interface HTMLAfHeadingElement extends Components.AfHeading, HTMLStencilElement {
+    interface AfProgressLine {
+        /**
+          * Orientation of the progress line. Currently only horizontal is supported.
+          * @default 'horizontal'
+         */
+        "orientation": 'horizontal';
+        /**
+          * Progress value from 0 to 1 (0 = 0%, 1 = 100%).
+          * @default 0
+         */
+        "progress": number;
     }
-    var HTMLAfHeadingElement: {
-        prototype: HTMLAfHeadingElement;
-        new (): HTMLAfHeadingElement;
-    };
     /**
-     * Hero section component for marketing pages
+     * Radio component for selecting a single option from a group.
      */
-    interface HTMLAfHeroSectionElement extends Components.AfHeroSection, HTMLStencilElement {
-    }
-    var HTMLAfHeroSectionElement: {
-        prototype: HTMLAfHeroSectionElement;
-        new (): HTMLAfHeroSectionElement;
-    };
-    interface HTMLAfIconButtonElement extends Components.AfIconButton, HTMLStencilElement {
+    interface AfRadio {
+        /**
+          * Whether the radio is checked
+          * @default false
+         */
+        "checked": boolean;
+        /**
+          * Whether the radio is disabled
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * The name of the radio for form submission (radios with same name are grouped)
+         */
+        "name"?: string;
+        /**
+          * The value of the radio for form submission
+         */
+        "value"?: string;
     }
-    var HTMLAfIconButtonElement: {
-        prototype: HTMLAfIconButtonElement;
-        new (): HTMLAfIconButtonElement;
-    };
     /**
-     * Logo component with default Affinda branding
-     * Can be customized with a custom logo URL or by using the slot
+     * Section layout component for consistent spacing and backgrounds.
+     * Sets theme context for all child components via CSS custom properties.
      */
-    interface HTMLAfLogoElement extends Components.AfLogo, HTMLStencilElement {
+    interface AfSection {
+        /**
+          * Whether to include a Container wrapper
+          * @default true
+         */
+        "container": boolean;
+        /**
+          * Padding variant
+          * @default 'default'
+         */
+        "padding": 'tight' | 'default' | 'loose';
+        /**
+          * Theme - sets background color and provides theme context to children
+          * @default 'white'
+         */
+        "theme": 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
     }
-    var HTMLAfLogoElement: {
-        prototype: HTMLAfLogoElement;
-        new (): HTMLAfLogoElement;
-    };
     /**
-     * A rounded container for displaying client logos
+     * Social media link component
+     * Circular bordered icon link for social media profiles
      */
-    interface HTMLAfLogoWellElement extends Components.AfLogoWell, HTMLStencilElement {
+    interface AfSocialLink {
+        /**
+          * Link URL
+          * @default '#'
+         */
+        "href": string;
+        /**
+          * Icon type: 'linkedin', 'youtube', 'github', 'twitter', 'facebook', or 'custom'
+          * @default 'custom'
+         */
+        "icon": 'linkedin' | 'youtube' | 'github' | 'twitter' | 'facebook' | 'custom';
+        /**
+          * Accessible label for the link
+          * @default ''
+         */
+        "label": string;
     }
-    var HTMLAfLogoWellElement: {
-        prototype: HTMLAfLogoWellElement;
-        new (): HTMLAfLogoWellElement;
-    };
     /**
-     * A generic navigation item component that can be used in navigation bars, menus, and sidebars.
-     * Supports multiple hierarchy levels, variants, and states (active, hover).
+     * 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.
      */
-    interface HTMLAfNavItemElement extends Components.AfNavItem, HTMLStencilElement {
+    interface AfSplitSection {
+        /**
+          * Theme for the bottom half of the section
+          * @default 'white'
+         */
+        "bottomTheme": Theme;
+        /**
+          * Whether to include a Container wrapper
+          * @default true
+         */
+        "container": boolean;
+        /**
+          * Padding variant
+          * @default 'default'
+         */
+        "padding": 'tight' | 'default' | 'loose';
+        /**
+          * Theme for the top half of the section
+          * @default 'mist-green'
+         */
+        "topTheme": Theme;
     }
-    var HTMLAfNavItemElement: {
-        prototype: HTMLAfNavItemElement;
-        new (): HTMLAfNavItemElement;
-    };
     /**
-     * A full-width navigation bar component that provides the main site navigation.
-     * Features a pill-shaped container with logo, navigation links, and action buttons.
-     * Includes mobile hamburger menu.
-     * The logo slot can be used to provide a custom logo. If no logo is provided,
-     * the default Affinda logo will be displayed.
+     * Switch component for toggling between on and off states.
      */
-    interface HTMLAfNavbarElement extends Components.AfNavbar, HTMLStencilElement {
+    interface AfSwitch {
+        /**
+          * Whether the switch is active (on)
+          * @default false
+         */
+        "active": boolean;
+        /**
+          * Whether the switch is disabled
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * The name of the switch for form submission
+         */
+        "name"?: string;
+        /**
+          * The value of the switch for form submission
+         */
+        "value"?: string;
     }
-    var HTMLAfNavbarElement: {
-        prototype: HTMLAfNavbarElement;
-        new (): HTMLAfNavbarElement;
-    };
     /**
-     * Section layout component for consistent spacing and backgrounds
+     * Tab component for use within a TabBar.
+     * Represents an individual selectable tab with support for icons and number badges.
+     * @example ```html
+     * <af-tab label="Overview" active></af-tab>
+     * <af-tab label="Details">
+     *   <af-icon slot="icon" name="document"></af-icon>
+     * </af-tab>
+     * <af-tab label="Step 1">
+     *   <af-number-badge slot="number" number="1"></af-number-badge>
+     * </af-tab>
+     * ```
      */
-    interface HTMLAfSectionElement extends Components.AfSection, HTMLStencilElement {
+    interface AfTab {
+        /**
+          * Whether the tab is currently active/selected
+          * @default false
+         */
+        "active": boolean;
+        /**
+          * Whether the tab is disabled
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Whether to show the icon slot
+          * @default false
+         */
+        "displayIcon": boolean;
+        /**
+          * Whether to show the number badge slot
+          * @default false
+         */
+        "displayNumber": boolean;
+        /**
+          * The text label for the tab
+          * @default ''
+         */
+        "label": string;
+        /**
+          * Visual shape variant - `square` - Rectangular tab with bottom border indicator - `pill` - Rounded pill shape with background for active state
+          * @default 'square'
+         */
+        "shape": TabShape;
+        /**
+          * Unique value for the tab, used for programmatic selection
+         */
+        "value"?: string;
     }
-    var HTMLAfSectionElement: {
-        prototype: HTMLAfSectionElement;
-        new (): HTMLAfSectionElement;
-    };
     /**
-     * Social media link component
-     * Circular bordered icon link for social media profiles
+     * TabBar component that contains and manages a group of tabs.
+     * Provides horizontal layout, keyboard navigation, and consistent styling.
+     * @example ```html
+     * <af-tab-bar shape="square" breakpoint="desktop">
+     *   <af-tab label="Overview" active value="overview"></af-tab>
+     *   <af-tab label="Details" value="details"></af-tab>
+     *   <af-tab label="Settings" value="settings"></af-tab>
+     * </af-tab-bar>
+     * ```
      */
-    interface HTMLAfSocialLinkElement extends Components.AfSocialLink, HTMLStencilElement {
+    interface AfTabBar {
+        /**
+          * Responsive breakpoint mode - `mobile` - Compact layout with smaller padding - `desktop` - Larger layout with more generous spacing
+          * @default 'desktop'
+         */
+        "breakpoint": TabBarBreakpoint;
+        /**
+          * Visual shape variant for all tabs - `square` - Rectangular tabs with bottom border indicator - `pill` - Rounded pill tabs with background for active state
+          * @default 'square'
+         */
+        "shape": TabBarShape;
     }
-    var HTMLAfSocialLinkElement: {
-        prototype: HTMLAfSocialLinkElement;
-        new (): HTMLAfSocialLinkElement;
-    };
-    interface HTMLAfTestimonialElement extends Components.AfTestimonial, HTMLStencilElement {
+    /**
+     * Tag displays a label in a styled container.
+     * Perfect for categorization, topics, or metadata display.
+     * @example ```html
+     * <af-tag>AI</af-tag>
+     * <af-tag size="small">Machine Learning</af-tag>
+     * <af-tag size="large" variant="light">Document Processing</af-tag>
+     * ```
+     */
+    interface AfTag {
+        /**
+          * The URL to navigate to when the tag is clicked (makes the tag a link)
+         */
+        "href"?: string;
+        /**
+          * The size of the tag - `x-small` - Compact tag with minimal padding - `small` - Small tag with moderate padding - `large` - Large tag with generous padding
+          * @default 'small'
+         */
+        "size": TagSize;
+        /**
+          * The visual variant of the tag - `sand` - Soft-clay/tan colored background (default) - `light` - Mist-green/light colored background
+          * @default 'sand'
+         */
+        "variant": TagVariant;
     }
-    var HTMLAfTestimonialElement: {
-        prototype: HTMLAfTestimonialElement;
-        new (): HTMLAfTestimonialElement;
-    };
-    interface HTMLAfTestimonialCarouselElement extends Components.AfTestimonialCarousel, HTMLStencilElement {
+    interface AfTestimonial {
+        /**
+          * Attribution text (e.g., "– Nathaniel Barrs, CTO, PSC Insurance")
+         */
+        "attribution": string;
+        /**
+          * Background image URL for the testimonial card
+         */
+        "backgroundImage"?: string;
+        /**
+          * Whether the next button is enabled
+          * @default false
+         */
+        "hasNext": boolean;
+        /**
+          * Whether the previous button is enabled
+          * @default false
+         */
+        "hasPrev": boolean;
+        /**
+          * Company logo URL
+         */
+        "logoImage"?: string;
+        /**
+          * Testimonial quote text
+         */
+        "quote": string;
+        /**
+          * Link to full case study
+         */
+        "readMoreLink"?: string;
+        /**
+          * Whether to show built-in navigation buttons (used when in a carousel)
+          * @default false
+         */
+        "showNavigation": boolean;
     }
-    var HTMLAfTestimonialCarouselElement: {
-        prototype: HTMLAfTestimonialCarouselElement;
-        new (): HTMLAfTestimonialCarouselElement;
-    };
-    interface HTMLAfTestimonialStatElement extends Components.AfTestimonialStat, HTMLStencilElement {
+    /**
+     * TestimonialCarousel - Carousel for displaying multiple customer testimonials.
+     * Handles navigation between testimonials with progress indicator.
+     * Wrap in Section/Container for proper page layout and theming.
+     */
+    interface AfTestimonialCarousel {
     }
-    var HTMLAfTestimonialStatElement: {
-        prototype: HTMLAfTestimonialStatElement;
-        new (): HTMLAfTestimonialStatElement;
-    };
-    interface HTMLAfTextElement extends Components.AfText, HTMLStencilElement {
+    interface AfTestimonialStat {
+        /**
+          * Whether to show left accent border
+          * @default false
+         */
+        "accentBorder": boolean;
+        /**
+          * Description text for the statistic
+         */
+        "description": string;
+        /**
+          * The statistic value (e.g., "95%", "10×", "120,000")
+         */
+        "value": string;
     }
-    var HTMLAfTextElement: {
-        prototype: HTMLAfTextElement;
-        new (): HTMLAfTextElement;
-    };
-    interface HTMLAfTypographyLockupElement extends Components.AfTypographyLockup, HTMLStencilElement {
+    /**
+     * Text/body component that inherits color from theme context.
+     * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+     * via CSS custom properties.
+     */
+    interface AfText {
+        /**
+          * Visual alignment
+          * @default 'left'
+         */
+        "align": 'left' | 'center' | 'right';
+        /**
+          * Semantic element to render
+          * @default 'p'
+         */
+        "as": 'p' | 'span' | 'div' | 'label';
+        /**
+          * Text variant
+          * @default 'medium'
+         */
+        "variant": 'xlarge' | 'large' | 'medium' | 'small';
     }
-    var HTMLAfTypographyLockupElement: {
-        prototype: HTMLAfTypographyLockupElement;
-        new (): HTMLAfTypographyLockupElement;
-    };
-    interface HTMLElementTagNameMap {
-        "af-aspect-ratio": HTMLAfAspectRatioElement;
-        "af-button": HTMLAfButtonElement;
-        "af-button-group": HTMLAfButtonGroupElement;
-        "af-card": HTMLAfCardElement;
-        "af-client-carousel": HTMLAfClientCarouselElement;
-        "af-color-swatch": HTMLAfColorSwatchElement;
-        "af-contact-item": HTMLAfContactItemElement;
-        "af-container": HTMLAfContainerElement;
-        "af-cta-section": HTMLAfCtaSectionElement;
-        "af-feature-accordion": HTMLAfFeatureAccordionElement;
-        "af-footer": HTMLAfFooterElement;
-        "af-footer-column": HTMLAfFooterColumnElement;
-        "af-footer-link": HTMLAfFooterLinkElement;
-        "af-heading": HTMLAfHeadingElement;
-        "af-hero-section": HTMLAfHeroSectionElement;
-        "af-icon-button": HTMLAfIconButtonElement;
-        "af-logo": HTMLAfLogoElement;
-        "af-logo-well": HTMLAfLogoWellElement;
-        "af-nav-item": HTMLAfNavItemElement;
-        "af-navbar": HTMLAfNavbarElement;
-        "af-section": HTMLAfSectionElement;
-        "af-social-link": HTMLAfSocialLinkElement;
-        "af-testimonial": HTMLAfTestimonialElement;
-        "af-testimonial-carousel": HTMLAfTestimonialCarouselElement;
-        "af-testimonial-stat": HTMLAfTestimonialStatElement;
-        "af-text": HTMLAfTextElement;
-        "af-typography-lockup": HTMLAfTypographyLockupElement;
+    /**
+     * TextImage composite component that combines typography content with an image.
+     * Supports various layout configurations with image position and proportion options.
+     */
+    interface AfTextImage {
+        /**
+          * Image alt text for accessibility
+          * @default ''
+         */
+        "alt": string;
+        /**
+          * Position of the image relative to the text content
+          * @default 'right'
+         */
+        "imagePosition": 'left' | 'right';
+        /**
+          * Proportion of the image in the layout - '1/3': Image takes 1/3 of the width (text takes 2/3) - '1/4': Image takes 1/4 of the width (text takes 3/4) - '100%': Image takes full width below text
+          * @default '1/3'
+         */
+        "imageProportion": '1/3' | '1/4' | '100%';
+        /**
+          * Whether to show a second typography lockup section
+          * @default false
+         */
+        "showSecondLockup": boolean;
+        /**
+          * Image source URL
+         */
+        "src"?: string;
     }
-}
-declare namespace LocalJSX {
     /**
-     * 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.
+     * TextImageNest is a layout component that arranges multiple text-image content pieces
+     * in various grid layouts with optional footer buttons.
+     * This component inherits theming from a parent Section or theme-providing container.
+     * Wrap it in an af-section to apply themes.
+     * Supports multiple layout variants:
+     * - `single`: Full-width single item (side-by-side image + text)
+     * - `grid-2`: 2-column grid with stacked items
+     * - `grid-3`: 3-column grid with stacked items
+     * - `grid-4`: 4-column grid with stacked items
+     * - `stacked`: Alternating rows of side-by-side content
+     */
+    interface AfTextImageNest {
+        /**
+          * Layout variant for the content grid
+          * @default 'grid-3'
+         */
+        "layout": 'single' | 'grid-2' | 'grid-3' | 'grid-4' | 'stacked';
+    }
+    /**
+     * Textarea component for multi-line text input with label, description, and error states.
+     */
+    interface AfTextarea {
+        /**
+          * Description text displayed below the label
+         */
+        "description"?: string;
+        /**
+          * Whether the textarea is disabled
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Error message to display (also sets error state)
+         */
+        "error"?: string;
+        /**
+          * The label text for the textarea
+         */
+        "label"?: string;
+        /**
+          * Maximum length of input value
+         */
+        "maxlength"?: number;
+        /**
+          * Minimum length of input value
+         */
+        "minlength"?: number;
+        /**
+          * The name of the textarea for form submission
+         */
+        "name"?: string;
+        /**
+          * Placeholder text for the textarea
+         */
+        "placeholder"?: string;
+        /**
+          * Whether the textarea is read-only
+          * @default false
+         */
+        "readonly": boolean;
+        /**
+          * Whether the textarea is required
+          * @default false
+         */
+        "required": boolean;
+        /**
+          * Whether the textarea is resizable
+          * @default 'vertical'
+         */
+        "resize": 'none' | 'vertical' | 'horizontal' | 'both';
+        /**
+          * Number of visible rows (height)
+          * @default 4
+         */
+        "rows": number;
+        /**
+          * Whether to show the info icon next to the label
+          * @default false
+         */
+        "showInfoIcon": boolean;
+        /**
+          * The current value of the textarea
+          * @default ''
+         */
+        "value": string;
+    }
+    interface AfTypographyLockup {
+        /**
+          * The breakpoint for responsive typography
+          * @default 'desktop'
+         */
+        "breakpoint": 'desktop' | 'mobile';
+        /**
+          * Button alignment (horizontal or vertical stacking)
+          * @default 'vertical'
+         */
+        "buttonAlignment": 'horizontal' | 'vertical';
+        /**
+          * The heading size (1-5, where 1 is largest)
+          * @default 2
+         */
+        "headingSize": 1 | 2 | 3 | 4 | 5;
+        /**
+          * Maximum width for the copy section (in pixels)
+         */
+        "maxWidth"?: number;
+        /**
+          * Text alignment
+          * @default 'left'
+         */
+        "textAlignment": 'left' | 'center';
+    }
+    /**
+     * Video Container molecule component for showcasing video content.
+     * Uses slots for typography lockups above and below the video.
+     * When used inside af-split-section, the top slot inherits the top theme
+     * and the bottom slot inherits the bottom theme for correct colors.
+     * @example ```html
+     * <af-split-section top-theme="mist-green" bottom-theme="white">
+     *   <af-video-container video-thumbnail-url="/path/to/thumbnail.jpg">
+     *     <af-typography-lockup slot="top" text-alignment="center" heading-size="2">
+     *       <af-heading level="2">Watch our product demo</af-heading>
+     *       <af-text slot="description">See how Affinda transforms your workflow</af-text>
+     *       <af-button slot="buttons" variant="primary">Get Started</af-button>
+     *     </af-typography-lockup>
+     *   </af-video-container>
+     * </af-split-section>
+     * ```
+     */
+    interface AfVideoContainer {
+        /**
+          * Video alt text for accessibility
+          * @default 'Video thumbnail'
+         */
+        "videoAlt": string;
+        /**
+          * Video thumbnail image URL
+          * @default ''
+         */
+        "videoThumbnailUrl": string;
+        /**
+          * Optional video URL for play button link
+          * @default ''
+         */
+        "videoUrl": string;
+    }
+}
+export interface AfCheckboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAfCheckboxElement;
+}
+export interface AfInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAfInputElement;
+}
+export interface AfRadioCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAfRadioElement;
+}
+export interface AfSwitchCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAfSwitchElement;
+}
+export interface AfTabCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAfTabElement;
+}
+export interface AfTestimonialCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAfTestimonialElement;
+}
+export interface AfTextareaCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAfTextareaElement;
+}
+export interface AfVideoContainerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAfVideoContainerElement;
+}
+declare global {
+    /**
+     * 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 HTMLAfAspectRatioElement extends Components.AfAspectRatio, HTMLStencilElement {
+    }
+    var HTMLAfAspectRatioElement: {
+        prototype: HTMLAfAspectRatioElement;
+        new (): HTMLAfAspectRatioElement;
+    };
+    /**
+     * Button component that inherits colors from theme context.
+     * Colors are determined by the parent theme (af-section, af-hero-section, etc.)
+     * via CSS custom properties.
+     */
+    interface HTMLAfButtonElement extends Components.AfButton, HTMLStencilElement {
+    }
+    var HTMLAfButtonElement: {
+        prototype: HTMLAfButtonElement;
+        new (): HTMLAfButtonElement;
+    };
+    interface HTMLAfButtonGroupElement extends Components.AfButtonGroup, HTMLStencilElement {
+    }
+    var HTMLAfButtonGroupElement: {
+        prototype: HTMLAfButtonGroupElement;
+        new (): HTMLAfButtonGroupElement;
+    };
+    /**
+     * 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.
+     */
+    interface HTMLAfCardElement extends Components.AfCard, HTMLStencilElement {
+    }
+    var HTMLAfCardElement: {
+        prototype: HTMLAfCardElement;
+        new (): HTMLAfCardElement;
+    };
+    interface HTMLAfCheckboxElementEventMap {
+        "afChange": { checked: boolean };
+    }
+    /**
+     * Checkbox component for selecting multiple options.
+     * Supports checked, unchecked, and indeterminate states.
+     */
+    interface HTMLAfCheckboxElement extends Components.AfCheckbox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAfCheckboxElementEventMap>(type: K, listener: (this: HTMLAfCheckboxElement, ev: AfCheckboxCustomEvent<HTMLAfCheckboxElementEventMap[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 HTMLAfCheckboxElementEventMap>(type: K, listener: (this: HTMLAfCheckboxElement, ev: AfCheckboxCustomEvent<HTMLAfCheckboxElementEventMap[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 HTMLAfCheckboxElement: {
+        prototype: HTMLAfCheckboxElement;
+        new (): HTMLAfCheckboxElement;
+    };
+    /**
+     * Infinite scrolling carousel for client logos.
+     * This is a section-level component that spans full width.
+     * It supports theming via the `theme` prop.
+     * For headlines, use a separate TypographyLockup or Heading component above this carousel.
+     */
+    interface HTMLAfClientCarouselElement extends Components.AfClientCarousel, HTMLStencilElement {
+    }
+    var HTMLAfClientCarouselElement: {
+        prototype: HTMLAfClientCarouselElement;
+        new (): HTMLAfClientCarouselElement;
+    };
+    interface HTMLAfColorSwatchElement extends Components.AfColorSwatch, HTMLStencilElement {
+    }
+    var HTMLAfColorSwatchElement: {
+        prototype: HTMLAfColorSwatchElement;
+        new (): HTMLAfColorSwatchElement;
+    };
+    /**
+     * Contact item component for footer
+     * Displays a label and value pair (e.g., "Sales enquiries" / "contact@example.com")
+     */
+    interface HTMLAfContactItemElement extends Components.AfContactItem, HTMLStencilElement {
+    }
+    var HTMLAfContactItemElement: {
+        prototype: HTMLAfContactItemElement;
+        new (): HTMLAfContactItemElement;
+    };
+    /**
+     * A responsive container component that provides consistent margins and max-width
+     * constraints based on the Affinda grid system.
+     */
+    interface HTMLAfContainerElement extends Components.AfContainer, HTMLStencilElement {
+    }
+    var HTMLAfContainerElement: {
+        prototype: HTMLAfContainerElement;
+        new (): HTMLAfContainerElement;
+    };
+    /**
+     * Feature accordion component with expandable items and accompanying image.
+     * Used for showcasing product features with visual examples.
+     * Features auto-cycling through items with a progress timer.
+     * **Must be wrapped in a Section component** to inherit theme styling.
+     * The component automatically adapts colors based on the parent Section's theme.
+     * @example ```tsx
+     * <Section theme="inkwell">
+     *   <FeatureAccordion heading="Features" items={...} />
+     * </Section>
+     * ```
+     */
+    interface HTMLAfFeatureAccordionElement extends Components.AfFeatureAccordion, HTMLStencilElement {
+    }
+    var HTMLAfFeatureAccordionElement: {
+        prototype: HTMLAfFeatureAccordionElement;
+        new (): HTMLAfFeatureAccordionElement;
+    };
+    /**
+     * Feature Card molecule component that combines a card with an image.
+     * Two layout modes:
+     * - `standard`: Theme background with text at top and image at bottom
+     * - `full-bleed`: Image covers entire card with text overlay at bottom
+     * Responsive: Automatically adapts to mobile viewport (≤768px).
+     * Uses af-card atom internally and af-typography-lockup for text hierarchy.
+     */
+    interface HTMLAfFeatureCardElement extends Components.AfFeatureCard, HTMLStencilElement {
+    }
+    var HTMLAfFeatureCardElement: {
+        prototype: HTMLAfFeatureCardElement;
+        new (): HTMLAfFeatureCardElement;
+    };
+    /**
+     * Feature Grid component - CSS Grid container for feature cards.
+     * Desktop: Configurable columns (1-4)
+     * Mobile: List (stacked), horizontal scroll, or 2-column grid
+     */
+    interface HTMLAfFeatureGridElement extends Components.AfFeatureGrid, HTMLStencilElement {
+    }
+    var HTMLAfFeatureGridElement: {
+        prototype: HTMLAfFeatureGridElement;
+        new (): HTMLAfFeatureGridElement;
+    };
+    /**
+     * Fieldset component for grouping related form controls.
+     * Supports vertical and horizontal layouts with an optional legend/heading.
+     */
+    interface HTMLAfFieldsetElement extends Components.AfFieldset, HTMLStencilElement {
+    }
+    var HTMLAfFieldsetElement: {
+        prototype: HTMLAfFieldsetElement;
+        new (): 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
+     */
+    interface HTMLAfFooterElement extends Components.AfFooter, HTMLStencilElement {
+    }
+    var HTMLAfFooterElement: {
+        prototype: HTMLAfFooterElement;
+        new (): HTMLAfFooterElement;
+    };
+    /**
+     * Footer navigation column component
+     * Used within af-footer to create navigation link groups
+     */
+    interface HTMLAfFooterColumnElement extends Components.AfFooterColumn, HTMLStencilElement {
+    }
+    var HTMLAfFooterColumnElement: {
+        prototype: HTMLAfFooterColumnElement;
+        new (): HTMLAfFooterColumnElement;
+    };
+    /**
+     * Footer link component
+     * Styled link for use in footer navigation columns
+     */
+    interface HTMLAfFooterLinkElement extends Components.AfFooterLink, HTMLStencilElement {
+    }
+    var HTMLAfFooterLinkElement: {
+        prototype: HTMLAfFooterLinkElement;
+        new (): HTMLAfFooterLinkElement;
+    };
+    /**
+     * GridCallout organism - a marketing section combining an optional pill-shaped image 
+     * with a grid of IconText feature items.
+     * Composes:
+     * - Pill-shaped image container (optional)
+     * - Heading via af-typography-lockup
+     * - Grid of af-icon-text items
+     * - Optional CTA button
+     * Inherits theme colors from parent af-section via CSS custom properties.
+     * @example ```html
+     * <af-section theme="mist-green">
+     *   <af-grid-callout image-src="/team.jpg" image-alt="Team photo">
+     *     Affinda blends AI and engineering
+     *     <span slot="description">Optional description text.</span>
+     *     
+     *     <af-icon-text slot="items" icon="settings">
+     *       Feature One
+     *       <span slot="description">Feature description.</span>
+     *     </af-icon-text>
+     *     
+     *     <af-button slot="cta" variant="primary">Learn more</af-button>
+     *   </af-grid-callout>
+     * </af-section>
+     * ```
+     */
+    interface HTMLAfGridCalloutElement extends Components.AfGridCallout, HTMLStencilElement {
+    }
+    var HTMLAfGridCalloutElement: {
+        prototype: HTMLAfGridCalloutElement;
+        new (): HTMLAfGridCalloutElement;
+    };
+    /**
+     * Heading component that inherits color from theme context.
+     * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+     * via CSS custom properties.
+     */
+    interface HTMLAfHeadingElement extends Components.AfHeading, HTMLStencilElement {
+    }
+    var HTMLAfHeadingElement: {
+        prototype: HTMLAfHeadingElement;
+        new (): HTMLAfHeadingElement;
+    };
+    /**
+     * Hero section component for marketing pages.
+     * Uses TypographyLockup internally to handle heading, description, and button layout.
+     * Sets theme context for all child components via CSS custom properties.
+     */
+    interface HTMLAfHeroSectionElement extends Components.AfHeroSection, HTMLStencilElement {
+    }
+    var HTMLAfHeroSectionElement: {
+        prototype: HTMLAfHeroSectionElement;
+        new (): HTMLAfHeroSectionElement;
+    };
+    /**
+     * Icon component that displays SVG icons from the Affinda icon library.
+     * Icons inherit color from their parent via currentColor.
+     * Icons are bundled inline, so no runtime fetching is required.
+     * This ensures icons work reliably in all bundler contexts.
+     * @example ```html
+     * <af-icon name="arrow-right" size="24"></af-icon>
+     * ```
+     */
+    interface HTMLAfIconElement extends Components.AfIcon, HTMLStencilElement {
+    }
+    var HTMLAfIconElement: {
+        prototype: HTMLAfIconElement;
+        new (): HTMLAfIconElement;
+    };
+    /**
+     * IconBox atom - a themed container for displaying an icon with a rounded background.
+     * Inherits theme colors from parent Section via CSS custom properties:
+     * - Background uses `--af-background-contrast`
+     * - Icon color uses `--af-background-icon-default`
+     * @example ```html
+     * <af-icon-box icon="settings" size="default"></af-icon-box>
+     * ```
+     */
+    interface HTMLAfIconBoxElement extends Components.AfIconBox, HTMLStencilElement {
+    }
+    var HTMLAfIconBoxElement: {
+        prototype: HTMLAfIconBoxElement;
+        new (): HTMLAfIconBoxElement;
+    };
+    interface HTMLAfIconButtonElement extends Components.AfIconButton, HTMLStencilElement {
+    }
+    var HTMLAfIconButtonElement: {
+        prototype: HTMLAfIconButtonElement;
+        new (): HTMLAfIconButtonElement;
+    };
+    /**
+     * IconText molecule - combines an IconBox with a TypographyLockup for feature items.
+     * Composes:
+     * - af-icon-box: Themed icon container
+     * - af-typography-lockup: Heading, description, and button slots
+     * Inherits theme colors from parent Section via CSS custom properties.
+     * @example ```html
+     * <af-icon-text icon="settings" heading-size="4">
+     *   Feature Heading
+     *   <span slot="description">Feature description text.</span>
+     *   <af-button slot="buttons" variant="tertiary">Learn more</af-button>
+     * </af-icon-text>
+     * ```
+     */
+    interface HTMLAfIconTextElement extends Components.AfIconText, HTMLStencilElement {
+    }
+    var HTMLAfIconTextElement: {
+        prototype: HTMLAfIconTextElement;
+        new (): HTMLAfIconTextElement;
+    };
+    /**
+     * Illustrated Card molecule component that combines a card with an illustration.
+     * Uses a theme background with text at top and an illustration from
+     * @affinda /illustrations at the bottom.
+     * Uses af-card atom internally and af-typography-lockup for text hierarchy.
+     */
+    interface HTMLAfIllustratedCardElement extends Components.AfIllustratedCard, HTMLStencilElement {
+    }
+    var HTMLAfIllustratedCardElement: {
+        prototype: HTMLAfIllustratedCardElement;
+        new (): HTMLAfIllustratedCardElement;
+    };
+    /**
+     * A styled image container with rounded corners and a subtle inset border.
+     * Provides consistent image styling across the design system.
+     */
+    interface HTMLAfImageElement extends Components.AfImage, HTMLStencilElement {
+    }
+    var HTMLAfImageElement: {
+        prototype: HTMLAfImageElement;
+        new (): HTMLAfImageElement;
+    };
+    /**
+     * In-page banner component for call-to-action content.
+     * A banner card with illustration, heading, description, and action buttons.
+     * Typically placed inside a neutral (white) Section to show off its themed background.
+     * The component has its own theme prop to control its background color and styling.
+     * **Illustration Usage:**
+     * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,
+     * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:
+     * ```tsx
+     * import { getIllustrationUrlByScene } from '@affinda/illustrations';
+     * <InPageBanner
+     *   theme="inkwell"
+     *   illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}
+     *   ...
+     * />
+     * ```
+     * Alternatively, use the `illustration` slot for completely custom content.
+     */
+    interface HTMLAfInPageBannerElement extends Components.AfInPageBanner, HTMLStencilElement {
+    }
+    var HTMLAfInPageBannerElement: {
+        prototype: HTMLAfInPageBannerElement;
+        new (): HTMLAfInPageBannerElement;
+    };
+    interface HTMLAfInputElementEventMap {
+        "afInput": { value: string };
+        "afBlur": void;
+        "afFocus": void;
+        "afClear": void;
+        "afInfoClick": void;
+    }
+    /**
+     * Input field component with label, description, and error states.
+     * Supports various input types and validation states.
+     */
+    interface HTMLAfInputElement extends Components.AfInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAfInputElementEventMap>(type: K, listener: (this: HTMLAfInputElement, ev: AfInputCustomEvent<HTMLAfInputElementEventMap[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 HTMLAfInputElementEventMap>(type: K, listener: (this: HTMLAfInputElement, ev: AfInputCustomEvent<HTMLAfInputElementEventMap[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 HTMLAfInputElement: {
+        prototype: HTMLAfInputElement;
+        new (): HTMLAfInputElement;
+    };
+    /**
+     * Affinda logo component
+     */
+    interface HTMLAfLogoElement extends Components.AfLogo, HTMLStencilElement {
+    }
+    var HTMLAfLogoElement: {
+        prototype: HTMLAfLogoElement;
+        new (): HTMLAfLogoElement;
+    };
+    /**
+     * A rounded container for displaying client logos
+     */
+    interface HTMLAfLogoWellElement extends Components.AfLogoWell, HTMLStencilElement {
+    }
+    var HTMLAfLogoWellElement: {
+        prototype: HTMLAfLogoWellElement;
+        new (): HTMLAfLogoWellElement;
+    };
+    /**
+     * A navigation card component for featured article content in mega-menu dropdowns.
+     * Displays an image with a gradient overlay and headline text.
+     * **Usage:**
+     * - Place in the `sidebar` slot of NavMenuNest
+     * - Provide imageSrc, heading, and href props
+     * **Hover behavior:**
+     * - Slight scale effect (1.02)
+     * - Headline underline
+     */
+    interface HTMLAfNavCardElement extends Components.AfNavCard, HTMLStencilElement {
+    }
+    var HTMLAfNavCardElement: {
+        prototype: HTMLAfNavCardElement;
+        new (): 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).
+     */
+    interface HTMLAfNavItemElement extends Components.AfNavItem, HTMLStencilElement {
+    }
+    var HTMLAfNavItemElement: {
+        prototype: HTMLAfNavItemElement;
+        new (): HTMLAfNavItemElement;
+    };
+    /**
+     * A grouped navigation menu component with a heading.
+     * Used in mega-menu dropdowns to group related navigation items.
+     */
+    interface HTMLAfNavMenuElement extends Components.AfNavMenu, HTMLStencilElement {
+    }
+    var HTMLAfNavMenuElement: {
+        prototype: HTMLAfNavMenuElement;
+        new (): HTMLAfNavMenuElement;
+    };
+    /**
+     * A mega-menu dropdown panel component.
+     * Acts as a container for NavMenu columns and optionally a sidebar.
+     * Used as the dropdown content for navbar items.
+     * **Slots:**
+     * - default: Place NavMenu components here - they will be displayed as columns
+     * - sidebar: Optional sidebar content (NavMenu, NavCard, or any content)
+     * **Example:**
+     * ```html
+     * <af-nav-menu-nest type="solutions" breakpoint="desktop">
+     *   <af-nav-menu heading="Industries">...</af-nav-menu>
+     *   <af-nav-menu heading="Use Cases">...</af-nav-menu>
+     *   <af-nav-menu heading="Documents">...</af-nav-menu>
+     *   <af-nav-menu slot="sidebar" heading="Resume Parser">...</af-nav-menu>
+     * </af-nav-menu-nest>
+     * ```
+     */
+    interface HTMLAfNavMenuNestElement extends Components.AfNavMenuNest, HTMLStencilElement {
+    }
+    var HTMLAfNavMenuNestElement: {
+        prototype: HTMLAfNavMenuNestElement;
+        new (): 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.
+     * Includes mobile hamburger menu and support for mega-menu dropdowns.
+     * The logo slot can be used to provide a custom logo. If no logo is provided,
+     * the default Affinda logo will be displayed.
+     */
+    interface HTMLAfNavbarElement extends Components.AfNavbar, HTMLStencilElement {
+    }
+    var HTMLAfNavbarElement: {
+        prototype: HTMLAfNavbarElement;
+        new (): HTMLAfNavbarElement;
+    };
+    /**
+     * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.
+     * Perfect for numbered lists, step indicators, or ordered content.
+     * @example ```html
+     * <af-number-badge number="1" variant="inCircle" size="48"></af-number-badge>
+     * <af-number-badge number="5" variant="outlined" size="32"></af-number-badge>
+     * ```
+     */
+    interface HTMLAfNumberBadgeElement extends Components.AfNumberBadge, HTMLStencilElement {
+    }
+    var HTMLAfNumberBadgeElement: {
+        prototype: HTMLAfNumberBadgeElement;
+        new (): HTMLAfNumberBadgeElement;
+    };
+    /**
+     * 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.
+     */
+    interface HTMLAfProgressLineElement extends Components.AfProgressLine, HTMLStencilElement {
+    }
+    var HTMLAfProgressLineElement: {
+        prototype: HTMLAfProgressLineElement;
+        new (): HTMLAfProgressLineElement;
+    };
+    interface HTMLAfRadioElementEventMap {
+        "afChange": { checked: boolean; value?: string };
+    }
+    /**
+     * Radio component for selecting a single option from a group.
+     */
+    interface HTMLAfRadioElement extends Components.AfRadio, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAfRadioElementEventMap>(type: K, listener: (this: HTMLAfRadioElement, ev: AfRadioCustomEvent<HTMLAfRadioElementEventMap[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 HTMLAfRadioElementEventMap>(type: K, listener: (this: HTMLAfRadioElement, ev: AfRadioCustomEvent<HTMLAfRadioElementEventMap[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 HTMLAfRadioElement: {
+        prototype: HTMLAfRadioElement;
+        new (): HTMLAfRadioElement;
+    };
+    /**
+     * Section layout component for consistent spacing and backgrounds.
+     * Sets theme context for all child components via CSS custom properties.
+     */
+    interface HTMLAfSectionElement extends Components.AfSection, HTMLStencilElement {
+    }
+    var HTMLAfSectionElement: {
+        prototype: HTMLAfSectionElement;
+        new (): HTMLAfSectionElement;
+    };
+    /**
+     * Social media link component
+     * Circular bordered icon link for social media profiles
+     */
+    interface HTMLAfSocialLinkElement extends Components.AfSocialLink, HTMLStencilElement {
+    }
+    var HTMLAfSocialLinkElement: {
+        prototype: HTMLAfSocialLinkElement;
+        new (): HTMLAfSocialLinkElement;
+    };
+    /**
+     * 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.
+     */
+    interface HTMLAfSplitSectionElement extends Components.AfSplitSection, HTMLStencilElement {
+    }
+    var HTMLAfSplitSectionElement: {
+        prototype: HTMLAfSplitSectionElement;
+        new (): HTMLAfSplitSectionElement;
+    };
+    interface HTMLAfSwitchElementEventMap {
+        "afChange": { active: boolean };
+    }
+    /**
+     * Switch component for toggling between on and off states.
+     */
+    interface HTMLAfSwitchElement extends Components.AfSwitch, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAfSwitchElementEventMap>(type: K, listener: (this: HTMLAfSwitchElement, ev: AfSwitchCustomEvent<HTMLAfSwitchElementEventMap[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 HTMLAfSwitchElementEventMap>(type: K, listener: (this: HTMLAfSwitchElement, ev: AfSwitchCustomEvent<HTMLAfSwitchElementEventMap[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 HTMLAfSwitchElement: {
+        prototype: HTMLAfSwitchElement;
+        new (): HTMLAfSwitchElement;
+    };
+    interface HTMLAfTabElementEventMap {
+        "afTabClick": { value?: string };
+    }
+    /**
+     * Tab component for use within a TabBar.
+     * Represents an individual selectable tab with support for icons and number badges.
+     * @example ```html
+     * <af-tab label="Overview" active></af-tab>
+     * <af-tab label="Details">
+     *   <af-icon slot="icon" name="document"></af-icon>
+     * </af-tab>
+     * <af-tab label="Step 1">
+     *   <af-number-badge slot="number" number="1"></af-number-badge>
+     * </af-tab>
+     * ```
+     */
+    interface HTMLAfTabElement extends Components.AfTab, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAfTabElementEventMap>(type: K, listener: (this: HTMLAfTabElement, ev: AfTabCustomEvent<HTMLAfTabElementEventMap[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 HTMLAfTabElementEventMap>(type: K, listener: (this: HTMLAfTabElement, ev: AfTabCustomEvent<HTMLAfTabElementEventMap[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 HTMLAfTabElement: {
+        prototype: HTMLAfTabElement;
+        new (): HTMLAfTabElement;
+    };
+    /**
+     * TabBar component that contains and manages a group of tabs.
+     * Provides horizontal layout, keyboard navigation, and consistent styling.
+     * @example ```html
+     * <af-tab-bar shape="square" breakpoint="desktop">
+     *   <af-tab label="Overview" active value="overview"></af-tab>
+     *   <af-tab label="Details" value="details"></af-tab>
+     *   <af-tab label="Settings" value="settings"></af-tab>
+     * </af-tab-bar>
+     * ```
+     */
+    interface HTMLAfTabBarElement extends Components.AfTabBar, HTMLStencilElement {
+    }
+    var HTMLAfTabBarElement: {
+        prototype: HTMLAfTabBarElement;
+        new (): HTMLAfTabBarElement;
+    };
+    /**
+     * Tag displays a label in a styled container.
+     * Perfect for categorization, topics, or metadata display.
+     * @example ```html
+     * <af-tag>AI</af-tag>
+     * <af-tag size="small">Machine Learning</af-tag>
+     * <af-tag size="large" variant="light">Document Processing</af-tag>
+     * ```
+     */
+    interface HTMLAfTagElement extends Components.AfTag, HTMLStencilElement {
+    }
+    var HTMLAfTagElement: {
+        prototype: HTMLAfTagElement;
+        new (): HTMLAfTagElement;
+    };
+    interface HTMLAfTestimonialElementEventMap {
+        "navPrev": void;
+        "navNext": void;
+    }
+    interface HTMLAfTestimonialElement extends Components.AfTestimonial, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAfTestimonialElementEventMap>(type: K, listener: (this: HTMLAfTestimonialElement, ev: AfTestimonialCustomEvent<HTMLAfTestimonialElementEventMap[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 HTMLAfTestimonialElementEventMap>(type: K, listener: (this: HTMLAfTestimonialElement, ev: AfTestimonialCustomEvent<HTMLAfTestimonialElementEventMap[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 HTMLAfTestimonialElement: {
+        prototype: HTMLAfTestimonialElement;
+        new (): 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.
+     */
+    interface HTMLAfTestimonialCarouselElement extends Components.AfTestimonialCarousel, HTMLStencilElement {
+    }
+    var HTMLAfTestimonialCarouselElement: {
+        prototype: HTMLAfTestimonialCarouselElement;
+        new (): HTMLAfTestimonialCarouselElement;
+    };
+    interface HTMLAfTestimonialStatElement extends Components.AfTestimonialStat, HTMLStencilElement {
+    }
+    var HTMLAfTestimonialStatElement: {
+        prototype: HTMLAfTestimonialStatElement;
+        new (): HTMLAfTestimonialStatElement;
+    };
+    /**
+     * Text/body component that inherits color from theme context.
+     * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+     * via CSS custom properties.
+     */
+    interface HTMLAfTextElement extends Components.AfText, HTMLStencilElement {
+    }
+    var HTMLAfTextElement: {
+        prototype: HTMLAfTextElement;
+        new (): HTMLAfTextElement;
+    };
+    /**
+     * TextImage composite component that combines typography content with an image.
+     * Supports various layout configurations with image position and proportion options.
+     */
+    interface HTMLAfTextImageElement extends Components.AfTextImage, HTMLStencilElement {
+    }
+    var HTMLAfTextImageElement: {
+        prototype: HTMLAfTextImageElement;
+        new (): HTMLAfTextImageElement;
+    };
+    /**
+     * TextImageNest is a layout component that arranges multiple text-image content pieces
+     * in various grid layouts with optional footer buttons.
+     * This component inherits theming from a parent Section or theme-providing container.
+     * Wrap it in an af-section to apply themes.
+     * Supports multiple layout variants:
+     * - `single`: Full-width single item (side-by-side image + text)
+     * - `grid-2`: 2-column grid with stacked items
+     * - `grid-3`: 3-column grid with stacked items
+     * - `grid-4`: 4-column grid with stacked items
+     * - `stacked`: Alternating rows of side-by-side content
+     */
+    interface HTMLAfTextImageNestElement extends Components.AfTextImageNest, HTMLStencilElement {
+    }
+    var HTMLAfTextImageNestElement: {
+        prototype: HTMLAfTextImageNestElement;
+        new (): HTMLAfTextImageNestElement;
+    };
+    interface HTMLAfTextareaElementEventMap {
+        "afInput": { value: string };
+        "afBlur": void;
+        "afFocus": void;
+        "afInfoClick": void;
+    }
+    /**
+     * Textarea component for multi-line text input with label, description, and error states.
+     */
+    interface HTMLAfTextareaElement extends Components.AfTextarea, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAfTextareaElementEventMap>(type: K, listener: (this: HTMLAfTextareaElement, ev: AfTextareaCustomEvent<HTMLAfTextareaElementEventMap[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 HTMLAfTextareaElementEventMap>(type: K, listener: (this: HTMLAfTextareaElement, ev: AfTextareaCustomEvent<HTMLAfTextareaElementEventMap[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 HTMLAfTextareaElement: {
+        prototype: HTMLAfTextareaElement;
+        new (): HTMLAfTextareaElement;
+    };
+    interface HTMLAfTypographyLockupElement extends Components.AfTypographyLockup, HTMLStencilElement {
+    }
+    var HTMLAfTypographyLockupElement: {
+        prototype: HTMLAfTypographyLockupElement;
+        new (): HTMLAfTypographyLockupElement;
+    };
+    interface HTMLAfVideoContainerElementEventMap {
+        "playClick": { videoUrl: string };
+    }
+    /**
+     * Video Container molecule component for showcasing video content.
+     * Uses slots for typography lockups above and below the video.
+     * When used inside af-split-section, the top slot inherits the top theme
+     * and the bottom slot inherits the bottom theme for correct colors.
+     * @example ```html
+     * <af-split-section top-theme="mist-green" bottom-theme="white">
+     *   <af-video-container video-thumbnail-url="/path/to/thumbnail.jpg">
+     *     <af-typography-lockup slot="top" text-alignment="center" heading-size="2">
+     *       <af-heading level="2">Watch our product demo</af-heading>
+     *       <af-text slot="description">See how Affinda transforms your workflow</af-text>
+     *       <af-button slot="buttons" variant="primary">Get Started</af-button>
+     *     </af-typography-lockup>
+     *   </af-video-container>
+     * </af-split-section>
+     * ```
+     */
+    interface HTMLAfVideoContainerElement extends Components.AfVideoContainer, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAfVideoContainerElementEventMap>(type: K, listener: (this: HTMLAfVideoContainerElement, ev: AfVideoContainerCustomEvent<HTMLAfVideoContainerElementEventMap[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 HTMLAfVideoContainerElementEventMap>(type: K, listener: (this: HTMLAfVideoContainerElement, ev: AfVideoContainerCustomEvent<HTMLAfVideoContainerElementEventMap[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 HTMLAfVideoContainerElement: {
+        prototype: HTMLAfVideoContainerElement;
+        new (): HTMLAfVideoContainerElement;
+    };
+    interface HTMLElementTagNameMap {
+        "af-aspect-ratio": HTMLAfAspectRatioElement;
+        "af-button": HTMLAfButtonElement;
+        "af-button-group": HTMLAfButtonGroupElement;
+        "af-card": HTMLAfCardElement;
+        "af-checkbox": HTMLAfCheckboxElement;
+        "af-client-carousel": HTMLAfClientCarouselElement;
+        "af-color-swatch": HTMLAfColorSwatchElement;
+        "af-contact-item": HTMLAfContactItemElement;
+        "af-container": HTMLAfContainerElement;
+        "af-feature-accordion": HTMLAfFeatureAccordionElement;
+        "af-feature-card": HTMLAfFeatureCardElement;
+        "af-feature-grid": HTMLAfFeatureGridElement;
+        "af-fieldset": HTMLAfFieldsetElement;
+        "af-footer": HTMLAfFooterElement;
+        "af-footer-column": HTMLAfFooterColumnElement;
+        "af-footer-link": HTMLAfFooterLinkElement;
+        "af-grid-callout": HTMLAfGridCalloutElement;
+        "af-heading": HTMLAfHeadingElement;
+        "af-hero-section": HTMLAfHeroSectionElement;
+        "af-icon": HTMLAfIconElement;
+        "af-icon-box": HTMLAfIconBoxElement;
+        "af-icon-button": HTMLAfIconButtonElement;
+        "af-icon-text": HTMLAfIconTextElement;
+        "af-illustrated-card": HTMLAfIllustratedCardElement;
+        "af-image": HTMLAfImageElement;
+        "af-in-page-banner": HTMLAfInPageBannerElement;
+        "af-input": HTMLAfInputElement;
+        "af-logo": HTMLAfLogoElement;
+        "af-logo-well": HTMLAfLogoWellElement;
+        "af-nav-card": HTMLAfNavCardElement;
+        "af-nav-item": HTMLAfNavItemElement;
+        "af-nav-menu": HTMLAfNavMenuElement;
+        "af-nav-menu-nest": HTMLAfNavMenuNestElement;
+        "af-navbar": HTMLAfNavbarElement;
+        "af-number-badge": HTMLAfNumberBadgeElement;
+        "af-progress-line": HTMLAfProgressLineElement;
+        "af-radio": HTMLAfRadioElement;
+        "af-section": HTMLAfSectionElement;
+        "af-social-link": HTMLAfSocialLinkElement;
+        "af-split-section": HTMLAfSplitSectionElement;
+        "af-switch": HTMLAfSwitchElement;
+        "af-tab": HTMLAfTabElement;
+        "af-tab-bar": HTMLAfTabBarElement;
+        "af-tag": HTMLAfTagElement;
+        "af-testimonial": HTMLAfTestimonialElement;
+        "af-testimonial-carousel": HTMLAfTestimonialCarouselElement;
+        "af-testimonial-stat": HTMLAfTestimonialStatElement;
+        "af-text": HTMLAfTextElement;
+        "af-text-image": HTMLAfTextImageElement;
+        "af-text-image-nest": HTMLAfTextImageNestElement;
+        "af-textarea": HTMLAfTextareaElement;
+        "af-typography-lockup": HTMLAfTypographyLockupElement;
+        "af-video-container": HTMLAfVideoContainerElement;
+    }
+}
+declare namespace LocalJSX {
+    /**
+     * 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;
+    }
+    /**
+     * Button component that inherits colors from theme context.
+     * Colors are determined by the parent theme (af-section, af-hero-section, 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 - `small` - Compact size for inline or secondary contexts
+          * @default 'default'
+         */
+        "size"?: 'default' | 'small';
+        /**
+          * 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 - `tertiary` - Subtle text-link style with underline
+          * @default 'primary'
+         */
+        "variant"?: 'primary' | 'secondary' | 'tertiary';
+    }
+    interface AfButtonGroup {
+        /**
+          * Layout direction of the button group
+          * @default 'horizontal'
+         */
+        "direction"?: 'horizontal' | 'vertical';
+        /**
+          * Gap between buttons
+          * @default '8px'
+         */
+        "gap"?: string;
+    }
+    /**
+     * 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.
+     */
+    interface AfCard {
+        /**
+          * When true, the card stretches to fill its container height. Use this when the card is in a flex/grid container and needs to participate in equal-height layouts. The card's content will use flexbox to distribute space between children.
+          * @default false
+         */
+        "stretch"?: boolean;
+        /**
+          * Theme - sets background color and provides theme context to children. Defaults to 'mist-green' if not specified.
+          * @default 'mist-green'
+         */
+        "theme"?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
+    }
+    /**
+     * Checkbox component for selecting multiple options.
+     * Supports checked, unchecked, and indeterminate states.
+     */
+    interface AfCheckbox {
+        /**
+          * Whether the checkbox is checked
+          * @default false
+         */
+        "checked"?: boolean;
+        /**
+          * Whether the checkbox is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Whether the checkbox is in an indeterminate state
+          * @default false
+         */
+        "indeterminate"?: boolean;
+        /**
+          * The name of the checkbox for form submission
+         */
+        "name"?: string;
+        /**
+          * Emitted when the checkbox checked state changes
+         */
+        "onAfChange"?: (event: AfCheckboxCustomEvent<{ checked: boolean }>) => void;
+        /**
+          * The value of the checkbox for form submission
+         */
+        "value"?: string;
+    }
+    /**
+     * Infinite scrolling carousel for client logos.
+     * This is a section-level component that spans full width.
+     * It supports theming via the `theme` prop.
+     * For headlines, use a separate TypographyLockup or Heading component above this carousel.
+     */
+    interface AfClientCarousel {
+        /**
+          * Theme - sets background color and provides theme context to children
+          * @default 'inkwell'
+         */
+        "theme"?: Theme;
+    }
+    interface AfColorSwatch {
+        /**
+          * Color value (hex)
+         */
+        "color": string;
+        /**
+          * Color name
+         */
+        "name": string;
+        /**
+          * Size variant
+          * @default 'default'
+         */
+        "size"?: 'default' | 'large';
+    }
+    /**
+     * Contact item component for footer
+     * Displays a label and value pair (e.g., "Sales enquiries" / "contact@example.com")
+     */
+    interface AfContactItem {
+        /**
+          * Contact label (e.g., "Sales enquiries")
+          * @default ''
+         */
+        "label"?: string;
+        /**
+          * Contact value (e.g., email address)
+          * @default ''
+         */
+        "value"?: string;
+    }
+    /**
+     * A responsive container component that provides consistent margins and max-width
+     * constraints based on the Affinda grid system.
+     */
+    interface AfContainer {
+        /**
+          * Maximum width constraint for the container - 'xlarge': 1440px container (default) - 'large': 1024px container - 'medium': 768px container - 'fluid': No max-width constraint, full width with margins
+          * @default 'xlarge'
+         */
+        "maxWidth"?: 'xlarge' | 'large' | 'medium' | 'fluid';
+    }
+    /**
+     * Feature accordion component with expandable items and accompanying image.
+     * Used for showcasing product features with visual examples.
+     * Features auto-cycling through items with a progress timer.
+     * **Must be wrapped in a Section component** to inherit theme styling.
+     * The component automatically adapts colors based on the parent Section's theme.
+     * @example ```tsx
+     * <Section theme="inkwell">
+     *   <FeatureAccordion heading="Features" items={...} />
+     * </Section>
+     * ```
+     */
+    interface AfFeatureAccordion {
+        /**
+          * Whether auto-cycling is enabled
+          * @default true
+         */
+        "autoCycle"?: boolean;
+        /**
+          * Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds)
+          * @default 6000
+         */
+        "cycleInterval"?: number;
+        /**
+          * Section heading
+          * @default 'Give AI agents your paperwork'
+         */
+        "heading"?: string;
+        /**
+          * JSON string of accordion items
+          * @default '[]'
+         */
+        "items"?: string;
+    }
+    /**
+     * Feature Card molecule component that combines a card with an image.
+     * Two layout modes:
+     * - `standard`: Theme background with text at top and image at bottom
+     * - `full-bleed`: Image covers entire card with text overlay at bottom
+     * Responsive: Automatically adapts to mobile viewport (≤768px).
+     * Uses af-card atom internally and af-typography-lockup for text hierarchy.
+     */
+    interface AfFeatureCard {
+        /**
+          * Card size variant. - 'default': Fixed 544px × 420px - 'large': Fixed 777px × 480px   - 'flexible': Fills container (for grid layouts)
+          * @default 'default'
+         */
+        "cardSize"?: 'default' | 'large' | 'flexible';
+        /**
+          * Heading size for typography lockup (1-5, where 1 is largest).
+          * @default 3
+         */
+        "headingSize"?: 1 | 2 | 3 | 4 | 5;
+        /**
+          * Image alt text for accessibility. Provide meaningful alt text for feature images. Only use empty string for purely decorative images.
+          * @default ''
+         */
+        "imageAlt"?: string;
+        /**
+          * Background/feature image URL.
+         */
+        "imageSrc"?: string;
+        /**
+          * Layout mode for the card. - 'standard': Theme background with text at top and image at bottom - 'full-bleed': Image covers entire card with text overlay at bottom
+          * @default 'standard'
+         */
+        "layout"?: 'standard' | 'full-bleed';
+        /**
+          * Theme variant - sets background color and provides theme context. Only applies to 'standard' layout mode. Defaults to 'mist-green'.
+          * @default 'mist-green'
+         */
+        "theme"?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
+    }
+    /**
+     * Feature Grid component - CSS Grid container for feature cards.
+     * Desktop: Configurable columns (1-4)
+     * Mobile: List (stacked), horizontal scroll, or 2-column grid
+     */
+    interface AfFeatureGrid {
+        /**
+          * Number of columns on desktop (1-4).
+          * @default 4
+         */
+        "columns"?: 1 | 2 | 3 | 4;
+        /**
+          * Mobile layout behavior. - 'list': Vertical stack (1 column) - 'scroll': Horizontal scroll with progress indicator - 'grid': Maintain 2-column grid on mobile
+          * @default 'list'
+         */
+        "mobileLayout"?: 'list' | 'scroll' | 'grid';
+    }
+    /**
+     * Fieldset component for grouping related form controls.
+     * Supports vertical and horizontal layouts with an optional legend/heading.
+     */
+    interface AfFieldset {
+        /**
+          * Whether the fieldset is disabled (disables all child controls)
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * The legend/heading text for the fieldset
+         */
+        "legend"?: string;
+        /**
+          * The layout orientation of the fieldset items - `vertical` - Items stack vertically (default) - `horizontal` - Items are laid out horizontally
+          * @default 'vertical'
+         */
+        "orientation"?: 'vertical' | 'horizontal';
+    }
+    /**
+     * 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
+     */
+    interface AfFooter {
+        /**
+          * Copyright text (e.g., "© 2025 Company Name. All rights reserved.")
+          * @default ''
+         */
+        "copyrightText"?: string;
+        /**
+          * Whether to show the status indicator
+          * @default true
+         */
+        "showStatus"?: boolean;
+        /**
+          * Status message text
+          * @default ''
+         */
+        "statusText"?: string;
+        /**
+          * Status page URL
+          * @default ''
+         */
+        "statusUrl"?: string;
+        /**
+          * Whether systems are operational (shows green/red indicator)
+          * @default true
+         */
+        "systemsOperational"?: boolean;
+    }
+    /**
+     * Footer navigation column component
+     * Used within af-footer to create navigation link groups
+     */
+    interface AfFooterColumn {
+        /**
+          * Column heading
+          * @default ''
+         */
+        "heading"?: string;
+    }
+    /**
+     * Footer link component
+     * Styled link for use in footer navigation columns
+     */
+    interface AfFooterLink {
+        /**
+          * Whether this is an external link (opens in new tab)
+          * @default false
+         */
+        "external"?: boolean;
+        /**
+          * Link URL
+          * @default '#'
+         */
+        "href"?: string;
+    }
+    /**
+     * GridCallout organism - a marketing section combining an optional pill-shaped image 
+     * with a grid of IconText feature items.
+     * Composes:
+     * - Pill-shaped image container (optional)
+     * - Heading via af-typography-lockup
+     * - Grid of af-icon-text items
+     * - Optional CTA button
+     * Inherits theme colors from parent af-section via CSS custom properties.
+     * @example ```html
+     * <af-section theme="mist-green">
+     *   <af-grid-callout image-src="/team.jpg" image-alt="Team photo">
+     *     Affinda blends AI and engineering
+     *     <span slot="description">Optional description text.</span>
+     *     
+     *     <af-icon-text slot="items" icon="settings">
+     *       Feature One
+     *       <span slot="description">Feature description.</span>
+     *     </af-icon-text>
+     *     
+     *     <af-button slot="cta" variant="primary">Learn more</af-button>
+     *   </af-grid-callout>
+     * </af-section>
+     * ```
+     */
+    interface AfGridCallout {
+        /**
+          * Number of columns for the IconText grid on desktop
+          * @default 2
+         */
+        "columns"?: 2 | 3 | 4;
+        /**
+          * Heading size for the main title
+          * @default 2
+         */
+        "headingSize"?: 1 | 2 | 3 | 4 | 5;
+        /**
+          * Alt text for the image (required for accessibility when imageSrc is provided)
+          * @default ''
+         */
+        "imageAlt"?: string;
+        /**
+          * Position of the image relative to the content
+          * @default 'left'
+         */
+        "imagePosition"?: 'left' | 'right';
+        /**
+          * Image source URL for the pill-shaped image
+         */
+        "imageSrc"?: string;
+    }
+    /**
+     * Heading component that inherits color from theme context.
+     * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+     * via CSS custom properties.
+     */
+    interface AfHeading {
+        /**
+          * Visual alignment
+          * @default 'left'
+         */
+        "align"?: 'left' | 'center' | 'right';
+        /**
+          * Heading level
+          * @default '1'
+         */
+        "level"?: 'xl' | '1' | '2' | '3' | '4' | '5';
+    }
+    /**
+     * Hero section component for marketing pages.
+     * Uses TypographyLockup internally to handle heading, description, and button layout.
+     * Sets theme context for all child components via CSS custom properties.
+     */
+    interface AfHeroSection {
+        /**
+          * Button alignment - horizontal places buttons inline, vertical stacks them
+          * @default 'horizontal'
+         */
+        "buttonAlignment"?: 'horizontal' | 'vertical';
+        /**
+          * Heading size for the typography lockup (1-5, where 1 is largest)
+          * @default 1
+         */
+        "headingSize"?: 1 | 2 | 3 | 4 | 5;
+        /**
+          * Maximum width for the copy section (in pixels)
+         */
+        "maxWidth"?: number;
+        /**
+          * Minimum height
+          * @default '60vh'
+         */
+        "minHeight"?: string;
+        /**
+          * Text alignment for the typography lockup
+          * @default 'center'
+         */
+        "textAlignment"?: 'left' | 'center';
+        /**
+          * Theme - sets background color and provides theme context to children
+          * @default 'inkwell'
+         */
+        "theme"?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay';
+        /**
+          * Show decorative paperclip
+          * @default false
+         */
+        "withDecoration"?: boolean;
+    }
+    /**
+     * Icon component that displays SVG icons from the Affinda icon library.
+     * Icons inherit color from their parent via currentColor.
+     * Icons are bundled inline, so no runtime fetching is required.
+     * This ensures icons work reliably in all bundler contexts.
+     * @example ```html
+     * <af-icon name="arrow-right" size="24"></af-icon>
+     * ```
+     */
+    interface AfIcon {
+        /**
+          * Accessible label for the icon (for screen readers)
+         */
+        "label"?: string;
+        /**
+          * The name of the icon to display
+         */
+        "name": IconName;
+        /**
+          * Size of the icon in pixels
+          * @default 24
+         */
+        "size"?: number;
+    }
+    /**
+     * IconBox atom - a themed container for displaying an icon with a rounded background.
+     * Inherits theme colors from parent Section via CSS custom properties:
+     * - Background uses `--af-background-contrast`
+     * - Icon color uses `--af-background-icon-default`
+     * @example ```html
+     * <af-icon-box icon="settings" size="default"></af-icon-box>
+     * ```
+     */
+    interface AfIconBox {
+        /**
+          * The name of the icon to display (from
+          * @affinda /icons)
+         */
+        "icon": IconName;
+        /**
+          * Size variant of the icon box - 'small': 48px container, 20px icon - 'default': 64px container, 40px icon - 'large': 80px container, 48px icon
+          * @default 'default'
+         */
+        "size"?: 'small' | 'default' | 'large';
+    }
+    interface AfIconButton {
+        /**
+          * Accessible label for screen readers
+         */
+        "ariaLabel": string;
+        /**
+          * Whether the button is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Optional href to render as a link
+         */
+        "href"?: string;
+        /**
+          * The size of the button
+          * @default 'medium'
+         */
+        "size"?: 'large' | 'medium' | 'small';
+        /**
+          * Button type (when not using href)
+          * @default 'button'
+         */
+        "type"?: 'button' | 'submit' | 'reset';
+        /**
+          * The visual variant of the button. - `primary` - Main CTA with filled ice background - `secondary` - Supporting action with white background - `tertiary` - Minimal style with transparent background
+          * @default 'primary'
+         */
+        "variant"?: 'primary' | 'secondary' | 'tertiary';
+    }
+    /**
+     * IconText molecule - combines an IconBox with a TypographyLockup for feature items.
+     * Composes:
+     * - af-icon-box: Themed icon container
+     * - af-typography-lockup: Heading, description, and button slots
+     * Inherits theme colors from parent Section via CSS custom properties.
+     * @example ```html
+     * <af-icon-text icon="settings" heading-size="4">
+     *   Feature Heading
+     *   <span slot="description">Feature description text.</span>
+     *   <af-button slot="buttons" variant="tertiary">Learn more</af-button>
+     * </af-icon-text>
+     * ```
+     */
+    interface AfIconText {
+        /**
+          * Heading size for the typography lockup (1-5, where 1 is largest)
+          * @default 4
+         */
+        "headingSize"?: 1 | 2 | 3 | 4 | 5;
+        /**
+          * The icon name to display in the IconBox
+         */
+        "icon": IconName;
+        /**
+          * Size of the icon box
+          * @default 'default'
+         */
+        "iconSize"?: 'small' | 'default' | 'large';
+        /**
+          * Layout orientation - 'vertical': Icon above text (default, used in grid layouts) - 'horizontal': Icon beside text (used in compact layouts)
+          * @default 'vertical'
+         */
+        "orientation"?: 'vertical' | 'horizontal';
+    }
+    /**
+     * Illustrated Card molecule component that combines a card with an illustration.
+     * Uses a theme background with text at top and an illustration from
+     * @affinda /illustrations at the bottom.
+     * Uses af-card atom internally and af-typography-lockup for text hierarchy.
+     */
+    interface AfIllustratedCard {
+        /**
+          * Responsive breakpoint for typography sizing.
+          * @default 'desktop'
+         */
+        "breakpoint"?: 'desktop' | 'mobile';
+        /**
+          * Card size variant (applies to desktop only).
+          * @default 'default'
+         */
+        "cardSize"?: 'default' | 'large';
+        /**
+          * Theme variant - sets background color and provides theme context. Defaults to 'mist-green'.
+          * @default 'mist-green'
+         */
+        "theme"?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
+    }
+    /**
+     * A styled image container with rounded corners and a subtle inset border.
+     * Provides consistent image styling across the design system.
+     */
+    interface AfImage {
+        /**
+          * Alternative text for the image (required for accessibility)
+         */
+        "alt": string;
+        /**
+          * The image source URL
+         */
+        "src": string;
+    }
+    /**
+     * In-page banner component for call-to-action content.
+     * A banner card with illustration, heading, description, and action buttons.
+     * Typically placed inside a neutral (white) Section to show off its themed background.
+     * The component has its own theme prop to control its background color and styling.
+     * **Illustration Usage:**
+     * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,
+     * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:
+     * ```tsx
+     * import { getIllustrationUrlByScene } from '@affinda/illustrations';
+     * <InPageBanner
+     *   theme="inkwell"
+     *   illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}
+     *   ...
+     * />
+     * ```
+     * Alternatively, use the `illustration` slot for completely custom content.
+     */
+    interface AfInPageBanner {
+        /**
+          * Banner description
+          * @default ''
+         */
+        "description"?: string;
+        /**
+          * Banner heading
+          * @default ''
+         */
+        "heading"?: string;
+        /**
+          * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene()  from
+          * @affinda /illustrations in your app code.
+          * @default ''
+         */
+        "illustrationUrl"?: string;
+        /**
+          * Primary button text
+          * @default ''
+         */
+        "primaryButtonText"?: string;
+        /**
+          * Primary button URL
+          * @default '#'
+         */
+        "primaryButtonUrl"?: string;
+        /**
+          * Secondary button text (optional - if empty, button won't show)
+          * @default ''
+         */
+        "secondaryButtonText"?: string;
+        /**
+          * Secondary button URL
+          * @default '#'
+         */
+        "secondaryButtonUrl"?: string;
+        /**
+          * Whether to show the decorative wave overlay
+          * @default true
+         */
+        "showWaveDecoration"?: boolean;
+        /**
+          * Theme - sets the banner background color and typography colors
+          * @default 'mist-green'
+         */
+        "theme"?: BannerTheme;
+    }
+    /**
+     * Input field component with label, description, and error states.
+     * Supports various input types and validation states.
      */
-    interface AfAspectRatio {
+    interface AfInput {
         /**
-          * 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'
+          * Autocomplete attribute for the input
          */
-        "ratio"?: string;
-    }
-    interface AfButton {
+        "autocomplete"?: string;
         /**
-          * Use on dark backgrounds for better contrast
+          * Whether to show a clear button when input has value
           * @default false
          */
-        "darkBackground"?: boolean;
+        "clearable"?: boolean;
         /**
-          * Whether the button is disabled
+          * Description text displayed below the label
+         */
+        "description"?: string;
+        /**
+          * Whether the input is disabled
           * @default false
          */
         "disabled"?: boolean;
         /**
-          * Optional href to render as a link
+          * Error message to display (also sets error state)
          */
-        "href"?: string;
+        "error"?: string;
         /**
-          * The size of the button
-          * @default 'default'
+          * The label text for the input field
          */
-        "size"?: 'default' | 'small';
+        "label"?: string;
         /**
-          * Button type (when not using href)
-          * @default 'button'
+          * Maximum length of input value
          */
-        "type"?: 'button' | 'submit' | 'reset';
+        "maxlength"?: number;
         /**
-          * The visual variant of the button
-          * @default 'primary'
+          * Minimum length of input value
          */
-        "variant"?: 'primary' | 'secondary' | 'outline' | 'ghost';
-    }
-    interface AfButtonGroup {
+        "minlength"?: number;
         /**
-          * Layout direction of the button group
-          * @default 'horizontal'
+          * The name of the input for form submission
          */
-        "direction"?: 'horizontal' | 'vertical';
+        "name"?: string;
         /**
-          * Gap between buttons
-          * @default '8px'
+          * Emitted when the input loses focus
          */
-        "gap"?: string;
-    }
-    interface AfCard {
+        "onAfBlur"?: (event: AfInputCustomEvent<void>) => void;
         /**
-          * Background color for the card (CSS color value)
+          * Emitted when the clear button is clicked
          */
-        "backgroundColor"?: string;
+        "onAfClear"?: (event: AfInputCustomEvent<void>) => void;
         /**
-          * Background image URL for the card
+          * Emitted when the input gains focus
          */
-        "backgroundImage"?: string;
+        "onAfFocus"?: (event: AfInputCustomEvent<void>) => void;
         /**
-          * Whether to apply a dark gradient overlay (for cards with background images)
-          * @default false
+          * Emitted when the info icon is clicked
          */
-        "darkOverlay"?: boolean;
-    }
-    /**
-     * Infinite scrolling carousel for client logos
-     */
-    interface AfClientCarousel {
+        "onAfInfoClick"?: (event: AfInputCustomEvent<void>) => void;
+        /**
+          * Emitted when the input value changes
+         */
+        "onAfInput"?: (event: AfInputCustomEvent<{ value: string }>) => void;
         /**
-          * Headline text
-          * @default "Trusted by some of the world's leading organisations"
+          * Pattern for input validation (regex)
          */
-        "headlineText"?: string;
+        "pattern"?: string;
         /**
-          * Show headline above carousel
+          * Placeholder text for the input
+         */
+        "placeholder"?: string;
+        /**
+          * Whether the input is read-only
           * @default false
          */
-        "showHeadline"?: boolean;
-    }
-    interface AfColorSwatch {
+        "readonly"?: boolean;
         /**
-          * Color value (hex)
+          * Whether the input is required
+          * @default false
          */
-        "color": string;
+        "required"?: boolean;
         /**
-          * Color name
+          * Whether to show the info icon next to the label
+          * @default false
          */
-        "name": string;
+        "showInfoIcon"?: boolean;
         /**
-          * Size variant
-          * @default 'default'
+          * Whether to show a search icon in the input
+          * @default false
          */
-        "size"?: 'default' | 'large';
-    }
-    /**
-     * Contact item component for footer
-     * Displays a label and value pair (e.g., "Sales enquiries" / "contact@example.com")
-     */
-    interface AfContactItem {
+        "showSearchIcon"?: boolean;
         /**
-          * Contact label (e.g., "Sales enquiries")
-          * @default ''
+          * The input type (text, email, password, number, tel, url, search)
+          * @default 'text'
          */
-        "label"?: string;
+        "type"?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
         /**
-          * Contact value (e.g., email address)
+          * The current value of the input
           * @default ''
          */
         "value"?: string;
     }
     /**
-     * A responsive container component that provides consistent margins and max-width
-     * constraints based on the Affinda grid system.
+     * Affinda logo component
      */
-    interface AfContainer {
-        /**
-          * Maximum width constraint for the container - 'xlarge': 1440px container (default) - 'large': 1024px container - 'medium': 768px container - 'fluid': No max-width constraint, full width with margins
-          * @default 'xlarge'
-         */
-        "maxWidth"?: 'xlarge' | 'large' | 'medium' | 'fluid';
+    interface AfLogo {
+    }
+    /**
+     * A rounded container for displaying client logos
+     */
+    interface AfLogoWell {
     }
     /**
-     * Call-to-action section component with illustration and decorative background
-     * A flexible CTA section with customizable content, buttons, and optional illustration
+     * A navigation card component for featured article content in mega-menu dropdowns.
+     * Displays an image with a gradient overlay and headline text.
+     * **Usage:**
+     * - Place in the `sidebar` slot of NavMenuNest
+     * - Provide imageSrc, heading, and href props
+     * **Hover behavior:**
+     * - Slight scale effect (1.02)
+     * - Headline underline
      */
-    interface AfCtaSection {
+    interface AfNavCard {
         /**
-          * Section description
-          * @default ''
+          * The headline text displayed over the image
          */
-        "description"?: string;
+        "heading"?: string;
         /**
-          * Section heading
-          * @default ''
+          * URL to navigate to when clicked
          */
-        "heading"?: string;
+        "href"?: string;
         /**
-          * Illustration URL - if provided, displays this image
+          * Alternative text for the image
           * @default ''
          */
-        "illustrationUrl"?: string;
+        "imageAlt"?: string;
         /**
-          * Primary button text
-          * @default ''
+          * Image source URL for the background
          */
-        "primaryButtonText"?: string;
+        "imageSrc"?: string;
+    }
+    /**
+     * A generic navigation item component that can be used in navigation bars, menus, and sidebars.
+     * Supports multiple hierarchy levels, variants, and states (active, hover).
+     */
+    interface AfNavItem {
         /**
-          * Primary button URL
-          * @default '#'
+          * Whether this nav item is currently active/selected
+          * @default false
          */
-        "primaryButtonUrl"?: string;
+        "active"?: boolean;
         /**
-          * Secondary button text (optional - if empty, button won't show)
-          * @default ''
+          * Breakpoint variant for responsive styling - 'desktop': Desktop-specific styles - 'mobile': Mobile-specific styles (larger text, different spacing)
+          * @default 'desktop'
          */
-        "secondaryButtonText"?: string;
+        "breakpoint"?: 'desktop' | 'mobile';
         /**
-          * Secondary button URL
-          * @default '#'
+          * Visual hierarchy level of the navigation item - 'primary': Bold, main navigation (larger text, prominent styling) - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)
+          * @default 'primary'
          */
-        "secondaryButtonUrl"?: string;
+        "hierarchy"?: 'primary' | 'secondary';
         /**
-          * Whether to show the decorative wave background
-          * @default true
+          * URL to navigate to when clicked
          */
-        "showWaveDecoration"?: boolean;
+        "href"?: string;
+        /**
+          * Visual variant within the hierarchy level - '01': Darker/more prominent styling - '02': Lighter/more subtle styling
+          * @default '01'
+         */
+        "variant"?: '01' | '02';
     }
     /**
-     * Feature accordion component with expandable items and accompanying image
-     * Used for showcasing product features with visual examples
-     * Features auto-cycling through items with a progress timer
+     * A grouped navigation menu component with a heading.
+     * Used in mega-menu dropdowns to group related navigation items.
      */
-    interface AfFeatureAccordion {
+    interface AfNavMenu {
         /**
-          * Whether auto-cycling is enabled
-          * @default true
+          * Breakpoint variant for responsive styling - 'desktop': Desktop-specific styles (right border, horizontal padding) - 'mobile': Mobile-specific styles (bottom border, vertical layout)
+          * @default 'desktop'
          */
-        "autoCycle"?: boolean;
+        "breakpoint"?: 'desktop' | 'mobile';
         /**
-          * Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds)
-          * @default 6000
+          * Whether to display as a card with background color and rounded corners. Used for highlighted sidebar menus (e.g., solutions-alt variant).
+          * @default false
          */
-        "cycleInterval"?: number;
+        "cardStyle"?: boolean;
         /**
-          * Section heading
-          * @default 'Give AI agents your paperwork'
+          * The heading text displayed above the navigation items
          */
         "heading"?: string;
         /**
-          * JSON string of accordion items
-          * @default '[]'
+          * Whether to show the right border separator. When used inside NavMenuNest, borders are controlled by the parent. Set to true only when using NavMenu standalone.
+          * @default false
          */
-        "items"?: string;
+        "showBorder"?: boolean;
     }
     /**
-     * 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
+     * A mega-menu dropdown panel component.
+     * Acts as a container for NavMenu columns and optionally a sidebar.
+     * Used as the dropdown content for navbar items.
+     * **Slots:**
+     * - default: Place NavMenu components here - they will be displayed as columns
+     * - sidebar: Optional sidebar content (NavMenu, NavCard, or any content)
+     * **Example:**
+     * ```html
+     * <af-nav-menu-nest type="solutions" breakpoint="desktop">
+     *   <af-nav-menu heading="Industries">...</af-nav-menu>
+     *   <af-nav-menu heading="Use Cases">...</af-nav-menu>
+     *   <af-nav-menu heading="Documents">...</af-nav-menu>
+     *   <af-nav-menu slot="sidebar" heading="Resume Parser">...</af-nav-menu>
+     * </af-nav-menu-nest>
+     * ```
      */
-    interface AfFooter {
+    interface AfNavMenuNest {
         /**
-          * Copyright text (e.g., "© 2025 Company Name. All rights reserved.")
-          * @default ''
+          * Breakpoint variant for responsive styling - 'desktop': Horizontal multi-column layout - 'mobile': Vertical stacked layout
+          * @default 'desktop'
          */
-        "copyrightText"?: string;
+        "breakpoint"?: 'desktop' | 'mobile';
         /**
-          * Whether to show the status indicator
+          * 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
          */
-        "showStatus"?: boolean;
+        "showSidebarBorder"?: boolean;
         /**
-          * Status message text
-          * @default ''
+          * The type/variant of the mega-menu - 'solutions': Multi-column layout (3 columns + sidebar) - 'solutions-alt': Alternative solutions layout - 'resources': Multi-column layout with optional featured card - 'pricing': Simpler layout without sidebar
+          * @default 'solutions'
          */
-        "statusText"?: string;
+        "type"?: 'solutions' | 'solutions-alt' | 'resources' | 'pricing';
+    }
+    /**
+     * A full-width navigation bar component that provides the main site navigation.
+     * Features a pill-shaped container with logo, navigation links, and action buttons.
+     * Includes mobile hamburger menu and support for mega-menu dropdowns.
+     * The logo slot can be used to provide a custom logo. If no logo is provided,
+     * the default Affinda logo will be displayed.
+     */
+    interface AfNavbar {
         /**
-          * Status page URL
-          * @default ''
+          * Whether to show the default Affinda logo when no logo slot content is provided
+          * @default true
          */
-        "statusUrl"?: string;
+        "showDefaultLogo"?: boolean;
         /**
-          * Whether systems are operational (shows green/red indicator)
-          * @default true
+          * Theme for the spacer background - should match the section below the navbar
          */
-        "systemsOperational"?: boolean;
+        "theme"?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay';
     }
     /**
-     * Footer navigation column component
-     * Used within af-footer to create navigation link groups
+     * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.
+     * Perfect for numbered lists, step indicators, or ordered content.
+     * @example ```html
+     * <af-number-badge number="1" variant="inCircle" size="48"></af-number-badge>
+     * <af-number-badge number="5" variant="outlined" size="32"></af-number-badge>
+     * ```
      */
-    interface AfFooterColumn {
+    interface AfNumberBadge {
         /**
-          * Column heading
-          * @default ''
+          * The number to display (1-10)
+          * @default 1
          */
-        "heading"?: string;
+        "number"?: NumberBadgeNumber;
+        /**
+          * Size of the badge in pixels
+          * @default 48
+         */
+        "size"?: number;
+        /**
+          * Visual variant of the badge - `inCircle` - Number in filled soft-clay circle - `outlined` - Number text only in mist-green
+          * @default 'inCircle'
+         */
+        "variant"?: NumberBadgeVariant;
     }
     /**
-     * Footer link component
-     * Styled link for use in footer navigation columns
+     * 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.
      */
-    interface AfFooterLink {
+    interface AfProgressLine {
         /**
-          * Whether this is an external link (opens in new tab)
+          * Orientation of the progress line. Currently only horizontal is supported.
+          * @default 'horizontal'
+         */
+        "orientation"?: 'horizontal';
+        /**
+          * Progress value from 0 to 1 (0 = 0%, 1 = 100%).
+          * @default 0
+         */
+        "progress"?: number;
+    }
+    /**
+     * Radio component for selecting a single option from a group.
+     */
+    interface AfRadio {
+        /**
+          * Whether the radio is checked
           * @default false
          */
-        "external"?: boolean;
+        "checked"?: boolean;
         /**
-          * Link URL
-          * @default '#'
+          * Whether the radio is disabled
+          * @default false
          */
-        "href"?: string;
+        "disabled"?: boolean;
+        /**
+          * The name of the radio for form submission (radios with same name are grouped)
+         */
+        "name"?: string;
+        /**
+          * Emitted when the radio checked state changes
+         */
+        "onAfChange"?: (event: AfRadioCustomEvent<{ checked: boolean; value?: string }>) => void;
+        /**
+          * The value of the radio for form submission
+         */
+        "value"?: string;
     }
-    interface AfHeading {
+    /**
+     * Section layout component for consistent spacing and backgrounds.
+     * Sets theme context for all child components via CSS custom properties.
+     */
+    interface AfSection {
         /**
-          * Visual alignment
-          * @default 'left'
+          * Whether to include a Container wrapper
+          * @default true
          */
-        "align"?: 'left' | 'center' | 'right';
+        "container"?: boolean;
         /**
-          * Heading level
-          * @default '1'
+          * Padding variant
+          * @default 'default'
          */
-        "level"?: 'xl' | '1' | '2' | '3' | '4' | '5';
+        "padding"?: 'tight' | 'default' | 'loose';
         /**
-          * Theme for dark backgrounds
-          * @default 'light'
+          * Theme - sets background color and provides theme context to children
+          * @default 'white'
          */
-        "theme"?: 'light' | 'dark';
+        "theme"?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
     }
     /**
-     * Hero section component for marketing pages
+     * Social media link component
+     * Circular bordered icon link for social media profiles
      */
-    interface AfHeroSection {
+    interface AfSocialLink {
         /**
-          * Minimum height
-          * @default '60vh'
+          * Link URL
+          * @default '#'
          */
-        "minHeight"?: string;
+        "href"?: string;
         /**
-          * Hero variant
-          * @default 'dark'
+          * Icon type: 'linkedin', 'youtube', 'github', 'twitter', 'facebook', or 'custom'
+          * @default 'custom'
          */
-        "variant"?: 'light' | 'dark';
+        "icon"?: 'linkedin' | 'youtube' | 'github' | 'twitter' | 'facebook' | 'custom';
         /**
-          * Show decorative paperclip
-          * @default false
+          * Accessible label for the link
+          * @default ''
+         */
+        "label"?: string;
+    }
+    /**
+     * 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.
+     */
+    interface AfSplitSection {
+        /**
+          * Theme for the bottom half of the section
+          * @default 'white'
+         */
+        "bottomTheme"?: Theme;
+        /**
+          * Whether to include a Container wrapper
+          * @default true
+         */
+        "container"?: boolean;
+        /**
+          * Padding variant
+          * @default 'default'
+         */
+        "padding"?: 'tight' | 'default' | 'loose';
+        /**
+          * Theme for the top half of the section
+          * @default 'mist-green'
          */
-        "withDecoration"?: boolean;
+        "topTheme"?: Theme;
     }
-    interface AfIconButton {
+    /**
+     * Switch component for toggling between on and off states.
+     */
+    interface AfSwitch {
         /**
-          * Accessible label for screen readers
+          * Whether the switch is active (on)
+          * @default false
          */
-        "ariaLabel": string;
+        "active"?: boolean;
         /**
-          * Whether the button is disabled
+          * Whether the switch is disabled
           * @default false
          */
         "disabled"?: boolean;
         /**
-          * Optional href to render as a link
-         */
-        "href"?: string;
-        /**
-          * The size of the button
-          * @default 'medium'
+          * The name of the switch for form submission
          */
-        "size"?: 'large' | 'medium' | 'small';
+        "name"?: string;
         /**
-          * Button type (when not using href)
-          * @default 'button'
+          * Emitted when the switch state changes
          */
-        "type"?: 'button' | 'submit' | 'reset';
+        "onAfChange"?: (event: AfSwitchCustomEvent<{ active: boolean }>) => void;
         /**
-          * The visual variant of the button
-          * @default 'primary'
+          * The value of the switch for form submission
          */
-        "variant"?: 'primary' | 'secondary' | 'outline' | 'ghost';
+        "value"?: string;
     }
     /**
-     * Logo component with default Affinda branding
-     * Can be customized with a custom logo URL or by using the slot
+     * Tab component for use within a TabBar.
+     * Represents an individual selectable tab with support for icons and number badges.
+     * @example ```html
+     * <af-tab label="Overview" active></af-tab>
+     * <af-tab label="Details">
+     *   <af-icon slot="icon" name="document"></af-icon>
+     * </af-tab>
+     * <af-tab label="Step 1">
+     *   <af-number-badge slot="number" number="1"></af-number-badge>
+     * </af-tab>
+     * ```
      */
-    interface AfLogo {
+    interface AfTab {
         /**
-          * Alt text for the logo
-          * @default 'Affinda'
+          * Whether the tab is currently active/selected
+          * @default false
          */
-        "alt"?: string;
+        "active"?: boolean;
         /**
-          * Custom logo image URL. If provided, displays this instead of the default Affinda logo
+          * Whether the tab is disabled
+          * @default false
          */
-        "src"?: string;
-    }
-    /**
-     * A rounded container for displaying client logos
-     */
-    interface AfLogoWell {
-    }
-    /**
-     * A generic navigation item component that can be used in navigation bars, menus, and sidebars.
-     * Supports multiple hierarchy levels, variants, and states (active, hover).
-     */
-    interface AfNavItem {
+        "disabled"?: boolean;
         /**
-          * Whether this nav item is currently active/selected
+          * Whether to show the icon slot
           * @default false
          */
-        "active"?: boolean;
+        "displayIcon"?: boolean;
         /**
-          * Visual hierarchy level of the navigation item - 'primary': Bold, main navigation (larger text, prominent styling) - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)
-          * @default 'primary'
+          * Whether to show the number badge slot
+          * @default false
          */
-        "hierarchy"?: 'primary' | 'secondary';
+        "displayNumber"?: boolean;
         /**
-          * URL to navigate to when clicked
+          * The text label for the tab
+          * @default ''
          */
-        "href"?: string;
+        "label"?: string;
         /**
-          * Visual variant within the hierarchy level - '01': Darker/more prominent styling - '02': Lighter/more subtle styling
-          * @default '01'
+          * Emitted when the tab is clicked
          */
-        "variant"?: '01' | '02';
-    }
-    /**
-     * A full-width navigation bar component that provides the main site navigation.
-     * Features a pill-shaped container with logo, navigation links, and action buttons.
-     * Includes mobile hamburger menu.
-     * The logo slot can be used to provide a custom logo. If no logo is provided,
-     * the default Affinda logo will be displayed.
-     */
-    interface AfNavbar {
+        "onAfTabClick"?: (event: AfTabCustomEvent<{ value?: string }>) => void;
         /**
-          * Whether to show the default Affinda logo when no logo slot content is provided
-          * @default true
+          * Visual shape variant - `square` - Rectangular tab with bottom border indicator - `pill` - Rounded pill shape with background for active state
+          * @default 'square'
          */
-        "showDefaultLogo"?: boolean;
+        "shape"?: TabShape;
+        /**
+          * Unique value for the tab, used for programmatic selection
+         */
+        "value"?: string;
     }
     /**
-     * Section layout component for consistent spacing and backgrounds
+     * TabBar component that contains and manages a group of tabs.
+     * Provides horizontal layout, keyboard navigation, and consistent styling.
+     * @example ```html
+     * <af-tab-bar shape="square" breakpoint="desktop">
+     *   <af-tab label="Overview" active value="overview"></af-tab>
+     *   <af-tab label="Details" value="details"></af-tab>
+     *   <af-tab label="Settings" value="settings"></af-tab>
+     * </af-tab-bar>
+     * ```
      */
-    interface AfSection {
+    interface AfTabBar {
         /**
-          * Background color
-          * @default 'white'
-         */
-        "background"?: 'white' | 'level1' | 'dark' | 'inkwell';
-        /**
-          * Whether to include a Container wrapper
-          * @default true
+          * Responsive breakpoint mode - `mobile` - Compact layout with smaller padding - `desktop` - Larger layout with more generous spacing
+          * @default 'desktop'
          */
-        "container"?: boolean;
+        "breakpoint"?: TabBarBreakpoint;
         /**
-          * Padding variant
-          * @default 'default'
+          * Visual shape variant for all tabs - `square` - Rectangular tabs with bottom border indicator - `pill` - Rounded pill tabs with background for active state
+          * @default 'square'
          */
-        "padding"?: 'tight' | 'default' | 'loose';
+        "shape"?: TabBarShape;
     }
     /**
-     * Social media link component
-     * Circular bordered icon link for social media profiles
+     * Tag displays a label in a styled container.
+     * Perfect for categorization, topics, or metadata display.
+     * @example ```html
+     * <af-tag>AI</af-tag>
+     * <af-tag size="small">Machine Learning</af-tag>
+     * <af-tag size="large" variant="light">Document Processing</af-tag>
+     * ```
      */
-    interface AfSocialLink {
+    interface AfTag {
         /**
-          * Link URL
-          * @default '#'
+          * The URL to navigate to when the tag is clicked (makes the tag a link)
          */
         "href"?: string;
         /**
-          * Icon type: 'linkedin', 'youtube', 'github', 'twitter', 'facebook', or 'custom'
-          * @default 'custom'
+          * The size of the tag - `x-small` - Compact tag with minimal padding - `small` - Small tag with moderate padding - `large` - Large tag with generous padding
+          * @default 'small'
          */
-        "icon"?: 'linkedin' | 'youtube' | 'github' | 'twitter' | 'facebook' | 'custom';
+        "size"?: TagSize;
         /**
-          * Accessible label for the link
-          * @default ''
+          * The visual variant of the tag - `sand` - Soft-clay/tan colored background (default) - `light` - Mist-green/light colored background
+          * @default 'sand'
          */
-        "label"?: string;
+        "variant"?: TagVariant;
     }
     interface AfTestimonial {
         /**
@@ -1214,10 +3420,28 @@ declare namespace LocalJSX {
           * Background image URL for the testimonial card
          */
         "backgroundImage"?: string;
+        /**
+          * Whether the next button is enabled
+          * @default false
+         */
+        "hasNext"?: boolean;
+        /**
+          * Whether the previous button is enabled
+          * @default false
+         */
+        "hasPrev"?: boolean;
         /**
           * Company logo URL
          */
         "logoImage"?: string;
+        /**
+          * Emitted when the next button is clicked
+         */
+        "onNavNext"?: (event: AfTestimonialCustomEvent<void>) => void;
+        /**
+          * Emitted when the previous button is clicked
+         */
+        "onNavPrev"?: (event: AfTestimonialCustomEvent<void>) => void;
         /**
           * Testimonial quote text
          */
@@ -1226,7 +3450,17 @@ declare namespace LocalJSX {
           * Link to full case study
          */
         "readMoreLink"?: string;
+        /**
+          * Whether to show built-in navigation buttons (used when in a carousel)
+          * @default false
+         */
+        "showNavigation"?: boolean;
     }
+    /**
+     * TestimonialCarousel - Carousel for displaying multiple customer testimonials.
+     * Handles navigation between testimonials with progress indicator.
+     * Wrap in Section/Container for proper page layout and theming.
+     */
     interface AfTestimonialCarousel {
     }
     interface AfTestimonialStat {
@@ -1244,6 +3478,11 @@ declare namespace LocalJSX {
          */
         "value": string;
     }
+    /**
+     * Text/body component that inherits color from theme context.
+     * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+     * via CSS custom properties.
+     */
     interface AfText {
         /**
           * Visual alignment
@@ -1255,16 +3494,144 @@ declare namespace LocalJSX {
           * @default 'p'
          */
         "as"?: 'p' | 'span' | 'div' | 'label';
-        /**
-          * Theme for dark backgrounds
-          * @default 'light'
-         */
-        "theme"?: 'light' | 'dark';
         /**
           * Text variant
           * @default 'medium'
          */
-        "variant"?: 'xlarge' | 'large' | 'medium' | 'small' | 'label-button' | 'label-tag';
+        "variant"?: 'xlarge' | 'large' | 'medium' | 'small';
+    }
+    /**
+     * TextImage composite component that combines typography content with an image.
+     * Supports various layout configurations with image position and proportion options.
+     */
+    interface AfTextImage {
+        /**
+          * Image alt text for accessibility
+          * @default ''
+         */
+        "alt"?: string;
+        /**
+          * Position of the image relative to the text content
+          * @default 'right'
+         */
+        "imagePosition"?: 'left' | 'right';
+        /**
+          * Proportion of the image in the layout - '1/3': Image takes 1/3 of the width (text takes 2/3) - '1/4': Image takes 1/4 of the width (text takes 3/4) - '100%': Image takes full width below text
+          * @default '1/3'
+         */
+        "imageProportion"?: '1/3' | '1/4' | '100%';
+        /**
+          * Whether to show a second typography lockup section
+          * @default false
+         */
+        "showSecondLockup"?: boolean;
+        /**
+          * Image source URL
+         */
+        "src"?: string;
+    }
+    /**
+     * TextImageNest is a layout component that arranges multiple text-image content pieces
+     * in various grid layouts with optional footer buttons.
+     * This component inherits theming from a parent Section or theme-providing container.
+     * Wrap it in an af-section to apply themes.
+     * Supports multiple layout variants:
+     * - `single`: Full-width single item (side-by-side image + text)
+     * - `grid-2`: 2-column grid with stacked items
+     * - `grid-3`: 3-column grid with stacked items
+     * - `grid-4`: 4-column grid with stacked items
+     * - `stacked`: Alternating rows of side-by-side content
+     */
+    interface AfTextImageNest {
+        /**
+          * Layout variant for the content grid
+          * @default 'grid-3'
+         */
+        "layout"?: 'single' | 'grid-2' | 'grid-3' | 'grid-4' | 'stacked';
+    }
+    /**
+     * Textarea component for multi-line text input with label, description, and error states.
+     */
+    interface AfTextarea {
+        /**
+          * Description text displayed below the label
+         */
+        "description"?: string;
+        /**
+          * Whether the textarea is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Error message to display (also sets error state)
+         */
+        "error"?: string;
+        /**
+          * The label text for the textarea
+         */
+        "label"?: string;
+        /**
+          * Maximum length of input value
+         */
+        "maxlength"?: number;
+        /**
+          * Minimum length of input value
+         */
+        "minlength"?: number;
+        /**
+          * The name of the textarea for form submission
+         */
+        "name"?: string;
+        /**
+          * Emitted when the textarea loses focus
+         */
+        "onAfBlur"?: (event: AfTextareaCustomEvent<void>) => void;
+        /**
+          * Emitted when the textarea gains focus
+         */
+        "onAfFocus"?: (event: AfTextareaCustomEvent<void>) => void;
+        /**
+          * Emitted when the info icon is clicked
+         */
+        "onAfInfoClick"?: (event: AfTextareaCustomEvent<void>) => void;
+        /**
+          * Emitted when the textarea value changes
+         */
+        "onAfInput"?: (event: AfTextareaCustomEvent<{ value: string }>) => void;
+        /**
+          * Placeholder text for the textarea
+         */
+        "placeholder"?: string;
+        /**
+          * Whether the textarea is read-only
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * Whether the textarea is required
+          * @default false
+         */
+        "required"?: boolean;
+        /**
+          * Whether the textarea is resizable
+          * @default 'vertical'
+         */
+        "resize"?: 'none' | 'vertical' | 'horizontal' | 'both';
+        /**
+          * Number of visible rows (height)
+          * @default 4
+         */
+        "rows"?: number;
+        /**
+          * Whether to show the info icon next to the label
+          * @default false
+         */
+        "showInfoIcon"?: boolean;
+        /**
+          * The current value of the textarea
+          * @default ''
+         */
+        "value"?: string;
     }
     interface AfTypographyLockup {
         /**
@@ -1292,34 +3659,98 @@ declare namespace LocalJSX {
          */
         "textAlignment"?: 'left' | 'center';
     }
+    /**
+     * Video Container molecule component for showcasing video content.
+     * Uses slots for typography lockups above and below the video.
+     * When used inside af-split-section, the top slot inherits the top theme
+     * and the bottom slot inherits the bottom theme for correct colors.
+     * @example ```html
+     * <af-split-section top-theme="mist-green" bottom-theme="white">
+     *   <af-video-container video-thumbnail-url="/path/to/thumbnail.jpg">
+     *     <af-typography-lockup slot="top" text-alignment="center" heading-size="2">
+     *       <af-heading level="2">Watch our product demo</af-heading>
+     *       <af-text slot="description">See how Affinda transforms your workflow</af-text>
+     *       <af-button slot="buttons" variant="primary">Get Started</af-button>
+     *     </af-typography-lockup>
+     *   </af-video-container>
+     * </af-split-section>
+     * ```
+     */
+    interface AfVideoContainer {
+        /**
+          * Emitted when the play button is clicked. Use this to handle video playback (e.g., open modal, embed player). If videoUrl is set and no handler prevents default, opens URL in new tab.
+         */
+        "onPlayClick"?: (event: AfVideoContainerCustomEvent<{ videoUrl: string }>) => void;
+        /**
+          * Video alt text for accessibility
+          * @default 'Video thumbnail'
+         */
+        "videoAlt"?: string;
+        /**
+          * Video thumbnail image URL
+          * @default ''
+         */
+        "videoThumbnailUrl"?: string;
+        /**
+          * Optional video URL for play button link
+          * @default ''
+         */
+        "videoUrl"?: string;
+    }
     interface IntrinsicElements {
         "af-aspect-ratio": AfAspectRatio;
         "af-button": AfButton;
         "af-button-group": AfButtonGroup;
         "af-card": AfCard;
+        "af-checkbox": AfCheckbox;
         "af-client-carousel": AfClientCarousel;
         "af-color-swatch": AfColorSwatch;
         "af-contact-item": AfContactItem;
         "af-container": AfContainer;
-        "af-cta-section": AfCtaSection;
         "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-callout": AfGridCallout;
         "af-heading": AfHeading;
         "af-hero-section": AfHeroSection;
+        "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-input": AfInput;
         "af-logo": AfLogo;
         "af-logo-well": AfLogoWell;
+        "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-progress-line": AfProgressLine;
+        "af-radio": AfRadio;
         "af-section": AfSection;
         "af-social-link": AfSocialLink;
+        "af-split-section": AfSplitSection;
+        "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-typography-lockup": AfTypographyLockup;
+        "af-video-container": AfVideoContainer;
     }
 }
 export { LocalJSX as JSX };
@@ -1331,11 +3762,30 @@ declare module "@stencil/core" {
              * Useful for images, videos, or any content that needs to maintain specific proportions.
              */
             "af-aspect-ratio": LocalJSX.AfAspectRatio & JSXBase.HTMLAttributes<HTMLAfAspectRatioElement>;
+            /**
+             * Button component that inherits colors from theme context.
+             * Colors are determined by the parent theme (af-section, af-hero-section, etc.)
+             * via CSS custom properties.
+             */
             "af-button": LocalJSX.AfButton & JSXBase.HTMLAttributes<HTMLAfButtonElement>;
             "af-button-group": LocalJSX.AfButtonGroup & JSXBase.HTMLAttributes<HTMLAfButtonGroupElement>;
+            /**
+             * 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>;
             /**
-             * Infinite scrolling carousel for client logos
+             * Checkbox component for selecting multiple options.
+             * Supports checked, unchecked, and indeterminate states.
+             */
+            "af-checkbox": LocalJSX.AfCheckbox & JSXBase.HTMLAttributes<HTMLAfCheckboxElement>;
+            /**
+             * Infinite scrolling carousel for client logos.
+             * This is a section-level component that spans full width.
+             * It supports theming via the `theme` prop.
+             * For headlines, use a separate TypographyLockup or Heading component above this carousel.
              */
             "af-client-carousel": LocalJSX.AfClientCarousel & JSXBase.HTMLAttributes<HTMLAfClientCarouselElement>;
             "af-color-swatch": LocalJSX.AfColorSwatch & JSXBase.HTMLAttributes<HTMLAfColorSwatchElement>;
@@ -1350,16 +3800,38 @@ declare module "@stencil/core" {
              */
             "af-container": LocalJSX.AfContainer & JSXBase.HTMLAttributes<HTMLAfContainerElement>;
             /**
-             * Call-to-action section component with illustration and decorative background
-             * A flexible CTA section with customizable content, buttons, and optional illustration
+             * Feature accordion component with expandable items and accompanying image.
+             * Used for showcasing product features with visual examples.
+             * Features auto-cycling through items with a progress timer.
+             * **Must be wrapped in a Section component** to inherit theme styling.
+             * The component automatically adapts colors based on the parent Section's theme.
+             * @example ```tsx
+             * <Section theme="inkwell">
+             *   <FeatureAccordion heading="Features" items={...} />
+             * </Section>
+             * ```
              */
-            "af-cta-section": LocalJSX.AfCtaSection & JSXBase.HTMLAttributes<HTMLAfCtaSectionElement>;
+            "af-feature-accordion": LocalJSX.AfFeatureAccordion & JSXBase.HTMLAttributes<HTMLAfFeatureAccordionElement>;
             /**
-             * Feature accordion component with expandable items and accompanying image
-             * Used for showcasing product features with visual examples
-             * Features auto-cycling through items with a progress timer
+             * Feature Card molecule component that combines a card with an image.
+             * Two layout modes:
+             * - `standard`: Theme background with text at top and image at bottom
+             * - `full-bleed`: Image covers entire card with text overlay at bottom
+             * Responsive: Automatically adapts to mobile viewport (≤768px).
+             * Uses af-card atom internally and af-typography-lockup for text hierarchy.
              */
-            "af-feature-accordion": LocalJSX.AfFeatureAccordion & JSXBase.HTMLAttributes<HTMLAfFeatureAccordionElement>;
+            "af-feature-card": LocalJSX.AfFeatureCard & 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>;
+            /**
+             * Fieldset component for grouping related form controls.
+             * Supports vertical and horizontal layouts with an optional legend/heading.
+             */
+            "af-fieldset": LocalJSX.AfFieldset & JSXBase.HTMLAttributes<HTMLAfFieldsetElement>;
             /**
              * Footer component for marketing pages
              * Provides a flexible, slot-based layout for footer content
@@ -1376,36 +3848,193 @@ declare module "@stencil/core" {
              * Styled link for use in footer navigation columns
              */
             "af-footer-link": LocalJSX.AfFooterLink & JSXBase.HTMLAttributes<HTMLAfFooterLinkElement>;
+            /**
+             * GridCallout organism - a marketing section combining an optional pill-shaped image 
+             * with a grid of IconText feature items.
+             * Composes:
+             * - Pill-shaped image container (optional)
+             * - Heading via af-typography-lockup
+             * - Grid of af-icon-text items
+             * - Optional CTA button
+             * Inherits theme colors from parent af-section via CSS custom properties.
+             * @example ```html
+             * <af-section theme="mist-green">
+             *   <af-grid-callout image-src="/team.jpg" image-alt="Team photo">
+             *     Affinda blends AI and engineering
+             *     <span slot="description">Optional description text.</span>
+             *     
+             *     <af-icon-text slot="items" icon="settings">
+             *       Feature One
+             *       <span slot="description">Feature description.</span>
+             *     </af-icon-text>
+             *     
+             *     <af-button slot="cta" variant="primary">Learn more</af-button>
+             *   </af-grid-callout>
+             * </af-section>
+             * ```
+             */
+            "af-grid-callout": LocalJSX.AfGridCallout & JSXBase.HTMLAttributes<HTMLAfGridCalloutElement>;
+            /**
+             * Heading component that inherits color from theme context.
+             * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+             * via CSS custom properties.
+             */
             "af-heading": LocalJSX.AfHeading & JSXBase.HTMLAttributes<HTMLAfHeadingElement>;
             /**
-             * Hero section component for marketing pages
+             * Hero section component for marketing pages.
+             * Uses TypographyLockup internally to handle heading, description, and button layout.
+             * Sets theme context for all child components via CSS custom properties.
              */
             "af-hero-section": LocalJSX.AfHeroSection & JSXBase.HTMLAttributes<HTMLAfHeroSectionElement>;
+            /**
+             * Icon component that displays SVG icons from the Affinda icon library.
+             * Icons inherit color from their parent via currentColor.
+             * Icons are bundled inline, so no runtime fetching is required.
+             * This ensures icons work reliably in all bundler contexts.
+             * @example ```html
+             * <af-icon name="arrow-right" size="24"></af-icon>
+             * ```
+             */
+            "af-icon": LocalJSX.AfIcon & 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:
+             * - Background uses `--af-background-contrast`
+             * - Icon color uses `--af-background-icon-default`
+             * @example ```html
+             * <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>;
             /**
-             * Logo component with default Affinda branding
-             * Can be customized with a custom logo URL or by using the slot
+             * IconText molecule - combines an IconBox with a TypographyLockup for feature items.
+             * Composes:
+             * - af-icon-box: Themed icon container
+             * - af-typography-lockup: Heading, description, and button slots
+             * Inherits theme colors from parent Section via CSS custom properties.
+             * @example ```html
+             * <af-icon-text icon="settings" heading-size="4">
+             *   Feature Heading
+             *   <span slot="description">Feature description text.</span>
+             *   <af-button slot="buttons" variant="tertiary">Learn more</af-button>
+             * </af-icon-text>
+             * ```
+             */
+            "af-icon-text": LocalJSX.AfIconText & JSXBase.HTMLAttributes<HTMLAfIconTextElement>;
+            /**
+             * Illustrated Card molecule component that combines a card with an illustration.
+             * Uses a theme background with text at top and an illustration from
+             * @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>;
+            /**
+             * A styled image container with rounded corners and a subtle inset border.
+             * Provides consistent image styling across the design system.
+             */
+            "af-image": LocalJSX.AfImage & JSXBase.HTMLAttributes<HTMLAfImageElement>;
+            /**
+             * In-page banner component for call-to-action content.
+             * A banner card with illustration, heading, description, and action buttons.
+             * Typically placed inside a neutral (white) Section to show off its themed background.
+             * The component has its own theme prop to control its background color and styling.
+             * **Illustration Usage:**
+             * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,
+             * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:
+             * ```tsx
+             * import { getIllustrationUrlByScene } from '@affinda/illustrations';
+             * <InPageBanner
+             *   theme="inkwell"
+             *   illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}
+             *   ...
+             * />
+             * ```
+             * Alternatively, use the `illustration` slot for completely custom content.
+             */
+            "af-in-page-banner": LocalJSX.AfInPageBanner & JSXBase.HTMLAttributes<HTMLAfInPageBannerElement>;
+            /**
+             * Input field component with label, description, and error states.
+             * Supports various input types and validation states.
+             */
+            "af-input": LocalJSX.AfInput & JSXBase.HTMLAttributes<HTMLAfInputElement>;
+            /**
+             * Affinda logo component
              */
             "af-logo": LocalJSX.AfLogo & JSXBase.HTMLAttributes<HTMLAfLogoElement>;
             /**
              * A rounded container for displaying client logos
              */
             "af-logo-well": LocalJSX.AfLogoWell & JSXBase.HTMLAttributes<HTMLAfLogoWellElement>;
+            /**
+             * A navigation card component for featured article content in mega-menu dropdowns.
+             * Displays an image with a gradient overlay and headline text.
+             * **Usage:**
+             * - Place in the `sidebar` slot of NavMenuNest
+             * - Provide imageSrc, heading, and href props
+             * **Hover behavior:**
+             * - Slight scale effect (1.02)
+             * - Headline underline
+             */
+            "af-nav-card": LocalJSX.AfNavCard & 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).
              */
             "af-nav-item": LocalJSX.AfNavItem & 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>;
+            /**
+             * A mega-menu dropdown panel component.
+             * Acts as a container for NavMenu columns and optionally a sidebar.
+             * Used as the dropdown content for navbar items.
+             * **Slots:**
+             * - default: Place NavMenu components here - they will be displayed as columns
+             * - sidebar: Optional sidebar content (NavMenu, NavCard, or any content)
+             * **Example:**
+             * ```html
+             * <af-nav-menu-nest type="solutions" breakpoint="desktop">
+             *   <af-nav-menu heading="Industries">...</af-nav-menu>
+             *   <af-nav-menu heading="Use Cases">...</af-nav-menu>
+             *   <af-nav-menu heading="Documents">...</af-nav-menu>
+             *   <af-nav-menu slot="sidebar" heading="Resume Parser">...</af-nav-menu>
+             * </af-nav-menu-nest>
+             * ```
+             */
+            "af-nav-menu-nest": LocalJSX.AfNavMenuNest & 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.
-             * Includes mobile hamburger menu.
+             * Includes mobile hamburger menu and support for mega-menu dropdowns.
              * The logo slot can be used to provide a custom logo. If no logo is provided,
              * the default Affinda logo will be displayed.
              */
             "af-navbar": LocalJSX.AfNavbar & JSXBase.HTMLAttributes<HTMLAfNavbarElement>;
             /**
-             * Section layout component for consistent spacing and backgrounds
+             * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.
+             * Perfect for numbered lists, step indicators, or ordered content.
+             * @example ```html
+             * <af-number-badge number="1" variant="inCircle" size="48"></af-number-badge>
+             * <af-number-badge number="5" variant="outlined" size="32"></af-number-badge>
+             * ```
+             */
+            "af-number-badge": LocalJSX.AfNumberBadge & JSXBase.HTMLAttributes<HTMLAfNumberBadgeElement>;
+            /**
+             * 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>;
+            /**
+             * Radio component for selecting a single option from a group.
+             */
+            "af-radio": LocalJSX.AfRadio & 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>;
             /**
@@ -1413,11 +4042,108 @@ declare module "@stencil/core" {
              * Circular bordered icon link for social media profiles
              */
             "af-social-link": LocalJSX.AfSocialLink & JSXBase.HTMLAttributes<HTMLAfSocialLinkElement>;
+            /**
+             * 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>;
+            /**
+             * Switch component for toggling between on and off states.
+             */
+            "af-switch": LocalJSX.AfSwitch & JSXBase.HTMLAttributes<HTMLAfSwitchElement>;
+            /**
+             * Tab component for use within a TabBar.
+             * Represents an individual selectable tab with support for icons and number badges.
+             * @example ```html
+             * <af-tab label="Overview" active></af-tab>
+             * <af-tab label="Details">
+             *   <af-icon slot="icon" name="document"></af-icon>
+             * </af-tab>
+             * <af-tab label="Step 1">
+             *   <af-number-badge slot="number" number="1"></af-number-badge>
+             * </af-tab>
+             * ```
+             */
+            "af-tab": LocalJSX.AfTab & JSXBase.HTMLAttributes<HTMLAfTabElement>;
+            /**
+             * TabBar component that contains and manages a group of tabs.
+             * Provides horizontal layout, keyboard navigation, and consistent styling.
+             * @example ```html
+             * <af-tab-bar shape="square" breakpoint="desktop">
+             *   <af-tab label="Overview" active value="overview"></af-tab>
+             *   <af-tab label="Details" value="details"></af-tab>
+             *   <af-tab label="Settings" value="settings"></af-tab>
+             * </af-tab-bar>
+             * ```
+             */
+            "af-tab-bar": LocalJSX.AfTabBar & JSXBase.HTMLAttributes<HTMLAfTabBarElement>;
+            /**
+             * Tag displays a label in a styled container.
+             * Perfect for categorization, topics, or metadata display.
+             * @example ```html
+             * <af-tag>AI</af-tag>
+             * <af-tag size="small">Machine Learning</af-tag>
+             * <af-tag size="large" variant="light">Document Processing</af-tag>
+             * ```
+             */
+            "af-tag": LocalJSX.AfTag & JSXBase.HTMLAttributes<HTMLAfTagElement>;
             "af-testimonial": LocalJSX.AfTestimonial & 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>;
+            /**
+             * Text/body component that inherits color from theme context.
+             * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+             * via CSS custom properties.
+             */
             "af-text": LocalJSX.AfText & 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>;
+            /**
+             * TextImageNest is a layout component that arranges multiple text-image content pieces
+             * in various grid layouts with optional footer buttons.
+             * This component inherits theming from a parent Section or theme-providing container.
+             * Wrap it in an af-section to apply themes.
+             * Supports multiple layout variants:
+             * - `single`: Full-width single item (side-by-side image + text)
+             * - `grid-2`: 2-column grid with stacked items
+             * - `grid-3`: 3-column grid with stacked items
+             * - `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>;
+            /**
+             * Textarea component for multi-line text input with label, description, and error states.
+             */
+            "af-textarea": LocalJSX.AfTextarea & JSXBase.HTMLAttributes<HTMLAfTextareaElement>;
             "af-typography-lockup": LocalJSX.AfTypographyLockup & JSXBase.HTMLAttributes<HTMLAfTypographyLockupElement>;
+            /**
+             * Video Container molecule component for showcasing video content.
+             * Uses slots for typography lockups above and below the video.
+             * When used inside af-split-section, the top slot inherits the top theme
+             * and the bottom slot inherits the bottom theme for correct colors.
+             * @example ```html
+             * <af-split-section top-theme="mist-green" bottom-theme="white">
+             *   <af-video-container video-thumbnail-url="/path/to/thumbnail.jpg">
+             *     <af-typography-lockup slot="top" text-alignment="center" heading-size="2">
+             *       <af-heading level="2">Watch our product demo</af-heading>
+             *       <af-text slot="description">See how Affinda transforms your workflow</af-text>
+             *       <af-button slot="buttons" variant="primary">Get Started</af-button>
+             *     </af-typography-lockup>
+             *   </af-video-container>
+             * </af-split-section>
+             * ```
+             */
+            "af-video-container": LocalJSX.AfVideoContainer & JSXBase.HTMLAttributes<HTMLAfVideoContainerElement>;
         }
     }
 }