@affinda/wc 0.6.2 → 0.7.0

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

@@ -13,25 +13,54 @@ export class AfTestimonialCarousel {
         this.isAnimating = false;
         this.testimonialCount = 0;
         this.testimonials = [];
+        this.draggingProgress = false;
         this.goToPrevious = () => {
             if (this.isAnimating || this.currentIndex === 0)
                 return;
-            this.isAnimating = true;
-            this.currentIndex = this.currentIndex - 1;
-            this.updateVisibleTestimonial();
-            setTimeout(() => {
-                this.isAnimating = false;
-            }, 500);
+            this.goToIndex(this.currentIndex - 1);
         };
         this.goToNext = () => {
             if (this.isAnimating || this.currentIndex >= this.testimonialCount - 1)
                 return;
-            this.isAnimating = true;
-            this.currentIndex = this.currentIndex + 1;
-            this.updateVisibleTestimonial();
-            setTimeout(() => {
-                this.isAnimating = false;
-            }, 500);
+            this.goToIndex(this.currentIndex + 1);
+        };
+        this.handleProgressPointerDown = (event) => {
+            if (this.testimonialCount <= 1)
+                return;
+            event.preventDefault();
+            this.draggingProgress = true;
+            event.currentTarget.setPointerCapture?.(event.pointerId);
+            this.goToIndex(this.indexFromProgressEvent(event));
+        };
+        this.handleProgressPointerMove = (event) => {
+            if (!this.draggingProgress)
+                return;
+            event.preventDefault();
+            this.goToIndex(this.indexFromProgressEvent(event));
+        };
+        this.handleProgressPointerUp = (event) => {
+            this.draggingProgress = false;
+            event.currentTarget.releasePointerCapture?.(event.pointerId);
+        };
+        this.handleProgressKeyDown = (event) => {
+            if (this.testimonialCount <= 1)
+                return;
+            if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+                event.preventDefault();
+                this.goToIndex(this.currentIndex - 1);
+            }
+            else if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+                event.preventDefault();
+                this.goToIndex(this.currentIndex + 1);
+            }
+            else if (event.key === 'Home') {
+                event.preventDefault();
+                this.goToIndex(0);
+            }
+            else if (event.key === 'End') {
+                event.preventDefault();
+                this.goToIndex(this.testimonialCount - 1);
+            }
         };
     }
     componentDidLoad() {
@@ -85,16 +114,41 @@ export class AfTestimonialCarousel {
             testimonial.hasNext = hasNext;
         });
     }
+    goToIndex(index) {
+        const nextIndex = Math.max(0, Math.min(index, this.testimonialCount - 1));
+        if (nextIndex === this.currentIndex)
+            return;
+        this.isAnimating = true;
+        this.currentIndex = nextIndex;
+        this.updateVisibleTestimonial();
+        setTimeout(() => {
+            this.isAnimating = false;
+        }, 500);
+    }
     /**
-     * Calculate progress value (0 to 1) based on current position
+     * Fixed-width scrollbar thumb: width is the visible fraction, left
+     * moves with the current slide. This matches the live site's native
+     * scrollbar-like progress treatment better than a fill-from-zero bar.
      */
