@affinda/wc 0.0.6 → 0.0.8

package/dist/collection/components/af-logo-well/af-logo-well.css

@@ -0,0 +1,27 @@
+:host {
+  display: inline-block;
+}
+
+.logo-well {
+  background: var(--colour-tints-inkwell-600, #1A3038);
+  border-radius: 16px;
+  height: 88px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 40px;
+  box-sizing: border-box;
+  min-width: 120px;
+}
+
+::slotted(img) {
+  max-height: 40px;
+  width: auto;
+  display: block;
+  filter: brightness(0) invert(1); /* Make logos white */
+}
+
+::slotted(div) {
+  white-space: nowrap;
+}
+

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

@@ -0,0 +1,22 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A rounded container for displaying client logos
+ */
+export class AfLogoWell {
+    render() {
+        return (h(Host, { key: '6443fda91c37fd9f2efd49fbd10b1899f311cd54' }, h("div", { key: '30ec1e2891dfd89af7cc310986d3c5c48e05c556', class: "logo-well" }, h("slot", { key: '4601797d3cef6ed117dc6c93083652dd22f51f05' }))));
+    }
+    static get is() { return "af-logo-well"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-logo-well.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-logo-well.css"]
+        };
+    }
+}
+//# sourceMappingURL=af-logo-well.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-logo-well.js","sourceRoot":"","sources":["../../../src/components/af-logo-well/af-logo-well.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,UAAU;IACrB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,WAAW;gBACpB,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * A rounded container for displaying client logos\n */\n@Component({\n  tag: 'af-logo-well',\n  styleUrl: 'af-logo-well.css',\n  shadow: true,\n})\nexport class AfLogoWell {\n  render() {\n    return (\n      <Host>\n        <div class=\"logo-well\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

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

@@ -37,6 +37,21 @@
   flex-shrink: 0;
 }
 
