@affinda/wc 0.0.14 → 0.0.16

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

@@ -1 +1 @@
-{"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}
+{"file":"af-card.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/{af-cta-section.d.ts → af-checkbox.d.ts}

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

package/dist/components/af-checkbox.js

@@ -0,0 +1,9 @@
+import { A as AfCheckbox$1, d as defineCustomElement$1 } from './p-Br0VERLB.js';
+
+const AfCheckbox = AfCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfCheckbox, defineCustomElement };
+//# sourceMappingURL=af-checkbox.js.map
+
+//# sourceMappingURL=af-checkbox.js.map

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

@@ -0,0 +1 @@
+{"file":"af-checkbox.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.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 afClientCarouselCss = ":host{display:block;width:100%}.client-carousel{padding:48px 0;display:flex;flex-direction:column;align-items:center;width:100%;overflow:hidden}.carousel-container{display:flex;flex-direction:column;gap:var(--space-4, 16px);width:100%;overflow:hidden}.carousel-row{display:flex;width:100%;overflow:hidden;position:relative}.logo-track{display:flex;gap:var(--space-4, 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}:host(:hover) .logo-track{animation-play-state:paused}@keyframes scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}@keyframes scroll-right{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}::slotted(*){display:flex;flex-shrink:0;gap:var(--space-4, 16px);align-items:center}: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)}: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}: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}: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}: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}@media (max-width: 1024px){.client-carousel{padding:32px 0}}@media (max-width: 767px){.client-carousel{padding:24px 0}.carousel-container{gap:var(--space-3, 12px)}.logo-track{gap:var(--space-3, 12px)}::slotted(*){gap:var(--space-3, 12px)}}";
 
 const AfClientCarousel$1 = /*@__PURE__*/ proxyCustomElement(class AfClientCarousel extends H {
     constructor(registerHost) {
@@ -9,18 +9,15 @@ const AfClientCarousel$1 = /*@__PURE__*/ proxyCustomElement(class AfClientCarous
             this.__registerHost();
         }
         this.__attachShadow();
-        /** 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: '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" })))))));
+        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 style() { return afClientCarouselCss; }
 }, [257, "af-client-carousel", {
-        "showHeadline": [4, "show-headline"],
-        "headlineText": [1, "headline-text"]
+        "theme": [1]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

@@ -1 +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}
+{"file":"af-client-carousel.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,46EAA46E;;MCiB37EA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAU,SAAS;AA2BjC;IAzBC,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAChC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,sBAAA,EAAyB,IAAI,CAAC,KAAK,CAAE,CAAA,EAAA,EAC/C,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}\n\n.client-carousel {\n  padding: 48px 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  overflow: hidden;\n}\n\n.carousel-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4, 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: var(--space-4, 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/* Pause animation on hover */\n:host(:hover) .logo-track {\n  animation-play-state: paused;\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/* Style slotted container divs as flex rows with proper gap */\n::slotted(*) {\n  display: flex;\n  flex-shrink: 0;\n  gap: var(--space-4, 16px);\n  align-items: center;\n}\n\n/* ==========================================================================\n   Theme Variants\n   ========================================================================== */\n\n/* INKWELL THEME (Default) */\n:host(.theme-inkwell),\n.client-carousel.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-well-bg: var(--colour-background-level1-dark, #203e45);\n  --af-carousel-logo-color: white;\n  --af-carousel-logo-filter: brightness(0) invert(1);\n}\n\n/* WHITE THEME */\n:host(.theme-white),\n.client-carousel.theme-white {\n  background-color: var(--colour-brand-white, #FFFFFF);\n  --af-carousel-logo-well-bg: var(--colour-background-level1, #e8eeed);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* MIST-GREEN THEME */\n:host(.theme-mist-green),\n.client-carousel.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #C6D5D1);\n  --af-carousel-logo-well-bg: var(--colour-mistgreen-300, #dde6e3);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* SOFT-CLAY THEME */\n:host(.theme-soft-clay),\n.client-carousel.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  --af-carousel-logo-well-bg: var(--colour-softclay-200, #d5c5b0);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* WHITE-IVORY THEME */\n:host(.theme-white-ivory),\n.client-carousel.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-carousel-logo-well-bg: var(--colour-softclay-100, #f2eadc);\n  --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n  --af-carousel-logo-filter: none;\n}\n\n/* ==========================================================================\n   Responsive Adjustments\n   ========================================================================== */\n\n/* Tablet adjustments */\n@media (max-width: 1024px) {\n  .client-carousel {\n    padding: 32px 0;\n  }\n}\n\n/* Mobile adjustments */\n@media (max-width: 767px) {\n  .client-carousel {\n    padding: 24px 0;\n  }\n  \n  .carousel-container {\n    gap: var(--space-3, 12px);\n  }\n  \n  .logo-track {\n    gap: var(--space-3, 12px);\n  }\n  \n  ::slotted(*) {\n    gap: var(--space-3, 12px);\n  }\n}\n","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"],"version":3}

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

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

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
 
 const afContactItemCss = ".sc-af-contact-item-h{display:block}.contact-item.sc-af-contact-item{display:flex;flex-direction:column;gap:4px}.contact-item__label.sc-af-contact-item{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:600;color:var(--colour-tints-mistGreen-200, #C6D5D1);margin:0}.contact-item__value.sc-af-contact-item{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:400;color:rgba(198, 213, 209, 0.7);margin:0}";
 
@@ -14,7 +14,7 @@ const AfContactItem$1 = /*@__PURE__*/ proxyCustomElement(class AfContactItem ext
         this.value = '';
     }
     render() {
-        return (h(Host, { key: 'd7028d8cf36ac49af112610cb75183bf6abf13a3' }, h("div", { key: '810bf1b96babcb480cd2aa2ba367646b9c4cc88a', class: "contact-item" }, this.label && (h("h5", { key: '1dabbf6e3c53d537645b3db0593f5653f9ca5f2b', class: "contact-item__label" }, this.label)), this.value && (h("p", { key: '73ab6e021d479b54f6341a9fa2fac5bb09e57d8d', class: "contact-item__value" }, this.value)), h("slot", { key: '787187f21f16576b62638aed8ddcc4dd38f0ac21' }))));
+        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 style() { return afContactItemCss; }
 }, [262, "af-contact-item", {

package/dist/components/af-container.js

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

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

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
 
-const afFeatureAccordionCss = ".sc-af-feature-accordion-h{display:block;width:100%}.feature-accordion.sc-af-feature-accordion{background-color:var(--colour-background-level1, #E8EFED);padding:80px 0}.feature-accordion__container.sc-af-feature-accordion{max-width:1280px;margin:0 auto;padding:0 40px}.feature-accordion__heading.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:clamp(36px, 5vw, 52px);line-height:1.05;letter-spacing:-0.025em;color:var(--colour-brand-inkwell, #14343B);margin:0 0 56px 0}.feature-accordion__content.sc-af-feature-accordion{display:flex;gap:48px}.feature-accordion__list.sc-af-feature-accordion{display:flex;flex-direction:column;flex:1;min-width:0}.accordion-item.sc-af-feature-accordion{border-bottom:1px solid rgba(20, 52, 59, 0.12)}.accordion-item.sc-af-feature-accordion:first-child{border-top:1px solid rgba(20, 52, 59, 0.12)}.accordion-item__header.sc-af-feature-accordion{display:flex;align-items:center;justify-content:space-between;width:100%;padding:24px 0;background:none;border:none;cursor:pointer;text-align:left;gap:16px}.accordion-item__header.sc-af-feature-accordion:hover .accordion-item__title.sc-af-feature-accordion{color:var(--colour-brand-inkwell, #14343B)}.accordion-item__title.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;font-size:22px;line-height:1.25;color:var(--colour-brand-inkwell, #14343B);margin:0;flex:1;transition:color 0.2s ease}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__title.sc-af-feature-accordion{color:rgba(20, 52, 59, 0.7)}.accordion-item__icon.sc-af-feature-accordion{flex-shrink:0;width:24px;height:24px;color:var(--colour-brand-inkwell, #14343B);transition:transform 0.2s ease}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__icon.sc-af-feature-accordion{color:rgba(20, 52, 59, 0.5)}.accordion-item__content.sc-af-feature-accordion{overflow:hidden;transition:max-height 0.3s ease, opacity 0.3s ease}.accordion-item__description.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:17px;line-height:1.6;color:rgba(20, 52, 59, 0.85);margin:0 0 20px 0;padding-right:40px}.accordion-item__timer-track.sc-af-feature-accordion{height:3px;background-color:rgba(20, 52, 59, 0.1);border-radius:2px;margin-bottom:8px;overflow:hidden;display:flex;justify-content:flex-start}.accordion-item__timer-progress.sc-af-feature-accordion{height:100%;background-color:var(--colour-brand-teal, #00B5AD);border-radius:2px;transition:width 0.05s linear}.feature-accordion__image-container.sc-af-feature-accordion{display:flex;align-items:center;justify-content:center;background-color:#B8C9C5;border-radius:20px;overflow:hidden;flex:1;min-width:0}.feature-accordion__image-wrapper.sc-af-feature-accordion{display:flex;align-items:center;justify-content:center;width:100%;padding:32px}.feature-accordion__image.sc-af-feature-accordion{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.12)}.feature-accordion__image-placeholder.sc-af-feature-accordion{width:100%;height:100%;display:flex;align-items:center;justify-content:center}@media (max-width: 1024px){.feature-accordion.sc-af-feature-accordion{padding:60px 0}.feature-accordion__container.sc-af-feature-accordion{padding:0 24px}.feature-accordion__content.sc-af-feature-accordion{gap:32px}.feature-accordion__heading.sc-af-feature-accordion{margin-bottom:40px}.accordion-item__title.sc-af-feature-accordion{font-size:20px}}@media (max-width: 768px){.feature-accordion.sc-af-feature-accordion{padding:48px 0}.feature-accordion__content.sc-af-feature-accordion{flex-direction:column;gap:32px}.feature-accordion__image-container.sc-af-feature-accordion{order:-1;min-height:280px;flex:none}.feature-accordion__list.sc-af-feature-accordion{flex:none}.accordion-item__title.sc-af-feature-accordion{font-size:18px}.accordion-item__description.sc-af-feature-accordion{font-size:15px;padding-right:0}}";
+const afFeatureAccordionCss = ".sc-af-feature-accordion-h{display:block;width:100%}.feature-accordion.sc-af-feature-accordion{padding:0 24px;--_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.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:clamp(36px, 5vw, 52px);line-height:1.05;letter-spacing:-0.025em;color:var(--_heading-color);margin:0 0 56px 0}.feature-accordion__content.sc-af-feature-accordion{display:flex;gap:48px}.feature-accordion__list.sc-af-feature-accordion{display:flex;flex-direction:column;flex:1;min-width:0}.accordion-item.sc-af-feature-accordion{border-bottom:1px solid var(--_border-color)}.accordion-item.sc-af-feature-accordion:first-child{border-top:1px solid var(--_border-color)}.accordion-item__header.sc-af-feature-accordion{display:flex;align-items:center;justify-content:space-between;width:100%;padding:24px 0;background:none;border:none;cursor:pointer;text-align:left;gap:16px}.accordion-item__header.sc-af-feature-accordion:hover .accordion-item__title.sc-af-feature-accordion{color:var(--_heading-color)}.accordion-item__title.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:500;font-size:22px;line-height:1.25;color:var(--_heading-color);margin:0;flex:1;transition:color 0.2s ease}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__title.sc-af-feature-accordion{opacity:0.7}.accordion-item__icon.sc-af-feature-accordion{flex-shrink:0;width:24px;height:24px;color:var(--_heading-color);transition:transform 0.2s ease}.accordion-item.sc-af-feature-accordion:not(.accordion-item--expanded) .accordion-item__icon.sc-af-feature-accordion{opacity:0.5}.accordion-item__content.sc-af-feature-accordion{overflow:hidden;transition:max-height 0.3s ease, opacity 0.3s ease}.accordion-item__description.sc-af-feature-accordion{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;font-size:17px;line-height:1.6;color:var(--_body-color);margin:0 0 20px 0;padding-right:40px;opacity:0.85}.accordion-item__timer-track.sc-af-feature-accordion{height:3px;background-color:var(--_border-color);border-radius:2px;margin-bottom:8px;overflow:hidden;display:flex;justify-content:flex-start}.accordion-item__timer-progress.sc-af-feature-accordion{height:100%;background-color:var(--colour-brand-ice, #a6fffb);border-radius:2px;transition:width 0.05s linear}.feature-accordion__image-container.sc-af-feature-accordion{display:flex;align-items:center;justify-content:center;background-color:var(--_level-1-bg);border-radius:20px;overflow:hidden;flex:1;min-width:0}.feature-accordion__image-wrapper.sc-af-feature-accordion{display:flex;align-items:center;justify-content:center;width:100%;padding:32px}.feature-accordion__image.sc-af-feature-accordion{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.12)}.feature-accordion__image-placeholder.sc-af-feature-accordion{width:100%;height:100%;display:flex;align-items:center;justify-content:center}@media (max-width: 1024px){.feature-accordion__content.sc-af-feature-accordion{gap:32px}.feature-accordion__heading.sc-af-feature-accordion{margin-bottom:40px}.accordion-item__title.sc-af-feature-accordion{font-size:20px}}@media (max-width: 768px){.feature-accordion__content.sc-af-feature-accordion{flex-direction:column;gap:32px}.feature-accordion__image-container.sc-af-feature-accordion{order:-1;min-height:280px;flex:none}.feature-accordion__list.sc-af-feature-accordion{flex:none}.accordion-item__title.sc-af-feature-accordion{font-size:18px}.accordion-item__description.sc-af-feature-accordion{font-size:15px;padding-right:0}}";
 
 const AfFeatureAccordion$1 = /*@__PURE__*/ proxyCustomElement(class AfFeatureAccordion extends H {
     constructor(registerHost) {
@@ -90,13 +90,13 @@ const AfFeatureAccordion$1 = /*@__PURE__*/ proxyCustomElement(class AfFeatureAcc
     render() {
         const items = this.getItems();
         const currentItem = items[this.expandedIndex];
-        return (h(Host, { key: 'a6fc5618dfb0cafedbabfa8695eb6834e22f7915' }, h("div", { key: '30f3c9877b645a2e55fb59686826cd1f9a9554d2', class: "feature-accordion" }, h("div", { key: 'c7a1e31676fb44e7cf826be75c909e5755b4fb47', class: "feature-accordion__container" }, h("h2", { key: 'a86fc105621891bbf0ad735093d52aeaf5d77a45', class: "feature-accordion__heading" }, this.heading), h("div", { key: '19cf92b1a8ffb56fa6fedb26a01ab3ddde54ca9b', class: "feature-accordion__content" }, h("div", { key: '7eb7a385f98aecc1ea2e95067f0ed06d37b8adf2', class: "feature-accordion__list" }, items.map((item, index) => (h("div", { class: {
+        return (h(Host, { key: '8285d5116d64b9f02d758fa8e0ecb8c4129636d0' }, h("div", { key: '53894f00e6ba9a9900fa63fe199e4448d21e8886', class: "feature-accordion" }, h("div", { key: 'e50c879453d39367bd88e02cc5756a59292b7b71', class: "feature-accordion__container" }, h("h2", { key: 'd2c797f6d1feddafd01b2b933e73e3d71063ae1d', class: "feature-accordion__heading" }, this.heading), h("div", { key: '48ba662a3cd7ab981fd947c4063f81e6ef94773f', class: "feature-accordion__content" }, h("div", { key: '05b190936f6c4a9e849de1b724a577dbf33aba12', 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: '25d9abb394e6fc3027b8646fc3e86f157aa50849', class: "feature-accordion__image-container" }, h("div", { key: '9a697e0b33a744d092f0d4c467c65649d88896bc', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (h("img", { key: '1c506ddbaa60c00071cc9421cbbc3e42ba81694a', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (h("div", { key: 'dd9af6189d504abc163c25fe804445fac8b91e97', class: "feature-accordion__image-placeholder" }, h("slot", { key: '46bdaf5f99dd570cb43f198d40b52d85b5da7ab0', name: "image" }))))))))));
+            } }, 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: '34a3497894ab6aa63acafa62cc8a7029848731e8', class: "feature-accordion__image-container" }, h("div", { key: '3a60c7ffb55e49194d2d3dfb9a324382f1bd2e6a', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (h("img", { key: '1120770253d6442130baea4e74deae1694a36bf7', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (h("div", { key: '50a4b4201d0141f018d7e9ce2e03e2cfc090e2fc', class: "feature-accordion__image-placeholder" }, h("slot", { key: '2d029a56bc680d3f40be5c18841a5477de9c3862', name: "image" }))))))))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"af-feature-accordion.js","mappings":"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","names":["AfFeatureAccordion","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-feature-accordion/af-feature-accordion.css?tag=af-feature-accordion&encapsulation=scoped","src/components/af-feature-accordion/af-feature-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.feature-accordion {\n  background-color: var(--colour-background-level1, #E8EFED);\n  padding: 80px 0;\n}\n\n.feature-accordion__container {\n  max-width: 1280px;\n  margin: 0 auto;\n  padding: 0 40px;\n}\n\n.feature-accordion__heading {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 400;\n  font-size: clamp(36px, 5vw, 52px);\n  line-height: 1.05;\n  letter-spacing: -0.025em;\n  color: var(--colour-brand-inkwell, #14343B);\n  margin: 0 0 56px 0;\n}\n\n.feature-accordion__content {\n  display: flex;\n  gap: 48px;\n}\n\n/* Accordion List */\n.feature-accordion__list {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Accordion Item */\n.accordion-item {\n  border-bottom: 1px solid rgba(20, 52, 59, 0.12);\n}\n\n.accordion-item:first-child {\n  border-top: 1px solid rgba(20, 52, 59, 0.12);\n}\n\n.accordion-item__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 24px 0;\n  background: none;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  gap: 16px;\n}\n\n.accordion-item__header:hover .accordion-item__title {\n  color: var(--colour-brand-inkwell, #14343B);\n}\n\n.accordion-item__title {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 500;\n  font-size: 22px;\n  line-height: 1.25;\n  color: var(--colour-brand-inkwell, #14343B);\n  margin: 0;\n  flex: 1;\n  transition: color 0.2s ease;\n}\n\n/* Collapsed items have lighter text */\n.accordion-item:not(.accordion-item--expanded) .accordion-item__title {\n  color: rgba(20, 52, 59, 0.7);\n}\n\n.accordion-item__icon {\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n  color: var(--colour-brand-inkwell, #14343B);\n  transition: transform 0.2s ease;\n}\n\n.accordion-item:not(.accordion-item--expanded) .accordion-item__icon {\n  color: rgba(20, 52, 59, 0.5);\n}\n\n.accordion-item__content {\n  overflow: hidden;\n  transition: max-height 0.3s ease, opacity 0.3s ease;\n}\n\n.accordion-item__description {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 400;\n  font-size: 17px;\n  line-height: 1.6;\n  color: rgba(20, 52, 59, 0.85);\n  margin: 0 0 20px 0;\n  padding-right: 40px;\n}\n\n/* Timer track - the progress bar at the bottom of expanded items */\n.accordion-item__timer-track {\n  height: 3px;\n  background-color: rgba(20, 52, 59, 0.1);\n  border-radius: 2px;\n  margin-bottom: 8px;\n  overflow: hidden;\n  /* Right-align the progress bar so it drains from right to left */\n  display: flex;\n  justify-content: flex-start;\n}\n\n.accordion-item__timer-progress {\n  height: 100%;\n  background-color: var(--colour-brand-teal, #00B5AD);\n  border-radius: 2px;\n  /* Smooth animation for progress */\n  transition: width 0.05s linear;\n}\n\n/* Image Container - stretches full height to align with accordion */\n.feature-accordion__image-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #B8C9C5;\n  border-radius: 20px;\n  overflow: hidden;\n  /* Take up remaining space and stretch full height */\n  flex: 1;\n  min-width: 0;\n}\n\n.feature-accordion__image-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  padding: 32px;\n}\n\n.feature-accordion__image {\n  max-width: 100%;\n  max-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: contain;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n\n.feature-accordion__image-placeholder {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Tablet */\n@media (max-width: 1024px) {\n  .feature-accordion {\n    padding: 60px 0;\n  }\n\n  .feature-accordion__container {\n    padding: 0 24px;\n  }\n\n  .feature-accordion__content {\n    gap: 32px;\n  }\n\n  .feature-accordion__heading {\n    margin-bottom: 40px;\n  }\n\n  .accordion-item__title {\n    font-size: 20px;\n  }\n}\n\n/* Mobile */\n@media (max-width: 768px) {\n  .feature-accordion {\n    padding: 48px 0;\n  }\n\n  .feature-accordion__content {\n    flex-direction: column;\n    gap: 32px;\n  }\n\n  .feature-accordion__image-container {\n    order: -1;\n    min-height: 280px;\n    flex: none;\n  }\n\n  .feature-accordion__list {\n    flex: none;\n  }\n\n  .accordion-item__title {\n    font-size: 18px;\n  }\n\n  .accordion-item__description {\n    font-size: 15px;\n    padding-right: 0;\n  }\n}\n","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"],"version":3}
+{"file":"af-feature-accordion.js","mappings":"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","names":["AfFeatureAccordion","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-feature-accordion/af-feature-accordion.css?tag=af-feature-accordion&encapsulation=scoped","src/components/af-feature-accordion/af-feature-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.feature-accordion {\n  /* Inherits theme from parent Section via CSS custom properties */\n  padding: 0 24px;\n  \n  /* Internal custom properties that inherit from parent Section's theme */\n  --_heading-color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n  --_body-color: var(--af-typography-body-default, var(--colour-inkwell-400, #2b484f));\n  --_border-color: var(--af-background-border-default, rgba(20, 52, 59, 0.12));\n  --_level-1-bg: var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));\n}\n\n.feature-accordion__heading {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 400;\n  font-size: clamp(36px, 5vw, 52px);\n  line-height: 1.05;\n  letter-spacing: -0.025em;\n  color: var(--_heading-color);\n  margin: 0 0 56px 0;\n}\n\n.feature-accordion__content {\n  display: flex;\n  gap: 48px;\n}\n\n/* Accordion List */\n.feature-accordion__list {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Accordion Item */\n.accordion-item {\n  border-bottom: 1px solid var(--_border-color);\n}\n\n.accordion-item:first-child {\n  border-top: 1px solid var(--_border-color);\n}\n\n.accordion-item__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 24px 0;\n  background: none;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  gap: 16px;\n}\n\n.accordion-item__header:hover .accordion-item__title {\n  color: var(--_heading-color);\n}\n\n.accordion-item__title {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 500;\n  font-size: 22px;\n  line-height: 1.25;\n  color: var(--_heading-color);\n  margin: 0;\n  flex: 1;\n  transition: color 0.2s ease;\n}\n\n/* Collapsed items have lighter text */\n.accordion-item:not(.accordion-item--expanded) .accordion-item__title {\n  opacity: 0.7;\n}\n\n.accordion-item__icon {\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n  color: var(--_heading-color);\n  transition: transform 0.2s ease;\n}\n\n.accordion-item:not(.accordion-item--expanded) .accordion-item__icon {\n  opacity: 0.5;\n}\n\n.accordion-item__content {\n  overflow: hidden;\n  transition: max-height 0.3s ease, opacity 0.3s ease;\n}\n\n.accordion-item__description {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-weight: 400;\n  font-size: 17px;\n  line-height: 1.6;\n  color: var(--_body-color);\n  margin: 0 0 20px 0;\n  padding-right: 40px;\n  opacity: 0.85;\n}\n\n/* Timer track - the progress bar at the bottom of expanded items */\n.accordion-item__timer-track {\n  height: 3px;\n  background-color: var(--_border-color);\n  border-radius: 2px;\n  margin-bottom: 8px;\n  overflow: hidden;\n  display: flex;\n  justify-content: flex-start;\n}\n\n.accordion-item__timer-progress {\n  height: 100%;\n  background-color: var(--colour-brand-ice, #a6fffb);\n  border-radius: 2px;\n  transition: width 0.05s linear;\n}\n\n/* Image Container - stretches full height to align with accordion */\n.feature-accordion__image-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_level-1-bg);\n  border-radius: 20px;\n  overflow: hidden;\n  flex: 1;\n  min-width: 0;\n}\n\n.feature-accordion__image-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  padding: 32px;\n}\n\n.feature-accordion__image {\n  max-width: 100%;\n  max-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: contain;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n}\n\n.feature-accordion__image-placeholder {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Tablet */\n@media (max-width: 1024px) {\n  .feature-accordion__content {\n    gap: 32px;\n  }\n\n  .feature-accordion__heading {\n    margin-bottom: 40px;\n  }\n\n  .accordion-item__title {\n    font-size: 20px;\n  }\n}\n\n/* Mobile */\n@media (max-width: 768px) {\n  .feature-accordion__content {\n    flex-direction: column;\n    gap: 32px;\n  }\n\n  .feature-accordion__image-container {\n    order: -1;\n    min-height: 280px;\n    flex: none;\n  }\n\n  .feature-accordion__list {\n    flex: none;\n  }\n\n  .accordion-item__title {\n    font-size: 18px;\n  }\n\n  .accordion-item__description {\n    font-size: 15px;\n    padding-right: 0;\n  }\n}\n","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 * **Must be wrapped in a Section component** to inherit theme styling.\n * The component automatically adapts colors based on the parent Section's theme.\n * \n * @example\n * ```tsx\n * <Section theme=\"inkwell\">\n *   <FeatureAccordion heading=\"Features\" items={...} />\n * </Section>\n * ```\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"],"version":3}

package/dist/components/af-feature-card.d.ts

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

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

@@ -0,0 +1,9 @@
+import { A as AfFeatureCard$1, d as defineCustomElement$1 } from './p-C0f6y_zg.js';
+
+const AfFeatureCard = AfFeatureCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfFeatureCard, defineCustomElement };
+//# sourceMappingURL=af-feature-card.js.map
+
+//# sourceMappingURL=af-feature-card.js.map

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

@@ -0,0 +1 @@
+{"file":"af-feature-card.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/af-feature-grid.d.ts

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

package/dist/components/af-feature-grid.js

@@ -0,0 +1,124 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+import { d as defineCustomElement$2 } from './p-wwnR-hlX.js';
+
+const afFeatureGridCss = ".sc-af-feature-grid-h{display:block;width:100%}.feature-grid.sc-af-feature-grid{display:flex;flex-direction:column;align-items:center;width:100%}.feature-grid__cards.sc-af-feature-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:24px;width:100%;max-width:1440px;align-items:stretch}.feature-grid__cards.sc-af-feature-grid>af-feature-card.sc-af-feature-grid{height:100%}.feature-grid--cols-3.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(3, 1fr)}.feature-grid--cols-2.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(2, 1fr)}.feature-grid--cols-1.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:1fr}.feature-grid__progress.sc-af-feature-grid{display:none;width:100%;margin-top:16px}@media (max-width: 768px){.feature-grid__cards.sc-af-feature-grid{gap:16px}.feature-grid--mobile-list.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:1fr;gap:20px}.feature-grid--mobile-grid.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(2, 1fr)}.feature-grid--mobile-scroll.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:16px;padding-bottom:8px;scrollbar-width:none;-ms-overflow-style:none}.feature-grid--mobile-scroll.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid::-webkit-scrollbar{display:none}.feature-grid--mobile-scroll.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid>af-feature-card.sc-af-feature-grid{flex:0 0 280px;scroll-snap-align:start}.feature-grid--mobile-scroll.sc-af-feature-grid .feature-grid__progress.sc-af-feature-grid{display:block}}@media (min-width: 769px) and (max-width: 1024px){.feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(2, 1fr)}.feature-grid--cols-3.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid,.feature-grid--cols-4.sc-af-feature-grid .feature-grid__cards.sc-af-feature-grid{grid-template-columns:repeat(2, 1fr)}}";
+
+const AfFeatureGrid$1 = /*@__PURE__*/ proxyCustomElement(class AfFeatureGrid extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * Number of columns on desktop (1-4).
+         */
+        this.columns = 4;
+        /**
+         * Mobile layout behavior.
+         * - 'list': Vertical stack (1 column)
+         * - 'scroll': Horizontal scroll with progress indicator
+         * - 'grid': Maintain 2-column grid on mobile
+         */
+        this.mobileLayout = 'list';
+        this.scrollProgress = 0;
+        this.handleScroll = () => {
+            if (!this.scrollContainer)
+                return;
+            const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
+            const maxScroll = scrollWidth - clientWidth;
+            if (maxScroll > 0) {
+                this.scrollProgress = scrollLeft / maxScroll;
+            }
+            else {
+                this.scrollProgress = 0;
+            }
+        };
+    }
+    componentDidLoad() {
+        this.setupScrollListener();
+        // Watch for cards being added (for React async rendering)
+        this.observer = new MutationObserver(() => {
+            this.setupScrollListener();
+        });
+        this.observer.observe(this.host, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    onMobileLayoutChange() {
+        this.setupScrollListener();
+    }
+    setupScrollListener() {
+        if (this.scrollContainer) {
+            this.scrollContainer.removeEventListener('scroll', this.handleScroll);
+        }
+        requestAnimationFrame(() => {
+            this.scrollContainer = this.host.querySelector('.feature-grid__cards');
+            if (this.scrollContainer && this.mobileLayout === 'scroll') {
+                this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });
+                this.handleScroll();
+                if (this.resizeObserver) {
+                    this.resizeObserver.disconnect();
+                }
+                this.resizeObserver = new ResizeObserver(() => {
+                    this.handleScroll();
+                });
+                this.resizeObserver.observe(this.scrollContainer);
+            }
+        });
+    }
+    render() {
+        const gridClasses = {
+            'feature-grid': true,
+            [`feature-grid--cols-${this.columns}`]: true,
+            [`feature-grid--mobile-${this.mobileLayout}`]: true,
+        };
+        const showProgressLine = this.mobileLayout === 'scroll';
+        return (h(Host, { key: '9f86e8111e73d046e6e391d54781972ca0c1a78a' }, h("div", { key: '409d9c22be533612e2f079f38bc613e3a1f35fe2', class: gridClasses }, h("div", { key: '18261ef9c3dab6b7dfc5c947fd0b21712f1e6416', class: "feature-grid__cards" }, h("slot", { key: '9f90257092482cce17c374813116bf5ea6338401' })), showProgressLine && (h("div", { key: '208800f5dfe5d944f9bc4198fbe656696471ce21', class: "feature-grid__progress" }, h("af-progress-line", { key: 'c95b717d018803c4f56a9066bf7aa869c01cb1aa', progress: this.scrollProgress }))))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "mobileLayout": ["onMobileLayoutChange"]
+    }; }
+    static get style() { return afFeatureGridCss; }
+}, [262, "af-feature-grid", {
+        "columns": [2],
+        "mobileLayout": [1, "mobile-layout"],
+        "scrollProgress": [32]
+    }, undefined, {
+        "mobileLayout": ["onMobileLayoutChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-feature-grid", "af-progress-line"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-feature-grid":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfFeatureGrid$1);
+            }
+            break;
+        case "af-progress-line":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const AfFeatureGrid = AfFeatureGrid$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfFeatureGrid, defineCustomElement };
+//# sourceMappingURL=af-feature-grid.js.map
+
+//# sourceMappingURL=af-feature-grid.js.map

package/dist/components/af-feature-grid.js.map

@@ -0,0 +1 @@
+{"file":"af-feature-grid.js","mappings":"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","names":["AfFeatureGrid","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-feature-grid/af-feature-grid.css?tag=af-feature-grid&encapsulation=scoped","src/components/af-feature-grid/af-feature-grid.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Base Feature Grid Styles\n   ========================================================================== */\n\n.feature-grid {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Cards Container - CSS Grid Layout\n   ========================================================================== */\n\n.feature-grid__cards {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 24px;\n  width: 100%;\n  max-width: 1440px;\n  align-items: stretch;\n}\n\n/* Ensure feature cards fill their grid cells */\n.feature-grid__cards>af-feature-card {\n  height: 100%;\n}\n\n/* Column variants */\n.feature-grid--cols-3 .feature-grid__cards {\n  grid-template-columns: repeat(3, 1fr);\n}\n\n.feature-grid--cols-2 .feature-grid__cards {\n  grid-template-columns: repeat(2, 1fr);\n}\n\n.feature-grid--cols-1 .feature-grid__cards {\n  grid-template-columns: 1fr;\n}\n\n/* ==========================================================================\n   Progress Line (scroll mode indicator)\n   ========================================================================== */\n\n.feature-grid__progress {\n  display: none;\n  width: 100%;\n  margin-top: 16px;\n}\n\n/* ==========================================================================\n   Mobile Responsive Styles (max-width: 768px)\n   ========================================================================== */\n\n@media (max-width: 768px) {\n  .feature-grid__cards {\n    gap: 16px;\n  }\n\n  /* Mobile List Mode - single column stack */\n  .feature-grid--mobile-list .feature-grid__cards {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n\n  /* Mobile Grid Mode - keep 2 columns */\n  .feature-grid--mobile-grid .feature-grid__cards {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  /* Mobile Scroll Mode - horizontal scroll */\n  .feature-grid--mobile-scroll .feature-grid__cards {\n    display: flex;\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-snap-type: x mandatory;\n    -webkit-overflow-scrolling: touch;\n    gap: 16px;\n    padding-bottom: 8px;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n  }\n\n  .feature-grid--mobile-scroll .feature-grid__cards::-webkit-scrollbar {\n    display: none;\n  }\n\n  .feature-grid--mobile-scroll .feature-grid__cards>af-feature-card {\n    flex: 0 0 280px;\n    scroll-snap-align: start;\n  }\n\n  .feature-grid--mobile-scroll .feature-grid__progress {\n    display: block;\n  }\n}\n\n/* ==========================================================================\n   Tablet breakpoint (769px - 1024px)\n   ========================================================================== */\n\n@media (min-width: 769px) and (max-width: 1024px) {\n  .feature-grid__cards {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .feature-grid--cols-3 .feature-grid__cards,\n  .feature-grid--cols-4 .feature-grid__cards {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}","import { Component, Prop, State, h, Host, Element, Watch } from '@stencil/core';\n\n/**\n * Feature Grid component - CSS Grid container for feature cards.\n *\n * Desktop: Configurable columns (1-4)\n * Mobile: List (stacked), horizontal scroll, or 2-column grid\n *\n * @slot - Feature card components (af-feature-card)\n */\n@Component({\n  tag: 'af-feature-grid',\n  styleUrl: 'af-feature-grid.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfFeatureGrid {\n  @Element() host!: HTMLElement;\n\n  /**\n   * Number of columns on desktop (1-4).\n   */\n  @Prop() columns: 1 | 2 | 3 | 4 = 4;\n\n  /**\n   * Mobile layout behavior.\n   * - 'list': Vertical stack (1 column)\n   * - 'scroll': Horizontal scroll with progress indicator\n   * - 'grid': Maintain 2-column grid on mobile\n   */\n  @Prop() mobileLayout: 'list' | 'scroll' | 'grid' = 'list';\n\n  @State() scrollProgress: number = 0;\n\n  private scrollContainer: HTMLElement | undefined;\n  private observer: MutationObserver | undefined;\n  private resizeObserver: ResizeObserver | undefined;\n\n  componentDidLoad() {\n    this.setupScrollListener();\n\n    // Watch for cards being added (for React async rendering)\n    this.observer = new MutationObserver(() => {\n      this.setupScrollListener();\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    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  @Watch('mobileLayout')\n  onMobileLayoutChange() {\n    this.setupScrollListener();\n  }\n\n  private setupScrollListener() {\n    if (this.scrollContainer) {\n      this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n    }\n\n    requestAnimationFrame(() => {\n      this.scrollContainer = this.host.querySelector('.feature-grid__cards') as HTMLElement;\n\n      if (this.scrollContainer && this.mobileLayout === 'scroll') {\n        this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n        this.handleScroll();\n\n        if (this.resizeObserver) {\n          this.resizeObserver.disconnect();\n        }\n        this.resizeObserver = new ResizeObserver(() => {\n          this.handleScroll();\n        });\n        this.resizeObserver.observe(this.scrollContainer);\n      }\n    });\n  }\n\n  private handleScroll = () => {\n    if (!this.scrollContainer) return;\n\n    const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;\n    const maxScroll = scrollWidth - clientWidth;\n\n    if (maxScroll > 0) {\n      this.scrollProgress = scrollLeft / maxScroll;\n    } else {\n      this.scrollProgress = 0;\n    }\n  };\n\n  render() {\n    const gridClasses = {\n      'feature-grid': true,\n      [`feature-grid--cols-${this.columns}`]: true,\n      [`feature-grid--mobile-${this.mobileLayout}`]: true,\n    };\n\n    const showProgressLine = this.mobileLayout === 'scroll';\n\n    return (\n      <Host>\n        <div class={gridClasses}>\n          <div class=\"feature-grid__cards\">\n            <slot></slot>\n          </div>\n\n          {showProgressLine && (\n            <div class=\"feature-grid__progress\">\n              <af-progress-line progress={this.scrollProgress} />\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/af-fieldset.d.ts

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

package/dist/components/af-fieldset.js

@@ -0,0 +1,9 @@
+import { A as AfFieldset$1, d as defineCustomElement$1 } from './p-BRsO61_R.js';
+
+const AfFieldset = AfFieldset$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfFieldset, defineCustomElement };
+//# sourceMappingURL=af-fieldset.js.map
+
+//# sourceMappingURL=af-fieldset.js.map

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

@@ -0,0 +1 @@
+{"file":"af-fieldset.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/af-footer-column.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
 
 const afFooterColumnCss = ".sc-af-footer-column-h{display:block}.footer-column.sc-af-footer-column{display:flex;flex-direction:column;gap:16px}.footer-column__heading.sc-af-footer-column{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:600;color:var(--colour-tints-mistGreen-200, #C6D5D1);margin:0;text-transform:none}.footer-column__list.sc-af-footer-column{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.footer-column__list.sc-af-footer-column-s>li,.footer-column__list .sc-af-footer-column-s>li{margin:0}";
 
@@ -12,7 +12,7 @@ const AfFooterColumn$1 = /*@__PURE__*/ proxyCustomElement(class AfFooterColumn e
         this.heading = '';
     }
     render() {
-        return (h(Host, { key: '8ba73f2f7a90d6a6b7ee33a04d4533b750624256' }, h("div", { key: '5b3f50b63fd0461d64dca4c7a6cbb6ee94ab98f6', class: "footer-column" }, this.heading && (h("h5", { key: '3583cd3ef323471dd2a106281e1522bba5e8dec6', class: "footer-column__heading" }, this.heading)), h("ul", { key: '35334470d9c1fd1832d52169a757a2d5a11cab10', class: "footer-column__list" }, h("slot", { key: 'e37bd4e38617d11fe8bbf931f71d0ff71123770c' })))));
+        return (h(Host, { key: '90953efd8907072a4a9c336f5a47eafe0317af61' }, h("div", { key: 'cef4b4554d8384e86e24c6329f35a8d9eadf6f44', class: "footer-column" }, this.heading && (h("h5", { key: '22119f6749453837427dc0438254b271f13d81f6', class: "footer-column__heading" }, this.heading)), h("ul", { key: '6a51a9e7e210654d410842b6b2e9c76054c0ecb8', class: "footer-column__list" }, h("slot", { key: '5bc741d972164228b460f30981cc306cdd7435fa' })))));
     }
     static get style() { return afFooterColumnCss; }
 }, [262, "af-footer-column", {

package/dist/components/af-footer-link.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
 
 const afFooterLinkCss = ".sc-af-footer-link-h{display:contents}li.sc-af-footer-link{margin:0;list-style:none}.footer-link.sc-af-footer-link{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:400;color:rgba(198, 213, 209, 0.7);text-decoration:none;transition:color 0.2s ease;display:inline-flex;align-items:center;gap:6px}.footer-link.sc-af-footer-link:hover{color:var(--colour-tints-mistGreen-200, #C6D5D1)}.footer-link__external-icon.sc-af-footer-link{opacity:0.7;flex-shrink:0}";
 
@@ -14,7 +14,7 @@ const AfFooterLink$1 = /*@__PURE__*/ proxyCustomElement(class AfFooterLink exten
         this.external = false;
     }
     render() {
-        return (h(Host, { key: 'e6f7a589242a219d1b6378fd253972c760443500' }, h("li", { key: '335bfe5438a894bd61de90b79d3ab22d0fc89900' }, h("a", { key: 'f409bdcd2f5cc5ab98a3e63917c46406af0d5305', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, h("slot", { key: '8b511b8adf25e0a930186cc6276ffa4bebda0fc1' }), this.external && (h("svg", { key: '53a643543ad59dce128eec87b02d0397305522e2', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: '0e20bfbaaaf254a98aca18375442a11c4d2719d3', d: "M10 6.5v3a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7.5 1.5h3v3M5.5 6.5l5-5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (h(Host, { key: '121d2b0936ddfa70eb6a2db79fc0ae41b28245a8' }, h("li", { key: '8528d61539f57e05277b3af353d22e43f61e6c52' }, h("a", { key: '05da59ba1868f89e6cc849428b784d530158c0c8', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, h("slot", { key: '33aa087cc0634c62e79df7fa210c897720845623' }), this.external && (h("svg", { key: 'e024e5e1768b11d113943af0c48a0ae894f4d76d', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: 'c0ccfe70f94d6df8057ccd1c8ea151e27b9c2dc5', d: "M10 6.5v3a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7.5 1.5h3v3M5.5 6.5l5-5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
     }
     static get style() { return afFooterLinkCss; }
 }, [262, "af-footer-link", {