@affinda/wc 0.0.25 → 0.0.27

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 {
         /**
@@ -620,7 +620,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>
      * ```
      */
@@ -647,7 +647,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.
      */
@@ -677,6 +678,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
          */
@@ -699,6 +705,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 {
         /**
@@ -1422,10 +1436,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 {
@@ -1434,13 +1451,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;
     }
@@ -1468,9 +1485,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
          */
@@ -2167,7 +2184,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>
      * ```
      */
@@ -2179,7 +2196,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.
      */
@@ -2216,6 +2234,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 {
     }
@@ -2625,10 +2651,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 {
@@ -2887,8 +2916,6 @@ 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).
@@ -2964,20 +2991,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 {
         /**
@@ -3501,7 +3528,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>
      * ```
      */
@@ -3528,7 +3555,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.
      */
@@ -3558,6 +3586,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
          */
@@ -3580,6 +3613,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 {
         /**
@@ -4339,10 +4380,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 {
@@ -4351,13 +4395,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;
     }
@@ -4393,9 +4437,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
          */
@@ -4712,448 +4756,74 @@ 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' | 'tertiary';
-        "size": 'default' | 'small';
-        "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;
-    }
-    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/2' | '1/3' | '1/4' | '100%';
-        "src": string;
-        "alt": string;
-        "showSecondLockup": boolean;
-    }
-    interface AfTextImageNestAttributes {
-        "layout": 'single' | 'grid-2' | 'grid-3' | 'grid-4' | 'stacked';
-    }
-    interface AfTextareaAttributes {
-        "label": string;
-        "description": string;
-        "placeholder": string;
-        "value": string;
-        "name": string;
-        "disabled": boolean;
-        "required": boolean;
-        "readonly": boolean;
-        "error": string;
-        "showInfoIcon": boolean;
-        "rows": number;
-        "maxlength": number;
-        "minlength": number;
-        "resize": 'none' | 'vertical' | 'horizontal' | 'both';
-    }
-    interface AfThemeOverrideAttributes {
-        "theme": '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": 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-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-logo": AfLogo;
         "af-logo-well": AfLogoWell;
-        "af-nav-accordion": Omit<AfNavAccordion, keyof AfNavAccordionAttributes> & { [K in keyof AfNavAccordion & keyof AfNavAccordionAttributes]?: AfNavAccordion[K] } & { [K in keyof AfNavAccordion & keyof AfNavAccordionAttributes as `attr:${K}`]?: AfNavAccordionAttributes[K] } & { [K in keyof AfNavAccordion & keyof AfNavAccordionAttributes as `prop:${K}`]?: AfNavAccordion[K] };
-        "af-nav-accordion-item": Omit<AfNavAccordionItem, keyof AfNavAccordionItemAttributes> & { [K in keyof AfNavAccordionItem & keyof AfNavAccordionItemAttributes]?: AfNavAccordionItem[K] } & { [K in keyof AfNavAccordionItem & keyof AfNavAccordionItemAttributes as `attr:${K}`]?: AfNavAccordionItemAttributes[K] } & { [K in keyof AfNavAccordionItem & keyof AfNavAccordionItemAttributes as `prop:${K}`]?: AfNavAccordionItem[K] } & OneOf<"itemId", AfNavAccordionItem["itemId"], AfNavAccordionItemAttributes["itemId"]>;
-        "af-nav-card": Omit<AfNavCard, keyof AfNavCardAttributes> & { [K in keyof AfNavCard & keyof AfNavCardAttributes]?: AfNavCard[K] } & { [K in keyof AfNavCard & keyof AfNavCardAttributes as `attr:${K}`]?: AfNavCardAttributes[K] } & { [K in keyof AfNavCard & keyof AfNavCardAttributes as `prop:${K}`]?: AfNavCard[K] };
-        "af-nav-item": Omit<AfNavItem, keyof AfNavItemAttributes> & { [K in keyof AfNavItem & keyof AfNavItemAttributes]?: AfNavItem[K] } & { [K in keyof AfNavItem & keyof AfNavItemAttributes as `attr:${K}`]?: AfNavItemAttributes[K] } & { [K in keyof AfNavItem & keyof AfNavItemAttributes as `prop:${K}`]?: AfNavItem[K] };
-        "af-nav-menu": Omit<AfNavMenu, keyof AfNavMenuAttributes> & { [K in keyof AfNavMenu & keyof AfNavMenuAttributes]?: AfNavMenu[K] } & { [K in keyof AfNavMenu & keyof AfNavMenuAttributes as `attr:${K}`]?: AfNavMenuAttributes[K] } & { [K in keyof AfNavMenu & keyof AfNavMenuAttributes as `prop:${K}`]?: AfNavMenu[K] };
-        "af-nav-menu-nest": Omit<AfNavMenuNest, keyof AfNavMenuNestAttributes> & { [K in keyof AfNavMenuNest & keyof AfNavMenuNestAttributes]?: AfNavMenuNest[K] } & { [K in keyof AfNavMenuNest & keyof AfNavMenuNestAttributes as `attr:${K}`]?: AfNavMenuNestAttributes[K] } & { [K in keyof AfNavMenuNest & keyof AfNavMenuNestAttributes as `prop:${K}`]?: AfNavMenuNest[K] };
-        "af-navbar": Omit<AfNavbar, keyof AfNavbarAttributes> & { [K in keyof AfNavbar & keyof AfNavbarAttributes]?: AfNavbar[K] } & { [K in keyof AfNavbar & keyof AfNavbarAttributes as `attr:${K}`]?: AfNavbarAttributes[K] } & { [K in keyof AfNavbar & keyof AfNavbarAttributes as `prop:${K}`]?: AfNavbar[K] };
-        "af-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<"quote", AfTestimonial["quote"], AfTestimonialAttributes["quote"]> & OneOf<"attribution", AfTestimonial["attribution"], AfTestimonialAttributes["attribution"]>;
+        "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-stepper": AfStepper;
+        "af-stepper-step": AfStepperStep;
+        "af-switch": AfSwitch;
+        "af-tab": AfTab;
+        "af-tab-bar": AfTabBar;
+        "af-tag": AfTag;
+        "af-testimonial": AfTestimonial;
         "af-testimonial-carousel": AfTestimonialCarousel;
-        "af-testimonial-stat": 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] };
+        "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;
     }
 }
 export { LocalJSX as JSX };
