@affinda/wc 0.0.16 → 0.0.18

package/dist/types/components.d.ts

@@ -16,6 +16,49 @@ export { TabShape } from "./components/af-tab/af-tab";
 export { TabBarBreakpoint, TabBarShape } from "./components/af-tab-bar/af-tab-bar";
 export { TagSize, TagVariant } from "./components/af-tag/af-tag";
 export namespace Components {
+    /**
+     * Accordion container that manages multiple accordion items.
+     * Controls which items are open based on mode (independent or exclusive).
+     */
+    interface AfAccordion {
+        /**
+          * Default open item(s) for uncontrolled mode. Used as initial state when value prop is not provided.
+         */
+        "defaultValue"?: string | string[];
+        /**
+          * Behavior mode for the accordion. - `independent`: Multiple items can be open simultaneously - `exclusive`: Only one item can be open at a time
+          * @default 'independent'
+         */
+        "mode": 'independent' | 'exclusive';
+        /**
+          * Currently open item(s) for controlled mode. In independent mode, can be an array of item IDs. In exclusive mode, should be a single item ID or null.
+         */
+        "value"?: string | string[];
+    }
+    /**
+     * A single collapsible accordion item with header and content.
+     * Can be used standalone or within an af-accordion container.
+     */
+    interface AfAccordionItem {
+        /**
+          * Whether this item is disabled (cannot be toggled)
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Unique identifier for this accordion item. Used by parent af-accordion to track open state.
+         */
+        "itemId": string;
+        /**
+          * Whether this item is currently expanded
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * Programmatically toggle the accordion item
+         */
+        "toggle": () => Promise<void>;
+    }
     /**
      * 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.
@@ -30,7 +73,7 @@ export namespace Components {
     }
     /**
      * Button component that inherits colors from theme context.
-     * Colors are determined by the parent theme (af-section, af-hero-section, etc.)
+     * Colors are determined by the parent theme (af-section, af-card, etc.)
      * via CSS custom properties.
      */
     interface AfButton {
@@ -89,6 +132,26 @@ export namespace Components {
          */
         "theme"?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
     }
+    /**
+     * Center layout component for quickly centering content.
+     * Supports horizontal, vertical, or both axes.
+     */
+    interface AfCenter {
+        /**
+          * Which axis to center on. - 'horizontal': Center horizontally (justify-content: center) - 'vertical': Center vertically (align-items: center) - 'both': Center on both axes
+          * @default 'both'
+         */
+        "axis": Axis;
+        /**
+          * Use inline-flex instead of flex. Useful when the center container should only take up as much space as needed.
+          * @default false
+         */
+        "inline": boolean;
+        /**
+          * Set a minimum height. Useful for vertical centering in a viewport. Accepts any valid CSS value (e.g., '100vh', '400px').
+         */
+        "minHeight"?: string;
+    }
     /**
      * Checkbox component for selecting multiple options.
      * Supports checked, unchecked, and indeterminate states.
@@ -173,6 +236,22 @@ export namespace Components {
          */
         "maxWidth": 'xlarge' | 'large' | 'medium' | 'fluid';
     }
+    /**
+     * Divider component for visual separation between content.
+     * Supports horizontal and vertical orientations with theme-aware styling.
+     */
+    interface AfDivider {
+        /**
+          * Orientation of the divider.
+          * @default 'horizontal'
+         */
+        "orientation": Orientation;
+        /**
+          * Spacing (margin) around the divider using space tokens. For horizontal: margin-top and margin-bottom For vertical: margin-left and margin-right
+          * @default '4'
+         */
+        "spacing": Spacing;
+    }
     /**
      * Feature accordion component with expandable items and accompanying image.
      * Used for showcasing product features with visual examples.
@@ -342,6 +421,39 @@ export namespace Components {
          */
         "href": string;
     }
+    /**
+     * Generic CSS Grid component for flexible column layouts.
+     * Supports responsive column counts at different breakpoints.
+     */
+    interface AfGrid {
+        /**
+          * Align items within their grid cells.
+          * @default 'stretch'
+         */
+        "align": Align;
+        /**
+          * Number of columns at the default (largest) breakpoint.
+          * @default 3
+         */
+        "columns": Columns;
+        /**
+          * Number of columns at the large breakpoint (1024px and below).
+         */
+        "columnsLg"?: Columns;
+        /**
+          * Number of columns at the medium breakpoint (768px and below).
+         */
+        "columnsMd"?: Columns;
+        /**
+          * Number of columns at the small breakpoint (375px and below).
+         */
+        "columnsSm"?: Columns;
+        /**
+          * Gap between grid items using space tokens (1-8). Maps to --space-1 through --space-8 (4px to 32px).
+          * @default '4'
+         */
+        "gap": Gap;
+    }
     /**
      * GridCallout organism - a marketing section combining an optional pill-shaped image 
      * with a grid of IconText feature items.
@@ -395,62 +507,21 @@ export namespace Components {
     }
     /**
      * Heading component that inherits color from theme context.
-     * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+     * Color is determined by the parent theme (af-section, af-card, etc.)
      * via CSS custom properties.
      */
     interface AfHeading {
         /**
-          * Visual alignment
-          * @default 'left'
+          * Visual alignment. Defaults to 'inherit' which reads from parent context (e.g. AfTypographyLockup)
+          * @default 'inherit'
          */
-        "align": 'left' | 'center' | 'right';
+        "align": 'inherit' | 'left' | 'center' | 'right';
         /**
           * Heading level
           * @default '1'
          */
         "level": 'xl' | '1' | '2' | '3' | '4' | '5';
     }
-    /**
-     * Hero section component for marketing pages.
-     * Uses TypographyLockup internally to handle heading, description, and button layout.
-     * Sets theme context for all child components via CSS custom properties.
-     */
-    interface AfHeroSection {
-        /**
-          * Button alignment - horizontal places buttons inline, vertical stacks them
-          * @default 'horizontal'
-         */
-        "buttonAlignment": 'horizontal' | 'vertical';
-        /**
-          * Heading size for the typography lockup (1-5, where 1 is largest)
-          * @default 1
-         */
-        "headingSize": 1 | 2 | 3 | 4 | 5;
-        /**
-          * Maximum width for the copy section (in pixels)
-         */
-        "maxWidth"?: number;
-        /**
-          * Minimum height
-          * @default '60vh'
-         */
-        "minHeight": string;
-        /**
-          * Text alignment for the typography lockup
-          * @default 'center'
-         */
-        "textAlignment": 'left' | 'center';
-        /**
-          * Theme - sets background color and provides theme context to children
-          * @default 'inkwell'
-         */
-        "theme": 'white' | 'inkwell' | 'mist-green' | 'soft-clay';
-        /**
-          * Show decorative paperclip
-          * @default false
-         */
-        "withDecoration": boolean;
-    }
     /**
      * Icon component that displays SVG icons from the Affinda icon library.
      * Icons inherit color from their parent via currentColor.
@@ -664,6 +735,32 @@ export namespace Components {
          */
         "theme": BannerTheme;
     }
+    /**
+     * Inline layout component for horizontal inline-flex layouts with gap and optional wrapping.
+     * Ideal for button groups, tags, pills, and other inline elements.
+     */
+    interface AfInline {
+        /**
+          * Align items on the cross axis.
+          * @default 'center'
+         */
+        "align": Align;
+        /**
+          * Gap between items using space tokens (1-8). Maps to --space-1 through --space-8 (4px to 32px).
+          * @default '2'
+         */
+        "gap": Gap;
+        /**
+          * Justify content on the main axis.
+          * @default 'start'
+         */
+        "justify": Justify;
+        /**
+          * Whether items should wrap to the next line when they overflow.
+          * @default true
+         */
+        "wrap": boolean;
+    }
     /**
      * Input field component with label, description, and error states.
      * Supports various input types and validation states.
@@ -756,6 +853,63 @@ export namespace Components {
      */
     interface AfLogoWell {
     }
