@affinda/wc 0.0.15 → 0.0.17

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

@@ -0,0 +1,191 @@
+import { h, Host } from "@stencil/core";
+/**
+ * GridCallout organism - a marketing section combining an optional pill-shaped image
+ * with a grid of IconText feature items.
+ *
+ * Composes:
+ * - Pill-shaped image container (optional)
+ * - Heading via af-typography-lockup
+ * - Grid of af-icon-text items
+ * - Optional CTA button
+ *
+ * Inherits theme colors from parent af-section via CSS custom properties.
+ *
+ * @slot - Main heading text
+ * @slot description - Optional description/subheading text
+ * @slot items - IconText components for the feature grid
+ * @slot cta - CTA button(s) at the bottom
+ *
+ * @example
+ * ```html
+ * <af-section theme="mist-green">
+ *   <af-grid-callout image-src="/team.jpg" image-alt="Team photo">
+ *     Affinda blends AI and engineering
+ *     <span slot="description">Optional description text.</span>
+ *
+ *     <af-icon-text slot="items" icon="settings">
+ *       Feature One
+ *       <span slot="description">Feature description.</span>
+ *     </af-icon-text>
+ *
+ *     <af-button slot="cta" variant="primary">Learn more</af-button>
+ *   </af-grid-callout>
+ * </af-section>
+ * ```
+ */
+export class AfGridCallout {
+    constructor() {
+        /**
+         * Alt text for the image (required for accessibility when imageSrc is provided)
+         */
+        this.imageAlt = '';
+        /**
+         * Position of the image relative to the content
+         */
+        this.imagePosition = 'left';
+        /**
+         * Number of columns for the IconText grid on desktop
+         */
+        this.columns = 2;
+        /**
+         * Heading size for the main title
+         */
+        this.headingSize = 2;
+    }
+    render() {
+        const hasImage = !!this.imageSrc;
+        const containerClasses = {
+            'grid-callout': true,
+            'grid-callout--has-image': hasImage,
+            'grid-callout--no-image': !hasImage,
+            [`grid-callout--image-${this.imagePosition}`]: hasImage,
+        };
+        const gridClasses = {
+            'grid-callout__items': true,
+            [`grid-callout__items--cols-${this.columns}`]: true,
+        };
+        const renderImage = () => {
+            if (!hasImage)
+                return null;
+            return (h("div", { class: "grid-callout__image-container" }, h("img", { src: this.imageSrc, alt: this.imageAlt, class: "grid-callout__image" })));
+        };
+        const renderContent = () => (h("div", { class: "grid-callout__content" }, h("af-typography-lockup", { headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "grid-callout__heading" }, h("slot", null), h("span", { slot: "description" }, h("slot", { name: "description" }))), h("div", { class: gridClasses }, h("slot", { name: "items" })), h("div", { class: "grid-callout__cta" }, h("slot", { name: "cta" }))));
+        return (h(Host, null, h("div", { class: containerClasses }, this.imagePosition === 'left' && renderImage(), renderContent(), this.imagePosition === 'right' && renderImage())));
+    }
+    static get is() { return "af-grid-callout"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-grid-callout.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-grid-callout.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "imageSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Image source URL for the pill-shaped image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-src"
+            },
+            "imageAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt text for the image (required for accessibility when imageSrc is provided)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-alt",
+                "defaultValue": "''"
+            },
+            "imagePosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the image relative to the content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-position",
+                "defaultValue": "'left'"
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "2 | 3 | 4",
+                    "resolved": "2 | 3 | 4",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of columns for the IconText grid on desktop"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "2"
+            },
+            "headingSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "1 | 2 | 3 | 4 | 5",
+                    "resolved": "1 | 2 | 3 | 4 | 5",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading size for the main title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading-size",
+                "defaultValue": "2"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-grid-callout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-grid-callout.js","sourceRoot":"","sources":["../../../src/components/af-grid-callout/af-grid-callout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAOH,MAAM,OAAO,aAAa;IAN1B;QAYE;;WAEG;QACK,aAAQ,GAAW,EAAE,CAAC;QAE9B;;WAEG;QACK,kBAAa,GAAqB,MAAM,CAAC;QAEjD;;WAEG;QACK,YAAO,GAAc,CAAC,CAAC;QAE/B;;WAEG;QACK,gBAAW,GAAsB,CAAC,CAAC;KAiE5C;IA/DC,MAAM;QACJ,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;QAEjC,MAAM,gBAAgB,GAAG;YACvB,cAAc,EAAE,IAAI;YACpB,yBAAyB,EAAE,QAAQ;YACnC,wBAAwB,EAAE,CAAC,QAAQ;YACnC,CAAC,uBAAuB,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,QAAQ;SACxD,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,qBAAqB,EAAE,IAAI;YAC3B,CAAC,6BAA6B,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;SACpD,CAAC;QAEF,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,IAAI,CAAC,QAAQ;gBAAE,OAAO,IAAI,CAAC;YAE3B,OAAO,CACL,WAAK,KAAK,EAAC,+BAA+B;gBACxC,WACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,qBAAqB,GAC3B,CACE,CACP,CAAC;QACJ,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,CAC1B,WAAK,KAAK,EAAC,uBAAuB;YAChC,4BACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU,EAC1B,KAAK,EAAC,uBAAuB;gBAE7B,eAAa;gBACb,YAAM,IAAI,EAAC,aAAa;oBACtB,YAAM,IAAI,EAAC,aAAa,GAAQ,CAC3B,CACc;YAEvB,WAAK,KAAK,EAAE,WAAW;gBACrB,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;YAEN,WAAK,KAAK,EAAC,mBAAmB;gBAC5B,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACF,CACP,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,WAAK,KAAK,EAAE,gBAAgB;gBACzB,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,WAAW,EAAE;gBAC9C,aAAa,EAAE;gBACf,IAAI,CAAC,aAAa,KAAK,OAAO,IAAI,WAAW,EAAE,CAC5C,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * GridCallout organism - a marketing section combining an optional pill-shaped image \n * with a grid of IconText feature items.\n * \n * Composes:\n * - Pill-shaped image container (optional)\n * - Heading via af-typography-lockup\n * - Grid of af-icon-text items\n * - Optional CTA button\n * \n * Inherits theme colors from parent af-section via CSS custom properties.\n * \n * @slot - Main heading text\n * @slot description - Optional description/subheading text\n * @slot items - IconText components for the feature grid\n * @slot cta - CTA button(s) at the bottom\n * \n * @example\n * ```html\n * <af-section theme=\"mist-green\">\n *   <af-grid-callout image-src=\"/team.jpg\" image-alt=\"Team photo\">\n *     Affinda blends AI and engineering\n *     <span slot=\"description\">Optional description text.</span>\n *     \n *     <af-icon-text slot=\"items\" icon=\"settings\">\n *       Feature One\n *       <span slot=\"description\">Feature description.</span>\n *     </af-icon-text>\n *     \n *     <af-button slot=\"cta\" variant=\"primary\">Learn more</af-button>\n *   </af-grid-callout>\n * </af-section>\n * ```\n */\n@Component({\n  tag: 'af-grid-callout',\n  styleUrl: 'af-grid-callout.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfGridCallout {\n  /**\n   * Image source URL for the pill-shaped image\n   */\n  @Prop() imageSrc?: string;\n\n  /**\n   * Alt text for the image (required for accessibility when imageSrc is provided)\n   */\n  @Prop() imageAlt: string = '';\n\n  /**\n   * Position of the image relative to the content\n   */\n  @Prop() imagePosition: 'left' | 'right' = 'left';\n\n  /**\n   * Number of columns for the IconText grid on desktop\n   */\n  @Prop() columns: 2 | 3 | 4 = 2;\n\n  /**\n   * Heading size for the main title\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 2;\n\n  render() {\n    const hasImage = !!this.imageSrc;\n    \n    const containerClasses = {\n      'grid-callout': true,\n      'grid-callout--has-image': hasImage,\n      'grid-callout--no-image': !hasImage,\n      [`grid-callout--image-${this.imagePosition}`]: hasImage,\n    };\n\n    const gridClasses = {\n      'grid-callout__items': true,\n      [`grid-callout__items--cols-${this.columns}`]: true,\n    };\n\n    const renderImage = () => {\n      if (!hasImage) return null;\n      \n      return (\n        <div class=\"grid-callout__image-container\">\n          <img \n            src={this.imageSrc} \n            alt={this.imageAlt}\n            class=\"grid-callout__image\"\n          />\n        </div>\n      );\n    };\n\n    const renderContent = () => (\n      <div class=\"grid-callout__content\">\n        <af-typography-lockup\n          headingSize={this.headingSize}\n          textAlignment=\"left\"\n          buttonAlignment=\"vertical\"\n          class=\"grid-callout__heading\"\n        >\n          <slot></slot>\n          <span slot=\"description\">\n            <slot name=\"description\"></slot>\n          </span>\n        </af-typography-lockup>\n\n        <div class={gridClasses}>\n          <slot name=\"items\"></slot>\n        </div>\n\n        <div class=\"grid-callout__cta\">\n          <slot name=\"cta\"></slot>\n        </div>\n      </div>\n    );\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          {this.imagePosition === 'left' && renderImage()}\n          {renderContent()}\n          {this.imagePosition === 'right' && renderImage()}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

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

@@ -5,10 +5,11 @@
 .heading {
   margin: 0;
   padding: 0;
-  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;
-  font-weight: 400;
-  color: var(--colour-typography-heading-primary, #14343b);
-  letter-spacing: -0.02em;
+  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);
+  font-weight: var(--font-weight-regular, 400);
+  /* Inherit color from theme context via CSS custom property */
+  color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));
+  letter-spacing: var(--letter-spacing-heading, -0.02em);
 }
 
 /* Alignment */
