@affinda/wc 0.0.14 → 0.0.16

package/dist/types/components/af-in-page-banner/af-in-page-banner.d.ts

@@ -0,0 +1,56 @@
+type BannerTheme = 'white-ivory' | 'mist-green' | 'soft-clay' | 'inkwell';
+/**
+ * In-page banner component for call-to-action content.
+ *
+ * A banner card with illustration, heading, description, and action buttons.
+ * Typically placed inside a neutral (white) Section to show off its themed background.
+ *
+ * The component has its own theme prop to control its background color and styling.
+ *
+ * **Illustration Usage:**
+ * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,
+ * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:
+ *
+ * ```tsx
+ * import { getIllustrationUrlByScene } from '@affinda/illustrations';
+ *
+ * <InPageBanner
+ *   theme="inkwell"
+ *   illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}
+ *   ...
+ * />
+ * ```
+ *
+ * Alternatively, use the `illustration` slot for completely custom content.
+ */
+export declare class AfInPageBanner {
+    /** Theme - sets the banner background color and typography colors */
+    theme: BannerTheme;
+    /** Banner heading */
+    heading: string;
+    /** Banner description */
+    description: string;
+    /** Primary button text */
+    primaryButtonText: string;
+    /** Primary button URL */
+    primaryButtonUrl: string;
+    /** Secondary button text (optional - if empty, button won't show) */
+    secondaryButtonText: string;
+    /** Secondary button URL */
+    secondaryButtonUrl: string;
+    /**
+     * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene()
+     * from @affinda/illustrations in your app code.
+     */
+    illustrationUrl: string;
+    /** Whether to show the decorative wave overlay */
+    showWaveDecoration: boolean;
+    /**
+     * Renders the decorative wave SVG overlay.
+     * Uses the Affinda brand "infinity loop" wave pattern.
+     * Fill color is controlled via CSS custom properties per theme.
+     */
+    private renderWaveOverlay;
+    render(): any;
+}
+export {};

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

@@ -0,0 +1,110 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Input field component with label, description, and error states.
+ * Supports various input types and validation states.
+ *
+ * @slot label-end - Content to display at the end of the label (e.g., info icon)
+ */
+export declare class AfInput {
+    /**
+     * The label text for the input field
+     */
+    label?: string;
+    /**
+     * Description text displayed below the label
+     */
+    description?: string;
+    /**
+     * Placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * The current value of the input
+     */
+    value: string;
+    /**
+     * The input type (text, email, password, number, tel, url, search)
+     */
+    type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+    /**
+     * The name of the input for form submission
+     */
+    name?: string;
+    /**
+     * Whether the input is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the input is required
+     */
+    required: boolean;
+    /**
+     * Whether the input is read-only
+     */
+    readonly: boolean;
+    /**
+     * Error message to display (also sets error state)
+     */
+    error?: string;
+    /**
+     * Whether to show the info icon next to the label
+     */
+    showInfoIcon: boolean;
+    /**
+     * Whether to show a search icon in the input
+     */
+    showSearchIcon: boolean;
+    /**
+     * Whether to show a clear button when input has value
+     */
+    clearable: boolean;
+    /**
+     * Autocomplete attribute for the input
+     */
+    autocomplete?: string;
+    /**
+     * Maximum length of input value
+     */
+    maxlength?: number;
+    /**
+     * Minimum length of input value
+     */
+    minlength?: number;
+    /**
+     * Pattern for input validation (regex)
+     */
+    pattern?: string;
+    /**
+     * Emitted when the input value changes
+     */
+    afInput: EventEmitter<{
+        value: string;
+    }>;
+    /**
+     * Emitted when the input loses focus
+     */
+    afBlur: EventEmitter<void>;
+    /**
+     * Emitted when the input gains focus
+     */
+    afFocus: EventEmitter<void>;
+    /**
+     * Emitted when the clear button is clicked
+     */
+    afClear: EventEmitter<void>;
+    /**
+     * Emitted when the info icon is clicked
+     */
+    afInfoClick: EventEmitter<void>;
+    private isFocused;
+    private isHovered;
+    private inputEl?;
+    private handleInput;
+    private handleFocus;
+    private handleBlur;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleClear;
+    private handleInfoClick;
+    render(): any;
+}

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