+    /**
+     * Navigation-styled accordion for mobile menu patterns.
+     * A wrapper around af-accordion with navigation-specific styling.
+     */
+    interface AfNavAccordion {
+        /**
+          * Breakpoint for styling - `desktop`: Desktop-specific styles - `mobile`: Mobile-specific styles (default for nav menus)
+          * @default 'mobile'
+         */
+        "breakpoint": 'desktop' | 'mobile';
+        /**
+          * Behavior mode for the accordion. - `independent`: Multiple items can be open simultaneously - `exclusive`: Only one item can be open at a time (typical for mobile nav)
+          * @default 'exclusive'
+         */
+        "mode": 'independent' | 'exclusive';
+        /**
+          * Currently open item ID(s)
+         */
+        "value"?: string | string[];
+    }
+    /**
+     * Navigation accordion item with NavItem-styled trigger.
+     * Combines navigation item styling with accordion collapse behavior.
+     */
+    interface AfNavAccordionItem {
+        /**
+          * Breakpoint for styling
+          * @default 'mobile'
+         */
+        "breakpoint": 'desktop' | 'mobile';
+        /**
+          * Whether this item is disabled
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Optional href - if provided, clicking navigates instead of expanding (chevron area would still toggle expansion if both behaviors needed)
+         */
+        "href"?: string;
+        /**
+          * Unique identifier for this accordion item
+         */
+        "itemId": string;
+        /**
+          * Label text for the navigation item trigger
+         */
+        "label"?: string;
+        /**
+          * Whether this item is currently expanded
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * Programmatically toggle the accordion item
+         */
+        "toggle": () => Promise<void>;
+    }
     /**
      * A navigation card component for featured article content in mega-menu dropdowns.
      * Displays an image with a gradient overlay and headline text.
@@ -880,8 +1034,24 @@ export namespace Components {
      * Includes mobile hamburger menu and support for mega-menu dropdowns.
      * The logo slot can be used to provide a custom logo. If no logo is provided,
      * the default Affinda logo will be displayed.
+     * **Slots:**
+     * - `logo` - Logo area (defaults to Affinda logo if empty)
+     * - `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
+     * - `mobile-menu` - Mobile menu content (use af-nav-accordion for accordion menus)
+     * - `mobile-button` - CTA button for mobile menu (appears at top)
      */
     interface AfNavbar {
+        /**
+          * Force mobile layout regardless of viewport size (useful for testing/stories)
+          * @default false
+         */
+        "forceMobile": boolean;
         /**
           * Whether to show the default Affinda logo when no logo slot content is provided
           * @default true
@@ -936,6 +1106,7 @@ export namespace Components {
     }
     /**
      * Radio component for selecting a single option from a group.
+     * Radios with the same `name` prop are mutually exclusive.
      */
     interface AfRadio {
         /**
@@ -971,13 +1142,32 @@ export namespace Components {
           * Padding variant
           * @default 'default'
          */
-        "padding": 'tight' | 'default' | 'loose';
+        "padding": 'none' | 'tight' | 'default' | 'loose';
         /**
           * Theme - sets background color and provides theme context to children
           * @default 'white'
          */
         "theme": 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
     }
+    /**
+     * Show component for responsive visibility control.
+     * Show or hide content based on viewport breakpoints.
+     * Breakpoints (from tokens):
+     * - sm: 375px
+     * - md: 768px
+     * - lg: 1024px
+     * - xl: 1440px
+     */
+    interface AfShow {
+        /**
+          * Show content only when viewport is at or above this breakpoint. Content is hidden below this breakpoint.
+         */
+        "above"?: Breakpoint;
+        /**
+          * Show content only when viewport is below this breakpoint. Content is hidden at or above this breakpoint.
+         */
+        "below"?: Breakpoint;
+    }
     /**
      * Social media link component
      * Circular bordered icon link for social media profiles
@@ -999,6 +1189,26 @@ export namespace Components {
          */
         "label": string;
     }
+    /**
+     * Spacer component for adding fixed or flexible space between elements.
+     * Use within flex or grid layouts.
+     */
+    interface AfSpacer {
+        /**
+          * Axis for the spacer sizing. - 'horizontal': Width-based spacing - 'vertical': Height-based spacing - 'both': Both dimensions (square)  Auto-detected based on parent flex direction when possible.
+          * @default 'both'
+         */
+        "axis": 'horizontal' | 'vertical' | 'both';
+        /**
+          * When true, the spacer grows to fill available space (flex: 1). Useful for pushing items apart in a flex container.
+          * @default false
+         */
+        "flex": boolean;
+        /**
+          * Fixed size using space tokens (1-8). Maps to --space-1 through --space-8 (4px to 32px). Ignored when `flex` is true.
+         */
+        "size"?: Size;
+    }
     /**
      * Split Section component for layouts with two-tone backgrounds.
      * Creates a vertical split with different themes for top and bottom halves.
@@ -1020,13 +1230,44 @@ export namespace Components {
           * Padding variant
           * @default 'default'
          */
-        "padding": 'tight' | 'default' | 'loose';
+        "padding": 'none' | 'tight' | 'default' | 'loose';
         /**
           * Theme for the top half of the section
           * @default 'mist-green'
          */
         "topTheme": Theme;
     }
+    /**
+     * Stack layout component for vertical or horizontal flex layouts with consistent gap spacing.
+     * Uses design tokens for gap values.
+     */
+    interface AfStack {
+        /**
+          * Align items on the cross axis.
+          * @default 'stretch'
+         */
+        "align": Align;
+        /**
+          * Stack direction. - 'vertical': Items stack top to bottom (flex-direction: column) - 'horizontal': Items stack left to right (flex-direction: row)
+          * @default 'vertical'
+         */
+        "direction": Direction;
+        /**
+          * Gap between items using space tokens (1-8). Maps to --space-1 through --space-8 (4px to 32px).
+          * @default '4'
+         */
+        "gap": Gap;
+        /**
+          * Justify content on the main axis.
+          * @default 'start'
+         */
+        "justify": Justify;
+        /**
+          * Whether items should wrap to the next line.
+          * @default false
+         */
+        "wrap": boolean;
+    }
     /**
      * Switch component for toggling between on and off states.
      */