@@ -24,85 +25,76 @@
   text-align: right;
 }
 
-/* Theme variants */
-.theme-dark {
-  color: var(--colour-brand-mist-green, #C6D5D1);
-}
-
-.theme-light {
-  color: var(--colour-typography-heading-primary, #14343b);
-}
-
 /* Heading XL */
 .level-xl {
-  font-size: 50px;
-  line-height: 1;
+  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: 80px;
+    font-size: var(--font-size-heading-xl-desktop, 80px);
   }
 }
 
 /* Heading 1 */
 .level-1 {
-  font-size: 38px;
-  line-height: 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: 56px;
+    font-size: var(--font-size-heading-1-desktop, 56px);
   }
 }
 
 /* Heading 2 */
 .level-2 {
-  font-size: 32px;
-  line-height: 1;
+  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: 44px;
+    font-size: var(--font-size-heading-2-desktop, 44px);
   }
 }
 
 /* Heading 3 */
 .level-3 {
-  font-size: 25px;
-  line-height: 1;
+  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: 34px;
+    font-size: var(--font-size-heading-3-desktop, 34px);
   }
 }
 
 /* Heading 4 */
 .level-4 {
-  font-size: 20px;
-  line-height: 1.1;
+  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: 24px;
-    line-height: 1.2;
+    font-size: var(--font-size-heading-4-desktop, 24px);
+    line-height: var(--line-height-heading-relaxed, 1.2);
   }
 }
 
 /* Heading 5 */
 .level-5 {
-  font-size: 18px;
-  line-height: 1.1;
+  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: 20px;
-    line-height: 1.2;
+    font-size: var(--font-size-heading-5-desktop, 20px);
+    line-height: var(--line-height-heading-relaxed, 1.2);
   }
 }

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

