@affinda/wc 0.0.23 → 0.0.25

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

@@ -9,19 +9,12 @@
   margin-right: auto;
   box-sizing: border-box;
 
-  /* Mobile first: xsmall breakpoint (320px) */
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-/* Small breakpoint (375px) */
-@media (min-width: 375px) {
-  .container {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
+  /* Mobile first: base padding (applies below 768px) */
+  padding-left: 20px;
+  padding-right: 20px;
 }
 
+/* ≥ mobile */
 /* Medium breakpoint (768px) */
 @media (min-width: 768px) {
   .container {
@@ -34,6 +27,7 @@
   }
 }
 
+/* ≥ tablet */
 /* Large breakpoint (1024px) */
 @media (min-width: 1024px) {
   .container {
@@ -50,6 +44,7 @@
   }
 }
 
+/* ≥ desktop-wide */
 /* XLarge breakpoint (1440px) */
 @media (min-width: 1440px) {
   .container {

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

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

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

@@ -164,6 +164,7 @@
 }
 
 /* Tablet */
+/* ≤ tablet */
 @media (max-width: 1024px) {
   .feature-accordion__content {
     gap: 32px;
@@ -179,6 +180,7 @@
 }
 
 /* Mobile */
+/* mobile-only */
 @media (max-width: 768px) {
   .feature-accordion__content {
     flex-direction: column;

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: 'b7021397b57feccc1fd8d627cb710ff9357f7088' }, h("div", { key: 'beaecb3c900fc8f82a4bee469125f9801a73b13b', class: "feature-accordion" }, h("div", { key: '581eff7fd2b52f32aed8b328405ff58bd49798b7', class: "feature-accordion__container" }, h("h2", { key: '7604d1bcdc1305bb979da651ad9fb20b9fbcfec9', class: "feature-accordion__heading" }, this.heading), h("div", { key: 'db87e11d47bf68dba12c4ecf7e46f2495265725e', class: "feature-accordion__content" }, h("div", { key: '52b52f570ec91b5faa6c895d5de324b62b15c799', class: "feature-accordion__list" }, items.map((item, index) => (h("div", { class: {
+        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: {
                 '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: '697f2bd91aa7d4bf10f14df99dfba18d17b3698a', class: "feature-accordion__image-container" }, h("div", { key: '722174055c8e5abd0e2658553bf8622f8f096b73', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (h("img", { key: '2ad665507f3e2886ea5849d63f55fd3611a843ef', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (h("div", { key: '21b6b31e06167ebccb56a2f911585a856070d351', class: "feature-accordion__image-placeholder" }, h("slot", { key: '5428289e7eef9a57c46c7cdec36d8fc8569a5037', 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: '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" }))))))))));
     }
     static get is() { return "af-feature-accordion"; }
     static get encapsulation() { return "scoped"; }

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

@@ -188,6 +188,7 @@
    - Standard: 335px width, radius 24px
    ========================================================================== */
 
+/* mobile-only */
 @media (max-width: 768px) {
   .feature-card {
     border-radius: var(--border-radius-card-level-1, 24px);

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

@@ -56,10 +56,11 @@
 }
 
 /* ==========================================================================
-   Mobile Responsive Styles (max-width: 768px)
+   Mobile Responsive Styles (max-width: 767px)
    ========================================================================== */
 
-@media (max-width: 768px) {
+/* ≤ mobile */
+@media (max-width: 767px) {
   .feature-grid__cards {
     gap: 16px;
   }
@@ -104,10 +105,11 @@
 }
 
 /* ==========================================================================
-   Tablet breakpoint (769px - 1024px)
+   Tablet breakpoint (768px - 1023px)
    ========================================================================== */
 
-@media (min-width: 769px) and (max-width: 1024px) {
+/* ≥ mobile and ≤ tablet */
+@media (min-width: 768px) and (max-width: 1023px) {
   .feature-grid__cards {
     grid-template-columns: repeat(2, 1fr);
   }

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: '080e8da8cfe06d185d2549ef9ec01d04795a8d25' }, h("div", { key: '7e97204349ef4f0e394ee467bc34cc650f9c3052', class: gridClasses }, h("div", { key: '67aa8fce8567a862eeff516fc85876fedf5f775b', class: "feature-grid__cards" }, h("slot", { key: '8584ac84b326ead673717cafbf61567575251717' })), showProgressLine && (h("div", { key: 'cca56833b42aa6786975be69a21b2e0ffe67dcda', class: "feature-grid__progress" }, h("af-progress-line", { key: 'f40dca6056e489866c447d923e304d9033fdeeae', progress: this.scrollProgress }))))));
+        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 }))))));
     }
     static get is() { return "af-feature-grid"; }
     static get encapsulation() { return "scoped"; }

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

@@ -215,8 +215,11 @@
   border-top: 1px solid rgba(198, 213, 209, 0.1);
   background-color: rgba(198, 213, 209, 0.05);
   margin: 0 -24px;
-  padding-left: 24px;
-  padding-right: 24px;
+  /* Honour iOS safe-area insets so the copyright strip doesn't sit under the
+     home indicator (bottom) or under landscape edge cutouts (left/right). */
+  padding-left: calc(24px + env(safe-area-inset-left));
+  padding-right: calc(24px + env(safe-area-inset-right));
+  padding-bottom: max(24px, env(safe-area-inset-bottom));
 }
 
 .footer__copyright {
@@ -264,6 +267,7 @@
 }
 
 /* Responsive styles */
+/* ≤ tablet */
 @media (max-width: 1024px) {
   .footer__top {
     grid-template-columns: 1fr;
@@ -281,6 +285,7 @@
   }
 }
 
+/* mobile-only */
 @media (max-width: 768px) {
   .footer {
     padding: 48px 0 0;
@@ -311,6 +316,7 @@
   }
 }
 
+/* ≤ small */
 @media (max-width: 480px) {
   .footer__container {
     padding: 0 16px;
@@ -328,8 +334,9 @@
 
   .footer__bottom {
     margin: 0 -16px;
-    padding-left: 16px;
-    padding-right: 16px;
+    padding-left: calc(16px + env(safe-area-inset-left));
+    padding-right: calc(16px + env(safe-area-inset-right));
+    /* padding-bottom inherits from base rule with max(24px, safe-area-inset-bottom) */
   }
 
   .footer__badges {

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

@@ -18,7 +18,7 @@ export class AfFooter {
         this.showStatus = true;
     }
     render() {
-        return (h(Host, { key: '16665f0143e5385fc61ab4276d90863c84be4fbd' }, h("footer", { key: 'ab6fd2b36c2660bdcc93871ae325f618bb1c4a9d', class: "footer" }, h("div", { key: '049c3815f53a491aef5b9800e49b2071dad377d7', class: "footer__container" }, h("div", { key: 'add6b688af3bdc378f8495a0564bea9de5d7b396', class: "footer__top" }, h("div", { key: '4c3d84f82ff4b48f731307ffc342c97ab8e1ae94', class: "footer__brand" }, h("div", { key: '5bfc4d61fe5241bf989aaef038b55dcf32a73b5f', class: "footer__brand-card" }, h("div", { key: '67f97c2515dd777e1d901847b6b49894dac41c71', class: "footer__logo" }, h("slot", { key: '0f3a3dafabdd1a74db162c155bb0d1b52c3f0992', name: "logo" })), h("div", { key: 'b9e41344db25005ea7cf990ee3a2c58f397b75b1', class: "footer__social" }, h("slot", { key: 'cd32a5641a06e857d383824e4042cc61674b604a', name: "social" }))), h("div", { key: 'b648526df318c8ec92702d2f7722f9d8d91d6baf', class: "footer__contact-card" }, h("slot", { key: 'd1854477fcb09daaae518688b45880d16efdfbc5', name: "contact" }))), h("div", { key: 'dbf9d101f8d816e43a8a61f6623af6e66433e3c3', class: "footer__nav" }, h("div", { key: '59888ec70f8198f248fa90428e7ba05d4d7cacf9', class: "footer__nav-columns" }, h("slot", { key: 'eda316b53dc9a5c978f4b40cd0cef04f8e2eda92', name: "nav" })), this.showStatus && (h("div", { key: '5ae3fc1d4c6f5d638c440b9f7b0a178e714fc5a4', class: "footer__status" }, h("span", { key: 'efe4a0b06f23cbb8d3bc4a43153c9b346035d1c8', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), h("span", { key: '57ad3fbba79ea7cbc3a219b0453a201eefce3315', class: "footer__status-text" }, this.statusText), this.statusUrl && (h("a", { key: 'c2b2ab1ceb56a44661f84dbb75163dc958eb3023', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), h("div", { key: '6edf5040899ef1adb0bb200c756cafccbddf2807', class: "footer__bottom" }, this.copyrightText && (h("p", { key: '9d9442adff90ef1886734e206989f216bdc4b6ad', class: "footer__copyright" }, this.copyrightText)), h("div", { key: '5156b06e31218c3ec059230ba1f4079607aa168e', class: "footer__legal" }, h("slot", { key: '3dfa0dd48410857df99cf08532156ff7933b6a00', name: "legal" })), h("div", { key: '27c6ecf73e8e5f19c9a0335bb543517b5ee768df', class: "footer__badges" }, h("slot", { key: 'b8b88202021c1215004629f3f091c5a3cb75033e', name: "badges" })))))));
+        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" })))))));
     }
     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: '62c4c80de1cbaad53af8b79ea95bd3d5c8f4fe94' }, h("div", { key: 'bd5cb734ead3a797ffc7211649c852d757bd6bfc', class: "footer-column" }, this.heading && (h("h5", { key: '768dacb70dbe5e77a7b84131b747c564fc6a014a', class: "footer-column__heading" }, this.heading)), h("ul", { key: '5ed2032f798a25070b109a1721468e16378c5474', class: "footer-column__list" }, h("slot", { key: 'd48eae65d3afcd7d127be3d7b7730b73babf5974' })))));
+        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' })))));
     }
     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: '7c24cbdae1edac66c89cbc86a1bd9e25f0df18f4' }, h("li", { key: '7a3e102457f7973fbd286af7d623daccca295a67' }, h("a", { key: '13075806889258a0635665ff3eb59d859bc8701f', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, h("slot", { key: '863d1e1f21d087f9a8125ef6f858df81e53bbd5d' }), this.external && (h("svg", { key: 'c5d327013d61fb898b3de5629c89f2a43d60e705', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: 'b185af22026254dd652c2b6233e8cae2335c50ce', 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: '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" })))))));
     }
     static get is() { return "af-footer-link"; }
     static get encapsulation() { return "scoped"; }

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

@@ -14,6 +14,7 @@
   align-items: var(--grid-align);
 }
 
+/* ≤ tablet */
 /* Large breakpoint: 1024px and below */
 @media (max-width: 1024px) {
   .grid {
@@ -21,6 +22,7 @@
   }
 }
 
+/* mobile-only */
 /* Medium breakpoint: 768px and below */
 @media (max-width: 768px) {
   .grid {
@@ -28,8 +30,9 @@
   }
 }
 
-/* Small breakpoint: 375px and below */
-@media (max-width: 375px) {
+/* ≤ small */
+/* Small breakpoint: 480px and below */
+@media (max-width: 480px) {
   .grid {
     grid-template-columns: repeat(var(--grid-columns-sm), 1fr);
   }

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

@@ -28,14 +28,14 @@ export class AfGrid {
             end: 'end',
             stretch: 'stretch',
         };
-        return (h(Host, { key: 'ca28d83be8b0191e86712d7cabcada8ddd94b957', style: {
+        return (h(Host, { key: '191ed73383f8e2b212ae77ddd27d230d28ba4961', 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: '882cc6bf8b9d92a458540f13499991c4e9fc25f3', class: "grid" }, h("slot", { key: '3ec91cee29854d9d2206a99482d30fe92996d892' }))));
+            } }, h("div", { key: '64697a1b0a1018e83236b1a2c38b982b0d337ba0', class: "grid" }, h("slot", { key: '6d17275f752c72893bfaca30dadbb416629767c0' }))));
     }
     static get is() { return "af-grid"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/af-grid-callout/af-grid-callout.css

@@ -117,6 +117,7 @@
    Responsive - Tablet
    ========================================================================== */
 
+/* ≤ tablet */
 @media (max-width: 1024px) {
   .grid-callout {
     gap: 32px;
@@ -144,6 +145,7 @@
    Responsive - Mobile
    ========================================================================== */
 
+/* mobile-only */
 @media (max-width: 768px) {
   .grid-callout {
     flex-direction: column;

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

@@ -29,76 +29,63 @@
   text-align: right;
 }
 
+/*
+ * Fluid typography: font-size scales continuously with viewport width between
+ * the mobile size (anchored at 375px viewport) and the desktop size
+ * (anchored at 1280px viewport) using clamp().
+ *
+ * Formula: clamp(mobilePx, Avw + Bpx, desktopPx)
+ *   A = (desktop - mobile) / (1280 - 375) * 100   (vw slope)
+ *   B = mobile - A/100 * 375                      (px intercept)
+ *
+ * Each level exposes a --font-size-heading-{level}-fluid custom property so
+ * consumers can still override the resulting size without defeating clamp().
+ */
+
 /* Heading XL */
 .level-xl {
-  font-size: var(--font-size-heading-xl-mobile, 50px);
+  font-size: var(--font-size-heading-xl-fluid, clamp(50px, 3.31vw + 37.57px, 80px));
   line-height: var(--line-height-heading-tight, 1);
 }
 
-@media (min-width: 768px) {
-  .level-xl {
-    font-size: var(--font-size-heading-xl-desktop, 80px);
-  }
-}
-
 /* Heading 1 */
 .level-1 {
-  font-size: var(--font-size-heading-1-mobile, 38px);
+  font-size: var(--font-size-heading-1-fluid, clamp(38px, 1.99vw + 30.54px, 56px));
   line-height: var(--line-height-heading-tight, 1);
 }
 
-@media (min-width: 768px) {
-  .level-1 {
-    font-size: var(--font-size-heading-1-desktop, 56px);
-  }
-}
-
 /* Heading 2 */
 .level-2 {
-  font-size: var(--font-size-heading-2-mobile, 32px);
+  font-size: var(--font-size-heading-2-fluid, clamp(32px, 1.33vw + 27.03px, 44px));
   line-height: var(--line-height-heading-tight, 1);
 }
 
-@media (min-width: 768px) {
-  .level-2 {
-    font-size: var(--font-size-heading-2-desktop, 44px);
-  }
-}
-
 /* Heading 3 */
 .level-3 {
-  font-size: var(--font-size-heading-3-mobile, 25px);
+  font-size: var(--font-size-heading-3-fluid, clamp(25px, 0.99vw + 21.27px, 34px));
   line-height: var(--line-height-heading-tight, 1);
 }
 
-@media (min-width: 768px) {
-  .level-3 {
-    font-size: var(--font-size-heading-3-desktop, 34px);
-  }
-}
-
 /* Heading 4 */
 .level-4 {
-  font-size: var(--font-size-heading-4-mobile, 20px);
+  font-size: var(--font-size-heading-4-fluid, clamp(20px, 0.44vw + 18.34px, 24px));
   line-height: var(--line-height-heading-normal, 1.1);
 }
 
 @media (min-width: 768px) {
   .level-4 {
-    font-size: var(--font-size-heading-4-desktop, 24px);
     line-height: var(--line-height-heading-relaxed, 1.2);
   }
 }
 
 /* Heading 5 */
 .level-5 {
-  font-size: var(--font-size-heading-5-mobile, 18px);
+  font-size: var(--font-size-heading-5-fluid, clamp(18px, 0.22vw + 17.17px, 20px));
   line-height: var(--line-height-heading-normal, 1.1);
 }
 
 @media (min-width: 768px) {
   .level-5 {
-    font-size: var(--font-size-heading-5-desktop, 20px);
     line-height: var(--line-height-heading-relaxed, 1.2);
   }
 }

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: 'cf665828d6eeac4f8911e66fa0b78672de5c7d18' }, h("div", { key: '695ecf32bbba49584d53f972de83c9ee595e93d1', class: containerClasses }, h("af-icon", { key: '429eb93229dd7b1c8a46e1c89f1d4dd0c85f992d', name: this.icon, size: iconSize }))));
+        return (h(Host, { key: '189ba5a40dec4f6d2dc1090649f57137d15fc4e7' }, h("div", { key: '2b4dc701b75b2490baf5a3470d8e38fa53bfffa3', class: containerClasses }, h("af-icon", { key: 'eb83b4b9aa31c42b2714bfb1e1f39e87fee5de48', 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-ghost-icon, var(--colour-brand-inkwell, #14343B));
+  color: var(--af-button-tertiary-icon, var(--colour-brand-inkwell, #14343B));
 }
 
 .icon-button {
@@ -112,7 +112,7 @@
 .variant-tertiary {
   background: transparent;
   border-color: transparent;
-  color: var(--af-button-ghost-text, var(--colour-brand-inkwell, #14343B));
+  color: var(--af-button-tertiary-text, var(--colour-brand-inkwell, #14343B));
 }
 
 .variant-tertiary:hover:not(.disabled) {

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

@@ -31,6 +31,7 @@
 }
 
 /* Mobile adjustments */
+/* mobile-only */
 @media (max-width: 768px) {
   .icon-text--vertical {
     gap: 20px;

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 ghost style)
+ * @slot buttons - Action buttons (typically tertiary 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="ghost">Learn more</af-button>
+ *   <af-button slot="buttons" variant="tertiary">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: '5215aff91c6760362b17b117b8181fc843bb31b9' }, h("div", { key: '567cda207dc4057c967ea1b11afd6b198ceda0f3', class: containerClasses }, h("af-icon-box", { key: '7250847661d1a56f9a27c52a45f9cfd2ca19ee11', icon: this.icon, size: this.iconSize, class: "icon-text__icon" }), h("af-typography-lockup", { key: '9df0809d7bc9a4286c95663dd5acc24cf5938e88', headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "icon-text__lockup" }, h("slot", { key: 'db62aae348f45df3b50ffd60b10c8a938b5da922' }), h("span", { key: '1275b2db7f10caaae2547f5048d58c7c45f66f40', slot: "description" }, h("slot", { key: 'f2fd0c8d074e1484d6831406fba6041b8978b7b5', name: "description" })), h("span", { key: 'fc9c18d9756698173d4028721496fe9871a55c00', slot: "buttons" }, h("slot", { key: '01b723a76a8d054217e27595da80a04934c7cf2b', name: "buttons" }))))));
+        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" }))))));
     }
     static get is() { return "af-icon-text"; }
     static get encapsulation() { return "scoped"; }

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

@@ -2,14 +2,13 @@ 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, a button row in the middle, and
- * an illustration from @affinda/illustrations at the bottom.
+ * Uses a theme background with text at top 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 {
@@ -34,7 +33,7 @@ export class AfIllustratedCard {
             [`illustrated-card--breakpoint-${this.breakpoint}`]: true,
             [`illustrated-card--size-${this.cardSize}`]: true,
         };
-        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" }))))));
+        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" }))))));
     }
     static get is() { return "af-illustrated-card"; }
     static get encapsulation() { return "scoped"; }

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

@@ -5,26 +5,8 @@
 
 .image-container {
   position: relative;
-  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;
+  overflow: hidden;
 }
 
 .image {
@@ -34,11 +16,12 @@
   object-fit: cover;
 }
 
-/* Inset border overlay — inherits the host's border radius via parent clip */
+/* Inset border overlay */
 .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,20 +4,8 @@ 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: 'c9f455572ade2527ebe2fa3cf6d25799b1dcdadd' }, h("div", { key: 'bd5742851ebe8c860eff32bc0583052ffe12c664', class: `image-container image-container--${this.shape}` }, h("img", { key: 'c8f13e1b129c75dee5a2f2c39ca5928a2680fc11', src: this.src, alt: this.alt, class: "image" }), h("div", { key: '19b82389db1ceb1cc37d6824340ce2937396e766', class: "image-border", "aria-hidden": "true" }))));
+        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" }))));
     }
     static get is() { return "af-image"; }
     static get encapsulation() { return "scoped"; }
@@ -70,26 +58,6 @@ 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: normal;
+  white-space: pre-wrap;
 }
 
 /* ==========================================================================
@@ -232,7 +232,7 @@
   letter-spacing: -0.88px;
   color: var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));
   margin: 0;
-  white-space: normal;
+  white-space: pre-wrap;
 }
 
 /* ==========================================================================
@@ -252,7 +252,7 @@
   line-height: 26px;
   color: var(--banner-body-color, var(--colour-inkwell-400, #2b484f));
   margin: 0;
-  white-space: normal;
+  white-space: pre-wrap;
 }
 
 /* ==========================================================================