@affinda/wc 0.0.6 → 0.0.7

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-CNijn8X5.js');
 
 
 

package/dist/cjs/loader.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-1GcSSOS3.js');
+var index = require('./index-CNijn8X5.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-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-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"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -12,7 +12,10 @@
     "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-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-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;
 }

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

@@ -0,0 +1,143 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.testimonial-card {
+  background: var(--colour-background-level-1, #e8eeed);
+  border-radius: var(--border-radius-card-level-1, 32px);
+  overflow: hidden;
+  display: flex;
+  height: 544px;
+  box-sizing: border-box;
+}
+
+/* Image side - 519px wide */
+.testimonial-image {
+  position: relative;
+  width: 519px;
+  height: 100%;
+  background: #000000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.testimonial-bg-image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.7;
+}
+
+.testimonial-logo {
+  position: relative;
+  z-index: 1;
+  padding: 0 108px;
+  max-width: 100%;
+}
+
+.testimonial-logo img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* Content side */
+.testimonial-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  padding: 48px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-left: 1px solid rgba(255, 255, 255, 0.08);
+  box-sizing: border-box;
+}
+
+.testimonial-quote-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.testimonial-quote-icon {
+  width: 48px;
+  height: 48px;
+  color: var(--colour-brand-inkwell, #14343b);
+  flex-shrink: 0;
+}
+
+.testimonial-text {
+  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 1.4;
+  color: var(--colour-typography-body-default, #2b484f);
+  margin: 0;
+  max-height: 155px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.testimonial-attribution {
+  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;
+  font-size: 22px;
+  font-weight: 400;
+  line-height: 1.4;
+  color: var(--colour-typography-body-dark, #14343b);
+  margin: 0;
+}
+
+.testimonial-stats {
+  display: flex;
+  gap: 32px;
+  width: 100%;
+}
+
+.testimonial-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid var(--colour-background-border-default, #d1ddda);
+  padding-top: 32px;
+}
+
+.testimonial-nav {
+  display: flex;
+  gap: 12px;
+}
+
+.testimonial-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 24px;
+  border: 1px solid var(--colour-brand-inkwell, #14343b);
+  border-radius: 9999px;
+  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;
+  font-size: 17px;
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--colour-brand-inkwell, #14343b);
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.testimonial-cta:hover {
+  background: var(--colour-background-level-1, #e8eeed);
+  transform: translateY(-1px);
+}
+
+.testimonial-cta svg {
+  width: 24px;
+  height: 24px;
+}
+
+

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

@@ -0,0 +1,118 @@
+import { h, Host } from "@stencil/core";
+export class AfTestimonial {
+    render() {
+        return (h(Host, { key: '963791303c22cdea677a7923ffce8b16ea97cb26' }, h("div", { key: '369ad62ceb17461c4511f0cb7338a5f812b69717', class: "testimonial-card" }, h("div", { key: 'e548a64653054d54b282b83c0a64326c0973122d', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: '21f779030e13675278b4cd18ae2df0c0bf9c59a3', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: '23298bd5b1c3db0ed5bff4c1d1cd0582e09b50a2', class: "testimonial-logo" }, h("img", { key: '357214f50e38cfa9e53cf7914c87f22c7971f1d5', src: this.logoImage, alt: "Company logo" })))), h("div", { key: 'd2913ca4d9b38a048ebedb123fdb0b7b9e78cc6f', class: "testimonial-content" }, h("div", { key: '92756afbcbd391a7fcb8b1a99d92bcc370f3787d', class: "testimonial-quote-section" }, h("div", { key: '40f844093eb232bf06b353a27c066f5ae99a85bf', class: "testimonial-quote-icon" }, h("slot", { key: '3cf6da2811c1cdf6a4540f72727fe479c7d4d4ca', name: "quote-icon" }, h("svg", { key: 'f59e4ceb77b67bbba1b5d647d10dd6f15b1d9319', width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'dbcc67a7e7ab90b4d1172f0cced568eeeb182150', d: "M10.5 25.5C10.5 23.0147 12.5147 21 15 21H18C18.8284 21 19.5 20.3284 19.5 19.5V15C19.5 12.5147 17.4853 10.5 15 10.5H10.5C6.35786 10.5 3 13.8579 3 18V33C3 35.4853 5.01472 37.5 7.5 37.5H15C17.4853 37.5 19.5 35.4853 19.5 33V25.5C19.5 23.0147 17.4853 21 15 21H10.5ZM33 25.5C33 23.0147 35.0147 21 37.5 21H40.5C41.3284 21 42 20.3284 42 19.5V15C42 12.5147 39.9853 10.5 37.5 10.5H33C28.8579 10.5 25.5 13.8579 25.5 18V33C25.5 35.4853 27.5147 37.5 30 37.5H37.5C39.9853 37.5 42 35.4853 42 33V25.5C42 23.0147 39.9853 21 37.5 21H33Z", fill: "currentColor" })))), h("p", { key: '1b487f7ab688642b9c5166a3fc8eb1191e1daa36', class: "testimonial-text" }, this.quote), h("p", { key: '539600a1d6eb098ea329307d40cac941d1d631a4', class: "testimonial-attribution" }, this.attribution)), h("div", { key: '307e784601fd66cdd4573eaf0a83c8d61ab83301', class: "testimonial-stats" }, h("slot", { key: '2ab5758e92ed670e6d6ed554f3fce7a7e1fc0077', name: "stats" })), h("div", { key: 'b13d6b51a27f5e94d40929f6c337513ca84af1cd', class: "testimonial-footer" }, h("div", { key: '69b92a55946c936cdc78d7f317caacb8fd334779', class: "testimonial-nav" }, h("slot", { key: '41c0ef3a1497d33d7c2dc7b34a267d9158ff1aa0', name: "navigation" })), this.readMoreLink && (h("a", { key: 'd4c7e0acce78b7fb16085cd9c7c8762325dc6b6c', href: this.readMoreLink, class: "testimonial-cta" }, h("span", { key: '0576e6e26afeb35f07aa4ad0190cdd6e3b4242c1' }, "Read full story"), h("svg", { key: 'd3c6d905c55782f2b22e6070a4adcca4bd0164cf', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '61c7ecddf75102a501626fc59fe55cd1402b06e2', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))));
+    }
+    static get is() { return "af-testimonial"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-testimonial.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-testimonial.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "backgroundImage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Background image URL for the testimonial card"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background-image"
+            },
+            "logoImage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Company logo URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "logo-image"
+            },
+            "quote": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Testimonial quote text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "quote"
+            },
+            "attribution": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Attribution text (e.g., \"\u2013 Nathaniel Barrs, CTO, PSC Insurance\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "attribution"
+            },
+            "readMoreLink": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Link to full case study"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "read-more-link"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-testimonial.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-testimonial.js","sourceRoot":"","sources":["../../../src/components/af-testimonial/af-testimonial.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,aAAa;IA0BxB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,kBAAkB;gBAE3B,4DAAK,KAAK,EAAC,mBAAmB;oBAC3B,IAAI,CAAC,eAAe,IAAI,CACvB,4DAAK,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,sBAAsB,GAAG,CACvE;oBACA,IAAI,CAAC,SAAS,IAAI,CACjB,4DAAK,KAAK,EAAC,kBAAkB;wBAC3B,4DAAK,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAC,cAAc,GAAG,CAC3C,CACP,CACG;gBAGN,4DAAK,KAAK,EAAC,qBAAqB;oBAC9B,4DAAK,KAAK,EAAC,2BAA2B;wBAEpC,4DAAK,KAAK,EAAC,wBAAwB;4BACjC,6DAAM,IAAI,EAAC,YAAY;gCACrB,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;oCAC5F,6DAAM,CAAC,EAAC,wgBAAwgB,EAAC,IAAI,EAAC,cAAc,GAAE,CACliB,CACD,CACH;wBAEN,0DAAG,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAK;wBAC5C,0DAAG,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,WAAW,CAAK,CACrD;oBAGN,4DAAK,KAAK,EAAC,mBAAmB;wBAC5B,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;oBAGN,4DAAK,KAAK,EAAC,oBAAoB;wBAC7B,4DAAK,KAAK,EAAC,iBAAiB;4BAC1B,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B;wBACL,IAAI,CAAC,YAAY,IAAI,CACpB,0DAAG,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAC,iBAAiB;4BACjD,iFAA4B;4BAC5B,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;gCACzD,6DAAM,CAAC,EAAC,iCAAiC,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CAC7H,CACJ,CACL,CACG,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-testimonial',\n  styleUrl: 'af-testimonial.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTestimonial {\n  /**\n   * Background image URL for the testimonial card\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * Company logo URL\n   */\n  @Prop() logoImage?: string;\n\n  /**\n   * Testimonial quote text\n   */\n  @Prop() quote!: string;\n\n  /**\n   * Attribution text (e.g., \"– Nathaniel Barrs, CTO, PSC Insurance\")\n   */\n  @Prop() attribution!: string;\n\n  /**\n   * Link to full case study\n   */\n  @Prop() readMoreLink?: string;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"testimonial-card\">\n          {/* Image side */}\n          <div class=\"testimonial-image\">\n            {this.backgroundImage && (\n              <img src={this.backgroundImage} alt=\"\" class=\"testimonial-bg-image\" />\n            )}\n            {this.logoImage && (\n              <div class=\"testimonial-logo\">\n                <img src={this.logoImage} alt=\"Company logo\" />\n              </div>\n            )}\n          </div>\n\n          {/* Content side */}\n          <div class=\"testimonial-content\">\n            <div class=\"testimonial-quote-section\">\n              {/* Quote icon - using slot for flexibility */}\n              <div class=\"testimonial-quote-icon\">\n                <slot name=\"quote-icon\">\n                  <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M10.5 25.5C10.5 23.0147 12.5147 21 15 21H18C18.8284 21 19.5 20.3284 19.5 19.5V15C19.5 12.5147 17.4853 10.5 15 10.5H10.5C6.35786 10.5 3 13.8579 3 18V33C3 35.4853 5.01472 37.5 7.5 37.5H15C17.4853 37.5 19.5 35.4853 19.5 33V25.5C19.5 23.0147 17.4853 21 15 21H10.5ZM33 25.5C33 23.0147 35.0147 21 37.5 21H40.5C41.3284 21 42 20.3284 42 19.5V15C42 12.5147 39.9853 10.5 37.5 10.5H33C28.8579 10.5 25.5 13.8579 25.5 18V33C25.5 35.4853 27.5147 37.5 30 37.5H37.5C39.9853 37.5 42 35.4853 42 33V25.5C42 23.0147 39.9853 21 37.5 21H33Z\" fill=\"currentColor\"/>\n                  </svg>\n                </slot>\n              </div>\n\n              <p class=\"testimonial-text\">{this.quote}</p>\n              <p class=\"testimonial-attribution\">{this.attribution}</p>\n            </div>\n\n            {/* Statistics slot */}\n            <div class=\"testimonial-stats\">\n              <slot name=\"stats\"></slot>\n            </div>\n\n            {/* Footer with navigation and CTA */}\n            <div class=\"testimonial-footer\">\n              <div class=\"testimonial-nav\">\n                <slot name=\"navigation\"></slot>\n              </div>\n              {this.readMoreLink && (\n                <a href={this.readMoreLink} class=\"testimonial-cta\">\n                  <span>Read full story</span>\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                    <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </a>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n\n"]}

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

@@ -0,0 +1,96 @@
+:host {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+}
+
+.testimonial-carousel {
+  position: relative;
+  width: 100%;
+}
+
+.testimonial-slides {
+  position: relative;
+  width: 100%;
+  min-height: 544px;
+  overflow: hidden;
+}
+
+.testimonial-slides ::slotted(af-testimonial) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+}
+
+/* Progress indicator */
+.testimonial-progress {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  margin-top: 32px;
+  padding: 0 220px;
+}
+
+.progress-dot {
+  width: 100%;
+  max-width: 840px;
+  height: 3px;
+  background: var(--colour-background-border-default, #d1ddda);
+  border-radius: 2px;
+  cursor: pointer;
+  transition: background 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.progress-dot.active {
+  background: var(--colour-background-border-active, #8a7049);
+}
+
+.progress-dot:hover:not(.active) {
+  background: var(--colour-background-border-default, #c1cdc9);
+}
+
+/* Navigation buttons - positioned bottom left, next to each other */
+.carousel-navigation {
+  position: absolute;
+  bottom: 48px;
+  left: 48px;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  z-index: 10;
+}
+
+.nav-button {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: 1px solid var(--colour-brand-inkwell, #14343b);
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--colour-brand-inkwell, #14343b);
+}
+
+.nav-button:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-2px);
+}
+
+.nav-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  border-color: var(--colour-brand-inkwell, #14343b);
+}
+
+.nav-button svg {
+  width: 24px;
+  height: 24px;
+}
+

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

@@ -0,0 +1,100 @@
+import { h, Host } from "@stencil/core";
+export class AfTestimonialCarousel {
+    constructor() {
+        this.currentIndex = 0;
+        this.isAnimating = false;
+        this.testimonialCount = 0;
+        this.testimonials = [];
+        this.goToPrevious = () => {
+            if (this.isAnimating || this.currentIndex === 0)
+                return;
+            this.isAnimating = true;
+            this.currentIndex = this.currentIndex - 1;
+            this.updateVisibleTestimonial();
+            setTimeout(() => {
+                this.isAnimating = false;
+            }, 500);
+        };
+        this.goToNext = () => {
+            if (this.isAnimating || this.currentIndex >= this.testimonialCount - 1)
+                return;
+            this.isAnimating = true;
+            this.currentIndex = this.currentIndex + 1;
+            this.updateVisibleTestimonial();
+            setTimeout(() => {
+                this.isAnimating = false;
+            }, 500);
+        };
+    }
+    componentDidLoad() {
+        this.detectTestimonials();
+        // Watch for testimonials being added (for React async rendering)
+        this.observer = new MutationObserver(() => {
+            this.detectTestimonials();
+        });
+        this.observer.observe(this.host, {
+            childList: true,
+            subtree: true
+        });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    detectTestimonials() {
+        const newTestimonials = Array.from(this.host.querySelectorAll('af-testimonial'));
+        if (newTestimonials.length !== this.testimonials.length) {
+            this.testimonials = newTestimonials;
+            this.testimonialCount = newTestimonials.length;
+            console.log('Found testimonials:', this.testimonials.length);
+            if (this.testimonials.length > 0) {
+                this.currentIndex = 0;
+                this.updateVisibleTestimonial();
+            }
+        }
+    }
+    updateVisibleTestimonial() {
+        this.testimonials.forEach((testimonial, index) => {
+            const offset = (index - this.currentIndex) * 100;
+            testimonial.style.transform = `translateX(${offset}%)`;
+            testimonial.style.opacity = index === this.currentIndex ? '1' : '0';
+            testimonial.style.pointerEvents = index === this.currentIndex ? 'auto' : 'none';
+        });
+    }
+    render() {
+        const hasPrev = this.currentIndex > 0;
+        const hasNext = this.currentIndex < this.testimonialCount - 1;
+        return (h(Host, { key: 'ffa14246fa8a47d1cc079b0026df5a914e2b9362' }, h("div", { key: 'e984a28fd99ca671d8bdd55a780fbf76d7a189dc', class: "testimonial-carousel" }, h("div", { key: '55d09df04a1ee008d30a9227d3e6914dce46e173', class: "testimonial-slides" }, h("slot", { key: '992ac1e4849bcc042ccd0eeb47319b3e34364a1f' })), this.testimonialCount > 1 && (h("div", { key: '247420c536242d5e66ada662a23828eaa0190c84', class: "testimonial-progress" }, Array.from({ length: this.testimonialCount }).map((_, index) => (h("div", { class: `progress-dot ${index === this.currentIndex ? 'active' : ''}`, onClick: () => {
+                if (!this.isAnimating && index !== this.currentIndex) {
+                    this.isAnimating = true;
+                    this.currentIndex = index;
+                    this.updateVisibleTestimonial();
+                    setTimeout(() => {
+                        this.isAnimating = false;
+                    }, 500);
+                }
+            } }))))), this.testimonialCount > 1 && (h("div", { key: 'dc31d36ed57808d5c28d2c1dcb2729e6ed5342f7', class: "carousel-navigation" }, h("button", { key: '37f18430b88a9e983fc6e673d206be03c4cc1d40', class: "nav-button prev", disabled: !hasPrev, onClick: this.goToPrevious, "aria-label": "Previous testimonial" }, h("svg", { key: '9292c82f1b5f993aa8cffd301592dba8f5261c10', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '0c34f308ae42547d24584858769ee295e01e02c9', d: "M19 12H5M5 12L12 19M5 12L12 5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '984436b6d311d92623a9740d871c57d09de1a06e', class: "nav-button next", disabled: !hasNext, onClick: this.goToNext, "aria-label": "Next testimonial" }, h("svg", { key: 'e3d55f1efb6c29a74256c4db64283cb1abaa0aa5', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'c9404bc3ad64ccb8ad0da3291ce7d4b622637e3d', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+    }
+    static get is() { return "af-testimonial-carousel"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-testimonial-carousel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-testimonial-carousel.css"]
+        };
+    }
+    static get states() {
+        return {
+            "currentIndex": {},
+            "isAnimating": {},
+            "testimonialCount": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=af-testimonial-carousel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-testimonial-carousel.js","sourceRoot":"","sources":["../../../src/components/af-testimonial-carousel/af-testimonial-carousel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, h, Host, Element } from '@stencil/core';\n\n@Component({\n  tag: 'af-testimonial-carousel',\n  styleUrl: 'af-testimonial-carousel.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTestimonialCarousel {\n  @Element() host!: HTMLElement;\n  @State() currentIndex: number = 0;\n  @State() isAnimating: boolean = false;\n  @State() testimonialCount: number = 0;\n\n  private testimonials: HTMLElement[] = [];\n  private observer: MutationObserver | undefined;\n\n  componentDidLoad() {\n    this.detectTestimonials();\n    \n    // Watch for testimonials being added (for React async rendering)\n    this.observer = new MutationObserver(() => {\n      this.detectTestimonials();\n    });\n    \n    this.observer.observe(this.host, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private detectTestimonials() {\n    const newTestimonials = Array.from(this.host.querySelectorAll('af-testimonial')) as HTMLElement[];\n    \n    if (newTestimonials.length !== this.testimonials.length) {\n      this.testimonials = newTestimonials;\n      this.testimonialCount = newTestimonials.length;\n      console.log('Found testimonials:', this.testimonials.length);\n      \n      if (this.testimonials.length > 0) {\n        this.currentIndex = 0;\n        this.updateVisibleTestimonial();\n      }\n    }\n  }\n\n  private updateVisibleTestimonial() {\n    this.testimonials.forEach((testimonial, index) => {\n      const offset = (index - this.currentIndex) * 100;\n      testimonial.style.transform = `translateX(${offset}%)`;\n      testimonial.style.opacity = index === this.currentIndex ? '1' : '0';\n      testimonial.style.pointerEvents = index === this.currentIndex ? 'auto' : 'none';\n    });\n  }\n\n  private goToPrevious = () => {\n    if (this.isAnimating || this.currentIndex === 0) return;\n    \n    this.isAnimating = true;\n    this.currentIndex = this.currentIndex - 1;\n    this.updateVisibleTestimonial();\n    \n    setTimeout(() => {\n      this.isAnimating = false;\n    }, 500);\n  };\n\n  private goToNext = () => {\n    if (this.isAnimating || this.currentIndex >= this.testimonialCount - 1) return;\n    \n    this.isAnimating = true;\n    this.currentIndex = this.currentIndex + 1;\n    this.updateVisibleTestimonial();\n    \n    setTimeout(() => {\n      this.isAnimating = false;\n    }, 500);\n  };\n\n  render() {\n    const hasPrev = this.currentIndex > 0;\n    const hasNext = this.currentIndex < this.testimonialCount - 1;\n\n    return (\n      <Host>\n        <div class=\"testimonial-carousel\">\n          <div class=\"testimonial-slides\">\n            <slot></slot>\n          </div>\n          \n          {/* Progress indicator */}\n          {this.testimonialCount > 1 && (\n            <div class=\"testimonial-progress\">\n              {Array.from({ length: this.testimonialCount }).map((_, index) => (\n                <div \n                  class={`progress-dot ${index === this.currentIndex ? 'active' : ''}`}\n                  onClick={() => {\n                    if (!this.isAnimating && index !== this.currentIndex) {\n                      this.isAnimating = true;\n                      this.currentIndex = index;\n                      this.updateVisibleTestimonial();\n                      setTimeout(() => {\n                        this.isAnimating = false;\n                      }, 500);\n                    }\n                  }}\n                />\n              ))}\n            </div>\n          )}\n\n          {/* Navigation buttons */}\n          {this.testimonialCount > 1 && (\n            <div class=\"carousel-navigation\">\n              <button \n                class=\"nav-button prev\" \n                disabled={!hasPrev}\n                onClick={this.goToPrevious}\n                aria-label=\"Previous testimonial\"\n              >\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M19 12H5M5 12L12 19M5 12L12 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </button>\n              <button \n                class=\"nav-button next\" \n                disabled={!hasNext}\n                onClick={this.goToNext}\n                aria-label=\"Next testimonial\"\n              >\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/af-testimonial-stat/af-testimonial-stat.css

@@ -0,0 +1,41 @@
+:host {
+  display: block;
+  flex: 1;
+  min-width: 0;
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.stat--accent {
+  border-left: 2px solid var(--colour-background-border-active, #8a7049);
+  padding-left: 16px;
+  min-height: 76px;
+  justify-content: center;
+}
+
+.stat-value {
+  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;
+  font-size: 44px;
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: -0.88px;
+  color: var(--colour-typography-heading-secondary, #8a7049);
+  margin: 0;
+}
+
+.stat-description {
+  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: var(--colour-typography-body-dark, #14343b);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+