@affinda/wc 0.0.15 → 0.0.16

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

@@ -0,0 +1,186 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Checkbox component for selecting multiple options.
+ * Supports checked, unchecked, and indeterminate states.
+ *
+ * @slot - Checkbox label text
+ */
+export class AfCheckbox {
+    constructor() {
+        /**
+         * Whether the checkbox is checked
+         */
+        this.checked = false;
+        /**
+         * Whether the checkbox is in an indeterminate state
+         */
+        this.indeterminate = false;
+        /**
+         * Whether the checkbox is disabled
+         */
+        this.disabled = false;
+        this.handleChange = () => {
+            if (this.disabled)
+                return;
+            this.checked = !this.checked;
+            this.afChange.emit({ checked: this.checked });
+        };
+    }
+    componentDidLoad() {
+        if (this.inputEl) {
+            this.inputEl.indeterminate = this.indeterminate;
+        }
+    }
+    componentDidUpdate() {
+        if (this.inputEl) {
+            this.inputEl.indeterminate = this.indeterminate;
+        }
+    }
+    render() {
+        const checkboxClasses = {
+            'checkbox': true,
+            'checked': this.checked,
+            'indeterminate': this.indeterminate,
+            'disabled': this.disabled
+        };
+        const controlClasses = {
+            'control': true,
+            'checked': this.checked || this.indeterminate,
+            'disabled': this.disabled
+        };
+        return (h(Host, { key: '704dbd9106798984fcbd46e56f8a9baca515bdbf' }, h("label", { key: '81ca6ce4e7a75eb371670a3dda2020e2b0b964fa', class: checkboxClasses }, h("input", { key: 'eb1b53e57dcbdb642d27980059e193d91ecfe926', type: "checkbox", class: "input", ref: (el) => this.inputEl = el ?? undefined, checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, onChange: this.handleChange }), h("span", { key: 'de52fa18c14faf38a40aff2a5d99c679efabcfa3', class: controlClasses }, this.checked && !this.indeterminate && (h("svg", { key: '4e8d59f891090221798d9aae19156ccf51d1b297', class: "icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'c53cce8b04e2c4c5e08744bc184add29a3e808b5', d: "M13.5 4L6 11.5L2.5 8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (h("svg", { key: '420a6222b098df08f66a84e3f92734f7d9a7fc43', class: "icon", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '8ff3b3d01c6db33f2eb753caea38f0a1feeab717', d: "M3 8H13", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), h("span", { key: '9513888140fbe087a71ef79b4c80a66f6a8e49ec', class: "label" }, h("slot", { key: '4fd9ddb4b6e25ded5f806ad7682a553fba119671' })))));
+    }
+    static get is() { return "af-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox is checked"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox is in an indeterminate state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the checkbox for form submission"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the checkbox for form submission"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "afChange",
+                "name": "afChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the checkbox checked state changes"
+                },
+                "complexType": {
+                    "original": "{ checked: boolean }",
+                    "resolved": "{ checked: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=af-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-checkbox.js","sourceRoot":"","sources":["../../../src/components/af-checkbox/af-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E;;;;;GAKG;AAMH,MAAM,OAAO,UAAU;IALvB;QAME;;WAEG;QACqC,YAAO,GAAY,KAAK,CAAC;QAEjE;;WAEG;QACsB,kBAAa,GAAY,KAAK,CAAC;QAExD;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QAmB3C,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QAChD,CAAC,CAAC;KAuEH;IArEC,gBAAgB;QACd,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QAClD,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QAClD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAG;YACtB,UAAU,EAAE,IAAI;YAChB,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,eAAe,EAAE,IAAI,CAAC,aAAa;YACnC,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,cAAc,GAAG;YACrB,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa;YAC7C,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,KAAK,EAAE,eAAe;gBAC3B,8DACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,OAAO,EACb,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,IAAI,SAAS,EAC3C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,GAC3B;gBACF,6DAAM,KAAK,EAAE,cAAc;oBACxB,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CACtC,4DAAK,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;wBAC/C,6DACE,CAAC,EAAC,sBAAsB,EACxB,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,qBACN,OAAO,GACvB,CACE,CACP;oBACA,IAAI,CAAC,aAAa,IAAI,CACrB,4DAAK,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM;wBAC/C,6DACE,CAAC,EAAC,SAAS,EACX,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,GACtB,CACE,CACP,CACI;gBACP,6DAAM,KAAK,EAAC,OAAO;oBACjB,8DAAa,CACR,CACD,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Checkbox component for selecting multiple options.\n * Supports checked, unchecked, and indeterminate states.\n * \n * @slot - Checkbox label text\n */\n@Component({\n  tag: 'af-checkbox',\n  styleUrl: 'af-checkbox.css',\n  shadow: true\n})\nexport class AfCheckbox {\n  /**\n   * Whether the checkbox is checked\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * Whether the checkbox is in an indeterminate state\n   */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n\n  /**\n   * Whether the checkbox is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the checkbox for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the checkbox for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the checkbox checked state changes\n   */\n  @Event() afChange!: EventEmitter<{ checked: boolean }>;\n\n  private inputEl?: HTMLInputElement;\n\n  private handleChange = () => {\n    if (this.disabled) return;\n    this.checked = !this.checked;\n    this.afChange.emit({ checked: this.checked });\n  };\n\n  componentDidLoad() {\n    if (this.inputEl) {\n      this.inputEl.indeterminate = this.indeterminate;\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.inputEl) {\n      this.inputEl.indeterminate = this.indeterminate;\n    }\n  }\n\n  render() {\n    const checkboxClasses = {\n      'checkbox': true,\n      'checked': this.checked,\n      'indeterminate': this.indeterminate,\n      'disabled': this.disabled\n    };\n\n    const controlClasses = {\n      'control': true,\n      'checked': this.checked || this.indeterminate,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={checkboxClasses}>\n          <input\n            type=\"checkbox\"\n            class=\"input\"\n            ref={(el) => this.inputEl = el ?? undefined}\n            checked={this.checked}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            onChange={this.handleChange}\n          />\n          <span class={controlClasses}>\n            {this.checked && !this.indeterminate && (\n              <svg class=\"icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path \n                  d=\"M13.5 4L6 11.5L2.5 8\" \n                  stroke=\"currentColor\" \n                  stroke-width=\"2\" \n                  stroke-linecap=\"round\" \n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            )}\n            {this.indeterminate && (\n              <svg class=\"icon\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path \n                  d=\"M3 8H13\" \n                  stroke=\"currentColor\" \n                  stroke-width=\"2\" \n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            )}\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n\n"]}

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

@@ -1,36 +1,21 @@
 :host {
   display: block;
   width: 100%;
-  background-color: var(--colour-brand-inkwell, #14343B);
 }
 
 .client-carousel {
-  padding: 48px 80px;
+  padding: 48px 0;
   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;
+  width: 100%;
+  overflow: hidden;
 }
 
 .carousel-container {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--space-4, 16px);
   width: 100%;
   overflow: hidden;
 }
@@ -44,7 +29,7 @@
 
 .logo-track {
   display: flex;
-  gap: 16px;
+  gap: var(--space-4, 16px);
   animation-timing-function: linear;
   animation-iteration-count: infinite;
 }
@@ -61,6 +46,11 @@
   animation-duration: 40s;
 }
 
+/* Pause animation on hover */
+:host(:hover) .logo-track {
+  animation-play-state: paused;
+}
+
 @keyframes scroll-left {
   0% {
     transform: translateX(0);
@@ -79,34 +69,89 @@
   }
 }
 
-/* Ensure slotted logos maintain their styling */
+/* Style slotted container divs as flex rows with proper gap */
 ::slotted(*) {
+  display: flex;
   flex-shrink: 0;
+  gap: var(--space-4, 16px);
+  align-items: center;
+}
+
+/* ==========================================================================
+   Theme Variants
+   ========================================================================== */
+
+/* INKWELL THEME (Default) */
+:host(.theme-inkwell),
+.client-carousel.theme-inkwell {
+  background-color: var(--colour-brand-inkwell, #14343B);
+  --af-carousel-logo-well-bg: var(--colour-background-level1-dark, #203e45);
+  --af-carousel-logo-color: white;
+  --af-carousel-logo-filter: brightness(0) invert(1);
 }
 
+/* WHITE THEME */
+:host(.theme-white),
+.client-carousel.theme-white {
+  background-color: var(--colour-brand-white, #FFFFFF);
+  --af-carousel-logo-well-bg: var(--colour-background-level1, #e8eeed);
+  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);
+  --af-carousel-logo-filter: none;
+}
+
+/* MIST-GREEN THEME */
+:host(.theme-mist-green),
+.client-carousel.theme-mist-green {
+  background-color: var(--colour-brand-mist-green, #C6D5D1);
+  --af-carousel-logo-well-bg: var(--colour-mistgreen-300, #dde6e3);
+  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);
+  --af-carousel-logo-filter: none;
+}
+
+/* SOFT-CLAY THEME */
+:host(.theme-soft-clay),
+.client-carousel.theme-soft-clay {
+  background-color: var(--colour-softclay-400, #c0ab8d);
+  --af-carousel-logo-well-bg: var(--colour-softclay-200, #d5c5b0);
+  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);
+  --af-carousel-logo-filter: none;
+}
+
+/* WHITE-IVORY THEME */
+:host(.theme-white-ivory),
+.client-carousel.theme-white-ivory {
+  background-color: var(--colour-brand-ivory-paper, #fff9ee);
+  --af-carousel-logo-well-bg: var(--colour-softclay-100, #f2eadc);
+  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);
+  --af-carousel-logo-filter: none;
+}
+
+/* ==========================================================================
+   Responsive Adjustments
+   ========================================================================== */
+
 /* Tablet adjustments */
 @media (max-width: 1024px) {
   .client-carousel {
-    padding: 32px 40px;
-  }
-  
-  .headline {
-    padding: 16px 40px;
+    padding: 32px 0;
   }
 }
 
 /* Mobile adjustments */
 @media (max-width: 767px) {
   .client-carousel {
-    padding: 24px 16px;
+    padding: 24px 0;
   }
   
-  .headline {
-    padding: 16px;
+  .carousel-container {
+    gap: var(--space-3, 12px);
   }
   
-  .headline h3 {
-    font-size: 25px;
+  .logo-track {
+    gap: var(--space-3, 12px);
+  }
+  
+  ::slotted(*) {
+    gap: var(--space-3, 12px);
   }
 }
-

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

@@ -1,16 +1,19 @@
 import { h, Host } from "@stencil/core";
 /**
- * Infinite scrolling carousel for client logos
+ * Infinite scrolling carousel for client logos.
+ *
+ * This is a section-level component that spans full width.
+ * It supports theming via the `theme` prop.
+ *
+ * For headlines, use a separate TypographyLockup or Heading component above this carousel.
  */
 export class AfClientCarousel {
     constructor() {
-        /** Show headline above carousel */
-        this.showHeadline = false;
-        /** Headline text */
-        this.headlineText = "Trusted by some of the world's leading organisations";
+        /** Theme - sets background color and provides theme context to children */
+        this.theme = 'inkwell';
     }
     render() {
-        return (h(Host, { key: '5fdbce7312f3f7c00474a2b6f43b5d8f3c37743c' }, h("div", { key: '40b07abc9ca6df62f728460924e32729ef331061', class: "client-carousel" }, this.showHeadline && (h("div", { key: '9df79298743c1d6162f7757542e504ba74efe388', class: "headline" }, h("slot", { key: '517bfc8867aa38732ef6680aae091393244231ed', name: "headline" }, h("h3", { key: '13aa0d4256c02b64c03d39ff8da68f2e4887dedb' }, this.headlineText)))), h("div", { key: 'c19edb1378e19f840909b518548e81dd074c164b', class: "carousel-container" }, h("div", { key: '03b888e2061eb5958e1e421f03c9905b8b05e4b2', class: "carousel-row scroll-left" }, h("div", { key: 'ae603217bb2472a86cb9fbeb443d41d0f73315e1', class: "logo-track" }, h("slot", { key: '9f3760aebbf5cc6fce0b3fe36367e03cc5b00ad6', name: "row-1" }), h("slot", { key: '52dd6e4327818d6a99cf8153a0a0734e523656a1', name: "row-1" }))), h("div", { key: 'e823bee75ef600aa2216ab83eac4b6b899a8d3c7', class: "carousel-row scroll-right" }, h("div", { key: '4ef850ef8bbee6d92e36cb0d45fa41c0dfc5cf85', class: "logo-track" }, h("slot", { key: 'c1f5e9d9e4cd1f28947709f813bb5f9b27a94496', name: "row-2" }), h("slot", { key: '7917e3d42585e007c8e8498df68059b413ac6cd8', name: "row-2" })))))));
+        return (h(Host, { key: '5b422b47406a2ce622a2c67f88f9da6933812768', class: `theme-${this.theme}` }, h("div", { key: '830bbbd027dcd61d282c80d8ec2edf8cbabef1d1', class: `client-carousel theme-${this.theme}` }, h("div", { key: 'e8746e1860a94eba0d8136dce2c3aa81986eedb2', class: "carousel-container" }, h("div", { key: '13e17fd9ae7a4959997f342c93e6bf44091b31a2', class: "carousel-row scroll-left" }, h("div", { key: '9c9f813b95406aa35b7b44bfc081079af520d836', class: "logo-track" }, h("slot", { key: 'ea952977509633ac91113591865af83ca3cb5ba9', name: "row-1" }), h("slot", { key: '7c838999d4e97f46b5855f62a2f6bee42617c18d', name: "row-1" }))), h("div", { key: '2e30703c86f4d6dad64d9233568996926b9ce4a6', class: "carousel-row scroll-right" }, h("div", { key: 'df2eb879096a421a3702c77e9db2c6416adfe393', class: "logo-track" }, h("slot", { key: '031fdc0c8fb9f69e8f3ae3eff10f7c7e72dca9db', name: "row-2" }), h("slot", { key: 'e48f4d94ab9707d143329e443ec8cee4da66cb9a', name: "row-2" })))))));
     }
     static get is() { return "af-client-carousel"; }
     static get encapsulation() { return "shadow"; }
@@ -26,45 +29,30 @@ export class AfClientCarousel {
     }
     static get properties() {
         return {
-            "showHeadline": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Show headline above carousel"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-headline",
-                "defaultValue": "false"
-            },
-            "headlineText": {
+            "theme": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "Theme",
+                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | \"white-ivory\"",
+                    "references": {
+                        "Theme": {
+                            "location": "global",
+                            "id": "global::Theme"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Headline text"
+                    "text": "Theme - sets background color and provides theme context to children"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "headline-text",
-                "defaultValue": "\"Trusted by some of the world's leading organisations\""
+                "attribute": "theme",
+                "defaultValue": "'inkwell'"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"af-client-carousel.js","sourceRoot":"","sources":["../../../src/components/af-client-carousel/af-client-carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,gBAAgB;IAL7B;QAME,mCAAmC;QAC3B,iBAAY,GAAY,KAAK,CAAC;QAEtC,oBAAoB;QACZ,iBAAY,GAAW,sDAAsD,CAAC;KAmCvF;IAjCC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,iBAAiB;gBACzB,IAAI,CAAC,YAAY,IAAI,CACpB,4DAAK,KAAK,EAAC,UAAU;oBACnB,6DAAM,IAAI,EAAC,UAAU;wBACnB,6DAAK,IAAI,CAAC,YAAY,CAAM,CACvB,CACH,CACP;gBAED,4DAAK,KAAK,EAAC,oBAAoB;oBAE7B,4DAAK,KAAK,EAAC,0BAA0B;wBACnC,4DAAK,KAAK,EAAC,YAAY;4BACrB,6DAAM,IAAI,EAAC,OAAO,GAAQ;4BAC1B,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF;oBAGN,4DAAK,KAAK,EAAC,2BAA2B;wBACpC,4DAAK,KAAK,EAAC,YAAY;4BACrB,6DAAM,IAAI,EAAC,OAAO,GAAQ;4BAC1B,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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,"file":"af-client-carousel.js","sourceRoot":"","sources":["../../../src/components/af-client-carousel/af-client-carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;;;;;;GAOG;AAMH,MAAM,OAAO,gBAAgB;IAL7B;QAME,2EAA2E;QACnE,UAAK,GAAU,SAAS,CAAC;KA2BlC;IAzBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,SAAS,IAAI,CAAC,KAAK,EAAE;YAChC,4DAAK,KAAK,EAAE,yBAAyB,IAAI,CAAC,KAAK,EAAE;gBAC/C,4DAAK,KAAK,EAAC,oBAAoB;oBAE7B,4DAAK,KAAK,EAAC,0BAA0B;wBACnC,4DAAK,KAAK,EAAC,YAAY;4BACrB,6DAAM,IAAI,EAAC,OAAO,GAAQ;4BAC1B,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF;oBAGN,4DAAK,KAAK,EAAC,2BAA2B;wBACpC,4DAAK,KAAK,EAAC,YAAY;4BACrB,6DAAM,IAAI,EAAC,OAAO,GAAQ;4BAC1B,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Theme = 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';\n\n/**\n * Infinite scrolling carousel for client logos.\n * \n * This is a section-level component that spans full width.\n * It supports theming via the `theme` prop.\n * \n * For headlines, use a separate TypographyLockup or Heading component above this carousel.\n */\n@Component({\n  tag: 'af-client-carousel',\n  styleUrl: 'af-client-carousel.css',\n  shadow: true,\n})\nexport class AfClientCarousel {\n  /** Theme - sets background color and provides theme context to children */\n  @Prop() theme: Theme = 'inkwell';\n\n  render() {\n    return (\n      <Host class={`theme-${this.theme}`}>\n        <div class={`client-carousel theme-${this.theme}`}>\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"]}

package/dist/collection/components/af-contact-item/af-contact-item.js

@@ -11,7 +11,7 @@ export class AfContactItem {
         this.value = '';
     }
     render() {
-        return (h(Host, { key: '973e5f84f257fcae7e829d79f04ddf88d80c8ce6' }, h("div", { key: '3fb47be4d753b1a8daf95ef67e82735e35a4f70f', class: "contact-item" }, this.label && (h("h5", { key: 'dcb0779e8d39ead7845d0f52f11f538d08d2490c', class: "contact-item__label" }, this.label)), this.value && (h("p", { key: 'b9c48436b9d925358713bd64d3ba31cd8bc215ca', class: "contact-item__value" }, this.value)), h("slot", { key: '9ed2b8364abb74ba3de8a5c35c349155a92749a0' }))));
+        return (h(Host, { key: 'fab41abebbb385d54aac14e620e18e713b97b8fb' }, h("div", { key: '66935eed5340e987276e8487acea6fd1858a4333', class: "contact-item" }, this.label && (h("h5", { key: '97113a9f95f873b03c54e22f87662eda97df06fc', class: "contact-item__label" }, this.label)), this.value && (h("p", { key: 'd45cdfc1dc08d2dc6f8232f04c21a345fb54fc5b', class: "contact-item__value" }, this.value)), h("slot", { key: 'e128fb4d7e006e371e54b98e2a3d817c47664642' }))));
     }
     static get is() { return "af-contact-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -4,14 +4,14 @@
 }
 
 .feature-accordion {
-  background-color: var(--colour-background-level1, #E8EFED);
-  padding: 80px 0;
-}
-
-.feature-accordion__container {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 0 40px;
+  /* Inherits theme from parent Section via CSS custom properties */
+  padding: 0 24px;
+  
+  /* Internal custom properties that inherit from parent Section's theme */
+  --_heading-color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));
+  --_body-color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));
+  --_border-color: var(--af-background-border-default, rgba(20, 52, 59, 0.12));
+  --_level-1-bg: var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));
 }
 
 .feature-accordion__heading {
@@ -20,7 +20,7 @@
   font-size: clamp(36px, 5vw, 52px);
   line-height: 1.05;
   letter-spacing: -0.025em;
-  color: var(--colour-brand-inkwell, #14343B);
+  color: var(--_heading-color);
   margin: 0 0 56px 0;
 }
 
@@ -39,11 +39,11 @@
 
 /* Accordion Item */
 .accordion-item {
-  border-bottom: 1px solid rgba(20, 52, 59, 0.12);
+  border-bottom: 1px solid var(--_border-color);
 }
 
 .accordion-item:first-child {
-  border-top: 1px solid rgba(20, 52, 59, 0.12);
+  border-top: 1px solid var(--_border-color);
 }
 
 .accordion-item__header {
@@ -60,7 +60,7 @@
 }
 
 .accordion-item__header:hover .accordion-item__title {
-  color: var(--colour-brand-inkwell, #14343B);
+  color: var(--_heading-color);
 }
 
 .accordion-item__title {
@@ -68,7 +68,7 @@
   font-weight: 500;
   font-size: 22px;
   line-height: 1.25;
-  color: var(--colour-brand-inkwell, #14343B);
+  color: var(--_heading-color);
   margin: 0;
   flex: 1;
   transition: color 0.2s ease;
@@ -76,19 +76,19 @@
 
 /* Collapsed items have lighter text */
 .accordion-item:not(.accordion-item--expanded) .accordion-item__title {
-  color: rgba(20, 52, 59, 0.7);
+  opacity: 0.7;
 }
 
 .accordion-item__icon {
   flex-shrink: 0;
   width: 24px;
   height: 24px;
-  color: var(--colour-brand-inkwell, #14343B);
+  color: var(--_heading-color);
   transition: transform 0.2s ease;
 }
 
 .accordion-item:not(.accordion-item--expanded) .accordion-item__icon {
-  color: rgba(20, 52, 59, 0.5);
+  opacity: 0.5;
 }
 
 .accordion-item__content {
@@ -101,28 +101,27 @@
   font-weight: 400;
   font-size: 17px;
   line-height: 1.6;
-  color: rgba(20, 52, 59, 0.85);
+  color: var(--_body-color);
   margin: 0 0 20px 0;
   padding-right: 40px;
+  opacity: 0.85;
 }
 
 /* Timer track - the progress bar at the bottom of expanded items */
 .accordion-item__timer-track {
   height: 3px;
-  background-color: rgba(20, 52, 59, 0.1);
+  background-color: var(--_border-color);
   border-radius: 2px;
   margin-bottom: 8px;
   overflow: hidden;
-  /* Right-align the progress bar so it drains from right to left */
   display: flex;
   justify-content: flex-start;
 }
 
 .accordion-item__timer-progress {
   height: 100%;
-  background-color: var(--colour-brand-teal, #00B5AD);
+  background-color: var(--colour-brand-ice, #a6fffb);
   border-radius: 2px;
-  /* Smooth animation for progress */
   transition: width 0.05s linear;
 }
 
@@ -131,10 +130,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #B8C9C5;
+  background-color: var(--_level-1-bg);
   border-radius: 20px;
   overflow: hidden;
-  /* Take up remaining space and stretch full height */
   flex: 1;
   min-width: 0;
 }
@@ -167,14 +165,6 @@
 
 /* Tablet */
 @media (max-width: 1024px) {
-  .feature-accordion {
-    padding: 60px 0;
-  }
-
-  .feature-accordion__container {
-    padding: 0 24px;
-  }
-
   .feature-accordion__content {
     gap: 32px;
   }
@@ -190,10 +180,6 @@
 
 /* Mobile */
 @media (max-width: 768px) {
-  .feature-accordion {
-    padding: 48px 0;
-  }
-
   .feature-accordion__content {
     flex-direction: column;
     gap: 32px;