@@ -0,0 +1,34 @@
+/**
+ * A navigation card component for featured article content in mega-menu dropdowns.
+ * Displays an image with a gradient overlay and headline text.
+ *
+ * **Usage:**
+ * - Place in the `sidebar` slot of NavMenuNest
+ * - Provide imageSrc, heading, and href props
+ *
+ * **Hover behavior:**
+ * - Slight scale effect (1.02)
+ * - Headline underline
+ */
+export declare class AfNavCard {
+    /**
+     * The headline text displayed over the image
+     */
+    heading?: string;
+    /**
+     * URL to navigate to when clicked
+     */
+    href?: string;
+    /**
+     * Image source URL for the background
+     */
+    imageSrc?: string;
+    /**
+     * Alternative text for the image
+     */
+    imageAlt: string;
+    isHovered: boolean;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    render(): any;
+}

package/dist/types/components/af-nav-item/af-nav-item.d.ts

@@ -15,6 +15,12 @@ export declare class AfNavItem {
      * - '02': Lighter/more subtle styling
      */
     variant: '01' | '02';
+    /**
+     * Breakpoint variant for responsive styling
+     * - 'desktop': Desktop-specific styles
+     * - 'mobile': Mobile-specific styles (larger text, different spacing)
+     */
+    breakpoint: 'desktop' | 'mobile';
     /**
      * URL to navigate to when clicked
      */

package/dist/types/components/af-nav-menu/af-nav-menu.d.ts

@@ -0,0 +1,28 @@
+/**
+ * A grouped navigation menu component with a heading.
+ * Used in mega-menu dropdowns to group related navigation items.
+ */
+export declare class AfNavMenu {
+    /**
+     * The heading text displayed above the navigation items
+     */
+    heading?: string;
+    /**
+     * Breakpoint variant for responsive styling
+     * - 'desktop': Desktop-specific styles (right border, horizontal padding)
+     * - 'mobile': Mobile-specific styles (bottom border, vertical layout)
+     */
+    breakpoint: 'desktop' | 'mobile';
+    /**
+     * Whether to show the right border separator.
+     * When used inside NavMenuNest, borders are controlled by the parent.
+     * Set to true only when using NavMenu standalone.
+     */
+    showBorder: boolean;
+    /**
+     * Whether to display as a card with background color and rounded corners.
+     * Used for highlighted sidebar menus (e.g., solutions-alt variant).
+     */
+    cardStyle: boolean;
+    render(): any;
+}

package/dist/types/components/af-nav-menu-nest/af-nav-menu-nest.d.ts

@@ -0,0 +1,42 @@
+/**
+ * A mega-menu dropdown panel component.
+ * Acts as a container for NavMenu columns and optionally a sidebar.
+ * Used as the dropdown content for navbar items.
+ *
+ * **Slots:**
+ * - default: Place NavMenu components here - they will be displayed as columns
+ * - sidebar: Optional sidebar content (NavMenu, NavCard, or any content)
+ *
+ * **Example:**
+ * ```html
+ * <af-nav-menu-nest type="solutions" breakpoint="desktop">
+ *   <af-nav-menu heading="Industries">...</af-nav-menu>
+ *   <af-nav-menu heading="Use Cases">...</af-nav-menu>
+ *   <af-nav-menu heading="Documents">...</af-nav-menu>
+ *   <af-nav-menu slot="sidebar" heading="Resume Parser">...</af-nav-menu>
+ * </af-nav-menu-nest>
+ * ```
+ */
+export declare class AfNavMenuNest {
+    /**
+     * The type/variant of the mega-menu
+     * - 'solutions': Multi-column layout (3 columns + sidebar)
+     * - 'solutions-alt': Alternative solutions layout
+     * - 'resources': Multi-column layout with optional featured card
+     * - 'pricing': Simpler layout without sidebar
+     */
+    type: 'solutions' | 'solutions-alt' | 'resources' | 'pricing';
+    /**
+     * Breakpoint variant for responsive styling
+     * - 'desktop': Horizontal multi-column layout
+     * - 'mobile': Vertical stacked layout
+     */
+    breakpoint: 'desktop' | 'mobile';
+    /**
+     * Whether to show the heavier border on the last column (before sidebar).
+     * Set to `true` when sidebar has content, `false` when no sidebar.
+     * When `false`, the last column has no border.
+     */
+    showSidebarBorder: boolean;
+    render(): any;
+}

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

@@ -1,10 +1,40 @@
 /**
  * A full-width navigation bar component that provides the main site navigation.
  * Features a pill-shaped container with logo, navigation links, and action buttons.
- * Includes mobile hamburger menu.
+ * Includes mobile hamburger menu and support for mega-menu dropdowns.
+ *
+ * The logo slot can be used to provide a custom logo. If no logo is provided,
+ * the default Affinda logo will be displayed.
  */
 export declare class AfNavbar {
+    el: HTMLElement;
     mobileMenuOpen: boolean;
+    /** The currently open dropdown identifier (null if none open) */
+    activeDropdown: string | null;
+    /** Whether to show the default Affinda logo when no logo slot content is provided */
+    showDefaultLogo: boolean;
+    /** Theme for the spacer background - should match the section below the navbar */
+    theme?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay';
     private toggleMobileMenu;
+    /**
+     * Opens a dropdown by its identifier
+     */
+    private openDropdown;
+    /**
+     * Closes the currently open dropdown
+     */
+    private closeDropdown;
+    /**
+     * Toggles a dropdown by its identifier
+     */
+    private toggleDropdown;
+    /**
+     * Handle clicks outside the navbar to close dropdowns
+     */
+    handleDocumentClick(event: MouseEvent): void;
+    /**
+     * Handle escape key to close dropdowns
+     */
+    handleKeyDown(event: KeyboardEvent): void;
     render(): any;
 }

package/dist/types/components/af-number-badge/af-number-badge.d.ts

@@ -0,0 +1,29 @@
+export type NumberBadgeNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+export type NumberBadgeVariant = 'inCircle' | 'outlined';
+/**
+ * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.
+ * Perfect for numbered lists, step indicators, or ordered content.
+ *
+ * @example
+ * ```html
+ * <af-number-badge number="1" variant="inCircle" size="48"></af-number-badge>
+ * <af-number-badge number="5" variant="outlined" size="32"></af-number-badge>
+ * ```
+ */
+export declare class AfNumberBadge {
+    /**
+     * The number to display (1-10)
+     */
+    number: NumberBadgeNumber;
+    /**
+     * Visual variant of the badge
+     * - `inCircle` - Number in filled soft-clay circle
+     * - `outlined` - Number text only in mist-green
+     */
+    variant: NumberBadgeVariant;
+    /**
+     * Size of the badge in pixels
+     */
+    size: number;
+    render(): any;
+}

package/dist/types/components/af-progress-line/af-progress-line.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Progress Line atom component for displaying scroll or completion progress.
+ *
+ * Shows a horizontal bar with a filled portion indicating progress.
+ * Used primarily for carousel scroll indicators.
+ */
+export declare class AfProgressLine {
+    /**
+     * Progress value from 0 to 1 (0 = 0%, 1 = 100%).
+     */
+    progress: number;
+    /**
+     * Orientation of the progress line.
+     * Currently only horizontal is supported.
+     */
+    orientation: 'horizontal';
+    render(): any;
+}

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

@@ -0,0 +1,33 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Radio component for selecting a single option from a group.
+ *
+ * @slot - Radio label text
+ */
+export declare class AfRadio {
+    /**
+     * Whether the radio is checked
+     */
+    checked: boolean;
+    /**
+     * Whether the radio is disabled
+     */
+    disabled: boolean;
+    /**
+     * The name of the radio for form submission (radios with same name are grouped)
+     */
+    name?: string;
+    /**
+     * The value of the radio for form submission
+     */
+    value?: string;
+    /**
+     * Emitted when the radio checked state changes
+     */
+    afChange: EventEmitter<{
+        checked: boolean;
+        value?: string;
+    }>;
+    private handleChange;
+    render(): any;
+}

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

@@ -1,11 +1,12 @@
 /**
- * Section layout component for consistent spacing and backgrounds
+ * Section layout component for consistent spacing and backgrounds.
+ * Sets theme context for all child components via CSS custom properties.
  */
 export declare class AfSection {
     /** Padding variant */
     padding: 'tight' | 'default' | 'loose';
-    /** Background color */
-    background: 'white' | 'level1' | 'dark' | 'inkwell';
+    /** Theme - sets background color and provides theme context to children */
+    theme: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
     /** Whether to include a Container wrapper */
     container: boolean;
     render(): any;

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

@@ -0,0 +1,20 @@
+type Theme = 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
+/**
+ * Split Section component for layouts with two-tone backgrounds.
+ * Creates a vertical split with different themes for top and bottom halves.
+ * Useful for content that visually spans across two themed areas.
+ *
+ * Uses a CSS linear-gradient for the split background effect.
+ */
+export declare class AfSplitSection {
+    /** Theme for the top half of the section */
+    topTheme: Theme;
+    /** Theme for the bottom half of the section */
+    bottomTheme: Theme;
+    /** Padding variant */
+    padding: 'tight' | 'default' | 'loose';
+    /** Whether to include a Container wrapper */
+    container: boolean;
+    render(): any;
+}
+export {};

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

@@ -0,0 +1,32 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Switch component for toggling between on and off states.
+ *
+ * @slot - Switch label text
+ */
+export declare class AfSwitch {
+    /**
+     * Whether the switch is active (on)
+     */
+    active: boolean;
+    /**
+     * Whether the switch is disabled
+     */
+    disabled: boolean;
+    /**
+     * The name of the switch for form submission
+     */
+    name?: string;
+    /**
+     * The value of the switch for form submission
+     */
+    value?: string;
+    /**
+     * Emitted when the switch state changes
+     */
+    afChange: EventEmitter<{
+        active: boolean;
+    }>;
+    private handleChange;
+    render(): any;
+}

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

@@ -0,0 +1,61 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type TabShape = 'square' | 'pill';
+/**
+ * Tab component for use within a TabBar.
+ * Represents an individual selectable tab with support for icons and number badges.
+ *
+ * @slot icon - Optional icon to display before the label
+ * @slot number - Optional number badge to display
+ *
+ * @example
+ * ```html
+ * <af-tab label="Overview" active></af-tab>
+ * <af-tab label="Details">
+ *   <af-icon slot="icon" name="document"></af-icon>
+ * </af-tab>
+ * <af-tab label="Step 1">
+ *   <af-number-badge slot="number" number="1"></af-number-badge>
+ * </af-tab>
+ * ```
+ */
+export declare class AfTab {
+    /**
+     * The text label for the tab
+     */
+    label: string;
+    /**
+     * Whether the tab is currently active/selected
+     */
+    active: boolean;
+    /**
+     * Whether the tab is disabled
+     */
+    disabled: boolean;
+    /**
+     * Visual shape variant
+     * - `square` - Rectangular tab with bottom border indicator
+     * - `pill` - Rounded pill shape with background for active state
+     */
+    shape: TabShape;
+    /**
+     * Whether to show the icon slot
+     */
+    displayIcon: boolean;
+    /**
+     * Whether to show the number badge slot
+     */
+    displayNumber: boolean;
+    /**
+     * Unique value for the tab, used for programmatic selection
+     */
+    value?: string;
+    /**
+     * Emitted when the tab is clicked
+     */
+    afTabClick: EventEmitter<{
+        value?: string;
+    }>;
+    private handleClick;
+    private handleKeyDown;
+    render(): any;
+}

package/dist/types/components/af-tab-bar/af-tab-bar.d.ts

@@ -0,0 +1,43 @@
+export type TabBarShape = 'square' | 'pill';
+export type TabBarBreakpoint = 'mobile' | 'desktop';
+/**
+ * TabBar component that contains and manages a group of tabs.
+ * Provides horizontal layout, keyboard navigation, and consistent styling.
+ *
+ * @slot - Tab elements (af-tab)
+ *
+ * @example
+ * ```html
+ * <af-tab-bar shape="square" breakpoint="desktop">
+ *   <af-tab label="Overview" active value="overview"></af-tab>
+ *   <af-tab label="Details" value="details"></af-tab>
+ *   <af-tab label="Settings" value="settings"></af-tab>
+ * </af-tab-bar>
+ * ```
+ */
+export declare class AfTabBar {
+    el: HTMLElement;
+    /**
+     * Visual shape variant for all tabs
+     * - `square` - Rectangular tabs with bottom border indicator
+     * - `pill` - Rounded pill tabs with background for active state
+     */
+    shape: TabBarShape;
+    /**
+     * Responsive breakpoint mode
+     * - `mobile` - Compact layout with smaller padding
+     * - `desktop` - Larger layout with more generous spacing
+     */
+    breakpoint: TabBarBreakpoint;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    /**
+     * Sync shape and breakpoint props to child af-tab elements
+     */
+    private syncChildProps;
+    /**
+     * Handle keyboard navigation between tabs
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    render(): any;
+}

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

@@ -0,0 +1,33 @@
+export type TagSize = 'x-small' | 'small' | 'large';
+export type TagVariant = 'sand' | 'light';
+/**
+ * Tag displays a label in a styled container.
+ * Perfect for categorization, topics, or metadata display.
+ *
+ * @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>
+ * ```
+ */
+export declare class AfTag {
+    /**
+     * The size of the tag
+     * - `x-small` - Compact tag with minimal padding
+     * - `small` - Small tag with moderate padding
+     * - `large` - Large tag with generous padding
+     */
+    size: TagSize;
+    /**
+     * The visual variant of the tag
+     * - `sand` - Soft-clay/tan colored background (default)
+     * - `light` - Mist-green/light colored background
+     */
+    variant: TagVariant;
+    /**
+     * The URL to navigate to when the tag is clicked (makes the tag a link)
+     */
+    href?: string;
+    render(): any;
+}

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

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class AfTestimonial {
     /**
      * Background image URL for the testimonial card
@@ -19,5 +20,27 @@ export declare class AfTestimonial {
      * Link to full case study
      */
     readMoreLink?: string;
+    /**
+     * Whether to show built-in navigation buttons (used when in a carousel)
+     */
+    showNavigation: boolean;
+    /**
+     * Whether the previous button is enabled
+     */
+    hasPrev: boolean;
+    /**
+     * Whether the next button is enabled
+     */
+    hasNext: boolean;
+    /**
+     * Emitted when the previous button is clicked
+     */
+    navPrev: EventEmitter<void>;
+    /**
+     * Emitted when the next button is clicked
+     */
+    navNext: EventEmitter<void>;
+    private handlePrev;
+    private handleNext;
     render(): any;
 }

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

@@ -1,3 +1,11 @@
+/**
+ * TestimonialCarousel - Carousel for displaying multiple customer testimonials.
+ *
+ * Handles navigation between testimonials with progress indicator.
+ * Wrap in Section/Container for proper page layout and theming.
+ *
+ * @slot - Testimonial components to display in the carousel
+ */
 export declare class AfTestimonialCarousel {
     host: HTMLElement;
     currentIndex: number;
@@ -7,9 +15,18 @@ export declare class AfTestimonialCarousel {
     private observer;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    /**
+     * Listen for navigation events from testimonials
+     */
+    handleNavPrev(): void;
+    handleNavNext(): void;
     private detectTestimonials;
     private updateVisibleTestimonial;
     private goToPrevious;
     private goToNext;
+    /**
+     * Calculate progress value (0 to 1) based on current position
+     */
+    private getProgress;
     render(): any;
 }