@affinda/wc 0.0.14 → 0.0.16

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

@@ -2,7 +2,10 @@ import { h, Host } from "@stencil/core";
 export class AfIconButton {
     constructor() {
         /**
-         * The visual variant of the button
+         * The visual variant of the button.
+         * - `primary` - Main CTA with filled ice background
+         * - `secondary` - Supporting action with white background
+         * - `tertiary` - Minimal style with transparent background
          */
         this.variant = 'primary';
         /**
@@ -49,19 +52,19 @@ export class AfIconButton {
                 "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 ice background\n- `secondary` - Supporting action with white background\n- `tertiary` - Minimal style with transparent background"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "variant",
                 "defaultValue": "'primary'"
             },

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

@@ -1 +1 @@
-{"version":3,"file":"af-icon-button.js","sourceRoot":"","sources":["../../../src/components/af-icon-button/af-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,YAAY;IALzB;QAME;;WAEG;QACK,YAAO,GAAkD,SAAS,CAAC;QAE3E;;WAEG;QACK,SAAI,GAAiC,QAAQ,CAAC;QAEtD;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAOlC;;WAEG;QACK,SAAI,GAAkC,QAAQ,CAAC;KAuCxD;IAhCC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,aAAa,EAAE,IAAI;YACnB,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,CACd,YAAM,KAAK,EAAC,MAAM;YAChB,eAAa,CACR,CACR,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,gBAAc,IAAI,CAAC,SAAS,IAC3D,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,gBAAc,IAAI,CAAC,SAAS,IACzF,OAAO,CACD,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-icon-button',\n  styleUrl: 'af-icon-button.css',\n  shadow: true\n})\nexport class AfIconButton {\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: 'large' | 'medium' | 'small' = 'medium';\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   * Accessible label for screen readers\n   */\n  @Prop() ariaLabel!: string;\n\n  render() {\n    const classes = {\n      'icon-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\">\n        <slot></slot>\n      </span>\n    );\n\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes} aria-label={this.ariaLabel}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes} aria-label={this.ariaLabel}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-icon-button.js","sourceRoot":"","sources":["../../../src/components/af-icon-button/af-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,YAAY;IALzB;QAME;;;;;WAKG;QACsB,YAAO,GAAyC,SAAS,CAAC;QAEnF;;WAEG;QACK,SAAI,GAAiC,QAAQ,CAAC;QAEtD;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAOlC;;WAEG;QACK,SAAI,GAAkC,QAAQ,CAAC;KAuCxD;IAhCC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,aAAa,EAAE,IAAI;YACnB,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,CACd,YAAM,KAAK,EAAC,MAAM;YAChB,eAAa,CACR,CACR,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,gBAAc,IAAI,CAAC,SAAS,IAC3D,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,gBAAc,IAAI,CAAC,SAAS,IACzF,OAAO,CACD,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-icon-button',\n  styleUrl: 'af-icon-button.css',\n  shadow: true\n})\nexport class AfIconButton {\n  /**\n   * The visual variant of the button.\n   * - `primary` - Main CTA with filled ice background\n   * - `secondary` - Supporting action with white background\n   * - `tertiary` - Minimal style with transparent background\n   */\n  @Prop({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n  /**\n   * The size of the button\n   */\n  @Prop() size: 'large' | 'medium' | 'small' = 'medium';\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   * Accessible label for screen readers\n   */\n  @Prop() ariaLabel!: string;\n\n  render() {\n    const classes = {\n      'icon-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\">\n        <slot></slot>\n      </span>\n    );\n\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes} aria-label={this.ariaLabel}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes} aria-label={this.ariaLabel}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,43 @@
+:host {
+  display: block;
+}
+
+.icon-text {
+  display: flex;
+  width: 100%;
+}
+
+/* Vertical orientation - icon above text */
+.icon-text--vertical {
+  flex-direction: column;
+  gap: 24px;
+  align-items: flex-start;
+}
+
+/* Horizontal orientation - icon beside text */
+.icon-text--horizontal {
+  flex-direction: row;
+  gap: 20px;
+  align-items: flex-start;
+}
+
+.icon-text__icon {
+  flex-shrink: 0;
+}
+
+.icon-text__lockup {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+  .icon-text--vertical {
+    gap: 20px;
+  }
+
+  .icon-text--horizontal {
+    gap: 16px;
+  }
+}
+

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

@@ -0,0 +1,150 @@
+import { h, Host } from "@stencil/core";
+/**
+ * IconText molecule - combines an IconBox with a TypographyLockup for feature items.
+ *
+ * Composes:
+ * - af-icon-box: Themed icon container
+ * - af-typography-lockup: Heading, description, and button slots
+ *
+ * Inherits theme colors from parent Section via CSS custom properties.
+ *
+ * @slot - Heading text content (passed to TypographyLockup)
+ * @slot description - Body/description text
+ * @slot buttons - Action buttons (typically tertiary style)
+ *
+ * @example
+ * ```html
+ * <af-icon-text icon="settings" heading-size="4">
+ *   Feature Heading
+ *   <span slot="description">Feature description text.</span>
+ *   <af-button slot="buttons" variant="tertiary">Learn more</af-button>
+ * </af-icon-text>
+ * ```
+ */
+export class AfIconText {
+    constructor() {
+        /**
+         * Heading size for the typography lockup (1-5, where 1 is largest)
+         */
+        this.headingSize = 4;
+        /**
+         * Layout orientation
+         * - 'vertical': Icon above text (default, used in grid layouts)
+         * - 'horizontal': Icon beside text (used in compact layouts)
+         */
+        this.orientation = 'vertical';
+        /**
+         * Size of the icon box
+         */
+        this.iconSize = 'default';
+    }
+    render() {
+        const containerClasses = {
+            'icon-text': true,
+            [`icon-text--${this.orientation}`]: true,
+        };
+        return (h(Host, { key: '4ab83cfbaeadd4d5db898582966050b6bc193d6c' }, h("div", { key: 'ff16245f1344e9cb51e60f9615b126f31154c998', class: containerClasses }, h("af-icon-box", { key: 'dc83c0df2a209383d501dfba6ae0d633cc56dc1d', icon: this.icon, size: this.iconSize, class: "icon-text__icon" }), h("af-typography-lockup", { key: 'e0b1c5ed913b36c137de77e194e5241cfa3e6973', headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "icon-text__lockup" }, h("slot", { key: 'df7ddf9e2ea7045346db6380f52b74ff36bbad45' }), h("span", { key: '07dcdcaa69def9ba0a5c1964efdcf7778f4dc210', slot: "description" }, h("slot", { key: '2c609e55d2c5fd41ee6c7681f73ea2e0c84e8130', name: "description" })), h("span", { key: '27789b11658d17fd3695648e1798f6efdc3ac913', slot: "buttons" }, h("slot", { key: '3e9c4e2ff23ba9966add8f618d5b3c0ef0b8bc4e', name: "buttons" }))))));
+    }
+    static get is() { return "af-icon-text"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-icon-text.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-icon-text.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": [],
+                    "text": "The icon name to display in the IconBox"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "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": "4"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout orientation\n- 'vertical': Icon above text (default, used in grid layouts)\n- 'horizontal': Icon beside text (used in compact layouts)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'vertical'"
+            },
+            "iconSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'default' | 'large'",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the icon box"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-size",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-icon-text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-icon-text.js","sourceRoot":"","sources":["../../../src/components/af-icon-text/af-icon-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAOH,MAAM,OAAO,UAAU;IANvB;QAYE;;WAEG;QACK,gBAAW,GAAsB,CAAC,CAAC;QAE3C;;;;WAIG;QACK,gBAAW,GAA8B,UAAU,CAAC;QAE5D;;WAEG;QACK,aAAQ,GAAkC,SAAS,CAAC;KAmC7D;IAjCC,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,WAAW,EAAE,IAAI;YACjB,CAAC,cAAc,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;SACzC,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,oEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAC,iBAAiB,GACV;gBAEf,6EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU,EAC1B,KAAK,EAAC,mBAAmB;oBAEzB,8DAAa;oBACb,6DAAM,IAAI,EAAC,aAAa;wBACtB,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC3B;oBACP,6DAAM,IAAI,EAAC,SAAS;wBAClB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACvB,CACc,CACnB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\nimport type { IconName } from '@affinda/icons';\n\n/**\n * IconText molecule - combines an IconBox with a TypographyLockup for feature items.\n * \n * Composes:\n * - af-icon-box: Themed icon container\n * - af-typography-lockup: Heading, description, and button slots\n * \n * Inherits theme colors from parent Section via CSS custom properties.\n * \n * @slot - Heading text content (passed to TypographyLockup)\n * @slot description - Body/description text\n * @slot buttons - Action buttons (typically tertiary style)\n * \n * @example\n * ```html\n * <af-icon-text icon=\"settings\" heading-size=\"4\">\n *   Feature Heading\n *   <span slot=\"description\">Feature description text.</span>\n *   <af-button slot=\"buttons\" variant=\"tertiary\">Learn more</af-button>\n * </af-icon-text>\n * ```\n */\n@Component({\n  tag: 'af-icon-text',\n  styleUrl: 'af-icon-text.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIconText {\n  /**\n   * The icon name to display in the IconBox\n   */\n  @Prop() icon!: IconName;\n\n  /**\n   * Heading size for the typography lockup (1-5, where 1 is largest)\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 4;\n\n  /**\n   * Layout orientation\n   * - 'vertical': Icon above text (default, used in grid layouts)\n   * - 'horizontal': Icon beside text (used in compact layouts)\n   */\n  @Prop() orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Size of the icon box\n   */\n  @Prop() iconSize: 'small' | 'default' | 'large' = 'default';\n\n  render() {\n    const containerClasses = {\n      'icon-text': true,\n      [`icon-text--${this.orientation}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <af-icon-box \n            icon={this.icon} \n            size={this.iconSize}\n            class=\"icon-text__icon\"\n          ></af-icon-box>\n          \n          <af-typography-lockup\n            headingSize={this.headingSize}\n            textAlignment=\"left\"\n            buttonAlignment=\"vertical\"\n            class=\"icon-text__lockup\"\n          >\n            <slot></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      </Host>\n    );\n  }\n}\n\n"]}

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

@@ -0,0 +1,99 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  
+  /* Override card atom defaults - illustrated card handles its own spacing */
+  --af-card-padding: 0;
+  --af-card-gap: 0;
+}
+
+/* ==========================================================================
+   Base Illustrated Card Styles
+   ========================================================================== */
+
+.illustrated-card {
+  min-height: 400px;
+}
+
+/* ==========================================================================
+   Content Area
+   ========================================================================== */
+
+.illustrated-card__content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  z-index: 1;
+}
+
+/* Desktop default size spacing */
+.illustrated-card--breakpoint-desktop.illustrated-card--size-default .illustrated-card__content {
+  padding: 40px 32px 12px 32px;
+}
+
+/* Desktop large size spacing */
+.illustrated-card--breakpoint-desktop.illustrated-card--size-large .illustrated-card__content {
+  padding: 40px 40px 0 40px;
+}
+
+/* Mobile spacing */
+.illustrated-card--breakpoint-mobile .illustrated-card__content {
+  padding: 32px 24px 12px 24px;
+}
+
+/* ==========================================================================
+   Illustration Area
+   ========================================================================== */
+
+.illustrated-card__illustration-area {
+  position: relative;
+  width: 100%;
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  box-sizing: border-box;
+}
+
+/* Desktop illustration area height */
+.illustrated-card--breakpoint-desktop .illustrated-card__illustration-area {
+  min-height: 160px;
+}
+
+/* Mobile illustration area height */
+.illustrated-card--breakpoint-mobile .illustrated-card__illustration-area {
+  min-height: 192px;
+}
+
+/* Illustration placeholder for when using data attributes */
+.illustrated-card__illustration-placeholder {
+  width: 100%;
+  height: 100%;
+  min-height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Illustration image styling */
+.illustrated-card__illustration-area ::slotted(img),
+.illustrated-card__illustration-area img {
+  max-width: 100%;
+  max-height: 200px;
+  height: auto;
+  object-fit: contain;
+}
+
+/* ==========================================================================
+   Typography Lockup Styling
+   ========================================================================== */
+
+/* Pass theme colors to typography lockup */
+.illustrated-card af-typography-lockup {
+  --colour-typography-heading-primary: var(--af-typography-heading-primary);
+  --colour-typography-body-default: var(--af-typography-body-default);
+}

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

@@ -0,0 +1,115 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Illustrated Card molecule component that combines a card with an illustration.
+ *
+ * Uses a theme background with text at top and an illustration from
+ * @affinda/illustrations at the bottom.
+ *
+ * Uses af-card atom internally and af-typography-lockup for text hierarchy.
+ *
+ * @slot - Heading text content
+ * @slot body - Description/body text content
+ * @slot illustration - Illustration image element
+ */
+export class AfIllustratedCard {
+    constructor() {
+        /**
+         * Theme variant - sets background color and provides theme context.
+         * Defaults to 'mist-green'.
+         */
+        this.theme = 'mist-green';
+        /**
+         * Responsive breakpoint for typography sizing.
+         */
+        this.breakpoint = 'desktop';
+        /**
+         * Card size variant (applies to desktop only).
+         */
+        this.cardSize = 'default';
+    }
+    render() {
+        const wrapperClasses = {
+            'illustrated-card': true,
+            [`illustrated-card--breakpoint-${this.breakpoint}`]: true,
+            [`illustrated-card--size-${this.cardSize}`]: true,
+        };
+        return (h(Host, { key: '60f265c32638f31318bcb0292b108cc1989af937' }, h("div", { key: '25d4c1f7652930f7e6948fef7ff33c21448dcb0f', class: wrapperClasses }, h("af-card", { key: '3b6dcf78a697a100273447de8ac6c19cc774bf1c', theme: this.theme }, h("div", { key: '4f1268ae1c60812414414423ec4af94ab3ee8b72', class: "illustrated-card__content" }, h("af-typography-lockup", { key: '346399ff84a4c2d22b201e0296f47a9b3fd5ab0a', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonAlignment: "vertical" }, h("slot", { key: '6e164be82cc05eb6debffc4ec24af5653f6a1306' }), h("span", { key: 'd0266f34ec02d44b76eba1e0ccf9c4856c08f33c', slot: "description" }, h("slot", { key: '6b6d659c54e83419f3b5e452b64fada7ba33e257', name: "body" })))), h("div", { key: '1319568917cdce5d2d37294af416dcfe58b1c4b5', class: "illustrated-card__illustration-area" }, h("slot", { key: 'bdea39d0db9615de5a1a6535f845d0c392604e74', name: "illustration" }))))));
+    }
+    static get is() { return "af-illustrated-card"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-illustrated-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-illustrated-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "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": "Theme variant - sets background color and provides theme context.\nDefaults to 'mist-green'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'mist-green'"
+            },
+            "breakpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'desktop' | 'mobile'",
+                    "resolved": "\"desktop\" | \"mobile\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Responsive breakpoint for typography sizing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "breakpoint",
+                "defaultValue": "'desktop'"
+            },
+            "cardSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'large'",
+                    "resolved": "\"default\" | \"large\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Card size variant (applies to desktop only)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "card-size",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-illustrated-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-illustrated-card.js","sourceRoot":"","sources":["../../../src/components/af-illustrated-card/af-illustrated-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;GAWG;AAOH,MAAM,OAAO,iBAAiB;IAN9B;QAOE;;;WAGG;QACK,UAAK,GAAsE,YAAY,CAAC;QAEhG;;WAEG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;WAEG;QACK,aAAQ,GAAwB,SAAS,CAAC;KAqCnD;IAnCC,MAAM;QACJ,MAAM,cAAc,GAAG;YACrB,kBAAkB,EAAE,IAAI;YACxB,CAAC,gCAAgC,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;YACzD,CAAC,0BAA0B,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;SAClD,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,cAAc;gBACxB,gEAAS,KAAK,EAAE,IAAI,CAAC,KAAK;oBAExB,4DAAK,KAAK,EAAC,2BAA2B;wBACpC,6EACE,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU;4BAE1B,8DAAa;4BACb,6DAAM,IAAI,EAAC,aAAa;gCACtB,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACpB,CACc,CACnB;oBAGN,4DAAK,KAAK,EAAC,qCAAqC;wBAC9C,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,CACE,CACN,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Illustrated Card molecule component that combines a card with an illustration.\n * \n * Uses a theme background with text at top and an illustration from\n * @affinda/illustrations at the bottom.\n * \n * Uses af-card atom internally and af-typography-lockup for text hierarchy.\n * \n * @slot - Heading text content\n * @slot body - Description/body text content\n * @slot illustration - Illustration image element\n */\n@Component({\n  tag: 'af-illustrated-card',\n  styleUrl: 'af-illustrated-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIllustratedCard {\n  /**\n   * Theme variant - sets background color and provides theme context.\n   * Defaults to 'mist-green'.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * Responsive breakpoint for typography sizing.\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Card size variant (applies to desktop only).\n   */\n  @Prop() cardSize: 'default' | 'large' = 'default';\n\n  render() {\n    const wrapperClasses = {\n      'illustrated-card': true,\n      [`illustrated-card--breakpoint-${this.breakpoint}`]: true,\n      [`illustrated-card--size-${this.cardSize}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          <af-card theme={this.theme}>\n            {/* Content area with typography lockup */}\n            <div class=\"illustrated-card__content\">\n              <af-typography-lockup\n                headingSize={3}\n                breakpoint={this.breakpoint}\n                textAlignment=\"left\"\n                buttonAlignment=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n\n            {/* Illustration area at bottom */}\n            <div class=\"illustrated-card__illustration-area\">\n              <slot name=\"illustration\"></slot>\n            </div>\n          </af-card>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,27 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.image-container {
+  position: relative;
+  border-radius: var(--radius-md, 12px);
+  overflow: hidden;
+}
+
+.image {
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+
+/* Inset border overlay */
+.image-border {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius-md, 12px);
+  box-shadow: inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));
+  pointer-events: none;
+}
+

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

@@ -0,0 +1,65 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A styled image container with rounded corners and a subtle inset border.
+ * Provides consistent image styling across the design system.
+ */
+export class AfImage {
+    render() {
+        return (h(Host, { key: 'dd1304f9c9c6c757638ddd67ee312534819e9e48' }, h("div", { key: '4ecbd48548404ecf0839eb15fef64dcb7b2d0757', class: "image-container" }, h("img", { key: '73d9d87b21b3aec12f708f19a83f91622b5bb896', src: this.src, alt: this.alt, class: "image" }), h("div", { key: 'e54f1dbc2ec4976056e58a570420fd3f772907cf', class: "image-border", "aria-hidden": "true" }))));
+    }
+    static get is() { return "af-image"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-image.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-image.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The image source URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternative text for the image (required for accessibility)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-image.js","sourceRoot":"","sources":["../../../src/components/af-image/af-image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAOH,MAAM,OAAO,OAAO;IAWlB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,4DAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,OAAO,GAAG;gBACnD,4DAAK,KAAK,EAAC,cAAc,iBAAa,MAAM,GAAO,CAC/C,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A styled image container with rounded corners and a subtle inset border.\n * Provides consistent image styling across the design system.\n */\n@Component({\n  tag: 'af-image',\n  styleUrl: 'af-image.css',\n  shadow: false,\n  scoped: true\n})\nexport class AfImage {\n  /**\n   * The image source URL\n   */\n  @Prop() src!: string;\n\n  /**\n   * Alternative text for the image (required for accessibility)\n   */\n  @Prop() alt!: string;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"image-container\">\n          <img src={this.src} alt={this.alt} class=\"image\" />\n          <div class=\"image-border\" aria-hidden=\"true\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}