@affinda/wc 0.5.0 → 0.6.1

package/dist/cjs/af-contact-item.cjs.entry.js

@@ -13,7 +13,7 @@ const AfContactItem = class {
         this.value = '';
     }
     render() {
-        return (index.h(index.Host, { key: '01276444ebe5b9da51f83a98cfe10a6367e5ad46' }, index.h("div", { key: '0438970f2162d814615441a1a5252d095f4407d9', class: "contact-item" }, this.label && (index.h("h5", { key: 'a55d0172d834a6c3681493223a6d86b2e2ea809b', class: "contact-item__label" }, this.label)), this.value && (index.h("p", { key: '60942e88db4782a2b45e627bf5914edf476e8383', class: "contact-item__value" }, this.value)), index.h("slot", { key: '8d1946d2e59875a728116615b6c36c335c07ef1d' }))));
+        return (index.h(index.Host, { key: '2893556bc677a8897d47874fd033e5c1bb04779d' }, index.h("div", { key: '94f6c309c6d624ce3682af895cc9fbfdb0a6b53d', class: "contact-item" }, this.label && (index.h("h5", { key: '26940fbcd567d9e0261fb62782fa9707ac1e3d61', class: "contact-item__label" }, this.label)), this.value && (index.h("p", { key: '9bbc554da519bfd25d50d7a5e23dfbff1ca5bc59', class: "contact-item__value" }, this.value)), index.h("slot", { key: 'da7c5af2d1346ef6d9a2d2266138c49b9dbd93cc' }))));
     }
 };
 AfContactItem.style = afContactItemCss;

package/dist/cjs/af-divider.cjs.entry.js

@@ -30,7 +30,7 @@ const AfDivider = class {
                 marginTop: spacingValue,
                 marginBottom: spacingValue,
             };
