npm - @affinda/wc - Versions diffs - 0.1.0 → 0.2.0 - Mend

@affinda/wc 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (470) hide show

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

@@ -1,3 +1,4 @@
+import type { Theme } from '../../types';
 /**
  * Feature Card molecule component that combines a card with an image.
  *
@@ -17,7 +18,7 @@ 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';
+    theme?: Theme;
     /**
      * Layout mode for the card.
      * - 'standard': Theme background with text at top and image at bottom

package/dist/types/components/af-grid/af-grid.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-type Gap = '1' | '2' | '3' | '4' | '5' | '6' | '8';
+import type { Gap } from '../../types';
 type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 12;
 type Align = 'start' | 'center' | 'end' | 'stretch';
 /**

package/dist/types/components/af-hero/af-hero.d.ts ADDED Viewed

@@ -0,0 +1,93 @@
+export type HeroVariant = 'inkwell-photo' | 'inkwell-illustration' | 'inkwell-centered' | 'soft-clay-illustration' | 'mist-green-illustration';
+export type HeroTopPad = 'default' | 'loose';
+/**
+ * Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations
+ * the Affinda marketing site (and sibling apps) currently ship. Covers five
+ * canonical patterns via the `variant` prop:
+ *
+ * - `inkwell-photo` — inkwell background, blob-masked photo on the right.
+ *   Use for: listing / archive pages (blog, case-studies, whitepapers,
+ *   value-creation, about-us) and industry landing pages that carry a
+ *   photograph instead of an illustration.
+ * - `inkwell-illustration` — inkwell background, illustration on the right.
+ *   Use for: industry landing pages, /industries, /integrations, /platform
+ *   with bespoke art.
+ * - `inkwell-centered` — inkwell background, centred typography lockup.
+ *   Slot `<af-paperclip-decoration />` into the `paperclip` slot for the
+ *   watermark treatment. Use for: `/`, `/au`, `/platform`.
+ * - `soft-clay-illustration` — soft-clay background, illustration on the
+ *   right. Use for: /news, /industries overview, /security, /compare.
+ * - `mist-green-illustration` — same layout as soft-clay-illustration but on
+ *   the mist-green theme. Reserved for future pages.
+ *
+ * ## Slots
+ *
+ * - default — heading content (use when richer markup than the `heading`
+ *   prop can express is needed; e.g. coloured spans or line breaks).
+ * - `description` — supporting copy under the heading.
+ * - `badge` — optional pre-heading label (pill, version tag).
+ * - `buttons` — hero CTAs (usually an `<af-button-group>`).
+ * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in
+ *   the blob mask automatically.
+ * - `illustration` — the illustration SVG for `-illustration` variants.
+ * - `paperclip` — watermark for `inkwell-centered`. Consumers typically
+ *   slot `<af-paperclip-decoration />` here.
+ * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).
+ *   Painted with the theme's background so it cleanly overlaps the image's
+ *   lower edge on the photo variant.
+ *
+ * ## Float-navbar handling
+ *
+ * When `floatNavbar` is true (the default for the inkwell variants) the
+ * component sets `data-af-hero-float-navbar="true"` on `<body>` via a
+ * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies
+ * the `body > header { position: absolute }` / `main { padding-top: 0 }`
+ * / navbar-spacer-transparent treatment. Consumers already import
+ * `@affinda/css` so no extra import is required. The rule deactivates
+ * when the hero is removed from the DOM.
+ *
+ * ## Image lift
+ *
+ * The `inkwell-photo` variant renders the photo column with
+ * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by
+ * setting `--af-hero-image-lift` on the `<af-hero>` element.
+ */
+export declare class AfHero {
+    el: HTMLElement;
+    /** Layout / theme preset. See variant docs in the component header. */
+    variant: HeroVariant;
+    /** Heading text (use the default slot for richer markup). */
+    heading: string;
+    /** Description text (use the `description` slot for richer markup). */
+    description: string;
+    /**
+     * Float the site header over the hero and paint the navbar-spacer
+     * transparent so the hero background flows to the top of the viewport.
+     * Defaults to true for the three inkwell variants, false for the
+     * soft-clay / mist-green illustration variants (whose consumers don't
+     * always want a full-bleed crown).
+     */
+    floatNavbar?: boolean;
+    /**
+     * Top padding preset. `default` = 124px (matches IndustryHero /
+     * IllustrationHero). `loose` = 164px (matches ListingHero — gives the
+     * image a touch more breathing room above the lockup on archive pages).
+     */
+    topPad: HeroTopPad;
+    /** Typography lockup max-width (px). Defaults to 620, matching the live site. */
+    maxWidth: number;
+    /**
+     * Whether to apply the blob mask to the slotted `image`. Defaults to
+     * `true` for `inkwell-photo`. Set `false` if you want to slot in a
+     * pre-masked raster or a custom wrapper.
+     */
+    maskImage: boolean;
+    private get resolvedFloatNavbar();
+    private get theme();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private renderCopy;
+    private renderPhoto;
+    private renderIllustration;
+    render(): any;
+}

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

