@affinda/wc 0.0.15 → 0.0.16

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

@@ -1,12 +1,26 @@
 import { h, Host } from "@stencil/core";
+/**
+ * Button component that inherits colors from theme context.
+ * Colors are determined by the parent theme (af-section, af-hero-section, etc.)
+ * via CSS custom properties.
+ *
+ * @slot - Button label text
+ * @slot icon-left - Icon displayed before the label
+ * @slot icon-right - Icon displayed after the label
+ */
 export class AfButton {
     constructor() {
         /**
-         * The visual variant of the button
+         * The visual variant of the button.
+         * - `primary` - Main CTA with filled background (use sparingly, 1-2 per view)
+         * - `secondary` - Supporting action with outlined style
+         * - `tertiary` - Subtle text-link style with underline
          */
         this.variant = 'primary';
         /**
-         * The size of the button
+         * The size of the button.
+         * - `default` - Standard size for primary CTAs
+         * - `small` - Compact size for inline or secondary contexts
          */
         this.size = 'default';
         /**
@@ -17,24 +31,32 @@ export class AfButton {
          * Button type (when not using href)
          */
         this.type = 'button';
-        /**
-         * Use on dark backgrounds for better contrast
-         */
-        this.darkBackground = false;
+        this.hasIconLeft = false;
+        this.hasIconRight = false;
+        this.handleSlotChange = (slotName) => (event) => {
+            const slot = event.target;
+            const hasContent = slot.assignedNodes().length > 0;
+            if (slotName === 'icon-left') {
+                this.hasIconLeft = hasContent;
+            }
+            else {
+                this.hasIconRight = hasContent;
+            }
+        };
     }
     render() {
         const classes = {
             'button': true,
             [`variant-${this.variant}`]: true,
             [`size-${this.size}`]: true,
-            'disabled': this.disabled,
-            'on-dark': this.darkBackground
+            'disabled': this.disabled
         };
         const content = [
-            h("span", { class: "icon-left" }, h("slot", { name: "icon-left" })),
+            h("span", { class: { 'icon-left': true, 'has-content': this.hasIconLeft } }, h("slot", { name: "icon-left", onSlotchange: this.handleSlotChange('icon-left') })),
             h("span", { class: "label" }, h("slot", null)),
-            h("span", { class: "icon-right" }, h("slot", { name: "icon-right" }))
+            h("span", { class: { 'icon-right': true, 'has-content': this.hasIconRight } }, h("slot", { name: "icon-right", onSlotchange: this.handleSlotChange('icon-right') }))
         ];
+        // Render as anchor if href is provided (and not disabled)
         if (this.href && !this.disabled) {
             return (h(Host, null, h("a", { href: this.href, class: classes }, content)));
         }
@@ -58,19 +80,19 @@ export class AfButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'outline' | 'ghost'",
-                    "resolved": "\"ghost\" | \"outline\" | \"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | 'tertiary'",
+                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The visual variant of the button"
+                    "text": "The visual variant of the button.\n- `primary` - Main CTA with filled background (use sparingly, 1-2 per view)\n- `secondary` - Supporting action with outlined style\n- `tertiary` - Subtle text-link style with underline"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "variant",
                 "defaultValue": "'primary'"
             },
@@ -86,7 +108,7 @@ export class AfButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The size of the button"
+                    "text": "The size of the button.\n- `default` - Standard size for primary CTAs\n- `small` - Compact size for inline or secondary contexts"
                 },
                 "getter": false,
                 "setter": false,
@@ -114,25 +136,6 @@ export class AfButton {
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "href": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional href to render as a link"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "href"
-            },
             "type": {
                 "type": "string",
                 "mutable": false,
@@ -153,27 +156,32 @@ export class AfButton {
                 "attribute": "type",
                 "defaultValue": "'button'"
             },
-            "darkBackground": {
-                "type": "boolean",
+            "href": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Use on dark backgrounds for better contrast"
+                    "text": "Optional href to render as a link instead of a button"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "dark-background",
-                "defaultValue": "false"
+                "attribute": "href"
             }
         };
     }