@@ -5164,41 +4834,41 @@ 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.IntrinsicElements["af-accordion"] & JSXBase.HTMLAttributes<HTMLAfAccordionElement>;
+            "af-accordion": LocalJSX.AfAccordion & 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.IntrinsicElements["af-accordion-item"] & JSXBase.HTMLAttributes<HTMLAfAccordionItemElement>;
+            "af-accordion-item": LocalJSX.AfAccordionItem & 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.IntrinsicElements["af-aspect-ratio"] & JSXBase.HTMLAttributes<HTMLAfAspectRatioElement>;
+            "af-aspect-ratio": LocalJSX.AfAspectRatio & JSXBase.HTMLAttributes<HTMLAfAspectRatioElement>;
             /**
              * Button component that inherits colors from theme context.
              * Colors are determined by the parent theme (af-section, af-card, etc.)
              * via CSS custom properties.
              */
-            "af-button": LocalJSX.IntrinsicElements["af-button"] & JSXBase.HTMLAttributes<HTMLAfButtonElement>;
-            "af-button-group": LocalJSX.IntrinsicElements["af-button-group"] & JSXBase.HTMLAttributes<HTMLAfButtonGroupElement>;
+            "af-button": LocalJSX.AfButton & JSXBase.HTMLAttributes<HTMLAfButtonElement>;
+            "af-button-group": LocalJSX.AfButtonGroup & JSXBase.HTMLAttributes<HTMLAfButtonGroupElement>;
             /**
              * Card atom component - a themed container with consistent styling.
              * Provides theme context to children via CSS custom properties.
              * This is a base building block used by molecule components like
              * af-feature-card and af-illustrated-card.
              */
-            "af-card": LocalJSX.IntrinsicElements["af-card"] & JSXBase.HTMLAttributes<HTMLAfCardElement>;
+            "af-card": LocalJSX.AfCard & JSXBase.HTMLAttributes<HTMLAfCardElement>;
             /**
              * Center layout component for quickly centering content.
              * Supports horizontal, vertical, or both axes.
              */
