@affinda/wc 0.0.10 → 0.0.12

package/dist/collection/components/af-feature-accordion/af-feature-accordion.js

@@ -0,0 +1,209 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Feature accordion component with expandable items and accompanying image
+ * Used for showcasing product features with visual examples
+ * Features auto-cycling through items with a progress timer
+ */
+export class AfFeatureAccordion {
+    constructor() {
+        /** Section heading */
+        this.heading = 'Give AI agents your paperwork';
+        /** JSON string of accordion items */
+        this.items = '[]';
+        /** Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) */
+        this.cycleInterval = 6000;
+        /** Whether auto-cycling is enabled */
+        this.autoCycle = true;
+        /** Currently expanded item index */
+        this.expandedIndex = 0;
+        /** Progress of current timer (0-100) */
+        this.timerProgress = 100;
+        this.progressTimer = null;
+        this.progressStartTime = 0;
+    }
+    componentDidLoad() {
+        if (this.autoCycle) {
+            this.startCycling();
+        }
+    }
+    disconnectedCallback() {
+        this.stopCycling();
+    }
+    handleAutoCycleChange(newValue) {
+        if (newValue) {
+            this.startCycling();
+        }
+        else {
+            this.stopCycling();
+        }
+    }
+    getItems() {
+        try {
+            return JSON.parse(this.items);
+        }
+        catch {
+            return [];
+        }
+    }
+    startCycling() {
+        this.stopCycling();
+        this.progressStartTime = Date.now();
+        this.timerProgress = 100;
+        // Progress animation frame
+        const updateProgress = () => {
+            const elapsed = Date.now() - this.progressStartTime;
+            const remaining = this.cycleInterval - elapsed;
+            if (remaining <= 0) {
+                this.moveToNextItem();
+            }
+            else {
+                this.timerProgress = (remaining / this.cycleInterval) * 100;
+                this.progressTimer = requestAnimationFrame(updateProgress);
+            }
+        };
+        this.progressTimer = requestAnimationFrame(updateProgress);
+    }
+    stopCycling() {
+        if (this.progressTimer) {
+            cancelAnimationFrame(this.progressTimer);
+            this.progressTimer = null;
+        }
+    }
+    moveToNextItem() {
+        const items = this.getItems();
+        if (items.length === 0)
+            return;
+        this.expandedIndex = (this.expandedIndex + 1) % items.length;
+        // Restart the cycling timer for the new item
+        this.startCycling();
+    }
+    handleItemClick(index) {
+        // Reset timer when user clicks
+        this.expandedIndex = index;
+        // Restart the cycling timer for the clicked item
+        if (this.autoCycle) {
+            this.startCycling();
+        }
+    }
+    render() {
+        const items = this.getItems();
+        const currentItem = items[this.expandedIndex];
+        return (h(Host, { key: '7825aa3ce7bc01d0a2ca8d9bda5b8198aa76271c' }, h("div", { key: '0f6256791b7f0df695b73fbbfac13062441efe5d', class: "feature-accordion" }, h("div", { key: '325051f2986b59513be4911ebb74ea07e06d51aa', class: "feature-accordion__container" }, h("h2", { key: '03d56b844bb0683030cf180ad73c861411be6d97', class: "feature-accordion__heading" }, this.heading), h("div", { key: '3016a08061e853af3886c147f1cdead2e275da47', class: "feature-accordion__content" }, h("div", { key: '2810385a3c67d49dc4a7c5516aa88764c31cea38', class: "feature-accordion__list" }, items.map((item, index) => (h("div", { class: {
+                'accordion-item': true,
+                'accordion-item--expanded': this.expandedIndex === index
+            }, key: index }, h("button", { class: "accordion-item__header", onClick: () => this.handleItemClick(index), "aria-expanded": this.expandedIndex === index ? 'true' : 'false' }, h("h4", { class: "accordion-item__title" }, item.title), h("span", { class: "accordion-item__icon" }, this.expandedIndex === index ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M5 12H19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M12 5V19M5 12H19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))))), h("div", { class: "accordion-item__content", style: {
+                maxHeight: this.expandedIndex === index ? '200px' : '0',
+                opacity: this.expandedIndex === index ? '1' : '0'
+            } }, h("p", { class: "accordion-item__description" }, item.description), this.expandedIndex === index && this.autoCycle && (h("div", { class: "accordion-item__timer-track" }, h("div", { class: "accordion-item__timer-progress", style: { width: `${this.timerProgress}%` } })))))))), h("div", { key: '91407477630dfe4287aa84750a3ec344d4d929fe', class: "feature-accordion__image-container" }, h("div", { key: '5a5f537b6e38f250ed821e0dfaecf059e88e4251', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (h("img", { key: 'e974ce7cc07d28768447a106eeb7f714e93069a9', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (h("div", { key: '4e0e981e30d9ad3a10048715f71681dfacff76b4', class: "feature-accordion__image-placeholder" }, h("slot", { key: 'c98c9302c6fdd0db75b63ae20a56273bf64638b6', name: "image" }))))))))));
+    }
+    static get is() { return "af-feature-accordion"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-feature-accordion.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-feature-accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Section heading"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "'Give AI agents your paperwork'"
+            },
+            "items": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON string of accordion items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items",
+                "defaultValue": "'[]'"
+            },
+            "cycleInterval": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cycle-interval",
+                "defaultValue": "6000"
+            },
+            "autoCycle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether auto-cycling is enabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-cycle",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "expandedIndex": {},
+            "timerProgress": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "autoCycle",
+                "methodName": "handleAutoCycleChange"
+            }];
+    }
+}
+//# sourceMappingURL=af-feature-accordion.js.map

