@affinda/wc 0.1.0 → 0.2.0

package/dist/collection/components/af-hero/af-hero.css

@@ -0,0 +1,282 @@
+:host {
+  display: block;
+  position: relative;
+  width: 100%;
+  /* Image-lift custom property — consumers override per-page via inline
+     style or a page-level rule. The negative value pulls the photo's
+     crown above the hero top so it reads behind the floating navbar
+     pill. Matches the live Webflow stack (~-260px on .page-banner). */
+  --af-hero-image-lift: -260px;
+  /* Blob mask container size override — rarely needed; defaults to the
+     photo column's natural dimensions. */
+  --af-hero-image-min-height: 360px;
+}
+
+.hero__section {
+  position: relative;
+  overflow: hidden;
+}
+
+/* -----------------------------------------------------------------
+   Paperclip watermark slot (inkwell-centered only)
+   ----------------------------------------------------------------- */
+.hero__paperclip {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  pointer-events: none;
+  z-index: 0;
+  /* Default size — consumers can resize the slotted decoration via its
+     own width/height props. */
+  width: 655px;
+  height: 754px;
+}
+
+@media (max-width: 991px) {
+  .hero__paperclip {
+    width: 480px;
+    height: 552px;
+  }
+}
+
+@media (max-width: 767px) {
+  .hero__paperclip {
+    display: none;
+  }
+}
+
+/* -----------------------------------------------------------------
+   Inner wrapper — top/bottom padding
+   ----------------------------------------------------------------- */
+.hero__inner {
+  position: relative;
+  z-index: 1;
+  padding-bottom: 40px;
+}
+
+:host(.hero--pad-default) .hero__inner {
+  padding-top: 124px;
+}
+
+:host(.hero--pad-loose) .hero__inner {
+  padding-top: 164px;
+}
+
+/* Centered variant uses slightly tighter top padding to match the live
+   /platform hero (80px), since the lockup is typically tall. */
+:host(.hero--inkwell-centered.hero--pad-default) .hero__inner {
+  padding-top: 80px;
+}
+
+/* -----------------------------------------------------------------
+   Grid layout (photo + illustration variants)
+   ----------------------------------------------------------------- */
+.hero__grid {
+  display: grid;
+  grid-template-columns: 5fr 7fr;
+  gap: 40px;
+  align-items: center;
+}
+
+/* Illustration variants use a looser two-column split so the art
+   doesn't dominate. */
+:host(.hero--soft-clay-illustration) .hero__grid,
+:host(.hero--mist-green-illustration) .hero__grid {
+  grid-template-columns: 1fr auto;
+  gap: 48px;
+}
+
+.hero__copy {
+  /* Small inset pushes heading inward from the hard container edge —
+     matches the live .page-banner-text treatment. Only applied to
+     left-aligned variants. */
+  padding-left: 16px;
+}
+
+:host(.hero--inkwell-photo.hero--pad-loose) .hero__copy {
+  /* Mirrors ListingHero's `padding-bottom: 120px` — combined with
+     `align-items: center` on the grid, this shifts the heading visually
+     upward so the subtitle lines up near the image's vertical centre. */
+  padding-bottom: 120px;
+}
+
+:host(.hero--inkwell-centered) .hero__copy {
+  padding-left: 0;
+  text-align: center;
+}
+
+.hero__badge:not(:has(*)) {
+  display: none;
+}
+
+.hero__badge:has(*) {
+  margin-bottom: 16px;
+}
+
+.hero__copy ::slotted([slot='badge']) {
+  display: inline-block;
+}
+
+.hero__buttons {
+  margin-top: 32px;
+}
+
+.hero__buttons:empty {
+  display: none;
+}
+
+:host(.hero--inkwell-centered) .hero__buttons {
+  display: flex;
+  justify-content: center;
+}
+
+/* -----------------------------------------------------------------
+   Photo (inkwell-photo)
+   Blob-mask shape defined once as a CSS custom property so Stencil
+   doesn't duplicate the giant base64 URL for prefixed/unprefixed pairs.
+   ----------------------------------------------------------------- */
+:host {
+  --af-hero-blob-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');
+  --af-hero-blob-mask-mobile: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 768"><path fill="%23000" d="M1024 0H384A384 384 0 0 0 384 768H1024V0Z"/></svg>');
+}
+
+.hero__image {
+  min-height: var(--af-hero-image-min-height);
+  overflow: visible;
+  margin-top: var(--af-hero-image-lift);
+  position: relative;
+  z-index: 1;
+}
+
+.hero__image--masked ::slotted(img),
+.hero__image--masked ::slotted(picture img),
+.hero__image--masked ::slotted(.af-hero-image) {
+  display: block;
+  width: 100%;
+  height: auto;
+  -webkit-mask-image: var(--af-hero-blob-mask);
+  mask-image: var(--af-hero-blob-mask);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  mask-mode: alpha;
+}
+
+/* Fallback: some consumers slot a raw <img> wrapped in a container.
+   Descendant selector per repo convention. */
+.hero__image--masked img {
+  -webkit-mask-image: var(--af-hero-blob-mask);
+  mask-image: var(--af-hero-blob-mask);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  mask-mode: alpha;
+}
+
+/* -----------------------------------------------------------------
+   Illustration (inkwell/soft-clay/mist-green -illustration)
+   ----------------------------------------------------------------- */
+.hero__illustration {
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 432px;
+  line-height: 0;
+  justify-self: end;
+}
+
+.hero__illustration ::slotted(svg),
+.hero__illustration ::slotted(img) {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-radius: 16px;
+}
+
+:host(.hero--inkwell-illustration) .hero__illustration {
+  max-width: none;
+}
+
+/* -----------------------------------------------------------------
+   Logos-below overlap
+   Painted in the theme's background token so the strip cleanly overlaps
+   the bottom of the photo on the -photo variant. Empty = collapsed.
+   ----------------------------------------------------------------- */
+.hero__logos {
+  position: relative;
+  z-index: 2;
+}
+
+.hero__logos:not(:has(*)) {
+  display: none;
+}
+
+/* Photo variant pulls the logos row up so it covers the image's bottom
+   edge — matches the ListingHero `.listing-hero__footer` treatment. */
+:host(.hero--inkwell-photo) .hero__logos:has(*) {
+  margin-top: -240px;
+  padding-top: 48px;
+  padding-bottom: 48px;
+  background: var(--af-background-base, var(--colour-brand-inkwell, #14343b));
+  border-top: 1px solid
+    var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45));
+}
+
+/* -----------------------------------------------------------------
+   Mobile / tablet
+   ----------------------------------------------------------------- */
+@media (max-width: 991px) {
+  :host(.hero--pad-default) .hero__inner,
+  :host(.hero--pad-loose) .hero__inner {
+    padding-top: 112px;
+  }
+
+  .hero__grid {
+    grid-template-columns: 1fr;
+    gap: 32px;
+  }
+
+  :host(.hero--soft-clay-illustration) .hero__grid,
+  :host(.hero--mist-green-illustration) .hero__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .hero__copy {
+    padding-left: 0;
+    padding-bottom: 0;
+  }
+
+  .hero__illustration {
+    max-width: 360px;
+    margin-inline: auto;
+    justify-self: center;
+  }
+
+  /* Photo on mobile: swap the desktop blob mask for the softer D-curve
+     mobile variant, and drop the lift so the image doesn't crash into
+     the navbar. */
+  .hero__image {
+    margin-top: 0;
+    min-height: auto;
+  }
+
+  :host(.hero--inkwell-photo) .hero__image--masked ::slotted(img),
+  :host(.hero--inkwell-photo) .hero__image--masked img {
+    -webkit-mask-image: var(--af-hero-blob-mask-mobile);
+    mask-image: var(--af-hero-blob-mask-mobile);
+  }
+
+  :host(.hero--inkwell-photo) .hero__logos:has(*) {
+    margin-top: 24px;
+    padding-top: 32px;
+    padding-bottom: 32px;
+    background: transparent;
+    border-top: none;
+  }
+}

