@affinda/wc 0.0.15 → 0.0.16

package/dist/components/af-section.js

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
-import { d as defineCustomElement$2 } from './p-BkEmrXbw.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+import { d as defineCustomElement$2 } from './p-D3UZ60qM.js';
 
-const afSectionCss = ".sc-af-section-h{display:block;width:100%}.section.sc-af-section{width:100%;position:relative}.padding-tight.sc-af-section{padding:48px 0}.padding-default.sc-af-section{padding:96px 0}.padding-loose.sc-af-section{padding:120px 0 96px}.bg-white.sc-af-section{background-color:var(--colour-background-white, #FFFFFF)}.bg-level1.sc-af-section{background-color:var(--colour-background-level-1, #E8EEED)}.bg-dark.sc-af-section,.bg-inkwell.sc-af-section{background-color:var(--colour-brand-inkwell, #14343B);--colour-typography-heading-primary:var(--colour-brand-mist-green, #C6D5D1);--colour-typography-body-default:var(--colour-brand-mist-green, #C6D5D1)}.bg-dark.sc-af-section af-heading.sc-af-section::part(base),.bg-dark.sc-af-section af-heading.sc-af-section [part~=\"base\"],.bg-inkwell.sc-af-section af-heading.sc-af-section::part(base),.bg-inkwell.sc-af-section af-heading.sc-af-section [part~=\"base\"]{color:var(--colour-brand-mist-green, #C6D5D1)}.bg-dark.sc-af-section af-text.sc-af-section::part(base),.bg-dark.sc-af-section af-text.sc-af-section [part~=\"base\"],.bg-inkwell.sc-af-section af-text.sc-af-section::part(base),.bg-inkwell.sc-af-section af-text.sc-af-section [part~=\"base\"]{color:var(--colour-brand-mist-green, #C6D5D1);opacity:0.92}.bg-dark.sc-af-section af-typography-lockup.sc-af-section::part(heading),.bg-dark.sc-af-section af-typography-lockup.sc-af-section [part~=\"heading\"],.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section::part(heading),.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section [part~=\"heading\"],.bg-dark.sc-af-section af-typography-lockup.sc-af-section::part(body),.bg-dark.sc-af-section af-typography-lockup.sc-af-section [part~=\"body\"],.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section::part(body),.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section [part~=\"body\"]{color:var(--colour-brand-mist-green, #C6D5D1)}@media (max-width: 768px){.padding-tight.sc-af-section{padding:32px 0}.padding-default.sc-af-section{padding:64px 0}.padding-loose.sc-af-section{padding:80px 0 64px}}";
+const afSectionCss = ".sc-af-section-h{display:block;width:100%}.section.sc-af-section{width:100%;position:relative}.padding-tight.sc-af-section{padding:48px 0}.padding-default.sc-af-section{padding:96px 0}.padding-loose.sc-af-section{padding:120px 0 96px}.theme-white.sc-af-section{background-color:var(--colour-brand-white, #FFFFFF);--af-background-base:var(--colour-brand-white, #FFFFFF);--af-background-base-hover:var(--colour-mistgreen-100, #f4f7f6);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-mistgreen-200, #e8eeed);--af-background-level-1-hover:var(--colour-mistgreen-300, #dde6e3);--af-background-border-subtle:var(--colour-mistgreen-200, #e8eeed);--af-background-border-default:var(--colour-mistgreen-400, #d1ddda);--af-background-border-heavy:var(--colour-mistgreen-500, #c6d5d1);--af-background-border-active:var(--colour-softclay-800, #8a7049);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-text:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-icon:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-stroke:var(--colour-brand-soft-clay, #B09670)}.theme-inkwell.sc-af-section{background-color:var(--colour-brand-inkwell, #14343B);--af-background-base:var(--colour-brand-inkwell, #14343b);--af-background-base-hover:var(--colour-inkwell-600, #102a2f);--af-background-contrast:var(--colour-inkwell-700, #102a2f);--af-background-level-1:var(--colour-inkwell-450, #203e45);--af-background-level-1-hover:var(--colour-inkwell-400, #2b484f);--af-background-border-subtle:var(--colour-inkwell-450, #203e45);--af-background-border-default:var(--colour-inkwell-400, #2b484f);--af-background-border-heavy:var(--colour-inkwell-700, #102a2f);--af-background-border-active:var(--colour-brand-ice, #a6fffb);--af-background-icon-default:var(--colour-brand-white, #ffffff);--af-background-icon-accent:var(--colour-brand-ice, #a6fffb);--af-typography-heading-primary:var(--colour-brand-mist-green, #c6d5d1);--af-typography-heading-secondary:var(--colour-brand-white, #ffffff);--af-typography-body-dark:var(--colour-brand-white, #ffffff);--af-typography-body-default:var(--colour-inkwell-100, #d0d6d8);--af-typography-body-subtle:var(--colour-inkwell-200, #a1aeb1);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-icon:var(--colour-brand-white, #ffffff);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(255, 255, 255, 0.08);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff);--af-button-tertiary-text:var(--colour-brand-white, #ffffff);--af-button-tertiary-icon:var(--colour-brand-white, #ffffff);--af-button-tertiary-stroke:var(--colour-brand-ice, #A6FFFB)}.theme-mist-green.sc-af-section{background-color:var(--colour-brand-mist-green, #C6D5D1);--af-background-base:var(--colour-brand-mist-green, #c6d5d1);--af-background-base-hover:var(--colour-mistgreen-600, #b2c0bc);--af-background-contrast:var(--colour-brand-soft-clay, #b09670);--af-background-level-1:var(--colour-mistgreen-300, #dde6e3);--af-background-level-1-hover:var(--colour-mistgreen-400, #d1ddda);--af-background-border-subtle:var(--colour-mistgreen-600, #b2c0bc);--af-background-border-default:var(--colour-mistgreen-700, #9eaaa7);--af-background-border-heavy:var(--colour-mistgreen-700, #9eaaa7);--af-background-border-active:var(--colour-softclay-800, #8a7049);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-text:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-icon:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-stroke:var(--colour-brand-soft-clay, #B09670)}.theme-soft-clay.sc-af-section{background-color:var(--colour-softclay-400, #c0ab8d);--af-background-base:var(--colour-softclay-400, #c0ab8d);--af-background-base-hover:var(--colour-softclay-500, #b09670);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-softclay-500, #b09670);--af-background-level-1-hover:var(--colour-softclay-600, #9e8765);--af-background-border-subtle:var(--colour-softclay-600, #9e8765);--af-background-border-default:var(--colour-softclay-700, #8d785a);--af-background-border-heavy:var(--colour-brand-inkwell, #14343b);--af-background-border-active:var(--colour-brand-ice, #a6fffb);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-text:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-icon:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-stroke:var(--colour-brand-inkwell, #14343b)}.theme-white-ivory.sc-af-section{background-color:var(--colour-brand-ivory-paper, #fff9ee);--af-background-base:var(--colour-brand-ivory-paper, #fff9ee);--af-background-base-hover:var(--colour-ivory-100, #fff5e0);--af-background-contrast:var(--colour-brand-mist-green, #c6d5d1);--af-background-level-1:var(--colour-ivory-200, #ffefcc);--af-background-level-1-hover:var(--colour-ivory-300, #ffe9b8);--af-background-border-subtle:var(--colour-ivory-200, #ffefcc);--af-background-border-default:var(--colour-ivory-400, #ffe3a3);--af-background-border-heavy:var(--colour-brand-soft-clay, #b09670);--af-background-border-active:var(--colour-brand-soft-clay, #b09670);--af-background-icon-default:var(--colour-brand-inkwell, #14343b);--af-background-icon-accent:var(--colour-brand-soft-clay, #b09670);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-text:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-icon:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-stroke:var(--colour-brand-soft-clay, #b09670)}@media (max-width: 768px){.padding-tight.sc-af-section{padding:32px 0}.padding-default.sc-af-section{padding:64px 0}.padding-loose.sc-af-section{padding:80px 0 64px}}";
 
 const AfSection$1 = /*@__PURE__*/ proxyCustomElement(class AfSection extends H {
     constructor(registerHost) {
@@ -11,19 +11,19 @@ const AfSection$1 = /*@__PURE__*/ proxyCustomElement(class AfSection extends H {
         }
         /** Padding variant */
         this.padding = 'default';
-        /** Background color */
-        this.background = 'white';
+        /** Theme - sets background color and provides theme context to children */
+        this.theme = 'white';
         /** Whether to include a Container wrapper */
         this.container = true;
     }
     render() {
-        const content = h("slot", { key: 'cf70bb3d8d31bc3f68c49c40f1d3c415de57d8b1' });
-        return (h(Host, { key: '5b93e97c455ca8a50b598b0f3299e9884afc61ea' }, h("div", { key: '75f9cfbc62fd40dfd669c841f0b8490dcabb0c6f', class: `section padding-${this.padding} bg-${this.background}` }, this.container ? (h("af-container", null, content)) : content)));
+        const content = h("slot", { key: 'bd82dbdc2f1a42d75ad23aace4155b46d813dace' });
+        return (h(Host, { key: '6a81a4ed99312b5ecaee80d6ceac79cd5bf58b8c' }, h("div", { key: '44002052c7a2cbbe7e60bd3bcafb9794a79ba11a', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (h("af-container", null, content)) : content)));
     }
     static get style() { return afSectionCss; }
 }, [262, "af-section", {
         "padding": [1],
-        "background": [1],
+        "theme": [1],
         "container": [4]
     }]);
 function defineCustomElement$1() {

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

@@ -1 +1 @@
-{"file":"af-section.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,0hEAA0hE;;MCWliEA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAAkC,SAAS;;AAGlD,QAAA,IAAU,CAAA,UAAA,GAA4C,OAAO;;AAG7D,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AAelC;IAbC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa;QAE7B,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAmB,gBAAA,EAAA,IAAI,CAAC,OAAO,CAAO,IAAA,EAAA,IAAI,CAAC,UAAU,CAAA,CAAE,EAAA,EAChE,IAAI,CAAC,SAAS,IACb,CAAe,CAAA,cAAA,EAAA,IAAA,EAAA,OAAO,CAAgB,IACpC,OAAO,CACP,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfSection","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-section/af-section.css?tag=af-section&encapsulation=scoped","src/components/af-section/af-section.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.section {\n  width: 100%;\n  position: relative;\n}\n\n/* Padding variants */\n.padding-tight {\n  padding: 48px 0;\n}\n\n.padding-default {\n  padding: 96px 0;\n}\n\n.padding-loose {\n  padding: 120px 0 96px;\n}\n\n/* Background variants */\n.bg-white {\n  background-color: var(--colour-background-white, #FFFFFF);\n}\n\n.bg-level1 {\n  background-color: var(--colour-background-level-1, #E8EEED);\n}\n\n.bg-dark,\n.bg-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343B);\n  --colour-typography-heading-primary: var(--colour-brand-mist-green, #C6D5D1);\n  --colour-typography-body-default: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n/* Automatic contrast overrides for dark sections */\n.bg-dark af-heading::part(base),\n.bg-inkwell af-heading::part(base) {\n  color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n.bg-dark af-text::part(base),\n.bg-inkwell af-text::part(base) {\n  color: var(--colour-brand-mist-green, #C6D5D1);\n  opacity: 0.92;\n}\n\n.bg-dark af-typography-lockup::part(heading),\n.bg-inkwell af-typography-lockup::part(heading),\n.bg-dark af-typography-lockup::part(body),\n.bg-inkwell af-typography-lockup::part(body) {\n  color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n  .padding-tight {\n    padding: 32px 0;\n  }\n  \n  .padding-default {\n    padding: 64px 0;\n  }\n  \n  .padding-loose {\n    padding: 80px 0 64px;\n  }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds\n */\n@Component({\n  tag: 'af-section',\n  styleUrl: 'af-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfSection {\n  /** Padding variant */\n  @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n  \n  /** Background color */\n  @Prop() background: 'white' | 'level1' | 'dark' | 'inkwell' = 'white';\n  \n  /** Whether to include a Container wrapper */\n  @Prop() container: boolean = true;\n\n  render() {\n    const content = <slot></slot>;\n    \n    return (\n      <Host>\n        <div class={`section padding-${this.padding} bg-${this.background}`}>\n          {this.container ? (\n            <af-container>{content}</af-container>\n          ) : content}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"af-section.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,2qTAA2qT;;MCYnrTA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAAkC,SAAS;;AAGlD,QAAA,IAAK,CAAA,KAAA,GAAqE,OAAO;;AAGjF,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AAelC;IAbC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa;QAE7B,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAmB,gBAAA,EAAA,IAAI,CAAC,OAAO,CAAU,OAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAC9D,IAAI,CAAC,SAAS,IACb,CAAe,CAAA,cAAA,EAAA,IAAA,EAAA,OAAO,CAAgB,IACpC,OAAO,CACP,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfSection","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-section/af-section.css?tag=af-section&encapsulation=scoped","src/components/af-section/af-section.tsx"],"sourcesContent":["/**\n * Section Component Styles\n * \n * Provides themed containers with proper spacing.\n * Theme classes set CSS custom properties that child components consume.\n */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.section {\n  width: 100%;\n  position: relative;\n}\n\n/* Padding variants */\n.padding-tight {\n  padding: 48px 0;\n}\n\n.padding-default {\n  padding: 96px 0;\n}\n\n.padding-loose {\n  padding: 120px 0 96px;\n}\n\n/* ==========================================================================\n   WHITE THEME\n   ========================================================================== */\n\n.theme-white {\n  background-color: var(--colour-brand-white, #FFFFFF);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-brand-white, #FFFFFF);\n  --af-background-base-hover: var(--colour-mistgreen-100, #f4f7f6);\n  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);\n  --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n  --af-background-level-1-hover: var(--colour-mistgreen-300, #dde6e3);\n  --af-background-border-subtle: var(--colour-mistgreen-200, #e8eeed);\n  --af-background-border-default: var(--colour-mistgreen-400, #d1ddda);\n  --af-background-border-heavy: var(--colour-mistgreen-500, #c6d5d1);\n  --af-background-border-active: var(--colour-softclay-800, #8a7049);\n  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #B09670);\n}\n\n/* ==========================================================================\n   INKWELL THEME (Dark)\n   ========================================================================== */\n\n.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343B);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-brand-inkwell, #14343b);\n  --af-background-base-hover: var(--colour-inkwell-600, #102a2f);\n  --af-background-contrast: var(--colour-inkwell-700, #102a2f);\n  --af-background-level-1: var(--colour-inkwell-450, #203e45);\n  --af-background-level-1-hover: var(--colour-inkwell-400, #2b484f);\n  --af-background-border-subtle: var(--colour-inkwell-450, #203e45);\n  --af-background-border-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-border-heavy: var(--colour-inkwell-700, #102a2f);\n  --af-background-border-active: var(--colour-brand-ice, #a6fffb);\n  --af-background-icon-default: var(--colour-brand-white, #ffffff);\n  --af-background-icon-accent: var(--colour-brand-ice, #a6fffb);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n  --af-typography-heading-secondary: var(--colour-brand-white, #ffffff);\n  --af-typography-body-dark: var(--colour-brand-white, #ffffff);\n  --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n  --af-typography-body-subtle: var(--colour-inkwell-200, #a1aeb1);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-icon: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(255, 255, 255, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-white, #ffffff);\n  --af-button-tertiary-icon: var(--colour-brand-white, #ffffff);\n  --af-button-tertiary-stroke: var(--colour-brand-ice, #A6FFFB);\n}\n\n/* ==========================================================================\n   MIST-GREEN THEME\n   ========================================================================== */\n\n.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #C6D5D1);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-brand-mist-green, #c6d5d1);\n  --af-background-base-hover: var(--colour-mistgreen-600, #b2c0bc);\n  --af-background-contrast: var(--colour-brand-soft-clay, #b09670);\n  --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n  --af-background-level-1-hover: var(--colour-mistgreen-400, #d1ddda);\n  --af-background-border-subtle: var(--colour-mistgreen-600, #b2c0bc);\n  --af-background-border-default: var(--colour-mistgreen-700, #9eaaa7);\n  --af-background-border-heavy: var(--colour-mistgreen-700, #9eaaa7);\n  --af-background-border-active: var(--colour-softclay-800, #8a7049);\n  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #B09670);\n}\n\n/* ==========================================================================\n   SOFT-CLAY THEME\n   ========================================================================== */\n\n.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-softclay-400, #c0ab8d);\n  --af-background-base-hover: var(--colour-softclay-500, #b09670);\n  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);\n  --af-background-level-1: var(--colour-softclay-500, #b09670);\n  --af-background-level-1-hover: var(--colour-softclay-600, #9e8765);\n  --af-background-border-subtle: var(--colour-softclay-600, #9e8765);\n  --af-background-border-default: var(--colour-softclay-700, #8d785a);\n  --af-background-border-heavy: var(--colour-brand-inkwell, #14343b);\n  --af-background-border-active: var(--colour-brand-ice, #a6fffb);\n  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n  --af-background-icon-accent: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n/* ==========================================================================\n   WHITE-IVORY THEME\n   ========================================================================== */\n\n.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Background tokens */\n  --af-background-base: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-background-base-hover: var(--colour-ivory-100, #fff5e0);\n  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);\n  --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n  --af-background-level-1-hover: var(--colour-ivory-300, #ffe9b8);\n  --af-background-border-subtle: var(--colour-ivory-200, #ffefcc);\n  --af-background-border-default: var(--colour-ivory-400, #ffe3a3);\n  --af-background-border-heavy: var(--colour-brand-soft-clay, #b09670);\n  --af-background-border-active: var(--colour-brand-soft-clay, #b09670);\n  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);\n  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #b09670);\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n  .padding-tight {\n    padding: 32px 0;\n  }\n  \n  .padding-default {\n    padding: 64px 0;\n  }\n  \n  .padding-loose {\n    padding: 80px 0 64px;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds.\n * Sets theme context for all child components via CSS custom properties.\n */\n@Component({\n  tag: 'af-section',\n  styleUrl: 'af-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfSection {\n  /** Padding variant */\n  @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n  \n  /** Theme - sets background color and provides theme context to children */\n  @Prop() theme: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory' = 'white';\n  \n  /** Whether to include a Container wrapper */\n  @Prop() container: boolean = true;\n\n  render() {\n    const content = <slot></slot>;\n    \n    return (\n      <Host>\n        <div class={`section padding-${this.padding} theme-${this.theme}`}>\n          {this.container ? (\n            <af-container>{content}</af-container>\n          ) : content}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/af-social-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 afSocialLinkCss = ".sc-af-social-link-h{display:inline-block}.social-link.sc-af-social-link{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(198, 213, 209, 0.3);border-radius:50%;color:var(--colour-tints-mistGreen-200, #C6D5D1);transition:all 0.2s ease}.social-link.sc-af-social-link:hover{background-color:rgba(198, 213, 209, 0.1);border-color:rgba(198, 213, 209, 0.5)}";
 
@@ -32,7 +32,7 @@ const AfSocialLink$1 = /*@__PURE__*/ proxyCustomElement(class AfSocialLink exten
         }
     }
     render() {
-        return (h(Host, { key: 'a3ee0c643448f2c83f37559334be40a00a041465' }, h("a", { key: '162b7812f93c5226272220edd9ba3153651c01df', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
+        return (h(Host, { key: '57af022b19d623dfb9c39b7a75e5ceefe2ef866b' }, h("a", { key: '7fd283969d02fbce9b4a7a585a1b88dae1fd5fbe', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
     }
     static get style() { return afSocialLinkCss; }
 }, [262, "af-social-link", {

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

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

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

@@ -0,0 +1,71 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+import { d as defineCustomElement$2 } from './p-D3UZ60qM.js';
+
+const afSplitSectionCss = ".sc-af-split-section-h{display:block;width:100%}.split-section.sc-af-split-section{position:relative;width:100%}.padding-tight.sc-af-split-section{padding:48px 0}.padding-default.sc-af-split-section{padding:96px 0}.padding-loose.sc-af-split-section{padding:120px 0 96px}@media (max-width: 768px){.padding-tight.sc-af-split-section{padding:32px 0}.padding-default.sc-af-split-section{padding:64px 0}.padding-loose.sc-af-split-section{padding:80px 0 64px}}";
+
+// Map theme names to CSS color values
+const themeColors = {
+    'white': 'var(--colour-brand-white, #FFFFFF)',
+    'inkwell': 'var(--colour-brand-inkwell, #14343B)',
+    'mist-green': 'var(--colour-brand-mist-green, #C6D5D1)',
+    'soft-clay': 'var(--colour-softclay-400, #c0ab8d)',
+    'white-ivory': 'var(--colour-brand-ivory-paper, #fff9ee)',
+};
+const AfSplitSection$1 = /*@__PURE__*/ proxyCustomElement(class AfSplitSection extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /** Theme for the top half of the section */
+        this.topTheme = 'mist-green';
+        /** Theme for the bottom half of the section */
+        this.bottomTheme = 'white';
+        /** Padding variant */
+        this.padding = 'default';
+        /** Whether to include a Container wrapper */
+        this.container = true;
+    }
+    render() {
+        const content = h("slot", { key: '6883d2b8d85fc848e03978e163655d8672f8bac6' });
+        // Create the split background using CSS gradient
+        const topColor = themeColors[this.topTheme];
+        const bottomColor = themeColors[this.bottomTheme];
+        const backgroundStyle = {
+            background: `linear-gradient(to bottom, ${topColor} 0%, ${topColor} 50%, ${bottomColor} 50%, ${bottomColor} 100%)`
+        };
+        return (h(Host, { key: '583008c903c5883fb1b2254eb235cc3db440be38' }, h("div", { key: 'c8b2f2d0527c60cb2df6a321fe55a640a8f46a8c', class: `split-section padding-${this.padding} top-theme-${this.topTheme}`, style: backgroundStyle }, this.container ? (h("af-container", null, content)) : content)));
+    }
+    static get style() { return afSplitSectionCss; }
+}, [262, "af-split-section", {
+        "topTheme": [1, "top-theme"],
+        "bottomTheme": [1, "bottom-theme"],
+        "padding": [1],
+        "container": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-split-section", "af-container"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-split-section":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfSplitSection$1);
+            }
+            break;
+        case "af-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const AfSplitSection = AfSplitSection$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfSplitSection, defineCustomElement };
+//# sourceMappingURL=af-split-section.js.map
+
+//# sourceMappingURL=af-split-section.js.map

package/dist/components/af-split-section.js.map

@@ -0,0 +1 @@
+{"file":"af-split-section.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,wcAAwc;;ACIle;AACA,MAAM,WAAW,GAA0B;AACzC,IAAA,OAAO,EAAE,oCAAoC;AAC7C,IAAA,SAAS,EAAE,sCAAsC;AACjD,IAAA,YAAY,EAAE,yCAAyC;AACvD,IAAA,WAAW,EAAE,qCAAqC;AAClD,IAAA,aAAa,EAAE,0CAA0C;CAC1D;MAeYA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAN3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQU,QAAA,IAAQ,CAAA,QAAA,GAAU,YAAY;;AAG9B,QAAA,IAAW,CAAA,WAAA,GAAU,OAAO;;AAG5B,QAAA,IAAO,CAAA,OAAA,GAAkC,SAAS;;AAGlD,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AAyBlC;IAvBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa;;QAG7B,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC3C,MAAM,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC;AACjD,QAAA,MAAM,eAAe,GAAG;YACtB,UAAU,EAAE,8BAA8B,QAAQ,CAAA,KAAA,EAAQ,QAAQ,CAAS,MAAA,EAAA,WAAW,CAAS,MAAA,EAAA,WAAW,CAAQ,MAAA;SACnH;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAyB,sBAAA,EAAA,IAAI,CAAC,OAAO,CAAc,WAAA,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,EACzE,KAAK,EAAE,eAAe,EAErB,EAAA,IAAI,CAAC,SAAS,IACb,wBAAe,OAAO,CAAgB,IACpC,OAAO,CACP,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfSplitSection","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-split-section/af-split-section.css?tag=af-split-section&encapsulation=scoped","src/components/af-split-section/af-split-section.tsx"],"sourcesContent":["/* Theme CSS custom properties are loaded globally from @affinda/css */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.split-section {\n  position: relative;\n  width: 100%;\n  /* Background is set via inline style with linear-gradient */\n}\n\n/* ==========================================================================\n   Padding Variants\n   ========================================================================== */\n\n.padding-tight {\n  padding: 48px 0;\n}\n\n.padding-default {\n  padding: 96px 0;\n}\n\n.padding-loose {\n  padding: 120px 0 96px;\n}\n\n/* ==========================================================================\n   Mobile Adjustments\n   ========================================================================== */\n\n@media (max-width: 768px) {\n  .padding-tight {\n    padding: 32px 0;\n  }\n  \n  .padding-default {\n    padding: 64px 0;\n  }\n  \n  .padding-loose {\n    padding: 80px 0 64px;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Theme = 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';\n\n// Map theme names to CSS color values\nconst themeColors: Record<Theme, string> = {\n  'white': 'var(--colour-brand-white, #FFFFFF)',\n  'inkwell': 'var(--colour-brand-inkwell, #14343B)',\n  'mist-green': 'var(--colour-brand-mist-green, #C6D5D1)',\n  'soft-clay': 'var(--colour-softclay-400, #c0ab8d)',\n  'white-ivory': 'var(--colour-brand-ivory-paper, #fff9ee)',\n};\n\n/**\n * Split Section component for layouts with two-tone backgrounds.\n * Creates a vertical split with different themes for top and bottom halves.\n * Useful for content that visually spans across two themed areas.\n * \n * Uses a CSS linear-gradient for the split background effect.\n */\n@Component({\n  tag: 'af-split-section',\n  styleUrl: 'af-split-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfSplitSection {\n  /** Theme for the top half of the section */\n  @Prop() topTheme: Theme = 'mist-green';\n\n  /** Theme for the bottom half of the section */\n  @Prop() bottomTheme: Theme = 'white';\n\n  /** Padding variant */\n  @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n\n  /** Whether to include a Container wrapper */\n  @Prop() container: boolean = true;\n\n  render() {\n    const content = <slot></slot>;\n    \n    // Create the split background using CSS gradient\n    const topColor = themeColors[this.topTheme];\n    const bottomColor = themeColors[this.bottomTheme];\n    const backgroundStyle = {\n      background: `linear-gradient(to bottom, ${topColor} 0%, ${topColor} 50%, ${bottomColor} 50%, ${bottomColor} 100%)`\n    };\n\n    return (\n      <Host>\n        <div\n          class={`split-section padding-${this.padding} top-theme-${this.topTheme}`}\n          style={backgroundStyle}\n        >\n          {this.container ? (\n            <af-container>{content}</af-container>\n          ) : content}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

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

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

package/dist/components/af-switch.js

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

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

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

package/dist/components/af-tab-bar.d.ts

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

package/dist/components/af-tab-bar.js

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

package/dist/components/af-tab-bar.js.map

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

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

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

package/dist/components/af-tab.js

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

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

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

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

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

package/dist/components/af-tag.js

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

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

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

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

@@ -1,6 +1,7 @@
-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';
+import { d as defineCustomElement$2 } from './p-wwnR-hlX.js';
 
-const afTestimonialCarouselCss = ".sc-af-testimonial-carousel-h{display:block;width:100%;overflow:hidden}.testimonial-carousel.sc-af-testimonial-carousel{position:relative;width:100%}.testimonial-slides.sc-af-testimonial-carousel{position:relative;width:100%;min-height:544px;overflow:hidden}.testimonial-slides.sc-af-testimonial-carousel-s>af-testimonial,.testimonial-slides .sc-af-testimonial-carousel-s>af-testimonial{position:absolute;top:0;left:0;width:100%;transition:transform 0.5s ease-in-out, opacity 0.5s ease-in-out}.testimonial-progress.sc-af-testimonial-carousel{display:flex;gap:12px;justify-content:center;margin-top:32px;padding:0 220px}.progress-dot.sc-af-testimonial-carousel{width:100%;max-width:840px;height:3px;background:var(--colour-background-border-default, #d1ddda);border-radius:2px;cursor:pointer;transition:background 0.3s ease;position:relative;overflow:hidden}.progress-dot.active.sc-af-testimonial-carousel{background:var(--colour-background-border-active, #8a7049)}.progress-dot.sc-af-testimonial-carousel:hover:not(.active){background:var(--colour-background-border-default, #c1cdc9)}.carousel-navigation.sc-af-testimonial-carousel{position:absolute;bottom:48px;left:50%;margin-left:48px;display:flex;gap:12px;align-items:center;z-index:10}.nav-button.sc-af-testimonial-carousel{width:48px;height:48px;border-radius:50%;border:1px solid var(--colour-brand-inkwell, #14343b);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;color:var(--colour-brand-inkwell, #14343b)}.nav-button.sc-af-testimonial-carousel:hover:not(:disabled){background:rgba(255, 255, 255, 0.1);transform:translateY(-2px)}.nav-button.sc-af-testimonial-carousel:disabled{opacity:0.4;cursor:not-allowed;border-color:var(--colour-brand-inkwell, #14343b)}.nav-button.sc-af-testimonial-carousel svg.sc-af-testimonial-carousel{width:24px;height:24px}";
+const afTestimonialCarouselCss = ".sc-af-testimonial-carousel-h{display:block;width:100%}.testimonial-carousel.sc-af-testimonial-carousel{position:relative;width:100%;overflow:hidden}.testimonial-slides.sc-af-testimonial-carousel{position:relative;width:100%;min-height:544px;overflow:hidden}.testimonial-slides.sc-af-testimonial-carousel-s>af-testimonial,.testimonial-slides .sc-af-testimonial-carousel-s>af-testimonial{position:absolute;top:0;left:0;width:100%;transition:transform 0.5s ease-in-out, opacity 0.5s ease-in-out}.testimonial-progress.sc-af-testimonial-carousel{margin-top:32px;max-width:840px;margin-left:auto;margin-right:auto}";
 
 const AfTestimonialCarousel$1 = /*@__PURE__*/ proxyCustomElement(class AfTestimonialCarousel extends H {
     constructor(registerHost) {
@@ -49,12 +50,20 @@ const AfTestimonialCarousel$1 = /*@__PURE__*/ proxyCustomElement(class AfTestimo
             this.observer.disconnect();
         }
     }
+    /**
+     * Listen for navigation events from testimonials
+     */
+    handleNavPrev() {
+        this.goToPrevious();
+    }
+    handleNavNext() {
+        this.goToNext();
+    }
     detectTestimonials() {
         const newTestimonials = Array.from(this.host.querySelectorAll('af-testimonial'));
         if (newTestimonials.length !== this.testimonials.length) {
             this.testimonials = newTestimonials;
             this.testimonialCount = newTestimonials.length;
-            console.log('Found testimonials:', this.testimonials.length);
             if (this.testimonials.length > 0) {
                 this.currentIndex = 0;
                 this.updateVisibleTestimonial();
@@ -62,26 +71,30 @@ const AfTestimonialCarousel$1 = /*@__PURE__*/ proxyCustomElement(class AfTestimo
         }
     }
     updateVisibleTestimonial() {
+        const hasPrev = this.currentIndex > 0;
+        const hasNext = this.currentIndex < this.testimonialCount - 1;
+        const showNav = this.testimonialCount > 1;
         this.testimonials.forEach((testimonial, index) => {
             const offset = (index - this.currentIndex) * 100;
             testimonial.style.transform = `translateX(${offset}%)`;
             testimonial.style.opacity = index === this.currentIndex ? '1' : '0';
             testimonial.style.pointerEvents = index === this.currentIndex ? 'auto' : 'none';
+            // Set navigation props on testimonials (directly on the element for Stencil)
+            testimonial.showNavigation = showNav;
+            testimonial.hasPrev = hasPrev;
+            testimonial.hasNext = hasNext;
         });
     }
+    /**
+     * Calculate progress value (0 to 1) based on current position
+     */
+    getProgress() {
+        if (this.testimonialCount <= 1)
+            return 0;
+        return (this.currentIndex + 1) / this.testimonialCount;
+    }
     render() {
-        const hasPrev = this.currentIndex > 0;
-        const hasNext = this.currentIndex < this.testimonialCount - 1;
-        return (h(Host, { key: '5fb510b14cc125949f4265e0b2b44ddd85a0fe82' }, h("div", { key: 'd40dc624996acb24689f47ccb108cd50791ba35c', class: "testimonial-carousel" }, h("div", { key: 'df0c0e42b475c652b14fafa3e3d96af543839eaa', class: "testimonial-slides" }, h("slot", { key: 'da7c0e18a5370b0b06526e86d5f482aa83fce08d' })), this.testimonialCount > 1 && (h("div", { key: '4988b2bbc14aa5d0b5ca8cbe1d26025bb4f59310', class: "testimonial-progress" }, Array.from({ length: this.testimonialCount }).map((_, index) => (h("div", { class: `progress-dot ${index === this.currentIndex ? 'active' : ''}`, onClick: () => {
-                if (!this.isAnimating && index !== this.currentIndex) {
-                    this.isAnimating = true;
-                    this.currentIndex = index;
-                    this.updateVisibleTestimonial();
-                    setTimeout(() => {
-                        this.isAnimating = false;
-                    }, 500);
-                }
-            } }))))), this.testimonialCount > 1 && (h("div", { key: 'e7964cffbe873d8c4bfa80696137f09b451799ca', class: "carousel-navigation" }, h("button", { key: 'f2fc1864f48ecb72e2114af40a849ba6d779afb7', class: "nav-button prev", disabled: !hasPrev, onClick: this.goToPrevious, "aria-label": "Previous testimonial" }, h("svg", { key: 'ac40cddba548d95f19b0e7729fea5d6fe923533e', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '90071385affb9512188b583cbd3dd60da4e6d7b7', d: "M19 12H5M5 12L12 19M5 12L12 5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'bd3095a3e9857c9fdd30a3f8cf78197b1890e9a2', class: "nav-button next", disabled: !hasNext, onClick: this.goToNext, "aria-label": "Next testimonial" }, h("svg", { key: 'dc2fd50a2c810c9af346cbb0432a44baf6c56219', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'de50488dc05d8fd669951d099376f65b9a7dfa26', d: "M5 12H19M19 12L12 5M19 12L12 19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: '57b9644d20de065d6274f35f0aeac5e525a7f994' }, h("div", { key: '69033a6db2cb6242abd737ec98a841109a88d443', class: "testimonial-carousel" }, h("div", { key: 'b94d5bbd634eb445737afe8c0dc8f5795be50b4c', class: "testimonial-slides" }, h("slot", { key: 'a8481aaeeb8b818aa9d0ae0eeff5c30b33288acd' })), this.testimonialCount > 1 && (h("div", { key: '496d86deca071afeacb0d8eb4c273eefa592430e', class: "testimonial-progress" }, h("af-progress-line", { key: 'bb9c74ab68bb2dc247556e81ec07e39b7934e5ee', progress: this.getProgress() }))))));
     }
     get host() { return this; }
     static get style() { return afTestimonialCarouselCss; }
@@ -89,18 +102,23 @@ const AfTestimonialCarousel$1 = /*@__PURE__*/ proxyCustomElement(class AfTestimo
         "currentIndex": [32],
         "isAnimating": [32],
         "testimonialCount": [32]
-    }]);
+    }, [[0, "navPrev", "handleNavPrev"], [0, "navNext", "handleNavNext"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["af-testimonial-carousel"];
+    const components = ["af-testimonial-carousel", "af-progress-line"];
     components.forEach(tagName => { switch (tagName) {
         case "af-testimonial-carousel":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, AfTestimonialCarousel$1);
             }
             break;
+        case "af-progress-line":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }
 

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

@@ -1 +1 @@
-{"file":"af-testimonial-carousel.js","mappings":"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","names":["AfTestimonialCarousel","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-testimonial-carousel/af-testimonial-carousel.css?tag=af-testimonial-carousel&encapsulation=scoped","src/components/af-testimonial-carousel/af-testimonial-carousel.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  overflow: hidden;\n}\n\n.testimonial-carousel {\n  position: relative;\n  width: 100%;\n}\n\n.testimonial-slides {\n  position: relative;\n  width: 100%;\n  min-height: 544px;\n  overflow: hidden;\n}\n\n.testimonial-slides ::slotted(af-testimonial) {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;\n}\n\n/* Progress indicator */\n.testimonial-progress {\n  display: flex;\n  gap: 12px;\n  justify-content: center;\n  margin-top: 32px;\n  padding: 0 220px;\n}\n\n.progress-dot {\n  width: 100%;\n  max-width: 840px;\n  height: 3px;\n  background: var(--colour-background-border-default, #d1ddda);\n  border-radius: 2px;\n  cursor: pointer;\n  transition: background 0.3s ease;\n  position: relative;\n  overflow: hidden;\n}\n\n.progress-dot.active {\n  background: var(--colour-background-border-active, #8a7049);\n}\n\n.progress-dot:hover:not(.active) {\n  background: var(--colour-background-border-default, #c1cdc9);\n}\n\n/* Navigation buttons - positioned bottom left of content area (not on image) */\n.carousel-navigation {\n  position: absolute;\n  bottom: 48px;\n  left: 50%;\n  margin-left: 48px;\n  display: flex;\n  gap: 12px;\n  align-items: center;\n  z-index: 10;\n}\n\n.nav-button {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  border: 1px solid var(--colour-brand-inkwell, #14343b);\n  background: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--colour-brand-inkwell, #14343b);\n}\n\n.nav-button:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.1);\n  transform: translateY(-2px);\n}\n\n.nav-button:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  border-color: var(--colour-brand-inkwell, #14343b);\n}\n\n.nav-button svg {\n  width: 24px;\n  height: 24px;\n}\n\n","import { Component, State, h, Host, Element } from '@stencil/core';\n\n@Component({\n  tag: 'af-testimonial-carousel',\n  styleUrl: 'af-testimonial-carousel.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTestimonialCarousel {\n  @Element() host!: HTMLElement;\n  @State() currentIndex: number = 0;\n  @State() isAnimating: boolean = false;\n  @State() testimonialCount: number = 0;\n\n  private testimonials: HTMLElement[] = [];\n  private observer: MutationObserver | undefined;\n\n  componentDidLoad() {\n    this.detectTestimonials();\n    \n    // Watch for testimonials being added (for React async rendering)\n    this.observer = new MutationObserver(() => {\n      this.detectTestimonials();\n    });\n    \n    this.observer.observe(this.host, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private detectTestimonials() {\n    const newTestimonials = Array.from(this.host.querySelectorAll('af-testimonial')) as HTMLElement[];\n    \n    if (newTestimonials.length !== this.testimonials.length) {\n      this.testimonials = newTestimonials;\n      this.testimonialCount = newTestimonials.length;\n      console.log('Found testimonials:', this.testimonials.length);\n      \n      if (this.testimonials.length > 0) {\n        this.currentIndex = 0;\n        this.updateVisibleTestimonial();\n      }\n    }\n  }\n\n  private updateVisibleTestimonial() {\n    this.testimonials.forEach((testimonial, index) => {\n      const offset = (index - this.currentIndex) * 100;\n      testimonial.style.transform = `translateX(${offset}%)`;\n      testimonial.style.opacity = index === this.currentIndex ? '1' : '0';\n      testimonial.style.pointerEvents = index === this.currentIndex ? 'auto' : 'none';\n    });\n  }\n\n  private goToPrevious = () => {\n    if (this.isAnimating || this.currentIndex === 0) return;\n    \n    this.isAnimating = true;\n    this.currentIndex = this.currentIndex - 1;\n    this.updateVisibleTestimonial();\n    \n    setTimeout(() => {\n      this.isAnimating = false;\n    }, 500);\n  };\n\n  private goToNext = () => {\n    if (this.isAnimating || this.currentIndex >= this.testimonialCount - 1) return;\n    \n    this.isAnimating = true;\n    this.currentIndex = this.currentIndex + 1;\n    this.updateVisibleTestimonial();\n    \n    setTimeout(() => {\n      this.isAnimating = false;\n    }, 500);\n  };\n\n  render() {\n    const hasPrev = this.currentIndex > 0;\n    const hasNext = this.currentIndex < this.testimonialCount - 1;\n\n    return (\n      <Host>\n        <div class=\"testimonial-carousel\">\n          <div class=\"testimonial-slides\">\n            <slot></slot>\n          </div>\n          \n          {/* Progress indicator */}\n          {this.testimonialCount > 1 && (\n            <div class=\"testimonial-progress\">\n              {Array.from({ length: this.testimonialCount }).map((_, index) => (\n                <div \n                  class={`progress-dot ${index === this.currentIndex ? 'active' : ''}`}\n                  onClick={() => {\n                    if (!this.isAnimating && index !== this.currentIndex) {\n                      this.isAnimating = true;\n                      this.currentIndex = index;\n                      this.updateVisibleTestimonial();\n                      setTimeout(() => {\n                        this.isAnimating = false;\n                      }, 500);\n                    }\n                  }}\n                />\n              ))}\n            </div>\n          )}\n\n          {/* Navigation buttons */}\n          {this.testimonialCount > 1 && (\n            <div class=\"carousel-navigation\">\n              <button \n                class=\"nav-button prev\" \n                disabled={!hasPrev}\n                onClick={this.goToPrevious}\n                aria-label=\"Previous testimonial\"\n              >\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M19 12H5M5 12L12 19M5 12L12 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </button>\n              <button \n                class=\"nav-button next\" \n                disabled={!hasNext}\n                onClick={this.goToNext}\n                aria-label=\"Next testimonial\"\n              >\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n                  <path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"af-testimonial-carousel.js","mappings":"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","names":["AfTestimonialCarousel","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-testimonial-carousel/af-testimonial-carousel.css?tag=af-testimonial-carousel&encapsulation=scoped","src/components/af-testimonial-carousel/af-testimonial-carousel.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.testimonial-carousel {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n}\n\n.testimonial-slides {\n  position: relative;\n  width: 100%;\n  min-height: 544px;\n  overflow: hidden;\n}\n\n.testimonial-slides ::slotted(af-testimonial) {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;\n}\n\n/* Progress indicator - wraps af-progress-line atom */\n/* Per Figma: centered below the card with horizontal padding */\n.testimonial-progress {\n  margin-top: 32px;\n  max-width: 840px;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Navigation is now rendered inside each testimonial's footer via props */\n\n","import { Component, State, h, Host, Element, Listen } from '@stencil/core';\n\n/**\n * TestimonialCarousel - Carousel for displaying multiple customer testimonials.\n * \n * Handles navigation between testimonials with progress indicator.\n * Wrap in Section/Container for proper page layout and theming.\n * \n * @slot - Testimonial components to display in the carousel\n */\n@Component({\n  tag: 'af-testimonial-carousel',\n  styleUrl: 'af-testimonial-carousel.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTestimonialCarousel {\n  @Element() host!: HTMLElement;\n  @State() currentIndex: number = 0;\n  @State() isAnimating: boolean = false;\n  @State() testimonialCount: number = 0;\n\n  private testimonials: HTMLElement[] = [];\n  private observer: MutationObserver | undefined;\n\n  componentDidLoad() {\n    this.detectTestimonials();\n    \n    // Watch for testimonials being added (for React async rendering)\n    this.observer = new MutationObserver(() => {\n      this.detectTestimonials();\n    });\n    \n    this.observer.observe(this.host, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  /**\n   * Listen for navigation events from testimonials\n   */\n  @Listen('navPrev')\n  handleNavPrev() {\n    this.goToPrevious();\n  }\n\n  @Listen('navNext')\n  handleNavNext() {\n    this.goToNext();\n  }\n\n  private detectTestimonials() {\n    const newTestimonials = Array.from(this.host.querySelectorAll('af-testimonial')) as HTMLElement[];\n    \n    if (newTestimonials.length !== this.testimonials.length) {\n      this.testimonials = newTestimonials;\n      this.testimonialCount = newTestimonials.length;\n      \n      if (this.testimonials.length > 0) {\n        this.currentIndex = 0;\n        this.updateVisibleTestimonial();\n      }\n    }\n  }\n\n  private updateVisibleTestimonial() {\n    const hasPrev = this.currentIndex > 0;\n    const hasNext = this.currentIndex < this.testimonialCount - 1;\n    const showNav = this.testimonialCount > 1;\n\n    this.testimonials.forEach((testimonial, index) => {\n      const offset = (index - this.currentIndex) * 100;\n      testimonial.style.transform = `translateX(${offset}%)`;\n      testimonial.style.opacity = index === this.currentIndex ? '1' : '0';\n      testimonial.style.pointerEvents = index === this.currentIndex ? 'auto' : 'none';\n      \n      // Set navigation props on testimonials (directly on the element for Stencil)\n      (testimonial as any).showNavigation = showNav;\n      (testimonial as any).hasPrev = hasPrev;\n      (testimonial as any).hasNext = hasNext;\n    });\n  }\n\n  private goToPrevious = () => {\n    if (this.isAnimating || this.currentIndex === 0) return;\n    \n    this.isAnimating = true;\n    this.currentIndex = this.currentIndex - 1;\n    this.updateVisibleTestimonial();\n    \n    setTimeout(() => {\n      this.isAnimating = false;\n    }, 500);\n  };\n\n  private goToNext = () => {\n    if (this.isAnimating || this.currentIndex >= this.testimonialCount - 1) return;\n    \n    this.isAnimating = true;\n    this.currentIndex = this.currentIndex + 1;\n    this.updateVisibleTestimonial();\n    \n    setTimeout(() => {\n      this.isAnimating = false;\n    }, 500);\n  };\n\n  /**\n   * Calculate progress value (0 to 1) based on current position\n   */\n  private getProgress(): number {\n    if (this.testimonialCount <= 1) return 0;\n    return (this.currentIndex + 1) / this.testimonialCount;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"testimonial-carousel\">\n          <div class=\"testimonial-slides\">\n            <slot></slot>\n          </div>\n          \n          {/* Progress indicator using af-progress-line atom */}\n          {this.testimonialCount > 1 && (\n            <div class=\"testimonial-progress\">\n              <af-progress-line progress={this.getProgress()} />\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

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

@@ -1,6 +1,8 @@
-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';
+import { d as defineCustomElement$3 } from './p-BRN73McC.js';
+import { d as defineCustomElement$2 } from './p-DOkvrcIE.js';
 
-const afTestimonialStatCss = ".sc-af-testimonial-stat-h{display:block;flex:1;min-width:0}.stat.sc-af-testimonial-stat{display:flex;flex-direction:column;gap:8px}.stat--accent.sc-af-testimonial-stat{border-left:2px solid var(--colour-background-border-active, #8a7049);padding-left:16px;min-height:76px;justify-content:center}.stat-value.sc-af-testimonial-stat{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-size:44px;font-weight:400;line-height:1;letter-spacing:-0.88px;color:var(--colour-typography-heading-secondary, #8a7049);margin:0}.stat-description.sc-af-testimonial-stat{font-family:'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;font-size:16px;font-weight:400;line-height:24px;color:var(--colour-typography-body-dark, #14343b);margin:0;overflow:hidden;text-overflow:ellipsis}";
+const afTestimonialStatCss = ".sc-af-testimonial-stat-h{display:block;flex:1;min-width:0}.stat.sc-af-testimonial-stat{display:flex;flex-direction:column;gap:8px}.stat--accent.sc-af-testimonial-stat{border-left:2px solid var(--af-background-border-active, var(--colour-softclay-800, #8a7049));padding-left:16px;min-height:76px;justify-content:center}.stat-value.sc-af-testimonial-stat{--af-typography-heading-primary:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));letter-spacing:-0.88px;white-space:nowrap}.stat-description.sc-af-testimonial-stat{--af-typography-body-default:var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));overflow:hidden;text-overflow:ellipsis}";
 
 const AfTestimonialStat$1 = /*@__PURE__*/ proxyCustomElement(class AfTestimonialStat extends H {
     constructor(registerHost) {
@@ -14,7 +16,7 @@ const AfTestimonialStat$1 = /*@__PURE__*/ proxyCustomElement(class AfTestimonial
         this.accentBorder = false;
     }
     render() {
-        return (h(Host, { key: '7234425931dee2deff672a9e863b13eb5dd35c30' }, h("div", { key: '737dbdee95341fd7b8c213b6b9590f54c8039e7d', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("p", { key: '8de1db6ce9dcaf5a94a4c11b7cfbebed8274be9f', class: "stat-value" }, this.value), h("p", { key: 'd34154c4bc709a3e023ca16b991b7dca95402621', class: "stat-description" }, this.description))));
+        return (h(Host, { key: 'e3dc86a0d0368680dc03ab1a7260ccabd48def13' }, h("div", { key: '97cefaa49ab9fad117d3c541d9b58461ad216566', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("af-heading", { key: '49c03e5fe9c7ddbb31bb8d8a686cffa44517c176', level: 2, class: "stat-value" }, this.value), h("af-text", { key: '3b931281953a7d23d0bdfb540d48635576f84e1d', variant: "medium", class: "stat-description" }, this.description))));
     }
     static get style() { return afTestimonialStatCss; }
 }, [258, "af-testimonial-stat", {
@@ -26,13 +28,23 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["af-testimonial-stat"];
+    const components = ["af-testimonial-stat", "af-heading", "af-text"];
     components.forEach(tagName => { switch (tagName) {
         case "af-testimonial-stat":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, AfTestimonialStat$1);
             }
             break;
+        case "af-heading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "af-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }
 

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

@@ -1 +1 @@
-{"file":"af-testimonial-stat.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,kxBAAkxB;;MCQlyBA,mBAAiB,iBAAAC,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAN9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAiBE;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAYtC;IAVC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,KAAA,EAAQ,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,EAAE,CAAA,CAAE,EAAA,EAC3D,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAK,EACtC,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,WAAW,CAAK,CAC9C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfTestimonialStat","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-testimonial-stat/af-testimonial-stat.css?tag=af-testimonial-stat&encapsulation=scoped","src/components/af-testimonial-stat/af-testimonial-stat.tsx"],"sourcesContent":[":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n}\n\n.stat {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.stat--accent {\n  border-left: 2px solid var(--colour-background-border-active, #8a7049);\n  padding-left: 16px;\n  min-height: 76px;\n  justify-content: center;\n}\n\n.stat-value {\n  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-size: 44px;\n  font-weight: 400;\n  line-height: 1;\n  letter-spacing: -0.88px;\n  color: var(--colour-typography-heading-secondary, #8a7049);\n  margin: 0;\n}\n\n.stat-description {\n  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 24px;\n  color: var(--colour-typography-body-dark, #14343b);\n  margin: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-testimonial-stat',\n  styleUrl: 'af-testimonial-stat.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTestimonialStat {\n  /**\n   * The statistic value (e.g., \"95%\", \"10×\", \"120,000\")\n   */\n  @Prop() value!: string;\n\n  /**\n   * Description text for the statistic\n   */\n  @Prop() description!: string;\n\n  /**\n   * Whether to show left accent border\n   */\n  @Prop() accentBorder: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div class={`stat ${this.accentBorder ? 'stat--accent' : ''}`}>\n          <p class=\"stat-value\">{this.value}</p>\n          <p class=\"stat-description\">{this.description}</p>\n        </div>\n      </Host>\n    );\n  }\n}\n\n\n"],"version":3}
+{"file":"af-testimonial-stat.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,+qBAA+qB;;MCQ/rBA,mBAAiB,iBAAAC,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAN9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAiBE;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AActC;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,YAAY,GAAG,cAAc,GAAG,EAAE,CAAE,CAAA,EAAA,EAE3D,CAAY,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAC,EAAE,KAAK,EAAC,YAAY,EAAE,EAAA,IAAI,CAAC,KAAK,CAAc,EAElE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,kBAAkB,EAAE,EAAA,IAAI,CAAC,WAAW,CAAW,CAC3E,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfTestimonialStat","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-testimonial-stat/af-testimonial-stat.css?tag=af-testimonial-stat&encapsulation=scoped","src/components/af-testimonial-stat/af-testimonial-stat.tsx"],"sourcesContent":[":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n}\n\n.stat {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.stat--accent {\n  /* Themed active/accent border color */\n  border-left: 2px solid var(--af-background-border-active, var(--colour-softclay-800, #8a7049));\n  padding-left: 16px;\n  min-height: 76px;\n  justify-content: center;\n}\n\n/* Stat value - override af-heading to use secondary color */\n.stat-value {\n  /* Override the heading color to use secondary (gold/ochre) instead of primary */\n  --af-typography-heading-primary: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));\n  letter-spacing: -0.88px;\n  white-space: nowrap;\n}\n\n/* Description - override af-text to use body-dark for emphasis */\n.stat-description {\n  --af-typography-body-default: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));\n  overflow: hidden;\n  text-overflow: ellipsis;\n}","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-testimonial-stat',\n  styleUrl: 'af-testimonial-stat.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTestimonialStat {\n  /**\n   * The statistic value (e.g., \"95%\", \"10×\", \"120,000\")\n   */\n  @Prop() value!: string;\n\n  /**\n   * Description text for the statistic\n   */\n  @Prop() description!: string;\n\n  /**\n   * Whether to show left accent border\n   */\n  @Prop() accentBorder: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div class={`stat ${this.accentBorder ? 'stat--accent' : ''}`}>\n          {/* Stat value uses secondary heading color via CSS override */}\n          <af-heading level={2} class=\"stat-value\">{this.value}</af-heading>\n          {/* Description uses af-text for proper theming */}\n          <af-text variant=\"medium\" class=\"stat-description\">{this.description}</af-text>\n        </div>\n      </Host>\n    );\n  }\n}\n\n\n"],"version":3}