@affinda/wc 0.0.15 → 0.0.17

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

@@ -1 +1 @@
-{"version":3,"file":"af-testimonial-carousel.js","sourceRoot":"","sources":["../../../src/components/af-testimonial-carousel/af-testimonial-carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAQnE,MAAM,OAAO,qBAAqB;IANlC;QAQW,iBAAY,GAAW,CAAC,CAAC;QACzB,gBAAW,GAAY,KAAK,CAAC;QAC7B,qBAAgB,GAAW,CAAC,CAAC;QAE9B,iBAAY,GAAkB,EAAE,CAAC;QA+CjC,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC;gBAAE,OAAO;YAExD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;YAC1C,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAEhC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAC3B,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC,CAAC;QAEM,aAAQ,GAAG,GAAG,EAAE;YACtB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,gBAAgB,GAAG,CAAC;gBAAE,OAAO;YAE/E,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;YAC1C,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAEhC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAC3B,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC,CAAC;KA+DH;IAjIC,gBAAgB;QACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAE1B,iEAAiE;QACjE,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACxC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;YAC/B,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IAEO,kBAAkB;QACxB,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAkB,CAAC;QAElG,IAAI,eAAe,CAAC,MAAM,KAAK,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC;YACxD,IAAI,CAAC,YAAY,GAAG,eAAe,CAAC;YACpC,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC,MAAM,CAAC;YAC/C,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;YAE7D,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACjC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;gBACtB,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAClC,CAAC;QACH,CAAC;IACH,CAAC;IAEO,wBAAwB;QAC9B,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE;YAC/C,MAAM,MAAM,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,GAAG,CAAC;YACjD,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,MAAM,IAAI,CAAC;YACvD,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;YACpE,WAAW,CAAC,KAAK,CAAC,aAAa,GAAG,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;QAClF,CAAC,CAAC,CAAC;IACL,CAAC;IA0BD,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QACtC,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;QAE9D,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,sBAAsB;gBAC/B,4DAAK,KAAK,EAAC,oBAAoB;oBAC7B,8DAAa,CACT;gBAGL,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAC5B,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/D,WACE,KAAK,EAAE,gBAAgB,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,EACpE,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,KAAK,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;4BACrD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;4BACxB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;4BAC1B,IAAI,CAAC,wBAAwB,EAAE,CAAC;4BAChC,UAAU,CAAC,GAAG,EAAE;gCACd,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;4BAC3B,CAAC,EAAE,GAAG,CAAC,CAAC;wBACV,CAAC;oBACH,CAAC,GACD,CACH,CAAC,CACE,CACP;gBAGA,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAC5B,4DAAK,KAAK,EAAC,qBAAqB;oBAC9B,+DACE,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,CAAC,OAAO,EAClB,OAAO,EAAE,IAAI,CAAC,YAAY,gBACf,sBAAsB;wBAEjC,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;4BACzD,6DAAM,CAAC,EAAC,+BAA+B,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CAC3H,CACC;oBACT,+DACE,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,CAAC,OAAO,EAClB,OAAO,EAAE,IAAI,CAAC,QAAQ,gBACX,kBAAkB;wBAE7B,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;4BACzD,6DAAM,CAAC,EAAC,iCAAiC,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CAC7H,CACC,CACL,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;CACF","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"]}
+{"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, Listen } from '@stencil/core';\n\n/**\n * TestimonialCarousel - Carousel for displaying multiple customer testimonials.\n * \n * Handles navigation between testimonials with progress indicator.\n * Wrap in Section/Container for proper page layout and theming.\n * \n * @slot - Testimonial components to display in the carousel\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  /**\n   * Listen for navigation events from testimonials\n   */\n  @Listen('navPrev')\n  handleNavPrev() {\n    this.goToPrevious();\n  }\n\n  @Listen('navNext')\n  handleNavNext() {\n    this.goToNext();\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      \n      if (this.testimonials.length > 0) {\n        this.currentIndex = 0;\n        this.updateVisibleTestimonial();\n      }\n    }\n  }\n\n  private updateVisibleTestimonial() {\n    const hasPrev = this.currentIndex > 0;\n    const hasNext = this.currentIndex < this.testimonialCount - 1;\n    const showNav = this.testimonialCount > 1;\n\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      // Set navigation props on testimonials (directly on the element for Stencil)\n      (testimonial as any).showNavigation = showNav;\n      (testimonial as any).hasPrev = hasPrev;\n      (testimonial as any).hasNext = hasNext;\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  /**\n   * Calculate progress value (0 to 1) based on current position\n   */\n  private getProgress(): number {\n    if (this.testimonialCount <= 1) return 0;\n    return (this.currentIndex + 1) / this.testimonialCount;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"testimonial-carousel\">\n          <div class=\"testimonial-slides\">\n            <slot></slot>\n          </div>\n          \n          {/* Progress indicator using af-progress-line atom */}\n          {this.testimonialCount > 1 && (\n            <div class=\"testimonial-progress\">\n              <af-progress-line progress={this.getProgress()} />\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

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

@@ -11,31 +11,24 @@
 }
 
 .stat--accent {
-  border-left: 2px solid var(--colour-background-border-active, #8a7049);
+  /* Themed active/accent border color */
+  border-left: 2px solid var(--af-background-border-active, var(--colour-softclay-800, #8a7049));
   padding-left: 16px;
   min-height: 76px;
   justify-content: center;
 }
 
+/* Stat value - override af-heading to use secondary color */
 .stat-value {
-  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;
-  font-size: 44px;
-  font-weight: 400;
-  line-height: 1;
+  /* Override the heading color to use secondary (gold/ochre) instead of primary */
+  --af-typography-heading-primary: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));
   letter-spacing: -0.88px;
-  color: var(--colour-typography-heading-secondary, #8a7049);
-  margin: 0;
+  white-space: nowrap;
 }
 
+/* Description - override af-text to use body-dark for emphasis */
 .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;
+  --af-typography-body-default: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));
   overflow: hidden;
   text-overflow: ellipsis;