-            "af-center": LocalJSX.IntrinsicElements["af-center"] & JSXBase.HTMLAttributes<HTMLAfCenterElement>;
+            "af-center": LocalJSX.AfCenter & JSXBase.HTMLAttributes<HTMLAfCenterElement>;
             /**
              * Checkbox component for selecting multiple options.
              * Supports checked, unchecked, and indeterminate states.
              */
-            "af-checkbox": LocalJSX.IntrinsicElements["af-checkbox"] & JSXBase.HTMLAttributes<HTMLAfCheckboxElement>;
+            "af-checkbox": LocalJSX.AfCheckbox & JSXBase.HTMLAttributes<HTMLAfCheckboxElement>;
             /**
              * Infinite scrolling carousel for client logos.
              * This is a section-level component that spans full width.
@@ -5213,23 +4883,23 @@ declare module "@stencil/core" {
              * only project content once, so we clone the slotted nodes in
              * `componentDidLoad` and append the copies to the track.
              */
-            "af-client-carousel": LocalJSX.IntrinsicElements["af-client-carousel"] & JSXBase.HTMLAttributes<HTMLAfClientCarouselElement>;
-            "af-color-swatch": LocalJSX.IntrinsicElements["af-color-swatch"] & JSXBase.HTMLAttributes<HTMLAfColorSwatchElement>;
+            "af-client-carousel": LocalJSX.AfClientCarousel & JSXBase.HTMLAttributes<HTMLAfClientCarouselElement>;
+            "af-color-swatch": LocalJSX.AfColorSwatch & 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.IntrinsicElements["af-contact-item"] & JSXBase.HTMLAttributes<HTMLAfContactItemElement>;
+            "af-contact-item": LocalJSX.AfContactItem & JSXBase.HTMLAttributes<HTMLAfContactItemElement>;
             /**
              * A responsive container component that provides consistent margins and max-width
              * constraints based on the Affinda grid system.
              */
-            "af-container": LocalJSX.IntrinsicElements["af-container"] & JSXBase.HTMLAttributes<HTMLAfContainerElement>;
+            "af-container": LocalJSX.AfContainer & JSXBase.HTMLAttributes<HTMLAfContainerElement>;
             /**
              * Divider component for visual separation between content.
              * Supports horizontal and vertical orientations with theme-aware styling.
              */
-            "af-divider": LocalJSX.IntrinsicElements["af-divider"] & JSXBase.HTMLAttributes<HTMLAfDividerElement>;
+            "af-divider": LocalJSX.AfDivider & JSXBase.HTMLAttributes<HTMLAfDividerElement>;
             /**
              * Feature accordion component with expandable items and accompanying image.
              * Used for showcasing product features with visual examples.
@@ -5242,7 +4912,7 @@ declare module "@stencil/core" {
              * </Section>
              * ```
              */
-            "af-feature-accordion": LocalJSX.IntrinsicElements["af-feature-accordion"] & JSXBase.HTMLAttributes<HTMLAfFeatureAccordionElement>;
+            "af-feature-accordion": LocalJSX.AfFeatureAccordion & JSXBase.HTMLAttributes<HTMLAfFeatureAccordionElement>;
             /**
              * Feature Card molecule component that combines a card with an image.
              * Two layout modes:
@@ -5251,39 +4921,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.IntrinsicElements["af-feature-card"] & JSXBase.HTMLAttributes<HTMLAfFeatureCardElement>;
+            "af-feature-card": LocalJSX.AfFeatureCard & JSXBase.HTMLAttributes<HTMLAfFeatureCardElement>;
             /**
              * Feature Grid component - CSS Grid container for feature cards.
              * Desktop: Configurable columns (1-4)
              * Mobile: List (stacked), horizontal scroll, or 2-column grid
              */
-            "af-feature-grid": LocalJSX.IntrinsicElements["af-feature-grid"] & JSXBase.HTMLAttributes<HTMLAfFeatureGridElement>;
+            "af-feature-grid": LocalJSX.AfFeatureGrid & JSXBase.HTMLAttributes<HTMLAfFeatureGridElement>;
             /**
              * Fieldset component for grouping related form controls.
              * Supports vertical and horizontal layouts with an optional legend/heading.
              */
