@affinda/wc 0.0.20 → 0.0.21

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

@@ -3,11 +3,15 @@ import { h, Host } from "@stencil/core";
  * Tag displays a label in a styled container.
  * Perfect for categorization, topics, or metadata display.
  *
+ * The `default` variant inherits its colors from the parent theme context
+ * (af-section, af-card). Use explicit variants (`inkwell`, `white`,
+ * `soft-clay`, `mist-green`) to override.
+ *
  * @example
  * ```html
  * <af-tag>AI</af-tag>
- * <af-tag size="small">Machine Learning</af-tag>
- * <af-tag size="large" variant="light">Document Processing</af-tag>
+ * <af-tag size="small" variant="inkwell">Machine Learning</af-tag>
+ * <af-tag size="large" variant="white">Document Processing</af-tag>
  * ```
  */
 export class AfTag {
@@ -15,25 +19,24 @@ export class AfTag {
         /**
          * The size of the tag
          * - `x-small` - Compact tag with minimal padding
-         * - `small` - Small tag with moderate padding
+         * - `small` - Small tag with moderate padding (default)
          * - `large` - Large tag with generous padding
          */
         this.size = 'small';
         /**
-         * The visual variant of the tag
-         * - `sand` - Soft-clay/tan colored background (default)
-         * - `light` - Mist-green/light colored background
+         * Visual variant of the tag. `default` inherits tag colors from the
+         * parent theme context. Theme-named variants force a specific palette.
          */
-        this.variant = 'sand';
+        this.variant = 'default';
     }
     render() {
         const TagElement = this.href ? 'a' : 'span';
         const linkProps = this.href ? { href: this.href } : {};
-        return (h(Host, { key: '7114f4a8e55509fb2c45561967d0dab339b7a75c' }, h(TagElement, { key: '868a14474ecd8edb4a90489d39913e5862c033c4', class: {
+        return (h(Host, { key: '168820b68d12f7e66a926c92f9f93c1a8dca20b0' }, h(TagElement, { key: '5f4d4ee9eeb5971003c0906e886c863186068d5e', class: {
                 'tag': true,
                 [`size-${this.size}`]: true,
                 [`variant-${this.variant}`]: true,
-            }, ...linkProps }, h("slot", { key: '57d2975785b2ec3ac74256510c1a26bfe2b6d96b' }))));
+            }, ...linkProps }, h("slot", { key: 'd756e89c36ce088ed425153cc1199f21a6047461' }))));
     }
     static get is() { return "af-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -58,7 +61,7 @@ export class AfTag {
                     "references": {
                         "TagSize": {
                             "location": "local",
-                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-tag/af-tag.tsx",
+                            "path": "/home/andrew/affinda-ui/packages/wc/src/components/af-tag/af-tag.tsx",
                             "id": "src/components/af-tag/af-tag.tsx::TagSize"
                         }
                     }
@@ -67,7 +70,7 @@ export class AfTag {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The size of the tag\n- `x-small` - Compact tag with minimal padding\n- `small` - Small tag with moderate padding\n- `large` - Large tag with generous padding"
+                    "text": "The size of the tag\n- `x-small` - Compact tag with minimal padding\n- `small` - Small tag with moderate padding (default)\n- `large` - Large tag with generous padding"
                 },
                 "getter": false,
                 "setter": false,
@@ -80,11 +83,11 @@ export class AfTag {
                 "mutable": false,
                 "complexType": {
                     "original": "TagVariant",
-                    "resolved": "\"light\" | \"sand\"",
+                    "resolved": "\"default\" | \"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\"",
                     "references": {
                         "TagVariant": {
                             "location": "local",
-                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-tag/af-tag.tsx",
+                            "path": "/home/andrew/affinda-ui/packages/wc/src/components/af-tag/af-tag.tsx",
                             "id": "src/components/af-tag/af-tag.tsx::TagVariant"
                         }
                     }
@@ -93,13 +96,13 @@ export class AfTag {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The visual variant of the tag\n- `sand` - Soft-clay/tan colored background (default)\n- `light` - Mist-green/light colored background"
+                    "text": "Visual variant of the tag. `default` inherits tag colors from the\nparent theme context. Theme-named variants force a specific palette."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "variant",
-                "defaultValue": "'sand'"
+                "defaultValue": "'default'"
             },
             "href": {
                 "type": "string",

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

@@ -1 +1 @@
-{"version":3,"file":"af-tag.js","sourceRoot":"","sources":["../../../src/components/af-tag/af-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAKzD;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,KAAK;IALlB;QAME;;;;;WAKG;QACK,SAAI,GAAY,OAAO,CAAC;QAEhC;;;;WAIG;QACK,YAAO,GAAe,MAAM,CAAC;KA0BtC;IAnBC,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;QAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAEvD,OAAO,CACL,EAAC,IAAI;YACH,EAAC,UAAU,qDACT,KAAK,EAAE;oBACL,KAAK,EAAE,IAAI;oBACX,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;oBAC3B,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;iBAClC,KACG,SAAS;gBAEb,8DAAQ,CACG,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type TagSize = 'x-small' | 'small' | 'large';\nexport type TagVariant = 'sand' | 'light';\n\n/**\n * Tag displays a label in a styled container.\n * Perfect for categorization, topics, or metadata display.\n * \n * @example\n * ```html\n * <af-tag>AI</af-tag>\n * <af-tag size=\"small\">Machine Learning</af-tag>\n * <af-tag size=\"large\" variant=\"light\">Document Processing</af-tag>\n * ```\n */\n@Component({\n  tag: 'af-tag',\n  styleUrl: 'af-tag.css',\n  shadow: true\n})\nexport class AfTag {\n  /**\n   * The size of the tag\n   * - `x-small` - Compact tag with minimal padding\n   * - `small` - Small tag with moderate padding\n   * - `large` - Large tag with generous padding\n   */\n  @Prop() size: TagSize = 'small';\n\n  /**\n   * The visual variant of the tag\n   * - `sand` - Soft-clay/tan colored background (default)\n   * - `light` - Mist-green/light colored background\n   */\n  @Prop() variant: TagVariant = 'sand';\n\n  /**\n   * The URL to navigate to when the tag is clicked (makes the tag a link)\n   */\n  @Prop() href?: string;\n\n  render() {\n    const TagElement = this.href ? 'a' : 'span';\n    const linkProps = this.href ? { href: this.href } : {};\n\n    return (\n      <Host>\n        <TagElement\n          class={{\n            'tag': true,\n            [`size-${this.size}`]: true,\n            [`variant-${this.variant}`]: true,\n          }}\n          {...linkProps}\n        >\n          <slot />\n        </TagElement>\n      </Host>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"af-tag.js","sourceRoot":"","sources":["../../../src/components/af-tag/af-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAKzD;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,KAAK;IALlB;QAME;;;;;WAKG;QACK,SAAI,GAAY,OAAO,CAAC;QAEhC;;;WAGG;QACK,YAAO,GAAe,SAAS,CAAC;KA0BzC;IAnBC,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;QAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAEvD,OAAO,CACL,EAAC,IAAI;YACH,EAAC,UAAU,qDACT,KAAK,EAAE;oBACL,KAAK,EAAE,IAAI;oBACX,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;oBAC3B,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;iBAClC,KACG,SAAS;gBAEb,8DAAQ,CACG,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\nexport type TagSize = 'x-small' | 'small' | 'large';\nexport type TagVariant = 'default' | 'inkwell' | 'white' | 'soft-clay' | 'mist-green';\n\n/**\n * Tag displays a label in a styled container.\n * Perfect for categorization, topics, or metadata display.\n *\n * The `default` variant inherits its colors from the parent theme context\n * (af-section, af-card). Use explicit variants (`inkwell`, `white`,\n * `soft-clay`, `mist-green`) to override.\n *\n * @example\n * ```html\n * <af-tag>AI</af-tag>\n * <af-tag size=\"small\" variant=\"inkwell\">Machine Learning</af-tag>\n * <af-tag size=\"large\" variant=\"white\">Document Processing</af-tag>\n * ```\n */\n@Component({\n  tag: 'af-tag',\n  styleUrl: 'af-tag.css',\n  shadow: true\n})\nexport class AfTag {\n  /**\n   * The size of the tag\n   * - `x-small` - Compact tag with minimal padding\n   * - `small` - Small tag with moderate padding (default)\n   * - `large` - Large tag with generous padding\n   */\n  @Prop() size: TagSize = 'small';\n\n  /**\n   * Visual variant of the tag. `default` inherits tag colors from the\n   * parent theme context. Theme-named variants force a specific palette.\n   */\n  @Prop() variant: TagVariant = 'default';\n\n  /**\n   * The URL to navigate to when the tag is clicked (makes the tag a link)\n   */\n  @Prop() href?: string;\n\n  render() {\n    const TagElement = this.href ? 'a' : 'span';\n    const linkProps = this.href ? { href: this.href } : {};\n\n    return (\n      <Host>\n        <TagElement\n          class={{\n            'tag': true,\n            [`size-${this.size}`]: true,\n            [`variant-${this.variant}`]: true,\n          }}\n          {...linkProps}\n        >\n          <slot />\n        </TagElement>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -16,7 +16,7 @@
 /* Image side - 40.5% of card width (519px of 1280px in Figma) */
 .testimonial-image {
   position: relative;
-  width: 40.5%;
+  width: 50%;
   min-width: 300px;
   /* Minimum for readability */
   max-width: 519px;
@@ -84,16 +84,38 @@
   flex-shrink: 0;
 }
 
-/* Quote text - layout only, typography comes from af-text */
+/* Quote text — 22px / 140% per Webflow reference. Accepts either the
+   `quote` prop (rendered as plain text) or the `quote-body` slot (rich). */
 .testimonial-text {
-  max-height: 155px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);
+  font-size: 22px;
+  line-height: 1.4;
+  font-weight: var(--font-weight-regular, 400);
+  color: var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b));
+}
+.testimonial-text ::slotted(p),
+.testimonial-text p {
+  font: inherit;
+  color: inherit;
+  margin: 0 0 12px 0;
+}
+.testimonial-text ::slotted(p:last-child),
+.testimonial-text p:last-child {
+  margin-bottom: 0;
+}
+.testimonial-text ::slotted(ul),
+.testimonial-text ul {
+  margin: 0 0 12px 0;
+  padding-left: 20px;
 }
 
 /* Attribution uses body-dark color for emphasis */
 .testimonial-attribution {
-  --af-typography-body-default: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));
+  font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));
+  margin-top: 12px;
 }
 
 .testimonial-stats {

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

@@ -1,4 +1,12 @@
 import { h, Host } from "@stencil/core";
+/**
+ * @slot quote-body - Rich quote content (paragraphs, lists). Overrides the
+ *   `quote` string prop when provided. Use for testimonials that include
+ *   multiple paragraphs, bulleted points, or inline emphasis.
+ * @slot quote-icon - Quote icon (defaults to af-icon name="quote").
+ * @slot stats - Statistic items (af-testimonial-stat components).
+ * @slot navigation - Custom nav controls (when not using built-in ones).
+ */
 export class AfTestimonial {
     constructor() {
         /**
@@ -21,11 +29,11 @@ export class AfTestimonial {
         };
     }
     render() {
-        return (h(Host, { key: '3e77d8e2922ae899fdddfa2ff5f495e97a4f0014' }, h("div", { key: 'fc304bd6b0c74f09ee4be159480c447a3788a919', class: "testimonial-card" }, h("div", { key: 'be695215e50b0a0c0ba0903ddb0bf8b134316185', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: '898522a8038ca9fdde2ea014f65e2a92b925cb22', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: 'a94f0ddf5ea5b19894296267ef5fa02a4ad123d1', class: "testimonial-logo" }, h("img", { key: '82a2a7adf088ccfbf50a5c5181d2377f002e7e2d', src: this.logoImage, alt: "Company logo" })))), h("div", { key: '39248255de8f8dd551a69ea0b36877ac762bebc2', class: "testimonial-content" }, h("div", { key: '0f6f8aa1d0a0cb96f8ef05c272afa2c349bcc9ce', class: "testimonial-quote-section" }, h("div", { key: 'bc29a0d1b408f44445d3951824b347d14c4f615e', class: "testimonial-quote-icon" }, h("slot", { key: '9c611e4faf05905c5188374a10932610858990ec', name: "quote-icon" }, h("af-icon", { key: 'a7e1862ccdd9d0492ed028372dbb77febb15fcb6', name: "quote", size: 48 }))), h("af-text", { key: '8b654e90692d7106be3c7c023977cf3eb0d449c8', variant: "xlarge", class: "testimonial-text" }, this.quote), h("af-text", { key: '89011282ffd9e5857cdf121abdfb183a1e8ea87c', variant: "xlarge", class: "testimonial-attribution" }, this.attribution)), h("div", { key: '195335ab3ab060c48c60780ac0d62e6dc6dff639', class: "testimonial-stats" }, h("slot", { key: 'bdd887e8dfe27d9879dcfe92cc4a212be78e83d1', name: "stats" })), h("div", { key: '579b975917923bcda4d8b9e5efea6ab76b96756f', class: "testimonial-footer" }, h("div", { key: '15b64a7ad6e409692c8c38823b438102733e2b5f', class: "testimonial-nav" }, this.showNavigation ? (
+        return (h(Host, { key: 'fcdb1ff31040a9cb20381ada0ddb3f0ebe468b92' }, h("div", { key: 'b13944c9bb22271b9e11ffd08871aed9675eeb6b', class: "testimonial-card" }, h("div", { key: 'cc18afbd35481da173c9fcf7dc1ece3bf21ec0a6', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: 'a4fccdc7ac9efbaa3e6f80aa2b1221a856e4b41b', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: '0fc4a5b3815aa9123ccb2b8788610fd7dfc49b8b', class: "testimonial-logo" }, h("img", { key: '5fc97a62298e8c484d169faffbbb891bc499c4ca', src: this.logoImage, alt: "Company logo" })))), h("div", { key: '05db0629d3d182ec5c9aa62d0687f7db93b17358', class: "testimonial-content" }, h("div", { key: 'd810a2544ac07ebdeee3b9598fcbdd900b43a200', class: "testimonial-quote-section" }, h("div", { key: '7f82479f01c29dc55d4757cfdf2563ba7f5b27b2', class: "testimonial-quote-icon" }, h("slot", { key: '598e43eb74d9436f7e91389f5e8703b24be025f1', name: "quote-icon" }, h("af-icon", { key: '8a513b9ddccfbbd09fde07925ff9dd2a9e429d6b', name: "quote", size: 48 }))), h("div", { key: '208146b160dddb380eadaed8c2d64b1125ee7de4', class: "testimonial-text" }, h("slot", { key: '54dfc479096474c67ebaaf91ef2aa2f9f9035f6c', name: "quote-body" }, this.quote)), h("div", { key: 'bb6e20af12cece4b746052f3c3c34affb0b07627', class: "testimonial-attribution" }, this.attribution)), h("div", { key: 'd97ec31aaa11702b1f0564cc594230bba99c4fa0', class: "testimonial-stats" }, h("slot", { key: '73a0fceb1e056fadd9e3675a3bb1bcb2aa121ef7', name: "stats" })), h("div", { key: '52bda4be7e6be1a539c719717e4ae47740390d98', class: "testimonial-footer" }, h("div", { key: '5117302dd9ac52b587d95b766b1454aca7206ba4', class: "testimonial-nav" }, this.showNavigation ? (
         // Render built-in navigation buttons
         h("div", { class: "testimonial-nav-buttons" }, h("af-icon-button", { variant: "secondary", disabled: !this.hasPrev, onClick: this.handlePrev, ariaLabel: "Previous testimonial" }, h("af-icon", { name: "arrow-left", size: 24 })), h("af-icon-button", { variant: "secondary", disabled: !this.hasNext, onClick: this.handleNext, ariaLabel: "Next testimonial" }, h("af-icon", { name: "arrow-right", size: 24 })))) : (
         // Allow custom navigation via slot
-        h("slot", { name: "navigation" }))), this.readMoreLink && (h("af-button", { key: '96f5417e1afd667746a06a0e52f108840dfc3e85', variant: "secondary", href: this.readMoreLink }, "Read full story", h("af-icon", { key: 'ede339436c8332c9463a4f1252b97235aae80f70', slot: "icon-right", name: "arrow-right", size: 24 }))))))));
+        h("slot", { name: "navigation" }))), this.readMoreLink && (h("af-button", { key: '9664bad03640cb9b5d1e93f10c85b4b4307c689e', variant: "secondary", href: this.readMoreLink }, "Read full story", h("af-icon", { key: '2dccacf7aaa0a734587916604823f81a2b35b9f9', slot: "icon-right", name: "arrow-right", size: 24 }))))))));
     }
     static get is() { return "af-testimonial"; }
     static get encapsulation() { return "scoped"; }
@@ -84,14 +92,14 @@ export class AfTestimonial {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Testimonial quote text"
+                    "text": "Testimonial quote text. Falls back to the `quote-body` slot if that\nslot has content."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1 +1 @@
-{"version":3,"file":"af-testimonial.js","sourceRoot":"","sources":["../../../src/components/af-testimonial/af-testimonial.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'af-testimonial',\n  styleUrl: 'af-testimonial.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTestimonial {\n  /**\n   * Background image URL for the testimonial card\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * Company logo URL\n   */\n  @Prop() logoImage?: string;\n\n  /**\n   * Testimonial quote text\n   */\n  @Prop() quote!: string;\n\n  /**\n   * Attribution text (e.g., \"– Nathaniel Barrs, CTO, PSC Insurance\")\n   */\n  @Prop() attribution!: string;\n\n  /**\n   * Link to full case study\n   */\n  @Prop() readMoreLink?: string;\n\n  /**\n   * Whether to show built-in navigation buttons (used when in a carousel)\n   */\n  @Prop({ mutable: true }) showNavigation: boolean = false;\n\n  /**\n   * Whether the previous button is enabled\n   */\n  @Prop({ mutable: true }) hasPrev: boolean = false;\n\n  /**\n   * Whether the next button is enabled\n   */\n  @Prop({ mutable: true }) hasNext: boolean = false;\n\n  /**\n   * Emitted when the previous button is clicked\n   */\n  @Event() navPrev!: EventEmitter<void>;\n\n  /**\n   * Emitted when the next button is clicked\n   */\n  @Event() navNext!: EventEmitter<void>;\n\n  private handlePrev = () => {\n    this.navPrev.emit();\n  };\n\n  private handleNext = () => {\n    this.navNext.emit();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"testimonial-card\">\n          {/* Image side */}\n          <div class=\"testimonial-image\">\n            {this.backgroundImage && (\n              <img src={this.backgroundImage} alt=\"\" class=\"testimonial-bg-image\" />\n            )}\n            {this.logoImage && (\n              <div class=\"testimonial-logo\">\n                <img src={this.logoImage} alt=\"Company logo\" />\n              </div>\n            )}\n          </div>\n\n          {/* Content side */}\n          <div class=\"testimonial-content\">\n            <div class=\"testimonial-quote-section\">\n              {/* Quote icon - using af-icon atom with slot for flexibility */}\n              <div class=\"testimonial-quote-icon\">\n                <slot name=\"quote-icon\">\n                  <af-icon name=\"quote\" size={48} />\n                </slot>\n              </div>\n\n              {/* Quote text - using af-text atom for proper theming */}\n              <af-text variant=\"xlarge\" class=\"testimonial-text\">{this.quote}</af-text>\n              {/* Attribution - using af-text atom with dark variant styling */}\n              <af-text variant=\"xlarge\" class=\"testimonial-attribution\">{this.attribution}</af-text>\n            </div>\n\n            {/* Statistics slot */}\n            <div class=\"testimonial-stats\">\n              <slot name=\"stats\"></slot>\n            </div>\n\n            {/* Footer with navigation and CTA */}\n            <div class=\"testimonial-footer\">\n              <div class=\"testimonial-nav\">\n                {this.showNavigation ? (\n                  // Render built-in navigation buttons\n                  <div class=\"testimonial-nav-buttons\">\n                    <af-icon-button\n                      variant=\"secondary\"\n                      disabled={!this.hasPrev}\n                      onClick={this.handlePrev}\n                      ariaLabel=\"Previous testimonial\"\n                    >\n                      <af-icon name=\"arrow-left\" size={24} />\n                    </af-icon-button>\n                    <af-icon-button\n                      variant=\"secondary\"\n                      disabled={!this.hasNext}\n                      onClick={this.handleNext}\n                      ariaLabel=\"Next testimonial\"\n                    >\n                      <af-icon name=\"arrow-right\" size={24} />\n                    </af-icon-button>\n                  </div>\n                ) : (\n                  // Allow custom navigation via slot\n                  <slot name=\"navigation\"></slot>\n                )}\n              </div>\n              {this.readMoreLink && (\n                <af-button variant=\"secondary\" href={this.readMoreLink}>\n                  Read full story\n                  <af-icon slot=\"icon-right\" name=\"arrow-right\" size={24} />\n                </af-button>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n\n"]}
+{"version":3,"file":"af-testimonial.js","sourceRoot":"","sources":["../../../src/components/af-testimonial/af-testimonial.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * @slot quote-body - Rich quote content (paragraphs, lists). Overrides the\n *   `quote` string prop when provided. Use for testimonials that include\n *   multiple paragraphs, bulleted points, or inline emphasis.\n * @slot quote-icon - Quote icon (defaults to af-icon name=\"quote\").\n * @slot stats - Statistic items (af-testimonial-stat components).\n * @slot navigation - Custom nav controls (when not using built-in ones).\n */\n@Component({\n  tag: 'af-testimonial',\n  styleUrl: 'af-testimonial.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfTestimonial {\n  /**\n   * Background image URL for the testimonial card\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * Company logo URL\n   */\n  @Prop() logoImage?: string;\n\n  /**\n   * Testimonial quote text. Falls back to the `quote-body` slot if that\n   * slot has content.\n   */\n  @Prop() quote?: string;\n\n  /**\n   * Attribution text (e.g., \"– Nathaniel Barrs, CTO, PSC Insurance\")\n   */\n  @Prop() attribution!: string;\n\n  /**\n   * Link to full case study\n   */\n  @Prop() readMoreLink?: string;\n\n  /**\n   * Whether to show built-in navigation buttons (used when in a carousel)\n   */\n  @Prop({ mutable: true }) showNavigation: boolean = false;\n\n  /**\n   * Whether the previous button is enabled\n   */\n  @Prop({ mutable: true }) hasPrev: boolean = false;\n\n  /**\n   * Whether the next button is enabled\n   */\n  @Prop({ mutable: true }) hasNext: boolean = false;\n\n  /**\n   * Emitted when the previous button is clicked\n   */\n  @Event() navPrev!: EventEmitter<void>;\n\n  /**\n   * Emitted when the next button is clicked\n   */\n  @Event() navNext!: EventEmitter<void>;\n\n  private handlePrev = () => {\n    this.navPrev.emit();\n  };\n\n  private handleNext = () => {\n    this.navNext.emit();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"testimonial-card\">\n          {/* Image side */}\n          <div class=\"testimonial-image\">\n            {this.backgroundImage && (\n              <img src={this.backgroundImage} alt=\"\" class=\"testimonial-bg-image\" />\n            )}\n            {this.logoImage && (\n              <div class=\"testimonial-logo\">\n                <img src={this.logoImage} alt=\"Company logo\" />\n              </div>\n            )}\n          </div>\n\n          {/* Content side */}\n          <div class=\"testimonial-content\">\n            <div class=\"testimonial-quote-section\">\n              {/* Quote icon - using af-icon atom with slot for flexibility */}\n              <div class=\"testimonial-quote-icon\">\n                <slot name=\"quote-icon\">\n                  <af-icon name=\"quote\" size={48} />\n                </slot>\n              </div>\n\n              {/* Quote text — slot takes priority; falls back to prop. */}\n              <div class=\"testimonial-text\">\n                <slot name=\"quote-body\">{this.quote}</slot>\n              </div>\n              {/* Attribution */}\n              <div class=\"testimonial-attribution\">{this.attribution}</div>\n            </div>\n\n            {/* Statistics slot */}\n            <div class=\"testimonial-stats\">\n              <slot name=\"stats\"></slot>\n            </div>\n\n            {/* Footer with navigation and CTA */}\n            <div class=\"testimonial-footer\">\n              <div class=\"testimonial-nav\">\n                {this.showNavigation ? (\n                  // Render built-in navigation buttons\n                  <div class=\"testimonial-nav-buttons\">\n                    <af-icon-button\n                      variant=\"secondary\"\n                      disabled={!this.hasPrev}\n                      onClick={this.handlePrev}\n                      ariaLabel=\"Previous testimonial\"\n                    >\n                      <af-icon name=\"arrow-left\" size={24} />\n                    </af-icon-button>\n                    <af-icon-button\n                      variant=\"secondary\"\n                      disabled={!this.hasNext}\n                      onClick={this.handleNext}\n                      ariaLabel=\"Next testimonial\"\n                    >\n                      <af-icon name=\"arrow-right\" size={24} />\n                    </af-icon-button>\n                  </div>\n                ) : (\n                  // Allow custom navigation via slot\n                  <slot name=\"navigation\"></slot>\n                )}\n              </div>\n              {this.readMoreLink && (\n                <af-button variant=\"secondary\" href={this.readMoreLink}>\n                  Read full story\n                  <af-icon slot=\"icon-right\" name=\"arrow-right\" size={24} />\n                </af-button>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n\n"]}

package/dist/collection/components/af-testimonial-carousel/af-testimonial-carousel.js

@@ -94,7 +94,7 @@ export class AfTestimonialCarousel {
         return (this.currentIndex + 1) / this.testimonialCount;
     }
     render() {
-        return (h(Host, { key: 'deda1bbad2330b3e82ebc7a6b1f424ba76b72c29' }, h("div", { key: '1146c1a67a3a682114c95bcfa37993ccf2a1fd3e', class: "testimonial-carousel" }, h("div", { key: '38c56a104b2f8956acb144f95a7607b35220f99b', class: "testimonial-slides" }, h("slot", { key: '981f9b3eb29f8f72095568747b45d56eb4d58ca3' })), this.testimonialCount > 1 && (h("div", { key: '5f49d3b23edf9748e5c1205b1ee25948b9d5817b', class: "testimonial-progress" }, h("af-progress-line", { key: 'ef7d80cbae1f4284e58a25cad35120880b6746d2', progress: this.getProgress() }))))));
+        return (h(Host, { key: 'fda7e141f1657586828a58e7b82f18be8e4317c3' }, h("div", { key: '99dff39b6d4396358ed8aefdd8b7d6cc728f81da', class: "testimonial-carousel" }, h("div", { key: '3d89451d92c9fbf339936390b9637a90d726d62a', class: "testimonial-slides" }, h("slot", { key: '6cf20af5e78756e401aa5175911b5937e8abeab7' })), this.testimonialCount > 1 && (h("div", { key: 'f6e41055d74ad466524a7f96377c5a582e974a51', class: "testimonial-progress" }, h("af-progress-line", { key: 'aa68920e47fe7ec219374d6fadde33897f2b0df9', progress: this.getProgress() }))))));
     }
     static get is() { return "af-testimonial-carousel"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-testimonial-stat/af-testimonial-stat.js

@@ -7,7 +7,7 @@ export class AfTestimonialStat {
         this.accentBorder = false;
     }
     render() {
-        return (h(Host, { key: 'a52644b3c724b893aa469f41611026c4fcd51494' }, h("div", { key: '7dd93afb4f9767e144223640e398e589659d613d', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("af-heading", { key: '203a0b96fb9b3704f2afb0441d21fead46a55cb0', level: 2, class: "stat-value" }, this.value), h("af-text", { key: 'a8786177a797f6251cb97d771ff831aec4dc92fc', variant: "medium", class: "stat-description" }, this.description))));
+        return (h(Host, { key: '1310f77d569265f5399b7f355d41511552e97df3' }, h("div", { key: '37ebace6631dde10e180cc6a74bd943eec494a37', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("af-heading", { key: '39d3f362017c8f2e268b3fd704968f83603f681d', level: 2, class: "stat-value" }, this.value), h("af-text", { key: 'ba1ee71f010217ec6e98f4a40b40997d2237a53b', variant: "medium", class: "stat-description" }, this.description))));
     }
     static get is() { return "af-testimonial-stat"; }
     static get encapsulation() { return "scoped"; }

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

@@ -19,8 +19,10 @@
   gap: var(--space-8, 32px);
 }
 
+/* DOM order is controlled from the TSX (image first for image-left, text
+   first for image-right), so both variants use plain row flow. */
 .text-image--image-left {
-  flex-direction: row-reverse;
+  flex-direction: row;
 }
 
 .text-image--image-right {
@@ -99,7 +101,7 @@
   line-height: var(--line-height-heading-tight, 1);
   letter-spacing: var(--letter-spacing-heading, -0.02em);
   color: var(--af-typography-heading-primary, #14343B);
-  white-space: pre-wrap;
+  white-space: normal;
 }
 
 .text-image__heading:empty {
@@ -113,7 +115,7 @@
   font-size: var(--font-size-body-large, 18px);
   line-height: var(--line-height-body-large, 26px);
   color: var(--af-typography-body-default, #2B484F);
-  white-space: pre-wrap;
+  white-space: normal;
 }
 
 .text-image__description:empty {

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

@@ -29,7 +29,7 @@ export class AfTextImageNest {
             'nest__grid': true,
             [`grid-${this.layout}`]: true,
         };
-        return (h(Host, { key: 'fda547a6eaca9705f52fbbed04113534e438f3c8' }, h("div", { key: '565730e0ed6a4b127ef191536b1f10f1c8b417d6', class: containerClasses }, h("div", { key: '65e97a6335b837f1ffd259e5c128c01c1c212f17', class: "nest__content" }, h("div", { key: 'c6eab25a6e3fc7c6c864a6aa6182c6adc7b22032', class: gridClasses }, h("slot", { key: 'e936abaaf1854605ebb1be90130df7d2d100ef49' })), h("div", { key: '11f48762fb08c787ac90256b55bb1a351e92c505', class: "nest__footer" }, h("slot", { key: '8a0f8c1ad853f3aa9deea5df5a3f0b565a1f631e', name: "buttons" }))))));
+        return (h(Host, { key: 'b4400fe3d9f67e8966c653af0f4207fe28d89c2c' }, h("div", { key: 'e07cea2ad66bb7bf1f666417382881958ef4e7f2', class: containerClasses }, h("div", { key: '81376b5775f3059d3b26ae64eb3e9587965a4468', class: "nest__content" }, h("div", { key: '2f3d5ba877aef7dbae680ebcc3d83fcdc0242cb9', class: gridClasses }, h("slot", { key: 'cf907125930e3799d05b7b8b4ad498fe1bd174c9' })), h("div", { key: '9964efe303d3a98e65516d824b4eaccc1e14834b', class: "nest__footer" }, h("slot", { key: '93db921b203add1ec75f10c584669a6e13a1369e', name: "buttons" }))))));
     }
     static get is() { return "af-text-image-nest"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-theme-override/af-theme-override.css

@@ -54,9 +54,9 @@
   --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);
-  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #B09670);
+  --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-ghost-stroke: var(--colour-brand-soft-clay, #B09670);
   
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);
@@ -126,9 +126,9 @@
   --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);
-  --af-button-tertiary-stroke: var(--colour-brand-ice, #A6FFFB);
+  --af-button-ghost-text: var(--colour-brand-white, #ffffff);
+  --af-button-ghost-icon: var(--colour-brand-white, #ffffff);
+  --af-button-ghost-stroke: var(--colour-brand-ice, #A6FFFB);
   
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);
@@ -198,9 +198,9 @@
   --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);
-  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #B09670);
+  --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-ghost-stroke: var(--colour-brand-soft-clay, #B09670);
   
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);
@@ -270,9 +270,9 @@
   --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);
-  --af-button-tertiary-stroke: var(--colour-brand-inkwell, #14343b);
+  --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-ghost-stroke: var(--colour-brand-inkwell, #14343b);
   
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);
@@ -342,9 +342,9 @@
   --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);
-  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #b09670);
+  --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-ghost-stroke: var(--colour-brand-soft-clay, #b09670);
   
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);

package/dist/collection/components/af-theme-override/af-theme-override.js

@@ -18,7 +18,7 @@ export class AfThemeOverride {
         this.theme = 'white';
     }
     render() {
-        return (h(Host, { key: '303d518d6047bb01db2b315a93169014c849a78e' }, h("div", { key: '6d208731e221d7514d384543fe79e68c0830a3fb', class: `theme-override theme-${this.theme}` }, h("slot", { key: '75de070f92a698b39286eacc5981b3d7d642b49a' }))));
+        return (h(Host, { key: '50001378d57949164fc08ca1789372a448be5544' }, h("div", { key: '9404950a7fad99904b3600a234a9d1ea2d424054', class: `theme-override theme-${this.theme}` }, h("slot", { key: 'c5db6376b0e3dbb08eafb48f22ae8a70364deb3e' }))));
     }
     static get is() { return "af-theme-override"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-typography-lockup/af-typography-lockup.css

@@ -123,14 +123,14 @@
   gap: var(--space-2, 8px);
 }
 
-/* Heading styles */
+/* Heading styles - font-weight 400 (regular) matches Webflow's NeuSans usage */
 .heading {
   font-family: var(--typography-headingfont, 'NeuSans', sans-serif);
-  font-weight: var(--font-weight-book, 500);
+  font-weight: var(--font-weight-regular, 400);
   color: var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));
   line-height: var(--line-height-heading-tight, 1);
   letter-spacing: var(--letter-spacing-heading, -0.02em);
-  white-space: pre-wrap;
+  white-space: normal;
 }
 
 /* Desktop heading sizes */
@@ -186,7 +186,25 @@
   font-weight: var(--font-weight-regular, 400);
   line-height: var(--line-height-body-large, 26px);
   color: var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));
-  white-space: pre-wrap;
+  white-space: normal;
+}
+
+/* Heading colour variants — matches Webflow's h1.primary / h1.secondary pattern */
+.heading.heading-color-primary {
+  color: var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));
+}
+
+.heading.heading-color-secondary {
+  color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670));
+}
+
+/* Description colour variants */
+.description.description-color-default {
+  color: var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));
+}
+
+.description.description-color-secondary {
+  color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #B09670));
 }
 
 /* Description text size variations - smaller for heading 3 mobile, 4, and 5 */