-        return (index.h(index.Host, { key: 'e16f893940bf9efb8071bf0f94c735f40db3f595', class: {
+        return (index.h(index.Host, { key: 'ac8090274a8306a9882b32bb3d5e16a591b86f2f', class: {
                 'divider': true,
                 'divider--horizontal': !isVertical,
                 'divider--vertical': isVertical,

package/dist/cjs/af-feature-accordion.cjs.entry.js

@@ -89,13 +89,13 @@ const AfFeatureAccordion = class {
     render() {
         const items = this.getItems();
         const currentItem = items[this.expandedIndex];
-        return (index.h(index.Host, { key: 'cbda1aa6283e411b91bdf3f4f37666289d39e7f8' }, index.h("div", { key: '03f8ae153afe79ee6d47494bb34888158121b16d', class: "feature-accordion" }, index.h("div", { key: '42470c0256313498a9276dfeeea205664251e09a', class: "feature-accordion__container" }, index.h("h2", { key: 'a2135b43755e083ab9b71a1fedba49aa8299cbd2', class: "feature-accordion__heading" }, this.heading), index.h("div", { key: '39724513a630bce185d4e82fb189bd7902214947', class: "feature-accordion__content" }, index.h("div", { key: 'da9769e9a6708f804d5033ca9dfa3d6a3a2040dc', class: "feature-accordion__list" }, items.map((item, index$1) => (index.h("div", { class: {
+        return (index.h(index.Host, { key: '595e09ae8153ade7a4fa676eb6f286fc4fec5efe' }, index.h("div", { key: 'ee35766aa1e9300b4826576913bb7c84ede6a1e7', class: "feature-accordion" }, index.h("div", { key: 'a12641497c3c3de7e975ebd0735998d4febefb5f', class: "feature-accordion__container" }, index.h("h2", { key: '42bb968907b3f2745f0ca8f2b40ccfb0e085dad5', class: "feature-accordion__heading" }, this.heading), index.h("div", { key: 'b70e9007418de1a53cf3f77b4e5477b63d0a11f1', class: "feature-accordion__content" }, index.h("div", { key: '3fdfbc954daa9d02efb1cdb4ea9d26caeba603c8', class: "feature-accordion__list" }, items.map((item, index$1) => (index.h("div", { class: {
                 'accordion-item': true,
                 'accordion-item--expanded': this.expandedIndex === index$1
             }, key: index$1 }, index.h("button", { class: "accordion-item__header", onClick: () => this.handleItemClick(index$1), "aria-expanded": this.expandedIndex === index$1 ? 'true' : 'false' }, index.h("h4", { class: "accordion-item__title" }, item.title), index.h("span", { class: "accordion-item__icon", "aria-hidden": "true" }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { class: "accordion-item__icon-bar", d: "M5 12H19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), index.h("path", { class: "accordion-item__icon-bar accordion-item__icon-bar--vert", d: "M12 5V19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), index.h("div", { class: "accordion-item__content", style: {
                 maxHeight: this.expandedIndex === index$1 ? '200px' : '0',
                 opacity: this.expandedIndex === index$1 ? '1' : '0'
-            } }, index.h("p", { class: "accordion-item__description" }, item.description), this.expandedIndex === index$1 && this.autoCycle && (index.h("div", { class: "accordion-item__timer-track" }, index.h("div", { class: "accordion-item__timer-progress", style: { width: `${this.timerProgress}%` } })))))))), index.h("div", { key: 'a7c2d6d629fe1504494a8dde13b0d79919d06da8', class: "feature-accordion__image-container" }, index.h("div", { key: '17de2e2c33a2d9e32a9770a79875af6e09362a85', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (index.h("img", { key: '66a387afb8aa256a935fb2cedb15ce9ab100b650', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (index.h("div", { key: 'e464726529873b054d307d24f358cd21138b160f', class: "feature-accordion__image-placeholder" }, index.h("slot", { key: 'fe8473b549e433cfc4808ee882cb5da753dfaaed', name: "image" }))))))))));
+            } }, index.h("p", { class: "accordion-item__description" }, item.description), this.expandedIndex === index$1 && this.autoCycle && (index.h("div", { class: "accordion-item__timer-track" }, index.h("div", { class: "accordion-item__timer-progress", style: { width: `${this.timerProgress}%` } })))))))), index.h("div", { key: '902712779f4ff2eaae179762a7b78ff1f0784d58', class: "feature-accordion__image-container" }, index.h("div", { key: 'b741cfaf96428e786e8780cfeff90a0c315716e8', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (index.h("img", { key: '2a565b530441c9953139b3c0517f480a81f0a77a', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (index.h("div", { key: 'f8248c73c5dcbd6b8224ad646ee867d34004437d', class: "feature-accordion__image-placeholder" }, index.h("slot", { key: '9cbe9ee773b0acd5a1b80fa4f6dd2f293152e598', name: "image" }))))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/af-feature-grid.cjs.entry.js

@@ -80,7 +80,7 @@ const AfFeatureGrid = class {
             [`feature-grid--mobile-${this.mobileLayout}`]: true,
         };
         const showProgressLine = this.mobileLayout === 'scroll';
-        return (index.h(index.Host, { key: 'baeaff34dab4980412fa0564570b43f0b03016ce' }, index.h("div", { key: 'bb7224b908aa8635a8c896adaeadabd9e3b2d0f3', class: gridClasses }, index.h("div", { key: 'd1fcd29989994376245c8f36be97660464ba8a19', class: "feature-grid__cards" }, index.h("slot", { key: '7244415488316bc6d84794935dd8e44470191ae3' })), showProgressLine && (index.h("div", { key: '7ec8c1209bf4fb3ddd81dd965d3a5009cc98f468', class: "feature-grid__progress" }, index.h("af-progress-line", { key: 'cb203f374c673930e6ab34ac54e4b2188d1b0b6e', progress: this.scrollProgress }))))));
+        return (index.h(index.Host, { key: '79843a96c9ee451709ed2dea2273fe5394c0f180' }, index.h("div", { key: '83f10509eddca556b5c1bc0c9188a3e23d7a1726', class: gridClasses }, index.h("div", { key: '794777d18ea5232a851ad86d7fe821d008e5f7ab', class: "feature-grid__cards" }, index.h("slot", { key: 'ea4b54b056f3d91a73e302adedcfde3ef21c7a4c' })), showProgressLine && (index.h("div", { key: 'ed2c80eed8b751d2a9e17bf1d1833f9fac7c681c', class: "feature-grid__progress" }, index.h("af-progress-line", { key: '51fabf03ae0944dda30980a711d7f0ffdf44226d', progress: this.scrollProgress }))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/af-footer-column.cjs.entry.js

@@ -11,7 +11,7 @@ const AfFooterColumn = class {
         this.heading = '';
     }
     render() {
-        return (index.h(index.Host, { key: '283526c985df996540e558a5591e5a167e5c4c9b' }, index.h("div", { key: '829fc317f3999dda3aadbb8cc68c3ce53485df12', class: "footer-column" }, this.heading && (index.h("h5", { key: '567141f08e21166642f7e9fea2d4becfaa9e2162', class: "footer-column__heading" }, this.heading)), index.h("ul", { key: 'b5b7cb63ffe3fed5d97edaa1264fab916980da8b', class: "footer-column__list" }, index.h("slot", { key: '4c9adcdfc3c25f42c325bc222f4b9761b82a0280' })))));
+        return (index.h(index.Host, { key: '67e4bf8e1e6c60f1d00bf1cb5c064bd33f68fba5' }, index.h("div", { key: '3a2dd16b71346ad2709b366e0c6de7762814748c', class: "footer-column" }, this.heading && (index.h("h5", { key: '0e05841a9711fb6a04a5f977bf1c7f653ec52649', class: "footer-column__heading" }, this.heading)), index.h("ul", { key: 'cb50c8d91046ec76a886854faf1ac33a8c0a1d7c', class: "footer-column__list" }, index.h("slot", { key: '167597388a2dbe99b8a331e77c2491872112e82d' })))));
     }
 };
 AfFooterColumn.style = afFooterColumnCss;

package/dist/cjs/af-footer-link.cjs.entry.js

@@ -13,7 +13,7 @@ const AfFooterLink = class {
         this.external = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'bbd1c9452688e637e2f042855b460c550a04ab7d' }, index.h("li", { key: '01c2e3ea98cb848935f587e7dd83a71735f9bacb' }, index.h("a", { key: '965d00d17484deade15cc8e502ad507e67443f8c', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, index.h("slot", { key: '4536f9279791c59a9d198454ed2bf4e60194d52e' }), this.external && (index.h("svg", { key: '5e7a04185d8643b164f4b35f95dba5f0312ce1f4', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, index.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" })))))));
+        return (index.h(index.Host, { key: 'e341043b7d2a33e6bad09755eef69f170c7b809a' }, index.h("li", { key: 'abd9188151d0d11b0b98ad28ec7263f68cf03ee9' }, index.h("a", { key: '8de2cdf51282334947408dc2d5f5b4060a94e73a', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, index.h("slot", { key: '3f2fd206e8b121afcd137de19e2ef7ce974ef16e' }), this.external && (index.h("svg", { key: '9e3075f004cfdee1dcf25be2a0437f841a2baeda', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, index.h("path", { key: '72d0f422c4ded4b4ff44107edd5afa99b30ff123', 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" })))))));
     }
 };
 AfFooterLink.style = afFooterLinkCss;

package/dist/cjs/af-footer.cjs.entry.js

@@ -19,7 +19,7 @@ const AfFooter = class {
         this.showStatus = true;
     }
     render() {
-        return (index.h(index.Host, { key: '861c5bfe1b522545870fe67192553a621f0928d1' }, index.h("footer", { key: '03c309b37ec977d65b36198fc8fcf549add90c43', class: "footer" }, index.h("div", { key: 'db23fd931863f40d95c51716fcdbb63855133db7', class: "footer__container" }, index.h("div", { key: 'eca38acbdc47474cc250b9a41528971676e95765', class: "footer__top" }, index.h("div", { key: '2cfd74ee3d56e0778ce6d10b83b75994d384fe10', class: "footer__brand" }, index.h("div", { key: '425f59ec107962c91b5fed5d989fe67bc8454cc5', class: "footer__brand-card" }, index.h("div", { key: '11d932a2f59e5467c40842b327c260f8d1c90837', class: "footer__logo" }, index.h("slot", { key: '02a8bee27310753862376d90cbdfc55012462520', name: "logo" })), index.h("div", { key: '1ee36e17b70b818f8ea44c06b9b3d2c22fafac96', class: "footer__social" }, index.h("slot", { key: '45ff0b3003ffb550ecf30274a2fc6535833d0686', name: "social" }))), index.h("div", { key: '34a16c80d4f6680034d84c61666b580acd3a9eea', class: "footer__contact-card" }, index.h("slot", { key: 'c3b40328bcc65add5293e5a38fd5747fdb83b0fc', name: "contact" }))), index.h("div", { key: '5654e1a39634ebb8f7ccda5325c46db5f6052fba', class: "footer__nav" }, index.h("div", { key: '42108b09428adac653c3f7c351bf2192695caf19', class: "footer__nav-columns" }, index.h("slot", { key: 'ceb76c14151308458646c8f446a29058caca824e', name: "nav" })), this.showStatus && (index.h("div", { key: 'b24841e909ca9fab2ed473770dda0266e4f8dcc1', class: "footer__status" }, index.h("span", { key: 'f7ae4e7a10da63020fe5a1ed6db747960a75649e', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), index.h("span", { key: 'b0073fedf76be2b079ce470112df2c13bed22224', class: "footer__status-text" }, this.statusText), this.statusUrl && (index.h("a", { key: '77f7e45dfa0ae32e8346500c3d00cbad277fe1a1', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), index.h("div", { key: 'f544acdee6fe1ee1841b4667034b3bc89b2f3669', class: "footer__bottom" }, this.copyrightText && (index.h("p", { key: '4d420e42a2abe1493a77e40e838d5644373d1c1f', class: "footer__copyright" }, this.copyrightText)), index.h("div", { key: '3fcff3a343acabb362675c15b30f489c3f2b6918', class: "footer__legal" }, index.h("slot", { key: '66f4b372a38bbee2f2db87ac554cafbb7f97f878', name: "legal" })), index.h("div", { key: '81c800496c83695e303f13f904e6662c3a9300c9', class: "footer__badges" }, index.h("slot", { key: '667b1c600f34fec004ecfd5b6879256aeaa36480', name: "badges" })))))));
+        return (index.h(index.Host, { key: '4e02a8e9b378b3f06aca47609b7d39757dc4434f' }, index.h("footer", { key: '41177e4981ae89efc453f4890545c970a949c1a0', class: "footer" }, index.h("div", { key: '8c0450ada99ec27533aae3d15876ec4ca59c4b28', class: "footer__container" }, index.h("div", { key: 'e3ede26f252e08d666829fb1be2accfe4860425b', class: "footer__top" }, index.h("div", { key: 'cd8cb407f6d88cc404892d7fb58fa05046b3d332', class: "footer__brand" }, index.h("div", { key: '7c62228d707d5b9befa08f3355af49074c9a91c1', class: "footer__brand-card" }, index.h("div", { key: 'f3fc48dff5c9fe2800b7b1fffb21cb521485fb86', class: "footer__logo" }, index.h("slot", { key: 'af62f8619641d28cd523e893d5228ef57a9c1983', name: "logo" })), index.h("div", { key: '216a0eb37fb07916188acddf1521c547dffb0903', class: "footer__social" }, index.h("slot", { key: 'a0ecbe24c06281a27717e6253d9a553b9059ec22', name: "social" }))), index.h("div", { key: 'c00ecaab696e3320d1d8081ebee10818b3225bf6', class: "footer__contact-card" }, index.h("slot", { key: 'b767fd999eefeaf80083a27cee564d968c325fc3', name: "contact" }))), index.h("div", { key: '601d75ff49fb125e5de89af0e97f32728e2d8a18', class: "footer__nav" }, index.h("div", { key: '2875b2b5b77ab9c109701e21db1eabf0067a7f05', class: "footer__nav-columns" }, index.h("slot", { key: 'bf069f0ef3483210014c44de263357b5efe0437a', name: "nav" })), this.showStatus && (index.h("div", { key: '2e74bf503b93c08f5fdcb053c4b1b6001272897f', class: "footer__status" }, index.h("span", { key: '5009a1ba220866f9946d2efbbca2823ea8a5c4f2', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), index.h("span", { key: 'a34fb1674659a7072a3890b0d5da6fd1d7255335', class: "footer__status-text" }, this.statusText), this.statusUrl && (index.h("a", { key: '5ee737874aea90717fd467d0dd2c2d63934d77c9', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), index.h("div", { key: 'ecbde350cdfd2f794ab6d23b776d2e6824e7e834', class: "footer__bottom" }, this.copyrightText && (index.h("p", { key: 'e4f08b9cfe7a60319736b09ba88671963f8a0f38', class: "footer__copyright" }, this.copyrightText)), index.h("div", { key: '9662a40dcb5766ef5b55b615e96e9be6ee8482ab', class: "footer__legal" }, index.h("slot", { key: '4b4413033e24b82e11bcaa573c2b38d3a4657e01', name: "legal" })), index.h("div", { key: '710e4692bbccf133eee78bce5a04c2da18096532', class: "footer__badges" }, index.h("slot", { key: '1c9907e32621b27638b4294708fbb71254a950bf', name: "badges" })))))));
     }
 };
 AfFooter.style = afFooterCss;

package/dist/cjs/af-grid.cjs.entry.js

@@ -28,14 +28,14 @@ const AfGrid = class {
             end: 'end',
             stretch: 'stretch',
         };
-        return (index.h(index.Host, { key: 'bb11b9a7bd4d800f5466f199789ca36ca699e82d', style: {
+        return (index.h(index.Host, { key: 'd8f5d8d0eb7a070892ed00bea3b6cacba55ebfd0', 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],
-            } }, index.h("div", { key: '02d1c73218c856deee3915f5c1c61c6e01380fe3', class: "grid" }, index.h("slot", { key: 'c4d54340438da4c9bc0f865e1e62c206b1cc4e3f' }))));
+            } }, index.h("div", { key: '11c90d93bb50c200faeab87ffaef287256609f4e', class: "grid" }, index.h("slot", { key: '4e468e5ce63b0550ae6f16694b7e0a5e26d8564f' }))));
     }
 };
 AfGrid.style = afGridCss;

package/dist/cjs/af-hero.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-BuJz1C1M.js');
 
-const afHeroCss = ".sc-af-hero-h{display:block;position:relative;width:100%;--af-hero-image-lift:-260px;--af-hero-image-min-height:360px}.hero__section.sc-af-hero{position:relative;overflow:hidden}.hero__paperclip.sc-af-hero{position:absolute;top:50%;right:0;transform:translateY(-50%);pointer-events:none;z-index:0;width:655px;height:754px}@media (max-width: 991px){.hero__paperclip.sc-af-hero{width:480px;height:552px}}@media (max-width: 767px){.hero__paperclip.sc-af-hero{display:none}}.hero__inner.sc-af-hero{position:relative;z-index:1;padding-bottom:40px}.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:124px}.hero--pad-loose.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:164px}.hero--inkwell-centered.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:180px}.hero__grid.sc-af-hero{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:center}.hero--soft-clay-illustration.sc-af-hero-h .hero__grid.sc-af-hero,.hero--mist-green-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr auto;gap:48px}.hero--inkwell-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr 1fr}.hero__copy.sc-af-hero{padding-left:16px}.hero--inkwell-photo.hero--pad-loose.sc-af-hero-h .hero__copy.sc-af-hero{padding-bottom:120px}.hero--inkwell-centered.sc-af-hero-h .hero__copy.sc-af-hero{padding-left:0;text-align:center}.hero__badge.sc-af-hero:not(:has(*)){display:none}.hero__badge.sc-af-hero:has(*){margin-bottom:16px}.hero__copy.sc-af-hero-s>[slot='badge'],.hero__copy .sc-af-hero-s>[slot='badge']{display:inline-block}.hero__buttons.sc-af-hero{margin-top:32px}.hero__buttons.sc-af-hero:empty{display:none}.hero--inkwell-centered.sc-af-hero-h .hero__buttons.sc-af-hero{display:flex;justify-content:center}.sc-af-hero-h{--af-hero-blob-mask:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');--af-hero-blob-mask-mobile:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>')}.hero__image.sc-af-hero{min-height:var(--af-hero-image-min-height);overflow:visible;margin-top:var(--af-hero-image-lift);position:relative;z-index:1}.hero__image--masked.sc-af-hero-s>img,.hero__image--masked .sc-af-hero-s>img,.hero__image--masked.sc-af-hero-s>picture img,.hero__image--masked .sc-af-hero-s>picture img,.hero__image--masked.sc-af-hero-s>.af-hero-image,.hero__image--masked .sc-af-hero-s>.af-hero-image{display:block;width:100%;height:auto;-webkit-mask-image:var(--af-hero-blob-mask);mask-image:var(--af-hero-blob-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;mask-mode:alpha}.hero__image--masked.sc-af-hero img.sc-af-hero{-webkit-mask-image:var(--af-hero-blob-mask);mask-image:var(--af-hero-blob-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;mask-mode:alpha}.hero__illustration.sc-af-hero{flex:0 0 auto;width:100%;max-width:432px;line-height:0;justify-self:end}.hero__illustration.sc-af-hero-s>svg,.hero__illustration .sc-af-hero-s>svg,.hero__illustration.sc-af-hero-s>img,.hero__illustration .sc-af-hero-s>img{width:100%;height:auto;display:block;border-radius:16px}.hero--inkwell-illustration.sc-af-hero-h .hero__illustration.sc-af-hero{max-width:540px}.hero__logos.sc-af-hero{position:relative;z-index:2}.hero__logos.sc-af-hero:not(:has(*)){display:none}.hero--inkwell-photo.sc-af-hero-h .hero__logos.sc-af-hero:has(*){margin-top:-240px;padding-top:48px;padding-bottom:48px;background:var(--af-background-base, var(--colour-brand-inkwell, #14343b));border-top:1px solid\n    var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45))}@media (max-width: 991px){.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero,.hero--pad-loose.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:112px}.hero--inkwell-centered.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:144px}.hero__grid.sc-af-hero{grid-template-columns:1fr;gap:32px}.hero--soft-clay-illustration.sc-af-hero-h .hero__grid.sc-af-hero,.hero--mist-green-illustration.sc-af-hero-h .hero__grid.sc-af-hero,.hero--inkwell-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr}.hero__copy.sc-af-hero{padding-left:0;padding-bottom:0}.hero__illustration.sc-af-hero{max-width:360px;margin-inline:auto;justify-self:center}.hero__image.sc-af-hero{margin-top:0;min-height:auto}.sc-af-hero-h.hero--inkwell-photo .hero__image--masked.sc-af-hero-s>img,.hero__image--masked .sc-af-hero-s>img,.hero--inkwell-photo.sc-af-hero-h .hero__image--masked.sc-af-hero img.sc-af-hero{-webkit-mask-image:var(--af-hero-blob-mask-mobile);mask-image:var(--af-hero-blob-mask-mobile)}.hero--inkwell-photo.sc-af-hero-h .hero__logos.sc-af-hero:has(*){margin-top:24px;padding-top:32px;padding-bottom:32px;background:transparent;border-top:none}}";
+const afHeroCss = ".sc-af-hero-h{display:block;position:relative;width:100%;--af-hero-image-lift:-260px;--af-hero-image-min-height:360px}.hero__section.sc-af-hero{position:relative;overflow:hidden}.hero__paperclip.sc-af-hero{position:absolute;top:50%;right:0;transform:translateY(-50%);pointer-events:none;z-index:0;width:520px;height:600px}@media (max-width: 991px){.hero__paperclip.sc-af-hero{width:380px;height:437px}}@media (max-width: 767px){.hero__paperclip.sc-af-hero{display:none}}.hero__inner.sc-af-hero{position:relative;z-index:1;padding-bottom:40px}.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:124px}.hero--pad-loose.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:164px}.hero--inkwell-centered.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:180px}.hero__grid.sc-af-hero{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:center}.hero--soft-clay-illustration.sc-af-hero-h .hero__grid.sc-af-hero,.hero--mist-green-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr auto;gap:48px}.hero--inkwell-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr 1fr}.hero__copy.sc-af-hero{padding-left:16px}.hero--inkwell-photo.hero--pad-loose.sc-af-hero-h .hero__copy.sc-af-hero{padding-bottom:120px}.hero--inkwell-centered.sc-af-hero-h .hero__copy.sc-af-hero{padding-left:0;text-align:center}.hero__badge.sc-af-hero:not(:has(*)){display:none}.hero__badge.sc-af-hero:has(*){margin-bottom:16px}.hero__copy.sc-af-hero-s>[slot='badge'],.hero__copy .sc-af-hero-s>[slot='badge']{display:inline-block}.hero__buttons.sc-af-hero{margin-top:32px}.hero__buttons.sc-af-hero:empty{display:none}.hero--inkwell-centered.sc-af-hero-h .hero__buttons.sc-af-hero{display:flex;justify-content:center}.sc-af-hero-h{--af-hero-blob-mask:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');--af-hero-blob-mask-mobile:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>')}.hero__image.sc-af-hero{min-height:var(--af-hero-image-min-height);overflow:visible;margin-top:var(--af-hero-image-lift);position:relative;z-index:1}.hero__image--masked.sc-af-hero-s>img,.hero__image--masked .sc-af-hero-s>img,.hero__image--masked.sc-af-hero-s>picture img,.hero__image--masked .sc-af-hero-s>picture img,.hero__image--masked.sc-af-hero-s>.af-hero-image,.hero__image--masked .sc-af-hero-s>.af-hero-image{display:block;width:100%;height:auto;-webkit-mask-image:var(--af-hero-blob-mask);mask-image:var(--af-hero-blob-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;mask-mode:alpha}.hero__image--masked.sc-af-hero img.sc-af-hero{-webkit-mask-image:var(--af-hero-blob-mask);mask-image:var(--af-hero-blob-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;mask-mode:alpha}.hero__illustration.sc-af-hero{flex:0 0 auto;width:100%;max-width:432px;line-height:0;justify-self:end}.hero__illustration.sc-af-hero-s>svg,.hero__illustration .sc-af-hero-s>svg,.hero__illustration.sc-af-hero-s>img,.hero__illustration .sc-af-hero-s>img{width:100%;height:auto;display:block;border-radius:16px}.hero--inkwell-illustration.sc-af-hero-h .hero__illustration.sc-af-hero{max-width:540px}.hero__logos.sc-af-hero{position:relative;z-index:2}.hero__logos.sc-af-hero:not(:has(*)){display:none}.hero--inkwell-photo.sc-af-hero-h .hero__logos.sc-af-hero:has(*){margin-top:-240px;padding-top:48px;padding-bottom:48px;background:var(--af-background-base, var(--colour-brand-inkwell, #14343b));border-top:1px solid\n    var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45))}@media (max-width: 991px){.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero,.hero--pad-loose.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:112px}.hero--inkwell-centered.hero--pad-default.sc-af-hero-h .hero__inner.sc-af-hero{padding-top:144px}.hero__grid.sc-af-hero{grid-template-columns:1fr;gap:32px}.hero--soft-clay-illustration.sc-af-hero-h .hero__grid.sc-af-hero,.hero--mist-green-illustration.sc-af-hero-h .hero__grid.sc-af-hero,.hero--inkwell-illustration.sc-af-hero-h .hero__grid.sc-af-hero{grid-template-columns:1fr}.hero__copy.sc-af-hero{padding-left:0;padding-bottom:0}.hero__illustration.sc-af-hero{max-width:360px;margin-inline:auto;justify-self:center}.hero__image.sc-af-hero{margin-top:0;min-height:auto}.sc-af-hero-h.hero--inkwell-photo .hero__image--masked.sc-af-hero-s>img,.hero__image--masked .sc-af-hero-s>img,.hero--inkwell-photo.sc-af-hero-h .hero__image--masked.sc-af-hero img.sc-af-hero{-webkit-mask-image:var(--af-hero-blob-mask-mobile);mask-image:var(--af-hero-blob-mask-mobile)}.hero--inkwell-photo.sc-af-hero-h .hero__logos.sc-af-hero:has(*){margin-top:24px;padding-top:32px;padding-bottom:32px;background:transparent;border-top:none}}";
 
 /**
  * Map each variant to its underlying section theme token. Keeps one source
@@ -79,12 +79,12 @@ const AfHero = class {
         const hasIllustration = v === 'inkwell-illustration' ||
             v === 'soft-clay-illustration' ||
             v === 'mist-green-illustration';
-        return (index.h(index.Host, { key: '0a992496d31ad5bfbc3d987f8e14d4947ed4634a', class: {
+        return (index.h(index.Host, { key: 'c40393e3a50d1beecbe83804a1407a51d46e82ce', class: {
                 [`hero--${v}`]: true,
                 [`hero--pad-${this.topPad}`]: true,
                 [`hero--theme-${this.theme}`]: true,
                 'hero--float-navbar': this.resolvedFloatNavbar,
-            } }, index.h("af-section", { key: 'e7fb9c00edf9df24b3a6f31ec73153f076623b80', theme: this.theme, padding: "none", container: false, class: "hero__section" }, centered && (index.h("div", { key: 'c11031876d2de4e7bdec1ff11ff05488f91e1b95', class: "hero__paperclip", "aria-hidden": "true" }, index.h("slot", { key: 'e374f0ebeb82e4d1f5f0be91a0067a2d6c0dc5ec', name: "paperclip" }))), index.h("af-container", { key: '516ef86f39140df14422abd4dc2688d5afe95327', class: "hero__inner" }, centered ? (this.renderCopy()) : (index.h("div", { class: "hero__grid" }, this.renderCopy(), hasImage && this.renderPhoto(), hasIllustration && this.renderIllustration()))), index.h("div", { key: '946d5bd24bba79faa0aa11af2313538d9131acdc', class: "hero__logos" }, index.h("slot", { key: '3e6f93398f642963bf38f95dbd9c037f26dcf8f9', name: "logos-below" })))));
+            } }, index.h("af-section", { key: '77ce170dadae5685fd58ccd3e9b679099ed7068f', theme: this.theme, padding: "none", container: false, class: "hero__section" }, centered && (index.h("div", { key: 'e1f70ac7c9f4f708a3ac033aaba9c61aa1c5ca58', class: "hero__paperclip", "aria-hidden": "true" }, index.h("slot", { key: '4cc7a2ca78151e4190e81af45ad9989e28c667b1', name: "paperclip" }))), index.h("af-container", { key: 'c3e00acd79776207246290a7b3d5b8bb7b776791', class: "hero__inner" }, centered ? (this.renderCopy()) : (index.h("div", { class: "hero__grid" }, this.renderCopy(), hasImage && this.renderPhoto(), hasIllustration && this.renderIllustration()))), index.h("div", { key: '0cdd9f9071e3670a6d4b4a6082abe9252750d3b5', class: "hero__logos" }, index.h("slot", { key: '8b53c58048c404b6d057f0e56d1ec0402ffd6e00', name: "logos-below" })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/af-hero.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-hero.entry.cjs.js","sources":["src/components/af-hero/af-hero.css?tag=af-hero&encapsulation=scoped","src/components/af-hero/af-hero.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  width: 100%;\n  /* Image-lift custom property — consumers override per-page via inline\n     style or a page-level rule. The negative value pulls the photo's\n     crown above the hero top so it reads behind the floating navbar\n     pill. Matches the live Webflow stack (~-260px on .page-banner). */\n  --af-hero-image-lift: -260px;\n  /* Blob mask container size override — rarely needed; defaults to the\n     photo column's natural dimensions. */\n  --af-hero-image-min-height: 360px;\n}\n\n.hero__section {\n  position: relative;\n  overflow: hidden;\n}\n\n/* -----------------------------------------------------------------\n   Paperclip watermark slot (inkwell-centered only)\n   ----------------------------------------------------------------- */\n.hero__paperclip {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  pointer-events: none;\n  z-index: 0;\n  /* Default size — consumers can resize the slotted decoration via its\n     own width/height props. */\n  width: 655px;\n  height: 754px;\n}\n\n@media (max-width: 991px) {\n  .hero__paperclip {\n    width: 480px;\n    height: 552px;\n  }\n}\n\n@media (max-width: 767px) {\n  .hero__paperclip {\n    display: none;\n  }\n}\n\n/* -----------------------------------------------------------------\n   Inner wrapper — top/bottom padding\n   ----------------------------------------------------------------- */\n.hero__inner {\n  position: relative;\n  z-index: 1;\n  padding-bottom: 40px;\n}\n\n:host(.hero--pad-default) .hero__inner {\n  padding-top: 124px;\n}\n\n:host(.hero--pad-loose) .hero__inner {\n  padding-top: 164px;\n}\n\n/* Centered variant: leave clear breathing room under the floating navbar\n   pill so the heading isn't clipped at the top. The live affinda.com\n   reference at 1280 vw renders the heading roughly 180 px below the\n   viewport top — pad accordingly. (Earlier value of 80 px clipped the\n   heading behind the navbar; caught by qa/regression-compare in the\n   site repo.) */\n:host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n  padding-top: 180px;\n}\n\n/* -----------------------------------------------------------------\n   Grid layout (photo + illustration variants)\n   ----------------------------------------------------------------- */\n.hero__grid {\n  display: grid;\n  grid-template-columns: 5fr 7fr;\n  gap: 40px;\n  align-items: center;\n}\n\n/* Illustration variants use a looser two-column split so the art\n   doesn't dominate. */\n:host(.hero--soft-clay-illustration) .hero__grid,\n:host(.hero--mist-green-illustration) .hero__grid {\n  grid-template-columns: 1fr auto;\n  gap: 48px;\n}\n\n/* inkwell-illustration: 50/50 split. The 5fr/7fr default tilts the\n   illustration column too wide, which pinches the heading down to\n   4-6 lines at 1280 vw. Even split keeps the heading at 2-3 lines\n   matching the live affinda.com reference. */\n:host(.hero--inkwell-illustration) .hero__grid {\n  grid-template-columns: 1fr 1fr;\n}\n\n.hero__copy {\n  /* Small inset pushes heading inward from the hard container edge —\n     matches the live .page-banner-text treatment. Only applied to\n     left-aligned variants. */\n  padding-left: 16px;\n}\n\n:host(.hero--inkwell-photo.hero--pad-loose) .hero__copy {\n  /* Mirrors ListingHero's `padding-bottom: 120px` — combined with\n     `align-items: center` on the grid, this shifts the heading visually\n     upward so the subtitle lines up near the image's vertical centre. */\n  padding-bottom: 120px;\n}\n\n:host(.hero--inkwell-centered) .hero__copy {\n  padding-left: 0;\n  text-align: center;\n}\n\n.hero__badge:not(:has(*)) {\n  display: none;\n}\n\n.hero__badge:has(*) {\n  margin-bottom: 16px;\n}\n\n.hero__copy ::slotted([slot='badge']) {\n  display: inline-block;\n}\n\n.hero__buttons {\n  margin-top: 32px;\n}\n\n.hero__buttons:empty {\n  display: none;\n}\n\n:host(.hero--inkwell-centered) .hero__buttons {\n  display: flex;\n  justify-content: center;\n}\n\n/* -----------------------------------------------------------------\n   Photo (inkwell-photo)\n   Blob-mask shape defined once as a CSS custom property so Stencil\n   doesn't duplicate the giant base64 URL for prefixed/unprefixed pairs.\n   ----------------------------------------------------------------- */\n:host {\n  --af-hero-blob-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');\n  --af-hero-blob-mask-mobile: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>');\n}\n\n.hero__image {\n  min-height: var(--af-hero-image-min-height);\n  overflow: visible;\n  margin-top: var(--af-hero-image-lift);\n  position: relative;\n  z-index: 1;\n}\n\n.hero__image--masked ::slotted(img),\n.hero__image--masked ::slotted(picture img),\n.hero__image--masked ::slotted(.af-hero-image) {\n  display: block;\n  width: 100%;\n  height: auto;\n  -webkit-mask-image: var(--af-hero-blob-mask);\n  mask-image: var(--af-hero-blob-mask);\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  mask-position: center;\n  mask-mode: alpha;\n}\n\n/* Fallback: some consumers slot a raw <img> wrapped in a container.\n   Descendant selector per repo convention. */\n.hero__image--masked img {\n  -webkit-mask-image: var(--af-hero-blob-mask);\n  mask-image: var(--af-hero-blob-mask);\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  mask-position: center;\n  mask-mode: alpha;\n}\n\n/* -----------------------------------------------------------------\n   Illustration (inkwell/soft-clay/mist-green -illustration)\n   ----------------------------------------------------------------- */\n.hero__illustration {\n  flex: 0 0 auto;\n  width: 100%;\n  max-width: 432px;\n  line-height: 0;\n  justify-self: end;\n}\n\n.hero__illustration ::slotted(svg),\n.hero__illustration ::slotted(img) {\n  width: 100%;\n  height: auto;\n  display: block;\n  border-radius: 16px;\n}\n\n/* Cap inkwell-illustration's slotted SVG so square-aspect art doesn't\n   tower past the text column. 540 px matches the live treatment for\n   the /industries + /integrations heroes. */\n:host(.hero--inkwell-illustration) .hero__illustration {\n  max-width: 540px;\n}\n\n/* -----------------------------------------------------------------\n   Logos-below overlap\n   Painted in the theme's background token so the strip cleanly overlaps\n   the bottom of the photo on the -photo variant. Empty = collapsed.\n   ----------------------------------------------------------------- */\n.hero__logos {\n  position: relative;\n  z-index: 2;\n}\n\n.hero__logos:not(:has(*)) {\n  display: none;\n}\n\n/* Photo variant pulls the logos row up so it covers the image's bottom\n   edge — matches the ListingHero `.listing-hero__footer` treatment. */\n:host(.hero--inkwell-photo) .hero__logos:has(*) {\n  margin-top: -240px;\n  padding-top: 48px;\n  padding-bottom: 48px;\n  background: var(--af-background-base, var(--colour-brand-inkwell, #14343b));\n  border-top: 1px solid\n    var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45));\n}\n\n/* -----------------------------------------------------------------\n   Mobile / tablet\n   ----------------------------------------------------------------- */\n@media (max-width: 991px) {\n  :host(.hero--pad-default) .hero__inner,\n  :host(.hero--pad-loose) .hero__inner {\n    padding-top: 112px;\n  }\n\n  /* Centered variant still needs a touch more clearance under the\n     navbar pill on tablet. */\n  :host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n    padding-top: 144px;\n  }\n\n  .hero__grid {\n    grid-template-columns: 1fr;\n    gap: 32px;\n  }\n\n  :host(.hero--soft-clay-illustration) .hero__grid,\n  :host(.hero--mist-green-illustration) .hero__grid,\n  :host(.hero--inkwell-illustration) .hero__grid {\n    grid-template-columns: 1fr;\n  }\n\n  .hero__copy {\n    padding-left: 0;\n    padding-bottom: 0;\n  }\n\n  .hero__illustration {\n    max-width: 360px;\n    margin-inline: auto;\n    justify-self: center;\n  }\n\n  /* Photo on mobile: swap the desktop blob mask for the softer D-curve\n     mobile variant, and drop the lift so the image doesn't crash into\n     the navbar. */\n  .hero__image {\n    margin-top: 0;\n    min-height: auto;\n  }\n\n  :host(.hero--inkwell-photo) .hero__image--masked ::slotted(img),\n  :host(.hero--inkwell-photo) .hero__image--masked img {\n    -webkit-mask-image: var(--af-hero-blob-mask-mobile);\n    mask-image: var(--af-hero-blob-mask-mobile);\n  }\n\n  :host(.hero--inkwell-photo) .hero__logos:has(*) {\n    margin-top: 24px;\n    padding-top: 32px;\n    padding-bottom: 32px;\n    background: transparent;\n    border-top: none;\n  }\n}\n","import { Component, h, Host, Prop, Element } from '@stencil/core';\n\nexport type HeroVariant =\n  | 'inkwell-photo'\n  | 'inkwell-illustration'\n  | 'inkwell-centered'\n  | 'soft-clay-illustration'\n  | 'mist-green-illustration';\n\nexport type HeroTopPad = 'default' | 'loose';\n\n/**\n * Blob-shape mask used to clip hero photos on the inkwell-photo variant.\n * Extracted from the 7+ hand-rolled copies in the website so the path is\n * defined exactly once. Intrinsic viewBox: 741 × 940.\n */\nconst BLOB_MASK_URL =\n  \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=')\";\n\n/**\n * Mobile blob shape — simpler D-curve matching the live mobile banner.\n */\nconst BLOB_MASK_URL_MOBILE =\n  \"url('data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 1024 768\\\"><path fill=\\\"%23000\\\" d=\\\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\\\"/></svg>')\";\n\n/**\n * Map each variant to its underlying section theme token. Keeps one source\n * of truth instead of having consumers spell the theme twice.\n */\nconst VARIANT_THEMES: Record<HeroVariant, 'inkwell' | 'soft-clay' | 'mist-green'> = {\n  'inkwell-photo': 'inkwell',\n  'inkwell-illustration': 'inkwell',\n  'inkwell-centered': 'inkwell',\n  'soft-clay-illustration': 'soft-clay',\n  'mist-green-illustration': 'mist-green',\n};\n\n/**\n * Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations\n * the Affinda marketing site (and sibling apps) currently ship. Covers five\n * canonical patterns via the `variant` prop:\n *\n * - `inkwell-photo` — inkwell background, blob-masked photo on the right.\n *   Use for: listing / archive pages (blog, case-studies, whitepapers,\n *   value-creation, about-us) and industry landing pages that carry a\n *   photograph instead of an illustration.\n * - `inkwell-illustration` — inkwell background, illustration on the right.\n *   Use for: industry landing pages, /industries, /integrations, /platform\n *   with bespoke art.\n * - `inkwell-centered` — inkwell background, centred typography lockup.\n *   Slot `<af-paperclip-decoration />` into the `paperclip` slot for the\n *   watermark treatment. Use for: `/`, `/au`, `/platform`.\n * - `soft-clay-illustration` — soft-clay background, illustration on the\n *   right. Use for: /news, /industries overview, /security, /compare.\n * - `mist-green-illustration` — same layout as soft-clay-illustration but on\n *   the mist-green theme. Reserved for future pages.\n *\n * ## Slots\n *\n * - default — heading content (use when richer markup than the `heading`\n *   prop can express is needed; e.g. coloured spans or line breaks).\n * - `description` — supporting copy under the heading.\n * - `badge` — optional pre-heading label (pill, version tag).\n * - `buttons` — hero CTAs (usually an `<af-button-group>`).\n * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in\n *   the blob mask automatically.\n * - `illustration` — the illustration SVG for `-illustration` variants.\n * - `paperclip` — watermark for `inkwell-centered`. Consumers typically\n *   slot `<af-paperclip-decoration />` here.\n * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).\n *   Painted with the theme's background so it cleanly overlaps the image's\n *   lower edge on the photo variant.\n *\n * ## Float-navbar handling\n *\n * When `floatNavbar` is true (the default for the inkwell variants) the\n * component sets `data-af-hero-float-navbar=\"true\"` on `<body>` via a\n * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies\n * the `body > header { position: absolute }` / `main { padding-top: 0 }`\n * / navbar-spacer-transparent treatment. Consumers already import\n * `@affinda/css` so no extra import is required. The rule deactivates\n * when the hero is removed from the DOM.\n *\n * ## Image lift\n *\n * The `inkwell-photo` variant renders the photo column with\n * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by\n * setting `--af-hero-image-lift` on the `<af-hero>` element.\n */\n@Component({\n  tag: 'af-hero',\n  styleUrl: 'af-hero.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfHero {\n  @Element() el!: HTMLElement;\n\n  /** Layout / theme preset. See variant docs in the component header. */\n  @Prop({ reflect: true }) variant: HeroVariant = 'inkwell-photo';\n\n  /** Heading text (use the default slot for richer markup). */\n  @Prop() heading: string = '';\n\n  /** Description text (use the `description` slot for richer markup). */\n  @Prop() description: string = '';\n\n  /**\n   * Float the site header over the hero and paint the navbar-spacer\n   * transparent so the hero background flows to the top of the viewport.\n   * Defaults to true for the three inkwell variants, false for the\n   * soft-clay / mist-green illustration variants (whose consumers don't\n   * always want a full-bleed crown).\n   */\n  @Prop({ reflect: true }) floatNavbar?: boolean;\n\n  /**\n   * Top padding preset. `default` = 124px (matches IndustryHero /\n   * IllustrationHero). `loose` = 164px (matches ListingHero — gives the\n   * image a touch more breathing room above the lockup on archive pages).\n   */\n  @Prop() topPad: HeroTopPad = 'default';\n\n  /** Typography lockup max-width (px). Defaults to 620, matching the live site. */\n  @Prop() maxWidth: number = 620;\n\n  /**\n   * Whether to apply the blob mask to the slotted `image`. Defaults to\n   * `true` for `inkwell-photo`. Set `false` if you want to slot in a\n   * pre-masked raster or a custom wrapper.\n   */\n  @Prop() maskImage: boolean = true;\n\n  private get resolvedFloatNavbar(): boolean {\n    if (typeof this.floatNavbar === 'boolean') return this.floatNavbar;\n    return (\n      this.variant === 'inkwell-photo' ||\n      this.variant === 'inkwell-illustration' ||\n      this.variant === 'inkwell-centered'\n    );\n  }\n\n  private get theme() {\n    return VARIANT_THEMES[this.variant];\n  }\n\n  connectedCallback() {\n    if (this.resolvedFloatNavbar && typeof document !== 'undefined') {\n      document.body.setAttribute('data-af-hero-float-navbar', 'true');\n    }\n  }\n\n  disconnectedCallback() {\n    if (typeof document !== 'undefined' && !document.querySelector('af-hero')) {\n      document.body.removeAttribute('data-af-hero-float-navbar');\n    }\n  }\n\n  private renderCopy() {\n    const alignment = this.variant === 'inkwell-centered' ? 'center' : 'left';\n    return (\n      <div class=\"hero__copy\">\n        <div class=\"hero__badge\">\n          <slot name=\"badge\"></slot>\n        </div>\n        <af-typography-lockup\n          heading-size=\"1\"\n          text-alignment={alignment}\n          max-width={String(this.maxWidth)}\n        >\n          {this.heading ? <h1>{this.heading}</h1> : <slot></slot>}\n          {this.description ? (\n            <span slot=\"description\">{this.description}</span>\n          ) : (\n            <slot name=\"description\" slot=\"description\"></slot>\n          )}\n        </af-typography-lockup>\n        <div class=\"hero__buttons\">\n          <slot name=\"buttons\"></slot>\n        </div>\n      </div>\n    );\n  }\n\n  private renderPhoto() {\n    return (\n      <div\n        class={{\n          hero__image: true,\n          'hero__image--masked': this.maskImage,\n        }}\n      >\n        <slot name=\"image\"></slot>\n      </div>\n    );\n  }\n\n  private renderIllustration() {\n    return (\n      <div class=\"hero__illustration\">\n        <slot name=\"illustration\"></slot>\n      </div>\n    );\n  }\n\n  render() {\n    const v = this.variant;\n    const centered = v === 'inkwell-centered';\n    const hasImage = v === 'inkwell-photo';\n    const hasIllustration =\n      v === 'inkwell-illustration' ||\n      v === 'soft-clay-illustration' ||\n      v === 'mist-green-illustration';\n\n    return (\n      <Host\n        class={{\n          [`hero--${v}`]: true,\n          [`hero--pad-${this.topPad}`]: true,\n          [`hero--theme-${this.theme}`]: true,\n          'hero--float-navbar': this.resolvedFloatNavbar,\n        }}\n      >\n        <af-section\n          theme={this.theme}\n          padding=\"none\"\n          container={false}\n          class=\"hero__section\"\n        >\n          {centered && (\n            <div class=\"hero__paperclip\" aria-hidden=\"true\">\n              <slot name=\"paperclip\"></slot>\n            </div>\n          )}\n          <af-container class=\"hero__inner\">\n            {centered ? (\n              this.renderCopy()\n            ) : (\n              <div class=\"hero__grid\">\n                {this.renderCopy()}\n                {hasImage && this.renderPhoto()}\n                {hasIllustration && this.renderIllustration()}\n              </div>\n            )}\n          </af-container>\n          <div class=\"hero__logos\">\n            <slot name=\"logos-below\"></slot>\n          </div>\n        </af-section>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}
+{"version":3,"file":"af-hero.entry.cjs.js","sources":["src/components/af-hero/af-hero.css?tag=af-hero&encapsulation=scoped","src/components/af-hero/af-hero.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  width: 100%;\n  /* Image-lift custom property — consumers override per-page via inline\n     style or a page-level rule. The negative value pulls the photo's\n     crown above the hero top so it reads behind the floating navbar\n     pill. Matches the live Webflow stack (~-260px on .page-banner). */\n  --af-hero-image-lift: -260px;\n  /* Blob mask container size override — rarely needed; defaults to the\n     photo column's natural dimensions. */\n  --af-hero-image-min-height: 360px;\n}\n\n.hero__section {\n  position: relative;\n  overflow: hidden;\n}\n\n/* -----------------------------------------------------------------\n   Paperclip watermark slot (inkwell-centered only)\n   ----------------------------------------------------------------- */\n.hero__paperclip {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  pointer-events: none;\n  z-index: 0;\n  /* Default size — consumers can resize the slotted decoration via its\n     own width/height props. The earlier 655×754 default extended past\n     the bottom edge of the hero on every page that ships a\n     `logos-below` slot (home, /au, /platform), bleeding into the\n     client-logo carousel and getting clipped. Trimmed to 520×600 so\n     the paperclip stays inside the hero column at every common viewport\n     while still reading as a watermark. */\n  width: 520px;\n  height: 600px;\n}\n\n@media (max-width: 991px) {\n  .hero__paperclip {\n    width: 380px;\n    height: 437px;\n  }\n}\n\n@media (max-width: 767px) {\n  .hero__paperclip {\n    display: none;\n  }\n}\n\n/* -----------------------------------------------------------------\n   Inner wrapper — top/bottom padding\n   ----------------------------------------------------------------- */\n.hero__inner {\n  position: relative;\n  z-index: 1;\n  padding-bottom: 40px;\n}\n\n:host(.hero--pad-default) .hero__inner {\n  padding-top: 124px;\n}\n\n:host(.hero--pad-loose) .hero__inner {\n  padding-top: 164px;\n}\n\n/* Centered variant: leave clear breathing room under the floating navbar\n   pill so the heading isn't clipped at the top. The live affinda.com\n   reference at 1280 vw renders the heading roughly 180 px below the\n   viewport top — pad accordingly. (Earlier value of 80 px clipped the\n   heading behind the navbar; caught by qa/regression-compare in the\n   site repo.) */\n:host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n  padding-top: 180px;\n}\n\n/* -----------------------------------------------------------------\n   Grid layout (photo + illustration variants)\n   ----------------------------------------------------------------- */\n.hero__grid {\n  display: grid;\n  grid-template-columns: 5fr 7fr;\n  gap: 40px;\n  align-items: center;\n}\n\n/* Illustration variants use a looser two-column split so the art\n   doesn't dominate. */\n:host(.hero--soft-clay-illustration) .hero__grid,\n:host(.hero--mist-green-illustration) .hero__grid {\n  grid-template-columns: 1fr auto;\n  gap: 48px;\n}\n\n/* inkwell-illustration: 50/50 split. The 5fr/7fr default tilts the\n   illustration column too wide, which pinches the heading down to\n   4-6 lines at 1280 vw. Even split keeps the heading at 2-3 lines\n   matching the live affinda.com reference. */\n:host(.hero--inkwell-illustration) .hero__grid {\n  grid-template-columns: 1fr 1fr;\n}\n\n.hero__copy {\n  /* Small inset pushes heading inward from the hard container edge —\n     matches the live .page-banner-text treatment. Only applied to\n     left-aligned variants. */\n  padding-left: 16px;\n}\n\n:host(.hero--inkwell-photo.hero--pad-loose) .hero__copy {\n  /* Mirrors ListingHero's `padding-bottom: 120px` — combined with\n     `align-items: center` on the grid, this shifts the heading visually\n     upward so the subtitle lines up near the image's vertical centre. */\n  padding-bottom: 120px;\n}\n\n:host(.hero--inkwell-centered) .hero__copy {\n  padding-left: 0;\n  text-align: center;\n}\n\n.hero__badge:not(:has(*)) {\n  display: none;\n}\n\n.hero__badge:has(*) {\n  margin-bottom: 16px;\n}\n\n.hero__copy ::slotted([slot='badge']) {\n  display: inline-block;\n}\n\n.hero__buttons {\n  margin-top: 32px;\n}\n\n.hero__buttons:empty {\n  display: none;\n}\n\n:host(.hero--inkwell-centered) .hero__buttons {\n  display: flex;\n  justify-content: center;\n}\n\n/* -----------------------------------------------------------------\n   Photo (inkwell-photo)\n   Blob-mask shape defined once as a CSS custom property so Stencil\n   doesn't duplicate the giant base64 URL for prefixed/unprefixed pairs.\n   ----------------------------------------------------------------- */\n:host {\n  --af-hero-blob-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=');\n  --af-hero-blob-mask-mobile: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 768\"><path fill=\"%23000\" d=\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\"/></svg>');\n}\n\n.hero__image {\n  min-height: var(--af-hero-image-min-height);\n  overflow: visible;\n  margin-top: var(--af-hero-image-lift);\n  position: relative;\n  z-index: 1;\n}\n\n.hero__image--masked ::slotted(img),\n.hero__image--masked ::slotted(picture img),\n.hero__image--masked ::slotted(.af-hero-image) {\n  display: block;\n  width: 100%;\n  height: auto;\n  -webkit-mask-image: var(--af-hero-blob-mask);\n  mask-image: var(--af-hero-blob-mask);\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  mask-position: center;\n  mask-mode: alpha;\n}\n\n/* Fallback: some consumers slot a raw <img> wrapped in a container.\n   Descendant selector per repo convention. */\n.hero__image--masked img {\n  -webkit-mask-image: var(--af-hero-blob-mask);\n  mask-image: var(--af-hero-blob-mask);\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-position: center;\n  mask-position: center;\n  mask-mode: alpha;\n}\n\n/* -----------------------------------------------------------------\n   Illustration (inkwell/soft-clay/mist-green -illustration)\n   ----------------------------------------------------------------- */\n.hero__illustration {\n  flex: 0 0 auto;\n  width: 100%;\n  max-width: 432px;\n  line-height: 0;\n  justify-self: end;\n}\n\n.hero__illustration ::slotted(svg),\n.hero__illustration ::slotted(img) {\n  width: 100%;\n  height: auto;\n  display: block;\n  border-radius: 16px;\n}\n\n/* Cap inkwell-illustration's slotted SVG so square-aspect art doesn't\n   tower past the text column. 540 px matches the live treatment for\n   the /industries + /integrations heroes. */\n:host(.hero--inkwell-illustration) .hero__illustration {\n  max-width: 540px;\n}\n\n/* -----------------------------------------------------------------\n   Logos-below overlap\n   Painted in the theme's background token so the strip cleanly overlaps\n   the bottom of the photo on the -photo variant. Empty = collapsed.\n   ----------------------------------------------------------------- */\n.hero__logos {\n  position: relative;\n  z-index: 2;\n}\n\n.hero__logos:not(:has(*)) {\n  display: none;\n}\n\n/* Photo variant pulls the logos row up so it covers the image's bottom\n   edge — matches the ListingHero `.listing-hero__footer` treatment. */\n:host(.hero--inkwell-photo) .hero__logos:has(*) {\n  margin-top: -240px;\n  padding-top: 48px;\n  padding-bottom: 48px;\n  background: var(--af-background-base, var(--colour-brand-inkwell, #14343b));\n  border-top: 1px solid\n    var(--af-background-border-subtle, var(--colour-inkwell-450, #203e45));\n}\n\n/* -----------------------------------------------------------------\n   Mobile / tablet\n   ----------------------------------------------------------------- */\n@media (max-width: 991px) {\n  :host(.hero--pad-default) .hero__inner,\n  :host(.hero--pad-loose) .hero__inner {\n    padding-top: 112px;\n  }\n\n  /* Centered variant still needs a touch more clearance under the\n     navbar pill on tablet. */\n  :host(.hero--inkwell-centered.hero--pad-default) .hero__inner {\n    padding-top: 144px;\n  }\n\n  .hero__grid {\n    grid-template-columns: 1fr;\n    gap: 32px;\n  }\n\n  :host(.hero--soft-clay-illustration) .hero__grid,\n  :host(.hero--mist-green-illustration) .hero__grid,\n  :host(.hero--inkwell-illustration) .hero__grid {\n    grid-template-columns: 1fr;\n  }\n\n  .hero__copy {\n    padding-left: 0;\n    padding-bottom: 0;\n  }\n\n  .hero__illustration {\n    max-width: 360px;\n    margin-inline: auto;\n    justify-self: center;\n  }\n\n  /* Photo on mobile: swap the desktop blob mask for the softer D-curve\n     mobile variant, and drop the lift so the image doesn't crash into\n     the navbar. */\n  .hero__image {\n    margin-top: 0;\n    min-height: auto;\n  }\n\n  :host(.hero--inkwell-photo) .hero__image--masked ::slotted(img),\n  :host(.hero--inkwell-photo) .hero__image--masked img {\n    -webkit-mask-image: var(--af-hero-blob-mask-mobile);\n    mask-image: var(--af-hero-blob-mask-mobile);\n  }\n\n  :host(.hero--inkwell-photo) .hero__logos:has(*) {\n    margin-top: 24px;\n    padding-top: 32px;\n    padding-bottom: 32px;\n    background: transparent;\n    border-top: none;\n  }\n}\n","import { Component, h, Host, Prop, Element } from '@stencil/core';\n\nexport type HeroVariant =\n  | 'inkwell-photo'\n  | 'inkwell-illustration'\n  | 'inkwell-centered'\n  | 'soft-clay-illustration'\n  | 'mist-green-illustration';\n\nexport type HeroTopPad = 'default' | 'loose';\n\n/**\n * Blob-shape mask used to clip hero photos on the inkwell-photo variant.\n * Extracted from the 7+ hand-rolled copies in the website so the path is\n * defined exactly once. Intrinsic viewBox: 741 × 940.\n */\nconst BLOB_MASK_URL =\n  \"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NDEgOTQwIj48cGF0aCBkPSJNMTcwLjA2MyAxODEuOTQ1QzIzNC4xNTYgMzAuOTUxNCA0MDguNTE4IC0zOS40OTU1IDU1OS41MTIgMjQuNTk3NUM3MTAuNTA2IDg4LjY5MDQgNzgwLjk1MiAyNjMuMDUzIDcxNi44NTkgNDE0LjA0Nkw1NzAuODQ3IDc1OC4wMzFDNTA2Ljc1NCA5MDkuMDI0IDMzMi4zOTIgOTc5LjQ3MSAxODEuMzk4IDkxNS4zNzhDMzAuNDA0NSA4NTEuMjg1IC00MC4wNDI0IDY3Ni45MjMgMjQuMDUwNiA1MjUuOTI5TDE3MC4wNjMgMTgxLjk0NVoiIGZpbGw9IiMwMDAiLz48L3N2Zz4=')\";\n\n/**\n * Mobile blob shape — simpler D-curve matching the live mobile banner.\n */\nconst BLOB_MASK_URL_MOBILE =\n  \"url('data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" viewBox=\\\"0 0 1024 768\\\"><path fill=\\\"%23000\\\" d=\\\"M1024 0H384A384 384 0 0 0 384 768H1024V0Z\\\"/></svg>')\";\n\n/**\n * Map each variant to its underlying section theme token. Keeps one source\n * of truth instead of having consumers spell the theme twice.\n */\nconst VARIANT_THEMES: Record<HeroVariant, 'inkwell' | 'soft-clay' | 'mist-green'> = {\n  'inkwell-photo': 'inkwell',\n  'inkwell-illustration': 'inkwell',\n  'inkwell-centered': 'inkwell',\n  'soft-clay-illustration': 'soft-clay',\n  'mist-green-illustration': 'mist-green',\n};\n\n/**\n * Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations\n * the Affinda marketing site (and sibling apps) currently ship. Covers five\n * canonical patterns via the `variant` prop:\n *\n * - `inkwell-photo` — inkwell background, blob-masked photo on the right.\n *   Use for: listing / archive pages (blog, case-studies, whitepapers,\n *   value-creation, about-us) and industry landing pages that carry a\n *   photograph instead of an illustration.\n * - `inkwell-illustration` — inkwell background, illustration on the right.\n *   Use for: industry landing pages, /industries, /integrations, /platform\n *   with bespoke art.\n * - `inkwell-centered` — inkwell background, centred typography lockup.\n *   Slot `<af-paperclip-decoration />` into the `paperclip` slot for the\n *   watermark treatment. Use for: `/`, `/au`, `/platform`.\n * - `soft-clay-illustration` — soft-clay background, illustration on the\n *   right. Use for: /news, /industries overview, /security, /compare.\n * - `mist-green-illustration` — same layout as soft-clay-illustration but on\n *   the mist-green theme. Reserved for future pages.\n *\n * ## Slots\n *\n * - default — heading content (use when richer markup than the `heading`\n *   prop can express is needed; e.g. coloured spans or line breaks).\n * - `description` — supporting copy under the heading.\n * - `badge` — optional pre-heading label (pill, version tag).\n * - `buttons` — hero CTAs (usually an `<af-button-group>`).\n * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in\n *   the blob mask automatically.\n * - `illustration` — the illustration SVG for `-illustration` variants.\n * - `paperclip` — watermark for `inkwell-centered`. Consumers typically\n *   slot `<af-paperclip-decoration />` here.\n * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).\n *   Painted with the theme's background so it cleanly overlaps the image's\n *   lower edge on the photo variant.\n *\n * ## Float-navbar handling\n *\n * When `floatNavbar` is true (the default for the inkwell variants) the\n * component sets `data-af-hero-float-navbar=\"true\"` on `<body>` via a\n * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies\n * the `body > header { position: absolute }` / `main { padding-top: 0 }`\n * / navbar-spacer-transparent treatment. Consumers already import\n * `@affinda/css` so no extra import is required. The rule deactivates\n * when the hero is removed from the DOM.\n *\n * ## Image lift\n *\n * The `inkwell-photo` variant renders the photo column with\n * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by\n * setting `--af-hero-image-lift` on the `<af-hero>` element.\n */\n@Component({\n  tag: 'af-hero',\n  styleUrl: 'af-hero.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfHero {\n  @Element() el!: HTMLElement;\n\n  /** Layout / theme preset. See variant docs in the component header. */\n  @Prop({ reflect: true }) variant: HeroVariant = 'inkwell-photo';\n\n  /** Heading text (use the default slot for richer markup). */\n  @Prop() heading: string = '';\n\n  /** Description text (use the `description` slot for richer markup). */\n  @Prop() description: string = '';\n\n  /**\n   * Float the site header over the hero and paint the navbar-spacer\n   * transparent so the hero background flows to the top of the viewport.\n   * Defaults to true for the three inkwell variants, false for the\n   * soft-clay / mist-green illustration variants (whose consumers don't\n   * always want a full-bleed crown).\n   */\n  @Prop({ reflect: true }) floatNavbar?: boolean;\n\n  /**\n   * Top padding preset. `default` = 124px (matches IndustryHero /\n   * IllustrationHero). `loose` = 164px (matches ListingHero — gives the\n   * image a touch more breathing room above the lockup on archive pages).\n   */\n  @Prop() topPad: HeroTopPad = 'default';\n\n  /** Typography lockup max-width (px). Defaults to 620, matching the live site. */\n  @Prop() maxWidth: number = 620;\n\n  /**\n   * Whether to apply the blob mask to the slotted `image`. Defaults to\n   * `true` for `inkwell-photo`. Set `false` if you want to slot in a\n   * pre-masked raster or a custom wrapper.\n   */\n  @Prop() maskImage: boolean = true;\n\n  private get resolvedFloatNavbar(): boolean {\n    if (typeof this.floatNavbar === 'boolean') return this.floatNavbar;\n    return (\n      this.variant === 'inkwell-photo' ||\n      this.variant === 'inkwell-illustration' ||\n      this.variant === 'inkwell-centered'\n    );\n  }\n\n  private get theme() {\n    return VARIANT_THEMES[this.variant];\n  }\n\n  connectedCallback() {\n    if (this.resolvedFloatNavbar && typeof document !== 'undefined') {\n      document.body.setAttribute('data-af-hero-float-navbar', 'true');\n    }\n  }\n\n  disconnectedCallback() {\n    if (typeof document !== 'undefined' && !document.querySelector('af-hero')) {\n      document.body.removeAttribute('data-af-hero-float-navbar');\n    }\n  }\n\n  private renderCopy() {\n    const alignment = this.variant === 'inkwell-centered' ? 'center' : 'left';\n    return (\n      <div class=\"hero__copy\">\n        <div class=\"hero__badge\">\n          <slot name=\"badge\"></slot>\n        </div>\n        <af-typography-lockup\n          heading-size=\"1\"\n          text-alignment={alignment}\n          max-width={String(this.maxWidth)}\n        >\n          {this.heading ? <h1>{this.heading}</h1> : <slot></slot>}\n          {this.description ? (\n            <span slot=\"description\">{this.description}</span>\n          ) : (\n            <slot name=\"description\" slot=\"description\"></slot>\n          )}\n        </af-typography-lockup>\n        <div class=\"hero__buttons\">\n          <slot name=\"buttons\"></slot>\n        </div>\n      </div>\n    );\n  }\n\n  private renderPhoto() {\n    return (\n      <div\n        class={{\n          hero__image: true,\n          'hero__image--masked': this.maskImage,\n        }}\n      >\n        <slot name=\"image\"></slot>\n      </div>\n    );\n  }\n\n  private renderIllustration() {\n    return (\n      <div class=\"hero__illustration\">\n        <slot name=\"illustration\"></slot>\n      </div>\n    );\n  }\n\n  render() {\n    const v = this.variant;\n    const centered = v === 'inkwell-centered';\n    const hasImage = v === 'inkwell-photo';\n    const hasIllustration =\n      v === 'inkwell-illustration' ||\n      v === 'soft-clay-illustration' ||\n      v === 'mist-green-illustration';\n\n    return (\n      <Host\n        class={{\n          [`hero--${v}`]: true,\n          [`hero--pad-${this.topPad}`]: true,\n          [`hero--theme-${this.theme}`]: true,\n          'hero--float-navbar': this.resolvedFloatNavbar,\n        }}\n      >\n        <af-section\n          theme={this.theme}\n          padding=\"none\"\n          container={false}\n          class=\"hero__section\"\n        >\n          {centered && (\n            <div class=\"hero__paperclip\" aria-hidden=\"true\">\n              <slot name=\"paperclip\"></slot>\n            </div>\n          )}\n          <af-container class=\"hero__inner\">\n            {centered ? (\n              this.renderCopy()\n            ) : (\n              <div class=\"hero__grid\">\n                {this.renderCopy()}\n                {hasImage && this.renderPhoto()}\n                {hasIllustration && this.renderIllustration()}\n              </div>\n            )}\n          </af-container>\n          <div class=\"hero__logos\">\n            <slot name=\"logos-below\"></slot>\n          </div>\n        </af-section>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/af-icon-box.cjs.entry.js

@@ -21,7 +21,7 @@ const AfIconBox = class {
             [`icon-box--size-${this.size}`]: true,
         };
         const iconSize = this.size === 'small' ? 20 : this.size === 'large' ? 48 : 40;
-        return (index.h(index.Host, { key: 'b224f522fa4db3081cb97fbe88aec0a4f4198d61' }, index.h("div", { key: '99ee87a2104918c6d3855cc5d7e90dcbda2d9638', class: containerClasses }, index.h("af-icon", { key: '778170ce3b08ca6b34289cc6bd1d49ade9583bc1', name: this.icon, size: iconSize }))));
+        return (index.h(index.Host, { key: '2a0468909e1ec2a92c20b7cda6cb39af8584a42b' }, index.h("div", { key: '57eaff445b3d6a04c5eb7c39729bfb576866ca07', class: containerClasses }, index.h("af-icon", { key: '5590e7bd7dea9951f2f647c85240ee6673bcac32', name: this.icon, size: iconSize }))));
     }
 };
 AfIconBox.style = afIconBoxCss;

package/dist/cjs/af-icon-text.cjs.entry.js

@@ -27,7 +27,7 @@ const AfIconText = class {
             'icon-text': true,
             [`icon-text--${this.orientation}`]: true,
         };
-        return (index.h(index.Host, { key: 'e00ca808eec26f88a177d91373d749908f3b2b5a' }, index.h("div", { key: 'c2709624720dd8775474c7c5be41ab93291bbe83', class: containerClasses }, index.h("af-icon-box", { key: '68feda331b07eefd23f10a4edf25b935e0298cf8', icon: this.icon, size: this.iconSize, class: "icon-text__icon" }), index.h("af-typography-lockup", { key: '56ee1da85e0808e3e12033abc7f0c74786b0b099', headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "icon-text__lockup" }, index.h("slot", { key: '056bef68d2251e514527cd49cbe2e8623556cc2a' }), index.h("span", { key: 'fb3379b7494d73b306a10f792f403ea1da719067', slot: "description" }, index.h("slot", { key: '7d06d6f52096fd80343823bd406f5a80d0035eaa', name: "description" })), index.h("span", { key: '9b4e20bc667fe53312297bdea1b5a96706dd3521', slot: "buttons" }, index.h("slot", { key: 'dac8dfcef4cb3f1f3d7caacb6ef40d29e52b53fe', name: "buttons" }))))));
+        return (index.h(index.Host, { key: 'cff8f57c2175530744bbf82bcaf80883602dea66' }, index.h("div", { key: '2fd499767ec70050ed0319a27d8cdb91b5b9432c', class: containerClasses }, index.h("af-icon-box", { key: 'd39fe7b335e68064ee0ef88a9fa210ae7c7d5166', icon: this.icon, size: this.iconSize, class: "icon-text__icon" }), index.h("af-typography-lockup", { key: 'f613b10a4f90fef207ac007170be63a06d3018a9', headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "icon-text__lockup" }, index.h("slot", { key: '151b8544c65eede0f0c7fa3c0bfc003bed54c25a' }), index.h("span", { key: 'eae7c355f05b99b3a443d2dd7a211d9c4ee9398c', slot: "description" }, index.h("slot", { key: '2514ef8f6b6524d8647e43cc2a111a03ea17f094', name: "description" })), index.h("span", { key: '0271986cc47f4b0625294109f720b76cb8917e21', slot: "buttons" }, index.h("slot", { key: '28a5b615d74f94249a60ab59561e756ad49c9726', name: "buttons" }))))));
     }
 };
 AfIconText.style = afIconTextCss;

package/dist/cjs/af-illustrated-card.cjs.entry.js

@@ -27,7 +27,7 @@ const AfIllustratedCard = class {
             [`illustrated-card--breakpoint-${this.breakpoint}`]: true,
             [`illustrated-card--size-${this.cardSize}`]: true,
         };
-        return (index.h(index.Host, { key: '6cfa00ec3678220a5cb65c47c2a6dd120a8c5553' }, index.h("div", { key: '0b2fe8e581ead66d4f87007effce17bc506acb90', class: wrapperClasses }, index.h("af-card", { key: '7c9b545d3dd1960c43a6913ed28beb7f061c31e7', theme: this.theme }, index.h("div", { key: 'cfe8a3385853a6affefc77f18f5625f292f10489', class: "illustrated-card__content" }, index.h("af-typography-lockup", { key: '38e539b8617502fdd4ae2ebd6e1e536cf502b9a1', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonLayout: "vertical" }, index.h("slot", { key: '8988255edefe50349f78fe45db72c584ba6378ef' }), index.h("span", { key: '769cbdd181f166b086974e21a7f941dd4e17add0', slot: "description" }, index.h("slot", { key: 'ac1793bf3c0cc8e1a5d1ce9b2958a4e320b81134', name: "body" })), index.h("span", { key: 'ef22764670352f88d7e647b44625ac1afa94d51f', slot: "buttons" }, index.h("slot", { key: '625f23188a6cd9914b67b1c9937c728bc7125f4f', name: "buttons" })))), index.h("div", { key: '0616a426ea07da6c92488c65d85ba3c3ab84c40b', class: "illustrated-card__illustration-area" }, index.h("slot", { key: 'cf2998e62fb20f3cd049e0640004322a0b438ac1', name: "illustration" }))))));
+        return (index.h(index.Host, { key: '9cb248db15ab8be5119df3183457470491de468b' }, index.h("div", { key: 'c3ba0afed9c7fe45f5d577aedf9b320a1f875e47', class: wrapperClasses }, index.h("af-card", { key: '07f201cc8c56bade2e793e68b7777c23ac7d0ba7', theme: this.theme }, index.h("div", { key: '7f1a2579a29229f8161771836b60c0d882cabf59', class: "illustrated-card__content" }, index.h("af-typography-lockup", { key: 'b5d9150b3f63e46e36f478380f36fb3f273f227c', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonLayout: "vertical" }, index.h("slot", { key: '6aba88b9857866d246270d6a7c0ebe9ba67c5d74' }), index.h("span", { key: '2e0454ef021e537917aad2227fd75e66b421761c', slot: "description" }, index.h("slot", { key: 'a7779fbb7ce77d4d24ac834bd302e3aa437610ab', name: "body" })), index.h("span", { key: 'c0c82b1f5470dfd8f7b75474b4730e679c2641d7', slot: "buttons" }, index.h("slot", { key: '1a9ec3da3c50fe815e4502ec71218c8a21dc3b1c', name: "buttons" })))), index.h("div", { key: 'e758d3071a54afdad44903e0002d5aa8a50b17e0', class: "illustrated-card__illustration-area" }, index.h("slot", { key: '9521bbe523e32015e5bfd8f56cdcc1959e382fc2', name: "illustration" }))))));
     }
 };
 AfIllustratedCard.style = afIllustratedCardCss;

package/dist/cjs/af-image.cjs.entry.js

@@ -19,7 +19,7 @@ const AfImage = class {
         this.shape = 'rounded';
     }
     render() {
-        return (index.h(index.Host, { key: 'a8954272f3c0defc0b9e33d5f3221c6e1083d927' }, index.h("div", { key: '2fd3bad5b46360cac57d069031ec2f69103f6542', class: `image-container image-container--${this.shape}` }, index.h("img", { key: '72a11cde6b65481320d8b6a1d65e85862d4a449e', src: this.src, alt: this.alt, class: "image" }), index.h("div", { key: '7727e1ac4179e96f8c8928de678136337bd82f44', class: "image-border", "aria-hidden": "true" }))));
+        return (index.h(index.Host, { key: '4f48634e84e032c9a93cf48444709146ffe591b7' }, index.h("div", { key: 'c26f889afa7c3d35e5f65dcc23d63a41a9c0987e', class: `image-container image-container--${this.shape}` }, index.h("img", { key: 'c1474197475df3bff2263b509f3abf59a53aa932', src: this.src, alt: this.alt, class: "image" }), index.h("div", { key: 'bb6e0cae628bf65e423d5986df8ed119af74e699', class: "image-border", "aria-hidden": "true" }))));
     }
 };
 AfImage.style = afImageCss;

package/dist/cjs/af-in-page-banner.cjs.entry.js

@@ -38,7 +38,7 @@ const AfInPageBanner = class {
         return (index.h("div", { class: "banner__wave-overlay", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 521 323", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "banner__wave-svg" }, index.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 (index.h(index.Host, { key: '87abd1c23d56419cbbaf1c34230afa17f7ccffa8' }, index.h("div", { key: 'ea56f17212a63e56bf1339009dbbac39835aacf3', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), index.h("div", { key: '09016e39680edb60995ce373f906025d86e4c9d4', class: "banner__illustration" }, this.illustrationUrl ? (index.h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (index.h("slot", { name: "illustration" }))), index.h("div", { key: 'aebd3b10940e61b6b24a4592741173e175b8f17a', class: "banner__content" }, index.h("div", { key: 'e3f900a1775c905f4e5816ed56fc7ccfd48581a7', class: "banner__copy" }, index.h("h2", { key: 'fde36b2f853c379ab9434c2619eb9b5959f47a66', class: "banner__heading" }, index.h("slot", { key: 'd872bb70022c71240442fbf884e2479332657973', name: "heading" }, this.heading)), index.h("div", { key: '21728ca79ef014f2397da9c9bea6e42d278fdcbf', class: "banner__description" }, index.h("slot", { key: '5c383f37817482d3865d0aa9f4119522ef6b9152', name: "description" }, this.description))), index.h("div", { key: '057731169459a52833810baf53ad3f62c4687693', class: "banner__buttons" }, index.h("slot", { key: '1e6da776478fd903694226b78ccf4b99f9848d39', name: "buttons" }, this.primaryButtonText && (index.h("af-button", { key: '8c930f1b11bcd07a1078caa8a65dc29ef9a625f4', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (index.h("af-button", { key: '0b57d550f76dd26b2d5253f618fb4cd03cfd5186', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
+        return (index.h(index.Host, { key: '022f98e0925a4cdc04db66889b266f1741932513' }, index.h("div", { key: '64f60ef33b18ba4e0e20d5248a3a8d396a72b4cd', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), index.h("div", { key: '26ff6aefd41268a5bece7fb2c5161cfacd38d54e', class: "banner__illustration" }, this.illustrationUrl ? (index.h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (index.h("slot", { name: "illustration" }))), index.h("div", { key: '025c1664b11d6531d2471ab652a0715e58ee5d46', class: "banner__content" }, index.h("div", { key: 'e58cc91158e663068ddaa01fd9776135055769fc', class: "banner__copy" }, index.h("h2", { key: '7f3afcf9b28cbc1b924f6dec0bf4882c64b1c306', class: "banner__heading" }, index.h("slot", { key: 'ac04c8f27d294f97f79ab11595ce4c1e12e3d9f3', name: "heading" }, this.heading)), index.h("div", { key: '7b5a689cf681591d8eac098f9e0a8d3b01348140', class: "banner__description" }, index.h("slot", { key: '724079691b59aab3f336a3524b85f5fe27ad754d', name: "description" }, this.description))), index.h("div", { key: 'e4d8eedee783e6b48ca780bf95337048384165fc', class: "banner__buttons" }, index.h("slot", { key: 'e1b5995706145354b41daa5a774086ddaa65accc', name: "buttons" }, this.primaryButtonText && (index.h("af-button", { key: 'c5e797d3c62876d4ba964272efe7d9d97b962a36', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (index.h("af-button", { key: 'e4a8ba0065181b3201f906fdc718595ad9bdd4fc', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
     }
 };
 AfInPageBanner.style = afInPageBannerCss;

package/dist/cjs/af-inline.cjs.entry.js

@@ -49,7 +49,7 @@ const AfInline = class {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (index.h(index.Host, { key: '3dce5c336021a6c5046258120a72f3087a421e2a', style: style }, index.h("slot", { key: '28fb5aff7cb1a0edf1389bc7146d21560313468c' })));
+        return (index.h(index.Host, { key: '7069c721994bbd1acc8d57875522dbefdaf796d9', style: style }, index.h("slot", { key: 'e39c2d982cca56ab6545e3e8a43eea7696708f21' })));
     }
 };
 AfInline.style = afInlineCss;

package/dist/cjs/af-input.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-BuJz1C1M.js');
 
-const afInputCss = ":host{display:block;width:100%}.input-wrapper{display:flex;flex-direction:column;gap:var(--sds-size-space-200, 8px);width:100%}.label-row{display:flex;align-items:center;gap:12px}.label{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:16px;line-height:24px;color:var(--af-input-label, var(--af-typography-body-dark, #14343b));cursor:default}.required{color:var(--af-input-error, var(--colour-error, #be292a));margin-left:2px}.info-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0}.info-icon svg{width:20px;height:20px}.info-icon:hover{opacity:0.7}.info-icon:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.description{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-description, var(--af-typography-body-default, #2b484f));margin:0}.input-container{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--af-input-bg, #ffffff);border:1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));border-radius:var(--radii-input, 8px);transition:all 0.15s ease;min-height:48px;box-sizing:border-box}.input-container.hovered{background:var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));border-color:var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1))}.input-container.focused{background:var(--af-input-bg, #ffffff);border-color:var(--af-input-border-active, var(--af-typography-body-dark, #14343b));box-shadow:0 0 0 4px var(--af-background-base, #ffffff), \n    0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b))}.input-container.error{border-color:var(--af-input-border-error, var(--colour-error, #be292a))}.input-container.disabled{background:var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));border-color:var(--af-input-border, var(--af-background-border-default, #d1ddda));cursor:not-allowed}.search-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-icon, var(--af-background-icon-default, #14343b))}.search-icon svg{width:20px;height:20px}.disabled .search-icon{opacity:0.5}.input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-text, var(--af-typography-body-dark, #14343b));outline:none}.input::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));opacity:1}.input:disabled{cursor:not-allowed;color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.input:disabled::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.input[type=\"search\"]::-webkit-search-decoration,.input[type=\"search\"]::-webkit-search-cancel-button,.input[type=\"search\"]::-webkit-search-results-button,.input[type=\"search\"]::-webkit-search-results-decoration{display:none}.input[type=\"number\"]::-webkit-inner-spin-button,.input[type=\"number\"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input[type=\"number\"]{-moz-appearance:textfield}.clear-button{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0;opacity:0.6;transition:opacity 0.15s ease}.clear-button svg{width:16px;height:16px}.clear-button:hover{opacity:1}.clear-button:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.error-row{display:flex;align-items:center;gap:12px}.error-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-error, var(--colour-error, #be292a))}.error-icon svg{width:20px;height:20px}.error-text{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-error, var(--colour-error, #be292a))}";
+const afInputCss = ":host{display:block;width:100%}.input-wrapper{display:flex;flex-direction:column;gap:var(--sds-size-space-200, 8px);width:100%}.label-row{display:flex;align-items:center;gap:12px}.label{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:16px;line-height:24px;color:var(--af-input-label, var(--af-typography-body-dark, #14343b));cursor:default}.required{color:var(--af-input-error, var(--colour-error, #be292a));margin-left:2px}.info-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0}.info-icon svg{width:20px;height:20px}.info-icon:hover{opacity:0.7}.info-icon:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.description{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-description, var(--af-typography-body-default, #2b484f));margin:0}.input-container{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--af-input-bg, #ffffff);border:1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));border-radius:var(--radii-input, 8px);transition:all 0.15s ease;min-height:48px;box-sizing:border-box}.input-container.hovered{background:var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));border-color:var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1))}.input-container.focused{background:var(--af-input-bg, #ffffff);border-color:var(--af-input-border-active, var(--af-typography-body-dark, #14343b));box-shadow:0 0 0 4px var(--af-background-base, #ffffff), \n    0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b))}.input-container.error{border-color:var(--af-input-border-error, var(--colour-error, #be292a))}.input-container.disabled{background:var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));border-color:var(--af-input-border, var(--af-background-border-default, #d1ddda));cursor:not-allowed}.search-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-icon, var(--af-background-icon-default, #14343b))}.search-icon svg{width:20px;height:20px}.disabled .search-icon{opacity:0.5}.input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-text, var(--af-typography-body-dark, #14343b));outline:none}.input::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));opacity:1}.input:disabled{cursor:not-allowed;color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.input:disabled::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.input[type=\"search\"]::-webkit-search-decoration,.input[type=\"search\"]::-webkit-search-cancel-button,.input[type=\"search\"]::-webkit-search-results-button,.input[type=\"search\"]::-webkit-search-results-decoration{display:none}.input[type=\"number\"]::-webkit-inner-spin-button,.input[type=\"number\"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input[type=\"number\"]{-moz-appearance:textfield}.clear-button{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0;opacity:0.6;transition:opacity 0.15s ease}.clear-button svg{width:16px;height:16px}.clear-button:hover{opacity:1}.clear-button:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.input-container--multiline{padding:0;min-height:0;overflow:hidden}.input--multiline{flex:1;min-width:0;min-height:108px;padding:12px 16px;border:none;background:transparent;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-text, var(--af-typography-body-dark, #14343b));outline:none;resize:vertical}.input--multiline::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));opacity:1}.input--multiline:disabled{cursor:not-allowed;color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));resize:none}.input--multiline:disabled::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.error-row{display:flex;align-items:center;gap:12px}.error-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-error, var(--colour-error, #be292a))}.error-icon svg{width:20px;height:20px}.error-text{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-regular, 400);font-size:16px;line-height:24px;color:var(--af-input-error, var(--colour-error, #be292a))}";
 
 const AfInput = class {
     constructor(hostRef) {
@@ -17,7 +17,8 @@ const AfInput = class {
          */
         this.value = '';
         /**
-         * The input type (text, email, password, number, tel, url, search)
+         * The input type (text, email, password, number, tel, url, search).
+         * Ignored when `multiline` is true.
          */
         this.type = 'text';
         /**
@@ -37,13 +38,27 @@ const AfInput = class {
          */
         this.showInfoIcon = false;
         /**
-         * Whether to show a search icon in the input
+         * Whether to show a search icon in the input. Ignored when `multiline` is true.
          */
         this.showSearchIcon = false;
         /**
-         * Whether to show a clear button when input has value
+         * Whether to show a clear button when input has value. Ignored when `multiline` is true.
          */
         this.clearable = false;
+        /**
+         * Render as a multi-line textarea instead of a single-line input.
+         * Activates `rows` and `resize` props; ignores `type`, `pattern`,
+         * `autocomplete`, `showSearchIcon`, `clearable`.
+         */
+        this.multiline = false;
+        /**
+         * Number of visible rows when `multiline` is true. Ignored otherwise.
+         */
+        this.rows = 4;
+        /**
+         * Whether the textarea is resizable. Ignored when `multiline` is false.
+         */
+        this.resize = 'vertical';
         this.isFocused = false;
         this.isHovered = false;
         this.handleInput = (event) => {
@@ -80,8 +95,10 @@ const AfInput = class {
     render() {
         const hasError = !!this.error;
         const hasValue = !!(this.value && this.value.length > 0);
+        const multiline = this.multiline;
         const wrapperClasses = {
             'input-wrapper': true,
+            'input-wrapper--multiline': multiline,
             'disabled': this.disabled,
             'error': hasError,
             'focused': this.isFocused,
@@ -90,12 +107,13 @@ const AfInput = class {
         };
         const inputContainerClasses = {
             'input-container': true,
+            'input-container--multiline': multiline,
             'disabled': this.disabled,
             'error': hasError,
             'focused': this.isFocused,
             'hovered': this.isHovered && !this.disabled && !this.isFocused
         };
-        return (index.h(index.Host, { key: '5bf8980e12ad5fc3b8b84df3acc749bddf61042d' }, index.h("div", { key: 'd0266eca85871397ed73381ca3d36f3dc2dd79ce', class: wrapperClasses }, this.label && (index.h("div", { key: 'f9fc2fe3f52a1f9be1404943d91489357ea941dc', class: "label-row" }, index.h("label", { key: '76283a7f0c9be127aa8c9115fcbc26b2d67d51cc', class: "label", htmlFor: "input" }, this.label, this.required && index.h("span", { key: '6b0de23e857abfdd25d6eefaa6ff22f22fa813dd', class: "required" }, "*")), this.showInfoIcon && (index.h("button", { key: '7c5f7a47a8357301f3fe28d6078bdec3ec1160c3', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, index.h("svg", { key: '655c9448589937c2047a58962f78ab1872e0da84', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '5066c29389ac8f9e1e27771f43a98f75f9b03634', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: '1993da070066d33575618267d6af5b13b641143b', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: 'dd99ac12d4a23b98c98fca1df34916968276fc0e', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("slot", { key: 'b406de5a455af79a69497c6a641b5c41347ee1ab', name: "label-end" }))), this.description && (index.h("p", { key: '0dcebb186df7055efb168f96ad4199e2f614a87c', class: "description" }, this.description)), index.h("div", { key: '754b8a3e67d5807d7d484d475d31913dee8004f4', class: inputContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.showSearchIcon && (index.h("span", { key: '5757962a3479a6cd1f12bd1da183919af69ad9f4', class: "search-icon" }, index.h("svg", { key: '4106175e5b41e4c978b38eda6db36799a6a6f762', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '1d54b9a8c682c9049e97b28143f0dcd90e068dee', d: "M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: 'd3ed0187abde8c14eae462612c918e10cb46916d', d: "M21 21L16.65 16.65", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("input", { key: 'fb7a551d44282686732b78865bab8720c5e08830', ref: (el) => this.inputEl = el ?? undefined, id: "input", class: "input", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, autocomplete: this.autocomplete, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.clearable && hasValue && !this.disabled && !this.readonly && (index.h("button", { key: '6ad41a3ee4ffdbeefa11e45754a22143b33405e5', type: "button", class: "clear-button", onClick: this.handleClear, "aria-label": "Clear input" }, index.h("svg", { key: '129f73660030e81ff17071fae51bb34af23eca57', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '78d4c71521ac7daced7023c5bcfb2bfccf593fab', d: "M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: '4eb85452029e8347dd648dcc849fa000b41b7fea', d: "M6 6L18 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), hasError && (index.h("div", { key: 'cc3b6083e88bb99ec17edffbf95ec89e2bb27e97', class: "error-row", id: "error-message" }, index.h("span", { key: 'fe264a854aaebe481a6913275859ca57b1d61d0d', class: "error-icon" }, index.h("svg", { key: '1159f77b184d1888c5c5ebe6138070c66abb66e6', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '59975a202086127c2548843e842d33895d6ba1ff', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: '11c79f296c1dce73beebd67eeefe3d71b17ee191', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: '9f146c96a38b14afb1919cf480224ee520ac16b0', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("span", { key: '2d326d0d72727dca4c4839fb5279323e556fbe04', class: "error-text" }, this.error))))));
+        return (index.h(index.Host, { key: '55cf204d355367913c765891190048599a46653e' }, index.h("div", { key: '8f72840a7a6fa8615e535f171f5297fb5d0cdfe5', class: wrapperClasses }, this.label && (index.h("div", { key: '06711c6031da07fca88bd438db7fb80acc12df71', class: "label-row" }, index.h("label", { key: '1db607ff65a624aa2520bdfbc2063c0f6587b00c', class: "label", htmlFor: "input" }, this.label, this.required && index.h("span", { key: 'd2ffc85aafb99e5fc7723993354a23fd99f04ac6', class: "required" }, "*")), this.showInfoIcon && (index.h("button", { key: '1adcddb4121582d35eff611d8299ff4ed6d0cc24', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, index.h("svg", { key: 'e1abef80244c616ba98f89d23f9a4b6b2e4d97e1', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'fedd67859d45345298c7e6e4a67e1e98ac4a9178', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: '076a1ff76cc8b5287dd29df42d6b629d34ae739e', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: '640f19dd94e31f1090704ccc534b3917cc70a905', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("slot", { key: 'e3b42a60ad6b2378ab6593e239208b847d20c8ad', name: "label-end" }))), this.description && (index.h("p", { key: '8bf359cd53f562bedbe29f54004d5a974398db7b', class: "description" }, this.description)), index.h("div", { key: 'eb5a21523188828d60713cc772a477fa2a22a3a3', class: inputContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, !multiline && this.showSearchIcon && (index.h("span", { key: 'ed8945ddd4601e3d2ef84f2644a7ab567156157a', class: "search-icon" }, index.h("svg", { key: '2684f4233757a74cb55abfb1e62481e5848a5fbc', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'f6855623658e5ea149421b37f039967e6622c955', d: "M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: 'db81f64ac649e9f41bfdb47a287d3e671951f171', d: "M21 21L16.65 16.65", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), multiline ? (index.h("textarea", { ref: (el) => this.inputEl = el ?? undefined, id: "input", class: "input input--multiline", name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, rows: this.rows, maxlength: this.maxlength, minlength: this.minlength, style: { resize: this.resize }, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })) : (index.h("input", { ref: (el) => this.inputEl = el ?? undefined, id: "input", class: "input", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, autocomplete: this.autocomplete, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), !multiline && this.clearable && hasValue && !this.disabled && !this.readonly && (index.h("button", { key: 'ed7c9c3753fd291aa1105c2f30e00a2b2868efed', type: "button", class: "clear-button", onClick: this.handleClear, "aria-label": "Clear input" }, index.h("svg", { key: '0615828eb7d27c6cf45fa7f91b25a14dd97fe972', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '6a60d954427656fcc01940dd861c37bd214570d0', d: "M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: '9471a7899c62b9fbce7ceafc4986b29c0000f26f', d: "M6 6L18 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), hasError && (index.h("div", { key: '1972022a3ca5a7f366a83cf35e2eecb4b812bd29', class: "error-row", id: "error-message" }, index.h("span", { key: '450e80c8d42914048eb114a222d9db8e9b94d3fa', class: "error-icon" }, index.h("svg", { key: '57eeb2884b16a9adf5fe0744814d00465da436e1', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '9e25cb82f47c915b4c4afa0283a143c9221b465c', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: 'faf252192e9a4706c5ed363ba240a0cb1ddf6770', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: '4eda8b2840b7bf70919460ffe46e54d702ec3191', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("span", { key: 'a22e99093a097f8c7be12c8aa4a1b65a87484eb3', class: "error-text" }, this.error))))));
     }
 };
 AfInput.style = afInputCss;