-            "af-fieldset": LocalJSX.IntrinsicElements["af-fieldset"] & JSXBase.HTMLAttributes<HTMLAfFieldsetElement>;
+            "af-fieldset": LocalJSX.AfFieldset & 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.IntrinsicElements["af-footer"] & JSXBase.HTMLAttributes<HTMLAfFooterElement>;
+            "af-footer": LocalJSX.AfFooter & JSXBase.HTMLAttributes<HTMLAfFooterElement>;
             /**
              * Footer navigation column component
              * Used within af-footer to create navigation link groups
              */
-            "af-footer-column": LocalJSX.IntrinsicElements["af-footer-column"] & JSXBase.HTMLAttributes<HTMLAfFooterColumnElement>;
+            "af-footer-column": LocalJSX.AfFooterColumn & JSXBase.HTMLAttributes<HTMLAfFooterColumnElement>;
             /**
              * Footer link component
              * Styled link for use in footer navigation columns
              */
-            "af-footer-link": LocalJSX.IntrinsicElements["af-footer-link"] & JSXBase.HTMLAttributes<HTMLAfFooterLinkElement>;
+            "af-footer-link": LocalJSX.AfFooterLink & JSXBase.HTMLAttributes<HTMLAfFooterLinkElement>;
             /**
              * Generic CSS Grid component for flexible column layouts.
              * Supports responsive column counts at different breakpoints.
              */
-            "af-grid": LocalJSX.IntrinsicElements["af-grid"] & JSXBase.HTMLAttributes<HTMLAfGridElement>;
+            "af-grid": LocalJSX.AfGrid & JSXBase.HTMLAttributes<HTMLAfGridElement>;
             /**
              * GridCallout organism - a marketing section combining an optional pill-shaped image 
              * with a grid of IconText feature items.
@@ -5309,13 +4979,13 @@ declare module "@stencil/core" {
              * </af-section>
              * ```
              */
-            "af-grid-callout": LocalJSX.IntrinsicElements["af-grid-callout"] & JSXBase.HTMLAttributes<HTMLAfGridCalloutElement>;
+            "af-grid-callout": LocalJSX.AfGridCallout & JSXBase.HTMLAttributes<HTMLAfGridCalloutElement>;
             /**
              * Heading component that inherits color from theme context.
              * Color is determined by the parent theme (af-section, af-card, etc.)
              * via CSS custom properties.
              */
-            "af-heading": LocalJSX.IntrinsicElements["af-heading"] & JSXBase.HTMLAttributes<HTMLAfHeadingElement>;
+            "af-heading": LocalJSX.AfHeading & JSXBase.HTMLAttributes<HTMLAfHeadingElement>;
             /**
              * Icon component that displays SVG icons from the Affinda icon library.
              * Icons inherit color from their parent via currentColor.
@@ -5325,7 +4995,7 @@ declare module "@stencil/core" {
              * <af-icon name="arrow-right" size="24"></af-icon>
              * ```
              */
-            "af-icon": LocalJSX.IntrinsicElements["af-icon"] & JSXBase.HTMLAttributes<HTMLAfIconElement>;
+            "af-icon": LocalJSX.AfIcon & JSXBase.HTMLAttributes<HTMLAfIconElement>;
             /**
              * IconBox atom - a themed container for displaying an icon with a rounded background.
              * Inherits theme colors from parent Section via CSS custom properties:
@@ -5335,8 +5005,8 @@ declare module "@stencil/core" {
              * <af-icon-box icon="settings" size="default"></af-icon-box>
              * ```
              */
