@affinda/wc 0.0.20 → 0.0.22

package/dist/types/components.d.ts

@@ -87,20 +87,20 @@ export namespace Components {
          */
         "href"?: string;
         /**
-          * The size of the button. - `default` - Standard size for primary CTAs - `small` - Compact size for inline or secondary contexts
+          * The size of the button. - `default` - Standard size for primary CTAs (12/24px padding) - `thin` - Compact inline/secondary size (8/16px padding)
           * @default 'default'
          */
-        "size": 'default' | 'small';
+        "size": 'default' | 'thin';
         /**
           * Button type (when not using href)
           * @default 'button'
          */
         "type": 'button' | 'submit' | 'reset';
         /**
-          * The visual variant of the button. - `primary` - Main CTA with filled background (use sparingly, 1-2 per view) - `secondary` - Supporting action with outlined style - `tertiary` - Subtle text-link style with underline
+          * The visual variant of the button. - `primary` - Main CTA with filled background (use sparingly, 1-2 per view) - `secondary` - Supporting action with outlined style - `ghost` - Link-style with themed underline on the label; commonly paired   with a right-pointing icon. Matches Webflow's "button ghost" variant.
           * @default 'primary'
          */
-        "variant": 'primary' | 'secondary' | 'tertiary';
+        "variant": 'primary' | 'secondary' | 'ghost';
     }
     interface AfButtonGroup {
         /**
@@ -184,10 +184,16 @@ export namespace Components {
     /**
      * Infinite scrolling carousel for client logos.
      * This is a section-level component that spans full width.
-     * It supports theming via the `theme` prop.
+     * Renders one or two scrolling rows; single row matches the Webflow reference,
+     * two rows (scrolling opposite directions) is the denser variant.
      * For headlines, use a separate TypographyLockup or Heading component above this carousel.
      */
     interface AfClientCarousel {
+        /**
+          * Number of scrolling rows. - `1` (default) — single row scrolling left, matches the Webflow reference. - `2` — two rows scrolling in opposite directions.  When `rows="2"`, slot `row-1` and `row-2` independently. When `rows="1"`, slot the default slot (unnamed) or `row-1`.
+          * @default 1
+         */
+        "rows": 1 | 2;
         /**
           * Theme - sets background color and provides theme context to children
           * @default 'inkwell'
@@ -607,7 +613,7 @@ export namespace Components {
      * <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-button slot="buttons" variant="ghost">Learn more</af-button>
      * </af-icon-text>
      * ```
      */
@@ -634,7 +640,8 @@ export namespace Components {
     }
     /**
      * Illustrated Card molecule component that combines a card with an illustration.
-     * Uses a theme background with text at top and an illustration from
+     * Uses a theme background with text at top, a button row in the middle, and
+     * an illustration from
      * @affinda /illustrations at the bottom.
      * Uses af-card atom internally and af-typography-lockup for text hierarchy.
      */
@@ -664,6 +671,11 @@ export namespace Components {
           * Alternative text for the image (required for accessibility)
          */
         "alt": string;
+        /**
+          * Shape / corner rounding variant. Matches Webflow's `.image-fill.rounded-*` patterns where only one edge is rounded so the image bleeds into a neighbouring section. - `rounded` (default) — symmetric rounded corners on all four sides. - `rounded-left` — rounded only on the left edge (top-left + bottom-left). - `rounded-right` — rounded only on the right edge. - `square` — no corner rounding.
+          * @default 'rounded'
+         */
+        "shape": 'rounded' | 'rounded-left' | 'rounded-right' | 'square';
         /**
           * The image source URL
          */
@@ -686,6 +698,14 @@ export namespace Components {
      * />
      * ```
      * Alternatively, use the `illustration` slot for completely custom content.
+     * **Slot-based composition (preferred for rich content):**
+     * - `heading` — heading markup (overrides the `heading` prop when provided).
+     * - `description` — description markup (overrides the `description` prop).
+     * - `buttons` — custom button group (overrides the primary/secondary button
+     *   props; use when you need ghost variants, more than two buttons, or
+     *   per-button icons).
+     * - `illustration` — custom illustration markup.
+     * The string props remain supported for simple cases.
      */
     interface AfInPageBanner {
         /**
@@ -1039,10 +1059,10 @@ export namespace Components {
      * - `start` - Primary navigation links (left side, desktop)
      * - `end` - Secondary/utility links (right side)
      * - `button` - Call-to-action button
-     * - `dropdown-solutions` - Mega-menu for Solutions dropdown
-     * - `dropdown-pricing` - Mega-menu for Pricing dropdown  
-     * - `dropdown-resources` - Mega-menu for Resources dropdown
-     * - `dropdown` - Generic dropdown slot
+     * - `dropdowns` - One or more dropdown panels, each a `<div data-for="id">`
+     *   where `id` matches the `data-dropdown="id"` attribute on the trigger.
+     *   Clicking a trigger toggles the matching panel; only one is visible at
+     *   a time.
      * - `mobile-menu` - Mobile menu content (use af-nav-accordion for accordion menus)
      * - `mobile-button` - CTA button for mobile menu (appears at top)
      */
@@ -1268,6 +1288,43 @@ export namespace Components {
          */
         "wrap": boolean;
     }
+    /**
+     * Stepper composite for "Sign up / Upload / See results"-style marketing
+     * flows. Renders children `af-stepper-step` elements in a horizontal row
+     * (desktop) or vertical stack (mobile), with a connector line between badges.
+     * Matches Webflow's `.stepper` pattern — numbered circled badges, a spine
+     * connector, and centered step text.
+     * @example ```html
+     * <af-stepper>
+     *   <af-stepper-step>
+     *     <h3 slot="heading">Sign up for free</h3>
+     *     <p slot="body">No sales calls, no credit cards.</p>
+     *   </af-stepper-step>
+     *   <af-stepper-step>...</af-stepper-step>
+     *   <af-stepper-step>...</af-stepper-step>
+     * </af-stepper>
+     * ```
+     */
+    interface AfStepper {
+        /**
+          * Layout orientation. Horizontal on desktop, auto-stacks on mobile.
+          * @default 'horizontal'
+         */
+        "orientation": 'horizontal' | 'vertical';
+    }
+    /**
+     * A single step within an af-stepper. Renders a numbered circular badge
+     * followed by slotted heading + body content.
+     * The parent af-stepper auto-assigns the `index` attribute based on DOM
+     * order, so consumers don't need to hand-number the steps.
+     */
+    interface AfStepperStep {
+        /**
+          * Step number shown in the badge. Auto-assigned by the parent stepper if not explicitly set.
+          * @default 1
+         */
+        "index": number;
+    }
     /**
      * Switch component for toggling between on and off states.
      */
@@ -1366,10 +1423,13 @@ export namespace Components {
     /**
      * Tag displays a label in a styled container.
      * Perfect for categorization, topics, or metadata display.
+     * The `default` variant inherits its colors from the parent theme context
+     * (af-section, af-card). Use explicit variants (`inkwell`, `white`,
+     * `soft-clay`, `mist-green`) to override.
      * @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 size="small" variant="inkwell">Machine Learning</af-tag>
+     * <af-tag size="large" variant="white">Document Processing</af-tag>
      * ```
      */
     interface AfTag {
@@ -1378,13 +1438,13 @@ export namespace Components {
          */
         "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
+          * The size of the tag - `x-small` - Compact tag with minimal padding - `small` - Small tag with moderate padding (default) - `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'
+          * Visual variant of the tag. `default` inherits tag colors from the parent theme context. Theme-named variants force a specific palette.
+          * @default 'default'
          */
         "variant": TagVariant;
     }
@@ -1412,9 +1472,9 @@ export namespace Components {
          */
         "logoImage"?: string;
         /**
-          * Testimonial quote text
+          * Testimonial quote text. Falls back to the `quote-body` slot if that slot has content.
          */
-        "quote": string;
+        "quote"?: string;
         /**
           * Link to full case study
          */
@@ -1618,10 +1678,20 @@ export namespace Components {
           * Description text alignment. Falls back to textAlignment if not specified.
          */
         "descriptionAlignment"?: TextAlign;
+        /**
+          * Description colour variant. Same pattern as `headingColor`; useful for hero-style lockups where the description is rendered in the accent colour. - `default` (default) - uses `--af-typography-body-default` - `secondary` - uses `--af-typography-heading-secondary`
+          * @default 'default'
+         */
+        "descriptionColor": 'default' | 'secondary';
         /**
           * Heading text alignment. Falls back to textAlignment if not specified.
          */
         "headingAlignment"?: TextAlign;
+        /**
+          * Heading colour variant. Matches the Webflow pattern of `h1.primary` vs `h1.secondary`, where "secondary" renders in the theme's accent/heading- secondary colour (soft-clay on most themes). - `primary` (default) - uses `--af-typography-heading-primary` - `secondary` - uses `--af-typography-heading-secondary`
+          * @default 'primary'
+         */
+        "headingColor": 'primary' | 'secondary';
         /**
           * The heading size (1-5, where 1 is largest)
           * @default 2
@@ -1848,7 +1918,8 @@ declare global {
     /**
      * Infinite scrolling carousel for client logos.
      * This is a section-level component that spans full width.
-     * It supports theming via the `theme` prop.
+     * Renders one or two scrolling rows; single row matches the Webflow reference,
+     * two rows (scrolling opposite directions) is the denser variant.
      * For headlines, use a separate TypographyLockup or Heading component above this carousel.
      */
     interface HTMLAfClientCarouselElement extends Components.AfClientCarousel, HTMLStencilElement {
@@ -2075,7 +2146,7 @@ declare global {
      * <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-button slot="buttons" variant="ghost">Learn more</af-button>
      * </af-icon-text>
      * ```
      */
@@ -2087,7 +2158,8 @@ declare global {
     };
     /**
      * Illustrated Card molecule component that combines a card with an illustration.
-     * Uses a theme background with text at top and an illustration from
+     * Uses a theme background with text at top, a button row in the middle, and
+     * an illustration from
      * @affinda /illustrations at the bottom.
      * Uses af-card atom internally and af-typography-lockup for text hierarchy.
      */
@@ -2124,6 +2196,14 @@ declare global {
      * />
      * ```
      * Alternatively, use the `illustration` slot for completely custom content.
+     * **Slot-based composition (preferred for rich content):**
+     * - `heading` — heading markup (overrides the `heading` prop when provided).
+     * - `description` — description markup (overrides the `description` prop).
+     * - `buttons` — custom button group (overrides the primary/secondary button
+     *   props; use when you need ghost variants, more than two buttons, or
+     *   per-button icons).
+     * - `illustration` — custom illustration markup.
+     * The string props remain supported for simple cases.
      */
     interface HTMLAfInPageBannerElement extends Components.AfInPageBanner, HTMLStencilElement {
     }
@@ -2296,10 +2376,10 @@ declare global {
      * - `start` - Primary navigation links (left side, desktop)
      * - `end` - Secondary/utility links (right side)
      * - `button` - Call-to-action button
-     * - `dropdown-solutions` - Mega-menu for Solutions dropdown
-     * - `dropdown-pricing` - Mega-menu for Pricing dropdown  
-     * - `dropdown-resources` - Mega-menu for Resources dropdown
-     * - `dropdown` - Generic dropdown slot
+     * - `dropdowns` - One or more dropdown panels, each a `<div data-for="id">`
+     *   where `id` matches the `data-dropdown="id"` attribute on the trigger.
+     *   Clicking a trigger toggles the matching panel; only one is visible at
+     *   a time.
      * - `mobile-menu` - Mobile menu content (use af-nav-accordion for accordion menus)
      * - `mobile-button` - CTA button for mobile menu (appears at top)
      */
@@ -2422,6 +2502,41 @@ declare global {
         prototype: HTMLAfStackElement;
         new (): HTMLAfStackElement;
     };
+    /**
+     * Stepper composite for "Sign up / Upload / See results"-style marketing
+     * flows. Renders children `af-stepper-step` elements in a horizontal row
+     * (desktop) or vertical stack (mobile), with a connector line between badges.
+     * Matches Webflow's `.stepper` pattern — numbered circled badges, a spine
+     * connector, and centered step text.
+     * @example ```html
+     * <af-stepper>
+     *   <af-stepper-step>
+     *     <h3 slot="heading">Sign up for free</h3>
+     *     <p slot="body">No sales calls, no credit cards.</p>
+     *   </af-stepper-step>
+     *   <af-stepper-step>...</af-stepper-step>
+     *   <af-stepper-step>...</af-stepper-step>
+     * </af-stepper>
+     * ```
+     */
+    interface HTMLAfStepperElement extends Components.AfStepper, HTMLStencilElement {
+    }
+    var HTMLAfStepperElement: {
+        prototype: HTMLAfStepperElement;
+        new (): HTMLAfStepperElement;
+    };
+    /**
+     * A single step within an af-stepper. Renders a numbered circular badge
+     * followed by slotted heading + body content.
+     * The parent af-stepper auto-assigns the `index` attribute based on DOM
+     * order, so consumers don't need to hand-number the steps.
+     */
+    interface HTMLAfStepperStepElement extends Components.AfStepperStep, HTMLStencilElement {
+    }
+    var HTMLAfStepperStepElement: {
+        prototype: HTMLAfStepperStepElement;
+        new (): HTMLAfStepperStepElement;
+    };
     interface HTMLAfSwitchElementEventMap {
         "afChange": { active: boolean };
     }
@@ -2492,10 +2607,13 @@ declare global {
     /**
      * Tag displays a label in a styled container.
      * Perfect for categorization, topics, or metadata display.
+     * The `default` variant inherits its colors from the parent theme context
+     * (af-section, af-card). Use explicit variants (`inkwell`, `white`,
+     * `soft-clay`, `mist-green`) to override.
      * @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 size="small" variant="inkwell">Machine Learning</af-tag>
+     * <af-tag size="large" variant="white">Document Processing</af-tag>
      * ```
      */
     interface HTMLAfTagElement extends Components.AfTag, HTMLStencilElement {
@@ -2716,6 +2834,8 @@ declare global {
         "af-spacer": HTMLAfSpacerElement;
         "af-split-section": HTMLAfSplitSectionElement;
         "af-stack": HTMLAfStackElement;
+        "af-stepper": HTMLAfStepperElement;
+        "af-stepper-step": HTMLAfStepperStepElement;
         "af-switch": HTMLAfSwitchElement;
         "af-tab": HTMLAfTabElement;
         "af-tab-bar": HTMLAfTabBarElement;
@@ -2734,6 +2854,8 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never };
+
     /**
      * Accordion container that manages multiple accordion items.
      * Controls which items are open based on mode (independent or exclusive).
@@ -2809,20 +2931,20 @@ declare namespace LocalJSX {
          */
         "href"?: string;
         /**
-          * The size of the button. - `default` - Standard size for primary CTAs - `small` - Compact size for inline or secondary contexts
+          * The size of the button. - `default` - Standard size for primary CTAs (12/24px padding) - `thin` - Compact inline/secondary size (8/16px padding)
           * @default 'default'
          */
-        "size"?: 'default' | 'small';
+        "size"?: 'default' | 'thin';
         /**
           * Button type (when not using href)
           * @default 'button'
          */
         "type"?: 'button' | 'submit' | 'reset';
         /**
-          * The visual variant of the button. - `primary` - Main CTA with filled background (use sparingly, 1-2 per view) - `secondary` - Supporting action with outlined style - `tertiary` - Subtle text-link style with underline
+          * The visual variant of the button. - `primary` - Main CTA with filled background (use sparingly, 1-2 per view) - `secondary` - Supporting action with outlined style - `ghost` - Link-style with themed underline on the label; commonly paired   with a right-pointing icon. Matches Webflow's "button ghost" variant.
           * @default 'primary'
          */
-        "variant"?: 'primary' | 'secondary' | 'tertiary';
+        "variant"?: 'primary' | 'secondary' | 'ghost';
     }
     interface AfButtonGroup {
         /**
@@ -2910,10 +3032,16 @@ declare namespace LocalJSX {
     /**
      * Infinite scrolling carousel for client logos.
      * This is a section-level component that spans full width.
-     * It supports theming via the `theme` prop.
+     * Renders one or two scrolling rows; single row matches the Webflow reference,
+     * two rows (scrolling opposite directions) is the denser variant.
      * For headlines, use a separate TypographyLockup or Heading component above this carousel.
      */
     interface AfClientCarousel {
+        /**
+          * Number of scrolling rows. - `1` (default) — single row scrolling left, matches the Webflow reference. - `2` — two rows scrolling in opposite directions.  When `rows="2"`, slot `row-1` and `row-2` independently. When `rows="1"`, slot the default slot (unnamed) or `row-1`.
+          * @default 1
+         */
+        "rows"?: 1 | 2;
         /**
           * Theme - sets background color and provides theme context to children
           * @default 'inkwell'
@@ -3333,7 +3461,7 @@ declare namespace LocalJSX {
      * <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-button slot="buttons" variant="ghost">Learn more</af-button>
      * </af-icon-text>
      * ```
      */
@@ -3360,7 +3488,8 @@ declare namespace LocalJSX {
     }
     /**
      * Illustrated Card molecule component that combines a card with an illustration.
-     * Uses a theme background with text at top and an illustration from
+     * Uses a theme background with text at top, a button row in the middle, and
+     * an illustration from
      * @affinda /illustrations at the bottom.
      * Uses af-card atom internally and af-typography-lockup for text hierarchy.
      */
@@ -3390,6 +3519,11 @@ declare namespace LocalJSX {
           * Alternative text for the image (required for accessibility)
          */
         "alt": string;
+        /**
+          * Shape / corner rounding variant. Matches Webflow's `.image-fill.rounded-*` patterns where only one edge is rounded so the image bleeds into a neighbouring section. - `rounded` (default) — symmetric rounded corners on all four sides. - `rounded-left` — rounded only on the left edge (top-left + bottom-left). - `rounded-right` — rounded only on the right edge. - `square` — no corner rounding.
+          * @default 'rounded'
+         */
+        "shape"?: 'rounded' | 'rounded-left' | 'rounded-right' | 'square';
         /**
           * The image source URL
          */
@@ -3412,6 +3546,14 @@ declare namespace LocalJSX {
      * />
      * ```
      * Alternatively, use the `illustration` slot for completely custom content.
+     * **Slot-based composition (preferred for rich content):**
+     * - `heading` — heading markup (overrides the `heading` prop when provided).
+     * - `description` — description markup (overrides the `description` prop).
+     * - `buttons` — custom button group (overrides the primary/secondary button
+     *   props; use when you need ghost variants, more than two buttons, or
+     *   per-button icons).
+     * - `illustration` — custom illustration markup.
+     * The string props remain supported for simple cases.
      */
     interface AfInPageBanner {
         /**
@@ -3789,10 +3931,10 @@ declare namespace LocalJSX {
      * - `start` - Primary navigation links (left side, desktop)
      * - `end` - Secondary/utility links (right side)
      * - `button` - Call-to-action button
-     * - `dropdown-solutions` - Mega-menu for Solutions dropdown
-     * - `dropdown-pricing` - Mega-menu for Pricing dropdown  
-     * - `dropdown-resources` - Mega-menu for Resources dropdown
-     * - `dropdown` - Generic dropdown slot
+     * - `dropdowns` - One or more dropdown panels, each a `<div data-for="id">`
+     *   where `id` matches the `data-dropdown="id"` attribute on the trigger.
+     *   Clicking a trigger toggles the matching panel; only one is visible at
+     *   a time.
      * - `mobile-menu` - Mobile menu content (use af-nav-accordion for accordion menus)
      * - `mobile-button` - CTA button for mobile menu (appears at top)
      */
@@ -4022,6 +4164,43 @@ declare namespace LocalJSX {
          */
         "wrap"?: boolean;
     }
+    /**
+     * Stepper composite for "Sign up / Upload / See results"-style marketing
+     * flows. Renders children `af-stepper-step` elements in a horizontal row
+     * (desktop) or vertical stack (mobile), with a connector line between badges.
+     * Matches Webflow's `.stepper` pattern — numbered circled badges, a spine
+     * connector, and centered step text.
+     * @example ```html
+     * <af-stepper>
+     *   <af-stepper-step>
+     *     <h3 slot="heading">Sign up for free</h3>
+     *     <p slot="body">No sales calls, no credit cards.</p>
+     *   </af-stepper-step>
+     *   <af-stepper-step>...</af-stepper-step>
+     *   <af-stepper-step>...</af-stepper-step>
+     * </af-stepper>
+     * ```
+     */
+    interface AfStepper {
+        /**
+          * Layout orientation. Horizontal on desktop, auto-stacks on mobile.
+          * @default 'horizontal'
+         */
+        "orientation"?: 'horizontal' | 'vertical';
+    }
+    /**
+     * A single step within an af-stepper. Renders a numbered circular badge
+     * followed by slotted heading + body content.
+     * The parent af-stepper auto-assigns the `index` attribute based on DOM
+     * order, so consumers don't need to hand-number the steps.
+     */
+    interface AfStepperStep {
+        /**
+          * Step number shown in the badge. Auto-assigned by the parent stepper if not explicitly set.
+          * @default 1
+         */
+        "index"?: number;
+    }
     /**
      * Switch component for toggling between on and off states.
      */
@@ -4128,10 +4307,13 @@ declare namespace LocalJSX {
     /**
      * Tag displays a label in a styled container.
      * Perfect for categorization, topics, or metadata display.
+     * The `default` variant inherits its colors from the parent theme context
+     * (af-section, af-card). Use explicit variants (`inkwell`, `white`,
+     * `soft-clay`, `mist-green`) to override.
      * @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 size="small" variant="inkwell">Machine Learning</af-tag>
+     * <af-tag size="large" variant="white">Document Processing</af-tag>
      * ```
      */
     interface AfTag {
@@ -4140,13 +4322,13 @@ declare namespace LocalJSX {
          */
         "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
+          * The size of the tag - `x-small` - Compact tag with minimal padding - `small` - Small tag with moderate padding (default) - `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'
+          * Visual variant of the tag. `default` inherits tag colors from the parent theme context. Theme-named variants force a specific palette.
+          * @default 'default'
          */
         "variant"?: TagVariant;
     }
@@ -4182,9 +4364,9 @@ declare namespace LocalJSX {
          */
         "onNavPrev"?: (event: AfTestimonialCustomEvent<void>) => void;
         /**
-          * Testimonial quote text
+          * Testimonial quote text. Falls back to the `quote-body` slot if that slot has content.
          */
-        "quote": string;
+        "quote"?: string;
         /**
           * Link to full case study
          */
@@ -4404,10 +4586,20 @@ declare namespace LocalJSX {
           * Description text alignment. Falls back to textAlignment if not specified.
          */
         "descriptionAlignment"?: TextAlign;
+        /**
+          * Description colour variant. Same pattern as `headingColor`; useful for hero-style lockups where the description is rendered in the accent colour. - `default` (default) - uses `--af-typography-body-default` - `secondary` - uses `--af-typography-heading-secondary`
+          * @default 'default'
+         */
+        "descriptionColor"?: 'default' | 'secondary';
         /**
           * Heading text alignment. Falls back to textAlignment if not specified.
          */
         "headingAlignment"?: TextAlign;
+        /**
+          * Heading colour variant. Matches the Webflow pattern of `h1.primary` vs `h1.secondary`, where "secondary" renders in the theme's accent/heading- secondary colour (soft-clay on most themes). - `primary` (default) - uses `--af-typography-heading-primary` - `secondary` - uses `--af-typography-heading-secondary`
+          * @default 'primary'
+         */
+        "headingColor"?: 'primary' | 'secondary';
         /**
           * The heading size (1-5, where 1 is largest)
           * @default 2
@@ -4473,72 +4665,449 @@ declare namespace LocalJSX {
          */
         "focusable"?: boolean;
     }
+
+    interface AfAccordionAttributes {
+        "mode": 'independent' | 'exclusive';
+        "value": string | string[];
+        "defaultValue": string | string[];
+    }
+    interface AfAccordionItemAttributes {
+        "itemId": string;
+        "open": boolean;
+        "disabled": boolean;
+    }
+    interface AfAspectRatioAttributes {
+        "ratio": string;
+    }
+    interface AfButtonAttributes {
+        "variant": 'primary' | 'secondary' | 'ghost';
+        "size": 'default' | 'thin';
+        "disabled": boolean;
+        "type": 'button' | 'submit' | 'reset';
+        "href": string;
+    }
+    interface AfButtonGroupAttributes {
+        "direction": 'horizontal' | 'vertical';
+        "gap": string;
+    }
+    interface AfCardAttributes {
+        "theme": 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
+        "stretch": boolean;
+    }
+    interface AfCenterAttributes {
+        "axis": Axis;
+        "inline": boolean;
+        "minHeight": string;
+    }
+    interface AfCheckboxAttributes {
+        "checked": boolean;
+        "indeterminate": boolean;
+        "disabled": boolean;
+        "name": string;
+        "value": string;
+    }
+    interface AfClientCarouselAttributes {
+        "theme": Theme;
+        "rows": 1 | 2;
+    }
+    interface AfColorSwatchAttributes {
+        "color": string;
+        "name": string;
+        "size": 'default' | 'large';
+    }
+    interface AfContactItemAttributes {
+        "label": string;
+        "value": string;
+    }
+    interface AfContainerAttributes {
+        "maxWidth": 'xlarge' | 'large' | 'medium' | 'fluid';
+    }
+    interface AfDividerAttributes {
+        "orientation": Orientation;
+        "spacing": Spacing;
+    }
+    interface AfFeatureAccordionAttributes {
+        "heading": string;
+        "items": string;
+        "cycleInterval": number;
+        "autoCycle": boolean;
+    }
+    interface AfFeatureCardAttributes {
+        "theme": 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
+        "layout": 'standard' | 'full-bleed';
+        "cardSize": 'default' | 'large' | 'flexible';
+        "headingSize": 1 | 2 | 3 | 4 | 5;
+        "imageSrc": string;
+        "imageAlt": string;
+    }
+    interface AfFeatureGridAttributes {
+        "columns": 1 | 2 | 3 | 4;
+        "mobileLayout": 'list' | 'scroll' | 'grid';
+    }
+    interface AfFieldsetAttributes {
+        "legend": string;
+        "orientation": 'vertical' | 'horizontal';
+        "disabled": boolean;
+    }
+    interface AfFooterAttributes {
+        "copyrightText": string;
+        "statusText": string;
+        "statusUrl": string;
+        "systemsOperational": boolean;
+        "showStatus": boolean;
+    }
+    interface AfFooterColumnAttributes {
+        "heading": string;
+    }
+    interface AfFooterLinkAttributes {
+        "href": string;
+        "external": boolean;
+    }
+    interface AfGridAttributes {
+        "columns": Columns;
+        "columnsLg": Columns;
+        "columnsMd": Columns;
+        "columnsSm": Columns;
+        "gap": Gap;
+        "align": Align;
+    }
+    interface AfGridCalloutAttributes {
+        "imageSrc": string;
+        "imageAlt": string;
+        "imagePosition": 'left' | 'right';
+        "columns": 2 | 3 | 4;
+        "headingSize": 1 | 2 | 3 | 4 | 5;
+    }
+    interface AfHeadingAttributes {
+        "level": 'xl' | '1' | '2' | '3' | '4' | '5';
+        "align": 'inherit' | 'left' | 'center' | 'right';
+    }
+    interface AfIconAttributes {
+        "name": IconName;
+        "size": number;
+        "label": string;
+    }
+    interface AfIconBoxAttributes {
+        "icon": IconName;
+        "size": 'small' | 'default' | 'large';
+    }
+    interface AfIconButtonAttributes {
+        "variant": 'primary' | 'secondary' | 'tertiary';
+        "size": 'large' | 'medium' | 'small';
+        "disabled": boolean;
+        "href": string;
+        "type": 'button' | 'submit' | 'reset';
+        "ariaLabel": string;
+    }
+    interface AfIconTextAttributes {
+        "icon": IconName;
+        "headingSize": 1 | 2 | 3 | 4 | 5;
+        "orientation": 'vertical' | 'horizontal';
+        "iconSize": 'small' | 'default' | 'large';
+    }
+    interface AfIllustratedCardAttributes {
+        "theme": 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
+        "breakpoint": 'desktop' | 'mobile';
+        "cardSize": 'default' | 'large';
+    }
+    interface AfImageAttributes {
+        "src": string;
+        "alt": string;
+        "shape": 'rounded' | 'rounded-left' | 'rounded-right' | 'square';
+    }
+    interface AfInPageBannerAttributes {
+        "theme": BannerTheme;
+        "heading": string;
+        "description": string;
+        "primaryButtonText": string;
+        "primaryButtonUrl": string;
+        "secondaryButtonText": string;
+        "secondaryButtonUrl": string;
+        "illustrationUrl": string;
+        "showWaveDecoration": boolean;
+    }
+    interface AfInlineAttributes {
+        "gap": Gap;
+        "align": Align;
+        "justify": Justify;
+        "wrap": boolean;
+    }
+    interface AfInputAttributes {
+        "label": string;
+        "description": string;
+        "placeholder": string;
+        "value": string;
+        "type": 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+        "name": string;
+        "disabled": boolean;
+        "required": boolean;
+        "readonly": boolean;
+        "error": string;
+        "showInfoIcon": boolean;
+        "showSearchIcon": boolean;
+        "clearable": boolean;
+        "autocomplete": string;
+        "maxlength": number;
+        "minlength": number;
+        "pattern": string;
+    }
+    interface AfNavAccordionAttributes {
+        "mode": 'independent' | 'exclusive';
+        "breakpoint": 'desktop' | 'mobile';
+        "value": string | string[];
+    }
+    interface AfNavAccordionItemAttributes {
+        "itemId": string;
+        "label": string;
+        "open": boolean;
+        "disabled": boolean;
+        "href": string;
+        "breakpoint": 'desktop' | 'mobile';
+    }
+    interface AfNavCardAttributes {
+        "heading": string;
+        "href": string;
+        "imageSrc": string;
+        "imageAlt": string;
+    }
+    interface AfNavItemAttributes {
+        "hierarchy": 'primary' | 'secondary';
+        "variant": '01' | '02';
+        "breakpoint": 'desktop' | 'mobile';
+        "href": string;
+        "active": boolean;
+    }
+    interface AfNavMenuAttributes {
+        "heading": string;
+        "breakpoint": 'desktop' | 'mobile';
+        "showBorder": boolean;
+        "cardStyle": boolean;
+    }
+    interface AfNavMenuNestAttributes {
+        "type": 'solutions' | 'solutions-alt' | 'resources' | 'pricing';
+        "breakpoint": 'desktop' | 'mobile';
+        "showSidebarBorder": boolean;
+    }
+    interface AfNavbarAttributes {
+        "showDefaultLogo": boolean;
+        "theme": 'white' | 'inkwell' | 'mist-green' | 'soft-clay';
+        "forceMobile": boolean;
+    }
+    interface AfNumberBadgeAttributes {
+        "number": NumberBadgeNumber;
+        "variant": NumberBadgeVariant;
+        "size": number;
+    }
+    interface AfProgressLineAttributes {
+        "progress": number;
+        "orientation": 'horizontal';
+    }
+    interface AfRadioAttributes {
+        "checked": boolean;
+        "disabled": boolean;
+        "name": string;
+        "value": string;
+    }
+    interface AfSectionAttributes {
+        "padding": 'none' | 'tight' | 'default' | 'loose';
+        "theme": 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
+        "container": boolean;
+    }
+    interface AfShowAttributes {
+        "above": Breakpoint;
+        "below": Breakpoint;
+    }
+    interface AfSocialLinkAttributes {
+        "href": string;
+        "label": string;
+        "icon": 'linkedin' | 'youtube' | 'github' | 'twitter' | 'facebook' | 'custom';
+    }
+    interface AfSpacerAttributes {
+        "size": Size;
+        "flex": boolean;
+        "axis": 'horizontal' | 'vertical' | 'both';
+    }
+    interface AfSplitSectionAttributes {
+        "topTheme": Theme;
+        "bottomTheme": Theme;
+        "padding": 'none' | 'tight' | 'default' | 'loose';
+        "container": boolean;
+    }
+    interface AfStackAttributes {
+        "direction": Direction;
+        "gap": Gap;
+        "align": Align;
+        "justify": Justify;
+        "wrap": boolean;
+    }
+    interface AfStepperAttributes {
+        "orientation": 'horizontal' | 'vertical';
+    }
+    interface AfStepperStepAttributes {
+        "index": number;
+    }
+    interface AfSwitchAttributes {
+        "active": boolean;
+        "disabled": boolean;
+        "name": string;
+        "value": string;
+    }
+    interface AfTabAttributes {
+        "label": string;
+        "active": boolean;
+        "disabled": boolean;
+        "shape": TabShape;
+        "displayIcon": boolean;
+        "displayNumber": boolean;
+        "value": string;
+    }
+    interface AfTabBarAttributes {
+        "shape": TabBarShape;
+        "breakpoint": TabBarBreakpoint;
+    }
+    interface AfTagAttributes {
+        "size": TagSize;
+        "variant": TagVariant;
+        "href": string;
+    }
+    interface AfTestimonialAttributes {
+        "backgroundImage": string;
+        "logoImage": string;
+        "quote": string;
+        "attribution": string;
+        "readMoreLink": string;
+        "showNavigation": boolean;
+        "hasPrev": boolean;
+        "hasNext": boolean;
+    }
+    interface AfTestimonialStatAttributes {
+        "value": string;
+        "description": string;
+        "accentBorder": boolean;
+    }
+    interface AfTextAttributes {
+        "variant": 'xlarge' | 'large' | 'medium' | 'small';
+        "align": 'left' | 'center' | 'right';
+        "as": 'p' | 'span' | 'div' | 'label';
+    }
+    interface AfTextImageAttributes {
+        "imagePosition": 'left' | 'right';
+        "imageProportion": '1/3' | '1/4' | '100%';
+        "src": string;
+        "alt": string;
+        "showSecondLockup": boolean;
+    }
+    interface AfTextImageNestAttributes {
+        "layout": 'single' | 'grid-2' | 'grid-3' | 'grid-4' | 'stacked';
+    }
+    interface AfTextareaAttributes {
+        "label": string;
+        "description": string;
+        "placeholder": string;
+        "value": string;
+        "name": string;
+        "disabled": boolean;
+        "required": boolean;
+        "readonly": boolean;
+        "error": string;
+        "showInfoIcon": boolean;
+        "rows": number;
+        "maxlength": number;
+        "minlength": number;
+        "resize": 'none' | 'vertical' | 'horizontal' | 'both';
+    }
+    interface AfThemeOverrideAttributes {
+        "theme": 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
+    }
+    interface AfTypographyLockupAttributes {
+        "headingSize": 1 | 2 | 3 | 4 | 5;
+        "breakpoint": 'desktop' | 'mobile';
+        "textAlignment": TextAlign;
+        "headingAlignment": TextAlign;
+        "descriptionAlignment": TextAlign;
+        "buttonLayout": 'horizontal' | 'vertical';
+        "buttonsAlignment": TextAlign;
+        "maxWidth": number;
+        "headingColor": 'primary' | 'secondary';
+        "descriptionColor": 'default' | 'secondary';
+    }
+    interface AfVideoContainerAttributes {
+        "videoThumbnailUrl": string;
+        "videoAlt": string;
+        "videoUrl": string;
+    }
+    interface AfVisuallyHiddenAttributes {
+        "focusable": boolean;
+    }
+
     interface IntrinsicElements {
-        "af-accordion": AfAccordion;
-        "af-accordion-item": AfAccordionItem;
-        "af-aspect-ratio": AfAspectRatio;
-        "af-button": AfButton;
-        "af-button-group": AfButtonGroup;
-        "af-card": AfCard;
-        "af-center": AfCenter;
-        "af-checkbox": AfCheckbox;
-        "af-client-carousel": AfClientCarousel;
-        "af-color-swatch": AfColorSwatch;
-        "af-contact-item": AfContactItem;
-        "af-container": AfContainer;
-        "af-divider": AfDivider;
-        "af-feature-accordion": AfFeatureAccordion;
-        "af-feature-card": AfFeatureCard;
-        "af-feature-grid": AfFeatureGrid;
-        "af-fieldset": AfFieldset;
-        "af-footer": AfFooter;
-        "af-footer-column": AfFooterColumn;
-        "af-footer-link": AfFooterLink;
-        "af-grid": AfGrid;
-        "af-grid-callout": AfGridCallout;
-        "af-heading": AfHeading;
-        "af-icon": AfIcon;
-        "af-icon-box": AfIconBox;
-        "af-icon-button": AfIconButton;
-        "af-icon-text": AfIconText;
-        "af-illustrated-card": AfIllustratedCard;
-        "af-image": AfImage;
-        "af-in-page-banner": AfInPageBanner;
-        "af-inline": AfInline;
-        "af-input": AfInput;
+        "af-accordion": Omit<AfAccordion, keyof AfAccordionAttributes> & { [K in keyof AfAccordion & keyof AfAccordionAttributes]?: AfAccordion[K] } & { [K in keyof AfAccordion & keyof AfAccordionAttributes as `attr:${K}`]?: AfAccordionAttributes[K] } & { [K in keyof AfAccordion & keyof AfAccordionAttributes as `prop:${K}`]?: AfAccordion[K] };
+        "af-accordion-item": Omit<AfAccordionItem, keyof AfAccordionItemAttributes> & { [K in keyof AfAccordionItem & keyof AfAccordionItemAttributes]?: AfAccordionItem[K] } & { [K in keyof AfAccordionItem & keyof AfAccordionItemAttributes as `attr:${K}`]?: AfAccordionItemAttributes[K] } & { [K in keyof AfAccordionItem & keyof AfAccordionItemAttributes as `prop:${K}`]?: AfAccordionItem[K] } & OneOf<"itemId", AfAccordionItem["itemId"], AfAccordionItemAttributes["itemId"]>;
+        "af-aspect-ratio": Omit<AfAspectRatio, keyof AfAspectRatioAttributes> & { [K in keyof AfAspectRatio & keyof AfAspectRatioAttributes]?: AfAspectRatio[K] } & { [K in keyof AfAspectRatio & keyof AfAspectRatioAttributes as `attr:${K}`]?: AfAspectRatioAttributes[K] } & { [K in keyof AfAspectRatio & keyof AfAspectRatioAttributes as `prop:${K}`]?: AfAspectRatio[K] };
+        "af-button": Omit<AfButton, keyof AfButtonAttributes> & { [K in keyof AfButton & keyof AfButtonAttributes]?: AfButton[K] } & { [K in keyof AfButton & keyof AfButtonAttributes as `attr:${K}`]?: AfButtonAttributes[K] } & { [K in keyof AfButton & keyof AfButtonAttributes as `prop:${K}`]?: AfButton[K] };
+        "af-button-group": Omit<AfButtonGroup, keyof AfButtonGroupAttributes> & { [K in keyof AfButtonGroup & keyof AfButtonGroupAttributes]?: AfButtonGroup[K] } & { [K in keyof AfButtonGroup & keyof AfButtonGroupAttributes as `attr:${K}`]?: AfButtonGroupAttributes[K] } & { [K in keyof AfButtonGroup & keyof AfButtonGroupAttributes as `prop:${K}`]?: AfButtonGroup[K] };
+        "af-card": Omit<AfCard, keyof AfCardAttributes> & { [K in keyof AfCard & keyof AfCardAttributes]?: AfCard[K] } & { [K in keyof AfCard & keyof AfCardAttributes as `attr:${K}`]?: AfCardAttributes[K] } & { [K in keyof AfCard & keyof AfCardAttributes as `prop:${K}`]?: AfCard[K] };
+        "af-center": Omit<AfCenter, keyof AfCenterAttributes> & { [K in keyof AfCenter & keyof AfCenterAttributes]?: AfCenter[K] } & { [K in keyof AfCenter & keyof AfCenterAttributes as `attr:${K}`]?: AfCenterAttributes[K] } & { [K in keyof AfCenter & keyof AfCenterAttributes as `prop:${K}`]?: AfCenter[K] };
+        "af-checkbox": Omit<AfCheckbox, keyof AfCheckboxAttributes> & { [K in keyof AfCheckbox & keyof AfCheckboxAttributes]?: AfCheckbox[K] } & { [K in keyof AfCheckbox & keyof AfCheckboxAttributes as `attr:${K}`]?: AfCheckboxAttributes[K] } & { [K in keyof AfCheckbox & keyof AfCheckboxAttributes as `prop:${K}`]?: AfCheckbox[K] };
+        "af-client-carousel": Omit<AfClientCarousel, keyof AfClientCarouselAttributes> & { [K in keyof AfClientCarousel & keyof AfClientCarouselAttributes]?: AfClientCarousel[K] } & { [K in keyof AfClientCarousel & keyof AfClientCarouselAttributes as `attr:${K}`]?: AfClientCarouselAttributes[K] } & { [K in keyof AfClientCarousel & keyof AfClientCarouselAttributes as `prop:${K}`]?: AfClientCarousel[K] };
+        "af-color-swatch": Omit<AfColorSwatch, keyof AfColorSwatchAttributes> & { [K in keyof AfColorSwatch & keyof AfColorSwatchAttributes]?: AfColorSwatch[K] } & { [K in keyof AfColorSwatch & keyof AfColorSwatchAttributes as `attr:${K}`]?: AfColorSwatchAttributes[K] } & { [K in keyof AfColorSwatch & keyof AfColorSwatchAttributes as `prop:${K}`]?: AfColorSwatch[K] } & OneOf<"color", AfColorSwatch["color"], AfColorSwatchAttributes["color"]> & OneOf<"name", AfColorSwatch["name"], AfColorSwatchAttributes["name"]>;
+        "af-contact-item": Omit<AfContactItem, keyof AfContactItemAttributes> & { [K in keyof AfContactItem & keyof AfContactItemAttributes]?: AfContactItem[K] } & { [K in keyof AfContactItem & keyof AfContactItemAttributes as `attr:${K}`]?: AfContactItemAttributes[K] } & { [K in keyof AfContactItem & keyof AfContactItemAttributes as `prop:${K}`]?: AfContactItem[K] };
+        "af-container": Omit<AfContainer, keyof AfContainerAttributes> & { [K in keyof AfContainer & keyof AfContainerAttributes]?: AfContainer[K] } & { [K in keyof AfContainer & keyof AfContainerAttributes as `attr:${K}`]?: AfContainerAttributes[K] } & { [K in keyof AfContainer & keyof AfContainerAttributes as `prop:${K}`]?: AfContainer[K] };
+        "af-divider": Omit<AfDivider, keyof AfDividerAttributes> & { [K in keyof AfDivider & keyof AfDividerAttributes]?: AfDivider[K] } & { [K in keyof AfDivider & keyof AfDividerAttributes as `attr:${K}`]?: AfDividerAttributes[K] } & { [K in keyof AfDivider & keyof AfDividerAttributes as `prop:${K}`]?: AfDivider[K] };
+        "af-feature-accordion": Omit<AfFeatureAccordion, keyof AfFeatureAccordionAttributes> & { [K in keyof AfFeatureAccordion & keyof AfFeatureAccordionAttributes]?: AfFeatureAccordion[K] } & { [K in keyof AfFeatureAccordion & keyof AfFeatureAccordionAttributes as `attr:${K}`]?: AfFeatureAccordionAttributes[K] } & { [K in keyof AfFeatureAccordion & keyof AfFeatureAccordionAttributes as `prop:${K}`]?: AfFeatureAccordion[K] };
+        "af-feature-card": Omit<AfFeatureCard, keyof AfFeatureCardAttributes> & { [K in keyof AfFeatureCard & keyof AfFeatureCardAttributes]?: AfFeatureCard[K] } & { [K in keyof AfFeatureCard & keyof AfFeatureCardAttributes as `attr:${K}`]?: AfFeatureCardAttributes[K] } & { [K in keyof AfFeatureCard & keyof AfFeatureCardAttributes as `prop:${K}`]?: AfFeatureCard[K] };
+        "af-feature-grid": Omit<AfFeatureGrid, keyof AfFeatureGridAttributes> & { [K in keyof AfFeatureGrid & keyof AfFeatureGridAttributes]?: AfFeatureGrid[K] } & { [K in keyof AfFeatureGrid & keyof AfFeatureGridAttributes as `attr:${K}`]?: AfFeatureGridAttributes[K] } & { [K in keyof AfFeatureGrid & keyof AfFeatureGridAttributes as `prop:${K}`]?: AfFeatureGrid[K] };
+        "af-fieldset": Omit<AfFieldset, keyof AfFieldsetAttributes> & { [K in keyof AfFieldset & keyof AfFieldsetAttributes]?: AfFieldset[K] } & { [K in keyof AfFieldset & keyof AfFieldsetAttributes as `attr:${K}`]?: AfFieldsetAttributes[K] } & { [K in keyof AfFieldset & keyof AfFieldsetAttributes as `prop:${K}`]?: AfFieldset[K] };
+        "af-footer": Omit<AfFooter, keyof AfFooterAttributes> & { [K in keyof AfFooter & keyof AfFooterAttributes]?: AfFooter[K] } & { [K in keyof AfFooter & keyof AfFooterAttributes as `attr:${K}`]?: AfFooterAttributes[K] } & { [K in keyof AfFooter & keyof AfFooterAttributes as `prop:${K}`]?: AfFooter[K] };
+        "af-footer-column": Omit<AfFooterColumn, keyof AfFooterColumnAttributes> & { [K in keyof AfFooterColumn & keyof AfFooterColumnAttributes]?: AfFooterColumn[K] } & { [K in keyof AfFooterColumn & keyof AfFooterColumnAttributes as `attr:${K}`]?: AfFooterColumnAttributes[K] } & { [K in keyof AfFooterColumn & keyof AfFooterColumnAttributes as `prop:${K}`]?: AfFooterColumn[K] };
+        "af-footer-link": Omit<AfFooterLink, keyof AfFooterLinkAttributes> & { [K in keyof AfFooterLink & keyof AfFooterLinkAttributes]?: AfFooterLink[K] } & { [K in keyof AfFooterLink & keyof AfFooterLinkAttributes as `attr:${K}`]?: AfFooterLinkAttributes[K] } & { [K in keyof AfFooterLink & keyof AfFooterLinkAttributes as `prop:${K}`]?: AfFooterLink[K] };
+        "af-grid": Omit<AfGrid, keyof AfGridAttributes> & { [K in keyof AfGrid & keyof AfGridAttributes]?: AfGrid[K] } & { [K in keyof AfGrid & keyof AfGridAttributes as `attr:${K}`]?: AfGridAttributes[K] } & { [K in keyof AfGrid & keyof AfGridAttributes as `prop:${K}`]?: AfGrid[K] };
+        "af-grid-callout": Omit<AfGridCallout, keyof AfGridCalloutAttributes> & { [K in keyof AfGridCallout & keyof AfGridCalloutAttributes]?: AfGridCallout[K] } & { [K in keyof AfGridCallout & keyof AfGridCalloutAttributes as `attr:${K}`]?: AfGridCalloutAttributes[K] } & { [K in keyof AfGridCallout & keyof AfGridCalloutAttributes as `prop:${K}`]?: AfGridCallout[K] };
+        "af-heading": Omit<AfHeading, keyof AfHeadingAttributes> & { [K in keyof AfHeading & keyof AfHeadingAttributes]?: AfHeading[K] } & { [K in keyof AfHeading & keyof AfHeadingAttributes as `attr:${K}`]?: AfHeadingAttributes[K] } & { [K in keyof AfHeading & keyof AfHeadingAttributes as `prop:${K}`]?: AfHeading[K] };
+        "af-icon": Omit<AfIcon, keyof AfIconAttributes> & { [K in keyof AfIcon & keyof AfIconAttributes]?: AfIcon[K] } & { [K in keyof AfIcon & keyof AfIconAttributes as `attr:${K}`]?: AfIconAttributes[K] } & { [K in keyof AfIcon & keyof AfIconAttributes as `prop:${K}`]?: AfIcon[K] } & OneOf<"name", AfIcon["name"], AfIconAttributes["name"]>;
+        "af-icon-box": Omit<AfIconBox, keyof AfIconBoxAttributes> & { [K in keyof AfIconBox & keyof AfIconBoxAttributes]?: AfIconBox[K] } & { [K in keyof AfIconBox & keyof AfIconBoxAttributes as `attr:${K}`]?: AfIconBoxAttributes[K] } & { [K in keyof AfIconBox & keyof AfIconBoxAttributes as `prop:${K}`]?: AfIconBox[K] } & OneOf<"icon", AfIconBox["icon"], AfIconBoxAttributes["icon"]>;
+        "af-icon-button": Omit<AfIconButton, keyof AfIconButtonAttributes> & { [K in keyof AfIconButton & keyof AfIconButtonAttributes]?: AfIconButton[K] } & { [K in keyof AfIconButton & keyof AfIconButtonAttributes as `attr:${K}`]?: AfIconButtonAttributes[K] } & { [K in keyof AfIconButton & keyof AfIconButtonAttributes as `prop:${K}`]?: AfIconButton[K] } & OneOf<"ariaLabel", AfIconButton["ariaLabel"], AfIconButtonAttributes["ariaLabel"]>;
+        "af-icon-text": Omit<AfIconText, keyof AfIconTextAttributes> & { [K in keyof AfIconText & keyof AfIconTextAttributes]?: AfIconText[K] } & { [K in keyof AfIconText & keyof AfIconTextAttributes as `attr:${K}`]?: AfIconTextAttributes[K] } & { [K in keyof AfIconText & keyof AfIconTextAttributes as `prop:${K}`]?: AfIconText[K] } & OneOf<"icon", AfIconText["icon"], AfIconTextAttributes["icon"]>;
+        "af-illustrated-card": Omit<AfIllustratedCard, keyof AfIllustratedCardAttributes> & { [K in keyof AfIllustratedCard & keyof AfIllustratedCardAttributes]?: AfIllustratedCard[K] } & { [K in keyof AfIllustratedCard & keyof AfIllustratedCardAttributes as `attr:${K}`]?: AfIllustratedCardAttributes[K] } & { [K in keyof AfIllustratedCard & keyof AfIllustratedCardAttributes as `prop:${K}`]?: AfIllustratedCard[K] };
+        "af-image": Omit<AfImage, keyof AfImageAttributes> & { [K in keyof AfImage & keyof AfImageAttributes]?: AfImage[K] } & { [K in keyof AfImage & keyof AfImageAttributes as `attr:${K}`]?: AfImageAttributes[K] } & { [K in keyof AfImage & keyof AfImageAttributes as `prop:${K}`]?: AfImage[K] } & OneOf<"src", AfImage["src"], AfImageAttributes["src"]> & OneOf<"alt", AfImage["alt"], AfImageAttributes["alt"]>;
+        "af-in-page-banner": Omit<AfInPageBanner, keyof AfInPageBannerAttributes> & { [K in keyof AfInPageBanner & keyof AfInPageBannerAttributes]?: AfInPageBanner[K] } & { [K in keyof AfInPageBanner & keyof AfInPageBannerAttributes as `attr:${K}`]?: AfInPageBannerAttributes[K] } & { [K in keyof AfInPageBanner & keyof AfInPageBannerAttributes as `prop:${K}`]?: AfInPageBanner[K] };
+        "af-inline": Omit<AfInline, keyof AfInlineAttributes> & { [K in keyof AfInline & keyof AfInlineAttributes]?: AfInline[K] } & { [K in keyof AfInline & keyof AfInlineAttributes as `attr:${K}`]?: AfInlineAttributes[K] } & { [K in keyof AfInline & keyof AfInlineAttributes as `prop:${K}`]?: AfInline[K] };
+        "af-input": Omit<AfInput, keyof AfInputAttributes> & { [K in keyof AfInput & keyof AfInputAttributes]?: AfInput[K] } & { [K in keyof AfInput & keyof AfInputAttributes as `attr:${K}`]?: AfInputAttributes[K] } & { [K in keyof AfInput & keyof AfInputAttributes as `prop:${K}`]?: AfInput[K] };
         "af-logo": AfLogo;
         "af-logo-well": AfLogoWell;
-        "af-nav-accordion": AfNavAccordion;
-        "af-nav-accordion-item": AfNavAccordionItem;
-        "af-nav-card": AfNavCard;
-        "af-nav-item": AfNavItem;
-        "af-nav-menu": AfNavMenu;
-        "af-nav-menu-nest": AfNavMenuNest;
-        "af-navbar": AfNavbar;
-        "af-number-badge": AfNumberBadge;
-        "af-progress-line": AfProgressLine;
-        "af-radio": AfRadio;
-        "af-section": AfSection;
-        "af-show": AfShow;
-        "af-social-link": AfSocialLink;
-        "af-spacer": AfSpacer;
-        "af-split-section": AfSplitSection;
-        "af-stack": AfStack;
-        "af-switch": AfSwitch;
-        "af-tab": AfTab;
-        "af-tab-bar": AfTabBar;
-        "af-tag": AfTag;
-        "af-testimonial": AfTestimonial;
+        "af-nav-accordion": Omit<AfNavAccordion, keyof AfNavAccordionAttributes> & { [K in keyof AfNavAccordion & keyof AfNavAccordionAttributes]?: AfNavAccordion[K] } & { [K in keyof AfNavAccordion & keyof AfNavAccordionAttributes as `attr:${K}`]?: AfNavAccordionAttributes[K] } & { [K in keyof AfNavAccordion & keyof AfNavAccordionAttributes as `prop:${K}`]?: AfNavAccordion[K] };
+        "af-nav-accordion-item": Omit<AfNavAccordionItem, keyof AfNavAccordionItemAttributes> & { [K in keyof AfNavAccordionItem & keyof AfNavAccordionItemAttributes]?: AfNavAccordionItem[K] } & { [K in keyof AfNavAccordionItem & keyof AfNavAccordionItemAttributes as `attr:${K}`]?: AfNavAccordionItemAttributes[K] } & { [K in keyof AfNavAccordionItem & keyof AfNavAccordionItemAttributes as `prop:${K}`]?: AfNavAccordionItem[K] } & OneOf<"itemId", AfNavAccordionItem["itemId"], AfNavAccordionItemAttributes["itemId"]>;
+        "af-nav-card": Omit<AfNavCard, keyof AfNavCardAttributes> & { [K in keyof AfNavCard & keyof AfNavCardAttributes]?: AfNavCard[K] } & { [K in keyof AfNavCard & keyof AfNavCardAttributes as `attr:${K}`]?: AfNavCardAttributes[K] } & { [K in keyof AfNavCard & keyof AfNavCardAttributes as `prop:${K}`]?: AfNavCard[K] };
+        "af-nav-item": Omit<AfNavItem, keyof AfNavItemAttributes> & { [K in keyof AfNavItem & keyof AfNavItemAttributes]?: AfNavItem[K] } & { [K in keyof AfNavItem & keyof AfNavItemAttributes as `attr:${K}`]?: AfNavItemAttributes[K] } & { [K in keyof AfNavItem & keyof AfNavItemAttributes as `prop:${K}`]?: AfNavItem[K] };
+        "af-nav-menu": Omit<AfNavMenu, keyof AfNavMenuAttributes> & { [K in keyof AfNavMenu & keyof AfNavMenuAttributes]?: AfNavMenu[K] } & { [K in keyof AfNavMenu & keyof AfNavMenuAttributes as `attr:${K}`]?: AfNavMenuAttributes[K] } & { [K in keyof AfNavMenu & keyof AfNavMenuAttributes as `prop:${K}`]?: AfNavMenu[K] };
+        "af-nav-menu-nest": Omit<AfNavMenuNest, keyof AfNavMenuNestAttributes> & { [K in keyof AfNavMenuNest & keyof AfNavMenuNestAttributes]?: AfNavMenuNest[K] } & { [K in keyof AfNavMenuNest & keyof AfNavMenuNestAttributes as `attr:${K}`]?: AfNavMenuNestAttributes[K] } & { [K in keyof AfNavMenuNest & keyof AfNavMenuNestAttributes as `prop:${K}`]?: AfNavMenuNest[K] };
+        "af-navbar": Omit<AfNavbar, keyof AfNavbarAttributes> & { [K in keyof AfNavbar & keyof AfNavbarAttributes]?: AfNavbar[K] } & { [K in keyof AfNavbar & keyof AfNavbarAttributes as `attr:${K}`]?: AfNavbarAttributes[K] } & { [K in keyof AfNavbar & keyof AfNavbarAttributes as `prop:${K}`]?: AfNavbar[K] };
+        "af-number-badge": Omit<AfNumberBadge, keyof AfNumberBadgeAttributes> & { [K in keyof AfNumberBadge & keyof AfNumberBadgeAttributes]?: AfNumberBadge[K] } & { [K in keyof AfNumberBadge & keyof AfNumberBadgeAttributes as `attr:${K}`]?: AfNumberBadgeAttributes[K] } & { [K in keyof AfNumberBadge & keyof AfNumberBadgeAttributes as `prop:${K}`]?: AfNumberBadge[K] };
+        "af-progress-line": Omit<AfProgressLine, keyof AfProgressLineAttributes> & { [K in keyof AfProgressLine & keyof AfProgressLineAttributes]?: AfProgressLine[K] } & { [K in keyof AfProgressLine & keyof AfProgressLineAttributes as `attr:${K}`]?: AfProgressLineAttributes[K] } & { [K in keyof AfProgressLine & keyof AfProgressLineAttributes as `prop:${K}`]?: AfProgressLine[K] };
+        "af-radio": Omit<AfRadio, keyof AfRadioAttributes> & { [K in keyof AfRadio & keyof AfRadioAttributes]?: AfRadio[K] } & { [K in keyof AfRadio & keyof AfRadioAttributes as `attr:${K}`]?: AfRadioAttributes[K] } & { [K in keyof AfRadio & keyof AfRadioAttributes as `prop:${K}`]?: AfRadio[K] };
+        "af-section": Omit<AfSection, keyof AfSectionAttributes> & { [K in keyof AfSection & keyof AfSectionAttributes]?: AfSection[K] } & { [K in keyof AfSection & keyof AfSectionAttributes as `attr:${K}`]?: AfSectionAttributes[K] } & { [K in keyof AfSection & keyof AfSectionAttributes as `prop:${K}`]?: AfSection[K] };
+        "af-show": Omit<AfShow, keyof AfShowAttributes> & { [K in keyof AfShow & keyof AfShowAttributes]?: AfShow[K] } & { [K in keyof AfShow & keyof AfShowAttributes as `attr:${K}`]?: AfShowAttributes[K] } & { [K in keyof AfShow & keyof AfShowAttributes as `prop:${K}`]?: AfShow[K] };
+        "af-social-link": Omit<AfSocialLink, keyof AfSocialLinkAttributes> & { [K in keyof AfSocialLink & keyof AfSocialLinkAttributes]?: AfSocialLink[K] } & { [K in keyof AfSocialLink & keyof AfSocialLinkAttributes as `attr:${K}`]?: AfSocialLinkAttributes[K] } & { [K in keyof AfSocialLink & keyof AfSocialLinkAttributes as `prop:${K}`]?: AfSocialLink[K] };
+        "af-spacer": Omit<AfSpacer, keyof AfSpacerAttributes> & { [K in keyof AfSpacer & keyof AfSpacerAttributes]?: AfSpacer[K] } & { [K in keyof AfSpacer & keyof AfSpacerAttributes as `attr:${K}`]?: AfSpacerAttributes[K] } & { [K in keyof AfSpacer & keyof AfSpacerAttributes as `prop:${K}`]?: AfSpacer[K] };
+        "af-split-section": Omit<AfSplitSection, keyof AfSplitSectionAttributes> & { [K in keyof AfSplitSection & keyof AfSplitSectionAttributes]?: AfSplitSection[K] } & { [K in keyof AfSplitSection & keyof AfSplitSectionAttributes as `attr:${K}`]?: AfSplitSectionAttributes[K] } & { [K in keyof AfSplitSection & keyof AfSplitSectionAttributes as `prop:${K}`]?: AfSplitSection[K] };
+        "af-stack": Omit<AfStack, keyof AfStackAttributes> & { [K in keyof AfStack & keyof AfStackAttributes]?: AfStack[K] } & { [K in keyof AfStack & keyof AfStackAttributes as `attr:${K}`]?: AfStackAttributes[K] } & { [K in keyof AfStack & keyof AfStackAttributes as `prop:${K}`]?: AfStack[K] };
+        "af-stepper": Omit<AfStepper, keyof AfStepperAttributes> & { [K in keyof AfStepper & keyof AfStepperAttributes]?: AfStepper[K] } & { [K in keyof AfStepper & keyof AfStepperAttributes as `attr:${K}`]?: AfStepperAttributes[K] } & { [K in keyof AfStepper & keyof AfStepperAttributes as `prop:${K}`]?: AfStepper[K] };
+        "af-stepper-step": Omit<AfStepperStep, keyof AfStepperStepAttributes> & { [K in keyof AfStepperStep & keyof AfStepperStepAttributes]?: AfStepperStep[K] } & { [K in keyof AfStepperStep & keyof AfStepperStepAttributes as `attr:${K}`]?: AfStepperStepAttributes[K] } & { [K in keyof AfStepperStep & keyof AfStepperStepAttributes as `prop:${K}`]?: AfStepperStep[K] };
+        "af-switch": Omit<AfSwitch, keyof AfSwitchAttributes> & { [K in keyof AfSwitch & keyof AfSwitchAttributes]?: AfSwitch[K] } & { [K in keyof AfSwitch & keyof AfSwitchAttributes as `attr:${K}`]?: AfSwitchAttributes[K] } & { [K in keyof AfSwitch & keyof AfSwitchAttributes as `prop:${K}`]?: AfSwitch[K] };
+        "af-tab": Omit<AfTab, keyof AfTabAttributes> & { [K in keyof AfTab & keyof AfTabAttributes]?: AfTab[K] } & { [K in keyof AfTab & keyof AfTabAttributes as `attr:${K}`]?: AfTabAttributes[K] } & { [K in keyof AfTab & keyof AfTabAttributes as `prop:${K}`]?: AfTab[K] };
+        "af-tab-bar": Omit<AfTabBar, keyof AfTabBarAttributes> & { [K in keyof AfTabBar & keyof AfTabBarAttributes]?: AfTabBar[K] } & { [K in keyof AfTabBar & keyof AfTabBarAttributes as `attr:${K}`]?: AfTabBarAttributes[K] } & { [K in keyof AfTabBar & keyof AfTabBarAttributes as `prop:${K}`]?: AfTabBar[K] };
+        "af-tag": Omit<AfTag, keyof AfTagAttributes> & { [K in keyof AfTag & keyof AfTagAttributes]?: AfTag[K] } & { [K in keyof AfTag & keyof AfTagAttributes as `attr:${K}`]?: AfTagAttributes[K] } & { [K in keyof AfTag & keyof AfTagAttributes as `prop:${K}`]?: AfTag[K] };
+        "af-testimonial": Omit<AfTestimonial, keyof AfTestimonialAttributes> & { [K in keyof AfTestimonial & keyof AfTestimonialAttributes]?: AfTestimonial[K] } & { [K in keyof AfTestimonial & keyof AfTestimonialAttributes as `attr:${K}`]?: AfTestimonialAttributes[K] } & { [K in keyof AfTestimonial & keyof AfTestimonialAttributes as `prop:${K}`]?: AfTestimonial[K] } & OneOf<"attribution", AfTestimonial["attribution"], AfTestimonialAttributes["attribution"]>;
         "af-testimonial-carousel": AfTestimonialCarousel;
-        "af-testimonial-stat": AfTestimonialStat;
-        "af-text": AfText;
-        "af-text-image": AfTextImage;
-        "af-text-image-nest": AfTextImageNest;
-        "af-textarea": AfTextarea;
-        "af-theme-override": AfThemeOverride;
-        "af-typography-lockup": AfTypographyLockup;
-        "af-video-container": AfVideoContainer;
-        "af-visually-hidden": AfVisuallyHidden;
+        "af-testimonial-stat": Omit<AfTestimonialStat, keyof AfTestimonialStatAttributes> & { [K in keyof AfTestimonialStat & keyof AfTestimonialStatAttributes]?: AfTestimonialStat[K] } & { [K in keyof AfTestimonialStat & keyof AfTestimonialStatAttributes as `attr:${K}`]?: AfTestimonialStatAttributes[K] } & { [K in keyof AfTestimonialStat & keyof AfTestimonialStatAttributes as `prop:${K}`]?: AfTestimonialStat[K] } & OneOf<"value", AfTestimonialStat["value"], AfTestimonialStatAttributes["value"]> & OneOf<"description", AfTestimonialStat["description"], AfTestimonialStatAttributes["description"]>;
+        "af-text": Omit<AfText, keyof AfTextAttributes> & { [K in keyof AfText & keyof AfTextAttributes]?: AfText[K] } & { [K in keyof AfText & keyof AfTextAttributes as `attr:${K}`]?: AfTextAttributes[K] } & { [K in keyof AfText & keyof AfTextAttributes as `prop:${K}`]?: AfText[K] };
+        "af-text-image": Omit<AfTextImage, keyof AfTextImageAttributes> & { [K in keyof AfTextImage & keyof AfTextImageAttributes]?: AfTextImage[K] } & { [K in keyof AfTextImage & keyof AfTextImageAttributes as `attr:${K}`]?: AfTextImageAttributes[K] } & { [K in keyof AfTextImage & keyof AfTextImageAttributes as `prop:${K}`]?: AfTextImage[K] };
+        "af-text-image-nest": Omit<AfTextImageNest, keyof AfTextImageNestAttributes> & { [K in keyof AfTextImageNest & keyof AfTextImageNestAttributes]?: AfTextImageNest[K] } & { [K in keyof AfTextImageNest & keyof AfTextImageNestAttributes as `attr:${K}`]?: AfTextImageNestAttributes[K] } & { [K in keyof AfTextImageNest & keyof AfTextImageNestAttributes as `prop:${K}`]?: AfTextImageNest[K] };
+        "af-textarea": Omit<AfTextarea, keyof AfTextareaAttributes> & { [K in keyof AfTextarea & keyof AfTextareaAttributes]?: AfTextarea[K] } & { [K in keyof AfTextarea & keyof AfTextareaAttributes as `attr:${K}`]?: AfTextareaAttributes[K] } & { [K in keyof AfTextarea & keyof AfTextareaAttributes as `prop:${K}`]?: AfTextarea[K] };
+        "af-theme-override": Omit<AfThemeOverride, keyof AfThemeOverrideAttributes> & { [K in keyof AfThemeOverride & keyof AfThemeOverrideAttributes]?: AfThemeOverride[K] } & { [K in keyof AfThemeOverride & keyof AfThemeOverrideAttributes as `attr:${K}`]?: AfThemeOverrideAttributes[K] } & { [K in keyof AfThemeOverride & keyof AfThemeOverrideAttributes as `prop:${K}`]?: AfThemeOverride[K] };
+        "af-typography-lockup": Omit<AfTypographyLockup, keyof AfTypographyLockupAttributes> & { [K in keyof AfTypographyLockup & keyof AfTypographyLockupAttributes]?: AfTypographyLockup[K] } & { [K in keyof AfTypographyLockup & keyof AfTypographyLockupAttributes as `attr:${K}`]?: AfTypographyLockupAttributes[K] } & { [K in keyof AfTypographyLockup & keyof AfTypographyLockupAttributes as `prop:${K}`]?: AfTypographyLockup[K] };
+        "af-video-container": Omit<AfVideoContainer, keyof AfVideoContainerAttributes> & { [K in keyof AfVideoContainer & keyof AfVideoContainerAttributes]?: AfVideoContainer[K] } & { [K in keyof AfVideoContainer & keyof AfVideoContainerAttributes as `attr:${K}`]?: AfVideoContainerAttributes[K] } & { [K in keyof AfVideoContainer & keyof AfVideoContainerAttributes as `prop:${K}`]?: AfVideoContainer[K] };
+        "af-visually-hidden": Omit<AfVisuallyHidden, keyof AfVisuallyHiddenAttributes> & { [K in keyof AfVisuallyHidden & keyof AfVisuallyHiddenAttributes]?: AfVisuallyHidden[K] } & { [K in keyof AfVisuallyHidden & keyof AfVisuallyHiddenAttributes as `attr:${K}`]?: AfVisuallyHiddenAttributes[K] } & { [K in keyof AfVisuallyHidden & keyof AfVisuallyHiddenAttributes as `prop:${K}`]?: AfVisuallyHidden[K] };
     }
 }
 export { LocalJSX as JSX };
@@ -4549,64 +5118,65 @@ declare module "@stencil/core" {
              * Accordion container that manages multiple accordion items.
              * Controls which items are open based on mode (independent or exclusive).
              */
-            "af-accordion": LocalJSX.AfAccordion & JSXBase.HTMLAttributes<HTMLAfAccordionElement>;
+            "af-accordion": LocalJSX.IntrinsicElements["af-accordion"] & JSXBase.HTMLAttributes<HTMLAfAccordionElement>;
             /**
              * A single collapsible accordion item with header and content.
              * Can be used standalone or within an af-accordion container.
              */
-            "af-accordion-item": LocalJSX.AfAccordionItem & JSXBase.HTMLAttributes<HTMLAfAccordionItemElement>;
+            "af-accordion-item": LocalJSX.IntrinsicElements["af-accordion-item"] & JSXBase.HTMLAttributes<HTMLAfAccordionItemElement>;
             /**
              * A container component that maintains a fixed aspect ratio for its content.
              * Useful for images, videos, or any content that needs to maintain specific proportions.
              */
-            "af-aspect-ratio": LocalJSX.AfAspectRatio & JSXBase.HTMLAttributes<HTMLAfAspectRatioElement>;
+            "af-aspect-ratio": LocalJSX.IntrinsicElements["af-aspect-ratio"] & JSXBase.HTMLAttributes<HTMLAfAspectRatioElement>;
             /**
              * Button component that inherits colors from theme context.
              * Colors are determined by the parent theme (af-section, af-card, etc.)
              * via CSS custom properties.
              */
-            "af-button": LocalJSX.AfButton & JSXBase.HTMLAttributes<HTMLAfButtonElement>;
-            "af-button-group": LocalJSX.AfButtonGroup & JSXBase.HTMLAttributes<HTMLAfButtonGroupElement>;
+            "af-button": LocalJSX.IntrinsicElements["af-button"] & JSXBase.HTMLAttributes<HTMLAfButtonElement>;
+            "af-button-group": LocalJSX.IntrinsicElements["af-button-group"] & JSXBase.HTMLAttributes<HTMLAfButtonGroupElement>;
             /**
              * Card atom component - a themed container with consistent styling.
              * Provides theme context to children via CSS custom properties.
              * This is a base building block used by molecule components like
              * af-feature-card and af-illustrated-card.
              */
-            "af-card": LocalJSX.AfCard & JSXBase.HTMLAttributes<HTMLAfCardElement>;
+            "af-card": LocalJSX.IntrinsicElements["af-card"] & JSXBase.HTMLAttributes<HTMLAfCardElement>;
             /**
              * Center layout component for quickly centering content.
              * Supports horizontal, vertical, or both axes.
              */
-            "af-center": LocalJSX.AfCenter & JSXBase.HTMLAttributes<HTMLAfCenterElement>;
+            "af-center": LocalJSX.IntrinsicElements["af-center"] & JSXBase.HTMLAttributes<HTMLAfCenterElement>;
             /**
              * Checkbox component for selecting multiple options.
              * Supports checked, unchecked, and indeterminate states.
              */
-            "af-checkbox": LocalJSX.AfCheckbox & JSXBase.HTMLAttributes<HTMLAfCheckboxElement>;
+            "af-checkbox": LocalJSX.IntrinsicElements["af-checkbox"] & JSXBase.HTMLAttributes<HTMLAfCheckboxElement>;
             /**
              * Infinite scrolling carousel for client logos.
              * This is a section-level component that spans full width.
-             * It supports theming via the `theme` prop.
+             * Renders one or two scrolling rows; single row matches the Webflow reference,
+             * two rows (scrolling opposite directions) is the denser variant.
              * 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>;
+            "af-client-carousel": LocalJSX.IntrinsicElements["af-client-carousel"] & JSXBase.HTMLAttributes<HTMLAfClientCarouselElement>;
+            "af-color-swatch": LocalJSX.IntrinsicElements["af-color-swatch"] & JSXBase.HTMLAttributes<HTMLAfColorSwatchElement>;
             /**
              * Contact item component for footer
              * Displays a label and value pair (e.g., "Sales enquiries" / "contact@example.com")
              */
-            "af-contact-item": LocalJSX.AfContactItem & JSXBase.HTMLAttributes<HTMLAfContactItemElement>;
+            "af-contact-item": LocalJSX.IntrinsicElements["af-contact-item"] & JSXBase.HTMLAttributes<HTMLAfContactItemElement>;
             /**
              * A responsive container component that provides consistent margins and max-width
              * constraints based on the Affinda grid system.
              */
-            "af-container": LocalJSX.AfContainer & JSXBase.HTMLAttributes<HTMLAfContainerElement>;
+            "af-container": LocalJSX.IntrinsicElements["af-container"] & JSXBase.HTMLAttributes<HTMLAfContainerElement>;
             /**
              * Divider component for visual separation between content.
              * Supports horizontal and vertical orientations with theme-aware styling.
              */
-            "af-divider": LocalJSX.AfDivider & JSXBase.HTMLAttributes<HTMLAfDividerElement>;
+            "af-divider": LocalJSX.IntrinsicElements["af-divider"] & JSXBase.HTMLAttributes<HTMLAfDividerElement>;
             /**
              * Feature accordion component with expandable items and accompanying image.
              * Used for showcasing product features with visual examples.
@@ -4619,7 +5189,7 @@ declare module "@stencil/core" {
              * </Section>
              * ```
              */
-            "af-feature-accordion": LocalJSX.AfFeatureAccordion & JSXBase.HTMLAttributes<HTMLAfFeatureAccordionElement>;
+            "af-feature-accordion": LocalJSX.IntrinsicElements["af-feature-accordion"] & JSXBase.HTMLAttributes<HTMLAfFeatureAccordionElement>;
             /**
              * Feature Card molecule component that combines a card with an image.
              * Two layout modes:
@@ -4628,39 +5198,39 @@ declare module "@stencil/core" {
              * Responsive: Automatically adapts to mobile viewport (≤768px).
              * Uses af-card atom internally and af-typography-lockup for text hierarchy.
              */
-            "af-feature-card": LocalJSX.AfFeatureCard & JSXBase.HTMLAttributes<HTMLAfFeatureCardElement>;
+            "af-feature-card": LocalJSX.IntrinsicElements["af-feature-card"] & JSXBase.HTMLAttributes<HTMLAfFeatureCardElement>;
             /**
              * Feature Grid component - CSS Grid container for feature cards.
              * Desktop: Configurable columns (1-4)
              * Mobile: List (stacked), horizontal scroll, or 2-column grid
              */
-            "af-feature-grid": LocalJSX.AfFeatureGrid & JSXBase.HTMLAttributes<HTMLAfFeatureGridElement>;
+            "af-feature-grid": LocalJSX.IntrinsicElements["af-feature-grid"] & JSXBase.HTMLAttributes<HTMLAfFeatureGridElement>;
             /**
              * Fieldset component for grouping related form controls.
              * Supports vertical and horizontal layouts with an optional legend/heading.
              */
-            "af-fieldset": LocalJSX.AfFieldset & JSXBase.HTMLAttributes<HTMLAfFieldsetElement>;
+            "af-fieldset": LocalJSX.IntrinsicElements["af-fieldset"] & JSXBase.HTMLAttributes<HTMLAfFieldsetElement>;
             /**
              * Footer component for marketing pages
              * Provides a flexible, slot-based layout for footer content
              * All content is passed via slots - no hardcoded links or content
              */
-            "af-footer": LocalJSX.AfFooter & JSXBase.HTMLAttributes<HTMLAfFooterElement>;
+            "af-footer": LocalJSX.IntrinsicElements["af-footer"] & JSXBase.HTMLAttributes<HTMLAfFooterElement>;
             /**
              * Footer navigation column component
              * Used within af-footer to create navigation link groups
              */
-            "af-footer-column": LocalJSX.AfFooterColumn & JSXBase.HTMLAttributes<HTMLAfFooterColumnElement>;
+            "af-footer-column": LocalJSX.IntrinsicElements["af-footer-column"] & JSXBase.HTMLAttributes<HTMLAfFooterColumnElement>;
             /**
              * Footer link component
              * Styled link for use in footer navigation columns
              */
-            "af-footer-link": LocalJSX.AfFooterLink & JSXBase.HTMLAttributes<HTMLAfFooterLinkElement>;
+            "af-footer-link": LocalJSX.IntrinsicElements["af-footer-link"] & JSXBase.HTMLAttributes<HTMLAfFooterLinkElement>;
             /**
              * Generic CSS Grid component for flexible column layouts.
              * Supports responsive column counts at different breakpoints.
              */
-            "af-grid": LocalJSX.AfGrid & JSXBase.HTMLAttributes<HTMLAfGridElement>;
+            "af-grid": LocalJSX.IntrinsicElements["af-grid"] & JSXBase.HTMLAttributes<HTMLAfGridElement>;
             /**
              * GridCallout organism - a marketing section combining an optional pill-shaped image 
              * with a grid of IconText feature items.
@@ -4686,13 +5256,13 @@ declare module "@stencil/core" {
              * </af-section>
              * ```
              */
-            "af-grid-callout": LocalJSX.AfGridCallout & JSXBase.HTMLAttributes<HTMLAfGridCalloutElement>;
+            "af-grid-callout": LocalJSX.IntrinsicElements["af-grid-callout"] & JSXBase.HTMLAttributes<HTMLAfGridCalloutElement>;
             /**
              * Heading component that inherits color from theme context.
              * Color is determined by the parent theme (af-section, af-card, etc.)
              * via CSS custom properties.
              */
-            "af-heading": LocalJSX.AfHeading & JSXBase.HTMLAttributes<HTMLAfHeadingElement>;
+            "af-heading": LocalJSX.IntrinsicElements["af-heading"] & JSXBase.HTMLAttributes<HTMLAfHeadingElement>;
             /**
              * Icon component that displays SVG icons from the Affinda icon library.
              * Icons inherit color from their parent via currentColor.
@@ -4702,7 +5272,7 @@ declare module "@stencil/core" {
              * <af-icon name="arrow-right" size="24"></af-icon>
              * ```
              */
-            "af-icon": LocalJSX.AfIcon & JSXBase.HTMLAttributes<HTMLAfIconElement>;
+            "af-icon": LocalJSX.IntrinsicElements["af-icon"] & JSXBase.HTMLAttributes<HTMLAfIconElement>;
             /**
              * IconBox atom - a themed container for displaying an icon with a rounded background.
              * Inherits theme colors from parent Section via CSS custom properties:
@@ -4712,8 +5282,8 @@ declare module "@stencil/core" {
              * <af-icon-box icon="settings" size="default"></af-icon-box>
              * ```
              */
-            "af-icon-box": LocalJSX.AfIconBox & JSXBase.HTMLAttributes<HTMLAfIconBoxElement>;
-            "af-icon-button": LocalJSX.AfIconButton & JSXBase.HTMLAttributes<HTMLAfIconButtonElement>;
+            "af-icon-box": LocalJSX.IntrinsicElements["af-icon-box"] & JSXBase.HTMLAttributes<HTMLAfIconBoxElement>;
+            "af-icon-button": LocalJSX.IntrinsicElements["af-icon-button"] & JSXBase.HTMLAttributes<HTMLAfIconButtonElement>;
             /**
              * IconText molecule - combines an IconBox with a TypographyLockup for feature items.
              * Composes:
@@ -4724,23 +5294,24 @@ declare module "@stencil/core" {
              * <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-button slot="buttons" variant="ghost">Learn more</af-button>
              * </af-icon-text>
              * ```
              */
-            "af-icon-text": LocalJSX.AfIconText & JSXBase.HTMLAttributes<HTMLAfIconTextElement>;
+            "af-icon-text": LocalJSX.IntrinsicElements["af-icon-text"] & JSXBase.HTMLAttributes<HTMLAfIconTextElement>;
             /**
              * Illustrated Card molecule component that combines a card with an illustration.
-             * Uses a theme background with text at top and an illustration from
+             * Uses a theme background with text at top, a button row in the middle, 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>;
+            "af-illustrated-card": LocalJSX.IntrinsicElements["af-illustrated-card"] & 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>;
+            "af-image": LocalJSX.IntrinsicElements["af-image"] & JSXBase.HTMLAttributes<HTMLAfImageElement>;
             /**
              * In-page banner component for call-to-action content.
              * A banner card with illustration, heading, description, and action buttons.
@@ -4758,36 +5329,44 @@ declare module "@stencil/core" {
              * />
              * ```
              * Alternatively, use the `illustration` slot for completely custom content.
+             * **Slot-based composition (preferred for rich content):**
+             * - `heading` — heading markup (overrides the `heading` prop when provided).
+             * - `description` — description markup (overrides the `description` prop).
+             * - `buttons` — custom button group (overrides the primary/secondary button
+             *   props; use when you need ghost variants, more than two buttons, or
+             *   per-button icons).
+             * - `illustration` — custom illustration markup.
+             * The string props remain supported for simple cases.
              */
-            "af-in-page-banner": LocalJSX.AfInPageBanner & JSXBase.HTMLAttributes<HTMLAfInPageBannerElement>;
+            "af-in-page-banner": LocalJSX.IntrinsicElements["af-in-page-banner"] & JSXBase.HTMLAttributes<HTMLAfInPageBannerElement>;
             /**
              * Inline layout component for horizontal inline-flex layouts with gap and optional wrapping.
              * Ideal for button groups, tags, pills, and other inline elements.
              */
-            "af-inline": LocalJSX.AfInline & JSXBase.HTMLAttributes<HTMLAfInlineElement>;
+            "af-inline": LocalJSX.IntrinsicElements["af-inline"] & JSXBase.HTMLAttributes<HTMLAfInlineElement>;
             /**
              * Input field component with label, description, and error states.
              * Supports various input types and validation states.
              */
-            "af-input": LocalJSX.AfInput & JSXBase.HTMLAttributes<HTMLAfInputElement>;
+            "af-input": LocalJSX.IntrinsicElements["af-input"] & JSXBase.HTMLAttributes<HTMLAfInputElement>;
             /**
              * Affinda logo component
              */
-            "af-logo": LocalJSX.AfLogo & JSXBase.HTMLAttributes<HTMLAfLogoElement>;
+            "af-logo": LocalJSX.IntrinsicElements["af-logo"] & JSXBase.HTMLAttributes<HTMLAfLogoElement>;
             /**
              * A rounded container for displaying client logos
              */
-            "af-logo-well": LocalJSX.AfLogoWell & JSXBase.HTMLAttributes<HTMLAfLogoWellElement>;
+            "af-logo-well": LocalJSX.IntrinsicElements["af-logo-well"] & JSXBase.HTMLAttributes<HTMLAfLogoWellElement>;
             /**
              * Navigation-styled accordion for mobile menu patterns.
              * A wrapper around af-accordion with navigation-specific styling.
              */
-            "af-nav-accordion": LocalJSX.AfNavAccordion & JSXBase.HTMLAttributes<HTMLAfNavAccordionElement>;
+            "af-nav-accordion": LocalJSX.IntrinsicElements["af-nav-accordion"] & JSXBase.HTMLAttributes<HTMLAfNavAccordionElement>;
             /**
              * Navigation accordion item with NavItem-styled trigger.
              * Combines navigation item styling with accordion collapse behavior.
              */
-            "af-nav-accordion-item": LocalJSX.AfNavAccordionItem & JSXBase.HTMLAttributes<HTMLAfNavAccordionItemElement>;
+            "af-nav-accordion-item": LocalJSX.IntrinsicElements["af-nav-accordion-item"] & JSXBase.HTMLAttributes<HTMLAfNavAccordionItemElement>;
             /**
              * A navigation card component for featured article content in mega-menu dropdowns.
              * Displays an image with a gradient overlay and headline text.
@@ -4798,17 +5377,17 @@ declare module "@stencil/core" {
              * - Slight scale effect (1.02)
              * - Headline underline
              */
-            "af-nav-card": LocalJSX.AfNavCard & JSXBase.HTMLAttributes<HTMLAfNavCardElement>;
+            "af-nav-card": LocalJSX.IntrinsicElements["af-nav-card"] & JSXBase.HTMLAttributes<HTMLAfNavCardElement>;
             /**
              * A generic navigation item component that can be used in navigation bars, menus, and sidebars.
              * Supports multiple hierarchy levels, variants, and states (active, hover).
              */
-            "af-nav-item": LocalJSX.AfNavItem & JSXBase.HTMLAttributes<HTMLAfNavItemElement>;
+            "af-nav-item": LocalJSX.IntrinsicElements["af-nav-item"] & JSXBase.HTMLAttributes<HTMLAfNavItemElement>;
             /**
              * A grouped navigation menu component with a heading.
              * Used in mega-menu dropdowns to group related navigation items.
              */
-            "af-nav-menu": LocalJSX.AfNavMenu & JSXBase.HTMLAttributes<HTMLAfNavMenuElement>;
+            "af-nav-menu": LocalJSX.IntrinsicElements["af-nav-menu"] & JSXBase.HTMLAttributes<HTMLAfNavMenuElement>;
             /**
              * A mega-menu dropdown panel component.
              * Acts as a container for NavMenu columns and optionally a sidebar.
@@ -4826,7 +5405,7 @@ declare module "@stencil/core" {
              * </af-nav-menu-nest>
              * ```
              */
-            "af-nav-menu-nest": LocalJSX.AfNavMenuNest & JSXBase.HTMLAttributes<HTMLAfNavMenuNestElement>;
+            "af-nav-menu-nest": LocalJSX.IntrinsicElements["af-nav-menu-nest"] & JSXBase.HTMLAttributes<HTMLAfNavMenuNestElement>;
             /**
              * A full-width navigation bar component that provides the main site navigation.
              * Features a pill-shaped container with logo, navigation links, and action buttons.
@@ -4838,14 +5417,14 @@ declare module "@stencil/core" {
              * - `start` - Primary navigation links (left side, desktop)
              * - `end` - Secondary/utility links (right side)
              * - `button` - Call-to-action button
-             * - `dropdown-solutions` - Mega-menu for Solutions dropdown
-             * - `dropdown-pricing` - Mega-menu for Pricing dropdown  
-             * - `dropdown-resources` - Mega-menu for Resources dropdown
-             * - `dropdown` - Generic dropdown slot
+             * - `dropdowns` - One or more dropdown panels, each a `<div data-for="id">`
+             *   where `id` matches the `data-dropdown="id"` attribute on the trigger.
+             *   Clicking a trigger toggles the matching panel; only one is visible at
+             *   a time.
              * - `mobile-menu` - Mobile menu content (use af-nav-accordion for accordion menus)
              * - `mobile-button` - CTA button for mobile menu (appears at top)
              */
-            "af-navbar": LocalJSX.AfNavbar & JSXBase.HTMLAttributes<HTMLAfNavbarElement>;
+            "af-navbar": LocalJSX.IntrinsicElements["af-navbar"] & JSXBase.HTMLAttributes<HTMLAfNavbarElement>;
             /**
              * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.
              * Perfect for numbered lists, step indicators, or ordered content.
@@ -4854,23 +5433,23 @@ declare module "@stencil/core" {
              * <af-number-badge number="5" variant="outlined" size="32"></af-number-badge>
              * ```
              */
-            "af-number-badge": LocalJSX.AfNumberBadge & JSXBase.HTMLAttributes<HTMLAfNumberBadgeElement>;
+            "af-number-badge": LocalJSX.IntrinsicElements["af-number-badge"] & JSXBase.HTMLAttributes<HTMLAfNumberBadgeElement>;
             /**
              * Progress Line atom component for displaying scroll or completion progress.
              * Shows a horizontal bar with a filled portion indicating progress.
              * Used primarily for carousel scroll indicators.
              */
-            "af-progress-line": LocalJSX.AfProgressLine & JSXBase.HTMLAttributes<HTMLAfProgressLineElement>;
+            "af-progress-line": LocalJSX.IntrinsicElements["af-progress-line"] & JSXBase.HTMLAttributes<HTMLAfProgressLineElement>;
             /**
              * Radio component for selecting a single option from a group.
              * Radios with the same `name` prop are mutually exclusive.
              */
-            "af-radio": LocalJSX.AfRadio & JSXBase.HTMLAttributes<HTMLAfRadioElement>;
+            "af-radio": LocalJSX.IntrinsicElements["af-radio"] & JSXBase.HTMLAttributes<HTMLAfRadioElement>;
             /**
              * Section layout component for consistent spacing and backgrounds.
              * Sets theme context for all child components via CSS custom properties.
              */
-            "af-section": LocalJSX.AfSection & JSXBase.HTMLAttributes<HTMLAfSectionElement>;
+            "af-section": LocalJSX.IntrinsicElements["af-section"] & JSXBase.HTMLAttributes<HTMLAfSectionElement>;
             /**
              * Show component for responsive visibility control.
              * Show or hide content based on viewport breakpoints.
@@ -4880,33 +5459,58 @@ declare module "@stencil/core" {
              * - lg: 1024px
              * - xl: 1440px
              */
-            "af-show": LocalJSX.AfShow & JSXBase.HTMLAttributes<HTMLAfShowElement>;
+            "af-show": LocalJSX.IntrinsicElements["af-show"] & JSXBase.HTMLAttributes<HTMLAfShowElement>;
             /**
              * Social media link component
              * Circular bordered icon link for social media profiles
              */
-            "af-social-link": LocalJSX.AfSocialLink & JSXBase.HTMLAttributes<HTMLAfSocialLinkElement>;
+            "af-social-link": LocalJSX.IntrinsicElements["af-social-link"] & JSXBase.HTMLAttributes<HTMLAfSocialLinkElement>;
             /**
              * Spacer component for adding fixed or flexible space between elements.
              * Use within flex or grid layouts.
              */
-            "af-spacer": LocalJSX.AfSpacer & JSXBase.HTMLAttributes<HTMLAfSpacerElement>;
+            "af-spacer": LocalJSX.IntrinsicElements["af-spacer"] & JSXBase.HTMLAttributes<HTMLAfSpacerElement>;
             /**
              * Split Section component for layouts with two-tone backgrounds.
              * Creates a vertical split with different themes for top and bottom halves.
              * Useful for content that visually spans across two themed areas.
              * Uses a CSS linear-gradient for the split background effect.
              */
-            "af-split-section": LocalJSX.AfSplitSection & JSXBase.HTMLAttributes<HTMLAfSplitSectionElement>;
+            "af-split-section": LocalJSX.IntrinsicElements["af-split-section"] & JSXBase.HTMLAttributes<HTMLAfSplitSectionElement>;
             /**
              * Stack layout component for vertical or horizontal flex layouts with consistent gap spacing.
              * Uses design tokens for gap values.
              */
-            "af-stack": LocalJSX.AfStack & JSXBase.HTMLAttributes<HTMLAfStackElement>;
+            "af-stack": LocalJSX.IntrinsicElements["af-stack"] & JSXBase.HTMLAttributes<HTMLAfStackElement>;
+            /**
+             * Stepper composite for "Sign up / Upload / See results"-style marketing
+             * flows. Renders children `af-stepper-step` elements in a horizontal row
+             * (desktop) or vertical stack (mobile), with a connector line between badges.
+             * Matches Webflow's `.stepper` pattern — numbered circled badges, a spine
+             * connector, and centered step text.
+             * @example ```html
+             * <af-stepper>
+             *   <af-stepper-step>
+             *     <h3 slot="heading">Sign up for free</h3>
+             *     <p slot="body">No sales calls, no credit cards.</p>
+             *   </af-stepper-step>
+             *   <af-stepper-step>...</af-stepper-step>
+             *   <af-stepper-step>...</af-stepper-step>
+             * </af-stepper>
+             * ```
+             */
+            "af-stepper": LocalJSX.IntrinsicElements["af-stepper"] & JSXBase.HTMLAttributes<HTMLAfStepperElement>;
+            /**
+             * A single step within an af-stepper. Renders a numbered circular badge
+             * followed by slotted heading + body content.
+             * The parent af-stepper auto-assigns the `index` attribute based on DOM
+             * order, so consumers don't need to hand-number the steps.
+             */
+            "af-stepper-step": LocalJSX.IntrinsicElements["af-stepper-step"] & JSXBase.HTMLAttributes<HTMLAfStepperStepElement>;
             /**
              * Switch component for toggling between on and off states.
              */
-            "af-switch": LocalJSX.AfSwitch & JSXBase.HTMLAttributes<HTMLAfSwitchElement>;
+            "af-switch": LocalJSX.IntrinsicElements["af-switch"] & JSXBase.HTMLAttributes<HTMLAfSwitchElement>;
             /**
              * Tab component for use within a TabBar.
              * Represents an individual selectable tab with support for icons and number badges.
@@ -4920,7 +5524,7 @@ declare module "@stencil/core" {
              * </af-tab>
              * ```
              */
-            "af-tab": LocalJSX.AfTab & JSXBase.HTMLAttributes<HTMLAfTabElement>;
+            "af-tab": LocalJSX.IntrinsicElements["af-tab"] & JSXBase.HTMLAttributes<HTMLAfTabElement>;
             /**
              * TabBar component that contains and manages a group of tabs.
              * Provides horizontal layout, keyboard navigation, and consistent styling.
@@ -4932,36 +5536,39 @@ declare module "@stencil/core" {
              * </af-tab-bar>
              * ```
              */
-            "af-tab-bar": LocalJSX.AfTabBar & JSXBase.HTMLAttributes<HTMLAfTabBarElement>;
+            "af-tab-bar": LocalJSX.IntrinsicElements["af-tab-bar"] & JSXBase.HTMLAttributes<HTMLAfTabBarElement>;
             /**
              * Tag displays a label in a styled container.
              * Perfect for categorization, topics, or metadata display.
+             * The `default` variant inherits its colors from the parent theme context
+             * (af-section, af-card). Use explicit variants (`inkwell`, `white`,
+             * `soft-clay`, `mist-green`) to override.
              * @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 size="small" variant="inkwell">Machine Learning</af-tag>
+             * <af-tag size="large" variant="white">Document Processing</af-tag>
              * ```
              */
-            "af-tag": LocalJSX.AfTag & JSXBase.HTMLAttributes<HTMLAfTagElement>;
-            "af-testimonial": LocalJSX.AfTestimonial & JSXBase.HTMLAttributes<HTMLAfTestimonialElement>;
+            "af-tag": LocalJSX.IntrinsicElements["af-tag"] & JSXBase.HTMLAttributes<HTMLAfTagElement>;
+            "af-testimonial": LocalJSX.IntrinsicElements["af-testimonial"] & JSXBase.HTMLAttributes<HTMLAfTestimonialElement>;
             /**
              * TestimonialCarousel - Carousel for displaying multiple customer testimonials.
              * Handles navigation between testimonials with progress indicator.
              * Wrap in Section/Container for proper page layout and theming.
              */
-            "af-testimonial-carousel": LocalJSX.AfTestimonialCarousel & JSXBase.HTMLAttributes<HTMLAfTestimonialCarouselElement>;
-            "af-testimonial-stat": LocalJSX.AfTestimonialStat & JSXBase.HTMLAttributes<HTMLAfTestimonialStatElement>;
+            "af-testimonial-carousel": LocalJSX.IntrinsicElements["af-testimonial-carousel"] & JSXBase.HTMLAttributes<HTMLAfTestimonialCarouselElement>;
+            "af-testimonial-stat": LocalJSX.IntrinsicElements["af-testimonial-stat"] & JSXBase.HTMLAttributes<HTMLAfTestimonialStatElement>;
             /**
              * Text/body component that inherits color from theme context.
              * Color is determined by the parent theme (af-section, af-card, etc.)
              * via CSS custom properties.
              */
-            "af-text": LocalJSX.AfText & JSXBase.HTMLAttributes<HTMLAfTextElement>;
+            "af-text": LocalJSX.IntrinsicElements["af-text"] & JSXBase.HTMLAttributes<HTMLAfTextElement>;
             /**
              * TextImage composite component that combines typography content with an image.
              * Supports various layout configurations with image position and proportion options.
              */
-            "af-text-image": LocalJSX.AfTextImage & JSXBase.HTMLAttributes<HTMLAfTextImageElement>;
+            "af-text-image": LocalJSX.IntrinsicElements["af-text-image"] & JSXBase.HTMLAttributes<HTMLAfTextImageElement>;
             /**
              * TextImageNest is a layout component that arranges multiple text-image content pieces
              * in various grid layouts with optional footer buttons.
@@ -4974,11 +5581,11 @@ declare module "@stencil/core" {
              * - `grid-4`: 4-column grid with stacked items
              * - `stacked`: Alternating rows of side-by-side content
              */
-            "af-text-image-nest": LocalJSX.AfTextImageNest & JSXBase.HTMLAttributes<HTMLAfTextImageNestElement>;
+            "af-text-image-nest": LocalJSX.IntrinsicElements["af-text-image-nest"] & JSXBase.HTMLAttributes<HTMLAfTextImageNestElement>;
             /**
              * Textarea component for multi-line text input with label, description, and error states.
              */
-            "af-textarea": LocalJSX.AfTextarea & JSXBase.HTMLAttributes<HTMLAfTextareaElement>;
+            "af-textarea": LocalJSX.IntrinsicElements["af-textarea"] & JSXBase.HTMLAttributes<HTMLAfTextareaElement>;
             /**
              * Theme Override utility component.
              * Wraps content and applies an explicit theme, overriding any inherited theme
@@ -4986,8 +5593,8 @@ declare module "@stencil/core" {
              * Unlike AfSection, this component does NOT apply a background color - 
              * it only sets the CSS custom properties that child components consume.
              */
-            "af-theme-override": LocalJSX.AfThemeOverride & JSXBase.HTMLAttributes<HTMLAfThemeOverrideElement>;
-            "af-typography-lockup": LocalJSX.AfTypographyLockup & JSXBase.HTMLAttributes<HTMLAfTypographyLockupElement>;
+            "af-theme-override": LocalJSX.IntrinsicElements["af-theme-override"] & JSXBase.HTMLAttributes<HTMLAfThemeOverrideElement>;
+            "af-typography-lockup": LocalJSX.IntrinsicElements["af-typography-lockup"] & JSXBase.HTMLAttributes<HTMLAfTypographyLockupElement>;
             /**
              * Video Container molecule component for showcasing video content.
              * Uses slots for typography lockups above and below the video.
@@ -5005,13 +5612,13 @@ declare module "@stencil/core" {
              * </af-split-section>
              * ```
              */
-            "af-video-container": LocalJSX.AfVideoContainer & JSXBase.HTMLAttributes<HTMLAfVideoContainerElement>;
+            "af-video-container": LocalJSX.IntrinsicElements["af-video-container"] & JSXBase.HTMLAttributes<HTMLAfVideoContainerElement>;
             /**
              * Visually Hidden component for accessible content.
              * Hides content visually while keeping it accessible to screen readers.
              * Essential for accessibility - use for skip links, form labels, etc.
              */
-            "af-visually-hidden": LocalJSX.AfVisuallyHidden & JSXBase.HTMLAttributes<HTMLAfVisuallyHiddenElement>;
+            "af-visually-hidden": LocalJSX.IntrinsicElements["af-visually-hidden"] & JSXBase.HTMLAttributes<HTMLAfVisuallyHiddenElement>;
         }
     }
 }