@affinda/wc 0.0.22 → 0.0.24

package/dist/collection/components/af-number-badge/af-number-badge.js

@@ -34,7 +34,7 @@ export class AfNumberBadge {
             height: `${this.size}px`,
             fontSize: `${fontSize}px`,
         };
-        return (h(Host, { key: '7ab56ba9abbba16278f5bf0b59649bc7011d4778', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: '402e3fea84e76f66d631a79bc789134cc7fae8c2', class: {
+        return (h(Host, { key: '9966db4536a1ce0b5e35a65aa63ea5c0771e8a9a', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: 'a963bb7feea690d898228a3a0d076e079994cdf4', class: {
                 'badge': true,
                 [`variant-${this.variant}`]: true,
             }, style: badgeStyle }, this.number)));

package/dist/collection/components/af-progress-line/af-progress-line.js

@@ -21,10 +21,10 @@ export class AfProgressLine {
         // Clamp progress between 0 and 1
         const clampedProgress = Math.max(0, Math.min(1, this.progress));
         const progressPercent = clampedProgress * 100;
-        return (h(Host, { key: 'e831de02f8d1263448cf0441085cee677230374e' }, h("div", { key: '57eec77244c1f0c2a1a763d04b22751651069dbc', class: {
+        return (h(Host, { key: '9a6fac61d82f79f36a4cb60e929e96449de232a8' }, h("div", { key: '1d535263ab6274466280caebcaf52052adfbb4b5', class: {
                 'progress-line': true,
                 [`progress-line--${this.orientation}`]: true,
-            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: '9b3229746fef82f644953a189959c109104be511', class: "progress-line__background" }), h("div", { key: '0f5ec3a4a51b350b3b9cb26ea446167a40ce4ae4', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
+            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: '6f479550cd91f8c4f5a256546ed80a09498d6bba', class: "progress-line__background" }), h("div", { key: 'b0f6e719cdede111f7a15651d9f5289456dbddf4', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
     }
     static get is() { return "af-progress-line"; }
     static get encapsulation() { return "scoped"; }

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

@@ -74,9 +74,9 @@
   --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
   
   /* Button - Tertiary */
-  --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);
+  --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);
   
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);
@@ -148,9 +148,9 @@
   --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);
   
   /* Button - Tertiary */
-  --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);
+  --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);
   
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);
@@ -222,9 +222,9 @@
   --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
   
   /* Button - Tertiary */
-  --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);
+  --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);
   
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);
@@ -296,9 +296,9 @@
   --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
   
   /* Button - Tertiary */
-  --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);
+  --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);
   
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);
@@ -370,9 +370,9 @@
   --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
   
   /* Button - Tertiary */
-  --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);
+  --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);
   
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);

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