-            "af-icon-box": LocalJSX.IntrinsicElements["af-icon-box"] & JSXBase.HTMLAttributes<HTMLAfIconBoxElement>;
-            "af-icon-button": LocalJSX.IntrinsicElements["af-icon-button"] & JSXBase.HTMLAttributes<HTMLAfIconButtonElement>;
+            "af-icon-box": LocalJSX.AfIconBox & JSXBase.HTMLAttributes<HTMLAfIconBoxElement>;
+            "af-icon-button": LocalJSX.AfIconButton & JSXBase.HTMLAttributes<HTMLAfIconButtonElement>;
             /**
              * IconText molecule - combines an IconBox with a TypographyLockup for feature items.
              * Composes:
@@ -5347,23 +5017,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.IntrinsicElements["af-icon-text"] & JSXBase.HTMLAttributes<HTMLAfIconTextElement>;
+            "af-icon-text": LocalJSX.AfIconText & JSXBase.HTMLAttributes<HTMLAfIconTextElement>;
             /**
              * Illustrated Card molecule component that combines a card with an illustration.
-             * Uses a theme background with text at top and an illustration from
+             * 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.IntrinsicElements["af-illustrated-card"] & JSXBase.HTMLAttributes<HTMLAfIllustratedCardElement>;
+            "af-illustrated-card": LocalJSX.AfIllustratedCard & JSXBase.HTMLAttributes<HTMLAfIllustratedCardElement>;
             /**
              * A styled image container with rounded corners and a subtle inset border.
              * Provides consistent image styling across the design system.
              */
-            "af-image": LocalJSX.IntrinsicElements["af-image"] & JSXBase.HTMLAttributes<HTMLAfImageElement>;
+            "af-image": LocalJSX.AfImage & JSXBase.HTMLAttributes<HTMLAfImageElement>;
             /**
              * In-page banner component for call-to-action content.
              * A banner card with illustration, heading, description, and action buttons.
@@ -5381,36 +5052,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.IntrinsicElements["af-in-page-banner"] & JSXBase.HTMLAttributes<HTMLAfInPageBannerElement>;
+            "af-in-page-banner": LocalJSX.AfInPageBanner & 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.IntrinsicElements["af-inline"] & JSXBase.HTMLAttributes<HTMLAfInlineElement>;
+            "af-inline": LocalJSX.AfInline & JSXBase.HTMLAttributes<HTMLAfInlineElement>;
             /**
              * Input field component with label, description, and error states.
              * Supports various input types and validation states.
              */
-            "af-input": LocalJSX.IntrinsicElements["af-input"] & JSXBase.HTMLAttributes<HTMLAfInputElement>;
+            "af-input": LocalJSX.AfInput & JSXBase.HTMLAttributes<HTMLAfInputElement>;
             /**
              * Affinda logo component
              */
-            "af-logo": LocalJSX.IntrinsicElements["af-logo"] & JSXBase.HTMLAttributes<HTMLAfLogoElement>;
+            "af-logo": LocalJSX.AfLogo & JSXBase.HTMLAttributes<HTMLAfLogoElement>;
             /**
              * A rounded container for displaying client logos
              */
-            "af-logo-well": LocalJSX.IntrinsicElements["af-logo-well"] & JSXBase.HTMLAttributes<HTMLAfLogoWellElement>;
+            "af-logo-well": LocalJSX.AfLogoWell & JSXBase.HTMLAttributes<HTMLAfLogoWellElement>;
             /**
              * Navigation-styled accordion for mobile menu patterns.
              * A wrapper around af-accordion with navigation-specific styling.
              */
-            "af-nav-accordion": LocalJSX.IntrinsicElements["af-nav-accordion"] & JSXBase.HTMLAttributes<HTMLAfNavAccordionElement>;
+            "af-nav-accordion": LocalJSX.AfNavAccordion & JSXBase.HTMLAttributes<HTMLAfNavAccordionElement>;
             /**
              * Navigation accordion item with NavItem-styled trigger.
              * Combines navigation item styling with accordion collapse behavior.
              */