package/dist/collection/components/af-feature-accordion/af-feature-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-feature-accordion.js","sourceRoot":"","sources":["../../../src/components/af-feature-accordion/af-feature-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAShF;;;;GAIG;AAOH,MAAM,OAAO,kBAAkB;IAN/B;QASE,sBAAsB;QACd,YAAO,GAAW,+BAA+B,CAAC;QAE1D,qCAAqC;QAC7B,UAAK,GAAW,IAAI,CAAC;QAE7B,wEAAwE;QAChE,kBAAa,GAAW,IAAI,CAAC;QAErC,sCAAsC;QAC9B,cAAS,GAAY,IAAI,CAAC;QAElC,oCAAoC;QAC3B,kBAAa,GAAW,CAAC,CAAC;QAEnC,wCAAwC;QAC/B,kBAAa,GAAW,GAAG,CAAC;QAE7B,kBAAa,GAAkB,IAAI,CAAC;QACpC,sBAAiB,GAAW,CAAC,CAAC;KA8JvC;IA5JC,gBAAgB;QACd,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAGD,qBAAqB,CAAC,QAAiB;QACrC,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC;YACH,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;QAAC,MAAM,CAAC;YACP,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACpC,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC;QAEzB,2BAA2B;QAC3B,MAAM,cAAc,GAAG,GAAG,EAAE;YAC1B,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,iBAAiB,CAAC;YACpD,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;YAE/C,IAAI,SAAS,IAAI,CAAC,EAAE,CAAC;gBACnB,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,aAAa,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,GAAG,CAAC;gBAC5D,IAAI,CAAC,aAAa,GAAG,qBAAqB,CAAC,cAAc,CAAC,CAAC;YAC7D,CAAC;QACH,CAAC,CAAC;QAEF,IAAI,CAAC,aAAa,GAAG,qBAAqB,CAAC,cAAc,CAAC,CAAC;IAC7D,CAAC;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACzC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAE/B,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC;QAC7D,6CAA6C;QAC7C,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAEO,eAAe,CAAC,KAAa;QACnC,+BAA+B;QAC/B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,iDAAiD;QACjD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAE9C,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,4DAAK,KAAK,EAAC,8BAA8B;oBACvC,2DAAI,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,OAAO,CAAM;oBAE1D,4DAAK,KAAK,EAAC,4BAA4B;wBAErC,4DAAK,KAAK,EAAC,yBAAyB,IACjC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,WACE,KAAK,EAAE;gCACL,gBAAgB,EAAE,IAAI;gCACtB,0BAA0B,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK;6BACzD,EACD,GAAG,EAAE,KAAK;4BAEV,cACE,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,mBAC3B,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;gCAE9D,UAAI,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,KAAK,CAAM;gCACnD,YAAM,KAAK,EAAC,sBAAsB,IAC/B,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,CAC9B,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;oCAC5F,YAAM,CAAC,EAAC,UAAU,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,oBAAgB,OAAO,GAAE,CAC9E,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;oCAC5F,YAAM,CAAC,EAAC,kBAAkB,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG,oBAAgB,OAAO,GAAE,CACtF,CACP,CACI,CACA;4BACT,WACE,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;oCACL,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;oCACvD,OAAO,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;iCAClD;gCAED,SAAG,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,WAAW,CAAK;gCAC5D,IAAI,CAAC,aAAa,KAAK,KAAK,IAAI,IAAI,CAAC,SAAS,IAAI,CACjD,WAAK,KAAK,EAAC,6BAA6B;oCACtC,WACE,KAAK,EAAC,gCAAgC,EACtC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,GAAG,EAAE,GACrC,CACH,CACP,CACG,CACF,CACP,CAAC,CACE;wBAGN,4DAAK,KAAK,EAAC,oCAAoC;4BAC7C,4DAAK,KAAK,EAAC,kCAAkC;gCAC1C,WAAW,EAAE,QAAQ,IAAI,CACxB,4DACE,GAAG,EAAE,WAAW,CAAC,QAAQ,EACzB,GAAG,EAAE,WAAW,CAAC,QAAQ,IAAI,WAAW,CAAC,KAAK,EAC9C,KAAK,EAAC,0BAA0B,GAChC,CACH;gCACA,CAAC,WAAW,EAAE,QAAQ,IAAI,CACzB,4DAAK,KAAK,EAAC,sCAAsC;oCAC/C,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACP,CACG,CACF,CACF,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';\n\nexport interface FeatureAccordionItem {\n  title: string;\n  description: string;\n  imageUrl?: string;\n  imageAlt?: string;\n}\n\n/**\n * Feature accordion component with expandable items and accompanying image\n * Used for showcasing product features with visual examples\n * Features auto-cycling through items with a progress timer\n */\n@Component({\n  tag: 'af-feature-accordion',\n  styleUrl: 'af-feature-accordion.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfFeatureAccordion {\n  @Element() el!: HTMLElement;\n\n  /** Section heading */\n  @Prop() heading: string = 'Give AI agents your paperwork';\n\n  /** JSON string of accordion items */\n  @Prop() items: string = '[]';\n\n  /** Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) */\n  @Prop() cycleInterval: number = 6000;\n\n  /** Whether auto-cycling is enabled */\n  @Prop() autoCycle: boolean = true;\n\n  /** Currently expanded item index */\n  @State() expandedIndex: number = 0;\n\n  /** Progress of current timer (0-100) */\n  @State() timerProgress: number = 100;\n\n  private progressTimer: number | null = null;\n  private progressStartTime: number = 0;\n\n  componentDidLoad() {\n    if (this.autoCycle) {\n      this.startCycling();\n    }\n  }\n\n  disconnectedCallback() {\n    this.stopCycling();\n  }\n\n  @Watch('autoCycle')\n  handleAutoCycleChange(newValue: boolean) {\n    if (newValue) {\n      this.startCycling();\n    } else {\n      this.stopCycling();\n    }\n  }\n\n  private getItems(): FeatureAccordionItem[] {\n    try {\n      return JSON.parse(this.items);\n    } catch {\n      return [];\n    }\n  }\n\n  private startCycling() {\n    this.stopCycling();\n    this.progressStartTime = Date.now();\n    this.timerProgress = 100;\n    \n    // Progress animation frame\n    const updateProgress = () => {\n      const elapsed = Date.now() - this.progressStartTime;\n      const remaining = this.cycleInterval - elapsed;\n      \n      if (remaining <= 0) {\n        this.moveToNextItem();\n      } else {\n        this.timerProgress = (remaining / this.cycleInterval) * 100;\n        this.progressTimer = requestAnimationFrame(updateProgress);\n      }\n    };\n    \n    this.progressTimer = requestAnimationFrame(updateProgress);\n  }\n\n  private stopCycling() {\n    if (this.progressTimer) {\n      cancelAnimationFrame(this.progressTimer);\n      this.progressTimer = null;\n    }\n  }\n\n  private moveToNextItem() {\n    const items = this.getItems();\n    if (items.length === 0) return;\n    \n    this.expandedIndex = (this.expandedIndex + 1) % items.length;\n    // Restart the cycling timer for the new item\n    this.startCycling();\n  }\n\n  private handleItemClick(index: number) {\n    // Reset timer when user clicks\n    this.expandedIndex = index;\n    // Restart the cycling timer for the clicked item\n    if (this.autoCycle) {\n      this.startCycling();\n    }\n  }\n\n  render() {\n    const items = this.getItems();\n    const currentItem = items[this.expandedIndex];\n\n    return (\n      <Host>\n        <div class=\"feature-accordion\">\n          <div class=\"feature-accordion__container\">\n            <h2 class=\"feature-accordion__heading\">{this.heading}</h2>\n            \n            <div class=\"feature-accordion__content\">\n              {/* Left side - Accordion */}\n              <div class=\"feature-accordion__list\">\n                {items.map((item, index) => (\n                  <div \n                    class={{\n                      'accordion-item': true,\n                      'accordion-item--expanded': this.expandedIndex === index\n                    }}\n                    key={index}\n                  >\n                    <button \n                      class=\"accordion-item__header\"\n                      onClick={() => this.handleItemClick(index)}\n                      aria-expanded={this.expandedIndex === index ? 'true' : 'false'}\n                    >\n                      <h4 class=\"accordion-item__title\">{item.title}</h4>\n                      <span class=\"accordion-item__icon\">\n                        {this.expandedIndex === index ? (\n                          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n                          </svg>\n                        ) : (\n                          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n                          </svg>\n                        )}\n                      </span>\n                    </button>\n                    <div \n                      class=\"accordion-item__content\"\n                      style={{ \n                        maxHeight: this.expandedIndex === index ? '200px' : '0',\n                        opacity: this.expandedIndex === index ? '1' : '0'\n                      }}\n                    >\n                      <p class=\"accordion-item__description\">{item.description}</p>\n                      {this.expandedIndex === index && this.autoCycle && (\n                        <div class=\"accordion-item__timer-track\">\n                          <div \n                            class=\"accordion-item__timer-progress\"\n                            style={{ width: `${this.timerProgress}%` }}\n                          ></div>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                ))}\n              </div>\n\n              {/* Right side - Image */}\n              <div class=\"feature-accordion__image-container\">\n                <div class=\"feature-accordion__image-wrapper\">\n                  {currentItem?.imageUrl && (\n                    <img \n                      src={currentItem.imageUrl} \n                      alt={currentItem.imageAlt || currentItem.title}\n                      class=\"feature-accordion__image\"\n                    />\n                  )}\n                  {!currentItem?.imageUrl && (\n                    <div class=\"feature-accordion__image-placeholder\">\n                      <slot name=\"image\"></slot>\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -12,7 +12,7 @@ export class AfHeroSection {
         this.minHeight = '60vh';
     }
     render() {
-        return (h(Host, { key: '85061979e5f4d2a766574cbc355e2f833160050b' }, h("div", { key: 'f0c1f36c7f5f241d5a3ce590a2eff5b5e9c6f3bc', class: `hero-section variant-${this.variant}`, style: { minHeight: this.minHeight } }, this.withDecoration && (h("div", { key: '4a680dcbb970ea9c31fdcd1d4e16ec9b43e859b6', class: "hero-decoration" }, h("slot", { key: 'f8c629d60b6fbb0627e0720967bbc5bfeecbfecd', name: "decoration" }))), h("af-container", { key: '07ed025ef1b11880896a0ca72916592f4b36dddf' }, h("div", { key: 'dbe586394c6e10ed672d12326e21832376661ed1', class: "hero-content" }, h("slot", { key: 'd3906e6fd0bdb1439df2c4e6b48e090472bcc2e5' }))))));
+        return (h(Host, { key: '632fa6929a3cfbf9cc563419289bf794f95c7579' }, h("div", { key: 'a69a52476a7e891e9b78a00dcd40c53ec9b93977', class: `hero-section variant-${this.variant}`, style: { minHeight: this.minHeight } }, this.withDecoration && (h("div", { key: '50514445b760b9b8c00b7605409431799caef0a8', class: "hero-decoration" }, h("slot", { key: 'd46b422d9e9f0f2a62dc02e3f2d7f0c497e4eb3c', name: "decoration" }))), h("af-container", { key: 'd4bf7bd11a621ce964aa9c502010b5d585cc54db' }, h("div", { key: '0c9d2e67f747fc58e394b9d8e7255a542625b8bd', class: "hero-content" }, h("slot", { key: '82e132764ad876f796ca2b94787be349ccffdcf3' }))))));
     }
     static get is() { return "af-hero-section"; }
     static get encapsulation() { return "scoped"; }

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

@@ -3,25 +3,40 @@
 }
 
 .logo-well {
-  background: var(--colour-tints-inkwell-600, #1A3038);
+  background: rgb(32, 62, 69); /* Slightly lighter than inkwell for contrast */
   border-radius: 16px;
-  height: 88px;
+  height: 72px;
+  width: 184px;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 24px 40px;
+  padding: 20px 32px;
   box-sizing: border-box;
-  min-width: 120px;
 }
 
 ::slotted(img) {
-  max-height: 40px;
+  max-height: 32px;
+  max-width: 120px;
   width: auto;
+  height: auto;
   display: block;
+  object-fit: contain;
   filter: brightness(0) invert(1); /* Make logos white */
 }
 
+::slotted(svg) {
+  max-height: 32px;
+  max-width: 120px;
+  width: auto;
+  height: auto;
+  display: block;
+}
+
 ::slotted(div) {
   white-space: nowrap;
+  color: white;
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: 600;
+  font-size: 16px;
 }
 

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

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class AfLogoWell {
     render() {
-        return (h(Host, { key: '6443fda91c37fd9f2efd49fbd10b1899f311cd54' }, h("div", { key: '30ec1e2891dfd89af7cc310986d3c5c48e05c556', class: "logo-well" }, h("slot", { key: '4601797d3cef6ed117dc6c93083652dd22f51f05' }))));
+        return (h(Host, { key: 'a890852e16b4e6cc849102c3a172c5049c86da4b' }, h("div", { key: '54935155d4cc9f30519252017c6c23b62aabd009', class: "logo-well" }, h("slot", { key: '5cf33bdb4332eb25a653d443f21f2fc4505473fa' }))));
     }
     static get is() { return "af-logo-well"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,6 +22,7 @@
   justify-content: space-between;
   padding: 8px 8px 8px 40px;
   box-sizing: border-box;
+  flex-wrap: nowrap; /* Prevent wrapping */
 }
 
 /* Left section */
@@ -29,6 +30,7 @@
   display: flex;
   align-items: center;
   gap: 32px;
+  flex-shrink: 0;
 }
 
 .logo {
@@ -56,6 +58,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  flex-wrap: nowrap;
 }
 
 /* Right section */
@@ -63,6 +66,7 @@
   display: flex;
   align-items: center;
   gap: 20px;
+  flex-shrink: 0;
 }
 
 .nav-actions {
@@ -76,6 +80,21 @@
   align-items: center;
 }
 
