@affinda/wc 0.0.15 → 0.0.16

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

@@ -0,0 +1,126 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Tag displays a label in a styled container.
+ * Perfect for categorization, topics, or metadata display.
+ *
+ * @example
+ * ```html
+ * <af-tag>AI</af-tag>
+ * <af-tag size="small">Machine Learning</af-tag>
+ * <af-tag size="large" variant="light">Document Processing</af-tag>
+ * ```
+ */
+export class AfTag {
+    constructor() {
+        /**
+         * The size of the tag
+         * - `x-small` - Compact tag with minimal padding
+         * - `small` - Small tag with moderate padding
+         * - `large` - Large tag with generous padding
+         */
+        this.size = 'small';
+        /**
+         * The visual variant of the tag
+         * - `sand` - Soft-clay/tan colored background (default)
+         * - `light` - Mist-green/light colored background
+         */
+        this.variant = 'sand';
+    }
+    render() {
+        const TagElement = this.href ? 'a' : 'span';
+        const linkProps = this.href ? { href: this.href } : {};
+        return (h(Host, { key: '82b1f25a939716973c927f59e82808572004e871' }, h(TagElement, { key: 'e4a524e0f4dd496ca5485d865549bd0b063bd4ac', class: {
+                'tag': true,
+                [`size-${this.size}`]: true,
+                [`variant-${this.variant}`]: true,
+            }, ...linkProps }, h("slot", { key: '07202b985638722997e8aff2bad13ed5d1aa8d2c' }))));
+    }
+    static get is() { return "af-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-tag.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TagSize",
+                    "resolved": "\"large\" | \"small\" | \"x-small\"",
+                    "references": {
+                        "TagSize": {
+                            "location": "local",
+                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-tag/af-tag.tsx",
+                            "id": "src/components/af-tag/af-tag.tsx::TagSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the tag\n- `x-small` - Compact tag with minimal padding\n- `small` - Small tag with moderate padding\n- `large` - Large tag with generous padding"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'small'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TagVariant",
+                    "resolved": "\"light\" | \"sand\"",
+                    "references": {
+                        "TagVariant": {
+                            "location": "local",
+                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-tag/af-tag.tsx",
+                            "id": "src/components/af-tag/af-tag.tsx::TagVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual variant of the tag\n- `sand` - Soft-clay/tan colored background (default)\n- `light` - Mist-green/light colored background"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'sand'"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL to navigate to when the tag is clicked (makes the tag a link)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-tag.js","sourceRoot":"","sources":["../../../src/components/af-tag/af-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAKzD;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,KAAK;IALlB;QAME;;;;;WAKG;QACK,SAAI,GAAY,OAAO,CAAC;QAEhC;;;;WAIG;QACK,YAAO,GAAe,MAAM,CAAC;KA0BtC;IAnBC,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;QAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAEvD,OAAO,CACL,EAAC,IAAI;YACH,EAAC,UAAU,qDACT,KAAK,EAAE;oBACL,KAAK,EAAE,IAAI;oBACX,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;oBAC3B,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;iBAClC,KACG,SAAS;gBAEb,8DAAQ,CACG,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type TagSize = 'x-small' | 'small' | 'large';\nexport type TagVariant = 'sand' | 'light';\n\n/**\n * Tag displays a label in a styled container.\n * Perfect for categorization, topics, or metadata display.\n * \n * @example\n * ```html\n * <af-tag>AI</af-tag>\n * <af-tag size=\"small\">Machine Learning</af-tag>\n * <af-tag size=\"large\" variant=\"light\">Document Processing</af-tag>\n * ```\n */\n@Component({\n  tag: 'af-tag',\n  styleUrl: 'af-tag.css',\n  shadow: true\n})\nexport class AfTag {\n  /**\n   * The size of the tag\n   * - `x-small` - Compact tag with minimal padding\n   * - `small` - Small tag with moderate padding\n   * - `large` - Large tag with generous padding\n   */\n  @Prop() size: TagSize = 'small';\n\n  /**\n   * The visual variant of the tag\n   * - `sand` - Soft-clay/tan colored background (default)\n   * - `light` - Mist-green/light colored background\n   */\n  @Prop() variant: TagVariant = 'sand';\n\n  /**\n   * The URL to navigate to when the tag is clicked (makes the tag a link)\n   */\n  @Prop() href?: string;\n\n  render() {\n    const TagElement = this.href ? 'a' : 'span';\n    const linkProps = this.href ? { href: this.href } : {};\n\n    return (\n      <Host>\n        <TagElement\n          class={{\n            'tag': true,\n            [`size-${this.size}`]: true,\n            [`variant-${this.variant}`]: true,\n          }}\n          {...linkProps}\n        >\n          <slot />\n        </TagElement>\n      </Host>\n    );\n  }\n}\n\n"]}

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

@@ -4,7 +4,8 @@
 }
 
 .testimonial-card {
-  background: var(--colour-background-level-1, #e8eeed);
+  /* Uses themed level-1 background from parent Section */
+  background: var(--af-background-level-1, var(--colour-mistgreen-200, #e8eeed));
   border-radius: var(--border-radius-card-level-1, 32px);
   overflow: hidden;
   display: flex;
@@ -12,12 +13,17 @@
   box-sizing: border-box;
 }
 
-/* Image side - 519px wide */
+/* Image side - 40.5% of card width (519px of 1280px in Figma) */
 .testimonial-image {
   position: relative;
-  width: 519px;
+  width: 40.5%;
+  min-width: 300px;
+  /* Minimum for readability */
+  max-width: 519px;
+  /* Cap at Figma design width */
   height: 100%;
-  background: #000000;
+  /* Dark background for image overlay effect - always dark regardless of theme */
+  background: var(--colour-brand-inkwell, #14343b);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -54,8 +60,9 @@
   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);
+  /* Subtle border using themed border token */
+  border: 1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));
+  border-left: 1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));
   box-sizing: border-box;
 }
 
@@ -64,48 +71,47 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
+  min-height: 0;
+  /* Allow flex item to shrink */
+  overflow: hidden;
 }
 
 .testimonial-quote-icon {
   width: 48px;
   height: 48px;
-  color: var(--colour-brand-inkwell, #14343b);
+  /* Quote icon uses themed secondary heading color (gold/ochre accent) */
+  color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));
   flex-shrink: 0;
 }
 
+/* Quote text - layout only, typography comes from af-text */
 .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;
 }
 
