@affinda/wc 0.0.6 → 0.0.8

package/dist/cjs/index.cjs.js

@@ -8,7 +8,7 @@ var afButton_entry = require('./af-button.cjs.entry.js');
 var afIconButton_entry = require('./af-icon-button.cjs.entry.js');
 var afButtonGroup_entry = require('./af-button-group.cjs.entry.js');
 var afTypographyLockup_entry = require('./af-typography-lockup.cjs.entry.js');
-require('./index-1GcSSOS3.js');
+require('./index-D_ItFcqt.js');
 
 
 

package/dist/cjs/loader.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-1GcSSOS3.js');
+var index = require('./index-D_ItFcqt.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["af-heading_5.cjs",[[257,"af-heading",{"level":[1],"align":[1]}],[257,"af-logo"],[257,"af-nav-item",{"hierarchy":[1],"variant":[1],"href":[1],"active":[4]}],[257,"af-navbar"],[257,"af-text",{"variant":[1],"align":[1],"as":[1]}]]],["af-aspect-ratio.cjs",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-button.cjs",[[257,"af-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1]}]]],["af-button-group.cjs",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-card.cjs",[[262,"af-card",{"backgroundImage":[1,"background-image"],"backgroundColor":[1,"background-color"],"darkOverlay":[4,"dark-overlay"]}]]],["af-color-swatch.cjs",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-container.cjs",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]],["af-icon-button.cjs",[[257,"af-icon-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-typography-lockup.cjs",[[257,"af-typography-lockup",{"headingSize":[2,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]]], options);
+  return index.bootstrapLazy([["af-hero-section.cjs",[[262,"af-hero-section",{"variant":[1],"withDecoration":[4,"with-decoration"],"minHeight":[1,"min-height"]}]]],["af-section.cjs",[[262,"af-section",{"padding":[1],"background":[1],"container":[4]}]]],["af-heading_5.cjs",[[257,"af-heading",{"level":[1],"align":[1],"theme":[1]}],[257,"af-logo"],[257,"af-nav-item",{"hierarchy":[1],"variant":[1],"href":[1],"active":[4]}],[257,"af-navbar",{"mobileMenuOpen":[32]}],[257,"af-text",{"variant":[1],"align":[1],"as":[1],"theme":[1]}]]],["af-aspect-ratio.cjs",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-button.cjs",[[257,"af-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"darkBackground":[4,"dark-background"]}]]],["af-button-group.cjs",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-card.cjs",[[262,"af-card",{"backgroundImage":[1,"background-image"],"backgroundColor":[1,"background-color"],"darkOverlay":[4,"dark-overlay"]}]]],["af-client-carousel.cjs",[[257,"af-client-carousel",{"showHeadline":[4,"show-headline"],"headlineText":[1,"headline-text"]}]]],["af-color-swatch.cjs",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-icon-button.cjs",[[257,"af-icon-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-logo-well.cjs",[[257,"af-logo-well"]]],["af-testimonial.cjs",[[262,"af-testimonial",{"backgroundImage":[1,"background-image"],"logoImage":[1,"logo-image"],"quote":[1],"attribution":[1],"readMoreLink":[1,"read-more-link"]}]]],["af-testimonial-carousel.cjs",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]}]]],["af-testimonial-stat.cjs",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-typography-lockup.cjs",[[257,"af-typography-lockup",{"headingSize":[2,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]],["af-container.cjs",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/assets/paperclip-decoration.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1212 753" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M1102.14 107.875C1031.8 37.1138 939.128 -1.47247 840.61 0.0430067H358.674L262.104 156.72H841.87C842.558 156.72 843.36 156.72 844.047 156.72C900.638 156.72 953.791 178.869 994 219.32C1035.24 260.821 1058.04 316.311 1058.04 375.647C1058.04 497.468 960.665 596.44 841.068 596.44H251.335C197.609 596.44 153.848 551.908 153.848 497.235C153.848 442.561 197.723 397.33 251.221 395.698H779.208L878.872 239.021H248.586C111.577 242.519 0 358.277 0 497.235C0 636.192 112.723 753 251.335 753H841.068C1045.55 753 1212 583.617 1212 375.531C1212 273.994 1173.05 178.985 1102.26 107.758L1102.14 107.875Z" fill="var(--fill-0, white)" fill-opacity="0.06"/>
+</svg>

package/dist/collection/collection-manifest.json

@@ -12,7 +12,14 @@
     "components/af-icon-button/af-icon-button.js",
     "components/af-button-group/af-button-group.js",
     "components/af-typography-lockup/af-typography-lockup.js",
-    "components/af-card/af-card.js"
+    "components/af-card/af-card.js",
+    "components/af-client-carousel/af-client-carousel.js",
+    "components/af-hero-section/af-hero-section.js",
+    "components/af-logo-well/af-logo-well.js",
+    "components/af-section/af-section.js",
+    "components/af-testimonial/af-testimonial.js",
+    "components/af-testimonial-carousel/af-testimonial-carousel.js",
+    "components/af-testimonial-stat/af-testimonial-stat.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -17,13 +17,18 @@ export class AfButton {
          * Button type (when not using href)
          */
         this.type = 'button';
+        /**
+         * Use on dark backgrounds for better contrast
+         */
+        this.darkBackground = false;
     }
     render() {
         const classes = {
             'button': true,
             [`variant-${this.variant}`]: true,
             [`size-${this.size}`]: true,
-            'disabled': this.disabled
+            'disabled': this.disabled,
+            'on-dark': this.darkBackground
         };
         const content = [
             h("span", { class: "icon-left" }, h("slot", { name: "icon-left" })),
@@ -147,6 +152,26 @@ export class AfButton {
                 "reflect": false,
                 "attribute": "type",
                 "defaultValue": "'button'"
+            },
+            "darkBackground": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use on dark backgrounds for better contrast"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dark-background",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"af-button.js","sourceRoot":"","sources":["../../../src/components/af-button/af-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;IALrB;QAME;;WAEG;QACK,YAAO,GAAkD,SAAS,CAAC;QAE3E;;WAEG;QACK,SAAI,GAAwB,SAAS,CAAC;QAE9C;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAOlC;;WAEG;QACK,SAAI,GAAkC,QAAQ,CAAC;KAwCxD;IAtCC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI;YACd,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACjC,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,OAAO,GAAG;YACd,YAAM,KAAK,EAAC,WAAW;gBACrB,YAAM,IAAI,EAAC,WAAW,GAAQ,CACzB;YACP,YAAM,KAAK,EAAC,OAAO;gBACjB,eAAa,CACR;YACP,YAAM,KAAK,EAAC,YAAY;gBACtB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC1B;SACR,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChC,OAAO,CACL,EAAC,IAAI;gBACH,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,IAC/B,OAAO,CACN,CACC,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,IAC7D,OAAO,CACD,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-button',\n  styleUrl: 'af-button.css',\n  shadow: true\n})\nexport class AfButton {\n  /**\n   * The visual variant of the button\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'outline' | 'ghost' = 'primary';\n\n  /**\n   * The size of the button\n   */\n  @Prop() size: 'default' | 'small' = 'default';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Optional href to render as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  render() {\n    const classes = {\n      'button': true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'disabled': this.disabled\n    };\n\n    const content = [\n      <span class=\"icon-left\">\n        <slot name=\"icon-left\"></slot>\n      </span>,\n      <span class=\"label\">\n        <slot></slot>\n      </span>,\n      <span class=\"icon-right\">\n        <slot name=\"icon-right\"></slot>\n      </span>\n    ];\n\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-button.js","sourceRoot":"","sources":["../../../src/components/af-button/af-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;IALrB;QAME;;WAEG;QACK,YAAO,GAAkD,SAAS,CAAC;QAE3E;;WAEG;QACK,SAAI,GAAwB,SAAS,CAAC;QAE9C;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAOlC;;WAEG;QACK,SAAI,GAAkC,QAAQ,CAAC;QAEvD;;WAEG;QACK,mBAAc,GAAY,KAAK,CAAC;KAyCzC;IAvCC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI;YACd,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACjC,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,SAAS,EAAE,IAAI,CAAC,cAAc;SAC/B,CAAC;QAEF,MAAM,OAAO,GAAG;YACd,YAAM,KAAK,EAAC,WAAW;gBACrB,YAAM,IAAI,EAAC,WAAW,GAAQ,CACzB;YACP,YAAM,KAAK,EAAC,OAAO;gBACjB,eAAa,CACR;YACP,YAAM,KAAK,EAAC,YAAY;gBACtB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC1B;SACR,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChC,OAAO,CACL,EAAC,IAAI;gBACH,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,IAC/B,OAAO,CACN,CACC,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,IAC7D,OAAO,CACD,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-button',\n  styleUrl: 'af-button.css',\n  shadow: true\n})\nexport class AfButton {\n  /**\n   * The visual variant of the button\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'outline' | 'ghost' = 'primary';\n\n  /**\n   * The size of the button\n   */\n  @Prop() size: 'default' | 'small' = 'default';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Optional href to render as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n  \n  /**\n   * Use on dark backgrounds for better contrast\n   */\n  @Prop() darkBackground: boolean = false;\n\n  render() {\n    const classes = {\n      'button': true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'disabled': this.disabled,\n      'on-dark': this.darkBackground\n    };\n\n    const content = [\n      <span class=\"icon-left\">\n        <slot name=\"icon-left\"></slot>\n      </span>,\n      <span class=\"label\">\n        <slot></slot>\n      </span>,\n      <span class=\"icon-right\">\n        <slot name=\"icon-right\"></slot>\n      </span>\n    ];\n\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-button-group/af-button-group.js

@@ -15,7 +15,7 @@ export class AfButtonGroup {
             'button-group': true,
             [`direction-${this.direction}`]: true
         };
-        return (h(Host, { key: 'c6cab092c05c6e6b7b859c662f318067590b51e3' }, h("div", { key: '289501b3693d0eeb68c4b2f85bb3b8398ca7610b', class: classes, style: { gap: this.gap } }, h("slot", { key: 'b852bcf016846022ee0cf8d23ce5a57aa0856adf' }))));
+        return (h(Host, { key: '5f8f8c8acd7b401c9e217a05200dfca367691723' }, h("div", { key: 'b4d14e81177523a584a961e0f20b6e7be101a8e3', class: classes, style: { gap: this.gap } }, h("slot", { key: '68cb3173bcf193eb877d66b1588500882aa52a63' }))));
     }
     static get is() { return "af-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -86,14 +86,17 @@
   color: #ffffff !important;
 }
 
-/* Dark text for regular cards */
-.card:not(.card--with-image) .card__content {
-  color: var(--colour-typography-heading-primary, #14343b);
+/* Dark text for regular cards (light backgrounds) */
+.card:not(.card--with-image):not(.card--dark-overlay) af-heading,
+.card:not(.card--with-image):not(.card--dark-overlay) af-text {
+  --colour-typography-heading-primary: var(--colour-brand-inkwell, #14343B);
+  --colour-typography-body-default: #2B484F;
 }
 
-/* Custom background color cards with white text */
-.card--custom-bg .card__content {
-  --colour-typography-heading-primary: #ffffff;
-  --colour-typography-body-default: #ffffff;
+/* Dark text for custom background color cards (unless they have dark overlay) */
+.card--custom-bg:not(.card--dark-overlay) af-heading,
+.card--custom-bg:not(.card--dark-overlay) af-text {
+  --colour-typography-heading-primary: var(--colour-brand-inkwell, #14343B);
+  --colour-typography-body-default: #2B484F;
 }
 

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

@@ -9,7 +9,7 @@ export class AfCard {
     render() {
         const hasBackgroundImage = !!this.backgroundImage;
         const cardStyle = this.backgroundColor ? { backgroundColor: this.backgroundColor } : undefined;
-        return (h(Host, { key: '026a3f9e10d281558913cd6eb69db800da37deb4' }, h("div", { key: 'd6b43e724d5611e75ec096dad88c5373ef5c5adc', class: `card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`, style: cardStyle }, hasBackgroundImage && (h("div", { key: 'f71753ba962411320c45f06c7c9a5c98b89883a9', class: "card__background" }, h("img", { key: '2d3b19e350ddf5a1efa1c1a9a343851e423cc275', src: this.backgroundImage, alt: "", class: "card__background-image" }))), h("div", { key: '459e00230ef7a470ee808d0d674412b18822d473', class: `card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}` }, h("slot", { key: 'd2f4f261f0b2a766c912504d17f0caec96ae02c4' })))));
+        return (h(Host, { key: '2c3c0b6d1889074ae78b2b1f9646dc23829a0e9a' }, h("div", { key: '7e1ef884a203ae17e1ad417ac688f59b9acb6932', class: `card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`, style: cardStyle }, hasBackgroundImage && (h("div", { key: '4fb3cea588d42345690df68738b725a6debacc55', class: "card__background" }, h("img", { key: '0dde30e250c7cb117993e3ccbeab8f108278ae89', src: this.backgroundImage, alt: "", class: "card__background-image" }))), h("div", { key: 'f604c04997720f4804d148f103f9c4a69b1ec0aa', class: `card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}` }, h("slot", { key: 'a7668f98c4c8fd10b5581eac69f2a31aecbc3732' })))));
     }
     static get is() { return "af-card"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-client-carousel/af-client-carousel.css

@@ -0,0 +1,112 @@
+:host {
+  display: block;
+  width: 100%;
+  background-color: var(--colour-brand-inkwell, #14343B);
+}
+
+.client-carousel {
+  padding: 48px 80px;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+  align-items: center;
+}
+
+.headline {
+  text-align: center;
+  padding: 24px 220px;
+}
+
+.headline h3 {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: 500;
+  font-size: 34px;
+  line-height: 1;
+  letter-spacing: -0.68px;
+  color: var(--colour-brand-mist-green, #C6D5D1);
+  margin: 0;
+}
+
+.carousel-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel-row {
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.logo-track {
+  display: flex;
+  gap: 16px;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+/* Scroll left animation */
+.scroll-left .logo-track {
+  animation-name: scroll-left;
+  animation-duration: 40s;
+}
+
+/* Scroll right animation */
+.scroll-right .logo-track {
+  animation-name: scroll-right;
+  animation-duration: 40s;
+}
+
+@keyframes scroll-left {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes scroll-right {
+  0% {
+    transform: translateX(-50%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+/* Ensure slotted logos maintain their styling */
+::slotted(*) {
+  flex-shrink: 0;
+}
+
+/* Tablet adjustments */
+@media (max-width: 1024px) {
+  .client-carousel {
+    padding: 32px 40px;
+  }
+  
+  .headline {
+    padding: 16px 40px;
+  }
+}
+
+/* Mobile adjustments */
+@media (max-width: 767px) {
+  .client-carousel {
+    padding: 24px 16px;
+  }
+  
+  .headline {
+    padding: 16px;
+  }
+  
+  .headline h3 {
+    font-size: 25px;
+  }
+}
+

package/dist/collection/components/af-client-carousel/af-client-carousel.js

@@ -0,0 +1,72 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Infinite scrolling carousel for client logos
+ */
+export class AfClientCarousel {
+    constructor() {
+        /** Show headline above carousel */
+        this.showHeadline = false;
+        /** Headline text */
+        this.headlineText = "Trusted by some of the world's leading organisations";
+    }
+    render() {
+        return (h(Host, { key: '6ee5a4e472cb082ac68cb58c00bf5b1d686dd489' }, h("div", { key: 'dc030f69bfbb55ce999f0b2f1d8a47095d75ac59', class: "client-carousel" }, this.showHeadline && (h("div", { key: 'd8d7fdbd47e65cc5a3a8e10d88f7425f91d0459e', class: "headline" }, h("slot", { key: '3773f567bfd3de6058cd1088ba2c781cf510e63b', name: "headline" }, h("h3", { key: 'fdcab6ce99a2c477bf1e336f13f7994637b8436d' }, this.headlineText)))), h("div", { key: '30429a27f88e490051a4623195421e00a34f4db4', class: "carousel-container" }, h("div", { key: 'de187b8265b84cb3d8f22540ec283bb8b3603aa8', class: "carousel-row scroll-left" }, h("div", { key: 'd2da7c79388f53425cba20429204fea148030aa5', class: "logo-track" }, h("slot", { key: 'b4ddb6250d5893290ed40a2c765d0f0bf0a378e6', name: "row-1" }), h("slot", { key: 'ccb91ed748f2e51a1d0f2d63d676f7e2558ec2ef', name: "row-1" }))), h("div", { key: 'f6a99654384b070bf91e9ea1ebc57de304f2671f', class: "carousel-row scroll-right" }, h("div", { key: '8e31a13039f2e2df33eb7ec67f738d71d49d931f', class: "logo-track" }, h("slot", { key: '2ffeff2da8ddd4c0faefaf59fc1a45972de26943', name: "row-2" }), h("slot", { key: '2121dc84af370a41290a432e50f3c10f6b3d4b4c', name: "row-2" })))))));
+    }
+    static get is() { return "af-client-carousel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-client-carousel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-client-carousel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "showHeadline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show headline above carousel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-headline",
+                "defaultValue": "false"
+            },
+            "headlineText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Headline text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "headline-text",
+                "defaultValue": "\"Trusted by some of the world's leading organisations\""
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-client-carousel.js.map

package/dist/collection/components/af-client-carousel/af-client-carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-client-carousel.js","sourceRoot":"","sources":["../../../src/components/af-client-carousel/af-client-carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,gBAAgB;IAL7B;QAME,mCAAmC;QAC3B,iBAAY,GAAY,KAAK,CAAC;QAEtC,oBAAoB;QACZ,iBAAY,GAAW,sDAAsD,CAAC;KAmCvF;IAjCC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,iBAAiB;gBACzB,IAAI,CAAC,YAAY,IAAI,CACpB,4DAAK,KAAK,EAAC,UAAU;oBACnB,6DAAM,IAAI,EAAC,UAAU;wBACnB,6DAAK,IAAI,CAAC,YAAY,CAAM,CACvB,CACH,CACP;gBAED,4DAAK,KAAK,EAAC,oBAAoB;oBAE7B,4DAAK,KAAK,EAAC,0BAA0B;wBACnC,4DAAK,KAAK,EAAC,YAAY;4BACrB,6DAAM,IAAI,EAAC,OAAO,GAAQ;4BAC1B,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF;oBAGN,4DAAK,KAAK,EAAC,2BAA2B;wBACpC,4DAAK,KAAK,EAAC,YAAY;4BACrB,6DAAM,IAAI,EAAC,OAAO,GAAQ;4BAC1B,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Infinite scrolling carousel for client logos\n */\n@Component({\n  tag: 'af-client-carousel',\n  styleUrl: 'af-client-carousel.css',\n  shadow: true,\n})\nexport class AfClientCarousel {\n  /** Show headline above carousel */\n  @Prop() showHeadline: boolean = false;\n  \n  /** Headline text */\n  @Prop() headlineText: string = \"Trusted by some of the world's leading organisations\";\n\n  render() {\n    return (\n      <Host>\n        <div class=\"client-carousel\">\n          {this.showHeadline && (\n            <div class=\"headline\">\n              <slot name=\"headline\">\n                <h3>{this.headlineText}</h3>\n              </slot>\n            </div>\n          )}\n          \n          <div class=\"carousel-container\">\n            {/* Top row - scrolls left */}\n            <div class=\"carousel-row scroll-left\">\n              <div class=\"logo-track\">\n                <slot name=\"row-1\"></slot>\n                <slot name=\"row-1\"></slot>\n              </div>\n            </div>\n            \n            {/* Bottom row - scrolls right */}\n            <div class=\"carousel-row scroll-right\">\n              <div class=\"logo-track\">\n                <slot name=\"row-2\"></slot>\n                <slot name=\"row-2\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

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

@@ -6,7 +6,7 @@
   margin: 0;
   padding: 0;
   font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;
-  font-weight: 500;
+  font-weight: 400;
   color: var(--colour-typography-heading-primary, #14343b);
   letter-spacing: -0.02em;
 }
@@ -24,6 +24,15 @@
   text-align: right;
 }
 
+/* Theme variants */
+.theme-dark {
+  color: var(--colour-brand-mist-green, #C6D5D1);
+}
+
+.theme-light {
+  color: var(--colour-typography-heading-primary, #14343b);
+}
+
 /* Heading XL */
 .level-xl {
   font-size: 50px;

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

@@ -5,6 +5,8 @@ export class AfHeading {
         this.level = '1';
         /** Visual alignment */
         this.align = 'left';
+        /** Theme for dark backgrounds */
+        this.theme = 'light';
     }
     getHeadingTag() {
         // Map display levels to semantic HTML tags
@@ -20,11 +22,12 @@ export class AfHeading {
     }
     render() {
         const Tag = this.getHeadingTag();
-        return (h(Tag, { key: '1d3f37c8d067c3c9d0ec7f10422478ab41c990b2', class: {
+        return (h(Tag, { key: '2cc4b5d43b85fbc8251d61e822deb22641f69683', class: {
                 'heading': true,
                 [`level-${this.level}`]: true,
-                [`align-${this.align}`]: true
-            }, part: "base" }, h("slot", { key: 'dcba9d00393f818cfceeb5eba5cc2bd874927dfd' })));
+                [`align-${this.align}`]: true,
+                [`theme-${this.theme}`]: true
+            }, part: "base" }, h("slot", { key: '0ac282842c61ec6c16929574a5ffd6530aab9759' })));
     }
     static get is() { return "af-heading"; }
     static get encapsulation() { return "shadow"; }
@@ -79,6 +82,26 @@ export class AfHeading {
                 "reflect": false,
                 "attribute": "align",
                 "defaultValue": "'left'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme for dark backgrounds"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'light'"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"af-heading.js","sourceRoot":"","sources":["../../../src/components/af-heading/af-heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,SAAS;IALtB;QAME,oBAAoB;QACZ,UAAK,GAAuC,GAAG,CAAC;QAExD,uBAAuB;QACf,UAAK,GAAgC,MAAM,CAAC;KA+BrD;IA7BS,aAAa;QACnB,2CAA2C;QAC3C,MAAM,MAAM,GAA2B;YACrC,IAAI,EAAE,IAAI;YACV,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;SACV,CAAC;QACF,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAS,CAAC;QAExC,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;gBAC7B,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;aAC9B,EACD,IAAI,EAAC,MAAM;YAEX,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-heading',\n  styleUrl: 'af-heading.css',\n  shadow: true\n})\nexport class AfHeading {\n  /** Heading level */\n  @Prop() level: 'xl' | '1' | '2' | '3' | '4' | '5' = '1';\n\n  /** Visual alignment */\n  @Prop() align: 'left' | 'center' | 'right' = 'left';\n\n  private getHeadingTag() {\n    // Map display levels to semantic HTML tags\n    const tagMap: Record<string, string> = {\n      'xl': 'h1',\n      '1': 'h1',\n      '2': 'h2',\n      '3': 'h3',\n      '4': 'h4',\n      '5': 'h5'\n    };\n    return tagMap[this.level] || 'h1';\n  }\n\n  render() {\n    const Tag = this.getHeadingTag() as any;\n\n    return (\n      <Tag\n        class={{\n          'heading': true,\n          [`level-${this.level}`]: true,\n          [`align-${this.align}`]: true\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-heading.js","sourceRoot":"","sources":["../../../src/components/af-heading/af-heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,SAAS;IALtB;QAME,oBAAoB;QACZ,UAAK,GAAuC,GAAG,CAAC;QAExD,uBAAuB;QACf,UAAK,GAAgC,MAAM,CAAC;QAEpD,iCAAiC;QACzB,UAAK,GAAqB,OAAO,CAAC;KAgC3C;IA9BS,aAAa;QACnB,2CAA2C;QAC3C,MAAM,MAAM,GAA2B;YACrC,IAAI,EAAE,IAAI;YACV,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;SACV,CAAC;QACF,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAS,CAAC;QAExC,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;gBAC7B,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;gBAC7B,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;aAC9B,EACD,IAAI,EAAC,MAAM;YAEX,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-heading',\n  styleUrl: 'af-heading.css',\n  shadow: true\n})\nexport class AfHeading {\n  /** Heading level */\n  @Prop() level: 'xl' | '1' | '2' | '3' | '4' | '5' = '1';\n\n  /** Visual alignment */\n  @Prop() align: 'left' | 'center' | 'right' = 'left';\n  \n  /** Theme for dark backgrounds */\n  @Prop() theme: 'light' | 'dark' = 'light';\n\n  private getHeadingTag() {\n    // Map display levels to semantic HTML tags\n    const tagMap: Record<string, string> = {\n      'xl': 'h1',\n      '1': 'h1',\n      '2': 'h2',\n      '3': 'h3',\n      '4': 'h4',\n      '5': 'h5'\n    };\n    return tagMap[this.level] || 'h1';\n  }\n\n  render() {\n    const Tag = this.getHeadingTag() as any;\n\n    return (\n      <Tag\n        class={{\n          'heading': true,\n          [`level-${this.level}`]: true,\n          [`align-${this.align}`]: true,\n          [`theme-${this.theme}`]: true\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,69 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.hero-section {
+  width: 100%;
+  padding-top: calc(32px + 8px + 22px + 4rem); /* navbar top offset + navbar height + gap + content padding */
+  padding-bottom: 4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+}
+
+/* Light variant */
+.variant-light {
+  background-color: var(--colour-background-white, #FFFFFF);
+}
+
+/* Dark variant */
+.variant-dark {
+  background-color: var(--colour-brand-inkwell, #14343B);
+}
+
+/* Set theme colors on dark backgrounds */
+.variant-dark af-heading,
+.variant-dark af-text {
+  --typography-heading-primary: var(--colour-brand-mist-green, #C6D5D1);
+  --typography-body-default: var(--colour-brand-mist-green, #C6D5D1);
+}
+
+.hero-decoration {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  height: 0;
+  width: 0;
+  overflow: visible;
+}
+
+.hero-decoration ::slotted(*) {
+  position: absolute !important;
+  bottom: 208px;
+  right: -557px;
+  width: 1212px;
+  height: 753px;
+  opacity: 0.5;
+}
+
+.hero-content {
+  text-align: center;
+  max-width: 1000px;
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+  .hero-section {
+    padding: 2rem 1rem;
+  }
+}
+

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

@@ -0,0 +1,94 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Hero section component for marketing pages
+ */
+export class AfHeroSection {
+    constructor() {
+        /** Hero variant */
+        this.variant = 'dark';
+        /** Show decorative paperclip */
+        this.withDecoration = false;
+        /** Minimum height */
+        this.minHeight = '60vh';
+    }
+    render() {
+        return (h(Host, { key: '85061979e5f4d2a766574cbc355e2f833160050b' }, h("div", { key: 'f0c1f36c7f5f241d5a3ce590a2eff5b5e9c6f3bc', class: `hero-section variant-${this.variant}`, style: { minHeight: this.minHeight } }, this.withDecoration && (h("div", { key: '4a680dcbb970ea9c31fdcd1d4e16ec9b43e859b6', class: "hero-decoration" }, h("slot", { key: 'f8c629d60b6fbb0627e0720967bbc5bfeecbfecd', name: "decoration" }))), h("af-container", { key: '07ed025ef1b11880896a0ca72916592f4b36dddf' }, h("div", { key: 'dbe586394c6e10ed672d12326e21832376661ed1', class: "hero-content" }, h("slot", { key: 'd3906e6fd0bdb1439df2c4e6b48e090472bcc2e5' }))))));
+    }
+    static get is() { return "af-hero-section"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-hero-section.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-hero-section.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hero variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'dark'"
+            },
+            "withDecoration": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show decorative paperclip"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "with-decoration",
+                "defaultValue": "false"
+            },
+            "minHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum height"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-height",
+                "defaultValue": "'60vh'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-hero-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-hero-section.js","sourceRoot":"","sources":["../../../src/components/af-hero-section/af-hero-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAOH,MAAM,OAAO,aAAa;IAN1B;QAOE,mBAAmB;QACX,YAAO,GAAqB,MAAM,CAAC;QAE3C,gCAAgC;QACxB,mBAAc,GAAY,KAAK,CAAC;QAExC,qBAAqB;QACb,cAAS,GAAW,MAAM,CAAC;KAoBpC;IAlBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE;gBACrF,IAAI,CAAC,cAAc,IAAI,CACtB,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACP;gBACD;oBACE,4DAAK,KAAK,EAAC,cAAc;wBACvB,8DAAa,CACT,CACO,CACX,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Hero section component for marketing pages\n */\n@Component({\n  tag: 'af-hero-section',\n  styleUrl: 'af-hero-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfHeroSection {\n  /** Hero variant */\n  @Prop() variant: 'light' | 'dark' = 'dark';\n  \n  /** Show decorative paperclip */\n  @Prop() withDecoration: boolean = false;\n  \n  /** Minimum height */\n  @Prop() minHeight: string = '60vh';\n\n  render() {\n    return (\n      <Host>\n        <div class={`hero-section variant-${this.variant}`} style={{ minHeight: this.minHeight }}>\n          {this.withDecoration && (\n            <div class=\"hero-decoration\">\n              <slot name=\"decoration\"></slot>\n            </div>\n          )}\n          <af-container>\n            <div class=\"hero-content\">\n              <slot></slot>\n            </div>\n          </af-container>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

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

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class AfLogo {
     render() {
-        return (h(Host, { key: '8a33b73d7a60054dde8a04327d94d78763552549' }, h("img", { key: '2dbf83d383508aaeff70f683866925e4fa98847d', src: "https://www.figma.com/api/mcp/asset/2cfec484-7ba9-4258-94f3-ef4d0ba1e8fe", alt: "Affinda", class: "logo-img" })));
+        return (h(Host, { key: '6e7a2dd46fa7143bdac4dee8d7146649ff3c7f57' }, h("img", { key: '03fb48e53218c6207927f9337851e3d39c5ca4a7', src: "https://www.figma.com/api/mcp/asset/2cfec484-7ba9-4258-94f3-ef4d0ba1e8fe", alt: "Affinda", class: "logo-img" })));
     }
     static get is() { return "af-logo"; }
     static get encapsulation() { return "shadow"; }