+/* Mobile menu toggle button */
+.mobile-menu-toggle {
+  display: none;
+  background: none;
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  color: var(--colour-brand-inkwell, #14343b);
+  margin-left: auto;
+}
+
+.mobile-menu-toggle svg {
+  display: block;
+}
+
 .nav-links {
   display: flex;
   align-items: center;
@@ -86,28 +101,50 @@
     padding: 8px 16px;
     flex-direction: column;
     border-radius: 16px;
-    gap: 16px;
+    gap: 0;
   }
 
   .navbar-left {
     width: 100%;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
     gap: 16px;
-    align-items: flex-start;
   }
 
+  /* Show hamburger button on mobile */
+  .mobile-menu-toggle {
+    display: flex;
+  }
+
+  /* Hide nav links by default on mobile */
   .nav-links {
+    display: none;
     width: 100%;
     flex-direction: column;
     align-items: stretch;
     gap: 0;
+    margin-top: 16px;
   }
 
+  /* Show nav links when menu is open */
+  .nav-links.mobile-open {
+    display: flex;
+  }
+
+  /* Hide right section by default on mobile */
   .navbar-right {
+    display: none;
     width: 100%;
     flex-direction: column;
     gap: 12px;
     align-items: stretch;
+    margin-top: 16px;
+  }
+
+  /* Show right section when menu is open */
+  .navbar-right.mobile-open {
+    display: flex;
   }
 
   .nav-actions {

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

@@ -2,10 +2,17 @@ import { h, Host } from "@stencil/core";
 /**
  * A full-width navigation bar component that provides the main site navigation.
  * Features a pill-shaped container with logo, navigation links, and action buttons.
+ * Includes mobile hamburger menu.
  */
 export class AfNavbar {
+    constructor() {
+        this.mobileMenuOpen = false;
+        this.toggleMobileMenu = () => {
+            this.mobileMenuOpen = !this.mobileMenuOpen;
+        };
+    }
     render() {
-        return (h(Host, { key: 'a66b7e6939aebec67d26604dea422ec2e64fe6bd' }, h("nav", { key: '54064edc20beeafacafd2b43b25bfa9fc6e0e362', class: "navbar-container" }, h("div", { key: '2020a0761f646c0a13cc604605d3b9d5b1625278', class: "navbar" }, h("div", { key: '6038de1eba48a2bedf7e689bb65521406fc6b8b1', class: "navbar-left" }, h("div", { key: '63f31053e7d3d1402f2a1e88a4ae2171f9e00d4f', class: "logo" }, h("slot", { key: 'bf73abaf20be9cfcaa6328fe8ac224d109944bef', name: "logo" })), h("div", { key: 'c9cc09537d26c55d319f08c4622b17248f6ffba4', class: "nav-links" }, h("slot", { key: '5c2d8df163e2fd9967492d39522df1e11dfcd977', name: "start" }))), h("div", { key: '45265b4d765ad52a33f81efa80e9daa910948e1c', class: "navbar-right" }, h("div", { key: '48c913dd3d8fa17ee7eb2e9a41f9493929cd7af0', class: "nav-actions" }, h("slot", { key: '9d144675950a723d9ff004f5e1d0bad83f372d7e', name: "end" })), h("div", { key: 'bd10fc8edaef5f85382e53abf12b0686ec4c6acd', class: "nav-button" }, h("slot", { key: 'c3c01e44c37a1d51f20a29ce059a02a94094f377', name: "button" })))))));
+        return (h(Host, { key: '305d9415a3c14b2dc352588171d4677f4be4a1af' }, h("nav", { key: 'c509365f0056b0f26d8e3aea98acda04d29d4387', class: "navbar-container" }, h("div", { key: '722fd37a76e7367f0e7cd22729f711e8164b9d60', class: "navbar" }, h("div", { key: 'e0e8d341394b30f4badf5062b899123d691123a1', class: "navbar-left" }, h("div", { key: '145ab6a0ff46f0e21b429b8e2d881404d1d6c24c', class: "logo" }, h("slot", { key: '447d9abfa74c008afac07d3d0386b26ef292ec23', name: "logo" })), h("button", { key: '1f3e5512ea1ab6ca5b6a3a1455a9ff9fa9a2c8e3', class: "mobile-menu-toggle", onClick: this.toggleMobileMenu, "aria-label": "Toggle navigation menu", "aria-expanded": this.mobileMenuOpen ? 'true' : 'false' }, this.mobileMenuOpen ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M18 6L6 18M6 6l12 12", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M3 12h18M3 6h18M3 18h18", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '277226e4c433ad4377810c1e3e894b0d9de11b05', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: 'f95617e99651d0e2a4fa28a08fbe5452a8f95aa3', name: "start" }))), h("div", { key: 'ad7b9cf31ce290303df0af868e369bc79983fff4', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: '817c73031c45579ec13da6d53bfe1753bcd1e0ef', class: "nav-actions" }, h("slot", { key: 'e18d0c55b346722784640c37bbb5e5fe05fec5c0', name: "end" })), h("div", { key: '296dd2c84f0a59c54741b40a6333cfff5ec7d200', class: "nav-button" }, h("slot", { key: 'd94063758598f14888587d93b5b299f593b2cd31', name: "button" })))))));
     }
     static get is() { return "af-navbar"; }
     static get encapsulation() { return "shadow"; }
@@ -19,5 +26,10 @@ export class AfNavbar {
             "$": ["af-navbar.css"]
         };
     }