@@ -1,3 +1,4 @@
+import type { Theme } from '../../types';
 /**
  * Illustrated Card molecule component that combines a card with an illustration.
  *
@@ -16,7 +17,7 @@ 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';
+    theme?: Theme;
     /**
      * Responsive breakpoint for typography sizing.
      */

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

@@ -1,4 +1,4 @@
-type BannerTheme = 'white-ivory' | 'mist-green' | 'soft-clay' | 'inkwell';
+import type { Theme } from '../../types';
 /**
  * In-page banner component for call-to-action content.
  *
@@ -35,7 +35,7 @@ type BannerTheme = 'white-ivory' | 'mist-green' | 'soft-clay' | 'inkwell';
  */
 export declare class AfInPageBanner {
     /** Theme - sets the banner background color and typography colors */
-    theme: BannerTheme;
+    theme: Theme;
     /** Banner heading */
     heading: string;
     /** Banner description */
@@ -63,4 +63,3 @@ export declare class AfInPageBanner {
     private renderWaveOverlay;
     render(): any;
 }
-export {};

package/dist/types/components/af-inline/af-inline.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-type Gap = '1' | '2' | '3' | '4' | '5' | '6' | '8';
+import type { Gap } from '../../types';
 type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
 type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
 /**

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

@@ -1,3 +1,4 @@
+import type { Theme } from '../../types';
 /**
  * A full-width navigation bar component that provides the main site navigation.
  * Features a pill-shaped container with logo, navigation links, and action buttons.
@@ -26,7 +27,7 @@ export declare class AfNavbar {
     /** 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';
+    theme?: Theme;
     /** Force mobile layout regardless of viewport size (useful for testing/stories) */
     forceMobile: boolean;
     private toggleMobileMenu;

package/dist/types/components/af-numbered-stepper/af-numbered-stepper.d.ts ADDED Viewed

@@ -0,0 +1,38 @@
+/**
+ * Numbered stepper — filled soft-clay circle badges (1/2/3) paired with a
+ * heading + body description per step. Sibling to `af-stepper` (which uses
+ * outlined badges on a single spine connector); the numbered variant uses
+ * filled badges with per-step connector segments, matching the Webflow
+ * "How it works" marketing pattern.
+ *
+ * Renders children `af-numbered-stepper-item` elements horizontally on
+ * desktop (auto-stacks on mobile) or vertically when `orientation="vertical"`.
+ * The parent auto-assigns badge numbers based on DOM order, so consumers
+ * don't hand-number the steps.
+ *
+ * Headings use the shared `heading-size="card"` scale from
+ * `af-typography-lockup` (22/20px) — no bespoke font-size tokens.
+ *
+ * @example
+ * ```html
+ * <af-numbered-stepper>
+ *   <af-numbered-stepper-item>
+ *     <h3 slot="heading">Connect your ATS</h3>
+ *     <p slot="body">OAuth-based hook into the tools you already use.</p>
+ *   </af-numbered-stepper-item>
+ *   <af-numbered-stepper-item>...</af-numbered-stepper-item>
+ *   <af-numbered-stepper-item>...</af-numbered-stepper-item>
+ * </af-numbered-stepper>
+ * ```
+ *
+ * @slot - `af-numbered-stepper-item` elements.
+ */
+export declare class AfNumberedStepper {
+    el: HTMLElement;
+    /** Layout orientation. Horizontal auto-stacks to vertical on mobile. */
+    orientation: 'horizontal' | 'vertical';
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
+    private assignIndices;
+    render(): any;
+}

package/dist/types/components/af-numbered-stepper-item/af-numbered-stepper-item.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+/**
+ * A single step within an `af-numbered-stepper`. Renders a filled soft-clay
+ * circle badge (via `af-number-badge`) alongside a heading + body lockup.
+ *
+ * The parent `af-numbered-stepper` auto-assigns the `index` prop based on
+ * DOM order. Pass `index` explicitly to override.
+ *
+ * Heading scale is the shared `card` variant from `af-typography-lockup`
+ * (22/20px) — the same ladder step used by diff-card, related-card, and
+ * other card-title uses across the design system.
+ *
+ * @slot heading - Step title (h3 or h4 recommended for semantics).
+ * @slot body - Step description paragraph(s).
+ */
+export declare class AfNumberedStepperItem {
+    /**
+     * Step number shown in the badge. Auto-assigned by the parent stepper if
+     * not explicitly set.
+     */
+    index: number;
+    render(): any;
+}

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

@@ -1,12 +1,13 @@
+import type { Padding, Theme } from '../../types';
 /**
  * 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: 'none' | 'tight' | 'default' | 'loose';
+    padding: Padding;
     /** Theme - sets background color and provides theme context to children */
-    theme: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
+    theme: Theme;
     /** Whether to include a Container wrapper */
     container: boolean;
     render(): any;

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

@@ -1,4 +1,4 @@
-type Theme = 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
+import type { Padding, Theme } from '../../types';
 /**
  * Split Section component for layouts with two-tone backgrounds.
  * Creates a vertical split with different themes for top and bottom halves.
@@ -12,9 +12,8 @@ export declare class AfSplitSection {
     /** Theme for the bottom half of the section */
     bottomTheme: Theme;
     /** Padding variant */
-    padding: 'none' | 'tight' | 'default' | 'loose';
+    padding: Padding;
     /** Whether to include a Container wrapper */
     container: boolean;
     render(): any;
 }