package/dist/collection/components/af-hero/af-hero.js

@@ -0,0 +1,314 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Blob-shape mask used to clip hero photos on the inkwell-photo variant.
+ * Extracted from the 7+ hand-rolled copies in the website so the path is
+ * defined exactly once. Intrinsic viewBox: 741 × 940.
+ */
+const BLOB_MASK_URL = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=')";
+/**
+ * Mobile blob shape — simpler D-curve matching the live mobile banner.
+ */
+const BLOB_MASK_URL_MOBILE = "url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>')";
+/**
+ * Map each variant to its underlying section theme token. Keeps one source
+ * of truth instead of having consumers spell the theme twice.
+ */
+const VARIANT_THEMES = {
+    'inkwell-photo': 'inkwell',
+    'inkwell-illustration': 'inkwell',
+    'inkwell-centered': 'inkwell',
+    'soft-clay-illustration': 'soft-clay',
+    'mist-green-illustration': 'mist-green',
+};
+/**
+ * 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 class AfHero {
+    constructor() {
+        /** Layout / theme preset. See variant docs in the component header. */
+        this.variant = 'inkwell-photo';
+        /** Heading text (use the default slot for richer markup). */
+        this.heading = '';
+        /** Description text (use the `description` slot for richer markup). */
+        this.description = '';
+        /**
+         * 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).
+         */
+        this.topPad = 'default';
+        /** Typography lockup max-width (px). Defaults to 620, matching the live site. */
+        this.maxWidth = 620;
+        /**
+         * 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.
+         */
+        this.maskImage = true;
+    }
+    get resolvedFloatNavbar() {
+        if (typeof this.floatNavbar === 'boolean')
+            return this.floatNavbar;
+        return (this.variant === 'inkwell-photo' ||
+            this.variant === 'inkwell-illustration' ||
+            this.variant === 'inkwell-centered');
+    }
+    get theme() {
+        return VARIANT_THEMES[this.variant];
+    }
+    connectedCallback() {
+        if (this.resolvedFloatNavbar && typeof document !== 'undefined') {
+            document.body.setAttribute('data-af-hero-float-navbar', 'true');
+        }
+    }
+    disconnectedCallback() {
+        if (typeof document !== 'undefined' && !document.querySelector('af-hero')) {
+            document.body.removeAttribute('data-af-hero-float-navbar');
+        }
+    }
+    renderCopy() {
+        const alignment = this.variant === 'inkwell-centered' ? 'center' : 'left';
+        return (h("div", { class: "hero__copy" }, h("div", { class: "hero__badge" }, h("slot", { name: "badge" })), h("af-typography-lockup", { "heading-size": "1", "text-alignment": alignment, "max-width": String(this.maxWidth) }, this.heading ? h("h1", null, this.heading) : h("slot", null), this.description ? (h("span", { slot: "description" }, this.description)) : (h("slot", { name: "description", slot: "description" }))), h("div", { class: "hero__buttons" }, h("slot", { name: "buttons" }))));
+    }
+    renderPhoto() {
+        return (h("div", { class: {
+                hero__image: true,
+                'hero__image--masked': this.maskImage,
+            } }, h("slot", { name: "image" })));
+    }
+    renderIllustration() {
+        return (h("div", { class: "hero__illustration" }, h("slot", { name: "illustration" })));
+    }
+    render() {
+        const v = this.variant;
+        const centered = v === 'inkwell-centered';
+        const hasImage = v === 'inkwell-photo';
+        const hasIllustration = v === 'inkwell-illustration' ||
+            v === 'soft-clay-illustration' ||
+            v === 'mist-green-illustration';
+        return (h(Host, { key: '6e8e522c6593a79fbb93eaf421c6b3f41a2072f5', class: {
+                [`hero--${v}`]: true,
+                [`hero--pad-${this.topPad}`]: true,
+                [`hero--theme-${this.theme}`]: true,
+                'hero--float-navbar': this.resolvedFloatNavbar,
+            } }, h("af-section", { key: 'dc6181658d53a8c7166d3f090df9666d35310338', theme: this.theme, padding: "none", container: false, class: "hero__section" }, centered && (h("div", { key: 'b8357ea1cc08dafa3a3f5e4cd8c545bef1e3df1c', class: "hero__paperclip", "aria-hidden": "true" }, h("slot", { key: 'da4b0dcb83e6e8c09b9962ba7d0c09e02f6721c5', name: "paperclip" }))), h("af-container", { key: '0dbffc963a56e53ed7206b59cccfd74f5bd792ee', class: "hero__inner" }, centered ? (this.renderCopy()) : (h("div", { class: "hero__grid" }, this.renderCopy(), hasImage && this.renderPhoto(), hasIllustration && this.renderIllustration()))), h("div", { key: 'd4316dbc5ba954ce2a52d73dfb73575b77f394db', class: "hero__logos" }, h("slot", { key: 'd9ff55a2c238d5db322aef90cb28006d91f7dffc', name: "logos-below" })))));
+    }
+    static get is() { return "af-hero"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-hero.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-hero.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeroVariant",
+                    "resolved": "\"inkwell-centered\" | \"inkwell-illustration\" | \"inkwell-photo\" | \"mist-green-illustration\" | \"soft-clay-illustration\"",
+                    "references": {
+                        "HeroVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/affinda-ui/affinda-ui/packages/wc/src/components/af-hero/af-hero.tsx",
+                            "id": "src/components/af-hero/af-hero.tsx::HeroVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout / theme preset. See variant docs in the component header."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'inkwell-photo'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading text (use the default slot for richer markup)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Description text (use the `description` slot for richer markup)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
+            "floatNavbar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Float the site header over the hero and paint the navbar-spacer\ntransparent so the hero background flows to the top of the viewport.\nDefaults to true for the three inkwell variants, false for the\nsoft-clay / mist-green illustration variants (whose consumers don't\nalways want a full-bleed crown)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "float-navbar"
+            },
+            "topPad": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeroTopPad",
+                    "resolved": "\"default\" | \"loose\"",
+                    "references": {
+                        "HeroTopPad": {
+                            "location": "local",
+                            "path": "/home/runner/work/affinda-ui/affinda-ui/packages/wc/src/components/af-hero/af-hero.tsx",
+                            "id": "src/components/af-hero/af-hero.tsx::HeroTopPad"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Top padding preset. `default` = 124px (matches IndustryHero /\nIllustrationHero). `loose` = 164px (matches ListingHero \u2014 gives the\nimage a touch more breathing room above the lockup on archive pages)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "top-pad",
+                "defaultValue": "'default'"
+            },
+            "maxWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Typography lockup max-width (px). Defaults to 620, matching the live site."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width",
+                "defaultValue": "620"
+            },
+            "maskImage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to apply the blob mask to the slotted `image`. Defaults to\n`true` for `inkwell-photo`. Set `false` if you want to slot in a\npre-masked raster or a custom wrapper."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mask-image",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=af-hero.js.map

package/dist/collection/components/af-hero/af-hero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-hero.js","sourceRoot":"","sources":["../../../src/components/af-hero/af-hero.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Prop, Element } from '@stencil/core';\n\nexport type HeroVariant =\n  | 'inkwell-photo'\n  | 'inkwell-illustration'\n  | 'inkwell-centered'\n  | 'soft-clay-illustration'\n  | 'mist-green-illustration';\n\nexport type HeroTopPad = 'default' | 'loose';\n\n/**\n * Blob-shape mask used to clip hero photos on the inkwell-photo variant.\n * Extracted from the 7+ hand-rolled copies in the website so the path is\n * defined exactly once. Intrinsic viewBox: 741 × 940.\n */\nconst BLOB_MASK_URL =\n  \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=')\";\n\n/**\n * Mobile blob shape — simpler D-curve matching the live mobile banner.\n */\nconst BLOB_MASK_URL_MOBILE =\n  \"url('data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 1024 768\\\"><path fill=\\\"%23000\\\" d=\\\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\\\"/></svg>')\";\n\n/**\n * Map each variant to its underlying section theme token. Keeps one source\n * of truth instead of having consumers spell the theme twice.\n */\nconst VARIANT_THEMES: Record<HeroVariant, 'inkwell' | 'soft-clay' | 'mist-green'> = {\n  'inkwell-photo': 'inkwell',\n  'inkwell-illustration': 'inkwell',\n  'inkwell-centered': 'inkwell',\n  'soft-clay-illustration': 'soft-clay',\n  'mist-green-illustration': 'mist-green',\n};\n\n/**\n * Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations\n * the Affinda marketing site (and sibling apps) currently ship. Covers five\n * canonical patterns via the `variant` prop:\n *\n * - `inkwell-photo` — inkwell background, blob-masked photo on the right.\n *   Use for: listing / archive pages (blog, case-studies, whitepapers,\n *   value-creation, about-us) and industry landing pages that carry a\n *   photograph instead of an illustration.\n * - `inkwell-illustration` — inkwell background, illustration on the right.\n *   Use for: industry landing pages, /industries, /integrations, /platform\n *   with bespoke art.\n * - `inkwell-centered` — inkwell background, centred typography lockup.\n *   Slot `<af-paperclip-decoration />` into the `paperclip` slot for the\n *   watermark treatment. Use for: `/`, `/au`, `/platform`.\n * - `soft-clay-illustration` — soft-clay background, illustration on the\n *   right. Use for: /news, /industries overview, /security, /compare.\n * - `mist-green-illustration` — same layout as soft-clay-illustration but on\n *   the mist-green theme. Reserved for future pages.\n *\n * ## Slots\n *\n * - default — heading content (use when richer markup than the `heading`\n *   prop can express is needed; e.g. coloured spans or line breaks).\n * - `description` — supporting copy under the heading.\n * - `badge` — optional pre-heading label (pill, version tag).\n * - `buttons` — hero CTAs (usually an `<af-button-group>`).\n * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in\n *   the blob mask automatically.\n * - `illustration` — the illustration SVG for `-illustration` variants.\n * - `paperclip` — watermark for `inkwell-centered`. Consumers typically\n *   slot `<af-paperclip-decoration />` here.\n * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).\n *   Painted with the theme's background so it cleanly overlaps the image's\n *   lower edge on the photo variant.\n *\n * ## Float-navbar handling\n *\n * When `floatNavbar` is true (the default for the inkwell variants) the\n * component sets `data-af-hero-float-navbar=\"true\"` on `<body>` via a\n * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies\n * the `body > header { position: absolute }` / `main { padding-top: 0 }`\n * / navbar-spacer-transparent treatment. Consumers already import\n * `@affinda/css` so no extra import is required. The rule deactivates\n * when the hero is removed from the DOM.\n *\n * ## Image lift\n *\n * The `inkwell-photo` variant renders the photo column with\n * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by\n * setting `--af-hero-image-lift` on the `<af-hero>` element.\n */\n@Component({\n  tag: 'af-hero',\n  styleUrl: 'af-hero.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfHero {\n  @Element() el!: HTMLElement;\n\n  /** Layout / theme preset. See variant docs in the component header. */\n  @Prop({ reflect: true }) variant: HeroVariant = 'inkwell-photo';\n\n  /** Heading text (use the default slot for richer markup). */\n  @Prop() heading: string = '';\n\n  /** Description text (use the `description` slot for richer markup). */\n  @Prop() description: string = '';\n\n  /**\n   * Float the site header over the hero and paint the navbar-spacer\n   * transparent so the hero background flows to the top of the viewport.\n   * Defaults to true for the three inkwell variants, false for the\n   * soft-clay / mist-green illustration variants (whose consumers don't\n   * always want a full-bleed crown).\n   */\n  @Prop({ reflect: true }) floatNavbar?: boolean;\n\n  /**\n   * Top padding preset. `default` = 124px (matches IndustryHero /\n   * IllustrationHero). `loose` = 164px (matches ListingHero — gives the\n   * image a touch more breathing room above the lockup on archive pages).\n   */\n  @Prop() topPad: HeroTopPad = 'default';\n\n  /** Typography lockup max-width (px). Defaults to 620, matching the live site. */\n  @Prop() maxWidth: number = 620;\n\n  /**\n   * Whether to apply the blob mask to the slotted `image`. Defaults to\n   * `true` for `inkwell-photo`. Set `false` if you want to slot in a\n   * pre-masked raster or a custom wrapper.\n   */\n  @Prop() maskImage: boolean = true;\n\n  private get resolvedFloatNavbar(): boolean {\n    if (typeof this.floatNavbar === 'boolean') return this.floatNavbar;\n    return (\n      this.variant === 'inkwell-photo' ||\n      this.variant === 'inkwell-illustration' ||\n      this.variant === 'inkwell-centered'\n    );\n  }\n\n  private get theme() {\n    return VARIANT_THEMES[this.variant];\n  }\n\n  connectedCallback() {\n    if (this.resolvedFloatNavbar && typeof document !== 'undefined') {\n      document.body.setAttribute('data-af-hero-float-navbar', 'true');\n    }\n  }\n\n  disconnectedCallback() {\n    if (typeof document !== 'undefined' && !document.querySelector('af-hero')) {\n      document.body.removeAttribute('data-af-hero-float-navbar');\n    }\n  }\n\n  private renderCopy() {\n    const alignment = this.variant === 'inkwell-centered' ? 'center' : 'left';\n    return (\n      <div class=\"hero__copy\">\n        <div class=\"hero__badge\">\n          <slot name=\"badge\"></slot>\n        </div>\n        <af-typography-lockup\n          heading-size=\"1\"\n          text-alignment={alignment}\n          max-width={String(this.maxWidth)}\n        >\n          {this.heading ? <h1>{this.heading}</h1> : <slot></slot>}\n          {this.description ? (\n            <span slot=\"description\">{this.description}</span>\n          ) : (\n            <slot name=\"description\" slot=\"description\"></slot>\n          )}\n        </af-typography-lockup>\n        <div class=\"hero__buttons\">\n          <slot name=\"buttons\"></slot>\n        </div>\n      </div>\n    );\n  }\n\n  private renderPhoto() {\n    return (\n      <div\n        class={{\n          hero__image: true,\n          'hero__image--masked': this.maskImage,\n        }}\n      >\n        <slot name=\"image\"></slot>\n      </div>\n    );\n  }\n\n  private renderIllustration() {\n    return (\n      <div class=\"hero__illustration\">\n        <slot name=\"illustration\"></slot>\n      </div>\n    );\n  }\n\n  render() {\n    const v = this.variant;\n    const centered = v === 'inkwell-centered';\n    const hasImage = v === 'inkwell-photo';\n    const hasIllustration =\n      v === 'inkwell-illustration' ||\n      v === 'soft-clay-illustration' ||\n      v === 'mist-green-illustration';\n\n    return (\n      <Host\n        class={{\n          [`hero--${v}`]: true,\n          [`hero--pad-${this.topPad}`]: true,\n          [`hero--theme-${this.theme}`]: true,\n          'hero--float-navbar': this.resolvedFloatNavbar,\n        }}\n      >\n        <af-section\n          theme={this.theme}\n          padding=\"none\"\n          container={false}\n          class=\"hero__section\"\n        >\n          {centered && (\n            <div class=\"hero__paperclip\" aria-hidden=\"true\">\n              <slot name=\"paperclip\"></slot>\n            </div>\n          )}\n          <af-container class=\"hero__inner\">\n            {centered ? (\n              this.renderCopy()\n            ) : (\n              <div class=\"hero__grid\">\n                {this.renderCopy()}\n                {hasImage && this.renderPhoto()}\n                {hasIllustration && this.renderIllustration()}\n              </div>\n            )}\n          </af-container>\n          <div class=\"hero__logos\">\n            <slot name=\"logos-below\"></slot>\n          </div>\n        </af-section>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-icon-box/af-icon-box.js