@@ -1,12 +1,15 @@
 import { h } from "@stencil/core";
+/**
+ * Heading component that inherits color from theme context.
+ * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+ * via CSS custom properties.
+ */
 export class AfHeading {
     constructor() {
         /** Heading level */
         this.level = '1';
         /** Visual alignment */
         this.align = 'left';
-        /** Theme for dark backgrounds */
-        this.theme = 'light';
     }
     getHeadingTag() {
         // Map display levels to semantic HTML tags
@@ -22,12 +25,11 @@ export class AfHeading {
     }
     render() {
         const Tag = this.getHeadingTag();
-        return (h(Tag, { key: '2cc4b5d43b85fbc8251d61e822deb22641f69683', class: {
+        return (h(Tag, { key: '05bfc95960c7546b642fde77e0cc4018817c4241', class: {
                 'heading': true,
                 [`level-${this.level}`]: true,
-                [`align-${this.align}`]: true,
-                [`theme-${this.theme}`]: true
-            }, part: "base" }, h("slot", { key: '0ac282842c61ec6c16929574a5ffd6530aab9759' })));
+                [`align-${this.align}`]: true
+            }, part: "base" }, h("slot", { key: '9ebf0b011f26063a1835dfe157d0d485a30a5a0b' })));
     }
     static get is() { return "af-heading"; }
     static get encapsulation() { return "shadow"; }
@@ -82,26 +84,6 @@ export class AfHeading {
                 "reflect": false,
                 "attribute": "align",
                 "defaultValue": "'left'"
-            },
-            "theme": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'light' | 'dark'",
-                    "resolved": "\"dark\" | \"light\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Theme for dark backgrounds"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "theme",
-                "defaultValue": "'light'"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"af-heading.js","sourceRoot":"","sources":["../../../src/components/af-heading/af-heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,SAAS;IALtB;QAME,oBAAoB;QACZ,UAAK,GAAuC,GAAG,CAAC;QAExD,uBAAuB;QACf,UAAK,GAAgC,MAAM,CAAC;QAEpD,iCAAiC;QACzB,UAAK,GAAqB,OAAO,CAAC;KAgC3C;IA9BS,aAAa;QACnB,2CAA2C;QAC3C,MAAM,MAAM,GAA2B;YACrC,IAAI,EAAE,IAAI;YACV,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;SACV,CAAC;QACF,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAS,CAAC;QAExC,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;gBAC7B,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;gBAC7B,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;aAC9B,EACD,IAAI,EAAC,MAAM;YAEX,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\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 */\n  @Prop() align: 'left' | 'center' | 'right' = 'left';\n  \n  /** Theme for dark backgrounds */\n  @Prop() theme: 'light' | 'dark' = 'light';\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          [`theme-${this.theme}`]: true\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-heading.js","sourceRoot":"","sources":["../../../src/components/af-heading/af-heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;GAIG;AAMH,MAAM,OAAO,SAAS;IALtB;QAME,oBAAoB;QACZ,UAAK,GAAuC,GAAG,CAAC;QAExD,uBAAuB;QACf,UAAK,GAAgC,MAAM,CAAC;KA+BrD;IA7BS,aAAa;QACnB,2CAA2C;QAC3C,MAAM,MAAM,GAA2B;YACrC,IAAI,EAAE,IAAI;YACV,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;YACT,GAAG,EAAE,IAAI;SACV,CAAC;QACF,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAS,CAAC;QAExC,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;gBAC7B,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;aAC9B,EACD,IAAI,EAAC,MAAM;YAEX,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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-hero-section, 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 */\n  @Prop() align: 'left' | 'center' | 'right' = 'left';\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"]}

package/dist/collection/components/af-hero-section/af-hero-section.css

@@ -16,21 +16,129 @@
   overflow: hidden;
 }
 
-/* Light variant */
-.variant-light {
-  background-color: var(--colour-background-white, #FFFFFF);
+/* ==========================================================================
+   Theme Variants
+   Each theme sets background color and CSS custom properties for children.
+   ========================================================================== */
+
+/* WHITE THEME */
+.theme-white {
+  background-color: var(--colour-brand-white, #FFFFFF);
+  
+  /* Typography tokens */
+  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);
+  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);
+  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);
+  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);
+  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);
+  
+  /* Button - Primary */
+  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);
+  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);
+  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Secondary */
+  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-bg: transparent;
+  --af-button-secondary-bg-hover: rgba(255, 255, 255, 0.08);
+  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Tertiary */
+  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
 }
 
