@affinda/wc 0.0.15 → 0.0.16

package/dist/esm/index.js

@@ -6,5 +6,16 @@ export { af_button as AfButton } from './af-button.entry.js';
 export { af_icon_button as AfIconButton } from './af-icon-button.entry.js';
 export { af_button_group as AfButtonGroup } from './af-button-group.entry.js';
 export { af_typography_lockup as AfTypographyLockup } from './af-typography-lockup.entry.js';
-import './index-DI7b0bCy.js';
+export { af_checkbox as AfCheckbox } from './af-checkbox.entry.js';
+export { af_radio as AfRadio } from './af-radio.entry.js';
+export { af_switch as AfSwitch } from './af-switch.entry.js';
+export { af_fieldset as AfFieldset } from './af-fieldset.entry.js';
+export { af_input as AfInput } from './af-input.entry.js';
+export { af_textarea as AfTextarea } from './af-textarea.entry.js';
+export { af_tag as AfTag } from './af-tag.entry.js';
+export { af_tab as AfTab } from './af-tab.entry.js';
+export { af_tab_bar as AfTabBar } from './af-tab-bar.entry.js';
+export { af_feature_card as AfFeatureCard } from './af-feature-card.entry.js';
+export { af_illustrated_card as AfIllustratedCard } from './af-illustrated-card.entry.js';
+import './index-BmU_CFQ4.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/esm/loader.js

