@affinda/wc 0.1.0 → 0.2.0

package/dist/collection/components/af-numbered-stepper-item/af-numbered-stepper-item.css

@@ -0,0 +1,113 @@
+/* Horizontal default: centered column — badge on top, lockup below.
+ * The connector is a 1px line on the right half of the marker row that
+ * reaches into the next sibling's marker row, so visually the line spans
+ * between the two badges. Hidden on :last-child. */
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 0 var(--space-6, 24px);
+  min-width: 0;
+  color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343B));
+}
+
+.numbered-stepper-item__marker-row {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: var(--space-6, 24px);
+}
+
+.numbered-stepper-item__badge {
+  position: relative;
+  z-index: 1;
+}
+
+/* Connector segment between this badge and the next one.
+ * 20px = half of 40px badge. We offset by that from the centre so the line
+ * starts at the edge of the badge and stretches off the right side of the
+ * host, joining the next item's mirror-offset half. */
+.numbered-stepper-item__connector {
+  position: absolute;
+  left: calc(50% + 20px);
+  right: calc(-50% + 20px);
+  top: 50%;
+  height: 1px;
+  background: var(--colour-brand-soft-clay, #B09670);
+}
+
+/* Last item doesn't draw a connector. */
+:host(:last-child) .numbered-stepper-item__connector {
+  display: none;
+}
+
+.numbered-stepper-item__lockup {
+  display: block;
+  max-width: 320px;
+}
+
+/* Vertical parent orientation: badges in a column, text to the right.
+ * Connector runs vertically along the badge column. */
+:host-context(.numbered-stepper--vertical) {
+  flex-direction: row;
+  align-items: flex-start;
+  text-align: left;
+  gap: var(--space-6, 24px);
+  padding: 0;
+}
+
+:host-context(.numbered-stepper--vertical) .numbered-stepper-item__marker-row {
+  width: auto;
+  flex-shrink: 0;
+  margin-bottom: 0;
+  /* Pin to top so subsequent text content flows naturally beside it. */
+  align-self: stretch;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+:host-context(.numbered-stepper--vertical) .numbered-stepper-item__connector {
+  left: 50%;
+  right: auto;
+  top: calc(var(--space-10, 40px) + var(--space-1, 4px));
+  bottom: calc(var(--space-8, 32px) * -1);
+  height: auto;
+  width: 1px;
+  transform: translateX(-50%);
+}
+
+:host-context(.numbered-stepper--vertical) .numbered-stepper-item__lockup {
+  max-width: none;
+  flex: 1 1 auto;
+  /* Align text baseline roughly to the badge centre. */
+  padding-top: var(--space-2, 8px);
+}
+
+/* ≤ mobile — horizontal collapses to a vertical row-layout for the item too. */
+@media (max-width: 767px) {
+  :host-context(.numbered-stepper--horizontal) {
+    flex-direction: row;
+    align-items: flex-start;
+    text-align: left;
+    gap: var(--space-6, 24px);
+    padding: 0;
+  }
+
+  :host-context(.numbered-stepper--horizontal) .numbered-stepper-item__marker-row {
+    width: auto;
+    flex-shrink: 0;
+    margin-bottom: 0;
+  }
+
+  :host-context(.numbered-stepper--horizontal) .numbered-stepper-item__connector {
+    display: none;
+  }
+
+  :host-context(.numbered-stepper--horizontal) .numbered-stepper-item__lockup {
+    max-width: none;
+    flex: 1 1 auto;
+    padding-top: var(--space-2, 8px);
+  }
+}

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

@@ -0,0 +1,66 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A single step within an `af-numbered-stepper`. Renders a filled soft-clay
+ * circle badge (via `af-number-badge`) alongside a heading + body lockup.
+ *
+ * The parent `af-numbered-stepper` auto-assigns the `index` prop based on
+ * DOM order. Pass `index` explicitly to override.
+ *
+ * Heading scale is the shared `card` variant from `af-typography-lockup`
+ * (22/20px) — the same ladder step used by diff-card, related-card, and
+ * other card-title uses across the design system.
+ *
+ * @slot heading - Step title (h3 or h4 recommended for semantics).
+ * @slot body - Step description paragraph(s).
+ */
+export class AfNumberedStepperItem {
+    constructor() {
+        /**
+         * Step number shown in the badge. Auto-assigned by the parent stepper if
+         * not explicitly set.
+         */
+        this.index = 1;
+    }
+    render() {
+        // The badge supports 1–10; clamp for safety so we never pass a bad prop.
+        const clamped = Math.max(1, Math.min(10, this.index | 0));
+        return (h(Host, { key: '6aa07b74803b11d666b724fe2c96149860c58810', role: "listitem" }, h("div", { key: 'ddf3ea9200c5015dbefb53a2dc77ade6f634e24e', class: "numbered-stepper-item__marker-row", "aria-hidden": "true" }, h("af-number-badge", { key: 'b778abffa4a41bbea6728920c61e1f2d2155662a', class: "numbered-stepper-item__badge", number: clamped, variant: "inCircle", size: 40 }), h("span", { key: 'e3f74fb9b1bc4fe999095878bdbe10f47694f8d8', class: "numbered-stepper-item__connector" })), h("af-typography-lockup", { key: '6f4688fc503175db37d5a91fa626b43692e4858a', class: "numbered-stepper-item__lockup", "heading-size": "card", "text-alignment": "center" }, h("slot", { key: 'd628fb339348c23c988e4fb69bc647105d7041f6', name: "heading" }), h("span", { key: 'a5b58d21e44537de9c32b22a754e0f4a8ef96007', slot: "description" }, h("slot", { key: '17607c180f777c5f829ea9d9919c5a7187718f2d', name: "body" })))));
+    }
+    static get is() { return "af-numbered-stepper-item"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-numbered-stepper-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-numbered-stepper-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "index": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step number shown in the badge. Auto-assigned by the parent stepper if\nnot explicitly set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "index",
+                "defaultValue": "1"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-numbered-stepper-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-numbered-stepper-item.js","sourceRoot":"","sources":["../../../src/components/af-numbered-stepper-item/af-numbered-stepper-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;;;GAaG;AAOH,MAAM,OAAO,qBAAqB;IANlC;QAOE;;;WAGG;QACsB,UAAK,GAAW,CAAC,CAAC;KA8B5C;IA5BC,MAAM;QACJ,yEAAyE;QACzE,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAA2C,CAAC;QAEpG,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,4DAAK,KAAK,EAAC,mCAAmC,iBAAa,MAAM;gBAC/D,wEACE,KAAK,EAAC,8BAA8B,EACpC,MAAM,EAAE,OAAO,EACf,OAAO,EAAC,UAAU,EAClB,IAAI,EAAE,EAAE,GACS;gBACnB,6DAAM,KAAK,EAAC,kCAAkC,GAAQ,CAClD;YACN,6EACE,KAAK,EAAC,+BAA+B,kBACxB,MAAM,oBACJ,QAAQ;gBAEvB,6DAAM,IAAI,EAAC,SAAS,GAAQ;gBAC5B,6DAAM,IAAI,EAAC,aAAa;oBACtB,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACpB,CACc,CAClB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A single step within an `af-numbered-stepper`. Renders a filled soft-clay\n * circle badge (via `af-number-badge`) alongside a heading + body lockup.\n *\n * The parent `af-numbered-stepper` auto-assigns the `index` prop based on\n * DOM order. Pass `index` explicitly to override.\n *\n * Heading scale is the shared `card` variant from `af-typography-lockup`\n * (22/20px) — the same ladder step used by diff-card, related-card, and\n * other card-title uses across the design system.\n *\n * @slot heading - Step title (h3 or h4 recommended for semantics).\n * @slot body - Step description paragraph(s).\n */\n@Component({\n  tag: 'af-numbered-stepper-item',\n  styleUrl: 'af-numbered-stepper-item.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfNumberedStepperItem {\n  /**\n   * Step number shown in the badge. Auto-assigned by the parent stepper if\n   * not explicitly set.\n   */\n  @Prop({ reflect: true }) index: number = 1;\n\n  render() {\n    // The badge supports 1–10; clamp for safety so we never pass a bad prop.\n    const clamped = Math.max(1, Math.min(10, this.index | 0)) as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;\n\n    return (\n      <Host role=\"listitem\">\n        <div class=\"numbered-stepper-item__marker-row\" aria-hidden=\"true\">\n          <af-number-badge\n            class=\"numbered-stepper-item__badge\"\n            number={clamped}\n            variant=\"inCircle\"\n            size={40}\n          ></af-number-badge>\n          <span class=\"numbered-stepper-item__connector\"></span>\n        </div>\n        <af-typography-lockup\n          class=\"numbered-stepper-item__lockup\"\n          heading-size=\"card\"\n          text-alignment=\"center\"\n        >\n          <slot name=\"heading\"></slot>\n          <span slot=\"description\">\n            <slot name=\"body\"></slot>\n          </span>\n        </af-typography-lockup>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -50,7 +50,7 @@ export class AfPaperclipDecoration {
         this.fill = 'white';
     }
     render() {
-        return (h(Host, { key: '679d13bd4d4824752eb722a39fda943553da8a30' }, h("svg", { key: 'dc6ea4d9fe9c09512d48b09c0a95ec8fd6a4f2f2', "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: '0b9121fa25531dd6725b0db1e2174d3df9bafc3b', 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 }))));
+        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 is() { return "af-paperclip-decoration"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,10 +21,10 @@ export class AfProgressLine {
         // Clamp progress between 0 and 1
         const clampedProgress = Math.max(0, Math.min(1, this.progress));
         const progressPercent = clampedProgress * 100;
-        return (h(Host, { key: 'e831de02f8d1263448cf0441085cee677230374e' }, h("div", { key: '57eec77244c1f0c2a1a763d04b22751651069dbc', class: {
+        return (h(Host, { key: '7d8dc150bf0fa9647926d2b6bcf2ff7d37527e46' }, h("div", { key: '5d09009a197599029b15ae3f601c7243ef07f8e3', class: {
                 'progress-line': true,
                 [`progress-line--${this.orientation}`]: true,
-            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: '9b3229746fef82f644953a189959c109104be511', class: "progress-line__background" }), h("div", { key: '0f5ec3a4a51b350b3b9cb26ea446167a40ce4ae4', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
+            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: '9f861e5aec9f676e2cf2740bd5b83a2c220eec86', class: "progress-line__background" }), h("div", { key: 'bb5457650f19f05435330d429950a3b7f7946fb8', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
     }
     static get is() { return "af-progress-line"; }
     static get encapsulation() { return "scoped"; }

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

@@ -13,8 +13,8 @@ export class AfSection {
         this.container = true;
     }
     render() {
-        const content = h("slot", { key: 'a67ae3c0d94b8b4024ae3cb7c5c0e4f916e1f309' });
-        return (h(Host, { key: 'dcdea86aa5b6ce4e3cfe951a90fb441f8a16f7e4' }, h("div", { key: '478836c1570fe89c73405651e03828104a6c069f', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (h("af-container", null, content)) : content)));
+        const content = h("slot", { key: '68d5433974bb7213d103836ed6f9b06a067fc52a' });
+        return (h(Host, { key: 'd4e9437832b34127a5ed32d8eb6a9d9b09b887e7' }, h("div", { key: '92d24d2430a57a5e592cccdfea3e85daff729bea', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (h("af-container", null, content)) : content)));
     }
     static get is() { return "af-section"; }
     static get encapsulation() { return "scoped"; }
@@ -34,9 +34,15 @@ export class AfSection {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'none' | 'tight' | 'default' | 'loose'",
+                    "original": "Padding",
                     "resolved": "\"default\" | \"loose\" | \"none\" | \"tight\"",
-                    "references": {}
+                    "references": {
+                        "Padding": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Padding"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -54,9 +60,15 @@ export class AfSection {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory'",
+                    "original": "Theme",
                     "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | \"white-ivory\"",
-                    "references": {}
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Theme"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,

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

@@ -1 +1 @@
-{"version":3,"file":"af-section.js","sourceRoot":"","sources":["../../../src/components/af-section/af-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAOH,MAAM,OAAO,SAAS;IANtB;QAOE,sBAAsB;QACd,YAAO,GAA2C,SAAS,CAAC;QAEpE,2EAA2E;QACnE,UAAK,GAAqE,OAAO,CAAC;QAE1F,6CAA6C;QACrC,cAAS,GAAY,IAAI,CAAC;KAenC;IAbC,MAAM;QACJ,MAAM,OAAO,GAAG,8DAAa,CAAC;QAE9B,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,IAC9D,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,wBAAe,OAAO,CAAgB,CACvC,CAAC,CAAC,CAAC,OAAO,CACP,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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","sourceRoot":"","sources":["../../../src/components/af-section/af-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;GAGG;AAOH,MAAM,OAAO,SAAS;IANtB;QAOE,sBAAsB;QACd,YAAO,GAAY,SAAS,CAAC;QAErC,2EAA2E;QACnE,UAAK,GAAU,OAAO,CAAC;QAE/B,6CAA6C;QACrC,cAAS,GAAY,IAAI,CAAC;KAenC;IAbC,MAAM;QACJ,MAAM,OAAO,GAAG,8DAAa,CAAC;QAE9B,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,IAC9D,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,wBAAe,OAAO,CAAgB,CACvC,CAAC,CAAC,CAAC,OAAO,CACP,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\nimport type { Padding, Theme } from '../../types';\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: Padding = 'default';\n\n  /** Theme - sets background color and provides theme context to children */\n  @Prop() theme: Theme = '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"]}

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

@@ -18,7 +18,7 @@ export class AfShow {
             [`show-above-${this.above}`]: !!this.above,
             [`show-below-${this.below}`]: !!this.below,
         };
-        return (h(Host, { key: 'f1325c8342cdd48103996664aa410ba6da9c6566', class: classes }, h("slot", { key: '0ce4cacaa80ef10104549af9fa9068ea7d28a406' })));
+        return (h(Host, { key: '80b73e3f33b7768227e77be1eb3337b592fc6724', class: classes }, h("slot", { key: '5f01244cc811877e0246b13983dad215bb0c3af0' })));
     }
     static get is() { return "af-show"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,7 +29,7 @@ export class AfSocialLink {
         }
     }
     render() {
-        return (h(Host, { key: '1637b2b00bf3808ad48979fde1248a6baae16d50' }, h("a", { key: '57cec6aa80ee7cedccdd03ac40f4931c6012bb48', 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 is() { return "af-social-link"; }
     static get encapsulation() { return "scoped"; }

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

@@ -34,7 +34,7 @@ export class AfSpacer {
                 style.height = sizeValue;
             }
         }
-        return h(Host, { key: '17bd07b1aeb2346f614d3cf5c663f545622a82af', style: style, "aria-hidden": "true" });
+        return h(Host, { key: '2058a8599ce5dbf5dd3a2b9d973de30815058a3b', style: style, "aria-hidden": "true" });
     }
     static get is() { return "af-spacer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,14 +26,14 @@ export class AfSplitSection {
         this.container = true;
     }
     render() {
-        const content = h("slot", { key: 'bb153079c8b48a5f2a8bb093f3344f1ed58448f0' });
+        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: 'ec4824dfd25f5e9122d7cfd4ad4df8768b949028' }, h("div", { key: '4de289849c8cb6cb7b70446fe6c4b8ca0f5ae648', 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 is() { return "af-split-section"; }
     static get encapsulation() { return "scoped"; }
@@ -57,8 +57,9 @@ export class AfSplitSection {
                     "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | \"white-ivory\"",
                     "references": {
                         "Theme": {
-                            "location": "global",
-                            "id": "global::Theme"
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Theme"
                         }
                     }
                 },
@@ -82,8 +83,9 @@ export class AfSplitSection {
                     "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | \"white-ivory\"",
                     "references": {
                         "Theme": {
-                            "location": "global",
-                            "id": "global::Theme"
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Theme"
                         }
                     }
                 },
@@ -103,9 +105,15 @@ export class AfSplitSection {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'none' | 'tight' | 'default' | 'loose'",
+                    "original": "Padding",
                     "resolved": "\"default\" | \"loose\" | \"none\" | \"tight\"",
-                    "references": {}
+                    "references": {
+                        "Padding": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Padding"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,

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

@@ -1 +1 @@
-{"version":3,"file":"af-split-section.js","sourceRoot":"","sources":["../../../src/components/af-split-section/af-split-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD,sCAAsC;AACtC,MAAM,WAAW,GAA0B;IACzC,OAAO,EAAE,oCAAoC;IAC7C,SAAS,EAAE,sCAAsC;IACjD,YAAY,EAAE,yCAAyC;IACvD,WAAW,EAAE,qCAAqC;IAClD,aAAa,EAAE,0CAA0C;CAC1D,CAAC;AAEF;;;;;;GAMG;AAOH,MAAM,OAAO,cAAc;IAN3B;QAOE,4CAA4C;QACpC,aAAQ,GAAU,YAAY,CAAC;QAEvC,+CAA+C;QACvC,gBAAW,GAAU,OAAO,CAAC;QAErC,sBAAsB;QACd,YAAO,GAA2C,SAAS,CAAC;QAEpE,6CAA6C;QACrC,cAAS,GAAY,IAAI,CAAC;KAyBnC;IAvBC,MAAM;QACJ,MAAM,OAAO,GAAG,8DAAa,CAAC;QAE9B,iDAAiD;QACjD,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5C,MAAM,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAClD,MAAM,eAAe,GAAG;YACtB,UAAU,EAAE,8BAA8B,QAAQ,QAAQ,QAAQ,SAAS,WAAW,SAAS,WAAW,QAAQ;SACnH,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE,yBAAyB,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,QAAQ,EAAE,EACzE,KAAK,EAAE,eAAe,IAErB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,wBAAe,OAAO,CAAgB,CACvC,CAAC,CAAC,CAAC,OAAO,CACP,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Theme = 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';\n\n// 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","sourceRoot":"","sources":["../../../src/components/af-split-section/af-split-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD,sCAAsC;AACtC,MAAM,WAAW,GAA0B;IACzC,OAAO,EAAE,oCAAoC;IAC7C,SAAS,EAAE,sCAAsC;IACjD,YAAY,EAAE,yCAAyC;IACvD,WAAW,EAAE,qCAAqC;IAClD,aAAa,EAAE,0CAA0C;CAC1D,CAAC;AAEF;;;;;;GAMG;AAOH,MAAM,OAAO,cAAc;IAN3B;QAOE,4CAA4C;QACpC,aAAQ,GAAU,YAAY,CAAC;QAEvC,+CAA+C;QACvC,gBAAW,GAAU,OAAO,CAAC;QAErC,sBAAsB;QACd,YAAO,GAAY,SAAS,CAAC;QAErC,6CAA6C;QACrC,cAAS,GAAY,IAAI,CAAC;KAyBnC;IAvBC,MAAM;QACJ,MAAM,OAAO,GAAG,8DAAa,CAAC;QAE9B,iDAAiD;QACjD,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5C,MAAM,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAClD,MAAM,eAAe,GAAG;YACtB,UAAU,EAAE,8BAA8B,QAAQ,QAAQ,QAAQ,SAAS,WAAW,SAAS,WAAW,QAAQ;SACnH,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE,yBAAyB,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,QAAQ,EAAE,EACzE,KAAK,EAAE,eAAe,IAErB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,wBAAe,OAAO,CAAgB,CACvC,CAAC,CAAC,CAAC,OAAO,CACP,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -55,7 +55,7 @@ export class AfStack {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (h(Host, { key: '8762617789ee74b277ccc75e01a11e0722d46d71', style: style }, h("slot", { key: '81cacfb758661b513d8e16db5d23a9a14c1d5c16' })));
+        return (h(Host, { key: 'c851a39e7fc6c8a256c341a67bcac60ecbdb63b8', style: style }, h("slot", { key: 'a0e45727aacbbb4a0fe2d9396120bbae94cc3a46' })));
     }
     static get is() { return "af-stack"; }
     static get encapsulation() { return "shadow"; }
@@ -104,8 +104,9 @@ export class AfStack {
                     "resolved": "\"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"8\"",
                     "references": {
                         "Gap": {
-                            "location": "global",
-                            "id": "global::Gap"
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types.ts::Gap"
                         }
                     }
                 },

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

@@ -1 +1 @@
-{"version":3,"file":"af-stack.js","sourceRoot":"","sources":["../../../src/components/af-stack/af-stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD;;;;;GAKG;AAMH,MAAM,OAAO,OAAO;IALpB;QAME;;;;WAIG;QACK,cAAS,GAAc,UAAU,CAAC;QAE1C;;;WAGG;QACK,QAAG,GAAQ,GAAG,CAAC;QAEvB;;WAEG;QACK,UAAK,GAAU,SAAS,CAAC;QAEjC;;WAEG;QACK,YAAO,GAAY,OAAO,CAAC;QAEnC;;WAEG;QACK,SAAI,GAAY,KAAK,CAAC;KAmC/B;IAjCC,MAAM;QACJ,MAAM,QAAQ,GAA0B;YACtC,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,SAAS;YAClB,QAAQ,EAAE,UAAU;SACrB,CAAC;QAEF,MAAM,UAAU,GAA4B;YAC1C,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,eAAe;YACxB,MAAM,EAAE,cAAc;YACtB,MAAM,EAAE,cAAc;SACvB,CAAC;QAEF,MAAM,KAAK,GAAG;YACZ,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;YAC/D,GAAG,EAAE,eAAe,IAAI,CAAC,GAAG,GAAG;YAC/B,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YAChC,cAAc,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;YACxC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;SACd,CAAC;QAE5B,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK;YAChB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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","sourceRoot":"","sources":["../../../src/components/af-stack/af-stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD;;;;;GAKG;AAMH,MAAM,OAAO,OAAO;IALpB;QAME;;;;WAIG;QACK,cAAS,GAAc,UAAU,CAAC;QAE1C;;;WAGG;QACK,QAAG,GAAQ,GAAG,CAAC;QAEvB;;WAEG;QACK,UAAK,GAAU,SAAS,CAAC;QAEjC;;WAEG;QACK,YAAO,GAAY,OAAO,CAAC;QAEnC;;WAEG;QACK,SAAI,GAAY,KAAK,CAAC;KAmC/B;IAjCC,MAAM;QACJ,MAAM,QAAQ,GAA0B;YACtC,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,SAAS;YAClB,QAAQ,EAAE,UAAU;SACrB,CAAC;QAEF,MAAM,UAAU,GAA4B;YAC1C,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,UAAU;YACf,OAAO,EAAE,eAAe;YACxB,MAAM,EAAE,cAAc;YACtB,MAAM,EAAE,cAAc;SACvB,CAAC;QAEF,MAAM,KAAK,GAAG;YACZ,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK;YAC/D,GAAG,EAAE,eAAe,IAAI,CAAC,GAAG,GAAG;YAC/B,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YAChC,cAAc,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;YACxC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;SACd,CAAC;QAE5B,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK;YAChB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -0,0 +1,25 @@
+:host {
+  display: block;
+  flex: 1 1 0;
+  min-width: 0;
+  /* Left accent border mirrors the website's stats-row styling. Reads
+     the active border colour from whatever theme the ancestor sets. */
+  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;
+}
+
+/* Nudge the value towards the theme's secondary heading colour for that
+   gold/ochre accent on light themes — matches af-testimonial-stat. */
+.stat__value {
+  --af-typography-heading-primary: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));
+  letter-spacing: -0.88px;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,69 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Individual stat — a large value (e.g. "1B+") paired with a descriptive label.
+ *
+ * Intended as a slotted child of `af-stats-row`, but renders standalone too.
+ * Colour is inherited from the ancestor theme context (`af-section` /
+ * `af-card` / `af-theme-override`) via the `--af-typography-*` tokens that
+ * `af-heading` and `af-text` already consume — no theme prop needed here.
+ */
+export class AfStat {
+    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 is() { return "af-stat"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-stat.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-stat.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The statistic headline value (e.g. \"1B+\", \"95%\", \"10+\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Description / caption rendered beneath the value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-stat.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-stat.js","sourceRoot":"","sources":["../../../src/components/af-stat/af-stat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;GAOG;AAMH,MAAM,OAAO,MAAM;IAOjB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,MAAM;gBACf,mEAAY,KAAK,EAAC,GAAG,EAAC,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAc;gBACnE,gEAAS,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAW,CAChE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/af-stats-row/af-stats-row.css

@@ -0,0 +1,32 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.stats-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-6, 24px);
+  align-items: stretch;
+}
+
+/* Ensure each stat claims an equal share of the row. Descendant (not
+   child) combinator — see AGENTS.md "Stencil scoped-slot `>` gotcha". */
+.stats-row af-stat {
+  flex: 1 1 calc(50% - var(--space-6, 24px));
+  min-width: 0;
+}
+
+/* On wider viewports, prefer 4-up without wrapping when there's room. */
+@media (min-width: 768px) {
+  .stats-row af-stat {
+    flex: 1 1 0;
+  }
+}
+
+/* Narrow: stack to a single column for readability. */
+@media (max-width: 480px) {
+  .stats-row af-stat {
+    flex: 1 1 100%;
+  }
+}

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

@@ -0,0 +1,33 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Layout container for a horizontal row of `af-stat` children.
+ *
+ * Flex row that wraps to a grid on narrow viewports. Uses `scoped: true`
+ * so slotted `<af-stat>` children stay in the light DOM and inherit the
+ * ancestor theme (`af-section`) via the cascaded `.theme-*` class.
+ *
+ * Intentionally has **no `theme` prop** — a stats row is always flush
+ * against its section background, so a local theme would fight the
+ * ancestor. If you need a different background for the row, wrap it in
+ * its own `af-section` or `af-theme-override`.
+ *
+ * @slot - `af-stat` elements (typically 3–4 for a balanced row).
+ */
+export class AfStatsRow {
+    render() {
+        return (h(Host, { key: '1185dc84bcb132d6b4727e75f050e1441ff1bc5d' }, h("div", { key: '3d2671840ea84d06b37d4828387a2da2c8d7c85b', class: "stats-row" }, h("slot", { key: '192d3629812be1a1d3939ad8c37dd1fd1c5b7fa7' }))));
+    }
+    static get is() { return "af-stats-row"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-stats-row.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-stats-row.css"]
+        };
+    }
+}
+//# sourceMappingURL=af-stats-row.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-stats-row.js","sourceRoot":"","sources":["../../../src/components/af-stats-row/af-stats-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;;;;;GAaG;AAOH,MAAM,OAAO,UAAU;IACrB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,WAAW;gBACpB,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -40,7 +40,7 @@ export class AfStepper {
         });
     }
     render() {
-        return (h(Host, { key: '857011a248f8c9adc46c3a1c69b55cd33f0f7b36', class: `stepper stepper--${this.orientation}` }, h("div", { key: '5654c1431e991475429e1594832509236dc1a3ba', class: "stepper__connector", "aria-hidden": "true" }), h("slot", { key: '23293d2c3cc463a714f1acdfad2a3fb6e1d3cf0a' })));
+        return (h(Host, { key: '3f2ad37be78c6ff11fb60d09535e6bbd24dc04e1', class: `stepper stepper--${this.orientation}` }, h("div", { key: '6991c841716e24e95e75590dfeb1a9cb1ba1ea77', class: "stepper__connector", "aria-hidden": "true" }), h("slot", { key: '849622c3adb413d03114d1f498c504235a7f8e8a' })));
     }
     static get is() { return "af-stepper"; }
     static get encapsulation() { return "scoped"; }

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

@@ -18,7 +18,7 @@ export class AfStepperStep {
         this.index = 1;
     }
     render() {
-        return (h(Host, { key: 'c4b991bb2f6a9e153ee940b8f5090340e40159e9' }, h("span", { key: '7cf8db3a00d2bf0ad3b84d0795b2bfae5bf9359a', class: "stepper-step__badge" }, this.index), h("div", { key: '3e7db621c832d3dfc5415a5b9159994fd1b2379c', class: "stepper-step__content" }, h("div", { key: 'fa4ed0245ae043579a46506d0427a2e6e9a0c9c5', class: "stepper-step__heading" }, h("slot", { key: '24f2c339c855548e72e4c1b708fcdf3f9ac0c030', name: "heading" })), h("div", { key: '1449b56f91745a08ed7a6404a94cee5c4c478015', class: "stepper-step__body" }, h("slot", { key: '8ad129720c27a408b91fcda2ccaf448fd0d91826', 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 is() { return "af-stepper-step"; }
     static get encapsulation() { return "scoped"; }