@affinda/wc 0.0.3 → 0.0.5

package/dist/cjs/index.cjs.js

@@ -8,7 +8,7 @@ var afButton_entry = require('./af-button.cjs.entry.js');
 var afIconButton_entry = require('./af-icon-button.cjs.entry.js');
 var afButtonGroup_entry = require('./af-button-group.cjs.entry.js');
 var afTypographyLockup_entry = require('./af-typography-lockup.cjs.entry.js');
-require('./index-E2jkaTPt.js');
+require('./index-1GcSSOS3.js');
 
 
 

package/dist/cjs/loader.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-E2jkaTPt.js');
+var index = require('./index-1GcSSOS3.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["af-heading_5.cjs",[[257,"af-heading",{"level":[1],"align":[1]}],[257,"af-logo"],[257,"af-nav-item",{"hierarchy":[1],"variant":[1],"href":[1],"active":[4]}],[257,"af-navbar"],[257,"af-text",{"variant":[1],"align":[1],"as":[1]}]]],["af-aspect-ratio.cjs",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-button.cjs",[[257,"af-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1]}]]],["af-button-group.cjs",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-color-swatch.cjs",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-container.cjs",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]],["af-icon-button.cjs",[[257,"af-icon-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-typography-lockup.cjs",[[257,"af-typography-lockup",{"headingSize":[2,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]]], options);
+  return index.bootstrapLazy([["af-heading_5.cjs",[[257,"af-heading",{"level":[1],"align":[1]}],[257,"af-logo"],[257,"af-nav-item",{"hierarchy":[1],"variant":[1],"href":[1],"active":[4]}],[257,"af-navbar"],[257,"af-text",{"variant":[1],"align":[1],"as":[1]}]]],["af-aspect-ratio.cjs",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-button.cjs",[[257,"af-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1]}]]],["af-button-group.cjs",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-card.cjs",[[262,"af-card",{"backgroundImage":[1,"background-image"],"backgroundColor":[1,"background-color"],"darkOverlay":[4,"dark-overlay"]}]]],["af-color-swatch.cjs",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-container.cjs",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]],["af-icon-button.cjs",[[257,"af-icon-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-typography-lockup.cjs",[[257,"af-typography-lockup",{"headingSize":[2,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -11,7 +11,8 @@
     "components/af-button/af-button.js",
     "components/af-icon-button/af-icon-button.js",
     "components/af-button-group/af-button-group.js",
-    "components/af-typography-lockup/af-typography-lockup.js"
+    "components/af-typography-lockup/af-typography-lockup.js",
+    "components/af-card/af-card.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/af-button-group/af-button-group.js

@@ -15,7 +15,7 @@ export class AfButtonGroup {
             'button-group': true,
             [`direction-${this.direction}`]: true
         };
-        return (h(Host, { key: '9ef4ea3e4429646edb2d14a780763807d35ca438' }, h("div", { key: '8f61ec426b1f01cfd0ed91b6045e01cc1ecb1637', class: classes, style: { gap: this.gap } }, h("slot", { key: '06acb0d36cc96b311c228ba19039899a99d6a35d' }))));
+        return (h(Host, { key: 'c6cab092c05c6e6b7b859c662f318067590b51e3' }, h("div", { key: '289501b3693d0eeb68c4b2f85bb3b8398ca7610b', class: classes, style: { gap: this.gap } }, h("slot", { key: 'b852bcf016846022ee0cf8d23ce5a57aa0856adf' }))));
     }
     static get is() { return "af-button-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,99 @@
+:host {
+  display: block;
+  width: 100%;
+  min-height: 400px;
+}
+
+.card {
+  background: var(--colour-background-level-1, #e8eeed);
+  border-radius: var(--border-radius-card-level-1, 32px);
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 400px;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.card--with-image {
+  background: var(--colour-brand-inkwell, #14343b);
+  min-height: 480px;
+}
+
+.card__background {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.card__background-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.card__content {
+  position: relative;
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  flex: 1;
+  box-sizing: border-box;
+  z-index: 1;
+}
+
+/* Image styling within cards */
+.card__content ::slotted(img) {
+  width: 100%;
+  height: auto;
+  min-height: 200px;
+  margin-top: auto;
+  object-fit: cover;
+  object-position: top center;
+}
+
+/* Heading spacing within cards */
+.card__content ::slotted(af-heading) {
+  margin-bottom: 0;
+}
+
+/* Text line-height within cards */
+.card__content ::slotted(af-text) {
+  line-height: 1.44;
+}
+
+.card__content--overlay {
+  backdrop-filter: blur(2px);
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
+  padding: 32px;
+  padding-top: 200px;
+  justify-content: flex-end;
+  
+  /* Set CSS custom properties for text color that child components can use */
+  --colour-typography-heading-primary: #ffffff;
+  --colour-typography-heading-secondary: #ffffff;
+  --colour-typography-body-default: #ffffff;
+  --colour-typography-body-dark: #ffffff;
+  color: #ffffff;
+}
+
+/* Force white text in overlay cards using both direct styling and custom properties */
+.card__content--overlay * {
+  color: #ffffff !important;
+}
+
+/* Dark text for regular cards */
+.card:not(.card--with-image) .card__content {
+  color: var(--colour-typography-heading-primary, #14343b);
+}
+
+/* Custom background color cards with white text */
+.card--custom-bg .card__content {
+  --colour-typography-heading-primary: #ffffff;
+  --colour-typography-body-default: #ffffff;
+}
+

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

@@ -0,0 +1,89 @@
+import { h, Host } from "@stencil/core";
+export class AfCard {
+    constructor() {
+        /**
+         * Whether to apply a dark gradient overlay (for cards with background images)
+         */
+        this.darkOverlay = false;
+    }
+    render() {
+        const hasBackgroundImage = !!this.backgroundImage;
+        const cardStyle = this.backgroundColor ? { backgroundColor: this.backgroundColor } : undefined;
+        return (h(Host, { key: '026a3f9e10d281558913cd6eb69db800da37deb4' }, h("div", { key: 'd6b43e724d5611e75ec096dad88c5373ef5c5adc', class: `card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`, style: cardStyle }, hasBackgroundImage && (h("div", { key: 'f71753ba962411320c45f06c7c9a5c98b89883a9', class: "card__background" }, h("img", { key: '2d3b19e350ddf5a1efa1c1a9a343851e423cc275', src: this.backgroundImage, alt: "", class: "card__background-image" }))), h("div", { key: '459e00230ef7a470ee808d0d674412b18822d473', class: `card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}` }, h("slot", { key: 'd2f4f261f0b2a766c912504d17f0caec96ae02c4' })))));
+    }
+    static get is() { return "af-card"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "backgroundImage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Background image URL for the card"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background-image"
+            },
+            "backgroundColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color for the card (CSS color value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background-color"
+            },
+            "darkOverlay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to apply a dark gradient overlay (for cards with background images)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dark-overlay",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-card.js","sourceRoot":"","sources":["../../../src/components/af-card/af-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,MAAM;IANnB;QAiBE;;WAEG;QACK,gBAAW,GAAY,KAAK,CAAC;KAwBtC;IAtBC,MAAM;QACJ,MAAM,kBAAkB,GAAG,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;QAClD,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QAE/F,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE,QAAQ,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE,EAC9J,KAAK,EAAE,SAAS;gBAEf,kBAAkB,IAAI,CACrB,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,4DAAK,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,wBAAwB,GAAG,CACpE,CACP;gBACD,4DAAK,KAAK,EAAE,iBAAiB,kBAAkB,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,EAAE;oBAC/E,8DAAa,CACT,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-card',\n  styleUrl: 'af-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfCard {\n  /**\n   * Background image URL for the card\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * Background color for the card (CSS color value)\n   */\n  @Prop() backgroundColor?: string;\n\n  /**\n   * Whether to apply a dark gradient overlay (for cards with background images)\n   */\n  @Prop() darkOverlay: boolean = false;\n\n  render() {\n    const hasBackgroundImage = !!this.backgroundImage;\n    const cardStyle = this.backgroundColor ? { backgroundColor: this.backgroundColor } : undefined;\n\n    return (\n      <Host>\n        <div \n          class={`card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`}\n          style={cardStyle}\n        >\n          {hasBackgroundImage && (\n            <div class=\"card__background\">\n              <img src={this.backgroundImage} alt=\"\" class=\"card__background-image\" />\n            </div>\n          )}\n          <div class={`card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}`}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

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

@@ -7,7 +7,7 @@
   padding: 0;
   font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;
   font-weight: 500;
-  color: #14343b;
+  color: var(--colour-typography-heading-primary, #14343b);
   letter-spacing: -0.02em;
 }
 

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

@@ -1,10 +1,10 @@
 :host {
   display: inline-block;
-  color: #14343b;
 }
 
-.logo-svg {
+.logo-img {
   display: block;
   height: 22px;
-  width: auto;
+  width: 141px;
+  object-fit: contain;
 }

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

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class AfLogo {
     render() {
-        return (h(Host, { key: '8a33b73d7a60054dde8a04327d94d78763552549' }, h("svg", { key: '7195b06d8ab5a335e70a1e7310fd753cb3887599', width: "141", height: "22", viewBox: "0 0 141 22", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "logo-svg" }, h("path", { key: '5bb4bb2f7f6063928c3cfc7938b85291e70bec27', d: "M20.8 9.6c0-1.5-.4-2.7-1.1-3.7-.8-1-1.8-1.5-3.2-1.5-1.3 0-2.4.5-3.2 1.5-.7 1-1.1 2.2-1.1 3.7 0 1.5.4 2.7 1.1 3.7.8 1 1.9 1.5 3.2 1.5 1.4 0 2.5-.5 3.2-1.5.7-1 1.1-2.2 1.1-3.7zm4.2 0c0 2.4-.7 4.4-2 5.9-1.4 1.5-3.2 2.3-5.5 2.3-2.2 0-4-.8-5.4-2.3-1.4-1.5-2.1-3.5-2.1-5.9 0-2.4.7-4.4 2.1-5.9C13.5 2.2 15.3 1.4 17.5 1.4c2.3 0 4.1.8 5.5 2.3 1.3 1.5 2 3.5 2 5.9zM29.1 17.5h-4.2V4.7h4.2v12.8zm0-14.9h-4.2V.2h4.2v2.4zM43.3 17.5h-4.2v-1.5c-.7 1.2-1.9 1.8-3.7 1.8-1.3 0-2.4-.4-3.2-1.2-.8-.8-1.2-2-1.2-3.5V4.7h4.2v8.1c0 1.7.7 2.5 2 2.5.7 0 1.3-.2 1.7-.7.4-.4.6-1.1.6-1.9V4.7h4.2v12.8h-.4z", fill: "currentColor" }), h("path", { key: '7a5a7e54b69475ad6f9d1ddf240e668708a06ff2', d: "M56.9 17.5h-4.2v-1.5c-.7 1.2-1.9 1.8-3.7 1.8-1.3 0-2.4-.4-3.2-1.2-.8-.8-1.2-2-1.2-3.5V4.7h4.2v8.1c0 1.7.7 2.5 2 2.5.7 0 1.3-.2 1.7-.7.4-.4.6-1.1.6-1.9V4.7h4.2v12.8h-.4zM68.3 5.9c-.7-.4-1.5-.6-2.4-.6-1.2 0-2.2.4-2.9 1.2-.8.8-1.1 1.9-1.1 3.3 0 1.4.4 2.5 1.1 3.3.8.8 1.7 1.2 2.9 1.2.9 0 1.7-.2 2.4-.6v3.5c-.9.3-1.9.5-2.9.5-2.3 0-4.2-.7-5.6-2.2-1.4-1.5-2.1-3.4-2.1-5.8 0-1.5.3-2.9.9-4.1.6-1.2 1.5-2.2 2.6-2.8 1.1-.7 2.4-1 3.8-1 1.1 0 2.1.2 3.1.6l.2 3.5z", fill: "currentColor" }), h("path", { key: '29ba5bc9bc4fc8068d77dd092f6fbf2dccc2caa2', d: "M80 4.7h4.2v1.6c.7-1.2 1.9-1.9 3.6-1.9 1.3 0 2.3.4 3.1 1.2.8.8 1.2 2 1.2 3.5v8.4h-4.2V9.4c0-1.7-.7-2.5-2-2.5-.7 0-1.2.2-1.6.7-.4.4-.6 1.1-.6 1.9v8h-4.2V4.7h.5zM105.3 17.5h-4.2v-1.1c-.8 1-2 1.5-3.6 1.5-1.4 0-2.6-.5-3.5-1.4-.9-.9-1.4-2.1-1.4-3.6V9.6c0-1.5.5-2.7 1.4-3.6.9-.9 2.1-1.4 3.5-1.4 1.6 0 2.8.5 3.6 1.5V.2h4.2v17.3zm-4.2-7.9c0-.8-.3-1.5-.8-2-.5-.5-1.2-.8-2-.8-.8 0-1.5.3-2 .8-.5.5-.8 1.2-.8 2 0 .8.3 1.5.8 2 .5.5 1.2.8 2 .8.8 0 1.5-.3 2-.8.5-.5.8-1.2.8-2z", fill: "currentColor" }), h("path", { key: 'd528008c06633218db38e63f0605874f703d3165', d: "M115.8 17.5h-4.2V4.7h4.2v1.1c.8-1 2-1.5 3.6-1.5 1.4 0 2.6.5 3.5 1.4.9.9 1.4 2.1 1.4 3.6v3.3c0 1.5-.5 2.7-1.4 3.6-.9.9-2.1 1.4-3.5 1.4-1.6 0-2.8-.5-3.6-1.5v1.4zm4.2-7.9c0-.8-.3-1.5-.8-2-.5-.5-1.2-.8-2-.8-.8 0-1.5.3-2 .8-.5.5-.8 1.2-.8 2 0 .8.3 1.5.8 2 .5.5 1.2.8 2 .8.8 0 1.5-.3 2-.8.5-.5.8-1.2.8-2z", fill: "currentColor" }), h("g", { key: 'e3c341f6286afc34b918924fe1ce7d147adcb09a', "clip-path": "url(#clip0)" }, h("path", { key: '1d8c3fbc8995e2017357ceaab53ffd66970fe017', d: "M4.9 9.6c0-1.5-.4-2.7-1.1-3.7C3 4.9 2 4.4.6 4.4c-.3 0-.6 0-.9.1v10.2c.3.1.6.1.9.1 1.4 0 2.5-.5 3.2-1.5.7-1 1.1-2.2 1.1-3.7zM9.1 9.6c0 2.4-.7 4.4-2 5.9-1.4 1.5-3.2 2.3-5.5 2.3-.7 0-1.4-.1-2.1-.2V.2C.2.1.9 0 1.6 0c2.3 0 4.1.8 5.5 2.3 1.3 1.5 2 3.5 2 5.3z", fill: "currentColor" })), h("defs", { key: 'b10859520274b6db85b3192b314f2a2bc6b41da7' }, h("clipPath", { key: '8834e78ed619077f26809a22f7130f6941f2ef5f', id: "clip0" }, h("path", { key: '5a01632b2fb3c6a6d630afaefc6489cb879f5116', fill: "#fff", d: "M0 0h9.1v17.8H0z" }))))));
+        return (h(Host, { key: '8a33b73d7a60054dde8a04327d94d78763552549' }, h("img", { key: '2dbf83d383508aaeff70f683866925e4fa98847d', src: "https://www.figma.com/api/mcp/asset/2cfec484-7ba9-4258-94f3-ef4d0ba1e8fe", alt: "Affinda", class: "logo-img" })));
     }
     static get is() { return "af-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"af-logo.js","sourceRoot":"","sources":["../../../src/components/af-logo/af-logo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,MAAM;IACjB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,YAAY,EACpB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,UAAU;gBAEhB,6DACE,CAAC,EAAC,ikBAAikB,EACnkB,IAAI,EAAC,cAAc,GACnB;gBACF,6DACE,CAAC,EAAC,mcAAmc,EACrc,IAAI,EAAC,cAAc,GACnB;gBACF,6DACE,CAAC,EAAC,+cAA+c,EACjd,IAAI,EAAC,cAAc,GACnB;gBACF,6DACE,CAAC,EAAC,4SAA4S,EAC9S,IAAI,EAAC,cAAc,GACnB;gBACF,uEAAa,aAAa;oBACxB,6DACE,CAAC,EAAC,8PAA8P,EAChQ,IAAI,EAAC,cAAc,GACnB,CACA;gBACJ;oBACE,iEAAU,EAAE,EAAC,OAAO;wBAClB,6DAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,kBAAkB,GAAG,CAChC,CACN,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * Affinda logo component\n */\n@Component({\n  tag: 'af-logo',\n  styleUrl: 'af-logo.css',\n  shadow: true\n})\nexport class AfLogo {\n  render() {\n    return (\n      <Host>\n        <svg\n          width=\"141\"\n          height=\"22\"\n          viewBox=\"0 0 141 22\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"logo-svg\"\n        >\n          <path\n            d=\"M20.8 9.6c0-1.5-.4-2.7-1.1-3.7-.8-1-1.8-1.5-3.2-1.5-1.3 0-2.4.5-3.2 1.5-.7 1-1.1 2.2-1.1 3.7 0 1.5.4 2.7 1.1 3.7.8 1 1.9 1.5 3.2 1.5 1.4 0 2.5-.5 3.2-1.5.7-1 1.1-2.2 1.1-3.7zm4.2 0c0 2.4-.7 4.4-2 5.9-1.4 1.5-3.2 2.3-5.5 2.3-2.2 0-4-.8-5.4-2.3-1.4-1.5-2.1-3.5-2.1-5.9 0-2.4.7-4.4 2.1-5.9C13.5 2.2 15.3 1.4 17.5 1.4c2.3 0 4.1.8 5.5 2.3 1.3 1.5 2 3.5 2 5.9zM29.1 17.5h-4.2V4.7h4.2v12.8zm0-14.9h-4.2V.2h4.2v2.4zM43.3 17.5h-4.2v-1.5c-.7 1.2-1.9 1.8-3.7 1.8-1.3 0-2.4-.4-3.2-1.2-.8-.8-1.2-2-1.2-3.5V4.7h4.2v8.1c0 1.7.7 2.5 2 2.5.7 0 1.3-.2 1.7-.7.4-.4.6-1.1.6-1.9V4.7h4.2v12.8h-.4z\"\n            fill=\"currentColor\"\n          />\n          <path\n            d=\"M56.9 17.5h-4.2v-1.5c-.7 1.2-1.9 1.8-3.7 1.8-1.3 0-2.4-.4-3.2-1.2-.8-.8-1.2-2-1.2-3.5V4.7h4.2v8.1c0 1.7.7 2.5 2 2.5.7 0 1.3-.2 1.7-.7.4-.4.6-1.1.6-1.9V4.7h4.2v12.8h-.4zM68.3 5.9c-.7-.4-1.5-.6-2.4-.6-1.2 0-2.2.4-2.9 1.2-.8.8-1.1 1.9-1.1 3.3 0 1.4.4 2.5 1.1 3.3.8.8 1.7 1.2 2.9 1.2.9 0 1.7-.2 2.4-.6v3.5c-.9.3-1.9.5-2.9.5-2.3 0-4.2-.7-5.6-2.2-1.4-1.5-2.1-3.4-2.1-5.8 0-1.5.3-2.9.9-4.1.6-1.2 1.5-2.2 2.6-2.8 1.1-.7 2.4-1 3.8-1 1.1 0 2.1.2 3.1.6l.2 3.5z\"\n            fill=\"currentColor\"\n          />\n          <path\n            d=\"M80 4.7h4.2v1.6c.7-1.2 1.9-1.9 3.6-1.9 1.3 0 2.3.4 3.1 1.2.8.8 1.2 2 1.2 3.5v8.4h-4.2V9.4c0-1.7-.7-2.5-2-2.5-.7 0-1.2.2-1.6.7-.4.4-.6 1.1-.6 1.9v8h-4.2V4.7h.5zM105.3 17.5h-4.2v-1.1c-.8 1-2 1.5-3.6 1.5-1.4 0-2.6-.5-3.5-1.4-.9-.9-1.4-2.1-1.4-3.6V9.6c0-1.5.5-2.7 1.4-3.6.9-.9 2.1-1.4 3.5-1.4 1.6 0 2.8.5 3.6 1.5V.2h4.2v17.3zm-4.2-7.9c0-.8-.3-1.5-.8-2-.5-.5-1.2-.8-2-.8-.8 0-1.5.3-2 .8-.5.5-.8 1.2-.8 2 0 .8.3 1.5.8 2 .5.5 1.2.8 2 .8.8 0 1.5-.3 2-.8.5-.5.8-1.2.8-2z\"\n            fill=\"currentColor\"\n          />\n          <path\n            d=\"M115.8 17.5h-4.2V4.7h4.2v1.1c.8-1 2-1.5 3.6-1.5 1.4 0 2.6.5 3.5 1.4.9.9 1.4 2.1 1.4 3.6v3.3c0 1.5-.5 2.7-1.4 3.6-.9.9-2.1 1.4-3.5 1.4-1.6 0-2.8-.5-3.6-1.5v1.4zm4.2-7.9c0-.8-.3-1.5-.8-2-.5-.5-1.2-.8-2-.8-.8 0-1.5.3-2 .8-.5.5-.8 1.2-.8 2 0 .8.3 1.5.8 2 .5.5 1.2.8 2 .8.8 0 1.5-.3 2-.8.5-.5.8-1.2.8-2z\"\n            fill=\"currentColor\"\n          />\n          <g clip-path=\"url(#clip0)\">\n            <path\n              d=\"M4.9 9.6c0-1.5-.4-2.7-1.1-3.7C3 4.9 2 4.4.6 4.4c-.3 0-.6 0-.9.1v10.2c.3.1.6.1.9.1 1.4 0 2.5-.5 3.2-1.5.7-1 1.1-2.2 1.1-3.7zM9.1 9.6c0 2.4-.7 4.4-2 5.9-1.4 1.5-3.2 2.3-5.5 2.3-.7 0-1.4-.1-2.1-.2V.2C.2.1.9 0 1.6 0c2.3 0 4.1.8 5.5 2.3 1.3 1.5 2 3.5 2 5.3z\"\n              fill=\"currentColor\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0\">\n              <path fill=\"#fff\" d=\"M0 0h9.1v17.8H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-logo.js","sourceRoot":"","sources":["../../../src/components/af-logo/af-logo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,MAAM;IACjB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,GAAG,EAAC,0EAA0E,EAC9E,GAAG,EAAC,SAAS,EACb,KAAK,EAAC,UAAU,GAChB,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * Affinda logo component\n */\n@Component({\n  tag: 'af-logo',\n  styleUrl: 'af-logo.css',\n  shadow: true\n})\nexport class AfLogo {\n  render() {\n    return (\n      <Host>\n        <img\n          src=\"https://www.figma.com/api/mcp/asset/2cfec484-7ba9-4258-94f3-ef4d0ba1e8fe\"\n          alt=\"Affinda\"\n          class=\"logo-img\"\n        />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-nav-item/af-nav-item.css

@@ -32,20 +32,20 @@
 
 /* Primary variant 01 - darker */
 .hierarchy-primary.variant-01 {
-  font-family: 'NeuSans', 'Inter', system-ui, sans-serif;
+  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);
   font-size: 16px;
-  font-weight: 500;
+  font-weight: var(--font-weight-book, 500);
   line-height: 20px;
-  color: #14343b;
+  color: var(--colour-typography-nav-item-primary, #14343b);
 }
 
 /* Primary variant 02 - lighter for light backgrounds */
 .hierarchy-primary.variant-02 {
-  font-family: 'NeuSans', 'Inter', system-ui, sans-serif;
+  font-family: var(--typography-bodyfont, 'Helvetica', 'Inter', system-ui, sans-serif);
   font-size: 16px;
-  font-weight: 500;
+  font-weight: var(--font-weight-regular, 400);
   line-height: 20px;
-  color: #14343b;
+  color: var(--colour-typography-nav-item-secondary, #2b484f);
 }
 
 /* Hover state for primary variant-01 (dark backgrounds) - underline */

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

@@ -1,23 +1,27 @@
 :host {
   display: block;
   width: 100%;
+  position: absolute;
+  top: 32px;
+  left: 0;
+  right: 0;
+  z-index: 10;
 }
 
 .navbar-container {
-  padding: 32px 80px 0;
+  padding: 0 80px;
   box-sizing: border-box;
+  position: relative;
 }
 
 .navbar {
-  background: #E8F1EF;
-  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: var(--colour-background-white, #ffffff);
   border-radius: 9999px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 8px 8px 40px;
   box-sizing: border-box;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 /* Left section */

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

@@ -5,7 +5,7 @@ import { h, Host } from "@stencil/core";
  */
 export class AfNavbar {
     render() {
-        return (h(Host, { key: 'a66b7e6939aebec67d26604dea422ec2e64fe6bd' }, h("nav", { key: '54064edc20beeafacafd2b43b25bfa9fc6e0e362', class: "navbar-container" }, h("div", { key: '2020a0761f646c0a13cc604605d3b9d5b1625278', class: "navbar" }, h("div", { key: '6038de1eba48a2bedf7e689bb65521406fc6b8b1', class: "navbar-left" }, h("div", { key: '63f31053e7d3d1402f2a1e88a4ae2171f9e00d4f', class: "logo" }, h("slot", { key: 'bf73abaf20be9cfcaa6328fe8ac224d109944bef', name: "logo" })), h("div", { key: 'c9cc09537d26c55d319f08c4622b17248f6ffba4', class: "nav-links" }, h("slot", { key: '5c2d8df163e2fd9967492d39522df1e11dfcd977', name: "links" }))), h("div", { key: '45265b4d765ad52a33f81efa80e9daa910948e1c', class: "navbar-right" }, h("div", { key: '48c913dd3d8fa17ee7eb2e9a41f9493929cd7af0', class: "nav-actions" }, h("slot", { key: 'cbfecec0a3b95935f707a4bbded5ce8aae0e9270', name: "actions" })), h("div", { key: 'e8cd7adf6f5a537b9a2552b467f6671f312ab0c1', class: "nav-button" }, h("slot", { key: '9dd578f3d67b32642cc6fbd49a5f3736e55c04f1', name: "button" })))))));
+        return (h(Host, { key: 'a66b7e6939aebec67d26604dea422ec2e64fe6bd' }, h("nav", { key: '54064edc20beeafacafd2b43b25bfa9fc6e0e362', class: "navbar-container" }, h("div", { key: '2020a0761f646c0a13cc604605d3b9d5b1625278', class: "navbar" }, h("div", { key: '6038de1eba48a2bedf7e689bb65521406fc6b8b1', class: "navbar-left" }, h("div", { key: '63f31053e7d3d1402f2a1e88a4ae2171f9e00d4f', class: "logo" }, h("slot", { key: 'bf73abaf20be9cfcaa6328fe8ac224d109944bef', name: "logo" })), h("div", { key: 'c9cc09537d26c55d319f08c4622b17248f6ffba4', class: "nav-links" }, h("slot", { key: '5c2d8df163e2fd9967492d39522df1e11dfcd977', name: "start" }))), h("div", { key: '45265b4d765ad52a33f81efa80e9daa910948e1c', class: "navbar-right" }, h("div", { key: '48c913dd3d8fa17ee7eb2e9a41f9493929cd7af0', class: "nav-actions" }, h("slot", { key: '9d144675950a723d9ff004f5e1d0bad83f372d7e', name: "end" })), h("div", { key: 'bd10fc8edaef5f85382e53abf12b0686ec4c6acd', class: "nav-button" }, h("slot", { key: 'c3c01e44c37a1d51f20a29ce059a02a94094f377', name: "button" })))))));
     }
     static get is() { return "af-navbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"af-navbar.js","sourceRoot":"","sources":["../../../src/components/af-navbar/af-navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,QAAQ;IACnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B,4DAAK,KAAK,EAAC,QAAQ;oBAEjB,4DAAK,KAAK,EAAC,aAAa;wBACtB,4DAAK,KAAK,EAAC,MAAM;4BACf,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;wBACN,4DAAK,KAAK,EAAC,WAAW;4BACpB,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF;oBAGN,4DAAK,KAAK,EAAC,cAAc;wBACvB,4DAAK,KAAK,EAAC,aAAa;4BACtB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB;wBACN,4DAAK,KAAK,EAAC,YAAY;4BACrB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n */\n@Component({\n  tag: 'af-navbar',\n  styleUrl: 'af-navbar.css',\n  shadow: true\n})\nexport class AfNavbar {\n  render() {\n    return (\n      <Host>\n        <nav class=\"navbar-container\">\n          <div class=\"navbar\">\n            {/* Left section: Logo + Nav Links */}\n            <div class=\"navbar-left\">\n              <div class=\"logo\">\n                <slot name=\"logo\"></slot>\n              </div>\n              <div class=\"nav-links\">\n                <slot name=\"links\"></slot>\n              </div>\n            </div>\n\n            {/* Right section: Actions + Button */}\n            <div class=\"navbar-right\">\n              <div class=\"nav-actions\">\n                <slot name=\"actions\"></slot>\n              </div>\n              <div class=\"nav-button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-navbar.js","sourceRoot":"","sources":["../../../src/components/af-navbar/af-navbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,QAAQ;IACnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,kBAAkB;gBAC3B,4DAAK,KAAK,EAAC,QAAQ;oBAEjB,4DAAK,KAAK,EAAC,aAAa;wBACtB,4DAAK,KAAK,EAAC,MAAM;4BACf,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;wBACN,4DAAK,KAAK,EAAC,WAAW;4BACpB,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF;oBAGN,4DAAK,KAAK,EAAC,cAAc;wBACvB,4DAAK,KAAK,EAAC,aAAa;4BACtB,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACpB;wBACN,4DAAK,KAAK,EAAC,YAAY;4BACrB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n */\n@Component({\n  tag: 'af-navbar',\n  styleUrl: 'af-navbar.css',\n  shadow: true\n})\nexport class AfNavbar {\n  render() {\n    return (\n      <Host>\n        <nav class=\"navbar-container\">\n          <div class=\"navbar\">\n            {/* Left section: Logo + Nav Links */}\n            <div class=\"navbar-left\">\n              <div class=\"logo\">\n                <slot name=\"logo\"></slot>\n              </div>\n              <div class=\"nav-links\">\n                <slot name=\"start\"></slot>\n              </div>\n            </div>\n\n            {/* Right section: Actions + Button */}\n            <div class=\"navbar-right\">\n              <div class=\"nav-actions\">\n                <slot name=\"end\"></slot>\n              </div>\n              <div class=\"nav-button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -7,7 +7,7 @@
   padding: 0;
   font-family: 'Helvetica', 'Inter', 'Segoe UI', system-ui, sans-serif;
   font-weight: 400;
-  color: #14343b;
+  color: var(--colour-typography-body-default, #14343b);
   letter-spacing: 0;
 }
 

package/dist/collection/components/af-typography-lockup/af-typography-lockup.js

@@ -30,7 +30,7 @@ export class AfTypographyLockup {
             [`breakpoint-${this.breakpoint}`]: true
         };
         const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
-        return (h(Host, { key: '7a748e23cc9262e4cf73abacf51951545228344c' }, h("div", { key: '443df8d7086ae8daf88f3827551219138dab43bb', class: containerClasses }, h("div", { key: 'efbf2467f36e2888bd4892524fb3d09b21b2ddfd', class: copyClasses, style: copyStyle }, h("div", { key: 'eb206a7d2e5c364a96295b11f83a87784c342ced', class: "heading" }, h("slot", { key: '360e15b14fbeeffd01fc55b2e0552bad530a337f' })), h("div", { key: '3b76ff5527eb52c382554f470991a05cbaf8e1e3', class: "description" }, h("slot", { key: '4e9f291edeac066abf2d1e416b846b9d1cbee2dc', name: "description" }))), h("div", { key: 'ff84e9ce823763b7570109d02b10d3039adefe61', class: "buttons" }, h("slot", { key: '36d0cc47a688c23c55d449a8f8e37b6f4be93d23', name: "buttons" })))));
+        return (h(Host, { key: 'c8bc936e14d143125926e4cc03a3344911d46360' }, h("div", { key: '4c51fcb278daba5e4b8287130a1e61021750af18', class: containerClasses }, h("div", { key: '6d563b91c8b548a72f898978569bceda44a26b14', class: copyClasses, style: copyStyle }, h("div", { key: '4351708a5d68297499f7d12109941b7dec8939ad', class: "heading" }, h("slot", { key: '92c799fb2cbf596ab8778cf8d5c9cf88663ed219' })), h("div", { key: '0911e146d7aa3c34d6c825eb849e883b2f69893b', class: "description" }, h("slot", { key: 'b3184843c5646db87a3bd7660214fd4cf2bafc0f', name: "description" }))), h("div", { key: '4b2b814e55a574c7330c517eca3f1765d11cdcdc', class: "buttons" }, h("slot", { key: 'f35ea7c3bc5592f8e6776464b6878d819792894b', name: "buttons" })))));
     }
     static get is() { return "af-typography-lockup"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/af-aspect-ratio.js

@@ -1,4 +1,4 @@
-import { A as AfAspectRatio$1, d as defineCustomElement$1 } from './p-DqIqR4VU.js';
+import { A as AfAspectRatio$1, d as defineCustomElement$1 } from './p-C6idwlD-.js';
 
 const AfAspectRatio = AfAspectRatio$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-button-group.js

@@ -1,4 +1,4 @@
-import { A as AfButtonGroup$1, d as defineCustomElement$1 } from './p-BfmeW04T.js';
+import { A as AfButtonGroup$1, d as defineCustomElement$1 } from './p-Cjv046iG.js';
 
 const AfButtonGroup = AfButtonGroup$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-button.js

@@ -1,4 +1,4 @@
-import { A as AfButton$1, d as defineCustomElement$1 } from './p-uhOM63Ux.js';
+import { A as AfButton$1, d as defineCustomElement$1 } from './p-cKSy1B8M.js';
 
 const AfButton = AfButton$1;
 const defineCustomElement = defineCustomElement$1;

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

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

package/dist/components/af-card.js

@@ -0,0 +1,47 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-zwrcq-N2.js';
+
+const afCardCss = ".sc-af-card-h{display:block;width:100%;min-height:400px}.card.sc-af-card{background:var(--colour-background-level-1, #e8eeed);border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;position:relative;display:flex;flex-direction:column;min-height:400px;height:100%;box-sizing:border-box}.card--with-image.sc-af-card{background:var(--colour-brand-inkwell, #14343b);min-height:480px}.card__background.sc-af-card{position:absolute;inset:0;pointer-events:none;z-index:0}.card__background-image.sc-af-card{width:100%;height:100%;object-fit:cover;object-position:center}.card__content.sc-af-card{position:relative;padding:40px;display:flex;flex-direction:column;gap:24px;flex:1;box-sizing:border-box;z-index:1}.card__content.sc-af-card-s>img,.card__content .sc-af-card-s>img{width:100%;height:auto;min-height:200px;margin-top:auto;object-fit:cover;object-position:top center}.card__content.sc-af-card-s>af-heading,.card__content .sc-af-card-s>af-heading{margin-bottom:0}.card__content.sc-af-card-s>af-text,.card__content .sc-af-card-s>af-text{line-height:1.44}.card__content--overlay.sc-af-card{backdrop-filter:blur(2px);background:linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);padding:32px;padding-top:200px;justify-content:flex-end;--colour-typography-heading-primary:#ffffff;--colour-typography-heading-secondary:#ffffff;--colour-typography-body-default:#ffffff;--colour-typography-body-dark:#ffffff;color:#ffffff}.card__content--overlay.sc-af-card *.sc-af-card{color:#ffffff !important}.card.sc-af-card:not(.card--with-image) .card__content.sc-af-card{color:var(--colour-typography-heading-primary, #14343b)}.card--custom-bg.sc-af-card .card__content.sc-af-card{--colour-typography-heading-primary:#ffffff;--colour-typography-body-default:#ffffff}";
+
+const AfCard$1 = /*@__PURE__*/ proxyCustomElement(class AfCard extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * Whether to apply a dark gradient overlay (for cards with background images)
+         */
+        this.darkOverlay = false;
+    }
+    render() {
+        const hasBackgroundImage = !!this.backgroundImage;
+        const cardStyle = this.backgroundColor ? { backgroundColor: this.backgroundColor } : undefined;
+        return (h(Host, { key: '026a3f9e10d281558913cd6eb69db800da37deb4' }, h("div", { key: 'd6b43e724d5611e75ec096dad88c5373ef5c5adc', class: `card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`, style: cardStyle }, hasBackgroundImage && (h("div", { key: 'f71753ba962411320c45f06c7c9a5c98b89883a9', class: "card__background" }, h("img", { key: '2d3b19e350ddf5a1efa1c1a9a343851e423cc275', src: this.backgroundImage, alt: "", class: "card__background-image" }))), h("div", { key: '459e00230ef7a470ee808d0d674412b18822d473', class: `card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}` }, h("slot", { key: 'd2f4f261f0b2a766c912504d17f0caec96ae02c4' })))));
+    }
+    static get style() { return afCardCss; }
+}, [262, "af-card", {
+        "backgroundImage": [1, "background-image"],
+        "backgroundColor": [1, "background-color"],
+        "darkOverlay": [4, "dark-overlay"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-card"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfCard$1);
+            }
+            break;
+    } });
+}
+
+const AfCard = AfCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfCard, defineCustomElement };
+//# sourceMappingURL=af-card.js.map
+
+//# sourceMappingURL=af-card.js.map

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

@@ -0,0 +1 @@
+{"file":"af-card.js","mappings":";;AAAA,MAAM,SAAS,GAAG,wvDAAwvD;;MCQ7vDA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AANnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAiBE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAwBrC;IAtBC,MAAM,GAAA;AACJ,QAAA,MAAM,kBAAkB,GAAG,CAAC,CAAC,IAAI,CAAC,eAAe;AACjD,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,eAAe,GAAG,EAAE,eAAe,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,SAAS;AAE9F,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,QAAQ,kBAAkB,GAAG,kBAAkB,GAAG,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG,oBAAoB,GAAG,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,eAAe,GAAG,iBAAiB,GAAG,EAAE,CAAA,CAAE,EAC9J,KAAK,EAAE,SAAS,EAAA,EAEf,kBAAkB,KACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,wBAAwB,EAAA,CAAG,CACpE,CACP,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAiB,cAAA,EAAA,kBAAkB,GAAG,wBAAwB,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  min-height: 400px;\n}\n\n.card {\n  background: var(--colour-background-level-1, #e8eeed);\n  border-radius: var(--border-radius-card-level-1, 32px);\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-height: 400px;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n.card--with-image {\n  background: var(--colour-brand-inkwell, #14343b);\n  min-height: 480px;\n}\n\n.card__background {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n}\n\n.card__background-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n.card__content {\n  position: relative;\n  padding: 40px;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  flex: 1;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n/* Image styling within cards */\n.card__content ::slotted(img) {\n  width: 100%;\n  height: auto;\n  min-height: 200px;\n  margin-top: auto;\n  object-fit: cover;\n  object-position: top center;\n}\n\n/* Heading spacing within cards */\n.card__content ::slotted(af-heading) {\n  margin-bottom: 0;\n}\n\n/* Text line-height within cards */\n.card__content ::slotted(af-text) {\n  line-height: 1.44;\n}\n\n.card__content--overlay {\n  backdrop-filter: blur(2px);\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n  padding: 32px;\n  padding-top: 200px;\n  justify-content: flex-end;\n  \n  /* Set CSS custom properties for text color that child components can use */\n  --colour-typography-heading-primary: #ffffff;\n  --colour-typography-heading-secondary: #ffffff;\n  --colour-typography-body-default: #ffffff;\n  --colour-typography-body-dark: #ffffff;\n  color: #ffffff;\n}\n\n/* Force white text in overlay cards using both direct styling and custom properties */\n.card__content--overlay * {\n  color: #ffffff !important;\n}\n\n/* Dark text for regular cards */\n.card:not(.card--with-image) .card__content {\n  color: var(--colour-typography-heading-primary, #14343b);\n}\n\n/* Custom background color cards with white text */\n.card--custom-bg .card__content {\n  --colour-typography-heading-primary: #ffffff;\n  --colour-typography-body-default: #ffffff;\n}\n\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-card',\n  styleUrl: 'af-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfCard {\n  /**\n   * Background image URL for the card\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * Background color for the card (CSS color value)\n   */\n  @Prop() backgroundColor?: string;\n\n  /**\n   * Whether to apply a dark gradient overlay (for cards with background images)\n   */\n  @Prop() darkOverlay: boolean = false;\n\n  render() {\n    const hasBackgroundImage = !!this.backgroundImage;\n    const cardStyle = this.backgroundColor ? { backgroundColor: this.backgroundColor } : undefined;\n\n    return (\n      <Host>\n        <div \n          class={`card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`}\n          style={cardStyle}\n        >\n          {hasBackgroundImage && (\n            <div class=\"card__background\">\n              <img src={this.backgroundImage} alt=\"\" class=\"card__background-image\" />\n            </div>\n          )}\n          <div class={`card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}`}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

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

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

package/dist/components/af-container.js

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

package/dist/components/af-heading.js

@@ -1,4 +1,4 @@
-import { A as AfHeading$1, d as defineCustomElement$1 } from './p-BJDmHNDi.js';
+import { A as AfHeading$1, d as defineCustomElement$1 } from './p-DIyOg-i_.js';
 
 const AfHeading = AfHeading$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-icon-button.js

@@ -1,4 +1,4 @@
-import { A as AfIconButton$1, d as defineCustomElement$1 } from './p-BoU5qaPt.js';
+import { A as AfIconButton$1, d as defineCustomElement$1 } from './p-Dw33Xm_t.js';
 
 const AfIconButton = AfIconButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-logo.js

@@ -1,4 +1,4 @@
-import { A as AfLogo$1, d as defineCustomElement$1 } from './p-zBrKMKWE.js';
+import { A as AfLogo$1, d as defineCustomElement$1 } from './p-CaqzUz5o.js';
 
 const AfLogo = AfLogo$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { A as AfNavItem$1, d as defineCustomElement$1 } from './p-DG7Mtz0G.js';
+import { A as AfNavItem$1, d as defineCustomElement$1 } from './p-CJWIieDU.js';
 
 const AfNavItem = AfNavItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-navbar.js

@@ -1,4 +1,4 @@
-import { A as AfNavbar$1, d as defineCustomElement$1 } from './p-B17zxKkI.js';
+import { A as AfNavbar$1, d as defineCustomElement$1 } from './p-BHNNF4PT.js';
 
 const AfNavbar = AfNavbar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-text.js

@@ -1,4 +1,4 @@
-import { A as AfText$1, d as defineCustomElement$1 } from './p-CT_9_xN3.js';
+import { A as AfText$1, d as defineCustomElement$1 } from './p-BpGDzCRf.js';
 
 const AfText = AfText$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-typography-lockup.js

@@ -1,4 +1,4 @@
-import { A as AfTypographyLockup$1, d as defineCustomElement$1 } from './p-DcFGu6up.js';
+import { A as AfTypographyLockup$1, d as defineCustomElement$1 } from './p-DuXQZGjc.js';
 
 const AfTypographyLockup = AfTypographyLockup$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/index.js

@@ -1,16 +1,16 @@
-export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-CzaQ1fCu.js';
-export { A as AfHeading } from './p-BJDmHNDi.js';
-export { A as AfText } from './p-CT_9_xN3.js';
-export { A as AfColorSwatch } from './p-LEksuu7O.js';
-export { A as AfContainer } from './p-DfIqdEs7.js';
-export { A as AfAspectRatio } from './p-DqIqR4VU.js';
-export { A as AfNavItem } from './p-DG7Mtz0G.js';
-export { A as AfNavbar } from './p-B17zxKkI.js';
-export { A as AfLogo } from './p-zBrKMKWE.js';
-export { A as AfButton } from './p-uhOM63Ux.js';
-export { A as AfIconButton } from './p-BoU5qaPt.js';
-export { A as AfButtonGroup } from './p-BfmeW04T.js';
-export { A as AfTypographyLockup } from './p-DcFGu6up.js';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-zwrcq-N2.js';
+export { A as AfHeading } from './p-DIyOg-i_.js';
+export { A as AfText } from './p-BpGDzCRf.js';
+export { A as AfColorSwatch } from './p-DSAo7rhE.js';
+export { A as AfContainer } from './p-CRgPNvxI.js';
+export { A as AfAspectRatio } from './p-C6idwlD-.js';
+export { A as AfNavItem } from './p-CJWIieDU.js';
+export { A as AfNavbar } from './p-BHNNF4PT.js';
+export { A as AfLogo } from './p-CaqzUz5o.js';
+export { A as AfButton } from './p-cKSy1B8M.js';
+export { A as AfIconButton } from './p-Dw33Xm_t.js';
+export { A as AfButtonGroup } from './p-Cjv046iG.js';
+export { A as AfTypographyLockup } from './p-DuXQZGjc.js';
 //# sourceMappingURL=index.js.map
 
 //# sourceMappingURL=index.js.map