-            "af-nav-accordion-item": LocalJSX.IntrinsicElements["af-nav-accordion-item"] & JSXBase.HTMLAttributes<HTMLAfNavAccordionItemElement>;
+            "af-nav-accordion-item": LocalJSX.AfNavAccordionItem & 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.
@@ -5421,7 +5100,7 @@ declare module "@stencil/core" {
              * - Slight scale effect (1.02)
              * - Headline underline
              */
-            "af-nav-card": LocalJSX.IntrinsicElements["af-nav-card"] & JSXBase.HTMLAttributes<HTMLAfNavCardElement>;
+            "af-nav-card": LocalJSX.AfNavCard & JSXBase.HTMLAttributes<HTMLAfNavCardElement>;
             /**
              * A generic navigation item component that can be used in navigation bars, menus, and sidebars.
              * Supports multiple hierarchy levels, variants, and states (active, hover).
@@ -5432,12 +5111,12 @@ declare module "@stencil/core" {
              * pointer click. The companion `af-navbar` keeps `aria-expanded` on the
              * host in sync with the active dropdown.
              */
-            "af-nav-item": LocalJSX.IntrinsicElements["af-nav-item"] & JSXBase.HTMLAttributes<HTMLAfNavItemElement>;
+            "af-nav-item": LocalJSX.AfNavItem & JSXBase.HTMLAttributes<HTMLAfNavItemElement>;
             /**
              * A grouped navigation menu component with a heading.
              * Used in mega-menu dropdowns to group related navigation items.
              */
-            "af-nav-menu": LocalJSX.IntrinsicElements["af-nav-menu"] & JSXBase.HTMLAttributes<HTMLAfNavMenuElement>;
+            "af-nav-menu": LocalJSX.AfNavMenu & JSXBase.HTMLAttributes<HTMLAfNavMenuElement>;
             /**
              * A mega-menu dropdown panel component.
              * Acts as a container for NavMenu columns and optionally a sidebar.
@@ -5455,7 +5134,7 @@ declare module "@stencil/core" {
              * </af-nav-menu-nest>
              * ```
              */
-            "af-nav-menu-nest": LocalJSX.IntrinsicElements["af-nav-menu-nest"] & JSXBase.HTMLAttributes<HTMLAfNavMenuNestElement>;
+            "af-nav-menu-nest": LocalJSX.AfNavMenuNest & JSXBase.HTMLAttributes<HTMLAfNavMenuNestElement>;
             /**
              * A full-width navigation bar component that provides the main site navigation.
              * Features a pill-shaped container with logo, navigation links, and action buttons.
@@ -5474,7 +5153,7 @@ declare module "@stencil/core" {
              * - `mobile-menu` - Mobile menu content (use af-nav-accordion for accordion menus)
              * - `mobile-button` - CTA button for mobile menu (appears at top)
              */
-            "af-navbar": LocalJSX.IntrinsicElements["af-navbar"] & JSXBase.HTMLAttributes<HTMLAfNavbarElement>;
+            "af-navbar": LocalJSX.AfNavbar & 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.
@@ -5483,23 +5162,23 @@ declare module "@stencil/core" {
              * <af-number-badge number="5" variant="outlined" size="32"></af-number-badge>
              * ```
              */
-            "af-number-badge": LocalJSX.IntrinsicElements["af-number-badge"] & JSXBase.HTMLAttributes<HTMLAfNumberBadgeElement>;
+            "af-number-badge": LocalJSX.AfNumberBadge & JSXBase.HTMLAttributes<HTMLAfNumberBadgeElement>;
             /**
              * Progress Line atom component for displaying scroll or completion progress.
              * Shows a horizontal bar with a filled portion indicating progress.
              * Used primarily for carousel scroll indicators.
              */
-            "af-progress-line": LocalJSX.IntrinsicElements["af-progress-line"] & JSXBase.HTMLAttributes<HTMLAfProgressLineElement>;
+            "af-progress-line": LocalJSX.AfProgressLine & 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.IntrinsicElements["af-radio"] & JSXBase.HTMLAttributes<HTMLAfRadioElement>;
+            "af-radio": LocalJSX.AfRadio & JSXBase.HTMLAttributes<HTMLAfRadioElement>;
             /**
              * Section layout component for consistent spacing and backgrounds.
              * Sets theme context for all child components via CSS custom properties.
              */
-            "af-section": LocalJSX.IntrinsicElements["af-section"] & JSXBase.HTMLAttributes<HTMLAfSectionElement>;
+            "af-section": LocalJSX.AfSection & JSXBase.HTMLAttributes<HTMLAfSectionElement>;
             /**
              * Show component for responsive visibility control.
              * Show or hide content based on viewport breakpoints.
@@ -5509,29 +5188,29 @@ declare module "@stencil/core" {
              * - lg: 1024px
              * - xl: 1440px
              */
-            "af-show": LocalJSX.IntrinsicElements["af-show"] & JSXBase.HTMLAttributes<HTMLAfShowElement>;
+            "af-show": LocalJSX.AfShow & JSXBase.HTMLAttributes<HTMLAfShowElement>;
             /**
              * Social media link component
              * Circular bordered icon link for social media profiles
              */
-            "af-social-link": LocalJSX.IntrinsicElements["af-social-link"] & JSXBase.HTMLAttributes<HTMLAfSocialLinkElement>;
+            "af-social-link": LocalJSX.AfSocialLink & JSXBase.HTMLAttributes<HTMLAfSocialLinkElement>;
             /**
              * Spacer component for adding fixed or flexible space between elements.
              * Use within flex or grid layouts.
              */
-            "af-spacer": LocalJSX.IntrinsicElements["af-spacer"] & JSXBase.HTMLAttributes<HTMLAfSpacerElement>;
+            "af-spacer": LocalJSX.AfSpacer & 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.IntrinsicElements["af-split-section"] & JSXBase.HTMLAttributes<HTMLAfSplitSectionElement>;
+            "af-split-section": LocalJSX.AfSplitSection & 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.IntrinsicElements["af-stack"] & JSXBase.HTMLAttributes<HTMLAfStackElement>;
+            "af-stack": LocalJSX.AfStack & JSXBase.HTMLAttributes<HTMLAfStackElement>;
             /**
              * Stepper composite for "Sign up / Upload / See results"-style marketing
              * flows. Renders children `af-stepper-step` elements in a horizontal row
@@ -5549,18 +5228,18 @@ declare module "@stencil/core" {
              * </af-stepper>
              * ```
              */
-            "af-stepper": LocalJSX.IntrinsicElements["af-stepper"] & JSXBase.HTMLAttributes<HTMLAfStepperElement>;
+            "af-stepper": LocalJSX.AfStepper & 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>;
+            "af-stepper-step": LocalJSX.AfStepperStep & JSXBase.HTMLAttributes<HTMLAfStepperStepElement>;
             /**
              * Switch component for toggling between on and off states.
              */
-            "af-switch": LocalJSX.IntrinsicElements["af-switch"] & JSXBase.HTMLAttributes<HTMLAfSwitchElement>;
+            "af-switch": LocalJSX.AfSwitch & JSXBase.HTMLAttributes<HTMLAfSwitchElement>;
             /**
              * Tab component for use within a TabBar.
              * Represents an individual selectable tab with support for icons and number badges.
@@ -5574,7 +5253,7 @@ declare module "@stencil/core" {
              * </af-tab>
              * ```
              */
-            "af-tab": LocalJSX.IntrinsicElements["af-tab"] & JSXBase.HTMLAttributes<HTMLAfTabElement>;
+            "af-tab": LocalJSX.AfTab & JSXBase.HTMLAttributes<HTMLAfTabElement>;
             /**
              * TabBar component that contains and manages a group of tabs.
              * Provides horizontal layout, keyboard navigation, and consistent styling.
@@ -5586,36 +5265,39 @@ declare module "@stencil/core" {
              * </af-tab-bar>
              * ```
              */
-            "af-tab-bar": LocalJSX.IntrinsicElements["af-tab-bar"] & JSXBase.HTMLAttributes<HTMLAfTabBarElement>;
+            "af-tab-bar": LocalJSX.AfTabBar & 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.IntrinsicElements["af-tag"] & JSXBase.HTMLAttributes<HTMLAfTagElement>;
-            "af-testimonial": LocalJSX.IntrinsicElements["af-testimonial"] & JSXBase.HTMLAttributes<HTMLAfTestimonialElement>;
+            "af-tag": LocalJSX.AfTag & JSXBase.HTMLAttributes<HTMLAfTagElement>;
+            "af-testimonial": LocalJSX.AfTestimonial & JSXBase.HTMLAttributes<HTMLAfTestimonialElement>;
             /**
              * TestimonialCarousel - Carousel for displaying multiple customer testimonials.
              * Handles navigation between testimonials with progress indicator.
              * Wrap in Section/Container for proper page layout and theming.
              */
-            "af-testimonial-carousel": LocalJSX.IntrinsicElements["af-testimonial-carousel"] & JSXBase.HTMLAttributes<HTMLAfTestimonialCarouselElement>;
-            "af-testimonial-stat": LocalJSX.IntrinsicElements["af-testimonial-stat"] & JSXBase.HTMLAttributes<HTMLAfTestimonialStatElement>;
+            "af-testimonial-carousel": LocalJSX.AfTestimonialCarousel & JSXBase.HTMLAttributes<HTMLAfTestimonialCarouselElement>;
+            "af-testimonial-stat": LocalJSX.AfTestimonialStat & JSXBase.HTMLAttributes<HTMLAfTestimonialStatElement>;
             /**
              * Text/body component that inherits color from theme context.
              * Color is determined by the parent theme (af-section, af-card, etc.)
              * via CSS custom properties.
              */
-            "af-text": LocalJSX.IntrinsicElements["af-text"] & JSXBase.HTMLAttributes<HTMLAfTextElement>;
+            "af-text": LocalJSX.AfText & JSXBase.HTMLAttributes<HTMLAfTextElement>;
             /**
              * TextImage composite component that combines typography content with an image.
              * Supports various layout configurations with image position and proportion options.
              */
-            "af-text-image": LocalJSX.IntrinsicElements["af-text-image"] & JSXBase.HTMLAttributes<HTMLAfTextImageElement>;
+            "af-text-image": LocalJSX.AfTextImage & JSXBase.HTMLAttributes<HTMLAfTextImageElement>;
             /**
              * TextImageNest is a layout component that arranges multiple text-image content pieces
              * in various grid layouts with optional footer buttons.
@@ -5628,11 +5310,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.IntrinsicElements["af-text-image-nest"] & JSXBase.HTMLAttributes<HTMLAfTextImageNestElement>;
+            "af-text-image-nest": LocalJSX.AfTextImageNest & JSXBase.HTMLAttributes<HTMLAfTextImageNestElement>;
             /**
              * Textarea component for multi-line text input with label, description, and error states.
              */
-            "af-textarea": LocalJSX.IntrinsicElements["af-textarea"] & JSXBase.HTMLAttributes<HTMLAfTextareaElement>;
+            "af-textarea": LocalJSX.AfTextarea & JSXBase.HTMLAttributes<HTMLAfTextareaElement>;
             /**
              * Theme Override utility component.
              * Wraps content and applies an explicit theme, overriding any inherited theme
@@ -5640,7 +5322,7 @@ 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.IntrinsicElements["af-theme-override"] & JSXBase.HTMLAttributes<HTMLAfThemeOverrideElement>;
+            "af-theme-override": LocalJSX.AfThemeOverride & JSXBase.HTMLAttributes<HTMLAfThemeOverrideElement>;
             /**
              * Marketing-style composition of heading + description + buttons with
              * consistent spacing and alignment driven by the `headingSize` prop.
@@ -5659,7 +5341,7 @@ declare module "@stencil/core" {
              * accident. A console warning fires in dev mode if the slotted tag is
              * more than one level away from the prop.
              */
-            "af-typography-lockup": LocalJSX.IntrinsicElements["af-typography-lockup"] & JSXBase.HTMLAttributes<HTMLAfTypographyLockupElement>;
+            "af-typography-lockup": LocalJSX.AfTypographyLockup & JSXBase.HTMLAttributes<HTMLAfTypographyLockupElement>;
             /**
              * Video Container molecule component for showcasing video content.
              * Uses slots for typography lockups above and below the video.
@@ -5677,13 +5359,13 @@ declare module "@stencil/core" {
              * </af-split-section>
              * ```
              */
-            "af-video-container": LocalJSX.IntrinsicElements["af-video-container"] & JSXBase.HTMLAttributes<HTMLAfVideoContainerElement>;
+            "af-video-container": LocalJSX.AfVideoContainer & 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.IntrinsicElements["af-visually-hidden"] & JSXBase.HTMLAttributes<HTMLAfVisuallyHiddenElement>;
+            "af-visually-hidden": LocalJSX.AfVisuallyHidden & JSXBase.HTMLAttributes<HTMLAfVisuallyHiddenElement>;
         }
     }
 }