+/* 
+ * Breakpoint 1: Hide "Talk to us" and "Log in" (nav-actions) 
+ * This happens first as the viewport gets narrower
+ * Matches affinda.com behavior at ~1100px
+ */
+@media (max-width: 1099px) {
+  .nav-actions {
+    display: none;
+  }
+  
+  .navbar-right {
+    gap: 0;
+  }
+}
+
 /* Tablet adjustments */
 @media (max-width: 1024px) {
   .navbar-container {
@@ -91,8 +110,11 @@
   }
 }
 
-/* Mobile adjustments */
-@media (max-width: 767px) {
+/* 
+ * Breakpoint 2: Switch to hamburger menu
+ * Matches affinda.com behavior at 991px
+ */
+@media (max-width: 991px) {
   .navbar-container {
     padding: 16px 16px 0;
   }
@@ -102,6 +124,7 @@
     flex-direction: column;
     border-radius: 16px;
     gap: 0;
+    flex-wrap: wrap; /* Allow wrapping in mobile menu */
   }
 
   .navbar-left {
@@ -125,6 +148,7 @@
     align-items: stretch;
     gap: 0;
     margin-top: 16px;
+    flex-wrap: wrap;
   }
 
   /* Show nav links when menu is open */
@@ -147,7 +171,9 @@
     display: flex;
   }
 