+    static get states() {
+        return {
+            "mobileMenuOpen": {}
+        };
+    }
 }
 //# sourceMappingURL=af-navbar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"af-navbar.js","sourceRoot":"","sources":["../../../src/components/af-navbar/af-navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,QAAQ;IACnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B,4DAAK,KAAK,EAAC,QAAQ;oBAEjB,4DAAK,KAAK,EAAC,aAAa;wBACtB,4DAAK,KAAK,EAAC,MAAM;4BACf,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;wBACN,4DAAK,KAAK,EAAC,WAAW;4BACpB,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF;oBAGN,4DAAK,KAAK,EAAC,cAAc;wBACvB,4DAAK,KAAK,EAAC,aAAa;4BACtB,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACpB;wBACN,4DAAK,KAAK,EAAC,YAAY;4BACrB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n */\n@Component({\n  tag: 'af-navbar',\n  styleUrl: 'af-navbar.css',\n  shadow: true\n})\nexport class AfNavbar {\n  render() {\n    return (\n      <Host>\n        <nav class=\"navbar-container\">\n          <div class=\"navbar\">\n            {/* Left section: Logo + Nav Links */}\n            <div class=\"navbar-left\">\n              <div class=\"logo\">\n                <slot name=\"logo\"></slot>\n              </div>\n              <div class=\"nav-links\">\n                <slot name=\"start\"></slot>\n              </div>\n            </div>\n\n            {/* Right section: Actions + Button */}\n            <div class=\"navbar-right\">\n              <div class=\"nav-actions\">\n                <slot name=\"end\"></slot>\n              </div>\n              <div class=\"nav-button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-navbar.js","sourceRoot":"","sources":["../../../src/components/af-navbar/af-navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1D;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAMW,mBAAc,GAAY,KAAK,CAAC;QAEjC,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC;QAC7C,CAAC,CAAC;KAkDH;IAhDC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B,4DAAK,KAAK,EAAC,QAAQ;oBAEjB,4DAAK,KAAK,EAAC,aAAa;wBACtB,4DAAK,KAAK,EAAC,MAAM;4BACf,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;wBAGN,+DACE,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAE,IAAI,CAAC,gBAAgB,gBACnB,wBAAwB,mBACpB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IAEpD,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CACrB,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc;4BAC/E,YAAM,CAAC,EAAC,sBAAsB,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CAC5F,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc;4BAC/E,YAAM,CAAC,EAAC,yBAAyB,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CAC/F,CACP,CACM;wBAET,4DAAK,KAAK,EAAE,aAAa,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE;4BACjE,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF;oBAGN,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE;wBACpE,4DAAK,KAAK,EAAC,aAAa;4BACtB,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACpB;wBACN,4DAAK,KAAK,EAAC,YAAY;4BACrB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;CACF","sourcesContent":["import { Component, State, h, Host } from '@stencil/core';\n\n/**\n * A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n * Includes mobile hamburger menu.\n */\n@Component({\n  tag: 'af-navbar',\n  styleUrl: 'af-navbar.css',\n  shadow: true\n})\nexport class AfNavbar {\n  @State() mobileMenuOpen: boolean = false;\n\n  private toggleMobileMenu = () => {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\n  };\n\n  render() {\n    return (\n      <Host>\n        <nav class=\"navbar-container\">\n          <div class=\"navbar\">\n            {/* Left section: Logo + Nav Links */}\n            <div class=\"navbar-left\">\n              <div class=\"logo\">\n                <slot name=\"logo\"></slot>\n              </div>\n              \n              {/* Hamburger menu button - mobile only */}\n              <button \n                class=\"mobile-menu-toggle\"\n                onClick={this.toggleMobileMenu}\n                aria-label=\"Toggle navigation menu\"\n                aria-expanded={this.mobileMenuOpen ? 'true' : 'false'}\n              >\n                {this.mobileMenuOpen ? (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M18 6L6 18M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                ) : (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M3 12h18M3 6h18M3 18h18\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                )}\n              </button>\n              \n              <div class={`nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n                <slot name=\"start\"></slot>\n              </div>\n            </div>\n\n            {/* Right section: Actions + Button */}\n            <div class={`navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n              <div class=\"nav-actions\">\n                <slot name=\"end\"></slot>\n              </div>\n              <div class=\"nav-button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,52 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.section {