package/dist/collection/components/af-typography-lockup/af-typography-lockup.js

@@ -18,6 +18,21 @@ export class AfTypographyLockup {
          * Button layout direction (horizontal or vertical stacking)
          */
         this.buttonLayout = 'vertical';
+        /**
+         * Heading colour variant. Matches the Webflow pattern of `h1.primary` vs
+         * `h1.secondary`, where "secondary" renders in the theme's accent/heading-
+         * secondary colour (soft-clay on most themes).
+         * - `primary` (default) - uses `--af-typography-heading-primary`
+         * - `secondary` - uses `--af-typography-heading-secondary`
+         */
+        this.headingColor = 'primary';
+        /**
+         * Description colour variant. Same pattern as `headingColor`; useful for
+         * hero-style lockups where the description is rendered in the accent colour.
+         * - `default` (default) - uses `--af-typography-body-default`
+         * - `secondary` - uses `--af-typography-heading-secondary`
+         */
+        this.descriptionColor = 'default';
     }
     render() {
         const effectiveHeadingAlignment = this.headingAlignment ?? this.textAlignment;
@@ -32,18 +47,20 @@ export class AfTypographyLockup {
         };
         const headingClasses = {
             'heading': true,
-            [`align-${effectiveHeadingAlignment}`]: true
+            [`align-${effectiveHeadingAlignment}`]: true,
+            [`heading-color-${this.headingColor}`]: true
         };
         const descriptionClasses = {
             'description': true,
-            [`align-${effectiveDescriptionAlignment}`]: true
+            [`align-${effectiveDescriptionAlignment}`]: true,
+            [`description-color-${this.descriptionColor}`]: true
         };
         const buttonsClasses = {
             'buttons': true,
             [`align-${effectiveButtonsAlignment}`]: true
         };
         const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
-        return (h(Host, { key: '8cb507e162ef7a2bca263b7fecb7ef480382e615' }, h("div", { key: '94106d59d250a47ca21c15f2e8cb5c1bef7a3936', class: containerClasses }, h("div", { key: 'f465704d4f7b1bf77611e32958674a6093813abc', class: "copy", style: copyStyle }, h("div", { key: 'd4bcad644d1194c2ecfa593bf9b6a6f185e4a7c2', class: headingClasses, part: "heading" }, h("slot", { key: '97558da091bfc3b63cf57ec0816eb3b952cb201a' })), h("div", { key: 'c0839f719f0165ecaa296bb0be321a2d8c482e87', class: descriptionClasses, part: "body" }, h("slot", { key: '946a5ff890fb09144fee49687fb9de83f45c7aac', name: "description" }))), h("div", { key: '6f06d69183d006be1031eb1f73164f10811df9b1', class: buttonsClasses, part: "buttons" }, h("slot", { key: '253ba8fada86b55b5516d4dd8732aa19dfeda620', name: "buttons" })))));
+        return (h(Host, { key: 'e27de1c33a4f7b9e28c1a2045fc858d2b9bd9253' }, h("div", { key: '0fc659232e499590465bcafb7d72caa6319ad962', class: containerClasses }, h("div", { key: 'c21ef0bbf92217bd988263f0b2e2483ed4e00421', class: "copy", style: copyStyle }, h("div", { key: '13f847be028122f4462c44f2ee8dd05b261c93a0', class: headingClasses, part: "heading" }, h("slot", { key: '2a9f921c75a2cb4e90ba3c3f10e9444ee74437e9' })), h("div", { key: 'aaa6c2bb8d8e186d6d1c05b2a72ee74ed806994a', class: descriptionClasses, part: "body" }, h("slot", { key: '435caeb349e749edb1fe02e66614c7f94c8ca1a5', name: "description" }))), h("div", { key: '21bf7d348b950564d41e2f3cb6a827463edc1d77', class: buttonsClasses, part: "buttons" }, h("slot", { key: 'b92d0e35e21f3f2f7e41e29439388652435c636b', name: "buttons" })))));
     }
     static get is() { return "af-typography-lockup"; }
     static get encapsulation() { return "shadow"; }