-}
-
-
+}

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

@@ -7,7 +7,7 @@ export class AfTestimonialStat {
         this.accentBorder = false;
     }
     render() {
-        return (h(Host, { key: '7234425931dee2deff672a9e863b13eb5dd35c30' }, h("div", { key: '737dbdee95341fd7b8c213b6b9590f54c8039e7d', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("p", { key: '8de1db6ce9dcaf5a94a4c11b7cfbebed8274be9f', class: "stat-value" }, this.value), h("p", { key: 'd34154c4bc709a3e023ca16b991b7dca95402621', class: "stat-description" }, this.description))));
+        return (h(Host, { key: 'e3dc86a0d0368680dc03ab1a7260ccabd48def13' }, h("div", { key: '97cefaa49ab9fad117d3c541d9b58461ad216566', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("af-heading", { key: '49c03e5fe9c7ddbb31bb8d8a686cffa44517c176', level: 2, class: "stat-value" }, this.value), h("af-text", { key: '3b931281953a7d23d0bdfb540d48635576f84e1d', variant: "medium", class: "stat-description" }, this.description))));
     }
     static get is() { return "af-testimonial-stat"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1 +1 @@
-{"version":3,"file":"af-testimonial-stat.js","sourceRoot":"","sources":["../../../src/components/af-testimonial-stat/af-testimonial-stat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,iBAAiB;IAN9B;QAiBE;;WAEG;QACK,iBAAY,GAAY,KAAK,CAAC;KAYvC;IAVC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE;gBAC3D,0DAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAK;gBACtC,0DAAG,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,WAAW,CAAK,CAC9C,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-testimonial-stat',\n  styleUrl: 'af-testimonial-stat.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTestimonialStat {\n  /**\n   * The statistic value (e.g., \"95%\", \"10×\", \"120,000\")\n   */\n  @Prop() value!: string;\n\n  /**\n   * Description text for the statistic\n   */\n  @Prop() description!: string;\n\n  /**\n   * Whether to show left accent border\n   */\n  @Prop() accentBorder: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div class={`stat ${this.accentBorder ? 'stat--accent' : ''}`}>\n          <p class=\"stat-value\">{this.value}</p>\n          <p class=\"stat-description\">{this.description}</p>\n        </div>\n      </Host>\n    );\n  }\n}\n\n\n"]}
+{"version":3,"file":"af-testimonial-stat.js","sourceRoot":"","sources":["../../../src/components/af-testimonial-stat/af-testimonial-stat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,iBAAiB;IAN9B;QAiBE;;WAEG;QACK,iBAAY,GAAY,KAAK,CAAC;KAcvC;IAZC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE;gBAE3D,mEAAY,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAc;gBAElE,gEAAS,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,WAAW,CAAW,CAC3E,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-testimonial-stat',\n  styleUrl: 'af-testimonial-stat.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTestimonialStat {\n  /**\n   * The statistic value (e.g., \"95%\", \"10×\", \"120,000\")\n   */\n  @Prop() value!: string;\n\n  /**\n   * Description text for the statistic\n   */\n  @Prop() description!: string;\n\n  /**\n   * Whether to show left accent border\n   */\n  @Prop() accentBorder: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div class={`stat ${this.accentBorder ? 'stat--accent' : ''}`}>\n          {/* Stat value uses secondary heading color via CSS override */}\n          <af-heading level={2} class=\"stat-value\">{this.value}</af-heading>\n          {/* Description uses af-text for proper theming */}\n          <af-text variant=\"medium\" class=\"stat-description\">{this.description}</af-text>\n        </div>\n      </Host>\n    );\n  }\n}\n\n\n"]}

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

@@ -5,10 +5,11 @@
 .text {
   margin: 0;
   padding: 0;
-  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;
-  font-weight: 400;
-  color: var(--colour-typography-body-default, #14343b);
-  letter-spacing: 0;
+  font-family: var(--typography-bodyfont, 'NeuSans', Arial, sans-serif);
+  font-weight: var(--font-weight-regular, 400);
+  /* Inherit color from theme context via CSS custom property */
+  color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));
+  letter-spacing: var(--letter-spacing-body, 0);
 }
 
 /* Alignment */
@@ -24,47 +25,23 @@
   text-align: right;
 }
 
-/* Theme variants */
-.theme-dark {
-  color: var(--colour-brand-mist-green, #C6D5D1);
-}
-
-.theme-light {
-  color: var(--colour-typography-body-default, #14343b);
-}
-
 /* Body variants */
 .variant-xlarge {
-  font-size: 22px;
-  line-height: 28px;
+  font-size: var(--font-size-body-xlarge, 22px);
+  line-height: var(--line-height-body-xlarge, 28px);
 }
 
 .variant-large {
-  font-size: 18px;
-  line-height: 26px;
+  font-size: var(--font-size-body-large, 18px);
+  line-height: var(--line-height-body-large, 26px);
 }
 
 .variant-medium {
-  font-size: 16px;
-  line-height: 24px;
+  font-size: var(--font-size-body-medium, 16px);
+  line-height: var(--line-height-body-medium, 24px);
 }
 
 .variant-small {
-  font-size: 14px;
-  line-height: 20px;
-}
-
-/* Label variants - use NeuSans Book */
-.variant-label-button {
-  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;
-  font-weight: 500;
-  font-size: 17px;
-  line-height: 20px;
-}
-
-.variant-label-tag {
-  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 1;
+  font-size: var(--font-size-body-small, 14px);
+  line-height: var(--line-height-body-small, 20px);
 }

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

@@ -1,4 +1,9 @@
 import { h } from "@stencil/core";
+/**
+ * Text/body component that inherits color from theme context.
+ * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+ * via CSS custom properties.
+ */
 export class AfText {
     constructor() {
         /** Text variant */
@@ -7,17 +12,14 @@ export class AfText {
         this.align = 'left';
         /** Semantic element to render */
         this.as = 'p';
-        /** Theme for dark backgrounds */
-        this.theme = 'light';
     }
     render() {
         const Tag = this.as;
-        return (h(Tag, { key: 'd24094cc876bf871972eb35651c2c145d135722f', class: {
+        return (h(Tag, { key: '824ada09e3f1b9eff027c758087e8369f4de5daa', class: {
                 'text': true,
                 [`variant-${this.variant}`]: true,
-                [`align-${this.align}`]: true,
-                [`theme-${this.theme}`]: true
-            }, part: "base" }, h("slot", { key: 'bb1f690d3b11f76d926da7bc7655fbce9df9973c' })));
+                [`align-${this.align}`]: true
+            }, part: "base" }, h("slot", { key: '3c9762436be40ed4920db1dea3a38561e275848e' })));
     }
     static get is() { return "af-text"; }
     static get encapsulation() { return "shadow"; }
@@ -37,8 +39,8 @@ export class AfText {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'xlarge' | 'large' | 'medium' | 'small' | 'label-button' | 'label-tag'",
-                    "resolved": "\"label-button\" | \"label-tag\" | \"large\" | \"medium\" | \"small\" | \"xlarge\"",
+                    "original": "'xlarge' | 'large' | 'medium' | 'small'",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\"",
                     "references": {}
                 },
                 "required": false,
@@ -92,26 +94,6 @@ export class AfText {
                 "reflect": false,
                 "attribute": "as",
                 "defaultValue": "'p'"
-            },
-            "theme": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'light' | 'dark'",
-                    "resolved": "\"dark\" | \"light\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Theme for dark backgrounds"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "theme",
-                "defaultValue": "'light'"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"af-text.js","sourceRoot":"","sources":["../../../src/components/af-text/af-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,MAAM;IALnB;QAME,mBAAmB;QACX,YAAO,GAA2E,QAAQ,CAAC;QAEnG,uBAAuB;QACf,UAAK,GAAgC,MAAM,CAAC;QAEpD,iCAAiC;QACzB,OAAE,GAAmC,GAAG,CAAC;QAEjD,iCAAiC;QACzB,UAAK,GAAqB,OAAO,CAAC;KAmB3C;IAjBC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,EAAS,CAAC;QAE3B,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACjC,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;gBAC7B,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;aAC9B,EACD,IAAI,EAAC,MAAM;YAEX,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-text',\n  styleUrl: 'af-text.css',\n  shadow: true\n})\nexport class AfText {\n  /** Text variant */\n  @Prop() variant: 'xlarge' | 'large' | 'medium' | 'small' | 'label-button' | 'label-tag' = 'medium';\n\n  /** Visual alignment */\n  @Prop() align: 'left' | 'center' | 'right' = 'left';\n\n  /** Semantic element to render */\n  @Prop() as: 'p' | 'span' | 'div' | 'label' = 'p';\n  \n  /** Theme for dark backgrounds */\n  @Prop() theme: 'light' | 'dark' = 'light';\n\n  render() {\n    const Tag = this.as as any;\n\n    return (\n      <Tag\n        class={{\n          'text': true,\n          [`variant-${this.variant}`]: true,\n          [`align-${this.align}`]: true,\n          [`theme-${this.theme}`]: true\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-text.js","sourceRoot":"","sources":["../../../src/components/af-text/af-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;GAIG;AAMH,MAAM,OAAO,MAAM;IALnB;QAME,mBAAmB;QACX,YAAO,GAA4C,QAAQ,CAAC;QAEpE,uBAAuB;QACf,UAAK,GAAgC,MAAM,CAAC;QAEpD,iCAAiC;QACzB,OAAE,GAAmC,GAAG,CAAC;KAkBlD;IAhBC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,EAAS,CAAC;QAE3B,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACjC,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;aAC9B,EACD,IAAI,EAAC,MAAM;YAEX,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Text/body component that inherits color from theme context.\n * Color is determined by the parent theme (af-section, af-hero-section, etc.)\n * via CSS custom properties.\n */\n@Component({\n  tag: 'af-text',\n  styleUrl: 'af-text.css',\n  shadow: true\n})\nexport class AfText {\n  /** Text variant */\n  @Prop() variant: 'xlarge' | 'large' | 'medium' | 'small' = 'medium';\n\n  /** Visual alignment */\n  @Prop() align: 'left' | 'center' | 'right' = 'left';\n\n  /** Semantic element to render */\n  @Prop() as: 'p' | 'span' | 'div' | 'label' = 'p';\n\n  render() {\n    const Tag = this.as as any;\n\n    return (\n      <Tag\n        class={{\n          'text': true,\n          [`variant-${this.variant}`]: true,\n          [`align-${this.align}`]: true\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-text-image/af-text-image.css

@@ -0,0 +1,228 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* ==========================================================================
+   Container Layout
+   ========================================================================== */
+
+.text-image {
+  display: flex;
+  width: 100%;
+}
+
+/* Side-by-side layout (default for 1/3 and 1/4 proportions) */
+.text-image--side-by-side {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--space-8, 32px);
+}
+
+.text-image--image-left {
+  flex-direction: row-reverse;
+}
+
+.text-image--image-right {
+  flex-direction: row;
+}
+
+/* Full-width layout (100% proportion) */
+.text-image--full-width {
+  flex-direction: column;
+  gap: var(--space-8, 32px);
+}
+
+/* ==========================================================================
+   Content Area (Typography Lockups Container)
+   ========================================================================== */
+
+.text-image__content {
+  display: flex;
+  flex-direction: column;
+  gap: 56px;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Proportion-based content sizing for side-by-side */
+.text-image--proportion-1-3 .text-image__content {
+  flex: 2;
+}
+
+.text-image--proportion-1-4 .text-image__content {
+  flex: 3;
+}
+
+.text-image--proportion-100 .text-image__content {
+  flex: none;
+  width: 100%;
+}
+
+/* Padding for content when image is on opposite side */
+.text-image--image-right .text-image__content {
+  padding-right: var(--space-8, 32px);
+}
+
+.text-image--image-left .text-image__content {
+  padding-left: var(--space-8, 32px);
+}
+
+.text-image--full-width .text-image__content {
+  padding: 0;
+}
+
+/* ==========================================================================
+   Typography Lockup
+   ========================================================================== */
+
+.text-image__lockup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 16px);
+  width: 100%;
+}
+
+.text-image__copy {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 16px);
+  max-width: 840px;
+  width: 100%;
+}
+
+/* Heading styles - inherits color from theme context */
+.text-image__heading {
+  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-book, 500);
+  font-size: var(--font-size-heading-3-desktop, 34px);
+  line-height: var(--line-height-heading-tight, 1);
+  letter-spacing: var(--letter-spacing-heading, -0.02em);
+  color: var(--af-typography-heading-primary, #14343B);
+  white-space: pre-wrap;
+}
+
+.text-image__heading:empty {
+  display: none;
+}
+
+/* Description/body text - inherits color from theme context */
+.text-image__description {
+  font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-regular, 400);
+  font-size: var(--font-size-body-large, 18px);
+  line-height: var(--line-height-body-large, 26px);
+  color: var(--af-typography-body-default, #2B484F);
+  white-space: pre-wrap;
+}
+
+.text-image__description:empty {
+  display: none;
+}
+
+/* Buttons section - wrapper for slotted ButtonGroup */
+.text-image__buttons {
+  display: block;
+}
+
+.text-image__buttons:empty {
+  display: none;
+}
+
+/* ==========================================================================
+   Image Area
+   ========================================================================== */
+
+.text-image__image-wrapper {
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: var(--radius-md, 12px);
+}
+
+/* Proportion-based image sizing for side-by-side */
+.text-image--proportion-1-3 .text-image__image-wrapper {
+  flex: 1;
+  min-width: 0;
+}
+
+.text-image--proportion-1-4 .text-image__image-wrapper {
+  flex: 1;
+  min-width: 0;
+}
+
+.text-image--proportion-100 .text-image__image-wrapper {
+  width: 100%;
+}
+
+/* ==========================================================================
+   Mobile Responsive Styles
+   ========================================================================== */
+
+@media (max-width: 768px) {
+  /* Stack everything vertically on mobile */
+  .text-image--side-by-side {
+    flex-direction: column;
+    gap: var(--space-6, 24px);
+  }
+
+  /* Reset order - text always first on mobile */
+  .text-image--image-left,
+  .text-image--image-right {
+    flex-direction: column;
+  }
+
+  /* Remove side padding on mobile */
+  .text-image--image-right .text-image__content,
+  .text-image--image-left .text-image__content {
+    padding: 0;
+  }
+
+  /* Full width for all proportions on mobile */
+  .text-image__content,
+  .text-image__image-wrapper {
+    flex: none !important;
+    width: 100%;
+  }
+
+  /* Smaller heading on mobile */
+  .text-image__heading {
+    font-size: var(--font-size-heading-3-mobile, 25px);
+  }
+
+  /* Smaller body text for full-width on mobile */
+  .text-image--proportion-100 .text-image__description {
+    font-size: var(--font-size-body-medium, 16px);
+    line-height: var(--line-height-body-medium, 24px);
+  }
+
+  /* On mobile, ButtonGroup handles its own responsive behavior */
+
+  /* Smaller lockup gap on mobile for full-width */
+  .text-image--proportion-100 .text-image__lockup {
+    gap: var(--space-3, 12px);
+  }
+
+  .text-image--proportion-100 .text-image__copy {
+    gap: var(--space-3, 12px);
+  }
+
+  /* Smaller border radius on mobile */
+  .text-image__image-wrapper {
+    border-radius: var(--radius-sm, 8px);
+  }
+}
+
+/* ==========================================================================
+   Slot Content Styling
+   ========================================================================== */
+
+::slotted(*) {
+  margin: 0;
+}
+
+::slotted(p) {
+  margin: 0;
+}
+
+
+

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

@@ -0,0 +1,173 @@
+import { h, Host } from "@stencil/core";
+/**
+ * TextImage composite component that combines typography content with an image.
+ * Supports various layout configurations with image position and proportion options.
+ */
+export class AfTextImage {
+    constructor() {
+        /**
+         * Position of the image relative to the text content
+         */
+        this.imagePosition = 'right';
+        /**
+         * Proportion of the image in the layout
+         * - '1/3': Image takes 1/3 of the width (text takes 2/3)
+         * - '1/4': Image takes 1/4 of the width (text takes 3/4)
+         * - '100%': Image takes full width below text
+         */
+        this.imageProportion = '1/3';
+        /**
+         * Image alt text for accessibility
+         */
+        this.alt = '';
+        /**
+         * Whether to show a second typography lockup section
+         */
+        this.showSecondLockup = false;
+    }
+    render() {
+        const isFullWidth = this.imageProportion === '100%';
+        const isImageLeft = this.imagePosition === 'left';
+        const containerClasses = {
+            'text-image': true,
+            'text-image--full-width': isFullWidth,
+            'text-image--side-by-side': !isFullWidth,
+            'text-image--image-left': isImageLeft && !isFullWidth,
+            'text-image--image-right': !isImageLeft && !isFullWidth,
+            [`text-image--proportion-${this.imageProportion.replace('/', '-').replace('%', '')}`]: true,
+        };
+        const renderTypographyLockup = (isSecond = false) => {
+            const prefix = isSecond ? 'second-' : '';
+            return (h("div", { class: `text-image__lockup ${isSecond ? 'text-image__lockup--second' : ''}` }, h("div", { class: "text-image__copy" }, h("div", { class: "text-image__heading" }, h("slot", { name: isSecond ? 'second-heading' : undefined })), h("div", { class: "text-image__description" }, h("slot", { name: `${prefix}description` }))), h("div", { class: "text-image__buttons" }, h("slot", { name: `${prefix}buttons` }))));
+        };
+        const renderImage = () => {
+            if (!this.src)
+                return null;
+            return (h("div", { class: "text-image__image-wrapper" }, h("af-image", { src: this.src, alt: this.alt })));
+        };
+        // For full-width layout, text is always above image
+        if (isFullWidth) {
+            return (h(Host, null, h("div", { class: containerClasses }, h("div", { class: "text-image__content" }, renderTypographyLockup(), this.showSecondLockup && renderTypographyLockup(true)), renderImage())));
+        }
+        // For side-by-side layouts
+        const textContent = (h("div", { class: "text-image__content" }, renderTypographyLockup(), this.showSecondLockup && renderTypographyLockup(true)));
+        const imageContent = renderImage();
+        return (h(Host, null, h("div", { class: containerClasses }, isImageLeft ? ([imageContent, textContent]) : ([textContent, imageContent]))));
+    }
+    static get is() { return "af-text-image"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-text-image.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-text-image.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "imagePosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the image relative to the text content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-position",
+                "defaultValue": "'right'"
+            },
+            "imageProportion": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'1/3' | '1/4' | '100%'",
+                    "resolved": "\"1/3\" | \"1/4\" | \"100%\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Proportion of the image in the layout\n- '1/3': Image takes 1/3 of the width (text takes 2/3)\n- '1/4': Image takes 1/4 of the width (text takes 3/4)\n- '100%': Image takes full width below text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-proportion",
+                "defaultValue": "'1/3'"
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Image source URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Image alt text for accessibility"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt",
+                "defaultValue": "''"
+            },
+            "showSecondLockup": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show a second typography lockup section"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-second-lockup",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-text-image.js.map