+  width: 100%;
+  position: relative;
+}
+
+/* Padding variants */
+.padding-tight {
+  padding: 48px 0;
+}
+
+.padding-default {
+  padding: 96px 0;
+}
+
+.padding-loose {
+  padding: 120px 0 96px;
+}
+
+/* Background variants */
+.bg-white {
+  background-color: var(--colour-background-white, #FFFFFF);
+}
+
+.bg-level1 {
+  background-color: var(--colour-background-level-1, #E8EEED);
+}
+
+.bg-dark,
+.bg-inkwell {
+  background-color: var(--colour-brand-inkwell, #14343B);
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+  .padding-tight {
+    padding: 32px 0;
+  }
+  
+  .padding-default {
+    padding: 64px 0;
+  }
+  
+  .padding-loose {
+    padding: 80px 0 64px;
+  }
+}
+

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

@@ -0,0 +1,95 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Section layout component for consistent spacing and backgrounds
+ */
+export class AfSection {
+    constructor() {
+        /** Padding variant */
+        this.padding = 'default';
+        /** Background color */
+        this.background = 'white';
+        /** Whether to include a Container wrapper */
+        this.container = true;
+    }
+    render() {
+        const content = h("slot", { key: '269517d1852d1e459db9dc2673b88b4d8042f61b' });
+        return (h(Host, { key: 'a080f296f2f7178db29e973cce05048847e66c83' }, h("div", { key: '54bdca28715bdd18e38d85e2ed95a5699f793d3e', class: `section padding-${this.padding} bg-${this.background}` }, this.container ? (h("af-container", null, content)) : content)));
+    }
+    static get is() { return "af-section"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-section.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-section.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'tight' | 'default' | 'loose'",
+                    "resolved": "\"default\" | \"loose\" | \"tight\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Padding variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding",
+                "defaultValue": "'default'"
+            },
+            "background": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'white' | 'level1' | 'dark' | 'inkwell'",
+                    "resolved": "\"dark\" | \"inkwell\" | \"level1\" | \"white\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background",
+                "defaultValue": "'white'"
+            },
+            "container": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to include a Container wrapper"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "container",
+                "defaultValue": "true"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-section.js","sourceRoot":"","sources":["../../../src/components/af-section/af-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAOH,MAAM,OAAO,SAAS;IANtB;QAOE,sBAAsB;QACd,YAAO,GAAkC,SAAS,CAAC;QAE3D,uBAAuB;QACf,eAAU,GAA4C,OAAO,CAAC;QAEtE,6CAA6C;QACrC,cAAS,GAAY,IAAI,CAAC;KAenC;IAbC,MAAM;QACJ,MAAM,OAAO,GAAG,8DAAa,CAAC;QAE9B,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,OAAO,IAAI,CAAC,UAAU,EAAE,IAChE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,wBAAe,OAAO,CAAgB,CACvC,CAAC,CAAC,CAAC,OAAO,CACP,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds\n */\n@Component({\n  tag: 'af-section',\n  styleUrl: 'af-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfSection {\n  /** Padding variant */\n  @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n  \n  /** Background color */\n  @Prop() background: 'white' | 'level1' | 'dark' | 'inkwell' = 'white';\n  \n  /** Whether to include a Container wrapper */\n  @Prop() container: boolean = true;\n\n  render() {\n    const content = <slot></slot>;\n    \n    return (\n      <Host>\n        <div class={`section padding-${this.padding} bg-${this.background}`}>\n          {this.container ? (\n            <af-container>{content}</af-container>\n          ) : content}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

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: 'b4a23c841092c119b7e8abd4249b75985f8edf95' }, h("div", { key: '65fec4f695a746ef51d4539b33dc166d4f1cb95c', class: "testimonial-card" }, h("div", { key: 'ad5ec6edb4fd3577f14d9cbcce925c1c68d6262e', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: '4e51da94bd106ae50c63186c7cbedee3e86d341e', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: '68eea0c228eb7d3e92a3cbab11ee4d1b3d9e590e', class: "testimonial-logo" }, h("img", { key: '5f2225a849003d6b4b5ccc08073da121e3d27cf4', src: this.logoImage, alt: "Company logo" })))), h("div", { key: '9e6dbb02f4d87829af74c66029bd93ce3f3c65dd', class: "testimonial-content" }, h("div", { key: 'efd25f8dc722d79006835406a972da0d5fd7f77f', class: "testimonial-quote-section" }, h("div", { key: '46064d44eeed1712130c6c24007f5481b9cc3cf7', class: "testimonial-quote-icon" }, h("slot", { key: 'e1389d94a5cbb1181862963fd799d7c14b2d3ee5', name: "quote-icon" }, h("svg", { key: '6a935e48920b1964036f02fbc830b1319a20f057', width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cf0de3883bdf5a39cd377591ec34a02d75afd39c', 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: 'db71848c9ae10a2a24cdcb6797f8f2b4fbf6cea9', class: "testimonial-text" }, this.quote), h("p", { key: 'ad7c4fd0a91a1c2ea42d4abcc3ab949e51c3d313', class: "testimonial-attribution" }, this.attribution)), h("div", { key: '8042208ced311c39c8d91968ac1bc37c76971ec1', class: "testimonial-stats" }, h("slot", { key: 'b5c40fdb83b6776b2de0a57e37045a1fde50e78f', name: "stats" })), h("div", { key: '1b19fc1264136cf90cb0c32841678129f5dd711d', class: "testimonial-footer" }, h("div", { key: '77058648a8e25ed63b622c7bbf873c299e39e42d', class: "testimonial-nav" }, h("slot", { key: '9231316a8dd17ae30c754e1ff1ba9ea70c327c82', name: "navigation" })), this.readMoreLink && (h("a", { key: '01072189417f44da780b5c5a8849e9e66a2a9b0d', href: this.readMoreLink, class: "testimonial-cta" }, h("span", { key: '8c5008a42d4c4160bb4950f562872a67ac26c15c' }, "Read full story"), h("svg", { key: '881176b723a0f4c3d941d2be0f8983ddc0468ee6', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'd8fd8469aa2c45286891751b269c692ee90426c0', 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"]}