@affinda/wc 0.0.14 → 0.0.16

package/dist/collection/components/af-tab-bar/af-tab-bar.css

@@ -0,0 +1,87 @@
+/* TabBar component styles */
+:host {
+  display: block;
+  width: 100%;
+}
+
+.tab-bar {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+  scrollbar-color: var(--af-scrollbar-thumb, #8a7049) var(--af-scrollbar-track, #d1ddda);
+}
+
+/* Custom scrollbar for WebKit browsers */
+.tab-bar::-webkit-scrollbar {
+  height: 4px;
+}
+
+.tab-bar::-webkit-scrollbar-track {
+  background: var(--af-scrollbar-track, #d1ddda);
+  border-radius: 2px;
+}
+
+.tab-bar::-webkit-scrollbar-thumb {
+  background: var(--af-scrollbar-thumb, #8a7049);
+  border-radius: 2px;
+}
+
+.tab-bar::-webkit-scrollbar-thumb:hover {
+  background: var(--af-scrollbar-thumb-hover, #8d785a);
+}
+
+/* ==========================================================================
+   SHAPE: SQUARE
+   ========================================================================== */
+
+.tab-bar.shape-square {
+  gap: 0;
+  border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);
+}
+
+/* ==========================================================================
+   SHAPE: PILL
+   ========================================================================== */
+
+.tab-bar.shape-pill {
+  gap: 0;
+  padding: var(--space-2, 8px);
+  background-color: var(--af-background-level-1, #e8eeed);
+  border-radius: var(--radius-pill, 999px);
+}
+
+/* ==========================================================================
+   BREAKPOINT: MOBILE
+   ========================================================================== */
+
+.tab-bar.breakpoint-mobile {
+  /* Mobile uses compact spacing */
+}
+
+.tab-bar.breakpoint-mobile.shape-square {
+  /* Tabs handle their own padding in mobile */
+}
+
+.tab-bar.breakpoint-mobile.shape-pill {
+  padding: var(--space-1, 4px);
+}
+
+/* ==========================================================================
+   BREAKPOINT: DESKTOP
+   ========================================================================== */
+
+.tab-bar.breakpoint-desktop {
+  /* Desktop uses more generous spacing */
+}
+
+.tab-bar.breakpoint-desktop.shape-square {
+  /* Tabs handle their own padding in desktop mode */
+}
+
+.tab-bar.breakpoint-desktop.shape-pill {
+  padding: var(--space-2, 8px);
+}
+

package/dist/collection/components/af-tab-bar/af-tab-bar.js

@@ -0,0 +1,171 @@
+import { h, Host } from "@stencil/core";
+/**
+ * TabBar component that contains and manages a group of tabs.
+ * Provides horizontal layout, keyboard navigation, and consistent styling.
+ *
+ * @slot - Tab elements (af-tab)
+ *
+ * @example
+ * ```html
+ * <af-tab-bar shape="square" breakpoint="desktop">
+ *   <af-tab label="Overview" active value="overview"></af-tab>
+ *   <af-tab label="Details" value="details"></af-tab>
+ *   <af-tab label="Settings" value="settings"></af-tab>
+ * </af-tab-bar>
+ * ```
+ */
+export class AfTabBar {
+    constructor() {
+        /**
+         * Visual shape variant for all tabs
+         * - `square` - Rectangular tabs with bottom border indicator
+         * - `pill` - Rounded pill tabs with background for active state
+         */
+        this.shape = 'square';
+        /**
+         * Responsive breakpoint mode
+         * - `mobile` - Compact layout with smaller padding
+         * - `desktop` - Larger layout with more generous spacing
+         */
+        this.breakpoint = 'desktop';
+    }
+    componentDidLoad() {
+        this.syncChildProps();
+    }
+    componentDidUpdate() {
+        this.syncChildProps();
+    }
+    /**
+     * Sync shape and breakpoint props to child af-tab elements
+     */
+    syncChildProps() {
+        const tabs = this.el.querySelectorAll('af-tab');
+        tabs.forEach((tab) => {
+            tab.setAttribute('shape', this.shape);
+            tab.setAttribute('data-breakpoint', this.breakpoint);
+        });
+    }
+    /**
+     * Handle keyboard navigation between tabs
+     */
+    handleKeyDown(event) {
+        const tabs = Array.from(this.el.querySelectorAll('af-tab:not([disabled])'));
+        const currentIndex = tabs.findIndex(tab => tab === document.activeElement || tab.shadowRoot?.activeElement);
+        if (currentIndex === -1)
+            return;
+        let newIndex = currentIndex;
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+                break;
+            case 'Home':
+                event.preventDefault();
+                newIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                newIndex = tabs.length - 1;
+                break;
+            default:
+                return;
+        }
+        // Focus the button inside the shadow DOM of the tab
+        const targetTab = tabs[newIndex];
+        const button = targetTab.shadowRoot?.querySelector('button');
+        if (button) {
+            button.focus();
+        }
+    }
+    render() {
+        const containerClasses = {
+            'tab-bar': true,
+            [`shape-${this.shape}`]: true,
+            [`breakpoint-${this.breakpoint}`]: true,
+        };
+        return (h(Host, { key: 'b1fa40c2156ac7271650aafd27d369c3a8224f44', role: "tablist" }, h("div", { key: 'e92eaef79f5df92cca1b2170218df2668afc031d', class: containerClasses }, h("slot", { key: '307aea867005fe40899b54d9fe1e31ecca0528e8' }))));
+    }
+    static get is() { return "af-tab-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-tab-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-tab-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabBarShape",
+                    "resolved": "\"pill\" | \"square\"",
+                    "references": {
+                        "TabBarShape": {
+                            "location": "local",
+                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-tab-bar/af-tab-bar.tsx",
+                            "id": "src/components/af-tab-bar/af-tab-bar.tsx::TabBarShape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual shape variant for all tabs\n- `square` - Rectangular tabs with bottom border indicator\n- `pill` - Rounded pill tabs with background for active state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "shape",
+                "defaultValue": "'square'"
+            },
+            "breakpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabBarBreakpoint",
+                    "resolved": "\"desktop\" | \"mobile\"",
+                    "references": {
+                        "TabBarBreakpoint": {
+                            "location": "local",
+                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-tab-bar/af-tab-bar.tsx",
+                            "id": "src/components/af-tab-bar/af-tab-bar.tsx::TabBarBreakpoint"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Responsive breakpoint mode\n- `mobile` - Compact layout with smaller padding\n- `desktop` - Larger layout with more generous spacing"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "breakpoint",
+                "defaultValue": "'desktop'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=af-tab-bar.js.map

package/dist/collection/components/af-tab-bar/af-tab-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-tab-bar.js","sourceRoot":"","sources":["../../../src/components/af-tab-bar/af-tab-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, Element, Listen } from '@stencil/core';\n\nexport type TabBarShape = 'square' | 'pill';\nexport type TabBarBreakpoint = 'mobile' | 'desktop';\n\n/**\n * TabBar component that contains and manages a group of tabs.\n * Provides horizontal layout, keyboard navigation, and consistent styling.\n * \n * @slot - Tab elements (af-tab)\n * \n * @example\n * ```html\n * <af-tab-bar shape=\"square\" breakpoint=\"desktop\">\n *   <af-tab label=\"Overview\" active value=\"overview\"></af-tab>\n *   <af-tab label=\"Details\" value=\"details\"></af-tab>\n *   <af-tab label=\"Settings\" value=\"settings\"></af-tab>\n * </af-tab-bar>\n * ```\n */\n@Component({\n  tag: 'af-tab-bar',\n  styleUrl: 'af-tab-bar.css',\n  shadow: true\n})\nexport class AfTabBar {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Visual shape variant for all tabs\n   * - `square` - Rectangular tabs with bottom border indicator\n   * - `pill` - Rounded pill tabs with background for active state\n   */\n  @Prop({ reflect: true }) shape: TabBarShape = 'square';\n\n  /**\n   * Responsive breakpoint mode\n   * - `mobile` - Compact layout with smaller padding\n   * - `desktop` - Larger layout with more generous spacing\n   */\n  @Prop({ reflect: true }) breakpoint: TabBarBreakpoint = 'desktop';\n\n  componentDidLoad() {\n    this.syncChildProps();\n  }\n\n  componentDidUpdate() {\n    this.syncChildProps();\n  }\n\n  /**\n   * Sync shape and breakpoint props to child af-tab elements\n   */\n  private syncChildProps() {\n    const tabs = this.el.querySelectorAll('af-tab');\n    tabs.forEach((tab) => {\n      tab.setAttribute('shape', this.shape);\n      tab.setAttribute('data-breakpoint', this.breakpoint);\n    });\n  }\n\n  /**\n   * Handle keyboard navigation between tabs\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    const tabs = Array.from(this.el.querySelectorAll('af-tab:not([disabled])')) as HTMLElement[];\n    const currentIndex = tabs.findIndex(tab => tab === document.activeElement || tab.shadowRoot?.activeElement);\n    \n    if (currentIndex === -1) return;\n\n    let newIndex = currentIndex;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;\n        break;\n      case 'Home':\n        event.preventDefault();\n        newIndex = 0;\n        break;\n      case 'End':\n        event.preventDefault();\n        newIndex = tabs.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    // Focus the button inside the shadow DOM of the tab\n    const targetTab = tabs[newIndex];\n    const button = targetTab.shadowRoot?.querySelector('button');\n    if (button) {\n      button.focus();\n    }\n  }\n\n  render() {\n    const containerClasses = {\n      'tab-bar': true,\n      [`shape-${this.shape}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true,\n    };\n\n    return (\n      <Host role=\"tablist\">\n        <div class={containerClasses}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

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

@@ -0,0 +1,92 @@
+/* Tag component styles */
+:host {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  border-radius: 4px;
+  font-family: var(--typography-headingfont, 'NeuSans', Arial, sans-serif);
+  font-weight: var(--font-weight-book, 500);
+  line-height: 1;
+  text-decoration: none;
+  transition: background-color 0.15s ease, box-shadow 0.15s ease;
+  cursor: default;
+}
+
+/* Make links look clickable */
+a.tag {
+  cursor: pointer;
+}
+
+/* ==========================================================================
+   VARIANT: SAND (Soft-clay/tan colored - default)
+   ========================================================================== */
+
+.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-sand:hover {
+  background-color: var(--af-tag-sand-bg-hover, var(--colour-softclay-400, #c0ab8d));
+}
+
+/* ==========================================================================
+   VARIANT: LIGHT (Mist-green/light colored)
+   ========================================================================== */
+
+.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-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);
+}
+
+/* ==========================================================================
+   FOCUS STATES
+   ========================================================================== */
+
+/* Focus state */
+.tag:focus {
+  outline: none;
+  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: 
+    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

@@ -0,0 +1,126 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Tag displays a label in a styled container.
+ * Perfect for categorization, topics, or metadata display.
+ *
+ * @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>
+ * ```
+ */
+export class AfTag {
+    constructor() {
+        /**
+         * The size of the tag
+         * - `x-small` - Compact tag with minimal padding
+         * - `small` - Small tag with moderate padding
+         * - `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
+         */
+        this.variant = 'sand';
+    }
+    render() {
+        const TagElement = this.href ? 'a' : 'span';
+        const linkProps = this.href ? { href: this.href } : {};
+        return (h(Host, { key: '82b1f25a939716973c927f59e82808572004e871' }, h(TagElement, { key: 'e4a524e0f4dd496ca5485d865549bd0b063bd4ac', class: {
+                'tag': true,
+                [`size-${this.size}`]: true,
+                [`variant-${this.variant}`]: true,
+            }, ...linkProps }, h("slot", { key: '07202b985638722997e8aff2bad13ed5d1aa8d2c' }))));
+    }
+    static get is() { return "af-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-tag.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TagSize",
+                    "resolved": "\"large\" | \"small\" | \"x-small\"",
+                    "references": {
+                        "TagSize": {
+                            "location": "local",
+                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-tag/af-tag.tsx",
+                            "id": "src/components/af-tag/af-tag.tsx::TagSize"
+                        }
+                    }
+                },
+                "required": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'small'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TagVariant",
+                    "resolved": "\"light\" | \"sand\"",
+                    "references": {
+                        "TagVariant": {
+                            "location": "local",
+                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-tag/af-tag.tsx",
+                            "id": "src/components/af-tag/af-tag.tsx::TagVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'sand'"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL to navigate to when the tag is clicked (makes the tag a link)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-tag.js.map

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

@@ -0,0 +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"]}

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

@@ -4,7 +4,8 @@
 }
 
 .testimonial-card {
-  background: var(--colour-background-level-1, #e8eeed);
+  /* Uses themed level-1 background from parent Section */
+  background: var(--af-background-level-1, var(--colour-mistgreen-200, #e8eeed));
   border-radius: var(--border-radius-card-level-1, 32px);
   overflow: hidden;
   display: flex;
@@ -12,12 +13,17 @@
   box-sizing: border-box;
 }
 
-/* Image side - 519px wide */
+/* Image side - 40.5% of card width (519px of 1280px in Figma) */
 .testimonial-image {
   position: relative;
-  width: 519px;
+  width: 40.5%;
+  min-width: 300px;
+  /* Minimum for readability */
+  max-width: 519px;
+  /* Cap at Figma design width */
   height: 100%;
-  background: #000000;
+  /* Dark background for image overlay effect - always dark regardless of theme */
+  background: var(--colour-brand-inkwell, #14343b);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -54,8 +60,9 @@
   flex-direction: column;
   gap: 32px;
   padding: 48px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-left: 1px solid rgba(255, 255, 255, 0.08);
+  /* Subtle border using themed border token */
+  border: 1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));
+  border-left: 1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));
   box-sizing: border-box;
 }
 
@@ -64,48 +71,47 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
+  min-height: 0;
+  /* Allow flex item to shrink */
+  overflow: hidden;
 }
 
 .testimonial-quote-icon {
   width: 48px;
   height: 48px;
-  color: var(--colour-brand-inkwell, #14343b);
+  /* Quote icon uses themed secondary heading color (gold/ochre accent) */
+  color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));
   flex-shrink: 0;
 }
 
+/* Quote text - layout only, typography comes from af-text */
 .testimonial-text {
-  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;
-  font-size: 22px;
-  font-weight: 400;
-  line-height: 1.4;
-  color: var(--colour-typography-body-default, #2b484f);
-  margin: 0;
   max-height: 155px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+/* Attribution uses body-dark color for emphasis */
 .testimonial-attribution {
-  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;
-  font-size: 22px;
-  font-weight: 400;
-  line-height: 1.4;
-  color: var(--colour-typography-body-dark, #14343b);
-  margin: 0;
+  --af-typography-body-default: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));
 }
 
 .testimonial-stats {
   display: flex;
   gap: 32px;
   width: 100%;
+  flex-shrink: 0;
 }
 
 .testimonial-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-top: 1px solid var(--colour-background-border-default, #d1ddda);
+  /* Themed border color */
+  border-top: 1px solid var(--af-background-border-default, var(--colour-mistgreen-400, #d1ddda));
   padding-top: 32px;
+  flex-shrink: 0;
+  min-height: 48px;
 }
 
 .testimonial-nav {
@@ -113,31 +119,9 @@
   gap: 12px;
 }
 
-.testimonial-cta {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border: 1px solid var(--colour-brand-inkwell, #14343b);
-  border-radius: 9999px;
-  font-family: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;
-  font-size: 17px;
-  font-weight: 500;
-  line-height: 20px;
-  color: var(--colour-brand-inkwell, #14343b);
-  text-decoration: none;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.testimonial-cta:hover {
-  background: var(--colour-background-level-1, #e8eeed);
-  transform: translateY(-1px);
-}
-
-.testimonial-cta svg {
-  width: 24px;
-  height: 24px;
+.testimonial-nav-buttons {
+  display: flex;
+  gap: 12px;
 }
 
-
+/* CTA button is now handled by af-button atom component */