+  /* Show nav-actions again in mobile menu */
   .nav-actions {
+    display: flex;
     width: 100%;
     flex-direction: column;
     align-items: stretch;

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

@@ -33,6 +33,27 @@
 .bg-dark,
 .bg-inkwell {
   background-color: var(--colour-brand-inkwell, #14343B);
+  --colour-typography-heading-primary: var(--colour-brand-mist-green, #C6D5D1);
+  --colour-typography-body-default: var(--colour-brand-mist-green, #C6D5D1);
+}
+
+/* Automatic contrast overrides for dark sections */
+.bg-dark af-heading::part(base),
+.bg-inkwell af-heading::part(base) {
+  color: var(--colour-brand-mist-green, #C6D5D1);
+}
+
+.bg-dark af-text::part(base),
+.bg-inkwell af-text::part(base) {
+  color: var(--colour-brand-mist-green, #C6D5D1);
+  opacity: 0.92;
+}
+
+.bg-dark af-typography-lockup::part(heading),
+.bg-inkwell af-typography-lockup::part(heading),
+.bg-dark af-typography-lockup::part(body),
+.bg-inkwell af-typography-lockup::part(body) {
+  color: var(--colour-brand-mist-green, #C6D5D1);
 }
 
 /* Mobile adjustments */

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

@@ -12,8 +12,8 @@ export class AfSection {
         this.container = true;
     }
     render() {
-        const content = h("slot", { key: '269517d1852d1e459db9dc2673b88b4d8042f61b' });
-        return (h(Host, { key: 'a080f296f2f7178db29e973cce05048847e66c83' }, h("div", { key: '54bdca28715bdd18e38d85e2ed95a5699f793d3e', class: `section padding-${this.padding} bg-${this.background}` }, this.container ? (h("af-container", null, content)) : content)));
+        const content = h("slot", { key: '3c8c5e1b316afac68685fe32f512fadac62e00f7' });
+        return (h(Host, { key: '343991533b792f1c78e65eab65420a206bdfcfbc' }, h("div", { key: 'a2efe0c402b515e4160309dce5356e79b69f9677', class: `section padding-${this.padding} bg-${this.background}` }, this.container ? (h("af-container", null, content)) : content)));
     }
     static get is() { return "af-section"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class AfTestimonial {
     render() {
-        return (h(Host, { key: 'b4a23c841092c119b7e8abd4249b75985f8edf95' }, h("div", { key: '65fec4f695a746ef51d4539b33dc166d4f1cb95c', class: "testimonial-card" }, h("div", { key: 'ad5ec6edb4fd3577f14d9cbcce925c1c68d6262e', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: '4e51da94bd106ae50c63186c7cbedee3e86d341e', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: '68eea0c228eb7d3e92a3cbab11ee4d1b3d9e590e', class: "testimonial-logo" }, h("img", { key: '5f2225a849003d6b4b5ccc08073da121e3d27cf4', src: this.logoImage, alt: "Company logo" })))), h("div", { key: '9e6dbb02f4d87829af74c66029bd93ce3f3c65dd', class: "testimonial-content" }, h("div", { key: 'efd25f8dc722d79006835406a972da0d5fd7f77f', class: "testimonial-quote-section" }, h("div", { key: '46064d44eeed1712130c6c24007f5481b9cc3cf7', class: "testimonial-quote-icon" }, h("slot", { key: 'e1389d94a5cbb1181862963fd799d7c14b2d3ee5', name: "quote-icon" }, h("svg", { key: '6a935e48920b1964036f02fbc830b1319a20f057', width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'cf0de3883bdf5a39cd377591ec34a02d75afd39c', d: "M10.5 25.5C10.5 23.0147 12.5147 21 15 21H18C18.8284 21 19.5 20.3284 19.5 19.5V15C19.5 12.5147 17.4853 10.5 15 10.5H10.5C6.35786 10.5 3 13.8579 3 18V33C3 35.4853 5.01472 37.5 7.5 37.5H15C17.4853 37.5 19.5 35.4853 19.5 33V25.5C19.5 23.0147 17.4853 21 15 21H10.5ZM33 25.5C33 23.0147 35.0147 21 37.5 21H40.5C41.3284 21 42 20.3284 42 19.5V15C42 12.5147 39.9853 10.5 37.5 10.5H33C28.8579 10.5 25.5 13.8579 25.5 18V33C25.5 35.4853 27.5147 37.5 30 37.5H37.5C39.9853 37.5 42 35.4853 42 33V25.5C42 23.0147 39.9853 21 37.5 21H33Z", fill: "currentColor" })))), h("p", { key: 'db71848c9ae10a2a24cdcb6797f8f2b4fbf6cea9', class: "testimonial-text" }, this.quote), h("p", { key: 'ad7c4fd0a91a1c2ea42d4abcc3ab949e51c3d313', class: "testimonial-attribution" }, this.attribution)), h("div", { key: '8042208ced311c39c8d91968ac1bc37c76971ec1', class: "testimonial-stats" }, h("slot", { key: 'b5c40fdb83b6776b2de0a57e37045a1fde50e78f', name: "stats" })), h("div", { key: '1b19fc1264136cf90cb0c32841678129f5dd711d', class: "testimonial-footer" }, h("div", { key: '77058648a8e25ed63b622c7bbf873c299e39e42d', class: "testimonial-nav" }, h("slot", { key: '9231316a8dd17ae30c754e1ff1ba9ea70c327c82', name: "navigation" })), this.readMoreLink && (h("a", { key: '01072189417f44da780b5c5a8849e9e66a2a9b0d', href: this.readMoreLink, class: "testimonial-cta" }, h("span", { key: '8c5008a42d4c4160bb4950f562872a67ac26c15c' }, "Read full story"), h("svg", { key: '881176b723a0f4c3d941d2be0f8983ddc0468ee6', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'd8fd8469aa2c45286891751b269c692ee90426c0', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))));
+        return (h(Host, { key: '140eb69f7306717ae75d38b838fc58b1122fff56' }, h("div", { key: '1a54c4603fae73894796e62cb7cc83d9a96b7d12', class: "testimonial-card" }, h("div", { key: 'eb0df92d60f8d307a10982bd70e9d97705b57585', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: '0a6b9005a96e42e9dd6b0664ada910c12ab6bbe9', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: '0ba830a85ef37b0f3c01d386fcd916272264e9fa', class: "testimonial-logo" }, h("img", { key: '275dec6170c69349a41f44f325ec0214c219de02', src: this.logoImage, alt: "Company logo" })))), h("div", { key: 'f24c19c3a46c7007ed15a3ebd1794ff8023822fc', class: "testimonial-content" }, h("div", { key: 'd3559ba097b0eac517fa05079c27505a24cb1832', class: "testimonial-quote-section" }, h("div", { key: '1d8851985509ac43c88e375194adf1441c4e119d', class: "testimonial-quote-icon" }, h("slot", { key: 'a666ea9b0fa13fb8d4d853a61f1ac449af66469a', name: "quote-icon" }, h("svg", { key: '3e2df27c9a8f2d2bc20ad4aef45459235efab2b9', width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd77d4c447cf53c3ce3890342356f476332d309f9', d: "M10.5 25.5C10.5 23.0147 12.5147 21 15 21H18C18.8284 21 19.5 20.3284 19.5 19.5V15C19.5 12.5147 17.4853 10.5 15 10.5H10.5C6.35786 10.5 3 13.8579 3 18V33C3 35.4853 5.01472 37.5 7.5 37.5H15C17.4853 37.5 19.5 35.4853 19.5 33V25.5C19.5 23.0147 17.4853 21 15 21H10.5ZM33 25.5C33 23.0147 35.0147 21 37.5 21H40.5C41.3284 21 42 20.3284 42 19.5V15C42 12.5147 39.9853 10.5 37.5 10.5H33C28.8579 10.5 25.5 13.8579 25.5 18V33C25.5 35.4853 27.5147 37.5 30 37.5H37.5C39.9853 37.5 42 35.4853 42 33V25.5C42 23.0147 39.9853 21 37.5 21H33Z", fill: "currentColor" })))), h("p", { key: '342293249e60e142db1d13541c1cdee5b5e0adc0', class: "testimonial-text" }, this.quote), h("p", { key: '68ff2c4e99403f533877f30829c58bd30029d8bb', class: "testimonial-attribution" }, this.attribution)), h("div", { key: 'c3a810a398d0c2ae23a81cec50862bd036816115', class: "testimonial-stats" }, h("slot", { key: '798b98ca93deaff16c71e80bc82aabc1394ae3e7', name: "stats" })), h("div", { key: 'cb194830eb8bcdb3bcdeca2f2882e920160fb0bf', class: "testimonial-footer" }, h("div", { key: 'c3bf10a964df92ffbb06e89fb1884473177f0f76', class: "testimonial-nav" }, h("slot", { key: '25479342ec5b206a96c7291d619370558b6942a6', name: "navigation" })), this.readMoreLink && (h("a", { key: '7267d68860040775393fa5d11d77f70015654b17', href: this.readMoreLink, class: "testimonial-cta" }, h("span", { key: '706d1e088640e463b3df22b783893cc9142ba22d' }, "Read full story"), h("svg", { key: '9f3c15b16c949412b7860dba79e69827671fe6d3', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'ee2b49e1a6a6dde48334ae05203e65ea4ee89094', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))));
     }
     static get is() { return "af-testimonial"; }
     static get encapsulation() { return "scoped"; }

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

@@ -65,7 +65,7 @@ export class AfTestimonialCarousel {
     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: () => {
+        return (h(Host, { key: '5fd0c47f2034eb0c63ccab1aa0442fae52b7523e' }, h("div", { key: '9eae24dbbdd8c211df3ec37dc3561ca4e96f0bf7', class: "testimonial-carousel" }, h("div", { key: '85f4fb256f727426689654fe8f95496b017cd5bf', class: "testimonial-slides" }, h("slot", { key: 'c4fe967e71964c671c705f7407daa4bbc7f254b5' })), this.testimonialCount > 1 && (h("div", { key: 'bf80d9aabffbcde4d69f36014a6ba73f2425216a', 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;
@@ -74,7 +74,7 @@ export class AfTestimonialCarousel {
                         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" }))))))));
+            } }))))), this.testimonialCount > 1 && (h("div", { key: '5b1f2e123b2be2efccdc0c744f18ff19edf388ad', class: "carousel-navigation" }, h("button", { key: 'ad93e570662d8d77af764803b5d3139a687044bb', class: "nav-button prev", disabled: !hasPrev, onClick: this.goToPrevious, "aria-label": "Previous testimonial" }, h("svg", { key: '48dbcc2bb6161d39dabd56c3bd92f1035f9cb168', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'd5b600df7aa327667083b264e7306242976509f8', d: "M19 12H5M5 12L12 19M5 12L12 5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '366c751d511308fb240c549043908284a74d7667', class: "nav-button next", disabled: !hasNext, onClick: this.goToNext, "aria-label": "Next testimonial" }, h("svg", { key: '9498a3f67bc4c6f80b8082722d11496d223e08e6', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'c3fb745ae116752613a30b93550ed25e97b4c9c1', 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"; }

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: '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))));
+        return (h(Host, { key: 'fbe463de5d163fca0559c87db94559db3ff47241' }, h("div", { key: 'bbc9ff2c9ae235e26019064eae17f1467f55cde4', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("p", { key: '911458749440dec349d483c1b1210b8fd580d7e0', class: "stat-value" }, this.value), h("p", { key: '7e5f1308ead2e9ee614004db7c2e54312a6de1aa', class: "stat-description" }, this.description))));
     }
     static get is() { return "af-testimonial-stat"; }
     static get encapsulation() { return "scoped"; }

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: '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" })))));
+        return (h(Host, { key: '108f59f3983487b19e059fa0f9c9c33cfb9b47ba' }, h("div", { key: '4dd1ece34095b91fcf9f41355a16eb4fb4b83ef0', class: containerClasses }, h("div", { key: '3a472b7ccfe7192ca9f2867e91b366469c030442', class: copyClasses, style: copyStyle }, h("div", { key: '8c7d108f085b2cbd27253965f4a9c627898d52a0', class: "heading", part: "heading" }, h("slot", { key: 'ab0da917969c74802ad29a2e9fc40e2be2087efb' })), h("div", { key: 'd9103dc4580284fec67022b0e8511b9c7beb4cc8', class: "description", part: "body" }, h("slot", { key: '266b6b74ce3277f89bc6d3d8531774f02dd9c6cd', name: "description" }))), h("div", { key: 'a0e91aa0cfca5d40f76049312541bf230bb8c9ab', class: "buttons", part: "buttons" }, h("slot", { key: 'a3f390bd122655d461cb39687cf9acb3a08b8453', name: "buttons" })))));
     }
     static get is() { return "af-typography-lockup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"af-typography-lockup.js","sourceRoot":"","sources":["../../../src/components/af-typography-lockup/af-typography-lockup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,kBAAkB;IAL/B;QAME;;WAEG;QACK,gBAAW,GAAsB,CAAC,CAAC;QAE3C;;WAEG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;WAEG;QACK,kBAAa,GAAsB,MAAM,CAAC;QAElD;;WAEG;QACK,oBAAe,GAA8B,UAAU,CAAC;KAwCjE;IAjCC,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,QAAQ,EAAE,IAAI;YACd,CAAC,QAAQ,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,IAAI;YACpC,CAAC,UAAU,IAAI,CAAC,eAAe,EAAE,CAAC,EAAE,IAAI;SACzC,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,MAAM,EAAE,IAAI;YACZ,CAAC,WAAW,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;SACxC,CAAC;QAEF,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAE1E,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,4DAAK,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS;oBACvC,4DAAK,KAAK,EAAC,SAAS;wBAClB,8DAAa,CACT;oBACN,4DAAK,KAAK,EAAC,aAAa;wBACtB,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF;gBACN,4DAAK,KAAK,EAAC,SAAS;oBAClB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-typography-lockup',\n  styleUrl: 'af-typography-lockup.css',\n  shadow: true\n})\nexport class AfTypographyLockup {\n  /**\n   * The heading size (1-5, where 1 is largest)\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 2;\n\n  /**\n   * The breakpoint for responsive typography\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Text alignment\n   */\n  @Prop() textAlignment: 'left' | 'center' = 'left';\n\n  /**\n   * Button alignment (horizontal or vertical stacking)\n   */\n  @Prop() buttonAlignment: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Maximum width for the copy section (in pixels)\n   */\n  @Prop() maxWidth?: number;\n\n  render() {\n    const containerClasses = {\n      'lockup': true,\n      [`text-${this.textAlignment}`]: true,\n      [`button-${this.buttonAlignment}`]: true\n    };\n\n    const copyClasses = {\n      'copy': true,\n      [`heading-${this.headingSize}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true\n    };\n\n    const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class={copyClasses} style={copyStyle}>\n            <div class=\"heading\">\n              <slot></slot>\n            </div>\n            <div class=\"description\">\n              <slot name=\"description\"></slot>\n            </div>\n          </div>\n          <div class=\"buttons\">\n            <slot name=\"buttons\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-typography-lockup.js","sourceRoot":"","sources":["../../../src/components/af-typography-lockup/af-typography-lockup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,kBAAkB;IAL/B;QAME;;WAEG;QACK,gBAAW,GAAsB,CAAC,CAAC;QAE3C;;WAEG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;WAEG;QACK,kBAAa,GAAsB,MAAM,CAAC;QAElD;;WAEG;QACK,oBAAe,GAA8B,UAAU,CAAC;KAwCjE;IAjCC,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,QAAQ,EAAE,IAAI;YACd,CAAC,QAAQ,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,IAAI;YACpC,CAAC,UAAU,IAAI,CAAC,eAAe,EAAE,CAAC,EAAE,IAAI;SACzC,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,MAAM,EAAE,IAAI;YACZ,CAAC,WAAW,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;SACxC,CAAC;QAEF,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAE1E,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,4DAAK,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS;oBACvC,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;wBACjC,8DAAa,CACT;oBACN,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM;wBAClC,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF;gBACN,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;oBACjC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-typography-lockup',\n  styleUrl: 'af-typography-lockup.css',\n  shadow: true\n})\nexport class AfTypographyLockup {\n  /**\n   * The heading size (1-5, where 1 is largest)\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 2;\n\n  /**\n   * The breakpoint for responsive typography\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Text alignment\n   */\n  @Prop() textAlignment: 'left' | 'center' = 'left';\n\n  /**\n   * Button alignment (horizontal or vertical stacking)\n   */\n  @Prop() buttonAlignment: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Maximum width for the copy section (in pixels)\n   */\n  @Prop() maxWidth?: number;\n\n  render() {\n    const containerClasses = {\n      'lockup': true,\n      [`text-${this.textAlignment}`]: true,\n      [`button-${this.buttonAlignment}`]: true\n    };\n\n    const copyClasses = {\n      'copy': true,\n      [`heading-${this.headingSize}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true\n    };\n\n    const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class={copyClasses} style={copyStyle}>\n            <div class=\"heading\" part=\"heading\">\n              <slot></slot>\n            </div>\n            <div class=\"description\" part=\"body\">\n              <slot name=\"description\"></slot>\n            </div>\n          </div>\n          <div class=\"buttons\" part=\"buttons\">\n            <slot name=\"buttons\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { A as AfAspectRatio$1, d as defineCustomElement$1 } from './p-BMl1ggbQ.js';
+import { A as AfAspectRatio$1, d as defineCustomElement$1 } from './p-PLXzXWgX.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-BeQlNDyY.js';
+import { A as AfButtonGroup$1, d as defineCustomElement$1 } from './p-7a3XpKXs.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-CcNomA2o.js';
+import { A as AfButton$1, d as defineCustomElement$1 } from './p-BKGrl8ua.js';
 
 const AfButton = AfButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-card.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CZlTvZAm.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.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):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}";
 

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CZlTvZAm.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.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}}";
 

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

@@ -1,4 +1,4 @@
-import { A as AfColorSwatch$1, d as defineCustomElement$1 } from './p-BSewwIfD.js';
+import { A as AfColorSwatch$1, d as defineCustomElement$1 } from './p-BBivIwbE.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-BpXkQGDQ.js';
+import { A as AfContainer$1, d as defineCustomElement$1 } from './p-BkEmrXbw.js';
 
 const AfContainer = AfContainer$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-cta-section.d.ts

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