+    static get states() {
+        return {
+            "hasIconLeft": {},
+            "hasIconRight": {}
+        };
+    }
 }
 //# sourceMappingURL=af-button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"af-button.js","sourceRoot":"","sources":["../../../src/components/af-button/af-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;IALrB;QAME;;WAEG;QACK,YAAO,GAAkD,SAAS,CAAC;QAE3E;;WAEG;QACK,SAAI,GAAwB,SAAS,CAAC;QAE9C;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAOlC;;WAEG;QACK,SAAI,GAAkC,QAAQ,CAAC;QAEvD;;WAEG;QACK,mBAAc,GAAY,KAAK,CAAC;KAyCzC;IAvCC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI;YACd,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACjC,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,SAAS,EAAE,IAAI,CAAC,cAAc;SAC/B,CAAC;QAEF,MAAM,OAAO,GAAG;YACd,YAAM,KAAK,EAAC,WAAW;gBACrB,YAAM,IAAI,EAAC,WAAW,GAAQ,CACzB;YACP,YAAM,KAAK,EAAC,OAAO;gBACjB,eAAa,CACR;YACP,YAAM,KAAK,EAAC,YAAY;gBACtB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC1B;SACR,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChC,OAAO,CACL,EAAC,IAAI;gBACH,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,IAC/B,OAAO,CACN,CACC,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,IAC7D,OAAO,CACD,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-button',\n  styleUrl: 'af-button.css',\n  shadow: true\n})\nexport class AfButton {\n  /**\n   * The visual variant of the button\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'outline' | 'ghost' = 'primary';\n\n  /**\n   * The size of the button\n   */\n  @Prop() size: 'default' | 'small' = 'default';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Optional href to render as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n  \n  /**\n   * Use on dark backgrounds for better contrast\n   */\n  @Prop() darkBackground: boolean = false;\n\n  render() {\n    const classes = {\n      'button': true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'disabled': this.disabled,\n      'on-dark': this.darkBackground\n    };\n\n    const content = [\n      <span class=\"icon-left\">\n        <slot name=\"icon-left\"></slot>\n      </span>,\n      <span class=\"label\">\n        <slot></slot>\n      </span>,\n      <span class=\"icon-right\">\n        <slot name=\"icon-right\"></slot>\n      </span>\n    ];\n\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-button.js","sourceRoot":"","sources":["../../../src/components/af-button/af-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhE;;;;;;;;GAQG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAME;;;;;WAKG;QACsB,YAAO,GAAyC,SAAS,CAAC;QAEnF;;;;WAIG;QACK,SAAI,GAAwB,SAAS,CAAC;QAE9C;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,SAAI,GAAkC,QAAQ,CAAC;QAO9C,gBAAW,GAAY,KAAK,CAAC;QAC7B,iBAAY,GAAY,KAAK,CAAC;QAE/B,qBAAgB,GAAG,CAAC,QAAoC,EAAE,EAAE,CAAC,CAAC,KAAY,EAAE,EAAE;YACpF,MAAM,IAAI,GAAG,KAAK,CAAC,MAAyB,CAAC;YAC7C,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;YACnD,IAAI,QAAQ,KAAK,WAAW,EAAE,CAAC;gBAC7B,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;YAChC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;YACjC,CAAC;QACH,CAAC,CAAC;KAyCH;IAvCC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI;YACd,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACjC,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,OAAO,GAAG;YACd,YAAM,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE;gBACjE,YAAM,IAAI,EAAC,WAAW,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,GAAS,CAC3E;YACP,YAAM,KAAK,EAAC,OAAO;gBACjB,eAAa,CACR;YACP,YAAM,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,YAAY,EAAE;gBACnE,YAAM,IAAI,EAAC,YAAY,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,GAAS,CAC7E;SACR,CAAC;QAEF,0DAA0D;QAC1D,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChC,OAAO,CACL,EAAC,IAAI;gBACH,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,IAC/B,OAAO,CACN,CACC,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,IAC7D,OAAO,CACD,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host, State } from '@stencil/core';\n\n/**\n * Button component that inherits colors from theme context.\n * Colors are determined by the parent theme (af-section, af-hero-section, etc.)\n * via CSS custom properties.\n * \n * @slot - Button label text\n * @slot icon-left - Icon displayed before the label\n * @slot icon-right - Icon displayed after the label\n */\n@Component({\n  tag: 'af-button',\n  styleUrl: 'af-button.css',\n  shadow: true\n})\nexport class AfButton {\n  /**\n   * The visual variant of the button.\n   * - `primary` - Main CTA with filled background (use sparingly, 1-2 per view)\n   * - `secondary` - Supporting action with outlined style\n   * - `tertiary` - Subtle text-link style with underline\n   */\n  @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * The size of the button.\n   * - `default` - Standard size for primary CTAs\n   * - `small` - Compact size for inline or secondary contexts\n   */\n  @Prop() size: 'default' | 'small' = 'default';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Optional href to render as a link instead of a button\n   */\n  @Prop() href?: string;\n\n  @State() hasIconLeft: boolean = false;\n  @State() hasIconRight: boolean = false;\n\n  private handleSlotChange = (slotName: 'icon-left' | 'icon-right') => (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n    const hasContent = slot.assignedNodes().length > 0;\n    if (slotName === 'icon-left') {\n      this.hasIconLeft = hasContent;\n    } else {\n      this.hasIconRight = hasContent;\n    }\n  };\n\n  render() {\n    const classes = {\n      'button': true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'disabled': this.disabled\n    };\n\n    const content = [\n      <span class={{ 'icon-left': true, 'has-content': this.hasIconLeft }}>\n        <slot name=\"icon-left\" onSlotchange={this.handleSlotChange('icon-left')}></slot>\n      </span>,\n      <span class=\"label\">\n        <slot></slot>\n      </span>,\n      <span class={{ 'icon-right': true, 'has-content': this.hasIconRight }}>\n        <slot name=\"icon-right\" onSlotchange={this.handleSlotChange('icon-right')}></slot>\n      </span>\n    ];\n\n    // Render as anchor if href is provided (and not disabled)\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

