@affinda/wc 0.0.6 → 0.0.8

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

@@ -0,0 +1,97 @@
+:host {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+}
+
+.testimonial-carousel {
+  position: relative;
+  width: 100%;
+}
+
+.testimonial-slides {
+  position: relative;
+  width: 100%;
+  min-height: 544px;
+  overflow: hidden;
+}
+
+.testimonial-slides ::slotted(af-testimonial) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
+}
+
+/* Progress indicator */
+.testimonial-progress {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  margin-top: 32px;
+  padding: 0 220px;
+}
+
+.progress-dot {
+  width: 100%;
+  max-width: 840px;
+  height: 3px;
+  background: var(--colour-background-border-default, #d1ddda);
+  border-radius: 2px;
+  cursor: pointer;
+  transition: background 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.progress-dot.active {
+  background: var(--colour-background-border-active, #8a7049);
+}
+
+.progress-dot:hover:not(.active) {
+  background: var(--colour-background-border-default, #c1cdc9);
+}
+
+/* Navigation buttons - positioned bottom left 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;
+}
+

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

@@ -0,0 +1,100 @@
+import { h, Host } from "@stencil/core";
+export class AfTestimonialCarousel {
+    constructor() {
+        this.currentIndex = 0;
+        this.isAnimating = false;
+        this.testimonialCount = 0;
+        this.testimonials = [];
+        this.goToPrevious = () => {
+            if (this.isAnimating || this.currentIndex === 0)
+                return;
+            this.isAnimating = true;
+            this.currentIndex = this.currentIndex - 1;
+            this.updateVisibleTestimonial();
+            setTimeout(() => {
+                this.isAnimating = false;
+            }, 500);
+        };
+        this.goToNext = () => {
+            if (this.isAnimating || this.currentIndex >= this.testimonialCount - 1)
+                return;
+            this.isAnimating = true;
+            this.currentIndex = this.currentIndex + 1;
+            this.updateVisibleTestimonial();
+            setTimeout(() => {
+                this.isAnimating = false;
+            }, 500);
+        };
+    }
+    componentDidLoad() {
+        this.detectTestimonials();
+        // Watch for testimonials being added (for React async rendering)
+        this.observer = new MutationObserver(() => {
+            this.detectTestimonials();
+        });
+        this.observer.observe(this.host, {
+            childList: true,
+            subtree: true
+        });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    detectTestimonials() {
+        const newTestimonials = Array.from(this.host.querySelectorAll('af-testimonial'));
+        if (newTestimonials.length !== this.testimonials.length) {
+            this.testimonials = newTestimonials;
+            this.testimonialCount = newTestimonials.length;
+            console.log('Found testimonials:', this.testimonials.length);
+            if (this.testimonials.length > 0) {
+                this.currentIndex = 0;
+                this.updateVisibleTestimonial();
+            }
+        }
+    }
+    updateVisibleTestimonial() {
+        this.testimonials.forEach((testimonial, index) => {
+            const offset = (index - this.currentIndex) * 100;
+            testimonial.style.transform = `translateX(${offset}%)`;
+            testimonial.style.opacity = index === this.currentIndex ? '1' : '0';
+            testimonial.style.pointerEvents = index === this.currentIndex ? 'auto' : 'none';
+        });
+    }
+    render() {
+        const hasPrev = this.currentIndex > 0;
+        const hasNext = this.currentIndex < this.testimonialCount - 1;
+        return (h(Host, { key: '93e4222eaa683eda0e5d68d445691e5dcf764b10' }, h("div", { key: '8679d282c0644b463eee86fa90282f59ba1c6cb5', class: "testimonial-carousel" }, h("div", { key: '6779793a882493c73b31bdf5742e2d068b8db72f', class: "testimonial-slides" }, h("slot", { key: '4326f6b06a60174edc2ba74c3d5704707965bf5d' })), this.testimonialCount > 1 && (h("div", { key: 'ba63a40e6a0789df3af7ff51d36a0f9c2e0651c6', 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: 'e15676334f291d496302381e3625b8c18f46626d', class: "carousel-navigation" }, h("button", { key: '511c7cf3b514d07ec4b2c6e9a6a2231a6c98b1d3', class: "nav-button prev", disabled: !hasPrev, onClick: this.goToPrevious, "aria-label": "Previous testimonial" }, h("svg", { key: '477016d99fb337bed5ae757ff14dc290819450ba', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '989e2119171bb332ca39a45d9b18d46736e0a82f', d: "M19 12H5M5 12L12 19M5 12L12 5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '5b52c2b3d6aef2b17e144ae30eebd6c6a3c07323', class: "nav-button next", disabled: !hasNext, onClick: this.goToNext, "aria-label": "Next testimonial" }, h("svg", { key: '9d03ebe923108338a4fdab149d02c04e19df6e5e', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'a90a52e8cfb3df339d42894448b184b1229f429d', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+    }
+    static get is() { return "af-testimonial-carousel"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-testimonial-carousel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-testimonial-carousel.css"]
+        };
+    }
+    static get states() {
+        return {
+            "currentIndex": {},
+            "isAnimating": {},
+            "testimonialCount": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=af-testimonial-carousel.js.map

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

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

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

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

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

@@ -0,0 +1,87 @@
+import { h, Host } from "@stencil/core";
+export class AfTestimonialStat {
+    constructor() {
+        /**
+         * Whether to show left accent border
+         */
+        this.accentBorder = false;
+    }
+    render() {
+        return (h(Host, { key: '38055fcad76047030e7907ad11933c229e33fe05' }, h("div", { key: 'ae01845c6494f9da213f7b823aa5a57b51d94e96', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("p", { key: 'd1ee0c278a840f343e442178fa2c8ae35e04304e', class: "stat-value" }, this.value), h("p", { key: '29322d5a6e3048f6c1a3df68393f6367bb4b6631', class: "stat-description" }, this.description))));
+    }
+    static get is() { return "af-testimonial-stat"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-testimonial-stat.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-testimonial-stat.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The statistic value (e.g., \"95%\", \"10\u00D7\", \"120,000\")"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Description text for the statistic"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "accentBorder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show left accent border"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accent-border",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-testimonial-stat.js.map

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

@@ -0,0 +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"]}

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

@@ -5,7 +5,7 @@
 .text {
   margin: 0;
   padding: 0;
-  font-family: 'Helvetica', 'Inter', 'Segoe UI', system-ui, sans-serif;
+  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;
   font-weight: 400;
   color: var(--colour-typography-body-default, #14343b);
   letter-spacing: 0;
@@ -24,6 +24,15 @@
   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;

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

@@ -7,14 +7,17 @@ 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: '778a86a185f2416dec867ca2457acb2fe1ad4bcb', class: {
+        return (h(Tag, { key: 'd24094cc876bf871972eb35651c2c145d135722f', class: {
                 'text': true,
                 [`variant-${this.variant}`]: true,
-                [`align-${this.align}`]: true
-            }, part: "base" }, h("slot", { key: '2b3ee364c989ca8d233583946e24665df0192fb9' })));
+                [`align-${this.align}`]: true,
+                [`theme-${this.theme}`]: true
+            }, part: "base" }, h("slot", { key: 'bb1f690d3b11f76d926da7bc7655fbce9df9973c' })));
     }
     static get is() { return "af-text"; }
     static get encapsulation() { return "shadow"; }
@@ -89,6 +92,26 @@ 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;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@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  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"]}
+{"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"]}

package/dist/collection/components/af-typography-lockup/af-typography-lockup.css

@@ -40,7 +40,7 @@
 /* Heading styles */
 .heading {
   font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
-  font-weight: 500;
+  font-weight: 400;
   color: var(--typography-heading-primary, #14343B);
   line-height: 1;
   white-space: pre-wrap;

package/dist/collection/components/af-typography-lockup/af-typography-lockup.js

@@ -30,7 +30,7 @@ export class AfTypographyLockup {
             [`breakpoint-${this.breakpoint}`]: true
         };
         const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
-        return (h(Host, { key: 'c8bc936e14d143125926e4cc03a3344911d46360' }, h("div", { key: '4c51fcb278daba5e4b8287130a1e61021750af18', class: containerClasses }, h("div", { key: '6d563b91c8b548a72f898978569bceda44a26b14', class: copyClasses, style: copyStyle }, h("div", { key: '4351708a5d68297499f7d12109941b7dec8939ad', class: "heading" }, h("slot", { key: '92c799fb2cbf596ab8778cf8d5c9cf88663ed219' })), h("div", { key: '0911e146d7aa3c34d6c825eb849e883b2f69893b', class: "description" }, h("slot", { key: 'b3184843c5646db87a3bd7660214fd4cf2bafc0f', name: "description" }))), h("div", { key: '4b2b814e55a574c7330c517eca3f1765d11cdcdc', class: "buttons" }, h("slot", { key: 'f35ea7c3bc5592f8e6776464b6878d819792894b', name: "buttons" })))));
+        return (h(Host, { key: '108f59f3983487b19e059fa0f9c9c33cfb9b47ba' }, h("div", { key: '4dd1ece34095b91fcf9f41355a16eb4fb4b83ef0', class: containerClasses }, h("div", { key: '3a472b7ccfe7192ca9f2867e91b366469c030442', class: copyClasses, style: copyStyle }, h("div", { key: '578aa5a20e857a1d822d60a3f8dfb16ddd64f423', class: "heading" }, h("slot", { key: 'd38c8f2572e16f6f158b37c1a547c5482f1a3351' })), h("div", { key: '4d59415dac2a10f2443b2186e8f71026e9c70e71', class: "description" }, h("slot", { key: 'e1b4d336405cdf08b7fcb451f7e09811c736a955', name: "description" }))), h("div", { key: '955dda0ad363656d54dca5f9327329a91ee2a96e', class: "buttons" }, h("slot", { key: 'e6582595577adeb312cb726ea6708c23a46d6ec1', name: "buttons" })))));
     }
     static get is() { return "af-typography-lockup"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/af-aspect-ratio.js

@@ -1,4 +1,4 @@
-import { A as AfAspectRatio$1, d as defineCustomElement$1 } from './p-C6idwlD-.js';
+import { A as AfAspectRatio$1, d as defineCustomElement$1 } from './p-BMl1ggbQ.js';
 
 const AfAspectRatio = AfAspectRatio$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { A as AfButtonGroup$1, d as defineCustomElement$1 } from './p-Cjv046iG.js';
+import { A as AfButtonGroup$1, d as defineCustomElement$1 } from './p-BeQlNDyY.js';
 
 const AfButtonGroup = AfButtonGroup$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-button.js

@@ -1,4 +1,4 @@
-import { A as AfButton$1, d as defineCustomElement$1 } from './p-cKSy1B8M.js';
+import { A as AfButton$1, d as defineCustomElement$1 } from './p-CcNomA2o.js';
 
 const AfButton = AfButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-card.js

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-zwrcq-N2.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-CZlTvZAm.js';
 
-const afCardCss = ".sc-af-card-h{display:block;width:100%;min-height:400px}.card.sc-af-card{background:var(--colour-background-level-1, #e8eeed);border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;position:relative;display:flex;flex-direction:column;min-height:400px;height:100%;box-sizing:border-box}.card--with-image.sc-af-card{background:var(--colour-brand-inkwell, #14343b);min-height:480px}.card__background.sc-af-card{position:absolute;inset:0;pointer-events:none;z-index:0}.card__background-image.sc-af-card{width:100%;height:100%;object-fit:cover;object-position:center}.card__content.sc-af-card{position:relative;padding:40px;display:flex;flex-direction:column;gap:24px;flex:1;box-sizing:border-box;z-index:1}.card__content.sc-af-card-s>img,.card__content .sc-af-card-s>img{width:100%;height:auto;min-height:200px;margin-top:auto;object-fit:cover;object-position:top center}.card__content.sc-af-card-s>af-heading,.card__content .sc-af-card-s>af-heading{margin-bottom:0}.card__content.sc-af-card-s>af-text,.card__content .sc-af-card-s>af-text{line-height:1.44}.card__content--overlay.sc-af-card{backdrop-filter:blur(2px);background:linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);padding:32px;padding-top:200px;justify-content:flex-end;--colour-typography-heading-primary:#ffffff;--colour-typography-heading-secondary:#ffffff;--colour-typography-body-default:#ffffff;--colour-typography-body-dark:#ffffff;color:#ffffff}.card__content--overlay.sc-af-card *.sc-af-card{color:#ffffff !important}.card.sc-af-card:not(.card--with-image) .card__content.sc-af-card{color:var(--colour-typography-heading-primary, #14343b)}.card--custom-bg.sc-af-card .card__content.sc-af-card{--colour-typography-heading-primary:#ffffff;--colour-typography-body-default:#ffffff}";
+const afCardCss = ".sc-af-card-h{display:block;width:100%;min-height:400px}.card.sc-af-card{background:var(--colour-background-level-1, #e8eeed);border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;position:relative;display:flex;flex-direction:column;min-height:400px;height:100%;box-sizing:border-box}.card--with-image.sc-af-card{background:var(--colour-brand-inkwell, #14343b);min-height:480px}.card__background.sc-af-card{position:absolute;inset:0;pointer-events:none;z-index:0}.card__background-image.sc-af-card{width:100%;height:100%;object-fit:cover;object-position:center}.card__content.sc-af-card{position:relative;padding:40px;display:flex;flex-direction:column;gap:24px;flex:1;box-sizing:border-box;z-index:1}.card__content.sc-af-card-s>img,.card__content .sc-af-card-s>img{width:100%;height:auto;min-height:200px;margin-top:auto;object-fit:cover;object-position:top center}.card__content.sc-af-card-s>af-heading,.card__content .sc-af-card-s>af-heading{margin-bottom:0}.card__content.sc-af-card-s>af-text,.card__content .sc-af-card-s>af-text{line-height:1.44}.card__content--overlay.sc-af-card{backdrop-filter:blur(2px);background:linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);padding:32px;padding-top:200px;justify-content:flex-end;--colour-typography-heading-primary:#ffffff;--colour-typography-heading-secondary:#ffffff;--colour-typography-body-default:#ffffff;--colour-typography-body-dark:#ffffff;color:#ffffff}.card__content--overlay.sc-af-card *.sc-af-card{color:#ffffff !important}.card.sc-af-card:not(.card--with-image):not(.card--dark-overlay) af-heading.sc-af-card,.card.sc-af-card:not(.card--with-image):not(.card--dark-overlay) af-text.sc-af-card{--colour-typography-heading-primary:var(--colour-brand-inkwell, #14343B);--colour-typography-body-default:#2B484F}.card--custom-bg.sc-af-card:not(.card--dark-overlay) af-heading.sc-af-card,.card--custom-bg.sc-af-card:not(.card--dark-overlay) af-text.sc-af-card{--colour-typography-heading-primary:var(--colour-brand-inkwell, #14343B);--colour-typography-body-default:#2B484F}";
 
 const AfCard$1 = /*@__PURE__*/ proxyCustomElement(class AfCard extends H {
     constructor(registerHost) {
@@ -16,7 +16,7 @@ const AfCard$1 = /*@__PURE__*/ proxyCustomElement(class AfCard extends H {
     render() {
         const hasBackgroundImage = !!this.backgroundImage;
         const cardStyle = this.backgroundColor ? { backgroundColor: this.backgroundColor } : undefined;
-        return (h(Host, { key: '026a3f9e10d281558913cd6eb69db800da37deb4' }, h("div", { key: 'd6b43e724d5611e75ec096dad88c5373ef5c5adc', class: `card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`, style: cardStyle }, hasBackgroundImage && (h("div", { key: 'f71753ba962411320c45f06c7c9a5c98b89883a9', class: "card__background" }, h("img", { key: '2d3b19e350ddf5a1efa1c1a9a343851e423cc275', src: this.backgroundImage, alt: "", class: "card__background-image" }))), h("div", { key: '459e00230ef7a470ee808d0d674412b18822d473', class: `card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}` }, h("slot", { key: 'd2f4f261f0b2a766c912504d17f0caec96ae02c4' })))));
+        return (h(Host, { key: '2c3c0b6d1889074ae78b2b1f9646dc23829a0e9a' }, h("div", { key: '7e1ef884a203ae17e1ad417ac688f59b9acb6932', class: `card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`, style: cardStyle }, hasBackgroundImage && (h("div", { key: '4fb3cea588d42345690df68738b725a6debacc55', class: "card__background" }, h("img", { key: '0dde30e250c7cb117993e3ccbeab8f108278ae89', src: this.backgroundImage, alt: "", class: "card__background-image" }))), h("div", { key: 'f604c04997720f4804d148f103f9c4a69b1ec0aa', class: `card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}` }, h("slot", { key: 'a7668f98c4c8fd10b5581eac69f2a31aecbc3732' })))));
     }
     static get style() { return afCardCss; }
 }, [262, "af-card", {

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

@@ -1 +1 @@
-{"file":"af-card.js","mappings":";;AAAA,MAAM,SAAS,GAAG,wvDAAwvD;;MCQ7vDA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AANnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAiBE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAwBrC;IAtBC,MAAM,GAAA;AACJ,QAAA,MAAM,kBAAkB,GAAG,CAAC,CAAC,IAAI,CAAC,eAAe;AACjD,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,GAAG,EAAE,eAAe,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,SAAS;AAE9F,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,QAAQ,kBAAkB,GAAG,kBAAkB,GAAG,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,oBAAoB,GAAG,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,eAAe,GAAG,iBAAiB,GAAG,EAAE,CAAA,CAAE,EAC9J,KAAK,EAAE,SAAS,EAAA,EAEf,kBAAkB,KACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,wBAAwB,EAAA,CAAG,CACpE,CACP,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAiB,cAAA,EAAA,kBAAkB,GAAG,wBAAwB,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  min-height: 400px;\n}\n\n.card {\n  background: var(--colour-background-level-1, #e8eeed);\n  border-radius: var(--border-radius-card-level-1, 32px);\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-height: 400px;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n.card--with-image {\n  background: var(--colour-brand-inkwell, #14343b);\n  min-height: 480px;\n}\n\n.card__background {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n}\n\n.card__background-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n.card__content {\n  position: relative;\n  padding: 40px;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  flex: 1;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n/* Image styling within cards */\n.card__content ::slotted(img) {\n  width: 100%;\n  height: auto;\n  min-height: 200px;\n  margin-top: auto;\n  object-fit: cover;\n  object-position: top center;\n}\n\n/* Heading spacing within cards */\n.card__content ::slotted(af-heading) {\n  margin-bottom: 0;\n}\n\n/* Text line-height within cards */\n.card__content ::slotted(af-text) {\n  line-height: 1.44;\n}\n\n.card__content--overlay {\n  backdrop-filter: blur(2px);\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n  padding: 32px;\n  padding-top: 200px;\n  justify-content: flex-end;\n  \n  /* Set CSS custom properties for text color that child components can use */\n  --colour-typography-heading-primary: #ffffff;\n  --colour-typography-heading-secondary: #ffffff;\n  --colour-typography-body-default: #ffffff;\n  --colour-typography-body-dark: #ffffff;\n  color: #ffffff;\n}\n\n/* Force white text in overlay cards using both direct styling and custom properties */\n.card__content--overlay * {\n  color: #ffffff !important;\n}\n\n/* Dark text for regular cards */\n.card:not(.card--with-image) .card__content {\n  color: var(--colour-typography-heading-primary, #14343b);\n}\n\n/* Custom background color cards with white text */\n.card--custom-bg .card__content {\n  --colour-typography-heading-primary: #ffffff;\n  --colour-typography-body-default: #ffffff;\n}\n\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-card',\n  styleUrl: 'af-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfCard {\n  /**\n   * Background image URL for the card\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * Background color for the card (CSS color value)\n   */\n  @Prop() backgroundColor?: string;\n\n  /**\n   * Whether to apply a dark gradient overlay (for cards with background images)\n   */\n  @Prop() darkOverlay: boolean = false;\n\n  render() {\n    const hasBackgroundImage = !!this.backgroundImage;\n    const cardStyle = this.backgroundColor ? { backgroundColor: this.backgroundColor } : undefined;\n\n    return (\n      <Host>\n        <div \n          class={`card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`}\n          style={cardStyle}\n        >\n          {hasBackgroundImage && (\n            <div class=\"card__background\">\n              <img src={this.backgroundImage} alt=\"\" class=\"card__background-image\" />\n            </div>\n          )}\n          <div class={`card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}`}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"af-card.js","mappings":";;AAAA,MAAM,SAAS,GAAG,qhEAAqhE;;MCQ1hEA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AANnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAiBE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAwBrC;IAtBC,MAAM,GAAA;AACJ,QAAA,MAAM,kBAAkB,GAAG,CAAC,CAAC,IAAI,CAAC,eAAe;AACjD,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,GAAG,EAAE,eAAe,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,SAAS;AAE9F,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,QAAQ,kBAAkB,GAAG,kBAAkB,GAAG,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,oBAAoB,GAAG,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,eAAe,GAAG,iBAAiB,GAAG,EAAE,CAAA,CAAE,EAC9J,KAAK,EAAE,SAAS,EAAA,EAEf,kBAAkB,KACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,wBAAwB,EAAA,CAAG,CACpE,CACP,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAiB,cAAA,EAAA,kBAAkB,GAAG,wBAAwB,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  min-height: 400px;\n}\n\n.card {\n  background: var(--colour-background-level-1, #e8eeed);\n  border-radius: var(--border-radius-card-level-1, 32px);\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-height: 400px;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n.card--with-image {\n  background: var(--colour-brand-inkwell, #14343b);\n  min-height: 480px;\n}\n\n.card__background {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n}\n\n.card__background-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n.card__content {\n  position: relative;\n  padding: 40px;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  flex: 1;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n/* Image styling within cards */\n.card__content ::slotted(img) {\n  width: 100%;\n  height: auto;\n  min-height: 200px;\n  margin-top: auto;\n  object-fit: cover;\n  object-position: top center;\n}\n\n/* Heading spacing within cards */\n.card__content ::slotted(af-heading) {\n  margin-bottom: 0;\n}\n\n/* Text line-height within cards */\n.card__content ::slotted(af-text) {\n  line-height: 1.44;\n}\n\n.card__content--overlay {\n  backdrop-filter: blur(2px);\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n  padding: 32px;\n  padding-top: 200px;\n  justify-content: flex-end;\n  \n  /* Set CSS custom properties for text color that child components can use */\n  --colour-typography-heading-primary: #ffffff;\n  --colour-typography-heading-secondary: #ffffff;\n  --colour-typography-body-default: #ffffff;\n  --colour-typography-body-dark: #ffffff;\n  color: #ffffff;\n}\n\n/* Force white text in overlay cards using both direct styling and custom properties */\n.card__content--overlay * {\n  color: #ffffff !important;\n}\n\n/* Dark text for regular cards (light backgrounds) */\n.card:not(.card--with-image):not(.card--dark-overlay) af-heading,\n.card:not(.card--with-image):not(.card--dark-overlay) af-text {\n  --colour-typography-heading-primary: var(--colour-brand-inkwell, #14343B);\n  --colour-typography-body-default: #2B484F;\n}\n\n/* Dark text for custom background color cards (unless they have dark overlay) */\n.card--custom-bg:not(.card--dark-overlay) af-heading,\n.card--custom-bg:not(.card--dark-overlay) af-text {\n  --colour-typography-heading-primary: var(--colour-brand-inkwell, #14343B);\n  --colour-typography-body-default: #2B484F;\n}\n\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-card',\n  styleUrl: 'af-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfCard {\n  /**\n   * Background image URL for the card\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * Background color for the card (CSS color value)\n   */\n  @Prop() backgroundColor?: string;\n\n  /**\n   * Whether to apply a dark gradient overlay (for cards with background images)\n   */\n  @Prop() darkOverlay: boolean = false;\n\n  render() {\n    const hasBackgroundImage = !!this.backgroundImage;\n    const cardStyle = this.backgroundColor ? { backgroundColor: this.backgroundColor } : undefined;\n\n    return (\n      <Host>\n        <div \n          class={`card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`}\n          style={cardStyle}\n        >\n          {hasBackgroundImage && (\n            <div class=\"card__background\">\n              <img src={this.backgroundImage} alt=\"\" class=\"card__background-image\" />\n            </div>\n          )}\n          <div class={`card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}`}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/af-client-carousel.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AfClientCarousel extends Components.AfClientCarousel, HTMLElement {}
+export const AfClientCarousel: {
+    prototype: AfClientCarousel;
+    new (): AfClientCarousel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,45 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CZlTvZAm.js';
+
+const afClientCarouselCss = ":host{display:block;width:100%;background-color:var(--colour-brand-inkwell, #14343B)}.client-carousel{padding:48px 80px;display:flex;flex-direction:column;gap:40px;align-items:center}.headline{text-align:center;padding:24px 220px}.headline h3{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;font-size:34px;line-height:1;letter-spacing:-0.68px;color:var(--colour-brand-mist-green, #C6D5D1);margin:0}.carousel-container{display:flex;flex-direction:column;gap:16px;width:100%;overflow:hidden}.carousel-row{display:flex;width:100%;overflow:hidden;position:relative}.logo-track{display:flex;gap:16px;animation-timing-function:linear;animation-iteration-count:infinite}.scroll-left .logo-track{animation-name:scroll-left;animation-duration:40s}.scroll-right .logo-track{animation-name:scroll-right;animation-duration:40s}@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}@keyframes scroll-right{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}::slotted(*){flex-shrink:0}@media (max-width: 1024px){.client-carousel{padding:32px 40px}.headline{padding:16px 40px}}@media (max-width: 767px){.client-carousel{padding:24px 16px}.headline{padding:16px}.headline h3{font-size:25px}}";
+
+const AfClientCarousel$1 = /*@__PURE__*/ proxyCustomElement(class AfClientCarousel extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /** Show headline above carousel */
+        this.showHeadline = false;
+        /** Headline text */
+        this.headlineText = "Trusted by some of the world's leading organisations";
+    }
+    render() {
+        return (h(Host, { key: '6ee5a4e472cb082ac68cb58c00bf5b1d686dd489' }, h("div", { key: 'dc030f69bfbb55ce999f0b2f1d8a47095d75ac59', class: "client-carousel" }, this.showHeadline && (h("div", { key: 'd8d7fdbd47e65cc5a3a8e10d88f7425f91d0459e', class: "headline" }, h("slot", { key: '3773f567bfd3de6058cd1088ba2c781cf510e63b', name: "headline" }, h("h3", { key: 'fdcab6ce99a2c477bf1e336f13f7994637b8436d' }, this.headlineText)))), h("div", { key: '30429a27f88e490051a4623195421e00a34f4db4', class: "carousel-container" }, h("div", { key: 'de187b8265b84cb3d8f22540ec283bb8b3603aa8', class: "carousel-row scroll-left" }, h("div", { key: 'd2da7c79388f53425cba20429204fea148030aa5', class: "logo-track" }, h("slot", { key: 'b4ddb6250d5893290ed40a2c765d0f0bf0a378e6', name: "row-1" }), h("slot", { key: 'ccb91ed748f2e51a1d0f2d63d676f7e2558ec2ef', name: "row-1" }))), h("div", { key: 'f6a99654384b070bf91e9ea1ebc57de304f2671f', class: "carousel-row scroll-right" }, h("div", { key: '8e31a13039f2e2df33eb7ec67f738d71d49d931f', class: "logo-track" }, h("slot", { key: '2ffeff2da8ddd4c0faefaf59fc1a45972de26943', name: "row-2" }), h("slot", { key: '2121dc84af370a41290a432e50f3c10f6b3d4b4c', name: "row-2" })))))));
+    }
+    static get style() { return afClientCarouselCss; }
+}, [257, "af-client-carousel", {
+        "showHeadline": [4, "show-headline"],
+        "headlineText": [1, "headline-text"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-client-carousel"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-client-carousel":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfClientCarousel$1);
+            }
+            break;
+    } });
+}
+
+const AfClientCarousel = AfClientCarousel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfClientCarousel, defineCustomElement };
+//# sourceMappingURL=af-client-carousel.js.map
+
+//# sourceMappingURL=af-client-carousel.js.map

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

@@ -0,0 +1 @@
+{"file":"af-client-carousel.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,guCAAguC;;MCU/uCA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;;AAG7B,QAAA,IAAY,CAAA,YAAA,GAAW,sDAAsD;AAmCtF;IAjCC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EACzB,IAAI,CAAC,YAAY,KAChB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAAA,EACnB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,EACnB,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAK,IAAI,CAAC,YAAY,CAAM,CACvB,CACH,CACP,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAE7B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACtB,CACF,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC1B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,CACtB,CACF,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfClientCarousel","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-client-carousel/af-client-carousel.css?tag=af-client-carousel&encapsulation=shadow","src/components/af-client-carousel/af-client-carousel.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  background-color: var(--colour-brand-inkwell, #14343B);\n}\n\n.client-carousel {\n  padding: 48px 80px;\n  display: flex;\n  flex-direction: column;\n  gap: 40px;\n  align-items: center;\n}\n\n.headline {\n  text-align: center;\n  padding: 24px 220px;\n}\n\n.headline h3 {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 500;\n  font-size: 34px;\n  line-height: 1;\n  letter-spacing: -0.68px;\n  color: var(--colour-brand-mist-green, #C6D5D1);\n  margin: 0;\n}\n\n.carousel-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n  overflow: hidden;\n}\n\n.carousel-row {\n  display: flex;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.logo-track {\n  display: flex;\n  gap: 16px;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n/* Scroll left animation */\n.scroll-left .logo-track {\n  animation-name: scroll-left;\n  animation-duration: 40s;\n}\n\n/* Scroll right animation */\n.scroll-right .logo-track {\n  animation-name: scroll-right;\n  animation-duration: 40s;\n}\n\n@keyframes scroll-left {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(-50%);\n  }\n}\n\n@keyframes scroll-right {\n  0% {\n    transform: translateX(-50%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n/* Ensure slotted logos maintain their styling */\n::slotted(*) {\n  flex-shrink: 0;\n}\n\n/* Tablet adjustments */\n@media (max-width: 1024px) {\n  .client-carousel {\n    padding: 32px 40px;\n  }\n  \n  .headline {\n    padding: 16px 40px;\n  }\n}\n\n/* Mobile adjustments */\n@media (max-width: 767px) {\n  .client-carousel {\n    padding: 24px 16px;\n  }\n  \n  .headline {\n    padding: 16px;\n  }\n  \n  .headline h3 {\n    font-size: 25px;\n  }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Infinite scrolling carousel for client logos\n */\n@Component({\n  tag: 'af-client-carousel',\n  styleUrl: 'af-client-carousel.css',\n  shadow: true,\n})\nexport class AfClientCarousel {\n  /** Show headline above carousel */\n  @Prop() showHeadline: boolean = false;\n  \n  /** Headline text */\n  @Prop() headlineText: string = \"Trusted by some of the world's leading organisations\";\n\n  render() {\n    return (\n      <Host>\n        <div class=\"client-carousel\">\n          {this.showHeadline && (\n            <div class=\"headline\">\n              <slot name=\"headline\">\n                <h3>{this.headlineText}</h3>\n              </slot>\n            </div>\n          )}\n          \n          <div class=\"carousel-container\">\n            {/* Top row - scrolls left */}\n            <div class=\"carousel-row scroll-left\">\n              <div class=\"logo-track\">\n                <slot name=\"row-1\"></slot>\n                <slot name=\"row-1\"></slot>\n              </div>\n            </div>\n            \n            {/* Bottom row - scrolls right */}\n            <div class=\"carousel-row scroll-right\">\n              <div class=\"logo-track\">\n                <slot name=\"row-2\"></slot>\n                <slot name=\"row-2\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/af-color-swatch.js

@@ -1,4 +1,4 @@
-import { A as AfColorSwatch$1, d as defineCustomElement$1 } from './p-DSAo7rhE.js';
+import { A as AfColorSwatch$1, d as defineCustomElement$1 } from './p-BSewwIfD.js';
 
 const AfColorSwatch = AfColorSwatch$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-container.js

@@ -1,4 +1,4 @@
-import { A as AfContainer$1, d as defineCustomElement$1 } from './p-CRgPNvxI.js';
+import { A as AfContainer$1, d as defineCustomElement$1 } from './p-BpXkQGDQ.js';
 
 const AfContainer = AfContainer$1;
 const defineCustomElement = defineCustomElement$1;