@@ -27,7 +27,7 @@ export class AfIconBox {
             [`icon-box--size-${this.size}`]: true,
         };
         const iconSize = this.size === 'small' ? 20 : this.size === 'large' ? 48 : 40;
-        return (h(Host, { key: 'e270fbfc75794a1bc2fce141cde5e6295d13c80c' }, h("div", { key: '3533c3e5afe2aaf1ee0227ffe9d37323b954753f', class: containerClasses }, h("af-icon", { key: 'e692e0110fb1233ced5d29f7b8f612c0ab89e058', name: this.icon, size: iconSize }))));
+        return (h(Host, { key: '59cf379ff62d3a5ed7fd7398f240976a023d1f8a' }, h("div", { key: '9fc4e502df8da3cf2112702cd2216a8c7a03a21f', class: containerClasses }, h("af-icon", { key: '8bc89de5589f531829a8377862c7b1bda4c7ce60', name: this.icon, size: iconSize }))));
     }
     static get is() { return "af-icon-box"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-icon-text/af-icon-text.js

@@ -43,7 +43,7 @@ export class AfIconText {
             'icon-text': true,
             [`icon-text--${this.orientation}`]: true,
         };
-        return (h(Host, { key: '5ee5ddd91804507b0e4029adeee9eebb687448d9' }, h("div", { key: '5c00e4451c12aeaf924c2d9dff3ad85cb5555813', class: containerClasses }, h("af-icon-box", { key: 'd375fa1087651f86fd778744c276bd92e387b297', icon: this.icon, size: this.iconSize, class: "icon-text__icon" }), h("af-typography-lockup", { key: '2be428ff1b3210972248ef741086d96eb6829cb9', headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "icon-text__lockup" }, h("slot", { key: '0da48d34ee2d1ab77c2aac80daffdbce4b2774b1' }), h("span", { key: '140db3a089b16211db54b67b786a90795dbe3d8a', slot: "description" }, h("slot", { key: '37d6b87dc348b95c5178e9a04e902f04664a0feb', name: "description" })), h("span", { key: '10031a47ef045d9ad95cb1bb90289fa1d599bc35', slot: "buttons" }, h("slot", { key: 'decf43947df87a58f42d10ba5025e9c6e1149ca2', name: "buttons" }))))));
+        return (h(Host, { key: '439c52c428eb8bdd4a1d89143a3e1f3b1f1ae272' }, h("div", { key: 'ff0edf1e55f225abc3a31e928d08388cae6209e2', class: containerClasses }, h("af-icon-box", { key: '8a88ed7babd257ce508c90139b3d431b80aa9d32', icon: this.icon, size: this.iconSize, class: "icon-text__icon" }), h("af-typography-lockup", { key: 'b1d4722558f9f27daccfeb7e5efe954f0af3ece0', headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "icon-text__lockup" }, h("slot", { key: '02ab65533f8d40c24b46082271b06c7acac914db' }), h("span", { key: '3d0556c8b0f5b3d262c44efcb271541d74f46535', slot: "description" }, h("slot", { key: '155f5bfba6ac9a9e58ba3b4bec1d736b995c327d', name: "description" })), h("span", { key: '8fb65696a03bed3776953fc1b51c077b12030837', slot: "buttons" }, h("slot", { key: 'bc30a8813ec47e8a265282f841e30bbabfe1f06f', name: "buttons" }))))));
     }
     static get is() { return "af-icon-text"; }
     static get encapsulation() { return "scoped"; }