@affinda/wc 0.0.14 → 0.0.16

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

@@ -1,18 +1,31 @@
 import { h, Host } from "@stencil/core";
 /**
- * Hero section component for marketing pages
+ * Hero section component for marketing pages.
+ * Uses TypographyLockup internally to handle heading, description, and button layout.
+ * Sets theme context for all child components via CSS custom properties.
+ *
+ * @slot heading - The main heading content (typically an af-heading)
+ * @slot description - Description text below the heading (typically af-text)
+ * @slot buttons - Call-to-action buttons (typically af-button-group or individual af-buttons)
+ * @slot decoration - Optional decorative element (e.g., PaperclipDecoration)
  */
 export class AfHeroSection {
     constructor() {
-        /** Hero variant */
-        this.variant = 'dark';
+        /** Theme - sets background color and provides theme context to children */
+        this.theme = 'inkwell';
         /** Show decorative paperclip */
         this.withDecoration = false;
         /** Minimum height */
         this.minHeight = '60vh';
+        /** Heading size for the typography lockup (1-5, where 1 is largest) */
+        this.headingSize = 1;
+        /** Text alignment for the typography lockup */
+        this.textAlignment = 'center';
+        /** Button alignment - horizontal places buttons inline, vertical stacks them */
+        this.buttonAlignment = 'horizontal';
     }
     render() {
-        return (h(Host, { key: '04cc80eabba2deec11fb704a10f22e4fc78beb05' }, h("div", { key: 'fa2cba909c39a1387ebcdf2be6fd710ef1b66db7', class: `hero-section variant-${this.variant}`, style: { minHeight: this.minHeight } }, this.withDecoration && (h("div", { key: '27a340cd2601be24e820129939a0e9fc8b03edd7', class: "hero-decoration" }, h("slot", { key: 'ae480ef5001db618c3f939c1c8e2e87dac40819f', name: "decoration" }))), h("af-container", { key: '9a6be795a98100430b5fdaa39912a465989936b6' }, h("div", { key: '4ce12e860ba8f00c180d2a124b8295a3877962c2', class: "hero-content" }, h("slot", { key: '36965812bbece59614f08927266b12f28e4501ce' }))))));
+        return (h(Host, { key: '478e5359018d24bf6bce587711b3c35b951739a1' }, h("div", { key: '546fda1797f5f823bf420ef1372d1638dd329aa5', class: `hero-section theme-${this.theme}`, style: { minHeight: this.minHeight } }, this.withDecoration && (h("div", { key: 'da2db2c51444ff67f5d4d37e20004572c5f1da20', class: "hero-decoration" }, h("slot", { key: '71de6018d16c4f67c4c4dcd97cdb4d3e3c630afe', name: "decoration" }))), h("af-container", { key: 'c5f8da09f7b86776ea4df223e1e1c95f4502b468' }, h("div", { key: '4a9f69af1143cdfe53d70787332929a44d42e32a', class: "hero-content" }, h("af-typography-lockup", { key: 'b1c810fd26dfd2ce5603be6b22d1704eaea3fc40', headingSize: this.headingSize, textAlignment: this.textAlignment, buttonAlignment: this.buttonAlignment, maxWidth: this.maxWidth }, h("slot", { key: 'da9f749476bc343fd224552c313f0df41629d4dd', name: "heading" }), h("span", { key: '29118e86cc44446c73a12f43ff9ea3f4f798cc47', slot: "description" }, h("slot", { key: '0a8f7fafb3dc47fa01304867163c66f4fa676672', name: "description" })), h("span", { key: '7f5a08600946d7a0a2093bc9319198fd4a97cc32', slot: "buttons" }, h("slot", { key: 'd835dab6f8506520fb060647281e99c274bbd2d0', name: "buttons" }))))))));
     }
     static get is() { return "af-hero-section"; }
     static get encapsulation() { return "scoped"; }
@@ -28,25 +41,25 @@ export class AfHeroSection {
     }
     static get properties() {
         return {
-            "variant": {
+            "theme": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'light' | 'dark'",
-                    "resolved": "\"dark\" | \"light\"",
+                    "original": "'white' | 'inkwell' | 'mist-green' | 'soft-clay'",
+                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Hero variant"
+                    "text": "Theme - sets background color and provides theme context to children"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "variant",
-                "defaultValue": "'dark'"
+                "attribute": "theme",
+                "defaultValue": "'inkwell'"
             },
             "withDecoration": {
                 "type": "boolean",
@@ -87,6 +100,85 @@ export class AfHeroSection {
                 "reflect": false,
                 "attribute": "min-height",
                 "defaultValue": "'60vh'"
+            },
+            "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 typography lockup (1-5, where 1 is largest)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading-size",
+                "defaultValue": "1"
+            },
+            "textAlignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'center'",
+                    "resolved": "\"center\" | \"left\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text alignment for the typography lockup"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-alignment",
+                "defaultValue": "'center'"
+            },
+            "buttonAlignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button alignment - horizontal places buttons inline, vertical stacks them"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-alignment",
+                "defaultValue": "'horizontal'"
+            },
+            "maxWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum width for the copy section (in pixels)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width"
             }
         };
     }