-    getProgress() {
-        if (this.testimonialCount <= 1)
-            return 0;
-        return (this.currentIndex + 1) / this.testimonialCount;
+    getThumbStyle() {
+        if (this.testimonialCount <= 1) {
+            return { width: '100%', left: '0%' };
+        }
+        const width = 1 / this.testimonialCount;
+        const left = (this.currentIndex / (this.testimonialCount - 1)) * (1 - width);
+        return {
+            width: `${width * 100}%`,
+            left: `${left * 100}%`,
+        };
+    }
+    indexFromProgressEvent(event) {
+        const target = event.currentTarget;
+        const rect = target.getBoundingClientRect();
+        const ratio = rect.width > 0 ? (event.clientX - rect.left) / rect.width : 0;
+        return Math.round(Math.max(0, Math.min(1, ratio)) * (this.testimonialCount - 1));
     }
     render() {
-        return (h(Host, { key: '22b5bf9b57d64d03969fceef7c63a235cc3b28bb' }, h("div", { key: '4522d4d723ed18d9c700276d2fa55ec3a78618d2', class: "testimonial-carousel" }, h("div", { key: '3dc008449b1b7236ad5bb4f5a641b4635452dd1b', class: "testimonial-slides" }, h("slot", { key: '2e6503ea2a6aaa0cfa04552668f07d88c9169b43' })), this.testimonialCount > 1 && (h("div", { key: '7531aeca557692b0c6fad26031e9da67fe76a2a5', class: "testimonial-progress" }, h("af-progress-line", { key: 'a72e2ae998da694906a261a9e505035e5306b93b', progress: this.getProgress() }))))));
+        return (h(Host, { key: '98d92cc7d1d7f08d196773bbaba3bd76afa3a19a' }, h("div", { key: 'f61d3c78a49bcff9a547f43022f2a58de2ee19f9', class: "testimonial-carousel" }, h("div", { key: '6be140085ec4725e8e2decb779dda095c48e5b77', class: "testimonial-slides" }, h("slot", { key: '72dd8ec51f671f0883bd8a7d51b46c4def0f31df' })), this.testimonialCount > 1 && (h("div", { key: '3ca565bf5c111ce3d7ecbd4e957715ab097ccf0d', class: "testimonial-progress", role: "slider", "aria-label": "Customer story position", "aria-valuemin": "1", "aria-valuemax": this.testimonialCount, "aria-valuenow": this.currentIndex + 1, tabIndex: 0, onPointerDown: this.handleProgressPointerDown, onPointerMove: this.handleProgressPointerMove, onPointerUp: this.handleProgressPointerUp, onPointerCancel: this.handleProgressPointerUp, onKeyDown: this.handleProgressKeyDown }, h("div", { key: '44d5a90bc9a3576ffd3e2ec2e7d4a047a4af545b', class: "testimonial-progress__track" }, h("div", { key: '304ac2fec6717b279777338be1edc008cd3009f9', class: "testimonial-progress__thumb", style: this.getThumbStyle() })))))));
     }
     static get is() { return "af-testimonial-carousel"; }
     static get encapsulation() { return "scoped"; }
@@ -132,4 +186,3 @@ export class AfTestimonialCarousel {
             }];
     }
 }
-//# sourceMappingURL=af-testimonial-carousel.js.map

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

@@ -23,10 +23,15 @@
   justify-content: center;
 }
 