@@ -1208,15 +1449,14 @@ export namespace Components {
     }
     /**
      * Text/body component that inherits color from theme context.
-     * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+     * Color is determined by the parent theme (af-section, af-card, etc.)
      * via CSS custom properties.
      */
     interface AfText {
         /**
-          * Visual alignment
-          * @default 'left'
+          * Visual alignment. When not set, inherits from parent context (e.g. typography lockup).
          */
-        "align": 'left' | 'center' | 'right';
+        "align"?: 'left' | 'center' | 'right';
         /**
           * Semantic element to render
           * @default 'p'
@@ -1345,6 +1585,20 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * Theme Override utility component.
+     * Wraps content and applies an explicit theme, overriding any inherited theme
+     * from parent containers like AfSection or AfCard.
+     * Unlike AfSection, this component does NOT apply a background color - 
+     * it only sets the CSS custom properties that child components consume.
+     */
+    interface AfThemeOverride {
+        /**
+          * The theme to apply to child components. Overrides any inherited theme from parent containers.
+          * @default 'white'
+         */
+        "theme": 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
+    }
     interface AfTypographyLockup {
         /**
           * The breakpoint for responsive typography
@@ -1352,10 +1606,22 @@ export namespace Components {
          */
         "breakpoint": 'desktop' | 'mobile';
         /**
-          * Button alignment (horizontal or vertical stacking)
+          * Button layout direction (horizontal or vertical stacking)
           * @default 'vertical'
          */
-        "buttonAlignment": 'horizontal' | 'vertical';
+        "buttonLayout": 'horizontal' | 'vertical';
+        /**
+          * Buttons position alignment. Falls back to textAlignment if not specified.
+         */
+        "buttonsAlignment"?: TextAlign;
+        /**
+          * Description text alignment. Falls back to textAlignment if not specified.
+         */
+        "descriptionAlignment"?: TextAlign;
+        /**
+          * Heading text alignment. Falls back to textAlignment if not specified.
+         */
+        "headingAlignment"?: TextAlign;
         /**
           * The heading size (1-5, where 1 is largest)
           * @default 2
@@ -1366,10 +1632,10 @@ export namespace Components {
          */
         "maxWidth"?: number;
         /**
-          * Text alignment
+          * Text alignment for the entire lockup (heading and description). Can be overridden individually with headingAlignment and descriptionAlignment.
           * @default 'left'
          */
-        "textAlignment": 'left' | 'center';
+        "textAlignment": TextAlign;
     }
     /**
      * Video Container molecule component for showcasing video content.
@@ -1405,6 +1671,26 @@ export namespace Components {
          */
         "videoUrl": string;
     }
+    /**
+     * 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.
+     */
+    interface AfVisuallyHidden {
+        /**
+          * When true, the content becomes visible when focused. Useful for skip links and other focusable elements.
+          * @default false
+         */
+        "focusable": boolean;
+    }
+}
+export interface AfAccordionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAfAccordionElement;
+}
+export interface AfAccordionItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAfAccordionItemElement;
 }
 export interface AfCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -1414,6 +1700,14 @@ export interface AfInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLAfInputElement;
 }
+export interface AfNavAccordionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAfNavAccordionElement;
+}
+export interface AfNavAccordionItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAfNavAccordionItemElement;
+}
 export interface AfRadioCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLAfRadioElement;