-/* Dark variant */
-.variant-dark {
+/* INKWELL THEME (Dark) */
+.theme-inkwell {
   background-color: var(--colour-brand-inkwell, #14343B);
+  
+  /* Typography tokens */
+  --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);
+  --af-typography-heading-secondary: var(--colour-brand-white, #ffffff);
+  --af-typography-body-dark: var(--colour-brand-white, #ffffff);
+  --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);
+  --af-typography-body-subtle: var(--colour-inkwell-200, #a1aeb1);
+  
+  /* Button - Primary */
+  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);
+  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);
+  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Secondary */
+  --af-button-secondary-text: var(--colour-brand-white, #ffffff);
+  --af-button-secondary-icon: var(--colour-brand-white, #ffffff);
+  --af-button-secondary-bg: transparent;
+  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);
+  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);
+  
+  /* Button - Tertiary */
+  --af-button-tertiary-text: var(--colour-brand-white, #ffffff);
+  --af-button-tertiary-icon: var(--colour-brand-white, #ffffff);
+}
+
+/* MIST-GREEN THEME */
+.theme-mist-green {
+  background-color: var(--colour-brand-mist-green, #C6D5D1);
+  
+  /* Typography tokens */
+  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);
+  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);
+  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);
+  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);
+  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);
+  
+  /* Button - Primary */
+  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);
+  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);
+  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Secondary */
+  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-bg: transparent;
+  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);
+  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Tertiary */
+  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
 }
 
-/* Set theme colors on dark backgrounds */
-.variant-dark af-heading,
-.variant-dark af-text {
-  --typography-heading-primary: var(--colour-brand-mist-green, #C6D5D1);
-  --typography-body-default: var(--colour-brand-mist-green, #C6D5D1);
+/* SOFT-CLAY THEME */
+.theme-soft-clay {
+  background-color: var(--colour-softclay-400, #c0ab8d);
+  
+  /* Typography tokens */
+  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);
+  --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);
+  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);
+  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);
+  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);
+  
+  /* Button - Primary */
+  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);
+  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);
+  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Secondary */
+  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-bg: transparent;
+  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);
+  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Tertiary */
+  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
 }
 
 .hero-decoration {
@@ -53,7 +161,6 @@
 }
 
 .hero-content {
-  text-align: center;
   max-width: 1000px;
   margin: 0 auto;
   position: relative;
@@ -66,4 +173,3 @@
     padding: 3rem 1.5rem 2.5rem;
   }
 }
-