+.stat--text-only {
+  min-height: 0;
+  justify-content: flex-start;
+}
+
 /* Stat value - override af-heading to use secondary color */
 .stat-value {
   /* Override the heading color to use secondary (gold/ochre) instead of primary */
-  --af-typography-heading-primary: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));
+  --af-typography-heading-primary: var(--colour-softclay-800, #8a7049);
   letter-spacing: -0.88px;
   white-space: nowrap;
   /* Lining figures so "1B+" / "95%" hit a consistent baseline and
@@ -40,4 +45,53 @@
   --af-typography-body-default: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));
   overflow: hidden;
   text-overflow: ellipsis;
-}
+}
+
+.stat--text-only .stat-description {
+  overflow: visible;
+  text-overflow: clip;
+}
+
+@media (max-width: 767px) {
+  :host {
+    flex: none;
+  }
+
+  .stat {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    align-items: center;
+    column-gap: 18px;
+    row-gap: 8px;
+  }
+
+  .stat--accent {
+    min-height: 0;
+    padding-left: 16px;
+    justify-content: initial;
+  }
+
+  /* Text-only callouts have no stat-value, so the 2-column grid would
+     trap the description in the max-content column and overflow the
+     card on narrow screens. Collapse to a single column. */
+  .stat--text-only {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .stat-value {
+    min-width: max-content;
+  }
+
+  .stat-value:empty {
+    display: none;
+  }
+
+  .stat-value:empty + .stat-description {
+    grid-column: 1 / -1;
+  }
+
+  .stat-description {
+    overflow: visible;
+    text-overflow: clip;
+  }
+}

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

@@ -7,7 +7,12 @@ export class AfTestimonialStat {
         this.accentBorder = false;
     }
     render() {
-        return (h(Host, { key: '91a17ccf44b3306f2fad218201c0df9d541bdefd' }, h("div", { key: '6df0dc851385ea20371197016c421365ef230fc4', class: `stat ${this.accentBorder ? 'stat--accent' : ''}` }, h("af-heading", { key: 'dae1f4350a927c43a44d3030c39d9a6e4fd46f11', level: 2, class: "stat-value" }, this.value), h("af-text", { key: '06db3eac580389a28974e9841d52b1175aa3d00a', variant: "medium", class: "stat-description" }, this.description))));
+        const hasValue = Boolean(this.value && String(this.value).trim());
+        return (h(Host, { key: '9f24237da435b586b0dc5e3bb6619c41e268c067' }, h("div", { key: '6afb43ac98fa1da06afeb8a52a8dd6c3ff303761', class: {
+                stat: true,
+                'stat--accent': this.accentBorder,
+                'stat--text-only': !hasValue,
+            } }, hasValue && h("af-heading", { key: '50e081d74ce5b7aefc9badd5fb832b27f7711db5', level: 2, class: "stat-value" }, this.value), h("af-text", { key: 'cb4447400eabad311e6d987b229b3de13d51f5b4', variant: "medium", class: "stat-description" }, this.description))));
     }
     static get is() { return "af-testimonial-stat"; }
     static get encapsulation() { return "scoped"; }
@@ -84,4 +89,3 @@ export class AfTestimonialStat {
         };
     }
 }
-//# sourceMappingURL=af-testimonial-stat.js.map

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

@@ -95,4 +95,3 @@ export class AfText {
         };
     }
 }
-//# sourceMappingURL=af-text.js.map

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

@@ -171,4 +171,3 @@ export class AfTextImage {
         };
     }
 }
-//# sourceMappingURL=af-text-image.js.map

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: 'e250c2528e02050ea4debe9685eae3b6053a98b2' }, h("div", { key: '2af2eb56c3f384a12f4fcf1cefc155bb5a063a38', class: containerClasses }, h("div", { key: '270a0bf4748ab56477d0b9d79ebf4f4bbb122ac3', class: "nest__content" }, h("div", { key: '76013f327279d631b59a97d659b6c6932d967041', class: gridClasses }, h("slot", { key: '50c5772a355f729671ad38eb745f06040cecac16' })), h("div", { key: 'd285fc3f8a66b869bfda14beb9903e19f9d0de84', class: "nest__footer" }, h("slot", { key: '2f416cc2f07fb24149b8b8f9190c3fa7f8efe034', name: "buttons" }))))));
+        return (h(Host, { key: '655d1468f8ba5cfa71835f6a462b9d58e84ac1cb' }, h("div", { key: '56d8141d321dc7c3d359cc9b51de026f093ff13c', class: containerClasses }, h("div", { key: '34c9b958d0ad3c7eeab435ec0e4e9673c8e042f4', class: "nest__content" }, h("div", { key: '10c0b6dae2bf170ad2cb93d9b5b902570ebdaabd', class: gridClasses }, h("slot", { key: '6facf77d6646053886868dc94b1f9b6c78108829' })), h("div", { key: 'afd8b3c3972d047f30928970de0c135f5f6409d4', class: "nest__footer" }, h("slot", { key: 'c7e61877e32f093d2dc774517175b93447b360d0', name: "buttons" }))))));
     }
     static get is() { return "af-text-image-nest"; }
     static get encapsulation() { return "scoped"; }
