@affinda/wc 0.0.16 → 0.0.18

package/dist/components/p-BBVslKpK.js

@@ -0,0 +1,59 @@
+import { p as proxyCustomElement, H, h } from './p-CxngDK-N.js';
+
+const afHeadingCss = ":host{display:block}.heading{margin:0;padding:0;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-regular, 400);color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));letter-spacing:var(--letter-spacing-heading, -0.02em)}.align-inherit{text-align:var(--af-text-align, left)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.level-xl{font-size:var(--font-size-heading-xl-mobile, 50px);line-height:var(--line-height-heading-tight, 1)}@media (min-width: 768px){.level-xl{font-size:var(--font-size-heading-xl-desktop, 80px)}}.level-1{font-size:var(--font-size-heading-1-mobile, 38px);line-height:var(--line-height-heading-tight, 1)}@media (min-width: 768px){.level-1{font-size:var(--font-size-heading-1-desktop, 56px)}}.level-2{font-size:var(--font-size-heading-2-mobile, 32px);line-height:var(--line-height-heading-tight, 1)}@media (min-width: 768px){.level-2{font-size:var(--font-size-heading-2-desktop, 44px)}}.level-3{font-size:var(--font-size-heading-3-mobile, 25px);line-height:var(--line-height-heading-tight, 1)}@media (min-width: 768px){.level-3{font-size:var(--font-size-heading-3-desktop, 34px)}}.level-4{font-size:var(--font-size-heading-4-mobile, 20px);line-height:var(--line-height-heading-normal, 1.1)}@media (min-width: 768px){.level-4{font-size:var(--font-size-heading-4-desktop, 24px);line-height:var(--line-height-heading-relaxed, 1.2)}}.level-5{font-size:var(--font-size-heading-5-mobile, 18px);line-height:var(--line-height-heading-normal, 1.1)}@media (min-width: 768px){.level-5{font-size:var(--font-size-heading-5-desktop, 20px);line-height:var(--line-height-heading-relaxed, 1.2)}}";
+
+const AfHeading = /*@__PURE__*/ proxyCustomElement(class AfHeading extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /** Heading level */
+        this.level = '1';
+        /** Visual alignment. Defaults to 'inherit' which reads from parent context (e.g. AfTypographyLockup) */
+        this.align = 'inherit';
+    }
+    getHeadingTag() {
+        // Map display levels to semantic HTML tags
+        const tagMap = {
+            'xl': 'h1',
+            '1': 'h1',
+            '2': 'h2',
+            '3': 'h3',
+            '4': 'h4',
+            '5': 'h5'
+        };
+        return tagMap[this.level] || 'h1';
+    }
+    render() {
+        const Tag = this.getHeadingTag();
+        return (h(Tag, { key: '554451170ad9c9cf3345d4c115cc4bd360c54651', class: {
+                'heading': true,
+                [`level-${this.level}`]: true,
+                [`align-${this.align}`]: true
+            }, part: "base" }, h("slot", { key: 'a41808f28f04efa17b49ef1a4ebfd79896ba8e98' })));
+    }
+    static get style() { return afHeadingCss; }
+}, [257, "af-heading", {
+        "level": [1],
+        "align": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-heading"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-heading":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfHeading);
+            }
+            break;
+    } });
+}
+
+export { AfHeading as A, defineCustomElement as d };
+//# sourceMappingURL=p-BBVslKpK.js.map
+
+//# sourceMappingURL=p-BBVslKpK.js.map

package/dist/components/p-BBVslKpK.js.map

