@affinda/wc 0.6.2 → 0.7.0

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

@@ -0,0 +1,295 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A styled table wrapper that applies design system tokens to native table elements.
+ * Uses descendant selectors to style `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`.
+ *
+ * @slot - Native table elements (`<table>`, `<thead>`, `<tbody>`, etc.)
+ *
+ * @example
+ * ```html
+ * <af-table striped>
+ *   <table>
+ *     <thead>
+ *       <tr>
+ *         <th>Name</th>
+ *         <th>Status</th>
+ *       </tr>
+ *     </thead>
+ *     <tbody>
+ *       <tr>
+ *         <td>Item 1</td>
+ *         <td>Active</td>
+ *       </tr>
+ *     </tbody>
+ *   </table>
+ * </af-table>
+ * ```
+ */
+export class AfTable {
+    constructor() {
+        this.draggingAxis = null;
+        /**
+         * Apply alternating row backgrounds for better readability.
+         */
+        this.striped = false;
+        /**
+         * Show cell borders.
+         */
+        this.bordered = true;
+        /**
+         * Use reduced padding for dense data tables.
+         */
+        this.compact = false;
+        /**
+         * Make the table header sticky when scrolling.
+         */
+        this.stickyHeader = false;
+        this.scrollState = {
+            horizontal: { progress: 0, thumbSize: 100, show: false },
+            vertical: { progress: 0, thumbSize: 100, show: false },
+        };
+        this.updateScrollState = () => {
+            if (!this.scrollEl)
+                return;
+            const { scrollWidth, clientWidth, scrollLeft, scrollHeight, clientHeight, scrollTop } = this.scrollEl;
+            const maxScrollX = scrollWidth - clientWidth;
+            const showHorizontal = scrollWidth > clientWidth;
+            const thumbWidthPct = showHorizontal ? (clientWidth / scrollWidth) * 100 : 100;
+            const progressX = maxScrollX > 0 ? scrollLeft / maxScrollX : 0;
+            const maxScrollY = scrollHeight - clientHeight;
+            const showVertical = scrollHeight > clientHeight;
+            const thumbHeightPct = showVertical ? (clientHeight / scrollHeight) * 100 : 100;
+            const progressY = maxScrollY > 0 ? scrollTop / maxScrollY : 0;
+            this.scrollState = {
+                horizontal: { progress: progressX, thumbSize: thumbWidthPct, show: showHorizontal },
+                vertical: { progress: progressY, thumbSize: thumbHeightPct, show: showVertical },
+            };
+        };
+        this.handleScroll = () => {
+            this.updateScrollState();
+        };
+        this.handleScrollbarPointerDown = (axis, event) => {
+            if (!this.scrollEl)
+                return;
+            event.preventDefault();
+            this.draggingAxis = axis;
+            event.currentTarget.setPointerCapture?.(event.pointerId);
+            this.scrollToPointerPosition(axis, event);
+        };
+        this.handleScrollbarPointerMove = (axis, event) => {
+            if (this.draggingAxis !== axis)
+                return;
+            event.preventDefault();
+            this.scrollToPointerPosition(axis, event);
+        };
+        this.handleScrollbarPointerUp = (event) => {
+            this.draggingAxis = null;
+            event.currentTarget.releasePointerCapture?.(event.pointerId);
+        };
+        this.scrollToPointerPosition = (axis, event) => {
+            if (!this.scrollEl)
+                return;
+            const track = event.currentTarget;
+            const rect = track.getBoundingClientRect();
+            if (axis === 'horizontal') {
+                const ratio = rect.width > 0 ? (event.clientX - rect.left) / rect.width : 0;
+                const clampedRatio = Math.max(0, Math.min(1, ratio));
+                const maxScroll = this.scrollEl.scrollWidth - this.scrollEl.clientWidth;
+                this.scrollEl.scrollLeft = clampedRatio * maxScroll;
+            }
+            else {
+                const ratio = rect.height > 0 ? (event.clientY - rect.top) / rect.height : 0;
+                const clampedRatio = Math.max(0, Math.min(1, ratio));
+                const maxScroll = this.scrollEl.scrollHeight - this.scrollEl.clientHeight;
+                this.scrollEl.scrollTop = clampedRatio * maxScroll;
+            }
+        };
+    }
+    componentDidLoad() {
+        if (typeof requestAnimationFrame !== 'undefined') {
+            requestAnimationFrame(() => {
+                this.updateScrollState();
+            });
+        }
+        else {
+            this.updateScrollState();
+        }
+        if (typeof ResizeObserver !== 'undefined' && this.scrollEl) {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.updateScrollState();
+            });
+            this.resizeObserver.observe(this.scrollEl);
+            const table = this.scrollEl.querySelector('table');
+            if (table) {
+                this.resizeObserver.observe(table);
+            }
+        }
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', this.updateScrollState);
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = undefined;
+        }
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', this.updateScrollState);
+        }
+    }
+    getHorizontalThumbStyle() {
+        const { progress, thumbSize } = this.scrollState.horizontal;
+        const maxLeft = 100 - thumbSize;
+        return {
+            left: `${progress * maxLeft}%`,
+            width: `${thumbSize}%`,
+        };
+    }
+    getVerticalThumbStyle() {
+        const { progress, thumbSize } = this.scrollState.vertical;
+        const maxTop = 100 - thumbSize;
+        return {
+            top: `${progress * maxTop}%`,
+            height: `${thumbSize}%`,
+        };
+    }
+    render() {
+        const { horizontal, vertical } = this.scrollState;
+        const classes = {
+            'table-wrapper': true,
+            'table-wrapper--striped': this.striped,
+            'table-wrapper--bordered': this.bordered,
+            'table-wrapper--compact': this.compact,
+            'table-wrapper--sticky-header': this.stickyHeader,
+            'table-wrapper--has-v-scroll': vertical.show,
+            'table-wrapper--has-h-scroll': horizontal.show,
+        };
+        const scrollStyle = {};
+        if (this.maxHeight) {
+            scrollStyle.maxHeight = this.maxHeight;
+        }
+        else if (this.stickyHeader) {
+            scrollStyle.maxHeight = '400px';
+        }
+        return (h(Host, { key: '1b9df6f9bd73dacf6caa2293fd7c527b98fe0954' }, h("div", { key: '95d7aa4919d72218ba7c5c4b81713653a8f67eae', class: classes }, h("div", { key: '6c9f0456deb850692f6b5d7719d2ec95d5347f19', class: "table-wrapper__viewport" }, h("div", { key: '99f1d035c07164976616875fc346dafd5c894b1b', class: "table-wrapper__scroll", ref: (el) => (this.scrollEl = el), onScroll: this.handleScroll, style: scrollStyle }, h("slot", { key: '3a4d653febf955c5dfe720f573486e999552bb3b' })), vertical.show && (h("div", { key: '4935b4be60a49c5bdc94b5a9925d2f39e4ec87c3', class: "table-wrapper__scrollbar table-wrapper__scrollbar--v", role: "scrollbar", "aria-orientation": "vertical", "aria-label": "Vertical scroll", "aria-valuenow": Math.round(vertical.progress * 100), "aria-valuemin": 0, "aria-valuemax": 100, tabIndex: 0, onPointerDown: (e) => this.handleScrollbarPointerDown('vertical', e), onPointerMove: (e) => this.handleScrollbarPointerMove('vertical', e), onPointerUp: this.handleScrollbarPointerUp, onPointerCancel: this.handleScrollbarPointerUp }, h("div", { key: '837636ab6d9b71212a58253ac602174f5e2a8025', class: "table-wrapper__scrollbar-track table-wrapper__scrollbar-track--v" }, h("div", { key: '1530e0fdafc475bd46e4f91f700b21a17d59bde0', class: "table-wrapper__scrollbar-thumb table-wrapper__scrollbar-thumb--v", style: this.getVerticalThumbStyle() }))))), horizontal.show && (h("div", { key: '39527a5006e17f5f3d69442b1823e0c28be07507', class: "table-wrapper__scrollbar table-wrapper__scrollbar--h", role: "scrollbar", "aria-orientation": "horizontal", "aria-label": "Horizontal scroll", "aria-valuenow": Math.round(horizontal.progress * 100), "aria-valuemin": 0, "aria-valuemax": 100, tabIndex: 0, onPointerDown: (e) => this.handleScrollbarPointerDown('horizontal', e), onPointerMove: (e) => this.handleScrollbarPointerMove('horizontal', e), onPointerUp: this.handleScrollbarPointerUp, onPointerCancel: this.handleScrollbarPointerUp }, h("div", { key: '1a984fa28fe136b38991efd3ff3b2713625a498d', class: "table-wrapper__scrollbar-track table-wrapper__scrollbar-track--h" }, h("div", { key: '6b39a8b99d961bbc65e139f9660adef381757f4b', class: "table-wrapper__scrollbar-thumb table-wrapper__scrollbar-thumb--h", style: this.getHorizontalThumbStyle() })))))));
+    }
+    static get is() { return "af-table"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-table.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-table.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "striped": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Apply alternating row backgrounds for better readability."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "striped",
+                "defaultValue": "false"
+            },
+            "bordered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show cell borders."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bordered",
+                "defaultValue": "true"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use reduced padding for dense data tables."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            },
+            "stickyHeader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make the table header sticky when scrolling."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sticky-header",
+                "defaultValue": "false"
+            },
+            "maxHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum height of the table (enables vertical scrolling).\nCan be any valid CSS value (e.g., \"400px\", \"50vh\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-height"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "scrollState": {}
+        };
+    }
+}

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

