@affinda/wc 0.0.28 → 0.2.0

package/dist/components/af-numbered-stepper.js

@@ -0,0 +1,57 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
+
+const afNumberedStepperCss = ".sc-af-numbered-stepper-h{display:grid;width:100%;max-width:1120px;margin:0 auto}.numbered-stepper--horizontal.sc-af-numbered-stepper{grid-auto-columns:1fr;grid-auto-flow:column;gap:0}.numbered-stepper--vertical.sc-af-numbered-stepper{max-width:680px;grid-auto-flow:row;gap:var(--space-8, 32px)}@media (max-width: 767px){.numbered-stepper--horizontal.sc-af-numbered-stepper{grid-auto-flow:row;grid-auto-columns:unset;gap:var(--space-8, 32px)}}";
+
+const AfNumberedStepper$1 = /*@__PURE__*/ proxyCustomElement(class AfNumberedStepper extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /** Layout orientation. Horizontal auto-stacks to vertical on mobile. */
+        this.orientation = 'horizontal';
+    }
+    componentDidLoad() {
+        this.assignIndices();
+    }
+    componentDidUpdate() {
+        this.assignIndices();
+    }
+    assignIndices() {
+        const items = Array.from(this.el.querySelectorAll('af-numbered-stepper-item'));
+        items.forEach((item, i) => {
+            // Only set when the consumer hasn't explicitly numbered the step.
+            if (item.index == null || item.index === 1) {
+                item.index = i + 1;
+            }
+        });
+    }
+    render() {
+        return (h(Host, { key: 'a1df62f85981a64331d4b641074eaa54db04fef8', class: `numbered-stepper numbered-stepper--${this.orientation}`, role: "list" }, h("slot", { key: '2c1fbae6a474c883ce7eef49b79610882b401464' })));
+    }
+    get el() { return this; }
+    static get style() { return afNumberedStepperCss; }
+}, [262, "af-numbered-stepper", {
+        "orientation": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-numbered-stepper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-numbered-stepper":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfNumberedStepper$1);
+            }
+            break;
+    } });
+}
+
+const AfNumberedStepper = AfNumberedStepper$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfNumberedStepper, defineCustomElement };
+//# sourceMappingURL=af-numbered-stepper.js.map
+
+//# sourceMappingURL=af-numbered-stepper.js.map

package/dist/components/af-numbered-stepper.js.map

