npm - @affinda/wc - Versions diffs - 0.0.19 → 0.0.21 - Mend

@affinda/wc 0.0.19 → 0.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (466) hide show

package/dist/cjs/af-client-carousel.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-client-carousel.entry.cjs.js","sources":["src/components/af-client-carousel/af-client-carousel.css?tag=af-client-carousel&encapsulation=shadow","src/components/af-client-carousel/af-client-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.client-carousel {\n padding: 48px 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-container {\n display: flex;\n flex-direction: column;\n gap: var(--space-4, 16px);\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-row {\n display: flex;\n width: 100%;\n overflow: hidden;\n position: relative;\n}\n\n.logo-track {\n display: flex;\n gap: var(--space-4, 16px);\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n/* Scroll left animation /\n.scroll-left .logo-track {\n animation-name: scroll-left;\n animation-duration: 40s;\n}\n\n/ Scroll right animation /\n.scroll-right .logo-track {\n animation-name: scroll-right;\n animation-duration: 40s;\n}\n\n/ Pause animation on hover /\n:host(:hover) .logo-track {\n animation-play-state: paused;\n}\n\n@keyframes scroll-left {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n\n@keyframes scroll-right {\n 0% {\n transform: translateX(-50%);\n }\n 100% {\n transform: translateX(0);\n }\n}\n\n/ Style slotted container divs as flex rows with proper gap /\n::slotted() {\n display: flex;\n flex-shrink: 0;\n gap: var(--space-4, 16px);\n align-items: center;\n}\n\n/* ==========================================================================\n Theme Variants\n ========================================================================== /\n\n/ INKWELL THEME (Default) /\n:host(.theme-inkwell),\n.client-carousel.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-well-bg: var(--colour-background-level1-dark, #203e45);\n --af-carousel-logo-color: white;\n --af-carousel-logo-filter: brightness(0) invert(1);\n}\n\n/ WHITE THEME /\n:host(.theme-white),\n.client-carousel.theme-white {\n background-color: var(--colour-brand-white, #FFFFFF);\n --af-carousel-logo-well-bg: var(--colour-background-level1, #e8eeed);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ MIST-GREEN THEME /\n:host(.theme-mist-green),\n.client-carousel.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #C6D5D1);\n --af-carousel-logo-well-bg: var(--colour-mistgreen-300, #dde6e3);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ SOFT-CLAY THEME /\n:host(.theme-soft-clay),\n.client-carousel.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n --af-carousel-logo-well-bg: var(--colour-softclay-200, #d5c5b0);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ WHITE-IVORY THEME /\n:host(.theme-white-ivory),\n.client-carousel.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n --af-carousel-logo-well-bg: var(--colour-softclay-100, #f2eadc);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ ==========================================================================\n Responsive Adjustments\n ========================================================================== /\n\n/ Tablet adjustments /\n@media (max-width: 1024px) {\n .client-carousel {\n padding: 32px 0;\n }\n}\n\n/ Mobile adjustments /\n@media (max-width: 767px) {\n .client-carousel {\n padding: 24px 0;\n }\n \n .carousel-container {\n gap: var(--space-3, 12px);\n }\n \n .logo-track {\n gap: var(--space-3, 12px);\n }\n \n ::slotted() {\n gap: var(--space-3, 12px);\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Theme = 'white' \| 'inkwell' \| 'mist-green' \| 'soft-clay' \| 'white-ivory';\n\n/*\n Infinite scrolling carousel for client logos.\n * \n * This is a section-level component that spans full width.\n * It ~~supports~~ ~~theming~~ ~~via~~ the ~~`theme`~~ ~~prop.\~~n * \n * For headlines, use a separate TypographyLockup or Heading component above this carousel.\n /\n@Component({\n tag: 'af-client-carousel',\n styleUrl: 'af-client-carousel.css',\n shadow: true,\n})\nexport class AfClientCarousel {\n /* Theme - sets background color and provides theme context to children /\n @Prop() theme: Theme = 'inkwell';\n\n render() {\n return (\n <Host class={`theme-${this.theme}`}>\n <div class={`client-carousel theme-${this.theme}`}>\n <div class=\"carousel-container\">\n ~~{/ Top row - scrolls left /}\n~~ <div class=\"carousel-row scroll-left\">\n <div class=\"logo-track\">\n <slot name=\"row-1\"></slot>\n <slot name=\"row-1\"></slot>\n </div>\n </div>\n \n {/ ~~Bottom~~ ~~row~~ - ~~scrolls right */}~~\n <div class=\"carousel-row scroll-right\">\n <div class=\"logo-track\">\n <slot name=\"row-2\"></slot>\n <slot name=\"row-2\"></slot>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,46EAA46E;;~~MCiB37E~~,gBAAgB,GAAA,MAAA;AAL7B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAU,SAAS;~~AA2BjC~~;~~IAzBC~~,MAAM,GAAA;~~AACJ~~,~~QAAA~~,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAChCD,~~OAAA~~,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EAAK~~,KAAK,EAAE,~~CAAA~~,~~sBAAA,EAAyB,~~IAAI,CAAC,KAAK,~~CAAE~~,CAAA,EAAA,~~EAC/CA~~,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,~~EAE7BA~~,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,~~EAAQ~~,CAAA,~~EAC1BA~~,~~OAAA~~,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EAAM~~,IAAI,EAAC,OAAO,EAAA,~~CAAQ~~,~~CACtB~~,CACF,~~EAGNA~~,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC1BA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,CACtB,CACF,~~CACF~~,CACF,CACD;;;;;;;"}
1	+ {"version":3,"file":"af-client-carousel.entry.cjs.js","sources":["src/components/af-client-carousel/af-client-carousel.css?tag=af-client-carousel&encapsulation=shadow","src/components/af-client-carousel/af-client-carousel.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.client-carousel {\n padding: 48px 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-container {\n display: flex;\n flex-direction: column;\n gap: var(--space-4, 16px);\n width: 100%;\n overflow: hidden;\n}\n\n.carousel-row {\n display: flex;\n width: 100%;\n overflow: hidden;\n position: relative;\n}\n\n.logo-track {\n display: flex;\n gap: var(--space-4, 16px);\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n}\n\n/* Scroll left animation /\n.scroll-left .logo-track {\n animation-name: scroll-left;\n animation-duration: 40s;\n}\n\n/ Scroll right animation /\n.scroll-right .logo-track {\n animation-name: scroll-right;\n animation-duration: 40s;\n}\n\n/ Pause animation on hover /\n:host(:hover) .logo-track {\n animation-play-state: paused;\n}\n\n@keyframes scroll-left {\n 0% {\n transform: translateX(0);\n }\n 100% {\n transform: translateX(-50%);\n }\n}\n\n@keyframes scroll-right {\n 0% {\n transform: translateX(-50%);\n }\n 100% {\n transform: translateX(0);\n }\n}\n\n/ Style slotted container divs as flex rows with proper gap /\n::slotted() {\n display: flex;\n flex-shrink: 0;\n gap: var(--space-4, 16px);\n align-items: center;\n}\n\n/* ==========================================================================\n Theme Variants\n ========================================================================== /\n\n/ INKWELL THEME (Default) /\n:host(.theme-inkwell),\n.client-carousel.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-well-bg: var(--colour-background-level1-dark, #203e45);\n --af-carousel-logo-color: white;\n --af-carousel-logo-filter: brightness(0) invert(1);\n}\n\n/ WHITE THEME /\n:host(.theme-white),\n.client-carousel.theme-white {\n background-color: var(--colour-brand-white, #FFFFFF);\n --af-carousel-logo-well-bg: var(--colour-background-level1, #e8eeed);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ MIST-GREEN THEME /\n:host(.theme-mist-green),\n.client-carousel.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #C6D5D1);\n --af-carousel-logo-well-bg: var(--colour-mistgreen-300, #dde6e3);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ SOFT-CLAY THEME /\n:host(.theme-soft-clay),\n.client-carousel.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n --af-carousel-logo-well-bg: var(--colour-softclay-200, #d5c5b0);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ WHITE-IVORY THEME /\n:host(.theme-white-ivory),\n.client-carousel.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n --af-carousel-logo-well-bg: var(--colour-softclay-100, #f2eadc);\n --af-carousel-logo-color: var(--colour-brand-inkwell, #14343B);\n --af-carousel-logo-filter: none;\n}\n\n/ ==========================================================================\n Responsive Adjustments\n ========================================================================== /\n\n/ Tablet adjustments /\n@media (max-width: 1024px) {\n .client-carousel {\n padding: 32px 0;\n }\n}\n\n/ Mobile adjustments /\n@media (max-width: 767px) {\n .client-carousel {\n padding: 24px 0;\n }\n \n .carousel-container {\n gap: var(--space-3, 12px);\n }\n \n .logo-track {\n gap: var(--space-3, 12px);\n }\n \n ::slotted() {\n gap: var(--space-3, 12px);\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype Theme = 'white' \| 'inkwell' \| 'mist-green' \| 'soft-clay' \| 'white-ivory';\n\n/*\n Infinite scrolling carousel for client logos.\n \n This is a section-level component that spans full width.\n * Renders one or two scrolling rows; single row matches the Webflow reference,\n * two rows (scrolling opposite directions) is the denser variant.\n \n For headlines, use a separate TypographyLockup or Heading component above this carousel.\n /\n@Component({\n tag: 'af-client-carousel',\n styleUrl: 'af-client-carousel.css',\n shadow: true,\n})\nexport class AfClientCarousel {\n /* Theme - sets background color and provides theme context to children /\n @Prop() theme: Theme = 'inkwell';\n\n /\n Number of scrolling rows.\n * - `1` (default) — single row scrolling left, matches the Webflow reference.\n * - `2` — two rows scrolling in opposite directions.\n \n When `rows=\"2\"`, slot `row-1` and `row-2` independently.\n * When `rows=\"1\"`, slot the default slot (unnamed) or `row-1`.\n */\n @Prop() rows: 1 \| 2 = 1;\n\n render() {\n const rows = Number(this.rows);\n return (\n <Host class={`theme-${this.theme}`}>\n <div class={`client-carousel theme-${this.theme} rows-${rows}`}>\n <div class=\"carousel-container\">\n <div class=\"carousel-row scroll-left\">\n <div class=\"logo-track\">\n <slot name=\"row-1\">\n <slot></slot>\n </slot>\n <slot name=\"row-1\">\n <slot></slot>\n </slot>\n </div>\n </div>\n\n {rows === 2 && (\n <div class=\"carousel-row scroll-right\">\n <div class=\"logo-track\">\n <slot name=\"row-2\"></slot>\n <slot name=\"row-2\"></slot>\n </div>\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,46EAA46E;;MCkB37E,gBAAgB,GAAA,MAAA;AAL7B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAU,SAAS;AAEhC;;;;;;;AAOG;AACK,QAAA,IAAI,CAAA,IAAA,GAAU,CAAC;AAgCxB;IA9BC,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;QAC9B,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAChCD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,yBAAyB,IAAI,CAAC,KAAK,CAAA,MAAA,EAAS,IAAI,CAAA,CAAE,EAAA,EAC5DA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAA,EAChBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,EACPA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAA,EAChBA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR,CACH,CACF,EAEL,IAAI,KAAK,CAAC,KACTA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC1BA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,CACtB,CACF,CACP,CACG,CACF,CACD;;;;;;;"}

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

@@ -13,7 +13,7 @@ const AfContactItem = class {
         this.value = '';
     }
     render() {
-        return (index.h(index.Host, { key: '25c9989697baa866874a566ea76bad08946773fc' }, index.h("div", { key: 'ad2ada738e77fd5f1c03cdc2beba65c1cfb6f827', class: "contact-item" }, this.label && (index.h("h5", { key: '7d7105256639744dff5e640ea8f5842f6d10d1ee', class: "contact-item__label" }, this.label)), this.value && (index.h("p", { key: 'c661a4a566280c5470d917f537c85fa7afd09d44', class: "contact-item__value" }, this.value)), index.h("slot", { key: 'd7f1e94f19e5fbcbc25fcccf57f39d68fda88d61' }))));
+        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' }))));
     }
 };
 AfContactItem.style = afContactItemCss;

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

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

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

@@ -89,13 +89,13 @@ const AfFeatureAccordion = class {
     render() {
         const items = this.getItems();
         const currentItem = items[this.expandedIndex];
-        return (index.h(index.Host, { key: '7dea35d43a55761d3e36564de53886910cf43269' }, index.h("div", { key: 'f53d9194b7b3e0ca17f3507cae98af2f70d694f4', class: "feature-accordion" }, index.h("div", { key: 'f0f3ae26b637c86a754f536a45c30d2538d6f189', class: "feature-accordion__container" }, index.h("h2", { key: '5572067284f6d8c14b9b78104a7d89cc562319d7', class: "feature-accordion__heading" }, this.heading), index.h("div", { key: '953eb50fc040115ef17e2668362526e5c5aa20c2', class: "feature-accordion__content" }, index.h("div", { key: '035699b851f330d0b61c86f3e06aca2d6a2eb8ce', class: "feature-accordion__list" }, items.map((item, index$1) => (index.h("div", { class: {
+        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: {
                 '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" }, this.expandedIndex === index$1 ? (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M5 12H19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }))) : (index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M12 5V19M5 12H19", 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: '60b8b8c12647e3c0d49c61a260a69354ed7e529f', class: "feature-accordion__image-container" }, index.h("div", { key: '2f916ff6544cb4574e887b4a4155f2aaf83343c1', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (index.h("img", { key: '53db01fe2689049546729652973eb2c6246c01aa', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (index.h("div", { key: 'f79c210e398ccb423a48a40afee74d295117a42a', class: "feature-accordion__image-placeholder" }, index.h("slot", { key: '1fa843fb1b02413dc831023cb9957c96e0a4fa15', 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: '3fb45ba49e71139f9b2900e66a4684c4591869eb', class: "feature-accordion__image-container" }, index.h("div", { key: '4fca54dae38f0048a2788b75c01a2ec0f6611a0a', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (index.h("img", { key: '8b4fbc1e2c47a2c583eb15e321c1ff0584560fb2', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (index.h("div", { key: '3615b11c145bd994167396c526d49044f14981bb', class: "feature-accordion__image-placeholder" }, index.h("slot", { key: 'bc066019ed3fae731a76d41ba9992e5fec58282b', name: "image" }))))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -80,7 +80,7 @@ const AfFeatureGrid = class {
             [`feature-grid--mobile-${this.mobileLayout}`]: true,
         };
         const showProgressLine = this.mobileLayout === 'scroll';
-        return (index.h(index.Host, { key: '143cda464ef9d63cf4a4190fed2ec938438a6e2f' }, index.h("div", { key: '602a26836a596570c5ed3bc0679158718c32f125', class: gridClasses }, index.h("div", { key: '5844b5a699d3be238730c4b94012048a6c5a2b72', class: "feature-grid__cards" }, index.h("slot", { key: '8447309016d09376256c066f7f732a938066d8cf' })), showProgressLine && (index.h("div", { key: '7c798167883b9e231bbca9e124515ec418459dd5', class: "feature-grid__progress" }, index.h("af-progress-line", { key: '3e321ef9f01dc390156e51efcad4d988fc144fad', progress: this.scrollProgress }))))));
+        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 }))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -11,7 +11,7 @@ const AfFooterColumn = class {
         this.heading = '';
     }
     render() {
-        return (index.h(index.Host, { key: '675f525c7548bf5b1566c91fb26315451064079f' }, index.h("div", { key: '6acde9560897e0f7ecf5644a1f0ea26e8ff8239e', class: "footer-column" }, this.heading && (index.h("h5", { key: '19444320ae2cee0a0e5aa5c88dc02789d013749f', class: "footer-column__heading" }, this.heading)), index.h("ul", { key: '770eab7015f5cd480436c31ddbd58bfacc076b30', class: "footer-column__list" }, index.h("slot", { key: '9c71065b4fc32344bcc90bf0ac4766554fc4b84f' })))));
+        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' })))));
     }
 };
 AfFooterColumn.style = afFooterColumnCss;

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

@@ -13,7 +13,7 @@ const AfFooterLink = class {
         this.external = false;
     }
     render() {
-        return (index.h(index.Host, { key: '4c8565ffc90c571aa34c4a7b60e782519caa866f' }, index.h("li", { key: 'a23edb8dda823b10747e1927acb1c402da15890f' }, index.h("a", { key: 'e58f7d1ee389fc21c5f4513af0fee59cdd5d9890', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, index.h("slot", { key: '8f1fcb75860c1b7046c596702660f59aa5399f45' }), this.external && (index.h("svg", { key: '54195a756acbe32c01e814e25be8d6dca24ccabc', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, index.h("path", { key: 'baba36e00a1632e089340dafa1a2f1dc434801e4', d: "M10 6.5v3a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7.5 1.5h3v3M5.5 6.5l5-5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (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" })))))));
     }
 };
 AfFooterLink.style = afFooterLinkCss;

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

@@ -19,7 +19,7 @@ const AfFooter = class {
         this.showStatus = true;
     }
     render() {
-        return (index.h(index.Host, { key: 'cb150b784dd5bf43eca9b014d2f1cffd6ce9ae66' }, index.h("footer", { key: 'd625ee7e4ababf20b4629e192350f9f721ec8399', class: "footer" }, index.h("div", { key: '1378e675a4894ea1ba000927e5c6fc72985700ae', class: "footer__container" }, index.h("div", { key: '7a250ef4b2dce3019e26cc9d6b04397754a374ea', class: "footer__top" }, index.h("div", { key: '6abf819fff33c52a70a3b7b92388213c07f13647', class: "footer__brand" }, index.h("div", { key: '05cb8a0de6df6792e08fecb34ff8b07a6f6e7f51', class: "footer__brand-card" }, index.h("div", { key: '52ac66df35016dcc4a93a7684c6b6a99a96c6227', class: "footer__logo" }, index.h("slot", { key: '87918d5e37c324d4b8ea31a6405f03ae540e4d6e', name: "logo" })), index.h("div", { key: '55e6a3cc404da02b19f7ce1bc1f90d1dbf5b5549', class: "footer__social" }, index.h("slot", { key: 'b28bf973a05b7a8ef1c26956b1ea1a3f7e07de5a', name: "social" }))), index.h("div", { key: '84192d593a0a7fe2592975fcbecf7e35e81b49af', class: "footer__contact-card" }, index.h("slot", { key: '8bb25d9ab4a3659b2f171b706268796f79361c19', name: "contact" }))), index.h("div", { key: '7d734e6f509999419a0bbf716b224c322bfef234', class: "footer__nav" }, index.h("div", { key: '406da5392a399a4d1c1e98889a01cc8c8fc3f18a', class: "footer__nav-columns" }, index.h("slot", { key: 'bf422aeca3942072261b2a5f8fbc77309d2bb76c', name: "nav" })), this.showStatus && (index.h("div", { key: '738dc3e32b6c6e2cacd0dc4b97d4f3520b5482af', class: "footer__status" }, index.h("span", { key: 'ccf1cc242f2b367c5e3c2064b5e51f9f623f5e7d', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), index.h("span", { key: 'bc41ea24a56f349814f079f2db28f5cc266b7e83', class: "footer__status-text" }, this.statusText), this.statusUrl && (index.h("a", { key: '6c5c8c2feffc98154a77336178a6f9ac63cbac1e', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), index.h("div", { key: 'f3f9d665f7c4f2a336e15a795377bcbd01d10950', class: "footer__bottom" }, this.copyrightText && (index.h("p", { key: '943181dfb341d268301db656fdd4b778581d6dd1', class: "footer__copyright" }, this.copyrightText)), index.h("div", { key: '9909918646c1cfa7765accf8b9d3017a792cc860', class: "footer__legal" }, index.h("slot", { key: '3b7ba2443306b2bbd48843af246a7407c9cbf2a5', name: "legal" })), index.h("div", { key: 'c954830920c2e75b2b203640bd8970942eabf0d7', class: "footer__badges" }, index.h("slot", { key: '35bb8c9c487eae7f15ac6b4558070096497ed997', name: "badges" })))))));
+        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" })))))));
     }
 };
 AfFooter.style = afFooterCss;

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

@@ -28,14 +28,14 @@ const AfGrid = class {
             end: 'end',
             stretch: 'stretch',
         };
-        return (index.h(index.Host, { key: '3043700eaf21addce4bd20eb107790fea7a7f5cc', style: {
+        return (index.h(index.Host, { key: '41b45cace33676321f420513cbede95926b49edb', style: {
                 '--grid-columns': String(this.columns),
                 '--grid-columns-lg': String(this.columnsLg ?? this.columns),
                 '--grid-columns-md': String(this.columnsMd ?? this.columnsLg ?? this.columns),
                 '--grid-columns-sm': String(this.columnsSm ?? this.columnsMd ?? this.columnsLg ?? 1),
                 '--grid-gap': `var(--space-${this.gap})`,
                 '--grid-align': alignMap[this.align],
-            } }, index.h("div", { key: 'fd9bfb0ab2982d4d48ccaa4dc20889cde822a25a', class: "grid" }, index.h("slot", { key: '8dd95107a71f18910ac3b27b2f8e074f87bacff2' }))));
+            } }, index.h("div", { key: 'fe4ed4d11f35ce8476c16df6f2202655da181cbd', class: "grid" }, index.h("slot", { key: '2f2bb80eccf44fbc41029498e0b6ce758c33c5d9' }))));
     }
 };
 AfGrid.style = afGridCss;

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

@@ -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: '961d990c78faedbaa7595e26966edd712ffe323a' }, index.h("div", { key: '499bd1a36c589994cd1f1c848450aa0fe3d43ac0', class: containerClasses }, index.h("af-icon", { key: '6b48d327dc1a712e764f9ff783ba904252f9873d', name: this.icon, size: iconSize }))));
+        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 }))));
     }
 };
 AfIconBox.style = afIconBoxCss;

package/dist/cjs/af-icon-button.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var index = require('./index-n-fnurTP.js');
-const afIconButtonCss = ":host{display:inline-block}:host([variant=\"secondary\"]){color:var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}:host([variant=\"primary\"]){color:var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B))}:host([variant=\"tertiary\"]){color:var(--af-button-tertiary-icon, var(--colour-brand-inkwell, #14343B))}.icon-button{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:all 0.2s ease;border:1px solid transparent;box-sizing:border-box;flex-shrink:0;text-decoration:none;padding:0}.size-large{width:72px;height:72px;padding:24px}.size-large .icon{width:24px;height:24px}.size-medium{width:48px;height:48px;padding:12px}.size-medium .icon{width:24px;height:24px}.size-small{width:36px;height:36px;padding:8px}.size-small .icon{width:20px;height:20px}.icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.icon ::slotted(*){width:100%;height:100%;color:inherit}.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));border-color:var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));color:var(--af-button-primary-text, var(--colour-brand-inkwell, #14343B))}.variant-primary:hover:not(.disabled){background:var(--af-button-primary-bg-hover, #95e6e2)}.variant-primary:active:not(.disabled){background:var(--af-button-primary-bg-hover, #95e6e2)}.variant-secondary{background:var(--af-button-secondary-bg, transparent);border-color:var(--af-button-secondary-stroke, currentColor);color:var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}.variant-secondary:hover:not(.disabled){background:var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1))}.variant-secondary:active:not(.disabled){background:var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1))}.variant-tertiary{background:transparent;border-color:transparent;color:var(--af-button-tertiary-text, var(--colour-brand-inkwell, #14343B))}.variant-tertiary:hover:not(.disabled){opacity:0.8}.variant-tertiary:active:not(.disabled){opacity:0.6}.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}button.icon-button{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer}button.icon-button.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));border:1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B))}button.icon-button.variant-secondary{background:var(--af-button-secondary-bg, transparent);border:1px solid var(--af-button-secondary-stroke, currentColor);color:var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}button.icon-button.variant-tertiary{background:transparent;border:1px solid transparent}";
+const afIconButtonCss = ":host{display:inline-block}:host([variant=\"secondary\"]){color:var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}:host([variant=\"primary\"]){color:var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B))}:host([variant=\"tertiary\"]){color:var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343B))}.icon-button{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:all 0.2s ease;border:1px solid transparent;box-sizing:border-box;flex-shrink:0;text-decoration:none;padding:0}.size-large{width:72px;height:72px;padding:24px}.size-large .icon{width:24px;height:24px}.size-medium{width:48px;height:48px;padding:12px}.size-medium .icon{width:24px;height:24px}.size-small{width:36px;height:36px;padding:8px}.size-small .icon{width:20px;height:20px}.icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}.icon ::slotted(*){width:100%;height:100%;color:inherit}.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));border-color:var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));color:var(--af-button-primary-text, var(--colour-brand-inkwell, #14343B))}.variant-primary:hover:not(.disabled){background:var(--af-button-primary-bg-hover, #95e6e2)}.variant-primary:active:not(.disabled){background:var(--af-button-primary-bg-hover, #95e6e2)}.variant-secondary{background:var(--af-button-secondary-bg, transparent);border-color:var(--af-button-secondary-stroke, currentColor);color:var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}.variant-secondary:hover:not(.disabled){background:var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1))}.variant-secondary:active:not(.disabled){background:var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1))}.variant-tertiary{background:transparent;border-color:transparent;color:var(--af-button-ghost-text, var(--colour-brand-inkwell, #14343B))}.variant-tertiary:hover:not(.disabled){opacity:0.8}.variant-tertiary:active:not(.disabled){opacity:0.6}.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}button.icon-button{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer}button.icon-button.variant-primary{background:var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));border:1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B))}button.icon-button.variant-secondary{background:var(--af-button-secondary-bg, transparent);border:1px solid var(--af-button-secondary-stroke, currentColor);color:var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)))}button.icon-button.variant-tertiary{background:transparent;border:1px solid transparent}";
 const AfIconButton = class {
     constructor(hostRef) {

package/dist/cjs/af-icon-button.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-icon-button.entry.cjs.js","sources":["src/components/af-icon-button/af-icon-button.css?tag=af-icon-button&encapsulation=shadow","src/components/af-icon-button/af-icon-button.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n/* Set color on host for slotted content inheritance /\n:host([variant=\"secondary\"]) {\n color: var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n:host([variant=\"primary\"]) {\n color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n:host([variant=\"tertiary\"]) {\n color: var(--af-button-~~tertiary~~-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n.icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.2s ease;\n border: 1px solid transparent;\n box-sizing: border-box;\n flex-shrink: 0;\n text-decoration: none;\n padding: 0;\n}\n\n/ Size variants /\n.size-large {\n width: 72px;\n height: 72px;\n padding: 24px;\n}\n\n.size-large .icon {\n width: 24px;\n height: 24px;\n}\n\n.size-medium {\n width: 48px;\n height: 48px;\n padding: 12px;\n}\n\n.size-medium .icon {\n width: 24px;\n height: 24px;\n}\n\n.size-small {\n width: 36px;\n height: 36px;\n padding: 8px;\n}\n\n.size-small .icon {\n width: 20px;\n height: 20px;\n}\n\n/ Icon slot - inherits color from parent /\n.icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: inherit;\n}\n\n.icon ::slotted() {\n width: 100%;\n height: 100%;\n color: inherit;\n}\n\n/* Primary variant (ice background) /\n.variant-primary {\n background: var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));\n border-color: var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));\n color: var(--af-button-primary-text, var(--colour-brand-inkwell, #14343B));\n}\n\n.variant-primary:hover:not(.disabled) {\n background: var(--af-button-primary-bg-hover, #95e6e2);\n}\n\n.variant-primary:active:not(.disabled) {\n background: var(--af-button-primary-bg-hover, #95e6e2);\n}\n\n/ Secondary variant (outlined) /\n.variant-secondary {\n background: var(--af-button-secondary-bg, transparent);\n border-color: var(--af-button-secondary-stroke, currentColor);\n color: var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n.variant-secondary:hover:not(.disabled) {\n background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n}\n\n.variant-secondary:active:not(.disabled) {\n background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n}\n\n/ Tertiary variant (minimal, no border) /\n.variant-tertiary {\n background: transparent;\n border-color: transparent;\n color: var(--af-button-~~tertiary~~-text, var(--colour-brand-inkwell, #14343B));\n}\n\n.variant-tertiary:hover:not(.disabled) {\n opacity: 0.8;\n}\n\n.variant-tertiary:active:not(.disabled) {\n opacity: 0.6;\n}\n\n/ Disabled state /\n.disabled {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/ Remove default button styles /\nbutton.icon-button {\n background: none;\n border: none;\n padding: 0;\n font: inherit;\n color: inherit;\n cursor: pointer;\n}\n\nbutton.icon-button.variant-primary {\n background: var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));\n border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));\n}\n\nbutton.icon-button.variant-secondary {\n background: var(--af-button-secondary-bg, transparent);\n border: 1px solid var(--af-button-secondary-stroke, currentColor);\n color: var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\nbutton.icon-button.variant-tertiary {\n background: transparent;\n border: 1px solid transparent;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n tag: 'af-icon-button',\n styleUrl: 'af-icon-button.css',\n shadow: true\n})\nexport class AfIconButton {\n /\n The visual variant of the button.\n * - `primary` - Main CTA with filled ice background\n * - `secondary` - Supporting action with white background\n * - `tertiary` - Minimal style with transparent background\n /\n @Prop({ reflect: true }) variant: 'primary' \| 'secondary' \| 'tertiary' = 'primary';\n\n /\n The size of the button\n /\n @Prop() size: 'large' \| 'medium' \| 'small' = 'medium';\n\n /\n Whether the button is disabled\n /\n @Prop() disabled: boolean = false;\n\n /\n Optional href to render as a link\n /\n @Prop() href?: string;\n\n /\n Button type (when not using href)\n /\n @Prop() type: 'button' \| 'submit' \| 'reset' = 'button';\n\n /\n Accessible label for screen readers\n */\n @Prop() ariaLabel!: string;\n\n render() {\n const classes = {\n 'icon-button': true,\n [`variant-${this.variant}`]: true,\n [`size-${this.size}`]: true,\n 'disabled': this.disabled\n };\n\n const content = (\n <span class=\"icon\">\n <slot></slot>\n </span>\n );\n\n if (this.href && !this.disabled) {\n return (\n <Host>\n <a href={this.href} class={classes} aria-label={this.ariaLabel}>\n {content}\n </a>\n </Host>\n );\n }\n\n return (\n <Host>\n <button type={this.type} disabled={this.disabled} class={classes} aria-label={this.ariaLabel}>\n {content}\n </button>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,~~szFAAszF~~;;~~MCOj0F~~,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAyC,SAAS;AAElF;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAErD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAOjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAuCvD;IAhCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC;SAClB;QAED,MAAM,OAAO,IACXA,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EAChBA,OAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACR,CACR;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC/B,YAAA,QACEA,QAACC,UAAI,EAAA,IAAA,EACHD,OAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAc,YAAA,EAAA,IAAI,CAAC,SAAS,EAAA,EAC3D,OAAO,CACN,CACC;;AAIX,QAAA,QACEA,QAACC,UAAI,EAAA,IAAA,EACHD,OAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAc,YAAA,EAAA,IAAI,CAAC,SAAS,IACzF,OAAO,CACD,CACJ;;;;;;;"}
1	+ {"version":3,"file":"af-icon-button.entry.cjs.js","sources":["src/components/af-icon-button/af-icon-button.css?tag=af-icon-button&encapsulation=shadow","src/components/af-icon-button/af-icon-button.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n/* Set color on host for slotted content inheritance /\n:host([variant=\"secondary\"]) {\n color: var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n:host([variant=\"primary\"]) {\n color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n:host([variant=\"tertiary\"]) {\n color: var(--af-button-ghost-icon, var(--colour-brand-inkwell, #14343B));\n}\n\n.icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.2s ease;\n border: 1px solid transparent;\n box-sizing: border-box;\n flex-shrink: 0;\n text-decoration: none;\n padding: 0;\n}\n\n/ Size variants /\n.size-large {\n width: 72px;\n height: 72px;\n padding: 24px;\n}\n\n.size-large .icon {\n width: 24px;\n height: 24px;\n}\n\n.size-medium {\n width: 48px;\n height: 48px;\n padding: 12px;\n}\n\n.size-medium .icon {\n width: 24px;\n height: 24px;\n}\n\n.size-small {\n width: 36px;\n height: 36px;\n padding: 8px;\n}\n\n.size-small .icon {\n width: 20px;\n height: 20px;\n}\n\n/ Icon slot - inherits color from parent /\n.icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: inherit;\n}\n\n.icon ::slotted() {\n width: 100%;\n height: 100%;\n color: inherit;\n}\n\n/* Primary variant (ice background) /\n.variant-primary {\n background: var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));\n border-color: var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));\n color: var(--af-button-primary-text, var(--colour-brand-inkwell, #14343B));\n}\n\n.variant-primary:hover:not(.disabled) {\n background: var(--af-button-primary-bg-hover, #95e6e2);\n}\n\n.variant-primary:active:not(.disabled) {\n background: var(--af-button-primary-bg-hover, #95e6e2);\n}\n\n/ Secondary variant (outlined) /\n.variant-secondary {\n background: var(--af-button-secondary-bg, transparent);\n border-color: var(--af-button-secondary-stroke, currentColor);\n color: var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\n.variant-secondary:hover:not(.disabled) {\n background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n}\n\n.variant-secondary:active:not(.disabled) {\n background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));\n}\n\n/ Tertiary variant (minimal, no border) /\n.variant-tertiary {\n background: transparent;\n border-color: transparent;\n color: var(--af-button-ghost-text, var(--colour-brand-inkwell, #14343B));\n}\n\n.variant-tertiary:hover:not(.disabled) {\n opacity: 0.8;\n}\n\n.variant-tertiary:active:not(.disabled) {\n opacity: 0.6;\n}\n\n/ Disabled state /\n.disabled {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/ Remove default button styles /\nbutton.icon-button {\n background: none;\n border: none;\n padding: 0;\n font: inherit;\n color: inherit;\n cursor: pointer;\n}\n\nbutton.icon-button.variant-primary {\n background: var(--af-button-primary-bg, var(--colour-brand-ice, #A6FFFB));\n border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343B));\n}\n\nbutton.icon-button.variant-secondary {\n background: var(--af-button-secondary-bg, transparent);\n border: 1px solid var(--af-button-secondary-stroke, currentColor);\n color: var(--af-button-secondary-text, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));\n}\n\nbutton.icon-button.variant-tertiary {\n background: transparent;\n border: 1px solid transparent;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n tag: 'af-icon-button',\n styleUrl: 'af-icon-button.css',\n shadow: true\n})\nexport class AfIconButton {\n /\n The visual variant of the button.\n * - `primary` - Main CTA with filled ice background\n * - `secondary` - Supporting action with white background\n * - `tertiary` - Minimal style with transparent background\n /\n @Prop({ reflect: true }) variant: 'primary' \| 'secondary' \| 'tertiary' = 'primary';\n\n /\n The size of the button\n /\n @Prop() size: 'large' \| 'medium' \| 'small' = 'medium';\n\n /\n Whether the button is disabled\n /\n @Prop() disabled: boolean = false;\n\n /\n Optional href to render as a link\n /\n @Prop() href?: string;\n\n /\n Button type (when not using href)\n /\n @Prop() type: 'button' \| 'submit' \| 'reset' = 'button';\n\n /\n Accessible label for screen readers\n */\n @Prop() ariaLabel!: string;\n\n render() {\n const classes = {\n 'icon-button': true,\n [`variant-${this.variant}`]: true,\n [`size-${this.size}`]: true,\n 'disabled': this.disabled\n };\n\n const content = (\n <span class=\"icon\">\n <slot></slot>\n </span>\n );\n\n if (this.href && !this.disabled) {\n return (\n <Host>\n <a href={this.href} class={classes} aria-label={this.ariaLabel}>\n {content}\n </a>\n </Host>\n );\n }\n\n return (\n <Host>\n <button type={this.type} disabled={this.disabled} class={classes} aria-label={this.ariaLabel}>\n {content}\n </button>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,eAAe,GAAG,gzFAAgzF;;MCO3zF,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;AAKG;AACsB,QAAA,IAAO,CAAA,OAAA,GAAyC,SAAS;AAElF;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAErD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAOjC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;AAuCvD;IAhCC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,aAAa,EAAE,IAAI;AACnB,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;AACjC,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC;SAClB;QAED,MAAM,OAAO,IACXA,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EAChBA,OAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACR,CACR;QAED,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AAC/B,YAAA,QACEA,QAACC,UAAI,EAAA,IAAA,EACHD,OAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAc,YAAA,EAAA,IAAI,CAAC,SAAS,EAAA,EAC3D,OAAO,CACN,CACC;;AAIX,QAAA,QACEA,QAACC,UAAI,EAAA,IAAA,EACHD,OAAQ,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAc,YAAA,EAAA,IAAI,CAAC,SAAS,IACzF,OAAO,CACD,CACJ;;;;;;;"}

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

@@ -27,7 +27,7 @@ const AfIconText = class {
             'icon-text': true,
             [`icon-text--${this.orientation}`]: true,
         };
-        return (index.h(index.Host, { key: '05f526330b69a8868f4d5d98e43ba59367a17319' }, index.h("div", { key: '1f64e5aa24607f13916bbde18e2ec9427c9a3f7c', class: containerClasses }, index.h("af-icon-box", { key: '9db629d1afad970e95194b87796b56abc6b94b27', icon: this.icon, size: this.iconSize, class: "icon-text__icon" }), index.h("af-typography-lockup", { key: '998fa3c49a6f8eca89d4235d8f2c6b226671ba04', headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "icon-text__lockup" }, index.h("slot", { key: 'd2d2e7054010367e338d54788b4f3ed8d0c157d7' }), index.h("span", { key: 'e31750f8dc682839c544dba6ea924fd21a454e52', slot: "description" }, index.h("slot", { key: '10248d219f5125818d91a41d2472bcad65e24b4f', name: "description" })), index.h("span", { key: '634276962dea534962e7a33dbcb9d87f98ca968f', slot: "buttons" }, index.h("slot", { key: 'b52e5205b2a9e3d7947c8978050b15c2431e5f8a', name: "buttons" }))))));
+        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" }))))));
     }
 };
 AfIconText.style = afIconTextCss;

package/dist/cjs/af-icon-text.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-icon-text.entry.cjs.js","sources":["src/components/af-icon-text/af-icon-text.css?tag=af-icon-text&encapsulation=scoped","src/components/af-icon-text/af-icon-text.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.icon-text {\n display: flex;\n width: 100%;\n}\n\n/* Vertical orientation - icon above text /\n.icon-text--vertical {\n flex-direction: column;\n gap: 24px;\n align-items: flex-start;\n}\n\n/ Horizontal orientation - icon beside text /\n.icon-text--horizontal {\n flex-direction: row;\n gap: 20px;\n align-items: flex-start;\n}\n\n.icon-text__icon {\n flex-shrink: 0;\n}\n\n.icon-text__lockup {\n flex: 1;\n min-width: 0;\n}\n\n/ Mobile adjustments /\n@media (max-width: 768px) {\n .icon-text--vertical {\n gap: 20px;\n }\n\n .icon-text--horizontal {\n gap: 16px;\n }\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\nimport type { IconName } from '@affinda/icons';\n\n/\n IconText molecule - combines an IconBox with a TypographyLockup for feature items.\n * \n * Composes:\n * - af-icon-box: Themed icon container\n * - af-typography-lockup: Heading, description, and button slots\n * \n * Inherits theme colors from parent Section via CSS custom properties.\n * \n * @slot - Heading text content (passed to TypographyLockup)\n * @slot description - Body/description text\n * @slot buttons - Action buttons (typically ~~tertiary~~ style)\n * \n * @example\n * ```html\n * <af-icon-text icon=\"settings\" heading-size=\"4\">\n * Feature Heading\n * <span slot=\"description\">Feature description text.</span>\n * <af-button slot=\"buttons\" variant=\"~~tertiary~~\">Learn more</af-button>\n * </af-icon-text>\n * ```\n /\n@Component({\n tag: 'af-icon-text',\n styleUrl: 'af-icon-text.css',\n shadow: false,\n scoped: true,\n})\nexport class AfIconText {\n /\n The icon name to display in the IconBox\n /\n @Prop() icon!: IconName;\n\n /\n Heading size for the typography lockup (1-5, where 1 is largest)\n /\n @Prop() headingSize: 1 \| 2 \| 3 \| 4 \| 5 = 4;\n\n /\n Layout orientation\n * - 'vertical': Icon above text (default, used in grid layouts)\n * - 'horizontal': Icon beside text (used in compact layouts)\n /\n @Prop() orientation: 'vertical' \| 'horizontal' = 'vertical';\n\n /\n Size of the icon box\n */\n @Prop() iconSize: 'small' \| 'default' \| 'large' = 'default';\n\n render() {\n const containerClasses = {\n 'icon-text': true,\n [`icon-text--${this.orientation}`]: true,\n };\n\n return (\n <Host>\n <div class={containerClasses}>\n <af-icon-box \n icon={this.icon} \n size={this.iconSize}\n class=\"icon-text__icon\"\n ></af-icon-box>\n \n <af-typography-lockup\n headingSize={this.headingSize}\n textAlignment=\"left\"\n buttonAlignment=\"vertical\"\n class=\"icon-text__lockup\"\n >\n <slot></slot>\n <span slot=\"description\">\n <slot name=\"description\"></slot>\n </span>\n <span slot=\"buttons\">\n <slot name=\"buttons\"></slot>\n </span>\n </af-typography-lockup>\n </div>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,yeAAye;;MC+Blf,UAAU,GAAA,MAAA;AANvB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAYE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAsB,CAAC;AAE1C;;;;AAIG;AACK,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AAE3D;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAkC,SAAS;AAmC5D;IAjCC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,WAAW,EAAE,IAAI;AACjB,YAAA,CAAC,cAAc,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;SACzC;AAED,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1BA,OAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAC,iBAAiB,EACV,CAAA,EAEfA,OAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU,EAC1B,KAAK,EAAC,mBAAmB,EAAA,EAEzBA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACbA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC3B,EACPA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACvB,CACc,CACnB,CACD;;;;;;;"}
1	+ {"version":3,"file":"af-icon-text.entry.cjs.js","sources":["src/components/af-icon-text/af-icon-text.css?tag=af-icon-text&encapsulation=scoped","src/components/af-icon-text/af-icon-text.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.icon-text {\n display: flex;\n width: 100%;\n}\n\n/* Vertical orientation - icon above text /\n.icon-text--vertical {\n flex-direction: column;\n gap: 24px;\n align-items: flex-start;\n}\n\n/ Horizontal orientation - icon beside text /\n.icon-text--horizontal {\n flex-direction: row;\n gap: 20px;\n align-items: flex-start;\n}\n\n.icon-text__icon {\n flex-shrink: 0;\n}\n\n.icon-text__lockup {\n flex: 1;\n min-width: 0;\n}\n\n/ Mobile adjustments /\n@media (max-width: 768px) {\n .icon-text--vertical {\n gap: 20px;\n }\n\n .icon-text--horizontal {\n gap: 16px;\n }\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\nimport type { IconName } from '@affinda/icons';\n\n/\n IconText molecule - combines an IconBox with a TypographyLockup for feature items.\n * \n * Composes:\n * - af-icon-box: Themed icon container\n * - af-typography-lockup: Heading, description, and button slots\n * \n * Inherits theme colors from parent Section via CSS custom properties.\n * \n * @slot - Heading text content (passed to TypographyLockup)\n * @slot description - Body/description text\n * @slot buttons - Action buttons (typically ghost style)\n * \n * @example\n * ```html\n * <af-icon-text icon=\"settings\" heading-size=\"4\">\n * Feature Heading\n * <span slot=\"description\">Feature description text.</span>\n * <af-button slot=\"buttons\" variant=\"ghost\">Learn more</af-button>\n * </af-icon-text>\n * ```\n /\n@Component({\n tag: 'af-icon-text',\n styleUrl: 'af-icon-text.css',\n shadow: false,\n scoped: true,\n})\nexport class AfIconText {\n /\n The icon name to display in the IconBox\n /\n @Prop() icon!: IconName;\n\n /\n Heading size for the typography lockup (1-5, where 1 is largest)\n /\n @Prop() headingSize: 1 \| 2 \| 3 \| 4 \| 5 = 4;\n\n /\n Layout orientation\n * - 'vertical': Icon above text (default, used in grid layouts)\n * - 'horizontal': Icon beside text (used in compact layouts)\n /\n @Prop() orientation: 'vertical' \| 'horizontal' = 'vertical';\n\n /\n Size of the icon box\n */\n @Prop() iconSize: 'small' \| 'default' \| 'large' = 'default';\n\n render() {\n const containerClasses = {\n 'icon-text': true,\n [`icon-text--${this.orientation}`]: true,\n };\n\n return (\n <Host>\n <div class={containerClasses}>\n <af-icon-box \n icon={this.icon} \n size={this.iconSize}\n class=\"icon-text__icon\"\n ></af-icon-box>\n \n <af-typography-lockup\n headingSize={this.headingSize}\n textAlignment=\"left\"\n buttonAlignment=\"vertical\"\n class=\"icon-text__lockup\"\n >\n <slot></slot>\n <span slot=\"description\">\n <slot name=\"description\"></slot>\n </span>\n <span slot=\"buttons\">\n <slot name=\"buttons\"></slot>\n </span>\n </af-typography-lockup>\n </div>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,yeAAye;;MC+Blf,UAAU,GAAA,MAAA;AANvB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAYE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAsB,CAAC;AAE1C;;;;AAIG;AACK,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AAE3D;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAkC,SAAS;AAmC5D;IAjCC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,WAAW,EAAE,IAAI;AACjB,YAAA,CAAC,cAAc,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;SACzC;AAED,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1BA,OAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAC,iBAAiB,EACV,CAAA,EAEfA,OAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU,EAC1B,KAAK,EAAC,mBAAmB,EAAA,EAEzBA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACbA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC3B,EACPA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACvB,CACc,CACnB,CACD;;;;;;;"}

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

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

package/dist/cjs/af-illustrated-card.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-illustrated-card.entry.cjs.js","sources":["src/components/af-illustrated-card/af-illustrated-card.css?tag=af-illustrated-card&encapsulation=scoped","src/components/af-illustrated-card/af-illustrated-card.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n width: 100%;\n \n /* Override card atom defaults - illustrated card handles its own spacing /\n --af-card-padding: 0;\n --af-card-gap: 0;\n}\n\n/ ==========================================================================\n Base Illustrated Card Styles\n ========================================================================== /\n\n.illustrated-card {\n min-height: 400px;\n}\n\n/ ==========================================================================\n Content Area\n ========================================================================== /\n\n.illustrated-card__content {\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n z-index: 1;\n}\n\n/ Desktop default size spacing /\n.illustrated-card--breakpoint-desktop.illustrated-card--size-default .illustrated-card__content {\n padding: 40px 32px 12px 32px;\n}\n\n/ Desktop large size spacing /\n.illustrated-card--breakpoint-desktop.illustrated-card--size-large .illustrated-card__content {\n padding: 40px 40px 0 40px;\n}\n\n/ Mobile spacing /\n.illustrated-card--breakpoint-mobile .illustrated-card__content {\n padding: 32px 24px 12px 24px;\n}\n\n/ ==========================================================================\n Illustration Area\n ========================================================================== /\n\n.illustrated-card__illustration-area {\n position: relative;\n width: 100%;\n flex: 1;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 24px;\n box-sizing: border-box;\n}\n\n/ Desktop illustration area height /\n.illustrated-card--breakpoint-desktop .illustrated-card__illustration-area {\n min-height: 160px;\n}\n\n/ Mobile illustration area height /\n.illustrated-card--breakpoint-mobile .illustrated-card__illustration-area {\n min-height: 192px;\n}\n\n/ Illustration placeholder for when using data attributes /\n.illustrated-card__illustration-placeholder {\n width: 100%;\n height: 100%;\n min-height: 120px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/ Illustration image styling /\n.illustrated-card__illustration-area ::slotted(img),\n.illustrated-card__illustration-area img {\n max-width: 100%;\n max-height: 200px;\n height: auto;\n object-fit: contain;\n}\n\n/ ==========================================================================\n Typography Lockup Styling\n ========================================================================== /\n\n/ Pass theme colors to typography lockup /\n.illustrated-card af-typography-lockup {\n --colour-typography-heading-primary: var(--af-typography-heading-primary);\n --colour-typography-body-default: var(--af-typography-body-default);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/\n Illustrated Card molecule component that combines a card with an illustration.\n * \n * Uses a theme background with text at top and an illustration from\n * @affinda/illustrations at the bottom.\n * \n * Uses af-card atom internally and af-typography-lockup for text hierarchy.\n * \n * @slot - Heading text content\n * @slot body - Description/body text content\n * @slot illustration - Illustration image element\n /\n@Component({\n tag: 'af-illustrated-card',\n styleUrl: 'af-illustrated-card.css',\n shadow: false,\n scoped: true,\n})\nexport class AfIllustratedCard {\n /\n Theme variant - sets background color and provides theme context.\n * Defaults to 'mist-green'.\n /\n @Prop() theme?: 'white' \| 'white-ivory' \| 'inkwell' \| 'mist-green' \| 'soft-clay' = 'mist-green';\n\n /\n Responsive breakpoint for typography sizing.\n /\n @Prop() breakpoint: 'desktop' \| 'mobile' = 'desktop';\n\n /\n Card size variant (applies to desktop only).\n /\n @Prop() cardSize: 'default' \| 'large' = 'default';\n\n render() {\n const wrapperClasses = {\n 'illustrated-card': true,\n [`illustrated-card--breakpoint-${this.breakpoint}`]: true,\n [`illustrated-card--size-${this.cardSize}`]: true,\n };\n\n return (\n <Host>\n <div class={wrapperClasses}>\n <af-card theme={this.theme}>\n {/ Content area with typography lockup /}\n <div class=\"illustrated-card__content\">\n <af-typography-lockup\n headingSize={3}\n breakpoint={this.breakpoint}\n textAlignment=\"left\"\n ~~buttonAlignment~~=\"vertical\"\n >\n <slot></slot>\n <span slot=\"description\">\n <slot name=\"body\"></slot>\n </span>\n </af-typography-lockup>\n </div>\n\n {/ Illustration area at bottom */}\n <div class=\"illustrated-card__illustration-area\">\n <slot name=\"illustration\"></slot>\n </div>\n </af-card>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,m4DAAm4D;;~~MCoBn5D~~,iBAAiB,GAAA,MAAA;AAN9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAsE,YAAY;AAE/F;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAwB,SAAS;~~AAqClD~~;~~IAnCC~~,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,kBAAkB,EAAE,IAAI;AACxB,YAAA,CAAC,gCAAgC,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;AACzD,YAAA,CAAC,0BAA0B,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;SAClD;~~AAED~~,~~QAAA,~~QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxBA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAExBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpCA,OAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAC,MAAM,EACpB,~~eAAe~~,EAAC,UAAU,EAAA,~~EAE1BA~~,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACbA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAQ,CAAA,~~CACpB~~,CACc,CACnB,EAGNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qCAAqC,EAAA,EAC9CA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAA,CAAQ,CAC7B,CACE,CACN,CACD;;;;;;;"}
1	+ {"version":3,"file":"af-illustrated-card.entry.cjs.js","sources":["src/components/af-illustrated-card/af-illustrated-card.css?tag=af-illustrated-card&encapsulation=scoped","src/components/af-illustrated-card/af-illustrated-card.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n width: 100%;\n \n /* Override card atom defaults - illustrated card handles its own spacing /\n --af-card-padding: 0;\n --af-card-gap: 0;\n}\n\n/ ==========================================================================\n Base Illustrated Card Styles\n ========================================================================== /\n\n.illustrated-card {\n min-height: 400px;\n}\n\n/ ==========================================================================\n Content Area\n ========================================================================== /\n\n.illustrated-card__content {\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n z-index: 1;\n}\n\n/ Desktop default size spacing /\n.illustrated-card--breakpoint-desktop.illustrated-card--size-default .illustrated-card__content {\n padding: 40px 32px 12px 32px;\n}\n\n/ Desktop large size spacing /\n.illustrated-card--breakpoint-desktop.illustrated-card--size-large .illustrated-card__content {\n padding: 40px 40px 0 40px;\n}\n\n/ Mobile spacing /\n.illustrated-card--breakpoint-mobile .illustrated-card__content {\n padding: 32px 24px 12px 24px;\n}\n\n/ ==========================================================================\n Illustration Area\n ========================================================================== /\n\n.illustrated-card__illustration-area {\n position: relative;\n width: 100%;\n flex: 1;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 24px;\n box-sizing: border-box;\n}\n\n/ Desktop illustration area height /\n.illustrated-card--breakpoint-desktop .illustrated-card__illustration-area {\n min-height: 160px;\n}\n\n/ Mobile illustration area height /\n.illustrated-card--breakpoint-mobile .illustrated-card__illustration-area {\n min-height: 192px;\n}\n\n/ Illustration placeholder for when using data attributes /\n.illustrated-card__illustration-placeholder {\n width: 100%;\n height: 100%;\n min-height: 120px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/ Illustration image styling /\n.illustrated-card__illustration-area ::slotted(img),\n.illustrated-card__illustration-area img {\n max-width: 100%;\n max-height: 200px;\n height: auto;\n object-fit: contain;\n}\n\n/ ==========================================================================\n Typography Lockup Styling\n ========================================================================== /\n\n/ Pass theme colors to typography lockup /\n.illustrated-card af-typography-lockup {\n --colour-typography-heading-primary: var(--af-typography-heading-primary);\n --colour-typography-body-default: var(--af-typography-body-default);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/\n Illustrated Card molecule component that combines a card with an illustration.\n \n Uses a theme background with text at top, a button row in the middle, and\n * an illustration from @affinda/illustrations at the bottom.\n \n Uses af-card atom internally and af-typography-lockup for text hierarchy.\n \n @slot - Heading text content\n * @slot body - Description/body text content\n * @slot buttons - Action buttons (rendered below the description, above the illustration)\n * @slot illustration - Illustration image element\n /\n@Component({\n tag: 'af-illustrated-card',\n styleUrl: 'af-illustrated-card.css',\n shadow: false,\n scoped: true,\n})\nexport class AfIllustratedCard {\n /\n Theme variant - sets background color and provides theme context.\n * Defaults to 'mist-green'.\n /\n @Prop() theme?: 'white' \| 'white-ivory' \| 'inkwell' \| 'mist-green' \| 'soft-clay' = 'mist-green';\n\n /\n Responsive breakpoint for typography sizing.\n /\n @Prop() breakpoint: 'desktop' \| 'mobile' = 'desktop';\n\n /\n Card size variant (applies to desktop only).\n /\n @Prop() cardSize: 'default' \| 'large' = 'default';\n\n render() {\n const wrapperClasses = {\n 'illustrated-card': true,\n [`illustrated-card--breakpoint-${this.breakpoint}`]: true,\n [`illustrated-card--size-${this.cardSize}`]: true,\n };\n\n return (\n <Host>\n <div class={wrapperClasses}>\n <af-card theme={this.theme}>\n {/ Content area with typography lockup /}\n <div class=\"illustrated-card__content\">\n <af-typography-lockup\n headingSize={3}\n breakpoint={this.breakpoint}\n textAlignment=\"left\"\n buttonLayout=\"vertical\"\n >\n <slot></slot>\n <span slot=\"description\">\n <slot name=\"body\"></slot>\n </span>\n <span slot=\"buttons\">\n <slot name=\"buttons\"></slot>\n </span>\n </af-typography-lockup>\n </div>\n\n {/ Illustration area at bottom */}\n <div class=\"illustrated-card__illustration-area\">\n <slot name=\"illustration\"></slot>\n </div>\n </af-card>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,m4DAAm4D;;MCqBn5D,iBAAiB,GAAA,MAAA;AAN9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOE;;;AAGG;AACK,QAAA,IAAK,CAAA,KAAA,GAAsE,YAAY;AAE/F;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAwB,SAAS;AAwClD;IAtCC,MAAM,GAAA;AACJ,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,kBAAkB,EAAE,IAAI;AACxB,YAAA,CAAC,gCAAgC,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,IAAI;AACzD,YAAA,CAAC,0BAA0B,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;SAClD;QAED,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACxBA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAExBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpCA,OAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAC,MAAM,EACpB,YAAY,EAAC,UAAU,EAAA,EAEvBA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACbA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAQ,CACpB,EACPA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAQ,CAAA,CACvB,CACc,CACnB,EAGNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qCAAqC,EAAA,EAC9CA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,cAAc,EAAA,CAAQ,CAC7B,CACE,CACN,CACD;;;;;;;"}

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

@@ -2,14 +2,24 @@
 var index = require('./index-n-fnurTP.js');
-const afImageCss = ".sc-af-image-h{display:block;width:100%}.image-container.sc-af-image{position:relative;border-radius:var(--radius-md, 12px);overflow:hidden}.image.sc-af-image{display:block;width:100%;height:auto;object-fit:cover}.image-border.sc-af-image{position:absolute;inset:0;border-radius:var(--radius-md, 12px);box-shadow:inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));pointer-events:none}";
+const afImageCss = ".sc-af-image-h{display:block;width:100%}.image-container.sc-af-image{position:relative;overflow:hidden}.image-container--rounded.sc-af-image{border-radius:var(--radius-md, 12px)}.image-container--rounded-left.sc-af-image{border-top-left-radius:var(--radius-md, 12px);border-bottom-left-radius:var(--radius-md, 12px)}.image-container--rounded-right.sc-af-image{border-top-right-radius:var(--radius-md, 12px);border-bottom-right-radius:var(--radius-md, 12px)}.image-container--square.sc-af-image{border-radius:0}.image.sc-af-image{display:block;width:100%;height:auto;object-fit:cover}.image-border.sc-af-image{position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));pointer-events:none;border-radius:inherit}";
 const AfImage = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Shape / corner rounding variant. Matches Webflow's `.image-fill.rounded-*`
+         * patterns where only one edge is rounded so the image bleeds into a
+         * neighbouring section.
+         * - `rounded` (default) — symmetric rounded corners on all four sides.
+         * - `rounded-left` — rounded only on the left edge (top-left + bottom-left).
+         * - `rounded-right` — rounded only on the right edge.
+         * - `square` — no corner rounding.
+         */
+        this.shape = 'rounded';
     }
     render() {
-        return (index.h(index.Host, { key: '96f56008e769e15ec20399b2911563a7be1561b9' }, index.h("div", { key: 'a4b7eb695f4a7074e657f5cfb947a472f3bf9ae9', class: "image-container" }, index.h("img", { key: 'fcd9e6ca93ea345cf7a94a895b5161c79c9fe776', src: this.src, alt: this.alt, class: "image" }), index.h("div", { key: 'cee231a0d19312cc4659da8707d3e31955dcad18', class: "image-border", "aria-hidden": "true" }))));
+        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" }))));
     }
 };
 AfImage.style = afImageCss;

package/dist/cjs/af-image.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-image.entry.cjs.js","sources":["src/components/af-image/af-image.css?tag=af-image&encapsulation=scoped","src/components/af-image/af-image.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.image-container {\n position: relative;\n border-radius: var(--radius-md, 12px);\n ~~overflow~~: ~~hidden~~;\n}\n\n.image {\n display: block;\n width: 100%;\n height: auto;\n object-fit: cover;\n}\n\n/* Inset border overlay /\n.image-border {\n position: absolute;\n inset: 0;\n ~~border-radius: var(--radius-md, 12px);\n~~ box-shadow: inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));\n pointer-events: none;\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/\n A styled image container with rounded corners and a subtle inset border.\n * Provides consistent image styling across the design system.\n /\n@Component({\n tag: 'af-image',\n styleUrl: 'af-image.css',\n shadow: false,\n scoped: true\n})\nexport class AfImage {\n /\n The image source URL\n /\n @Prop() src!: string;\n\n /\n Alternative text for the image (required for accessibility)\n */\n @Prop() alt!: string;\n\n render() {\n return (\n <Host>\n <div class~~=\"~~image-container\">\n <img src={this.src} alt={this.alt} class=\"image\" />\n <div class=\"image-border\" aria-hidden=\"true\"></div>\n </div>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,~~uZAAuZ~~;;~~MCY7Z~~,OAAO,GAAA,MAAA~~;;;;IAWlB~~,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,~~OAAK~~,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EAAA~~,KAAK,~~EAAC~~,~~iBAAiB~~,EAAA,~~EAC1BA~~,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,OAAO,EAAG,CAAA,EACnDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,aAAA,EAAa,MAAM,EAAO,CAAA,CAC/C,CACD;;;;;;;"}
1	+ {"version":3,"file":"af-image.entry.cjs.js","sources":["src/components/af-image/af-image.css?tag=af-image&encapsulation=scoped","src/components/af-image/af-image.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.image-container {\n position: relative;\n overflow: hidden;\n}\n\n/* Shape variants — matches Webflow's rounded-edge image treatments /\n.image-container--rounded {\n border-radius: var(--radius-md, 12px);\n}\n\n.image-container--rounded-left {\n border-top-left-radius: var(--radius-md, 12px);\n border-bottom-left-radius: var(--radius-md, 12px);\n}\n\n.image-container--rounded-right {\n border-top-right-radius: var(--radius-md, 12px);\n border-bottom-right-radius: var(--radius-md, 12px);\n}\n\n.image-container--square {\n border-radius: 0;\n}\n\n.image {\n display: block;\n width: 100%;\n height: auto;\n object-fit: cover;\n}\n\n/ Inset border overlay — inherits the host's border radius via parent clip /\n.image-border {\n position: absolute;\n inset: 0;\n box-shadow: inset 0 0 0 1px var(--af-background-border-subtle, rgba(0, 0, 0, 0.08));\n pointer-events: none;\n border-radius: inherit;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/\n A styled image container with rounded corners and a subtle inset border.\n * Provides consistent image styling across the design system.\n /\n@Component({\n tag: 'af-image',\n styleUrl: 'af-image.css',\n shadow: false,\n scoped: true\n})\nexport class AfImage {\n /\n The image source URL\n /\n @Prop() src!: string;\n\n /\n Alternative text for the image (required for accessibility)\n /\n @Prop() alt!: string;\n\n /\n Shape / corner rounding variant. Matches Webflow's `.image-fill.rounded-`\n patterns where only one edge is rounded so the image bleeds into a\n * neighbouring section.\n * - `rounded` (default) — symmetric rounded corners on all four sides.\n * - `rounded-left` — rounded only on the left edge (top-left + bottom-left).\n * - `rounded-right` — rounded only on the right edge.\n * - `square` — no corner rounding.\n */\n @Prop() shape: 'rounded' \| 'rounded-left' \| 'rounded-right' \| 'square' = 'rounded';\n\n render() {\n return (\n <Host>\n <div class={`image-container image-container--${this.shape}`}>\n <img src={this.src} alt={this.alt} class=\"image\" />\n <div class=\"image-border\" aria-hidden=\"true\"></div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,0vBAA0vB;;MCYhwB,OAAO,GAAA,MAAA;AANpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAiBE;;;;;;;;AAQG;AACK,QAAA,IAAK,CAAA,KAAA,GAA4D,SAAS;AAYnF;IAVC,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,iCAAA,EAAoC,IAAI,CAAC,KAAK,CAAE,CAAA,EAAA,EAC1DA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,OAAO,EAAG,CAAA,EACnDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,aAAA,EAAa,MAAM,EAAO,CAAA,CAC/C,CACD;;;;;;;"}

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

@@ -2,7 +2,7 @@
 var index = require('./index-n-fnurTP.js');
-const afInPageBannerCss = ".sc-af-in-page-banner-h{display:block;width:100%}.banner.sc-af-in-page-banner{position:relative;display:flex;align-items:center;gap:40px;padding-left:40px;padding-right:148px;padding-top:0;padding-bottom:0;border-radius:var(--radii-card-level-1, 32px);overflow:hidden;max-width:1280px;width:100%}.banner.theme-mist-green.sc-af-in-page-banner{background-color:var(--colour-brand-mist-green, #c6d5d1);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-400, #2b484f);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner.theme-inkwell.sc-af-in-page-banner{background-color:var(--colour-brand-inkwell, #14343b);--banner-heading-color:var(--colour-brand-mist-green, #c6d5d1);--banner-body-color:var(--colour-inkwell-100, #d0d6d8);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff)}.banner.theme-soft-clay.sc-af-in-page-banner{background-color:var(--colour-softclay-400, #c0ab8d);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-450, #203e45);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner.theme-white-ivory.sc-af-in-page-banner{background-color:var(--colour-brand-ivory-paper, #fff9ee);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-400, #2b484f);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner__wave-overlay.sc-af-in-page-banner{position:absolute;bottom:-17px;right:-156px;width:521px;height:323px;pointer-events:none;z-index:0}.banner__wave-svg.sc-af-in-page-banner{width:100%;height:100%}.banner.theme-mist-green.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:#d1ddda}.banner.theme-inkwell.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(255, 255, 255, 0.06)}.banner.theme-soft-clay.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(20, 52, 59, 0.06)}.banner.theme-white-ivory.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(20, 52, 59, 0.04)}.banner__illustration.sc-af-in-page-banner{position:relative;z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:360px;height:360px;max-width:360px;max-height:360px;aspect-ratio:1}.banner__illustration-img.sc-af-in-page-banner{width:100%;height:100%;object-fit:contain}.banner__illustration.sc-af-in-page-banner-s>*,.banner__illustration .sc-af-in-page-banner-s>*{width:100%;height:100%;object-fit:contain}.banner__content.sc-af-in-page-banner{position:relative;z-index:1;flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:40px;padding-top:var(--margins-margin-tb-tight, 48px);padding-bottom:var(--margins-margin-tb-tight, 48px);padding-right:0;padding-left:0}.banner__copy.sc-af-in-page-banner{display:flex;flex-direction:column;gap:16px;max-width:840px;width:100%;white-space:pre-wrap}.banner__heading.sc-af-in-page-banner{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--typography-headingweight, 500);font-size:44px;line-height:1;letter-spacing:-0.88px;color:var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));margin:0;white-space:pre-wrap}.banner__description.sc-af-in-page-banner{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--typography-bodyweight, 400);font-size:18px;line-height:26px;color:var(--banner-body-color, var(--colour-inkwell-400, #2b484f));margin:0;white-space:pre-wrap}.banner__buttons.sc-af-in-page-banner{display:flex;flex-direction:row;gap:12px;align-items:flex-start}@media (max-width: 768px){.banner.sc-af-in-page-banner{flex-direction:column;align-items:stretch;padding:224px 0 0 0;border-radius:var(--radii-card-level-1-mobile, 24px);max-width:100%;min-height:auto}.banner__wave-overlay.sc-af-in-page-banner{display:none}.banner__illustration.sc-af-in-page-banner{position:absolute;top:12px;left:auto;right:0;transform:none;width:212px;height:212px;max-width:280px;max-height:280px}.banner__content.sc-af-in-page-banner{width:100%;min-height:320px;padding:16px 28px 48px 28px;gap:40px;flex:none}.banner__copy.sc-af-in-page-banner{max-width:100%}.banner__heading.sc-af-in-page-banner{font-size:32px;letter-spacing:-0.64px}.banner__buttons.sc-af-in-page-banner{flex-direction:column;align-items:stretch;gap:12px;width:100%}.banner__buttons.sc-af-in-page-banner{--af-button-width:100%}.banner__buttons.sc-af-in-page-banner af-button.sc-af-in-page-banner{display:block;width:100%}}@media (max-width: 480px){.banner.sc-af-in-page-banner{padding-top:200px}.banner__illustration.sc-af-in-page-banner{right:0;width:180px;height:180px}.banner__content.sc-af-in-page-banner{padding:16px 20px 36px 20px;min-height:280px}.banner__heading.sc-af-in-page-banner{font-size:28px;letter-spacing:-0.56px}}";
+const afInPageBannerCss = ".sc-af-in-page-banner-h{display:block;width:100%}.banner.sc-af-in-page-banner{position:relative;display:flex;align-items:center;gap:40px;padding-left:40px;padding-right:148px;padding-top:0;padding-bottom:0;border-radius:var(--radii-card-level-1, 32px);overflow:hidden;max-width:1280px;width:100%}.banner.theme-mist-green.sc-af-in-page-banner{background-color:var(--colour-brand-mist-green, #c6d5d1);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-400, #2b484f);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner.theme-inkwell.sc-af-in-page-banner{background-color:var(--colour-brand-inkwell, #14343b);--banner-heading-color:var(--colour-brand-mist-green, #c6d5d1);--banner-body-color:var(--colour-inkwell-100, #d0d6d8);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff)}.banner.theme-soft-clay.sc-af-in-page-banner{background-color:var(--colour-softclay-400, #c0ab8d);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-450, #203e45);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner.theme-white-ivory.sc-af-in-page-banner{background-color:var(--colour-brand-ivory-paper, #fff9ee);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-400, #2b484f);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner__wave-overlay.sc-af-in-page-banner{position:absolute;bottom:-17px;right:-156px;width:521px;height:323px;pointer-events:none;z-index:0}.banner__wave-svg.sc-af-in-page-banner{width:100%;height:100%}.banner.theme-mist-green.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:#d1ddda}.banner.theme-inkwell.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(255, 255, 255, 0.06)}.banner.theme-soft-clay.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(20, 52, 59, 0.06)}.banner.theme-white-ivory.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(20, 52, 59, 0.04)}.banner__illustration.sc-af-in-page-banner{position:relative;z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:360px;height:360px;max-width:360px;max-height:360px;aspect-ratio:1}.banner__illustration-img.sc-af-in-page-banner{width:100%;height:100%;object-fit:contain}.banner__illustration.sc-af-in-page-banner-s>*,.banner__illustration .sc-af-in-page-banner-s>*{width:100%;height:100%;object-fit:contain}.banner__content.sc-af-in-page-banner{position:relative;z-index:1;flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:40px;padding-top:var(--margins-margin-tb-tight, 48px);padding-bottom:var(--margins-margin-tb-tight, 48px);padding-right:0;padding-left:0}.banner__copy.sc-af-in-page-banner{display:flex;flex-direction:column;gap:16px;max-width:840px;width:100%;white-space:normal}.banner__heading.sc-af-in-page-banner{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--typography-headingweight, 500);font-size:44px;line-height:1;letter-spacing:-0.88px;color:var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));margin:0;white-space:normal}.banner__description.sc-af-in-page-banner{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--typography-bodyweight, 400);font-size:18px;line-height:26px;color:var(--banner-body-color, var(--colour-inkwell-400, #2b484f));margin:0;white-space:normal}.banner__buttons.sc-af-in-page-banner{display:flex;flex-direction:row;gap:12px;align-items:flex-start}@media (max-width: 768px){.banner.sc-af-in-page-banner{flex-direction:column;align-items:stretch;padding:224px 0 0 0;border-radius:var(--radii-card-level-1-mobile, 24px);max-width:100%;min-height:auto}.banner__wave-overlay.sc-af-in-page-banner{display:none}.banner__illustration.sc-af-in-page-banner{position:absolute;top:12px;left:auto;right:0;transform:none;width:212px;height:212px;max-width:280px;max-height:280px}.banner__content.sc-af-in-page-banner{width:100%;min-height:320px;padding:16px 28px 48px 28px;gap:40px;flex:none}.banner__copy.sc-af-in-page-banner{max-width:100%}.banner__heading.sc-af-in-page-banner{font-size:32px;letter-spacing:-0.64px}.banner__buttons.sc-af-in-page-banner{flex-direction:column;align-items:stretch;gap:12px;width:100%}.banner__buttons.sc-af-in-page-banner{--af-button-width:100%}.banner__buttons.sc-af-in-page-banner af-button.sc-af-in-page-banner{display:block;width:100%}}@media (max-width: 480px){.banner.sc-af-in-page-banner{padding-top:200px}.banner__illustration.sc-af-in-page-banner{right:0;width:180px;height:180px}.banner__content.sc-af-in-page-banner{padding:16px 20px 36px 20px;min-height:280px}.banner__heading.sc-af-in-page-banner{font-size:28px;letter-spacing:-0.56px}}";
 const AfInPageBanner = class {
     constructor(hostRef) {
@@ -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: '382549642707642ba3182f7bf4391e3254a6cf8e' }, index.h("div", { key: '0d144e64a93e5222c426d0b9d0379a1318538972', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), index.h("div", { key: 'f82845be709ec7e98b84dd5e65f5eb67473c13bb', 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: '73c35ca159f9588ac8fb9c8941ec43ea5ffa0b7a', class: "banner__content" }, index.h("div", { key: '5cab358c648677515bb9bf8f8594d2e37c43af89', class: "banner__copy" }, this.heading && (index.h("h2", { key: 'f0bbe316c200bbf7e6a5406f3e089c0a839e7709', class: "banner__heading" }, this.heading)), this.description && (index.h("p", { key: 'c6a0f293b2eb35489ed97d32ed162791a9087a2d', class: "banner__description" }, this.description))), (this.primaryButtonText || this.secondaryButtonText) && (index.h("div", { key: '87cff6182bb7de438ba7393ae308aaf0fba09814', class: "banner__buttons" }, this.primaryButtonText && (index.h("af-button", { key: 'b3f3c97a10e8571fbbf9ebd20c6773303dc90b18', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (index.h("af-button", { key: 'efae95eebae4dc6401bff0c1219c376f7c7d73a5', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
+        return (index.h(index.Host, { key: 'df17b8226e06ca501e361e95e3628429f1bc7406' }, index.h("div", { key: '7479312bfb457b3629867cb0f6ef87e3e400db14', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), index.h("div", { key: '4d0526f4a6255ecc99daf64081244b9ea51a3e8e', 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: 'ba30cb833bbd77e4d0c752b381be3c869a1864e8', class: "banner__content" }, index.h("div", { key: '43430d9e4d84cd2afd3ab7d535bf5317bf8d9a69', class: "banner__copy" }, index.h("h2", { key: '3d1db708a56ebc55588903150cf8fd894588fefe', class: "banner__heading" }, index.h("slot", { key: '51e7a8a9a2259cf2f51ea9bc4a0c7a95d380f15a', name: "heading" }, this.heading)), index.h("div", { key: 'f6703cfa2724c96bca7bbf774ffac6638e6e339a', class: "banner__description" }, index.h("slot", { key: '6aa35a37f990f0b1a9cdf857f01019e722d73dc9', name: "description" }, this.description))), index.h("div", { key: '2696fc3bdf45b93aea64a0d216b9853a071c445e', class: "banner__buttons" }, index.h("slot", { key: '10356f63627f521666a49f325bb0ee27079f12b5', name: "buttons" }, this.primaryButtonText && (index.h("af-button", { key: 'af09d02a42cc4da47d65dbcef9adf9cc1ffb731c', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (index.h("af-button", { key: '50c10b87f15c91b1fb9ba71cf95ed78d316e0395', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
     }
 };
 AfInPageBanner.style = afInPageBannerCss;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"af-in-page-banner.entry.cjs.js","sources":["src/components/af-in-page-banner/af-in-page-banner.css?tag=af-in-page-banner&encapsulation=scoped","src/components/af-in-page-banner/af-in-page-banner.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* ==========================================================================\n Banner Container\n \n Design specs from Figma:\n - Desktop: max-width 1280px, gap 40px, left padding 40px, right padding 148px\n - Border radius: 32px (desktop), 24px (mobile)\n - Content padding vertical: 48px (margins/margin TB tight)\n ========================================================================== /\n\n.banner {\n position: relative;\n display: flex;\n align-items: center;\n gap: 40px;\n padding-left: 40px;\n padding-right: 148px;\n padding-top: 0;\n padding-bottom: 0;\n border-radius: var(--radii-card-level-1, 32px);\n overflow: hidden;\n max-width: 1280px;\n width: 100%;\n}\n\n/ ==========================================================================\n Theme Variants - Background Colors\n \n Colors from Figma:\n - mist-green: #c6d5d1 (background/base)\n - inkwell: #14343b (Colour/Brand/Inkwell)\n - soft-clay: #c0ab8d (softclay-400)\n - white-ivory: #fff9ee (background/ivory-paper)\n ========================================================================== /\n\n.banner.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #c6d5d1);\n \n / Typography /\n --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n --banner-body-color: var(--colour-inkwell-400, #2b484f);\n \n / Buttons - ice primary, inkwell secondary /\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343b);\n \n / Typography - light colors on dark background /\n --banner-heading-color: var(--colour-brand-mist-green, #c6d5d1);\n --banner-body-color: var(--colour-inkwell-100, #d0d6d8);\n \n / Buttons - ice primary, white secondary /\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n}\n\n.banner.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n \n / Typography /\n --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n --banner-body-color: var(--colour-inkwell-450, #203e45);\n \n / Buttons /\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n \n / Typography /\n --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n --banner-body-color: var(--colour-inkwell-400, #2b484f);\n \n / Buttons /\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n/ ==========================================================================\n Decorative Wave Overlay\n \n Figma specs:\n - Position: bottom -17.41px, right -156px\n - Size: 521px x 323px\n - Fill colors per theme\n ========================================================================== /\n\n.banner__wave-overlay {\n position: absolute;\n bottom: -17px;\n right: -156px;\n width: 521px;\n height: 323px;\n pointer-events: none;\n z-index: 0;\n}\n\n.banner__wave-svg {\n width: 100%;\n height: 100%;\n}\n\n/ ==========================================================================\n Theme-specific Wave Colors\n The SVG uses currentColor, so we set color on the overlay container.\n ========================================================================== /\n\n.banner.theme-mist-green .banner__wave-overlay {\n color: #d1ddda;\n}\n\n.banner.theme-inkwell .banner__wave-overlay {\n color: rgba(255, 255, 255, 0.06);\n}\n\n.banner.theme-soft-clay .banner__wave-overlay {\n color: rgba(20, 52, 59, 0.06);\n}\n\n.banner.theme-white-ivory .banner__wave-overlay {\n color: rgba(20, 52, 59, 0.04);\n}\n\n/ ==========================================================================\n Illustration Area\n \n Figma specs:\n - Desktop: max 360px x 360px, aspect ratio preserved\n - Mobile: 212px x 212px, positioned absolute top-right\n ========================================================================== /\n\n.banner__illustration {\n position: relative;\n z-index: 1;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 360px;\n height: 360px;\n max-width: 360px;\n max-height: 360px;\n aspect-ratio: 1;\n}\n\n.banner__illustration-img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n/ Allow slotted content to fill the illustration area /\n.banner__illustration ::slotted() {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n/* ==========================================================================\n Content Area (Typography Lockup)\n \n Figma specs:\n - Vertical padding: 48px (margins/margin TB tight)\n - Gap between copy and buttons: 40px\n - Gap between heading and description: 16px\n - Max-width for copy: 840px\n ========================================================================== /\n\n.banner__content {\n position: relative;\n z-index: 1;\n flex: 1 1 0;\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n gap: 40px;\n padding-top: var(--margins-margin-tb-tight, 48px);\n padding-bottom: var(--margins-margin-tb-tight, 48px);\n padding-right: 0;\n padding-left: 0;\n}\n\n.banner__copy {\n display: flex;\n flex-direction: column;\n gap: 16px;\n max-width: 840px;\n width: 100%;\n white-space: pre-wrap;\n}\n\n/ ==========================================================================\n Heading\n \n Figma specs:\n - Desktop: 44px, line-height 1, letter-spacing -0.88px (-2%)\n - Mobile: 32px, line-height 1, letter-spacing -0.64px (-2%)\n - Font: Typography/primaryFont (NeuSans), weight: Typography/headingWeight (500)\n ========================================================================== /\n\n.banner__heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--typography-headingweight, 500);\n font-size: 44px;\n line-height: 1;\n letter-spacing: -0.88px;\n color: var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));\n margin: 0;\n white-space: pre-wrap;\n}\n\n/ ==========================================================================\n Description\n \n Figma specs:\n - Font size: 18px\n - Line height: 26px\n - Font: Typography/primaryFont, weight: Typography/bodyWeight (400)\n - Color: typography/body-default #2b484f (or theme variant)\n ========================================================================== /\n\n.banner__description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--typography-bodyweight, 400);\n font-size: 18px;\n line-height: 26px;\n color: var(--banner-body-color, var(--colour-inkwell-400, #2b484f));\n margin: 0;\n white-space: pre-wrap;\n}\n\n/ ==========================================================================\n Button Group\n \n Figma specs:\n - Desktop: horizontal, gap 12px\n - Mobile: vertical, full-width buttons, gap 12px\n - Button padding: 24px horizontal, 12px vertical\n - Button border-radius: 9999px (radii/button)\n ========================================================================== /\n\n.banner__buttons {\n display: flex;\n flex-direction: row;\n gap: 12px;\n align-items: flex-start;\n}\n\n/ ==========================================================================\n Mobile Responsive Styles (≤768px)\n \n Figma mobile specs:\n - Width: 100%\n - Border radius: 24px\n - Padding top: 224px (space for illustration)\n - Content padding: pb 48px, pt 16px, px 28px\n - Content min-height: 320px\n - Illustration: 212px x 212px, positioned at top: 12px, centered horizontally\n ========================================================================== /\n\n@media (max-width: 768px) {\n .banner {\n flex-direction: column;\n align-items: stretch;\n padding: 224px 0 0 0;\n border-radius: var(--radii-card-level-1-mobile, 24px);\n max-width: 100%;\n min-height: auto;\n }\n\n / Wave overlay hidden on mobile /\n .banner__wave-overlay {\n display: none;\n }\n\n / Illustration positioned at top-right on mobile /\n .banner__illustration {\n position: absolute;\n top: 12px;\n left: auto;\n right: 0;\n transform: none;\n width: 212px;\n height: 212px;\n max-width: 280px;\n max-height: 280px;\n }\n\n / Content takes full width with min-height /\n .banner__content {\n width: 100%;\n min-height: 320px;\n padding: 16px 28px 48px 28px;\n gap: 40px;\n flex: none;\n }\n\n / Ensure copy section doesn't constrain width on mobile /\n .banner__copy {\n max-width: 100%;\n }\n\n / Mobile heading size /\n .banner__heading {\n font-size: 32px;\n letter-spacing: -0.64px;\n }\n\n / Buttons stack vertically on mobile, full width /\n .banner__buttons {\n flex-direction: column;\n align-items: stretch;\n gap: 12px;\n width: 100%;\n }\n\n / Ensure af-button takes full width on mobile /\n .banner__buttons {\n --af-button-width: 100%;\n }\n\n .banner__buttons af-button {\n display: block;\n width: 100%;\n }\n}\n\n/ ==========================================================================\n Small Mobile (≤480px)\n ========================================================================== /\n\n@media (max-width: 480px) {\n .banner {\n padding-top: 200px;\n }\n\n .banner__illustration {\n / Keep right-aligned, just adjust size /\n right: 0;\n width: 180px;\n height: 180px;\n }\n\n .banner__content {\n padding: 16px 20px 36px 20px;\n min-height: 280px;\n }\n\n .banner__heading {\n font-size: 28px;\n letter-spacing: -0.56px;\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype BannerTheme = 'white-ivory' \| 'mist-green' \| 'soft-clay' \| 'inkwell';\n\n/\n In-page banner component for call-to-action content.\n * \n * A banner card with illustration, heading, description, and action buttons.\n * Typically placed inside a neutral (white) Section to show off its themed background.\n * \n * The component has its own theme prop to control its background color and styling.\n * \n * Illustration Usage:\n * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,\n * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:\n * \n * ```tsx\n * import { getIllustrationUrlByScene } from '@affinda/illustrations';\n * \n * <InPageBanner\n * theme=\"inkwell\"\n * illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}\n * ...\n * />\n * ```\n * \n * Alternatively, use the `illustration` slot for completely custom content.\n /\n@Component({\n tag: 'af-in-page-banner',\n styleUrl: 'af-in-page-banner.css',\n shadow: false,\n scoped: true,\n})\nexport class AfInPageBanner {\n /* Theme - sets the banner background color and typography colors /\n @Prop() theme: BannerTheme = 'mist-green';\n\n /* Banner heading /\n @Prop() heading: string = '';\n\n /* Banner description /\n @Prop() description: string = '';\n\n /* Primary button text /\n @Prop() primaryButtonText: string = '';\n\n /* Primary button URL /\n @Prop() primaryButtonUrl: string = '#';\n\n /* Secondary button text (optional - if empty, button won't show) /\n @Prop() secondaryButtonText: string = '';\n\n /* Secondary button URL /\n @Prop() secondaryButtonUrl: string = '#';\n\n /* \n * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene() \n * from @affinda/illustrations in your app code.\n /\n @Prop() illustrationUrl: string = '';\n\n /* Whether to show the decorative wave overlay /\n @Prop() showWaveDecoration: boolean = true;\n\n /\n Renders the decorative wave SVG overlay.\n * Uses the Affinda brand \"infinity loop\" wave pattern.\n * Fill color is controlled via CSS custom properties per theme.\n /\n private renderWaveOverlay() {\n return (\n <div class=\"banner__wave-overlay\" aria-hidden=\"true\">\n <svg \n viewBox=\"0 0 521 323\" \n fill=\"none\" \n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"banner__wave-svg\"\n >\n <path \n d=\"M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z\" \n fill=\"currentColor\"\n />\n </svg>\n </div>\n );\n }\n\n render() {\n return (\n <Host>\n <div class={`banner theme-${this.theme}`}>\n {/ Decorative wave overlay /}\n {this.showWaveDecoration && this.renderWaveOverlay()}\n\n {/ Illustration area /}\n <div class=\"banner__illustration\">\n {this.illustrationUrl ? (\n <img \n src={this.illustrationUrl} \n alt=\"\" \n class=\"banner__illustration-img\" \n loading=\"lazy\"\n />\n ) : (\n <slot name=\"illustration\"></slot>\n )}\n </div>\n\n {/ Content area with typography lockup /}\n <div class=\"banner__content\">\n <div class=\"banner__copy\">\n {this.heading && (\n <h2 class=\"banner__heading\">{this.heading}</h2>\n )}\n {this.description && (\n <p class=\"banner__description\">{this.description}</p>\n )}\n </div>\n\n {/ Button group */}\n {(this.primaryButtonText \|\| this.secondaryButtonText) && (\n <div class=\"banner__buttons\">\n {this.primaryButtonText && (\n <af-button \n href={this.primaryButtonUrl}\n variant=\"primary\"\n >\n {this.primaryButtonText}\n </af-button>\n )}\n {this.secondaryButtonText && (\n <af-button \n href={this.secondaryButtonUrl}\n variant=\"secondary\"\n >\n {this.secondaryButtonText}\n </af-button>\n )}\n </div>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,i7LAAi7L;;MCkC97L,cAAc,GAAA,MAAA;AAN3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAK,CAAA,KAAA,GAAgB,YAAY;;AAGjC,QAAA,IAAO,CAAA,OAAA,GAAW,EAAE;;AAGpB,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE;;AAGxB,QAAA,IAAiB,CAAA,iBAAA,GAAW,EAAE;;AAG9B,QAAA,IAAgB,CAAA,gBAAA,GAAW,GAAG;;AAG9B,QAAA,IAAmB,CAAA,mBAAA,GAAW,EAAE;;AAGhC,QAAA,IAAkB,CAAA,kBAAA,GAAW,GAAG;AAExC;;;AAGG;AACK,QAAA,IAAe,CAAA,eAAA,GAAW,EAAE;;AAG5B,QAAA,IAAkB,CAAA,kBAAA,GAAY,IAAI;AAmF3C;AAjFC;;;;AAIG;IACK,iBAAiB,GAAA;QACvB,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,sBAAsB,iBAAa,MAAM,EAAA,EAClDA,OAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,kBAAkB,EAAA,EAExBA,OACE,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,ilBAAilB,EACnlB,IAAI,EAAC,cAAc,EACnB,CAAA,CACE,CACF;;IAIV,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,aAAA,EAAgB,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAErC,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,iBAAiB,EAAE,EAGpDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,eAAe,IACnBA,iBACE,GAAG,EAAE,IAAI,CAAC,eAAe,EACzB,GAAG,EAAC,EAAE,EACN,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAC,MAAM,EACd,CAAA,KAEFA,OAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,cAAc,EAAA,CAAQ,CAClC,CACG,EAGNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACtB,IAAI,CAAC,OAAO,KACXA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAE,EAAA,IAAI,CAAC,OAAO,CAAM,CAChD,EACA,IAAI,CAAC,WAAW,KACfA,gEAAG,KAAK,EAAC,qBAAqB,EAAA,EAAE,IAAI,CAAC,WAAW,CAAK,CACtD,CACG,EAGL,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,mBAAmB,MAClDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EACzB,IAAI,CAAC,iBAAiB,KACrBA,OACE,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAC3B,OAAO,EAAC,SAAS,EAAA,EAEhB,IAAI,CAAC,iBAAiB,CACb,CACb,EACA,IAAI,CAAC,mBAAmB,KACvBA,OAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,kBAAkB,EAC7B,OAAO,EAAC,WAAW,EAElB,EAAA,IAAI,CAAC,mBAAmB,CACf,CACb,CACG,CACP,CACG,CACF,CACD;;;;;;;"}
1	+ {"version":3,"file":"af-in-page-banner.entry.cjs.js","sources":["src/components/af-in-page-banner/af-in-page-banner.css?tag=af-in-page-banner&encapsulation=scoped","src/components/af-in-page-banner/af-in-page-banner.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* ==========================================================================\n Banner Container\n \n Design specs from Figma:\n - Desktop: max-width 1280px, gap 40px, left padding 40px, right padding 148px\n - Border radius: 32px (desktop), 24px (mobile)\n - Content padding vertical: 48px (margins/margin TB tight)\n ========================================================================== /\n\n.banner {\n position: relative;\n display: flex;\n align-items: center;\n gap: 40px;\n padding-left: 40px;\n padding-right: 148px;\n padding-top: 0;\n padding-bottom: 0;\n border-radius: var(--radii-card-level-1, 32px);\n overflow: hidden;\n max-width: 1280px;\n width: 100%;\n}\n\n/ ==========================================================================\n Theme Variants - Background Colors\n \n Colors from Figma:\n - mist-green: #c6d5d1 (background/base)\n - inkwell: #14343b (Colour/Brand/Inkwell)\n - soft-clay: #c0ab8d (softclay-400)\n - white-ivory: #fff9ee (background/ivory-paper)\n ========================================================================== /\n\n.banner.theme-mist-green {\n background-color: var(--colour-brand-mist-green, #c6d5d1);\n \n / Typography /\n --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n --banner-body-color: var(--colour-inkwell-400, #2b484f);\n \n / Buttons - ice primary, inkwell secondary /\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-inkwell {\n background-color: var(--colour-brand-inkwell, #14343b);\n \n / Typography - light colors on dark background /\n --banner-heading-color: var(--colour-brand-mist-green, #c6d5d1);\n --banner-body-color: var(--colour-inkwell-100, #d0d6d8);\n \n / Buttons - ice primary, white secondary /\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n}\n\n.banner.theme-soft-clay {\n background-color: var(--colour-softclay-400, #c0ab8d);\n \n / Typography /\n --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n --banner-body-color: var(--colour-inkwell-450, #203e45);\n \n / Buttons /\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n.banner.theme-white-ivory {\n background-color: var(--colour-brand-ivory-paper, #fff9ee);\n \n / Typography /\n --banner-heading-color: var(--colour-brand-inkwell, #14343b);\n --banner-body-color: var(--colour-inkwell-400, #2b484f);\n \n / Buttons /\n --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n}\n\n/ ==========================================================================\n Decorative Wave Overlay\n \n Figma specs:\n - Position: bottom -17.41px, right -156px\n - Size: 521px x 323px\n - Fill colors per theme\n ========================================================================== /\n\n.banner__wave-overlay {\n position: absolute;\n bottom: -17px;\n right: -156px;\n width: 521px;\n height: 323px;\n pointer-events: none;\n z-index: 0;\n}\n\n.banner__wave-svg {\n width: 100%;\n height: 100%;\n}\n\n/ ==========================================================================\n Theme-specific Wave Colors\n The SVG uses currentColor, so we set color on the overlay container.\n ========================================================================== /\n\n.banner.theme-mist-green .banner__wave-overlay {\n color: #d1ddda;\n}\n\n.banner.theme-inkwell .banner__wave-overlay {\n color: rgba(255, 255, 255, 0.06);\n}\n\n.banner.theme-soft-clay .banner__wave-overlay {\n color: rgba(20, 52, 59, 0.06);\n}\n\n.banner.theme-white-ivory .banner__wave-overlay {\n color: rgba(20, 52, 59, 0.04);\n}\n\n/ ==========================================================================\n Illustration Area\n \n Figma specs:\n - Desktop: max 360px x 360px, aspect ratio preserved\n - Mobile: 212px x 212px, positioned absolute top-right\n ========================================================================== /\n\n.banner__illustration {\n position: relative;\n z-index: 1;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 360px;\n height: 360px;\n max-width: 360px;\n max-height: 360px;\n aspect-ratio: 1;\n}\n\n.banner__illustration-img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n/ Allow slotted content to fill the illustration area /\n.banner__illustration ::slotted() {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n/* ==========================================================================\n Content Area (Typography Lockup)\n \n Figma specs:\n - Vertical padding: 48px (margins/margin TB tight)\n - Gap between copy and buttons: 40px\n - Gap between heading and description: 16px\n - Max-width for copy: 840px\n ========================================================================== /\n\n.banner__content {\n position: relative;\n z-index: 1;\n flex: 1 1 0;\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n gap: 40px;\n padding-top: var(--margins-margin-tb-tight, 48px);\n padding-bottom: var(--margins-margin-tb-tight, 48px);\n padding-right: 0;\n padding-left: 0;\n}\n\n.banner__copy {\n display: flex;\n flex-direction: column;\n gap: 16px;\n max-width: 840px;\n width: 100%;\n white-space: normal;\n}\n\n/ ==========================================================================\n Heading\n \n Figma specs:\n - Desktop: 44px, line-height 1, letter-spacing -0.88px (-2%)\n - Mobile: 32px, line-height 1, letter-spacing -0.64px (-2%)\n - Font: Typography/primaryFont (NeuSans), weight: Typography/headingWeight (500)\n ========================================================================== /\n\n.banner__heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--typography-headingweight, 500);\n font-size: 44px;\n line-height: 1;\n letter-spacing: -0.88px;\n color: var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));\n margin: 0;\n white-space: normal;\n}\n\n/ ==========================================================================\n Description\n \n Figma specs:\n - Font size: 18px\n - Line height: 26px\n - Font: Typography/primaryFont, weight: Typography/bodyWeight (400)\n - Color: typography/body-default #2b484f (or theme variant)\n ========================================================================== /\n\n.banner__description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--typography-bodyweight, 400);\n font-size: 18px;\n line-height: 26px;\n color: var(--banner-body-color, var(--colour-inkwell-400, #2b484f));\n margin: 0;\n white-space: normal;\n}\n\n/ ==========================================================================\n Button Group\n \n Figma specs:\n - Desktop: horizontal, gap 12px\n - Mobile: vertical, full-width buttons, gap 12px\n - Button padding: 24px horizontal, 12px vertical\n - Button border-radius: 9999px (radii/button)\n ========================================================================== /\n\n.banner__buttons {\n display: flex;\n flex-direction: row;\n gap: 12px;\n align-items: flex-start;\n}\n\n/ ==========================================================================\n Mobile Responsive Styles (≤768px)\n \n Figma mobile specs:\n - Width: 100%\n - Border radius: 24px\n - Padding top: 224px (space for illustration)\n - Content padding: pb 48px, pt 16px, px 28px\n - Content min-height: 320px\n - Illustration: 212px x 212px, positioned at top: 12px, centered horizontally\n ========================================================================== /\n\n@media (max-width: 768px) {\n .banner {\n flex-direction: column;\n align-items: stretch;\n padding: 224px 0 0 0;\n border-radius: var(--radii-card-level-1-mobile, 24px);\n max-width: 100%;\n min-height: auto;\n }\n\n / Wave overlay hidden on mobile /\n .banner__wave-overlay {\n display: none;\n }\n\n / Illustration positioned at top-right on mobile /\n .banner__illustration {\n position: absolute;\n top: 12px;\n left: auto;\n right: 0;\n transform: none;\n width: 212px;\n height: 212px;\n max-width: 280px;\n max-height: 280px;\n }\n\n / Content takes full width with min-height /\n .banner__content {\n width: 100%;\n min-height: 320px;\n padding: 16px 28px 48px 28px;\n gap: 40px;\n flex: none;\n }\n\n / Ensure copy section doesn't constrain width on mobile /\n .banner__copy {\n max-width: 100%;\n }\n\n / Mobile heading size /\n .banner__heading {\n font-size: 32px;\n letter-spacing: -0.64px;\n }\n\n / Buttons stack vertically on mobile, full width /\n .banner__buttons {\n flex-direction: column;\n align-items: stretch;\n gap: 12px;\n width: 100%;\n }\n\n / Ensure af-button takes full width on mobile /\n .banner__buttons {\n --af-button-width: 100%;\n }\n\n .banner__buttons af-button {\n display: block;\n width: 100%;\n }\n}\n\n/ ==========================================================================\n Small Mobile (≤480px)\n ========================================================================== /\n\n@media (max-width: 480px) {\n .banner {\n padding-top: 200px;\n }\n\n .banner__illustration {\n / Keep right-aligned, just adjust size /\n right: 0;\n width: 180px;\n height: 180px;\n }\n\n .banner__content {\n padding: 16px 20px 36px 20px;\n min-height: 280px;\n }\n\n .banner__heading {\n font-size: 28px;\n letter-spacing: -0.56px;\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\ntype BannerTheme = 'white-ivory' \| 'mist-green' \| 'soft-clay' \| 'inkwell';\n\n/\n In-page banner component for call-to-action content.\n * \n * A banner card with illustration, heading, description, and action buttons.\n * Typically placed inside a neutral (white) Section to show off its themed background.\n * \n * The component has its own theme prop to control its background color and styling.\n * \n * Illustration Usage:\n * Use `illustrationUrl` to pass an illustration image URL. For theme-matched illustrations,\n * use `getIllustrationUrlByScene()` from `@affinda/illustrations` in your consuming app:\n * \n * ```tsx\n * import { getIllustrationUrlByScene } from '@affinda/illustrations';\n * \n * <InPageBanner\n * theme=\"inkwell\"\n * illustrationUrl={getIllustrationUrlByScene('automate', 'inkwell')}\n * ...\n * />\n * ```\n * \n * Alternatively, use the `illustration` slot for completely custom content.\n \n Slot-based composition (preferred for rich content):\n * - `heading` — heading markup (overrides the `heading` prop when provided).\n * - `description` — description markup (overrides the `description` prop).\n * - `buttons` — custom button group (overrides the primary/secondary button\n * props; use when you need ghost variants, more than two buttons, or\n * per-button icons).\n * - `illustration` — custom illustration markup.\n \n The string props remain supported for simple cases.\n /\n@Component({\n tag: 'af-in-page-banner',\n styleUrl: 'af-in-page-banner.css',\n shadow: false,\n scoped: true,\n})\nexport class AfInPageBanner {\n /* Theme - sets the banner background color and typography colors /\n @Prop() theme: BannerTheme = 'mist-green';\n\n /* Banner heading /\n @Prop() heading: string = '';\n\n /* Banner description /\n @Prop() description: string = '';\n\n /* Primary button text /\n @Prop() primaryButtonText: string = '';\n\n /* Primary button URL /\n @Prop() primaryButtonUrl: string = '#';\n\n /* Secondary button text (optional - if empty, button won't show) /\n @Prop() secondaryButtonText: string = '';\n\n /* Secondary button URL /\n @Prop() secondaryButtonUrl: string = '#';\n\n /* \n * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene() \n * from @affinda/illustrations in your app code.\n /\n @Prop() illustrationUrl: string = '';\n\n /* Whether to show the decorative wave overlay /\n @Prop() showWaveDecoration: boolean = true;\n\n /\n Renders the decorative wave SVG overlay.\n * Uses the Affinda brand \"infinity loop\" wave pattern.\n * Fill color is controlled via CSS custom properties per theme.\n /\n private renderWaveOverlay() {\n return (\n <div class=\"banner__wave-overlay\" aria-hidden=\"true\">\n <svg \n viewBox=\"0 0 521 323\" \n fill=\"none\" \n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"banner__wave-svg\"\n >\n <path \n d=\"M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z\" \n fill=\"currentColor\"\n />\n </svg>\n </div>\n );\n }\n\n render() {\n return (\n <Host>\n <div class={`banner theme-${this.theme}`}>\n {/ Decorative wave overlay /}\n {this.showWaveDecoration && this.renderWaveOverlay()}\n\n {/ Illustration area /}\n <div class=\"banner__illustration\">\n {this.illustrationUrl ? (\n <img \n src={this.illustrationUrl} \n alt=\"\" \n class=\"banner__illustration-img\" \n loading=\"lazy\"\n />\n ) : (\n <slot name=\"illustration\"></slot>\n )}\n </div>\n\n {/ Content area — slots take precedence over string props. */}\n <div class=\"banner__content\">\n <div class=\"banner__copy\">\n <h2 class=\"banner__heading\">\n <slot name=\"heading\">{this.heading}</slot>\n </h2>\n <div class=\"banner__description\">\n <slot name=\"description\">{this.description}</slot>\n </div>\n </div>\n\n <div class=\"banner__buttons\">\n <slot name=\"buttons\">\n {this.primaryButtonText && (\n <af-button href={this.primaryButtonUrl} variant=\"primary\">\n {this.primaryButtonText}\n </af-button>\n )}\n {this.secondaryButtonText && (\n <af-button href={this.secondaryButtonUrl} variant=\"secondary\">\n {this.secondaryButtonText}\n </af-button>\n )}\n </slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,26LAA26L;;MC4Cx7L,cAAc,GAAA,MAAA;AAN3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAK,CAAA,KAAA,GAAgB,YAAY;;AAGjC,QAAA,IAAO,CAAA,OAAA,GAAW,EAAE;;AAGpB,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE;;AAGxB,QAAA,IAAiB,CAAA,iBAAA,GAAW,EAAE;;AAG9B,QAAA,IAAgB,CAAA,gBAAA,GAAW,GAAG;;AAG9B,QAAA,IAAmB,CAAA,mBAAA,GAAW,EAAE;;AAGhC,QAAA,IAAkB,CAAA,kBAAA,GAAW,GAAG;AAExC;;;AAGG;AACK,QAAA,IAAe,CAAA,eAAA,GAAW,EAAE;;AAG5B,QAAA,IAAkB,CAAA,kBAAA,GAAY,IAAI;AA4E3C;AA1EC;;;;AAIG;IACK,iBAAiB,GAAA;QACvB,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,sBAAsB,iBAAa,MAAM,EAAA,EAClDA,OAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,kBAAkB,EAAA,EAExBA,OACE,CAAA,MAAA,EAAA,EAAA,CAAC,EAAC,ilBAAilB,EACnlB,IAAI,EAAC,cAAc,EACnB,CAAA,CACE,CACF;;IAIV,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAErC,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,iBAAiB,EAAE,EAGpDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,eAAe,IACnBA,iBACE,GAAG,EAAE,IAAI,CAAC,eAAe,EACzB,GAAG,EAAC,EAAE,EACN,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAC,MAAM,EACd,CAAA,KAEFA,OAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,cAAc,EAAA,CAAQ,CAClC,CACG,EAGNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EACzBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,CACvC,EACLA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAA,EAC9BA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACF,EAENA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,iBAAiB,KACrBA,OAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAC,SAAS,EAAA,EACtD,IAAI,CAAC,iBAAiB,CACb,CACb,EACA,IAAI,CAAC,mBAAmB,KACvBA,OAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,IAAI,EAAE,IAAI,CAAC,kBAAkB,EAAE,OAAO,EAAC,WAAW,EAC1D,EAAA,IAAI,CAAC,mBAAmB,CACf,CACb,CACI,CACH,CACF,CACF,CACD;;;;;;;"}

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

@@ -49,7 +49,7 @@ const AfInline = class {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (index.h(index.Host, { key: '947a3a94d5b8f5d1a60132d690523ae8e842b542', style: style }, index.h("slot", { key: '7b60eb9cf33eeaf6a0002fc70ad664adaecaad8e' })));
+        return (index.h(index.Host, { key: '9f117e218b0855ddcd6417f037a7c31331bee4da', style: style }, index.h("slot", { key: '63fb41532a47018cebb4c7518c4dd6891d4ca4c4' })));
     }
 };
 AfInline.style = afInlineCss;

package/dist/cjs/af-logo-well.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const AfLogoWell = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '88b751702096b45e12c8d9394e69b6a0abd2122b' }, index.h("div", { key: '3bbdff4a72c4491b8a75359d18d0609f22811696', class: "logo-well" }, index.h("slot", { key: '6173141ef408944cd4e2b87e6cb40096a1ba3c08' }))));
+        return (index.h(index.Host, { key: '3dce73db40979d85f0ec5f467baf049e3582d8e2' }, index.h("div", { key: '7c788d3abb3ad7b1f6835d4561c3389dda007ffa', class: "logo-well" }, index.h("slot", { key: 'fa27e27c2c6204256582143b8dd00c8de5f73501' }))));
     }
 };
 AfLogoWell.style = afLogoWellCss;