@affinda/wc 0.0.20 → 0.0.21

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: '25c9989697baa866874a566ea76bad08946773fc' }, h("div", { key: 'ad2ada738e77fd5f1c03cdc2beba65c1cfb6f827', class: "contact-item" }, this.label && (h("h5", { key: '7d7105256639744dff5e640ea8f5842f6d10d1ee', class: "contact-item__label" }, this.label)), this.value && (h("p", { key: 'c661a4a566280c5470d917f537c85fa7afd09d44', class: "contact-item__value" }, this.value)), h("slot", { key: 'd7f1e94f19e5fbcbc25fcccf57f39d68fda88d61' }))));
+        return (h(Host, { key: '01276444ebe5b9da51f83a98cfe10a6367e5ad46' }, h("div", { key: '0438970f2162d814615441a1a5252d095f4407d9', class: "contact-item" }, this.label && (h("h5", { key: 'a55d0172d834a6c3681493223a6d86b2e2ea809b', class: "contact-item__label" }, this.label)), this.value && (h("p", { key: '60942e88db4782a2b45e627bf5914edf476e8383', class: "contact-item__value" }, this.value)), h("slot", { key: '8d1946d2e59875a728116615b6c36c335c07ef1d' }))));
     }
     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: '4accfc3bacd7851849d58807bd0713704be3f43a', class: {
+        return (h(Host, { key: 'c38ec5bf7efec1e8a91e53a9ded27090a5b8f3b5', 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: '7dea35d43a55761d3e36564de53886910cf43269' }, h("div", { key: 'f53d9194b7b3e0ca17f3507cae98af2f70d694f4', class: "feature-accordion" }, h("div", { key: 'f0f3ae26b637c86a754f536a45c30d2538d6f189', class: "feature-accordion__container" }, h("h2", { key: '5572067284f6d8c14b9b78104a7d89cc562319d7', class: "feature-accordion__heading" }, this.heading), h("div", { key: '953eb50fc040115ef17e2668362526e5c5aa20c2', class: "feature-accordion__content" }, h("div", { key: '035699b851f330d0b61c86f3e06aca2d6a2eb8ce', class: "feature-accordion__list" }, items.map((item, index) => (h("div", { class: {
+        return (h(Host, { key: 'cbda1aa6283e411b91bdf3f4f37666289d39e7f8' }, h("div", { key: '03f8ae153afe79ee6d47494bb34888158121b16d', class: "feature-accordion" }, h("div", { key: '42470c0256313498a9276dfeeea205664251e09a', class: "feature-accordion__container" }, h("h2", { key: 'a2135b43755e083ab9b71a1fedba49aa8299cbd2', class: "feature-accordion__heading" }, this.heading), h("div", { key: '39724513a630bce185d4e82fb189bd7902214947', class: "feature-accordion__content" }, h("div", { key: 'da9769e9a6708f804d5033ca9dfa3d6a3a2040dc', 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: '60b8b8c12647e3c0d49c61a260a69354ed7e529f', class: "feature-accordion__image-container" }, h("div", { key: '2f916ff6544cb4574e887b4a4155f2aaf83343c1', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (h("img", { key: '53db01fe2689049546729652973eb2c6246c01aa', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (h("div", { key: 'f79c210e398ccb423a48a40afee74d295117a42a', class: "feature-accordion__image-placeholder" }, h("slot", { key: '1fa843fb1b02413dc831023cb9957c96e0a4fa15', 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: '3fb45ba49e71139f9b2900e66a4684c4591869eb', class: "feature-accordion__image-container" }, h("div", { key: '4fca54dae38f0048a2788b75c01a2ec0f6611a0a', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (h("img", { key: '8b4fbc1e2c47a2c583eb15e321c1ff0584560fb2', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (h("div", { key: '3615b11c145bd994167396c526d49044f14981bb', class: "feature-accordion__image-placeholder" }, h("slot", { key: 'bc066019ed3fae731a76d41ba9992e5fec58282b', 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: '143cda464ef9d63cf4a4190fed2ec938438a6e2f' }, h("div", { key: '602a26836a596570c5ed3bc0679158718c32f125', class: gridClasses }, h("div", { key: '5844b5a699d3be238730c4b94012048a6c5a2b72', class: "feature-grid__cards" }, h("slot", { key: '8447309016d09376256c066f7f732a938066d8cf' })), showProgressLine && (h("div", { key: '7c798167883b9e231bbca9e124515ec418459dd5', class: "feature-grid__progress" }, h("af-progress-line", { key: '3e321ef9f01dc390156e51efcad4d988fc144fad', progress: this.scrollProgress }))))));
+        return (h(Host, { key: 'baeaff34dab4980412fa0564570b43f0b03016ce' }, h("div", { key: 'bb7224b908aa8635a8c896adaeadabd9e3b2d0f3', class: gridClasses }, h("div", { key: 'd1fcd29989994376245c8f36be97660464ba8a19', class: "feature-grid__cards" }, h("slot", { key: '7244415488316bc6d84794935dd8e44470191ae3' })), showProgressLine && (h("div", { key: '7ec8c1209bf4fb3ddd81dd965d3a5009cc98f468', class: "feature-grid__progress" }, h("af-progress-line", { key: 'cb203f374c673930e6ab34ac54e4b2188d1b0b6e', 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: 'cb150b784dd5bf43eca9b014d2f1cffd6ce9ae66' }, h("footer", { key: 'd625ee7e4ababf20b4629e192350f9f721ec8399', class: "footer" }, h("div", { key: '1378e675a4894ea1ba000927e5c6fc72985700ae', class: "footer__container" }, h("div", { key: '7a250ef4b2dce3019e26cc9d6b04397754a374ea', class: "footer__top" }, h("div", { key: '6abf819fff33c52a70a3b7b92388213c07f13647', class: "footer__brand" }, h("div", { key: '05cb8a0de6df6792e08fecb34ff8b07a6f6e7f51', class: "footer__brand-card" }, h("div", { key: '52ac66df35016dcc4a93a7684c6b6a99a96c6227', class: "footer__logo" }, h("slot", { key: '87918d5e37c324d4b8ea31a6405f03ae540e4d6e', name: "logo" })), h("div", { key: '55e6a3cc404da02b19f7ce1bc1f90d1dbf5b5549', class: "footer__social" }, h("slot", { key: 'b28bf973a05b7a8ef1c26956b1ea1a3f7e07de5a', name: "social" }))), h("div", { key: '84192d593a0a7fe2592975fcbecf7e35e81b49af', class: "footer__contact-card" }, h("slot", { key: '8bb25d9ab4a3659b2f171b706268796f79361c19', name: "contact" }))), h("div", { key: '7d734e6f509999419a0bbf716b224c322bfef234', class: "footer__nav" }, h("div", { key: '406da5392a399a4d1c1e98889a01cc8c8fc3f18a', class: "footer__nav-columns" }, h("slot", { key: 'bf422aeca3942072261b2a5f8fbc77309d2bb76c', name: "nav" })), this.showStatus && (h("div", { key: '738dc3e32b6c6e2cacd0dc4b97d4f3520b5482af', class: "footer__status" }, h("span", { key: 'ccf1cc242f2b367c5e3c2064b5e51f9f623f5e7d', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), h("span", { key: 'bc41ea24a56f349814f079f2db28f5cc266b7e83', class: "footer__status-text" }, this.statusText), this.statusUrl && (h("a", { key: '6c5c8c2feffc98154a77336178a6f9ac63cbac1e', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), h("div", { key: 'f3f9d665f7c4f2a336e15a795377bcbd01d10950', class: "footer__bottom" }, this.copyrightText && (h("p", { key: '943181dfb341d268301db656fdd4b778581d6dd1', class: "footer__copyright" }, this.copyrightText)), h("div", { key: '9909918646c1cfa7765accf8b9d3017a792cc860', class: "footer__legal" }, h("slot", { key: '3b7ba2443306b2bbd48843af246a7407c9cbf2a5', name: "legal" })), h("div", { key: 'c954830920c2e75b2b203640bd8970942eabf0d7', class: "footer__badges" }, h("slot", { key: '35bb8c9c487eae7f15ac6b4558070096497ed997', name: "badges" })))))));
+        return (h(Host, { key: '861c5bfe1b522545870fe67192553a621f0928d1' }, h("footer", { key: '03c309b37ec977d65b36198fc8fcf549add90c43', class: "footer" }, h("div", { key: 'db23fd931863f40d95c51716fcdbb63855133db7', class: "footer__container" }, h("div", { key: 'eca38acbdc47474cc250b9a41528971676e95765', class: "footer__top" }, h("div", { key: '2cfd74ee3d56e0778ce6d10b83b75994d384fe10', class: "footer__brand" }, h("div", { key: '425f59ec107962c91b5fed5d989fe67bc8454cc5', class: "footer__brand-card" }, h("div", { key: '11d932a2f59e5467c40842b327c260f8d1c90837', class: "footer__logo" }, h("slot", { key: '02a8bee27310753862376d90cbdfc55012462520', name: "logo" })), h("div", { key: '1ee36e17b70b818f8ea44c06b9b3d2c22fafac96', class: "footer__social" }, h("slot", { key: '45ff0b3003ffb550ecf30274a2fc6535833d0686', name: "social" }))), h("div", { key: '34a16c80d4f6680034d84c61666b580acd3a9eea', class: "footer__contact-card" }, h("slot", { key: 'c3b40328bcc65add5293e5a38fd5747fdb83b0fc', name: "contact" }))), h("div", { key: '5654e1a39634ebb8f7ccda5325c46db5f6052fba', class: "footer__nav" }, h("div", { key: '42108b09428adac653c3f7c351bf2192695caf19', class: "footer__nav-columns" }, h("slot", { key: 'ceb76c14151308458646c8f446a29058caca824e', name: "nav" })), this.showStatus && (h("div", { key: 'b24841e909ca9fab2ed473770dda0266e4f8dcc1', class: "footer__status" }, h("span", { key: 'f7ae4e7a10da63020fe5a1ed6db747960a75649e', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), h("span", { key: 'b0073fedf76be2b079ce470112df2c13bed22224', class: "footer__status-text" }, this.statusText), this.statusUrl && (h("a", { key: '77f7e45dfa0ae32e8346500c3d00cbad277fe1a1', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), h("div", { key: 'f544acdee6fe1ee1841b4667034b3bc89b2f3669', class: "footer__bottom" }, this.copyrightText && (h("p", { key: '4d420e42a2abe1493a77e40e838d5644373d1c1f', class: "footer__copyright" }, this.copyrightText)), h("div", { key: '3fcff3a343acabb362675c15b30f489c3f2b6918', class: "footer__legal" }, h("slot", { key: '66f4b372a38bbee2f2db87ac554cafbb7f97f878', name: "legal" })), h("div", { key: '81c800496c83695e303f13f904e6662c3a9300c9', class: "footer__badges" }, h("slot", { key: '667b1c600f34fec004ecfd5b6879256aeaa36480', 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: '675f525c7548bf5b1566c91fb26315451064079f' }, h("div", { key: '6acde9560897e0f7ecf5644a1f0ea26e8ff8239e', class: "footer-column" }, this.heading && (h("h5", { key: '19444320ae2cee0a0e5aa5c88dc02789d013749f', class: "footer-column__heading" }, this.heading)), h("ul", { key: '770eab7015f5cd480436c31ddbd58bfacc076b30', class: "footer-column__list" }, h("slot", { key: '9c71065b4fc32344bcc90bf0ac4766554fc4b84f' })))));
+        return (h(Host, { key: '283526c985df996540e558a5591e5a167e5c4c9b' }, h("div", { key: '829fc317f3999dda3aadbb8cc68c3ce53485df12', class: "footer-column" }, this.heading && (h("h5", { key: '567141f08e21166642f7e9fea2d4becfaa9e2162', class: "footer-column__heading" }, this.heading)), h("ul", { key: 'b5b7cb63ffe3fed5d97edaa1264fab916980da8b', class: "footer-column__list" }, h("slot", { key: '4c9adcdfc3c25f42c325bc222f4b9761b82a0280' })))));
     }
     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: '4c8565ffc90c571aa34c4a7b60e782519caa866f' }, h("li", { key: 'a23edb8dda823b10747e1927acb1c402da15890f' }, h("a", { key: 'e58f7d1ee389fc21c5f4513af0fee59cdd5d9890', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, h("slot", { key: '8f1fcb75860c1b7046c596702660f59aa5399f45' }), this.external && (h("svg", { key: '54195a756acbe32c01e814e25be8d6dca24ccabc', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: 'baba36e00a1632e089340dafa1a2f1dc434801e4', 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: 'bbd1c9452688e637e2f042855b460c550a04ab7d' }, h("li", { key: '01c2e3ea98cb848935f587e7dd83a71735f9bacb' }, h("a", { key: '965d00d17484deade15cc8e502ad507e67443f8c', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, h("slot", { key: '4536f9279791c59a9d198454ed2bf4e60194d52e' }), this.external && (h("svg", { key: '5e7a04185d8643b164f4b35f95dba5f0312ce1f4', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: '6a6a43d0276a36ffc43f6a29e31a74d8c4ae3c57', 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: '3043700eaf21addce4bd20eb107790fea7a7f5cc', style: {
+        return (h(Host, { key: '41b45cace33676321f420513cbede95926b49edb', 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: 'fd9bfb0ab2982d4d48ccaa4dc20889cde822a25a', class: "grid" }, h("slot", { key: '8dd95107a71f18910ac3b27b2f8e074f87bacff2' }))));
+            } }, h("div", { key: 'fe4ed4d11f35ce8476c16df6f2202655da181cbd', class: "grid" }, h("slot", { key: '2f2bb80eccf44fbc41029498e0b6ce758c33c5d9' }))));
     }
     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: '961d990c78faedbaa7595e26966edd712ffe323a' }, h("div", { key: '499bd1a36c589994cd1f1c848450aa0fe3d43ac0', class: containerClasses }, h("af-icon", { key: '6b48d327dc1a712e764f9ff783ba904252f9873d', name: this.icon, size: iconSize }))));
+        return (h(Host, { key: 'b224f522fa4db3081cb97fbe88aec0a4f4198d61' }, h("div", { key: '99ee87a2104918c6d3855cc5d7e90dcbda2d9638', class: containerClasses }, h("af-icon", { key: '778170ce3b08ca6b34289cc6bd1d49ade9583bc1', 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: '05f526330b69a8868f4d5d98e43ba59367a17319' }, h("div", { key: '1f64e5aa24607f13916bbde18e2ec9427c9a3f7c', class: containerClasses }, h("af-icon-box", { key: '9db629d1afad970e95194b87796b56abc6b94b27', icon: this.icon, size: this.iconSize, class: "icon-text__icon" }), h("af-typography-lockup", { key: '998fa3c49a6f8eca89d4235d8f2c6b226671ba04', headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "icon-text__lockup" }, h("slot", { key: 'd2d2e7054010367e338d54788b4f3ed8d0c157d7' }), h("span", { key: 'e31750f8dc682839c544dba6ea924fd21a454e52', slot: "description" }, h("slot", { key: '10248d219f5125818d91a41d2472bcad65e24b4f', name: "description" })), h("span", { key: '634276962dea534962e7a33dbcb9d87f98ca968f', slot: "buttons" }, h("slot", { key: 'b52e5205b2a9e3d7947c8978050b15c2431e5f8a', name: "buttons" }))))));
+        return (h(Host, { key: 'e00ca808eec26f88a177d91373d749908f3b2b5a' }, h("div", { key: 'c2709624720dd8775474c7c5be41ab93291bbe83', class: containerClasses }, h("af-icon-box", { key: '68feda331b07eefd23f10a4edf25b935e0298cf8', icon: this.icon, size: this.iconSize, class: "icon-text__icon" }), h("af-typography-lockup", { key: '56ee1da85e0808e3e12033abc7f0c74786b0b099', headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "icon-text__lockup" }, h("slot", { key: '056bef68d2251e514527cd49cbe2e8623556cc2a' }), h("span", { key: 'fb3379b7494d73b306a10f792f403ea1da719067', slot: "description" }, h("slot", { key: '7d06d6f52096fd80343823bd406f5a80d0035eaa', name: "description" })), h("span", { key: '9b4e20bc667fe53312297bdea1b5a96706dd3521', slot: "buttons" }, h("slot", { key: 'dac8dfcef4cb3f1f3d7caacb6ef40d29e52b53fe', name: "buttons" }))))));
     }
     static get is() { return "af-icon-text"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1 +1 @@
-{"version":3,"file":"af-icon-text.js","sourceRoot":"","sources":["../../../src/components/af-icon-text/af-icon-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAOH,MAAM,OAAO,UAAU;IANvB;QAYE;;WAEG;QACK,gBAAW,GAAsB,CAAC,CAAC;QAE3C;;;;WAIG;QACK,gBAAW,GAA8B,UAAU,CAAC;QAE5D;;WAEG;QACK,aAAQ,GAAkC,SAAS,CAAC;KAmC7D;IAjCC,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,WAAW,EAAE,IAAI;YACjB,CAAC,cAAc,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;SACzC,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,oEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAC,iBAAiB,GACV;gBAEf,6EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU,EAC1B,KAAK,EAAC,mBAAmB;oBAEzB,8DAAa;oBACb,6DAAM,IAAI,EAAC,aAAa;wBACtB,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC3B;oBACP,6DAAM,IAAI,EAAC,SAAS;wBAClB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACvB,CACc,CACnB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\nimport type { IconName } from '@affinda/icons';\n\n/**\n * IconText molecule - combines an IconBox with a TypographyLockup for feature items.\n * \n * Composes:\n * - af-icon-box: Themed icon container\n * - af-typography-lockup: Heading, description, and button slots\n * \n * Inherits theme colors from parent Section via CSS custom properties.\n * \n * @slot - Heading text content (passed to TypographyLockup)\n * @slot description - Body/description text\n * @slot buttons - Action buttons (typically tertiary style)\n * \n * @example\n * ```html\n * <af-icon-text icon=\"settings\" heading-size=\"4\">\n *   Feature Heading\n *   <span slot=\"description\">Feature description text.</span>\n *   <af-button slot=\"buttons\" variant=\"tertiary\">Learn more</af-button>\n * </af-icon-text>\n * ```\n */\n@Component({\n  tag: 'af-icon-text',\n  styleUrl: 'af-icon-text.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIconText {\n  /**\n   * The icon name to display in the IconBox\n   */\n  @Prop() icon!: IconName;\n\n  /**\n   * Heading size for the typography lockup (1-5, where 1 is largest)\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 4;\n\n  /**\n   * Layout orientation\n   * - 'vertical': Icon above text (default, used in grid layouts)\n   * - 'horizontal': Icon beside text (used in compact layouts)\n   */\n  @Prop() orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Size of the icon box\n   */\n  @Prop() iconSize: 'small' | 'default' | 'large' = 'default';\n\n  render() {\n    const containerClasses = {\n      'icon-text': true,\n      [`icon-text--${this.orientation}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <af-icon-box \n            icon={this.icon} \n            size={this.iconSize}\n            class=\"icon-text__icon\"\n          ></af-icon-box>\n          \n          <af-typography-lockup\n            headingSize={this.headingSize}\n            textAlignment=\"left\"\n            buttonAlignment=\"vertical\"\n            class=\"icon-text__lockup\"\n          >\n            <slot></slot>\n            <span slot=\"description\">\n              <slot name=\"description\"></slot>\n            </span>\n            <span slot=\"buttons\">\n              <slot name=\"buttons\"></slot>\n            </span>\n          </af-typography-lockup>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"af-icon-text.js","sourceRoot":"","sources":["../../../src/components/af-icon-text/af-icon-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAOH,MAAM,OAAO,UAAU;IANvB;QAYE;;WAEG;QACK,gBAAW,GAAsB,CAAC,CAAC;QAE3C;;;;WAIG;QACK,gBAAW,GAA8B,UAAU,CAAC;QAE5D;;WAEG;QACK,aAAQ,GAAkC,SAAS,CAAC;KAmC7D;IAjCC,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,WAAW,EAAE,IAAI;YACjB,CAAC,cAAc,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;SACzC,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,oEACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAC,iBAAiB,GACV;gBAEf,6EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU,EAC1B,KAAK,EAAC,mBAAmB;oBAEzB,8DAAa;oBACb,6DAAM,IAAI,EAAC,aAAa;wBACtB,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC3B;oBACP,6DAAM,IAAI,EAAC,SAAS;wBAClB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACvB,CACc,CACnB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\nimport type { IconName } from '@affinda/icons';\n\n/**\n * IconText molecule - combines an IconBox with a TypographyLockup for feature items.\n * \n * Composes:\n * - af-icon-box: Themed icon container\n * - af-typography-lockup: Heading, description, and button slots\n * \n * Inherits theme colors from parent Section via CSS custom properties.\n * \n * @slot - Heading text content (passed to TypographyLockup)\n * @slot description - Body/description text\n * @slot buttons - Action buttons (typically ghost style)\n * \n * @example\n * ```html\n * <af-icon-text icon=\"settings\" heading-size=\"4\">\n *   Feature Heading\n *   <span slot=\"description\">Feature description text.</span>\n *   <af-button slot=\"buttons\" variant=\"ghost\">Learn more</af-button>\n * </af-icon-text>\n * ```\n */\n@Component({\n  tag: 'af-icon-text',\n  styleUrl: 'af-icon-text.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIconText {\n  /**\n   * The icon name to display in the IconBox\n   */\n  @Prop() icon!: IconName;\n\n  /**\n   * Heading size for the typography lockup (1-5, where 1 is largest)\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 4;\n\n  /**\n   * Layout orientation\n   * - 'vertical': Icon above text (default, used in grid layouts)\n   * - 'horizontal': Icon beside text (used in compact layouts)\n   */\n  @Prop() orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Size of the icon box\n   */\n  @Prop() iconSize: 'small' | 'default' | 'large' = 'default';\n\n  render() {\n    const containerClasses = {\n      'icon-text': true,\n      [`icon-text--${this.orientation}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <af-icon-box \n            icon={this.icon} \n            size={this.iconSize}\n            class=\"icon-text__icon\"\n          ></af-icon-box>\n          \n          <af-typography-lockup\n            headingSize={this.headingSize}\n            textAlignment=\"left\"\n            buttonAlignment=\"vertical\"\n            class=\"icon-text__lockup\"\n          >\n            <slot></slot>\n            <span slot=\"description\">\n              <slot name=\"description\"></slot>\n            </span>\n            <span slot=\"buttons\">\n              <slot name=\"buttons\"></slot>\n            </span>\n          </af-typography-lockup>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

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: '10c5250554859428b03c48c48b095b8b688b9e76' }, h("div", { key: '6c9859967f5fa583c7910ca6f2f33f53d14688e9', class: wrapperClasses }, h("af-card", { key: '945d2120fe82c60b60ca961ffa86cfe8f2344da3', theme: this.theme }, h("div", { key: 'd09cf3a9bd78dce22ccbed77b6b037b1533a106b', class: "illustrated-card__content" }, h("af-typography-lockup", { key: '5bbc4f4885d0b5c7369e363ba5f8a32b2ab0792f', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonAlignment: "vertical" }, h("slot", { key: 'c356febe02752679ac3e2210dbef75ea793fd884' }), h("span", { key: '677bbb48a4aeb2d65d4943541639942e8de96258', slot: "description" }, h("slot", { key: 'd747b66a032e5043614f0192dc5b01eafc98bb0d', name: "body" })))), h("div", { key: 'e3552088bc91fbdaf9c7c6901b30a75545e51e06', class: "illustrated-card__illustration-area" }, h("slot", { key: '0b42d7faec8934be964d400d324e26c9b1b8d5ee', name: "illustration" }))))));
+        return (h(Host, { key: '439adc6b51a72991cc31d0b8b1502a5223f1bd07' }, h("div", { key: '720d33f89335819bc22215863c9f8bda54fb86a3', class: wrapperClasses }, h("af-card", { key: 'c0e3129600f3260afec336d350af155980571f52', theme: this.theme }, h("div", { key: 'ac74c8c356f4813e9ae2bcbca334b7811221f97c', class: "illustrated-card__content" }, h("af-typography-lockup", { key: '96a4c293ebc7121de779370b559a33cfe491258f', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonLayout: "vertical" }, h("slot", { key: 'dc8a6e12b4f799347cc0429887f7111bc5270921' }), h("span", { key: '3cc673ba38f1b12ec09e1b1c198b03db3b4d89aa', slot: "description" }, h("slot", { key: '26b82beeb359646a71f7f68561321329b4835c4a', name: "body" })), h("span", { key: '920f496df7f94189ea7339cd28c09495e52a18b1', slot: "buttons" }, h("slot", { key: '9af8feac5b976e1036f85244a88edb32382156d2', name: "buttons" })))), h("div", { key: '869a99184fd56ced7b6edcc1cb0d958d8f7a41ee', class: "illustrated-card__illustration-area" }, h("slot", { key: 'eca8bd839ff9745271ea29a0536ade1adddd17b5', name: "illustration" }))))));
     }
     static get is() { return "af-illustrated-card"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1 +1 @@
-{"version":3,"file":"af-illustrated-card.js","sourceRoot":"","sources":["../../../src/components/af-illustrated-card/af-illustrated-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;GAWG;AAOH,MAAM,OAAO,iBAAiB;IAN9B;QAOE;;;WAGG;QACK,UAAK,GAAsE,YAAY,CAAC;QAEhG;;WAEG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;WAEG;QACK,aAAQ,GAAwB,SAAS,CAAC;KAqCnD;IAnCC,MAAM;QACJ,MAAM,cAAc,GAAG;YACrB,kBAAkB,EAAE,IAAI;YACxB,CAAC,gCAAgC,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;YACzD,CAAC,0BAA0B,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;SAClD,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,cAAc;gBACxB,gEAAS,KAAK,EAAE,IAAI,CAAC,KAAK;oBAExB,4DAAK,KAAK,EAAC,2BAA2B;wBACpC,6EACE,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU;4BAE1B,8DAAa;4BACb,6DAAM,IAAI,EAAC,aAAa;gCACtB,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACpB,CACc,CACnB;oBAGN,4DAAK,KAAK,EAAC,qCAAqC;wBAC9C,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,CACE,CACN,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Illustrated Card molecule component that combines a card with an illustration.\n * \n * Uses a theme background with text at top and an illustration from\n * @affinda/illustrations at the bottom.\n * \n * Uses af-card atom internally and af-typography-lockup for text hierarchy.\n * \n * @slot - Heading text content\n * @slot body - Description/body text content\n * @slot illustration - Illustration image element\n */\n@Component({\n  tag: 'af-illustrated-card',\n  styleUrl: 'af-illustrated-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIllustratedCard {\n  /**\n   * Theme variant - sets background color and provides theme context.\n   * Defaults to 'mist-green'.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * Responsive breakpoint for typography sizing.\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Card size variant (applies to desktop only).\n   */\n  @Prop() cardSize: 'default' | 'large' = 'default';\n\n  render() {\n    const wrapperClasses = {\n      'illustrated-card': true,\n      [`illustrated-card--breakpoint-${this.breakpoint}`]: true,\n      [`illustrated-card--size-${this.cardSize}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          <af-card theme={this.theme}>\n            {/* Content area with typography lockup */}\n            <div class=\"illustrated-card__content\">\n              <af-typography-lockup\n                headingSize={3}\n                breakpoint={this.breakpoint}\n                textAlignment=\"left\"\n                buttonAlignment=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n\n            {/* Illustration area at bottom */}\n            <div class=\"illustrated-card__illustration-area\">\n              <slot name=\"illustration\"></slot>\n            </div>\n          </af-card>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-illustrated-card.js","sourceRoot":"","sources":["../../../src/components/af-illustrated-card/af-illustrated-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;;GAYG;AAOH,MAAM,OAAO,iBAAiB;IAN9B;QAOE;;;WAGG;QACK,UAAK,GAAsE,YAAY,CAAC;QAEhG;;WAEG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;WAEG;QACK,aAAQ,GAAwB,SAAS,CAAC;KAwCnD;IAtCC,MAAM;QACJ,MAAM,cAAc,GAAG;YACrB,kBAAkB,EAAE,IAAI;YACxB,CAAC,gCAAgC,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;YACzD,CAAC,0BAA0B,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;SAClD,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,cAAc;gBACxB,gEAAS,KAAK,EAAE,IAAI,CAAC,KAAK;oBAExB,4DAAK,KAAK,EAAC,2BAA2B;wBACpC,6EACE,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAC,MAAM,EACpB,YAAY,EAAC,UAAU;4BAEvB,8DAAa;4BACb,6DAAM,IAAI,EAAC,aAAa;gCACtB,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACpB;4BACP,6DAAM,IAAI,EAAC,SAAS;gCAClB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACvB,CACc,CACnB;oBAGN,4DAAK,KAAK,EAAC,qCAAqC;wBAC9C,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,CACE,CACN,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Illustrated Card molecule component that combines a card with an illustration.\n *\n * Uses a theme background with text at top, a button row in the middle, and\n * an illustration from @affinda/illustrations at the bottom.\n *\n * Uses af-card atom internally and af-typography-lockup for text hierarchy.\n *\n * @slot - Heading text content\n * @slot body - Description/body text content\n * @slot buttons - Action buttons (rendered below the description, above the illustration)\n * @slot illustration - Illustration image element\n */\n@Component({\n  tag: 'af-illustrated-card',\n  styleUrl: 'af-illustrated-card.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIllustratedCard {\n  /**\n   * Theme variant - sets background color and provides theme context.\n   * Defaults to 'mist-green'.\n   */\n  @Prop() theme?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay' = 'mist-green';\n\n  /**\n   * Responsive breakpoint for typography sizing.\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Card size variant (applies to desktop only).\n   */\n  @Prop() cardSize: 'default' | 'large' = 'default';\n\n  render() {\n    const wrapperClasses = {\n      'illustrated-card': true,\n      [`illustrated-card--breakpoint-${this.breakpoint}`]: true,\n      [`illustrated-card--size-${this.cardSize}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          <af-card theme={this.theme}>\n            {/* Content area with typography lockup */}\n            <div class=\"illustrated-card__content\">\n              <af-typography-lockup\n                headingSize={3}\n                breakpoint={this.breakpoint}\n                textAlignment=\"left\"\n                buttonLayout=\"vertical\"\n              >\n                <slot></slot>\n                <span slot=\"description\">\n                  <slot name=\"body\"></slot>\n                </span>\n                <span slot=\"buttons\">\n                  <slot name=\"buttons\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n\n            {/* Illustration area at bottom */}\n            <div class=\"illustrated-card__illustration-area\">\n              <slot name=\"illustration\"></slot>\n            </div>\n          </af-card>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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: '96f56008e769e15ec20399b2911563a7be1561b9' }, h("div", { key: 'a4b7eb695f4a7074e657f5cfb947a472f3bf9ae9', class: "image-container" }, h("img", { key: 'fcd9e6ca93ea345cf7a94a895b5161c79c9fe776', src: this.src, alt: this.alt, class: "image" }), h("div", { key: 'cee231a0d19312cc4659da8707d3e31955dcad18', class: "image-border", "aria-hidden": "true" }))));
+        return (h(Host, { key: 'a8954272f3c0defc0b9e33d5f3221c6e1083d927' }, h("div", { key: '2fd3bad5b46360cac57d069031ec2f69103f6542', class: `image-container image-container--${this.shape}` }, h("img", { key: '72a11cde6b65481320d8b6a1d65e85862d4a449e', src: this.src, alt: this.alt, class: "image" }), h("div", { key: '7727e1ac4179e96f8c8928de678136337bd82f44', 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-image/af-image.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-image.js","sourceRoot":"","sources":["../../../src/components/af-image/af-image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAOH,MAAM,OAAO,OAAO;IAWlB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,4DAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,OAAO,GAAG;gBACnD,4DAAK,KAAK,EAAC,cAAc,iBAAa,MAAM,GAAO,CAC/C,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A styled image container with rounded corners and a subtle inset border.\n * Provides consistent image styling across the design system.\n */\n@Component({\n  tag: 'af-image',\n  styleUrl: 'af-image.css',\n  shadow: false,\n  scoped: true\n})\nexport class AfImage {\n  /**\n   * The image source URL\n   */\n  @Prop() src!: string;\n\n  /**\n   * Alternative text for the image (required for accessibility)\n   */\n  @Prop() alt!: string;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"image-container\">\n          <img src={this.src} alt={this.alt} class=\"image\" />\n          <div class=\"image-border\" aria-hidden=\"true\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"af-image.js","sourceRoot":"","sources":["../../../src/components/af-image/af-image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAOH,MAAM,OAAO,OAAO;IANpB;QAiBE;;;;;;;;WAQG;QACK,UAAK,GAA4D,SAAS,CAAC;KAYpF;IAVC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,oCAAoC,IAAI,CAAC,KAAK,EAAE;gBAC1D,4DAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,OAAO,GAAG;gBACnD,4DAAK,KAAK,EAAC,cAAc,iBAAa,MAAM,GAAO,CAC/C,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A styled image container with rounded corners and a subtle inset border.\n * Provides consistent image styling across the design system.\n */\n@Component({\n  tag: 'af-image',\n  styleUrl: 'af-image.css',\n  shadow: false,\n  scoped: true\n})\nexport class AfImage {\n  /**\n   * The image source URL\n   */\n  @Prop() src!: string;\n\n  /**\n   * Alternative text for the image (required for accessibility)\n   */\n  @Prop() alt!: string;\n\n  /**\n   * Shape / corner rounding variant. Matches Webflow's `.image-fill.rounded-*`\n   * patterns where only one edge is rounded so the image bleeds into a\n   * neighbouring section.\n   * - `rounded` (default) — symmetric rounded corners on all four sides.\n   * - `rounded-left` — rounded only on the left edge (top-left + bottom-left).\n   * - `rounded-right` — rounded only on the right edge.\n   * - `square` — no corner rounding.\n   */\n  @Prop() shape: 'rounded' | 'rounded-left' | 'rounded-right' | 'square' = 'rounded';\n\n  render() {\n    return (\n      <Host>\n        <div class={`image-container image-container--${this.shape}`}>\n          <img src={this.src} alt={this.alt} class=\"image\" />\n          <div class=\"image-border\" aria-hidden=\"true\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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;
 }
 
 /* ==========================================================================

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: '382549642707642ba3182f7bf4391e3254a6cf8e' }, h("div", { key: '0d144e64a93e5222c426d0b9d0379a1318538972', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), h("div", { key: 'f82845be709ec7e98b84dd5e65f5eb67473c13bb', class: "banner__illustration" }, this.illustrationUrl ? (h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (h("slot", { name: "illustration" }))), h("div", { key: '73c35ca159f9588ac8fb9c8941ec43ea5ffa0b7a', class: "banner__content" }, h("div", { key: '5cab358c648677515bb9bf8f8594d2e37c43af89', class: "banner__copy" }, this.heading && (h("h2", { key: 'f0bbe316c200bbf7e6a5406f3e089c0a839e7709', class: "banner__heading" }, this.heading)), this.description && (h("p", { key: 'c6a0f293b2eb35489ed97d32ed162791a9087a2d', class: "banner__description" }, this.description))), (this.primaryButtonText || this.secondaryButtonText) && (h("div", { key: '87cff6182bb7de438ba7393ae308aaf0fba09814', class: "banner__buttons" }, this.primaryButtonText && (h("af-button", { key: 'b3f3c97a10e8571fbbf9ebd20c6773303dc90b18', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (h("af-button", { key: 'efae95eebae4dc6401bff0c1219c376f7c7d73a5', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
+        return (h(Host, { key: 'df17b8226e06ca501e361e95e3628429f1bc7406' }, h("div", { key: '7479312bfb457b3629867cb0f6ef87e3e400db14', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), h("div", { key: '4d0526f4a6255ecc99daf64081244b9ea51a3e8e', class: "banner__illustration" }, this.illustrationUrl ? (h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (h("slot", { name: "illustration" }))), h("div", { key: 'ba30cb833bbd77e4d0c752b381be3c869a1864e8', class: "banner__content" }, h("div", { key: '43430d9e4d84cd2afd3ab7d535bf5317bf8d9a69', class: "banner__copy" }, h("h2", { key: '3d1db708a56ebc55588903150cf8fd894588fefe', class: "banner__heading" }, h("slot", { key: '51e7a8a9a2259cf2f51ea9bc4a0c7a95d380f15a', name: "heading" }, this.heading)), h("div", { key: 'f6703cfa2724c96bca7bbf774ffac6638e6e339a', class: "banner__description" }, h("slot", { key: '6aa35a37f990f0b1a9cdf857f01019e722d73dc9', name: "description" }, this.description))), h("div", { key: '2696fc3bdf45b93aea64a0d216b9853a071c445e', class: "banner__buttons" }, h("slot", { key: '10356f63627f521666a49f325bb0ee27079f12b5', name: "buttons" }, this.primaryButtonText && (h("af-button", { key: 'af09d02a42cc4da47d65dbcef9adf9cc1ffb731c', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (h("af-button", { key: '50c10b87f15c91b1fb9ba71cf95ed78d316e0395', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
     }
     static get is() { return "af-in-page-banner"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1 +1 @@
-{"version":3,"file":"af-in-page-banner.js","sourceRoot":"","sources":["../../../src/components/af-in-page-banner/af-in-page-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAOH,MAAM,OAAO,cAAc;IAN3B;QAOE,qEAAqE;QAC7D,UAAK,GAAgB,YAAY,CAAC;QAE1C,qBAAqB;QACb,YAAO,GAAW,EAAE,CAAC;QAE7B,yBAAyB;QACjB,gBAAW,GAAW,EAAE,CAAC;QAEjC,0BAA0B;QAClB,sBAAiB,GAAW,EAAE,CAAC;QAEvC,yBAAyB;QACjB,qBAAgB,GAAW,GAAG,CAAC;QAEvC,qEAAqE;QAC7D,wBAAmB,GAAW,EAAE,CAAC;QAEzC,2BAA2B;QACnB,uBAAkB,GAAW,GAAG,CAAC;QAEzC;;;WAGG;QACK,oBAAe,GAAW,EAAE,CAAC;QAErC,kDAAkD;QAC1C,uBAAkB,GAAY,IAAI,CAAC;KAmF5C;IAjFC;;;;OAIG;IACK,iBAAiB;QACvB,OAAO,CACL,WAAK,KAAK,EAAC,sBAAsB,iBAAa,MAAM;YAClD,WACE,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,kBAAkB;gBAExB,YACE,CAAC,EAAC,ilBAAilB,EACnlB,IAAI,EAAC,cAAc,GACnB,CACE,CACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE;gBAErC,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,iBAAiB,EAAE;gBAGpD,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CACtB,WACE,GAAG,EAAE,IAAI,CAAC,eAAe,EACzB,GAAG,EAAC,EAAE,EACN,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAC,MAAM,GACd,CACH,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,CACG;gBAGN,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,4DAAK,KAAK,EAAC,cAAc;wBACtB,IAAI,CAAC,OAAO,IAAI,CACf,2DAAI,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,OAAO,CAAM,CAChD;wBACA,IAAI,CAAC,WAAW,IAAI,CACnB,0DAAG,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,WAAW,CAAK,CACtD,CACG;oBAGL,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,mBAAmB,CAAC,IAAI,CACvD,4DAAK,KAAK,EAAC,iBAAiB;wBACzB,IAAI,CAAC,iBAAiB,IAAI,CACzB,kEACE,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAC3B,OAAO,EAAC,SAAS,IAEhB,IAAI,CAAC,iBAAiB,CACb,CACb;wBACA,IAAI,CAAC,mBAAmB,IAAI,CAC3B,kEACE,IAAI,EAAE,IAAI,CAAC,kBAAkB,EAC7B,OAAO,EAAC,WAAW,IAElB,IAAI,CAAC,mBAAmB,CACf,CACb,CACG,CACP,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\ntype BannerTheme = 'white-ivory' | 'mist-green' | 'soft-clay' | 'inkwell';\n\n/**\n * In-page banner component for call-to-action content.\n * \n * A banner card with illustration, heading, description, and action buttons.\n * Typically placed inside a neutral (white) Section to show off its themed background.\n * \n * The component has its own theme prop to control its background color and styling.\n * \n * **Illustration Usage:**\n * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,\n * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:\n * \n * ```tsx\n * import { getIllustrationUrlByScene } from '@affinda/illustrations';\n * \n * <InPageBanner\n *   theme=\"inkwell\"\n *   illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}\n *   ...\n * />\n * ```\n * \n * Alternatively, use the `illustration` slot for completely custom content.\n */\n@Component({\n  tag: 'af-in-page-banner',\n  styleUrl: 'af-in-page-banner.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfInPageBanner {\n  /** Theme - sets the banner background color and typography colors */\n  @Prop() theme: BannerTheme = 'mist-green';\n\n  /** Banner heading */\n  @Prop() heading: string = '';\n\n  /** Banner description */\n  @Prop() description: string = '';\n\n  /** Primary button text */\n  @Prop() primaryButtonText: string = '';\n\n  /** Primary button URL */\n  @Prop() primaryButtonUrl: string = '#';\n\n  /** Secondary button text (optional - if empty, button won't show) */\n  @Prop() secondaryButtonText: string = '';\n\n  /** Secondary button URL */\n  @Prop() secondaryButtonUrl: string = '#';\n\n  /** \n   * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene() \n   * from @affinda/illustrations in your app code.\n   */\n  @Prop() illustrationUrl: string = '';\n\n  /** Whether to show the decorative wave overlay */\n  @Prop() showWaveDecoration: boolean = true;\n\n  /**\n   * Renders the decorative wave SVG overlay.\n   * Uses the Affinda brand \"infinity loop\" wave pattern.\n   * Fill color is controlled via CSS custom properties per theme.\n   */\n  private renderWaveOverlay() {\n    return (\n      <div class=\"banner__wave-overlay\" aria-hidden=\"true\">\n        <svg \n          viewBox=\"0 0 521 323\" \n          fill=\"none\" \n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"banner__wave-svg\"\n        >\n          <path \n            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\" \n            fill=\"currentColor\"\n          />\n        </svg>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={`banner theme-${this.theme}`}>\n          {/* Decorative wave overlay */}\n          {this.showWaveDecoration && this.renderWaveOverlay()}\n\n          {/* Illustration area */}\n          <div class=\"banner__illustration\">\n            {this.illustrationUrl ? (\n              <img \n                src={this.illustrationUrl} \n                alt=\"\" \n                class=\"banner__illustration-img\" \n                loading=\"lazy\"\n              />\n            ) : (\n              <slot name=\"illustration\"></slot>\n            )}\n          </div>\n\n          {/* Content area with typography lockup */}\n          <div class=\"banner__content\">\n            <div class=\"banner__copy\">\n              {this.heading && (\n                <h2 class=\"banner__heading\">{this.heading}</h2>\n              )}\n              {this.description && (\n                <p class=\"banner__description\">{this.description}</p>\n              )}\n            </div>\n\n            {/* Button group */}\n            {(this.primaryButtonText || this.secondaryButtonText) && (\n              <div class=\"banner__buttons\">\n                {this.primaryButtonText && (\n                  <af-button \n                    href={this.primaryButtonUrl}\n                    variant=\"primary\"\n                  >\n                    {this.primaryButtonText}\n                  </af-button>\n                )}\n                {this.secondaryButtonText && (\n                  <af-button \n                    href={this.secondaryButtonUrl}\n                    variant=\"secondary\"\n                  >\n                    {this.secondaryButtonText}\n                  </af-button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-in-page-banner.js","sourceRoot":"","sources":["../../../src/components/af-in-page-banner/af-in-page-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAOH,MAAM,OAAO,cAAc;IAN3B;QAOE,qEAAqE;QAC7D,UAAK,GAAgB,YAAY,CAAC;QAE1C,qBAAqB;QACb,YAAO,GAAW,EAAE,CAAC;QAE7B,yBAAyB;QACjB,gBAAW,GAAW,EAAE,CAAC;QAEjC,0BAA0B;QAClB,sBAAiB,GAAW,EAAE,CAAC;QAEvC,yBAAyB;QACjB,qBAAgB,GAAW,GAAG,CAAC;QAEvC,qEAAqE;QAC7D,wBAAmB,GAAW,EAAE,CAAC;QAEzC,2BAA2B;QACnB,uBAAkB,GAAW,GAAG,CAAC;QAEzC;;;WAGG;QACK,oBAAe,GAAW,EAAE,CAAC;QAErC,kDAAkD;QAC1C,uBAAkB,GAAY,IAAI,CAAC;KA4E5C;IA1EC;;;;OAIG;IACK,iBAAiB;QACvB,OAAO,CACL,WAAK,KAAK,EAAC,sBAAsB,iBAAa,MAAM;YAClD,WACE,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,kBAAkB;gBAExB,YACE,CAAC,EAAC,ilBAAilB,EACnlB,IAAI,EAAC,cAAc,GACnB,CACE,CACF,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,EAAE;gBAErC,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,iBAAiB,EAAE;gBAGpD,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CACtB,WACE,GAAG,EAAE,IAAI,CAAC,eAAe,EACzB,GAAG,EAAC,EAAE,EACN,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAC,MAAM,GACd,CACH,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,CACG;gBAGN,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,4DAAK,KAAK,EAAC,cAAc;wBACvB,2DAAI,KAAK,EAAC,iBAAiB;4BACzB,6DAAM,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ,CACvC;wBACL,4DAAK,KAAK,EAAC,qBAAqB;4BAC9B,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACF;oBAEN,4DAAK,KAAK,EAAC,iBAAiB;wBAC1B,6DAAM,IAAI,EAAC,SAAS;4BACjB,IAAI,CAAC,iBAAiB,IAAI,CACzB,kEAAW,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAC,SAAS,IACtD,IAAI,CAAC,iBAAiB,CACb,CACb;4BACA,IAAI,CAAC,mBAAmB,IAAI,CAC3B,kEAAW,IAAI,EAAE,IAAI,CAAC,kBAAkB,EAAE,OAAO,EAAC,WAAW,IAC1D,IAAI,CAAC,mBAAmB,CACf,CACb,CACI,CACH,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\ntype BannerTheme = 'white-ivory' | 'mist-green' | 'soft-clay' | 'inkwell';\n\n/**\n * In-page banner component for call-to-action content.\n * \n * A banner card with illustration, heading, description, and action buttons.\n * Typically placed inside a neutral (white) Section to show off its themed background.\n * \n * The component has its own theme prop to control its background color and styling.\n * \n * **Illustration Usage:**\n * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,\n * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:\n * \n * ```tsx\n * import { getIllustrationUrlByScene } from '@affinda/illustrations';\n * \n * <InPageBanner\n *   theme=\"inkwell\"\n *   illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}\n *   ...\n * />\n * ```\n * \n * Alternatively, use the `illustration` slot for completely custom content.\n *\n * **Slot-based composition (preferred for rich content):**\n * - `heading` — heading markup (overrides the `heading` prop when provided).\n * - `description` — description markup (overrides the `description` prop).\n * - `buttons` — custom button group (overrides the primary/secondary button\n *   props; use when you need ghost variants, more than two buttons, or\n *   per-button icons).\n * - `illustration` — custom illustration markup.\n *\n * The string props remain supported for simple cases.\n */\n@Component({\n  tag: 'af-in-page-banner',\n  styleUrl: 'af-in-page-banner.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfInPageBanner {\n  /** Theme - sets the banner background color and typography colors */\n  @Prop() theme: BannerTheme = 'mist-green';\n\n  /** Banner heading */\n  @Prop() heading: string = '';\n\n  /** Banner description */\n  @Prop() description: string = '';\n\n  /** Primary button text */\n  @Prop() primaryButtonText: string = '';\n\n  /** Primary button URL */\n  @Prop() primaryButtonUrl: string = '#';\n\n  /** Secondary button text (optional - if empty, button won't show) */\n  @Prop() secondaryButtonText: string = '';\n\n  /** Secondary button URL */\n  @Prop() secondaryButtonUrl: string = '#';\n\n  /** \n   * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene() \n   * from @affinda/illustrations in your app code.\n   */\n  @Prop() illustrationUrl: string = '';\n\n  /** Whether to show the decorative wave overlay */\n  @Prop() showWaveDecoration: boolean = true;\n\n  /**\n   * Renders the decorative wave SVG overlay.\n   * Uses the Affinda brand \"infinity loop\" wave pattern.\n   * Fill color is controlled via CSS custom properties per theme.\n   */\n  private renderWaveOverlay() {\n    return (\n      <div class=\"banner__wave-overlay\" aria-hidden=\"true\">\n        <svg \n          viewBox=\"0 0 521 323\" \n          fill=\"none\" \n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"banner__wave-svg\"\n        >\n          <path \n            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\" \n            fill=\"currentColor\"\n          />\n        </svg>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={`banner theme-${this.theme}`}>\n          {/* Decorative wave overlay */}\n          {this.showWaveDecoration && this.renderWaveOverlay()}\n\n          {/* Illustration area */}\n          <div class=\"banner__illustration\">\n            {this.illustrationUrl ? (\n              <img \n                src={this.illustrationUrl} \n                alt=\"\" \n                class=\"banner__illustration-img\" \n                loading=\"lazy\"\n              />\n            ) : (\n              <slot name=\"illustration\"></slot>\n            )}\n          </div>\n\n          {/* Content area — slots take precedence over string props. */}\n          <div class=\"banner__content\">\n            <div class=\"banner__copy\">\n              <h2 class=\"banner__heading\">\n                <slot name=\"heading\">{this.heading}</slot>\n              </h2>\n              <div class=\"banner__description\">\n                <slot name=\"description\">{this.description}</slot>\n              </div>\n            </div>\n\n            <div class=\"banner__buttons\">\n              <slot name=\"buttons\">\n                {this.primaryButtonText && (\n                  <af-button href={this.primaryButtonUrl} variant=\"primary\">\n                    {this.primaryButtonText}\n                  </af-button>\n                )}\n                {this.secondaryButtonText && (\n                  <af-button href={this.secondaryButtonUrl} variant=\"secondary\">\n                    {this.secondaryButtonText}\n                  </af-button>\n                )}\n              </slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -49,7 +49,7 @@ export class AfInline {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (h(Host, { key: '947a3a94d5b8f5d1a60132d690523ae8e842b542', style: style }, h("slot", { key: '7b60eb9cf33eeaf6a0002fc70ad664adaecaad8e' })));
+        return (h(Host, { key: '9f117e218b0855ddcd6417f037a7c31331bee4da', style: style }, h("slot", { key: '63fb41532a47018cebb4c7518c4dd6891d4ca4c4' })));
     }
     static get is() { return "af-inline"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/af-logo-well/af-logo-well.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class AfLogoWell {
     render() {
-        return (h(Host, { key: '88b751702096b45e12c8d9394e69b6a0abd2122b' }, h("div", { key: '3bbdff4a72c4491b8a75359d18d0609f22811696', class: "logo-well" }, h("slot", { key: '6173141ef408944cd4e2b87e6cb40096a1ba3c08' }))));
+        return (h(Host, { key: '3dce73db40979d85f0ec5f467baf049e3582d8e2' }, h("div", { key: '7c788d3abb3ad7b1f6835d4561c3389dda007ffa', class: "logo-well" }, h("slot", { key: 'fa27e27c2c6204256582143b8dd00c8de5f73501' }))));
     }
     static get is() { return "af-logo-well"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,7 @@ export class AfNavAccordion {
         this.syncItems();
     }
     render() {
-        return (h(Host, { key: '891409dbe4cbb089085aa5b942c5f3c9f4a9bfe5', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: 'b52051c0d7df92a5bc34400b55156fb638acbccc', class: "nav-accordion" }, h("slot", { key: '86cbd9894e0c8bb44d8001a53df01822b8806542' }))));
+        return (h(Host, { key: 'e60e0f40da03dce1a766a880f1f3649dd957b63e', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: 'e80e79b012c3060a9fdfcec22af050eb5d063648', class: "nav-accordion" }, h("slot", { key: '234d41321e32046d3d439a93a544c0325b0a02a8' }))));
     }
     static get is() { return "af-nav-accordion"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-nav-accordion-item/af-nav-accordion-item.js

@@ -70,11 +70,11 @@ export class AfNavAccordionItem {
             maxHeight: this.open ? `${this.contentHeight}px` : '0px'
         };
         const hasDropdownContent = true; // Assume content is always present for accordion items
-        return (h(Host, { key: 'c60d17b2939f91ff7224f4eb156ed90645288c3c', class: {
+        return (h(Host, { key: 'd49052a96375fc60a127d79804bba1cd877b685e', class: {
                 'is-open': this.open,
                 'is-disabled': this.disabled,
                 [`breakpoint-${this.breakpoint}`]: true
-            } }, h("div", { key: '8fc7a72d88e6ab275ec9828098cc3aa70e2dcf58', class: "nav-accordion-item" }, this.href ? (h("a", { href: this.href, class: "trigger", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}` }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("button", { class: "chevron-button", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }, "aria-label": this.open ? 'Collapse' : 'Expand', type: "button" }, h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))) : (h("button", { class: "trigger", onClick: this.handleTriggerClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: '4fb193591c092154364f98e0a1677c2dfee9cad9', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: '1aa3437d93630a60dbce5163cdd1ceae1d234213', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '2eea67c87eaccd58d180ec89ffae7f58785fb5c4' }))))));
+            } }, h("div", { key: '27952550ddbdf2845dd47bf6296b28fe00fb0fd8', class: "nav-accordion-item" }, this.href ? (h("a", { href: this.href, class: "trigger", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}` }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("button", { class: "chevron-button", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }, "aria-label": this.open ? 'Collapse' : 'Expand', type: "button" }, h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))) : (h("button", { class: "trigger", onClick: this.handleTriggerClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), h("div", { key: '23c11867d6785d99a35dd8ae11d0e7c68834dfaf', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: '32d610386e0f19c8537ccd0a86531ce25aa45900', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: 'd688b430d066fcb276af15712593df3c0fcd0ecd' }))))));
     }
     static get is() { return "af-nav-accordion-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-nav-menu/af-nav-menu.js

@@ -30,7 +30,7 @@ export class AfNavMenu {
             'has-border': this.showBorder,
             'card-style': this.cardStyle
         };
-        return (h(Host, { key: '69414bf6a279bc971298e6f34a1b5c10ff499e93' }, h("div", { key: '5e800df5526d2b1c9de99c07bbbaae59c9b91594', class: classes }, this.heading && (h("div", { key: '13aee43c9f59c1a093eee10a191ff4571421a16f', class: "menu-header" }, h("h3", { key: '343ddced9ae2bd41b643e548ebf82d6601197e8b', class: "menu-heading" }, this.heading))), h("div", { key: '9827130b9385f200d8a6b85f89ff0a3722acb1ee', class: "menu-items" }, h("slot", { key: 'ba0e065fba624bd7d850f7e99fd88f572b008d3d' })))));
+        return (h(Host, { key: 'b77aa8f55e2148e3a21dea9009ccc9f345ad5da1' }, h("div", { key: '0ef8c2202f6ba4925bf16a2e448dec67f65b1bd6', class: classes }, this.heading && (h("div", { key: '6164df7a1a6efe8afb57860d20175fa5ecabf39c', class: "menu-header" }, h("h3", { key: 'a517c7e3039424974c111dc8bf085b9bb57ce833', class: "menu-heading" }, this.heading))), h("div", { key: '18389d1f29886f2d832744bf1cadc449c8e96948', class: "menu-items" }, h("slot", { key: '40c5ffc54a5c1eedd8e07fbecd040070f1b16d97' })))));
     }
     static get is() { return "af-nav-menu"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-nav-menu-nest/af-nav-menu-nest.js

@@ -48,7 +48,7 @@ export class AfNavMenuNest {
             [`type-${this.type}`]: true,
             [`breakpoint-${this.breakpoint}`]: true
         };
-        return (h(Host, { key: '3b620840709c0494cc1bb11c1881824550b18611' }, h("div", { key: '7291119d7c8cebea30375f4c301885290413b4b4', class: classes }, h("div", { key: '270b6882e07b3b44bb3b4a0cd9c6b7b063faffa4', class: "menu-columns" }, h("slot", { key: 'f82540660813779579dfc1ba76bbc0e892cfae15' })), h("div", { key: 'e27257bae1cc4bd458c5f19a29d4bbaee41f5a5a', class: "menu-sidebar" }, h("slot", { key: '23e7fe51b7c1094edf89faca812e29bd74044381', name: "sidebar" })))));
+        return (h(Host, { key: '90fbee205d076ffd9884122101a2f337088d6cd6' }, h("div", { key: '49e9b2290833f5200119d2cac7d4381e74eddbec', class: classes }, h("div", { key: '148790bd4481d662149913a6b53e248c4ff49f95', class: "menu-columns" }, h("slot", { key: '7790aa268c060cc8253bab3dc08c9de0819eb39a' })), h("div", { key: '393ed046ddcd717e4d1dd8a2e9df0332f1612238', class: "menu-sidebar" }, h("slot", { key: 'cb61c9744b070aaf2bcbbbf2b402664e41e2866c', name: "sidebar" })))));
     }
     static get is() { return "af-nav-menu-nest"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-number-badge/af-number-badge.js

@@ -34,7 +34,7 @@ export class AfNumberBadge {
             height: `${this.size}px`,
             fontSize: `${fontSize}px`,
         };
-        return (h(Host, { key: 'f8c10410f86461a7c91c7a4ec581df66378a0064', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: 'd84893da541132b58c86575aeec8975b3d583e92', class: {
+        return (h(Host, { key: '6d275b5b5e029c0d34508dca9cd674cfcc686130', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: 'd158b8c0139ac46b892170859ae0d0c43ec2eb9a', class: {
                 'badge': true,
                 [`variant-${this.variant}`]: true,
             }, style: badgeStyle }, this.number)));
@@ -62,7 +62,7 @@ export class AfNumberBadge {
                     "references": {
                         "NumberBadgeNumber": {
                             "location": "local",
-                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-number-badge/af-number-badge.tsx",
+                            "path": "/home/andrew/affinda-ui/packages/wc/src/components/af-number-badge/af-number-badge.tsx",
                             "id": "src/components/af-number-badge/af-number-badge.tsx::NumberBadgeNumber"
                         }
                     }
@@ -88,7 +88,7 @@ export class AfNumberBadge {
                     "references": {
                         "NumberBadgeVariant": {
                             "location": "local",
-                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-number-badge/af-number-badge.tsx",
+                            "path": "/home/andrew/affinda-ui/packages/wc/src/components/af-number-badge/af-number-badge.tsx",
                             "id": "src/components/af-number-badge/af-number-badge.tsx::NumberBadgeVariant"
                         }
                     }