@@ -68,4 +68,3 @@ export class AfTextImageNest {
         };
     }
 }
-//# sourceMappingURL=af-text-image-nest.js.map

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

@@ -459,4 +459,3 @@ export class AfTextarea {
 }
 /** @internal */
 AfTextarea.deprecationWarned = false;
-//# sourceMappingURL=af-textarea.js.map

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: '9f1536dead9af3d0f38365326732332b2094a79b' }, h("div", { key: 'eb697aa425db29c5f0509cdbde23b9f5dad40dcc', class: `theme-override theme-${this.theme}` }, h("slot", { key: '4cd377165126bbbc9e950e599d90eb0fb65e8afc' }))));
+        return (h(Host, { key: 'c702b3c6b130a3f6bf51fd6e322239d7c3cd0877' }, h("div", { key: 'e91f6165bfca439524797f6a0ff339795425e9b1', class: `theme-override theme-${this.theme}` }, h("slot", { key: 'db6f9a2eda7962ecc7c588165ac08f351104eadf' }))));
     }
     static get is() { return "af-theme-override"; }
     static get encapsulation() { return "scoped"; }
@@ -44,7 +44,8 @@ export class AfThemeOverride {
                         "Theme": {
                             "location": "import",
                             "path": "../../types",
-                            "id": "src/types.ts::Theme"
+                            "id": "src/types.ts::Theme",
+                            "referenceLocation": "Theme"
                         }
                     }
                 },
@@ -63,4 +64,3 @@ export class AfThemeOverride {
         };
     }
 }
-//# sourceMappingURL=af-theme-override.js.map

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