@@ -1,62 +1,128 @@
+/* Theme CSS custom properties follow the global token structure from @affinda/tokens */
+
 :host {
+  display: block;
+  width: 100%;
+}
+
+/* ==========================================================================
+   Stretch Mode
+   
+   When stretch attribute is present, the card fills its container height
+   and uses flexbox to distribute space between children. This enables
+   equal-height cards in grid/flex layouts.
+   ========================================================================== */
+
+:host([stretch]) {
   display: flex;
   flex-direction: column;
-  width: 100%;
-  min-height: 400px;
+  height: 100%;
+}
+
+:host([stretch]) .card {
+  flex: 1 1 auto;
+}
+
+:host([stretch]) .card__content {
+  flex: 1 1 auto;
 }
 
+/* ==========================================================================
+   Base Card Styles
+   ========================================================================== */
+
 .card {
-  background: var(--colour-background-level-1, #e8eeed);
   border-radius: var(--border-radius-card-level-1, 32px);
   overflow: hidden;
   position: relative;
   display: flex;
   flex-direction: column;
-  min-height: 400px;
-  height: 100%;
   box-sizing: border-box;
 }
 
-.card--with-image {
-  background: var(--colour-brand-inkwell, #14343b);
-  min-height: 480px;
+/* ==========================================================================
+   Theme Variants
+   
+   Background colors from Figma tokens:
+   - white: #ffffff (Colour/Brand/White)
+   - white-ivory: #fff9ee (Colour/Brand/Ivory-Paper)
+   - inkwell: #14343b (Colour/Brand/Inkwell)
+   - mist-green: #c6d5d1 (Colour/Brand/Mist-Green)
+   - soft-clay: #c0ab8d (Colour/Softclay/400)
+   ========================================================================== */
+
+/* WHITE THEME */
+.card.theme-white {
+  background-color: var(--colour-brand-white, #ffffff);
+  
+  /* Typography */
+  --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__background {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 0;
+/* WHITE-IVORY THEME */
+.card.theme-white-ivory {
+  background-color: var(--colour-brand-ivory-paper, #fff9ee);
+  
+  /* Typography */
+  --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__background-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
+/* INKWELL THEME (Dark) */
+.card.theme-inkwell {
+  background-color: var(--colour-brand-inkwell, #14343b);
+  
+  /* Typography - light colors on dark background */
+  --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);
+  
+  /* Button variants for dark theme */
+  --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);
 }
 
+/* MIST-GREEN THEME */
+.card.theme-mist-green {
+  background-color: var(--colour-brand-mist-green, #c6d5d1);
+  
+  /* Typography */
+  --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);
+}
+
+/* SOFT-CLAY THEME */
+.card.theme-soft-clay {
+  background-color: var(--colour-softclay-400, #c0ab8d);
+  
+  /* Typography */
+  --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
+   ========================================================================== */
+
 .card__content {
   position: relative;
-  padding: 40px;
+  padding: var(--af-card-padding, 40px);
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: var(--af-card-gap, 24px);
   flex: 1;
   box-sizing: border-box;
   z-index: 1;
 }
 
-/* Image styling within cards */
-.card__content ::slotted(img) {
-  width: 100%;
-  height: auto;
-  min-height: 200px;
-  margin-top: auto;
-  object-fit: cover;
-  object-position: top center;
-}
-
 /* Heading spacing within cards */
 .card__content ::slotted(af-heading) {
   margin-bottom: 0;
@@ -66,38 +132,3 @@
 .card__content ::slotted(af-text) {
   line-height: 1.44;
 }
-
-.card__content--overlay {
-  backdrop-filter: blur(2px);
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
-  padding: 32px;
-  padding-top: 200px;
-  justify-content: flex-end;
-  
-  /* Set CSS custom properties for text color that child components can use */
-  --colour-typography-heading-primary: #ffffff;
-  --colour-typography-heading-secondary: #ffffff;
-  --colour-typography-body-default: #ffffff;
-  --colour-typography-body-dark: #ffffff;
-  color: #ffffff;
-}
-
-/* Force white text in overlay cards using both direct styling and custom properties */
-.card__content--overlay * {
-  color: #ffffff !important;
-}
-
-/* Dark text for regular cards (light backgrounds) */
-.card:not(.card--with-image):not(.card--dark-overlay) af-heading,
-.card:not(.card--with-image):not(.card--dark-overlay) af-text {
-  --colour-typography-heading-primary: var(--colour-brand-inkwell, #14343B);
-  --colour-typography-body-default: #2B484F;
-}
-
-/* Dark text for custom background color cards (unless they have dark overlay) */
-.card--custom-bg:not(.card--dark-overlay) af-heading,
-.card--custom-bg:not(.card--dark-overlay) af-text {
-  --colour-typography-heading-primary: var(--colour-brand-inkwell, #14343B);
-  --colour-typography-body-default: #2B484F;
-}
-

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

@@ -1,15 +1,32 @@
 import { h, Host } from "@stencil/core";
+/**
+ * Card atom component - a themed container with consistent styling.
+ * Provides theme context to children via CSS custom properties.
+ *
+ * This is a base building block used by molecule components like
+ * af-feature-card and af-illustrated-card.
+ */
 export class AfCard {
     constructor() {
         /**
-         * Whether to apply a dark gradient overlay (for cards with background images)
+         * Theme - sets background color and provides theme context to children.
+         * Defaults to 'mist-green' if not specified.
          */
-        this.darkOverlay = false;
+        this.theme = 'mist-green';
+        /**
+         * When true, the card stretches to fill its container height.
+         * Use this when the card is in a flex/grid container and needs to
+         * participate in equal-height layouts. The card's content will use
+         * flexbox to distribute space between children.
+         */
+        this.stretch = false;
     }
     render() {
-        const hasBackgroundImage = !!this.backgroundImage;
-        const cardStyle = this.backgroundColor ? { backgroundColor: this.backgroundColor } : undefined;
-        return (h(Host, { key: '026a3f9e10d281558913cd6eb69db800da37deb4' }, h("div", { key: 'd6b43e724d5611e75ec096dad88c5373ef5c5adc', class: `card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`, style: cardStyle }, hasBackgroundImage && (h("div", { key: 'f71753ba962411320c45f06c7c9a5c98b89883a9', class: "card__background" }, h("img", { key: '2d3b19e350ddf5a1efa1c1a9a343851e423cc275', src: this.backgroundImage, alt: "", class: "card__background-image" }))), h("div", { key: '459e00230ef7a470ee808d0d674412b18822d473', class: `card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}` }, h("slot", { key: 'd2f4f261f0b2a766c912504d17f0caec96ae02c4' })))));
+        const classes = {
+            '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' })))));
     }
     static get is() { return "af-card"; }
     static get encapsulation() { return "scoped"; }
@@ -25,45 +42,27 @@ export class AfCard {
     }
     static get properties() {
         return {
-            "backgroundImage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Background image URL for the card"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "background-image"
-            },
-            "backgroundColor": {
+            "theme": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
+                    "original": "'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay'",
+                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | \"white-ivory\" | undefined",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Background color for the card (CSS color value)"
+                    "text": "Theme - sets background color and provides theme context to children.\nDefaults to 'mist-green' if not specified."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "background-color"
+                "attribute": "theme",
+                "defaultValue": "'mist-green'"
             },
-            "darkOverlay": {
+            "stretch": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -75,12 +74,12 @@ export class AfCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to apply a dark gradient overlay (for cards with background images)"
+                    "text": "When true, the card stretches to fill its container height.\nUse this when the card is in a flex/grid container and needs to\nparticipate in equal-height layouts. The card's content will use\nflexbox to distribute space between children."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
-                "attribute": "dark-overlay",
+                "reflect": true,
+                "attribute": "stretch",
                 "defaultValue": "false"
             }
         };

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

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

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

@@ -0,0 +1,96 @@
+:host {
+  display: inline-block;
+}
+
+.checkbox {
+  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(--buttons-ghost-text, var(--colour-brand-inkwell, #14343b));
+  user-select: none;
+}
+
+.checkbox.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Hidden native input */
+.input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Custom checkbox control */
+.control {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radii-checkbox, 4px);
+  border: 1px solid var(--forms-control-stroke, #d0d6d8);
+  background: var(--forms-control-bg-default, #ffffff);
+  transition: all 0.15s ease;
+  box-sizing: border-box;
+}
+
+/* Checked/indeterminate state */
+.control.checked {
+  background: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));
+  border-color: var(--forms-control-bg-active, var(--colour-brand-inkwell, #14343b));
+}
+
+/* Disabled state */
+.control.disabled {
+  background: var(--forms-control-bg-default-disabled, #e8ebeb);
+  border-color: var(--forms-control-stroke-disabled, #d0d6d8);
+}
+
+.control.checked.disabled {
+  background: var(--forms-control-bg-active-disabled, #708380);
+  border-color: var(--forms-control-bg-active-disabled, #708380);
+}
+
+/* Hover state */
+.checkbox:not(.disabled):hover .control {
+  border-color: var(--forms-control-stroke-hover, var(--colour-brand-inkwell, #14343b));
+}
+
+/* Focus state */
+.input:focus-visible + .control {
+  box-shadow: 0 0 0 4px var(--background-base, #ffffff), 0 0 0 5px var(--buttons-secondary-stroke, #14343b);
+  outline: none;
+}
+
+/* Icon styling */
+.icon {
+  width: 16px;
+  height: 16px;
+  color: #ffffff;
+}
+
+/* Label styling */
+.label {
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+}
+
+/* Empty label - hide if no content */
+.label:empty {
+  display: none;
+}
+