@@ -0,0 +1 @@
+{"file":"p-BBVslKpK.js","mappings":";;AAAA,MAAM,YAAY,GAAG,0rDAA0rD;;MCYlsD,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAuC,GAAG;;AAG/C,QAAA,IAAK,CAAA,KAAA,GAA4C,SAAS;AA+BnE;IA7BS,aAAa,GAAA;;AAEnB,QAAA,MAAM,MAAM,GAA2B;AACrC,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,GAAG,EAAE,IAAI;AACT,YAAA,GAAG,EAAE,IAAI;AACT,YAAA,GAAG,EAAE,IAAI;AACT,YAAA,GAAG,EAAE,IAAI;AACT,YAAA,GAAG,EAAE;SACN;QACD,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI;;IAGnC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAS;QAEvC,QACE,CAAA,CAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EACF,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AAC7B,gBAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;AAC1B,aAAA,EACD,IAAI,EAAC,MAAM,EAAA,EAEX,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-heading/af-heading.css?tag=af-heading&encapsulation=shadow","src/components/af-heading/af-heading.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.heading {\n  margin: 0;\n  padding: 0;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-regular, 400);\n  /* Inherit color from theme context via CSS custom property */\n  color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));\n  letter-spacing: var(--letter-spacing-heading, -0.02em);\n}\n\n/* Alignment - inherits from --af-text-align if set, otherwise uses explicit align prop */\n.align-inherit {\n  text-align: var(--af-text-align, left);\n}\n\n.align-left {\n  text-align: left;\n}\n\n.align-center {\n  text-align: center;\n}\n\n.align-right {\n  text-align: right;\n}\n\n/* Heading XL */\n.level-xl {\n  font-size: var(--font-size-heading-xl-mobile, 50px);\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n@media (min-width: 768px) {\n  .level-xl {\n    font-size: var(--font-size-heading-xl-desktop, 80px);\n  }\n}\n\n/* Heading 1 */\n.level-1 {\n  font-size: var(--font-size-heading-1-mobile, 38px);\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n@media (min-width: 768px) {\n  .level-1 {\n    font-size: var(--font-size-heading-1-desktop, 56px);\n  }\n}\n\n/* Heading 2 */\n.level-2 {\n  font-size: var(--font-size-heading-2-mobile, 32px);\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n@media (min-width: 768px) {\n  .level-2 {\n    font-size: var(--font-size-heading-2-desktop, 44px);\n  }\n}\n\n/* Heading 3 */\n.level-3 {\n  font-size: var(--font-size-heading-3-mobile, 25px);\n  line-height: var(--line-height-heading-tight, 1);\n}\n\n@media (min-width: 768px) {\n  .level-3 {\n    font-size: var(--font-size-heading-3-desktop, 34px);\n  }\n}\n\n/* Heading 4 */\n.level-4 {\n  font-size: var(--font-size-heading-4-mobile, 20px);\n  line-height: var(--line-height-heading-normal, 1.1);\n}\n\n@media (min-width: 768px) {\n  .level-4 {\n    font-size: var(--font-size-heading-4-desktop, 24px);\n    line-height: var(--line-height-heading-relaxed, 1.2);\n  }\n}\n\n/* Heading 5 */\n.level-5 {\n  font-size: var(--font-size-heading-5-mobile, 18px);\n  line-height: var(--line-height-heading-normal, 1.1);\n}\n\n@media (min-width: 768px) {\n  .level-5 {\n    font-size: var(--font-size-heading-5-desktop, 20px);\n    line-height: var(--line-height-heading-relaxed, 1.2);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Heading component that inherits color from theme context.\n * Color is determined by the parent theme (af-section, af-card, etc.)\n * via CSS custom properties.\n */\n@Component({\n  tag: 'af-heading',\n  styleUrl: 'af-heading.css',\n  shadow: true\n})\nexport class AfHeading {\n  /** Heading level */\n  @Prop() level: 'xl' | '1' | '2' | '3' | '4' | '5' = '1';\n\n  /** Visual alignment. Defaults to 'inherit' which reads from parent context (e.g. AfTypographyLockup) */\n  @Prop() align: 'inherit' | 'left' | 'center' | 'right' = 'inherit';\n\n  private getHeadingTag() {\n    // Map display levels to semantic HTML tags\n    const tagMap: Record<string, string> = {\n      'xl': 'h1',\n      '1': 'h1',\n      '2': 'h2',\n      '3': 'h3',\n      '4': 'h4',\n      '5': 'h5'\n    };\n    return tagMap[this.level] || 'h1';\n  }\n\n  render() {\n    const Tag = this.getHeadingTag() as any;\n\n    return (\n      <Tag\n        class={{\n          'heading': true,\n          [`level-${this.level}`]: true,\n          [`align-${this.align}`]: true\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-C0f6y_zg.js → p-BQz_OQzK.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
-import { d as defineCustomElement$2 } from './p-Dvi1lz3x.js';
-import { d as defineCustomElement$1 } from './p-BMp8QbY-.js';
+import { d as defineCustomElement$2 } from './p-C8_mFdv5.js';
+import { d as defineCustomElement$1 } from './p-hOnulRmz.js';
 
 const afFeatureCardCss = ".sc-af-feature-card-h{display:block;--af-card-padding:0;--af-card-gap:0}[card-size=\"default\"].sc-af-feature-card-h{width:544px}[card-size=\"large\"].sc-af-feature-card-h{width:777px}[card-size=\"flexible\"].sc-af-feature-card-h{display:flex;width:100%;height:100%}.feature-card.sc-af-feature-card{overflow:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box;border-radius:var(--border-radius-card-level-1, 32px);width:100%;height:100%}.feature-card--layout-full-bleed.sc-af-feature-card{background:var(--background-base, var(--colour-brand-inkwell, #14343b))}[card-size=\"default\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card,[card-size=\"large\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{height:660px}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{min-height:480px}.feature-card__background.sc-af-feature-card{position:absolute;inset:0;pointer-events:none;z-index:0}.feature-card__background-image.sc-af-feature-card{width:100%;height:100%;object-fit:cover;object-position:center}.feature-card__overlay.sc-af-feature-card{position:absolute;bottom:0;left:0;right:0;backdrop-filter:blur(2px);background:linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);z-index:1;padding:124px 32px 32px 32px;--af-typography-heading-primary:var(--typography-heading-secondary, #ffffff);--af-typography-heading-secondary:var(--typography-heading-secondary, #ffffff);--af-typography-body-default:var(--typography-body-dark, #ffffff);--colour-typography-heading-primary:var(--typography-heading-secondary, #ffffff);--colour-typography-heading-secondary:var(--typography-heading-secondary, #ffffff);--colour-typography-body-default:var(--typography-body-dark, #ffffff)}.feature-card--layout-standard.sc-af-feature-card{background:var(--background-level-1, var(--colour-mistgreen-200, #e8eeed))}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-standard.sc-af-feature-card{min-height:400px}.feature-card__content.sc-af-feature-card{position:relative;display:flex;flex-direction:column;box-sizing:border-box;z-index:1;padding:40px 32px 12px 32px;flex:1 1 auto}[card-size=\"large\"].sc-af-feature-card-h .feature-card__content.sc-af-feature-card{padding:40px 40px 0 40px}.feature-card__image-area.sc-af-feature-card{position:relative;width:100%;height:160px;flex-shrink:0;overflow:hidden}.feature-card__image.sc-af-feature-card{width:100%;height:100%;object-fit:cover;object-position:center top}.feature-card.sc-af-feature-card af-typography-lockup.sc-af-feature-card{--colour-typography-heading-primary:var(--af-typography-heading-primary, var(--typography-heading-primary, #14343b));--colour-typography-body-default:var(--af-typography-body-default, var(--typography-body-default, #2b484f))}@media (max-width: 768px){.feature-card.sc-af-feature-card{border-radius:var(--border-radius-card-level-1, 24px)}[card-size=\"default\"].sc-af-feature-card-h,[card-size=\"large\"].sc-af-feature-card-h{width:335px}[card-size=\"default\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card,[card-size=\"large\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{height:442px}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-standard.sc-af-feature-card{min-height:340px}[card-size=\"flexible\"].sc-af-feature-card-h .feature-card--layout-full-bleed.sc-af-feature-card{min-height:380px}.feature-card__overlay.sc-af-feature-card{padding:80px 24px 28px 24px}.feature-card__content.sc-af-feature-card{padding:32px 24px 12px 24px}.feature-card__image-area.sc-af-feature-card{height:192px}}";
 
@@ -89,6 +89,6 @@ function defineCustomElement() {
 }
 
 export { AfFeatureCard as A, defineCustomElement as d };
-//# sourceMappingURL=p-C0f6y_zg.js.map
+//# sourceMappingURL=p-BQz_OQzK.js.map
 
-//# sourceMappingURL=p-C0f6y_zg.js.map
+//# sourceMappingURL=p-BQz_OQzK.js.map

package/dist/components/{p-C0f6y_zg.js.map → p-BQz_OQzK.js.map}

@@ -1 +1 @@
-{"file":"p-C0f6y_zg.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,knHAAknH;;MCsB9nH,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAN1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAsE,YAAY;AAE/F;;;;AAIG;AACK,QAAA,IAAM,CAAA,MAAA,GAA8B,UAAU;AAEtD;;;;;AAKG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAqC,SAAS;AAE/E;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAsB,CAAC;AAO1C;;;;AAIG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAkF9B;IAhFC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ;AAChC,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,YAAY;AAEhD,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,cAAc,EAAE,IAAI;AACpB,YAAA,CAAC,wBAAwB,IAAI,CAAC,MAAM,CAAE,CAAA,GAAG,IAAI;AAC7C,YAAA,CAAC,sBAAsB,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;SAC9C;;QAGD,IAAI,WAAW,EAAE;YACf,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EAEvB,QAAQ,KACP,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,gCAAgC,EAAA,CACtC,CACE,CACP,EAGD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,sBAAA,EAAA,EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU,EAAA,EAE1B,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,EACb,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtB,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAQ,CAAA,CACpB,CACc,CACnB,CACF,CACD;;;AAKX,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,KAAK,UAAU;AAE/C,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxB,CAAS,CAAA,SAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,EAAA,EAE7C,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,sBAAA,EAAA,EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU,EAAA,EAE1B,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,EACb,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,EAAQ,CAAA,CACpB,CACc,CACnB,EAGL,QAAQ,KACP,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CACE,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,qBAAqB,EAC3B,CAAA,CACE,CACP,CACO,CACN,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-feature-card/af-feature-card.css?tag=af-feature-card&encapsulation=scoped","src/components/af-feature-card/af-feature-card.tsx"],"sourcesContent":["/* ==========================================================================\n   Feature Card - Figma Specs\n   \n   Desktop Full-bleed: 544px × 660px, radius 32px\n   Desktop Standard default: 544px width, radius 32px\n   Desktop Standard large: 777px width, radius 32px\n   Mobile Full-bleed: 335px × 442px, radius 24px\n   Mobile Standard: 335px width, radius 24px\n   ========================================================================== */\n\n/* ==========================================================================\n   Host Element - Controls outer dimensions\n   ========================================================================== */\n\n:host {\n  display: block;\n  --af-card-padding: 0;\n  --af-card-gap: 0;\n}\n\n/* Fixed size hosts constrain to Figma dimensions */\n:host([card-size=\"default\"]) {\n  width: 544px;\n}\n\n:host([card-size=\"large\"]) {\n  width: 777px;\n}\n\n/* Flexible cards fill their container */\n:host([card-size=\"flexible\"]) {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n/* ==========================================================================\n   Base Feature Card Styles\n   ========================================================================== */\n\n.feature-card {\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-radius: var(--border-radius-card-level-1, 32px);\n  width: 100%;\n  height: 100%;\n}\n\n/* ==========================================================================\n   Full Bleed Layout Mode\n   Figma: 544px × 660px (desktop), 335px × 442px (mobile)\n   ========================================================================== */\n\n.feature-card--layout-full-bleed {\n  background: var(--background-base, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Full-bleed fixed sizes have explicit heights on host */\n:host([card-size=\"default\"]) .feature-card--layout-full-bleed,\n:host([card-size=\"large\"]) .feature-card--layout-full-bleed {\n  height: 660px;\n}\n\n/* Full-bleed flexible minimum height */\n:host([card-size=\"flexible\"]) .feature-card--layout-full-bleed {\n  min-height: 480px;\n}\n\n.feature-card__background {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n}\n\n.feature-card__background-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n/* Overlay gradient with text */\n.feature-card__overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\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  z-index: 1;\n  /* Desktop: pt-124px px-32px pb-32px */\n  padding: 124px 32px 32px 32px;\n\n  /* White text on dark overlay */\n  --af-typography-heading-primary: var(--typography-heading-secondary, #ffffff);\n  --af-typography-heading-secondary: var(--typography-heading-secondary, #ffffff);\n  --af-typography-body-default: var(--typography-body-dark, #ffffff);\n  --colour-typography-heading-primary: var(--typography-heading-secondary, #ffffff);\n  --colour-typography-heading-secondary: var(--typography-heading-secondary, #ffffff);\n  --colour-typography-body-default: var(--typography-body-dark, #ffffff);\n}\n\n/* ==========================================================================\n   Standard Layout Mode\n   \n   Structure: .feature-card > af-card[stretch] > [content] + [image-area]\n   \n   When cardSize=\"flexible\", af-card receives stretch prop which enables\n   the flex chain. Content grows to fill space, image stays at bottom.\n   ========================================================================== */\n\n.feature-card--layout-standard {\n  background: var(--background-level-1, var(--colour-mistgreen-200, #e8eeed));\n}\n\n/* Standard flexible minimum height */\n:host([card-size=\"flexible\"]) .feature-card--layout-standard {\n  min-height: 400px;\n}\n\n/* Content area - grows to push image to bottom (when af-card has stretch) */\n.feature-card__content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  z-index: 1;\n  /* Desktop default: pt-40px px-32px pb-12px */\n  padding: 40px 32px 12px 32px;\n  flex: 1 1 auto;\n}\n\n/* Large card content padding: pt-40px px-40px pb-0 */\n:host([card-size=\"large\"]) .feature-card__content {\n  padding: 40px 40px 0 40px;\n}\n\n/* ==========================================================================\n   Image Area (Standard Layout)\n   Figma: 160px height (desktop), 192px height (mobile)\n   ========================================================================== */\n\n.feature-card__image-area {\n  position: relative;\n  width: 100%;\n  height: 160px;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.feature-card__image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center top;\n}\n\n/* ==========================================================================\n   Typography Lockup Styling\n   ========================================================================== */\n\n.feature-card af-typography-lockup {\n  --colour-typography-heading-primary: var(--af-typography-heading-primary, var(--typography-heading-primary, #14343b));\n  --colour-typography-body-default: var(--af-typography-body-default, var(--typography-body-default, #2b484f));\n}\n\n/* ==========================================================================\n   Mobile Responsive Styles (max-width: 768px)\n   \n   Figma:\n   - Full-bleed: 335px × 442px, radius 24px\n   - Standard: 335px width, radius 24px\n   ========================================================================== */\n\n@media (max-width: 768px) {\n  .feature-card {\n    border-radius: var(--border-radius-card-level-1, 24px);\n  }\n\n  /* Mobile fixed widths on host */\n  :host([card-size=\"default\"]),\n  :host([card-size=\"large\"]) {\n    width: 335px;\n  }\n\n  /* Mobile full-bleed height: 442px */\n  :host([card-size=\"default\"]) .feature-card--layout-full-bleed,\n  :host([card-size=\"large\"]) .feature-card--layout-full-bleed {\n    height: 442px;\n  }\n\n  /* Mobile flexible minimum heights */\n  :host([card-size=\"flexible\"]) .feature-card--layout-standard {\n    min-height: 340px;\n  }\n\n  :host([card-size=\"flexible\"]) .feature-card--layout-full-bleed {\n    min-height: 380px;\n  }\n\n  /* Mobile overlay padding: pt-80px px-24px pb-28px */\n  .feature-card__overlay {\n    padding: 80px 24px 28px 24px;\n  }\n\n  /* Mobile content padding: pt-32px px-24px pb-12px */\n  .feature-card__content {\n    padding: 32px 24px 12px 24px;\n  }\n\n  /* Mobile image area: 192px height */\n  .feature-card__image-area {\n    height: 192px;\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Feature Card molecule component that combines a card with an image.\n * \n * Two layout modes:\n * - `standard`: Theme background with text at top and image at bottom\n * - `full-bleed`: Image covers entire card with text overlay at bottom\n * \n * Responsive: Automatically adapts to mobile viewport (≤768px).\n * \n * Uses af-card atom internally and af-typography-lockup for text hierarchy.\n * \n * @slot - Heading text content\n * @slot body - Description/body text content\n */\n@Component({\n  tag: 'af-feature-card',\n  styleUrl: 'af-feature-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfFeatureCard {\n  /**\n   * Theme variant - sets background color and provides theme context.\n   * Only applies to 'standard' layout mode. Defaults to 'mist-green'.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * Layout mode for the card.\n   * - 'standard': Theme background with text at top and image at bottom\n   * - 'full-bleed': Image covers entire card with text overlay at bottom\n   */\n  @Prop() layout: 'standard' | 'full-bleed' = 'standard';\n\n  /**\n   * Card size variant.\n   * - 'default': Fixed 544px × 420px\n   * - 'large': Fixed 777px × 480px  \n   * - 'flexible': Fills container (for grid layouts)\n   */\n  @Prop({ reflect: true }) cardSize: 'default' | 'large' | 'flexible' = 'default';\n\n  /**\n   * Heading size for typography lockup (1-5, where 1 is largest).\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 3;\n\n  /**\n   * Background/feature image URL.\n   */\n  @Prop() imageSrc?: string;\n\n  /**\n   * Image alt text for accessibility.\n   * Provide meaningful alt text for feature images.\n   * Only use empty string for purely decorative images.\n   */\n  @Prop() imageAlt: string = '';\n\n  render() {\n    const hasImage = !!this.imageSrc;\n    const isFullBleed = this.layout === 'full-bleed';\n\n    const wrapperClasses = {\n      'feature-card': true,\n      [`feature-card--layout-${this.layout}`]: true,\n      [`feature-card--size-${this.cardSize}`]: true,\n    };\n\n    // Full-bleed mode: image background with overlay\n    if (isFullBleed) {\n      return (\n        <Host>\n          <div class={wrapperClasses}>\n            {/* Background image */}\n            {hasImage && (\n              <div class=\"feature-card__background\">\n                <img\n                  src={this.imageSrc}\n                  alt={this.imageAlt}\n                  class=\"feature-card__background-image\"\n                />\n              </div>\n            )}\n\n            {/* Content overlay with gradient */}\n            <div class=\"feature-card__overlay\">\n              <af-typography-lockup\n                headingSize={this.headingSize}\n                textAlignment=\"left\"\n                buttonAlignment=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    // Standard mode: theme card with image at bottom\n    const isFlexible = this.cardSize === 'flexible';\n    \n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          <af-card theme={this.theme} stretch={isFlexible}>\n            {/* Content area with typography lockup */}\n            <div class=\"feature-card__content\">\n              <af-typography-lockup\n                headingSize={this.headingSize}\n                textAlignment=\"left\"\n                buttonAlignment=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n\n            {/* Image area at bottom */}\n            {hasImage && (\n              <div class=\"feature-card__image-area\">\n                <img\n                  src={this.imageSrc}\n                  alt={this.imageAlt}\n                  class=\"feature-card__image\"\n                />\n              </div>\n            )}\n          </af-card>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BQz_OQzK.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,knHAAknH;;MCsB9nH,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAN1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAsE,YAAY;AAE/F;;;;AAIG;AACK,QAAA,IAAM,CAAA,MAAA,GAA8B,UAAU;AAEtD;;;;;AAKG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAqC,SAAS;AAE/E;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAsB,CAAC;AAO1C;;;;AAIG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAkF9B;IAhFC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ;AAChC,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,YAAY;AAEhD,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,cAAc,EAAE,IAAI;AACpB,YAAA,CAAC,wBAAwB,IAAI,CAAC,MAAM,CAAE,CAAA,GAAG,IAAI;AAC7C,YAAA,CAAC,sBAAsB,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;SAC9C;;QAGD,IAAI,WAAW,EAAE;YACf,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EAEvB,QAAQ,KACP,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,gCAAgC,EAAA,CACtC,CACE,CACP,EAGD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,sBAAA,EAAA,EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU,EAAA,EAE1B,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,EACb,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtB,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAQ,CAAA,CACpB,CACc,CACnB,CACF,CACD;;;AAKX,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,KAAK,UAAU;AAE/C,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxB,CAAS,CAAA,SAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,EAAA,EAE7C,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,sBAAA,EAAA,EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU,EAAA,EAE1B,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,EACb,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,EAAQ,CAAA,CACpB,CACc,CACnB,EAGL,QAAQ,KACP,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CACE,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,qBAAqB,EAC3B,CAAA,CACE,CACP,CACO,CACN,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-feature-card/af-feature-card.css?tag=af-feature-card&encapsulation=scoped","src/components/af-feature-card/af-feature-card.tsx"],"sourcesContent":["/* ==========================================================================\n   Feature Card - Figma Specs\n   \n   Desktop Full-bleed: 544px × 660px, radius 32px\n   Desktop Standard default: 544px width, radius 32px\n   Desktop Standard large: 777px width, radius 32px\n   Mobile Full-bleed: 335px × 442px, radius 24px\n   Mobile Standard: 335px width, radius 24px\n   ========================================================================== */\n\n/* ==========================================================================\n   Host Element - Controls outer dimensions\n   ========================================================================== */\n\n:host {\n  display: block;\n  --af-card-padding: 0;\n  --af-card-gap: 0;\n}\n\n/* Fixed size hosts constrain to Figma dimensions */\n:host([card-size=\"default\"]) {\n  width: 544px;\n}\n\n:host([card-size=\"large\"]) {\n  width: 777px;\n}\n\n/* Flexible cards fill their container */\n:host([card-size=\"flexible\"]) {\n  display: flex;\n  width: 100%;\n  height: 100%;\n}\n\n/* ==========================================================================\n   Base Feature Card Styles\n   ========================================================================== */\n\n.feature-card {\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border-radius: var(--border-radius-card-level-1, 32px);\n  width: 100%;\n  height: 100%;\n}\n\n/* ==========================================================================\n   Full Bleed Layout Mode\n   Figma: 544px × 660px (desktop), 335px × 442px (mobile)\n   ========================================================================== */\n\n.feature-card--layout-full-bleed {\n  background: var(--background-base, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Full-bleed fixed sizes have explicit heights on host */\n:host([card-size=\"default\"]) .feature-card--layout-full-bleed,\n:host([card-size=\"large\"]) .feature-card--layout-full-bleed {\n  height: 660px;\n}\n\n/* Full-bleed flexible minimum height */\n:host([card-size=\"flexible\"]) .feature-card--layout-full-bleed {\n  min-height: 480px;\n}\n\n.feature-card__background {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n}\n\n.feature-card__background-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n\n/* Overlay gradient with text */\n.feature-card__overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\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  z-index: 1;\n  /* Desktop: pt-124px px-32px pb-32px */\n  padding: 124px 32px 32px 32px;\n\n  /* White text on dark overlay */\n  --af-typography-heading-primary: var(--typography-heading-secondary, #ffffff);\n  --af-typography-heading-secondary: var(--typography-heading-secondary, #ffffff);\n  --af-typography-body-default: var(--typography-body-dark, #ffffff);\n  --colour-typography-heading-primary: var(--typography-heading-secondary, #ffffff);\n  --colour-typography-heading-secondary: var(--typography-heading-secondary, #ffffff);\n  --colour-typography-body-default: var(--typography-body-dark, #ffffff);\n}\n\n/* ==========================================================================\n   Standard Layout Mode\n   \n   Structure: .feature-card > af-card[stretch] > [content] + [image-area]\n   \n   When cardSize=\"flexible\", af-card receives stretch prop which enables\n   the flex chain. Content grows to fill space, image stays at bottom.\n   ========================================================================== */\n\n.feature-card--layout-standard {\n  background: var(--background-level-1, var(--colour-mistgreen-200, #e8eeed));\n}\n\n/* Standard flexible minimum height */\n:host([card-size=\"flexible\"]) .feature-card--layout-standard {\n  min-height: 400px;\n}\n\n/* Content area - grows to push image to bottom (when af-card has stretch) */\n.feature-card__content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  z-index: 1;\n  /* Desktop default: pt-40px px-32px pb-12px */\n  padding: 40px 32px 12px 32px;\n  flex: 1 1 auto;\n}\n\n/* Large card content padding: pt-40px px-40px pb-0 */\n:host([card-size=\"large\"]) .feature-card__content {\n  padding: 40px 40px 0 40px;\n}\n\n/* ==========================================================================\n   Image Area (Standard Layout)\n   Figma: 160px height (desktop), 192px height (mobile)\n   ========================================================================== */\n\n.feature-card__image-area {\n  position: relative;\n  width: 100%;\n  height: 160px;\n  flex-shrink: 0;\n  overflow: hidden;\n}\n\n.feature-card__image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center top;\n}\n\n/* ==========================================================================\n   Typography Lockup Styling\n   ========================================================================== */\n\n.feature-card af-typography-lockup {\n  --colour-typography-heading-primary: var(--af-typography-heading-primary, var(--typography-heading-primary, #14343b));\n  --colour-typography-body-default: var(--af-typography-body-default, var(--typography-body-default, #2b484f));\n}\n\n/* ==========================================================================\n   Mobile Responsive Styles (max-width: 768px)\n   \n   Figma:\n   - Full-bleed: 335px × 442px, radius 24px\n   - Standard: 335px width, radius 24px\n   ========================================================================== */\n\n@media (max-width: 768px) {\n  .feature-card {\n    border-radius: var(--border-radius-card-level-1, 24px);\n  }\n\n  /* Mobile fixed widths on host */\n  :host([card-size=\"default\"]),\n  :host([card-size=\"large\"]) {\n    width: 335px;\n  }\n\n  /* Mobile full-bleed height: 442px */\n  :host([card-size=\"default\"]) .feature-card--layout-full-bleed,\n  :host([card-size=\"large\"]) .feature-card--layout-full-bleed {\n    height: 442px;\n  }\n\n  /* Mobile flexible minimum heights */\n  :host([card-size=\"flexible\"]) .feature-card--layout-standard {\n    min-height: 340px;\n  }\n\n  :host([card-size=\"flexible\"]) .feature-card--layout-full-bleed {\n    min-height: 380px;\n  }\n\n  /* Mobile overlay padding: pt-80px px-24px pb-28px */\n  .feature-card__overlay {\n    padding: 80px 24px 28px 24px;\n  }\n\n  /* Mobile content padding: pt-32px px-24px pb-12px */\n  .feature-card__content {\n    padding: 32px 24px 12px 24px;\n  }\n\n  /* Mobile image area: 192px height */\n  .feature-card__image-area {\n    height: 192px;\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Feature Card molecule component that combines a card with an image.\n * \n * Two layout modes:\n * - `standard`: Theme background with text at top and image at bottom\n * - `full-bleed`: Image covers entire card with text overlay at bottom\n * \n * Responsive: Automatically adapts to mobile viewport (≤768px).\n * \n * Uses af-card atom internally and af-typography-lockup for text hierarchy.\n * \n * @slot - Heading text content\n * @slot body - Description/body text content\n */\n@Component({\n  tag: 'af-feature-card',\n  styleUrl: 'af-feature-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfFeatureCard {\n  /**\n   * Theme variant - sets background color and provides theme context.\n   * Only applies to 'standard' layout mode. Defaults to 'mist-green'.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * Layout mode for the card.\n   * - 'standard': Theme background with text at top and image at bottom\n   * - 'full-bleed': Image covers entire card with text overlay at bottom\n   */\n  @Prop() layout: 'standard' | 'full-bleed' = 'standard';\n\n  /**\n   * Card size variant.\n   * - 'default': Fixed 544px × 420px\n   * - 'large': Fixed 777px × 480px  \n   * - 'flexible': Fills container (for grid layouts)\n   */\n  @Prop({ reflect: true }) cardSize: 'default' | 'large' | 'flexible' = 'default';\n\n  /**\n   * Heading size for typography lockup (1-5, where 1 is largest).\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 3;\n\n  /**\n   * Background/feature image URL.\n   */\n  @Prop() imageSrc?: string;\n\n  /**\n   * Image alt text for accessibility.\n   * Provide meaningful alt text for feature images.\n   * Only use empty string for purely decorative images.\n   */\n  @Prop() imageAlt: string = '';\n\n  render() {\n    const hasImage = !!this.imageSrc;\n    const isFullBleed = this.layout === 'full-bleed';\n\n    const wrapperClasses = {\n      'feature-card': true,\n      [`feature-card--layout-${this.layout}`]: true,\n      [`feature-card--size-${this.cardSize}`]: true,\n    };\n\n    // Full-bleed mode: image background with overlay\n    if (isFullBleed) {\n      return (\n        <Host>\n          <div class={wrapperClasses}>\n            {/* Background image */}\n            {hasImage && (\n              <div class=\"feature-card__background\">\n                <img\n                  src={this.imageSrc}\n                  alt={this.imageAlt}\n                  class=\"feature-card__background-image\"\n                />\n              </div>\n            )}\n\n            {/* Content overlay with gradient */}\n            <div class=\"feature-card__overlay\">\n              <af-typography-lockup\n                headingSize={this.headingSize}\n                textAlignment=\"left\"\n                buttonAlignment=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    // Standard mode: theme card with image at bottom\n    const isFlexible = this.cardSize === 'flexible';\n    \n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          <af-card theme={this.theme} stretch={isFlexible}>\n            {/* Content area with typography lockup */}\n            <div class=\"feature-card__content\">\n              <af-typography-lockup\n                headingSize={this.headingSize}\n                textAlignment=\"left\"\n                buttonAlignment=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n\n            {/* Image area at bottom */}\n            {hasImage && (\n              <div class=\"feature-card__image-area\">\n                <img\n                  src={this.imageSrc}\n                  alt={this.imageAlt}\n                  class=\"feature-card__image\"\n                />\n              </div>\n            )}\n          </af-card>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DZ-qivXD.js → p-BUoRUEpQ.js}

@@ -23,7 +23,7 @@ const AfIconBox = /*@__PURE__*/ proxyCustomElement(class AfIconBox extends H {
             [`icon-box--size-${this.size}`]: true,
         };
         const iconSize = this.size === 'small' ? 20 : this.size === 'large' ? 48 : 40;
-        return (h(Host, { key: 'f98a89d393a98dbb00fe8f3d47c22e18392015c9' }, h("div", { key: '5f899eafc9b55126f495ba5ac60e768454bde2c9', class: containerClasses }, h("af-icon", { key: '1be5097838ffb99ac6b127d3848327bbe24f6e7e', name: this.icon, size: iconSize }))));
+        return (h(Host, { key: '961d990c78faedbaa7595e26966edd712ffe323a' }, h("div", { key: '499bd1a36c589994cd1f1c848450aa0fe3d43ac0', class: containerClasses }, h("af-icon", { key: '6b48d327dc1a712e764f9ff783ba904252f9873d', name: this.icon, size: iconSize }))));
     }
     static get style() { return afIconBoxCss; }
 }, [258, "af-icon-box", {
@@ -50,6 +50,6 @@ function defineCustomElement() {
 }
 
 export { AfIconBox as A, defineCustomElement as d };
-//# sourceMappingURL=p-DZ-qivXD.js.map
+//# sourceMappingURL=p-BUoRUEpQ.js.map
 
-//# sourceMappingURL=p-DZ-qivXD.js.map
+//# sourceMappingURL=p-BUoRUEpQ.js.map

package/dist/components/{p-DZ-qivXD.js.map → p-BUoRUEpQ.js.map}

@@ -1 +1 @@
-{"file":"p-DZ-qivXD.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,6lBAA6lB;;MCqBrmB,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAYE;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,SAAS;AAkBxD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;SACtC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,EAAE;QAE7E,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAA,CAAY,CAChD,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-icon-box/af-icon-box.css?tag=af-icon-box&encapsulation=scoped","src/components/af-icon-box/af-icon-box.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.icon-box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 16px;\n  background-color: var(--af-background-contrast, var(--colour-brand-mist-green, #c6d5d1));\n  color: var(--af-background-icon-default, var(--colour-brand-inkwell, #14343b));\n  flex-shrink: 0;\n}\n\n/* Size variants */\n.icon-box--size-small {\n  width: 48px;\n  height: 48px;\n  padding: 14px;\n  border-radius: 12px;\n}\n\n.icon-box--size-default {\n  width: 64px;\n  height: 64px;\n  padding: 12px;\n  border-radius: 16px;\n}\n\n.icon-box--size-large {\n  width: 80px;\n  height: 80px;\n  padding: 16px;\n  border-radius: 20px;\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\nimport type { IconName } from '@affinda/icons';\n\n/**\n * IconBox atom - a themed container for displaying an icon with a rounded background.\n * \n * Inherits theme colors from parent Section via CSS custom properties:\n * - Background uses `--af-background-contrast`\n * - Icon color uses `--af-background-icon-default`\n * \n * @example\n * ```html\n * <af-icon-box icon=\"settings\" size=\"default\"></af-icon-box>\n * ```\n */\n@Component({\n  tag: 'af-icon-box',\n  styleUrl: 'af-icon-box.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIconBox {\n  /**\n   * The name of the icon to display (from @affinda/icons)\n   */\n  @Prop() icon!: IconName;\n\n  /**\n   * Size variant of the icon box\n   * - 'small': 48px container, 20px icon\n   * - 'default': 64px container, 40px icon\n   * - 'large': 80px container, 48px icon\n   */\n  @Prop() size: 'small' | 'default' | 'large' = 'default';\n\n  render() {\n    const containerClasses = {\n      'icon-box': true,\n      [`icon-box--size-${this.size}`]: true,\n    };\n\n    const iconSize = this.size === 'small' ? 20 : this.size === 'large' ? 48 : 40;\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <af-icon name={this.icon} size={iconSize}></af-icon>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"p-BUoRUEpQ.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,6lBAA6lB;;MCqBrmB,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAYE;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,SAAS;AAkBxD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;SACtC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,EAAE,GAAG,EAAE;QAE7E,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAA,CAAY,CAChD,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-icon-box/af-icon-box.css?tag=af-icon-box&encapsulation=scoped","src/components/af-icon-box/af-icon-box.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.icon-box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 16px;\n  background-color: var(--af-background-contrast, var(--colour-brand-mist-green, #c6d5d1));\n  color: var(--af-background-icon-default, var(--colour-brand-inkwell, #14343b));\n  flex-shrink: 0;\n}\n\n/* Size variants */\n.icon-box--size-small {\n  width: 48px;\n  height: 48px;\n  padding: 14px;\n  border-radius: 12px;\n}\n\n.icon-box--size-default {\n  width: 64px;\n  height: 64px;\n  padding: 12px;\n  border-radius: 16px;\n}\n\n.icon-box--size-large {\n  width: 80px;\n  height: 80px;\n  padding: 16px;\n  border-radius: 20px;\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\nimport type { IconName } from '@affinda/icons';\n\n/**\n * IconBox atom - a themed container for displaying an icon with a rounded background.\n * \n * Inherits theme colors from parent Section via CSS custom properties:\n * - Background uses `--af-background-contrast`\n * - Icon color uses `--af-background-icon-default`\n * \n * @example\n * ```html\n * <af-icon-box icon=\"settings\" size=\"default\"></af-icon-box>\n * ```\n */\n@Component({\n  tag: 'af-icon-box',\n  styleUrl: 'af-icon-box.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIconBox {\n  /**\n   * The name of the icon to display (from @affinda/icons)\n   */\n  @Prop() icon!: IconName;\n\n  /**\n   * Size variant of the icon box\n   * - 'small': 48px container, 20px icon\n   * - 'default': 64px container, 40px icon\n   * - 'large': 80px container, 48px icon\n   */\n  @Prop() size: 'small' | 'default' | 'large' = 'default';\n\n  render() {\n    const containerClasses = {\n      'icon-box': true,\n      [`icon-box--size-${this.size}`]: true,\n    };\n\n    const iconSize = this.size === 'small' ? 20 : this.size === 'large' ? 48 : 40;\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <af-icon name={this.icon} size={iconSize}></af-icon>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/{p-Cqp0DdgH.js → p-Bi5ytUXg.js}

@@ -26,11 +26,11 @@ const AfTag = /*@__PURE__*/ proxyCustomElement(class AfTag extends H {
     render() {
         const TagElement = this.href ? 'a' : 'span';
         const linkProps = this.href ? { href: this.href } : {};
-        return (h(Host, { key: '82b1f25a939716973c927f59e82808572004e871' }, h(TagElement, { key: 'e4a524e0f4dd496ca5485d865549bd0b063bd4ac', class: {
+        return (h(Host, { key: '7114f4a8e55509fb2c45561967d0dab339b7a75c' }, h(TagElement, { key: '868a14474ecd8edb4a90489d39913e5862c033c4', class: {
                 'tag': true,
                 [`size-${this.size}`]: true,
                 [`variant-${this.variant}`]: true,
-            }, ...linkProps }, h("slot", { key: '07202b985638722997e8aff2bad13ed5d1aa8d2c' }))));
+            }, ...linkProps }, h("slot", { key: '57d2975785b2ec3ac74256510c1a26bfe2b6d96b' }))));
     }
     static get style() { return afTagCss; }
 }, [257, "af-tag", {
@@ -53,6 +53,6 @@ function defineCustomElement() {
 }
 
 export { AfTag as A, defineCustomElement as d };
-//# sourceMappingURL=p-Cqp0DdgH.js.map
+//# sourceMappingURL=p-Bi5ytUXg.js.map
 
-//# sourceMappingURL=p-Cqp0DdgH.js.map
+//# sourceMappingURL=p-Bi5ytUXg.js.map

package/dist/components/{p-Cqp0DdgH.js.map → p-Bi5ytUXg.js.map}

@@ -1 +1 @@
-{"file":"p-Cqp0DdgH.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,2hDAA2hD;;MCqB/hD,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,OAAO;AAE/B;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAe,MAAM;AA0BrC;IAnBC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,MAAM;AAC3C,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;QAEtD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAC,CAAA,UAAU,EACT,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC3B,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AAClC,aAAA,EAAA,GACG,SAAS,EAAA,EAEb,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACG,CACR;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-tag/af-tag.css?tag=af-tag&encapsulation=shadow","src/components/af-tag/af-tag.tsx"],"sourcesContent":["/* Tag component styles */\n:host {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n  border-radius: 4px;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  line-height: 1;\n  text-decoration: none;\n  transition: background-color 0.15s ease, box-shadow 0.15s ease;\n  cursor: default;\n}\n\n/* Make links look clickable */\na.tag {\n  cursor: pointer;\n}\n\n/* ==========================================================================\n   VARIANT: SAND (Soft-clay/tan colored - default)\n   ========================================================================== */\n\n.tag.variant-sand {\n  background-color: var(--af-tag-sand-bg, var(--colour-brand-soft-clay, #b09670));\n  color: var(--af-tag-sand-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag.variant-sand:hover {\n  background-color: var(--af-tag-sand-bg-hover, var(--colour-softclay-400, #c0ab8d));\n}\n\n/* ==========================================================================\n   VARIANT: LIGHT (Mist-green/light colored)\n   ========================================================================== */\n\n.tag.variant-light {\n  background-color: var(--af-tag-light-bg, var(--colour-background-level1, #e8eeed));\n  color: var(--af-tag-light-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag.variant-light:hover {\n  background-color: var(--af-tag-light-bg-hover, var(--colour-tints-mist-green-200, #d2e8e3));\n}\n\n/* ==========================================================================\n   SIZES\n   ========================================================================== */\n\n/* Size: X-Small */\n.tag.size-x-small {\n  padding: 6px 10px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n/* Size: Small */\n.tag.size-small {\n  padding: 8px 12px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n/* Size: Large */\n.tag.size-large {\n  padding: 12px 16px;\n  font-size: var(--font-size-body-large, 18px);\n}\n\n/* ==========================================================================\n   FOCUS STATES\n   ========================================================================== */\n\n/* Focus state */\n.tag:focus {\n  outline: none;\n  box-shadow: \n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Focus visible for keyboard navigation */\n.tag:focus-visible {\n  outline: none;\n  box-shadow: \n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type TagSize = 'x-small' | 'small' | 'large';\nexport type TagVariant = 'sand' | 'light';\n\n/**\n * Tag displays a label in a styled container.\n * Perfect for categorization, topics, or metadata display.\n * \n * @example\n * ```html\n * <af-tag>AI</af-tag>\n * <af-tag size=\"small\">Machine Learning</af-tag>\n * <af-tag size=\"large\" variant=\"light\">Document Processing</af-tag>\n * ```\n */\n@Component({\n  tag: 'af-tag',\n  styleUrl: 'af-tag.css',\n  shadow: true\n})\nexport class AfTag {\n  /**\n   * The size of the tag\n   * - `x-small` - Compact tag with minimal padding\n   * - `small` - Small tag with moderate padding\n   * - `large` - Large tag with generous padding\n   */\n  @Prop() size: TagSize = 'small';\n\n  /**\n   * The visual variant of the tag\n   * - `sand` - Soft-clay/tan colored background (default)\n   * - `light` - Mist-green/light colored background\n   */\n  @Prop() variant: TagVariant = 'sand';\n\n  /**\n   * The URL to navigate to when the tag is clicked (makes the tag a link)\n   */\n  @Prop() href?: string;\n\n  render() {\n    const TagElement = this.href ? 'a' : 'span';\n    const linkProps = this.href ? { href: this.href } : {};\n\n    return (\n      <Host>\n        <TagElement\n          class={{\n            'tag': true,\n            [`size-${this.size}`]: true,\n            [`variant-${this.variant}`]: true,\n          }}\n          {...linkProps}\n        >\n          <slot />\n        </TagElement>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"p-Bi5ytUXg.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,2hDAA2hD;;MCqB/hD,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;;;;AAKG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,OAAO;AAE/B;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAe,MAAM;AA0BrC;IAnBC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,MAAM;AAC3C,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;QAEtD,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAC,CAAA,UAAU,EACT,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;AACX,gBAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC3B,gBAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AAClC,aAAA,EAAA,GACG,SAAS,EAAA,EAEb,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACG,CACR;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-tag/af-tag.css?tag=af-tag&encapsulation=shadow","src/components/af-tag/af-tag.tsx"],"sourcesContent":["/* Tag component styles */\n:host {\n  display: inline-flex;\n  flex-shrink: 0;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n  border-radius: 4px;\n  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  line-height: 1;\n  text-decoration: none;\n  transition: background-color 0.15s ease, box-shadow 0.15s ease;\n  cursor: default;\n}\n\n/* Make links look clickable */\na.tag {\n  cursor: pointer;\n}\n\n/* ==========================================================================\n   VARIANT: SAND (Soft-clay/tan colored - default)\n   ========================================================================== */\n\n.tag.variant-sand {\n  background-color: var(--af-tag-sand-bg, var(--colour-brand-soft-clay, #b09670));\n  color: var(--af-tag-sand-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag.variant-sand:hover {\n  background-color: var(--af-tag-sand-bg-hover, var(--colour-softclay-400, #c0ab8d));\n}\n\n/* ==========================================================================\n   VARIANT: LIGHT (Mist-green/light colored)\n   ========================================================================== */\n\n.tag.variant-light {\n  background-color: var(--af-tag-light-bg, var(--colour-background-level1, #e8eeed));\n  color: var(--af-tag-light-text, var(--colour-brand-inkwell, #14343b));\n}\n\n.tag.variant-light:hover {\n  background-color: var(--af-tag-light-bg-hover, var(--colour-tints-mist-green-200, #d2e8e3));\n}\n\n/* ==========================================================================\n   SIZES\n   ========================================================================== */\n\n/* Size: X-Small */\n.tag.size-x-small {\n  padding: 6px 10px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n/* Size: Small */\n.tag.size-small {\n  padding: 8px 12px;\n  font-size: var(--font-size-label-tag, 14px);\n}\n\n/* Size: Large */\n.tag.size-large {\n  padding: 12px 16px;\n  font-size: var(--font-size-body-large, 18px);\n}\n\n/* ==========================================================================\n   FOCUS STATES\n   ========================================================================== */\n\n/* Focus state */\n.tag:focus {\n  outline: none;\n  box-shadow: \n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Focus visible for keyboard navigation */\n.tag:focus-visible {\n  outline: none;\n  box-shadow: \n    0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),\n    0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type TagSize = 'x-small' | 'small' | 'large';\nexport type TagVariant = 'sand' | 'light';\n\n/**\n * Tag displays a label in a styled container.\n * Perfect for categorization, topics, or metadata display.\n * \n * @example\n * ```html\n * <af-tag>AI</af-tag>\n * <af-tag size=\"small\">Machine Learning</af-tag>\n * <af-tag size=\"large\" variant=\"light\">Document Processing</af-tag>\n * ```\n */\n@Component({\n  tag: 'af-tag',\n  styleUrl: 'af-tag.css',\n  shadow: true\n})\nexport class AfTag {\n  /**\n   * The size of the tag\n   * - `x-small` - Compact tag with minimal padding\n   * - `small` - Small tag with moderate padding\n   * - `large` - Large tag with generous padding\n   */\n  @Prop() size: TagSize = 'small';\n\n  /**\n   * The visual variant of the tag\n   * - `sand` - Soft-clay/tan colored background (default)\n   * - `light` - Mist-green/light colored background\n   */\n  @Prop() variant: TagVariant = 'sand';\n\n  /**\n   * The URL to navigate to when the tag is clicked (makes the tag a link)\n   */\n  @Prop() href?: string;\n\n  render() {\n    const TagElement = this.href ? 'a' : 'span';\n    const linkProps = this.href ? { href: this.href } : {};\n\n    return (\n      <Host>\n        <TagElement\n          class={{\n            'tag': true,\n            [`size-${this.size}`]: true,\n            [`variant-${this.variant}`]: true,\n          }}\n          {...linkProps}\n        >\n          <slot />\n        </TagElement>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/{p-xDRMXxWJ.js → p-BvIMp8pz.js}

@@ -10,7 +10,7 @@ const AfImage = /*@__PURE__*/ proxyCustomElement(class AfImage extends H {
         }
     }
     render() {
-        return (h(Host, { key: 'dd1304f9c9c6c757638ddd67ee312534819e9e48' }, h("div", { key: '4ecbd48548404ecf0839eb15fef64dcb7b2d0757', class: "image-container" }, h("img", { key: '73d9d87b21b3aec12f708f19a83f91622b5bb896', src: this.src, alt: this.alt, class: "image" }), h("div", { key: 'e54f1dbc2ec4976056e58a570420fd3f772907cf', class: "image-border", "aria-hidden": "true" }))));
+        return (h(Host, { key: '96f56008e769e15ec20399b2911563a7be1561b9' }, h("div", { key: 'a4b7eb695f4a7074e657f5cfb947a472f3bf9ae9', class: "image-container" }, h("img", { key: 'fcd9e6ca93ea345cf7a94a895b5161c79c9fe776', src: this.src, alt: this.alt, class: "image" }), h("div", { key: 'cee231a0d19312cc4659da8707d3e31955dcad18', class: "image-border", "aria-hidden": "true" }))));
     }
     static get style() { return afImageCss; }
 }, [258, "af-image", {
@@ -32,6 +32,6 @@ function defineCustomElement() {
 }
 
 export { AfImage as A, defineCustomElement as d };
-//# sourceMappingURL=p-xDRMXxWJ.js.map
+//# sourceMappingURL=p-BvIMp8pz.js.map
 
-//# sourceMappingURL=p-xDRMXxWJ.js.map
+//# sourceMappingURL=p-BvIMp8pz.js.map

package/dist/components/{p-xDRMXxWJ.js.map → p-BvIMp8pz.js.map}

@@ -1 +1 @@
-{"file":"p-xDRMXxWJ.js","mappings":";;AAAA,MAAM,UAAU,GAAG,uZAAuZ;;MCY7Z,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;;;;;;;IAWlB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,OAAO,EAAG,CAAA,EACnD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,aAAA,EAAa,MAAM,EAAO,CAAA,CAC/C,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-image/af-image.css?tag=af-image&encapsulation=scoped","src/components/af-image/af-image.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.image-container {\n  position: relative;\n  border-radius: var(--radius-md, 12px);\n  overflow: hidden;\n}\n\n.image {\n  display: block;\n  width: 100%;\n  height: auto;\n  object-fit: cover;\n}\n\n/* Inset border overlay */\n.image-border {\n  position: absolute;\n  inset: 0;\n  border-radius: var(--radius-md, 12px);\n  box-shadow: inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));\n  pointer-events: none;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A styled image container with rounded corners and a subtle inset border.\n * Provides consistent image styling across the design system.\n */\n@Component({\n  tag: 'af-image',\n  styleUrl: 'af-image.css',\n  shadow: false,\n  scoped: true\n})\nexport class AfImage {\n  /**\n   * The image source URL\n   */\n  @Prop() src!: string;\n\n  /**\n   * Alternative text for the image (required for accessibility)\n   */\n  @Prop() alt!: string;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"image-container\">\n          <img src={this.src} alt={this.alt} class=\"image\" />\n          <div class=\"image-border\" aria-hidden=\"true\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"p-BvIMp8pz.js","mappings":";;AAAA,MAAM,UAAU,GAAG,uZAAuZ;;MCY7Z,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;;;;;;;IAWlB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,OAAO,EAAG,CAAA,EACnD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,aAAA,EAAa,MAAM,EAAO,CAAA,CAC/C,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-image/af-image.css?tag=af-image&encapsulation=scoped","src/components/af-image/af-image.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.image-container {\n  position: relative;\n  border-radius: var(--radius-md, 12px);\n  overflow: hidden;\n}\n\n.image {\n  display: block;\n  width: 100%;\n  height: auto;\n  object-fit: cover;\n}\n\n/* Inset border overlay */\n.image-border {\n  position: absolute;\n  inset: 0;\n  border-radius: var(--radius-md, 12px);\n  box-shadow: inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));\n  pointer-events: none;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A styled image container with rounded corners and a subtle inset border.\n * Provides consistent image styling across the design system.\n */\n@Component({\n  tag: 'af-image',\n  styleUrl: 'af-image.css',\n  shadow: false,\n  scoped: true\n})\nexport class AfImage {\n  /**\n   * The image source URL\n   */\n  @Prop() src!: string;\n\n  /**\n   * Alternative text for the image (required for accessibility)\n   */\n  @Prop() alt!: string;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"image-container\">\n          <img src={this.src} alt={this.alt} class=\"image\" />\n          <div class=\"image-border\" aria-hidden=\"true\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/{p-Dvi1lz3x.js → p-C8_mFdv5.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
 
-const afCardCss = ".sc-af-card-h{display:block;width:100%}[stretch].sc-af-card-h{display:flex;flex-direction:column;height:100%}[stretch].sc-af-card-h .card.sc-af-card{flex:1 1 auto}[stretch].sc-af-card-h .card__content.sc-af-card{flex:1 1 auto}.card.sc-af-card{border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box}.card.theme-white.sc-af-card{background-color:var(--colour-brand-white, #ffffff);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-mistgreen-200, #e8eeed)}.card.theme-white-ivory.sc-af-card{background-color:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-ivory-200, #ffefcc)}.card.theme-inkwell.sc-af-card{background-color:var(--colour-brand-inkwell, #14343b);--af-typography-heading-primary:var(--colour-brand-mist-green, #c6d5d1);--af-typography-body-default:var(--colour-inkwell-100, #d0d6d8);--af-background-level-1:var(--colour-inkwell-450, #203e45);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff);--af-button-tertiary-text:var(--colour-brand-white, #ffffff);--af-button-tertiary-icon:var(--colour-brand-white, #ffffff)}.card.theme-mist-green.sc-af-card{background-color:var(--colour-brand-mist-green, #c6d5d1);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-mistgreen-300, #dde6e3)}.card.theme-soft-clay.sc-af-card{background-color:var(--colour-softclay-400, #c0ab8d);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-softclay-500, #b09670)}.card__content.sc-af-card{position:relative;padding:var(--af-card-padding, 40px);display:flex;flex-direction:column;gap:var(--af-card-gap, 24px);flex:1;box-sizing:border-box;z-index:1}.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}";
+const afCardCss = ".sc-af-card-h{display:block;width:100%}[stretch].sc-af-card-h{display:flex;flex-direction:column;height:100%}[stretch].sc-af-card-h .card.sc-af-card{flex:1 1 auto}[stretch].sc-af-card-h .card__content.sc-af-card{flex:1 1 auto}.card.sc-af-card{border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;position:relative;display:flex;flex-direction:column;box-sizing:border-box}.card.theme-white.sc-af-card{background-color:var(--colour-brand-white, #ffffff);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-mistgreen-200, #e8eeed)}.card.theme-white-ivory.sc-af-card{background-color:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-ivory-200, #ffefcc)}.card.theme-inkwell.sc-af-card{background-color:var(--colour-brand-inkwell, #14343b);--af-typography-heading-primary:var(--colour-brand-mist-green, #c6d5d1);--af-typography-body-default:var(--colour-inkwell-100, #d0d6d8);--af-background-level-1:var(--colour-inkwell-450, #203e45);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff);--af-button-tertiary-text:var(--colour-brand-white, #ffffff);--af-button-tertiary-icon:var(--colour-brand-white, #ffffff);--af-form-control-bg:var(--colour-inkwell-450, #203e45);--af-form-control-bg-checked:var(--colour-brand-mist-green, #c6d5d1);--af-form-control-bg-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-bg-checked-disabled:var(--colour-mistgreen-700, #9eaaa7);--af-form-control-stroke:var(--colour-inkwell-350, #60767b);--af-form-control-stroke-hover:var(--colour-brand-white, #ffffff);--af-form-control-stroke-disabled:var(--colour-inkwell-400, #2b484f);--af-form-control-icon:var(--colour-brand-inkwell, #14343b);--af-form-control-label:var(--colour-brand-white, #ffffff)}.card.theme-mist-green.sc-af-card{background-color:var(--colour-brand-mist-green, #c6d5d1);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-mistgreen-300, #dde6e3)}.card.theme-soft-clay.sc-af-card{background-color:var(--colour-softclay-400, #c0ab8d);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-background-level-1:var(--colour-softclay-500, #b09670)}.card__content.sc-af-card{position:relative;padding:var(--af-card-padding, 40px);display:flex;flex-direction:column;gap:var(--af-card-gap, 24px);flex:1;box-sizing:border-box;z-index:1}.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}";
 
 const AfCard = /*@__PURE__*/ proxyCustomElement(class AfCard extends H {
     constructor(registerHost) {
@@ -26,7 +26,7 @@ const AfCard = /*@__PURE__*/ proxyCustomElement(class AfCard extends H {
             'card': true,
             [`theme-${this.theme}`]: true
         };
-        return (h(Host, { key: '6cca6ca308005443face72876637fafb9db98d8e' }, h("div", { key: 'c78b8297fdf5e12159e62f6f142cda2663315a21', class: classes }, h("div", { key: 'e18adbc09fcd0ed80f4decd30ebc8a5334ce86ad', class: "card__content" }, h("slot", { key: '312f6852573f1a550e8a67aa6e84a87cde3aaf43' })))));
+        return (h(Host, { key: 'efd6ae011a1fb247ac79b2ecc5feaf4c9589bcba' }, h("div", { key: 'e8e4bba3554986337e2f13c2cf9be83971035158', class: classes }, h("div", { key: 'fecb01569f2b407a1239aa60c66fba67cf3f09dc', class: "card__content" }, h("slot", { key: 'd65732b56be56fe4399297cc35b9f842a7719bd6' })))));
     }
     static get style() { return afCardCss; }
 }, [262, "af-card", {
@@ -48,6 +48,6 @@ function defineCustomElement() {
 }
 
 export { AfCard as A, defineCustomElement as d };
-//# sourceMappingURL=p-Dvi1lz3x.js.map
+//# sourceMappingURL=p-C8_mFdv5.js.map
 
-//# sourceMappingURL=p-Dvi1lz3x.js.map
+//# sourceMappingURL=p-C8_mFdv5.js.map

package/dist/components/{p-Dvi1lz3x.js.map → p-C8_mFdv5.js.map}

@@ -1 +1 @@
-{"file":"p-Dvi1lz3x.js","mappings":";;AAAA,MAAM,SAAS,GAAG,o7EAAo7E;;MCez7E,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AANnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAsE,YAAY;AAE/F;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAkBlD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;SAC1B;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":["/* Theme CSS custom properties follow the global token structure from @affinda/tokens */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Stretch Mode\n   \n   When stretch attribute is present, the card fills its container height\n   and uses flexbox to distribute space between children. This enables\n   equal-height cards in grid/flex layouts.\n   ========================================================================== */\n\n:host([stretch]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n:host([stretch]) .card {\n  flex: 1 1 auto;\n}\n\n:host([stretch]) .card__content {\n  flex: 1 1 auto;\n}\n\n/* ==========================================================================\n   Base Card Styles\n   ========================================================================== */\n\n.card {\n  border-radius: var(--border-radius-card-level-1, 32px);\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n}\n\n/* ==========================================================================\n   Theme Variants\n   \n   Background colors from Figma tokens:\n   - white: #ffffff (Colour/Brand/White)\n   - white-ivory: #fff9ee (Colour/Brand/Ivory-Paper)\n   - inkwell: #14343b (Colour/Brand/Inkwell)\n   - mist-green: #c6d5d1 (Colour/Brand/Mist-Green)\n   - soft-clay: #c0ab8d (Colour/Softclay/400)\n   ========================================================================== */\n\n/* WHITE THEME */\n.card.theme-white {\n  background-color: var(--colour-brand-white, #ffffff);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n}\n\n/* WHITE-IVORY THEME */\n.card.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n}\n\n/* INKWELL THEME (Dark) */\n.card.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  \n  /* Typography - light colors on dark background */\n  --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n  --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n  --af-background-level-1: var(--colour-inkwell-450, #203e45);\n  \n  /* Button variants for dark theme */\n  --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n  --af-button-tertiary-text: var(--colour-brand-white, #ffffff);\n  --af-button-tertiary-icon: var(--colour-brand-white, #ffffff);\n}\n\n/* MIST-GREEN THEME */\n.card.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #c6d5d1);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n}\n\n/* SOFT-CLAY THEME */\n.card.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-softclay-500, #b09670);\n}\n\n/* ==========================================================================\n   Card Content\n   ========================================================================== */\n\n.card__content {\n  position: relative;\n  padding: var(--af-card-padding, 40px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--af-card-gap, 24px);\n  flex: 1;\n  box-sizing: border-box;\n  z-index: 1;\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","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Card atom component - a themed container with consistent styling.\n * Provides theme context to children via CSS custom properties.\n * \n * This is a base building block used by molecule components like\n * af-feature-card and af-illustrated-card.\n */\n@Component({\n  tag: 'af-card',\n  styleUrl: 'af-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfCard {\n  /**\n   * Theme - sets background color and provides theme context to children.\n   * Defaults to 'mist-green' if not specified.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * When true, the card stretches to fill its container height.\n   * Use this when the card is in a flex/grid container and needs to\n   * participate in equal-height layouts. The card's content will use\n   * flexbox to distribute space between children.\n   */\n  @Prop({ reflect: true }) stretch: boolean = false;\n\n  render() {\n    const classes = {\n      'card': true,\n      [`theme-${this.theme}`]: true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"card__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-C8_mFdv5.js","mappings":";;AAAA,MAAM,SAAS,GAAG,u/FAAu/F;;MCe5/F,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AANnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAsE,YAAY;AAE/F;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAkBlD;IAhBC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG;SAC1B;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-card/af-card.css?tag=af-card&encapsulation=scoped","src/components/af-card/af-card.tsx"],"sourcesContent":["/* Theme CSS custom properties follow the global token structure from @affinda/tokens */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n/* ==========================================================================\n   Stretch Mode\n   \n   When stretch attribute is present, the card fills its container height\n   and uses flexbox to distribute space between children. This enables\n   equal-height cards in grid/flex layouts.\n   ========================================================================== */\n\n:host([stretch]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n:host([stretch]) .card {\n  flex: 1 1 auto;\n}\n\n:host([stretch]) .card__content {\n  flex: 1 1 auto;\n}\n\n/* ==========================================================================\n   Base Card Styles\n   ========================================================================== */\n\n.card {\n  border-radius: var(--border-radius-card-level-1, 32px);\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n}\n\n/* ==========================================================================\n   Theme Variants\n   \n   Background colors from Figma tokens:\n   - white: #ffffff (Colour/Brand/White)\n   - white-ivory: #fff9ee (Colour/Brand/Ivory-Paper)\n   - inkwell: #14343b (Colour/Brand/Inkwell)\n   - mist-green: #c6d5d1 (Colour/Brand/Mist-Green)\n   - soft-clay: #c0ab8d (Colour/Softclay/400)\n   ========================================================================== */\n\n/* WHITE THEME */\n.card.theme-white {\n  background-color: var(--colour-brand-white, #ffffff);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);\n}\n\n/* WHITE-IVORY THEME */\n.card.theme-white-ivory {\n  background-color: var(--colour-brand-ivory-paper, #fff9ee);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-ivory-200, #ffefcc);\n}\n\n/* INKWELL THEME (Dark) */\n.card.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  \n  /* Typography - light colors on dark background */\n  --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n  --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n  --af-background-level-1: var(--colour-inkwell-450, #203e45);\n  \n  /* Button variants for dark theme */\n  --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n  --af-button-tertiary-text: var(--colour-brand-white, #ffffff);\n  --af-button-tertiary-icon: var(--colour-brand-white, #ffffff);\n  \n  /* Form control tokens (checkbox, radio, switch) */\n  --af-form-control-bg: var(--colour-inkwell-450, #203e45);\n  --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);\n  --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);\n  --af-form-control-stroke: var(--colour-inkwell-350, #60767b);\n  --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);\n  --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);\n  --af-form-control-icon: var(--colour-brand-inkwell, #14343b);\n  --af-form-control-label: var(--colour-brand-white, #ffffff);\n}\n\n/* MIST-GREEN THEME */\n.card.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #c6d5d1);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);\n}\n\n/* SOFT-CLAY THEME */\n.card.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  \n  /* Typography */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-background-level-1: var(--colour-softclay-500, #b09670);\n}\n\n/* ==========================================================================\n   Card Content\n   ========================================================================== */\n\n.card__content {\n  position: relative;\n  padding: var(--af-card-padding, 40px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--af-card-gap, 24px);\n  flex: 1;\n  box-sizing: border-box;\n  z-index: 1;\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","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Card atom component - a themed container with consistent styling.\n * Provides theme context to children via CSS custom properties.\n * \n * This is a base building block used by molecule components like\n * af-feature-card and af-illustrated-card.\n */\n@Component({\n  tag: 'af-card',\n  styleUrl: 'af-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfCard {\n  /**\n   * Theme - sets background color and provides theme context to children.\n   * Defaults to 'mist-green' if not specified.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * When true, the card stretches to fill its container height.\n   * Use this when the card is in a flex/grid container and needs to\n   * participate in equal-height layouts. The card's content will use\n   * flexbox to distribute space between children.\n   */\n  @Prop({ reflect: true }) stretch: boolean = false;\n\n  render() {\n    const classes = {\n      'card': true,\n      [`theme-${this.theme}`]: true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"card__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-ByHIHg3l.js → p-CAYG3IzP.js}

@@ -23,7 +23,7 @@ const AfButtonGroup = /*@__PURE__*/ proxyCustomElement(class AfButtonGroup exten
             'button-group': true,
             [`direction-${this.direction}`]: true
         };
-        return (h(Host, { key: '28faa5610144730bd66361b304167a0fb64be5d5' }, h("div", { key: 'a4bcc27d77f421dff083f5cccfe261be34a9b8f1', class: classes, style: { gap: this.gap } }, h("slot", { key: '365862ea727b18cfa0a96f0b99d9fb338c0be91a' }))));
+        return (h(Host, { key: '476e29cb69f3ff7b616cc0fbe1de00709db6bdc0' }, h("div", { key: '6c3002a6540e4a7581f93affac1933c36ad48199', class: classes, style: { gap: this.gap } }, h("slot", { key: '44559af160fcaee6596a46a9428215587634eec5' }))));
     }
     static get style() { return afButtonGroupCss; }
 }, [257, "af-button-group", {
@@ -45,6 +45,6 @@ function defineCustomElement() {
 }
 
 export { AfButtonGroup as A, defineCustomElement as d };
-//# sourceMappingURL=p-ByHIHg3l.js.map
+//# sourceMappingURL=p-CAYG3IzP.js.map
 
-//# sourceMappingURL=p-ByHIHg3l.js.map
+//# sourceMappingURL=p-CAYG3IzP.js.map

package/dist/components/{p-ByHIHg3l.js.map → p-CAYG3IzP.js.map}

@@ -1 +1 @@
-{"file":"p-ByHIHg3l.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,sNAAsN;;MCOlO,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAA8B,YAAY;AAE3D;;AAEG;AACK,QAAA,IAAG,CAAA,GAAA,GAAW,KAAK;AAgB5B;IAdC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,cAAc,EAAE,IAAI;AACpB,YAAA,CAAC,aAAa,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG;SAClC;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,EAAA,EAC3C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-button-group/af-button-group.css?tag=af-button-group&encapsulation=shadow","src/components/af-button-group/af-button-group.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.button-group {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n}\n\n.direction-horizontal {\n  flex-direction: row;\n}\n\n.direction-vertical {\n  flex-direction: column;\n}\n\n/* Ensure slotted buttons align properly */\n::slotted(*) {\n  flex-shrink: 0;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-button-group',\n  styleUrl: 'af-button-group.css',\n  shadow: true\n})\nexport class AfButtonGroup {\n  /**\n   * Layout direction of the button group\n   */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Gap between buttons\n   */\n  @Prop() gap: string = '8px';\n\n  render() {\n    const classes = {\n      'button-group': true,\n      [`direction-${this.direction}`]: true\n    };\n\n    return (\n      <Host>\n        <div class={classes} style={{ gap: this.gap }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CAYG3IzP.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,sNAAsN;;MCOlO,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAA8B,YAAY;AAE3D;;AAEG;AACK,QAAA,IAAG,CAAA,GAAA,GAAW,KAAK;AAgB5B;IAdC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,cAAc,EAAE,IAAI;AACpB,YAAA,CAAC,aAAa,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG;SAClC;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,EAAA,EAC3C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-button-group/af-button-group.css?tag=af-button-group&encapsulation=shadow","src/components/af-button-group/af-button-group.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.button-group {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n}\n\n.direction-horizontal {\n  flex-direction: row;\n}\n\n.direction-vertical {\n  flex-direction: column;\n}\n\n/* Ensure slotted buttons align properly */\n::slotted(*) {\n  flex-shrink: 0;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-button-group',\n  styleUrl: 'af-button-group.css',\n  shadow: true\n})\nexport class AfButtonGroup {\n  /**\n   * Layout direction of the button group\n   */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Gap between buttons\n   */\n  @Prop() gap: string = '8px';\n\n  render() {\n    const classes = {\n      'button-group': true,\n      [`direction-${this.direction}`]: true\n    };\n\n    return (\n      <Host>\n        <div class={classes} style={{ gap: this.gap }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-D99aXp3U.js → p-CLmCtN_R.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
 
-const afLogoCss = ":host{display:inline-block;color:var(--colour-brand-inkwell, #14343b)}.logo-svg{display:block;width:auto;height:22px}";
+const afLogoCss = ":host{display:inline-block;color:var(--af-background-icon-default, var(--colour-brand-inkwell, #14343b))}.logo-svg{display:block;width:auto;height:22px}";
 
 const AfLogo = /*@__PURE__*/ proxyCustomElement(class AfLogo extends H {
     constructor(registerHost) {
@@ -11,7 +11,7 @@ const AfLogo = /*@__PURE__*/ proxyCustomElement(class AfLogo extends H {
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '6e315eac8e083807fb987237502d1bdaa06a579c' }, h("svg", { key: 'a837202d331f867eecd017d388d952cdbd09c0b0', class: "logo-svg", viewBox: "0 0 9290 1432", "aria-label": "Affinda", role: "img" }, h("path", { key: '425b4957d10c5427134caa67834ea5f306d23d14', fill: "currentColor", d: "M1691.17,452.11c-107.93-107.48-250.13-166.09-401.3-163.79h-739.51l-148.18,237.98h892.96c86.83,0,168.39,33.64,230.09,95.09,63.28,63.04,98.26,147.32,98.26,237.45,0,185.03-149.41,335.36-332.92,335.36H385.66c-82.44,0-149.59-67.64-149.59-150.68s67.32-151.75,149.41-154.23h810.17l152.93-237.98H381.44C171.21,656.62,0,832.45,0,1043.52s172.97,388.48,385.66,388.48h904.91c313.76,0,569.17-257.28,569.17-573.34,0-154.22-59.76-298.53-168.4-406.72l-.17.18Z" }), h("path", { key: '3dbe122502fce7882967a8a77a04b38e61a9d30f', fill: "currentColor", d: "M3265.12,353.81c-21.8-16.16-44.47-30.56-68.02-42.85-75.76-39.69-161-59.89-253.45-59.89-159.6,0-297.92,58.13-411.29,172.82-113.02,114.33-170.49,253.96-170.49,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.29,173.52,409.35,173.52,89.47,0,173.31-18.97,249.06-56.38,26.19-12.99,51.68-28.1,76.11-45.49v89.05h268.39V276.36h-268.39v77.45ZM3232.07,1013.47c-27.24,48.65-65.38,86.24-116.35,114.87-51.85,29.15-105.11,43.38-162.58,43.38s-107.92-14.05-157.31-43.21c-49.57-28.98-87.88-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.18-51.99,67.32-91.15,116.36-119.6,49.21-28.63,101.41-42.5,159.94-42.5,90.87,0,165.04,30.56,226.73,93.61,62.23,63.4,92.46,140.68,92.46,236.22,0,63.05-13.54,117.67-41.13,167.02l-.18.35Z" }), h("path", { key: 'e0f15cb4025c3fadcc740fc8f4b47e240f4497c3', fill: "currentColor", d: "M5569.92,278.96h-269.66v1143.74h269.66V278.96Z" }), h("path", { key: 'b7054c3fe019f0c42e8d56338c6034d9843a4a05', fill: "currentColor", d: "M6504.78,328.74c-68.7-45.4-148.11-68.37-235.78-68.37s-163.57,19.96-235.61,59.36c-21.61,11.84-42.69,25.44-63.07,40.81v-89.22h-270.22v1151.2h270.22v-436.03c0-154.94,8.78-223.14,15.81-252.11,15.64-61.13,47.44-110.95,96.81-152.65,47.96-40.28,100.49-59.89,160.58-59.89,51.13,0,89.96,11.13,118.95,34.28,28.81,22.79,48.14,58.13,59.56,109.18,4.56,18.37,12.12,70.14,12.12,211.83v545.57h270.21v-583.02c0-146.29-15.28-253.17-46.56-326.67-32.67-76.85-84.33-138.69-153.2-184.27h.18Z" }), h("path", { key: 'abb1e667124d30d807c41ab1cd446c4568990a18', fill: "currentColor", d: "M7728.49,355.19c-21.79-16.14-44.46-30.52-68.02-42.8-75.75-39.64-161-59.81-253.45-59.81-159.59,0-297.92,58.06-411.28,172.6-113.02,114.19-170.49,253.63-170.49,414.48s56.77,304.68,168.73,419.04c112.49,115.07,250.29,173.3,409.35,173.3,89.47,0,173.3-18.94,249.06-56.3,26.19-12.98,51.67-28.07,76.1-45.43v90.68h268.39V0h-268.39v355.37-.17ZM7695.45,1014.01c-27.24,48.59-65.38,86.13-116.36,114.72-51.85,29.11-104.93,43.32-162.58,43.32s-107.92-14.03-157.31-43.15c-49.56-28.94-87.88-68.76-117.58-121.38-29.88-52.97-44.29-106.64-44.29-164.18s14.41-111.73,43.94-164c29.17-51.92,67.32-91.03,116.35-119.45,49.22-28.59,101.42-42.45,159.95-42.45,90.87,0,165.04,30.52,226.73,93.49,62.22,63.32,92.45,140.5,92.45,235.92,0,62.97-13.53,117.52-41.12,166.81l-.18.35Z" }), h("path", { key: '8cd032a3cb346e1e2bf41b33a8c888d366a9c634', fill: "currentColor", d: "M9021.01,277.76v76.05c-21.79-16.16-44.47-30.56-68.02-42.85-75.75-39.69-161-59.89-253.45-59.89-159.59,0-297.92,58.13-411.29,172.82-113.01,114.33-170.48,253.96-170.48,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.28,173.52,409.35,173.52,89.46,0,173.3-18.97,249.06-56.38,26.19-12.99,51.67-28.1,76.1-45.49v89.05h268.39V277.76h-268.39ZM8987.97,1013.47c-27.25,48.65-65.39,86.24-116.36,114.87-51.85,29.15-105.1,43.38-162.58,43.38s-107.92-14.05-157.3-43.21c-49.57-28.98-87.89-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.17-51.99,67.31-91.15,116.35-119.6,49.22-28.63,101.42-42.5,159.95-42.5,90.87,0,165.04,30.56,226.73,93.61,62.22,63.4,92.45,140.68,92.45,236.22,0,63.05-13.53,117.67-41.13,167.02l-.17.35Z" }), h("path", { key: '3087e75a044032e2bf6ff1a49f78d18adb3a0688', fill: "currentColor", d: "M3927.32,519.82c0-140.11,112.99-241.01,251.96-241.01h302.69V0h-302.69c-284.39,0-515.59,233.28-515.59,519.82v902.88h263.81v-445.28h431.9v-265.98h-431.9v-191.62h-.18Z" }), h("path", { key: '3118ef825a1bc7640b1a49abddc5f0b6f1743bf0', fill: "currentColor", d: "M4745.61,519.82c0-140.11,112.99-241.01,251.95-241.01h302.7V0h-302.7c-284.38,0-515.59,233.28-515.59,519.82v902.88h263.82v-445.28h431.89v-265.98h-431.89v-191.62h-.18Z" }))));
+        return (h(Host, { key: 'df7fdd77101269480d619d9ba86275680079b32a' }, h("svg", { key: '96644e0b5cf18e589084ca1083718c7b6c4b9f17', class: "logo-svg", viewBox: "0 0 9290 1432", "aria-label": "Affinda", role: "img" }, h("path", { key: '954a70a6af7a9f98899b1093a9ec86bde3b69637', fill: "currentColor", d: "M1691.17,452.11c-107.93-107.48-250.13-166.09-401.3-163.79h-739.51l-148.18,237.98h892.96c86.83,0,168.39,33.64,230.09,95.09,63.28,63.04,98.26,147.32,98.26,237.45,0,185.03-149.41,335.36-332.92,335.36H385.66c-82.44,0-149.59-67.64-149.59-150.68s67.32-151.75,149.41-154.23h810.17l152.93-237.98H381.44C171.21,656.62,0,832.45,0,1043.52s172.97,388.48,385.66,388.48h904.91c313.76,0,569.17-257.28,569.17-573.34,0-154.22-59.76-298.53-168.4-406.72l-.17.18Z" }), h("path", { key: '97f720a0fbbf7b40f08fa96e4cec4020b723b19e', fill: "currentColor", d: "M3265.12,353.81c-21.8-16.16-44.47-30.56-68.02-42.85-75.76-39.69-161-59.89-253.45-59.89-159.6,0-297.92,58.13-411.29,172.82-113.02,114.33-170.49,253.96-170.49,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.29,173.52,409.35,173.52,89.47,0,173.31-18.97,249.06-56.38,26.19-12.99,51.68-28.1,76.11-45.49v89.05h268.39V276.36h-268.39v77.45ZM3232.07,1013.47c-27.24,48.65-65.38,86.24-116.35,114.87-51.85,29.15-105.11,43.38-162.58,43.38s-107.92-14.05-157.31-43.21c-49.57-28.98-87.88-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.18-51.99,67.32-91.15,116.36-119.6,49.21-28.63,101.41-42.5,159.94-42.5,90.87,0,165.04,30.56,226.73,93.61,62.23,63.4,92.46,140.68,92.46,236.22,0,63.05-13.54,117.67-41.13,167.02l-.18.35Z" }), h("path", { key: 'aca04016a8e4c386527296e8072d833a19ac64db', fill: "currentColor", d: "M5569.92,278.96h-269.66v1143.74h269.66V278.96Z" }), h("path", { key: '548ae27e683f7e40841b33e4b23f99d1cd35132e', fill: "currentColor", d: "M6504.78,328.74c-68.7-45.4-148.11-68.37-235.78-68.37s-163.57,19.96-235.61,59.36c-21.61,11.84-42.69,25.44-63.07,40.81v-89.22h-270.22v1151.2h270.22v-436.03c0-154.94,8.78-223.14,15.81-252.11,15.64-61.13,47.44-110.95,96.81-152.65,47.96-40.28,100.49-59.89,160.58-59.89,51.13,0,89.96,11.13,118.95,34.28,28.81,22.79,48.14,58.13,59.56,109.18,4.56,18.37,12.12,70.14,12.12,211.83v545.57h270.21v-583.02c0-146.29-15.28-253.17-46.56-326.67-32.67-76.85-84.33-138.69-153.2-184.27h.18Z" }), h("path", { key: '04bd2f2c3f4428a8705f31842226f1ee12876416', fill: "currentColor", d: "M7728.49,355.19c-21.79-16.14-44.46-30.52-68.02-42.8-75.75-39.64-161-59.81-253.45-59.81-159.59,0-297.92,58.06-411.28,172.6-113.02,114.19-170.49,253.63-170.49,414.48s56.77,304.68,168.73,419.04c112.49,115.07,250.29,173.3,409.35,173.3,89.47,0,173.3-18.94,249.06-56.3,26.19-12.98,51.67-28.07,76.1-45.43v90.68h268.39V0h-268.39v355.37-.17ZM7695.45,1014.01c-27.24,48.59-65.38,86.13-116.36,114.72-51.85,29.11-104.93,43.32-162.58,43.32s-107.92-14.03-157.31-43.15c-49.56-28.94-87.88-68.76-117.58-121.38-29.88-52.97-44.29-106.64-44.29-164.18s14.41-111.73,43.94-164c29.17-51.92,67.32-91.03,116.35-119.45,49.22-28.59,101.42-42.45,159.95-42.45,90.87,0,165.04,30.52,226.73,93.49,62.22,63.32,92.45,140.5,92.45,235.92,0,62.97-13.53,117.52-41.12,166.81l-.18.35Z" }), h("path", { key: '1fe70269b3db17a9c423f241d2cf4cbf073a54d4', fill: "currentColor", d: "M9021.01,277.76v76.05c-21.79-16.16-44.47-30.56-68.02-42.85-75.75-39.69-161-59.89-253.45-59.89-159.59,0-297.92,58.13-411.29,172.82-113.01,114.33-170.48,253.96-170.48,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.28,173.52,409.35,173.52,89.46,0,173.3-18.97,249.06-56.38,26.19-12.99,51.67-28.1,76.1-45.49v89.05h268.39V277.76h-268.39ZM8987.97,1013.47c-27.25,48.65-65.39,86.24-116.36,114.87-51.85,29.15-105.1,43.38-162.58,43.38s-107.92-14.05-157.3-43.21c-49.57-28.98-87.89-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.17-51.99,67.31-91.15,116.35-119.6,49.22-28.63,101.42-42.5,159.95-42.5,90.87,0,165.04,30.56,226.73,93.61,62.22,63.4,92.45,140.68,92.45,236.22,0,63.05-13.53,117.67-41.13,167.02l-.17.35Z" }), h("path", { key: 'a0ff5279153bd62d88d0bbca172159aef3ca96a3', fill: "currentColor", d: "M3927.32,519.82c0-140.11,112.99-241.01,251.96-241.01h302.69V0h-302.69c-284.39,0-515.59,233.28-515.59,519.82v902.88h263.81v-445.28h431.9v-265.98h-431.9v-191.62h-.18Z" }), h("path", { key: '23f6981ad2f37b47528985eb436eb4c18ba32c9f', fill: "currentColor", d: "M4745.61,519.82c0-140.11,112.99-241.01,251.95-241.01h302.7V0h-302.7c-284.38,0-515.59,233.28-515.59,519.82v902.88h263.82v-445.28h431.89v-265.98h-431.89v-191.62h-.18Z" }))));
     }
     static get style() { return afLogoCss; }
 }, [257, "af-logo"]);
@@ -30,6 +30,6 @@ function defineCustomElement() {
 }
 
 export { AfLogo as A, defineCustomElement as d };
-//# sourceMappingURL=p-D99aXp3U.js.map
+//# sourceMappingURL=p-CLmCtN_R.js.map
 
-//# sourceMappingURL=p-D99aXp3U.js.map
+//# sourceMappingURL=p-CLmCtN_R.js.map

package/dist/components/p-CLmCtN_R.js.map

@@ -0,0 +1 @@
+{"file":"p-CLmCtN_R.js","mappings":";;AAAA,MAAM,SAAS,GAAG,0JAA0J;;MCU/J,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;;;;;;;;IACjB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,UAAU,EAChB,OAAO,EAAC,eAAe,EAAA,YAAA,EACZ,SAAS,EACpB,IAAI,EAAC,KAAK,EAAA,EAEV,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,6bAA6b,EAC/b,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,4uBAA4uB,EAC9uB,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,gDAAgD,EAAE,CAAA,EAC9E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,udAAud,EACzd,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,wuBAAwuB,EAC1uB,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,0uBAA0uB,EAC5uB,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,sKAAsK,EAAE,CAAA,EACpM,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,sKAAsK,EAAE,CAAA,CAChM,CACD;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-logo/af-logo.css?tag=af-logo&encapsulation=shadow","src/components/af-logo/af-logo.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  color: var(--af-background-icon-default, var(--colour-brand-inkwell, #14343b));\n}\n\n.logo-svg {\n  display: block;\n  /* Maintain aspect ratio based on viewBox (9290:1432 ≈ 6.49:1) */\n  width: auto;\n  height: 22px;\n}\n","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          class=\"logo-svg\" \n          viewBox=\"0 0 9290 1432\" \n          aria-label=\"Affinda\"\n          role=\"img\"\n        >\n          <path \n            fill=\"currentColor\" \n            d=\"M1691.17,452.11c-107.93-107.48-250.13-166.09-401.3-163.79h-739.51l-148.18,237.98h892.96c86.83,0,168.39,33.64,230.09,95.09,63.28,63.04,98.26,147.32,98.26,237.45,0,185.03-149.41,335.36-332.92,335.36H385.66c-82.44,0-149.59-67.64-149.59-150.68s67.32-151.75,149.41-154.23h810.17l152.93-237.98H381.44C171.21,656.62,0,832.45,0,1043.52s172.97,388.48,385.66,388.48h904.91c313.76,0,569.17-257.28,569.17-573.34,0-154.22-59.76-298.53-168.4-406.72l-.17.18Z\"\n          />\n          <path \n            fill=\"currentColor\" \n            d=\"M3265.12,353.81c-21.8-16.16-44.47-30.56-68.02-42.85-75.76-39.69-161-59.89-253.45-59.89-159.6,0-297.92,58.13-411.29,172.82-113.02,114.33-170.49,253.96-170.49,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.29,173.52,409.35,173.52,89.47,0,173.31-18.97,249.06-56.38,26.19-12.99,51.68-28.1,76.11-45.49v89.05h268.39V276.36h-268.39v77.45ZM3232.07,1013.47c-27.24,48.65-65.38,86.24-116.35,114.87-51.85,29.15-105.11,43.38-162.58,43.38s-107.92-14.05-157.31-43.21c-49.57-28.98-87.88-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.18-51.99,67.32-91.15,116.36-119.6,49.21-28.63,101.41-42.5,159.94-42.5,90.87,0,165.04,30.56,226.73,93.61,62.23,63.4,92.46,140.68,92.46,236.22,0,63.05-13.54,117.67-41.13,167.02l-.18.35Z\"\n          />\n          <path fill=\"currentColor\" d=\"M5569.92,278.96h-269.66v1143.74h269.66V278.96Z\"/>\n          <path \n            fill=\"currentColor\" \n            d=\"M6504.78,328.74c-68.7-45.4-148.11-68.37-235.78-68.37s-163.57,19.96-235.61,59.36c-21.61,11.84-42.69,25.44-63.07,40.81v-89.22h-270.22v1151.2h270.22v-436.03c0-154.94,8.78-223.14,15.81-252.11,15.64-61.13,47.44-110.95,96.81-152.65,47.96-40.28,100.49-59.89,160.58-59.89,51.13,0,89.96,11.13,118.95,34.28,28.81,22.79,48.14,58.13,59.56,109.18,4.56,18.37,12.12,70.14,12.12,211.83v545.57h270.21v-583.02c0-146.29-15.28-253.17-46.56-326.67-32.67-76.85-84.33-138.69-153.2-184.27h.18Z\"\n          />\n          <path \n            fill=\"currentColor\" \n            d=\"M7728.49,355.19c-21.79-16.14-44.46-30.52-68.02-42.8-75.75-39.64-161-59.81-253.45-59.81-159.59,0-297.92,58.06-411.28,172.6-113.02,114.19-170.49,253.63-170.49,414.48s56.77,304.68,168.73,419.04c112.49,115.07,250.29,173.3,409.35,173.3,89.47,0,173.3-18.94,249.06-56.3,26.19-12.98,51.67-28.07,76.1-45.43v90.68h268.39V0h-268.39v355.37-.17ZM7695.45,1014.01c-27.24,48.59-65.38,86.13-116.36,114.72-51.85,29.11-104.93,43.32-162.58,43.32s-107.92-14.03-157.31-43.15c-49.56-28.94-87.88-68.76-117.58-121.38-29.88-52.97-44.29-106.64-44.29-164.18s14.41-111.73,43.94-164c29.17-51.92,67.32-91.03,116.35-119.45,49.22-28.59,101.42-42.45,159.95-42.45,90.87,0,165.04,30.52,226.73,93.49,62.22,63.32,92.45,140.5,92.45,235.92,0,62.97-13.53,117.52-41.12,166.81l-.18.35Z\"\n          />\n          <path \n            fill=\"currentColor\" \n            d=\"M9021.01,277.76v76.05c-21.79-16.16-44.47-30.56-68.02-42.85-75.75-39.69-161-59.89-253.45-59.89-159.59,0-297.92,58.13-411.29,172.82-113.01,114.33-170.48,253.96-170.48,415.01s56.77,304.89,168.73,419.58c112.49,115.21,250.28,173.52,409.35,173.52,89.46,0,173.3-18.97,249.06-56.38,26.19-12.99,51.67-28.1,76.1-45.49v89.05h268.39V277.76h-268.39ZM8987.97,1013.47c-27.25,48.65-65.39,86.24-116.36,114.87-51.85,29.15-105.1,43.38-162.58,43.38s-107.92-14.05-157.3-43.21c-49.57-28.98-87.89-68.85-117.59-121.53-29.88-53.04-44.29-106.79-44.29-164.39s14.41-111.88,43.94-164.21c29.17-51.99,67.31-91.15,116.35-119.6,49.22-28.63,101.42-42.5,159.95-42.5,90.87,0,165.04,30.56,226.73,93.61,62.22,63.4,92.45,140.68,92.45,236.22,0,63.05-13.53,117.67-41.13,167.02l-.17.35Z\"\n          />\n          <path fill=\"currentColor\" d=\"M3927.32,519.82c0-140.11,112.99-241.01,251.96-241.01h302.69V0h-302.69c-284.39,0-515.59,233.28-515.59,519.82v902.88h263.81v-445.28h431.9v-265.98h-431.9v-191.62h-.18Z\"/>\n          <path fill=\"currentColor\" d=\"M4745.61,519.82c0-140.11,112.99-241.01,251.95-241.01h302.7V0h-302.7c-284.38,0-515.59,233.28-515.59,519.82v902.88h263.82v-445.28h431.89v-265.98h-431.89v-191.62h-.18Z\"/>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-CUSad8vm.js

@@ -0,0 +1,74 @@
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-CxngDK-N.js';
+
+const afRadioCss = ":host{display:inline-block}.radio{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;line-height:20px;color:var(--af-form-control-label, var(--colour-brand-inkwell, #14343b));user-select:none}.radio.disabled{cursor:not-allowed;opacity:0.5}.input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.control{position:relative;flex-shrink:0;width:20px;height:20px;border-radius:var(--radii-radio, 9999px);border:none;box-shadow:inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8));background:var(--af-form-control-bg, var(--colour-brand-white, #ffffff));transition:all 0.15s ease;box-sizing:border-box}.control.checked{background:var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));box-shadow:none}.control.disabled{background:var(--af-form-control-bg-disabled, var(--colour-mistgreen-200, #e8ebeb));box-shadow:inset 0 0 0 1px var(--af-form-control-stroke-disabled, var(--colour-mistgreen-500, #d0d6d8))}.control.checked.disabled{background:var(--af-form-control-bg-checked-disabled, var(--colour-inkwell-350, #708380));box-shadow:none}.radio:not(.disabled):hover .control:not(.checked){box-shadow:inset 0 0 0 1px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.input:focus-visible+.control{outline:none;box-shadow:inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8)),\n    0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.input:focus-visible+.control.checked{box-shadow:0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b))}.dot{position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:var(--af-form-control-icon, var(--colour-brand-white, #ffffff));opacity:0;transition:opacity 0.15s ease}.control.checked .dot{opacity:1}.label{display:flex;align-items:center;min-height:24px}.label:empty{display:none}";
+
+const AfRadio = /*@__PURE__*/ proxyCustomElement(class AfRadio extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.afChange = createEvent(this, "afChange");
+        /**
+         * Whether the radio is checked
+         */
+        this.checked = false;
+        /**
+         * Whether the radio is disabled
+         */
+        this.disabled = false;
+        this.handleClick = () => {
+            if (this.disabled || this.checked)
+                return;
+            // Uncheck other radios with the same name
+            if (this.name) {
+                const siblings = document.querySelectorAll(`af-radio[name="${this.name}"]`);
+                siblings.forEach((radio) => {
+                    if (radio !== this.el && radio.checked) {
+                        radio.checked = false;
+                    }
+                });
+            }
+            this.checked = true;
+            this.afChange.emit({ checked: this.checked, value: this.value, name: this.name });
+        };
+    }
+    render() {
+        const radioClasses = {
+            'radio': true,
+            'disabled': this.disabled
+        };
+        const controlClasses = {
+            'control': true,
+            'checked': this.checked,
+            'disabled': this.disabled
+        };
+        return (h(Host, { key: 'f01068a7c7d1ddb47dbb5e55575098c6646218cc' }, h("label", { key: '2e57f31f11985a0b93d1b36318b3e51443b9b8a1', class: radioClasses, onClick: this.handleClick }, h("input", { key: 'eee5a87c24e16d7446ddc93a27f278a7be7043b8', type: "radio", class: "input", checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, tabindex: this.disabled ? -1 : 0 }), h("span", { key: '0c0dd903fcdb3d81e5cca01d17173f48049f19fe', class: controlClasses }, h("span", { key: '7c56dc92603d06dcb55fc1d44e2821c6c785cec0', class: "dot" })), h("span", { key: 'af9dc16e499f10707ebb078263fc865085083759', class: "label" }, h("slot", { key: 'c19a5db6ddd72b93f2abb46c569a58e4203506b2' })))));
+    }
+    get el() { return this; }
+    static get style() { return afRadioCss; }
+}, [257, "af-radio", {
+        "checked": [1540],
+        "disabled": [516],
+        "name": [513],
+        "value": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-radio"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-radio":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfRadio);
+            }
+            break;
+    } });
+}
+
+export { AfRadio as A, defineCustomElement as d };
+//# sourceMappingURL=p-CUSad8vm.js.map
+
+//# sourceMappingURL=p-CUSad8vm.js.map

package/dist/components/p-CUSad8vm.js.map

@@ -0,0 +1 @@
+{"file":"p-CUSad8vm.js","mappings":";;AAAA,MAAM,UAAU,GAAG,2rEAA2rE;;MCajsE,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAQE;;AAEG;AACqC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEhE;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAiB1C,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;gBAAE;;AAGnC,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,gBAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAkB,eAAA,EAAA,IAAI,CAAC,IAAI,CAAI,EAAA,CAAA,CAAC;AAC3E,gBAAA,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;oBACzB,IAAI,KAAK,KAAK,IAAI,CAAC,EAAE,IAAK,KAAa,CAAC,OAAO,EAAE;AAC9C,wBAAA,KAAa,CAAC,OAAO,GAAG,KAAK;;AAElC,iBAAC,CAAC;;AAGJ,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;YACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;AACnF,SAAC;AAoCF;IAlCC,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,UAAU,EAAE,IAAI,CAAC;SAClB;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EACnD,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAA,CAAQ,CACpB,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACD,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-radio/af-radio.css?tag=af-radio&encapsulation=shadow","src/components/af-radio/af-radio.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.radio {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  cursor: pointer;\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  line-height: 20px;\n  color: var(--af-form-control-label, var(--colour-brand-inkwell, #14343b));\n  user-select: none;\n}\n\n.radio.disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Hidden native input */\n.input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Custom radio control */\n.control {\n  position: relative;\n  flex-shrink: 0;\n  width: 20px;\n  height: 20px;\n  border-radius: var(--radii-radio, 9999px);\n  /* Use inset box-shadow instead of border to prevent layout shift */\n  border: none;\n  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8));\n  background: var(--af-form-control-bg, var(--colour-brand-white, #ffffff));\n  transition: all 0.15s ease;\n  box-sizing: border-box;\n}\n\n/* Checked state */\n.control.checked {\n  background: var(--af-form-control-bg-checked, var(--colour-brand-inkwell, #14343b));\n  box-shadow: none;\n}\n\n/* Disabled state */\n.control.disabled {\n  background: var(--af-form-control-bg-disabled, var(--colour-mistgreen-200, #e8ebeb));\n  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-disabled, var(--colour-mistgreen-500, #d0d6d8));\n}\n\n.control.checked.disabled {\n  background: var(--af-form-control-bg-checked-disabled, var(--colour-inkwell-350, #708380));\n  box-shadow: none;\n}\n\n/* Hover state */\n.radio:not(.disabled):hover .control:not(.checked) {\n  box-shadow: inset 0 0 0 1px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Focus state */\n.input:focus-visible + .control {\n  outline: none;\n  box-shadow: \n    inset 0 0 0 1px var(--af-form-control-stroke, var(--colour-mistgreen-500, #d0d6d8)),\n    0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n.input:focus-visible + .control.checked {\n  box-shadow: \n    0 0 0 4px var(--af-background-base, var(--colour-brand-white, #ffffff)), \n    0 0 0 5px var(--af-form-control-stroke-hover, var(--colour-brand-inkwell, #14343b));\n}\n\n/* Inner dot - always present, visibility controlled by opacity */\n.dot {\n  position: absolute;\n  inset: 0;\n  margin: auto;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--af-form-control-icon, var(--colour-brand-white, #ffffff));\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.control.checked .dot {\n  opacity: 1;\n}\n\n/* Label styling */\n.label {\n  display: flex;\n  align-items: center;\n  min-height: 24px;\n}\n\n/* Empty label - hide if no content */\n.label:empty {\n  display: none;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter, Element } from '@stencil/core';\n\n/**\n * Radio component for selecting a single option from a group.\n * Radios with the same `name` prop are mutually exclusive.\n * \n * @slot - Radio label text\n */\n@Component({\n  tag: 'af-radio',\n  styleUrl: 'af-radio.css',\n  shadow: true\n})\nexport class AfRadio {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Whether the radio is checked\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * Whether the radio is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the radio for form submission (radios with same name are grouped)\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The value of the radio for form submission\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the radio checked state changes\n   */\n  @Event() afChange!: EventEmitter<{ checked: boolean; value?: string; name?: string }>;\n\n  private handleClick = () => {\n    if (this.disabled || this.checked) return;\n    \n    // Uncheck other radios with the same name\n    if (this.name) {\n      const siblings = document.querySelectorAll(`af-radio[name=\"${this.name}\"]`);\n      siblings.forEach((radio) => {\n        if (radio !== this.el && (radio as any).checked) {\n          (radio as any).checked = false;\n        }\n      });\n    }\n    \n    this.checked = true;\n    this.afChange.emit({ checked: this.checked, value: this.value, name: this.name });\n  };\n\n  render() {\n    const radioClasses = {\n      'radio': true,\n      'disabled': this.disabled\n    };\n\n    const controlClasses = {\n      'control': true,\n      'checked': this.checked,\n      'disabled': this.disabled\n    };\n\n    return (\n      <Host>\n        <label class={radioClasses} onClick={this.handleClick}>\n          <input\n            type=\"radio\"\n            class=\"input\"\n            checked={this.checked}\n            disabled={this.disabled}\n            name={this.name}\n            value={this.value}\n            tabindex={this.disabled ? -1 : 0}\n          />\n          <span class={controlClasses}>\n            <span class=\"dot\"></span>\n          </span>\n          <span class=\"label\">\n            <slot></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}