@@ -1,10 +1,10 @@
-import { g as globalScripts, b as bootstrapLazy } from './index-DI7b0bCy.js';
-export { s as setNonce } from './index-DI7b0bCy.js';
+import { g as globalScripts, b as bootstrapLazy } from './index-BmU_CFQ4.js';
+export { s as setNonce } from './index-BmU_CFQ4.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["af-hero-section",[[262,"af-hero-section",{"variant":[1],"withDecoration":[4,"with-decoration"],"minHeight":[1,"min-height"]}]]],["af-section",[[262,"af-section",{"padding":[1],"background":[1],"container":[4]}]]],["af-aspect-ratio",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-button",[[257,"af-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"darkBackground":[4,"dark-background"]}]]],["af-button-group",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-card",[[262,"af-card",{"backgroundImage":[1,"background-image"],"backgroundColor":[1,"background-color"],"darkOverlay":[4,"dark-overlay"]}]]],["af-client-carousel",[[257,"af-client-carousel",{"showHeadline":[4,"show-headline"],"headlineText":[1,"headline-text"]}]]],["af-color-swatch",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-contact-item",[[262,"af-contact-item",{"label":[1],"value":[1]}]]],["af-cta-section",[[262,"af-cta-section",{"heading":[1],"description":[1],"primaryButtonText":[1,"primary-button-text"],"primaryButtonUrl":[1,"primary-button-url"],"secondaryButtonText":[1,"secondary-button-text"],"secondaryButtonUrl":[1,"secondary-button-url"],"illustrationUrl":[1,"illustration-url"],"showWaveDecoration":[4,"show-wave-decoration"]}]]],["af-feature-accordion",[[262,"af-feature-accordion",{"heading":[1],"items":[1],"cycleInterval":[2,"cycle-interval"],"autoCycle":[4,"auto-cycle"],"expandedIndex":[32],"timerProgress":[32]},null,{"autoCycle":["handleAutoCycleChange"]}]]],["af-footer",[[262,"af-footer",{"copyrightText":[1,"copyright-text"],"statusText":[1,"status-text"],"statusUrl":[1,"status-url"],"systemsOperational":[4,"systems-operational"],"showStatus":[4,"show-status"]}]]],["af-footer-column",[[262,"af-footer-column",{"heading":[1]}]]],["af-footer-link",[[262,"af-footer-link",{"href":[1],"external":[4]}]]],["af-icon-button",[[257,"af-icon-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-logo-well",[[257,"af-logo-well"]]],["af-social-link",[[262,"af-social-link",{"href":[1],"label":[1],"icon":[1]}]]],["af-testimonial",[[262,"af-testimonial",{"backgroundImage":[1,"background-image"],"logoImage":[1,"logo-image"],"quote":[1],"attribution":[1],"readMoreLink":[1,"read-more-link"]}]]],["af-testimonial-carousel",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]}]]],["af-testimonial-stat",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-typography-lockup",[[257,"af-typography-lockup",{"headingSize":[2,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]],["af-heading_5",[[257,"af-navbar",{"showDefaultLogo":[4,"show-default-logo"],"mobileMenuOpen":[32]}],[257,"af-heading",{"level":[1],"align":[1],"theme":[1]}],[257,"af-nav-item",{"hierarchy":[1],"variant":[1],"href":[1],"active":[4]}],[257,"af-text",{"variant":[1],"align":[1],"as":[1],"theme":[1]}],[257,"af-logo",{"src":[1],"alt":[1]}]]],["af-container",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]]], options);
+  return bootstrapLazy([["af-testimonial",[[262,"af-testimonial",{"backgroundImage":[1,"background-image"],"logoImage":[1,"logo-image"],"quote":[1],"attribution":[1],"readMoreLink":[1,"read-more-link"],"showNavigation":[1028,"show-navigation"],"hasPrev":[1028,"has-prev"],"hasNext":[1028,"has-next"]}]]],["af-icon-text",[[262,"af-icon-text",{"icon":[1],"headingSize":[2,"heading-size"],"orientation":[1],"iconSize":[1,"icon-size"]}]]],["af-feature-card",[[262,"af-feature-card",{"theme":[1],"layout":[1],"cardSize":[513,"card-size"],"headingSize":[2,"heading-size"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"]}]]],["af-hero-section",[[262,"af-hero-section",{"theme":[1],"withDecoration":[4,"with-decoration"],"minHeight":[1,"min-height"],"headingSize":[2,"heading-size"],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]],["af-illustrated-card",[[262,"af-illustrated-card",{"theme":[1],"breakpoint":[1],"cardSize":[1,"card-size"]}]]],["af-testimonial-stat",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-video-container",[[262,"af-video-container",{"videoThumbnailUrl":[1,"video-thumbnail-url"],"videoAlt":[1,"video-alt"],"videoUrl":[1,"video-url"]}]]],["af-feature-grid",[[262,"af-feature-grid",{"columns":[2],"mobileLayout":[1,"mobile-layout"],"scrollProgress":[32]},null,{"mobileLayout":["onMobileLayoutChange"]}]]],["af-grid-callout",[[262,"af-grid-callout",{"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"imagePosition":[1,"image-position"],"columns":[2],"headingSize":[2,"heading-size"]}]]],["af-in-page-banner",[[262,"af-in-page-banner",{"theme":[1],"heading":[1],"description":[1],"primaryButtonText":[1,"primary-button-text"],"primaryButtonUrl":[1,"primary-button-url"],"secondaryButtonText":[1,"secondary-button-text"],"secondaryButtonUrl":[1,"secondary-button-url"],"illustrationUrl":[1,"illustration-url"],"showWaveDecoration":[4,"show-wave-decoration"]}]]],["af-section",[[262,"af-section",{"padding":[1],"theme":[1],"container":[4]}]]],["af-split-section",[[262,"af-split-section",{"topTheme":[1,"top-theme"],"bottomTheme":[1,"bottom-theme"],"padding":[1],"container":[4]}]]],["af-testimonial-carousel",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]},[[0,"navPrev","handleNavPrev"],[0,"navNext","handleNavNext"]]]]],["af-text-image",[[262,"af-text-image",{"imagePosition":[1,"image-position"],"imageProportion":[1,"image-proportion"],"src":[1],"alt":[1],"showSecondLockup":[4,"show-second-lockup"]}]]],["af-button-group",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-checkbox",[[257,"af-checkbox",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[1],"value":[1]}]]],["af-client-carousel",[[257,"af-client-carousel",{"theme":[1]}]]],["af-color-swatch",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-contact-item",[[262,"af-contact-item",{"label":[1],"value":[1]}]]],["af-feature-accordion",[[262,"af-feature-accordion",{"heading":[1],"items":[1],"cycleInterval":[2,"cycle-interval"],"autoCycle":[4,"auto-cycle"],"expandedIndex":[32],"timerProgress":[32]},null,{"autoCycle":["handleAutoCycleChange"]}]]],["af-fieldset",[[257,"af-fieldset",{"legend":[1],"orientation":[1],"disabled":[516]}]]],["af-footer",[[262,"af-footer",{"copyrightText":[1,"copyright-text"],"statusText":[1,"status-text"],"statusUrl":[1,"status-url"],"systemsOperational":[4,"systems-operational"],"showStatus":[4,"show-status"]}]]],["af-footer-column",[[262,"af-footer-column",{"heading":[1]}]]],["af-footer-link",[[262,"af-footer-link",{"href":[1],"external":[4]}]]],["af-input",[[257,"af-input",{"label":[1],"description":[1],"placeholder":[1],"value":[1025],"type":[1],"name":[1],"disabled":[516],"required":[4],"readonly":[4],"error":[1],"showInfoIcon":[4,"show-info-icon"],"showSearchIcon":[4,"show-search-icon"],"clearable":[4],"autocomplete":[1],"maxlength":[2],"minlength":[2],"pattern":[1],"isFocused":[32],"isHovered":[32]}]]],["af-logo-well",[[257,"af-logo-well"]]],["af-nav-card",[[257,"af-nav-card",{"heading":[1],"href":[1],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"isHovered":[32]}]]],["af-nav-menu",[[257,"af-nav-menu",{"heading":[1],"breakpoint":[1],"showBorder":[4,"show-border"],"cardStyle":[516,"card-style"]}]]],["af-nav-menu-nest",[[257,"af-nav-menu-nest",{"type":[1],"breakpoint":[1],"showSidebarBorder":[516,"show-sidebar-border"]}]]],["af-number-badge",[[257,"af-number-badge",{"number":[2],"variant":[1],"size":[2]}]]],["af-radio",[[257,"af-radio",{"checked":[1540],"disabled":[516],"name":[1],"value":[1]}]]],["af-social-link",[[262,"af-social-link",{"href":[1],"label":[1],"icon":[1]}]]],["af-switch",[[257,"af-switch",{"active":[1540],"disabled":[516],"name":[1],"value":[1]}]]],["af-tab",[[257,"af-tab",{"label":[1],"active":[516],"disabled":[516],"shape":[513],"displayIcon":[4,"display-icon"],"displayNumber":[4,"display-number"],"value":[1]}]]],["af-tab-bar",[[257,"af-tab-bar",{"shape":[513],"breakpoint":[513]},[[0,"keydown","handleKeyDown"]]]]],["af-tag",[[257,"af-tag",{"size":[1],"variant":[1],"href":[1]}]]],["af-text-image-nest",[[262,"af-text-image-nest",{"layout":[1]}]]],["af-textarea",[[257,"af-textarea",{"label":[1],"description":[1],"placeholder":[1],"value":[1025],"name":[1],"disabled":[516],"required":[4],"readonly":[4],"error":[1],"showInfoIcon":[4,"show-info-icon"],"rows":[2],"maxlength":[2],"minlength":[2],"resize":[1],"isFocused":[32],"isHovered":[32]}]]],["af-icon-box",[[258,"af-icon-box",{"icon":[1],"size":[1]}]]],["af-aspect-ratio",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-icon-button",[[257,"af-icon-button",{"variant":[513],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-image",[[258,"af-image",{"src":[1],"alt":[1]}]]],["af-button",[[257,"af-button",{"variant":[513],"size":[1],"disabled":[4],"type":[1],"href":[1],"hasIconLeft":[32],"hasIconRight":[32]}]]],["af-card",[[262,"af-card",{"theme":[1],"stretch":[516]}]]],["af-progress-line",[[258,"af-progress-line",{"progress":[2],"orientation":[1]}]]],["af-container",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]],["af-heading_5",[[257,"af-navbar",{"showDefaultLogo":[4,"show-default-logo"],"theme":[1],"mobileMenuOpen":[32],"activeDropdown":[32]},[[4,"click","handleDocumentClick"],[4,"keydown","handleKeyDown"]]],[257,"af-nav-item",{"hierarchy":[1],"variant":[1],"breakpoint":[1],"href":[1],"active":[4]}],[257,"af-heading",{"level":[1],"align":[1]}],[257,"af-logo"],[257,"af-text",{"variant":[1],"align":[1],"as":[1]}]]],["af-icon",[[257,"af-icon",{"name":[1],"size":[2],"label":[1]}]]],["af-typography-lockup",[[257,"af-typography-lockup",{"headingSize":[2,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/types/components/af-button/af-button.d.ts

@@ -1,27 +1,40 @@
+/**
+ * Button component that inherits colors from theme context.
+ * Colors are determined by the parent theme (af-section, af-hero-section, etc.)
+ * via CSS custom properties.
+ *
+ * @slot - Button label text
+ * @slot icon-left - Icon displayed before the label
+ * @slot icon-right - Icon displayed after the label
+ */
 export declare class AfButton {
     /**
-     * The visual variant of the button
+     * 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
      */
-    variant: 'primary' | 'secondary' | 'outline' | 'ghost';
+    variant: 'primary' | 'secondary' | 'tertiary';
     /**
-     * The size of the button
+     * The size of the button.
+     * - `default` - Standard size for primary CTAs
+     * - `small` - Compact size for inline or secondary contexts
      */
     size: 'default' | 'small';
     /**
      * Whether the button is disabled
      */
     disabled: boolean;
-    /**
-     * Optional href to render as a link
-     */
-    href?: string;
     /**
      * Button type (when not using href)
      */
     type: 'button' | 'submit' | 'reset';
     /**
-     * Use on dark backgrounds for better contrast
+     * Optional href to render as a link instead of a button
      */
-    darkBackground: boolean;
+    href?: string;
+    hasIconLeft: boolean;
+    hasIconRight: boolean;
+    private handleSlotChange;
     render(): any;
 }

package/dist/types/components/af-card/af-card.d.ts

@@ -1,15 +1,22 @@
+/**
+ * Card atom component - a themed container with consistent styling.
+ * Provides theme context to children via CSS custom properties.
+ *
+ * This is a base building block used by molecule components like
+ * af-feature-card and af-illustrated-card.
+ */
 export declare class AfCard {
     /**
-     * Background image URL for the card
+     * Theme - sets background color and provides theme context to children.
+     * Defaults to 'mist-green' if not specified.
      */
-    backgroundImage?: string;
+    theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
     /**
-     * Background color for the card (CSS color value)
+     * When true, the card stretches to fill its container height.
+     * Use this when the card is in a flex/grid container and needs to
+     * participate in equal-height layouts. The card's content will use
+     * flexbox to distribute space between children.
      */
-    backgroundColor?: string;
-    /**
-     * Whether to apply a dark gradient overlay (for cards with background images)
-     */
-    darkOverlay: boolean;
+    stretch: boolean;
     render(): any;
 }

package/dist/types/components/af-checkbox/af-checkbox.d.ts

@@ -0,0 +1,40 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Checkbox component for selecting multiple options.
+ * Supports checked, unchecked, and indeterminate states.
+ *
+ * @slot - Checkbox label text
+ */
+export declare class AfCheckbox {
+    /**
+     * Whether the checkbox is checked
+     */
+    checked: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state
+     */
+    indeterminate: boolean;
+    /**
+     * Whether the checkbox is disabled
+     */
+    disabled: boolean;
+    /**
+     * The name of the checkbox for form submission
+     */
+    name?: string;
+    /**
+     * The value of the checkbox for form submission
+     */
+    value?: string;
+    /**
+     * Emitted when the checkbox checked state changes
+     */
+    afChange: EventEmitter<{
+        checked: boolean;
+    }>;
+    private inputEl?;
+    private handleChange;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    render(): any;
+}

package/dist/types/components/af-client-carousel/af-client-carousel.d.ts

@@ -1,10 +1,15 @@
+type Theme = 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
 /**
- * Infinite scrolling carousel for client logos
+ * Infinite scrolling carousel for client logos.
+ *
+ * This is a section-level component that spans full width.
+ * It supports theming via the `theme` prop.
+ *
+ * For headlines, use a separate TypographyLockup or Heading component above this carousel.
  */
 export declare class AfClientCarousel {
-    /** Show headline above carousel */
-    showHeadline: boolean;
-    /** Headline text */
-    headlineText: string;
+    /** Theme - sets background color and provides theme context to children */
+    theme: Theme;
     render(): any;
 }
+export {};

package/dist/types/components/af-feature-accordion/af-feature-accordion.d.ts

@@ -5,9 +5,19 @@ export interface FeatureAccordionItem {
     imageAlt?: string;
 }
 /**
- * Feature accordion component with expandable items and accompanying image
- * Used for showcasing product features with visual examples
- * Features auto-cycling through items with a progress timer
+ * Feature accordion component with expandable items and accompanying image.
+ * Used for showcasing product features with visual examples.
+ * Features auto-cycling through items with a progress timer.
+ *
+ * **Must be wrapped in a Section component** to inherit theme styling.
+ * The component automatically adapts colors based on the parent Section's theme.
+ *
+ * @example
+ * ```tsx
+ * <Section theme="inkwell">
+ *   <FeatureAccordion heading="Features" items={...} />
+ * </Section>
+ * ```
  */
 export declare class AfFeatureAccordion {
     el: HTMLElement;

package/dist/types/components/af-feature-card/af-feature-card.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Feature Card molecule component that combines a card with an image.
+ *
+ * Two layout modes:
+ * - `standard`: Theme background with text at top and image at bottom
+ * - `full-bleed`: Image covers entire card with text overlay at bottom
+ *
+ * Responsive: Automatically adapts to mobile viewport (≤768px).
+ *
+ * Uses af-card atom internally and af-typography-lockup for text hierarchy.
+ *
+ * @slot - Heading text content
+ * @slot body - Description/body text content
+ */
+export declare class AfFeatureCard {
+    /**
+     * Theme variant - sets background color and provides theme context.
+     * Only applies to 'standard' layout mode. Defaults to 'mist-green'.
+     */
+    theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
+    /**
+     * Layout mode for the card.
+     * - 'standard': Theme background with text at top and image at bottom
+     * - 'full-bleed': Image covers entire card with text overlay at bottom
+     */
+    layout: 'standard' | 'full-bleed';
+    /**
+     * Card size variant.
+     * - 'default': Fixed 544px × 420px
+     * - 'large': Fixed 777px × 480px
+     * - 'flexible': Fills container (for grid layouts)
+     */
+    cardSize: 'default' | 'large' | 'flexible';
+    /**
+     * Heading size for typography lockup (1-5, where 1 is largest).
+     */
+    headingSize: 1 | 2 | 3 | 4 | 5;
+    /**
+     * Background/feature image URL.
+     */
+    imageSrc?: string;
+    /**
+     * Image alt text for accessibility.
+     * Provide meaningful alt text for feature images.
+     * Only use empty string for purely decorative images.
+     */
+    imageAlt: string;
+    render(): any;
+}

package/dist/types/components/af-feature-grid/af-feature-grid.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Feature Grid component - CSS Grid container for feature cards.
+ *
+ * Desktop: Configurable columns (1-4)
+ * Mobile: List (stacked), horizontal scroll, or 2-column grid
+ *
+ * @slot - Feature card components (af-feature-card)
+ */
+export declare class AfFeatureGrid {
+    host: HTMLElement;
+    /**
+     * Number of columns on desktop (1-4).
+     */
+    columns: 1 | 2 | 3 | 4;
+    /**
+     * Mobile layout behavior.
+     * - 'list': Vertical stack (1 column)
+     * - 'scroll': Horizontal scroll with progress indicator
+     * - 'grid': Maintain 2-column grid on mobile
+     */
+    mobileLayout: 'list' | 'scroll' | 'grid';
+    scrollProgress: number;
+    private scrollContainer;
+    private observer;
+    private resizeObserver;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    onMobileLayoutChange(): void;
+    private setupScrollListener;
+    private handleScroll;
+    render(): any;
+}

package/dist/types/components/af-fieldset/af-fieldset.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Fieldset component for grouping related form controls.
+ * Supports vertical and horizontal layouts with an optional legend/heading.
+ *
+ * @slot - Form controls (checkboxes, radios, etc.)
+ */
+export declare class AfFieldset {
+    /**
+     * The legend/heading text for the fieldset
+     */
+    legend?: string;
+    /**
+     * The layout orientation of the fieldset items
+     * - `vertical` - Items stack vertically (default)
+     * - `horizontal` - Items are laid out horizontally
+     */
+    orientation: 'vertical' | 'horizontal';
+    /**
+     * Whether the fieldset is disabled (disables all child controls)
+     */
+    disabled: boolean;
+    render(): any;
+}

package/dist/types/components/af-grid-callout/af-grid-callout.d.ts

@@ -0,0 +1,57 @@
+/**
+ * GridCallout organism - a marketing section combining an optional pill-shaped image
+ * with a grid of IconText feature items.
+ *
+ * Composes:
+ * - Pill-shaped image container (optional)
+ * - Heading via af-typography-lockup
+ * - Grid of af-icon-text items
+ * - Optional CTA button
+ *
+ * Inherits theme colors from parent af-section via CSS custom properties.
+ *
+ * @slot - Main heading text
+ * @slot description - Optional description/subheading text
+ * @slot items - IconText components for the feature grid
+ * @slot cta - CTA button(s) at the bottom
+ *
+ * @example
+ * ```html
+ * <af-section theme="mist-green">
+ *   <af-grid-callout image-src="/team.jpg" image-alt="Team photo">
+ *     Affinda blends AI and engineering
+ *     <span slot="description">Optional description text.</span>
+ *
+ *     <af-icon-text slot="items" icon="settings">
+ *       Feature One
+ *       <span slot="description">Feature description.</span>
+ *     </af-icon-text>
+ *
+ *     <af-button slot="cta" variant="primary">Learn more</af-button>
+ *   </af-grid-callout>
+ * </af-section>
+ * ```
+ */
+export declare class AfGridCallout {
+    /**
+     * Image source URL for the pill-shaped image
+     */
+    imageSrc?: string;
+    /**
+     * Alt text for the image (required for accessibility when imageSrc is provided)
+     */
+    imageAlt: string;
+    /**
+     * Position of the image relative to the content
+     */
+    imagePosition: 'left' | 'right';
+    /**
+     * Number of columns for the IconText grid on desktop
+     */
+    columns: 2 | 3 | 4;
+    /**
+     * Heading size for the main title
+     */
+    headingSize: 1 | 2 | 3 | 4 | 5;
+    render(): any;
+}

package/dist/types/components/af-heading/af-heading.d.ts

@@ -1,10 +1,13 @@
+/**
+ * Heading component that inherits color from theme context.
+ * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+ * via CSS custom properties.
+ */
 export declare class AfHeading {
     /** Heading level */
     level: 'xl' | '1' | '2' | '3' | '4' | '5';
     /** Visual alignment */
     align: 'left' | 'center' | 'right';
-    /** Theme for dark backgrounds */
-    theme: 'light' | 'dark';
     private getHeadingTag;
     render(): any;
 }

package/dist/types/components/af-hero-section/af-hero-section.d.ts

@@ -1,12 +1,27 @@
 /**
- * Hero section component for marketing pages
+ * 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.
+ *
+ * @slot heading - The main heading content (typically an af-heading)
+ * @slot description - Description text below the heading (typically af-text)
+ * @slot buttons - Call-to-action buttons (typically af-button-group or individual af-buttons)
+ * @slot decoration - Optional decorative element (e.g., PaperclipDecoration)
  */
 export declare class AfHeroSection {
-    /** Hero variant */
-    variant: 'light' | 'dark';
+    /** Theme - sets background color and provides theme context to children */
+    theme: 'white' | 'inkwell' | 'mist-green' | 'soft-clay';
     /** Show decorative paperclip */
     withDecoration: boolean;
     /** Minimum height */
     minHeight: string;
+    /** Heading size for the typography lockup (1-5, where 1 is largest) */
+    headingSize: 1 | 2 | 3 | 4 | 5;
+    /** Text alignment for the typography lockup */
+    textAlignment: 'left' | 'center';
+    /** Button alignment - horizontal places buttons inline, vertical stacks them */
+    buttonAlignment: 'horizontal' | 'vertical';
+    /** Maximum width for the copy section (in pixels) */
+    maxWidth?: number;
     render(): any;
 }

package/dist/types/components/af-icon/af-icon.d.ts

@@ -0,0 +1,28 @@
+import type { IconName } from '@affinda/icons';
+/**
+ * Icon component that displays SVG icons from the Affinda icon library.
+ * Icons inherit color from their parent via currentColor.
+ *
+ * Icons are bundled inline, so no runtime fetching is required.
+ * This ensures icons work reliably in all bundler contexts.
+ *
+ * @example
+ * ```html
+ * <af-icon name="arrow-right" size="24"></af-icon>
+ * ```
+ */
+export declare class AfIcon {
+    /**
+     * The name of the icon to display
+     */
+    name: IconName;
+    /**
+     * Size of the icon in pixels
+     */
+    size: number;
+    /**
+     * Accessible label for the icon (for screen readers)
+     */
+    label?: string;
+    render(): any;
+}

package/dist/types/components/af-icon-box/af-icon-box.d.ts

@@ -0,0 +1,27 @@
+import type { IconName } from '@affinda/icons';
+/**
+ * IconBox atom - a themed container for displaying an icon with a rounded background.
+ *
+ * Inherits theme colors from parent Section via CSS custom properties:
+ * - Background uses `--af-background-contrast`
+ * - Icon color uses `--af-background-icon-default`
+ *
+ * @example
+ * ```html
+ * <af-icon-box icon="settings" size="default"></af-icon-box>
+ * ```
+ */
+export declare class AfIconBox {
+    /**
+     * The name of the icon to display (from @affinda/icons)
+     */
+    icon: IconName;
+    /**
+     * Size variant of the icon box
+     * - 'small': 48px container, 20px icon
+     * - 'default': 64px container, 40px icon
+     * - 'large': 80px container, 48px icon
+     */
+    size: 'small' | 'default' | 'large';
+    render(): any;
+}

package/dist/types/components/af-icon-button/af-icon-button.d.ts

@@ -1,8 +1,11 @@
 export declare class AfIconButton {
     /**
-     * The visual variant of the button
+     * The visual variant of the button.
+     * - `primary` - Main CTA with filled ice background
+     * - `secondary` - Supporting action with white background
+     * - `tertiary` - Minimal style with transparent background
      */
-    variant: 'primary' | 'secondary' | 'outline' | 'ghost';
+    variant: 'primary' | 'secondary' | 'tertiary';
     /**
      * The size of the button
      */

package/dist/types/components/af-icon-text/af-icon-text.d.ts

@@ -0,0 +1,44 @@
+import type { IconName } from '@affinda/icons';
+/**
+ * IconText molecule - combines an IconBox with a TypographyLockup for feature items.
+ *
+ * Composes:
+ * - af-icon-box: Themed icon container
+ * - af-typography-lockup: Heading, description, and button slots
+ *
+ * Inherits theme colors from parent Section via CSS custom properties.
+ *
+ * @slot - Heading text content (passed to TypographyLockup)
+ * @slot description - Body/description text
+ * @slot buttons - Action buttons (typically tertiary style)
+ *
+ * @example
+ * ```html
+ * <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-icon-text>
+ * ```
+ */
+export declare class AfIconText {
+    /**
+     * The icon name to display in the IconBox
+     */
+    icon: IconName;
+    /**
+     * Heading size for the typography lockup (1-5, where 1 is largest)
+     */
+    headingSize: 1 | 2 | 3 | 4 | 5;
+    /**
+     * Layout orientation
+     * - 'vertical': Icon above text (default, used in grid layouts)
+     * - 'horizontal': Icon beside text (used in compact layouts)
+     */
+    orientation: 'vertical' | 'horizontal';
+    /**
+     * Size of the icon box
+     */
+    iconSize: 'small' | 'default' | 'large';
+    render(): any;
+}

package/dist/types/components/af-illustrated-card/af-illustrated-card.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Illustrated Card molecule component that combines a card with an illustration.
+ *
+ * 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.
+ *
+ * @slot - Heading text content
+ * @slot body - Description/body text content
+ * @slot illustration - Illustration image element
+ */
+export declare class AfIllustratedCard {
+    /**
+     * Theme variant - sets background color and provides theme context.
+     * Defaults to 'mist-green'.
+     */
+    theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
+    /**
+     * Responsive breakpoint for typography sizing.
+     */
+    breakpoint: 'desktop' | 'mobile';
+    /**
+     * Card size variant (applies to desktop only).
+     */
+    cardSize: 'default' | 'large';
+    render(): any;
+}

package/dist/types/components/af-image/af-image.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A styled image container with rounded corners and a subtle inset border.
+ * Provides consistent image styling across the design system.
+ */
+export declare class AfImage {
+    /**
+     * The image source URL
+     */
+    src: string;
+    /**
+     * Alternative text for the image (required for accessibility)
+     */
+    alt: string;
+    render(): any;
+}