@@ -0,0 +1,260 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* ==========================================================================
+   Heading
+   ========================================================================== */
+
+.timeline__heading {
+  margin-bottom: var(--space-4, 16px);
+}
+
+.timeline__heading:empty {
+  display: none;
+}
+
+.timeline__heading ::slotted(*) {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-book, 500);
+  font-size: 20px;
+  line-height: 28px;
+  color: var(--af-typography-heading-primary, #14343b);
+  margin: 0;
+}
+
+/* ==========================================================================
+   Error State
+   ========================================================================== */
+
+.timeline__error {
+  padding: var(--space-4, 16px);
+  background-color: var(--colour-tints-soft-clay-100, #efeae2);
+  color: var(--colour-brand-soft-clay, #b09670);
+  border-radius: var(--radius-md, 12px);
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-size: 14px;
+}
+
+/* ==========================================================================
+   Desktop Gantt View
+   ========================================================================== */
+
+.timeline__gantt {
+  display: block;
+  position: relative;
+  overflow-x: auto;
+  overflow-y: visible;
+  padding-bottom: var(--space-2, 8px);
+  padding-top: 32px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.timeline__gantt::-webkit-scrollbar {
+  display: none;
+}
+
+/* ==========================================================================
+   Axis
+   ========================================================================== */
+
+.timeline__axis {
+  position: relative;
+  height: 32px;
+  margin-bottom: var(--space-2, 8px);
+  padding-left: 40px;
+  padding-right: 24px;
+  border-bottom: 1px solid var(--af-timeline-axis, var(--colour-inkwell-200, #a1aeb1));
+}
+
+.timeline__axis-label {
+  position: absolute;
+  transform: translateX(-50%);
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--af-typography-body-subtle, #60767b);
+  white-space: nowrap;
+  top: 4px;
+}
+
+.timeline__axis-label:first-child {
+  transform: translateX(0);
+}
+
+/* Add tick marks */
+.timeline__axis-label::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: -6px;
+  width: 1px;
+  height: 8px;
+  background-color: var(--af-timeline-axis, var(--colour-inkwell-200, #a1aeb1));
+}
+
+/* ==========================================================================
+   Timeline Body
+   ========================================================================== */
+
+.timeline__body {
+  position: relative;
+  min-height: 120px;
+  padding-left: 40px;
+  padding-right: 24px;
+  background: linear-gradient(
+    90deg,
+    var(--af-background-border-subtle, #e8eeed) 1px,
+    transparent 1px
+  );
+  background-size: 10% 100%;
+  overflow: visible;
+}
+
+/* ==========================================================================
+   Markers (Today & Target)
+   ========================================================================== */
+
+.timeline__marker {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  z-index: 10;
+}
+
+.timeline__marker--today {
+  background-color: var(--af-timeline-today, var(--colour-brand-inkwell, #14343b));
+}
+
+.timeline__marker--target {
+  background-color: var(--af-timeline-target, var(--colour-brand-ice, #a6fffb));
+  border: 1px dashed var(--af-timeline-target, var(--colour-brand-ice, #a6fffb));
+  background: transparent;
+}
+
+.timeline__marker-label {
+  position: absolute;
+  bottom: 100%;
+  margin-bottom: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-size: 10px;
+  line-height: 14px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+  padding: 2px 6px;
+  border-radius: var(--radius-sm, 6px);
+}
+
+.timeline__marker--today .timeline__marker-label {
+  background-color: var(--af-timeline-today, #14343b);
+  color: var(--af-timeline-today-text, #ffffff);
+}
+
+.timeline__marker--target .timeline__marker-label {
+  background-color: var(--af-timeline-target, #a6fffb);
+  color: var(--af-timeline-target-text, #14343b);
+}
+
+/* ==========================================================================
+   Items Container
+   ========================================================================== */
+
+.timeline__items {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2, 8px);
+  padding: var(--space-2, 8px) 0;
+}
+
+/* ==========================================================================
+   Custom Scrollbar (1px track, 3px thumb)
+   ========================================================================== */
+
+.timeline__scrollbar {
+  margin-top: var(--space-3, 12px);
+  padding: 8px 0;
+  cursor: grab;
+  touch-action: none;
+}
+
+.timeline__scrollbar:active {
+  cursor: grabbing;
+}
+
+.timeline__scrollbar:focus-visible {
+  outline: 2px solid var(--af-background-border-active, #8a7049);
+  outline-offset: 4px;
+  border-radius: 999px;
+}
+
+.timeline__scrollbar-track {
+  position: relative;
+  width: 100%;
+  height: 1px;
+  background: var(--af-scrollbar-track, var(--af-background-border-default, #d1ddda));
+}
+
+.timeline__scrollbar-thumb {
+  position: absolute;
+  top: -1px;
+  height: 3px;
+  border-radius: 999px;
+  background: var(--af-scrollbar-thumb, var(--af-background-border-active, #8a7049));
+  transition: left 0.1s ease-out;
+}
+
+.timeline__scrollbar:active .timeline__scrollbar-thumb {
+  transition: none;
+}
+
+/* ==========================================================================
+   Mobile Responsive
+   ========================================================================== */
+
+@media (max-width: 767px) {
+  /* Hide desktop-specific elements */
+  .timeline__axis,
+  .timeline__marker,
+  .timeline__scrollbar {
+    display: none;
+  }
+
+  /* Reset Gantt container to simple block layout */
+  .timeline__gantt {
+    padding-top: 0;
+    padding-bottom: 0;
+    overflow: visible;
+  }
+
+  /* Reset body to list container */
+  .timeline__body {
+    padding-left: 0;
+    padding-right: 0;
+    min-height: auto;
+    background: none;
+  }
+
+  /* Style items container as bordered list */
+  .timeline__items {
+    border: 1px solid var(--af-background-border-default, #d1ddda);
+    border-radius: var(--radius-md, 12px);
+    overflow: hidden;
+    padding: 0;
+    gap: 0;
+  }
+
+  .timeline__items ::slotted(af-timeline-item) {
+    border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);
+  }
+
+  .timeline__items ::slotted(af-timeline-item:last-child) {
+    border-bottom: none;
+  }
+}