@affinda/wc 0.0.19 → 0.0.21

package/dist/types/components.d.ts

@@ -87,20 +87,20 @@ export namespace Components {
          */
         "href"?: string;
         /**
-          * The size of the button. - `default` - Standard size for primary CTAs - `small` - Compact size for inline or secondary contexts
+          * The size of the button. - `default` - Standard size for primary CTAs (12/24px padding) - `thin` - Compact inline/secondary size (8/16px padding)
           * @default 'default'
          */
-        "size": 'default' | 'small';
+        "size": 'default' | 'thin';
         /**
           * Button type (when not using href)
           * @default 'button'
          */
         "type": 'button' | 'submit' | 'reset';
         /**
-          * The visual variant of the button. - `primary` - Main CTA with filled background (use sparingly, 1-2 per view) - `secondary` - Supporting action with outlined style - `tertiary` - Subtle text-link style with underline
+          * The visual variant of the button. - `primary` - Main CTA with filled background (use sparingly, 1-2 per view) - `secondary` - Supporting action with outlined style - `ghost` - Link-style with themed underline on the label; commonly paired   with a right-pointing icon. Matches Webflow's "button ghost" variant.
           * @default 'primary'
          */
-        "variant": 'primary' | 'secondary' | 'tertiary';
+        "variant": 'primary' | 'secondary' | 'ghost';
     }
     interface AfButtonGroup {
         /**
@@ -184,10 +184,16 @@ export namespace Components {
     /**
      * Infinite scrolling carousel for client logos.
      * This is a section-level component that spans full width.
-     * It supports theming via the `theme` prop.
+     * Renders one or two scrolling rows; single row matches the Webflow reference,
+     * two rows (scrolling opposite directions) is the denser variant.
      * For headlines, use a separate TypographyLockup or Heading component above this carousel.
      */
     interface AfClientCarousel {
+        /**
+          * Number of scrolling rows. - `1` (default) — single row scrolling left, matches the Webflow reference. - `2` — two rows scrolling in opposite directions.  When `rows="2"`, slot `row-1` and `row-2` independently. When `rows="1"`, slot the default slot (unnamed) or `row-1`.
+          * @default 1
+         */
+        "rows": 1 | 2;
         /**
           * Theme - sets background color and provides theme context to children
           * @default 'inkwell'
@@ -607,7 +613,7 @@ export namespace Components {
      * <af-icon-text icon="settings" heading-size="4">
      *   Feature Heading
      *   <span slot="description">Feature description text.</span>
-     *   <af-button slot="buttons" variant="tertiary">Learn more</af-button>
+     *   <af-button slot="buttons" variant="ghost">Learn more</af-button>
      * </af-icon-text>
      * ```
      */
@@ -634,7 +640,8 @@ export namespace Components {
     }
     /**
      * Illustrated Card molecule component that combines a card with an illustration.
-     * Uses a theme background with text at top and an illustration from
+     * Uses a theme background with text at top, a button row in the middle, and
+     * an illustration from
      * @affinda /illustrations at the bottom.
      * Uses af-card atom internally and af-typography-lockup for text hierarchy.
      */
@@ -664,6 +671,11 @@ export namespace Components {
           * Alternative text for the image (required for accessibility)
          */
         "alt": string;
+        /**
+          * Shape / corner rounding variant. Matches Webflow's `.image-fill.rounded-*` patterns where only one edge is rounded so the image bleeds into a neighbouring section. - `rounded` (default) — symmetric rounded corners on all four sides. - `rounded-left` — rounded only on the left edge (top-left + bottom-left). - `rounded-right` — rounded only on the right edge. - `square` — no corner rounding.
+          * @default 'rounded'
+         */
+        "shape": 'rounded' | 'rounded-left' | 'rounded-right' | 'square';
         /**
           * The image source URL
          */
@@ -686,6 +698,14 @@ export namespace Components {
      * />
      * ```
      * Alternatively, use the `illustration` slot for completely custom content.
+     * **Slot-based composition (preferred for rich content):**
+     * - `heading` — heading markup (overrides the `heading` prop when provided).
+     * - `description` — description markup (overrides the `description` prop).
+     * - `buttons` — custom button group (overrides the primary/secondary button
+     *   props; use when you need ghost variants, more than two buttons, or
+     *   per-button icons).
+     * - `illustration` — custom illustration markup.
+     * The string props remain supported for simple cases.
      */
     interface AfInPageBanner {
         /**
@@ -1268,6 +1288,43 @@ export namespace Components {
          */
         "wrap": boolean;
     }
+    /**
+     * Stepper composite for "Sign up / Upload / See results"-style marketing
+     * flows. Renders children `af-stepper-step` elements in a horizontal row
+     * (desktop) or vertical stack (mobile), with a connector line between badges.
+     * Matches Webflow's `.stepper` pattern — numbered circled badges, a spine
+     * connector, and centered step text.
+     * @example ```html
+     * <af-stepper>
+     *   <af-stepper-step>
+     *     <h3 slot="heading">Sign up for free</h3>
+     *     <p slot="body">No sales calls, no credit cards.</p>
+     *   </af-stepper-step>
+     *   <af-stepper-step>...</af-stepper-step>
+     *   <af-stepper-step>...</af-stepper-step>
+     * </af-stepper>
+     * ```
+     */
+    interface AfStepper {
+        /**
+          * Layout orientation. Horizontal on desktop, auto-stacks on mobile.
+          * @default 'horizontal'
+         */
+        "orientation": 'horizontal' | 'vertical';
+    }
+    /**
+     * A single step within an af-stepper. Renders a numbered circular badge
+     * followed by slotted heading + body content.
+     * The parent af-stepper auto-assigns the `index` attribute based on DOM
+     * order, so consumers don't need to hand-number the steps.
+     */
+    interface AfStepperStep {
+        /**
+          * Step number shown in the badge. Auto-assigned by the parent stepper if not explicitly set.
+          * @default 1
+         */
+        "index": number;
+    }
     /**
      * Switch component for toggling between on and off states.
      */
@@ -1366,10 +1423,13 @@ export namespace Components {
     /**
      * Tag displays a label in a styled container.
      * Perfect for categorization, topics, or metadata display.
+     * The `default` variant inherits its colors from the parent theme context
+     * (af-section, af-card). Use explicit variants (`inkwell`, `white`,
+     * `soft-clay`, `mist-green`) to override.
      * @example ```html
      * <af-tag>AI</af-tag>
-     * <af-tag size="small">Machine Learning</af-tag>
-     * <af-tag size="large" variant="light">Document Processing</af-tag>
+     * <af-tag size="small" variant="inkwell">Machine Learning</af-tag>
+     * <af-tag size="large" variant="white">Document Processing</af-tag>
      * ```
      */
     interface AfTag {
@@ -1378,13 +1438,13 @@ export namespace Components {
          */
         "href"?: string;
         /**
-          * The size of the tag - `x-small` - Compact tag with minimal padding - `small` - Small tag with moderate padding - `large` - Large tag with generous padding
+          * The size of the tag - `x-small` - Compact tag with minimal padding - `small` - Small tag with moderate padding (default) - `large` - Large tag with generous padding
           * @default 'small'
          */
         "size": TagSize;
         /**
-          * The visual variant of the tag - `sand` - Soft-clay/tan colored background (default) - `light` - Mist-green/light colored background
-          * @default 'sand'
+          * Visual variant of the tag. `default` inherits tag colors from the parent theme context. Theme-named variants force a specific palette.
+          * @default 'default'
          */
         "variant": TagVariant;
     }
@@ -1412,9 +1472,9 @@ export namespace Components {
          */
         "logoImage"?: string;
         /**
-          * Testimonial quote text
+          * Testimonial quote text. Falls back to the `quote-body` slot if that slot has content.
          */
-        "quote": string;
+        "quote"?: string;
         /**
           * Link to full case study
          */
@@ -1618,10 +1678,20 @@ export namespace Components {
           * Description text alignment. Falls back to textAlignment if not specified.
          */
         "descriptionAlignment"?: TextAlign;
+        /**
+          * Description colour variant. Same pattern as `headingColor`; useful for hero-style lockups where the description is rendered in the accent colour. - `default` (default) - uses `--af-typography-body-default` - `secondary` - uses `--af-typography-heading-secondary`
+          * @default 'default'
+         */
+        "descriptionColor": 'default' | 'secondary';
         /**
           * Heading text alignment. Falls back to textAlignment if not specified.
          */
         "headingAlignment"?: TextAlign;
+        /**
+          * Heading colour variant. Matches the Webflow pattern of `h1.primary` vs `h1.secondary`, where "secondary" renders in the theme's accent/heading- secondary colour (soft-clay on most themes). - `primary` (default) - uses `--af-typography-heading-primary` - `secondary` - uses `--af-typography-heading-secondary`
+          * @default 'primary'
+         */
+        "headingColor": 'primary' | 'secondary';
         /**
           * The heading size (1-5, where 1 is largest)
           * @default 2
@@ -1848,7 +1918,8 @@ declare global {
     /**
      * Infinite scrolling carousel for client logos.
      * This is a section-level component that spans full width.
-     * It supports theming via the `theme` prop.
+     * Renders one or two scrolling rows; single row matches the Webflow reference,
+     * two rows (scrolling opposite directions) is the denser variant.
      * For headlines, use a separate TypographyLockup or Heading component above this carousel.
      */
     interface HTMLAfClientCarouselElement extends Components.AfClientCarousel, HTMLStencilElement {
@@ -2075,7 +2146,7 @@ declare global {
      * <af-icon-text icon="settings" heading-size="4">
      *   Feature Heading
      *   <span slot="description">Feature description text.</span>
-     *   <af-button slot="buttons" variant="tertiary">Learn more</af-button>
+     *   <af-button slot="buttons" variant="ghost">Learn more</af-button>
      * </af-icon-text>
      * ```
      */
@@ -2087,7 +2158,8 @@ declare global {
     };
     /**
      * Illustrated Card molecule component that combines a card with an illustration.
-     * Uses a theme background with text at top and an illustration from
+     * Uses a theme background with text at top, a button row in the middle, and
+     * an illustration from
      * @affinda /illustrations at the bottom.
      * Uses af-card atom internally and af-typography-lockup for text hierarchy.
      */
@@ -2124,6 +2196,14 @@ declare global {
      * />
      * ```
      * Alternatively, use the `illustration` slot for completely custom content.
+     * **Slot-based composition (preferred for rich content):**
+     * - `heading` — heading markup (overrides the `heading` prop when provided).
+     * - `description` — description markup (overrides the `description` prop).
+     * - `buttons` — custom button group (overrides the primary/secondary button
+     *   props; use when you need ghost variants, more than two buttons, or
+     *   per-button icons).
+     * - `illustration` — custom illustration markup.
+     * The string props remain supported for simple cases.
      */
     interface HTMLAfInPageBannerElement extends Components.AfInPageBanner, HTMLStencilElement {
     }
@@ -2422,6 +2502,41 @@ declare global {
         prototype: HTMLAfStackElement;
         new (): HTMLAfStackElement;
     };
+    /**
+     * Stepper composite for "Sign up / Upload / See results"-style marketing
+     * flows. Renders children `af-stepper-step` elements in a horizontal row
+     * (desktop) or vertical stack (mobile), with a connector line between badges.
+     * Matches Webflow's `.stepper` pattern — numbered circled badges, a spine
+     * connector, and centered step text.
+     * @example ```html
+     * <af-stepper>
+     *   <af-stepper-step>
+     *     <h3 slot="heading">Sign up for free</h3>
+     *     <p slot="body">No sales calls, no credit cards.</p>
+     *   </af-stepper-step>
+     *   <af-stepper-step>...</af-stepper-step>
+     *   <af-stepper-step>...</af-stepper-step>
+     * </af-stepper>
+     * ```
+     */
+    interface HTMLAfStepperElement extends Components.AfStepper, HTMLStencilElement {
+    }
+    var HTMLAfStepperElement: {
+        prototype: HTMLAfStepperElement;
+        new (): HTMLAfStepperElement;
+    };
+    /**
+     * A single step within an af-stepper. Renders a numbered circular badge
+     * followed by slotted heading + body content.
+     * The parent af-stepper auto-assigns the `index` attribute based on DOM
+     * order, so consumers don't need to hand-number the steps.
+     */
+    interface HTMLAfStepperStepElement extends Components.AfStepperStep, HTMLStencilElement {
+    }
+    var HTMLAfStepperStepElement: {
+        prototype: HTMLAfStepperStepElement;
+        new (): HTMLAfStepperStepElement;
+    };
     interface HTMLAfSwitchElementEventMap {
         "afChange": { active: boolean };
     }
@@ -2492,10 +2607,13 @@ declare global {
     /**
      * Tag displays a label in a styled container.
      * Perfect for categorization, topics, or metadata display.
+     * The `default` variant inherits its colors from the parent theme context
+     * (af-section, af-card). Use explicit variants (`inkwell`, `white`,
+     * `soft-clay`, `mist-green`) to override.
      * @example ```html
      * <af-tag>AI</af-tag>
-     * <af-tag size="small">Machine Learning</af-tag>
-     * <af-tag size="large" variant="light">Document Processing</af-tag>
+     * <af-tag size="small" variant="inkwell">Machine Learning</af-tag>
+     * <af-tag size="large" variant="white">Document Processing</af-tag>
      * ```
      */
     interface HTMLAfTagElement extends Components.AfTag, HTMLStencilElement {
@@ -2716,6 +2834,8 @@ declare global {
         "af-spacer": HTMLAfSpacerElement;
         "af-split-section": HTMLAfSplitSectionElement;
         "af-stack": HTMLAfStackElement;
+        "af-stepper": HTMLAfStepperElement;
+        "af-stepper-step": HTMLAfStepperStepElement;
         "af-switch": HTMLAfSwitchElement;
         "af-tab": HTMLAfTabElement;
         "af-tab-bar": HTMLAfTabBarElement;
@@ -2809,20 +2929,20 @@ declare namespace LocalJSX {
          */
         "href"?: string;
         /**
-          * The size of the button. - `default` - Standard size for primary CTAs - `small` - Compact size for inline or secondary contexts
+          * The size of the button. - `default` - Standard size for primary CTAs (12/24px padding) - `thin` - Compact inline/secondary size (8/16px padding)
           * @default 'default'
          */
-        "size"?: 'default' | 'small';
+        "size"?: 'default' | 'thin';
         /**
           * Button type (when not using href)
           * @default 'button'
          */
         "type"?: 'button' | 'submit' | 'reset';
         /**
-          * The visual variant of the button. - `primary` - Main CTA with filled background (use sparingly, 1-2 per view) - `secondary` - Supporting action with outlined style - `tertiary` - Subtle text-link style with underline
+          * The visual variant of the button. - `primary` - Main CTA with filled background (use sparingly, 1-2 per view) - `secondary` - Supporting action with outlined style - `ghost` - Link-style with themed underline on the label; commonly paired   with a right-pointing icon. Matches Webflow's "button ghost" variant.
           * @default 'primary'
          */
-        "variant"?: 'primary' | 'secondary' | 'tertiary';
+        "variant"?: 'primary' | 'secondary' | 'ghost';
     }
     interface AfButtonGroup {
         /**
@@ -2910,10 +3030,16 @@ declare namespace LocalJSX {
     /**
      * Infinite scrolling carousel for client logos.
      * This is a section-level component that spans full width.
-     * It supports theming via the `theme` prop.
+     * Renders one or two scrolling rows; single row matches the Webflow reference,
+     * two rows (scrolling opposite directions) is the denser variant.
      * For headlines, use a separate TypographyLockup or Heading component above this carousel.
      */
     interface AfClientCarousel {
+        /**
+          * Number of scrolling rows. - `1` (default) — single row scrolling left, matches the Webflow reference. - `2` — two rows scrolling in opposite directions.  When `rows="2"`, slot `row-1` and `row-2` independently. When `rows="1"`, slot the default slot (unnamed) or `row-1`.
+          * @default 1
+         */
+        "rows"?: 1 | 2;
         /**
           * Theme - sets background color and provides theme context to children
           * @default 'inkwell'
@@ -3333,7 +3459,7 @@ declare namespace LocalJSX {
      * <af-icon-text icon="settings" heading-size="4">
      *   Feature Heading
      *   <span slot="description">Feature description text.</span>
-     *   <af-button slot="buttons" variant="tertiary">Learn more</af-button>
+     *   <af-button slot="buttons" variant="ghost">Learn more</af-button>
      * </af-icon-text>
      * ```
      */
@@ -3360,7 +3486,8 @@ declare namespace LocalJSX {
     }
     /**
      * Illustrated Card molecule component that combines a card with an illustration.
-     * Uses a theme background with text at top and an illustration from
+     * Uses a theme background with text at top, a button row in the middle, and
+     * an illustration from
      * @affinda /illustrations at the bottom.
      * Uses af-card atom internally and af-typography-lockup for text hierarchy.
      */
@@ -3390,6 +3517,11 @@ declare namespace LocalJSX {
           * Alternative text for the image (required for accessibility)
          */
         "alt": string;
+        /**
+          * Shape / corner rounding variant. Matches Webflow's `.image-fill.rounded-*` patterns where only one edge is rounded so the image bleeds into a neighbouring section. - `rounded` (default) — symmetric rounded corners on all four sides. - `rounded-left` — rounded only on the left edge (top-left + bottom-left). - `rounded-right` — rounded only on the right edge. - `square` — no corner rounding.
+          * @default 'rounded'
+         */
+        "shape"?: 'rounded' | 'rounded-left' | 'rounded-right' | 'square';
         /**
           * The image source URL
          */
@@ -3412,6 +3544,14 @@ declare namespace LocalJSX {
      * />
      * ```
      * Alternatively, use the `illustration` slot for completely custom content.
+     * **Slot-based composition (preferred for rich content):**
+     * - `heading` — heading markup (overrides the `heading` prop when provided).
+     * - `description` — description markup (overrides the `description` prop).
+     * - `buttons` — custom button group (overrides the primary/secondary button
+     *   props; use when you need ghost variants, more than two buttons, or
+     *   per-button icons).
+     * - `illustration` — custom illustration markup.
+     * The string props remain supported for simple cases.
      */
     interface AfInPageBanner {
         /**
@@ -4022,6 +4162,43 @@ declare namespace LocalJSX {
          */
         "wrap"?: boolean;
     }
+    /**
+     * Stepper composite for "Sign up / Upload / See results"-style marketing
+     * flows. Renders children `af-stepper-step` elements in a horizontal row
+     * (desktop) or vertical stack (mobile), with a connector line between badges.
+     * Matches Webflow's `.stepper` pattern — numbered circled badges, a spine
+     * connector, and centered step text.
+     * @example ```html
+     * <af-stepper>
+     *   <af-stepper-step>
+     *     <h3 slot="heading">Sign up for free</h3>
+     *     <p slot="body">No sales calls, no credit cards.</p>
+     *   </af-stepper-step>
+     *   <af-stepper-step>...</af-stepper-step>
+     *   <af-stepper-step>...</af-stepper-step>
+     * </af-stepper>
+     * ```
+     */
+    interface AfStepper {
+        /**
+          * Layout orientation. Horizontal on desktop, auto-stacks on mobile.
+          * @default 'horizontal'
+         */
+        "orientation"?: 'horizontal' | 'vertical';
+    }
+    /**
+     * A single step within an af-stepper. Renders a numbered circular badge
+     * followed by slotted heading + body content.
+     * The parent af-stepper auto-assigns the `index` attribute based on DOM
+     * order, so consumers don't need to hand-number the steps.
+     */
+    interface AfStepperStep {
+        /**
+          * Step number shown in the badge. Auto-assigned by the parent stepper if not explicitly set.
+          * @default 1
+         */
+        "index"?: number;
+    }
     /**
      * Switch component for toggling between on and off states.
      */
@@ -4128,10 +4305,13 @@ declare namespace LocalJSX {
     /**
      * Tag displays a label in a styled container.
      * Perfect for categorization, topics, or metadata display.
+     * The `default` variant inherits its colors from the parent theme context
+     * (af-section, af-card). Use explicit variants (`inkwell`, `white`,
+     * `soft-clay`, `mist-green`) to override.
      * @example ```html
      * <af-tag>AI</af-tag>
-     * <af-tag size="small">Machine Learning</af-tag>
-     * <af-tag size="large" variant="light">Document Processing</af-tag>
+     * <af-tag size="small" variant="inkwell">Machine Learning</af-tag>
+     * <af-tag size="large" variant="white">Document Processing</af-tag>
      * ```
      */
     interface AfTag {
@@ -4140,13 +4320,13 @@ declare namespace LocalJSX {
          */
         "href"?: string;
         /**
-          * The size of the tag - `x-small` - Compact tag with minimal padding - `small` - Small tag with moderate padding - `large` - Large tag with generous padding
+          * The size of the tag - `x-small` - Compact tag with minimal padding - `small` - Small tag with moderate padding (default) - `large` - Large tag with generous padding
           * @default 'small'
          */
         "size"?: TagSize;
         /**
-          * The visual variant of the tag - `sand` - Soft-clay/tan colored background (default) - `light` - Mist-green/light colored background
-          * @default 'sand'
+          * Visual variant of the tag. `default` inherits tag colors from the parent theme context. Theme-named variants force a specific palette.
+          * @default 'default'
          */
         "variant"?: TagVariant;
     }
@@ -4182,9 +4362,9 @@ declare namespace LocalJSX {
          */
         "onNavPrev"?: (event: AfTestimonialCustomEvent<void>) => void;
         /**
-          * Testimonial quote text
+          * Testimonial quote text. Falls back to the `quote-body` slot if that slot has content.
          */
-        "quote": string;
+        "quote"?: string;
         /**
           * Link to full case study
          */
@@ -4404,10 +4584,20 @@ declare namespace LocalJSX {
           * Description text alignment. Falls back to textAlignment if not specified.
          */
         "descriptionAlignment"?: TextAlign;
+        /**
+          * Description colour variant. Same pattern as `headingColor`; useful for hero-style lockups where the description is rendered in the accent colour. - `default` (default) - uses `--af-typography-body-default` - `secondary` - uses `--af-typography-heading-secondary`
+          * @default 'default'
+         */
+        "descriptionColor"?: 'default' | 'secondary';
         /**
           * Heading text alignment. Falls back to textAlignment if not specified.
          */
         "headingAlignment"?: TextAlign;
+        /**
+          * Heading colour variant. Matches the Webflow pattern of `h1.primary` vs `h1.secondary`, where "secondary" renders in the theme's accent/heading- secondary colour (soft-clay on most themes). - `primary` (default) - uses `--af-typography-heading-primary` - `secondary` - uses `--af-typography-heading-secondary`
+          * @default 'primary'
+         */
+        "headingColor"?: 'primary' | 'secondary';
         /**
           * The heading size (1-5, where 1 is largest)
           * @default 2
@@ -4524,6 +4714,8 @@ declare namespace LocalJSX {
         "af-spacer": AfSpacer;
         "af-split-section": AfSplitSection;
         "af-stack": AfStack;
+        "af-stepper": AfStepper;
+        "af-stepper-step": AfStepperStep;
         "af-switch": AfSwitch;
         "af-tab": AfTab;
         "af-tab-bar": AfTabBar;
@@ -4587,7 +4779,8 @@ declare module "@stencil/core" {
             /**
              * Infinite scrolling carousel for client logos.
              * This is a section-level component that spans full width.
-             * It supports theming via the `theme` prop.
+             * Renders one or two scrolling rows; single row matches the Webflow reference,
+             * two rows (scrolling opposite directions) is the denser variant.
              * For headlines, use a separate TypographyLockup or Heading component above this carousel.
              */
             "af-client-carousel": LocalJSX.AfClientCarousel & JSXBase.HTMLAttributes<HTMLAfClientCarouselElement>;
@@ -4724,14 +4917,15 @@ declare module "@stencil/core" {
              * <af-icon-text icon="settings" heading-size="4">
              *   Feature Heading
              *   <span slot="description">Feature description text.</span>
-             *   <af-button slot="buttons" variant="tertiary">Learn more</af-button>
+             *   <af-button slot="buttons" variant="ghost">Learn more</af-button>
              * </af-icon-text>
              * ```
              */
             "af-icon-text": LocalJSX.AfIconText & JSXBase.HTMLAttributes<HTMLAfIconTextElement>;
             /**
              * Illustrated Card molecule component that combines a card with an illustration.
-             * Uses a theme background with text at top and an illustration from
+             * Uses a theme background with text at top, a button row in the middle, and
+             * an illustration from
              * @affinda /illustrations at the bottom.
              * Uses af-card atom internally and af-typography-lockup for text hierarchy.
              */
@@ -4758,6 +4952,14 @@ declare module "@stencil/core" {
              * />
              * ```
              * Alternatively, use the `illustration` slot for completely custom content.
+             * **Slot-based composition (preferred for rich content):**
+             * - `heading` — heading markup (overrides the `heading` prop when provided).
+             * - `description` — description markup (overrides the `description` prop).
+             * - `buttons` — custom button group (overrides the primary/secondary button
+             *   props; use when you need ghost variants, more than two buttons, or
+             *   per-button icons).
+             * - `illustration` — custom illustration markup.
+             * The string props remain supported for simple cases.
              */
             "af-in-page-banner": LocalJSX.AfInPageBanner & JSXBase.HTMLAttributes<HTMLAfInPageBannerElement>;
             /**
@@ -4903,6 +5105,31 @@ declare module "@stencil/core" {
              * Uses design tokens for gap values.
              */
             "af-stack": LocalJSX.AfStack & JSXBase.HTMLAttributes<HTMLAfStackElement>;
+            /**
+             * Stepper composite for "Sign up / Upload / See results"-style marketing
+             * flows. Renders children `af-stepper-step` elements in a horizontal row
+             * (desktop) or vertical stack (mobile), with a connector line between badges.
+             * Matches Webflow's `.stepper` pattern — numbered circled badges, a spine
+             * connector, and centered step text.
+             * @example ```html
+             * <af-stepper>
+             *   <af-stepper-step>
+             *     <h3 slot="heading">Sign up for free</h3>
+             *     <p slot="body">No sales calls, no credit cards.</p>
+             *   </af-stepper-step>
+             *   <af-stepper-step>...</af-stepper-step>
+             *   <af-stepper-step>...</af-stepper-step>
+             * </af-stepper>
+             * ```
+             */
+            "af-stepper": LocalJSX.AfStepper & JSXBase.HTMLAttributes<HTMLAfStepperElement>;
+            /**
+             * A single step within an af-stepper. Renders a numbered circular badge
+             * followed by slotted heading + body content.
+             * The parent af-stepper auto-assigns the `index` attribute based on DOM
+             * order, so consumers don't need to hand-number the steps.
+             */
+            "af-stepper-step": LocalJSX.AfStepperStep & JSXBase.HTMLAttributes<HTMLAfStepperStepElement>;
             /**
              * Switch component for toggling between on and off states.
              */
@@ -4936,10 +5163,13 @@ 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">Machine Learning</af-tag>
-             * <af-tag size="large" variant="light">Document Processing</af-tag>
+             * <af-tag size="small" variant="inkwell">Machine Learning</af-tag>
+             * <af-tag size="large" variant="white">Document Processing</af-tag>
              * ```
              */
             "af-tag": LocalJSX.AfTag & JSXBase.HTMLAttributes<HTMLAfTagElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@affinda/wc",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "private": false,
   "type": "module",
   "main": "dist/index.cjs.js",
@@ -20,14 +20,14 @@
     "clean": "rm -rf dist loader www"
   },
   "dependencies": {
-    "@affinda/css": "workspace:*",
-    "@affinda/icons": "workspace:*",
-    "@affinda/illustrations": "workspace:*",
-    "@affinda/tokens": "workspace:*",
+    "@affinda/css": "^0.0.11",
+    "@affinda/icons": "^0.0.6",
+    "@affinda/illustrations": "^0.0.8",
+    "@affinda/tokens": "^0.0.11",
     "@stencil/core": "^4.9.1"
   },
   "devDependencies": {
     "@stencil/react-output-target": "^1.2.0",
     "@types/node": "^20.0.0"
   }
-}
+}

package/dist/affinda/p-0b5bc045.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["registerInstance","h","Host","afClientCarouselCss","AfClientCarousel","constructor","hostRef","this","theme","render","key","class","name","style"],"sources":["0"],"mappings":"YAAcA,OAAkBC,OAAQC,MAAY,kBAEpD,MAAMC,EAAsB,66EAE5B,MAAMC,EAAmB,MACrB,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,GAEvBC,KAAKC,MAAQ,SACjB,CACA,MAAAC,GACI,OAAQR,EAAEC,EAAM,CAAEQ,IAAK,2CAA4CC,MAAO,SAASJ,KAAKC,SAAWP,EAAE,MAAO,CAAES,IAAK,2CAA4CC,MAAO,yBAAyBJ,KAAKC,SAAWP,EAAE,MAAO,CAAES,IAAK,2CAA4CC,MAAO,sBAAwBV,EAAE,MAAO,CAAES,IAAK,2CAA4CC,MAAO,4BAA8BV,EAAE,MAAO,CAAES,IAAK,2CAA4CC,MAAO,cAAgBV,EAAE,OAAQ,CAAES,IAAK,2CAA4CE,KAAM,UAAYX,EAAE,OAAQ,CAAES,IAAK,2CAA4CE,KAAM,YAAcX,EAAE,MAAO,CAAES,IAAK,2CAA4CC,MAAO,6BAA+BV,EAAE,MAAO,CAAES,IAAK,2CAA4CC,MAAO,cAAgBV,EAAE,OAAQ,CAAES,IAAK,2CAA4CE,KAAM,UAAYX,EAAE,OAAQ,CAAES,IAAK,2CAA4CE,KAAM,cACz8B,GAEJR,EAAiBS,MAAQV,SAEhBC","ignoreList":[]}

package/dist/affinda/p-16f808d5.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t,H as a}from"./p-B0LVveHp.js";const i=".sc-af-text-image-h{display:block;width:100%}.text-image.sc-af-text-image{display:flex;width:100%}.text-image--side-by-side.sc-af-text-image{flex-direction:row;align-items:flex-start;gap:var(--space-8, 32px)}.text-image--image-left.sc-af-text-image{flex-direction:row-reverse}.text-image--image-right.sc-af-text-image{flex-direction:row}.text-image--full-width.sc-af-text-image{flex-direction:column;gap:var(--space-8, 32px)}.text-image__content.sc-af-text-image{display:flex;flex-direction:column;gap:56px;flex:1;min-width:0}.text-image--proportion-1-3.sc-af-text-image .text-image__content.sc-af-text-image{flex:2}.text-image--proportion-1-4.sc-af-text-image .text-image__content.sc-af-text-image{flex:3}.text-image--proportion-100.sc-af-text-image .text-image__content.sc-af-text-image{flex:none;width:100%}.text-image--image-right.sc-af-text-image .text-image__content.sc-af-text-image{padding-right:var(--space-8, 32px)}.text-image--image-left.sc-af-text-image .text-image__content.sc-af-text-image{padding-left:var(--space-8, 32px)}.text-image--full-width.sc-af-text-image .text-image__content.sc-af-text-image{padding:0}.text-image__lockup.sc-af-text-image{display:flex;flex-direction:column;gap:var(--space-4, 16px);width:100%}.text-image__copy.sc-af-text-image{display:flex;flex-direction:column;gap:var(--space-4, 16px);max-width:840px;width:100%}.text-image__heading.sc-af-text-image{font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:var(--font-size-heading-3-desktop, 34px);line-height:var(--line-height-heading-tight, 1);letter-spacing:var(--letter-spacing-heading, -0.02em);color:var(--af-typography-heading-primary, #14343B);white-space:pre-wrap}.text-image__heading.sc-af-text-image:empty{display:none}.text-image__description.sc-af-text-image{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-body-large, 18px);line-height:var(--line-height-body-large, 26px);color:var(--af-typography-body-default, #2B484F);white-space:pre-wrap}.text-image__description.sc-af-text-image:empty{display:none}.text-image__buttons.sc-af-text-image{display:block}.text-image__buttons.sc-af-text-image:empty{display:none}.text-image__image-wrapper.sc-af-text-image{flex-shrink:0;overflow:hidden;border-radius:var(--radius-md, 12px)}.text-image--proportion-1-3.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{flex:1;min-width:0}.text-image--proportion-1-4.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{flex:1;min-width:0}.text-image--proportion-100.sc-af-text-image .text-image__image-wrapper.sc-af-text-image{width:100%}@media (max-width: 768px){.text-image--side-by-side.sc-af-text-image{flex-direction:column;gap:var(--space-6, 24px)}.text-image--image-left.sc-af-text-image,.text-image--image-right.sc-af-text-image{flex-direction:column}.text-image--image-right.sc-af-text-image .text-image__content.sc-af-text-image,.text-image--image-left.sc-af-text-image .text-image__content.sc-af-text-image{padding:0}.text-image__content.sc-af-text-image,.text-image__image-wrapper.sc-af-text-image{flex:none !important;width:100%}.text-image__heading.sc-af-text-image{font-size:var(--font-size-heading-3-mobile, 25px)}.text-image--proportion-100.sc-af-text-image .text-image__description.sc-af-text-image{font-size:var(--font-size-body-medium, 16px);line-height:var(--line-height-body-medium, 24px)}.text-image--proportion-100.sc-af-text-image .text-image__lockup.sc-af-text-image{gap:var(--space-3, 12px)}.text-image--proportion-100.sc-af-text-image .text-image__copy.sc-af-text-image{gap:var(--space-3, 12px)}.text-image__image-wrapper.sc-af-text-image{border-radius:var(--radius-sm, 8px)}}.sc-af-text-image-s>*{margin:0}.sc-af-text-image-s>p{margin:0}";const g=class{constructor(t){e(this,t);this.imagePosition="right";this.imageProportion="1/3";this.alt="";this.showSecondLockup=false}render(){const e=this.imageProportion==="100%";const i=this.imagePosition==="left";const g={"text-image":true,"text-image--full-width":e,"text-image--side-by-side":!e,"text-image--image-left":i&&!e,"text-image--image-right":!i&&!e,[`text-image--proportion-${this.imageProportion.replace("/","-").replace("%","")}`]:true};const s=(e=false)=>{const a=e?"second-":"";return t("div",{class:`text-image__lockup ${e?"text-image__lockup--second":""}`},t("div",{class:"text-image__copy"},t("div",{class:"text-image__heading"},t("slot",{name:e?"second-heading":undefined})),t("div",{class:"text-image__description"},t("slot",{name:`${a}description`}))),t("div",{class:"text-image__buttons"},t("slot",{name:`${a}buttons`})))};const m=()=>{if(!this.src)return null;return t("div",{class:"text-image__image-wrapper"},t("af-image",{src:this.src,alt:this.alt}))};if(e){return t(a,null,t("div",{class:g},t("div",{class:"text-image__content"},s(),this.showSecondLockup&&s(true)),m()))}const x=t("div",{class:"text-image__content"},s(),this.showSecondLockup&&s(true));const n=m();return t(a,null,t("div",{class:g},i?[n,x]:[x,n]))}};g.style=i;export{g as af_text_image};
-//# sourceMappingURL=p-16f808d5.entry.js.map

package/dist/affinda/p-1c32cfcb.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as s,h as e,H as t,a as c}from"./p-B0LVveHp.js";const a=".sc-af-nav-accordion-h{display:block;width:100%}.nav-accordion.sc-af-nav-accordion{display:flex;flex-direction:column;width:100%}";const n=class{constructor(e){i(this,e);this.navAccordionChange=s(this,"af-nav-accordion-change");this.mode="exclusive";this.breakpoint="mobile";this.internalValue=[]}componentWillLoad(){this.internalValue=this.normalizeValue(this.value)}handleItemToggle(i){i.stopPropagation();const{itemId:s,open:e}=i.detail;let t;if(this.mode==="exclusive"){t=e?[s]:[]}else{if(e){t=[...this.internalValue,s]}else{t=this.internalValue.filter((i=>i!==s))}}this.internalValue=t;this.syncItems();const c=this.mode==="exclusive"?t.length>0?t[0]:null:t;this.navAccordionChange.emit({value:c})}normalizeValue(i){if(i===undefined||i===null){return[]}if(Array.isArray(i)){return this.mode==="exclusive"?i.slice(0,1):i}return[i]}syncItems(){const i=this.el.querySelectorAll("af-nav-accordion-item");i.forEach((i=>{const s=i;if(s.itemId){s.open=this.internalValue.includes(s.itemId)}}))}componentDidLoad(){this.syncItems()}render(){return e(t,{key:"891409dbe4cbb089085aa5b942c5f3c9f4a9bfe5",class:{[`breakpoint-${this.breakpoint}`]:true,[`mode-${this.mode}`]:true}},e("div",{key:"b52051c0d7df92a5bc34400b55156fb638acbccc",class:"nav-accordion"},e("slot",{key:"86cbd9894e0c8bb44d8001a53df01822b8806542"})))}get el(){return c(this)}};n.style=a;export{n as af_nav_accordion};
-//# sourceMappingURL=p-1c32cfcb.entry.js.map