@@ -61,7 +61,7 @@ export class AfTag {
                     "references": {
                         "TagSize": {
                             "location": "local",
-                            "path": "/home/runner/work/affinda-ui/affinda-ui/packages/wc/src/components/af-tag/af-tag.tsx",
+                            "path": "/home/runner/work/affinda-website-npm-publish/affinda-website-npm-publish/packages/wc/src/components/af-tag/af-tag.tsx",
                             "id": "src/components/af-tag/af-tag.tsx::TagSize"
                         }
                     }
@@ -87,7 +87,7 @@ export class AfTag {
                     "references": {
                         "TagVariant": {
                             "location": "local",
-                            "path": "/home/runner/work/affinda-ui/affinda-ui/packages/wc/src/components/af-tag/af-tag.tsx",
+                            "path": "/home/runner/work/affinda-website-npm-publish/affinda-website-npm-publish/packages/wc/src/components/af-tag/af-tag.tsx",
                             "id": "src/components/af-tag/af-tag.tsx::TagVariant"
                         }
                     }
@@ -126,4 +126,3 @@ export class AfTag {
         };
     }
 }
-//# sourceMappingURL=af-tag.js.map

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

@@ -9,7 +9,7 @@
   border-radius: var(--border-radius-card-level-1, 32px);
   overflow: hidden;
   display: flex;