@@ -13,8 +13,8 @@ export class AfSection {
         this.container = true;
     }
     render() {
-        const content = h("slot", { key: 'a67ae3c0d94b8b4024ae3cb7c5c0e4f916e1f309' });
-        return (h(Host, { key: 'dcdea86aa5b6ce4e3cfe951a90fb441f8a16f7e4' }, h("div", { key: '478836c1570fe89c73405651e03828104a6c069f', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (h("af-container", null, content)) : content)));
+        const content = h("slot", { key: 'ae8f8342af2711fb23030adbd27d08ce89578ecb' });
+        return (h(Host, { key: 'bc6fba7cc81e35662dfb68621021136065b6e198' }, h("div", { key: '46d1700bb966cafb88a78ecc750d558b16942e79', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (h("af-container", null, content)) : content)));
     }
     static get is() { return "af-section"; }
     static get encapsulation() { return "scoped"; }

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

@@ -7,11 +7,11 @@
 }
 
 /* Show above breakpoints (hidden below) */
-/* sm: 375px */
+/* sm: 480px (small) */
 :host(.show-above-sm) {
   display: none;
 }
-@media (min-width: 375px) {
+@media (min-width: 480px) {
   :host(.show-above-sm) {
     display: contents;
   }
@@ -48,8 +48,8 @@
 }
 
 /* Show below breakpoints (hidden at or above) */
-/* sm: 375px */
-@media (min-width: 375px) {
+/* sm: 480px (small) */
+@media (min-width: 480px) {
   :host(.show-below-sm) {
     display: none;
   }

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

@@ -18,7 +18,7 @@ export class AfShow {
             [`show-above-${this.above}`]: !!this.above,
             [`show-below-${this.below}`]: !!this.below,
         };
-        return (h(Host, { key: 'f1325c8342cdd48103996664aa410ba6da9c6566', class: classes }, h("slot", { key: '0ce4cacaa80ef10104549af9fa9068ea7d28a406' })));
+        return (h(Host, { key: 'b88e3f6dedeb0a8cc4f69b3c9915a4fb0a115df7', class: classes }, h("slot", { key: '55f89874b70bbcc636e615556f11e99baeafad73' })));
     }
     static get is() { return "af-show"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/af-social-link/af-social-link.js

@@ -29,7 +29,7 @@ export class AfSocialLink {
         }
     }
     render() {
-        return (h(Host, { key: '1637b2b00bf3808ad48979fde1248a6baae16d50' }, h("a", { key: '57cec6aa80ee7cedccdd03ac40f4931c6012bb48', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
+        return (h(Host, { key: 'd8875f8b62e560cd11e71f6c6b2baf219aef96d2' }, h("a", { key: 'a6e5c064945372150306b6aeb294b13659b565f4', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
     }
     static get is() { return "af-social-link"; }
     static get encapsulation() { return "scoped"; }

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

@@ -34,7 +34,7 @@ export class AfSpacer {
                 style.height = sizeValue;
             }
         }
-        return h(Host, { key: '17bd07b1aeb2346f614d3cf5c663f545622a82af', style: style, "aria-hidden": "true" });
+        return h(Host, { key: 'e3d8bff163b92ef7caf5802947556444ce2f1a48', style: style, "aria-hidden": "true" });
     }
     static get is() { return "af-spacer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,6 +35,7 @@
    Mobile Adjustments
    ========================================================================== */
 
+/* mobile-only */
 @media (max-width: 768px) {
   .padding-tight {
     padding: 32px 0;

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

@@ -26,14 +26,14 @@ export class AfSplitSection {
         this.container = true;
     }
     render() {
-        const content = h("slot", { key: 'bb153079c8b48a5f2a8bb093f3344f1ed58448f0' });
+        const content = h("slot", { key: 'bc307598c8f20de642f691d1bd02269cbd34738c' });
         // Create the split background using CSS gradient
         const topColor = themeColors[this.topTheme];
         const bottomColor = themeColors[this.bottomTheme];
         const backgroundStyle = {
             background: `linear-gradient(to bottom, ${topColor} 0%, ${topColor} 50%, ${bottomColor} 50%, ${bottomColor} 100%)`
         };
-        return (h(Host, { key: 'ec4824dfd25f5e9122d7cfd4ad4df8768b949028' }, h("div", { key: '4de289849c8cb6cb7b70446fe6c4b8ca0f5ae648', class: `split-section padding-${this.padding} top-theme-${this.topTheme}`, style: backgroundStyle }, this.container ? (h("af-container", null, content)) : content)));
+        return (h(Host, { key: 'd96957b3dc7f8daea9f3480269fde7116c587461' }, h("div", { key: 'f274ae8e50c5b1fa9f59b54a1bce3dbb5408a77b', class: `split-section padding-${this.padding} top-theme-${this.topTheme}`, style: backgroundStyle }, this.container ? (h("af-container", null, content)) : content)));
     }
     static get is() { return "af-split-section"; }
     static get encapsulation() { return "scoped"; }

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

@@ -55,7 +55,7 @@ export class AfStack {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (h(Host, { key: '8762617789ee74b277ccc75e01a11e0722d46d71', style: style }, h("slot", { key: '81cacfb758661b513d8e16db5d23a9a14c1d5c16' })));
+        return (h(Host, { key: '72e0cbdd57b5f300e1957549d225f72ae4cdc2d2', style: style }, h("slot", { key: '9f71bea28b78fa1fcb414e5f3e2b9f9e68d7962d' })));
     }
     static get is() { return "af-stack"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,6 +38,7 @@
   z-index: 0;
 }
 
+/* ≤ mobile */
 @media (max-width: 767px) {
   .stepper--horizontal {
     flex-direction: column;

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

@@ -40,7 +40,7 @@ export class AfStepper {
         });
     }
     render() {
-        return (h(Host, { key: '857011a248f8c9adc46c3a1c69b55cd33f0f7b36', class: `stepper stepper--${this.orientation}` }, h("div", { key: '5654c1431e991475429e1594832509236dc1a3ba', class: "stepper__connector", "aria-hidden": "true" }), h("slot", { key: '23293d2c3cc463a714f1acdfad2a3fb6e1d3cf0a' })));
+        return (h(Host, { key: 'a9c2328058c0495bbec34d3a08deb0375e2f6dae', class: `stepper stepper--${this.orientation}` }, h("div", { key: '91fb9864b86a9c2b44e84db1356099ebf5d119f3', class: "stepper__connector", "aria-hidden": "true" }), h("slot", { key: '680bf938f006e4696882aa55f7ca6fa02bcf4db4' })));
     }
     static get is() { return "af-stepper"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-stepper-step/af-stepper-step.css

@@ -71,6 +71,7 @@
   margin-bottom: 0;
 }
 
+/* ≤ mobile */
 @media (max-width: 767px) {
   :host {
     flex-direction: row;

package/dist/collection/components/af-stepper-step/af-stepper-step.js

@@ -18,7 +18,7 @@ export class AfStepperStep {
         this.index = 1;
     }
     render() {
-        return (h(Host, { key: 'c4b991bb2f6a9e153ee940b8f5090340e40159e9' }, h("span", { key: '7cf8db3a00d2bf0ad3b84d0795b2bfae5bf9359a', class: "stepper-step__badge" }, this.index), h("div", { key: '3e7db621c832d3dfc5415a5b9159994fd1b2379c', class: "stepper-step__content" }, h("div", { key: 'fa4ed0245ae043579a46506d0427a2e6e9a0c9c5', class: "stepper-step__heading" }, h("slot", { key: '24f2c339c855548e72e4c1b708fcdf3f9ac0c030', name: "heading" })), h("div", { key: '1449b56f91745a08ed7a6404a94cee5c4c478015', class: "stepper-step__body" }, h("slot", { key: '8ad129720c27a408b91fcda2ccaf448fd0d91826', name: "body" })))));
+        return (h(Host, { key: 'b91b1f537b806fcd529fa52e67399f6be16bca5d' }, h("span", { key: '9622f4f96632b3ba69144afd82a6787e32eb7c2c', class: "stepper-step__badge" }, this.index), h("div", { key: '315447d305191d0b74116a486454c9b4b5f6dd22', class: "stepper-step__content" }, h("div", { key: 'fc838c36ffa5ca04d798faabb1c1fa6fd446ee2a', class: "stepper-step__heading" }, h("slot", { key: '24199d97434f81e1d635cdb3a06a9946d27f969b', name: "heading" })), h("div", { key: 'ad23f7a9e6459a9ac9459202901d144df44c2f03', class: "stepper-step__body" }, h("slot", { key: '66a4b92593430b057479e15b2a0d47f5a10eb229', name: "body" })))));
     }
     static get is() { return "af-stepper-step"; }
     static get encapsulation() { return "scoped"; }

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

@@ -17,77 +17,54 @@
   cursor: default;
 }
 
+/* Make links look clickable */
 a.tag {
   cursor: pointer;
 }
 
 /* ==========================================================================
-   VARIANT: DEFAULT (inherits from parent theme context)
+   VARIANT: SAND (Soft-clay/tan colored - default)
    ========================================================================== */
 
-.tag.variant-default {
-  background-color: var(--af-tag-bg, var(--colour-brand-soft-clay, #b09670));
-  color: var(--af-tag-text, var(--colour-brand-inkwell, #14343b));
+.tag.variant-sand {
+  background-color: var(--af-tag-sand-bg, var(--colour-brand-soft-clay, #b09670));
+  color: var(--af-tag-sand-text, var(--colour-brand-inkwell, #14343b));
 }
 
-.tag.variant-default:hover {
-  background-color: var(--af-tag-bg-hover, var(--colour-tints-soft-clay-400, #c0ab8d));
+.tag.variant-sand:hover {
+  background-color: var(--af-tag-sand-bg-hover, var(--colour-softclay-400, #c0ab8d));
 }
 
 /* ==========================================================================
-   EXPLICIT THEME VARIANTS
+   VARIANT: LIGHT (Mist-green/light colored)
    ========================================================================== */
 
-.tag.variant-inkwell {
-  background-color: var(--colour-brand-inkwell, #14343b);
-  color: var(--colour-brand-white, #ffffff);
+.tag.variant-light {
+  background-color: var(--af-tag-light-bg, var(--colour-background-level1, #e8eeed));
+  color: var(--af-tag-light-text, var(--colour-brand-inkwell, #14343b));
 }
 
-.tag.variant-inkwell:hover {
-  background-color: var(--colour-tints-inkwell-500, #1e4a48);
-}
-
-.tag.variant-white {
-  background-color: var(--colour-brand-white, #ffffff);
-  color: var(--colour-brand-inkwell, #14343b);
-}
-
-.tag.variant-white:hover {
-  background-color: var(--colour-tints-mist-green-100, #e1eee1);
-}
-
-.tag.variant-soft-clay {
-  background-color: var(--colour-brand-soft-clay, #b09670);
-  color: var(--colour-brand-inkwell, #14343b);
-}
-
-.tag.variant-soft-clay:hover {
-  background-color: var(--colour-tints-soft-clay-400, #c0ab8d);
-}
-
-.tag.variant-mist-green {
-  background-color: var(--colour-brand-mist-green, #c6d5d1);
-  color: var(--colour-brand-inkwell, #14343b);
-}
-
-.tag.variant-mist-green:hover {
-  background-color: var(--colour-tints-mist-green-200, #d2e8e3);
+.tag.variant-light:hover {
+  background-color: var(--af-tag-light-bg-hover, var(--colour-tints-mist-green-200, #d2e8e3));
 }
 
 /* ==========================================================================
    SIZES
    ========================================================================== */
 
+/* Size: X-Small */
 .tag.size-x-small {
   padding: 6px 10px;
   font-size: var(--font-size-label-tag, 14px);
 }
 
+/* Size: Small */
 .tag.size-small {
   padding: 8px 12px;
   font-size: var(--font-size-label-tag, 14px);
 }
 
+/* Size: Large */
 .tag.size-large {
   padding: 12px 16px;
   font-size: var(--font-size-body-large, 18px);
@@ -97,16 +74,19 @@ a.tag {
    FOCUS STATES
    ========================================================================== */
 
+/* Focus state */
 .tag:focus {
   outline: none;
-  box-shadow:
+  box-shadow: 
     0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),
     0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));
 }
 
+/* Focus visible for keyboard navigation */
 .tag:focus-visible {
   outline: none;
-  box-shadow:
+  box-shadow: 
     0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),
     0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));
 }
+

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

@@ -3,15 +3,11 @@ 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" variant="inkwell">Machine Learning</af-tag>
- * <af-tag size="large" variant="white">Document Processing</af-tag>
+ * <af-tag size="small">Machine Learning</af-tag>
+ * <af-tag size="large" variant="light">Document Processing</af-tag>
  * ```
  */
 export class AfTag {
@@ -19,24 +15,25 @@ export class AfTag {
         /**
          * The size of the tag
          * - `x-small` - Compact tag with minimal padding
-         * - `small` - Small tag with moderate padding (default)
+         * - `small` - Small tag with moderate padding
          * - `large` - Large tag with generous padding
          */
         this.size = 'small';
         /**
-         * Visual variant of the tag. `default` inherits tag colors from the
-         * parent theme context. Theme-named variants force a specific palette.
+         * The visual variant of the tag
+         * - `sand` - Soft-clay/tan colored background (default)
+         * - `light` - Mist-green/light colored background
          */
-        this.variant = 'default';
+        this.variant = 'sand';
     }
     render() {
         const TagElement = this.href ? 'a' : 'span';
         const linkProps = this.href ? { href: this.href } : {};
-        return (h(Host, { key: '389b869350a0ead31639016403b8bbd86c8be12f' }, h(TagElement, { key: '7be8b372a4c391ae3e426827cf425274dfe3dc44', class: {
+        return (h(Host, { key: '0decd339f953b58f2bdc9adbe445fa2f0a2c3bf1' }, h(TagElement, { key: '9ae4d069098dd3d1caafac4918736921a76ffece', class: {
                 'tag': true,
                 [`size-${this.size}`]: true,
                 [`variant-${this.variant}`]: true,
-            }, ...linkProps }, h("slot", { key: 'cf622bef7dca7e64215e0e778f3893097e9e30d0' }))));
+            }, ...linkProps }, h("slot", { key: '2fcbbe7cc9c3954dbca1d1bff72d5c220c4afecc' }))));
     }
     static get is() { return "af-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -70,7 +67,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 (default)\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\n- `large` - Large tag with generous padding"
                 },
                 "getter": false,
                 "setter": false,
@@ -83,7 +80,7 @@ export class AfTag {
                 "mutable": false,
                 "complexType": {
                     "original": "TagVariant",
-                    "resolved": "\"default\" | \"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\"",
+                    "resolved": "\"light\" | \"sand\"",
                     "references": {
                         "TagVariant": {
                             "location": "local",
@@ -96,13 +93,13 @@ export class AfTag {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visual variant of the tag. `default` inherits tag colors from the\nparent theme context. Theme-named variants force a specific palette."
+                    "text": "The visual variant of the tag\n- `sand` - Soft-clay/tan colored background (default)\n- `light` - Mist-green/light colored background"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "variant",
-                "defaultValue": "'default'"
+                "defaultValue": "'sand'"
             },
             "href": {
                 "type": "string",

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: 50%;
+  width: 40.5%;
   min-width: 300px;
   /* Minimum for readability */
   max-width: 519px;
@@ -84,47 +84,42 @@
   flex-shrink: 0;
 }
 
-/* Quote text — 22px / 140% per Webflow reference. Accepts either the
-   `quote` prop (rendered as plain text) or the `quote-body` slot (rich). */
+/* Quote text - layout only, typography comes from af-text */
 .testimonial-text {
-  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;
+  max-height: 155px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /* Attribution uses body-dark color for emphasis */
 .testimonial-attribution {
-  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;
+  --af-typography-body-default: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));
 }
 
 .testimonial-stats {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
   gap: 32px;
   width: 100%;
   flex-shrink: 0;
 }
 
+/* ≥ mobile and ≤ tablet — 2-column intermediate layout so the stats row
+ * doesn't snap straight from 4-across to 1-across on common iPad / narrow
+ * laptop widths. */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .testimonial-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* ≤ mobile — single column stack */
+@media (max-width: 767px) {
+  .testimonial-stats {
+    grid-template-columns: 1fr;
+  }
+}
+
 .testimonial-footer {
   display: flex;
   align-items: center;

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

@@ -1,12 +1,4 @@
 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() {
         /**
@@ -29,11 +21,11 @@ export class AfTestimonial {
         };
     }
     render() {
-        return (h(Host, { key: '8569be1c99d6591352606630716aa70ac4a9134d' }, h("div", { key: 'adb4ecf4962b068fc0d0bb9d7b74510b22bb2770', class: "testimonial-card" }, h("div", { key: 'db1decd942f7dbca4d0b75579c511e8b9e94bbc0', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: '143fb0ef560023d9b6224623e363d99cc300bf03', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: 'f4b17a16293f12aa0d131944e2c69d31242f1105', class: "testimonial-logo" }, h("img", { key: '3b055aeb3b2eec2fa9df98592f5bcbe6a3a63cb0', src: this.logoImage, alt: "Company logo" })))), h("div", { key: 'f2731d7ed1364ca9dec2b104023908302fdff54a', class: "testimonial-content" }, h("div", { key: '9ae2d70a5a4dfbb890ce8aa9e475f80b04457fae', class: "testimonial-quote-section" }, h("div", { key: '5085969f61a7e1df88898cbd9c40400ad0ab91bc', class: "testimonial-quote-icon" }, h("slot", { key: 'a2ea0e72c9267548af02132d481ae73d158f9fd4', name: "quote-icon" }, h("af-icon", { key: '6ba9c790a1ed14d6b979f008bdb6fc4fb181d8ba', name: "quote", size: 48 }))), h("div", { key: 'd44e1066b30701dcd123a0a25390cf77578b8b6e', class: "testimonial-text" }, h("slot", { key: 'e7605429bac4865b598ead216287e5277eb99cd9', name: "quote-body" }, this.quote)), h("div", { key: '470481474dad18baa1fe22d6536bb5f5c02c8faa', class: "testimonial-attribution" }, this.attribution)), h("div", { key: 'd2fc708759c8b4c6638522bfc5f42589bccf7a82', class: "testimonial-stats" }, h("slot", { key: 'e3181ab8145788a9e374c2f9ea2d9823504c5543', name: "stats" })), h("div", { key: 'ff9a5d3b5cdb0da6e16ed2763680854686546f12', class: "testimonial-footer" }, h("div", { key: 'bc3e4a3229f8814e6140d40cab2f6997e212cd00', class: "testimonial-nav" }, this.showNavigation ? (
+        return (h(Host, { key: '33b2a19b7f369227cdfcf6eee289fb834d5b6329' }, h("div", { key: '761a3e5c92a22b2ad88d0a76bf9ef8f6002cdbce', class: "testimonial-card" }, h("div", { key: '8d4d5287881cec18e5b1d64b2463ed2c07460d07', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: 'a976c752ab87e3f5da7582f97b54d50ee5c1a1cd', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: 'f8141dc44ac5c28ab1141cc1d9d855467cdf8b09', class: "testimonial-logo" }, h("img", { key: '65ef7ab84bdae5e47ecfdda2f8336fd83fa90c7a', src: this.logoImage, alt: "Company logo" })))), h("div", { key: '6cb5e2b4832a5a65fb3ea04810dbf7f698b11ec1', class: "testimonial-content" }, h("div", { key: 'b1f58ce100b7721750f562a6e9de9e7f91ae93a5', class: "testimonial-quote-section" }, h("div", { key: 'c320c3775e11356bd5e5108b7677b7b67f4c6f89', class: "testimonial-quote-icon" }, h("slot", { key: 'c951a7d40e7e0012d89ba4393a3f1561665c9c4d', name: "quote-icon" }, h("af-icon", { key: '3a8764d0a3d34b16b722b777a20b11e6426cdb66', name: "quote", size: 48 }))), h("af-text", { key: 'd5c29a4a791304cb3b98b582e72a16d6865eb3ca', variant: "xlarge", class: "testimonial-text" }, this.quote), h("af-text", { key: 'a8839b04257e79df76d9f3ae97a4d9dcb0070a66', variant: "xlarge", class: "testimonial-attribution" }, this.attribution)), h("div", { key: '3eb72d12ba340557e26e9bbb7faaea3b06fbf711', class: "testimonial-stats" }, h("slot", { key: '2c54f1ed69a1c31ff5999804e11312460cd33ccb', name: "stats" })), h("div", { key: '160149782113f03e0e14e17d2aa200ac1773990b', class: "testimonial-footer" }, h("div", { key: '3f2efa1c37fca41827722b48b12b0e8a4c2c0528', 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: '4ab4295ecbd966fe1749c2db6ac8c96c50b3bb0d', variant: "secondary", href: this.readMoreLink }, "Read full story", h("af-icon", { key: 'd96405c3f90f36768fa3dbe2dd9f83347f31f53e', slot: "icon-right", name: "arrow-right", size: 24 }))))))));
+        h("slot", { name: "navigation" }))), this.readMoreLink && (h("af-button", { key: '68c099e51f01e9f715d93eab790ff87d99291a10', variant: "secondary", href: this.readMoreLink }, "Read full story", h("af-icon", { key: '549160eb2d850d2ae14eef62ff3d6cd72c9aa991', slot: "icon-right", name: "arrow-right", size: 24 }))))))));
     }
     static get is() { return "af-testimonial"; }
     static get encapsulation() { return "scoped"; }
@@ -92,14 +84,14 @@ export class AfTestimonial {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Testimonial quote text. Falls back to the `quote-body` slot if that\nslot has content."
+                    "text": "Testimonial quote text"
                 },
                 "getter": false,
                 "setter": false,

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

@@ -24,6 +24,14 @@
   transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
 }
 
+/* Respect reduced motion: slides can auto-advance, so remove the
+ * 500ms cross-fade/slide transition and swap instantly. */
+@media (prefers-reduced-motion: reduce) {
+  .testimonial-slides ::slotted(af-testimonial) {
+    transition: none;
+  }
+}
+
 /* Progress indicator - wraps af-progress-line atom */
 /* Per Figma: centered below the card with horizontal padding */
 .testimonial-progress {

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: '0b3ff300953cdb7f1ef8f4e6fa3f52811892c1a1' }, h("div", { key: '5106fa052b9e1b4d166a03b043305affadf20eb6', class: "testimonial-carousel" }, h("div", { key: '90ac4c283e3b5d6f2a20be866b6aa79e39b6adf6', class: "testimonial-slides" }, h("slot", { key: 'db7b93b76346a33092cbf69e1c3f150d393ff32d' })), this.testimonialCount > 1 && (h("div", { key: 'd81f5ff6ae68237385cf9c18428a0883c23dc766', class: "testimonial-progress" }, h("af-progress-line", { key: '7fed7be1bede0e492cd3b1df33e529778a34666b', progress: this.getProgress() }))))));
+        return (h(Host, { key: '7de8274c31991f104fd70d9dd7e2e368dbe2055f' }, h("div", { key: 'd5e7a36eed63757174991132277f4819152f5217', class: "testimonial-carousel" }, h("div", { key: '90a61824e9327c10a89843e5fdf74ec5556bf2c1', class: "testimonial-slides" }, h("slot", { key: '4f46cbe79169ec13e3c731130258fbb79af56be5' })), this.testimonialCount > 1 && (h("div", { key: '2b6c7ecbac70900477c4b15dbba76add9946e1c3', class: "testimonial-progress" }, h("af-progress-line", { key: '702f468f70e2a427c3716e0d65f1275cad302641', 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: '4e5314a0a58cc128f9f84bab0a414cfdf725d9a7' }, h("div", { key: '6b6a91315b2084942c9ba501c71673445d71cd3d', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("af-heading", { key: 'f7f4b15a953a5cb0d67874f16f537d1846792a08', level: 2, class: "stat-value" }, this.value), h("af-text", { key: '8358643895dc0e8a9d06ec0fd119ee9065bbcdf4', variant: "medium", class: "stat-description" }, this.description))));
+        return (h(Host, { key: '0225f1a245a5c9139887456077d99e53016c218c' }, h("div", { key: 'a9671fa7eedd144652b30bff9fdbb6c1c48835d3', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("af-heading", { key: 'cbed7c520457c7ea8c572541ac6f2e9a6c93913f', level: 2, class: "stat-value" }, this.value), h("af-text", { key: '30748648e43f7113b533d6582210029b3ed62d91', variant: "medium", class: "stat-description" }, this.description))));
     }
     static get is() { return "af-testimonial-stat"; }
     static get encapsulation() { return "scoped"; }