@affinda/wc 0.0.22 → 0.0.24

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 (12/24px padding) - `thin` - Compact inline/secondary size (8/16px padding)
+          * The size of the button. - `default` - Standard size for primary CTAs - `small` - Compact size for inline or secondary contexts
           * @default 'default'
          */
-        "size": 'default' | 'thin';
+        "size": 'default' | 'small';
         /**
           * Button type (when not using href)
           * @default 'button'
          */
         "type": 'button' | 'submit' | 'reset';
         /**
-          * The visual variant of the button. - `primary` - Main CTA with filled background (use sparingly, 1-2 per view) - `secondary` - Supporting action with outlined style - `ghost` - Link-style with themed underline on the label; commonly paired   with a right-pointing icon. Matches Webflow's "button ghost" variant.
+          * The visual variant of the button. - `primary` - Main CTA with filled background (use sparingly, 1-2 per view) - `secondary` - Supporting action with outlined style - `tertiary` - Subtle text-link style with underline
           * @default 'primary'
          */
-        "variant": 'primary' | 'secondary' | 'ghost';
+        "variant": 'primary' | 'secondary' | 'tertiary';
     }
     interface AfButtonGroup {
         /**
@@ -184,9 +184,16 @@ export namespace Components {
     /**
      * Infinite scrolling carousel for client logos.
      * This is a section-level component that spans full width.
-     * Renders one or two scrolling rows; single row matches the Webflow reference,
-     * two rows (scrolling opposite directions) is the denser variant.
-     * For headlines, use a separate TypographyLockup or Heading component above this carousel.
+     * Renders one or two scrolling rows; single row matches the Webflow
+     * reference, two rows (scrolling opposite directions) is the denser
+     * variant.
+     * For headlines, use a separate TypographyLockup or Heading component
+     * above this carousel.
+     * **Seamless loop:** the CSS animation translates the track from 0% to
+     * -50% (or vice versa), which only looks continuous if the track holds
+     * two identical copies of the content end-to-end. Shadow DOM slots can
+     * only project content once, so we clone the slotted nodes in
+     * `componentDidLoad` and append the copies to the track.
      */
     interface AfClientCarousel {
         /**
@@ -613,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="ghost">Learn more</af-button>
+     *   <af-button slot="buttons" variant="tertiary">Learn more</af-button>
      * </af-icon-text>
      * ```
      */
@@ -640,8 +647,7 @@ export namespace Components {
     }
     /**
      * Illustrated Card molecule component that combines a card with an illustration.
-     * Uses a theme background with text at top, a button row in the middle, and
-     * an illustration from
+     * Uses a theme background with text at top and an illustration from
      * @affinda /illustrations at the bottom.
      * Uses af-card atom internally and af-typography-lockup for text hierarchy.
      */
@@ -671,11 +677,6 @@ 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
          */
@@ -698,14 +699,6 @@ 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 {
         /**
@@ -962,6 +955,12 @@ export namespace Components {
     /**
      * A generic navigation item component that can be used in navigation bars, menus, and sidebars.
      * Supports multiple hierarchy levels, variants, and states (active, hover).
+     * **Dropdown trigger a11y:** when the host carries a `data-dropdown="id"`
+     * attribute and has no `href`, the inner wrapper is promoted to
+     * `role="button"` with `tabindex="0"` and keyboard activation (Enter/Space),
+     * so keyboard users can open the matching dropdown panel just like a
+     * pointer click. The companion `af-navbar` keeps `aria-expanded` on the
+     * host in sync with the active dropdown.
      */
     interface AfNavItem {
         /**
@@ -1423,13 +1422,10 @@ 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" variant="inkwell">Machine Learning</af-tag>
-     * <af-tag size="large" variant="white">Document Processing</af-tag>
+     * <af-tag size="small">Machine Learning</af-tag>
+     * <af-tag size="large" variant="light">Document Processing</af-tag>
      * ```
      */
     interface AfTag {
@@ -1438,13 +1434,13 @@ export namespace Components {
          */
         "href"?: string;
         /**
-          * 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
+          * The size of the tag - `x-small` - Compact tag with minimal padding - `small` - Small tag with moderate padding - `large` - Large tag with generous padding
           * @default 'small'
          */
         "size": TagSize;
         /**
-          * Visual variant of the tag. `default` inherits tag colors from the parent theme context. Theme-named variants force a specific palette.
-          * @default 'default'
+          * The visual variant of the tag - `sand` - Soft-clay/tan colored background (default) - `light` - Mist-green/light colored background
+          * @default 'sand'
          */
         "variant": TagVariant;
     }
@@ -1472,9 +1468,9 @@ export namespace Components {
          */
         "logoImage"?: string;
         /**
-          * Testimonial quote text. Falls back to the `quote-body` slot if that slot has content.
+          * Testimonial quote text
          */
-        "quote"?: string;
+        "quote": string;
         /**
           * Link to full case study
          */
@@ -1544,10 +1540,10 @@ export namespace Components {
          */
         "imagePosition": 'left' | 'right';
         /**
-          * Proportion of the image in the layout - '1/3': Image takes 1/3 of the width (text takes 2/3) - '1/4': Image takes 1/4 of the width (text takes 3/4) - '100%': Image takes full width below text
+          * Proportion of the image in the layout - '1/2': Image and text each take half the width (50/50) - '1/3': Image takes 1/3 of the width (text takes 2/3) - '1/4': Image takes 1/4 of the width (text takes 3/4) - '100%': Image takes full width below text
           * @default '1/3'
          */
-        "imageProportion": '1/3' | '1/4' | '100%';
+        "imageProportion": '1/2' | '1/3' | '1/4' | '100%';
         /**
           * Whether to show a second typography lockup section
           * @default false
@@ -1659,6 +1655,24 @@ export namespace Components {
          */
         "theme": 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
     }
+    /**
+     * Marketing-style composition of heading + description + buttons with
+     * consistent spacing and alignment driven by the `headingSize` prop.
+     * **Semantic vs visual:** `headingSize` controls ONLY the visual scale
+     * (the lockup sets font-size via a `heading-{1..5}` class). The semantic
+     * level (h1-h6) is whatever the consumer slots in as default content.
+     * Keep them aligned by convention so assistive tech and search engines
+     * see the right hierarchy:
+     *   headingSize=1 ↔ <h1>   (or <h2> on non-top-of-page sections)
+     *   headingSize=2 ↔ <h2>
+     *   headingSize=3 ↔ <h3>
+     *   headingSize=4 ↔ <h4>
+     *   headingSize=5 ↔ <h5>
+     * When a design asks for a visually small H1 or a visually large H3,
+     * pass the two independently — just do it deliberately, not by
+     * accident. A console warning fires in dev mode if the slotted tag is
+     * more than one level away from the prop.
+     */
     interface AfTypographyLockup {
         /**
           * The breakpoint for responsive typography
@@ -1693,7 +1707,7 @@ export namespace Components {
          */
         "headingColor": 'primary' | 'secondary';
         /**
-          * The heading size (1-5, where 1 is largest)
+          * The heading size (1-5, where 1 is largest). Controls visual scale only — pair with a matching <h1>-<h5> slotted element for correct document outline (see component docblock).
           * @default 2
          */
         "headingSize": 1 | 2 | 3 | 4 | 5;
@@ -1918,9 +1932,16 @@ declare global {
     /**
      * Infinite scrolling carousel for client logos.
      * This is a section-level component that spans full width.
-     * Renders one or two scrolling rows; single row matches the Webflow reference,
-     * two rows (scrolling opposite directions) is the denser variant.
-     * For headlines, use a separate TypographyLockup or Heading component above this carousel.
+     * Renders one or two scrolling rows; single row matches the Webflow
+     * reference, two rows (scrolling opposite directions) is the denser
+     * variant.
+     * For headlines, use a separate TypographyLockup or Heading component
+     * above this carousel.
+     * **Seamless loop:** the CSS animation translates the track from 0% to
+     * -50% (or vice versa), which only looks continuous if the track holds
+     * two identical copies of the content end-to-end. Shadow DOM slots can
+     * only project content once, so we clone the slotted nodes in
+     * `componentDidLoad` and append the copies to the track.
      */
     interface HTMLAfClientCarouselElement extends Components.AfClientCarousel, HTMLStencilElement {
     }
@@ -2146,7 +2167,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="ghost">Learn more</af-button>
+     *   <af-button slot="buttons" variant="tertiary">Learn more</af-button>
      * </af-icon-text>
      * ```
      */
@@ -2158,8 +2179,7 @@ declare global {
     };
     /**
      * Illustrated Card molecule component that combines a card with an illustration.
-     * Uses a theme background with text at top, a button row in the middle, and
-     * an illustration from
+     * Uses a theme background with text at top and an illustration from
      * @affinda /illustrations at the bottom.
      * Uses af-card atom internally and af-typography-lockup for text hierarchy.
      */
@@ -2196,14 +2216,6 @@ 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 {
     }
@@ -2325,6 +2337,12 @@ declare global {
     /**
      * A generic navigation item component that can be used in navigation bars, menus, and sidebars.
      * Supports multiple hierarchy levels, variants, and states (active, hover).
+     * **Dropdown trigger a11y:** when the host carries a `data-dropdown="id"`
+     * attribute and has no `href`, the inner wrapper is promoted to
+     * `role="button"` with `tabindex="0"` and keyboard activation (Enter/Space),
+     * so keyboard users can open the matching dropdown panel just like a
+     * pointer click. The companion `af-navbar` keeps `aria-expanded` on the
+     * host in sync with the active dropdown.
      */
     interface HTMLAfNavItemElement extends Components.AfNavItem, HTMLStencilElement {
     }
@@ -2607,13 +2625,10 @@ 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" variant="inkwell">Machine Learning</af-tag>
-     * <af-tag size="large" variant="white">Document Processing</af-tag>
+     * <af-tag size="small">Machine Learning</af-tag>
+     * <af-tag size="large" variant="light">Document Processing</af-tag>
      * ```
      */
     interface HTMLAfTagElement extends Components.AfTag, HTMLStencilElement {
@@ -2732,6 +2747,24 @@ declare global {
         prototype: HTMLAfThemeOverrideElement;
         new (): HTMLAfThemeOverrideElement;
     };
+    /**
+     * Marketing-style composition of heading + description + buttons with
+     * consistent spacing and alignment driven by the `headingSize` prop.
+     * **Semantic vs visual:** `headingSize` controls ONLY the visual scale
+     * (the lockup sets font-size via a `heading-{1..5}` class). The semantic
+     * level (h1-h6) is whatever the consumer slots in as default content.
+     * Keep them aligned by convention so assistive tech and search engines
+     * see the right hierarchy:
+     *   headingSize=1 ↔ <h1>   (or <h2> on non-top-of-page sections)
+     *   headingSize=2 ↔ <h2>
+     *   headingSize=3 ↔ <h3>
+     *   headingSize=4 ↔ <h4>
+     *   headingSize=5 ↔ <h5>
+     * When a design asks for a visually small H1 or a visually large H3,
+     * pass the two independently — just do it deliberately, not by
+     * accident. A console warning fires in dev mode if the slotted tag is
+     * more than one level away from the prop.
+     */
     interface HTMLAfTypographyLockupElement extends Components.AfTypographyLockup, HTMLStencilElement {
     }
     var HTMLAfTypographyLockupElement: {
@@ -2931,20 +2964,20 @@ declare namespace LocalJSX {
          */
         "href"?: string;
         /**
-          * The size of the button. - `default` - Standard size for primary CTAs (12/24px padding) - `thin` - Compact inline/secondary size (8/16px padding)
+          * The size of the button. - `default` - Standard size for primary CTAs - `small` - Compact size for inline or secondary contexts
           * @default 'default'
          */
-        "size"?: 'default' | 'thin';
+        "size"?: 'default' | 'small';
         /**
           * Button type (when not using href)
           * @default 'button'
          */
         "type"?: 'button' | 'submit' | 'reset';
         /**
-          * The visual variant of the button. - `primary` - Main CTA with filled background (use sparingly, 1-2 per view) - `secondary` - Supporting action with outlined style - `ghost` - Link-style with themed underline on the label; commonly paired   with a right-pointing icon. Matches Webflow's "button ghost" variant.
+          * The visual variant of the button. - `primary` - Main CTA with filled background (use sparingly, 1-2 per view) - `secondary` - Supporting action with outlined style - `tertiary` - Subtle text-link style with underline
           * @default 'primary'
          */
-        "variant"?: 'primary' | 'secondary' | 'ghost';
+        "variant"?: 'primary' | 'secondary' | 'tertiary';
     }
     interface AfButtonGroup {
         /**
@@ -3032,9 +3065,16 @@ declare namespace LocalJSX {
     /**
      * Infinite scrolling carousel for client logos.
      * This is a section-level component that spans full width.
-     * Renders one or two scrolling rows; single row matches the Webflow reference,
-     * two rows (scrolling opposite directions) is the denser variant.
-     * For headlines, use a separate TypographyLockup or Heading component above this carousel.
+     * Renders one or two scrolling rows; single row matches the Webflow
+     * reference, two rows (scrolling opposite directions) is the denser
+     * variant.
+     * For headlines, use a separate TypographyLockup or Heading component
+     * above this carousel.
+     * **Seamless loop:** the CSS animation translates the track from 0% to
+     * -50% (or vice versa), which only looks continuous if the track holds
+     * two identical copies of the content end-to-end. Shadow DOM slots can
+     * only project content once, so we clone the slotted nodes in
+     * `componentDidLoad` and append the copies to the track.
      */
     interface AfClientCarousel {
         /**
@@ -3461,7 +3501,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="ghost">Learn more</af-button>
+     *   <af-button slot="buttons" variant="tertiary">Learn more</af-button>
      * </af-icon-text>
      * ```
      */
@@ -3488,8 +3528,7 @@ declare namespace LocalJSX {
     }
     /**
      * Illustrated Card molecule component that combines a card with an illustration.
-     * Uses a theme background with text at top, a button row in the middle, and
-     * an illustration from
+     * Uses a theme background with text at top and an illustration from
      * @affinda /illustrations at the bottom.
      * Uses af-card atom internally and af-typography-lockup for text hierarchy.
      */
@@ -3519,11 +3558,6 @@ 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
          */
@@ -3546,14 +3580,6 @@ 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 {
         /**
@@ -3834,6 +3860,12 @@ declare namespace LocalJSX {
     /**
      * A generic navigation item component that can be used in navigation bars, menus, and sidebars.
      * Supports multiple hierarchy levels, variants, and states (active, hover).
+     * **Dropdown trigger a11y:** when the host carries a `data-dropdown="id"`
+     * attribute and has no `href`, the inner wrapper is promoted to
+     * `role="button"` with `tabindex="0"` and keyboard activation (Enter/Space),
+     * so keyboard users can open the matching dropdown panel just like a
+     * pointer click. The companion `af-navbar` keeps `aria-expanded` on the
+     * host in sync with the active dropdown.
      */
     interface AfNavItem {
         /**
@@ -4307,13 +4339,10 @@ 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" variant="inkwell">Machine Learning</af-tag>
-     * <af-tag size="large" variant="white">Document Processing</af-tag>
+     * <af-tag size="small">Machine Learning</af-tag>
+     * <af-tag size="large" variant="light">Document Processing</af-tag>
      * ```
      */
     interface AfTag {
@@ -4322,13 +4351,13 @@ declare namespace LocalJSX {
          */
         "href"?: string;
         /**
-          * 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
+          * The size of the tag - `x-small` - Compact tag with minimal padding - `small` - Small tag with moderate padding - `large` - Large tag with generous padding
           * @default 'small'
          */
         "size"?: TagSize;
         /**
-          * Visual variant of the tag. `default` inherits tag colors from the parent theme context. Theme-named variants force a specific palette.
-          * @default 'default'
+          * The visual variant of the tag - `sand` - Soft-clay/tan colored background (default) - `light` - Mist-green/light colored background
+          * @default 'sand'
          */
         "variant"?: TagVariant;
     }
@@ -4364,9 +4393,9 @@ declare namespace LocalJSX {
          */
         "onNavPrev"?: (event: AfTestimonialCustomEvent<void>) => void;
         /**
-          * Testimonial quote text. Falls back to the `quote-body` slot if that slot has content.
+          * Testimonial quote text
          */
-        "quote"?: string;
+        "quote": string;
         /**
           * Link to full case study
          */
@@ -4436,10 +4465,10 @@ declare namespace LocalJSX {
          */
         "imagePosition"?: 'left' | 'right';
         /**
-          * Proportion of the image in the layout - '1/3': Image takes 1/3 of the width (text takes 2/3) - '1/4': Image takes 1/4 of the width (text takes 3/4) - '100%': Image takes full width below text
+          * Proportion of the image in the layout - '1/2': Image and text each take half the width (50/50) - '1/3': Image takes 1/3 of the width (text takes 2/3) - '1/4': Image takes 1/4 of the width (text takes 3/4) - '100%': Image takes full width below text
           * @default '1/3'
          */
-        "imageProportion"?: '1/3' | '1/4' | '100%';
+        "imageProportion"?: '1/2' | '1/3' | '1/4' | '100%';
         /**
           * Whether to show a second typography lockup section
           * @default false
@@ -4567,6 +4596,24 @@ declare namespace LocalJSX {
          */
         "theme"?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
     }
+    /**
+     * Marketing-style composition of heading + description + buttons with
+     * consistent spacing and alignment driven by the `headingSize` prop.
+     * **Semantic vs visual:** `headingSize` controls ONLY the visual scale
+     * (the lockup sets font-size via a `heading-{1..5}` class). The semantic
+     * level (h1-h6) is whatever the consumer slots in as default content.
+     * Keep them aligned by convention so assistive tech and search engines
+     * see the right hierarchy:
+     *   headingSize=1 ↔ <h1>   (or <h2> on non-top-of-page sections)
+     *   headingSize=2 ↔ <h2>
+     *   headingSize=3 ↔ <h3>
+     *   headingSize=4 ↔ <h4>
+     *   headingSize=5 ↔ <h5>
+     * When a design asks for a visually small H1 or a visually large H3,
+     * pass the two independently — just do it deliberately, not by
+     * accident. A console warning fires in dev mode if the slotted tag is
+     * more than one level away from the prop.
+     */
     interface AfTypographyLockup {
         /**
           * The breakpoint for responsive typography
@@ -4601,7 +4648,7 @@ declare namespace LocalJSX {
          */
         "headingColor"?: 'primary' | 'secondary';
         /**
-          * The heading size (1-5, where 1 is largest)
+          * The heading size (1-5, where 1 is largest). Controls visual scale only — pair with a matching <h1>-<h5> slotted element for correct document outline (see component docblock).
           * @default 2
          */
         "headingSize"?: 1 | 2 | 3 | 4 | 5;
@@ -4680,8 +4727,8 @@ declare namespace LocalJSX {
         "ratio": string;
     }
     interface AfButtonAttributes {
-        "variant": 'primary' | 'secondary' | 'ghost';
-        "size": 'default' | 'thin';
+        "variant": 'primary' | 'secondary' | 'tertiary';
+        "size": 'default' | 'small';
         "disabled": boolean;
         "type": 'button' | 'submit' | 'reset';
         "href": string;
@@ -4813,7 +4860,6 @@ declare namespace LocalJSX {
     interface AfImageAttributes {
         "src": string;
         "alt": string;
-        "shape": 'rounded' | 'rounded-left' | 'rounded-right' | 'square';
     }
     interface AfInPageBannerAttributes {
         "theme": BannerTheme;
@@ -4992,7 +5038,7 @@ declare namespace LocalJSX {
     }
     interface AfTextImageAttributes {
         "imagePosition": 'left' | 'right';
-        "imageProportion": '1/3' | '1/4' | '100%';
+        "imageProportion": '1/2' | '1/3' | '1/4' | '100%';
         "src": string;
         "alt": string;
         "showSecondLockup": boolean;
@@ -5097,7 +5143,7 @@ declare namespace LocalJSX {
         "af-tab": Omit<AfTab, keyof AfTabAttributes> & { [K in keyof AfTab & keyof AfTabAttributes]?: AfTab[K] } & { [K in keyof AfTab & keyof AfTabAttributes as `attr:${K}`]?: AfTabAttributes[K] } & { [K in keyof AfTab & keyof AfTabAttributes as `prop:${K}`]?: AfTab[K] };
         "af-tab-bar": Omit<AfTabBar, keyof AfTabBarAttributes> & { [K in keyof AfTabBar & keyof AfTabBarAttributes]?: AfTabBar[K] } & { [K in keyof AfTabBar & keyof AfTabBarAttributes as `attr:${K}`]?: AfTabBarAttributes[K] } & { [K in keyof AfTabBar & keyof AfTabBarAttributes as `prop:${K}`]?: AfTabBar[K] };
         "af-tag": Omit<AfTag, keyof AfTagAttributes> & { [K in keyof AfTag & keyof AfTagAttributes]?: AfTag[K] } & { [K in keyof AfTag & keyof AfTagAttributes as `attr:${K}`]?: AfTagAttributes[K] } & { [K in keyof AfTag & keyof AfTagAttributes as `prop:${K}`]?: AfTag[K] };
-        "af-testimonial": Omit<AfTestimonial, keyof AfTestimonialAttributes> & { [K in keyof AfTestimonial & keyof AfTestimonialAttributes]?: AfTestimonial[K] } & { [K in keyof AfTestimonial & keyof AfTestimonialAttributes as `attr:${K}`]?: AfTestimonialAttributes[K] } & { [K in keyof AfTestimonial & keyof AfTestimonialAttributes as `prop:${K}`]?: AfTestimonial[K] } & OneOf<"attribution", AfTestimonial["attribution"], AfTestimonialAttributes["attribution"]>;
+        "af-testimonial": 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-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] };
@@ -5156,9 +5202,16 @@ declare module "@stencil/core" {
             /**
              * Infinite scrolling carousel for client logos.
              * This is a section-level component that spans full width.
-             * Renders one or two scrolling rows; single row matches the Webflow reference,
-             * two rows (scrolling opposite directions) is the denser variant.
-             * For headlines, use a separate TypographyLockup or Heading component above this carousel.
+             * Renders one or two scrolling rows; single row matches the Webflow
+             * reference, two rows (scrolling opposite directions) is the denser
+             * variant.
+             * For headlines, use a separate TypographyLockup or Heading component
+             * above this carousel.
+             * **Seamless loop:** the CSS animation translates the track from 0% to
+             * -50% (or vice versa), which only looks continuous if the track holds
+             * two identical copies of the content end-to-end. Shadow DOM slots can
+             * 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>;
@@ -5294,15 +5347,14 @@ 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="ghost">Learn more</af-button>
+             *   <af-button slot="buttons" variant="tertiary">Learn more</af-button>
              * </af-icon-text>
              * ```
              */
             "af-icon-text": LocalJSX.IntrinsicElements["af-icon-text"] & JSXBase.HTMLAttributes<HTMLAfIconTextElement>;
             /**
              * Illustrated Card molecule component that combines a card with an illustration.
-             * Uses a theme background with text at top, a button row in the middle, and
-             * an illustration from
+             * Uses a theme background with text at top and an illustration from
              * @affinda /illustrations at the bottom.
              * Uses af-card atom internally and af-typography-lockup for text hierarchy.
              */
@@ -5329,14 +5381,6 @@ 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>;
             /**
@@ -5381,6 +5425,12 @@ declare module "@stencil/core" {
             /**
              * A generic navigation item component that can be used in navigation bars, menus, and sidebars.
              * Supports multiple hierarchy levels, variants, and states (active, hover).
+             * **Dropdown trigger a11y:** when the host carries a `data-dropdown="id"`
+             * attribute and has no `href`, the inner wrapper is promoted to
+             * `role="button"` with `tabindex="0"` and keyboard activation (Enter/Space),
+             * so keyboard users can open the matching dropdown panel just like a
+             * 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>;
             /**
@@ -5540,13 +5590,10 @@ declare module "@stencil/core" {
             /**
              * 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" variant="inkwell">Machine Learning</af-tag>
-             * <af-tag size="large" variant="white">Document Processing</af-tag>
+             * <af-tag size="small">Machine Learning</af-tag>
+             * <af-tag size="large" variant="light">Document Processing</af-tag>
              * ```
              */
             "af-tag": LocalJSX.IntrinsicElements["af-tag"] & JSXBase.HTMLAttributes<HTMLAfTagElement>;
@@ -5594,6 +5641,24 @@ declare module "@stencil/core" {
              * it only sets the CSS custom properties that child components consume.
              */
             "af-theme-override": LocalJSX.IntrinsicElements["af-theme-override"] & JSXBase.HTMLAttributes<HTMLAfThemeOverrideElement>;
+            /**
+             * Marketing-style composition of heading + description + buttons with
+             * consistent spacing and alignment driven by the `headingSize` prop.
+             * **Semantic vs visual:** `headingSize` controls ONLY the visual scale
+             * (the lockup sets font-size via a `heading-{1..5}` class). The semantic
+             * level (h1-h6) is whatever the consumer slots in as default content.
+             * Keep them aligned by convention so assistive tech and search engines
+             * see the right hierarchy:
+             *   headingSize=1 ↔ <h1>   (or <h2> on non-top-of-page sections)
+             *   headingSize=2 ↔ <h2>
+             *   headingSize=3 ↔ <h3>
+             *   headingSize=4 ↔ <h4>
+             *   headingSize=5 ↔ <h5>
+             * When a design asks for a visually small H1 or a visually large H3,
+             * pass the two independently — just do it deliberately, not by
+             * accident. A console warning fires in dev mode if the slotted tag is
+             * more than one level away from the prop.
+             */
             "af-typography-lockup": LocalJSX.IntrinsicElements["af-typography-lockup"] & JSXBase.HTMLAttributes<HTMLAfTypographyLockupElement>;
             /**
              * Video Container molecule component for showcasing video content.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@affinda/wc",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "private": false,
   "type": "module",
   "main": "dist/index.cjs.js",