@affinda/wc 0.0.14 → 0.0.16

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

@@ -0,0 +1,156 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Feature Grid component - CSS Grid container for feature cards.
+ *
+ * Desktop: Configurable columns (1-4)
+ * Mobile: List (stacked), horizontal scroll, or 2-column grid
+ *
+ * @slot - Feature card components (af-feature-card)
+ */
+export class AfFeatureGrid {
+    constructor() {
+        /**
+         * Number of columns on desktop (1-4).
+         */
+        this.columns = 4;
+        /**
+         * Mobile layout behavior.
+         * - 'list': Vertical stack (1 column)
+         * - 'scroll': Horizontal scroll with progress indicator
+         * - 'grid': Maintain 2-column grid on mobile
+         */
+        this.mobileLayout = 'list';
+        this.scrollProgress = 0;
+        this.handleScroll = () => {
+            if (!this.scrollContainer)
+                return;
+            const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
+            const maxScroll = scrollWidth - clientWidth;
+            if (maxScroll > 0) {
+                this.scrollProgress = scrollLeft / maxScroll;
+            }
+            else {
+                this.scrollProgress = 0;
+            }
+        };
+    }
+    componentDidLoad() {
+        this.setupScrollListener();
+        // Watch for cards being added (for React async rendering)
+        this.observer = new MutationObserver(() => {
+            this.setupScrollListener();
+        });
+        this.observer.observe(this.host, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    onMobileLayoutChange() {
+        this.setupScrollListener();
+    }
+    setupScrollListener() {
+        if (this.scrollContainer) {
+            this.scrollContainer.removeEventListener('scroll', this.handleScroll);
+        }
+        requestAnimationFrame(() => {
+            this.scrollContainer = this.host.querySelector('.feature-grid__cards');
+            if (this.scrollContainer && this.mobileLayout === 'scroll') {
+                this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });
+                this.handleScroll();
+                if (this.resizeObserver) {
+                    this.resizeObserver.disconnect();
+                }
+                this.resizeObserver = new ResizeObserver(() => {
+                    this.handleScroll();
+                });
+                this.resizeObserver.observe(this.scrollContainer);
+            }
+        });
+    }
+    render() {
+        const gridClasses = {
+            'feature-grid': true,
+            [`feature-grid--cols-${this.columns}`]: true,
+            [`feature-grid--mobile-${this.mobileLayout}`]: true,
+        };
+        const showProgressLine = this.mobileLayout === 'scroll';
+        return (h(Host, { key: '9f86e8111e73d046e6e391d54781972ca0c1a78a' }, h("div", { key: '409d9c22be533612e2f079f38bc613e3a1f35fe2', class: gridClasses }, h("div", { key: '18261ef9c3dab6b7dfc5c947fd0b21712f1e6416', class: "feature-grid__cards" }, h("slot", { key: '9f90257092482cce17c374813116bf5ea6338401' })), showProgressLine && (h("div", { key: '208800f5dfe5d944f9bc4198fbe656696471ce21', class: "feature-grid__progress" }, h("af-progress-line", { key: 'c95b717d018803c4f56a9066bf7aa869c01cb1aa', progress: this.scrollProgress }))))));
+    }
+    static get is() { return "af-feature-grid"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-feature-grid.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-feature-grid.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "1 | 2 | 3 | 4",
+                    "resolved": "1 | 2 | 3 | 4",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of columns on desktop (1-4)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "4"
+            },
+            "mobileLayout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'list' | 'scroll' | 'grid'",
+                    "resolved": "\"grid\" | \"list\" | \"scroll\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mobile layout behavior.\n- 'list': Vertical stack (1 column)\n- 'scroll': Horizontal scroll with progress indicator\n- 'grid': Maintain 2-column grid on mobile"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mobile-layout",
+                "defaultValue": "'list'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "scrollProgress": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "mobileLayout",
+                "methodName": "onMobileLayoutChange"
+            }];
+    }
+}
+//# sourceMappingURL=af-feature-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-feature-grid.js","sourceRoot":"","sources":["../../../src/components/af-feature-grid/af-feature-grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, h, Host, Element, Watch } from '@stencil/core';\n\n/**\n * Feature Grid component - CSS Grid container for feature cards.\n *\n * Desktop: Configurable columns (1-4)\n * Mobile: List (stacked), horizontal scroll, or 2-column grid\n *\n * @slot - Feature card components (af-feature-card)\n */\n@Component({\n  tag: 'af-feature-grid',\n  styleUrl: 'af-feature-grid.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfFeatureGrid {\n  @Element() host!: HTMLElement;\n\n  /**\n   * Number of columns on desktop (1-4).\n   */\n  @Prop() columns: 1 | 2 | 3 | 4 = 4;\n\n  /**\n   * Mobile layout behavior.\n   * - 'list': Vertical stack (1 column)\n   * - 'scroll': Horizontal scroll with progress indicator\n   * - 'grid': Maintain 2-column grid on mobile\n   */\n  @Prop() mobileLayout: 'list' | 'scroll' | 'grid' = 'list';\n\n  @State() scrollProgress: number = 0;\n\n  private scrollContainer: HTMLElement | undefined;\n  private observer: MutationObserver | undefined;\n  private resizeObserver: ResizeObserver | undefined;\n\n  componentDidLoad() {\n    this.setupScrollListener();\n\n    // Watch for cards being added (for React async rendering)\n    this.observer = new MutationObserver(() => {\n      this.setupScrollListener();\n    });\n\n    this.observer.observe(this.host, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  @Watch('mobileLayout')\n  onMobileLayoutChange() {\n    this.setupScrollListener();\n  }\n\n  private setupScrollListener() {\n    if (this.scrollContainer) {\n      this.scrollContainer.removeEventListener('scroll', this.handleScroll);\n    }\n\n    requestAnimationFrame(() => {\n      this.scrollContainer = this.host.querySelector('.feature-grid__cards') as HTMLElement;\n\n      if (this.scrollContainer && this.mobileLayout === 'scroll') {\n        this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });\n        this.handleScroll();\n\n        if (this.resizeObserver) {\n          this.resizeObserver.disconnect();\n        }\n        this.resizeObserver = new ResizeObserver(() => {\n          this.handleScroll();\n        });\n        this.resizeObserver.observe(this.scrollContainer);\n      }\n    });\n  }\n\n  private handleScroll = () => {\n    if (!this.scrollContainer) return;\n\n    const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;\n    const maxScroll = scrollWidth - clientWidth;\n\n    if (maxScroll > 0) {\n      this.scrollProgress = scrollLeft / maxScroll;\n    } else {\n      this.scrollProgress = 0;\n    }\n  };\n\n  render() {\n    const gridClasses = {\n      'feature-grid': true,\n      [`feature-grid--cols-${this.columns}`]: true,\n      [`feature-grid--mobile-${this.mobileLayout}`]: true,\n    };\n\n    const showProgressLine = this.mobileLayout === 'scroll';\n\n    return (\n      <Host>\n        <div class={gridClasses}>\n          <div class=\"feature-grid__cards\">\n            <slot></slot>\n          </div>\n\n          {showProgressLine && (\n            <div class=\"feature-grid__progress\">\n              <af-progress-line progress={this.scrollProgress} />\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,61 @@
+:host {
+  display: block;
+}
+
+.fieldset {
+  display: flex;
+  flex-direction: column;
+  border: none;
+  padding: 0;
+  margin: 0;
+  min-inline-size: 0;
+}
+
+.fieldset.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Legend/heading styling - uses heading 5 style */
+.legend {
+  display: block;
+  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-book, 500);
+  font-size: var(--font-size-heading-5-desktop, 20px);
+  line-height: var(--line-height-heading-relaxed, 1.2);
+  letter-spacing: var(--letter-spacing-heading, -0.02em);
+  color: var(--colour-typography-heading-primary, var(--colour-brand-inkwell, #14343b));
+  padding: 0;
+  margin: 0 0 12px 0;
+  width: 100%;
+}
+
+/* Items container */
+.items {
+  display: flex;
+}
+
+/* Vertical layout */
+.items.orientation-vertical {
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+/* Horizontal layout */
+.items.orientation-horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 28px;
+  align-items: center;
+}
+
+/* Slotted content styling */
+::slotted(*) {
+  flex-shrink: 0;
+}
+
+/* Full width items in vertical layout */
+.items.orientation-vertical ::slotted(*) {
+  width: 100%;
+}

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

@@ -0,0 +1,109 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Fieldset component for grouping related form controls.
+ * Supports vertical and horizontal layouts with an optional legend/heading.
+ *
+ * @slot - Form controls (checkboxes, radios, etc.)
+ */
+export class AfFieldset {
+    constructor() {
+        /**
+         * The layout orientation of the fieldset items
+         * - `vertical` - Items stack vertically (default)
+         * - `horizontal` - Items are laid out horizontally
+         */
+        this.orientation = 'vertical';
+        /**
+         * Whether the fieldset is disabled (disables all child controls)
+         */
+        this.disabled = false;
+    }
+    render() {
+        const fieldsetClasses = {
+            'fieldset': true,
+            [`orientation-${this.orientation}`]: true,
+            'disabled': this.disabled
+        };
+        const itemsClasses = {
+            'items': true,
+            [`orientation-${this.orientation}`]: true
+        };
+        return (h(Host, { key: '367a58328f883d5df31989021ad7dba14ed3ab6c' }, h("fieldset", { key: 'f43a04b8808db04886a0997b42593af2445b185d', class: fieldsetClasses, disabled: this.disabled }, this.legend && (h("legend", { key: 'fc08d5e1464ffeb00005fda04169ceb2654a00b8', class: "legend" }, this.legend)), h("div", { key: '815f2dc77dc417791e1a3d736e1b0ce91250a325', class: itemsClasses }, h("slot", { key: 'd080ec923b57a3ae95cc868be6bf42b57df08e7a' })))));
+    }
+    static get is() { return "af-fieldset"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-fieldset.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-fieldset.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "legend": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The legend/heading text for the fieldset"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "legend"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The layout orientation of the fieldset items\n- `vertical` - Items stack vertically (default)\n- `horizontal` - Items are laid out horizontally"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'vertical'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the fieldset is disabled (disables all child controls)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-fieldset.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-fieldset.js","sourceRoot":"","sources":["../../../src/components/af-fieldset/af-fieldset.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;GAKG;AAMH,MAAM,OAAO,UAAU;IALvB;QAWE;;;;WAIG;QACK,gBAAW,GAA8B,UAAU,CAAC;QAE5D;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;KA2BpD;IAzBC,MAAM;QACJ,MAAM,eAAe,GAAG;YACtB,UAAU,EAAE,IAAI;YAChB,CAAC,eAAe,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;YACzC,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,YAAY,GAAG;YACnB,OAAO,EAAE,IAAI;YACb,CAAC,eAAe,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;SAC1C,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,iEAAU,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACtD,IAAI,CAAC,MAAM,IAAI,CACd,+DAAQ,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAU,CAC9C;gBACD,4DAAK,KAAK,EAAE,YAAY;oBACtB,8DAAa,CACT,CACG,CACN,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * Fieldset component for grouping related form controls.\n * Supports vertical and horizontal layouts with an optional legend/heading.\n * \n * @slot - Form controls (checkboxes, radios, etc.)\n */\n@Component({\n  tag: 'af-fieldset',\n  styleUrl: 'af-fieldset.css',\n  shadow: true\n})\nexport class AfFieldset {\n  /**\n   * The legend/heading text for the fieldset\n   */\n  @Prop() legend?: string;\n\n  /**\n   * The layout orientation of the fieldset items\n   * - `vertical` - Items stack vertically (default)\n   * - `horizontal` - Items are laid out horizontally\n   */\n  @Prop() orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Whether the fieldset is disabled (disables all child controls)\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  render() {\n    const fieldsetClasses = {\n      'fieldset': true,\n      [`orientation-${this.orientation}`]: true,\n      'disabled': this.disabled\n    };\n\n    const itemsClasses = {\n      'items': true,\n      [`orientation-${this.orientation}`]: true\n    };\n\n    return (\n      <Host>\n        <fieldset class={fieldsetClasses} disabled={this.disabled}>\n          {this.legend && (\n            <legend class=\"legend\">{this.legend}</legend>\n          )}\n          <div class={itemsClasses}>\n            <slot></slot>\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n\n"]}

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

@@ -5,7 +5,7 @@
 .footer {
   background-color: var(--colour-brand-inkwell, #14343b);
   color: var(--colour-tints-mistGreen-200, #C6D5D1);
-  padding: 64px 0 0;
+  padding: 120px 0 0; /* Extra padding at top for overlapping cards */
 }
 
 .footer__container {

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

@@ -18,7 +18,7 @@ export class AfFooter {
         this.showStatus = true;
     }
     render() {
-        return (h(Host, { key: '37ff278a4e94d6a530143e49a7d2cd89bf4b2108' }, h("footer", { key: '1465dbc7c890329e248ee6f15b6082b63cc6d66f', class: "footer" }, h("div", { key: '5e1b29375b3f14c3ebe451e56f70d0726e9af0ae', class: "footer__container" }, h("div", { key: 'a36ec8ae9f0f211347b2ccdd47dbe45599eaf43c', class: "footer__top" }, h("div", { key: '3f749c08a7a0866748e5818156db2bf6c9fd2d8e', class: "footer__brand" }, h("div", { key: 'a71e240e851ec6348fa80eff89cb319f2126ae6f', class: "footer__brand-card" }, h("div", { key: '1e2b46f8bc10ad4be3b41a5545445ca421d93614', class: "footer__logo" }, h("slot", { key: '55a6b9f5181e3e19e91dc8bbf9d94283e2805d1b', name: "logo" })), h("div", { key: 'd0f58f0b8f8449b62f7fb9cb22dbf44d990c274c', class: "footer__social" }, h("slot", { key: '14995e1b89c281dcb618cc5044171dc5e770df78', name: "social" }))), h("div", { key: '9ee5c6a384a5915c7d25d5b7918737eb3aedd457', class: "footer__contact-card" }, h("slot", { key: '669c0f2dec223e8e964a117be3ed1f1b626284ea', name: "contact" }))), h("div", { key: 'e5c055d705f12e9f4389f6a5d342d594b20636b7', class: "footer__nav" }, h("div", { key: 'b8ba3f9e42996210094d6962888fd380645c83e0', class: "footer__nav-columns" }, h("slot", { key: 'be54e86e7a3dadcf9dd01006cbbca1124bcfb1df', name: "nav" })), this.showStatus && (h("div", { key: 'c949887c44f734c93c679a72aa07362fea9b939c', class: "footer__status" }, h("span", { key: '2d8e3df717e880ad71e8af9591699fee7b50e711', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), h("span", { key: '743707f9b7750dc2312262028b2d6d0ca86f6e60', class: "footer__status-text" }, this.statusText), this.statusUrl && (h("a", { key: 'f667c9ecb73d4c17645afc24ad09c4b58fa0d265', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), h("div", { key: '3935d821d1ccf1563de444e244802c500b7ba9db', class: "footer__bottom" }, this.copyrightText && (h("p", { key: '9bbf076b86d2d221a65f7f19e325a0f79fb42cd3', class: "footer__copyright" }, this.copyrightText)), h("div", { key: 'b671070b4274c1d0b8fdc21ad33b211ad8d37390', class: "footer__legal" }, h("slot", { key: '24338a5e5fea9b88352e47680ef18160f52e9ee2', name: "legal" })), h("div", { key: '772913b85cf9b1f2f93b649c01c11b71a27d64a4', class: "footer__badges" }, h("slot", { key: '9a40bc862ed3512ee94398da5ac0e754dbd33240', name: "badges" })))))));
+        return (h(Host, { key: '58d15bfa72370f9d72767081d7d821ce7e5cfcad' }, h("footer", { key: 'f53cc2cb44f334bc6709344d11663bbc8facbde4', class: "footer" }, h("div", { key: 'ad17b47d33fad7fea79fee647817ee8dceade8b8', class: "footer__container" }, h("div", { key: '24bf87ec90f567b260fdc3bd7f70c76fc72789bc', class: "footer__top" }, h("div", { key: '272bbb94a4d889579b9991c016165a7376559024', class: "footer__brand" }, h("div", { key: 'f1a892dab1d6ce935451978ae4584dfd0d50bca4', class: "footer__brand-card" }, h("div", { key: '15818798cdfd09873836e109472556a224a40f56', class: "footer__logo" }, h("slot", { key: 'd753c7044f3870ec66cf37da700cc2bf2aceda2c', name: "logo" })), h("div", { key: '2660af6bab2666242dfffe25dc81e050693d024e', class: "footer__social" }, h("slot", { key: '76dd64ed787aaa4698ca3687673b32899ed4a6a2', name: "social" }))), h("div", { key: '71c365eae2e2f2748cf42978179a1047d51dd391', class: "footer__contact-card" }, h("slot", { key: 'df48c5734759ac12a8ef398cf5002c793f02a309', name: "contact" }))), h("div", { key: 'b78002e34cc197ab9157697c48eeded05a3acdcd', class: "footer__nav" }, h("div", { key: '715717dd80882654ca91ccaf5474953b827f08a3', class: "footer__nav-columns" }, h("slot", { key: '062c88854fbd11d4c007e7daf166828db8db2131', name: "nav" })), this.showStatus && (h("div", { key: '39cd615cff666e79f0ed91ef90f6ad414f89addd', class: "footer__status" }, h("span", { key: '8396b890dc62b5f65c9ba5eaff2db72b83709a2a', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), h("span", { key: '5266b10f2e2e8129425cd61acd0865cc6be38ec0', class: "footer__status-text" }, this.statusText), this.statusUrl && (h("a", { key: 'c4e999a03cbb89eaaaae079250c9eda8756ca8d6', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), h("div", { key: '354acdb5d3442c876affc6e44c0e3541a27ff06f', class: "footer__bottom" }, this.copyrightText && (h("p", { key: '677a8291f263b026a01855422fc08ddd7fb69b89', class: "footer__copyright" }, this.copyrightText)), h("div", { key: '46b34f1634c53ff716c53ee575e1894c60b056e8', class: "footer__legal" }, h("slot", { key: 'f7ed01d5374e9c7d627ccf47413f62f7ab049ae7', name: "legal" })), h("div", { key: 'db6a6911e45c9c50e2c53d21e4aab25d3aa331f7', class: "footer__badges" }, h("slot", { key: '1fa6134c03aac63734592e4325663a1e91f92f02', name: "badges" })))))));
     }
     static get is() { return "af-footer"; }
     static get encapsulation() { return "scoped"; }

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

@@ -9,7 +9,7 @@ export class AfFooterColumn {
         this.heading = '';
     }
     render() {
-        return (h(Host, { key: '8ba73f2f7a90d6a6b7ee33a04d4533b750624256' }, h("div", { key: '5b3f50b63fd0461d64dca4c7a6cbb6ee94ab98f6', class: "footer-column" }, this.heading && (h("h5", { key: '3583cd3ef323471dd2a106281e1522bba5e8dec6', class: "footer-column__heading" }, this.heading)), h("ul", { key: '35334470d9c1fd1832d52169a757a2d5a11cab10', class: "footer-column__list" }, h("slot", { key: 'e37bd4e38617d11fe8bbf931f71d0ff71123770c' })))));
+        return (h(Host, { key: '90953efd8907072a4a9c336f5a47eafe0317af61' }, h("div", { key: 'cef4b4554d8384e86e24c6329f35a8d9eadf6f44', class: "footer-column" }, this.heading && (h("h5", { key: '22119f6749453837427dc0438254b271f13d81f6', class: "footer-column__heading" }, this.heading)), h("ul", { key: '6a51a9e7e210654d410842b6b2e9c76054c0ecb8', class: "footer-column__list" }, h("slot", { key: '5bc741d972164228b460f30981cc306cdd7435fa' })))));
     }
     static get is() { return "af-footer-column"; }
     static get encapsulation() { return "scoped"; }

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

@@ -11,7 +11,7 @@ export class AfFooterLink {
         this.external = false;
     }
     render() {
-        return (h(Host, { key: 'e6f7a589242a219d1b6378fd253972c760443500' }, h("li", { key: '335bfe5438a894bd61de90b79d3ab22d0fc89900' }, h("a", { key: 'f409bdcd2f5cc5ab98a3e63917c46406af0d5305', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, h("slot", { key: '8b511b8adf25e0a930186cc6276ffa4bebda0fc1' }), this.external && (h("svg", { key: '53a643543ad59dce128eec87b02d0397305522e2', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: '0e20bfbaaaf254a98aca18375442a11c4d2719d3', d: "M10 6.5v3a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7.5 1.5h3v3M5.5 6.5l5-5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (h(Host, { key: '121d2b0936ddfa70eb6a2db79fc0ae41b28245a8' }, h("li", { key: '8528d61539f57e05277b3af353d22e43f61e6c52' }, h("a", { key: '05da59ba1868f89e6cc849428b784d530158c0c8', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, h("slot", { key: '33aa087cc0634c62e79df7fa210c897720845623' }), this.external && (h("svg", { key: 'e024e5e1768b11d113943af0c48a0ae894f4d76d', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: 'c0ccfe70f94d6df8057ccd1c8ea151e27b9c2dc5', d: "M10 6.5v3a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7.5 1.5h3v3M5.5 6.5l5-5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
     }
     static get is() { return "af-footer-link"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-grid-callout/af-grid-callout.css

@@ -0,0 +1,191 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.grid-callout {
+  display: flex;
+  width: 100%;
+  gap: 40px;
+  align-items: stretch;
+}
+
+/* ==========================================================================
+   Image Container - Pill shape with rounded right edge
+   ========================================================================== */
+
+.grid-callout__image-container {
+  flex: 0 0 auto;
+  width: 45%;
+  min-height: 400px;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Left position - rounded on right side */
+.grid-callout--image-left .grid-callout__image-container {
+  border-radius: 0 4000px 4000px 0;
+  margin-left: calc(-1 * var(--container-padding, 80px));
+}
+
+/* Right position - rounded on left side */
+.grid-callout--image-right .grid-callout__image-container {
+  border-radius: 4000px 0 0 4000px;
+  margin-right: calc(-1 * var(--container-padding, 80px));
+}
+
+.grid-callout__image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ==========================================================================
+   Content Area
+   ========================================================================== */
+
+.grid-callout__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+  padding: 40px 0;
+}
+
+/* Add left padding when image is on left */
+.grid-callout--image-left .grid-callout__content {
+  padding-left: 40px;
+}
+
+/* Add right padding when image is on right */
+.grid-callout--image-right .grid-callout__content {
+  padding-right: 40px;
+}
+
+/* No image layout - full width content */
+.grid-callout--no-image {
+  flex-direction: column;
+}
+
+.grid-callout--no-image .grid-callout__content {
+  padding: 0;
+}
+
+.grid-callout__heading {
+  max-width: 840px;
+}
+
+/* ==========================================================================
+   Items Grid
+   ========================================================================== */
+
+.grid-callout__items {
+  display: grid;
+  gap: 40px;
+  width: 100%;
+}
+
+.grid-callout__items--cols-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-callout__items--cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.grid-callout__items--cols-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+/* ==========================================================================
+   CTA Area
+   ========================================================================== */
+
+.grid-callout__cta {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.grid-callout__cta:empty {
+  display: none;
+}
+
+/* ==========================================================================
+   Responsive - Tablet
+   ========================================================================== */
+
+@media (max-width: 1024px) {
+  .grid-callout {
+    gap: 32px;
+  }
+
+  .grid-callout__image-container {
+    width: 40%;
+  }
+
+  .grid-callout__content {
+    gap: 40px;
+  }
+
+  .grid-callout__items--cols-3,
+  .grid-callout__items--cols-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .grid-callout__items {
+    gap: 32px;
+  }
+}
+
+/* ==========================================================================
+   Responsive - Mobile
+   ========================================================================== */
+
+@media (max-width: 768px) {
+  .grid-callout {
+    flex-direction: column;
+    gap: 32px;
+  }
+
+  .grid-callout__image-container {
+    width: calc(100% + 2 * var(--container-padding, 20px));
+    min-height: 280px;
+    margin-left: calc(-1 * var(--container-padding, 20px));
+    margin-right: calc(-1 * var(--container-padding, 20px));
+    border-radius: 0;
+  }
+
+  /* Reset rounded corners on mobile */
+  .grid-callout--image-left .grid-callout__image-container,
+  .grid-callout--image-right .grid-callout__image-container {
+    border-radius: 0;
+    margin-left: calc(-1 * var(--container-padding, 20px));
+    margin-right: calc(-1 * var(--container-padding, 20px));
+  }
+
+  .grid-callout__content {
+    padding: 0;
+    gap: 32px;
+  }
+
+  .grid-callout--image-left .grid-callout__content,
+  .grid-callout--image-right .grid-callout__content {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .grid-callout__items {
+    grid-template-columns: 1fr;
+    gap: 32px;
+  }
+
+  .grid-callout__items--cols-2,
+  .grid-callout__items--cols-3,
+  .grid-callout__items--cols-4 {
+    grid-template-columns: 1fr;
+  }
+}
+