@@ -1439,6 +1733,48 @@ export interface AfVideoContainerCustomEvent<T> extends CustomEvent<T> {
     target: HTMLAfVideoContainerElement;
 }
 declare global {
+    interface HTMLAfAccordionElementEventMap {
+        "af-accordion-change": { value: string | string[] | null };
+    }
+    /**
+     * Accordion container that manages multiple accordion items.
+     * Controls which items are open based on mode (independent or exclusive).
+     */
+    interface HTMLAfAccordionElement extends Components.AfAccordion, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAfAccordionElementEventMap>(type: K, listener: (this: HTMLAfAccordionElement, ev: AfAccordionCustomEvent<HTMLAfAccordionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLAfAccordionElementEventMap>(type: K, listener: (this: HTMLAfAccordionElement, ev: AfAccordionCustomEvent<HTMLAfAccordionElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLAfAccordionElement: {
+        prototype: HTMLAfAccordionElement;
+        new (): HTMLAfAccordionElement;
+    };
+    interface HTMLAfAccordionItemElementEventMap {
+        "af-accordion-toggle": { itemId: string; open: boolean };
+    }
+    /**
+     * A single collapsible accordion item with header and content.
+     * Can be used standalone or within an af-accordion container.
+     */
+    interface HTMLAfAccordionItemElement extends Components.AfAccordionItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAfAccordionItemElementEventMap>(type: K, listener: (this: HTMLAfAccordionItemElement, ev: AfAccordionItemCustomEvent<HTMLAfAccordionItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLAfAccordionItemElementEventMap>(type: K, listener: (this: HTMLAfAccordionItemElement, ev: AfAccordionItemCustomEvent<HTMLAfAccordionItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLAfAccordionItemElement: {
+        prototype: HTMLAfAccordionItemElement;
+        new (): 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.
@@ -1451,7 +1787,7 @@ declare global {
     };
     /**
      * Button component that inherits colors from theme context.
-     * Colors are determined by the parent theme (af-section, af-hero-section, etc.)
+     * Colors are determined by the parent theme (af-section, af-card, etc.)
      * via CSS custom properties.
      */
     interface HTMLAfButtonElement extends Components.AfButton, HTMLStencilElement {
@@ -1478,6 +1814,16 @@ declare global {
         prototype: HTMLAfCardElement;
         new (): HTMLAfCardElement;
     };
+    /**
+     * Center layout component for quickly centering content.
+     * Supports horizontal, vertical, or both axes.
+     */
+    interface HTMLAfCenterElement extends Components.AfCenter, HTMLStencilElement {
+    }
+    var HTMLAfCenterElement: {
+        prototype: HTMLAfCenterElement;
+        new (): HTMLAfCenterElement;
+    };
     interface HTMLAfCheckboxElementEventMap {
         "afChange": { checked: boolean };
     }
@@ -1537,6 +1883,16 @@ declare global {
         prototype: HTMLAfContainerElement;
         new (): HTMLAfContainerElement;
     };
+    /**
+     * Divider component for visual separation between content.
+     * Supports horizontal and vertical orientations with theme-aware styling.
+     */
+    interface HTMLAfDividerElement extends Components.AfDivider, HTMLStencilElement {
+    }
+    var HTMLAfDividerElement: {
+        prototype: HTMLAfDividerElement;
+        new (): HTMLAfDividerElement;
+    };
     /**
      * Feature accordion component with expandable items and accompanying image.
      * Used for showcasing product features with visual examples.
@@ -1621,6 +1977,16 @@ declare global {
         prototype: HTMLAfFooterLinkElement;
         new (): HTMLAfFooterLinkElement;
     };
+    /**
+     * Generic CSS Grid component for flexible column layouts.
+     * Supports responsive column counts at different breakpoints.
+     */
+    interface HTMLAfGridElement extends Components.AfGrid, HTMLStencilElement {
+    }
+    var HTMLAfGridElement: {
+        prototype: HTMLAfGridElement;
+        new (): HTMLAfGridElement;
+    };
     /**
      * GridCallout organism - a marketing section combining an optional pill-shaped image 
      * with a grid of IconText feature items.
@@ -1654,7 +2020,7 @@ declare global {
     };
     /**
      * Heading component that inherits color from theme context.
-     * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+     * Color is determined by the parent theme (af-section, af-card, etc.)
      * via CSS custom properties.
      */
     interface HTMLAfHeadingElement extends Components.AfHeading, HTMLStencilElement {
@@ -1663,17 +2029,6 @@ declare global {
         prototype: HTMLAfHeadingElement;
         new (): HTMLAfHeadingElement;
     };
-    /**
-     * Hero section component for marketing pages.
-     * Uses TypographyLockup internally to handle heading, description, and button layout.
-     * Sets theme context for all child components via CSS custom properties.
-     */
-    interface HTMLAfHeroSectionElement extends Components.AfHeroSection, HTMLStencilElement {
-    }
-    var HTMLAfHeroSectionElement: {
-        prototype: HTMLAfHeroSectionElement;
-        new (): HTMLAfHeroSectionElement;
-    };
     /**
      * Icon component that displays SVG icons from the Affinda icon library.
      * Icons inherit color from their parent via currentColor.
@@ -1776,6 +2131,16 @@ declare global {
         prototype: HTMLAfInPageBannerElement;
         new (): HTMLAfInPageBannerElement;
     };
+    /**
+     * Inline layout component for horizontal inline-flex layouts with gap and optional wrapping.
+     * Ideal for button groups, tags, pills, and other inline elements.
+     */
+    interface HTMLAfInlineElement extends Components.AfInline, HTMLStencilElement {
+    }
+    var HTMLAfInlineElement: {
+        prototype: HTMLAfInlineElement;
+        new (): HTMLAfInlineElement;
+    };
     interface HTMLAfInputElementEventMap {
         "afInput": { value: string };
         "afBlur": void;
@@ -1819,6 +2184,48 @@ declare global {
         prototype: HTMLAfLogoWellElement;
         new (): HTMLAfLogoWellElement;
     };
+    interface HTMLAfNavAccordionElementEventMap {
+        "af-nav-accordion-change": { value: string | string[] | null };
+    }
+    /**
+     * Navigation-styled accordion for mobile menu patterns.
+     * A wrapper around af-accordion with navigation-specific styling.
+     */
+    interface HTMLAfNavAccordionElement extends Components.AfNavAccordion, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAfNavAccordionElementEventMap>(type: K, listener: (this: HTMLAfNavAccordionElement, ev: AfNavAccordionCustomEvent<HTMLAfNavAccordionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLAfNavAccordionElementEventMap>(type: K, listener: (this: HTMLAfNavAccordionElement, ev: AfNavAccordionCustomEvent<HTMLAfNavAccordionElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLAfNavAccordionElement: {
+        prototype: HTMLAfNavAccordionElement;
+        new (): HTMLAfNavAccordionElement;
+    };
+    interface HTMLAfNavAccordionItemElementEventMap {
+        "af-nav-accordion-item-toggle": { itemId: string; open: boolean };
+    }
+    /**
+     * Navigation accordion item with NavItem-styled trigger.
+     * Combines navigation item styling with accordion collapse behavior.
+     */
+    interface HTMLAfNavAccordionItemElement extends Components.AfNavAccordionItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAfNavAccordionItemElementEventMap>(type: K, listener: (this: HTMLAfNavAccordionItemElement, ev: AfNavAccordionItemCustomEvent<HTMLAfNavAccordionItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLAfNavAccordionItemElementEventMap>(type: K, listener: (this: HTMLAfNavAccordionItemElement, ev: AfNavAccordionItemCustomEvent<HTMLAfNavAccordionItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLAfNavAccordionItemElement: {
+        prototype: HTMLAfNavAccordionItemElement;
+        new (): HTMLAfNavAccordionItemElement;
+    };
     /**
      * A navigation card component for featured article content in mega-menu dropdowns.
      * Displays an image with a gradient overlay and headline text.
@@ -1884,6 +2291,17 @@ declare global {
      * Includes mobile hamburger menu and support for mega-menu dropdowns.
      * The logo slot can be used to provide a custom logo. If no logo is provided,
      * the default Affinda logo will be displayed.
+     * **Slots:**
+     * - `logo` - Logo area (defaults to Affinda logo if empty)
+     * - `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
+     * - `mobile-menu` - Mobile menu content (use af-nav-accordion for accordion menus)
+     * - `mobile-button` - CTA button for mobile menu (appears at top)
      */
     interface HTMLAfNavbarElement extends Components.AfNavbar, HTMLStencilElement {
     }
@@ -1917,10 +2335,11 @@ declare global {
         new (): HTMLAfProgressLineElement;
     };
     interface HTMLAfRadioElementEventMap {
-        "afChange": { checked: boolean; value?: string };
+        "afChange": { checked: boolean; value?: string; name?: string };
     }
     /**
      * Radio component for selecting a single option from a group.
+     * Radios with the same `name` prop are mutually exclusive.
      */
     interface HTMLAfRadioElement extends Components.AfRadio, HTMLStencilElement {
         addEventListener<K extends keyof HTMLAfRadioElementEventMap>(type: K, listener: (this: HTMLAfRadioElement, ev: AfRadioCustomEvent<HTMLAfRadioElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1946,6 +2365,21 @@ declare global {
         prototype: HTMLAfSectionElement;
         new (): HTMLAfSectionElement;
     };
+    /**
+     * Show component for responsive visibility control.
+     * Show or hide content based on viewport breakpoints.
+     * Breakpoints (from tokens):
+     * - sm: 375px
+     * - md: 768px
+     * - lg: 1024px
+     * - xl: 1440px
+     */
+    interface HTMLAfShowElement extends Components.AfShow, HTMLStencilElement {
+    }
+    var HTMLAfShowElement: {
+        prototype: HTMLAfShowElement;
+        new (): HTMLAfShowElement;
+    };
     /**
      * Social media link component
      * Circular bordered icon link for social media profiles
@@ -1956,6 +2390,16 @@ declare global {
         prototype: HTMLAfSocialLinkElement;
         new (): HTMLAfSocialLinkElement;
     };
+    /**
+     * Spacer component for adding fixed or flexible space between elements.
+     * Use within flex or grid layouts.
+     */
+    interface HTMLAfSpacerElement extends Components.AfSpacer, HTMLStencilElement {
+    }
+    var HTMLAfSpacerElement: {
+        prototype: HTMLAfSpacerElement;
+        new (): HTMLAfSpacerElement;
+    };
     /**
      * Split Section component for layouts with two-tone backgrounds.
      * Creates a vertical split with different themes for top and bottom halves.
@@ -1968,6 +2412,16 @@ declare global {
         prototype: HTMLAfSplitSectionElement;
         new (): HTMLAfSplitSectionElement;
     };
+    /**
+     * Stack layout component for vertical or horizontal flex layouts with consistent gap spacing.
+     * Uses design tokens for gap values.
+     */
+    interface HTMLAfStackElement extends Components.AfStack, HTMLStencilElement {
+    }
+    var HTMLAfStackElement: {
+        prototype: HTMLAfStackElement;
+        new (): HTMLAfStackElement;
+    };
     interface HTMLAfSwitchElementEventMap {
         "afChange": { active: boolean };
     }
@@ -2087,7 +2541,7 @@ declare global {
     };
     /**
      * Text/body component that inherits color from theme context.
-     * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+     * Color is determined by the parent theme (af-section, af-card, etc.)
      * via CSS custom properties.
      */
     interface HTMLAfTextElement extends Components.AfText, HTMLStencilElement {
@@ -2147,6 +2601,19 @@ declare global {
         prototype: HTMLAfTextareaElement;
         new (): HTMLAfTextareaElement;
     };
+    /**
+     * Theme Override utility component.
+     * Wraps content and applies an explicit theme, overriding any inherited theme
+     * from parent containers like AfSection or AfCard.
+     * Unlike AfSection, this component does NOT apply a background color - 
+     * it only sets the CSS custom properties that child components consume.
+     */
+    interface HTMLAfThemeOverrideElement extends Components.AfThemeOverride, HTMLStencilElement {
+    }
+    var HTMLAfThemeOverrideElement: {
+        prototype: HTMLAfThemeOverrideElement;
+        new (): HTMLAfThemeOverrideElement;
+    };
     interface HTMLAfTypographyLockupElement extends Components.AfTypographyLockup, HTMLStencilElement {
     }
     var HTMLAfTypographyLockupElement: {
@@ -2187,16 +2654,31 @@ declare global {
         prototype: HTMLAfVideoContainerElement;
         new (): 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.
+     */
+    interface HTMLAfVisuallyHiddenElement extends Components.AfVisuallyHidden, HTMLStencilElement {
+    }
+    var HTMLAfVisuallyHiddenElement: {
+        prototype: HTMLAfVisuallyHiddenElement;
+        new (): HTMLAfVisuallyHiddenElement;
+    };
     interface HTMLElementTagNameMap {
+        "af-accordion": HTMLAfAccordionElement;
+        "af-accordion-item": HTMLAfAccordionItemElement;
         "af-aspect-ratio": HTMLAfAspectRatioElement;
         "af-button": HTMLAfButtonElement;
         "af-button-group": HTMLAfButtonGroupElement;
         "af-card": HTMLAfCardElement;
+        "af-center": HTMLAfCenterElement;
         "af-checkbox": HTMLAfCheckboxElement;
         "af-client-carousel": HTMLAfClientCarouselElement;
         "af-color-swatch": HTMLAfColorSwatchElement;
         "af-contact-item": HTMLAfContactItemElement;
         "af-container": HTMLAfContainerElement;
+        "af-divider": HTMLAfDividerElement;
         "af-feature-accordion": HTMLAfFeatureAccordionElement;
         "af-feature-card": HTMLAfFeatureCardElement;
         "af-feature-grid": HTMLAfFeatureGridElement;
@@ -2204,9 +2686,9 @@ declare global {
         "af-footer": HTMLAfFooterElement;
         "af-footer-column": HTMLAfFooterColumnElement;
         "af-footer-link": HTMLAfFooterLinkElement;
+        "af-grid": HTMLAfGridElement;
         "af-grid-callout": HTMLAfGridCalloutElement;
         "af-heading": HTMLAfHeadingElement;
-        "af-hero-section": HTMLAfHeroSectionElement;
         "af-icon": HTMLAfIconElement;
         "af-icon-box": HTMLAfIconBoxElement;
         "af-icon-button": HTMLAfIconButtonElement;
@@ -2214,9 +2696,12 @@ declare global {
         "af-illustrated-card": HTMLAfIllustratedCardElement;
         "af-image": HTMLAfImageElement;
         "af-in-page-banner": HTMLAfInPageBannerElement;
+        "af-inline": HTMLAfInlineElement;
         "af-input": HTMLAfInputElement;
         "af-logo": HTMLAfLogoElement;
         "af-logo-well": HTMLAfLogoWellElement;
+        "af-nav-accordion": HTMLAfNavAccordionElement;
+        "af-nav-accordion-item": HTMLAfNavAccordionItemElement;
         "af-nav-card": HTMLAfNavCardElement;
         "af-nav-item": HTMLAfNavItemElement;
         "af-nav-menu": HTMLAfNavMenuElement;
@@ -2226,8 +2711,11 @@ declare global {
         "af-progress-line": HTMLAfProgressLineElement;
         "af-radio": HTMLAfRadioElement;
         "af-section": HTMLAfSectionElement;
+        "af-show": HTMLAfShowElement;
         "af-social-link": HTMLAfSocialLinkElement;
+        "af-spacer": HTMLAfSpacerElement;
         "af-split-section": HTMLAfSplitSectionElement;
+        "af-stack": HTMLAfStackElement;
         "af-switch": HTMLAfSwitchElement;
         "af-tab": HTMLAfTabElement;
         "af-tab-bar": HTMLAfTabBarElement;
@@ -2239,11 +2727,60 @@ declare global {
         "af-text-image": HTMLAfTextImageElement;
         "af-text-image-nest": HTMLAfTextImageNestElement;
         "af-textarea": HTMLAfTextareaElement;
+        "af-theme-override": HTMLAfThemeOverrideElement;
         "af-typography-lockup": HTMLAfTypographyLockupElement;
         "af-video-container": HTMLAfVideoContainerElement;
+        "af-visually-hidden": HTMLAfVisuallyHiddenElement;
     }
 }
 declare namespace LocalJSX {
+    /**
+     * Accordion container that manages multiple accordion items.
+     * Controls which items are open based on mode (independent or exclusive).
+     */
+    interface AfAccordion {
+        /**
+          * Default open item(s) for uncontrolled mode. Used as initial state when value prop is not provided.
+         */
+        "defaultValue"?: string | string[];
+        /**
+          * Behavior mode for the accordion. - `independent`: Multiple items can be open simultaneously - `exclusive`: Only one item can be open at a time
+          * @default 'independent'
+         */
+        "mode"?: 'independent' | 'exclusive';
+        /**
+          * Emitted when the open state of items changes. Returns the new value (string[] for independent, string | null for exclusive).
+         */
+        "onAf-accordion-change"?: (event: AfAccordionCustomEvent<{ value: string | string[] | null }>) => void;
+        /**
+          * Currently open item(s) for controlled mode. In independent mode, can be an array of item IDs. In exclusive mode, should be a single item ID or null.
+         */
+        "value"?: string | string[];
+    }
+    /**
+     * A single collapsible accordion item with header and content.
+     * Can be used standalone or within an af-accordion container.
+     */
+    interface AfAccordionItem {
+        /**
+          * Whether this item is disabled (cannot be toggled)
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Unique identifier for this accordion item. Used by parent af-accordion to track open state.
+         */
+        "itemId": string;
+        /**
+          * Emitted when the accordion item is toggled
+         */
+        "onAf-accordion-toggle"?: (event: AfAccordionItemCustomEvent<{ itemId: string; open: boolean }>) => void;
+        /**
+          * Whether this item is currently expanded
+          * @default false
+         */
+        "open"?: boolean;
+    }
     /**
      * A container component that maintains a fixed aspect ratio for its content.
      * Useful for images, videos, or any content that needs to maintain specific proportions.
@@ -2258,7 +2795,7 @@ declare namespace LocalJSX {
     }
     /**
      * Button component that inherits colors from theme context.
-     * Colors are determined by the parent theme (af-section, af-hero-section, etc.)
+     * Colors are determined by the parent theme (af-section, af-card, etc.)
      * via CSS custom properties.
      */
     interface AfButton {
@@ -2317,6 +2854,26 @@ declare namespace LocalJSX {
          */
         "theme"?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
     }
+    /**
+     * Center layout component for quickly centering content.
+     * Supports horizontal, vertical, or both axes.
+     */
+    interface AfCenter {
+        /**
+          * Which axis to center on. - 'horizontal': Center horizontally (justify-content: center) - 'vertical': Center vertically (align-items: center) - 'both': Center on both axes
+          * @default 'both'
+         */
+        "axis"?: Axis;
+        /**
+          * Use inline-flex instead of flex. Useful when the center container should only take up as much space as needed.
+          * @default false
+         */
+        "inline"?: boolean;
+        /**
+          * Set a minimum height. Useful for vertical centering in a viewport. Accepts any valid CSS value (e.g., '100vh', '400px').
+         */
+        "minHeight"?: string;
+    }
     /**
      * Checkbox component for selecting multiple options.
      * Supports checked, unchecked, and indeterminate states.
@@ -2405,6 +2962,22 @@ declare namespace LocalJSX {
          */
         "maxWidth"?: 'xlarge' | 'large' | 'medium' | 'fluid';
     }
+    /**
+     * Divider component for visual separation between content.
+     * Supports horizontal and vertical orientations with theme-aware styling.
+     */
+    interface AfDivider {
+        /**
+          * Orientation of the divider.
+          * @default 'horizontal'
+         */
+        "orientation"?: Orientation;
+        /**
+          * Spacing (margin) around the divider using space tokens. For horizontal: margin-top and margin-bottom For vertical: margin-left and margin-right
+          * @default '4'
+         */
+        "spacing"?: Spacing;
+    }
     /**
      * Feature accordion component with expandable items and accompanying image.
      * Used for showcasing product features with visual examples.
@@ -2574,6 +3147,39 @@ declare namespace LocalJSX {
          */
         "href"?: string;
     }
+    /**
+     * Generic CSS Grid component for flexible column layouts.
+     * Supports responsive column counts at different breakpoints.
+     */
+    interface AfGrid {
+        /**
+          * Align items within their grid cells.
+          * @default 'stretch'
+         */
+        "align"?: Align;
+        /**
+          * Number of columns at the default (largest) breakpoint.
+          * @default 3
+         */
+        "columns"?: Columns;
+        /**
+          * Number of columns at the large breakpoint (1024px and below).
+         */
+        "columnsLg"?: Columns;
+        /**
+          * Number of columns at the medium breakpoint (768px and below).
+         */
+        "columnsMd"?: Columns;
+        /**
+          * Number of columns at the small breakpoint (375px and below).
+         */
+        "columnsSm"?: Columns;
+        /**
+          * Gap between grid items using space tokens (1-8). Maps to --space-1 through --space-8 (4px to 32px).
+          * @default '4'
+         */
+        "gap"?: Gap;
+    }
     /**
      * GridCallout organism - a marketing section combining an optional pill-shaped image 
      * with a grid of IconText feature items.
@@ -2627,62 +3233,21 @@ declare namespace LocalJSX {
     }
     /**
      * Heading component that inherits color from theme context.
-     * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+     * Color is determined by the parent theme (af-section, af-card, etc.)
      * via CSS custom properties.
      */
     interface AfHeading {
         /**
-          * Visual alignment
-          * @default 'left'
+          * Visual alignment. Defaults to 'inherit' which reads from parent context (e.g. AfTypographyLockup)
+          * @default 'inherit'
          */
-        "align"?: 'left' | 'center' | 'right';
+        "align"?: 'inherit' | 'left' | 'center' | 'right';
         /**
           * Heading level
           * @default '1'
          */
         "level"?: 'xl' | '1' | '2' | '3' | '4' | '5';
     }
-    /**
-     * Hero section component for marketing pages.
-     * Uses TypographyLockup internally to handle heading, description, and button layout.
-     * Sets theme context for all child components via CSS custom properties.
-     */
-    interface AfHeroSection {
-        /**
-          * Button alignment - horizontal places buttons inline, vertical stacks them
-          * @default 'horizontal'
-         */
-        "buttonAlignment"?: 'horizontal' | 'vertical';
-        /**
-          * Heading size for the typography lockup (1-5, where 1 is largest)
-          * @default 1
-         */
-        "headingSize"?: 1 | 2 | 3 | 4 | 5;
-        /**
-          * Maximum width for the copy section (in pixels)
-         */
-        "maxWidth"?: number;
-        /**
-          * Minimum height
-          * @default '60vh'
-         */
-        "minHeight"?: string;
-        /**
-          * Text alignment for the typography lockup
-          * @default 'center'
-         */
-        "textAlignment"?: 'left' | 'center';
-        /**
-          * Theme - sets background color and provides theme context to children
-          * @default 'inkwell'
-         */
-        "theme"?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay';
-        /**
-          * Show decorative paperclip
-          * @default false
-         */
-        "withDecoration"?: boolean;
-    }
     /**
      * Icon component that displays SVG icons from the Affinda icon library.
      * Icons inherit color from their parent via currentColor.
@@ -2896,6 +3461,32 @@ declare namespace LocalJSX {
          */
         "theme"?: BannerTheme;
     }
+    /**
+     * Inline layout component for horizontal inline-flex layouts with gap and optional wrapping.
+     * Ideal for button groups, tags, pills, and other inline elements.
+     */
+    interface AfInline {
+        /**
+          * Align items on the cross axis.
+          * @default 'center'
+         */
+        "align"?: Align;
+        /**
+          * Gap between items using space tokens (1-8). Maps to --space-1 through --space-8 (4px to 32px).
+          * @default '2'
+         */
+        "gap"?: Gap;
+        /**
+          * Justify content on the main axis.
+          * @default 'start'
+         */
+        "justify"?: Justify;
+        /**
+          * Whether items should wrap to the next line when they overflow.
+          * @default true
+         */
+        "wrap"?: boolean;
+    }
     /**
      * Input field component with label, description, and error states.
      * Supports various input types and validation states.
@@ -3008,6 +3599,67 @@ declare namespace LocalJSX {
      */
     interface AfLogoWell {
     }
+    /**
+     * Navigation-styled accordion for mobile menu patterns.
+     * A wrapper around af-accordion with navigation-specific styling.
+     */
+    interface AfNavAccordion {
+        /**
+          * Breakpoint for styling - `desktop`: Desktop-specific styles - `mobile`: Mobile-specific styles (default for nav menus)
+          * @default 'mobile'
+         */
+        "breakpoint"?: 'desktop' | 'mobile';
+        /**
+          * Behavior mode for the accordion. - `independent`: Multiple items can be open simultaneously - `exclusive`: Only one item can be open at a time (typical for mobile nav)
+          * @default 'exclusive'
+         */
+        "mode"?: 'independent' | 'exclusive';
+        /**
+          * Emitted when the open state of items changes
+         */
+        "onAf-nav-accordion-change"?: (event: AfNavAccordionCustomEvent<{ value: string | string[] | null }>) => void;
+        /**
+          * Currently open item ID(s)
+         */
+        "value"?: string | string[];
+    }
+    /**
+     * Navigation accordion item with NavItem-styled trigger.
+     * Combines navigation item styling with accordion collapse behavior.
+     */
+    interface AfNavAccordionItem {
+        /**
+          * Breakpoint for styling
+          * @default 'mobile'
+         */
+        "breakpoint"?: 'desktop' | 'mobile';
+        /**
+          * Whether this item is disabled
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Optional href - if provided, clicking navigates instead of expanding (chevron area would still toggle expansion if both behaviors needed)
+         */
+        "href"?: string;
+        /**
+          * Unique identifier for this accordion item
+         */
+        "itemId": string;
+        /**
+          * Label text for the navigation item trigger
+         */
+        "label"?: string;
+        /**
+          * Emitted when the accordion item is toggled
+         */
+        "onAf-nav-accordion-item-toggle"?: (event: AfNavAccordionItemCustomEvent<{ itemId: string; open: boolean }>) => void;
+        /**
+          * Whether this item is currently expanded
+          * @default false
+         */
+        "open"?: boolean;
+    }
     /**
      * A navigation card component for featured article content in mega-menu dropdowns.
      * Displays an image with a gradient overlay and headline text.
@@ -3132,8 +3784,24 @@ declare namespace LocalJSX {
      * Includes mobile hamburger menu and support for mega-menu dropdowns.
      * The logo slot can be used to provide a custom logo. If no logo is provided,
      * the default Affinda logo will be displayed.
+     * **Slots:**
+     * - `logo` - Logo area (defaults to Affinda logo if empty)
+     * - `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
+     * - `mobile-menu` - Mobile menu content (use af-nav-accordion for accordion menus)
+     * - `mobile-button` - CTA button for mobile menu (appears at top)
      */
     interface AfNavbar {
+        /**
+          * Force mobile layout regardless of viewport size (useful for testing/stories)
+          * @default false
+         */
+        "forceMobile"?: boolean;
         /**
           * Whether to show the default Affinda logo when no logo slot content is provided
           * @default true
@@ -3188,6 +3856,7 @@ declare namespace LocalJSX {
     }
     /**
      * Radio component for selecting a single option from a group.
+     * Radios with the same `name` prop are mutually exclusive.
      */
     interface AfRadio {
         /**
@@ -3207,7 +3876,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the radio checked state changes
          */
-        "onAfChange"?: (event: AfRadioCustomEvent<{ checked: boolean; value?: string }>) => void;
+        "onAfChange"?: (event: AfRadioCustomEvent<{ checked: boolean; value?: string; name?: string }>) => void;
         /**
           * The value of the radio for form submission
          */
@@ -3227,13 +3896,32 @@ declare namespace LocalJSX {
           * Padding variant
           * @default 'default'
          */
-        "padding"?: 'tight' | 'default' | 'loose';
+        "padding"?: 'none' | 'tight' | 'default' | 'loose';
         /**
           * Theme - sets background color and provides theme context to children
           * @default 'white'
          */
         "theme"?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
     }
+    /**
+     * Show component for responsive visibility control.
+     * Show or hide content based on viewport breakpoints.
+     * Breakpoints (from tokens):
+     * - sm: 375px
+     * - md: 768px
+     * - lg: 1024px
+     * - xl: 1440px
+     */
+    interface AfShow {
+        /**
+          * Show content only when viewport is at or above this breakpoint. Content is hidden below this breakpoint.
+         */
+        "above"?: Breakpoint;
+        /**
+          * Show content only when viewport is below this breakpoint. Content is hidden at or above this breakpoint.
+         */
+        "below"?: Breakpoint;
+    }
     /**
      * Social media link component
      * Circular bordered icon link for social media profiles
@@ -3255,6 +3943,26 @@ declare namespace LocalJSX {
          */
         "label"?: string;
     }
+    /**
+     * Spacer component for adding fixed or flexible space between elements.
+     * Use within flex or grid layouts.
+     */
+    interface AfSpacer {
+        /**
+          * Axis for the spacer sizing. - 'horizontal': Width-based spacing - 'vertical': Height-based spacing - 'both': Both dimensions (square)  Auto-detected based on parent flex direction when possible.
+          * @default 'both'
+         */
+        "axis"?: 'horizontal' | 'vertical' | 'both';
+        /**
+          * When true, the spacer grows to fill available space (flex: 1). Useful for pushing items apart in a flex container.
+          * @default false
+         */
+        "flex"?: boolean;
+        /**
+          * Fixed size using space tokens (1-8). Maps to --space-1 through --space-8 (4px to 32px). Ignored when `flex` is true.
+         */
+        "size"?: Size;
+    }
     /**
      * Split Section component for layouts with two-tone backgrounds.
      * Creates a vertical split with different themes for top and bottom halves.
@@ -3276,13 +3984,44 @@ declare namespace LocalJSX {
           * Padding variant
           * @default 'default'
          */
-        "padding"?: 'tight' | 'default' | 'loose';
+        "padding"?: 'none' | 'tight' | 'default' | 'loose';
         /**
           * Theme for the top half of the section
           * @default 'mist-green'
          */
         "topTheme"?: Theme;
     }
+    /**
+     * Stack layout component for vertical or horizontal flex layouts with consistent gap spacing.
+     * Uses design tokens for gap values.
+     */
+    interface AfStack {
+        /**
+          * Align items on the cross axis.
+          * @default 'stretch'
+         */
+        "align"?: Align;
+        /**
+          * Stack direction. - 'vertical': Items stack top to bottom (flex-direction: column) - 'horizontal': Items stack left to right (flex-direction: row)
+          * @default 'vertical'
+         */
+        "direction"?: Direction;
+        /**
+          * Gap between items using space tokens (1-8). Maps to --space-1 through --space-8 (4px to 32px).
+          * @default '4'
+         */
+        "gap"?: Gap;
+        /**
+          * Justify content on the main axis.
+          * @default 'start'
+         */
+        "justify"?: Justify;
+        /**
+          * Whether items should wrap to the next line.
+          * @default false
+         */
+        "wrap"?: boolean;
+    }
     /**
      * Switch component for toggling between on and off states.
      */
@@ -3480,13 +4219,12 @@ declare namespace LocalJSX {
     }
     /**
      * Text/body component that inherits color from theme context.
-     * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+     * Color is determined by the parent theme (af-section, af-card, etc.)
      * via CSS custom properties.
      */
     interface AfText {
         /**
-          * Visual alignment
-          * @default 'left'
+          * Visual alignment. When not set, inherits from parent context (e.g. typography lockup).
          */
         "align"?: 'left' | 'center' | 'right';
         /**
@@ -3633,6 +4371,20 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * Theme Override utility component.
+     * Wraps content and applies an explicit theme, overriding any inherited theme
+     * from parent containers like AfSection or AfCard.
+     * Unlike AfSection, this component does NOT apply a background color - 
+     * it only sets the CSS custom properties that child components consume.
+     */
+    interface AfThemeOverride {
+        /**
+          * The theme to apply to child components. Overrides any inherited theme from parent containers.
+          * @default 'white'
+         */
+        "theme"?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
+    }
     interface AfTypographyLockup {
         /**
           * The breakpoint for responsive typography
@@ -3640,10 +4392,22 @@ declare namespace LocalJSX {
          */
         "breakpoint"?: 'desktop' | 'mobile';
         /**
-          * Button alignment (horizontal or vertical stacking)
+          * Button layout direction (horizontal or vertical stacking)
           * @default 'vertical'
          */
-        "buttonAlignment"?: 'horizontal' | 'vertical';
+        "buttonLayout"?: 'horizontal' | 'vertical';
+        /**
+          * Buttons position alignment. Falls back to textAlignment if not specified.
+         */
+        "buttonsAlignment"?: TextAlign;
+        /**
+          * Description text alignment. Falls back to textAlignment if not specified.
+         */
+        "descriptionAlignment"?: TextAlign;
+        /**
+          * Heading text alignment. Falls back to textAlignment if not specified.
+         */
+        "headingAlignment"?: TextAlign;
         /**
           * The heading size (1-5, where 1 is largest)
           * @default 2
@@ -3654,10 +4418,10 @@ declare namespace LocalJSX {
          */
         "maxWidth"?: number;
         /**
-          * Text alignment
+          * Text alignment for the entire lockup (heading and description). Can be overridden individually with headingAlignment and descriptionAlignment.
           * @default 'left'
          */
-        "textAlignment"?: 'left' | 'center';
+        "textAlignment"?: TextAlign;
     }
     /**
      * Video Container molecule component for showcasing video content.
@@ -3697,16 +4461,32 @@ declare namespace LocalJSX {
          */
         "videoUrl"?: string;
     }
+    /**
+     * 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.
+     */
+    interface AfVisuallyHidden {
+        /**
+          * When true, the content becomes visible when focused. Useful for skip links and other focusable elements.
+          * @default false
+         */
+        "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;
@@ -3714,9 +4494,9 @@ declare namespace LocalJSX {
         "af-footer": AfFooter;
         "af-footer-column": AfFooterColumn;
         "af-footer-link": AfFooterLink;
+        "af-grid": AfGrid;
         "af-grid-callout": AfGridCallout;
         "af-heading": AfHeading;
-        "af-hero-section": AfHeroSection;
         "af-icon": AfIcon;
         "af-icon-box": AfIconBox;
         "af-icon-button": AfIconButton;
@@ -3724,9 +4504,12 @@ declare namespace LocalJSX {
         "af-illustrated-card": AfIllustratedCard;
         "af-image": AfImage;
         "af-in-page-banner": AfInPageBanner;
+        "af-inline": AfInline;
         "af-input": AfInput;
         "af-logo": AfLogo;
         "af-logo-well": AfLogoWell;
+        "af-nav-accordion": AfNavAccordion;
+        "af-nav-accordion-item": AfNavAccordionItem;
         "af-nav-card": AfNavCard;
         "af-nav-item": AfNavItem;
         "af-nav-menu": AfNavMenu;
@@ -3736,8 +4519,11 @@ declare namespace LocalJSX {
         "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;
@@ -3749,14 +4535,26 @@ declare namespace LocalJSX {
         "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 };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            /**
+             * Accordion container that manages multiple accordion items.
+             * Controls which items are open based on mode (independent or exclusive).
+             */
+            "af-accordion": LocalJSX.AfAccordion & JSXBase.HTMLAttributes<HTMLAfAccordionElement>;
+            /**
+             * 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>;
             /**
              * 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.
@@ -3764,7 +4562,7 @@ declare module "@stencil/core" {
             "af-aspect-ratio": LocalJSX.AfAspectRatio & JSXBase.HTMLAttributes<HTMLAfAspectRatioElement>;
             /**
              * Button component that inherits colors from theme context.
-             * Colors are determined by the parent theme (af-section, af-hero-section, etc.)
+             * Colors are determined by the parent theme (af-section, af-card, etc.)
              * via CSS custom properties.
              */
             "af-button": LocalJSX.AfButton & JSXBase.HTMLAttributes<HTMLAfButtonElement>;
@@ -3776,6 +4574,11 @@ declare module "@stencil/core" {
              * af-feature-card and af-illustrated-card.
              */
             "af-card": LocalJSX.AfCard & JSXBase.HTMLAttributes<HTMLAfCardElement>;
+            /**
+             * Center layout component for quickly centering content.
+             * Supports horizontal, vertical, or both axes.
+             */
+            "af-center": LocalJSX.AfCenter & JSXBase.HTMLAttributes<HTMLAfCenterElement>;
             /**
              * Checkbox component for selecting multiple options.
              * Supports checked, unchecked, and indeterminate states.
@@ -3799,6 +4602,11 @@ declare module "@stencil/core" {
              * constraints based on the Affinda grid system.
              */
             "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.AfDivider & JSXBase.HTMLAttributes<HTMLAfDividerElement>;
             /**
              * Feature accordion component with expandable items and accompanying image.
              * Used for showcasing product features with visual examples.
@@ -3848,6 +4656,11 @@ declare module "@stencil/core" {
              * Styled link for use in footer navigation columns
              */
             "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.AfGrid & JSXBase.HTMLAttributes<HTMLAfGridElement>;
             /**
              * GridCallout organism - a marketing section combining an optional pill-shaped image 
              * with a grid of IconText feature items.
@@ -3876,16 +4689,10 @@ declare module "@stencil/core" {
             "af-grid-callout": LocalJSX.AfGridCallout & JSXBase.HTMLAttributes<HTMLAfGridCalloutElement>;
             /**
              * Heading component that inherits color from theme context.
-             * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+             * Color is determined by the parent theme (af-section, af-card, etc.)
              * via CSS custom properties.
              */
             "af-heading": LocalJSX.AfHeading & JSXBase.HTMLAttributes<HTMLAfHeadingElement>;
-            /**
-             * Hero section component for marketing pages.
-             * Uses TypographyLockup internally to handle heading, description, and button layout.
-             * Sets theme context for all child components via CSS custom properties.
-             */
-            "af-hero-section": LocalJSX.AfHeroSection & JSXBase.HTMLAttributes<HTMLAfHeroSectionElement>;
             /**
              * Icon component that displays SVG icons from the Affinda icon library.
              * Icons inherit color from their parent via currentColor.
@@ -3953,6 +4760,11 @@ declare module "@stencil/core" {
              * Alternatively, use the `illustration` slot for completely custom content.
              */
             "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.AfInline & JSXBase.HTMLAttributes<HTMLAfInlineElement>;
             /**
              * Input field component with label, description, and error states.
              * Supports various input types and validation states.
@@ -3966,6 +4778,16 @@ declare module "@stencil/core" {
              * A rounded container for displaying client logos
              */
             "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.AfNavAccordion & 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>;
             /**
              * A navigation card component for featured article content in mega-menu dropdowns.
              * Displays an image with a gradient overlay and headline text.
@@ -4011,6 +4833,17 @@ declare module "@stencil/core" {
              * Includes mobile hamburger menu and support for mega-menu dropdowns.
              * The logo slot can be used to provide a custom logo. If no logo is provided,
              * the default Affinda logo will be displayed.
+             * **Slots:**
+             * - `logo` - Logo area (defaults to Affinda logo if empty)
+             * - `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
+             * - `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>;
             /**
@@ -4030,6 +4863,7 @@ declare module "@stencil/core" {
             "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.AfRadio & JSXBase.HTMLAttributes<HTMLAfRadioElement>;
             /**
@@ -4037,11 +4871,26 @@ declare module "@stencil/core" {
              * Sets theme context for all child components via CSS custom properties.
              */
             "af-section": LocalJSX.AfSection & JSXBase.HTMLAttributes<HTMLAfSectionElement>;
+            /**
+             * Show component for responsive visibility control.
+             * Show or hide content based on viewport breakpoints.
+             * Breakpoints (from tokens):
+             * - sm: 375px
+             * - md: 768px
+             * - lg: 1024px
+             * - xl: 1440px
+             */
+            "af-show": LocalJSX.AfShow & JSXBase.HTMLAttributes<HTMLAfShowElement>;
             /**
              * Social media link component
              * Circular bordered icon link for social media profiles
              */
             "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.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.
@@ -4049,6 +4898,11 @@ declare module "@stencil/core" {
              * Uses a CSS linear-gradient for the split background effect.
              */
             "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.AfStack & JSXBase.HTMLAttributes<HTMLAfStackElement>;
             /**
              * Switch component for toggling between on and off states.
              */
@@ -4099,7 +4953,7 @@ declare module "@stencil/core" {
             "af-testimonial-stat": LocalJSX.AfTestimonialStat & JSXBase.HTMLAttributes<HTMLAfTestimonialStatElement>;
             /**
              * Text/body component that inherits color from theme context.
-             * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+             * Color is determined by the parent theme (af-section, af-card, etc.)
              * via CSS custom properties.
              */
             "af-text": LocalJSX.AfText & JSXBase.HTMLAttributes<HTMLAfTextElement>;
@@ -4125,6 +4979,14 @@ declare module "@stencil/core" {
              * Textarea component for multi-line text input with label, description, and error states.
              */
             "af-textarea": LocalJSX.AfTextarea & JSXBase.HTMLAttributes<HTMLAfTextareaElement>;
+            /**
+             * Theme Override utility component.
+             * Wraps content and applies an explicit theme, overriding any inherited theme
+             * from parent containers like AfSection or AfCard.
+             * 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>;
             /**
              * Video Container molecule component for showcasing video content.
@@ -4144,6 +5006,12 @@ declare module "@stencil/core" {
              * ```
              */
             "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.AfVisuallyHidden & JSXBase.HTMLAttributes<HTMLAfVisuallyHiddenElement>;
         }
     }
 }