@@ -0,0 +1 @@
+{"file":"af-numbered-stepper.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,6bAA6b;;MCqC7cA,mBAAiB,iBAAAC,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAN9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAUU,QAAA,IAAW,CAAA,WAAA,GAA8B,YAAY;AAgC9D;IA9BC,gBAAgB,GAAA;QACd,IAAI,CAAC,aAAa,EAAE;;IAGtB,kBAAkB,GAAA;QAChB,IAAI,CAAC,aAAa,EAAE;;IAGd,aAAa,GAAA;AACnB,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAClB;QACpC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,KAAI;;AAExB,YAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;AAC1C,gBAAA,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC;;AAEtB,SAAC,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE,CAAsC,mCAAA,EAAA,IAAI,CAAC,WAAW,CAAA,CAAE,EAC/D,IAAI,EAAC,MAAM,EAAA,EAEX,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfNumberedStepper","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-numbered-stepper/af-numbered-stepper.css?tag=af-numbered-stepper&encapsulation=scoped","src/components/af-numbered-stepper/af-numbered-stepper.tsx"],"sourcesContent":[":host {\n  display: grid;\n  width: 100%;\n  max-width: 1120px;\n  margin: 0 auto;\n}\n\n/* Horizontal: equal-width columns; each item paints its own connector segment. */\n.numbered-stepper--horizontal {\n  grid-auto-columns: 1fr;\n  grid-auto-flow: column;\n  gap: 0;\n}\n\n/* Vertical: one column; items render the badge-row inline and the connector\n * runs along the top of the row between badges. */\n.numbered-stepper--vertical {\n  max-width: 680px;\n  grid-auto-flow: row;\n  gap: var(--space-8, 32px);\n}\n\n/* ≤ mobile — horizontal collapses to vertical stack. */\n@media (max-width: 767px) {\n  .numbered-stepper--horizontal {\n    grid-auto-flow: row;\n    grid-auto-columns: unset;\n    gap: var(--space-8, 32px);\n  }\n}\n","import { Component, h, Host, Prop, Element } from '@stencil/core';\n\n/**\n * Numbered stepper — filled soft-clay circle badges (1/2/3) paired with a\n * heading + body description per step. Sibling to `af-stepper` (which uses\n * outlined badges on a single spine connector); the numbered variant uses\n * filled badges with per-step connector segments, matching the Webflow\n * \"How it works\" marketing pattern.\n *\n * Renders children `af-numbered-stepper-item` elements horizontally on\n * desktop (auto-stacks on mobile) or vertically when `orientation=\"vertical\"`.\n * The parent auto-assigns badge numbers based on DOM order, so consumers\n * don't hand-number the steps.\n *\n * Headings use the shared `heading-size=\"card\"` scale from\n * `af-typography-lockup` (22/20px) — no bespoke font-size tokens.\n *\n * @example\n * ```html\n * <af-numbered-stepper>\n *   <af-numbered-stepper-item>\n *     <h3 slot=\"heading\">Connect your ATS</h3>\n *     <p slot=\"body\">OAuth-based hook into the tools you already use.</p>\n *   </af-numbered-stepper-item>\n *   <af-numbered-stepper-item>...</af-numbered-stepper-item>\n *   <af-numbered-stepper-item>...</af-numbered-stepper-item>\n * </af-numbered-stepper>\n * ```\n *\n * @slot - `af-numbered-stepper-item` elements.\n */\n@Component({\n  tag: 'af-numbered-stepper',\n  styleUrl: 'af-numbered-stepper.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfNumberedStepper {\n  @Element() el!: HTMLElement;\n\n  /** Layout orientation. Horizontal auto-stacks to vertical on mobile. */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  componentDidLoad() {\n    this.assignIndices();\n  }\n\n  componentDidUpdate() {\n    this.assignIndices();\n  }\n\n  private assignIndices() {\n    const items = Array.from(\n      this.el.querySelectorAll('af-numbered-stepper-item'),\n    ) as unknown as { index?: number }[];\n    items.forEach((item, i) => {\n      // Only set when the consumer hasn't explicitly numbered the step.\n      if (item.index == null || item.index === 1) {\n        item.index = i + 1;\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={`numbered-stepper numbered-stepper--${this.orientation}`}\n        role=\"list\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/af-paperclip-decoration.d.ts

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

package/dist/components/af-paperclip-decoration.js

@@ -0,0 +1,64 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
+
+const afPaperclipDecorationCss = ":host{display:block;pointer-events:none}svg{display:block;}";
+
+const AfPaperclipDecoration$1 = /*@__PURE__*/ proxyCustomElement(class AfPaperclipDecoration extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * SVG width — accepts any CSS length or unitless number (pixels).
+         * Defaults to the intrinsic viewBox width (`655`).
+         */
+        this.width = '655';
+        /**
+         * SVG height — accepts any CSS length or unitless number (pixels).
+         * Defaults to the intrinsic viewBox height (`754`).
+         */
+        this.height = '754';
+        /**
+         * Fill opacity of the paperclip shape. Defaults to `0.06` to match the
+         * marketing-site watermark treatment.
+         */
+        this.opacity = 0.06;
+        /**
+         * Fill colour. Defaults to `white` (designed for inkwell backgrounds);
+         * override for other themes, e.g. `var(--colour-brand-inkwell)` on a
+         * mist-green section.
+         */
+        this.fill = 'white';
+    }
+    render() {
+        return (h(Host, { key: 'd6dbabf8f5f23ba6d590edc88d603ac67c677404' }, h("svg", { key: 'c32dce895897561ed17814fd298ced3b5f89ac62', "aria-hidden": "true", width: this.width, height: this.height, viewBox: "0 0 655 754", fill: "none", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none" }, h("path", { key: '21db7944de968d0f8d96bdcf9cf3cc6ecdd49013', d: "M1102.14 108.279C1031.8 37.5181 939.128 -1.06817 840.61 0.447304H358.674L262.104 157.124H841.87C842.558 157.124 843.36 157.124 844.047 157.124C900.638 157.124 953.791 179.273 994 219.725C1035.24 261.225 1058.04 316.715 1058.04 376.052C1058.04 497.872 960.665 596.844 841.068 596.844H251.335C197.609 596.844 153.848 552.313 153.848 497.639C153.848 442.965 197.723 397.734 251.221 396.102H779.208L878.872 239.426H248.586C111.577 242.923 0 358.682 0 497.639C0 636.596 112.723 753.404 251.335 753.404H841.068C1045.55 753.404 1212 584.021 1212 375.935C1212 274.398 1173.05 179.39 1102.26 108.162L1102.14 108.279Z", fill: this.fill, "fill-opacity": this.opacity }))));
+    }
+    static get style() { return afPaperclipDecorationCss; }
+}, [257, "af-paperclip-decoration", {
+        "width": [1],
+        "height": [1],
+        "opacity": [2],
+        "fill": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-paperclip-decoration"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-paperclip-decoration":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfPaperclipDecoration$1);
+            }
+            break;
+    } });
+}
+
+const AfPaperclipDecoration = AfPaperclipDecoration$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfPaperclipDecoration, defineCustomElement };
+//# sourceMappingURL=af-paperclip-decoration.js.map
+
+//# sourceMappingURL=af-paperclip-decoration.js.map

package/dist/components/af-paperclip-decoration.js.map