-  height: 544px;
+  min-height: 544px;
   box-sizing: border-box;
 }
 
@@ -21,7 +21,7 @@
   /* Minimum for readability */
   max-width: 519px;
   /* Cap at Figma design width */
-  height: 100%;
+  align-self: stretch;
   /* Dark background for image overlay effect - always dark regardless of theme */
   background: var(--colour-brand-inkwell, #14343b);
   display: flex;
@@ -73,7 +73,7 @@
   gap: 12px;
   min-height: 0;
   /* Allow flex item to shrink */
-  overflow: hidden;
+  overflow: visible;
 }
 
 .testimonial-quote-icon {
@@ -112,24 +112,39 @@
 /* Attribution uses body-dark color for emphasis */
 .testimonial-attribution {
   font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);
-  font-size: 16px;
-  line-height: 24px;
+  font-size: 20px;
+  line-height: 1.35;
   color: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));
-  margin-top: 12px;
+  margin-top: 0;
 }
 
 .testimonial-stats {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 32px;
   width: 100%;
   flex-shrink: 0;
+  align-items: start;
 }
 
 /* ≥ 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-card {
+    min-height: 0;
+  }
+
+  .testimonial-image {
+    width: 42%;
+    min-width: 260px;
+  }
+
+  .testimonial-content {
+    padding: 36px;
+    gap: 28px;
+  }
+
   .testimonial-stats {
     grid-template-columns: repeat(2, 1fr);
   }
@@ -137,8 +152,67 @@
 
 /* ≤ mobile — single column stack */
 @media (max-width: 767px) {
+  :host {
+    height: 100%;
+  }
+
+  .testimonial-card {
+    flex-direction: column;
+    min-height: 0;
+    height: 100%;
+    border-radius: 24px;
+  }
+
+  .testimonial-image {
+    display: none;
+  }
+
+  .testimonial-content {
+    padding: 32px 28px;
+    gap: 24px;
+    border-left: 1px solid var(--af-background-border-subtle, var(--colour-mistgreen-200, #e8eeed));
+  }
+
+  .testimonial-quote-section {
+    gap: 12px;
+  }
+
+  .testimonial-quote-icon {
+    width: 40px;
+    height: 40px;
+  }
+
+  .testimonial-text {
+    font-size: 20px;
+    line-height: 1.35;
+  }
+
+  .testimonial-attribution {
+    margin-top: 4px;
+    font-size: 18px;
+  }
+
   .testimonial-stats {
     grid-template-columns: 1fr;
+    gap: 20px;
+  }
+
+  .testimonial-footer {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+    border-top: 0;
+    padding-top: 4px;
+  }
+
+  .testimonial-nav {
+    justify-content: center;
+    order: 2;
+  }
+
+  .testimonial-footer af-button {
+    width: 100%;
+    --af-button-width: 100%;
   }
 }
 
@@ -163,4 +237,4 @@
   gap: 12px;
 }
 
-/* CTA button is now handled by af-button atom component */
+/* CTA button is now handled by af-button atom component */

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

@@ -29,11 +29,11 @@ export class AfTestimonial {
         };
     }
     render() {
-        return (h(Host, { key: '80a3efe588282b01d52658687773625f288a4b3e' }, h("div", { key: '1bab71c2e9cd9642b974581ab1e81b4409c3db33', class: "testimonial-card" }, h("div", { key: '757017d5e835d315098347d6ed57289f21c027d7', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: 'b34a06a82ca938e81e79380a6b5722bd078131f7', src: this.backgroundImage, alt: "", class: "testimonial-bg-image" })), this.logoImage && (h("div", { key: 'dba031936873eccadad941db017d5984088f0a50', class: "testimonial-logo" }, h("img", { key: '078fc2154e5adc48b7f75f5a93031ef1eecd0d41', src: this.logoImage, alt: "Company logo" })))), h("div", { key: '9f54287503b26830cfe219f34e4d761726f9f8b9', class: "testimonial-content" }, h("div", { key: 'b6c72479f48f7069cca0836f983bedb5ca0d7616', class: "testimonial-quote-section" }, h("div", { key: '5e89e9efd6e138724dc3e61179944673e1171eba', class: "testimonial-quote-icon" }, h("slot", { key: '286f01b50320b8cbe558cdc843c1ba1da3ef5068', name: "quote-icon" }, h("af-icon", { key: 'f960ac4275fb9bd80fdcee5f1de5fc5873e325d5', name: "quote", size: 48 }))), h("div", { key: '57339e4a4c65e4525f2f04b8374734c4c71ecb93', class: "testimonial-text" }, h("slot", { key: '35db736d11a36fbb91ce4f5a289f04cac83be2e5', name: "quote-body" }, this.quote)), h("div", { key: '35db245f0a6324e5c3322cd5c4cf8206762c9ad3', class: "testimonial-attribution" }, this.attribution)), h("div", { key: '67dbc98ab75bc036ca4b3f3976505345421231ef', class: "testimonial-stats" }, h("slot", { key: 'd7499af5422f112c42cfd815fec43e9743876021', name: "stats" })), h("div", { key: '0e557948da1a17d10b2e75f8f2cb9193a6ca6c07', class: "testimonial-footer" }, h("div", { key: 'f942dacf7c4676be08b88c4ec6a5bfd8115e2e04', class: "testimonial-nav" }, this.showNavigation ? (
+        return (h(Host, { key: 'ad91dbd409de788e2c749f3c2322c9e5c7d9c09b' }, h("div", { key: 'dd288e0d360e98071aeeb9d91c6c698b17fb6032', class: "testimonial-card" }, h("div", { key: '67d7ba334ce642eec8ef3cde1c40d609e8afe1b4', class: "testimonial-image" }, this.backgroundImage && (h("img", { key: '347e6d302ed8e43aa141519f9b479f7987f4a4e9', src: this.backgroundImage, alt: "", class: "testimonial-bg-image", width: this.backgroundImageWidth, height: this.backgroundImageHeight, loading: "lazy", decoding: "async" })), this.logoImage && (h("div", { key: 'ff7ff6ae5d11eec2b39fa297f74c0dc8696aff6e', class: "testimonial-logo" }, h("img", { key: '2b76215335c84411d01919cec4ee9262b1c5b304', src: this.logoImage, alt: "Company logo", width: this.logoImageWidth, height: this.logoImageHeight, loading: "lazy", decoding: "async" })))), h("div", { key: '160341b09a2bc6ca535a635d4823e82b1a3caeb3', class: "testimonial-content" }, h("div", { key: '7eea93f6f665ae84ff877cd6e5edb6ae677d3164', class: "testimonial-quote-section" }, h("div", { key: 'fd04e334dacc55feffe6cadb52a01920659b954f', class: "testimonial-quote-icon" }, h("slot", { key: '109f0823a5e8e54b74767f7b5677b939fcc77834', name: "quote-icon" }, h("af-icon", { key: '8540f2f0d35a1bf459533eec4631a7962ffc0df1', name: "quote", size: 48 }))), h("div", { key: '02ef49c795f38e8cc2f294ed320f348cc59cccdf', class: "testimonial-text" }, h("slot", { key: '5ebb719c60a0a7672c1de9df78aee1e1388aafcb', name: "quote-body" }, this.quote)), h("div", { key: '3c92a455180b6ca2f37d9789394098e5b2582c9a', class: "testimonial-attribution" }, this.attribution)), h("div", { key: '2dbeab8880d1747d031d770c591eb748ce977960', class: "testimonial-stats" }, h("slot", { key: '2406e56c0fa232aa6c8536a237bdd6bac028feb3', name: "stats" })), h("div", { key: '1ecc9f39a6177158d11905a69471826dcab36572', class: "testimonial-footer" }, h("div", { key: 'a3535f97d0d5207f4432eb7503a07924b21bf667', 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: '6197b00d781b08eec10bf487918deed969408df4', variant: "secondary", href: this.readMoreLink }, "Read full story", h("af-icon", { key: '2cdf53d215a417beff6e8edf20f510ee68d176ab', slot: "icon-right", name: "arrow-right", size: 24 }))))))));
+        h("slot", { name: "navigation" }))), this.readMoreLink && (h("af-button", { key: '252c05b0d1a021cd714a13916d131e83d5554310', variant: "secondary", href: this.readMoreLink }, "Read full story", h("af-icon", { key: 'c83db76ad4af0ba2efbcff4e6ddb24c14095ac1a', slot: "icon-right", name: "arrow-right", size: 24 }))))))));
     }
     static get is() { return "af-testimonial"; }
     static get encapsulation() { return "scoped"; }