+/* Attribution uses body-dark color for emphasis */
 .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;
+  --af-typography-body-default: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));
 }
 
 .testimonial-stats {
   display: flex;
   gap: 32px;
   width: 100%;
+  flex-shrink: 0;
 }
 
 .testimonial-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-top: 1px solid var(--colour-background-border-default, #d1ddda);
+  /* Themed border color */
+  border-top: 1px solid var(--af-background-border-default, var(--colour-mistgreen-400, #d1ddda));
   padding-top: 32px;
+  flex-shrink: 0;
+  min-height: 48px;
 }
 
 .testimonial-nav {
@@ -113,31 +119,9 @@
   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;
+.testimonial-nav-buttons {
+  display: flex;
+  gap: 12px;
 }
 
-
+/* CTA button is now handled by af-button atom component */

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

@@ -1,7 +1,31 @@
 import { h, Host } from "@stencil/core";
 export class AfTestimonial {
+    constructor() {
+        /**
+         * Whether to show built-in navigation buttons (used when in a carousel)
+         */
+        this.showNavigation = false;
+        /**
+         * Whether the previous button is enabled
+         */
+        this.hasPrev = false;
+        /**
+         * Whether the next button is enabled
+         */
+        this.hasNext = false;
+        this.handlePrev = () => {
+            this.navPrev.emit();
+        };
+        this.handleNext = () => {
+            this.navNext.emit();
+        };
+    }
     render() {
-        return (h(Host, { key: 'f913887a6afa873c7a3c36101270881bf66fbd62' }, h("div", { key: 'bf6f8f9f769a0086534a51f31bf605310ba96fcc', class: "testimonial-card" }, h("div", { key: '10101d05e22d08dacd8a55de8276a5b0bb582b65', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: 'f323a77de1dc85bd9ed8385a6dbefd65081c3afb', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: '4fbd29c40e30700ba994372418f6c2be672124eb', class: "testimonial-logo" }, h("img", { key: '20871205ac3472a73e597737c9d0b72dc17f347e', src: this.logoImage, alt: "Company logo" })))), h("div", { key: 'b1e0702b8a274fc877eadc2ea951915225d0580d', class: "testimonial-content" }, h("div", { key: '978370df3c32658a253bc60a7cbed9488835b35f', class: "testimonial-quote-section" }, h("div", { key: 'e7dafdb960d1807c5451b7e836e18356f3d7f405', class: "testimonial-quote-icon" }, h("slot", { key: '20bc41c1ac125003cbcbb46b3ae5b01b019ea132', name: "quote-icon" }, h("svg", { key: '16131a28d752b5c376d7ecbdc10578c2a06f9b2d', width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1b7a826418d6a2bd739061b7f9da2d7f70f55630', 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: '78e6829551712546f6c71245c9609eff3cc123bf', class: "testimonial-text" }, this.quote), h("p", { key: '2339374f5fe07cf2d5b2fb56978c1a1516c4fe92', class: "testimonial-attribution" }, this.attribution)), h("div", { key: '72fd3dd7dbfee193916b3c7d3acaf03a7540bf2d', class: "testimonial-stats" }, h("slot", { key: '531f04e6dcdfbfb3acde67955561b175cdf3a00d', name: "stats" })), h("div", { key: 'b7caadc3a9de19fea9f5556e5c74c24a726c467f', class: "testimonial-footer" }, h("div", { key: 'c5160dcf171ca997e29346a2cbb0978a1bc88161', class: "testimonial-nav" }, h("slot", { key: 'bc85749aed00c9b9acc870a20b2ccf634fc34af8', name: "navigation" })), this.readMoreLink && (h("a", { key: '3e968d6ad981ad0d0dc8b3c47e5f64ff0374be74', href: this.readMoreLink, class: "testimonial-cta" }, h("span", { key: '14ca40ff2260d107a205623549839ede3212a6f4' }, "Read full story"), h("svg", { key: 'eb0d55ed8d4219efbee4c0125be4420bf5b23393', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '5ccafb8ab0b5af8050cb7a60a02667f3c0b92cb1', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))));
+        return (h(Host, { key: 'aa2ad6cdbcba23aac44ba04c80928c0f83a50903' }, h("div", { key: 'e9417c5451eb5c7118760b8b06b97a3debbb49af', class: "testimonial-card" }, h("div", { key: '14f69eda1e3a21202014d9ff92fb7898d4cd6250', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: '6447edb4eb0e7d1dd05432038f717820b6053cae', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: 'd052c5613090c21d7eeed60dba77bcb3dbfbc21a', class: "testimonial-logo" }, h("img", { key: 'f8be04a27d969dffd59cf9bad3bd9bbc9ddeb1d3', src: this.logoImage, alt: "Company logo" })))), h("div", { key: '25d578ea0f78abacdd42bf9edbcf925680069da5', class: "testimonial-content" }, h("div", { key: '92458d4319c9f311bbcb296a6422f63b5c90aae6', class: "testimonial-quote-section" }, h("div", { key: '9f0e3dd17d27211afb49b8257ce896bd63490825', class: "testimonial-quote-icon" }, h("slot", { key: 'fee068be75df3e19436cca1e340ac7b4abdc9b6a', name: "quote-icon" }, h("af-icon", { key: '54416234954357aaaf49864515b87017f45aa09d', name: "quote", size: 48 }))), h("af-text", { key: '3a15866eb88613a956bfcbf107a9da0d51d59526', variant: "xlarge", class: "testimonial-text" }, this.quote), h("af-text", { key: '6c9a0dd1c16bbd8c76ca364bea329c2bf8ee0425', variant: "xlarge", class: "testimonial-attribution" }, this.attribution)), h("div", { key: '866aeb8fa8338d23354d5f4b7be63c5d9c0eaacb', class: "testimonial-stats" }, h("slot", { key: 'f7b559060fb9f9bbba39c2a67c23204d7cbf8bdd', name: "stats" })), h("div", { key: 'b19ad4b37a3ba6c85846732f991870e8312ef1d5', class: "testimonial-footer" }, h("div", { key: 'b1f64564c4dbd14347e32d782874be699d0745b0', class: "testimonial-nav" }, this.showNavigation ? (
+        // Render built-in navigation buttons
+        h("div", { class: "testimonial-nav-buttons" }, h("af-icon-button", { variant: "secondary", disabled: !this.hasPrev, onClick: this.handlePrev, ariaLabel: "Previous testimonial" }, h("af-icon", { name: "arrow-left", size: 24 })), h("af-icon-button", { variant: "secondary", disabled: !this.hasNext, onClick: this.handleNext, ariaLabel: "Next testimonial" }, h("af-icon", { name: "arrow-right", size: 24 })))) : (
+        // Allow custom navigation via slot
+        h("slot", { name: "navigation" }))), this.readMoreLink && (h("af-button", { key: '41adc9217b698b1df0f6075f5aa4ee0c2683632f', variant: "secondary", href: this.readMoreLink }, "Read full story", h("af-icon", { key: '3cec7eb5a8514427a257cc6f228e1e5bde2cc713', slot: "icon-right", name: "arrow-right", size: 24 }))))))));
     }
     static get is() { return "af-testimonial"; }
     static get encapsulation() { return "scoped"; }
@@ -111,8 +135,101 @@ export class AfTestimonial {
                 "setter": false,
                 "reflect": false,
                 "attribute": "read-more-link"
+            },
+            "showNavigation": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show built-in navigation buttons (used when in a carousel)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-navigation",
+                "defaultValue": "false"
+            },
+            "hasPrev": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the previous button is enabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-prev",
+                "defaultValue": "false"
+            },
+            "hasNext": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the next button is enabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-next",
+                "defaultValue": "false"
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "navPrev",
+                "name": "navPrev",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the previous button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "navNext",
+                "name": "navNext",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the next button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
 }
 //# sourceMappingURL=af-testimonial.js.map

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

@@ -1 +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"]}
+{"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,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,aAAa;IAN1B;QAgCE;;WAEG;QACsB,mBAAc,GAAY,KAAK,CAAC;QAEzD;;WAEG;QACsB,YAAO,GAAY,KAAK,CAAC;QAElD;;WAEG;QACsB,YAAO,GAAY,KAAK,CAAC;QAY1C,eAAU,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACtB,CAAC,CAAC;QAEM,eAAU,GAAG,GAAG,EAAE;YACxB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACtB,CAAC,CAAC;KA+EH;IA7EC,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,gEAAS,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,GAAI,CAC7B,CACH;wBAGN,gEAAS,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAW;wBAEzE,gEAAS,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,WAAW,CAAW,CAClF;oBAGN,4DAAK,KAAK,EAAC,mBAAmB;wBAC5B,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;oBAGN,4DAAK,KAAK,EAAC,oBAAoB;wBAC7B,4DAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;wBACrB,qCAAqC;wBACrC,WAAK,KAAK,EAAC,yBAAyB;4BAClC,sBACE,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,EACvB,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,SAAS,EAAC,sBAAsB;gCAEhC,eAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAE,EAAE,GAAI,CACxB;4BACjB,sBACE,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,EACvB,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,SAAS,EAAC,kBAAkB;gCAE5B,eAAS,IAAI,EAAC,aAAa,EAAC,IAAI,EAAE,EAAE,GAAI,CACzB,CACb,CACP,CAAC,CAAC,CAAC;wBACF,mCAAmC;wBACnC,YAAM,IAAI,EAAC,YAAY,GAAQ,CAChC,CACG;wBACL,IAAI,CAAC,YAAY,IAAI,CACpB,kEAAW,OAAO,EAAC,WAAW,EAAC,IAAI,EAAE,IAAI,CAAC,YAAY;;4BAEpD,gEAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,aAAa,EAAC,IAAI,EAAE,EAAE,GAAI,CAChD,CACb,CACG,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter } 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  /**\n   * Whether to show built-in navigation buttons (used when in a carousel)\n   */\n  @Prop({ mutable: true }) showNavigation: boolean = false;\n\n  /**\n   * Whether the previous button is enabled\n   */\n  @Prop({ mutable: true }) hasPrev: boolean = false;\n\n  /**\n   * Whether the next button is enabled\n   */\n  @Prop({ mutable: true }) hasNext: boolean = false;\n\n  /**\n   * Emitted when the previous button is clicked\n   */\n  @Event() navPrev!: EventEmitter<void>;\n\n  /**\n   * Emitted when the next button is clicked\n   */\n  @Event() navNext!: EventEmitter<void>;\n\n  private handlePrev = () => {\n    this.navPrev.emit();\n  };\n\n  private handleNext = () => {\n    this.navNext.emit();\n  };\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 af-icon atom with slot for flexibility */}\n              <div class=\"testimonial-quote-icon\">\n                <slot name=\"quote-icon\">\n                  <af-icon name=\"quote\" size={48} />\n                </slot>\n              </div>\n\n              {/* Quote text - using af-text atom for proper theming */}\n              <af-text variant=\"xlarge\" class=\"testimonial-text\">{this.quote}</af-text>\n              {/* Attribution - using af-text atom with dark variant styling */}\n              <af-text variant=\"xlarge\" class=\"testimonial-attribution\">{this.attribution}</af-text>\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                {this.showNavigation ? (\n                  // Render built-in navigation buttons\n                  <div class=\"testimonial-nav-buttons\">\n                    <af-icon-button\n                      variant=\"secondary\"\n                      disabled={!this.hasPrev}\n                      onClick={this.handlePrev}\n                      ariaLabel=\"Previous testimonial\"\n                    >\n                      <af-icon name=\"arrow-left\" size={24} />\n                    </af-icon-button>\n                    <af-icon-button\n                      variant=\"secondary\"\n                      disabled={!this.hasNext}\n                      onClick={this.handleNext}\n                      ariaLabel=\"Next testimonial\"\n                    >\n                      <af-icon name=\"arrow-right\" size={24} />\n                    </af-icon-button>\n                  </div>\n                ) : (\n                  // Allow custom navigation via slot\n                  <slot name=\"navigation\"></slot>\n                )}\n              </div>\n              {this.readMoreLink && (\n                <af-button variant=\"secondary\" href={this.readMoreLink}>\n                  Read full story\n                  <af-icon slot=\"icon-right\" name=\"arrow-right\" size={24} />\n                </af-button>\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

@@ -1,12 +1,12 @@
 :host {
   display: block;
   width: 100%;
-  overflow: hidden;
 }
 
 .testimonial-carousel {
   position: relative;
   width: 100%;
+  overflow: hidden;
 }
 
 .testimonial-slides {
@@ -24,74 +24,14 @@
   transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
 }
 
-/* Progress indicator */
+/* Progress indicator - wraps af-progress-line atom */
+/* Per Figma: centered below the card with horizontal padding */
 .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);
+  margin-left: auto;
+  margin-right: auto;
 }
 
-/* Navigation buttons - positioned bottom left of content area (not on image) */
-.carousel-navigation {
-  position: absolute;
-  bottom: 48px;
-  left: 50%;
-  margin-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;
-}
+/* Navigation is now rendered inside each testimonial's footer via props */
 

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

@@ -1,4 +1,12 @@
 import { h, Host } from "@stencil/core";
+/**
+ * TestimonialCarousel - Carousel for displaying multiple customer testimonials.
+ *
+ * Handles navigation between testimonials with progress indicator.
+ * Wrap in Section/Container for proper page layout and theming.
+ *
+ * @slot - Testimonial components to display in the carousel
+ */
 export class AfTestimonialCarousel {
     constructor() {
         this.currentIndex = 0;
@@ -42,12 +50,20 @@ export class AfTestimonialCarousel {
             this.observer.disconnect();
         }
     }
+    /**
+     * Listen for navigation events from testimonials
+     */
+    handleNavPrev() {
+        this.goToPrevious();
+    }
+    handleNavNext() {
+        this.goToNext();
+    }
     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();
@@ -55,26 +71,30 @@ export class AfTestimonialCarousel {
         }
     }
     updateVisibleTestimonial() {
+        const hasPrev = this.currentIndex > 0;
+        const hasNext = this.currentIndex < this.testimonialCount - 1;
+        const showNav = this.testimonialCount > 1;
         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';
+            // Set navigation props on testimonials (directly on the element for Stencil)
+            testimonial.showNavigation = showNav;
+            testimonial.hasPrev = hasPrev;
+            testimonial.hasNext = hasNext;
         });
     }
+    /**
+     * Calculate progress value (0 to 1) based on current position
+     */
+    getProgress() {
+        if (this.testimonialCount <= 1)
+            return 0;
+        return (this.currentIndex + 1) / this.testimonialCount;
+    }
     render() {
-        const hasPrev = this.currentIndex > 0;
-        const hasNext = this.currentIndex < this.testimonialCount - 1;
-        return (h(Host, { key: '5fb510b14cc125949f4265e0b2b44ddd85a0fe82' }, h("div", { key: 'd40dc624996acb24689f47ccb108cd50791ba35c', class: "testimonial-carousel" }, h("div", { key: 'df0c0e42b475c652b14fafa3e3d96af543839eaa', class: "testimonial-slides" }, h("slot", { key: 'da7c0e18a5370b0b06526e86d5f482aa83fce08d' })), this.testimonialCount > 1 && (h("div", { key: '4988b2bbc14aa5d0b5ca8cbe1d26025bb4f59310', 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: 'e7964cffbe873d8c4bfa80696137f09b451799ca', class: "carousel-navigation" }, h("button", { key: 'f2fc1864f48ecb72e2114af40a849ba6d779afb7', class: "nav-button prev", disabled: !hasPrev, onClick: this.goToPrevious, "aria-label": "Previous testimonial" }, h("svg", { key: 'ac40cddba548d95f19b0e7729fea5d6fe923533e', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '90071385affb9512188b583cbd3dd60da4e6d7b7', d: "M19 12H5M5 12L12 19M5 12L12 5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'bd3095a3e9857c9fdd30a3f8cf78197b1890e9a2', class: "nav-button next", disabled: !hasNext, onClick: this.goToNext, "aria-label": "Next testimonial" }, h("svg", { key: 'dc2fd50a2c810c9af346cbb0432a44baf6c56219', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'de50488dc05d8fd669951d099376f65b9a7dfa26', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: '57b9644d20de065d6274f35f0aeac5e525a7f994' }, h("div", { key: '69033a6db2cb6242abd737ec98a841109a88d443', class: "testimonial-carousel" }, h("div", { key: 'b94d5bbd634eb445737afe8c0dc8f5795be50b4c', class: "testimonial-slides" }, h("slot", { key: 'a8481aaeeb8b818aa9d0ae0eeff5c30b33288acd' })), this.testimonialCount > 1 && (h("div", { key: '496d86deca071afeacb0d8eb4c273eefa592430e', class: "testimonial-progress" }, h("af-progress-line", { key: 'bb9c74ab68bb2dc247556e81ec07e39b7934e5ee', progress: this.getProgress() }))))));
     }
     static get is() { return "af-testimonial-carousel"; }
     static get encapsulation() { return "scoped"; }
@@ -96,5 +116,20 @@ export class AfTestimonialCarousel {
         };
     }
     static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "navPrev",
+                "method": "handleNavPrev",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "navNext",
+                "method": "handleNavNext",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=af-testimonial-carousel.js.map