@@ -234,6 +251,46 @@ export class AfTypographyLockup {
                 "setter": false,
                 "reflect": false,
                 "attribute": "max-width"
+            },
+            "headingColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading colour variant. Matches the Webflow pattern of `h1.primary` vs\n`h1.secondary`, where \"secondary\" renders in the theme's accent/heading-\nsecondary colour (soft-clay on most themes).\n- `primary` (default) - uses `--af-typography-heading-primary`\n- `secondary` - uses `--af-typography-heading-secondary`"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading-color",
+                "defaultValue": "'primary'"
+            },
+            "descriptionColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'secondary'",
+                    "resolved": "\"default\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Description colour variant. Same pattern as `headingColor`; useful for\nhero-style lockups where the description is rendered in the accent colour.\n- `default` (default) - uses `--af-typography-body-default`\n- `secondary` - uses `--af-typography-heading-secondary`"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description-color",
+                "defaultValue": "'default'"
             }
         };
     }

package/dist/collection/components/af-typography-lockup/af-typography-lockup.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-typography-lockup.js","sourceRoot":"","sources":["../../../src/components/af-typography-lockup/af-typography-lockup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASzD,MAAM,OAAO,kBAAkB;IAL/B;QAME;;WAEG;QACK,gBAAW,GAAsB,CAAC,CAAC;QAE3C;;WAEG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;;WAGG;QACK,kBAAa,GAAc,MAAM,CAAC;QAY1C;;WAEG;QACK,iBAAY,GAA8B,UAAU,CAAC;KA4D9D;IAhDC,MAAM;QACJ,MAAM,yBAAyB,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,aAAa,CAAC;QAC9E,MAAM,6BAA6B,GAAG,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,aAAa,CAAC;QACtF,MAAM,yBAAyB,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,aAAa,CAAC;QAE9E,MAAM,gBAAgB,GAAG;YACvB,QAAQ,EAAE,IAAI;YACd,CAAC,QAAQ,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,IAAI;YACpC,CAAC,UAAU,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,WAAW,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;SACxC,CAAC;QAEF,MAAM,cAAc,GAAG;YACrB,SAAS,EAAE,IAAI;YACf,CAAC,SAAS,yBAAyB,EAAE,CAAC,EAAE,IAAI;SAC7C,CAAC;QAEF,MAAM,kBAAkB,GAAG;YACzB,aAAa,EAAE,IAAI;YACnB,CAAC,SAAS,6BAA6B,EAAE,CAAC,EAAE,IAAI;SACjD,CAAC;QAEF,MAAM,cAAc,GAAG;YACrB,SAAS,EAAE,IAAI;YACf,CAAC,SAAS,yBAAyB,EAAE,CAAC,EAAE,IAAI;SAC7C,CAAC;QAEF,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAE1E,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,4DAAK,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,SAAS;oBAChC,4DAAK,KAAK,EAAE,cAAc,EAAE,IAAI,EAAC,SAAS;wBACxC,8DAAa,CACT;oBACN,4DAAK,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAC,MAAM;wBACzC,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF;gBACN,4DAAK,KAAK,EAAE,cAAc,EAAE,IAAI,EAAC,SAAS;oBACxC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\ntype TextAlign = 'left' | 'center' | 'right' | 'justify';\n\n@Component({\n  tag: 'af-typography-lockup',\n  styleUrl: 'af-typography-lockup.css',\n  shadow: true\n})\nexport class AfTypographyLockup {\n  /**\n   * The heading size (1-5, where 1 is largest)\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 2;\n\n  /**\n   * The breakpoint for responsive typography\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Text alignment for the entire lockup (heading and description).\n   * Can be overridden individually with headingAlignment and descriptionAlignment.\n   */\n  @Prop() textAlignment: TextAlign = 'left';\n\n  /**\n   * Heading text alignment. Falls back to textAlignment if not specified.\n   */\n  @Prop() headingAlignment?: TextAlign;\n\n  /**\n   * Description text alignment. Falls back to textAlignment if not specified.\n   */\n  @Prop() descriptionAlignment?: TextAlign;\n\n  /**\n   * Button layout direction (horizontal or vertical stacking)\n   */\n  @Prop() buttonLayout: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Buttons position alignment. Falls back to textAlignment if not specified.\n   */\n  @Prop() buttonsAlignment?: TextAlign;\n\n  /**\n   * Maximum width for the copy section (in pixels)\n   */\n  @Prop() maxWidth?: number;\n\n  render() {\n    const effectiveHeadingAlignment = this.headingAlignment ?? this.textAlignment;\n    const effectiveDescriptionAlignment = this.descriptionAlignment ?? this.textAlignment;\n    const effectiveButtonsAlignment = this.buttonsAlignment ?? this.textAlignment;\n\n    const containerClasses = {\n      'lockup': true,\n      [`text-${this.textAlignment}`]: true,\n      [`layout-${this.buttonLayout}`]: true,\n      [`heading-${this.headingSize}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true\n    };\n\n    const headingClasses = {\n      'heading': true,\n      [`align-${effectiveHeadingAlignment}`]: true\n    };\n\n    const descriptionClasses = {\n      'description': true,\n      [`align-${effectiveDescriptionAlignment}`]: true\n    };\n\n    const buttonsClasses = {\n      'buttons': true,\n      [`align-${effectiveButtonsAlignment}`]: true\n    };\n\n    const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class=\"copy\" style={copyStyle}>\n            <div class={headingClasses} part=\"heading\">\n              <slot></slot>\n            </div>\n            <div class={descriptionClasses} part=\"body\">\n              <slot name=\"description\"></slot>\n            </div>\n          </div>\n          <div class={buttonsClasses} part=\"buttons\">\n            <slot name=\"buttons\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-typography-lockup.js","sourceRoot":"","sources":["../../../src/components/af-typography-lockup/af-typography-lockup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASzD,MAAM,OAAO,kBAAkB;IAL/B;QAME;;WAEG;QACK,gBAAW,GAAsB,CAAC,CAAC;QAE3C;;WAEG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;;WAGG;QACK,kBAAa,GAAc,MAAM,CAAC;QAY1C;;WAEG;QACK,iBAAY,GAA8B,UAAU,CAAC;QAY7D;;;;;;WAMG;QACK,iBAAY,GAA4B,SAAS,CAAC;QAE1D;;;;;WAKG;QACK,qBAAgB,GAA4B,SAAS,CAAC;KAoD/D;IAlDC,MAAM;QACJ,MAAM,yBAAyB,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,aAAa,CAAC;QAC9E,MAAM,6BAA6B,GAAG,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,aAAa,CAAC;QACtF,MAAM,yBAAyB,GAAG,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,aAAa,CAAC;QAE9E,MAAM,gBAAgB,GAAG;YACvB,QAAQ,EAAE,IAAI;YACd,CAAC,QAAQ,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,IAAI;YACpC,CAAC,UAAU,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,WAAW,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;SACxC,CAAC;QAEF,MAAM,cAAc,GAAG;YACrB,SAAS,EAAE,IAAI;YACf,CAAC,SAAS,yBAAyB,EAAE,CAAC,EAAE,IAAI;YAC5C,CAAC,iBAAiB,IAAI,CAAC,YAAY,EAAE,CAAC,EAAE,IAAI;SAC7C,CAAC;QAEF,MAAM,kBAAkB,GAAG;YACzB,aAAa,EAAE,IAAI;YACnB,CAAC,SAAS,6BAA6B,EAAE,CAAC,EAAE,IAAI;YAChD,CAAC,qBAAqB,IAAI,CAAC,gBAAgB,EAAE,CAAC,EAAE,IAAI;SACrD,CAAC;QAEF,MAAM,cAAc,GAAG;YACrB,SAAS,EAAE,IAAI;YACf,CAAC,SAAS,yBAAyB,EAAE,CAAC,EAAE,IAAI;SAC7C,CAAC;QAEF,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAE1E,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,4DAAK,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,SAAS;oBAChC,4DAAK,KAAK,EAAE,cAAc,EAAE,IAAI,EAAC,SAAS;wBACxC,8DAAa,CACT;oBACN,4DAAK,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAC,MAAM;wBACzC,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF;gBACN,4DAAK,KAAK,EAAE,cAAc,EAAE,IAAI,EAAC,SAAS;oBACxC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\ntype TextAlign = 'left' | 'center' | 'right' | 'justify';\n\n@Component({\n  tag: 'af-typography-lockup',\n  styleUrl: 'af-typography-lockup.css',\n  shadow: true\n})\nexport class AfTypographyLockup {\n  /**\n   * The heading size (1-5, where 1 is largest)\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 2;\n\n  /**\n   * The breakpoint for responsive typography\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Text alignment for the entire lockup (heading and description).\n   * Can be overridden individually with headingAlignment and descriptionAlignment.\n   */\n  @Prop() textAlignment: TextAlign = 'left';\n\n  /**\n   * Heading text alignment. Falls back to textAlignment if not specified.\n   */\n  @Prop() headingAlignment?: TextAlign;\n\n  /**\n   * Description text alignment. Falls back to textAlignment if not specified.\n   */\n  @Prop() descriptionAlignment?: TextAlign;\n\n  /**\n   * Button layout direction (horizontal or vertical stacking)\n   */\n  @Prop() buttonLayout: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Buttons position alignment. Falls back to textAlignment if not specified.\n   */\n  @Prop() buttonsAlignment?: TextAlign;\n\n  /**\n   * Maximum width for the copy section (in pixels)\n   */\n  @Prop() maxWidth?: number;\n\n  /**\n   * Heading colour variant. Matches the Webflow pattern of `h1.primary` vs\n   * `h1.secondary`, where \"secondary\" renders in the theme's accent/heading-\n   * secondary colour (soft-clay on most themes).\n   * - `primary` (default) - uses `--af-typography-heading-primary`\n   * - `secondary` - uses `--af-typography-heading-secondary`\n   */\n  @Prop() headingColor: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Description colour variant. Same pattern as `headingColor`; useful for\n   * hero-style lockups where the description is rendered in the accent colour.\n   * - `default` (default) - uses `--af-typography-body-default`\n   * - `secondary` - uses `--af-typography-heading-secondary`\n   */\n  @Prop() descriptionColor: 'default' | 'secondary' = 'default';\n\n  render() {\n    const effectiveHeadingAlignment = this.headingAlignment ?? this.textAlignment;\n    const effectiveDescriptionAlignment = this.descriptionAlignment ?? this.textAlignment;\n    const effectiveButtonsAlignment = this.buttonsAlignment ?? this.textAlignment;\n\n    const containerClasses = {\n      'lockup': true,\n      [`text-${this.textAlignment}`]: true,\n      [`layout-${this.buttonLayout}`]: true,\n      [`heading-${this.headingSize}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true\n    };\n\n    const headingClasses = {\n      'heading': true,\n      [`align-${effectiveHeadingAlignment}`]: true,\n      [`heading-color-${this.headingColor}`]: true\n    };\n\n    const descriptionClasses = {\n      'description': true,\n      [`align-${effectiveDescriptionAlignment}`]: true,\n      [`description-color-${this.descriptionColor}`]: true\n    };\n\n    const buttonsClasses = {\n      'buttons': true,\n      [`align-${effectiveButtonsAlignment}`]: true\n    };\n\n    const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class=\"copy\" style={copyStyle}>\n            <div class={headingClasses} part=\"heading\">\n              <slot></slot>\n            </div>\n            <div class={descriptionClasses} part=\"body\">\n              <slot name=\"description\"></slot>\n            </div>\n          </div>\n          <div class={buttonsClasses} part=\"buttons\">\n            <slot name=\"buttons\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-video-container/af-video-container.js

@@ -42,7 +42,7 @@ export class AfVideoContainer {
         };
     }
     render() {
-        return (h(Host, { key: '8ea21d7dbe736b27b79c0fc7890796f1b1b282aa' }, h("div", { key: '92bb0cbf3d58a3304f891109433f965e7fd23816', class: "video-container" }, h("div", { key: 'ecec6d6ca2a76e5dd06d3b2e9bc370ac3e41ba00', class: "video-container__top" }, h("slot", { key: '2d8243cc440b70409910953186ae6ba36e36d4ca', name: "top" })), h("div", { key: '3bbafe7f6cbaa57da83c576f7fa5a17f2d8244a1', class: "video-container__video" }, h("af-aspect-ratio", { key: '7f1504a644c406c7f61b5a01707778c104746789', ratio: "16:9" }, h("div", { key: 'fe18441bf7e4b46e123d1d18a394336a416cf373', class: "video-container__thumbnail-wrapper" }, this.videoThumbnailUrl && (h("img", { key: 'd624e7c7299f465d8ffde109e5215512126fc60c', src: this.videoThumbnailUrl, alt: this.videoAlt, class: "video-container__thumbnail", loading: "lazy" })), h("button", { key: 'bef98e5cb47e9a9f9849547edd3c8f56baff778e', class: "video-container__play-button", onClick: this.handlePlayClick, "aria-label": "Play video", type: "button" }, h("af-icon", { key: 'e3c6cbb6236d1a60a39e5081ad4285896791cd9d', name: "play", size: 24 }))))), h("div", { key: '60ef6d0a51d15b03af7b3ab09d2d8214daedbcab', class: "video-container__bottom" }, h("slot", { key: 'fec2c7b7101caf72142fda6a0c1fa281785b08e3', name: "bottom" })))));
+        return (h(Host, { key: '2957c01ece0612a8475be10e3f4d4dfadd93a983' }, h("div", { key: '5d305aaeeca5d29ee53f6623563438c2750cf0bd', class: "video-container" }, h("div", { key: '8cec69a4441615cea1358e97186cf4dfda68e53a', class: "video-container__top" }, h("slot", { key: '3d4df805bfe1c12a0e7fa7bdb90b1fcf05da8c12', name: "top" })), h("div", { key: 'a91bde38acaab8c71b6eb98fae13711d8a83d98c', class: "video-container__video" }, h("af-aspect-ratio", { key: '7ecb697869a1bb8e564746d76390259b1066d616', ratio: "16:9" }, h("div", { key: 'e6322afbe0dfd1ffc2d1b268fe2d53c289f6cec0', class: "video-container__thumbnail-wrapper" }, this.videoThumbnailUrl && (h("img", { key: '609e1fe39072233e28f850d804a919e2dd6001f4', src: this.videoThumbnailUrl, alt: this.videoAlt, class: "video-container__thumbnail", loading: "lazy" })), h("button", { key: '5a1d1acf6e23f9d2f0257ed7f383490c2870ea52', class: "video-container__play-button", onClick: this.handlePlayClick, "aria-label": "Play video", type: "button" }, h("af-icon", { key: '8d35a930f1248440547b595a57334cc6d1059ea4', name: "play", size: 24 }))))), h("div", { key: '00c7f37ebcead64a55a3bf440efd02427668989b', class: "video-container__bottom" }, h("slot", { key: 'd897fd3c57f62464b0a9ca6b901cbae51e9f3219', name: "bottom" })))));
     }
     static get is() { return "af-video-container"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-visually-hidden/af-visually-hidden.js

@@ -15,7 +15,7 @@ export class AfVisuallyHidden {
         this.focusable = false;
     }
     render() {
-        return (h(Host, { key: '7c6e072e0ef0882ba20138c59d76a7c3db2851c4', class: { 'focusable': this.focusable } }, h("slot", { key: '759af7ecc05e1a715a0be376c350adcf55ce3a04' })));
+        return (h(Host, { key: 'd6621c547bf297f4d90d1529175bdcf5fa427888', class: { 'focusable': this.focusable } }, h("slot", { key: '23ae63d9d6bac054a49e49b7ea280c6b6593defd' })));
     }
     static get is() { return "af-visually-hidden"; }
     static get encapsulation() { return "shadow"; }