@@ -0,0 +1 @@
+{"file":"af-paperclip-decoration.js","mappings":";;AAAA,MAAM,wBAAwB,GAAG,6DAA6D;;MCiCjFA,uBAAqB,iBAAAC,kBAAA,CAAA,MAAA,qBAAA,SAAAC,CAAA,CAAA;AALlC,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAW,KAAK;AAE7B;;;AAGG;AACK,QAAA,IAAM,CAAA,MAAA,GAAW,KAAK;AAE9B;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAW,IAAI;AAE9B;;;;AAIG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,OAAO;AAuB/B;IArBC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EACc,MAAM,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,mBAAmB,EAAC,MAAM,EAAA,EAE1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,CAAC,EAAC,imBAAimB,EACnmB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,cAAA,EACD,IAAI,CAAC,OAAO,GAC1B,CACE,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfPaperclipDecoration","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-paperclip-decoration/af-paperclip-decoration.css?tag=af-paperclip-decoration&encapsulation=shadow","src/components/af-paperclip-decoration/af-paperclip-decoration.tsx"],"sourcesContent":[":host {\n  display: block;\n  /* Decorative-only; host is sized/positioned by the consumer. */\n  pointer-events: none;\n}\n\nsvg {\n  display: block;\n  /* Let the SVG honour its own width/height attributes rather than\n     inheriting host dimensions. */\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Decorative paperclip vector graphic. Renders the left-half paperclip\n * silhouette (viewBox `0 0 655 754`) that the marketing site bleeds off\n * the right edge of inkwell hero sections.\n *\n * Purely decorative — the inner `<svg>` is `aria-hidden=\"true\"`. Size it\n * via the `width` / `height` props (they accept any CSS length, e.g.\n * `\"655\"`, `\"100%\"`, `\"50vw\"`) and position the host element in CSS.\n *\n * `fill` is white by default (intended for inkwell backgrounds); override\n * for other themes, e.g. `fill=\"var(--colour-brand-inkwell)\"` on a\n * mist-green section. `opacity` defaults to `0.06` to match the\n * watermark treatment used on `/`, `/au`, and `/platform`.\n *\n * @example\n * ```html\n * <af-section theme=\"inkwell\" padding=\"loose\" style=\"position:relative;overflow:hidden\">\n *   <af-paperclip-decoration\n *     style=\"position:absolute;bottom:-80px;right:-80px\"\n *   ></af-paperclip-decoration>\n *   <af-container style=\"position:relative;z-index:1\">\n *     <!-- hero content -->\n *   </af-container>\n * </af-section>\n * ```\n */\n@Component({\n  tag: 'af-paperclip-decoration',\n  styleUrl: 'af-paperclip-decoration.css',\n  shadow: true\n})\nexport class AfPaperclipDecoration {\n  /**\n   * SVG width — accepts any CSS length or unitless number (pixels).\n   * Defaults to the intrinsic viewBox width (`655`).\n   */\n  @Prop() width: string = '655';\n\n  /**\n   * SVG height — accepts any CSS length or unitless number (pixels).\n   * Defaults to the intrinsic viewBox height (`754`).\n   */\n  @Prop() height: string = '754';\n\n  /**\n   * Fill opacity of the paperclip shape. Defaults to `0.06` to match the\n   * marketing-site watermark treatment.\n   */\n  @Prop() opacity: number = 0.06;\n\n  /**\n   * Fill colour. Defaults to `white` (designed for inkwell backgrounds);\n   * override for other themes, e.g. `var(--colour-brand-inkwell)` on a\n   * mist-green section.\n   */\n  @Prop() fill: string = 'white';\n\n  render() {\n    return (\n      <Host>\n        <svg\n          aria-hidden=\"true\"\n          width={this.width}\n          height={this.height}\n          viewBox=\"0 0 655 754\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          preserveAspectRatio=\"none\"\n        >\n          <path\n            d=\"M1102.14 108.279C1031.8 37.5181 939.128 -1.06817 840.61 0.447304H358.674L262.104 157.124H841.87C842.558 157.124 843.36 157.124 844.047 157.124C900.638 157.124 953.791 179.273 994 219.725C1035.24 261.225 1058.04 316.715 1058.04 376.052C1058.04 497.872 960.665 596.844 841.068 596.844H251.335C197.609 596.844 153.848 552.313 153.848 497.639C153.848 442.965 197.723 397.734 251.221 396.102H779.208L878.872 239.426H248.586C111.577 242.923 0 358.682 0 497.639C0 636.596 112.723 753.404 251.335 753.404H841.068C1045.55 753.404 1212 584.021 1212 375.935C1212 274.398 1173.05 179.39 1102.26 108.162L1102.14 108.279Z\"\n            fill={this.fill}\n            fill-opacity={this.opacity}\n          />\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/af-progress-line.js

@@ -1,4 +1,4 @@
-import { A as AfProgressLine$1, d as defineCustomElement$1 } from './p-DwhGQrZK.js';
+import { A as AfProgressLine$1, d as defineCustomElement$1 } from './p-BXmiPS9x.js';
 
 const AfProgressLine = AfProgressLine$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-radio.js

@@ -1,4 +1,4 @@
-import { A as AfRadio$1, d as defineCustomElement$1 } from './p-CHLm_AuW.js';
+import { A as AfRadio$1, d as defineCustomElement$1 } from './p-CP8rLe_C.js';
 
 const AfRadio = AfRadio$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-section.js

@@ -1,49 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
-import { d as defineCustomElement$2 } from './p-CAUqW6Mp.js';
-
-const afSectionCss = ".sc-af-section-h{display:block;width:100%}.section.sc-af-section{width:100%;position:relative}.padding-none.sc-af-section{padding:0}.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-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #B09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-mistgreen-200, #e8ebeb);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-mistgreen-500, #d0d6d8);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-mistgreen-500, #d0d6d8);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.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-ghost-text:var(--colour-brand-white, #ffffff);--af-button-ghost-icon:var(--colour-brand-white, #ffffff);--af-button-ghost-stroke:var(--colour-brand-ice, #A6FFFB);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-inkwell-450, #203e45);--af-input-bg-hover:var(--colour-inkwell-400, #2b484f);--af-input-bg-disabled:var(--colour-inkwell-600, #102a2f);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--colour-brand-ice, #a6fffb);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--colour-brand-ice, #a6fffb);--af-form-control-bg:var(--colour-inkwell-450, #203e45);--af-form-control-bg-checked:var(--colour-brand-mist-green, #c6d5d1);--af-form-control-bg-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-bg-checked-disabled:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke:var(--colour-inkwell-350, #60767b);--af-form-control-stroke-hover:var(--colour-brand-white, #ffffff);--af-form-control-stroke-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-icon:var(--colour-brand-inkwell, #14343b);--af-form-control-label:var(--colour-brand-white, #ffffff)}.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-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #B09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-mistgreen-300, #dde6e3);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-mistgreen-600, #b2c0bc);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}.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-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-inkwell, #14343b);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-mistgreen-100, #f4f7f6);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-softclay-300, #d0c1a8);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-softclay-700, #8d785a);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-softclay-600, #9e8765);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label: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-ghost-text:var(--colour-brand-inkwell, #14343b);--af-button-ghost-icon:var(--colour-brand-inkwell, #14343b);--af-button-ghost-stroke:var(--colour-brand-soft-clay, #b09670);--af-input-label:var(--af-typography-body-dark);--af-input-description:var(--af-typography-body-default);--af-input-text:var(--af-typography-body-dark);--af-input-placeholder:var(--af-typography-body-subtle);--af-input-icon:var(--af-background-icon-default);--af-input-bg:var(--colour-brand-white, #ffffff);--af-input-bg-hover:var(--colour-ivory-100, #fff5e0);--af-input-bg-disabled:var(--af-background-level-1);--af-input-border:var(--af-background-border-default);--af-input-border-hover:var(--af-background-border-heavy);--af-input-border-active:var(--af-typography-body-dark);--af-input-border-error:var(--colour-error, #be292a);--af-input-error:var(--colour-error, #be292a);--af-input-focus-ring:var(--af-typography-body-dark);--af-form-control-bg:var(--colour-brand-white, #ffffff);--af-form-control-bg-checked:var(--colour-brand-inkwell, #14343b);--af-form-control-bg-disabled:var(--colour-ivory-200, #ffefcc);--af-form-control-bg-checked-disabled:var(--colour-inkwell-350, #708380);--af-form-control-stroke:var(--colour-ivory-400, #ffe3a3);--af-form-control-stroke-hover:var(--colour-brand-inkwell, #14343b);--af-form-control-stroke-disabled:var(--colour-ivory-300, #ffe9b8);--af-form-control-icon:var(--colour-brand-white, #ffffff);--af-form-control-label:var(--colour-brand-inkwell, #14343b)}@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) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /** Padding variant */
-        this.padding = 'default';
-        /** 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: '9a5e38a56170b65a8bc88191fef5cfd0c7d37cda' });
-        return (h(Host, { key: '66fa1e6000cebdf1fa4ea850156ff54ec55f5952' }, h("div", { key: '883a3f086eab3b120afed962b2fff8986aaf0b25', 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],
-        "theme": [1],
-        "container": [4]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-section", "af-container"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-section":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfSection$1);
-            }
-            break;
-        case "af-container":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { A as AfSection$1, d as defineCustomElement$1 } from './p-O26uYJSV.js';
 
 const AfSection = AfSection$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"af-section.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,olgBAAolgB;;MCY5lgBA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAA2C,SAAS;;AAG3D,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-none {\n  padding: 0;\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   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-ghost-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-stroke: var(--colour-brand-soft-clay, #B09670);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-brand-white, #ffffff);\n  --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);\n  --af-input-bg-disabled: var(--af-background-level-1);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--af-typography-body-dark);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--af-typography-body-dark);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-brand-white, #ffffff);\n  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-bg-disabled: var(--colour-mistgreen-200, #e8ebeb);\n  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n  --af-form-control-stroke: var(--colour-mistgreen-500, #d0d6d8);\n  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-stroke-disabled: var(--colour-mistgreen-500, #d0d6d8);\n  --af-form-control-icon: var(--colour-brand-white, #ffffff);\n  --af-form-control-label: var(--colour-brand-inkwell, #14343b);\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-ghost-text: var(--colour-brand-white, #ffffff);\n  --af-button-ghost-icon: var(--colour-brand-white, #ffffff);\n  --af-button-ghost-stroke: var(--colour-brand-ice, #A6FFFB);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-inkwell-450, #203e45);\n  --af-input-bg-hover: var(--colour-inkwell-400, #2b484f);\n  --af-input-bg-disabled: var(--colour-inkwell-600, #102a2f);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--colour-brand-ice, #a6fffb);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--colour-brand-ice, #a6fffb);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-inkwell-450, #203e45);\n  --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);\n  --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);\n  --af-form-control-stroke: var(--colour-inkwell-350, #60767b);\n  --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);\n  --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-icon: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-label: var(--colour-brand-white, #ffffff);\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-ghost-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-stroke: var(--colour-brand-soft-clay, #B09670);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-brand-white, #ffffff);\n  --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);\n  --af-input-bg-disabled: var(--af-background-level-1);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--af-typography-body-dark);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--af-typography-body-dark);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-brand-white, #ffffff);\n  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-bg-disabled: var(--colour-mistgreen-300, #dde6e3);\n  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n  --af-form-control-stroke: var(--colour-mistgreen-700, #9eaaa7);\n  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-stroke-disabled: var(--colour-mistgreen-600, #b2c0bc);\n  --af-form-control-icon: var(--colour-brand-white, #ffffff);\n  --af-form-control-label: var(--colour-brand-inkwell, #14343b);\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-ghost-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-brand-white, #ffffff);\n  --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);\n  --af-input-bg-disabled: var(--af-background-level-1);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--af-typography-body-dark);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--af-typography-body-dark);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-brand-white, #ffffff);\n  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-bg-disabled: var(--colour-softclay-300, #d0c1a8);\n  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n  --af-form-control-stroke: var(--colour-softclay-700, #8d785a);\n  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-stroke-disabled: var(--colour-softclay-600, #9e8765);\n  --af-form-control-icon: var(--colour-brand-white, #ffffff);\n  --af-form-control-label: 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-ghost-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-ghost-stroke: var(--colour-brand-soft-clay, #b09670);\n  \n  /* Input tokens */\n  --af-input-label: var(--af-typography-body-dark);\n  --af-input-description: var(--af-typography-body-default);\n  --af-input-text: var(--af-typography-body-dark);\n  --af-input-placeholder: var(--af-typography-body-subtle);\n  --af-input-icon: var(--af-background-icon-default);\n  --af-input-bg: var(--colour-brand-white, #ffffff);\n  --af-input-bg-hover: var(--colour-ivory-100, #fff5e0);\n  --af-input-bg-disabled: var(--af-background-level-1);\n  --af-input-border: var(--af-background-border-default);\n  --af-input-border-hover: var(--af-background-border-heavy);\n  --af-input-border-active: var(--af-typography-body-dark);\n  --af-input-border-error: var(--colour-error, #be292a);\n  --af-input-error: var(--colour-error, #be292a);\n  --af-input-focus-ring: var(--af-typography-body-dark);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-brand-white, #ffffff);\n  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-bg-disabled: var(--colour-ivory-200, #ffefcc);\n  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);\n  --af-form-control-stroke: var(--colour-ivory-400, #ffe3a3);\n  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-stroke-disabled: var(--colour-ivory-300, #ffe9b8);\n  --af-form-control-icon: var(--colour-brand-white, #ffffff);\n  --af-form-control-label: var(--colour-brand-inkwell, #14343b);\n}\n\n/* Mobile adjustments */\n/* mobile-only */\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: 'none' | '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}
+{"file":"af-section.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/af-show.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
 
 const afShowCss = ":host{display:contents}:host([hidden]){display:none !important}:host(.show-above-sm){display:none}@media (min-width: 480px){:host(.show-above-sm){display:contents}}:host(.show-above-md){display:none}@media (min-width: 768px){:host(.show-above-md){display:contents}}:host(.show-above-lg){display:none}@media (min-width: 1024px){:host(.show-above-lg){display:contents}}:host(.show-above-xl){display:none}@media (min-width: 1440px){:host(.show-above-xl){display:contents}}@media (min-width: 480px){:host(.show-below-sm){display:none}}@media (min-width: 768px){:host(.show-below-md){display:none}}@media (min-width: 1024px){:host(.show-below-lg){display:none}}@media (min-width: 1440px){:host(.show-below-xl){display:none}}";
 
@@ -16,7 +16,7 @@ const AfShow$1 = /*@__PURE__*/ proxyCustomElement(class AfShow extends H {
             [`show-above-${this.above}`]: !!this.above,
             [`show-below-${this.below}`]: !!this.below,
         };
-        return (h(Host, { key: '0e1fa54d81a3a30c5547bd08f83bf43bf357038f', class: classes }, h("slot", { key: '52af3932d49d463f0d807bb7654ecbff02f7db8e' })));
+        return (h(Host, { key: '80b73e3f33b7768227e77be1eb3337b592fc6724', class: classes }, h("slot", { key: '5f01244cc811877e0246b13983dad215bb0c3af0' })));
     }
     static get style() { return afShowCss; }
 }, [257, "af-show", {

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

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.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: '9cd9c78a4b964d2a43f9d85ff528abb63eea31e2' }, h("a", { key: '2fc0c44720aa6f58229a5ad285269ab7b73c07cc', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
+        return (h(Host, { key: 'e80a4427592546a5c5155d23108840ec2e34ecd3' }, h("a", { key: 'd734009513a61339c2a64906f8e74a22efc290b5', 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-spacer.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
 
 const afSpacerCss = ":host{display:block;box-sizing:border-box;flex-shrink:0}:host([hidden]){display:none}";
 
@@ -38,7 +38,7 @@ const AfSpacer$1 = /*@__PURE__*/ proxyCustomElement(class AfSpacer extends H {
                 style.height = sizeValue;
             }
         }
-        return h(Host, { key: '667181ea8f243b47e0a54fbfc5441b7551d69082', style: style, "aria-hidden": "true" });
+        return h(Host, { key: '2058a8599ce5dbf5dd3a2b9d973de30815058a3b', style: style, "aria-hidden": "true" });
     }
     static get style() { return afSpacerCss; }
 }, [257, "af-spacer", {

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

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
-import { d as defineCustomElement$2 } from './p-CAUqW6Mp.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
+import { d as defineCustomElement$2 } from './p-CYKk6Qhi.js';
 
 const afSplitSectionCss = ".sc-af-split-section-h{display:block;width:100%}.split-section.sc-af-split-section{position:relative;width:100%}.padding-none.sc-af-split-section{padding:0}.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}}";
 
@@ -27,14 +27,14 @@ const AfSplitSection$1 = /*@__PURE__*/ proxyCustomElement(class AfSplitSection e
         this.container = true;
     }
     render() {
-        const content = h("slot", { key: 'de39e81b9bc88da7323663c248faf7a4faf20f7f' });
+        const content = h("slot", { key: 'c87789ab65b2406b2eefc66dec06800dfc0d26de' });
         // 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: '4b140cb28dd9ec3dd2a5148737aada241dbbfb1d' }, h("div", { key: '7eeb358bbae0e98e403e39020482505248c3bb69', class: `split-section padding-${this.padding} top-theme-${this.topTheme}`, style: backgroundStyle }, this.container ? (h("af-container", null, content)) : content)));
+        return (h(Host, { key: '194e34213dc52bb9e41f121873a983ba32eb27c9' }, h("div", { key: 'c987cd1f760d33e7cb7f8c150d7de151bd5a06bd', 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", {

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

@@ -1 +1 @@
-{"file":"af-split-section.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,ofAAof;;ACI9gB;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,GAA2C,SAAS;;AAG3D,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-none {\n  padding: 0;\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/* mobile-only */\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: 'none' | '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}
+{"file":"af-split-section.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,ofAAof;;ACG9gB;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,GAAY,SAAS;;AAG5B,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-none {\n  padding: 0;\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/* mobile-only */\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';\nimport type { Padding, Theme } from '../../types';\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: Padding = '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-stack.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
 
 const afStackCss = ":host{display:flex;box-sizing:border-box}:host([hidden]){display:none}";
 
@@ -57,7 +57,7 @@ const AfStack$1 = /*@__PURE__*/ proxyCustomElement(class AfStack extends H {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (h(Host, { key: '757fee5201ab0831e7dc51aa0f7dc2cad4279f95', style: style }, h("slot", { key: '06e94b64a308a3465e54d79e1a5ffb3758c6e626' })));
+        return (h(Host, { key: 'c851a39e7fc6c8a256c341a67bcac60ecbdb63b8', style: style }, h("slot", { key: 'a0e45727aacbbb4a0fe2d9396120bbae94cc3a46' })));
     }
     static get style() { return afStackCss; }
 }, [257, "af-stack", {

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

@@ -1 +1 @@
-{"file":"af-stack.js","mappings":";;AAAA,MAAM,UAAU,GAAG,wEAAwE;;MCkB9EA,SAAO,iBAAAC,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;AAIG;AACK,QAAA,IAAS,CAAA,SAAA,GAAc,UAAU;AAEzC;;;AAGG;AACK,QAAA,IAAG,CAAA,GAAA,GAAQ,GAAG;AAEtB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAU,SAAS;AAEhC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,OAAO;AAElC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAmC9B;IAjCC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAA0B;AACtC,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,QAAQ,EAAE,UAAU;SACrB;AAED,QAAA,MAAM,UAAU,GAA4B;AAC1C,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,eAAe;AACxB,YAAA,MAAM,EAAE,cAAc;AACtB,YAAA,MAAM,EAAE,cAAc;SACvB;AAED,QAAA,MAAM,KAAK,GAAG;AACZ,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU,GAAG,QAAQ,GAAG,KAAK;AAC/D,YAAA,GAAG,EAAE,CAAA,YAAA,EAAe,IAAI,CAAC,GAAG,CAAG,CAAA,CAAA;AAC/B,YAAA,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,YAAA,cAAc,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;YACxC,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ;SACd;QAE3B,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,KAAK,EAAA,EAChB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfStack","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-stack/af-stack.css?tag=af-stack&encapsulation=shadow","src/components/af-stack/af-stack.tsx"],"sourcesContent":[":host {\n  display: flex;\n  box-sizing: border-box;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Gap = '1' | '2' | '3' | '4' | '5' | '6' | '8';\ntype Direction = 'vertical' | 'horizontal';\ntype Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\ntype Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n\n/**\n * Stack layout component for vertical or horizontal flex layouts with consistent gap spacing.\n * Uses design tokens for gap values.\n *\n * @slot - Content to stack\n */\n@Component({\n  tag: 'af-stack',\n  styleUrl: 'af-stack.css',\n  shadow: true,\n})\nexport class AfStack {\n  /**\n   * Stack direction.\n   * - 'vertical': Items stack top to bottom (flex-direction: column)\n   * - 'horizontal': Items stack left to right (flex-direction: row)\n   */\n  @Prop() direction: Direction = 'vertical';\n\n  /**\n   * Gap between items using space tokens (1-8).\n   * Maps to --space-1 through --space-8 (4px to 32px).\n   */\n  @Prop() gap: Gap = '4';\n\n  /**\n   * Align items on the cross axis.\n   */\n  @Prop() align: Align = 'stretch';\n\n  /**\n   * Justify content on the main axis.\n   */\n  @Prop() justify: Justify = 'start';\n\n  /**\n   * Whether items should wrap to the next line.\n   */\n  @Prop() wrap: boolean = false;\n\n  render() {\n    const alignMap: Record<Align, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      baseline: 'baseline',\n    };\n\n    const justifyMap: Record<Justify, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      between: 'space-between',\n      around: 'space-around',\n      evenly: 'space-evenly',\n    };\n\n    const style = {\n      display: 'flex',\n      flexDirection: this.direction === 'vertical' ? 'column' : 'row',\n      gap: `var(--space-${this.gap})`,\n      alignItems: alignMap[this.align],\n      justifyContent: justifyMap[this.justify],\n      flexWrap: this.wrap ? 'wrap' : 'nowrap',\n    } as Record<string, string>;\n\n    return (\n      <Host style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"af-stack.js","mappings":";;AAAA,MAAM,UAAU,GAAG,wEAAwE;;MCkB9EA,SAAO,iBAAAC,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;AAIG;AACK,QAAA,IAAS,CAAA,SAAA,GAAc,UAAU;AAEzC;;;AAGG;AACK,QAAA,IAAG,CAAA,GAAA,GAAQ,GAAG;AAEtB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAU,SAAS;AAEhC;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,OAAO;AAElC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAmC9B;IAjCC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAA0B;AACtC,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,QAAQ,EAAE,UAAU;SACrB;AAED,QAAA,MAAM,UAAU,GAA4B;AAC1C,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,eAAe;AACxB,YAAA,MAAM,EAAE,cAAc;AACtB,YAAA,MAAM,EAAE,cAAc;SACvB;AAED,QAAA,MAAM,KAAK,GAAG;AACZ,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU,GAAG,QAAQ,GAAG,KAAK;AAC/D,YAAA,GAAG,EAAE,CAAA,YAAA,EAAe,IAAI,CAAC,GAAG,CAAG,CAAA,CAAA;AAC/B,YAAA,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,YAAA,cAAc,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;YACxC,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ;SACd;QAE3B,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,KAAK,EAAA,EAChB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfStack","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-stack/af-stack.css?tag=af-stack&encapsulation=shadow","src/components/af-stack/af-stack.tsx"],"sourcesContent":[":host {\n  display: flex;\n  box-sizing: border-box;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport type { Gap } from '../../types';\n\ntype Direction = 'vertical' | 'horizontal';\ntype Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\ntype Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n\n/**\n * Stack layout component for vertical or horizontal flex layouts with consistent gap spacing.\n * Uses design tokens for gap values.\n *\n * @slot - Content to stack\n */\n@Component({\n  tag: 'af-stack',\n  styleUrl: 'af-stack.css',\n  shadow: true,\n})\nexport class AfStack {\n  /**\n   * Stack direction.\n   * - 'vertical': Items stack top to bottom (flex-direction: column)\n   * - 'horizontal': Items stack left to right (flex-direction: row)\n   */\n  @Prop() direction: Direction = 'vertical';\n\n  /**\n   * Gap between items using space tokens (1-8).\n   * Maps to --space-1 through --space-8 (4px to 32px).\n   */\n  @Prop() gap: Gap = '4';\n\n  /**\n   * Align items on the cross axis.\n   */\n  @Prop() align: Align = 'stretch';\n\n  /**\n   * Justify content on the main axis.\n   */\n  @Prop() justify: Justify = 'start';\n\n  /**\n   * Whether items should wrap to the next line.\n   */\n  @Prop() wrap: boolean = false;\n\n  render() {\n    const alignMap: Record<Align, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      baseline: 'baseline',\n    };\n\n    const justifyMap: Record<Justify, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      between: 'space-between',\n      around: 'space-around',\n      evenly: 'space-evenly',\n    };\n\n    const style = {\n      display: 'flex',\n      flexDirection: this.direction === 'vertical' ? 'column' : 'row',\n      gap: `var(--space-${this.gap})`,\n      alignItems: alignMap[this.align],\n      justifyContent: justifyMap[this.justify],\n      flexWrap: this.wrap ? 'wrap' : 'nowrap',\n    } as Record<string, string>;\n\n    return (\n      <Host style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

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

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

package/dist/components/af-stat.js

@@ -0,0 +1,53 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
+import { d as defineCustomElement$3 } from './p-CX0pktY8.js';
+import { d as defineCustomElement$2 } from './p-BgXXQG75.js';
+
+const afStatCss = ":host{display:block;flex:1 1 0;min-width:0;border-left:2px solid var(--af-background-border-active, var(--colour-brand-soft-clay, #b09670));padding-left:var(--space-4, 16px)}.stat{display:flex;flex-direction:column;gap:var(--space-2, 8px);min-height:76px;justify-content:center}.stat__value{--af-typography-heading-primary:var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));letter-spacing:-0.88px;white-space:nowrap}";
+
+const AfStat$1 = /*@__PURE__*/ proxyCustomElement(class AfStat extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    render() {
+        return (h(Host, { key: '8ad0756b599ad60c0761bf4dfc7f40df26fd302e' }, h("div", { key: '839b8e6e4e20a87061db4cc9e1a595d9722ec306', class: "stat" }, h("af-heading", { key: 'eaf23a804729cd381184d2a290fe7af4682166cc', level: "2", class: "stat__value" }, this.value), h("af-text", { key: '67893f26ba74118ab99329771dd5db211d3cfc56', variant: "medium", class: "stat__label" }, this.label))));
+    }
+    static get style() { return afStatCss; }
+}, [257, "af-stat", {
+        "value": [1],
+        "label": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-stat", "af-heading", "af-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-stat":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfStat$1);
+            }
+            break;
+        case "af-heading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "af-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const AfStat = AfStat$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfStat, defineCustomElement };
+//# sourceMappingURL=af-stat.js.map
+
+//# sourceMappingURL=af-stat.js.map

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

@@ -0,0 +1 @@
+{"file":"af-stat.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,8bAA8b;;MCencA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;;;;;;;;IAOjB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACf,CAAY,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,GAAG,EAAC,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,KAAK,CAAc,EACnE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,KAAK,CAAW,CAChE,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfStat","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-stat/af-stat.css?tag=af-stat&encapsulation=shadow","src/components/af-stat/af-stat.tsx"],"sourcesContent":[":host {\n  display: block;\n  flex: 1 1 0;\n  min-width: 0;\n  /* Left accent border mirrors the website's stats-row styling. Reads\n     the active border colour from whatever theme the ancestor sets. */\n  border-left: 2px solid var(--af-background-border-active, var(--colour-brand-soft-clay, #b09670));\n  padding-left: var(--space-4, 16px);\n}\n\n.stat {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2, 8px);\n  min-height: 76px;\n  justify-content: center;\n}\n\n/* Nudge the value towards the theme's secondary heading colour for that\n   gold/ochre accent on light themes — matches af-testimonial-stat. */\n.stat__value {\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","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Individual stat — a large value (e.g. \"1B+\") paired with a descriptive label.\n *\n * Intended as a slotted child of `af-stats-row`, but renders standalone too.\n * Colour is inherited from the ancestor theme context (`af-section` /\n * `af-card` / `af-theme-override`) via the `--af-typography-*` tokens that\n * `af-heading` and `af-text` already consume — no theme prop needed here.\n */\n@Component({\n  tag: 'af-stat',\n  styleUrl: 'af-stat.css',\n  shadow: true,\n})\nexport class AfStat {\n  /** The statistic headline value (e.g. \"1B+\", \"95%\", \"10+\"). */\n  @Prop() value!: string;\n\n  /** Description / caption rendered beneath the value. */\n  @Prop() label!: string;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"stat\">\n          <af-heading level=\"2\" class=\"stat__value\">{this.value}</af-heading>\n          <af-text variant=\"medium\" class=\"stat__label\">{this.label}</af-text>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/af-stats-row.d.ts

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

package/dist/components/af-stats-row.js

@@ -0,0 +1,37 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
+
+const afStatsRowCss = ".sc-af-stats-row-h{display:block;width:100%}.stats-row.sc-af-stats-row{display:flex;flex-wrap:wrap;gap:var(--space-6, 24px);align-items:stretch}.stats-row.sc-af-stats-row af-stat.sc-af-stats-row{flex:1 1 calc(50% - var(--space-6, 24px));min-width:0}@media (min-width: 768px){.stats-row.sc-af-stats-row af-stat.sc-af-stats-row{flex:1 1 0}}@media (max-width: 480px){.stats-row.sc-af-stats-row af-stat.sc-af-stats-row{flex:1 1 100%}}";
+
+const AfStatsRow$1 = /*@__PURE__*/ proxyCustomElement(class AfStatsRow extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    render() {
+        return (h(Host, { key: '1185dc84bcb132d6b4727e75f050e1441ff1bc5d' }, h("div", { key: '3d2671840ea84d06b37d4828387a2da2c8d7c85b', class: "stats-row" }, h("slot", { key: '192d3629812be1a1d3939ad8c37dd1fd1c5b7fa7' }))));
+    }
+    static get style() { return afStatsRowCss; }
+}, [262, "af-stats-row"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-stats-row"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-stats-row":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfStatsRow$1);
+            }
+            break;
+    } });
+}
+
+const AfStatsRow = AfStatsRow$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfStatsRow, defineCustomElement };
+//# sourceMappingURL=af-stats-row.js.map
+
+//# sourceMappingURL=af-stats-row.js.map

package/dist/components/af-stats-row.js.map

@@ -0,0 +1 @@
+{"file":"af-stats-row.js","mappings":";;AAAA,MAAM,aAAa,GAAG,gbAAgb;;MCsBzbA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;;IACrB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["AfStatsRow","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-stats-row/af-stats-row.css?tag=af-stats-row&encapsulation=scoped","src/components/af-stats-row/af-stats-row.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.stats-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-6, 24px);\n  align-items: stretch;\n}\n\n/* Ensure each stat claims an equal share of the row. Descendant (not\n   child) combinator — see AGENTS.md \"Stencil scoped-slot `>` gotcha\". */\n.stats-row af-stat {\n  flex: 1 1 calc(50% - var(--space-6, 24px));\n  min-width: 0;\n}\n\n/* On wider viewports, prefer 4-up without wrapping when there's room. */\n@media (min-width: 768px) {\n  .stats-row af-stat {\n    flex: 1 1 0;\n  }\n}\n\n/* Narrow: stack to a single column for readability. */\n@media (max-width: 480px) {\n  .stats-row af-stat {\n    flex: 1 1 100%;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * Layout container for a horizontal row of `af-stat` children.\n *\n * Flex row that wraps to a grid on narrow viewports. Uses `scoped: true`\n * so slotted `<af-stat>` children stay in the light DOM and inherit the\n * ancestor theme (`af-section`) via the cascaded `.theme-*` class.\n *\n * Intentionally has **no `theme` prop** — a stats row is always flush\n * against its section background, so a local theme would fight the\n * ancestor. If you need a different background for the row, wrap it in\n * its own `af-section` or `af-theme-override`.\n *\n * @slot - `af-stat` elements (typically 3–4 for a balanced row).\n */\n@Component({\n  tag: 'af-stats-row',\n  styleUrl: 'af-stats-row.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfStatsRow {\n  render() {\n    return (\n      <Host>\n        <div class=\"stats-row\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/af-stepper-step.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CqQyDZ-4.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-DOgb6SUj.js';
 
 const afStepperStepCss = ".sc-af-stepper-step-h{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1 1 0;min-width:0;padding:0 16px;position:relative;z-index:1}.stepper-step__badge.sc-af-stepper-step{width:48px;height:48px;border-radius:50%;border:1px solid var(--colour-brand-inkwell, #14343b);background:var(--colour-background-white, #ffffff);display:inline-flex;align-items:center;justify-content:center;font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:500;font-size:20px;color:var(--colour-brand-inkwell, #14343b);margin-bottom:24px;flex-shrink:0}.stepper-step__content.sc-af-stepper-step{display:flex;flex-direction:column;gap:12px;max-width:320px}.stepper-step__heading.sc-af-stepper-step{font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:24px;line-height:1.2;letter-spacing:-0.02em;color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b))}.stepper-step__body.sc-af-stepper-step{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-size:16px;line-height:1.5;color:var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b))}.sc-af-stepper-step-h :where(h1,h2.sc-af-stepper-step,h3.sc-af-stepper-step,h4.sc-af-stepper-step,h5.sc-af-stepper-step,h6).sc-af-stepper-step,.sc-af-stepper-step-h .sc-af-stepper-step:where(p){font:inherit;color:inherit;margin:0}.stepper--vertical.sc-af-stepper-step-h,.stepper--vertical .sc-af-stepper-step-h{flex-direction:row;align-items:flex-start;text-align:left;gap:24px;padding:0}.stepper--vertical.sc-af-stepper-step-h .stepper-step__badge.sc-af-stepper-step,.stepper--vertical .sc-af-stepper-step-h .stepper-step__badge.sc-af-stepper-step{margin-bottom:0}@media (max-width: 767px){.sc-af-stepper-step-h{flex-direction:row;align-items:flex-start;text-align:left;gap:24px;padding:0}.stepper-step__badge.sc-af-stepper-step{margin-bottom:0}}";
 
@@ -15,7 +15,7 @@ const AfStepperStep$1 = /*@__PURE__*/ proxyCustomElement(class AfStepperStep ext
         this.index = 1;
     }
     render() {
-        return (h(Host, { key: '36a45ffc037fb0efd1352fb1aa8482205faada04' }, h("span", { key: '93a75d705f40f920b3480607dfe2ed9f4ba37e55', class: "stepper-step__badge" }, this.index), h("div", { key: '2eb52b18397349da4fd3a9322fb7f1af0a271b4c', class: "stepper-step__content" }, h("div", { key: 'cf0fff2d73189a63e675017b1d431d2edc03e0c6', class: "stepper-step__heading" }, h("slot", { key: '6649a32664e82bc04e6f53c05d92050ad9b828d6', name: "heading" })), h("div", { key: '8f66cf21ff1b3e1bb4e817e6e85b418c1bdffd24', class: "stepper-step__body" }, h("slot", { key: 'a38c1c2c19d5d821ca513f098cd1b4fe6d007a92', name: "body" })))));
+        return (h(Host, { key: '80d8f05130125e97dc3158f66c31fa07c4133a77' }, h("span", { key: 'f39cbbdf710035e6f0dd6e6f40345316f23421a1', class: "stepper-step__badge" }, this.index), h("div", { key: 'dc6772b131b6b058b40367f93a41458e75fa6029', class: "stepper-step__content" }, h("div", { key: '8b9bd944a5a3f956d2311b02a5b07d5afc9835a8', class: "stepper-step__heading" }, h("slot", { key: 'e16e133764c32ee00e99a2963624b242f4e99b3e', name: "heading" })), h("div", { key: 'fd124afd080b392b03c9f193cb2a210224b7715e', class: "stepper-step__body" }, h("slot", { key: 'cf09b3c7f8551f35df808b41205ba4ec15d2e71f', name: "body" })))));
     }
     static get style() { return afStepperStepCss; }
 }, [262, "af-stepper-step", {