@@ -68,6 +68,44 @@ export class AfTestimonial {
                 "reflect": false,
                 "attribute": "background-image"
             },
+            "backgroundImageWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Intrinsic background image width in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background-image-width"
+            },
+            "backgroundImageHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Intrinsic background image height in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background-image-height"
+            },
             "logoImage": {
                 "type": "string",
                 "mutable": false,
@@ -87,6 +125,44 @@ export class AfTestimonial {
                 "reflect": false,
                 "attribute": "logo-image"
             },
+            "logoImageWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Intrinsic logo image width in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "logo-image-width"
+            },
+            "logoImageHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Intrinsic logo image height in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "logo-image-height"
+            },
             "quote": {
                 "type": "string",
                 "mutable": false,
@@ -240,4 +316,3 @@ export class AfTestimonial {
             }];
     }
 }
-//# sourceMappingURL=af-testimonial.js.map

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

@@ -11,15 +11,14 @@
 
 .testimonial-slides {
   position: relative;
+  display: grid;
   width: 100%;
   min-height: 544px;
   overflow: hidden;
 }
 
 .testimonial-slides ::slotted(af-testimonial) {
-  position: absolute;
-  top: 0;
-  left: 0;
+  grid-area: 1 / 1;
   width: 100%;
   transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
 }