-export {};

package/dist/types/components/af-stack/af-stack.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-type Gap = '1' | '2' | '3' | '4' | '5' | '6' | '8';
+import type { Gap } from '../../types';
 type Direction = 'vertical' | 'horizontal';
 type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
 type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';

package/dist/types/components/af-stat/af-stat.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+/**
+ * Individual stat — a large value (e.g. "1B+") paired with a descriptive label.
+ *
+ * Intended as a slotted child of `af-stats-row`, but renders standalone too.
+ * Colour is inherited from the ancestor theme context (`af-section` /
+ * `af-card` / `af-theme-override`) via the `--af-typography-*` tokens that
+ * `af-heading` and `af-text` already consume — no theme prop needed here.
+ */
+export declare class AfStat {
+    /** The statistic headline value (e.g. "1B+", "95%", "10+"). */
+    value: string;
+    /** Description / caption rendered beneath the value. */
+    label: string;
+    render(): any;
+}

package/dist/types/components/af-stats-row/af-stats-row.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+/**
+ * Layout container for a horizontal row of `af-stat` children.
+ *
+ * Flex row that wraps to a grid on narrow viewports. Uses `scoped: true`
+ * so slotted `<af-stat>` children stay in the light DOM and inherit the
+ * ancestor theme (`af-section`) via the cascaded `.theme-*` class.
+ *
+ * Intentionally has **no `theme` prop** — a stats row is always flush
+ * against its section background, so a local theme would fight the
+ * ancestor. If you need a different background for the row, wrap it in
+ * its own `af-section` or `af-theme-override`.
+ *
+ * @slot - `af-stat` elements (typically 3–4 for a balanced row).
+ */
+export declare class AfStatsRow {
+    render(): any;
+}

package/dist/types/components/af-theme-override/af-theme-override.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import type { Theme } from '../../types';
 /**
  * Theme Override utility component.
  * Wraps content and applies an explicit theme, overriding any inherited theme
@@ -13,6 +14,6 @@ export declare class AfThemeOverride {
      * The theme to apply to child components.
      * Overrides any inherited theme from parent containers.
      */
-    theme: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
+    theme: Theme;
     render(): any;
 }

package/dist/types/components/af-typography-lockup/af-typography-lockup.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import type { HeadingSize } from '../../types';
 type TextAlign = 'left' | 'center' | 'right' | 'justify';
 /**
  * Marketing-style composition of heading + description + buttons with
@@ -34,7 +35,7 @@ export declare class AfTypographyLockup {
      * document outline (see component docblock). The `card` variant sits
      * between 4 and 5 at 22/20px and is meant for card titles.
      */
-    headingSize: 1 | 2 | 3 | 4 | 5 | 'card';
+    headingSize: HeadingSize;
     /**
      * The breakpoint for responsive typography
      */