package/dist/collection/components/af-hero-section/af-hero-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-hero-section.js","sourceRoot":"","sources":["../../../src/components/af-hero-section/af-hero-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAOH,MAAM,OAAO,aAAa;IAN1B;QAOE,mBAAmB;QACX,YAAO,GAAqB,MAAM,CAAC;QAE3C,gCAAgC;QACxB,mBAAc,GAAY,KAAK,CAAC;QAExC,qBAAqB;QACb,cAAS,GAAW,MAAM,CAAC;KAoBpC;IAlBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE;gBACrF,IAAI,CAAC,cAAc,IAAI,CACtB,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACP;gBACD;oBACE,4DAAK,KAAK,EAAC,cAAc;wBACvB,8DAAa,CACT,CACO,CACX,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Hero section component for marketing pages\n */\n@Component({\n  tag: 'af-hero-section',\n  styleUrl: 'af-hero-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfHeroSection {\n  /** Hero variant */\n  @Prop() variant: 'light' | 'dark' = 'dark';\n  \n  /** Show decorative paperclip */\n  @Prop() withDecoration: boolean = false;\n  \n  /** Minimum height */\n  @Prop() minHeight: string = '60vh';\n\n  render() {\n    return (\n      <Host>\n        <div class={`hero-section variant-${this.variant}`} style={{ minHeight: this.minHeight }}>\n          {this.withDecoration && (\n            <div class=\"hero-decoration\">\n              <slot name=\"decoration\"></slot>\n            </div>\n          )}\n          <af-container>\n            <div class=\"hero-content\">\n              <slot></slot>\n            </div>\n          </af-container>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"af-hero-section.js","sourceRoot":"","sources":["../../../src/components/af-hero-section/af-hero-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;GASG;AAOH,MAAM,OAAO,aAAa;IAN1B;QAOE,2EAA2E;QACnE,UAAK,GAAqD,SAAS,CAAC;QAE5E,gCAAgC;QACxB,mBAAc,GAAY,KAAK,CAAC;QAExC,qBAAqB;QACb,cAAS,GAAW,MAAM,CAAC;QAEnC,uEAAuE;QAC/D,gBAAW,GAAsB,CAAC,CAAC;QAE3C,+CAA+C;QACvC,kBAAa,GAAsB,QAAQ,CAAC;QAEpD,gFAAgF;QACxE,oBAAe,GAA8B,YAAY,CAAC;KAoCnE;IA/BC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE;gBACjF,IAAI,CAAC,cAAc,IAAI,CACtB,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACP;gBACD;oBACE,4DAAK,KAAK,EAAC,cAAc;wBACvB,6EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ;4BAEvB,6DAAM,IAAI,EAAC,SAAS,GAAQ;4BAC5B,6DAAM,IAAI,EAAC,aAAa;gCACtB,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC3B;4BACP,6DAAM,IAAI,EAAC,SAAS;gCAClB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACvB,CACc,CACnB,CACO,CACX,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Hero section component for marketing pages.\n * Uses TypographyLockup internally to handle heading, description, and button layout.\n * Sets theme context for all child components via CSS custom properties.\n * \n * @slot heading - The main heading content (typically an af-heading)\n * @slot description - Description text below the heading (typically af-text)\n * @slot buttons - Call-to-action buttons (typically af-button-group or individual af-buttons)\n * @slot decoration - Optional decorative element (e.g., PaperclipDecoration)\n */\n@Component({\n  tag: 'af-hero-section',\n  styleUrl: 'af-hero-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfHeroSection {\n  /** Theme - sets background color and provides theme context to children */\n  @Prop() theme: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' = 'inkwell';\n  \n  /** Show decorative paperclip */\n  @Prop() withDecoration: boolean = false;\n  \n  /** Minimum height */\n  @Prop() minHeight: string = '60vh';\n\n  /** Heading size for the typography lockup (1-5, where 1 is largest) */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 1;\n\n  /** Text alignment for the typography lockup */\n  @Prop() textAlignment: 'left' | 'center' = 'center';\n\n  /** Button alignment - horizontal places buttons inline, vertical stacks them */\n  @Prop() buttonAlignment: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Maximum width for the copy section (in pixels) */\n  @Prop() maxWidth?: number;\n\n  render() {\n    return (\n      <Host>\n        <div class={`hero-section theme-${this.theme}`} style={{ minHeight: this.minHeight }}>\n          {this.withDecoration && (\n            <div class=\"hero-decoration\">\n              <slot name=\"decoration\"></slot>\n            </div>\n          )}\n          <af-container>\n            <div class=\"hero-content\">\n              <af-typography-lockup\n                headingSize={this.headingSize}\n                textAlignment={this.textAlignment}\n                buttonAlignment={this.buttonAlignment}\n                maxWidth={this.maxWidth}\n              >\n                <slot name=\"heading\"></slot>\n                <span slot=\"description\">\n                  <slot name=\"description\"></slot>\n                </span>\n                <span slot=\"buttons\">\n                  <slot name=\"buttons\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n          </af-container>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,28 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+.icon-container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+/* Override SVG fill to use currentColor */
+svg path,
+svg circle,
+svg rect,
+svg polygon {
+  fill: currentColor;
+}
+

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

@@ -0,0 +1,116 @@
+import { h, Host } from "@stencil/core";
+import { getIconSvg } from "@affinda/icons";
+/**
+ * Icon component that displays SVG icons from the Affinda icon library.
+ * Icons inherit color from their parent via currentColor.
+ *
+ * Icons are bundled inline, so no runtime fetching is required.
+ * This ensures icons work reliably in all bundler contexts.
+ *
+ * @example
+ * ```html
+ * <af-icon name="arrow-right" size="24"></af-icon>
+ * ```
+ */
+export class AfIcon {
+    constructor() {
+        /**
+         * Size of the icon in pixels
+         */
+        this.size = 24;
+    }
+    render() {
+        const iconData = this.name ? getIconSvg(this.name) : null;
+        if (!iconData) {
+            return null;
+        }
+        const style = {
+            width: `${this.size}px`,
+            height: `${this.size}px`,
+        };
+        // Build the complete SVG with viewBox and content
+        const svgContent = `<svg viewBox="${iconData.viewBox}" xmlns="http://www.w3.org/2000/svg">${iconData.content}</svg>`;
+        return (h(Host, { role: "img", "aria-label": this.label || this.name, "aria-hidden": this.label ? 'false' : 'true' }, h("span", { class: "icon-container", style: style, innerHTML: svgContent })));
+    }
+    static get is() { return "af-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "\"info\" | \"home\" | \"email\" | \"search\" | \"code\" | \"data\" | \"menu\" | \"time\" | \"close\" | \"pause\" | \"play\" | \"account-01\" | \"account-02\" | \"accounts-payable\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"bpo\" | \"chats\" | \"check\" | \"check-circle\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"document-upload\" | \"download\" | \"edit\" | \"eye\" | \"facebook\" | \"gear\" | \"github\" | \"heart\" | \"insurance\" | \"lending-01\" | \"lending-02\" | \"link-out\" | \"linkedin\" | \"map-pin\" | \"minus\" | \"numbers\" | \"plus\" | \"productivity\" | \"quote\" | \"recruitment\" | \"refresh\" | \"security-01\" | \"security-02\" | \"solutions\" | \"sparkle\" | \"support\" | \"system\" | \"verification-01\" | \"wand\" | \"x\" | \"youtube\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "@affinda/icons",
+                            "id": "../icons/dist/index.d.ts::IconName"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the icon to display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the icon in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "24"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the icon (for screen readers)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-icon.js","sourceRoot":"","sources":["../../../src/components/af-icon/af-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C;;;;;;;;;;;GAWG;AAMH,MAAM,OAAO,MAAM;IALnB;QAWE;;WAEG;QACK,SAAI,GAAW,EAAE,CAAC;KAoC3B;IA7BC,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAE1D,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,KAAK,GAAG;YACZ,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;YACvB,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;SACzB,CAAC;QAEF,kDAAkD;QAClD,MAAM,UAAU,GAAG,iBAAiB,QAAQ,CAAC,OAAO,wCAAwC,QAAQ,CAAC,OAAO,QAAQ,CAAC;QAErH,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,KAAK,gBACE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,iBACtB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;YAE1C,YACE,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,UAAU,GACrB,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\nimport type { IconName } from '@affinda/icons';\nimport { getIconSvg } from '@affinda/icons';\n\n/**\n * Icon component that displays SVG icons from the Affinda icon library.\n * Icons inherit color from their parent via currentColor.\n * \n * Icons are bundled inline, so no runtime fetching is required.\n * This ensures icons work reliably in all bundler contexts.\n * \n * @example\n * ```html\n * <af-icon name=\"arrow-right\" size=\"24\"></af-icon>\n * ```\n */\n@Component({\n  tag: 'af-icon',\n  styleUrl: 'af-icon.css',\n  shadow: true\n})\nexport class AfIcon {\n  /**\n   * The name of the icon to display\n   */\n  @Prop() name!: IconName;\n\n  /**\n   * Size of the icon in pixels\n   */\n  @Prop() size: number = 24;\n\n  /**\n   * Accessible label for the icon (for screen readers)\n   */\n  @Prop() label?: string;\n\n  render() {\n    const iconData = this.name ? getIconSvg(this.name) : null;\n    \n    if (!iconData) {\n      return null;\n    }\n\n    const style = {\n      width: `${this.size}px`,\n      height: `${this.size}px`,\n    };\n\n    // Build the complete SVG with viewBox and content\n    const svgContent = `<svg viewBox=\"${iconData.viewBox}\" xmlns=\"http://www.w3.org/2000/svg\">${iconData.content}</svg>`;\n\n    return (\n      <Host\n        role=\"img\"\n        aria-label={this.label || this.name}\n        aria-hidden={this.label ? 'false' : 'true'}\n      >\n        <span\n          class=\"icon-container\"\n          style={style}\n          innerHTML={svgContent}\n        />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-icon-box/af-icon-box.css

@@ -0,0 +1,36 @@
+:host {
+  display: inline-block;
+}
+
+.icon-box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16px;
+  background-color: var(--af-background-contrast, var(--colour-brand-mist-green, #c6d5d1));
+  color: var(--af-background-icon-default, var(--colour-brand-inkwell, #14343b));
+  flex-shrink: 0;
+}
+
+/* Size variants */
+.icon-box--size-small {
+  width: 48px;
+  height: 48px;
+  padding: 14px;
+  border-radius: 12px;
+}
+
+.icon-box--size-default {
+  width: 64px;
+  height: 64px;
+  padding: 12px;
+  border-radius: 16px;
+}
+
+.icon-box--size-large {
+  width: 80px;
+  height: 80px;
+  padding: 16px;
+  border-radius: 20px;
+}
+

package/dist/collection/components/af-icon-box/af-icon-box.js

@@ -0,0 +1,97 @@
+import { h, Host } from "@stencil/core";
+/**
+ * IconBox atom - a themed container for displaying an icon with a rounded background.
+ *
+ * Inherits theme colors from parent Section via CSS custom properties:
+ * - Background uses `--af-background-contrast`
+ * - Icon color uses `--af-background-icon-default`
+ *
+ * @example
+ * ```html
+ * <af-icon-box icon="settings" size="default"></af-icon-box>
+ * ```
+ */
+export class AfIconBox {
+    constructor() {
+        /**
+         * Size variant of the icon box
+         * - 'small': 48px container, 20px icon
+         * - 'default': 64px container, 40px icon
+         * - 'large': 80px container, 48px icon
+         */
+        this.size = 'default';
+    }
+    render() {
+        const containerClasses = {
+            'icon-box': true,
+            [`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 }))));
+    }
+    static get is() { return "af-icon-box"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-icon-box.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-icon-box.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "\"info\" | \"home\" | \"email\" | \"search\" | \"code\" | \"data\" | \"menu\" | \"time\" | \"close\" | \"pause\" | \"play\" | \"account-01\" | \"account-02\" | \"accounts-payable\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"bpo\" | \"chats\" | \"check\" | \"check-circle\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"document-upload\" | \"download\" | \"edit\" | \"eye\" | \"facebook\" | \"gear\" | \"github\" | \"heart\" | \"insurance\" | \"lending-01\" | \"lending-02\" | \"link-out\" | \"linkedin\" | \"map-pin\" | \"minus\" | \"numbers\" | \"plus\" | \"productivity\" | \"quote\" | \"recruitment\" | \"refresh\" | \"security-01\" | \"security-02\" | \"solutions\" | \"sparkle\" | \"support\" | \"system\" | \"verification-01\" | \"wand\" | \"x\" | \"youtube\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "@affinda/icons",
+                            "id": "../icons/dist/index.d.ts::IconName"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "affinda",
+                            "text": "/icons)"
+                        }],
+                    "text": "The name of the icon to display (from"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'default' | 'large'",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant of the icon box\n- 'small': 48px container, 20px icon\n- 'default': 64px container, 40px icon\n- 'large': 80px container, 48px icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-icon-box.js.map

package/dist/collection/components/af-icon-box/af-icon-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-icon-box.js","sourceRoot":"","sources":["../../../src/components/af-icon-box/af-icon-box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;;;;;;;;;GAWG;AAOH,MAAM,OAAO,SAAS;IANtB;QAYE;;;;;WAKG;QACK,SAAI,GAAkC,SAAS,CAAC;KAkBzD;IAhBC,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,UAAU,EAAE,IAAI;YAChB,CAAC,kBAAkB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;SACtC,CAAC;QAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAE9E,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,GAAY,CAChD,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/af-icon-button/af-icon-button.css

@@ -2,6 +2,19 @@
   display: inline-block;
 }
 
+/* Set color on host for slotted content inheritance */
+:host([variant="secondary"]) {
+  color: var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));
+}
+
+:host([variant="primary"]) {
+  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B));
+}
+
+:host([variant="tertiary"]) {
+  color: var(--af-button-tertiary-icon, var(--colour-brand-inkwell, #14343B));
+}
+
 .icon-button {
   display: inline-flex;
   align-items: center;
@@ -50,85 +63,64 @@
   height: 20px;
 }
 
-/* Icon slot */
+/* Icon slot - inherits color from parent */
 .icon {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  color: inherit;
 }
 
-.icon ::slotted(svg) {
+.icon ::slotted(*) {
   width: 100%;
   height: 100%;
+  color: inherit;
 }
 
-/* Primary variant (ice) */
+/* Primary variant (ice background) */
 .variant-primary {
-  background: var(--colour-brand-ice, #A6FFFB);
-  border-color: var(--colour-brand-inkwell, #14343B);
-  color: var(--colour-brand-inkwell, #14343B);
+  background: var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));
+  border-color: var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));
+  color: var(--af-button-primary-text, var(--colour-brand-inkwell, #14343B));
 }
 
 .variant-primary:hover:not(.disabled) {
-  background: #8FEBE3;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);
+  background: var(--af-button-primary-bg-hover, #95e6e2);
 }
 
 .variant-primary:active:not(.disabled) {
-  background: #7FE2D4;
-  transform: translateY(0);
+  background: var(--af-button-primary-bg-hover, #95e6e2);
 }
 
-/* Secondary variant (white) */
+/* Secondary variant (outlined) */
 .variant-secondary {
-  background: var(--colour-brand-white, #FFFFFF);
-  border-color: var(--colour-brand-inkwell, #14343B);
-  color: var(--colour-brand-inkwell, #14343B);
+  background: var(--af-button-secondary-bg, transparent);
+  border-color: var(--af-button-secondary-stroke, currentColor);
+  color: var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));
 }
 
 .variant-secondary:hover:not(.disabled) {
-  background: #F6FAF9;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);
+  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));
 }
 
 .variant-secondary:active:not(.disabled) {
-  background: #E8F1EF;
-  transform: translateY(0);
-}
-
-/* Outline variant */
-.variant-outline {
-  background: transparent;
-  border-color: var(--colour-brand-inkwell, #14343B);
-  color: var(--colour-brand-inkwell, #14343B);
+  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));
 }
 
-.variant-outline:hover:not(.disabled) {
-  background: rgba(20, 52, 59, 0.04);
-  transform: translateY(-1px);
-}
-
-.variant-outline:active:not(.disabled) {
-  background: rgba(20, 52, 59, 0.08);
-  transform: translateY(0);
-}
-
-/* Ghost variant */
-.variant-ghost {
+/* Tertiary variant (minimal, no border) */
+.variant-tertiary {
   background: transparent;
   border-color: transparent;
-  color: var(--colour-brand-inkwell, #14343B);
+  color: var(--af-button-tertiary-text, var(--colour-brand-inkwell, #14343B));
 }
 
-.variant-ghost:hover:not(.disabled) {
-  background: rgba(20, 52, 59, 0.04);
+.variant-tertiary:hover:not(.disabled) {
+  opacity: 0.8;
 }
 
-.variant-ghost:active:not(.disabled) {
-  background: rgba(20, 52, 59, 0.08);
+.variant-tertiary:active:not(.disabled) {
+  opacity: 0.6;
 }
 
 /* Disabled state */
@@ -149,21 +141,17 @@ button.icon-button {
 }
 
 button.icon-button.variant-primary {
-  background: var(--colour-brand-ice, #A6FFFB);
-  border: 1px solid var(--colour-brand-inkwell, #14343B);
+  background: var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));
+  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));
 }
 
 button.icon-button.variant-secondary {
-  background: var(--colour-brand-white, #FFFFFF);
-  border: 1px solid var(--colour-brand-inkwell, #14343B);
-}
-
-button.icon-button.variant-outline {
-  background: transparent;
-  border: 1px solid var(--colour-brand-inkwell, #14343B);
+  background: var(--af-button-secondary-bg, transparent);
+  border: 1px solid var(--af-button-secondary-stroke, currentColor);
+  color: var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));
 }
 
-button.icon-button.variant-ghost {
+button.icon-button.variant-tertiary {
   background: transparent;
   border: 1px solid transparent;
 }