@affinda/wc 0.0.23 → 0.0.24

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"; }

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

@@ -48,6 +48,10 @@
 }
 
 /* Proportion-based content sizing for side-by-side */
+.text-image--proportion-1-2 .text-image__content {
+  flex: 1;
+}
+
 .text-image--proportion-1-3 .text-image__content {
   flex: 2;
 }
@@ -142,6 +146,11 @@
 }
 
 /* Proportion-based image sizing for side-by-side */
+.text-image--proportion-1-2 .text-image__image-wrapper {
+  flex: 1;
+  min-width: 0;
+}
+
 .text-image--proportion-1-3 .text-image__image-wrapper {
   flex: 1;
   min-width: 0;
@@ -160,6 +169,7 @@
    Mobile Responsive Styles
    ========================================================================== */
 
+/* mobile-only */
 @media (max-width: 768px) {
   /* Stack everything vertically on mobile */
   .text-image--side-by-side {

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

@@ -11,6 +11,7 @@ export class AfTextImage {
         this.imagePosition = 'right';
         /**
          * Proportion of the image in the layout
+         * - '1/2': Image and text each take half the width (50/50)
          * - '1/3': Image takes 1/3 of the width (text takes 2/3)
          * - '1/4': Image takes 1/4 of the width (text takes 3/4)
          * - '100%': Image takes full width below text
@@ -92,15 +93,15 @@ export class AfTextImage {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'1/3' | '1/4' | '100%'",
-                    "resolved": "\"1/3\" | \"1/4\" | \"100%\"",
+                    "original": "'1/2' | '1/3' | '1/4' | '100%'",
+                    "resolved": "\"1/2\" | \"1/3\" | \"1/4\" | \"100%\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Proportion of the image in the layout\n- '1/3': Image takes 1/3 of the width (text takes 2/3)\n- '1/4': Image takes 1/4 of the width (text takes 3/4)\n- '100%': Image takes full width below text"
+                    "text": "Proportion of the image in the layout\n- '1/2': Image and text each take half the width (50/50)\n- '1/3': Image takes 1/3 of the width (text takes 2/3)\n- '1/4': Image takes 1/4 of the width (text takes 3/4)\n- '100%': Image takes full width below text"
                 },
                 "getter": false,
                 "setter": false,

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

@@ -77,6 +77,7 @@
    Mobile Responsive Styles
    ========================================================================== */
 
+/* mobile-only */
 @media (max-width: 768px) {
   /* Content gap */
   .nest__content {

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: '6236efcd1868aea0a8ae6647790ea6d6afb86b51' }, h("div", { key: '863feee89464ff752ad04fefa2011224fb98e13e', class: containerClasses }, h("div", { key: 'd09229ad450d4426defe18db4052eee784f0dde2', class: "nest__content" }, h("div", { key: '1c622be554abd392c0f29272a4f93ef74cebd83d', class: gridClasses }, h("slot", { key: 'e99c2569d4b764d7d27d52479f3d536aceb9d085' })), h("div", { key: '82e03d0f533835f4c25aeca901125ec390906037', class: "nest__footer" }, h("slot", { key: '132ff2ea9b3cd73d2dc5e634748ec65bf2ab959d', name: "buttons" }))))));
+        return (h(Host, { key: '3ec6b9ba229f43f503b31135e64ed4fc1c11f84d' }, h("div", { key: '167fd7bc7875e0d8f780a36f27c1d4d3f981f40f', class: containerClasses }, h("div", { key: '9631f476ab5c254d048ae821c5c308e1ab96a539', class: "nest__content" }, h("div", { key: 'c210eaf566a6f18b9809bd0a3e8392d4e3789f2a', class: gridClasses }, h("slot", { key: 'f17c92f4ecd6d2edd65eee7f06f51994906bd39a' })), h("div", { key: 'e6db2988f646ab0bab78b3e3ccca02a5a1ad7cf0', class: "nest__footer" }, h("slot", { key: 'c60e084083357db2ab52c1743b236924887af55d', name: "buttons" }))))));
     }
     static get is() { return "af-text-image-nest"; }
     static get encapsulation() { return "scoped"; }

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

@@ -54,9 +54,9 @@
   --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
   
   /* Button - Tertiary */
-  --af-button-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);
@@ -126,9 +126,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);
@@ -198,9 +198,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);
@@ -270,9 +270,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);
@@ -342,9 +342,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-theme-override/af-theme-override.js

@@ -18,7 +18,7 @@ export class AfThemeOverride {
         this.theme = 'white';
     }
     render() {
-        return (h(Host, { key: '6398825554ab3e9ab2a87012c4fb94e711663eb3' }, h("div", { key: '1353455a87e0efb9a5653938f13f5e325cec561d', class: `theme-override theme-${this.theme}` }, h("slot", { key: '60fa7a4fff57320ce113f693afc497bb63d3bc97' }))));
+        return (h(Host, { key: '0dbebde89199b19c6716b0e521026ec82ae42ee5' }, h("div", { key: 'a8a5761b4ce5d48bc52579c995fde8f15f154aac', class: `theme-override theme-${this.theme}` }, h("slot", { key: 'f2f30666635125d26438b8b5da72493830f226b7' }))));
     }
     static get is() { return "af-theme-override"; }
     static get encapsulation() { return "scoped"; }

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

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