@affinda/wc 0.0.24 → 0.0.26

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

@@ -11,8 +11,8 @@
   color: var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));
 }
 
-:host([variant="tertiary"]) {
-  color: var(--af-button-tertiary-icon, var(--colour-brand-inkwell, #14343B));
+:host([variant="ghost"]) {
+  color: var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343B));
 }
 
 /* Full-width mode - when host is display: block */
@@ -52,7 +52,7 @@
   line-height: 20px;
 }
 
-.size-small {
+.size-thin {
   padding: 8px 16px;
   font-size: 14px;
   line-height: 16px;
@@ -78,8 +78,8 @@
   height: 24px;
 }
 
-.size-small .icon-left,
-.size-small .icon-right {
+.size-thin .icon-left,
+.size-thin .icon-right {
   width: 20px;
   height: 20px;
 }
@@ -93,11 +93,11 @@
   margin-left: 12px;
 }
 
-.size-small .icon-left.has-content {
+.size-thin .icon-left.has-content {
   margin-right: 8px;
 }
 
-.size-small .icon-right.has-content {
+.size-thin .icon-right.has-content {
   margin-left: 8px;
 }
 
@@ -113,7 +113,7 @@
   height: 24px;
 }
 
-.size-small .label {
+.size-thin .label {
   height: 20px;
 }
 
@@ -188,38 +188,38 @@
    Text-only link style with underline, no border or background
    ========================================================================== */
 
-.variant-tertiary {
+.variant-ghost {
   background: transparent;
   border-color: transparent;
   border-radius: 0;
-  color: var(--af-button-tertiary-text, var(--colour-brand-inkwell, #14343b));
+  color: var(--af-button-ghost-text, var(--colour-brand-inkwell, #14343b));
   padding-left: 0;
   padding-right: 0;
 }
 
-.variant-tertiary .label {
-  border-bottom: 2px solid var(--af-button-tertiary-stroke, var(--colour-brand-soft-clay, #B09670));
+.variant-ghost .label {
+  border-bottom: 2px solid var(--af-button-ghost-stroke, var(--colour-brand-soft-clay, #B09670));
 }
 
-.variant-tertiary .icon-left,
-.variant-tertiary .icon-right {
-  color: var(--af-button-tertiary-icon, var(--colour-brand-inkwell, #14343b));
+.variant-ghost .icon-left,
+.variant-ghost .icon-right {
+  color: var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343b));
 }
 
-.variant-tertiary:hover:not(.disabled) {
+.variant-ghost:hover:not(.disabled) {
   opacity: 0.8;
 }
 
-.variant-tertiary:focus:not(.disabled),
-.variant-tertiary:focus-visible:not(.disabled) {
+.variant-ghost:focus:not(.disabled),
+.variant-ghost:focus-visible:not(.disabled) {
   outline: none;
 }
 
-.variant-tertiary:focus-visible:not(.disabled) .label {
-  box-shadow: 0 4px 0 0 var(--af-button-tertiary-stroke, var(--colour-brand-soft-clay, #B09670));
+.variant-ghost:focus-visible:not(.disabled) .label {
+  box-shadow: 0 4px 0 0 var(--af-button-ghost-stroke, var(--colour-brand-soft-clay, #B09670));
 }
 
-.variant-tertiary:active:not(.disabled) {
+.variant-ghost:active:not(.disabled) {
   opacity: 0.6;
 }
 
@@ -243,7 +243,7 @@
   opacity: 0.6;
 }
 
-.variant-tertiary.disabled {
+.variant-ghost.disabled {
   opacity: 0.6;
 }
 
@@ -266,7 +266,7 @@ button.button.variant-secondary {
   border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));
 }
 
-button.button.variant-tertiary {
+button.button.variant-ghost {
   background: transparent;
   border: none;
 }
@@ -290,7 +290,7 @@ a.button.variant-secondary {
   border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));
 }
 
-a.button.variant-tertiary {
+a.button.variant-ghost {
   background: transparent;
   border: none;
 }

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

@@ -14,13 +14,14 @@ export class AfButton {
          * The visual variant of the button.
          * - `primary` - Main CTA with filled background (use sparingly, 1-2 per view)
          * - `secondary` - Supporting action with outlined style
-         * - `tertiary` - Subtle text-link style with underline
+         * - `ghost` - Link-style with themed underline on the label; commonly paired
+         *   with a right-pointing icon. Matches Webflow's "button ghost" variant.
          */
         this.variant = 'primary';
         /**
          * The size of the button.
-         * - `default` - Standard size for primary CTAs
-         * - `small` - Compact size for inline or secondary contexts
+         * - `default` - Standard size for primary CTAs (12/24px padding)
+         * - `thin` - Compact inline/secondary size (8/16px padding)
          */
         this.size = 'default';
         /**
@@ -80,15 +81,15 @@ export class AfButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'tertiary'",
-                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+                    "original": "'primary' | 'secondary' | 'ghost'",
+                    "resolved": "\"ghost\" | \"primary\" | \"secondary\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The visual variant of the button.\n- `primary` - Main CTA with filled background (use sparingly, 1-2 per view)\n- `secondary` - Supporting action with outlined style\n- `tertiary` - Subtle text-link style with underline"
+                    "text": "The visual variant of the button.\n- `primary` - Main CTA with filled background (use sparingly, 1-2 per view)\n- `secondary` - Supporting action with outlined style\n- `ghost` - Link-style with themed underline on the label; commonly paired\n  with a right-pointing icon. Matches Webflow's \"button ghost\" variant."
                 },
                 "getter": false,
                 "setter": false,
@@ -100,15 +101,15 @@ export class AfButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'small'",
-                    "resolved": "\"default\" | \"small\"",
+                    "original": "'default' | 'thin'",
+                    "resolved": "\"default\" | \"thin\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The size of the button.\n- `default` - Standard size for primary CTAs\n- `small` - Compact size for inline or secondary contexts"
+                    "text": "The size of the button.\n- `default` - Standard size for primary CTAs (12/24px padding)\n- `thin` - Compact inline/secondary size (8/16px padding)"
                 },
                 "getter": false,
                 "setter": false,

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

@@ -83,8 +83,8 @@
   /* Button variants for dark theme */
   --af-button-secondary-text: var(--colour-brand-white, #ffffff);
   --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);
-  --af-button-tertiary-text: var(--colour-brand-white, #ffffff);
-  --af-button-tertiary-icon: var(--colour-brand-white, #ffffff);
+  --af-button-ghost-text: var(--colour-brand-white, #ffffff);
+  --af-button-ghost-icon: var(--colour-brand-white, #ffffff);
   
   /* Form control tokens (checkbox, radio, switch) */
   --af-form-control-bg: var(--colour-inkwell-450, #203e45);

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

@@ -26,7 +26,7 @@ export class AfCard {
             'card': true,
             [`theme-${this.theme}`]: true
         };
-        return (h(Host, { key: '11db24244a880d989286e3a7506547107b50b82c' }, h("div", { key: 'eaab5bc65773efb1bb79002f3265afd6d82cc31a', class: classes }, h("div", { key: 'b37815c69c6c479726ad0615e6475ff3e08bc977', class: "card__content" }, h("slot", { key: '2adec851a56fc03bb42d2442ddcb140264192143' })))));
+        return (h(Host, { key: '9847c934dc643291c0b19a5bbd7a5a1f95171573' }, h("div", { key: 'ef75699eb880055c79cfb605821167e5e9958aa5', class: classes }, h("div", { key: '48b0ca5f605d7af698564d6907e38dedf2a4beef', class: "card__content" }, h("slot", { key: 'fa2832e5ff3796fc80b72d5a4cb630e978a4b083' })))));
     }
     static get is() { return "af-card"; }
     static get encapsulation() { return "scoped"; }

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

@@ -33,7 +33,7 @@ export class AfCenter {
         if (this.minHeight) {
             style.minHeight = this.minHeight;
         }
-        return (h(Host, { key: 'd5155950c8c486ac95b394c8604e1b868becb524', style: style }, h("slot", { key: 'e53b6eeda1351177681e57bca66b6c508e445a43' })));
+        return (h(Host, { key: 'fc1bcaef9b11c0c5f69e9ef95d58adf61b4f244a', style: style }, h("slot", { key: '09dc75e0a80760d56e370ad0b52231f4143549e8' })));
     }
     static get is() { return "af-center"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,7 +59,7 @@ export class AfClientCarousel {
     }
     render() {
         const rows = Number(this.rows);
-        return (h(Host, { key: 'fc74fb35c12175013e543fafa904552e612e6572', class: `theme-${this.theme}` }, h("div", { key: 'f3ef580c12bee50a21224a1acc9f00e6abfe8458', class: `client-carousel theme-${this.theme} rows-${rows}` }, h("div", { key: '2806047e790af64a279edcbb1267ce77f60ea931', class: "carousel-container" }, h("div", { key: 'cfc65a1943a7c2ff7ae7933f6c04161bce6bec18', class: "carousel-row scroll-left" }, h("div", { key: '1618027e9f638c25661c8f53b4b795e25daf0c21', class: "logo-track", ref: (el) => (this.row1TrackRef = el) }, h("slot", { key: '9ad4d469ffb23c24b75e4bb9a1bc4073ca0c4a9b', name: "row-1" }, h("slot", { key: 'f978cd8bf624f37d46b531172ef1f3201e473df7' })))), rows === 2 && (h("div", { key: 'a49696a412537b87b5b9852a52b9d541db9f2a4e', class: "carousel-row scroll-right" }, h("div", { key: '869ee5643bc328c6cdb12a22e0f82b39dd747e92', class: "logo-track", ref: (el) => (this.row2TrackRef = el) }, h("slot", { key: 'abc432acac79101902989317ee98d8cc421dcfee', name: "row-2" }))))))));
+        return (h(Host, { key: '46f4a3c383b4f067cc74697860d437e38428a94c', class: `theme-${this.theme}` }, h("div", { key: '3a112f1ba371dee4fbea77994ff2ce5b33d85702', class: `client-carousel theme-${this.theme} rows-${rows}` }, h("div", { key: '32bf5229631e03fdae350f2224cbc7c2728b164d', class: "carousel-container" }, h("div", { key: '265e1f762ad375913bb0d308a1ab313bb75b76c0', class: "carousel-row scroll-left" }, h("div", { key: 'd92c38d3ff861cc1f422b261cf6239dd59b8dbfc', class: "logo-track", ref: (el) => (this.row1TrackRef = el) }, h("slot", { key: 'bf82ec86369fd9bb927a003108959eb7f8ede1bf', name: "row-1" }, h("slot", { key: '6845159319fb23679e7b27968dbe8f86cc7d4bd1' })))), rows === 2 && (h("div", { key: 'a0327e6d2f98e1e34c3ab7b763565b73e511d90d', class: "carousel-row scroll-right" }, h("div", { key: 'ead9bd1658eb547b23967463f84a3a9575e43ad5', class: "logo-track", ref: (el) => (this.row2TrackRef = el) }, h("slot", { key: 'f849ded863bd0ece4cca88143f45c658aa0c9e83', name: "row-2" }))))))));
     }
     static get is() { return "af-client-carousel"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-contact-item/af-contact-item.js

@@ -11,7 +11,7 @@ export class AfContactItem {
         this.value = '';
     }
     render() {
-        return (h(Host, { key: 'a75b9b073fd5a337dbe04ac706e0a7361df6a31f' }, h("div", { key: '980c61efe1b8aad364009850c460cf299963e648', class: "contact-item" }, this.label && (h("h5", { key: 'eb93cc75846623f4ce81357787b9fa8a3f11cf32', class: "contact-item__label" }, this.label)), this.value && (h("p", { key: 'dbf0d11ced00787d3b160c0f3aa1960832043f92', class: "contact-item__value" }, this.value)), h("slot", { key: 'c95f16eea98ad92b7866a54a94335440a8450751' }))));
+        return (h(Host, { key: '1a52a5ea61e7ef04f3b86e8338ed6984a57101a2' }, h("div", { key: '9c69396e916f489d572f045e78daf990a72e0d24', class: "contact-item" }, this.label && (h("h5", { key: '7575301c7a83aa2034aaaf9b9bdb2a0bd5e072bb', class: "contact-item__label" }, this.label)), this.value && (h("p", { key: '5cbca2b4420b2184fb08ac7f1edb22bce50b9c4c', class: "contact-item__value" }, this.value)), h("slot", { key: '45624be318ed9146a9ec0f2b81af110f8cb82ff6' }))));
     }
     static get is() { return "af-contact-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -28,7 +28,7 @@ export class AfDivider {
                 marginTop: spacingValue,
                 marginBottom: spacingValue,
             };
-        return (h(Host, { key: 'b40cd4b59055fc68925dd6018e460ac752d99051', class: {
+        return (h(Host, { key: '6d986be8da228de6f6203c3e3fc38f79751c1e97', class: {
                 'divider': true,
                 'divider--horizontal': !isVertical,
                 'divider--vertical': isVertical,

package/dist/collection/components/af-feature-accordion/af-feature-accordion.js

@@ -98,13 +98,13 @@ export class AfFeatureAccordion {
     render() {
         const items = this.getItems();
         const currentItem = items[this.expandedIndex];
-        return (h(Host, { key: 'c962752c5347ab9ed4fd60d03c851bdcb7e4996c' }, h("div", { key: 'fd7819763f214bfc76a9ba72d364fa0bffefd9e6', class: "feature-accordion" }, h("div", { key: '9f0ceb5cceb20ff49f707a44b6218b67fc1fe27e', class: "feature-accordion__container" }, h("h2", { key: '1149ffe08dee96ccbb1681b402c74acadf1454b8', class: "feature-accordion__heading" }, this.heading), h("div", { key: '754ba7a0608b416c2c1b176c7f3ece6950db94bf', class: "feature-accordion__content" }, h("div", { key: 'b2337d4518ada7e1daead0190b9558e3cb9865b5', class: "feature-accordion__list" }, items.map((item, index) => (h("div", { class: {
+        return (h(Host, { key: '03ae097e99c77b487ca8fe64571840c63e7da862' }, h("div", { key: '2ad42ea20ce150e762763a3fb58ba8c52f1b31a9', class: "feature-accordion" }, h("div", { key: 'e6952ea34da35c5ee7e77c0f43cfc328b4ecbb05', class: "feature-accordion__container" }, h("h2", { key: '8d360f7af4c0de8ddad629d209c41fcc56a55a95', class: "feature-accordion__heading" }, this.heading), h("div", { key: '56b3155755a3b0d68ff89727df3ae9aae70defd4', class: "feature-accordion__content" }, h("div", { key: 'bc15d1c26cb079ea19b817e729d0dfb29d5858bb', class: "feature-accordion__list" }, items.map((item, index) => (h("div", { class: {
                 'accordion-item': true,
                 'accordion-item--expanded': this.expandedIndex === index
             }, key: index }, h("button", { class: "accordion-item__header", onClick: () => this.handleItemClick(index), "aria-expanded": this.expandedIndex === index ? 'true' : 'false' }, h("h4", { class: "accordion-item__title" }, item.title), h("span", { class: "accordion-item__icon" }, this.expandedIndex === index ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M5 12H19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M12 5V19M5 12H19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))))), h("div", { class: "accordion-item__content", style: {
                 maxHeight: this.expandedIndex === index ? '200px' : '0',
                 opacity: this.expandedIndex === index ? '1' : '0'
-            } }, h("p", { class: "accordion-item__description" }, item.description), this.expandedIndex === index && this.autoCycle && (h("div", { class: "accordion-item__timer-track" }, h("div", { class: "accordion-item__timer-progress", style: { width: `${this.timerProgress}%` } })))))))), h("div", { key: '727f17bb7c97eff905dd93bb9f818b6e6d05a8a3', class: "feature-accordion__image-container" }, h("div", { key: 'f46124c04b26cec34007529bda50f98ef0c82e22', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (h("img", { key: 'c46b468e7a4f14cd43ec781ae5ab2f4f24fa772d', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (h("div", { key: '1a98569ea08dfea599ab2db52884736bfa5bfb53', class: "feature-accordion__image-placeholder" }, h("slot", { key: 'fc8edbb1842d015afa79e9630a6d75d632527cf5', name: "image" }))))))))));
+            } }, h("p", { class: "accordion-item__description" }, item.description), this.expandedIndex === index && this.autoCycle && (h("div", { class: "accordion-item__timer-track" }, h("div", { class: "accordion-item__timer-progress", style: { width: `${this.timerProgress}%` } })))))))), h("div", { key: '3e160193fdb6a45b2d7e493ddb6925dbee121150', class: "feature-accordion__image-container" }, h("div", { key: '7ab7c3b54a88009f38379dc19c59ba4650ab4ce9', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (h("img", { key: 'cd3f5b1ea37b55d1c7183070c98cc44af3d90694', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (h("div", { key: '0956c500e38f588edb6a4e570d2cfc4f152453fb', class: "feature-accordion__image-placeholder" }, h("slot", { key: '36f7ed6e0554c429c891f71589296159e7531385', name: "image" }))))))))));
     }
     static get is() { return "af-feature-accordion"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-feature-grid/af-feature-grid.js

@@ -82,7 +82,7 @@ export class AfFeatureGrid {
             [`feature-grid--mobile-${this.mobileLayout}`]: true,
         };
         const showProgressLine = this.mobileLayout === 'scroll';
-        return (h(Host, { key: '3cbc69165b5b2e2bb1a1ed7734cc5c14cf9985f4' }, h("div", { key: 'ce564c030b6b5e5b71029753e761d07b0ae4d853', class: gridClasses }, h("div", { key: '4ef3d794608047c5c1f497289eabde26fe5c6045', class: "feature-grid__cards" }, h("slot", { key: '74b5903a1f8d605c0df1e1de66a0c437090561e1' })), showProgressLine && (h("div", { key: '2a66e6fefb92b3a4a9082d9bd2aceca61f847914', class: "feature-grid__progress" }, h("af-progress-line", { key: 'bd132ae6cf6398640f05bc5237d9039f0f8d2cd9', progress: this.scrollProgress }))))));
+        return (h(Host, { key: 'eb0a98e3493d564f6728613ef1c0b949dcbe7816' }, h("div", { key: 'c91f2fa779d050d9e9419eff301ba8fd80242bc0', class: gridClasses }, h("div", { key: '82989034a3f94cad6747429a1587c3ada160571f', class: "feature-grid__cards" }, h("slot", { key: '9ba0222a8ca2455fd83fbb054e1e4fc2c6f4e598' })), showProgressLine && (h("div", { key: '9c510e8f5366762546829210f5ec1f50788b4ecf', class: "feature-grid__progress" }, h("af-progress-line", { key: '584cd3da69b1b219743338bd6deb0a2c1bbab6b9', progress: this.scrollProgress }))))));
     }
     static get is() { return "af-feature-grid"; }
     static get encapsulation() { return "scoped"; }

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

@@ -18,7 +18,7 @@ export class AfFooter {
         this.showStatus = true;
     }
     render() {
-        return (h(Host, { key: '0e08363e4150006c6dbfbb9ad1bca56ab25fbc8f' }, h("footer", { key: '5e890950d627e5160fa4954fd93af0539236a136', class: "footer" }, h("div", { key: 'db83bd28c32b44b71e7f140203935d3ddf58b9c0', class: "footer__container" }, h("div", { key: '8ec46bc80b9ac028aa3aa9f2e067d52cdbf8db45', class: "footer__top" }, h("div", { key: '9a687d98131aac2df05015bfc273df8cd316e5e9', class: "footer__brand" }, h("div", { key: '24f93e2696ccf740548cf75a78f63731af525f1d', class: "footer__brand-card" }, h("div", { key: 'edd8f3e2c9d429927c56194449b9e0cffb7e1cde', class: "footer__logo" }, h("slot", { key: '6294789015b97c6c8d37e6bbbd8dcad7a1978fd4', name: "logo" })), h("div", { key: '178ed91cf46517f7bc94ba4abf5282595aba6d1b', class: "footer__social" }, h("slot", { key: '0346c56cd719e6b68e9b4b95247740b0a52a5d5f', name: "social" }))), h("div", { key: '499425f89c8d2abe6fb9877c91f96f8de394652d', class: "footer__contact-card" }, h("slot", { key: 'a33a6a1f41ad98506400b48e821b208065052414', name: "contact" }))), h("div", { key: '82c5763dfc2eaef247806ce8092b7bb7fd3eedc4', class: "footer__nav" }, h("div", { key: '4296cea62b03d0e5b8e2bb5601742afa55dd5c21', class: "footer__nav-columns" }, h("slot", { key: '9bb71318a19c1c3df39bd9f5edb3e752029bb920', name: "nav" })), this.showStatus && (h("div", { key: 'c59065755c155cc77804b1bc2b431f236707bdb7', class: "footer__status" }, h("span", { key: '189eb08ae3569697a87c67101d1b95e33a63142b', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), h("span", { key: '9a882960be3f02cf3bd66cc18a7aab07445a156d', class: "footer__status-text" }, this.statusText), this.statusUrl && (h("a", { key: '5695898656a864612616225ba86231828306e19c', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), h("div", { key: 'bc741a8deb44967063e720fe930476ebe1ceeace', class: "footer__bottom" }, this.copyrightText && (h("p", { key: 'dff21fea0dd79398b383f25a977093cd57dfc951', class: "footer__copyright" }, this.copyrightText)), h("div", { key: '397e9487d02b611cbafc358d34a16ee9e90e9502', class: "footer__legal" }, h("slot", { key: 'ed91ac78f222c3436e441f71ed9d86e352c4029f', name: "legal" })), h("div", { key: 'a4deb8b63054752b1cdaa1fc4fd8a6eecc6e2c76', class: "footer__badges" }, h("slot", { key: 'b06888b60c4110dfc269a0b1bb9a8c9f2c2a979e', name: "badges" })))))));
+        return (h(Host, { key: 'b0fceb1896656d8a17b3afda396dd74a9181668e' }, h("footer", { key: '6b48abc3e62d21f96fb3c4aa84b2eedd292e3386', class: "footer" }, h("div", { key: 'ba192ee7d600ddce8e1c2fcc5631259c5eff89db', class: "footer__container" }, h("div", { key: 'f7fa42a5d13aacf16bd49ab2a3257b80156383dd', class: "footer__top" }, h("div", { key: '25c7452fbba9a33805fa419e1d91da04c97e3843', class: "footer__brand" }, h("div", { key: 'd3e0c2b52ce7e6a1f399c13ed9d6f1a1c75d5c35', class: "footer__brand-card" }, h("div", { key: '197934823ea93f20575e3f737c777bd3fe6bdec9', class: "footer__logo" }, h("slot", { key: 'f2b8ab9d513704d6c5e3c2e78cd73a264e78225a', name: "logo" })), h("div", { key: 'c00e0d6bad4a5c99e6e39dab101b77c2fae36495', class: "footer__social" }, h("slot", { key: 'de662f1f8e9deb052eb79aed4a05a98c2d9f65aa', name: "social" }))), h("div", { key: '3c678879008647c05a60803ca7a067c4e4e61746', class: "footer__contact-card" }, h("slot", { key: '58071ccf22c23b1ef5341505dcf1d0ba57357512', name: "contact" }))), h("div", { key: '1eed42db812f2dce3aa935ab5ac1096625848ae6', class: "footer__nav" }, h("div", { key: '50aef430fdb85c2087dd2e2d87ad8cf1d16c7c8b', class: "footer__nav-columns" }, h("slot", { key: 'b900525b63c6072707a5b0d35f72237d1b2fe6a9', name: "nav" })), this.showStatus && (h("div", { key: 'fe957d27c0cbaf5a4e2627c3f37de884a87d09d7', class: "footer__status" }, h("span", { key: 'c123f1e69a1b8958eefede7510ae65395c58d948', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), h("span", { key: '9524fa81546c3755e0f28d1f335915dfadf0c08a', class: "footer__status-text" }, this.statusText), this.statusUrl && (h("a", { key: 'adac84ed1240b1587ad4dd730813243009bb55b7', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), h("div", { key: 'e662a65603a58375ecda64c12f60936ef4bf7535', class: "footer__bottom" }, this.copyrightText && (h("p", { key: '88688f225266e295d4f97ed64fdfe1a67a26561a', class: "footer__copyright" }, this.copyrightText)), h("div", { key: '9e37465b342340a36b309f2da9b5a0d68d5d3bec', class: "footer__legal" }, h("slot", { key: 'c4f6763e9affaf59c7740a78e738938ab25576d0', name: "legal" })), h("div", { key: 'ccdd834682869e69d9c09d2b8f1a6cb3648b671b', class: "footer__badges" }, h("slot", { key: 'cd10ff8b4e90f9a38270b5ed5d7884cea7f241a2', name: "badges" })))))));
     }
     static get is() { return "af-footer"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-footer-column/af-footer-column.js

@@ -9,7 +9,7 @@ export class AfFooterColumn {
         this.heading = '';
     }
     render() {
-        return (h(Host, { key: 'c45098d2963c1a0841d0576d4f4991787a3f12d5' }, h("div", { key: '65d247fb234a0a391bd4520741910316b564066d', class: "footer-column" }, this.heading && (h("h5", { key: '197b6c66effea1111243c7fbef121a12dd23d57f', class: "footer-column__heading" }, this.heading)), h("ul", { key: 'b072324375e75679da951673e3dfdc8fb3dfaa2e', class: "footer-column__list" }, h("slot", { key: '00f025b3b8e9ae8c4eaf3416829f5536d7a471ff' })))));
+        return (h(Host, { key: 'aff327dcb95b40e2835062053b7e59ee38d1e251' }, h("div", { key: '1f08aa09e7ffc52dda5603f5b3a1bb8ab8b42426', class: "footer-column" }, this.heading && (h("h5", { key: 'ef2532c50e755acb21f786edfbc23ade0097e385', class: "footer-column__heading" }, this.heading)), h("ul", { key: 'c96d5cda9bef99805eb17af7689a294adf80e33b', class: "footer-column__list" }, h("slot", { key: '5efdffcd7fc885e71a9460bc21a2d40bf486c14d' })))));
     }
     static get is() { return "af-footer-column"; }
     static get encapsulation() { return "scoped"; }

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

@@ -11,7 +11,7 @@ export class AfFooterLink {
         this.external = false;
     }
     render() {
-        return (h(Host, { key: 'b78ab57b7db492dd2d77de0e25a7457b76d34dab' }, h("li", { key: 'e6d415d772aca84b702047c85c35fa45db3df143' }, h("a", { key: '6846d9b5e12ef1130b1bb7f965d7a6c67e9c8ea1', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, h("slot", { key: 'c2f453502a346bec5727ad50ab8ba4778d84c5d1' }), this.external && (h("svg", { key: '2cf51499e6920354fc44fd88b7cf9c095f75c7ac', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: '7901d85da6957f681d28b189ed43101ba25080f5', d: "M10 6.5v3a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7.5 1.5h3v3M5.5 6.5l5-5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (h(Host, { key: '6a353087c08983e0e8a962ba97a2d1fa0afd1003' }, h("li", { key: '746175585030c809e05bd697a518f0ae0bc93d89' }, h("a", { key: '5409787ffbcd34661bbcd643fe68ba2e8354d127', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, h("slot", { key: '506e4056466d3764b4a2a55927932ad5fe5ea0ba' }), this.external && (h("svg", { key: '93e6405e6252095281d63cfbcf1548af54582c24', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: '72370b0a31dccb15f92bf8fa67fa868e2f0f33ee', d: "M10 6.5v3a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7.5 1.5h3v3M5.5 6.5l5-5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
     }
     static get is() { return "af-footer-link"; }
     static get encapsulation() { return "scoped"; }

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

@@ -28,14 +28,14 @@ export class AfGrid {
             end: 'end',
             stretch: 'stretch',
         };
-        return (h(Host, { key: '191ed73383f8e2b212ae77ddd27d230d28ba4961', style: {
+        return (h(Host, { key: 'bcc57cad4861ded2353d7668fa76281f327efac8', style: {
                 '--grid-columns': String(this.columns),
                 '--grid-columns-lg': String(this.columnsLg ?? this.columns),
                 '--grid-columns-md': String(this.columnsMd ?? this.columnsLg ?? this.columns),
                 '--grid-columns-sm': String(this.columnsSm ?? this.columnsMd ?? this.columnsLg ?? 1),
                 '--grid-gap': `var(--space-${this.gap})`,
                 '--grid-align': alignMap[this.align],
-            } }, h("div", { key: '64697a1b0a1018e83236b1a2c38b982b0d337ba0', class: "grid" }, h("slot", { key: '6d17275f752c72893bfaca30dadbb416629767c0' }))));
+            } }, h("div", { key: 'e4aaf0f25478b42470f24b7eb831f6598be15423', class: "grid" }, h("slot", { key: 'bc40be3d30c45c2af348bb67804c25f29d606895' }))));
     }
     static get is() { return "af-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/af-icon-box/af-icon-box.js

@@ -27,7 +27,7 @@ export class AfIconBox {
             [`icon-box--size-${this.size}`]: true,
         };
         const iconSize = this.size === 'small' ? 20 : this.size === 'large' ? 48 : 40;
-        return (h(Host, { key: '189ba5a40dec4f6d2dc1090649f57137d15fc4e7' }, h("div", { key: '2b4dc701b75b2490baf5a3470d8e38fa53bfffa3', class: containerClasses }, h("af-icon", { key: 'eb83b4b9aa31c42b2714bfb1e1f39e87fee5de48', name: this.icon, size: iconSize }))));
+        return (h(Host, { key: 'e270fbfc75794a1bc2fce141cde5e6295d13c80c' }, h("div", { key: '3533c3e5afe2aaf1ee0227ffe9d37323b954753f', class: containerClasses }, h("af-icon", { key: 'e692e0110fb1233ced5d29f7b8f612c0ab89e058', name: this.icon, size: iconSize }))));
     }
     static get is() { return "af-icon-box"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-icon-button/af-icon-button.css

@@ -12,7 +12,7 @@
 }
 
 :host([variant="tertiary"]) {
-  color: var(--af-button-tertiary-icon, var(--colour-brand-inkwell, #14343B));
+  color: var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343B));
 }
 
 .icon-button {
@@ -112,7 +112,7 @@
 .variant-tertiary {
   background: transparent;
   border-color: transparent;
-  color: var(--af-button-tertiary-text, var(--colour-brand-inkwell, #14343B));
+  color: var(--af-button-ghost-text, var(--colour-brand-inkwell, #14343B));
 }
 
 .variant-tertiary:hover:not(.disabled) {

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

@@ -10,14 +10,14 @@ import { h, Host } from "@stencil/core";
  *
  * @slot - Heading text content (passed to TypographyLockup)
  * @slot description - Body/description text
- * @slot buttons - Action buttons (typically tertiary style)
+ * @slot buttons - Action buttons (typically ghost style)
  *
  * @example
  * ```html
  * <af-icon-text icon="settings" heading-size="4">
  *   Feature Heading
  *   <span slot="description">Feature description text.</span>
- *   <af-button slot="buttons" variant="tertiary">Learn more</af-button>
+ *   <af-button slot="buttons" variant="ghost">Learn more</af-button>
  * </af-icon-text>
  * ```
  */
@@ -43,7 +43,7 @@ export class AfIconText {
             'icon-text': true,
             [`icon-text--${this.orientation}`]: true,
         };
-        return (h(Host, { key: 'db6238f97e11336a4d44bd5711178c3936f681c2' }, h("div", { key: 'e40b025b9486c0d59ad7fc845e9c85a0a5f631f1', class: containerClasses }, h("af-icon-box", { key: '3c7fa56b29c294db8b35202c6b033daaa487f6d9', icon: this.icon, size: this.iconSize, class: "icon-text__icon" }), h("af-typography-lockup", { key: 'a865afb49899efaf7733db07f5e4f40fee1d1c97', headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "icon-text__lockup" }, h("slot", { key: 'efa2d76cf8faf857f71acaed344978499ecb2275' }), h("span", { key: '1d5225677f43b27386018816669ddc54cdc5df68', slot: "description" }, h("slot", { key: '22b449cd98c16f55c89cc82a2e320cb8fd309e05', name: "description" })), h("span", { key: '62843bb293414df77fabf8f4c050c2e2a4a1e0f4', slot: "buttons" }, h("slot", { key: '58b3666891392b3d785a17972ca2bea1cdb5b187', name: "buttons" }))))));
+        return (h(Host, { key: '5ee5ddd91804507b0e4029adeee9eebb687448d9' }, h("div", { key: '5c00e4451c12aeaf924c2d9dff3ad85cb5555813', class: containerClasses }, h("af-icon-box", { key: 'd375fa1087651f86fd778744c276bd92e387b297', icon: this.icon, size: this.iconSize, class: "icon-text__icon" }), h("af-typography-lockup", { key: '2be428ff1b3210972248ef741086d96eb6829cb9', headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "icon-text__lockup" }, h("slot", { key: '0da48d34ee2d1ab77c2aac80daffdbce4b2774b1' }), h("span", { key: '140db3a089b16211db54b67b786a90795dbe3d8a', slot: "description" }, h("slot", { key: '37d6b87dc348b95c5178e9a04e902f04664a0feb', name: "description" })), h("span", { key: '10031a47ef045d9ad95cb1bb90289fa1d599bc35', slot: "buttons" }, h("slot", { key: 'decf43947df87a58f42d10ba5025e9c6e1149ca2', name: "buttons" }))))));
     }
     static get is() { return "af-icon-text"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-illustrated-card/af-illustrated-card.js

@@ -2,13 +2,14 @@ import { h, Host } from "@stencil/core";
 /**
  * Illustrated Card molecule component that combines a card with an illustration.
  *
- * Uses a theme background with text at top and an illustration from
- * @affinda/illustrations at the bottom.
+ * Uses a theme background with text at top, a button row in the middle, and
+ * an illustration from @affinda/illustrations at the bottom.
  *
  * Uses af-card atom internally and af-typography-lockup for text hierarchy.
  *
  * @slot - Heading text content
  * @slot body - Description/body text content
+ * @slot buttons - Action buttons (rendered below the description, above the illustration)
  * @slot illustration - Illustration image element
  */
 export class AfIllustratedCard {
@@ -33,7 +34,7 @@ export class AfIllustratedCard {
             [`illustrated-card--breakpoint-${this.breakpoint}`]: true,
             [`illustrated-card--size-${this.cardSize}`]: true,
         };
-        return (h(Host, { key: '7f7aea609db84c1efbd6d19068d4047ec92f40dc' }, h("div", { key: '3d6d8412b526b38e0a8fb722f9dd690a7d386847', class: wrapperClasses }, h("af-card", { key: '3fcefff2b10d0f81990d04bd46f965b00e70f456', theme: this.theme }, h("div", { key: 'd6faf6b89a08b62f30cac04a50fb417bb404cdb6', class: "illustrated-card__content" }, h("af-typography-lockup", { key: '9d8ddd4653af4cebb9c96a7383eaef108e3d91c7', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonAlignment: "vertical" }, h("slot", { key: 'c87cc8eec07ac2d04e1383bb75583114c9cceecd' }), h("span", { key: 'eb87e83a60e38528577181e2e2ac5b25c846a662', slot: "description" }, h("slot", { key: '83e551b037d4f7c497e5c8a40f1f151f6f9c9938', name: "body" })))), h("div", { key: '3ff9e46ae9df384d5f58a68ac5388a4b9269c6da', class: "illustrated-card__illustration-area" }, h("slot", { key: 'df24410a86179d2660162d4653d2543f0814addb', name: "illustration" }))))));
+        return (h(Host, { key: 'afe7b84219cbe07a6949825042295def34dafe5e' }, h("div", { key: '9b5697ca0732d5bc5ac8170869bf04db5c3e9b07', class: wrapperClasses }, h("af-card", { key: '0de8d7d93eb225298664e9edcd7efec821c341c6', theme: this.theme }, h("div", { key: '4a691832606f011d996f005c533f423acc960ea2', class: "illustrated-card__content" }, h("af-typography-lockup", { key: '59d8417922cffd552df7610b72b4f2ec6c222105', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonLayout: "vertical" }, h("slot", { key: 'ee18abb24d0637f3bea71b48ccafdd3c6df0ea45' }), h("span", { key: 'be0bebfef478da4491ba1137ba1975052f4dcb5c', slot: "description" }, h("slot", { key: 'b05c91bd5d5085f74d94fabd22d8b79a2b008719', name: "body" })), h("span", { key: '79c1f836418dd6d2d2c96a1ea680bf05ade2b0d8', slot: "buttons" }, h("slot", { key: '03a5aff63f8225bf2323abe44e8e830562cf0c6c', name: "buttons" })))), h("div", { key: '1c75154af4e7cc89eceda3f16a958ca720f17450', class: "illustrated-card__illustration-area" }, h("slot", { key: '46071088a5aad6cbf64635a3961aa78e1f7b3fee', name: "illustration" }))))));
     }
     static get is() { return "af-illustrated-card"; }
     static get encapsulation() { return "scoped"; }

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

@@ -5,10 +5,28 @@
 
 .image-container {
   position: relative;
-  border-radius: var(--radius-md, 12px);
   overflow: hidden;
 }
 
+/* Shape variants — matches Webflow's rounded-edge image treatments */
+.image-container--rounded {
+  border-radius: var(--radius-md, 12px);
+}
+
+.image-container--rounded-left {
+  border-top-left-radius: var(--radius-md, 12px);
+  border-bottom-left-radius: var(--radius-md, 12px);
+}
+
+.image-container--rounded-right {
+  border-top-right-radius: var(--radius-md, 12px);
+  border-bottom-right-radius: var(--radius-md, 12px);
+}
+
+.image-container--square {
+  border-radius: 0;
+}
+
 .image {
   display: block;
   width: 100%;
@@ -16,12 +34,11 @@
   object-fit: cover;
 }
 
-/* Inset border overlay */
+/* Inset border overlay — inherits the host's border radius via parent clip */
 .image-border {
   position: absolute;
   inset: 0;
-  border-radius: var(--radius-md, 12px);
   box-shadow: inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));
   pointer-events: none;
+  border-radius: inherit;
 }
-

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

@@ -4,8 +4,20 @@ import { h, Host } from "@stencil/core";
  * Provides consistent image styling across the design system.
  */
 export class AfImage {
+    constructor() {
+        /**
+         * Shape / corner rounding variant. Matches Webflow's `.image-fill.rounded-*`
+         * patterns where only one edge is rounded so the image bleeds into a
+         * neighbouring section.
+         * - `rounded` (default) — symmetric rounded corners on all four sides.
+         * - `rounded-left` — rounded only on the left edge (top-left + bottom-left).
+         * - `rounded-right` — rounded only on the right edge.
+         * - `square` — no corner rounding.
+         */
+        this.shape = 'rounded';
+    }
     render() {
-        return (h(Host, { key: '4cb4ea9887de4a009e044ff094061e776439c3a1' }, h("div", { key: 'e4db690fe52d08361b3420028aa80a7407e155c6', class: "image-container" }, h("img", { key: 'a3475febafc35e240ece6be513340bfb004e5315', src: this.src, alt: this.alt, class: "image" }), h("div", { key: 'c1d492a212f6ad3c4b7eac4c56bf5b91b2ea1809', class: "image-border", "aria-hidden": "true" }))));
+        return (h(Host, { key: 'c1d2a3fa4d205e24e5c55e9c84e8ff5b3150a161' }, h("div", { key: '5c77f95ebdfd2792ebfb55accc4ec0ea9da5953a', class: `image-container image-container--${this.shape}` }, h("img", { key: '1c9694ebb590d141e46267bb3217eda2400c5b23', src: this.src, alt: this.alt, class: "image" }), h("div", { key: '2505652d87a23db29d54705b93978f44794837b9', class: "image-border", "aria-hidden": "true" }))));
     }
     static get is() { return "af-image"; }
     static get encapsulation() { return "scoped"; }
@@ -58,6 +70,26 @@ export class AfImage {
                 "setter": false,
                 "reflect": false,
                 "attribute": "alt"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'rounded' | 'rounded-left' | 'rounded-right' | 'square'",
+                    "resolved": "\"rounded\" | \"rounded-left\" | \"rounded-right\" | \"square\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shape / corner rounding variant. Matches Webflow's `.image-fill.rounded-*`\npatterns where only one edge is rounded so the image bleeds into a\nneighbouring section.\n- `rounded` (default) \u2014 symmetric rounded corners on all four sides.\n- `rounded-left` \u2014 rounded only on the left edge (top-left + bottom-left).\n- `rounded-right` \u2014 rounded only on the right edge.\n- `square` \u2014 no corner rounding."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'rounded'"
             }
         };
     }

package/dist/collection/components/af-in-page-banner/af-in-page-banner.css

@@ -212,7 +212,7 @@
   gap: 16px;
   max-width: 840px;
   width: 100%;
-  white-space: pre-wrap;
+  white-space: normal;
 }
 
 /* ==========================================================================
@@ -232,7 +232,7 @@
   letter-spacing: -0.88px;
   color: var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));
   margin: 0;
-  white-space: pre-wrap;
+  white-space: normal;
 }
 
 /* ==========================================================================
@@ -252,7 +252,7 @@
   line-height: 26px;
   color: var(--banner-body-color, var(--colour-inkwell-400, #2b484f));
   margin: 0;
-  white-space: pre-wrap;
+  white-space: normal;
 }
 
 /* ==========================================================================
@@ -284,6 +284,7 @@
    - Illustration: 212px x 212px, positioned at top: 12px, centered horizontally
    ========================================================================== */
 
+/* mobile-only */
 @media (max-width: 768px) {
   .banner {
     flex-direction: column;
@@ -355,6 +356,7 @@
    Small Mobile (≤480px)
    ========================================================================== */
 
+/* ≤ small */
 @media (max-width: 480px) {
   .banner {
     padding-top: 200px;

package/dist/collection/components/af-in-page-banner/af-in-page-banner.js

@@ -22,6 +22,16 @@ import { h, Host } from "@stencil/core";
  * ```
  *
  * Alternatively, use the `illustration` slot for completely custom content.
+ *
+ * **Slot-based composition (preferred for rich content):**
+ * - `heading` — heading markup (overrides the `heading` prop when provided).
+ * - `description` — description markup (overrides the `description` prop).
+ * - `buttons` — custom button group (overrides the primary/secondary button
+ *   props; use when you need ghost variants, more than two buttons, or
+ *   per-button icons).
+ * - `illustration` — custom illustration markup.
+ *
+ * The string props remain supported for simple cases.
  */
 export class AfInPageBanner {
     constructor() {
@@ -56,7 +66,7 @@ export class AfInPageBanner {
         return (h("div", { class: "banner__wave-overlay", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 521 323", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "banner__wave-svg" }, h("path", { d: "M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z", fill: "currentColor" }))));
     }
     render() {
-        return (h(Host, { key: '2720fd3ccb0d8f2e37144265de17ce7ec40d5197' }, h("div", { key: 'edfa5812b8de06a50fd4502ee57a4590bab7891c', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), h("div", { key: '401c710a4642b04cae3ad4795db1a9444a25ca13', class: "banner__illustration" }, this.illustrationUrl ? (h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (h("slot", { name: "illustration" }))), h("div", { key: 'f09c44f258171263a035081af7918085e11aede6', class: "banner__content" }, h("div", { key: '3badcdab323c0c16b9d484d4fc55989b37cdbe08', class: "banner__copy" }, this.heading && (h("h2", { key: 'c35214a8429164d16bbb024292daf8d18fbeba29', class: "banner__heading" }, this.heading)), this.description && (h("p", { key: 'ecbfa1ff0649d77d8d874582b2d09b60c8e193c6', class: "banner__description" }, this.description))), (this.primaryButtonText || this.secondaryButtonText) && (h("div", { key: '6ef15b587a684ac9d4cc9ce4af81fca6d0a23446', class: "banner__buttons" }, this.primaryButtonText && (h("af-button", { key: 'ef632338bc8a8e9332f12c30ada3ad2c83201688', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (h("af-button", { key: '6265d2595f6e7ad3f45bb1284b9b2953f03e0cfe', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
+        return (h(Host, { key: '1f14f0d7df4f632817b7e8c955b8249a5a3d2ce4' }, h("div", { key: '0fc90536d6d5b65912fca02d3c74019bee067133', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), h("div", { key: 'c70ea65d7536efbceb8fc3f2e6d714d56c2d5be9', class: "banner__illustration" }, this.illustrationUrl ? (h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (h("slot", { name: "illustration" }))), h("div", { key: 'c209db43fd9a559854b73268f7b8a19b7c1a3268', class: "banner__content" }, h("div", { key: '7b1898662500a54e7dbf500646017f43ffe21e23', class: "banner__copy" }, h("h2", { key: '443078b848ee5ca1725ab960fc844e0f5d106ef7', class: "banner__heading" }, h("slot", { key: '10ce17b8014571ec6bc61cbda03b3881f2741215', name: "heading" }, this.heading)), h("div", { key: '3c43d4d4dd4c4c708891fdd3398de996a7b08d04', class: "banner__description" }, h("slot", { key: 'd58a7f5d4bea7dc2e4ce1dee10a99f19753427b4', name: "description" }, this.description))), h("div", { key: 'c10df7f70cb8ac0dd0d5e63e34a6fbc8fef9c62f', class: "banner__buttons" }, h("slot", { key: 'ff5cf411dee854f14fdbecda0bc8aac4b01b4abf', name: "buttons" }, this.primaryButtonText && (h("af-button", { key: 'c8da6aa83a13a9b8a7e892de29b1914aa5ae41c1', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (h("af-button", { key: '42b8ba18fa9d15539ab2c80af98da504d8b14013', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
     }
     static get is() { return "af-in-page-banner"; }
     static get encapsulation() { return "scoped"; }