@@ -32,14 +31,50 @@
   }
 }
 
-/* Progress indicator - wraps af-progress-line atom */
-/* Per Figma: centered below the card with horizontal padding */
+/* Progress indicator - native-scrollbar-like rail with draggable thumb */
 .testimonial-progress {
   margin-top: 32px;
   max-width: 840px;
   margin-left: auto;
   margin-right: auto;
+  padding: 10px 0;
+  cursor: grab;
+  touch-action: none;
+}
+
+.testimonial-progress:active {
+  cursor: grabbing;
+}
+
+.testimonial-progress:focus-visible {
+  outline: 2px solid var(--colour-softclay-800, #8a7049);
+  outline-offset: 6px;
+  border-radius: 999px;
+}
+
+.testimonial-progress__track {
+  position: relative;
+  width: 100%;
+  height: 3px;
+  border-radius: 999px;
+  background: var(--colour-mistgreen-400, #d1ddda);
+  overflow: hidden;
+}
+
+.testimonial-progress__thumb {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--colour-softclay-800, #8a7049);
+  transition: left 0.25s ease, width 0.25s ease;
 }
 
 /* Navigation is now rendered inside each testimonial's footer via props */
 
+/* Mobile: stretch all cards to match the tallest so heights are consistent */
+@media (max-width: 767px) {
+  .testimonial-slides ::slotted(af-testimonial) {
+    height: 100%;
+  }
+}